From 05e0dc3178a4da04fd67dc739cb863d037be9d04 Mon Sep 17 00:00:00 2001
From: Carl Mensah <carl@etch.co>
Date: Thu, 8 Feb 2024 12:10:00 +0000
Subject: [PATCH 1/3] docs: variations for section story with demo

---
 components/canvas/Section/Section.css        | 27 ++++++++
 components/canvas/Section/Section.stories.ts | 70 ++++++++++++++++++++
 components/canvas/Section/Section.ts         | 19 ++++++
 3 files changed, 116 insertions(+)
 create mode 100644 components/canvas/Section/Section.css
 create mode 100644 components/canvas/Section/Section.stories.ts
 create mode 100644 components/canvas/Section/Section.ts

diff --git a/components/canvas/Section/Section.css b/components/canvas/Section/Section.css
new file mode 100644
index 0000000..eb405f3
--- /dev/null
+++ b/components/canvas/Section/Section.css
@@ -0,0 +1,27 @@
+diamond-section {
+  background: var(--diamond-theme-background);
+  color: var(--diamond-theme-color);
+  height: auto;
+  padding-block: var(--diamond-spacing);
+  width: 100%;
+
+  &[padding='xs'] {
+    padding-block: var(--diamond-spacing-xs);
+  }
+
+  &[padding='sm'] {
+    padding-block: var(--diamond-spacing-sm);
+  }
+
+  &[padding='lg'] {
+    padding-block: var(--diamond-spacing-lg);
+  }
+
+  &[padding='xl'] {
+    padding-block: var(--diamond-spacing-xl);
+  }
+
+  &[padding='none'] {
+    padding-block: 0;
+  }
+}
diff --git a/components/canvas/Section/Section.stories.ts b/components/canvas/Section/Section.stories.ts
new file mode 100644
index 0000000..4b516e6
--- /dev/null
+++ b/components/canvas/Section/Section.stories.ts
@@ -0,0 +1,70 @@
+import { StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+import './Section';
+import '../../control/Button/Button';
+import '../../composition/Grid/Grid';
+import '../../composition/Grid/GridItem';
+
+export default {
+  component: 'diamond-section',
+  argTypes: {
+    theme: {
+      control: {
+        type: 'select',
+      },
+      options: ['light', 'medium', 'dark'],
+    },
+    padding: {
+      control: {
+        type: 'select',
+      },
+      options: ['xs', 'sm', 'md', 'lg', 'xl', 'none'],
+    },
+  },
+};
+
+export const Section: StoryObj = {
+  render: ({ padding, theme }) => html`
+    <diamond-section padding="${padding}" class="diamond-theme-${theme}">
+      <diamond-card>
+        <h3>Section title</h3>
+        <p>
+          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">
+              <button type="button">Button</button>
+            </diamond-button>
+          </diamond-grid-item>
+          <diamond-grid-item mobile="6" tablet="auto">
+            <diamond-button variant="primary">
+              <button type="button">Button</button>
+            </diamond-button>
+          </diamond-grid-item>
+        </diamond-grid>
+      </diamond-card>
+    </diamond-section>
+  `,
+};
+
+export const MediumTheme: StoryObj = {
+  render: Section.render,
+};
+MediumTheme.args = {
+  padding: 'md',
+  theme: 'medium',
+};
+
+export const DarkTheme: StoryObj = {
+  render: Section.render,
+};
+DarkTheme.args = {
+  padding: 'md',
+  theme: 'dark',
+};
diff --git a/components/canvas/Section/Section.ts b/components/canvas/Section/Section.ts
new file mode 100644
index 0000000..c3f30c7
--- /dev/null
+++ b/components/canvas/Section/Section.ts
@@ -0,0 +1,19 @@
+import { JSXCustomElement } from '../../../types/jsx-custom-element';
+
+export interface SectionAttributes {
+  padding?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'none';
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'diamond-section': SectionAttributes;
+  }
+}
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'diamond-section': SectionAttributes & JSXCustomElement;
+    }
+  }
+}

From 808b58548c559343acec0332a9ca4328a3513d9c Mon Sep 17 00:00:00 2001
From: Carl Mensah <carl@etch.co>
Date: Thu, 8 Feb 2024 14:48:44 +0000
Subject: [PATCH 2/3] fix: replace card with wrap, display block over explicit
 width

---
 components/canvas/Section/Section.css        |  3 +--
 components/canvas/Section/Section.stories.ts | 20 +++++---------------
 2 files changed, 6 insertions(+), 17 deletions(-)

diff --git a/components/canvas/Section/Section.css b/components/canvas/Section/Section.css
index eb405f3..811d034 100644
--- a/components/canvas/Section/Section.css
+++ b/components/canvas/Section/Section.css
@@ -1,9 +1,8 @@
 diamond-section {
   background: var(--diamond-theme-background);
   color: var(--diamond-theme-color);
-  height: auto;
+  display: block;
   padding-block: var(--diamond-spacing);
-  width: 100%;
 
   &[padding='xs'] {
     padding-block: var(--diamond-spacing-xs);
diff --git a/components/canvas/Section/Section.stories.ts b/components/canvas/Section/Section.stories.ts
index 4b516e6..bd34457 100644
--- a/components/canvas/Section/Section.stories.ts
+++ b/components/canvas/Section/Section.stories.ts
@@ -5,6 +5,7 @@ import './Section';
 import '../../control/Button/Button';
 import '../../composition/Grid/Grid';
 import '../../composition/Grid/GridItem';
+import '../../composition/Wrap/Wrap';
 
 export default {
   component: 'diamond-section',
@@ -27,7 +28,7 @@ export default {
 export const Section: StoryObj = {
   render: ({ padding, theme }) => html`
     <diamond-section padding="${padding}" class="diamond-theme-${theme}">
-      <diamond-card>
+      <diamond-wrap>
         <h3>Section title</h3>
         <p>
           Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
@@ -48,23 +49,12 @@ export const Section: StoryObj = {
             </diamond-button>
           </diamond-grid-item>
         </diamond-grid>
-      </diamond-card>
+      </diamond-wrap>
     </diamond-section>
   `,
 };
 
-export const MediumTheme: StoryObj = {
-  render: Section.render,
-};
-MediumTheme.args = {
-  padding: 'md',
-  theme: 'medium',
-};
-
-export const DarkTheme: StoryObj = {
-  render: Section.render,
-};
-DarkTheme.args = {
+Section.args = {
   padding: 'md',
-  theme: 'dark',
+  theme: 'light',
 };

From 2f3c1c4d1ef8de097a9a8bfbe3e0c0e496a4d52f Mon Sep 17 00:00:00 2001
From: Gavyn McKenzie <gavyn@etch.co>
Date: Thu, 8 Feb 2024 14:52:33 +0000
Subject: [PATCH 3/3] refactor: secondary button

---
 components/canvas/Section/Section.stories.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/components/canvas/Section/Section.stories.ts b/components/canvas/Section/Section.stories.ts
index bd34457..b6939ce 100644
--- a/components/canvas/Section/Section.stories.ts
+++ b/components/canvas/Section/Section.stories.ts
@@ -44,7 +44,7 @@ export const Section: StoryObj = {
             </diamond-button>
           </diamond-grid-item>
           <diamond-grid-item mobile="6" tablet="auto">
-            <diamond-button variant="primary">
+            <diamond-button>
               <button type="button">Button</button>
             </diamond-button>
           </diamond-grid-item>