From 730eaae3d6561bcb0daa1859d42331df63f656f0 Mon Sep 17 00:00:00 2001 From: Luke Hollis Date: Fri, 7 Feb 2020 17:08:44 -0500 Subject: [PATCH 1/5] add ui system to be configured for project --- backend/config/urls.py | 1 + frontend/src/UILibrary/System.js | 44 ++++ frontend/src/UILibrary/scss/_animation.scss | 28 +++ frontend/src/UILibrary/scss/_reset.scss | 71 ++++++ frontend/src/UILibrary/scss/_variables.scss | 45 ++++ frontend/src/UILibrary/scss/index.scss | 211 ++++++++++++++++++ .../UILibrary/scss/mixins/_aspect-ratio.scss | 44 ++++ .../UILibrary/scss/mixins/_breakpoints.scss | 71 ++++++ .../scss/mixins/_skeletonLoader.scss | 25 +++ .../UILibrary/scss/mixins/_typography.scss | 114 ++++++++++ frontend/src/UILibrary/styles.scss | 6 +- frontend/src/UILibrary/tokens/Chip.js | 18 ++ frontend/src/UILibrary/tokens/Chip.scss | 13 ++ frontend/src/UILibrary/tokens/Colors.js | 115 ++++++++++ frontend/src/UILibrary/tokens/Colors.scss | 135 +++++++++++ frontend/src/UILibrary/tokens/Font.js | 68 ++++++ frontend/src/UILibrary/tokens/Token.js | 39 ++++ frontend/src/UILibrary/tokens/Typography.js | 89 ++++++++ frontend/src/UILibrary/tokens/Typography.scss | 47 ++++ frontend/src/app.js | 2 + 20 files changed, 1184 insertions(+), 2 deletions(-) create mode 100644 frontend/src/UILibrary/System.js create mode 100644 frontend/src/UILibrary/scss/_animation.scss create mode 100644 frontend/src/UILibrary/scss/_reset.scss create mode 100644 frontend/src/UILibrary/scss/_variables.scss create mode 100644 frontend/src/UILibrary/scss/index.scss create mode 100644 frontend/src/UILibrary/scss/mixins/_aspect-ratio.scss create mode 100644 frontend/src/UILibrary/scss/mixins/_breakpoints.scss create mode 100644 frontend/src/UILibrary/scss/mixins/_skeletonLoader.scss create mode 100644 frontend/src/UILibrary/scss/mixins/_typography.scss create mode 100644 frontend/src/UILibrary/tokens/Chip.js create mode 100644 frontend/src/UILibrary/tokens/Chip.scss create mode 100644 frontend/src/UILibrary/tokens/Colors.js create mode 100644 frontend/src/UILibrary/tokens/Colors.scss create mode 100644 frontend/src/UILibrary/tokens/Font.js create mode 100644 frontend/src/UILibrary/tokens/Token.js create mode 100644 frontend/src/UILibrary/tokens/Typography.js create mode 100644 frontend/src/UILibrary/tokens/Typography.scss diff --git a/backend/config/urls.py b/backend/config/urls.py index 73570bf..b54ef92 100644 --- a/backend/config/urls.py +++ b/backend/config/urls.py @@ -54,4 +54,5 @@ def edx_path(route, component_name): edx_path('map_quiz/', 'MapQuiz'), edx_path('budget_voting_simulation/', 'BudgetVotingSimViz'), edx_path('heat_map/', 'DemocracyViz'), + edx_path('system/', 'System'), ] diff --git a/frontend/src/UILibrary/System.js b/frontend/src/UILibrary/System.js new file mode 100644 index 0000000..c3e0be7 --- /dev/null +++ b/frontend/src/UILibrary/System.js @@ -0,0 +1,44 @@ +import React from 'react'; + +import Colors from './tokens/Colors'; +import Typography from './tokens/Typography'; + + +const System = () => ( +
+

DHLab UI Library

+ +

+ A collection of all the components that make the DHLab Prespectives from + Africa Library. We leverage + + Bootstrap + + and the + + the React Bootstrap library + . + Make sure to try to use components you see here — this will keep our user + experience and code consistent. +

+ +

+ We don't make use of all the components in the React library. Either because + we didn't yet find the use case, and sometimes because some of them + aren't so great, so please check here for our Officially Supported Components™. + This library will grow over time and you're free to suggest additions and + changes over in the + #general + Slack channel. But, please don't go yolo-adding + random React components into the codebase that'll end up siloed and a pain to + deal with later. All components that we use in the main codebase + need to be documented here. If you have any design or development questions, + holla at a staff member on Slack. +

+ + + +
+); + +export default System; diff --git a/frontend/src/UILibrary/scss/_animation.scss b/frontend/src/UILibrary/scss/_animation.scss new file mode 100644 index 0000000..6a06229 --- /dev/null +++ b/frontend/src/UILibrary/scss/_animation.scss @@ -0,0 +1,28 @@ +@keyframes animationFadeIn { + 0 { + opacity: 0; + } + 100% { + opacity: 1; + } +} + +@keyframes animationFadeOut { + 0 { + opacity: 1; + visibility: visible; + } + 100% { + opacity: 0; + visibility: hidden; + } +} + +@keyframes animationSkeleton { + 0 { + transform: translateX(-100%); + } + 100% { + transform: translateX(100%); + } +} diff --git a/frontend/src/UILibrary/scss/_reset.scss b/frontend/src/UILibrary/scss/_reset.scss new file mode 100644 index 0000000..bb4ef0f --- /dev/null +++ b/frontend/src/UILibrary/scss/_reset.scss @@ -0,0 +1,71 @@ +/* http://meyerweb.com/eric/tools/css/reset/ + v2.0 | 20110126 + License: none (public domain) +*/ + +html, body, div, span, applet, object, iframe, +h1, h2, h3, h4, h5, h6, p, blockquote, pre, +a, abbr, acronym, address, big, cite, code, +del, dfn, em, img, ins, kbd, q, s, samp, +small, strike, strong, sub, sup, tt, var, +b, u, i, center, +dl, dt, dd, ol, ul, li, +fieldset, form, label, legend, +table, caption, tbody, tfoot, thead, tr, th, td, +article, aside, canvas, details, embed, +figure, figcaption, footer, header, hgroup, +menu, nav, output, ruby, section, summary, +time, mark, audio, video { + margin: 0; + padding: 0; + border: 0; + font-size: 100%; + font: inherit; + vertical-align: baseline; +} +/* HTML5 display-role reset for older browsers */ +article, aside, details, figcaption, figure, +footer, header, hgroup, menu, nav, section { + display: block; +} +body { + line-height: 1; +} +ol, ul { + list-style: none; +} +blockquote, q { + quotes: none; +} +blockquote:before, blockquote:after, +q:before, q:after { + content: ''; + content: none; +} +table { + border-collapse: collapse; + border-spacing: 0; +} +button { + border: none; + margin: 0; + padding: 0; + width: auto; + overflow: visible; + + background: transparent; + + /* inherit font & color from ancestor */ + color: inherit; + font: inherit; + + /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */ + line-height: normal; + + /* Corrects font smoothing for webkit */ + -webkit-font-smoothing: inherit; + -moz-osx-font-smoothing: inherit; + + /* Corrects inability to style clickable `input` types in iOS */ + -webkit-appearance: none; +} diff --git a/frontend/src/UILibrary/scss/_variables.scss b/frontend/src/UILibrary/scss/_variables.scss new file mode 100644 index 0000000..73bf736 --- /dev/null +++ b/frontend/src/UILibrary/scss/_variables.scss @@ -0,0 +1,45 @@ +/****************************************************************************** +1. Colors +******************************************************************************/ + +/****************************************************************************** +1.1 Base Colors +******************************************************************************/ +$black: #000000; +$white: #FFFFFF; +$red: #BC1C00; /* use only on error messages! */ +$color_grey_50: #FAFAFA; +$color_grey_100: #F5F5F5; +$color_grey_200: #EEEEEE; +$color_grey_300: #E0E0E0; +$color_grey_400: #BDBDBD; +$color_grey_500: #9E9E9E; +$color_grey_600: #757575; +$color_grey_700: #616161; +$color_grey_800: #424242; +$color_grey_900: #212121; + +/****************************************************************************** +1.2 Brand Colors +******************************************************************************/ +$color_primary_50: #EDE1E8; +$color_primary_100: #D1B3C5; +$color_primary_200: #B3819E; +$color_primary_300: #944E77; +$color_primary_400: #7D2859; +$color_primary_500: #66023C; +$color_primary_600: #5E0236; +$color_primary_700: #53012E; +$color_primary_800: #490127; +$color_primary_900: #38011A; + + +/****************************************************************************** +2. Mixins +******************************************************************************/ +@import "mixins/aspect-ratio"; +@import "mixins/breakpoints"; +@import "mixins/skeletonLoader"; +@import "mixins/typography"; + +@import "animation"; diff --git a/frontend/src/UILibrary/scss/index.scss b/frontend/src/UILibrary/scss/index.scss new file mode 100644 index 0000000..cd90a73 --- /dev/null +++ b/frontend/src/UILibrary/scss/index.scss @@ -0,0 +1,211 @@ +@import '_reset'; +@import '_variables'; + +// https://www.paulirish.com/2012/box-sizing-border-box-ftw/ +html { + box-sizing: border-box; +} +*, *:before, *:after { + box-sizing: inherit; +} + +html { + font-size: 80%; + + @include breakpoint2 { + font-size: 100%; + } +} + +// loading +body.-loading { + cursor: progress; + + button, a, span, p, a, input, div { + cursor: progress !important; + } +} + +body, input, p { + @include font_body1; +} + +section { + padding: 30px 0; + @include breakpoint2 { + padding: 90px 0; + } + + img { + margin: 0 auto; + } +} + +h1 { + @include font_heading1; + margin-bottom: 2rem; +} + +h2 { + @include font_heading2; + margin-bottom: 1rem; +} + +h3 { + @include font_heading3; + margin-bottom: 0.7rem; +} + +h4 { + @include font_heading4; + margin-bottom: 0.5rem; +} + +h5 { + @include font_heading5; + margin-bottom: 0.5rem; +} + +h6 { + @include font_heading6; + margin-bottom: 0.5rem; +} + +body { + @include font_body1; + color: $black; + margin: 0; + padding: 0; +} + +img { + height: auto; + max-width: 100%; +} + +figcaption { + padding: 0.5rem 0.5rem 1.2rem !important; + text-align: center; + + &, a { + color: $color_grey_600 !important; + } + + a { + font-weight: 400; + } +} + +p, blockquote { + margin: 0.5rem 0 1.5rem; + + a { + cursor: pointer; + font-weight: 600; + line-height: 1.2; + &:hover { + color: $color_primary_700; + } + } +} + +a { + color: $color_primary_500; +} + +blockquote { + border-color: $color_primary_500; + border-style: solid; + border-left-width: 3px; + font-style: italic; + letter-spacing: -0.02rem; + padding-left: 10px; + @include breakpoint2 { + border-left-width: 5px; + padding-left: 15px; + } +} + +strong, b { + font-weight: 700; +} + +hr { + background: $color_primary_100; + border: none; + height: 1px; + margin: 6rem auto; + max-width: 440px; +} + +.caption { + @include font_caption; +} + +.overline { + @include font_overline; + margin-bottom: 0.5rem; +} + +.subtitle { + @include font_subtitle; +} + +button { + @include font_body1; + -webkit-appearance: none; + background: none; + border: none; + cursor: pointer; + line-height: 1; + padding: 0; +} + +ul, ol { + margin: 0.5rem 0 1.5rem; + padding-left: 1rem; +} + +ul { + list-style-type: disc; +} + +ol { + list-style-type: decimal; +} + +label { + display: inline-block; + padding-bottom: 0.5rem; +} + +input, textarea { + border: 1px solid $color_grey_500; + display: block; + margin-bottom: 20px; + padding: 10px; + width: 100%; +} + +textarea { + min-height: 10rem; +} + +// Hacks + +/* Remove scroll on the body when react-modal is open */ +.ReactModal__Body--open { + overflow: hidden; +} + +body { + &.js-showing-modal { + [data-reactroot] { + > div:first-child { + height: 100vh; + overflow: hidden; + position: fixed; + } + } + } +} diff --git a/frontend/src/UILibrary/scss/mixins/_aspect-ratio.scss b/frontend/src/UILibrary/scss/mixins/_aspect-ratio.scss new file mode 100644 index 0000000..53533fc --- /dev/null +++ b/frontend/src/UILibrary/scss/mixins/_aspect-ratio.scss @@ -0,0 +1,44 @@ +/// A formula for making an embedded video responsive (oftentimes, an iframe, embed, or object). Apply it to the parent container. +/// **Note:** Some older players may require some additional spacing for the player controls. You can do so by adding `padding-top` to the parent container. +/// @param {Fraction} $aspect-ratio [16/9] - Desired aspect ratio, such as 16/9, 4/3, etc. +/// @param {Selector} $target [> *] - (Optional) Video object selector +/// @link http://codepen.io/upstatement/pen/YXBxrV See it on Codepen +/// @example scss - SCSS +/// .video-wrapper { +/// @include aspect-ratio(16/9); +/// //@include aspect-ratio(4/3); +/// //@include aspect-ratio(2.35/1, ".video-embed"); +/// } +/// +/// @example css - CSS Output +/// .responsive-video { +/// position: relative; +/// padding-bottom: 56.25%; +/// height: 0; +/// margin-bottom: 50px; +/// } +/// .responsive-video > * { +/// position: absolute; +/// top: 0; +/// left: 0; +/// width: 100%; +/// height: 100%; +/// } +/// + + + +@mixin aspect-ratio($aspect-ratio: 16/9, $target:"> *") { + $aspect-percentage: percentage(1 / ($aspect-ratio)); + height: 0; + position: relative; + padding-bottom: $aspect-percentage; + + #{$target} { + position: absolute; + top: 0; + left: 0; + width: 100%; + height: 100%; + } +} diff --git a/frontend/src/UILibrary/scss/mixins/_breakpoints.scss b/frontend/src/UILibrary/scss/mixins/_breakpoints.scss new file mode 100644 index 0000000..47b49fa --- /dev/null +++ b/frontend/src/UILibrary/scss/mixins/_breakpoints.scss @@ -0,0 +1,71 @@ +@mixin breakpoint1 { + @media (min-width: 400px) { + @content; + } +} + +@mixin elementBreakpoint1 { + &[min-width~="400px"] { + @content; + } +} + +@mixin breakpoint2 { + @media (min-width: 600px) { + @content; + } +} + +@mixin elementBreakpoint2 { + &[min-width~="600px"] { + @content; + } +} + +@mixin breakpoint3 { + @media (min-width: 800px) { + @content; + } +} + +@mixin elementBreakpoint3 { + &[min-width~="800px"] { + @content; + } +} + +@mixin breakpoint4 { + @media (min-width: 1000px) { + @content; + } +} + +@mixin elementBreakpoint4 { + &[min-width~="1000px"] { + @content; + } +} + +@mixin breakpoint5 { + @media (min-width: 1200px) { + @content; + } +} + +@mixin elementBreakpoint5 { + &[min-width~="1200px"] { + @content; + } +} + +@mixin breakpoint6 { + @media (min-width: 1400px) { + @content; + } +} + +@mixin elementBreakpoint6 { + &[min-width~="1400px"] { + @content; + } +} diff --git a/frontend/src/UILibrary/scss/mixins/_skeletonLoader.scss b/frontend/src/UILibrary/scss/mixins/_skeletonLoader.scss new file mode 100644 index 0000000..353fae7 --- /dev/null +++ b/frontend/src/UILibrary/scss/mixins/_skeletonLoader.scss @@ -0,0 +1,25 @@ +@mixin skeletonLoader { + background-color: $color_grey_200; + overflow: hidden; + position: relative; + text-indent: -9999px; + &::before { + animation: animationSkeleton 1s infinite; + background: linear-gradient(90deg, $color_grey_200 0%, darken($color_grey_200, 3%) 30%, darken($color_grey_200, 3%) 70%, $color_grey_200 100%); + content: ''; + height: 100%; + left: 0; + position: absolute; + top: 0; + transform: translateX(-100%); + width: 100%; + } +} + +@mixin skeletonLoaderDark { + @include skeletonLoader; + background-color: $color_grey_800; + &::before { + background: linear-gradient(90deg, $color_grey_800 0%, lighten($color_grey_800, 3%) 30%, lighten($color_grey_800, 3%) 70%, $color_grey_800 100%); + } +} diff --git a/frontend/src/UILibrary/scss/mixins/_typography.scss b/frontend/src/UILibrary/scss/mixins/_typography.scss new file mode 100644 index 0000000..8f55550 --- /dev/null +++ b/frontend/src/UILibrary/scss/mixins/_typography.scss @@ -0,0 +1,114 @@ +@mixin font_heading1 { + font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Liberation Sans", Noto, sans-serif; + font-size: 3rem; + font-weight: 900; + letter-spacing: -0.1rem; + line-height: 1; + + @include breakpoint2 { + font-size: 4rem; + } +} + +@mixin font_heading2 { + font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Liberation Sans", Noto, sans-serif; + font-size: 2rem; + font-weight: 700; + letter-spacing: -0.03rem; + line-height: 1.2; + + @include breakpoint2 { + font-size: 3rem; + } +} + +@mixin font_heading3 { + font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Liberation Sans", Noto, sans-serif; + font-size: 1.4rem; + font-weight: 500; + line-height: 1.3; + + @include breakpoint2 { + font-size: 2rem; + } +} + +@mixin font_heading4 { + font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Liberation Sans", Noto, sans-serif; + font-size: 1.2rem; + font-weight: 500; + line-height: 1.3; + + @include breakpoint2 { + font-size: 1.4rem; + } +} + +@mixin font_heading5 { + font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Liberation Sans", Noto, sans-serif; + font-size: 1.1rem; + font-weight: 600; + line-height: 1.3; + + @include breakpoint2 { + font-size: 1.3rem; + } +} + +@mixin font_heading6 { + font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Liberation Sans", Noto, sans-serif; + font-size: 1.1rem; + font-weight: 500; + line-height: 1.3; + + @include breakpoint2 { + font-size: 1.1rem; + } +} + +@mixin font_body1 { + font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Liberation Sans", Noto, sans-serif; + font-size: 1rem; + font-weight: 400; + line-height: 1.75; +} + +@mixin font_body2 { + font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Liberation Sans", Noto, sans-serif; + font-size: 0.9rem; + font-weight: 400; + line-height: 1.4; +} + +@mixin font_subtitle { + font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Liberation Sans", Noto, sans-serif; + font-size: 0.9rem; + font-weight: 400; + line-height: 1.5; +} + +@mixin font_caption { + font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Liberation Sans", Noto, sans-serif; + font-size: 0.8rem; + font-weight: 400; + letter-spacing: 0.01rem; + line-height: 1.3; +} + +@mixin font_overline { + font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Liberation Sans", Noto, sans-serif; + font-size: 0.8rem; + font-weight: 400; + letter-spacing: 0.1rem; + line-height: 1; + text-transform: uppercase; +} + +@mixin font_button { + font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, "Liberation Sans", Noto, sans-serif; + font-size: 0.9rem; + font-weight: 500; + letter-spacing: 0.06rem; + line-height: 1; + text-transform: uppercase; +} diff --git a/frontend/src/UILibrary/styles.scss b/frontend/src/UILibrary/styles.scss index 630a076..5599d4f 100644 --- a/frontend/src/UILibrary/styles.scss +++ b/frontend/src/UILibrary/styles.scss @@ -2,9 +2,11 @@ * Import all styles. This file is imported in app.js. */ @import "../../node_modules/bootstrap/scss/bootstrap"; +@import './scss/index'; +@import './tokens/Chip'; +@import './tokens/Colors'; +@import './tokens/Typography'; @import '../mapQuiz/mapQuiz'; @import '../democracyViz/democracyViz'; @import '../budgetSimulation/budgetSimulation'; @import './edx.scss'; - - diff --git a/frontend/src/UILibrary/tokens/Chip.js b/frontend/src/UILibrary/tokens/Chip.js new file mode 100644 index 0000000..c697249 --- /dev/null +++ b/frontend/src/UILibrary/tokens/Chip.js @@ -0,0 +1,18 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +const Chip = ({ label }) => ( +
+ +
+ +); + +Chip.propTypes = { + label: PropTypes.string, +}; + + +export default Chip; diff --git a/frontend/src/UILibrary/tokens/Chip.scss b/frontend/src/UILibrary/tokens/Chip.scss new file mode 100644 index 0000000..88afc41 --- /dev/null +++ b/frontend/src/UILibrary/tokens/Chip.scss @@ -0,0 +1,13 @@ +.-chip-material-ui--shim { + border-radius: 15px; + background: #eee; + font-weight: bold; + font-size: 12px; + display: inline-block; + padding: 5px 16px; + user-select: none; + + label { + padding: 0; + } +} diff --git a/frontend/src/UILibrary/tokens/Colors.js b/frontend/src/UILibrary/tokens/Colors.js new file mode 100644 index 0000000..3aa474b --- /dev/null +++ b/frontend/src/UILibrary/tokens/Colors.js @@ -0,0 +1,115 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import Chip from './Chip'; + +import Token from './Token'; + + +const ColorList = ({ title, children }) => ( +
+ +
+ {children} +
+
+); + +ColorList.propTypes = { + title: PropTypes.string, + children: PropTypes.array, +}; + + +const Color = ({ name }) => ( +
+ +
+
+); + +Color.propTypes = { + name: PropTypes.string, +}; + +const Colors = () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); + + +export default Colors; diff --git a/frontend/src/UILibrary/tokens/Colors.scss b/frontend/src/UILibrary/tokens/Colors.scss new file mode 100644 index 0000000..2c28f2d --- /dev/null +++ b/frontend/src/UILibrary/tokens/Colors.scss @@ -0,0 +1,135 @@ +.colors-black { + background: $black; +} + +.colors-white { + background: $white; +} + +.colors-red { + background: $red; +} + +.colors-color_grey_50 { + background: $color_grey_50; +} + +.colors-color_grey_100 { + background: $color_grey_100; +} + +.colors-color_grey_200 { + background: $color_grey_200; +} + +.colors-color_grey_300 { + background: $color_grey_300; +} + +.colors-color_grey_300 { + background: $color_grey_300; +} + +.colors-color_grey_400 { + background: $color_grey_400; +} + +.colors-color_grey_500 { + background: $color_grey_500; +} + +.colors-color_grey_600 { + background: $color_grey_600; +} + +.colors-color_grey_700 { + background: $color_grey_700; +} + +.colors-color_grey_800 { + background: $color_grey_800; +} + +.colors-color_grey_900 { + background: $color_grey_900; +} + +.colors-color_primary_50 { + background: $color_primary_50; +} + +.colors-color_primary_100 { + background: $color_primary_100; +} + +.colors-color_primary_200 { + background: $color_primary_200; +} + +.colors-color_primary_300 { + background: $color_primary_300; +} + +.colors-color_primary_400 { + background: $color_primary_400; +} + +.colors-color_primary_500 { + background: $color_primary_500; +} + +.colors-color_primary_600 { + background: $color_primary_600; +} + +.colors-color_primary_700 { + background: $color_primary_700; +} + +.colors-color_primary_800 { + background: $color_primary_800; +} + +.colors-color_primary_900 { + background: $color_primary_900; +} + +.colors-color_grey_50 { + background: $color_grey_50; +} + +.colors-color_grey_100 { + background: $color_grey_100; +} + +.colors-color_grey_200 { + background: $color_grey_200; +} + +.colors-color_grey_300 { + background: $color_grey_300; +} + +.colors-color_grey_400 { + background: $color_grey_400; +} + +.colors-color_grey_500 { + background: $color_grey_500; +} + +.colors-color_grey_600 { + background: $color_grey_600; +} + +.colors-color_grey_700 { + background: $color_grey_700; +} + +.colors-color_grey_800 { + background: $color_grey_800; +} + +.colors-color_grey_900 { + background: $color_grey_900; +} diff --git a/frontend/src/UILibrary/tokens/Font.js b/frontend/src/UILibrary/tokens/Font.js new file mode 100644 index 0000000..96e25dd --- /dev/null +++ b/frontend/src/UILibrary/tokens/Font.js @@ -0,0 +1,68 @@ +import React from 'react'; +import PropTypes from 'prop-types'; +import Chip from './Chip'; + + +const Font = ({ name, elem }) => ( +
+ +
+ {React.createElement(elem, + null, + "English: The quick brown fox jumps over the lazy dog." + )} +
+ {React.createElement(elem, + null, + "Arabic: الثعلب البني السريع يقفز فوق الكلب الكسول." + )} +
+ {React.createElement(elem, + null, + "Bengali: দ্রুত বাদামী শিয়াল অলস কুকুর উপর লাফালাফি।" + )} +
+ {React.createElement(elem, + null, + "Chinese: 敏捷的棕色狐狸跳过了懒狗。" + )} +
+ {React.createElement(elem, + null, + "Greek: Η γρήγορη καφέ αλεπού πηδάει πάνω από το τεμπέλικο σκυλί." + )} +
+ {React.createElement(elem, + null, + "Hebrew: השועל החום המהיר קופץ מעל הכלב העצל." + )} +
+ {React.createElement(elem, + null, + "Hindi: तेज, भूरी लोमडी आलसी कुत्ते के उपर कूद गई।" + )} +
+ {React.createElement(elem, + null, + "Sanskrit: समाहारः साम्नां प्रतिपदमृचां धाम यजुषां" + )} +
+
+); + +Font.propTypes = { + name: PropTypes.string, + elem: PropTypes.string, +}; + +export default Font; diff --git a/frontend/src/UILibrary/tokens/Token.js b/frontend/src/UILibrary/tokens/Token.js new file mode 100644 index 0000000..1b681bc --- /dev/null +++ b/frontend/src/UILibrary/tokens/Token.js @@ -0,0 +1,39 @@ +import React from "react"; +import PropTypes from "prop-types"; + +function Token({ + title, + description, + children, +}) { + return ( +
+

{title}

+ + {description && +

+ {description} +

+ } + +
+ {children} +
+ +
+
+ ); +} + +Token.propTypes = { + title: PropTypes.string, + description: PropTypes.string, + children: PropTypes.node, +}; + +export default Token; diff --git a/frontend/src/UILibrary/tokens/Typography.js b/frontend/src/UILibrary/tokens/Typography.js new file mode 100644 index 0000000..336e16d --- /dev/null +++ b/frontend/src/UILibrary/tokens/Typography.js @@ -0,0 +1,89 @@ +import React from 'react'; + +import Font from './Font'; +import Token from './Token'; + + +const Typography = () => ( + +

+ We adopt + + Material Design's typography system + + . +

+

+ + About languages, fonts, glyph sets + + . +

+

+ This Design System is built to support the widest character glyph set possible. To do + so, we keep things simple and utilise system fonts on the web, and Noto on apps. + Performance being the main factor in this decision. +

+ +

Our web font stack

+ +
+ font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, + "Liberation Sans", "Noto Sans", sans-serif; +
+ +

A word on minority scripts on the web

+ +

+ We plan to dynamically serve custom fonts for writing scripts that are, these + days, no longer common. Take + + Egyptian hieroglyphs + + for example. If you view + + a page that has Egyptian hieroglyphs embedded + , + you'll see that these characters aren't shown on your computer. Unless + you already have such a font installed, of course. But, by default most people + don't. We plan to use + Noto + for such use cases. +

+ +

Our app font

+ +
Noto Sans Display
+ +

+ This app—which will support any number of scripts across mobile native + and XR—will be bundled with all 11MB of Noto Sans Display. This covers a wide set + of languages, but not all. The full Noto glyphset is a whopping 1GB+ download. + For any remaining minority scripts we can conditionally load specific Noto font + sets on the fly. +

+
+
+
+
+ + + + + + + + + + + + + + +); + +export default Typography; diff --git a/frontend/src/UILibrary/tokens/Typography.scss b/frontend/src/UILibrary/tokens/Typography.scss new file mode 100644 index 0000000..0cd44c8 --- /dev/null +++ b/frontend/src/UILibrary/tokens/Typography.scss @@ -0,0 +1,47 @@ +.typography-font_heading1 { + @include font_heading1; +} + +.typography-font_heading2 { + @include font_heading2; +} + +.typography-font_heading3 { + @include font_heading3; +} + +.typography-font_heading4 { + @include font_heading4; +} + +.typography-font_heading5 { + @include font_heading5; +} + +.typography-font_heading6 { + @include font_heading6; +} + +.typography-font_body1 { + @include font_body1; +} + +.typography-font_body2 { + @include font_body2; +} + +.typography-font_subtitle { + @include font_subtitle; +} + +.typography-font_caption { + @include font_caption; +} + +.typography-font_overline { + @include font_overline; +} + +.typography-font_button { + @include font_button; +} diff --git a/frontend/src/app.js b/frontend/src/app.js index 55bc378..6b953b5 100644 --- a/frontend/src/app.js +++ b/frontend/src/app.js @@ -13,6 +13,7 @@ import { MapQuiz } from './mapQuiz/mapQuiz.js'; import { BudgetVotingSimViz } from './budgetSimulation/budgetSimulation.js'; import { DemocracyViz } from './democracyViz/democracyViz.js'; import { EdXView } from "./UILibrary/components"; +import System from './UILibrary/System'; // Import all styles import './UILibrary/styles.scss'; @@ -28,4 +29,5 @@ window.app_modules = { BudgetVotingSimViz, DemocracyViz, EdXView, + System, }; From 0a2c1a7abb94b0f77fdcebbd20bba6c1a50de7ea Mon Sep 17 00:00:00 2001 From: Luke Hollis Date: Fri, 21 Feb 2020 14:56:20 -0500 Subject: [PATCH 2/5] remove unnecessary parts from design system and hide multiple languages to make interface less overwhelming --- frontend/src/UILibrary/scss/_reset.scss | 71 -------- frontend/src/UILibrary/scss/_variables.scss | 1 - frontend/src/UILibrary/scss/index.scss | 17 +- .../UILibrary/scss/mixins/_breakpoints.scss | 71 -------- .../UILibrary/scss/mixins/_typography.scss | 18 -- frontend/src/UILibrary/styles.scss | 1 + frontend/src/UILibrary/tokens/Chip.scss | 2 + frontend/src/UILibrary/tokens/Font.js | 156 +++++++++++------- frontend/src/UILibrary/tokens/Font.scss | 2 + 9 files changed, 107 insertions(+), 232 deletions(-) delete mode 100644 frontend/src/UILibrary/scss/_reset.scss delete mode 100644 frontend/src/UILibrary/scss/mixins/_breakpoints.scss create mode 100644 frontend/src/UILibrary/tokens/Font.scss diff --git a/frontend/src/UILibrary/scss/_reset.scss b/frontend/src/UILibrary/scss/_reset.scss deleted file mode 100644 index bb4ef0f..0000000 --- a/frontend/src/UILibrary/scss/_reset.scss +++ /dev/null @@ -1,71 +0,0 @@ -/* http://meyerweb.com/eric/tools/css/reset/ - v2.0 | 20110126 - License: none (public domain) -*/ - -html, body, div, span, applet, object, iframe, -h1, h2, h3, h4, h5, h6, p, blockquote, pre, -a, abbr, acronym, address, big, cite, code, -del, dfn, em, img, ins, kbd, q, s, samp, -small, strike, strong, sub, sup, tt, var, -b, u, i, center, -dl, dt, dd, ol, ul, li, -fieldset, form, label, legend, -table, caption, tbody, tfoot, thead, tr, th, td, -article, aside, canvas, details, embed, -figure, figcaption, footer, header, hgroup, -menu, nav, output, ruby, section, summary, -time, mark, audio, video { - margin: 0; - padding: 0; - border: 0; - font-size: 100%; - font: inherit; - vertical-align: baseline; -} -/* HTML5 display-role reset for older browsers */ -article, aside, details, figcaption, figure, -footer, header, hgroup, menu, nav, section { - display: block; -} -body { - line-height: 1; -} -ol, ul { - list-style: none; -} -blockquote, q { - quotes: none; -} -blockquote:before, blockquote:after, -q:before, q:after { - content: ''; - content: none; -} -table { - border-collapse: collapse; - border-spacing: 0; -} -button { - border: none; - margin: 0; - padding: 0; - width: auto; - overflow: visible; - - background: transparent; - - /* inherit font & color from ancestor */ - color: inherit; - font: inherit; - - /* Normalize `line-height`. Cannot be changed from `normal` in Firefox 4+. */ - line-height: normal; - - /* Corrects font smoothing for webkit */ - -webkit-font-smoothing: inherit; - -moz-osx-font-smoothing: inherit; - - /* Corrects inability to style clickable `input` types in iOS */ - -webkit-appearance: none; -} diff --git a/frontend/src/UILibrary/scss/_variables.scss b/frontend/src/UILibrary/scss/_variables.scss index 73bf736..ab93d16 100644 --- a/frontend/src/UILibrary/scss/_variables.scss +++ b/frontend/src/UILibrary/scss/_variables.scss @@ -38,7 +38,6 @@ $color_primary_900: #38011A; 2. Mixins ******************************************************************************/ @import "mixins/aspect-ratio"; -@import "mixins/breakpoints"; @import "mixins/skeletonLoader"; @import "mixins/typography"; diff --git a/frontend/src/UILibrary/scss/index.scss b/frontend/src/UILibrary/scss/index.scss index cd90a73..4dac436 100644 --- a/frontend/src/UILibrary/scss/index.scss +++ b/frontend/src/UILibrary/scss/index.scss @@ -1,5 +1,4 @@ -@import '_reset'; -@import '_variables'; +@import 'variables'; // https://www.paulirish.com/2012/box-sizing-border-box-ftw/ html { @@ -12,9 +11,6 @@ html { html { font-size: 80%; - @include breakpoint2 { - font-size: 100%; - } } // loading @@ -32,9 +28,6 @@ body, input, p { section { padding: 30px 0; - @include breakpoint2 { - padding: 90px 0; - } img { margin: 0 auto; @@ -114,16 +107,10 @@ a { } blockquote { - border-color: $color_primary_500; - border-style: solid; - border-left-width: 3px; + border-left: 3px solid $color_primary_500; font-style: italic; letter-spacing: -0.02rem; padding-left: 10px; - @include breakpoint2 { - border-left-width: 5px; - padding-left: 15px; - } } strong, b { diff --git a/frontend/src/UILibrary/scss/mixins/_breakpoints.scss b/frontend/src/UILibrary/scss/mixins/_breakpoints.scss deleted file mode 100644 index 47b49fa..0000000 --- a/frontend/src/UILibrary/scss/mixins/_breakpoints.scss +++ /dev/null @@ -1,71 +0,0 @@ -@mixin breakpoint1 { - @media (min-width: 400px) { - @content; - } -} - -@mixin elementBreakpoint1 { - &[min-width~="400px"] { - @content; - } -} - -@mixin breakpoint2 { - @media (min-width: 600px) { - @content; - } -} - -@mixin elementBreakpoint2 { - &[min-width~="600px"] { - @content; - } -} - -@mixin breakpoint3 { - @media (min-width: 800px) { - @content; - } -} - -@mixin elementBreakpoint3 { - &[min-width~="800px"] { - @content; - } -} - -@mixin breakpoint4 { - @media (min-width: 1000px) { - @content; - } -} - -@mixin elementBreakpoint4 { - &[min-width~="1000px"] { - @content; - } -} - -@mixin breakpoint5 { - @media (min-width: 1200px) { - @content; - } -} - -@mixin elementBreakpoint5 { - &[min-width~="1200px"] { - @content; - } -} - -@mixin breakpoint6 { - @media (min-width: 1400px) { - @content; - } -} - -@mixin elementBreakpoint6 { - &[min-width~="1400px"] { - @content; - } -} diff --git a/frontend/src/UILibrary/scss/mixins/_typography.scss b/frontend/src/UILibrary/scss/mixins/_typography.scss index 8f55550..fe01393 100644 --- a/frontend/src/UILibrary/scss/mixins/_typography.scss +++ b/frontend/src/UILibrary/scss/mixins/_typography.scss @@ -5,9 +5,6 @@ letter-spacing: -0.1rem; line-height: 1; - @include breakpoint2 { - font-size: 4rem; - } } @mixin font_heading2 { @@ -17,9 +14,6 @@ letter-spacing: -0.03rem; line-height: 1.2; - @include breakpoint2 { - font-size: 3rem; - } } @mixin font_heading3 { @@ -28,9 +22,6 @@ font-weight: 500; line-height: 1.3; - @include breakpoint2 { - font-size: 2rem; - } } @mixin font_heading4 { @@ -39,9 +30,6 @@ font-weight: 500; line-height: 1.3; - @include breakpoint2 { - font-size: 1.4rem; - } } @mixin font_heading5 { @@ -50,9 +38,6 @@ font-weight: 600; line-height: 1.3; - @include breakpoint2 { - font-size: 1.3rem; - } } @mixin font_heading6 { @@ -61,9 +46,6 @@ font-weight: 500; line-height: 1.3; - @include breakpoint2 { - font-size: 1.1rem; - } } @mixin font_body1 { diff --git a/frontend/src/UILibrary/styles.scss b/frontend/src/UILibrary/styles.scss index 5599d4f..2a10add 100644 --- a/frontend/src/UILibrary/styles.scss +++ b/frontend/src/UILibrary/styles.scss @@ -5,6 +5,7 @@ @import './scss/index'; @import './tokens/Chip'; @import './tokens/Colors'; +@import './tokens/Font'; @import './tokens/Typography'; @import '../mapQuiz/mapQuiz'; @import '../democracyViz/democracyViz'; diff --git a/frontend/src/UILibrary/tokens/Chip.scss b/frontend/src/UILibrary/tokens/Chip.scss index 88afc41..a1eaf3d 100644 --- a/frontend/src/UILibrary/tokens/Chip.scss +++ b/frontend/src/UILibrary/tokens/Chip.scss @@ -9,5 +9,7 @@ label { padding: 0; + margin: 0; + cursor: pointer; } } diff --git a/frontend/src/UILibrary/tokens/Font.js b/frontend/src/UILibrary/tokens/Font.js index 96e25dd..d8cc243 100644 --- a/frontend/src/UILibrary/tokens/Font.js +++ b/frontend/src/UILibrary/tokens/Font.js @@ -1,64 +1,108 @@ import React from 'react'; import PropTypes from 'prop-types'; +import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; +import { + faChevronUp, + faChevronDown, +} from "@fortawesome/free-solid-svg-icons"; + import Chip from './Chip'; -const Font = ({ name, elem }) => ( -
- -
- {React.createElement(elem, - null, - "English: The quick brown fox jumps over the lazy dog." - )} -
- {React.createElement(elem, - null, - "Arabic: الثعلب البني السريع يقفز فوق الكلب الكسول." - )} -
- {React.createElement(elem, - null, - "Bengali: দ্রুত বাদামী শিয়াল অলস কুকুর উপর লাফালাফি।" - )} -
- {React.createElement(elem, - null, - "Chinese: 敏捷的棕色狐狸跳过了懒狗。" - )} -
- {React.createElement(elem, - null, - "Greek: Η γρήγορη καφέ αλεπού πηδάει πάνω από το τεμπέλικο σκυλί." - )} -
- {React.createElement(elem, - null, - "Hebrew: השועל החום המהיר קופץ מעל הכלב העצל." - )} -
- {React.createElement(elem, - null, - "Hindi: तेज, भूरी लोमडी आलसी कुत्ते के उपर कूद गई।" - )} -
- {React.createElement(elem, - null, - "Sanskrit: समाहारः साम्नां प्रतिपदमृचां धाम यजुषां" - )} -
-
-); + +class Font extends React.Component { + + constructor(props){ + super(props); + this.state = { + accordionExpanded: false + }; + this.handleToggleAccordion = this.handleToggleAccordion.bind(this); + } + + handleToggleAccordion() { + this.setState({ accordionExpanded: !this.state.accordionExpanded }); + } + + render () { + const { name, elem } = this.props; + const { accordionExpanded } = this.state; + + return ( +
+
+ + +
+
+ {React.createElement(elem, + null, + "English: The quick brown fox jumps over the lazy dog." + )} +
+ {accordionExpanded && ( + + {React.createElement(elem, + null, + "Arabic: الثعلب البني السريع يقفز فوق الكلب الكسول." + )} +
+ {React.createElement(elem, + null, + "Bengali: দ্রুত বাদামী শিয়াল অলস কুকুর উপর লাফালাফি।" + )} +
+ {React.createElement(elem, + null, + "Chinese: 敏捷的棕色狐狸跳过了懒狗。" + )} +
+ {React.createElement(elem, + null, + "Greek: Η γρήγορη καφέ αλεπού πηδάει πάνω από το τεμπέλικο σκυλί." + )} +
+ {React.createElement(elem, + null, + "Hebrew: השועל החום המהיר קופץ מעל הכלב העצל." + )} +
+ {React.createElement(elem, + null, + "Hindi: तेज, भूरी लोमडी आलसी कुत्ते के उपर कूद गई।" + )} +
+ {React.createElement(elem, + null, + "Sanskrit: समाहारः साम्नां प्रतिपदमृचां धाम यजुषां" + )} + + )} +
+
+ ); + } +} Font.propTypes = { name: PropTypes.string, diff --git a/frontend/src/UILibrary/tokens/Font.scss b/frontend/src/UILibrary/tokens/Font.scss new file mode 100644 index 0000000..8d6285c --- /dev/null +++ b/frontend/src/UILibrary/tokens/Font.scss @@ -0,0 +1,2 @@ +.accordionHead:hover { +} From 56d518aba1cd6adbae2a48b53165ff6faf16060b Mon Sep 17 00:00:00 2001 From: Luke Hollis Date: Fri, 21 Feb 2020 17:29:55 -0500 Subject: [PATCH 3/5] add edx bootstrap design system and extend system component with form mocks --- frontend/package.json | 1 + frontend/src/UILibrary/System.js | 20 ++++----- frontend/src/UILibrary/scss/index.scss | 1 + frontend/src/UILibrary/tokens/Forms.js | 49 +++++++++++++++++++++ frontend/src/UILibrary/tokens/Typography.js | 19 +++----- 5 files changed, 65 insertions(+), 25 deletions(-) create mode 100644 frontend/src/UILibrary/tokens/Forms.js diff --git a/frontend/package.json b/frontend/package.json index 738313d..a4b07fa 100644 --- a/frontend/package.json +++ b/frontend/package.json @@ -4,6 +4,7 @@ "private": true, "dependencies": { "@babel/core": "7.4.3", + "@edx/edx-bootstrap": "^2.2.2", "@fortawesome/fontawesome-svg-core": "^1.2.27", "@fortawesome/free-solid-svg-icons": "^5.12.1", "@fortawesome/react-fontawesome": "^0.1.8", diff --git a/frontend/src/UILibrary/System.js b/frontend/src/UILibrary/System.js index c3e0be7..4bc90e3 100644 --- a/frontend/src/UILibrary/System.js +++ b/frontend/src/UILibrary/System.js @@ -2,6 +2,7 @@ import React from 'react'; import Colors from './tokens/Colors'; import Typography from './tokens/Typography'; +import Forms from './tokens/Forms'; const System = () => ( @@ -10,26 +11,22 @@ const System = () => (

A collection of all the components that make the DHLab Prespectives from - Africa Library. We leverage - + Africa Library. We leverage Bootstrap - - and the - - the React Bootstrap library - . + and the + the React Bootstrap library. Make sure to try to use components you see here — this will keep our user experience and code consistent.

- +

+ Check out React Bootstrap components for the big picture when you're getting started. +

We don't make use of all the components in the React library. Either because we didn't yet find the use case, and sometimes because some of them aren't so great, so please check here for our Officially Supported Components™. This library will grow over time and you're free to suggest additions and - changes over in the - #general - Slack channel. But, please don't go yolo-adding + changes over in the #general Slack channel. But, please don't go yolo-adding random React components into the codebase that'll end up siloed and a pain to deal with later. All components that we use in the main codebase need to be documented here. If you have any design or development questions, @@ -38,6 +35,7 @@ const System = () => ( +

); diff --git a/frontend/src/UILibrary/scss/index.scss b/frontend/src/UILibrary/scss/index.scss index 4dac436..dd10bbf 100644 --- a/frontend/src/UILibrary/scss/index.scss +++ b/frontend/src/UILibrary/scss/index.scss @@ -1,4 +1,5 @@ @import 'variables'; +@import "~@edx/edx-bootstrap/scss/edx/theme.scss"; // https://www.paulirish.com/2012/box-sizing-border-box-ftw/ html { diff --git a/frontend/src/UILibrary/tokens/Forms.js b/frontend/src/UILibrary/tokens/Forms.js new file mode 100644 index 0000000..7a15b87 --- /dev/null +++ b/frontend/src/UILibrary/tokens/Forms.js @@ -0,0 +1,49 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import Token from './Token'; +import Chip from './Chip'; + +const Component = ({ title, children }) => ( +
+ +
+
+ {children} +
+
+); + +Component.propTypes = { + title: PropTypes.string, + children: PropTypes.array, +}; + +const Forms = () => ( + +

+ We extend React bootstrap's forms for our use cases with the interactive components. +

+ + +
+ +
+ + +); + + +export default Forms; diff --git a/frontend/src/UILibrary/tokens/Typography.js b/frontend/src/UILibrary/tokens/Typography.js index 336e16d..71ec4a6 100644 --- a/frontend/src/UILibrary/tokens/Typography.js +++ b/frontend/src/UILibrary/tokens/Typography.js @@ -11,9 +11,8 @@ const Typography = () => ( description="" >

- We adopt - - Material Design's typography system + We adopt + edX's typography system .

@@ -40,19 +39,14 @@ const Typography = () => (

We plan to dynamically serve custom fonts for writing scripts that are, these - days, no longer common. Take - + days, no longer common. Take Egyptian hieroglyphs - - for example. If you view - + for example. If you view a page that has Egyptian hieroglyphs embedded , you'll see that these characters aren't shown on your computer. Unless you already have such a font installed, of course. But, by default most people - don't. We plan to use - Noto - for such use cases. + don't. We plan to use Noto for such use cases.

Our app font

@@ -67,9 +61,6 @@ const Typography = () => ( sets on the fly.


-
-
-
From cd1650962fff60873289b92286fe1ab506abfabe Mon Sep 17 00:00:00 2001 From: Luke Hollis Date: Fri, 21 Feb 2020 17:48:03 -0500 Subject: [PATCH 4/5] update color system to edx bootstrap theme --- frontend/src/UILibrary/tokens/Colors.js | 54 +++++--- frontend/src/UILibrary/tokens/Colors.scss | 159 +++++++--------------- 2 files changed, 83 insertions(+), 130 deletions(-) diff --git a/frontend/src/UILibrary/tokens/Colors.js b/frontend/src/UILibrary/tokens/Colors.js index 3aa474b..3ed87d9 100644 --- a/frontend/src/UILibrary/tokens/Colors.js +++ b/frontend/src/UILibrary/tokens/Colors.js @@ -77,36 +77,46 @@ const Colors = () => ( title="Colors" description="" > +

+ Review variables in color system. +

- - - - - - - - - - - - + + + + + + + + + + - - - - - - - - - - + + + + + + + + + + + + + + + + + ); diff --git a/frontend/src/UILibrary/tokens/Colors.scss b/frontend/src/UILibrary/tokens/Colors.scss index 2c28f2d..235a562 100644 --- a/frontend/src/UILibrary/tokens/Colors.scss +++ b/frontend/src/UILibrary/tokens/Colors.scss @@ -1,135 +1,78 @@ -.colors-black { - background: $black; -} - .colors-white { - background: $white; -} - -.colors-red { - background: $red; -} - -.colors-color_grey_50 { - background: $color_grey_50; -} - -.colors-color_grey_100 { - background: $color_grey_100; + background: $white; } - -.colors-color_grey_200 { - background: $color_grey_200; +.colors-gray-100 { + background: $gray-100; } - -.colors-color_grey_300 { - background: $color_grey_300; +.colors-gray-200 { + background: $gray-200; } - -.colors-color_grey_300 { - background: $color_grey_300; +.colors-gray-300 { + background: $gray-300; } - -.colors-color_grey_400 { - background: $color_grey_400; +.colors-gray-400 { + background: $gray-400; } - -.colors-color_grey_500 { - background: $color_grey_500; +.colors-gray-500 { + background: $gray-500; } - -.colors-color_grey_600 { - background: $color_grey_600; +.colors-gray-600 { + background: $gray-600; } - -.colors-color_grey_700 { - background: $color_grey_700; +.colors-gray-700 { + background: $gray-700; } - -.colors-color_grey_800 { - background: $color_grey_800; +.colors-gray-800 { + background: $gray-800; } - -.colors-color_grey_900 { - background: $color_grey_900; +.colors-gray-900 { + background: $gray-900; } - -.colors-color_primary_50 { - background: $color_primary_50; -} - -.colors-color_primary_100 { - background: $color_primary_100; -} - -.colors-color_primary_200 { - background: $color_primary_200; -} - -.colors-color_primary_300 { - background: $color_primary_300; -} - -.colors-color_primary_400 { - background: $color_primary_400; +.colors-black { + background: $black; } - -.colors-color_primary_500 { - background: $color_primary_500; +.colors-blue { + background: $blue; } - -.colors-color_primary_600 { - background: $color_primary_600; +.colors-dark-blue { + background: $dark-blue; } - -.colors-color_primary_700 { - background: $color_primary_700; +.colors-indigo { + background: $indigo; } - -.colors-color_primary_800 { - background: $color_primary_800; +.colors-red { + background: $red; } - -.colors-color_primary_900 { - background: $color_primary_900; +.colors-yellow { + background: $yellow; } - -.colors-color_grey_50 { - background: $color_grey_50; +.colors-green { + background: $green; } - -.colors-color_grey_100 { - background: $color_grey_100; +.colors-slate { + background: $slate; } - -.colors-color_grey_200 { - background: $color_grey_200; +.colors-magenta { + background: $magenta; } - -.colors-color_grey_300 { - background: $color_grey_300; +.colors-pale-gray { + background: $pale-gray; } - -.colors-color_grey_400 { - background: $color_grey_400; +.colors-pale-blue { + background: $pale-blue; } - -.colors-color_grey_500 { - background: $color_grey_500; +.colors-pale-yellow { + background: $pale-yellow; } - -.colors-color_grey_600 { - background: $color_grey_600; +.colors-light-green { + background: $light-green; } - -.colors-color_grey_700 { - background: $color_grey_700; +.colors-light-blue { + background: $light-blue; } - -.colors-color_grey_800 { - background: $color_grey_800; +.colors-light-red { + background: $light-red; } - -.colors-color_grey_900 { - background: $color_grey_900; +.colors-light-yellow { + background: $light-yellow; } From 7e55f1e79cc194e8664abdd68ce058bd924f050d Mon Sep 17 00:00:00 2001 From: Luke Hollis Date: Fri, 21 Feb 2020 17:57:30 -0500 Subject: [PATCH 5/5] demo serif and sans serif typography --- frontend/src/UILibrary/tokens/Font.js | 3 ++- frontend/src/UILibrary/tokens/Forms.js | 4 ++-- frontend/src/UILibrary/tokens/Typography.js | 21 +++++++++++++++++++-- 3 files changed, 23 insertions(+), 5 deletions(-) diff --git a/frontend/src/UILibrary/tokens/Font.js b/frontend/src/UILibrary/tokens/Font.js index d8cc243..42f3bb1 100644 --- a/frontend/src/UILibrary/tokens/Font.js +++ b/frontend/src/UILibrary/tokens/Font.js @@ -25,7 +25,7 @@ class Font extends React.Component { } render () { - const { name, elem } = this.props; + const { name, elem, serif } = this.props; const { accordionExpanded } = this.state; return ( @@ -33,6 +33,7 @@ class Font extends React.Component { style={{ width: '100%', }} + class={serif ? '-serif' : ''} >
( Component.propTypes = { title: PropTypes.string, - children: PropTypes.array, + children: PropTypes.object, }; const Forms = () => ( @@ -38,7 +38,7 @@ const Forms = () => (

-
+
diff --git a/frontend/src/UILibrary/tokens/Typography.js b/frontend/src/UILibrary/tokens/Typography.js index 71ec4a6..51e629b 100644 --- a/frontend/src/UILibrary/tokens/Typography.js +++ b/frontend/src/UILibrary/tokens/Typography.js @@ -27,12 +27,14 @@ const Typography = () => ( so, we keep things simple and utilise system fonts on the web, and Noto on apps. Performance being the main factor in this decision.

+

+ Reference these font variables. +

Our web font stack

- font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", Helvetica, - "Liberation Sans", "Noto Sans", sans-serif; + "Roboto", "Helvetica Neue", Arial, sans-serif !default;

A word on minority scripts on the web

@@ -61,6 +63,7 @@ const Typography = () => ( sets on the fly.


+

Sans Serif

@@ -74,6 +77,20 @@ const Typography = () => ( +

Serif

+ + + + + + + + + + + + + );