@digigov/react-core 1.0.0-88820b1e → 1.0.0-8bbf3ef2

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

@@ -49,3 +49,56 @@ exports[`renders the CloseButton 1`] = `
   </ForwardRef(Button)>
 </ForwardRef(CloseButton)>
 `;
+
+exports[`renders the CloseButton with label prop 1`] = `
+<ForwardRef(CloseButton)
+  label="Κλείσιμο"
+>
+  <ForwardRef(Button)
+    className="govgr-close-btn"
+    variant="link"
+  >
+    <ForwardRef(Base)
+      as="button"
+      className="govgr-close-btn govgr-link"
+      printHidden={true}
+    >
+      <button
+        className="govgr-close-btn govgr-link govgr-print-hidden"
+      >
+        Κλείσιμο
+        <CloseIcon>
+          <ForwardRef(Icon)
+            icon="close"
+          >
+            <ForwardRef(SvgIcon)
+              className="govgr-svg-icon--close"
+            >
+              <ForwardRef(Base)
+                aria-hidden="true"
+                as="svg"
+                className="govgr-svg-icon--close govgr-svg-icon"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <svg
+                  aria-hidden="true"
+                  className="govgr-svg-icon--close govgr-svg-icon"
+                  focusable="false"
+                  viewBox="0 0 24 24"
+                >
+                  <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(Icon)>
+        </CloseIcon>
+      </button>
+    </ForwardRef(Base)>
+  </ForwardRef(Button)>
+</ForwardRef(CloseButton)>
+`;

package/src/CloseButton/index.test.tsx

@@ -6,3 +6,6 @@ import CloseButton from '@digigov/react-core/CloseButton';
 it('renders the CloseButton', () => {
     expect(mount(<CloseButton />)).toMatchSnapshot();
 });
+it('renders the CloseButton with label prop', () => {
+    expect(mount(<CloseButton label="Κλείσιμο"/>)).toMatchSnapshot();
+});

package/src/CloseButton/index.tsx

@@ -3,14 +3,21 @@ import clsx from 'clsx';
 import Button, { ButtonProps } from '@digigov/react-core/Button';
 import { CloseIcon } from '@digigov/react-icons/CloseIcon';
 
-export interface CloseButtonProps extends ButtonProps {}
+export interface CloseButtonProps extends ButtonProps {
+  /**
+   * label is optional.
+   * If empty, the CloseButton will only have a close icon.
+   * Use this prop to add text beside the close icon. For example: 'Κλείσιμο'.
+   */
+  label?: string;
+}
 /**
  * CloseButton is an <button> element. It can be used be inside the FilterSection component.
  */
 export const CloseButton = React.forwardRef<
   HTMLButtonElement,
   CloseButtonProps
->(function CloseButton({ className, children, ...props }, ref) {
+>(function CloseButton({ label, className, children, ...props }, ref) {
   return (
     <Button
       variant="link"
@@ -20,7 +27,7 @@ export const CloseButton = React.forwardRef<
       ref={ref}
       {...props}
     >
-      {children}
+      {label || children}
       <CloseIcon />
     </Button>
   );

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

@@ -5,25 +5,21 @@ exports[`renders the Container with cols={false} prop 1`] = `
   fullWidth={true}
   grid={false}
 >
-  <ForwardRef(Base)
-    as="div"
+  <ForwardRef(Grid)
     className="govgr-container--full-width govgr-container"
+    container={false}
   >
-    <div
+    <ForwardRef(Base)
+      as="div"
       className="govgr-container--full-width govgr-container"
     >
-      <ForwardRef(Base)
-        as="div"
-        className=""
+      <div
+        className="govgr-container--full-width govgr-container"
       >
-        <div
-          className=""
-        >
-          hello
-        </div>
-      </ForwardRef(Base)>
-    </div>
-  </ForwardRef(Base)>
+        hello
+      </div>
+    </ForwardRef(Base)>
+  </ForwardRef(Grid)>
 </ForwardRef(Container)>
 `;
 
@@ -31,48 +27,50 @@ exports[`renders the Container with fullWidth prop 1`] = `
 <ForwardRef(Container)
   fullWidth={true}
 >
-  <ForwardRef(Base)
-    as="div"
+  <ForwardRef(Grid)
     className="govgr-container--full-width govgr-container"
+    container={true}
+    spacing={
+      Object {
+        "sm": 12,
+      }
+    }
   >
-    <div
-      className="govgr-container--full-width govgr-container"
+    <ForwardRef(Base)
+      as="div"
+      className="govgr-container--full-width govgr-container govgr-gap-sm-12 govgr-grid"
     >
-      <ForwardRef(Base)
-        as="div"
-        className="govgr-main-wrapper"
+      <div
+        className="govgr-container--full-width govgr-container govgr-gap-sm-12 govgr-grid"
       >
-        <div
-          className="govgr-main-wrapper"
-        >
-          hello
-        </div>
-      </ForwardRef(Base)>
-    </div>
-  </ForwardRef(Base)>
+        hello
+      </div>
+    </ForwardRef(Base)>
+  </ForwardRef(Grid)>
 </ForwardRef(Container)>
 `;
 
 exports[`renders the Container with no props 1`] = `
 <ForwardRef(Container)>
-  <ForwardRef(Base)
-    as="div"
+  <ForwardRef(Grid)
     className="govgr-container"
+    container={true}
+    spacing={
+      Object {
+        "sm": 12,
+      }
+    }
   >
-    <div
-      className="govgr-container"
+    <ForwardRef(Base)
+      as="div"
+      className="govgr-container govgr-gap-sm-12 govgr-grid"
     >
-      <ForwardRef(Base)
-        as="div"
-        className="govgr-main-wrapper"
+      <div
+        className="govgr-container govgr-gap-sm-12 govgr-grid"
       >
-        <div
-          className="govgr-main-wrapper"
-        >
-          hello
-        </div>
-      </ForwardRef(Base)>
-    </div>
-  </ForwardRef(Base)>
+        hello
+      </div>
+    </ForwardRef(Base)>
+  </ForwardRef(Grid)>
 </ForwardRef(Container)>
 `;

package/src/Container/index.tsx

@@ -1,21 +1,21 @@
 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 {
   /**
-   * grid is optional. Set to false if you don't need 3 columns layout.
-  * @value true
-  * @value false
-  * @default true
+   * grid is optional. Set to false if you don't need grid layout.
+   * @value true
+   * @value false
+   * @default true
    */
   grid?: boolean;
   /**
-  * fullWidth is optional. Set to true if you need a full width layout.
-  * @value true
-  * @value false
-  * @default false
-  */
+   * fullWidth is optional. Set to true if you need a full width layout.
+   * @value true
+   * @value false
+   * @default false
+   */
   fullWidth?: boolean;
 }
 /**
@@ -27,8 +27,9 @@ export const Container = React.forwardRef<HTMLDivElement, ContainerProps>(
     ref
   ) {
     return (
-      <Base
-        as="div"
+      <Grid
+        container={grid}
+        spacing={grid ? {sm:12}: undefined}
         ref={ref}
         className={clsx(className, {
           'govgr-container': true,
@@ -36,15 +37,8 @@ export const Container = React.forwardRef<HTMLDivElement, ContainerProps>(
         })}
         {...props}
       >
-        <Base
-          as="div"
-          className={clsx({
-            'govgr-main-wrapper': grid,
-          })}
-        >
-          {children}
-        </Base>
-      </Base>
+        {children}
+      </Grid>
     );
   }
 );

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

@@ -1,5 +1,26 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders the CopyToClipboardContainer with dense=true 1`] = `
+<ForwardRef(CopyToClipboardContainer)
+  dense={true}
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-copy-to-clipboard"
+  >
+    <div
+      className="govgr-copy-to-clipboard"
+    >
+      <div
+        className="govgr-copy-to-clipboard__tooltip--right govgr-copy-to-clipboard__tooltip--dense govgr-copy-to-clipboard__tooltip"
+      >
+        Text copied!
+      </div>
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(CopyToClipboardContainer)>
+`;
+
 exports[`renders the CopyToClipboardContainer with no props 1`] = `
 <ForwardRef(CopyToClipboardContainer)>
   <ForwardRef(Base)

package/src/CopyToClipboardContainer/index.spec.tsx

@@ -11,8 +11,7 @@ it('renders the CopyToClipboardContainer with no props', () => {
 it('renders the CopyToClipboardContainer with variant=tooltip', () => {
   expect(
     mount(
-      <CopyToClipboardContainer variant="tooltip"
-        tooltipAlign="right">
+      <CopyToClipboardContainer variant="tooltip" tooltipAlign="right">
         Text copied!
       </CopyToClipboardContainer>
     )
@@ -27,3 +26,10 @@ it('renders the CopyToClipboardContainer with variant=banner', () => {
     )
   ).toMatchSnapshot();
 });
+it('renders the CopyToClipboardContainer with dense=true', () => {
+  expect(
+    mount(
+      <CopyToClipboardContainer dense>Text copied!</CopyToClipboardContainer>
+    )
+  ).toMatchSnapshot();
+});

package/src/CopyToClipboardContainer/index.tsx

@@ -17,6 +17,14 @@ export interface CopyToClipboardContainerProps extends BaseProps<'div'> {
    * @default 'right'
    */
   tooltipAlign?: 'right' | 'left';
+  /**
+   * dense is optional.
+   * affects only the density of the tooltip.
+   * @value true tooltip will be dense.
+   * @value false
+   * @default false
+   * */
+  dense?: boolean;
 }
 /**
  * CopyToClipboardContainer is a wrapper component for CopyToClipboardMessage
@@ -25,7 +33,7 @@ export const CopyToClipboardContainer = React.forwardRef<
   HTMLDivElement,
   CopyToClipboardContainerProps
 >(function CopyToClipboardContainer(
-  { variant = 'tooltip', tooltipAlign = 'right', className, children, ...props },
+  { variant = 'tooltip', tooltipAlign = 'right', className, dense, children, ...props },
   ref
 ) {
   return (
@@ -41,6 +49,7 @@ export const CopyToClipboardContainer = React.forwardRef<
       <div
         className={clsx(className, {
           'govgr-copy-to-clipboard__tooltip': variant === 'tooltip',
+          'govgr-copy-to-clipboard__tooltip--dense': variant === 'tooltip' && dense,
           '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',

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

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

package/src/DateInputContainer/index.test.tsx

@@ -8,3 +8,8 @@ it('renders the DateInputContainer with no props', () => {
     mount(<DateInputContainer>hello</DateInputContainer>)
   ).toMatchSnapshot();
 });
+it('renders the DateInputContainer with dense prop', () => {
+  expect(
+    mount(<DateInputContainer dense>hello</DateInputContainer>)
+  ).toMatchSnapshot();
+});

package/src/DateInputContainer/index.tsx

@@ -2,7 +2,15 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface DateInputContainerProps extends BaseProps<'div'> {}
+export interface DateInputContainerProps extends BaseProps<'div'> {
+  /**
+   * dense is optional.
+   * @value true DateInputs will be dense.
+   * @value false
+   * @default false
+   */
+  dense?: boolean;
+}
 /**
  * Details for the DateInputContainer.
  * DateInputContainer component is used for helping users enter a memorable date or one they can easily look up
@@ -12,13 +20,14 @@ export interface DateInputContainerProps extends BaseProps<'div'> {}
 export const DateInputContainer = React.forwardRef<
   HTMLDivElement,
   DateInputContainerProps
->(function DateInputContainer({ className, children, ...props }, ref) {
+>(function DateInputContainer({ dense, className, children, ...props }, ref) {
   return (
     <Base
       as="div"
       ref={ref}
       className={clsx(className, {
         'govgr-date-input': true,
+        'govgr-date-input--dense': dense,
       })}
       {...props}
     >

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

@@ -14,16 +14,21 @@ exports[`renders the Drawer with \`open=true\` \`left=true\` props 1`] = `
     >
       <div>
         <ForwardRef(Heading)>
-          <ForwardRef(Base)
+          <ForwardRef(Typography)
             as="h1"
             className="govgr-heading-xl"
           >
-            <h1
+            <ForwardRef(Base)
+              as="h1"
               className="govgr-heading-xl"
             >
-              Menu
-            </h1>
-          </ForwardRef(Base)>
+              <h1
+                className="govgr-heading-xl"
+              >
+                Menu
+              </h1>
+            </ForwardRef(Base)>
+          </ForwardRef(Typography)>
         </ForwardRef(Heading)>
         <CloseIcon
           className="govgr--drawer__close-icon"

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

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

package/src/DropdownContent/index.tsx

@@ -2,20 +2,33 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface DropdownContentProps extends BaseProps<'div'> {}
+export interface DropdownContentProps extends BaseProps<'div'> {
+  /**
+   * fullWidth is optional.
+   * If true, the dropdown content will be full width.
+   * @value true
+   * @value false
+   * @default true
+   */
+  fullWidth?: boolean;
+}
 /**
  * You should use DropdownContent component inside Dropdown component.
  */
 export const DropdownContent = React.forwardRef<
   HTMLDivElement,
   DropdownContentProps
->(function DropdownContent({ className, children, ...props }, ref) {
+>(function DropdownContent(
+  { className, children, fullWidth = true, ...props },
+  ref
+) {
   return (
     <Base
       as="div"
       ref={ref}
       className={clsx(className, {
         'govgr-dropdown__content': true,
+        'govgr-dropdown__content--full-width': fullWidth,
       })}
       {...props}
     >

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

@@ -1,5 +1,44 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders the ErrorSummary with dense=true 1`] = `
+<ForwardRef(ErrorSummary)
+  dense={true}
+>
+  <ForwardRef(NotificationBannerContainer)
+    dense={true}
+    variant="error"
+  >
+    <ForwardRef(Base)
+      aria-labelledby="govgr-notification-banner-title"
+      as="div"
+      className="govgr-notification-banner--error govgr-notification-banner--dense govgr-notification-banner"
+      data-module="govgr-notification-banner"
+      role="region"
+    >
+      <div
+        aria-labelledby="govgr-notification-banner-title"
+        className="govgr-notification-banner--error govgr-notification-banner--dense govgr-notification-banner"
+        data-module="govgr-notification-banner"
+        role="region"
+      >
+        <ForwardRef(NotificationBannerContent)>
+          <ForwardRef(Base)
+            as="div"
+            className="govgr-notification-banner__content"
+          >
+            <div
+              className="govgr-notification-banner__content"
+            >
+              hello
+            </div>
+          </ForwardRef(Base)>
+        </ForwardRef(NotificationBannerContent)>
+      </div>
+    </ForwardRef(Base)>
+  </ForwardRef(NotificationBannerContainer)>
+</ForwardRef(ErrorSummary)>
+`;
+
 exports[`renders the ErrorSummary with no props 1`] = `
 <ForwardRef(ErrorSummary)>
   <ForwardRef(NotificationBannerContainer)

package/src/ErrorSummary/index.test.tsx

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

package/src/ErrorSummary/index.tsx

@@ -3,22 +3,29 @@ import { BaseProps } from '@digigov/react-core/Base';
 import NotificationBannerContainer from '@digigov/react-core/NotificationBannerContainer';
 import NotificationBannerContent from '@digigov/react-core/NotificationBannerContent';
 
-export interface ErrorSummaryProps extends BaseProps<'div'> { }
+export interface ErrorSummaryProps extends BaseProps<'div'> {
+  /**
+   * dense is optional.
+   * @value true ErrorSummary will be dense.
+   * @value false
+   * @default false
+   * */
+  dense?: boolean;
+}
 /**
  * Use this component at the top of a page to summarize any errors a user has made.
  */
 export const ErrorSummary = React.forwardRef<HTMLDivElement, ErrorSummaryProps>(
-  function ErrorSummary({ className, children, ...props }, ref) {
+  function ErrorSummary({ className, dense, children, ...props }, ref) {
     return (
       <NotificationBannerContainer
         variant={'error'}
         className={className}
         ref={ref}
+        dense={dense}
         {...props}
       >
-        <NotificationBannerContent>
-          {children}
-        </NotificationBannerContent>
+        <NotificationBannerContent>{children}</NotificationBannerContent>
       </NotificationBannerContainer>
     );
   }

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

@@ -5,25 +5,21 @@ exports[`renders the FooterContainer with no props 1`] = `
   <ForwardRef(Container)
     grid={false}
   >
-    <ForwardRef(Base)
-      as="div"
+    <ForwardRef(Grid)
       className="govgr-container"
+      container={false}
     >
-      <div
+      <ForwardRef(Base)
+        as="div"
         className="govgr-container"
       >
-        <ForwardRef(Base)
-          as="div"
-          className=""
+        <div
+          className="govgr-container"
         >
-          <div
-            className=""
-          >
-            hello
-          </div>
-        </ForwardRef(Base)>
-      </div>
-    </ForwardRef(Base)>
+          hello
+        </div>
+      </ForwardRef(Base)>
+    </ForwardRef(Grid)>
   </ForwardRef(Container)>
 </ForwardRef(FooterContainer)>
 `;