@digigov/react-core 0.18.1 → 0.19.1

package/src/FileUpload/index.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface FileUploadProps extends BaseProps<'input'> {
+  /**
+   * name is optional.
+   */
+  name?: string;
+  /**
+   * disabled is optional.
+   */
+  disabled?: boolean;
+  /**
+   * hasFiles is optional.
+   */
+  hasFiles?: boolean;
+}
+/**
+ * Details for the FileUpload.
+ * FileUpload component is used for uploading files
+ */
+export const FileUpload = React.forwardRef<HTMLInputElement, FileUploadProps>(
+  function FileUpload({ name, className, children, disabled, hasFiles = false, ...props }, ref) {
+    return (
+      <Base
+        as="label"  
+        tabIndex={0}
+        role="button"
+        className={clsx(className, {
+          'govgr-label-file': true,
+          'govgr-btn': !hasFiles,
+          'govgr-btn-secondary': !hasFiles,
+          'govgr-link': hasFiles,
+        })}
+      >
+        <Base
+          as="input"
+          ref={ref}
+          type="file"
+          name={name}
+          disabled={disabled}
+          className={clsx({
+            'govgr-file-input': true,
+          })}
+          {...props}
+          />
+          {children}
+      </Base>
+    );
+  }
+);
+
+export default FileUpload;

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

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the FileUpload with hasUploadedFile prop 1`] = `
+<ForwardRef(FileUploadContainer)
+  hasUploadedFile={true}
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-uploaded-file"
+  >
+    <div
+      className="govgr-uploaded-file"
+    />
+  </ForwardRef(Base)>
+</ForwardRef(FileUploadContainer)>
+`;
+
+exports[`renders the FileUpload with no props 1`] = `
+<ForwardRef(FileUploadContainer)>
+  <ForwardRef(Base)
+    as="div"
+    className=""
+  >
+    <div
+      className=""
+    />
+  </ForwardRef(Base)>
+</ForwardRef(FileUploadContainer)>
+`;

package/src/FileUploadContainer/index.test.tsx

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

package/src/FileUploadContainer/index.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface FileUploadContainerProps extends BaseProps<'div'> {
+  /**
+   * hasFiles is optional.
+   */
+  hasUploadedFile?: boolean;
+}
+/**
+ * Details for the FileUploadContainer.
+ * FileUploadContainer component is used for wrapping the FileUpload component
+ */
+export const FileUploadContainer = React.forwardRef<
+  HTMLDivElement,
+  FileUploadContainerProps
+>(function FileUploadContainer(
+  { className, children, hasUploadedFile = false, ...props },
+  ref
+) {
+  return (
+    <Base
+      ref={ref}
+      as="div"
+      className={clsx(className, {
+        'govgr-uploaded-file': hasUploadedFile,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default FileUploadContainer;

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

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

package/src/Footer/index.test.tsx

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

package/src/Footer/index.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface FooterProps extends BaseProps<'footer'> {}
+/**
+ * Footer is used always at the end of the page, in the Layout component.
+ */
+export const Footer = React.forwardRef<HTMLElement, FooterProps>(
+  function Footer({ className, children, ...props }, ref) {
+    return (
+      <Base
+        as="footer"
+        ref={ref}
+        className={clsx(className, {
+          'govgr-footer': true,
+        })}
+        {...props}
+      >
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default Footer;

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

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

package/src/FooterContainer/index.test.tsx

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

package/src/FooterContainer/index.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface FooterContainerProps extends BaseProps<'div'> {
+  /**
+   * fullWidth is optional.
+   * fullWidth property is used to give full width to FooterContainer compoment.
+   * fullWidth property places the footer elements at the edges of the container.
+   * default value is false.
+   */
+  fullWidth?: boolean;
+}
+/**
+ * FooterContainer mush be used inside the Footer component. It has no props.
+ */
+export const FooterContainer = React.forwardRef<
+  HTMLDivElement,
+  FooterContainerProps
+>(function FooterContainer(
+  { className, fullWidth = false, children, ...props },
+  ref
+) {
+  return (
+    <Base
+      as="div"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-width-container': fullWidth === false,
+        'govgr-full-width-container': fullWidth === true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default FooterContainer;

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

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

package/src/FooterContent/index.test.tsx

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

package/src/FooterContent/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface FooterContentProps extends BaseProps<'div'> {}
+/**
+ * FooterContent is used inside the FooterMetaItem.
+ * In this component, we place the basic content of the footer (ex. Copyright, extra logos, inline list).
+ */
+export const FooterContent = React.forwardRef<
+  HTMLDivElement,
+  FooterContentProps
+>(function FooterContent({ className, children, ...props }, ref) {
+  return (
+    <Base
+      as="div"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-footer__content': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default FooterContent;

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

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

package/src/FooterContentLogos/index.test.tsx

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

package/src/FooterContentLogos/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface FooterContentLogosProps extends BaseProps<'div'> {}
+/**
+ * FooterContentLogos is placed in the footer, inside the FooterContent ccomponent, above the Copyright.
+ * It is a wrapper for extra logos.
+ * It has no props.
+ */
+export const FooterContentLogos = React.forwardRef<
+  HTMLDivElement,
+  FooterContentLogosProps
+>(function FooterContentLogos({ className, children, ...props }, ref) {
+  return (
+    <Base
+      as="div"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-footer__content--logos': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default FooterContentLogos;

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

@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the FooterHeading with no props 1`] = `
+<ForwardRef(FooterHeading)>
+  <ForwardRef(Base)
+    as="h2"
+    className="govgr-heading-s govgr-footer__heading"
+  >
+    <h2
+      className="govgr-heading-s govgr-footer__heading"
+    >
+      hello
+    </h2>
+  </ForwardRef(Base)>
+</ForwardRef(FooterHeading)>
+`;
+
+exports[`renders the FooterHeading with size=m 1`] = `
+<ForwardRef(FooterHeading)
+  size="m"
+>
+  <ForwardRef(Base)
+    as="h2"
+    className="govgr-heading-m govgr-footer__heading"
+  >
+    <h2
+      className="govgr-heading-m govgr-footer__heading"
+    >
+      hello
+    </h2>
+  </ForwardRef(Base)>
+</ForwardRef(FooterHeading)>
+`;
+
+exports[`renders the FooterHeading with size=s 1`] = `
+<ForwardRef(FooterHeading)
+  size="s"
+>
+  <ForwardRef(Base)
+    as="h2"
+    className="govgr-heading-s govgr-footer__heading"
+  >
+    <h2
+      className="govgr-heading-s govgr-footer__heading"
+    >
+      hello
+    </h2>
+  </ForwardRef(Base)>
+</ForwardRef(FooterHeading)>
+`;

package/src/FooterHeading/index.test.tsx

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

package/src/FooterHeading/index.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface FooterHeadingProps extends BaseProps<'h2'> {
+  /**
+   * size is optional.
+   * The values are: 'm' for medium, 's' for small.
+   * The default value is 's'.
+   */
+  size?: 'm' | 's';
+}
+/**
+ * FooterHeading is a component used for heading in the footer.
+ */
+export const FooterHeading = React.forwardRef<
+  HTMLHeadingElement,
+  FooterHeadingProps
+>(function FooterHeading({ size = 's', className, children, ...props }, ref) {
+  return (
+    <Base
+      as="h2"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-footer__heading': true,
+        'govgr-heading-m': size === 'm',
+        'govgr-heading-s': size === 's',
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default FooterHeading;

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

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the FooterImage with no props 1`] = `
+<ForwardRef(FooterImage)>
+  <ForwardRef(Base)
+    alt="footer logo"
+    as="img"
+    className="govgr-footer__logo"
+  >
+    <img
+      alt="footer logo"
+      className="govgr-footer__logo"
+    />
+  </ForwardRef(Base)>
+</ForwardRef(FooterImage)>
+`;

package/src/FooterImage/index.test.tsx

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

package/src/FooterImage/index.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface FooterImageProps extends BaseProps<'img'> {
+  /**
+   * altText is optional.
+   */
+  alt?: string;
+}
+/**
+ * FooterImage is a component for logos and images in the footer.
+ * It is used inside to FooterContentLogos.
+ *
+ */
+export const FooterImage = React.forwardRef<HTMLImageElement, FooterImageProps>(
+  function FooterImage(
+    { className, children, alt = 'footer logo', ...props },
+    ref
+  ) {
+    return (
+      <Base
+        as="img"
+        ref={ref}
+        className={clsx(className, {
+          'govgr-footer__logo': true,
+        })}
+        {...props}
+        alt={alt}
+      >
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default FooterImage;

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

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

package/src/FooterInlineList/index.test.tsx

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

package/src/FooterInlineList/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface FooterInlineListProps extends BaseProps<'ul'> {}
+/**
+ * FooterInlineList is a component for an inline list in the footer.
+ * It must be inside the FooterContent component.
+ * This is a wrapper for a list of FooterInlineListItem.
+ */
+export const FooterInlineList = React.forwardRef<
+  HTMLUListElement,
+  FooterInlineListProps
+>(function FooterInlineList({ className, children, ...props }, ref) {
+  return (
+    <Base
+      as="ul"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-footer__inline-list': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default FooterInlineList;

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

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

package/src/FooterInlineListItem/index.test.tsx

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

package/src/FooterInlineListItem/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface FooterInlineListItemProps extends BaseProps<'li'> {}
+/**
+ * Details for the FooterInlineListItem.
+ */
+export const FooterInlineListItem = React.forwardRef<
+  HTMLLIElement,
+  FooterInlineListItemProps
+>(function FooterInlineListItem({ className, children, ...props }, ref) {
+  return (
+    <Base
+      as="li"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-footer__inline-list-item': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default FooterInlineListItem;