@digigov/react-core 1.0.0-6b93ebf2 → 1.0.0-75e5086d

package/src/AdminContainer/index.tsx

@@ -1,23 +1,22 @@
 import React from 'react';
 import clsx from 'clsx';
-import Base, { BaseProps } from '@digigov/react-core/Base';
+import Container, { ContainerProps } from '@digigov/react-core/Container';
 
-export interface AdminContainerProps extends BaseProps<'div'> {}
+export interface AdminContainerProps extends Omit<ContainerProps, 'grid'> { }
 /**
  * AdminContainer is a wrapper for the content of the page
- * Use AdminContainer isnide AdminLayout component
+ * Use AdminContainer inside AdminLayout component
  */
 export const AdminContainer = React.forwardRef<
   HTMLDivElement,
   AdminContainerProps
 >(function AdminContainer({ className, children, ...props }, ref) {
   return (
-    <Base
-      as="div"
+    <Container
       ref={ref}
-      className={clsx(className, {
-        'govgr-admin-width-container': true,
-      })}
+      fullWidth={true}
+      grid={false}
+      className={className}
       {...props}
     >
       <div
@@ -27,8 +26,8 @@ export const AdminContainer = React.forwardRef<
       >
         {children}
       </div>
-    </Base>
+    </Container>
   );
 });
 
-export default AdminContainer;
+export default AdminContainer;

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

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

package/src/AdminHeaderContent/index.spec.tsx

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

package/src/AdminHeaderContent/index.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+
+export interface AdminHeaderContentProps extends BaseProps<'div'> {}
+/**
+ * AdminAdminHeaderContent is used inside AdminHeader as a container for its items.
+ */
+export const AdminHeaderContent = React.forwardRef<
+  HTMLDivElement,
+  AdminHeaderContentProps
+>(function AdminHeaderContent({ className, children, ...props }, ref) {
+  return (
+    <Base
+      as="div"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-admin-header__content': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default AdminHeaderContent;

package/src/AdminLayout/index.tsx

@@ -20,7 +20,7 @@ export const AdminLayout = React.forwardRef<HTMLDivElement, AdminLayoutProps>(
         ref={ref}
         className={clsx(className, {
           'govgr-admin-layout-wrapper': true,
-          'govgr-layout-wrapper__full-height': fullHeight,
+          'govgr-layout--full-height': fullHeight,
         })}
         {...props}
       >

package/src/AdminTopSection/index.tsx

@@ -2,7 +2,23 @@ import React from 'react';
 import clsx from 'clsx';
 import Grid, { GridProps } from '@digigov/react-core/Grid';
 
-export interface AdminTopSectionProps extends GridProps {}
+export interface AdminTopSectionProps extends GridProps {
+  /**
+   * color is optional.
+   * 'primary' color gives AdminTopSection the default color.
+   * @value primary
+   * @value secondary
+   * @default primary
+   * */
+  color?: 'primary' | 'secondary';
+  /**
+   * border is optional.
+   * border prop adds border to AdminTopSection.
+   * @value true
+   * @value false
+   */
+  border?: boolean;
+}
 /**
  * Use  AdminTopSection component inside AdminContainer component to seperate content in
  * 1 to 12 individual equal spaces
@@ -10,13 +26,15 @@ export interface AdminTopSectionProps extends GridProps {}
 export const AdminTopSection = React.forwardRef<
   HTMLDivElement,
   AdminTopSectionProps
->(function AdminTopSection({ className, children, ...props }, ref) {
+>(function AdminTopSection({ color = 'primary', border, className, children, ...props }, ref) {
   return (
     <Grid
       as="div"
       ref={ref}
       className={clsx(className, {
         'govgr-admin-top-section': true,
+        'govgr-admin-top-section--secondary': color === 'secondary',
+        'govgr-admin-top-section--border': border,
       })}
       {...props}
     >

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

@@ -2,15 +2,24 @@
 
 exports[`renders the Aside with no props 1`] = `
 <ForwardRef(Aside)>
-  <ForwardRef(Base)
+  <ForwardRef(Grid)
     as="aside"
-    className="govgr-grid-column-one-third"
+    className="govgr-aside"
+    item={true}
+    md={4}
+    spacing={4}
+    xs={12}
   >
-    <aside
-      className="govgr-grid-column-one-third"
+    <ForwardRef(Base)
+      as="aside"
+      className="govgr-aside xs:govgr-grid__col-span-12 md:govgr-grid__col-span-4"
     >
-      hello
-    </aside>
-  </ForwardRef(Base)>
+      <aside
+        className="govgr-aside xs:govgr-grid__col-span-12 md:govgr-grid__col-span-4"
+      >
+        hello
+      </aside>
+    </ForwardRef(Base)>
+  </ForwardRef(Grid)>
 </ForwardRef(Aside)>
 `;

package/src/Aside/index.tsx

@@ -1,28 +1,31 @@
 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 AsideProps extends BaseProps<'aside'> {}
+export interface AsideProps extends GridProps {}
 /**
- * Use this inside the Content component for additional content
- * that will be shown on the left one third of the page
+ * Use this inside the Container component for additional content.
+ * that will be shown on the left one third of the page.
  */
 export const Aside = React.forwardRef<HTMLElement, AsideProps>(function Aside(
   { className, children, ...props },
   ref
 ) {
   return (
-    <Base
+    <Grid
+      item
+      xs={12}
+      md={4}
+      spacing={4}
       as="aside"
       ref={ref}
       className={clsx(className, {
         'govgr-aside': true,
-        'govgr-grid-column-one-third': true,
       })}
       {...props}
     >
       {children}
-    </Base>
+    </Grid>
   );
 });
 

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

@@ -6,13 +6,13 @@ exports[`renders the AdminContainer with no props 1`] = `
     aria-atomic="true"
     aria-live="polite"
     as="div"
-    className="govgr-autocomplete--status"
+    className="govgr-autocomplete__status"
     role="status"
   >
     <div
       aria-atomic="true"
       aria-live="polite"
-      className="govgr-autocomplete--status"
+      className="govgr-autocomplete__status"
       role="status"
     >
       hello

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

@@ -4,10 +4,10 @@ exports[`renders the AdminContainer with no props 1`] = `
 <ForwardRef(AutoCompleteStatusWrapper)>
   <ForwardRef(Base)
     as="div"
-    className="govgr-autocomplete--status__wrapper"
+    className="govgr-autocomplete__status__wrapper"
   >
     <div
-      className="govgr-autocomplete--status__wrapper"
+      className="govgr-autocomplete__status__wrapper"
     >
       hello
     </div>

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,25 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the BottomInfo with no props 1`] = `
+<ForwardRef(BottomInfo)>
+  <ForwardRef(Container)
+    className="govgr-bottom-info"
+  >
+    <ForwardRef(Grid)
+      className="govgr-bottom-info govgr-container"
+      container={true}
+    >
+      <ForwardRef(Base)
+        as="div"
+        className="govgr-bottom-info govgr-container govgr-grid"
+      >
+        <div
+          className="govgr-bottom-info govgr-container govgr-grid"
+        >
+          hello
+        </div>
+      </ForwardRef(Base)>
+    </ForwardRef(Grid)>
+  </ForwardRef(Container)>
+</ForwardRef(BottomInfo)>
+`;

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

@@ -0,0 +1,25 @@
+// 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(Grid)
+      className="govgr-bottom-info__container govgr-container"
+      container={true}
+    >
+      <ForwardRef(Base)
+        as="div"
+        className="govgr-bottom-info__container govgr-container govgr-grid"
+      >
+        <div
+          className="govgr-bottom-info__container govgr-container govgr-grid"
+        >
+          hello
+        </div>
+      </ForwardRef(Base)>
+    </ForwardRef(Grid)>
+  </ForwardRef(Container)>
+</ForwardRef(BottomInfoContainer)>
+`;

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

@@ -0,0 +1,22 @@
+// 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}
+    xs={12}
+  >
+    <ForwardRef(Base)
+      as="div"
+      className="govgr-bottom-info__content xs:govgr-grid__col-span-12"
+    >
+      <div
+        className="govgr-bottom-info__content xs:govgr-grid__col-span-12"
+      >
+        hello
+      </div>
+    </ForwardRef(Base)>
+  </ForwardRef(Grid)>
+</ForwardRef(BottomInfoContent)>
+`;

package/src/BottomInfoContent/index.tsx

@@ -11,16 +11,13 @@ export const BottomInfoContent = React.forwardRef<
   HTMLDivElement,
   BottomInfoContentProps
 >(function BottomInfoContent(
-  { className, xs = 3, md = 3, lg = 3, xl = 3, children, ...props },
+  { className, xs = 12, children, ...props },
   ref
 ) {
   return (
     <Grid
       item
       xs={xs}
-      md={md}
-      lg={lg}
-      xl={xl}
       ref={ref}
       className={clsx(className, {
         'govgr-bottom-info__content': true,

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;