@digigov/react-core 2.0.0-af1b5f33 → 2.0.0-f2d82d25

package/src/Base/index.tsx

@@ -10,77 +10,139 @@ type PropsToOmit<C extends React.ElementType, P> = keyof (AsProp<C> & P);
 // This is the first reusable type utility we built
 type PolymorphicComponentProp<
   C extends React.ElementType,
-  Props = Record<string, unknown>
+  Props = Record<string, unknown>,
 > = React.PropsWithChildren<Props & AsProp<C>> &
   Omit<React.ComponentPropsWithoutRef<C>, PropsToOmit<C, Props>>;
 
 // This is a new type utitlity with ref!
 type PolymorphicComponentPropWithRef<
   C extends React.ElementType,
-  Props = Record<string, unknown>
+  Props = Record<string, unknown>,
 > = PolymorphicComponentProp<C, Props> & { ref?: any };
 
 // This is the type for the "ref" only
-type PolymorphicRef<C extends React.ElementType> = React.ComponentPropsWithRef<
-  C
->['ref'];
+type PolymorphicRef<C extends React.ElementType> =
+  React.ComponentPropsWithRef<C>['ref'];
 
 /**
  * This is the updated component props using PolymorphicComponentPropWithRef
  */
-export type BaseProps<
-  C extends React.ElementType
-> = PolymorphicComponentPropWithRef<
-  C,
-  {
-    /** margin is optional. It has not a default value. */
-    margin?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-    /** marginTop is optional. It has not a default value. */
-    marginTop?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-    /** marginBottom is optional. It has not a default value. */
-    marginBottom?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-    /** marginLeft is optional. It has not a default value. */
-    marginLeft?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-    /** marginRight is optional. It has not a default value. */
-    marginRight?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-    /** padding is optional. It has not a default value. */
-    padding?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-    /** paddingTop is optional. It has not a default value. */
-    paddingTop?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-    /** paddingBottom is optional. It has not a default value. */
-    paddingBottom?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-    /** paddingLeft is optional. It has not a default value. */
-    paddingLeft?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-    /** paddingRight is optional. It has not a default value. */
-    paddingRight?: 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-    /**  printHidden is optional. Default value is false. When true, the component is hidden at print. */
-    printHidden?: boolean;
-    /**  printVisible is optional. When block, the component is displayed as block. When inline, the component is displayed as inline.*/
-    printVisible?: 'block' | 'inline';
-    /** Components will be hidden at all screen sizes. */
-    hidden?: boolean;
-    /** Components will be hidden from 'xs' screen size and up. */
-    xsUpHidden?: boolean;
-    /** Components will be hidden from 'sm' screen size and up. */
-    smUpHidden?: boolean;
-    /** Components will be hidden from 'md' screen size and up. */
-    mdUpHidden?: boolean;
-    /** Components will be hidden from 'lg' screen size and up. */
-    lgUpHidden?: boolean;
-    /** Components will be hidden from 'xl' screen size and up. */
-    xlUpHidden?: boolean;
-    /** Components will be hidden between xs and sm screen size. */
-    xsHidden?: boolean;
-    /** Components will be hidden between sm and md screen size. */
-    smHidden?: boolean;
-    /** Components will be hidden between md and lg screen size. */
-    mdHidden?: boolean;
-    /** Components will be hidden between lg and xl screen size. */
-    lgHidden?: boolean;
-    /** Components will be hidden between xl and 2xl screen size. */
-    xlHidden?: boolean;
-  }
->;
+export type BaseProps<C extends React.ElementType> =
+  PolymorphicComponentPropWithRef<
+    C,
+    {
+      /** margin is optional. It has not a default value. */
+      margin?: spacingValues;
+      /** marginTop is optional. It has not a default value. */
+      marginTop?: spacingValues;
+      /** marginBottom is optional. It has not a default value. */
+      marginBottom?: spacingValues;
+      /** marginLeft is optional. It has not a default value. */
+      marginLeft?: spacingValues;
+      /** marginRight is optional. It has not a default value. */
+      marginRight?: spacingValues;
+      /** Alternative for margin. Margin is optional. It has not a default value. */
+      m?: spacingValues;
+      /** Alternative for marginTop. MarginTop is optional. It has not a default value. */
+      mt?: spacingValues;
+      /** Alternative for marginBottom. MarginBottom is optional. It has not a default value. */
+      mb?: spacingValues;
+      /** Alternative for marginLeft. MarginLeft is optional. It has not a default value. */
+      ml?: spacingValues;
+      /** Alternative for marginRight. MarginRight is optional. It has not a default value. */
+      mr?: spacingValues;
+      /** Alternative for marginX. MarginX is optional. It has not a default value. */
+      mx?: spacingValues;
+      /** Alternative for marginY. MarginY is optional. It has not a default value. */
+      my?: spacingValues;
+      /** padding is optional. It has not a default value. */
+      padding?: spacingValues;
+      /** paddingTop is optional. It has not a default value. */
+      paddingTop?: spacingValues;
+      /** paddingBottom is optional. It has not a default value. */
+      paddingBottom?: spacingValues;
+      /** paddingLeft is optional. It has not a default value. */
+      paddingLeft?: spacingValues;
+      /** paddingRight is optional. It has not a default value. */
+      paddingRight?: spacingValues;
+      /** Alternative for padding. Padding is optional. It has not a default value. */
+      p?: spacingValues;
+      /** Alternative for paddingTop. PaddingTop is optional. It has not a default value. */
+      pt?: spacingValues;
+      /** Alternative for paddingBottom. PaddingBottom is optional. It has not a default value. */
+      pb?: spacingValues;
+      /** Alternative for paddingLeft. PaddingLeft is optional. It has not a default value. */
+      pl?: spacingValues;
+      /** Alternative for paddingRight. PaddingRight is optional. It has not a default value. */
+      pr?: spacingValues;
+      /** Alternative for paddingX. PaddingX is optional. It has not a default value. */
+      px?: spacingValues;
+      /** Alternative for paddingY. PaddingY is optional. It has not a default value. */
+      py?: spacingValues;
+      /**  printHidden is optional. Default value is false. When true, the component is hidden at print. */
+      printHidden?: boolean;
+      /**  printVisible is optional. When block, the component is displayed as block. When inline, the component is displayed as inline.*/
+      printVisible?: 'block' | 'inline';
+      /** Components will be hidden at all screen sizes. */
+      hidden?: boolean;
+      /** Components will be hidden from 'xs' screen size and up. */
+      xsUpHidden?: boolean;
+      /** Components will be hidden from 'sm' screen size and up. */
+      smUpHidden?: boolean;
+      /** Components will be hidden from 'md' screen size and up. */
+      mdUpHidden?: boolean;
+      /** Components will be hidden from 'lg' screen size and up. */
+      lgUpHidden?: boolean;
+      /** Components will be hidden from 'xl' screen size and up. */
+      xlUpHidden?: boolean;
+      /** Components will be hidden between xs and sm screen size. */
+      xsHidden?: boolean;
+      /** Components will be hidden between sm and md screen size. */
+      smHidden?: boolean;
+      /** Components will be hidden between md and lg screen size. */
+      mdHidden?: boolean;
+      /** Components will be hidden between lg and xl screen size. */
+      lgHidden?: boolean;
+      /** Components will be hidden between xl and 2xl screen size. */
+      xlHidden?: boolean;
+    }
+  >;
+
+type spacingValues =
+  | 0
+  | 0.5
+  | 1
+  | 1.5
+  | 2
+  | 2.5
+  | 3
+  | 3.5
+  | 4
+  | 5
+  | 6
+  | 7
+  | 8
+  | 9
+  | 10
+  | 11
+  | 12
+  | 14
+  | 16
+  | 20
+  | 24
+  | 28
+  | 32
+  | 36
+  | 40
+  | 44
+  | 48
+  | 52
+  | 56
+  | 60
+  | 64
+  | 72
+  | 80
+  | 96;
 
 /**
  * This is the type used in the type annotation for the component
@@ -90,7 +152,7 @@ type BaseComponent = <C extends React.ElementType = 'span'>(
 ) => React.ReactElement | null;
 
 export const Base: BaseComponent = React.forwardRef(function Base<
-  C extends React.ElementType = 'span'
+  C extends React.ElementType = 'span',
 >(
   {
     as,
@@ -99,11 +161,25 @@ export const Base: BaseComponent = React.forwardRef(function Base<
     marginBottom,
     marginLeft,
     marginRight,
+    m,
+    mt,
+    mb,
+    ml,
+    mr,
+    mx,
+    my,
     padding,
     paddingTop,
     paddingBottom,
     paddingLeft,
     paddingRight,
+    p,
+    pt,
+    pb,
+    pr,
+    pl,
+    px,
+    py,
     printHidden,
     printVisible,
     hidden,
@@ -134,6 +210,13 @@ export const Base: BaseComponent = React.forwardRef(function Base<
           marginBottom !== undefined ? true : undefined,
         [`ds-mr-${marginRight}`]: marginRight !== undefined ? true : undefined,
         [`ds-ml-${marginLeft}`]: marginLeft !== undefined ? true : undefined,
+        [`ds-m-${m}`]: m !== undefined ? true : undefined,
+        [`ds-mt-${mt}`]: mt !== undefined ? true : undefined,
+        [`ds-mb-${mb}`]: mb !== undefined ? true : undefined,
+        [`ds-mr-${mr}`]: mr !== undefined ? true : undefined,
+        [`ds-ml-${ml}`]: ml !== undefined ? true : undefined,
+        [`ds-mx-${mx}`]: mx !== undefined ? true : undefined,
+        [`ds-my-${my}`]: my !== undefined ? true : undefined,
         [`ds-p-${padding}`]: padding !== undefined ? true : undefined,
         [`ds-pt-${paddingTop}`]: paddingTop !== undefined ? true : undefined,
         [`ds-pb-${paddingBottom}`]:
@@ -141,6 +224,13 @@ export const Base: BaseComponent = React.forwardRef(function Base<
         [`ds-pr-${paddingRight}`]:
           paddingRight !== undefined ? true : undefined,
         [`ds-pl-${paddingLeft}`]: paddingLeft !== undefined ? true : undefined,
+        [`ds-p-${p}`]: p !== undefined ? true : undefined,
+        [`ds-pt-${pt}`]: pt !== undefined ? true : undefined,
+        [`ds-pb-${pb}`]: pb !== undefined ? true : undefined,
+        [`ds-pr-${pr}`]: pr !== undefined ? true : undefined,
+        [`ds-pl-${pl}`]: pl !== undefined ? true : undefined,
+        [`ds-px-${px}`]: px !== undefined ? true : undefined,
+        [`ds-py-${py}`]: py !== undefined ? true : undefined,
         'ds-print-hidden': !!printHidden,
         'ds-print-visible-block': printVisible === 'block',
         'ds-print-visible-inline': printVisible === 'inline',

package/src/CallToAction/__snapshots__/index.test.tsx.snap

@@ -17,29 +17,29 @@ exports[`renders the CallToAction with no props 1`] = `
         hello
         <ChevronIcon>
           <ForwardRef(Icon)
-            icon="arrow"
+            icon="chevron"
           >
             <ForwardRef(SvgIcon)
-              className="ds-svg-icon--arrow"
+              className="ds-svg-icon--chevron"
             >
               <ForwardRef(Base)
                 aria-hidden="true"
                 as="svg"
-                className="ds-svg-icon--arrow ds-svg-icon"
+                className="ds-svg-icon--chevron ds-svg-icon"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
                 <svg
                   aria-hidden="true"
-                  className="ds-svg-icon--arrow ds-svg-icon"
+                  className="ds-svg-icon--chevron ds-svg-icon"
                   focusable="false"
                   viewBox="0 0 24 24"
                 >
-                  <arrow>
+                  <chevron>
                     <path
                       d="M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z"
                     />
-                  </arrow>
+                  </chevron>
                 </svg>
               </ForwardRef(Base)>
             </ForwardRef(SvgIcon)>

package/src/DropdownButton/__snapshots__/index.test.tsx.snap

@@ -57,31 +57,31 @@ exports[`renders the DropdownButton with arrow=true 1`] = `
       >
         <ForwardRef(Icon)
           direction="down"
-          icon="arrow"
+          icon="chevron"
         >
           <ForwardRef(SvgIcon)
-            className="ds-svg-icon--arrow"
+            className="ds-svg-icon--chevron"
           >
             <ForwardRef(Base)
               aria-hidden="true"
               as="svg"
-              className="ds-svg-icon--arrow ds-svg-icon"
+              className="ds-svg-icon--chevron ds-svg-icon"
               focusable="false"
               viewBox="0 0 24 24"
             >
               <svg
                 aria-hidden="true"
-                className="ds-svg-icon--arrow ds-svg-icon"
+                className="ds-svg-icon--chevron ds-svg-icon"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
-                <arrow
+                <chevron
                   direction="down"
                 >
                   <path
                     d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
                   />
-                </arrow>
+                </chevron>
               </svg>
             </ForwardRef(Base)>
           </ForwardRef(SvgIcon)>
@@ -150,31 +150,31 @@ exports[`renders the DropdownButton with color=primary and arrow={true} 1`] = `
       >
         <ForwardRef(Icon)
           direction="down"
-          icon="arrow"
+          icon="chevron"
         >
           <ForwardRef(SvgIcon)
-            className="ds-svg-icon--arrow"
+            className="ds-svg-icon--chevron"
           >
             <ForwardRef(Base)
               aria-hidden="true"
               as="svg"
-              className="ds-svg-icon--arrow ds-svg-icon"
+              className="ds-svg-icon--chevron ds-svg-icon"
               focusable="false"
               viewBox="0 0 24 24"
             >
               <svg
                 aria-hidden="true"
-                className="ds-svg-icon--arrow ds-svg-icon"
+                className="ds-svg-icon--chevron ds-svg-icon"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
-                <arrow
+                <chevron
                   direction="down"
                 >
                   <path
                     d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
                   />
-                </arrow>
+                </chevron>
               </svg>
             </ForwardRef(Base)>
           </ForwardRef(SvgIcon)>
@@ -286,31 +286,31 @@ exports[`renders the DropdownButton with color=primary variant="button" arrow={t
       >
         <ForwardRef(Icon)
           direction="down"
-          icon="arrow"
+          icon="chevron"
         >
           <ForwardRef(SvgIcon)
-            className="ds-svg-icon--arrow"
+            className="ds-svg-icon--chevron"
           >
             <ForwardRef(Base)
               aria-hidden="true"
               as="svg"
-              className="ds-svg-icon--arrow ds-svg-icon"
+              className="ds-svg-icon--chevron ds-svg-icon"
               focusable="false"
               viewBox="0 0 24 24"
             >
               <svg
                 aria-hidden="true"
-                className="ds-svg-icon--arrow ds-svg-icon"
+                className="ds-svg-icon--chevron ds-svg-icon"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
-                <arrow
+                <chevron
                   direction="down"
                 >
                   <path
                     d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
                   />
-                </arrow>
+                </chevron>
               </svg>
             </ForwardRef(Base)>
           </ForwardRef(SvgIcon)>
@@ -362,31 +362,31 @@ exports[`renders the DropdownButton with color=primary variant="link" arrow={tru
       >
         <ForwardRef(Icon)
           direction="down"
-          icon="arrow"
+          icon="chevron"
         >
           <ForwardRef(SvgIcon)
-            className="ds-svg-icon--arrow"
+            className="ds-svg-icon--chevron"
           >
             <ForwardRef(Base)
               aria-hidden="true"
               as="svg"
-              className="ds-svg-icon--arrow ds-svg-icon"
+              className="ds-svg-icon--chevron ds-svg-icon"
               focusable="false"
               viewBox="0 0 24 24"
             >
               <svg
                 aria-hidden="true"
-                className="ds-svg-icon--arrow ds-svg-icon"
+                className="ds-svg-icon--chevron ds-svg-icon"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
-                <arrow
+                <chevron
                   direction="down"
                 >
                   <path
                     d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
                   />
-                </arrow>
+                </chevron>
               </svg>
             </ForwardRef(Base)>
           </ForwardRef(SvgIcon)>
@@ -455,31 +455,31 @@ exports[`renders the DropdownButton with color=secondary and arrow={true} 1`] =
       >
         <ForwardRef(Icon)
           direction="down"
-          icon="arrow"
+          icon="chevron"
         >
           <ForwardRef(SvgIcon)
-            className="ds-svg-icon--arrow"
+            className="ds-svg-icon--chevron"
           >
             <ForwardRef(Base)
               aria-hidden="true"
               as="svg"
-              className="ds-svg-icon--arrow ds-svg-icon"
+              className="ds-svg-icon--chevron ds-svg-icon"
               focusable="false"
               viewBox="0 0 24 24"
             >
               <svg
                 aria-hidden="true"
-                className="ds-svg-icon--arrow ds-svg-icon"
+                className="ds-svg-icon--chevron ds-svg-icon"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
-                <arrow
+                <chevron
                   direction="down"
                 >
                   <path
                     d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
                   />
-                </arrow>
+                </chevron>
               </svg>
             </ForwardRef(Base)>
           </ForwardRef(SvgIcon)>
@@ -552,31 +552,31 @@ exports[`renders the DropdownButton with color=warning variant="button" arrow={t
       >
         <ForwardRef(Icon)
           direction="down"
-          icon="arrow"
+          icon="chevron"
         >
           <ForwardRef(SvgIcon)
-            className="ds-svg-icon--arrow"
+            className="ds-svg-icon--chevron"
           >
             <ForwardRef(Base)
               aria-hidden="true"
               as="svg"
-              className="ds-svg-icon--arrow ds-svg-icon"
+              className="ds-svg-icon--chevron ds-svg-icon"
               focusable="false"
               viewBox="0 0 24 24"
             >
               <svg
                 aria-hidden="true"
-                className="ds-svg-icon--arrow ds-svg-icon"
+                className="ds-svg-icon--chevron ds-svg-icon"
                 focusable="false"
                 viewBox="0 0 24 24"
               >
-                <arrow
+                <chevron
                   direction="down"
                 >
                   <path
                     d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
                   />
-                </arrow>
+                </chevron>
               </svg>
             </ForwardRef(Base)>
           </ForwardRef(SvgIcon)>

package/src/Hidden/__snapshots__/index.test.tsx.snap

@@ -6,7 +6,8 @@ exports[`renders the Hidden with \`lgUp\` props 1`] = `
 >
   <ForwardRef(Base)
     as="div"
-    className="ds-hidden-lg--up"
+    lgUpHidden={true}
+    xsUpHidden={false}
   >
     <div
       className="ds-hidden-lg--up"
@@ -25,7 +26,8 @@ exports[`renders the Hidden with \`mdUp\` props 1`] = `
 >
   <ForwardRef(Base)
     as="div"
-    className="ds-hidden-md--up"
+    mdUpHidden={true}
+    xsUpHidden={false}
   >
     <div
       className="ds-hidden-md--up"
@@ -44,7 +46,8 @@ exports[`renders the Hidden with \`smUp\` props 1`] = `
 >
   <ForwardRef(Base)
     as="div"
-    className="ds-hidden-sm--up"
+    smUpHidden={true}
+    xsUpHidden={false}
   >
     <div
       className="ds-hidden-sm--up"
@@ -63,7 +66,8 @@ exports[`renders the Hidden with \`xlUp\` props 1`] = `
 >
   <ForwardRef(Base)
     as="div"
-    className="ds-hidden-xl--up"
+    xlUpHidden={true}
+    xsUpHidden={false}
   >
     <div
       className="ds-hidden-xl--up"
@@ -82,7 +86,7 @@ exports[`renders the Hidden with \`xsUp\` props 1`] = `
 >
   <ForwardRef(Base)
     as="div"
-    className="ds-hidden-xs--up"
+    xsUpHidden={true}
   >
     <div
       className="ds-hidden-xs--up"