@digigov/react-core 1.0.0-7c9716da → 1.0.0-871b6be5

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

@@ -4,24 +4,34 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface FooterListProps extends BaseProps<'ul'> {
   /**
-   * columns is optional.
-   * The values for this are 1 and 2. The default value is 1.
-   */
+  * columns is optional.
+  * The values for this are 1 and 2. The default value is 1.
+  * @value 1
+  * @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/Form/index.tsx

@@ -3,7 +3,12 @@ import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface FormProps extends BaseProps<'form'> {
-  grid?: boolean;
+  /**
+  * @value true
+  * @value false
+  * @default false
+  */
+  grid?: boolean
 }
 /**
  * Use this inside the Content component for additional content

package/src/Grid/index.tsx

@@ -4,15 +4,53 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 type GridValues = 'auto' | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 export interface GridProps extends BaseProps<'div' | 'aside' | 'main'> {
-  container?: boolean;
-  item?: boolean;
-  inline?: boolean;
-  spacing?: 1 | 2 | 4 | 6 | 8 | 10 | 12;
-  xs?: GridValues;
-  sm?: GridValues;
-  md?: GridValues;
-  lg?: GridValues;
-  xl?: GridValues;
+  /**
+  * @value true
+  * @value false
+  * @default false
+  */
+  container?: boolean
+  /**
+  * @value true
+  * @value false
+  * @default true
+  */
+  item?: boolean
+  /**
+  * @value true
+  * @value false
+  */
+  inline?: boolean
+  /**
+  * @value 1
+  * @value 2
+  * @value 4
+  * @value 6
+  * @value 8
+  * @value 10
+  * @value 12
+  */
+  spacing?: 1 | 2 | 4 | 6 | 8 | 10 | 12
+  /**
+
+  */
+  xs?: GridValues
+  /**
+
+  */
+  sm?: GridValues
+  /**
+
+  */
+  md?: GridValues
+  /**
+
+  */
+  lg?: GridValues
+  /**
+
+  */
+  xl?: GridValues
 }
 /**
  * Grid is used to arrange other components in complex grid configurations of rows and columns.
@@ -42,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/HeaderLogo/index.tsx

@@ -4,12 +4,14 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface HeaderLogoProps extends BaseProps<'a'> {
   /**
-   * src is optional.
-   */
+  * src is optional.
+
+  */
   src?: string;
   /**
-   * href is optional.
-   */
+  * href is optional.
+
+  */
   altText?: string;
 }
 /**

package/src/HeaderSecondaryLogo/index.tsx

@@ -4,12 +4,14 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface HeaderSecondaryLogoProps extends BaseProps<'a'> {
   /**
-   * src is needed to provide the url that we get the logo from.
-   */
+  * src is needed to provide the url that we get the logo from.
+
+  */
   src: string;
   /**
-   * href provides the alternative text for the img tag.
-   */
+  * href provides the alternative text for the img tag.
+
+  */
   altText?: string;
 }
 /**

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>

package/src/HeaderSection/index.tsx

@@ -15,7 +15,7 @@ export const HeaderSection = React.forwardRef<
       as="div"
       ref={ref}
       className={clsx(className, {
-        'govgr-header__container': true,
+        'govgr-header__section': true,
       })}
       {...props}
     >

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

@@ -15,23 +15,6 @@ exports[`renders the Heading with no props 1`] = `
 </ForwardRef(Heading)>
 `;
 
-exports[`renders the Heading with size=l 1`] = `
-<ForwardRef(Heading)
-  size="lg"
->
-  <ForwardRef(Base)
-    as="h2"
-    className="govgr-heading-lg"
-  >
-    <h2
-      className="govgr-heading-lg"
-    >
-      hello
-    </h2>
-  </ForwardRef(Base)>
-</ForwardRef(Heading)>
-`;
-
 exports[`renders the Heading with size=l and element h2 1`] = `
 <ForwardRef(Heading)
   element="h2"
@@ -86,19 +69,19 @@ exports[`renders the Heading with size=l and element h4 1`] = `
 </ForwardRef(Heading)>
 `;
 
-exports[`renders the Heading with size=m 1`] = `
+exports[`renders the Heading with size=lg 1`] = `
 <ForwardRef(Heading)
-  size="md"
+  size="lg"
 >
   <ForwardRef(Base)
-    as="h3"
-    className="govgr-heading-md"
+    as="h2"
+    className="govgr-heading-lg"
   >
-    <h3
-      className="govgr-heading-md"
+    <h2
+      className="govgr-heading-lg"
     >
       hello
-    </h3>
+    </h2>
   </ForwardRef(Base)>
 </ForwardRef(Heading)>
 `;
@@ -157,19 +140,19 @@ exports[`renders the Heading with size=m and element h4 1`] = `
 </ForwardRef(Heading)>
 `;
 
-exports[`renders the Heading with size=s 1`] = `
+exports[`renders the Heading with size=md 1`] = `
 <ForwardRef(Heading)
-  size="sm"
+  size="md"
 >
   <ForwardRef(Base)
-    as="h4"
-    className="govgr-heading-sm"
+    as="h3"
+    className="govgr-heading-md"
   >
-    <h4
-      className="govgr-heading-sm"
+    <h3
+      className="govgr-heading-md"
     >
       hello
-    </h4>
+    </h3>
   </ForwardRef(Base)>
 </ForwardRef(Heading)>
 `;
@@ -228,6 +211,23 @@ exports[`renders the Heading with size=s and element h4 1`] = `
 </ForwardRef(Heading)>
 `;
 
+exports[`renders the Heading with size=sm 1`] = `
+<ForwardRef(Heading)
+  size="sm"
+>
+  <ForwardRef(Base)
+    as="h4"
+    className="govgr-heading-sm"
+  >
+    <h4
+      className="govgr-heading-sm"
+    >
+      hello
+    </h4>
+  </ForwardRef(Base)>
+</ForwardRef(Heading)>
+`;
+
 exports[`renders the Heading with size=xl 1`] = `
 <ForwardRef(Heading)
   size="xl"
@@ -298,3 +298,38 @@ exports[`renders the Heading with size=xl and element h4 1`] = `
   </ForwardRef(Base)>
 </ForwardRef(Heading)>
 `;
+
+exports[`renders the Heading with size=xs 1`] = `
+<ForwardRef(Heading)
+  size="xs"
+>
+  <ForwardRef(Base)
+    as="h5"
+    className="govgr-heading-xs"
+  >
+    <h5
+      className="govgr-heading-xs"
+    >
+      hello
+    </h5>
+  </ForwardRef(Base)>
+</ForwardRef(Heading)>
+`;
+
+exports[`renders the Heading with size=xs and element h4 1`] = `
+<ForwardRef(Heading)
+  element="h4"
+  size="xs"
+>
+  <ForwardRef(Base)
+    as="h4"
+    className="govgr-heading-xs"
+  >
+    <h4
+      className="govgr-heading-xs"
+    >
+      hello
+    </h4>
+  </ForwardRef(Base)>
+</ForwardRef(Heading)>
+`;

package/src/Heading/index.test.tsx

@@ -11,18 +11,22 @@ it('renders the Heading with size=xl', () => {
   expect(mount(<Heading size={'xl'}>hello</Heading>)).toMatchSnapshot();
 });
 
-it('renders the Heading with size=l', () => {
+it('renders the Heading with size=lg', () => {
   expect(mount(<Heading size={'lg'}>hello</Heading>)).toMatchSnapshot();
 });
 
-it('renders the Heading with size=m', () => {
+it('renders the Heading with size=md', () => {
   expect(mount(<Heading size={'md'}>hello</Heading>)).toMatchSnapshot();
 });
 
-it('renders the Heading with size=s', () => {
+it('renders the Heading with size=sm', () => {
   expect(mount(<Heading size={'sm'}>hello</Heading>)).toMatchSnapshot();
 });
 
+it('renders the Heading with size=xs', () => {
+  expect(mount(<Heading size={'xs'}>hello</Heading>)).toMatchSnapshot();
+});
+
 it('renders the Heading with size=s and element h2', () => {
   expect(
     mount(
@@ -142,3 +146,13 @@ it('renders the Heading with size=xl and element h4', () => {
     )
   ).toMatchSnapshot();
 });
+
+it('renders the Heading with size=xs and element h4', () => {
+  expect(
+    mount(
+      <Heading size={'xs'} element="h4">
+        hello
+      </Heading>
+    )
+  ).toMatchSnapshot();
+});