feat(numeral-date): add size prop

Sage · Jun 1, 2021 · 582c512 · 582c512
1 parent b75431f
commit 582c512
Show file tree

Hide file tree

Showing 3 changed files with 31 additions and 0 deletions.
diff --git a/src/__experimental__/components/numeral-date/numeral-date.component.js b/src/__experimental__/components/numeral-date/numeral-date.component.js
@@ -61,6 +61,7 @@ const NumeralDate = ({
   fieldHelp,
   adaptiveLabelBreakpoint,
   required,
+  size,
   enableInternalError,
   enableInternalWarning,
   ...rest
@@ -217,6 +218,7 @@ const NumeralDate = ({
                       warning: internalWarning,
                       info,
                     })}
+                  size={size}
                 />
               </StyledDateField>
             );
@@ -304,6 +306,8 @@ NumeralDate.propTypes = {
   adaptiveLabelBreakpoint: PropTypes.number,
   /** Flag to configure component as mandatory */
   required: PropTypes.bool,
+  /** Size of an input */
+  size: PropTypes.oneOf("small", "medium", "large"),
 };
 
 export default NumeralDate;
diff --git a/src/__experimental__/components/numeral-date/numeral-date.d.ts b/src/__experimental__/components/numeral-date/numeral-date.d.ts
@@ -70,6 +70,8 @@ export interface NumeralDateProps extends ValidationPropTypes, MarginProps {
   onChange?: (ev: NumeralDateEvent) => void;
   /** Flag to configure component as mandatory */
   required?: boolean;
+  /** Size of an input */
+  size?: "small" | "medium" | "large";
   /** When true, validation icons will be placed on labels instead of being placed on the inputs */
   validationOnLabel?: boolean;
 }

diff --git a/src/__experimental__/components/numeral-date/numeral-date.stories.mdx b/src/__experimental__/components/numeral-date/numeral-date.stories.mdx
@@ -280,6 +280,31 @@ You can use the `required` prop to indicate if the field is mandatory.
   </Story>
 </Preview>
 
+### Size
+You can use the `size` prop to set the size of the field.
+
+<Preview>
+  <Story name="size">
+    <>
+      <NumeralDate
+        label="Date of Birth"
+        dateFormat={["dd", "mm", "yyyy"]}
+        size="small"
+      />
+      <NumeralDate
+        label="Date of Birth"
+        dateFormat={["dd", "mm", "yyyy"]}
+        size="medium"
+      />
+      <NumeralDate
+        label="Date of Birth"
+        dateFormat={["dd", "mm", "yyyy"]}
+        size="large"
+      />
+    </>
+  </Story>
+</Preview>
+
 ## Props 
 
 ### NumeralDate