@digigov/react-core 1.0.0-7c9716da → 1.0.0-871b6be5

package/src/Stack/index.test.tsx

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

package/src/Stack/index.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+
+export interface StackProps extends BaseProps<'div'> {
+  /**
+   * direction is optional. Set to control the direction of flex items.
+   */
+  direction?: 'row' | 'row-reverse' | 'column' | 'column-reverse';
+  /**
+   * 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'; 
+  /**
+   * alignItems is optional. Set to control how items are positioned along Stack's cross axis.
+   */
+  alignItems?: 'stretch' | 'flex-start' | 'flex-end' | 'center' | 'baseline' ;
+  /**
+   * 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' ;
+  /**
+   * spacing is optional. Set to the number you want the space to be.
+   */
+  spacing?: 1 | 2 | 4 | 6 | 8 | 10 | 12;
+  /**
+   * flexWrap is optional. The default value is 'wrap'.
+   */
+  flexWrap?: 'wrap' | 'nowrap';
+
+}
+/**
+ * ...
+ */
+export const Stack = React.forwardRef<
+  HTMLDivElement,
+  StackProps
+>(function Stack(
+  { direction = 'column', justifyContent, alignItems, alignContent, spacing, flexWrap, className, children, ...props },
+  ref
+) {
+  return (
+    <Base
+      as="div"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-stack': true,
+        [`govgr-stack--${direction}`]: direction,
+        [`govgr-stack--justify-${justifyContent}`]: justifyContent,
+        [`govgr-stack--align-${alignItems}`]: alignItems,
+        [`govgr-stack--content-${alignContent}`]: alignContent,
+        'govgr-stack--nowrap': flexWrap === 'nowrap',
+        [`govgr-gap-${spacing}`]: spacing !== undefined,
+
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default Stack;

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

@@ -1,7 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders the StepNavAccordionHeadingText with no props 1`] = `
-<ForwardRef(StepNavAccordionHeadingText)>
+exports[`renders the StepNavAccordionHeadingText with closeLabel prop 1`] = `
+<ForwardRef(StepNavAccordionHeadingText)
+  closeLabel="Κλείσε"
+>
   <ForwardRef(Base)
     as="span"
     className="govgr-step-nav__accordion__heading__text"
@@ -17,35 +19,16 @@ exports[`renders the StepNavAccordionHeadingText with no props 1`] = `
   >
     Εμφάνιση
   </span>
-</ForwardRef(StepNavAccordionHeadingText)>
-`;
-
-exports[`renders the StepNavAccordionHeadingText with open prop 1`] = `
-<ForwardRef(StepNavAccordionHeadingText)
-  open={true}
->
-  <ForwardRef(Base)
-    as="span"
-    className="govgr-step-nav__accordion__heading__text"
-  >
-    <span
-      className="govgr-step-nav__accordion__heading__text"
-    >
-      hello
-    </span>
-  </ForwardRef(Base)>
   <span
     className="govgr-step-nav__accordion__opened"
   >
-    Απόκρυψη
+    Κλείσε
   </span>
 </ForwardRef(StepNavAccordionHeadingText)>
 `;
 
-exports[`renders the StepNavAccordionHeadingText with open prop 2`] = `
-<ForwardRef(StepNavAccordionHeadingText)
-  open={false}
->
+exports[`renders the StepNavAccordionHeadingText with no props 1`] = `
+<ForwardRef(StepNavAccordionHeadingText)>
   <ForwardRef(Base)
     as="span"
     className="govgr-step-nav__accordion__heading__text"
@@ -61,24 +44,6 @@ exports[`renders the StepNavAccordionHeadingText with open prop 2`] = `
   >
     Εμφάνιση
   </span>
-</ForwardRef(StepNavAccordionHeadingText)>
-`;
-
-exports[`renders the StepNavAccordionHeadingText with open prop 3`] = `
-<ForwardRef(StepNavAccordionHeadingText)
-  open={true}
-  openLabel="Άνοιξε"
->
-  <ForwardRef(Base)
-    as="span"
-    className="govgr-step-nav__accordion__heading__text"
-  >
-    <span
-      className="govgr-step-nav__accordion__heading__text"
-    >
-      hello
-    </span>
-  </ForwardRef(Base)>
   <span
     className="govgr-step-nav__accordion__opened"
   >
@@ -87,9 +52,9 @@ exports[`renders the StepNavAccordionHeadingText with open prop 3`] = `
 </ForwardRef(StepNavAccordionHeadingText)>
 `;
 
-exports[`renders the StepNavAccordionHeadingText with open prop 4`] = `
+exports[`renders the StepNavAccordionHeadingText with openLabel prop 1`] = `
 <ForwardRef(StepNavAccordionHeadingText)
-  closeLabel="Κλείσε"
+  openLabel="Άνοιξε"
 >
   <ForwardRef(Base)
     as="span"
@@ -104,7 +69,12 @@ exports[`renders the StepNavAccordionHeadingText with open prop 4`] = `
   <span
     className="govgr-step-nav__accordion__closed"
   >
-    Εμφάνιση
+    Άνοιξε
+  </span>
+  <span
+    className="govgr-step-nav__accordion__opened"
+  >
+    Απόκρυψη
   </span>
 </ForwardRef(StepNavAccordionHeadingText)>
 `;

package/src/StepNavAccordionHeadingText/index.test.tsx

@@ -9,37 +9,17 @@ it('renders the StepNavAccordionHeadingText with no props', () => {
   ).toMatchSnapshot();
 });
 
-it('renders the StepNavAccordionHeadingText with open prop', () => {
+it('renders the StepNavAccordionHeadingText with openLabel prop', () => {
   expect(
     mount(
-      <StepNavAccordionHeadingText open={true}>
+      <StepNavAccordionHeadingText openLabel="Άνοιξε">
         hello
       </StepNavAccordionHeadingText>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the StepNavAccordionHeadingText with open prop', () => {
-  expect(
-    mount(
-      <StepNavAccordionHeadingText open={false}>
-        hello
-      </StepNavAccordionHeadingText>
-    )
-  ).toMatchSnapshot();
-});
-
-it('renders the StepNavAccordionHeadingText with open prop', () => {
-  expect(
-    mount(
-      <StepNavAccordionHeadingText open={true} openLabel="Άνοιξε">
-        hello
-      </StepNavAccordionHeadingText>
-    )
-  ).toMatchSnapshot();
-});
-
-it('renders the StepNavAccordionHeadingText with open prop', () => {
+it('renders the StepNavAccordionHeadingText with closeLabel prop', () => {
   expect(
     mount(
       <StepNavAccordionHeadingText closeLabel="Κλείσε">

package/src/StepNavAccordionHeadingText/index.tsx

@@ -4,19 +4,14 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface StepNavAccordionHeadingTextProps extends BaseProps<'span'> {
   /**
-   * Use open prop to change the text state under the accordion heanding text.
-   * open is false by default.
-   *
-   */
-  open?: boolean;
-  /**
-   * Use openLabel to display the open state text under the accordion heanding text.
-   *
+   * Use openLabel to display the open state text under the accordion heading text.
+   * @default 'Εμφάνιση'
    */
   openLabel?: string;
   /**
-   * Use closeLabel to display the close state text under the accordion heanding text.
+   * Use closeLabel to display the close state text under the accordion heading text.
    *
+   * @default 'Απόκρυψη'
    */
   closeLabel?: string;
 }
@@ -31,7 +26,6 @@ export const StepNavAccordionHeadingText = React.forwardRef<
 >(function StepNavAccordionHeadingText(
   {
     className,
-    open,
     openLabel = 'Εμφάνιση',
     closeLabel = 'Απόκρυψη',
     children,
@@ -51,12 +45,8 @@ export const StepNavAccordionHeadingText = React.forwardRef<
       >
         {children}
       </Base>
-      {!open && (
-        <span className="govgr-step-nav__accordion__closed">{openLabel}</span>
-      )}
-      {open && (
-        <span className="govgr-step-nav__accordion__opened">{closeLabel}</span>
-      )}
+      <span className="govgr-step-nav__accordion__closed">{openLabel}</span>
+      <span className="govgr-step-nav__accordion__opened">{closeLabel}</span>
     </>
   );
 });

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

@@ -7,10 +7,10 @@ exports[`renders the StepNavAccordionSummaryHeading with element="h3" size = "sm
 >
   <ForwardRef(Base)
     as="h3"
-    className="govgr-step-nav__accordion__heading-sm govgr-step-nav__accordion__heading"
+    className="govgr-step-nav__accordion__heading--sm govgr-step-nav__accordion__heading"
   >
     <h3
-      className="govgr-step-nav__accordion__heading-sm govgr-step-nav__accordion__heading"
+      className="govgr-step-nav__accordion__heading--sm govgr-step-nav__accordion__heading"
     >
       hello
     </h3>
@@ -25,10 +25,10 @@ exports[`renders the StepNavAccordionSummaryHeading with element="h4" size = "md
 >
   <ForwardRef(Base)
     as="h4"
-    className="govgr-step-nav__accordion__heading-md govgr-step-nav__accordion__heading"
+    className="govgr-step-nav__accordion__heading--md govgr-step-nav__accordion__heading"
   >
     <h4
-      className="govgr-step-nav__accordion__heading-md govgr-step-nav__accordion__heading"
+      className="govgr-step-nav__accordion__heading--md govgr-step-nav__accordion__heading"
     >
       hello
     </h4>
@@ -57,10 +57,10 @@ exports[`renders the StepNavAccordionSummaryHeading with size = "md" prop 1`] =
 >
   <ForwardRef(Base)
     as="h3"
-    className="govgr-step-nav__accordion__heading-md govgr-step-nav__accordion__heading"
+    className="govgr-step-nav__accordion__heading--md govgr-step-nav__accordion__heading"
   >
     <h3
-      className="govgr-step-nav__accordion__heading-md govgr-step-nav__accordion__heading"
+      className="govgr-step-nav__accordion__heading--md govgr-step-nav__accordion__heading"
     >
       hello
     </h3>
@@ -74,10 +74,10 @@ exports[`renders the StepNavAccordionSummaryHeading with size = "sm" prop 1`] =
 >
   <ForwardRef(Base)
     as="h4"
-    className="govgr-step-nav__accordion__heading-sm govgr-step-nav__accordion__heading"
+    className="govgr-step-nav__accordion__heading--sm govgr-step-nav__accordion__heading"
   >
     <h4
-      className="govgr-step-nav__accordion__heading-sm govgr-step-nav__accordion__heading"
+      className="govgr-step-nav__accordion__heading--sm govgr-step-nav__accordion__heading"
     >
       hello
     </h4>

package/src/StepNavAccordionSummaryHeading/index.tsx

@@ -4,12 +4,19 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface StepNavAccordionSummaryHeadingProps extends BaseProps<'h2'> {
   /**
-   * size is optional. 'lg' is the default value.
-   */
+  * size is optional. 'lg' is the default value.
+  * @value 'lg'
+  * @value 'md'
+  * @value 'sm'
+  * @default 'lg'
+  */
   size?: 'lg' | 'md' | 'sm';
   /**
-   * element is optional. 'h2' is the default value.
-   */
+  * element is optional. 'h2' is the default value.
+  * @value 'h2'
+  * @value 'h3'
+  * @value 'h4'
+  */
   element?: 'h2' | 'h3' | 'h4';
 }
 

package/src/StepNavCircleNumber/index.tsx

@@ -4,10 +4,13 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface StepNavCircleNumberProps extends BaseProps<'span'> {
   /**
-   * Use border prop to add or remove border from StepNavCircleNumber component.
-   * Default prop border is true.
-   *
-   */
+  * Use border prop to add or remove border from StepNavCircleNumber component.
+  * Default prop border is true.
+  *
+  * @value true
+  * @value false
+  * @default true
+  */
   border?: boolean;
 }
 

package/src/SummaryList/index.tsx

@@ -4,10 +4,13 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface SummaryListProps extends BaseProps<'dl'> {
   /**
-   * border is optional.
-   * By default, SummaryList has borders. You can remove borders by using border prop.
-   * By default is true
-   */
+  * border is optional.
+  * By default, SummaryList has borders. You can remove borders by using border prop.
+  * By default is true
+  * @value true
+  * @value false
+  * @default true
+  */
   border?: boolean;
 }
 /**

package/src/SummaryListItem/index.tsx

@@ -4,10 +4,13 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface SummaryListItemProps extends BaseProps<'div'> {
   /**
-   *  border is optional.
-   *  By default, SummaryListItem has borders. You can remove borders by using border prop.
-   *  By default is true
-   **/
+  *  border is optional.
+  *  By default, SummaryListItem has borders. You can remove borders by using border prop.
+  *  By default is true
+  ** @value true
+  * @value false
+  * @default true
+  */
   border?: boolean;
 }
 /**

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

@@ -19,20 +19,20 @@ exports[`renders the SvgIcon with no props 1`] = `
 </ForwardRef(SvgIcon)>
 `;
 
-exports[`renders the SvgIcon with prop size=l 1`] = `
+exports[`renders the SvgIcon with prop size=lg 1`] = `
 <ForwardRef(SvgIcon)
   size="lg"
 >
   <ForwardRef(Base)
     aria-hidden="true"
     as="svg"
-    className="govgr-svg-icon--md govgr-svg-icon"
+    className="govgr-svg-icon--lg govgr-svg-icon"
     focusable="false"
     viewBox="0 0 24 24"
   >
     <svg
       aria-hidden="true"
-      className="govgr-svg-icon--md govgr-svg-icon"
+      className="govgr-svg-icon--lg govgr-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
@@ -42,20 +42,20 @@ exports[`renders the SvgIcon with prop size=l 1`] = `
 </ForwardRef(SvgIcon)>
 `;
 
-exports[`renders the SvgIcon with prop size=m 1`] = `
+exports[`renders the SvgIcon with prop size=md 1`] = `
 <ForwardRef(SvgIcon)
   size="md"
 >
   <ForwardRef(Base)
     aria-hidden="true"
     as="svg"
-    className="govgr-svg-icon--sm govgr-svg-icon"
+    className="govgr-svg-icon--md govgr-svg-icon"
     focusable="false"
     viewBox="0 0 24 24"
   >
     <svg
       aria-hidden="true"
-      className="govgr-svg-icon--sm govgr-svg-icon"
+      className="govgr-svg-icon--md govgr-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
@@ -65,20 +65,20 @@ exports[`renders the SvgIcon with prop size=m 1`] = `
 </ForwardRef(SvgIcon)>
 `;
 
-exports[`renders the SvgIcon with prop size=s 1`] = `
+exports[`renders the SvgIcon with prop size=sm 1`] = `
 <ForwardRef(SvgIcon)
   size="sm"
 >
   <ForwardRef(Base)
     aria-hidden="true"
     as="svg"
-    className="govgr-svg-icon--xs govgr-svg-icon"
+    className="govgr-svg-icon--sm govgr-svg-icon"
     focusable="false"
     viewBox="0 0 24 24"
   >
     <svg
       aria-hidden="true"
-      className="govgr-svg-icon--xs govgr-svg-icon"
+      className="govgr-svg-icon--sm govgr-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
@@ -95,13 +95,36 @@ exports[`renders the SvgIcon with prop size=xl 1`] = `
   <ForwardRef(Base)
     aria-hidden="true"
     as="svg"
-    className="govgr-svg-icon--lg govgr-svg-icon"
+    className="govgr-svg-icon--xl govgr-svg-icon"
     focusable="false"
     viewBox="0 0 24 24"
   >
     <svg
       aria-hidden="true"
-      className="govgr-svg-icon--lg govgr-svg-icon"
+      className="govgr-svg-icon--xl govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      hello
+    </svg>
+  </ForwardRef(Base)>
+</ForwardRef(SvgIcon)>
+`;
+
+exports[`renders the SvgIcon with prop size=xs 1`] = `
+<ForwardRef(SvgIcon)
+  size="xs"
+>
+  <ForwardRef(Base)
+    aria-hidden="true"
+    as="svg"
+    className="govgr-svg-icon--xs govgr-svg-icon"
+    focusable="false"
+    viewBox="0 0 24 24"
+  >
+    <svg
+      aria-hidden="true"
+      className="govgr-svg-icon--xs govgr-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
@@ -165,13 +188,13 @@ exports[`renders the SvgIcon with prop variant=error and size= xl 1`] = `
   <ForwardRef(Base)
     aria-hidden="true"
     as="svg"
-    className="govgr-svg-icon--warning govgr-svg-icon--lg govgr-svg-icon"
+    className="govgr-svg-icon--warning govgr-svg-icon--xl govgr-svg-icon"
     focusable="false"
     viewBox="0 0 24 24"
   >
     <svg
       aria-hidden="true"
-      className="govgr-svg-icon--warning govgr-svg-icon--lg govgr-svg-icon"
+      className="govgr-svg-icon--warning govgr-svg-icon--xl govgr-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >
@@ -319,7 +342,7 @@ exports[`renders the SvgIcon with prop variant=warning 1`] = `
 </ForwardRef(SvgIcon)>
 `;
 
-exports[`renders the SvgIcon with prop variant=warning and size=s 1`] = `
+exports[`renders the SvgIcon with prop variant=warning and size=sm 1`] = `
 <ForwardRef(SvgIcon)
   size="sm"
   variant="warning"
@@ -327,13 +350,13 @@ exports[`renders the SvgIcon with prop variant=warning and size=s 1`] = `
   <ForwardRef(Base)
     aria-hidden="true"
     as="svg"
-    className="govgr-svg-icon--warning govgr-svg-icon--xs govgr-svg-icon"
+    className="govgr-svg-icon--warning govgr-svg-icon--sm govgr-svg-icon"
     focusable="false"
     viewBox="0 0 24 24"
   >
     <svg
       aria-hidden="true"
-      className="govgr-svg-icon--warning govgr-svg-icon--xs govgr-svg-icon"
+      className="govgr-svg-icon--warning govgr-svg-icon--sm govgr-svg-icon"
       focusable="false"
       viewBox="0 0 24 24"
     >

package/src/SvgIcon/index.test.tsx

@@ -6,13 +6,16 @@ import SvgIcon from '@digigov/react-core/SvgIcon';
 it('renders the SvgIcon with no props', () => {
   expect(mount(<SvgIcon />)).toMatchSnapshot();
 });
-it('renders the SvgIcon with prop size=s', () => {
+it('renders the SvgIcon with prop size=xs', () => {
+  expect(mount(<SvgIcon size="xs">hello</SvgIcon>)).toMatchSnapshot();
+});
+it('renders the SvgIcon with prop size=sm', () => {
   expect(mount(<SvgIcon size="sm">hello</SvgIcon>)).toMatchSnapshot();
 });
-it('renders the SvgIcon with prop size=m', () => {
+it('renders the SvgIcon with prop size=md', () => {
   expect(mount(<SvgIcon size="md">hello</SvgIcon>)).toMatchSnapshot();
 });
-it('renders the SvgIcon with prop size=l', () => {
+it('renders the SvgIcon with prop size=lg', () => {
   expect(mount(<SvgIcon size="lg">hello</SvgIcon>)).toMatchSnapshot();
 });
 it('renders the SvgIcon with prop size=xl', () => {
@@ -42,7 +45,7 @@ it('renders the SvgIcon with prop variant=error', () => {
 it('renders the SvgIcon with prop variant=focus', () => {
   expect(mount(<SvgIcon variant="focus">hello</SvgIcon>)).toMatchSnapshot();
 });
-it('renders the SvgIcon with prop variant=warning and size=s', () => {
+it('renders the SvgIcon with prop variant=warning and size=sm', () => {
   expect(
     mount(
       <SvgIcon variant="warning" size="sm">