@digigov/react-core 1.0.0-290a96e2 → 1.0.0-3bfc7d37

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

@@ -0,0 +1,118 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the Hint with  variants=[light, dark] and src props 1`] = `
+<ForwardRef(ImageLogoSet)
+  src="logo.png"
+  variants={
+    Array [
+      "light",
+      "dark",
+    ]
+  }
+>
+  <ForwardRef(ImageLogo)
+    key="light"
+    src="logo--light.png"
+    variant="light"
+  >
+    <ForwardRef(Base)
+      as="img"
+      className="govgr-image-logo--light"
+      printHidden={true}
+      src="logo--light.png"
+    >
+      <img
+        className="govgr-image-logo--light govgr-print-hidden"
+        src="logo--light.png"
+      />
+    </ForwardRef(Base)>
+  </ForwardRef(ImageLogo)>
+  <ForwardRef(ImageLogo)
+    key="dark"
+    src="logo--dark.png"
+    variant="dark"
+  >
+    <ForwardRef(Base)
+      as="img"
+      className="govgr-image-logo--dark"
+      printHidden={true}
+      src="logo--dark.png"
+    >
+      <img
+        className="govgr-image-logo--dark govgr-print-hidden"
+        src="logo--dark.png"
+      />
+    </ForwardRef(Base)>
+  </ForwardRef(ImageLogo)>
+</ForwardRef(ImageLogoSet)>
+`;
+
+exports[`renders the Hint with  variants=[light] and src props 1`] = `
+<ForwardRef(ImageLogoSet)
+  src="logo.png"
+  variants={
+    Array [
+      "light",
+    ]
+  }
+>
+  <ForwardRef(ImageLogo)
+    key="light"
+    src="logo--light.png"
+    variant="light"
+  >
+    <ForwardRef(Base)
+      as="img"
+      className="govgr-image-logo--light"
+      printHidden={true}
+      src="logo--light.png"
+    >
+      <img
+        className="govgr-image-logo--light govgr-print-hidden"
+        src="logo--light.png"
+      />
+    </ForwardRef(Base)>
+  </ForwardRef(ImageLogo)>
+</ForwardRef(ImageLogoSet)>
+`;
+
+exports[`renders the Hint with src prop 1`] = `
+<ForwardRef(ImageLogoSet)
+  src="logo.png"
+>
+  <ForwardRef(ImageLogo)
+    key="dark"
+    src="logo--dark.png"
+    variant="dark"
+  >
+    <ForwardRef(Base)
+      as="img"
+      className="govgr-image-logo--dark"
+      printHidden={true}
+      src="logo--dark.png"
+    >
+      <img
+        className="govgr-image-logo--dark govgr-print-hidden"
+        src="logo--dark.png"
+      />
+    </ForwardRef(Base)>
+  </ForwardRef(ImageLogo)>
+  <ForwardRef(ImageLogo)
+    key="light"
+    src="logo--light.png"
+    variant="light"
+  >
+    <ForwardRef(Base)
+      as="img"
+      className="govgr-image-logo--light"
+      printHidden={true}
+      src="logo--light.png"
+    >
+      <img
+        className="govgr-image-logo--light govgr-print-hidden"
+        src="logo--light.png"
+      />
+    </ForwardRef(Base)>
+  </ForwardRef(ImageLogo)>
+</ForwardRef(ImageLogoSet)>
+`;

package/src/ImageLogoSet/index.test.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import ImageLogoSet from '@digigov/react-core/ImageLogoSet';
+
+it('renders the Hint with src prop', () => {
+  expect(mount(<ImageLogoSet src='logo.png' />)).toMatchSnapshot();
+});
+
+
+it('renders the Hint with  variants=[light] and src props', () => {
+  expect(mount(<ImageLogoSet variants={['light']} src='logo.png' />)).toMatchSnapshot();
+});
+
+it('renders the Hint with  variants=[light, dark] and src props', () => {
+  expect(mount(<ImageLogoSet variants={['light', 'dark']} src='logo.png' />)).toMatchSnapshot();
+});

package/src/ImageLogoSet/index.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { BaseProps } from '@digigov/react-core/Base';
+import ImageLogo from '@digigov/react-core/ImageLogo';
+
+export interface ImageLogoSet extends BaseProps<'img'> {
+  /**
+   * src is optional.
+   * src is used to display images.
+   */
+  src?: string;
+  /**
+   * variant is optional.
+   * variant is used to display images depending the theme (dark, light).
+   */
+  variants?: Array<"dark" | "light">;
+}
+/**
+ * ImageLogoSet is used as image inverter depending the theme (dark, light).
+ * This component can't have children.
+ */
+export const ImageLogoSet = React.forwardRef<
+  HTMLImageElement,
+  ImageLogoSet
+>(function ImageLogoSet({ lang, src, variants = ['dark', 'light'], className, children, ...props }, ref) {
+  return (
+    <>
+      {variants.map((variant) => {
+        const imageSrc = src?.replace(/(\.[^\.]+)$/, `--${variant}$1`);
+        return <ImageLogo key={variant} ref={ref} variant={variant} src={imageSrc} {...props} />
+      })}
+    </>
+  )
+    ;
+});
+
+export default ImageLogoSet;

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

@@ -2,7 +2,7 @@
 
 exports[`renders the RadioItem  \`divider\` props 1`] = `
 <ForwardRef(RadioItem)
-  divider="ή"
+  dividerText="ή"
 >
   <ForwardRef(ChoiceDividerText)>
     <ForwardRef(Base)
@@ -91,7 +91,7 @@ exports[`renders the RadioItem  value props 1`] = `
 exports[`renders the RadioItem with \`name\`, \`disabled\`, \`divider\` and \`value\` props 1`] = `
 <ForwardRef(RadioItem)
   disabled={true}
-  divider="ή"
+  dividerText="ή"
   name="name"
   value="someValue"
 >

package/src/RadioItem/index.test.tsx

@@ -17,8 +17,8 @@ it('renders the RadioItem  value props', () => {
   ).toMatchSnapshot();
 });
 
-it('renders the RadioItem  `divider` props', () => {
-  expect(mount(<RadioItem divider={'ή'}>hello</RadioItem>)).toMatchSnapshot();
+it('renders the RadioItem  `dividerText` props', () => {
+  expect(mount(<RadioItem dividerText={'ή'}>hello</RadioItem>)).toMatchSnapshot();
 });
 
 it('renders the RadioItem with name and value props', () => {
@@ -45,10 +45,10 @@ it('renders the RadioItem with name disabled and value props', () => {
   ).toMatchSnapshot();
 });
 
-it('renders the RadioItem with `name`, `disabled`, `divider` and `value` props', () => {
+it('renders the RadioItem with `name`, `disabled`, `dividerText` and `value` props', () => {
   expect(
     mount(
-      <RadioItem name={'name'} value={'someValue'} divider={'ή'} disabled>
+      <RadioItem name={'name'} value={'someValue'} dividerText={'ή'} disabled>
         hello
       </RadioItem>
     )

package/src/RadioItem/index.tsx

@@ -6,11 +6,11 @@ import LabelContainer from '@digigov/react-core/LabelContainer';
 
 export interface RadioItemProps extends BaseProps<'input'> {
   /**
-  * divider is optional.
-  * Add this prop to add a choice divider ontop of a radio item.
+  * dividerText is optional.
+  * Add this prop to add a choice dividerText on top of a radio item.
   * The string is the text that it will appear above this radio item.
   */
-  divider?: string;
+  dividerText?: string;
 }
 /**
  * RadioItem component is used for display radio buttons.
@@ -18,11 +18,11 @@ export interface RadioItemProps extends BaseProps<'input'> {
  */
 export const RadioItem = React.forwardRef<HTMLInputElement, RadioItemProps>(
   function RadioItem(
-    { divider, name, value, className, disabled = false, children, ...props },
+    { dividerText, name, value, className, disabled = false, children, ...props },
     ref
   ) {
     return <>
-      {divider && <ChoiceDividerText>{divider}</ChoiceDividerText>}
+      {dividerText && <ChoiceDividerText>{dividerText}</ChoiceDividerText>}
       <div
         className={clsx(className, {
           'govgr-radios__item': true,

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

@@ -1,5 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders the StepNav with dense props 1`] = `
+<ForwardRef(StepNav)
+  dense={true}
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-step--dense govgr-step-nav"
+  >
+    <div
+      className="govgr-step--dense govgr-step-nav"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(StepNav)>
+`;
+
 exports[`renders the StepNav with no props 1`] = `
 <ForwardRef(StepNav)>
   <ForwardRef(Base)

package/src/StepNav/index.test.tsx

@@ -6,3 +6,7 @@ import StepNav from '@digigov/react-core/StepNav';
 it('renders the StepNav with no props', () => {
   expect(mount(<StepNav>hello</StepNav>)).toMatchSnapshot();
 });
+
+it('renders the StepNav with dense props', () => {
+  expect(mount(<StepNav dense>hello</StepNav>)).toMatchSnapshot();
+});

package/src/StepNav/index.tsx

@@ -2,19 +2,28 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface StepNavProps extends BaseProps<'div'> {}
+export interface StepNavProps extends BaseProps<'div'> {
+  /**
+  * dense is optional.
+  * @value true StepNav will be dense.
+  * @value false
+  * @default false
+  * */
+  dense?: boolean;
+}
 /**
  * StepNav contains the content or any other element for step-by-step implementation.
  * Use StepNav as wrapper component.
  */
 export const StepNav = React.forwardRef<HTMLDivElement, StepNavProps>(
-  function StepNav({ className, children, ...props }, ref) {
+  function StepNav({ className, dense, children, ...props }, ref) {
     return (
       <Base
         as="div"
         ref={ref}
         className={clsx(className, {
           'govgr-step-nav': true,
+          'govgr-step-nav--dense': dense,
         })}
         {...props}
       >

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

@@ -1,5 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders the TaskList with dense prop 1`] = `
+<ForwardRef(TaskList)
+  dense={true}
+>
+  <ForwardRef(Base)
+    as="ol"
+    className="govgr-task--dense govgr-task-list"
+  >
+    <ol
+      className="govgr-task--dense govgr-task-list"
+    >
+      hello
+    </ol>
+  </ForwardRef(Base)>
+</ForwardRef(TaskList)>
+`;
+
 exports[`renders the TaskList with no prop 1`] = `
 <ForwardRef(TaskList)>
   <ForwardRef(Base)

package/src/TaskList/index.test.tsx

@@ -6,3 +6,7 @@ import TaskList from '@digigov/react-core/TaskList';
 it('renders the TaskList with no prop', () => {
   expect(mount(<TaskList>hello</TaskList>)).toMatchSnapshot();
 });
+
+it('renders the TaskList with dense prop', () => {
+  expect(mount(<TaskList dense>hello</TaskList>)).toMatchSnapshot();
+});

package/src/TaskList/index.tsx

@@ -2,19 +2,28 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface TaskListProps extends BaseProps<'ol'> {}
+export interface TaskListProps extends BaseProps<'ol'> {
+  /**
+   * dense is optional.
+   * @value true TaskList will be dense.
+   * @value false
+   * @default false
+   * */
+  dense?: boolean;
+}
 /**
  * TaskList component is used for listing items.
  * This component must contain TaskListItem component.
  */
 export const TaskList = React.forwardRef<HTMLOListElement, TaskListProps>(
-  function TaskList({ className, children, ...props }, ref) {
+  function TaskList({ className, dense, children, ...props }, ref) {
     return (
       <Base
         as="ol"
         ref={ref}
         className={clsx(className, {
           'govgr-task-list': true,
+          'govgr-task-list--dense': dense,
         })}
         {...props}
       >

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

@@ -1,5 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders the Timeline with dense prop 1`] = `
+<ForwardRef(Timeline)
+  dense={true}
+>
+  <ForwardRef(Base)
+    as="ol"
+    className="govgr-timeline--dense govgr-timeline"
+  >
+    <ol
+      className="govgr-timeline--dense govgr-timeline"
+    >
+      hello
+    </ol>
+  </ForwardRef(Base)>
+</ForwardRef(Timeline)>
+`;
+
 exports[`renders the Timeline with no prop 1`] = `
 <ForwardRef(Timeline)>
   <ForwardRef(Base)

package/src/Timeline/index.test.tsx

@@ -6,3 +6,7 @@ import Timeline from '@digigov/react-core/Timeline';
 it('renders the Timeline with no prop', () => {
   expect(mount(<Timeline>hello</Timeline>)).toMatchSnapshot();
 });
+
+it('renders the Timeline with dense prop', () => {
+  expect(mount(<Timeline dense>hello</Timeline>)).toMatchSnapshot();
+});

package/src/Timeline/index.tsx

@@ -4,8 +4,8 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface TimelineProps extends BaseProps<'ol'> {
   /**
-   * spaced is optional. Use it to add space between the list items.
-   * @value true
+   * dense is optional.
+   * @value true Timeline will be dense.
    * @value false
    * @default true
    */
@@ -16,14 +16,14 @@ export interface TimelineProps extends BaseProps<'ol'> {
  * This component must contain TimelineItem component.
  */
 export const Timeline = React.forwardRef<HTMLOListElement, TimelineProps>(
-  function Timeline({ dense = true, className, children, ...props }, ref) {
+  function Timeline({ dense, className, children, ...props }, ref) {
     return (
       <Base
         as="ol"
         ref={ref}
         className={clsx(className, {
           'govgr-timeline': true,
-          'govgr-timeline--spaced': !dense,
+          'govgr-timeline--dense': dense,
         })}
         {...props}
       >

package/src/Unpurge/index.tsx

@@ -310,6 +310,8 @@ function Unpurge() {
     govgr-heading-md
     govgr-heading-lg
     govgr-heading-xl
+    govgr-image-logo--light
+    govgr-image-logo--dark
     `}
     ></div>
   );

package/src/index.ts

@@ -117,7 +117,8 @@ export * from '@digigov/react-core/SummaryListItemAction';
 export * from '@digigov/react-core/SummaryListItemKey';
 export * from '@digigov/react-core/SummaryListItemValue';
 export * from '@digigov/react-core/SvgIcon';
-export * from '@digigov/react-icons/Icon';
+export * from '@digigov/react-core/ImageLogo';
+export * from '@digigov/react-core/ImageLogoSet';
 export * from '@digigov/react-core/Table';
 export * from '@digigov/react-core/TableBody';
 export * from '@digigov/react-core/TableCaption';

package/src/registry.js

@@ -122,6 +122,8 @@ import * as _digigov_react_core_HellenicRepublicLogo_logo_inverted_el from '@dig
 import * as _digigov_react_core_HellenicRepublicLogo_logo_inverted_en from '@digigov/react-core/HellenicRepublicLogo/logo-inverted-en';
 import * as _digigov_react_core_Hidden from '@digigov/react-core/Hidden';
 import * as _digigov_react_core_Hint from '@digigov/react-core/Hint';
+import * as _digigov_react_core_ImageLogo from '@digigov/react-core/ImageLogo';
+import * as _digigov_react_core_ImageLogoSet from '@digigov/react-core/ImageLogoSet';
 import * as _digigov_react_core from '@digigov/react-core';
 import * as _digigov_react_core_KitchenSinkAllComponents from '@digigov/react-core/KitchenSinkAllComponents';
 import * as _digigov_react_core_KitchenSinkCard from '@digigov/react-core/KitchenSinkCard';
@@ -388,6 +390,8 @@ export default {
   '@digigov/react-core/HellenicRepublicLogo/logo-inverted-en': lazyImport(_digigov_react_core_HellenicRepublicLogo_logo_inverted_en),
   '@digigov/react-core/Hidden': lazyImport(_digigov_react_core_Hidden),
   '@digigov/react-core/Hint': lazyImport(_digigov_react_core_Hint),
+  '@digigov/react-core/ImageLogo': lazyImport(_digigov_react_core_ImageLogo),
+  '@digigov/react-core/ImageLogoSet': lazyImport(_digigov_react_core_ImageLogoSet),
   '@digigov/react-core': lazyImport(_digigov_react_core),
   '@digigov/react-core/KitchenSinkAllComponents': lazyImport(_digigov_react_core_KitchenSinkAllComponents),
   '@digigov/react-core/KitchenSinkCard': lazyImport(_digigov_react_core_KitchenSinkCard),