@digigov/react-core 0.18.1 → 0.19.0

package/src/Paragraph/index.test.tsx

@@ -0,0 +1,331 @@
+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

@@ -0,0 +1,61 @@
+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

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

package/src/PhaseBanner/index.test.tsx

@@ -0,0 +1,12 @@
+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

@@ -0,0 +1,43 @@
+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

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

package/src/PhaseBannerHeaderContainer/inde.test.tsx

@@ -0,0 +1,10 @@
+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

@@ -0,0 +1,28 @@
+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

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

package/src/PhaseBannerTag/index.test.tsx

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,28 @@
+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

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

package/src/PhaseBannerText/index.test.tsx

@@ -0,0 +1,8 @@
+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

@@ -0,0 +1,29 @@
+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/RadioConditional/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the Blockquote with no props 1`] = `
+<ForwardRef(RadioConditional)>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-radios__conditional"
+  >
+    <div
+      className="govgr-radios__conditional"
+    >
+      <div
+        className="govgr-field"
+      >
+        <label
+          className="govgr-label"
+        >
+          hello
+        </label>
+      </div>
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(RadioConditional)>
+`;

package/src/RadioConditional/index.test.tsx

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