add improved example

src/components/Sheet/README.md

@@ -65,18 +65,28 @@ Use as the default option for a sheet.
 ```jsx
 class SheetExample extends React.Component {
   state = {
-    sheetActive: false,
-    newsletter: false,
-    email: '',
+    sheetActive: true,
+    title: 'Big yellow socks',
+    description:
+      "They're big, yellow socks. What more could you possibly want from socks? These socks will change your life.\n\nThey're made from light, hand-loomed cotton that's so soft, you'll feel like you are walking on a cloud.\n\nBut don't take our word for it, order a pair and try them out today. With a money-back guarantee, we're sure you'll love these socks, or we'll fully refund your purchase.",
+    salesChannels: [
+      {value: 'onlineStore', label: 'Online Store'},
+      {value: 'facebook', label: 'Facebook'},
+      {value: 'googleShopping', label: 'Google shopping'},
+      {value: 'facebookMarketing', label: 'Facebook Marketing'},
+    ],
+    selected: [],
   };
 
   render() {
     const {
-      state: {sheetActive, newsletter, email},
+      state: {sheetActive, title, description, salesChannels, selected},
       handleCloseSheet,
+      handleOpenSheet,
       handleChange,
       handleToggleSheet,
-      handleSubmit,
+      hasSelectedSalesChannels,
+      selectedSalesChannels,
     } = this;
 
     const theme = {
@@ -96,12 +106,63 @@ class SheetExample extends React.Component {
       },
     };
 
+    const salesChannelsCardMarkup = hasSelectedSalesChannels ? (
+      <List>
+        {selectedSalesChannels.map((channel, index) => (
+          <List.Item key={index}>{channel}</List.Item>
+        ))}
+      </List>
+    ) : (
+      <div
+        style={{
+          alignItems: 'center',
+          display: 'flex',
+          justifyContent: 'space-between',
+          width: '100%',
+        }}
+      >
+        <p>No sales channels selected</p>
+        <Button onClick={handleToggleSheet}>Manage sales channels</Button>
+      </div>
+    );
+
+    const salesChannelAction = hasSelectedSalesChannels
+      ? [
+          {
+            onAction: handleOpenSheet,
+            content: 'Manage sales channels',
+          },
+        ]
+      : null;
+
     return (
       <AppProvider theme={theme}>
         <Frame topBar={<TopBar />}>
-          <Page title="Sheet">
+          <Page singleColumn title="Big yellow socks">
             <Card sectioned>
-              <Button onClick={handleToggleSheet}>Open sheet</Button>
+              <FormLayout>
+                <TextField
+                  label="Title"
+                  onChange={handleChange('title')}
+                  value={title}
+                  readOnly
+                />
+                <TextField
+                  label="Description"
+                  onChange={handleChange('description')}
+                  value={description}
+                  multiline
+                  readOnly
+                />
+              </FormLayout>
+            </Card>
+            <Card
+              sectioned
+              subdued
+              title="Product availability"
+              actions={salesChannelAction}
+            >
+              {salesChannelsCardMarkup}
             </Card>
             <Sheet open={sheetActive} onClose={handleCloseSheet}>
               <div
@@ -121,7 +182,7 @@ class SheetExample extends React.Component {
                     width: '100%',
                   }}
                 >
-                  <Heading>Sign up</Heading>
+                  <Heading>Manage sales channels</Heading>
                   <Button
                     accessibilityLabel="Cancel"
                     icon="cancel"
@@ -130,30 +191,12 @@ class SheetExample extends React.Component {
                   />
                 </div>
                 <Scrollable style={{padding: '1.6rem', height: '100%'}}>
-                  <Form onSubmit={handleSubmit}>
-                    <FormLayout>
-                      <Checkbox
-                        label="Sign up for the Polaris newsletter"
-                        checked={newsletter}
-                        onChange={handleChange('newsletter')}
-                      />
-
-                      <TextField
-                        value={email}
-                        onChange={handleChange('email')}
-                        label="Email"
-                        type="email"
-                        helpText={
-                          <span>
-                            We’ll use this email address to inform you on future
-                            changes to Polaris.
-                          </span>
-                        }
-                      />
-
-                      <Button submit>Submit</Button>
-                    </FormLayout>
-                  </Form>
+                  <ChoiceList
+                    choices={salesChannels}
+                    selected={selected}
+                    allowMultiple
+                    onChange={handleChange('selected')}
+                  />
                 </Scrollable>
                 <div
                   style={{
@@ -165,7 +208,10 @@ class SheetExample extends React.Component {
                     width: '100%',
                   }}
                 >
-                  <p>Some footer content</p>
+                  <Button onClick={handleCloseSheet}>Cancel</Button>
+                  <Button primary onClick={handleCloseSheet}>
+                    Done
+                  </Button>
                 </div>
               </div>
             </Sheet>
@@ -193,13 +239,26 @@ class SheetExample extends React.Component {
     sheetActive ? handleCloseSheet() : handleOpenSheet();
   };
 
-  handleSubmit = (_event) => {
-    this.setState({newsletter: false, email: ''});
-  };
-
   handleChange = (field) => {
     return (value) => this.setState({[field]: value});
   };
+
+  get hasSelectedSalesChannels() {
+    return this.selectedSalesChannels.length > 0;
+  }
+
+  get selectedSalesChannels() {
+    const {salesChannels, selected} = this.state;
+
+    const salesChannelsObj = salesChannels.reduce((accumulator, current) => {
+      accumulator[current.value] = current.label;
+      return accumulator;
+    }, {});
+
+    return selected.map((element) => {
+      return salesChannelsObj[element];
+    });
+  }
 }
 ```