diff --git a/frontend/.babelrc b/frontend/.babelrc index 47d8b515..db5f9510 100644 --- a/frontend/.babelrc +++ b/frontend/.babelrc @@ -12,7 +12,7 @@ ], "plugins": [ ["inline-react-svg", { - "ignorePattern": "assets/fonts" + "ignorePattern": "libre-franklin" }], "transform-class-properties", ["transform-object-rest-spread", { diff --git a/frontend/src/components/header/index.js b/frontend/src/components/header/index.js index e23852e1..2909b8ad 100644 --- a/frontend/src/components/header/index.js +++ b/frontend/src/components/header/index.js @@ -9,7 +9,7 @@ import Logo from '../../resources/logo.svg'; import PropTypes from '@root/prop-types'; import Row from '@ui/components/row'; import Tooltip from '@ui/components/tooltip'; -import { pseudoEl } from '@ui/shared/composers'; +import { pseudoEl, typography } from '@ui/shared/composers'; import { colors } from '@ui/shared/constants'; const borderSide = props => props.toggled @@ -65,6 +65,9 @@ const EmptyButton = styled.button` background: none; border: none; padding-right: ${remcalc(20)}; + + ${typography.libreFranklin}; + ${typography.normal}; `; const StyledAvatar = styled(Avatar)` diff --git a/frontend/src/components/monitors/index.js b/frontend/src/components/monitors/index.js index ee0f7952..87705708 100644 --- a/frontend/src/components/monitors/index.js +++ b/frontend/src/components/monitors/index.js @@ -3,7 +3,8 @@ import { FormattedMessage } from 'react-intl'; import styled from 'styled-components'; import { colors } from '@ui/shared/constants'; -import Close from '@ui/components/close'; +import { typography } from '@ui/shared/composers'; +import Close from '@ui/components/icons/close'; import { remcalc } from '@ui/shared/functions'; import Li from '@ui/components/horizontal-list/li'; import Modal from '@ui/components/modal'; @@ -11,19 +12,17 @@ import PropTypes from '@root/prop-types'; import Ul from '@ui/components/horizontal-list/ul'; const H1 = styled.h1` + ${typography.semibold}; font-size: ${remcalc(26)} !important; - font-weight: 600; - font-style: normal; - font-stretch: normal; + color: ${colors.brandSecondaryColor}; margin: ${remcalc(24)} auto ${remcalc(9)} ${remcalc(24)} !important; `; const H3 = styled.h3` font-size: ${remcalc(16)} !important; - font-weight: 600; - font-style: normal; - font-stretch: normal; + ${typography.semibold}; + color: ${colors.brandSecondaryColor}; margin: 0 auto ${remcalc(26)} ${remcalc(24)} !important; `; diff --git a/frontend/src/components/people-list/table/person-delete.js b/frontend/src/components/people-list/table/person-delete.js index 6b13af21..97bcae98 100644 --- a/frontend/src/components/people-list/table/person-delete.js +++ b/frontend/src/components/people-list/table/person-delete.js @@ -1,5 +1,6 @@ -import React from 'react'; import styled from 'styled-components'; +import { typography } from '@ui/shared/composers'; +import React from 'react'; const PlainButton = styled.button` background: transparent; @@ -8,6 +9,9 @@ const PlainButton = styled.button` zIndex: 0; font-family: inherit; color: inherit; + + ${typography.libreFranklin}; + ${typography.normal}; `; const PersonDelete = ({ diff --git a/frontend/src/components/people-list/table/person-role.js b/frontend/src/components/people-list/table/person-role.js index 6fc583a1..d36dd676 100644 --- a/frontend/src/components/people-list/table/person-role.js +++ b/frontend/src/components/people-list/table/person-role.js @@ -1,8 +1,8 @@ -import React from 'react'; import styled from 'styled-components'; +import React from 'react'; import { remcalc } from '@ui/shared/functions'; -import { pseudoEl } from '@ui/shared/composers'; +import { pseudoEl, typography } from '@ui/shared/composers'; import Tooltip from './tooltip'; const borderSide = props => props.toggled @@ -31,8 +31,10 @@ const PlainButton = styled.button` font-size: inherit; border: none; zIndex: 0; - font-family: inherit; color: inherit; + + ${typography.libreFranklin}; + ${typography.normal}; `; const PersonRole = ({ diff --git a/frontend/src/components/people-list/table/person-status.js b/frontend/src/components/people-list/table/person-status.js index 3e029f6f..0be963ec 100644 --- a/frontend/src/components/people-list/table/person-status.js +++ b/frontend/src/components/people-list/table/person-status.js @@ -1,7 +1,7 @@ import React from 'react'; import styled from 'styled-components'; import { remcalc } from '@ui/shared/functions'; -import { pseudoEl } from '@ui/shared/composers'; +import { pseudoEl, typography } from '@ui/shared/composers'; import Tooltip from './tooltip'; const borderSide = props => props.toggled @@ -30,8 +30,10 @@ const PlainButton = styled.button` font-size: inherit; border: none; zIndex: 0; - font-family: inherit; color: inherit; + + ${typography.libreFranklin}; + ${typography.normal}; `; const PersonStatus = ({ diff --git a/frontend/webpack/base.js b/frontend/webpack/base.js index 72e850aa..d75e6709 100644 --- a/frontend/webpack/base.js +++ b/frontend/webpack/base.js @@ -72,7 +72,7 @@ module.exports = { }, { test: /\.(eot|svg|ttf|woff|woff2)$/, loader: 'file-loader', - include: path.join(UI, 'assets', 'fonts') + include: path.join(UI, 'components', 'fonts', 'libre-franklin') }, { test: /\.css$/, loader: 'style-loader!css-loader' diff --git a/ui/.babelrc b/ui/.babelrc index bff9db20..a36ed09a 100644 --- a/ui/.babelrc +++ b/ui/.babelrc @@ -13,7 +13,7 @@ ], "plugins": [ ["inline-react-svg", { - "ignorePattern": "assets\\/fonts\\/.*?\\.svg" + "ignorePattern": "libre-franklin" }], "transform-class-properties", ["transform-object-rest-spread", { diff --git a/ui/src/assets/fonts/README.md b/ui/src/assets/fonts/README.md deleted file mode 100644 index 77cad3ec..00000000 --- a/ui/src/assets/fonts/README.md +++ /dev/null @@ -1 +0,0 @@ -Source: https://www.fontsquirrel.com/fonts/libre-franklin diff --git a/ui/src/assets/icons/close.svg b/ui/src/assets/icons/close.svg deleted file mode 100644 index 26e2000e..00000000 --- a/ui/src/assets/icons/close.svg +++ /dev/null @@ -1,4 +0,0 @@ - - logo - - diff --git a/ui/src/components/avatar/index.js b/ui/src/components/avatar/index.js index 8958bedc..8bfc628f 100644 --- a/ui/src/components/avatar/index.js +++ b/ui/src/components/avatar/index.js @@ -1,22 +1,28 @@ -// TODO: use a checkbox - -import React from 'react'; -import { verticallyAlignCenter, Baseline } from '../../shared/composers'; -import { remcalc } from '../../shared/functions'; import styled from 'styled-components'; +import { remcalc } from '../../shared/functions'; +import React from 'react'; + +import { + verticallyAlignCenter, + Baseline, + typography +} from '../../shared/composers'; const Picture = styled.img` - ${verticallyAlignCenter} + ${verticallyAlignCenter}; + max-width: 100%; `; const Letter = styled.p` - ${verticallyAlignCenter} + ${verticallyAlignCenter}; + max-width: 100%; margin: 0 0 0 0 !important; color: #FFFFFF; + font-size: ${remcalc(13)}; - font-weight: 600; + ${typography.semibold}; `; const Container = styled.div` diff --git a/ui/src/components/base-elements/index.js b/ui/src/components/base-elements/index.js index b6ad1891..559d789c 100644 --- a/ui/src/components/base-elements/index.js +++ b/ui/src/components/base-elements/index.js @@ -1,7 +1,7 @@ /* eslint react/prop-types: 0 */ import { remcalc } from '../../shared/functions'; -import { Baseline, bold } from '../../shared/composers'; +import { Baseline, typography } from '../../shared/composers'; import styled, { css } from 'styled-components'; import React from 'react'; @@ -15,21 +15,21 @@ const elements = [{ font-stretch: normal; margin: 0; - ${bold} + ${typography.bold} ` }, { name: 'H2', properties: css` font-size: ${remcalc(24)}; - ${bold} + ${typography.bold} ` }, { name: 'H3', properties: css` font-size: ${remcalc(16)}; - ${bold} + ${typography.bold} ` }, { name: 'P', diff --git a/ui/src/components/base/global.js b/ui/src/components/base/global.js index da0b2222..df6e3514 100644 --- a/ui/src/components/base/global.js +++ b/ui/src/components/base/global.js @@ -1,85 +1,16 @@ import { css } from 'styled-components'; import { colors } from '../../shared/constants'; - -import eotRegular from '../../assets/fonts/librefranklin-regular-webfont.eot'; -import woffRegular from '../../assets/fonts/librefranklin-regular-webfont.woff'; -// eslint-disable-next-line max-len -import woff2Regular from '../../assets/fonts/librefranklin-regular-webfont.woff2'; -import ttfRegular from '../../assets/fonts/librefranklin-regular-webfont.ttf'; -import svgRegular from '../../assets/fonts/librefranklin-regular-webfont.svg'; -import eotSemibold from '../../assets/fonts/librefranklin-semibold-webfont.eot'; -// eslint-disable-next-line max-len -import woffSemibold from '../../assets/fonts/librefranklin-semibold-webfont.woff'; -// eslint-disable-next-line max-len -import woff2Semibold from '../../assets/fonts/librefranklin-semibold-webfont.woff2'; -import ttfSemibold from '../../assets/fonts/librefranklin-semibold-webfont.ttf'; -import svgSemibold from '../../assets/fonts/librefranklin-semibold-webfont.svg'; -import eotBold from '../../assets/fonts/librefranklin-bold-webfont.eot'; -import woffBold from '../../assets/fonts/librefranklin-bold-webfont.woff'; -import woff2Bold from '../../assets/fonts/librefranklin-bold-webfont.woff2'; -import ttfBold from '../../assets/fonts/librefranklin-bold-webfont.ttf'; -import svgBold from '../../assets/fonts/librefranklin-bold-webfont.svg'; - -const fonts = [{ - family: 'LibreFranklin', - weight: '400', - style: 'normal', - filenames: { - eot: eotRegular, - woff: woffRegular, - woff2: woff2Regular, - ttf: ttfRegular, - svg: svgRegular - } -}, { - family: 'LibreFranklin-Semi-Bold', - weight: '600', - style: 'normal', - filenames: { - eot: eotSemibold, - woff: woffSemibold, - woff2: woff2Semibold, - ttf: ttfSemibold, - svg: svgSemibold - } -}, { - family: 'LibreFranklin-Bold', - weight: '700', - style: 'normal', - filenames: { - eot: eotBold, - woff: woffBold, - woff2: woff2Bold, - ttf: ttfBold, - svg: svgBold - } -}]; - -const fontFaces = fonts.map(({ - filenames, - family, - style, - weight -}) => ` - @font-face { - font-family: '${family}'; - src: url('${filenames.eot}'), - url('${filenames.eot}?#iefix') format('embedded-opentype'), - url('${filenames.woff}') format('woff'), - url('${filenames.woff2}') format('woff2'), - url('${filenames.ttf}') format('truetype'), - url('${filenames.svg}#${family}') format('svg'); - font-weight: ${weight}; - font-style: ${style}; - } -`); +import { libreFranklin } from '../fonts'; export default css` - ${fontFaces.join('\n')} + ${libreFranklin.normal} + ${libreFranklin.semibold} + ${libreFranklin.bold} html, body { font-size: 16px; margin: 0; + padding: 0; background: ${colors.base.background}; } `; diff --git a/ui/src/components/base/index.js b/ui/src/components/base/index.js index 4b55bd17..a40c6dcd 100644 --- a/ui/src/components/base/index.js +++ b/ui/src/components/base/index.js @@ -1,5 +1,5 @@ import { colors } from '../../shared/constants'; -import { libreFranklin, bodyColor, regular } from '../../shared/composers'; +import { typography } from '../../shared/composers'; import styled from 'styled-components'; import global from './global'; @@ -7,10 +7,10 @@ export default styled.div` font-size: 1rem; line-height: 1.5; background-color: ${colors.base.background}; + color: ${colors.base.text}; - ${libreFranklin} - ${bodyColor} - ${regular} + ${typography.libreFranklin} + ${typography.normal} `; export { diff --git a/ui/src/components/button/icon.js b/ui/src/components/button/icon.js new file mode 100644 index 00000000..8adacb60 --- /dev/null +++ b/ui/src/components/button/icon.js @@ -0,0 +1,18 @@ +import styled from 'styled-components'; +import { Baseline, typography } from '../../shared/composers'; +import { remcalc } from '../../shared/functions'; + +const ButtonIcon = styled.button` + background: none; + border: none; + position: absolute; + top: ${remcalc(16)}; + right: ${remcalc(16)}; + + ${typography.libreFranklin}; + ${typography.normal}; +`; + +export default Baseline( + ButtonIcon +); diff --git a/ui/src/components/button/index.js b/ui/src/components/button/index.js index 1fcccaa5..c349c004 100644 --- a/ui/src/components/button/index.js +++ b/ui/src/components/button/index.js @@ -1,4 +1,4 @@ -import { Baseline } from '../../shared/composers'; +import { Baseline, typography } from '../../shared/composers'; import { colors, boxes } from '../../shared/constants'; import { remcalc } from '../../shared/functions'; import isString from 'lodash.isstring'; @@ -62,11 +62,12 @@ const style = css` padding: ${remcalc(14)} ${remcalc(16)}; position: relative; + ${typography.libreFranklin}; + ${typography.normal}; + font-size: ${remcalc(16)}; - font-weight: 400; text-align: center; font-style: normal; - font-weight: normal; font-stretch: normal; line-height: normal; letter-spacing: normal; @@ -176,3 +177,5 @@ Button.propTypes = { export default Baseline( Button ); + +export { default as ButtonIcon } from './icon'; diff --git a/ui/src/components/close/index.js b/ui/src/components/close/index.js deleted file mode 100644 index ed663e75..00000000 --- a/ui/src/components/close/index.js +++ /dev/null @@ -1,31 +0,0 @@ -import React from 'react'; -import styled from 'styled-components'; -import { Baseline } from '../../shared/composers'; -import { remcalc } from '../../shared/functions'; -import CloseSVG from '../../assets/icons/close.svg'; - -const StyledButton = styled.button` - background: none; - border: none; - position: absolute; - top: ${remcalc(16)}; - right: ${remcalc(16)}; -`; - -const Close = ({ - children, - ...props -}) => ( - - - {children} - -); - -Close.propTypes = { - children: React.PropTypes.node -}; - -export default Baseline( - Close -); diff --git a/ui/src/components/close/story.js b/ui/src/components/close/story.js deleted file mode 100644 index 72042f40..00000000 --- a/ui/src/components/close/story.js +++ /dev/null @@ -1,8 +0,0 @@ -import React from 'react'; -import { storiesOf } from '@kadira/storybook'; -import Close from './'; - -storiesOf('Close', module) - .add('Default', () => ( - - )); diff --git a/ui/src/components/fonts/index.js b/ui/src/components/fonts/index.js new file mode 100644 index 00000000..f1d09b8b --- /dev/null +++ b/ui/src/components/fonts/index.js @@ -0,0 +1,81 @@ +import { css } from 'styled-components'; + +import eotNormal from './libre-franklin/regular.eot'; +import woffNormal from './libre-franklin/regular.woff'; +import woff2Normal from './libre-franklin/regular.woff2'; +import ttfNormal from './libre-franklin/regular.ttf'; +import svgNormal from './libre-franklin/regular.svg'; +import eotSemibold from './libre-franklin/semibold.eot'; +import woffSemibold from './libre-franklin/semibold.woff'; +import woff2Semibold from './libre-franklin/semibold.woff2'; +import ttfSemibold from './libre-franklin/semibold.ttf'; +import svgSemibold from './libre-franklin/semibold.svg'; +import eotBold from './libre-franklin/bold.eot'; +import woffBold from './libre-franklin/bold.woff'; +import woff2Bold from './libre-franklin/bold.woff2'; +import ttfBold from './libre-franklin/bold.ttf'; +import svgBold from './libre-franklin/bold.svg'; + +const fontFaces = { + normal: { + family: 'Libre Franklin', + style: 'normal', + weight: 400, + filenames: { + eot: eotNormal, + woff: woffNormal, + woff2: woff2Normal, + ttf: ttfNormal, + svg: svgNormal + } + }, + semibold: { + family: 'Libre Franklin', + style: 'normal', + weight: 600, + filenames: { + eot: eotSemibold, + woff: woffSemibold, + woff2: woff2Semibold, + ttf: ttfSemibold, + svg: svgSemibold + } + }, + bold: { + family: 'Libre Franklin', + style: 'normal', + weight: 700, + filenames: { + eot: eotBold, + woff: woffBold, + woff2: woff2Bold, + ttf: ttfBold, + svg: svgBold + } + } +}; + +const generate = (name) => css` + @font-face { + font-family: '${fontFaces[name].family}'; + font-style: ${fontFaces[name].style}; + font-weight: ${fontFaces[name].weight}; + src: url('${fontFaces[name].filenames.eot}'); + src: url('${fontFaces[name].filenames.eot}?#iefix') + format('embedded-opentype'), + url('${fontFaces[name].filenames.woff}') + format('woff'), + url('${fontFaces[name].filenames.woff2}') + format('woff2'), + url('${fontFaces[name].filenames.ttf}') + format('truetype'), + url('${fontFaces[name].filenames.svg}#${fontFaces[name].family}') + format('svg'); + } +`; + +export const libreFranklin = { + normal: generate('normal'), + semibold: generate('semibold'), + bold: generate('bold') +}; diff --git a/ui/src/assets/fonts/LICENSE b/ui/src/components/fonts/libre-franklin/README.md similarity index 97% rename from ui/src/assets/fonts/LICENSE rename to ui/src/components/fonts/libre-franklin/README.md index e9792ccd..9ee807a9 100644 --- a/ui/src/assets/fonts/LICENSE +++ b/ui/src/components/fonts/libre-franklin/README.md @@ -1,3 +1,6 @@ +# Libre Franklin License [ref](https://www.fontsquirrel.com/license/libre-franklin) + +``` Copyright (c) 2015, Impallari Type (www.impallari.com) This Font Software is licensed under the SIL Open Font License, Version 1.1. @@ -40,4 +43,5 @@ TERMINATION This license becomes null and void if any of the above conditions are not met. DISCLAIMER -THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE. \ No newline at end of file +THE FONT SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO ANY WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT OF COPYRIGHT, PATENT, TRADEMARK, OR OTHER RIGHT. IN NO EVENT SHALL THE COPYRIGHT HOLDER BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, INCLUDING ANY GENERAL, SPECIAL, INDIRECT, INCIDENTAL, OR CONSEQUENTIAL DAMAGES, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF THE USE OR INABILITY TO USE THE FONT SOFTWARE OR FROM OTHER DEALINGS IN THE FONT SOFTWARE. +``` \ No newline at end of file diff --git a/ui/src/assets/fonts/librefranklin-bold-webfont.eot b/ui/src/components/fonts/libre-franklin/bold.eot similarity index 100% rename from ui/src/assets/fonts/librefranklin-bold-webfont.eot rename to ui/src/components/fonts/libre-franklin/bold.eot diff --git a/ui/src/assets/fonts/librefranklin-bold-webfont.svg b/ui/src/components/fonts/libre-franklin/bold.svg similarity index 100% rename from ui/src/assets/fonts/librefranklin-bold-webfont.svg rename to ui/src/components/fonts/libre-franklin/bold.svg diff --git a/ui/src/assets/fonts/librefranklin-bold-webfont.ttf b/ui/src/components/fonts/libre-franklin/bold.ttf similarity index 100% rename from ui/src/assets/fonts/librefranklin-bold-webfont.ttf rename to ui/src/components/fonts/libre-franklin/bold.ttf diff --git a/ui/src/assets/fonts/librefranklin-bold-webfont.woff b/ui/src/components/fonts/libre-franklin/bold.woff similarity index 100% rename from ui/src/assets/fonts/librefranklin-bold-webfont.woff rename to ui/src/components/fonts/libre-franklin/bold.woff diff --git a/ui/src/assets/fonts/librefranklin-bold-webfont.woff2 b/ui/src/components/fonts/libre-franklin/bold.woff2 similarity index 100% rename from ui/src/assets/fonts/librefranklin-bold-webfont.woff2 rename to ui/src/components/fonts/libre-franklin/bold.woff2 diff --git a/ui/src/assets/fonts/librefranklin-regular-webfont.eot b/ui/src/components/fonts/libre-franklin/regular.eot similarity index 100% rename from ui/src/assets/fonts/librefranklin-regular-webfont.eot rename to ui/src/components/fonts/libre-franklin/regular.eot diff --git a/ui/src/assets/fonts/librefranklin-regular-webfont.svg b/ui/src/components/fonts/libre-franklin/regular.svg similarity index 100% rename from ui/src/assets/fonts/librefranklin-regular-webfont.svg rename to ui/src/components/fonts/libre-franklin/regular.svg diff --git a/ui/src/assets/fonts/librefranklin-regular-webfont.ttf b/ui/src/components/fonts/libre-franklin/regular.ttf similarity index 100% rename from ui/src/assets/fonts/librefranklin-regular-webfont.ttf rename to ui/src/components/fonts/libre-franklin/regular.ttf diff --git a/ui/src/assets/fonts/librefranklin-regular-webfont.woff b/ui/src/components/fonts/libre-franklin/regular.woff similarity index 100% rename from ui/src/assets/fonts/librefranklin-regular-webfont.woff rename to ui/src/components/fonts/libre-franklin/regular.woff diff --git a/ui/src/assets/fonts/librefranklin-regular-webfont.woff2 b/ui/src/components/fonts/libre-franklin/regular.woff2 similarity index 100% rename from ui/src/assets/fonts/librefranklin-regular-webfont.woff2 rename to ui/src/components/fonts/libre-franklin/regular.woff2 diff --git a/ui/src/assets/fonts/librefranklin-semibold-webfont.eot b/ui/src/components/fonts/libre-franklin/semibold.eot similarity index 100% rename from ui/src/assets/fonts/librefranklin-semibold-webfont.eot rename to ui/src/components/fonts/libre-franklin/semibold.eot diff --git a/ui/src/assets/fonts/librefranklin-semibold-webfont.svg b/ui/src/components/fonts/libre-franklin/semibold.svg similarity index 100% rename from ui/src/assets/fonts/librefranklin-semibold-webfont.svg rename to ui/src/components/fonts/libre-franklin/semibold.svg diff --git a/ui/src/assets/fonts/librefranklin-semibold-webfont.ttf b/ui/src/components/fonts/libre-franklin/semibold.ttf similarity index 100% rename from ui/src/assets/fonts/librefranklin-semibold-webfont.ttf rename to ui/src/components/fonts/libre-franklin/semibold.ttf diff --git a/ui/src/assets/fonts/librefranklin-semibold-webfont.woff b/ui/src/components/fonts/libre-franklin/semibold.woff similarity index 100% rename from ui/src/assets/fonts/librefranklin-semibold-webfont.woff rename to ui/src/components/fonts/libre-franklin/semibold.woff diff --git a/ui/src/assets/fonts/librefranklin-semibold-webfont.woff2 b/ui/src/components/fonts/libre-franklin/semibold.woff2 similarity index 100% rename from ui/src/assets/fonts/librefranklin-semibold-webfont.woff2 rename to ui/src/components/fonts/libre-franklin/semibold.woff2 diff --git a/ui/src/components/form/base-input.js b/ui/src/components/form/base-input.js index 0176fb68..35b6bbd7 100644 --- a/ui/src/components/form/base-input.js +++ b/ui/src/components/form/base-input.js @@ -1,6 +1,7 @@ import styled, { css } from 'styled-components'; import { Subscriber } from 'react-broadcast'; import { colors, boxes } from '../../shared/constants'; +import { typography } from '../../shared/composers'; import { remcalc, is } from '../../shared/functions'; import React from 'react'; @@ -53,7 +54,8 @@ const style = css` font-size: ${remcalc(16)}; line-height: normal !important; - font-weight: normal; + + ${typography.normal}; font-style: normal; font-stretch: normal; color: ${color}; diff --git a/ui/src/components/icons/close.js b/ui/src/components/icons/close.js new file mode 100644 index 00000000..be190910 --- /dev/null +++ b/ui/src/components/icons/close.js @@ -0,0 +1,9 @@ +import { Baseline } from '../../shared/composers'; +// eslint-disable-next-line no-unused-vars +import React from 'react'; + +import CloseIcon from './svg/close.svg'; + +export default Baseline( + CloseIcon +); diff --git a/ui/src/components/icons/healthy.js b/ui/src/components/icons/healthy.js new file mode 100644 index 00000000..35e359fc --- /dev/null +++ b/ui/src/components/icons/healthy.js @@ -0,0 +1,9 @@ +import { Baseline } from '../../shared/composers'; +// eslint-disable-next-line no-unused-vars +import React from 'react'; + +import HealthyIcon from './svg/healthy.svg'; + +export default Baseline( + HealthyIcon +); diff --git a/ui/src/components/icons/heart.js b/ui/src/components/icons/heart.js new file mode 100644 index 00000000..ea38fe40 --- /dev/null +++ b/ui/src/components/icons/heart.js @@ -0,0 +1,9 @@ +import { Baseline } from '../../shared/composers'; +// eslint-disable-next-line no-unused-vars +import React from 'react'; + +import HeartIcon from './svg/heart.svg'; + +export default Baseline( + HeartIcon +); diff --git a/ui/src/components/icons/index.js b/ui/src/components/icons/index.js new file mode 100644 index 00000000..086fa5de --- /dev/null +++ b/ui/src/components/icons/index.js @@ -0,0 +1,8 @@ +export { default as CloseIcon } from './close'; +export { default as HealthyIcon } from './healthy'; +export { default as HeartIcon } from './heart'; +export { default as InputConfirmIcon } from './input-confirm'; +export { default as InstancesMultipleIcon } from './instances-multiple'; +export { default as NotificationIcon } from './notification'; +export { default as SettingsIcon } from './settings'; +export { default as UploadIcon } from './upload'; diff --git a/ui/src/components/icons/input-confirm.js b/ui/src/components/icons/input-confirm.js new file mode 100644 index 00000000..99c30f29 --- /dev/null +++ b/ui/src/components/icons/input-confirm.js @@ -0,0 +1,9 @@ +import { Baseline } from '../../shared/composers'; +// eslint-disable-next-line no-unused-vars +import React from 'react'; + +import InputConfirmIcon from './svg/input-confirm.svg'; + +export default Baseline( + InputConfirmIcon +); diff --git a/ui/src/components/icons/instances-multiple.js b/ui/src/components/icons/instances-multiple.js new file mode 100644 index 00000000..52de0fef --- /dev/null +++ b/ui/src/components/icons/instances-multiple.js @@ -0,0 +1,9 @@ +import { Baseline } from '../../shared/composers'; +// eslint-disable-next-line no-unused-vars +import React from 'react'; + +import InstancesMultipleIcon from './svg/instances-multiple.svg'; + +export default Baseline( + InstancesMultipleIcon +); diff --git a/ui/src/components/icons/notification.js b/ui/src/components/icons/notification.js new file mode 100644 index 00000000..ee838edb --- /dev/null +++ b/ui/src/components/icons/notification.js @@ -0,0 +1,52 @@ +import { Baseline } from '../../shared/composers'; +import React from 'react'; + +import Warning from './svg/notification-warning.svg'; +// eslint-disable-next-line max-len +import WarningInverted from './svg/notification-warning-inverted.svg'; +import Success from './svg/notification-success.svg'; +// eslint-disable-next-line max-len +import ConfirmationInverted from './svg/notification-confirmation-inverted.svg'; +import Alert from './svg/notification-alert.svg'; +import Action from './svg/notification-action.svg'; + +const NotificationIcon = ({ + action = false, + alert = false, + confirmation = false, + inverted = false, + success = false, + warning = false, + ...props +}) => { + const icons = [ + () => action ? Action : null, + () => alert ? Alert : null, + () => (confirmation && inverted) ? ConfirmationInverted : null, + () => success ? Success : null, + () => warning ? (inverted ? WarningInverted : Warning) : null + ]; + + const Icon = icons.reduce((Icon, fn) => Icon ? Icon : fn(), null); + + if (!Icon) { + return null; + } + + return ( + + ); +}; + +NotificationIcon.propTypes = { + action: React.PropTypes.bool, + alert: React.PropTypes.bool, + confirmation: React.PropTypes.bool, + inverted: React.PropTypes.bool, + success: React.PropTypes.bool, + warning: React.PropTypes.bool +}; + +export default Baseline( + NotificationIcon +); diff --git a/ui/src/components/icons/payment-card.js b/ui/src/components/icons/payment-card.js new file mode 100644 index 00000000..c1c97a3c --- /dev/null +++ b/ui/src/components/icons/payment-card.js @@ -0,0 +1,87 @@ +import { Baseline } from '../../shared/composers'; +import React from 'react'; + +import alipayIcon from './svg/alipay.svg'; +import amexIcon from './svg/amex.svg'; +import dinersIcon from './svg/diners.svg'; +import discoverIcon from './svg/discover.svg'; +import hipercardIcon from './svg/hipercard.svg'; +import jcbIcon from './svg/jcb.svg'; +import maestroIcon from './svg/maestro.svg'; +import mastercardIcon from './svg/mastercard.svg'; +import paypalIcon from './svg/paypal.svg'; +import unionpayIcon from './svg/unionpay.svg'; +import visaIcon from './svg/visa.svg'; + +const types = { + alipay: alipayIcon, + amex: amexIcon, + diners: dinersIcon, + discover: discoverIcon, + hipercard: hipercardIcon, + jcb: jcbIcon, + maestro: maestroIcon, + mastercard: mastercardIcon, + paypal: paypalIcon, + unionpay: unionpayIcon, + visa: visaIcon +}; + +const typeNames = Object.keys(types); + +const PaymentCardIcon = ({ + alipay = false, + amex = false, + diners = false, + discover = false, + hipercard = false, + jcb = false, + maestro = false, + mastercard = false, + paypal = false, + unionpay = false, + visa = false, + type, + ...props +}) => { + const TypeIcon = types[type]; + + const PropIcon = typeNames.reduce((icon, name) => { + return icon ? icon : types[name]; + }, null); + + const Icon = TypeIcon + ? TypeIcon + : PropIcon; + + if (!Icon) { + return null; + } + + return ( + + ); +}; + +PaymentCardIcon.propTypes = { + alipay: React.PropTypes.bool, + amex: React.PropTypes.bool, + diners: React.PropTypes.bool, + discover: React.PropTypes.bool, + hipercard: React.PropTypes.bool, + jcb: React.PropTypes.bool, + maestro: React.PropTypes.bool, + mastercard: React.PropTypes.bool, + paypal: React.PropTypes.bool, + type: React.PropTypes.oneOf(typeNames), + unionpay: React.PropTypes.bool, + visa: React.PropTypes.bool +}; + +export default Baseline( + PaymentCardIcon +); + +export { + typeNames as types +}; diff --git a/ui/src/components/icons/settings.js b/ui/src/components/icons/settings.js new file mode 100644 index 00000000..3ef4e88a --- /dev/null +++ b/ui/src/components/icons/settings.js @@ -0,0 +1,9 @@ +import { Baseline } from '../../shared/composers'; +// eslint-disable-next-line no-unused-vars +import React from 'react'; + +import SettingsIcon from './svg/settings.svg'; + +export default Baseline( + SettingsIcon +); diff --git a/ui/src/components/icons/story.js b/ui/src/components/icons/story.js new file mode 100644 index 00000000..d47c5e81 --- /dev/null +++ b/ui/src/components/icons/story.js @@ -0,0 +1,54 @@ +import React from 'react'; +import { storiesOf } from '@kadira/storybook'; + +import { + CloseIcon, + HealthyIcon, + HeartIcon, + InputConfirmIcon, + InstancesMultipleIcon, + NotificationIcon, + SettingsIcon, + UploadIcon +} from './'; + +storiesOf('Icons', module) + .add('Close', () => ( + + )) + .add('Healthy', () => ( + + )) + .add('Heart', () => ( + + )) + .add('InputConfirm', () => ( + + )) + .add('InstancesMultiple', () => ( + + )) + .add('Notification action', () => ( + + )) + .add('Notification alert', () => ( + + )) + .add('Notification confirmation inverted', () => ( + + )) + .add('Notification success', () => ( + + )) + .add('Notification warning', () => ( + + )) + .add('Notification warning inverted', () => ( + + )) + .add('Settings', () => ( + + )) + .add('Upload', () => ( + + )); diff --git a/ui/src/components/icons/svg/alipay.svg b/ui/src/components/icons/svg/alipay.svg new file mode 100644 index 00000000..9b456000 --- /dev/null +++ b/ui/src/components/icons/svg/alipay.svg @@ -0,0 +1,11 @@ + + + + + + + + + + + diff --git a/ui/src/components/icons/svg/amex.svg b/ui/src/components/icons/svg/amex.svg new file mode 100644 index 00000000..3d396afe --- /dev/null +++ b/ui/src/components/icons/svg/amex.svg @@ -0,0 +1,58 @@ + + + + +Slice 1 +Created with Sketch. + + + + + + diff --git a/ui/src/components/metric/close.svg b/ui/src/components/icons/svg/close.svg similarity index 82% rename from ui/src/components/metric/close.svg rename to ui/src/components/icons/svg/close.svg index 7e8853f6..5256e16d 100644 --- a/ui/src/components/metric/close.svg +++ b/ui/src/components/icons/svg/close.svg @@ -1,9 +1,4 @@ - - - icon: close - Created with Sketch. - @@ -13,4 +8,4 @@ - + \ No newline at end of file diff --git a/ui/src/components/icons/svg/data-centers.svg b/ui/src/components/icons/svg/data-centers.svg new file mode 100755 index 00000000..15d698fe --- /dev/null +++ b/ui/src/components/icons/svg/data-centers.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ui/src/components/icons/svg/diners.svg b/ui/src/components/icons/svg/diners.svg new file mode 100644 index 00000000..ac39d85e --- /dev/null +++ b/ui/src/components/icons/svg/diners.svg @@ -0,0 +1,20 @@ + + + + +diners +Created with Sketch. + + + + + + diff --git a/ui/src/components/icons/svg/discover.svg b/ui/src/components/icons/svg/discover.svg new file mode 100644 index 00000000..42777674 --- /dev/null +++ b/ui/src/components/icons/svg/discover.svg @@ -0,0 +1,37 @@ + + + + +discover +Created with Sketch. + + + + + + + + + + + + + diff --git a/ui/src/components/icons/svg/healthy.svg b/ui/src/components/icons/svg/healthy.svg new file mode 100755 index 00000000..4b1c383c --- /dev/null +++ b/ui/src/components/icons/svg/healthy.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ui/src/components/icons/svg/heart.svg b/ui/src/components/icons/svg/heart.svg new file mode 100755 index 00000000..677c62cd --- /dev/null +++ b/ui/src/components/icons/svg/heart.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/ui/src/components/icons/svg/hipercard.svg b/ui/src/components/icons/svg/hipercard.svg new file mode 100644 index 00000000..a06392ed --- /dev/null +++ b/ui/src/components/icons/svg/hipercard.svg @@ -0,0 +1,16 @@ + + + amex-outline + Created with Sketch. + + + + + + + + + + + + \ No newline at end of file diff --git a/ui/src/components/metric/icon-settings.svg b/ui/src/components/icons/svg/icon-settings.svg similarity index 87% rename from ui/src/components/metric/icon-settings.svg rename to ui/src/components/icons/svg/icon-settings.svg index 322ce7ea..407efd2d 100644 --- a/ui/src/components/metric/icon-settings.svg +++ b/ui/src/components/icons/svg/icon-settings.svg @@ -1,9 +1,4 @@ - - - icon: settings - Created with Sketch. - diff --git a/ui/src/assets/icons/input-confirm.svg b/ui/src/components/icons/svg/input-confirm.svg similarity index 85% rename from ui/src/assets/icons/input-confirm.svg rename to ui/src/components/icons/svg/input-confirm.svg index 90e04219..4740cdd5 100644 --- a/ui/src/assets/icons/input-confirm.svg +++ b/ui/src/components/icons/svg/input-confirm.svg @@ -1,8 +1,4 @@ - - - icon: confirmation - Created with Sketch. diff --git a/ui/src/components/icons/svg/instances-multiple.svg b/ui/src/components/icons/svg/instances-multiple.svg new file mode 100755 index 00000000..5e21912c --- /dev/null +++ b/ui/src/components/icons/svg/instances-multiple.svg @@ -0,0 +1,15 @@ + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ui/src/components/icons/svg/jcb.svg b/ui/src/components/icons/svg/jcb.svg new file mode 100644 index 00000000..2107be9d --- /dev/null +++ b/ui/src/components/icons/svg/jcb.svg @@ -0,0 +1,50 @@ + + + + +Slice 1 +Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + diff --git a/ui/src/components/icons/svg/maestro.svg b/ui/src/components/icons/svg/maestro.svg new file mode 100644 index 00000000..866f83c6 --- /dev/null +++ b/ui/src/components/icons/svg/maestro.svg @@ -0,0 +1,98 @@ + + + + +Slice 1 +Created with Sketch. + + + + + + + + + + + + + + + + + + + + + + diff --git a/ui/src/components/payment-card/mastercard.svg b/ui/src/components/icons/svg/mastercard.svg similarity index 87% rename from ui/src/components/payment-card/mastercard.svg rename to ui/src/components/icons/svg/mastercard.svg index 7507b16c..8ba210fb 100644 --- a/ui/src/components/payment-card/mastercard.svg +++ b/ui/src/components/icons/svg/mastercard.svg @@ -18,6 +18,14 @@ c4.154,6.63,8.729,12.98,13.684,18.996h36.259c-5.571,6.771-11.634,13.134-18.13,19.013 c31.858,28.866,74.117,46.454,120.496,46.454C594.629,415.004,675,334.642,675,235.5C675,136.371,594.629,55.996,495.491,55.996" /> + + diff --git a/ui/src/components/icons/svg/notification-action.svg b/ui/src/components/icons/svg/notification-action.svg new file mode 100755 index 00000000..48647412 --- /dev/null +++ b/ui/src/components/icons/svg/notification-action.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ui/src/components/icons/svg/notification-alert.svg b/ui/src/components/icons/svg/notification-alert.svg new file mode 100755 index 00000000..2ae36f0a --- /dev/null +++ b/ui/src/components/icons/svg/notification-alert.svg @@ -0,0 +1,12 @@ + + + + + + + ! + + + + + \ No newline at end of file diff --git a/ui/src/components/icons/svg/notification-confirmation-inverted.svg b/ui/src/components/icons/svg/notification-confirmation-inverted.svg new file mode 100755 index 00000000..74189466 --- /dev/null +++ b/ui/src/components/icons/svg/notification-confirmation-inverted.svg @@ -0,0 +1,18 @@ + + + + + + + + + + + + + + + + + + \ No newline at end of file diff --git a/ui/src/components/icons/svg/notification-success.svg b/ui/src/components/icons/svg/notification-success.svg new file mode 100755 index 00000000..fd216ee7 --- /dev/null +++ b/ui/src/components/icons/svg/notification-success.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/ui/src/components/icons/svg/notification-warning-inverted.svg b/ui/src/components/icons/svg/notification-warning-inverted.svg new file mode 100755 index 00000000..12ee429e --- /dev/null +++ b/ui/src/components/icons/svg/notification-warning-inverted.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + ! + + + + + + \ No newline at end of file diff --git a/ui/src/components/icons/svg/notification-warning.svg b/ui/src/components/icons/svg/notification-warning.svg new file mode 100755 index 00000000..acd69c2b --- /dev/null +++ b/ui/src/components/icons/svg/notification-warning.svg @@ -0,0 +1,20 @@ + + + + + + + + + + + + + + ! + + + + + + \ No newline at end of file diff --git a/ui/src/components/icons/svg/paypal.svg b/ui/src/components/icons/svg/paypal.svg new file mode 100644 index 00000000..16d8b425 --- /dev/null +++ b/ui/src/components/icons/svg/paypal.svg @@ -0,0 +1,53 @@ + + + + +amex-outline +Created with Sketch. + + + + + + + + + diff --git a/ui/src/assets/icons/icon-settings.svg b/ui/src/components/icons/svg/settings.svg old mode 100644 new mode 100755 similarity index 87% rename from ui/src/assets/icons/icon-settings.svg rename to ui/src/components/icons/svg/settings.svg index 322ce7ea..407efd2d --- a/ui/src/assets/icons/icon-settings.svg +++ b/ui/src/components/icons/svg/settings.svg @@ -1,9 +1,4 @@ - - - icon: settings - Created with Sketch. - diff --git a/ui/src/components/icons/svg/unionpay.svg b/ui/src/components/icons/svg/unionpay.svg new file mode 100644 index 00000000..17eb976b --- /dev/null +++ b/ui/src/components/icons/svg/unionpay.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + diff --git a/ui/src/components/icons/svg/upload.svg b/ui/src/components/icons/svg/upload.svg new file mode 100755 index 00000000..aab8d64b --- /dev/null +++ b/ui/src/components/icons/svg/upload.svg @@ -0,0 +1,12 @@ + + + + + + + + + + + + \ No newline at end of file diff --git a/ui/src/components/icons/svg/visa.svg b/ui/src/components/icons/svg/visa.svg new file mode 100644 index 00000000..3d6a3e93 --- /dev/null +++ b/ui/src/components/icons/svg/visa.svg @@ -0,0 +1,27 @@ + + + + +Slice 1 +Created with Sketch. + + + + + + + + diff --git a/ui/src/components/icons/upload.js b/ui/src/components/icons/upload.js new file mode 100644 index 00000000..b65c2a30 --- /dev/null +++ b/ui/src/components/icons/upload.js @@ -0,0 +1,9 @@ +import { Baseline } from '../../shared/composers'; +// eslint-disable-next-line no-unused-vars +import React from 'react'; + +import UploadIcon from './svg/upload.svg'; + +export default Baseline( + UploadIcon +); diff --git a/ui/src/components/label/index.js b/ui/src/components/label/index.js index 7b1dc6ff..fe0c9714 100644 --- a/ui/src/components/label/index.js +++ b/ui/src/components/label/index.js @@ -1,11 +1,11 @@ -import { Baseline } from '../../shared/composers'; +import { Baseline, typography } from '../../shared/composers'; import { colors } from '../../shared/constants'; import { remcalc } from '../../shared/functions'; import styled from 'styled-components'; const Label = styled.label` + ${typography.semibold}; font-size: ${remcalc(16)}; - font-weight: 600; font-style: normal; font-stretch: normal; color: ${colors.base.secondary}; diff --git a/ui/src/components/list/description.js b/ui/src/components/list/description.js index 938dcc42..b6d0e49e 100644 --- a/ui/src/components/list/description.js +++ b/ui/src/components/list/description.js @@ -1,14 +1,15 @@ import { Subscriber } from 'react-broadcast'; -import { Baseline } from '../../shared/composers'; +import { Baseline, typography } from '../../shared/composers'; import { remcalc, is, isNot } from '../../shared/functions'; import styled from 'styled-components'; import Title from './title'; import React from 'react'; const StyledTitle = styled(Title)` - font-weight: normal; flex-grow: 2; + ${typography.normal}; + ${isNot('collapsed')` position: absolute; bottom: 0; diff --git a/ui/src/components/list/subtitle.js b/ui/src/components/list/subtitle.js index c470bb4b..cda3094b 100644 --- a/ui/src/components/list/subtitle.js +++ b/ui/src/components/list/subtitle.js @@ -1,6 +1,6 @@ import { Subscriber } from 'react-broadcast'; import styled from 'styled-components'; -import { Baseline, regular } from '../../shared/composers'; +import { Baseline, typography } from '../../shared/composers'; import { remcalc, is } from '../../shared/functions'; import { colors } from '../../shared/constants'; import Title from './title'; @@ -10,7 +10,7 @@ const Span = styled.span` display: inline-block; flex-direction: column; - font-weight: normal; + ${typography.normal}; font-style: normal; font-stretch: normal; font-size: ${remcalc(14)}; @@ -30,7 +30,7 @@ const StyledTitle = styled(Title)` display: inline-block; padding: 0 ${remcalc(18)}; - ${regular}; + ${typography.normal}; ${is('collapsed')` display: flex; diff --git a/ui/src/components/list/title.js b/ui/src/components/list/title.js index ed771265..fea47b6c 100644 --- a/ui/src/components/list/title.js +++ b/ui/src/components/list/title.js @@ -1,6 +1,6 @@ import { Subscriber } from 'react-broadcast'; import isString from 'lodash.isstring'; -import { Baseline, bold } from '../../shared/composers'; +import { Baseline, typography } from '../../shared/composers'; import { colors } from '../../shared/constants'; import { remcalc, is } from '../../shared/functions'; import styled from 'styled-components'; @@ -11,7 +11,7 @@ const Container = styled.div` line-height: 1.5; color: ${colors.base.secondary}; - ${bold} + ${typography.bold} display: flex; flex-direction: row; diff --git a/ui/src/components/metric/button-icon.js b/ui/src/components/metric/button-icon.js new file mode 100644 index 00000000..008b0d87 --- /dev/null +++ b/ui/src/components/metric/button-icon.js @@ -0,0 +1,36 @@ +import styled from 'styled-components'; +import { remcalc } from '../../shared/functions'; +import { colors } from '../../shared/constants'; +import { Baseline } from '../../shared/composers'; +import Button from '../button'; + +const MetricButtonIcon = styled(Button)` + position: relative; + display: flex; + margin: 0; + padding: ${remcalc(18)} ${remcalc(24)}; + float: right; + background-color: ${colors.base.primaryDesaturated}; + line-height: 1.5; + border: none; + border-left: solid ${remcalc(1)} ${colors.base.primaryDesaturated}; + cursor: pointer; + top: auto; + right: auto; + margin-left: 0 !important; + min-width: auto; + + &:hover, + &:focus, + &:active, + &:active:hover, + &:active:focus { + background-color: ${colors.base.primaryHover}; + border: none; + border-left: solid ${remcalc(1)} ${colors.base.primaryDesaturatedHover}; + } +`; + +export default Baseline( + MetricButtonIcon +); diff --git a/ui/src/components/metric/close-button.js b/ui/src/components/metric/close-button.js index e3a2c781..f5339d11 100644 --- a/ui/src/components/metric/close-button.js +++ b/ui/src/components/metric/close-button.js @@ -1,36 +1,20 @@ -import React from 'react'; import styled from 'styled-components'; -import { remcalc } from '../../shared/functions'; import { colors } from '../../shared/constants'; import { Baseline } from '../../shared/composers'; -import CloseIcon from './close.svg'; +import ButtonIcon from './button-icon'; +import CloseIcon from '../icons/close'; +import React from 'react'; -const StyledButton = styled.button` - position: relative; - display: flex; - margin: 0; - padding: ${remcalc(18)} ${remcalc(24)}; - float: right; - background-color: ${colors.base.primaryDesaturated}; - line-height: 1.5; - border: none; - border-left: solid ${remcalc(1)} ${colors.base.primaryDesaturated}; - cursor: pointer; -`; - -const StyledIcon = styled(CloseIcon)` +const StyledCloseIcon = styled(CloseIcon)` fill: ${colors.base.white}; `; -const AddMetricButton = (props) => ( - - - +const CloseButton = (props) => ( + + + ); export default Baseline( - AddMetricButton + CloseButton ); diff --git a/ui/src/components/metric/select.js b/ui/src/components/metric/select.js index fccaf92a..f54f63da 100644 --- a/ui/src/components/metric/select.js +++ b/ui/src/components/metric/select.js @@ -31,8 +31,18 @@ const StyledSelect = styled.select` background-color: ${colors.base.primaryDesaturated}; border: none; border-left: solid ${remcalc(1)} ${colors.base.primaryDesaturated}; - -webkit-appearance: none; + appearance: none; cursor: pointer; + + &:hover, + &:focus, + &:active, + &:active:hover, + &:active:focus { + background-color: ${colors.base.primaryHover}; + border: none; + border-left: solid ${remcalc(1)} ${colors.base.primaryDesaturatedHover}; + } `; const Select = ({ diff --git a/ui/src/components/metric/settings-button.js b/ui/src/components/metric/settings-button.js index 885595ab..0699750d 100644 --- a/ui/src/components/metric/settings-button.js +++ b/ui/src/components/metric/settings-button.js @@ -3,33 +3,10 @@ import styled from 'styled-components'; import { remcalc } from '../../shared/functions'; import { colors } from '../../shared/constants'; import { Baseline } from '../../shared/composers'; -import Button from '../button'; -import SettingsIcon from './icon-settings.svg'; +import ButtonIcon from './button-icon'; +import SettingsIcon from '../icons/settings'; -const StyledButton = styled(Button)` - position: relative; - display: flex; - margin: 0; - padding: ${remcalc(18)} ${remcalc(24)}; - color: ${colors.base.white}; - float: right; - background-color: ${colors.base.primaryDesaturated}; - line-height: 1.5; - border: none; - border-left: solid ${remcalc(1)} ${colors.base.primaryDesaturated}; - - &:hover, - &:focus, - &:active, - &:active:hover, - &:active:focus { - background-color: ${colors.base.primaryLight}; - border: none; - border-left: solid ${remcalc(1)} ${colors.base.primaryDesaturatedHover}; - } -`; - -const StyledIcon = styled(SettingsIcon)` +const StyledSettingsIcon = styled(SettingsIcon)` fill: ${colors.base.primary}; margin-right: ${remcalc(12)}; `; @@ -43,14 +20,14 @@ const AddMetricButton = ({ const handleClick = (e) => onClick(metric); return ( - - + {children} - + ); }; diff --git a/ui/src/components/metric/title.js b/ui/src/components/metric/title.js index 4013a739..719238ad 100644 --- a/ui/src/components/metric/title.js +++ b/ui/src/components/metric/title.js @@ -1,4 +1,4 @@ -import { Baseline } from '../../shared/composers'; +import { Baseline, typography } from '../../shared/composers'; import { colors } from '../../shared/constants'; import { remcalc } from '../../shared/functions'; import styled from 'styled-components'; @@ -8,8 +8,9 @@ const Title = styled.h3` display: flex; align-self: flex-start; margin: ${remcalc(18)} auto ${remcalc(18)} ${remcalc(24)} !important; + + ${typography.normal}; font-size: ${remcalc(16)}; - font-weight: normal; font-style: normal; line-height: 1.5; color: ${colors.base.white}; diff --git a/ui/src/components/mini-metric/subtitle.js b/ui/src/components/mini-metric/subtitle.js index 78d6ed43..e39a2f85 100644 --- a/ui/src/components/mini-metric/subtitle.js +++ b/ui/src/components/mini-metric/subtitle.js @@ -1,5 +1,5 @@ import { remcalc } from '../../shared/functions'; -import { Baseline } from '../../shared/composers'; +import { Baseline, typography } from '../../shared/composers'; import { colors } from '../../shared/constants'; import styled from 'styled-components'; @@ -7,8 +7,9 @@ const Subtitle = styled.p` margin: 0; text-align: right; font-size: ${remcalc(12)}; + + ${typography.normal}; line-height: ${remcalc(18)}; - font-weight: normal; font-style: normal; font-stretch: normal; color: ${colors.regular}; diff --git a/ui/src/components/mini-metric/title.js b/ui/src/components/mini-metric/title.js index 1fc2cea1..9af65c8a 100644 --- a/ui/src/components/mini-metric/title.js +++ b/ui/src/components/mini-metric/title.js @@ -1,17 +1,19 @@ import { remcalc } from '../../shared/functions'; -import { Baseline } from '../../shared/composers'; +import { Baseline, typography } from '../../shared/composers'; import { colors } from '../../shared/constants'; import styled from 'styled-components'; const Title = styled.h3` margin: 0; + margin-bottom: ${remcalc(3)} !important; + + ${typography.semibold}; text-align: right; font-size: ${remcalc(14)}; - font-weight: 600; font-style: normal; line-height: 1.29; + color: ${colors.semibold}; - margin-bottom: ${remcalc(3)} !important; `; export default Baseline( diff --git a/ui/src/components/modal/story.js b/ui/src/components/modal/story.js index 4c652452..429bc716 100644 --- a/ui/src/components/modal/story.js +++ b/ui/src/components/modal/story.js @@ -1,6 +1,6 @@ import { storiesOf } from '@kadira/storybook'; import Modal from './'; -import Close from '../close'; +import { Close } from '../icons'; import React from 'react'; storiesOf('Modal', module) diff --git a/ui/src/components/notification/index.js b/ui/src/components/notification/index.js index 1845d292..0822dd94 100644 --- a/ui/src/components/notification/index.js +++ b/ui/src/components/notification/index.js @@ -1,9 +1,10 @@ import { remcalc } from '../../shared/functions'; import { colors } from '../../shared/constants'; import { baseBox, pseudoEl, Baseline } from '../../shared/composers'; +import { ButtonIcon } from '../button'; +import CloseIcon from '../icons/close'; import styled from 'styled-components'; import React from 'react'; -import Close from '../close'; const StyledNotification = styled.div` display: inline-block; @@ -35,7 +36,9 @@ const Notificaton = ({ ...props }) => { const renderClose = !close ? null : ( - + + + ); return ( diff --git a/ui/src/components/payment-card/payment-card.js b/ui/src/components/payment-card/payment-card.js index 25667c99..b84cb85c 100644 --- a/ui/src/components/payment-card/payment-card.js +++ b/ui/src/components/payment-card/payment-card.js @@ -3,14 +3,10 @@ import { remcalc } from '../../shared/functions'; import { Baseline } from '../../shared/composers'; import { boxes, colors } from '../../shared/constants'; -import MastercardIcon from './mastercard.svg'; +import PaymentCardIcon, { types } from '../icons/payment-card'; import styled from 'styled-components'; import React from 'react'; -const icons = { - mastercard: MastercardIcon -}; - const sizes = { small: { width: 50, @@ -45,20 +41,15 @@ const PaymentCard = ({ size = 'small', ...props }) => { - const icon = React.createElement( - icons[type], - sizes[size] - ); - const view = { small: () => ( - {icon} + ), large: () => ( - {icon} + ) }; @@ -71,9 +62,7 @@ PaymentCard.propTypes = { 'small', 'large' ]), - type: React.PropTypes.oneOf([ - 'mastercard' - ]).isRequired + type: React.PropTypes.oneOf(types).isRequired }; export default Baseline( diff --git a/ui/src/components/topology-old/index.js b/ui/src/components/topology-old/index.js deleted file mode 100644 index 36143b56..00000000 --- a/ui/src/components/topology-old/index.js +++ /dev/null @@ -1,415 +0,0 @@ -import styled from 'styled-components'; -import { remcalc } from '../../shared/functions'; -import { Baseline } from '../../shared/composers'; -import { colors } from '../../shared/constants'; -import React from 'react'; -import d3 from 'd3'; - -/* eslint-disable */ -function rightRoundedRect(x, y, width, height, radius) { - return 'M' + x + ',' + y // Move to top left (absolute) - + 'h ' + (width - 2 * radius) // Horizontal line to (relative) - + 'a ' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + radius // Relative arc - + 'v ' + (height - 2 * radius) // Vertical line to (relative) - + 'a ' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + radius // Relative arch - + 'h ' + (2 * radius - width) // Horizontal lint to (relative) - + 'z '; // path back to start -} -/* eslint-enable */ - -/* eslint-disable */ -function leftRoundedRect(x, y, width, height, radius) { - return 'M' + (x + width) + ',' + y // Move to (absolute) start at top-right - + 'v ' + height // Vertical line to (relative) - + 'h ' + (2 * radius - width) // Horizontal line to (relative) - + 'a ' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + -radius // Relative arc - + 'v ' + -(height - 2 * radius) // Vertical line to (relative) - + 'a ' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + -radius // Relative arch - + 'z '; // path back to start -} -/* eslint-enable */ - -function topRoundedRect(x, y, width, height, radius) { - return 'M' + x + ',' + -(y - height) // Move to (absolute) start at bottom-left - + 'v ' + -(height - radius) // Vertical line to (relative) - + 'a ' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + -radius // Relative arc - + 'h ' + -(2 * radius - width) // Horizontal line to (relative) - + 'a ' + radius + ',' + radius + ' 0 0 1 ' + radius + ',' + radius // Relative arc - + 'v ' + (height - radius) // Vertical line to (relative) - + 'h ' + (2 * radius - width) // Horizontal line to (relative) - + 'z '; // path back to start -} - -function bottomRoundedRect(x, y, width, height, radius) { - return 'M' + x + ',' + -(y - (height - 2 * radius)) // Move to (absolute) start at bottom-right - + 'v ' + -(height - 2 * radius) // Vertical line to (relative) - + 'h ' + (width) // Horizontal line to (relative) - + 'v ' + (height - 2 * radius) // Vertical line to (relative) - + 'a ' + -radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + radius // Relative arc - + 'h ' + (2 * radius - width) // Horizontal line to (relative) - + 'a ' + radius + ',' + radius + ' 0 0 1 ' + -radius + ',' + -radius // Relative arc - + 'z '; // path back to start -} - -/* eslint-disable */ -function rect(x, y, width, height) { - return 'M' + x + ',' + -(y - height) // Move to (absolute) start at bottom-right - + 'v ' + -(height) // Vertical line to (relative) - + 'h ' + width // Horizontal line to (relative) - + 'v ' + height // Vertical line to (relative) - + 'h ' + -(width) // Horizontal line to (relative) - + 'z '; // path back to start -} -/* eslint-enable */ - -const StyledSVGContainer = styled.svg` - & { - .links line { - stroke: #343434; - stroke-opacity: 1; - } - - .health, .health_warn { - font-family: "LibreFranklin"; - font-size: ${remcalc(12)}; - font-weight: bold; - font-style: normal; - font-stretch: normal; - text-align: center; - } - - .health_warn { - font-size: ${remcalc(15)}; - } - - .stat { - font-family: "LibreFranklin"; - font-size: ${remcalc(12)}; - font-weight: normal; - font-style: normal; - font-stretch: normal; - line-height: 1.5; - } - - .node_statistics { - font-family: "LibreFranklin"; - font-size: ${remcalc(12)}; - font-weight: normal; - font-style: normal; - font-stretch: normal; - line-height: 1.5; - } - - .node_statistics p { - margin: 0 0 0 0; - color: rgba(255, 255, 255, 0.8); - } - - .primary, .secondary { - font-family: "LibreFranklin"; - font-size: ${remcalc(12)}; - font-weight: normal; - font-style: normal; - font-stretch: normal; - line-height: 1.5; - } - - .info_text { - font-family: "LibreFranklin"; - font-size: ${remcalc(16)}; - font-weight: 600; - font-style: normal; - font-stretch: normal; - line-height: 1.5; - } - } -`; - -class TopologyGraph extends React.Component { - constructor(props) { - super(props); - - this.svg = null; - - const { - width, - height - } = props; - - this.simulation = d3.forceSimulation() - .force('charge', d3.forceManyBody() - .strength(() => -50) - .distanceMin(() => 30)) - .force('link', d3.forceLink().distance(() => 200).id((d) => d.id)) - // TODO manually handle looking for collisions in the tick, we then get the BBox - // and keep moving things for a while to try to get a fit. - .force('collide', - d3.forceCollide().radius((d) => 220 + 0.5).iterations(15)) - .force('center', d3.forceCenter(width * 1/3, height * 1/3)); - } - - componentDidMount() { - const component = this; - - const { - simulation - } = this; - - const svg = d3.select(this._refs.svg); - const { - width, - height, - graph = { - nodes: [], - links: [] - } - } = this.props; - - // Drawing the links between nodes - const link = svg.append('g') - .attr('class', 'links') - .selectAll('line') - .data(graph.links) - .enter().append('line') - .attr('stroke-width', remcalc(12)); - - // And svg group, to contain all of the attributes in @antonas' first prototype - svg.selectAll('.node') - .data(graph.nodes) - .enter() - .append('g') - .attr('class', 'node_group'); - - svg.selectAll('.node_group').each(function(d) { - // Create different type of node for services with Primaries + Secondaries - // We could extend this further to allow us to have as many nested services - // as wanted. - // TODO handle this per prop - // if (d.id === 'Percona') { - // createExtendedNode(d3.select(this)); - // } else { - component.createServiceNodes(d, d3.select(this)); - // } - }); - - simulation - .nodes(graph.nodes) - .on('tick', ticked); - - simulation.force('link') - .links(graph.links); - - function contrain(dimension, r, z) { - return Math.max(0, Math.min(dimension - r, z)); - } - - function ticked() { - // TODO: Think of a common way of extracting the bounding boxes for each - // item and to grab the x{1,2} and y{1,2} values. - link - .attr('x1', function(d) { - let x; - svg.selectAll('.node_group').each(function(_, i) { - if (i !== d.source.index) return; - x = d3.select(this).node().getBBox().width; - }); - return contrain(width, x, d.source.x) + 80; - }) - .attr('y1', function(d) { - let y; - svg.selectAll('.node_group').each(function(_, i) { - if (i !== d.source.index) return; - y = d3.select(this).node().getBBox().height; - }); - return contrain(height, y, d.source.y) + 24; - }) - .attr('x2', function(d) { - let x; - svg.selectAll('.node_group').each(function(_, i) { - if (i !== d.target.index) return; - x = d3.select(this).node().getBBox().width; - }); - return contrain(width, x, d.target.x) + 80; - }) - .attr('y2', function(d) { - let y; - svg.selectAll('.node_group').each(function(_, i) { - if (i !== d.target.index) return; - y = d3.select(this).node().getBBox().height; - }); - return contrain(height, y, d.target.y) + 24; - }); - - svg.selectAll('.node_group') - .attr('transform', function(d) { - const x = d3.select(this).node().getBBox().width; - const y = d3.select(this).node().getBBox().height; - return 'translate(' + contrain(width, x, d.x) + ',' - + contrain(height, y, d.y) + ')'; - }); - } - } - - createHealthCheckBadge(element, x, y) { - const paddingLeft = 30; - const health = element.append('g'); - - // TODO: replace these element with the designed SVG elements from - // @antonasdeduchovas' designs with full svg elements. - - health.append('circle') - .attr('class', 'alert') - .attr('cx', function() { - return element - .node() - .getBBox() - .width + paddingLeft; - }) - .attr('cy', '24') - .attr('stroke-width', 0) - .attr('fill', (d) => - d.id === 'Memcached' ? 'rgb(217, 77, 68)' : 'rgb(0,175,102)') - .attr('r', remcalc(9)); - - // An icon or label that exists within the circle, inside the infobox - health.append('text') - .attr('class', 'health') - .attr('x', function() { - return element - .node() - .getBBox() - .width + 3; - }) - .attr('y', '29') - .attr('text-anchor', 'middle') - .attr('fill', colors.brandPrimaryColor) - .text((d) => d.id === 'Memcached' ? '!' : '❤'); - } - - createServiceNodeBody(data, element, d) { - const stats = element.append('g'); - stats.append('path') - .attr('class', 'node') - .attr('d', d) - .attr('stroke', '#343434') - .attr('stroke-width', remcalc(1)) - .attr('fill', '#464646'); - - const html = stats - .append('switch') - .append('foreignObject') - .attr('requiredFeatures', - 'http://www.w3.org/TR/SVG11/feature#Extensibility') - .attr('x', 12) - .attr('y', 57) - .attr('width', 160) - .attr('height', 70) - // From here everything will be rendered with react using a ref. - // However for now these values are hard-coded. - .append('xhtml:div') - .attr('class', 'node_statistics'); - // Remove with react + dyanmic data. - - html.selectAll('.node_statistics').data(data.metrics).enter() - .append('p') - .text((d) => `${d.name}: ${d.stat}`); - } - - createServiceNodes(data, elm) { - const component = this; - - const { - dragged, - dragstarted, - dragended - } = this; - - const width = 170; - const topHeight = 47; - const radius = 4; - - // Box where label will live - elm.append('path') - .attr('class', 'node') - .attr('d', topRoundedRect('0', '0', width, topHeight, radius)) - .attr('stroke', colors.topologyBackground) - .attr('stroke-width', remcalc(1)) - .attr('fill', colors.brandSecondaryColor); - - const text = elm.append('g'); - - text.append('text') - .attr('class', 'info_text') - .attr('x', '12') - .attr('y', '30') - .attr('text-anchor', 'start') - .attr('fill', colors.brandPrimaryColor) - .text(d => d.id); - - // if (service is registered twice in the scheduler) { - // Do not show healthcheck in the header - // } else { - this.createHealthCheckBadge(text); - // } - - // if (service is registered twice in the scheduler) { - // this.createServiceNodeBody(data, elm, rect('0',`-${topHeight}`, width, 78, 4)); - // } else { - this.createServiceNodeBody(data, elm, - bottomRoundedRect('0', `-${topHeight}`, width, 78, 4)); - // } - - // <==== END ====> - - // Set up movement for service nodes - elm.call(d3.drag() - .on('start', dragstarted.bind(component)) - .on('drag', dragged.bind(component)) - .on('end', dragended.bind(component))); - } - - - dragstarted(d) { - if (!d3.event.active) this.simulation.alphaTarget(0.3).restart(); - d.fx = d.x; - d.fy = d.y; - } - - dragged(d) { - d.fx = d3.event.x; - d.fy = d3.event.y; - } - - dragended(d) { - if (!d3.event.active) this.simulation.alphaTarget(0); - d.fx = null; - d.fy = null; - } - - ref(name) { - this._refs = this._refs || {}; - - return (el) => { - this._refs[name] = el; - }; - } - - render() { - return ( - - ); - } -} - -TopologyGraph.propTypes = { - graph: React.PropTypes.object, - height: React.PropTypes.number, - width: React.PropTypes.number -}; - -export default Baseline( - TopologyGraph -); diff --git a/ui/src/components/topology-old/story.js b/ui/src/components/topology-old/story.js deleted file mode 100644 index bdc3a5af..00000000 --- a/ui/src/components/topology-old/story.js +++ /dev/null @@ -1,117 +0,0 @@ -import { storiesOf } from '@kadira/storybook'; -import Topology from './'; -import TopologyView from './view'; -import React from 'react'; - -const services = { - nodes: [{ - id: 'Nginx', - attrs: { - dcs: 1, - instances: 2, - healthy: true - }, - metrics: [{ - name: 'CPU', - stat: '50%' - }, { - name: 'Memory', - stat: '20%' - }, { - name: 'Network', - stat: '5.9KB/sec' - }] - }, { - id: 'WordPress', - attrs: { - dcs: 1, - instances: 2, - healthy: true - }, - metrics: [{ - name: 'CPU', - stat: '50%' - }, { - name: 'Memory', - stat: '20%' - }, { - name: 'Network', - stat: '5.9KB/sec' - }] - }, { - id: 'Memcached', - attrs: { - dcs: 1, - instances: 2, - healthy: true - }, - metrics: [{ - name: 'CPU', - stat: '50%' - }, { - name: 'Memory', - stat: '20%' - }, { - name: 'Network', - stat: '5.9KB/sec' - }] - }, { - id: 'Percona', - attrs: { - dcs: 1, - instances: 2, - healthy: true - }, - metrics: [{ - name: 'CPU', - stat: '50%' - }, { - name: 'Memory', - stat: '20%' - }, { - name: 'Network', - stat: '5.9KB/sec' - }] - }, { - id: 'NFS', - attrs: { - dcs: 1, - instances: 2, - healthy: true - }, - metrics: [{ - name: 'CPU', - stat: '50%' - }, { - name: 'Memory', - stat: '20%' - }, { - name: 'Network', - stat: '5.9KB/sec' - }] - }], - links: [{ - source: 'Nginx', - target: 'WordPress' - }, { - source: 'WordPress', - target: 'Memcached' - }, { - source: 'WordPress', - target: 'NFS' - }, { - source: 'WordPress', - target: 'Percona' - }] -}; - -storiesOf('Topology', module) - .add('5 services', () => ( - - - - )); diff --git a/ui/src/components/topology-old/view.js b/ui/src/components/topology-old/view.js deleted file mode 100644 index 5dfbfdc1..00000000 --- a/ui/src/components/topology-old/view.js +++ /dev/null @@ -1,27 +0,0 @@ -import { remcalc } from '../../shared/functions'; -import { Baseline } from '../../shared/composers'; -import { colors } from '../../shared/constants'; -import styled from 'styled-components'; -import React from 'react'; - -const TopologyView = styled.div` - border: ${remcalc(1)} solid ${colors.borderSecondary}; - background-color: ${colors.brandSecondary}; -`; - -const Topology = ({ - children, - ...props -}) => ( - - {children} - -); - -Topology.propTypes = { - children: React.PropTypes.node -}; - -export default Baseline( - Topology -); diff --git a/ui/src/shared/composers/index.js b/ui/src/shared/composers/index.js index dfe50c34..70761174 100644 --- a/ui/src/shared/composers/index.js +++ b/ui/src/shared/composers/index.js @@ -3,6 +3,13 @@ import camelCase from 'camel-case'; import { boxes } from '../constants'; import { unitcalc } from '../functions'; +import { + libreFranklin, + bold, + semibold, + normal +} from './typography'; + const sides = [ 'top', 'right', @@ -98,12 +105,9 @@ export const clearfix = css` } `; -export { +export const typography = { libreFranklin, - libreFranklinSemiBold, - libreFranklinBold, bold, - regular, - titleColor, - bodyColor -} from './typography'; + semibold, + normal +}; diff --git a/ui/src/shared/composers/typography.js b/ui/src/shared/composers/typography.js index e5033381..02f4bfe6 100644 --- a/ui/src/shared/composers/typography.js +++ b/ui/src/shared/composers/typography.js @@ -1,30 +1,26 @@ import { css } from 'styled-components'; -import { colors } from '../../shared/constants'; export const libreFranklin = ` - font-family: 'LibreFranklin', Helvetica, sans-serif; -`; - -export const libreFranklinSemiBold = ` - font-family: 'LibreFranklin-Semi-Bold', Helvetica, sans-serif; -`; - -export const libreFranklinBold = ` - font-family: 'LibreFranklin-Bold', Helvetica, sans-serif; + font-family: 'Libre Franklin', + -apple-system, + BlinkMacSystemFont, + "Segoe UI", + Roboto, + Oxygen-Sans, + Ubuntu, + Cantarell, + Helvetica, + sans-serif; `; export const bold = css` + font-weight: 700; +`; + +export const semibold = css` font-weight: 600; `; -export const regular = css` - font-weight: normal; -`; - -export const titleColor = css` - color: ${colors.base.secondary}; -`; - -export const bodyColor = css` - color: ${colors.base.text}; +export const normal = css` + font-weight: 400; `; diff --git a/ui/test/index.js b/ui/test/index.js index e120248d..3d5bf512 100644 --- a/ui/test/index.js +++ b/ui/test/index.js @@ -25,7 +25,7 @@ test('renders