@digigov/react-core 1.0.0-6b93ebf2 → 1.0.0-77ee23d9

package/src/NormalText/index.test.tsx

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

package/src/NormalText/index.tsx

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

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

@@ -15,17 +15,23 @@ exports[`renders the NotificationBannerHeader with no props 1`] = `
         marginBottom={0}
         size="sm"
       >
-        <ForwardRef(Base)
+        <ForwardRef(Typography)
           as="h2"
           className="govgr-notification-banner__title govgr-heading-sm"
           marginBottom={0}
         >
-          <h2
-            className="govgr-notification-banner__title govgr-heading-sm govgr-mb-0"
+          <ForwardRef(Base)
+            as="h2"
+            className="govgr-notification-banner__title govgr-heading-sm"
+            marginBottom={0}
           >
-            hello
-          </h2>
-        </ForwardRef(Base)>
+            <h2
+              className="govgr-notification-banner__title govgr-heading-sm govgr-mb-0"
+            >
+              hello
+            </h2>
+          </ForwardRef(Base)>
+        </ForwardRef(Typography)>
       </ForwardRef(Heading)>
     </div>
   </ForwardRef(Base)>

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

@@ -7,16 +7,21 @@ exports[`renders the NotificationBannerHeading with no props 1`] = `
     element="h3"
     size="md"
   >
-    <ForwardRef(Base)
+    <ForwardRef(Typography)
       as="h3"
       className="govgr-notification-banner__heading govgr-heading-md"
     >
-      <h3
+      <ForwardRef(Base)
+        as="h3"
         className="govgr-notification-banner__heading govgr-heading-md"
       >
-        hello
-      </h3>
-    </ForwardRef(Base)>
+        <h3
+          className="govgr-notification-banner__heading govgr-heading-md"
+        >
+          hello
+        </h3>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
   </ForwardRef(Heading)>
 </ForwardRef(NotificationBannerHeading)>
 `;

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

@@ -0,0 +1,127 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the PageTitleHeading with no props 1`] = `
+<ForwardRef(PageTitleHeading)>
+  <ForwardRef(Heading)>
+    <ForwardRef(Typography)
+      as="h1"
+      className="govgr-heading-xl"
+    >
+      <ForwardRef(Base)
+        as="h1"
+        className="govgr-heading-xl"
+      >
+        <h1
+          className="govgr-heading-xl"
+        >
+          hello
+        </h1>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(Heading)>
+</ForwardRef(PageTitleHeading)>
+`;
+
+exports[`renders the PageTitleHeading with size=l 1`] = `
+<ForwardRef(PageTitleHeading)
+  size="lg"
+>
+  <ForwardRef(Heading)
+    size="lg"
+  >
+    <ForwardRef(Typography)
+      as="h2"
+      className="govgr-heading-lg"
+    >
+      <ForwardRef(Base)
+        as="h2"
+        className="govgr-heading-lg"
+      >
+        <h2
+          className="govgr-heading-lg"
+        >
+          hello
+        </h2>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(Heading)>
+</ForwardRef(PageTitleHeading)>
+`;
+
+exports[`renders the PageTitleHeading with size=m 1`] = `
+<ForwardRef(PageTitleHeading)
+  size="md"
+>
+  <ForwardRef(Heading)
+    size="md"
+  >
+    <ForwardRef(Typography)
+      as="h3"
+      className="govgr-heading-md"
+    >
+      <ForwardRef(Base)
+        as="h3"
+        className="govgr-heading-md"
+      >
+        <h3
+          className="govgr-heading-md"
+        >
+          hello
+        </h3>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(Heading)>
+</ForwardRef(PageTitleHeading)>
+`;
+
+exports[`renders the PageTitleHeading with size=s 1`] = `
+<ForwardRef(PageTitleHeading)
+  size="sm"
+>
+  <ForwardRef(Heading)
+    size="sm"
+  >
+    <ForwardRef(Typography)
+      as="h4"
+      className="govgr-heading-sm"
+    >
+      <ForwardRef(Base)
+        as="h4"
+        className="govgr-heading-sm"
+      >
+        <h4
+          className="govgr-heading-sm"
+        >
+          hello
+        </h4>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(Heading)>
+</ForwardRef(PageTitleHeading)>
+`;
+
+exports[`renders the PageTitleHeading with size=xl 1`] = `
+<ForwardRef(PageTitleHeading)
+  size="xl"
+>
+  <ForwardRef(Heading)
+    size="xl"
+  >
+    <ForwardRef(Typography)
+      as="h1"
+      className="govgr-heading-xl"
+    >
+      <ForwardRef(Base)
+        as="h1"
+        className="govgr-heading-xl"
+      >
+        <h1
+          className="govgr-heading-xl"
+        >
+          hello
+        </h1>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(Heading)>
+</ForwardRef(PageTitleHeading)>
+`;