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

package/src/TextInput/index.test.tsx

@@ -7,250 +7,250 @@ it('renders the TextInput with no props', () => {
   expect(mount(<TextInput></TextInput>)).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=2', () => {
-  expect(mount(<TextInput characterWidth={2}></TextInput>)).toMatchSnapshot();
+it('renders the TextInput with maxWidth="2-char"', () => {
+  expect(mount(<TextInput maxWidth='2-char'></TextInput>)).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=3', () => {
-  expect(mount(<TextInput characterWidth={3}></TextInput>)).toMatchSnapshot();
+it('renders the TextInput with maxWidth="3-char"', () => {
+  expect(mount(<TextInput maxWidth='3-char'></TextInput>)).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=4', () => {
-  expect(mount(<TextInput characterWidth={4}></TextInput>)).toMatchSnapshot();
+it('renders the TextInput with maxWidth="4-char"', () => {
+  expect(mount(<TextInput maxWidth='4-char'></TextInput>)).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=5', () => {
-  expect(mount(<TextInput characterWidth={5}></TextInput>)).toMatchSnapshot();
+it('renders the TextInput with maxWidth="5-char"', () => {
+  expect(mount(<TextInput maxWidth='5-char'></TextInput>)).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=10', () => {
-  expect(mount(<TextInput characterWidth={10}></TextInput>)).toMatchSnapshot();
+it('renders the TextInput with maxWidth="10-char"', () => {
+  expect(mount(<TextInput maxWidth='10-char'></TextInput>)).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=20', () => {
-  expect(mount(<TextInput characterWidth={20}></TextInput>)).toMatchSnapshot();
+it('renders the TextInput with maxWidth="20-char"', () => {
+  expect(mount(<TextInput maxWidth='20-char'></TextInput>)).toMatchSnapshot();
 });
 
-it('renders the TextInput with cellWidth=one-quarter', () => {
+it('renders the TextInput with width=one-quarter', () => {
   expect(
-    mount(<TextInput cellWidth={'one-quarter'}></TextInput>)
+    mount(<TextInput width={'25%'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with cellWidth=one-third', () => {
+it('renders the TextInput with width=one-third', () => {
   expect(
-    mount(<TextInput cellWidth={'one-third'}></TextInput>)
+    mount(<TextInput width={'33.3%'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with cellWidth=one-half', () => {
+it('renders the TextInput with width=one-half', () => {
   expect(
-    mount(<TextInput cellWidth={'one-half'}></TextInput>)
+    mount(<TextInput width={'50%'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with cellWidth=two-thirds', () => {
+it('renders the TextInput with width=two-thirds', () => {
   expect(
-    mount(<TextInput cellWidth={'two-thirds'}></TextInput>)
+    mount(<TextInput width={'66.6%'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with cellWidth=three-quarters', () => {
+it('renders the TextInput with width=three-quarters', () => {
   expect(
-    mount(<TextInput cellWidth={'three-quarters'}></TextInput>)
+    mount(<TextInput width={'75%'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with cellWidth=full', () => {
-  expect(mount(<TextInput cellWidth={'full'}></TextInput>)).toMatchSnapshot();
+it('renders the TextInput with width=full', () => {
+  expect(mount(<TextInput width={'full'}></TextInput>)).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=2 and with cellWidth=one-quarter', () => {
+it('renders the TextInput with maxWidth="2-char" and with width=one-quarter', () => {
   expect(
-    mount(<TextInput characterWidth={2} cellWidth={'one-quarter'}></TextInput>)
+    mount(<TextInput maxWidth='2-char' width={'25%'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=3 and with cellWidth=one-quarter', () => {
+it('renders the TextInput with maxWidth="3-char" and with width=one-quarter', () => {
   expect(
-    mount(<TextInput characterWidth={3} cellWidth={'one-quarter'}></TextInput>)
+    mount(<TextInput maxWidth='3-char' width={'25%'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=4 and with cellWidth=one-quarter', () => {
+it('renders the TextInput with maxWidth="4-char" and with width=one-quarter', () => {
   expect(
-    mount(<TextInput characterWidth={4} cellWidth={'one-quarter'}></TextInput>)
+    mount(<TextInput maxWidth='4-char' width={'25%'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput  with with characterWidth=5 with cellWidth=one-quarter', () => {
+it('renders the TextInput  with with maxWidth="5-char" with width=one-quarter', () => {
   expect(
-    mount(<TextInput characterWidth={5} cellWidth={'one-quarter'}></TextInput>)
+    mount(<TextInput maxWidth='5-char' width={'25%'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=20 and with cellWidth=one-quarter', () => {
+it('renders the TextInput with maxWidth="20-char" and with width=one-quarter', () => {
   expect(
-    mount(<TextInput characterWidth={20} cellWidth={'one-quarter'}></TextInput>)
+    mount(<TextInput maxWidth='20-char' width={'25%'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=2 and with cellWidth=one-third', () => {
+it('renders the TextInput with maxWidth="2-char" and with width=one-third', () => {
   expect(
-    mount(<TextInput characterWidth={2} cellWidth={'one-third'}></TextInput>)
+    mount(<TextInput maxWidth='2-char' width={'33.3%'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=3 and with cellWidth=one-third', () => {
+it('renders the TextInput with maxWidth="3-char" and with width=one-third', () => {
   expect(
-    mount(<TextInput characterWidth={3} cellWidth={'one-third'}></TextInput>)
+    mount(<TextInput maxWidth='3-char' width={'33.3%'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=4 and with cellWidth=one-third', () => {
+it('renders the TextInput with maxWidth="4-char" and with width=one-third', () => {
   expect(
-    mount(<TextInput characterWidth={4} cellWidth={'one-third'}></TextInput>)
+    mount(<TextInput maxWidth='4-char' width={'33.3%'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput  with with characterWidth=5 with cellWidth=one-third', () => {
+it('renders the TextInput  with with maxWidth="5-char" with width=one-third', () => {
   expect(
-    mount(<TextInput characterWidth={5} cellWidth={'one-third'}></TextInput>)
+    mount(<TextInput maxWidth='5-char' width={'33.3%'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=20 and with cellWidth=one-third', () => {
+it('renders the TextInput with maxWidth="20-char" and with width=one-third', () => {
   expect(
-    mount(<TextInput characterWidth={20} cellWidth={'one-third'}></TextInput>)
+    mount(<TextInput maxWidth='20-char' width={'33.3%'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=2 and with cellWidth=one-half', () => {
+it('renders the TextInput with maxWidth="2-char" and with width=one-half', () => {
   expect(
-    mount(<TextInput characterWidth={2} cellWidth={'one-half'}></TextInput>)
+    mount(<TextInput maxWidth='2-char' width={'50%'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=3 and with cellWidth=one-half', () => {
+it('renders the TextInput with maxWidth="3-char" and with width=one-half', () => {
   expect(
-    mount(<TextInput characterWidth={3} cellWidth={'one-half'}></TextInput>)
+    mount(<TextInput maxWidth='3-char' width={'50%'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=4 and with cellWidth=one-half', () => {
+it('renders the TextInput with maxWidth="4-char" and with width=one-half', () => {
   expect(
-    mount(<TextInput characterWidth={4} cellWidth={'one-half'}></TextInput>)
+    mount(<TextInput maxWidth='4-char' width={'50%'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput  with with characterWidth=5 with cellWidth=one-half', () => {
+it('renders the TextInput  with with maxWidth="5-char" with width=one-half', () => {
   expect(
-    mount(<TextInput characterWidth={5} cellWidth={'one-half'}></TextInput>)
+    mount(<TextInput maxWidth='5-char' width={'50%'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=20 and with cellWidth=one-half', () => {
+it('renders the TextInput with maxWidth="20-char" and with width=one-half', () => {
   expect(
-    mount(<TextInput characterWidth={20} cellWidth={'one-half'}></TextInput>)
+    mount(<TextInput maxWidth='20-char' width={'50%'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=2 and with cellWidth=two-thirds', () => {
+it('renders the TextInput with maxWidth="2-char" and with width=two-thirds', () => {
   expect(
-    mount(<TextInput characterWidth={2} cellWidth={'two-thirds'}></TextInput>)
+    mount(<TextInput maxWidth='2-char' width={'66.6%'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=3 and with cellWidth=two-thirds', () => {
+it('renders the TextInput with maxWidth="3-char" and with width=two-thirds', () => {
   expect(
-    mount(<TextInput characterWidth={3} cellWidth={'two-thirds'}></TextInput>)
+    mount(<TextInput maxWidth='3-char' width={'66.6%'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=4 and with cellWidth=two-thirds', () => {
+it('renders the TextInput with maxWidth="4-char" and with width=two-thirds', () => {
   expect(
-    mount(<TextInput characterWidth={4} cellWidth={'two-thirds'}></TextInput>)
+    mount(<TextInput maxWidth='4-char' width={'66.6%'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput  with with characterWidth=5 with cellWidth=two-thirds', () => {
+it('renders the TextInput  with with maxWidth="5-char" with width=two-thirds', () => {
   expect(
-    mount(<TextInput characterWidth={5} cellWidth={'two-thirds'}></TextInput>)
+    mount(<TextInput maxWidth='5-char' width={'66.6%'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=20 and with cellWidth=two-thirds', () => {
+it('renders the TextInput with maxWidth="20-char" and with width=two-thirds', () => {
   expect(
-    mount(<TextInput characterWidth={20} cellWidth={'two-thirds'}></TextInput>)
+    mount(<TextInput maxWidth='20-char' width={'66.6%'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=2 and with cellWidth=three-quarters', () => {
+it('renders the TextInput with maxWidth="2-char" and with width=three-quarters', () => {
   expect(
     mount(
-      <TextInput characterWidth={2} cellWidth={'three-quarters'}></TextInput>
+      <TextInput maxWidth='2-char' width={'75%'}></TextInput>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=3 and with cellWidth=three-quarters', () => {
+it('renders the TextInput with maxWidth="3-char" and with width=three-quarters', () => {
   expect(
     mount(
-      <TextInput characterWidth={3} cellWidth={'three-quarters'}></TextInput>
+      <TextInput maxWidth='3-char' width={'75%'}></TextInput>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=4 and with cellWidth=three-quarters', () => {
+it('renders the TextInput with maxWidth="4-char" and with width=three-quarters', () => {
   expect(
     mount(
-      <TextInput characterWidth={4} cellWidth={'three-quarters'}></TextInput>
+      <TextInput maxWidth='4-char' width={'75%'}></TextInput>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput  with with characterWidth=5 with cellWidth=three-quarters', () => {
+it('renders the TextInput  with with maxWidth="5-char" with width=three-quarters', () => {
   expect(
     mount(
-      <TextInput characterWidth={5} cellWidth={'three-quarters'}></TextInput>
+      <TextInput maxWidth='5-char' width={'75%'}></TextInput>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=20 and with cellWidth=three-quarters', () => {
+it('renders the TextInput with maxWidth="20-char" and with width=three-quarters', () => {
   expect(
     mount(
-      <TextInput characterWidth={20} cellWidth={'three-quarters'}></TextInput>
+      <TextInput maxWidth='20-char' width={'75%'}></TextInput>
     )
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=2 and with cellWidth=full', () => {
+it('renders the TextInput with maxWidth="2-char" and with width=full', () => {
   expect(
-    mount(<TextInput characterWidth={2} cellWidth={'full'}></TextInput>)
+    mount(<TextInput maxWidth='2-char' width={'full'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=3 and with cellWidth=full', () => {
+it('renders the TextInput with maxWidth="3-char" and with width=full', () => {
   expect(
-    mount(<TextInput characterWidth={3} cellWidth={'full'}></TextInput>)
+    mount(<TextInput maxWidth='3-char' width={'full'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=4 and with cellWidth=full', () => {
+it('renders the TextInput with maxWidth="4-char" and with width=full', () => {
   expect(
-    mount(<TextInput characterWidth={4} cellWidth={'full'}></TextInput>)
+    mount(<TextInput maxWidth='4-char' width={'full'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput  with with characterWidth=5 with cellWidth=full', () => {
+it('renders the TextInput  with with maxWidth="5-char" with width=full', () => {
   expect(
-    mount(<TextInput characterWidth={5} cellWidth={'full'}></TextInput>)
+    mount(<TextInput maxWidth='5-char' width={'full'}></TextInput>)
   ).toMatchSnapshot();
 });
 
-it('renders the TextInput with characterWidth=20 and with cellWidth=full', () => {
+it('renders the TextInput with maxWidth="20-char" and with width=full', () => {
   expect(
-    mount(<TextInput characterWidth={20} cellWidth={'full'}></TextInput>)
+    mount(<TextInput maxWidth='20-char' width={'full'}></TextInput>)
   ).toMatchSnapshot();
 });

package/src/TextInput/index.tsx

@@ -4,40 +4,35 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface TextInputProps extends BaseProps<'input'> {
   /**
-  * characterWidth is optional.
-  * @value 2
-  * @value 3
-  * @value 4
-  * @value 5
-  * @value 10
-  * @value 20
-  */
-  characterWidth?: 2 | 3 | 4 | 5 | 10 | 20;
+   * maxWidth is optional.
+   * @value '2-char';
+   * @value '3-char';
+   * @value '4-char';
+   * @value '5-char';
+   * @value '10-char';
+   * @value '20-char';
+   */
+  maxWidth?: '2-char' | '3-char' | '4-char' | '5-char' | '10-char' | '20-char';
 
   /**
-  * cellWidth is optional.
-  * Use cellWidth prop to define a custom width for a specific reference number in your components.
-  * @value 'one-quarter'
-  * @value 'one-third'
-  * @value 'one-half'
-  * @value 'two-thirds'
-  * @value 'three-quarters'
-  * @value 'full'
-  */
-  cellWidth?:
-    | 'one-quarter'
-    | 'one-third'
-    | 'one-half'
-    | 'two-thirds'
-    | 'three-quarters'
-    | 'full';
+   * width is optional.
+   * Use width prop to define a custom width in your component.
+   * @value '25%';
+   * @value '33.3%';
+   * @value '50%';
+   * @value '66.6%';
+   * @value '75%';
+   * @value '100%';
+   * @value 'full';
+   */
+  width?: '25%' | '33.3%' | '50%' | '66.6%' | '75%' | '100%' | 'full';
 
   /**
-  * error is optional. The default value is false.
-  * Use this prop when there is an error at the input.
-  * @value true
-  * @value false
-  */
+   * error is optional. The default value is false.
+   * Use this prop when there is an error at the input.
+   * @value true
+   * @value false
+   */
   error?: boolean;
 }
 /**
@@ -48,9 +43,8 @@ export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
   function TextInput(
     {
       type = 'text',
-      name,
-      characterWidth,
-      cellWidth,
+      maxWidth,
+      width,
       error,
       className,
       children,
@@ -62,23 +56,16 @@ export const TextInput = React.forwardRef<HTMLInputElement, TextInputProps>(
       <Base
         as="input"
         type={type}
-        name={name}
         ref={ref}
         className={clsx(className, {
           'govgr-input': true,
-          'govgr-input--width-2': characterWidth === 2,
-          'govgr-input--width-3': characterWidth === 3,
-          'govgr-input--width-4': characterWidth === 4,
-          'govgr-input--width-5': characterWidth === 5,
-          'govgr-input--width-10': characterWidth === 10,
-          'govgr-input--width-20': characterWidth === 20,
-          'govgr-!-width-one-quarter': cellWidth === 'one-quarter',
-          'govgr-!-width-one-third': cellWidth === 'one-third',
-          'govgr-!-width-one-half': cellWidth === 'one-half',
-          'govgr-!-width-two-thirds': cellWidth === 'two-thirds',
-          'govgr-!-width-three-quarters': cellWidth === 'three-quarters',
-          'govgr-!-width-full': cellWidth === 'full',
           'govgr-input--error': error,
+          [`govgr-input--width-${maxWidth}`]: maxWidth !== undefined,
+          'govgr-!-width-one-quarter': width === '25%',
+          'govgr-!-width-one-third': width === '33.3%',
+          'govgr-!-width-one-half': width === '50%',
+          'govgr-!-width-two-thirds': width === '66.6%',
+          'govgr-!-width-three-quarters': width === '75%',
         })}
         {...props}
       >

package/src/Timeline/index.tsx

@@ -4,26 +4,26 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface TimelineProps extends BaseProps<'ol'> {
   /**
-  * spaced is optional. Use it to add space between the list items.
-  * @value true
-  * @value false
-  * @default false
-  */
-  spaced?: boolean;
+   * spaced is optional. Use it to add space between the list items.
+   * @value true
+   * @value false
+   * @default true
+   */
+  dense?: boolean;
 }
 /**
  * Timeline component is used for listing items.
  * This component must contain TimelineItem component.
  */
 export const Timeline = React.forwardRef<HTMLOListElement, TimelineProps>(
-  function Timeline({ spaced = false, className, children, ...props }, ref) {
+  function Timeline({ dense = true, className, children, ...props }, ref) {
     return (
       <Base
         as="ol"
         ref={ref}
         className={clsx(className, {
           'govgr-timeline': true,
-          'govgr-timeline--spaced': spaced,
+          'govgr-timeline--spaced': !dense,
         })}
         {...props}
       >

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

@@ -0,0 +1,181 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the Typography fontSize=24 and as=span props 1`] = `
+<ForwardRef(Typography)
+  as="span"
+  fontSize={24}
+>
+  <ForwardRef(Base)
+    as="span"
+    className="govgr-!-font-size-24"
+  >
+    <span
+      className="govgr-!-font-size-24"
+    >
+      hello
+    </span>
+  </ForwardRef(Base)>
+</ForwardRef(Typography)>
+`;
+
+exports[`renders the Typography fontSize=30 and as=span props 1`] = `
+<ForwardRef(Typography)
+  as="span"
+  fontSize={30}
+>
+  <ForwardRef(Base)
+    as="span"
+    className="govgr-!-font-size-30"
+  >
+    <span
+      className="govgr-!-font-size-30"
+    >
+      hello
+    </span>
+  </ForwardRef(Base)>
+</ForwardRef(Typography)>
+`;
+
+exports[`renders the Typography fontSize=36 and as=span props 1`] = `
+<ForwardRef(Typography)
+  as="span"
+  fontSize={36}
+>
+  <ForwardRef(Base)
+    as="span"
+    className="govgr-!-font-size-36"
+  >
+    <span
+      className="govgr-!-font-size-36"
+    >
+      hello
+    </span>
+  </ForwardRef(Base)>
+</ForwardRef(Typography)>
+`;
+
+exports[`renders the Typography fontSize=48 and as=span props 1`] = `
+<ForwardRef(Typography)
+  as="span"
+  fontSize={48}
+>
+  <ForwardRef(Base)
+    as="span"
+    className="govgr-!-font-size-48"
+  >
+    <span
+      className="govgr-!-font-size-48"
+    >
+      hello
+    </span>
+  </ForwardRef(Base)>
+</ForwardRef(Typography)>
+`;
+
+exports[`renders the Typography fontSize=72 and as=span props 1`] = `
+<ForwardRef(Typography)
+  as="span"
+  fontSize={72}
+>
+  <ForwardRef(Base)
+    as="span"
+    className="govgr-!-font-size-72"
+  >
+    <span
+      className="govgr-!-font-size-72"
+    >
+      hello
+    </span>
+  </ForwardRef(Base)>
+</ForwardRef(Typography)>
+`;
+
+exports[`renders the Typography fontWeight=bold and as=p props 1`] = `
+<ForwardRef(Typography)
+  as="p"
+  fontWeight="bold"
+>
+  <ForwardRef(Base)
+    as="p"
+    className="govgr-!-font-weight-bold"
+  >
+    <p
+      className="govgr-!-font-weight-bold"
+    >
+      hello
+    </p>
+  </ForwardRef(Base)>
+</ForwardRef(Typography)>
+`;
+
+exports[`renders the Typography with fontSize=14 and as=span props 1`] = `
+<ForwardRef(Typography)
+  as="span"
+  fontSize={14}
+>
+  <ForwardRef(Base)
+    as="span"
+    className="govgr-!-font-size-14"
+  >
+    <span
+      className="govgr-!-font-size-14"
+    >
+      hello
+    </span>
+  </ForwardRef(Base)>
+</ForwardRef(Typography)>
+`;
+
+exports[`renders the Typography with fontSize=16 and as=span props 1`] = `
+<ForwardRef(Typography)
+  as="span"
+  fontSize={16}
+>
+  <ForwardRef(Base)
+    as="span"
+    className="govgr-!-font-size-16"
+  >
+    <span
+      className="govgr-!-font-size-16"
+    >
+      hello
+    </span>
+  </ForwardRef(Base)>
+</ForwardRef(Typography)>
+`;
+
+exports[`renders the Typography with fontSize=19 and as=span props 1`] = `
+<ForwardRef(Typography)
+  as="span"
+  fontSize={19}
+>
+  <ForwardRef(Base)
+    as="span"
+    className="govgr-!-font-size-19"
+  >
+    <span
+      className="govgr-!-font-size-19"
+    >
+      hello
+    </span>
+  </ForwardRef(Base)>
+</ForwardRef(Typography)>
+`;
+
+exports[`renders the Typography with fontWeight=regular and as=p props 1`] = `
+<ForwardRef(Typography)
+  as="p"
+  fontWeight="regular"
+>
+  <ForwardRef(Base)
+    as="p"
+    className="govgr-!-font-weight-regular"
+  >
+    <p
+      className="govgr-!-font-weight-regular"
+    >
+      hello
+    </p>
+  </ForwardRef(Base)>
+</ForwardRef(Typography)>
+`;