@digigov/react-core 1.0.0-6b93ebf2 → 1.0.0-88820b1e

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,28 @@
 
 exports[`renders the FooterContainer with no props 1`] = `
 <ForwardRef(FooterContainer)>
-  <ForwardRef(Base)
-    as="div"
-    className="govgr-container"
+  <ForwardRef(Container)
+    grid={false}
   >
-    <div
+    <ForwardRef(Base)
+      as="div"
       className="govgr-container"
     >
-      hello
-    </div>
-  </ForwardRef(Base)>
+      <div
+        className="govgr-container"
+      >
+        <ForwardRef(Base)
+          as="div"
+          className=""
+        >
+          <div
+            className=""
+          >
+            hello
+          </div>
+        </ForwardRef(Base)>
+      </div>
+    </ForwardRef(Base)>
+  </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,22 @@
 
 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(Base)
+      as="h2"
+      className="govgr-footer__heading govgr-heading-sm"
     >
-      hello
-    </h2>
-  </ForwardRef(Base)>
+      <h2
+        className="govgr-footer__heading govgr-heading-sm"
+      >
+        hello
+      </h2>
+    </ForwardRef(Base)>
+  </ForwardRef(Heading)>
 </ForwardRef(FooterHeading)>
 `;
 
@@ -19,16 +25,22 @@ 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(Base)
+      as="h2"
+      className="govgr-footer__heading govgr-heading-md"
     >
-      hello
-    </h2>
-  </ForwardRef(Base)>
+      <h2
+        className="govgr-footer__heading govgr-heading-md"
+      >
+        hello
+      </h2>
+    </ForwardRef(Base)>
+  </ForwardRef(Heading)>
 </ForwardRef(FooterHeading)>
 `;
 
@@ -36,15 +48,21 @@ 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(Base)
+      as="h2"
+      className="govgr-footer__heading govgr-heading-sm"
     >
-      hello
-    </h2>
-  </ForwardRef(Base)>
+      <h2
+        className="govgr-footer__heading govgr-heading-sm"
+      >
+        hello
+      </h2>
+    </ForwardRef(Base)>
+  </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();
+});

package/src/FooterInfoSection/index.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+
+export interface FooterInfoSectionProps extends BaseProps<'section'> {
+  /**
+   * grow is optional.
+   * Use this prop If wanted this component to have it's maximum grow.
+   */
+  grow?: boolean;
+}
+/**
+ * FooterInfoSection is inside the FooterInfo component.
+ */
+export const FooterInfoSection = React.forwardRef<
+  HTMLDivElement,
+  FooterInfoSectionProps
+>(function FooterInfoSection({ grow, className, children, ...props }, ref) {
+  return (
+    <Base
+      as="section"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-footer__info-section': true,
+        'govgr-footer__info-section--grow': grow,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default FooterInfoSection;

package/src/FooterList/index.tsx

@@ -10,20 +10,28 @@ export interface FooterListProps extends BaseProps<'ul'> {
   * @value 2
   */
   columns?: 1 | 2;
+  
+  /**
+   * layout is optional.
+   * The default value is vertical. Use horizontal to make a horizontal list.
+   * If it is horizontal, it can't have columns.
+   */
+  layout?: 'horizontal' | 'vertical';
 }
 /**
- * FooterList is used inside the FooterSection.
+ * FooterList is used inside the FooterNavigationSection.
  * This component takes a list of FooterListItem component as its children.
  */
 export const FooterList = React.forwardRef<HTMLUListElement, FooterListProps>(
-  function FooterList({ columns, className, children, ...props }, ref) {
+  function FooterList({ columns,layout= 'vertical', className, children, ...props }, ref) {
     return (
       <Base
         as="ul"
         ref={ref}
         className={clsx(className, {
           'govgr-footer__list': true,
-          'govgr-footer__list--columns-2': columns === 2,
+          'govgr-footer__list--columns-2': columns === 2 && layout==='vertical',
+          'govgr-footer__list--horizontal': layout==='horizontal',
         })}
         {...props}
       >

package/src/FooterNavigation/index.tsx

@@ -5,7 +5,7 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 export interface FooterNavigationProps extends BaseProps<'div'> {}
 /**
  * FooterNavigation is optional. This components must be included in the FooterContainer.
- * Inside this component we place one or more of the component FooterSection.
+ * Inside this component we place one or more of the component FooterNavigationSection.
  * This component has no props.
  */
 export const FooterNavigation = React.forwardRef<

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

@@ -0,0 +1,20 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the FooterNavigationSection with no props 1`] = `
+<ForwardRef(FooterNavigationSection)
+  aria-label="footer navigation section"
+>
+  <ForwardRef(Base)
+    aria-label="footer navigation section"
+    as="section"
+    className="govgr-footer__navigation-section"
+  >
+    <section
+      aria-label="footer navigation section"
+      className="govgr-footer__navigation-section"
+    >
+      hello
+    </section>
+  </ForwardRef(Base)>
+</ForwardRef(FooterNavigationSection)>
+`;

package/src/FooterNavigationSection/index.test.tsx

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