@digigov/react-core 1.0.0-6b93ebf2 → 1.0.0-88820b1e

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,26 +4,15 @@ 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.
-  *
-  * @value true
-  * @value false
-  */
-  open?: boolean;
-  /**
-  * Use openLabel to display the open state text under the accordion heanding text.
-  *
-
-  * @default 'Εμφάνιση'
-  */
+   * 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.
-  *
-
-  * @default 'Απόκρυψη'
-  */
+   * Use closeLabel to display the close state text under the accordion heading text.
+   *
+   * @default 'Απόκρυψη'
+   */
   closeLabel?: string;
 }
 /**
@@ -37,7 +26,6 @@ export const StepNavAccordionHeadingText = React.forwardRef<
 >(function StepNavAccordionHeadingText(
   {
     className,
-    open,
     openLabel = 'Εμφάνιση',
     closeLabel = 'Απόκρυψη',
     children,
@@ -57,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/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">

package/src/SvgIcon/index.tsx

@@ -4,29 +4,30 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface SvgIconProps extends BaseProps<'svg'> {
   /**
-  * size prop declares the size of the svg icon.
-  * size is optional. The default value is 'md'.
-  * @value 'sm'
-  * @value 'md'
-  * @value 'lg'
-  * @value 'xl'
-  * @value 'xxl'
-  */
-  size?: 'sm' | 'md' | 'lg' | 'xl' | 'xxl';
+   * size is optional.
+   * size prop declares the size of the svg icon.
+   * @value 'xs'
+   * @value 'sm'
+   * @value 'md'
+   * @value 'lg'
+   * @value 'xl'
+   * @default 'sm'
+   */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
 
   /**
-  * variant property styles svg icon with Gov.gr palette's basic colors.
-  * variant property is optional.
-  * @value 'dark'
-  * @value 'light'
-  * @value 'gray'
-  * @value 'primary'
-  * @value 'success'
-  * @value 'warning'
-  * @value 'error'
-  * @value 'focus'
-  * @value 'link'
-  */
+   * variant property styles svg icon with Gov.gr palette's basic colors.
+   * variant property is optional.
+   * @value 'dark'
+   * @value 'light'
+   * @value 'gray'
+   * @value 'primary'
+   * @value 'success'
+   * @value 'warning'
+   * @value 'error'
+   * @value 'focus'
+   * @value 'link'
+   */
   variant?:
     | 'dark'
     | 'light'
@@ -58,11 +59,8 @@ export const SvgIcon = React.forwardRef<SVGSVGElement, SvgIconProps>(
           'govgr-svg-icon--error': variant === 'error',
           'govgr-svg-icon--focus': variant === 'focus',
           'govgr-svg-icon--link': variant === 'link',
-          'govgr-svg-icon--xs': size === 'sm',
-          'govgr-svg-icon--sm': size === 'md',
-          'govgr-svg-icon--md': size === 'lg',
-          'govgr-svg-icon--lg': size === 'xl',
-          'govgr-svg-icon--xl': size === 'xxl',
+          [`govgr-svg-icon--${size}`]: size !== undefined,
+
           'govgr-svg-icon': true,
         })}
         focusable="false"

package/src/TableCaption/index.tsx

@@ -26,10 +26,7 @@ export const TableCaption = React.forwardRef<HTMLElement, TableCaptionProps>(
         ref={ref}
         className={clsx(className, {
           'govgr-table__caption': true,
-          'govgr-table__caption--sm': size === 'sm',
-          'govgr-table__caption--md': size === 'md',
-          'govgr-table__caption--lg': size === 'lg',
-          'govgr-table__caption--xl': size === 'xl',
+          [`govgr-table__caption--${size}`]: size !== undefined,
         })}
         {...props}
       >