feat(navigation): initial commit
This commit is contained in:
parent
03766d7fd8
commit
c75bb9328d
|
@ -4,7 +4,7 @@ module.exports = {
|
||||||
'scope-enum': [
|
'scope-enum': [
|
||||||
2,
|
2,
|
||||||
'always',
|
'always',
|
||||||
['ui-toolkit', 'icons', 'my-joy-beta', 'boilerplate', 'create-instance']
|
['ui-toolkit', 'icons', 'my-joy-beta', 'navigation']
|
||||||
]
|
]
|
||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
18
package.json
18
package.json
|
@ -19,13 +19,9 @@
|
||||||
"test-ci": "lerna run test-ci",
|
"test-ci": "lerna run test-ci",
|
||||||
"test": "lerna run test",
|
"test": "lerna run test",
|
||||||
"clean": "lerna clean --yes",
|
"clean": "lerna clean --yes",
|
||||||
"dev": "redrun -p dev:*",
|
"dev": "lerna run dev --parallel --stream",
|
||||||
"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",
|
|
||||||
"commitmsg": "commitlint -e",
|
"commitmsg": "commitlint -e",
|
||||||
"precommit": "cross-env CI=1 redrun -s lint-staged format-staged",
|
"precommit": "cross-env CI=1 redrun -s lint-staged format-staged",
|
||||||
"postinstall": "lerna run prepublish",
|
|
||||||
"commit": "commit"
|
"commit": "commit"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
@ -67,12 +63,14 @@
|
||||||
"staged-git-files": "0.0.4",
|
"staged-git-files": "0.0.4",
|
||||||
"yargs": "^10.0.3"
|
"yargs": "^10.0.3"
|
||||||
},
|
},
|
||||||
"workspaces": ["packages/*"],
|
|
||||||
"resolutions": {
|
"resolutions": {
|
||||||
"graphql": "0.12.3",
|
"styled-components": "2.4.0",
|
||||||
"hoist-non-react-statics": "2.3.1",
|
"hoist-non-react-statics": "2.3.1",
|
||||||
"react": "16.2.0",
|
"react": "16.2.0",
|
||||||
"react-dom": "16.2.0",
|
"breeze-nexttick": "0.2.1",
|
||||||
"styled-components": "2.3.0"
|
"zen-observable": "0.7.1"
|
||||||
}
|
},
|
||||||
|
"workspaces": [
|
||||||
|
"packages/*"
|
||||||
|
]
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "joyent-icons",
|
"name": "joyent-icons",
|
||||||
"version": "2.1.0",
|
"version": "3.0.0",
|
||||||
"license": "MPL-2.0",
|
"license": "MPL-2.0",
|
||||||
"repository": "github:yldio/joyent-portal",
|
"repository": "github:yldio/joyent-portal",
|
||||||
"main": "dist/umd/index.js",
|
"main": "dist/umd/index.js",
|
||||||
|
@ -14,12 +14,12 @@
|
||||||
"compile:es": "babel src --out-dir dist/es",
|
"compile:es": "babel src --out-dir dist/es",
|
||||||
"compile:umd": "UMD=1 babel src --out-dir dist/umd",
|
"compile:umd": "UMD=1 babel src --out-dir dist/umd",
|
||||||
"compile": "redrun -p compile:*",
|
"compile": "redrun -p compile:*",
|
||||||
"dev":
|
"dev": "NODE_ENV=development npm run compile -- -- --watch --source-maps inline",
|
||||||
"NODE_ENV=development npm run compile -- -- --watch --source-maps inline",
|
|
||||||
"prepublish": "NODE_ENV=production npm run compile"
|
"prepublish": "NODE_ENV=production npm run compile"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"remcalc": "^1.0.9",
|
"remcalc": "^1.0.9",
|
||||||
|
"rnd-id": "^2.0.0",
|
||||||
"styled-components": "^2.3.0"
|
"styled-components": "^2.3.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import remcalc from 'remcalc';
|
import remcalc from 'remcalc';
|
||||||
|
|
||||||
import Colors from './colors';
|
|
||||||
import Rotate from './rotate';
|
import Rotate from './rotate';
|
||||||
import calcFill from './fill';
|
import calcFill from './fill';
|
||||||
|
|
||||||
|
@ -10,11 +9,10 @@ export default ({
|
||||||
light = false,
|
light = false,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
direction = 'down',
|
direction = 'down',
|
||||||
|
colors = {},
|
||||||
style = {},
|
style = {},
|
||||||
...rest
|
...rest
|
||||||
}) => (
|
}) => (
|
||||||
<Colors white text grey>
|
|
||||||
{colors => (
|
|
||||||
<Rotate direction={direction}>
|
<Rotate direction={direction}>
|
||||||
{({ style: rotateStyle }) => (
|
{({ style: rotateStyle }) => (
|
||||||
<svg
|
<svg
|
||||||
|
@ -45,6 +43,4 @@ export default ({
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
)}
|
||||||
</Rotate>
|
</Rotate>
|
||||||
)}
|
|
||||||
</Colors>
|
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import rndId from 'rnd-id';
|
import rndId from 'rnd-id';
|
||||||
|
|
||||||
import Colors from './colors';
|
|
||||||
import Rotate from './rotate';
|
import Rotate from './rotate';
|
||||||
import calcFill from './fill';
|
import calcFill from './fill';
|
||||||
|
|
||||||
|
@ -12,11 +11,10 @@ export default ({
|
||||||
light = false,
|
light = false,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
direction = 'down',
|
direction = 'down',
|
||||||
|
colors = {},
|
||||||
style = {},
|
style = {},
|
||||||
...rest
|
...rest
|
||||||
}) => (
|
}) => (
|
||||||
<Colors white text grey>
|
|
||||||
{colors => (
|
|
||||||
<Rotate direction={direction}>
|
<Rotate direction={direction}>
|
||||||
{({ style: rotateStyle }) => (
|
{({ style: rotateStyle }) => (
|
||||||
<svg
|
<svg
|
||||||
|
@ -49,6 +47,4 @@ export default ({
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
)}
|
||||||
</Rotate>
|
</Rotate>
|
||||||
)}
|
|
||||||
</Colors>
|
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import Colors from './colors';
|
|
||||||
import Rotate from './rotate';
|
import Rotate from './rotate';
|
||||||
import calcFill from './fill';
|
import calcFill from './fill';
|
||||||
|
|
||||||
|
@ -9,11 +8,10 @@ export default ({
|
||||||
light = false,
|
light = false,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
direction = 'down',
|
direction = 'down',
|
||||||
|
colors = {},
|
||||||
style = {},
|
style = {},
|
||||||
...rest
|
...rest
|
||||||
}) => (
|
}) => (
|
||||||
<Colors white text grey>
|
|
||||||
{colors => (
|
|
||||||
<Rotate direction={direction}>
|
<Rotate direction={direction}>
|
||||||
{({ style: rotateStyle }) => (
|
{({ style: rotateStyle }) => (
|
||||||
<svg
|
<svg
|
||||||
|
@ -32,6 +30,4 @@ export default ({
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
)}
|
||||||
</Rotate>
|
</Rotate>
|
||||||
)}
|
|
||||||
</Colors>
|
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import Colors from './colors';
|
|
||||||
import Rotate from './rotate';
|
import Rotate from './rotate';
|
||||||
import calcFill from './fill';
|
import calcFill from './fill';
|
||||||
|
|
||||||
|
@ -9,11 +8,10 @@ export default ({
|
||||||
light = false,
|
light = false,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
direction = 'down',
|
direction = 'down',
|
||||||
|
colors = {},
|
||||||
style = {},
|
style = {},
|
||||||
...rest
|
...rest
|
||||||
}) => (
|
}) => (
|
||||||
<Colors white text grey>
|
|
||||||
{colors => (
|
|
||||||
<Rotate direction={direction}>
|
<Rotate direction={direction}>
|
||||||
{({ style: rotateStyle }) => (
|
{({ style: rotateStyle }) => (
|
||||||
<svg
|
<svg
|
||||||
|
@ -32,6 +30,4 @@ export default ({
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
)}
|
||||||
</Rotate>
|
</Rotate>
|
||||||
)}
|
|
||||||
</Colors>
|
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import remcalc from 'remcalc';
|
import remcalc from 'remcalc';
|
||||||
|
|
||||||
import Colors from './colors';
|
|
||||||
import Rotate from './rotate';
|
import Rotate from './rotate';
|
||||||
|
|
||||||
export const Tick = props => (
|
export const Tick = props => (
|
||||||
|
@ -19,9 +18,7 @@ export const Tick = props => (
|
||||||
</svg>
|
</svg>
|
||||||
);
|
);
|
||||||
|
|
||||||
export const Completed = props => (
|
export const Completed = ({ colors = {}, ...props }) => (
|
||||||
<Colors white text greenDark>
|
|
||||||
{({ white, text, greenDark }) => (
|
|
||||||
<svg
|
<svg
|
||||||
width="18"
|
width="18"
|
||||||
height="18"
|
height="18"
|
||||||
|
@ -30,23 +27,19 @@ export const Completed = props => (
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
fill={greenDark}
|
fill={colors.greenDark}
|
||||||
fill-rule="evenodd"
|
fill-rule="evenodd"
|
||||||
d="M9 18A9 9 0 1 0 9 0a9 9 0 0 0 0 18z"
|
d="M9 18A9 9 0 1 0 9 0a9 9 0 0 0 0 18z"
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
fill-rule="evenodd"
|
fill-rule="evenodd"
|
||||||
fill={white}
|
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"
|
d="M12.017 5l-3.896 5.336-1.487-2.109L5 9.379l3.091 4.389 5.541-7.589L12.017 5z"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
|
||||||
</Colors>
|
|
||||||
);
|
);
|
||||||
|
|
||||||
export const PartCompleted = props => (
|
export const PartCompleted = ({ colors = {}, ...props }) => (
|
||||||
<Colors white text greenDark>
|
|
||||||
{({ white, text, greenDark }) => (
|
|
||||||
<svg
|
<svg
|
||||||
width="18"
|
width="18"
|
||||||
height="18"
|
height="18"
|
||||||
|
@ -56,27 +49,23 @@ export const PartCompleted = props => (
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
fill={white}
|
fill={colors.white}
|
||||||
fillRule="evenodd"
|
fillRule="evenodd"
|
||||||
d="M9 18A9 9 0 1 0 9 0a9 9 0 0 0 0 18z"
|
d="M9 18A9 9 0 1 0 9 0a9 9 0 0 0 0 18z"
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
fill={greenDark}
|
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"
|
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
|
<path
|
||||||
fill={text}
|
fill={colors.text}
|
||||||
fillRule="evenodd"
|
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"
|
d="M12.316 5l-4.062 5.477-1.55-2.165L5 9.495 8.223 14 14 6.21 12.316 5z"
|
||||||
/>
|
/>
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
|
||||||
</Colors>
|
|
||||||
);
|
);
|
||||||
|
|
||||||
export const Incomplete = props => (
|
export const Incomplete = ({ colors = {}, ...props }) => (
|
||||||
<Colors white text>
|
|
||||||
{({ white, text }) => (
|
|
||||||
<svg
|
<svg
|
||||||
width="18"
|
width="18"
|
||||||
height="18"
|
height="18"
|
||||||
|
@ -86,17 +75,15 @@ export const Incomplete = props => (
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
<path
|
<path
|
||||||
fill={white}
|
fill={colors.white}
|
||||||
fillRule="evenodd"
|
fillRule="evenodd"
|
||||||
d="M9 18A9 9 0 1 0 9 0a9 9 0 0 0 0 18z"
|
d="M9 18A9 9 0 1 0 9 0a9 9 0 0 0 0 18z"
|
||||||
/>
|
/>
|
||||||
<path
|
<path
|
||||||
fill={text}
|
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"
|
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>
|
</svg>
|
||||||
)}
|
|
||||||
</Colors>
|
|
||||||
);
|
);
|
||||||
|
|
||||||
export default ({
|
export default ({
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import rndId from 'rnd-id';
|
import rndId from 'rnd-id';
|
||||||
|
|
||||||
import Colors from './colors';
|
|
||||||
import Rotate from './rotate';
|
import Rotate from './rotate';
|
||||||
import calcFill from './fill';
|
import calcFill from './fill';
|
||||||
|
|
||||||
|
@ -12,11 +11,10 @@ export default ({
|
||||||
light = false,
|
light = false,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
direction = 'down',
|
direction = 'down',
|
||||||
|
colors = {},
|
||||||
style = {},
|
style = {},
|
||||||
...rest
|
...rest
|
||||||
}) => (
|
}) => (
|
||||||
<Colors white text grey>
|
|
||||||
{colors => (
|
|
||||||
<Rotate direction={direction}>
|
<Rotate direction={direction}>
|
||||||
{({ style: rotateStyle }) => (
|
{({ style: rotateStyle }) => (
|
||||||
<svg
|
<svg
|
||||||
|
@ -49,6 +47,4 @@ export default ({
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
)}
|
||||||
</Rotate>
|
</Rotate>
|
||||||
)}
|
|
||||||
</Colors>
|
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import Colors from './colors';
|
|
||||||
import Rotate from './rotate';
|
import Rotate from './rotate';
|
||||||
import calcFill from './fill';
|
import calcFill from './fill';
|
||||||
|
|
||||||
|
@ -9,11 +8,10 @@ export default ({
|
||||||
light = false,
|
light = false,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
direction = 'down',
|
direction = 'down',
|
||||||
|
colors = {},
|
||||||
style = {},
|
style = {},
|
||||||
...rest
|
...rest
|
||||||
}) => (
|
}) => (
|
||||||
<Colors white text grey>
|
|
||||||
{colors => (
|
|
||||||
<Rotate direction={direction}>
|
<Rotate direction={direction}>
|
||||||
{({ style: rotateStyle }) => (
|
{({ style: rotateStyle }) => (
|
||||||
<svg
|
<svg
|
||||||
|
@ -32,6 +30,4 @@ export default ({
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
)}
|
||||||
</Rotate>
|
</Rotate>
|
||||||
)}
|
|
||||||
</Colors>
|
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import rndId from 'rnd-id';
|
import rndId from 'rnd-id';
|
||||||
|
|
||||||
import Colors from './colors';
|
|
||||||
import Rotate from './rotate';
|
import Rotate from './rotate';
|
||||||
import calcFill from './fill';
|
import calcFill from './fill';
|
||||||
|
|
||||||
|
@ -12,11 +11,10 @@ export default ({
|
||||||
light = false,
|
light = false,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
direction = 'down',
|
direction = 'down',
|
||||||
|
colors = {},
|
||||||
style = {},
|
style = {},
|
||||||
...rest
|
...rest
|
||||||
}) => (
|
}) => (
|
||||||
<Colors white text grey>
|
|
||||||
{colors => (
|
|
||||||
<Rotate direction={direction}>
|
<Rotate direction={direction}>
|
||||||
{({ style: rotateStyle }) => (
|
{({ style: rotateStyle }) => (
|
||||||
<svg
|
<svg
|
||||||
|
@ -68,6 +66,4 @@ export default ({
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
)}
|
||||||
</Rotate>
|
</Rotate>
|
||||||
)}
|
|
||||||
</Colors>
|
|
||||||
);
|
);
|
||||||
|
|
|
@ -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
|
|
||||||
)
|
|
||||||
)
|
|
||||||
);
|
|
|
@ -1,6 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import Colors from './colors';
|
|
||||||
import Rotate from './rotate';
|
import Rotate from './rotate';
|
||||||
import calcFill from './fill';
|
import calcFill from './fill';
|
||||||
|
|
||||||
|
@ -9,11 +8,10 @@ export default ({
|
||||||
light = false,
|
light = false,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
direction = 'down',
|
direction = 'down',
|
||||||
|
colors = {},
|
||||||
style = {},
|
style = {},
|
||||||
...rest
|
...rest
|
||||||
}) => (
|
}) => (
|
||||||
<Colors white text grey>
|
|
||||||
{colors => (
|
|
||||||
<Rotate direction={direction}>
|
<Rotate direction={direction}>
|
||||||
{({ style: rotateStyle }) => (
|
{({ style: rotateStyle }) => (
|
||||||
<svg
|
<svg
|
||||||
|
@ -32,6 +30,4 @@ export default ({
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
)}
|
||||||
</Rotate>
|
</Rotate>
|
||||||
)}
|
|
||||||
</Colors>
|
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import Colors from './colors';
|
|
||||||
import Rotate from './rotate';
|
import Rotate from './rotate';
|
||||||
import calcFill from './fill';
|
import calcFill from './fill';
|
||||||
|
|
||||||
|
@ -9,11 +8,10 @@ export default ({
|
||||||
light = false,
|
light = false,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
direction = 'down',
|
direction = 'down',
|
||||||
|
colors = {},
|
||||||
style = {},
|
style = {},
|
||||||
...rest
|
...rest
|
||||||
}) => (
|
}) => (
|
||||||
<Colors white text grey>
|
|
||||||
{colors => (
|
|
||||||
<Rotate direction={direction}>
|
<Rotate direction={direction}>
|
||||||
{({ style: rotateStyle }) => (
|
{({ style: rotateStyle }) => (
|
||||||
<svg
|
<svg
|
||||||
|
@ -31,6 +29,4 @@ export default ({
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
)}
|
||||||
</Rotate>
|
</Rotate>
|
||||||
)}
|
|
||||||
</Colors>
|
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import Colors from './colors';
|
|
||||||
import Rotate from './rotate';
|
import Rotate from './rotate';
|
||||||
import calcFill from './fill';
|
import calcFill from './fill';
|
||||||
|
|
||||||
|
@ -9,11 +8,10 @@ export default ({
|
||||||
light = false,
|
light = false,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
direction = 'down',
|
direction = 'down',
|
||||||
|
colors = {},
|
||||||
style = {},
|
style = {},
|
||||||
...rest
|
...rest
|
||||||
}) => (
|
}) => (
|
||||||
<Colors white text grey>
|
|
||||||
{colors => (
|
|
||||||
<Rotate direction={direction}>
|
<Rotate direction={direction}>
|
||||||
{({ style: rotateStyle }) => (
|
{({ style: rotateStyle }) => (
|
||||||
<svg
|
<svg
|
||||||
|
@ -32,6 +30,4 @@ export default ({
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
)}
|
||||||
</Rotate>
|
</Rotate>
|
||||||
)}
|
|
||||||
</Colors>
|
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import rndId from 'rnd-id';
|
import rndId from 'rnd-id';
|
||||||
|
|
||||||
import Colors from './colors';
|
|
||||||
import Rotate from './rotate';
|
import Rotate from './rotate';
|
||||||
import calcFill from './fill';
|
import calcFill from './fill';
|
||||||
|
|
||||||
|
@ -12,11 +11,10 @@ export default ({
|
||||||
light = false,
|
light = false,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
direction = 'down',
|
direction = 'down',
|
||||||
|
colors = {},
|
||||||
style = {},
|
style = {},
|
||||||
...rest
|
...rest
|
||||||
}) => (
|
}) => (
|
||||||
<Colors white text grey>
|
|
||||||
{colors => (
|
|
||||||
<Rotate direction={direction}>
|
<Rotate direction={direction}>
|
||||||
{({ style: rotateStyle }) => (
|
{({ style: rotateStyle }) => (
|
||||||
<svg
|
<svg
|
||||||
|
@ -48,6 +46,4 @@ export default ({
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
)}
|
||||||
</Rotate>
|
</Rotate>
|
||||||
)}
|
|
||||||
</Colors>
|
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import rndId from 'rnd-id';
|
import rndId from 'rnd-id';
|
||||||
|
|
||||||
import Colors from './colors';
|
|
||||||
import Rotate from './rotate';
|
import Rotate from './rotate';
|
||||||
import calcFill from './fill';
|
import calcFill from './fill';
|
||||||
|
|
||||||
|
@ -12,11 +11,10 @@ export default ({
|
||||||
light = false,
|
light = false,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
direction = 'down',
|
direction = 'down',
|
||||||
|
colors = {},
|
||||||
style = {},
|
style = {},
|
||||||
...rest
|
...rest
|
||||||
}) => (
|
}) => (
|
||||||
<Colors white text grey>
|
|
||||||
{colors => (
|
|
||||||
<Rotate direction={direction}>
|
<Rotate direction={direction}>
|
||||||
{({ style: rotateStyle }) => (
|
{({ style: rotateStyle }) => (
|
||||||
<svg
|
<svg
|
||||||
|
@ -48,6 +46,4 @@ export default ({
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
)}
|
||||||
</Rotate>
|
</Rotate>
|
||||||
)}
|
|
||||||
</Colors>
|
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import rndId from 'rnd-id';
|
import rndId from 'rnd-id';
|
||||||
|
|
||||||
import Colors from './colors';
|
|
||||||
import Rotate from './rotate';
|
import Rotate from './rotate';
|
||||||
import calcFill from './fill';
|
import calcFill from './fill';
|
||||||
|
|
||||||
|
@ -12,11 +11,10 @@ export default ({
|
||||||
light = false,
|
light = false,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
direction = 'down',
|
direction = 'down',
|
||||||
|
colors = {},
|
||||||
style = {},
|
style = {},
|
||||||
...rest
|
...rest
|
||||||
}) => (
|
}) => (
|
||||||
<Colors white text grey>
|
|
||||||
{colors => (
|
|
||||||
<Rotate direction={direction}>
|
<Rotate direction={direction}>
|
||||||
{({ style: rotateStyle }) => (
|
{({ style: rotateStyle }) => (
|
||||||
<svg
|
<svg
|
||||||
|
@ -52,6 +50,4 @@ export default ({
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
)}
|
||||||
</Rotate>
|
</Rotate>
|
||||||
)}
|
|
||||||
</Colors>
|
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import Colors from './colors';
|
|
||||||
import Rotate from './rotate';
|
import Rotate from './rotate';
|
||||||
import calcFill from './fill';
|
import calcFill from './fill';
|
||||||
|
|
||||||
|
@ -9,11 +8,10 @@ export default ({
|
||||||
light = false,
|
light = false,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
direction = 'down',
|
direction = 'down',
|
||||||
|
colors = {},
|
||||||
style = {},
|
style = {},
|
||||||
...rest
|
...rest
|
||||||
}) => (
|
}) => (
|
||||||
<Colors white text grey>
|
|
||||||
{colors => (
|
|
||||||
<Rotate direction={direction}>
|
<Rotate direction={direction}>
|
||||||
{({ style: rotateStyle }) => (
|
{({ style: rotateStyle }) => (
|
||||||
<svg
|
<svg
|
||||||
|
@ -33,6 +31,4 @@ export default ({
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
)}
|
||||||
</Rotate>
|
</Rotate>
|
||||||
)}
|
|
||||||
</Colors>
|
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import rndId from 'rnd-id';
|
import rndId from 'rnd-id';
|
||||||
|
|
||||||
import Colors from './colors';
|
|
||||||
import Rotate from './rotate';
|
import Rotate from './rotate';
|
||||||
import calcFill from './fill';
|
import calcFill from './fill';
|
||||||
|
|
||||||
|
@ -12,11 +11,10 @@ export default ({
|
||||||
light = false,
|
light = false,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
direction = 'down',
|
direction = 'down',
|
||||||
|
colors = {},
|
||||||
style = {},
|
style = {},
|
||||||
...rest
|
...rest
|
||||||
}) => (
|
}) => (
|
||||||
<Colors white text grey>
|
|
||||||
{colors => (
|
|
||||||
<Rotate direction={direction}>
|
<Rotate direction={direction}>
|
||||||
{({ style: rotateStyle }) => (
|
{({ style: rotateStyle }) => (
|
||||||
<svg
|
<svg
|
||||||
|
@ -64,6 +62,4 @@ export default ({
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
)}
|
||||||
</Rotate>
|
</Rotate>
|
||||||
)}
|
|
||||||
</Colors>
|
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import Colors from './colors';
|
|
||||||
import Rotate from './rotate';
|
import Rotate from './rotate';
|
||||||
import calcFill from './fill';
|
import calcFill from './fill';
|
||||||
|
|
||||||
|
@ -9,11 +8,10 @@ export default ({
|
||||||
light = false,
|
light = false,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
direction = 'down',
|
direction = 'down',
|
||||||
|
colors = {},
|
||||||
style = {},
|
style = {},
|
||||||
...rest
|
...rest
|
||||||
}) => (
|
}) => (
|
||||||
<Colors white text grey>
|
|
||||||
{colors => (
|
|
||||||
<Rotate direction={direction}>
|
<Rotate direction={direction}>
|
||||||
{({ style: rotateStyle }) => (
|
{({ style: rotateStyle }) => (
|
||||||
<svg
|
<svg
|
||||||
|
@ -31,6 +29,4 @@ export default ({
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
)}
|
||||||
</Rotate>
|
</Rotate>
|
||||||
)}
|
|
||||||
</Colors>
|
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,16 +1,14 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import Colors from './colors';
|
|
||||||
import Rotate from './rotate';
|
import Rotate from './rotate';
|
||||||
|
|
||||||
export default ({
|
export default ({
|
||||||
healthy = true,
|
healthy = true,
|
||||||
direction = 'down',
|
direction = 'down',
|
||||||
|
colors = {},
|
||||||
style = {},
|
style = {},
|
||||||
...rest
|
...rest
|
||||||
}) => (
|
}) => (
|
||||||
<Colors green orange>
|
|
||||||
{({ green, orange }) => (
|
|
||||||
<Rotate direction={direction}>
|
<Rotate direction={direction}>
|
||||||
{({ style: rotateStyle }) => (
|
{({ style: rotateStyle }) => (
|
||||||
<svg
|
<svg
|
||||||
|
@ -22,7 +20,12 @@ export default ({
|
||||||
{...rest}
|
{...rest}
|
||||||
>
|
>
|
||||||
<g fill-rule="evenodd">
|
<g fill-rule="evenodd">
|
||||||
<circle fill={healthy ? green : orange} cx="9" cy="9" r="9" />
|
<circle
|
||||||
|
fill={healthy ? colors.green : colors.orange}
|
||||||
|
cx="9"
|
||||||
|
cy="9"
|
||||||
|
r="9"
|
||||||
|
/>
|
||||||
<path
|
<path
|
||||||
fill="#FFF"
|
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"
|
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"
|
||||||
|
@ -31,6 +34,4 @@ export default ({
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
)}
|
||||||
</Rotate>
|
</Rotate>
|
||||||
)}
|
|
||||||
</Colors>
|
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import rndId from 'rnd-id';
|
import rndId from 'rnd-id';
|
||||||
|
|
||||||
import Colors from './colors';
|
|
||||||
import Rotate from './rotate';
|
import Rotate from './rotate';
|
||||||
import calcFill from './fill';
|
import calcFill from './fill';
|
||||||
|
|
||||||
|
@ -12,11 +11,10 @@ export default ({
|
||||||
light = false,
|
light = false,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
direction = 'down',
|
direction = 'down',
|
||||||
|
colors = {},
|
||||||
style = {},
|
style = {},
|
||||||
...rest
|
...rest
|
||||||
}) => (
|
}) => (
|
||||||
<Colors white text grey>
|
|
||||||
{colors => (
|
|
||||||
<Rotate direction={direction}>
|
<Rotate direction={direction}>
|
||||||
{({ style: rotateStyle }) => (
|
{({ style: rotateStyle }) => (
|
||||||
<svg
|
<svg
|
||||||
|
@ -70,6 +68,4 @@ export default ({
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
)}
|
||||||
</Rotate>
|
</Rotate>
|
||||||
)}
|
|
||||||
</Colors>
|
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,14 +1,11 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import rndId from 'rnd-id';
|
import rndId from 'rnd-id';
|
||||||
|
|
||||||
import Colors from './colors';
|
|
||||||
import Rotate from './rotate';
|
import Rotate from './rotate';
|
||||||
|
|
||||||
const ids = [rndId(), rndId(), rndId()];
|
const ids = [rndId(), rndId(), rndId()];
|
||||||
|
|
||||||
export default ({ direction = 'down', style = {}, ...rest }) => (
|
export default ({ direction = 'down', style = {}, colors = {}, ...rest }) => (
|
||||||
<Colors white text>
|
|
||||||
{({ white, text }) => (
|
|
||||||
<Rotate direction={direction}>
|
<Rotate direction={direction}>
|
||||||
{({ style: rotateStyle }) => (
|
{({ style: rotateStyle }) => (
|
||||||
<svg
|
<svg
|
||||||
|
@ -22,23 +19,23 @@ export default ({ direction = 'down', style = {}, ...rest }) => (
|
||||||
>
|
>
|
||||||
<g transform="translate(-2061 2768)">
|
<g transform="translate(-2061 2768)">
|
||||||
<clipPath id={`${ids[0]}`} clipRule="evenodd">
|
<clipPath id={`${ids[0]}`} clipRule="evenodd">
|
||||||
<path fill={white} d="M2061-2768h24v24h-24v-24z" />
|
<path fill={colors.white} d="M2061-2768h24v24h-24v-24z" />
|
||||||
</clipPath>
|
</clipPath>
|
||||||
<g clipPath={`url(#${ids[0]})`}>
|
<g clipPath={`url(#${ids[0]})`}>
|
||||||
<path fill={white} d="M2061-2768h24v24h-24v-24z" />
|
<path fill={colors.white} d="M2061-2768h24v24h-24v-24z" />
|
||||||
<use
|
<use
|
||||||
xlinkHref={`#${ids[1]}`}
|
xlinkHref={`#${ids[1]}`}
|
||||||
fill={text}
|
fill={colors.text}
|
||||||
transform="translate(2061 -2754)"
|
transform="translate(2061 -2754)"
|
||||||
/>
|
/>
|
||||||
<use
|
<use
|
||||||
xlinkHref={`#${ids[2]}`}
|
xlinkHref={`#${ids[2]}`}
|
||||||
fill={text}
|
fill={colors.text}
|
||||||
transform="translate(2072 -2768)"
|
transform="translate(2072 -2768)"
|
||||||
/>
|
/>
|
||||||
<use
|
<use
|
||||||
xlinkHref={`#${ids[3]}`}
|
xlinkHref={`#${ids[3]}`}
|
||||||
fill={text}
|
fill={colors.text}
|
||||||
transform="translate(2067.29 -2755)"
|
transform="translate(2067.29 -2755)"
|
||||||
/>
|
/>
|
||||||
</g>
|
</g>
|
||||||
|
@ -59,6 +56,4 @@ export default ({ direction = 'down', style = {}, ...rest }) => (
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
)}
|
||||||
</Rotate>
|
</Rotate>
|
||||||
)}
|
|
||||||
</Colors>
|
|
||||||
);
|
);
|
||||||
|
|
|
@ -36,6 +36,7 @@ export { default as Public } from './public';
|
||||||
export { default as Randomize } from './randomize';
|
export { default as Randomize } from './randomize';
|
||||||
export { default as Reset } from './reset';
|
export { default as Reset } from './reset';
|
||||||
export { default as Restart } from './restart';
|
export { default as Restart } from './restart';
|
||||||
|
export { default as Services } from './services';
|
||||||
export { default as Start } from './start';
|
export { default as Start } from './start';
|
||||||
export { default as Stop } from './stop';
|
export { default as Stop } from './stop';
|
||||||
export { default as Storage } from './storage';
|
export { default as Storage } from './storage';
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import rndId from 'rnd-id';
|
import rndId from 'rnd-id';
|
||||||
|
|
||||||
import Colors from './colors';
|
|
||||||
import Rotate from './rotate';
|
import Rotate from './rotate';
|
||||||
import calcFill from './fill';
|
import calcFill from './fill';
|
||||||
|
|
||||||
|
@ -12,11 +11,10 @@ export default ({
|
||||||
light = false,
|
light = false,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
direction = 'down',
|
direction = 'down',
|
||||||
|
colors = {},
|
||||||
style = {},
|
style = {},
|
||||||
...rest
|
...rest
|
||||||
}) => (
|
}) => (
|
||||||
<Colors white text grey>
|
|
||||||
{colors => (
|
|
||||||
<Rotate direction={direction}>
|
<Rotate direction={direction}>
|
||||||
{({ style: rotateStyle }) => (
|
{({ style: rotateStyle }) => (
|
||||||
<svg
|
<svg
|
||||||
|
@ -119,6 +117,4 @@ export default ({
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
)}
|
||||||
</Rotate>
|
</Rotate>
|
||||||
)}
|
|
||||||
</Colors>
|
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import rndId from 'rnd-id';
|
import rndId from 'rnd-id';
|
||||||
|
|
||||||
import Colors from './colors';
|
|
||||||
import Rotate from './rotate';
|
import Rotate from './rotate';
|
||||||
import calcFill from './fill';
|
import calcFill from './fill';
|
||||||
|
|
||||||
|
@ -12,11 +11,10 @@ export default ({
|
||||||
light = false,
|
light = false,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
direction = 'down',
|
direction = 'down',
|
||||||
|
colors = {},
|
||||||
style = {},
|
style = {},
|
||||||
...rest
|
...rest
|
||||||
}) => (
|
}) => (
|
||||||
<Colors white text grey>
|
|
||||||
{colors => (
|
|
||||||
<Rotate direction={direction}>
|
<Rotate direction={direction}>
|
||||||
{({ style: rotateStyle }) => (
|
{({ style: rotateStyle }) => (
|
||||||
<svg
|
<svg
|
||||||
|
@ -92,6 +90,4 @@ export default ({
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
)}
|
||||||
</Rotate>
|
</Rotate>
|
||||||
)}
|
|
||||||
</Colors>
|
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import Colors from './colors';
|
|
||||||
import Rotate from './rotate';
|
import Rotate from './rotate';
|
||||||
import calcFill from './fill';
|
import calcFill from './fill';
|
||||||
|
|
||||||
|
@ -9,11 +8,10 @@ export default ({
|
||||||
light = false,
|
light = false,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
direction = 'down',
|
direction = 'down',
|
||||||
|
colors = {},
|
||||||
style = {},
|
style = {},
|
||||||
...rest
|
...rest
|
||||||
}) => (
|
}) => (
|
||||||
<Colors white text grey>
|
|
||||||
{colors => (
|
|
||||||
<Rotate direction={direction}>
|
<Rotate direction={direction}>
|
||||||
{({ style: rotateStyle }) => (
|
{({ style: rotateStyle }) => (
|
||||||
<svg
|
<svg
|
||||||
|
@ -32,6 +30,4 @@ export default ({
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
)}
|
||||||
</Rotate>
|
</Rotate>
|
||||||
)}
|
|
||||||
</Colors>
|
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import rndId from 'rnd-id';
|
import rndId from 'rnd-id';
|
||||||
|
|
||||||
import Colors from './colors';
|
|
||||||
import Rotate from './rotate';
|
import Rotate from './rotate';
|
||||||
import calcFill from './fill';
|
import calcFill from './fill';
|
||||||
|
|
||||||
|
@ -13,11 +12,10 @@ export default ({
|
||||||
secondary = false,
|
secondary = false,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
direction = 'down',
|
direction = 'down',
|
||||||
|
colors = {},
|
||||||
style = {},
|
style = {},
|
||||||
...rest
|
...rest
|
||||||
}) => (
|
}) => (
|
||||||
<Colors white primary text grey>
|
|
||||||
{colors => (
|
|
||||||
<Rotate direction={direction}>
|
<Rotate direction={direction}>
|
||||||
{({ style: rotateStyle }) => (
|
{({ style: rotateStyle }) => (
|
||||||
<svg
|
<svg
|
||||||
|
@ -75,6 +73,4 @@ export default ({
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
)}
|
||||||
</Rotate>
|
</Rotate>
|
||||||
)}
|
|
||||||
</Colors>
|
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import rndId from 'rnd-id';
|
import rndId from 'rnd-id';
|
||||||
|
|
||||||
import Colors from './colors';
|
|
||||||
import Rotate from './rotate';
|
import Rotate from './rotate';
|
||||||
import calcFill from './fill';
|
import calcFill from './fill';
|
||||||
|
|
||||||
|
@ -12,11 +11,10 @@ export default ({
|
||||||
light = false,
|
light = false,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
direction = 'down',
|
direction = 'down',
|
||||||
|
colors = {},
|
||||||
style = {},
|
style = {},
|
||||||
...rest
|
...rest
|
||||||
}) => (
|
}) => (
|
||||||
<Colors white text grey>
|
|
||||||
{colors => (
|
|
||||||
<Rotate direction={direction}>
|
<Rotate direction={direction}>
|
||||||
{({ style: rotateStyle }) => (
|
{({ style: rotateStyle }) => (
|
||||||
<svg
|
<svg
|
||||||
|
@ -60,6 +58,4 @@ export default ({
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
)}
|
||||||
</Rotate>
|
</Rotate>
|
||||||
)}
|
|
||||||
</Colors>
|
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import Colors from './colors';
|
|
||||||
import Rotate from './rotate';
|
import Rotate from './rotate';
|
||||||
import calcFill from './fill';
|
import calcFill from './fill';
|
||||||
|
|
||||||
|
@ -9,11 +8,10 @@ export default ({
|
||||||
light = false,
|
light = false,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
direction = 'down',
|
direction = 'down',
|
||||||
|
colors = {},
|
||||||
style = {},
|
style = {},
|
||||||
...rest
|
...rest
|
||||||
}) => (
|
}) => (
|
||||||
<Colors white text grey>
|
|
||||||
{colors => (
|
|
||||||
<Rotate direction={direction}>
|
<Rotate direction={direction}>
|
||||||
{({ style: rotateStyle }) => (
|
{({ style: rotateStyle }) => (
|
||||||
<svg
|
<svg
|
||||||
|
@ -31,6 +29,4 @@ export default ({
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
)}
|
||||||
</Rotate>
|
</Rotate>
|
||||||
)}
|
|
||||||
</Colors>
|
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import rndId from 'rnd-id';
|
import rndId from 'rnd-id';
|
||||||
|
|
||||||
import Colors from './colors';
|
|
||||||
import Rotate from './rotate';
|
import Rotate from './rotate';
|
||||||
import calcFill from './fill';
|
import calcFill from './fill';
|
||||||
|
|
||||||
|
@ -12,11 +11,10 @@ export default ({
|
||||||
light = false,
|
light = false,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
direction = 'down',
|
direction = 'down',
|
||||||
|
colors = {},
|
||||||
style = {},
|
style = {},
|
||||||
...rest
|
...rest
|
||||||
}) => (
|
}) => (
|
||||||
<Colors white text grey>
|
|
||||||
{colors => (
|
|
||||||
<Rotate direction={direction}>
|
<Rotate direction={direction}>
|
||||||
{({ style: rotateStyle }) => (
|
{({ style: rotateStyle }) => (
|
||||||
<svg
|
<svg
|
||||||
|
@ -72,6 +70,4 @@ export default ({
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
)}
|
||||||
</Rotate>
|
</Rotate>
|
||||||
)}
|
|
||||||
</Colors>
|
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import Colors from './colors';
|
|
||||||
import Rotate from './rotate';
|
import Rotate from './rotate';
|
||||||
import calcFill from './fill';
|
import calcFill from './fill';
|
||||||
|
|
||||||
|
@ -9,11 +8,10 @@ export default ({
|
||||||
light = false,
|
light = false,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
direction = 'down',
|
direction = 'down',
|
||||||
|
colors = {},
|
||||||
style = {},
|
style = {},
|
||||||
...rest
|
...rest
|
||||||
}) => (
|
}) => (
|
||||||
<Colors white text grey>
|
|
||||||
{colors => (
|
|
||||||
<Rotate direction={direction}>
|
<Rotate direction={direction}>
|
||||||
{({ style: rotateStyle }) => (
|
{({ style: rotateStyle }) => (
|
||||||
<svg
|
<svg
|
||||||
|
@ -32,6 +30,4 @@ export default ({
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
)}
|
||||||
</Rotate>
|
</Rotate>
|
||||||
)}
|
|
||||||
</Colors>
|
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import Colors from './colors';
|
|
||||||
import Rotate from './rotate';
|
import Rotate from './rotate';
|
||||||
import calcFill from './fill';
|
import calcFill from './fill';
|
||||||
|
|
||||||
|
@ -9,11 +8,10 @@ export default ({
|
||||||
light = false,
|
light = false,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
direction = 'down',
|
direction = 'down',
|
||||||
|
colors = {},
|
||||||
style = {},
|
style = {},
|
||||||
...rest
|
...rest
|
||||||
}) => (
|
}) => (
|
||||||
<Colors white text grey>
|
|
||||||
{colors => (
|
|
||||||
<Rotate direction={direction}>
|
<Rotate direction={direction}>
|
||||||
{({ style: rotateStyle }) => (
|
{({ style: rotateStyle }) => (
|
||||||
<svg
|
<svg
|
||||||
|
@ -33,6 +31,4 @@ export default ({
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
)}
|
||||||
</Rotate>
|
</Rotate>
|
||||||
)}
|
|
||||||
</Colors>
|
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import rndId from 'rnd-id';
|
import rndId from 'rnd-id';
|
||||||
|
|
||||||
import Colors from './colors';
|
|
||||||
import Rotate from './rotate';
|
import Rotate from './rotate';
|
||||||
import calcFill from './fill';
|
import calcFill from './fill';
|
||||||
|
|
||||||
|
@ -12,11 +11,10 @@ export default ({
|
||||||
light = false,
|
light = false,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
direction = 'down',
|
direction = 'down',
|
||||||
|
colors = {},
|
||||||
style = {},
|
style = {},
|
||||||
...rest
|
...rest
|
||||||
}) => (
|
}) => (
|
||||||
<Colors white text grey>
|
|
||||||
{colors => (
|
|
||||||
<Rotate direction={direction}>
|
<Rotate direction={direction}>
|
||||||
{({ style: rotateStyle }) => (
|
{({ style: rotateStyle }) => (
|
||||||
<svg
|
<svg
|
||||||
|
@ -47,6 +45,4 @@ export default ({
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
)}
|
||||||
</Rotate>
|
</Rotate>
|
||||||
)}
|
|
||||||
</Colors>
|
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import rndId from 'rnd-id';
|
import rndId from 'rnd-id';
|
||||||
|
|
||||||
import Colors from './colors';
|
|
||||||
import Rotate from './rotate';
|
import Rotate from './rotate';
|
||||||
import calcFill from './fill';
|
import calcFill from './fill';
|
||||||
|
|
||||||
|
@ -12,11 +11,10 @@ export default ({
|
||||||
light = false,
|
light = false,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
direction = 'down',
|
direction = 'down',
|
||||||
|
colors = {},
|
||||||
style = {},
|
style = {},
|
||||||
...rest
|
...rest
|
||||||
}) => (
|
}) => (
|
||||||
<Colors white text grey>
|
|
||||||
{colors => (
|
|
||||||
<Rotate direction={direction}>
|
<Rotate direction={direction}>
|
||||||
{({ style: rotateStyle }) => (
|
{({ style: rotateStyle }) => (
|
||||||
<svg
|
<svg
|
||||||
|
@ -47,6 +45,4 @@ export default ({
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
)}
|
||||||
</Rotate>
|
</Rotate>
|
||||||
)}
|
|
||||||
</Colors>
|
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import Colors from './colors';
|
|
||||||
import Rotate from './rotate';
|
import Rotate from './rotate';
|
||||||
import calcFill from './fill';
|
import calcFill from './fill';
|
||||||
|
|
||||||
|
@ -9,11 +8,10 @@ export default ({
|
||||||
light = false,
|
light = false,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
direction = 'down',
|
direction = 'down',
|
||||||
|
colors = {},
|
||||||
style = {},
|
style = {},
|
||||||
...rest
|
...rest
|
||||||
}) => (
|
}) => (
|
||||||
<Colors white text grey>
|
|
||||||
{colors => (
|
|
||||||
<Rotate direction={direction}>
|
<Rotate direction={direction}>
|
||||||
{({ style: rotateStyle }) => (
|
{({ style: rotateStyle }) => (
|
||||||
<svg
|
<svg
|
||||||
|
@ -32,6 +30,4 @@ export default ({
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
)}
|
||||||
</Rotate>
|
</Rotate>
|
||||||
)}
|
|
||||||
</Colors>
|
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import Colors from './colors';
|
|
||||||
import Rotate from './rotate';
|
import Rotate from './rotate';
|
||||||
import calcFill from './fill';
|
import calcFill from './fill';
|
||||||
|
|
||||||
|
@ -9,11 +8,10 @@ export default ({
|
||||||
light = false,
|
light = false,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
direction = 'down',
|
direction = 'down',
|
||||||
|
colors = {},
|
||||||
style = {},
|
style = {},
|
||||||
...rest
|
...rest
|
||||||
}) => (
|
}) => (
|
||||||
<Colors white text grey>
|
|
||||||
{colors => (
|
|
||||||
<Rotate direction={direction}>
|
<Rotate direction={direction}>
|
||||||
{({ style: rotateStyle }) => (
|
{({ style: rotateStyle }) => (
|
||||||
<svg
|
<svg
|
||||||
|
@ -31,6 +29,4 @@ export default ({
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
)}
|
||||||
</Rotate>
|
</Rotate>
|
||||||
)}
|
|
||||||
</Colors>
|
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import Colors from './colors';
|
|
||||||
import Rotate from './rotate';
|
import Rotate from './rotate';
|
||||||
import calcFill from './fill';
|
import calcFill from './fill';
|
||||||
|
|
||||||
|
@ -9,11 +8,10 @@ export default ({
|
||||||
light = false,
|
light = false,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
direction = 'down',
|
direction = 'down',
|
||||||
|
colors = {},
|
||||||
style = {},
|
style = {},
|
||||||
...rest
|
...rest
|
||||||
}) => (
|
}) => (
|
||||||
<Colors white text grey>
|
|
||||||
{colors => (
|
|
||||||
<Rotate direction={direction}>
|
<Rotate direction={direction}>
|
||||||
{({ style: rotateStyle }) => (
|
{({ style: rotateStyle }) => (
|
||||||
<svg
|
<svg
|
||||||
|
@ -32,6 +30,4 @@ export default ({
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
)}
|
||||||
</Rotate>
|
</Rotate>
|
||||||
)}
|
|
||||||
</Colors>
|
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import Colors from './colors';
|
|
||||||
import Rotate from './rotate';
|
import Rotate from './rotate';
|
||||||
import calcFill from './fill';
|
import calcFill from './fill';
|
||||||
|
|
||||||
|
@ -9,11 +8,10 @@ export default ({
|
||||||
light = false,
|
light = false,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
direction = 'down',
|
direction = 'down',
|
||||||
|
colors = {},
|
||||||
style = {},
|
style = {},
|
||||||
...rest
|
...rest
|
||||||
}) => (
|
}) => (
|
||||||
<Colors white text grey>
|
|
||||||
{colors => (
|
|
||||||
<Rotate direction={direction}>
|
<Rotate direction={direction}>
|
||||||
{({ style: rotateStyle }) => (
|
{({ style: rotateStyle }) => (
|
||||||
<svg
|
<svg
|
||||||
|
@ -33,6 +31,4 @@ export default ({
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
)}
|
||||||
</Rotate>
|
</Rotate>
|
||||||
)}
|
|
||||||
</Colors>
|
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import rndId from 'rnd-id';
|
import rndId from 'rnd-id';
|
||||||
|
|
||||||
import Colors from './colors';
|
|
||||||
import Rotate from './rotate';
|
import Rotate from './rotate';
|
||||||
import calcFill from './fill';
|
import calcFill from './fill';
|
||||||
|
|
||||||
|
@ -12,11 +11,10 @@ export default ({
|
||||||
light = false,
|
light = false,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
direction = 'down',
|
direction = 'down',
|
||||||
|
colors = {},
|
||||||
style = {},
|
style = {},
|
||||||
...rest
|
...rest
|
||||||
}) => (
|
}) => (
|
||||||
<Colors white text grey>
|
|
||||||
{colors => (
|
|
||||||
<Rotate direction={direction}>
|
<Rotate direction={direction}>
|
||||||
{({ style: rotateStyle }) => (
|
{({ style: rotateStyle }) => (
|
||||||
<svg
|
<svg
|
||||||
|
@ -48,6 +46,4 @@ export default ({
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
)}
|
||||||
</Rotate>
|
</Rotate>
|
||||||
)}
|
|
||||||
</Colors>
|
|
||||||
);
|
);
|
||||||
|
|
|
@ -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>
|
||||||
|
);
|
|
@ -1,7 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import rndId from 'rnd-id';
|
import rndId from 'rnd-id';
|
||||||
|
|
||||||
import Colors from './colors';
|
|
||||||
import Rotate from './rotate';
|
import Rotate from './rotate';
|
||||||
import calcFill from './fill';
|
import calcFill from './fill';
|
||||||
|
|
||||||
|
@ -12,11 +11,10 @@ export default ({
|
||||||
light = false,
|
light = false,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
direction = 'down',
|
direction = 'down',
|
||||||
|
colors = {},
|
||||||
style = {},
|
style = {},
|
||||||
...rest
|
...rest
|
||||||
}) => (
|
}) => (
|
||||||
<Colors white text grey>
|
|
||||||
{colors => (
|
|
||||||
<Rotate direction={direction}>
|
<Rotate direction={direction}>
|
||||||
{({ style: rotateStyle }) => (
|
{({ style: rotateStyle }) => (
|
||||||
<svg
|
<svg
|
||||||
|
@ -64,6 +62,4 @@ export default ({
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
)}
|
||||||
</Rotate>
|
</Rotate>
|
||||||
)}
|
|
||||||
</Colors>
|
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import rndId from 'rnd-id';
|
import rndId from 'rnd-id';
|
||||||
|
|
||||||
import Colors from './colors';
|
|
||||||
import Rotate from './rotate';
|
import Rotate from './rotate';
|
||||||
import calcFill from './fill';
|
import calcFill from './fill';
|
||||||
|
|
||||||
|
@ -12,11 +11,10 @@ export default ({
|
||||||
light = false,
|
light = false,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
direction = 'down',
|
direction = 'down',
|
||||||
|
colors = {},
|
||||||
style = {},
|
style = {},
|
||||||
...rest
|
...rest
|
||||||
}) => (
|
}) => (
|
||||||
<Colors white text grey>
|
|
||||||
{colors => (
|
|
||||||
<Rotate direction={direction}>
|
<Rotate direction={direction}>
|
||||||
{({ style: rotateStyle }) => (
|
{({ style: rotateStyle }) => (
|
||||||
<svg
|
<svg
|
||||||
|
@ -60,6 +58,4 @@ export default ({
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
)}
|
||||||
</Rotate>
|
</Rotate>
|
||||||
)}
|
|
||||||
</Colors>
|
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import Colors from './colors';
|
|
||||||
import Rotate from './rotate';
|
import Rotate from './rotate';
|
||||||
import calcFill from './fill';
|
import calcFill from './fill';
|
||||||
|
|
||||||
|
@ -9,11 +8,10 @@ export default ({
|
||||||
light = false,
|
light = false,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
direction = 'down',
|
direction = 'down',
|
||||||
|
colors = {},
|
||||||
style = {},
|
style = {},
|
||||||
...rest
|
...rest
|
||||||
}) => (
|
}) => (
|
||||||
<Colors white text grey>
|
|
||||||
{colors => (
|
|
||||||
<Rotate direction={direction}>
|
<Rotate direction={direction}>
|
||||||
{({ style: rotateStyle }) => (
|
{({ style: rotateStyle }) => (
|
||||||
<svg
|
<svg
|
||||||
|
@ -31,6 +29,4 @@ export default ({
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
)}
|
||||||
</Rotate>
|
</Rotate>
|
||||||
)}
|
|
||||||
</Colors>
|
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import rndId from 'rnd-id';
|
import rndId from 'rnd-id';
|
||||||
|
|
||||||
import Colors from './colors';
|
|
||||||
import Rotate from './rotate';
|
import Rotate from './rotate';
|
||||||
import calcFill from './fill';
|
import calcFill from './fill';
|
||||||
|
|
||||||
|
@ -12,11 +11,10 @@ export default ({
|
||||||
light = false,
|
light = false,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
direction = 'down',
|
direction = 'down',
|
||||||
|
colors = {},
|
||||||
style = {},
|
style = {},
|
||||||
...rest
|
...rest
|
||||||
}) => (
|
}) => (
|
||||||
<Colors white text grey>
|
|
||||||
{colors => (
|
|
||||||
<Rotate direction={direction}>
|
<Rotate direction={direction}>
|
||||||
{({ style: rotateStyle }) => (
|
{({ style: rotateStyle }) => (
|
||||||
<svg
|
<svg
|
||||||
|
@ -62,6 +60,4 @@ export default ({
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
)}
|
||||||
</Rotate>
|
</Rotate>
|
||||||
)}
|
|
||||||
</Colors>
|
|
||||||
);
|
);
|
||||||
|
|
|
@ -1,7 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import rndId from 'rnd-id';
|
import rndId from 'rnd-id';
|
||||||
|
|
||||||
import Colors from './colors';
|
|
||||||
import Rotate from './rotate';
|
import Rotate from './rotate';
|
||||||
import calcFill from './fill';
|
import calcFill from './fill';
|
||||||
|
|
||||||
|
@ -11,10 +10,9 @@ const TritonBeta = ({
|
||||||
fill = null,
|
fill = null,
|
||||||
light = false,
|
light = false,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
|
colors = {},
|
||||||
...rest
|
...rest
|
||||||
}) => (
|
}) => (
|
||||||
<Colors white text grey>
|
|
||||||
{colors => (
|
|
||||||
<svg
|
<svg
|
||||||
width="105"
|
width="105"
|
||||||
height="30"
|
height="30"
|
||||||
|
@ -54,13 +52,15 @@ const TritonBeta = ({
|
||||||
/>
|
/>
|
||||||
</defs>
|
</defs>
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
|
||||||
</Colors>
|
|
||||||
);
|
);
|
||||||
|
|
||||||
const Triton = ({ fill = null, light = false, disabled = false, ...rest }) => (
|
const Triton = ({
|
||||||
<Colors white text grey>
|
fill = null,
|
||||||
{colors => (
|
light = false,
|
||||||
|
disabled = false,
|
||||||
|
colors = {},
|
||||||
|
...rest
|
||||||
|
}) => (
|
||||||
<svg
|
<svg
|
||||||
width="105"
|
width="105"
|
||||||
height="19"
|
height="19"
|
||||||
|
@ -74,8 +74,6 @@ const Triton = ({ fill = null, light = false, disabled = false, ...rest }) => (
|
||||||
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"
|
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>
|
</svg>
|
||||||
)}
|
|
||||||
</Colors>
|
|
||||||
);
|
);
|
||||||
|
|
||||||
export default ({ beta = false, direction = 'down', style = {}, ...rest }) => (
|
export default ({ beta = false, direction = 'down', style = {}, ...rest }) => (
|
||||||
|
|
|
@ -1,6 +1,5 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
|
||||||
import Colors from './colors';
|
|
||||||
import Rotate from './rotate';
|
import Rotate from './rotate';
|
||||||
import calcFill from './fill';
|
import calcFill from './fill';
|
||||||
|
|
||||||
|
@ -9,11 +8,10 @@ export default ({
|
||||||
light = false,
|
light = false,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
direction = 'down',
|
direction = 'down',
|
||||||
|
colors = {},
|
||||||
style = {},
|
style = {},
|
||||||
...rest
|
...rest
|
||||||
}) => (
|
}) => (
|
||||||
<Colors white text grey>
|
|
||||||
{colors => (
|
|
||||||
<Rotate direction={direction}>
|
<Rotate direction={direction}>
|
||||||
{({ style: rotateStyle }) => (
|
{({ style: rotateStyle }) => (
|
||||||
<svg
|
<svg
|
||||||
|
@ -31,6 +29,4 @@ export default ({
|
||||||
</svg>
|
</svg>
|
||||||
)}
|
)}
|
||||||
</Rotate>
|
</Rotate>
|
||||||
)}
|
|
||||||
</Colors>
|
|
||||||
);
|
);
|
||||||
|
|
|
@ -6,14 +6,11 @@
|
||||||
"repository": "github:yldio/joyent-portal",
|
"repository": "github:yldio/joyent-portal",
|
||||||
"main": "build/",
|
"main": "build/",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev":
|
"dev": "REACT_APP_GQL_PORT=4000 PORT=3069 REACT_APP_GQL_PROTOCOL=http joyent-react-scripts start",
|
||||||
"REACT_APP_GQL_PORT=4000 PORT=3069 REACT_APP_GQL_PROTOCOL=http joyent-react-scripts start",
|
|
||||||
"start": "PORT=3069 joyent-react-scripts start",
|
"start": "PORT=3069 joyent-react-scripts start",
|
||||||
"build": "NODE_ENV=production joyent-react-scripts build",
|
"build": "NODE_ENV=production joyent-react-scripts build",
|
||||||
"lint-ci":
|
"lint-ci": "eslint . --ext .js --ext .md",
|
||||||
"eslint . --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
|
"lint": "eslint . --fix --ext .js --ext .md",
|
||||||
"lint":
|
|
||||||
"eslint . --fix --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
|
|
||||||
"test": "NODE_ENV=test joyent-react-scripts test --env=jsdom",
|
"test": "NODE_ENV=test joyent-react-scripts test --env=jsdom",
|
||||||
"test-ci": "npm run test",
|
"test-ci": "npm run test",
|
||||||
"prepublish": "echo 0"
|
"prepublish": "echo 0"
|
||||||
|
@ -28,7 +25,7 @@
|
||||||
"date-fns": "^1.29.0",
|
"date-fns": "^1.29.0",
|
||||||
"declarative-redux-form": "^2.0.8",
|
"declarative-redux-form": "^2.0.8",
|
||||||
"joyent-manifest-editor": "^1.4.0",
|
"joyent-manifest-editor": "^1.4.0",
|
||||||
"joyent-ui-toolkit": "^4.0.1",
|
"joyent-ui-toolkit": "^4.4.1",
|
||||||
"lodash.find": "^4.6.0",
|
"lodash.find": "^4.6.0",
|
||||||
"lodash.get": "^4.4.2",
|
"lodash.get": "^4.4.2",
|
||||||
"lodash.isstring": "^4.0.1",
|
"lodash.isstring": "^4.0.1",
|
||||||
|
@ -40,7 +37,7 @@
|
||||||
"param-case": "^2.1.1",
|
"param-case": "^2.1.1",
|
||||||
"prop-types": "^15.6.0",
|
"prop-types": "^15.6.0",
|
||||||
"react": "^16.2.0",
|
"react": "^16.2.0",
|
||||||
"react-apollo": "^1.4.16",
|
"react-apollo": "^2.0.4",
|
||||||
"react-dom": "^16.2.0",
|
"react-dom": "^16.2.0",
|
||||||
"react-redux": "^5.0.6",
|
"react-redux": "^5.0.6",
|
||||||
"react-redux-values": "^1.0.2",
|
"react-redux-values": "^1.0.2",
|
||||||
|
@ -50,7 +47,7 @@
|
||||||
"redux-actions": "^2.2.1",
|
"redux-actions": "^2.2.1",
|
||||||
"redux-form": "^7.2.0",
|
"redux-form": "^7.2.0",
|
||||||
"remcalc": "^1.0.9",
|
"remcalc": "^1.0.9",
|
||||||
"styled-components": "^2.3.0",
|
"styled-components": "^2.4.0",
|
||||||
"styled-components-spacing": "^2.1.3",
|
"styled-components-spacing": "^2.1.3",
|
||||||
"styled-flex-component": "^2.1.0",
|
"styled-flex-component": "^2.1.0",
|
||||||
"title-case": "^2.1.1"
|
"title-case": "^2.1.1"
|
||||||
|
@ -62,9 +59,6 @@
|
||||||
"jest-styled-components": "^4.9.0",
|
"jest-styled-components": "^4.9.0",
|
||||||
"joyent-react-scripts": "^6.5.1",
|
"joyent-react-scripts": "^6.5.1",
|
||||||
"react-test-renderer": "^16.2.0",
|
"react-test-renderer": "^16.2.0",
|
||||||
"redrun": "^5.10.0",
|
"redrun": "^5.10.0"
|
||||||
"serve": "^6.4.1",
|
|
||||||
"stylelint": "^8.4.0",
|
|
||||||
"stylelint-config-joyent-portal": "^2.0.1"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -7,13 +7,14 @@
|
||||||
|
|
||||||
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
|
<link rel="manifest" href="%PUBLIC_URL%/manifest.json">
|
||||||
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
|
||||||
|
|
||||||
<title>My Joyent β</title>
|
<title>My Joyent β</title>
|
||||||
</head>
|
</head>
|
||||||
<body>
|
<body>
|
||||||
<noscript>
|
<noscript>
|
||||||
You need to enable JavaScript to run this app.
|
You need to enable JavaScript to run this app.
|
||||||
</noscript>
|
</noscript>
|
||||||
|
<div id="header"></div>
|
||||||
<div id="root"></div>
|
<div id="root"></div>
|
||||||
|
<script type="text/javascript" src="//localhost:3000/static/js/bundle.js"></script>
|
||||||
</body>
|
</body>
|
||||||
</html>
|
</html>
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { ThemeProvider } from 'styled-components';
|
import { ThemeProvider } from 'styled-components';
|
||||||
|
import { Provider as ReduxProvider } from 'react-redux';
|
||||||
import { ApolloProvider } from 'react-apollo';
|
import { ApolloProvider } from 'react-apollo';
|
||||||
|
|
||||||
import { theme, RootContainer } from 'joyent-ui-toolkit';
|
import { theme, RootContainer } from 'joyent-ui-toolkit';
|
||||||
|
@ -54,11 +55,13 @@ const fullTheme = {
|
||||||
};
|
};
|
||||||
|
|
||||||
export default () => (
|
export default () => (
|
||||||
<ApolloProvider client={client} store={store}>
|
<ApolloProvider client={client}>
|
||||||
<ThemeProvider theme={fullTheme}>
|
<ThemeProvider theme={fullTheme}>
|
||||||
|
<ReduxProvider store={store}>
|
||||||
<RootContainer>
|
<RootContainer>
|
||||||
<Router />
|
<Router />
|
||||||
</RootContainer>
|
</RootContainer>
|
||||||
|
</ReduxProvider>
|
||||||
</ThemeProvider>
|
</ThemeProvider>
|
||||||
</ApolloProvider>
|
</ApolloProvider>
|
||||||
);
|
);
|
||||||
|
|
|
@ -8,7 +8,7 @@ import styled from 'styled-components';
|
||||||
import remcalc from 'remcalc';
|
import remcalc from 'remcalc';
|
||||||
import titleCase from 'title-case';
|
import titleCase from 'title-case';
|
||||||
import Flex, { FlexItem } from 'styled-flex-component';
|
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 {
|
import {
|
||||||
Message,
|
Message,
|
||||||
|
@ -50,7 +50,7 @@ class ValueTextareaField extends PureComponent {
|
||||||
const { input = {}, submitting } = this.props;
|
const { input = {}, submitting } = this.props;
|
||||||
|
|
||||||
return input.value === 'user-script' ? (
|
return input.value === 'user-script' ? (
|
||||||
<Field name="value" component={Editor} />
|
<Field name="value" component="textarea" />
|
||||||
) : (
|
) : (
|
||||||
<Textarea resize="vertical" disabled={submitting} fluid />
|
<Textarea resize="vertical" disabled={submitting} fluid />
|
||||||
);
|
);
|
||||||
|
|
|
@ -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,2 +1 @@
|
||||||
export { default as Header } from './header';
|
|
||||||
export { default as Menu } from './menu';
|
export { default as Menu } from './menu';
|
||||||
|
|
|
@ -59,7 +59,8 @@ const Firewall = ({
|
||||||
tagRules={tagRules}
|
tagRules={tagRules}
|
||||||
enabled={enabled}
|
enabled={enabled}
|
||||||
/>
|
/>
|
||||||
) : null}
|
) : null
|
||||||
|
}
|
||||||
</ReduxForm>
|
</ReduxForm>
|
||||||
) : null}
|
) : null}
|
||||||
{proceeded && !expanded ? (
|
{proceeded && !expanded ? (
|
||||||
|
@ -116,7 +117,7 @@ export default compose(
|
||||||
}
|
}
|
||||||
}),
|
}),
|
||||||
props: ({ ownProps, data }) => {
|
props: ({ ownProps, data }) => {
|
||||||
const { enabled, showInactive } = ownProps;
|
const { showInactive } = ownProps;
|
||||||
|
|
||||||
const {
|
const {
|
||||||
firewall_rules_create_machine = [],
|
firewall_rules_create_machine = [],
|
||||||
|
|
|
@ -5,8 +5,8 @@ import get from 'lodash.get';
|
||||||
import { PageContainer } from 'joyent-ui-toolkit';
|
import { PageContainer } from 'joyent-ui-toolkit';
|
||||||
|
|
||||||
import { Breadcrumb, Menu } from '@containers/navigation';
|
import { Breadcrumb, Menu } from '@containers/navigation';
|
||||||
import { Header } from '@components/navigation';
|
|
||||||
import Footer from '@components/navigation/footer';
|
import Footer from '@components/navigation/footer';
|
||||||
|
import CreateInstance from '@containers/create-instance';
|
||||||
|
|
||||||
import {
|
import {
|
||||||
List as Instances,
|
List as Instances,
|
||||||
|
@ -19,14 +19,10 @@ import {
|
||||||
Snapshots as InstanceSnapshots,
|
Snapshots as InstanceSnapshots,
|
||||||
Resize as InstanceResize
|
Resize as InstanceResize
|
||||||
} from '@containers/instances';
|
} from '@containers/instances';
|
||||||
import CreateInstance from '@containers/create-instance';
|
|
||||||
|
|
||||||
export default () => (
|
export default () => (
|
||||||
<BrowserRouter>
|
<BrowserRouter>
|
||||||
<PageContainer>
|
<PageContainer>
|
||||||
{/* Header */}
|
|
||||||
<Route path="*" component={Header} />
|
|
||||||
|
|
||||||
{/* Breadcrumb */}
|
{/* Breadcrumb */}
|
||||||
<Switch>
|
<Switch>
|
||||||
<Route
|
<Route
|
||||||
|
|
|
@ -1 +0,0 @@
|
||||||
export { default as ui } from './ui';
|
|
|
@ -1,3 +0,0 @@
|
||||||
import { handleActions } from 'redux-actions';
|
|
||||||
|
|
||||||
export default handleActions({}, {});
|
|
|
@ -1,7 +0,0 @@
|
||||||
export default {
|
|
||||||
ui: {
|
|
||||||
sections: {
|
|
||||||
instances: ['summary', 'tags', 'metadata', 'snapshots']
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
|
@ -1,66 +1,45 @@
|
||||||
import { reduxBatch } from '@manaflair/redux-batch';
|
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 { 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 { reducer as valuesReducer } from 'react-redux-values';
|
||||||
|
|
||||||
import { ui } from './reducers';
|
const {
|
||||||
import state from './state';
|
REACT_APP_GQL_PORT = 443,
|
||||||
|
REACT_APP_GQL_PROTOCOL = 'https',
|
||||||
const GLOBAL =
|
REACT_APP_GQL_HOSTNAME = window.location.hostname
|
||||||
typeof window === 'object'
|
} = process.env;
|
||||||
? 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;
|
|
||||||
|
|
||||||
export const client = new ApolloClient({
|
export const client = new ApolloClient({
|
||||||
dataIdFromObject: o => {
|
cache: new InMemoryCache(),
|
||||||
const id = o.id
|
link: new HttpLink({
|
||||||
? o.id
|
uri: `${REACT_APP_GQL_PROTOCOL}://${REACT_APP_GQL_HOSTNAME}:${REACT_APP_GQL_PORT}/graphql`
|
||||||
: 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`
|
|
||||||
})
|
})
|
||||||
});
|
});
|
||||||
|
|
||||||
|
const initialState = {
|
||||||
|
ui: {
|
||||||
|
sections: {
|
||||||
|
instances: ['summary', 'tags', 'metadata', 'snapshots']
|
||||||
|
}
|
||||||
|
}
|
||||||
|
};
|
||||||
|
|
||||||
export const store = createStore(
|
export const store = createStore(
|
||||||
combineReducers({
|
combineReducers({
|
||||||
values: valuesReducer,
|
values: valuesReducer,
|
||||||
apollo: client.reducer(),
|
|
||||||
form: formReducer,
|
form: formReducer,
|
||||||
ui
|
ui: (state = {}) => state
|
||||||
}),
|
}),
|
||||||
state, // Initial state
|
initialState,
|
||||||
compose(
|
compose(
|
||||||
reduxBatch,
|
reduxBatch,
|
||||||
applyMiddleware(client.middleware()),
|
|
||||||
// If you are using the devToolsExtension, you can add it here also
|
// If you are using the devToolsExtension, you can add it here also
|
||||||
// eslint-disable-next-line no-negated-condition
|
// eslint-disable-next-line no-negated-condition
|
||||||
typeof GLOBAL.__REDUX_DEVTOOLS_EXTENSION__ !== 'undefined'
|
typeof window.__REDUX_DEVTOOLS_EXTENSION__ !== 'undefined'
|
||||||
? GLOBAL.__REDUX_DEVTOOLS_EXTENSION__()
|
? window.__REDUX_DEVTOOLS_EXTENSION__()
|
||||||
: f => f
|
: f => f
|
||||||
)
|
)
|
||||||
);
|
);
|
||||||
|
|
|
@ -0,0 +1,3 @@
|
||||||
|
{
|
||||||
|
"presets": ["joyent-portal"]
|
||||||
|
}
|
|
@ -0,0 +1,2 @@
|
||||||
|
build
|
||||||
|
dist
|
|
@ -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
|
||||||
|
}
|
||||||
|
}
|
|
@ -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
|
|
@ -0,0 +1,3 @@
|
||||||
|
*
|
||||||
|
!build/**
|
||||||
|
!lib/**
|
|
@ -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.
|
|
@ -0,0 +1 @@
|
||||||
|
# minio-proto-ui
|
|
@ -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"
|
||||||
|
}
|
||||||
|
}
|
|
@ -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>
|
|
@ -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>
|
||||||
|
);
|
|
@ -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"
|
||||||
|
/>
|
||||||
|
);
|
|
@ -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';
|
|
@ -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>
|
||||||
|
);
|
||||||
|
}
|
||||||
|
}
|
|
@ -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);
|
|
@ -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';
|
|
@ -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;
|
||||||
|
`;
|
|
@ -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)};
|
||||||
|
`;
|
|
@ -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);
|
|
@ -0,0 +1,2 @@
|
||||||
|
export { default as Services } from './services';
|
||||||
|
export { default as Datacenter } from './datacenter';
|
|
@ -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);
|
|
@ -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);
|
|
@ -0,0 +1,6 @@
|
||||||
|
import React from 'react';
|
||||||
|
import ReactDOM from 'react-dom';
|
||||||
|
|
||||||
|
import App from './app';
|
||||||
|
|
||||||
|
ReactDOM.render(<App />, document.getElementById('header'));
|
|
@ -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
|
||||||
|
});
|
|
@ -0,0 +1,2 @@
|
||||||
|
export { default as client } from './client';
|
||||||
|
export { default as local } from './local';
|
|
@ -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'
|
||||||
|
}
|
||||||
|
])
|
||||||
|
}
|
||||||
|
};
|
File diff suppressed because it is too large
Load Diff
|
@ -1,6 +1,6 @@
|
||||||
{
|
{
|
||||||
"name": "joyent-ui-toolkit",
|
"name": "joyent-ui-toolkit",
|
||||||
"version": "4.0.1",
|
"version": "4.4.2",
|
||||||
"license": "MPL-2.0",
|
"license": "MPL-2.0",
|
||||||
"repository": "github:yldio/joyent-portal",
|
"repository": "github:yldio/joyent-portal",
|
||||||
"main": "dist/umd/index.js",
|
"main": "dist/umd/index.js",
|
||||||
|
@ -22,7 +22,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"camel-case": "^3.0.0",
|
"camel-case": "^3.0.0",
|
||||||
"joy-react-broadcast": "^0.6.9",
|
"joy-react-broadcast": "^0.6.9",
|
||||||
"joyent-icons": "^2.1.0",
|
"joyent-icons": "^3.0.0",
|
||||||
"lodash.isboolean": "^3.0.3",
|
"lodash.isboolean": "^3.0.3",
|
||||||
"lodash.isundefined": "^3.0.1",
|
"lodash.isundefined": "^3.0.1",
|
||||||
"normalized-styled-components": "^1.0.17",
|
"normalized-styled-components": "^1.0.17",
|
||||||
|
@ -55,14 +55,11 @@
|
||||||
"react-styleguidist": "^6.0.33",
|
"react-styleguidist": "^6.0.33",
|
||||||
"react-test-renderer": "^16.2.0",
|
"react-test-renderer": "^16.2.0",
|
||||||
"redrun": "^5.10.0",
|
"redrun": "^5.10.0",
|
||||||
"redux": "^3.7.2",
|
|
||||||
"stylelint": "^8.4.0",
|
|
||||||
"stylelint-config-joyent-portal": "^2.0.1",
|
|
||||||
"webpack": "^3.10.0"
|
"webpack": "^3.10.0"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"joyent-manifest-editor": "^1.4.0",
|
|
||||||
"codemirror": "^5.32.0",
|
"codemirror": "^5.32.0",
|
||||||
|
"joyent-manifest-editor": "^1.4.0",
|
||||||
"react": "^16.2.0",
|
"react": "^16.2.0",
|
||||||
"react-dom": "^16.2.0"
|
"react-dom": "^16.2.0"
|
||||||
}
|
}
|
||||||
|
|
|
@ -11,8 +11,9 @@ export default ({ theme }) => css`
|
||||||
|
|
||||||
html, body {
|
html, body {
|
||||||
font-display: optional;
|
font-display: optional;
|
||||||
font-family: ${theme.font
|
font-family: ${
|
||||||
.family}, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
|
theme.font.family
|
||||||
|
}, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, Helvetica, sans-serif;
|
||||||
font-weight: ${theme.font.weight.normal};
|
font-weight: ${theme.font.weight.normal};
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -1,69 +1,3 @@
|
||||||
import React from 'react';
|
export { default as query } from './query';
|
||||||
import { css } from 'styled-components';
|
export { default as screens, breakpoints } from './screens';
|
||||||
import MediaQuery from 'react-responsive';
|
export { default as styled } from './styled';
|
||||||
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)
|
|
||||||
}),
|
|
||||||
{}
|
|
||||||
);
|
|
||||||
|
|
|
@ -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)
|
||||||
|
}),
|
||||||
|
{}
|
||||||
|
);
|
|
@ -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)})`
|
||||||
|
};
|
|
@ -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)
|
||||||
|
}),
|
||||||
|
{}
|
||||||
|
);
|
|
@ -5,15 +5,19 @@ import remcalc from 'remcalc';
|
||||||
import is, { isNot } from 'styled-is';
|
import is, { isNot } from 'styled-is';
|
||||||
import PropTypes from 'prop-types';
|
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 =>
|
const colorWithDefaultValue = props =>
|
||||||
props.value === props.defaultValue ? props.theme.disabled : colorWithDisabled(props);
|
props.value === props.defaultValue
|
||||||
|
? props.theme.disabled
|
||||||
|
: colorWithDisabled(props);
|
||||||
|
|
||||||
const color = props =>
|
const color = props =>
|
||||||
props.defaultValue ? colorWithDefaultValue(props) : colorWithDisabled(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));
|
const paddingTop = props => (props.multiple ? remcalc(20) : remcalc(13));
|
||||||
|
|
||||||
|
@ -230,7 +234,8 @@ BaseInput.propTypes = {
|
||||||
export default BaseInput;
|
export default BaseInput;
|
||||||
|
|
||||||
export const Stylable = Component => {
|
export const Stylable = Component => {
|
||||||
const stylable = typeof Component === 'string' ? styled[Component] : styled(Component);
|
const stylable =
|
||||||
|
typeof Component === 'string' ? styled[Component] : styled(Component);
|
||||||
|
|
||||||
return stylable`
|
return stylable`
|
||||||
${style}
|
${style}
|
||||||
|
|
|
@ -138,12 +138,10 @@ const ToggleBase = ({ container = null, type = 'radio' }) =>
|
||||||
[type]: true
|
[type]: true
|
||||||
};
|
};
|
||||||
|
|
||||||
const render = (
|
const render = ({
|
||||||
{
|
|
||||||
id, // ignore id from value
|
id, // ignore id from value
|
||||||
...oldValue
|
...oldValue
|
||||||
} = {}
|
} = {}) => {
|
||||||
) => {
|
|
||||||
const newValue = {
|
const newValue = {
|
||||||
...oldValue,
|
...oldValue,
|
||||||
id: rndId()
|
id: rndId()
|
||||||
|
@ -163,7 +161,12 @@ const ToggleBase = ({ container = null, type = 'radio' }) =>
|
||||||
|
|
||||||
const toggle = (
|
const toggle = (
|
||||||
<InnerContainer {...types} type={type} {...rest}>
|
<InnerContainer {...types} type={type} {...rest}>
|
||||||
<StyledInput {...rest} id={newValue.id} type={type} checked={checked} />
|
<StyledInput
|
||||||
|
{...rest}
|
||||||
|
id={newValue.id}
|
||||||
|
type={type}
|
||||||
|
checked={checked}
|
||||||
|
/>
|
||||||
<Label
|
<Label
|
||||||
{...types}
|
{...types}
|
||||||
htmlFor={newValue.id}
|
htmlFor={newValue.id}
|
||||||
|
|
|
@ -84,8 +84,8 @@ const InputLabel = styled.label`
|
||||||
left: 0;
|
left: 0;
|
||||||
border-radius: 2em;
|
border-radius: 2em;
|
||||||
background: ${props => props.theme.white};
|
background: ${props => props.theme.white};
|
||||||
transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), padding 0.3s ease,
|
transition: left 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275),
|
||||||
margin 0.3s ease, box-shadow 0.3s ease;
|
padding 0.3s ease, margin 0.3s ease, box-shadow 0.3s ease;
|
||||||
|
|
||||||
box-shadow: 0 0 0 ${remcalc(1)} ${props => props.theme.grey};
|
box-shadow: 0 0 0 ${remcalc(1)} ${props => props.theme.grey};
|
||||||
}
|
}
|
||||||
|
@ -154,6 +154,8 @@ const BaseToggle = BaseInput(({ children, ...rest }) => {
|
||||||
/**
|
/**
|
||||||
* @example ./usage-toggle.md
|
* @example ./usage-toggle.md
|
||||||
*/
|
*/
|
||||||
const Toggle = ({ children, ...rest }) => <BaseToggle {...rest}>{children}</BaseToggle>;
|
const Toggle = ({ children, ...rest }) => (
|
||||||
|
<BaseToggle {...rest}>{children}</BaseToggle>
|
||||||
|
);
|
||||||
|
|
||||||
export default Toggle;
|
export default Toggle;
|
||||||
|
|
|
@ -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>
|
|
||||||
);
|
|
|
@ -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';
|
|
|
@ -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>
|
|
||||||
);
|
|
|
@ -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
Loading…
Reference in New Issue