@arbor-education/design-system.components 0.4.2 → 0.5.1

package/src/components/datePicker/datePicker.scss

@@ -0,0 +1,37 @@
+.ds-date-picker {
+  position: relative;
+
+  .ds-date-picker__button {
+    position: absolute;
+    right: 0;
+    top: 0;
+
+    svg {
+      stroke: var(--form-field-icon-default-color-icon);
+    }
+  }
+}
+
+.ds-date-picker__popup {
+    box-shadow: var(--shadow-small);
+    padding: var(--date-picker-spacing-vertical) var(--date-picker-spacing-horizontal);
+    border-radius: var(--date-picker-radius);
+    background-color: var(--date-picker-color-background);
+
+    --rdp-accent-color: var(--date-picker-date-cell-today-default-color-text);
+    --rdp-accent-background-color: var(--date-picker-date-cell-today-default-color-background);
+    
+    .rdp-selected {
+      font-size: unset;
+
+      .rdp-day_button{
+        background-color: var(--rdp-accent-background-color);
+      }
+    }
+
+    .rdp-footer {
+      display: flex;
+      justify-content: flex-end;
+    }
+  }
+  

package/src/components/formField/FormField.stories.tsx

@@ -41,7 +41,7 @@ export const Default = {
     },
     'inputType': {
       control: 'select',
-      options: ['text', 'textarea', 'number'],
+      options: ['text', 'textarea', 'number', 'datePicker'],
       description: 'Input type',
     },
     'inputProps.size': {
@@ -130,6 +130,12 @@ export const FormExample: Story = {
           onSelectionChange: fn(),
         }}
       />
+      <FormField
+        id="date-of-birth"
+        label="Date of Birth"
+        inputType="datePicker"
+        inputProps={{ onChange: fn() }}
+      />
     </div>
   ),
 };

package/src/components/formField/FormField.test.tsx

@@ -56,4 +56,10 @@ describe('FormField component', () => {
     const input = screen.getByRole('button');
     expect(input.textContent).toContain('Select');
   });
+
+  test('renders a date picker when inputType is datePicker', () => {
+    render(<FormField id="niceid" inputType="datePicker" />);
+    expect(screen.getByRole('textbox')).toBeInTheDocument();
+    expect(screen.getByRole('button', { name: 'Open date picker' })).toBeInTheDocument();
+  });
 });

package/src/components/formField/FormField.tsx

@@ -6,6 +6,7 @@ import { TextArea, type TextAreaProps } from './inputs/textArea/TextArea';
 import { NumberInput, type NumberInputProps } from './inputs/number/NumberInput';
 import { ColourPickerDropdown, type ColourPickerDropdownProps } from './inputs/colourPickerDropdown/ColourPickerDropdown';
 import { SelectDropdown, type SelectDropdownInputProps } from './inputs/selectDropdown/SelectDropdown';
+import { DatePicker, type DatePickerProps } from 'Components/datePicker/DatePicker';
 
 type FormFieldProps = {
   className?: string;
@@ -21,6 +22,7 @@ type FormFieldProps = {
   | { inputType?: 'number'; inputProps?: NumberInputProps }
   | { inputType?: 'colourPicker'; inputProps?: ColourPickerDropdownProps }
   | { inputType?: 'selectDropdown'; inputProps?: SelectDropdownInputProps }
+  | { inputType?: 'datePicker'; inputProps?: DatePickerProps }
 );
 
 export const FormField = (props: FormFieldProps) => {
@@ -66,6 +68,9 @@ export const FormField = (props: FormFieldProps) => {
       {inputType === 'selectDropdown' && (
         <SelectDropdown {...sharedProps} {...(inputProps as SelectDropdownInputProps)} />
       )}
+      {inputType === 'datePicker' && (
+        <DatePicker {...sharedProps} {...(inputProps as DatePickerProps)} />
+      )}
       {((helperLinkText && helperLinkUrl) || errorText) && (
         <div className="ds-form-field__message">
           {errorText && (

package/src/components/slideover/Slideover.tsx

@@ -3,7 +3,8 @@ import { Button } from 'Components/button/Button';
 import { Heading } from 'Components/heading/Heading';
 import type { IconName } from 'Components/icon/allowedIcons';
 import { Icon } from 'Components/icon/Icon';
-import type { ReactNode } from 'react';
+import { useState, type ReactNode } from 'react';
+import { useComponentDidMount } from 'Utils/hooks/useComponentDidMount';
 import { SlideoverUtils } from 'Utils/SlideoverUtils';
 
 export type SlideoverProps = {
@@ -16,10 +17,28 @@ export type SlideoverProps = {
 };
 
 export const Slideover = (props: SlideoverProps) => {
-  const { title, children, footerContents, headerIcon, centerHeaderText = true, hideBackButton } = props;
+  const {
+    title,
+    children,
+    footerContents,
+    headerIcon,
+    centerHeaderText = true,
+    hideBackButton,
+  } = props;
+
+  const [isFirstRender, setIsFirstRender] = useState(true);
+
+  useComponentDidMount(() => {
+    setIsFirstRender(false);
+  });
 
   return (
-    <aside className="ds-slideover">
+    <aside className={classNames('ds-slideover',
+      {
+        'ds-slideover--initial': isFirstRender,
+      },
+    )}
+    >
       <div className={classNames('ds-slideover__header', { 'ds-slideover__header--center': centerHeaderText })}>
         {
           !hideBackButton && (

package/src/components/slideover/slideover.scss

@@ -7,6 +7,11 @@
   display: flex;
   flex-direction: column;
   align-items: stretch;
+  transition: right 300ms ease;
+
+  &--initial {
+    right: -580px;
+  }
 
   &__header {
     background-color: var(--slideover-header-color-background);

package/src/index.scss

@@ -1,3 +1,4 @@
+@use "../node_modules/react-day-picker/src/style.css";
 @use "./tokens.scss";
 @use "./global.scss";
 @use "components/button/button.scss";
@@ -32,6 +33,7 @@
 @use "components/editableText/editableText.scss";
 @use "components/progress/progress.scss";
 @use "components/toast/toast.scss";
+@use "components/datePicker/datePicker.scss";
 @use "components/avatar/avatar.scss";
 @use "components/userDropdown/userDropdown.scss";
 @import "https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap";

package/src/index.ts

@@ -30,6 +30,7 @@ export { Banner, type BannerProps, BANNER_LEVEL } from 'Components/banner/Banner
 export { EditableText } from 'Components/editableText/EditableText';
 export { Progress } from 'Components/progress/Progress';
 export { Toast } from 'Components/toast/Toast';
+export { DatePicker } from 'Components/datePicker/DatePicker';
 export { Avatar } from 'Components/avatar/Avatar';
 export { UserDropdown } from 'Components/userDropdown/UserDropdown';
 export type { UserDropdownUserInfoAction } from 'Components/userDropdown/UserDropdown';