@digigov/react-core 0.18.1 → 0.19.1

package/src/RadioConditional/index.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface RadioConditionalProps extends BaseProps<'div'> {}
+/**
+ * RadioConditional asks the user a related question when they select a particular radios,
+ * so they only see the question when it’s relevant to them.
+ * RadioConditional must be used inside Radio component
+ */
+export const RadioConditional = React.forwardRef<
+  HTMLDivElement,
+  RadioConditionalProps
+>(function RadioConditional({ className, children, ...props }, ref) {
+  return (
+    <Base
+      as="div"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-radios__conditional': true,
+      })}
+      {...props}
+    >
+      <div
+        className={clsx({
+          'govgr-field': true,
+        })}
+      >
+        <label
+          className={clsx({
+            'govgr-label': true,
+          })}
+        >
+          {children}
+        </label>
+      </div>
+    </Base>
+  );
+});
+
+export default RadioConditional;

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

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

package/src/RadioContainer/index.test.tsx

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

package/src/RadioContainer/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface RadioContainerProps extends BaseProps<'div'> {
+  /**
+   * The `inline` prop controls whether the radio items will render next to each other or not.
+   * */
+  inline?: boolean;
+}
+/**
+ * RadioContainer component is uses when users can only select one option from a list.
+ * It is used as parent component to wrap RadioItem compoent.
+ */
+export const RadioContainer = React.forwardRef<
+  HTMLDivElement,
+  RadioContainerProps
+>(function RadioContainer({ className, children, inline, ...props }, ref) {
+  return (
+    <Base
+      as="div"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-radios': true,
+        'govgr-radios--inline': inline === true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default RadioContainer;

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

@@ -0,0 +1,112 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the RadioItem  value props 1`] = `
+<ForwardRef(RadioItem)
+  value="someValue"
+>
+  <div
+    className="govgr-radios__item"
+  >
+    <label
+      className="govgr-label govgr-radios__label"
+    >
+      hello
+      <ForwardRef(Base)
+        as="input"
+        className="govgr-radios__input"
+        type="radio"
+        value="someValue"
+      >
+        <input
+          className="govgr-radios__input"
+          type="radio"
+          value="someValue"
+        />
+      </ForwardRef(Base)>
+    </label>
+  </div>
+</ForwardRef(RadioItem)>
+`;
+
+exports[`renders the RadioItem with name  props 1`] = `
+<ForwardRef(RadioItem)
+  name="name"
+>
+  <div
+    className="govgr-radios__item"
+  >
+    <label
+      className="govgr-label govgr-radios__label"
+    >
+      hello
+      <ForwardRef(Base)
+        as="input"
+        className="govgr-radios__input"
+        name="name"
+        type="radio"
+      >
+        <input
+          className="govgr-radios__input"
+          name="name"
+          type="radio"
+        />
+      </ForwardRef(Base)>
+    </label>
+  </div>
+</ForwardRef(RadioItem)>
+`;
+
+exports[`renders the RadioItem with name and value props 1`] = `
+<ForwardRef(RadioItem)
+  name="name"
+  value="someValue"
+>
+  <div
+    className="govgr-radios__item"
+  >
+    <label
+      className="govgr-label govgr-radios__label"
+    >
+      hello
+      <ForwardRef(Base)
+        as="input"
+        className="govgr-radios__input"
+        name="name"
+        type="radio"
+        value="someValue"
+      >
+        <input
+          className="govgr-radios__input"
+          name="name"
+          type="radio"
+          value="someValue"
+        />
+      </ForwardRef(Base)>
+    </label>
+  </div>
+</ForwardRef(RadioItem)>
+`;
+
+exports[`renders the RadioItem with no props 1`] = `
+<ForwardRef(RadioItem)>
+  <div
+    className="govgr-radios__item"
+  >
+    <label
+      className="govgr-label govgr-radios__label"
+    >
+      hello
+      <ForwardRef(Base)
+        as="input"
+        className="govgr-radios__input"
+        type="radio"
+      >
+        <input
+          className="govgr-radios__input"
+          type="radio"
+        />
+      </ForwardRef(Base)>
+    </label>
+  </div>
+</ForwardRef(RadioItem)>
+`;

package/src/RadioItem/index.test.tsx

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

package/src/RadioItem/index.tsx

@@ -0,0 +1,51 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface RadioItemProps extends BaseProps<'input'> {
+  /**
+   *Name property is optional and it contains a single value which describes the name of the <input> element.
+   */
+  name?: string;
+
+  /**
+   * Value property is optional and it specifies the value of an <input> element.
+   */
+  value?: string;
+}
+/**
+ * RadioItem component is used for display radio buttons.
+ * RadioItem component must be included inside Radio component, as a children component.
+ */
+export const RadioItem = React.forwardRef<HTMLInputElement, RadioItemProps>(
+  function RadioItem({ name, value, className, children, ...props }, ref) {
+    return (
+      <div
+        className={clsx(className, {
+          'govgr-radios__item': true,
+        })}
+      >
+        <label
+          className={clsx({
+            'govgr-label govgr-radios__label': true,
+          })}
+        >
+          {children}
+          <Base
+            as="input"
+            ref={ref}
+            type="radio"
+            name={name}
+            value={value}
+            className={clsx({
+              'govgr-radios__input': true,
+            })}
+            {...props}
+          />
+        </label>
+      </div>
+    );
+  }
+);
+
+export default RadioItem;

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

@@ -0,0 +1,89 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the SectionBreak with no props 1`] = `
+<ForwardRef(SectionBreak)>
+  <ForwardRef(Base)
+    as="hr"
+    className="govgr-section-break"
+  >
+    <hr
+      className="govgr-section-break"
+    />
+  </ForwardRef(Base)>
+</ForwardRef(SectionBreak)>
+`;
+
+exports[`renders the SectionBreak with size=l 1`] = `
+<ForwardRef(SectionBreak)
+  size="l"
+>
+  <ForwardRef(Base)
+    as="hr"
+    className="govgr-section-break--l govgr-section-break"
+  >
+    <hr
+      className="govgr-section-break--l govgr-section-break"
+    />
+  </ForwardRef(Base)>
+</ForwardRef(SectionBreak)>
+`;
+
+exports[`renders the SectionBreak with size=m 1`] = `
+<ForwardRef(SectionBreak)
+  size="m"
+>
+  <ForwardRef(Base)
+    as="hr"
+    className="govgr-section-break--m govgr-section-break"
+  >
+    <hr
+      className="govgr-section-break--m govgr-section-break"
+    />
+  </ForwardRef(Base)>
+</ForwardRef(SectionBreak)>
+`;
+
+exports[`renders the SectionBreak with size=xl 1`] = `
+<ForwardRef(SectionBreak)
+  size="xl"
+>
+  <ForwardRef(Base)
+    as="hr"
+    className="govgr-section-break--xl govgr-section-break"
+  >
+    <hr
+      className="govgr-section-break--xl govgr-section-break"
+    />
+  </ForwardRef(Base)>
+</ForwardRef(SectionBreak)>
+`;
+
+exports[`renders the SectionBreak with visible=false 1`] = `
+<ForwardRef(SectionBreak)
+  visible={false}
+>
+  <ForwardRef(Base)
+    as="hr"
+    className="govgr-section-break"
+  >
+    <hr
+      className="govgr-section-break"
+    />
+  </ForwardRef(Base)>
+</ForwardRef(SectionBreak)>
+`;
+
+exports[`renders the SectionBreak with visible=true 1`] = `
+<ForwardRef(SectionBreak)
+  visible={true}
+>
+  <ForwardRef(Base)
+    as="hr"
+    className="govgr-section-break--visible govgr-section-break"
+  >
+    <hr
+      className="govgr-section-break--visible govgr-section-break"
+    />
+  </ForwardRef(Base)>
+</ForwardRef(SectionBreak)>
+`;

package/src/SectionBreak/index.test.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import SectionBreak from '@digigov/react-core/SectionBreak';
+
+it('renders the SectionBreak with no props', () => {
+  expect(mount(<SectionBreak />)).toMatchSnapshot();
+});
+
+it('renders the SectionBreak with visible=true', () => {
+  expect(mount(<SectionBreak visible={true} />)).toMatchSnapshot();
+});
+
+it('renders the SectionBreak with visible=false', () => {
+  expect(mount(<SectionBreak visible={false} />)).toMatchSnapshot();
+});
+
+it('renders the SectionBreak with size=xl', () => {
+  expect(mount(<SectionBreak size={'xl'} />)).toMatchSnapshot();
+});
+
+it('renders the SectionBreak with size=l', () => {
+  expect(mount(<SectionBreak size={'l'} />)).toMatchSnapshot();
+});
+
+it('renders the SectionBreak with size=m', () => {
+  expect(mount(<SectionBreak size={'m'} />)).toMatchSnapshot();
+});

package/src/SectionBreak/index.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface SectionBreakProps extends BaseProps<'hr'> {
+  /**
+   * visible is optional.
+   * By default, SectionBreak only visible by its margin. You can add the 'visible' prop to make it visible with a separator line.
+   */
+  visible?: boolean;
+
+  /**
+   * size is optional and it is about the different size margins.
+   */
+  size?: 'xl' | 'l' | 'm';
+}
+/**
+ * SectionBreak is used to create a thematic break between sections of content.
+ */
+export const SectionBreak = React.forwardRef<HTMLHRElement, SectionBreakProps>(
+  function SectionBreak({ visible, size, className, ...props }, ref) {
+    return (
+      <Base
+        as="hr"
+        ref={ref}
+        className={clsx(className, {
+          'govgr-section-break': true,
+          'govgr-section-break--visible': visible === true,
+          'govgr-section-break--xl': size === 'xl',
+          'govgr-section-break--l': size === 'l',
+          'govgr-section-break--m': size === 'm',
+        })}
+        {...props}
+      />
+    );
+  }
+);
+
+export default SectionBreak;

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

@@ -0,0 +1,57 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the SelectContainer with name and defaultValue 1`] = `
+<ForwardRef(SelectContainer)
+  defaultValue="some-value"
+  name="some-name"
+>
+  <ForwardRef(Base)
+    as="select"
+    className="govgr-select"
+    defaultValue="some-value"
+    name="some-name"
+  >
+    <select
+      className="govgr-select"
+      defaultValue="some-value"
+      name="some-name"
+    >
+      hello
+    </select>
+  </ForwardRef(Base)>
+</ForwardRef(SelectContainer)>
+`;
+
+exports[`renders the SelectContainer with name props 1`] = `
+<ForwardRef(SelectContainer)
+  name="some-name"
+>
+  <ForwardRef(Base)
+    as="select"
+    className="govgr-select"
+    name="some-name"
+  >
+    <select
+      className="govgr-select"
+      name="some-name"
+    >
+      hello
+    </select>
+  </ForwardRef(Base)>
+</ForwardRef(SelectContainer)>
+`;
+
+exports[`renders the SelectContainer with no props 1`] = `
+<ForwardRef(SelectContainer)>
+  <ForwardRef(Base)
+    as="select"
+    className="govgr-select"
+  >
+    <select
+      className="govgr-select"
+    >
+      hello
+    </select>
+  </ForwardRef(Base)>
+</ForwardRef(SelectContainer)>
+`;

package/src/SelectContainer/index.test.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import SelectContainer from '@digigov/react-core/SelectContainer';
+
+it('renders the SelectContainer with no props', () => {
+  expect(mount(<SelectContainer>hello</SelectContainer>)).toMatchSnapshot();
+});
+
+it('renders the SelectContainer with name props', () => {
+  expect(
+    mount(<SelectContainer name={'some-name'}>hello</SelectContainer>)
+  ).toMatchSnapshot();
+});
+
+it('renders the SelectContainer with name and defaultValue', () => {
+  expect(
+    mount(
+      <SelectContainer name={'some-name'} defaultValue={'some-value'}>
+        hello
+      </SelectContainer>
+    )
+  ).toMatchSnapshot();
+});

package/src/SelectContainer/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface SelectContainerProps extends BaseProps<'select'> {
+  /**
+   * name is optional but strongly recommended.
+   */
+  name?: string;
+}
+/**
+ * The SelectContainer component allows users to choose an option from a long list.
+ * It is used as a parent component to wrap SelectOption component.
+ */
+export const SelectContainer = React.forwardRef<
+  HTMLSelectElement,
+  SelectContainerProps
+>(function SelectContainer({ name, className, children, ...props }, ref) {
+  return (
+    <Base
+      as="select"
+      name={name}
+      ref={ref}
+      className={clsx(className, {
+        'govgr-select': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default SelectContainer;

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

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

package/src/SelectOption/index.test.tsx

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

package/src/SelectOption/index.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface SelectOptionProps extends BaseProps<'option'> {
+  /**
+   * value is optional.
+   */
+  value?: string;
+
+  /**
+   * selected is optional.
+   */
+  selected?: boolean;
+}
+/**
+ * SelectOption component is used for display options value.
+ * SelectOption component must be included inside Select component as children component
+ */
+export const SelectOption = React.forwardRef<
+  HTMLOptionElement,
+  SelectOptionProps
+>(function SelectOption(
+  { value, selected, className, children, ...props },
+  ref
+) {
+  return (
+    <Base
+      as="option"
+      value={value}
+      ref={ref}
+      selected={selected}
+      className={clsx(className, {})}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default SelectOption;

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

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the SkipLink with no props 1`] = `
+<ForwardRef(SkipLink)>
+  <ForwardRef(Base)
+    as="a"
+    className="govgr--skip-link"
+    href="#main-content"
+    tabIndex={0}
+  >
+    <a
+      className="govgr--skip-link"
+      href="#main-content"
+      tabIndex={0}
+    >
+      hello
+    </a>
+  </ForwardRef(Base)>
+</ForwardRef(SkipLink)>
+`;

package/src/SkipLink/index.test.tsx

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