@digigov/react-core 1.0.0-6b93ebf2 → 1.0.0-88820b1e

package/src/FooterNavigationSection/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+
+export interface FooterNavigationSectionProps extends BaseProps<'section'> {}
+/**
+ * FooterNavigationSection must be inside the FooterNavigation.
+ * Inside this component should be placed the FooterHeading (optional) and the FooterList.
+ * This component has no props.
+ */
+export const FooterNavigationSection = React.forwardRef<
+  HTMLDivElement,
+  FooterNavigationSectionProps
+>(function FooterNavigationSection({ className, children, ...props }, ref) {
+  return (
+    <Base
+      as="section"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-footer__navigation-section': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default FooterNavigationSection;

package/src/Grid/index.tsx

@@ -80,78 +80,12 @@ export const Grid = React.forwardRef<HTMLElement, GridProps>(function Grid(
       className={clsx(className, {
         'govgr-grid': container,
         'govgr-grid-inline': container && inline,
-        [`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,
+        [`govgr-gap-${spacing}`]: container &&  spacing !== undefined,
+        [`xs:govgr-grid__col-span-${xs}`]: item && xs !== undefined,
+        [`sm:govgr-grid__col-span-${sm}`]: item && sm !== undefined,
+        [`md:govgr-grid__col-span-${md}`]: item && md !== undefined,
+        [`lg:govgr-grid__col-span-${lg}`]: item && lg !== undefined,
+        [`xl:govgr-grid__col-span-${xl}`]: item && xl !== undefined,
       })}
       {...props}
     >

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

@@ -4,10 +4,10 @@ exports[`renders the HeaderSection with no props 1`] = `
 <ForwardRef(HeaderSection)>
   <ForwardRef(Base)
     as="div"
-    className="govgr-header__container"
+    className="govgr-header__section"
   >
     <div
-      className="govgr-header__container"
+      className="govgr-header__section"
     >
       hello
     </div>

package/src/HeaderSection/index.tsx

@@ -15,7 +15,7 @@ export const HeaderSection = React.forwardRef<
       as="div"
       ref={ref}
       className={clsx(className, {
-        'govgr-header__container': true,
+        'govgr-header__section': true,
       })}
       {...props}
     >

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

@@ -15,23 +15,6 @@ exports[`renders the Heading with no props 1`] = `
 </ForwardRef(Heading)>
 `;
 
-exports[`renders the Heading with size=l 1`] = `
-<ForwardRef(Heading)
-  size="lg"
->
-  <ForwardRef(Base)
-    as="h2"
-    className="govgr-heading-lg"
-  >
-    <h2
-      className="govgr-heading-lg"
-    >
-      hello
-    </h2>
-  </ForwardRef(Base)>
-</ForwardRef(Heading)>
-`;
-
 exports[`renders the Heading with size=l and element h2 1`] = `
 <ForwardRef(Heading)
   element="h2"
@@ -86,19 +69,19 @@ exports[`renders the Heading with size=l and element h4 1`] = `
 </ForwardRef(Heading)>
 `;
 
-exports[`renders the Heading with size=m 1`] = `
+exports[`renders the Heading with size=lg 1`] = `
 <ForwardRef(Heading)
-  size="md"
+  size="lg"
 >
   <ForwardRef(Base)
-    as="h3"
-    className="govgr-heading-md"
+    as="h2"
+    className="govgr-heading-lg"
   >
-    <h3
-      className="govgr-heading-md"
+    <h2
+      className="govgr-heading-lg"
     >
       hello
-    </h3>
+    </h2>
   </ForwardRef(Base)>
 </ForwardRef(Heading)>
 `;
@@ -157,19 +140,19 @@ exports[`renders the Heading with size=m and element h4 1`] = `
 </ForwardRef(Heading)>
 `;
 
-exports[`renders the Heading with size=s 1`] = `
+exports[`renders the Heading with size=md 1`] = `
 <ForwardRef(Heading)
-  size="sm"
+  size="md"
 >
   <ForwardRef(Base)
-    as="h4"
-    className="govgr-heading-sm"
+    as="h3"
+    className="govgr-heading-md"
   >
-    <h4
-      className="govgr-heading-sm"
+    <h3
+      className="govgr-heading-md"
     >
       hello
-    </h4>
+    </h3>
   </ForwardRef(Base)>
 </ForwardRef(Heading)>
 `;
@@ -228,6 +211,23 @@ exports[`renders the Heading with size=s and element h4 1`] = `
 </ForwardRef(Heading)>
 `;
 
+exports[`renders the Heading with size=sm 1`] = `
+<ForwardRef(Heading)
+  size="sm"
+>
+  <ForwardRef(Base)
+    as="h4"
+    className="govgr-heading-sm"
+  >
+    <h4
+      className="govgr-heading-sm"
+    >
+      hello
+    </h4>
+  </ForwardRef(Base)>
+</ForwardRef(Heading)>
+`;
+
 exports[`renders the Heading with size=xl 1`] = `
 <ForwardRef(Heading)
   size="xl"
@@ -298,3 +298,38 @@ exports[`renders the Heading with size=xl and element h4 1`] = `
   </ForwardRef(Base)>
 </ForwardRef(Heading)>
 `;
+
+exports[`renders the Heading with size=xs 1`] = `
+<ForwardRef(Heading)
+  size="xs"
+>
+  <ForwardRef(Base)
+    as="h5"
+    className="govgr-heading-xs"
+  >
+    <h5
+      className="govgr-heading-xs"
+    >
+      hello
+    </h5>
+  </ForwardRef(Base)>
+</ForwardRef(Heading)>
+`;
+
+exports[`renders the Heading with size=xs and element h4 1`] = `
+<ForwardRef(Heading)
+  element="h4"
+  size="xs"
+>
+  <ForwardRef(Base)
+    as="h4"
+    className="govgr-heading-xs"
+  >
+    <h4
+      className="govgr-heading-xs"
+    >
+      hello
+    </h4>
+  </ForwardRef(Base)>
+</ForwardRef(Heading)>
+`;

package/src/Heading/index.test.tsx

@@ -11,18 +11,22 @@ it('renders the Heading with size=xl', () => {
   expect(mount(<Heading size={'xl'}>hello</Heading>)).toMatchSnapshot();
 });
 
-it('renders the Heading with size=l', () => {
+it('renders the Heading with size=lg', () => {
   expect(mount(<Heading size={'lg'}>hello</Heading>)).toMatchSnapshot();
 });
 
-it('renders the Heading with size=m', () => {
+it('renders the Heading with size=md', () => {
   expect(mount(<Heading size={'md'}>hello</Heading>)).toMatchSnapshot();
 });
 
-it('renders the Heading with size=s', () => {
+it('renders the Heading with size=sm', () => {
   expect(mount(<Heading size={'sm'}>hello</Heading>)).toMatchSnapshot();
 });
 
+it('renders the Heading with size=xs', () => {
+  expect(mount(<Heading size={'xs'}>hello</Heading>)).toMatchSnapshot();
+});
+
 it('renders the Heading with size=s and element h2', () => {
   expect(
     mount(
@@ -142,3 +146,13 @@ it('renders the Heading with size=xl and element h4', () => {
     )
   ).toMatchSnapshot();
 });
+
+it('renders the Heading with size=xs and element h4', () => {
+  expect(
+    mount(
+      <Heading size={'xs'} element="h4">
+        hello
+      </Heading>
+    )
+  ).toMatchSnapshot();
+});

package/src/Heading/index.tsx

@@ -1,18 +1,18 @@
 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 HeadingProps extends BaseProps<'h1'> {
+export interface HeadingProps extends TypographyProps {
   /**
-  * size is optional. 'xl' is the default value.
-  * Use 'xl' when this heading is the main page title.
-  * @value 'xl'
-  * @value 'lg'
-  * @value 'md'
-  * @value 'sm'
-  * @default 'xl'
-  */
-  size?: 'xl' | 'lg' | 'md' | 'sm';
+   * size is optional. 'xl' is the default value.
+   * Use 'xl' when this heading is the main page title.
+   * @value 'xl'
+   * @value 'lg'
+   * @value 'md'
+   * @value 'sm'
+   * @default 'xl'
+   */
+  size?: 'xl' | 'lg' | 'md' | 'sm' | 'xs';
   /**
   * element is optional. 'h1' is the default value.
   * Use 'h1' when this heading is the main page title.
@@ -20,7 +20,7 @@ export interface HeadingProps extends BaseProps<'h1'> {
   */
   element?: HeadingHTMLElements;
 }
-export type HeadingHTMLElements = 'h1' | 'h2' | 'h3' | 'h4';
+export type HeadingHTMLElements = 'h1' | 'h2' | 'h3' | 'h4' | 'h5';
 
 const getComponentBySize = (
   size: HeadingProps['size']
@@ -34,6 +34,8 @@ const getComponentBySize = (
       return 'h3';
     case 'sm':
       return 'h4';
+    case 'xs':
+      return 'h5';
     default:
       return 'h1';
   }
@@ -41,7 +43,7 @@ const getComponentBySize = (
 
 /**
  * Heading component is used to place a title in a the page.
- * Heading component must be wraped inside Main component.
+ * Heading component must be wrapped inside Main component.
  */
 export const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(
   function Heading(
@@ -50,19 +52,16 @@ export const Heading = React.forwardRef<HTMLHeadingElement, HeadingProps>(
   ) {
     const Component = element ? element : getComponentBySize(size);
     return (
-      <Base
+      <Typography
         as={Component}
         ref={ref}
         className={clsx(className, {
-          'govgr-heading-xl': size === 'xl',
-          'govgr-heading-lg': size === 'lg',
-          'govgr-heading-md': size === 'md',
-          'govgr-heading-sm': size === 'sm',
+          [`govgr-heading-${size}`]: size !== undefined,
         })}
         {...props}
       >
         {children}
-      </Base>
+      </Typography>
     );
   }
 );

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/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}
       >