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/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>
     );
   }

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

@@ -1,23 +1,26 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the DrawerHeading with no props 1`] = `
 <body>
   <div>
     <div
-      class="ds-drawer__heading ds-stack--align-baseline ds-stack--row ds-stack"
+      class="ds-drawer__heading ds-stack ds-stack--row ds-stack--align-baseline"
     >
       Menu
       <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/DropdownBase/__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 DropdownBase disabled 1`] = `
 <body>
   <div>
     <details
-      class="ds-dropdown--disabled ds-dropdown"
+      class="ds-dropdown ds-dropdown--disabled"
     >
       hello
     </details>
@@ -41,7 +41,7 @@ exports[`renders the DropdownBase with align=right and open=false 1`] = `
 <body>
   <div>
     <details
-      class="ds-dropdown--right ds-dropdown"
+      class="ds-dropdown ds-dropdown--right"
     >
       hello
     </details>
@@ -53,7 +53,7 @@ exports[`renders the DropdownBase with dense=true and open=true 1`] = `
 <body>
   <div>
     <details
-      class="ds-dropdown--dense ds-dropdown"
+      class="ds-dropdown ds-dropdown--dense"
       open=""
     >
       hello
@@ -115,7 +115,7 @@ exports[`renders the DropdownBase with placement=top 1`] = `
 <body>
   <div>
     <details
-      class="ds-dropdown--up ds-dropdown"
+      class="ds-dropdown ds-dropdown--up"
     >
       hello
     </details>
@@ -127,7 +127,7 @@ exports[`renders the DropdownBase with placement=top align=left and open=true 1`
 <body>
   <div>
     <details
-      class="ds-dropdown--up ds-dropdown"
+      class="ds-dropdown ds-dropdown--up"
       open=""
     >
       hello
@@ -140,7 +140,7 @@ exports[`renders the DropdownBase with placement=top and open=true 1`] = `
 <body>
   <div>
     <details
-      class="ds-dropdown--up ds-dropdown"
+      class="ds-dropdown ds-dropdown--up"
       open=""
     >
       hello