feat(project): button variants and calculated contrast color

- make button more reusable with ‘variant’ prop - give color a default value and make primary the cta version - calculate contrast colors - move the menubuttons to layout for readability
jwplayer · Jun 9, 2021 · 888094b · 888094b
1 parent 0e4ef25
commit 888094b
Show file tree

Hide file tree

Showing 16 changed files with 125 additions and 142 deletions.
diff --git a/src/components/Button/Button.module.scss b/src/components/Button/Button.module.scss
@@ -10,17 +10,15 @@
   min-height: 38px;
   padding: 0 16px;
 
-  color: var(--highlight-color, white);
+  color: theme.$btn-default-color;
+  background-color: theme.$btn-default-bg;
+
   font-family: theme.$body-alt-font-family;
   font-size: 16px;
   line-height: 18px;
   text-align: center;
   text-decoration: none;
-
-  background-color: theme.$btn-primary-bg;
-  border: 1px solid rgba(255, 255, 255, 0.3);
   border-radius: 4px;
-
   cursor: pointer;
   transition: background-color 0.1s ease, transform 0.1s ease;
 
@@ -32,32 +30,36 @@
   &.fullWidth {
     width: 100%;
   }
-
-  &.secondary {
-    background-color: theme.$btn-secondary-bg;
+  &.outlined {
+    border: 1px solid rgba(255, 255, 255, 0.3);
   }
 
+  &.primary,
   &.active {
-    color: var(--background-color, black);
-    background-color: var(--highlight-color, white);
-    border-color: var(--highlight-color, white);
+    color: var(--highlight-contrast-color, white);
+    background-color: var(--highlight-color, black);
+    &.outlined {
+      border-color: var(--highlight-color, white);
+    }
+  }
+  &.text:not(:hover):not(.active) {
+    background: none;
+    opacity: 0.7;
   }
 
   @media (hover: hover) and (pointer: fine) {
     &:hover:not(.active),
     &:focus:not(.active),
     &:active {
       z-index: 1;
-      background-color: rgba(variables.$black, 0.8);
-      border-color: var(--highlight-color, white);
       opacity: 1;
       transform: scale(1.1);
-      &.secondary {
-        background-color: theme.$btn-secondary-bg;
-      }
       &.fullWidth {
         transform: scale(1.04);
       }
+      &.outlined {
+        border-color: white;
+      }
     }
     &:focus.active {
       transform: scale(1.1);

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -3,37 +3,40 @@ import classNames from 'classnames';
 
 import styles from './Button.module.scss';
 
-type Color = 'primary' | 'secondary';
+type Color = 'default' | 'primary';
+
+type Variant = 'contained' | 'outlined' | 'text';
 
 type Props = {
   label: string;
   active?: boolean;
   color?: Color;
   fullWidth?: boolean;
   startIcon?: JSX.Element;
+  variant?: Variant;
   onClick: () => void;
 };
 const Button: React.FC<Props> = ({
   label,
-  color = 'primary',
+  color = 'default',
   startIcon,
   fullWidth = false,
   active = false,
+  variant = 'outlined',
   onClick,
-}: Props) => {
-  return (
-    <button
-      className={classNames(styles.button, {
-        [styles.active]: active,
-        [styles.secondary]: color === 'secondary',
-        [styles.fullWidth]: fullWidth,
-      })}
-      onClick={onClick}
-    >
-      {startIcon ? <div className={styles.startIcon}>{startIcon}</div> : null}
-      <span className={styles.buttonLabel}>{label}</span>
-    </button>
-  );
-};
+}: Props) => (
+  <button
+    className={classNames(styles.button, {
+      [styles.active]: active,
+      [styles[color]]: true,
+      [styles[variant]]: true,
+      [styles.fullWidth]: fullWidth,
+    })}
+    onClick={onClick}
+  >
+    {startIcon ? <div className={styles.startIcon}>{startIcon}</div> : null}
+    <span className={styles.buttonLabel}>{label}</span>
+  </button>
+);
 
 export default Button;
diff --git a/src/components/Button/__snapshots__/Button.test.tsx.snap b/src/components/Button/__snapshots__/Button.test.tsx.snap
@@ -3,7 +3,7 @@
 exports[`<Button> renders and matches snapshot 1`] = `
 <div>
   <button
-    class="button active"
+    class="button active undefined outlined"
   >
     <span>
       aa

diff --git a/src/components/Filter/__snapshots__/Filter.test.tsx.snap b/src/components/Filter/__snapshots__/Filter.test.tsx.snap
@@ -80,28 +80,28 @@ exports[`<Filter> renders Filter 1`] = `
     class="filterRow"
   >
     <button
-      class="button"
+      class="button undefined outlined"
     >
       <span>
         x
       </span>
     </button>
     <button
-      class="button"
+      class="button undefined outlined"
     >
       <span>
         y
       </span>
     </button>
     <button
-      class="button"
+      class="button undefined outlined"
     >
       <span>
         z
       </span>
     </button>
     <button
-      class="button"
+      class="button undefined outlined"
     >
       <span>
         bb

diff --git a/src/components/Header/Header.tsx b/src/components/Header/Header.tsx
@@ -1,7 +1,6 @@
-import React from 'react';
+import React, { ReactFragment } from 'react';
 import classNames from 'classnames';
 
-import ButtonLink from '../ButtonLink/ButtonLink';
 import Logo from '../Logo/Logo';
 import Menu from '../../icons/Menu';
 import IconButton from '../../components/IconButton/IconButton';
@@ -13,11 +12,11 @@ type TypeHeader = 'static' | 'fixed';
 type Props = {
   headerType?: TypeHeader;
   onMenuButtonClick: () => void;
-  playlistMenuItems: JSX.Element[];
   logoSrc?: string;
+  children?: ReactFragment;
 };
 
-const Header: React.FC<Props> = ({ headerType = 'static', onMenuButtonClick, playlistMenuItems, logoSrc }) => {
+const Header: React.FC<Props> = ({ headerType = 'static', onMenuButtonClick, children, logoSrc }) => {
   return (
     <header className={classNames(styles.header, styles[headerType])}>
       <div className={styles.container}>
@@ -28,9 +27,7 @@ const Header: React.FC<Props> = ({ headerType = 'static', onMenuButtonClick, pla
         </div>
         {logoSrc && <Logo src={logoSrc} />}
         <nav className={styles.nav} aria-label="menu">
-          <ButtonLink label="Home" to="/" />
-          {playlistMenuItems}
-          <ButtonLink label="Settings" to="/u" />
+          {children}
         </nav>
         <div className={styles.search}></div>
       </div>

diff --git a/src/components/Header/__snapshots__/Header.test.tsx.snap b/src/components/Header/__snapshots__/Header.test.tsx.snap
@@ -39,34 +39,7 @@ exports[`<Header /> renders header 1`] = `
       <nav
         aria-label="menu"
         class="nav"
-      >
-        <a
-          aria-current="page"
-          class="link active"
-          href="/"
-        >
-          <span>
-            Home
-          </span>
-        </a>
-        <a
-          aria-current="page"
-          class="link active"
-          href="/"
-        >
-          <span>
-            Home
-          </span>
-        </a>
-        <a
-          class="link"
-          href="/u"
-        >
-          <span>
-            Settings
-          </span>
-        </a>
-      </nav>
+      />
       <div
         class="search"
       />

diff --git a/src/components/Layout/Layout.module.scss b/src/components/Layout/Layout.module.scss
@@ -5,3 +5,8 @@
   width: 100vw;
   height: 100vh;
 }
+.divider {
+  width: 270px;
+  border-top: 1px solid rgba(variables.$white, 0.12);
+  opacity: 0.12;
+}
diff --git a/src/components/Layout/Layout.tsx b/src/components/Layout/Layout.tsx
@@ -23,25 +23,26 @@ const Layout: FC<LayoutProps> = ({ children }) => {
   return (
     <div className={styles.layout}>
       {hasDynamicBlur && blurImage && <DynamicBlur url={blurImage} transitionTime={1} debounceTime={350} />}
-      <Header
-        onMenuButtonClick={() => setSideBarOpen(true)}
-        playlistMenuItems={menu.map((item) => (
+      <Header onMenuButtonClick={() => setSideBarOpen(true)} logoSrc={assets.banner}>
+        <ButtonLink label="Home" to="/" />
+        {menu.map((item) => (
           <ButtonLink key={item.playlistId} label={item.label} to={`/p/${item.playlistId}`} />
         ))}
-        logoSrc={assets.banner}
-      />
-      <Sidebar
-        isOpen={sideBarOpen}
-        onClose={() => setSideBarOpen(false)}
-        playlistMenuItems={menu.map((item) => (
+        <ButtonLink label="Settings" to="/u" />
+      </Header>
+      <Sidebar isOpen={sideBarOpen} onClose={() => setSideBarOpen(false)}>
+        <MenuButton label="Home" to="/" tabIndex={sideBarOpen ? 0 : -1} />
+        {menu.map((item) => (
           <MenuButton
             key={item.playlistId}
             label={item.label}
             to={`/p/${item.playlistId}`}
             tabIndex={sideBarOpen ? 0 : -1}
           />
         ))}
-      />
+        <hr className={styles.divider} />
+        <MenuButton label="Settings" to="/u" tabIndex={sideBarOpen ? 0 : -1} />
+      </Sidebar>
       {children}
     </div>
   );

diff --git a/src/components/Sidebar/Sidebar.module.scss b/src/components/Sidebar/Sidebar.module.scss
@@ -46,15 +46,6 @@
   padding: variables.$base-spacing 0;
 }
 
-.divider {
-  position: relative;
-  left: -12px;
-  width: 270px;
-  max-width: 90vw;
-  border-top: 1px solid rgba(variables.$white, 0.12);
-  opacity: 0.12;
-}
-
 //
 // mediaQueries
 // --------------------------------

diff --git a/src/components/Sidebar/Sidebar.tsx b/src/components/Sidebar/Sidebar.tsx
@@ -1,7 +1,6 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, ReactFragment } from 'react';
 import classNames from 'classnames';
 
-import MenuButton from '../../components/MenuButton/MenuButton';
 import IconButton from '../../components/IconButton/IconButton';
 import Close from '../../icons/Close';
 
@@ -10,10 +9,10 @@ import styles from './Sidebar.module.scss';
 type SidebarProps = {
   isOpen: boolean;
   onClose: () => void;
-  playlistMenuItems: JSX.Element[];
+  children?: ReactFragment;
 };
 
-const Sidebar: React.FC<SidebarProps> = ({ isOpen, onClose, playlistMenuItems }) => {
+const Sidebar: React.FC<SidebarProps> = ({ isOpen, onClose, children }) => {
   return (
     <Fragment>
       <div
@@ -33,10 +32,7 @@ const Sidebar: React.FC<SidebarProps> = ({ isOpen, onClose, playlistMenuItems })
           </IconButton>
         </div>
         <nav className={styles.group} onClick={onClose}>
-          <MenuButton label="Home" to="/" tabIndex={isOpen ? 0 : -1} />
-          {playlistMenuItems}
-          <hr className={styles.divider} />
-          <MenuButton label="Settings" to="/u" tabIndex={isOpen ? 0 : -1} />
+          {children}
         </nav>
       </div>
     </Fragment>

diff --git a/src/components/Sidebar/__snapshots__/SideBar.test.tsx.snap b/src/components/Sidebar/__snapshots__/SideBar.test.tsx.snap
@@ -38,39 +38,7 @@ exports[`<SideBar /> renders sideBar 1`] = `
     </div>
     <nav
       class="group"
-    >
-      <a
-        aria-current="page"
-        class="menuButton active"
-        href="/"
-        tabindex="0"
-      >
-        <span>
-          Home
-        </span>
-      </a>
-      <a
-        aria-current="page"
-        class="link active"
-        href="/"
-      >
-        <span>
-          Home
-        </span>
-      </a>
-      <hr
-        class="divider"
-      />
-      <a
-        class="menuButton"
-        href="/u"
-        tabindex="0"
-      >
-        <span>
-          Settings
-        </span>
-      </a>
-    </nav>
+    />
   </div>
 </div>
 `;
diff --git a/src/components/Video/Video.tsx b/src/components/Video/Video.tsx
@@ -56,7 +56,8 @@ const Video: React.FC<Props> = ({ item, play, startPlay, goBack, posterFading, r
           <CollapsibleText text={item.description} className={styles.description} maxHeight={isMobile ? 50 : 'none'} />
           <div className={styles.playButton}>
             <Button
-              color="secondary"
+              color="primary"
+              variant="contained"
               label={'Start watching'}
               startIcon={<Play />}
               onClick={startPlay}
-Original file line number
+Diff line change
@@ Expand Up / @@ -3,7 +3,7 @@ @@
     exports[`<Button> renders and matches snapshot 1`] = `
     <div>
       <button
-        class="button active"
+        class="button active undefined outlined"
       >
         <span>
           aa
@@ Expand Down @@