Update READMEs

Author: lemonmade

src/components/ActionList/README.md

@@ -91,60 +91,39 @@ Each item in an action list should be scannable avoiding unnecessary words and a
 Use for the least important actions so the merchant isn’t distracted by secondary tasks. Can also be used for a set of actions that won’t fit in the available screen space.
 
 ```jsx
-<div style={{height: '200px'}}>
-  <Popover
-    active
-    activator={<Button>Actions</Button>}
-  >
-    <ActionList
-      items={[
-        {content: 'Import file'},
-        {content: 'Export file'},
-      ]}
-    />
-  </Popover>
-</div>
+<ActionList
+  items={[
+    {content: 'Import file'},
+    {content: 'Export file'},
+  ]}
+/>
 ```
 
 ### Action list with icons or image
 
 Use when the items benefit from an associated action or image (e.g. a list of products).
 
 ```jsx
-<div style={{height: '200px'}}>
-  <Popover
-    active
-    activator={<Button>Actions</Button>}
-  >
-    <ActionList
-      items={[
-        {content: 'Import file', icon: 'import'},
-        {content: 'Export file', icon: 'export'},
-      ]}
-    />
-  </Popover>
-</div>
+<ActionList
+  items={[
+    {content: 'Import file', icon: 'import'},
+    {content: 'Export file', icon: 'export'},
+  ]}
+/>
 ```
 
 ### Sectioned action list
 
 Use when the items benefit from sections to help differentiate actions.
 
 ```jsx
-<div style={{height: '200px'}}>
-  <Popover
-    active
-    activator={<Button>Actions</Button>}
-  >
-    <ActionList
-      sections={[{
-        title: "File options",
-        items: [
-          {content: 'Import file', icon: 'import'},
-          {content: 'Export file', icon: 'export'},
-        ]
-      }]}
-    />
-  </Popover>
-</div>
+<ActionList
+  sections={[{
+    title: "File options",
+    items: [
+      {content: 'Import file', icon: 'import'},
+      {content: 'Export file', icon: 'export'},
+    ]
+  }]}
+/>
 ```

src/components/Avatar/README.md

@@ -24,7 +24,7 @@ Avatars visually clarify the business or the person being represented at
 various locations in the interface.
 
 > **Not what you’re looking for?**
->* To create page-level layout, [use the layout component](/components/structure/layout).
+>* To show a thumbnail for an object rather than a person or business, [use the thumbnail component](/components/images-and-icons/thumbnail).
 
 ---
 

src/components/Badge/README.md

@@ -22,7 +22,7 @@ Merchants are pressed for time. They need indicators that let them identify impo
 Badges are designed as short, color-coded indicators that help merchants identify critical information quickly.
 
 >**Not what you’re looking for?**
->* To represent an interactive list of categories provided by merchants, [use tags](/components/feedback-indicators/tag).
+>* To represent an interactive list of categories provided by merchants, [use tags](/components/forms/tag).
 
 ---
 

src/components/Banner/README.md

@@ -26,7 +26,6 @@ Banners are a highly visible way to bring something to a merchant’s attention.
 > **Not what you’re looking for?**
 >* To inform merchants about a new feature or opportunity, [use callout cards](components/structure/callout-card).
 >* To group similar concepts together in the interface, [use a card](/components/structure/card).
->* To show a transient confirmation that an action was successful, [use a flash message](/components/feedback-indicators/flash-message).
 
 ---
 
@@ -224,10 +223,7 @@ including packaging.
 Use to convey general information or actions that aren’t critical. For example, you might show a banner that asks for merchant feedback. Default banners contain lower priority information and should always be dismissible.
 
 ```jsx
-<Banner
-  title="Order archived"
-  onDismiss={() => {console.log('dismissed')}}
->
+<Banner title="Order archived">
   <p>This order was archived on March 7, 2017 at 3:12pm EDT.</p>
 </Banner>
 ```
@@ -237,7 +233,7 @@ Use to convey general information or actions that aren’t critical. For example
 Make all banners dismissible, unless they contain critical information or an important action that a merchant is required to take.
 
 ```jsx
-<Banner onDismiss={() => {console.log('dismissed')}}>
+<Banner onDismiss={() => {}}>
   <p>Use your finance report to get detailed information about your business. <Link url="">Let us know what you think.</Link></p>
 </Banner>
 ```
@@ -251,7 +247,6 @@ Use when you want merchants to take an action after reading the banner.
   title="Some of your product variants are missing weights"
   status="warning"
   action={{content: 'Edit variant weights'}}
-  onDismiss={() => {console.log('dismissed')}}
 >
   <p>Add weights to show accurate rates at checkout and when buying shipping labels in Shopify.</p>
 </Banner>
@@ -266,7 +261,6 @@ Use to update merchants about a change or give them advice.
   title="USPS has updated their rates"
   action={{content: 'Learn more'}}
   status="info"
-  onDismiss={() => {console.log('dismissed')}}
 >
   <p>USPS has updated their postage rates. Make sure you know how these changes affect your store.</p>
 </Banner>
@@ -281,7 +275,6 @@ Use to inform merchants when actions are successfully completed. Include next st
   title="Your shipping label is ready to print."
   status="success"
   action={{content: 'Print label'}}
-  onDismiss={() => {console.log('dismissed')}}
 />
 ```
 

src/components/Button/README.md

@@ -87,8 +87,8 @@ Add a menu item
 | children | string | The content to display inside the button. |
 | url | string | URL to link to |
 | primary | boolean | Display as primary button |
-| destructive | boolean | Display as destuctive button |
-| disabled | boolean | Display as destuctive button |
+| destructive | boolean | Display as destructive button |
+| disabled | boolean | Display as destructive button |
 | size | enum['slim', 'large'] | Change the size of the button |
 | outline | boolean | Display an outlined button |
 | fullWidth | boolean | Display full width button |

src/components/Card/README.md

@@ -239,8 +239,7 @@ Use when you have two related but distinct pieces of information to communicate
   </Card.Section>
 
   <Card.Section>
-    <p>View a summary of your Online Store’s performance, including sales,
-    visitors, top products, and referrals.</p>
+    <p>View a summary of your Online Store’s performance, including sales, visitors, top products, and referrals.</p>
   </Card.Section>
 </Card>
 ```
@@ -256,8 +255,7 @@ Use when you have two related but distinct pieces of information to communicate
   </Card.Section>
 
   <Card.Section title="Summary">
-    <p>View a summary of your Online Store’s performance, including sales,
-    visitors, top products, and referrals.</p>
+    <p>View a summary of your Online Store’s performance, including sales, visitors, top products, and referrals.</p>
   </Card.Section>
 </Card>
 ```

src/components/DatePicker/README.md

@@ -57,17 +57,8 @@ Learn how to [format dates and numbers](/content/grammar-and-mechanics#dates-and
 Use when merchants need to select a date range close to today (today is the default starting position for the date picker).
 
 ```jsx
-<div style={{height: '320px'}}>
-  <Popover
-    activator={<Button>Datepicker</Button>}
-    active
-  >
-    <Popover.Section>
-      <DatePicker
-        month={4}
-        year={2017}
-      />
-    </Popover.Section>
-  </Popover>
-</div>
+<DatePicker
+  month={4}
+  year={2017}
+/>
 ```

src/components/DisplayText/README.md

@@ -53,7 +53,7 @@ merchants
 
 | Prop | Type | Description |
 | ---- | ---- | ----------- |
-| element | string | Name of element to use for text |
+| element | enum['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'p'] | Name of element to use for text |
 | size | enum['small', 'medium', 'large', 'extraLarge'] | Size of the text |
 | children | string or React.ReactNode | Content to display |
 

src/components/KeyboardKey/README.md

@@ -62,9 +62,5 @@ The shortcut description should describe what action will be taken if merchants
 Use to list a related set of keyboard shortcuts.
 
 ```jsx
-<p>
-  <KeyboardKey>Ctl</KeyboardKey> +
-  <KeyboardKey>Alt</KeyboardKey> +
-  <KeyboardKey>Delete</KeyboardKey>
-</p>
+<KeyboardKey>Ctrl</KeyboardKey>
 ```

src/components/Layout/README.md

@@ -203,19 +203,21 @@ Use to follow a normal section with a secondary section to create a 2/3 + 1/3 la
 Use for settings pages. When settings are grouped thematically in annotated sections, the title and description on each section helps merchants quickly find the setting they’re looking for.
 
 ```jsx
-<Layout.AnnotatedSection
-  title="Store details"
-  description="Shopify and your customers will use this information to contact you.">
-  <Card sectioned>
-    <FormLayout>
-      <TextField
-        label="Store name"
-      />
-      <TextField
-        type="email"
-        label="Account email"
-      />
-    </FormLayout>
-  </Card>
-</Layout.AnnotatedSection>
+<Layout>
+  <Layout.AnnotatedSection
+    title="Store details"
+    description="Shopify and your customers will use this information to contact you.">
+    <Card sectioned>
+      <FormLayout>
+        <TextField
+          label="Store name"
+        />
+        <TextField
+          type="email"
+          label="Account email"
+        />
+      </FormLayout>
+    </Card>
+  </Layout.AnnotatedSection>
+</Layout>
 ```