@digigov/react-core 1.0.0-6b93ebf2 → 1.0.0-871b6be5

package/src/AutoCompleteWrapper/index.tsx

@@ -4,22 +4,17 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface AutoCompleteWrapperProps extends BaseProps<'div'> {
   /**
-  * cellWidth is optional.
-  * Use cellWidth prop to define a custom width for a specific reference number in your components.
-  * @value 'one-quarter'
-  * @value 'one-third'
-  * @value 'one-half'
-  * @value 'two-thirds'
-  * @value 'three-quarters'
-  * @value 'full'
-  */
-  cellWidth?:
-    | 'one-quarter'
-    | 'one-third'
-    | 'one-half'
-    | 'two-thirds'
-    | 'three-quarters'
-    | 'full';
+   * width is optional.
+   * Use width prop to define a custom width in your component.
+   * @value '25%';
+   * @value '33.3%';
+   * @value '50%';
+   * @value '66.6%';
+   * @value '75%';
+   * @value '100%';
+   * @value 'full';
+   */
+  width?: '25%' | '33.3%' | '50%' |  '66.6%' | '75%' | '100%' | 'full';
 }
 /**
  * AutoCompleteWrapper is a wrapper for autocomplete element.
@@ -29,7 +24,7 @@ export const AutoCompleteWrapper = React.forwardRef<
   HTMLDivElement,
   AutoCompleteWrapperProps
 >(function AutoCompleteWrapper(
-  { className, cellWidth, children, ...props },
+  { className, width, children, ...props },
   ref
 ) {
   return (
@@ -38,12 +33,12 @@ export const AutoCompleteWrapper = React.forwardRef<
       ref={ref}
       className={clsx(className, {
         'govgr-autocomplete__wrapper': true,
-        'govgr-!-width-one-quarter': cellWidth === 'one-quarter',
-        'govgr-!-width-one-third': cellWidth === 'one-third',
-        'govgr-!-width-one-half': cellWidth === 'one-half',
-        'govgr-!-width-two-thirds': cellWidth === 'two-thirds',
-        'govgr-!-width-three-quarters': cellWidth === 'three-quarters',
-        'govgr-!-width-full': cellWidth === 'full',
+        'govgr-!-width-one-quarter': width === '25%',
+        'govgr-!-width-one-third': width === '33.3%',
+        'govgr-!-width-one-half': width === '50%',
+        'govgr-!-width-two-thirds': width === '66.6%',
+        'govgr-!-width-three-quarters': width === '75%',
+        'govgr-!-width-full': width === 'full',
       })}
       {...props}
     >

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

@@ -18,8 +18,11 @@ exports[`renders the BackLink with href="#" 1`] = `
       onClick={[Function]}
       tabIndex={0}
     >
-      <CaretIcon>
+      <CaretIcon
+        direction="left"
+      >
         <ForwardRef(Icon)
+          direction="left"
           icon="caret"
         >
           <ForwardRef(SvgIcon)
@@ -38,7 +41,9 @@ exports[`renders the BackLink with href="#" 1`] = `
                 focusable="false"
                 viewBox="0 0 24 24"
               >
-                <caret>
+                <caret
+                  direction="left"
+                >
                   <path
                     d="M18,22V2L6,12L18,22z"
                   />
@@ -68,8 +73,11 @@ exports[`renders the BackLink with no props 1`] = `
       onClick={[Function]}
       tabIndex={0}
     >
-      <CaretIcon>
+      <CaretIcon
+        direction="left"
+      >
         <ForwardRef(Icon)
+          direction="left"
           icon="caret"
         >
           <ForwardRef(SvgIcon)
@@ -88,7 +96,9 @@ exports[`renders the BackLink with no props 1`] = `
                 focusable="false"
                 viewBox="0 0 24 24"
               >
-                <caret>
+                <caret
+                  direction="left"
+                >
                   <path
                     d="M18,22V2L6,12L18,22z"
                   />

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

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the BannerContainer with no props 1`] = `
+<ForwardRef(BannerContainer)>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-cookie-banner"
+  >
+    <div
+      className="govgr-cookie-banner"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(BannerContainer)>
+`;

package/src/Base/index.tsx

@@ -57,6 +57,8 @@ export type BaseProps<
     printHidden?: boolean;
     /**  printVisible is optional. When block, the component is displayed as block. When inline, the component is displayed as inline.*/
     printVisible?: 'block' | 'inline';
+    /** Components will be hidden at all screen sizes. */
+    hidden?: boolean;
     /** Components will be hidden from 'xs' screen size and up. */
     xsUpHidden?: boolean;
     /** Components will be hidden from 'sm' screen size and up. */
@@ -104,6 +106,7 @@ export const Base: BaseComponent = React.forwardRef(function Base<
     paddingRight,
     printHidden,
     printVisible,
+    hidden,
     xsUpHidden,
     smUpHidden,
     mdUpHidden,
@@ -143,6 +146,7 @@ export const Base: BaseComponent = React.forwardRef(function Base<
         'govgr-print-hidden': !!printHidden,
         'govgr-print-visible-block': printVisible === 'block',
         'govgr-print-visible-inline': printVisible === 'inline',
+        'govgr-hidden': !!hidden,
         'govgr-hidden-xs--up': !!xsUpHidden,
         'govgr-hidden-sm--up': !!smUpHidden,
         'govgr-hidden-md--up': !!mdUpHidden,

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

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the BottomInfo with no props 1`] = `
+<ForwardRef(BottomInfo)>
+  <ForwardRef(Container)
+    className="govgr-bottom-info"
+  >
+    <ForwardRef(Base)
+      as="div"
+      className="govgr-bottom-info govgr-container"
+    >
+      <div
+        className="govgr-bottom-info govgr-container"
+      >
+        <ForwardRef(Base)
+          as="div"
+          className="govgr-main-wrapper"
+        >
+          <div
+            className="govgr-main-wrapper"
+          >
+            hello
+          </div>
+        </ForwardRef(Base)>
+      </div>
+    </ForwardRef(Base)>
+  </ForwardRef(Container)>
+</ForwardRef(BottomInfo)>
+`;

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

@@ -0,0 +1,29 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the BottomInfoContainer with no props 1`] = `
+<ForwardRef(BottomInfoContainer)>
+  <ForwardRef(Container)
+    className="govgr-bottom-info__container"
+  >
+    <ForwardRef(Base)
+      as="div"
+      className="govgr-bottom-info__container govgr-container"
+    >
+      <div
+        className="govgr-bottom-info__container govgr-container"
+      >
+        <ForwardRef(Base)
+          as="div"
+          className="govgr-main-wrapper"
+        >
+          <div
+            className="govgr-main-wrapper"
+          >
+            hello
+          </div>
+        </ForwardRef(Base)>
+      </div>
+    </ForwardRef(Base)>
+  </ForwardRef(Container)>
+</ForwardRef(BottomInfoContainer)>
+`;

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

@@ -0,0 +1,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the BottomInfoContent with no props 1`] = `
+<ForwardRef(BottomInfoContent)>
+  <ForwardRef(Grid)
+    className="govgr-bottom-info__content"
+    item={true}
+    lg={3}
+    md={3}
+    xl={3}
+    xs={3}
+  >
+    <ForwardRef(Base)
+      as="div"
+      className="govgr-bottom-info__content xs:govgr-grid__col-span-3 md:govgr-grid__col-span-3 lg:govgr-grid__col-span-3 xl:govgr-grid__col-span-3"
+    >
+      <div
+        className="govgr-bottom-info__content xs:govgr-grid__col-span-3 md:govgr-grid__col-span-3 lg:govgr-grid__col-span-3 xl:govgr-grid__col-span-3"
+      >
+        hello
+      </div>
+    </ForwardRef(Base)>
+  </ForwardRef(Grid)>
+</ForwardRef(BottomInfoContent)>
+`;

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

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders the CardAction with no props 1`] = `
-<ForwardRef(CardContent)>
+<ForwardRef(CardAction)>
   <ForwardRef(Base)
     as="div"
     className="govgr-card__action"
@@ -12,5 +12,5 @@ exports[`renders the CardAction with no props 1`] = `
       hello
     </div>
   </ForwardRef(Base)>
-</ForwardRef(CardContent)>
+</ForwardRef(CardAction)>
 `;

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

@@ -13,17 +13,14 @@ exports[`renders the Blockquote with no props 1`] = `
         <ForwardRef(Grid)
           className="govgr-field"
           item={true}
-          lg={12}
-          md={12}
-          xl={12}
           xs={12}
         >
           <ForwardRef(Base)
             as="div"
-            className="govgr-field xs:govgr-grid__col-span-12 md:govgr-grid__col-span-12 lg:govgr-grid__col-span-12 xl:govgr-grid__col-span-12"
+            className="govgr-field xs:govgr-grid__col-span-12"
           >
             <div
-              className="govgr-field xs:govgr-grid__col-span-12 md:govgr-grid__col-span-12 lg:govgr-grid__col-span-12 xl:govgr-grid__col-span-12"
+              className="govgr-field xs:govgr-grid__col-span-12"
             >
               <ForwardRef(LabelContainer)>
                 <ForwardRef(Base)

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

@@ -4,41 +4,16 @@ exports[`renders the Chip with no props 1`] = `
 <ForwardRef(Chip)>
   <ForwardRef(Base)
     as="li"
-    className=""
+    className="govgr-chip"
   >
     <li
-      className=""
+      className="govgr-chip"
     >
-      <a
-        className="govgr-chip"
-        href="#"
+      <div
+        className="govgr-chip__content"
       >
         hello
-        <ForwardRef(CloseIcon)>
-          <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"
-              >
-                <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 "
-                />
-              </svg>
-            </ForwardRef(Base)>
-          </ForwardRef(SvgIcon)>
-        </ForwardRef(CloseIcon)>
-      </a>
+      </div>
     </li>
   </ForwardRef(Base)>
 </ForwardRef(Chip)>

package/src/Chip/index.tsx

@@ -11,7 +11,7 @@ export interface ChipProps extends BaseProps<'li'> {
 }
 /**
  * Chips can be used to represent small blocks of information.
- * Chip component must be inside ChipSection component.
+ * Chip component must be inside ChipContainer component.
  */
 export const Chip = React.forwardRef<HTMLLIElement, ChipProps>(function Chip(
   { className, onDelete, onClick, children, ...props },

package/{es/ChipSection → src/ChipContainer}/__snapshots__/index.spec.tsx.snap

@@ -1,7 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders the ChipSection with no props 1`] = `
-<ForwardRef(ChipSection)>
+exports[`renders the ChipContainer with no props 1`] = `
+<ForwardRef(ChipContainer)>
   <ForwardRef(Base)
     as="ul"
     className="govgr-chips"
@@ -12,5 +12,5 @@ exports[`renders the ChipSection with no props 1`] = `
       hello!
     </ul>
   </ForwardRef(Base)>
-</ForwardRef(ChipSection)>
+</ForwardRef(ChipContainer)>
 `;

package/src/ChipContainer/index.spec.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import ChipContainer from '@digigov/react-core/ChipContainer';
+
+it('renders the ChipContainer with no props', () => {
+  expect(mount(<ChipContainer>hello!</ChipContainer>)).toMatchSnapshot();
+});

package/src/{ChipSection → ChipContainer}/index.tsx

@@ -10,10 +10,10 @@ export interface ChipSectionProps extends BaseProps<'ul'> {
   horizontal?: boolean
 }
 /**
- * ChipSection is used inside Chip component as a container for its items.
+ * ChipContainer is used inside Chip component as a container for its items.
  */
-export const ChipSection = React.forwardRef<HTMLUListElement, ChipSectionProps>(
-  function ChipSection({ className, horizontal, children, ...props }, ref) {
+export const ChipContainer = React.forwardRef<HTMLUListElement, ChipSectionProps>(
+  function ChipContainer({ className, horizontal, children, ...props }, ref) {
     return (
       <Base
         as="ul"
@@ -30,4 +30,4 @@ export const ChipSection = React.forwardRef<HTMLUListElement, ChipSectionProps>(
   }
 );
 
-export default ChipSection;
+export default ChipContainer;

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

@@ -2,15 +2,20 @@
 
 exports[`renders the ChipHeading with no props 1`] = `
 <ForwardRef(ChipHeading)>
-  <ForwardRef(Base)
-    as="h4"
-    className="govgr-chip--heading"
+  <ForwardRef(Heading)
+    element="h2"
+    size="xs"
   >
-    <h4
-      className="govgr-chip--heading"
+    <ForwardRef(Base)
+      as="h2"
+      className="govgr-heading-xs"
     >
-      hello
-    </h4>
-  </ForwardRef(Base)>
+      <h2
+        className="govgr-heading-xs"
+      >
+        hello
+      </h2>
+    </ForwardRef(Base)>
+  </ForwardRef(Heading)>
 </ForwardRef(ChipHeading)>
 `;

package/src/ChipHeading/index.tsx

@@ -1,8 +1,7 @@
 import React from 'react';
-import clsx from 'clsx';
-import Base, { BaseProps } from '@digigov/react-core/Base';
+import Heading, { HeadingProps } from '@digigov/react-core/Heading';
 
-export interface ChipHeadingProps extends BaseProps<'h4'> {}
+export interface ChipHeadingProps extends HeadingProps {}
 /**
  * ChipHeading is used to provide header title above chips.
  * ChipHeading component must be wrapped inside FilterSelectedSection component.
@@ -10,18 +9,11 @@ export interface ChipHeadingProps extends BaseProps<'h4'> {}
 export const ChipHeading = React.forwardRef<
   HTMLHeadingElement,
   ChipHeadingProps
->(function ChipHeading({ className, children, ...props }, ref) {
+>(function ChipHeading({ children, ...props }, ref) {
   return (
-    <Base
-      as="h4"
-      ref={ref}
-      className={clsx(className, {
-        'govgr-chip--heading': true,
-      })}
-      {...props}
-    >
+    <Heading ref={ref} element="h2" size="xs" {...props}>
       {children}
-    </Base>
+    </Heading>
   );
 });
 

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

@@ -0,0 +1,16 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the ChipKeyValue with no props 1`] = `
+<ForwardRef(ChipKeyValue)>
+  <ForwardRef(Base)
+    as="span"
+    className="govgr-chip__key-value"
+  >
+    <span
+      className="govgr-chip__key-value"
+    >
+      hello
+    </span>
+  </ForwardRef(Base)>
+</ForwardRef(ChipKeyValue)>
+`;

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

@@ -0,0 +1,51 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the CloseButton 1`] = `
+<ForwardRef(CloseButton)>
+  <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

@@ -0,0 +1,8 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import CloseButton from '@digigov/react-core/CloseButton';
+
+it('renders the CloseButton', () => {
+    expect(mount(<CloseButton />)).toMatchSnapshot();
+});

package/src/CloseButton/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import clsx from 'clsx';
+import Button, { ButtonProps } from '@digigov/react-core/Button';
+import { CloseIcon } from '@digigov/react-icons/CloseIcon';
+
+export interface CloseButtonProps extends ButtonProps {}
+/**
+ * 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) {
+  return (
+    <Button
+      variant="link"
+      className={clsx(className, {
+        'govgr-close-btn': true,
+      })}
+      ref={ref}
+      {...props}
+    >
+      {children}
+      <CloseIcon />
+    </Button>
+  );
+});
+
+export default CloseButton;

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

@@ -2,15 +2,15 @@
 
 exports[`renders the Container with cols={false} prop 1`] = `
 <ForwardRef(Container)
-  cols={false}
   fullWidth={true}
+  grid={false}
 >
   <ForwardRef(Base)
     as="div"
-    className="govgr-container--full-width"
+    className="govgr-container--full-width govgr-container"
   >
     <div
-      className="govgr-container--full-width"
+      className="govgr-container--full-width govgr-container"
     >
       <ForwardRef(Base)
         as="div"
@@ -33,10 +33,10 @@ exports[`renders the Container with fullWidth prop 1`] = `
 >
   <ForwardRef(Base)
     as="div"
-    className="govgr-container--full-width"
+    className="govgr-container--full-width govgr-container"
   >
     <div
-      className="govgr-container--full-width"
+      className="govgr-container--full-width govgr-container"
     >
       <ForwardRef(Base)
         as="div"

package/src/Container/index.tsx

@@ -36,14 +36,15 @@ export const Container = React.forwardRef<HTMLDivElement, ContainerProps>(
         })}
         {...props}
       >
-        <Base
-          as="div"
-          className={clsx({
-            'govgr-main-wrapper': grid,
-          })}
-        >
-          {children}
-        </Base>
+        {grid === true ?
+          <div
+            className={clsx({
+              'govgr-main-wrapper': grid,
+            })}
+          >
+            {children}
+          </div> :
+          <>{children}</>}
       </Base>
     );
   }

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"