Merge pull request #66 from etchteam/feature/etch-543-better-section-…

…docs Feature/etch 543 better section docs
etchteam · Jun 3, 2024 · 7e93423 · 7e93423
2 parents d5ce15b + 4789f3b
commit 7e93423
Showing 1 changed file with 60 additions and 7 deletions.
diff --git a/components/canvas/Section/Section.stories.ts b/components/canvas/Section/Section.stories.ts
@@ -7,8 +7,26 @@ import '../../composition/Grid/Grid';
 import '../../composition/Grid/GridItem';
 import '../../composition/Wrap/Wrap';
 
+const description = `
+A section component represents a horizontal slice of a page.
+
+Multiple sections and themes can be used to create visibly grouped parts
+of the page with different backgrounds.
+
+Sections support theming, applying a background colour and default
+text colour based on the current theme as well as vertical spacing.
+`;
+
 export default {
   component: 'diamond-section',
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      description: {
+        component: description,
+      },
+    },
+  },
   argTypes: {
     theme: {
       control: {
@@ -38,9 +56,9 @@ export default {
 export const Section: StoryObj = {
   render: ({ padding, theme }) => html`
     <diamond-section padding="${padding}" class="diamond-theme-${theme}">
-      <diamond-wrap>
+      <diamond-wrap size="lg">
         <h3>Section title</h3>
-        <p>
+        <p class="diamond-spacing-bottom-lg">
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
           eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
           minim veniam. Lorem ipsum dolor sit amet, consectetur adipiscing elit,
@@ -49,13 +67,13 @@ export const Section: StoryObj = {
         </p>
         <diamond-grid>
           <diamond-grid-item mobile="6" tablet="auto">
-            <diamond-button variant="primary">
-              <button type="button">Button</button>
+            <diamond-button variant="primary" width="full-width-mobile">
+              <button type="button">Button text</button>
             </diamond-button>
           </diamond-grid-item>
           <diamond-grid-item mobile="6" tablet="auto">
-            <diamond-button>
-              <button type="button">Button</button>
+            <diamond-button width="full-width-mobile">
+              <button type="button">Button text</button>
             </diamond-button>
           </diamond-grid-item>
         </diamond-grid>
@@ -65,6 +83,41 @@ export const Section: StoryObj = {
 };
 
 Section.args = {
-  padding: 'md',
+  padding: 'fluid',
   theme: 'light',
 };
+
+export const Theming = {
+  render() {
+    return html`
+      ${['light', 'medium', 'dark'].map(
+        (theme) => html`
+          <diamond-section padding="fluid" class="diamond-theme-${theme}">
+            <diamond-wrap size="lg">
+              <h3>Section title</h3>
+              <p class="diamond-spacing-bottom-lg">
+                Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+                eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut
+                enim ad minim veniam. Lorem ipsum dolor sit amet, consectetur
+                adipiscing elit, sed do eiusmod tempor incididunt ut labore et
+                dolore magna aliqua. Ut enim ad minim veniam.
+              </p>
+              <diamond-grid>
+                <diamond-grid-item mobile="6" tablet="auto">
+                  <diamond-button variant="primary" width="full-width-mobile">
+                    <button type="button">Button text</button>
+                  </diamond-button>
+                </diamond-grid-item>
+                <diamond-grid-item mobile="6" tablet="auto">
+                  <diamond-button width="full-width-mobile">
+                    <button type="button">Button text</button>
+                  </diamond-button>
+                </diamond-grid-item>
+              </diamond-grid>
+            </diamond-wrap>
+          </diamond-section>
+        `,
+      )}
+    `;
+  },
+};