diff --git a/giraffe/README.md b/giraffe/README.md index 0752fb83..78a78b49 100644 --- a/giraffe/README.md +++ b/giraffe/README.md @@ -838,7 +838,7 @@ TableGraphLayerConfig uses the `fluxResponse` property from `config` as the data </div> - - **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). diff --git a/giraffe/package.json b/giraffe/package.json index bdf848dd..697a1415 100644 --- a/giraffe/package.json +++ b/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", diff --git a/giraffe/src/components/SingleStat/SingleStatLayer.scss b/giraffe/src/components/SingleStat/SingleStatLayer.scss new file mode 100644 index 00000000..0c700d0c --- /dev/null +++ b/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; +} diff --git a/giraffe/src/components/SingleStat/SingleStatLayer.scss.d.ts b/giraffe/src/components/SingleStat/SingleStatLayer.scss.d.ts new file mode 100644 index 00000000..8cdb0ed2 --- /dev/null +++ b/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; diff --git a/giraffe/src/components/SingleStat/SingleStatLayer.tsx b/giraffe/src/components/SingleStat/SingleStatLayer.tsx index c8a5457a..bea8f259 100644 --- a/giraffe/src/components/SingleStat/SingleStatLayer.tsx +++ b/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 => { 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 => { return (
`${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', + }, }) }