Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

feat(instances): status icon cross, cns tags color

Browse Source
This commit is contained in:
johnytiago 2018-05-09 12:25:04 +01:00 committed by Sérgio Ramos
parent b00baa7028
commit 062ff0ba67
9 changed files with 67 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

8
consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/cns.spec.js.snap
View File

@ -4898,6 +4898,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: rgba(66,134,244,0.1);
border: 0.0625rem solid rgb(45,56,132);
}
@ -5358,6 +5359,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
>
<li
className="c39"
fill="rgba(66, 134, 244, 0.1)"
>
serbice
</li>
@ -5367,6 +5369,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
>
<li
className="c39"
fill="rgba(66, 134, 244, 0.1)"
>
dssasda
</li>
@ -5376,6 +5379,7 @@ exports[`renders <Cns mutating /> without throwing 1`] = `
>
<li
className="c39"
fill="rgba(66, 134, 244, 0.1)"
>
dsasd
</li>
@ -7477,6 +7481,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
background: rgba(66,134,244,0.1);
border: 0.0625rem solid rgb(45,56,132);
}
@ -7701,6 +7706,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
>
<li
className="c26"
fill="rgba(66, 134, 244, 0.1)"
>
serbice
<svg
@ -7729,6 +7735,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
>
<li
className="c26"
fill="rgba(66, 134, 244, 0.1)"
>
dssasda
<svg
@ -7757,6 +7764,7 @@ exports[`renders <Cns services /> without throwing 1`] = `
>
<li
className="c26"
fill="rgba(66, 134, 244, 0.1)"
>
dsasd
<svg

2
consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/firewall.spec.js.snap
View File

@ -6299,6 +6299,7 @@ Array [
>
<li
className="c34"
fill={null}
name="wat"
style={
Object {
@ -7893,6 +7894,7 @@ Array [
>
<li
className="c34"
fill={null}
name="wat"
style={
Object {

3
consoles/my-joy-instances/src/containers/instances/__tests__/__snapshots__/tags.spec.js.snap
View File

@ -6288,6 +6288,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
>
<li
className="c22"
fill={null}
onClick={undefined}
>
name1: value1
@ -6302,6 +6303,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
>
<li
className="c22"
fill={null}
onClick={undefined}
>
name2: value2
@ -6316,6 +6318,7 @@ exports[`renders <Tags tags /> without throwing 1`] = `
>
<li
className="c22"
fill={null}
onClick={undefined}
>
name3: value3

10
packages/instance-steps/src/firewall/components.js
View File

@ -3,21 +3,27 @@ import Flex, { FlexItem } from 'styled-flex-component';
import { Margin } from 'styled-components-spacing';
import { H3, TickIcon } from 'joyent-ui-toolkit';
import { StatusIcon } from 'joyent-ui-resource-step';
import { StatusIcon, ErrorIcon } from 'joyent-ui-resource-step';
export const Preview = ({ enabled }) => (
<Flex>
<FlexItem>
<Margin right={2}>
{enabled ? (
<StatusIcon
fill="green"
border="greenDark"
Icon={() => <TickIcon fill="white" />}
/>
) : (
<ErrorIcon noLabel inverted />
)}
</Margin>
</FlexItem>
<FlexItem>
<H3>{enabled ? 'Firewall enabled' : 'Firewall not enabled'}</H3>
<H3>
{enabled ? 'Firewall rules are enabled' : 'Firewall rules are disabled'}
</H3>
</FlexItem>
</Flex>
);

2
packages/instance-steps/src/tags/index.js
View File

@ -39,7 +39,7 @@ const TagList = styled(BaseTagList)`
const Tag = ({ name, value, onRemoveClick }) => (
<Margin right={1} bottom={1} key={`${name}-${value}`}>
<TagItem fill="grey" onRemoveClick={onRemoveClick}>
<TagItem iconFill="grey" onRemoveClick={onRemoveClick}>
{name ? `${name}: ${value}` : value}
</TagItem>
</Margin>

16
packages/resource-step/src/status-icon.js
View File

@ -57,10 +57,22 @@ export const Saved = ({ inverted, children }) => {
);
};
export const Error = ({ children }) => (
<StatusIcon border="redDark" Icon={() => <CloseIcon fill="redDark" />}>
export const Error = ({ inverted = false, noLabel = false, children }) => {
const fill = inverted ? 'red' : 'white';
const iconFill = inverted ? 'white' : 'redDark';
console.log(inverted, fill, iconFill);
return (
<StatusIcon
border="redDark"
fill={fill}
Icon={() => <CloseIcon fill={iconFill} />}
>
{noLabel ? null : (
<Margin right="1">
<Label color="redDark">Error</Label>
</Margin>
)}
</StatusIcon>
);
};

3
packages/resource-widgets/src/__tests__/__snapshots__/firewall.spec.js.snap
View File

@ -1279,6 +1279,7 @@ Array [
>
<li
className="c18"
fill={null}
name="wat"
style={
Object {
@ -3377,6 +3378,7 @@ Array [
>
<li
className="c14"
fill={null}
name="wat"
style={
Object {
@ -4799,6 +4801,7 @@ Array [
>
<li
className="c18"
fill={null}
name="wat"
style={
Object {

1
packages/resource-widgets/src/cns/index.js
View File

@ -203,6 +203,7 @@ const CnsHostnames = ({
{services.map(value => (
<TagItem
active
fill={'rgba(66, 134, 244, 0.1)'}
key={value}
onRemoveClick={
onRemoveService && (() => onRemoveService(value))

20
packages/ui-toolkit/src/tags/item.js
View File

@ -32,6 +32,10 @@ const Tag = styled.li`
background: ${props => props.theme.disabled};
`};
${is('fill')`
background: ${props => props.fill};
`};
${is('error')`
border: ${remcalc(1)} solid ${props => props.theme.red};
`};
@ -46,13 +50,23 @@ const Tag = styled.li`
`;
export default withTheme(
({ theme, children, active, onRemoveClick, fill = null, ...rest }) => (
({
theme,
children,
active,
onRemoveClick,
fill = null,
iconFill = null,
...rest
}) => (
<Container>
<Tag active={active} {...rest}>
<Tag fill={fill} active={active} {...rest}>
{children}
{onRemoveClick ? (
<CloseIcon
fill={fill ? fill : active ? theme.primaryActive : theme.text}
fill={
iconFill ? iconFill : active ? theme.primaryActive : theme.text
}
disabled
onClick={onRemoveClick}
/>