npm - @digigov/react-core - Versions diffs - 2.0.0-113e6661 → 2.0.0-298cfc51 - Mend

@digigov/react-core 2.0.0-113e6661 → 2.0.0-298cfc51

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (373) hide show

package/src/AutoCompleteResultListItem/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the AutoCompleteResultList with index props 1`] = `
 <body>
@@ -17,7 +17,7 @@ exports[`renders the AutoCompleteResultList with isVisible isFocused props 1`] =
 <body>
   <div>
     <li
-      class="ds-autocomplete__option--odd ds-autocomplete__option"
+      class="ds-autocomplete__option ds-autocomplete__option--odd"
       tabindex="-1"
     >
       Hello
@@ -30,7 +30,7 @@ exports[`renders the AutoCompleteResultList with isVisible isHovered isFocused p
 <body>
   <div>
     <li
-      class="ds-autocomplete__option--odd ds-autocomplete__option--focused ds-autocomplete__option"
+      class="ds-autocomplete__option ds-autocomplete__option--odd ds-autocomplete__option--focused"
       tabindex="-1"
     >
       Hello

package/src/AutoCompleteStatus/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the AdminContainer with no props 1`] = `
 <body>

package/src/AutoCompleteStatusContainer/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the AdminContainer with no props 1`] = `
 <body>

package/src/BackLink/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,20 +1,23 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the BackLink with href="#" 1`] = `
 <body>
   <div>
     <a
-      class="ds-back-link ds-print-hidden"
+      class="ds-print-hidden ds-back-link"
       href="#"
       tabindex="0"
     >
       <svg
         aria-hidden="true"
+        as="svg"
         class="ds-svg-icon--caret ds-svg-icon"
         focusable="false"
         viewBox="0 0 24 24"
       >
         <path
+          as="path"
+          class=""
           d="M18,22V2L6,12L18,22z"
         />
       </svg>
@@ -28,16 +31,19 @@ exports[`renders the BackLink with no props 1`] = `
 <body>
   <div>
     <a
-      class="ds-back-link ds-print-hidden"
+      class="ds-print-hidden ds-back-link"
       tabindex="0"
     >
       <svg
         aria-hidden="true"
+        as="svg"
         class="ds-svg-icon--caret ds-svg-icon"
         focusable="false"
         viewBox="0 0 24 24"
       >
         <path
+          as="path"
+          class=""
           d="M18,22V2L6,12L18,22z"
         />
       </svg>

package/src/BannerContainer/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the BannerContainer with no props 1`] = `
 <body>

package/src/Base/index.native.tsx CHANGED Viewed

@@ -18,6 +18,9 @@ const BooleanMapper = {
   null: false,
   '': false,
 };
+const textHtmlTags = ['h1', 'h2', 'h3', 'h4', 'h5', 'p', 'span'];
 export const Base: BaseComponent = React.forwardRef(function Base<
   C extends React.ElementType = 'span',
 >(
@@ -69,6 +72,49 @@ export const Base: BaseComponent = React.forwardRef(function Base<
   ref: React.ComponentPropsWithRef<C>['ref']
 ) {
   const classNames = className?.split(' ') || [];
+  let applyBasePropsToWrapper: boolean = true;
+  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,
+  });
   if (typeof children === 'string') {
     children = [children];
   }
@@ -89,10 +135,17 @@ export const Base: BaseComponent = React.forwardRef(function Base<
           return child;
         });
       } else if (typeof child === 'string') {
+        if (as && textHtmlTags.includes(as as string)) {
+          applyBasePropsToWrapper = false;
+        }
         return (
           <Text
             key={index}
-            className={textClassNames}
+            className={
+              applyBasePropsToWrapper
+                ? textClassNames
+                : `${textClassNames} ${basePropToClassName}`
+            }
             {...(props.onClick && {
               onPress: props.onClick,
             })}
@@ -135,47 +188,11 @@ export const Base: BaseComponent = React.forwardRef(function Base<
             ? true
             : undefined
       }
-      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={
+        applyBasePropsToWrapper
+          ? `${basePropToClassName} ${className}`
+          : className
+      }
     >
       {children}
     </Component>

package/src/Base/index.web.tsx CHANGED Viewed

@@ -1,6 +1,6 @@
 import React from 'react';
+import clsx from 'clsx';
 import { basePropGenerator } from '@digigov/react-core/Base/utils';
 type AsProp<C extends React.ElementType> = {
   as?: C;
 };
@@ -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,50 @@ 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={clsx(basePropToClassName, className)}
       ref={ref}
       {...props}
     >

package/src/Base/utils.ts CHANGED Viewed

@@ -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/Base/wrap.native.tsx CHANGED Viewed

@@ -11,7 +11,11 @@ const WrapperContext = React.createContext<WrapperContextType>(
   }
 );
-const Wrapper = React.memo(({ children }: { children?: React.ReactNode }) => {
+const Wrapper = React.memo(function Wrapper({
+  children,
+}: {
+  children?: React.ReactNode;
+}) {
   const [className, setClassName] = useState('');
   return (
     <WrapperContext.Provider value={setClassName}>

package/src/Blockquote/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,10 +1,10 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the Blockquote with dense props 1`] = `
 <body>
   <div>
     <blockquote
-      class="ds-blockquote--dense ds-blockquote"
+      class="ds-blockquote ds-blockquote--dense"
     >
       hello
     </blockquote>

package/src/Bottom/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the Bottom with no props 1`] = `
 <body>

package/src/BottomInfo/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,10 +1,10 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the BottomInfo with no props 1`] = `
 <body>
   <div>
     <div
-      class="ds-bottom-info ds-container ds-gap-sm-12 ds-grid"
+      class="ds-bottom-info ds-container ds-grid ds-gap-sm-12"
     >
       hello
     </div>

package/src/BottomInfoContainer/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,10 +1,10 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the BottomInfoContainer with no props 1`] = `
 <body>
   <div>
     <div
-      class="ds-bottom-info__container ds-container ds-gap-sm-12 ds-grid"
+      class="ds-bottom-info__container ds-container ds-grid ds-gap-sm-12"
     >
       hello
     </div>

package/src/BottomInfoContent/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the BottomInfoContent with no props 1`] = `
 <body>

package/src/Breadcrumbs/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the Breadcrumbs with no props 1`] = `
 <body>

package/src/BreadcrumbsList/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the BreadcrumbsList with no props 1`] = `
 <body>

package/src/BreadcrumbsListItem/__snapshots__/index.test.tsx.snap CHANGED Viewed

@@ -1,21 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`renders the BreadcrumbsListItem with href 1`] = `
-<body>
-  <div>
-    <li
-      class="ds-breadcrumbs__list-item"
-    >
-      <a
-        class="ds-breadcrumbs__link"
-        href="#"
-      >
-        hello
-      </a>
-    </li>
-  </div>
-</body>
-`;
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the BreadcrumbsListItem with no props 1`] = `
 <body>
@@ -23,11 +6,7 @@ exports[`renders the BreadcrumbsListItem with no props 1`] = `
     <li
       class="ds-breadcrumbs__list-item"
     >
-      <a
-        class="ds-breadcrumbs__link--inactive ds-breadcrumbs__link"
-      >
-        hello
-      </a>
+      hello
     </li>
   </div>
 </body>

package/src/BreadcrumbsListItem/index.test.tsx CHANGED Viewed

@@ -8,8 +8,3 @@ it('renders the BreadcrumbsListItem with no props', () => {
     render(<BreadcrumbsListItem>hello</BreadcrumbsListItem>).baseElement
   ).toMatchSnapshot();
 });
-it('renders the BreadcrumbsListItem with href', () => {
-  expect(
-    render(<BreadcrumbsListItem href="#">hello</BreadcrumbsListItem>).baseElement
-  ).toMatchSnapshot();
-});