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

feat(navigation): initial commit

This commit is contained in:
Sérgio Ramos 2018-01-17 19:10:39 +00:00
parent 03766d7fd8
commit c75bb9328d
105 changed files with 11631 additions and 2823 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
commitlint.config.js
View File

@ -4,7 +4,7 @@ module.exports = {
'scope-enum': [
2,
'always',
['ui-toolkit', 'icons', 'my-joy-beta', 'boilerplate', 'create-instance']
['ui-toolkit', 'icons', 'my-joy-beta', 'navigation']
]
}
};

18
package.json
View File

@ -19,13 +19,9 @@
"test-ci": "lerna run test-ci",
"test": "lerna run test",
"clean": "lerna clean --yes",
"dev": "redrun -p dev:*",
"dev:ui": "lerna run dev --scope joyent-ui-toolkit --stream",
"dev:i": "lerna run dev --scope joyent-icons --stream",
"dev:mjb": "lerna run dev --scope my-joy-beta --stream",
"dev": "lerna run dev --parallel --stream",
"commitmsg": "commitlint -e",
"precommit": "cross-env CI=1 redrun -s lint-staged format-staged",
"postinstall": "lerna run prepublish",
"commit": "commit"
},
"devDependencies": {
@ -67,12 +63,14 @@
"staged-git-files": "0.0.4",
"yargs": "^10.0.3"
},
"workspaces": ["packages/*"],
"resolutions": {
"graphql": "0.12.3",
"styled-components": "2.4.0",
"hoist-non-react-statics": "2.3.1",
"react": "16.2.0",
"react-dom": "16.2.0",
"styled-components": "2.3.0"
}
"breeze-nexttick": "0.2.1",
"zen-observable": "0.7.1"
},
"workspaces": [
"packages/*"
]
}

6
packages/icons/package.json
View File

@ -1,6 +1,6 @@
{
"name": "joyent-icons",
"version": "2.1.0",
"version": "3.0.0",
"license": "MPL-2.0",
"repository": "github:yldio/joyent-portal",
"main": "dist/umd/index.js",
@ -14,12 +14,12 @@
"compile:es": "babel src --out-dir dist/es",
"compile:umd": "UMD=1 babel src --out-dir dist/umd",
"compile": "redrun -p compile:*",
"dev":
"NODE_ENV=development npm run compile -- -- --watch --source-maps inline",
"dev": "NODE_ENV=development npm run compile -- -- --watch --source-maps inline",
"prepublish": "NODE_ENV=production npm run compile"
},
"dependencies": {
"remcalc": "^1.0.9",
"rnd-id": "^2.0.0",
"styled-components": "^2.3.0"
},
"devDependencies": {

64
packages/icons/src/actions.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import remcalc from 'remcalc';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -10,41 +9,38 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="4"
height="16"
viewBox="0 0 4 16"
xmlns="http://www.w3.org/2000/svg"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<path
fill={calcFill({ fill, disabled, light, colors })}
fill-rule="evenodd"
d="M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"
/>
<path
fill={calcFill({ fill, disabled, light, colors })}
style={{ transform: `translateY(${remcalc(6)})` }}
fill-rule="evenodd"
d="M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"
/>
<path
fill={calcFill({ fill, disabled, light, colors })}
style={{ transform: `translateY(${remcalc(12)})` }}
fill-rule="evenodd"
d="M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"
/>
</svg>
)}
</Rotate>
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="4"
height="16"
viewBox="0 0 4 16"
xmlns="http://www.w3.org/2000/svg"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<path
fill={calcFill({ fill, disabled, light, colors })}
fill-rule="evenodd"
d="M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"
/>
<path
fill={calcFill({ fill, disabled, light, colors })}
style={{ transform: `translateY(${remcalc(6)})` }}
fill-rule="evenodd"
d="M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"
/>
<path
fill={calcFill({ fill, disabled, light, colors })}
style={{ transform: `translateY(${remcalc(12)})` }}
fill-rule="evenodd"
d="M2 4a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"
/>
</svg>
)}
</Colors>
</Rotate>
);

66
packages/icons/src/affinity.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import rndId from 'rnd-id';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -12,43 +11,40 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="18"
height="12"
viewBox="0 0 18 12"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<g transform="translate(-1104 1236)">
<g>
<g>
<use
fill={calcFill({ fill, disabled, light, colors })}
xlinkHref={`#${ids[0]}`}
transform="translate(1104 -1236)"
/>
</g>
</g>
</g>
<defs>
<path
id={ids[0]}
d="M 12 0C 10.9 0 9.9 0.300003 9 0.800003C 8.1 0.300003 7.1 0 6 0C 2.7 0 0 2.7 0 6C 0 9.3 2.7 12 6 12C 7.1 12 8.1 11.7 9 11.2C 9.9 11.7 10.9 12 12 12C 15.3 12 18 9.3 18 6C 18 2.7 15.3 0 12 0ZM 6 11C 3.2 11 1 8.8 1 6C 1 3.2 3.2 1 6 1C 6.7 1 7.4 1.2 8.1 1.5C 6.8 2.6 6 4.2 6 6C 6 7.8 6.8 9.4 8.1 10.5C 7.4 10.8 6.7 11 6 11ZM 11 6C 11 7.6 10.2 9.1 9 10C 7.8 9.1 7 7.7 7 6C 7 4.3 7.8 2.9 9 2C 10.2 2.9 11 4.4 11 6ZM 12 11C 11.3 11 10.6 10.8 9.9 10.5C 11.2 9.4 12 7.8 12 6C 12 4.2 11.2 2.6 9.9 1.5C 10.5 1.2 11.2 1 12 1C 14.8 1 17 3.2 17 6C 17 8.8 14.8 11 12 11Z"
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="18"
height="12"
viewBox="0 0 18 12"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<g transform="translate(-1104 1236)">
<g>
<g>
<use
fill={calcFill({ fill, disabled, light, colors })}
xlinkHref={`#${ids[0]}`}
transform="translate(1104 -1236)"
/>
</defs>
</svg>
)}
</Rotate>
</g>
</g>
</g>
<defs>
<path
id={ids[0]}
d="M 12 0C 10.9 0 9.9 0.300003 9 0.800003C 8.1 0.300003 7.1 0 6 0C 2.7 0 0 2.7 0 6C 0 9.3 2.7 12 6 12C 7.1 12 8.1 11.7 9 11.2C 9.9 11.7 10.9 12 12 12C 15.3 12 18 9.3 18 6C 18 2.7 15.3 0 12 0ZM 6 11C 3.2 11 1 8.8 1 6C 1 3.2 3.2 1 6 1C 6.7 1 7.4 1.2 8.1 1.5C 6.8 2.6 6 4.2 6 6C 6 7.8 6.8 9.4 8.1 10.5C 7.4 10.8 6.7 11 6 11ZM 11 6C 11 7.6 10.2 9.1 9 10C 7.8 9.1 7 7.7 7 6C 7 4.3 7.8 2.9 9 2C 10.2 2.9 11 4.4 11 6ZM 12 11C 11.3 11 10.6 10.8 9.9 10.5C 11.2 9.4 12 7.8 12 6C 12 4.2 11.2 2.6 9.9 1.5C 10.5 1.2 11.2 1 12 1C 14.8 1 17 3.2 17 6C 17 8.8 14.8 11 12 11Z"
/>
</defs>
</svg>
)}
</Colors>
</Rotate>
);

40
packages/icons/src/arrow.js
View File

@ -1,6 +1,5 @@
import React from 'react';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -9,29 +8,26 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="9"
height="6"
viewBox="0 0 9 6"
xmlns="http://www.w3.org/2000/svg"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<path
fill={calcFill({ fill, disabled, light, colors })}
fillRule="evenodd"
d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z"
/>
</svg>
)}
</Rotate>
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="9"
height="6"
viewBox="0 0 9 6"
xmlns="http://www.w3.org/2000/svg"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<path
fill={calcFill({ fill, disabled, light, colors })}
fillRule="evenodd"
d="M9 1.386L7.648 0 4.5 3.228 1.352 0 0 1.386 4.5 6z"
/>
</svg>
)}
</Colors>
</Rotate>
);

40
packages/icons/src/bin.js
View File

@ -1,6 +1,5 @@
import React from 'react';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -9,29 +8,26 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="12"
height="17"
viewBox="0 0 12 17"
xmlns="http://www.w3.org/2000/svg"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<path
fill={calcFill({ fill, disabled, light, colors })}
d="M4 0v1H0v2h12V1H8.001V0H4zM1 17h10V4H1v13z"
fillRule="evenodd"
/>
</svg>
)}
</Rotate>
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="12"
height="17"
viewBox="0 0 12 17"
xmlns="http://www.w3.org/2000/svg"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<path
fill={calcFill({ fill, disabled, light, colors })}
d="M4 0v1H0v2h12V1H8.001V0H4zM1 17h10V4H1v13z"
fillRule="evenodd"
/>
</svg>
)}
</Colors>
</Rotate>
);

137
packages/icons/src/checkcircle.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import remcalc from 'remcalc';
import Colors from './colors';
import Rotate from './rotate';
export const Tick = props => (
@ -19,84 +18,72 @@ export const Tick = props => (
</svg>
);
export const Completed = props => (
<Colors white text greenDark>
{({ white, text, greenDark }) => (
<svg
width="18"
height="18"
viewBox="0 0 18 18"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
fill={greenDark}
fill-rule="evenodd"
d="M9 18A9 9 0 1 0 9 0a9 9 0 0 0 0 18z"
/>
<path
fill-rule="evenodd"
fill={white}
d="M12.017 5l-3.896 5.336-1.487-2.109L5 9.379l3.091 4.389 5.541-7.589L12.017 5z"
/>
</svg>
)}
</Colors>
export const Completed = ({ colors = {}, ...props }) => (
<svg
width="18"
height="18"
viewBox="0 0 18 18"
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
fill={colors.greenDark}
fill-rule="evenodd"
d="M9 18A9 9 0 1 0 9 0a9 9 0 0 0 0 18z"
/>
<path
fill-rule="evenodd"
fill={colors.white}
d="M12.017 5l-3.896 5.336-1.487-2.109L5 9.379l3.091 4.389 5.541-7.589L12.017 5z"
/>
</svg>
);
export const PartCompleted = props => (
<Colors white text greenDark>
{({ white, text, greenDark }) => (
<svg
width="18"
height="18"
viewBox="0 0 18 18"
style={{ padding: '1px' }}
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
fill={white}
fillRule="evenodd"
d="M9 18A9 9 0 1 0 9 0a9 9 0 0 0 0 18z"
/>
<path
fill={greenDark}
d="M9 19c5.523 0 10-4.477 10-10h-2a8 8 0 0 1-8 8v2zM19 9C19 3.477 14.523-1 9-1v2a8 8 0 0 1 8 8h2zM9-1C3.477-1-1 3.477-1 9h2a8 8 0 0 1 8-8v-2zM-1 9c0 5.523 4.477 10 10 10v-2a8 8 0 0 1-8-8h-2z"
/>
<path
fill={text}
fillRule="evenodd"
d="M12.316 5l-4.062 5.477-1.55-2.165L5 9.495 8.223 14 14 6.21 12.316 5z"
/>
</svg>
)}
</Colors>
export const PartCompleted = ({ colors = {}, ...props }) => (
<svg
width="18"
height="18"
viewBox="0 0 18 18"
style={{ padding: '1px' }}
xmlns="http://www.w3.org/2000/svg"
{...props}
>
<path
fill={colors.white}
fillRule="evenodd"
d="M9 18A9 9 0 1 0 9 0a9 9 0 0 0 0 18z"
/>
<path
fill={colors.greenDark}
d="M9 19c5.523 0 10-4.477 10-10h-2a8 8 0 0 1-8 8v2zM19 9C19 3.477 14.523-1 9-1v2a8 8 0 0 1 8 8h2zM9-1C3.477-1-1 3.477-1 9h2a8 8 0 0 1 8-8v-2zM-1 9c0 5.523 4.477 10 10 10v-2a8 8 0 0 1-8-8h-2z"
/>
<path
fill={colors.text}
fillRule="evenodd"
d="M12.316 5l-4.062 5.477-1.55-2.165L5 9.495 8.223 14 14 6.21 12.316 5z"
/>
</svg>
);
export const Incomplete = props => (
<Colors white text>
{({ white, text }) => (
<svg
width="18"
height="18"
viewBox="0 0 18 18"
xmlns="http://www.w3.org/2000/svg"
style={{ padding: remcalc(1) }}
{...props}
>
<path
fill={white}
fillRule="evenodd"
d="M9 18A9 9 0 1 0 9 0a9 9 0 0 0 0 18z"
/>
<path
fill={text}
d="M9 19c5.523 0 10-4.477 10-10h-2a8 8 0 0 1-8 8v2zM19 9C19 3.477 14.523-1 9-1v2a8 8 0 0 1 8 8h2zM9-1C3.477-1-1 3.477-1 9h2a8 8 0 0 1 8-8v-2zM-1 9c0 5.523 4.477 10 10 10v-2a8 8 0 0 1-8-8h-2z"
/>
</svg>
)}
</Colors>
export const Incomplete = ({ colors = {}, ...props }) => (
<svg
width="18"
height="18"
viewBox="0 0 18 18"
xmlns="http://www.w3.org/2000/svg"
style={{ padding: remcalc(1) }}
{...props}
>
<path
fill={colors.white}
fillRule="evenodd"
d="M9 18A9 9 0 1 0 9 0a9 9 0 0 0 0 18z"
/>
<path
fill={colors.text}
d="M9 19c5.523 0 10-4.477 10-10h-2a8 8 0 0 1-8 8v2zM19 9C19 3.477 14.523-1 9-1v2a8 8 0 0 1 8 8h2zM9-1C3.477-1-1 3.477-1 9h2a8 8 0 0 1 8-8v-2zM-1 9c0 5.523 4.477 10 10 10v-2a8 8 0 0 1-8-8h-2z"
/>
</svg>
);
export default ({

68
packages/icons/src/clipboard.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import rndId from 'rnd-id';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -12,43 +11,40 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="13"
height="16"
version="1.1"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<g transform="translate(-2367 443)">
<use
xlinkHref={`#${ids[0]}`}
transform="translate(2370 -437)"
fill={calcFill({ fill, disabled, light, colors })}
/>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(2367 -443)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
<defs>
<path id={ids[0]} d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z" />
<path
id={ids[1]}
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
/>
</defs>
</svg>
)}
</Rotate>
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="13"
height="16"
version="1.1"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<g transform="translate(-2367 443)">
<use
xlinkHref={`#${ids[0]}`}
transform="translate(2370 -437)"
fill={calcFill({ fill, disabled, light, colors })}
/>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(2367 -443)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
<defs>
<path id={ids[0]} d="M6 3L4 5V0H3v5L1 3 0 4l3.5 3L7 4 6 3z" />
<path
id={ids[1]}
d="M12 1h-2V0H3v1H1c-.6 0-1 .4-1 1v13c0 .6.4 1 1 1h11c.6 0 1-.4 1-1V2c0-.6-.4-1-1-1zM4 1h5v2H4V1zm8 14H1V2h2v2h7V2h2v13z"
/>
</defs>
</svg>
)}
</Colors>
</Rotate>
);

40
packages/icons/src/close.js
View File

@ -1,6 +1,5 @@
import React from 'react';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -9,29 +8,26 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="12"
height="12"
viewBox="0 0 12 12"
xmlns="http://www.w3.org/2000/svg"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<path
fill={calcFill({ fill, disabled, light, colors })}
d="M7.314 5.9l4.242-4.243L10.142.243 5.9 4.485 1.657.243.243 1.657l4.242 4.242-4.242 4.243 1.414 1.414 4.242-4.242 4.243 4.242 1.414-1.414L7.314 5.9z"
fillRule="evenodd"
/>
</svg>
)}
</Rotate>
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="12"
height="12"
viewBox="0 0 12 12"
xmlns="http://www.w3.org/2000/svg"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<path
fill={calcFill({ fill, disabled, light, colors })}
d="M7.314 5.9l4.242-4.243L10.142.243 5.9 4.485 1.657.243.243 1.657l4.242 4.242-4.242 4.243 1.414 1.414 4.242-4.242 4.243 4.242 1.414-1.414L7.314 5.9z"
fillRule="evenodd"
/>
</svg>
)}
</Colors>
</Rotate>
);

106
packages/icons/src/cns.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import rndId from 'rnd-id';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -12,62 +11,59 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="16"
height="13"
viewBox="0 0 16 13"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<g transform="translate(-1106 442)">
<use
xlinkHref={`#${ids[0]}`}
transform="translate(1106 -442)"
fill={calcFill({ fill, disabled, light, colors })}
/>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(1106.6 -434)"
fill={calcFill({ fill, disabled, light, colors })}
/>
<use
xlinkHref={`#${ids[2]}`}
transform="translate(1112.1 -434)"
fill={calcFill({ fill, disabled, light, colors })}
/>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(1117.6 -434)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
<defs>
<path
id={ids[0]}
d="M15 1v4H1V1h14zm0-1H1C.4 0 0 .4 0 1v4c0 .6.4 1 1 1h14c.6 0 1-.4 1-1V1c0-.6-.4-1-1-1z"
/>
<path
id={ids[1]}
d="M3 2.4l-.6.7V0h-1v3.1l-.7-.7-.7.7L1.9 5l1.8-1.9-.7-.7z"
/>
<path
id={ids[2]}
d="M3 2.4l-.6.7V0h-1v3.1l-.6-.7-.8.7L1.9 5l1.9-1.9-.8-.7z"
/>
</defs>
</svg>
)}
</Rotate>
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="16"
height="13"
viewBox="0 0 16 13"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<g transform="translate(-1106 442)">
<use
xlinkHref={`#${ids[0]}`}
transform="translate(1106 -442)"
fill={calcFill({ fill, disabled, light, colors })}
/>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(1106.6 -434)"
fill={calcFill({ fill, disabled, light, colors })}
/>
<use
xlinkHref={`#${ids[2]}`}
transform="translate(1112.1 -434)"
fill={calcFill({ fill, disabled, light, colors })}
/>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(1117.6 -434)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
<defs>
<path
id={ids[0]}
d="M15 1v4H1V1h14zm0-1H1C.4 0 0 .4 0 1v4c0 .6.4 1 1 1h14c.6 0 1-.4 1-1V1c0-.6-.4-1-1-1z"
/>
<path
id={ids[1]}
d="M3 2.4l-.6.7V0h-1v3.1l-.7-.7-.7.7L1.9 5l1.8-1.9-.7-.7z"
/>
<path
id={ids[2]}
d="M3 2.4l-.6.7V0h-1v3.1l-.6-.7-.8.7L1.9 5l1.9-1.9-.8-.7z"
/>
</defs>
</svg>
)}
</Colors>
</Rotate>
);

25
packages/icons/src/colors.js
View File

@ -1,25 +0,0 @@
import { withTheme } from 'styled-components';
export const colors = {
white: '#FFF',
text: '#464646',
greenDark: '#008138',
green: '#009858',
orange: '#e38200',
primary: '#3b46cc'
};
export default withTheme(
({ theme = {}, children, direction = 'down', style = {}, ...rest }) =>
children(
Object.keys(rest)
.filter(name => Boolean(rest[name]))
.reduce(
(sum, name) => ({
...sum,
[name]: theme[name] || colors[name] || rest[name]
}),
rest
)
)
);

40
packages/icons/src/copy.js
View File

@ -1,6 +1,5 @@
import React from 'react';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -9,29 +8,26 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="13"
height="16"
viewBox="0 0 13 16"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<path
fill={calcFill({ fill, disabled, light, colors })}
d="M 12 1L 10 1L 10 0L 3 0L 3 1L 1 1C 0.4 1 0 1.4 0 2L 0 15C 0 15.6 0.4 16 1 16L 12 16C 12.6 16 13 15.6 13 15L 13 2C 13 1.4 12.6 1 12 1ZM 4 1L 9 1L 9 2L 9 3L 4 3L 4 2L 4 1ZM 12 15L 1 15L 1 2L 3 2L 3 4L 10 4L 10 2L 12 2L 12 15Z"
/>
</svg>
)}
</Rotate>
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="13"
height="16"
viewBox="0 0 13 16"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<path
fill={calcFill({ fill, disabled, light, colors })}
d="M 12 1L 10 1L 10 0L 3 0L 3 1L 1 1C 0.4 1 0 1.4 0 2L 0 15C 0 15.6 0.4 16 1 16L 12 16C 12.6 16 13 15.6 13 15L 13 2C 13 1.4 12.6 1 12 1ZM 4 1L 9 1L 9 2L 9 3L 4 3L 4 2L 4 1ZM 12 15L 1 15L 1 2L 3 2L 3 4L 10 4L 10 2L 12 2L 12 15Z"
/>
</svg>
)}
</Colors>
</Rotate>
);

38
packages/icons/src/cpu.js
View File

@ -1,6 +1,5 @@
import React from 'react';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -9,28 +8,25 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<path
fill={calcFill({ fill, disabled, light, colors })}
d="M20,18a2,2,0,0,1-2,2H6a2,2,0,0,1-2-2V6A2,2,0,0,1,6,4H18a2,2,0,0,1,2,2Zm3-5a1,1,0,0,0,0-2H22V10h1a1,1,0,0,0,0-2H22V6a4,4,0,0,0-4-4H16V1a1,1,0,0,0-2,0V2H13V1a1,1,0,0,0-2,0V2H10V1A1,1,0,0,0,8,1V2H6A4,4,0,0,0,2,6V8H1a1,1,0,0,0,0,2H2v1H1a1,1,0,0,0,0,2H2v1H1a1,1,0,0,0,0,2H2v2a4,4,0,0,0,4,4H8v1a1,1,0,0,0,2,0V22h1v1a1,1,0,0,0,2,0V22h1v1a1,1,0,0,0,2,0V22h2a4,4,0,0,0,4-4V16h1a1,1,0,0,0,0-2H22V13ZM7,7V17H17V7Zm9,9H8V8h8Z"
/>
</svg>
)}
</Rotate>
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<path
fill={calcFill({ fill, disabled, light, colors })}
d="M20,18a2,2,0,0,1-2,2H6a2,2,0,0,1-2-2V6A2,2,0,0,1,6,4H18a2,2,0,0,1,2,2Zm3-5a1,1,0,0,0,0-2H22V10h1a1,1,0,0,0,0-2H22V6a4,4,0,0,0-4-4H16V1a1,1,0,0,0-2,0V2H13V1a1,1,0,0,0-2,0V2H10V1A1,1,0,0,0,8,1V2H6A4,4,0,0,0,2,6V8H1a1,1,0,0,0,0,2H2v1H1a1,1,0,0,0,0,2H2v1H1a1,1,0,0,0,0,2H2v2a4,4,0,0,0,4,4H8v1a1,1,0,0,0,2,0V22h1v1a1,1,0,0,0,2,0V22h1v1a1,1,0,0,0,2,0V22h2a4,4,0,0,0,4-4V16h1a1,1,0,0,0,0-2H22V13ZM7,7V17H17V7Zm9,9H8V8h8Z"
/>
</svg>
)}
</Colors>
</Rotate>
);

40
packages/icons/src/data-center.js
View File

@ -1,6 +1,5 @@
import React from 'react';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -9,29 +8,26 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="9"
height="13"
viewBox="0 0 9 13"
xmlns="http://www.w3.org/2000/svg"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<path
fill={calcFill({ fill, disabled, light, colors })}
fillRule="evenodd"
d="M0 13h9V0H0v13zm2-2h5V2H2v9zm1-7h3.001V3H3v1zm0 2h3.001V5H3v1zm0 2h3.001V7H3v1z"
/>
</svg>
)}
</Rotate>
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="9"
height="13"
viewBox="0 0 9 13"
xmlns="http://www.w3.org/2000/svg"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<path
fill={calcFill({ fill, disabled, light, colors })}
fillRule="evenodd"
d="M0 13h9V0H0v13zm2-2h5V2H2v9zm1-7h3.001V3H3v1zm0 2h3.001V5H3v1zm0 2h3.001V7H3v1z"
/>
</svg>
)}
</Colors>
</Rotate>
);

66
packages/icons/src/delete.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import rndId from 'rnd-id';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -12,42 +11,39 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="9"
height="12"
viewBox="0 0 9 12"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<g transform="translate(17403 -18583)">
<g>
<use
fill={calcFill({ fill, disabled, light, colors })}
xlinkHref={`#${ids[0]}`}
transform="translate(-17403 18583)"
/>
</g>
</g>
<defs>
<path
id={ids[0]}
fillRule="evenodd"
d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
/>
</defs>
</svg>
)}
</Rotate>
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="9"
height="12"
viewBox="0 0 9 12"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<g transform="translate(17403 -18583)">
<g>
<use
fill={calcFill({ fill, disabled, light, colors })}
xlinkHref={`#${ids[0]}`}
transform="translate(-17403 18583)"
/>
</g>
</g>
<defs>
<path
id={ids[0]}
fillRule="evenodd"
d="M 2 0L 2 1L 0 1L 0 2L 9 2L 9 1L 7 1L 7 0L 2 0ZM 0 3L 1 12L 8 12L 9 3L 0 3ZM 6 4L 7.882 4L 7.104 11L 6 11L 6 4ZM 4 11L 5.001 11L 5.001 4L 4 4L 4 11ZM 1.11719 4L 3.00019 4L 3.00019 11L 1.89619 11L 1.11719 4Z"
/>
</defs>
</svg>
)}
</Colors>
</Rotate>
);

66
packages/icons/src/duplicate.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import rndId from 'rnd-id';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -12,42 +11,39 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="12"
height="12"
viewBox="0 0 12 12"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<g transform="translate(17861 -18582)">
<g>
<use
fill={calcFill({ fill, disabled, light, colors })}
xlinkHref={`#${ids[0]}`}
transform="translate(-17861 18582)"
/>
</g>
</g>
<defs>
<path
id={ids[0]}
fillRule="evenodd"
d="M 7 0L 5 0L 5 5L 0 5L 0 7L 5 7L 5 12L 7 12L 7 7L 12 7L 12 5L 7 5L 7 0Z"
/>
</defs>
</svg>
)}
</Rotate>
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="12"
height="12"
viewBox="0 0 12 12"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<g transform="translate(17861 -18582)">
<g>
<use
fill={calcFill({ fill, disabled, light, colors })}
xlinkHref={`#${ids[0]}`}
transform="translate(-17861 18582)"
/>
</g>
</g>
<defs>
<path
id={ids[0]}
fillRule="evenodd"
d="M 7 0L 5 0L 5 5L 0 5L 0 7L 5 7L 5 12L 7 12L 7 7L 12 7L 12 5L 7 5L 7 0Z"
/>
</defs>
</svg>
)}
</Colors>
</Rotate>
);

74
packages/icons/src/edit.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import rndId from 'rnd-id';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -12,46 +11,43 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="17"
height="17"
version="1.1"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<g transform="translate(-1886 444)">
<use
xlinkHref={`#${ids[0]}`}
transform="translate(1886 -441.9)"
fill={calcFill({ fill, disabled, light, colors })}
/>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(1889.4 -444)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
<defs>
<path
id={ids[0]}
d="M13 7v5c0 .5-.4 1-1 1H2c-.5 0-1-.4-1-1V2c0-.5.4-1 1-1h5V0H2C.9 0 0 .9 0 2v10c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V7h-1z"
/>
<path
id={ids[1]}
d="M9.8 0L1.4 8.5 0 12.7l4.2-1.4 8.5-8.5L9.8 0zm-7 8.5l7.1-7.1 1.4 1.4-7.1 7.1-1.4-1.4z"
/>
</defs>
</svg>
)}
</Rotate>
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="17"
height="17"
version="1.1"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<g transform="translate(-1886 444)">
<use
xlinkHref={`#${ids[0]}`}
transform="translate(1886 -441.9)"
fill={calcFill({ fill, disabled, light, colors })}
/>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(1889.4 -444)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
<defs>
<path
id={ids[0]}
d="M13 7v5c0 .5-.4 1-1 1H2c-.5 0-1-.4-1-1V2c0-.5.4-1 1-1h5V0H2C.9 0 0 .9 0 2v10c0 1.1.9 2 2 2h10c1.1 0 2-.9 2-2V7h-1z"
/>
<path
id={ids[1]}
d="M9.8 0L1.4 8.5 0 12.7l4.2-1.4 8.5-8.5L9.8 0zm-7 8.5l7.1-7.1 1.4 1.4-7.1 7.1-1.4-1.4z"
/>
</defs>
</svg>
)}
</Colors>
</Rotate>
);

42
packages/icons/src/fabric.js
View File

@ -1,6 +1,5 @@
import React from 'react';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -9,30 +8,27 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
viewBox="0 0 16.2 16.2"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
width="17"
height="17"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<path
d="M16.2,6.61a17.42,17.42,0,0,0-3.37-.26,11.67,11.67,0,0,1-.47-4A15.72,15.72,0,0,1,16,2.59l.2-1a16,16,0,0,0-3.77-.24A11,11,0,0,1,12.59.2l-1-.2a14.09,14.09,0,0,0-.2,1.46A8.44,8.44,0,0,0,7.82,2.68c-.15.1-.31.19-.47.28A15.07,15.07,0,0,1,7.59.2l-1-.2a16.37,16.37,0,0,0-.26,3.37,11.66,11.66,0,0,1-4,.46A15.6,15.6,0,0,1,2.59.2l-1-.2a16.29,16.29,0,0,0-.25,3.77C.67,3.7.21,3.61.2,3.61l-.2,1c.07,0,.63.12,1.46.19a8.48,8.48,0,0,0,1.22,3.6A5.3,5.3,0,0,1,3,8.85,17.52,17.52,0,0,1,.2,8.61l-.2,1a16.66,16.66,0,0,0,3,.26h.4a11.71,11.71,0,0,1,.46,4A17,17,0,0,1,.2,13.61l-.2,1a16.66,16.66,0,0,0,3,.26l.8,0c-.07.7-.16,1.16-.16,1.17l1,.2c0-.07.12-.63.19-1.46a8.49,8.49,0,0,0,3.6-1.23c.15-.1.3-.18.46-.27A16.88,16.88,0,0,1,8.61,16l1,.2a17,17,0,0,0,.25-3.37,11.73,11.73,0,0,1,4-.47A17.13,17.13,0,0,1,13.61,16l1,.2a17.28,17.28,0,0,0,.24-3.77,11,11,0,0,1,1.17.16l.2-1a14.09,14.09,0,0,0-1.46-.2,8.45,8.45,0,0,0-1.23-3.59c-.1-.15-.18-.31-.27-.47A15.07,15.07,0,0,1,16,7.59ZM8.38,3.51a7.26,7.26,0,0,1,3-1,13.17,13.17,0,0,0,.44,3.93,9.35,9.35,0,0,0-3.51,1A8.4,8.4,0,0,1,7.39,4,6.75,6.75,0,0,0,8.38,3.51ZM2.48,4.84H3a12.4,12.4,0,0,0,3.44-.44,9.35,9.35,0,0,0,1,3.51A8.38,8.38,0,0,1,4,8.8a6.18,6.18,0,0,0-.53-1A7.36,7.36,0,0,1,2.48,4.84Zm5.34,7.84a7.22,7.22,0,0,1-3,1A12.61,12.61,0,0,0,4.4,9.78a9,9,0,0,0,3.52-1,8.43,8.43,0,0,1,.88,3.37A7.11,7.11,0,0,0,7.82,12.68Zm5.9-1.33a13.23,13.23,0,0,0-3.94.44,9,9,0,0,0-1-3.51,8.44,8.44,0,0,1,3.38-.89,6.69,6.69,0,0,0,.52,1A7.13,7.13,0,0,1,13.72,11.35Z"
fill={calcFill({ fill, disabled, light, colors })}
/>
</svg>
)}
</Rotate>
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
viewBox="0 0 16.2 16.2"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
width="17"
height="17"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<path
d="M16.2,6.61a17.42,17.42,0,0,0-3.37-.26,11.67,11.67,0,0,1-.47-4A15.72,15.72,0,0,1,16,2.59l.2-1a16,16,0,0,0-3.77-.24A11,11,0,0,1,12.59.2l-1-.2a14.09,14.09,0,0,0-.2,1.46A8.44,8.44,0,0,0,7.82,2.68c-.15.1-.31.19-.47.28A15.07,15.07,0,0,1,7.59.2l-1-.2a16.37,16.37,0,0,0-.26,3.37,11.66,11.66,0,0,1-4,.46A15.6,15.6,0,0,1,2.59.2l-1-.2a16.29,16.29,0,0,0-.25,3.77C.67,3.7.21,3.61.2,3.61l-.2,1c.07,0,.63.12,1.46.19a8.48,8.48,0,0,0,1.22,3.6A5.3,5.3,0,0,1,3,8.85,17.52,17.52,0,0,1,.2,8.61l-.2,1a16.66,16.66,0,0,0,3,.26h.4a11.71,11.71,0,0,1,.46,4A17,17,0,0,1,.2,13.61l-.2,1a16.66,16.66,0,0,0,3,.26l.8,0c-.07.7-.16,1.16-.16,1.17l1,.2c0-.07.12-.63.19-1.46a8.49,8.49,0,0,0,3.6-1.23c.15-.1.3-.18.46-.27A16.88,16.88,0,0,1,8.61,16l1,.2a17,17,0,0,0,.25-3.37,11.73,11.73,0,0,1,4-.47A17.13,17.13,0,0,1,13.61,16l1,.2a17.28,17.28,0,0,0,.24-3.77,11,11,0,0,1,1.17.16l.2-1a14.09,14.09,0,0,0-1.46-.2,8.45,8.45,0,0,0-1.23-3.59c-.1-.15-.18-.31-.27-.47A15.07,15.07,0,0,1,16,7.59ZM8.38,3.51a7.26,7.26,0,0,1,3-1,13.17,13.17,0,0,0,.44,3.93,9.35,9.35,0,0,0-3.51,1A8.4,8.4,0,0,1,7.39,4,6.75,6.75,0,0,0,8.38,3.51ZM2.48,4.84H3a12.4,12.4,0,0,0,3.44-.44,9.35,9.35,0,0,0,1,3.51A8.38,8.38,0,0,1,4,8.8a6.18,6.18,0,0,0-.53-1A7.36,7.36,0,0,1,2.48,4.84Zm5.34,7.84a7.22,7.22,0,0,1-3,1A12.61,12.61,0,0,0,4.4,9.78a9,9,0,0,0,3.52-1,8.43,8.43,0,0,1,.88,3.37A7.11,7.11,0,0,0,7.82,12.68Zm5.9-1.33a13.23,13.23,0,0,0-3.94.44,9,9,0,0,0-1-3.51,8.44,8.44,0,0,1,3.38-.89,6.69,6.69,0,0,0,.52,1A7.13,7.13,0,0,1,13.72,11.35Z"
fill={calcFill({ fill, disabled, light, colors })}
/>
</svg>
)}
</Colors>
</Rotate>
);

92
packages/icons/src/firewall.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import rndId from 'rnd-id';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -12,58 +11,55 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="15"
height="17"
viewBox="0 0 15 17"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<g transform="translate(-1886 1522)">
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="15"
height="17"
viewBox="0 0 15 17"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<g transform="translate(-1886 1522)">
<g>
<g>
<g>
<g>
<g>
<use
xlinkHref={`#${ids[0]}`}
transform="translate(1886 -1522)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
</g>
<g>
<g>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(1889 -1519)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
</g>
<use
xlinkHref={`#${ids[0]}`}
transform="translate(1886 -1522)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
</g>
<defs>
<path
id={ids[0]}
d="M 7.5 1.60001C 8.6 2.60001 10.5 3.20001 12.9 3.20001C 13.3 3.20001 13.6 3.20001 14 3.20001L 14 5C 14 10 11.7 13.9 7.5 15.9C 3.5 13.9 1 9.3 1 4L 1 3.20001C 1.3 3.20001 1.7 3.20001 2.1 3.20001C 4.5 3.20001 6.4 2.70001 7.5 1.60001ZM 7.5 0C 6.6 1.8 3.9 2.20001 2.1 2.20001C 0.899998 2.20001 0 2.10001 0 2.10001L 0 4C 0 9.9 3 15 7.5 17C 12 15 15 10.9 15 5L 15 2.10001C 15 2.10001 14.1 2.20001 12.9 2.20001C 11.1 2.20001 8.4 1.8 7.5 0Z"
/>
<path
id={ids[1]}
d="M 4 2.05496L 4 9.06593C 2.1 7.73626 1 5.3187 1 2.65936L 1 2.41758C 2.2 2.41758 3.2 2.29672 4 2.05496ZM 5 0C 4.2 1.08791 2.3 1.20879 1 1.20879C 0.4 1.20879 0 1.20879 0 1.20879L 0 2.65936C 0 6.40661 2 9.67034 5 11L 5 0Z"
/>
</defs>
</svg>
)}
</Rotate>
<g>
<g>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(1889 -1519)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
</g>
</g>
</g>
<defs>
<path
id={ids[0]}
d="M 7.5 1.60001C 8.6 2.60001 10.5 3.20001 12.9 3.20001C 13.3 3.20001 13.6 3.20001 14 3.20001L 14 5C 14 10 11.7 13.9 7.5 15.9C 3.5 13.9 1 9.3 1 4L 1 3.20001C 1.3 3.20001 1.7 3.20001 2.1 3.20001C 4.5 3.20001 6.4 2.70001 7.5 1.60001ZM 7.5 0C 6.6 1.8 3.9 2.20001 2.1 2.20001C 0.899998 2.20001 0 2.10001 0 2.10001L 0 4C 0 9.9 3 15 7.5 17C 12 15 15 10.9 15 5L 15 2.10001C 15 2.10001 14.1 2.20001 12.9 2.20001C 11.1 2.20001 8.4 1.8 7.5 0Z"
/>
<path
id={ids[1]}
d="M 4 2.05496L 4 9.06593C 2.1 7.73626 1 5.3187 1 2.65936L 1 2.41758C 2.2 2.41758 3.2 2.29672 4 2.05496ZM 5 0C 4.2 1.08791 2.3 1.20879 1 1.20879C 0.4 1.20879 0 1.20879 0 1.20879L 0 2.65936C 0 6.40661 2 9.67034 5 11L 5 0Z"
/>
</defs>
</svg>
)}
</Colors>
</Rotate>
);

38
packages/icons/src/general.js
View File

@ -1,6 +1,5 @@
import React from 'react';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -9,28 +8,25 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="20"
height="20"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<path
fill={calcFill({ fill, disabled, light, colors })}
d="M18,17a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V3A1,1,0,0,1,3,2H17a1,1,0,0,1,1,1ZM17,0H3A3,3,0,0,0,0,3V17a3,3,0,0,0,3,3H17a3,3,0,0,0,3-3V3A3,3,0,0,0,17,0ZM10,15a5,5,0,1,1,5-5A5,5,0,0,1,10,15ZM10,4a6,6,0,1,0,6,6A6,6,0,0,0,10,4ZM9,10a1,1,0,1,0,1-1A1,1,0,0,0,9,10Z"
/>
</svg>
)}
</Rotate>
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="20"
height="20"
viewBox="0 0 20 20"
xmlns="http://www.w3.org/2000/svg"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<path
fill={calcFill({ fill, disabled, light, colors })}
d="M18,17a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V3A1,1,0,0,1,3,2H17a1,1,0,0,1,1,1ZM17,0H3A3,3,0,0,0,0,3V17a3,3,0,0,0,3,3H17a3,3,0,0,0,3-3V3A3,3,0,0,0,17,0ZM10,15a5,5,0,1,1,5-5A5,5,0,0,1,10,15ZM10,4a6,6,0,1,0,6,6A6,6,0,0,0,10,4ZM9,10a1,1,0,1,0,1-1A1,1,0,0,0,9,10Z"
/>
</svg>
)}
</Colors>
</Rotate>
);

49
packages/icons/src/health.js
View File

@ -1,36 +1,37 @@
import React from 'react';
import Colors from './colors';
import Rotate from './rotate';
export default ({
healthy = true,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors green orange>
{({ green, orange }) => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="18"
height="18"
viewBox="0 0 18 18"
xmlns="http://www.w3.org/2000/svg"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<g fill-rule="evenodd">
<circle fill={healthy ? green : orange} cx="9" cy="9" r="9" />
<path
fill="#FFF"
d="M9.477 6.603l-.522.443-.444-.443a2.056 2.056 0 1 0-2.908 2.909l3.352 3.352 3.412-3.352c.803-.804.863-2.106.06-2.91a2.105 2.105 0 0 0-2.95 0z"
/>
</g>
</svg>
)}
</Rotate>
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="18"
height="18"
viewBox="0 0 18 18"
xmlns="http://www.w3.org/2000/svg"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<g fill-rule="evenodd">
<circle
fill={healthy ? colors.green : colors.orange}
cx="9"
cy="9"
r="9"
/>
<path
fill="#FFF"
d="M9.477 6.603l-.522.443-.444-.443a2.056 2.056 0 1 0-2.908 2.909l3.352 3.352 3.412-3.352c.803-.804.863-2.106.06-2.91a2.105 2.105 0 0 0-2.95 0z"
/>
</g>
</svg>
)}
</Colors>
</Rotate>
);

110
packages/icons/src/id.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import rndId from 'rnd-id';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -12,64 +11,61 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="18"
height="12"
version="1.1"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<g transform="translate(-2124 441)">
<use
xlinkHref={`#${ids[0]}`}
transform="translate(2124 -441)"
fill={calcFill({ fill, disabled, light, colors })}
/>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(2126 -439)"
fill={calcFill({ fill, disabled, light, colors })}
/>
<use
xlinkHref={`#${ids[2]}`}
transform="translate(2134 -438)"
fill={calcFill({ fill, disabled, light, colors })}
/>
<use
xlinkHref={`#${ids[3]}`}
transform="translate(2134 -436)"
fill={calcFill({ fill, disabled, light, colors })}
/>
<use
xlinkHref={`#${ids[4]}`}
transform="translate(2134 -434)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
<defs>
<path
id={ids[0]}
d="M16 1c.6 0 1 .5 1 1v8c0 .6-.5 1-1 1H2c-.6 0-1-.5-1-1V2c0-.6.5-1 1-1h14zm0-1H2C.9 0 0 .9 0 2v8c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2z"
/>
<path
id={ids[1]}
d="M4.7 1C5.4 1 6 1.6 6 2.3v2.5c0 .7-.6 1.3-1.3 1.3H2.3C1.6 6.1 1 5.5 1 4.8V2.3C1 1.6 1.6 1 2.3 1h2.4zm0-1H2.3C1 0 0 1 0 2.3v2.3c0 1.3 1 2.3 2.3 2.3h2.3C6 7 7 5.9 7 4.6V2.3C7 1 6 0 4.7 0z"
/>
<path id={ids[2]} d="M5 0H0v1h5V0z" />
<path id={ids[3]} d="M6 0H0v1h6V0z" />
<path id={ids[4]} d="M4 0H0v1h4V0z" />
</defs>
</svg>
)}
</Rotate>
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="18"
height="12"
version="1.1"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<g transform="translate(-2124 441)">
<use
xlinkHref={`#${ids[0]}`}
transform="translate(2124 -441)"
fill={calcFill({ fill, disabled, light, colors })}
/>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(2126 -439)"
fill={calcFill({ fill, disabled, light, colors })}
/>
<use
xlinkHref={`#${ids[2]}`}
transform="translate(2134 -438)"
fill={calcFill({ fill, disabled, light, colors })}
/>
<use
xlinkHref={`#${ids[3]}`}
transform="translate(2134 -436)"
fill={calcFill({ fill, disabled, light, colors })}
/>
<use
xlinkHref={`#${ids[4]}`}
transform="translate(2134 -434)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
<defs>
<path
id={ids[0]}
d="M16 1c.6 0 1 .5 1 1v8c0 .6-.5 1-1 1H2c-.6 0-1-.5-1-1V2c0-.6.5-1 1-1h14zm0-1H2C.9 0 0 .9 0 2v8c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V2c0-1.1-.9-2-2-2z"
/>
<path
id={ids[1]}
d="M4.7 1C5.4 1 6 1.6 6 2.3v2.5c0 .7-.6 1.3-1.3 1.3H2.3C1.6 6.1 1 5.5 1 4.8V2.3C1 1.6 1.6 1 2.3 1h2.4zm0-1H2.3C1 0 0 1 0 2.3v2.3c0 1.3 1 2.3 2.3 2.3h2.3C6 7 7 5.9 7 4.6V2.3C7 1 6 0 4.7 0z"
/>
<path id={ids[2]} d="M5 0H0v1h5V0z" />
<path id={ids[3]} d="M6 0H0v1h6V0z" />
<path id={ids[4]} d="M4 0H0v1h4V0z" />
</defs>
</svg>
)}
</Colors>
</Rotate>
);

105
packages/icons/src/import.js
View File

@ -1,64 +1,59 @@
import React from 'react';
import rndId from 'rnd-id';
import Colors from './colors';
import Rotate from './rotate';
const ids = [rndId(), rndId(), rndId()];
export default ({ direction = 'down', style = {}, ...rest }) => (
<Colors white text>
{({ white, text }) => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<g transform="translate(-2061 2768)">
<clipPath id={`${ids[0]}`} clipRule="evenodd">
<path fill={white} d="M2061-2768h24v24h-24v-24z" />
</clipPath>
<g clipPath={`url(#${ids[0]})`}>
<path fill={white} d="M2061-2768h24v24h-24v-24z" />
<use
xlinkHref={`#${ids[1]}`}
fill={text}
transform="translate(2061 -2754)"
/>
<use
xlinkHref={`#${ids[2]}`}
fill={text}
transform="translate(2072 -2768)"
/>
<use
xlinkHref={`#${ids[3]}`}
fill={text}
transform="translate(2067.29 -2755)"
/>
</g>
</g>
<defs>
<path
id={`${ids[1]}`}
fillRule="evenodd"
d="M0 0h2v8h20V0h2v10H0V0z"
/>
<path id={`${ids[2]}`} fillRule="evenodd" d="M0 0h2v18H0V0z" />
<path
id={`${ids[3]}`}
fillRule="evenodd"
d="M1.414 0L0 1.414l4.295 4.292.655.658.759.756 5.705-5.705L10 0 5.707 4.293 1.414 0z"
/>
</defs>
</svg>
)}
</Rotate>
export default ({ direction = 'down', style = {}, colors = {}, ...rest }) => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="24"
height="24"
viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<g transform="translate(-2061 2768)">
<clipPath id={`${ids[0]}`} clipRule="evenodd">
<path fill={colors.white} d="M2061-2768h24v24h-24v-24z" />
</clipPath>
<g clipPath={`url(#${ids[0]})`}>
<path fill={colors.white} d="M2061-2768h24v24h-24v-24z" />
<use
xlinkHref={`#${ids[1]}`}
fill={colors.text}
transform="translate(2061 -2754)"
/>
<use
xlinkHref={`#${ids[2]}`}
fill={colors.text}
transform="translate(2072 -2768)"
/>
<use
xlinkHref={`#${ids[3]}`}
fill={colors.text}
transform="translate(2067.29 -2755)"
/>
</g>
</g>
<defs>
<path
id={`${ids[1]}`}
fillRule="evenodd"
d="M0 0h2v8h20V0h2v10H0V0z"
/>
<path id={`${ids[2]}`} fillRule="evenodd" d="M0 0h2v18H0V0z" />
<path
id={`${ids[3]}`}
fillRule="evenodd"
d="M1.414 0L0 1.414l4.295 4.292.655.658.759.756 5.705-5.705L10 0 5.707 4.293 1.414 0z"
/>
</defs>
</svg>
)}
</Colors>
</Rotate>
);

1
packages/icons/src/index.js
View File

@ -36,6 +36,7 @@ export { default as Public } from './public';
export { default as Randomize } from './randomize';
export { default as Reset } from './reset';
export { default as Restart } from './restart';
export { default as Services } from './services';
export { default as Start } from './start';
export { default as Stop } from './stop';
export { default as Storage } from './storage';

202
packages/icons/src/instance-count.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import rndId from 'rnd-id';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -12,113 +11,110 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="17"
height="17"
viewBox="0 0 17 17"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<g transform="translate(-1105 974)">
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="17"
height="17"
viewBox="0 0 17 17"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<g transform="translate(-1105 974)">
<g>
<g>
<use
xlinkHref={`#${ids[0]}`}
transform="translate(1105 -974)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
<g>
<use
xlinkHref={`#${ids[0]}`}
transform="translate(1111 -974)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
<g>
<use
xlinkHref={`#${ids[0]}`}
transform="translate(1117 -974)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
<g>
<use
xlinkHref={`#${ids[0]}`}
transform="translate(1105 -968)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
<g>
<g>
<g>
<use
xlinkHref={`#${ids[0]}`}
transform="translate(1105 -974)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
<g>
<use
xlinkHref={`#${ids[0]}`}
transform="translate(1111 -974)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
<g>
<use
xlinkHref={`#${ids[0]}`}
transform="translate(1117 -974)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
<g>
<use
xlinkHref={`#${ids[0]}`}
transform="translate(1105 -968)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
<g>
<g>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(1111 -968)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
</g>
<g>
<g>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(1117 -968)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
</g>
<g>
<g>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(1105 -962)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
</g>
<g>
<g>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(1111 -962)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
</g>
<g>
<g>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(1117 -962)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
</g>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(1111 -968)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
</g>
<defs>
<path
id={ids[0]}
d="M 2.5 5C 3.88071 5 5 3.88071 5 2.5C 5 1.11929 3.88071 0 2.5 0C 1.11929 0 0 1.11929 0 2.5C 0 3.88071 1.11929 5 2.5 5Z"
/>
<path
id={ids[1]}
d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
/>
</defs>
</svg>
)}
</Rotate>
<g>
<g>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(1117 -968)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
</g>
<g>
<g>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(1105 -962)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
</g>
<g>
<g>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(1111 -962)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
</g>
<g>
<g>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(1117 -962)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
</g>
</g>
</g>
<defs>
<path
id={ids[0]}
d="M 2.5 5C 3.88071 5 5 3.88071 5 2.5C 5 1.11929 3.88071 0 2.5 0C 1.11929 0 0 1.11929 0 2.5C 0 3.88071 1.11929 5 2.5 5Z"
/>
<path
id={ids[1]}
d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
/>
</defs>
</svg>
)}
</Colors>
</Rotate>
);

146
packages/icons/src/instance-type.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import rndId from 'rnd-id';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -12,86 +11,83 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="15"
height="18"
viewBox="0 0 15 18"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<g transform="translate(-1106 1522)">
<g>
<g>
<use
xlinkHref={`#${ids[0]}`}
transform="translate(1108 -1516)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
<g>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(1110 -1514)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
<g>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(1112 -1514)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
<g>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(1114 -1514)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
<g>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(1116 -1514)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
<g>
<use
xlinkHref={`#${ids[2]}`}
transform="translate(1106 -1522)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
</g>
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="15"
height="18"
viewBox="0 0 15 18"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<g transform="translate(-1106 1522)">
<g>
<g>
<use
xlinkHref={`#${ids[0]}`}
transform="translate(1108 -1516)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
<defs>
<path
id={ids[0]}
d="M 10 1L 10 7L 1 7L 1 1L 10 1ZM 10 0L 1 0C 0.5 0 0 0.4 0 1L 0 7C 0 7.5 0.4 8 1 8L 10 8C 10.5 8 11 7.6 11 7L 11 1C 11 0.4 10.6 0 10 0Z"
<g>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(1110 -1514)"
fill={calcFill({ fill, disabled, light, colors })}
/>
<path
id={ids[1]}
d="M 0.5 4C 0.2 4 0 3.8 0 3.5L 0 0.5C 0 0.2 0.2 0 0.5 0C 0.8 0 1 0.2 1 0.5L 1 3.5C 1 3.8 0.8 4 0.5 4Z"
</g>
<g>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(1112 -1514)"
fill={calcFill({ fill, disabled, light, colors })}
/>
<path
id={ids[2]}
d="M 14 4L 11 1L 10 0L 1 0C 0.5 0 0 0.4 0 1L 0 17C 0 17.5 0.4 18 1 18L 14 18C 14.5 18 15 17.6 15 17L 15 5L 14 4ZM 12.6 4L 11 4L 11 2.4L 12.6 4ZM 1 17L 1 1L 10 1L 10 5L 14 5L 14 17L 1 17Z"
</g>
<g>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(1114 -1514)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</defs>
</svg>
)}
</Rotate>
</g>
<g>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(1116 -1514)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
<g>
<use
xlinkHref={`#${ids[2]}`}
transform="translate(1106 -1522)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
</g>
</g>
<defs>
<path
id={ids[0]}
d="M 10 1L 10 7L 1 7L 1 1L 10 1ZM 10 0L 1 0C 0.5 0 0 0.4 0 1L 0 7C 0 7.5 0.4 8 1 8L 10 8C 10.5 8 11 7.6 11 7L 11 1C 11 0.4 10.6 0 10 0Z"
/>
<path
id={ids[1]}
d="M 0.5 4C 0.2 4 0 3.8 0 3.5L 0 0.5C 0 0.2 0.2 0 0.5 0C 0.8 0 1 0.2 1 0.5L 1 3.5C 1 3.8 0.8 4 0.5 4Z"
/>
<path
id={ids[2]}
d="M 14 4L 11 1L 10 0L 1 0C 0.5 0 0 0.4 0 1L 0 17C 0 17.5 0.4 18 1 18L 14 18C 14.5 18 15 17.6 15 17L 15 5L 14 4ZM 12.6 4L 11 4L 11 2.4L 12.6 4ZM 1 17L 1 1L 10 1L 10 5L 14 5L 14 17L 1 17Z"
/>
</defs>
</svg>
)}
</Colors>
</Rotate>
);

40
packages/icons/src/instances.js
View File

@ -1,6 +1,5 @@
import React from 'react';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -9,29 +8,26 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="18"
height="9"
viewBox="0 0 18 9"
xmlns="http://www.w3.org/2000/svg"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<path
fill={calcFill({ fill, disabled, light, colors })}
fillRule="evenodd"
d="M4.5 0a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9m8.59 0c-.375 0-.739.047-1.09.12 2.184.456 3.818 2.239 3.818 4.38S14.184 8.424 12 8.88c.351.073.715.12 1.09.12C15.803 9 18 6.985 18 4.5S15.802 0 13.09 0M14 4.5C14 6.985 11.802 9 9.09 9c-.375 0-.739-.047-1.09-.12 2.184-.456 3.818-2.239 3.818-4.38S10.184.576 8 .12C8.351.047 8.715 0 9.09 0 11.803 0 14 2.015 14 4.5"
/>
</svg>
)}
</Rotate>
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="18"
height="9"
viewBox="0 0 18 9"
xmlns="http://www.w3.org/2000/svg"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<path
fill={calcFill({ fill, disabled, light, colors })}
fillRule="evenodd"
d="M4.5 0a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9m8.59 0c-.375 0-.739.047-1.09.12 2.184.456 3.818 2.239 3.818 4.38S14.184 8.424 12 8.88c.351.073.715.12 1.09.12C15.803 9 18 6.985 18 4.5S15.802 0 13.09 0M14 4.5C14 6.985 11.802 9 9.09 9c-.375 0-.739-.047-1.09-.12 2.184-.456 3.818-2.239 3.818-4.38S10.184.576 8 .12C8.351.047 8.715 0 9.09 0 11.803 0 14 2.015 14 4.5"
/>
</svg>
)}
</Colors>
</Rotate>
);

118
packages/icons/src/loading.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import rndId from 'rnd-id';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -13,68 +12,65 @@ export default ({
secondary = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white primary text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="24"
height="6"
viewBox="0 0 24 6"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<use
xlinkHref={`#${ids[0]}`}
fill={calcFill({
fill,
disabled,
light,
colors: {
...colors,
text: secondary ? colors.text : colors.primary
}
})}
/>
<use
xlinkHref={`#${ids[0]}`}
transform="translate(9)"
opacity=".5"
fill={calcFill({
fill,
disabled,
light,
colors: {
...colors,
text: secondary ? colors.text : colors.primary
}
})}
/>
<use
xlinkHref={`#${ids[0]}`}
transform="translate(18)"
opacity=".25"
fill={calcFill({
fill,
disabled,
light,
colors: {
...colors,
text: secondary ? colors.text : colors.primary
}
})}
/>
<defs>
<path id={ids[0]} fillRule="evenodd" d="M0 0h6v6H0V0z" />
</defs>
</svg>
)}
</Rotate>
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="24"
height="6"
viewBox="0 0 24 6"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<use
xlinkHref={`#${ids[0]}`}
fill={calcFill({
fill,
disabled,
light,
colors: {
...colors,
text: secondary ? colors.text : colors.primary
}
})}
/>
<use
xlinkHref={`#${ids[0]}`}
transform="translate(9)"
opacity=".5"
fill={calcFill({
fill,
disabled,
light,
colors: {
...colors,
text: secondary ? colors.text : colors.primary
}
})}
/>
<use
xlinkHref={`#${ids[0]}`}
transform="translate(18)"
opacity=".25"
fill={calcFill({
fill,
disabled,
light,
colors: {
...colors,
text: secondary ? colors.text : colors.primary
}
})}
/>
<defs>
<path id={ids[0]} fillRule="evenodd" d="M0 0h6v6H0V0z" />
</defs>
</svg>
)}
</Colors>
</Rotate>
);

86
packages/icons/src/login.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import rndId from 'rnd-id';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -12,54 +11,51 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="17"
height="17"
viewBox="0 0 17 17"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<g transform="translate(-1885 179)">
<g>
<g>
<use
xlinkHref={`#${ids[0]}`}
transform="translate(1889 -179)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
<g>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(1885 -175)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
</g>
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="17"
height="17"
viewBox="0 0 17 17"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<g transform="translate(-1885 179)">
<g>
<g>
<use
xlinkHref={`#${ids[0]}`}
transform="translate(1889 -179)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
<defs>
<path
id={ids[0]}
d="M 12 1.00001L 12 16L 1 16L 1 11L 0 11L 0 16C 0 16.6 0.4 17 1 17L 12 17C 12.6 17 13 16.6 13 16L 13 1.00001C 13 0.400006 12.6 6.10352e-06 12 6.10352e-06L 1 6.10352e-06C 0.4 6.10352e-06 0 0.400006 0 1.00001L 0 6.00001L 1 6.00001L 1 1.00001L 12 1.00001Z"
<g>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(1885 -175)"
fill={calcFill({ fill, disabled, light, colors })}
/>
<path
id={ids[1]}
d="M 13.7 4.29999L 13.2 3.9L 8.7 6.10352e-06L 8 0.599997L 11.9 4.00001L 0 4.00001L 0 5.00001L 11.9 5.00001L 8 8.4L 8.7 9.00001L 13.9 4.50001L 13.7 4.29999Z"
/>
</defs>
</svg>
)}
</Rotate>
</g>
</g>
</g>
<defs>
<path
id={ids[0]}
d="M 12 1.00001L 12 16L 1 16L 1 11L 0 11L 0 16C 0 16.6 0.4 17 1 17L 12 17C 12.6 17 13 16.6 13 16L 13 1.00001C 13 0.400006 12.6 6.10352e-06 12 6.10352e-06L 1 6.10352e-06C 0.4 6.10352e-06 0 0.400006 0 1.00001L 0 6.00001L 1 6.00001L 1 1.00001L 12 1.00001Z"
/>
<path
id={ids[1]}
d="M 13.7 4.29999L 13.2 3.9L 8.7 6.10352e-06L 8 0.599997L 11.9 4.00001L 0 4.00001L 0 5.00001L 11.9 5.00001L 8 8.4L 8.7 9.00001L 13.9 4.50001L 13.7 4.29999Z"
/>
</defs>
</svg>
)}
</Colors>
</Rotate>
);

38
packages/icons/src/memory.js
View File

@ -1,6 +1,5 @@
import React from 'react';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -9,28 +8,25 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="21.68"
height="21.68"
viewBox="0 0 21.68 21.68"
xmlns="http://www.w3.org/2000/svg"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<path
fill={calcFill({ fill, disabled, light, colors })}
d="M6.24,11.9,8.36,14l1.42-1.41L7.66,10.49ZM4.12,14l2.12,2.12,1.42-1.41L5.54,12.6ZM8.36,9.78l2.13,2.12,1.41-1.41L9.78,8.36Zm2.13-2.12,2.12,2.12L14,8.36,11.9,6.24Zm2.12-2.13,2.12,2.13,1.41-1.42L14,4.12Zm8.48,0L16.14.59a2,2,0,0,0-2.83,0L.59,13.31a2,2,0,0,0,0,2.83l5,4.95a2,2,0,0,0,2.82,0l1.42-1.41.71.7A1,1,0,0,0,11.9,19l-.71-.71.71-.7.71.7A1,1,0,0,0,14,16.85l-.71-.71.71-.71.71.71a1,1,0,0,0,1.41-1.41L15.43,14l.71-.71.71.71a1,1,0,0,0,1.41-1.41l-.7-.71.7-.71.71.71a1,1,0,0,0,1.41-1.41l-.7-.71,1.41-1.42A2,2,0,0,0,21.09,5.54ZM7,19.68,2,14.73,14.73,2l4.95,5Z"
/>
</svg>
)}
</Rotate>
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="21.68"
height="21.68"
viewBox="0 0 21.68 21.68"
xmlns="http://www.w3.org/2000/svg"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<path
fill={calcFill({ fill, disabled, light, colors })}
d="M6.24,11.9,8.36,14l1.42-1.41L7.66,10.49ZM4.12,14l2.12,2.12,1.42-1.41L5.54,12.6ZM8.36,9.78l2.13,2.12,1.41-1.41L9.78,8.36Zm2.13-2.12,2.12,2.12L14,8.36,11.9,6.24Zm2.12-2.13,2.12,2.13,1.41-1.42L14,4.12Zm8.48,0L16.14.59a2,2,0,0,0-2.83,0L.59,13.31a2,2,0,0,0,0,2.83l5,4.95a2,2,0,0,0,2.82,0l1.42-1.41.71.7A1,1,0,0,0,11.9,19l-.71-.71.71-.7.71.7A1,1,0,0,0,14,16.85l-.71-.71.71-.71.71.71a1,1,0,0,0,1.41-1.41L15.43,14l.71-.71.71.71a1,1,0,0,0,1.41-1.41l-.7-.71.7-.71.71.71a1,1,0,0,0,1.41-1.41l-.7-.71,1.41-1.42A2,2,0,0,0,21.09,5.54ZM7,19.68,2,14.73,14.73,2l4.95,5Z"
/>
</svg>
)}
</Colors>
</Rotate>
);

106
packages/icons/src/metadata.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import rndId from 'rnd-id';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -12,66 +11,63 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="18"
height="11"
viewBox="0 0 18 11"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<g transform="translate(-1884 1236)">
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="18"
height="11"
viewBox="0 0 18 11"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<g transform="translate(-1884 1236)">
<g>
<g>
<g>
<g>
<g>
<use
xlinkHref={`#${ids[0]}`}
transform="translate(1884 -1233.9)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
</g>
<g>
<g>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(1896 -1233.9)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
</g>
<g>
<use
xlinkHref={`#${ids[2]}`}
transform="translate(1891 -1236)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
<use
xlinkHref={`#${ids[0]}`}
transform="translate(1884 -1233.9)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
</g>
<defs>
<path
id={ids[0]}
d="M 5.5 6.79999L 0 3.4L 5.5 6.10352e-06L 6 0.799994L 1.9 3.4L 6 6.00001L 5.5 6.79999Z"
<g>
<g>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(1896 -1233.9)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
</g>
<g>
<use
xlinkHref={`#${ids[2]}`}
transform="translate(1891 -1236)"
fill={calcFill({ fill, disabled, light, colors })}
/>
<path
id={ids[1]}
d="M 0.5 6.79999L 0 6.00001L 4.1 3.4L 0 0.799994L 0.5 6.10352e-06L 6 3.4L 0.5 6.79999Z"
/>
<path id={ids[2]} d="M 1 11L 0 11L 3 0L 4 0L 1 11Z" />
</defs>
</svg>
)}
</Rotate>
</g>
</g>
</g>
<defs>
<path
id={ids[0]}
d="M 5.5 6.79999L 0 3.4L 5.5 6.10352e-06L 6 0.799994L 1.9 3.4L 6 6.00001L 5.5 6.79999Z"
/>
<path
id={ids[1]}
d="M 0.5 6.79999L 0 6.00001L 4.1 3.4L 0 0.799994L 0.5 6.10352e-06L 6 3.4L 0.5 6.79999Z"
/>
<path id={ids[2]} d="M 1 11L 0 11L 3 0L 4 0L 1 11Z" />
</defs>
</svg>
)}
</Colors>
</Rotate>
);

40
packages/icons/src/minus.js
View File

@ -1,6 +1,5 @@
import React from 'react';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -9,29 +8,26 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="8"
height="2"
viewBox="0 0 8 2"
xmlns="http://www.w3.org/2000/svg"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<path
fill={calcFill({ fill, disabled, light, colors })}
d="M0 0h8v2H0z"
fillRule="evenodd"
/>
</svg>
)}
</Rotate>
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="8"
height="2"
viewBox="0 0 8 2"
xmlns="http://www.w3.org/2000/svg"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<path
fill={calcFill({ fill, disabled, light, colors })}
d="M0 0h8v2H0z"
fillRule="evenodd"
/>
</svg>
)}
</Colors>
</Rotate>
);

42
packages/icons/src/name.js
View File

@ -1,6 +1,5 @@
import React from 'react';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -9,30 +8,27 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
viewBox="0 0 16.24 13.55"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
width="17"
height="17"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<path
d="M.24,13.55c-1-2,1.39-6.73,1.52-7C4.47,1.5,6.77-.55,9,.12a2.34,2.34,0,0,1,1.4,1.16c.54,1.06-.26,2.41-1.18,4-.55.91-1.69,3.42-1.78,3.67-.37,1-.88,2.35-.52,2.86.19.28.73.34,1.14.34s1-.77,1.31-1.49c.56-1.48,1.87-4.94,4.1-4.27,1.78.53,1.27,2.56.93,3.91s-.11,1.51-.1,1.52a2.21,2.21,0,0,0,1.95-.24v1c-1.41.73-2.11.72-2.74.21-.88-.71-.48-2.19-.33-2.75.38-1.52.47-2.3-.07-2.46-.73-.22-1.6,1-2.57,3.52-.4,1.1-1.26,2.3-2.48,2.3a2.48,2.48,0,0,1-2.17-.88c-.72-1.05-.14-2.62.38-4,.09-.23,1.3-2.91,1.87-3.87s2.11-3.06.49-3.29S5.18,2.83,2.87,7.16c-1.71,3.21-1.78,5.95-1.62,6.39Z"
fill={calcFill({ fill, disabled, light, colors })}
/>
</svg>
)}
</Rotate>
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
viewBox="0 0 16.24 13.55"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
width="17"
height="17"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<path
d="M.24,13.55c-1-2,1.39-6.73,1.52-7C4.47,1.5,6.77-.55,9,.12a2.34,2.34,0,0,1,1.4,1.16c.54,1.06-.26,2.41-1.18,4-.55.91-1.69,3.42-1.78,3.67-.37,1-.88,2.35-.52,2.86.19.28.73.34,1.14.34s1-.77,1.31-1.49c.56-1.48,1.87-4.94,4.1-4.27,1.78.53,1.27,2.56.93,3.91s-.11,1.51-.1,1.52a2.21,2.21,0,0,0,1.95-.24v1c-1.41.73-2.11.72-2.74.21-.88-.71-.48-2.19-.33-2.75.38-1.52.47-2.3-.07-2.46-.73-.22-1.6,1-2.57,3.52-.4,1.1-1.26,2.3-2.48,2.3a2.48,2.48,0,0,1-2.17-.88c-.72-1.05-.14-2.62.38-4,.09-.23,1.3-2.91,1.87-3.87s2.11-3.06.49-3.29S5.18,2.83,2.87,7.16c-1.71,3.21-1.78,5.95-1.62,6.39Z"
fill={calcFill({ fill, disabled, light, colors })}
/>
</svg>
)}
</Colors>
</Rotate>
);

64
packages/icons/src/network.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import rndId from 'rnd-id';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -12,41 +11,38 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="18"
height="18"
viewBox="0 0 18 18"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<g transform="translate(-1105 710)">
<g>
<use
xlinkHref={`#${ids[0]}`}
transform="translate(1105 -710)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
</g>
<defs>
<path
id={ids[0]}
d="M 15.1685 5.96629C 14.5618 5.96629 13.9551 6.16854 13.4494 6.57303L 11.6292 4.75281C 11.9326 4.24719 12.236 3.64045 12.236 3.03371C 12.236 1.31461 10.9213 1.50686e-09 9.20225 1.50686e-09C 7.48314 1.50686e-09 6.16854 1.31461 6.16854 3.03371C 6.16854 3.64045 6.37078 4.24719 6.77528 4.75281L 4.95506 6.57303C 4.24719 6.16854 3.64045 5.96629 3.03371 5.96629C 1.31461 5.96629 0 7.2809 0 9C 0 10.7191 1.31461 12.0337 3.03371 12.0337C 3.64045 12.0337 4.24719 11.8315 4.75281 11.427L 6.57303 13.2472C 6.26966 13.7528 5.96629 14.3596 5.96629 14.9663C 5.96629 16.6854 7.2809 18 9 18C 10.7191 18 12.0337 16.6854 12.0337 14.9663C 12.0337 14.3596 11.8315 13.7528 11.427 13.2472L 13.2472 11.427C 13.7528 11.7303 14.3596 12.0337 14.9663 12.0337C 16.6854 12.0337 18 10.7191 18 9C 18 7.2809 16.8876 5.96629 15.1685 5.96629ZM 9.10112 12.0337C 8.49438 12.0337 7.88764 12.236 7.38203 12.6404L 5.5618 10.8202C 5.86517 10.3146 6.16854 9.70787 6.16854 9.10112C 6.16854 8.49438 5.96629 7.88764 5.5618 7.38202L 7.38203 5.5618C 7.88764 5.86517 8.49438 6.16854 9.10112 6.16854C 9.70787 6.16854 10.3146 5.96629 10.8202 5.5618L 12.6404 7.38202C 12.3371 7.78652 12.1348 8.39326 12.1348 9C 12.1348 9.60674 12.3371 10.2135 12.7416 10.7191L 10.9214 12.5393C 10.3146 12.236 9.70787 12.0337 9.10112 12.0337ZM 9.10112 0.910112C 10.2135 0.910112 11.1236 1.82022 11.1236 2.93258C 11.1236 4.04494 10.2135 4.95506 9.10112 4.95506C 7.98876 4.95506 7.07865 4.04494 7.07865 2.93258C 7.07865 1.82022 7.98876 0.910112 9.10112 0.910112ZM 1.01124 9C 1.01124 7.88764 1.92135 6.97753 3.03371 6.97753C 4.14607 6.97753 5.05618 7.88764 5.05618 9C 5.05618 10.1124 4.14607 11.0225 3.03371 11.0225C 1.92135 11.0225 1.01124 10.1124 1.01124 9ZM 9.10112 17.0899C 7.98876 17.0899 7.07865 16.1798 7.07865 15.0674C 7.07865 13.9551 7.98876 13.0449 9.10112 13.0449C 10.2135 13.0449 11.1236 13.9551 11.1236 15.0674C 11.1236 16.1798 10.2135 17.0899 9.10112 17.0899ZM 15.1685 11.0225C 14.0562 11.0225 13.1461 10.1124 13.1461 9C 13.1461 7.88764 14.0562 6.97753 15.1685 6.97753C 16.2809 6.97753 17.191 7.88764 17.191 9C 17.191 10.1124 16.2809 11.0225 15.1685 11.0225Z"
/>
</defs>
</svg>
)}
</Rotate>
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="18"
height="18"
viewBox="0 0 18 18"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<g transform="translate(-1105 710)">
<g>
<use
xlinkHref={`#${ids[0]}`}
transform="translate(1105 -710)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
</g>
<defs>
<path
id={ids[0]}
d="M 15.1685 5.96629C 14.5618 5.96629 13.9551 6.16854 13.4494 6.57303L 11.6292 4.75281C 11.9326 4.24719 12.236 3.64045 12.236 3.03371C 12.236 1.31461 10.9213 1.50686e-09 9.20225 1.50686e-09C 7.48314 1.50686e-09 6.16854 1.31461 6.16854 3.03371C 6.16854 3.64045 6.37078 4.24719 6.77528 4.75281L 4.95506 6.57303C 4.24719 6.16854 3.64045 5.96629 3.03371 5.96629C 1.31461 5.96629 0 7.2809 0 9C 0 10.7191 1.31461 12.0337 3.03371 12.0337C 3.64045 12.0337 4.24719 11.8315 4.75281 11.427L 6.57303 13.2472C 6.26966 13.7528 5.96629 14.3596 5.96629 14.9663C 5.96629 16.6854 7.2809 18 9 18C 10.7191 18 12.0337 16.6854 12.0337 14.9663C 12.0337 14.3596 11.8315 13.7528 11.427 13.2472L 13.2472 11.427C 13.7528 11.7303 14.3596 12.0337 14.9663 12.0337C 16.6854 12.0337 18 10.7191 18 9C 18 7.2809 16.8876 5.96629 15.1685 5.96629ZM 9.10112 12.0337C 8.49438 12.0337 7.88764 12.236 7.38203 12.6404L 5.5618 10.8202C 5.86517 10.3146 6.16854 9.70787 6.16854 9.10112C 6.16854 8.49438 5.96629 7.88764 5.5618 7.38202L 7.38203 5.5618C 7.88764 5.86517 8.49438 6.16854 9.10112 6.16854C 9.70787 6.16854 10.3146 5.96629 10.8202 5.5618L 12.6404 7.38202C 12.3371 7.78652 12.1348 8.39326 12.1348 9C 12.1348 9.60674 12.3371 10.2135 12.7416 10.7191L 10.9214 12.5393C 10.3146 12.236 9.70787 12.0337 9.10112 12.0337ZM 9.10112 0.910112C 10.2135 0.910112 11.1236 1.82022 11.1236 2.93258C 11.1236 4.04494 10.2135 4.95506 9.10112 4.95506C 7.98876 4.95506 7.07865 4.04494 7.07865 2.93258C 7.07865 1.82022 7.98876 0.910112 9.10112 0.910112ZM 1.01124 9C 1.01124 7.88764 1.92135 6.97753 3.03371 6.97753C 4.14607 6.97753 5.05618 7.88764 5.05618 9C 5.05618 10.1124 4.14607 11.0225 3.03371 11.0225C 1.92135 11.0225 1.01124 10.1124 1.01124 9ZM 9.10112 17.0899C 7.98876 17.0899 7.07865 16.1798 7.07865 15.0674C 7.07865 13.9551 7.98876 13.0449 9.10112 13.0449C 10.2135 13.0449 11.1236 13.9551 11.1236 15.0674C 11.1236 16.1798 10.2135 17.0899 9.10112 17.0899ZM 15.1685 11.0225C 14.0562 11.0225 13.1461 10.1124 13.1461 9C 13.1461 7.88764 14.0562 6.97753 15.1685 6.97753C 16.2809 6.97753 17.191 7.88764 17.191 9C 17.191 10.1124 16.2809 11.0225 15.1685 11.0225Z"
/>
</defs>
</svg>
)}
</Colors>
</Rotate>
);

64
packages/icons/src/package.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import rndId from 'rnd-id';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -12,41 +11,38 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="17"
height="18"
viewBox="0 0 17 18"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<g transform="translate(-1885 710)">
<g>
<use
xlinkHref={`#${ids[0]}`}
transform="translate(1885 -710)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
</g>
<defs>
<path
id={ids[0]}
d="M 12.9 2.5L 8.5 0L 0 4.79999L 0 13.2L 8.5 18L 17 13.2L 17 4.79999L 12.9 2.5ZM 15 4.79999L 8.5 8.5L 5.4 6.79999L 11.9 3.10001L 15 4.79999ZM 10.9 2.5L 4.4 6.10001L 2 4.79999L 8.5 1.10001L 10.9 2.5ZM 1 5.39999L 4 7.10001L 4 9L 5 10L 5 7.60001L 8 9.29999L 8 16.6L 1 12.6L 1 5.39999ZM 16 5.39999L 16 12.6L 9 16.6L 9 9.29999L 16 5.39999Z"
/>
</defs>
</svg>
)}
</Rotate>
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="17"
height="18"
viewBox="0 0 17 18"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<g transform="translate(-1885 710)">
<g>
<use
xlinkHref={`#${ids[0]}`}
transform="translate(1885 -710)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
</g>
<defs>
<path
id={ids[0]}
d="M 12.9 2.5L 8.5 0L 0 4.79999L 0 13.2L 8.5 18L 17 13.2L 17 4.79999L 12.9 2.5ZM 15 4.79999L 8.5 8.5L 5.4 6.79999L 11.9 3.10001L 15 4.79999ZM 10.9 2.5L 4.4 6.10001L 2 4.79999L 8.5 1.10001L 10.9 2.5ZM 1 5.39999L 4 7.10001L 4 9L 5 10L 5 7.60001L 8 9.29999L 8 16.6L 1 12.6L 1 5.39999ZM 16 5.39999L 16 12.6L 9 16.6L 9 9.29999L 16 5.39999Z"
/>
</defs>
</svg>
)}
</Colors>
</Rotate>
);

40
packages/icons/src/plus.js
View File

@ -1,6 +1,5 @@
import React from 'react';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -9,29 +8,26 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="8"
height="8"
viewBox="0 0 8 8"
xmlns="http://www.w3.org/2000/svg"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<path
fill={calcFill({ fill, disabled, light, colors })}
d="M3 3H0v2h3v3h2V5h3V3H5V0H3v3z"
fillRule="evenodd"
/>
</svg>
)}
</Rotate>
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="8"
height="8"
viewBox="0 0 8 8"
xmlns="http://www.w3.org/2000/svg"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<path
fill={calcFill({ fill, disabled, light, colors })}
d="M3 3H0v2h3v3h2V5h3V3H5V0H3v3z"
fillRule="evenodd"
/>
</svg>
)}
</Colors>
</Rotate>
);

38
packages/icons/src/private.js
View File

@ -1,6 +1,5 @@
import React from 'react';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -9,28 +8,25 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 12 16"
width="12"
height="16"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<path
fill={calcFill({ fill, disabled, light, colors })}
d="M10,6V4A4,4,0,0,0,2,4V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6ZM4,4c0-1.65.35-2,2-2s2,.35,2,2V6H4Zm6,9a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1ZM6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Z"
/>
</svg>
)}
</Rotate>
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 12 16"
width="12"
height="16"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<path
fill={calcFill({ fill, disabled, light, colors })}
d="M10,6V4A4,4,0,0,0,2,4V6H2A2,2,0,0,0,0,8v6a2,2,0,0,0,2,2h8a2,2,0,0,0,2-2V8A2,2,0,0,0,10,6ZM4,4c0-1.65.35-2,2-2s2,.35,2,2V6H4Zm6,9a1,1,0,0,1-1,1H3a1,1,0,0,1-1-1V9A1,1,0,0,1,3,8H9a1,1,0,0,1,1,1ZM6,13H6a1,1,0,0,1-1-1V10A1,1,0,0,1,6,9H6a1,1,0,0,1,1,1v2A1,1,0,0,1,6,13Z"
/>
</svg>
)}
</Colors>
</Rotate>
);

40
packages/icons/src/public.js
View File

@ -1,6 +1,5 @@
import React from 'react';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -9,29 +8,26 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
viewBox="0 0 12 16"
width="12"
height="16"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<g>
<path
fill={calcFill({ fill, disabled, light, colors })}
d="M6 13a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1 1 1 0 0 1 1 1v2a1 1 0 0 1-1 1zm4-7V4a4 4 0 0 0-8 0h2c0-1.65.35-2 2-2s2 .35 2 2v2H2a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2zm0 7a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1z"
/>
</g>
</svg>
)}
</Rotate>
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
viewBox="0 0 12 16"
width="12"
height="16"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<g>
<path
fill={calcFill({ fill, disabled, light, colors })}
d="M6 13a1 1 0 0 1-1-1v-2a1 1 0 0 1 1-1 1 1 0 0 1 1 1v2a1 1 0 0 1-1 1zm4-7V4a4 4 0 0 0-8 0h2c0-1.65.35-2 2-2s2 .35 2 2v2H2a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2h8a2 2 0 0 0 2-2V8a2 2 0 0 0-2-2zm0 7a1 1 0 0 1-1 1H3a1 1 0 0 1-1-1V9a1 1 0 0 1 1-1h6a1 1 0 0 1 1 1z"
/>
</g>
</svg>
)}
</Colors>
</Rotate>
);

42
packages/icons/src/randomize.js
View File

@ -1,6 +1,5 @@
import React from 'react';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -9,30 +8,27 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
viewBox="0 0 18.22 18.22"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
width="17"
height="17"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<path
d="M6.32,1l4.55,5.31L5.56,10.87,1,5.56,6.32,1m0-1a1,1,0,0,0-.65.24L.35,4.8A1,1,0,0,0,.24,6.21L4.8,11.52a1,1,0,0,0,1.41.11l5.31-4.56a1,1,0,0,0,.11-1.4L7.07.35A1,1,0,0,0,6.32,0Zm4.14,8.65,6.76,1.81-1.8,6.76-6.77-1.8,1.81-6.77m0-1a1,1,0,0,0-1,.74l-1.8,6.77a1,1,0,0,0,.7,1.22l6.77,1.81a1.09,1.09,0,0,0,.26,0,1,1,0,0,0,1-.74l1.81-6.77a1,1,0,0,0-.71-1.22l-6.77-1.8a.73.73,0,0,0-.25,0ZM6.86,3.17a1,1,0,1,0-.11,1.41A1,1,0,0,0,6.86,3.17Zm2,2.28A1,1,0,1,0,8.7,6.86,1,1,0,0,0,8.81,5.45Zm-2.28,2a1,1,0,1,0-.11,1.41A1,1,0,0,0,6.53,7.4ZM4.58,5.12a1,1,0,1,0-.11,1.41A1,1,0,0,0,4.58,5.12Zm6.33,5.72a1,1,0,1,0,1.22-.71A1,1,0,0,0,10.91,10.84ZM13,14.51A1,1,0,1,0,15,15,1,1,0,0,0,13,14.51Z"
fill={calcFill({ fill, disabled, light, colors })}
/>
</svg>
)}
</Rotate>
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
viewBox="0 0 18.22 18.22"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
width="17"
height="17"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<path
d="M6.32,1l4.55,5.31L5.56,10.87,1,5.56,6.32,1m0-1a1,1,0,0,0-.65.24L.35,4.8A1,1,0,0,0,.24,6.21L4.8,11.52a1,1,0,0,0,1.41.11l5.31-4.56a1,1,0,0,0,.11-1.4L7.07.35A1,1,0,0,0,6.32,0Zm4.14,8.65,6.76,1.81-1.8,6.76-6.77-1.8,1.81-6.77m0-1a1,1,0,0,0-1,.74l-1.8,6.77a1,1,0,0,0,.7,1.22l6.77,1.81a1.09,1.09,0,0,0,.26,0,1,1,0,0,0,1-.74l1.81-6.77a1,1,0,0,0-.71-1.22l-6.77-1.8a.73.73,0,0,0-.25,0ZM6.86,3.17a1,1,0,1,0-.11,1.41A1,1,0,0,0,6.86,3.17Zm2,2.28A1,1,0,1,0,8.7,6.86,1,1,0,0,0,8.81,5.45Zm-2.28,2a1,1,0,1,0-.11,1.41A1,1,0,0,0,6.53,7.4ZM4.58,5.12a1,1,0,1,0-.11,1.41A1,1,0,0,0,4.58,5.12Zm6.33,5.72a1,1,0,1,0,1.22-.71A1,1,0,0,0,10.91,10.84ZM13,14.51A1,1,0,1,0,15,15,1,1,0,0,0,13,14.51Z"
fill={calcFill({ fill, disabled, light, colors })}
/>
</svg>
)}
</Colors>
</Rotate>
);

66
packages/icons/src/reset.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import rndId from 'rnd-id';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -12,42 +11,39 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="20"
height="21"
viewBox="0 0 20 21"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<g transform="translate(17997 -18577)">
<g>
<use
xlinkHref={`#${ids[0]}`}
transform="matrix(0.866025 0.5 -0.5 0.866025 -17988.7 18577.9)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
</g>
<defs>
<path
id={ids[0]}
fillRule="evenodd"
d="M 5.39661 3.57718L 5.3977 5.34469L 10.0255 2.67281L 5.39715 0L 5.39832 2.00201C 2.33086 2.5484 0.00065755 5.23112 0 8.45654C 0.000380483 12.0783 2.93556 15.0137 6.55562 15.0143C 10.1774 15.014 13.1128 12.0788 13.1124 8.45702L 11.5697 8.45687C 11.5697 11.2264 9.32527 13.4717 6.55578 13.4716C 3.78629 13.4716 1.54268 11.2262 1.5427 8.45669C 1.54135 6.08718 3.18616 4.10012 5.39661 3.57718Z"
/>
</defs>
</svg>
)}
</Rotate>
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="20"
height="21"
viewBox="0 0 20 21"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<g transform="translate(17997 -18577)">
<g>
<use
xlinkHref={`#${ids[0]}`}
transform="matrix(0.866025 0.5 -0.5 0.866025 -17988.7 18577.9)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
</g>
<defs>
<path
id={ids[0]}
fillRule="evenodd"
d="M 5.39661 3.57718L 5.3977 5.34469L 10.0255 2.67281L 5.39715 0L 5.39832 2.00201C 2.33086 2.5484 0.00065755 5.23112 0 8.45654C 0.000380483 12.0783 2.93556 15.0137 6.55562 15.0143C 10.1774 15.014 13.1128 12.0788 13.1124 8.45702L 11.5697 8.45687C 11.5697 11.2264 9.32527 13.4717 6.55578 13.4716C 3.78629 13.4716 1.54268 11.2262 1.5427 8.45669C 1.54135 6.08718 3.18616 4.10012 5.39661 3.57718Z"
/>
</defs>
</svg>
)}
</Colors>
</Rotate>
);

34
packages/icons/src/services.js Normal file
View File

@ -0,0 +1,34 @@
import React from 'react';
import Rotate from './rotate';
import calcFill from './fill';
export default ({
fill = null,
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="15"
height="15"
viewBox="0 0 15 15"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<g data-name="Layer 2">
<path
fill={calcFill({ fill, disabled, light, colors })}
d="M6 5V4h5v1zm5 2V6H6v1zm0 2V8H6v1zm2-7H4v9h9V2m1-2a1 1 0 0 1 1 1v11a1 1 0 0 1-1 1H2V1a1 1 0 0 1 1-1zm0 14H1V2H0v12a1 1 0 0 0 1 1h13z"
data-name="Layer 1"
/>
</g>
</svg>
)}
</Rotate>
);

98
packages/icons/src/start.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import rndId from 'rnd-id';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -12,58 +11,55 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="15"
height="15"
version="1.1"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<g transform="translate(18292 -19563)">
<mask id={ids[0]}>
<rect
fill="#fff"
x={-1}
y={-1}
width={15}
height={15}
transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
/>
<use
xlinkHref={`#${ids[1]}`}
fill="#000"
transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
/>
</mask>
<g mask={`url(#${ids[0]}`}>
<use
xlinkHref={`#${ids[2]}`}
transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
</g>
<defs>
<path
id={ids[1]}
d="M5.595 1.93a1 1 0 0 1 1.81 0l4.056 8.645A1 1 0 0 1 10.556 12H2.444a1 1 0 0 1-.905-1.425L5.595 1.93z"
/>
<path
id={ids[2]}
d="M1.54 10.575l-1.812-.85 1.811.85zM7.404 1.93l-1.81.85 1.81-.85zm-1.81.85l4.055 8.645 3.621-1.7-4.055-8.644-3.621 1.698zm4.96 7.22h-8.11v4h8.11v-4zM3.35 11.425l4.055-8.646-3.621-1.698-4.056 8.645 3.622 1.699zM2.444 10a1 1 0 0 1 .906 1.425l-3.622-1.7C-1.205 11.716.247 14 2.444 14v-4zm7.206 1.425A1 1 0 0 1 10.555 10v4c2.198 0 3.65-2.285 2.716-4.274l-3.62 1.699zM9.216 1.08c-1.08-2.302-4.353-2.302-5.432 0l3.621 1.698a1 1 0 0 1-1.81 0l3.621-1.698z"
/>
</defs>
</svg>
)}
</Rotate>
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="15"
height="15"
version="1.1"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<g transform="translate(18292 -19563)">
<mask id={ids[0]}>
<rect
fill="#fff"
x={-1}
y={-1}
width={15}
height={15}
transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
/>
<use
xlinkHref={`#${ids[1]}`}
fill="#000"
transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
/>
</mask>
<g mask={`url(#${ids[0]}`}>
<use
xlinkHref={`#${ids[2]}`}
transform="matrix(6.12323e-17 1 -1 6.12323e-17 -18278 19564)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
</g>
<defs>
<path
id={ids[1]}
d="M5.595 1.93a1 1 0 0 1 1.81 0l4.056 8.645A1 1 0 0 1 10.556 12H2.444a1 1 0 0 1-.905-1.425L5.595 1.93z"
/>
<path
id={ids[2]}
d="M1.54 10.575l-1.812-.85 1.811.85zM7.404 1.93l-1.81.85 1.81-.85zm-1.81.85l4.055 8.645 3.621-1.7-4.055-8.644-3.621 1.698zm4.96 7.22h-8.11v4h8.11v-4zM3.35 11.425l4.055-8.646-3.621-1.698-4.056 8.645 3.622 1.699zM2.444 10a1 1 0 0 1 .906 1.425l-3.622-1.7C-1.205 11.716.247 14 2.444 14v-4zm7.206 1.425A1 1 0 0 1 10.555 10v4c2.198 0 3.65-2.285 2.716-4.274l-3.62 1.699zM9.216 1.08c-1.08-2.302-4.353-2.302-5.432 0l3.621 1.698a1 1 0 0 1-1.81 0l3.621-1.698z"
/>
</defs>
</svg>
)}
</Colors>
</Rotate>
);

88
packages/icons/src/stop.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import rndId from 'rnd-id';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -12,54 +11,51 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="14"
height="14"
viewBox="0 0 14 14"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<g transform="translate(18113 -18582)">
<g>
<mask id={ids[0]}>
<use
xlinkHref={`#${ids[1]}`}
fill="white"
transform="translate(-18113 18582)"
/>
</mask>
<g mask={`url(#${ids[0]})`}>
<use
xlinkHref={`#${ids[2]}`}
transform="translate(-18113 18582)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
</g>
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="14"
height="14"
viewBox="0 0 14 14"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<g transform="translate(18113 -18582)">
<g>
<mask id={ids[0]}>
<use
xlinkHref={`#${ids[1]}`}
fill="white"
transform="translate(-18113 18582)"
/>
</mask>
<g mask={`url(#${ids[0]})`}>
<use
xlinkHref={`#${ids[2]}`}
transform="translate(-18113 18582)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
<defs>
<path
id={ids[1]}
d="M 0 2C 0 0.895431 0.895431 0 2 0L 12 0C 13.1046 0 14 0.895431 14 2L 14 12C 14 13.1046 13.1046 14 12 14L 2 14C 0.895431 14 0 13.1046 0 12L 0 2Z"
/>
<path
id={ids[2]}
d="M 2 2L 12 2L 12 -2L 2 -2L 2 2ZM 12 2L 12 12L 16 12L 16 2L 12 2ZM 12 12L 2 12L 2 16L 12 16L 12 12ZM 2 12L 2 2L -2 2L -2 12L 2 12ZM 2 12L 2 12L -2 12C -2 14.2091 -0.209139 16 2 16L 2 12ZM 12 12L 12 12L 12 16C 14.2091 16 16 14.2091 16 12L 12 12ZM 12 2L 12 2L 16 2C 16 -0.209139 14.2091 -2 12 -2L 12 2ZM 2 -2C -0.209139 -2 -2 -0.209139 -2 2L 2 2L 2 2L 2 -2Z"
/>
</defs>
</svg>
)}
</Rotate>
</g>
</g>
<defs>
<path
id={ids[1]}
d="M 0 2C 0 0.895431 0.895431 0 2 0L 12 0C 13.1046 0 14 0.895431 14 2L 14 12C 14 13.1046 13.1046 14 12 14L 2 14C 0.895431 14 0 13.1046 0 12L 0 2Z"
/>
<path
id={ids[2]}
d="M 2 2L 12 2L 12 -2L 2 -2L 2 2ZM 12 2L 12 12L 16 12L 16 2L 12 2ZM 12 12L 2 12L 2 16L 12 16L 12 12ZM 2 12L 2 2L -2 2L -2 12L 2 12ZM 2 12L 2 12L -2 12C -2 14.2091 -0.209139 16 2 16L 2 12ZM 12 12L 12 12L 12 16C 14.2091 16 16 14.2091 16 12L 12 12ZM 12 2L 12 2L 16 2C 16 -0.209139 14.2091 -2 12 -2L 12 2ZM 2 -2C -0.209139 -2 -2 -0.209139 -2 2L 2 2L 2 2L 2 -2Z"
/>
</defs>
</svg>
)}
</Colors>
</Rotate>
);

38
packages/icons/src/storage.js
View File

@ -1,6 +1,5 @@
import React from 'react';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -9,28 +8,25 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="22"
height="22"
viewBox="0 0 22 22"
xmlns="http://www.w3.org/2000/svg"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<path
fill={calcFill({ fill, disabled, light, colors })}
d="M17,16a1,1,0,1,1,1,1A1,1,0,0,1,17,16ZM7,17H8V15H7ZM5,17H6V15H5ZM3,17H4V15H3Zm14-7a1,1,0,1,1,1,1A1,1,0,0,1,17,10ZM7,11H8V9H7ZM5,11H6V9H5ZM3,11H4V9H3ZM19,4a1,1,0,1,1-1-1A1,1,0,0,1,19,4ZM7,5H8V3H7ZM5,5H6V3H5ZM3,5H4V3H3ZM22,2a2,2,0,0,0-2-2H2A2,2,0,0,0,0,2V6A1.91,1.91,0,0,0,.28,7,1.88,1.88,0,0,0,0,8v4a1.91,1.91,0,0,0,.28,1A1.88,1.88,0,0,0,0,14v4a2,2,0,0,0,2,2H20a2,2,0,0,0,2-2V14a1.88,1.88,0,0,0-.28-1A1.91,1.91,0,0,0,22,12V8a1.88,1.88,0,0,0-.28-1A1.91,1.91,0,0,0,22,6ZM20,18H2V14H20Zm0-6H2V8H20Zm0-6H2V2H20Z"
/>
</svg>
)}
</Rotate>
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="22"
height="22"
viewBox="0 0 22 22"
xmlns="http://www.w3.org/2000/svg"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<path
fill={calcFill({ fill, disabled, light, colors })}
d="M17,16a1,1,0,1,1,1,1A1,1,0,0,1,17,16ZM7,17H8V15H7ZM5,17H6V15H5ZM3,17H4V15H3Zm14-7a1,1,0,1,1,1,1A1,1,0,0,1,17,10ZM7,11H8V9H7ZM5,11H6V9H5ZM3,11H4V9H3ZM19,4a1,1,0,1,1-1-1A1,1,0,0,1,19,4ZM7,5H8V3H7ZM5,5H6V3H5ZM3,5H4V3H3ZM22,2a2,2,0,0,0-2-2H2A2,2,0,0,0,0,2V6A1.91,1.91,0,0,0,.28,7,1.88,1.88,0,0,0,0,8v4a1.91,1.91,0,0,0,.28,1A1.88,1.88,0,0,0,0,14v4a2,2,0,0,0,2,2H20a2,2,0,0,0,2-2V14a1.88,1.88,0,0,0-.28-1A1.91,1.91,0,0,0,22,12V8a1.88,1.88,0,0,0-.28-1A1.91,1.91,0,0,0,22,6ZM20,18H2V14H20Zm0-6H2V8H20Zm0-6H2V2H20Z"
/>
</svg>
)}
</Colors>
</Rotate>
);

86
packages/icons/src/tags.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import rndId from 'rnd-id';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -12,56 +11,53 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="17"
height="17"
viewBox="0 0 17 17"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<g transform="translate(-1885 974)">
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="17"
height="17"
viewBox="0 0 17 17"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<g transform="translate(-1885 974)">
<g>
<g>
<g>
<g>
<g>
<use
xlinkHref={`#${ids[0]}`}
transform="translate(1885 -974)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
</g>
<g>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(1888 -971)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
<use
xlinkHref={`#${ids[0]}`}
transform="translate(1885 -974)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
</g>
<defs>
<path
id={ids[0]}
d="M 7.7 1L 7.8 1L 15.6 8.79999L 15.6 8.89999L 15.6 9L 9.1 15.5L 9 15.5L 8.9 15.5L 1.1 7.70001L 1.1 7.60001L 1.1 1.10001C 1.1 1.00001 1.2 0.899994 1.3 0.899994L 7.7 1ZM 7.7 0L 1.2 0C 0.599997 0 0 0.500012 0 1.20001L 0 7.70001C 0 8.00001 0.100003 8.3 0.300003 8.5L 8.1 16.3C 8.3 16.5 8.6 16.6 8.9 16.6C 9.2 16.6 9.5 16.5 9.7 16.3L 16.2 9.79999C 16.7 9.29999 16.7 8.60001 16.2 8.20001L 8.4 0.399994C 8.3 0.0999939 8 0 7.7 0Z"
<g>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(1888 -971)"
fill={calcFill({ fill, disabled, light, colors })}
/>
<path
id={ids[1]}
d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
/>
</defs>
</svg>
)}
</Rotate>
</g>
</g>
</g>
<defs>
<path
id={ids[0]}
d="M 7.7 1L 7.8 1L 15.6 8.79999L 15.6 8.89999L 15.6 9L 9.1 15.5L 9 15.5L 8.9 15.5L 1.1 7.70001L 1.1 7.60001L 1.1 1.10001C 1.1 1.00001 1.2 0.899994 1.3 0.899994L 7.7 1ZM 7.7 0L 1.2 0C 0.599997 0 0 0.500012 0 1.20001L 0 7.70001C 0 8.00001 0.100003 8.3 0.300003 8.5L 8.1 16.3C 8.3 16.5 8.6 16.6 8.9 16.6C 9.2 16.6 9.5 16.5 9.7 16.3L 16.2 9.79999C 16.7 9.29999 16.7 8.60001 16.2 8.20001L 8.4 0.399994C 8.3 0.0999939 8 0 7.7 0Z"
/>
<path
id={ids[1]}
d="M 2.5 1C 3.3 1 4 1.7 4 2.5C 4 3.3 3.3 4 2.5 4C 1.7 4 1 3.3 1 2.5C 1 1.7 1.7 1 2.5 1ZM 2.5 0C 1.1 0 0 1.1 0 2.5C 0 3.9 1.1 5 2.5 5C 3.9 5 5 3.9 5 2.5C 5 1.1 3.9 0 2.5 0Z"
/>
</defs>
</svg>
)}
</Colors>
</Rotate>
);

118
packages/icons/src/triton.js
View File

@ -1,7 +1,6 @@
import React from 'react';
import rndId from 'rnd-id';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -11,71 +10,70 @@ const TritonBeta = ({
fill = null,
light = false,
disabled = false,
colors = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<svg
width="105"
height="30"
viewBox="0 0 105 30"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
{...rest}
>
<g transform="translate(26223 1404)">
<g>
<g>
<use
xlinkHref={`#${ids[0]}`}
transform="translate(-26177 -1383)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
<g>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(-26223 -1404)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
</g>
<svg
width="105"
height="30"
viewBox="0 0 105 30"
version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlnsXlink="http://www.w3.org/1999/xlink"
{...rest}
>
<g transform="translate(26223 1404)">
<g>
<g>
<use
xlinkHref={`#${ids[0]}`}
transform="translate(-26177 -1383)"
fill={calcFill({ fill, disabled, light, colors })}
/>
</g>
<defs>
<path
id={ids[0]}
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"
<g>
<use
xlinkHref={`#${ids[1]}`}
transform="translate(-26223 -1404)"
fill={calcFill({ fill, disabled, light, colors })}
/>
<path
id={ids[1]}
fillRule="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>
)}
</Colors>
</g>
</g>
</g>
<defs>
<path
id={ids[0]}
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={ids[1]}
fillRule="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>
);
const Triton = ({ fill = null, light = false, disabled = false, ...rest }) => (
<Colors white text grey>
{colors => (
<svg
width="105"
height="19"
viewBox="0 0 105 19"
xmlns="http://www.w3.org/2000/svg"
{...rest}
>
<path
fill={calcFill({ fill, disabled, light, colors })}
fillRule="evenodd"
d="M81 9.502C81 4.256 76.747.004 71.5.004V0C66.253.002 62 4.256 62 9.502S66.253 19 71.5 19 81 14.748 81 9.502zM16.227 1H.773A.773.773 0 0 0 0 1.772v3.094c0 .426.346.772.773.772h4.61c.421 0 .765.336.773.756v10.834c0 .426.346.772.773.772h3.093a.773.773 0 0 0 .773-.772V6.394c0-.426.346-.772.773-.772h4.68a.773.773 0 0 0 .752-.76v-3.09A.773.773 0 0 0 16.227 1zM33 1.772v3.094c0 .426-.35.772-.783.772h-6.723a.778.778 0 0 0-.784.773v10.817c0 .426-.35.772-.783.772h-3.14a.788.788 0 0 1-.726-.472.763.763 0 0 1-.061-.3V5.634C20.002 3.074 22.107 1 24.702 1h7.515c.432 0 .783.346.783.772zM40.167 1h-3.334c-.46 0-.833.346-.833.772v15.456c0 .426.373.772.833.772h3.334c.46 0 .833-.346.833-.772V1.772c0-.426-.373-.772-.833-.772zm3.605 0h15.456c.426 0 .772.346.772.772V4.85a.772.772 0 0 1-.772.772h-4.662a.772.772 0 0 0-.772.772v10.833a.772.772 0 0 1-.772.773H49.93a.775.775 0 0 1-.784-.773V6.394a.772.772 0 0 0-.772-.756h-4.6A.772.772 0 0 1 43 4.866V1.772c0-.426.346-.772.772-.772zM84 1.772A.77.77 0 0 1 84.77 1h11.61c2.55 0 4.618 2.074 4.62 4.634v11.594a.77.77 0 0 1-.769.772H97.15a.77.77 0 0 1-.77-.772V6.394a.77.77 0 0 0-.765-.772H89.39a.77.77 0 0 0-.77.772v10.834a.77.77 0 0 1-.769.772h-3.08a.77.77 0 0 1-.77-.772V1.772zM71.5 5a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9zm31.112-3.854H103v.84h.314v-.753l.551.767.253-.014.551-.764v.764H105V1h-.446l-.551.767L103.49 1H102v.146h.388V2h.228l-.004-.854z"
/>
</svg>
)}
</Colors>
const Triton = ({
fill = null,
light = false,
disabled = false,
colors = {},
...rest
}) => (
<svg
width="105"
height="19"
viewBox="0 0 105 19"
xmlns="http://www.w3.org/2000/svg"
{...rest}
>
<path
fill={calcFill({ fill, disabled, light, colors })}
fillRule="evenodd"
d="M81 9.502C81 4.256 76.747.004 71.5.004V0C66.253.002 62 4.256 62 9.502S66.253 19 71.5 19 81 14.748 81 9.502zM16.227 1H.773A.773.773 0 0 0 0 1.772v3.094c0 .426.346.772.773.772h4.61c.421 0 .765.336.773.756v10.834c0 .426.346.772.773.772h3.093a.773.773 0 0 0 .773-.772V6.394c0-.426.346-.772.773-.772h4.68a.773.773 0 0 0 .752-.76v-3.09A.773.773 0 0 0 16.227 1zM33 1.772v3.094c0 .426-.35.772-.783.772h-6.723a.778.778 0 0 0-.784.773v10.817c0 .426-.35.772-.783.772h-3.14a.788.788 0 0 1-.726-.472.763.763 0 0 1-.061-.3V5.634C20.002 3.074 22.107 1 24.702 1h7.515c.432 0 .783.346.783.772zM40.167 1h-3.334c-.46 0-.833.346-.833.772v15.456c0 .426.373.772.833.772h3.334c.46 0 .833-.346.833-.772V1.772c0-.426-.373-.772-.833-.772zm3.605 0h15.456c.426 0 .772.346.772.772V4.85a.772.772 0 0 1-.772.772h-4.662a.772.772 0 0 0-.772.772v10.833a.772.772 0 0 1-.772.773H49.93a.775.775 0 0 1-.784-.773V6.394a.772.772 0 0 0-.772-.756h-4.6A.772.772 0 0 1 43 4.866V1.772c0-.426.346-.772.772-.772zM84 1.772A.77.77 0 0 1 84.77 1h11.61c2.55 0 4.618 2.074 4.62 4.634v11.594a.77.77 0 0 1-.769.772H97.15a.77.77 0 0 1-.77-.772V6.394a.77.77 0 0 0-.765-.772H89.39a.77.77 0 0 0-.77.772v10.834a.77.77 0 0 1-.769.772h-3.08a.77.77 0 0 1-.77-.772V1.772zM71.5 5a4.5 4.5 0 1 0 0 9 4.5 4.5 0 0 0 0-9zm31.112-3.854H103v.84h.314v-.753l.551.767.253-.014.551-.764v.764H105V1h-.446l-.551.767L103.49 1H102v.146h.388V2h.228l-.004-.854z"
/>
</svg>
);
export default ({ beta = false, direction = 'down', style = {}, ...rest }) => (

38
packages/icons/src/user.js
View File

@ -1,6 +1,5 @@
import React from 'react';
import Colors from './colors';
import Rotate from './rotate';
import calcFill from './fill';
@ -9,28 +8,25 @@ export default ({
light = false,
disabled = false,
direction = 'down',
colors = {},
style = {},
...rest
}) => (
<Colors white text grey>
{colors => (
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="12"
height="12"
viewBox="0 0 12 12"
xmlns="http://www.w3.org/2000/svg"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<path
fill={calcFill({ fill, disabled, light, colors })}
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"
/>
</svg>
)}
</Rotate>
<Rotate direction={direction}>
{({ style: rotateStyle }) => (
<svg
width="12"
height="12"
viewBox="0 0 12 12"
xmlns="http://www.w3.org/2000/svg"
style={{ ...style, ...rotateStyle }}
{...rest}
>
<path
fill={calcFill({ fill, disabled, light, colors })}
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"
/>
</svg>
)}
</Colors>
</Rotate>
);

20
packages/my-joy-beta/package.json
View File

@ -6,14 +6,11 @@
"repository": "github:yldio/joyent-portal",
"main": "build/",
"scripts": {
"dev":
"REACT_APP_GQL_PORT=4000 PORT=3069 REACT_APP_GQL_PROTOCOL=http joyent-react-scripts start",
"dev": "REACT_APP_GQL_PORT=4000 PORT=3069 REACT_APP_GQL_PROTOCOL=http joyent-react-scripts start",
"start": "PORT=3069 joyent-react-scripts start",
"build": "NODE_ENV=production joyent-react-scripts build",
"lint-ci":
"eslint . --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
"lint":
"eslint . --fix --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
"lint-ci": "eslint . --ext .js --ext .md",
"lint": "eslint . --fix --ext .js --ext .md",
"test": "NODE_ENV=test joyent-react-scripts test --env=jsdom",
"test-ci": "npm run test",
"prepublish": "echo 0"
@ -28,7 +25,7 @@
"date-fns": "^1.29.0",
"declarative-redux-form": "^2.0.8",
"joyent-manifest-editor": "^1.4.0",
"joyent-ui-toolkit": "^4.0.1",
"joyent-ui-toolkit": "^4.4.1",
"lodash.find": "^4.6.0",
"lodash.get": "^4.4.2",
"lodash.isstring": "^4.0.1",
@ -40,7 +37,7 @@
"param-case": "^2.1.1",
"prop-types": "^15.6.0",
"react": "^16.2.0",
"react-apollo": "^1.4.16",
"react-apollo": "^2.0.4",
"react-dom": "^16.2.0",
"react-redux": "^5.0.6",
"react-redux-values": "^1.0.2",
@ -50,7 +47,7 @@
"redux-actions": "^2.2.1",
"redux-form": "^7.2.0",
"remcalc": "^1.0.9",
"styled-components": "^2.3.0",
"styled-components": "^2.4.0",
"styled-components-spacing": "^2.1.3",
"styled-flex-component": "^2.1.0",
"title-case": "^2.1.1"
@ -62,9 +59,6 @@
"jest-styled-components": "^4.9.0",
"joyent-react-scripts": "^6.5.1",
"react-test-renderer": "^16.2.0",
"redrun": "^5.10.0",
"serve": "^6.4.1",
"stylelint": "^8.4.0",
"stylelint-config-joyent-portal": "^2.0.1"
"redrun": "^5.10.0"
}
}

3
packages/my-joy-beta/public/index.html
View File

@ -7,13 +7,14 @@
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<title>My Joyent &beta;</title>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="header"></div>
<div id="root"></div>
<script type="text/javascript" src="//localhost:3000/static/js/bundle.js"></script>
</body>
</html>

11
packages/my-joy-beta/src/app.js
View File

@ -1,5 +1,6 @@
import React from 'react';
import { ThemeProvider } from 'styled-components';
import { Provider as ReduxProvider } from 'react-redux';
import { ApolloProvider } from 'react-apollo';
import { theme, RootContainer } from 'joyent-ui-toolkit';
@ -54,11 +55,13 @@ const fullTheme = {
};
export default () => (
<ApolloProvider client={client} store={store}>
<ApolloProvider client={client}>
<ThemeProvider theme={fullTheme}>
<RootContainer>
<Router />
</RootContainer>
<ReduxProvider store={store}>
<RootContainer>
<Router />
</RootContainer>
</ReduxProvider>
</ThemeProvider>
</ApolloProvider>
);

4
packages/my-joy-beta/src/components/instances/key-value.js
View File

@ -8,7 +8,7 @@ import styled from 'styled-components';
import remcalc from 'remcalc';
import titleCase from 'title-case';
import Flex, { FlexItem } from 'styled-flex-component';
import Editor from 'joyent-ui-toolkit/dist/es/editor';
// import Editor from 'joyent-ui-toolkit/dist/es/editor';
import {
Message,
@ -50,7 +50,7 @@ class ValueTextareaField extends PureComponent {
const { input = {}, submitting } = this.props;
return input.value === 'user-script' ? (
<Field name="value" component={Editor} />
<Field name="value" component="textarea" />
) : (
<Textarea resize="vertical" disabled={submitting} fluid />
);

57
packages/my-joy-beta/src/components/navigation/header.js
View File

@ -1,57 +0,0 @@
import React from 'react';
import styled from 'styled-components';
import remcalc from 'remcalc';
import {
Header,
HeaderBrand,
TritonIcon,
DataCenterIcon,
UserIcon,
HeaderNav,
HeaderAnchor,
HeaderItem,
QueryBreakpoints
} from 'joyent-ui-toolkit';
const Logo = styled(TritonIcon)`
padding-top: ${remcalc(11)};
`;
const { Medium } = QueryBreakpoints;
export default () => (
<Header fluid>
<HeaderBrand beta>
<HeaderAnchor to="/">
<Logo beta light alt="Triton" />
</HeaderAnchor>
</HeaderBrand>
<Medium>
<HeaderNav>
<li>
<HeaderAnchor to="/">Compute</HeaderAnchor>
</li>
</HeaderNav>
</Medium>
<Medium>
<HeaderItem>
<HeaderAnchor href="https://my.joyent.com">
Return to existing portal
</HeaderAnchor>
</HeaderItem>
</Medium>
<HeaderItem>
<HeaderAnchor>
<DataCenterIcon light />eu-east-1
</HeaderAnchor>
</HeaderItem>
<Medium>
<HeaderItem>
<HeaderAnchor>
<UserIcon light />Nicola
</HeaderAnchor>
</HeaderItem>
</Medium>
</Header>
);

1
packages/my-joy-beta/src/components/navigation/index.js
View File

@ -1,2 +1 @@
export { default as Header } from './header';
export { default as Menu } from './menu';

5
packages/my-joy-beta/src/containers/create-instance/firewall.js
View File

@ -59,7 +59,8 @@ const Firewall = ({
tagRules={tagRules}
enabled={enabled}
/>
) : null}
) : null
}
</ReduxForm>
) : null}
{proceeded && !expanded ? (
@ -116,7 +117,7 @@ export default compose(
}
}),
props: ({ ownProps, data }) => {
const { enabled, showInactive } = ownProps;
const { showInactive } = ownProps;
const {
firewall_rules_create_machine = [],

6
packages/my-joy-beta/src/router.js
View File

@ -5,8 +5,8 @@ import get from 'lodash.get';
import { PageContainer } from 'joyent-ui-toolkit';
import { Breadcrumb, Menu } from '@containers/navigation';
import { Header } from '@components/navigation';
import Footer from '@components/navigation/footer';
import CreateInstance from '@containers/create-instance';
import {
List as Instances,
@ -19,14 +19,10 @@ import {
Snapshots as InstanceSnapshots,
Resize as InstanceResize
} from '@containers/instances';
import CreateInstance from '@containers/create-instance';
export default () => (
<BrowserRouter>
<PageContainer>
{/* Header */}
<Route path="*" component={Header} />
{/* Breadcrumb */}
<Switch>
<Route

1
packages/my-joy-beta/src/state/reducers/index.js
View File

@ -1 +0,0 @@
export { default as ui } from './ui';

3
packages/my-joy-beta/src/state/reducers/ui.js
View File

@ -1,3 +0,0 @@
import { handleActions } from 'redux-actions';
export default handleActions({}, {});

7
packages/my-joy-beta/src/state/state.js
View File

@ -1,7 +0,0 @@
export default {
ui: {
sections: {
instances: ['summary', 'tags', 'metadata', 'snapshots']
}
}
};

69
packages/my-joy-beta/src/state/store.js
View File

@ -1,66 +1,45 @@
import { reduxBatch } from '@manaflair/redux-batch';
import { createStore, combineReducers, applyMiddleware, compose } from 'redux';
import { createStore, combineReducers, compose } from 'redux';
import { reducer as formReducer } from 'redux-form';
import { ApolloClient, createNetworkInterface } from 'react-apollo';
import { ApolloClient } from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { reducer as valuesReducer } from 'react-redux-values';
import { ui } from './reducers';
import state from './state';
const GLOBAL =
typeof window === 'object'
? window
: {
location: {
hostname: '0.0.0.0'
}
};
const GQL_PORT = process.env.REACT_APP_GQL_PORT || 443;
const GQL_PROTOCOL = process.env.REACT_APP_GQL_PROTOCOL || 'https';
const GQL_HOSTNAME =
process.env.REACT_APP_GQL_HOSTNAME || GLOBAL.location.hostname;
const {
REACT_APP_GQL_PORT = 443,
REACT_APP_GQL_PROTOCOL = 'https',
REACT_APP_GQL_HOSTNAME = window.location.hostname
} = process.env;
export const client = new ApolloClient({
dataIdFromObject: o => {
const id = o.id
? o.id
: o.slug
? o.slug
: o.uuid
? o.uuid
: o.timestamp
? o.timestamp
: o.name && o.instance
? `${o.name}-${o.instance}`
: o.name
? o.name
: o.time && o.value
? `${o.time}-${o.value}`
: 'apollo-cache-key-not-defined';
return `${o.__typename}:${id}`;
},
networkInterface: createNetworkInterface({
uri: `${GQL_PROTOCOL}://${GQL_HOSTNAME}:${GQL_PORT}/graphql`
cache: new InMemoryCache(),
link: new HttpLink({
uri: `${REACT_APP_GQL_PROTOCOL}://${REACT_APP_GQL_HOSTNAME}:${REACT_APP_GQL_PORT}/graphql`
})
});
const initialState = {
ui: {
sections: {
instances: ['summary', 'tags', 'metadata', 'snapshots']
}
}
};
export const store = createStore(
combineReducers({
values: valuesReducer,
apollo: client.reducer(),
form: formReducer,
ui
ui: (state = {}) => state
}),
state, // Initial state
initialState,
compose(
reduxBatch,
applyMiddleware(client.middleware()),
// If you are using the devToolsExtension, you can add it here also
// eslint-disable-next-line no-negated-condition
typeof GLOBAL.__REDUX_DEVTOOLS_EXTENSION__ !== 'undefined'
? GLOBAL.__REDUX_DEVTOOLS_EXTENSION__()
typeof window.__REDUX_DEVTOOLS_EXTENSION__ !== 'undefined'
? window.__REDUX_DEVTOOLS_EXTENSION__()
: f => f
)
);

3
packages/navigation/.babelrc Normal file
View File

@ -0,0 +1,3 @@
{
"presets": ["joyent-portal"]
}

2
packages/navigation/.eslintignore Normal file
View File

@ -0,0 +1,2 @@
build
dist

13
packages/navigation/.eslintrc Normal file
View File

@ -0,0 +1,13 @@
{
"extends": "joyent-portal",
"rules": {
"no-console": 0,
"new-cap": 0,
"camelcase": 1,
// temp
"no-undef": 1,
"no-debugger": 1,
"no-negated-condition": 0,
"jsx-a11y/href-no-hash": 0
}
}

62
packages/navigation/.gitignore vendored Normal file
View File

@ -0,0 +1,62 @@
# Logs
logs
*.log
npm-debug.log*
yarn-debug.log*
yarn-error.log*
# Runtime data
pids
*.pid
*.seed
*.pid.lock
# Directory for instrumented libs generated by jscoverage/JSCover
lib-cov
# Coverage directory used by tools like istanbul
coverage
# nyc test coverage
.nyc_output
# Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files)
.grunt
# Bower dependency directory (https://bower.io/)
bower_components
# node-waf configuration
.lock-wscript
# Compiled binary addons (http://nodejs.org/api/addons.html)
build/Release
# Dependency directories
node_modules/
jspm_packages/
# Typescript v1 declaration files
typings/
# Optional npm cache directory
.npm
# Optional eslint cache
.eslintcache
# Optional REPL history
.node_repl_history
# Output of 'npm pack'
*.tgz
# Yarn Integrity file
.yarn-integrity
# dotenv environment variables file
.env
.env.js
.DS_Store
build

3
packages/navigation/.npmignore Normal file
View File

@ -0,0 +1,3 @@
*
!build/**
!lib/**

0
packages/navigation/.yarnclean Normal file
View File

373
packages/navigation/LICENSE Normal file
View File

@ -0,0 +1,373 @@
Mozilla Public License Version 2.0
==================================
1. Definitions
--------------
1.1. "Contributor"
means each individual or legal entity that creates, contributes to
the creation of, or owns Covered Software.
1.2. "Contributor Version"
means the combination of the Contributions of others (if any) used
by a Contributor and that particular Contributor's Contribution.
1.3. "Contribution"
means Covered Software of a particular Contributor.
1.4. "Covered Software"
means Source Code Form to which the initial Contributor has attached
the notice in Exhibit A, the Executable Form of such Source Code
Form, and Modifications of such Source Code Form, in each case
including portions thereof.
1.5. "Incompatible With Secondary Licenses"
means
(a) that the initial Contributor has attached the notice described
in Exhibit B to the Covered Software; or
(b) that the Covered Software was made available under the terms of
version 1.1 or earlier of the License, but not also under the
terms of a Secondary License.
1.6. "Executable Form"
means any form of the work other than Source Code Form.
1.7. "Larger Work"
means a work that combines Covered Software with other material, in
a separate file or files, that is not Covered Software.
1.8. "License"
means this document.
1.9. "Licensable"
means having the right to grant, to the maximum extent possible,
whether at the time of the initial grant or subsequently, any and
all of the rights conveyed by this License.
1.10. "Modifications"
means any of the following:
(a) any file in Source Code Form that results from an addition to,
deletion from, or modification of the contents of Covered
Software; or
(b) any new file in Source Code Form that contains any Covered
Software.
1.11. "Patent Claims" of a Contributor
means any patent claim(s), including without limitation, method,
process, and apparatus claims, in any patent Licensable by such
Contributor that would be infringed, but for the grant of the
License, by the making, using, selling, offering for sale, having
made, import, or transfer of either its Contributions or its
Contributor Version.
1.12. "Secondary License"
means either the GNU General Public License, Version 2.0, the GNU
Lesser General Public License, Version 2.1, the GNU Affero General
Public License, Version 3.0, or any later versions of those
licenses.
1.13. "Source Code Form"
means the form of the work preferred for making modifications.
1.14. "You" (or "Your")
means an individual or a legal entity exercising rights under this
License. For legal entities, "You" includes any entity that
controls, is controlled by, or is under common control with You. For
purposes of this definition, "control" means (a) the power, direct
or indirect, to cause the direction or management of such entity,
whether by contract or otherwise, or (b) ownership of more than
fifty percent (50%) of the outstanding shares or beneficial
ownership of such entity.
2. License Grants and Conditions
--------------------------------
2.1. Grants
Each Contributor hereby grants You a world-wide, royalty-free,
non-exclusive license:
(a) under intellectual property rights (other than patent or trademark)
Licensable by such Contributor to use, reproduce, make available,
modify, display, perform, distribute, and otherwise exploit its
Contributions, either on an unmodified basis, with Modifications, or
as part of a Larger Work; and
(b) under Patent Claims of such Contributor to make, use, sell, offer
for sale, have made, import, and otherwise transfer either its
Contributions or its Contributor Version.
2.2. Effective Date
The licenses granted in Section 2.1 with respect to any Contribution
become effective for each Contribution on the date the Contributor first
distributes such Contribution.
2.3. Limitations on Grant Scope
The licenses granted in this Section 2 are the only rights granted under
this License. No additional rights or licenses will be implied from the
distribution or licensing of Covered Software under this License.
Notwithstanding Section 2.1(b) above, no patent license is granted by a
Contributor:
(a) for any code that a Contributor has removed from Covered Software;
or
(b) for infringements caused by: (i) Your and any other third party's
modifications of Covered Software, or (ii) the combination of its
Contributions with other software (except as part of its Contributor
Version); or
(c) under Patent Claims infringed by Covered Software in the absence of
its Contributions.
This License does not grant any rights in the trademarks, service marks,
or logos of any Contributor (except as may be necessary to comply with
the notice requirements in Section 3.4).
2.4. Subsequent Licenses
No Contributor makes additional grants as a result of Your choice to
distribute the Covered Software under a subsequent version of this
License (see Section 10.2) or under the terms of a Secondary License (if
permitted under the terms of Section 3.3).
2.5. Representation
Each Contributor represents that the Contributor believes its
Contributions are its original creation(s) or it has sufficient rights
to grant the rights to its Contributions conveyed by this License.
2.6. Fair Use
This License is not intended to limit any rights You have under
applicable copyright doctrines of fair use, fair dealing, or other
equivalents.
2.7. Conditions
Sections 3.1, 3.2, 3.3, and 3.4 are conditions of the licenses granted
in Section 2.1.
3. Responsibilities
-------------------
3.1. Distribution of Source Form
All distribution of Covered Software in Source Code Form, including any
Modifications that You create or to which You contribute, must be under
the terms of this License. You must inform recipients that the Source
Code Form of the Covered Software is governed by the terms of this
License, and how they can obtain a copy of this License. You may not
attempt to alter or restrict the recipients' rights in the Source Code
Form.
3.2. Distribution of Executable Form
If You distribute Covered Software in Executable Form then:
(a) such Covered Software must also be made available in Source Code
Form, as described in Section 3.1, and You must inform recipients of
the Executable Form how they can obtain a copy of such Source Code
Form by reasonable means in a timely manner, at a charge no more
than the cost of distribution to the recipient; and
(b) You may distribute such Executable Form under the terms of this
License, or sublicense it under different terms, provided that the
license for the Executable Form does not attempt to limit or alter
the recipients' rights in the Source Code Form under this License.
3.3. Distribution of a Larger Work
You may create and distribute a Larger Work under terms of Your choice,
provided that You also comply with the requirements of this License for
the Covered Software. If the Larger Work is a combination of Covered
Software with a work governed by one or more Secondary Licenses, and the
Covered Software is not Incompatible With Secondary Licenses, this
License permits You to additionally distribute such Covered Software
under the terms of such Secondary License(s), so that the recipient of
the Larger Work may, at their option, further distribute the Covered
Software under the terms of either this License or such Secondary
License(s).
3.4. Notices
You may not remove or alter the substance of any license notices
(including copyright notices, patent notices, disclaimers of warranty,
or limitations of liability) contained within the Source Code Form of
the Covered Software, except that You may alter any license notices to
the extent required to remedy known factual inaccuracies.
3.5. Application of Additional Terms
You may choose to offer, and to charge a fee for, warranty, support,
indemnity or liability obligations to one or more recipients of Covered
Software. However, You may do so only on Your own behalf, and not on
behalf of any Contributor. You must make it absolutely clear that any
such warranty, support, indemnity, or liability obligation is offered by
You alone, and You hereby agree to indemnify every Contributor for any
liability incurred by such Contributor as a result of warranty, support,
indemnity or liability terms You offer. You may include additional
disclaimers of warranty and limitations of liability specific to any
jurisdiction.
4. Inability to Comply Due to Statute or Regulation
---------------------------------------------------
If it is impossible for You to comply with any of the terms of this
License with respect to some or all of the Covered Software due to
statute, judicial order, or regulation then You must: (a) comply with
the terms of this License to the maximum extent possible; and (b)
describe the limitations and the code they affect. Such description must
be placed in a text file included with all distributions of the Covered
Software under this License. Except to the extent prohibited by statute
or regulation, such description must be sufficiently detailed for a
recipient of ordinary skill to be able to understand it.
5. Termination
--------------
5.1. The rights granted under this License will terminate automatically
if You fail to comply with any of its terms. However, if You become
compliant, then the rights granted under this License from a particular
Contributor are reinstated (a) provisionally, unless and until such
Contributor explicitly and finally terminates Your grants, and (b) on an
ongoing basis, if such Contributor fails to notify You of the
non-compliance by some reasonable means prior to 60 days after You have
come back into compliance. Moreover, Your grants from a particular
Contributor are reinstated on an ongoing basis if such Contributor
notifies You of the non-compliance by some reasonable means, this is the
first time You have received notice of non-compliance with this License
from such Contributor, and You become compliant prior to 30 days after
Your receipt of the notice.
5.2. If You initiate litigation against any entity by asserting a patent
infringement claim (excluding declaratory judgment actions,
counter-claims, and cross-claims) alleging that a Contributor Version
directly or indirectly infringes any patent, then the rights granted to
You by any and all Contributors for the Covered Software under Section
2.1 of this License shall terminate.
5.3. In the event of termination under Sections 5.1 or 5.2 above, all
end user license agreements (excluding distributors and resellers) which
have been validly granted by You or Your distributors under this License
prior to termination shall survive termination.
************************************************************************
* *
* 6. Disclaimer of Warranty *
* ------------------------- *
* *
* Covered Software is provided under this License on an "as is" *
* basis, without warranty of any kind, either expressed, implied, or *
* statutory, including, without limitation, warranties that the *
* Covered Software is free of defects, merchantable, fit for a *
* particular purpose or non-infringing. The entire risk as to the *
* quality and performance of the Covered Software is with You. *
* Should any Covered Software prove defective in any respect, You *
* (not any Contributor) assume the cost of any necessary servicing, *
* repair, or correction. This disclaimer of warranty constitutes an *
* essential part of this License. No use of any Covered Software is *
* authorized under this License except under this disclaimer. *
* *
************************************************************************
************************************************************************
* *
* 7. Limitation of Liability *
* -------------------------- *
* *
* Under no circumstances and under no legal theory, whether tort *
* (including negligence), contract, or otherwise, shall any *
* Contributor, or anyone who distributes Covered Software as *
* permitted above, be liable to You for any direct, indirect, *
* special, incidental, or consequential damages of any character *
* including, without limitation, damages for lost profits, loss of *
* goodwill, work stoppage, computer failure or malfunction, or any *
* and all other commercial damages or losses, even if such party *
* shall have been informed of the possibility of such damages. This *
* limitation of liability shall not apply to liability for death or *
* personal injury resulting from such party's negligence to the *
* extent applicable law prohibits such limitation. Some *
* jurisdictions do not allow the exclusion or limitation of *
* incidental or consequential damages, so this exclusion and *
* limitation may not apply to You. *
* *
************************************************************************
8. Litigation
-------------
Any litigation relating to this License may be brought only in the
courts of a jurisdiction where the defendant maintains its principal
place of business and such litigation shall be governed by laws of that
jurisdiction, without reference to its conflict-of-law provisions.
Nothing in this Section shall prevent a party's ability to bring
cross-claims or counter-claims.
9. Miscellaneous
----------------
This License represents the complete agreement concerning the subject
matter hereof. If any provision of this License is held to be
unenforceable, such provision shall be reformed only to the extent
necessary to make it enforceable. Any law or regulation which provides
that the language of a contract shall be construed against the drafter
shall not be used to construe this License against a Contributor.
10. Versions of the License
---------------------------
10.1. New Versions
Mozilla Foundation is the license steward. Except as provided in Section
10.3, no one other than the license steward has the right to modify or
publish new versions of this License. Each version will be given a
distinguishing version number.
10.2. Effect of New Versions
You may distribute the Covered Software under the terms of the version
of the License under which You originally received the Covered Software,
or under the terms of any subsequent version published by the license
steward.
10.3. Modified Versions
If you create software not governed by this License, and you want to
create a new license for such software, you may create and use a
modified version of this License if you rename the license and remove
any references to the name of the license steward (except to note that
such modified license differs from this License).
10.4. Distributing Source Code Form that is Incompatible With Secondary
Licenses
If You choose to distribute Source Code Form that is Incompatible With
Secondary Licenses under the terms of this version of the License, the
notice described in Exhibit B of this License must be attached.
Exhibit A - Source Code Form License Notice
-------------------------------------------
This Source Code Form is subject to the terms of the Mozilla Public
License, v. 2.0. If a copy of the MPL was not distributed with this
file, You can obtain one at http://mozilla.org/MPL/2.0/.
If it is not possible or desirable to put the notice in a particular
file, then You may include the notice in a location (such as a LICENSE
file in a relevant directory) where a recipient would be likely to look
for such a notice.
You may add additional accurate notices of copyright ownership.
Exhibit B - "Incompatible With Secondary Licenses" Notice
---------------------------------------------------------
This Source Code Form is "Incompatible With Secondary Licenses", as
defined by the Mozilla Public License, v. 2.0.

1
packages/navigation/README.md Normal file
View File

@ -0,0 +1 @@
# minio-proto-ui

44
packages/navigation/package.json Normal file
View File

@ -0,0 +1,44 @@
{
"name": "joyent-navigation",
"version": "1.0.0",
"license": "MPL-2.0",
"main": "src",
"scripts": {
"dev": "PREACT=1 NODE_ENV=development joyent-react-scripts start",
"build": "PREACT=1 NODE_ENV=production joyent-react-scripts build",
"test": "NODE_ENV=test joyent-react-scripts test",
"test-ci": "npm run test",
"fmt": "prettier --write --single-quote *.md src/**/*.js src/**/*.gql",
"lint-ci": "eslint . --ext .js --ext .md",
"lint": "eslint . --fix --ext .js --ext .md"
},
"dependencies": {
"apollo-cache-inmemory": "^1.1.5",
"apollo-client": "^2.2.0",
"apollo-link": "^1.0.7",
"apollo-link-http": "^1.3.2",
"apollo-link-state": "^0.3.1",
"emotion": "^8.0.12",
"emotion-theming": "^8.0.12",
"graphql-tag": "^2.6.1",
"joyent-icons": "^3.0.0",
"joyent-ui-toolkit": "^4.4.2",
"lodash.chunk": "^4.2.0",
"outy": "^0.1.2",
"param-case": "^2.1.1",
"pascal-case": "^2.0.1",
"preact": "^8.2.7",
"preact-compat": "^3.17.0",
"preact-emotion": "^8.0.12",
"preact-emotion-flexboxgrid": "^1.0.1",
"react-apollo": "^2.0.4",
"remcalc": "^1.0.9"
},
"devDependencies": {
"babel-eslint": "^8.2.1",
"babel-preset-joyent-portal": "^6.0.1",
"eslint": "^4.15.0",
"eslint-config-joyent-portal": "^3.2.0",
"joyent-react-scripts": "^6.5.1"
}
}

24
packages/navigation/public/index.html Normal file
View File

@ -0,0 +1,24 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<style>
@import url('https://fonts.googleapis.com/css?family=Libre+Franklin:400,500,600');
html, body {
margin: 0;
font-display: optional;
font-family: 'Libre Franklin', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
font-weight: 400;
background-color: #F7F7F7;
}
</style>
</head>
<body>
<noscript>
You need to enable JavaScript to run this app.
</noscript>
<div id="header"></div>
</body>
</html>

37
packages/navigation/src/app.js Normal file
View File

@ -0,0 +1,37 @@
import React from 'react';
import { ApolloProvider } from 'react-apollo';
import { ThemeProvider } from 'emotion-theming';
import theme from 'joyent-ui-toolkit/dist/es/theme';
import { client } from './state';
import Header from './header';
const fullTheme = {
...theme,
flexboxgrid: {
gridSize: 12, // rem
gutterWidth: 1.25, // rem
outerMargin: 1.875, // rem
mediaQuery: 'only screen',
container: {
sm: 46, // rem
md: 56, // rem
lg: 59 // rem
},
breakpoints: {
xs: 0, // em
sm: 48, // em
md: 64, // em
lg: 75 // em
}
}
};
export default () => (
<ApolloProvider client={client}>
<ThemeProvider theme={fullTheme}>
<Header />
</ThemeProvider>
</ApolloProvider>
);

14
packages/navigation/src/components/avatar.js Normal file
View File

@ -0,0 +1,14 @@
import React from 'react';
import emotion from 'preact-emotion';
import remcalc from 'remcalc';
const Img = emotion('img')`
width: ${remcalc(24)};
`;
export default props => (
<Img
{...props}
src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAFAAAABQCAYAAACOEfKtAAAACXBIWXMAAAsSAAALEgHS3X78AAALZElEQVR4nN2dfWwbZx3HP/dmO2kaZ0lbm74lXdauY23SUmnaVrZl0GloINWFSf0L1lYgxJhEiCbgP4LE/kCC0moaQ0hoKYOpQ5S52ipWwVi2AW1hG0nXvWhd1mRdW2dKsrqkjd/Oxx93dmzf+XznnN0kX6nq5bnn7fe95/d7fs+rBU3TuJ6I93X2AFuAFqDHCN4CBC2ijwGjxvOg8TwU3D8yVMMq2kKoN4Hxvs4tQASdrHs8zPooOqnR4P6RUQ/ztUVdCIz3dXYAvejEtde8QBgGBoCB4P6Ry7UsqKYEGurZj7ctzS0OAQdqpeY1IXCeEFeKV4A9Xqu3pwQaqjrA/CKuFIeAXq9UW/QiE4B4X2c/cI75TR7AQ8BovK8z4kVmc26BRq86AHR7UaE64yi6WlfdGufUAuN9nXvQXYeFSB7ATmDIaARVoWoCDZV9CmuHdyGhHRg0GoNrVKXC8b7OAXRbstiwN7h/ZMBNAtctcBGTB/CU25bomEA1Gm6Z+c3aF1m85OkQ+FXqmVUPO43upgUO+Fak7vfdlDlfRbUWBgRmGrYmG6RG9Qk1Gu5xksQRgWo0PIDeY+FbmVyzKEnMkdeUyYVE1Wi4Yu9ckUA1Gt5DidouOhLN5IHuXQyo0XCLXVJbAo0vcMDq3aIh0Zq8HLopI38OlVrgADZ+3oIn0Z68HB5So+Gyw76yBKrRcD8ORhgLlkRn5OVQVpUtCVSj4Q7gx07rsuBIdEce6FpoqcrlWqCt3lthwZDonrwcHrJybUwEGpF2VlO3eU9i9eTl0F8aYNUCTZHcYN6SOHfyAO4pbYVFBBpuy5wnROcdid6Ql0Nv4R+lLbAXjzBvSPSWPICdRicLFBBodNOeThRcdxK9Jy+HfEOTCwKdrREobYhLi4eI2amXykb3rUyuAc6nPpDXuKriXOGEPJeyFCCCQaIjAoWGToTVD0LHVxGWmNfFJYBP30Ib+T3Z8RcgPVn0vu4k2pGntCF2fLNqWQy0q9FwRIrEooKmaTn1/dQqprj+hwgb9oHicOY+HUd7/Udkx58zvUpd9NeeRBvyvJQFOChFYr05G2hufUob0j1/Rbj1+84LBFCCCHc8idR90PSq5jaxHHlKG9IdRzyVBYOzHIE9pgLvPAw3bHZeWCnW7a4viXbk3XkYQturz9talnY1Gu7I2cAiSyp1/9yWvJN/P078sq7xN27YyPpNZeYd1+1GjL9PdvSJomDPbaKN2rqRJdhyA7d/4X7riOt2I167SPbszwpDt+RsYH5pTgztQrjjScs8Hnv0YV489jyJxLWi8NbWZXzru708uO87lumyx7ejzYyYwj2xiXY2r4Isr778ElNTE0XhLmX5iZB5LtQDvJwv9L5Tpt5pcvwS+772ABcvfGQry+133sXjf4iaX5x7FnX4e5Zp5kRiBVelnCyPfP1BPjj7nm3WDmV5RUTfGaoXGNpl2bX/4NvfqEgewMl/vcZjj1osaK3bDUqbZZqqbWIl8lq/WFaWSuSBY1laRArsn9C2zRT/+J8Pc3r4zYoF5vDiseeZHL9kChdDXymbxjWJDpxkIXyvKcytLNEjz3L2jHlbYYEs3cVj4eAtpsh//N1vHRcIkEhc4+lfW3T7DWHbdI5JdDo8s5DlhSOHK2ZfimMWaYTm9fnnohZI6yZT5I/PV1bdUrz13zfMhS67rWK6iiS6GNtqTatNYe+/927FdKU49c/XzIEFH0emwAYmjz9uinvXiiysaHVVaDg4TfKFnxaFiT7V0SJ0WRfH5cRA6uWnTWFVybIiayuLkHkuNIgxBzh9ajkki10UryCt7qThxtOO4xf1zlXMqlwdXosWtxzHzhmFshQ1Cmn5Z2pSIIC0zHZ92oS8OgskqpmSEpe6K88NpJbm/LNc+kL9uDaFiv6s6zS+lck1yooUgux+C15NZVlS8MzsyR/EpZ5PPOYh+9+pKl015AHIwdqYIiiWpYhAWTmJELR2eOcC5eYuYMrzfO0gSm/WRRa5NIJ/41oSp7w1vr7QRdv3WkYgOeInMylBBqRlWXxr0xTavfSkQnpMITstIAQ0pJBKoD1pm6//sytJnKitLCJQ5GrL/n8g32h2QqsucMs2BMZs48ycbiAzrpMHoE6IzJz2k01IgE5e8m0f2WkBAC0hkBmTSYwEbPOVlZO1lmVYBExb/AOrP0RcvmrOBSo3d+FrftU2Tio2S0wRMpAaUwBIG/+bolyQ8iSXQ41luSxKkdigOfoUjbdMzKlg5eYu/KETFeNlkzp5QkBDXqUit2cQg3rHkU3oXlaOYGlZFrk9g7xKzRufbMKC/CLUVJbB3HzgEGV2YqWu3E1qyDw0Kwt/I4HPdSIrJx1Fz1yWUa9K+ELF7koq5gPAF06RGPMjB1XkllmbqGUEkhd8+EIZxIDqqKxqZPFv3ojSaDGc07ErR+ABwHrCDtBoJz21hvT5j8p69+LyVSjtIZTGt6l3j+sGGu2kr7STPjfqhSzrcgRGAMulJ6sKaKruHmhZjcxElvTFiwjqVeRVKv5V9j3j9UY2IZH80Ic6ISKtWIa8shVpyawZEKVRHDaAYSkS25JzYwadVkBgDEHSe6JrZxrJxvXCX/vEDx/BfV9SqcFOAM8w/k6A4Q99LPVpdDOB+skEga5kkXlwiEEoOKmkRsNRXG5rm351CX+56OMXpz4xvQv4JNaElrD9ts08vPdemInBtY/RZkYt10e8gtC8DUFugeaNoDTxaP8zXBqf4Pz4VRKpYlsZUCQe+3wr27pnKvqUFtgqRWJDhY60awIBLl2zHuMmUipnz19hxwMb9PVYA3llScdh6oz+HH8XLf2/2cRX3of0FXOmjauLJmaFxpV6GJRdtrx05U+cPW+RF5BIO+t8LDAmRWJDUDwSiaLvTHW88iwGNfbdlOFcppUT77rsOJTgrNCh7VRyRmqBnZvb6G5JIwddE5lfbcoTKEVilw01drxDq+HWGVLjPn55d5K/nQ5x7D9pTpyZvz0w6KZl64Ygj3wZOpqukU0K1di//Bbo0rFwPy4IFGQt3+vu6JpiRxeAQvRkK2+MqIyOp9xWzHP4FYn1a5rZ1B5g23qBHV1TwKy5kJpcZ3lUisRGc3+Yjruq0fAgHh/bF5q3ITSsheYNCMrS2TWF1k3u9qqUQ4E91Sb+rYdNvl6rDuvewtGbFYE9FCy01w0We/Xs4HAfn9d4RYrEegoDLA9cG4cLF/ex1uqwNdf75lBuoawfiNe8OgsLB0vJgzIEGkbS9WGbuSAx5tentipMT4E+kZCeVEiM+R3F9wBxyhz/sL0zwW6WxktkLsskTvvzf4tNGmKbihxUkZp0H02dllCvSmTjIurE7HeX2zPVjCLcYpcUiVnsNLKY0i/BHvQxX01v5hADxR8xOy2QnZbJVKweSE3uV/tc4lA58qDCcVdD5z07O1K2EgFVnyR1m65JQ2lL16BGeQxTQf6Kuy2kSGwAsNwk7CUCnQlXJIpBjYaumRrWiDgQkSIx21uNHN8bUy/XJpuQSF1QyMZF01qJENCQglnkUKaa4ZcbxIEeq163FJWNzCx60Xdy1bRTEQMqgc6qZ0m8Qq8T8sDFtSdGU+5BtwuLGXsNs+UIrm4uKiDxqLs6LQjE0d2VATeJqr7+bpEN9xzbvFJUfXubFIntAfZWm34eYRjoqIY88OACRuOQ9gAL8w7Bg1IkNic/d85XgBpfroc6+IoeYgx9Xm/OgwRPL6EtuOlovt6jGgcOSJFYv1cZ1uQaZGOh/gD1uXTbKQ6h+3eeXsxd04u4DSJ7uX4tMo7+IQcK1zG8RF2ugjcuaajnVfBHgahbn64a1P3HCAw76fWPEYyhT7sNohNX0/vzC1F3AkthLGJ1GP9yP4sBZnILfwpjCH1j6CAwWiv1dIL/A+EDttkCSrnHAAAAAElFTkSuQmCC"
/>
);

19
packages/navigation/src/components/datacenter.js Normal file
View File

@ -0,0 +1,19 @@
import emotion from 'preact-emotion';
import remcalc from 'remcalc';
import { Category } from './service';
export const Place = emotion(Category)`
margin-bottom: ${remcalc(10)};
`;
export const Region = emotion('h6')`
margin: ${remcalc(6)} 0;
font-size: ${remcalc(13)};
line-height: ${remcalc(18)};
font-weight: ${props => props.theme.font.weight.normal};
color: #494949;
`;
export { Name as default } from './service';

165
packages/navigation/src/components/header.js Normal file
View File

@ -0,0 +1,165 @@
import { findDOMNode } from 'react-dom';
import React, { PureComponent } from 'react';
import emotion from 'preact-emotion';
import remcalc from 'remcalc';
import outy from 'outy';
import { breakpoints } from 'joyent-ui-toolkit/dist/es/breakpoints/screens';
export const Item = emotion('div')`
order: 0;
flex-basis: auto;
flex-grow: 0;
flex-shrink: 1;
padding: ${remcalc(12)} ${remcalc(18)};
cursor: pointer;
height: ${remcalc(24)};
&:hover {
background-color: rgba(0, 0, 0, 0.25);
}
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: center;
align-content: stretch;
align-items: center;
${props =>
props.active &&
`
height: ${remcalc(27)};
border-bottom: ${remcalc(3)} solid #E38200;
background-color: rgba(0, 0, 0, 0.25);
`};
`;
export const FlexibleSpace = emotion(Item)`
flex-grow: 1;
&:hover {
background-color: transparent;
}
`;
export const Content = emotion('div')`
flex: 1 1 auto;
align-self: center;
display: flex;
font-size: ${remcalc(15)};
line-height: ${remcalc(24)};
font-weight: ${props => props.theme.font.weight.semibold};
color: ${props => props.theme.white};
@media (max-width: ${remcalc(breakpoints.small.upper)}) {
display: none;
}
`;
export const SubContent = emotion('span')`
font-size: ${remcalc(15)};
line-height: ${remcalc(24)};
font-weight: ${props => props.theme.font.weight.normal};
color: rgba(255, 255, 255, 0.5);
`;
export const Icon = emotion('div')`
display: flex;
flex: 0 0 auto;
align-self: auto;
justify-content: center;
align-items: center;
${props =>
!props.marginless &&
`
margin-left: ${remcalc(6)};
`};
`;
export const Divider = emotion('div')`
order: 0;
flex-basis: auto;
flex-grow: 0;
flex-shrink: 1;
background-color: black;
flex: 0 1 ${remcalc(1)};
height: ${remcalc(36)};
`;
export const Row = emotion('div')`
display: flex;
align-items: center;
width: 100%;
height: ${remcalc(48)};
position: absolute;
top: 0;
left: 0;
z-index: 3;
`;
const Header = emotion('header')`
background-color: #1e313b;
width: 100%;
height: ${remcalc(48)};
`;
export default class extends PureComponent {
_refs = {};
_ref = name => c => {
Object.assign(this._refs, { [name]: findDOMNode(c) });
};
_removeOutsideTap = () => {
return this.outsideTap && this.outsideTap.remove();
};
_setOusideTap = () => {
if (!this.props.onOutsideClick) {
return;
}
const elements = Object.values(this._refs);
this._removeOutsideTap();
if (!elements.length) {
return;
}
this.outsideTap = outy(
elements,
['click', 'touchend'],
this.props.onOutsideClick
);
};
componentDidMount = () => {
this._setOusideTap();
};
componentDidUpdate = () => {
this._setOusideTap();
};
componentWillUnmount = () => {
this._removeOutsideTap();
};
render() {
const { children, ...props } = this.props;
return (
<Header {...props} innerRef={this._ref('overlay')}>
{children}
</Header>
);
}
}

15
packages/navigation/src/components/icons.js Normal file
View File

@ -0,0 +1,15 @@
import React from 'react';
import { withTheme } from 'emotion-theming';
import BaseDataCenter from 'joyent-icons/dist/es/data-center';
import BaseTriton from 'joyent-icons/dist/es/triton';
import BaseServices from 'joyent-icons/dist/es/services';
const Colors = Component =>
withTheme(({ theme = {}, ...rest }) => (
<Component {...rest} colors={theme} />
));
export const DataCenter = Colors(BaseDataCenter);
export const Services = Colors(BaseServices);
export const Triton = Colors(BaseTriton);

33
packages/navigation/src/components/index.js Normal file
View File

@ -0,0 +1,33 @@
export { default as Avatar } from './avatar';
export {
default as Datacenter,
Region as DatacenterRegion,
Place as DatacenterPlace
} from './datacenter';
export {
default as Header,
Row as HeaderRow,
Item as HeaderItem,
Content as HeaderItemContent,
Icon as HeaderItemIcon,
FlexibleSpace as HeaderFlexibleSpaceItem,
Divider as HeaderDividerItem,
SubContent as HeaderItemSubContent
} from './header';
export {
DataCenter as DataCenterIcon,
Services as ServicesIcon,
Triton as TritonIcon
} from './icons';
export {
default as Service,
Name as ServiceName,
Description as ServiceDescription,
Category as ServiceCategory
} from './service';
export { default as Overlay } from './overlay';

15
packages/navigation/src/components/overlay.js Normal file
View File

@ -0,0 +1,15 @@
import emotion from 'preact-emotion';
import remcalc from 'remcalc';
export default emotion('div')`
border-bottom: ${remcalc(1)} solid #d8d8d8;
width: 100%;
position: absolute;
z-index: 1;
top: ${remcalc(48)};
left: 0;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
`;

35
packages/navigation/src/components/service.js Normal file
View File

@ -0,0 +1,35 @@
import emotion from 'preact-emotion';
import remcalc from 'remcalc';
export const Category = emotion('h4')`
font-size: ${remcalc(15)};
line-height: ${remcalc(24)};
font-weight: ${props => props.theme.font.weight.semibold};
padding-bottom: ${remcalc(6)};
color: #979797;
border-bottom: ${remcalc(1)} solid #f7f7f7;
margin: 0 0 ${remcalc(22)} 0;
`;
export const Name = emotion(Category)`
font-size: ${remcalc(15)};
line-height: ${remcalc(24)};
font-weight: ${props => props.theme.font.weight.semibold};
color: #494949;
border-bottom: none;
padding-bottom: 0;
margin: 0;
`;
export const Description = emotion('h6')`
font-size: ${remcalc(13)};
line-height: ${remcalc(18)};
font-weight: ${props => props.theme.font.weight.normal};
color: #979797;
margin: 0;
`;
export default emotion('a')`
display: block;
margin-bottom: ${remcalc(22)};
`;

107
packages/navigation/src/containers/datacenter.js Normal file
View File

@ -0,0 +1,107 @@
import React from 'react';
import emotion from 'preact-emotion';
import { graphql, compose } from 'react-apollo';
import gql from 'graphql-tag';
import remcalc from 'remcalc';
import { Grid, Row, Col } from 'preact-emotion-flexboxgrid';
import {
DatacenterPlace,
DatacenterRegion,
Datacenter,
Overlay
} from '../components';
const Container = emotion('div')`
background-color: #ffffff;
`;
const TitleContainer = emotion('div')`
background-color: ${props => props.theme.background};
`;
const RegionContainer = emotion('div')`
padding-top: ${remcalc(18)};
padding-bottom: ${remcalc(24)};
`;
const getDatacenters = gql`
{
regions @client {
name
slug
}
places @client {
name
slug
region
}
datacenters @client {
name
slug
place
}
}
`;
const Datacenters = ({ regions = [] }) => (
<Overlay>
{regions.map(({ name, slug, places }) => (
<div key={slug}>
<TitleContainer>
<Grid>
<Row>
<Col>
<DatacenterRegion>{name}</DatacenterRegion>
</Col>
</Row>
</Grid>
</TitleContainer>
<Container>
<Grid>
<RegionContainer>
<Row>
{places.map(({ name, slug, datacenters }) => (
<Col key={slug} xs={12} md={6} lg={3}>
<DatacenterPlace>{name}</DatacenterPlace>
{datacenters.map(({ name, slug }) => (
<Datacenter key={slug}>{name}</Datacenter>
))}
</Col>
))}
</Row>
</RegionContainer>
</Grid>
</Container>
</div>
))}
</Overlay>
);
export default compose(
graphql(getDatacenters, {
props: ({ data }) => {
const {
regions = [],
places = [],
datacenters = [],
loading = false,
error = null
} = data;
const _regions = regions.map(({ slug, ...region }) => ({
...region,
places: places
.filter(({ region }) => region === slug)
.map(({ slug, ...place }) => ({
...place,
datacenters: datacenters.filter(({ place }) => place === slug),
slug
})),
slug
}));
return { regions: _regions, loading, error };
}
})
)(Datacenters);

2
packages/navigation/src/containers/index.js Normal file
View File

@ -0,0 +1,2 @@
export { default as Services } from './services';
export { default as Datacenter } from './datacenter';

81
packages/navigation/src/containers/services.js Normal file
View File

@ -0,0 +1,81 @@
import React from 'react';
import emotion from 'preact-emotion';
import { graphql, compose } from 'react-apollo';
import gql from 'graphql-tag';
import chunk from 'lodash.chunk';
import remcalc from 'remcalc';
import { Grid, Row, Col } from 'preact-emotion-flexboxgrid';
import {
ServiceCategory,
ServiceName,
ServiceDescription,
Service,
Overlay
} from '../components';
const Container = emotion('div')`
padding-top: ${remcalc(30)};
background-color: #ffffff;
`;
const getHeader = gql`
{
categories @client {
name
slug
}
services @client {
name
description
category
slug
}
}
`;
const Services = ({ categories = [] }) => (
<Overlay>
<Container>
<Grid>
{chunk(categories, 4).map(chunk => (
<Row>
{chunk.map(({ name, services }) => (
<Col xs={12} md={6} lg={3}>
<ServiceCategory>{name}</ServiceCategory>
{services.map(({ name, description }) => (
<Service>
<ServiceName>{name}</ServiceName>
<ServiceDescription>{description}</ServiceDescription>
</Service>
))}
</Col>
))}
</Row>
))}
</Grid>
</Container>
</Overlay>
);
export default compose(
graphql(getHeader, {
props: ({ data }) => {
const {
categories = [],
services = [],
loading = false,
error = null
} = data;
const _categories = categories.map(({ slug, ...category }) => ({
...category,
services: services.filter(({ category }) => category === slug),
slug
}));
return { categories: _categories, loading, error };
}
})
)(Services);

118
packages/navigation/src/header.js Normal file
View File

@ -0,0 +1,118 @@
import React from 'react';
import { graphql, compose } from 'react-apollo';
import gql from 'graphql-tag';
import pascalCase from 'pascal-case';
import { DataCenterIcon, TritonIcon, ServicesIcon } from './components';
import * as Overlays from './containers';
import {
Avatar,
Header,
HeaderRow,
HeaderItem,
HeaderItemContent,
HeaderItemSubContent,
HeaderItemIcon,
HeaderFlexibleSpaceItem,
HeaderDividerItem
} from './components';
const updateHeaderMutation = gql`
mutation updateHeader($isOpen: Boolean!, $activePanel: String!) {
updateHeader(isOpen: $isOpen, activePanel: $activePanel) @client
}
`;
const getHeader = gql`
{
isOpen @client
activePanel @client
}
`;
const Panel = ({ name = '', expanded = false, children, ...rest }) => {
if (!expanded) {
return null;
}
const overlay = Overlays[pascalCase(name)];
if (!overlay) {
return null;
}
return React.createElement(overlay, rest, children);
};
const Navigation = ({ toggleSectionOpen, isOpen, activePanel }) => (
<Header onOutsideClick={() => toggleSectionOpen()}>
<HeaderRow>
<HeaderItem>
<TritonIcon light />
</HeaderItem>
<HeaderDividerItem />
<HeaderItem
onClick={() => toggleSectionOpen('services')}
active={isOpen && activePanel === 'services'}
>
<HeaderItemContent>Services</HeaderItemContent>
<HeaderItemIcon>
<ServicesIcon light />
</HeaderItemIcon>
</HeaderItem>
<HeaderDividerItem />
<HeaderFlexibleSpaceItem />
<HeaderDividerItem />
<HeaderItem
onClick={() => toggleSectionOpen('datacenter')}
active={isOpen && activePanel === 'datacenter'}
>
<HeaderItemContent>
<HeaderItemSubContent>Data Center:</HeaderItemSubContent> us-east-1
</HeaderItemContent>
<HeaderItemIcon>
<DataCenterIcon light />
</HeaderItemIcon>
</HeaderItem>
<HeaderDividerItem />
<HeaderItem>
<HeaderItemContent>
<HeaderItemSubContent>Account:</HeaderItemSubContent> George
</HeaderItemContent>
<HeaderItemIcon>
<Avatar />
</HeaderItemIcon>
</HeaderItem>
</HeaderRow>
<Panel expanded={isOpen} name={activePanel} />
</Header>
);
export default compose(
graphql(getHeader, {
props: ({ data }) => {
const {
isOpen = false,
activePanel = '',
loading = false,
error = null
} = data;
return { isOpen, activePanel, loading, error };
}
}),
graphql(updateHeaderMutation, {
props: ({ mutate, ownProps }) => ({
toggleSectionOpen: (name = '') => {
const { isOpen, activePanel } = ownProps;
return mutate({
variables: {
isOpen: !(isOpen && name === activePanel),
activePanel: name
}
});
}
})
})
)(Navigation);

6
packages/navigation/src/index.js Normal file
View File

@ -0,0 +1,6 @@
import React from 'react';
import ReactDOM from 'react-dom';
import App from './app';
ReactDOM.render(<App />, document.getElementById('header'));

29
packages/navigation/src/state/client.js Normal file
View File

@ -0,0 +1,29 @@
import ApolloClient from 'apollo-client';
import { HttpLink } from 'apollo-link-http';
import { ApolloLink } from 'apollo-link';
import { InMemoryCache } from 'apollo-cache-inmemory';
import { withClientState } from 'apollo-link-state';
import defaultState from './local';
const {
REACT_APP_GQL_PORT = 443,
REACT_APP_GQL_PROTOCOL = 'https',
REACT_APP_GQL_HOSTNAME = window.location.hostname
} = process.env;
const URI = `${REACT_APP_GQL_PROTOCOL}://${REACT_APP_GQL_HOSTNAME}:${REACT_APP_GQL_PORT}/graphql`;
const cache = new InMemoryCache();
const remote = new HttpLink({ uri: URI });
const local = withClientState({
cache,
...defaultState
});
export default new ApolloClient({
addTypename: true,
link: ApolloLink.from([local, remote]),
cache
});

2
packages/navigation/src/state/index.js Normal file
View File

@ -0,0 +1,2 @@
export { default as client } from './client';
export { default as local } from './local';

208
packages/navigation/src/state/local.js Normal file
View File

@ -0,0 +1,208 @@
import paramCase from 'param-case';
const dataSlugFromObjects = (arr = []) =>
arr.map(({ name, ...obj }) => ({
...obj,
name,
slug: paramCase(name)
}));
export default {
resolvers: {
Mutation: {
updateHeader: (_, { isOpen, activePanel }, { cache }) => {
cache.writeData({ data: { isOpen, activePanel } });
}
}
},
defaults: {
isOpen: false,
activePanel: '',
regions: dataSlugFromObjects([
{
name: 'Americas',
__typename: 'Region'
},
{
name: 'Europe',
__typename: 'Region'
},
{
name: 'Asia',
__typename: 'Region'
}
]),
places: dataSlugFromObjects([
{
name: 'Ashburn, Virginia, USA',
region: 'americas',
__typename: 'Place'
},
{
name: 'Las Vegas, Nevada, USA',
region: 'americas',
__typename: 'Place'
},
{
name: 'Emeryville, California, USA',
region: 'americas',
__typename: 'Place'
},
{
name: 'Amsterdam, Netherlands',
region: 'europe',
__typename: 'Place'
},
{
name: 'Singapore',
region: 'asia',
__typename: 'Place'
},
{
name: 'Seoul, South Korea',
region: 'asia',
__typename: 'Place'
}
]),
datacenters: dataSlugFromObjects([
{
name: 'us-east-1',
place: 'ashburn-virginia-usa',
__typename: 'Datacenter'
},
{
name: 'us-east-2',
place: 'ashburn-virginia-usa',
__typename: 'Datacenter'
},
{
name: 'us-east-3',
place: 'ashburn-virginia-usa',
__typename: 'Datacenter'
},
{
name: 'us-west-1',
place: 'emeryville-california-usa',
__typename: 'Datacenter'
},
{
name: 'us-sw-1',
place: 'las-vegas-nevada-usa',
__typename: 'Datacenter'
},
{
name: 'eu-ams-1',
place: 'amsterdam-netherlands',
__typename: 'Datacenter'
}
]),
categories: dataSlugFromObjects([
{
name: 'Compute',
__typename: 'Category'
},
{
name: 'Network',
__typename: 'Category'
},
{
name: 'Storage',
__typename: 'Category'
},
{
name: 'Access',
__typename: 'Category'
},
{
name: 'Help & Support',
__typename: 'Category'
}
]),
services: dataSlugFromObjects([
{
name: 'VMs & Containers',
description: 'Run VMs and bare metal containers',
category: 'compute',
__typename: 'Service'
},
{
name: 'Converged Analytics',
description: 'Map reduce and ETL on your objects',
category: 'compute',
__typename: 'Service'
},
{
name: 'VLANs',
description: 'Wire your appliction your way',
category: 'network',
__typename: 'Service'
},
{
name: 'Subnets',
description: 'A network for everything',
category: 'network',
__typename: 'Service'
},
{
name: 'Firewall Rules',
description: 'Control the bits coming and going',
category: 'network',
__typename: 'Service'
},
{
name: 'Service Status',
description: 'Write here about Service Status',
category: 'help-support',
__typename: 'Service'
},
{
name: 'Contact Support',
description: 'Chat to us via phone or email',
category: 'help-support',
__typename: 'Service'
},
{
name: 'Support Plans',
description: 'Write here about Support Plans',
category: 'help-support',
__typename: 'Service'
},
{
name: 'Getting Started',
description: 'Write here about Getting Started',
category: 'help-support',
__typename: 'Service'
},
{
name: 'Triton Object Storage',
description: 'Modern cloud object storage',
category: 'storage',
__typename: 'Service'
},
{
name: 'S3 Compatibility Bridge',
description: 'Modern storage, legacy compatibility',
category: 'storage',
__typename: 'Service'
},
{
name: 'Triton Volumes',
description: 'Network filesystems for your apps',
category: 'storage',
__typename: 'Service'
},
{
name: 'Role Based Access Control',
description: 'Manage users within your account',
category: 'access',
__typename: 'Service'
},
{
name: 'Firewall Rules',
description: 'Inspect all the bytes',
category: 'access',
__typename: 'Service'
}
])
}
};

8254
packages/navigation/yarn.lock Normal file
View File

File diff suppressed because it is too large Load Diff

9
packages/ui-toolkit/package.json
View File

@ -1,6 +1,6 @@
{
"name": "joyent-ui-toolkit",
"version": "4.0.1",
"version": "4.4.2",
"license": "MPL-2.0",
"repository": "github:yldio/joyent-portal",
"main": "dist/umd/index.js",
@ -22,7 +22,7 @@
"dependencies": {
"camel-case": "^3.0.0",
"joy-react-broadcast": "^0.6.9",
"joyent-icons": "^2.1.0",
"joyent-icons": "^3.0.0",
"lodash.isboolean": "^3.0.3",
"lodash.isundefined": "^3.0.1",
"normalized-styled-components": "^1.0.17",
@ -55,14 +55,11 @@
"react-styleguidist": "^6.0.33",
"react-test-renderer": "^16.2.0",
"redrun": "^5.10.0",
"redux": "^3.7.2",
"stylelint": "^8.4.0",
"stylelint-config-joyent-portal": "^2.0.1",
"webpack": "^3.10.0"
},
"peerDependencies": {
"joyent-manifest-editor": "^1.4.0",
"codemirror": "^5.32.0",
"joyent-manifest-editor": "^1.4.0",
"react": "^16.2.0",
"react-dom": "^16.2.0"
}

5
packages/ui-toolkit/src/base/global.js
View File

@ -11,8 +11,9 @@ export default ({ theme }) => css`
html, body {
font-display: optional;
font-family: ${theme.font
.family}, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
font-family: ${
theme.font.family
}, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
font-weight: ${theme.font.weight.normal};
}

72
packages/ui-toolkit/src/breakpoints/index.js
View File

@ -1,69 +1,3 @@
import React from 'react';
import { css } from 'styled-components';
import MediaQuery from 'react-responsive';
import remcalc from 'remcalc';
import pascalCase from 'pascal-case';
export const breakpoints = {
small: {
upper: 767
},
medium: {
upper: 1023,
lower: 768
},
large: {
upper: 1199,
lower: 1024
},
xlarge: {
lower: 1200
}
};
const screens = {
// >= 768px
smallOnly: `only screen and (max-width: ${remcalc(breakpoints.small.upper)})`,
small: `only screen and (min-width: ${remcalc(breakpoints.small.upper)})`,
// >= 1024px
mediumOnly: `only screen and (min-width: ${remcalc(breakpoints.medium.lower)})
and (max-width: ${remcalc(breakpoints.medium.upper)})`,
mediumDown: `only screen and (max-width: ${remcalc(
breakpoints.medium.upper
)})`,
medium: `only screen and (min-width: ${remcalc(breakpoints.medium.lower)})`,
// >= 1200px
largeOnly: `only screen and (min-width: ${remcalc(breakpoints.large.lower)})
and (max-width: ${remcalc(breakpoints.large.upper)})`,
largeDown: `only screen and (max-width: ${remcalc(breakpoints.large.upper)})`,
large: `only screen and (min-width: ${remcalc(breakpoints.large.lower)})`,
xlarge: `only screen and (min-width: ${remcalc(breakpoints.xlarge.lower)})
and (max-width: ${remcalc(breakpoints.xlarge.upper)})`,
xlargeUp: `only screen and (min-width: ${remcalc(breakpoints.xlarge.lower)})`
};
const breakpoint = label => (...args) => css`
@media ${screens[label]} {
${css(...args)};
}
`;
const toQuery = label => ({ children, ...rest }) => (
<MediaQuery query={screens[label]}>{children}</MediaQuery>
);
export const styled = Object.keys(screens).reduce(
(sum, label) => ({
...sum,
[label]: breakpoint(label)
}),
{}
);
export const query = Object.keys(screens).reduce(
(sum, label) => ({
...sum,
[pascalCase(label)]: toQuery(label)
}),
{}
);
export { default as query } from './query';
export { default as screens, breakpoints } from './screens';
export { default as styled } from './styled';

17
packages/ui-toolkit/src/breakpoints/query.js Normal file
View File

@ -0,0 +1,17 @@
import React from 'react';
import MediaQuery from 'react-responsive';
import pascalCase from 'pascal-case';
import screens from './screens';
const toQuery = label => ({ children, ...rest }) => (
<MediaQuery query={screens[label]}>{children}</MediaQuery>
);
export default Object.keys(screens).reduce(
(sum, label) => ({
...sum,
[pascalCase(label)]: toQuery(label)
}),
{}
);

39
packages/ui-toolkit/src/breakpoints/screens.js Normal file
View File

@ -0,0 +1,39 @@
import remcalc from 'remcalc';
export const breakpoints = {
small: {
upper: 767
},
medium: {
upper: 1023,
lower: 768
},
large: {
upper: 1199,
lower: 1024
},
xlarge: {
lower: 1200
}
};
export default {
// >= 768px
smallOnly: `only screen and (max-width: ${remcalc(breakpoints.small.upper)})`,
small: `only screen and (min-width: ${remcalc(breakpoints.small.upper)})`,
// >= 1024px
mediumOnly: `only screen and (min-width: ${remcalc(breakpoints.medium.lower)})
and (max-width: ${remcalc(breakpoints.medium.upper)})`,
mediumDown: `only screen and (max-width: ${remcalc(
breakpoints.medium.upper
)})`,
medium: `only screen and (min-width: ${remcalc(breakpoints.medium.lower)})`,
// >= 1200px
largeOnly: `only screen and (min-width: ${remcalc(breakpoints.large.lower)})
and (max-width: ${remcalc(breakpoints.large.upper)})`,
largeDown: `only screen and (max-width: ${remcalc(breakpoints.large.upper)})`,
large: `only screen and (min-width: ${remcalc(breakpoints.large.lower)})`,
xlarge: `only screen and (min-width: ${remcalc(breakpoints.xlarge.lower)})
and (max-width: ${remcalc(breakpoints.xlarge.upper)})`,
xlargeUp: `only screen and (min-width: ${remcalc(breakpoints.xlarge.lower)})`
};

17
packages/ui-toolkit/src/breakpoints/styled.js Normal file
View File

@ -0,0 +1,17 @@
import { css } from 'styled-components';
import screens from './screens';
const breakpoint = label => (...args) => css`
@media ${screens[label]} {
${css(...args)};
}
`;
export default Object.keys(screens).reduce(
(sum, label) => ({
...sum,
[label]: breakpoint(label)
}),
{}
);

13
packages/ui-toolkit/src/form/base/input.js
View File

@ -5,15 +5,19 @@ import remcalc from 'remcalc';
import is, { isNot } from 'styled-is';
import PropTypes from 'prop-types';
const colorWithDisabled = props => (props.disabled ? props.theme.disabled : props.theme.text);
const colorWithDisabled = props =>
props.disabled ? props.theme.disabled : props.theme.text;
const colorWithDefaultValue = props =>
props.value === props.defaultValue ? props.theme.disabled : colorWithDisabled(props);
props.value === props.defaultValue
? props.theme.disabled
: colorWithDisabled(props);
const color = props =>
props.defaultValue ? colorWithDefaultValue(props) : colorWithDisabled(props);
const height = props => (props.multiple ? 'auto' : props.textarea ? remcalc(96) : remcalc(48));
const height = props =>
props.multiple ? 'auto' : props.textarea ? remcalc(96) : remcalc(48);
const paddingTop = props => (props.multiple ? remcalc(20) : remcalc(13));
@ -230,7 +234,8 @@ BaseInput.propTypes = {
export default BaseInput;
export const Stylable = Component => {
const stylable = typeof Component === 'string' ? styled[Component] : styled(Component);
const stylable =
typeof Component === 'string' ? styled[Component] : styled(Component);
return stylable`
${style}

17
packages/ui-toolkit/src/form/base/toggle.js
View File

@ -138,12 +138,10 @@ const ToggleBase = ({ container = null, type = 'radio' }) =>
[type]: true
};
const render = (
{
id, // ignore id from value
...oldValue
} = {}
) => {
const render = ({
id, // ignore id from value
...oldValue
} = {}) => {
const newValue = {
...oldValue,
id: rndId()
@ -163,7 +161,12 @@ const ToggleBase = ({ container = null, type = 'radio' }) =>
const toggle = (
<InnerContainer {...types} type={type} {...rest}>
<StyledInput {...rest} id={newValue.id} type={type} checked={checked} />
<StyledInput
{...rest}
id={newValue.id}
type={type}
checked={checked}
/>
<Label
{...types}
htmlFor={newValue.id}

8
packages/ui-toolkit/src/form/toggle.js
View File

@ -84,8 +84,8 @@ const InputLabel = styled.label`
left: 0;
border-radius: 2em;
background: ${props => props.theme.white};
transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease,
margin 0.3s ease, box-shadow 0.3s ease;
transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
padding 0.3s ease, margin 0.3s ease, box-shadow 0.3s ease;
box-shadow: 0 0 0 ${remcalc(1)} ${props => props.theme.grey};
}
@ -154,6 +154,8 @@ const BaseToggle = BaseInput(({ children, ...rest }) => {
/**
* @example ./usage-toggle.md
*/
const Toggle = ({ children, ...rest }) => <BaseToggle {...rest}>{children}</BaseToggle>;
const Toggle = ({ children, ...rest }) => (
<BaseToggle {...rest}>{children}</BaseToggle>
);
export default Toggle;

37
packages/ui-toolkit/src/header/brand.js
View File

@ -1,37 +0,0 @@
import React from 'react';
import styled from 'styled-components';
import remcalc from 'remcalc';
import is from 'styled-is';
import { H2 } from '../text/headings';
const Brand = H2.extend`
text-transform: uppercase;
color: ${props => props.theme.white};
font-size: ${remcalc(29)};
margin: 0 auto;
${is('center')`
display: flex;
align-items: center;
justify-content: center;
`};
`;
const Box = styled.div`
align-self: stretch;
order: 0;
width: ${remcalc(150)};
display: flex;
&:hover,
&.active {
background: rgba(255, 255, 255, 0.15);
}
`;
export default ({ children, ...rest }) => (
<Box {...rest}>
<Brand {...rest}>{children}</Brand>
</Box>
);

49
packages/ui-toolkit/src/header/index.js
View File

@ -1,49 +0,0 @@
import React from 'react';
import styled from 'styled-components';
import remcalc from 'remcalc';
import is from 'styled-is';
import Baseline from '../baseline';
import { ViewContainer } from '../layout';
const Container = ViewContainer.extend`
display: flex;
flex-wrap: nowrap;
align-content: stretch;
align-items: stretch;
`;
const Header = styled.div`
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)};
line-height: ${remcalc(25)};
${is('fixed')`
position: fixed;
left: 0;
right: 0;
`};
${is('bottom', 'fixed')`
bottom: 0;
`};
`;
/**
* @example ./usage.md
*/
export default Baseline(({ children, fluid, ...rest }) => (
<Header {...rest}>
<Container fluid={fluid}>{children}</Container>
</Header>
));
export { default as HeaderItem, Anchor as HeaderAnchor } from './item';
export { default as HeaderBrand } from './brand';
export { default as HeaderNav } from './nav';

60
packages/ui-toolkit/src/header/item.js
View File

@ -1,60 +0,0 @@
import React from 'react';
import styled from 'styled-components';
import remcalc from 'remcalc';
import BaseAnchor from '../anchor';
import P from '../text/p';
const Text = P.extend`
text-align: center;
color: ${props => props.theme.white};
-webkit-text-fill-color: currentcolor;
margin: 0;
`;
const Box = styled.section`
flex: 0 1 auto;
align-self: auto;
order: 0;
display: flex;
align-items: center;
padding: 0 ${remcalc(18)};
svg {
margin-right: ${remcalc(6)};
}
&:not(:last-of-type) {
border-right: ${remcalc(1)} solid rgba(255, 255, 255, 0.15);
}
&:first-of-type {
margin-left: auto;
}
&:hover,
&.active {
background: rgba(255, 255, 255, 0.15);
}
`;
export const Anchor = styled(BaseAnchor)`
padding: ${remcalc(15)} 0;
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;
`;
export default ({ children, ...rest }) => (
<Box {...rest}>
<Text>{children}</Text>
</Box>
);

10
packages/ui-toolkit/src/header/nav.js
View File

@ -1,10 +0,0 @@
import styled from 'styled-components';
export default styled.ul`
padding: 0;
margin: 0;
display: flex;
list-style: none;
color: ${props => props.theme.white};
-webkit-text-fill-color: currentcolor;
`;

Some files were not shown because too many files have changed in this diff Show More