@digigov/react-core 1.3.0-dcbd7ded → 2.0.0-4be8f7cc

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

@@ -342,14 +342,14 @@ exports[`renders the Paragraph with size=lead 1`] = `
   >
     <ForwardRef(Typography)
       as="p"
-      className="ds-body-lg ds-body"
+      className="ds-body--lg ds-body"
     >
       <ForwardRef(Base)
         as="p"
-        className="ds-body-lg ds-body"
+        className="ds-body--lg ds-body"
       >
         <p
-          className="ds-body-lg ds-body"
+          className="ds-body--lg ds-body"
         >
           hello
         </p>
@@ -371,15 +371,15 @@ exports[`renders the Paragraph with size=lead and fontSize=14 1`] = `
   >
     <ForwardRef(Typography)
       as="p"
-      className="ds-body-lg ds-body"
+      className="ds-body--lg ds-body"
       fontSize={14}
     >
       <ForwardRef(Base)
         as="p"
-        className="ds-body-lg ds-body ds-!-font-size-14"
+        className="ds-body--lg ds-body ds-!-font-size-14"
       >
         <p
-          className="ds-body-lg ds-body ds-!-font-size-14"
+          className="ds-body--lg ds-body ds-!-font-size-14"
         >
           hello
         </p>
@@ -401,15 +401,15 @@ exports[`renders the Paragraph with size=lead and fontSize=16 1`] = `
   >
     <ForwardRef(Typography)
       as="p"
-      className="ds-body-lg ds-body"
+      className="ds-body--lg ds-body"
       fontSize={16}
     >
       <ForwardRef(Base)
         as="p"
-        className="ds-body-lg ds-body ds-!-font-size-16"
+        className="ds-body--lg ds-body ds-!-font-size-16"
       >
         <p
-          className="ds-body-lg ds-body ds-!-font-size-16"
+          className="ds-body--lg ds-body ds-!-font-size-16"
         >
           hello
         </p>
@@ -431,15 +431,15 @@ exports[`renders the Paragraph with size=lead and fontSize=19 1`] = `
   >
     <ForwardRef(Typography)
       as="p"
-      className="ds-body-lg ds-body"
+      className="ds-body--lg ds-body"
       fontSize={19}
     >
       <ForwardRef(Base)
         as="p"
-        className="ds-body-lg ds-body ds-!-font-size-19"
+        className="ds-body--lg ds-body ds-!-font-size-19"
       >
         <p
-          className="ds-body-lg ds-body ds-!-font-size-19"
+          className="ds-body--lg ds-body ds-!-font-size-19"
         >
           hello
         </p>
@@ -461,15 +461,15 @@ exports[`renders the Paragraph with size=lead and fontSize=24 1`] = `
   >
     <ForwardRef(Typography)
       as="p"
-      className="ds-body-lg ds-body"
+      className="ds-body--lg ds-body"
       fontSize={14}
     >
       <ForwardRef(Base)
         as="p"
-        className="ds-body-lg ds-body ds-!-font-size-14"
+        className="ds-body--lg ds-body ds-!-font-size-14"
       >
         <p
-          className="ds-body-lg ds-body ds-!-font-size-14"
+          className="ds-body--lg ds-body ds-!-font-size-14"
         >
           hello
         </p>
@@ -491,15 +491,15 @@ exports[`renders the Paragraph with size=lead and fontSize=30 1`] = `
   >
     <ForwardRef(Typography)
       as="p"
-      className="ds-body-lg ds-body"
+      className="ds-body--lg ds-body"
       fontSize={30}
     >
       <ForwardRef(Base)
         as="p"
-        className="ds-body-lg ds-body ds-!-font-size-30"
+        className="ds-body--lg ds-body ds-!-font-size-30"
       >
         <p
-          className="ds-body-lg ds-body ds-!-font-size-30"
+          className="ds-body--lg ds-body ds-!-font-size-30"
         >
           hello
         </p>
@@ -521,15 +521,15 @@ exports[`renders the Paragraph with size=lead and fontSize=36 1`] = `
   >
     <ForwardRef(Typography)
       as="p"
-      className="ds-body-lg ds-body"
+      className="ds-body--lg ds-body"
       fontSize={36}
     >
       <ForwardRef(Base)
         as="p"
-        className="ds-body-lg ds-body ds-!-font-size-36"
+        className="ds-body--lg ds-body ds-!-font-size-36"
       >
         <p
-          className="ds-body-lg ds-body ds-!-font-size-36"
+          className="ds-body--lg ds-body ds-!-font-size-36"
         >
           hello
         </p>
@@ -551,15 +551,15 @@ exports[`renders the Paragraph with size=lead and fontSize=48 1`] = `
   >
     <ForwardRef(Typography)
       as="p"
-      className="ds-body-lg ds-body"
+      className="ds-body--lg ds-body"
       fontSize={48}
     >
       <ForwardRef(Base)
         as="p"
-        className="ds-body-lg ds-body ds-!-font-size-48"
+        className="ds-body--lg ds-body ds-!-font-size-48"
       >
         <p
-          className="ds-body-lg ds-body ds-!-font-size-48"
+          className="ds-body--lg ds-body ds-!-font-size-48"
         >
           hello
         </p>
@@ -581,15 +581,15 @@ exports[`renders the Paragraph with size=lead and fontSize=72 1`] = `
   >
     <ForwardRef(Typography)
       as="p"
-      className="ds-body-lg ds-body"
+      className="ds-body--lg ds-body"
       fontSize={72}
     >
       <ForwardRef(Base)
         as="p"
-        className="ds-body-lg ds-body ds-!-font-size-72"
+        className="ds-body--lg ds-body ds-!-font-size-72"
       >
         <p
-          className="ds-body-lg ds-body ds-!-font-size-72"
+          className="ds-body--lg ds-body ds-!-font-size-72"
         >
           hello
         </p>
@@ -942,14 +942,14 @@ exports[`renders the Paragraph with size=small 1`] = `
   >
     <ForwardRef(Typography)
       as="p"
-      className="ds-body-sm ds-body"
+      className="ds-body--sm ds-body"
     >
       <ForwardRef(Base)
         as="p"
-        className="ds-body-sm ds-body"
+        className="ds-body--sm ds-body"
       >
         <p
-          className="ds-body-sm ds-body"
+          className="ds-body--sm ds-body"
         >
           hello
         </p>
@@ -971,15 +971,15 @@ exports[`renders the Paragraph with size=small and fontSize=14 1`] = `
   >
     <ForwardRef(Typography)
       as="p"
-      className="ds-body-sm ds-body"
+      className="ds-body--sm ds-body"
       fontSize={14}
     >
       <ForwardRef(Base)
         as="p"
-        className="ds-body-sm ds-body ds-!-font-size-14"
+        className="ds-body--sm ds-body ds-!-font-size-14"
       >
         <p
-          className="ds-body-sm ds-body ds-!-font-size-14"
+          className="ds-body--sm ds-body ds-!-font-size-14"
         >
           hello
         </p>
@@ -1001,15 +1001,15 @@ exports[`renders the Paragraph with size=small and fontSize=16 1`] = `
   >
     <ForwardRef(Typography)
       as="p"
-      className="ds-body-sm ds-body"
+      className="ds-body--sm ds-body"
       fontSize={16}
     >
       <ForwardRef(Base)
         as="p"
-        className="ds-body-sm ds-body ds-!-font-size-16"
+        className="ds-body--sm ds-body ds-!-font-size-16"
       >
         <p
-          className="ds-body-sm ds-body ds-!-font-size-16"
+          className="ds-body--sm ds-body ds-!-font-size-16"
         >
           hello
         </p>
@@ -1031,15 +1031,15 @@ exports[`renders the Paragraph with size=small and fontSize=19 1`] = `
   >
     <ForwardRef(Typography)
       as="p"
-      className="ds-body-sm ds-body"
+      className="ds-body--sm ds-body"
       fontSize={19}
     >
       <ForwardRef(Base)
         as="p"
-        className="ds-body-sm ds-body ds-!-font-size-19"
+        className="ds-body--sm ds-body ds-!-font-size-19"
       >
         <p
-          className="ds-body-sm ds-body ds-!-font-size-19"
+          className="ds-body--sm ds-body ds-!-font-size-19"
         >
           hello
         </p>
@@ -1061,15 +1061,15 @@ exports[`renders the Paragraph with size=small and fontSize=24 1`] = `
   >
     <ForwardRef(Typography)
       as="p"
-      className="ds-body-sm ds-body"
+      className="ds-body--sm ds-body"
       fontSize={14}
     >
       <ForwardRef(Base)
         as="p"
-        className="ds-body-sm ds-body ds-!-font-size-14"
+        className="ds-body--sm ds-body ds-!-font-size-14"
       >
         <p
-          className="ds-body-sm ds-body ds-!-font-size-14"
+          className="ds-body--sm ds-body ds-!-font-size-14"
         >
           hello
         </p>
@@ -1091,15 +1091,15 @@ exports[`renders the Paragraph with size=small and fontSize=30 1`] = `
   >
     <ForwardRef(Typography)
       as="p"
-      className="ds-body-sm ds-body"
+      className="ds-body--sm ds-body"
       fontSize={30}
     >
       <ForwardRef(Base)
         as="p"
-        className="ds-body-sm ds-body ds-!-font-size-30"
+        className="ds-body--sm ds-body ds-!-font-size-30"
       >
         <p
-          className="ds-body-sm ds-body ds-!-font-size-30"
+          className="ds-body--sm ds-body ds-!-font-size-30"
         >
           hello
         </p>
@@ -1121,15 +1121,15 @@ exports[`renders the Paragraph with size=small and fontSize=36 1`] = `
   >
     <ForwardRef(Typography)
       as="p"
-      className="ds-body-sm ds-body"
+      className="ds-body--sm ds-body"
       fontSize={36}
     >
       <ForwardRef(Base)
         as="p"
-        className="ds-body-sm ds-body ds-!-font-size-36"
+        className="ds-body--sm ds-body ds-!-font-size-36"
       >
         <p
-          className="ds-body-sm ds-body ds-!-font-size-36"
+          className="ds-body--sm ds-body ds-!-font-size-36"
         >
           hello
         </p>
@@ -1151,15 +1151,15 @@ exports[`renders the Paragraph with size=small and fontSize=48 1`] = `
   >
     <ForwardRef(Typography)
       as="p"
-      className="ds-body-sm ds-body"
+      className="ds-body--sm ds-body"
       fontSize={48}
     >
       <ForwardRef(Base)
         as="p"
-        className="ds-body-sm ds-body ds-!-font-size-48"
+        className="ds-body--sm ds-body ds-!-font-size-48"
       >
         <p
-          className="ds-body-sm ds-body ds-!-font-size-48"
+          className="ds-body--sm ds-body ds-!-font-size-48"
         >
           hello
         </p>
@@ -1181,15 +1181,15 @@ exports[`renders the Paragraph with size=small and fontSize=72 1`] = `
   >
     <ForwardRef(Typography)
       as="p"
-      className="ds-body-sm ds-body"
+      className="ds-body--sm ds-body"
       fontSize={72}
     >
       <ForwardRef(Base)
         as="p"
-        className="ds-body-sm ds-body ds-!-font-size-72"
+        className="ds-body--sm ds-body ds-!-font-size-72"
       >
         <p
-          className="ds-body-sm ds-body ds-!-font-size-72"
+          className="ds-body--sm ds-body ds-!-font-size-72"
         >
           hello
         </p>

package/src/PhaseBannerHeaderContainer/__snapshots__/inde.test.tsx.snap

@@ -4,10 +4,10 @@ exports[`renders the PhaseBannerHeaderContainer with no props 1`] = `
 <ForwardRef(PhaseBannerHeaderContainer)>
   <ForwardRef(Base)
     as="div"
-    className="ds-phase-banner__header"
+    className="ds-phase-banner-header"
   >
     <div
-      className="ds-phase-banner__header"
+      className="ds-phase-banner-header"
     >
       hello
     </div>

package/src/PhaseBannerHeaderContainer/index.tsx

@@ -14,7 +14,7 @@ export const PhaseBannerHeaderContainer = React.forwardRef<
       ref={ref}
       {...props}
       className={clsx({
-        'ds-phase-banner__header': true,
+        'ds-phase-banner-header': true,
       })}
     >
       {children}

package/src/Skeleton/index.tsx

@@ -0,0 +1,84 @@
+import React from 'react';
+import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+
+export interface SkeletonProps extends BaseProps<'span'> {
+  /**
+   * variant prop determines the style of the skeleton element.
+   * @value 'circular', it renders a circular skeleton.
+   * @value 'rectangular', it renders a rectangular skeleton.
+   * @value 'text', it renders a text skeleton.
+   * @value 'button', it renders a button skeleton.
+   * @default 'text'
+   */
+  variant?: 'circular' | 'rectangular' | 'text' | 'button';
+
+  /**
+   * width prop determines the width of the skeleton element.
+   * It accepts number in px or string with valid CSS units (e.g. '24px', '1em', '100%').
+   * @default undefined
+   */
+  width?: number | string;
+
+  /**
+   * height prop determines the height of the skeleton element.
+   * It accepts number in px or string with valid CSS units (e.g. '24px', '1em', '100%').
+   * @default undefined
+   */
+  height?: number | string;
+
+  /**
+   * animation prop determines if the skeleton should animate or not.
+   * @default true
+   */
+  animation?: boolean;
+}
+/**
+ * Use Skeleton component while a page is loading.
+ */
+export const Skeleton = React.forwardRef<HTMLSpanElement, SkeletonProps>(
+  function Skeleton(
+    {
+      width,
+      height,
+      variant = 'text',
+      animation = true,
+      className,
+      children,
+      ...props
+    },
+    ref
+  ) {
+    return (
+      <Base
+        as="span"
+        ref={ref}
+        className={clsx(className, {
+          'ds-skeleton': true,
+          [`ds-skeleton--${variant}`]: !!variant && !children,
+          'ds-skeleton--animate': !!animation,
+          'ds-skeleton--width-fit-content': !!children && !width,
+        })}
+        {...props}
+        style={{
+          width: typeof width === 'number' ? `${width}px` : width,
+          maxWidth: !!width ? '100%' : undefined,
+          height: typeof height === 'number' ? `${height}px` : height,
+        }}
+      >
+        {variant === 'button' && (
+          <span
+            className={clsx({
+              'ds-skeleton__line': true,
+              'ds-skeleton__line--size-default':
+                width === undefined && height === undefined,
+            })}
+          ></span>
+        )}
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default Skeleton;