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/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.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;
 };
@@ -255,7 +255,7 @@ export const Base: BaseComponent = React.forwardRef(function Base<
   return (
     <Component
-      className={`${basePropToClassName} ${className}`}
+      className={clsx(basePropToClassName, className)}
       ref={ref}
       {...props}
     >

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

package/src/BreadcrumbsListItem/index.tsx CHANGED Viewed

@@ -2,13 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
-export interface BreadcrumbsListItemProps extends BaseProps<'li'> {
-  /**
-  * href is optional and provides the text and url of the Breadcrumbs items.
-  */
-  href?: string;
-}
+export interface BreadcrumbsListItemProps extends BaseProps<'li'> { }
 /**
  * BreadcrumbsListItem creates a list of items with the possibility of navigation.
  * It should be used inside BreadcrumbsList as children component
@@ -16,7 +10,7 @@ export interface BreadcrumbsListItemProps extends BaseProps<'li'> {
 export const BreadcrumbsListItem = React.forwardRef<
   HTMLLIElement,
   BreadcrumbsListItemProps
->(function BreadcrumbsListItem({ href, className, children, ...props }, ref) {
+>(function BreadcrumbsListItem({ className, children, ...props }, ref) {
   return (
     <Base
       as="li"
@@ -26,15 +20,7 @@ export const BreadcrumbsListItem = React.forwardRef<
       })}
       {...props}
     >
-      <a
-        href={href}
-        className={clsx({
-          'ds-breadcrumbs__link': true,
-          'ds-breadcrumbs__link--inactive': href === undefined,
-        })}
-      >
-        {children}
-      </a>
+      {children}
     </Base>
   );
 });

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

@@ -0,0 +1,26 @@
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+exports[`renders the BreadcrumbsListItemLink with href 1`] = `
+<body>
+  <div>
+    <a
+      class="ds-breadcrumbs__link"
+      href="#"
+    >
+      hello
+    </a>
+  </div>
+</body>
+`;
+exports[`renders the BreadcrumbsListItemLink with no props 1`] = `
+<body>
+  <div>
+    <a
+      class="ds-breadcrumbs__link ds-breadcrumbs__link--inactive"
+    >
+      hello
+    </a>
+  </div>
+</body>
+`;

package/src/BreadcrumbsListItemLink/index.test.tsx ADDED Viewed

@@ -0,0 +1,15 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import BreadcrumbsListItemLink from '@digigov/react-core/BreadcrumbsListItemLink';
+it('renders the BreadcrumbsListItemLink with no props', () => {
+  expect(
+    render(<BreadcrumbsListItemLink>hello</BreadcrumbsListItemLink>).baseElement
+  ).toMatchSnapshot();
+});
+it('renders the BreadcrumbsListItemLink with href', () => {
+  expect(
+    render(<BreadcrumbsListItemLink href="#">hello</BreadcrumbsListItemLink>).baseElement
+  ).toMatchSnapshot();
+});

package/src/BreadcrumbsListItemLink/index.tsx ADDED Viewed

@@ -0,0 +1,33 @@
+import React from 'react';
+import clsx from 'clsx';
+import Link, { LinkBaseProps } from '@digigov/react-core/LinkBase';
+export interface BreadcrumbsListItemLinkProps extends LinkBaseProps { }
+/**
+ * BreadcrumbsListItemLink creates an anchor link to navigate in different
+ * parts of the breadcrumbs.
+ * It should be used inside BreadcrumbsListItem as children component. This is
+ * the default link component for the BreadcrumbsListItem and it uses the LinkBase
+ * component from `@digigov/react-core`. In case you need to use a different Link
+ * component from a framework or a custom router, use `@digigov/ui/navigation/BreadcrumbsListItemLink` instead.
+ */
+export const BreadcrumbsListItemLink = React.forwardRef<
+  HTMLAnchorElement,
+  BreadcrumbsListItemLinkProps
+>(function BreadcrumbsListItem({ href, className, children }, ref) {
+  return (
+    <Link
+      href={href}
+      defaultStyle={false}
+      className={clsx(className, {
+        'ds-breadcrumbs__link': true,
+        'ds-breadcrumbs__link--inactive': href === undefined,
+      })}
+      ref={ref}
+    >
+      {children}
+    </Link>
+  );
+});
+export default BreadcrumbsListItemLink;

package/src/Button/__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 Button with ariaLabel prop 1`] = `
 <body>
   <div>
     <button
       aria-label="button for opening menu"
-      class="ds-btn-primary ds-btn ds-print-hidden"
+      class="ds-print-hidden ds-btn ds-btn-primary"
     >
       Menu
     </button>
@@ -17,7 +17,7 @@ exports[`renders the Button with color=primary 1`] = `
 <body>
   <div>
     <button
-      class="ds-btn-primary ds-btn ds-print-hidden"
+      class="ds-print-hidden ds-btn ds-btn-primary"
     >
       hello
     </button>
@@ -29,7 +29,7 @@ exports[`renders the Button with color=primary with disabled=true 1`] = `
 <body>
   <div>
     <button
-      class="ds-btn-primary ds-btn--disabled ds-btn ds-print-hidden"
+      class="ds-print-hidden ds-btn ds-btn-primary ds-btn--disabled"
       disabled=""
     >
       hello
@@ -42,7 +42,7 @@ exports[`renders the Button with color=secondary 1`] = `
 <body>
   <div>
     <button
-      class="ds-btn-secondary ds-btn ds-print-hidden"
+      class="ds-print-hidden ds-btn ds-btn-secondary"
     >
       hello
     </button>
@@ -54,7 +54,7 @@ exports[`renders the Button with color=secondary with disabled=true 1`] = `
 <body>
   <div>
     <button
-      class="ds-btn-secondary ds-btn--disabled ds-btn ds-print-hidden"
+      class="ds-print-hidden ds-btn ds-btn-secondary ds-btn--disabled"
       disabled=""
     >
       hello
@@ -67,7 +67,7 @@ exports[`renders the Button with color=warning 1`] = `
 <body>
   <div>
     <button
-      class="ds-btn-warning ds-btn ds-print-hidden"
+      class="ds-print-hidden ds-btn ds-btn-warning"
     >
       hello
     </button>
@@ -79,7 +79,7 @@ exports[`renders the Button with color=warning with disabled=true 1`] = `
 <body>
   <div>
     <button
-      class="ds-btn-warning ds-btn--disabled ds-btn ds-print-hidden"
+      class="ds-print-hidden ds-btn ds-btn-warning ds-btn--disabled"
       disabled=""
     >
       hello
@@ -92,7 +92,7 @@ exports[`renders the Button with dense=true 1`] = `
 <body>
   <div>
     <button
-      class="ds-btn-primary ds-btn ds-btn--dense ds-print-hidden"
+      class="ds-print-hidden ds-btn ds-btn--dense ds-btn-primary"
     >
       hello
     </button>
@@ -104,7 +104,7 @@ exports[`renders the Button with disabled=false 1`] = `
 <body>
   <div>
     <button
-      class="ds-btn-primary ds-btn ds-print-hidden"
+      class="ds-print-hidden ds-btn ds-btn-primary"
     >
       hello
     </button>
@@ -116,7 +116,7 @@ exports[`renders the Button with disabled=true 1`] = `
 <body>
   <div>
     <button
-      class="ds-btn-primary ds-btn--disabled ds-btn ds-print-hidden"
+      class="ds-print-hidden ds-btn ds-btn-primary ds-btn--disabled"
       disabled=""
     >
       hello
@@ -129,7 +129,7 @@ exports[`renders the Button with no props 1`] = `
 <body>
   <div>
     <button
-      class="ds-btn-primary ds-btn ds-print-hidden"
+      class="ds-print-hidden ds-btn ds-btn-primary"
     >
       hello
     </button>
@@ -141,7 +141,7 @@ exports[`renders the Button with tabIndex prop 1`] = `
 <body>
   <div>
     <button
-      class="ds-btn-primary ds-btn ds-print-hidden"
+      class="ds-print-hidden ds-btn ds-btn-primary"
       tabindex="0"
     >
       Menu

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

package/src/ButtonLink/__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 Button with tabIndex prop 1`] = `
 <body>
   <div>
     <a
-      class="ds-btn-primary ds-btn"
+      class="ds-btn ds-btn-primary"
       tabindex="0"
     >
       Menu
@@ -18,7 +18,7 @@ exports[`renders the ButtonLink with ariaLabel prop 1`] = `
   <div>
     <a
       aria-label="button for opening menu"
-      class="ds-btn-primary ds-btn"
+      class="ds-btn ds-btn-primary"
     >
       Menu
     </a>
@@ -30,7 +30,7 @@ exports[`renders the ButtonLink with color=primary 1`] = `
 <body>
   <div>
     <a
-      class="ds-btn-primary ds-btn"
+      class="ds-btn ds-btn-primary"
     >
       hello
     </a>
@@ -42,7 +42,7 @@ exports[`renders the ButtonLink with color=primary with href=# 1`] = `
 <body>
   <div>
     <a
-      class="ds-btn-primary ds-btn"
+      class="ds-btn ds-btn-primary"
       href="#"
     >
       hello
@@ -55,7 +55,7 @@ exports[`renders the ButtonLink with color=secondary 1`] = `
 <body>
   <div>
     <a
-      class="ds-btn-secondary ds-btn"
+      class="ds-btn ds-btn-secondary"
     >
       hello
     </a>
@@ -67,7 +67,7 @@ exports[`renders the ButtonLink with color=secondary with href=# 1`] = `
 <body>
   <div>
     <a
-      class="ds-btn-secondary ds-btn"
+      class="ds-btn ds-btn-secondary"
       href="#"
     >
       hello
@@ -80,7 +80,7 @@ exports[`renders the ButtonLink with color=warning 1`] = `
 <body>
   <div>
     <a
-      class="ds-btn-warning ds-btn"
+      class="ds-btn ds-btn-warning"
     >
       hello
     </a>
@@ -92,7 +92,7 @@ exports[`renders the ButtonLink with color=warning with href=# 1`] = `
 <body>
   <div>
     <a
-      class="ds-btn-warning ds-btn"
+      class="ds-btn ds-btn-warning"
       href="#"
     >
       hello
@@ -105,7 +105,7 @@ exports[`renders the ButtonLink with disabled=false 1`] = `
 <body>
   <div>
     <a
-      class="ds-btn-primary ds-btn"
+      class="ds-btn ds-btn-primary"
     >
       hello
     </a>
@@ -117,7 +117,7 @@ exports[`renders the ButtonLink with href=# 1`] = `
 <body>
   <div>
     <a
-      class="ds-btn-primary ds-btn"
+      class="ds-btn ds-btn-primary"
       href="#"
     >
       hello
@@ -130,7 +130,7 @@ exports[`renders the ButtonLink with no props 1`] = `
 <body>
   <div>
     <a
-      class="ds-btn-primary ds-btn"
+      class="ds-btn ds-btn-primary"
     >
       hello
     </a>

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

@@ -1,19 +1,22 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
 exports[`renders the CallToAction with no props 1`] = `
 <body>
   <div>
     <a
-      class="ds-btn-cta ds-btn-primary ds-btn ds-print-hidden"
+      class="ds-print-hidden ds-btn-cta ds-btn ds-btn-primary"
     >
       hello
       <svg
         aria-hidden="true"
-        class="ds-svg-icon--chevron ds-svg-icon"
+        as="svg"
+        class="ds-btn-cta__icon ds-svg-icon--chevron ds-svg-icon"
         focusable="false"
         viewBox="0 0 24 24"
       >
         <path
+          as="path"
+          class=""
           d="M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z"
         />
       </svg>

package/src/Card/__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 Card with callToActon props 1`] = `
 <body>
   <div>
     <div
-      class="ds-card--cta ds-card"
+      class="ds-card ds-card--cta"
     >
       <div
         class="ds-card__body"
@@ -20,7 +20,7 @@ exports[`renders the Card with dense props 1`] = `
 <body>
   <div>
     <div
-      class="ds-card--dense ds-card"
+      class="ds-card ds-card--dense"
     >
       <div
         class="ds-card__body"
@@ -36,7 +36,7 @@ exports[`renders the Card with dense" prop 1`] = `
 <body>
   <div>
     <div
-      class="ds-card--dense ds-card"
+      class="ds-card ds-card--dense"
     >
       <div
         class="ds-card__body"
@@ -52,7 +52,7 @@ exports[`renders the Card with fullHeight" prop 1`] = `
 <body>
   <div>
     <div
-      class="ds-card--full-height ds-card"
+      class="ds-card ds-card--full-height"
     >
       <div
         class="ds-card__body"
@@ -84,7 +84,7 @@ exports[`renders the Card with variant="border" and borderColor="dark" props 1`]
 <body>
   <div>
     <div
-      class="ds-card--border-dark ds-card--border ds-card"
+      class="ds-card ds-card--border ds-card--border-dark"
     >
       <div
         class="ds-card__body"
@@ -100,7 +100,7 @@ exports[`renders the Card with variant="border" and borderColor="light" props 1`
 <body>
   <div>
     <div
-      class="ds-card--border-light ds-card--border ds-card"
+      class="ds-card ds-card--border ds-card--border-light"
     >
       <div
         class="ds-card__body"
@@ -116,7 +116,7 @@ exports[`renders the Card with variant="border" props 1`] = `
 <body>
   <div>
     <div
-      class="ds-card--border ds-card"
+      class="ds-card ds-card--border"
     >
       <div
         class="ds-card__body"
@@ -132,7 +132,7 @@ exports[`renders the Card with variant="border-top" and borderColor="dark" callT
 <body>
   <div>
     <div
-      class="ds-card--border-top ds-card--border-dark ds-card--cta ds-card"
+      class="ds-card ds-card--border-top ds-card--cta ds-card--border-dark"
     >
       <div
         class="ds-card__body"
@@ -148,7 +148,7 @@ exports[`renders the Card with variant="border-top" and borderColor="dark" props
 <body>
   <div>
     <div
-      class="ds-card--border-top ds-card--border-dark ds-card"
+      class="ds-card ds-card--border-top ds-card--border-dark"
     >
       <div
         class="ds-card__body"
@@ -164,7 +164,7 @@ exports[`renders the Card with variant="border-top" and borderColor="light" prop
 <body>
   <div>
     <div
-      class="ds-card--border-top ds-card--border-light ds-card"
+      class="ds-card ds-card--border-top ds-card--border-light"
     >
       <div
         class="ds-card__body"
@@ -180,7 +180,7 @@ exports[`renders the Card with variant="border-top" props 1`] = `
 <body>
   <div>
     <div
-      class="ds-card--border-top ds-card"
+      class="ds-card ds-card--border-top"
     >
       <div
         class="ds-card__body"
@@ -196,7 +196,7 @@ exports[`renders the Card with variant="divider" props 1`] = `
 <body>
   <div>
     <div
-      class="ds-card--divider ds-card"
+      class="ds-card ds-card--divider"
     >
       <div
         class="ds-card__body"

package/src/CardAction/__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>