@digigov/react-core 1.0.0-88820b1e → 1.0.0-8bbf3ef2

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-list--dense govgr-task-list"
+  >
+    <ol
+      className="govgr-task-list--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)>
 `;

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

@@ -1,5 +1,24 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`renders the TextArea with dense prop 1`] = `
+<ForwardRef(TextArea)
+  dense={true}
+>
+  <ForwardRef(Base)
+    as="textarea"
+    className="govgr-textarea--dense govgr-textarea"
+    rows={3}
+  >
+    <textarea
+      className="govgr-textarea--dense govgr-textarea"
+      rows={3}
+    >
+      hello
+    </textarea>
+  </ForwardRef(Base)>
+</ForwardRef(TextArea)>
+`;
+
 exports[`renders the TextArea with no props 1`] = `
 <ForwardRef(TextArea)>
   <ForwardRef(Base)

package/src/TextArea/index.test.tsx

@@ -26,3 +26,6 @@ it('renders the TextArea with rows=7', () => {
 it('renders the TextArea with rows=8', () => {
   expect(mount(<TextArea rows={8}>hello</TextArea>)).toMatchSnapshot();
 });
+it('renders the TextArea with dense prop', () => {
+  expect(mount(<TextArea dense>hello</TextArea>)).toMatchSnapshot();
+});

package/src/TextArea/index.tsx

@@ -10,6 +10,13 @@ export interface TextAreaProps extends BaseProps<'textarea'> {
   * @value false
   */
   error?: boolean;
+  /**
+   * dense is optional.
+   * @value true TextArea will be dense.
+   * @value false
+   * @default false
+   */
+  dense?: boolean;
 }
 /**
  * Textarea component is used when you need to let users enter an
@@ -17,17 +24,19 @@ export interface TextAreaProps extends BaseProps<'textarea'> {
  */
 export const TextArea = React.forwardRef<HTMLTextAreaElement, TextAreaProps>(
   function TextArea(
-    { name, rows = 6, error, className, children, ...props },
+    { name, rows, error, dense, className, children, ...props },
     ref
   ) {
+    const defaultRows = dense? 3 : 6;
     return (
       <Base
         as="textarea"
         name={name}
-        rows={rows}
+        rows={rows || defaultRows}
         ref={ref}
         className={clsx(className, {
           'govgr-textarea': true,
+          'govgr-textarea--dense': dense,
           'govgr-input--error': error,
         })}
         {...props}