@digigov/react-core 1.0.0-480e3d97 → 1.0.0-60addd4a

package/src/NavMenuTitle/index.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import clsx from 'clsx';
+import { BaseProps } from '@digigov/react-core/Base';
+import Grid from '@digigov/react-core/Grid';
+import Heading from '@digigov/react-core/Heading';
+
+export interface NavMenuTitleProps extends BaseProps<'div'> {}
+/**
+ *
+ * NavMenuTitle is the main Title for the nav list items.
+ * NavMenuTitle  must be inside NavMenuContainer component.
+ */
+export const NavMenuTitle = React.forwardRef<
+  HTMLDivElement,
+  NavMenuTitleProps
+>(function NavMenuTitle({ className, children, ...props }, ref) {
+  return (
+    <Grid
+      item
+      xs={12}
+      sm={4}
+      ref={ref}
+      className={clsx(className, {
+        'govgr-nav-menu__title': true,
+      })}
+      {...props}
+    >
+      <Heading
+        element="h3"
+        size="md"
+        className={clsx({
+          'govgr-nav-menu__title-heading': true,
+        })}
+      >
+        {children}
+      </Heading>
+    </Grid>
+  );
+});
+
+export default NavMenuTitle;

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

@@ -15,17 +15,23 @@ exports[`renders the NotificationBannerHeader with no props 1`] = `
         marginBottom={0}
         size="sm"
       >
-        <ForwardRef(Base)
+        <ForwardRef(Typography)
           as="h2"
           className="govgr-notification-banner__title govgr-heading-sm"
           marginBottom={0}
         >
-          <h2
-            className="govgr-notification-banner__title govgr-heading-sm govgr-mb-0"
+          <ForwardRef(Base)
+            as="h2"
+            className="govgr-notification-banner__title govgr-heading-sm"
+            marginBottom={0}
           >
-            hello
-          </h2>
-        </ForwardRef(Base)>
+            <h2
+              className="govgr-notification-banner__title govgr-heading-sm govgr-mb-0"
+            >
+              hello
+            </h2>
+          </ForwardRef(Base)>
+        </ForwardRef(Typography)>
       </ForwardRef(Heading)>
     </div>
   </ForwardRef(Base)>

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

@@ -7,16 +7,21 @@ exports[`renders the NotificationBannerHeading with no props 1`] = `
     element="h3"
     size="md"
   >
-    <ForwardRef(Base)
+    <ForwardRef(Typography)
       as="h3"
       className="govgr-notification-banner__heading govgr-heading-md"
     >
-      <h3
+      <ForwardRef(Base)
+        as="h3"
         className="govgr-notification-banner__heading govgr-heading-md"
       >
-        hello
-      </h3>
-    </ForwardRef(Base)>
+        <h3
+          className="govgr-notification-banner__heading govgr-heading-md"
+        >
+          hello
+        </h3>
+      </ForwardRef(Base)>
+    </ForwardRef(Typography)>
   </ForwardRef(Heading)>
 </ForwardRef(NotificationBannerHeading)>
 `;

package/src/PageTitleCaption/__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/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/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)>