@digigov/react-core 2.0.0-rc.18 → 2.0.0-rc.19

package/src/Base/index.web.tsx

@@ -32,53 +32,53 @@ export type BaseProps<C extends React.ElementType> =
     C,
     {
       /** margin is optional. It has not a default value. */
-      margin?: spacingValues;
+      margin?: SpacingValues | SpacingMediaValues;
       /** marginTop is optional. It has not a default value. */
-      marginTop?: spacingValues;
+      marginTop?: SpacingValues | SpacingMediaValues;
       /** marginBottom is optional. It has not a default value. */
-      marginBottom?: spacingValues;
+      marginBottom?: SpacingValues | SpacingMediaValues;
       /** marginLeft is optional. It has not a default value. */
-      marginLeft?: spacingValues;
+      marginLeft?: SpacingValues | SpacingMediaValues;
       /** marginRight is optional. It has not a default value. */
-      marginRight?: spacingValues;
+      marginRight?: SpacingValues | SpacingMediaValues;
       /** Alternative for margin. Margin is optional. It has not a default value. */
-      m?: spacingValues;
+      m?: SpacingValues | SpacingMediaValues;
       /** Alternative for marginTop. MarginTop is optional. It has not a default value. */
-      mt?: spacingValues;
+      mt?: SpacingValues | SpacingMediaValues;
       /** Alternative for marginBottom. MarginBottom is optional. It has not a default value. */
-      mb?: spacingValues;
+      mb?: SpacingValues | SpacingMediaValues;
       /** Alternative for marginLeft. MarginLeft is optional. It has not a default value. */
-      ml?: spacingValues;
+      ml?: SpacingValues | SpacingMediaValues;
       /** Alternative for marginRight. MarginRight is optional. It has not a default value. */
-      mr?: spacingValues;
+      mr?: SpacingValues | SpacingMediaValues;
       /** Alternative for marginX. MarginX is optional. It has not a default value. */
-      mx?: spacingValues;
+      mx?: SpacingValues | SpacingMediaValues;
       /** Alternative for marginY. MarginY is optional. It has not a default value. */
-      my?: spacingValues;
+      my?: SpacingValues | SpacingMediaValues;
       /** padding is optional. It has not a default value. */
-      padding?: spacingValues;
+      padding?: SpacingValues | SpacingMediaValues;
       /** paddingTop is optional. It has not a default value. */
-      paddingTop?: spacingValues;
+      paddingTop?: SpacingValues | SpacingMediaValues;
       /** paddingBottom is optional. It has not a default value. */
-      paddingBottom?: spacingValues;
+      paddingBottom?: SpacingValues | SpacingMediaValues;
       /** paddingLeft is optional. It has not a default value. */
-      paddingLeft?: spacingValues;
+      paddingLeft?: SpacingValues | SpacingMediaValues;
       /** paddingRight is optional. It has not a default value. */
-      paddingRight?: spacingValues;
+      paddingRight?: SpacingValues | SpacingMediaValues;
       /** Alternative for padding. Padding is optional. It has not a default value. */
-      p?: spacingValues;
+      p?: SpacingValues | SpacingMediaValues;
       /** Alternative for paddingTop. PaddingTop is optional. It has not a default value. */
-      pt?: spacingValues;
+      pt?: SpacingValues | SpacingMediaValues;
       /** Alternative for paddingBottom. PaddingBottom is optional. It has not a default value. */
-      pb?: spacingValues;
+      pb?: SpacingValues | SpacingMediaValues;
       /** Alternative for paddingLeft. PaddingLeft is optional. It has not a default value. */
-      pl?: spacingValues;
+      pl?: SpacingValues | SpacingMediaValues;
       /** Alternative for paddingRight. PaddingRight is optional. It has not a default value. */
-      pr?: spacingValues;
+      pr?: SpacingValues | SpacingMediaValues;
       /** Alternative for paddingX. PaddingX is optional. It has not a default value. */
-      px?: spacingValues;
+      px?: SpacingValues | SpacingMediaValues;
       /** Alternative for paddingY. PaddingY is optional. It has not a default value. */
-      py?: spacingValues;
+      py?: SpacingValues | SpacingMediaValues;
       /**  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.*/
@@ -106,11 +106,11 @@ export type BaseProps<C extends React.ElementType> =
       /** Components will be hidden between xl and 2xl screen size. */
       xlHidden?: boolean;
       /**  display is optional. It has not a default value. */
-      display?: 'flex' | 'block' | 'none'
+      display?: 'flex' | 'block' | 'none';
     }
   >;
 
-type spacingValues =
+export type SpacingValues =
   | 0
   | 0.5
   | 1
@@ -146,6 +146,14 @@ type spacingValues =
   | 80
   | 96;
 
+export type SpacingMediaValues = {
+  xs?: SpacingValues;
+  sm?: SpacingValues;
+  md?: SpacingValues;
+  lg?: SpacingValues;
+  xl?: SpacingValues;
+};
+
 /**
  * This is the type used in the type annotation for the component
  */
@@ -204,50 +212,51 @@ export const Base: BaseComponent = React.forwardRef(function Base<
 ) {
   const Component = as || 'span';
 
+  const basePropToClassName = basePropGenerator({
+    display,
+    margin,
+    marginTop,
+    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,
+    xsUpHidden,
+    smUpHidden,
+    mdUpHidden,
+    lgUpHidden,
+    xlUpHidden,
+    xsHidden,
+    smHidden,
+    mdHidden,
+    lgHidden,
+    xlHidden,
+  });
+
   return (
     <Component
       as={as}
-      className={basePropGenerator({
-        display,
-        margin,
-        marginTop,
-        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,
-        xsUpHidden,
-        smUpHidden,
-        mdUpHidden,
-        lgUpHidden,
-        xlUpHidden,
-        xsHidden,
-        smHidden,
-        mdHidden,
-        lgHidden,
-        xlHidden,
-        className,
-      })}
+      className={`${basePropToClassName} ${className}`}
       ref={ref}
       {...props}
     >

package/src/Base/utils.ts

@@ -1,5 +1,25 @@
 import clsx from 'clsx';
 
+// Helper function to handle both SpacingValues and SpacingMediaValues
+const generateSpacingClasses = (prefix, spacing) => {
+  if (typeof spacing === 'object') {
+    // It's a SpacingMediaValues (media-specific)
+    return {
+      [`${prefix}-xs-${spacing?.xs}`]: spacing?.xs !== undefined,
+      [`${prefix}-sm-${spacing?.sm}`]: spacing?.sm !== undefined,
+      [`${prefix}-md-${spacing?.md}`]: spacing?.md !== undefined,
+      [`${prefix}-lg-${spacing?.lg}`]: spacing?.lg !== undefined,
+      [`${prefix}-xl-${spacing?.xl}`]: spacing?.xl !== undefined,
+    };
+  } else if (spacing !== undefined) {
+    // It's a regular SpacingValues
+    return {
+      [`${prefix}-${spacing}`]: true,
+    };
+  }
+  return {};
+};
+
 export const basePropGenerator = ({
   display,
   margin,
@@ -39,34 +59,23 @@ export const basePropGenerator = ({
   mdHidden,
   lgHidden,
   xlHidden,
-  className,
-}) =>
-  clsx(className, {
-    [`ds-display-${display}`]: display !== undefined ? true : undefined,
-    [`ds-m-${margin}`]: margin !== undefined ? true : undefined,
-    [`ds-mt-${marginTop}`]: marginTop !== undefined ? true : undefined,
-    [`ds-mb-${marginBottom}`]: 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}`]: paddingBottom !== undefined ? true : undefined,
-    [`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,
+}) => {
+  return clsx({
+    [`ds-display-${display}`]: display !== undefined,
+    ...generateSpacingClasses('ds-m', m ?? margin),
+    ...generateSpacingClasses('ds-mt', mt ?? marginTop),
+    ...generateSpacingClasses('ds-mb', mb ?? marginBottom),
+    ...generateSpacingClasses('ds-mr', mr ?? marginRight),
+    ...generateSpacingClasses('ds-ml', ml ?? marginLeft),
+    ...generateSpacingClasses('ds-mx', mx),
+    ...generateSpacingClasses('ds-my', my),
+    ...generateSpacingClasses('ds-p', p ?? padding),
+    ...generateSpacingClasses('ds-pt', pt ?? paddingTop),
+    ...generateSpacingClasses('ds-pb', pb ?? paddingBottom),
+    ...generateSpacingClasses('ds-pr', pr ?? paddingRight),
+    ...generateSpacingClasses('ds-pl', pl ?? paddingLeft),
+    ...generateSpacingClasses('ds-px', px),
+    ...generateSpacingClasses('ds-py', py),
     'ds-print-hidden': !!printHidden,
     'ds-print-visible-block': printVisible === 'block',
     'ds-print-visible-inline': printVisible === 'inline',
@@ -82,3 +91,4 @@ export const basePropGenerator = ({
     'ds-hidden-lg': !!lgHidden,
     'ds-hidden-xl': !!xlHidden,
   });
+};

package/src/ModalContainer/index.tsx

@@ -32,7 +32,10 @@ export interface ModalContainerProps extends BaseProps<'div'> {
 export const ModalContainer = React.forwardRef<
   HTMLDivElement,
   ModalContainerProps
->(function ModalContainer({ className, gaps = true, children, open, dense, ...props }, ref) {
+>(function ModalContainer(
+  { className, gaps = true, children, open, dense, ...props },
+  ref
+) {
   return (
     <Base
       ref={ref}
@@ -44,16 +47,15 @@ export const ModalContainer = React.forwardRef<
       })}
       {...props}
     >
-      <div className='ds-modal__body'>
-        {gaps ?
-          <div
-            className='ds-modal__container'
-          >
+      <Base as="div" className="ds-modal__body">
+        {gaps ? (
+          <Base as="div" className="ds-modal__container">
             {children}
-          </div>
-          :
-          children}
-      </div>
+          </Base>
+        ) : (
+          children
+        )}
+      </Base>
     </Base>
   );
 });

package/src/Stack/index.tsx

@@ -11,12 +11,12 @@ export interface StackProps extends BaseProps<'div'> {
    * justifyContent is optional. Set to control how items are positioned along Stack's main axis .
    */
   justifyContent?:
-  | 'flex-start'
-  | 'flex-end'
-  | 'center'
-  | 'space-between'
-  | 'space-around'
-  | 'space-evenly';
+    | 'flex-start'
+    | 'flex-end'
+    | 'center'
+    | 'space-between'
+    | 'space-around'
+    | 'space-evenly';
   /**
    * alignItems is optional. Set to control how items are positioned along Stack's cross axis.
    */
@@ -25,21 +25,30 @@ export interface StackProps extends BaseProps<'div'> {
    * alignContent is optional. Set to control how rows are positioned in multi-row Stack container.
    */
   alignContent?:
-  | 'flex-start'
-  | 'flex-end'
-  | 'center'
-  | 'space-between'
-  | 'space-around'
-  | 'space-evenly';
+    | 'flex-start'
+    | 'flex-end'
+    | 'center'
+    | 'space-between'
+    | 'space-around'
+    | 'space-evenly';
   /**
    * spacing is optional. Set to the number you want the space to be.
    */
-  spacing?: 1 | 2 | 4 | 6 | 8 | 10 | 12;
+  spacing?: SpacingValues | SpacingMediaValues;
   /**
    * flexWrap is optional. The default value is 'wrap'.
    */
   flexWrap?: 'wrap' | 'nowrap';
 }
+
+type SpacingValues = 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 11 | 12;
+type SpacingMediaValues = {
+  xs?: SpacingValues;
+  sm?: SpacingValues;
+  md?: SpacingValues;
+  lg?: SpacingValues;
+  xl?: SpacingValues;
+};
 /**
  * ...
  */
@@ -70,6 +79,16 @@ export const Stack = React.forwardRef<HTMLDivElement, StackProps>(
           [`ds-stack--content-${alignContent}`]: alignContent,
           'ds-stack--nowrap': flexWrap === 'nowrap',
           [`ds-gap-${spacing}`]: spacing !== undefined,
+          [`ds-gap-xs-${(spacing as SpacingMediaValues)?.xs}`]:
+            (spacing as SpacingMediaValues)?.xs !== undefined,
+          [`ds-gap-sm-${(spacing as SpacingMediaValues)?.sm}`]:
+            (spacing as SpacingMediaValues)?.sm !== undefined,
+          [`ds-gap-md-${(spacing as SpacingMediaValues)?.md}`]:
+            (spacing as SpacingMediaValues)?.md !== undefined,
+          [`ds-gap-lg-${(spacing as SpacingMediaValues)?.lg}`]:
+            (spacing as SpacingMediaValues)?.lg !== undefined,
+          [`ds-gap-xl-${(spacing as SpacingMediaValues)?.xl}`]:
+            (spacing as SpacingMediaValues)?.xl !== undefined,
         })}
         {...props}
       >