@digigov/react-core 0.18.1 → 0.19.1

package/src/TabsHeading/index.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface TabsHeadingProps extends BaseProps<'h6'> {
+  /**
+   * size is optional.
+   * The values are 'm' for medium and 's' for small.
+   * Default value is 's'.
+   */
+  size?: 'm' | 's';
+}
+/**
+ * TabsHeading should be inside the Tabs component. This heading is hidden on desktop screens, but it is always usefull for accessibility.
+ */
+export const TabsHeading = React.forwardRef<
+  HTMLHeadingElement,
+  TabsHeadingProps
+>(function TabsHeading({ size = 's', className, children, ...props }, ref) {
+  return (
+    <Base
+      as="h6"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-tabs__title': true,
+        'govgr-heading-m': size === 'm',
+        'govgr-heading-s': size === 's',
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default TabsHeading;

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

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

package/src/TabsList/index.test.tsx

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

package/src/TabsList/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface TabsListProps extends BaseProps<'ul'> {}
+/**
+ * TabsList should be inside the Tabs component.
+ * Inside the TabsList should be a list of TabsListItem components.
+ */
+export const TabsList = React.forwardRef<HTMLUListElement, TabsListProps>(
+  function TabsList({ className, children, ...props }, ref) {
+    return (
+      <Base
+        as="ul"
+        role="tablist"
+        ref={ref}
+        className={clsx(className, {
+          'govgr-tabs__list': true,
+        })}
+        {...props}
+      >
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default TabsList;

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

@@ -0,0 +1,133 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the TabsListItem with href and selected=false 1`] = `
+<ForwardRef(TabsListItem)
+  href="/"
+  selected={false}
+>
+  <li
+    className="govgr-tabs__list-item"
+    role="presentation"
+  >
+    <ForwardRef(Base)
+      aria-selected={false}
+      as="a"
+      className="govgr-tabs__tab"
+      href="/"
+      role="tab"
+    >
+      <a
+        aria-selected={false}
+        className="govgr-tabs__tab"
+        href="/"
+        role="tab"
+      >
+        hello
+      </a>
+    </ForwardRef(Base)>
+  </li>
+</ForwardRef(TabsListItem)>
+`;
+
+exports[`renders the TabsListItem with no props 1`] = `
+<ForwardRef(TabsListItem)>
+  <li
+    className="govgr-tabs__list-item"
+    role="presentation"
+  >
+    <ForwardRef(Base)
+      as="a"
+      className="govgr-tabs__tab"
+      role="tab"
+    >
+      <a
+        className="govgr-tabs__tab"
+        role="tab"
+      >
+        hello
+      </a>
+    </ForwardRef(Base)>
+  </li>
+</ForwardRef(TabsListItem)>
+`;
+
+exports[`renders the TabsListItem with selected=false 1`] = `
+<ForwardRef(TabsListItem)
+  selected={false}
+>
+  <li
+    className="govgr-tabs__list-item"
+    role="presentation"
+  >
+    <ForwardRef(Base)
+      aria-selected={false}
+      as="a"
+      className="govgr-tabs__tab"
+      role="tab"
+    >
+      <a
+        aria-selected={false}
+        className="govgr-tabs__tab"
+        role="tab"
+      >
+        hello
+      </a>
+    </ForwardRef(Base)>
+  </li>
+</ForwardRef(TabsListItem)>
+`;
+
+exports[`renders the TabsListItem with selected=true 1`] = `
+<ForwardRef(TabsListItem)
+  selected={true}
+>
+  <li
+    className="govgr-tabs__list-item-selected govgr-tabs__list-item"
+    role="presentation"
+  >
+    <ForwardRef(Base)
+      aria-selected={true}
+      as="a"
+      className="govgr-tabs__tab"
+      role="tab"
+    >
+      <a
+        aria-selected={true}
+        className="govgr-tabs__tab"
+        role="tab"
+      >
+        hello
+      </a>
+    </ForwardRef(Base)>
+  </li>
+</ForwardRef(TabsListItem)>
+`;
+
+exports[`renders the TabsListItem with selected=true 2`] = `
+<ForwardRef(TabsListItem)
+  href="/"
+  selected={true}
+>
+  <li
+    className="govgr-tabs__list-item-selected govgr-tabs__list-item"
+    role="presentation"
+  >
+    <ForwardRef(Base)
+      aria-selected={true}
+      as="a"
+      className="govgr-tabs__tab"
+      href="/"
+      role="tab"
+    >
+      <a
+        aria-selected={true}
+        className="govgr-tabs__tab"
+        href="/"
+        role="tab"
+      >
+        hello
+      </a>
+    </ForwardRef(Base)>
+  </li>
+</ForwardRef(TabsListItem)>
+`;

package/src/TabsListItem/index.test.tsx

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

package/src/TabsListItem/index.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface TabsListItemProps extends BaseProps<'a'> {
+  /**
+   * selected is optional.
+   * Exaclty one TabsListItem should be selected every time.
+   * This declares that this tab is selected.
+   */
+  selected?: boolean;
+
+  /**
+   * href is optional.
+   */
+  href?: string;
+}
+/**
+ * TabsListItem should be inside the TabsList.
+ * In here we declare the title of the tab.
+ */
+export const TabsListItem = React.forwardRef<
+  HTMLAnchorElement,
+  TabsListItemProps
+>(function TabsListItem({ selected, className, children, ...props }, ref) {
+  return (
+    <li
+      role="presentation"
+      className={clsx(className, {
+        'govgr-tabs__list-item': true,
+        'govgr-tabs__list-item-selected': selected === true,
+      })}
+    >
+      <Base
+        as="a"
+        ref={ref}
+        role="tab"
+        aria-selected={selected}
+        className={clsx({
+          'govgr-tabs__tab': true,
+        })}
+        {...props}
+      >
+        {children}
+      </Base>
+    </li>
+  );
+});
+
+export default TabsListItem;

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

@@ -0,0 +1,83 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the TabsPanel with active 1`] = `
+<ForwardRef(TabsPanel)
+  active={true}
+>
+  <ForwardRef(Base)
+    aria-hidden={false}
+    as="div"
+    className="govgr-tabs__panel-visible govgr-tabs__panel"
+    role="tabpanel"
+  >
+    <div
+      aria-hidden={false}
+      className="govgr-tabs__panel-visible govgr-tabs__panel"
+      role="tabpanel"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(TabsPanel)>
+`;
+
+exports[`renders the TabsPanel with active=false 1`] = `
+<ForwardRef(TabsPanel)
+  active={false}
+>
+  <ForwardRef(Base)
+    aria-hidden={true}
+    as="div"
+    className="govgr-tabs__panel"
+    role="tabpanel"
+  >
+    <div
+      aria-hidden={true}
+      className="govgr-tabs__panel"
+      role="tabpanel"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(TabsPanel)>
+`;
+
+exports[`renders the TabsPanel with active=true 1`] = `
+<ForwardRef(TabsPanel)
+  active={true}
+>
+  <ForwardRef(Base)
+    aria-hidden={false}
+    as="div"
+    className="govgr-tabs__panel-visible govgr-tabs__panel"
+    role="tabpanel"
+  >
+    <div
+      aria-hidden={false}
+      className="govgr-tabs__panel-visible govgr-tabs__panel"
+      role="tabpanel"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(TabsPanel)>
+`;
+
+exports[`renders the TabsPanel with no props 1`] = `
+<ForwardRef(TabsPanel)>
+  <ForwardRef(Base)
+    aria-hidden={true}
+    as="div"
+    className="govgr-tabs__panel"
+    role="tabpanel"
+  >
+    <div
+      aria-hidden={true}
+      className="govgr-tabs__panel"
+      role="tabpanel"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(TabsPanel)>
+`;

package/src/TabsPanel/index.test.tsx

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

package/src/TabsPanel/index.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface TabsPanelProps extends BaseProps<'div'> {
+  /**
+   * active is optional.
+   * Exaclty one TabsPanel should be active every time.
+   * This declares that this content is active and should depend of the 'selected' TabsList.
+   */
+  active?: boolean;
+}
+/**
+ * TabsPanel is inside the Tabs component.
+ * Every TabsListItem relates to a TabsPanel.
+ */
+export const TabsPanel = React.forwardRef<HTMLDivElement, TabsPanelProps>(
+  function TabsPanel({ active, className, children, ...props }, ref) {
+    return (
+      <Base
+        as="div"
+        ref={ref}
+        role="tabpanel"
+        aria-hidden={!active}
+        className={clsx(className, {
+          'govgr-tabs__panel': true,
+          'govgr-tabs__panel-visible': active === true,
+        })}
+        {...props}
+      >
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default TabsPanel;

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

@@ -0,0 +1,113 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the TextArea with no props 1`] = `
+<ForwardRef(TextArea)>
+  <ForwardRef(Base)
+    as="textarea"
+    className="govgr-textarea"
+    rows={6}
+  >
+    <textarea
+      className="govgr-textarea"
+      rows={6}
+    >
+      hello
+    </textarea>
+  </ForwardRef(Base)>
+</ForwardRef(TextArea)>
+`;
+
+exports[`renders the TextArea with rows=4 1`] = `
+<ForwardRef(TextArea)
+  rows={4}
+>
+  <ForwardRef(Base)
+    as="textarea"
+    className="govgr-textarea"
+    rows={4}
+  >
+    <textarea
+      className="govgr-textarea"
+      rows={4}
+    >
+      hello
+    </textarea>
+  </ForwardRef(Base)>
+</ForwardRef(TextArea)>
+`;
+
+exports[`renders the TextArea with rows=5 1`] = `
+<ForwardRef(TextArea)
+  rows={5}
+>
+  <ForwardRef(Base)
+    as="textarea"
+    className="govgr-textarea"
+    rows={5}
+  >
+    <textarea
+      className="govgr-textarea"
+      rows={5}
+    >
+      hello
+    </textarea>
+  </ForwardRef(Base)>
+</ForwardRef(TextArea)>
+`;
+
+exports[`renders the TextArea with rows=6 1`] = `
+<ForwardRef(TextArea)
+  rows={6}
+>
+  <ForwardRef(Base)
+    as="textarea"
+    className="govgr-textarea"
+    rows={6}
+  >
+    <textarea
+      className="govgr-textarea"
+      rows={6}
+    >
+      hello
+    </textarea>
+  </ForwardRef(Base)>
+</ForwardRef(TextArea)>
+`;
+
+exports[`renders the TextArea with rows=7 1`] = `
+<ForwardRef(TextArea)
+  rows={7}
+>
+  <ForwardRef(Base)
+    as="textarea"
+    className="govgr-textarea"
+    rows={7}
+  >
+    <textarea
+      className="govgr-textarea"
+      rows={7}
+    >
+      hello
+    </textarea>
+  </ForwardRef(Base)>
+</ForwardRef(TextArea)>
+`;
+
+exports[`renders the TextArea with rows=8 1`] = `
+<ForwardRef(TextArea)
+  rows={8}
+>
+  <ForwardRef(Base)
+    as="textarea"
+    className="govgr-textarea"
+    rows={8}
+  >
+    <textarea
+      className="govgr-textarea"
+      rows={8}
+    >
+      hello
+    </textarea>
+  </ForwardRef(Base)>
+</ForwardRef(TextArea)>
+`;

package/src/TextArea/index.test.tsx

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

package/src/TextArea/index.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface TextAreaProps extends BaseProps<'textarea'> {
+  /**
+   * name is optional but strongly recommended.
+   */
+  name?: string;
+
+  /**
+   * row is optional. The default value is 6.
+   */
+  rows?: 4 | 5 | 6 | 7 | 8;
+
+  /**
+   * error is optional. The default value is false.
+   * Use this prop when there is an error at the input.
+   */
+  error?: boolean;
+}
+/**
+ * Textarea component is used when you need to let users enter an
+ * amount of text that’s longer than a single line.
+ */
+export const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
+  function TextArea(
+    { name, rows = 6, error, className, children, ...props },
+    ref
+  ) {
+    return (
+      <Base
+        as="textarea"
+        name={name}
+        rows={rows}
+        ref={ref}
+        className={clsx(className, {
+          'govgr-textarea': true,
+          'govgr-error-input': error === true,
+        })}
+        {...props}
+      >
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default TextArea;