@digigov/react-core 0.18.1 → 0.19.0

package/src/HeaderSecondaryLogo/index.tsx

@@ -0,0 +1,52 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface HeaderSecondaryLogoProps extends BaseProps<'a'> {
+  /**
+   * src is needed to provide the url that we get the logo from.
+   */
+  src: string;
+
+  /**
+   * href provides the url that the logo leads to if clicked.
+   */
+  href?: string;
+
+  /**
+   * href provides the alternative text for the img tag.
+   */
+  altText?: string;
+}
+/**
+ * HeaderSecondaryLogo is used inside Header for providing additional logos.
+ */
+export const HeaderSecondaryLogo = React.forwardRef<
+  HTMLAnchorElement,
+  HeaderSecondaryLogoProps
+>(function HeaderSecondaryLogo(
+  { 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-secondary-logo': true,
+        })}
+        alt={altText}
+      />
+    </Base>
+  );
+});
+
+export default HeaderSecondaryLogo;

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

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

package/src/HeaderSection/index.test.tsx

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

package/src/HeaderSection/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface HeaderSectionProps extends BaseProps<'div'> {}
+/**
+ * HeaderSection is used inside Header component as a container for its items.
+ */
+export const HeaderSection = React.forwardRef<
+  HTMLDivElement,
+  HeaderSectionProps
+>(function HeaderSection({ className, children, ...props }, ref) {
+  return (
+    <Base
+      as="div"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-header__container': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default HeaderSection;

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

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

package/src/HeaderSubtitle/index.test.tsx

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

package/src/HeaderSubtitle/index.tsx

@@ -0,0 +1,20 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface HeaderSubtitleProps extends BaseProps<'div'> {}
+/**
+ * Details for the HeaderSubtitle.
+ */
+export const HeaderSubtitle = React.forwardRef<
+  HTMLDivElement,
+  HeaderSubtitleProps
+>(function HeaderSubtitle({ className, children, ...props }, ref) {
+  return (
+    <Base as="div" ref={ref} className={clsx(className, {})} {...props}>
+      {children}
+    </Base>
+  );
+});
+
+export default HeaderSubtitle;

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

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the HeaderTitle with href 1`] = `
+<ForwardRef(HeaderTitle)
+  href="https://government.gov.gr"
+>
+  <ForwardRef(Base)
+    as="a"
+    className="govgr-header-title"
+    href="https://government.gov.gr"
+  >
+    <a
+      className="govgr-header-title"
+      href="https://government.gov.gr"
+    >
+      hello
+    </a>
+  </ForwardRef(Base)>
+</ForwardRef(HeaderTitle)>
+`;
+
+exports[`renders the HeaderTitle with no props 1`] = `
+<ForwardRef(HeaderTitle)>
+  <ForwardRef(Base)
+    as="a"
+    className="govgr-header-title"
+    href="/"
+  >
+    <a
+      className="govgr-header-title"
+      href="/"
+    >
+      hello
+    </a>
+  </ForwardRef(Base)>
+</ForwardRef(HeaderTitle)>
+`;

package/src/HeaderTitle/index.test.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import HeaderTitle from '@digigov/react-core/HeaderTitle';
+
+it('renders the HeaderTitle with no props', () => {
+  expect(mount(<HeaderTitle>hello</HeaderTitle>)).toMatchSnapshot();
+});
+it('renders the HeaderTitle with href', () => {
+  expect(
+    mount(<HeaderTitle href="https://government.gov.gr">hello</HeaderTitle>)
+  ).toMatchSnapshot();
+});

package/src/HeaderTitle/index.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface HeaderTitleProps extends BaseProps<'a'> {
+  /**
+   * href is optionaland is used to provide the redirection url after clicking on the HeaderTitle.
+   */
+  href?: string;
+}
+/**
+ * Use this component inside HeaderContent to provide a title to the header.
+ */
+export const HeaderTitle = React.forwardRef<
+  HTMLAnchorElement,
+  HeaderTitleProps
+>(function HeaderTitle({ href = '/', className, children, ...props }, ref) {
+  return (
+    <Base
+      as="a"
+      href={href}
+      ref={ref}
+      className={clsx(className, {
+        'govgr-header-title': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default HeaderTitle;

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

@@ -0,0 +1,300 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the Heading with no props 1`] = `
+<ForwardRef(Heading)>
+  <ForwardRef(Base)
+    as="h1"
+    className="govgr-heading-xl"
+  >
+    <h1
+      className="govgr-heading-xl"
+    >
+      hello
+    </h1>
+  </ForwardRef(Base)>
+</ForwardRef(Heading)>
+`;
+
+exports[`renders the Heading with size=l 1`] = `
+<ForwardRef(Heading)
+  size="l"
+>
+  <ForwardRef(Base)
+    as="h2"
+    className="govgr-heading-l"
+  >
+    <h2
+      className="govgr-heading-l"
+    >
+      hello
+    </h2>
+  </ForwardRef(Base)>
+</ForwardRef(Heading)>
+`;
+
+exports[`renders the Heading with size=l and element h2 1`] = `
+<ForwardRef(Heading)
+  element="h2"
+  size="l"
+>
+  <ForwardRef(Base)
+    as="h2"
+    className="govgr-heading-l"
+  >
+    <h2
+      className="govgr-heading-l"
+    >
+      hello
+    </h2>
+  </ForwardRef(Base)>
+</ForwardRef(Heading)>
+`;
+
+exports[`renders the Heading with size=l and element h3 1`] = `
+<ForwardRef(Heading)
+  element="h3"
+  size="l"
+>
+  <ForwardRef(Base)
+    as="h3"
+    className="govgr-heading-l"
+  >
+    <h3
+      className="govgr-heading-l"
+    >
+      hello
+    </h3>
+  </ForwardRef(Base)>
+</ForwardRef(Heading)>
+`;
+
+exports[`renders the Heading with size=l and element h4 1`] = `
+<ForwardRef(Heading)
+  element="h4"
+  size="l"
+>
+  <ForwardRef(Base)
+    as="h4"
+    className="govgr-heading-l"
+  >
+    <h4
+      className="govgr-heading-l"
+    >
+      hello
+    </h4>
+  </ForwardRef(Base)>
+</ForwardRef(Heading)>
+`;
+
+exports[`renders the Heading with size=m 1`] = `
+<ForwardRef(Heading)
+  size="m"
+>
+  <ForwardRef(Base)
+    as="h3"
+    className="govgr-heading-m"
+  >
+    <h3
+      className="govgr-heading-m"
+    >
+      hello
+    </h3>
+  </ForwardRef(Base)>
+</ForwardRef(Heading)>
+`;
+
+exports[`renders the Heading with size=m and element h2 1`] = `
+<ForwardRef(Heading)
+  element="h2"
+  size="m"
+>
+  <ForwardRef(Base)
+    as="h2"
+    className="govgr-heading-m"
+  >
+    <h2
+      className="govgr-heading-m"
+    >
+      hello
+    </h2>
+  </ForwardRef(Base)>
+</ForwardRef(Heading)>
+`;
+
+exports[`renders the Heading with size=m and element h3 1`] = `
+<ForwardRef(Heading)
+  element="h3"
+  size="m"
+>
+  <ForwardRef(Base)
+    as="h3"
+    className="govgr-heading-m"
+  >
+    <h3
+      className="govgr-heading-m"
+    >
+      hello
+    </h3>
+  </ForwardRef(Base)>
+</ForwardRef(Heading)>
+`;
+
+exports[`renders the Heading with size=m and element h4 1`] = `
+<ForwardRef(Heading)
+  element="h4"
+  size="m"
+>
+  <ForwardRef(Base)
+    as="h4"
+    className="govgr-heading-m"
+  >
+    <h4
+      className="govgr-heading-m"
+    >
+      hello
+    </h4>
+  </ForwardRef(Base)>
+</ForwardRef(Heading)>
+`;
+
+exports[`renders the Heading with size=s 1`] = `
+<ForwardRef(Heading)
+  size="s"
+>
+  <ForwardRef(Base)
+    as="h4"
+    className="govgr-heading-s"
+  >
+    <h4
+      className="govgr-heading-s"
+    >
+      hello
+    </h4>
+  </ForwardRef(Base)>
+</ForwardRef(Heading)>
+`;
+
+exports[`renders the Heading with size=s and element h2 1`] = `
+<ForwardRef(Heading)
+  element="h2"
+  size="s"
+>
+  <ForwardRef(Base)
+    as="h2"
+    className="govgr-heading-s"
+  >
+    <h2
+      className="govgr-heading-s"
+    >
+      hello
+    </h2>
+  </ForwardRef(Base)>
+</ForwardRef(Heading)>
+`;
+
+exports[`renders the Heading with size=s and element h3 1`] = `
+<ForwardRef(Heading)
+  element="h3"
+  size="s"
+>
+  <ForwardRef(Base)
+    as="h3"
+    className="govgr-heading-s"
+  >
+    <h3
+      className="govgr-heading-s"
+    >
+      hello
+    </h3>
+  </ForwardRef(Base)>
+</ForwardRef(Heading)>
+`;
+
+exports[`renders the Heading with size=s and element h4 1`] = `
+<ForwardRef(Heading)
+  element="h4"
+  size="s"
+>
+  <ForwardRef(Base)
+    as="h4"
+    className="govgr-heading-s"
+  >
+    <h4
+      className="govgr-heading-s"
+    >
+      hello
+    </h4>
+  </ForwardRef(Base)>
+</ForwardRef(Heading)>
+`;
+
+exports[`renders the Heading with size=xl 1`] = `
+<ForwardRef(Heading)
+  size="xl"
+>
+  <ForwardRef(Base)
+    as="h1"
+    className="govgr-heading-xl"
+  >
+    <h1
+      className="govgr-heading-xl"
+    >
+      hello
+    </h1>
+  </ForwardRef(Base)>
+</ForwardRef(Heading)>
+`;
+
+exports[`renders the Heading with size=xl and element h2 1`] = `
+<ForwardRef(Heading)
+  element="h2"
+  size="xl"
+>
+  <ForwardRef(Base)
+    as="h2"
+    className="govgr-heading-xl"
+  >
+    <h2
+      className="govgr-heading-xl"
+    >
+      hello
+    </h2>
+  </ForwardRef(Base)>
+</ForwardRef(Heading)>
+`;
+
+exports[`renders the Heading with size=xl and element h3 1`] = `
+<ForwardRef(Heading)
+  element="h3"
+  size="xl"
+>
+  <ForwardRef(Base)
+    as="h3"
+    className="govgr-heading-xl"
+  >
+    <h3
+      className="govgr-heading-xl"
+    >
+      hello
+    </h3>
+  </ForwardRef(Base)>
+</ForwardRef(Heading)>
+`;
+
+exports[`renders the Heading with size=xl and element h4 1`] = `
+<ForwardRef(Heading)
+  element="h4"
+  size="xl"
+>
+  <ForwardRef(Base)
+    as="h4"
+    className="govgr-heading-xl"
+  >
+    <h4
+      className="govgr-heading-xl"
+    >
+      hello
+    </h4>
+  </ForwardRef(Base)>
+</ForwardRef(Heading)>
+`;

package/src/Heading/index.test.tsx

@@ -0,0 +1,144 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import Heading from '@digigov/react-core/Heading';
+
+it('renders the Heading with no props', () => {
+  expect(mount(<Heading>hello</Heading>)).toMatchSnapshot();
+});
+
+it('renders the Heading with size=xl', () => {
+  expect(mount(<Heading size={'xl'}>hello</Heading>)).toMatchSnapshot();
+});
+
+it('renders the Heading with size=l', () => {
+  expect(mount(<Heading size={'l'}>hello</Heading>)).toMatchSnapshot();
+});
+
+it('renders the Heading with size=m', () => {
+  expect(mount(<Heading size={'m'}>hello</Heading>)).toMatchSnapshot();
+});
+
+it('renders the Heading with size=s', () => {
+  expect(mount(<Heading size={'s'}>hello</Heading>)).toMatchSnapshot();
+});
+
+it('renders the Heading with size=s and element h2', () => {
+  expect(
+    mount(
+      <Heading size={'s'} element="h2">
+        hello
+      </Heading>
+    )
+  ).toMatchSnapshot();
+});
+
+it('renders the Heading with size=s and element h3', () => {
+  expect(
+    mount(
+      <Heading size={'s'} element="h3">
+        hello
+      </Heading>
+    )
+  ).toMatchSnapshot();
+});
+
+it('renders the Heading with size=s and element h4', () => {
+  expect(
+    mount(
+      <Heading size={'s'} element="h4">
+        hello
+      </Heading>
+    )
+  ).toMatchSnapshot();
+});
+
+it('renders the Heading with size=m and element h2', () => {
+  expect(
+    mount(
+      <Heading size={'m'} element="h2">
+        hello
+      </Heading>
+    )
+  ).toMatchSnapshot();
+});
+
+it('renders the Heading with size=m and element h3', () => {
+  expect(
+    mount(
+      <Heading size={'m'} element="h3">
+        hello
+      </Heading>
+    )
+  ).toMatchSnapshot();
+});
+
+it('renders the Heading with size=m and element h4', () => {
+  expect(
+    mount(
+      <Heading size={'m'} element="h4">
+        hello
+      </Heading>
+    )
+  ).toMatchSnapshot();
+});
+
+it('renders the Heading with size=l and element h2', () => {
+  expect(
+    mount(
+      <Heading size={'l'} element="h2">
+        hello
+      </Heading>
+    )
+  ).toMatchSnapshot();
+});
+
+it('renders the Heading with size=l and element h3', () => {
+  expect(
+    mount(
+      <Heading size={'l'} element="h3">
+        hello
+      </Heading>
+    )
+  ).toMatchSnapshot();
+});
+
+it('renders the Heading with size=l and element h4', () => {
+  expect(
+    mount(
+      <Heading size={'l'} element="h4">
+        hello
+      </Heading>
+    )
+  ).toMatchSnapshot();
+});
+
+it('renders the Heading with size=xl and element h2', () => {
+  expect(
+    mount(
+      <Heading size={'xl'} element="h2">
+        hello
+      </Heading>
+    )
+  ).toMatchSnapshot();
+});
+
+it('renders the Heading with size=xl and element h3', () => {
+  expect(
+    mount(
+      <Heading size={'xl'} element="h3">
+        hello
+      </Heading>
+    )
+  ).toMatchSnapshot();
+});
+
+it('renders the Heading with size=xl and element h4', () => {
+  expect(
+    mount(
+      <Heading size={'xl'} element="h4">
+        hello
+      </Heading>
+    )
+  ).toMatchSnapshot();
+});