@digigov/react-core 0.20.0-navlist.alpha.2 → 0.20.0

package/src/BurgerIcon/index.tsx

@@ -14,13 +14,6 @@ export interface BurgerIconProps extends SvgIconProps {
    * This prop should be 'true' whenever the NavHorizontal is 'active', so whenever the user clicks at the burger menu.
    */
   active?: boolean;
-
-  /**
-   * hidden is optional.
-   * The default is 's'.
-   * It can be used to control the visibility of the icon across screens.
-   */
-  hidden?: 's' | 'm' | 'l';
 }
 /**
  * BurgerIcon is used inside the Header component.
@@ -29,10 +22,7 @@ export interface BurgerIconProps extends SvgIconProps {
 export const BurgerIcon: React.FC<BurgerIconProps> = React.forwardRef<
   SVGSVGElement,
   BurgerIconProps
->(function BurgerIcon(
-  { variant, size, active, hidden, className, ...props },
-  ref
-) {
+>(function BurgerIcon({ variant, size, active, className, ...props }, ref) {
   return (
     <SvgIcon
       variant={variant}
@@ -40,9 +30,6 @@ export const BurgerIcon: React.FC<BurgerIconProps> = React.forwardRef<
       className={clsx(className, {
         'govgr-burger-icon': true,
         'govgr-burger-icon--active': active === true,
-        'govgr-burger-icon--hidden-s': hidden === 's',
-        'govgr-burger-icon--hidden-m': hidden === 'm',
-        'govgr-burger-icon--hidden-l': hidden === 'l',
       })}
       ref={ref}
       {...props}

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

@@ -0,0 +1,178 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the GlobeIcon prop variant= "error" 1`] = `
+<ForwardRef(GlobeIcon)
+  variant="error"
+>
+  <ForwardRef(SvgIcon)
+    className="govgr-globe-icon"
+    variant="error"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-globe-icon govgr-svg-icon--error govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-globe-icon govgr-svg-icon--error govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M12,0C5.4,0,0,5.4,0,12s5.4,12,12,12s12-5.4,12-12S18.6,0,12,0z M22.4,13.1C22.4,13.1,22.4,13.2,22.4,13.1 c0,0.4-0.1,0.8-0.2,1.1v0h-3.6c0.2-1.5,0.2-3,0-4.5h3.6v0c0.1,0.4,0.1,0.7,0.2,1.1c0,0,0,0,0,0C22.5,11.6,22.5,12.4,22.4,13.1z M16,21.7c1.1-1.5,2-3.5,2.4-6h3.4c0,0,0,0,0,0C20.8,18.4,18.7,20.6,16,21.7z M21.8,8.2C21.8,8.2,21.8,8.2,21.8,8.2l-3.4,0 c-0.4-2.4-1.3-4.5-2.4-6C18.7,3.4,20.8,5.6,21.8,8.2L21.8,8.2z M17.1,9.7c0.2,1.5,0.2,3,0,4.5h-4.4V9.7L17.1,9.7L17.1,9.7z M12.7,8.2V1.6c1.9,0.6,3.5,3.2,4.1,6.6L12.7,8.2L12.7,8.2z M12.7,15.7h4.1c-0.7,3.4-2.3,6.1-4.1,6.6V15.7L12.7,15.7z M2.2,15.8 C2.2,15.8,2.2,15.8,2.2,15.8l3.4,0c0.4,2.4,1.3,4.5,2.4,6C5.3,20.6,3.2,18.4,2.2,15.8L2.2,15.8z M8,2.3c-1.1,1.5-2,3.5-2.4,6H2.2 c0,0,0,0,0,0C3.2,5.6,5.3,3.4,8,2.3z M6.9,14.3c-0.2-1.5-0.2-3,0-4.5h4.4v4.5H6.9L6.9,14.3z M11.2,15.8v6.6 c-1.9-0.6-3.5-3.2-4.1-6.6L11.2,15.8L11.2,15.8z M11.2,8.3H7.1c0.7-3.4,2.3-6.1,4.1-6.6V8.3L11.2,8.3z M1.6,10.9 C1.6,10.9,1.6,10.8,1.6,10.9c0-0.4,0.1-0.8,0.2-1.1v0h3.6c-0.2,1.5-0.2,3,0,4.5H1.7v0c-0.1-0.4-0.1-0.7-0.2-1.1c0,0,0,0,0,0 C1.5,12.4,1.5,11.6,1.6,10.9z"
+        />
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(GlobeIcon)>
+`;
+
+exports[`renders the GlobeIcon prop variant= "light" 1`] = `
+<ForwardRef(GlobeIcon)
+  variant="light"
+>
+  <ForwardRef(SvgIcon)
+    className="govgr-globe-icon"
+    variant="light"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-globe-icon govgr-svg-icon--light govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-globe-icon govgr-svg-icon--light govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M12,0C5.4,0,0,5.4,0,12s5.4,12,12,12s12-5.4,12-12S18.6,0,12,0z M22.4,13.1C22.4,13.1,22.4,13.2,22.4,13.1 c0,0.4-0.1,0.8-0.2,1.1v0h-3.6c0.2-1.5,0.2-3,0-4.5h3.6v0c0.1,0.4,0.1,0.7,0.2,1.1c0,0,0,0,0,0C22.5,11.6,22.5,12.4,22.4,13.1z M16,21.7c1.1-1.5,2-3.5,2.4-6h3.4c0,0,0,0,0,0C20.8,18.4,18.7,20.6,16,21.7z M21.8,8.2C21.8,8.2,21.8,8.2,21.8,8.2l-3.4,0 c-0.4-2.4-1.3-4.5-2.4-6C18.7,3.4,20.8,5.6,21.8,8.2L21.8,8.2z M17.1,9.7c0.2,1.5,0.2,3,0,4.5h-4.4V9.7L17.1,9.7L17.1,9.7z M12.7,8.2V1.6c1.9,0.6,3.5,3.2,4.1,6.6L12.7,8.2L12.7,8.2z M12.7,15.7h4.1c-0.7,3.4-2.3,6.1-4.1,6.6V15.7L12.7,15.7z M2.2,15.8 C2.2,15.8,2.2,15.8,2.2,15.8l3.4,0c0.4,2.4,1.3,4.5,2.4,6C5.3,20.6,3.2,18.4,2.2,15.8L2.2,15.8z M8,2.3c-1.1,1.5-2,3.5-2.4,6H2.2 c0,0,0,0,0,0C3.2,5.6,5.3,3.4,8,2.3z M6.9,14.3c-0.2-1.5-0.2-3,0-4.5h4.4v4.5H6.9L6.9,14.3z M11.2,15.8v6.6 c-1.9-0.6-3.5-3.2-4.1-6.6L11.2,15.8L11.2,15.8z M11.2,8.3H7.1c0.7-3.4,2.3-6.1,4.1-6.6V8.3L11.2,8.3z M1.6,10.9 C1.6,10.9,1.6,10.8,1.6,10.9c0-0.4,0.1-0.8,0.2-1.1v0h3.6c-0.2,1.5-0.2,3,0,4.5H1.7v0c-0.1-0.4-0.1-0.7-0.2-1.1c0,0,0,0,0,0 C1.5,12.4,1.5,11.6,1.6,10.9z"
+        />
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(GlobeIcon)>
+`;
+
+exports[`renders the GlobeIcon props active variant= "light" 1`] = `
+<ForwardRef(GlobeIcon)
+  active={true}
+  variant="light"
+>
+  <ForwardRef(SvgIcon)
+    className="govgr-globe-icon--active govgr-globe-icon"
+    variant="light"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-globe-icon--active govgr-globe-icon govgr-svg-icon--light govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-globe-icon--active govgr-globe-icon govgr-svg-icon--light govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M12,0C5.4,0,0,5.4,0,12s5.4,12,12,12s12-5.4,12-12S18.6,0,12,0z M22.4,13.1C22.4,13.1,22.4,13.2,22.4,13.1 c0,0.4-0.1,0.8-0.2,1.1v0h-3.6c0.2-1.5,0.2-3,0-4.5h3.6v0c0.1,0.4,0.1,0.7,0.2,1.1c0,0,0,0,0,0C22.5,11.6,22.5,12.4,22.4,13.1z M16,21.7c1.1-1.5,2-3.5,2.4-6h3.4c0,0,0,0,0,0C20.8,18.4,18.7,20.6,16,21.7z M21.8,8.2C21.8,8.2,21.8,8.2,21.8,8.2l-3.4,0 c-0.4-2.4-1.3-4.5-2.4-6C18.7,3.4,20.8,5.6,21.8,8.2L21.8,8.2z M17.1,9.7c0.2,1.5,0.2,3,0,4.5h-4.4V9.7L17.1,9.7L17.1,9.7z M12.7,8.2V1.6c1.9,0.6,3.5,3.2,4.1,6.6L12.7,8.2L12.7,8.2z M12.7,15.7h4.1c-0.7,3.4-2.3,6.1-4.1,6.6V15.7L12.7,15.7z M2.2,15.8 C2.2,15.8,2.2,15.8,2.2,15.8l3.4,0c0.4,2.4,1.3,4.5,2.4,6C5.3,20.6,3.2,18.4,2.2,15.8L2.2,15.8z M8,2.3c-1.1,1.5-2,3.5-2.4,6H2.2 c0,0,0,0,0,0C3.2,5.6,5.3,3.4,8,2.3z M6.9,14.3c-0.2-1.5-0.2-3,0-4.5h4.4v4.5H6.9L6.9,14.3z M11.2,15.8v6.6 c-1.9-0.6-3.5-3.2-4.1-6.6L11.2,15.8L11.2,15.8z M11.2,8.3H7.1c0.7-3.4,2.3-6.1,4.1-6.6V8.3L11.2,8.3z M1.6,10.9 C1.6,10.9,1.6,10.8,1.6,10.9c0-0.4,0.1-0.8,0.2-1.1v0h3.6c-0.2,1.5-0.2,3,0,4.5H1.7v0c-0.1-0.4-0.1-0.7-0.2-1.1c0,0,0,0,0,0 C1.5,12.4,1.5,11.6,1.6,10.9z"
+        />
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(GlobeIcon)>
+`;
+
+exports[`renders the GlobeIcon with no props 1`] = `
+<ForwardRef(GlobeIcon)>
+  <ForwardRef(SvgIcon)
+    className="govgr-globe-icon"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-globe-icon govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-globe-icon govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M12,0C5.4,0,0,5.4,0,12s5.4,12,12,12s12-5.4,12-12S18.6,0,12,0z M22.4,13.1C22.4,13.1,22.4,13.2,22.4,13.1 c0,0.4-0.1,0.8-0.2,1.1v0h-3.6c0.2-1.5,0.2-3,0-4.5h3.6v0c0.1,0.4,0.1,0.7,0.2,1.1c0,0,0,0,0,0C22.5,11.6,22.5,12.4,22.4,13.1z M16,21.7c1.1-1.5,2-3.5,2.4-6h3.4c0,0,0,0,0,0C20.8,18.4,18.7,20.6,16,21.7z M21.8,8.2C21.8,8.2,21.8,8.2,21.8,8.2l-3.4,0 c-0.4-2.4-1.3-4.5-2.4-6C18.7,3.4,20.8,5.6,21.8,8.2L21.8,8.2z M17.1,9.7c0.2,1.5,0.2,3,0,4.5h-4.4V9.7L17.1,9.7L17.1,9.7z M12.7,8.2V1.6c1.9,0.6,3.5,3.2,4.1,6.6L12.7,8.2L12.7,8.2z M12.7,15.7h4.1c-0.7,3.4-2.3,6.1-4.1,6.6V15.7L12.7,15.7z M2.2,15.8 C2.2,15.8,2.2,15.8,2.2,15.8l3.4,0c0.4,2.4,1.3,4.5,2.4,6C5.3,20.6,3.2,18.4,2.2,15.8L2.2,15.8z M8,2.3c-1.1,1.5-2,3.5-2.4,6H2.2 c0,0,0,0,0,0C3.2,5.6,5.3,3.4,8,2.3z M6.9,14.3c-0.2-1.5-0.2-3,0-4.5h4.4v4.5H6.9L6.9,14.3z M11.2,15.8v6.6 c-1.9-0.6-3.5-3.2-4.1-6.6L11.2,15.8L11.2,15.8z M11.2,8.3H7.1c0.7-3.4,2.3-6.1,4.1-6.6V8.3L11.2,8.3z M1.6,10.9 C1.6,10.9,1.6,10.8,1.6,10.9c0-0.4,0.1-0.8,0.2-1.1v0h3.6c-0.2,1.5-0.2,3,0,4.5H1.7v0c-0.1-0.4-0.1-0.7-0.2-1.1c0,0,0,0,0,0 C1.5,12.4,1.5,11.6,1.6,10.9z"
+        />
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(GlobeIcon)>
+`;
+
+exports[`renders the GlobeIcon with prop active=true 1`] = `
+<ForwardRef(GlobeIcon)
+  active={true}
+>
+  <ForwardRef(SvgIcon)
+    className="govgr-globe-icon--active govgr-globe-icon"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-globe-icon--active govgr-globe-icon govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-globe-icon--active govgr-globe-icon govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M12,0C5.4,0,0,5.4,0,12s5.4,12,12,12s12-5.4,12-12S18.6,0,12,0z M22.4,13.1C22.4,13.1,22.4,13.2,22.4,13.1 c0,0.4-0.1,0.8-0.2,1.1v0h-3.6c0.2-1.5,0.2-3,0-4.5h3.6v0c0.1,0.4,0.1,0.7,0.2,1.1c0,0,0,0,0,0C22.5,11.6,22.5,12.4,22.4,13.1z M16,21.7c1.1-1.5,2-3.5,2.4-6h3.4c0,0,0,0,0,0C20.8,18.4,18.7,20.6,16,21.7z M21.8,8.2C21.8,8.2,21.8,8.2,21.8,8.2l-3.4,0 c-0.4-2.4-1.3-4.5-2.4-6C18.7,3.4,20.8,5.6,21.8,8.2L21.8,8.2z M17.1,9.7c0.2,1.5,0.2,3,0,4.5h-4.4V9.7L17.1,9.7L17.1,9.7z M12.7,8.2V1.6c1.9,0.6,3.5,3.2,4.1,6.6L12.7,8.2L12.7,8.2z M12.7,15.7h4.1c-0.7,3.4-2.3,6.1-4.1,6.6V15.7L12.7,15.7z M2.2,15.8 C2.2,15.8,2.2,15.8,2.2,15.8l3.4,0c0.4,2.4,1.3,4.5,2.4,6C5.3,20.6,3.2,18.4,2.2,15.8L2.2,15.8z M8,2.3c-1.1,1.5-2,3.5-2.4,6H2.2 c0,0,0,0,0,0C3.2,5.6,5.3,3.4,8,2.3z M6.9,14.3c-0.2-1.5-0.2-3,0-4.5h4.4v4.5H6.9L6.9,14.3z M11.2,15.8v6.6 c-1.9-0.6-3.5-3.2-4.1-6.6L11.2,15.8L11.2,15.8z M11.2,8.3H7.1c0.7-3.4,2.3-6.1,4.1-6.6V8.3L11.2,8.3z M1.6,10.9 C1.6,10.9,1.6,10.8,1.6,10.9c0-0.4,0.1-0.8,0.2-1.1v0h3.6c-0.2,1.5-0.2,3,0,4.5H1.7v0c-0.1-0.4-0.1-0.7-0.2-1.1c0,0,0,0,0,0 C1.5,12.4,1.5,11.6,1.6,10.9z"
+        />
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(GlobeIcon)>
+`;
+
+exports[`renders the GlobeIcon with prop variant=dark 1`] = `
+<ForwardRef(GlobeIcon)
+  variant="dark"
+>
+  <ForwardRef(SvgIcon)
+    className="govgr-globe-icon"
+    variant="dark"
+  >
+    <ForwardRef(Base)
+      aria-hidden="true"
+      as="svg"
+      className="govgr-globe-icon govgr-svg-icon--dark govgr-svg-icon"
+      focusable="false"
+      viewBox="0 0 24 24"
+    >
+      <svg
+        aria-hidden="true"
+        className="govgr-globe-icon govgr-svg-icon--dark govgr-svg-icon"
+        focusable="false"
+        viewBox="0 0 24 24"
+      >
+        <path
+          d="M12,0C5.4,0,0,5.4,0,12s5.4,12,12,12s12-5.4,12-12S18.6,0,12,0z M22.4,13.1C22.4,13.1,22.4,13.2,22.4,13.1 c0,0.4-0.1,0.8-0.2,1.1v0h-3.6c0.2-1.5,0.2-3,0-4.5h3.6v0c0.1,0.4,0.1,0.7,0.2,1.1c0,0,0,0,0,0C22.5,11.6,22.5,12.4,22.4,13.1z M16,21.7c1.1-1.5,2-3.5,2.4-6h3.4c0,0,0,0,0,0C20.8,18.4,18.7,20.6,16,21.7z M21.8,8.2C21.8,8.2,21.8,8.2,21.8,8.2l-3.4,0 c-0.4-2.4-1.3-4.5-2.4-6C18.7,3.4,20.8,5.6,21.8,8.2L21.8,8.2z M17.1,9.7c0.2,1.5,0.2,3,0,4.5h-4.4V9.7L17.1,9.7L17.1,9.7z M12.7,8.2V1.6c1.9,0.6,3.5,3.2,4.1,6.6L12.7,8.2L12.7,8.2z M12.7,15.7h4.1c-0.7,3.4-2.3,6.1-4.1,6.6V15.7L12.7,15.7z M2.2,15.8 C2.2,15.8,2.2,15.8,2.2,15.8l3.4,0c0.4,2.4,1.3,4.5,2.4,6C5.3,20.6,3.2,18.4,2.2,15.8L2.2,15.8z M8,2.3c-1.1,1.5-2,3.5-2.4,6H2.2 c0,0,0,0,0,0C3.2,5.6,5.3,3.4,8,2.3z M6.9,14.3c-0.2-1.5-0.2-3,0-4.5h4.4v4.5H6.9L6.9,14.3z M11.2,15.8v6.6 c-1.9-0.6-3.5-3.2-4.1-6.6L11.2,15.8L11.2,15.8z M11.2,8.3H7.1c0.7-3.4,2.3-6.1,4.1-6.6V8.3L11.2,8.3z M1.6,10.9 C1.6,10.9,1.6,10.8,1.6,10.9c0-0.4,0.1-0.8,0.2-1.1v0h3.6c-0.2,1.5-0.2,3,0,4.5H1.7v0c-0.1-0.4-0.1-0.7-0.2-1.1c0,0,0,0,0,0 C1.5,12.4,1.5,11.6,1.6,10.9z"
+        />
+      </svg>
+    </ForwardRef(Base)>
+  </ForwardRef(SvgIcon)>
+</ForwardRef(GlobeIcon)>
+`;

package/src/GlobeIcon/index.test.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import GlobeIcon from '@digigov/react-core/GlobeIcon';
+
+it('renders the GlobeIcon with no props', () => {
+  expect(mount(<GlobeIcon />)).toMatchSnapshot();
+});
+
+it('renders the GlobeIcon with prop active=true', () => {
+  expect(mount(<GlobeIcon active={true} />)).toMatchSnapshot();
+});
+
+it('renders the GlobeIcon with prop variant=dark', () => {
+  expect(mount(<GlobeIcon variant="dark" />)).toMatchSnapshot();
+});
+
+it('renders the GlobeIcon prop variant= "light"', () => {
+  expect(mount(<GlobeIcon variant="light" />)).toMatchSnapshot();
+});
+it('renders the GlobeIcon prop variant= "error"', () => {
+  expect(mount(<GlobeIcon variant="error" />)).toMatchSnapshot();
+});
+
+it('renders the GlobeIcon props active variant= "light"', () => {
+  expect(mount(<GlobeIcon active variant="light" />)).toMatchSnapshot();
+});

package/src/GlobeIcon/index.tsx

@@ -0,0 +1,53 @@
+import React from 'react';
+import SvgIcon, { SvgIconProps } from '@digigov/react-core/SvgIcon';
+import clsx from 'clsx';
+export interface GlobeIconProps extends SvgIconProps {
+  /**
+   * ref is optional.
+   * ref prop declares the reference of the svg icon component.
+   * It can be used to to access the DOM element and the React element.
+   */
+  ref?: React.Ref<SVGSVGElement>;
+  /**
+   * active is optional.
+   * The default is 'false'.
+   * This prop should be 'true' whenever the user clicks at the globe icon.
+   */
+  active?: boolean;
+}
+/**
+ * GlobeIcon is used inside the Header component.
+ * It should be linked with the NavHorizontal component. It is hidden when the NavHorizontal is visible and vice versa.
+ */
+export const GlobeIcon: React.FC<GlobeIconProps> = React.forwardRef<
+  SVGSVGElement,
+  GlobeIconProps
+>(function GlobeIcon({ variant, size, active, className, ...props }, ref) {
+  return (
+    <SvgIcon
+      variant={variant}
+      size={size}
+      className={clsx(className, {
+        'govgr-globe-icon': true,
+        'govgr-globe-icon--active': active === true,
+      })}
+      ref={ref}
+      {...props}
+    >
+      <path
+        d="M12,0C5.4,0,0,5.4,0,12s5.4,12,12,12s12-5.4,12-12S18.6,0,12,0z M22.4,13.1C22.4,13.1,22.4,13.2,22.4,13.1
+	c0,0.4-0.1,0.8-0.2,1.1v0h-3.6c0.2-1.5,0.2-3,0-4.5h3.6v0c0.1,0.4,0.1,0.7,0.2,1.1c0,0,0,0,0,0C22.5,11.6,22.5,12.4,22.4,13.1z
+	 M16,21.7c1.1-1.5,2-3.5,2.4-6h3.4c0,0,0,0,0,0C20.8,18.4,18.7,20.6,16,21.7z M21.8,8.2C21.8,8.2,21.8,8.2,21.8,8.2l-3.4,0
+	c-0.4-2.4-1.3-4.5-2.4-6C18.7,3.4,20.8,5.6,21.8,8.2L21.8,8.2z M17.1,9.7c0.2,1.5,0.2,3,0,4.5h-4.4V9.7L17.1,9.7L17.1,9.7z
+	 M12.7,8.2V1.6c1.9,0.6,3.5,3.2,4.1,6.6L12.7,8.2L12.7,8.2z M12.7,15.7h4.1c-0.7,3.4-2.3,6.1-4.1,6.6V15.7L12.7,15.7z M2.2,15.8
+	C2.2,15.8,2.2,15.8,2.2,15.8l3.4,0c0.4,2.4,1.3,4.5,2.4,6C5.3,20.6,3.2,18.4,2.2,15.8L2.2,15.8z M8,2.3c-1.1,1.5-2,3.5-2.4,6H2.2
+	c0,0,0,0,0,0C3.2,5.6,5.3,3.4,8,2.3z M6.9,14.3c-0.2-1.5-0.2-3,0-4.5h4.4v4.5H6.9L6.9,14.3z M11.2,15.8v6.6
+	c-1.9-0.6-3.5-3.2-4.1-6.6L11.2,15.8L11.2,15.8z M11.2,8.3H7.1c0.7-3.4,2.3-6.1,4.1-6.6V8.3L11.2,8.3z M1.6,10.9
+	C1.6,10.9,1.6,10.8,1.6,10.9c0-0.4,0.1-0.8,0.2-1.1v0h3.6c-0.2,1.5-0.2,3,0,4.5H1.7v0c-0.1-0.4-0.1-0.7-0.2-1.1c0,0,0,0,0,0
+	C1.5,12.4,1.5,11.6,1.6,10.9z"
+      />
+    </SvgIcon>
+  );
+});
+
+export default GlobeIcon;

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

@@ -4,10 +4,10 @@ exports[`renders the Masthead with no props 1`] = `
 <ForwardRef(Masthead)>
   <ForwardRef(Base)
     as="div"
-    className="govgr-masthead govgr-background-dark"
+    className="govgr-background-dark govgr-masthead--primary govgr-masthead"
   >
     <div
-      className="govgr-masthead govgr-background-dark"
+      className="govgr-background-dark govgr-masthead--primary govgr-masthead"
     >
       hello
     </div>

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

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the Nav with no props 1`] = `
+<ForwardRef(Nav)>
+  <ForwardRef(Base)
+    as="nav"
+    className="govgr-nav-horizontal--border govgr-horizontal-nav"
+  >
+    <nav
+      className="govgr-nav-horizontal--border govgr-horizontal-nav"
+    >
+      hello
+    </nav>
+  </ForwardRef(Base)>
+</ForwardRef(Nav)>
+`;
+
+exports[`renders the Nav with open prop 1`] = `
+<ForwardRef(Nav)
+  open={true}
+>
+  <ForwardRef(Base)
+    as="nav"
+    className="govgr-nav-horizontal--border govgr-horizontal-nav govgr-horizontal-nav--open"
+  >
+    <nav
+      className="govgr-nav-horizontal--border govgr-horizontal-nav govgr-horizontal-nav--open"
+    >
+      hello
+    </nav>
+  </ForwardRef(Base)>
+</ForwardRef(Nav)>
+`;

package/src/Nav/index.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import Nav from '@digigov/react-core/Nav';
+
+it('renders the Nav with no props', () => {
+  expect(mount(<Nav>hello</Nav>)).toMatchSnapshot();
+});
+
+it('renders the Nav with open prop', () => {
+  expect(mount(<Nav open>hello</Nav>)).toMatchSnapshot();
+});

package/src/Nav/index.tsx

@@ -0,0 +1,42 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface NavProps extends BaseProps<'nav'> {
+  /**
+   * active is optional.
+   * active prop add background color to navigation link.
+   * use this prop only for header navigation;
+   */
+  open?: boolean;
+  /**
+   * layout prop sets the display layout for the nav list
+   * layout is horizontal by default.
+   */
+  layout?: 'vertical' | 'horizontal';
+}
+/**
+ * Nav is mainly used under the Header.
+ * This is a wrapper for the NavList component.
+ */
+export const Nav = React.forwardRef<HTMLElement, NavProps>(function Nav(
+  { className, open = false, layout = 'horizontal', children, ...props },
+  ref
+) {
+  return (
+    <Base
+      as="nav"
+      ref={ref}
+      className={clsx(className, {
+        'govgr-horizontal-nav': true,
+        'govgr-nav-horizontal--border': layout === 'horizontal',
+        'govgr-horizontal-nav--open': open,
+      })}
+      {...props}
+    >
+      {children}
+    </Base>
+  );
+});
+
+export default Nav;

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

@@ -0,0 +1,33 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`renders the NavList with active prop 1`] = `
+<ForwardRef(NavList)
+  active={true}
+>
+  <ForwardRef(Base)
+    as="ul"
+    className="govgr-horizontal-nav__list govgr-horizontal-nav__list--active"
+  >
+    <ul
+      className="govgr-horizontal-nav__list govgr-horizontal-nav__list--active"
+    >
+      hello
+    </ul>
+  </ForwardRef(Base)>
+</ForwardRef(NavList)>
+`;
+
+exports[`renders the NavList with no props 1`] = `
+<ForwardRef(NavList)>
+  <ForwardRef(Base)
+    as="ul"
+    className="govgr-horizontal-nav__list"
+  >
+    <ul
+      className="govgr-horizontal-nav__list"
+    >
+      hello
+    </ul>
+  </ForwardRef(Base)>
+</ForwardRef(NavList)>
+`;

package/src/NavList/index.test.tsx

@@ -0,0 +1,11 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import NavList from '@digigov/react-core/NavList';
+
+it('renders the NavList with no props', () => {
+  expect(mount(<NavList>hello</NavList>)).toMatchSnapshot();
+});
+it('renders the NavList with active prop', () => {
+  expect(mount(<NavList active>hello</NavList>)).toMatchSnapshot();
+});

package/src/NavList/index.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface NavListProps extends BaseProps<'ul'> {
+  /**
+   * active prop sets active background color to the nav list.
+   * active is false by default.
+   */
+  active?: boolean;
+
+  /**
+   * layout prop sets the display layout for the nav list
+   * layout is horizontal by default.
+   */
+  layout?: 'vertical' | 'horizontal';
+}
+/**
+ * NavList must be inside the Nav.
+ * This component has a list of NavListItem component inside.
+ */
+export const NavList = React.forwardRef<HTMLUListElement, NavListProps>(
+  function NavList(
+    { className, active = false, layout = 'horizontal', children, ...props },
+    ref
+  ) {
+    return (
+      <Base
+        as="ul"
+        ref={ref}
+        className={clsx(className, {
+          'govgr-horizontal-nav__list': layout === 'horizontal',
+          'govgr-vertical-nav__list': layout === 'vertical',
+          'govgr-horizontal-nav__list--active': active,
+        })}
+        {...props}
+      >
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default NavList;

package/{es/NavHorizontalListItem → src/NavListItem}/__snapshots__/index.test.tsx.snap

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`renders the NavHorizontalListItem with no props 1`] = `
+exports[`renders the NavListItem with no props 1`] = `
 <ForwardRef(NavHeaderListItem)>
   <ForwardRef(Base)
     as="li"

package/src/NavListItem/index.test.tsx

@@ -0,0 +1,8 @@
+import React from 'react';
+import { mount } from 'enzyme';
+
+import NavListItem from '@digigov/react-core/NavListItem';
+
+it('renders the NavListItem with no props', () => {
+  expect(mount(<NavListItem>hello</NavListItem>)).toMatchSnapshot();
+});

package/src/NavListItem/index.tsx

@@ -0,0 +1,37 @@
+import React from 'react';
+import Base, { BaseProps } from '@digigov/react-core/Base';
+import clsx from 'clsx';
+
+export interface NavListItemProps extends BaseProps<'li'> {
+  /**
+   * layout prop sets the display layout for the nav list
+   * layout is horizontal by default.
+   */
+  layout?: 'horizontal' | 'vertical';
+}
+/**
+ * NavListItem must be inside the NavList.
+ * This component has a items of NavListItemLink component inside.
+ */
+export const NavListItem = React.forwardRef<HTMLLIElement, NavListItemProps>(
+  function NavHeaderListItem(
+    { className, layout = 'horizontal', children, ...props },
+    ref
+  ) {
+    return (
+      <Base
+        as="li"
+        ref={ref}
+        className={clsx(className, {
+          'govgr-horizontal-nav__list-item': layout === 'horizontal',
+          'govgr-vertical-nav__list-item': layout === 'vertical',
+        })}
+        {...props}
+      >
+        {children}
+      </Base>
+    );
+  }
+);
+
+export default NavListItem;