@digigov/react-core 0.18.1 → 0.19.0

package/src/ButtonLink/index.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface ButtonLinkProps extends BaseProps<'a'> {
+  /**
+   * color is optional.
+   * 'primary' color is used for the main call to action on a page.
+   * 'secondary' color is used for secondary calls to action on a page.
+   * 'warning' color is used to make users think carefully before they use them.
+   * The default value is 'primary'.
+   */
+  color?: 'primary' | 'secondary' | 'warning';
+}
+/**
+ * Use the Button component to help users carry out an action.
+ */
+export const ButtonLink = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
+  function ButtonLink(
+    { color = 'primary', className, children, ...props },
+    ref
+  ) {
+    return (
+      <Base
+        as="a"
+        ref={ref}
+        className={clsx(className, {
+          'govgr-btn': true,
+          'govgr-btn-primary': color === 'primary',
+          'govgr-btn-secondary': color === 'secondary',
+          'govgr-btn-warning': color === 'warning',
+        })}
+        {...props}
+      >
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default ButtonLink;

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

@@ -0,0 +1,46 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the CallToAction with no props 1`] = `
+<ForwardRef(CallToAction)>
+  <ForwardRef(ButtonLink)
+    className="govgr-btn-cta"
+    printHidden={true}
+  >
+    <ForwardRef(Base)
+      as="a"
+      className="govgr-btn-cta govgr-btn-primary govgr-btn"
+      printHidden={true}
+    >
+      <a
+        className="govgr-btn-cta govgr-btn-primary govgr-btn govgr-print-hidden"
+      >
+        hello
+        <ForwardRef(ArrowIcon)>
+          <ForwardRef(SvgIcon)
+            className="govgr-arrow--right"
+          >
+            <ForwardRef(Base)
+              aria-hidden="true"
+              as="svg"
+              className="govgr-arrow--right govgr-svg-icon"
+              focusable="false"
+              viewBox="0 0 24 24"
+            >
+              <svg
+                aria-hidden="true"
+                className="govgr-arrow--right govgr-svg-icon"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <path
+                  d="M8.5,2L6.1,4.3l7.6,7.7l-7.6,7.6L8.5,22l10-10L8.5,2z"
+                />
+              </svg>
+            </ForwardRef(Base)>
+          </ForwardRef(SvgIcon)>
+        </ForwardRef(ArrowIcon)>
+      </a>
+    </ForwardRef(Base)>
+  </ForwardRef(ButtonLink)>
+</ForwardRef(CallToAction)>
+`;

package/src/CallToAction/index.test.tsx

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

package/src/CallToAction/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import clsx from 'clsx';
+import ButtonLink, { ButtonLinkProps } from '@digigov/react-core/ButtonLink';
+import ArrowIcon from '@digigov/react-core/ArrowIcon';
+
+export interface CallToActionProps extends ButtonLinkProps {
+  ref?: React.Ref<HTMLAnchorElement>;
+}
+/**
+ * Use this button for the main call to action on your service’s start page.
+ */
+export const CallToAction = React.forwardRef<
+  HTMLAnchorElement,
+  CallToActionProps
+>(function CallToAction({ printHidden = true, className, children, ...props }, ref) {
+  return (
+    <ButtonLink
+      ref={ref}
+      printHidden={printHidden}
+      className={clsx(className, {
+        'govgr-btn-cta': true,
+      })}
+      {...props}
+    >
+      {children}
+      <ArrowIcon />
+    </ButtonLink>
+  );
+});
+
+export default CallToAction;

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

@@ -0,0 +1,215 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the Card with callToActon props 1`] = `
+<ForwardRef(Card)
+  callToAction={true}
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-card--cta govgr-card"
+  >
+    <div
+      className="govgr-card--cta govgr-card"
+    >
+      <div
+        className="govgr-card__body"
+      >
+        hello
+      </div>
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Card)>
+`;
+
+exports[`renders the Card with no props 1`] = `
+<ForwardRef(Card)>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-card"
+  >
+    <div
+      className="govgr-card"
+    >
+      <div
+        className="govgr-card__body"
+      >
+        hello
+      </div>
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Card)>
+`;
+
+exports[`renders the Card with variant="border" and borderColor="dark" props 1`] = `
+<ForwardRef(Card)
+  borderColor="dark"
+  variant="border"
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-card--border-dark govgr-card--border govgr-card"
+  >
+    <div
+      className="govgr-card--border-dark govgr-card--border govgr-card"
+    >
+      <div
+        className="govgr-card__body"
+      >
+        hello
+      </div>
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Card)>
+`;
+
+exports[`renders the Card with variant="border" and borderColor="gray" props 1`] = `
+<ForwardRef(Card)
+  borderColor="gray"
+  variant="border"
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-card--border-gray govgr-card--border govgr-card"
+  >
+    <div
+      className="govgr-card--border-gray govgr-card--border govgr-card"
+    >
+      <div
+        className="govgr-card__body"
+      >
+        hello
+      </div>
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Card)>
+`;
+
+exports[`renders the Card with variant="border" props 1`] = `
+<ForwardRef(Card)
+  variant="border"
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-card--border govgr-card"
+  >
+    <div
+      className="govgr-card--border govgr-card"
+    >
+      <div
+        className="govgr-card__body"
+      >
+        hello
+      </div>
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Card)>
+`;
+
+exports[`renders the Card with variant="border-top" and borderColor="dark" callToAction props 1`] = `
+<ForwardRef(Card)
+  borderColor="dark"
+  callToAction={true}
+  variant="border-top"
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-card--border-top govgr-card--border-dark govgr-card--cta govgr-card"
+  >
+    <div
+      className="govgr-card--border-top govgr-card--border-dark govgr-card--cta govgr-card"
+    >
+      <div
+        className="govgr-card__body"
+      >
+        hello
+      </div>
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Card)>
+`;
+
+exports[`renders the Card with variant="border-top" and borderColor="dark" props 1`] = `
+<ForwardRef(Card)
+  borderColor="dark"
+  variant="border-top"
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-card--border-top govgr-card--border-dark govgr-card"
+  >
+    <div
+      className="govgr-card--border-top govgr-card--border-dark govgr-card"
+    >
+      <div
+        className="govgr-card__body"
+      >
+        hello
+      </div>
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Card)>
+`;
+
+exports[`renders the Card with variant="border-top" and borderColor="gray" props 1`] = `
+<ForwardRef(Card)
+  borderColor="gray"
+  variant="border-top"
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-card--border-top govgr-card--border-gray govgr-card"
+  >
+    <div
+      className="govgr-card--border-top govgr-card--border-gray govgr-card"
+    >
+      <div
+        className="govgr-card__body"
+      >
+        hello
+      </div>
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Card)>
+`;
+
+exports[`renders the Card with variant="border-top" props 1`] = `
+<ForwardRef(Card)
+  variant="border-top"
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-card--border-top govgr-card"
+  >
+    <div
+      className="govgr-card--border-top govgr-card"
+    >
+      <div
+        className="govgr-card__body"
+      >
+        hello
+      </div>
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Card)>
+`;
+
+exports[`renders the Card with variant="divider" props 1`] = `
+<ForwardRef(Card)
+  variant="divider"
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-card--divider govgr-card"
+  >
+    <div
+      className="govgr-card--divider govgr-card"
+    >
+      <div
+        className="govgr-card__body"
+      >
+        hello
+      </div>
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Card)>
+`;

package/src/Card/index.test.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import Card from '@digigov/react-core/Card';
+
+it('renders the Card with no props', () => {
+  expect(mount(<Card>hello</Card>)).toMatchSnapshot();
+});
+
+it('renders the Card with callToActon props', () => {
+  expect(mount(<Card callToAction>hello</Card>)).toMatchSnapshot();
+});
+it('renders the Card with variant="border" props', () => {
+  expect(mount(<Card variant="border">hello</Card>)).toMatchSnapshot();
+});
+it('renders the Card with variant="divider" props', () => {
+  expect(mount(<Card variant="divider">hello</Card>)).toMatchSnapshot();
+});
+it('renders the Card with variant="border-top" props', () => {
+  expect(mount(<Card variant="border-top">hello</Card>)).toMatchSnapshot();
+});
+it('renders the Card with variant="border" and borderColor="dark" props', () => {
+  expect(
+    mount(
+      <Card variant="border" borderColor="dark">
+        hello
+      </Card>
+    )
+  ).toMatchSnapshot();
+});
+it('renders the Card with variant="border" and borderColor="gray" props', () => {
+  expect(
+    mount(
+      <Card variant="border" borderColor="gray">
+        hello
+      </Card>
+    )
+  ).toMatchSnapshot();
+});
+it('renders the Card with variant="border-top" and borderColor="dark" props', () => {
+  expect(
+    mount(
+      <Card variant="border-top" borderColor="dark">
+        hello
+      </Card>
+    )
+  ).toMatchSnapshot();
+});
+it('renders the Card with variant="border-top" and borderColor="gray" props', () => {
+  expect(
+    mount(
+      <Card variant="border-top" borderColor="gray">
+        hello
+      </Card>
+    )
+  ).toMatchSnapshot();
+});
+it('renders the Card with variant="border-top" and borderColor="dark" callToAction props', () => {
+  expect(
+    mount(
+      <Card variant="border-top" borderColor="dark" callToAction>
+        hello
+      </Card>
+    )
+  ).toMatchSnapshot();
+});

package/src/Card/index.tsx

@@ -0,0 +1,62 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface CardProps extends BaseProps<'div'> {
+  /**
+   * By default, we recommend using Cards without border style. Card border increases the contrast to its background.
+   * divider
+   * `variant` property is optional.
+   */
+  variant?: 'border' | 'divider' | 'border-top';
+
+  /**
+   *borderColor property is optional and it is used to set the color of the Card's border.
+   *
+   *
+   */
+  borderColor?: 'gray' | 'dark';
+
+  /**
+   *callToAction property is optional and it is used to set the content of the Card clickable.
+   *
+   *
+   */
+  callToAction?: boolean;
+}
+/**
+ * Cards can be used to divide and organise interface content for better understandability and readability.
+ * Cards can help your users to scan through vast amounts of information quicker.
+ * Use Card as parent component to wrap CardHeading, CardText and CartAction components
+ */
+export const Card = React.forwardRef<HTMLDivElement, CardProps>(function Card(
+  { variant, borderColor, callToAction, className, children, ...props },
+  ref
+) {
+  return (
+    <Base
+      as="div"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-card': true,
+        'govgr-card--border': variant === 'border',
+        'govgr-card--border-top': variant === 'border-top',
+        'govgr-card--divider': variant === 'divider',
+        'govgr-card--cta': callToAction,
+        'govgr-card--border-gray': borderColor === 'gray',
+        'govgr-card--border-dark': borderColor === 'dark',
+      })}
+      {...props}
+    >
+      <div
+        className={clsx({
+          'govgr-card__body': true,
+        })}
+      >
+        {children}
+      </div>
+    </Base>
+  );
+});
+
+export default Card;

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

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

package/src/CardAction/index.test.tsx

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

package/src/CardAction/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface CardActionProps extends BaseProps<'div'> {}
+/**
+ * CardAction contains the action behavior for Card Component.
+ * We can use links, Buttons or ButtonGroup with max of two buttons
+ * Use CardAction inside Card component as childern
+ */
+export const CardAction = React.forwardRef<HTMLDivElement, CardActionProps>(
+  function CardText({ className, children, ...props }, ref) {
+    return (
+      <Base
+        as="div"
+        ref={ref}
+        className={clsx(className, {
+          'govgr-card__action': true,
+        })}
+        {...props}
+      >
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default CardAction;

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

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the CardAction with no props 1`] = `
+<ForwardRef(CardHeading)>
+  <ForwardRef(Base)
+    aria-level={2}
+    as="div"
+    className="govgr-card__heading"
+    role="heading"
+  >
+    <div
+      aria-level={2}
+      className="govgr-card__heading"
+      role="heading"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(CardHeading)>
+`;

package/src/CardHeading/index.test.tsx

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

package/src/CardHeading/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface CardHeadingProps extends BaseProps<'div'> {}
+/**
+ * CardHeading gives header title to Card Component
+ * Use CardHeading inside Card component as children
+ */
+export const CardHeading = React.forwardRef<HTMLDivElement, CardHeadingProps>(
+  function CardHeading({ className, children, ...props }, ref) {
+    return (
+      <Base
+        as="div"
+        ref={ref}
+        role="heading"
+        aria-level={2}
+        className={clsx(className, {
+          'govgr-card__heading': true,
+        })}
+        {...props}
+      >
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default CardHeading;

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

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

package/src/CardText/index.test.tsx

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

package/src/CardText/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface CardTextProps extends BaseProps<'div'> {}
+/**
+ * CardText contains the text for Card Component
+ * Use CardText inside Card component as children
+ */
+export const CardText = React.forwardRef<HTMLDivElement, CardTextProps>(
+  function CardText({ className, children, ...props }, ref) {
+    return (
+      <Base
+        as="div"
+        ref={ref}
+        className={clsx(className, {
+          'govgr-card__text': true,
+        })}
+        {...props}
+      >
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default CardText;