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

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

@@ -52,32 +52,41 @@ exports[`renders the DropdownButton with arrow=true 1`] = `
       tabIndex={0}
     >
       hello
-      <ForwardRef(ArrowIcon)
+      <ArrowIcon
         direction="down"
       >
-        <ForwardRef(SvgIcon)
-          className="govgr-svg-icon--arrow--down"
+        <ForwardRef(Icon)
+          direction="down"
+          icon="arrow"
         >
-          <ForwardRef(Base)
-            aria-hidden="true"
-            as="svg"
-            className="govgr-svg-icon--arrow--down govgr-svg-icon"
-            focusable="false"
-            viewBox="0 0 24 24"
+          <ForwardRef(SvgIcon)
+            className="govgr-svg-icon--arrow"
           >
-            <svg
+            <ForwardRef(Base)
               aria-hidden="true"
-              className="govgr-svg-icon--arrow--down govgr-svg-icon"
+              as="svg"
+              className="govgr-svg-icon--arrow govgr-svg-icon"
               focusable="false"
               viewBox="0 0 24 24"
             >
-              <path
-                d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
-              />
-            </svg>
-          </ForwardRef(Base)>
-        </ForwardRef(SvgIcon)>
-      </ForwardRef(ArrowIcon)>
+              <svg
+                aria-hidden="true"
+                className="govgr-svg-icon--arrow govgr-svg-icon"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <arrow
+                  direction="down"
+                >
+                  <path
+                    d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
+                  />
+                </arrow>
+              </svg>
+            </ForwardRef(Base)>
+          </ForwardRef(SvgIcon)>
+        </ForwardRef(Icon)>
+      </ArrowIcon>
     </summary>
   </ForwardRef(Base)>
 </ForwardRef(DropdownButton)>
@@ -136,32 +145,41 @@ exports[`renders the DropdownButton with color=primary and arrow={true} 1`] = `
       className="govgr-btn-primary govgr-btn govgr-dropdown__button--arrow govgr-dropdown__button"
       tabIndex={0}
     >
-      <ForwardRef(ArrowIcon)
+      <ArrowIcon
         direction="down"
       >
-        <ForwardRef(SvgIcon)
-          className="govgr-svg-icon--arrow--down"
+        <ForwardRef(Icon)
+          direction="down"
+          icon="arrow"
         >
-          <ForwardRef(Base)
-            aria-hidden="true"
-            as="svg"
-            className="govgr-svg-icon--arrow--down govgr-svg-icon"
-            focusable="false"
-            viewBox="0 0 24 24"
+          <ForwardRef(SvgIcon)
+            className="govgr-svg-icon--arrow"
           >
-            <svg
+            <ForwardRef(Base)
               aria-hidden="true"
-              className="govgr-svg-icon--arrow--down govgr-svg-icon"
+              as="svg"
+              className="govgr-svg-icon--arrow govgr-svg-icon"
               focusable="false"
               viewBox="0 0 24 24"
             >
-              <path
-                d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
-              />
-            </svg>
-          </ForwardRef(Base)>
-        </ForwardRef(SvgIcon)>
-      </ForwardRef(ArrowIcon)>
+              <svg
+                aria-hidden="true"
+                className="govgr-svg-icon--arrow govgr-svg-icon"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <arrow
+                  direction="down"
+                >
+                  <path
+                    d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
+                  />
+                </arrow>
+              </svg>
+            </ForwardRef(Base)>
+          </ForwardRef(SvgIcon)>
+        </ForwardRef(Icon)>
+      </ArrowIcon>
     </summary>
   </ForwardRef(Base)>
 </ForwardRef(DropdownButton)>
@@ -263,32 +281,41 @@ exports[`renders the DropdownButton with color=primary variant="button" arrow={t
       className="govgr-btn-primary govgr-btn govgr-dropdown__button--arrow govgr-dropdown__button"
       tabIndex={0}
     >
-      <ForwardRef(ArrowIcon)
+      <ArrowIcon
         direction="down"
       >
-        <ForwardRef(SvgIcon)
-          className="govgr-svg-icon--arrow--down"
+        <ForwardRef(Icon)
+          direction="down"
+          icon="arrow"
         >
-          <ForwardRef(Base)
-            aria-hidden="true"
-            as="svg"
-            className="govgr-svg-icon--arrow--down govgr-svg-icon"
-            focusable="false"
-            viewBox="0 0 24 24"
+          <ForwardRef(SvgIcon)
+            className="govgr-svg-icon--arrow"
           >
-            <svg
+            <ForwardRef(Base)
               aria-hidden="true"
-              className="govgr-svg-icon--arrow--down govgr-svg-icon"
+              as="svg"
+              className="govgr-svg-icon--arrow govgr-svg-icon"
               focusable="false"
               viewBox="0 0 24 24"
             >
-              <path
-                d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
-              />
-            </svg>
-          </ForwardRef(Base)>
-        </ForwardRef(SvgIcon)>
-      </ForwardRef(ArrowIcon)>
+              <svg
+                aria-hidden="true"
+                className="govgr-svg-icon--arrow govgr-svg-icon"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <arrow
+                  direction="down"
+                >
+                  <path
+                    d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
+                  />
+                </arrow>
+              </svg>
+            </ForwardRef(Base)>
+          </ForwardRef(SvgIcon)>
+        </ForwardRef(Icon)>
+      </ArrowIcon>
     </summary>
   </ForwardRef(Base)>
 </ForwardRef(DropdownButton)>
@@ -330,32 +357,41 @@ exports[`renders the DropdownButton with color=primary variant="link" arrow={tru
       className="govgr-link govgr-dropdown__button--arrow govgr-dropdown__button"
       tabIndex={0}
     >
-      <ForwardRef(ArrowIcon)
+      <ArrowIcon
         direction="down"
       >
-        <ForwardRef(SvgIcon)
-          className="govgr-svg-icon--arrow--down"
+        <ForwardRef(Icon)
+          direction="down"
+          icon="arrow"
         >
-          <ForwardRef(Base)
-            aria-hidden="true"
-            as="svg"
-            className="govgr-svg-icon--arrow--down govgr-svg-icon"
-            focusable="false"
-            viewBox="0 0 24 24"
+          <ForwardRef(SvgIcon)
+            className="govgr-svg-icon--arrow"
           >
-            <svg
+            <ForwardRef(Base)
               aria-hidden="true"
-              className="govgr-svg-icon--arrow--down govgr-svg-icon"
+              as="svg"
+              className="govgr-svg-icon--arrow govgr-svg-icon"
               focusable="false"
               viewBox="0 0 24 24"
             >
-              <path
-                d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
-              />
-            </svg>
-          </ForwardRef(Base)>
-        </ForwardRef(SvgIcon)>
-      </ForwardRef(ArrowIcon)>
+              <svg
+                aria-hidden="true"
+                className="govgr-svg-icon--arrow govgr-svg-icon"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <arrow
+                  direction="down"
+                >
+                  <path
+                    d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
+                  />
+                </arrow>
+              </svg>
+            </ForwardRef(Base)>
+          </ForwardRef(SvgIcon)>
+        </ForwardRef(Icon)>
+      </ArrowIcon>
     </summary>
   </ForwardRef(Base)>
 </ForwardRef(DropdownButton)>
@@ -414,32 +450,41 @@ exports[`renders the DropdownButton with color=secondary and arrow={true} 1`] =
       className="govgr-btn-secondary govgr-btn govgr-dropdown__button--arrow govgr-dropdown__button"
       tabIndex={0}
     >
-      <ForwardRef(ArrowIcon)
+      <ArrowIcon
         direction="down"
       >
-        <ForwardRef(SvgIcon)
-          className="govgr-svg-icon--arrow--down"
+        <ForwardRef(Icon)
+          direction="down"
+          icon="arrow"
         >
-          <ForwardRef(Base)
-            aria-hidden="true"
-            as="svg"
-            className="govgr-svg-icon--arrow--down govgr-svg-icon"
-            focusable="false"
-            viewBox="0 0 24 24"
+          <ForwardRef(SvgIcon)
+            className="govgr-svg-icon--arrow"
           >
-            <svg
+            <ForwardRef(Base)
               aria-hidden="true"
-              className="govgr-svg-icon--arrow--down govgr-svg-icon"
+              as="svg"
+              className="govgr-svg-icon--arrow govgr-svg-icon"
               focusable="false"
               viewBox="0 0 24 24"
             >
-              <path
-                d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
-              />
-            </svg>
-          </ForwardRef(Base)>
-        </ForwardRef(SvgIcon)>
-      </ForwardRef(ArrowIcon)>
+              <svg
+                aria-hidden="true"
+                className="govgr-svg-icon--arrow govgr-svg-icon"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <arrow
+                  direction="down"
+                >
+                  <path
+                    d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
+                  />
+                </arrow>
+              </svg>
+            </ForwardRef(Base)>
+          </ForwardRef(SvgIcon)>
+        </ForwardRef(Icon)>
+      </ArrowIcon>
     </summary>
   </ForwardRef(Base)>
 </ForwardRef(DropdownButton)>
@@ -502,32 +547,41 @@ exports[`renders the DropdownButton with color=warning variant="button" arrow={t
       tabIndex={0}
     >
       hello
-      <ForwardRef(ArrowIcon)
+      <ArrowIcon
         direction="down"
       >
-        <ForwardRef(SvgIcon)
-          className="govgr-svg-icon--arrow--down"
+        <ForwardRef(Icon)
+          direction="down"
+          icon="arrow"
         >
-          <ForwardRef(Base)
-            aria-hidden="true"
-            as="svg"
-            className="govgr-svg-icon--arrow--down govgr-svg-icon"
-            focusable="false"
-            viewBox="0 0 24 24"
+          <ForwardRef(SvgIcon)
+            className="govgr-svg-icon--arrow"
           >
-            <svg
+            <ForwardRef(Base)
               aria-hidden="true"
-              className="govgr-svg-icon--arrow--down govgr-svg-icon"
+              as="svg"
+              className="govgr-svg-icon--arrow govgr-svg-icon"
               focusable="false"
               viewBox="0 0 24 24"
             >
-              <path
-                d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
-              />
-            </svg>
-          </ForwardRef(Base)>
-        </ForwardRef(SvgIcon)>
-      </ForwardRef(ArrowIcon)>
+              <svg
+                aria-hidden="true"
+                className="govgr-svg-icon--arrow govgr-svg-icon"
+                focusable="false"
+                viewBox="0 0 24 24"
+              >
+                <arrow
+                  direction="down"
+                >
+                  <path
+                    d="M22,8.2l-2.3-2.4L12,13.4L4.4,5.8L2,8.2l10,10L22,8.2z"
+                  />
+                </arrow>
+              </svg>
+            </ForwardRef(Base)>
+          </ForwardRef(SvgIcon)>
+        </ForwardRef(Icon)>
+      </ArrowIcon>
     </summary>
   </ForwardRef(Base)>
 </ForwardRef(DropdownButton)>

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

@@ -0,0 +1,37 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the ErrorSummary with no props 1`] = `
+<ForwardRef(ErrorSummary)>
+  <ForwardRef(NotificationBannerContainer)
+    variant="error"
+  >
+    <ForwardRef(Base)
+      aria-labelledby="govgr-notification-banner-title"
+      as="div"
+      className="govgr-notification-banner--error 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"
+        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)>
+`;

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

@@ -7,17 +7,14 @@ exports[`renders the FieldContainer with error=false 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"
       >
         hello
       </div>
@@ -33,17 +30,14 @@ exports[`renders the FieldContainer with error=true 1`] = `
   <ForwardRef(Grid)
     className="govgr-field--error govgr-field"
     item={true}
-    lg={12}
-    md={12}
-    xl={12}
     xs={12}
   >
     <ForwardRef(Base)
       as="div"
-      className="govgr-field--error 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--error govgr-field xs:govgr-grid__col-span-12"
     >
       <div
-        className="govgr-field--error 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--error govgr-field xs:govgr-grid__col-span-12"
       >
         hello
       </div>
@@ -57,17 +51,14 @@ exports[`renders the FieldContainer 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"
       >
         hello
       </div>

package/src/FieldContainer/index.tsx

@@ -17,7 +17,7 @@ export const FieldContainer = React.forwardRef<
   HTMLDivElement,
   FieldContainerProps
 >(function FieldContainer(
-  { error, className, children, xs = 12, md = 12, lg = 12, xl = 12, ...props },
+  { error, className, children, xs = 12, md, lg, xl, ...props },
   ref
 ) {
   return (

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

@@ -1,8 +1,8 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders the FileUpload with hasUploadedFile prop 1`] = `
+exports[`renders the FileUpload with hasFiles prop 1`] = `
 <ForwardRef(FileUploadContainer)
-  hasUploadedFile={true}
+  hasFiles={true}
 >
   <ForwardRef(Base)
     as="div"

package/src/FileUploadContainer/index.test.tsx

@@ -7,6 +7,6 @@ it('renders the FileUpload with no props', () => {
   expect(mount(<FileUploadContainer />)).toMatchSnapshot();
 });
 
-it('renders the FileUpload with hasUploadedFile prop', () => {
-  expect(mount(<FileUploadContainer hasUploadedFile />)).toMatchSnapshot();
+it('renders the FileUpload with hasFiles prop', () => {
+  expect(mount(<FileUploadContainer hasFiles />)).toMatchSnapshot();
 });

package/src/FileUploadContainer/index.tsx

@@ -9,7 +9,7 @@ export interface FileUploadContainerProps extends BaseProps<'div'> {
   * @value false
   * @default false
   */
-  hasUploadedFile?: boolean;
+  hasFiles?: boolean;
 }
 /**
  * Details for the FileUploadContainer.
@@ -19,7 +19,7 @@ export const FileUploadContainer = React.forwardRef<
   HTMLDivElement,
   FileUploadContainerProps
 >(function FileUploadContainer(
-  { className, children, hasUploadedFile = false, ...props },
+  { className, children, hasFiles = false, ...props },
   ref
 ) {
   return (
@@ -27,7 +27,7 @@ export const FileUploadContainer = React.forwardRef<
       ref={ref}
       as="div"
       className={clsx(className, {
-        'govgr-uploaded-file': hasUploadedFile,
+        'govgr-uploaded-file': hasFiles,
       })}
       {...props}
     >

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

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

package/src/FilterContainer/index.test.tsx

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

package/src/{FilterSection → FilterContainer}/index.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface FilterSectionProps extends BaseProps<'div'> {
+export interface FilterContainerProps extends BaseProps<'div'> {
   /**
   * Use open prop to open the filters when at mobile.
   * The default value is false.
@@ -35,14 +35,14 @@ export interface FilterSectionProps extends BaseProps<'div'> {
 }
 
 /**
- * Use FilterSection component to wrap the filter section area of the page
+ * Use FilterContainer component to wrap the filter area of the page
  * When the Filters are being used inside a Drawer component, you don't have to
- * use the FilterSection component
+ * use the FilterContainer component
  */
-export const FilterSection = React.forwardRef<
+export const FilterContainer = React.forwardRef<
   HTMLDivElement,
-  FilterSectionProps
->(function FilterSection(
+  FilterContainerProps
+>(function FilterContainer(
   {
     className,
     border = true,
@@ -73,4 +73,4 @@ export const FilterSection = React.forwardRef<
   );
 });
 
-export default FilterSection;
+export default FilterContainer;

package/src/FilterContent/index.tsx

@@ -2,9 +2,9 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface FilterContentProps extends BaseProps<'div'> {}
+export interface FilterContentProps extends BaseProps<'div'> { }
 /**
- * Use FilterContent inside FilterSection as a wrapper for its content
+ * Use FilterContent inside FilterContainer as a wrapper for its content
  */
 export const FilterContent = React.forwardRef<
   HTMLDivElement,

package/{FilterHeading → src/FilterHeadingContainer}/__snapshots__/index.test.tsx.snap

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

package/src/FilterHeadingContainer/index.test.tsx

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