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

package/src/Paragraph/index.test.tsx

@@ -7,48 +7,48 @@ it('renders the Paragraph with no props', () => {
   expect(mount(<Paragraph>hello</Paragraph>)).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=lead', () => {
-  expect(mount(<Paragraph variant={'lg'}>hello</Paragraph>)).toMatchSnapshot();
+it('renders the Paragraph with size=lead', () => {
+  expect(mount(<Paragraph size={'lg'}>hello</Paragraph>)).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=normal', () => {
-  expect(mount(<Paragraph variant={'md'}>hello</Paragraph>)).toMatchSnapshot();
+it('renders the Paragraph with size=normal', () => {
+  expect(mount(<Paragraph size={'md'}>hello</Paragraph>)).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=small', () => {
-  expect(mount(<Paragraph variant={'sm'}>hello</Paragraph>)).toMatchSnapshot();
+it('renders the Paragraph with size=small', () => {
+  expect(mount(<Paragraph size={'sm'}>hello</Paragraph>)).toMatchSnapshot();
 });
 
 it('renders the Paragraph with fontSize=14', () => {
-  expect(mount(<Paragraph fontSize={'14'}>hello</Paragraph>)).toMatchSnapshot();
+  expect(mount(<Paragraph fontSize={14}>hello</Paragraph>)).toMatchSnapshot();
 });
 
 it('renders the Paragraph with fontSize=16', () => {
-  expect(mount(<Paragraph fontSize={'16'}>hello</Paragraph>)).toMatchSnapshot();
+  expect(mount(<Paragraph fontSize={16}>hello</Paragraph>)).toMatchSnapshot();
 });
 
 it('renders the Paragraph with fontSize=19', () => {
-  expect(mount(<Paragraph fontSize={'19'}>hello</Paragraph>)).toMatchSnapshot();
+  expect(mount(<Paragraph fontSize={19}>hello</Paragraph>)).toMatchSnapshot();
 });
 
 it('renders the Paragraph with fontSize=24', () => {
-  expect(mount(<Paragraph fontSize={'24'}>hello</Paragraph>)).toMatchSnapshot();
+  expect(mount(<Paragraph fontSize={24}>hello</Paragraph>)).toMatchSnapshot();
 });
 
 it('renders the Paragraph with fontSize=30', () => {
-  expect(mount(<Paragraph fontSize={'30'}>hello</Paragraph>)).toMatchSnapshot();
+  expect(mount(<Paragraph fontSize={30}>hello</Paragraph>)).toMatchSnapshot();
 });
 
 it('renders the Paragraph with fontSize=36', () => {
-  expect(mount(<Paragraph fontSize={'36'}>hello</Paragraph>)).toMatchSnapshot();
+  expect(mount(<Paragraph fontSize={36}>hello</Paragraph>)).toMatchSnapshot();
 });
 
 it('renders the Paragraph with fontSize=48', () => {
-  expect(mount(<Paragraph fontSize={'48'}>hello</Paragraph>)).toMatchSnapshot();
+  expect(mount(<Paragraph fontSize={48}>hello</Paragraph>)).toMatchSnapshot();
 });
 
 it('renders the Paragraph with fontSize=72', () => {
-  expect(mount(<Paragraph fontSize={'72'}>hello</Paragraph>)).toMatchSnapshot();
+  expect(mount(<Paragraph fontSize={72}>hello</Paragraph>)).toMatchSnapshot();
 });
 it('renders the Paragraph with fontWeight=regular', () => {
   expect(
@@ -66,258 +66,258 @@ it('renders the Paragraph with fontWeight=bold', () => {
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=lead and fontSize=14', () => {
+it('renders the Paragraph with size=lead and fontSize=14', () => {
   expect(
     mount(
-      <Paragraph variant={'lg'} fontSize={'14'}>
+      <Paragraph size={'lg'} fontSize={14}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=lead and fontSize=16', () => {
+it('renders the Paragraph with size=lead and fontSize=16', () => {
   expect(
     mount(
-      <Paragraph variant={'lg'} fontSize={'16'}>
+      <Paragraph size={'lg'} fontSize={16}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=lead and fontSize=19', () => {
+it('renders the Paragraph with size=lead and fontSize=19', () => {
   expect(
     mount(
-      <Paragraph variant={'lg'} fontSize={'19'}>
+      <Paragraph size={'lg'} fontSize={19}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=lead and fontSize=24', () => {
+it('renders the Paragraph with size=lead and fontSize=24', () => {
   expect(
     mount(
-      <Paragraph variant={'lg'} fontSize={'14'}>
+      <Paragraph size={'lg'} fontSize={14}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=lead and fontSize=30', () => {
+it('renders the Paragraph with size=lead and fontSize=30', () => {
   expect(
     mount(
-      <Paragraph variant={'lg'} fontSize={'30'}>
+      <Paragraph size={'lg'} fontSize={30}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=lead and fontSize=36', () => {
+it('renders the Paragraph with size=lead and fontSize=36', () => {
   expect(
     mount(
-      <Paragraph variant={'lg'} fontSize={'36'}>
+      <Paragraph size={'lg'} fontSize={36}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=lead and fontSize=48', () => {
+it('renders the Paragraph with size=lead and fontSize=48', () => {
   expect(
     mount(
-      <Paragraph variant={'lg'} fontSize={'48'}>
+      <Paragraph size={'lg'} fontSize={48}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=lead and fontSize=72', () => {
+it('renders the Paragraph with size=lead and fontSize=72', () => {
   expect(
     mount(
-      <Paragraph variant={'lg'} fontSize={'72'}>
+      <Paragraph size={'lg'} fontSize={72}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=small and fontSize=14', () => {
+it('renders the Paragraph with size=small and fontSize=14', () => {
   expect(
     mount(
-      <Paragraph variant={'sm'} fontSize={'14'}>
+      <Paragraph size={'sm'} fontSize={14}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=small and fontSize=16', () => {
+it('renders the Paragraph with size=small and fontSize=16', () => {
   expect(
     mount(
-      <Paragraph variant={'sm'} fontSize={'16'}>
+      <Paragraph size={'sm'} fontSize={16}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=small and fontSize=19', () => {
+it('renders the Paragraph with size=small and fontSize=19', () => {
   expect(
     mount(
-      <Paragraph variant={'sm'} fontSize={'19'}>
+      <Paragraph size={'sm'} fontSize={19}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=small and fontSize=24', () => {
+it('renders the Paragraph with size=small and fontSize=24', () => {
   expect(
     mount(
-      <Paragraph variant={'sm'} fontSize={'14'}>
+      <Paragraph size={'sm'} fontSize={14}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=small and fontSize=30', () => {
+it('renders the Paragraph with size=small and fontSize=30', () => {
   expect(
     mount(
-      <Paragraph variant={'sm'} fontSize={'30'}>
+      <Paragraph size={'sm'} fontSize={30}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=small and fontSize=36', () => {
+it('renders the Paragraph with size=small and fontSize=36', () => {
   expect(
     mount(
-      <Paragraph variant={'sm'} fontSize={'36'}>
+      <Paragraph size={'sm'} fontSize={36}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=small and fontSize=48', () => {
+it('renders the Paragraph with size=small and fontSize=48', () => {
   expect(
     mount(
-      <Paragraph variant={'sm'} fontSize={'48'}>
+      <Paragraph size={'sm'} fontSize={48}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=small and fontSize=72', () => {
+it('renders the Paragraph with size=small and fontSize=72', () => {
   expect(
     mount(
-      <Paragraph variant={'sm'} fontSize={'72'}>
+      <Paragraph size={'sm'} fontSize={72}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=normal and fontSize=14', () => {
+it('renders the Paragraph with size=normal and fontSize=14', () => {
   expect(
     mount(
-      <Paragraph variant={'md'} fontSize={'14'}>
+      <Paragraph size={'md'} fontSize={14}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=normal and fontSize=16', () => {
+it('renders the Paragraph with size=normal and fontSize=16', () => {
   expect(
     mount(
-      <Paragraph variant={'md'} fontSize={'16'}>
+      <Paragraph size={'md'} fontSize={16}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=normal and fontSize=19', () => {
+it('renders the Paragraph with size=normal and fontSize=19', () => {
   expect(
     mount(
-      <Paragraph variant={'md'} fontSize={'19'}>
+      <Paragraph size={'md'} fontSize={19}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=normal and fontSize=24', () => {
+it('renders the Paragraph with size=normal and fontSize=24', () => {
   expect(
     mount(
-      <Paragraph variant={'md'} fontSize={'14'}>
+      <Paragraph size={'md'} fontSize={14}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=normal and fontSize=30', () => {
+it('renders the Paragraph with size=normal and fontSize=30', () => {
   expect(
     mount(
-      <Paragraph variant={'md'} fontSize={'30'}>
+      <Paragraph size={'md'} fontSize={30}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=normal and fontSize=36', () => {
+it('renders the Paragraph with size=normal and fontSize=36', () => {
   expect(
     mount(
-      <Paragraph variant={'md'} fontSize={'36'}>
+      <Paragraph size={'md'} fontSize={36}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=normal and fontSize=48', () => {
+it('renders the Paragraph with size=normal and fontSize=48', () => {
   expect(
     mount(
-      <Paragraph variant={'md'} fontSize={'48'}>
+      <Paragraph size={'md'} fontSize={48}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the Paragraph with variant=normal and fontSize=72', () => {
+it('renders the Paragraph with size=normal and fontSize=72', () => {
   expect(
     mount(
-      <Paragraph variant={'md'} fontSize={'72'}>
+      <Paragraph size={'md'} fontSize={72}>
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
-it('renders the Paragraph with variant=normal, fontSize=72 and fontWeight="regular', () => {
+it('renders the Paragraph with size=normal, fontSize=72 and fontWeight="regular', () => {
   expect(
     mount(
-      <Paragraph variant={'md'} fontSize={'72'} fontWeight="regular">
+      <Paragraph size={'md'} fontSize={72} fontWeight="regular">
         hello
       </Paragraph>
     )
   ).toMatchSnapshot();
 });
-it('renders the Paragraph with variant=normal, fontSize=72 and fontWeight="bold', () => {
+it('renders the Paragraph with size=normal, fontSize=72 and fontWeight="bold', () => {
   expect(
     mount(
-      <Paragraph variant={'md'} fontSize={'72'} fontWeight="bold">
+      <Paragraph size={'md'} fontSize={72} fontWeight="bold">
         hello
       </Paragraph>
     )

package/src/Paragraph/index.tsx

@@ -1,59 +1,19 @@
 import React from 'react';
-import clsx from 'clsx';
-import Base, { BaseProps } from '@digigov/react-core/Base';
+import { BaseProps } from '@digigov/react-core/Base';
+import NormalText, { NormalTextProps } from '@digigov/react-core/NormalText';
 
-export interface ParagraphProps extends BaseProps<'p'> {
-  /**
-   * variant is optional.
-   * Use 'lg' when a lg paragraph is an introductory paragraph that you can use at the top of a page to summarize the content.
-   * The majority of your body should use the standard 'md' variant. This is the default value.
-   * You can use the 'sm' sparingly to make your paragraph font size smaller: 16px on larger screens and 14px on smaller screens.
-   */
-  variant?: 'lg' | 'md' | 'sm';
-
-  /**
-   * fontSize is optional.
-   * You can add this fontSize override prop in order to change the font size.
-   */
-  fontSize?: '14' | '16' | '19' | '24' | '30' | '36' | '48' | '72';
-
-  /**
-   * fontWeight is optional.
-   * You can add a fontWeight override prop to change the font weight to regular or bold.
-   */
-  fontWeight?: 'regular' | 'bold';
-}
+export interface ParagraphProps
+  extends Pick<NormalTextProps, 'size' | 'fontSize' | 'fontWeight'>,
+  BaseProps<'p'> { }
 /**
  * Paragraph component is used for text formatting.
  */
 export const Paragraph = React.forwardRef<HTMLParagraphElement, ParagraphProps>(
-  function Paragraph(
-    { variant = 'md', fontSize, fontWeight, className, children, ...props },
-    ref
-  ) {
+  function Paragraph({ children, ...props }, ref) {
     return (
-      <Base
-        as="p"
-        ref={ref}
-        className={clsx(className, {
-          'govgr-body': true,
-          'govgr-body-lg': variant === 'lg',
-          'govgr-body-sm': variant === 'sm',
-          'govgr-!-font-size-14': fontSize === '14',
-          'govgr-!-font-size-16': fontSize === '16',
-          'govgr-!-font-size-19': fontSize === '19',
-          'govgr-!-font-size-24': fontSize === '24',
-          'govgr-!-font-size-30': fontSize === '30',
-          'govgr-!-font-size-36': fontSize === '36',
-          'govgr-!-font-size-48': fontSize === '48',
-          'govgr-!-font-size-72': fontSize === '72',
-          'govgr-!-font-weight-regular': fontWeight == 'regular',
-          'govgr-!-font-weight-bold': fontWeight == 'bold',
-        })}
-        {...props}
-      >
+      <NormalText as="p" ref={ref} {...props}>
         {children}
-      </Base>
+      </NormalText>
     );
   }
 );

package/src/PhaseBanner/index.tsx

@@ -4,9 +4,12 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface PhaseBannerProps extends BaseProps<'div'> {
   /**
-   * underline is optional.
-   * Use this prop when you want to underline the phase banner.
-   */
+  * underline is optional.
+  * Use this prop when you want to underline the phase banner.
+  * @value true
+  * @value false
+  * @default false
+  */
   underline?: boolean;
 }
 /**

package/src/PhaseBannerHeaderContainer/__snapshots__/inde.test.tsx.snap

@@ -4,10 +4,10 @@ exports[`renders the PhaseBannerHeaderContainer with no props 1`] = `
 <ForwardRef(PhaseBannerHeaderContainer)>
   <ForwardRef(Base)
     as="div"
-    className="govgr-phase-banner_header"
+    className="govgr-phase-banner__header"
   >
     <div
-      className="govgr-phase-banner_header"
+      className="govgr-phase-banner__header"
     >
       hello
     </div>

package/src/PhaseBannerHeaderContainer/index.tsx

@@ -14,7 +14,7 @@ export const PhaseBannerHeaderContainer = React.forwardRef<
       ref={ref}
       {...props}
       className={clsx({
-        'govgr-phase-banner_header': true,
+        'govgr-phase-banner__header': true,
       })}
     >
       {children}

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

@@ -4,10 +4,10 @@ exports[`renders the PhaseBannerTag with no props 1`] = `
 <ForwardRef(PhaseBannerTag)>
   <ForwardRef(Base)
     as="strong"
-    className="govgr-tag govgr-phase-banner__tag"
+    className="govgr-phase-banner__tag"
   >
     <strong
-      className="govgr-tag govgr-phase-banner__tag"
+      className="govgr-phase-banner__tag"
     >
       hello
     </strong>

package/src/PhaseBannerTag/index.tsx

@@ -15,7 +15,6 @@ export const PhaseBannerTag = React.forwardRef<
       as="strong"
       ref={ref}
       className={clsx(className, {
-        'govgr-tag': true,
         'govgr-phase-banner__tag': true,
       })}
       {...props}

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

@@ -13,17 +13,14 @@ exports[`renders the Blockquote with no props 1`] = `
         <ForwardRef(Grid)
           className="govgr-field"
           item={true}
-          lg={12}
-          md={12}
-          xl={12}
           xs={12}
         >
           <ForwardRef(Base)
             as="div"
-            className="govgr-field xs:govgr-grid__col-span-12 md:govgr-grid__col-span-12 lg:govgr-grid__col-span-12 xl:govgr-grid__col-span-12"
+            className="govgr-field xs:govgr-grid__col-span-12"
           >
             <div
-              className="govgr-field xs:govgr-grid__col-span-12 md:govgr-grid__col-span-12 lg:govgr-grid__col-span-12 xl:govgr-grid__col-span-12"
+              className="govgr-field xs:govgr-grid__col-span-12"
             >
               <ForwardRef(LabelContainer)>
                 <ForwardRef(Base)

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

@@ -1,5 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders the RadioContainer with layout=horizontal 1`] = `
+<ForwardRef(RadioContainer)
+  layout="horizontal"
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-radios--horizontal govgr-radios"
+  >
+    <div
+      className="govgr-radios--horizontal govgr-radios"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(RadioContainer)>
+`;
+
 exports[`renders the RadioContainer with no props 1`] = `
 <ForwardRef(RadioContainer)>
   <ForwardRef(Base)

package/src/RadioContainer/index.test.tsx

@@ -6,3 +6,6 @@ import RadioContainer from '@digigov/react-core/RadioContainer';
 it('renders the RadioContainer with no props', () => {
   expect(mount(<RadioContainer>hello</RadioContainer>)).toMatchSnapshot();
 });
+it('renders the RadioContainer with layout=horizontal', () => {
+  expect(mount(<RadioContainer layout='horizontal'>hello</RadioContainer>)).toMatchSnapshot();
+});

package/src/RadioContainer/index.tsx

@@ -4,25 +4,28 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface RadioContainerProps extends BaseProps<'div'> {
   /**
-   * The `inline` prop controls whether the radio items will render next to each other or not.
-   * */
-  inline?: boolean;
+  * The `layout` prop controls whether the radio items will render next to each other or not.
+  * @value 'horizontal'
+  * @value 'vertical'
+  * @default 'vertical'
+  */
+  layout?: 'horizontal' | 'vertical';
 }
 /**
  * RadioContainer component is uses when users can only select one option from a list.
- * It is used as parent component to wrap RadioItem compoent.
+ * It is used as parent component to wrap RadioItem component.
  */
 export const RadioContainer = React.forwardRef<
   HTMLDivElement,
   RadioContainerProps
->(function RadioContainer({ className, children, inline, ...props }, ref) {
+>(function RadioContainer({ className, children, layout, ...props }, ref) {
   return (
     <Base
       as="div"
       ref={ref}
       className={clsx(className, {
         'govgr-radios': true,
-        'govgr-radios--inline': inline,
+        'govgr-radios--horizontal': layout === 'horizontal',
       })}
       {...props}
     >

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

@@ -4,20 +4,18 @@ exports[`renders the RadioItem  \`divider\` props 1`] = `
 <ForwardRef(RadioItem)
   divider="ή"
 >
-  <ForwardRef(ChoiceDivider)
-    text="ή"
-  >
+  <ForwardRef(ChoiceDividerText)>
     <ForwardRef(Base)
       as="div"
-      className="govgr-choice-divider"
+      className="govgr-choice-divider-text"
     >
       <div
-        className="govgr-choice-divider"
+        className="govgr-choice-divider-text"
       >
         ή
       </div>
     </ForwardRef(Base)>
-  </ForwardRef(ChoiceDivider)>
+  </ForwardRef(ChoiceDividerText)>
   <div
     className="govgr-radios__item"
   >
@@ -97,20 +95,18 @@ exports[`renders the RadioItem with \`name\`, \`disabled\`, \`divider\` and \`va
   name="name"
   value="someValue"
 >
-  <ForwardRef(ChoiceDivider)
-    text="ή"
-  >
+  <ForwardRef(ChoiceDividerText)>
     <ForwardRef(Base)
       as="div"
-      className="govgr-choice-divider"
+      className="govgr-choice-divider-text"
     >
       <div
-        className="govgr-choice-divider"
+        className="govgr-choice-divider-text"
       >
         ή
       </div>
     </ForwardRef(Base)>
-  </ForwardRef(ChoiceDivider)>
+  </ForwardRef(ChoiceDividerText)>
   <div
     className="govgr-radios__item"
   >