- Libre Franklin Semi Bold - 8px with 12px leading
-
+
+ Superscript Example
+ Superscript
+
+ Libre Franklin Semi Bold - 8px with 12px leading
+;
```
#### Alert Superscript
@@ -35,7 +35,7 @@ The Alert variation of superscript is to be used as an excliamation, to announce
const React = require('react');
const Sup = require('/').Sup;
const P = require('/').P;
-const Small = require('/').Small
+const Small = require('/').Small;
const styles = {
color: '#979797',
@@ -46,12 +46,12 @@ const styles = {
};
-
- Superscript Example
- Alert Superscript
-
- Libre Franklin Semi Bold - 8px with 12px leading
-
+
+ Superscript Example
+ Alert Superscript
+
+ Libre Franklin Semi Bold - 8px with 12px leading
+;
```
#### Badge Superscript
@@ -63,7 +63,7 @@ The badge variation of superscript is for when a specific element of information
const React = require('react');
const Sup = require('/').Sup;
const P = require('/').P;
-const Small = require('/').Small
+const Small = require('/').Small;
const styles = {
color: '#979797',
@@ -74,10 +74,10 @@ const styles = {
};
-
- Superscript Example
- SSD
-
- Libre Franklin Semi Bold - 8px with 12px leading
-
This palette contains Triton’s ‘action and status’ colors. They aim to
- communicate that a component is interactable and has a purpose. They also
- act as status colors to alert users on the condition and nature of
+ communicate that a component is interactable and has a purpose. They
+ also act as status colors to alert users on the condition and nature of
components.
-
Greys give Triton a sense of depth and offer contrast between potentially
- similar components. They allow us to make certain components look clickable,
- whilst making others appear disabled or static.
-
+ similar components. They allow us to make certain components look
+ clickable, whilst making others appear disabled or static.
+
(
name="Grey 2 - Faded"
color={theme.whiteActive}
/>
-
-
-
-
+
+
+
-)
+);
diff --git a/packages/ui-toolkit/styleguide.config.js b/packages/ui-toolkit/styleguide.config.js
index e312cf45..4aafbf92 100644
--- a/packages/ui-toolkit/styleguide.config.js
+++ b/packages/ui-toolkit/styleguide.config.js
@@ -44,35 +44,37 @@ module.exports = {
name: 'Typographic Scale',
content: 'src/text/Readme.md',
description:
- 'Triton uses two typographic scales, a large and a small. The large is to be used on breakpoints above 600px, whilst the small is to be used on anything under that. ',
+ 'Triton uses two typographic scales, a large and a small. The large is to be used on breakpoints above 600px, whilst the small is to be used on anything under that. '
},
{
name: 'Grids',
content: 'src/grids/Readme.md',
description:
- 'Triton’s grid aims to have maximum coverage over a wide range of devices. With a maximum container width of 964px, we are able to display the main desktop experience all the way down to a tradional landscape tablet device.',
+ 'Triton’s grid aims to have maximum coverage over a wide range of devices. With a maximum container width of 964px, we are able to display the main desktop experience all the way down to a tradional landscape tablet device.'
},
{
name: 'Baseline Grids',
content: 'src/grids/Baseline.md',
description:
- 'All of the size and spacing values are derived on the baseline grid. The baseline grid is composed of horizontal lines positioned 6 px apart, making the base measurement unit 6 px.',
+ 'All of the size and spacing values are derived on the baseline grid. The baseline grid is composed of horizontal lines positioned 6 px apart, making the base measurement unit 6 px.'
},
{
name: 'Superscript',
content: 'src/text/Superscript.md',
description:
- 'Superscript is a way of formatting text so they appear above the baseline, drawing more attention to a smaller, less important element of information.',
+ 'Superscript is a way of formatting text so they appear above the baseline, drawing more attention to a smaller, less important element of information.'
},
{
name: 'Buttons',
- description: 'Buttons are the core of any UI kit, and we are no exception. Here we have documented to most basic variations of the button states, which include but are limited to; Default, Hover, Clicked, and Disabled. ',
- content: 'src/button/Readme.md',
+ description:
+ 'Buttons are the core of any UI kit, and we are no exception. Here we have documented to most basic variations of the button states, which include but are limited to; Default, Hover, Clicked, and Disabled. ',
+ content: 'src/button/Readme.md'
},
{
name: 'Special Buttons',
- description: 'Icon buttons are to be used to illustrate important actions and for when we are redirecting users to seperate services such as Github. ',
- content: 'src/button/Special.md',
+ description:
+ 'Icon buttons are to be used to illustrate important actions and for when we are redirecting users to seperate services such as Github. ',
+ content: 'src/button/Special.md'
},
{
name: 'Basic Components',
@@ -88,25 +90,24 @@ module.exports = {
{
name: 'Tags',
content: 'src/tags/Readme.md',
- description: 'Tags are used to identify instances and services provided by Triton. Our tag style is derived from our small button style, but it’s inlaid text is written to represent the key:value function of the tagging system.'
+ description:
+ 'Tags are used to identify instances and services provided by Triton. Our tag style is derived from our small button style, but it’s inlaid text is written to represent the key:value function of the tagging system.'
},
{
name: 'Cards',
content: 'src/card/demo.md',
description:
- 'Cards are the most widely used component within the current Triton designs. They are used to divide, compartmentalize, and sort information and components that are related. Our card style uses a white background with a Grey 3 border. In some cases we attach a header to cards with either a white background, a coloured background to denote an active status, or a grey background for inactive status.',
+ 'Cards are the most widely used component within the current Triton designs. They are used to divide, compartmentalize, and sort information and components that are related. Our card style uses a white background with a Grey 3 border. In some cases we attach a header to cards with either a white background, a coloured background to denote an active status, or a grey background for inactive status.'
},
{
name: 'Tables',
content: 'src/table/Readme.md',
description:
- 'Tritons uses tables throughout the service in a number of different ways. Tables can be used to list multiple variations of simgle information types, such as instqance lists, snapshots, and package types. Tables can either be multiple select (checkbox) or single select (radio button) and both variations are shown below.',
+ 'Tritons uses tables throughout the service in a number of different ways. Tables can be used to list multiple variations of simgle information types, such as instqance lists, snapshots, and package types. Tables can either be multiple select (checkbox) or single select (radio button) and both variations are shown below.'
},
{
name: 'Compound Components',
- components: () => [
- 'src/message/index.js',
- ]
+ components: () => ['src/message/index.js']
},
{
name: 'Toasts',
diff --git a/yarn.lock b/yarn.lock
index 0271ef0c..a53ef8b7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2089,6 +2089,10 @@ buble@^0.19.2:
os-homedir "^1.0.1"
vlq "^1.0.0"
+buffer-from@^1.0.0:
+ version "1.0.0"
+ resolved "https://registry.yarnpkg.com/buffer-from/-/buffer-from-1.0.0.tgz#4cb8832d23612589b0406e9e2956c17f06fdf531"
+
buffer-indexof@^1.0.0:
version "1.1.1"
resolved "https://registry.yarnpkg.com/buffer-indexof/-/buffer-indexof-1.1.1.tgz#52fabcc6a606d1a00302802648ef68f639da268c"
@@ -2266,12 +2270,12 @@ caniuse-api@^1.5.2:
lodash.uniq "^4.5.0"
caniuse-db@^1.0.30000529, caniuse-db@^1.0.30000634, caniuse-db@^1.0.30000639:
- version "1.0.30000815"
- resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000815.tgz#0e218fa133d0d071c886aa041b435258cc746891"
+ version "1.0.30000817"
+ resolved "https://registry.yarnpkg.com/caniuse-db/-/caniuse-db-1.0.30000817.tgz#c9f8e236887cf60ae623d1fb1e5ec92877ab1229"
caniuse-lite@^1.0.30000748, caniuse-lite@^1.0.30000792:
- version "1.0.30000815"
- resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000815.tgz#3a4258e6850362185adb11b0d754a48402d35bf6"
+ version "1.0.30000817"
+ resolved "https://registry.yarnpkg.com/caniuse-lite/-/caniuse-lite-1.0.30000817.tgz#e993c380eb4bfe76a2aed4223f841c02d6e0d832"
capture-stack-trace@^1.0.0:
version "1.0.0"
@@ -2550,8 +2554,8 @@ code-point-at@^1.0.0:
resolved "https://registry.yarnpkg.com/code-point-at/-/code-point-at-1.1.0.tgz#0d070b4d043a5bea33a2f1a40e2edb3d9a4ccf77"
codemirror@^5.18.2, codemirror@^5.32.0:
- version "5.35.0"
- resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.35.0.tgz#280653d495455bc66aa87e6284292b02775ba878"
+ version "5.36.0"
+ resolved "https://registry.yarnpkg.com/codemirror/-/codemirror-5.36.0.tgz#1172ad9dc298056c06e0b34e5ccd23825ca15b40"
collapse-white-space@^1.0.2:
version "1.0.3"
@@ -2705,9 +2709,10 @@ concat-stream@1.6.0:
typedarray "^0.0.6"
concat-stream@^1.4.10, concat-stream@^1.5.0, concat-stream@^1.6.0:
- version "1.6.1"
- resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.1.tgz#261b8f518301f1d834e36342b9fea095d2620a26"
+ version "1.6.2"
+ resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
dependencies:
+ buffer-from "^1.0.0"
inherits "^2.0.3"
readable-stream "^2.2.2"
typedarray "^0.0.6"
@@ -3649,8 +3654,8 @@ ee-first@1.1.1:
resolved "https://registry.yarnpkg.com/ee-first/-/ee-first-1.1.1.tgz#590c61156b0ae2f4f0255732a158b266bc56b21d"
electron-to-chromium@^1.2.7, electron-to-chromium@^1.3.30:
- version "1.3.39"
- resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.39.tgz#d7a4696409ca0995e2750156da612c221afad84d"
+ version "1.3.40"
+ resolved "https://registry.yarnpkg.com/electron-to-chromium/-/electron-to-chromium-1.3.40.tgz#1fbd6d97befd72b8a6f921dc38d22413d2f6fddf"
elliptic@^6.0.0:
version "6.4.0"
@@ -3750,8 +3755,8 @@ error-stack-parser@1.3.3:
stackframe "^0.3.1"
es-abstract@^1.7.0:
- version "1.10.0"
- resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.10.0.tgz#1ecb36c197842a00d8ee4c2dfd8646bb97d60864"
+ version "1.11.0"
+ resolved "https://registry.yarnpkg.com/es-abstract/-/es-abstract-1.11.0.tgz#cce87d518f0496893b1a30cd8461835535480681"
dependencies:
es-to-primitive "^1.1.1"
function-bind "^1.1.1"
@@ -4593,8 +4598,8 @@ flatten@^1.0.2:
resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.2.tgz#dae46a9d78fbe25292258cc1e780a41d95c03782"
flush-write-stream@^1.0.0:
- version "1.0.2"
- resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.0.2.tgz#c81b90d8746766f1a609a46809946c45dd8ae417"
+ version "1.0.3"
+ resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.0.3.tgz#c5d586ef38af6097650b49bc41b55fabb19f35bd"
dependencies:
inherits "^2.0.1"
readable-stream "^2.0.4"
@@ -5091,8 +5096,8 @@ hapi-render-react-joyent-document@^5.0.0:
through2 "^2.0.3"
hapi-render-react@^2.2.0:
- version "2.5.1"
- resolved "https://registry.yarnpkg.com/hapi-render-react/-/hapi-render-react-2.5.1.tgz#457bcf07629cd5889ae1691fb0d17c35875b00a5"
+ version "2.5.2"
+ resolved "https://registry.yarnpkg.com/hapi-render-react/-/hapi-render-react-2.5.2.tgz#d94c6000865d977404facc317e34bae84b2f4176"
dependencies:
clear-module "^2.1.0"
get-stream "^3.0.0"
@@ -6857,6 +6862,10 @@ lodash.get@^4.4.2:
version "4.4.2"
resolved "https://registry.yarnpkg.com/lodash.get/-/lodash.get-4.4.2.tgz#2d177f652fa31e939b4438d5341499dfa3825e99"
+lodash.groupby@^4.6.0:
+ version "4.6.0"
+ resolved "https://registry.yarnpkg.com/lodash.groupby/-/lodash.groupby-4.6.0.tgz#0b08a1dcf68397c397855c3239783832df7403d1"
+
lodash.includes@^4.3.0:
version "4.3.0"
resolved "https://registry.yarnpkg.com/lodash.includes/-/lodash.includes-4.3.0.tgz#60bb98a87cb923c68ca1e51325483314849f553f"
@@ -8057,8 +8066,8 @@ performance-now@^2.1.0:
resolved "https://registry.yarnpkg.com/performance-now/-/performance-now-2.1.0.tgz#6309f4e0e5fa913ec1c69307ae364b4b377c9e7b"
pez@4.x.x:
- version "4.0.1"
- resolved "https://registry.yarnpkg.com/pez/-/pez-4.0.1.tgz#d698ecf9a146c9188d74abe5cef7b5cb71deb3b5"
+ version "4.0.2"
+ resolved "https://registry.yarnpkg.com/pez/-/pez-4.0.2.tgz#0a7c81b64968e90b0e9562b398f390939e9c4b53"
dependencies:
b64 "4.x.x"
boom "7.x.x"
@@ -9025,8 +9034,8 @@ react-scripts@^1.1.1:
fsevents "^1.1.3"
react-styleguidist@^6.2.5:
- version "6.2.7"
- resolved "https://registry.yarnpkg.com/react-styleguidist/-/react-styleguidist-6.2.7.tgz#e7e7509b73439fb3899a9dfa13125def2c25c08f"
+ version "6.4.0"
+ resolved "https://registry.yarnpkg.com/react-styleguidist/-/react-styleguidist-6.4.0.tgz#85eb647c5e140454aa58c00cff92671ad466fee0"
dependencies:
ast-types "^0.10.1"
buble "^0.19.2"
@@ -9625,8 +9634,8 @@ resolve@1.1.7:
resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.1.7.tgz#203114d82ad2c5ed9e8e0411b3932875e889e97b"
resolve@^1.3.2, resolve@^1.4.0, resolve@^1.5.0:
- version "1.5.0"
- resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.5.0.tgz#1f09acce796c9a762579f31b2c1cc4c3cddf9f36"
+ version "1.6.0"
+ resolved "https://registry.yarnpkg.com/resolve/-/resolve-1.6.0.tgz#0fbd21278b27b4004481c395349e7aba60a9ff5c"
dependencies:
path-parse "^1.0.5"