@digigov/react-core 2.0.0-rc.17 → 2.0.0-rc.19

package/src/Stack/index.test.tsx

@@ -1,123 +1,123 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 
 import Stack from '@digigov/react-core/Stack';
 
 it('renders the Stack with no props', () => {
-  expect(mount(<Stack>hello</Stack>)).toMatchSnapshot();
+  expect(render(<Stack>hello</Stack>).baseElement).toMatchSnapshot();
 });
 
 it('renders the Stack with direction="column"', () => {
-  expect(mount(<Stack direction="column">hello</Stack>)).toMatchSnapshot();
+  expect(render(<Stack direction="column">hello</Stack>).baseElement).toMatchSnapshot();
 });
 it('renders the Stack with direction="row"', () => {
-  expect(mount(<Stack direction="row">hello</Stack>)).toMatchSnapshot();
+  expect(render(<Stack direction="row">hello</Stack>).baseElement).toMatchSnapshot();
 });
 it('renders the Stack with flexWrap="wrap"', () => {
-  expect(mount(<Stack flexWrap="wrap">hello</Stack>)).toMatchSnapshot();
+  expect(render(<Stack flexWrap="wrap">hello</Stack>).baseElement).toMatchSnapshot();
 });
 it('renders the Stack with flexWrap="nowrap"', () => {
-  expect(mount(<Stack flexWrap="nowrap">hello</Stack>)).toMatchSnapshot();
+  expect(render(<Stack flexWrap="nowrap">hello</Stack>).baseElement).toMatchSnapshot();
 });
 it('renders the Stack with spacing={2}', () => {
-  expect(mount(<Stack spacing={2}>hello</Stack>)).toMatchSnapshot();
+  expect(render(<Stack spacing={2}>hello</Stack>).baseElement).toMatchSnapshot();
 });
 it('renders the Stack with spacing={4}', () => {
-  expect(mount(<Stack spacing={4}>hello</Stack>)).toMatchSnapshot();
+  expect(render(<Stack spacing={4}>hello</Stack>).baseElement).toMatchSnapshot();
 });
 it('renders the Stack with spacing={6}', () => {
-  expect(mount(<Stack spacing={6}>hello</Stack>)).toMatchSnapshot();
+  expect(render(<Stack spacing={6}>hello</Stack>).baseElement).toMatchSnapshot();
 });
 it('renders the Stack with spacing={8}', () => {
-  expect(mount(<Stack spacing={8}>hello</Stack>)).toMatchSnapshot();
+  expect(render(<Stack spacing={8}>hello</Stack>).baseElement).toMatchSnapshot();
 });
 it('renders the Stack with spacing={10}', () => {
-  expect(mount(<Stack spacing={10}>hello</Stack>)).toMatchSnapshot();
+  expect(render(<Stack spacing={10}>hello</Stack>).baseElement).toMatchSnapshot();
 });
 it('renders the Stack with spacing={12}', () => {
-  expect(mount(<Stack spacing={12}>hello</Stack>)).toMatchSnapshot();
+  expect(render(<Stack spacing={12}>hello</Stack>).baseElement).toMatchSnapshot();
 });
 it('renders the Stack with justifyContent="center"', () => {
-  expect(mount(<Stack justifyContent="center">hello</Stack>)).toMatchSnapshot();
+  expect(render(<Stack justifyContent="center">hello</Stack>).baseElement).toMatchSnapshot();
 });
 it('renders the Stack with justifyContent="flex-start"', () => {
   expect(
-    mount(<Stack justifyContent="flex-start">hello</Stack>)
+    render(<Stack justifyContent="flex-start">hello</Stack>).baseElement
   ).toMatchSnapshot();
 });
 it('renders the Stack with justifyContent="flex-end"', () => {
   expect(
-    mount(<Stack justifyContent="flex-end">hello</Stack>)
+    render(<Stack justifyContent="flex-end">hello</Stack>).baseElement
   ).toMatchSnapshot();
 });
 it('renders the Stack with justifyContent="space-around"', () => {
   expect(
-    mount(<Stack justifyContent="space-around">hello</Stack>)
+    render(<Stack justifyContent="space-around">hello</Stack>).baseElement
   ).toMatchSnapshot();
 });
 it('renders the Stack with justifyContent="space-between"', () => {
   expect(
-    mount(<Stack justifyContent="space-between">hello</Stack>)
+    render(<Stack justifyContent="space-between">hello</Stack>).baseElement
   ).toMatchSnapshot();
 });
 it('renders the Stack with justifyContent="space-evenly"', () => {
   expect(
-    mount(<Stack justifyContent="space-evenly">hello</Stack>)
+    render(<Stack justifyContent="space-evenly">hello</Stack>).baseElement
   ).toMatchSnapshot();
 });
 it('renders the Stack with alignItems="flex-start"', () => {
-  expect(mount(<Stack alignItems="flex-start">hello</Stack>)).toMatchSnapshot();
+  expect(render(<Stack alignItems="flex-start">hello</Stack>).baseElement).toMatchSnapshot();
 });
 it('renders the Stack with alignItems="flex-end"', () => {
-  expect(mount(<Stack alignItems="flex-end">hello</Stack>)).toMatchSnapshot();
+  expect(render(<Stack alignItems="flex-end">hello</Stack>).baseElement).toMatchSnapshot();
 });
 it('renders the Stack with alignItems="center"', () => {
-  expect(mount(<Stack alignItems="center">hello</Stack>)).toMatchSnapshot();
+  expect(render(<Stack alignItems="center">hello</Stack>).baseElement).toMatchSnapshot();
 });
 it('renders the Stack with alignItems="baseline"', () => {
-  expect(mount(<Stack alignItems="baseline">hello</Stack>)).toMatchSnapshot();
+  expect(render(<Stack alignItems="baseline">hello</Stack>).baseElement).toMatchSnapshot();
 });
 it('renders the Stack with alignItems="stretch"', () => {
-  expect(mount(<Stack alignItems="stretch">hello</Stack>)).toMatchSnapshot();
+  expect(render(<Stack alignItems="stretch">hello</Stack>).baseElement).toMatchSnapshot();
 });
 it('renders the Stack with alignContent="center"', () => {
-  expect(mount(<Stack alignContent="center">hello</Stack>)).toMatchSnapshot();
+  expect(render(<Stack alignContent="center">hello</Stack>).baseElement).toMatchSnapshot();
 });
 it('renders the Stack with alignContent="flex-start"', () => {
   expect(
-    mount(<Stack alignContent="flex-start">hello</Stack>)
+    render(<Stack alignContent="flex-start">hello</Stack>).baseElement
   ).toMatchSnapshot();
 });
 it('renders the Stack with alignContent="flex-end"', () => {
-  expect(mount(<Stack alignContent="flex-end">hello</Stack>)).toMatchSnapshot();
+  expect(render(<Stack alignContent="flex-end">hello</Stack>).baseElement).toMatchSnapshot();
 });
 it('renders the Stack with alignContent="space-around"', () => {
   expect(
-    mount(<Stack alignContent="space-around">hello</Stack>)
+    render(<Stack alignContent="space-around">hello</Stack>).baseElement
   ).toMatchSnapshot();
 });
 it('renders the Stack with alignContent="space-between"', () => {
   expect(
-    mount(<Stack alignContent="space-between">hello</Stack>)
+    render(<Stack alignContent="space-between">hello</Stack>).baseElement
   ).toMatchSnapshot();
 });
 it('renders the Stack with alignContent="space-evenly"', () => {
   expect(
-    mount(<Stack alignContent="space-evenly">hello</Stack>)
+    render(<Stack alignContent="space-evenly">hello</Stack>).baseElement
   ).toMatchSnapshot();
 });
 it('renders the Stack with direction = "row", flexWrap="nowrap" and spacing={12}', () => {
   expect(
-    mount(
+    render(
       <Stack direction="row" flexWrap="nowrap" spacing={12}>
         hello
       </Stack>
-    )
+    ).baseElement
   ).toMatchSnapshot();
 });
 it('renders the Stack with direction = "row", flexWrap="wrap" justifyContent="flex-end" alignItems="baseline" alignContent="center" and spacing={12}', () => {
   expect(
-    mount(
+    render(
       <Stack
         direction="row"
         flexWrap="wrap"
@@ -128,6 +128,6 @@ it('renders the Stack with direction = "row", flexWrap="wrap" justifyContent="fl
       >
         hello
       </Stack>
-    )
+    ).baseElement
   ).toMatchSnapshot();
 });

package/src/Stack/index.tsx

@@ -11,12 +11,12 @@ export interface StackProps extends BaseProps<'div'> {
    * justifyContent is optional. Set to control how items are positioned along Stack's main axis .
    */
   justifyContent?:
-  | 'flex-start'
-  | 'flex-end'
-  | 'center'
-  | 'space-between'
-  | 'space-around'
-  | 'space-evenly';
+    | 'flex-start'
+    | 'flex-end'
+    | 'center'
+    | 'space-between'
+    | 'space-around'
+    | 'space-evenly';
   /**
    * alignItems is optional. Set to control how items are positioned along Stack's cross axis.
    */
@@ -25,21 +25,30 @@ export interface StackProps extends BaseProps<'div'> {
    * alignContent is optional. Set to control how rows are positioned in multi-row Stack container.
    */
   alignContent?:
-  | 'flex-start'
-  | 'flex-end'
-  | 'center'
-  | 'space-between'
-  | 'space-around'
-  | 'space-evenly';
+    | 'flex-start'
+    | 'flex-end'
+    | 'center'
+    | 'space-between'
+    | 'space-around'
+    | 'space-evenly';
   /**
    * spacing is optional. Set to the number you want the space to be.
    */
-  spacing?: 1 | 2 | 4 | 6 | 8 | 10 | 12;
+  spacing?: SpacingValues | SpacingMediaValues;
   /**
    * flexWrap is optional. The default value is 'wrap'.
    */
   flexWrap?: 'wrap' | 'nowrap';
 }
+
+type SpacingValues = 1 | 2 | 3 | 4 | 5 | 6 | 8 | 10 | 11 | 12;
+type SpacingMediaValues = {
+  xs?: SpacingValues;
+  sm?: SpacingValues;
+  md?: SpacingValues;
+  lg?: SpacingValues;
+  xl?: SpacingValues;
+};
 /**
  * ...
  */
@@ -70,6 +79,16 @@ export const Stack = React.forwardRef<HTMLDivElement, StackProps>(
           [`ds-stack--content-${alignContent}`]: alignContent,
           'ds-stack--nowrap': flexWrap === 'nowrap',
           [`ds-gap-${spacing}`]: spacing !== undefined,
+          [`ds-gap-xs-${(spacing as SpacingMediaValues)?.xs}`]:
+            (spacing as SpacingMediaValues)?.xs !== undefined,
+          [`ds-gap-sm-${(spacing as SpacingMediaValues)?.sm}`]:
+            (spacing as SpacingMediaValues)?.sm !== undefined,
+          [`ds-gap-md-${(spacing as SpacingMediaValues)?.md}`]:
+            (spacing as SpacingMediaValues)?.md !== undefined,
+          [`ds-gap-lg-${(spacing as SpacingMediaValues)?.lg}`]:
+            (spacing as SpacingMediaValues)?.lg !== undefined,
+          [`ds-gap-xl-${(spacing as SpacingMediaValues)?.xl}`]:
+            (spacing as SpacingMediaValues)?.xl !== undefined,
         })}
         {...props}
       >

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

@@ -1,33 +1,25 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders the StepNav with dense props 1`] = `
-<ForwardRef(StepNav)
-  dense={true}
->
-  <ForwardRef(Base)
-    as="div"
-    className="ds-step-nav--dense ds-step-nav"
-  >
+<body>
+  <div>
     <div
-      className="ds-step-nav--dense ds-step-nav"
+      class="ds-step-nav--dense ds-step-nav"
     >
       hello
     </div>
-  </ForwardRef(Base)>
-</ForwardRef(StepNav)>
+  </div>
+</body>
 `;
 
 exports[`renders the StepNav with no props 1`] = `
-<ForwardRef(StepNav)>
-  <ForwardRef(Base)
-    as="div"
-    className="ds-step-nav"
-  >
+<body>
+  <div>
     <div
-      className="ds-step-nav"
+      class="ds-step-nav"
     >
       hello
     </div>
-  </ForwardRef(Base)>
-</ForwardRef(StepNav)>
+  </div>
+</body>
 `;

package/src/StepNav/index.test.tsx

@@ -1,12 +1,12 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 
 import StepNav from '@digigov/react-core/StepNav';
 
 it('renders the StepNav with no props', () => {
-  expect(mount(<StepNav>hello</StepNav>)).toMatchSnapshot();
+  expect(render(<StepNav>hello</StepNav>).baseElement).toMatchSnapshot();
 });
 
 it('renders the StepNav with dense props', () => {
-  expect(mount(<StepNav dense>hello</StepNav>)).toMatchSnapshot();
+  expect(render(<StepNav dense>hello</StepNav>).baseElement).toMatchSnapshot();
 });

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

@@ -1,16 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders the StepNavAccordion with no props 1`] = `
-<ForwardRef(StepNavAccordion)>
-  <ForwardRef(Base)
-    as="details"
-    className="ds-step-nav__accordion"
-  >
+<body>
+  <div>
     <details
-      className="ds-step-nav__accordion"
+      class="ds-step-nav__accordion"
     >
       hello
     </details>
-  </ForwardRef(Base)>
-</ForwardRef(StepNavAccordion)>
+  </div>
+</body>
 `;

package/src/StepNavAccordion/index.test.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 
 import StepNavAccordion from '@digigov/react-core/StepNavAccordion';
 
 it('renders the StepNavAccordion with no props', () => {
-  expect(mount(<StepNavAccordion>hello</StepNavAccordion>)).toMatchSnapshot();
+  expect(render(<StepNavAccordion>hello</StepNavAccordion>).baseElement).toMatchSnapshot();
 });

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

@@ -1,16 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders the StepNavAccordionContent with no props 1`] = `
-<ForwardRef(StepNavAccordionContent)>
-  <ForwardRef(Base)
-    as="div"
-    className="ds-nav-step__accordion__content"
-  >
+<body>
+  <div>
     <div
-      className="ds-nav-step__accordion__content"
+      class="ds-nav-step__accordion__content"
     >
       hello
     </div>
-  </ForwardRef(Base)>
-</ForwardRef(StepNavAccordionContent)>
+  </div>
+</body>
 `;

package/src/StepNavAccordionContent/index.test.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 
 import StepNavAccordionContent from '@digigov/react-core/StepNavAccordionContent';
 
 it('renders the StepNavAccordionContent with no props', () => {
   expect(
-    mount(<StepNavAccordionContent>hello</StepNavAccordionContent>)
+    render(<StepNavAccordionContent>hello</StepNavAccordionContent>).baseElement
   ).toMatchSnapshot();
 });

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

@@ -1,80 +1,67 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders the StepNavAccordionHeadingText with closeLabel prop 1`] = `
-<ForwardRef(StepNavAccordionHeadingText)
-  closeLabel="Κλείσε"
->
-  <ForwardRef(Base)
-    as="span"
-    className="ds-step-nav__accordion__heading__text"
-  >
+<body>
+  <div>
     <span
-      className="ds-step-nav__accordion__heading__text"
+      class="ds-step-nav__accordion__heading__text"
     >
       hello
     </span>
-  </ForwardRef(Base)>
-  <span
-    className="ds-step-nav__accordion__closed"
-  >
-    Εμφάνιση
-  </span>
-  <span
-    className="ds-step-nav__accordion__opened"
-  >
-    Κλείσε
-  </span>
-</ForwardRef(StepNavAccordionHeadingText)>
+    <span
+      class="ds-step-nav__accordion__closed"
+    >
+      Εμφάνιση
+    </span>
+    <span
+      class="ds-step-nav__accordion__opened"
+    >
+      Κλείσε
+    </span>
+  </div>
+</body>
 `;
 
 exports[`renders the StepNavAccordionHeadingText with no props 1`] = `
-<ForwardRef(StepNavAccordionHeadingText)>
-  <ForwardRef(Base)
-    as="span"
-    className="ds-step-nav__accordion__heading__text"
-  >
+<body>
+  <div>
     <span
-      className="ds-step-nav__accordion__heading__text"
+      class="ds-step-nav__accordion__heading__text"
     >
       hello
     </span>
-  </ForwardRef(Base)>
-  <span
-    className="ds-step-nav__accordion__closed"
-  >
-    Εμφάνιση
-  </span>
-  <span
-    className="ds-step-nav__accordion__opened"
-  >
-    Απόκρυψη
-  </span>
-</ForwardRef(StepNavAccordionHeadingText)>
+    <span
+      class="ds-step-nav__accordion__closed"
+    >
+      Εμφάνιση
+    </span>
+    <span
+      class="ds-step-nav__accordion__opened"
+    >
+      Απόκρυψη
+    </span>
+  </div>
+</body>
 `;
 
 exports[`renders the StepNavAccordionHeadingText with openLabel prop 1`] = `
-<ForwardRef(StepNavAccordionHeadingText)
-  openLabel="Άνοιξε"
->
-  <ForwardRef(Base)
-    as="span"
-    className="ds-step-nav__accordion__heading__text"
-  >
+<body>
+  <div>
     <span
-      className="ds-step-nav__accordion__heading__text"
+      class="ds-step-nav__accordion__heading__text"
     >
       hello
     </span>
-  </ForwardRef(Base)>
-  <span
-    className="ds-step-nav__accordion__closed"
-  >
-    Άνοιξε
-  </span>
-  <span
-    className="ds-step-nav__accordion__opened"
-  >
-    Απόκρυψη
-  </span>
-</ForwardRef(StepNavAccordionHeadingText)>
+    <span
+      class="ds-step-nav__accordion__closed"
+    >
+      Άνοιξε
+    </span>
+    <span
+      class="ds-step-nav__accordion__opened"
+    >
+      Απόκρυψη
+    </span>
+  </div>
+</body>
 `;

package/src/StepNavAccordionHeadingText/index.test.tsx

@@ -1,30 +1,30 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 
 import StepNavAccordionHeadingText from '@digigov/react-core/StepNavAccordionHeadingText';
 
 it('renders the StepNavAccordionHeadingText with no props', () => {
   expect(
-    mount(<StepNavAccordionHeadingText>hello</StepNavAccordionHeadingText>)
+    render(<StepNavAccordionHeadingText>hello</StepNavAccordionHeadingText>).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the StepNavAccordionHeadingText with openLabel prop', () => {
   expect(
-    mount(
+    render(
       <StepNavAccordionHeadingText openLabel="Άνοιξε">
         hello
       </StepNavAccordionHeadingText>
-    )
+    ).baseElement
   ).toMatchSnapshot();
 });
 
 it('renders the StepNavAccordionHeadingText with closeLabel prop', () => {
   expect(
-    mount(
+    render(
       <StepNavAccordionHeadingText closeLabel="Κλείσε">
         hello
       </StepNavAccordionHeadingText>
-    )
+    ).baseElement
   ).toMatchSnapshot();
 });

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

@@ -1,16 +1,13 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders the StepNavAccordionHeadingTitle with no props 1`] = `
-<ForwardRef(StepNavAccordionHeadingTitle)>
-  <ForwardRef(Base)
-    as="div"
-    className="ds-step-nav__accordion__heading__title"
-  >
+<body>
+  <div>
     <div
-      className="ds-step-nav__accordion__heading__title"
+      class="ds-step-nav__accordion__heading__title"
     >
       hello
     </div>
-  </ForwardRef(Base)>
-</ForwardRef(StepNavAccordionHeadingTitle)>
+  </div>
+</body>
 `;

package/src/StepNavAccordionHeadingTitle/index.test.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 
 import StepNavAccordionHeadingTitle from '@digigov/react-core/StepNavAccordionHeadingTitle';
 
 it('renders the StepNavAccordionHeadingTitle with no props', () => {
   expect(
-    mount(<StepNavAccordionHeadingTitle>hello</StepNavAccordionHeadingTitle>)
+    render(<StepNavAccordionHeadingTitle>hello</StepNavAccordionHeadingTitle>).baseElement
   ).toMatchSnapshot();
 });

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

@@ -1,18 +1,14 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders the StepNavAccordionSummary with no props 1`] = `
-<ForwardRef(StepNavAccordionSummary)>
-  <ForwardRef(Base)
-    aria-level={2}
-    as="summary"
-    className="ds-step-nav__accordion__summary"
-  >
+<body>
+  <div>
     <summary
-      aria-level={2}
-      className="ds-step-nav__accordion__summary"
+      aria-level="2"
+      class="ds-step-nav__accordion__summary"
     >
       hello
     </summary>
-  </ForwardRef(Base)>
-</ForwardRef(StepNavAccordionSummary)>
+  </div>
+</body>
 `;

package/src/StepNavAccordionSummary/index.test.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
-import { mount } from 'enzyme';
+import { render } from '@testing-library/react';
 
 import StepNavAccordionSummary from '@digigov/react-core/StepNavAccordionSummary';
 
 it('renders the StepNavAccordionSummary with no props', () => {
   expect(
-    mount(<StepNavAccordionSummary>hello</StepNavAccordionSummary>)
+    render(<StepNavAccordionSummary>hello</StepNavAccordionSummary>).baseElement
   ).toMatchSnapshot();
 });