@digigov/react-core 0.18.1 → 0.19.0

package/src/NormalText/index.test.tsx

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

package/src/NormalText/index.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface NormalTextProps extends BaseProps<'span'> {
+  /**
+   * variant is optional.
+   * Use 'lead' when a lead text 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 text font size smaller: 16px on larger screens and 14px on smaller screens.
+   */
+  variant?: 'lead' | 'normal' | 'small';
+
+  /**
+   * fontSize is optional.
+   * 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';
+}
+/**
+ * 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 = 'normal', fontSize, fontWeight, className, children, ...props },
+    ref
+  ) {
+    return (
+      <Base
+        as="span"
+        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 NormalText;

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

@@ -0,0 +1,68 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the NotificationBannerContainer with no props 1`] = `
+<ForwardRef(NotificationBannerContainer)>
+  <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=false 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}
+>
+  <ForwardRef(Base)
+    aria-labelledby="govgr-notification-banner-title"
+    as="div"
+    className="govgr-notification-banner--success govgr-notification-banner"
+    data-module="govgr-notification-banner"
+    role="region"
+  >
+    <div
+      aria-labelledby="govgr-notification-banner-title"
+      className="govgr-notification-banner--success govgr-notification-banner"
+      data-module="govgr-notification-banner"
+      role="region"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(NotificationBannerContainer)>
+`;

package/src/NotificationBannerContainer/index.test.tsx

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

package/src/NotificationBannerContainer/index.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface NotificationBannerContainerProps extends BaseProps<'div'> {
+  /**
+   * success is optional.
+   */
+  success?: boolean;
+}
+/**
+ * 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 wraps NotificationBannerContainerHeader, NotificationBannerContainerContent,NotificationBannerContainerHeading
+ * and NotificationBannerContainerLink components as children
+ */
+export const NotificationBannerContainer = React.forwardRef<
+  HTMLDivElement,
+  NotificationBannerContainerProps
+>(function NotificationBannerContainer(
+  { success, className, children, ...props },
+  ref
+) {
+  return (
+    <Base
+      as="div"
+      role="region"
+      aria-labelledby="govgr-notification-banner-title"
+      data-module="govgr-notification-banner"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-notification-banner': true,
+        'govgr-notification-banner--success': success === true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default NotificationBannerContainer;

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

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

package/src/NotificationBannerContent/index.test.tsx

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

package/src/NotificationBannerContent/index.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface NotificationBannerContentProps extends BaseProps<'div'> {}
+/**
+ * Details for the NotificationBannerContent.
+ * NotificationBannerContent component is used as a content for
+ * NotificationBannerHeading and NotificationBannerLink components.
+ * NotificationBannerContent component must be used inside NotificationBanner component as children.
+ */
+export const NotificationBannerContent = React.forwardRef<
+  HTMLDivElement,
+  NotificationBannerContentProps
+>(function NotificationBannerContent({ className, children, ...props }, ref) {
+  return (
+    <Base
+      as="div"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-notification-banner__content': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default NotificationBannerContent;

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

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the NotificationBannerHeader with no props 1`] = `
+<ForwardRef(NotificationBannerHeader)>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-notification-banner__header"
+  >
+    <div
+      className="govgr-notification-banner__header"
+    >
+      <h2
+        className="govgr-notification-banner__title"
+      >
+        hello
+      </h2>
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(NotificationBannerHeader)>
+`;

package/src/NotificationBannerHeader/index.test.tsx

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

package/src/NotificationBannerHeader/index.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface NotificationBannerHeaderProps extends BaseProps<'div'> {}
+/**
+ * Details for the NotificationBannerHeader.
+ * NotificationBannerHeader component is used for placing head title to NotificationBanner component.
+ * NotificationBannerHeader component must be used inside NotificationBanner as children.
+ */
+export const NotificationBannerHeader = React.forwardRef<
+  HTMLDivElement,
+  NotificationBannerHeaderProps
+>(function NotificationBannerHeader({ className, children, ...props }, ref) {
+  return (
+    <Base
+      as="div"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-notification-banner__header': true,
+      })}
+      {...props}
+    >
+      <h2
+        className={clsx({
+          'govgr-notification-banner__title': true,
+        })}
+      >
+        {children}
+      </h2>
+    </Base>
+  );
+});
+
+export default NotificationBannerHeader;

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

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