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

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/PageTitleCaption/__snapshots__/index.test.tsx.snap

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

package/src/PageTitleCaption/index.test.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import PageTitleHeading from '@digigov/react-core/PageTitleHeading';
+
+it('renders the PageTitleHeading with no props', () => {
+  expect(mount(<PageTitleHeading>hello</PageTitleHeading>)).toMatchSnapshot();
+});
+
+it('renders the PageTitleHeading with size=xl', () => {
+  expect(
+    mount(<PageTitleHeading size={'xl'}>hello</PageTitleHeading>)
+  ).toMatchSnapshot();
+});
+
+it('renders the PageTitleHeading with size=l', () => {
+  expect(
+    mount(<PageTitleHeading size={'lg'}>hello</PageTitleHeading>)
+  ).toMatchSnapshot();
+});
+
+it('renders the PageTitleHeading with size=m', () => {
+  expect(
+    mount(<PageTitleHeading size={'md'}>hello</PageTitleHeading>)
+  ).toMatchSnapshot();
+});
+
+it('renders the PageTitleHeading with size=s', () => {
+  expect(
+    mount(<PageTitleHeading size={'sm'}>hello</PageTitleHeading>)
+  ).toMatchSnapshot();
+});

package/src/PageTitleCaption/index.tsx

@@ -0,0 +1,22 @@
+import React from 'react';
+import HeadingCaption, {
+  HeadingCaptionProps,
+} from '@digigov/react-core/HeadingCaption';
+
+export interface PageTitleCaptionProps extends HeadingCaptionProps {}
+/**
+ * PageTitleCaption will be replaced by HeadingCaption.
+ */
+
+export const PageTitleCaption = React.forwardRef<
+  HTMLHeadingElement,
+  PageTitleCaptionProps
+>(function PageTitleCaption({ children, ...props }, ref) {
+  return (
+    <HeadingCaption ref={ref} {...props}>
+      {children}
+    </HeadingCaption>
+  );
+});
+
+export default PageTitleCaption;

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

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the PageTitleContainer with no props 1`] = `
+<ForwardRef(PageTitleContainer)>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-page-title"
+  >
+    <div
+      className="govgr-page-title"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(PageTitleContainer)>
+`;

package/src/PageTitleContainer/index.test.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import PageTitleContainer from '@digigov/react-core/PageTitleContainer';
+
+it('renders the PageTitleContainer with no props', () => {
+  expect(mount(<PageTitleContainer>hello</PageTitleContainer>)).toMatchSnapshot();
+});