fix: Add missing props to Storybook (#2313)

OKTA-804459 refactor(odyssey-react-mui): add isOptionalProp refactor(odyssey-react-mui): use two words for time zone label refactor(odyssey-react-mui): adding missing props to Storybook
okta · Sep 12, 2024 · bbf96a2 · bbf96a2
1 parent 7efc282
commit bbf96a2
Show file tree

Hide file tree

Showing 3 changed files with 46 additions and 12 deletions.
diff --git a/packages/odyssey-react-mui/src/labs/DateField.tsx b/packages/odyssey-react-mui/src/labs/DateField.tsx
@@ -43,6 +43,7 @@ export type DateFieldProps = {
     | "errorMessage"
     | "hasInitialFocus"
     | "hint"
+    | "HintLinkComponent"
     | "id"
     | "isDisabled"
     | "isOptional"
@@ -71,6 +72,7 @@ const DateField = ({
   errorMessage,
   hasInitialFocus,
   hint,
+  HintLinkComponent,
   id: idOverride,
   inputRef,
   isDisabled = false,
@@ -253,6 +255,7 @@ const DateField = ({
       fieldType="single"
       hasVisibleLabel
       hint={hint}
+      HintLinkComponent={HintLinkComponent}
       id={idOverride}
       isDisabled={isDisabled}
       isOptional={isOptional}

diff --git a/packages/odyssey-react-mui/src/labs/DatePicker.tsx b/packages/odyssey-react-mui/src/labs/DatePicker.tsx
@@ -154,15 +154,22 @@ export type DatePickerProps = {
 } & OdysseyDateFieldProps &
   Pick<
     FieldComponentProps,
-    "errorMessage" | "hint" | "isDisabled" | "isReadOnly"
+    | "errorMessage"
+    | "hint"
+    | "HintLinkComponent"
+    | "isDisabled"
+    | "isReadOnly"
+    | "isOptional"
   >;
 
 const DatePicker = ({
   defaultValue: defaultValueProp,
   errorMessage,
   hint,
+  HintLinkComponent,
   isDateEnabled = () => true,
   isDisabled,
+  isOptional,
   isReadOnly,
   isMonthEnabled = () => true,
   isYearEnabled = () => true,
@@ -266,8 +273,10 @@ const DatePicker = ({
           }
           errorMessage={errorMessage}
           hint={hint}
+          HintLinkComponent={HintLinkComponent}
           inputRef={inputRef}
           isDisabled={isDisabled}
+          isOptional={isOptional}
           isReadOnly={isReadOnly}
           label={label}
           onBlur={onBlur}
@@ -282,8 +291,10 @@ const DatePicker = ({
     [
       errorMessage,
       hint,
+      HintLinkComponent,
       internalTimeZone,
       isDisabled,
+      isOptional,
       isReadOnly,
       label,
       onBlur,

diff --git a/packages/odyssey-storybook/src/components/odyssey-labs/DatePicker/DatePicker.stories.tsx b/packages/odyssey-storybook/src/components/odyssey-labs/DatePicker/DatePicker.stories.tsx
@@ -42,16 +42,10 @@ const storybookMeta: Meta<DatePickerProps> = {
       },
     },
     errorMessage: fieldComponentPropsMetaData.errorMessage,
-    hint: {
-      control: "text",
-      description: "The hint text for the autocomplete input",
-      table: {
-        type: {
-          summary: "string",
-        },
-      },
-    },
+    hint: fieldComponentPropsMetaData.hint,
+    HintLinkComponent: fieldComponentPropsMetaData.HintLinkComponent,
     isDisabled: fieldComponentPropsMetaData.isDisabled,
+    isOptional: fieldComponentPropsMetaData.isOptional,
     isReadOnly: fieldComponentPropsMetaData.isReadOnly,
     minDate: {
       description: "the minimum selectable date enabled in the calendar",
@@ -69,6 +63,32 @@ const storybookMeta: Meta<DatePickerProps> = {
         },
       },
     },
+    timeZone: {
+      description: "an IANA time zone applied to the DatePicker",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    timeZonePickerLabel: {
+      description:
+        "label applied to the `TimeZonePicker` field if `TimeZonePicker` field is rendered",
+      table: {
+        type: {
+          summary: "string",
+        },
+      },
+    },
+    timeZoneOptions: {
+      control: "none",
+      description: "an array of options for the TimeZonePicker",
+      table: {
+        type: {
+          summary: "[{label: string, value: string(valid IANA time zone)}]",
+        },
+      },
+    },
   },
   args: {
     label: "Date picker label",
@@ -160,7 +180,7 @@ export const MaxDateWithError: StoryObj<DatePickerProps> = {
 
 export const WithTimeZonePicker: StoryObj<DatePickerProps> = {
   args: {
-    timeZonePickerLabel: "Timezone picker label",
+    timeZonePickerLabel: "Time zone picker label",
     timeZoneOptions: [
       { label: "New York", value: "America/New_York" },
       { label: "Johannesburg", value: "Africa/Johannesburg" },
@@ -171,7 +191,7 @@ export const WithTimeZonePicker: StoryObj<DatePickerProps> = {
 
 export const Controlled: StoryObj<DatePickerProps> = {
   args: {
-    timeZonePickerLabel: "Timezone picker label",
+    timeZonePickerLabel: "Time zone picker label",
     timeZone: "America/New_York",
     timeZoneOptions: [
       { label: "LA", value: "America/Los_Angeles" },