feat(ui-toolkit) - Make adjustments to header (#824)
* feat(ui-toolkit) - Make adjustments to header * feat(ui-toolkit) - Make adjustments to header
This commit is contained in:
Sara Vieira
GitHub
parent
bff7fe704e
commit
5ebce8fdea
@ -4,18 +4,34 @@ import { Link } from 'react-router-dom';
|
||||
import {
|
||||
Header,
|
||||
HeaderBrand,
|
||||
ViewContainer,
|
||||
TritonIcon
|
||||
HeaderWrapper,
|
||||
TritonBetaIcon,
|
||||
DataCenterIconLight,
|
||||
UserIconLight,
|
||||
HeaderNav,
|
||||
HeaderItem
|
||||
} from 'joyent-ui-toolkit';
|
||||
|
||||
export default () => (
|
||||
<Header>
|
||||
<ViewContainer>
|
||||
<HeaderBrand>
|
||||
<HeaderWrapper>
|
||||
<HeaderBrand beta>
|
||||
<Link to="/">
|
||||
<TritonIcon alt="Triton" />
|
||||
<TritonBetaIcon alt="Triton" />
|
||||
</Link>
|
||||
</HeaderBrand>
|
||||
</ViewContainer>
|
||||
<HeaderNav>
|
||||
<li>
|
||||
<Link to="/">Compute</Link>
|
||||
</li>
|
||||
</HeaderNav>
|
||||
<HeaderItem>Return to existing portal</HeaderItem>
|
||||
<HeaderItem>
|
||||
<DataCenterIconLight />eu-east-1
|
||||
</HeaderItem>
|
||||
<HeaderItem>
|
||||
<UserIconLight />Nicola
|
||||
</HeaderItem>
|
||||
</HeaderWrapper>
|
||||
</Header>
|
||||
);
|
||||
|
||||
@ -30,12 +30,12 @@ p.rsg--p-32 {
|
||||
padding-bottom: 36px;
|
||||
}
|
||||
|
||||
.rsg--sidebar-4 a.rsg--link-73 {
|
||||
.rsg--sidebar-4 a.rsg--link-72 {
|
||||
color: #fff;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.rsg--sidebar-4 a.rsg--heading-72 {
|
||||
.rsg--sidebar-4 a.rsg--heading-71 {
|
||||
font-size: 17px;
|
||||
margin-bottom: 12px;
|
||||
display: block;
|
||||
@ -46,15 +46,15 @@ p.rsg--p-32 {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.rsg--sidebar-4 .rsg--search-67 {
|
||||
.rsg--sidebar-4 .rsg--search-66 {
|
||||
padding: 30px 0;
|
||||
}
|
||||
|
||||
.rsg--sidebar-4 .rsg--isChild-71 {
|
||||
.rsg--sidebar-4 .rsg--isChild-70 {
|
||||
padding-left: 16px;
|
||||
}
|
||||
|
||||
.rsg--sidebar-4 .rsg--input-68 {
|
||||
.rsg--sidebar-4 .rsg--input-67 {
|
||||
background: #FFFFFF;
|
||||
border: 1px solid #D8D8D8;
|
||||
box-sizing: border-box;
|
||||
@ -67,7 +67,7 @@ p.rsg--p-32 {
|
||||
height: 48px;
|
||||
}
|
||||
|
||||
.rsg--sidebar-4 .rsg--list-69 {
|
||||
.rsg--sidebar-4 .rsg--list-68 {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
|
||||
@ -1,5 +1,6 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import is from 'styled-is';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
import { H2 } from '../text/headings';
|
||||
@ -9,18 +10,23 @@ const Brand = H2.extend`
|
||||
color: ${props => props.theme.white};
|
||||
font-size: ${remcalc(29)};
|
||||
margin: 0;
|
||||
|
||||
${is('beta')`
|
||||
display: inline-block;
|
||||
margin-top: ${remcalc(6)};
|
||||
`};
|
||||
`;
|
||||
|
||||
const Box = styled.div`
|
||||
flex: 1 1 auto;
|
||||
align-self: stretch;
|
||||
order: 0;
|
||||
width: 150px;
|
||||
|
||||
padding: ${remcalc(11)} 0;
|
||||
`;
|
||||
|
||||
export default ({ children, ...rest }) => (
|
||||
<Box {...rest}>
|
||||
<Brand>{children}</Brand>
|
||||
<Brand {...rest}>{children}</Brand>
|
||||
</Box>
|
||||
);
|
||||
|
||||
11
packages/ui-toolkit/src/header/header-wrapper.js
Normal file
11
packages/ui-toolkit/src/header/header-wrapper.js
Normal file
@ -0,0 +1,11 @@
|
||||
import { ViewContainer } from '../layout';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
export default ViewContainer.extend`
|
||||
display: flex;
|
||||
flex-wrap: nowrap;
|
||||
align-content: stretch;
|
||||
align-items: stretch;
|
||||
max-height: ${remcalc(53)};
|
||||
min-height: ${remcalc(53)};
|
||||
`;
|
||||
@ -4,19 +4,15 @@ import remcalc from 'remcalc';
|
||||
import is from 'styled-is';
|
||||
|
||||
const Header = styled.div`
|
||||
${is('fluid')`
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
justify-content: space-between;
|
||||
align-content: stretch;
|
||||
align-items: stretch;
|
||||
`};
|
||||
|
||||
display: flex;
|
||||
flex-direction: row;
|
||||
flex-wrap: nowrap;
|
||||
align-content: stretch;
|
||||
align-items: stretch;
|
||||
background-color: ${props => props.theme.brandBackground};
|
||||
max-height: ${remcalc(53)};
|
||||
min-height: ${remcalc(53)};
|
||||
padding: 0 ${remcalc(18)};
|
||||
padding-left: ${remcalc(18)};
|
||||
line-height: ${remcalc(25)};
|
||||
`;
|
||||
|
||||
@ -25,5 +21,7 @@ const Header = styled.div`
|
||||
*/
|
||||
export default ({ children, ...rest }) => <Header {...rest}>{children}</Header>;
|
||||
|
||||
export { default as Brand } from './brand';
|
||||
export { default as Item } from './item';
|
||||
export { default as HeaderBrand } from './brand';
|
||||
export { default as HeaderItem } from './item';
|
||||
export { default as HeaderNav } from './nav';
|
||||
export { default as HeaderWrapper } from './header-wrapper';
|
||||
|
||||
@ -6,21 +6,35 @@ import P from '../text/p';
|
||||
import typography from '../typography';
|
||||
|
||||
const Text = P.extend`
|
||||
${typography.semibold};
|
||||
|
||||
text-align: center;
|
||||
color: ${props => props.theme.white};
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
color: ${props => props.theme.white};
|
||||
text-decoration: none;
|
||||
}
|
||||
`;
|
||||
|
||||
const Box = styled.div`
|
||||
const Box = styled.section`
|
||||
flex: 0 1 auto;
|
||||
align-self: auto;
|
||||
order: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: ${remcalc(15)};
|
||||
|
||||
padding: ${remcalc(15)} 0;
|
||||
width: ${remcalc(100)};
|
||||
max-width: ${remcalc(100)};
|
||||
svg {
|
||||
margin-right: ${remcalc(6)};
|
||||
}
|
||||
|
||||
&:not(:last-of-type) {
|
||||
border-right: 1px solid rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
|
||||
&:first-of-type {
|
||||
margin-left: auto;
|
||||
}
|
||||
`;
|
||||
|
||||
export default ({ children, ...rest }) => (
|
||||
|
||||
36
packages/ui-toolkit/src/header/nav.js
Normal file
36
packages/ui-toolkit/src/header/nav.js
Normal file
@ -0,0 +1,36 @@
|
||||
import React from 'react';
|
||||
import styled from 'styled-components';
|
||||
import is from 'styled-components';
|
||||
import remcalc from 'remcalc';
|
||||
|
||||
import P from '../text/p';
|
||||
import typography from '../typography';
|
||||
|
||||
const UL = styled.ul`
|
||||
padding: 0;
|
||||
margin: 0;
|
||||
display: flex;
|
||||
list-style: none;
|
||||
|
||||
a {
|
||||
padding: ${remcalc(15)};
|
||||
line-height: ${remcalc(24)};
|
||||
font-size: ${remcalc(15)};
|
||||
color: ${props => props.theme.white};
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
transition: all 200ms ease;
|
||||
max-height: ${remcalc(53)};
|
||||
min-height: ${remcalc(53)};
|
||||
box-sizing: border-box;
|
||||
|
||||
&:hover,
|
||||
&.active {
|
||||
background: rgba(255, 255, 255, 0.15);
|
||||
}
|
||||
}
|
||||
`;
|
||||
|
||||
export default ({ children, ...rest }) => <UL {...rest}>{children}</UL>;
|
||||
@ -1,10 +1,20 @@
|
||||
```
|
||||
const HeaderBrand = require('./brand.js').default;
|
||||
const HeaderItem = require('./item.js').default;
|
||||
const HeaderNav = require('./nav.js').default;
|
||||
const HeaderWrapper = require('./header-wrapper.js').default;
|
||||
const { UserIconLight, DataCenterIconLight, TritonBetaIcon } = require('../icons');
|
||||
|
||||
<Header>
|
||||
<HeaderBrand>Triton</HeaderBrand>
|
||||
<HeaderItem>eu-east-1</HeaderItem>
|
||||
<HeaderItem>Nicola</HeaderItem>
|
||||
<HeaderWrapper>
|
||||
<HeaderBrand beta><TritonBetaIcon/></HeaderBrand>
|
||||
<HeaderNav>
|
||||
<li><a href="#">Compute</a></li>
|
||||
<li><a href="#" class="active">Network</a></li>
|
||||
</HeaderNav>
|
||||
<HeaderItem>Return to existing portal</HeaderItem>
|
||||
<HeaderItem><DataCenterIconLight/>eu-east-1</HeaderItem>
|
||||
<HeaderItem><UserIconLight/>Nicola</HeaderItem>
|
||||
</HeaderWrapper>
|
||||
</Header>
|
||||
```
|
||||
|
||||
@ -20,10 +20,12 @@ import {
|
||||
UnhealthyIcon,
|
||||
BinIcon,
|
||||
UserIcon,
|
||||
UserIconLight,
|
||||
DataCenterIcon,
|
||||
DataCenterIconLight,
|
||||
ChevronIcon,
|
||||
TritonIcon,
|
||||
TritonBetaIcon,
|
||||
CompletedIcon,
|
||||
PartCompletedIcon,
|
||||
IncompleteIcon,
|
||||
@ -181,7 +183,13 @@ const Icons = () => (
|
||||
<Icon>
|
||||
<UserIcon />
|
||||
</Icon>
|
||||
<Label>User</Label>
|
||||
<Label>User > Dark</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon dark>
|
||||
<UserIconLight />
|
||||
</Icon>
|
||||
<Label>User > Light</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon>
|
||||
@ -201,6 +209,12 @@ const Icons = () => (
|
||||
</Icon>
|
||||
<Label>Triton Logo</Label>
|
||||
</ListItem>
|
||||
<ListItem>
|
||||
<Icon dark>
|
||||
<TritonBetaIcon />
|
||||
</Icon>
|
||||
<Label>Triton Beta Logo</Label>
|
||||
</ListItem>
|
||||
</List>
|
||||
);
|
||||
|
||||
|
||||
@ -12,10 +12,12 @@ 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 UserIconLight } from './user-light';
|
||||
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 TritonBetaIcon } from './triton-beta'
|
||||
export { default as CompletedIcon } from './completed';
|
||||
export { default as PartCompletedIcon } from './part-complete';
|
||||
export { default as IncompleteIcon } from './incomplete';
|
||||
|
||||
1
packages/ui-toolkit/src/icons/svg/icon_user_light.svg
Executable file
1
packages/ui-toolkit/src/icons/svg/icon_user_light.svg
Executable file
@ -0,0 +1 @@
|
||||
<svg width="12" height="12" viewBox="0 0 12 12" xmlns="http://www.w3.org/2000/svg"><title>Shape</title><path d="M12 12H0a5.958 5.958 0 0 1 1.485-3.552 1.368 1.368 0 0 1 1.726-.296 4.83 4.83 0 0 0 5.201-.248 1.384 1.384 0 0 1 1.75.152A5.968 5.968 0 0 1 12 12zM5.619 0a3.205 3.205 0 0 0-3.211 3.2c0 1.768 1.42 4 3.21 4s3.211-2.232 3.211-4A3.204 3.204 0 0 0 5.62 0z" fill="#fff"/></svg>
|
||||
|
After Width: | Height: | Size: 383 B |
18
packages/ui-toolkit/src/icons/svg/triton_beta.svg
Normal file
18
packages/ui-toolkit/src/icons/svg/triton_beta.svg
Normal file
@ -0,0 +1,18 @@
|
||||
<svg width="105" height="30" viewBox="0 0 105 30" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
|
||||
<title>Group</title>
|
||||
<desc>Created using Figma</desc>
|
||||
<g id="Canvas" transform="translate(26223 1404)">
|
||||
<g id="Group">
|
||||
<g id="Beta">
|
||||
<use xlink:href="#path0_fill" transform="translate(-26177 -1383)" fill="#FFFFFF"/>
|
||||
</g>
|
||||
<g id="logo">
|
||||
<use xlink:href="#path1_fill" transform="translate(-26223 -1404)" fill="#FDFDFD"/>
|
||||
</g>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<path id="path0_fill" d="M 33.7583 0.147461L 35.9766 0.147461C 37.0186 0.147461 37.7723 0.303223 38.2378 0.614746C 38.7033 0.92627 38.936 1.41862 38.936 2.0918C 38.936 2.55729 38.8053 2.94222 38.5439 3.24658C 38.2861 3.54736 37.9084 3.74251 37.4106 3.83203L 37.4106 3.88574C 38.603 4.08984 39.1992 4.71647 39.1992 5.76562C 39.1992 6.46745 38.9611 7.0153 38.4849 7.40918C 38.0122 7.80306 37.3498 8 36.4976 8L 33.7583 8L 33.7583 0.147461ZM 34.6714 3.50977L 36.1753 3.50977C 36.8198 3.50977 37.2835 3.40951 37.5664 3.20898C 37.8493 3.00488 37.9907 2.66292 37.9907 2.18311C 37.9907 1.74268 37.8332 1.42578 37.5181 1.23242C 37.203 1.03548 36.7017 0.937012 36.0142 0.937012L 34.6714 0.937012L 34.6714 3.50977ZM 34.6714 4.2832L 34.6714 7.22119L 36.3096 7.22119C 36.9434 7.22119 37.4196 7.09945 37.7383 6.85596C 38.0605 6.60889 38.2217 6.22396 38.2217 5.70117C 38.2217 5.21419 38.057 4.85612 37.7275 4.62695C 37.4017 4.39779 36.904 4.2832 36.2344 4.2832L 34.6714 4.2832ZM 43.2437 8.10742C 42.3735 8.10742 41.686 7.84245 41.1812 7.3125C 40.6799 6.78255 40.4292 6.04671 40.4292 5.10498C 40.4292 4.15609 40.6619 3.40234 41.1274 2.84375C 41.5965 2.28516 42.2249 2.00586 43.0127 2.00586C 43.7503 2.00586 44.334 2.24935 44.7637 2.73633C 45.1934 3.21973 45.4082 3.85889 45.4082 4.65381L 45.4082 5.21777L 41.353 5.21777C 41.3709 5.90885 41.5446 6.43343 41.874 6.7915C 42.207 7.14958 42.6743 7.32861 43.2759 7.32861C 43.9097 7.32861 44.5363 7.19613 45.1558 6.93115L 45.1558 7.72607C 44.8407 7.86214 44.5417 7.95882 44.2588 8.01611C 43.9795 8.07699 43.6411 8.10742 43.2437 8.10742ZM 43.002 2.75244C 42.5293 2.75244 42.1515 2.90641 41.8687 3.21436C 41.5894 3.5223 41.4246 3.94841 41.3745 4.49268L 44.4521 4.49268C 44.4521 3.9305 44.3268 3.50081 44.0762 3.20361C 43.8255 2.90283 43.4674 2.75244 43.002 2.75244ZM 48.835 7.37158C 48.9925 7.37158 49.1447 7.36084 49.2915 7.33936C 49.4383 7.31429 49.5547 7.28923 49.6406 7.26416L 49.6406 7.94629C 49.5439 7.99284 49.4007 8.03044 49.2109 8.05908C 49.0247 8.09131 48.8564 8.10742 48.7061 8.10742C 47.5674 8.10742 46.998 7.50765 46.998 6.30811L 46.998 2.80615L 46.1548 2.80615L 46.1548 2.37646L 46.998 2.00586L 47.374 0.749023L 47.8896 0.749023L 47.8896 2.11328L 49.5977 2.11328L 49.5977 2.80615L 47.8896 2.80615L 47.8896 6.27051C 47.8896 6.625 47.9738 6.89714 48.1421 7.08691C 48.3104 7.27669 48.5413 7.37158 48.835 7.37158ZM 54.4424 8L 54.2651 7.16211L 54.2222 7.16211C 53.9285 7.53092 53.6349 7.78158 53.3413 7.91406C 53.0513 8.04297 52.6878 8.10742 52.251 8.10742C 51.6673 8.10742 51.209 7.95703 50.876 7.65625C 50.5465 7.35547 50.3818 6.92757 50.3818 6.37256C 50.3818 5.18376 51.3325 4.56071 53.2339 4.50342L 54.2329 4.47119L 54.2329 4.10596C 54.2329 3.64404 54.1326 3.30387 53.9321 3.08545C 53.7352 2.86344 53.4183 2.75244 52.9814 2.75244C 52.4909 2.75244 51.9359 2.90283 51.3164 3.20361L 51.0425 2.52148C 51.3325 2.36393 51.6494 2.2404 51.9932 2.15088C 52.3405 2.06136 52.6878 2.0166 53.0352 2.0166C 53.737 2.0166 54.2562 2.17236 54.5928 2.48389C 54.9329 2.79541 55.103 3.29492 55.103 3.98242L 55.103 8L 54.4424 8ZM 52.4282 7.37158C 52.9832 7.37158 53.4183 7.2194 53.7334 6.91504C 54.0521 6.61068 54.2114 6.18457 54.2114 5.63672L 54.2114 5.10498L 53.3198 5.14258C 52.6108 5.16764 52.0988 5.27865 51.7837 5.47559C 51.4722 5.66895 51.3164 5.97152 51.3164 6.3833C 51.3164 6.70557 51.4131 6.95085 51.6064 7.11914C 51.8034 7.28743 52.0773 7.37158 52.4282 7.37158Z"/>
|
||||
<path id="path1_fill" fill-rule="evenodd" d="M 81 9.49793C 81 4.25232 76.7461 5.90949e-07 71.5 5.90949e-07C 66.252 -0.00183046 62 4.25171 62 9.49793C 62 14.7435 66.2539 18.9958 71.5 18.9958C 76.7461 18.9958 81 14.7435 81 9.49793ZM 16.2266 0.99585L 0.773438 0.99585C 0.345703 0.99585 0 1.34168 0 1.76819L 0 4.86169C 0 5.09143 0.0996094 5.29773 0.259766 5.43921C 0.308594 5.48181 0.361328 5.51856 0.417969 5.54822C 0.523438 5.60303 0.644531 5.63403 0.773438 5.63403L 5.38281 5.63403C 5.80469 5.63391 6.14844 5.96997 6.15625 6.39026L 6.15625 17.2235C 6.15625 17.4979 6.29883 17.739 6.51562 17.876C 6.56445 17.9071 6.61719 17.9327 6.67383 17.9523L 6.78906 17.983C 6.83398 17.9915 6.88086 17.9958 6.92969 17.9958L 10.0215 17.9958C 10.4492 17.9958 10.7949 17.65 10.7949 17.2235L 10.7949 6.39026C 10.7949 5.96362 11.1406 5.61792 11.5684 5.61792L 16.248 5.61792C 16.4941 5.61145 16.7109 5.48962 16.8477 5.30469C 16.9414 5.17932 16.998 5.0249 17 4.85767L 17 1.76819C 17 1.34168 16.6543 0.99585 16.2266 0.99585ZM 33 1.76819L 33 4.86169C 33 5.28821 32.6504 5.63403 32.2168 5.63403L 25.4941 5.63403C 25.0605 5.63403 24.7109 5.97986 24.7109 6.40637L 24.7109 17.2235C 24.7109 17.65 24.3594 17.9958 23.9277 17.9958L 20.7871 17.9958C 20.5781 17.9969 20.3789 17.916 20.2305 17.771C 20.084 17.6261 20 17.4291 20 17.2235L 20 5.63001C 20.002 3.06995 22.1074 0.99585 24.7031 0.99585L 32.2168 0.99585C 32.6504 0.99585 33 1.34168 33 1.76819ZM 40.1719 0.99585L 36.834 0.99585C 36.6113 0.99585 36.4102 1.07593 36.2598 1.20654C 36.2188 1.24182 36.1816 1.28076 36.1504 1.32275L 36.0938 1.40906C 36.0352 1.51636 36 1.63855 36 1.76819L 36 17.2235C 36 17.65 36.373 17.9958 36.834 17.9958L 40.166 17.9958C 40.627 17.9958 41 17.65 41 17.2235L 41 1.76819C 41 1.34168 40.627 0.99585 40.1719 0.99585ZM 43.7715 0.99585L 59.2207 0.99585C 59.3535 0.99585 59.4785 1.02844 59.5879 1.08594C 59.7109 1.15112 59.8145 1.24829 59.8867 1.36633C 59.959 1.4834 60 1.62097 60 1.76819L 60 4.84546C 60 5.2721 59.6543 5.6178 59.2285 5.6178L 54.5664 5.6178C 54.1406 5.6178 53.7949 5.96362 53.7949 6.39026L 53.7949 17.2234C 53.7949 17.4678 53.6816 17.6857 53.5039 17.8271C 53.373 17.9326 53.2051 17.9957 53.0215 17.9957L 49.9297 17.9957C 49.7227 17.999 49.5234 17.9191 49.375 17.7739C 49.3105 17.7108 49.2598 17.6377 49.2207 17.5582C 49.1719 17.4547 49.1445 17.3405 49.1445 17.2234L 49.1445 6.39026C 49.1367 5.96997 48.793 5.63391 48.373 5.63403L 43.7715 5.63403C 43.3457 5.63403 43 5.28821 43 4.86169L 43 1.76819C 43 1.34168 43.3457 0.99585 43.7715 0.99585ZM 84 1.76819C 84 1.34168 84.3438 0.99585 84.7695 0.99585L 96.3809 0.99585C 98.9297 0.99585 100.998 3.06995 101 5.63001L 101 17.2235C 101 17.65 100.656 17.9958 100.23 17.9958L 97.1504 17.9958C 97.0039 17.9958 96.8691 17.9552 96.752 17.8846C 96.7148 17.8619 96.6797 17.8362 96.6465 17.8076C 96.584 17.7534 96.5312 17.6895 96.4883 17.618C 96.4199 17.5026 96.3809 17.3677 96.3809 17.2235L 96.3809 6.39026C 96.3809 5.96521 96.0391 5.62012 95.6152 5.61792L 89.3887 5.61792C 88.9648 5.61792 88.6191 5.96362 88.6191 6.39026L 88.6191 17.2235C 88.6191 17.65 88.2754 17.9958 87.8496 17.9958L 84.7695 17.9958C 84.5996 17.9958 84.4434 17.9408 84.3164 17.8474C 84.125 17.7069 84 17.4799 84 17.2235L 84 1.76819ZM 71.5 4.99585C 69.0156 4.99585 67 7.01062 67 9.49585C 67 11.9811 69.0156 13.9959 71.5 13.9959C 73.9844 13.9959 76 11.9811 76 9.49585C 75.998 7.01148 73.9844 4.99817 71.5 4.99585ZM 102.613 1.14209L 103 1.14209L 103 1.98145L 103.314 1.98145L 103.314 1.40503L 103.314 1.22925L 103.865 1.99585L 104.119 1.98145L 104.67 1.21777L 104.67 1.40503L 104.67 1.98145L 105 1.98145L 105 0.99585L 104.555 0.99585L 104.002 1.76245L 103.49 0.99585L 103 0.99585L 102 0.99585L 102 1.14209L 102.387 1.14209L 102.387 1.99585L 102.617 1.99585L 102.613 1.14209Z"/>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.5 KiB |
5
packages/ui-toolkit/src/icons/triton-beta.js
Normal file
5
packages/ui-toolkit/src/icons/triton-beta.js
Normal file
@ -0,0 +1,5 @@
|
||||
import React from 'react';
|
||||
|
||||
import TritonBetaIcon from './svg/triton_beta.svg';
|
||||
|
||||
export default TritonBetaIcon;
|
||||
6
packages/ui-toolkit/src/icons/user-light.js
Normal file
6
packages/ui-toolkit/src/icons/user-light.js
Normal file
@ -0,0 +1,6 @@
|
||||
// eslint-disable-next-line no-unused-vars
|
||||
import React from 'react';
|
||||
|
||||
import UserIconLight from './svg/icon_user_light.svg';
|
||||
|
||||
export default UserIconLight;
|
||||
@ -80,8 +80,10 @@ export {
|
||||
|
||||
export {
|
||||
default as Header,
|
||||
Brand as HeaderBrand,
|
||||
Item as HeaderItem
|
||||
HeaderBrand,
|
||||
HeaderItem,
|
||||
HeaderNav,
|
||||
HeaderWrapper
|
||||
} from './header';
|
||||
|
||||
export {
|
||||
@ -114,6 +116,8 @@ export {
|
||||
DataCenterIconLight,
|
||||
ChevronIcon,
|
||||
TritonIcon,
|
||||
UserIconLight,
|
||||
TritonBetaIcon,
|
||||
CompletedIcon,
|
||||
PartCompletedIcon,
|
||||
IncompleteIcon,
|
||||
|
||||
@ -1,7 +1,7 @@
|
||||
#### Success/Educational
|
||||
|
||||
```jsx
|
||||
const { Message, MessageTitle, MessageDescription } = require('.');
|
||||
const { Message, MessageTitle, MessageDescription } = require('./index.js');
|
||||
|
||||
<Message>
|
||||
<MessageTitle>Choosing deployment data center</MessageTitle>
|
||||
@ -10,27 +10,27 @@ const { Message, MessageTitle, MessageDescription } = require('.');
|
||||
sure that you choose the data center that suits your requirements. Learn
|
||||
more
|
||||
</MessageDescription>
|
||||
</Message>;
|
||||
</Message>
|
||||
```
|
||||
|
||||
#### Error
|
||||
|
||||
```jsx
|
||||
const { Message, MessageTitle, MessageDescription } = require('.');
|
||||
const { Message, MessageTitle, MessageDescription } = require('./index.js');
|
||||
|
||||
<Message error>
|
||||
<MessageTitle>Choosing deployment data center</MessageTitle>
|
||||
<MessageDescription>Oh no</MessageDescription>
|
||||
</Message>;
|
||||
</Message>
|
||||
```
|
||||
|
||||
#### Warning
|
||||
|
||||
```jsx
|
||||
const { Message, MessageTitle, MessageDescription } = require('.');
|
||||
const { Message, MessageTitle, MessageDescription } = require('./index.js');
|
||||
|
||||
<Message warning>
|
||||
<MessageTitle>Choosing deployment data center</MessageTitle>
|
||||
<MessageDescription>There were some issues</MessageDescription>
|
||||
</Message>;
|
||||
</Message>
|
||||
```
|
||||
|
||||
@ -54,9 +54,9 @@ export const Message = ({ onCloseClick, children, ...type }) => (
|
||||
</Container>
|
||||
);
|
||||
|
||||
export const Title = ({ children }) => <H4>{children}</H4>;
|
||||
export const MessageTitle = ({ children }) => <H4>{children}</H4>;
|
||||
|
||||
export const Description = ({ children }) => <P>{children}</P>;
|
||||
export const MessageDescription = ({ children }) => <P>{children}</P>;
|
||||
|
||||
Message.propTypes = {
|
||||
/**
|
||||
|
||||
@ -103,12 +103,12 @@ module.exports = {
|
||||
'src/form/input.js',
|
||||
'src/message/index.js',
|
||||
'src/progress-bar/index.js',
|
||||
'src/popover/index.js',
|
||||
'src/form/radio.js',
|
||||
'src/section-list/index.js',
|
||||
'src/form/select.js',
|
||||
'src/form/toggle.js',
|
||||
'src/tooltip/index.js',
|
||||
'src/popover/index.js'
|
||||
'src/tooltip/index.js'
|
||||
]
|
||||
}
|
||||
],
|
||||
|
||||
Loading…
Reference in New Issue
Block a user