Form Date Design System

src/design-system/form-date.css

@@ -0,0 +1,90 @@
+.dcx-form-date {
+  --label-height: token('font-formcontrol_label-line-height');
+  --input-height: calc(
+    token('font-formcontrol-line-height') + token('spacing-y-formcontrol')
+  );
+  gap: 15px;
+
+  & label {
+    font-size: token('font-size-formcontrol_label');
+    line-height: var(--label-height);
+    background: token('color-background-formcontrol_label');
+    color: token('color-text-formcontrol_label');
+    position: relative;
+    &::after {
+      content: '';
+      box-sizing: border-box;
+      display: block;
+      position: absolute;
+      border-radius: token('border-radius-formcontrol');
+      border-style: solid;
+      border-width: token('border-width-formcontrol');
+      border-color: token('border-color-formcontrol');
+      width: 100%;
+      height: var(--input-height);
+      right: 0;
+      bottom: 0;
+    }
+    &:has(input:focus) {
+      &::after {
+        border-color: token('color-outline-formcontrol');
+        border-width: calc(token('border-width-formcontrol') * 2);
+      }
+    }
+    &:has(input:disabled) {
+      &::after {
+        opacity: 0.5;
+      }
+      opacity: 0.5;
+    }
+  }
+
+  & input {
+    all: unset;
+    appearance: none;
+    background: token('color-background-formcontrol');
+    border: none;
+    box-sizing: border-box;
+    color: token('color-text-formcontrol');
+    flex: 2 1 auto;
+    font-size: token('font-formcontrol-size');
+    height: var(--input-height);
+    line-height: token('font-formcontrol-line-height');
+    outline: none;
+    margin: token('color-outline-formcontrol');
+    padding-left: token('spacing-x-formcontrol');
+    padding-right: token('spacing-x-formcontrol');
+    border-radius: token('border-radius-formcontrol');
+    z-index: 1;
+  }
+
+  &.dcx-form-date--error label:has(input) {
+    color: token('color-text-formcontrol_error');
+    & input {
+      color: token('color-text-formcontrol_error');
+    }
+    &::after {
+      border-color: token('color-text-formcontrol_error');
+    }
+  }
+
+  @media (max-width: 700px) {
+    & input {
+      width: 100%;
+    }
+  }
+
+  @media (max-width: 400px) {
+    & input {
+      width: 100%;
+    }
+  }
+}
+
+.dcx-error-message {
+  font-size: token('font-formcontrol_error-size');
+  line-height: token('font-formcontrol_error-line-height');
+  color: token('color-text-formcontrol_error');
+  margin-block-start: 0;
+  margin-block-end: 0;
+}

src/design-system/index.css

@@ -23,3 +23,4 @@
 @import './range.css';
 @import './accordion.css';
 @import './skeleton.css';
+@import './form-date.css';

src/formDate/FormDate.tsx

@@ -221,7 +221,13 @@ export const FormDate = ({
             customLabel={yearProps?.customLabel}
             classNameSpan={yearProps?.classNameSpan}
             label={yearProps?.label}
-            classNameInput={classNames([yearProps?.classNameInput, inputClass])}
+            classNameInput={classNames([
+              yearProps?.classNameInput,
+              inputClass,
+              {
+                'dcx-form-date--filled': !!state.year,
+              },
+            ])}
             disabled={disabled}
             tabIndex={yearProps?.tabIndex}
           />
@@ -241,6 +247,9 @@ export const FormDate = ({
             classNameInput={classNames([
               monthProps?.classNameInput,
               inputClass,
+              {
+                'dcx-form-date--filled': !!state.month,
+              },
             ])}
             disabled={disabled}
             tabIndex={monthProps?.tabIndex}
@@ -258,7 +267,13 @@ export const FormDate = ({
             customLabel={dayProps?.customLabel}
             classNameSpan={dayProps?.classNameSpan}
             label={dayProps?.label}
-            classNameInput={classNames([dayProps?.classNameInput, inputClass])}
+            classNameInput={classNames([
+              dayProps?.classNameInput,
+              inputClass,
+              {
+                'dcx-form-date--filled': !!state.day,
+              },
+            ])}
             disabled={disabled}
             tabIndex={dayProps?.tabIndex}
           />
@@ -272,7 +287,15 @@ export const FormDate = ({
       {errorPosition === 'top' && showError && (
         <ErrorMessage text={errorMessage} className={errorClass} />
       )}
-      <div style={{ display: 'grid', gridTemplateColumns: 'auto auto auto' }}>
+      <div
+        style={{ display: 'grid', gridTemplateColumns: 'auto auto auto' }}
+        className={classNames([
+          'dcx-form-date',
+          {
+            'dcx-form-date--error': displayError,
+          },
+        ])}
+      >
         {DateComp}
       </div>
       {errorPosition === 'bottom' && showError && (

src/formDate/__test__/FormDate.test.tsx

@@ -96,6 +96,31 @@ describe('FormInput', () => {
     expect(parent.getAttribute('class')).toBe('containerClass');
   });
 
+  it('should render the dcx-form-date class be default and dcx-form-date--error when displayError is set to true', () => {
+    const { container } = render(
+      <FormDate
+        dateFormat="dd/mm/yyyy"
+        handleValidity={jest.fn()}
+        displayError
+      />
+    );
+
+    const parent: any = container.querySelector('div')?.querySelector('div');
+
+    expect(parent.getAttribute('class')).toBe(
+      'dcx-form-date dcx-form-date--error'
+    );
+  });
+
+  it('should render the dcx-form-date--filled class when the input element has value', () => {
+    render(<DummyPredefinedDate />);
+
+    const inputElements = screen.getAllByRole('textbox');
+    inputElements.forEach((input) => {
+      expect(input).toHaveClass('dcx-form-date--filled');
+    });
+  });
+
   it('should render the correct input classes when provided', () => {
     const { container } = render(
       <FormDate

stories/FormDate/Documentation.mdx

@@ -21,6 +21,11 @@ It provides the ability to specify your date format. The allowed formats are:
 - `yyyy/mm/dd`
 - `yy/mm/dd`
 
+## Additional CSS Class
+
+The `dcx-form-date--filled` classname is present in the component without predefined styling, providing flexibility for external customizations.  
+This classname will be applied to the Year, Month, and Date input elements whenever they contain a value.
+
 An example with all the available properties is:
 
 ```js

stories/FormDate/design-system/AccessibleTheme.stories.js

@@ -0,0 +1,196 @@
+import { FormDate } from '../../../src/formDate';
+// eslint-disable-next-line import/no-webpack-loader-syntax
+import style from '!raw-loader!../../themes/accessible.theme.css';
+import { LiveProvider, LiveEditor } from 'react-live';
+import { StorybookUtils } from '../../../core/storybook/StorybookUtils';
+import { useState } from 'react';
+
+const DateStory = (args) => {
+  const [isValid, setIsValid] = useState(false);
+  const [date, setDate] = useState(0);
+  const handleValidity = (valid, date) => {
+    setIsValid(valid);
+    setDate(date);
+  };
+  return (
+    <div>
+      <FormDate {...args} handleValidity={(v, d) => handleValidity(v, d)} />
+      <pre>isValid: {isValid.toString()}</pre>
+      <pre>date: {JSON.stringify(new Date(date))}</pre>
+    </div>
+  );
+};
+/**
+ * This theme is aimed at easing the visualization of the different elements of the component to improve the experience for people with visual impairments.
+ */
+export default {
+  title: 'DCXLibrary/Form/Date/Design system/Accessible',
+  component: FormDate,
+  decorators: [
+    (getStory) => {
+      require('../../../dist/design-system/index.css');
+      require('../../themes/accessible.theme.css');
+      return getStory();
+    },
+  ],
+  parameters: {
+    options: { showPanel: true },
+    actions: { disable: true },
+  },
+  tags: ['autodocs'],
+};
+
+export const ShowCase = {
+  parameters: {
+    backgrounds: {
+      default: 'dark',
+      values: [
+        { name: 'dark', value: '#282c34' },
+        { name: 'light', value: '#fff' },
+      ],
+    },
+  },
+  render: () => (
+    <LiveProvider
+      code={StorybookUtils.getThemeCode('dcx-form-date', style)}
+      disabled={true}
+      language="css"
+    >
+      <LiveEditor className="liveEditor" aria-label="editor" />
+    </LiveProvider>
+  ),
+};
+
+export const PreSetDate = {
+  name: 'Preset date',
+  render: DateStory,
+  args: {
+    dateFormat: 'dd/mm/yyyy',
+    inputClass: 'govuk-date-input',
+    day: '29',
+    month: '07',
+    year: '1982',
+    yearProps: {
+      label: 'Year',
+      classNameLabel: 'govuk-date-yearLabel',
+      classNameSpan: 'govuk-date-span',
+    },
+    monthProps: {
+      label: 'Month',
+      classNameLabel: 'govuk-date-yearLabel',
+      classNameSpan: 'govuk-date-span',
+    },
+    dayProps: {
+      label: 'Day',
+      classNameLabel: 'govuk-date-yearLabel',
+      classNameSpan: 'govuk-date-span',
+    },
+  },
+  argTypes: { onClick: { action: 'onClick' } },
+};
+
+export const PreSetDateDisabled = {
+  name: 'Preset date disabled',
+  render: DateStory,
+  args: {
+    dateFormat: 'dd/mm/yyyy',
+    inputClass: 'govuk-date-input',
+    day: '29',
+    month: '07',
+    year: '1982',
+    yearProps: {
+      label: 'Year',
+      classNameLabel: 'govuk-date-yearLabel',
+      classNameSpan: 'govuk-date-span',
+    },
+    monthProps: {
+      label: 'Month',
+      classNameLabel: 'govuk-date-yearLabel',
+      classNameSpan: 'govuk-date-span',
+    },
+    dayProps: {
+      label: 'Day',
+      classNameLabel: 'govuk-date-yearLabel',
+      classNameSpan: 'govuk-date-span',
+    },
+    disabled: true,
+  },
+  argTypes: { onClick: { action: 'onClick' } },
+};
+
+/**
+ * In the following example we specified as format: `yyyy/mm/dd`
+ */
+export const CustomDate = {
+  name: 'Custom date',
+  render: DateStory,
+  args: {
+    dateFormat: 'yyyy/mm/dd',
+    inputClass: 'govuk-date-input',
+    yearProps: {
+      label: 'Year',
+      classNameLabel: 'govuk-date-yearLabel',
+      classNameSpan: 'govuk-date-span',
+    },
+    monthProps: {
+      label: 'Month',
+      classNameLabel: 'govuk-date-yearLabel',
+      classNameSpan: 'govuk-date-span',
+    },
+    dayProps: {
+      label: 'Day',
+      classNameLabel: 'govuk-date-yearLabel',
+      classNameSpan: 'govuk-date-span',
+    },
+  },
+  argTypes: { onClick: { action: 'onClick' } },
+};
+
+export const ErrorMessage = {
+  name: 'Error message',
+  render: function ({ onChange, ...args }) {
+    const [isValid, setIsValid] = useState(false);
+    const [date, setDate] = useState(0);
+    const [showError, setShowError] = useState(false);
+    const handleValidity = (valid, date) => {
+      setShowError(!valid);
+      setIsValid(valid);
+      setDate(date);
+    };
+    return (
+      <div>
+        <FormDate
+          {...args}
+          handleValidity={(v, d) => handleValidity(v, d)}
+          displayError={showError}
+          inputContainerClass={showError ? 'govuk-date-errorContainer' : ''}
+          errorMessage={showError ? 'Enter a valid date' : null}
+        />
+        <pre>isValid: {isValid.toString()}</pre>
+        <pre>date: {JSON.stringify(new Date(date))}</pre>
+      </div>
+    );
+  },
+  args: {
+    dateFormat: 'dd/mm/yyyy',
+    inputClass: 'govuk-date-input',
+    errorPosition: 'top',
+    errorClass: 'govuk-date-error',
+    yearProps: {
+      label: 'Year',
+      classNameLabel: 'govuk-date-yearLabel',
+      classNameSpan: 'govuk-date-span',
+    },
+    monthProps: {
+      label: 'Month',
+      classNameLabel: 'govuk-date-yearLabel',
+      classNameSpan: 'govuk-date-span',
+    },
+    dayProps: {
+      label: 'Day',
+      classNameLabel: 'govuk-date-yearLabel',
+      classNameSpan: 'govuk-date-span',
+    },
+  },
+  argTypes: { onClick: { action: 'onClick' } },
+};