smaller and simpler Card api (#821)
* feat(ui-toolkit): smaller and simpler Card api fixes: #809 fixes: #777 * feat(ui-toolkit) - Make adjustments to header (#824) * feat(ui-toolkit) - Make adjustments to header * feat(ui-toolkit) - Make adjustments to header * add issue and pull request templates (#819) * feat(all) - Add issue and pull ruequest templates * Update PULL_REQUEST_TEMPLATE.md * Create COMMIT_GUIDELINES.md * Update PULL_REQUEST_TEMPLATE.md * Update PULL_REQUEST_TEMPLATE.md * Update COMMIT_GUIDELINES.md * feat(ui-toolkit): smaller and simpler Card api fixes: #809 fixes: #777
This commit is contained in:
parent
f7eb8a276c
commit
d84f972fbe
|
@ -1,3 +1,4 @@
|
||||||
packages/*/**
|
packages/*/**
|
||||||
|
prototypes/*/**
|
||||||
artifacts
|
artifacts
|
||||||
reports
|
reports
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
{
|
{
|
||||||
"extends": "joyent-portal",
|
"extends": "joyent-portal",
|
||||||
"rules": {
|
"rules": {
|
||||||
|
"jsx-a11y/href-no-hash": 0,
|
||||||
"new-cap": 0,
|
"new-cap": 0,
|
||||||
"no-console": 0
|
"no-console": 0
|
||||||
}
|
}
|
||||||
|
|
52
package.json
52
package.json
|
@ -10,8 +10,8 @@
|
||||||
"format-staged": "./scripts/format --staged",
|
"format-staged": "./scripts/format --staged",
|
||||||
"lint-license": "./scripts/license-to-fail",
|
"lint-license": "./scripts/license-to-fail",
|
||||||
"lint-docs": "./scripts/quality-docs",
|
"lint-docs": "./scripts/quality-docs",
|
||||||
"lint-ci:root": "eslint scripts/*",
|
"lint-ci:root": "eslint . --ext .js --ext .md",
|
||||||
"lint:root": "eslint . --fix",
|
"lint:root": "eslint . --fix --ext .js --ext .md",
|
||||||
"lint-ci:packages": "lerna run lint-ci",
|
"lint-ci:packages": "lerna run lint-ci",
|
||||||
"lint:packages": "lerna run lint",
|
"lint:packages": "lerna run lint",
|
||||||
"lint-ci": "redrun -s lint-ci:*",
|
"lint-ci": "redrun -s lint-ci:*",
|
||||||
|
@ -20,19 +20,17 @@
|
||||||
"test": "lerna run test",
|
"test": "lerna run test",
|
||||||
"clean": "lerna clean --yes",
|
"clean": "lerna clean --yes",
|
||||||
"bootstrap": "lerna bootstrap",
|
"bootstrap": "lerna bootstrap",
|
||||||
"dev":
|
"dev": "lerna run dev --stream --parallel --scope my-joy-beta --scope cloudapi-gql",
|
||||||
"lerna run dev --stream --parallel --scope my-joy-beta --scope cloudapi-gql",
|
"start": "lerna run start --stream --parallel --scope my-joy-beta --scope cloudapi-gql",
|
||||||
"start":
|
|
||||||
"lerna run start --stream --parallel --scope my-joy-beta --scope cloudapi-gql",
|
|
||||||
"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",
|
"postinstall": "lerna run prepublish",
|
||||||
"commit": "commit"
|
"commit": "commit"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@commitlint/cli": "^3.2.0",
|
"@commitlint/cli": "^4.2.1",
|
||||||
"@commitlint/config-angular": "^3.1.1",
|
"@commitlint/config-angular": "^4.2.1",
|
||||||
"@commitlint/prompt-cli": "^3.2.0",
|
"@commitlint/prompt-cli": "^4.2.1",
|
||||||
"apr-awaitify": "^1.0.4",
|
"apr-awaitify": "^1.0.4",
|
||||||
"apr-filter": "^1.0.5",
|
"apr-filter": "^1.0.5",
|
||||||
"apr-for-each": "^1.0.6",
|
"apr-for-each": "^1.0.6",
|
||||||
|
@ -40,36 +38,33 @@
|
||||||
"apr-map": "^1.0.5",
|
"apr-map": "^1.0.5",
|
||||||
"apr-parallel": "^1.0.5",
|
"apr-parallel": "^1.0.5",
|
||||||
"apr-reduce": "^1.0.5",
|
"apr-reduce": "^1.0.5",
|
||||||
"babel-eslint": "^7.2.3",
|
"babel-eslint": "^8.0.1",
|
||||||
"checksum": "^0.1.1",
|
"checksum": "^0.1.1",
|
||||||
"cross-env": "^5.0.5",
|
"cross-env": "^5.1.0",
|
||||||
"eslint": "^4.5.0",
|
"eslint": "^4.9.0",
|
||||||
"eslint-config-joyent-portal": "^3.0.0",
|
"eslint-config-joyent-portal": "^3.2.0",
|
||||||
"eslint-config-prettier": "^2.3.0",
|
"eslint-config-prettier": "^2.6.0",
|
||||||
"eslint-config-react-app": "^2.0.0",
|
"eslint-config-react-app": "^2.0.1",
|
||||||
"eslint-config-xo-space": "^0.16.0",
|
"eslint-config-xo-space": "^0.17.0",
|
||||||
"eslint-gh-status-reporter": "^1.0.7",
|
"eslint-plugin-flowtype": "^2.39.1",
|
||||||
"eslint-plugin-flowtype": "^2.35.1",
|
"eslint-plugin-graphql": "^1.4.0-1",
|
||||||
"eslint-plugin-graphql": "^1.3.0",
|
"eslint-plugin-import": "^2.8.0",
|
||||||
"eslint-plugin-import": "^2.7.0",
|
|
||||||
"eslint-plugin-jsx-a11y": "^6.0.2",
|
"eslint-plugin-jsx-a11y": "^6.0.2",
|
||||||
"eslint-plugin-markdown": "^1.0.0-beta.6",
|
"eslint-plugin-markdown": "^1.0.0-beta.6",
|
||||||
"eslint-plugin-prettier": "^2.2.0",
|
"eslint-plugin-prettier": "^2.3.1",
|
||||||
"eslint-plugin-react": "^7.3.0",
|
"eslint-plugin-react": "^7.4.0",
|
||||||
"execa": "^0.8.0",
|
"execa": "^0.8.0",
|
||||||
"force-array": "^3.1.0",
|
"force-array": "^3.1.0",
|
||||||
"husky": "^0.14.3",
|
"husky": "^0.14.3",
|
||||||
"lerna": "^2.1.2",
|
"lerna": "^2.4.0",
|
||||||
"license-to-fail": "^2.2.0",
|
"license-to-fail": "^2.2.0",
|
||||||
"lighthouse-gh-status-reporter": "^1.0.12",
|
|
||||||
"lodash.uniq": "^4.5.0",
|
"lodash.uniq": "^4.5.0",
|
||||||
"prettier": "1.6.1",
|
"prettier": "1.7.4",
|
||||||
"quality-docs": "^3.3.0",
|
"quality-docs": "^3.3.0",
|
||||||
"read-pkg": "^2.0.0",
|
"read-pkg": "^2.0.0",
|
||||||
"redrun": "^5.9.17",
|
"redrun": "^5.9.18",
|
||||||
"staged-git-files": "0.0.4",
|
"staged-git-files": "0.0.4",
|
||||||
"stylelint-gh-status-reporter": "^1.0.7",
|
"yargs": "^10.0.3"
|
||||||
"yargs": "^8.0.2"
|
|
||||||
},
|
},
|
||||||
"workspaces": [
|
"workspaces": [
|
||||||
"packages/*",
|
"packages/*",
|
||||||
|
@ -81,6 +76,7 @@
|
||||||
"lodash.defaults": "4.2.0",
|
"lodash.defaults": "4.2.0",
|
||||||
"lodash.assign": "4.2.0",
|
"lodash.assign": "4.2.0",
|
||||||
"graphql": "0.11.7",
|
"graphql": "0.11.7",
|
||||||
|
"isarray": "'2.0.2",
|
||||||
"moment": "2.19.1",
|
"moment": "2.19.1",
|
||||||
"codemirror": "5.30.0",
|
"codemirror": "5.30.0",
|
||||||
"react": "16.0.0",
|
"react": "16.0.0",
|
||||||
|
|
|
@ -2,6 +2,7 @@
|
||||||
"extends": "joyent-portal",
|
"extends": "joyent-portal",
|
||||||
"plugins": ["graphql"],
|
"plugins": ["graphql"],
|
||||||
"rules": {
|
"rules": {
|
||||||
|
"jsx-a11y/href-no-hash": 0,
|
||||||
"graphql/template-strings": ["error", {
|
"graphql/template-strings": ["error", {
|
||||||
"env": "apollo"
|
"env": "apollo"
|
||||||
}],
|
}],
|
||||||
|
|
|
@ -19,7 +19,7 @@
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@2fd/graphdoc": "^2.4.0",
|
"@2fd/graphdoc": "^2.4.0",
|
||||||
"apollo-errors": "^1.5.1",
|
"apollo-errors": "^1.5.1",
|
||||||
"apollo-server-hapi": "^1.1.6",
|
"apollo-server-hapi": "^1.1.7",
|
||||||
"apr-awaitify": "^1.0.4",
|
"apr-awaitify": "^1.0.4",
|
||||||
"boom": "^6.0.0",
|
"boom": "^6.0.0",
|
||||||
"bunyan": "^1.8.12",
|
"bunyan": "^1.8.12",
|
||||||
|
@ -29,8 +29,8 @@
|
||||||
"good": "^7.3.0",
|
"good": "^7.3.0",
|
||||||
"good-console": "^6.4.0",
|
"good-console": "^6.4.0",
|
||||||
"good-squeeze": "^5.0.2",
|
"good-squeeze": "^5.0.2",
|
||||||
"graphql-playground": "^1.0.8",
|
"graphql-playground": "^1.0.33",
|
||||||
"graphql-tools": "^2.3.0",
|
"graphql-tools": "^2.6.1",
|
||||||
"graphql-voyager": "^1.0.0-rc.9",
|
"graphql-voyager": "^1.0.0-rc.9",
|
||||||
"hapi": "^16.6.2",
|
"hapi": "^16.6.2",
|
||||||
"hasha": "^3.0.0",
|
"hasha": "^3.0.0",
|
||||||
|
@ -41,10 +41,10 @@
|
||||||
"triton": "^5.4.0"
|
"triton": "^5.4.0"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"eslint": "^4.8.0",
|
"eslint": "^4.9.0",
|
||||||
"eslint-config-joyent-portal": "3.1.0",
|
"eslint-config-joyent-portal": "^3.2.0",
|
||||||
"eslint-plugin-graphql": "^1.4.0-1",
|
"eslint-plugin-graphql": "^1.4.0-1",
|
||||||
"graphql-faker": "^1.4.0",
|
"graphql-faker": "^1.5.0",
|
||||||
"nodemon": "^1.12.1",
|
"nodemon": "^1.12.1",
|
||||||
"prettier": "^1.7.4"
|
"prettier": "^1.7.4"
|
||||||
},
|
},
|
||||||
|
|
|
@ -7,6 +7,7 @@
|
||||||
// temp
|
// temp
|
||||||
"no-undef": 1,
|
"no-undef": 1,
|
||||||
"no-debugger": 1,
|
"no-debugger": 1,
|
||||||
"no-negated-condition": 0
|
"no-negated-condition": 0,
|
||||||
|
"jsx-a11y/href-no-hash": 0
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
|
@ -9,23 +9,21 @@
|
||||||
"dev": "REACT_APP_GQL_PORT=4000 PORT=3069 REACT_APP_GQL_PROTOCOL=http joyent-react-scripts start",
|
"dev": "REACT_APP_GQL_PORT=4000 PORT=3069 REACT_APP_GQL_PROTOCOL=http joyent-react-scripts start",
|
||||||
"start": "PORT=3069 joyent-react-scripts start",
|
"start": "PORT=3069 joyent-react-scripts start",
|
||||||
"build": "NODE_ENV=production joyent-react-scripts build",
|
"build": "NODE_ENV=production joyent-react-scripts build",
|
||||||
"lint:css": "stylelint './src/**/*.js'",
|
"lint-ci": "eslint . --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
|
||||||
"lint:js": "eslint . --fix",
|
"lint": "eslint . --fix --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
|
||||||
"lint": "redrun -s lint:*",
|
|
||||||
"test": "NODE_ENV=test ./test/run --env=jsdom",
|
|
||||||
"test-ci": "echo 0 `# NODE_ENV=test ./test/run --env=jsdom --coverage`",
|
"test-ci": "echo 0 `# NODE_ENV=test ./test/run --env=jsdom --coverage`",
|
||||||
|
"test": "NODE_ENV=test ./test/run --env=jsdom",
|
||||||
"prepublish": "echo 0"
|
"prepublish": "echo 0"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"@manaflair/redux-batch": "^0.1.0",
|
"@manaflair/redux-batch": "^0.1.0",
|
||||||
"apollo": "^0.2.2",
|
"apollo": "^0.2.2",
|
||||||
"eslint-plugin-markdown": "^1.0.0-beta.6",
|
"joyent-ui-toolkit": "^2.0.1",
|
||||||
"joyent-ui-toolkit": "^2.0.0",
|
|
||||||
"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",
|
||||||
"lodash.sortby": "^4.7.0",
|
"lodash.sortby": "^4.7.0",
|
||||||
"lunr": "^2.1.3",
|
"lunr": "^2.1.4",
|
||||||
"moment": "^2.19.1",
|
"moment": "^2.19.1",
|
||||||
"normalized-styled-components": "^1.0.17",
|
"normalized-styled-components": "^1.0.17",
|
||||||
"param-case": "^2.1.1",
|
"param-case": "^2.1.1",
|
||||||
|
@ -33,7 +31,7 @@
|
||||||
"react": "^16.0.0",
|
"react": "^16.0.0",
|
||||||
"react-apollo": "^1.4.16",
|
"react-apollo": "^1.4.16",
|
||||||
"react-dom": "^16.0.0",
|
"react-dom": "^16.0.0",
|
||||||
"react-json-view": "^1.13.0",
|
"react-json-view": "^1.13.1",
|
||||||
"react-redux": "^5.0.6",
|
"react-redux": "^5.0.6",
|
||||||
"react-router": "^4.2.0",
|
"react-router": "^4.2.0",
|
||||||
"react-router-dom": "^4.2.2",
|
"react-router-dom": "^4.2.2",
|
||||||
|
@ -41,14 +39,14 @@
|
||||||
"redux-actions": "^2.2.1",
|
"redux-actions": "^2.2.1",
|
||||||
"redux-form": "^7.1.1",
|
"redux-form": "^7.1.1",
|
||||||
"remcalc": "^1.0.9",
|
"remcalc": "^1.0.9",
|
||||||
"styled-components": "^2.2.1",
|
"styled-components": "^2.2.2",
|
||||||
"title-case": "^2.1.1"
|
"title-case": "^2.1.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"babel-plugin-inline-react-svg": "^0.4.0",
|
"babel-plugin-inline-react-svg": "^0.4.0",
|
||||||
"babel-preset-joyent-portal": "^3.3.3",
|
"babel-preset-joyent-portal": "^3.3.3",
|
||||||
"eslint": "^4.8.0",
|
"eslint": "^4.9.0",
|
||||||
"eslint-config-joyent-portal": "3.1.0",
|
"eslint-config-joyent-portal": "^3.2.0",
|
||||||
"jest": "^21.2.1",
|
"jest": "^21.2.1",
|
||||||
"jest-alias-preprocessor": "^1.1.1",
|
"jest-alias-preprocessor": "^1.1.1",
|
||||||
"jest-cli": "^21.2.1",
|
"jest-cli": "^21.2.1",
|
||||||
|
@ -56,12 +54,12 @@
|
||||||
"jest-junit": "^3.1.0",
|
"jest-junit": "^3.1.0",
|
||||||
"jest-matcher-utils": "^21.2.1",
|
"jest-matcher-utils": "^21.2.1",
|
||||||
"jest-snapshot": "^21.2.1",
|
"jest-snapshot": "^21.2.1",
|
||||||
"jest-styled-components": "^4.7.0",
|
"jest-styled-components": "^4.9.0",
|
||||||
"jest-transform-graphql": "^2.1.0",
|
"jest-transform-graphql": "^2.1.0",
|
||||||
"joyent-react-scripts": "^2.2.1",
|
"joyent-react-scripts": "^2.6.0",
|
||||||
"react-test-renderer": "^16.0.0",
|
"react-test-renderer": "^16.0.0",
|
||||||
"redrun": "^5.9.18",
|
"redrun": "^5.9.18",
|
||||||
"serve": "^6.2.0",
|
"serve": "^6.3.1",
|
||||||
"stylelint": "^8.2.0",
|
"stylelint": "^8.2.0",
|
||||||
"stylelint-config-joyent-portal": "^2.0.1"
|
"stylelint-config-joyent-portal": "^2.0.1"
|
||||||
}
|
}
|
||||||
|
|
|
@ -16,12 +16,12 @@ export default ({
|
||||||
onCancel = () => {}
|
onCancel = () => {}
|
||||||
}) => {
|
}) => {
|
||||||
const _error = error &&
|
const _error = error &&
|
||||||
!submitting && (
|
!submitting && (
|
||||||
<Message error>
|
<Message error>
|
||||||
<MessageTitle>Ooops!</MessageTitle>
|
<MessageTitle>Ooops!</MessageTitle>
|
||||||
<MessageDescription>{error}</MessageDescription>
|
<MessageDescription>{error}</MessageDescription>
|
||||||
</Message>
|
</Message>
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<form onSubmit={handleSubmit}>
|
<form onSubmit={handleSubmit}>
|
||||||
|
|
|
@ -8,10 +8,16 @@ import {
|
||||||
CardTitle,
|
CardTitle,
|
||||||
CardLabel,
|
CardLabel,
|
||||||
CardView,
|
CardView,
|
||||||
|
CardOptions,
|
||||||
Checkbox,
|
Checkbox,
|
||||||
FormGroup,
|
FormGroup,
|
||||||
QueryBreakpoints,
|
QueryBreakpoints,
|
||||||
StatusLoader
|
StatusLoader,
|
||||||
|
PopoverContainer,
|
||||||
|
PopoverTarget,
|
||||||
|
PopoverItem,
|
||||||
|
PopoverDivider,
|
||||||
|
Popover
|
||||||
} from 'joyent-ui-toolkit';
|
} from 'joyent-ui-toolkit';
|
||||||
|
|
||||||
const { SmallOnly, Small } = QueryBreakpoints;
|
const { SmallOnly, Small } = QueryBreakpoints;
|
||||||
|
@ -65,6 +71,18 @@ export default ({ name, state, primary_ip, loading, last, first }) => (
|
||||||
</SmallOnly>
|
</SmallOnly>
|
||||||
)}
|
)}
|
||||||
</CardMeta>
|
</CardMeta>
|
||||||
|
<PopoverContainer clickable>
|
||||||
|
<PopoverTarget>
|
||||||
|
<CardOptions />
|
||||||
|
</PopoverTarget>
|
||||||
|
<Popover placement="right-start">
|
||||||
|
<PopoverItem>Scale</PopoverItem>
|
||||||
|
<PopoverItem>Restart</PopoverItem>
|
||||||
|
<PopoverItem>Stop</PopoverItem>
|
||||||
|
<PopoverDivider />
|
||||||
|
<PopoverItem>Delete</PopoverItem>
|
||||||
|
</Popover>
|
||||||
|
</PopoverContainer>
|
||||||
</CardView>
|
</CardView>
|
||||||
</Card>
|
</Card>
|
||||||
);
|
);
|
||||||
|
|
|
@ -86,12 +86,12 @@ export default ({
|
||||||
) : null;
|
) : null;
|
||||||
|
|
||||||
const _error = error &&
|
const _error = error &&
|
||||||
!submitting && (
|
!submitting && (
|
||||||
<Message error>
|
<Message error>
|
||||||
<MessageTitle>Ooops!</MessageTitle>
|
<MessageTitle>Ooops!</MessageTitle>
|
||||||
<MessageDescription>{error}</MessageDescription>
|
<MessageDescription>{error}</MessageDescription>
|
||||||
</Message>
|
</Message>
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<form>
|
<form>
|
||||||
|
|
|
@ -51,11 +51,11 @@ export default ({
|
||||||
const _snapshots = forceArray(snapshots);
|
const _snapshots = forceArray(snapshots);
|
||||||
|
|
||||||
const _loading = !_snapshots.length &&
|
const _loading = !_snapshots.length &&
|
||||||
loading && (
|
loading && (
|
||||||
<ViewContainer center>
|
<ViewContainer center>
|
||||||
<StatusLoader />
|
<StatusLoader />
|
||||||
</ViewContainer>
|
</ViewContainer>
|
||||||
);
|
);
|
||||||
|
|
||||||
const items = _snapshots.map((snapshot, i, all) => {
|
const items = _snapshots.map((snapshot, i, all) => {
|
||||||
const { name } = snapshot;
|
const { name } = snapshot;
|
||||||
|
@ -75,12 +75,12 @@ export default ({
|
||||||
});
|
});
|
||||||
|
|
||||||
const _error = error &&
|
const _error = error &&
|
||||||
!submitting && (
|
!submitting && (
|
||||||
<Message error>
|
<Message error>
|
||||||
<MessageTitle>Ooops!</MessageTitle>
|
<MessageTitle>Ooops!</MessageTitle>
|
||||||
<MessageDescription>{error}</MessageDescription>
|
<MessageDescription>{error}</MessageDescription>
|
||||||
</Message>
|
</Message>
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<form
|
<form
|
||||||
|
|
|
@ -34,20 +34,20 @@ const CreateSnapshot = ({
|
||||||
})(InstanceCreateSnapshot);
|
})(InstanceCreateSnapshot);
|
||||||
|
|
||||||
const _error = error &&
|
const _error = error &&
|
||||||
!instance &&
|
!instance &&
|
||||||
!_loading && (
|
!_loading && (
|
||||||
<Message error>
|
<Message error>
|
||||||
<MessageTitle>Ooops!</MessageTitle>
|
<MessageTitle>Ooops!</MessageTitle>
|
||||||
<MessageDescription>
|
<MessageDescription>
|
||||||
An error occurred while loading your instance
|
An error occurred while loading your instance
|
||||||
</MessageDescription>
|
</MessageDescription>
|
||||||
</Message>
|
</Message>
|
||||||
);
|
);
|
||||||
|
|
||||||
const _form = !loading &&
|
const _form = !loading &&
|
||||||
!_error && (
|
!_error && (
|
||||||
<CreateSnapshotForm onSubmit={handleSubmit} onCancel={handleCancel} />
|
<CreateSnapshotForm onSubmit={handleSubmit} onCancel={handleCancel} />
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ViewContainer center={Boolean(_loading)} main>
|
<ViewContainer center={Boolean(_loading)} main>
|
||||||
|
|
|
@ -43,15 +43,15 @@ const Snapshots = ({
|
||||||
const _loading = !_values.length && loading;
|
const _loading = !_values.length && loading;
|
||||||
|
|
||||||
const _error = error &&
|
const _error = error &&
|
||||||
!_loading &&
|
!_loading &&
|
||||||
!_values.length && (
|
!_values.length && (
|
||||||
<Message error>
|
<Message error>
|
||||||
<MessageTitle>Ooops!</MessageTitle>
|
<MessageTitle>Ooops!</MessageTitle>
|
||||||
<MessageDescription>
|
<MessageDescription>
|
||||||
An error occurred while loading your instance snapshots
|
An error occurred while loading your instance snapshots
|
||||||
</MessageDescription>
|
</MessageDescription>
|
||||||
</Message>
|
</Message>
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ViewContainer main>
|
<ViewContainer main>
|
||||||
|
@ -81,15 +81,13 @@ export default compose(
|
||||||
const { name } = variables;
|
const { name } = variables;
|
||||||
const instance = find(get(rest, 'machines', []), ['name', name]);
|
const instance = find(get(rest, 'machines', []), ['name', name]);
|
||||||
|
|
||||||
const snapshots = get(
|
const snapshots = get(instance, 'snapshots', []).map(
|
||||||
instance,
|
({ created, updated, ...rest }) => ({
|
||||||
'snapshots',
|
...rest,
|
||||||
[]
|
created: moment.utc(created).unix(),
|
||||||
).map(({ created, updated, ...rest }) => ({
|
updated: moment.utc(updated).unix()
|
||||||
...rest,
|
})
|
||||||
created: moment.utc(created).unix(),
|
);
|
||||||
updated: moment.utc(updated).unix()
|
|
||||||
}));
|
|
||||||
|
|
||||||
const index = GenIndex(
|
const index = GenIndex(
|
||||||
snapshots.map(({ name, ...rest }) => ({ ...rest, id: name }))
|
snapshots.map(({ name, ...rest }) => ({ ...rest, id: name }))
|
||||||
|
|
|
@ -24,15 +24,15 @@ const Summary = ({ instance, loading, error }) => {
|
||||||
const _summary = !_loading && instance && <ReactJson src={instance} />;
|
const _summary = !_loading && instance && <ReactJson src={instance} />;
|
||||||
|
|
||||||
const _error = error &&
|
const _error = error &&
|
||||||
!_loading &&
|
!_loading &&
|
||||||
!instance && (
|
!instance && (
|
||||||
<Message error>
|
<Message error>
|
||||||
<MessageTitle>Ooops!</MessageTitle>
|
<MessageTitle>Ooops!</MessageTitle>
|
||||||
<MessageDescription>
|
<MessageDescription>
|
||||||
An error occurred while loading your instance summary
|
An error occurred while loading your instance summary
|
||||||
</MessageDescription>
|
</MessageDescription>
|
||||||
</Message>
|
</Message>
|
||||||
);
|
);
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<ViewContainer center={Boolean(_loading)} main>
|
<ViewContainer center={Boolean(_loading)} main>
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
{
|
{
|
||||||
"extends": "joyent-portal",
|
"extends": "joyent-portal",
|
||||||
"rules": {
|
"rules": {
|
||||||
|
"no-console": 1,
|
||||||
"new-cap": 0,
|
"new-cap": 0,
|
||||||
"jsx-a11y/href-no-hash": 0
|
"jsx-a11y/href-no-hash": 0
|
||||||
}
|
}
|
||||||
|
|
|
@ -21,6 +21,7 @@ yarn add --dev joyent-portal-ui-toolkit
|
||||||
## Usage
|
## Usage
|
||||||
|
|
||||||
```js
|
```js
|
||||||
|
import React from 'react';
|
||||||
import { H1 } from 'joyent-portal-ui-toolkit';
|
import { H1 } from 'joyent-portal-ui-toolkit';
|
||||||
|
|
||||||
export default () => <H1>Hello World</H1>;
|
export default () => <H1>Hello World</H1>;
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');
|
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono');
|
||||||
|
@import url('https://fonts.googleapis.com/css?family=Libre+Franklin');
|
||||||
|
|
||||||
body .rsg--sidebar-4 {
|
body .rsg--sidebar-4 {
|
||||||
padding: 36px 30px;
|
padding: 36px 30px;
|
||||||
|
|
|
@ -1,25 +1,31 @@
|
||||||
{
|
{
|
||||||
"name": "joyent-ui-toolkit",
|
"name": "joyent-ui-toolkit",
|
||||||
"version": "2.0.0",
|
"version": "2.0.1",
|
||||||
"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",
|
||||||
"jsnext:main": "dist/es/index.js",
|
"jsnext:main": "dist/es/index.js",
|
||||||
"module": "dist/es/index.js",
|
"module": "dist/es/index.js",
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"lint:css": "echo 0",
|
"lint-ci":
|
||||||
"lint:js": "eslint . --fix",
|
"eslint . --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
|
||||||
"lint": "redrun -s lint:*",
|
"lint":
|
||||||
|
"eslint . --fix --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
|
||||||
"test-ci": "echo 0",
|
"test-ci": "echo 0",
|
||||||
"test": "echo 0",
|
"test": "echo 0",
|
||||||
"test:visual": "run-p serve jest",
|
"test:visual": "run-p serve jest",
|
||||||
"jest": "jest",
|
"jest": "jest",
|
||||||
"serve": "http-server styleguide -p 6060 -s",
|
"serve": "http-server styleguide -p 6060 -s",
|
||||||
"copy-fonts": "rm -rf dist; mkdir -p dist/es/typography; mkdir -p dist/umd/typography; cp -r src/typography/libre-franklin dist/es/typography; cp -r src/typography/libre-franklin dist/umd/typography",
|
"copy-fonts":
|
||||||
"compile-watch:es": "NODE_ENV=development babel src --out-dir dist/es --source-maps inline --watch",
|
"rm -rf dist; mkdir -p dist/es/typography; mkdir -p dist/umd/typography; cp -r src/typography/libre-franklin dist/es/typography; cp -r src/typography/libre-franklin dist/umd/typography",
|
||||||
"compile:es": "NODE_ENV=development babel src --out-dir dist/es --source-maps inline",
|
"compile-watch:es":
|
||||||
"compile:umd": "NODE_ENV=test babel src --out-dir dist/umd --source-maps inline",
|
"NODE_ENV=development babel src --out-dir dist/es --source-maps inline --watch",
|
||||||
"compile-watch:umd": "NODE_ENV=test babel src --out-dir dist/umd --source-maps inline --watch",
|
"compile:es":
|
||||||
|
"NODE_ENV=development babel src --out-dir dist/es --source-maps inline",
|
||||||
|
"compile:umd":
|
||||||
|
"NODE_ENV=test babel src --out-dir dist/umd --source-maps inline",
|
||||||
|
"compile-watch:umd":
|
||||||
|
"NODE_ENV=test babel src --out-dir dist/umd --source-maps inline --watch",
|
||||||
"compile": "redrun -p compile:*",
|
"compile": "redrun -p compile:*",
|
||||||
"watch": "redrun copy-fonts && redrun -p compile-watch:*",
|
"watch": "redrun copy-fonts && redrun -p compile-watch:*",
|
||||||
"styleguide:build": "NODE_ENV=production styleguidist build",
|
"styleguide:build": "NODE_ENV=production styleguidist build",
|
||||||
|
@ -40,66 +46,52 @@
|
||||||
"prop-types": "^15.6.0",
|
"prop-types": "^15.6.0",
|
||||||
"react-bundle": "^1.0.4",
|
"react-bundle": "^1.0.4",
|
||||||
"react-input-range": "^1.2.1",
|
"react-input-range": "^1.2.1",
|
||||||
"react-popper": "^0.7.3",
|
"react-popper": "^0.7.4",
|
||||||
"react-responsive": "^2.0.0",
|
"react-responsive": "^3.0.0",
|
||||||
"react-styled-flexboxgrid": "^2.1.0",
|
"react-styled-flexboxgrid": "^2.1.0",
|
||||||
"redrun": "^5.9.18",
|
"redrun": "^5.9.18",
|
||||||
"remcalc": "^1.0.9",
|
"remcalc": "^1.0.9",
|
||||||
"rnd-id": "^1.1.1",
|
"rnd-id": "^1.1.1",
|
||||||
"styled-components": "^2.2.1",
|
"styled-components": "^2.2.2",
|
||||||
"styled-is": "^1.1.0",
|
"styled-is": "^1.1.0",
|
||||||
"unitcalc": "^1.1.1"
|
"unitcalc": "^1.1.1"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"babel-cli": "^6.26.0",
|
"babel-cli": "^6.26.0",
|
||||||
"babel-core": "^6.26.0",
|
|
||||||
"babel-loader": "^7.1.2",
|
|
||||||
"babel-plugin-add-module-exports": "^0.2.1",
|
|
||||||
"babel-plugin-inline-react-svg": "^0.4.0",
|
"babel-plugin-inline-react-svg": "^0.4.0",
|
||||||
"babel-plugin-lodash": "^3.2.11",
|
"babel-plugin-lodash": "^3.2.11",
|
||||||
"babel-plugin-transform-es3-member-expression-literals": "^6.22.0",
|
"babel-plugin-transform-es3-member-expression-literals": "^6.22.0",
|
||||||
"babel-plugin-transform-es3-property-literals": "^6.22.0",
|
"babel-plugin-transform-es3-property-literals": "^6.22.0",
|
||||||
"babel-preset-es2015": "^6.24.1",
|
"babel-preset-es2015": "^6.24.1",
|
||||||
"babel-preset-joyent-portal": "^3.3.3",
|
"babel-preset-joyent-portal": "^3.3.3",
|
||||||
"babel-preset-stage-0": "^6.24.1",
|
"codemirror": "^5.31.0",
|
||||||
"chart.js": "^2.7.0",
|
|
||||||
"codemirror": "^5.30.0",
|
|
||||||
"css-loader": "^0.28.7",
|
|
||||||
"eslint": "^4.9.0",
|
"eslint": "^4.9.0",
|
||||||
"eslint-config-joyent-portal": "3.1.0",
|
"eslint-config-joyent-portal": "^3.2.0",
|
||||||
"file-loader": "^1.1.5",
|
|
||||||
"http-server": "^0.10.0",
|
"http-server": "^0.10.0",
|
||||||
"jest": "^21.2.1",
|
"jest": "^21.2.1",
|
||||||
"jest-diff": "^21.2.1",
|
"jest-diff": "^21.2.1",
|
||||||
"jest-image-snapshot": "^1.0.1",
|
"jest-image-snapshot": "^1.0.1",
|
||||||
"jest-matcher-utils": "^21.2.1",
|
"jest-matcher-utils": "^21.2.1",
|
||||||
"jest-snapshot": "^21.2.1",
|
"jest-snapshot": "^21.2.1",
|
||||||
"jest-styled-components": "^4.7.1",
|
"jest-styled-components": "^4.9.0",
|
||||||
"lodash-webpack-plugin": "^0.11.4",
|
"joyent-react-scripts": "^2.6.0",
|
||||||
"navalia": "^1.2.0",
|
"navalia": "^1.2.0",
|
||||||
"react": "^16.0.0",
|
"react": "^16.0.0",
|
||||||
"react-docgen": "^2.19.0",
|
"react-docgen": "^3.0.0-beta8",
|
||||||
"react-docgen-displayname-handler": "^1.0.1",
|
"react-docgen-displayname-handler": "^1.0.1",
|
||||||
"react-dom": "^16.0.0",
|
"react-dom": "^16.0.0",
|
||||||
"react-redux": "^5.0.6",
|
"react-redux": "^5.0.6",
|
||||||
"react-router-dom": "^4.2.2",
|
"react-router-dom": "^4.2.2",
|
||||||
"react-scripts": "^1.0.14",
|
|
||||||
"react-styleguidist": "^6.0.31",
|
"react-styleguidist": "^6.0.31",
|
||||||
"react-test-renderer": "^16.0.0",
|
"react-test-renderer": "^16.0.0",
|
||||||
"redux": "^3.7.2",
|
"redux": "^3.7.2",
|
||||||
"redux-form": "^7.1.1",
|
"redux-form": "^7.1.1",
|
||||||
"serve-static": "^1.13.1",
|
"serve-static": "^1.13.1",
|
||||||
"snapguidist": "^2.1.0",
|
|
||||||
"style-loader": "^0.19.0",
|
|
||||||
"stylelint": "^8.2.0",
|
"stylelint": "^8.2.0",
|
||||||
"stylelint-config-joyent-portal": "^2.0.1",
|
"stylelint-config-joyent-portal": "^2.0.1",
|
||||||
"svg-inline-loader": "^0.8.0",
|
|
||||||
"uglifyjs-webpack-plugin": "^1.0.0-beta.3",
|
|
||||||
"url-loader": "^0.6.2",
|
|
||||||
"webpack": "^3.8.1"
|
"webpack": "^3.8.1"
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"chart.js": "^2.7.0",
|
|
||||||
"react": "^16.0.0",
|
"react": "^16.0.0",
|
||||||
"react-dom": "^16.0.0",
|
"react-dom": "^16.0.0",
|
||||||
"react-router-dom": "^4.2.2",
|
"react-router-dom": "^4.2.2",
|
||||||
|
|
|
@ -65,7 +65,8 @@ accordingly.
|
||||||
#### examples
|
#### examples
|
||||||
|
|
||||||
```
|
```
|
||||||
const Button = require('../button').default;
|
const React = require('react');
|
||||||
|
const { default: Button } = require('../button');
|
||||||
|
|
||||||
<span>
|
<span>
|
||||||
<Button marginRight='1'>margin-right: 1</Button>
|
<Button marginRight='1'>margin-right: 1</Button>
|
||||||
|
|
|
@ -2,18 +2,51 @@ import { css } from 'styled-components';
|
||||||
import remcalc from 'remcalc';
|
import remcalc from 'remcalc';
|
||||||
|
|
||||||
export const borderRadius = remcalc(4);
|
export const borderRadius = remcalc(4);
|
||||||
export const bottomShadow = `0 ${remcalc(2)} 0 0 rgba(0, 0, 0, 0.05)`;
|
|
||||||
export const bottomShadowDarker = `0 ${remcalc(2)} 0 0 rgba(0, 0, 0, 0.1)`;
|
export const bottomShadow = `
|
||||||
export const insetShaddow = `inset 0 ${remcalc(3)} 0 0 rgba(0, 0, 0, 0.05)`;
|
/* trick prettier */
|
||||||
export const tooltipShadow = `0 ${remcalc(2)} ${remcalc(6)} ${remcalc(
|
0 ${remcalc(2)} 0 0 rgba(0, 0, 0, 0.05)
|
||||||
1
|
`;
|
||||||
)} rgba(0, 0, 0, 0.1)`;
|
|
||||||
export const modalShadow = `0 0 ${remcalc(6)} ${remcalc(1)} rgba(0, 0, 0, 0.1)`;
|
export const bottomShadowDarker = `
|
||||||
|
/* trick prettier */
|
||||||
|
0 ${remcalc(2)} 0 0 rgba(0, 0, 0, 0.1)
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const insetShadow = `
|
||||||
|
/* trick prettier */
|
||||||
|
inset 0 ${remcalc(3)} 0 0 rgba(0, 0, 0, 0.05)
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const tooltipShadow = `
|
||||||
|
/* trick prettier */
|
||||||
|
0 ${remcalc(2)} ${remcalc(6)} ${remcalc(1)} rgba(0, 0, 0, 0.1)
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const modalShadow = `
|
||||||
|
/* trick prettier */
|
||||||
|
0 0 ${remcalc(6)} ${remcalc(1)} rgba(0, 0, 0, 0.1)
|
||||||
|
`;
|
||||||
|
|
||||||
export const border = {
|
export const border = {
|
||||||
checked: css`${remcalc(1)} solid ${props => props.theme.primary};`,
|
checked: css`
|
||||||
unchecked: css`${remcalc(1)} solid ${props => props.theme.grey};`,
|
/* trick prettier */
|
||||||
confirmed: css`${remcalc(1)} solid ${props => props.theme.grey};`,
|
${remcalc(1)} solid ${props => props.theme.primary};
|
||||||
error: css`${remcalc(1)} solid ${props => props.theme.red};`,
|
`,
|
||||||
secondary: css`${remcalc(1)} solid ${props => props.theme.secondaryActive};`
|
unchecked: css`
|
||||||
|
/* trick prettier */
|
||||||
|
${remcalc(1)} solid ${props => props.theme.grey};
|
||||||
|
`,
|
||||||
|
confirmed: css`
|
||||||
|
/* trick prettier */
|
||||||
|
${remcalc(1)} solid ${props => props.theme.grey};
|
||||||
|
`,
|
||||||
|
error: css`
|
||||||
|
/* trick prettier */
|
||||||
|
${remcalc(1)} solid ${props => props.theme.red};
|
||||||
|
`,
|
||||||
|
secondary: css`
|
||||||
|
/* trick prettier */
|
||||||
|
${remcalc(1)} solid ${props => props.theme.secondaryActive};
|
||||||
|
`
|
||||||
};
|
};
|
||||||
|
|
|
@ -1,6 +1,7 @@
|
||||||
```
|
```
|
||||||
const Breadcrumb = require('./index.js').default;
|
const React = require('react');
|
||||||
const BreadcrumbItem = require('./item.js').default;
|
const { default: Breadcrumb } = require('./index.js');
|
||||||
|
const { default: BreadcrumbItem } = require('./item.js');
|
||||||
|
|
||||||
<Breadcrumb>
|
<Breadcrumb>
|
||||||
<BreadcrumbItem>Home</BreadcrumbItem>
|
<BreadcrumbItem>Home</BreadcrumbItem>
|
||||||
|
|
|
@ -1,4 +1,7 @@
|
||||||
```jsx
|
```jsx
|
||||||
|
const React = require('react');
|
||||||
|
const { default: Button } = require('./');
|
||||||
|
|
||||||
<span>
|
<span>
|
||||||
<Button>Inspire the lazy</Button>
|
<Button>Inspire the lazy</Button>
|
||||||
<span> </span>
|
<span> </span>
|
||||||
|
@ -9,6 +12,9 @@
|
||||||
#### Button > Secondary
|
#### Button > Secondary
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
|
const React = require('react');
|
||||||
|
const { default: Button } = require('./');
|
||||||
|
|
||||||
<span>
|
<span>
|
||||||
<Button secondary>Inspire the brave</Button>
|
<Button secondary>Inspire the brave</Button>
|
||||||
<span> </span>
|
<span> </span>
|
||||||
|
@ -21,6 +27,9 @@
|
||||||
#### Button > Tertiary
|
#### Button > Tertiary
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
|
const React = require('react');
|
||||||
|
const { default: Button } = require('./');
|
||||||
|
|
||||||
<span>
|
<span>
|
||||||
<Button tertiary>Inspire the tertiary</Button>
|
<Button tertiary>Inspire the tertiary</Button>
|
||||||
<span> </span>
|
<span> </span>
|
||||||
|
@ -37,6 +46,9 @@
|
||||||
#### Button > Disabled
|
#### Button > Disabled
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
|
const React = require('react');
|
||||||
|
const { default: Button } = require('./');
|
||||||
|
|
||||||
<span>
|
<span>
|
||||||
<Button disabled>Inspire the liars</Button>
|
<Button disabled>Inspire the liars</Button>
|
||||||
<span> </span>
|
<span> </span>
|
||||||
|
@ -49,6 +61,9 @@
|
||||||
#### Button > Loading
|
#### Button > Loading
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
|
const React = require('react');
|
||||||
|
const { default: Button } = require('./');
|
||||||
|
|
||||||
<span>
|
<span>
|
||||||
<Button secondary loading>
|
<Button secondary loading>
|
||||||
Inspire the liars
|
Inspire the liars
|
||||||
|
|
|
@ -1,12 +0,0 @@
|
||||||
import remcalc from 'remcalc';
|
|
||||||
import Title from './title';
|
|
||||||
|
|
||||||
export default Title.extend`
|
|
||||||
line-height: 1;
|
|
||||||
width: ${remcalc(24)};
|
|
||||||
padding-right: 0;
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
flex: none;
|
|
||||||
`;
|
|
|
@ -1,164 +1,135 @@
|
||||||
import { Broadcast, Subscriber } from 'joy-react-broadcast';
|
|
||||||
import Baseline from '../baseline';
|
|
||||||
import paperEffect from './paper-effect';
|
|
||||||
import { bottomShadow, bottomShadowDarker } from '../boxes';
|
|
||||||
import remcalc from 'remcalc';
|
|
||||||
import is, { isNot } from 'styled-is';
|
|
||||||
import { Row } from 'react-styled-flexboxgrid';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { Broadcast } from 'joy-react-broadcast';
|
||||||
|
import styled, { css } from 'styled-components';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import is, { isNot } from 'styled-is';
|
||||||
|
import remcalc from 'remcalc';
|
||||||
|
|
||||||
const StyledCard = Row.extend`
|
import Baseline from '../baseline';
|
||||||
position: relative;
|
import { bottomShadow, bottomShadowDarker } from '../boxes';
|
||||||
height: auto;
|
|
||||||
min-height: ${remcalc(126)};
|
const paperEffect = css`
|
||||||
margin-bottom: ${remcalc(10)};
|
margin-bottom: ${remcalc(16)};
|
||||||
border: ${remcalc(1)} solid ${props => props.theme.grey};
|
box-shadow: 0 ${remcalc(8)} 0 ${remcalc(-5)}
|
||||||
background-color: ${props => props.theme.white};
|
${props => props.theme.background},
|
||||||
box-shadow: ${bottomShadow};
|
0 ${remcalc(8)} ${remcalc(1)} ${remcalc(-4)} ${props => props.theme.grey},
|
||||||
|
0 ${remcalc(16)} 0 ${remcalc(-10)} ${props => props.theme.background},
|
||||||
|
0 ${remcalc(16)} ${remcalc(1)} ${remcalc(-9)} ${props => props.theme.grey};
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const BaseCard = styled.div`
|
||||||
|
box-sizing: content-box;
|
||||||
|
display: flex;
|
||||||
|
flex: 1 0 auto;
|
||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
|
|
||||||
margin-right: ${remcalc(0)};
|
height: auto;
|
||||||
margin-left: ${remcalc(0)};
|
min-height: ${remcalc(125)};
|
||||||
|
position: relative;
|
||||||
|
|
||||||
${is('collapsed')`
|
margin-bottom: 0;
|
||||||
min-height: auto;
|
|
||||||
height: ${remcalc(48)};
|
transition: all 300ms ease;
|
||||||
margin-bottom: ${remcalc(16)};
|
|
||||||
|
border-width: ${remcalc(1)};
|
||||||
|
border-style: solid;
|
||||||
|
|
||||||
|
/* primary */
|
||||||
|
color: ${props => props.theme.text};
|
||||||
|
background-color: ${props => props.theme.white};
|
||||||
|
border-color: ${props => props.theme.grey};
|
||||||
|
|
||||||
|
${is('shadow')`
|
||||||
|
/* primary */
|
||||||
|
box-shadow: ${bottomShadow};
|
||||||
|
|
||||||
|
/* if disabled, shadow is the same */
|
||||||
|
${isNot('disabled')`
|
||||||
|
${is('secondary')`
|
||||||
|
box-shadow: ${bottomShadowDarker};
|
||||||
|
`};
|
||||||
|
|
||||||
|
${is('tertiary')`
|
||||||
|
box-shadow: 0 ${remcalc(2)} 0 rgba(0, 0, 0, 0.05);
|
||||||
|
`};
|
||||||
|
|
||||||
|
${is('stacked')`
|
||||||
|
box-shadow: ${paperEffect};
|
||||||
|
`};
|
||||||
|
`};
|
||||||
`};
|
`};
|
||||||
|
|
||||||
${is('collapsed', 'headed')`
|
${is('secondary')`
|
||||||
box-shadow: ${bottomShadowDarker};
|
color: ${props => props.theme.white};
|
||||||
|
background-color: ${props => props.theme.primary};
|
||||||
|
border-color: ${props => props.theme.primaryActive};
|
||||||
`};
|
`};
|
||||||
|
|
||||||
${is('flat')`
|
${is('tertiary')`
|
||||||
box-shadow: none;
|
color: ${props => props.theme.text};
|
||||||
|
background-color: ${props => props.theme.background};
|
||||||
|
border-color: ${props => props.theme.grey};
|
||||||
|
border-radius: ${remcalc(4)};
|
||||||
|
min-width: ${remcalc(292)};
|
||||||
|
|
||||||
|
${is('active')`
|
||||||
|
border-color: ${props => props.theme.primary};
|
||||||
|
background: ${props => props.theme.tertiaryActive};
|
||||||
|
box-shadow: none;
|
||||||
|
`};
|
||||||
`};
|
`};
|
||||||
|
|
||||||
${is('bottomless')`
|
${is('actionable')`
|
||||||
border-bottom-width: 0;
|
|
||||||
height: ${remcalc(47)};
|
|
||||||
`};
|
|
||||||
|
|
||||||
${is('gapless')`
|
|
||||||
margin-bottom: 0;
|
|
||||||
`};
|
|
||||||
|
|
||||||
${is('topMargin')`
|
|
||||||
margin-top: ${remcalc(10)};
|
|
||||||
`};
|
|
||||||
|
|
||||||
${is('icon')`
|
|
||||||
background: url(${props => props.icon}) no-repeat scroll ${remcalc(
|
|
||||||
7
|
|
||||||
)} ${remcalc(7)};
|
|
||||||
padding-left: ${remcalc(30)};
|
|
||||||
`};
|
|
||||||
|
|
||||||
${is('transparent')`
|
|
||||||
border-radius: 4px;
|
|
||||||
border: 1px solid ${props => props.theme.grey};
|
|
||||||
background: ${props => props.theme.background};
|
|
||||||
box-shadow: 0px 2px 0px rgba(0, 0, 0, 0.05);
|
|
||||||
min-height: ${remcalc(185)};
|
|
||||||
min-width: 292px;
|
|
||||||
cursor: pointer;
|
cursor: pointer;
|
||||||
transition: all 300ms ease;
|
|
||||||
`};
|
|
||||||
|
|
||||||
${is('transparent', 'selected')`
|
|
||||||
border: 1px solid ${props => props.theme.primary};
|
|
||||||
background: ${props => props.theme.tertiaryActive};
|
|
||||||
box-shadow: none;
|
|
||||||
`};
|
|
||||||
|
|
||||||
${is('stacked')`
|
|
||||||
${paperEffect}
|
|
||||||
`};
|
`};
|
||||||
|
|
||||||
${is('disabled')`
|
${is('disabled')`
|
||||||
|
border-color: ${props => props.theme.grey};
|
||||||
background-color: ${props => props.theme.disabled};
|
background-color: ${props => props.theme.disabled};
|
||||||
|
color: ${props => props.theme.text};
|
||||||
|
cursor: default;
|
||||||
`};
|
`};
|
||||||
|
|
||||||
${isNot('active')`
|
${is('collapsed')`
|
||||||
background-color: ${props => props.theme.disabled};
|
min-height: auto;
|
||||||
|
height: ${remcalc(46)};
|
||||||
|
flex: 0 0 ${remcalc(46)};
|
||||||
`};
|
`};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* @example ./usage.md
|
* @example ./demo.md
|
||||||
*/
|
*/
|
||||||
const Card = ({
|
const Card = ({ children, ...rest }) => (
|
||||||
children,
|
<Broadcast channel="card" value={rest}>
|
||||||
collapsed = false,
|
<BaseCard {...rest} name="card">
|
||||||
headed = false,
|
{children}
|
||||||
active = true,
|
</BaseCard>
|
||||||
...rest
|
</Broadcast>
|
||||||
}) => {
|
);
|
||||||
const render = value => {
|
|
||||||
const newValue = {
|
|
||||||
fromHeader: (value || {}).fromHeader,
|
|
||||||
headed,
|
|
||||||
collapsed,
|
|
||||||
active
|
|
||||||
};
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Broadcast channel="card" value={newValue}>
|
|
||||||
<StyledCard
|
|
||||||
name="card"
|
|
||||||
active={active}
|
|
||||||
collapsed={collapsed}
|
|
||||||
headed={headed}
|
|
||||||
{...rest}
|
|
||||||
>
|
|
||||||
{children}
|
|
||||||
</StyledCard>
|
|
||||||
</Broadcast>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
return <Subscriber channel="card">{render}</Subscriber>;
|
|
||||||
};
|
|
||||||
|
|
||||||
Card.propTypes = {
|
Card.propTypes = {
|
||||||
/**
|
|
||||||
* Contents of the Card
|
|
||||||
*/
|
|
||||||
children: PropTypes.node,
|
children: PropTypes.node,
|
||||||
/**
|
secondary: PropTypes.bool,
|
||||||
* Is it collapsed ?
|
tertiary: PropTypes.bool,
|
||||||
*/
|
|
||||||
collapsed: PropTypes.bool,
|
collapsed: PropTypes.bool,
|
||||||
/**
|
disabled: PropTypes.bool,
|
||||||
* Does it have a header
|
|
||||||
*/
|
|
||||||
headed: PropTypes.bool,
|
|
||||||
/**
|
|
||||||
* Setting this to true will remove the box shadow
|
|
||||||
*/
|
|
||||||
flat: PropTypes.bool,
|
|
||||||
/**
|
|
||||||
* If set to true a paper effect will be added
|
|
||||||
*/
|
|
||||||
stacked: PropTypes.bool,
|
stacked: PropTypes.bool,
|
||||||
/**
|
active: PropTypes.bool,
|
||||||
* Transparent will set the card as secondary
|
shadow: PropTypes.bool,
|
||||||
*/
|
actionable: PropTypes.bool
|
||||||
transparent: PropTypes.bool,
|
|
||||||
/**
|
|
||||||
* When set to false or using disabled you will see the disabled card
|
|
||||||
*/
|
|
||||||
active: PropTypes.bool
|
|
||||||
};
|
};
|
||||||
|
|
||||||
Card.defaultProps = {
|
Card.defaultProps = {
|
||||||
|
children: null,
|
||||||
collapsed: false,
|
collapsed: false,
|
||||||
headed: false,
|
secondary: false,
|
||||||
flat: false,
|
tertiary: false,
|
||||||
|
disabled: false,
|
||||||
stacked: false,
|
stacked: false,
|
||||||
transparent: false,
|
active: false,
|
||||||
active: true
|
shadow: false,
|
||||||
|
actionable: false
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Baseline(Card);
|
export default Baseline(Card);
|
||||||
|
|
|
@ -0,0 +1,438 @@
|
||||||
|
```jsx
|
||||||
|
const React = require('react');
|
||||||
|
const { Card } = require('.');
|
||||||
|
|
||||||
|
<Card />;
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Card > Shadow
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
const React = require('react');
|
||||||
|
const { Card } = require('.');
|
||||||
|
|
||||||
|
<Card shadow />;
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Card > Headed > Collapsed
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
const React = require('react');
|
||||||
|
const { Card, Header, HeaderBox, HeaderMeta } = require('.');
|
||||||
|
const { Row, Col } = require('react-styled-flexboxgrid');
|
||||||
|
const { H4, P } = require('../text');
|
||||||
|
|
||||||
|
const {
|
||||||
|
InstancesIconLight,
|
||||||
|
IconActionsLight
|
||||||
|
} = require('../icons');
|
||||||
|
|
||||||
|
<Card shadow collapsed>
|
||||||
|
<Header>
|
||||||
|
<HeaderMeta>
|
||||||
|
<Row between="xs" middle="xs">
|
||||||
|
<Col xs={4} sm={9} md={10}>
|
||||||
|
<H4>Nginx</H4>
|
||||||
|
</Col>
|
||||||
|
<Col xs={8} sm={3} md={2}>
|
||||||
|
<P>
|
||||||
|
<InstancesIconLight marginRight="0.5" /> 4 of 4 instances
|
||||||
|
</P>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</HeaderMeta>
|
||||||
|
<HeaderBox border="left" actionable>
|
||||||
|
<IconActionsLight />
|
||||||
|
</HeaderBox>
|
||||||
|
</Header>
|
||||||
|
</Card>;
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Card > Headed
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
const React = require('react');
|
||||||
|
const { Card, Header, HeaderBox, HeaderMeta, Outlet } = require('.');
|
||||||
|
const { Row, Col } = require('react-styled-flexboxgrid');
|
||||||
|
const { H4, P } = require('../text');
|
||||||
|
|
||||||
|
const {
|
||||||
|
InstancesIconLight,
|
||||||
|
HealthyIcon,
|
||||||
|
IconActionsLight
|
||||||
|
} = require('../icons');
|
||||||
|
|
||||||
|
<Card shadow>
|
||||||
|
<Header>
|
||||||
|
<HeaderMeta>
|
||||||
|
<Row between="xs" middle="xs">
|
||||||
|
<Col xs={4} sm={9} md={10}>
|
||||||
|
<H4>Nginx</H4>
|
||||||
|
</Col>
|
||||||
|
<Col xs={8} sm={3} md={2}>
|
||||||
|
<P>
|
||||||
|
<InstancesIconLight marginRight="0.5" /> 4 of 4 instances
|
||||||
|
</P>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</HeaderMeta>
|
||||||
|
<HeaderBox border="left" actionable>
|
||||||
|
<IconActionsLight />
|
||||||
|
</HeaderBox>
|
||||||
|
</Header>
|
||||||
|
<Outlet>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flex: '1 0 auto',
|
||||||
|
flexDirection: 'row',
|
||||||
|
alignSelf: 'stretch',
|
||||||
|
justifyContent: 'flex-end',
|
||||||
|
alignContent: 'stretch',
|
||||||
|
alignItems: 'stretch'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<P style={{ flex: '1 0 auto', alignSelf: 'flex-end' }}>
|
||||||
|
<HealthyIcon width="18" /> Healthy
|
||||||
|
</P>
|
||||||
|
</div>
|
||||||
|
</Outlet>
|
||||||
|
</Card>;
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Card > Single State
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
const React = require('react');
|
||||||
|
const { Card, Header, HeaderBox, HeaderMeta, Outlet } = require('.');
|
||||||
|
const { Row, Col } = require('react-styled-flexboxgrid');
|
||||||
|
const { H4, P, Small } = require('../text');
|
||||||
|
|
||||||
|
const {
|
||||||
|
InstancesIconLight,
|
||||||
|
IconActionsLight
|
||||||
|
} = require('../icons');
|
||||||
|
|
||||||
|
<Card shadow>
|
||||||
|
<Header>
|
||||||
|
<HeaderMeta>
|
||||||
|
<Row between="xs" middle="xs">
|
||||||
|
<Col xs={4} sm={9} md={10}>
|
||||||
|
<H4>Nginx</H4>
|
||||||
|
</Col>
|
||||||
|
<Col xs={8} sm={3} md={2}>
|
||||||
|
<P>
|
||||||
|
<InstancesIconLight marginRight="0.5" /> 4 of 4 instances
|
||||||
|
</P>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</HeaderMeta>
|
||||||
|
<HeaderBox border="left" actionable>
|
||||||
|
<IconActionsLight />
|
||||||
|
</HeaderBox>
|
||||||
|
</Header>
|
||||||
|
<Outlet>
|
||||||
|
<Small style={{ paddingBottom: '0' }}>1 instance paused</Small>
|
||||||
|
<Small style={{ paddingBottom: '0' }}>1 instances stopped</Small>
|
||||||
|
<Small style={{ paddingBottom: '0' }}>1 instance not responding</Small>
|
||||||
|
</Outlet>
|
||||||
|
</Card>;
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Card > Provisioning
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
const React = require('react');
|
||||||
|
const { Card, Header, HeaderBox, HeaderMeta, Outlet } = require('.');
|
||||||
|
const { Row, Col } = require('react-styled-flexboxgrid');
|
||||||
|
const { H4, P } = require('../text');
|
||||||
|
const { default: StatusLoader } = require('../status-loader');
|
||||||
|
|
||||||
|
const {
|
||||||
|
IconActions,
|
||||||
|
IconActionsLight,
|
||||||
|
InstancesIconLight,
|
||||||
|
HealthyIcon
|
||||||
|
} = require('../icons');
|
||||||
|
|
||||||
|
[
|
||||||
|
<Row>
|
||||||
|
<Col xs={12}>
|
||||||
|
<Card collapsed disabled>
|
||||||
|
<Header>
|
||||||
|
<HeaderMeta>
|
||||||
|
<Row middle="xs">
|
||||||
|
<Col xs={2} sm={1} md={1}>
|
||||||
|
<H4>Nginx</H4>
|
||||||
|
</Col>
|
||||||
|
<Col xs={8} sm={4} md={2}>
|
||||||
|
<StatusLoader marginLeft="0" inline row msg="Provisioning" />
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</HeaderMeta>
|
||||||
|
<HeaderBox border="left" actionable>
|
||||||
|
<IconActions />
|
||||||
|
</HeaderBox>
|
||||||
|
</Header>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
</Row>,
|
||||||
|
<br />,
|
||||||
|
<Row>
|
||||||
|
<Col xs={12}>
|
||||||
|
<Card shadow>
|
||||||
|
<Header>
|
||||||
|
<HeaderMeta>
|
||||||
|
<Row between="xs" middle="xs">
|
||||||
|
<Col xs={4} sm={9} md={10}>
|
||||||
|
<H4>Nginx</H4>
|
||||||
|
</Col>
|
||||||
|
<Col xs={8} sm={3} md={2}>
|
||||||
|
<P>
|
||||||
|
<InstancesIconLight marginRight="0.5" /> 4 of 4 instances
|
||||||
|
</P>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</HeaderMeta>
|
||||||
|
<HeaderBox border="left" actionable>
|
||||||
|
<IconActionsLight />
|
||||||
|
</HeaderBox>
|
||||||
|
</Header>
|
||||||
|
<Outlet>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flex: '1 0 auto',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignSelf: 'stretch',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignContent: 'stretch',
|
||||||
|
alignItems: 'stretch'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ flex: '0 1 auto', alignSelf: 'flex-start' }}>
|
||||||
|
<StatusLoader
|
||||||
|
marginLeft="0"
|
||||||
|
inline
|
||||||
|
row
|
||||||
|
msg="Provisioning 3 instances"
|
||||||
|
/>
|
||||||
|
</div>
|
||||||
|
<P style={{ flex: '0 1 auto', alignSelf: 'stretch' }}>
|
||||||
|
<HealthyIcon width="18" /> Healthy
|
||||||
|
</P>
|
||||||
|
</div>
|
||||||
|
</Outlet>
|
||||||
|
</Card>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
];
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Card > Disabled
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
const React = require('react');
|
||||||
|
const { Card, Header, HeaderBox, HeaderMeta, Outlet } = require('.');
|
||||||
|
const { Row, Col } = require('react-styled-flexboxgrid');
|
||||||
|
const { H4, P } = require('../text');
|
||||||
|
const { IconActions } = require('../icons');
|
||||||
|
|
||||||
|
<Card disabled shadow>
|
||||||
|
<Header>
|
||||||
|
<HeaderMeta>
|
||||||
|
<Row between="xs" middle="xs">
|
||||||
|
<Col xs={2} sm={9} md={10}>
|
||||||
|
<H4>Nginx</H4>
|
||||||
|
</Col>
|
||||||
|
<Col xs={5} sm={2} md={1}>
|
||||||
|
<P>1 Instance</P>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</HeaderMeta>
|
||||||
|
<HeaderBox border="left" actionable>
|
||||||
|
<IconActions />
|
||||||
|
</HeaderBox>
|
||||||
|
</Header>
|
||||||
|
<Outlet />
|
||||||
|
</Card>;
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Card > Instance
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
const React = require('react');
|
||||||
|
const { Card, Outlet } = require('.');
|
||||||
|
const { H4, P } = require('../text');
|
||||||
|
const { HealthyIcon } = require('../icons');
|
||||||
|
|
||||||
|
<Card>
|
||||||
|
<Outlet>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flex: '1 0 auto',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignSelf: 'stretch',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignContent: 'stretch',
|
||||||
|
alignItems: 'stretch'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ flex: '0 1 auto', alignSelf: 'flex-start' }}>
|
||||||
|
<H4>percona_primary</H4>
|
||||||
|
</div>
|
||||||
|
<P style={{ flex: '0 1 auto', alignSelf: 'stretch' }}>
|
||||||
|
<HealthyIcon width="18" /> Healthy
|
||||||
|
</P>
|
||||||
|
</div>
|
||||||
|
</Outlet>
|
||||||
|
</Card>;
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Card > Instance > Stacked
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
const React = require('react');
|
||||||
|
const { Card, Outlet } = require('.');
|
||||||
|
const { H4, P } = require('../text');
|
||||||
|
const { HealthyIcon } = require('../icons');
|
||||||
|
|
||||||
|
<Card stacked shadow>
|
||||||
|
<Outlet>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flex: '1 0 auto',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignSelf: 'stretch',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignContent: 'stretch',
|
||||||
|
alignItems: 'stretch'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ flex: '0 1 auto', alignSelf: 'flex-start' }}>
|
||||||
|
<H4>percona_primary</H4>
|
||||||
|
</div>
|
||||||
|
<P style={{ flex: '0 1 auto', alignSelf: 'stretch' }}>
|
||||||
|
<HealthyIcon width="18" /> Healthy
|
||||||
|
</P>
|
||||||
|
</div>
|
||||||
|
</Outlet>
|
||||||
|
</Card>;
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Card > Instance > Group
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
const React = require('react');
|
||||||
|
const { Card, Outlet } = require('.');
|
||||||
|
const { H4, P } = require('../text');
|
||||||
|
const { HealthyIcon } = require('../icons');
|
||||||
|
|
||||||
|
[
|
||||||
|
<Card marginBottom="6px">
|
||||||
|
<Outlet>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flex: '1 0 auto',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignSelf: 'stretch',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignContent: 'stretch',
|
||||||
|
alignItems: 'stretch'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ flex: '0 1 auto', alignSelf: 'flex-start' }}>
|
||||||
|
<H4>percona_secondary</H4>
|
||||||
|
</div>
|
||||||
|
<P style={{ flex: '0 1 auto', alignSelf: 'stretch' }}>
|
||||||
|
<HealthyIcon width="18" /> Healthy
|
||||||
|
</P>
|
||||||
|
</div>
|
||||||
|
</Outlet>
|
||||||
|
</Card>,
|
||||||
|
<Card marginBottom="6px">
|
||||||
|
<Outlet>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flex: '1 0 auto',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignSelf: 'stretch',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignContent: 'stretch',
|
||||||
|
alignItems: 'stretch'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ flex: '0 1 auto', alignSelf: 'flex-start' }}>
|
||||||
|
<H4>percona_secondary</H4>
|
||||||
|
</div>
|
||||||
|
<P style={{ flex: '0 1 auto', alignSelf: 'stretch' }}>
|
||||||
|
<HealthyIcon width="18" /> Healthy
|
||||||
|
</P>
|
||||||
|
</div>
|
||||||
|
</Outlet>
|
||||||
|
</Card>,
|
||||||
|
<Card shadow stacked>
|
||||||
|
<Outlet>
|
||||||
|
<div
|
||||||
|
style={{
|
||||||
|
display: 'flex',
|
||||||
|
flex: '1 0 auto',
|
||||||
|
flexDirection: 'column',
|
||||||
|
alignSelf: 'stretch',
|
||||||
|
justifyContent: 'space-between',
|
||||||
|
alignContent: 'stretch',
|
||||||
|
alignItems: 'stretch'
|
||||||
|
}}
|
||||||
|
>
|
||||||
|
<div style={{ flex: '0 1 auto', alignSelf: 'flex-start' }}>
|
||||||
|
<H4>percona_secondary</H4>
|
||||||
|
</div>
|
||||||
|
<P style={{ flex: '0 1 auto', alignSelf: 'stretch' }}>
|
||||||
|
<HealthyIcon width="18" /> Healthy
|
||||||
|
</P>
|
||||||
|
</div>
|
||||||
|
</Outlet>
|
||||||
|
</Card>
|
||||||
|
];
|
||||||
|
```
|
||||||
|
|
||||||
|
#### Card > Instance > List
|
||||||
|
|
||||||
|
```jsx
|
||||||
|
const React = require('react');
|
||||||
|
const { Card, Header, HeaderBox, HeaderMeta } = require('.');
|
||||||
|
const { Row, Col } = require('react-styled-flexboxgrid');
|
||||||
|
const { H4, P } = require('../text');
|
||||||
|
const { HealthyIcon, IconActions, DataCenterIcon } = require('../icons');
|
||||||
|
|
||||||
|
[
|
||||||
|
<Card collapsed>
|
||||||
|
<Header transparent>
|
||||||
|
<HeaderMeta>
|
||||||
|
<Row between="xs" middle="xs">
|
||||||
|
<Col xs={2} sm={9} md={10}>
|
||||||
|
<H4>Nginx</H4>
|
||||||
|
</Col>
|
||||||
|
<Col xs={5} sm={2} md={1}>
|
||||||
|
<P>
|
||||||
|
<HealthyIcon /> Healthy
|
||||||
|
</P>
|
||||||
|
</Col>
|
||||||
|
<Col xs={5} sm={2} md={1}>
|
||||||
|
<P>
|
||||||
|
<DataCenterIcon /> eu-ams-1
|
||||||
|
</P>
|
||||||
|
</Col>
|
||||||
|
</Row>
|
||||||
|
</HeaderMeta>
|
||||||
|
<HeaderBox border="left" actionable>
|
||||||
|
<IconActions />
|
||||||
|
</HeaderBox>
|
||||||
|
</Header>
|
||||||
|
</Card>
|
||||||
|
];
|
||||||
|
```
|
|
@ -1,67 +0,0 @@
|
||||||
import { Subscriber } from 'joy-react-broadcast';
|
|
||||||
import Baseline from '../baseline';
|
|
||||||
import typography from '../typography';
|
|
||||||
import is, { isNot } from 'styled-is';
|
|
||||||
import remcalc from 'remcalc';
|
|
||||||
import styled from 'styled-components';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import Title from './title';
|
|
||||||
import React from 'react';
|
|
||||||
|
|
||||||
const StyledTitle = Title.extend`
|
|
||||||
${typography.normal};
|
|
||||||
|
|
||||||
flex-grow: 1;
|
|
||||||
flex-basis: ${remcalc(90)};
|
|
||||||
|
|
||||||
${isNot('collapsed')`
|
|
||||||
padding-bottom: ${remcalc(12)};
|
|
||||||
`};
|
|
||||||
|
|
||||||
${is('disabled')`
|
|
||||||
color: ${props => props.theme.text};
|
|
||||||
`};
|
|
||||||
`;
|
|
||||||
|
|
||||||
const InnerDescription = styled.div`
|
|
||||||
justify-content: flex-start;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
height: 100%;
|
|
||||||
position: relative;
|
|
||||||
|
|
||||||
span {
|
|
||||||
display: flex;
|
|
||||||
flex-direction: column;
|
|
||||||
height: 100%;
|
|
||||||
align-items: flex-start;
|
|
||||||
justify-content: space-between;
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Description = ({ children, ...rest }) => {
|
|
||||||
const render = ({ collapsed = false }) => (
|
|
||||||
<StyledTitle
|
|
||||||
collapsed={collapsed}
|
|
||||||
name="card-description"
|
|
||||||
xs={collapsed ? 6 : 12}
|
|
||||||
{...rest}
|
|
||||||
>
|
|
||||||
<InnerDescription collapsed={collapsed}>
|
|
||||||
<span>{children}</span>
|
|
||||||
</InnerDescription>
|
|
||||||
</StyledTitle>
|
|
||||||
);
|
|
||||||
|
|
||||||
return <Subscriber channel="card">{render}</Subscriber>;
|
|
||||||
};
|
|
||||||
|
|
||||||
Description.propTypes = {
|
|
||||||
children: PropTypes.node,
|
|
||||||
/**
|
|
||||||
* @ignore
|
|
||||||
*/
|
|
||||||
collapsed: PropTypes.bool
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Baseline(Description);
|
|
|
@ -1,49 +0,0 @@
|
||||||
import { Subscriber } from 'joy-react-broadcast';
|
|
||||||
import is from 'styled-is';
|
|
||||||
import styled from 'styled-components';
|
|
||||||
import Baseline from '../baseline';
|
|
||||||
import typography from '../typography';
|
|
||||||
import theme from '../theme';
|
|
||||||
import remcalc from 'remcalc';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import Title from './title';
|
|
||||||
import React from 'react';
|
|
||||||
|
|
||||||
const StyledTitle = Title.extend`
|
|
||||||
${typography.normal};
|
|
||||||
|
|
||||||
flex-grow: 1;
|
|
||||||
flex-basis: ${remcalc(90)};
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Span = styled.span`
|
|
||||||
display: inline-block;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
${typography.normal};
|
|
||||||
font-size: ${remcalc(13)};
|
|
||||||
font-weight: 500;
|
|
||||||
text-transform: uppercase;
|
|
||||||
|
|
||||||
color: ${theme.greyTransparent};
|
|
||||||
transition: all 300ms ease;
|
|
||||||
|
|
||||||
${is('selected')`
|
|
||||||
color: rgba(41, 49, 194, 0.5);
|
|
||||||
`};
|
|
||||||
`;
|
|
||||||
const Footer = ({ children, selected }) => {
|
|
||||||
const render = () => (
|
|
||||||
<StyledTitle name="card-footer">
|
|
||||||
<Span selected={selected}>{children}</Span>
|
|
||||||
</StyledTitle>
|
|
||||||
);
|
|
||||||
|
|
||||||
return <Subscriber channel="card">{render}</Subscriber>;
|
|
||||||
};
|
|
||||||
|
|
||||||
Footer.propTypes = {
|
|
||||||
children: PropTypes.node
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Baseline(Footer);
|
|
|
@ -1,16 +0,0 @@
|
||||||
import remcalc from 'remcalc';
|
|
||||||
import Baseline from '../baseline';
|
|
||||||
import View from './view';
|
|
||||||
import React from 'react';
|
|
||||||
|
|
||||||
const StyledView = View.extend`
|
|
||||||
display: block;
|
|
||||||
padding: ${remcalc(12, 24, 6, 24)};
|
|
||||||
background-color: ${props => props.grey};
|
|
||||||
`;
|
|
||||||
|
|
||||||
const GroupView = ({ children, ...rest }) => (
|
|
||||||
<StyledView {...rest}>{children}</StyledView>
|
|
||||||
);
|
|
||||||
|
|
||||||
export default Baseline(GroupView);
|
|
|
@ -1,24 +1,39 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import { Broadcast, Subscriber } from 'joy-react-broadcast';
|
import { Broadcast, Subscriber } from 'joy-react-broadcast';
|
||||||
import remcalc from 'remcalc';
|
|
||||||
import PropTypes from 'prop-types';
|
import PropTypes from 'prop-types';
|
||||||
import is from 'styled-is';
|
import is, { isNot, isOr } from 'styled-is';
|
||||||
import Baseline from '../baseline';
|
import remcalc from 'remcalc';
|
||||||
import Card from './card';
|
|
||||||
|
|
||||||
const StyledCard = Card.extend`
|
import Baseline from '../baseline';
|
||||||
|
import Card, { BaseCard } from './card';
|
||||||
|
|
||||||
|
const BaseHeader = BaseCard.extend`
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
|
|
||||||
background-color: ${props => props.theme.primary};
|
|
||||||
border: solid ${remcalc(1)} ${props => props.theme.primary};
|
|
||||||
box-shadow: none;
|
|
||||||
|
|
||||||
width: calc(100% + ${remcalc(2)});
|
|
||||||
margin: ${remcalc(-1)} ${remcalc(-1)} 0 ${remcalc(-1)};
|
margin: ${remcalc(-1)} ${remcalc(-1)} 0 ${remcalc(-1)};
|
||||||
|
|
||||||
|
${is('parentCollapsed')`
|
||||||
|
margin: ${remcalc(-1)};
|
||||||
|
box-shadow: none;
|
||||||
|
`};
|
||||||
|
|
||||||
|
${isOr('tertiary', 'transparent')`
|
||||||
|
box-shadow: none;
|
||||||
|
background-color: transparent;
|
||||||
|
border-width: 0;
|
||||||
|
margin: 0;
|
||||||
|
`};
|
||||||
|
|
||||||
|
${isNot('secondary', 'tertiary')`
|
||||||
|
${is('transparent')`
|
||||||
|
color: ${props => props.theme.text};
|
||||||
|
`};
|
||||||
|
`};
|
||||||
|
|
||||||
${is('disabled')`
|
${is('disabled')`
|
||||||
background-color: ${props => props.theme.disabled};
|
color: ${props => props.theme.text};
|
||||||
border-color: ${props => props.theme.grey};
|
border-color: ${props => props.theme.grey};
|
||||||
|
box-shadow: none;
|
||||||
`};
|
`};
|
||||||
|
|
||||||
button {
|
button {
|
||||||
|
@ -27,26 +42,143 @@ const StyledCard = Card.extend`
|
||||||
}
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Header = ({ children, ...rest }) => {
|
const BaseBox = BaseCard.extend`
|
||||||
const render = value => {
|
width: ${remcalc(49)};
|
||||||
const { active } = value;
|
min-width: ${remcalc(49)};
|
||||||
|
height: ${remcalc(46)};
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex: 0 0 ${remcalc(49)};
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: center;
|
||||||
|
|
||||||
|
transition: background-color 0ms ease;
|
||||||
|
background-color: transparent;
|
||||||
|
border-width: 0;
|
||||||
|
border-radius: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
|
||||||
|
${is('border')`
|
||||||
|
border-right-width: ${props => (props.border === 'right' ? remcalc(1) : 0)};
|
||||||
|
border-left-width: ${props => (props.border === 'left' ? remcalc(1) : 0)};
|
||||||
|
`};
|
||||||
|
|
||||||
|
${is('actionable', 'secondary')`
|
||||||
|
&:hover {
|
||||||
|
background-color: ${props => props.theme.primaryHover};
|
||||||
|
}
|
||||||
|
`};
|
||||||
|
|
||||||
|
${is('disabled')`
|
||||||
|
color: ${props => props.theme.text};
|
||||||
|
border-color: ${props => props.theme.grey};
|
||||||
|
box-shadow: none;
|
||||||
|
|
||||||
|
&:hover {
|
||||||
|
background-color: transparent;
|
||||||
|
}
|
||||||
|
`};
|
||||||
|
`;
|
||||||
|
|
||||||
|
const BaseMeta = BaseCard.extend`
|
||||||
|
height: ${remcalc(47)};
|
||||||
|
width: auto;
|
||||||
|
min-width: auto;
|
||||||
|
padding: 0 ${remcalc(12)};
|
||||||
|
|
||||||
|
display: flex;
|
||||||
|
flex: 1 0 auto;
|
||||||
|
flex-direction: column;
|
||||||
|
justify-content: center;
|
||||||
|
align-items: stretch;
|
||||||
|
align-conent: stretch;
|
||||||
|
|
||||||
|
background-color: transparent;
|
||||||
|
border-width: 0;
|
||||||
|
box-shadow: none;
|
||||||
|
`;
|
||||||
|
|
||||||
|
export const Box = ({ children, border, actionable, ...rest }) => {
|
||||||
|
const render = ({ secondary, transparent, parentCollapsed, ...value }) => {
|
||||||
|
// if parent is collapsed, show border
|
||||||
|
// if parent is not collapsed, only if this is secondary and not transparent
|
||||||
|
const showBorder = parentCollapsed || (secondary && !transparent);
|
||||||
|
const newBorder = showBorder && border;
|
||||||
|
|
||||||
|
return (
|
||||||
|
<BaseBox
|
||||||
|
{...rest}
|
||||||
|
{...value}
|
||||||
|
name="card-header-box"
|
||||||
|
border={newBorder}
|
||||||
|
secondary={secondary}
|
||||||
|
transparent={transparent}
|
||||||
|
parentCollapsed={parentCollapsed}
|
||||||
|
actionable={actionable}
|
||||||
|
collapsed
|
||||||
|
>
|
||||||
|
{children}
|
||||||
|
</BaseBox>
|
||||||
|
);
|
||||||
|
};
|
||||||
|
|
||||||
|
return <Subscriber channel="card">{render}</Subscriber>;
|
||||||
|
};
|
||||||
|
|
||||||
|
Box.propTypes = {
|
||||||
|
...Card.propTypes,
|
||||||
|
children: PropTypes.node,
|
||||||
|
border: PropTypes.oneOf(['left', 'right'])
|
||||||
|
};
|
||||||
|
|
||||||
|
Box.defaultProps = {
|
||||||
|
...Card.defaultProps,
|
||||||
|
children: null,
|
||||||
|
border: null
|
||||||
|
};
|
||||||
|
|
||||||
|
export const Meta = ({ children, ...rest }) => (
|
||||||
|
<Subscriber channel="card">
|
||||||
|
{value => (
|
||||||
|
<BaseMeta {...rest} {...value} name="card-header-meta" collapsed>
|
||||||
|
{children}
|
||||||
|
</BaseMeta>
|
||||||
|
)}
|
||||||
|
</Subscriber>
|
||||||
|
);
|
||||||
|
|
||||||
|
const Header = ({ children, transparent, shadow, ...rest }) => {
|
||||||
|
const render = ({ secondary, tertiary, collapsed, ...value }) => {
|
||||||
|
const parentPrimary = !secondary && !tertiary;
|
||||||
|
// if transparent and parent is secondary, keep seconday
|
||||||
|
// if parent is secondary, keep being secondary or
|
||||||
|
// if parent is primary, become secondary
|
||||||
|
const isSecondary = transparent ? secondary : secondary || parentPrimary;
|
||||||
|
// if parent is primary, don't become transparent
|
||||||
|
const isTransparent = transparent || secondary || tertiary;
|
||||||
|
|
||||||
const newValue = {
|
const newValue = {
|
||||||
...value,
|
...value,
|
||||||
fromHeader: true
|
parentCollapsed: collapsed,
|
||||||
|
secondary: isSecondary,
|
||||||
|
tertiary,
|
||||||
|
transparent: isTransparent,
|
||||||
|
collapsed: true,
|
||||||
|
shadow: Boolean(shadow)
|
||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Broadcast channel="card" value={newValue}>
|
<Broadcast channel="card" value={newValue}>
|
||||||
<StyledCard
|
<BaseHeader
|
||||||
name="card-header"
|
|
||||||
active={active}
|
|
||||||
collapsed
|
|
||||||
headed
|
|
||||||
{...rest}
|
{...rest}
|
||||||
|
{...newValue}
|
||||||
|
name="card-header"
|
||||||
|
parentCollapsed={collapsed}
|
||||||
|
shadow={shadow}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
</StyledCard>
|
</BaseHeader>
|
||||||
</Broadcast>
|
</Broadcast>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
@ -58,4 +190,8 @@ Header.propTypes = {
|
||||||
children: PropTypes.node
|
children: PropTypes.node
|
||||||
};
|
};
|
||||||
|
|
||||||
|
Header.defaultProps = {
|
||||||
|
children: null
|
||||||
|
};
|
||||||
|
|
||||||
export default Baseline(Header);
|
export default Baseline(Header);
|
||||||
|
|
|
@ -1,19 +1,8 @@
|
||||||
export { default as CardDescription } from './description.js';
|
export { default as Card } from './card';
|
||||||
export { default as CardHeader } from './header.js';
|
export { default as Outlet } from './outlet';
|
||||||
export { default as CardGroupView } from './group-view.js';
|
|
||||||
export { default as Card } from './card.js';
|
|
||||||
export { default as CardMeta } from './meta.js';
|
|
||||||
export { default as CardOptions } from './options.js';
|
|
||||||
export { default as CardOutlet } from './outlet.js';
|
|
||||||
export { default as CardSubTitle } from './subtitle.js';
|
|
||||||
export { default as CardTitle } from './title.js';
|
|
||||||
export { default as CardAction } from './action.js';
|
|
||||||
export { default as CardView } from './view.js';
|
|
||||||
export { default as CardFooter } from './footer.js';
|
|
||||||
export { default as CardLabel } from './label.js';
|
|
||||||
|
|
||||||
export {
|
export {
|
||||||
default as CardInfo,
|
default as Header,
|
||||||
Label as CardInfoLabel,
|
Meta as HeaderMeta,
|
||||||
IconContainer as CardInfoIconContainer
|
Box as HeaderBox
|
||||||
} from './info.js';
|
} from './header';
|
||||||
|
|
|
@ -1,57 +0,0 @@
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import styled from 'styled-components';
|
|
||||||
import remcalc from 'remcalc';
|
|
||||||
import is from 'styled-is';
|
|
||||||
|
|
||||||
import BaseLabel from '../label';
|
|
||||||
|
|
||||||
export const Label = BaseLabel.extend`
|
|
||||||
display: inline-block;
|
|
||||||
margin-left: 0;
|
|
||||||
|
|
||||||
${is('light')`
|
|
||||||
color: ${props => props.theme.white};
|
|
||||||
`};
|
|
||||||
|
|
||||||
${is('disabled')`
|
|
||||||
color: ${props => props.theme.text};
|
|
||||||
`};
|
|
||||||
|
|
||||||
${is('left')`
|
|
||||||
margin-left: ${remcalc(12)};
|
|
||||||
`};
|
|
||||||
`;
|
|
||||||
|
|
||||||
Label.propTypes = {
|
|
||||||
light: PropTypes.bool,
|
|
||||||
disabled: PropTypes.bool,
|
|
||||||
left: PropTypes.bool
|
|
||||||
};
|
|
||||||
|
|
||||||
export const IconContainer = styled.div`
|
|
||||||
display: flex;
|
|
||||||
|
|
||||||
> svg {
|
|
||||||
${is('light')`
|
|
||||||
fill: ${props => props.theme.white};
|
|
||||||
`};
|
|
||||||
|
|
||||||
${is('disabled')`
|
|
||||||
fill: ${props => props.theme.text};
|
|
||||||
`};
|
|
||||||
}
|
|
||||||
`;
|
|
||||||
|
|
||||||
IconContainer.propTypes = {
|
|
||||||
light: PropTypes.bool,
|
|
||||||
disabled: PropTypes.bool
|
|
||||||
};
|
|
||||||
|
|
||||||
export default styled.div`
|
|
||||||
height: 100%;
|
|
||||||
float: right;
|
|
||||||
display: flex;
|
|
||||||
align-items: center;
|
|
||||||
justify-content: flex-end;
|
|
||||||
flex-direction: row;
|
|
||||||
`;
|
|
|
@ -1,73 +0,0 @@
|
||||||
import React from 'react';
|
|
||||||
import remcalc from 'remcalc';
|
|
||||||
import styled from 'styled-components';
|
|
||||||
import is, { isNot } from 'styled-is';
|
|
||||||
|
|
||||||
const Dot = styled.span`
|
|
||||||
width: ${remcalc(6)};
|
|
||||||
height: ${remcalc(6)};
|
|
||||||
border-radius: ${remcalc(3)};
|
|
||||||
|
|
||||||
${is('hasChildren')`
|
|
||||||
margin-left: ${remcalc(6)};
|
|
||||||
`};
|
|
||||||
|
|
||||||
background-color: ${props => props.theme[props.color]};
|
|
||||||
|
|
||||||
align-self: auto;
|
|
||||||
flex: none;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Icon = styled.span`
|
|
||||||
/* trick prettier */
|
|
||||||
background-color: none;
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Label = styled.label`
|
|
||||||
line-height: 1;
|
|
||||||
padding: 0 ${remcalc(18)};
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
flex: none;
|
|
||||||
|
|
||||||
align-items: center;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
min-width: ${remcalc(100)};
|
|
||||||
padding-left: 0;
|
|
||||||
|
|
||||||
${isNot('hasDot')`
|
|
||||||
min-width: ${remcalc(88)};
|
|
||||||
`};
|
|
||||||
|
|
||||||
${isNot('hasChildren')`
|
|
||||||
width: ${remcalc(6)};
|
|
||||||
min-width: ${remcalc(6)};
|
|
||||||
`};
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Span = styled.span`
|
|
||||||
align-self: auto;
|
|
||||||
flex: 1 1 auto;
|
|
||||||
|
|
||||||
${is('hasDot')`
|
|
||||||
text-align: right;
|
|
||||||
`};
|
|
||||||
`;
|
|
||||||
|
|
||||||
export default ({ color, icon, children, width, ...rest }) => {
|
|
||||||
const hasIcon = Boolean(icon);
|
|
||||||
const hasDot = hasIcon || Boolean(color);
|
|
||||||
|
|
||||||
const hasChildren = Array.isArray(children)
|
|
||||||
? children.length
|
|
||||||
: Boolean(children);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Label {...rest} hasDot={hasDot} hasChildren={hasChildren}>
|
|
||||||
{children && <Span hasDot={hasDot}>{children}</Span>}
|
|
||||||
{icon && <Icon>{icon}</Icon>}
|
|
||||||
{color && <Dot color={color} hasChildren={hasChildren} />}
|
|
||||||
</Label>
|
|
||||||
);
|
|
||||||
};
|
|
|
@ -1,61 +0,0 @@
|
||||||
import { Row, Col } from 'react-styled-flexboxgrid';
|
|
||||||
import { Subscriber } from 'joy-react-broadcast';
|
|
||||||
import Baseline from '../baseline';
|
|
||||||
import is from 'styled-is';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import View from './view';
|
|
||||||
import React from 'react';
|
|
||||||
|
|
||||||
const InnerRow = Row.extend`
|
|
||||||
display: block;
|
|
||||||
height: 100%;
|
|
||||||
|
|
||||||
position: absolute;
|
|
||||||
top: 50%;
|
|
||||||
transform: translateY(-50%);
|
|
||||||
|
|
||||||
${is('collapsed')`
|
|
||||||
width: 100%;
|
|
||||||
display: flex;
|
|
||||||
`};
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Meta = ({ children, ...rest }) => {
|
|
||||||
const render = ({
|
|
||||||
collapsed = false,
|
|
||||||
fromHeader = false,
|
|
||||||
headed = false
|
|
||||||
}) => {
|
|
||||||
const meta = (
|
|
||||||
<Col
|
|
||||||
name="card-meta"
|
|
||||||
xs={collapsed ? 12 : 6}
|
|
||||||
collapsed={collapsed}
|
|
||||||
fromHeader={fromHeader}
|
|
||||||
headed={headed}
|
|
||||||
{...rest}
|
|
||||||
>
|
|
||||||
<InnerRow collapsed={collapsed}>{children}</InnerRow>
|
|
||||||
</Col>
|
|
||||||
);
|
|
||||||
|
|
||||||
return fromHeader ? (
|
|
||||||
<View collapsed fromHeader>
|
|
||||||
{meta}
|
|
||||||
</View>
|
|
||||||
) : (
|
|
||||||
meta
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
return <Subscriber channel="card">{render}</Subscriber>;
|
|
||||||
};
|
|
||||||
|
|
||||||
Meta.propTypes = {
|
|
||||||
children: PropTypes.node,
|
|
||||||
collapsed: PropTypes.bool,
|
|
||||||
fromHeader: PropTypes.bool,
|
|
||||||
headed: PropTypes.bool
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Baseline(Meta);
|
|
|
@ -1,222 +0,0 @@
|
||||||
[
|
|
||||||
{
|
|
||||||
"instance": "2c921f3a-8bc3-4f57-9cd7-789ebae72061",
|
|
||||||
"name": "AVG_MEM_BYTES",
|
|
||||||
"start": "2017-10-05T13:12:13Z",
|
|
||||||
"end": "2017-10-05T13:13:58Z",
|
|
||||||
"metrics": [
|
|
||||||
{
|
|
||||||
"time": "2017-10-05T13:12:28Z",
|
|
||||||
"value": 97595392,
|
|
||||||
"__typename": "Metric"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"time": "2017-10-05T13:12:43Z",
|
|
||||||
"value": 94142464,
|
|
||||||
"__typename": "Metric"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"time": "2017-10-05T13:12:58Z",
|
|
||||||
"value": 63918080,
|
|
||||||
"__typename": "Metric"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"time": "2017-10-05T13:13:13Z",
|
|
||||||
"value": 94023680,
|
|
||||||
"__typename": "Metric"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"time": "2017-10-05T13:13:28Z",
|
|
||||||
"value": 99467264,
|
|
||||||
"__typename": "Metric"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"time": "2017-10-05T13:13:43Z",
|
|
||||||
"value": 99737600,
|
|
||||||
"__typename": "Metric"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"time": "2017-10-05T13:13:58Z",
|
|
||||||
"value": 86839296,
|
|
||||||
"__typename": "Metric"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"__typename": "InstanceMetric"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"instance": "68d3046e-8e34-4f5d-a0e5-db3795a250fd",
|
|
||||||
"name": "AVG_MEM_BYTES",
|
|
||||||
"start": "2017-10-05T13:12:13Z",
|
|
||||||
"end": "2017-10-05T13:13:58Z",
|
|
||||||
"metrics": [
|
|
||||||
{
|
|
||||||
"time": "2017-10-05T13:12:28Z",
|
|
||||||
"value": 99844096,
|
|
||||||
"__typename": "Metric"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"time": "2017-10-05T13:12:43Z",
|
|
||||||
"value": 93655040,
|
|
||||||
"__typename": "Metric"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"time": "2017-10-05T13:12:58Z",
|
|
||||||
"value": 64172032,
|
|
||||||
"__typename": "Metric"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"time": "2017-10-05T13:13:13Z",
|
|
||||||
"value": 100237312,
|
|
||||||
"__typename": "Metric"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"time": "2017-10-05T13:13:28Z",
|
|
||||||
"value": 99844096,
|
|
||||||
"__typename": "Metric"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"time": "2017-10-05T13:13:43Z",
|
|
||||||
"value": 88035328,
|
|
||||||
"__typename": "Metric"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"time": "2017-10-05T13:13:58Z",
|
|
||||||
"value": 100237312,
|
|
||||||
"__typename": "Metric"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"__typename": "InstanceMetric"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"instance": "2ea99763-3b44-4179-8393-d66d94961051",
|
|
||||||
"name": "AVG_MEM_BYTES",
|
|
||||||
"start": "2017-10-05T13:12:13Z",
|
|
||||||
"end": "2017-10-05T13:13:58Z",
|
|
||||||
"metrics": [
|
|
||||||
{
|
|
||||||
"time": "2017-10-05T13:12:28Z",
|
|
||||||
"value": 98512896,
|
|
||||||
"__typename": "Metric"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"time": "2017-10-05T13:12:43Z",
|
|
||||||
"value": 98258944,
|
|
||||||
"__typename": "Metric"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"time": "2017-10-05T13:12:58Z",
|
|
||||||
"value": 91385856,
|
|
||||||
"__typename": "Metric"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"time": "2017-10-05T13:13:13Z",
|
|
||||||
"value": 50900992,
|
|
||||||
"__typename": "Metric"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"time": "2017-10-05T13:13:28Z",
|
|
||||||
"value": 98512896,
|
|
||||||
"__typename": "Metric"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"time": "2017-10-05T13:13:43Z",
|
|
||||||
"value": 98033664,
|
|
||||||
"__typename": "Metric"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"time": "2017-10-05T13:13:58Z",
|
|
||||||
"value": 80048128,
|
|
||||||
"__typename": "Metric"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"__typename": "InstanceMetric"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"instance": "25f6bc62-63b8-4959-908e-1f6d7ff6341d",
|
|
||||||
"name": "AVG_MEM_BYTES",
|
|
||||||
"start": "2017-10-05T13:12:13Z",
|
|
||||||
"end": "2017-10-05T13:13:58Z",
|
|
||||||
"metrics": [
|
|
||||||
{
|
|
||||||
"time": "2017-10-05T13:12:28Z",
|
|
||||||
"value": 95563776,
|
|
||||||
"__typename": "Metric"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"time": "2017-10-05T13:12:43Z",
|
|
||||||
"value": 48996352,
|
|
||||||
"__typename": "Metric"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"time": "2017-10-05T13:12:58Z",
|
|
||||||
"value": 89772032,
|
|
||||||
"__typename": "Metric"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"time": "2017-10-05T13:13:13Z",
|
|
||||||
"value": 83755008,
|
|
||||||
"__typename": "Metric"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"time": "2017-10-05T13:13:28Z",
|
|
||||||
"value": 101920768,
|
|
||||||
"__typename": "Metric"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"time": "2017-10-05T13:13:43Z",
|
|
||||||
"value": 95576064,
|
|
||||||
"__typename": "Metric"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"time": "2017-10-05T13:13:58Z",
|
|
||||||
"value": 101699584,
|
|
||||||
"__typename": "Metric"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"__typename": "InstanceMetric"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"instance": "8be01042-0281-4a77-a357-25979e87bf3d",
|
|
||||||
"name": "AVG_MEM_BYTES",
|
|
||||||
"start": "2017-10-05T13:12:13Z",
|
|
||||||
"end": "2017-10-05T13:13:58Z",
|
|
||||||
"metrics": [
|
|
||||||
{
|
|
||||||
"time": "2017-10-05T13:12:28Z",
|
|
||||||
"value": 101732352,
|
|
||||||
"__typename": "Metric"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"time": "2017-10-05T13:12:43Z",
|
|
||||||
"value": 101732352,
|
|
||||||
"__typename": "Metric"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"time": "2017-10-05T13:12:58Z",
|
|
||||||
"value": 94240768,
|
|
||||||
"__typename": "Metric"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"time": "2017-10-05T13:13:13Z",
|
|
||||||
"value": 102371328,
|
|
||||||
"__typename": "Metric"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"time": "2017-10-05T13:13:28Z",
|
|
||||||
"value": 61218816,
|
|
||||||
"__typename": "Metric"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"time": "2017-10-05T13:13:43Z",
|
|
||||||
"value": 102371328,
|
|
||||||
"__typename": "Metric"
|
|
||||||
},
|
|
||||||
{
|
|
||||||
"time": "2017-10-05T13:13:58Z",
|
|
||||||
"value": 100716544,
|
|
||||||
"__typename": "Metric"
|
|
||||||
}
|
|
||||||
],
|
|
||||||
"__typename": "InstanceMetric"
|
|
||||||
}
|
|
||||||
]
|
|
|
@ -1,129 +0,0 @@
|
||||||
import { Subscriber } from 'joy-react-broadcast';
|
|
||||||
import styled from 'styled-components';
|
|
||||||
import { Nav } from 'normalized-styled-components';
|
|
||||||
import Baseline from '../baseline';
|
|
||||||
import remcalc from 'remcalc';
|
|
||||||
import is, { isOr, isNot } from 'styled-is';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import Button from '../button';
|
|
||||||
import React from 'react';
|
|
||||||
|
|
||||||
const StyledNav = Nav.extend`
|
|
||||||
flex: 0 0 ${remcalc(47)};
|
|
||||||
border-left: ${remcalc(1)} solid ${props => props.theme.grey};
|
|
||||||
box-sizing: border-box;
|
|
||||||
|
|
||||||
button {
|
|
||||||
margin-bottom: 0;
|
|
||||||
margin-top: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
${is('fromHeader') &&
|
|
||||||
isNot('disabled')`
|
|
||||||
border-left-color: ${props => props.theme.primary};
|
|
||||||
`};
|
|
||||||
|
|
||||||
${isOr('disabled', 'active')`
|
|
||||||
border-left-color: ${props => props.theme.grey};
|
|
||||||
`};
|
|
||||||
`;
|
|
||||||
|
|
||||||
const StyledButton = Button.extend`
|
|
||||||
position: relative;
|
|
||||||
border-width: 0;
|
|
||||||
box-shadow: none;
|
|
||||||
width: 100%;
|
|
||||||
min-width: ${remcalc(46)} !important;
|
|
||||||
height: ${remcalc(124)};
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
justify-content: center;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
overflow-x: visible;
|
|
||||||
overflow-y: visible;
|
|
||||||
|
|
||||||
${is('collapsed')`
|
|
||||||
height: ${remcalc(46)};
|
|
||||||
`};
|
|
||||||
|
|
||||||
&:focus {
|
|
||||||
border-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:hover {
|
|
||||||
border-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
&:active,
|
|
||||||
&:active:hover,
|
|
||||||
&:active:focus {
|
|
||||||
border-width: 0;
|
|
||||||
}
|
|
||||||
|
|
||||||
${is('disabled')`
|
|
||||||
background-color: ${props => props.theme.disabled};
|
|
||||||
border-color: ${props => props.theme.grey};
|
|
||||||
|
|
||||||
&:focus,
|
|
||||||
&:hover,
|
|
||||||
&:active,
|
|
||||||
&:active:hover,
|
|
||||||
&:active:focus {
|
|
||||||
background-color: ${props => props.theme.grey};
|
|
||||||
}
|
|
||||||
|
|
||||||
|
|
||||||
`};
|
|
||||||
`;
|
|
||||||
|
|
||||||
const StyledContainer = styled.div`
|
|
||||||
position: absolute;
|
|
||||||
left: 50%;
|
|
||||||
top: 35%; /* I don't know why this doesn't center with 50% */
|
|
||||||
`;
|
|
||||||
|
|
||||||
const StyledCircle = styled.div`
|
|
||||||
margin: 0 0 ${remcalc(2)} ${remcalc(-2)};
|
|
||||||
border-radius: 50%;
|
|
||||||
background-color: ${props => props.theme.white};
|
|
||||||
width: ${remcalc(4)};
|
|
||||||
height: ${remcalc(4)};
|
|
||||||
|
|
||||||
${is('secondary')`
|
|
||||||
background-color: ${props => props.theme.secondary};
|
|
||||||
`};
|
|
||||||
|
|
||||||
${is('disabled')`
|
|
||||||
background-color: ${props => props.theme.text};
|
|
||||||
`};
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Options = ({ children, ...rest }) => {
|
|
||||||
const render = ({ fromHeader = false, collapsed = false, active = true }) => (
|
|
||||||
<StyledNav active={active} fromHeader={fromHeader} name="card-options">
|
|
||||||
<StyledButton
|
|
||||||
secondary={!fromHeader}
|
|
||||||
collapsed={collapsed}
|
|
||||||
active={active}
|
|
||||||
rect
|
|
||||||
{...rest}
|
|
||||||
>
|
|
||||||
<StyledContainer>
|
|
||||||
<StyledCircle {...rest} active={active} secondary={!fromHeader} />
|
|
||||||
<StyledCircle {...rest} active={active} secondary={!fromHeader} />
|
|
||||||
<StyledCircle {...rest} active={active} secondary={!fromHeader} />
|
|
||||||
</StyledContainer>
|
|
||||||
</StyledButton>
|
|
||||||
</StyledNav>
|
|
||||||
);
|
|
||||||
|
|
||||||
return <Subscriber channel="card">{render}</Subscriber>;
|
|
||||||
};
|
|
||||||
|
|
||||||
Options.propTypes = {
|
|
||||||
collapsed: PropTypes.bool,
|
|
||||||
fromHeader: PropTypes.bool
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Baseline(Options);
|
|
|
@ -1,48 +1,59 @@
|
||||||
import { Subscriber } from 'joy-react-broadcast';
|
|
||||||
import typography from '../typography';
|
|
||||||
import Baseline from '../baseline';
|
|
||||||
import { Col } from 'react-styled-flexboxgrid';
|
|
||||||
import is, { isNot } from 'styled-is';
|
|
||||||
import remcalc from 'remcalc';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
|
import { Subscriber } from 'joy-react-broadcast';
|
||||||
|
import PropTypes from 'prop-types';
|
||||||
|
import remcalc from 'remcalc';
|
||||||
|
import is from 'styled-is';
|
||||||
|
|
||||||
const StyledCol = Col.extend`
|
import Baseline from '../baseline';
|
||||||
${typography.normal};
|
import Card, { BaseCard } from './card';
|
||||||
|
|
||||||
display: block;
|
const BaseOutlet = BaseCard.extend`
|
||||||
min-width: auto;
|
box-sizing: border-box;
|
||||||
max-width: ${remcalc(480)};
|
|
||||||
margin-left: auto;
|
flex: 1 1 auto;
|
||||||
|
flex-direction: column;
|
||||||
|
border-width: 0;
|
||||||
|
padding: ${remcalc(13)};
|
||||||
|
|
||||||
|
background-color: transparent;
|
||||||
|
|
||||||
${is('collapsed')`
|
${is('collapsed')`
|
||||||
display: none;
|
display: none;
|
||||||
`};
|
`};
|
||||||
|
|
||||||
${isNot('active')`
|
& > [name='card']:not(:last-child) {
|
||||||
color: ${props => props.theme.grey};
|
margin-bottom: ${remcalc(13)};
|
||||||
`};
|
}
|
||||||
|
|
||||||
|
& > [name='card']:last-child {
|
||||||
|
margin-bottom: ${remcalc(7)};
|
||||||
|
}
|
||||||
`;
|
`;
|
||||||
|
|
||||||
const Outlet = ({ children, ...rest }) => {
|
export const Outlet = ({ children, ...rest }) => (
|
||||||
const render = ({ active = true, collapsed = false }) => (
|
<Subscriber channel="card">
|
||||||
<StyledCol
|
{({ secondary, tertiary, collapsed }) => (
|
||||||
name="card-outlet"
|
<BaseOutlet
|
||||||
active={active}
|
{...rest}
|
||||||
collapsed={collapsed}
|
name="card-outlet"
|
||||||
xs={6}
|
secondary={secondary}
|
||||||
{...rest}
|
tertiary={tertiary}
|
||||||
>
|
collapsed={collapsed}
|
||||||
{children}
|
>
|
||||||
</StyledCol>
|
{children}
|
||||||
);
|
</BaseOutlet>
|
||||||
|
)}
|
||||||
return <Subscriber channel="card">{render}</Subscriber>;
|
</Subscriber>
|
||||||
};
|
);
|
||||||
|
|
||||||
Outlet.propTypes = {
|
Outlet.propTypes = {
|
||||||
children: PropTypes.node,
|
...Card.propTypes,
|
||||||
collapsed: PropTypes.bool
|
children: PropTypes.node
|
||||||
|
};
|
||||||
|
|
||||||
|
Outlet.defaultProps = {
|
||||||
|
...Card.defaultProps,
|
||||||
|
children: null
|
||||||
};
|
};
|
||||||
|
|
||||||
export default Baseline(Outlet);
|
export default Baseline(Outlet);
|
||||||
|
|
|
@ -1,11 +0,0 @@
|
||||||
import { css } from 'styled-components';
|
|
||||||
import remcalc from 'remcalc';
|
|
||||||
|
|
||||||
export default css`
|
|
||||||
margin-bottom: ${remcalc(16)};
|
|
||||||
box-shadow: 0 ${remcalc(8)} 0 ${remcalc(-5)}
|
|
||||||
${props => props.theme.background},
|
|
||||||
0 ${remcalc(8)} ${remcalc(1)} ${remcalc(-4)} ${props => props.theme.grey},
|
|
||||||
0 ${remcalc(16)} 0 ${remcalc(-10)} ${props => props.theme.background},
|
|
||||||
0 ${remcalc(16)} ${remcalc(1)} ${remcalc(-9)} ${props => props.theme.grey};
|
|
||||||
`;
|
|
|
@ -1,71 +0,0 @@
|
||||||
import { Subscriber } from 'joy-react-broadcast';
|
|
||||||
import styled from 'styled-components';
|
|
||||||
import Baseline from '../baseline';
|
|
||||||
import typography from '../typography';
|
|
||||||
import remcalc from 'remcalc';
|
|
||||||
import is from 'styled-is';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import Title from './title';
|
|
||||||
import React from 'react';
|
|
||||||
|
|
||||||
const Span = styled.span`
|
|
||||||
display: inline-block;
|
|
||||||
flex-direction: column;
|
|
||||||
|
|
||||||
${typography.normal};
|
|
||||||
font-style: normal;
|
|
||||||
font-stretch: normal;
|
|
||||||
font-size: ${remcalc(14)};
|
|
||||||
|
|
||||||
justify-content: flex-end;
|
|
||||||
|
|
||||||
${is('collapsed')`
|
|
||||||
display: flex;
|
|
||||||
`};
|
|
||||||
|
|
||||||
${is('disabled')`
|
|
||||||
color: ${props => props.theme.text};
|
|
||||||
`};
|
|
||||||
|
|
||||||
${is('fromHeader')`
|
|
||||||
color: ${props => props.theme.white};
|
|
||||||
`};
|
|
||||||
`;
|
|
||||||
|
|
||||||
const StyledTitle = Title.extend`
|
|
||||||
display: inline-block;
|
|
||||||
padding: 0 ${remcalc(18)};
|
|
||||||
|
|
||||||
${typography.normal};
|
|
||||||
|
|
||||||
${is('collapsed')`
|
|
||||||
display: flex;
|
|
||||||
padding: 0;
|
|
||||||
`};
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Subtitle = ({ children, ...props }) => {
|
|
||||||
const render = ({ active = true, fromHeader = false, collapsed = false }) => (
|
|
||||||
<StyledTitle
|
|
||||||
name="card-subtitle"
|
|
||||||
fromHeader={fromHeader}
|
|
||||||
collapsed={collapsed}
|
|
||||||
active={active}
|
|
||||||
{...props}
|
|
||||||
>
|
|
||||||
<Span fromHeader={fromHeader} collapsed={collapsed}>
|
|
||||||
{children}
|
|
||||||
</Span>
|
|
||||||
</StyledTitle>
|
|
||||||
);
|
|
||||||
|
|
||||||
return <Subscriber channel="card">{render}</Subscriber>;
|
|
||||||
};
|
|
||||||
|
|
||||||
Subtitle.propTypes = {
|
|
||||||
children: PropTypes.node,
|
|
||||||
collapsed: PropTypes.bool,
|
|
||||||
fromHeader: PropTypes.bool
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Baseline(Subtitle);
|
|
File diff suppressed because it is too large
Load Diff
|
@ -1,122 +0,0 @@
|
||||||
import { Subscriber } from 'joy-react-broadcast';
|
|
||||||
import isString from 'lodash.isstring';
|
|
||||||
import { Link as BaseLink } from 'react-router-dom';
|
|
||||||
import remcalc from 'remcalc';
|
|
||||||
import is from 'styled-is';
|
|
||||||
import styled from 'styled-components';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import React from 'react';
|
|
||||||
|
|
||||||
import typography from '../typography';
|
|
||||||
import Baseline from '../baseline';
|
|
||||||
|
|
||||||
const Container = styled.div`
|
|
||||||
font-size: ${remcalc(15)};
|
|
||||||
line-height: 1.5;
|
|
||||||
color: ${props => props.theme.secondary};
|
|
||||||
|
|
||||||
${typography.semibold};
|
|
||||||
|
|
||||||
display: flex;
|
|
||||||
flex-direction: row;
|
|
||||||
align-items: center;
|
|
||||||
|
|
||||||
flex-grow: 4;
|
|
||||||
flex-basis: ${remcalc(90)};
|
|
||||||
width: 100%;
|
|
||||||
|
|
||||||
padding: ${remcalc(12)} ${remcalc(18)} 0 ${remcalc(18)};
|
|
||||||
transition: all 300ms ease;
|
|
||||||
|
|
||||||
${is('fromHeader')`
|
|
||||||
color: ${props => props.theme.white};
|
|
||||||
`};
|
|
||||||
|
|
||||||
${is('collapsed')`
|
|
||||||
width: auto;
|
|
||||||
padding: 0 ${remcalc(18)};
|
|
||||||
`};
|
|
||||||
|
|
||||||
${is('disabled')`
|
|
||||||
color: ${props => props.theme.text};
|
|
||||||
`};
|
|
||||||
|
|
||||||
${is('selected')`
|
|
||||||
color: ${props => props.theme.primary};
|
|
||||||
`};
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Span = styled.span`
|
|
||||||
display: inline-block;
|
|
||||||
flex-direction: column;
|
|
||||||
justify-content: center;
|
|
||||||
|
|
||||||
${is('collapsed')`
|
|
||||||
display: flex;
|
|
||||||
`};
|
|
||||||
|
|
||||||
${is('link')`
|
|
||||||
text-decoration-color: ${props => props.theme.secondary};
|
|
||||||
text-decoration-line: underline;
|
|
||||||
text-decoration-style: solid;
|
|
||||||
`};
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Link = styled(BaseLink)`
|
|
||||||
color: ${props => props.theme.secondary};
|
|
||||||
|
|
||||||
${is('fromHeader')`
|
|
||||||
color: ${props => props.theme.white};
|
|
||||||
`};
|
|
||||||
|
|
||||||
${is('selected')`
|
|
||||||
color: ${props => props.theme.primary};
|
|
||||||
`};
|
|
||||||
`;
|
|
||||||
|
|
||||||
const Title = ({ children, to, selected, ...rest }) => {
|
|
||||||
const render = ({ collapsed = false, active = true, fromHeader = false }) => {
|
|
||||||
const _children = isString(children) ? (
|
|
||||||
<Span link={Boolean(to)}>{children}</Span>
|
|
||||||
) : (
|
|
||||||
children
|
|
||||||
);
|
|
||||||
|
|
||||||
const __children = to ? (
|
|
||||||
<Link to={to} selected={selected} fromHeader={fromHeader}>
|
|
||||||
{_children}
|
|
||||||
</Link>
|
|
||||||
) : (
|
|
||||||
_children
|
|
||||||
);
|
|
||||||
|
|
||||||
return (
|
|
||||||
<Container
|
|
||||||
collapsed={collapsed}
|
|
||||||
fromHeader={fromHeader}
|
|
||||||
active={active}
|
|
||||||
name="card-title"
|
|
||||||
xs={collapsed ? 6 : 12}
|
|
||||||
{...rest}
|
|
||||||
>
|
|
||||||
{__children}
|
|
||||||
</Container>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
return <Subscriber channel="card">{render}</Subscriber>;
|
|
||||||
};
|
|
||||||
|
|
||||||
Title.propTypes = {
|
|
||||||
children: PropTypes.node,
|
|
||||||
/**
|
|
||||||
* @ignore
|
|
||||||
*/
|
|
||||||
collapsed: PropTypes.bool,
|
|
||||||
/**
|
|
||||||
* @ignore
|
|
||||||
*/
|
|
||||||
fromHeader: PropTypes.bool
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Baseline(Title);
|
|
|
@ -1,56 +0,0 @@
|
||||||
import { Subscriber } from 'joy-react-broadcast';
|
|
||||||
import Baseline from '../baseline';
|
|
||||||
import remcalc from 'remcalc';
|
|
||||||
import is from 'styled-is';
|
|
||||||
import { Row } from 'react-styled-flexboxgrid';
|
|
||||||
import PropTypes from 'prop-types';
|
|
||||||
import React from 'react';
|
|
||||||
|
|
||||||
const StyledView = Row.extend`
|
|
||||||
flex: 1;
|
|
||||||
margin: 0;
|
|
||||||
height: auto;
|
|
||||||
padding-top: 0;
|
|
||||||
min-width: auto;
|
|
||||||
flex-direction: row;
|
|
||||||
|
|
||||||
/*${is('headed')`
|
|
||||||
padding-top: ${remcalc(47)};
|
|
||||||
`};
|
|
||||||
|
|
||||||
${is('collapsed')`
|
|
||||||
height: ${remcalc(47)};
|
|
||||||
`};
|
|
||||||
|
|
||||||
${is('fromHeader')`
|
|
||||||
padding-top: 0;
|
|
||||||
`};*/
|
|
||||||
`;
|
|
||||||
|
|
||||||
const View = ({ children, ...rest }) => {
|
|
||||||
const render = value => {
|
|
||||||
const newValue = {
|
|
||||||
...value,
|
|
||||||
...rest
|
|
||||||
};
|
|
||||||
|
|
||||||
const hide = newValue.headed && !newValue.fromHeader && newValue.collapsed;
|
|
||||||
|
|
||||||
return hide ? null : (
|
|
||||||
<StyledView name="card-view" {...newValue}>
|
|
||||||
{children}
|
|
||||||
</StyledView>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
|
|
||||||
return <Subscriber channel="card">{render}</Subscriber>;
|
|
||||||
};
|
|
||||||
|
|
||||||
View.propTypes = {
|
|
||||||
children: PropTypes.node,
|
|
||||||
collapsed: PropTypes.bool,
|
|
||||||
fromHeader: PropTypes.bool,
|
|
||||||
headed: PropTypes.bool
|
|
||||||
};
|
|
||||||
|
|
||||||
export default Baseline(View);
|
|
|
@ -1,6 +1,7 @@
|
||||||
```
|
```
|
||||||
const FormGroup = require('./group').default;
|
const React = require('react');
|
||||||
const Label = require('./label').default;
|
const { default: FormGroup } = require('./group');
|
||||||
|
const { default: Label } = require('./label');
|
||||||
|
|
||||||
<FormGroup name="test">
|
<FormGroup name="test">
|
||||||
<Checkbox checked>
|
<Checkbox checked>
|
||||||
|
@ -21,9 +22,10 @@ const Label = require('./label').default;
|
||||||
#### Checkbox input validation
|
#### Checkbox input validation
|
||||||
|
|
||||||
```
|
```
|
||||||
const FormMeta = require('./meta').default;
|
const React = require('react');
|
||||||
const FormGroup = require('./group').default;
|
const { default: FormMeta } = require('./meta');
|
||||||
const Label = require('./label').default;
|
const { default: FormGroup } = require('./group');
|
||||||
|
const { default: Label } = require('./label');
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<FormGroup>
|
<FormGroup>
|
||||||
|
|
|
@ -1,8 +1,10 @@
|
||||||
#### Input > Email
|
#### Input > Email
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
const FormGroup = require('./group').default;
|
const React = require('react');
|
||||||
const Label = require('./label').default;
|
const { default: FormGroup } = require('./group');
|
||||||
|
const { default: Label } = require('./label');
|
||||||
|
const { default: Input } = require('./input');
|
||||||
|
|
||||||
<FormGroup>
|
<FormGroup>
|
||||||
<Label>Username</Label>
|
<Label>Username</Label>
|
||||||
|
@ -13,8 +15,10 @@ const Label = require('./label').default;
|
||||||
#### Input > Disabled
|
#### Input > Disabled
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
const FormGroup = require('./group').default;
|
const React = require('react');
|
||||||
const Label = require('./label').default;
|
const { default: FormGroup } = require('./group');
|
||||||
|
const { default: Label } = require('./label');
|
||||||
|
const { default: Input } = require('./input');
|
||||||
|
|
||||||
<FormGroup>
|
<FormGroup>
|
||||||
<Label disabled>Username</Label>
|
<Label disabled>Username</Label>
|
||||||
|
@ -25,9 +29,11 @@ const Label = require('./label').default;
|
||||||
#### Input > Error
|
#### Input > Error
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
const FormGroup = require('./group').default;
|
const React = require('react');
|
||||||
const Label = require('./label').default;
|
const { default: FormGroup } = require('./group');
|
||||||
const FormMeta = require('./meta').default;
|
const { default: Label } = require('./label');
|
||||||
|
const { default: FormMeta } = require('./meta');
|
||||||
|
const { default: Input } = require('./input');
|
||||||
|
|
||||||
<FormGroup>
|
<FormGroup>
|
||||||
<Label>Email Address</Label>
|
<Label>Email Address</Label>
|
||||||
|
@ -39,9 +45,11 @@ const FormMeta = require('./meta').default;
|
||||||
#### Input > Warning
|
#### Input > Warning
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
const FormGroup = require('./group').default;
|
const React = require('react');
|
||||||
const Label = require('./label').default;
|
const { default: FormGroup } = require('./group');
|
||||||
const FormMeta = require('./meta').default;
|
const { default: Label } = require('./label');
|
||||||
|
const { default: FormMeta } = require('./meta');
|
||||||
|
const { default: Input } = require('./input');
|
||||||
|
|
||||||
<FormGroup>
|
<FormGroup>
|
||||||
<Label>Email Address</Label>
|
<Label>Email Address</Label>
|
||||||
|
@ -53,9 +61,11 @@ const FormMeta = require('./meta').default;
|
||||||
#### Input > Success
|
#### Input > Success
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
const FormGroup = require('./group').default;
|
const React = require('react');
|
||||||
const Label = require('./label').default;
|
const { default: FormGroup } = require('./group');
|
||||||
const FormMeta = require('./meta').default;
|
const { default: Label } = require('./label');
|
||||||
|
const { default: FormMeta } = require('./meta');
|
||||||
|
const { default: Input } = require('./input');
|
||||||
|
|
||||||
<FormGroup>
|
<FormGroup>
|
||||||
<Label>Email Address</Label>
|
<Label>Email Address</Label>
|
||||||
|
|
|
@ -1,3 +1,5 @@
|
||||||
```
|
```
|
||||||
|
const React = require('react');
|
||||||
|
|
||||||
<NumberInput placeholder='I am the placeholder' value='1' onChange={() => {}} />
|
<NumberInput placeholder='I am the placeholder' value='1' onChange={() => {}} />
|
||||||
```
|
```
|
||||||
|
|
|
@ -1,8 +1,9 @@
|
||||||
```jsx
|
```jsx
|
||||||
const { RadioList } = require('./radio');
|
const React = require('react');
|
||||||
const FormGroup = require('./group').default;
|
const { default: Radio, RadioList } = require('./radio');
|
||||||
const Label = require('./label').default;
|
const { default: FormGroup } = require('./group');
|
||||||
const Legend = require('./legend').default;
|
const { default: Label } = require('./label');
|
||||||
|
const { default: Legend } = require('./legend');
|
||||||
|
|
||||||
<FormGroup name="who-killed">
|
<FormGroup name="who-killed">
|
||||||
<Legend>Who killed the radio star?</Legend>
|
<Legend>Who killed the radio star?</Legend>
|
||||||
|
@ -23,11 +24,12 @@ const Legend = require('./legend').default;
|
||||||
#### Radio input validation
|
#### Radio input validation
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
const { RadioList } = require('./radio');
|
const React = require('react');
|
||||||
const FormGroup = require('./group').default;
|
const { default: Radio, RadioList } = require('./radio');
|
||||||
const Legend = require('./legend').default;
|
const { default: FormGroup } = require('./group');
|
||||||
const FormMeta = require('./meta').default;
|
const { default: Legend } = require('./legend');
|
||||||
const Label = require('./label').default;
|
const { default: FormMeta } = require('./meta');
|
||||||
|
const { default: Label } = require('./label');
|
||||||
|
|
||||||
<div>
|
<div>
|
||||||
<FormGroup name="who-killed">
|
<FormGroup name="who-killed">
|
||||||
|
|
|
@ -1,4 +1,7 @@
|
||||||
```jsx
|
```jsx
|
||||||
|
const React = require('react');
|
||||||
|
const { default: Select } = require('./select');
|
||||||
|
|
||||||
<Select>
|
<Select>
|
||||||
<option selected disabled>
|
<option selected disabled>
|
||||||
Select a datacenter
|
Select a datacenter
|
||||||
|
@ -13,8 +16,10 @@
|
||||||
#### Select > Disabled
|
#### Select > Disabled
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
const FormGroup = require('./group').default;
|
const React = require('react');
|
||||||
const Label = require('./label').default;
|
const { default: FormGroup } = require('./group');
|
||||||
|
const { default: Label } = require('./label');
|
||||||
|
const { default: Select } = require('./select');
|
||||||
|
|
||||||
<FormGroup>
|
<FormGroup>
|
||||||
<Label disabled>Your location</Label>
|
<Label disabled>Your location</Label>
|
||||||
|
@ -33,9 +38,11 @@ const Label = require('./label').default;
|
||||||
#### Select > Warning
|
#### Select > Warning
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
const FormMeta = require('./meta').default;
|
const React = require('react');
|
||||||
const FormGroup = require('./group').default;
|
const { default: FormMeta } = require('./meta');
|
||||||
const Label = require('./label').default;
|
const { default: FormGroup } = require('./group');
|
||||||
|
const { default: Label } = require('./label');
|
||||||
|
const { default: Select } = require('./select');
|
||||||
|
|
||||||
<FormGroup>
|
<FormGroup>
|
||||||
<Label>Your location</Label>
|
<Label>Your location</Label>
|
||||||
|
@ -52,9 +59,11 @@ const Label = require('./label').default;
|
||||||
#### Select > Error
|
#### Select > Error
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
const FormMeta = require('./meta').default;
|
const React = require('react');
|
||||||
const FormGroup = require('./group').default;
|
const { default: FormMeta } = require('./meta');
|
||||||
const Label = require('./label').default;
|
const { default: FormGroup } = require('./group');
|
||||||
|
const { default: Label } = require('./label');
|
||||||
|
const { default: Select } = require('./select');
|
||||||
|
|
||||||
<FormGroup>
|
<FormGroup>
|
||||||
<Label>Your location</Label>
|
<Label>Your location</Label>
|
||||||
|
@ -71,9 +80,11 @@ const Label = require('./label').default;
|
||||||
#### Select > Success
|
#### Select > Success
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
const FormMeta = require('./meta').default;
|
const React = require('react');
|
||||||
const FormGroup = require('./group').default;
|
const { default: FormMeta } = require('./meta');
|
||||||
const Label = require('./label').default;
|
const { default: FormGroup } = require('./group');
|
||||||
|
const { default: Label } = require('./label');
|
||||||
|
const { default: Select } = require('./select');
|
||||||
|
|
||||||
<FormGroup>
|
<FormGroup>
|
||||||
<Label>Your location</Label>
|
<Label>Your location</Label>
|
||||||
|
|
|
@ -1,7 +1,9 @@
|
||||||
```jsx
|
```jsx
|
||||||
|
const React = require('react');
|
||||||
const { ToggleList } = require('./toggle');
|
const { ToggleList } = require('./toggle');
|
||||||
const FormGroup = require('./group').default;
|
const { default: FormGroup } = require('./group');
|
||||||
const Legend = require('./legend').default;
|
const { default: Legend } = require('./legend');
|
||||||
|
const { default: Toggle } = require('./toggle');
|
||||||
|
|
||||||
<FormGroup name="who-killed-1">
|
<FormGroup name="who-killed-1">
|
||||||
<Legend>Who killed the radio star?</Legend>
|
<Legend>Who killed the radio star?</Legend>
|
||||||
|
@ -17,9 +19,11 @@ const Legend = require('./legend').default;
|
||||||
#### Toggle > Disabled
|
#### Toggle > Disabled
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
|
const React = require('react');
|
||||||
const { ToggleList } = require('./toggle');
|
const { ToggleList } = require('./toggle');
|
||||||
const FormGroup = require('./group').default;
|
const { default: FormGroup } = require('./group');
|
||||||
const Legend = require('./legend').default;
|
const { default: Legend } = require('./legend');
|
||||||
|
const { default: Toggle } = require('./toggle');
|
||||||
|
|
||||||
<FormGroup name="who-killed-2" disabled>
|
<FormGroup name="who-killed-2" disabled>
|
||||||
<Legend>Who killed the radio star?</Legend>
|
<Legend>Who killed the radio star?</Legend>
|
||||||
|
|
|
@ -1,9 +1,7 @@
|
||||||
```
|
```
|
||||||
const HeaderBrand = require('./brand.js').default;
|
const React = require('react');
|
||||||
const HeaderItem = require('./item.js').default;
|
const { default: HeaderBrand } = require('./brand.js');
|
||||||
const HeaderNav = require('./nav.js').default;
|
const { default: HeaderItem } = require('./item.js');
|
||||||
const HeaderWrapper = require('./header-wrapper.js').default;
|
|
||||||
const { UserIconLight, DataCenterIconLight, TritonBetaIcon } = require('../icons');
|
|
||||||
|
|
||||||
<Header>
|
<Header>
|
||||||
<HeaderWrapper>
|
<HeaderWrapper>
|
||||||
|
|
|
@ -1,3 +1,5 @@
|
||||||
```js noeditor
|
```js noeditor
|
||||||
|
const React = require('react');
|
||||||
|
|
||||||
<Icons/>
|
<Icons/>
|
||||||
```
|
```
|
||||||
|
|
|
@ -31,7 +31,7 @@ export {
|
||||||
borderRadius,
|
borderRadius,
|
||||||
bottomShadow,
|
bottomShadow,
|
||||||
bottomShadowDarker,
|
bottomShadowDarker,
|
||||||
insetShaddow,
|
insetShadow,
|
||||||
tooltipShadow,
|
tooltipShadow,
|
||||||
border
|
border
|
||||||
} from './boxes';
|
} from './boxes';
|
||||||
|
@ -124,3 +124,17 @@ export {
|
||||||
LoadingIcon,
|
LoadingIcon,
|
||||||
ImportIcon
|
ImportIcon
|
||||||
} from './icons';
|
} from './icons';
|
||||||
|
|
||||||
|
export {
|
||||||
|
Container as TooltipContainer,
|
||||||
|
Target as TooltipTarget,
|
||||||
|
default as Tolltip
|
||||||
|
} from './tooltip';
|
||||||
|
|
||||||
|
export {
|
||||||
|
Container as PopoverContainer,
|
||||||
|
Target as PopoverTarget,
|
||||||
|
Item as PopoverItem,
|
||||||
|
Divider as PopoverDivider,
|
||||||
|
default as Popover
|
||||||
|
} from './popover';
|
||||||
|
|
|
@ -3,7 +3,6 @@ import { withTheme, injectGlobal } from 'styled-components';
|
||||||
import FontFaceObserver from 'fontfaceobserver';
|
import FontFaceObserver from 'fontfaceobserver';
|
||||||
|
|
||||||
import { fontFaces } from '../typography/fonts';
|
import { fontFaces } from '../typography/fonts';
|
||||||
import { loadedFontFamily } from '../typography';
|
|
||||||
import global from '../base/global';
|
import global from '../base/global';
|
||||||
|
|
||||||
const observers = Object.values(fontFaces).map(
|
const observers = Object.values(fontFaces).map(
|
||||||
|
@ -25,9 +24,13 @@ class RootContainer extends Component {
|
||||||
|
|
||||||
Promise.all(observers.map(obs => obs.load()))
|
Promise.all(observers.map(obs => obs.load()))
|
||||||
.then(() => {
|
.then(() => {
|
||||||
document.documentElement.className += ' fonts-loaded';
|
// eslint-disable-next-line
|
||||||
|
if (!document.documentElement.className.match(/fonts-loaded/)) {
|
||||||
|
document.documentElement.className += ' fonts-loaded';
|
||||||
|
}
|
||||||
})
|
})
|
||||||
.catch(err => {
|
.catch(err => {
|
||||||
|
// eslint-disable-next-line no-console
|
||||||
console.error(err);
|
console.error(err);
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
|
@ -1,7 +1,8 @@
|
||||||
#### Success/Educational
|
#### Success/Educational
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
const { Message, MessageTitle, MessageDescription } = require('./index.js');
|
const React = require('react');
|
||||||
|
const { Message, MessageTitle, MessageDescription } = require('.');
|
||||||
|
|
||||||
<Message>
|
<Message>
|
||||||
<MessageTitle>Choosing deployment data center</MessageTitle>
|
<MessageTitle>Choosing deployment data center</MessageTitle>
|
||||||
|
@ -16,7 +17,8 @@ const { Message, MessageTitle, MessageDescription } = require('./index.js');
|
||||||
#### Error
|
#### Error
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
const { Message, MessageTitle, MessageDescription } = require('./index.js');
|
const React = require('react');
|
||||||
|
const { Message, MessageTitle, MessageDescription } = require('.');
|
||||||
|
|
||||||
<Message error>
|
<Message error>
|
||||||
<MessageTitle>Choosing deployment data center</MessageTitle>
|
<MessageTitle>Choosing deployment data center</MessageTitle>
|
||||||
|
@ -27,7 +29,8 @@ const { Message, MessageTitle, MessageDescription } = require('./index.js');
|
||||||
#### Warning
|
#### Warning
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
const { Message, MessageTitle, MessageDescription } = require('./index.js');
|
const React = require('react');
|
||||||
|
const { Message, MessageTitle, MessageDescription } = require('.');
|
||||||
|
|
||||||
<Message warning>
|
<Message warning>
|
||||||
<MessageTitle>Choosing deployment data center</MessageTitle>
|
<MessageTitle>Choosing deployment data center</MessageTitle>
|
||||||
|
|
|
@ -1,3 +1,5 @@
|
||||||
```
|
```
|
||||||
|
const React = require('react');
|
||||||
|
|
||||||
<Modal />
|
<Modal />
|
||||||
```
|
```
|
||||||
|
|
|
@ -1,4 +1,5 @@
|
||||||
```jsx
|
```jsx
|
||||||
|
const React = require('react');
|
||||||
const { default: Popover, Container, Target, Item, Divider } = require('./');
|
const { default: Popover, Container, Target, Item, Divider } = require('./');
|
||||||
const { Row, Col } = require('react-styled-flexboxgrid');
|
const { Row, Col } = require('react-styled-flexboxgrid');
|
||||||
|
|
||||||
|
|
|
@ -1,7 +1,8 @@
|
||||||
```
|
```
|
||||||
const Progressbar = require('./index').default;
|
const React = require('react');
|
||||||
const ProgressbarButton = require('./button').default;
|
const { default: Progressbar } = require('./index');
|
||||||
const ProgressbarItem = require('./item').default;
|
const { default: ProgressbarButton } = require('./button');
|
||||||
|
const { default: ProgressbarItem } = require('./item');
|
||||||
|
|
||||||
<Progressbar>
|
<Progressbar>
|
||||||
<ProgressbarItem>
|
<ProgressbarItem>
|
||||||
|
|
|
@ -1,7 +1,7 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import styled, { css } from 'styled-components';
|
import styled, { css } from 'styled-components';
|
||||||
import { A } from 'normalized-styled-components';
|
import { A } from 'normalized-styled-components';
|
||||||
import { NavLink as RRNavLink, Link as RRLink } from 'react-router-dom';
|
import { NavLink as RRNavLink } from 'react-router-dom';
|
||||||
import remcalc from 'remcalc';
|
import remcalc from 'remcalc';
|
||||||
import is from 'styled-is';
|
import is from 'styled-is';
|
||||||
|
|
||||||
|
|
|
@ -1,12 +1,17 @@
|
||||||
### Double Range Slider
|
### Double Range Slider
|
||||||
|
|
||||||
```
|
```jsx
|
||||||
<Slider
|
const React = require('react');
|
||||||
minValue={0.25}
|
const { default: Slider } = require('./slider');
|
||||||
maxValue={8}
|
|
||||||
step={0.25}
|
<Slider
|
||||||
value={{ min: 4, max: 4 }}
|
minValue={0.25}
|
||||||
onChangeComplete={value => console.log(value)}
|
maxValue={8}
|
||||||
onChange={value => console.log(value)}
|
step={0.25}
|
||||||
>vCPUs</Slider>
|
value={{ min: 4, max: 4 }}
|
||||||
|
onChangeComplete={value => console.log(value)}
|
||||||
|
onChange={value => console.log(value)}
|
||||||
|
>
|
||||||
|
vCPUs
|
||||||
|
</Slider>;
|
||||||
```
|
```
|
||||||
|
|
|
@ -1,10 +1,11 @@
|
||||||
import React from 'react';
|
import React from 'react';
|
||||||
import styled from 'styled-components';
|
import styled from 'styled-components';
|
||||||
import is, { isNot } from 'styled-is';
|
import is, { isNot } from 'styled-is';
|
||||||
|
import remcalc from 'remcalc';
|
||||||
|
|
||||||
import Widget from './widget';
|
import Widget from './widget';
|
||||||
import P from '../text/p';
|
import P from '../text/p';
|
||||||
import remcalc from 'remcalc';
|
import Baseline from '../baseline';
|
||||||
|
|
||||||
const Container = styled.div`
|
const Container = styled.div`
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -20,7 +21,7 @@ const Container = styled.div`
|
||||||
`};
|
`};
|
||||||
|
|
||||||
${is('row')`
|
${is('row')`
|
||||||
flex-direction: row;
|
flex-direction: row;
|
||||||
`};
|
`};
|
||||||
|
|
||||||
${is('row', 'inline')`
|
${is('row', 'inline')`
|
||||||
|
@ -41,9 +42,11 @@ const Msg = P.extend`
|
||||||
margin-left: ${remcalc(6)};
|
margin-left: ${remcalc(6)};
|
||||||
`;
|
`;
|
||||||
|
|
||||||
export default ({ msg, row, inline, small }) => (
|
const StatusLoader = ({ msg, row, inline, small, ...rest }) => (
|
||||||
<Container row={row} inline={inline}>
|
<Container row={row} inline={inline} {...rest}>
|
||||||
<Loader />
|
<Loader />
|
||||||
{!small && <Msg>{msg || 'Loading...'}</Msg>}
|
{!small && <Msg>{msg || 'Loading...'}</Msg>}
|
||||||
</Container>
|
</Container>
|
||||||
);
|
);
|
||||||
|
|
||||||
|
export default Baseline(StatusLoader);
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
```
|
```jsx
|
||||||
const SectionLoader = require('./index').default
|
const React = require('react');
|
||||||
|
const { default: SectionLoader } = require('./index');
|
||||||
|
|
||||||
<SectionLoader />
|
<SectionLoader />;
|
||||||
```
|
```
|
||||||
|
|
|
@ -1,9 +1,8 @@
|
||||||
import React, { Component } from 'react';
|
import React from 'react';
|
||||||
import { ThemeProvider, injectGlobal } from 'styled-components';
|
import { ThemeProvider } from 'styled-components';
|
||||||
|
|
||||||
import theme from '../theme';
|
import theme from '../theme';
|
||||||
import Base from '../base';
|
import Base from '../base';
|
||||||
import { loadedFontFamily } from '../typography';
|
|
||||||
import { RootContainer } from '../layout';
|
import { RootContainer } from '../layout';
|
||||||
import 'codemirror/mode/jsx/jsx';
|
import 'codemirror/mode/jsx/jsx';
|
||||||
|
|
||||||
|
|
|
@ -16,35 +16,45 @@ docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements
|
||||||
#### Heading 1
|
#### Heading 1
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
|
const React = require('react');
|
||||||
const H1 = require('/').H1;
|
const H1 = require('/').H1;
|
||||||
|
|
||||||
<H1>Inspire the lazy</H1>;
|
<H1>Inspire the lazy</H1>;
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Heading 2
|
#### Heading 2
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
|
const React = require('react');
|
||||||
const H2 = require('/').H2;
|
const H2 = require('/').H2;
|
||||||
|
|
||||||
<H2>Inspire the lazy</H2>;
|
<H2>Inspire the lazy</H2>;
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Heading 3
|
#### Heading 3
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
|
const React = require('react');
|
||||||
const H3 = require('/').H3;
|
const H3 = require('/').H3;
|
||||||
|
|
||||||
<H3>Inspire the lazy</H3>;
|
<H3>Inspire the lazy</H3>;
|
||||||
```
|
```
|
||||||
|
|
||||||
#### Heading 4
|
#### Heading 4
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
|
const React = require('react');
|
||||||
const H4 = require('/').H4;
|
const H4 = require('/').H4;
|
||||||
|
|
||||||
<H4>Inspire the lazy</H4>;
|
<H4>Inspire the lazy</H4>;
|
||||||
```
|
```
|
||||||
|
|
||||||
### Paragraph
|
### Paragraph
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
|
const React = require('react');
|
||||||
const P = require('/').P;
|
const P = require('/').P;
|
||||||
|
|
||||||
<P>
|
<P>
|
||||||
Joyent experts provide 360 degree support for modern application
|
Joyent experts provide 360 degree support for modern application
|
||||||
architectures, including development frameworks, container orchestration
|
architectures, including development frameworks, container orchestration
|
||||||
|
@ -59,7 +69,9 @@ or where space is more constrained, you can use the `<small>` element. This will
|
||||||
reduce the text size to 13px.
|
reduce the text size to 13px.
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
|
const React = require('react');
|
||||||
const Small = require('/').Small;
|
const Small = require('/').Small;
|
||||||
|
|
||||||
<Small>
|
<Small>
|
||||||
Triton is 100% open source and designed to eliminate cloud provider lock-in.
|
Triton is 100% open source and designed to eliminate cloud provider lock-in.
|
||||||
With support for popular container management tools like Kubernetes, augmented
|
With support for popular container management tools like Kubernetes, augmented
|
||||||
|
@ -78,7 +90,9 @@ Read more about using the `<label>` element on the [MDN web
|
||||||
docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label).
|
docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/label).
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
|
const React = require('react');
|
||||||
const Label = require('/').Label;
|
const Label = require('/').Label;
|
||||||
|
|
||||||
<Label>
|
<Label>
|
||||||
Hybrid, Modern and Open, Triton is engineered to run the world’s largest cloud
|
Hybrid, Modern and Open, Triton is engineered to run the world’s largest cloud
|
||||||
native applications
|
native applications
|
||||||
|
@ -96,7 +110,9 @@ link](http://knowbody.github.io/react-router-docs/api/Link.html).
|
||||||
Primary anchor is a type of a link that sits outside the body text.
|
Primary anchor is a type of a link that sits outside the body text.
|
||||||
|
|
||||||
```
|
```
|
||||||
|
const React = require('react');
|
||||||
const Anchor = require('/').Anchor;
|
const Anchor = require('/').Anchor;
|
||||||
|
|
||||||
<Anchor href="https://joyent.com">Inspire the lazy</Anchor>
|
<Anchor href="https://joyent.com">Inspire the lazy</Anchor>
|
||||||
```
|
```
|
||||||
|
|
||||||
|
@ -106,7 +122,9 @@ Reversed anchors is used on dark backgrounds, where a default anchor would not
|
||||||
provide enough contrast.
|
provide enough contrast.
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
|
const React = require('react');
|
||||||
const Anchor = require('/').Anchor;
|
const Anchor = require('/').Anchor;
|
||||||
|
|
||||||
<span
|
<span
|
||||||
style={{
|
style={{
|
||||||
'background-color': '#3B46CC',
|
'background-color': '#3B46CC',
|
||||||
|
@ -129,8 +147,9 @@ In-paragraph anchor is a link that sits inside a text components. The default
|
||||||
state does not have an underline. The underline appears on hover and click.
|
state does not have an underline. The underline appears on hover and click.
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
const P = require('/').P;
|
const React = require('react');
|
||||||
const Anchor = require('/').Anchor;
|
const Anchor = require('/').Anchor;
|
||||||
|
|
||||||
<p>
|
<p>
|
||||||
Body text. Crack that whip. Give the past a slip. Step on a crack. Break your
|
Body text. Crack that whip. Give the past a slip. Step on a crack. Break your
|
||||||
momma's back. When a problem comes along.You must whip it.
|
momma's back. When a problem comes along.You must whip it.
|
||||||
|
@ -143,7 +162,9 @@ const Anchor = require('/').Anchor;
|
||||||
Disabled anchors cannot be actioned and the cursor is disabled.
|
Disabled anchors cannot be actioned and the cursor is disabled.
|
||||||
|
|
||||||
```jsx
|
```jsx
|
||||||
|
const React = require('react');
|
||||||
const Anchor = require('/').Anchor;
|
const Anchor = require('/').Anchor;
|
||||||
|
|
||||||
<Anchor disabled href="https://joyent.com">
|
<Anchor disabled href="https://joyent.com">
|
||||||
Inspire the lazy disabled
|
Inspire the lazy disabled
|
||||||
</Anchor>;
|
</Anchor>;
|
||||||
|
|
|
@ -1,5 +1,6 @@
|
||||||
```js noeditor
|
```js noeditor
|
||||||
const Colors = require('./colors').default;
|
const React = require('react');
|
||||||
|
const { default: Colors } = require('./colors');
|
||||||
|
|
||||||
<Colors />
|
<Colors />
|
||||||
```
|
```
|
||||||
|
|
|
@ -1,8 +1,6 @@
|
||||||
const webpackConfig = require('react-scripts/config/webpack.config.dev.js');
|
const webpackConfig = require('joyent-react-scripts/config/webpack.config.dev.js');
|
||||||
const { defaultHandlers } = require('react-docgen');
|
const { defaultHandlers } = require('react-docgen');
|
||||||
const dnHandler = require('react-docgen-displayname-handler');
|
const dnHandler = require('react-docgen-displayname-handler');
|
||||||
const LodashModuleReplacementPlugin = require('lodash-webpack-plugin');
|
|
||||||
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
|
|
||||||
const path = require('path');
|
const path = require('path');
|
||||||
|
|
||||||
module.exports = {
|
module.exports = {
|
||||||
|
@ -13,38 +11,6 @@ module.exports = {
|
||||||
alias: Object.assign(webpackConfig.resolve.alias, {
|
alias: Object.assign(webpackConfig.resolve.alias, {
|
||||||
'rsg-components/Wrapper': path.join(__dirname, 'src/styleguide/wrapper')
|
'rsg-components/Wrapper': path.join(__dirname, 'src/styleguide/wrapper')
|
||||||
})
|
})
|
||||||
}),
|
|
||||||
module: Object.assign(webpackConfig.module, {
|
|
||||||
rules: [
|
|
||||||
{
|
|
||||||
test: /\.svg$/,
|
|
||||||
loader: 'svg-inline-loader'
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.css$/,
|
|
||||||
use: ['style-loader', 'css-loader']
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.(js|jsx)$/,
|
|
||||||
use: ['babel-loader']
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: /\.(eot|ttf|woff|woff2)$/,
|
|
||||||
use: [
|
|
||||||
{
|
|
||||||
loader: 'file-loader'
|
|
||||||
}
|
|
||||||
]
|
|
||||||
},
|
|
||||||
{
|
|
||||||
test: [/\.bmp$/, /\.gif$/, /\.jpe?g$/, /\.png$/],
|
|
||||||
loader: 'url-loader',
|
|
||||||
options: {
|
|
||||||
limit: 10000,
|
|
||||||
name: 'static/media/[name].[hash:8].[ext]'
|
|
||||||
}
|
|
||||||
}
|
|
||||||
]
|
|
||||||
})
|
})
|
||||||
}),
|
}),
|
||||||
title: 'UI Toolkit',
|
title: 'UI Toolkit',
|
||||||
|
@ -94,9 +60,9 @@ module.exports = {
|
||||||
{
|
{
|
||||||
name: 'Components',
|
name: 'Components',
|
||||||
components: () => [
|
components: () => [
|
||||||
|
'src/card/card.js',
|
||||||
'src/breadcrumb/index.js',
|
'src/breadcrumb/index.js',
|
||||||
'src/button/index.js',
|
'src/button/index.js',
|
||||||
'src/card/card.js',
|
|
||||||
'src/form/checkbox.js',
|
'src/form/checkbox.js',
|
||||||
'src/header/index.js',
|
'src/header/index.js',
|
||||||
'src/icons/icons.js',
|
'src/icons/icons.js',
|
||||||
|
|
|
@ -38,124 +38,4 @@ describe('Visual Regressions', () => {
|
||||||
.goto('http://0.0.0.0:6060/#!/Card/4')
|
.goto('http://0.0.0.0:6060/#!/Card/4')
|
||||||
.then(() => chrome.screenshot())
|
.then(() => chrome.screenshot())
|
||||||
.then(image => expect(image).toMatchImageSnapshot()));
|
.then(image => expect(image).toMatchImageSnapshot()));
|
||||||
|
|
||||||
// it('Card > Headed > Collapsed', () =>
|
|
||||||
// chrome
|
|
||||||
// .goto('http://0.0.0.0:6060/#!/Card/5')
|
|
||||||
// .then(() => chrome.screenshot())
|
|
||||||
// .then(image => expect(image).toMatchImageSnapshot()));
|
|
||||||
|
|
||||||
// it('Card > Headed', () =>
|
|
||||||
// chrome
|
|
||||||
// .goto('http://0.0.0.0:6060/#!/Card/6')
|
|
||||||
// .then(() => chrome.screenshot())
|
|
||||||
// .then(image => expect(image).toMatchImageSnapshot()));
|
|
||||||
|
|
||||||
// it('Card > Headed > Collapsed', () =>
|
|
||||||
// chrome
|
|
||||||
// .goto('http://0.0.0.0:6060/#!/Card/7')
|
|
||||||
// .then(() => chrome.screenshot())
|
|
||||||
// .then(image => expect(image).toMatchImageSnapshot()));
|
|
||||||
|
|
||||||
// it('Card > Headed', () =>
|
|
||||||
// chrome
|
|
||||||
// .goto('http://0.0.0.0:6060/#!/Card/8')
|
|
||||||
// .then(() => chrome.screenshot())
|
|
||||||
// .then(image => expect(image).toMatchImageSnapshot()));
|
|
||||||
|
|
||||||
// it('Card > Headed > Collapsed', () =>
|
|
||||||
// chrome
|
|
||||||
// .goto('http://0.0.0.0:6060/#!/Card/9')
|
|
||||||
// .then(() => chrome.screenshot())
|
|
||||||
// .then(image => expect(image).toMatchImageSnapshot()));
|
|
||||||
|
|
||||||
// it('Card > Headed', () =>
|
|
||||||
// chrome
|
|
||||||
// .goto('http://0.0.0.0:6060/#!/Card/10')
|
|
||||||
// .then(() => chrome.screenshot())
|
|
||||||
// .then(image => expect(image).toMatchImageSnapshot()));
|
|
||||||
|
|
||||||
// it('Card > Headed > Collapsed', () =>
|
|
||||||
// chrome
|
|
||||||
// .goto('http://0.0.0.0:6060/#!/Card/11')
|
|
||||||
// .then(() => chrome.screenshot())
|
|
||||||
// .then(image => expect(image).toMatchImageSnapshot()));
|
|
||||||
|
|
||||||
// it('Card > Headed', () =>
|
|
||||||
// chrome
|
|
||||||
// .goto('http://0.0.0.0:6060/#!/Card/12')
|
|
||||||
// .then(() => chrome.screenshot())
|
|
||||||
// .then(image => expect(image).toMatchImageSnapshot()));
|
|
||||||
|
|
||||||
// it('Card > Headed > Collapsed', () =>
|
|
||||||
// chrome
|
|
||||||
// .goto('http://0.0.0.0:6060/#!/Card/13')
|
|
||||||
// .then(() => chrome.screenshot())
|
|
||||||
// .then(image => expect(image).toMatchImageSnapshot()));
|
|
||||||
|
|
||||||
// it('Card > Headed', () =>
|
|
||||||
// chrome
|
|
||||||
// .goto('http://0.0.0.0:6060/#!/Card/14')
|
|
||||||
// .then(() => chrome.screenshot())
|
|
||||||
// .then(image => expect(image).toMatchImageSnapshot()));
|
|
||||||
|
|
||||||
// it('Card > Headed > Collapsed', () =>
|
|
||||||
// chrome
|
|
||||||
// .goto('http://0.0.0.0:6060/#!/Card/15')
|
|
||||||
// .then(() => chrome.screenshot())
|
|
||||||
// .then(image => expect(image).toMatchImageSnapshot()));
|
|
||||||
|
|
||||||
// it('Card > Headed', () =>
|
|
||||||
// chrome
|
|
||||||
// .goto('http://0.0.0.0:6060/#!/Card/16')
|
|
||||||
// .then(() => chrome.screenshot())
|
|
||||||
// .then(image => expect(image).toMatchImageSnapshot()));
|
|
||||||
|
|
||||||
// it('Card > Headed > Collapsed', () =>
|
|
||||||
// chrome
|
|
||||||
// .goto('http://0.0.0.0:6060/#!/Card/17')
|
|
||||||
// .then(() => chrome.screenshot())
|
|
||||||
// .then(image => expect(image).toMatchImageSnapshot()));
|
|
||||||
|
|
||||||
// it('Card > Headed', () =>
|
|
||||||
// chrome
|
|
||||||
// .goto('http://0.0.0.0:6060/#!/Card/18')
|
|
||||||
// .then(() => chrome.screenshot())
|
|
||||||
// .then(image => expect(image).toMatchImageSnapshot()));
|
|
||||||
|
|
||||||
// it('Card > Headed > Collapsed', () =>
|
|
||||||
// chrome
|
|
||||||
// .goto('http://0.0.0.0:6060/#!/Card/19')
|
|
||||||
// .then(() => chrome.screenshot())
|
|
||||||
// .then(image => expect(image).toMatchImageSnapshot()));
|
|
||||||
|
|
||||||
// it('Card > Headed', () =>
|
|
||||||
// chrome
|
|
||||||
// .goto('http://0.0.0.0:6060/#!/Card/20')
|
|
||||||
// .then(() => chrome.screenshot())
|
|
||||||
// .then(image => expect(image).toMatchImageSnapshot()));
|
|
||||||
|
|
||||||
// it('Card > Headed > Collapsed', () =>
|
|
||||||
// chrome
|
|
||||||
// .goto('http://0.0.0.0:6060/#!/Card/21')
|
|
||||||
// .then(() => chrome.screenshot())
|
|
||||||
// .then(image => expect(image).toMatchImageSnapshot()));
|
|
||||||
|
|
||||||
// it('Card > Headed', () =>
|
|
||||||
// chrome
|
|
||||||
// .goto('http://0.0.0.0:6060/#!/Card/22')
|
|
||||||
// .then(() => chrome.screenshot())
|
|
||||||
// .then(image => expect(image).toMatchImageSnapshot()));
|
|
||||||
|
|
||||||
// it('Card > Headed > Collapsed', () =>
|
|
||||||
// chrome
|
|
||||||
// .goto('http://0.0.0.0:6060/#!/Card/23')
|
|
||||||
// .then(() => chrome.screenshot())
|
|
||||||
// .then(image => expect(image).toMatchImageSnapshot()));
|
|
||||||
|
|
||||||
// it('Card > Headed', () =>
|
|
||||||
// chrome
|
|
||||||
// .goto('http://0.0.0.0:6060/#!/Card/24')
|
|
||||||
// .then(() => chrome.screenshot())
|
|
||||||
// .then(image => expect(image).toMatchImageSnapshot()));
|
|
||||||
});
|
});
|
||||||
|
|
|
@ -9,13 +9,15 @@
|
||||||
"dev": "NODE_ENV=development joyent-react-scripts start",
|
"dev": "NODE_ENV=development joyent-react-scripts start",
|
||||||
"build": "NODE_ENV=production joyent-react-scripts build",
|
"build": "NODE_ENV=production joyent-react-scripts build",
|
||||||
"fmt": "prettier --write --single-quote *.js src/*.js src/**/*.js",
|
"fmt": "prettier --write --single-quote *.js src/*.js src/**/*.js",
|
||||||
"lint": "eslint . --fix && stylelint './src/**/*.js'"
|
"lint-ci": "eslint . --fix --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
|
||||||
|
"lint": "eslint . --fix --ext .js --ext .md && echo 0 `# stylelint './src/**/*.js'`",
|
||||||
|
"prepublish": "echo 0"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"history": "^4.7.2",
|
"history": "^4.7.2",
|
||||||
"joyent-ui-toolkit": "^2.0.0",
|
"joyent-ui-toolkit": "^2.0.1",
|
||||||
"pascal-case": "^2.0.1",
|
"pascal-case": "^2.0.1",
|
||||||
"path-to-regexp": "^2.0.0",
|
"path-to-regexp": "^2.1.0",
|
||||||
"qs": "^6.5.1",
|
"qs": "^6.5.1",
|
||||||
"react": "^16.0.0",
|
"react": "^16.0.0",
|
||||||
"react-dom": "^16.0.0",
|
"react-dom": "^16.0.0",
|
||||||
|
@ -24,13 +26,13 @@
|
||||||
"react-scripts": "1.0.14",
|
"react-scripts": "1.0.14",
|
||||||
"redux": "^3.7.2",
|
"redux": "^3.7.2",
|
||||||
"redux-form": "^7.1.1",
|
"redux-form": "^7.1.1",
|
||||||
"styled-components": "^2.2.1"
|
"styled-components": "^2.2.2"
|
||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"babel-preset-joyent-portal": "^3.3.3",
|
"babel-preset-joyent-portal": "^3.3.3",
|
||||||
"eslint": "^4.8.0",
|
"eslint": "^4.9.0",
|
||||||
"eslint-config-joyent-portal": "3.1.0",
|
"eslint-config-joyent-portal": "^3.2.0",
|
||||||
"joyent-react-scripts": "^2.2.1",
|
"joyent-react-scripts": "^2.6.0",
|
||||||
"prettier": "^1.7.4",
|
"prettier": "^1.7.4",
|
||||||
"stylelint": "^8.2.0",
|
"stylelint": "^8.2.0",
|
||||||
"stylelint-config-joyent-portal": "^2.0.1"
|
"stylelint-config-joyent-portal": "^2.0.1"
|
||||||
|
|
|
@ -10,18 +10,17 @@
|
||||||
"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:css": "echo 0 `# stylelint './src/**/*.js'`",
|
"lint-ci": "eslint . --ext .js --ext .md && stylelint './src/**/*.js'",
|
||||||
"lint:js": "eslint . --fix",
|
"lint": "eslint . --fix --ext .js --ext .md && stylelint './src/**/*.js'",
|
||||||
"lint": "redrun -s lint:*",
|
|
||||||
"test": "NODE_ENV=test ./test/run --env=jsdom",
|
|
||||||
"test-ci": "echo 0 `# NODE_ENV=test ./test/run --env=jsdom --coverage`",
|
"test-ci": "echo 0 `# NODE_ENV=test ./test/run --env=jsdom --coverage`",
|
||||||
|
"test": "NODE_ENV=test ./test/run --env=jsdom",
|
||||||
"prepublish": "echo 0"
|
"prepublish": "echo 0"
|
||||||
},
|
},
|
||||||
"dependencies": {
|
"dependencies": {
|
||||||
"apollo": "^0.2.2",
|
"apollo": "^0.2.2",
|
||||||
"graphql-tag": "^2.4.2",
|
"graphql-tag": "^2.5.0",
|
||||||
"jest-cli": "^21.0.1",
|
"jest-cli": "^21.0.1",
|
||||||
"joyent-ui-toolkit": "^2.0.0",
|
"joyent-ui-toolkit": "^2.0.1",
|
||||||
"lodash.isempty": "^4.4.0",
|
"lodash.isempty": "^4.4.0",
|
||||||
"normalized-styled-components": "^1.0.17",
|
"normalized-styled-components": "^1.0.17",
|
||||||
"prop-types": "^15.6.0",
|
"prop-types": "^15.6.0",
|
||||||
|
@ -31,11 +30,11 @@
|
||||||
"react-redux": "^5.0.6",
|
"react-redux": "^5.0.6",
|
||||||
"react-router": "^4.2.0",
|
"react-router": "^4.2.0",
|
||||||
"react-router-dom": "^4.2.2",
|
"react-router-dom": "^4.2.2",
|
||||||
"react-styled-flexboxgrid": "^2.0.3",
|
"react-styled-flexboxgrid": "^2.1.0",
|
||||||
"redux": "^3.7.2",
|
"redux": "^3.7.2",
|
||||||
"redux-form": "^7.1.1",
|
"redux-form": "^7.1.1",
|
||||||
"remcalc": "^1.0.9",
|
"remcalc": "^1.0.9",
|
||||||
"styled-components": "^2.2.1",
|
"styled-components": "^2.2.2",
|
||||||
"styled-is": "^1.1.0",
|
"styled-is": "^1.1.0",
|
||||||
"unitcalc": "^1.1.1"
|
"unitcalc": "^1.1.1"
|
||||||
},
|
},
|
||||||
|
@ -46,9 +45,9 @@
|
||||||
"babel-plugin-inline-react-svg": "^0.4.0",
|
"babel-plugin-inline-react-svg": "^0.4.0",
|
||||||
"babel-preset-joyent-portal": "^3.3.3",
|
"babel-preset-joyent-portal": "^3.3.3",
|
||||||
"commitizen": "^2.9.6",
|
"commitizen": "^2.9.6",
|
||||||
"cross-env": "^5.0.5",
|
"cross-env": "^5.1.0",
|
||||||
"eslint": "^4.8.0",
|
"eslint": "^4.9.0",
|
||||||
"eslint-config-joyent-portal": "3.1.0",
|
"eslint-config-joyent-portal": "^3.2.0",
|
||||||
"jest": "^21.2.1",
|
"jest": "^21.2.1",
|
||||||
"jest-alias-preprocessor": "^1.1.1",
|
"jest-alias-preprocessor": "^1.1.1",
|
||||||
"jest-cli": "^21.2.1",
|
"jest-cli": "^21.2.1",
|
||||||
|
@ -56,9 +55,9 @@
|
||||||
"jest-junit": "^3.1.0",
|
"jest-junit": "^3.1.0",
|
||||||
"jest-matcher-utils": "^21.2.1",
|
"jest-matcher-utils": "^21.2.1",
|
||||||
"jest-snapshot": "^21.2.1",
|
"jest-snapshot": "^21.2.1",
|
||||||
"jest-styled-components": "^4.7.0",
|
"jest-styled-components": "^4.9.0",
|
||||||
"jest-transform-graphql": "^2.1.0",
|
"jest-transform-graphql": "^2.1.0",
|
||||||
"joyent-react-scripts": "^2.3.0",
|
"joyent-react-scripts": "^2.6.0",
|
||||||
"lodash.sortby": "^4.7.0",
|
"lodash.sortby": "^4.7.0",
|
||||||
"mz": "^2.7.0",
|
"mz": "^2.7.0",
|
||||||
"react-scripts": "^1.0.14",
|
"react-scripts": "^1.0.14",
|
||||||
|
|
Loading…
Reference in New Issue