@digigov/react-core 1.0.0-8ae63a77 → 1.0.0-8bbf3ef2

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

@@ -8,13 +8,18 @@ exports[`renders the BottomInfo with no props 1`] = `
     <ForwardRef(Grid)
       className="govgr-bottom-info govgr-container"
       container={true}
+      spacing={
+        Object {
+          "sm": 12,
+        }
+      }
     >
       <ForwardRef(Base)
         as="div"
-        className="govgr-bottom-info govgr-container govgr-grid"
+        className="govgr-bottom-info govgr-container govgr-gap-sm-12 govgr-grid"
       >
         <div
-          className="govgr-bottom-info govgr-container govgr-grid"
+          className="govgr-bottom-info govgr-container govgr-gap-sm-12 govgr-grid"
         >
           hello
         </div>

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

@@ -8,13 +8,18 @@ exports[`renders the BottomInfoContainer with no props 1`] = `
     <ForwardRef(Grid)
       className="govgr-bottom-info__container govgr-container"
       container={true}
+      spacing={
+        Object {
+          "sm": 12,
+        }
+      }
     >
       <ForwardRef(Base)
         as="div"
-        className="govgr-bottom-info__container govgr-container govgr-grid"
+        className="govgr-bottom-info__container govgr-container govgr-gap-sm-12 govgr-grid"
       >
         <div
-          className="govgr-bottom-info__container govgr-container govgr-grid"
+          className="govgr-bottom-info__container govgr-container govgr-gap-sm-12 govgr-grid"
         >
           hello
         </div>

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

@@ -137,6 +137,24 @@ exports[`renders the Button with color=warning with disabled=true 1`] = `
 </ForwardRef(Button)>
 `;
 
+exports[`renders the Button with dense=true 1`] = `
+<ForwardRef(Button)
+  dense={true}
+>
+  <ForwardRef(Base)
+    as="button"
+    className="govgr-btn-primary govgr-btn govgr-btn--dense"
+    printHidden={true}
+  >
+    <button
+      className="govgr-btn-primary govgr-btn govgr-btn--dense govgr-print-hidden"
+    >
+      hello
+    </button>
+  </ForwardRef(Base)>
+</ForwardRef(Button)>
+`;
+
 exports[`renders the Button with disabled=false 1`] = `
 <ForwardRef(Button)
   disabled={false}

package/src/Button/index.test.tsx

@@ -21,6 +21,9 @@ it('renders the Button with disabled=true', () => {
 it('renders the Button with disabled=false', () => {
   expect(mount(<Button disabled={false}>hello</Button>)).toMatchSnapshot();
 });
+it('renders the Button with dense=true', () => {
+  expect(mount(<Button dense={true}>hello</Button>)).toMatchSnapshot();
+});
 it('renders the Button with color=primary with disabled=true', () => {
   expect(
     mount(

package/src/Button/index.tsx

@@ -22,6 +22,13 @@ export interface ButtonProps extends BaseProps<'button'> {
   * @default 'button'
   */
   variant?: 'link' | 'button';
+  /**
+   * dense is optional.
+   * @value true Button will be dense.
+   * @value false
+   * @default false
+   */
+  dense?: boolean;
 }
 /**
  * Use the Button component to help users carry out an action.
@@ -31,6 +38,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     {
       color = 'primary',
       variant = 'button',
+      dense,
       disabled,
       printHidden = true,
       className,
@@ -48,6 +56,7 @@ export const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
         className={clsx(className, {
           'govgr-link': variant === 'link',
           'govgr-btn': variant === 'button',
+          'govgr-btn--dense': dense,
           'govgr-btn-primary': variant === 'button' && color === 'primary',
           'govgr-btn-secondary': variant === 'button' && color === 'secondary',
           'govgr-btn-warning': variant === 'button' && color === 'warning',

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

@@ -1,5 +1,81 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders the Checkbox with dense prop and CheckboxItems 1`] = `
+<ForwardRef(Checkbox)
+  dense={true}
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-checkboxes--dense govgr-checkboxes"
+  >
+    <div
+      className="govgr-checkboxes--dense govgr-checkboxes"
+    >
+      <ForwardRef(CheckboxItem)>
+        <div
+          className="govgr-checkboxes__item"
+        >
+          <ForwardRef(LabelContainer)
+            className="govgr-checkboxes__label"
+          >
+            <ForwardRef(Base)
+              as="label"
+              className="govgr-checkboxes__label govgr-label"
+            >
+              <label
+                className="govgr-checkboxes__label govgr-label"
+              >
+                This is item 1
+                <ForwardRef(Base)
+                  as="input"
+                  className="govgr-checkboxes__input"
+                  type="checkbox"
+                >
+                  <input
+                    className="govgr-checkboxes__input"
+                    type="checkbox"
+                  />
+                </ForwardRef(Base)>
+              </label>
+            </ForwardRef(Base)>
+          </ForwardRef(LabelContainer)>
+        </div>
+      </ForwardRef(CheckboxItem)>
+      <ForwardRef(CheckboxItem)>
+        <div
+          className="govgr-checkboxes__item"
+        >
+          <ForwardRef(LabelContainer)
+            className="govgr-checkboxes__label"
+          >
+            <ForwardRef(Base)
+              as="label"
+              className="govgr-checkboxes__label govgr-label"
+            >
+              <label
+                className="govgr-checkboxes__label govgr-label"
+              >
+                This is item 2
+                <ForwardRef(Base)
+                  as="input"
+                  className="govgr-checkboxes__input"
+                  type="checkbox"
+                >
+                  <input
+                    className="govgr-checkboxes__input"
+                    type="checkbox"
+                  />
+                </ForwardRef(Base)>
+              </label>
+            </ForwardRef(Base)>
+          </ForwardRef(LabelContainer)>
+        </div>
+      </ForwardRef(CheckboxItem)>
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(Checkbox)>
+`;
+
 exports[`renders the Checkbox with layout=horizontal and CheckboxItems 1`] = `
 <ForwardRef(Checkbox)
   layout="horizontal"

package/src/Checkbox/index.test.tsx

@@ -27,3 +27,13 @@ it('renders the Checkbox with layout=horizontal and CheckboxItems', () => {
     )
   ).toMatchSnapshot();
 });
+it('renders the Checkbox with dense prop and CheckboxItems', () => {
+  expect(
+    mount(
+      <Checkbox dense>
+        <CheckboxItem>This is item 1</CheckboxItem>
+        <CheckboxItem>This is item 2</CheckboxItem>
+      </Checkbox>
+    )
+  ).toMatchSnapshot();
+});

package/src/Checkbox/index.tsx

@@ -12,6 +12,13 @@ export interface CheckboxProps extends BaseProps<'div'> {
    * @default 'vertical'
    */
   layout?: 'horizontal' | 'vertical';
+  /**
+   * dense is optional.
+   * @value true Checkboxes will be dense.
+   * @value false
+   * @default false
+   */
+  dense?: boolean;
 }
 /**
  * Details for the Checkbox.
@@ -19,7 +26,7 @@ export interface CheckboxProps extends BaseProps<'div'> {
  * It takes CheckboxItem as children
  */
 export const Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>(
-  function Checkbox({ layout, className, children, ...props }, ref) {
+  function Checkbox({ layout, dense, className, children, ...props }, ref) {
     return (
       <Base
         as="div"
@@ -27,6 +34,7 @@ export const Checkbox = React.forwardRef<HTMLDivElement, CheckboxProps>(
         className={clsx(className, {
           'govgr-checkboxes': true,
           'govgr-checkboxes--horizontal': layout=== 'horizontal',
+          'govgr-checkboxes--dense': dense,
         })}
         {...props}
       >

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

@@ -30,13 +30,18 @@ exports[`renders the Container with fullWidth prop 1`] = `
   <ForwardRef(Grid)
     className="govgr-container--full-width govgr-container"
     container={true}
+    spacing={
+      Object {
+        "sm": 12,
+      }
+    }
   >
     <ForwardRef(Base)
       as="div"
-      className="govgr-container--full-width govgr-container govgr-grid"
+      className="govgr-container--full-width govgr-container govgr-gap-sm-12 govgr-grid"
     >
       <div
-        className="govgr-container--full-width govgr-container govgr-grid"
+        className="govgr-container--full-width govgr-container govgr-gap-sm-12 govgr-grid"
       >
         hello
       </div>
@@ -50,13 +55,18 @@ exports[`renders the Container with no props 1`] = `
   <ForwardRef(Grid)
     className="govgr-container"
     container={true}
+    spacing={
+      Object {
+        "sm": 12,
+      }
+    }
   >
     <ForwardRef(Base)
       as="div"
-      className="govgr-container govgr-grid"
+      className="govgr-container govgr-gap-sm-12 govgr-grid"
     >
       <div
-        className="govgr-container govgr-grid"
+        className="govgr-container govgr-gap-sm-12 govgr-grid"
       >
         hello
       </div>

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

@@ -8,10 +8,11 @@ exports[`renders the Hint with  variant and src props 1`] = `
   <ForwardRef(Base)
     as="img"
     className="govgr-image-logo--dark"
+    printHidden={true}
     src="logo.png"
   >
     <img
-      className="govgr-image-logo--dark"
+      className="govgr-image-logo--dark govgr-print-hidden"
       src="logo.png"
     />
   </ForwardRef(Base)>
@@ -24,11 +25,12 @@ exports[`renders the Hint with src prop 1`] = `
 >
   <ForwardRef(Base)
     as="img"
-    className="govgr-image-logo--light"
+    className="govgr-image-logo"
+    printHidden={true}
     src="logo.png"
   >
     <img
-      className="govgr-image-logo--light"
+      className="govgr-image-logo govgr-print-hidden"
       src="logo.png"
     />
   </ForwardRef(Base)>

package/src/ModalContainer/index.tsx

@@ -8,6 +8,13 @@ export interface ModalContainerProps extends BaseProps<'div'> {
   * @value false
   */
   open?: boolean
+  /**
+   * dense is optional.
+   * @value true ModalContainer and its children will be dense.
+   * @value false
+   * @default false
+   */
+  dense?: boolean;
 }
 /**
  * Modals can be used to open a pop-up dialog box and provide critical information
@@ -18,7 +25,7 @@ export interface ModalContainerProps extends BaseProps<'div'> {
 export const ModalContainer = React.forwardRef<
   HTMLDivElement,
   ModalContainerProps
->(function ModalContainer({ className, children, open, ...props }, ref) {
+>(function ModalContainer({ className, children, open, dense, ...props }, ref) {
   return (
     <Base
       as="div"
@@ -26,6 +33,7 @@ export const ModalContainer = React.forwardRef<
       className={clsx(className, {
         'govgr-modal': true,
         'govgr-modal--open': open,
+        'govgr-modal--dense': dense,
       })}
       {...props}
     >