@buildcanada/charts 0.2.2 → 0.3.2

package/src/grapher/controls/ActionButtons.tsx

@@ -17,12 +17,9 @@ import {
     shareUsingShareApi,
     shouldShareUsingShareApi,
 } from "./ShareMenu.js"
-import { Bounds, Tippy } from "../../utils/index.js"
+import { Tippy } from "../../utils/index.js"
 import classNames from "classnames"
-import {
-    DEFAULT_GRAPHER_BOUNDS,
-    GrapherModal,
-} from "../core/GrapherConstants.js"
+import { GrapherModal } from "../core/GrapherConstants.js"
 import { DownloadModalTabName } from "../modal/DownloadModal.js"
 
 export interface ActionButtonsManager extends ShareMenuManager {
@@ -41,15 +38,9 @@ export interface ActionButtonsManager extends ShareMenuManager {
 
 // keep in sync with sass variables in ActionButtons.scss
 const BUTTON_HEIGHT = 32
-const PADDING_BETWEEN_BUTTONS = 8
-const PADDING_BETWEEN_ICON_AND_LABEL = 8
-const PADDING_X = 12
-
-const BUTTON_WIDTH_ICON_ONLY = BUTTON_HEIGHT
 
 interface ActionButtonsProps {
     manager: ActionButtonsManager
-    maxWidth?: number
 }
 
 @observer
@@ -63,165 +54,15 @@ export class ActionButtons extends React.Component<ActionButtonsProps> {
         return this.props.manager
     }
 
-    @computed protected get maxWidth(): number {
-        return this.props.maxWidth ?? DEFAULT_GRAPHER_BOUNDS.width
-    }
-
     @computed get height(): number {
         return BUTTON_HEIGHT
     }
 
-    @computed private get widthWithButtonLabels(): number {
-        const {
-            buttonCount,
-            hasDownloadButton,
-            hasDonateButton,
-            hasShareButton,
-            hasFullScreenButton,
-            hasExploreTheDataButton,
-            downloadButtonWithLabelWidth,
-            donateButtonWithLabelWidth,
-            shareButtonWithLabelWidth,
-            fullScreenButtonWithLabelWidth,
-            exploreTheDataButtonWithLabelWidth,
-        } = this
-
-        let width = 0
-        if (hasDownloadButton) {
-            width += downloadButtonWithLabelWidth
-        }
-        if (hasShareButton) {
-            width += shareButtonWithLabelWidth
-        }
-        if (hasFullScreenButton) {
-            width += fullScreenButtonWithLabelWidth
-        }
-        if (hasDonateButton) {
-            width += donateButtonWithLabelWidth
-        }
-        if (hasExploreTheDataButton) {
-            width += exploreTheDataButtonWithLabelWidth
-        }
-
-        return width + (buttonCount - 1) * PADDING_BETWEEN_BUTTONS
-    }
-
-    @computed get widthWithIconsOnly(): number {
-        const {
-            buttonCount,
-            hasExploreTheDataButton,
-            exploreTheDataButtonWidth,
-        } = this
-
-        let width = 0
-        let remainingButtonCount = buttonCount
-
-        // When shown, the explore the data button always has a label
-        if (hasExploreTheDataButton) {
-            width += exploreTheDataButtonWidth
-            remainingButtonCount--
-        }
-        width += remainingButtonCount * BUTTON_WIDTH_ICON_ONLY
-        width += (buttonCount - 1) * PADDING_BETWEEN_BUTTONS
-
-        return width
-    }
-
-    @computed get showButtonLabels(): boolean {
-        const { maxWidth, widthWithButtonLabels } = this
-        return widthWithButtonLabels <= maxWidth
-    }
-
-    @computed get width(): number {
-        const { showButtonLabels, widthWithButtonLabels, widthWithIconsOnly } =
-            this
-        return showButtonLabels ? widthWithButtonLabels : widthWithIconsOnly
-    }
-
-    private static computeButtonWidth(label: string): number {
-        const labelWidth = Bounds.forText(label, { fontSize: 13 }).width
-        return (
-            2 * PADDING_X +
-            12 + // icon width
-            PADDING_BETWEEN_ICON_AND_LABEL +
-            labelWidth
-        )
-    }
-
-    @computed private get downloadButtonWithLabelWidth(): number {
-        return ActionButtons.computeButtonWidth("Download")
-    }
-
-    @computed private get shareButtonWithLabelWidth(): number {
-        return ActionButtons.computeButtonWidth("Share")
-    }
-
     @computed private get fullScreenButtonLabel(): string {
         const { isInFullScreenMode } = this.manager
         return isInFullScreenMode ? "Exit full-screen" : "Enter full-screen"
     }
 
-    @computed private get fullScreenButtonWithLabelWidth(): number {
-        return ActionButtons.computeButtonWidth(this.fullScreenButtonLabel)
-    }
-
-    @computed private get donateButtonWithLabelWidth(): number {
-        return ActionButtons.computeButtonWidth("Donate")
-    }
-
-    @computed private get exploreTheDataButtonWithLabelWidth(): number {
-        return ActionButtons.computeButtonWidth("Explore the data")
-    }
-
-    @computed private get downloadButtonWidth(): number {
-        const {
-            hasDownloadButton,
-            showButtonLabels,
-            downloadButtonWithLabelWidth,
-        } = this
-        if (!hasDownloadButton) return 0
-        if (!showButtonLabels) return BUTTON_WIDTH_ICON_ONLY
-        return downloadButtonWithLabelWidth
-    }
-
-    @computed private get shareButtonWidth(): number {
-        const { hasShareButton, showButtonLabels, shareButtonWithLabelWidth } =
-            this
-        if (!hasShareButton) return 0
-        if (!showButtonLabels) return BUTTON_WIDTH_ICON_ONLY
-        return shareButtonWithLabelWidth
-    }
-
-    @computed private get fullScreenButtonWidth(): number {
-        const {
-            hasFullScreenButton,
-            showButtonLabels,
-            fullScreenButtonWithLabelWidth,
-        } = this
-        if (!hasFullScreenButton) return 0
-        if (!showButtonLabels) return BUTTON_WIDTH_ICON_ONLY
-        return fullScreenButtonWithLabelWidth
-    }
-
-    @computed private get donateButtonWidth(): number {
-        const {
-            hasDonateButton,
-            showButtonLabels,
-            donateButtonWithLabelWidth,
-        } = this
-        if (!hasDonateButton) return 0
-        if (!showButtonLabels) return BUTTON_WIDTH_ICON_ONLY
-        return donateButtonWithLabelWidth
-    }
-
-    // the "Explore the data" button is never shown without a label
-    @computed private get exploreTheDataButtonWidth(): number {
-        const { hasExploreTheDataButton, exploreTheDataButtonWithLabelWidth } =
-            this
-        if (!hasExploreTheDataButton) return 0
-        return exploreTheDataButtonWithLabelWidth
-    }
-
     @action.bound toggleShareMenu(): void {
         if (shouldShareUsingShareApi(this.manager)) {
             void shareUsingShareApi(this.manager)
@@ -268,29 +109,12 @@ export class ActionButtons extends React.Component<ActionButtonsProps> {
         return !manager.hideExploreTheDataButton || !!manager.isInIFrame
     }
 
-    @computed private get buttonCount(): number {
-        let count = 0
-        if (this.hasDownloadButton) count += 1
-        if (this.hasShareButton) count += 1
-        if (this.hasFullScreenButton) count += 1
-        if (this.hasDonateButton) count += 1
-        if (this.hasExploreTheDataButton) count += 1
-        return count
-    }
-
     private renderShareMenu(): React.ReactElement {
-        // distance between the right edge of the share button and the inner border of the frame
-        let right = 0
-        if (this.hasFullScreenButton)
-            right += PADDING_BETWEEN_BUTTONS + this.fullScreenButtonWidth
-        if (this.hasExploreTheDataButton)
-            right += PADDING_BETWEEN_BUTTONS + this.exploreTheDataButtonWidth
-
         return (
             <ShareMenu
                 manager={this.manager}
                 onDismiss={this.toggleShareMenu}
-                right={right}
+                right={0}
             />
         )
     }
@@ -300,17 +124,14 @@ export class ActionButtons extends React.Component<ActionButtonsProps> {
         const { isShareMenuActive } = manager
 
         return (
-            <div
-                className="ActionButtons"
-                style={{ height: this.height, width: this.width }}
-            >
+            <div className="ActionButtons">
                 <ul>
                     {this.hasDownloadButton && (
-                        <li style={{ width: this.downloadButtonWidth }}>
+                        <li>
                             <ActionButton
                                 label="Download"
                                 dataTrackNote="chart_click_download"
-                                showLabel={this.showButtonLabels}
+                                showLabel={true}
                                 icon={faDownload}
                                 onClick={action((e): void => {
                                     this.openDownloadModal()
@@ -320,11 +141,11 @@ export class ActionButtons extends React.Component<ActionButtonsProps> {
                         </li>
                     )}
                     {this.hasShareButton && (
-                        <li style={{ width: this.shareButtonWidth }}>
+                        <li>
                             <ActionButton
                                 label="Share"
                                 dataTrackNote="chart_click_share"
-                                showLabel={this.showButtonLabels}
+                                showLabel={true}
                                 icon={faShareNodes}
                                 onClick={action((e): void => {
                                     this.toggleShareMenu()
@@ -336,11 +157,11 @@ export class ActionButtons extends React.Component<ActionButtonsProps> {
                         </li>
                     )}
                     {this.hasFullScreenButton && (
-                        <li style={{ width: this.fullScreenButtonWidth }}>
+                        <li>
                             <ActionButton
                                 label={this.fullScreenButtonLabel}
                                 dataTrackNote="chart_click_fullscreen"
-                                showLabel={this.showButtonLabels}
+                                showLabel={true}
                                 icon={
                                     manager.isInFullScreenMode
                                         ? faCompress
@@ -351,19 +172,19 @@ export class ActionButtons extends React.Component<ActionButtonsProps> {
                         </li>
                     )}
                     {this.hasDonateButton && (
-                        <li style={{ width: this.donateButtonWidth }}>
+                        <li>
                             <ActionButton
                                 className="ActionButton--donate"
                                 label="Donate"
                                 dataTrackNote="chart_click_donate"
-                                showLabel={this.showButtonLabels}
+                                showLabel={true}
                                 icon={faHeart}
                                 href="https://ourworldindata.org/donate"
                             />
                         </li>
                     )}
                     {this.hasExploreTheDataButton && (
-                        <li style={{ width: this.exploreTheDataButtonWidth }}>
+                        <li>
                             <ActionButton
                                 label="Explore the data"
                                 dataTrackNote="chart_click_exploredata"

package/src/grapher/controls/ContentSwitchers.scss

@@ -1,32 +1,41 @@
-$active-icon: $blue-50;
+/*******************************************************************************
+ * Content Switchers
+ *
+ * Chart type switcher tabs (Line, Bar, Map, etc.)
+ * Uses Build Canada design system colors.
+ ******************************************************************************/
+
+$active-icon: $white;
 
 @at-root {
     .ContentSwitchers__OverflowMenu {
-        border-radius: 4px;
-        background-color: #fff;
-        box-shadow: 0px 4px 40px 0px rgba(0, 0, 0, 0.06);
+        border-radius: 0;
+        background-color: $white;
+        box-shadow: 0px 4px 20px 0px rgba(39, 39, 39, 0.15);
+        border: 1px solid $gray-20;
     }
 
     .ContentSwitchers__OverflowMenuItem {
         @include grapher_label-2-medium;
 
-        margin: 4px 0;
+        margin: 0;
         padding: 0 16px;
         height: $controlRowHeight;
         display: flex;
         align-items: center;
-        color: $light-text;
+        color: $charcoal;
         cursor: pointer;
         width: 100%;
-        background-color: #fff;
+        background-color: $white;
+        transition: all 150ms ease;
 
         &:hover {
             background-color: $gray-10;
         }
 
         &:focus-visible {
-            color: $active-text;
-            background-color: $active-fill;
+            color: $white;
+            background-color: $auburn-500;
 
             svg {
                 color: $active-icon;
@@ -44,7 +53,7 @@ $active-icon: $blue-50;
         }
 
         svg {
-            color: $gray-60;
+            color: $gray-50;
 
             &.custom-icon {
                 --size: $icon-width;
@@ -77,14 +86,14 @@ $active-icon: $blue-50;
 
         // Don't show as 'active' when clicked
         &[data-selected] {
-            background: #fff;
-            color: $light-text;
+            background: $white;
+            color: $charcoal;
         }
     }
 
     .Tabs__Tab.active {
-        color: $active-text;
-        background-color: $active-fill;
+        color: $white;
+        background-color: $auburn-500;
 
         svg {
             color: $active-icon;

package/src/grapher/controls/Controls.scss

@@ -1,13 +1,20 @@
+/*******************************************************************************
+ * Controls
+ *
+ * Menu toggle buttons and control row styling.
+ * Uses Build Canada design system colors.
+ ******************************************************************************/
+
 $light-stroke: $gray-20;
-$dark-stroke: #2d2d2d;
-$active-stroke: $blue-30;
+$dark-stroke: $charcoal;
+$active-stroke: $cerulean-500;
 
-$light-fill: $gray-30;
-$active-fill: $blue-20;
+$light-fill: $white;
+$active-fill: $cerulean-100;
 $hover-fill: $gray-10;
-$selected-fill: #c7ced7;
+$selected-fill: $cerulean-200;
 
-$active-switch: $blue-50;
+$active-switch: $cerulean-500;
 
 $medium: 400;
 $bold: 700;
@@ -24,14 +31,16 @@ nav.controlsRow .controls {
 
     button.menu-toggle {
         font: $medium 13px/16px $lato;
-        letter-spacing: 0.01em;
+        letter-spacing: 0.02em;
         display: flex;
         align-items: center;
         border: 1px solid $light-stroke;
-        border-radius: 4px;
-        padding: 7px;
-        color: $dark-text;
+        border-radius: 0;
+        padding: 7px 12px;
+        color: $charcoal;
         white-space: nowrap;
+        background-color: $white;
+        transition: all 150ms ease;
 
         &:hover {
             background: $hover-fill;
@@ -40,14 +49,19 @@ nav.controlsRow .controls {
 
         &.active,
         &:active {
-            color: $active-text;
+            color: $cerulean-900;
             background: $active-fill;
-            border: 1px solid $active-fill;
+            border-color: $active-stroke;
+        }
+
+        &:focus-visible {
+            outline: 2px solid $auburn;
+            outline-offset: 2px;
         }
 
         svg {
             height: 12px;
-            margin-right: 5px;
+            margin-right: 6px;
             vertical-align: bottom;
         }
 
@@ -57,17 +71,15 @@ nav.controlsRow .controls {
     }
 }
 
-//
-// Make buttons narrower by omitting their text labels as the viewport gets narrower
-// use the .GrapherComponentSemiNarrow if necessary but allow container queries to
-// collapse labels in two steps on browsers that support them
-//
-// TODO: the measurement and label-hiding logic will have to move to js anyway once the
-//       number of chart buttons becomes variable and the settings button can be replaced
-//       by a single control widget ‘promoted’ from within the drawer
-//
+/*******************************************************************************
+ * Responsive Label Hiding
+ *
+ * Make buttons narrower by omitting their text labels as the viewport
+ * gets narrower.
+ ******************************************************************************/
+
 @at-root {
-    // collapse both the settings and entity selector labels down at the semi-narrow breakpoint
+    // Collapse both settings and entity selector labels at semi-narrow breakpoint
     .GrapherComponentSemiNarrow {
         nav.controlsRow .settings-menu button.menu-toggle {
             min-height: $control-row-height;
@@ -86,8 +98,8 @@ nav.controlsRow .controls {
     }
 }
 
-@container grapher (max-width:575px) {
-    // collapse the Settings toggle down to just an icon on small screens
+@container grapher (max-width: 575px) {
+    // Collapse Settings toggle to just an icon on small screens
     nav.controlsRow .settings-menu button.menu-toggle {
         min-height: $control-row-height;
         svg {
@@ -98,7 +110,7 @@ nav.controlsRow .controls {
         }
     }
 
-    // undo the .GrapherComponentSemiNarrow hiding until next container query
+    // Undo the .GrapherComponentSemiNarrow hiding until next container query
     nav.controlsRow .entity-selection-menu button.menu-toggle {
         label span {
             display: inline;
@@ -106,8 +118,8 @@ nav.controlsRow .controls {
     }
 }
 
-@container grapher (max-width:675px) {
-    // hide the entity name in the Edit/Select/Switch button
+@container grapher (max-width: 675px) {
+    // Hide entity name in Edit/Select/Switch button (chart controls)
     nav.controlsRow .chart-controls .entity-selection-menu button.menu-toggle {
         label span {
             display: none;
@@ -115,8 +127,8 @@ nav.controlsRow .controls {
     }
 }
 
-@container grapher (max-width:725px) {
-    // hide the entity name in the Edit/Select/Switch button
+@container grapher (max-width: 725px) {
+    // Hide entity name in Edit/Select/Switch button (map controls)
     nav.controlsRow .map-controls .entity-selection-menu button.menu-toggle {
         label span {
             display: none;
@@ -124,28 +136,30 @@ nav.controlsRow .controls {
     }
 }
 
-@container grapher (max-width:500px) {
-    // hide labels on smaller screens
+@container grapher (max-width: 500px) {
+    // Hide labels on smaller screens
     .ContentSwitchers .Tabs__Tab .label {
         display: none;
     }
 }
 
-// reduce the horizontal padding of a content switcher tab based on grapher's size
-@container grapher (max-width:725px) {
+// Reduce horizontal padding of content switcher tab based on grapher's size
+@container grapher (max-width: 725px) {
     .ContentSwitchers .Tabs__Tab {
         --tab-padding: 12px;
     }
 }
-@container grapher (max-width:335px) {
+
+@container grapher (max-width: 335px) {
     .ContentSwitchers .Tabs__Tab {
         --tab-padding: 8px;
     }
 }
 
-//
-// correct for style bleeds in admin
-//
+/*******************************************************************************
+ * Admin Style Corrections
+ ******************************************************************************/
+
 @at-root {
     .AdminApp {
         nav.controlsRow .controls button.menu-toggle label {