Adds alignLeft prop to TabNav (#87)

* Adds alignLeft prop to TabNav * Updates story * Add TypeScript types Co-authored-by: Brendan Hamill <[email protected]> Co-authored-by: GitHub Action <[email protected]>
Quartz · Dec 7, 2020 · 9afd913 · 9afd913
1 parent 4b1c6cc
commit 9afd913
Show file tree

Hide file tree

Showing 4 changed files with 57 additions and 16 deletions.
diff --git a/dist/TabNav/TabNav.d.ts b/dist/TabNav/TabNav.d.ts
@@ -1,5 +1,9 @@
 import React from 'react';
 declare function TabNav(props: {
+    /**
+     * Use when the TabNav is used with section headers or for non page-header content.
+     */
+    alignLeft?: boolean;
     /**
      * Child node to be rendered as the inner HTML of the component.
      */

diff --git a/src/components/TabNav/TabNav.scss b/src/components/TabNav/TabNav.scss
@@ -5,7 +5,6 @@
 @use '~@quartz/styles/scss/tokens';
 
 .container {
-	text-align: center;
 	white-space: nowrap;
 	position: relative;
 	width: 100%;
@@ -22,6 +21,10 @@
 	}
 }
 
+.align-center {
+	text-align: center;
+}
+
 .scroll-container {
 	overflow: auto;
 }
@@ -39,6 +42,25 @@
 	padding: 16px 0 14px;
 	color: color-scheme.$typography-faint;
 
+	&:first-child {
+		margin-left: 0;
+	}
+
+	&[aria-current="true"] {
+		border-bottom: 2px solid color-scheme.$accent;
+		color: color-scheme.$accent;
+
+		a {
+			color: color-scheme.$accent;
+		}
+	}
+
+	a {
+		color: inherit;
+	}
+}
+
+.align-center .tab {
 	&:first-child {
 		margin-left: tokens.$size-gutter-mobile;
 
@@ -62,17 +84,4 @@
 			margin-right: tokens.$size-gutter-desktop;
 		}
 	}
-
-	&[aria-current="true"] {
-		border-bottom: 2px solid color-scheme.$accent;
-		color: color-scheme.$accent;
-
-		a {
-			color: color-scheme.$accent;
-		}
-	}
-
-	a {
-		color: inherit;
-	}
 }
diff --git a/src/components/TabNav/TabNav.stories.mdx b/src/components/TabNav/TabNav.stories.mdx
@@ -14,9 +14,10 @@ A link (`<a>`) or button (`<button>`) element should be passed into each TabNavI
 
 - **Do** use TabNav to present sibling pages.
 - **Do** use TabNav inside the <LinkTo kind="PageHeader">PageHeader</LinkTo> component when possible.
+- **Do** use center-aligned TabNav when it controls page content; align left otherwise.
 - **Do not** use the TabNavItem component without an immediate TabNav parent.
 - **Do not** apply `isActive={true}` to more than one TabNavItem at a time.
-- **Do not** use a TabNav to link to pages that are not semantically related.
+- **Do not** use a TabNav to link to pages or section content that are not semantically related.
 
 ## Props
 
@@ -53,3 +54,26 @@ A link (`<a>`) or button (`<button>`) element should be passed into each TabNavI
 	</Story>
 </Canvas>
 
+### Section Nav
+
+<Canvas>
+	<Story name="Section Nav">
+		{args => (
+			<TabNav alignLeft>
+				<TabNavItem isActive={true}>
+					<a href="#">Because China</a>
+				</TabNavItem>
+				<TabNavItem>
+					<a href="#">Fixing Capitalism</a>
+				</TabNavItem>
+				<TabNavItem>
+					<a href="#">The Climate Economy</a>
+				</TabNavItem>
+				<TabNavItem>
+					<a href="#">Future of Finance</a>
+				</TabNavItem>
+			</TabNav>
+		)}
+	</Story>
+</Canvas>
+
diff --git a/src/components/TabNav/TabNav.tsx b/src/components/TabNav/TabNav.tsx
@@ -2,13 +2,17 @@ import React from 'react';
 import styles from './TabNav.scss';
 
 function TabNav ( props: {
+	/**
+	 * Use when the TabNav is used with section headers or for non page-header content.
+	 */
+	alignLeft?: boolean,
 	/**
 	 * Child node to be rendered as the inner HTML of the component.
 	 */
 	children: React.ReactNode,
 } ) {
 	return (
-		<nav className={styles.container}>
+		<nav className={`${styles.container} ${props.alignLeft ? '' : styles.alignCenter}`}>
 			<div className={styles[ 'scroll-container' ]}>
 				<ul className={styles.tablist}>
 					{props.children}