@digigov/react-core 0.2.0 → 0.3.0

package/src/AccordionSection/index.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import clsx from 'clsx';
-
 type DivElementAttributes = JSX.IntrinsicElements['div'];
 export interface AccordionSectionProps extends DivElementAttributes {
   /**
@@ -13,21 +12,21 @@ export interface AccordionSectionProps extends DivElementAttributes {
  * 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<
   HTMLDivElement,
   AccordionSectionProps
->(function AccordionSection({ open, className, children, ...props }, ref) {
+>(function AccordionSection({ className, children, ...props }, ref) {
   return (
-    <div
+    <details
       ref={ref}
       className={clsx(className, {
         'govgr-accordion__section': true,
-        'govgr-accordion__section-open': open === true,
       })}
       {...props}
     >
       {children}
-    </div>
+    </details>
   );
 });
 

package/src/AccordionSectionHeader/index.tsx

@@ -11,7 +11,7 @@ export const AccordionSectionHeader = React.forwardRef<
   AccordionSectionHeaderProps
 >(function AccordionSectionHeader({ className, children, ...props }, ref) {
   return (
-    <div
+    <summary
       ref={ref}
       className={clsx(className, {
         'govgr-accordion__section-header': true,
@@ -31,7 +31,7 @@ export const AccordionSectionHeader = React.forwardRef<
           {children}
         </span>
       </h2>
-    </div>
+    </summary>
   );
 });
 

package/src/BackLink/index.tsx

@@ -16,6 +16,9 @@ export const BackLink = React.forwardRef<HTMLAnchorElement, BackLinkProps>(
     return (
       <a
         href={href}
+        onClick={() => {
+          !href && window.history.back();
+        }}
         ref={ref}
         className={clsx(className, {
           'govgr-back-link': true,

package/src/ButtonLink/index.test.tsx

@@ -0,0 +1,56 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import ButtonLink from '@digigov/react-core/ButtonLink';
+
+it('renders the ButtonLink with no props', () => {
+  expect(mount(<ButtonLink>hello</ButtonLink>)).toMatchSnapshot();
+});
+it('renders the ButtonLink with color=primary', () => {
+  expect(
+    mount(<ButtonLink color={'primary'}>hello</ButtonLink>)
+  ).toMatchSnapshot();
+});
+it('renders the ButtonLink with color=secondary', () => {
+  expect(
+    mount(<ButtonLink color={'secondary'}>hello</ButtonLink>)
+  ).toMatchSnapshot();
+});
+it('renders the ButtonLink with color=warning', () => {
+  expect(
+    mount(<ButtonLink color={'warning'}>hello</ButtonLink>)
+  ).toMatchSnapshot();
+});
+it('renders the ButtonLink with href=#', () => {
+  expect(mount(<ButtonLink href={'#'}>hello</ButtonLink>)).toMatchSnapshot();
+});
+it('renders the ButtonLink with disabled=false', () => {
+  expect(mount(<ButtonLink>hello</ButtonLink>)).toMatchSnapshot();
+});
+it('renders the ButtonLink with color=primary with href=#', () => {
+  expect(
+    mount(
+      <ButtonLink href={'#'} color={'primary'}>
+        hello
+      </ButtonLink>
+    )
+  ).toMatchSnapshot();
+});
+it('renders the ButtonLink with color=secondary with href=#', () => {
+  expect(
+    mount(
+      <ButtonLink href={'#'} color={'secondary'}>
+        hello
+      </ButtonLink>
+    )
+  ).toMatchSnapshot();
+});
+it('renders the ButtonLink with color=warning with href=#', () => {
+  expect(
+    mount(
+      <ButtonLink href={'#'} color={'warning'}>
+        hello
+      </ButtonLink>
+    )
+  ).toMatchSnapshot();
+});

package/src/ButtonLink/index.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import clsx from 'clsx';
+
+type LinkElementAttributes = JSX.IntrinsicElements['a'];
+export interface ButtonLinkProps extends LinkElementAttributes {
+  /**
+   * color is optional.
+   * 'primary' color is used for the main call to action on a page.
+   * 'secondary' color is used for secondary calls to action on a page.
+   * 'warning' color is used to make users think carefully before they use them.
+   * The default value is 'primary'.
+   */
+  color?: 'primary' | 'secondary' | 'warning';
+}
+/**
+ * Use the Button component to help users carry out an action.
+ */
+export const ButtonLink = React.forwardRef<HTMLAnchorElement, ButtonLinkProps>(
+  function ButtonLink(
+    { color = 'primary', className, children, ...props },
+    ref
+  ) {
+    return (
+      <a
+        ref={ref}
+        className={clsx(className, {
+          'govgr-btn': true,
+          'govgr-btn-primary': color === 'primary',
+          'govgr-btn-secondary': color === 'secondary',
+          'govgr-btn-warning': color === 'warning',
+        })}
+        {...props}
+      >
+        {children}
+      </a>
+    );
+  }
+);
+
+export default ButtonLink;

package/src/CallToAction/index.tsx

@@ -1,40 +1,34 @@
 import React from 'react';
 import clsx from 'clsx';
+import ButtonLink, { ButtonLinkProps } from '@digigov/react-core/ButtonLink';
 
-type ButtonElementAttributes = JSX.IntrinsicElements['button'];
-export interface CallToActionProps extends ButtonElementAttributes {
-  /**
-   * disabled is optional.
-   */
-  disabled?: boolean;
+export interface CallToActionProps extends ButtonLinkProps {
+  ref?: React.Ref<HTMLAnchorElement>;
 }
 /**
  * Use this button for the main call to action on your service’s start page.
  */
 export const CallToAction = React.forwardRef<
-  HTMLButtonElement,
+  HTMLAnchorElement,
   CallToActionProps
->(function CallToAction({ disabled, className, children, ...props }, ref) {
+>(function CallToAction({ className, children, ...props }, ref) {
   return (
-    <button
-      disabled={disabled}
+    <ButtonLink
       ref={ref}
       className={clsx(className, {
         'govgr-btn': true,
         'govgr-btn-primary': true,
         'govgr-btn-cta': true,
-        'govgr-btn-disabled': disabled === true,
       })}
       {...props}
     >
       {children}
       <span
-        ref={ref}
         className={clsx(className, {
           'right-arrow': true,
         })}
       ></span>
-    </button>
+    </ButtonLink>
   );
 });
 

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

@@ -1,5 +1,47 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders the CheckboxItem with \`name\` prop 1`] = `
+<ForwardRef(CheckboxItem)
+  name="example"
+>
+  <div
+    className="govgr-checkboxes__item"
+  >
+    <input
+      className="govgr-checkboxes__input"
+      name="example"
+      type="checkbox"
+    />
+    <label
+      className="govgr-label govgr-checkboxes__label"
+    >
+      hello
+    </label>
+  </div>
+</ForwardRef(CheckboxItem)>
+`;
+
+exports[`renders the CheckboxItem with \`value\` prop 1`] = `
+<ForwardRef(CheckboxItem)
+  value="example"
+>
+  <div
+    className="govgr-checkboxes__item"
+  >
+    <input
+      className="govgr-checkboxes__input"
+      type="checkbox"
+      value="example"
+    />
+    <label
+      className="govgr-label govgr-checkboxes__label"
+    >
+      hello
+    </label>
+  </div>
+</ForwardRef(CheckboxItem)>
+`;
+
 exports[`renders the CheckboxItem with no props 1`] = `
 <ForwardRef(CheckboxItem)>
   <div

package/src/Container/index.tsx

@@ -17,7 +17,6 @@ export const Container = React.forwardRef<HTMLDivElement, ContainerProps>(
         {...props}
       >
         <div
-          ref={ref}
           className={clsx({
             'govgr-main-wrapper': true,
           })}

package/src/GovGRLogo/index.tsx

@@ -2,12 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 
 type AElementAttributes = JSX.IntrinsicElements['a'];
-export interface GovGRLogoProps extends AElementAttributes {
-  /**
-   * src is optional.
-   */
-  src?: string;
-}
+export interface GovGRLogoProps extends AElementAttributes { }
 /**
  * Use this component anywhere you what to provide the gov.gr logo.
  *  */

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

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

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,121 @@
+import React from 'react';
+import clsx from 'clsx';
+
+type DivElementAttributes = JSX.IntrinsicElements['div'];
+type GridValues = 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
+export interface GridProps extends DivElementAttributes {
+  ref?: React.Ref<HTMLDivElement>;
+  container?: boolean;
+  item?: boolean;
+  inline?: boolean;
+  spacing?: 1 | 2 | 4 | 6;
+  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,
+    ...props
+  },
+  ref
+) {
+  return (
+    <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,
+        [`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}
+    </div>
+  );
+});
+
+export default Grid;

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

@@ -3,7 +3,7 @@
 exports[`renders the HeaderLogo with no props 1`] = `
 <ForwardRef(HeaderLogo)>
   <a
-    className="govuk-header-link"
+    className="govgr-header-link"
     href="https://www.gov.gr/"
   >
     <img

package/src/HeaderLogo/index.tsx

@@ -2,23 +2,32 @@ import React from 'react';
 import clsx from 'clsx';
 
 type AElementAttributes = JSX.IntrinsicElements['a'];
-export interface HeaderLogoProps extends AElementAttributes {}
+export interface HeaderLogoProps extends AElementAttributes {
+  /**
+   * src is optional.
+   */
+  src?: string;
+  /**
+   * href is optional.
+   */
+  href?: string;
+}
 /**
- * Use this component inside the Header to provide the gov.gr logo.
+ * Use this component inside the Header to provide a logo.
  */
 export const HeaderLogo = React.forwardRef<HTMLAnchorElement, HeaderLogoProps>(
-  function HeaderLogo({ className, ...props }, ref) {
+  function HeaderLogo({ href, src, className, ...props }, ref) {
     return (
       <a
-        href="https://www.gov.gr/"
+        href={href}
         ref={ref}
         className={clsx(className, {
-          'govuk-header-link': true,
+          'govgr-header-link': true,
         })}
         {...props}
       >
         <img
-          src="https://www.gov.gr/gov_gr_logo.svg"
+          src={src}
           className={clsx(className, {
             'govgr-header-logo': true,
           })}

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

@@ -5,7 +5,7 @@ exports[`renders the HeaderSecondaryLogo with src 1`] = `
   src="https://dilosi.services.gov.gr/minedu-logo.svg"
 >
   <a
-    className="govuk-header-link"
+    className="govgr-header-link"
   >
     <img
       className="govgr-header-secondary-logo"
@@ -21,7 +21,7 @@ exports[`renders the HeaderSecondaryLogo with src and href 1`] = `
   src="https://dilosi.services.gov.gr/minedu-logo.svg"
 >
   <a
-    className="govuk-header-link"
+    className="govgr-header-link"
     href="https://www.minedu.gov.gr/"
   >
     <img

package/src/HeaderSecondaryLogo/index.tsx

@@ -25,7 +25,7 @@ export const HeaderSecondaryLogo = React.forwardRef<
       href={href}
       ref={ref}
       className={clsx(className, {
-        'govuk-header-link': true,
+        'govgr-header-link': true,
       })}
       {...props}
     >

package/src/Heading/index.tsx

@@ -12,18 +12,37 @@ export interface HeadingProps extends H1ElementAttributes {
    * element is optional. 'h1' is the default value.
    * Use 'h1' when this heading is the main page title.
    */
-  element?: 'h1' | 'h2' | 'h3' | 'h4';
+  element?: HeadingHTMLElements;
 }
+export type HeadingHTMLElements = 'h1' | 'h2' | 'h3' | 'h4';
+
+const getComponentBySize = (
+  size: HeadingProps['size']
+): HeadingHTMLElements => {
+  switch (size) {
+    case 'xl':
+      return 'h1';
+    case 'l':
+      return 'h2';
+    case 'm':
+      return 'h3';
+    case 's':
+      return 'h4';
+    default:
+      return 'h1';
+  }
+};
+
 /**
  * Heading component is used to place a title in a the page.
  * Heading component must be wraped inside Main component.
  */
 export const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(
   function Heading(
-    { size = 'xl', element = 'h1', className, children, ...props },
+    { size = 'xl', element, className, children, ...props },
     ref
   ) {
-    const Component = element;
+    const Component = element ? element : getComponentBySize(size);
     return (
       <Component
         ref={ref}