fix(input): updates to error-text prop

libs/core/src/components/sage-input/readme.md

@@ -30,6 +30,24 @@
 |      | Content is placed between the opening closing tags |
 
 
+## CSS Custom Properties
+
+| Name                    | Description                                   |
+| ----------------------- | --------------------------------------------- |
+| `--background`          | Background of the input                       |
+| `--background-disabled` | Background color of a disabled input          |
+| `--border-default`      | Border color of the input text                |
+| `--color`               | Color of the input text                       |
+| `--color-error`         | Color of the input text when error is present |
+| `--color-hover`         | Border color of the input text when hovered   |
+| `--field-font-size`     | Font size of the field text                   |
+| `--field-font-weight`   | Font weight of the field text                 |
+| `--field-line-height`   | Line height of the field text                 |
+| `--label-font-size`     | Font size of the label text                   |
+| `--label-font-weight`   | Font weight of the label text                 |
+| `--label-line-height`   | Line height of the label text                 |
+
+
 ----------------------------------------------
 
 

libs/core/src/components/sage-input/sage-input.scss

@@ -66,7 +66,7 @@ input {
     background-color: #f9fafa;
   }
 
-  &:has(~.sage-input__hint1) {
+  &:has(~.sage-input__error-text) {
     border-color: #cf3c32;
   }
 }
@@ -79,14 +79,14 @@ input:focus {
   box-shadow: 0 0 0 4px #8ecafb;
 }
 
-.sage-input__hint1,
+.sage-input__error-text,
 .sage-input__hint {
   font-size: 14px;
   line-height: 20px;
   margin-bottom: 0;
   margin-top: 8px;
 }
 
-.sage-input__hint1 {
+.sage-input__error-text {
   color: #cf3c32;
 }

libs/core/src/components/sage-input/sage-input.tsx

@@ -78,7 +78,7 @@ export class SageInput {
   }
 
   render() {
-    const {disabled} = this;
+    // const {disabled} = this;
     return (
       <Host
         aria-disabled={this.disabled ? 'true' : null}
@@ -97,7 +97,7 @@ export class SageInput {
             onInput={(event) => this.handleChange(event)}
           />
           {this.hint
-            ? <p class="sage-input__hint1">{this.hint}</p>
+            ? <p class="sage-input__hint">{this.hint}</p>
             : ''
           }
           {/* TODO: why is this not showing in the DOM? */}

libs/core/src/components/sage-input/stories/sage-input.stories.mdx

@@ -19,7 +19,7 @@ import { extractArgTypes } from '@pxtrn/storybook-addon-docs-stencil';
 
 export const Template = (args) => html`<sage-input
   disabled="${args.disabled}"
-  errorText="${args.errorText}"
+  error-text="${args.errorText}"
   hint="${args.hint}"
   label="${args.label}"
   name="${args.name}"
@@ -75,7 +75,7 @@ export const Template = (args) => html`<sage-input
 
 ### Error
 <Canvas>
-  <Story name="Error" args={{ errorText:'Please provide descriptive error text', hint: 'Please use the correct format', label: 'Email', type: 'email', value: '[email protected]' }}>
+  <Story name="Error" args={{ errortext:'Please provide descriptive error text', label: 'Email', type: 'email', value: '[email protected]' }}>
     {Template.bind()}
   </Story>
 </Canvas>

libs/core/src/components/sage-input/test/sage-input.e2e.ts

@@ -17,4 +17,20 @@ describe('sage-input', () => {
     value = await element.getProperty('disabled');
     expect(value).toBe(true);
   });
+
+  it('toggles an error state', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<sage-input></sage-input>');
+    const component = await page.find('sage-input');
+    expect(component).toHaveClass('hydrated');
+
+    const element = await page.find('sage-input >>> input');
+    let value = await element.getProperty('error-text');
+    expect(value).toBe(false);
+
+    component.setProperty('error-text', 'true');
+    await page.waitForChanges();
+    value = await element.getProperty('error-text');
+    expect(value).toBe(true);
+  });
 });

libs/core/src/components/sage-input/test/sage-input.spec.tsx

@@ -45,7 +45,7 @@ describe('sage-input', () => {
       html: `<sage-input disabled="true" id="field-1" value="Frank Dux"></sage-input>`
     });
     expect(root).toEqualHtml(`
-    <sage-input id="field-1" disabled="true" value="Frank Dux">
+    <sage-input aria-disabled="true" id="field-1" disabled="true" value="Frank Dux">
       <mock:shadow-root>
         <div class="sage-input">
           <label htmlFor="field-1">
@@ -87,10 +87,30 @@ describe('sage-input', () => {
           <label htmlFor="field-1">
           </label>
           <input id="field-1" class="sage-input__field" type="text" value="Frank Dux" />
-          <p>Use the correct syntax</p>
+          <p class="sage-input__hint">Use the correct syntax</p>
         </div>
       </mock:shadow-root>
     </sage-input>
     `);
   });
+
+  it('renders a error', async () => {
+    const { root } = await newSpecPage({
+      components: [SageInput],
+      html: `<sage-input errorText="Please provide a helpful error message" id="field-1" value="Frank Dux"></sage-input>`
+    });
+    expect(root).toEqualHtml(`
+    <sage-input errorText="Please provide a helpful error message" id="field-1" value="Frank Dux">
+      <mock:shadow-root>
+        <div class="sage-input">
+          <label htmlFor="field-1">
+          </label>
+          <input id="field-1" class="sage-input__field" type="text" value="Frank Dux" />
+          <p class="sage-input__error-text">Use the correct syntax</p>
+        </div>
+      </mock:shadow-root>
+    </sage-input>
+    `);
+  });
+
 });