@digigov/react-core 1.0.0-002c630d → 1.0.0-079f34f3d

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,60 +1,43 @@
 import React from 'react';
 import clsx from 'clsx';
-import Base, { BaseProps } from '@digigov/react-core/Base';
-
-export interface NormalTextProps extends BaseProps<'span'> {
-  /**
-   * 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.
-   */
-  variant?: 'lg' | 'md' | 'sm';
-  /**
-   * fontSize is optional.
-   * Add this fontSize override prop in order to change the font size.
-   */
-  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.
+   * 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'
    */
-  fontWeight?: 'regular' | 'bold';
+  size?: 'lg' | 'md' | 'sm';
 }
 /**
  * NormalText component is used for text formatting.
  * If you need a paragraph, use the Paragraph component instead.
  */
-export const NormalText = React.forwardRef<HTMLSpanElement, NormalTextProps>(
-  function NormalText(
-    { variant = 'md', fontSize, fontWeight, className, children, ...props },
-    ref
-  ) {
-    return (
-      <Base
-        as="span"
-        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}
-      >
-        {children}
-      </Base>
-    );
-  }
-);
+export const NormalText = React.forwardRef<
+  HTMLSpanElement | HTMLParagraphElement,
+  NormalTextProps
+>(function NormalText(
+  { size = 'md', fontSize, fontWeight, className, children, ...props },
+  ref
+) {
+  return (
+    <Typography
+      as='span'
+      fontWeight={fontWeight}
+      fontSize={fontSize}
+      ref={ref}
+      className={clsx(className, {
+        'govgr-body': true,
+        'govgr-body-lg': size === 'lg',
+        'govgr-body-sm': size === 'sm',
+      })}
+      {...props}
+    >
+      {children}
+    </Typography>
+  );
+});
 
 export default NormalText;

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

@@ -5,13 +5,13 @@ exports[`renders the NotificationBannerContainer with no props 1`] = `
   <ForwardRef(Base)
     aria-labelledby="govgr-notification-banner-title"
     as="div"
-    className="govgr-notification-banner"
+    className="govgr-notification-banner--info govgr-notification-banner"
     data-module="govgr-notification-banner"
     role="region"
   >
     <div
       aria-labelledby="govgr-notification-banner-title"
-      className="govgr-notification-banner"
+      className="govgr-notification-banner--info govgr-notification-banner"
       data-module="govgr-notification-banner"
       role="region"
     >
@@ -21,32 +21,9 @@ exports[`renders the NotificationBannerContainer with no props 1`] = `
 </ForwardRef(NotificationBannerContainer)>
 `;
 
-exports[`renders the NotificationBannerContainer with success=false 1`] = `
+exports[`renders the NotificationBannerContainer with variant=success 1`] = `
 <ForwardRef(NotificationBannerContainer)
-  success={false}
->
-  <ForwardRef(Base)
-    aria-labelledby="govgr-notification-banner-title"
-    as="div"
-    className="govgr-notification-banner"
-    data-module="govgr-notification-banner"
-    role="region"
-  >
-    <div
-      aria-labelledby="govgr-notification-banner-title"
-      className="govgr-notification-banner"
-      data-module="govgr-notification-banner"
-      role="region"
-    >
-      hello
-    </div>
-  </ForwardRef(Base)>
-</ForwardRef(NotificationBannerContainer)>
-`;
-
-exports[`renders the NotificationBannerContainer with success=true 1`] = `
-<ForwardRef(NotificationBannerContainer)
-  success={true}
+  variant="success"
 >
   <ForwardRef(Base)
     aria-labelledby="govgr-notification-banner-title"

package/src/NotificationBannerContainer/index.test.tsx

@@ -9,22 +9,13 @@ it('renders the NotificationBannerContainer with no props', () => {
   ).toMatchSnapshot();
 });
 
-it('renders the NotificationBannerContainer with success=true', () => {
+it('renders the NotificationBannerContainer with variant=success', () => {
   expect(
     mount(
-      <NotificationBannerContainer success={true}>
+      <NotificationBannerContainer variant={'success'}>
         hello
       </NotificationBannerContainer>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the NotificationBannerContainer with success=false', () => {
-  expect(
-    mount(
-      <NotificationBannerContainer success={false}>
-        hello
-      </NotificationBannerContainer>
-    )
-  ).toMatchSnapshot();
-});

package/src/NotificationBannerContainer/index.tsx

@@ -4,14 +4,19 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface NotificationBannerContainerProps extends BaseProps<'div'> {
   /**
-   * success is optional.
+   * variant is optional.
+   * variant is used to change the color of the NotificationBannerContainer.
+   * @value 'info'
+   * @value 'success'
+   * @value 'error'
+   * @default 'info'.
    */
-  success?: boolean;
+  variant?: 'info' | 'success' | 'error';
 }
 /**
  * Details for the NotificationBannerContainer.
- * NotificationBannerContainer componenent informs users about something they need to know about
- * NotificationBannerContainer componenent must be placed at the top of the page.
+ * NotificationBannerContainer component informs users about something they need to know about
+ * NotificationBannerContainer component must be placed at the top of the page.
  * NotificationBannerContainer wraps NotificationBannerContainerHeader, NotificationBannerContainerContent,NotificationBannerContainerHeading
  * and NotificationBannerContainerLink components as children
  */
@@ -19,7 +24,7 @@ export const NotificationBannerContainer = React.forwardRef<
   HTMLDivElement,
   NotificationBannerContainerProps
 >(function NotificationBannerContainer(
-  { success, className, children, ...props },
+  { variant = 'info', className, children, ...props },
   ref
 ) {
   return (
@@ -31,7 +36,7 @@ export const NotificationBannerContainer = React.forwardRef<
       ref={ref}
       className={clsx(className, {
         'govgr-notification-banner': true,
-        'govgr-notification-banner--success': success,
+        [`govgr-notification-banner--${variant}`]: variant !== undefined,
       })}
       {...props}
     >

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

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

package/src/NotificationBannerHeader/index.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
+import Heading from '@digigov/react-core/Heading';
 
 export interface NotificationBannerHeaderProps extends BaseProps<'div'> {}
 /**
@@ -21,13 +22,16 @@ export const NotificationBannerHeader = React.forwardRef<
       })}
       {...props}
     >
-      <h2
+      <Heading
+        element="h2"
+        size="sm"
+        marginBottom={0}
         className={clsx({
           'govgr-notification-banner__title': true,
         })}
       >
         {children}
-      </h2>
+      </Heading>
     </Base>
   );
 });