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

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();
+});

package/src/{FilterHeading → FilterHeadingContainer}/index.tsx

@@ -2,17 +2,17 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface FilterHeadingProps extends BaseProps<'div'> {}
+export interface FilterHeadingContainerProps extends BaseProps<'div'> { }
 /**
- * Use FilterHeading component inside FilterSection
+ * Use FilterHeadingContainer component inside FilterContainer
  * for filters heading title and close icon(for mobiles).
  * When the Filters are being used inside a Drawer component, you don't have to
- * use the FilterHeading component
+ * use the FilterHeadingContainer component
  */
-export const FilterHeading = React.forwardRef<
+export const FilterHeadingContainer = React.forwardRef<
   HTMLDivElement,
-  FilterHeadingProps
->(function FilterHeading({ className, children, ...props }, ref) {
+  FilterHeadingContainerProps
+>(function FilterHeadingContainer({ className, children, ...props }, ref) {
   return (
     <Base
       as="div"
@@ -27,4 +27,4 @@ export const FilterHeading = React.forwardRef<
   );
 });
 
-export default FilterHeading;
+export default FilterHeadingContainer;

package/src/FilterSelectedSection/index.tsx

@@ -2,30 +2,19 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface FilterSelectedSectionProps extends BaseProps<'div'> {
-  /**
-  * @value true
-  * @value false
-  */
-  indicator?: boolean
-}
+export interface FilterSelectedSectionProps extends BaseProps<'div'> {}
 /**
  * FilterSelectedSection is a wrapper for the area of the selected filters
- * It can be used separately in the page by setting the indicator prop to true
  */
 export const FilterSelectedSection = React.forwardRef<
   HTMLDivElement,
   FilterSelectedSectionProps
->(function FilterSelectedSection(
-  { indicator, className, children, ...props },
-  ref
-) {
+>(function FilterSelectedSection({ className, children, ...props }, ref) {
   return (
     <Base
       as="div"
       ref={ref}
       className={clsx(className, {
-        'govgr-filter__selected--indicator': indicator,
         'govgr-filter__selected': true,
       })}
       {...props}

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

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

package/src/FooterContainer/index.tsx

@@ -1,40 +1,18 @@
 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 FooterContainerProps extends BaseProps<'div'> {
-  /**
-  * fullWidth is optional.
-  * fullWidth property is used to give full width to FooterContainer component.
-  * fullWidth property places the footer elements at the edges of the container.
-  * @value true
-  * @value false
-  * @default false
-  */
-  fullWidth?: boolean;
-}
+export interface FooterContainerProps extends ContainerProps {}
 /**
  * FooterContainer mush be used inside the Footer component. It has no props.
  */
 export const FooterContainer = React.forwardRef<
   HTMLDivElement,
   FooterContainerProps
->(function FooterContainer(
-  { className, fullWidth = false, children, ...props },
-  ref
-) {
+>(function FooterContainer({ children, ...props }, ref) {
   return (
-    <Base
-      as="div"
-      ref={ref}
-      className={clsx(className, {
-        'govgr-container': true,
-        'govgr-container--full-width': fullWidth,
-      })}
-      {...props}
-    >
+    <Container ref={ref} grid={false} {...props}>
       {children}
-    </Base>
+    </Container>
   );
 });
 

package/src/FooterContent/index.tsx

@@ -4,7 +4,7 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface FooterContentProps extends BaseProps<'div'> {}
 /**
- * FooterContent is used inside the FooterMetaItem.
+ * FooterContent is used inside the FooterInfoSection.
  * In this component, we place the basic content of the footer (ex. Copyright, extra logos, inline list).
  */
 export const FooterContent = React.forwardRef<

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

@@ -2,16 +2,27 @@
 
 exports[`renders the FooterHeading with no props 1`] = `
 <ForwardRef(FooterHeading)>
-  <ForwardRef(Base)
-    as="h2"
-    className="govgr-heading-sm govgr-footer__heading"
+  <ForwardRef(Heading)
+    className="govgr-footer__heading"
+    element="h2"
+    size="sm"
   >
-    <h2
-      className="govgr-heading-sm govgr-footer__heading"
+    <ForwardRef(Typography)
+      as="h2"
+      className="govgr-footer__heading govgr-heading-sm"
     >
-      hello
-    </h2>
-  </ForwardRef(Base)>
+      <ForwardRef(Base)
+        as="h2"
+        className="govgr-footer__heading govgr-heading-sm"
+      >
+        <h2
+          className="govgr-footer__heading govgr-heading-sm"
+        >
+          hello
+        </h2>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(Heading)>
 </ForwardRef(FooterHeading)>
 `;
 
@@ -19,16 +30,27 @@ exports[`renders the FooterHeading with size=m 1`] = `
 <ForwardRef(FooterHeading)
   size="md"
 >
-  <ForwardRef(Base)
-    as="h2"
-    className="govgr-heading-md govgr-footer__heading"
+  <ForwardRef(Heading)
+    className="govgr-footer__heading"
+    element="h2"
+    size="md"
   >
-    <h2
-      className="govgr-heading-md govgr-footer__heading"
+    <ForwardRef(Typography)
+      as="h2"
+      className="govgr-footer__heading govgr-heading-md"
     >
-      hello
-    </h2>
-  </ForwardRef(Base)>
+      <ForwardRef(Base)
+        as="h2"
+        className="govgr-footer__heading govgr-heading-md"
+      >
+        <h2
+          className="govgr-footer__heading govgr-heading-md"
+        >
+          hello
+        </h2>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(Heading)>
 </ForwardRef(FooterHeading)>
 `;
 
@@ -36,15 +58,26 @@ exports[`renders the FooterHeading with size=s 1`] = `
 <ForwardRef(FooterHeading)
   size="sm"
 >
-  <ForwardRef(Base)
-    as="h2"
-    className="govgr-heading-sm govgr-footer__heading"
+  <ForwardRef(Heading)
+    className="govgr-footer__heading"
+    element="h2"
+    size="sm"
   >
-    <h2
-      className="govgr-heading-sm govgr-footer__heading"
+    <ForwardRef(Typography)
+      as="h2"
+      className="govgr-footer__heading govgr-heading-sm"
     >
-      hello
-    </h2>
-  </ForwardRef(Base)>
+      <ForwardRef(Base)
+        as="h2"
+        className="govgr-footer__heading govgr-heading-sm"
+      >
+        <h2
+          className="govgr-footer__heading govgr-heading-sm"
+        >
+          hello
+        </h2>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(Heading)>
 </ForwardRef(FooterHeading)>
 `;

package/src/FooterHeading/index.tsx

@@ -1,8 +1,8 @@
 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 FooterHeadingProps extends BaseProps<'h2'> {
+export interface FooterHeadingProps extends Omit<HeadingProps, 'size'> {
   /**
   * size is optional.
   * The values are: 'md' for medium, 'sm' for small.
@@ -19,20 +19,22 @@ export interface FooterHeadingProps extends BaseProps<'h2'> {
 export const FooterHeading = React.forwardRef<
   HTMLHeadingElement,
   FooterHeadingProps
->(function FooterHeading({ size = 'sm', className, children, ...props }, ref) {
+>(function FooterHeading(
+  { size = 'sm', element = 'h2', className, children, ...props },
+  ref
+) {
   return (
-    <Base
-      as="h2"
+    <Heading
+      element={element}
       ref={ref}
+      size={size}
       className={clsx(className, {
         'govgr-footer__heading': true,
-        'govgr-heading-md': size === 'md',
-        'govgr-heading-sm': size === 'sm',
       })}
       {...props}
     >
       {children}
-    </Base>
+    </Heading>
   );
 });
 

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

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

package/src/FooterInfo/index.test.tsx

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

package/src/{FooterMeta → FooterInfo}/index.tsx

@@ -2,20 +2,20 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface FooterMetaProps extends BaseProps<'div'> {}
+export interface FooterInfoProps extends BaseProps<'div'> {}
 /**
- * FooterMeta is inside the FooterContainer component.
- * This component is meant to wrap FooterMetaItem components.
+ * FooterInfo is inside the FooterContainer component.
+ * This component is meant to wrap FooterInfoSection components.
  * Semantically, in this component we include the very basic elements of a govgr footer.
  */
-export const FooterMeta = React.forwardRef<HTMLDivElement, FooterMetaProps>(
-  function FooterMeta({ className, children, ...props }, ref) {
+export const FooterInfo = React.forwardRef<HTMLDivElement, FooterInfoProps>(
+  function FooterInfo({ className, children, ...props }, ref) {
     return (
       <Base
         as="div"
         ref={ref}
         className={clsx(className, {
-          'govgr-footer__meta': true,
+          'govgr-footer__info': true,
         })}
         {...props}
       >
@@ -25,4 +25,4 @@ export const FooterMeta = React.forwardRef<HTMLDivElement, FooterMetaProps>(
   }
 );
 
-export default FooterMeta;
+export default FooterInfo;

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

@@ -0,0 +1,50 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the FooterInfoSection with grow=false 1`] = `
+<ForwardRef(FooterInfoSection)
+  grow={false}
+>
+  <ForwardRef(Base)
+    as="section"
+    className="govgr-footer__info-section"
+  >
+    <section
+      className="govgr-footer__info-section"
+    >
+      hello
+    </section>
+  </ForwardRef(Base)>
+</ForwardRef(FooterInfoSection)>
+`;
+
+exports[`renders the FooterInfoSection with grow=true 1`] = `
+<ForwardRef(FooterInfoSection)
+  grow={true}
+>
+  <ForwardRef(Base)
+    as="section"
+    className="govgr-footer__info-section govgr-footer__info-section--grow"
+  >
+    <section
+      className="govgr-footer__info-section govgr-footer__info-section--grow"
+    >
+      hello
+    </section>
+  </ForwardRef(Base)>
+</ForwardRef(FooterInfoSection)>
+`;
+
+exports[`renders the FooterInfoSection with no props 1`] = `
+<ForwardRef(FooterInfoSection)>
+  <ForwardRef(Base)
+    as="section"
+    className="govgr-footer__info-section"
+  >
+    <section
+      className="govgr-footer__info-section"
+    >
+      hello
+    </section>
+  </ForwardRef(Base)>
+</ForwardRef(FooterInfoSection)>
+`;

package/src/FooterInfoSection/index.test.tsx

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