Skip to content

A
amundsen_dev
Unverified Commit c9bba886 authored by Marcos Iglesias's avatar Marcos Iglesias Committed by GitHub
Browse files
Options

Organizes, themes and adds typography stories (#578) 

Signed-off-by: 's avatarMarcos Iglesias <miglesiasvalle@lyft.com>
parent cfe6e918
Hide whitespace changes
Inline Side-by-side
Showing with 338 additions and 31 deletions
amundsen_application/static/.storybook/amundsenTheme.js 0 → 100644
View file @ c9bba886
import { create } from '@storybook/theming/create';
export default create({
base: 'light',
colorPrimary: '#9c9bff', // indigo30
colorSecondary: '#665aff', // indigo60
// UI
appBg: '#fcfcff', // gray0
appContentBg: '#cacad9', // gray20
appBorderColor: '#63637b', // gray60
appBorderRadius: 4,
// Typography
fontBase: '"Open Sans", sans-serif',
fontCode: '"Menlo-Bold", monospace',
// Text colors
textColor: '#292936', // gray100
textInverseColor: '#fcfcff', // gray0
// Toolbar default and active colors
barTextColor: '#dcdcff', // indigo10
barSelectedColor: '#292936', // gray100
barBg: '#665aff', // indigo60
// Form colors
inputBg: 'white',
inputBorder: 'silver',
inputTextColor: 'black',
inputBorderRadius: 4,
brandTitle: "Amundsen's Storybook",
brandUrl: 'https://amundsen.lyft.net/',
brandImage:
'https://raw.githubusercontent.com/lyft/amundsen/master/docs/img/logos/amundsen_logo_on_light.svg?sanitize=true',
});
amundsen_application/static/.storybook/manager.ts 0 → 100644
View file @ c9bba886
import { addons } from '@storybook/addons';
import amundsenTheme from './amundsenTheme';
addons.setConfig({
isFullscreen: false,
showNav: true,
showPanel: true,
panelPosition: 'bottom',
sidebarAnimations: true,
enableShortcuts: true,
isToolshown: true,
theme: amundsenTheme,
selectedPanel: undefined,
initialActive: 'sidebar',
showRoots: false,
});
amundsen_application/static/.storybook/preview.ts
View file @ c9bba886
import anysort from 'anysort';
import { addParameters } from '@storybook/react';
import '../css/styles.scss';
const categoriesOrder = [
'Overview/Introduction',
'Attributes/**',
'Components/**',
];
addParameters({
options: {
showRoots: true,
storySort: (previous, next) => {
const [previousStory, previousMeta] = previous;
const [nextStory, nextMeta] = next;
return anysort(previousMeta.kind, nextMeta.kind, categoriesOrder);
},
},
});
amundsen_application/static/js/components/common/Flag/Flag.story.tsx
View file @ c9bba886
......@@ -3,7 +3,7 @@ import React from 'react';
import Flag, { CaseType } from '.';
export default {
title: 'Flags',
title: 'Components/Flags',
component: Flag,
};
......
amundsen_application/static/js/stories/typography.story.tsx 0 → 100644
View file @ c9bba886
import React from 'react';
export default {
title: 'Attributes/Typography',
};
export const Typography = () => {
return (
<>
<h1>Headings</h1>
<hr />
<h1>Raw h1</h1>
<h2>Raw h2</h2>
<h3>Raw h3</h3>
<h4>Raw h4</h4>
<h5>Raw h5</h5>
<h6>Raw h6</h6>
<hr />
<h1 className="h1">Heading with .h1</h1>
<h2 className="h2">Heading with .h2</h2>
<h3 className="h3">Heading with .h3</h3>
<h4 className="h4">Heading with .h4</h4>
<h5 className="h5">Heading with .h5</h5>
<h6 className="h6">Heading with .h6</h6>
<hr />
<h1 className="title-1">Heading with .title-1</h1>
<h1 className="title-2">Heading with .title-2</h1>
<h1 className="title-3">Heading with .title-3</h1>
<h1 className="subtitle-1">Heading with .subtitle-1</h1>
<h1 className="subtitle-2">Heading with .subtitle-2</h1>
<h1 className="subtitle-3">Heading with .subtitle-3</h1>
</>
);
};
Typography.story = {
name: 'Headings',
};
export const Body = () => {
return (
<>
<h1>Body</h1>
<hr />
<p>Raw p</p>
<hr />
<p className="body-1">Paragraph with .body-1</p>
<p className="body-2">Paragraph with .body-2</p>
<p className="body-3">Paragraph with .body-3</p>
<p className="body-secondary-3">Paragraph with .body-secondary-3</p>
<p className="body-placeholder">Paragraph with .body-placeholder</p>
<p className="body-link">Paragraph with .body-link</p>
<p className="caption">Paragraph with .caption</p>
<p className="column-name">Paragraph with .column-name</p>
<p className="resource-type">Paragraph with .resource-type</p>
<p className="helper-text">Paragraph with .helper-text</p>
<p className="text-placeholder">Paragraph with .text-placeholder</p>
<p className="text-secondary">Paragraph with .text-secondary</p>
<p className="text-primary">Paragraph with .text-primary</p>
</>
);
};
Body.story = {
name: 'Body Text',
};
amundsen_application/static/js/stories/welcome.story.tsx
View file @ c9bba886
import React from 'react';
import { linkTo } from '@storybook/addon-links';
import { Welcome } from '@storybook/react/demo';
export default {
title: 'Welcome',
title: 'Overview/Introduction',
component: Welcome,
};
// Don't put other stories in this folder, unless they're meta (i.e. about
// storybook itself). Storybook components for normal components should be
// put in the same folder as the component itself.
export const ToAmundsen = () => {
export const Introduction = () => {
return (
<>
<h1>Welcome to Amundsen's Component Library!</h1>
......@@ -42,7 +37,3 @@ export const ToAmundsen = () => {
</>
);
};
ToAmundsen.story = {
name: 'to Amundsen Component Library',
};
amundsen_application/static/package-lock.json
View file @ c9bba886
......@@ -6410,6 +6410,26 @@
"uuid": "^3.3.2"
},
"dependencies": {
"@storybook/theming": {
"version": "5.3.19",
"resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-5.3.19.tgz",
"integrity": "sha512-ecG+Rq3hc1GOzKHamYnD4wZ0PEP9nNg0mXbC3RhbxfHj+pMMCWWmx9B2Uu75SL1PTT8WcfkFO0hU/0IO84Pzlg==",
"dev": true,
"requires": {
"@emotion/core": "^10.0.20",
"@emotion/styled": "^10.0.17",
"@storybook/client-logger": "5.3.19",
"core-js": "^3.0.1",
"deep-object-diff": "^1.1.0",
"emotion-theming": "^10.0.19",
"global": "^4.3.2",
"memoizerific": "^1.11.3",
"polished": "^3.3.1",
"prop-types": "^15.7.2",
"resolve-from": "^5.0.0",
"ts-dedent": "^1.1.0"
}
},
"fast-deep-equal": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
......@@ -6461,6 +6481,26 @@
"util-deprecate": "^1.0.2"
},
"dependencies": {
"@storybook/theming": {
"version": "5.3.19",
"resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-5.3.19.tgz",
"integrity": "sha512-ecG+Rq3hc1GOzKHamYnD4wZ0PEP9nNg0mXbC3RhbxfHj+pMMCWWmx9B2Uu75SL1PTT8WcfkFO0hU/0IO84Pzlg==",
"dev": true,
"requires": {
"@emotion/core": "^10.0.20",
"@emotion/styled": "^10.0.17",
"@storybook/client-logger": "5.3.19",
"core-js": "^3.0.1",
"deep-object-diff": "^1.1.0",
"emotion-theming": "^10.0.19",
"global": "^4.3.2",
"memoizerific": "^1.11.3",
"polished": "^3.3.1",
"prop-types": "^15.7.2",
"resolve-from": "^5.0.0",
"ts-dedent": "^1.1.0"
}
},
"loose-envify": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
......@@ -6572,6 +6612,26 @@
"util-deprecate": "^1.0.2"
},
"dependencies": {
"@storybook/theming": {
"version": "5.3.19",
"resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-5.3.19.tgz",
"integrity": "sha512-ecG+Rq3hc1GOzKHamYnD4wZ0PEP9nNg0mXbC3RhbxfHj+pMMCWWmx9B2Uu75SL1PTT8WcfkFO0hU/0IO84Pzlg==",
"dev": true,
"requires": {
"@emotion/core": "^10.0.20",
"@emotion/styled": "^10.0.17",
"@storybook/client-logger": "5.3.19",
"core-js": "^3.0.1",
"deep-object-diff": "^1.1.0",
"emotion-theming": "^10.0.19",
"global": "^4.3.2",
"memoizerific": "^1.11.3",
"polished": "^3.3.1",
"prop-types": "^15.7.2",
"resolve-from": "^5.0.0",
"ts-dedent": "^1.1.0"
}
},
"fast-deep-equal": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
......@@ -6705,6 +6765,26 @@
"ts-dedent": "^1.1.0"
},
"dependencies": {
"@storybook/theming": {
"version": "5.3.19",
"resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-5.3.19.tgz",
"integrity": "sha512-ecG+Rq3hc1GOzKHamYnD4wZ0PEP9nNg0mXbC3RhbxfHj+pMMCWWmx9B2Uu75SL1PTT8WcfkFO0hU/0IO84Pzlg==",
"dev": true,
"requires": {
"@emotion/core": "^10.0.20",
"@emotion/styled": "^10.0.17",
"@storybook/client-logger": "5.3.19",
"core-js": "^3.0.1",
"deep-object-diff": "^1.1.0",
"emotion-theming": "^10.0.19",
"global": "^4.3.2",
"memoizerific": "^1.11.3",
"polished": "^3.3.1",
"prop-types": "^15.7.2",
"resolve-from": "^5.0.0",
"ts-dedent": "^1.1.0"
}
},
"loose-envify": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
......@@ -6858,6 +6938,26 @@
"integrity": "sha512-0o4l6pZC+hI88+bzuaX/6BgOvQVhbt2PfmxauVaYOGgbsAw14wdKyvMCZXnsnsHys94iadcF+RG/wZyx6+ZZBw==",
"dev": true
},
"@storybook/theming": {
"version": "5.3.19",
"resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-5.3.19.tgz",
"integrity": "sha512-ecG+Rq3hc1GOzKHamYnD4wZ0PEP9nNg0mXbC3RhbxfHj+pMMCWWmx9B2Uu75SL1PTT8WcfkFO0hU/0IO84Pzlg==",
"dev": true,
"requires": {
"@emotion/core": "^10.0.20",
"@emotion/styled": "^10.0.17",
"@storybook/client-logger": "5.3.19",
"core-js": "^3.0.1",
"deep-object-diff": "^1.1.0",
"emotion-theming": "^10.0.19",
"global": "^4.3.2",
"memoizerific": "^1.11.3",
"polished": "^3.3.1",
"prop-types": "^15.7.2",
"resolve-from": "^5.0.0",
"ts-dedent": "^1.1.0"
}
},
"ajv": {
"version": "6.12.3",
"resolved": "https://registry.npmjs.org/ajv/-/ajv-6.12.3.tgz",
......@@ -7045,6 +7145,15 @@
"p-locate": "^4.1.0"
}
},
"loose-envify": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
"dev": true,
"requires": {
"js-tokens": "^3.0.0 || ^4.0.0"
}
},
"make-dir": {
"version": "3.1.0",
"resolved": "https://registry.npmjs.org/make-dir/-/make-dir-3.1.0.tgz",
......@@ -7115,6 +7224,17 @@
"find-up": "^4.0.0"
}
},
"prop-types": {
"version": "15.7.2",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
"integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
"dev": true,
"requires": {
"loose-envify": "^1.4.0",
"object-assign": "^4.1.1",
"react-is": "^16.8.1"
}
},
"qs": {
"version": "6.9.4",
"resolved": "https://registry.npmjs.org/qs/-/qs-6.9.4.tgz",
......@@ -7394,43 +7514,48 @@
}
},
"@storybook/theming": {
"version": "5.3.19",
"resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-5.3.19.tgz",
"integrity": "sha512-ecG+Rq3hc1GOzKHamYnD4wZ0PEP9nNg0mXbC3RhbxfHj+pMMCWWmx9B2Uu75SL1PTT8WcfkFO0hU/0IO84Pzlg==",
"version": "6.0.6",
"resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-6.0.6.tgz",
"integrity": "sha512-RJBol0ggYw1cCmUBVyzQMQ8qe3f4CrBSqEQdcDBWYtHoknz00V9tn1zZuYC0L1OSnn36nbUgq7oj2NE3hwhkxA==",
"dev": true,
"requires": {
"@emotion/core": "^10.0.20",
"@emotion/is-prop-valid": "^0.8.6",
"@emotion/styled": "^10.0.17",
"@storybook/client-logger": "5.3.19",
"@storybook/client-logger": "6.0.6",
"core-js": "^3.0.1",
"deep-object-diff": "^1.1.0",
"emotion-theming": "^10.0.19",
"global": "^4.3.2",
"memoizerific": "^1.11.3",
"polished": "^3.3.1",
"prop-types": "^15.7.2",
"polished": "^3.4.4",
"resolve-from": "^5.0.0",
"ts-dedent": "^1.1.0"
"ts-dedent": "^1.1.1"
},
"dependencies": {
"loose-envify": {
"version": "1.4.0",
"resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
"integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
"@emotion/is-prop-valid": {
"version": "0.8.8",
"resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
"integrity": "sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA==",
"dev": true,
"requires": {
"js-tokens": "^3.0.0 || ^4.0.0"
"@emotion/memoize": "0.7.4"
}
},
"prop-types": {
"version": "15.7.2",
"resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
"integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
"@emotion/memoize": {
"version": "0.7.4",
"resolved": "https://registry.npmjs.org/@emotion/memoize/-/memoize-0.7.4.tgz",
"integrity": "sha512-Ja/Vfqe3HpuzRsG1oBtWTHk2PGZ7GR+2Vz5iYGelAw8dx32K0y7PjVuxK6z1nMpZOqAFsRUPCkK1YjJ56qJlgw==",
"dev": true
},
"@storybook/client-logger": {
"version": "6.0.6",
"resolved": "https://registry.npmjs.org/@storybook/client-logger/-/client-logger-6.0.6.tgz",
"integrity": "sha512-JuBtCHKZdTC3Ok9E/tCYIurZ53Iuqn0AKYuzI9ETSNe9JYnTlZz0ilVZKTAQjzkiG8CbTwKFUKUoaUnBwVc4Vw==",
"dev": true,
"requires": {
"loose-envify": "^1.4.0",
"object-assign": "^4.1.1",
"react-is": "^16.8.1"
"core-js": "^3.0.1",
"global": "^4.3.2"
}
}
}
......@@ -7477,6 +7602,26 @@
"util-deprecate": "^1.0.2"
},
"dependencies": {
"@storybook/theming": {
"version": "5.3.19",
"resolved": "https://registry.npmjs.org/@storybook/theming/-/theming-5.3.19.tgz",
"integrity": "sha512-ecG+Rq3hc1GOzKHamYnD4wZ0PEP9nNg0mXbC3RhbxfHj+pMMCWWmx9B2Uu75SL1PTT8WcfkFO0hU/0IO84Pzlg==",
"dev": true,
"requires": {
"@emotion/core": "^10.0.20",
"@emotion/styled": "^10.0.17",
"@storybook/client-logger": "5.3.19",
"core-js": "^3.0.1",
"deep-object-diff": "^1.1.0",
"emotion-theming": "^10.0.19",
"global": "^4.3.2",
"memoizerific": "^1.11.3",
"polished": "^3.3.1",
"prop-types": "^15.7.2",
"resolve-from": "^5.0.0",
"ts-dedent": "^1.1.0"
}
},
"fast-deep-equal": {
"version": "2.0.1",
"resolved": "https://registry.npmjs.org/fast-deep-equal/-/fast-deep-equal-2.0.1.tgz",
......@@ -8995,6 +9140,33 @@
"normalize-path": "^2.1.1"
}
},
"anysort": {
"version": "2.0.0",
"resolved": "https://registry.npmjs.org/anysort/-/anysort-2.0.0.tgz",
"integrity": "sha512-Vo6WEVULAOb5LraoA+6STmR5kr4CsCL4w3Jt8WMdSDH3N9LLpzjIcLnFE2cXZ4v50reshxM4DO/Y16ZHphHxWw==",
"dev": true,
"requires": {
"anymatch": "^3"
},
"dependencies": {
"anymatch": {
"version": "3.1.1",
"resolved": "https://registry.npmjs.org/anymatch/-/anymatch-3.1.1.tgz",
"integrity": "sha512-mM8522psRCqzV+6LhomX5wgp25YVibjh8Wj23I5RPkPppSVSjyKD2A2mBJmWGa+KN7f2D6LNh9jkBCeyLktzjg==",
"dev": true,
"requires": {
"normalize-path": "^3.0.0",
"picomatch": "^2.0.4"
}
},
"normalize-path": {
"version": "3.0.0",
"resolved": "https://registry.npmjs.org/normalize-path/-/normalize-path-3.0.0.tgz",
"integrity": "sha512-6eZs5Ls3WtCisHWp9S2GUy8dqkpGi4BVSz3GaqiE6ezub0512ESztXUwUB6C6IKbQkY2Pnb/mD4WYojCRwcwLA==",
"dev": true
}
}
},
"app-root-dir": {
"version": "1.0.2",
"resolved": "https://registry.npmjs.org/app-root-dir/-/app-root-dir-1.0.2.tgz",
amundsen_application/static/package.json
View file @ c9bba886
......@@ -55,6 +55,7 @@
"@storybook/addon-links": "^5.3.19",
"@storybook/addons": "^5.3.19",
"@storybook/react": "^5.3.19",
"@storybook/theming": "^6.0.6",
"@types/enzyme": "^3.10.5",
"@types/jasmine-matchers": "^0.2.32",
"@types/jest": "^24.9.1",
......@@ -66,6 +67,7 @@
"@typescript-eslint/eslint-plugin": "^3.9.0",
"@typescript-eslint/eslint-plugin-tslint": "^3.1.0",
"@typescript-eslint/parser": "^3.1.0",
"anysort": "^2.0.0",
"babel-jest": "^24.9.0",
"babel-loader": "^8.1.0",
"bootstrap-sass": "^3.4.1",
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment