Add mobile guidelines to card component (#1784)

Author: paulstairmand

CHANGELOG.md

@@ -6,6 +6,10 @@ The format is based on [these versioning and changelog guidelines][changelog-gui
 
 ## Unreleased
 
+## Documentation
+
+- Added iOS and Android examples for the card component ([#1784](https://github.com/Shopify/polaris-react/pull/1784))
+
 ### Bug fixes
 
 - Remove stickyManager from app provider props interface ([#1706](https://github.com/Shopify/polaris-react/pull/1706))

src/components/Card/README.md

@@ -1,6 +1,10 @@
 ---
 name: Card
 category: Structure
+platforms:
+  - android
+  - ios
+  - web
 keywords:
   - layout
   - container
@@ -200,10 +204,26 @@ Use when you have a simple message to communicate to merchants that doesn’t re
 </Card>
 ```
 
+<!-- content-for: android -->
+
+![Default card with a title and a short body](components/Card/android/default.png)
+
+<!-- /content-for -->
+
+<!-- content-for: ios -->
+
+![Default card with a title and a short body](components/Card/ios/default.png)
+
+<!-- /content-for -->
+
 ### Card with header actions
 
+<!-- content-for: web -->
+
 Use for less important card actions, or actions the merchant may do before reviewing the contents of the card. For example, a merchant may want to add items to a card containing a long list, or enter a customer’s new address.
 
+<!-- /content-for -->
+
 ```jsx
 <Card sectioned title="Variants" actions={[{content: 'Add variant'}]}>
   <p>
@@ -213,10 +233,35 @@ Use for less important card actions, or actions the merchant may do before revie
 </Card>
 ```
 
+<!-- content-for: ios, android -->
+
+Use for less important card actions, or actions the merchant may do before reviewing the contents of the card.
+
+- Use an icon for the action, if possible
+- Include no more than 2 actions
+
+<!-- /content-for -->
+
+<!-- content-for: android -->
+
+![Card with a title (Conditions), a short body and a header action to add a condition](components/Card/android/header-actions.png)
+
+<!-- /content-for -->
+
+<!-- content-for: ios -->
+
+![Card with a title (Conditions), a short body and a header action to add a condition](components/Card/ios/header-actions.png)
+
+<!-- /content-for -->
+
 ### Card with footer actions
 
+<!-- content-for: web -->
+
 Use footer actions for a card’s most important actions, or actions merchants should do after reviewing the contents of the card. For example, a merchant should review the contents of a shipment before important actions like cancelling or adding tracking information.
 
+<!-- /content-for -->
+
 ```jsx
 <Card
   title="Shipment 1234"
@@ -232,6 +277,27 @@ Use footer actions for a card’s most important actions, or actions merchants s
 </Card>
 ```
 
+<!-- content-for: android, ios -->
+
+Use footer actions for a card’s most important actions, or actions merchants should do after reviewing the contents of the card.
+
+- Use buttons with labels
+- If you have more than 2 actions, consider using an overflow menu on the card
+
+<!-- /content-for -->
+
+<!-- content-for: android -->
+
+![Card featuring footer actions: add variant, edit options](components/Card/android/footer-actions.png)
+
+<!-- /content-for -->
+
+<!-- content-for: ios -->
+
+![Card featuring footer actions: add variant, edit options](components/Card/ios/footer-actions.png)
+
+<!-- /content-for -->
+
 ### Card with multiple sections
 
 Use when you have two related but distinct pieces of information to communicate to merchants. Multiple sections can help break up complicated concepts to make them easier to scan and understand.
@@ -251,6 +317,18 @@ Use when you have two related but distinct pieces of information to communicate
 </Card>
 ```
 
+<!-- content-for: android -->
+
+![Shipping costs card with multiple sections: domestic, international](components/Card/android/multiple-sections.png)
+
+<!-- /content-for -->
+
+<!-- content-for: ios -->
+
+![Shipping costs card with multiple sections: domestic, international](components/Card/ios/multiple-sections.png)
+
+<!-- /content-for -->
+
 ### Card with multiple titled sections
 
 Use when you have two related but distinct pieces of information to communicate to merchants that are complex enough to require a title to introduce them.
@@ -270,8 +348,22 @@ Use when you have two related but distinct pieces of information to communicate
 </Card>
 ```
 
+<!-- content-for: android -->
+
+![Customer card with multiple titled sections: note, shipping address](components/Card/android/multiple-titled-sections.png)
+
+<!-- /content-for -->
+
+<!-- content-for: ios -->
+
+![Customer card with multiple titled sections: note, shipping address](components/Card/ios/multiple-titled-sections.png)
+
+<!-- /content-for -->
+
 ### Card with a subdued section
 
+<!-- example-for: web -->
+
 Use to indicate when one of the sections in your card contains inactive or disabled content.
 
 ```jsx
@@ -294,6 +386,8 @@ Use to indicate when one of the sections in your card contains inactive or disab
 
 ### Subdued card for secondary content
 
+<!-- example-for: web -->
+
 Use for content that you want to deprioritize. Subdued cards don’t stand out as much as cards with white backgrounds so don’t use them for information or actions that are critical to merchants.
 
 ```jsx