@digigov/react-core 0.18.1 → 0.19.1

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

@@ -0,0 +1,193 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the Label with heading  and size l props 1`] = `
+<ForwardRef(LabelTitle)
+  heading={true}
+  size="l"
+>
+  <ForwardRef(Base)
+    aria-level={1}
+    as="span"
+    className="govgr-heading-l"
+    role="heading"
+  >
+    <span
+      aria-level={1}
+      className="govgr-heading-l"
+      role="heading"
+    >
+      hello
+    </span>
+  </ForwardRef(Base)>
+</ForwardRef(LabelTitle)>
+`;
+
+exports[`renders the Label with heading  and size m props 1`] = `
+<ForwardRef(LabelTitle)
+  heading={true}
+  size="m"
+>
+  <ForwardRef(Base)
+    aria-level={1}
+    as="span"
+    className="govgr-heading-m"
+    role="heading"
+  >
+    <span
+      aria-level={1}
+      className="govgr-heading-m"
+      role="heading"
+    >
+      hello
+    </span>
+  </ForwardRef(Base)>
+</ForwardRef(LabelTitle)>
+`;
+
+exports[`renders the Label with heading  and size xl props 1`] = `
+<ForwardRef(LabelTitle)
+  heading={true}
+  size="xl"
+>
+  <ForwardRef(Base)
+    aria-level={1}
+    as="span"
+    className="govgr-heading-xl"
+    role="heading"
+  >
+    <span
+      aria-level={1}
+      className="govgr-heading-xl"
+      role="heading"
+    >
+      hello
+    </span>
+  </ForwardRef(Base)>
+</ForwardRef(LabelTitle)>
+`;
+
+exports[`renders the Label with heading and size s props 1`] = `
+<ForwardRef(LabelTitle)
+  heading={true}
+  size="s"
+>
+  <ForwardRef(Base)
+    aria-level={1}
+    as="span"
+    className="govgr-heading-s"
+    role="heading"
+  >
+    <span
+      aria-level={1}
+      className="govgr-heading-s"
+      role="heading"
+    >
+      hello
+    </span>
+  </ForwardRef(Base)>
+</ForwardRef(LabelTitle)>
+`;
+
+exports[`renders the Label with heading prop 1`] = `
+<ForwardRef(LabelTitle)
+  heading={true}
+>
+  <ForwardRef(Base)
+    aria-level={1}
+    as="span"
+    className=""
+    role="heading"
+  >
+    <span
+      aria-level={1}
+      className=""
+      role="heading"
+    >
+      hello
+    </span>
+  </ForwardRef(Base)>
+</ForwardRef(LabelTitle)>
+`;
+
+exports[`renders the Label with size l prop 1`] = `
+<ForwardRef(LabelTitle)
+  size="l"
+>
+  <ForwardRef(Base)
+    as="span"
+    className="govgr-heading-l"
+  >
+    <span
+      className="govgr-heading-l"
+    >
+      hello
+    </span>
+  </ForwardRef(Base)>
+</ForwardRef(LabelTitle)>
+`;
+
+exports[`renders the Label with size m prop 1`] = `
+<ForwardRef(LabelTitle)
+  size="m"
+>
+  <ForwardRef(Base)
+    as="span"
+    className="govgr-heading-m"
+  >
+    <span
+      className="govgr-heading-m"
+    >
+      hello
+    </span>
+  </ForwardRef(Base)>
+</ForwardRef(LabelTitle)>
+`;
+
+exports[`renders the Label with size s prop 1`] = `
+<ForwardRef(LabelTitle)
+  size="s"
+>
+  <ForwardRef(Base)
+    as="span"
+    className="govgr-heading-s"
+  >
+    <span
+      className="govgr-heading-s"
+    >
+      hello
+    </span>
+  </ForwardRef(Base)>
+</ForwardRef(LabelTitle)>
+`;
+
+exports[`renders the Label with size xl prop 1`] = `
+<ForwardRef(LabelTitle)
+  size="xl"
+>
+  <ForwardRef(Base)
+    as="span"
+    className="govgr-heading-xl"
+  >
+    <span
+      className="govgr-heading-xl"
+    >
+      hello
+    </span>
+  </ForwardRef(Base)>
+</ForwardRef(LabelTitle)>
+`;
+
+exports[`renders the LabelTitle with no props 1`] = `
+<ForwardRef(LabelTitle)>
+  <ForwardRef(Base)
+    as="span"
+    className=""
+  >
+    <span
+      className=""
+    >
+      hello
+    </span>
+  </ForwardRef(Base)>
+</ForwardRef(LabelTitle)>
+`;

package/src/LabelTitle/index.test.tsx

@@ -0,0 +1,68 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import LabelTitle from '@digigov/react-core/LabelTitle';
+
+it('renders the LabelTitle with no props', () => {
+  expect(mount(<LabelTitle>hello</LabelTitle>)).toMatchSnapshot();
+});
+
+it('renders the Label with heading prop', () => {
+  expect(mount(<LabelTitle heading>hello</LabelTitle>)).toMatchSnapshot();
+});
+
+it('renders the Label with size s prop', () => {
+  expect(mount(<LabelTitle size="s">hello</LabelTitle>)).toMatchSnapshot();
+});
+
+it('renders the Label with size m prop', () => {
+  expect(mount(<LabelTitle size="m">hello</LabelTitle>)).toMatchSnapshot();
+});
+
+it('renders the Label with size l prop', () => {
+  expect(mount(<LabelTitle size="l">hello</LabelTitle>)).toMatchSnapshot();
+});
+
+it('renders the Label with size xl prop', () => {
+  expect(mount(<LabelTitle size="xl">hello</LabelTitle>)).toMatchSnapshot();
+});
+
+it('renders the Label with heading and size s props', () => {
+  expect(
+    mount(
+      <LabelTitle heading size="s">
+        hello
+      </LabelTitle>
+    )
+  ).toMatchSnapshot();
+});
+
+it('renders the Label with heading  and size m props', () => {
+  expect(
+    mount(
+      <LabelTitle heading size="m">
+        hello
+      </LabelTitle>
+    )
+  ).toMatchSnapshot();
+});
+
+it('renders the Label with heading  and size l props', () => {
+  expect(
+    mount(
+      <LabelTitle heading size="l">
+        hello
+      </LabelTitle>
+    )
+  ).toMatchSnapshot();
+});
+
+it('renders the Label with heading  and size xl props', () => {
+  expect(
+    mount(
+      <LabelTitle heading size="xl">
+        hello
+      </LabelTitle>
+    )
+  ).toMatchSnapshot();
+});

package/src/LabelTitle/index.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface LabelFieldProps extends BaseProps<'span'> {
+  /**
+   * size is optional. The default value is 'l'
+   */
+  size?: 'xl' | 'l' | 'm' | 's';
+  /**
+   * heading is optional.
+   * Add this prop if this Field component is the only one in this page.
+   * The default value is false.
+   */
+  heading?: boolean;
+}
+/**
+ * Label component defines a label for several elements at forms.
+ */
+export const LabelTitle = React.forwardRef<HTMLSpanElement, LabelFieldProps>(
+  function LabelTitle(
+    { size, className, heading = false, children, ...props },
+    ref
+  ) {
+    return (
+      <Base
+        as="span"
+        ref={ref}
+        className={clsx(className, {
+          'govgr-heading-xl': size === 'xl',
+          'govgr-heading-l': size === 'l',
+          'govgr-heading-m': size === 'm',
+          'govgr-heading-s': size === 's',
+        })}
+        {...(heading && { role: 'heading', 'aria-level': 1 })}
+        {...props}
+      >
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default LabelTitle;

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

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

package/src/Layout/index.test.tsx

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

package/src/Layout/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface LayoutProps extends BaseProps<'div'> {
+  fullHeight?: boolean;
+}
+/**
+ * Wrapper component for the entire page except the Header and the Footer.
+ */
+export const Layout = React.forwardRef<HTMLDivElement, LayoutProps>(
+  function Layout({ className, children, fullHeight = true, ...props }, ref) {
+    return (
+      <Base
+        as="div"
+        ref={ref}
+        className={clsx(className, {
+          'govgr-layout-wrapper': true,
+          'govgr-layout-wrapper__full-height': fullHeight === true,
+        })}
+        {...props}
+      >
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default Layout;

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

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

package/src/LinkBase/index.test.tsx

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

package/src/LinkBase/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface LinkBaseProps extends BaseProps<'a'> {
+  /**
+   * underline is optional. The default value is 'true'.
+   * Make it 'false' only if the context tells the user that the text is a link, even without the underline.
+   */
+  underline?: boolean;
+}
+/**
+ * This component defines a hyperlink, which is used to link from one page to another.
+ */
+export const LinkBase = React.forwardRef<HTMLAnchorElement, LinkBaseProps>(
+  function LinkBase({ underline, className, children, ...props }, ref) {
+    return (
+      <Base
+        as="a"
+        ref={ref}
+        className={clsx(className, {
+          'govgr-link': true,
+          'govgr-link--no-underline': underline === false,
+        })}
+        {...props}
+      >
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default LinkBase;

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

@@ -0,0 +1,212 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the List with listStyle=bullet 1`] = `
+<ForwardRef(List)
+  listStyle="bullet"
+>
+  <ForwardRef(Base)
+    as="ol"
+    className="govgr-list--bullet govgr-list"
+  >
+    <ol
+      className="govgr-list--bullet govgr-list"
+    >
+      hello
+    </ol>
+  </ForwardRef(Base)>
+</ForwardRef(List)>
+`;
+
+exports[`renders the List with listStyle=bullet 2`] = `
+<ForwardRef(List)
+  listStyle="bullet"
+>
+  <ForwardRef(Base)
+    as="ol"
+    className="govgr-list--bullet govgr-list"
+  >
+    <ol
+      className="govgr-list--bullet govgr-list"
+    >
+      <ForwardRef(ListItem)>
+        <ForwardRef(Base)
+          as="li"
+          className="govgr-list__item"
+        >
+          <li
+            className="govgr-list__item"
+          >
+            hello Giorgos
+          </li>
+        </ForwardRef(Base)>
+      </ForwardRef(ListItem)>
+      <ForwardRef(ListItem)>
+        <ForwardRef(Base)
+          as="li"
+          className="govgr-list__item"
+        >
+          <li
+            className="govgr-list__item"
+          >
+            hello Katerina
+          </li>
+        </ForwardRef(Base)>
+      </ForwardRef(ListItem)>
+    </ol>
+  </ForwardRef(Base)>
+</ForwardRef(List)>
+`;
+
+exports[`renders the List with listStyle=bullet and spaced 1`] = `
+<ForwardRef(List)
+  listStyle="bullet"
+  spaced={true}
+>
+  <ForwardRef(Base)
+    as="ol"
+    className="govgr-list--bullet govgr-list--spaced govgr-list"
+  >
+    <ol
+      className="govgr-list--bullet govgr-list--spaced govgr-list"
+    >
+      <ForwardRef(ListItem)>
+        <ForwardRef(Base)
+          as="li"
+          className="govgr-list__item"
+        >
+          <li
+            className="govgr-list__item"
+          >
+            hello Giorgos
+          </li>
+        </ForwardRef(Base)>
+      </ForwardRef(ListItem)>
+      <ForwardRef(ListItem)>
+        <ForwardRef(Base)
+          as="li"
+          className="govgr-list__item"
+        >
+          <li
+            className="govgr-list__item"
+          >
+            hello Katerina
+          </li>
+        </ForwardRef(Base)>
+      </ForwardRef(ListItem)>
+    </ol>
+  </ForwardRef(Base)>
+</ForwardRef(List)>
+`;
+
+exports[`renders the List with listStyle=number 1`] = `
+<ForwardRef(List)
+  listStyle="number"
+>
+  <ForwardRef(Base)
+    as="ol"
+    className="govgr-list--number govgr-list"
+  >
+    <ol
+      className="govgr-list--number govgr-list"
+    >
+      hello
+    </ol>
+  </ForwardRef(Base)>
+</ForwardRef(List)>
+`;
+
+exports[`renders the List with listStyle=number 2`] = `
+<ForwardRef(List)
+  listStyle="number"
+>
+  <ForwardRef(Base)
+    as="ol"
+    className="govgr-list--number govgr-list"
+  >
+    <ol
+      className="govgr-list--number govgr-list"
+    >
+      <ForwardRef(ListItem)>
+        <ForwardRef(Base)
+          as="li"
+          className="govgr-list__item"
+        >
+          <li
+            className="govgr-list__item"
+          >
+            hello Giorgos
+          </li>
+        </ForwardRef(Base)>
+      </ForwardRef(ListItem)>
+      <ForwardRef(ListItem)>
+        <ForwardRef(Base)
+          as="li"
+          className="govgr-list__item"
+        >
+          <li
+            className="govgr-list__item"
+          >
+            hello Katerina
+          </li>
+        </ForwardRef(Base)>
+      </ForwardRef(ListItem)>
+    </ol>
+  </ForwardRef(Base)>
+</ForwardRef(List)>
+`;
+
+exports[`renders the List with listStyle=number and spaced 1`] = `
+<ForwardRef(List)
+  listStyle="number"
+  spaced={true}
+>
+  <ForwardRef(Base)
+    as="ol"
+    className="govgr-list--number govgr-list--spaced govgr-list"
+  >
+    <ol
+      className="govgr-list--number govgr-list--spaced govgr-list"
+    >
+      <ForwardRef(ListItem)>
+        <ForwardRef(Base)
+          as="li"
+          className="govgr-list__item"
+        >
+          <li
+            className="govgr-list__item"
+          >
+            hello Giorgos
+          </li>
+        </ForwardRef(Base)>
+      </ForwardRef(ListItem)>
+      <ForwardRef(ListItem)>
+        <ForwardRef(Base)
+          as="li"
+          className="govgr-list__item"
+        >
+          <li
+            className="govgr-list__item"
+          >
+            hello Katerina
+          </li>
+        </ForwardRef(Base)>
+      </ForwardRef(ListItem)>
+    </ol>
+  </ForwardRef(Base)>
+</ForwardRef(List)>
+`;
+
+exports[`renders the List with no props 1`] = `
+<ForwardRef(List)>
+  <ForwardRef(Base)
+    as="ol"
+    className="govgr-list"
+  >
+    <ol
+      className="govgr-list"
+    >
+      hello
+    </ol>
+  </ForwardRef(Base)>
+</ForwardRef(List)>
+`;