From 7a4161d5a8bb9e6bc78882a9bae993afe5aca7cf Mon Sep 17 00:00:00 2001 From: Sara Vieira Date: Tue, 3 Oct 2017 13:24:06 +0100 Subject: [PATCH] fix(628) UI Polish for Creating Deployment Group & Deployment Group List --- packages/cp-frontend/.eslintrc | 3 +- packages/cp-frontend/package.json | 1 + packages/cp-frontend/src/assets/Import.svg | 26 + .../src/components/manifest/environment.js | 2 +- .../src/components/manifest/label.js | 10 + .../src/components/manifest/manifest.js | 11 +- .../src/components/manifest/name.js | 4 +- .../src/components/manifest/progress.js | 28 +- .../src/components/manifest/review.js | 42 +- .../src/containers/deployment-groups/list.js | 9 +- .../__snapshots__/environment.js.snap | 2 +- .../manifest/__snapshots__/files.js.snap | 2 +- .../manifest/__snapshots__/name.js.snap | 190 +- .../manifest/__snapshots__/progress.js.snap | 3500 +++++++++-------- .../manifest/__snapshots__/review.js.snap | 424 +- .../service/__snapshots__/scale.js.snap | 2 +- .../__snapshots__/create.js.snap | 163 +- .../service/__snapshots__/scale.js.snap | 2 +- .../services/__snapshots__/menu.js.snap | 12 +- packages/cp-gql-mock-server/.yarnclean | 0 packages/cp-gql-mock-server/package.json | 12 +- 21 files changed, 2387 insertions(+), 2058 deletions(-) create mode 100644 packages/cp-frontend/src/assets/Import.svg create mode 100644 packages/cp-frontend/src/components/manifest/label.js create mode 100644 packages/cp-gql-mock-server/.yarnclean diff --git a/packages/cp-frontend/.eslintrc b/packages/cp-frontend/.eslintrc index a847796a..2390a96a 100644 --- a/packages/cp-frontend/.eslintrc +++ b/packages/cp-frontend/.eslintrc @@ -6,6 +6,7 @@ // temp "no-undef": 1, "no-debugger": 1, - "no-negated-condition": 0 + "no-negated-condition": 0, + "jsx-a11y/href-no-hash": 0 } } diff --git a/packages/cp-frontend/package.json b/packages/cp-frontend/package.json index 597fb116..2a1dc770 100644 --- a/packages/cp-frontend/package.json +++ b/packages/cp-frontend/package.json @@ -6,6 +6,7 @@ "main": "build/", "scripts": { "dev": "REACT_APP_GQL_PORT=3000 PORT=3069 REACT_APP_GQL_PROTOCOL=http react-scripts start", + "start-now": "REACT_APP_GQL_PORT=8080 PORT=3069 REACT_APP_GQL_HOSTNAME=joyent-cp-gql-mock-server-sxcvsebikv.now.sh react-scripts start", "start": "PORT=3069 react-scripts start", "build": "NODE_ENV=production react-scripts build", "lint:css": "echo 0", diff --git a/packages/cp-frontend/src/assets/Import.svg b/packages/cp-frontend/src/assets/Import.svg new file mode 100644 index 00000000..5fa71f93 --- /dev/null +++ b/packages/cp-frontend/src/assets/Import.svg @@ -0,0 +1,26 @@ + +Import +Created using Figma + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/cp-frontend/src/components/manifest/environment.js b/packages/cp-frontend/src/components/manifest/environment.js index abfe3230..a5e49964 100644 --- a/packages/cp-frontend/src/components/manifest/environment.js +++ b/packages/cp-frontend/src/components/manifest/environment.js @@ -49,7 +49,7 @@ export const Environment = ({ loading={loading} type="submit" > - Continue + Next ) : null; diff --git a/packages/cp-frontend/src/components/manifest/label.js b/packages/cp-frontend/src/components/manifest/label.js new file mode 100644 index 00000000..c96d568c --- /dev/null +++ b/packages/cp-frontend/src/components/manifest/label.js @@ -0,0 +1,10 @@ +import { FormLabel } from 'joyent-ui-toolkit'; +import styled from 'styled-components'; +import remcalc from 'remcalc'; + +const StyledFormLabel = styled(FormLabel)` + margin-top: ${remcalc(24)}; + margin-bottom: ${props => props.bottomSpace ? remcalc(16) : remcalc(6)}; +`; + +export default StyledFormLabel; diff --git a/packages/cp-frontend/src/components/manifest/manifest.js b/packages/cp-frontend/src/components/manifest/manifest.js index ef0eabfd..f02726b5 100644 --- a/packages/cp-frontend/src/components/manifest/manifest.js +++ b/packages/cp-frontend/src/components/manifest/manifest.js @@ -1,13 +1,12 @@ import React from 'react'; -import { FormGroup, FormMeta, Button, FormLabel } from 'joyent-ui-toolkit'; +import { FormGroup, FormMeta, Button } from 'joyent-ui-toolkit'; import { Row } from 'react-styled-flexboxgrid'; import remcalc from 'remcalc'; import { Field } from 'redux-form'; import { MEditor } from './editors'; +import StyledFormLabel from './label'; -const ButtonsRow = Row.extend` - margin: ${remcalc(29)} 0 ${remcalc(60)} 0; -`; +const ButtonsRow = Row.extend`margin: ${remcalc(29)} 0 ${remcalc(60)} 0;`; export const Manifest = ({ handleSubmit, @@ -19,7 +18,7 @@ export const Manifest = ({
- Project manifest + Project manifest @@ -32,7 +31,7 @@ export const Manifest = ({ loading={loading} type="submit" > - Environment + Next
diff --git a/packages/cp-frontend/src/components/manifest/name.js b/packages/cp-frontend/src/components/manifest/name.js index 35e7168d..feeef3a6 100644 --- a/packages/cp-frontend/src/components/manifest/name.js +++ b/packages/cp-frontend/src/components/manifest/name.js @@ -1,11 +1,11 @@ import React from 'react'; import { Row, Col } from 'react-styled-flexboxgrid'; import remcalc from 'remcalc'; +import StyledFormLabel from './label'; import { FormMeta, Button, - FormLabel, Input, Small, FormGroup @@ -19,7 +19,7 @@ export const Name = ({ handleSubmit, onCancel, dirty }) => ( - Name the new deployment group + Name the new deployment group Your services will be deployed to eu-east-1 data center. diff --git a/packages/cp-frontend/src/components/manifest/progress.js b/packages/cp-frontend/src/components/manifest/progress.js index 4a10856b..32745ad2 100644 --- a/packages/cp-frontend/src/components/manifest/progress.js +++ b/packages/cp-frontend/src/components/manifest/progress.js @@ -1,4 +1,5 @@ import React from 'react'; +import styled from 'styled-components'; import { Progressbar, @@ -6,20 +7,27 @@ import { ProgressbarButton } from 'joyent-ui-toolkit'; +const StyledProgressbarButton = styled(ProgressbarButton)` + svg { + margin-top: 1px; + margin-left: 1px; + } +`; + const Progress = ({ stage, create, edit }) => { const _nameCompleted = stage !== 'name'; const _nameActive = stage === 'name'; const _name = !create ? null : ( - Name the group - + ); @@ -28,14 +36,14 @@ const Progress = ({ stage, create, edit }) => { const _manifest = ( - - Define Services - + Define services + ); @@ -44,13 +52,13 @@ const Progress = ({ stage, create, edit }) => { const _environment = ( - - Define Environment - + Define environment + ); @@ -58,9 +66,9 @@ const Progress = ({ stage, create, edit }) => { const _review = ( - + Review and deploy - + ); diff --git a/packages/cp-frontend/src/components/manifest/review.js b/packages/cp-frontend/src/components/manifest/review.js index 9f43d9bf..36f8fbdc 100644 --- a/packages/cp-frontend/src/components/manifest/review.js +++ b/packages/cp-frontend/src/components/manifest/review.js @@ -7,9 +7,9 @@ import { Divider, H3, P, - Chevron, typography, - Card + Card, + Message } from 'joyent-ui-toolkit'; import forceArray from 'force-array'; import styled from 'styled-components'; @@ -54,14 +54,21 @@ const ServiceCard = Card.extend` const Dl = styled.dl`margin: 0;`; -const EnvironmentChevron = styled(Chevron)`float: right;`; +const Chevron = styled.svg` + transform: ; + float: right; + position: relative; + margin-top: 16px; + transform: ${props => + props.down ? 'rotate(90deg) scale(3)' : 'rotate(270deg) scale(3)'}; +`; const EnvironmentReview = ({ environment }) => { const value = environment .map(({ name, value }) => `${name}=${value}`) .join('\n'); - return ; + return ; }; export const Review = ({ @@ -71,8 +78,10 @@ export const Review = ({ dirty, loading, environmentToggles, + datacenter, ...state }) => { + console.log(datacenter); const serviceList = forceArray(state.services).map(({ name, config }) => ( {name} @@ -90,10 +99,18 @@ export const Review = ({ onClick={() => onEnvironmentToggle(name)} > Environment variables{' '} - + > + + ) : null} {config.environment && @@ -106,12 +123,18 @@ export const Review = ({ return (
+ {serviceList} +

A single instance of each service will be deployed.

- @@ -119,5 +142,4 @@ export const Review = ({ ); }; - -export default Review \ No newline at end of file +export default Review; diff --git a/packages/cp-frontend/src/containers/deployment-groups/list.js b/packages/cp-frontend/src/containers/deployment-groups/list.js index 33f33fb9..ab511521 100644 --- a/packages/cp-frontend/src/containers/deployment-groups/list.js +++ b/packages/cp-frontend/src/containers/deployment-groups/list.js @@ -14,10 +14,9 @@ import DeploymentGroupsQuery from '@graphql/DeploymentGroups.gql'; import DeploymentGroupsImportableQuery from '@graphql/DeploymentGroupsImportable.gql'; import { H3, Small, IconButton, BinIcon } from 'joyent-ui-toolkit'; import { withNotFound, GqlPaths } from '@containers/navigation'; +import ImportIcon from '../../assets/Import.svg'; -const DGsRows = Row.extend` - margin-top: ${remcalc(-7)}; -`; +const DGsRows = Row.extend`margin-top: ${remcalc(-7)};`; const Box = styled.div` position: relative; @@ -162,7 +161,9 @@ export const DeploymentGroupList = ({ - ⤵ + + + {name} diff --git a/packages/cp-frontend/test/unit/components/manifest/__snapshots__/environment.js.snap b/packages/cp-frontend/test/unit/components/manifest/__snapshots__/environment.js.snap index 90703498..0d856027 100644 --- a/packages/cp-frontend/test/unit/components/manifest/__snapshots__/environment.js.snap +++ b/packages/cp-frontend/test/unit/components/manifest/__snapshots__/environment.js.snap @@ -505,7 +505,7 @@ exports[`renders without throwing 1`] = ` > without throwing 1`] = ` > without throwing 1`] = ` -.c8 { +.c9 { font-family: sans-serif; font-size: 100%; line-height: 1.15; @@ -46,47 +46,47 @@ exports[`renders without throwing 1`] = ` border: solid 0.0625rem; } -.c8::-moz-focus-inner, -.c8[type='button']::-moz-focus-inner, -.c8[type='reset']::-moz-focus-inner, -.c8[type='submit']::-moz-focus-inner { +.c9::-moz-focus-inner, +.c9[type='button']::-moz-focus-inner, +.c9[type='reset']::-moz-focus-inner, +.c9[type='submit']::-moz-focus-inner { border-style: none; padding: 0; } -.c8:-moz-focusring, -.c8[type='button']:-moz-focusring, -.c8[type='reset']:-moz-focusring, -.c8[type='submit']:-moz-focusring { +.c9:-moz-focusring, +.c9[type='button']:-moz-focusring, +.c9[type='reset']:-moz-focusring, +.c9[type='submit']:-moz-focusring { outline: 0.0625rem dotted ButtonText; } -.c8:focus { +.c9:focus { outline: 0; text-decoration: none; } -.c8:hover { +.c9:hover { border: solid 0.0625rem; } -.c8:active, -.c8:active:hover, -.c8:active:focus { +.c9:active, +.c9:active:hover, +.c9:active:focus { background-image: none; outline: 0; } -.c8[disabled] { +.c9[disabled] { cursor: not-allowed; pointer-events: none; } -.c8 + button { +.c9 + button { margin-left: 1.25rem; } -.c9 { +.c10 { font-family: sans-serif; font-size: 100%; line-height: 1.15; @@ -132,43 +132,43 @@ exports[`renders without throwing 1`] = ` box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05); } -.c9::-moz-focus-inner, -.c9[type='button']::-moz-focus-inner, -.c9[type='reset']::-moz-focus-inner, -.c9[type='submit']::-moz-focus-inner { +.c10::-moz-focus-inner, +.c10[type='button']::-moz-focus-inner, +.c10[type='reset']::-moz-focus-inner, +.c10[type='submit']::-moz-focus-inner { border-style: none; padding: 0; } -.c9:-moz-focusring, -.c9[type='button']:-moz-focusring, -.c9[type='reset']:-moz-focusring, -.c9[type='submit']:-moz-focusring { +.c10:-moz-focusring, +.c10[type='button']:-moz-focusring, +.c10[type='reset']:-moz-focusring, +.c10[type='submit']:-moz-focusring { outline: 0.0625rem dotted ButtonText; } -.c9:focus { +.c10:focus { outline: 0; text-decoration: none; } -.c9:hover { +.c10:hover { border: solid 0.0625rem; } -.c9:active, -.c9:active:hover, -.c9:active:focus { +.c10:active, +.c10:active:hover, +.c10:active:focus { background-image: none; outline: 0; } -.c9[disabled] { +.c10[disabled] { cursor: not-allowed; pointer-events: none; } -.c9 + button { +.c10 + button { margin-left: 1.25rem; } @@ -200,7 +200,7 @@ exports[`renders without throwing 1`] = ` padding-left: 0.5rem; } -.c5 { +.c6 { font-size: 80%; font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; font-weight: 400; @@ -225,7 +225,7 @@ exports[`renders without throwing 1`] = ` -webkit-padding-after: 0; } -.c6 { +.c7 { box-sizing: border-box; width: 100%; height: 3rem; @@ -245,11 +245,11 @@ exports[`renders without throwing 1`] = ` outline: 0; } -.c6:focus { +.c7:focus { outline: 0; } -.c4 { +.c5 { font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; font-weight: 400; font-size: 0.9375rem; @@ -269,7 +269,12 @@ exports[`renders without throwing 1`] = ` display: block; } -.c7 { +.c4 { + margin-top: 1.5rem; + margin-bottom: 0.375rem; +} + +.c8 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -338,20 +343,20 @@ exports[`renders without throwing 1`] = ` form="testNameForm" > Your services will be deployed to eu-east-1 data center. without throwing 1`] = `
@@ -357,14 +362,14 @@ exports[`renders without throwing 1`] = ` className="c1" >
without throwing 1`] = `
@@ -396,14 +401,14 @@ exports[`renders without throwing 1`] = ` className="c1" >
without throwing 1`] = `
@@ -435,14 +440,14 @@ exports[`renders without throwing 1`] = ` className="c1" >
without throwing 1`] = `
@@ -474,7 +479,7 @@ exports[`renders without throwing 1`] = ` `; exports[`renders without throwing 2`] = ` -.c6 { +.c7 { font-family: sans-serif; font-size: 100%; line-height: 1.15; @@ -519,43 +524,43 @@ exports[`renders without throwing 2`] = ` border: solid 0.0625rem; } -.c6::-moz-focus-inner, -.c6[type='button']::-moz-focus-inner, -.c6[type='reset']::-moz-focus-inner, -.c6[type='submit']::-moz-focus-inner { +.c7::-moz-focus-inner, +.c7[type='button']::-moz-focus-inner, +.c7[type='reset']::-moz-focus-inner, +.c7[type='submit']::-moz-focus-inner { border-style: none; padding: 0; } -.c6:-moz-focusring, -.c6[type='button']:-moz-focusring, -.c6[type='reset']:-moz-focusring, -.c6[type='submit']:-moz-focusring { +.c7:-moz-focusring, +.c7[type='button']:-moz-focusring, +.c7[type='reset']:-moz-focusring, +.c7[type='submit']:-moz-focusring { outline: 0.0625rem dotted ButtonText; } -.c6:focus { +.c7:focus { outline: 0; text-decoration: none; } -.c6:hover { +.c7:hover { border: solid 0.0625rem; } -.c6:active, -.c6:active:hover, -.c6:active:focus { +.c7:active, +.c7:active:hover, +.c7:active:focus { background-image: none; outline: 0; } -.c6[disabled] { +.c7[disabled] { cursor: not-allowed; pointer-events: none; } -.c6 + button { +.c7 + button { margin-left: 1.25rem; } @@ -563,12 +568,12 @@ exports[`renders without throwing 2`] = ` float: left; } -.c4 { +.c5 { -webkit-fill: none; fill: none; } -.c3 { +.c4 { display: inline-block; border-radius: 50%; width: 1.125rem; @@ -589,7 +594,7 @@ exports[`renders without throwing 2`] = ` align-items: center; } -.c5 { +.c6 { padding: 0.75rem 1.125rem 0.75rem 0.75rem; background-color: #FFFFFF; color: #464646; @@ -600,27 +605,27 @@ exports[`renders without throwing 2`] = ` cursor: default; } -.c5:focus { +.c6:focus { background-color: #FFFFFF; border: none; color: #464646; } -.c5:hover { +.c6:hover { background-color: #FFFFFF; border: none; color: #464646; } -.c5:active, -.c5:active:hover, -.c5:active:focus { +.c6:active, +.c6:active:hover, +.c6:active:focus { background-color: #FFFFFF; border: none; color: #464646; } -.c8 { +.c9 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -642,7 +647,7 @@ exports[`renders without throwing 2`] = ` border-right: none; } -.c9 { +.c10 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -663,7 +668,7 @@ exports[`renders without throwing 2`] = ` border-right: 0.0625rem solid; } -.c2 { +.c3 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -686,7 +691,7 @@ exports[`renders without throwing 2`] = ` border-right: none; } -.c7 { +.c8 { position: absolute; top: 0; right: -1.6875rem; @@ -699,7 +704,7 @@ exports[`renders without throwing 2`] = ` margin: 0.4rem 0.625rem 0.4rem 0.625rem; } -.c10 { +.c11 { position: absolute; top: 0; right: -1.6875rem; @@ -719,6 +724,11 @@ exports[`renders without throwing 2`] = ` padding: 0; } +.c2 svg { + margin-top: 1px; + margin-left: 1px; +} +
    @@ -726,14 +736,14 @@ exports[`renders without throwing 2`] = ` className="c1" >
    without throwing 2`] = `
    @@ -765,14 +775,14 @@ exports[`renders without throwing 2`] = ` className="c1" >
    without throwing 2`] = `
    @@ -804,14 +814,14 @@ exports[`renders without throwing 2`] = ` className="c1" >
    without throwing 2`] = `
    @@ -843,7 +853,7 @@ exports[`renders without throwing 2`] = ` `; exports[`renders without throwing 3`] = ` -.c6 { +.c7 { font-family: sans-serif; font-size: 100%; line-height: 1.15; @@ -888,43 +898,43 @@ exports[`renders without throwing 3`] = ` border: solid 0.0625rem; } -.c6::-moz-focus-inner, -.c6[type='button']::-moz-focus-inner, -.c6[type='reset']::-moz-focus-inner, -.c6[type='submit']::-moz-focus-inner { +.c7::-moz-focus-inner, +.c7[type='button']::-moz-focus-inner, +.c7[type='reset']::-moz-focus-inner, +.c7[type='submit']::-moz-focus-inner { border-style: none; padding: 0; } -.c6:-moz-focusring, -.c6[type='button']:-moz-focusring, -.c6[type='reset']:-moz-focusring, -.c6[type='submit']:-moz-focusring { +.c7:-moz-focusring, +.c7[type='button']:-moz-focusring, +.c7[type='reset']:-moz-focusring, +.c7[type='submit']:-moz-focusring { outline: 0.0625rem dotted ButtonText; } -.c6:focus { +.c7:focus { outline: 0; text-decoration: none; } -.c6:hover { +.c7:hover { border: solid 0.0625rem; } -.c6:active, -.c6:active:hover, -.c6:active:focus { +.c7:active, +.c7:active:hover, +.c7:active:focus { background-image: none; outline: 0; } -.c6[disabled] { +.c7[disabled] { cursor: not-allowed; pointer-events: none; } -.c6 + button { +.c7 + button { margin-left: 1.25rem; } @@ -932,87 +942,87 @@ exports[`renders without throwing 3`] = ` float: left; } -.c10 { +.c11 { -webkit-fill: none; fill: none; } -.c13 { +.c14 { -webkit-fill: none; fill: none; } -.c4 { - -webkit-fill: none; - fill: none; -} - -.c9 { - display: inline-block; - border-radius: 50%; - width: 1.125rem; - height: 1.125rem; - background: inherit; - border: 0.0625rem solid; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border: 0.0625rem solid; -} - -.c12 { - display: inline-block; - border-radius: 50%; - width: 1.125rem; - height: 1.125rem; - background: inherit; - border: 0.0625rem solid; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c3 { - display: inline-block; - border-radius: 50%; - width: 1.125rem; - height: 1.125rem; - background: inherit; - border: 0.0625rem solid; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border: 0.0625rem solid; -} - .c5 { + -webkit-fill: none; + fill: none; +} + +.c10 { + display: inline-block; + border-radius: 50%; + width: 1.125rem; + height: 1.125rem; + background: inherit; + border: 0.0625rem solid; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border: 0.0625rem solid; +} + +.c13 { + display: inline-block; + border-radius: 50%; + width: 1.125rem; + height: 1.125rem; + background: inherit; + border: 0.0625rem solid; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c4 { + display: inline-block; + border-radius: 50%; + width: 1.125rem; + height: 1.125rem; + background: inherit; + border: 0.0625rem solid; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border: 0.0625rem solid; +} + +.c6 { padding: 0.75rem 1.125rem 0.75rem 0.75rem; background-color: #FFFFFF; color: #464646; @@ -1023,27 +1033,27 @@ exports[`renders without throwing 3`] = ` cursor: default; } -.c5:focus { +.c6:focus { background-color: #FFFFFF; border: none; color: #464646; } -.c5:hover { +.c6:hover { background-color: #FFFFFF; border: none; color: #464646; } -.c5:active, -.c5:active:hover, -.c5:active:focus { +.c6:active, +.c6:active:hover, +.c6:active:focus { background-color: #FFFFFF; border: none; color: #464646; } -.c2 { +.c3 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1069,7 +1079,7 @@ exports[`renders without throwing 3`] = ` border-right: none; } -.c11 { +.c12 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1091,7 +1101,7 @@ exports[`renders without throwing 3`] = ` border-right: none; } -.c15 { +.c16 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1112,7 +1122,7 @@ exports[`renders without throwing 3`] = ` border-right: 0.0625rem solid; } -.c8 { +.c9 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -1136,7 +1146,7 @@ exports[`renders without throwing 3`] = ` border-right: none; } -.c7 { +.c8 { position: absolute; top: 0; right: -1.6875rem; @@ -1149,7 +1159,503 @@ exports[`renders without throwing 3`] = ` margin: 0.4rem 0.625rem 0.4rem 0.625rem; } +.c15 { + position: absolute; + top: 0; + right: -1.6875rem; + border: solid; + border-width: 0 0.0625rem 0.0625rem 0; + padding: 1.06875rem; + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + margin: 0.4rem 0.625rem 0.4rem 0.625rem; +} + +.c17 { + position: absolute; + top: 0; + right: -1.6875rem; + border: solid; + border-width: 0 0.0625rem 0.0625rem 0; + padding: 1.06875rem; + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + margin: 0.4rem 0.625rem 0.4rem 0.625rem; + display: none; +} + +.c0 { + display: table; + list-style-type: none; + padding: 0; +} + +.c2 svg { + margin-top: 1px; + margin-left: 1px; +} + +
      +
    • +
      + + + + tick + + + + + + +
      +
      • +
    • +
      + + + + tick + + + + + + +
      +
      • +
    • +
      + + + + tick + + + + + + +
      +
      • +
    • +
      + + + + tick + + + + + + +
      +
      • +
    +`; + +exports[`renders without throwing 4`] = ` +.c7 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + min-width: 7.5rem; + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin: 0; + padding: 0.9375rem 1.125rem; + position: relative; + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + background-image: none; + border-radius: 0.25rem; + border: solid 0.0625rem; +} + +.c7::-moz-focus-inner, +.c7[type='button']::-moz-focus-inner, +.c7[type='reset']::-moz-focus-inner, +.c7[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c7:-moz-focusring, +.c7[type='button']:-moz-focusring, +.c7[type='reset']:-moz-focusring, +.c7[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c7:focus { + outline: 0; + text-decoration: none; +} + +.c7:hover { + border: solid 0.0625rem; +} + +.c7:active, +.c7:active:hover, +.c7:active:focus { + background-image: none; + outline: 0; +} + +.c7[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c7 + button { + margin-left: 1.25rem; +} + +.c1 { + float: left; +} + +.c12 { + -webkit-fill: none; + fill: none; +} + +.c15 { + -webkit-fill: none; + fill: none; +} + +.c5 { + -webkit-fill: none; + fill: none; +} + +.c11 { + display: inline-block; + border-radius: 50%; + width: 1.125rem; + height: 1.125rem; + background: inherit; + border: 0.0625rem solid; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border: 0.0625rem solid; +} + .c14 { + display: inline-block; + border-radius: 50%; + width: 1.125rem; + height: 1.125rem; + background: inherit; + border: 0.0625rem solid; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c4 { + display: inline-block; + border-radius: 50%; + width: 1.125rem; + height: 1.125rem; + background: inherit; + border: 0.0625rem solid; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border: 0.0625rem solid; +} + +.c6 { + padding: 0.75rem 1.125rem 0.75rem 0.75rem; + background-color: #FFFFFF; + color: #464646; + text-align: left; + border: none; + box-shadow: none; + line-height: 1.6; + cursor: default; +} + +.c6:focus { + background-color: #FFFFFF; + border: none; + color: #464646; +} + +.c6:hover { + background-color: #FFFFFF; + border: none; + color: #464646; +} + +.c6:active, +.c6:active:hover, +.c6:active:focus { + background-color: #FFFFFF; + border: none; + color: #464646; +} + +.c3 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + position: relative; + z-index: 10; + padding-left: 2.5rem; + border-top: 0.0625rem solid; + border-bottom: 0.0625rem solid; + border-top: 0.0625rem solid; + border-bottom: 0.0625rem solid; + border-left: 0.0625rem solid; + padding-left: 0.8125rem; + border-right: 0.0625rem solid; + border-right: none; +} + +.c13 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + position: relative; + z-index: 7; + padding-left: 2.5rem; + border-top: 0.0625rem solid; + border-bottom: 0.0625rem solid; + border-right: 0.0625rem solid; +} + +.c9 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + position: relative; + z-index: 9; + padding-left: 2.5rem; + border-top: 0.0625rem solid; + border-bottom: 0.0625rem solid; + border-top: 0.0625rem solid; + border-bottom: 0.0625rem solid; + border-right: 0.0625rem solid; + border-right: none; +} + +.c10 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + position: relative; + z-index: 8; + padding-left: 2.5rem; + border-top: 0.0625rem solid; + border-bottom: 0.0625rem solid; + border-top: 0.0625rem solid; + border-bottom: 0.0625rem solid; + border-right: 0.0625rem solid; + border-right: none; +} + +.c8 { position: absolute; top: 0; right: -1.6875rem; @@ -1182,6 +1688,11 @@ exports[`renders without throwing 3`] = ` padding: 0; } +.c2 svg { + margin-top: 1px; + margin-left: 1px; +} +
      @@ -1189,14 +1700,14 @@ exports[`renders without throwing 3`] = ` className="c1" >
      without throwing 3`] = `
      @@ -1228,14 +1739,53 @@ exports[`renders without throwing 3`] = ` className="c1" >
      + + + tick + + + + + + +
      + +
    • +
      + without throwing 3`] = `
      • @@ -1267,53 +1817,14 @@ exports[`renders without throwing 3`] = ` className="c1" >
      - - - - tick - - - - - -
      - -
    • -
      - without throwing 3`] = ` @@ -1344,8 +1855,8 @@ exports[`renders without throwing 3`] = `
    `; -exports[`renders without throwing 4`] = ` -.c6 { +exports[`renders without throwing 5`] = ` +.c7 { font-family: sans-serif; font-size: 100%; line-height: 1.15; @@ -1390,43 +1901,889 @@ exports[`renders without throwing 4`] = ` border: solid 0.0625rem; } -.c6::-moz-focus-inner, -.c6[type='button']::-moz-focus-inner, -.c6[type='reset']::-moz-focus-inner, -.c6[type='submit']::-moz-focus-inner { +.c7::-moz-focus-inner, +.c7[type='button']::-moz-focus-inner, +.c7[type='reset']::-moz-focus-inner, +.c7[type='submit']::-moz-focus-inner { border-style: none; padding: 0; } -.c6:-moz-focusring, -.c6[type='button']:-moz-focusring, -.c6[type='reset']:-moz-focusring, -.c6[type='submit']:-moz-focusring { +.c7:-moz-focusring, +.c7[type='button']:-moz-focusring, +.c7[type='reset']:-moz-focusring, +.c7[type='submit']:-moz-focusring { outline: 0.0625rem dotted ButtonText; } -.c6:focus { +.c7:focus { outline: 0; text-decoration: none; } -.c6:hover { +.c7:hover { border: solid 0.0625rem; } +.c7:active, +.c7:active:hover, +.c7:active:focus { + background-image: none; + outline: 0; +} + +.c7[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c7 + button { + margin-left: 1.25rem; +} + +.c1 { + float: left; +} + +.c13 { + -webkit-fill: none; + fill: none; +} + +.c5 { + -webkit-fill: none; + fill: none; +} + +.c12 { + display: inline-block; + border-radius: 50%; + width: 1.125rem; + height: 1.125rem; + background: inherit; + border: 0.0625rem solid; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border: 0.0625rem solid; +} + +.c4 { + display: inline-block; + border-radius: 50%; + width: 1.125rem; + height: 1.125rem; + background: inherit; + border: 0.0625rem solid; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + border: 0.0625rem solid; +} + +.c6 { + padding: 0.75rem 1.125rem 0.75rem 0.75rem; + background-color: #FFFFFF; + color: #464646; + text-align: left; + border: none; + box-shadow: none; + line-height: 1.6; + cursor: default; +} + +.c6:focus { + background-color: #FFFFFF; + border: none; + color: #464646; +} + +.c6:hover { + background-color: #FFFFFF; + border: none; + color: #464646; +} + .c6:active, .c6:active:hover, .c6:active:focus { + background-color: #FFFFFF; + border: none; + color: #464646; +} + +.c3 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + position: relative; + z-index: 10; + padding-left: 2.5rem; + border-top: 0.0625rem solid; + border-bottom: 0.0625rem solid; + border-top: 0.0625rem solid; + border-bottom: 0.0625rem solid; + border-left: 0.0625rem solid; + padding-left: 0.8125rem; + border-right: 0.0625rem solid; + border-right: none; +} + +.c9 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + position: relative; + z-index: 9; + padding-left: 2.5rem; + border-top: 0.0625rem solid; + border-bottom: 0.0625rem solid; + border-top: 0.0625rem solid; + border-bottom: 0.0625rem solid; + border-right: 0.0625rem solid; + border-right: none; +} + +.c10 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + position: relative; + z-index: 8; + padding-left: 2.5rem; + border-top: 0.0625rem solid; + border-bottom: 0.0625rem solid; + border-top: 0.0625rem solid; + border-bottom: 0.0625rem solid; + border-right: 0.0625rem solid; + border-right: none; +} + +.c11 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + position: relative; + z-index: 7; + padding-left: 2.5rem; + border-top: 0.0625rem solid; + border-bottom: 0.0625rem solid; + border-top: 0.0625rem solid; + border-bottom: 0.0625rem solid; + border-right: 0.0625rem solid; +} + +.c8 { + position: absolute; + top: 0; + right: -1.6875rem; + border: solid; + border-width: 0 0.0625rem 0.0625rem 0; + padding: 1.06875rem; + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + margin: 0.4rem 0.625rem 0.4rem 0.625rem; +} + +.c14 { + position: absolute; + top: 0; + right: -1.6875rem; + border: solid; + border-width: 0 0.0625rem 0.0625rem 0; + padding: 1.06875rem; + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + margin: 0.4rem 0.625rem 0.4rem 0.625rem; + display: none; +} + +.c0 { + display: table; + list-style-type: none; + padding: 0; +} + +.c2 svg { + margin-top: 1px; + margin-left: 1px; +} + +
      +
    • +
      + + + + tick + + + + + + +
      +
      • +
    • +
      + + + + tick + + + + + + +
      +
      • +
    • +
      + + + + tick + + + + + + +
      +
      • +
    • +
      + + + + tick + + + + + + +
      +
      • +
    +`; + +exports[`renders without throwing 6`] = ` +.c7 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + min-width: 7.5rem; + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin: 0; + padding: 0.9375rem 1.125rem; + position: relative; + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + background-image: none; + border-radius: 0.25rem; + border: solid 0.0625rem; +} + +.c7::-moz-focus-inner, +.c7[type='button']::-moz-focus-inner, +.c7[type='reset']::-moz-focus-inner, +.c7[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c7:-moz-focusring, +.c7[type='button']:-moz-focusring, +.c7[type='reset']:-moz-focusring, +.c7[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c7:focus { + outline: 0; + text-decoration: none; +} + +.c7:hover { + border: solid 0.0625rem; +} + +.c7:active, +.c7:active:hover, +.c7:active:focus { background-image: none; outline: 0; } -.c6[disabled] { +.c7[disabled] { cursor: not-allowed; pointer-events: none; } -.c6 + button { +.c7 + button { + margin-left: 1.25rem; +} + +.c1 { + float: left; +} + +.c5 { + -webkit-fill: none; + fill: none; +} + +.c4 { + display: inline-block; + border-radius: 50%; + width: 1.125rem; + height: 1.125rem; + background: inherit; + border: 0.0625rem solid; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; +} + +.c6 { + padding: 0.75rem 1.125rem 0.75rem 0.75rem; + background-color: #FFFFFF; + color: #464646; + text-align: left; + border: none; + box-shadow: none; + line-height: 1.6; + cursor: default; +} + +.c6:focus { + background-color: #FFFFFF; + border: none; + color: #464646; +} + +.c6:hover { + background-color: #FFFFFF; + border: none; + color: #464646; +} + +.c6:active, +.c6:active:hover, +.c6:active:focus { + background-color: #FFFFFF; + border: none; + color: #464646; +} + +.c9 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + position: relative; + z-index: 8; + padding-left: 2.5rem; + border-top: 0.0625rem solid; + border-bottom: 0.0625rem solid; + border-right: 0.0625rem solid; + border-right: none; +} + +.c10 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + position: relative; + z-index: 7; + padding-left: 2.5rem; + border-top: 0.0625rem solid; + border-bottom: 0.0625rem solid; + border-right: 0.0625rem solid; +} + +.c3 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + position: relative; + z-index: 9; + padding-left: 2.5rem; + border-top: 0.0625rem solid; + border-bottom: 0.0625rem solid; + border-left: 0.0625rem solid; + padding-left: 0.8125rem; + border-right: none; +} + +.c8 { + position: absolute; + top: 0; + right: -1.6875rem; + border: solid; + border-width: 0 0.0625rem 0.0625rem 0; + padding: 1.06875rem; + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + margin: 0.4rem 0.625rem 0.4rem 0.625rem; +} + +.c11 { + position: absolute; + top: 0; + right: -1.6875rem; + border: solid; + border-width: 0 0.0625rem 0.0625rem 0; + padding: 1.06875rem; + -webkit-transform: rotate(-45deg); + -ms-transform: rotate(-45deg); + transform: rotate(-45deg); + margin: 0.4rem 0.625rem 0.4rem 0.625rem; + display: none; +} + +.c0 { + display: table; + list-style-type: none; + padding: 0; +} + +.c2 svg { + margin-top: 1px; + margin-left: 1px; +} + +
      +
    • +
      + + + + tick + + + + + + +
      +
      • +
    • +
      + + + + tick + + + + + + +
      +
      • +
    • +
      + + + + tick + + + + + + +
      +
      • +
    +`; + +exports[`renders without throwing 7`] = ` +.c7 { + font-family: sans-serif; + font-size: 100%; + line-height: 1.15; + margin: 0; + overflow: visible; + text-transform: none; + -webkit-appearance: button; + -moz-appearance: button; + appearance: button; + min-width: 7.5rem; + box-sizing: border-box; + display: inline-block; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + margin: 0; + padding: 0.9375rem 1.125rem; + position: relative; + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + font-size: 0.9375rem; + text-align: center; + font-style: normal; + font-stretch: normal; + line-height: normal; + -webkit-letter-spacing: normal; + -moz-letter-spacing: normal; + -ms-letter-spacing: normal; + letter-spacing: normal; + text-decoration: none; + white-space: nowrap; + vertical-align: middle; + touch-action: manipulation; + cursor: pointer; + background-image: none; + border-radius: 0.25rem; + border: solid 0.0625rem; +} + +.c7::-moz-focus-inner, +.c7[type='button']::-moz-focus-inner, +.c7[type='reset']::-moz-focus-inner, +.c7[type='submit']::-moz-focus-inner { + border-style: none; + padding: 0; +} + +.c7:-moz-focusring, +.c7[type='button']:-moz-focusring, +.c7[type='reset']:-moz-focusring, +.c7[type='submit']:-moz-focusring { + outline: 0.0625rem dotted ButtonText; +} + +.c7:focus { + outline: 0; + text-decoration: none; +} + +.c7:hover { + border: solid 0.0625rem; +} + +.c7:active, +.c7:active:hover, +.c7:active:focus { + background-image: none; + outline: 0; +} + +.c7[disabled] { + cursor: not-allowed; + pointer-events: none; +} + +.c7 + button { margin-left: 1.25rem; } @@ -1444,7 +2801,7 @@ exports[`renders without throwing 4`] = ` fill: none; } -.c4 { +.c5 { -webkit-fill: none; fill: none; } @@ -1492,7 +2849,7 @@ exports[`renders without throwing 4`] = ` align-items: center; } -.c3 { +.c4 { display: inline-block; border-radius: 50%; width: 1.125rem; @@ -1514,7 +2871,7 @@ exports[`renders without throwing 4`] = ` border: 0.0625rem solid; } -.c5 { +.c6 { padding: 0.75rem 1.125rem 0.75rem 0.75rem; background-color: #FFFFFF; color: #464646; @@ -1525,52 +2882,26 @@ exports[`renders without throwing 4`] = ` cursor: default; } -.c5:focus { +.c6:focus { background-color: #FFFFFF; border: none; color: #464646; } -.c5:hover { +.c6:hover { background-color: #FFFFFF; border: none; color: #464646; } -.c5:active, -.c5:active:hover, -.c5:active:focus { +.c6:active, +.c6:active:hover, +.c6:active:focus { background-color: #FFFFFF; border: none; color: #464646; } -.c2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - position: relative; - z-index: 10; - padding-left: 2.5rem; - border-top: 0.0625rem solid; - border-bottom: 0.0625rem solid; - border-top: 0.0625rem solid; - border-bottom: 0.0625rem solid; - border-left: 0.0625rem solid; - padding-left: 0.8125rem; - border-right: 0.0625rem solid; - border-right: none; -} - .c12 { display: -webkit-box; display: -webkit-flex; @@ -1592,30 +2923,6 @@ exports[`renders without throwing 4`] = ` border-right: 0.0625rem solid; } -.c8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - position: relative; - z-index: 9; - padding-left: 2.5rem; - border-top: 0.0625rem solid; - border-bottom: 0.0625rem solid; - border-top: 0.0625rem solid; - border-bottom: 0.0625rem solid; - border-right: 0.0625rem solid; - border-right: none; -} - .c9 { display: -webkit-box; display: -webkit-flex; @@ -1640,7 +2947,33 @@ exports[`renders without throwing 4`] = ` border-right: none; } -.c7 { +.c3 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + position: relative; + z-index: 9; + padding-left: 2.5rem; + border-top: 0.0625rem solid; + border-bottom: 0.0625rem solid; + border-top: 0.0625rem solid; + border-bottom: 0.0625rem solid; + border-left: 0.0625rem solid; + padding-left: 0.8125rem; + border-right: 0.0625rem solid; + border-right: none; +} + +.c8 { position: absolute; top: 0; right: -1.6875rem; @@ -1673,6 +3006,11 @@ exports[`renders without throwing 4`] = ` padding: 0; } +.c2 svg { + margin-top: 1px; + margin-left: 1px; +} +
      @@ -1680,14 +3018,14 @@ exports[`renders without throwing 4`] = ` className="c1" >
      without throwing 4`] = `
      @@ -1719,46 +3057,7 @@ exports[`renders without throwing 4`] = ` className="c1" >
      - - - - tick - - - - - - -
      - -
    • -
      without throwing 4`] = `
      • @@ -1797,7 +3096,7 @@ exports[`renders without throwing 4`] = ` className="c1" >
      without throwing 4`] = ` @@ -1835,8 +3134,8 @@ exports[`renders without throwing 4`] = `
    `; -exports[`renders without throwing 5`] = ` -.c6 { +exports[`renders without throwing 8`] = ` +.c7 { font-family: sans-serif; font-size: 100%; line-height: 1.15; @@ -1881,43 +3180,43 @@ exports[`renders without throwing 5`] = ` border: solid 0.0625rem; } -.c6::-moz-focus-inner, -.c6[type='button']::-moz-focus-inner, -.c6[type='reset']::-moz-focus-inner, -.c6[type='submit']::-moz-focus-inner { +.c7::-moz-focus-inner, +.c7[type='button']::-moz-focus-inner, +.c7[type='reset']::-moz-focus-inner, +.c7[type='submit']::-moz-focus-inner { border-style: none; padding: 0; } -.c6:-moz-focusring, -.c6[type='button']:-moz-focusring, -.c6[type='reset']:-moz-focusring, -.c6[type='submit']:-moz-focusring { +.c7:-moz-focusring, +.c7[type='button']:-moz-focusring, +.c7[type='reset']:-moz-focusring, +.c7[type='submit']:-moz-focusring { outline: 0.0625rem dotted ButtonText; } -.c6:focus { +.c7:focus { outline: 0; text-decoration: none; } -.c6:hover { +.c7:hover { border: solid 0.0625rem; } -.c6:active, -.c6:active:hover, -.c6:active:focus { +.c7:active, +.c7:active:hover, +.c7:active:focus { background-image: none; outline: 0; } -.c6[disabled] { +.c7[disabled] { cursor: not-allowed; pointer-events: none; } -.c6 + button { +.c7 + button { margin-left: 1.25rem; } @@ -1930,7 +3229,7 @@ exports[`renders without throwing 5`] = ` fill: none; } -.c4 { +.c5 { -webkit-fill: none; fill: none; } @@ -1957,7 +3256,7 @@ exports[`renders without throwing 5`] = ` border: 0.0625rem solid; } -.c3 { +.c4 { display: inline-block; border-radius: 50%; width: 1.125rem; @@ -1979,7 +3278,7 @@ exports[`renders without throwing 5`] = ` border: 0.0625rem solid; } -.c5 { +.c6 { padding: 0.75rem 1.125rem 0.75rem 0.75rem; background-color: #FFFFFF; color: #464646; @@ -1990,76 +3289,26 @@ exports[`renders without throwing 5`] = ` cursor: default; } -.c5:focus { +.c6:focus { background-color: #FFFFFF; border: none; color: #464646; } -.c5:hover { +.c6:hover { background-color: #FFFFFF; border: none; color: #464646; } -.c5:active, -.c5:active:hover, -.c5:active:focus { +.c6:active, +.c6:active:hover, +.c6:active:focus { background-color: #FFFFFF; border: none; color: #464646; } -.c2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - position: relative; - z-index: 10; - padding-left: 2.5rem; - border-top: 0.0625rem solid; - border-bottom: 0.0625rem solid; - border-top: 0.0625rem solid; - border-bottom: 0.0625rem solid; - border-left: 0.0625rem solid; - padding-left: 0.8125rem; - border-right: 0.0625rem solid; - border-right: none; -} - -.c8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - position: relative; - z-index: 9; - padding-left: 2.5rem; - border-top: 0.0625rem solid; - border-bottom: 0.0625rem solid; - border-top: 0.0625rem solid; - border-bottom: 0.0625rem solid; - border-right: 0.0625rem solid; - border-right: none; -} - .c9 { display: -webkit-box; display: -webkit-flex; @@ -2107,7 +3356,33 @@ exports[`renders without throwing 5`] = ` border-right: 0.0625rem solid; } -.c7 { +.c3 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + position: relative; + z-index: 9; + padding-left: 2.5rem; + border-top: 0.0625rem solid; + border-bottom: 0.0625rem solid; + border-top: 0.0625rem solid; + border-bottom: 0.0625rem solid; + border-left: 0.0625rem solid; + padding-left: 0.8125rem; + border-right: 0.0625rem solid; + border-right: none; +} + +.c8 { position: absolute; top: 0; right: -1.6875rem; @@ -2140,6 +3415,11 @@ exports[`renders without throwing 5`] = ` padding: 0; } +.c2 svg { + margin-top: 1px; + margin-left: 1px; +} +
      @@ -2147,14 +3427,14 @@ exports[`renders without throwing 5`] = ` className="c1" >
      without throwing 5`] = `
      @@ -2186,14 +3466,14 @@ exports[`renders without throwing 5`] = ` className="c1" >
      without throwing 5`] = `
      @@ -2225,46 +3505,7 @@ exports[`renders without throwing 5`] = ` className="c1" >
      - - - - tick - - - - - - -
      - -
    • -
      without throwing 5`] = ` @@ -2301,1204 +3542,3 @@ exports[`renders without throwing 5`] = `
    `; - -exports[`renders without throwing 6`] = ` -.c6 { - font-family: sans-serif; - font-size: 100%; - line-height: 1.15; - margin: 0; - overflow: visible; - text-transform: none; - -webkit-appearance: button; - -moz-appearance: button; - appearance: button; - min-width: 7.5rem; - box-sizing: border-box; - display: inline-block; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - margin: 0; - padding: 0.9375rem 1.125rem; - position: relative; - font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; - font-weight: 400; - font-size: 0.9375rem; - text-align: center; - font-style: normal; - font-stretch: normal; - line-height: normal; - -webkit-letter-spacing: normal; - -moz-letter-spacing: normal; - -ms-letter-spacing: normal; - letter-spacing: normal; - text-decoration: none; - white-space: nowrap; - vertical-align: middle; - touch-action: manipulation; - cursor: pointer; - background-image: none; - border-radius: 0.25rem; - border: solid 0.0625rem; -} - -.c6::-moz-focus-inner, -.c6[type='button']::-moz-focus-inner, -.c6[type='reset']::-moz-focus-inner, -.c6[type='submit']::-moz-focus-inner { - border-style: none; - padding: 0; -} - -.c6:-moz-focusring, -.c6[type='button']:-moz-focusring, -.c6[type='reset']:-moz-focusring, -.c6[type='submit']:-moz-focusring { - outline: 0.0625rem dotted ButtonText; -} - -.c6:focus { - outline: 0; - text-decoration: none; -} - -.c6:hover { - border: solid 0.0625rem; -} - -.c6:active, -.c6:active:hover, -.c6:active:focus { - background-image: none; - outline: 0; -} - -.c6[disabled] { - cursor: not-allowed; - pointer-events: none; -} - -.c6 + button { - margin-left: 1.25rem; -} - -.c1 { - float: left; -} - -.c4 { - -webkit-fill: none; - fill: none; -} - -.c3 { - display: inline-block; - border-radius: 50%; - width: 1.125rem; - height: 1.125rem; - background: inherit; - border: 0.0625rem solid; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c5 { - padding: 0.75rem 1.125rem 0.75rem 0.75rem; - background-color: #FFFFFF; - color: #464646; - text-align: left; - border: none; - box-shadow: none; - line-height: 1.6; - cursor: default; -} - -.c5:focus { - background-color: #FFFFFF; - border: none; - color: #464646; -} - -.c5:hover { - background-color: #FFFFFF; - border: none; - color: #464646; -} - -.c5:active, -.c5:active:hover, -.c5:active:focus { - background-color: #FFFFFF; - border: none; - color: #464646; -} - -.c8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - position: relative; - z-index: 8; - padding-left: 2.5rem; - border-top: 0.0625rem solid; - border-bottom: 0.0625rem solid; - border-right: 0.0625rem solid; - border-right: none; -} - -.c9 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - position: relative; - z-index: 7; - padding-left: 2.5rem; - border-top: 0.0625rem solid; - border-bottom: 0.0625rem solid; - border-right: 0.0625rem solid; -} - -.c2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - position: relative; - z-index: 9; - padding-left: 2.5rem; - border-top: 0.0625rem solid; - border-bottom: 0.0625rem solid; - border-left: 0.0625rem solid; - padding-left: 0.8125rem; - border-right: none; -} - -.c7 { - position: absolute; - top: 0; - right: -1.6875rem; - border: solid; - border-width: 0 0.0625rem 0.0625rem 0; - padding: 1.06875rem; - -webkit-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); - transform: rotate(-45deg); - margin: 0.4rem 0.625rem 0.4rem 0.625rem; -} - -.c10 { - position: absolute; - top: 0; - right: -1.6875rem; - border: solid; - border-width: 0 0.0625rem 0.0625rem 0; - padding: 1.06875rem; - -webkit-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); - transform: rotate(-45deg); - margin: 0.4rem 0.625rem 0.4rem 0.625rem; - display: none; -} - -.c0 { - display: table; - list-style-type: none; - padding: 0; -} - -
      -
    • -
      - - - - tick - - - - - - -
      -
      • -
    • -
      - - - - tick - - - - - - -
      -
      • -
    • -
      - - - - tick - - - - - - -
      -
      • -
    -`; - -exports[`renders without throwing 7`] = ` -.c6 { - font-family: sans-serif; - font-size: 100%; - line-height: 1.15; - margin: 0; - overflow: visible; - text-transform: none; - -webkit-appearance: button; - -moz-appearance: button; - appearance: button; - min-width: 7.5rem; - box-sizing: border-box; - display: inline-block; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - margin: 0; - padding: 0.9375rem 1.125rem; - position: relative; - font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; - font-weight: 400; - font-size: 0.9375rem; - text-align: center; - font-style: normal; - font-stretch: normal; - line-height: normal; - -webkit-letter-spacing: normal; - -moz-letter-spacing: normal; - -ms-letter-spacing: normal; - letter-spacing: normal; - text-decoration: none; - white-space: nowrap; - vertical-align: middle; - touch-action: manipulation; - cursor: pointer; - background-image: none; - border-radius: 0.25rem; - border: solid 0.0625rem; -} - -.c6::-moz-focus-inner, -.c6[type='button']::-moz-focus-inner, -.c6[type='reset']::-moz-focus-inner, -.c6[type='submit']::-moz-focus-inner { - border-style: none; - padding: 0; -} - -.c6:-moz-focusring, -.c6[type='button']:-moz-focusring, -.c6[type='reset']:-moz-focusring, -.c6[type='submit']:-moz-focusring { - outline: 0.0625rem dotted ButtonText; -} - -.c6:focus { - outline: 0; - text-decoration: none; -} - -.c6:hover { - border: solid 0.0625rem; -} - -.c6:active, -.c6:active:hover, -.c6:active:focus { - background-image: none; - outline: 0; -} - -.c6[disabled] { - cursor: not-allowed; - pointer-events: none; -} - -.c6 + button { - margin-left: 1.25rem; -} - -.c1 { - float: left; -} - -.c10 { - -webkit-fill: none; - fill: none; -} - -.c13 { - -webkit-fill: none; - fill: none; -} - -.c4 { - -webkit-fill: none; - fill: none; -} - -.c9 { - display: inline-block; - border-radius: 50%; - width: 1.125rem; - height: 1.125rem; - background: inherit; - border: 0.0625rem solid; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border: 0.0625rem solid; -} - -.c12 { - display: inline-block; - border-radius: 50%; - width: 1.125rem; - height: 1.125rem; - background: inherit; - border: 0.0625rem solid; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; -} - -.c3 { - display: inline-block; - border-radius: 50%; - width: 1.125rem; - height: 1.125rem; - background: inherit; - border: 0.0625rem solid; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border: 0.0625rem solid; -} - -.c5 { - padding: 0.75rem 1.125rem 0.75rem 0.75rem; - background-color: #FFFFFF; - color: #464646; - text-align: left; - border: none; - box-shadow: none; - line-height: 1.6; - cursor: default; -} - -.c5:focus { - background-color: #FFFFFF; - border: none; - color: #464646; -} - -.c5:hover { - background-color: #FFFFFF; - border: none; - color: #464646; -} - -.c5:active, -.c5:active:hover, -.c5:active:focus { - background-color: #FFFFFF; - border: none; - color: #464646; -} - -.c11 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - position: relative; - z-index: 7; - padding-left: 2.5rem; - border-top: 0.0625rem solid; - border-bottom: 0.0625rem solid; - border-right: 0.0625rem solid; -} - -.c8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - position: relative; - z-index: 8; - padding-left: 2.5rem; - border-top: 0.0625rem solid; - border-bottom: 0.0625rem solid; - border-top: 0.0625rem solid; - border-bottom: 0.0625rem solid; - border-right: 0.0625rem solid; - border-right: none; -} - -.c2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - position: relative; - z-index: 9; - padding-left: 2.5rem; - border-top: 0.0625rem solid; - border-bottom: 0.0625rem solid; - border-top: 0.0625rem solid; - border-bottom: 0.0625rem solid; - border-left: 0.0625rem solid; - padding-left: 0.8125rem; - border-right: 0.0625rem solid; - border-right: none; -} - -.c7 { - position: absolute; - top: 0; - right: -1.6875rem; - border: solid; - border-width: 0 0.0625rem 0.0625rem 0; - padding: 1.06875rem; - -webkit-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); - transform: rotate(-45deg); - margin: 0.4rem 0.625rem 0.4rem 0.625rem; -} - -.c14 { - position: absolute; - top: 0; - right: -1.6875rem; - border: solid; - border-width: 0 0.0625rem 0.0625rem 0; - padding: 1.06875rem; - -webkit-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); - transform: rotate(-45deg); - margin: 0.4rem 0.625rem 0.4rem 0.625rem; - display: none; -} - -.c0 { - display: table; - list-style-type: none; - padding: 0; -} - -
      -
    • -
      - - - - tick - - - - - - -
      -
      • -
    • -
      - - - - tick - - - - - - -
      -
      • -
    • -
      - - - - tick - - - - - - -
      -
      • -
    -`; - -exports[`renders without throwing 8`] = ` -.c6 { - font-family: sans-serif; - font-size: 100%; - line-height: 1.15; - margin: 0; - overflow: visible; - text-transform: none; - -webkit-appearance: button; - -moz-appearance: button; - appearance: button; - min-width: 7.5rem; - box-sizing: border-box; - display: inline-block; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - margin: 0; - padding: 0.9375rem 1.125rem; - position: relative; - font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; - font-weight: 400; - font-size: 0.9375rem; - text-align: center; - font-style: normal; - font-stretch: normal; - line-height: normal; - -webkit-letter-spacing: normal; - -moz-letter-spacing: normal; - -ms-letter-spacing: normal; - letter-spacing: normal; - text-decoration: none; - white-space: nowrap; - vertical-align: middle; - touch-action: manipulation; - cursor: pointer; - background-image: none; - border-radius: 0.25rem; - border: solid 0.0625rem; -} - -.c6::-moz-focus-inner, -.c6[type='button']::-moz-focus-inner, -.c6[type='reset']::-moz-focus-inner, -.c6[type='submit']::-moz-focus-inner { - border-style: none; - padding: 0; -} - -.c6:-moz-focusring, -.c6[type='button']:-moz-focusring, -.c6[type='reset']:-moz-focusring, -.c6[type='submit']:-moz-focusring { - outline: 0.0625rem dotted ButtonText; -} - -.c6:focus { - outline: 0; - text-decoration: none; -} - -.c6:hover { - border: solid 0.0625rem; -} - -.c6:active, -.c6:active:hover, -.c6:active:focus { - background-image: none; - outline: 0; -} - -.c6[disabled] { - cursor: not-allowed; - pointer-events: none; -} - -.c6 + button { - margin-left: 1.25rem; -} - -.c1 { - float: left; -} - -.c11 { - -webkit-fill: none; - fill: none; -} - -.c4 { - -webkit-fill: none; - fill: none; -} - -.c10 { - display: inline-block; - border-radius: 50%; - width: 1.125rem; - height: 1.125rem; - background: inherit; - border: 0.0625rem solid; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border: 0.0625rem solid; -} - -.c3 { - display: inline-block; - border-radius: 50%; - width: 1.125rem; - height: 1.125rem; - background: inherit; - border: 0.0625rem solid; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - border: 0.0625rem solid; -} - -.c5 { - padding: 0.75rem 1.125rem 0.75rem 0.75rem; - background-color: #FFFFFF; - color: #464646; - text-align: left; - border: none; - box-shadow: none; - line-height: 1.6; - cursor: default; -} - -.c5:focus { - background-color: #FFFFFF; - border: none; - color: #464646; -} - -.c5:hover { - background-color: #FFFFFF; - border: none; - color: #464646; -} - -.c5:active, -.c5:active:hover, -.c5:active:focus { - background-color: #FFFFFF; - border: none; - color: #464646; -} - -.c8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - position: relative; - z-index: 8; - padding-left: 2.5rem; - border-top: 0.0625rem solid; - border-bottom: 0.0625rem solid; - border-top: 0.0625rem solid; - border-bottom: 0.0625rem solid; - border-right: 0.0625rem solid; - border-right: none; -} - -.c9 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - position: relative; - z-index: 7; - padding-left: 2.5rem; - border-top: 0.0625rem solid; - border-bottom: 0.0625rem solid; - border-top: 0.0625rem solid; - border-bottom: 0.0625rem solid; - border-right: 0.0625rem solid; -} - -.c2 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - position: relative; - z-index: 9; - padding-left: 2.5rem; - border-top: 0.0625rem solid; - border-bottom: 0.0625rem solid; - border-top: 0.0625rem solid; - border-bottom: 0.0625rem solid; - border-left: 0.0625rem solid; - padding-left: 0.8125rem; - border-right: 0.0625rem solid; - border-right: none; -} - -.c7 { - position: absolute; - top: 0; - right: -1.6875rem; - border: solid; - border-width: 0 0.0625rem 0.0625rem 0; - padding: 1.06875rem; - -webkit-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); - transform: rotate(-45deg); - margin: 0.4rem 0.625rem 0.4rem 0.625rem; -} - -.c12 { - position: absolute; - top: 0; - right: -1.6875rem; - border: solid; - border-width: 0 0.0625rem 0.0625rem 0; - padding: 1.06875rem; - -webkit-transform: rotate(-45deg); - -ms-transform: rotate(-45deg); - transform: rotate(-45deg); - margin: 0.4rem 0.625rem 0.4rem 0.625rem; - display: none; -} - -.c0 { - display: table; - list-style-type: none; - padding: 0; -} - -
      -
    • -
      - - - - tick - - - - - - -
      -
      • -
    • -
      - - - - tick - - - - - - -
      -
      • -
    • -
      - - - - tick - - - - - - -
      -
      • -
    -`; diff --git a/packages/cp-frontend/test/unit/components/manifest/__snapshots__/review.js.snap b/packages/cp-frontend/test/unit/components/manifest/__snapshots__/review.js.snap index 7a9582db..8b25ad90 100644 --- a/packages/cp-frontend/test/unit/components/manifest/__snapshots__/review.js.snap +++ b/packages/cp-frontend/test/unit/components/manifest/__snapshots__/review.js.snap @@ -1,26 +1,26 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`renders without throwing 1`] = ` -.c3 { +.c10 { -webkit-animation: iCqDak 1.5s ease-out 0s infinite; animation: iCqDak 1.5s ease-out 0s infinite; } -.c4 { +.c11 { -webkit-animation: iCqDak 1.5s ease-out 0s infinite; animation: iCqDak 1.5s ease-out 0s infinite; -webkit-animation-delay: 0.5s; animation-delay: 0.5s; } -.c5 { +.c12 { -webkit-animation: iCqDak 1.5s ease-out 0s infinite; animation: iCqDak 1.5s ease-out 0s infinite; -webkit-animation-delay: 1s; animation-delay: 1s; } -.c1 { +.c8 { font-family: sans-serif; font-size: 100%; line-height: 1.15; @@ -66,47 +66,47 @@ exports[`renders without throwing 1`] = ` box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05); } -.c1::-moz-focus-inner, -.c1[type='button']::-moz-focus-inner, -.c1[type='reset']::-moz-focus-inner, -.c1[type='submit']::-moz-focus-inner { +.c8::-moz-focus-inner, +.c8[type='button']::-moz-focus-inner, +.c8[type='reset']::-moz-focus-inner, +.c8[type='submit']::-moz-focus-inner { border-style: none; padding: 0; } -.c1:-moz-focusring, -.c1[type='button']:-moz-focusring, -.c1[type='reset']:-moz-focusring, -.c1[type='submit']:-moz-focusring { +.c8:-moz-focusring, +.c8[type='button']:-moz-focusring, +.c8[type='reset']:-moz-focusring, +.c8[type='submit']:-moz-focusring { outline: 0.0625rem dotted ButtonText; } -.c1:focus { +.c8:focus { outline: 0; text-decoration: none; } -.c1:hover { +.c8:hover { border: solid 0.0625rem; } -.c1:active, -.c1:active:hover, -.c1:active:focus { +.c8:active, +.c8:active:hover, +.c8:active:focus { background-image: none; outline: 0; } -.c1[disabled] { +.c8[disabled] { cursor: not-allowed; pointer-events: none; } -.c1 + button { +.c8 + button { margin-left: 1.25rem; } -.c2 { +.c9 { font-family: sans-serif; font-size: 100%; line-height: 1.15; @@ -149,50 +149,90 @@ exports[`renders without throwing 1`] = ` background-image: none; border-radius: 0.25rem; border: solid 0.0625rem; - box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05); } -.c2::-moz-focus-inner, -.c2[type='button']::-moz-focus-inner, -.c2[type='reset']::-moz-focus-inner, -.c2[type='submit']::-moz-focus-inner { +.c9::-moz-focus-inner, +.c9[type='button']::-moz-focus-inner, +.c9[type='reset']::-moz-focus-inner, +.c9[type='submit']::-moz-focus-inner { border-style: none; padding: 0; } -.c2:-moz-focusring, -.c2[type='button']:-moz-focusring, -.c2[type='reset']:-moz-focusring, -.c2[type='submit']:-moz-focusring { +.c9:-moz-focusring, +.c9[type='button']:-moz-focusring, +.c9[type='reset']:-moz-focusring, +.c9[type='submit']:-moz-focusring { outline: 0.0625rem dotted ButtonText; } -.c2:focus { +.c9:focus { outline: 0; text-decoration: none; } -.c2:hover { +.c9:hover { border: solid 0.0625rem; } -.c2:active, -.c2:active:hover, -.c2:active:focus { +.c9:active, +.c9:active:hover, +.c9:active:focus { background-image: none; outline: 0; } -.c2[disabled] { +.c9[disabled] { cursor: not-allowed; pointer-events: none; } -.c2 + button { +.c9 + button { margin-left: 1.25rem; } +.c4 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 500; + font-size: 0.9375rem; +} + +.c6 { + font-family: "Libre Franklin",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,Helvetica,sans-serif; + font-weight: 400; + line-height: 1.5rem; + font-size: 0.9375rem; +} + .c0 { + position: relative; + margin-bottom: 0.75rem; + box-shadow: 0 0.125rem 0 0 rgba(0,0,0,0.05); + border: 0.0625rem solid; +} + +.c1 { + position: absolute; + top: 0; + left: 0; + width: 2.25rem; + height: 100%; +} + +.c2 { + padding: 0.75rem 0 0.84375rem 0; +} + +.c3 { + margin: 0 3.375rem 0.09375rem 3.375rem; + font-weight: 600; +} + +.c5 { + margin: 0.09375rem 3.375rem 0 3.375rem; +} + +.c7 { box-sizing: border-box; display: -webkit-box; display: -webkit-flex; @@ -218,8 +258,35 @@ exports[`renders without throwing 1`] = `
    -
    +

    + A single instance of each service will be deployed. +

    +
    +
    +

    + A single instance of each service will be deployed. +

    +
    +
    +

    + A single instance of each service will be deployed. +

    +
    +
    @@ -409,14 +414,14 @@ exports[`renders without throwing 1`] = ` className="c3" >
    without throwing 1`] = `
    @@ -448,14 +453,14 @@ exports[`renders without throwing 1`] = ` className="c3" >
    without throwing 1`] = `
    @@ -487,14 +492,14 @@ exports[`renders without throwing 1`] = ` className="c3" >
    without throwing 1`] = `
    diff --git a/packages/cp-frontend/test/unit/containers/service/__snapshots__/scale.js.snap b/packages/cp-frontend/test/unit/containers/service/__snapshots__/scale.js.snap index 2bf44d11..bda6791c 100644 --- a/packages/cp-frontend/test/unit/containers/service/__snapshots__/scale.js.snap +++ b/packages/cp-frontend/test/unit/containers/service/__snapshots__/scale.js.snap @@ -516,7 +516,7 @@ exports[`renders without throwing 1`] = ` > without throwing 1`] = ` >
  • without throwing 1`] = ` without throwing 1`] = ` /> @@ -260,7 +260,7 @@ exports[`renders without throwing 1`] = `
  • without throwing 1`] = ` without throwing 1`] = ` /> diff --git a/packages/cp-gql-mock-server/.yarnclean b/packages/cp-gql-mock-server/.yarnclean new file mode 100644 index 00000000..e69de29b diff --git a/packages/cp-gql-mock-server/package.json b/packages/cp-gql-mock-server/package.json index 90a0c6d8..70143cd2 100644 --- a/packages/cp-gql-mock-server/package.json +++ b/packages/cp-gql-mock-server/package.json @@ -10,7 +10,7 @@ "lint-ci": "eslint . --format junit --output-file $CIRCLE_TEST_REPORTS/lint/cp-gql-mock-server.xml", "test": "NODE_ENV=test nyc --reporter=lcov --reporter=text ava --verbose", "test-ci": "NODE_ENV=test nyc --report-dir=$CIRCLE_ARTIFACTS/cp-gql-mock-server --reporter=lcov --reporter=text ava --verbose --tap | tap-xunit > $CIRCLE_TEST_REPORTS/test/cp-gql-mock-server.xml", - "start": "node src/index.js", + "start": "PORT=4000 node src/index.js", "dev": "PORT=3000 nodemon src/index.js", "prepublish": "echo 0" }, @@ -36,12 +36,14 @@ }, "devDependencies": { "apollo-client": "^1.9.2", + "apr-for-each": "^1.0.6", "ava": "^0.22.0", "delay": "^2.0.0", "eslint": "^4.5.0", "eslint-config-joyent-portal": "3.0.0", "execa": "^0.8.0", "lodash.sortby": "^4.7.0", + "lodash.uniq": "^4.5.0", "mz": "^2.6.0", "node-fetch": "^1.7.2", "nodemon": "^1.11.0", @@ -49,8 +51,12 @@ "tap-xunit": "^1.7.0" }, "ava": { - "files": ["test/*.js"], - "source": ["src/*.js"], + "files": [ + "test/*.js" + ], + "source": [ + "src/*.js" + ], "failFast": true } }