Merge pull request #62 from etchteam/feature/etch-369-help-text-for-i…

…nputs Help text component
etchteam · May 28, 2024 · 7a053bc · 7a053bc
2 parents a91f613 + 720b703
commit 7a053bc
Show file tree

Hide file tree

Showing 7 changed files with 122 additions and 4 deletions.
diff --git a/components/composition/FormGroup/FormGroup.stories.ts b/components/composition/FormGroup/FormGroup.stories.ts
@@ -25,7 +25,7 @@ export const FormGroup: StoryObj = {
       <diamond-input>
         <input id="name" type="text" />
       </diamond-input>
-      <p>Help text</p>
+      <diamond-help-text>Help text</diamond-help-text>
     </diamond-form-group>
   `,
 };
@@ -56,7 +56,7 @@ export const ComposingElements: StoryObj = {
       <diamond-input>
         <input id="composing-elements" type="text" />
       </diamond-input>
-      <p>Help text</p>
+      <diamond-help-text>Help text</diamond-help-text>
     </diamond-form-group>
   `,
 };
@@ -69,3 +69,16 @@ ComposingElements.parameters = {
     },
   },
 };
+
+export const FormGroupValidationError: StoryObj = {
+  render: (args) => html`
+    <diamond-form-group orientation="${args.orientation}">
+      <label for="name">Form group label</label>
+      <diamond-help-text state="error">Error message</diamond-help-text>
+      <diamond-input state="invalid">
+        <input id="name" type="text" />
+      </diamond-input>
+      <diamond-help-text>Help text</diamond-help-text>
+    </diamond-form-group>
+  `,
+};
diff --git a/components/content/HelpText/HelpText.css b/components/content/HelpText/HelpText.css
@@ -0,0 +1,12 @@
+diamond-help-text {
+  color: var(--diamond-help-text-color);
+  font-size: var(--diamond-help-text-font-size);
+
+  &[state='valid'] {
+    color: var(--diamond-help-text-color-valid);
+  }
+
+  &[state='invalid'] {
+    color: var(--diamond-help-text-color-invalid);
+  }
+}
diff --git a/components/content/HelpText/HelpText.stories.ts b/components/content/HelpText/HelpText.stories.ts
@@ -0,0 +1,66 @@
+import { StoryObj } from '@storybook/web-components';
+import { html } from 'lit';
+
+import './HelpText';
+import '../Icon/Icon';
+
+export default {
+  component: 'diamond-help-text',
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A piece of text to provide additional information or context for form inputs, including form validation messages.',
+      },
+    },
+  },
+  argTypes: {
+    state: {
+      control: {
+        type: 'select',
+      },
+      options: ['valid', 'invalid'],
+    },
+  },
+};
+
+export const HelpText: StoryObj = {
+  render: ({ state }) => html`
+    <diamond-help-text state="${state}">
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua.
+    </diamond-help-text>
+  `,
+};
+
+HelpText.args = {
+  state: '',
+};
+
+export const HelpTextWithFormatting: StoryObj = {
+  render: ({ state }) => html`
+    <diamond-help-text state="${state}" class="diamond-text-size-md">
+      <a href="#">Lorem ipsum</a>
+      dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+      incididunt ut labore et
+      <span class="diamond-text-weight-bold">dolore magna aliqua.</span>
+    </diamond-help-text>
+  `,
+};
+
+export const HelpTextWithIcon: StoryObj = {
+  render: ({ state }) => html`
+    <diamond-help-text state="${state}">
+      <diamond-icon>
+        <svg fill="none" viewBox="0 0 24 24" height="24" width="24">
+          <path
+            d="M2 6C2 4.89543 2.89543 4 4 4H20C21.1046 4 22 4.89543 22 6V18C22 19.1046 21.1046 20 20 20H4C2.89543 20 2 19.1046 2 18V6ZM5.51859 6L12 11.6712L18.4814 6H5.51859ZM20 7.32877L12.6585 13.7526C12.2815 14.0825 11.7185 14.0825 11.3415 13.7526L4 7.32877V18H20V7.32877Z"
+            fill="currentColor"
+          ></path>
+        </svg>
+      </diamond-icon>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+      tempor incididunt ut labore et dolore magna aliqua.
+    </diamond-help-text>
+  `,
+};
diff --git a/components/content/HelpText/HelpText.ts b/components/content/HelpText/HelpText.ts
@@ -0,0 +1,19 @@
+import { JSXCustomElement } from '../../../types/jsx-custom-element';
+
+export interface HelpTextAttributes {
+  state?: 'valid' | 'invalid';
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'diamond-help-text': HelpTextAttributes;
+  }
+}
+
+declare module 'react' {
+  namespace JSX {
+    interface IntrinsicElements {
+      'diamond-help-text': JSXCustomElement<HelpTextAttributes>;
+    }
+  }
+}
diff --git a/styles/tokens/color.css b/styles/tokens/color.css
@@ -17,4 +17,7 @@
   --diamond-color-green-100: #219653;
 
   --diamond-color-red-100: #eb5757;
+
+  --diamond-color-valid: var(--diamond-color-green-100);
+  --diamond-color-invalid: var(--diamond-color-red-100);
 }
diff --git a/styles/tokens/input.css b/styles/tokens/input.css
@@ -7,8 +7,8 @@
   --diamond-input-border-radius: var(--diamond-radius);
   --diamond-input-border-color: var(--diamond-theme-border-color);
   --diamond-input-border-color-hover: var(--diamond-theme-border-color-hover);
-  --diamond-input-border-color-valid: var(--diamond-color-green-100);
-  --diamond-input-border-color-invalid: var(--diamond-color-red-100);
+  --diamond-input-border-color-valid: var(--diamond-color-valid);
+  --diamond-input-border-color-invalid: var(--diamond-color-invalid);
 
   --diamond-input-outline-offset: 4px;
 

diff --git a/styles/tokens/label.css b/styles/tokens/label.css
@@ -3,4 +3,9 @@
   --diamond-label-font-weight: var(--diamond-font-weight-base);
   --diamond-label-font-size: var(--diamond-font-size-base);
   --diamond-label-height: var(--diamond-spacing-thumb);
+
+  --diamond-help-text-color: var(--diamond-theme-color);
+  --diamond-help-text-color-valid: var(--diamond-color-valid);
+  --diamond-help-text-color-invalid: var(--diamond-invalid);
+  --diamond-help-text-font-size: var(--diamond-font-size-sm);
 }