@digigov/react-core 0.18.1 → 0.19.0

package/src/GovGRLogo/index.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+import logo from '@digigov/react-core/GovGRLogo/govgr-logo-base64';
+import logoInverted from '@digigov/react-core/GovGRLogo/govgr-logo-blue-base64';
+export interface GovGRLogoProps extends BaseProps<'a'> {}
+/**
+ * Use this component anywhere you what to provide the gov.gr logo.
+ *  */
+export const GovGRLogo = React.forwardRef<HTMLAnchorElement, GovGRLogoProps>(
+  function GovGRLogo(
+    { href = 'https://www.gov.gr/', className, ...props },
+    ref
+  ) {
+    return (
+      <Base
+        as="a"
+        href={href}
+        ref={ref}
+        className={clsx(className, { 'govgr-header-link': true })}
+        {...props}
+      >
+        <img
+          src={logo}
+          className={clsx(className, {
+            'govgr-header-logo': true,
+          })}
+          alt="gov.gr logo"
+        />
+        <img
+          src={logoInverted}
+          className={clsx(className, {
+            'govgr-header-logo-inverted': true,
+          })}
+          alt="gov.gr logo"
+        />
+      </Base>
+    );
+  }
+);
+
+export default GovGRLogo;

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

@@ -0,0 +1,135 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the Grid with \`container\` props 1`] = `
+<ForwardRef(Grid)
+  container={true}
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-grid"
+  >
+    <div
+      className="govgr-grid"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Grid)>
+`;
+
+exports[`renders the Grid with \`inline\` props 1`] = `
+<ForwardRef(Grid)
+  inline={true}
+>
+  <ForwardRef(Base)
+    as="div"
+    className=""
+  >
+    <div
+      className=""
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Grid)>
+`;
+
+exports[`renders the Grid with \`lg\` props 1`] = `
+<ForwardRef(Grid)
+  lg={6}
+>
+  <ForwardRef(Base)
+    as="div"
+    className="lg:govgr-grid__col-span-6"
+  >
+    <div
+      className="lg:govgr-grid__col-span-6"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Grid)>
+`;
+
+exports[`renders the Grid with \`md\` props 1`] = `
+<ForwardRef(Grid)
+  md={6}
+>
+  <ForwardRef(Base)
+    as="div"
+    className="md:govgr-grid__col-span-6"
+  >
+    <div
+      className="md:govgr-grid__col-span-6"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Grid)>
+`;
+
+exports[`renders the Grid with \`sm\` props 1`] = `
+<ForwardRef(Grid)
+  sm={6}
+>
+  <ForwardRef(Base)
+    as="div"
+    className="sm:govgr-grid__col-span-6"
+  >
+    <div
+      className="sm:govgr-grid__col-span-6"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Grid)>
+`;
+
+exports[`renders the Grid with \`spacing\` props 1`] = `
+<ForwardRef(Grid)
+  spacing={2}
+>
+  <ForwardRef(Base)
+    as="div"
+    className=""
+  >
+    <div
+      className=""
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Grid)>
+`;
+
+exports[`renders the Grid with \`xl\` props 1`] = `
+<ForwardRef(Grid)
+  xl={6}
+>
+  <ForwardRef(Base)
+    as="div"
+    className="xl:govgr-grid__col-span-6"
+  >
+    <div
+      className="xl:govgr-grid__col-span-6"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Grid)>
+`;
+
+exports[`renders the Grid with no props 1`] = `
+<ForwardRef(Grid)>
+  <ForwardRef(Base)
+    as="div"
+    className=""
+  >
+    <div
+      className=""
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Grid)>
+`;

package/src/Grid/index.test.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import Grid from '@digigov/react-core/Grid';
+
+it('renders the Grid with no props', () => {
+  expect(mount(<Grid>hello</Grid>)).toMatchSnapshot();
+});
+it('renders the Grid with `container` props', () => {
+  expect(mount(<Grid container>hello</Grid>)).toMatchSnapshot();
+});
+it('renders the Grid with `inline` props', () => {
+  expect(mount(<Grid inline>hello</Grid>)).toMatchSnapshot();
+});
+it('renders the Grid with `spacing` props', () => {
+  expect(mount(<Grid spacing={2}>hello</Grid>)).toMatchSnapshot();
+});
+it('renders the Grid with `sm` props', () => {
+  expect(mount(<Grid sm={6}>hello</Grid>)).toMatchSnapshot();
+});
+it('renders the Grid with `lg` props', () => {
+  expect(mount(<Grid lg={6}>hello</Grid>)).toMatchSnapshot();
+});
+it('renders the Grid with `md` props', () => {
+  expect(mount(<Grid md={6}>hello</Grid>)).toMatchSnapshot();
+});
+it('renders the Grid with `xl` props', () => {
+  expect(mount(<Grid xl={6}>hello</Grid>)).toMatchSnapshot();
+});

package/src/Grid/index.tsx

@@ -0,0 +1,126 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+type GridValues = 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export interface GridProps extends BaseProps<'div' | 'aside' | 'main'> {
+  ref?: React.Ref<HTMLDivElement>;
+  container?: boolean;
+  item?: boolean;
+  inline?: boolean;
+  spacing?: 1 | 2 | 4 | 6 | 8 | 10 | 12;
+  xs?: GridValues;
+  sm?: GridValues;
+  md?: GridValues;
+  lg?: GridValues;
+  xl?: GridValues;
+}
+/**
+ * Grid is used to arrange other components in complex grid configurations of rows and columns.
+ */
+export const Grid = React.forwardRef<HTMLDivElement, GridProps>(function Grid(
+  {
+    className,
+    children,
+    container = false,
+    item = true,
+    spacing,
+    inline,
+    xs,
+    sm,
+    md,
+    lg,
+    xl,
+    as,
+    ...props
+  },
+  ref
+) {
+  return (
+    <Base
+      as={as || 'div'}
+      ref={ref}
+      className={clsx(className, {
+        'govgr-grid': container === true,
+        'govgr-grid-inline': container === true && inline === true,
+        [`xs:govgr-grid__col-auto`]: item && xs === 'auto',
+        [`xs:govgr-grid__col-span-1`]: item && xs === 1,
+        [`xs:govgr-grid__col-span-2`]: item && xs === 2,
+        [`xs:govgr-grid__col-span-3`]: item && xs === 3,
+        [`xs:govgr-grid__col-span-4`]: item && xs === 4,
+        [`xs:govgr-grid__col-span-5`]: item && xs === 5,
+        [`xs:govgr-grid__col-span-6`]: item && xs === 6,
+        [`xs:govgr-grid__col-span-7`]: item && xs === 7,
+        [`xs:govgr-grid__col-span-8`]: item && xs === 8,
+        [`xs:govgr-grid__col-span-9`]: item && xs === 9,
+        [`xs:govgr-grid__col-span-10`]: item && xs === 10,
+        [`xs:govgr-grid__col-span-11`]: item && xs === 11,
+        [`xs:govgr-grid__col-span-12`]: item && xs === 12,
+        [`govgr-grid__gap-1`]: container && spacing === 1,
+        [`govgr-grid__gap-2`]: container && spacing === 2,
+        [`govgr-grid__gap-4`]: container && spacing === 4,
+        [`govgr-grid__gap-6`]: container && spacing === 6,
+        [`govgr-grid__gap-8`]: container && spacing === 8,
+        [`govgr-grid__gap-10`]: container && spacing === 10,
+        [`govgr-grid__gap-12`]: container && spacing === 12,
+        [`sm:govgr-grid__col-auto`]: item && sm === 'auto',
+        [`sm:govgr-grid__col-span-1`]: item && sm === 1,
+        [`sm:govgr-grid__col-span-2`]: item && sm === 2,
+        [`sm:govgr-grid__col-span-3`]: item && sm === 3,
+        [`sm:govgr-grid__col-span-4`]: item && sm === 4,
+        [`sm:govgr-grid__col-span-5`]: item && sm === 5,
+        [`sm:govgr-grid__col-span-6`]: item && sm === 6,
+        [`sm:govgr-grid__col-span-7`]: item && sm === 7,
+        [`sm:govgr-grid__col-span-8`]: item && sm === 8,
+        [`sm:govgr-grid__col-span-9`]: item && sm === 9,
+        [`sm:govgr-grid__col-span-10`]: item && sm === 10,
+        [`sm:govgr-grid__col-span-11`]: item && sm === 11,
+        [`sm:govgr-grid__col-span-12`]: item && sm === 12,
+        [`md:govgr-grid__col-auto`]: item && md === 'auto',
+        [`md:govgr-grid__col-span-1`]: item && md === 1,
+        [`md:govgr-grid__col-span-2`]: item && md === 2,
+        [`md:govgr-grid__col-span-3`]: item && md === 3,
+        [`md:govgr-grid__col-span-4`]: item && md === 4,
+        [`md:govgr-grid__col-span-5`]: item && md === 5,
+        [`md:govgr-grid__col-span-6`]: item && md === 6,
+        [`md:govgr-grid__col-span-7`]: item && md === 7,
+        [`md:govgr-grid__col-span-8`]: item && md === 8,
+        [`md:govgr-grid__col-span-9`]: item && md === 9,
+        [`md:govgr-grid__col-span-10`]: item && md === 10,
+        [`md:govgr-grid__col-span-11`]: item && md === 11,
+        [`md:govgr-grid__col-span-12`]: item && md === 12,
+        [`lg:govgr-grid__col-auto`]: item && lg === 'auto',
+        [`lg:govgr-grid__col-span-1`]: item && lg === 1,
+        [`lg:govgr-grid__col-span-2`]: item && lg === 2,
+        [`lg:govgr-grid__col-span-3`]: item && lg === 3,
+        [`lg:govgr-grid__col-span-4`]: item && lg === 4,
+        [`lg:govgr-grid__col-span-5`]: item && lg === 5,
+        [`lg:govgr-grid__col-span-6`]: item && lg === 6,
+        [`lg:govgr-grid__col-span-7`]: item && lg === 7,
+        [`lg:govgr-grid__col-span-8`]: item && lg === 8,
+        [`lg:govgr-grid__col-span-9`]: item && lg === 9,
+        [`lg:govgr-grid__col-span-10`]: item && lg === 10,
+        [`lg:govgr-grid__col-span-11`]: item && lg === 11,
+        [`lg:govgr-grid__col-span-12`]: item && lg === 12,
+        [`xl:govgr-grid__col-auto`]: item && xl === 'auto',
+        [`xl:govgr-grid__col-span-1`]: item && xl === 1,
+        [`xl:govgr-grid__col-span-2`]: item && xl === 2,
+        [`xl:govgr-grid__col-span-3`]: item && xl === 3,
+        [`xl:govgr-grid__col-span-4`]: item && xl === 4,
+        [`xl:govgr-grid__col-span-5`]: item && xl === 5,
+        [`xl:govgr-grid__col-span-6`]: item && xl === 6,
+        [`xl:govgr-grid__col-span-7`]: item && xl === 7,
+        [`xl:govgr-grid__col-span-8`]: item && xl === 8,
+        [`xl:govgr-grid__col-span-9`]: item && xl === 9,
+        [`xl:govgr-grid__col-span-10`]: item && xl === 10,
+        [`xl:govgr-grid__col-span-11`]: item && xl === 11,
+        [`xl:govgr-grid__col-span-12`]: item && xl === 12,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default Grid;

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

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

package/src/Header/index.test.tsx

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

package/src/Header/index.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface HeaderProps extends BaseProps<'header'> {}
+/**
+ * Header represents a container for govgr header information.
+ * This elememts is placed at the top of the page
+ */
+export const Header = React.forwardRef<HTMLElement, HeaderProps>(
+  function Header({ className, children, ...props }, ref) {
+    return (
+      <Base
+        as="header"
+        role="banner"
+        ref={ref}
+        className={clsx(className, {
+          'govgr-header': true,
+        })}
+        {...props}
+      >
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default Header;

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

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

package/src/HeaderContent/index.test.tsx

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

package/src/HeaderContent/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface HeaderContentProps extends BaseProps<'div'> {}
+/**
+ * HeaderContent is used inside HeaderSection as a wrapper for the header items(eg HeaderTitle, HeaderLogo etc)
+ */
+export const HeaderContent = React.forwardRef<
+  HTMLDivElement,
+  HeaderContentProps
+>(function HeaderContent({ className, children, ...props }, ref) {
+  return (
+    <Base
+      as="div"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-header__content': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default HeaderContent;

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

@@ -0,0 +1,18 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the HeaderLogo with no props 1`] = `
+<ForwardRef(HeaderLogo)>
+  <ForwardRef(Base)
+    as="a"
+    className="govgr-header-link"
+  >
+    <a
+      className="govgr-header-link"
+    >
+      <img
+        className="govgr-header-logo"
+      />
+    </a>
+  </ForwardRef(Base)>
+</ForwardRef(HeaderLogo)>
+`;

package/src/HeaderLogo/index.test.tsx

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

package/src/HeaderLogo/index.tsx

@@ -0,0 +1,45 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface HeaderLogoProps extends BaseProps<'a'> {
+  /**
+   * src is optional.
+   */
+  src?: string;
+  /**
+   * href is optional.
+   */
+  href?: string;
+  /**
+   * href is optional.
+   */
+  altText?: string;
+}
+/**
+ * Use this component inside the Header to provide a logo.
+ */
+export const HeaderLogo = React.forwardRef<HTMLAnchorElement, HeaderLogoProps>(
+  function HeaderLogo({ href, src, altText, className, ...props }, ref) {
+    return (
+      <Base
+        as="a"
+        href={href}
+        ref={ref}
+        className={clsx(className, {
+          'govgr-header-link': true,
+        })}
+        {...props}
+      >
+        <img
+          src={src}
+          className={clsx(className, {
+            'govgr-header-logo': true,
+          })}
+          alt={altText}
+        />
+      </Base>
+    );
+  }
+);
+export default HeaderLogo;

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

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

package/src/HeaderNavMenuContent/index.test.tsx

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

package/src/HeaderNavMenuContent/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface HeaderNavMenuContentProps extends BaseProps<'div'> {}
+/**
+ *  Use HeaderMenuContent inside HeaderSection as a wrapper for the header items(eg HeaderTitle, HeaderLog,
+ *  NavHorizontaList, SVG-icons  etc).
+ *  HeaderMenuContent must only used when we use NavHorizontaList menu.
+ */
+export const HeaderNavMenuContent = React.forwardRef<
+  HTMLDivElement,
+  HeaderNavMenuContentProps
+>(function HeaderNavMenuContent({ className, children, ...props }, ref) {
+  return (
+    <Base
+      as="div"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-header-nav-menu__content': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default HeaderNavMenuContent;

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

@@ -0,0 +1,48 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the HeaderSecondaryLogo with src and alt 1`] = `
+<ForwardRef(HeaderSecondaryLogo)
+  altText="minedu logo"
+  src="https://dilosi.services.gov.gr/minedu-logo.svg"
+>
+  <ForwardRef(Base)
+    as="a"
+    className="govgr-header-link"
+  >
+    <a
+      className="govgr-header-link"
+    >
+      <img
+        alt="minedu logo"
+        className="govgr-header-secondary-logo"
+        src="https://dilosi.services.gov.gr/minedu-logo.svg"
+      />
+    </a>
+  </ForwardRef(Base)>
+</ForwardRef(HeaderSecondaryLogo)>
+`;
+
+exports[`renders the HeaderSecondaryLogo with src, href and alt 1`] = `
+<ForwardRef(HeaderSecondaryLogo)
+  altText="minedu logo"
+  href="https://www.minedu.gov.gr/"
+  src="https://dilosi.services.gov.gr/minedu-logo.svg"
+>
+  <ForwardRef(Base)
+    as="a"
+    className="govgr-header-link"
+    href="https://www.minedu.gov.gr/"
+  >
+    <a
+      className="govgr-header-link"
+      href="https://www.minedu.gov.gr/"
+    >
+      <img
+        alt="minedu logo"
+        className="govgr-header-secondary-logo"
+        src="https://dilosi.services.gov.gr/minedu-logo.svg"
+      />
+    </a>
+  </ForwardRef(Base)>
+</ForwardRef(HeaderSecondaryLogo)>
+`;

package/src/HeaderSecondaryLogo/index.test.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import HeaderSecondaryLogo from '@digigov/react-core/HeaderSecondaryLogo';
+
+it('renders the HeaderSecondaryLogo with src and alt', () => {
+  expect(
+    mount(
+      <HeaderSecondaryLogo
+        src="https://dilosi.services.gov.gr/minedu-logo.svg"
+        altText="minedu logo"
+      ></HeaderSecondaryLogo>
+    )
+  ).toMatchSnapshot();
+});
+it('renders the HeaderSecondaryLogo with src, href and alt', () => {
+  expect(
+    mount(
+      <HeaderSecondaryLogo
+        src="https://dilosi.services.gov.gr/minedu-logo.svg"
+        href="https://www.minedu.gov.gr/"
+        altText="minedu logo"
+      ></HeaderSecondaryLogo>
+    )
+  ).toMatchSnapshot();
+});