@digigov/react-core 1.0.0-6b93ebf2 → 1.0.0-77ee23d9

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

@@ -2,16 +2,21 @@
 
 exports[`renders the HeadingCaption with no props 1`] = `
 <ForwardRef(HeadingCaption)>
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="span"
     className="govgr-caption-lg"
   >
-    <span
+    <ForwardRef(Base)
+      as="span"
       className="govgr-caption-lg"
     >
-      hello
-    </span>
-  </ForwardRef(Base)>
+      <span
+        className="govgr-caption-lg"
+      >
+        hello
+      </span>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(HeadingCaption)>
 `;
 
@@ -19,16 +24,21 @@ exports[`renders the HeadingCaption with size=l 1`] = `
 <ForwardRef(HeadingCaption)
   size="lg"
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="span"
     className="govgr-caption-lg"
   >
-    <span
+    <ForwardRef(Base)
+      as="span"
       className="govgr-caption-lg"
     >
-      hello
-    </span>
-  </ForwardRef(Base)>
+      <span
+        className="govgr-caption-lg"
+      >
+        hello
+      </span>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(HeadingCaption)>
 `;
 
@@ -36,16 +46,21 @@ exports[`renders the HeadingCaption with size=m 1`] = `
 <ForwardRef(HeadingCaption)
   size="md"
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="span"
     className="govgr-caption-md"
   >
-    <span
+    <ForwardRef(Base)
+      as="span"
       className="govgr-caption-md"
     >
-      hello
-    </span>
-  </ForwardRef(Base)>
+      <span
+        className="govgr-caption-md"
+      >
+        hello
+      </span>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(HeadingCaption)>
 `;
 
@@ -53,15 +68,20 @@ exports[`renders the HeadingCaption with size=xl 1`] = `
 <ForwardRef(HeadingCaption)
   size="xl"
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="span"
     className="govgr-caption-xl"
   >
-    <span
+    <ForwardRef(Base)
+      as="span"
       className="govgr-caption-xl"
     >
-      hello
-    </span>
-  </ForwardRef(Base)>
+      <span
+        className="govgr-caption-xl"
+      >
+        hello
+      </span>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(HeadingCaption)>
 `;

package/src/HeadingCaption/index.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import clsx from 'clsx';
-import Base, { BaseProps } from '@digigov/react-core/Base';
+import Typography, { TypographyProps } from '@digigov/react-core/Typography';
 
-export interface HeadingCaptionProps extends BaseProps<'span'> {
+export interface HeadingCaptionProps extends TypographyProps {
   /**
   * size is optional. The default value is 'lg'.
   * This size should be the same as the matching Heading.
@@ -22,18 +22,16 @@ export const HeadingCaption = React.forwardRef<
   HeadingCaptionProps
 >(function HeadingCaption({ size = 'lg', className, children, ...props }, ref) {
   return (
-    <Base
+    <Typography
       as="span"
       ref={ref}
       className={clsx(className, {
-        'govgr-caption-xl': size === 'xl',
-        'govgr-caption-lg': size === 'lg',
-        'govgr-caption-md': size === 'md',
+        [`govgr-caption-${size}`]: size !== undefined,
       })}
       {...props}
     >
       {children}
-    </Base>
+    </Typography>
   );
 });
 

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

@@ -2,66 +2,89 @@
 
 exports[`renders the Hint with fontSize=14 1`] = `
 <ForwardRef(Hint)
-  fontSize="14"
+  fontSize={14}
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="p"
-    className="govgr-!-font-size-14 govgr-hint"
+    className="govgr-hint"
+    fontSize={14}
   >
-    <p
-      className="govgr-!-font-size-14 govgr-hint"
+    <ForwardRef(Base)
+      as="p"
+      className="govgr-hint govgr-!-font-size-14"
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <p
+        className="govgr-hint govgr-!-font-size-14"
+      >
+        hello
+      </p>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(Hint)>
 `;
 
 exports[`renders the Hint with fontSize=16 1`] = `
 <ForwardRef(Hint)
-  fontSize="16"
+  fontSize={16}
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="p"
-    className="govgr-!-font-size-16 govgr-hint"
+    className="govgr-hint"
+    fontSize={16}
   >
-    <p
-      className="govgr-!-font-size-16 govgr-hint"
+    <ForwardRef(Base)
+      as="p"
+      className="govgr-hint govgr-!-font-size-16"
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <p
+        className="govgr-hint govgr-!-font-size-16"
+      >
+        hello
+      </p>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(Hint)>
 `;
 
 exports[`renders the Hint with fontSize=24 1`] = `
 <ForwardRef(Hint)
-  fontSize="24"
+  fontSize={24}
 >
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="p"
-    className="govgr-!-font-size-24 govgr-hint"
+    className="govgr-hint"
+    fontSize={24}
   >
-    <p
-      className="govgr-!-font-size-24 govgr-hint"
+    <ForwardRef(Base)
+      as="p"
+      className="govgr-hint govgr-!-font-size-24"
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <p
+        className="govgr-hint govgr-!-font-size-24"
+      >
+        hello
+      </p>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(Hint)>
 `;
 
 exports[`renders the Hint with no props 1`] = `
 <ForwardRef(Hint)>
-  <ForwardRef(Base)
+  <ForwardRef(Typography)
     as="p"
     className="govgr-hint"
   >
-    <p
+    <ForwardRef(Base)
+      as="p"
       className="govgr-hint"
     >
-      hello
-    </p>
-  </ForwardRef(Base)>
+      <p
+        className="govgr-hint"
+      >
+        hello
+      </p>
+    </ForwardRef(Base)>
+  </ForwardRef(Typography)>
 </ForwardRef(Hint)>
 `;

package/src/Hint/index.test.tsx

@@ -7,11 +7,11 @@ it('renders the Hint with no props', () => {
   expect(mount(<Hint>hello</Hint>)).toMatchSnapshot();
 });
 it('renders the Hint with fontSize=14', () => {
-  expect(mount(<Hint fontSize="14">hello</Hint>)).toMatchSnapshot();
+  expect(mount(<Hint fontSize={14}>hello</Hint>)).toMatchSnapshot();
 });
 it('renders the Hint with fontSize=16', () => {
-  expect(mount(<Hint fontSize="16">hello</Hint>)).toMatchSnapshot();
+  expect(mount(<Hint fontSize={16}>hello</Hint>)).toMatchSnapshot();
 });
 it('renders the Hint with fontSize=24', () => {
-  expect(mount(<Hint fontSize="24">hello</Hint>)).toMatchSnapshot();
+  expect(mount(<Hint fontSize={24}>hello</Hint>)).toMatchSnapshot();
 });

package/src/Hint/index.tsx

@@ -1,36 +1,26 @@
 import React from 'react';
 import clsx from 'clsx';
-import Base, { BaseProps } from '@digigov/react-core/Base';
+import Typography, { TypographyProps } from '@digigov/react-core/Typography';
 
-export interface HintProps extends BaseProps<'p'> {
-  /**
-  * fontSize is optional.
-  * You can add this fontSize override prop in order to change the font size.
-  * @value '14'
-  * @value '16'
-  * @value '24'
-  */
-  fontSize?: '14' | '16' | '24';
-}
+export interface HintProps extends TypographyProps { }
 /**
  * Hint component can be used in form pages and it gives an extra hint description to the form.
  */
 export const Hint = React.forwardRef<HTMLParagraphElement, HintProps>(
   function Hint({ fontSize, className, children, ...props }, ref) {
     return (
-      <Base
+      <Typography
         as="p"
+        fontSize={fontSize}
         ref={ref}
         className={clsx(className, {
           'govgr-hint': true,
-          'govgr-!-font-size-14': fontSize === '14',
-          'govgr-!-font-size-16': fontSize === '16',
-          'govgr-!-font-size-24': fontSize === '24',
+
         })}
         {...props}
       >
         {children}
-      </Base>
+      </Typography>
     );
   }
 );

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

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

package/src/ImageLogo/index.test.tsx

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

package/src/ImageLogo/index.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+
+export interface ImageLogoProps 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).
+   */
+  variant?: 'light' | 'dark';
+}
+/**
+ * ImageLogo is used as a generic component for digigov images.
+ * This component can't have children.
+ */
+export const ImageLogo = React.forwardRef<
+  HTMLImageElement,
+  ImageLogoProps
+>(function ImageLogo({ lang, src, variant, className, children, ...props }, ref) {
+  console.log('src is', src)
+  return (
+    <>
+      <Base
+        as="img"
+        src={src}
+        ref={ref}
+        printHidden
+        className={clsx(className, {
+          'govgr-image-logo': variant === undefined,
+          [`govgr-image-logo--${variant}`]: variant !== undefined,
+        })}
+        {...props}
+      />
+    </>
+  );
+});
+
+export default ImageLogo;

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/Layout/__snapshots__/index.test.tsx.snap

@@ -4,10 +4,10 @@ exports[`renders the Layout with no props 1`] = `
 <ForwardRef(Layout)>
   <ForwardRef(Base)
     as="div"
-    className="govgr-layout-wrapper__full-height govgr-layout-wrapper"
+    className="govgr-layout--full-height govgr-layout"
   >
     <div
-      className="govgr-layout-wrapper__full-height govgr-layout-wrapper"
+      className="govgr-layout--full-height govgr-layout"
     >
       hello
     </div>

package/src/Layout/index.tsx

@@ -20,8 +20,8 @@ export const Layout = React.forwardRef<HTMLDivElement, LayoutProps>(
         as="div"
         ref={ref}
         className={clsx(className, {
-          'govgr-layout-wrapper': true,
-          'govgr-layout-wrapper__full-height': fullHeight,
+          'govgr-layout': true,
+          'govgr-layout--full-height': fullHeight,
         })}
         {...props}
       >

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

@@ -57,17 +57,17 @@ exports[`renders the List with listStyle=bullet 2`] = `
 </ForwardRef(List)>
 `;
 
-exports[`renders the List with listStyle=bullet and spaced 1`] = `
+exports[`renders the List with listStyle=bullet and dense 1`] = `
 <ForwardRef(List)
+  dense={true}
   listStyle="bullet"
-  spaced={true}
 >
   <ForwardRef(Base)
     as="ol"
-    className="govgr-list--bullet govgr-list--spaced govgr-list"
+    className="govgr-list--bullet govgr-list"
   >
     <ol
-      className="govgr-list--bullet govgr-list--spaced govgr-list"
+      className="govgr-list--bullet govgr-list"
     >
       <ForwardRef(ListItem)>
         <ForwardRef(Base)
@@ -155,17 +155,17 @@ exports[`renders the List with listStyle=number 2`] = `
 </ForwardRef(List)>
 `;
 
-exports[`renders the List with listStyle=number and spaced 1`] = `
+exports[`renders the List with listStyle=number and dense 1`] = `
 <ForwardRef(List)
+  dense={true}
   listStyle="number"
-  spaced={true}
 >
   <ForwardRef(Base)
     as="ol"
-    className="govgr-list--number govgr-list--spaced govgr-list"
+    className="govgr-list--number govgr-list"
   >
     <ol
-      className="govgr-list--number govgr-list--spaced govgr-list"
+      className="govgr-list--number govgr-list"
     >
       <ForwardRef(ListItem)>
         <ForwardRef(Base)

package/src/List/index.test.tsx

@@ -38,10 +38,10 @@ it('renders the List with listStyle=bullet', () => {
   ).toMatchSnapshot();
 });
 
-it('renders the List with listStyle=number and spaced', () => {
+it('renders the List with listStyle=number and dense', () => {
   expect(
     mount(
-      <List listStyle={'number'} spaced={true}>
+      <List listStyle={'number'} dense={true}>
         <ListItem>hello Giorgos</ListItem>
         <ListItem>hello Katerina</ListItem>
       </List>
@@ -49,10 +49,10 @@ it('renders the List with listStyle=number and spaced', () => {
   ).toMatchSnapshot();
 });
 
-it('renders the List with listStyle=bullet and spaced', () => {
+it('renders the List with listStyle=bullet and dense', () => {
   expect(
     mount(
-      <List listStyle={'bullet'} spaced={true}>
+      <List listStyle={'bullet'} dense={true}>
         <ListItem>hello Giorgos</ListItem>
         <ListItem>hello Katerina</ListItem>
       </List>