@digigov/react-core 0.18.1 → 0.19.1

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

@@ -0,0 +1,35 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the FooterLink with href prop 1`] = `
+<ForwardRef(FooterLink)
+  href="#"
+>
+  <ForwardRef(Base)
+    as="a"
+    className="govgr-footer__link"
+    href="#"
+  >
+    <a
+      className="govgr-footer__link"
+      href="#"
+    >
+      hello
+    </a>
+  </ForwardRef(Base)>
+</ForwardRef(FooterLink)>
+`;
+
+exports[`renders the FooterLink with no props 1`] = `
+<ForwardRef(FooterLink)>
+  <ForwardRef(Base)
+    as="a"
+    className="govgr-footer__link"
+  >
+    <a
+      className="govgr-footer__link"
+    >
+      hello
+    </a>
+  </ForwardRef(Base)>
+</ForwardRef(FooterLink)>
+`;

package/src/FooterLink/index.test.tsx

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

package/src/FooterLink/index.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface FooterLinkProps extends BaseProps<'a'> {
+  /**
+   * href is optional.
+   */
+  href?: string;
+}
+/**
+ * FooterLink in used inside the Footer component.
+ */
+export const FooterLink = React.forwardRef<HTMLAnchorElement, FooterLinkProps>(
+  function FooterLink({ href, className, children, ...props }, ref) {
+    return (
+      <Base
+        as="a"
+        href={href}
+        ref={ref}
+        className={clsx(className, {
+          'govgr-footer__link': true,
+        })}
+        {...props}
+      >
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default FooterLink;

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

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the FooterList with columns=2 1`] = `
+<ForwardRef(FooterList)
+  columns={2}
+>
+  <ForwardRef(Base)
+    as="ul"
+    className="govgr-footer__list--columns-2 govgr-footer__list"
+  >
+    <ul
+      className="govgr-footer__list--columns-2 govgr-footer__list"
+    >
+      hello
+    </ul>
+  </ForwardRef(Base)>
+</ForwardRef(FooterList)>
+`;
+
+exports[`renders the FooterList with no props 1`] = `
+<ForwardRef(FooterList)>
+  <ForwardRef(Base)
+    as="ul"
+    className="govgr-footer__list"
+  >
+    <ul
+      className="govgr-footer__list"
+    >
+      hello
+    </ul>
+  </ForwardRef(Base)>
+</ForwardRef(FooterList)>
+`;

package/src/FooterList/index.test.tsx

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

package/src/FooterList/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface FooterListProps extends BaseProps<'ul'> {
+  /**
+   * columns is optional.
+   * The values for this are 1 and 2. The default value is 1.
+   */
+  columns?: number;
+}
+/**
+ * FooterList is used inside the FooterSection.
+ * This component takes a list of FooterListItem component as its children.
+ */
+export const FooterList = React.forwardRef<HTMLUListElement, FooterListProps>(
+  function FooterList({ columns, className, children, ...props }, ref) {
+    return (
+      <Base
+        as="ul"
+        ref={ref}
+        className={clsx(className, {
+          'govgr-footer__list': true,
+          'govgr-footer__list--columns-2': columns === 2,
+        })}
+        {...props}
+      >
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default FooterList;

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

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

package/src/FooterListItem/index.test.tsx

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

package/src/FooterListItem/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface FooterListItemProps extends BaseProps<'li'> {}
+/**
+ * FooterListItem must be inside the FooterList component.
+ * This component has no props.
+ */
+export const FooterListItem = React.forwardRef<
+  HTMLLIElement,
+  FooterListItemProps
+>(function FooterListItem({ className, children, ...props }, ref) {
+  return (
+    <Base
+      as="li"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-footer__list-item': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default FooterListItem;

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

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

package/src/FooterMeta/index.test.tsx

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

package/src/FooterMeta/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface FooterMetaProps extends BaseProps<'div'> {}
+/**
+ * FooterMeta is inside the FooterContainer component.
+ * This component is meant to wrap FooterMetaItem components.
+ * Semantically, in this component we include the very basic elements of a govgr footer.
+ */
+export const FooterMeta = React.forwardRef<HTMLDivElement, FooterMetaProps>(
+  function FooterMeta({ className, children, ...props }, ref) {
+    return (
+      <Base
+        as="div"
+        ref={ref}
+        className={clsx(className, {
+          'govgr-footer__meta': true,
+        })}
+        {...props}
+      >
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default FooterMeta;

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

@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the FooterMetaItem with grow=false 1`] = `
+<ForwardRef(FooterMetaItem)
+  grow={false}
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-footer__meta-item"
+  >
+    <div
+      className="govgr-footer__meta-item"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(FooterMetaItem)>
+`;
+
+exports[`renders the FooterMetaItem with grow=true 1`] = `
+<ForwardRef(FooterMetaItem)
+  grow={true}
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-footer__meta-item--grow govgr-footer__meta-item"
+  >
+    <div
+      className="govgr-footer__meta-item--grow govgr-footer__meta-item"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(FooterMetaItem)>
+`;
+
+exports[`renders the FooterMetaItem with no props 1`] = `
+<ForwardRef(FooterMetaItem)>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-footer__meta-item"
+  >
+    <div
+      className="govgr-footer__meta-item"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(FooterMetaItem)>
+`;

package/src/FooterMetaItem/index.test.tsx

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

package/src/FooterMetaItem/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface FooterMetaItemProps extends BaseProps<'div'> {
+  /**
+   * grow is optional.
+   * Use this prop If wanted this component to have it's maxinum grow.
+   */
+  grow?: boolean;
+}
+/**
+ * FooterMetaItem is inside the FooterMeta component.
+ */
+export const FooterMetaItem = React.forwardRef<
+  HTMLDivElement,
+  FooterMetaItemProps
+>(function FooterMetaItem({ grow, className, children, ...props }, ref) {
+  return (
+    <Base
+      as="div"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-footer__meta-item': true,
+        'govgr-footer__meta-item--grow': grow === true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default FooterMetaItem;

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

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

package/src/FooterNavigation/index.test.tsx

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

package/src/FooterNavigation/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface FooterNavigationProps extends BaseProps<'div'> {}
+/**
+ * FooterNavigation is optional. This components must be included in the FooterContainer.
+ * Inside this component we place one or more of the component FooterSection.
+ * This component has no props.
+ */
+export const FooterNavigation = React.forwardRef<
+  HTMLDivElement,
+  FooterNavigationProps
+>(function FooterNavigation({ className, children, ...props }, ref) {
+  return (
+    <Base
+      as="div"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-footer__navigation': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default FooterNavigation;

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

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

package/src/FooterSection/index.test.tsx

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

package/src/FooterSection/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface FooterSectionProps extends BaseProps<'div'> {}
+/**
+ * FooterSection must be inside the FooterNavigation.
+ * Inside this component should be placed the FooterHeading (optional) and the FooterList.
+ * This component has no props.
+ */
+export const FooterSection = React.forwardRef<
+  HTMLDivElement,
+  FooterSectionProps
+>(function FooterSection({ className, children, ...props }, ref) {
+  return (
+    <Base
+      as="div"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-footer__section': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default FooterSection;

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

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the Form with grid props 1`] = `
+<ForwardRef(Form)
+  grid={true}
+>
+  <ForwardRef(Base)
+    as="form"
+    className="govgr-form govgr-grid"
+  >
+    <form
+      className="govgr-form govgr-grid"
+    >
+      hello
+    </form>
+  </ForwardRef(Base)>
+</ForwardRef(Form)>
+`;
+
+exports[`renders the Form with no props 1`] = `
+<ForwardRef(Form)>
+  <ForwardRef(Base)
+    as="form"
+    className="govgr-form"
+  >
+    <form
+      className="govgr-form"
+    >
+      hello
+    </form>
+  </ForwardRef(Base)>
+</ForwardRef(Form)>
+`;

package/src/Form/index.test.tsx

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

package/src/Form/index.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface FormProps extends BaseProps<'form'> {
+  grid?: boolean;
+}
+/**
+ * Use this inside the Content component for additional content
+ * that will be shown on the left one third of the page
+ */
+export const Form = React.forwardRef<HTMLFormElement, FormProps>(function Form(
+  { className, children, grid = false, ...props },
+  ref
+) {
+  return (
+    <Base
+      as="form"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-form': true,
+        'govgr-grid': grid,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default Form;