@digigov/react-core 1.0.0-002c630d → 1.0.0-079f34f3d

package/src/FieldsetLegend/index.tsx

@@ -4,15 +4,23 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface FieldsetLegendProps extends BaseProps<'legend'> {
   /**
-   * size is optional. The default value is 'lg'
-   */
+  * size is optional. The default value is 'lg'
+  * @value 'xl'
+  * @value 'lg'
+  * @value 'md'
+  * @value 'sm'
+  * @default 'lg'
+  */
   size?: 'xl' | 'lg' | 'md' | 'sm';
 
   /**
-   * heading is optional.
-   * Add this prop if this Fieldset component is the only one in this page.
-   * The default value is false.
-   */
+  * heading is optional.
+  * Add this prop if this Fieldset component is the only one in this page.
+  * The default value is false.
+  * @value true
+  * @value false
+  * @default false
+  */
   heading?: boolean;
 }
 /**
@@ -26,23 +34,21 @@ export const FieldsetLegend = React.forwardRef<
   ref
 ) {
   return (
-    <>
-      <Base
-        as="legend"
-        ref={ref}
-        className={clsx(className, {
-          'govgr-fieldset__legend': true,
-          'govgr-heading-xl': size === 'xl',
-          'govgr-heading-lg': size === 'lg',
-          'govgr-heading-md': size === 'md',
-          'govgr-heading-sm': size === 'sm',
-        })}
-        {...(heading && { role: 'heading', 'aria-level': 1 })}
-        {...props}
-      >
-        {children}
-      </Base>
-    </>
+    <Base
+      as="legend"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-fieldset__legend': true,
+        'govgr-heading-xl': size === 'xl',
+        'govgr-heading-lg': size === 'lg',
+        'govgr-heading-md': size === 'md',
+        'govgr-heading-sm': size === 'sm',
+      })}
+      {...(heading && { role: 'heading', 'aria-level': 1 })}
+      {...props}
+    >
+      {children}
+    </Base>
   );
 });
 

package/src/FileUpload/index.tsx

@@ -4,8 +4,11 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface FileUploadProps extends BaseProps<'input'> {
   /**
-   * hasFiles is optional.
-   */
+  * hasFiles is optional.
+  * @value true
+  * @value false
+  * @default false
+  */
   hasFiles?: boolean;
 }
 /**

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

@@ -4,9 +4,12 @@ import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface FileUploadContainerProps extends BaseProps<'div'> {
   /**
-   * hasFiles is optional.
-   */
-  hasUploadedFile?: boolean;
+  * hasFiles is optional.
+  * @value true
+  * @value false
+  * @default false
+  */
+  hasFiles?: boolean;
 }
 /**
  * Details for the FileUploadContainer.
@@ -16,7 +19,7 @@ export const FileUploadContainer = React.forwardRef<
   HTMLDivElement,
   FileUploadContainerProps
 >(function FileUploadContainer(
-  { className, children, hasUploadedFile = false, ...props },
+  { className, children, hasFiles = false, ...props },
   ref
 ) {
   return (
@@ -24,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,35 +2,47 @@ 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.
-   */
+  * Use open prop to open the filters when at mobile.
+  * The default value is false.
+  * @value true
+  * @value false
+  * @default false
+  */
   open?: boolean;
 
   /**
-   * Use border prop to add a gray border at the filters section.
-   * The default value is true.
-   */
+  * Use border prop to add a gray border at the filters section.
+  * The default value is true.
+  * @value true
+  * @value false
+  * @default true
+  */
   border?: boolean;
 
   /**
-   * Use visible prop to make the filter section have position relative in the page.
-   * The default value is md.
-   */
+  * Use visible prop to make the filter section have position relative in the page.
+  * The default value is md.
+  * @value 'always'
+  * @value 'sm'
+  * @value 'md'
+  * @value 'lg'
+  * @value 'never'
+  * @default 'md'
+  */
   positionRelative?: 'always' | 'sm' | 'md' | 'lg' | 'never';
 }
 
 /**
- * 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,
@@ -61,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/FilterOptionsSection/index.tsx

@@ -3,7 +3,11 @@ import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
 export interface FilterOptionsSectionProps extends BaseProps<'div'> {
-  horizontal?: boolean;
+  /**
+  * @value true
+  * @value false
+  */
+  horizontal?: boolean
 }
 /**
  * FilterOptionsSection is a wrapper component for the filter elements.

package/src/FilterSelectedSection/index.tsx

@@ -2,26 +2,19 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface FilterSelectedSectionProps extends BaseProps<'div'> {
-  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-width-container"
+  <ForwardRef(Container)
+    grid={false}
   >
-    <div
-      className="govgr-width-container"
+    <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,38 +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 compoment.
-   * fullWidth property places the footer elements at the edges of the container.
-   * default value is 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-width-container': fullWidth === false,
-        'govgr-full-width-container': 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,13 +1,16 @@
 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.
-   * The default value is 'sm'.
-   */
+  * size is optional.
+  * The values are: 'md' for medium, 'sm' for small.
+  * The default value is 'sm'.
+  * @value 'md'
+  * @value 'sm'
+  * @default 'sm'
+  */
   size?: 'md' | 'sm';
 }
 /**
@@ -16,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;