@digigov/react-core 0.17.1-alpha → 0.17.2

package/src/Paragraph/index.test.tsx

@@ -1,331 +0,0 @@
-import React from 'react';
-import { mount } from 'enzyme';
-
-import Paragraph from '@digigov/react-core/Paragraph';
-
-it('renders the Paragraph with no props', () => {
-  expect(mount(<Paragraph>hello</Paragraph>)).toMatchSnapshot();
-});
-
-it('renders the Paragraph with variant=lead', () => {
-  expect(
-    mount(<Paragraph variant={'lead'}>hello</Paragraph>)
-  ).toMatchSnapshot();
-});
-
-it('renders the Paragraph with variant=normal', () => {
-  expect(
-    mount(<Paragraph variant={'normal'}>hello</Paragraph>)
-  ).toMatchSnapshot();
-});
-
-it('renders the Paragraph with variant=small', () => {
-  expect(
-    mount(<Paragraph variant={'small'}>hello</Paragraph>)
-  ).toMatchSnapshot();
-});
-
-it('renders the Paragraph with fontSize=14', () => {
-  expect(mount(<Paragraph fontSize={'14'}>hello</Paragraph>)).toMatchSnapshot();
-});
-
-it('renders the Paragraph with fontSize=16', () => {
-  expect(mount(<Paragraph fontSize={'16'}>hello</Paragraph>)).toMatchSnapshot();
-});
-
-it('renders the Paragraph with fontSize=19', () => {
-  expect(mount(<Paragraph fontSize={'19'}>hello</Paragraph>)).toMatchSnapshot();
-});
-
-it('renders the Paragraph with fontSize=24', () => {
-  expect(mount(<Paragraph fontSize={'24'}>hello</Paragraph>)).toMatchSnapshot();
-});
-
-it('renders the Paragraph with fontSize=30', () => {
-  expect(mount(<Paragraph fontSize={'30'}>hello</Paragraph>)).toMatchSnapshot();
-});
-
-it('renders the Paragraph with fontSize=36', () => {
-  expect(mount(<Paragraph fontSize={'36'}>hello</Paragraph>)).toMatchSnapshot();
-});
-
-it('renders the Paragraph with fontSize=48', () => {
-  expect(mount(<Paragraph fontSize={'48'}>hello</Paragraph>)).toMatchSnapshot();
-});
-
-it('renders the Paragraph with fontSize=72', () => {
-  expect(mount(<Paragraph fontSize={'72'}>hello</Paragraph>)).toMatchSnapshot();
-});
-it('renders the Paragraph with fontWeight=regular', () => {
-  expect(
-    mount(<Paragraph fontWeight={'regular'}>hello</Paragraph>)
-  ).toMatchSnapshot();
-});
-it('renders the Paragraph with fontWeight=bold', () => {
-  expect(
-    mount(<Paragraph fontWeight={'bold'}>hello</Paragraph>)
-  ).toMatchSnapshot();
-});
-it('renders the Paragraph with fontWeight=bold', () => {
-  expect(
-    mount(<Paragraph fontWeight={'bold'}>hello</Paragraph>)
-  ).toMatchSnapshot();
-});
-
-it('renders the Paragraph with variant=lead and fontSize=14', () => {
-  expect(
-    mount(
-      <Paragraph variant={'lead'} fontSize={'14'}>
-        hello
-      </Paragraph>
-    )
-  ).toMatchSnapshot();
-});
-
-it('renders the Paragraph with variant=lead and fontSize=16', () => {
-  expect(
-    mount(
-      <Paragraph variant={'lead'} fontSize={'16'}>
-        hello
-      </Paragraph>
-    )
-  ).toMatchSnapshot();
-});
-
-it('renders the Paragraph with variant=lead and fontSize=19', () => {
-  expect(
-    mount(
-      <Paragraph variant={'lead'} fontSize={'19'}>
-        hello
-      </Paragraph>
-    )
-  ).toMatchSnapshot();
-});
-
-it('renders the Paragraph with variant=lead and fontSize=24', () => {
-  expect(
-    mount(
-      <Paragraph variant={'lead'} fontSize={'14'}>
-        hello
-      </Paragraph>
-    )
-  ).toMatchSnapshot();
-});
-
-it('renders the Paragraph with variant=lead and fontSize=30', () => {
-  expect(
-    mount(
-      <Paragraph variant={'lead'} fontSize={'30'}>
-        hello
-      </Paragraph>
-    )
-  ).toMatchSnapshot();
-});
-
-it('renders the Paragraph with variant=lead and fontSize=36', () => {
-  expect(
-    mount(
-      <Paragraph variant={'lead'} fontSize={'36'}>
-        hello
-      </Paragraph>
-    )
-  ).toMatchSnapshot();
-});
-
-it('renders the Paragraph with variant=lead and fontSize=48', () => {
-  expect(
-    mount(
-      <Paragraph variant={'lead'} fontSize={'48'}>
-        hello
-      </Paragraph>
-    )
-  ).toMatchSnapshot();
-});
-
-it('renders the Paragraph with variant=lead and fontSize=72', () => {
-  expect(
-    mount(
-      <Paragraph variant={'lead'} fontSize={'72'}>
-        hello
-      </Paragraph>
-    )
-  ).toMatchSnapshot();
-});
-
-it('renders the Paragraph with variant=small and fontSize=14', () => {
-  expect(
-    mount(
-      <Paragraph variant={'small'} fontSize={'14'}>
-        hello
-      </Paragraph>
-    )
-  ).toMatchSnapshot();
-});
-
-it('renders the Paragraph with variant=small and fontSize=16', () => {
-  expect(
-    mount(
-      <Paragraph variant={'small'} fontSize={'16'}>
-        hello
-      </Paragraph>
-    )
-  ).toMatchSnapshot();
-});
-
-it('renders the Paragraph with variant=small and fontSize=19', () => {
-  expect(
-    mount(
-      <Paragraph variant={'small'} fontSize={'19'}>
-        hello
-      </Paragraph>
-    )
-  ).toMatchSnapshot();
-});
-
-it('renders the Paragraph with variant=small and fontSize=24', () => {
-  expect(
-    mount(
-      <Paragraph variant={'small'} fontSize={'14'}>
-        hello
-      </Paragraph>
-    )
-  ).toMatchSnapshot();
-});
-
-it('renders the Paragraph with variant=small and fontSize=30', () => {
-  expect(
-    mount(
-      <Paragraph variant={'small'} fontSize={'30'}>
-        hello
-      </Paragraph>
-    )
-  ).toMatchSnapshot();
-});
-
-it('renders the Paragraph with variant=small and fontSize=36', () => {
-  expect(
-    mount(
-      <Paragraph variant={'small'} fontSize={'36'}>
-        hello
-      </Paragraph>
-    )
-  ).toMatchSnapshot();
-});
-
-it('renders the Paragraph with variant=small and fontSize=48', () => {
-  expect(
-    mount(
-      <Paragraph variant={'small'} fontSize={'48'}>
-        hello
-      </Paragraph>
-    )
-  ).toMatchSnapshot();
-});
-
-it('renders the Paragraph with variant=small and fontSize=72', () => {
-  expect(
-    mount(
-      <Paragraph variant={'small'} fontSize={'72'}>
-        hello
-      </Paragraph>
-    )
-  ).toMatchSnapshot();
-});
-
-it('renders the Paragraph with variant=normal and fontSize=14', () => {
-  expect(
-    mount(
-      <Paragraph variant={'normal'} fontSize={'14'}>
-        hello
-      </Paragraph>
-    )
-  ).toMatchSnapshot();
-});
-
-it('renders the Paragraph with variant=normal and fontSize=16', () => {
-  expect(
-    mount(
-      <Paragraph variant={'normal'} fontSize={'16'}>
-        hello
-      </Paragraph>
-    )
-  ).toMatchSnapshot();
-});
-
-it('renders the Paragraph with variant=normal and fontSize=19', () => {
-  expect(
-    mount(
-      <Paragraph variant={'normal'} fontSize={'19'}>
-        hello
-      </Paragraph>
-    )
-  ).toMatchSnapshot();
-});
-
-it('renders the Paragraph with variant=normal and fontSize=24', () => {
-  expect(
-    mount(
-      <Paragraph variant={'normal'} fontSize={'14'}>
-        hello
-      </Paragraph>
-    )
-  ).toMatchSnapshot();
-});
-
-it('renders the Paragraph with variant=normal and fontSize=30', () => {
-  expect(
-    mount(
-      <Paragraph variant={'normal'} fontSize={'30'}>
-        hello
-      </Paragraph>
-    )
-  ).toMatchSnapshot();
-});
-
-it('renders the Paragraph with variant=normal and fontSize=36', () => {
-  expect(
-    mount(
-      <Paragraph variant={'normal'} fontSize={'36'}>
-        hello
-      </Paragraph>
-    )
-  ).toMatchSnapshot();
-});
-
-it('renders the Paragraph with variant=normal and fontSize=48', () => {
-  expect(
-    mount(
-      <Paragraph variant={'normal'} fontSize={'48'}>
-        hello
-      </Paragraph>
-    )
-  ).toMatchSnapshot();
-});
-
-it('renders the Paragraph with variant=normal and fontSize=72', () => {
-  expect(
-    mount(
-      <Paragraph variant={'normal'} fontSize={'72'}>
-        hello
-      </Paragraph>
-    )
-  ).toMatchSnapshot();
-});
-it('renders the Paragraph with variant=normal, fontSize=72 and fontWeight="regular', () => {
-  expect(
-    mount(
-      <Paragraph variant={'normal'} fontSize={'72'} fontWeight="regular">
-        hello
-      </Paragraph>
-    )
-  ).toMatchSnapshot();
-});
-it('renders the Paragraph with variant=normal, fontSize=72 and fontWeight="bold', () => {
-  expect(
-    mount(
-      <Paragraph variant={'normal'} fontSize={'72'} fontWeight="bold">
-        hello
-      </Paragraph>
-    )
-  ).toMatchSnapshot();
-});

package/src/Paragraph/index.tsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import Base, { BaseProps } from '@digigov/react-core/Base';
-import clsx from 'clsx';
-
-export interface ParagraphProps extends BaseProps<'p'> {
-  /**
-   * variant is optional.
-   * Use 'lead' when a lead paragraph is an introductory paragraph that you can use at the top of a page to summarise the content.
-   * The majority of your body should use the standard 'normal' variant. This is the default value.
-   * You can use the 'small' sparingly to make your paragraph font size smaller: 16px on larger screens and 14px on smaller screens.
-   */
-  variant?: 'lead' | 'normal' | 'small';
-
-  /**
-   * 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';
-}
-/**
- * Paragraph component is used for text formatting.
- */
-export const Paragraph = React.forwardRef<HTMLParagraphElement, ParagraphProps>(
-  function Paragraph(
-    { variant = 'normal', fontSize, fontWeight, className, children, ...props },
-    ref
-  ) {
-    return (
-      <Base
-        as="p"
-        ref={ref}
-        className={clsx(className, {
-          'govgr-body': true,
-          'govgr-body-l': variant === 'lead',
-          'govgr-body-s': variant === 'small',
-          '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 default Paragraph;

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

@@ -1,31 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders the PhaseBanner with no props 1`] = `
-<ForwardRef(PhaseBanner)>
-  <div
-    className="govgr-phase-banner"
-  >
-    <p
-      className="govgr-phase-banner__content"
-    >
-      hello
-    </p>
-  </div>
-</ForwardRef(PhaseBanner)>
-`;
-
-exports[`renders the PhaseBanner with underline prop 1`] = `
-<ForwardRef(PhaseBanner)
-  underline={true}
->
-  <div
-    className="govgr-phase-banner__underline govgr-phase-banner"
-  >
-    <p
-      className="govgr-phase-banner__content"
-    >
-      hello
-    </p>
-  </div>
-</ForwardRef(PhaseBanner)>
-`;

package/src/PhaseBanner/index.test.tsx

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

package/src/PhaseBanner/index.tsx

@@ -1,43 +0,0 @@
-import React from 'react';
-import Base, { BaseProps } from '@digigov/react-core/Base';
-import clsx from 'clsx';
-
-export interface PhaseBannerProps extends BaseProps<'div'> {
-  /**
-   * underline is optional.
-   * Use this prop when you want to underline the phase banner.
-   */
-  underline?: boolean;
-}
-/**
- * PhaseBanner is a component used to show the phase of a service.
- * This component will replace ServiceBadge.
- */
-export const PhaseBanner = React.forwardRef<HTMLDivElement, PhaseBannerProps>(
-  function PhaseBanner(
-    { className, underline = false, children, ...props },
-    ref
-  ) {
-    return (
-      <Base
-        as="div"
-        ref={ref}
-        className={clsx(className, {
-          'govgr-phase-banner': true,
-          'govgr-phase-banner__underline': underline,
-        })}
-        {...props}
-      >
-        <p
-          className={clsx({
-            'govgr-phase-banner__content': true,
-          })}
-        >
-          {children}
-        </p>
-      </Base>
-    );
-  }
-);
-
-export default PhaseBanner;

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

@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders the PhaseBannerHeaderContainer with no props 1`] = `
-<ForwardRef(PhaseBannerHeaderContainer)>
-  <div
-    className="govgr-phase-banner_header"
-  >
-    hello
-  </div>
-</ForwardRef(PhaseBannerHeaderContainer)>
-`;

package/src/PhaseBannerHeaderContainer/inde.test.tsx

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

package/src/PhaseBannerHeaderContainer/index.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-import Base, { BaseProps } from '@digigov/react-core/Base';
-import clsx from 'clsx';
-
-export interface PhaseBannerHeaderContainerProps extends BaseProps<'div'> {
-  tag?: string;
-  text?: string;
-}
-
-export const PhaseBannerHeaderContainer = React.forwardRef<
-  HTMLDivElement,
-  PhaseBannerHeaderContainerProps
->(function PhaseBannerHeaderContainer({ children, ...props }, ref) {
-  return (
-    <Base
-      as="div"
-      ref={ref}
-      {...props}
-      className={clsx({
-        'govgr-phase-banner_header': true,
-      })}
-    >
-      {children}
-    </Base>
-  );
-});
-
-export default PhaseBannerHeaderContainer;

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

@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders the PhaseBannerTag with no props 1`] = `
-<ForwardRef(PhaseBannerTag)>
-  <strong
-    className="govgr-tag govgr-phase-banner__content__tag"
-  >
-    hello
-  </strong>
-</ForwardRef(PhaseBannerTag)>
-`;

package/src/PhaseBannerTag/index.test.tsx

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

package/src/PhaseBannerTag/index.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-import Base, { BaseProps } from '@digigov/react-core/Base';
-import clsx from 'clsx';
-
-export interface PhaseBannerTagProps extends BaseProps<'strong'> {}
-/**
- * PhaseBannerTag is used inside the PhaseBanner component and it requires a text of the phase of the service (ex. Alpha, Beta).
- */
-export const PhaseBannerTag = React.forwardRef<
-  HTMLElement,
-  PhaseBannerTagProps
->(function PhaseBannerTag({ className, children, ...props }, ref) {
-  return (
-    <Base
-      as="strong"
-      ref={ref}
-      className={clsx(className, {
-        'govgr-tag': true,
-        'govgr-phase-banner__content__tag': true,
-      })}
-      {...props}
-    >
-      {children}
-    </Base>
-  );
-});
-
-export default PhaseBannerTag;

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

@@ -1,11 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`renders the PhaseBannerText with no props 1`] = `
-<ForwardRef(PhaseBannerText)>
-  <span
-    className="govgr-phase-banner__text"
-  >
-    hello
-  </span>
-</ForwardRef(PhaseBannerText)>
-`;

package/src/PhaseBannerText/index.test.tsx

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

package/src/PhaseBannerText/index.tsx

@@ -1,29 +0,0 @@
-import React from 'react';
-import Base, { BaseProps } from '@digigov/react-core/Base';
-import clsx from 'clsx';
-
-export interface PhaseBannerTextProps extends BaseProps<'span'> {}
-/**
- * PhaseBannerText is used inside the PhaseBanner component.
- * It requires a text with more details about the phase of the service (ex. "This is a new service").
- * This components is optional
- */
-export const PhaseBannerText = React.forwardRef<
-  HTMLSpanElement,
-  PhaseBannerTextProps
->(function PhaseBannerText({ className, children, ...props }, ref) {
-  return (
-    <Base
-      as="span"
-      ref={ref}
-      className={clsx(className, {
-        'govgr-phase-banner__text': true,
-      })}
-      {...props}
-    >
-      {children}
-    </Base>
-  );
-});
-
-export default PhaseBannerText;

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

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

package/src/Radio/index.test.tsx

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

package/src/Radio/index.tsx

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