npm - @digigov/react-core - Versions diffs - 2.0.0-rc.21 → 2.0.0-rc.22 - Mend

@digigov/react-core 2.0.0-rc.21 → 2.0.0-rc.22

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

package/src/DropdownButton/__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>
     <summary
-      class="ds-btn-primary ds-btn ds-dropdown__button"
+      class="ds-dropdown__button ds-btn ds-btn-primary"
       tabindex="0"
     >
       Menu
@@ -17,7 +17,7 @@ exports[`renders the DropdownButton with arrow=false 1`] = `
 <body>
   <div>
     <summary
-      class="ds-btn-primary ds-btn ds-dropdown__button"
+      class="ds-dropdown__button ds-btn ds-btn-primary"
       tabindex="0"
     >
       hello
@@ -30,17 +30,20 @@ exports[`renders the DropdownButton with arrow=true 1`] = `
 <body>
   <div>
     <summary
-      class="ds-btn-primary ds-btn ds-dropdown__button--chevron ds-dropdown__button"
+      class="ds-dropdown__button ds-btn ds-dropdown__button--chevron ds-btn-primary"
       tabindex="0"
     >
       hello
       <svg
         aria-hidden="true"
+        as="svg"
         class="ds-svg-icon--chevron ds-svg-icon"
         focusable="false"
         viewBox="0 0 24 24"
       >
         <path
+          as="path"
+          class=""
           d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
         />
       </svg>
@@ -53,7 +56,7 @@ exports[`renders the DropdownButton with color=primary 1`] = `
 <body>
   <div>
     <summary
-      class="ds-btn-primary ds-btn ds-dropdown__button"
+      class="ds-dropdown__button ds-btn ds-btn-primary"
       tabindex="0"
     >
       hello
@@ -66,7 +69,7 @@ exports[`renders the DropdownButton with color=primary and arrow={false} 1`] = `
 <body>
   <div>
     <summary
-      class="ds-btn-primary ds-btn ds-dropdown__button"
+      class="ds-dropdown__button ds-btn ds-btn-primary"
       tabindex="0"
     >
       hello
@@ -79,16 +82,19 @@ exports[`renders the DropdownButton with color=primary and arrow={true} 1`] = `
 <body>
   <div>
     <summary
-      class="ds-btn-primary ds-btn ds-dropdown__button--chevron ds-dropdown__button"
+      class="ds-dropdown__button ds-btn ds-dropdown__button--chevron ds-btn-primary"
       tabindex="0"
     >
       <svg
         aria-hidden="true"
+        as="svg"
         class="ds-svg-icon--chevron ds-svg-icon"
         focusable="false"
         viewBox="0 0 24 24"
       >
         <path
+          as="path"
+          class=""
           d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
         />
       </svg>
@@ -101,7 +107,7 @@ exports[`renders the DropdownButton with color=primary and variant="button" 1`]
 <body>
   <div>
     <summary
-      class="ds-btn-primary ds-btn ds-dropdown__button"
+      class="ds-dropdown__button ds-btn ds-btn-primary"
       tabindex="0"
     >
       hello
@@ -114,7 +120,7 @@ exports[`renders the DropdownButton with color=primary and variant="link" 1`] =
 <body>
   <div>
     <summary
-      class="ds-link ds-dropdown__button"
+      class="ds-dropdown__button ds-link"
       tabindex="0"
     >
       hello
@@ -127,7 +133,7 @@ exports[`renders the DropdownButton with color=primary and variant="link" 2`] =
 <body>
   <div>
     <summary
-      class="ds-link ds-dropdown__button"
+      class="ds-dropdown__button ds-link"
       tabindex="0"
     >
       hello
@@ -140,7 +146,7 @@ exports[`renders the DropdownButton with color=primary variant="button" and arro
 <body>
   <div>
     <summary
-      class="ds-btn-primary ds-btn ds-dropdown__button"
+      class="ds-dropdown__button ds-btn ds-btn-primary"
       tabindex="0"
     >
       hello
@@ -153,16 +159,19 @@ exports[`renders the DropdownButton with color=primary variant="button" arrow={t
 <body>
   <div>
     <summary
-      class="ds-btn-primary ds-btn ds-dropdown__button--chevron ds-dropdown__button"
+      class="ds-dropdown__button ds-btn ds-dropdown__button--chevron ds-btn-primary"
       tabindex="0"
     >
       <svg
         aria-hidden="true"
+        as="svg"
         class="ds-svg-icon--chevron ds-svg-icon"
         focusable="false"
         viewBox="0 0 24 24"
       >
         <path
+          as="path"
+          class=""
           d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
         />
       </svg>
@@ -175,7 +184,7 @@ exports[`renders the DropdownButton with color=primary variant="link" arrow={fal
 <body>
   <div>
     <summary
-      class="ds-link ds-dropdown__button"
+      class="ds-dropdown__button ds-link"
       tabindex="0"
     >
       hello
@@ -188,16 +197,19 @@ exports[`renders the DropdownButton with color=primary variant="link" arrow={tru
 <body>
   <div>
     <summary
-      class="ds-link ds-dropdown__button--chevron ds-dropdown__button"
+      class="ds-dropdown__button ds-link ds-dropdown__button--chevron"
       tabindex="0"
     >
       <svg
         aria-hidden="true"
+        as="svg"
         class="ds-svg-icon--chevron ds-svg-icon"
         focusable="false"
         viewBox="0 0 24 24"
       >
         <path
+          as="path"
+          class=""
           d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
         />
       </svg>
@@ -210,7 +222,7 @@ exports[`renders the DropdownButton with color=secondary 1`] = `
 <body>
   <div>
     <summary
-      class="ds-btn-secondary ds-btn ds-dropdown__button"
+      class="ds-dropdown__button ds-btn ds-btn-secondary"
       tabindex="0"
     >
       hello
@@ -223,7 +235,7 @@ exports[`renders the DropdownButton with color=secondary and arrow={false} 1`] =
 <body>
   <div>
     <summary
-      class="ds-btn-secondary ds-btn ds-dropdown__button"
+      class="ds-dropdown__button ds-btn ds-btn-secondary"
       tabindex="0"
     >
       hello
@@ -236,16 +248,19 @@ exports[`renders the DropdownButton with color=secondary and arrow={true} 1`] =
 <body>
   <div>
     <summary
-      class="ds-btn-secondary ds-btn ds-dropdown__button--chevron ds-dropdown__button"
+      class="ds-dropdown__button ds-btn ds-dropdown__button--chevron ds-btn-secondary"
       tabindex="0"
     >
       <svg
         aria-hidden="true"
+        as="svg"
         class="ds-svg-icon--chevron ds-svg-icon"
         focusable="false"
         viewBox="0 0 24 24"
       >
         <path
+          as="path"
+          class=""
           d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
         />
       </svg>
@@ -258,7 +273,7 @@ exports[`renders the DropdownButton with color=secondary and variant="button" 1`
 <body>
   <div>
     <summary
-      class="ds-btn-secondary ds-btn ds-dropdown__button"
+      class="ds-dropdown__button ds-btn ds-btn-secondary"
       tabindex="0"
     >
       hello
@@ -271,7 +286,7 @@ exports[`renders the DropdownButton with color=warning variant="button" arrow={f
 <body>
   <div>
     <summary
-      class="ds-link ds-dropdown__button"
+      class="ds-dropdown__button ds-link"
       tabindex="0"
     >
       hello
@@ -284,17 +299,20 @@ exports[`renders the DropdownButton with color=warning variant="button" arrow={t
 <body>
   <div>
     <summary
-      class="ds-link ds-dropdown__button--chevron ds-dropdown__button"
+      class="ds-dropdown__button ds-link ds-dropdown__button--chevron"
       tabindex="0"
     >
       hello
       <svg
         aria-hidden="true"
+        as="svg"
         class="ds-svg-icon--chevron ds-svg-icon"
         focusable="false"
         viewBox="0 0 24 24"
       >
         <path
+          as="path"
+          class=""
           d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
         />
       </svg>
@@ -307,7 +325,7 @@ exports[`renders the DropdownButton with no props 1`] = `
 <body>
   <div>
     <summary
-      class="ds-btn-primary ds-btn ds-dropdown__button"
+      class="ds-dropdown__button ds-btn ds-btn-primary"
       tabindex="0"
     >
       hello
@@ -320,7 +338,7 @@ exports[`renders the DropdownButton with variant=button 1`] = `
 <body>
   <div>
     <summary
-      class="ds-btn-primary ds-btn ds-dropdown__button"
+      class="ds-dropdown__button ds-btn ds-btn-primary"
       tabindex="0"
     >
       hello
@@ -333,7 +351,7 @@ exports[`renders the DropdownButton with variant=link 1`] = `
 <body>
   <div>
     <summary
-      class="ds-link ds-dropdown__button"
+      class="ds-dropdown__button ds-link"
       tabindex="0"
     >
       hello

package/src/DropdownContent/__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 DropdownContent with no props 1`] = `
 <body>
   <div>
     <div
-      class="ds-dropdown__content--full-width ds-dropdown__content"
+      class="ds-dropdown__content ds-dropdown__content--full-width"
     >
       hello
     </div>

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

package/src/ErrorSummary/__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 ErrorSummary with dense=true 1`] = `
 <body>
   <div>
     <div
       aria-labelledby="ds-notification-banner-title"
-      class="ds-notification-banner--error ds-notification-banner--dense ds-notification-banner"
+      class="ds-notification-banner ds-notification-banner--error ds-notification-banner--dense"
       data-module="ds-notification-banner"
       role="region"
     >
@@ -24,7 +24,7 @@ exports[`renders the ErrorSummary with no props 1`] = `
   <div>
     <div
       aria-labelledby="ds-notification-banner-title"
-      class="ds-notification-banner--error ds-notification-banner"
+      class="ds-notification-banner ds-notification-banner--error"
       data-module="ds-notification-banner"
       role="region"
     >

package/src/FieldContainer/__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 FieldContainer with error=false 1`] = `
 <body>
@@ -16,7 +16,7 @@ exports[`renders the FieldContainer with error=true 1`] = `
 <body>
   <div>
     <div
-      class="ds-field--error ds-field xs:ds-grid__col-span-12"
+      class="ds-field ds-field--error xs:ds-grid__col-span-12"
     >
       hello
     </div>

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

package/src/FieldsetLegend/__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 FieldsetLegend with heading and size l props 1`] = `
 <body>
   <div>
     <legend
       aria-level="1"
-      class="ds-heading-lg ds-fieldset__legend"
+      class="ds-fieldset__legend ds-fieldset__legend--lg"
       role="heading"
     >
       This is FieldsetLegend with no props
@@ -19,7 +19,7 @@ exports[`renders the FieldsetLegend with heading and size m props 1`] = `
   <div>
     <legend
       aria-level="1"
-      class="ds-heading-md ds-fieldset__legend"
+      class="ds-fieldset__legend ds-fieldset__legend--md"
       role="heading"
     >
       This is FieldsetLegend with no props
@@ -33,7 +33,7 @@ exports[`renders the FieldsetLegend with heading and size s props 1`] = `
   <div>
     <legend
       aria-level="1"
-      class="ds-heading-sm ds-fieldset__legend"
+      class="ds-fieldset__legend ds-fieldset__legend--sm"
       role="heading"
     >
       This is FieldsetLegend with no props
@@ -47,7 +47,7 @@ exports[`renders the FieldsetLegend with heading and size xl props 1`] = `
   <div>
     <legend
       aria-level="1"
-      class="ds-heading-xl ds-fieldset__legend"
+      class="ds-fieldset__legend ds-fieldset__legend--xl"
       role="heading"
     >
       This is FieldsetLegend with no props
@@ -61,7 +61,7 @@ exports[`renders the FieldsetLegend with heading props 1`] = `
   <div>
     <legend
       aria-level="1"
-      class="ds-heading-lg ds-fieldset__legend"
+      class="ds-fieldset__legend ds-fieldset__legend--lg"
       role="heading"
     >
       This is FieldsetLegend with no props
@@ -74,7 +74,7 @@ exports[`renders the FieldsetLegend with no props 1`] = `
 <body>
   <div>
     <legend
-      class="ds-heading-lg ds-fieldset__legend"
+      class="ds-fieldset__legend ds-fieldset__legend--lg"
     >
       This is FieldsetLegend with no props
     </legend>
@@ -86,7 +86,7 @@ exports[`renders the FieldsetLegend with size l props 1`] = `
 <body>
   <div>
     <legend
-      class="ds-heading-lg ds-fieldset__legend"
+      class="ds-fieldset__legend ds-fieldset__legend--lg"
     >
       This is FieldsetLegend with no props
     </legend>
@@ -98,7 +98,7 @@ exports[`renders the FieldsetLegend with size m props 1`] = `
 <body>
   <div>
     <legend
-      class="ds-heading-md ds-fieldset__legend"
+      class="ds-fieldset__legend ds-fieldset__legend--md"
     >
       This is FieldsetLegend with no props
     </legend>
@@ -110,7 +110,7 @@ exports[`renders the FieldsetLegend with size s props 1`] = `
 <body>
   <div>
     <legend
-      class="ds-heading-sm ds-fieldset__legend"
+      class="ds-fieldset__legend ds-fieldset__legend--sm"
     >
       This is FieldsetLegend with no props
     </legend>
@@ -122,7 +122,7 @@ exports[`renders the FieldsetLegend with size xl props 1`] = `
 <body>
   <div>
     <legend
-      class="ds-heading-xl ds-fieldset__legend"
+      class="ds-fieldset__legend ds-fieldset__legend--xl"
     >
       This is FieldsetLegend with no props
     </legend>

package/src/FileUpload/__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 FileUpload with name prop 1`] = `
 <body>
   <div>
     <label
-      class="ds-btn ds-btn-secondary ds-label-file"
+      class="ds-label-file ds-btn ds-btn-secondary"
       role="button"
       tabindex="0"
     >
@@ -22,7 +22,7 @@ exports[`renders the FileUpload with no props 1`] = `
 <body>
   <div>
     <label
-      class="ds-btn ds-btn-secondary ds-label-file"
+      class="ds-label-file ds-btn ds-btn-secondary"
       role="button"
       tabindex="0"
     >

package/src/FileUploadContainer/__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 FileUpload with hasFiles prop 1`] = `
 <body>

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

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

@@ -1,12 +1,80 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+exports[`renders the FilterContainer with border={false} prop 1`] = `
+<body>
+  <div>
+    <div
+      class="ds-filter-container ds-filter-container--position-relative-md ds-filter-container--closed"
+    >
+      <div
+        class="ds-filter ds-filter--position-relative-md"
+      >
+        hello
+      </div>
+    </div>
+  </div>
+</body>
+`;
 exports[`renders the FilterContainer with no props 1`] = `
 <body>
   <div>
     <div
-      class="ds-filter--position-relative-md ds-filter--border  ds-filter--closed  ds-filter"
+      class="ds-filter-container ds-filter-container--position-relative-md ds-filter-container--closed"
+    >
+      <div
+        class="ds-filter ds-filter--border  ds-filter--position-relative-md"
+      >
+        hello
+      </div>
+    </div>
+  </div>
+</body>
+`;
+exports[`renders the FilterContainer with open prop 1`] = `
+<body>
+  <div>
+    <div
+      class="ds-filter-container ds-filter-container--position-relative-md"
+    >
+      <div
+        class="ds-filter ds-filter--border  ds-filter--position-relative-md"
+      >
+        hello
+      </div>
+    </div>
+  </div>
+</body>
+`;
+exports[`renders the FilterContainer with positionRelative="never" prop 1`] = `
+<body>
+  <div>
+    <div
+      class="ds-filter-container ds-filter-container--closed"
+    >
+      <div
+        class="ds-filter ds-filter--border "
+      >
+        hello
+      </div>
+    </div>
+  </div>
+</body>
+`;
+exports[`renders the FilterContainer with positionRelative="sm" prop 1`] = `
+<body>
+  <div>
+    <div
+      class="ds-filter-container ds-filter-container--position-relative-sm ds-filter-container--closed"
     >
-      hello
+      <div
+        class="ds-filter ds-filter--border  ds-filter--position-relative-sm"
+      >
+        hello
+      </div>
     </div>
   </div>
 </body>

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

@@ -6,3 +6,24 @@ import FilterContainer from '@digigov/react-core/FilterContainer';
 it('renders the FilterContainer with no props', () => {
   expect(render(<FilterContainer>hello</FilterContainer>).baseElement).toMatchSnapshot();
 });
+it('renders the FilterContainer with open prop', () => {
+  expect(render(<FilterContainer open>hello</FilterContainer>).baseElement).toMatchSnapshot();
+});
+it('renders the FilterContainer with border={false} prop', () => {
+  expect(
+    render(<FilterContainer border={false}>hello</FilterContainer>).baseElement
+  ).toMatchSnapshot();
+});
+it('renders the FilterContainer with positionRelative="sm" prop', () => {
+  expect(
+    render(<FilterContainer positionRelative="sm">hello</FilterContainer>).baseElement
+  ).toMatchSnapshot();
+});
+it('renders the FilterContainer with positionRelative="never" prop', () => {
+  expect(
+    render(<FilterContainer positionRelative="never">hello</FilterContainer>).baseElement
+  ).toMatchSnapshot();
+});

package/src/FilterContainer/index.tsx CHANGED Viewed

@@ -22,13 +22,15 @@ export interface FilterContainerProps extends BaseProps<'div'> {
   border?: boolean;
   /**
-   * Use visible prop to make the filter section have position relative in the page.
+   * positionRelative is optional.
+   * Use positionRelative prop to make the filter section to be visible and have position relative in the page.
+   * If not relative, the filter section will be a drawer.
    * The default value is md.
-   * @value 'always'
-   * @value 'sm'
-   * @value 'md'
-   * @value 'lg'
-   * @value 'never'
+   * @value 'always' The filter section will always visible
+   * @value 'sm' The filter section will be visible at small screens and up
+   * @value 'md' The filter section will be visible at medium screens and up
+   * @value 'lg' The filter section will be visible at large screens and up
+   * @value 'never' The filter section will never have relative position in the page
    * @default 'md'
    */
   positionRelative?: 'always' | 'sm' | 'md' | 'lg' | 'never';
@@ -57,18 +59,29 @@ export const FilterContainer = React.forwardRef<
     <Base
       as="div"
       ref={ref}
-      className={clsx(className, {
-        'ds-filter': true,
-        'ds-filter--closed ': !open,
-        'ds-filter--border ': border,
-        'ds-filter--position-relative-always': positionRelative === 'always',
-        'ds-filter--position-relative-sm': positionRelative === 'sm',
-        'ds-filter--position-relative-md': positionRelative === 'md',
-        'ds-filter--position-relative-lg': positionRelative === 'lg',
+      className={clsx({
+        'ds-filter-container': true,
+        'ds-filter-container--position-relative-always': positionRelative === 'always',
+        'ds-filter-container--position-relative-sm': positionRelative === 'sm',
+        'ds-filter-container--position-relative-md': positionRelative === 'md',
+        'ds-filter-container--position-relative-lg': positionRelative === 'lg',
+        'ds-filter-container--closed': !open,
       })}
-      {...props}
     >
-      {children}
+      <Base
+        as="div"
+        className={clsx(className, {
+          'ds-filter': true,
+          'ds-filter--border ': border,
+          'ds-filter--position-relative-always': positionRelative === 'always',
+          'ds-filter--position-relative-sm': positionRelative === 'sm',
+          'ds-filter--position-relative-md': positionRelative === 'md',
+          'ds-filter--position-relative-lg': positionRelative === 'lg',
+        })}
+        {...props}
+      >
+        {children}
+      </Base>
     </Base>
   );
 });

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

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

@@ -1,4 +1,16 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
+exports[`renders the FilterHeadingContainer with closeLabel="Απόρριψη 1`] = `
+<body>
+  <div>
+    <div
+      class="ds-filter__heading"
+    >
+      hello
+    </div>
+  </div>
+</body>
+`;
 exports[`renders the FilterHeadingContainer with no props 1`] = `
 <body>