@digigov/react-core 0.17.0 → 0.17.1-alpha

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

@@ -0,0 +1,39 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the Blockquote with name prop 1`] = `
+<ForwardRef(RadioConditional)
+  name="some-name"
+>
+  <div
+    className="govgr-radios__conditional"
+  >
+    <div
+      className="govgr-field"
+    >
+      <label
+        className="govgr-label"
+      >
+        hello
+      </label>
+    </div>
+  </div>
+</ForwardRef(RadioConditional)>
+`;
+
+exports[`renders the Blockquote with no props 1`] = `
+<ForwardRef(RadioConditional)>
+  <div
+    className="govgr-radios__conditional"
+  >
+    <div
+      className="govgr-field"
+    >
+      <label
+        className="govgr-label"
+      >
+        hello
+      </label>
+    </div>
+  </div>
+</ForwardRef(RadioConditional)>
+`;

package/src/RadioConditional/index.test.tsx

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

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/RadioItem/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,84 @@
+// 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
+      <input
+        className="govgr-radios__input"
+        type="radio"
+        value="someValue"
+      />
+    </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
+      <input
+        className="govgr-radios__input"
+        name="name"
+        type="radio"
+      />
+    </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
+      <input
+        className="govgr-radios__input"
+        name="name"
+        type="radio"
+        value="someValue"
+      />
+    </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
+      <input
+        className="govgr-radios__input"
+        type="radio"
+      />
+    </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,59 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the SectionBreak with no props 1`] = `
+<ForwardRef(SectionBreak)>
+  <hr
+    className="govgr-section-break"
+  />
+</ForwardRef(SectionBreak)>
+`;
+
+exports[`renders the SectionBreak with size=l 1`] = `
+<ForwardRef(SectionBreak)
+  size="l"
+>
+  <hr
+    className="govgr-section-break--l govgr-section-break"
+  />
+</ForwardRef(SectionBreak)>
+`;
+
+exports[`renders the SectionBreak with size=m 1`] = `
+<ForwardRef(SectionBreak)
+  size="m"
+>
+  <hr
+    className="govgr-section-break--m govgr-section-break"
+  />
+</ForwardRef(SectionBreak)>
+`;
+
+exports[`renders the SectionBreak with size=xl 1`] = `
+<ForwardRef(SectionBreak)
+  size="xl"
+>
+  <hr
+    className="govgr-section-break--xl govgr-section-break"
+  />
+</ForwardRef(SectionBreak)>
+`;
+
+exports[`renders the SectionBreak with visible=false 1`] = `
+<ForwardRef(SectionBreak)
+  visible={false}
+>
+  <hr
+    className="govgr-section-break"
+  />
+</ForwardRef(SectionBreak)>
+`;
+
+exports[`renders the SectionBreak with visible=true 1`] = `
+<ForwardRef(SectionBreak)
+  visible={true}
+>
+  <hr
+    className="govgr-section-break--visible govgr-section-break"
+  />
+</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/Select/__snapshots__/index.test.tsx.snap

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

package/src/Select/index.test.tsx

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

package/src/Select/index.tsx

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

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

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the SelectOption with no props 1`] = `
+<ForwardRef(SelectOption)>
+  <option
+    className=""
+  >
+    hello
+  </option>
+</ForwardRef(SelectOption)>
+`;
+
+exports[`renders the SelectOption with value props 1`] = `
+<ForwardRef(SelectOption)
+  value="some-value"
+>
+  <option
+    className=""
+    value="some-value"
+  >
+    hello
+  </option>
+</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/ServiceBadge/__snapshots__/index.test.tsx.snap

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

package/src/ServiceBadge/index.test.tsx

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

package/src/ServiceBadge/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface ServiceBadgeProps extends BaseProps<'div'> {}
+/**
+ * ServiceBadge shows the phase os a service.
+ * The component will be deprecated and this is a shell component that can be used to warn the developers to remove it.
+ * PhaseBanner component will replace it.
+ */
+export const ServiceBadge = React.forwardRef<HTMLDivElement, ServiceBadgeProps>(
+  function ServiceBadge({ className, children, ...props }, ref) {
+    return (
+      <Base
+        as="div"
+        ref={ref}
+        className={clsx(className, {
+          'govgr-phase-banner': true,
+        })}
+        {...props}
+      >
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default ServiceBadge;

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

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

package/src/SkipLink/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface LinkProps extends BaseProps<'a'> {
+  href?: string;
+}
+/**
+ * Use the skip link component to help keyboard-only users skip to the main content on a page.
+ */
+export const SkipLink = React.forwardRef<HTMLAnchorElement, LinkProps>(
+  function SkipLink(
+    { className, children, href = '#main-content', ...props },
+    ref
+  ) {
+    return (
+      <Base
+        as="a"
+        tabIndex={0}
+        href={href}
+        ref={ref}
+        className={clsx(className, {
+          'govgr--skip-link': true,
+        })}
+        {...props}
+      >
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default SkipLink;

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

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the SummaryList with no props 1`] = `
+<ForwardRef(SummaryList)>
+  <dl
+    className="govgr-summary-list"
+  >
+    hello
+  </dl>
+</ForwardRef(SummaryList)>
+`;