Rebrand the main stream tab bar

CORL-799
coralproject · May 12, 2020 · b2ec4d6 · b2ec4d6
1 parent 13eb3d4
commit b2ec4d6
Show file tree

Hide file tree

Showing 8 changed files with 158 additions and 34 deletions.
diff --git a/src/core/client/stream/App/TabBar.tsx b/src/core/client/stream/App/TabBar.tsx
@@ -4,7 +4,7 @@ import React, { FunctionComponent } from "react";
 
 import { GQLSTORY_MODE } from "coral-framework/schema";
 import CLASSES from "coral-stream/classes";
-import { Icon, MatchMedia, Tab, TabBar } from "coral-ui/components";
+import { Icon, MatchMedia, Tab, TabBar } from "coral-ui/components/v2";
 
 type TabValue = "COMMENTS" | "PROFILE" | "%future added value";
 
@@ -22,37 +22,69 @@ const AppTabBar: FunctionComponent<Props> = (props) => {
       className={CLASSES.tabBar.$root}
       activeTab={props.activeTab}
       onTabClick={props.onTabClick}
+      variant="streamPrimary"
     >
       <Tab
         className={cn(CLASSES.tabBar.comments, {
           [CLASSES.tabBar.activeTab]: props.activeTab === "COMMENTS",
         })}
         tabID="COMMENTS"
+        variant="streamPrimary"
+        ariaLabel={props.mode === GQLSTORY_MODE.QA ? "Q&A" : "Comments"}
       >
-        {props.mode === GQLSTORY_MODE.QA ? (
-          <Localized id="general-tabBar-qaTab">
-            <span>Q&A</span>
-          </Localized>
-        ) : (
-          <Localized id="general-tabBar-commentsTab">
-            <span>Comments</span>
-          </Localized>
-        )}
+        <MatchMedia gteWidth="sm">
+          {(matches) =>
+            matches ? (
+              props.mode === GQLSTORY_MODE.QA ? (
+                <Localized id="general-tabBar-qaTab">
+                  <span>Q&A</span>
+                </Localized>
+              ) : (
+                <Localized id="general-tabBar-commentsTab">
+                  <span>Comments</span>
+                </Localized>
+              )
+            ) : (
+              <Icon
+                aria-label={
+                  props.mode === GQLSTORY_MODE.QA ? "Q&A" : "Comments"
+                }
+              >
+                mode_comment
+              </Icon>
+            )
+          }
+        </MatchMedia>
       </Tab>
       {props.showProfileTab && (
         <Tab
           className={cn(CLASSES.tabBar.myProfile, {
             [CLASSES.tabBar.activeTab]: props.activeTab === "PROFILE",
           })}
           tabID="PROFILE"
+          variant="streamPrimary"
+          ariaLabel="My Profile"
         >
-          <Localized id="general-tabBar-myProfileTab">
-            <span>My Profile</span>
-          </Localized>
+          <MatchMedia gteWidth="sm">
+            {(matches) =>
+              matches ? (
+                <Localized id="general-tabBar-myProfileTab">
+                  <span>My Profile</span>
+                </Localized>
+              ) : (
+                <Icon aria-label="My Profile">account_circle</Icon>
+              )
+            }
+          </MatchMedia>
         </Tab>
       )}
       {props.showConfigureTab && (
-        <Tab className={CLASSES.tabBar.configure} tabID="CONFIGURE">
+        <Tab
+          className={CLASSES.tabBar.configure}
+          tabID="CONFIGURE"
+          variant="streamPrimary"
+          ariaLabel="Configure"
+        >
           <MatchMedia gteWidth="sm">
             {(matches) =>
               matches ? (

diff --git a/src/core/client/stream/tabs/Comments/Stream/StreamContainer.css b/src/core/client/stream/tabs/Comments/Stream/StreamContainer.css
@@ -31,15 +31,15 @@
 
 .featuredCommentsTabContainer {
   position: relative;
+  display: flex;
+  align-items: center;
+  flex-wrap: nowrap;
 }
 
 .featuredCommentsInfo {
-  position: relative;
-  display: inline-block;
-  bottom: 1.5px;
-
-  margin-left: var(--v2-spacing-1);
-  margin-right: var(--v2-spacing-2);
+  margin-left: calc(-1 * var(--v2-spacing-1));
+  margin-right: var(--v2-spacing-3);
+  margin-bottom: 5px;
 }
 
 .featuredCommentsTab {

diff --git a/...ore/client/stream/test/comments/featured/__snapshots__/renderFeaturedStream.spec.tsx.snap b/...ore/client/stream/test/comments/featured/__snapshots__/renderFeaturedStream.spec.tsx.snap
@@ -11,7 +11,7 @@ exports[`renders comment stream 1`] = `
       Navigation
     </h2>
     <ul
-      className="TabBar-root TabBar-primary coral coral-tabBar"
+      className="TabBar-root TabBar-streamPrimary coral coral-tabBar"
       role="tablist"
     >
       <li
@@ -21,8 +21,9 @@ exports[`renders comment stream 1`] = `
       >
         <button
           aria-controls="tabPane-COMMENTS"
+          aria-label="Comments"
           aria-selected={true}
-          className="BaseButton-root Tab-button Tab-primary Tab-active coral coral-tabBar-tab coral-tabBar-comments coral-tabBar-tab-active"
+          className="BaseButton-root Tab-button Tab-streamPrimary Tab-active coral coral-tabBar-tab coral-tabBar-comments coral-tabBar-tab-active"
           onBlur={[Function]}
           onClick={[Function]}
           onFocus={[Function]}
@@ -32,9 +33,13 @@ exports[`renders comment stream 1`] = `
           role="tab"
           type="button"
         >
-          <span>
-            Comments
-          </span>
+          <i
+            aria-hidden="true"
+            aria-label="Comments"
+            className="Icon-root Icon-sm"
+          >
+            mode_comment
+          </i>
         </button>
       </li>
     </ul>

diff --git a/src/core/client/stream/test/comments/stream/__snapshots__/renderStream.spec.tsx.snap b/src/core/client/stream/test/comments/stream/__snapshots__/renderStream.spec.tsx.snap
@@ -11,7 +11,7 @@ exports[`renders comment stream 1`] = `
       Navigation
     </h2>
     <ul
-      className="TabBar-root TabBar-primary coral coral-tabBar"
+      className="TabBar-root TabBar-streamPrimary coral coral-tabBar"
       role="tablist"
     >
       <li
@@ -21,8 +21,9 @@ exports[`renders comment stream 1`] = `
       >
         <button
           aria-controls="tabPane-COMMENTS"
+          aria-label="Comments"
           aria-selected={true}
-          className="BaseButton-root Tab-button Tab-primary Tab-active coral coral-tabBar-tab coral-tabBar-comments coral-tabBar-tab-active"
+          className="BaseButton-root Tab-button Tab-streamPrimary Tab-active coral coral-tabBar-tab coral-tabBar-comments coral-tabBar-tab-active"
           onBlur={[Function]}
           onClick={[Function]}
           onFocus={[Function]}
@@ -32,9 +33,13 @@ exports[`renders comment stream 1`] = `
           role="tab"
           type="button"
         >
-          <span>
-            Comments
-          </span>
+          <i
+            aria-hidden="true"
+            aria-label="Comments"
+            className="Icon-root Icon-sm"
+          >
+            mode_comment
+          </i>
         </button>
       </li>
     </ul>

diff --git a/src/core/client/ui/components/v2/Tabs/Tab.css b/src/core/client/ui/components/v2/Tabs/Tab.css
@@ -7,8 +7,6 @@ $tab-stream-default: var(--v2-colors-mono-500);
 .root {
   display: inline-block;
   list-style: none;
-  margin-right: var(--v2-spacing-3);
-  margin-bottom: -1px;
 }
 
 .button {
@@ -30,6 +28,9 @@ $tab-stream-default: var(--v2-colors-mono-500);
 }
 
 .default {
+  margin-right: var(--v2-spacing-3);
+  margin-bottom: -1px;
+
   font-family: var(--v2-font-family-primary);
   font-weight: var(--v2-font-weight-primary-semi-bold);
   color: $tab-default;
@@ -61,6 +62,9 @@ $tab-stream-default: var(--v2-colors-mono-500);
 }
 
 .secondary {
+  margin-right: var(--v2-spacing-3);
+  margin-bottom: -1px;
+
   font-family: var(--v2-font-family-primary);
   color: $tab-default;
   padding-bottom: var(--v2-spacing-2);
@@ -74,6 +78,9 @@ $tab-stream-default: var(--v2-colors-mono-500);
 }
 
 .streamSecondary {
+  margin-right: var(--v2-spacing-3);
+  margin-bottom: -1px;
+
   font-family: var(--v2-font-family-primary);
   color: $tab-stream-default;
   padding-bottom: var(--v2-spacing-2);
@@ -86,6 +93,61 @@ $tab-stream-default: var(--v2-colors-mono-500);
   }
 }
 
+.streamPrimary {
+  position: relative;
+
+  margin-right: 0px;
+  margin-bottom: -1px;
+
+  padding-top: var(--v2-spacing-3);
+  padding-bottom: var(--v2-spacing-3);
+  padding-left: var(--v2-spacing-6);
+  padding-right: var(--v2-spacing-6);
+
+  background: var(--v2-colors-grey-100);
+  border: 1px solid var(--v2-colors-grey-300);
+  border-bottom-width: 0px;
+
+  font-family: var(--v2-font-family-secondary);
+  font-style: normal;
+  font-weight: var(--v2-font-weight-secondary-regular);
+  font-size: var(--v2-font-size-4);
+  line-height: var(--v2-line-height-5);
+
+  color: var(--v2-colors-mono-500);
+
+  &.active {
+    z-index: 10;
+
+    background-color: var(--v2-colors-pure-white);
+    border-bottom: 0;
+    border-radius: 0;
+
+    color: var(--v2-colors-stream-blue-500);
+    font-weight: var(--v2-font-weight-secondary-bold);
+
+    overflow: visible;
+  }
+}
+
+.streamPrimary.active::before {
+  position: absolute;
+
+  top: -1px;
+  left: -1px;
+  width: calc(100% + 2px);
+  height: 4px;
+
+  background-color: var(--v2-colors-stream-blue-500);
+  color: var(--v2-colors-stream-blue-500);
+  content: "active";
+  overflow: hidden;
+}
+
+.root:not(:first-child) .streamPrimary {
+  border-left-width: 0px;
+}
+
 .uppercase {
   text-transform: uppercase;
 }
diff --git a/src/core/client/ui/components/v2/Tabs/Tab.tsx b/src/core/client/ui/components/v2/Tabs/Tab.tsx
@@ -27,13 +27,20 @@ export interface TabProps {
   /**
    * Style variant
    */
-  variant?: "primary" | "secondary" | "default" | "streamSecondary";
+  variant?:
+    | "primary"
+    | "secondary"
+    | "default"
+    | "streamSecondary"
+    | "streamPrimary";
   /**
    * Action taken on tab click
    */
   onTabClick?: (tabID: string) => void;
 
   uppercase?: boolean;
+
+  ariaLabel?: string;
 }
 
 class Tab extends React.Component<TabProps> {
@@ -52,6 +59,7 @@ class Tab extends React.Component<TabProps> {
       active,
       variant,
       uppercase,
+      ariaLabel,
     } = this.props;
 
     const buttonClassName = cn(
@@ -60,6 +68,7 @@ class Tab extends React.Component<TabProps> {
         [classes.primary]: variant === "primary",
         [classes.secondary]: variant === "secondary",
         [classes.streamSecondary]: variant === "streamSecondary",
+        [classes.streamPrimary]: variant === "streamPrimary",
         [classes.default]: variant === "default",
         [classes.uppercase]: uppercase,
         [classes.active]: active,
@@ -79,6 +88,7 @@ class Tab extends React.Component<TabProps> {
           aria-controls={`tabPane-${tabID}`}
           role="tab"
           aria-selected={active}
+          aria-label={ariaLabel}
           onClick={this.handleTabClick}
         >
           {children}

diff --git a/src/core/client/ui/components/v2/Tabs/TabBar.css b/src/core/client/ui/components/v2/Tabs/TabBar.css
@@ -23,3 +23,7 @@ $moderateCardTabSecondaryColor: var(--v2-palette-divider);
 .streamSecondary {
   border-bottom: 1px solid $moderateCardTabSecondaryColor;
 }
+
+.streamPrimary {
+  border-bottom: 1px solid $moderateCardTabPrimaryColor;
+}
diff --git a/src/core/client/ui/components/v2/Tabs/TabBar.tsx b/src/core/client/ui/components/v2/Tabs/TabBar.tsx
@@ -17,7 +17,12 @@ export interface TabBarProps {
   /**
    * Style variant
    */
-  variant?: "primary" | "secondary" | "default" | "streamSecondary";
+  variant?:
+    | "primary"
+    | "secondary"
+    | "default"
+    | "streamSecondary"
+    | "streamPrimary";
   /**
    * Active tab id/name
    */
@@ -50,6 +55,7 @@ const TabBar: FunctionComponent<TabBarProps> = (props) => {
         [classes.primary]: variant === "primary",
         [classes.secondary]: variant === "secondary",
         [classes.streamSecondary]: variant === "streamSecondary",
+        [classes.streamPrimary]: variant === "streamPrimary",
         [classes.default]: variant === "default",
       },
     ],