Convert HeaderButton to CSS modules

Author: shepmaster

ui/frontend/Header.tsx

@@ -69,7 +69,7 @@ const ExecuteButton: React.SFC = () => {
 
   return (
     <SegmentedButton isBuild onClick={execute}>
-      <HeaderButton rightIcon={<BuildIcon />}>
+      <HeaderButton bold rightIcon={<BuildIcon />}>
         {executionLabel}
       </HeaderButton>
     </SegmentedButton>

ui/frontend/HeaderButton.module.css

@@ -0,0 +1,50 @@
+.container {
+  display: flex;
+  height: 3em;
+  align-items: center;
+  padding: 0 1.25em;
+  font-weight: 600;
+  text-decoration: none;
+  text-transform: uppercase;
+  white-space: nowrap;
+}
+
+.bold {
+  font-weight: 700;
+}
+
+.expandable {
+  composes: container;
+  padding-right: 1em;
+}
+
+.hasLeftIcon {
+  composes: container;
+  padding-left: 1em;
+}
+
+.hasRightIcon {
+  composes: container;
+  padding-right: 1em;
+}
+
+.iconOnly {
+  composes: container;
+  padding: 0 0.75em;
+}
+
+.leftIcon {
+  margin-right: 0.5em;
+}
+
+.iconOnly .leftIcon {
+  margin-right: 0;
+}
+
+.drop {
+  margin-left: 0.75em;
+}
+
+.rightIcon {
+  margin-left: 0.75em;
+}

ui/frontend/HeaderButton.tsx

@@ -2,26 +2,30 @@ import React from 'react';
 
 import { ExpandableIcon } from './Icon';
 
+import styles from './HeaderButton.module.css';
+
 interface HeaderButtonProps {
+  bold?: boolean;
   icon?: React.ReactNode;
   rightIcon?: React.ReactNode;
   isExpandable?: boolean;
 }
 
-const HeaderButton: React.SFC<HeaderButtonProps> = ({ icon, rightIcon, isExpandable, children }) => {
-  const c = ['header-button'];
+const HeaderButton: React.SFC<HeaderButtonProps> = ({ bold, icon, rightIcon, isExpandable, children }) => {
+  const c = [styles.container];
 
-  if (icon) { c.push('header-button--has-left-icon'); }
-  if (rightIcon) { c.push('header-button--has-right-icon'); }
-  if (isExpandable) { c.push('header-button--expandable'); }
-  if ((icon || rightIcon) && !isExpandable && !children) { c.push('header-button--icon-only'); }
+  if (bold) { c.push(styles.bold); }
+  if (icon) { c.push(styles.hasLeftIcon); }
+  if (rightIcon) { c.push(styles.hasRightIcon); }
+  if (isExpandable) { c.push(styles.expandable); }
+  if ((icon || rightIcon) && !isExpandable && !children) { c.push(styles.iconOnly); }
 
   return (
     <div className={c.join(' ')}>
-      {icon && <div className="header-button__left-icon">{icon}</div>}
-      {children}
-      {rightIcon && <div className="header-button__right-icon">{rightIcon}</div>}
-      {isExpandable && <div className="header-button__drop"><ExpandableIcon /></div>}
+      {icon && <div className={styles.leftIcon}>{icon}</div>}
+      { children}
+      { rightIcon && <div className={styles.rightIcon}>{rightIcon}</div>}
+      { isExpandable && <div className={styles.drop}><ExpandableIcon /></div>}
     </div>
   );
 };

ui/frontend/index.scss

@@ -411,10 +411,6 @@ $header-transition: 0.2s ease-in-out;
         border-right-width: 0;
       }
 
-      .header-button {
-        font-weight: 700;
-      }
-
       &:hover {
         background: $rust-dark;
         color: white;
@@ -652,51 +648,6 @@ $header-transition: 0.2s ease-in-out;
   }
 }
 
-.header-button {
-  height: 3em;
-  padding: 0 1.25em;
-  display: flex;
-  align-items: center;
-
-  text-transform: uppercase;
-  text-decoration: none;
-  font-weight: 600;
-
-  white-space: nowrap;
-
-  &--expandable {
-    padding-right: 1em;
-  }
-
-  &--has-left-icon {
-    padding-left: 1em;
-  }
-
-  &--has-right-icon {
-    padding-right: 1em;
-  }
-
-  &--icon-only {
-    padding: 0 0.75em;
-  }
-
-  &__left-icon {
-    margin-right: 0.5em;
-  }
-
-  &--icon-only &__left-icon {
-    margin-right: 0;
-  }
-
-  &__drop {
-    margin-left: 0.75em;
-  }
-
-  &__right-icon {
-    margin-left: 0.75em;
-  }
-}
-
 .icon {
   display: block;
   fill: currentColor;