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

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

package/src/FooterNavigationSection/index.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import clsx from 'clsx';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+
+export interface FooterNavigationSectionProps extends BaseProps<'section'> {}
+/**
+ * FooterNavigationSection must be inside the FooterNavigation.
+ * Inside this component should be placed the FooterHeading (optional) and the FooterList.
+ * This component has no props.
+ */
+export const FooterNavigationSection = React.forwardRef<
+  HTMLDivElement,
+  FooterNavigationSectionProps
+>(function FooterNavigationSection({ className, children, ...props }, ref) {
+  return (
+    <Base
+      as="section"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-footer__navigation-section': true,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default FooterNavigationSection;

package/src/Grid/index.tsx

@@ -80,78 +80,12 @@ export const Grid = React.forwardRef<HTMLElement, GridProps>(function Grid(
       className={clsx(className, {
         'govgr-grid': container,
         'govgr-grid-inline': container && inline,
-        [`xs:govgr-grid__col-auto`]: item && xs === 'auto',
-        [`xs:govgr-grid__col-span-1`]: item && xs === 1,
-        [`xs:govgr-grid__col-span-2`]: item && xs === 2,
-        [`xs:govgr-grid__col-span-3`]: item && xs === 3,
-        [`xs:govgr-grid__col-span-4`]: item && xs === 4,
-        [`xs:govgr-grid__col-span-5`]: item && xs === 5,
-        [`xs:govgr-grid__col-span-6`]: item && xs === 6,
-        [`xs:govgr-grid__col-span-7`]: item && xs === 7,
-        [`xs:govgr-grid__col-span-8`]: item && xs === 8,
-        [`xs:govgr-grid__col-span-9`]: item && xs === 9,
-        [`xs:govgr-grid__col-span-10`]: item && xs === 10,
-        [`xs:govgr-grid__col-span-11`]: item && xs === 11,
-        [`xs:govgr-grid__col-span-12`]: item && xs === 12,
-        [`govgr-grid__gap-1`]: container && spacing === 1,
-        [`govgr-grid__gap-2`]: container && spacing === 2,
-        [`govgr-grid__gap-4`]: container && spacing === 4,
-        [`govgr-grid__gap-6`]: container && spacing === 6,
-        [`govgr-grid__gap-8`]: container && spacing === 8,
-        [`govgr-grid__gap-10`]: container && spacing === 10,
-        [`govgr-grid__gap-12`]: container && spacing === 12,
-        [`sm:govgr-grid__col-auto`]: item && sm === 'auto',
-        [`sm:govgr-grid__col-span-1`]: item && sm === 1,
-        [`sm:govgr-grid__col-span-2`]: item && sm === 2,
-        [`sm:govgr-grid__col-span-3`]: item && sm === 3,
-        [`sm:govgr-grid__col-span-4`]: item && sm === 4,
-        [`sm:govgr-grid__col-span-5`]: item && sm === 5,
-        [`sm:govgr-grid__col-span-6`]: item && sm === 6,
-        [`sm:govgr-grid__col-span-7`]: item && sm === 7,
-        [`sm:govgr-grid__col-span-8`]: item && sm === 8,
-        [`sm:govgr-grid__col-span-9`]: item && sm === 9,
-        [`sm:govgr-grid__col-span-10`]: item && sm === 10,
-        [`sm:govgr-grid__col-span-11`]: item && sm === 11,
-        [`sm:govgr-grid__col-span-12`]: item && sm === 12,
-        [`md:govgr-grid__col-auto`]: item && md === 'auto',
-        [`md:govgr-grid__col-span-1`]: item && md === 1,
-        [`md:govgr-grid__col-span-2`]: item && md === 2,
-        [`md:govgr-grid__col-span-3`]: item && md === 3,
-        [`md:govgr-grid__col-span-4`]: item && md === 4,
-        [`md:govgr-grid__col-span-5`]: item && md === 5,
-        [`md:govgr-grid__col-span-6`]: item && md === 6,
-        [`md:govgr-grid__col-span-7`]: item && md === 7,
-        [`md:govgr-grid__col-span-8`]: item && md === 8,
-        [`md:govgr-grid__col-span-9`]: item && md === 9,
-        [`md:govgr-grid__col-span-10`]: item && md === 10,
-        [`md:govgr-grid__col-span-11`]: item && md === 11,
-        [`md:govgr-grid__col-span-12`]: item && md === 12,
-        [`lg:govgr-grid__col-auto`]: item && lg === 'auto',
-        [`lg:govgr-grid__col-span-1`]: item && lg === 1,
-        [`lg:govgr-grid__col-span-2`]: item && lg === 2,
-        [`lg:govgr-grid__col-span-3`]: item && lg === 3,
-        [`lg:govgr-grid__col-span-4`]: item && lg === 4,
-        [`lg:govgr-grid__col-span-5`]: item && lg === 5,
-        [`lg:govgr-grid__col-span-6`]: item && lg === 6,
-        [`lg:govgr-grid__col-span-7`]: item && lg === 7,
-        [`lg:govgr-grid__col-span-8`]: item && lg === 8,
-        [`lg:govgr-grid__col-span-9`]: item && lg === 9,
-        [`lg:govgr-grid__col-span-10`]: item && lg === 10,
-        [`lg:govgr-grid__col-span-11`]: item && lg === 11,
-        [`lg:govgr-grid__col-span-12`]: item && lg === 12,
-        [`xl:govgr-grid__col-auto`]: item && xl === 'auto',
-        [`xl:govgr-grid__col-span-1`]: item && xl === 1,
-        [`xl:govgr-grid__col-span-2`]: item && xl === 2,
-        [`xl:govgr-grid__col-span-3`]: item && xl === 3,
-        [`xl:govgr-grid__col-span-4`]: item && xl === 4,
-        [`xl:govgr-grid__col-span-5`]: item && xl === 5,
-        [`xl:govgr-grid__col-span-6`]: item && xl === 6,
-        [`xl:govgr-grid__col-span-7`]: item && xl === 7,
-        [`xl:govgr-grid__col-span-8`]: item && xl === 8,
-        [`xl:govgr-grid__col-span-9`]: item && xl === 9,
-        [`xl:govgr-grid__col-span-10`]: item && xl === 10,
-        [`xl:govgr-grid__col-span-11`]: item && xl === 11,
-        [`xl:govgr-grid__col-span-12`]: item && xl === 12,
+        [`govgr-gap-${spacing}`]: container &&  spacing !== undefined,
+        [`xs:govgr-grid__col-span-${xs}`]: item && xs !== undefined,
+        [`sm:govgr-grid__col-span-${sm}`]: item && sm !== undefined,
+        [`md:govgr-grid__col-span-${md}`]: item && md !== undefined,
+        [`lg:govgr-grid__col-span-${lg}`]: item && lg !== undefined,
+        [`xl:govgr-grid__col-span-${xl}`]: item && xl !== undefined,
       })}
       {...props}
     >

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

@@ -4,10 +4,10 @@ exports[`renders the HeaderSection with no props 1`] = `
 <ForwardRef(HeaderSection)>
   <ForwardRef(Base)
     as="div"
-    className="govgr-header__container"
+    className="govgr-header__section"
   >
     <div
-      className="govgr-header__container"
+      className="govgr-header__section"
     >
       hello
     </div>