@digigov/react-core 0.18.1 → 0.19.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@digigov/react-core",
-  "version": "0.18.1",
+  "version": "0.19.0",
   "description": "@digigov react core components",
   "author": "GRNET Developers <devs@lists.grnet.gr>",
   "license": "BSD-2-Clause",
@@ -11,7 +11,7 @@
     "directory": "dist"
   },
   "peerDependencies": {
-    "@digigov/css": "0.29.15",
+    "@digigov/css": "0.30.0",
     "clsx": "1.1.1",
     "react": "^16.8.0 || ^17.0.0",
     "react-dom": "^16.8.0 || ^17.0.0"

package/registry.d.ts

@@ -69,6 +69,7 @@ declare var _default: {
     '@digigov/react-core/Header': {};
     '@digigov/react-core/HeaderContent': {};
     '@digigov/react-core/HeaderLogo': {};
+    '@digigov/react-core/HeaderNavMenuContent': {};
     '@digigov/react-core/HeaderSecondaryLogo': {};
     '@digigov/react-core/HeaderSection': {};
     '@digigov/react-core/HeaderSubtitle': {};
@@ -96,6 +97,14 @@ declare var _default: {
     '@digigov/react-core/NavHorizontal': {};
     '@digigov/react-core/NavHorizontalList': {};
     '@digigov/react-core/NavHorizontalListItem': {};
+    '@digigov/react-core/NavHorizontalListItemButton': {};
+    '@digigov/react-core/NavHorizontalListItemLink': {};
+    '@digigov/react-core/NavMenu': {};
+    '@digigov/react-core/NavMenuContainer': {};
+    '@digigov/react-core/NavMenuContainerContent': {};
+    '@digigov/react-core/NavMenuContainerContentList': {};
+    '@digigov/react-core/NavMenuContainerContentListItem': {};
+    '@digigov/react-core/NavMenuContainerTitle': {};
     '@digigov/react-core/NavVertical': {};
     '@digigov/react-core/NavVerticalItem': {};
     '@digigov/react-core/NormalText': {};

package/registry.js

@@ -147,6 +147,8 @@ var _digigov_react_core_HeaderContent = _interopRequireWildcard(require("@digigo
 
 var _digigov_react_core_HeaderLogo = _interopRequireWildcard(require("@digigov/react-core/HeaderLogo"));
 
+var _digigov_react_core_HeaderNavMenuContent = _interopRequireWildcard(require("@digigov/react-core/HeaderNavMenuContent"));
+
 var _digigov_react_core_HeaderSecondaryLogo = _interopRequireWildcard(require("@digigov/react-core/HeaderSecondaryLogo"));
 
 var _digigov_react_core_HeaderSection = _interopRequireWildcard(require("@digigov/react-core/HeaderSection"));
@@ -201,6 +203,22 @@ var _digigov_react_core_NavHorizontalList = _interopRequireWildcard(require("@di
 
 var _digigov_react_core_NavHorizontalListItem = _interopRequireWildcard(require("@digigov/react-core/NavHorizontalListItem"));
 
+var _digigov_react_core_NavHorizontalListItemButton = _interopRequireWildcard(require("@digigov/react-core/NavHorizontalListItemButton"));
+
+var _digigov_react_core_NavHorizontalListItemLink = _interopRequireWildcard(require("@digigov/react-core/NavHorizontalListItemLink"));
+
+var _digigov_react_core_NavMenu = _interopRequireWildcard(require("@digigov/react-core/NavMenu"));
+
+var _digigov_react_core_NavMenuContainer = _interopRequireWildcard(require("@digigov/react-core/NavMenuContainer"));
+
+var _digigov_react_core_NavMenuContainerContent = _interopRequireWildcard(require("@digigov/react-core/NavMenuContainerContent"));
+
+var _digigov_react_core_NavMenuContainerContentList = _interopRequireWildcard(require("@digigov/react-core/NavMenuContainerContentList"));
+
+var _digigov_react_core_NavMenuContainerContentListItem = _interopRequireWildcard(require("@digigov/react-core/NavMenuContainerContentListItem"));
+
+var _digigov_react_core_NavMenuContainerTitle = _interopRequireWildcard(require("@digigov/react-core/NavMenuContainerTitle"));
+
 var _digigov_react_core_NavVertical = _interopRequireWildcard(require("@digigov/react-core/NavVertical"));
 
 var _digigov_react_core_NavVerticalItem = _interopRequireWildcard(require("@digigov/react-core/NavVerticalItem"));
@@ -392,6 +410,7 @@ var _default = {
   '@digigov/react-core/Header': lazyImport(_digigov_react_core_Header),
   '@digigov/react-core/HeaderContent': lazyImport(_digigov_react_core_HeaderContent),
   '@digigov/react-core/HeaderLogo': lazyImport(_digigov_react_core_HeaderLogo),
+  '@digigov/react-core/HeaderNavMenuContent': lazyImport(_digigov_react_core_HeaderNavMenuContent),
   '@digigov/react-core/HeaderSecondaryLogo': lazyImport(_digigov_react_core_HeaderSecondaryLogo),
   '@digigov/react-core/HeaderSection': lazyImport(_digigov_react_core_HeaderSection),
   '@digigov/react-core/HeaderSubtitle': lazyImport(_digigov_react_core_HeaderSubtitle),
@@ -419,6 +438,14 @@ var _default = {
   '@digigov/react-core/NavHorizontal': lazyImport(_digigov_react_core_NavHorizontal),
   '@digigov/react-core/NavHorizontalList': lazyImport(_digigov_react_core_NavHorizontalList),
   '@digigov/react-core/NavHorizontalListItem': lazyImport(_digigov_react_core_NavHorizontalListItem),
+  '@digigov/react-core/NavHorizontalListItemButton': lazyImport(_digigov_react_core_NavHorizontalListItemButton),
+  '@digigov/react-core/NavHorizontalListItemLink': lazyImport(_digigov_react_core_NavHorizontalListItemLink),
+  '@digigov/react-core/NavMenu': lazyImport(_digigov_react_core_NavMenu),
+  '@digigov/react-core/NavMenuContainer': lazyImport(_digigov_react_core_NavMenuContainer),
+  '@digigov/react-core/NavMenuContainerContent': lazyImport(_digigov_react_core_NavMenuContainerContent),
+  '@digigov/react-core/NavMenuContainerContentList': lazyImport(_digigov_react_core_NavMenuContainerContentList),
+  '@digigov/react-core/NavMenuContainerContentListItem': lazyImport(_digigov_react_core_NavMenuContainerContentListItem),
+  '@digigov/react-core/NavMenuContainerTitle': lazyImport(_digigov_react_core_NavMenuContainerTitle),
   '@digigov/react-core/NavVertical': lazyImport(_digigov_react_core_NavVertical),
   '@digigov/react-core/NavVerticalItem': lazyImport(_digigov_react_core_NavVerticalItem),
   '@digigov/react-core/NormalText': lazyImport(_digigov_react_core_NormalText),

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

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

package/src/Accordion/index.test.tsx

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

package/src/Accordion/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface AccordionProps extends BaseProps<'div'> {}
+/**
+ * Accordion is the main component for an accordion.
+ * Inside this component must be a list of AccordionSection components.
+ */
+export const Accordion = React.forwardRef<HTMLDivElement, AccordionProps>(
+  function Accordion({ className, children, ...props }, ref) {
+    return (
+      <Base
+        as="div"
+        ref={ref}
+        className={clsx(className, {
+          'govgr-accordion': true,
+        })}
+        {...props}
+      >
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default Accordion;

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

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the AccordionControls with button 1`] = `
+<ForwardRef(AccordionControls)>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-accordion__controls"
+  >
+    <div
+      className="govgr-accordion__controls"
+    >
+      <button>
+        open all
+      </button>
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(AccordionControls)>
+`;

package/src/AccordionControls/index.test.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import AccordionControls from '@digigov/react-core/AccordionControls';
+
+it('renders the AccordionControls with button', () => {
+  expect(
+    mount(
+      <AccordionControls>
+        <button>open all</button>
+      </AccordionControls>
+    )
+  ).toMatchSnapshot();
+});

package/src/AccordionControls/index.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface AccordionControlsProps extends BaseProps<'div'> {}
+/**
+ * AccordionControls is a component that provides controls for an accordion.
+ */
+export const AccordionControls = React.forwardRef<
+  HTMLDivElement,
+  AccordionControlsProps
+>(function AccordionControls({ className, children, ...props }, ref) {
+  return (
+    <Base
+      as="div"
+      ref={ref}
+      className={clsx(className, { 'govgr-accordion__controls': true })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default AccordionControls;

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

@@ -0,0 +1,54 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the AccordionSection with no props 1`] = `
+<ForwardRef(AccordionSection)>
+  <ForwardRef(Base)
+    as="details"
+    className="govgr-accordion__section"
+  >
+    <details
+      className="govgr-accordion__section"
+    >
+      hello
+    </details>
+  </ForwardRef(Base)>
+</ForwardRef(AccordionSection)>
+`;
+
+exports[`renders the AccordionSection with open=false 1`] = `
+<ForwardRef(AccordionSection)
+  open={false}
+>
+  <ForwardRef(Base)
+    as="details"
+    className="govgr-accordion__section"
+    open={false}
+  >
+    <details
+      className="govgr-accordion__section"
+      open={false}
+    >
+      hello
+    </details>
+  </ForwardRef(Base)>
+</ForwardRef(AccordionSection)>
+`;
+
+exports[`renders the AccordionSection with open=true 1`] = `
+<ForwardRef(AccordionSection)
+  open={true}
+>
+  <ForwardRef(Base)
+    as="details"
+    className="govgr-accordion__section"
+    open={true}
+  >
+    <details
+      className="govgr-accordion__section"
+      open={true}
+    >
+      hello
+    </details>
+  </ForwardRef(Base)>
+</ForwardRef(AccordionSection)>
+`;

package/src/AccordionSection/index.test.tsx

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

package/src/AccordionSection/index.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+export interface AccordionSectionProps extends BaseProps<'details'> {
+  /**
+   * open is optional. The default value is false.
+   * Add this prop when an AccordionSection should be open.
+   */
+  open?: boolean;
+}
+/**
+ * AccordionSection should be inside the Accordion component.
+ *
+ * Inside this component must place the AccordionSectionHeader and the AccordionSectionContent components.
+ */
+// eslint-disable-next-line react/display-name
+export const AccordionSection = React.forwardRef<
+  HTMLDetailsElement,
+  AccordionSectionProps
+>(function AccordionSection({ className, children, ...props }, ref) {
+  return (
+    <Base
+      as="details"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-accordion__section': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default AccordionSection;

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

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

package/src/AccordionSectionContent/index.test.tsx

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

package/src/AccordionSectionContent/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface AccordionSectionContentProps extends BaseProps<'div'> {}
+/**
+ * AccordionSectionContent should be inside the AccordionSection and it is the content of the section.
+ * The content is only visible when the AccordionSection is 'open'.
+ */
+export const AccordionSectionContent = React.forwardRef<
+  HTMLDivElement,
+  AccordionSectionContentProps
+>(function AccordionSectionContent({ className, children, ...props }, ref) {
+  return (
+    <Base
+      as="div"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-accordion__section-content': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default AccordionSectionContent;

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

@@ -0,0 +1,24 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the AccordionSectionHeader with no props 1`] = `
+<ForwardRef(AccordionSectionHeader)>
+  <ForwardRef(Base)
+    as="summary"
+    className="govgr-accordion__section-header"
+  >
+    <summary
+      className="govgr-accordion__section-header"
+    >
+      <h2
+        className="govgr-accordion__section-heading"
+      >
+        <span
+          className="govgr-accordion__section-button"
+        >
+          hello
+        </span>
+      </h2>
+    </summary>
+  </ForwardRef(Base)>
+</ForwardRef(AccordionSectionHeader)>
+`;

package/src/AccordionSectionHeader/index.test.tsx

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

package/src/AccordionSectionHeader/index.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface AccordionSectionHeaderProps extends BaseProps<'summary'> {}
+/**
+ * AccordionSectionHeader will be deprecated and implemented using AccordionSectionSummary and AccordionSectionSummaryHeading.
+ */
+export const AccordionSectionHeader = React.forwardRef<
+  HTMLElement,
+  AccordionSectionHeaderProps
+>(function AccordionSectionHeader({ className, children, ...props }, ref) {
+  return (
+    <Base
+      as="summary"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-accordion__section-header': true,
+      })}
+      {...props}
+    >
+      <h2
+        className={clsx({
+          'govgr-accordion__section-heading': true,
+        })}
+      >
+        <span
+          className={clsx({
+            'govgr-accordion__section-button': true,
+          })}
+        >
+          {children}
+        </span>
+      </h2>
+    </Base>
+  );
+});
+
+export default AccordionSectionHeader;

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

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the AccordionSectionSummary with no props 1`] = `
+<ForwardRef(AccordionSectionSummary)>
+  <ForwardRef(Base)
+    aria-level={2}
+    as="summary"
+    className="govgr-accordion__section-summary"
+    role="heading"
+  >
+    <summary
+      aria-level={2}
+      className="govgr-accordion__section-summary"
+      role="heading"
+    >
+      hello
+    </summary>
+  </ForwardRef(Base)>
+</ForwardRef(AccordionSectionSummary)>
+`;

package/src/AccordionSectionSummary/index.test.tsx

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

package/src/AccordionSectionSummary/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface AccordionSectionSummaryProps extends BaseProps<'summary'> {
+  ariaLevel?: 1 | 2 | 3 | 4 | 5 | 6;
+}
+/**
+ * AccordionSectionSummary is used as a wrapper component for AccordionSectionSummaryHeading.
+ */
+export const AccordionSectionSummary = React.forwardRef<
+  HTMLDivElement,
+  AccordionSectionSummaryProps
+>(function AccordionSectionSummary(
+  { className, ariaLevel = 2, children, ...props },
+  ref
+) {
+  return (
+    <Base
+      as="summary"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-accordion__section-summary': true,
+      })}
+      role="heading"
+      aria-level={ariaLevel}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default AccordionSectionSummary;

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

@@ -0,0 +1,26 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the AccordionSectionSummaryHeading with no props 1`] = `
+<ForwardRef(AccordionSectionSummaryHeading)>
+  <ForwardRef(Base)
+    aria-expanded={false}
+    as="h2"
+    className="govgr-accordion__section-heading"
+    onClick={[Function]}
+    role="button"
+  >
+    <h2
+      aria-expanded={false}
+      className="govgr-accordion__section-heading"
+      onClick={[Function]}
+      role="button"
+    >
+      <span
+        className="govgr-accordion__section-button"
+      >
+        hello
+      </span>
+    </h2>
+  </ForwardRef(Base)>
+</ForwardRef(AccordionSectionSummaryHeading)>
+`;

package/src/AccordionSectionSummaryHeading/index.test.tsx

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

package/src/AccordionSectionSummaryHeading/index.tsx

@@ -0,0 +1,44 @@
+import React, { useState } from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface AccordionSectionSummaryHeadingProps extends BaseProps<'h2'> {}
+/**
+ * AccordionSectionSummaryHeading should be placed inside AccordionSectionSummary.
+ */
+export const AccordionSectionSummaryHeading = React.forwardRef<
+  HTMLHeadingElement,
+  AccordionSectionSummaryHeadingProps
+>(function AccordionSectionSummaryHeading(
+  { className, children, ...props },
+  ref
+) {
+  const toggleExpanded = () => {
+    setExpanded(!isExpanded);
+  };
+  const [isExpanded, setExpanded] = useState(false);
+
+  return (
+    <Base
+      as="h2"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-accordion__section-heading': true,
+      })}
+      {...props}
+      role="button"
+      aria-expanded={isExpanded}
+      onClick={toggleExpanded}
+    >
+      <span
+        className={clsx({
+          'govgr-accordion__section-button': true,
+        })}
+      >
+        {children}
+      </span>
+    </Base>
+  );
+});
+
+export default AccordionSectionSummaryHeading;