diff --git a/packages/ui-toolkit/src/anchor/index.js b/packages/ui-toolkit/src/anchor/index.js index 09868c51..de559ffd 100644 --- a/packages/ui-toolkit/src/anchor/index.js +++ b/packages/ui-toolkit/src/anchor/index.js @@ -1,7 +1,7 @@ import React from 'react'; import styled, { css } from 'styled-components'; import { A } from 'normalized-styled-components'; -import is from 'styled-is'; +import is, { isOr } from 'styled-is'; import PropTypes from 'prop-types'; import { Link as BaseLink } from 'react-router-dom'; import Baseline from '../baseline'; @@ -9,23 +9,27 @@ import Baseline from '../baseline'; const style = css` color: ${props => props.theme.primary}; - ${is('secondary')` - color: ${props => props.theme.white}; + &:hover { text-decoration: none; + } + + ${isOr('secondary', 'reversed')` + color: ${props => props.theme.white}; `}; ${is('disabled')` color: ${props => props.theme.grey}; + pointer-events: none; + + &:hover { + text-decoration: underline; + } `}; `; -const StyledAnchor = A.extend` - ${style} -`; +const StyledAnchor = A.extend`${style};`; -const StyledLink = styled(BaseLink)` - ${style} -`; +const StyledLink = styled(BaseLink)`${style};`; /** * @example ./usage.md diff --git a/packages/ui-toolkit/src/form/usage-toggle.md b/packages/ui-toolkit/src/form/usage-toggle.md index 0df65e09..a4e91c4f 100644 --- a/packages/ui-toolkit/src/form/usage-toggle.md +++ b/packages/ui-toolkit/src/form/usage-toggle.md @@ -8,7 +8,6 @@ const Legend = require('./legend').default; Video TV - Netflix ``` @@ -25,23 +24,6 @@ const Legend = require('./legend').default; Video TV - Netflix - - -``` - -#### two items - -``` -const { ToggleList } = require('./toggle'); -const FormGroup = require('./group').default; -const Legend = require('./legend').default; - - - Who killed the radio star? - - TV - Netflix ``` @@ -58,7 +40,6 @@ const Legend = require('./legend').default; Video TV - Netflix ``` diff --git a/packages/ui-toolkit/src/icons/Readme.md b/packages/ui-toolkit/src/icons/Readme.md new file mode 100644 index 00000000..32568aff --- /dev/null +++ b/packages/ui-toolkit/src/icons/Readme.md @@ -0,0 +1,3 @@ +```js noeditor + +``` \ No newline at end of file diff --git a/packages/ui-toolkit/src/icons/actions-light.js b/packages/ui-toolkit/src/icons/actions-light.js new file mode 100644 index 00000000..4c5a7a80 --- /dev/null +++ b/packages/ui-toolkit/src/icons/actions-light.js @@ -0,0 +1,7 @@ +import Baseline from '../baseline'; +// eslint-disable-next-line no-unused-vars +import React from 'react'; + +import ActionsIconLight from './svg/icon_actions_light.svg'; + +export default Baseline(ActionsIconLight); diff --git a/packages/ui-toolkit/src/icons/actions.js b/packages/ui-toolkit/src/icons/actions.js new file mode 100644 index 00000000..1587b8fa --- /dev/null +++ b/packages/ui-toolkit/src/icons/actions.js @@ -0,0 +1,7 @@ +import Baseline from '../baseline'; +// eslint-disable-next-line no-unused-vars +import React from 'react'; + +import ActionsIcon from './svg/icon_actions.svg'; + +export default Baseline(ActionsIcon); diff --git a/packages/ui-toolkit/src/icons/arrow-light.js b/packages/ui-toolkit/src/icons/arrow-light.js new file mode 100644 index 00000000..4fd94aab --- /dev/null +++ b/packages/ui-toolkit/src/icons/arrow-light.js @@ -0,0 +1,7 @@ +import Baseline from '../baseline'; +// eslint-disable-next-line no-unused-vars +import React from 'react'; + +import ArrowIconLight from './svg/icon_arrow_light.svg'; + +export default Baseline(ArrowIconLight); diff --git a/packages/ui-toolkit/src/icons/chevron.js b/packages/ui-toolkit/src/icons/chevron.js new file mode 100644 index 00000000..866e371e --- /dev/null +++ b/packages/ui-toolkit/src/icons/chevron.js @@ -0,0 +1,8 @@ +import Baseline from '../baseline'; +import Basealign from '../basealign'; +// eslint-disable-next-line no-unused-vars +import React from 'react'; + +import ChevronIcon from './svg/icon_chevron.svg'; + +export default Baseline(Basealign(ChevronIcon)); diff --git a/packages/ui-toolkit/src/icons/completed.js b/packages/ui-toolkit/src/icons/completed.js new file mode 100644 index 00000000..d0361a61 --- /dev/null +++ b/packages/ui-toolkit/src/icons/completed.js @@ -0,0 +1,7 @@ +import Baseline from '../baseline'; +// eslint-disable-next-line no-unused-vars +import React from 'react'; + +import CompletedIcon from './svg/icon_completed.svg'; + +export default Baseline(CompletedIcon); diff --git a/packages/ui-toolkit/src/icons/data-center-light.js b/packages/ui-toolkit/src/icons/data-center-light.js new file mode 100644 index 00000000..c2304748 --- /dev/null +++ b/packages/ui-toolkit/src/icons/data-center-light.js @@ -0,0 +1,8 @@ +import Baseline from '../baseline'; +import Basealign from '../basealign'; +// eslint-disable-next-line no-unused-vars +import React from 'react'; + +import DataCenterIconLight from './svg/icon_data_center_light.svg'; + +export default Baseline(Basealign(DataCenterIconLight)); diff --git a/packages/ui-toolkit/src/icons/icons.js b/packages/ui-toolkit/src/icons/icons.js new file mode 100644 index 00000000..b2da7559 --- /dev/null +++ b/packages/ui-toolkit/src/icons/icons.js @@ -0,0 +1,197 @@ +import React from 'react'; +import { + IconActions, + IconActionsLight, + CloseIcon, + PlusIcon, + MinusIcon, + ArrowIcon, + ArrowIconLight, + TickIcon, + InstancesIcon, + InstancesIconLight, + HealthyIcon, + UnhealthyIcon, + BinIcon, + UserIcon, + DataCenterIcon, + DataCenterIconLight, + ChevronIcon, + TritonIcon, + CompletedIcon, + PartCompletedIcon, + IncompleteIcon, + LoadingIcon +} from './'; +import { default as Label } from '../label'; +import is from 'styled-is'; +import remcalc from 'remcalc'; +import styled from 'styled-components'; + +const List = styled.ul` + display: flex; + list-style: none; + padding: 0; + flex-wrap: wrap; +`; +const Icon = styled.div` + width: ${remcalc(180)}; + height: ${remcalc(180)}; + border: ${remcalc(2)} solid #d8d8d8; + align-items: center; + justify-content: center; + display: flex; + margin-bottom: ${remcalc(18)}; + + ${is('dark')` + background: #464646; + `}; +`; + +const ListItem = styled.li` + display: flex; + align-items: center; + justify-content: center; + margin: ${remcalc(8)}; + flex-direction: column; + margin-bottom: ${remcalc(53)}; +`; + +const Icons = () => ( + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +); + +export default Icons; diff --git a/packages/ui-toolkit/src/icons/incomplete.js b/packages/ui-toolkit/src/icons/incomplete.js new file mode 100644 index 00000000..050c68f2 --- /dev/null +++ b/packages/ui-toolkit/src/icons/incomplete.js @@ -0,0 +1,7 @@ +import Baseline from '../baseline'; +// eslint-disable-next-line no-unused-vars +import React from 'react'; + +import IncompleteIcon from './svg/icon_incomplete.svg'; + +export default Baseline(IncompleteIcon); diff --git a/packages/ui-toolkit/src/icons/index.js b/packages/ui-toolkit/src/icons/index.js index 7b0d4f20..55ac737c 100644 --- a/packages/ui-toolkit/src/icons/index.js +++ b/packages/ui-toolkit/src/icons/index.js @@ -1,11 +1,22 @@ export { default as CloseIcon } from './close'; export { default as PlusIcon } from './plus'; export { default as MinusIcon } from './minus'; +export { default as IconActions } from './actions'; +export { default as IconActionsLight } from './actions-light'; export { default as ArrowIcon } from './arrow'; +export { default as ArrowIconLight } from './arrow-light'; export { default as TickIcon } from './tick'; export { default as InstancesIcon } from './instances'; +export { default as InstancesIconLight } from './instances-light'; export { default as HealthyIcon } from './healthy'; export { default as UnhealthyIcon } from './unhealthy'; export { default as BinIcon } from './bin'; export { default as UserIcon } from './user'; export { default as DataCenterIcon } from './data-center'; +export { default as DataCenterIconLight } from './data-center-light'; +export { default as ChevronIcon } from './chevron'; +export { default as TritonIcon } from './triton'; +export { default as CompletedIcon } from './completed'; +export { default as PartCompletedIcon } from './part-complete'; +export { default as IncompleteIcon } from './incomplete'; +export { default as LoadingIcon } from './loading'; diff --git a/packages/ui-toolkit/src/icons/instances-light.js b/packages/ui-toolkit/src/icons/instances-light.js new file mode 100644 index 00000000..95df2055 --- /dev/null +++ b/packages/ui-toolkit/src/icons/instances-light.js @@ -0,0 +1,7 @@ +import Baseline from '../baseline'; +// eslint-disable-next-line no-unused-vars +import React from 'react'; + +import InstancesIconLight from './svg/icon_instances_light.svg'; + +export default Baseline(InstancesIconLight); diff --git a/packages/ui-toolkit/src/icons/loading.js b/packages/ui-toolkit/src/icons/loading.js new file mode 100644 index 00000000..3280bf92 --- /dev/null +++ b/packages/ui-toolkit/src/icons/loading.js @@ -0,0 +1,7 @@ +import Baseline from '../baseline'; +// eslint-disable-next-line no-unused-vars +import React from 'react'; + +import LoadingIcon from './svg/icon_loading.svg'; + +export default Baseline(LoadingIcon); diff --git a/packages/ui-toolkit/src/icons/part-complete.js b/packages/ui-toolkit/src/icons/part-complete.js new file mode 100644 index 00000000..62f4c27c --- /dev/null +++ b/packages/ui-toolkit/src/icons/part-complete.js @@ -0,0 +1,7 @@ +import Baseline from '../baseline'; +// eslint-disable-next-line no-unused-vars +import React from 'react'; + +import PartCompletedIcon from './svg/icon_part_completed.svg'; + +export default Baseline(PartCompletedIcon); diff --git a/packages/ui-toolkit/src/icons/svg/icon_actions.svg b/packages/ui-toolkit/src/icons/svg/icon_actions.svg new file mode 100644 index 00000000..bed73ac1 --- /dev/null +++ b/packages/ui-toolkit/src/icons/svg/icon_actions.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/ui-toolkit/src/icons/svg/icon_actions_light.svg b/packages/ui-toolkit/src/icons/svg/icon_actions_light.svg new file mode 100644 index 00000000..d1be596b --- /dev/null +++ b/packages/ui-toolkit/src/icons/svg/icon_actions_light.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/ui-toolkit/src/icons/svg/icon_alert.svg b/packages/ui-toolkit/src/icons/svg/icon_alert.svg index 07a2e868..d26efbdc 100755 --- a/packages/ui-toolkit/src/icons/svg/icon_alert.svg +++ b/packages/ui-toolkit/src/icons/svg/icon_alert.svg @@ -1,21 +1 @@ - - - - icon: alert - Created with Sketch. - - - - - - - - - - - - - - - - \ No newline at end of file +icon: alert \ No newline at end of file diff --git a/packages/ui-toolkit/src/icons/svg/icon_arrow.svg b/packages/ui-toolkit/src/icons/svg/icon_arrow.svg index 32e434a3..e8102125 100755 --- a/packages/ui-toolkit/src/icons/svg/icon_arrow.svg +++ b/packages/ui-toolkit/src/icons/svg/icon_arrow.svg @@ -1,14 +1 @@ - - - - arrow: right - Created with Sketch. - - - - - - - - - \ No newline at end of file +arrow: right \ No newline at end of file diff --git a/packages/ui-toolkit/src/icons/svg/icon_arrow_light.svg b/packages/ui-toolkit/src/icons/svg/icon_arrow_light.svg new file mode 100755 index 00000000..e5facb89 --- /dev/null +++ b/packages/ui-toolkit/src/icons/svg/icon_arrow_light.svg @@ -0,0 +1 @@ +arrow: right \ No newline at end of file diff --git a/packages/ui-toolkit/src/icons/svg/icon_bin.svg b/packages/ui-toolkit/src/icons/svg/icon_bin.svg index 6ad024c2..2028e6a9 100644 --- a/packages/ui-toolkit/src/icons/svg/icon_bin.svg +++ b/packages/ui-toolkit/src/icons/svg/icon_bin.svg @@ -1,12 +1 @@ - - - - icon: delete - Created with Sketch. - - - - - - - +icon: delete \ No newline at end of file diff --git a/packages/ui-toolkit/src/icons/svg/icon_calendar.svg b/packages/ui-toolkit/src/icons/svg/icon_calendar.svg index e75e30d1..f6170608 100755 --- a/packages/ui-toolkit/src/icons/svg/icon_calendar.svg +++ b/packages/ui-toolkit/src/icons/svg/icon_calendar.svg @@ -1 +1 @@ -calendar_ \ No newline at end of file +calendar_ \ No newline at end of file diff --git a/packages/ui-toolkit/src/icons/svg/icon_chevron.svg b/packages/ui-toolkit/src/icons/svg/icon_chevron.svg new file mode 100644 index 00000000..129328e5 --- /dev/null +++ b/packages/ui-toolkit/src/icons/svg/icon_chevron.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/ui-toolkit/src/icons/svg/icon_close_cross.svg b/packages/ui-toolkit/src/icons/svg/icon_close_cross.svg index 94982e6a..0e62f3b2 100755 --- a/packages/ui-toolkit/src/icons/svg/icon_close_cross.svg +++ b/packages/ui-toolkit/src/icons/svg/icon_close_cross.svg @@ -1,14 +1 @@ - - - - icon: close - Created with Sketch. - - - - - - - - - \ No newline at end of file +icon: close \ No newline at end of file diff --git a/packages/ui-toolkit/src/icons/svg/icon_completed.svg b/packages/ui-toolkit/src/icons/svg/icon_completed.svg new file mode 100644 index 00000000..4499d341 --- /dev/null +++ b/packages/ui-toolkit/src/icons/svg/icon_completed.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/ui-toolkit/src/icons/svg/icon_cpu.svg b/packages/ui-toolkit/src/icons/svg/icon_cpu.svg index ba312b90..16334d63 100755 --- a/packages/ui-toolkit/src/icons/svg/icon_cpu.svg +++ b/packages/ui-toolkit/src/icons/svg/icon_cpu.svg @@ -1,22 +1 @@ - - - - icon: cpu - Created with Sketch. - - - - - - - - - - - - - - - - - \ No newline at end of file +icon: cpu \ No newline at end of file diff --git a/packages/ui-toolkit/src/icons/svg/icon_data_center.svg b/packages/ui-toolkit/src/icons/svg/icon_data_center.svg index d5688f8b..e721f11e 100755 --- a/packages/ui-toolkit/src/icons/svg/icon_data_center.svg +++ b/packages/ui-toolkit/src/icons/svg/icon_data_center.svg @@ -1,19 +1 @@ - - - - icon: data center - Created with Sketch. - - - - - - - - - - - - - - \ No newline at end of file +icon: data center \ No newline at end of file diff --git a/packages/ui-toolkit/src/icons/svg/icon_data_center_light.svg b/packages/ui-toolkit/src/icons/svg/icon_data_center_light.svg new file mode 100755 index 00000000..707245c3 --- /dev/null +++ b/packages/ui-toolkit/src/icons/svg/icon_data_center_light.svg @@ -0,0 +1 @@ +icon: data center \ No newline at end of file diff --git a/packages/ui-toolkit/src/icons/svg/icon_disk.svg b/packages/ui-toolkit/src/icons/svg/icon_disk.svg index 6d69dbee..eeeb1c11 100755 --- a/packages/ui-toolkit/src/icons/svg/icon_disk.svg +++ b/packages/ui-toolkit/src/icons/svg/icon_disk.svg @@ -1,23 +1 @@ - - - - icon: disk - Created with Sketch. - - - - - - - - - - - - - - - - - - \ No newline at end of file +icon: disk \ No newline at end of file diff --git a/packages/ui-toolkit/src/icons/svg/icon_error_failure.svg b/packages/ui-toolkit/src/icons/svg/icon_error_failure.svg index 2f536243..bfe7772c 100755 --- a/packages/ui-toolkit/src/icons/svg/icon_error_failure.svg +++ b/packages/ui-toolkit/src/icons/svg/icon_error_failure.svg @@ -1,22 +1 @@ - - - - icon: error - Created with Sketch. - - - - - - - - - - - - - - - - - \ No newline at end of file +icon: error \ No newline at end of file diff --git a/packages/ui-toolkit/src/icons/svg/icon_healthy.svg b/packages/ui-toolkit/src/icons/svg/icon_healthy.svg index 564a8dfa..25b551ba 100755 --- a/packages/ui-toolkit/src/icons/svg/icon_healthy.svg +++ b/packages/ui-toolkit/src/icons/svg/icon_healthy.svg @@ -1,19 +1 @@ - - - - icon: state - Created with Sketch. - - - - - - - - - - - - - - +icon: state \ No newline at end of file diff --git a/packages/ui-toolkit/src/icons/svg/icon_incomplete.svg b/packages/ui-toolkit/src/icons/svg/icon_incomplete.svg new file mode 100644 index 00000000..ab21aade --- /dev/null +++ b/packages/ui-toolkit/src/icons/svg/icon_incomplete.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/ui-toolkit/src/icons/svg/icon_instances.svg b/packages/ui-toolkit/src/icons/svg/icon_instances.svg index 642dd9e3..adf3d19c 100755 --- a/packages/ui-toolkit/src/icons/svg/icon_instances.svg +++ b/packages/ui-toolkit/src/icons/svg/icon_instances.svg @@ -1,20 +1 @@ - - - - icon: instances - Created with Sketch. - - - - - - - - - - - - - - - +icon: instances \ No newline at end of file diff --git a/packages/ui-toolkit/src/icons/svg/icon_instances_light.svg b/packages/ui-toolkit/src/icons/svg/icon_instances_light.svg new file mode 100755 index 00000000..ef37688b --- /dev/null +++ b/packages/ui-toolkit/src/icons/svg/icon_instances_light.svg @@ -0,0 +1 @@ +icon: instances \ No newline at end of file diff --git a/packages/ui-toolkit/src/icons/svg/icon_loading.svg b/packages/ui-toolkit/src/icons/svg/icon_loading.svg new file mode 100644 index 00000000..54dfd755 --- /dev/null +++ b/packages/ui-toolkit/src/icons/svg/icon_loading.svg @@ -0,0 +1 @@ +Icons > LoadingCreated using Figma \ No newline at end of file diff --git a/packages/ui-toolkit/src/icons/svg/icon_minus.svg b/packages/ui-toolkit/src/icons/svg/icon_minus.svg index 03ce6418..d84716cd 100644 --- a/packages/ui-toolkit/src/icons/svg/icon_minus.svg +++ b/packages/ui-toolkit/src/icons/svg/icon_minus.svg @@ -1,18 +1 @@ - - - - icon: plus - Created with Sketch. - - - - - - - - - - - - - \ No newline at end of file +icon: plus \ No newline at end of file diff --git a/packages/ui-toolkit/src/icons/svg/icon_part_completed.svg b/packages/ui-toolkit/src/icons/svg/icon_part_completed.svg new file mode 100644 index 00000000..df81a0da --- /dev/null +++ b/packages/ui-toolkit/src/icons/svg/icon_part_completed.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/ui-toolkit/src/icons/svg/icon_plus.svg b/packages/ui-toolkit/src/icons/svg/icon_plus.svg index 8ee650d5..d3b71800 100644 --- a/packages/ui-toolkit/src/icons/svg/icon_plus.svg +++ b/packages/ui-toolkit/src/icons/svg/icon_plus.svg @@ -1,18 +1 @@ - - - - icon: plus - Created with Sketch. - - - - - - - - - - - - - \ No newline at end of file +icon: plus \ No newline at end of file diff --git a/packages/ui-toolkit/src/icons/svg/icon_ran.svg b/packages/ui-toolkit/src/icons/svg/icon_ran.svg index 16cb9f2f..9e6e1c81 100755 --- a/packages/ui-toolkit/src/icons/svg/icon_ran.svg +++ b/packages/ui-toolkit/src/icons/svg/icon_ran.svg @@ -1,19 +1 @@ - - - - icon: cpu - Created with Sketch. - - - - - - - - - - - - - - \ No newline at end of file +icon: cpu \ No newline at end of file diff --git a/packages/ui-toolkit/src/icons/svg/icon_tick.svg b/packages/ui-toolkit/src/icons/svg/icon_tick.svg index a8732f7b..2ce42adb 100755 --- a/packages/ui-toolkit/src/icons/svg/icon_tick.svg +++ b/packages/ui-toolkit/src/icons/svg/icon_tick.svg @@ -1,18 +1 @@ - - - - tick - Created with Sketch. - - - - - - - - - - - - - \ No newline at end of file +tick \ No newline at end of file diff --git a/packages/ui-toolkit/src/icons/svg/icon_upload_manifest.svg b/packages/ui-toolkit/src/icons/svg/icon_upload_manifest.svg index 058ae376..5e9e064e 100755 --- a/packages/ui-toolkit/src/icons/svg/icon_upload_manifest.svg +++ b/packages/ui-toolkit/src/icons/svg/icon_upload_manifest.svg @@ -1,16 +1 @@ - - - - Fill 1 - Created with Sketch. - - - - - - - - - - - \ No newline at end of file +Fill 1 \ No newline at end of file diff --git a/packages/ui-toolkit/src/icons/svg/icon_user.svg b/packages/ui-toolkit/src/icons/svg/icon_user.svg index 4a0c0db3..ac02871a 100755 --- a/packages/ui-toolkit/src/icons/svg/icon_user.svg +++ b/packages/ui-toolkit/src/icons/svg/icon_user.svg @@ -1,21 +1 @@ - - - - Shape - Created with Sketch. - - - - - - - - - - - - - - - - \ No newline at end of file +Shape \ No newline at end of file diff --git a/packages/ui-toolkit/src/icons/svg/triton_logo.svg b/packages/ui-toolkit/src/icons/svg/triton_logo.svg new file mode 100644 index 00000000..7fc2ac60 --- /dev/null +++ b/packages/ui-toolkit/src/icons/svg/triton_logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/ui-toolkit/src/icons/triton.js b/packages/ui-toolkit/src/icons/triton.js new file mode 100644 index 00000000..1144767d --- /dev/null +++ b/packages/ui-toolkit/src/icons/triton.js @@ -0,0 +1,8 @@ +import Baseline from '../baseline'; +import Basealign from '../basealign'; +// eslint-disable-next-line no-unused-vars +import React from 'react'; + +import TritonIcon from './svg/triton_logo.svg'; + +export default Baseline(Basealign(TritonIcon)); diff --git a/packages/ui-toolkit/src/message/Readme.md b/packages/ui-toolkit/src/message/Readme.md index 16c12125..48af0b19 100644 --- a/packages/ui-toolkit/src/message/Readme.md +++ b/packages/ui-toolkit/src/message/Readme.md @@ -1,17 +1,20 @@ -## Success +#### Success/Educational ``` - +{}} title="Choosing deployement data center"> +Not all data centres have all configurations of instances available. Make sure that you choose the data center that suits your requirements. Learn more" + ``` -## Error +#### Error ``` - +{}} title="Choosing deployement data center" error message="Oh no"/> ``` -## Warning +#### Warning ``` - +{}} title="Choosing deployement data center" warning message="There were some issues"/> ``` + diff --git a/packages/ui-toolkit/src/message/index.js b/packages/ui-toolkit/src/message/index.js index b1f23991..6e68f42a 100644 --- a/packages/ui-toolkit/src/message/index.js +++ b/packages/ui-toolkit/src/message/index.js @@ -3,8 +3,9 @@ import is from 'styled-is'; import PropTypes from 'prop-types'; import styled from 'styled-components'; import unitcalc from 'unitcalc'; +import remcalc from 'remcalc'; -import { H3 } from '../text/headings'; +import { H4 } from '../text/headings'; import P from '../text/p'; import CloseButton from '../close-button'; import { border, bottomShaddow } from '../boxes'; @@ -16,14 +17,13 @@ const StyledContainer = styled.div` box-shadow: ${bottomShaddow}; border: ${border.confirmed}; width: 100%; + display: flex; `; const StyledColor = styled.div` - position: absolute; - top: 0; - left: 0; - width: ${unitcalc(6)}; - height: 100%; + min-width: ${remcalc(36)}; + margin-right: ${remcalc(18)}; + min-height: 100%; background-color: ${props => props.theme.green}; ${is('error')` background-color: ${props => props.theme.red}; @@ -37,15 +37,6 @@ const StyledMessageContainer = styled.div` padding: ${unitcalc(2)} 0 ${unitcalc(2.25)} 0; `; -const StyledTitle = styled(H3)` - margin: 0 ${unitcalc(9)} ${unitcalc(0.25)} ${unitcalc(9)}; - font-weight: 600; -`; - -const StyledMessage = styled(P)` - margin: ${unitcalc(0.25)} ${unitcalc(9)} 0 ${unitcalc(9)}; -`; - const StyledClose = styled(CloseButton)` position: absolute; right: ${unitcalc(0.5)}; @@ -53,7 +44,7 @@ const StyledClose = styled(CloseButton)` `; const Message = ({ title, message, onCloseClick, children, ...type }) => { - const renderTitle = title ? {title} : null; + const renderTitle = title ?

{title}

: null; const renderClose = onCloseClick ? ( @@ -62,10 +53,12 @@ const Message = ({ title, message, onCloseClick, children, ...type }) => { return ( - - {renderTitle} - {message || children} - +
+ + {renderTitle} +

{message || children}

+ +
{renderClose} ); diff --git a/packages/ui-toolkit/src/text/Readme.md b/packages/ui-toolkit/src/text/Readme.md index 3c8b68ba..b9eec31c 100644 --- a/packages/ui-toolkit/src/text/Readme.md +++ b/packages/ui-toolkit/src/text/Readme.md @@ -63,20 +63,29 @@ This is called `Anchor` because of how React Router calls routing links `Link` #### Primary + +Default anchor is a type of a link that sits outside text components. The default state has an underline and hover/click states have none. + ``` const Anchor = require('/').Anchor; -Inspire the lazy +Inspire the lazy ``` -#### Secondary +#### Reversed + +Reversed link is used on dark backgrounds, where a default anchor would not provide enough contrast. + ``` const Anchor = require('/').Anchor; - Inspire the lazy secondary + Inspire the lazy secondary ``` #### Disabled + +Disabled links cannot be actioned and the cursor should be disabled. + ``` const Anchor = require('/').Anchor; - Inspire the lazy disabled + Inspire the lazy disabled ``` \ No newline at end of file diff --git a/packages/ui-toolkit/src/text/headings.js b/packages/ui-toolkit/src/text/headings.js index f8416e92..e10b4e35 100644 --- a/packages/ui-toolkit/src/text/headings.js +++ b/packages/ui-toolkit/src/text/headings.js @@ -14,15 +14,16 @@ export const H1 = NH1.extend` font-style: normal; font-stretch: normal; - + p, - + small, - + h1, - + h2, - + label. - + h3, - + h4, - + h5, - + div { + & + p, + & + small, + & + h1, + & + h2, + & + label, + & + h3, + & + h4, + & + h5, + & + div, + & + span { margin-top: ${remcalc(24)}; } `; @@ -35,15 +36,16 @@ export const H2 = styled.h2` line-height: ${remcalc(30)}; font-size: ${remcalc(24)}; - + p, - + small, - + h1, - + h2, - + label. - + h3, - + h4, - + h5, - + div { + & + p, + & + small, + & + h1, + & + h2, + & + label, + & + h3, + & + h4, + & + h5, + & + div, + & + span { margin-top: ${remcalc(24)}; } `; @@ -56,20 +58,21 @@ export const H3 = styled.h3` line-height: ${remcalc(26)}; font-size: ${remcalc(21)}; - + p, - + small, - + h1, - + h2, - + label. - + h3, - + h4, - + h5, - + div { + & + p, + & + small, + & + h1, + & + h2, + & + label, + & + h3, + & + h4, + & + h5, + & + div, + & + span { margin-top: ${remcalc(24)}; } `; -export const H4 = styled.h3` +export const H4 = styled.h4` margin: 0; ${typography.color}; ${typography.fontFamily}; @@ -77,15 +80,16 @@ export const H4 = styled.h3` line-height: ${remcalc(24)}; font-size: ${remcalc(15)}; - + p, - + small, - + h1, - + h2, - + label. - + h3, - + h4, - + h5, - + div { + & + p, + & + small, + & + h1, + & + h2, + & + label, + & + h3, + & + h4, + & + h5, + & + div, + & + span { margin-top: ${remcalc(12)}; } `; diff --git a/packages/ui-toolkit/src/text/p.js b/packages/ui-toolkit/src/text/p.js index 8dde66f9..0c2f2967 100644 --- a/packages/ui-toolkit/src/text/p.js +++ b/packages/ui-toolkit/src/text/p.js @@ -9,5 +9,18 @@ export default styled.p` line-height: ${remcalc(24)}; font-size: ${remcalc(15)}; - padding-bottom: ${remcalc(36)}; + margin: 0; + + + p, + + small, + + h1, + + h2, + + label, + + h3, + + h4, + + h5, + + div, + + span { + padding-bottom: ${remcalc(36)}; + } `; diff --git a/packages/ui-toolkit/styleguide.config.js b/packages/ui-toolkit/styleguide.config.js index 607a8f28..6bc70f15 100644 --- a/packages/ui-toolkit/styleguide.config.js +++ b/packages/ui-toolkit/styleguide.config.js @@ -99,7 +99,8 @@ module.exports = { 'src/close-button/index.js', 'src/icon-button/index.js', 'src/message/index.js', - 'src/slider/index.js' + 'src/slider/index.js', + 'src/icons/icons.js' ] } ],