Merge pull request #226 from loopdeluce/2024-map-legend-style-guide-r…

…elease

2024 Style Guide Release - Map Legend and Controls

package.json

@@ -23,7 +23,8 @@
     "Jim Vermillion <[email protected]> (https://github.com/jimvermillion)",
     "Bao Dinh <[email protected]> (https://github.com/bdinh)",
     "Ben Hurst <[email protected]> (https://github.com/benbenbuhben)",
-    "Melissa Lafranchise <[email protected] (https://github.com/pulchrit)"
+    "Melissa Lafranchise <[email protected] (https://github.com/pulchrit)",
+    "Lucy Bullen <[email protected] (https://github.com/loopdeluce)"
   ],
   "repository": "https://github.com/ihmeuw/ihme-ui.git",
   "bugs": "https://github.com/ihmeuw/ihme-ui/issues",
@@ -49,14 +50,17 @@
     "postinstall": "patch-package"
   },
   "devDependencies": {
+    "@svgr/webpack": "^4.3.3",
     "autoprefixer": "^7.2.5",
     "babel-cli": "~6.26.0",
     "babel-core": "^6.26.3",
     "babel-eslint": "~7.1",
     "babel-istanbul": "~0.12.2",
     "babel-loader": "^7.1.2",
     "babel-plugin-css-modules-transform": "~1.2",
+    "babel-plugin-import": "1.13.5",
     "babel-plugin-lodash": "~3.2",
+    "babel-plugin-transform-imports": "^2.0.0",
     "babel-plugin-transform-object-rest-spread": "~6.22",
     "babel-plugin-transform-runtime": "~6.22",
     "babel-polyfill": "~6.22",
@@ -72,7 +76,7 @@
     "d3-request": "~0.5",
     "enzyme": "^3.9.0",
     "enzyme-adapter-react-16": "^1.15.2",
-    "eslint": "^5.14.1",
+    "eslint": "^2.13.1",
     "eslint-config-airbnb": "9.0.1",
     "eslint-plugin-import": "~1.8",
     "eslint-plugin-jsx-a11y": "~1.2",
@@ -89,6 +93,7 @@
     "request": "~2.87.0",
     "sinon": "^2.4.1",
     "style-loader": "^0.20.1",
+    "url-loader": "^1.1.2",
     "webpack": "^3.10.0"
   },
   "dependencies": {

src/ui/axis/src/axis.css

@@ -18,3 +18,10 @@
   stroke: black;
   shape-rendering: crispEdges;
 }
+
+.label {
+  color: #142027;
+  font-size: 12px;
+  font-weight: 700;
+  text-align: left;
+}

src/ui/axis/src/axis.jsx

@@ -177,7 +177,7 @@ export default class Axis extends React.PureComponent {
         <g ref={this.storeRef}></g>
         {label &&
           <text
-            className={labelClassName}
+            className={`${labelClassName} ${styles.label}`}
             style={labelStyle}
             x={labelPosition.x}
             y={labelPosition.y}

src/ui/choropleth/src/controls.css

@@ -1,34 +1,88 @@
 .wrapper {
   position: absolute;
   top: 1em;
-  left: 1em;
+  right: 1em;
 
+  background-color: #FFFEFC;
+  border: 1px solid #1E7B53;
+  color: #1E7B53;
+}
+
+.inner-wrapper {
   display: flex;
   flex-direction: column;
+  margin: 5px;
+}
+
+.title {
+  font-size: 12px;
+  font-weight: 700;
+  margin-bottom: 4px;
+  text-align: center;
+}
+
+.label {
+  font-size: 8px;
+  font-weight: 700;
+  line-height: 8.7px;
+  letter-spacing: 0.05em;
+  text-align: center;
+}
+
+.control {
+  height: 45px !important;
+  padding: 4px;
+  width: 45px;
+
+  background-color: #fffefc !important;
+  border: 1px solid #1e7b53 !important;
+  border-radius: 0px !important;
+  color: #1e7b53 !important;
+  fill: #1e7b53 !important;
+
+  justify-content: center !important;
+}
+
+.control:nth-child(3) {
+  border-top: 0px !important;
+}
+
+.control:hover, .control:focus, .control:not(:disabled):hover, .control:not(:disabled):focus {
+  background-color: #1e7b53 !important;
+  color: #fffefc !important;
+  fill: #fffefc !important;
+  cursor: pointer;
 }
 
-.wrapper button:first-child {
-  border-bottom-left-radius: 0;
-  border-bottom-right-radius: 0;
-  font-size: 20px;
+.control:active, .control:not(:disabled):active {
+  background-color: #3e525e !important;
+  border-color: #3e525e !important;
+  color: #fffefc !important;
+  cursor: pointer;
+  fill: #fffefc !important;
 }
 
-.wrapper button:nth-child(2) {
-  border-radius: 0;
-  font-size: 26px;
+.control:disabled {
+  background-color: #fffefc;
+  border-color: #677378;
+  color: #677378;
 }
 
-.wrapper button:last-child {
-  border-top-left-radius: 0;
-  border-top-right-radius: 0;
-  font-size: 26px;
+.icon {
+  height: 1em;
+  padding: 2px;
+  width: 1em;
 }
 
-.wrapper > .button {
-  /* override button's default justify-content: space-between */
+.reset {
+  margin-top: 3px;
+  display: flex;
+  flex-direction: column;
   justify-content: center;
-  height: 40px;
-  margin: 1px;
-  padding: 4px;
-  width: 40px;
+  padding: 5px;
+}
+
+.reset .icon {
+  height: 1.75em;
+  width: 1.75em;
 }

src/ui/choropleth/src/controls.jsx

@@ -2,34 +2,45 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 
+import { ReactComponent as ArrowsToCircle } from '../../../resources/arrows-to-circle.svg';
+import { ReactComponent as Plus } from '../../../resources/plus.svg';
+import { ReactComponent as Minus } from '../../../resources/minus.svg';
+
 import style from './controls.css';
 import Button from '../../button';
 import { CommonPropTypes } from '../../../utils';
 
 export default function Controls(props) {
   return (
     <div className={classNames(style.wrapper, props.className)} style={props.style}>
-      <Button
-        ariaLabel="Zoom in"
-        className={classNames(style.button, props.buttonClassName)}
-        onClick={props.onZoomIn}
-        style={props.buttonStyle}
-        text="+"
-      />
-      <Button
-        ariaLabel="Default zoom level"
-        className={classNames(style.button, props.buttonClassName)}
-        onClick={props.onZoomReset}
-        style={props.buttonStyle}
-        text="•"
-      />
-      <Button
-        ariaLabel="Zoom out"
-        className={classNames(style.button, props.buttonClassName)}
-        onClick={props.onZoomOut}
-        style={props.buttonStyle}
-        text="-"
-      />
+      <div className={classNames(style['inner-wrapper'])}>
+        <span className={classNames(style.title)}>Zoom</span>
+        <Button
+          ariaLabel="Zoom in"
+          className={classNames(style.button, props.buttonClassName, style.control)}
+          onClick={props.onZoomIn}
+          style={props.buttonStyle}
+        >
+          <Plus className={classNames(style.icon)} />
+        </ Button>
+        <Button
+          ariaLabel="Zoom out"
+          className={classNames(style.button, props.buttonClassName, style.control)}
+          onClick={props.onZoomOut}
+          style={props.buttonStyle}
+        >
+          <Minus className={classNames(style.icon)} />
+        </Button>
+        <Button
+          ariaLabel="Default zoom level"
+          className={classNames(style.button, props.buttonClassName, style.control, style.reset)}
+          onClick={props.onZoomReset}
+          style={props.buttonStyle}
+        >
+          <ArrowsToCircle className={classNames(style.icon)} />
+          <span className={classNames(style.label)}>Reset</span>
+        </Button>
+      </div>
     </div>
   );
 }

src/ui/compositions/choropleth-legend/demo/app.jsx

@@ -141,7 +141,7 @@ class App extends React.Component {
 </code></pre> */}
         <ChoroplethLegend
           margins={{
-            top: 50,
+            top: 70,
             right: 200,
             bottom: 50,
             left: 200

src/ui/compositions/choropleth-legend/src/choropleth-legend.css

@@ -1,3 +1,30 @@
+.legend-container {
+    overflow: visible !important;
+    width: 100%;
+}
+
+.title-container {
+    color: #142027;
+    display: flex;
+    flex-direction: column;
+    flex-wrap: wrap;
+    margin-bottom: 10px;
+}
+
+.title {
+    font-size: 19px;
+    font-weight: 600;
+    text-align: left;
+}
+
+.helper-text {
+    font-size: 14px;
+    font-weight: 400;
+    overflow-wrap: break-word;
+    text-align: left;
+    white-space: nowrap;
+}
+
 .density-circle {
     fill-opacity: 0.3;
 }

src/ui/compositions/choropleth-legend/src/choropleth-legend.jsx

@@ -90,6 +90,7 @@ export default class ChoroplethLegend extends React.PureComponent {
 
     return (
       <svg
+        className={styles['legend-container']}
         aria-label={`Legend showing values from ${sliderHandleFormat(rangeExtent[0])} to ${sliderHandleFormat(rangeExtent[1])}.`}
         height={height}
         width={width}
@@ -116,13 +117,13 @@ export default class ChoroplethLegend extends React.PureComponent {
           <g transform={`translate(0, ${10 + (5 * zoom)})`}>
             {
               !colorAccessor
-              && <LinearGradient
-                colors={colorSteps}
-                x1={x1}
-                x2={x2}
-                width={adjustedWidth}
-                height={sliderHeight}
-              />
+                && <LinearGradient
+                  colors={colorSteps}
+                  x1={x1}
+                  x2={x2}
+                  width={adjustedWidth}
+                  height={sliderHeight}
+                />
             }
             <Slider
               domain={domain}
@@ -138,7 +139,6 @@ export default class ChoroplethLegend extends React.PureComponent {
               zoom={zoom}
             />
             <XAxis
-              autoFilterTickValues
               label={unit}
               legendAriaHideTickMarks={legendAriaHideTickMarks}
               orientation="bottom"

src/ui/compositions/choropleth-legend/src/slider-handle.css

@@ -2,3 +2,8 @@
   cursor: ew-resize;
   pointer-events: all;
 }
+
+.handle:focus {
+  outline: 1px solid #1E7B53;
+  outline-offset: 2px;
+}