npm - @digigov/react-core - Versions diffs - 2.0.0-60d81ed8 → 2.0.0-6452adf3 - Mend

@digigov/react-core 2.0.0-60d81ed8 → 2.0.0-6452adf3

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 (317) hide show

package/src/CardContent/__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 CardAction with no props 1`] = `
 <body>

package/src/CardHeading/__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 CardAction with no props 1`] = `
 <body>

package/src/Checkbox/__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 Checkbox with dense prop and CheckboxItems 1`] = `
 <body>
   <div>
     <div
-      class="ds-checkboxes--dense ds-checkboxes"
+      class="ds-checkboxes ds-checkboxes--dense"
     >
       <div
         class="ds-checkboxes__item"
@@ -43,7 +43,7 @@ exports[`renders the Checkbox with layout=horizontal and CheckboxItems 1`] = `
 <body>
   <div>
     <div
-      class="ds-checkboxes--horizontal ds-checkboxes"
+      class="ds-checkboxes ds-checkboxes--horizontal"
     >
       <div
         class="ds-checkboxes__item"

package/src/CheckboxConditional/__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 Blockquote with no props 1`] = `
 <body>

package/src/CheckboxItem/__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 CheckboxItem with \`disabled\` prop 1`] = `
 <body>
@@ -7,7 +7,7 @@ exports[`renders the CheckboxItem with \`disabled\` prop 1`] = `
       class="ds-checkboxes__item"
     >
       <label
-        class="ds-checkboxes__label--disabled ds-checkboxes__label ds-label"
+        class="ds-checkboxes__label ds-checkboxes__label--disabled ds-label"
       >
         hello
         <input
@@ -77,7 +77,7 @@ exports[`renders the CheckboxItem with \`value\` \`name\` and \`disabled\` props
       class="ds-checkboxes__item"
     >
       <label
-        class="ds-checkboxes__label--disabled ds-checkboxes__label ds-label"
+        class="ds-checkboxes__label ds-checkboxes__label--disabled ds-label"
       >
         hello
         <input
@@ -105,7 +105,7 @@ exports[`renders the CheckboxItem with \`value\` \`name\`, \`divider\` and \`dis
       class="ds-checkboxes__item"
     >
       <label
-        class="ds-checkboxes__label--disabled ds-checkboxes__label ds-label"
+        class="ds-checkboxes__label ds-checkboxes__label--disabled ds-label"
       >
         hello
         <input

package/src/Chip/__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 Chip with no props 1`] = `
 <body>

package/src/Chip/index.tsx CHANGED Viewed

@@ -28,7 +28,8 @@ export const Chip = React.forwardRef<HTMLLIElement, ChipProps>(function Chip(
       {...props}
       onClick={onClick}
     >
-      <Base as='div'
+      <Base
+        as="div"
         role={onClick && 'button'}
         tabIndex={onClick && 0}
         className="ds-chip__content"

package/src/ChipContainer/__snapshots__/index.spec.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 ChipContainer with no props 1`] = `
 <body>

package/src/ChipHeading/__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 ChipHeading with no props 1`] = `
 <body>

package/src/ChipKeyValue/__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 ChipKeyValue with no props 1`] = `
 <body>

package/src/ChoiceDividerText/__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 ChoiceDivider with text prop 1`] = `
 <body>

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

@@ -1,11 +1,11 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the CircularProgress 1`] = `
 <body>
   <div>
     <svg
       aria-hidden="true"
-      class="ds-circular-progress--md ds-circular-progress"
+      class="ds-circular-progress ds-circular-progress--md"
       focusable="false"
       viewBox="0 0 200 200"
     >
@@ -27,7 +27,7 @@ exports[`renders the CircularProgress with color=secondary and size lg props 1`]
   <div>
     <svg
       aria-hidden="true"
-      class="ds-circular-progress--secondary ds-circular-progress--lg ds-circular-progress"
+      class="ds-circular-progress ds-circular-progress--secondary ds-circular-progress--lg"
       focusable="false"
       viewBox="0 0 200 200"
     >
@@ -49,7 +49,7 @@ exports[`renders the CircularProgress with color=secondary and size sm props 1`]
   <div>
     <svg
       aria-hidden="true"
-      class="ds-circular-progress--secondary ds-circular-progress--sm ds-circular-progress"
+      class="ds-circular-progress ds-circular-progress--secondary ds-circular-progress--sm"
       focusable="false"
       viewBox="0 0 200 200"
     >
@@ -71,7 +71,7 @@ exports[`renders the CircularProgress with color=secondary prop 1`] = `
   <div>
     <svg
       aria-hidden="true"
-      class="ds-circular-progress--secondary ds-circular-progress--md ds-circular-progress"
+      class="ds-circular-progress ds-circular-progress--secondary ds-circular-progress--md"
       focusable="false"
       viewBox="0 0 200 200"
     >
@@ -93,7 +93,7 @@ exports[`renders the CircularProgress with size lg 1`] = `
   <div>
     <svg
       aria-hidden="true"
-      class="ds-circular-progress--lg ds-circular-progress"
+      class="ds-circular-progress ds-circular-progress--lg"
       focusable="false"
       viewBox="0 0 200 200"
     >
@@ -115,7 +115,7 @@ exports[`renders the CircularProgress with size sm 1`] = `
   <div>
     <svg
       aria-hidden="true"
-      class="ds-circular-progress--sm ds-circular-progress"
+      class="ds-circular-progress ds-circular-progress--sm"
       focusable="false"
       viewBox="0 0 200 200"
     >

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

@@ -1,18 +1,21 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the CloseButton 1`] = `
 <body>
   <div>
     <button
-      class="ds-close-btn ds-link ds-print-hidden"
+      class="ds-print-hidden ds-close-btn ds-link"
     >
       <svg
         aria-hidden="true"
+        as="svg"
         class="ds-svg-icon--close ds-svg-icon"
         focusable="false"
         viewBox="0 0 24 24"
       >
         <polygon
+          as="polygon"
+          class=""
           points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 "
         />
       </svg>
@@ -25,16 +28,19 @@ exports[`renders the CloseButton with label prop 1`] = `
 <body>
   <div>
     <button
-      class="ds-close-btn ds-link ds-print-hidden"
+      class="ds-print-hidden ds-close-btn ds-link"
     >
       Κλείσιμο
       <svg
         aria-hidden="true"
+        as="svg"
         class="ds-svg-icon--close ds-svg-icon"
         focusable="false"
         viewBox="0 0 24 24"
       >
         <polygon
+          as="polygon"
+          class=""
           points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 "
         />
       </svg>

package/src/Code/__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 Code with color="attribute" prop 1`] = `
 <body>
   <div>
     <code
-      class="ds-code--attr ds-code"
+      class="ds-code ds-code--attr"
     >
       hello
     </code>
@@ -28,7 +28,7 @@ exports[`renders the Code with color="keyword" prop 1`] = `
 <body>
   <div>
     <code
-      class="ds-code--keyword ds-code"
+      class="ds-code ds-code--keyword"
     >
       hello
     </code>
@@ -40,7 +40,7 @@ exports[`renders the Code with color="name" prop 1`] = `
 <body>
   <div>
     <code
-      class="ds-code--name ds-code"
+      class="ds-code ds-code--name"
     >
       hello
     </code>

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

@@ -1,18 +1,12 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-exports[`renders the CodeBlock with no props 1`] = `
+exports[`renders the CodeBlockContainer with no props 1`] = `
 <body>
   <div>
     <div
       class="ds-code-block__container"
     >
-      <pre>
-        <code
-          class="ds-code-block__content"
-        >
-          hello
-        </code>
-      </pre>
+      hello
     </div>
   </div>
 </body>

package/src/CodeBlockContent/__snapshots__/index.test.tsx.snap ADDED Viewed

@@ -0,0 +1,17 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+exports[`renders the CodeBlockContent with no props 1`] = `
+<body>
+  <div>
+    <pre
+      class=""
+    >
+      <code
+        class="ds-code-block__content"
+      >
+        hello
+      </code>
+    </pre>
+  </div>
+</body>
+`;

package/src/CodeBlockHeader/__snapshots__/index.test.tsx.snap ADDED Viewed

@@ -0,0 +1,13 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+exports[`renders the CodeBlockHeader with no props 1`] = `
+<body>
+  <div>
+    <div
+      class="ds-code-block__header ds-code-block__header--start"
+    >
+      hello
+    </div>
+  </div>
+</body>
+`;

package/src/Container/__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 Container with cols={false} prop 1`] = `
 <body>
   <div>
     <div
-      class="ds-container--full-width ds-container"
+      class="ds-container ds-container--full-width"
     >
       hello
     </div>
@@ -16,7 +16,7 @@ exports[`renders the Container with fullWidth prop 1`] = `
 <body>
   <div>
     <div
-      class="ds-container--full-width ds-container ds-gap-sm-12 ds-grid"
+      class="ds-container ds-container--full-width ds-grid ds-gap-sm-12"
     >
       hello
     </div>
@@ -28,7 +28,7 @@ exports[`renders the Container with no props 1`] = `
 <body>
   <div>
     <div
-      class="ds-container ds-gap-sm-12 ds-grid"
+      class="ds-container ds-grid ds-gap-sm-12"
     >
       hello
     </div>

package/src/CopyToClipboardContainer/__snapshots__/index.spec.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 CopyToClipboardContainer with dense=true 1`] = `
 <body>
@@ -7,7 +7,7 @@ exports[`renders the CopyToClipboardContainer with dense=true 1`] = `
       class="ds-copy-to-clipboard"
     >
       <div
-        class="ds-copy-to-clipboard__tooltip--right ds-copy-to-clipboard__tooltip--dense ds-copy-to-clipboard__tooltip"
+        class="ds-copy-to-clipboard__tooltip ds-copy-to-clipboard__tooltip--dense ds-copy-to-clipboard__tooltip--right"
       >
         Text copied!
       </div>
@@ -23,7 +23,7 @@ exports[`renders the CopyToClipboardContainer with no props 1`] = `
       class="ds-copy-to-clipboard"
     >
       <div
-        class="ds-copy-to-clipboard__tooltip--right ds-copy-to-clipboard__tooltip"
+        class="ds-copy-to-clipboard__tooltip ds-copy-to-clipboard__tooltip--right"
       >
         Text copied!
       </div>
@@ -55,7 +55,7 @@ exports[`renders the CopyToClipboardContainer with variant=tooltip 1`] = `
       class="ds-copy-to-clipboard"
     >
       <div
-        class="ds-copy-to-clipboard__tooltip--right ds-copy-to-clipboard__tooltip"
+        class="ds-copy-to-clipboard__tooltip ds-copy-to-clipboard__tooltip--right"
       >
         Text copied!
       </div>

package/src/CopyToClipboardMessage/__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 CopyToClipboardMessage with banner copied prop 1`] = `
 <body>
@@ -16,7 +16,7 @@ exports[`renders the CopyToClipboardMessage with banner prop 1`] = `
 <body>
   <div>
     <div
-      class="ds-copy-to-clipboard--hidden ds-copy-to-clipboard__message"
+      class="ds-copy-to-clipboard__message ds-copy-to-clipboard--hidden"
     >
       Text copied!
     </div>
@@ -40,7 +40,7 @@ exports[`renders the CopyToClipboardMessage with no props 1`] = `
 <body>
   <div>
     <div
-      class="ds-copy-to-clipboard--hidden ds-copy-to-clipboard__message"
+      class="ds-copy-to-clipboard__message ds-copy-to-clipboard--hidden"
     >
       Text copied!
     </div>
@@ -64,7 +64,7 @@ exports[`renders the CopyToClipboardMessage with tooltip prop 1`] = `
 <body>
   <div>
     <div
-      class="ds-copy-to-clipboard--hidden ds-copy-to-clipboard__message"
+      class="ds-copy-to-clipboard__message ds-copy-to-clipboard--hidden"
     >
       Text copied!
     </div>

package/src/CopyrightContainer/__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 CopyrightContainer with no props 1`] = `
 <body>

package/src/DateInputContainer/__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 DateInputContainer with dense prop 1`] = `
 <body>
   <div>
     <div
-      class="ds-date-input--dense ds-date-input"
+      class="ds-date-input ds-date-input--dense"
     >
       hello
     </div>

package/src/DateInputItem/__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 DateInputItem with name and width===4 props 1`] = `
 <body>
@@ -11,7 +11,7 @@ exports[`renders the DateInputItem with name and width===4 props 1`] = `
       >
         hello
         <input
-          class="ds-input--width-4-char ds-input"
+          class="ds-input ds-input--width-4-char"
           name="date-input"
           type="text"
         />
@@ -32,7 +32,7 @@ exports[`renders the DateInputItem with name prop 1`] = `
       >
         hello
         <input
-          class="ds-input--width-2-char ds-input"
+          class="ds-input ds-input--width-2-char"
           name="date-input"
           type="text"
         />
@@ -53,7 +53,7 @@ exports[`renders the DateInputItem with no props 1`] = `
       >
         hello
         <input
-          class="ds-input--width-2-char ds-input"
+          class="ds-input ds-input--width-2-char"
           type="text"
         />
       </label>

package/src/Details/__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 Details with no props 1`] = `
 <body>

package/src/DetailsContent/__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 DetailsContent with no props 1`] = `
 <body>

package/src/DetailsSummary/__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 DetailsSummary with no props 1`] = `
 <body>

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

@@ -1,42 +1,49 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the Drawer with \`open=true\` \`left=true\` props 1`] = `
 <body>
   <div>
     <div
-      class="ds-drawer--left ds-drawer"
+      class="ds-drawer-container"
     >
-      <div>
-        <h1
-          class="ds-heading-xl"
-        >
-          Menu
-        </h1>
-        <svg
-          aria-hidden="true"
-          class="ds--drawer__close-icon ds-svg-icon--close ds-svg-icon"
-          focusable="false"
-          viewBox="0 0 24 24"
-        >
-          <polygon
-            points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 "
-          />
-        </svg>
-      </div>
-      <ol
-        class="ds-list"
+      <div
+        class="ds-drawer ds-drawer--left"
       >
-        <li
-          class="ds-list__item"
+        <div>
+          <h1
+            class="ds-heading-xl"
+          >
+            Menu
+          </h1>
+          <svg
+            aria-hidden="true"
+            as="svg"
+            class="ds--drawer__close-icon ds-svg-icon--close ds-svg-icon"
+            focusable="false"
+            viewBox="0 0 24 24"
+          >
+            <polygon
+              as="polygon"
+              class=""
+              points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 "
+            />
+          </svg>
+        </div>
+        <ol
+          class="ds-list"
         >
-          Menu option 1
-        </li>
-        <li
-          class="ds-list__item"
-        >
-          Menu option 2
-        </li>
-      </ol>
+          <li
+            class="ds-list__item"
+          >
+            Menu option 1
+          </li>
+          <li
+            class="ds-list__item"
+          >
+            Menu option 2
+          </li>
+        </ol>
+      </div>
     </div>
   </div>
 </body>

package/src/Drawer/index.tsx CHANGED Viewed

@@ -22,12 +22,14 @@ export interface DrawerProps extends BaseProps<'div'> {
   direction?: 'right' | 'left';
   /**
-   * upRelative is optional. This declares if the drawer is open at large screens in a relative position.
+   * upRelative is optional.
+   * This declares if the drawer is visible at what screens in a relative position.
+   * If not relative, it will be a drawer.
    * The default value is never.
-   * * @value 'sm'
-   * @value 'md'
-   * @value 'lg'
-   * @value 'never'
+   * @value 'sm' The drawer will be visible and relative at small screens and up
+   * @value 'md' The drawer will be visible and relative at medium screens and up
+   * @value 'lg' The drawer will be visible and relative at large screens and up
+   * @value 'never' The drawer will never have relative position in the page
    * @default 'never'
    */
   upRelative?: 'sm' | 'md' | 'lg' | 'never';
@@ -62,19 +64,30 @@ export const Drawer = React.forwardRef<HTMLDivElement, DrawerProps>(
       <Base
         as="div"
         ref={ref}
-        className={clsx(className, {
-          'ds-drawer': true,
-          'ds-drawer--relative-sm': upRelative === 'sm',
-          'ds-drawer--relative-md': upRelative === 'md',
-          'ds-drawer--relative-lg': upRelative === 'lg',
-          'ds-drawer--closed': !open,
-          'ds-drawer--right': direction === 'right',
-          'ds-drawer--left': direction === 'left',
-          'ds-drawer--bg-secondary': bgColor === 'secondary',
+        className={clsx({
+          'ds-drawer-container': true,
+          'ds-drawer-container--relative-sm': upRelative === 'sm',
+          'ds-drawer-container--relative-md': upRelative === 'md',
+          'ds-drawer-container--relative-lg': upRelative === 'lg',
+          'ds-drawer-container--closed': !open,
         })}
-        {...props}
       >
-        {children}
+        <Base
+          as="div"
+          className={clsx(className, {
+            'ds-drawer': true,
+            'ds-drawer--relative-sm': upRelative === 'sm',
+            'ds-drawer--relative-md': upRelative === 'md',
+            'ds-drawer--relative-lg': upRelative === 'lg',
+            'ds-drawer--closed': !open,
+            'ds-drawer--right': direction === 'right',
+            'ds-drawer--left': direction === 'left',
+            'ds-drawer--bg-secondary': bgColor === 'secondary',
+          })}
+          {...props}
+        >
+          {children}
+        </Base>
       </Base>
     );
   }