fix: put Single Stat default styles into stylesheet to prevent font f…

…lashing (#822)

giraffe/README.md

@@ -838,7 +838,7 @@ TableGraphLayerConfig uses the `fluxResponse` property from `config` as the data
       </div>
     </pre>
 
-  - **style**: _Object. Optional. Recommendation: do not include._ An object containing the key-value pairs used for inline styling `.giraffe-layer-single-stat` by setting its [style property](https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style). If used, please be aware of existing default styles that may need to be overridden. `backgroundColor` cannot be overridden and is controlled by the **backgroundColor** option (see above). See the `SINGLE_STAT_DEFAULT_STYLE` [here](./src/constants/singleStatStyles.ts).
+  - **style**: _Object. Optional. Recommendation: do not include._ An object containing the key-value pairs used for inline styling `.giraffe-layer-single-stat` by setting its [style property](https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style). If used, please be aware of existing default styles that may need to be overridden. `backgroundColor` cannot be overridden and is controlled by the **backgroundColor** option (see above).
 
   - **resizerStyle**: _Object. Optional. Recommendation: do not include._ An object containing the key-value pairs used for inline styling `.giraffe-single-stat--resizer` by setting its [style property](https://developer.mozilla.org/en-US/docs/Web/API/ElementCSSInlineStyle/style). If used, please be aware of existing default styles that may need to be overridden. See the `SINGLE_STAT_RESIZER_DEFAULT_STYLE` [here](./src/constants/singleStatStyles.ts).
 

giraffe/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@influxdata/giraffe",
-  "version": "2.37.1",
+  "version": "2.38.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "license": "MIT",

giraffe/src/components/SingleStat/SingleStatLayer.scss

@@ -0,0 +1,60 @@
+@import '../../style/variables.scss';
+
+@font-face {
+  font-family: 'Proxima Nova';
+  font-style: normal;
+  font-weight: 300;
+  src: url('../../fonts/ProximaNova-Light.woff2') format('woff2');
+  font-display: block;
+}
+@font-face {
+  font-family: 'Proxima Nova';
+  font-style: normal;
+  font-weight: 400;
+  src: url('../../fonts/ProximaNova-Regular.woff2') format('woff2');
+  font-display: block;
+}
+@font-face {
+  font-family: 'Proxima Nova';
+  font-style: normal;
+  font-weight: 500;
+  src: url('../../fonts/ProximaNova-Medium.woff2') format('woff2');
+  font-display: block;
+}
+@font-face {
+  font-family: 'Proxima Nova';
+  font-style: normal;
+  font-weight: 700;
+  src: url('../../fonts/ProximaNova-Bold.woff2') format('woff2');
+  font-display: block;
+}
+@font-face {
+  font-family: 'Proxima Nova';
+  font-style: normal;
+  font-weight: 900;
+  src: url('../../fonts/ProximaNova-Black.woff2') format('woff2');
+  font-display: block;
+}
+
+.giraffe-layer-single-stat {
+  align-items: center;
+  border-radius: 4px;
+  bottom: 0;
+  color: $c-laser;
+  cursor: text;
+  display: flex;
+  font-family: 'Proxima Nova', Helvetica, Arial, Tahoma, Verdana, sans-serif;
+  height: 100%;
+  justify-content: center;
+  left: 0;
+  overflow: hidden;
+  padding: 8px;
+  position: absolute;
+  right: 0;
+  top: 0;
+  width: 100%;
+  -moz-user-select: text;
+  -ms-user-select: text;
+  -webkit-user-select: text;
+  user-select: text;
+}

giraffe/src/components/SingleStat/SingleStatLayer.scss.d.ts

@@ -0,0 +1,7 @@
+// This file is automatically generated.
+// Please do not change this file!
+interface CssExports {
+  'giraffe-layer-single-stat': string;
+}
+export const cssExports: CssExports;
+export default cssExports;

giraffe/src/components/SingleStat/SingleStatLayer.tsx

@@ -1,6 +1,6 @@
 import React, {FunctionComponent} from 'react'
+import classnames from 'classnames'
 import {
-  SINGLE_STAT_DEFAULT_STYLE,
   SINGLE_STAT_DEFAULT_TEST_ID,
   SINGLE_STAT_RESIZER_DEFAULT_STYLE,
   SINGLE_STAT_SVG_DEFAULT_ATTRIBUTES,
@@ -10,6 +10,10 @@ import {
 import {SingleStatLayerConfig} from '../../types'
 import {formatStatValue} from '../../utils/formatStatValue'
 
+import styles from './SingleStatLayer.scss'
+
+import {styleReducer} from '../../utils/styleReducer'
+
 interface Props {
   stat: number
   config: SingleStatLayerConfig
@@ -36,6 +40,12 @@ export const SingleStatLayer: FunctionComponent<Props> = props => {
     textOpacity = 1,
   } = config
 
+  const singleStatLayerClasses = styleReducer(
+    styles,
+    'giraffe-layer giraffe-layer-single-stat',
+    classnames('giraffe-layer-single-stat')
+  )
+
   const formattedValue = formatStatValue(stat, {decimalPlaces, prefix, suffix})
 
   let viewBox = getDefaultViewBox(formattedValue)
@@ -49,10 +59,9 @@ export const SingleStatLayer: FunctionComponent<Props> = props => {
 
   return (
     <div
-      className="giraffe-layer giraffe-layer-single-stat"
+      className={singleStatLayerClasses}
       data-testid={testID}
       style={{
-        ...SINGLE_STAT_DEFAULT_STYLE,
         ...style,
         backgroundColor: `${backgroundColor}`,
       }}

giraffe/src/style/singleStatStyles.ts

@@ -3,29 +3,6 @@ export const LASER = '#00C9FF'
 
 export const SINGLE_STAT_DEFAULT_TEST_ID = 'giraffe-layer-single-stat'
 
-export const SINGLE_STAT_DEFAULT_STYLE: CSSProperties = {
-  alignItems: 'center',
-  borderRadius: '4px',
-  bottom: 0,
-  color: LASER,
-  cursor: 'text',
-  display: 'flex',
-  fontFamily: '"Proxima Nova", Helvetica, Arial, Tahoma, Verdana, sans-serif',
-  height: '100%',
-  justifyContent: 'center',
-  left: 0,
-  MozUserSelect: 'text',
-  msUserSelect: 'text',
-  overflow: 'hidden',
-  padding: '8px',
-  position: 'absolute',
-  right: 0,
-  top: 0,
-  userSelect: 'text',
-  WebkitUserSelect: 'text',
-  width: '100%',
-}
-
 export const SINGLE_STAT_RESIZER_DEFAULT_STYLE: CSSProperties = {
   overflow: 'hidden',
   width: '100%',

giraffe/src/style/variables.scss

@@ -41,6 +41,7 @@ $c-amethyst: #8e1fc3;
 $c-dreamsicle: #ff8564;
 $c-emerald: #006f49;
 $c-fire: #dc4e58;
+$c-laser: #00c9ff;
 $c-ocean: #066fc5;
 $c-pineapple: #ffb94a;
 $c-pool: #00a3ff;

stories/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@influxdata/giraffe-stories",
-  "version": "2.37.1",
+  "version": "2.38.0",
   "license": "MIT",
   "repository": {
     "type": "git",

stories/src/singleStat.stories.tsx

@@ -77,6 +77,13 @@ storiesOf('Single Stat', module)
             viewBox: stat =>
               `${viewBoxX} ${viewBoxY} ${stat.length * viewBoxWidth} 100`,
           },
+          svgTextStyle: {
+            fontSize: '100',
+            fontWeight: 'lighter',
+            dominantBaseline: 'middle',
+            textAnchor: 'middle',
+            letterSpacing: '-0.05em',
+          },
         },
       ],
     }
@@ -133,6 +140,13 @@ storiesOf('Single Stat', module)
             viewBox: stat =>
               `${viewBoxX} ${viewBoxY} ${stat.length * viewBoxWidth} 100`,
           },
+          svgTextStyle: {
+            fontSize: '100',
+            fontWeight: 'lighter',
+            dominantBaseline: 'middle',
+            textAnchor: 'middle',
+            letterSpacing: '-0.05em',
+          },
         },
       ],
     }
@@ -249,6 +263,13 @@ storiesOf('Single Stat', module)
             `${viewBoxX} ${viewBoxY} ${stat.length * viewBoxWidth} 100`,
         },
         svgStyle: SINGLE_STAT_SVG_NO_USER_SELECT,
+        svgTextStyle: {
+          fontSize: '100',
+          fontWeight: 'lighter',
+          dominantBaseline: 'middle',
+          textAnchor: 'middle',
+          letterSpacing: '-0.05em',
+        },
       })
     }