@digigov/react-core 1.0.0-002c630d → 1.0.0-266e80f3

package/src/Container/index.tsx

@@ -1,44 +1,44 @@
 import React from 'react';
 import clsx from 'clsx';
-import Base, { BaseProps } from '@digigov/react-core/Base';
+import Grid, { GridProps } from '@digigov/react-core/Grid';
 
-export interface ContainerProps extends BaseProps<'div'> {
+export interface ContainerProps extends GridProps {
   /**
-   * cols is optional. Set to false if you don't need 3 columns layout.
+   * grid is optional. Set to false if you don't need grid layout.
+   * @value true
+   * @value false
+   * @default true
    */
-  cols?: true | false;
+  grid?: boolean;
   /**
    * fullWidth is optional. Set to true if you need a full width layout.
+   * @value true
+   * @value false
+   * @default false
    */
-  fullWidth?: true | false;
+  fullWidth?: boolean;
 }
 /**
  * Use Container as a wrapper.
  */
 export const Container = React.forwardRef<HTMLDivElement, ContainerProps>(
   function Container(
-    { cols = true, fullWidth = false, className, children, ...props },
+    { grid = true, fullWidth = false, className, children, ...props },
     ref
   ) {
     return (
-      <Base
-        as="div"
+      <Grid
+        container={grid}
+        spacing={grid ? {sm:12}: undefined}
         ref={ref}
         className={clsx(className, {
-          'govgr-width-container': !fullWidth,
-          'govgr-full-width-container': fullWidth,
+          'govgr-container': true,
+          'govgr-container--full-width': fullWidth,
         })}
         {...props}
       >
-        <Base
-          as="div"
-          className={clsx({
-            'govgr-main-wrapper': cols,
-          })}
-        >
-          {children}
-        </Base>
-      </Base>
+        {children}
+      </Grid>
     );
   }
 );

package/src/CopyToClipboardContainer/__snapshots__/index.spec.tsx.snap

@@ -4,13 +4,13 @@ exports[`renders the CopyToClipboardContainer with no props 1`] = `
 <ForwardRef(CopyToClipboardContainer)>
   <ForwardRef(Base)
     as="div"
-    className="govgr-copy-to-clipboard--root"
+    className="govgr-copy-to-clipboard"
   >
     <div
-      className="govgr-copy-to-clipboard--root"
+      className="govgr-copy-to-clipboard"
     >
       <div
-        className=""
+        className="govgr-copy-to-clipboard__tooltip--right govgr-copy-to-clipboard__tooltip"
       >
         Text copied!
       </div>
@@ -25,13 +25,13 @@ exports[`renders the CopyToClipboardContainer with variant=banner 1`] = `
 >
   <ForwardRef(Base)
     as="div"
-    className="govgr-copy-to-clipboard--root"
+    className="govgr-copy-to-clipboard"
   >
     <div
-      className="govgr-copy-to-clipboard--root"
+      className="govgr-copy-to-clipboard"
     >
       <div
-        className=""
+        className="govgr-copy-to-clipboard__banner"
       >
         Text copied!
       </div>
@@ -42,17 +42,18 @@ exports[`renders the CopyToClipboardContainer with variant=banner 1`] = `
 
 exports[`renders the CopyToClipboardContainer with variant=tooltip 1`] = `
 <ForwardRef(CopyToClipboardContainer)
-  variant="tooltip-right"
+  tooltipAlign="right"
+  variant="tooltip"
 >
   <ForwardRef(Base)
     as="div"
-    className="govgr-copy-to-clipboard--root"
+    className="govgr-copy-to-clipboard"
   >
     <div
-      className="govgr-copy-to-clipboard--root"
+      className="govgr-copy-to-clipboard"
     >
       <div
-        className="govgr-copy-to-clipboard--container"
+        className="govgr-copy-to-clipboard__tooltip--right govgr-copy-to-clipboard__tooltip"
       >
         Text copied!
       </div>

package/src/CopyToClipboardContainer/index.spec.tsx

@@ -11,7 +11,8 @@ it('renders the CopyToClipboardContainer with no props', () => {
 it('renders the CopyToClipboardContainer with variant=tooltip', () => {
   expect(
     mount(
-      <CopyToClipboardContainer variant="tooltip-right">
+      <CopyToClipboardContainer variant="tooltip"
+        tooltipAlign="right">
         Text copied!
       </CopyToClipboardContainer>
     )

package/src/CopyToClipboardContainer/index.tsx

@@ -4,11 +4,19 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface CopyToClipboardContainerProps extends BaseProps<'div'> {
   /**
-   * 'tooltip' is used when you want to show the message inside a tooltip.
-   * 'banner' is used when you want to show the message inside a banner.
+   * @value 'tooltip' is used when you want to show the message inside a tooltip.
+   * @value 'banner' is used when you want to show the message inside a banner.
+   * @default 'tooltip'
    */
-
-  variant?: 'tooltip-right' | 'tooltip-left' | 'banner';
+  variant?: 'tooltip' | 'banner';
+  /**
+   * tooltipAlign is optional.
+   * tooltipAlign prop adds tooltip right or left and is used only if variant is tooltip.
+   * @value 'right'
+   * @value 'left'
+   * @default 'right'
+   */
+  tooltipAlign?: 'right' | 'left';
 }
 /**
  * CopyToClipboardContainer is a wrapper component for CopyToClipboardMessage
@@ -17,7 +25,7 @@ export const CopyToClipboardContainer = React.forwardRef<
   HTMLDivElement,
   CopyToClipboardContainerProps
 >(function CopyToClipboardContainer(
-  { variant, className, children, ...props },
+  { variant = 'tooltip', tooltipAlign = 'right', className, children, ...props },
   ref
 ) {
   return (
@@ -26,14 +34,16 @@ export const CopyToClipboardContainer = React.forwardRef<
       ref={ref}
       {...props}
       className={clsx(className, {
-        'govgr-copy-to-clipboard-root': true,
+        'govgr-copy-to-clipboard': true,
       })}
       {...props}
     >
       <div
         className={clsx(className, {
-          'govgr-copy-to-clipboard-container':
-            variant === 'tooltip-left' || variant === 'tooltip-right',
+          'govgr-copy-to-clipboard__tooltip': variant === 'tooltip',
+          'govgr-copy-to-clipboard__tooltip--left': variant === 'tooltip' && tooltipAlign === 'left',
+          'govgr-copy-to-clipboard__tooltip--right': variant === 'tooltip' && tooltipAlign === 'right',
+          'govgr-copy-to-clipboard__banner': variant === 'banner',
         })}
       >
         {children}

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

@@ -3,14 +3,13 @@
 exports[`renders the CopyToClipboardMessage with banner copied prop 1`] = `
 <ForwardRef(CopyToClipboardMessage)
   enabled={true}
-  variant="banner"
 >
   <ForwardRef(Base)
     as="div"
-    className="govgr-copy-to-clipboard--banner"
+    className="govgr-copy-to-clipboard__message"
   >
     <div
-      className="govgr-copy-to-clipboard--banner"
+      className="govgr-copy-to-clipboard__message"
     >
       Text copied!
     </div>
@@ -19,15 +18,13 @@ exports[`renders the CopyToClipboardMessage with banner copied prop 1`] = `
 `;
 
 exports[`renders the CopyToClipboardMessage with banner prop 1`] = `
-<ForwardRef(CopyToClipboardMessage)
-  variant="banner"
->
+<ForwardRef(CopyToClipboardMessage)>
   <ForwardRef(Base)
     as="div"
-    className="govgr-copy-to-clipboard--banner govgr-copy-to-clipboard--hidden"
+    className="govgr-copy-to-clipboard--hidden govgr-copy-to-clipboard__message"
   >
     <div
-      className="govgr-copy-to-clipboard--banner govgr-copy-to-clipboard--hidden"
+      className="govgr-copy-to-clipboard--hidden govgr-copy-to-clipboard__message"
     >
       Text copied!
     </div>
@@ -41,10 +38,10 @@ exports[`renders the CopyToClipboardMessage with copied prop 1`] = `
 >
   <ForwardRef(Base)
     as="div"
-    className=""
+    className="govgr-copy-to-clipboard__message"
   >
     <div
-      className=""
+      className="govgr-copy-to-clipboard__message"
     >
       Text copied!
     </div>
@@ -56,10 +53,10 @@ exports[`renders the CopyToClipboardMessage with no props 1`] = `
 <ForwardRef(CopyToClipboardMessage)>
   <ForwardRef(Base)
     as="div"
-    className="govgr-copy-to-clipboard--hidden"
+    className="govgr-copy-to-clipboard--hidden govgr-copy-to-clipboard__message"
   >
     <div
-      className="govgr-copy-to-clipboard--hidden"
+      className="govgr-copy-to-clipboard--hidden govgr-copy-to-clipboard__message"
     >
       Text copied!
     </div>
@@ -70,14 +67,13 @@ exports[`renders the CopyToClipboardMessage with no props 1`] = `
 exports[`renders the CopyToClipboardMessage with tooltip and copied prop 1`] = `
 <ForwardRef(CopyToClipboardMessage)
   enabled={true}
-  variant="tooltip-right"
 >
   <ForwardRef(Base)
     as="div"
-    className="govgr-copy-to-clipboard--tooltip govgr-copy-to-clipboard--tooltip-right"
+    className="govgr-copy-to-clipboard__message"
   >
     <div
-      className="govgr-copy-to-clipboard--tooltip govgr-copy-to-clipboard--tooltip-right"
+      className="govgr-copy-to-clipboard__message"
     >
       Text copied!
     </div>
@@ -86,15 +82,13 @@ exports[`renders the CopyToClipboardMessage with tooltip and copied prop 1`] = `
 `;
 
 exports[`renders the CopyToClipboardMessage with tooltip prop 1`] = `
-<ForwardRef(CopyToClipboardMessage)
-  variant="tooltip-right"
->
+<ForwardRef(CopyToClipboardMessage)>
   <ForwardRef(Base)
     as="div"
-    className="govgr-copy-to-clipboard--tooltip govgr-copy-to-clipboard--tooltip-right govgr-copy-to-clipboard--hidden"
+    className="govgr-copy-to-clipboard--hidden govgr-copy-to-clipboard__message"
   >
     <div
-      className="govgr-copy-to-clipboard--tooltip govgr-copy-to-clipboard--tooltip-right govgr-copy-to-clipboard--hidden"
+      className="govgr-copy-to-clipboard--hidden govgr-copy-to-clipboard__message"
     >
       Text copied!
     </div>

package/src/CopyToClipboardMessage/index.test.tsx

@@ -12,7 +12,7 @@ it('renders the CopyToClipboardMessage with no props', () => {
 it('renders the CopyToClipboardMessage with banner prop', () => {
   expect(
     mount(
-      <CopyToClipboardMessage variant="banner">
+      <CopyToClipboardMessage>
         Text copied!
       </CopyToClipboardMessage>
     )
@@ -22,7 +22,7 @@ it('renders the CopyToClipboardMessage with banner prop', () => {
 it('renders the CopyToClipboardMessage with tooltip prop', () => {
   expect(
     mount(
-      <CopyToClipboardMessage variant="tooltip-right">
+      <CopyToClipboardMessage>
         Text copied!
       </CopyToClipboardMessage>
     )
@@ -42,7 +42,7 @@ it('renders the CopyToClipboardMessage with copied prop', () => {
 it('renders the CopyToClipboardMessage with tooltip and copied prop', () => {
   expect(
     mount(
-      <CopyToClipboardMessage variant="tooltip-right" enabled={true}>
+      <CopyToClipboardMessage enabled={true}>
         Text copied!
       </CopyToClipboardMessage>
     )
@@ -52,7 +52,7 @@ it('renders the CopyToClipboardMessage with tooltip and copied prop', () => {
 it('renders the CopyToClipboardMessage with banner copied prop', () => {
   expect(
     mount(
-      <CopyToClipboardMessage variant="banner" enabled={true}>
+      <CopyToClipboardMessage enabled={true}>
         Text copied!
       </CopyToClipboardMessage>
     )

package/src/CopyToClipboardMessage/index.tsx

@@ -4,18 +4,12 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface CopyToClipboardMessageProps extends BaseProps<'div'> {
   /**
-   * 'tooltip' is used when you want to show the message inside a tooltip.
-   * 'banner' is used when you want to show the message inside a banner.
-   */
-
-  variant?: 'tooltip-right' | 'tooltip-left' | 'banner';
-
-  /**
-   * enabled is a boolean prop passed from the CopyToClipboard component.
-   * When it's true it shows the CopyToClipboardMessage component and it activates the animation that hides the component after 3s.
-   * When it's false it resets the animations of the CopyToClipboardMessage.
-   */
-
+  * enabled is a boolean prop passed from the CopyToClipboard component.
+  * When it's true it shows the CopyToClipboardMessage component and it activates the animation that hides the component after 3s.
+  * When it's false it resets the animations of the CopyToClipboardMessage.
+  * @value true
+  * @value false
+  */
   enabled?: boolean;
 }
 /**
@@ -26,7 +20,7 @@ export const CopyToClipboardMessage = React.forwardRef<
   HTMLDivElement,
   CopyToClipboardMessageProps
 >(function CopyToClipboardMessage(
-  { variant, enabled, className, children, ...props },
+  { enabled, className, children, ...props },
   ref
 ) {
   return (
@@ -34,11 +28,7 @@ export const CopyToClipboardMessage = React.forwardRef<
       as="div"
       ref={ref}
       className={clsx(className, {
-        'govgr-copy-to-clipboard--banner': variant === 'banner',
-        'govgr-copy-to-clipboard--tooltip':
-          variant === 'tooltip-left' || variant === 'tooltip-right',
-        'govgr-copy-to-clipboard--tooltip-right': variant === 'tooltip-right',
-        'govgr-copy-to-clipboard--tooltip-left': variant === 'tooltip-left',
+        'govgr-copy-to-clipboard__message': true,
         'govgr-copy-to-clipboard--hidden': !enabled,
       })}
       {...props}

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

@@ -4,10 +4,10 @@ exports[`renders the CopyrightContainer with no props 1`] = `
 <ForwardRef(CopyrightContainer)>
   <ForwardRef(Base)
     as="p"
-    className="govgr-footer__licence-description"
+    className="govgr-footer__copyright"
   >
     <p
-      className="govgr-footer__licence-description"
+      className="govgr-footer__copyright"
     >
       hello
     </p>

package/src/CopyrightContainer/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface CopyrightContainerProps extends BaseProps<'p'> {}
+export interface CopyrightContainerProps extends BaseProps<'p'> { }
 /**
  * CopyrightContainer is used inside the Footer component.
  * CopyrightContainer has no props.
@@ -16,7 +16,7 @@ export const CopyrightContainer = React.forwardRef<
       as="p"
       ref={ref}
       className={clsx(className, {
-        'govgr-footer__licence-description': true,
+        'govgr-footer__copyright': true,
       })}
       {...props}
     >

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

@@ -14,14 +14,14 @@ exports[`renders the DateInputItem with name and width===4 props 1`] = `
       hello
       <ForwardRef(Base)
         as="input"
-        className="govgr-input--width-4 govgr-input"
+        className="govgr-input--width-4-char govgr-input"
         inputMode="numeric"
         name="date-input"
         pattern="[0-9]*"
         type="text"
       >
         <input
-          className="govgr-input--width-4 govgr-input"
+          className="govgr-input--width-4-char govgr-input"
           inputMode="numeric"
           name="date-input"
           pattern="[0-9]*"
@@ -46,14 +46,14 @@ exports[`renders the DateInputItem with name prop 1`] = `
       hello
       <ForwardRef(Base)
         as="input"
-        className="govgr-input--width-2 govgr-input"
+        className="govgr-input--width-2-char govgr-input"
         inputMode="numeric"
         name="date-input"
         pattern="[0-9]*"
         type="text"
       >
         <input
-          className="govgr-input--width-2 govgr-input"
+          className="govgr-input--width-2-char govgr-input"
           inputMode="numeric"
           name="date-input"
           pattern="[0-9]*"
@@ -76,13 +76,13 @@ exports[`renders the DateInputItem with no props 1`] = `
       hello
       <ForwardRef(Base)
         as="input"
-        className="govgr-input--width-2 govgr-input"
+        className="govgr-input--width-2-char govgr-input"
         inputMode="numeric"
         pattern="[0-9]*"
         type="text"
       >
         <input
-          className="govgr-input--width-2 govgr-input"
+          className="govgr-input--width-2-char govgr-input"
           inputMode="numeric"
           pattern="[0-9]*"
           type="text"

package/src/DateInputItem/index.tsx

@@ -4,14 +4,19 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface DateInputItemProps extends BaseProps<'input'> {
   /**
-   * Width property is optional.
-   * Use this property for year field to grow width.
-   */
+  * Width property is optional.
+  * Use this property for year field to grow width.
+  * @value 2
+  * @value 4
+  * @default 2
+  */
   width?: 2 | 4;
   /**
-   * error is optional. The default value is false.
-   * Use this prop when there is an error at the input.
-   */
+  * error is optional. The default value is false.
+  * Use this prop when there is an error at the input.
+  * @value true
+  * @value false
+  */
   error?: boolean;
 }
 /**
@@ -47,8 +52,8 @@ export const DateInputItem = React.forwardRef<
           name={name}
           className={clsx({
             'govgr-input': true,
-            'govgr-input--width-2': width === 2,
-            'govgr-input--width-4': width === 4,
+            'govgr-input--width-2-char': width === 2,
+            'govgr-input--width-4-char': width === 4,
             'govgr-input--error': error,
           })}
           {...props}

package/src/Details/index.tsx

@@ -7,7 +7,7 @@ export interface DetailsProps extends BaseProps<'details'> {}
  * Details is used to make a page easier to scan when it contains information that only some users will need.
  * Details component wraps DetailsSummary and DetailsContent as children components
  */
-export const Details = React.forwardRef<HTMLElement, DetailsProps>(
+export const Details = React.forwardRef<HTMLDetailsElement, DetailsProps>(
   function Details({ className, children, ...props }, ref) {
     return (
       <Base

package/src/DetailsSummary/index.tsx

@@ -4,8 +4,10 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface DetailsSummaryProps extends BaseProps<'summary'> {
   /*
-   ** size is optional. Default value is 'md'.
-   */
+  ** size is optional. Default value is 'md'.
+  * @value 'md'
+  * @value 'lg'
+  */
   size?: 'md' | 'lg';
 }
 /**

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

@@ -12,13 +12,12 @@ exports[`renders the Drawer with \`open=true\` \`left=true\` props 1`] = `
     <div
       className="govgr-drawer--left govgr-drawer"
     >
-      <div
-        className="govgr-drawer__content"
-      >
-        <div
-          className="govgr--drawer__header-container"
-        >
-          <ForwardRef(Heading)>
+      <div>
+        <ForwardRef(Heading)>
+          <ForwardRef(Typography)
+            as="h1"
+            className="govgr-heading-xl"
+          >
             <ForwardRef(Base)
               as="h1"
               className="govgr-heading-xl"
@@ -29,9 +28,14 @@ exports[`renders the Drawer with \`open=true\` \`left=true\` props 1`] = `
                 Menu
               </h1>
             </ForwardRef(Base)>
-          </ForwardRef(Heading)>
-          <ForwardRef(CloseIcon)
+          </ForwardRef(Typography)>
+        </ForwardRef(Heading)>
+        <CloseIcon
+          className="govgr--drawer__close-icon"
+        >
+          <ForwardRef(Icon)
             className="govgr--drawer__close-icon"
+            icon="close"
           >
             <ForwardRef(SvgIcon)
               className="govgr--drawer__close-icon govgr-svg-icon--close"
@@ -49,50 +53,52 @@ exports[`renders the Drawer with \`open=true\` \`left=true\` props 1`] = `
                   focusable="false"
                   viewBox="0 0 24 24"
                 >
-                  <polygon
-                    points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 "
-                  />
+                  <close>
+                    <polygon
+                      points="14.4,11.8 22,4.2 19.7,1.8 12,9.4 4.4,1.8 2,4.2 9.7,11.9 2.1,19.5 4.4,21.9 12.1,14.3 19.7,21.9 22.1,19.5 "
+                    />
+                  </close>
                 </svg>
               </ForwardRef(Base)>
             </ForwardRef(SvgIcon)>
-          </ForwardRef(CloseIcon)>
-        </div>
-        <ForwardRef(List)>
-          <ForwardRef(Base)
-            as="ol"
+          </ForwardRef(Icon)>
+        </CloseIcon>
+      </div>
+      <ForwardRef(List)>
+        <ForwardRef(Base)
+          as="ol"
+          className="govgr-list"
+        >
+          <ol
             className="govgr-list"
           >
-            <ol
-              className="govgr-list"
-            >
-              <ForwardRef(ListItem)>
-                <ForwardRef(Base)
-                  as="li"
+            <ForwardRef(ListItem)>
+              <ForwardRef(Base)
+                as="li"
+                className="govgr-list__item"
+              >
+                <li
                   className="govgr-list__item"
                 >
-                  <li
-                    className="govgr-list__item"
-                  >
-                    Menu option 1
-                  </li>
-                </ForwardRef(Base)>
-              </ForwardRef(ListItem)>
-              <ForwardRef(ListItem)>
-                <ForwardRef(Base)
-                  as="li"
+                  Menu option 1
+                </li>
+              </ForwardRef(Base)>
+            </ForwardRef(ListItem)>
+            <ForwardRef(ListItem)>
+              <ForwardRef(Base)
+                as="li"
+                className="govgr-list__item"
+              >
+                <li
                   className="govgr-list__item"
                 >
-                  <li
-                    className="govgr-list__item"
-                  >
-                    Menu option 2
-                  </li>
-                </ForwardRef(Base)>
-              </ForwardRef(ListItem)>
-            </ol>
-          </ForwardRef(Base)>
-        </ForwardRef(List)>
-      </div>
+                  Menu option 2
+                </li>
+              </ForwardRef(Base)>
+            </ForwardRef(ListItem)>
+          </ol>
+        </ForwardRef(Base)>
+      </ForwardRef(List)>
     </div>
   </ForwardRef(Base)>
 </ForwardRef(Drawer)>