From 016453314daf39375077b66857524e79352dc315 Mon Sep 17 00:00:00 2001
From: Dan Webb <dan@etch.co>
Date: Fri, 9 Feb 2024 08:20:41 +0000
Subject: [PATCH 1/2] feat: form group component

---
 .../composition/FormGroup/FormGroup.css       | 16 +++++
 .../FormGroup/FormGroup.stories.ts            | 68 +++++++++++++++++++
 components/composition/FormGroup/FormGroup.ts | 19 ++++++
 3 files changed, 103 insertions(+)
 create mode 100644 components/composition/FormGroup/FormGroup.css
 create mode 100644 components/composition/FormGroup/FormGroup.stories.ts
 create mode 100644 components/composition/FormGroup/FormGroup.ts

diff --git a/components/composition/FormGroup/FormGroup.css b/components/composition/FormGroup/FormGroup.css
new file mode 100644
index 0000000..6853087
--- /dev/null
+++ b/components/composition/FormGroup/FormGroup.css
@@ -0,0 +1,16 @@
+diamond-form-group {
+  display: grid;
+  gap: var(--diamond-spacing);
+
+  &[orientation='horizontal'] {
+    grid-template-columns: 1fr 1fr;
+
+    :first-child {
+      grid-column: 1;
+    }
+
+    :not(:first-child) {
+      grid-column: 2;
+    }
+  }
+}
diff --git a/components/composition/FormGroup/FormGroup.stories.ts b/components/composition/FormGroup/FormGroup.stories.ts
new file mode 100644
index 0000000..3849234
--- /dev/null
+++ b/components/composition/FormGroup/FormGroup.stories.ts
@@ -0,0 +1,68 @@
+import { StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+import '../../control/Input/Input';
+import '../../composition/Grid/Grid';
+import '../../composition/Grid/GridItem';
+import './FormGroup';
+
+export default {
+  component: 'diamond-form-group',
+  argTypes: {
+    orientation: {
+      control: {
+        type: 'select',
+      },
+      options: ['horizontal', 'vertical'],
+    },
+  },
+};
+
+export const FormGroup: StoryObj = {
+  render: (args) => html`
+    <diamond-form-group orientation="${args.orientation}">
+      <label for="name">Form group</label>
+      <diamond-input>
+        <input id="name" type="text" />
+      </diamond-input>
+    </diamond-form-group>
+  `,
+};
+
+export const ComposingElements: StoryObj = {
+  render: () => html`
+    <diamond-form-group orientation="horizontal">
+      <diamond-grid>
+        <diamond-grid-item grow="grow">
+          <label for="name">Form group</label>
+        </diamond-grid-item>
+        <diamond-grid-item>
+          <svg
+            viewBox="0 0 24 24"
+            stroke="currentColor"
+            width="24"
+            height="24"
+            aria-hidden="true"
+          >
+            <path
+              d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
+            />
+          </svg>
+        </diamond-grid-item>
+      </diamond-grid>
+      <diamond-input>
+        <input id="name" type="text" />
+      </diamond-input>
+      <p>Help text</p>
+    </diamond-form-group>
+  `,
+};
+
+ComposingElements.parameters = {
+  docs: {
+    description: {
+      story:
+        'The form group expects the first child element to be label-like, but its not opinionated about what elements are used.',
+    },
+  },
+};
diff --git a/components/composition/FormGroup/FormGroup.ts b/components/composition/FormGroup/FormGroup.ts
new file mode 100644
index 0000000..a34cd12
--- /dev/null
+++ b/components/composition/FormGroup/FormGroup.ts
@@ -0,0 +1,19 @@
+import { JSXCustomElement } from '../../../types/jsx-custom-element';
+
+export interface FormGroupAttributes {
+  orientation?: 'horizontal' | 'vertical';
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'diamond-form-group': FormGroupAttributes;
+  }
+}
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'diamond-form-group': FormGroupAttributes & JSXCustomElement;
+    }
+  }
+}

From 1b5d0800737b58d74f6dd3b609f3bee7dba22b78 Mon Sep 17 00:00:00 2001
From: Dan Webb <dan@etch.co>
Date: Fri, 9 Feb 2024 08:52:30 +0000
Subject: [PATCH 2/2] feat: form group spacing tidy

---
 .../composition/FormGroup/FormGroup.css       | 21 ++++++++++++-------
 .../FormGroup/FormGroup.stories.ts            | 12 ++++++-----
 2 files changed, 20 insertions(+), 13 deletions(-)

diff --git a/components/composition/FormGroup/FormGroup.css b/components/composition/FormGroup/FormGroup.css
index 6853087..38838f7 100644
--- a/components/composition/FormGroup/FormGroup.css
+++ b/components/composition/FormGroup/FormGroup.css
@@ -1,16 +1,21 @@
 diamond-form-group {
   display: grid;
-  gap: var(--diamond-spacing);
+  gap: var(--diamond-spacing-sm);
 
-  &[orientation='horizontal'] {
-    grid-template-columns: 1fr 1fr;
+  label {
+    /* Negate the extra label height to account for the form group gap */
+    margin-block: calc(
+      (var(--diamond-label-height) / var(--diamond-font-line-height) / 4) * -1
+    );
+  }
 
-    :first-child {
-      grid-column: 1;
-    }
+  @media (width >= 768px) {
+    &[orientation='horizontal'] {
+      grid-template-columns: 1fr 1fr;
 
-    :not(:first-child) {
-      grid-column: 2;
+      :not(:first-child) {
+        grid-column: 2;
+      }
     }
   }
 }
diff --git a/components/composition/FormGroup/FormGroup.stories.ts b/components/composition/FormGroup/FormGroup.stories.ts
index 3849234..c141dc4 100644
--- a/components/composition/FormGroup/FormGroup.stories.ts
+++ b/components/composition/FormGroup/FormGroup.stories.ts
@@ -21,10 +21,11 @@ export default {
 export const FormGroup: StoryObj = {
   render: (args) => html`
     <diamond-form-group orientation="${args.orientation}">
-      <label for="name">Form group</label>
+      <label for="name">Form group label</label>
       <diamond-input>
         <input id="name" type="text" />
       </diamond-input>
+      <p>Help text</p>
     </diamond-form-group>
   `,
 };
@@ -32,17 +33,18 @@ export const FormGroup: StoryObj = {
 export const ComposingElements: StoryObj = {
   render: () => html`
     <diamond-form-group orientation="horizontal">
-      <diamond-grid>
+      <diamond-grid align-items="center">
         <diamond-grid-item grow="grow">
-          <label for="name">Form group</label>
+          <label for="composing-elements">Form group label</label>
         </diamond-grid-item>
         <diamond-grid-item>
           <svg
             viewBox="0 0 24 24"
             stroke="currentColor"
+            fill="none"
             width="24"
             height="24"
-            aria-hidden="true"
+            aria-label="A random icon for example placement"
           >
             <path
               d="M3 8l7.89 5.26a2 2 0 002.22 0L21 8M5 19h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"
@@ -51,7 +53,7 @@ export const ComposingElements: StoryObj = {
         </diamond-grid-item>
       </diamond-grid>
       <diamond-input>
-        <input id="name" type="text" />
+        <input id="composing-elements" type="text" />
       </diamond-input>
       <p>Help text</p>
     </diamond-form-group>