Merge branch 'main' into rm-remove-react-pagination-phase3

department-of-veterans-affairs · Sep 13, 2023 · 0ca6681 · 0ca6681
2 parents 0fb74f0 + 637421e
commit 0ca6681
Show file tree

Hide file tree

Showing 10 changed files with 172 additions and 17 deletions.
diff --git a/packages/storybook/stories/va-checkbox-group-uswds.stories.jsx b/packages/storybook/stories/va-checkbox-group-uswds.stories.jsx
@@ -31,6 +31,7 @@ const vaCheckboxGroup = args => {
     label,
     required,
     hint,
+    'label-header-level': labelHeaderLevel,
     uswds,
     ...rest
   } = args;
@@ -41,6 +42,7 @@ const vaCheckboxGroup = args => {
       label={label}
       required={required}
       hint={hint}
+      label-header-level={labelHeaderLevel}
       uswds={uswds}
     >
       <va-checkbox uswds label="Sojourner Truth" name="example" value="1" />
@@ -136,6 +138,7 @@ const defaultArgs = {
   'error': null,
   'hint': null,
   'uswds': true,
+  'label-header-level': '',
 };
 
 export const Default = Template.bind(null);
@@ -144,6 +147,13 @@ Default.args = {
 };
 Default.argTypes = propStructure(checkBoxGroupDocs);
 
+export const LabelHeader = Template.bind(null);
+LabelHeader.args = {
+  ...defaultArgs,
+  label: 'This is a label containing an H3',
+  'label-header-level': '3',
+};
+
 export const WithHintText = Template.bind(null);
 WithHintText.args = {
   ...defaultArgs,

diff --git a/packages/storybook/stories/va-checkbox-group.stories.jsx b/packages/storybook/stories/va-checkbox-group.stories.jsx
@@ -31,6 +31,7 @@ const vaCheckboxGroup = args => {
     label,
     required,
     hint,
+    'label-header-level': labelHeaderLevel,
     ...rest
   } = args;
   return (
@@ -40,6 +41,7 @@ const vaCheckboxGroup = args => {
       label={label}
       required={required}
       hint={hint}
+      label-header-level={labelHeaderLevel}
     >
       <va-checkbox label="Option one" name="example" value="1" />
       <va-checkbox label="Option two" name="example" value="2" />
@@ -73,6 +75,7 @@ const defaultArgs = {
   'required': false,
   'error': null,
   'hint': null,
+  'label-header-level': '',
 };
 
 export const Default = Template.bind(null);
@@ -81,6 +84,13 @@ Default.args = {
 };
 Default.argTypes = propStructure(checkBoxGroupDocs);
 
+export const LabelHeader = Template.bind(null);
+LabelHeader.args = {
+  ...defaultArgs,
+  label: 'This is a label containing an H3',
+  'label-header-level': '3',
+};
+
 export const WithHintText = Template.bind(null);
 WithHintText.args = {
   ...defaultArgs,

diff --git a/packages/web-components/src/components.d.ts b/packages/web-components/src/components.d.ts
@@ -323,6 +323,10 @@ export namespace Components {
           * The text label for the checkbox group.
          */
         "label": string;
+        /**
+          * Insert a header with defined level inside the label (legend)
+         */
+        "labelHeaderLevel"?: string;
         /**
           * Whether or not this input field is required.
          */
@@ -2046,6 +2050,10 @@ declare namespace LocalJSX {
           * The text label for the checkbox group.
          */
         "label": string;
+        /**
+          * Insert a header with defined level inside the label (legend)
+         */
+        "labelHeaderLevel"?: string;
         /**
           * The event used to track usage of the component. This is emitted when an input value changes and enableAnalytics is true.
          */

diff --git a/packages/web-components/src/components/va-checkbox-group/test/va-checkbox-group.e2e.ts b/packages/web-components/src/components/va-checkbox-group/test/va-checkbox-group.e2e.ts
@@ -128,6 +128,49 @@ describe('va-checkbox-group', () => {
     expect(await options[0].getProperty('checked')).toBeTruthy();
   });
 
+  it('renders H3 header in legend if included', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<va-checkbox-group label="Testing H3" label-header-level="3" />');
+
+    const legend = await page.find('va-checkbox-group >>> legend');
+    expect(legend).toEqualHtml(`
+    <legend>
+      <h3 part="header">Testing H3</h3>
+    </legend>
+  `);
+  });
+
+  it('renders H5 header in legend if included', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<va-checkbox-group label="Testing H5" label-header-level="5" required></va-checkbox-group>');
+
+    const legend = await page.find('va-checkbox-group >>> legend');
+    expect(legend).toEqualHtml(`
+      <legend>
+        <h5 part="header">Testing H5</h5>
+        <span class="required">
+          required
+        </span>
+      </legend>
+ `);
+  });
+
+  it('renders legend text and ignores adding a header if an invalid level is included', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<va-checkbox-group label="Testing" label-header-level="7" required></va-checkbox-group>');
+
+    const legend = await page.find('va-checkbox-group >>> legend');
+    expect(legend).toEqualHtml(`
+      <legend>
+        Testing
+        <span class="required">
+          required
+        </span>
+      </legend>
+   `);
+  });
+
+
   // Begin USWDS v3 variation tests
 
   it('uswds v3 renders', async () => {
@@ -256,4 +299,47 @@ describe('va-checkbox-group', () => {
 
     expect(await options[0].getProperty('checked')).toBeTruthy();
   });
+
+  it('uswds v3 renders H3 header in legend if included', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<va-checkbox-group uswds label="Testing H3" label-header-level="3" />');
+
+    const legend = await page.find('va-checkbox-group >>> legend');
+    expect(legend).toEqualHtml(`
+    <legend class="usa-legend">
+      <h3 part="header">Testing H3</h3>
+    </legend>
+  `);
+  });
+
+  it('renders H5 header in legend if included', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<va-checkbox-group uswds label="Testing H5" label-header-level="5" required></va-checkbox-group>');
+
+    const legend = await page.find('va-checkbox-group >>> legend');
+    expect(legend).toEqualHtml(`
+      <legend class="usa-legend">
+        <h5 part="header">Testing H5</h5>
+        <span class="usa-label--required">
+          required
+        </span>
+      </legend>
+ `);
+  });
+
+  it('renders legend text and ignores adding a header if an invalid level is included', async () => {
+    const page = await newE2EPage();
+    await page.setContent('<va-checkbox-group uswds label="Testing" label-header-level="7" required></va-checkbox-group>');
+
+    const legend = await page.find('va-checkbox-group >>> legend');
+    expect(legend).toEqualHtml(`
+      <legend class="usa-legend">
+        Testing
+        <span class="usa-label--required">
+          required
+        </span>
+      </legend>
+   `);
+  });
+
 });
diff --git a/packages/web-components/src/components/va-checkbox-group/va-checkbox-group.scss b/packages/web-components/src/components/va-checkbox-group/va-checkbox-group.scss
@@ -22,6 +22,7 @@
 @import '../../mixins/accessibility.css';
 @import '../../mixins/form-field-error.css';
 @import '../../mixins/hint-text.css';
+@import '../../mixins/headers.css';
 
 :host(:not([uswds])) #error-message {
   font-size: 1.6rem;

diff --git a/packages/web-components/src/components/va-checkbox-group/va-checkbox-group.tsx b/packages/web-components/src/components/va-checkbox-group/va-checkbox-group.tsx
@@ -67,6 +67,11 @@ export class VaCheckboxGroup {
    */
   @Prop() uswds?: boolean = false;
 
+  /**
+   * Insert a header with defined level inside the label (legend)
+   */
+  @Prop() labelHeaderLevel?: string;
+
   /**
    * The event used to track usage of the component. This is emitted when an
    * input value changes and enableAnalytics is true.
@@ -96,6 +101,11 @@ export class VaCheckboxGroup {
     });
   }
 
+  private getHeaderLevel() {
+    const number = parseInt(this.labelHeaderLevel, 10);
+    return number >= 1 && number <= 6 ? `h${number}` : null;
+  }
+
   connectedCallback() {
     i18next.on('languageChanged', () => {
       forceUpdate(this.el);
@@ -108,6 +118,7 @@ export class VaCheckboxGroup {
 
   render() {
     const { label, required, error, hint, uswds } = this;
+    const HeaderLevel = this.getHeaderLevel();
 
     if (uswds) {
       const legendClass = classnames({
@@ -118,7 +129,11 @@ export class VaCheckboxGroup {
         <Host role="group">
           <fieldset class="usa-fieldset">
             <legend class={legendClass}>
-              {label}&nbsp;
+              {HeaderLevel ? (
+                <HeaderLevel part="header">{label}</HeaderLevel>
+              ) : (
+                label
+              )}&nbsp;
               {required && <span class="usa-label--required">{i18next.t('required')}</span>}
             </legend>
             {hint && <span class="usa-hint">{hint}</span>}
@@ -139,7 +154,11 @@ export class VaCheckboxGroup {
         <Host role="group">
           <fieldset>
             <legend>
-              {label}
+              {HeaderLevel ? (
+                <HeaderLevel part="header">{label}</HeaderLevel>
+              ) : (
+                label
+              )}
               {required && (
                 <span class="required">{i18next.t('required')}</span>
               )}

diff --git a/packages/web-components/src/components/va-memorable-date/va-memorable-date.scss b/packages/web-components/src/components/va-memorable-date/va-memorable-date.scss
@@ -52,6 +52,25 @@
 @import '../va-date/va-date.css';
 @import '../../mixins/form-field-error.css';
 
+// Resets error border to not show for 'any' error, so we can only show for 'specific' errors
+:host([error]:not([error='']):not([uswds="true"])) va-select::part(select),
+:host([error]:not([error='']):not([uswds="true"])) va-text-input::part(input) {
+  border: 0.1rem solid var(--color-gray);
+}
+
+:host([error="month-range"]:not([error='']):not([uswds="true"])) va-select.input-month::part(select),
+:host([error="month-range"]:not([error='']):not([uswds="true"])) va-text-input.input-month::part(input) {
+  border: 4px solid var(--color-secondary-dark);
+}
+
+:host([error="day-range"]:not([error='']):not([uswds="true"])) va-text-input.input-day::part(input) {
+  border: 4px solid var(--color-secondary-dark);
+}
+
+:host([error="year-range"]:not([error='']):not([uswds="true"])) va-text-input.input-year::part(input) {
+  border: 4px solid var(--color-secondary-dark);
+}
+
 :host(:not([uswds])) .input-month,
 .input-day,
 .input-year {

diff --git a/packages/web-components/src/components/va-memorable-date/va-memorable-date.tsx b/packages/web-components/src/components/va-memorable-date/va-memorable-date.tsx
@@ -215,7 +215,7 @@ export class VaMemorableDate {
       uswds,
       monthSelect,
     } = this;
-    
+
     const [year, month, day] = (value || '').split('-');
     const describedbyIds = ['dateHint', hint ? 'hint' : '']
       .filter(Boolean)
@@ -241,7 +241,7 @@ export class VaMemorableDate {
             invalid={this.invalidMonth}
             onVaSelect={handleDateChange}
             class='usa-form-group--month-select'
-            reflectInputError={error ? true : false}
+            reflectInputError={error === 'month-range' ? true : false}
             value={month ? String(parseInt(month)) : month}
           >
             {months &&
@@ -267,7 +267,7 @@ export class VaMemorableDate {
           value={month?.toString()}
           onInput={handleDateChange}
           class="usa-form-group--month-input memorable-date-input"
-          reflectInputError={error ? true : false}
+            reflectInputError={error === 'month-range' ? true : false}
           inputmode="numeric"
           type="text"
         />
@@ -310,7 +310,7 @@ export class VaMemorableDate {
                   value={day?.toString()}
                   onInput={handleDateChange}
                   class="usa-form-group--day-input memorable-date-input"
-                  reflectInputError={error ? true : false}
+                  reflectInputError={error === 'day-range' ? true : false}
                   inputmode="numeric"
                   type="text"
                 />
@@ -329,7 +329,7 @@ export class VaMemorableDate {
                   value={year?.toString()}
                   onInput={handleDateChange}
                   class="usa-form-group--year-input memorable-date-input"
-                  reflectInputError={error ? true : false}
+                  reflectInputError={error === 'year-range' ? true : false}
                   inputmode="numeric"
                   type="text"
                 />

diff --git a/packages/web-components/src/components/va-radio/va-radio.scss b/packages/web-components/src/components/va-radio/va-radio.scss
@@ -26,6 +26,7 @@
 @import '../../mixins/accessibility.css';
 @import '../../mixins/form-field-error.css';
 @import '../../mixins/hint-text.css';
+@import '../../mixins/headers.css';
 
 .required {
   color: var(--color-secondary-dark);
@@ -47,13 +48,3 @@
   line-height: inherit;
   padding-inline: 0;
 }
-
-:host legend :is(h1, h2, h3, h4, h5, h6) {
-  display: inline;
-  margin: 0px;
-}
-
-/* h6 remains as Source Sans Pro, everything else uses Bitter */
-:host legend :is(h1, h2, h3, h4, h5) {
-  font-family: var(--font-serif);
-}
diff --git a/packages/web-components/src/mixins/headers.css b/packages/web-components/src/mixins/headers.css
@@ -0,0 +1,11 @@
+:host legend :is(h1, h2, h3, h4, h5, h6),
+:host label :is(h1, h2, h3, h4, h5, h6) {
+  display: inline;
+  margin: 0px;
+}
+
+/* h6 remains as Source Sans Pro, everything else uses Bitter */
+:host legend :is(h1, h2, h3, h4, h5),
+:host label :is(h1, h2, h3, h4, h5)  {
+  font-family: var(--font-serif);
+}