@digigov/react-core 1.0.0-871b6be5 → 1.0.0-8ae63a77

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

@@ -3,16 +3,21 @@
 exports[`renders the PageTitleHeading with no props 1`] = `
 <ForwardRef(PageTitleHeading)>
   <ForwardRef(Heading)>
-    <ForwardRef(Base)
+    <ForwardRef(Typography)
       as="h1"
       className="govgr-heading-xl"
     >
-      <h1
+      <ForwardRef(Base)
+        as="h1"
         className="govgr-heading-xl"
       >
-        hello
-      </h1>
-    </ForwardRef(Base)>
+        <h1
+          className="govgr-heading-xl"
+        >
+          hello
+        </h1>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
   </ForwardRef(Heading)>
 </ForwardRef(PageTitleHeading)>
 `;
@@ -24,16 +29,21 @@ exports[`renders the PageTitleHeading with size=l 1`] = `
   <ForwardRef(Heading)
     size="lg"
   >
-    <ForwardRef(Base)
+    <ForwardRef(Typography)
       as="h2"
       className="govgr-heading-lg"
     >
-      <h2
+      <ForwardRef(Base)
+        as="h2"
         className="govgr-heading-lg"
       >
-        hello
-      </h2>
-    </ForwardRef(Base)>
+        <h2
+          className="govgr-heading-lg"
+        >
+          hello
+        </h2>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
   </ForwardRef(Heading)>
 </ForwardRef(PageTitleHeading)>
 `;
@@ -45,16 +55,21 @@ exports[`renders the PageTitleHeading with size=m 1`] = `
   <ForwardRef(Heading)
     size="md"
   >
-    <ForwardRef(Base)
+    <ForwardRef(Typography)
       as="h3"
       className="govgr-heading-md"
     >
-      <h3
+      <ForwardRef(Base)
+        as="h3"
         className="govgr-heading-md"
       >
-        hello
-      </h3>
-    </ForwardRef(Base)>
+        <h3
+          className="govgr-heading-md"
+        >
+          hello
+        </h3>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
   </ForwardRef(Heading)>
 </ForwardRef(PageTitleHeading)>
 `;
@@ -66,16 +81,21 @@ exports[`renders the PageTitleHeading with size=s 1`] = `
   <ForwardRef(Heading)
     size="sm"
   >
-    <ForwardRef(Base)
+    <ForwardRef(Typography)
       as="h4"
       className="govgr-heading-sm"
     >
-      <h4
+      <ForwardRef(Base)
+        as="h4"
         className="govgr-heading-sm"
       >
-        hello
-      </h4>
-    </ForwardRef(Base)>
+        <h4
+          className="govgr-heading-sm"
+        >
+          hello
+        </h4>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
   </ForwardRef(Heading)>
 </ForwardRef(PageTitleHeading)>
 `;
@@ -87,16 +107,21 @@ exports[`renders the PageTitleHeading with size=xl 1`] = `
   <ForwardRef(Heading)
     size="xl"
   >
-    <ForwardRef(Base)
+    <ForwardRef(Typography)
       as="h1"
       className="govgr-heading-xl"
     >
-      <h1
+      <ForwardRef(Base)
+        as="h1"
         className="govgr-heading-xl"
       >
-        hello
-      </h1>
-    </ForwardRef(Base)>
+        <h1
+          className="govgr-heading-xl"
+        >
+          hello
+        </h1>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
   </ForwardRef(Heading)>
 </ForwardRef(PageTitleHeading)>
 `;

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

@@ -2,7 +2,7 @@
 
 exports[`renders the RadioItem  \`divider\` props 1`] = `
 <ForwardRef(RadioItem)
-  divider="ή"
+  dividerText="ή"
 >
   <ForwardRef(ChoiceDividerText)>
     <ForwardRef(Base)
@@ -91,7 +91,7 @@ exports[`renders the RadioItem  value props 1`] = `
 exports[`renders the RadioItem with \`name\`, \`disabled\`, \`divider\` and \`value\` props 1`] = `
 <ForwardRef(RadioItem)
   disabled={true}
-  divider="ή"
+  dividerText="ή"
   name="name"
   value="someValue"
 >

package/src/RadioItem/index.test.tsx

@@ -17,8 +17,8 @@ it('renders the RadioItem  value props', () => {
   ).toMatchSnapshot();
 });
 
-it('renders the RadioItem  `divider` props', () => {
-  expect(mount(<RadioItem divider={'ή'}>hello</RadioItem>)).toMatchSnapshot();
+it('renders the RadioItem  `dividerText` props', () => {
+  expect(mount(<RadioItem dividerText={'ή'}>hello</RadioItem>)).toMatchSnapshot();
 });
 
 it('renders the RadioItem with name and value props', () => {
@@ -45,10 +45,10 @@ it('renders the RadioItem with name disabled and value props', () => {
   ).toMatchSnapshot();
 });
 
-it('renders the RadioItem with `name`, `disabled`, `divider` and `value` props', () => {
+it('renders the RadioItem with `name`, `disabled`, `dividerText` and `value` props', () => {
   expect(
     mount(
-      <RadioItem name={'name'} value={'someValue'} divider={'ή'} disabled>
+      <RadioItem name={'name'} value={'someValue'} dividerText={'ή'} disabled>
         hello
       </RadioItem>
     )

package/src/RadioItem/index.tsx

@@ -6,11 +6,11 @@ import LabelContainer from '@digigov/react-core/LabelContainer';
 
 export interface RadioItemProps extends BaseProps<'input'> {
   /**
-  * divider is optional.
-  * Add this prop to add a choice divider ontop of a radio item.
+  * dividerText is optional.
+  * Add this prop to add a choice dividerText on top of a radio item.
   * The string is the text that it will appear above this radio item.
   */
-  divider?: string;
+  dividerText?: string;
 }
 /**
  * RadioItem component is used for display radio buttons.
@@ -18,11 +18,11 @@ export interface RadioItemProps extends BaseProps<'input'> {
  */
 export const RadioItem = React.forwardRef<HTMLInputElement, RadioItemProps>(
   function RadioItem(
-    { divider, name, value, className, disabled = false, children, ...props },
+    { dividerText, name, value, className, disabled = false, children, ...props },
     ref
   ) {
     return <>
-      {divider && <ChoiceDividerText>{divider}</ChoiceDividerText>}
+      {dividerText && <ChoiceDividerText>{dividerText}</ChoiceDividerText>}
       <div
         className={clsx(className, {
           'govgr-radios__item': true,

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

@@ -1,5 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders the StepNav with dense props 1`] = `
+<ForwardRef(StepNav)
+  dense={true}
+>
+  <ForwardRef(Base)
+    as="div"
+    className="govgr-step--dense govgr-step-nav"
+  >
+    <div
+      className="govgr-step--dense govgr-step-nav"
+    >
+      hello
+    </div>
+  </ForwardRef(Base)>
+</ForwardRef(StepNav)>
+`;
+
 exports[`renders the StepNav with no props 1`] = `
 <ForwardRef(StepNav)>
   <ForwardRef(Base)

package/src/StepNav/index.test.tsx

@@ -6,3 +6,7 @@ import StepNav from '@digigov/react-core/StepNav';
 it('renders the StepNav with no props', () => {
   expect(mount(<StepNav>hello</StepNav>)).toMatchSnapshot();
 });
+
+it('renders the StepNav with dense props', () => {
+  expect(mount(<StepNav dense>hello</StepNav>)).toMatchSnapshot();
+});

package/src/StepNav/index.tsx

@@ -2,19 +2,28 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface StepNavProps extends BaseProps<'div'> {}
+export interface StepNavProps extends BaseProps<'div'> {
+  /**
+  * dense is optional.
+  * @value true StepNav will be dense.
+  * @value false
+  * @default false
+  * */
+  dense?: boolean;
+}
 /**
  * StepNav contains the content or any other element for step-by-step implementation.
  * Use StepNav as wrapper component.
  */
 export const StepNav = React.forwardRef<HTMLDivElement, StepNavProps>(
-  function StepNav({ className, children, ...props }, ref) {
+  function StepNav({ className, dense, children, ...props }, ref) {
     return (
       <Base
         as="div"
         ref={ref}
         className={clsx(className, {
           'govgr-step-nav': true,
+          'govgr-step-nav--dense': dense,
         })}
         {...props}
       >

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

@@ -15,16 +15,21 @@ exports[`renders the TabsHeading with no props 1`] = `
         <ForwardRef(Heading)
           size="sm"
         >
-          <ForwardRef(Base)
+          <ForwardRef(Typography)
             as="h4"
             className="govgr-heading-sm"
           >
-            <h4
+            <ForwardRef(Base)
+              as="h4"
               className="govgr-heading-sm"
             >
-              hello
-            </h4>
-          </ForwardRef(Base)>
+              <h4
+                className="govgr-heading-sm"
+              >
+                hello
+              </h4>
+            </ForwardRef(Base)>
+          </ForwardRef(Typography)>
         </ForwardRef(Heading)>
       </div>
     </ForwardRef(Base)>
@@ -49,16 +54,21 @@ exports[`renders the TabsHeading with size=m 1`] = `
         <ForwardRef(Heading)
           size="md"
         >
-          <ForwardRef(Base)
+          <ForwardRef(Typography)
             as="h3"
             className="govgr-heading-md"
           >
-            <h3
+            <ForwardRef(Base)
+              as="h3"
               className="govgr-heading-md"
             >
-              hello
-            </h3>
-          </ForwardRef(Base)>
+              <h3
+                className="govgr-heading-md"
+              >
+                hello
+              </h3>
+            </ForwardRef(Base)>
+          </ForwardRef(Typography)>
         </ForwardRef(Heading)>
       </div>
     </ForwardRef(Base)>
@@ -83,16 +93,21 @@ exports[`renders the TabsHeading with size=s 1`] = `
         <ForwardRef(Heading)
           size="sm"
         >
-          <ForwardRef(Base)
+          <ForwardRef(Typography)
             as="h4"
             className="govgr-heading-sm"
           >
-            <h4
+            <ForwardRef(Base)
+              as="h4"
               className="govgr-heading-sm"
             >
-              hello
-            </h4>
-          </ForwardRef(Base)>
+              <h4
+                className="govgr-heading-sm"
+              >
+                hello
+              </h4>
+            </ForwardRef(Base)>
+          </ForwardRef(Typography)>
         </ForwardRef(Heading)>
       </div>
     </ForwardRef(Base)>

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

@@ -1,9 +1,9 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders the TabsListItem with href and selected=false 1`] = `
+exports[`renders the TabsListItem with href and open=false 1`] = `
 <ForwardRef(TabsListItem)
   href="/"
-  selected={false}
+  open={false}
 >
   <li
     className="govgr-tabs__list-item"
@@ -11,19 +11,19 @@ exports[`renders the TabsListItem with href and selected=false 1`] = `
   >
     <ForwardRef(Base)
       aria-selected={false}
-      as="a"
+      as="button"
       className="govgr-tabs__tab"
       href="/"
       role="tab"
     >
-      <a
+      <button
         aria-selected={false}
         className="govgr-tabs__tab"
         href="/"
         role="tab"
       >
         hello
-      </a>
+      </button>
     </ForwardRef(Base)>
   </li>
 </ForwardRef(TabsListItem)>
@@ -36,24 +36,24 @@ exports[`renders the TabsListItem with no props 1`] = `
     role="presentation"
   >
     <ForwardRef(Base)
-      as="a"
+      as="button"
       className="govgr-tabs__tab"
       role="tab"
     >
-      <a
+      <button
         className="govgr-tabs__tab"
         role="tab"
       >
         hello
-      </a>
+      </button>
     </ForwardRef(Base)>
   </li>
 </ForwardRef(TabsListItem)>
 `;
 
-exports[`renders the TabsListItem with selected=false 1`] = `
+exports[`renders the TabsListItem with open=false 1`] = `
 <ForwardRef(TabsListItem)
-  selected={false}
+  open={false}
 >
   <li
     className="govgr-tabs__list-item"
@@ -61,72 +61,72 @@ exports[`renders the TabsListItem with selected=false 1`] = `
   >
     <ForwardRef(Base)
       aria-selected={false}
-      as="a"
+      as="button"
       className="govgr-tabs__tab"
       role="tab"
     >
-      <a
+      <button
         aria-selected={false}
         className="govgr-tabs__tab"
         role="tab"
       >
         hello
-      </a>
+      </button>
     </ForwardRef(Base)>
   </li>
 </ForwardRef(TabsListItem)>
 `;
 
-exports[`renders the TabsListItem with selected=true 1`] = `
+exports[`renders the TabsListItem with open=true 1`] = `
 <ForwardRef(TabsListItem)
-  selected={true}
+  open={true}
 >
   <li
-    className="govgr-tabs__list-item-selected govgr-tabs__list-item"
+    className="govgr-tabs__list-item govgr-tabs__list-item-selected"
     role="presentation"
   >
     <ForwardRef(Base)
       aria-selected={true}
-      as="a"
+      as="button"
       className="govgr-tabs__tab"
       role="tab"
     >
-      <a
+      <button
         aria-selected={true}
         className="govgr-tabs__tab"
         role="tab"
       >
         hello
-      </a>
+      </button>
     </ForwardRef(Base)>
   </li>
 </ForwardRef(TabsListItem)>
 `;
 
-exports[`renders the TabsListItem with selected=true 2`] = `
+exports[`renders the TabsListItem with open=true 2`] = `
 <ForwardRef(TabsListItem)
   href="/"
-  selected={true}
+  open={true}
 >
   <li
-    className="govgr-tabs__list-item-selected govgr-tabs__list-item"
+    className="govgr-tabs__list-item govgr-tabs__list-item-selected"
     role="presentation"
   >
     <ForwardRef(Base)
       aria-selected={true}
-      as="a"
+      as="button"
       className="govgr-tabs__tab"
       href="/"
       role="tab"
     >
-      <a
+      <button
         aria-selected={true}
         className="govgr-tabs__tab"
         href="/"
         role="tab"
       >
         hello
-      </a>
+      </button>
     </ForwardRef(Base)>
   </li>
 </ForwardRef(TabsListItem)>

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

@@ -1,5 +1,22 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders the TaskList with dense prop 1`] = `
+<ForwardRef(TaskList)
+  dense={true}
+>
+  <ForwardRef(Base)
+    as="ol"
+    className="govgr-task--dense govgr-task-list"
+  >
+    <ol
+      className="govgr-task--dense govgr-task-list"
+    >
+      hello
+    </ol>
+  </ForwardRef(Base)>
+</ForwardRef(TaskList)>
+`;
+
 exports[`renders the TaskList with no prop 1`] = `
 <ForwardRef(TaskList)>
   <ForwardRef(Base)

package/src/TaskList/index.test.tsx

@@ -6,3 +6,7 @@ import TaskList from '@digigov/react-core/TaskList';
 it('renders the TaskList with no prop', () => {
   expect(mount(<TaskList>hello</TaskList>)).toMatchSnapshot();
 });
+
+it('renders the TaskList with dense prop', () => {
+  expect(mount(<TaskList dense>hello</TaskList>)).toMatchSnapshot();
+});

package/src/TaskList/index.tsx

@@ -2,19 +2,28 @@ import React from 'react';
 import clsx from 'clsx';
 import Base, { BaseProps } from '@digigov/react-core/Base';
 
-export interface TaskListProps extends BaseProps<'ol'> {}
+export interface TaskListProps extends BaseProps<'ol'> {
+  /**
+   * dense is optional.
+   * @value true TaskList will be dense.
+   * @value false
+   * @default false
+   * */
+  dense?: boolean;
+}
 /**
  * TaskList component is used for listing items.
  * This component must contain TaskListItem component.
  */
 export const TaskList = React.forwardRef<HTMLOListElement, TaskListProps>(
-  function TaskList({ className, children, ...props }, ref) {
+  function TaskList({ className, dense, children, ...props }, ref) {
     return (
       <Base
         as="ol"
         ref={ref}
         className={clsx(className, {
           'govgr-task-list': true,
+          'govgr-task-list--dense': dense,
         })}
         {...props}
       >

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

@@ -1,50 +1,86 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`renders the TaskListItemHeading with no prop 1`] = `
-<ForwardRef(TaskListItemHeading)>
-  <ForwardRef(Base)
-    as="h2"
-    className="govgr-task-list__heading"
+<ForwardRef(TaskListItemHeaading)>
+  <ForwardRef(Heading)
+    marginBottom={4}
+    size="lg"
   >
-    <h2
-      className="govgr-task-list__heading"
+    <ForwardRef(Typography)
+      as="h2"
+      className="govgr-heading-lg"
+      marginBottom={4}
     >
-      hello
-    </h2>
-  </ForwardRef(Base)>
-</ForwardRef(TaskListItemHeading)>
+      <ForwardRef(Base)
+        as="h2"
+        className="govgr-heading-lg"
+        marginBottom={4}
+      >
+        <h2
+          className="govgr-heading-lg govgr-mb-4"
+        >
+          hello
+        </h2>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(Heading)>
+</ForwardRef(TaskListItemHeaading)>
 `;
 
 exports[`renders the TaskListItemHeading with size = "md" prop 1`] = `
-<ForwardRef(TaskListItemHeading)
+<ForwardRef(TaskListItemHeaading)
   size="md"
 >
-  <ForwardRef(Base)
-    as="h3"
-    className="govgr-task-list__heading--md govgr-task-list__heading"
+  <ForwardRef(Heading)
+    marginBottom={4}
+    size="md"
   >
-    <h3
-      className="govgr-task-list__heading--md govgr-task-list__heading"
+    <ForwardRef(Typography)
+      as="h3"
+      className="govgr-heading-md"
+      marginBottom={4}
     >
-      hello
-    </h3>
-  </ForwardRef(Base)>
-</ForwardRef(TaskListItemHeading)>
+      <ForwardRef(Base)
+        as="h3"
+        className="govgr-heading-md"
+        marginBottom={4}
+      >
+        <h3
+          className="govgr-heading-md govgr-mb-4"
+        >
+          hello
+        </h3>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(Heading)>
+</ForwardRef(TaskListItemHeaading)>
 `;
 
 exports[`renders the TaskListItemHeading with size = "sm" prop 1`] = `
-<ForwardRef(TaskListItemHeading)
+<ForwardRef(TaskListItemHeaading)
   size="sm"
 >
-  <ForwardRef(Base)
-    as="h4"
-    className="govgr-task-list__heading--sm govgr-task-list__heading"
+  <ForwardRef(Heading)
+    marginBottom={4}
+    size="sm"
   >
-    <h4
-      className="govgr-task-list__heading--sm govgr-task-list__heading"
+    <ForwardRef(Typography)
+      as="h4"
+      className="govgr-heading-sm"
+      marginBottom={4}
     >
-      hello
-    </h4>
-  </ForwardRef(Base)>
-</ForwardRef(TaskListItemHeading)>
+      <ForwardRef(Base)
+        as="h4"
+        className="govgr-heading-sm"
+        marginBottom={4}
+      >
+        <h4
+          className="govgr-heading-sm govgr-mb-4"
+        >
+          hello
+        </h4>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
+  </ForwardRef(Heading)>
+</ForwardRef(TaskListItemHeaading)>
 `;