fix(security): Removed dependency on tar-fs by removing dependencies on storybook and sharp. (#5438)
This commit is contained in:
Joe Boccanfuso
GitHub
parent
a6408d6033
commit
80f314a422
@ -62,7 +62,7 @@
|
|||||||
"jest-junit": "^6.4.0",
|
"jest-junit": "^6.4.0",
|
||||||
"lerna": "^7.2.0",
|
"lerna": "^7.2.0",
|
||||||
"lint-staged": "^9.0.2",
|
"lint-staged": "^9.0.2",
|
||||||
"mini-css-extract-plugin": "^2.1.0",
|
"mini-css-extract-plugin": "2.9.2",
|
||||||
"optimize-css-assets-webpack-plugin": "^6.0.1",
|
"optimize-css-assets-webpack-plugin": "^6.0.1",
|
||||||
"postcss": "^8.3.5",
|
"postcss": "^8.3.5",
|
||||||
"postcss-import": "^14.0.2",
|
"postcss-import": "^14.0.2",
|
||||||
@ -80,7 +80,7 @@
|
|||||||
"terser-webpack-plugin": "^5.1.4",
|
"terser-webpack-plugin": "^5.1.4",
|
||||||
"typescript": "5.5.4",
|
"typescript": "5.5.4",
|
||||||
"unused-webpack-plugin": "2.4.0",
|
"unused-webpack-plugin": "2.4.0",
|
||||||
"webpack": "^5.94.0",
|
"webpack": "5.95.0",
|
||||||
"webpack-bundle-analyzer": "^4.8.0",
|
"webpack-bundle-analyzer": "^4.8.0",
|
||||||
"webpack-cli": "^5.0.1",
|
"webpack-cli": "^5.0.1",
|
||||||
"webpack-dev-server": "5.2.2",
|
"webpack-dev-server": "5.2.2",
|
||||||
|
|||||||
@ -45,7 +45,6 @@
|
|||||||
"glob-parent": "^6.0.2",
|
"glob-parent": "^6.0.2",
|
||||||
"trim": "^1.0.0",
|
"trim": "^1.0.0",
|
||||||
"package-json": "^8.1.0",
|
"package-json": "^8.1.0",
|
||||||
"typescript": "5.5.4",
|
"typescript": "5.5.4"
|
||||||
"sharp": "^0.32.6"
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
15
package.json
15
package.json
@ -96,18 +96,27 @@
|
|||||||
"@babel/preset-env": "7.28.0",
|
"@babel/preset-env": "7.28.0",
|
||||||
"@babel/preset-react": "^7.27.1",
|
"@babel/preset-react": "^7.27.1",
|
||||||
"@babel/preset-typescript": "^7.27.1",
|
"@babel/preset-typescript": "^7.27.1",
|
||||||
|
"@pmmmwh/react-refresh-webpack-plugin": "0.5.17",
|
||||||
|
"babel-loader": "8.4.1",
|
||||||
"babel-plugin-istanbul": "^7.0.0",
|
"babel-plugin-istanbul": "^7.0.0",
|
||||||
"@istanbuljs/nyc-config-typescript": "^1.0.2",
|
"@istanbuljs/nyc-config-typescript": "^1.0.2",
|
||||||
|
"css-loader": "6.11.0",
|
||||||
"cypress": "14.5.2",
|
"cypress": "14.5.2",
|
||||||
"cypress-file-upload": "^5.0.8",
|
"cypress-file-upload": "^5.0.8",
|
||||||
|
"file-loader": "6.2.0",
|
||||||
"istanbul": "0.4.5",
|
"istanbul": "0.4.5",
|
||||||
"nyc": "^17.1.0",
|
"nyc": "^17.1.0",
|
||||||
"patch-package": "^8.0.0",
|
"patch-package": "^8.0.0",
|
||||||
"playwright-test-coverage": "^1.2.12",
|
"playwright-test-coverage": "^1.2.12",
|
||||||
|
"postcss-loader": "6.2.1",
|
||||||
"prettier": "^3.3.3",
|
"prettier": "^3.3.3",
|
||||||
"prettier-plugin-tailwindcss": "0.6.9",
|
"prettier-plugin-tailwindcss": "0.6.9",
|
||||||
|
"shader-loader": "1.3.1",
|
||||||
"source-map-support": "^0.5.21",
|
"source-map-support": "^0.5.21",
|
||||||
"ts-node": "^10.9.2"
|
"style-loader": "1.3.0",
|
||||||
|
"terser-webpack-plugin": "5.3.14",
|
||||||
|
"ts-node": "^10.9.2",
|
||||||
|
"worker-loader": "3.0.8"
|
||||||
},
|
},
|
||||||
"husky": {
|
"husky": {
|
||||||
"hooks": {
|
"hooks": {
|
||||||
@ -129,13 +138,13 @@
|
|||||||
"glob-parent": "^6.0.2",
|
"glob-parent": "^6.0.2",
|
||||||
"trim": "^1.0.0",
|
"trim": "^1.0.0",
|
||||||
"package-json": "^8.1.0",
|
"package-json": "^8.1.0",
|
||||||
"sharp": "^0.32.6",
|
|
||||||
"rollup": "2.79.2",
|
"rollup": "2.79.2",
|
||||||
"body-parser": "1.20.3",
|
"body-parser": "1.20.3",
|
||||||
"form-data": ">=4.0.4",
|
"form-data": ">=4.0.4",
|
||||||
"axios": "1.12.0",
|
"axios": "1.12.0",
|
||||||
"core-js": "3.45.1",
|
"core-js": "3.45.1",
|
||||||
"@babel/runtime-corejs2": "7.26.10"
|
"@babel/runtime-corejs2": "7.26.10",
|
||||||
|
"tapable": "2.2.2"
|
||||||
},
|
},
|
||||||
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
|
"packageManager": "yarn@1.22.22+sha512.a6b2f7906b721bba3d67d4aff083df04dad64c399707841b7acf00f6b133b7ac24255f2652fa22ae3534329dc6180534e98d17432037ff6fd140556e2bb3137e"
|
||||||
}
|
}
|
||||||
|
|||||||
@ -107,10 +107,19 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/plugin-transform-private-methods": "^7.27.1",
|
"@babel/plugin-transform-private-methods": "^7.27.1",
|
||||||
|
"@pmmmwh/react-refresh-webpack-plugin": "0.5.17",
|
||||||
"@types/node": "^20.12.12",
|
"@types/node": "^20.12.12",
|
||||||
|
"clean-webpack-plugin": "4.0.0",
|
||||||
|
"copy-webpack-plugin": "10.2.4",
|
||||||
"cross-env": "^7.0.3",
|
"cross-env": "^7.0.3",
|
||||||
|
"extract-css-chunks-webpack-plugin": "4.10.0",
|
||||||
|
"html-webpack-plugin": "5.6.3",
|
||||||
"identity-obj-proxy": "3.0.x",
|
"identity-obj-proxy": "3.0.x",
|
||||||
|
"mini-css-extract-plugin": "2.9.2",
|
||||||
"shx": "^0.3.4",
|
"shx": "^0.3.4",
|
||||||
"tailwindcss": "3.2.4"
|
"tailwindcss": "3.2.4",
|
||||||
|
"terser-webpack-plugin": "5.3.14",
|
||||||
|
"webpack-dev-server": "5.2.2",
|
||||||
|
"workbox-webpack-plugin": "6.6.1"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -12,7 +12,7 @@
|
|||||||
"README.md"
|
"README.md"
|
||||||
],
|
],
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"clean": "rm -rf node_modules/.cache/storybook && shx rm -rf dist",
|
"clean": "shx rm -rf dist",
|
||||||
"clean:deep": "yarn run clean && shx rm -rf node_modules",
|
"clean:deep": "yarn run clean && shx rm -rf node_modules",
|
||||||
"start": "yarn run build --watch",
|
"start": "yarn run build --watch",
|
||||||
"dev": "cross-env NODE_ENV=development webpack serve --config .webpack/webpack.playground.js",
|
"dev": "cross-env NODE_ENV=development webpack serve --config .webpack/webpack.playground.js",
|
||||||
@ -44,6 +44,7 @@
|
|||||||
"@radix-ui/react-switch": "^1.1.0",
|
"@radix-ui/react-switch": "^1.1.0",
|
||||||
"@radix-ui/react-tabs": "^1.1.0",
|
"@radix-ui/react-tabs": "^1.1.0",
|
||||||
"@radix-ui/react-toggle": "^1.1.0",
|
"@radix-ui/react-toggle": "^1.1.0",
|
||||||
|
"@radix-ui/react-toggle-group": "1.1.10",
|
||||||
"@radix-ui/react-tooltip": "^1.1.2",
|
"@radix-ui/react-tooltip": "^1.1.2",
|
||||||
"class-variance-authority": "^0.7.0",
|
"class-variance-authority": "^0.7.0",
|
||||||
"clsx": "*",
|
"clsx": "*",
|
||||||
|
|||||||
1
platform/ui/.gitignore
vendored
1
platform/ui/.gitignore
vendored
@ -1,2 +1 @@
|
|||||||
node_modules
|
node_modules
|
||||||
storybook-static
|
|
||||||
|
|||||||
@ -1,8 +0,0 @@
|
|||||||
import { create } from '@storybook/theming';
|
|
||||||
|
|
||||||
export default create({
|
|
||||||
base: 'light',
|
|
||||||
brandTitle: 'OHIF',
|
|
||||||
brandUrl: 'https://ohif.org',
|
|
||||||
brandImage: 'ohif-logo-light.svg',
|
|
||||||
});
|
|
||||||
@ -1,3 +0,0 @@
|
|||||||
#storybook-explorer-menu svg {
|
|
||||||
color: #5034ff;
|
|
||||||
}
|
|
||||||
@ -1,105 +0,0 @@
|
|||||||
import path, { dirname, join } from 'path';
|
|
||||||
import remarkGfm from 'remark-gfm';
|
|
||||||
import type { StorybookConfig } from '@storybook/react-webpack5';
|
|
||||||
|
|
||||||
const config: StorybookConfig = {
|
|
||||||
stories: ['../src/**/*.stories.@(mdx)'],
|
|
||||||
addons: [
|
|
||||||
getAbsolutePath('@storybook/addon-links'),
|
|
||||||
getAbsolutePath('@storybook/addon-essentials'),
|
|
||||||
// Other addons go here
|
|
||||||
{
|
|
||||||
name: '@storybook/addon-docs',
|
|
||||||
options: {
|
|
||||||
mdxPluginOptions: {
|
|
||||||
mdxCompileOptions: {
|
|
||||||
remarkPlugins: [remarkGfm],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
core: {},
|
|
||||||
framework: {
|
|
||||||
name: getAbsolutePath('@storybook/react-webpack5'),
|
|
||||||
options: {},
|
|
||||||
},
|
|
||||||
docs: {
|
|
||||||
autodocs: true, // see below for alternatives
|
|
||||||
defaultName: 'Docs', // set to change the name of generated docs entries
|
|
||||||
},
|
|
||||||
staticDirs: ['../static'],
|
|
||||||
webpackFinal: async (config: any, { configType }) => {
|
|
||||||
// `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
|
|
||||||
// You can change the configuration based on that.
|
|
||||||
// 'PRODUCTION' is used when building the static version of storybook.
|
|
||||||
|
|
||||||
// config.module.rules[0].use[0].options.plugins[1] = [
|
|
||||||
// '@babel/plugin-proposal-class-properties',
|
|
||||||
// { loose: true },
|
|
||||||
// ];
|
|
||||||
|
|
||||||
// config.module.rules[0].use[0].options.plugins[3] = [
|
|
||||||
// '@babel/plugin-proposal-private-methods',
|
|
||||||
// { loose: true },
|
|
||||||
// ];
|
|
||||||
|
|
||||||
// config.module.rules[0].use[0].options.plugins[4] = [
|
|
||||||
// '@babel/plugin-proposal-private-property-in-object',
|
|
||||||
// { loose: true },
|
|
||||||
// ];
|
|
||||||
|
|
||||||
// Make whatever fine-grained changes you need
|
|
||||||
config.module.rules.push({
|
|
||||||
test: /\.m?js/,
|
|
||||||
resolve: {
|
|
||||||
fullySpecified: false,
|
|
||||||
},
|
|
||||||
});
|
|
||||||
|
|
||||||
// Default rule for images /\.(svg|ico|jpg|jpeg|png|gif|eot|otf|webp|ttf|woff|woff2|cur|ani|pdf)(\?.*)?$/
|
|
||||||
const fileLoaderRule = config.module.rules.find(rule => rule.test && rule.test.test('.svg'));
|
|
||||||
fileLoaderRule.exclude = /\.svg$/;
|
|
||||||
|
|
||||||
config.module.rules.push({
|
|
||||||
test: /\.svg$/,
|
|
||||||
use: [
|
|
||||||
{ loader: require.resolve('babel-loader') },
|
|
||||||
// { loader: 'svg-inline-loader' },
|
|
||||||
],
|
|
||||||
});
|
|
||||||
|
|
||||||
config.module.rules.push({
|
|
||||||
test: /\.css$/,
|
|
||||||
use: [
|
|
||||||
{
|
|
||||||
loader: 'postcss-loader',
|
|
||||||
options: {
|
|
||||||
// HERE: OPTIONS
|
|
||||||
postcssOptions: {
|
|
||||||
plugins: [require('tailwindcss'), require('autoprefixer')],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
include: path.resolve(__dirname, '../'),
|
|
||||||
});
|
|
||||||
|
|
||||||
// ignore the file @icr/polyseg-wasm during the build as it is a wasm file and
|
|
||||||
// we don't need that for ui
|
|
||||||
config.module.rules.push({
|
|
||||||
test: /@icr\/polyseg-wasm/,
|
|
||||||
type: 'javascript/auto',
|
|
||||||
loader: 'file-loader',
|
|
||||||
});
|
|
||||||
|
|
||||||
// Return the altered config
|
|
||||||
return config;
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export default config;
|
|
||||||
|
|
||||||
function getAbsolutePath(value: string): any {
|
|
||||||
return dirname(require.resolve(join(value, 'package.json')));
|
|
||||||
}
|
|
||||||
@ -1,26 +0,0 @@
|
|||||||
<title>OHIF UI Component</title>
|
|
||||||
<style>
|
|
||||||
body {
|
|
||||||
font-family: 'Inter', sans-serif;
|
|
||||||
background: #f0f3ff !important;
|
|
||||||
font-size: 14px;
|
|
||||||
}
|
|
||||||
|
|
||||||
#storybook-explorer-menu svg {
|
|
||||||
color: #2b5282;
|
|
||||||
}
|
|
||||||
</style>
|
|
||||||
<!-- Global site tag (gtag.js) - Google Analytics -->
|
|
||||||
<script
|
|
||||||
async
|
|
||||||
src="https://www.googletagmanager.com/gtag/js?id=G-3S63CTHNP6"
|
|
||||||
></script>
|
|
||||||
<script>
|
|
||||||
window.dataLayer = window.dataLayer || [];
|
|
||||||
function gtag() {
|
|
||||||
dataLayer.push(arguments);
|
|
||||||
}
|
|
||||||
gtag('js', new Date());
|
|
||||||
|
|
||||||
gtag('config', 'G-3S63CTHNP6');
|
|
||||||
</script>
|
|
||||||
@ -1,15 +0,0 @@
|
|||||||
// .storybook/manager.js
|
|
||||||
|
|
||||||
import { addons } from '@storybook/addons';
|
|
||||||
import ohifTheme from './OHIFTheme';
|
|
||||||
|
|
||||||
const link = document.createElement('link');
|
|
||||||
link.setAttribute('rel', 'shortcut icon');
|
|
||||||
document.head.appendChild(link);
|
|
||||||
|
|
||||||
addons.setConfig({
|
|
||||||
theme: ohifTheme,
|
|
||||||
});
|
|
||||||
|
|
||||||
window.STORYBOOK_GA_ID = 'G-3S63CTHNP6';
|
|
||||||
window.STORYBOOK_REACT_GA_OPTIONS = {};
|
|
||||||
@ -1,79 +0,0 @@
|
|||||||
import React from 'react';
|
|
||||||
import { DocsPage, DocsContainer } from '@storybook/addon-docs';
|
|
||||||
import {
|
|
||||||
Heading,
|
|
||||||
SectionName,
|
|
||||||
Footer,
|
|
||||||
AnchorListItem,
|
|
||||||
LinkComponent,
|
|
||||||
} from '../src/storybook/components';
|
|
||||||
|
|
||||||
import '../src/tailwind.css';
|
|
||||||
import './custom.css';
|
|
||||||
|
|
||||||
// https://github.com/mondaycom/monday-ui-react-core/tree/master/.storybook
|
|
||||||
|
|
||||||
export const parameters = {
|
|
||||||
docs: {
|
|
||||||
inlineStories: true,
|
|
||||||
container: ({ children, context }) => (
|
|
||||||
<DocsContainer context={context}>{children}</DocsContainer>
|
|
||||||
),
|
|
||||||
page: DocsPage,
|
|
||||||
components: {
|
|
||||||
Heading,
|
|
||||||
Footer,
|
|
||||||
h2: SectionName,
|
|
||||||
h3: ({ children }) => <h3 className="my-2 to-blue-900 text-xl">{children}</h3>,
|
|
||||||
li: AnchorListItem,
|
|
||||||
a: LinkComponent,
|
|
||||||
p: ({ children }) => <p className="font-inter my-2 text-gray-800">{children}</p>,
|
|
||||||
// todo: add pre and code
|
|
||||||
},
|
|
||||||
},
|
|
||||||
viewMode: 'docs',
|
|
||||||
previewTabs: {
|
|
||||||
'storybook/docs/panel': {
|
|
||||||
index: -1,
|
|
||||||
},
|
|
||||||
canvas: { title: 'Sandbox' },
|
|
||||||
},
|
|
||||||
actions: { argTypesRegex: '^on[A-Z].*' },
|
|
||||||
controls: {
|
|
||||||
matchers: {
|
|
||||||
color: /(background|color)$/i,
|
|
||||||
date: /Date$/,
|
|
||||||
},
|
|
||||||
},
|
|
||||||
viewport: {
|
|
||||||
disable: true,
|
|
||||||
},
|
|
||||||
backgrounds: {
|
|
||||||
default: 'OHIF-v3',
|
|
||||||
values: [
|
|
||||||
{
|
|
||||||
name: 'White',
|
|
||||||
value: '#FFFFFF',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'OHIF-v3',
|
|
||||||
value: '#090C29',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Light',
|
|
||||||
value: '#F8F8F8',
|
|
||||||
},
|
|
||||||
{
|
|
||||||
name: 'Dark',
|
|
||||||
value: '#333333',
|
|
||||||
},
|
|
||||||
],
|
|
||||||
},
|
|
||||||
options: {
|
|
||||||
storySort: {
|
|
||||||
order: ['Welcome', 'Contribute', 'Foundations', 'Modals', '*'],
|
|
||||||
},
|
|
||||||
},
|
|
||||||
};
|
|
||||||
|
|
||||||
export const decorators = [];
|
|
||||||
@ -1,14 +1 @@
|
|||||||
# @ohif/ui
|
# @ohif/ui
|
||||||
|
|
||||||
## For Running Storybook
|
|
||||||
|
|
||||||
```
|
|
||||||
cd platform/ui
|
|
||||||
|
|
||||||
yarn install
|
|
||||||
|
|
||||||
yarn storybook
|
|
||||||
|
|
||||||
```
|
|
||||||
|
|
||||||
Stories are available default at `http://localhost:6006/`
|
|
||||||
|
|||||||
@ -19,14 +19,11 @@
|
|||||||
"README.md"
|
"README.md"
|
||||||
],
|
],
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"clean": "rm -rf node_modules/.cache/storybook && shx rm -rf dist",
|
"clean": "shx rm -rf dist",
|
||||||
"clean:deep": "yarn run clean && shx rm -rf node_modules",
|
"clean:deep": "yarn run clean && shx rm -rf node_modules",
|
||||||
"start": "yarn run build --watch",
|
"start": "yarn run build --watch",
|
||||||
"build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
|
"build": "cross-env NODE_ENV=production webpack --config .webpack/webpack.prod.js",
|
||||||
"build:package": "yarn run build",
|
"build:package": "yarn run build"
|
||||||
"storybook": "storybook dev -p 6006",
|
|
||||||
"dev": "storybook dev -p 6006",
|
|
||||||
"build-storybook": "storybook build"
|
|
||||||
},
|
},
|
||||||
"peerDependencies": {
|
"peerDependencies": {
|
||||||
"react": "^18.3.1",
|
"react": "^18.3.1",
|
||||||
@ -66,14 +63,6 @@
|
|||||||
},
|
},
|
||||||
"devDependencies": {
|
"devDependencies": {
|
||||||
"@babel/core": "7.28.0",
|
"@babel/core": "7.28.0",
|
||||||
"@storybook/addon-actions": "^7.6.10",
|
|
||||||
"@storybook/addon-docs": "^7.6.10",
|
|
||||||
"@storybook/addon-essentials": "^7.6.10",
|
|
||||||
"@storybook/addon-links": "^7.6.10",
|
|
||||||
"@storybook/cli": "^7.6.10",
|
|
||||||
"@storybook/react": "^7.6.10",
|
|
||||||
"@storybook/react-webpack5": "^7.6.10",
|
|
||||||
"@storybook/source-loader": "^7.6.10",
|
|
||||||
"autoprefixer": "^10.4.14",
|
"autoprefixer": "^10.4.14",
|
||||||
"babel-loader": "^9.1.2",
|
"babel-loader": "^9.1.2",
|
||||||
"dotenv-webpack": "^8.0.1",
|
"dotenv-webpack": "^8.0.1",
|
||||||
@ -81,7 +70,6 @@
|
|||||||
"postcss-loader": "^7.2.4",
|
"postcss-loader": "^7.2.4",
|
||||||
"prop-types": "^15.8.1",
|
"prop-types": "^15.8.1",
|
||||||
"remark-gfm": "^3.0.1",
|
"remark-gfm": "^3.0.1",
|
||||||
"storybook": "^7.6.10",
|
|
||||||
"tailwindcss": "3.2.4"
|
"tailwindcss": "3.2.4"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@ -1,171 +0,0 @@
|
|||||||
import { Button, ButtonEnums } from '../../../components';
|
|
||||||
import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
|
|
||||||
import {
|
|
||||||
createComponentTemplate,
|
|
||||||
createStoryMetaSettings,
|
|
||||||
} from '../../../storybook/functions/create-component-story';
|
|
||||||
|
|
||||||
export const argTypes = {
|
|
||||||
component: Button,
|
|
||||||
title: 'Components/Button',
|
|
||||||
};
|
|
||||||
|
|
||||||
<Meta
|
|
||||||
title="Components/Button"
|
|
||||||
component={Button}
|
|
||||||
/>
|
|
||||||
|
|
||||||
export const buttonTemplate = createComponentTemplate(Button);
|
|
||||||
|
|
||||||
<Heading
|
|
||||||
title="Button"
|
|
||||||
componentRelativePath="Button/Button.tsx"
|
|
||||||
/>
|
|
||||||
|
|
||||||
- [Overview](#overview)
|
|
||||||
- [Props](#props)
|
|
||||||
- [Usage](#usage)
|
|
||||||
- [Contribute](#contribute)
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
|
|
||||||
You can use the button component to create a button. It can be used in different ways, the default
|
|
||||||
button is a simple button with text.
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story
|
|
||||||
name="Overview"
|
|
||||||
args={{ children: 'Button', color: 'default' }}
|
|
||||||
>
|
|
||||||
{buttonTemplate.bind({})}
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
## Props
|
|
||||||
|
|
||||||
<ArgsTable of={Button} />
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
### Types
|
|
||||||
|
|
||||||
There can be different types of buttons: `primary`, and `secondary`.
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story name="Types">
|
|
||||||
<div className="flex space-x-2">
|
|
||||||
<Button type={ButtonEnums.type.primary}>Primary Button</Button>
|
|
||||||
<Button type={ButtonEnums.type.secondary}>Secondary Button</Button>
|
|
||||||
</div>
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
### Sizes
|
|
||||||
|
|
||||||
There are different sizes for the button: `small`, and `medium`. The size refers to the button's
|
|
||||||
height.
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story name="Sizes">
|
|
||||||
<div className="flex items-center space-x-2">
|
|
||||||
<Button size={ButtonEnums.size.small}>Small Button</Button>
|
|
||||||
<Button size={ButtonEnums.size.medium}>Medium Button</Button>
|
|
||||||
</div>
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
### Mixing props
|
|
||||||
|
|
||||||
You can mix different props together to create a button.
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story name="Custom">
|
|
||||||
<Button
|
|
||||||
type={ButtonEnums.type.secondary}
|
|
||||||
size={ButtonEnums.size.small}
|
|
||||||
>
|
|
||||||
Small, Secondary Button
|
|
||||||
</Button>
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
### Disabled
|
|
||||||
|
|
||||||
You can disable the button by setting the `disabled` property to true.
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story name="Disabled">
|
|
||||||
<Button disabled={true}>Disabled Button</Button>
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
### Start/End Icons
|
|
||||||
|
|
||||||
You can add an icon to the start of the button. It accepts an icon component.
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story name="Start Icon">
|
|
||||||
{() => {
|
|
||||||
// svg icon for github
|
|
||||||
const Github = () => {
|
|
||||||
return (
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeWidth="2"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
className="feather feather-github"
|
|
||||||
>
|
|
||||||
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
|
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
return <Button startIcon={<Github />}>Start Icon Button</Button>;
|
|
||||||
}}
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
End Icon is the same as start icon, but for the end of the button.
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story name="End Icon">
|
|
||||||
{() => {
|
|
||||||
// svg icon for github
|
|
||||||
const Github = () => {
|
|
||||||
return (
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeWidth="2"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
className="feather feather-github"
|
|
||||||
>
|
|
||||||
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
|
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<Button
|
|
||||||
startIcon={<Github />}
|
|
||||||
endIcon={<Github />}
|
|
||||||
>
|
|
||||||
Start and End Icon Button
|
|
||||||
</Button>
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
## Contribute
|
|
||||||
|
|
||||||
<Footer componentRelativePath="Button/__stories__/button.stories.mdx" />
|
|
||||||
@ -1,55 +0,0 @@
|
|||||||
import { Button, ButtonGroup, ButtonEnums } from '../../../components';
|
|
||||||
|
|
||||||
import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
|
|
||||||
import {
|
|
||||||
createComponentTemplate,
|
|
||||||
createStoryMetaSettings,
|
|
||||||
} from '../../../storybook/functions/create-component-story';
|
|
||||||
|
|
||||||
export const argTypes = {
|
|
||||||
component: ButtonGroup,
|
|
||||||
title: 'Components/ButtonGroup',
|
|
||||||
};
|
|
||||||
|
|
||||||
<Meta
|
|
||||||
title="Components/ButtonGroup"
|
|
||||||
component={ButtonGroup}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Heading
|
|
||||||
title="ButtonGroup"
|
|
||||||
componentRelativePath="ButtonGroup/ButtonGroup.tsx"
|
|
||||||
/>
|
|
||||||
|
|
||||||
- [Overview](#overview)
|
|
||||||
- [Props](#props)
|
|
||||||
- [Usage](#usage)
|
|
||||||
- [Contribute](#contribute)
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
|
|
||||||
ButtonGroup is a container for a group of buttons.
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story name="Overview">
|
|
||||||
<ButtonGroup
|
|
||||||
orientation={ButtonEnums.orientation.horizontal}
|
|
||||||
activeIndex={0}
|
|
||||||
onActiveIndexChange={index => console.log(index)}
|
|
||||||
>
|
|
||||||
<button onClick={() => console.log('Button 1111 clicked')}>Button 1</button>
|
|
||||||
<button onClick={() => console.log('Button 222 clicked')}>Button 2</button>
|
|
||||||
<button onClick={() => console.log('Button 33 clicked')}>Button 3</button>
|
|
||||||
</ButtonGroup>
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
## Props
|
|
||||||
|
|
||||||
<ArgsTable of={ButtonGroup} />
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
## Contribute
|
|
||||||
|
|
||||||
<Footer componentRelativePath="ButtonGroup/__stories__/buttonGroup.stories.mdx" />
|
|
||||||
@ -1,65 +0,0 @@
|
|||||||
import ContextMenu from '../ContextMenu';
|
|
||||||
import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
|
|
||||||
import { createComponentTemplate } from '../../../storybook/functions/create-component-story';
|
|
||||||
|
|
||||||
export const argTypes = {
|
|
||||||
component: ContextMenu,
|
|
||||||
title: 'Modals/ContextMenu',
|
|
||||||
};
|
|
||||||
|
|
||||||
<Meta
|
|
||||||
title="Modals/ContextMenu"
|
|
||||||
component={ContextMenu}
|
|
||||||
/>
|
|
||||||
|
|
||||||
export const contextMenueTemplate = createComponentTemplate(ContextMenu);
|
|
||||||
|
|
||||||
<Heading
|
|
||||||
title="ContextMenu"
|
|
||||||
componentRelativePath="ContextMenu/ContextMenu.tsx"
|
|
||||||
/>
|
|
||||||
|
|
||||||
- [Overview](#overview)
|
|
||||||
- [Props](#props)
|
|
||||||
- [Contribute](#contribute)
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
|
|
||||||
Context Menu is a component that is used to display a list of options to the user. This component
|
|
||||||
can be used for use cases such as opening a list of options on user right click.
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story
|
|
||||||
name="Overview"
|
|
||||||
args={{
|
|
||||||
items: [
|
|
||||||
{
|
|
||||||
label: 'Delete measurement',
|
|
||||||
actionType: 'Delete',
|
|
||||||
action: item => {
|
|
||||||
window.alert(`${item.label} clicked`);
|
|
||||||
},
|
|
||||||
value: {},
|
|
||||||
},
|
|
||||||
{
|
|
||||||
label: 'Add Label',
|
|
||||||
actionType: 'setLabel',
|
|
||||||
action: item => {
|
|
||||||
window.alert(`${item.label} clicked`);
|
|
||||||
},
|
|
||||||
value: {},
|
|
||||||
},
|
|
||||||
],
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{contextMenueTemplate.bind({})}
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
## Props
|
|
||||||
|
|
||||||
<ArgsTable of={ContextMenu} />
|
|
||||||
|
|
||||||
## Contribute
|
|
||||||
|
|
||||||
<Footer componentRelativePath="ContextMenu/__stories__/contextMenu.stories.mdx" />
|
|
||||||
@ -1,97 +0,0 @@
|
|||||||
import Icon from '../Icon';
|
|
||||||
import { ICONS } from '../getIcon';
|
|
||||||
|
|
||||||
import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
|
|
||||||
import { createComponentTemplate } from '../../../storybook/functions/create-component-story';
|
|
||||||
|
|
||||||
export const argTypes = {
|
|
||||||
component: Icon,
|
|
||||||
title: 'Components/Icon',
|
|
||||||
};
|
|
||||||
|
|
||||||
<Meta
|
|
||||||
title="Components/Icon"
|
|
||||||
component={Icon}
|
|
||||||
/>
|
|
||||||
|
|
||||||
export const IconTemplate = args => (
|
|
||||||
// Todo: Icon colors
|
|
||||||
<div className="h-8 w-8">
|
|
||||||
<Icon {...args} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
<Heading
|
|
||||||
title="Icon"
|
|
||||||
componentRelativePath="Icon/Icon.tsx"
|
|
||||||
/>
|
|
||||||
|
|
||||||
- [Overview](#overview)
|
|
||||||
- [Props](#props)
|
|
||||||
- [Usage](#usage)
|
|
||||||
- [Contribute](#contribute)
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
|
|
||||||
Icon is a component that renders the Icons.
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story
|
|
||||||
name="Overview"
|
|
||||||
args={{
|
|
||||||
name: 'clipboard',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{IconTemplate.bind({})}
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
## Props
|
|
||||||
|
|
||||||
<ArgsTable of={Icon} />
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
You can choose the icon from the list of icons. Here we have render all the icons.
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story name="All Icons">
|
|
||||||
{() => {
|
|
||||||
const icons = Object.keys(ICONS);
|
|
||||||
return (
|
|
||||||
<div className="flex flex-wrap">
|
|
||||||
{icons
|
|
||||||
.filter(ic => ic !== 'magnifier')
|
|
||||||
.map(icon => (
|
|
||||||
<div className="m-4 flex flex-col items-center justify-center">
|
|
||||||
<div class="h-8 w-8">
|
|
||||||
<Icon name={icon} />
|
|
||||||
</div>
|
|
||||||
<div className="text-gray-600">{icon}</div>
|
|
||||||
</div>
|
|
||||||
))}
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
## Color
|
|
||||||
|
|
||||||
Icon colors can be changed by wrapping the icon in a div with the class name
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story
|
|
||||||
name="Colors"
|
|
||||||
args={{
|
|
||||||
name: 'clipboard',
|
|
||||||
className: 'text-red-700',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{IconTemplate.bind({})}
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
## Contribute
|
|
||||||
|
|
||||||
<Footer componentRelativePath="Icon/__stories__/icon.stories.mdx" />
|
|
||||||
@ -1,94 +0,0 @@
|
|||||||
import Input from '../Input';
|
|
||||||
|
|
||||||
import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
|
|
||||||
import { createComponentTemplate } from '../../../storybook/functions/create-component-story';
|
|
||||||
|
|
||||||
export const argTypes = {
|
|
||||||
component: Input,
|
|
||||||
title: 'Components/Input',
|
|
||||||
};
|
|
||||||
|
|
||||||
<Meta
|
|
||||||
title="Components/Input"
|
|
||||||
component={Input}
|
|
||||||
/>
|
|
||||||
|
|
||||||
export const InputTemplate = createComponentTemplate(Input);
|
|
||||||
|
|
||||||
<Heading
|
|
||||||
title="Input"
|
|
||||||
componentRelativePath="Input/Input.tsx"
|
|
||||||
/>
|
|
||||||
|
|
||||||
- [Overview](#overview)
|
|
||||||
- [Props](#props)
|
|
||||||
- [Usage](#usage)
|
|
||||||
- [Contribute](#contribute)
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
|
|
||||||
Input is a component that renders the Inputs.
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story
|
|
||||||
name="Overview"
|
|
||||||
args={{
|
|
||||||
label: 'Input',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{InputTemplate.bind({})}
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
## Props
|
|
||||||
|
|
||||||
<ArgsTable of={Input} />
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
### Transparent
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story
|
|
||||||
name="Transparent"
|
|
||||||
args={{
|
|
||||||
transparent: true,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{InputTemplate.bind({})}
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
### Small Input
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story
|
|
||||||
name="Small"
|
|
||||||
args={{
|
|
||||||
smallInput: true,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{InputTemplate.bind({})}
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
### Classnames
|
|
||||||
|
|
||||||
You can change the appearance of the container and label.
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story
|
|
||||||
name="ClassNames"
|
|
||||||
args={{
|
|
||||||
label: 'Input',
|
|
||||||
containerClassName: 'bg-gray-500',
|
|
||||||
labelClassName: 'text-yellow-500',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{InputTemplate.bind({})}
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
## Contribute
|
|
||||||
|
|
||||||
<Footer componentRelativePath="Input/__stories__/input.stories.mdx" />
|
|
||||||
@ -1,59 +0,0 @@
|
|||||||
import InputFilterText from '../InputFilterText';
|
|
||||||
import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
|
|
||||||
|
|
||||||
export const argTypes = {
|
|
||||||
component: InputFilterText,
|
|
||||||
title: 'Components/InputFilterText',
|
|
||||||
};
|
|
||||||
|
|
||||||
<Meta
|
|
||||||
title="Components/InputFilterText"
|
|
||||||
component={InputFilterText}
|
|
||||||
/>
|
|
||||||
|
|
||||||
export const InputFilterTextTemplate = args => (
|
|
||||||
<div className="w-80">
|
|
||||||
<InputFilterText {...args} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
<Heading
|
|
||||||
title="InputFilterText"
|
|
||||||
componentRelativePath="InputFilterText/InputFilterText.tsx"
|
|
||||||
/>
|
|
||||||
|
|
||||||
- [Overview](#overview)
|
|
||||||
- [Props](#props)
|
|
||||||
- [Contribute](#contribute)
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
|
|
||||||
InputFilterText is a component that is styled such that it can be used as a text input to filter a
|
|
||||||
list of textual items. It allows you to enter any text. There are two (optional) callbacks that can
|
|
||||||
be invoked as the characters of the text are entered: one callback is invoked as each character is
|
|
||||||
typed and another is debounced so that any filtering can occur once the user has entered a
|
|
||||||
significant amount of info and pausing by a configurable amount of time in milliseconds. The
|
|
||||||
component also provides a button on the far right of the component that when clicked will clear the
|
|
||||||
input text. The button only appears when there is text in the component.
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story
|
|
||||||
name="Overview"
|
|
||||||
args={{
|
|
||||||
className: 'w-full text-white',
|
|
||||||
placeholder: 'Search for...',
|
|
||||||
onChange: () => console.log('input text changed'),
|
|
||||||
onDebounceChange: () => console.log('debounce text changed'),
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{InputFilterTextTemplate.bind({})}
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
## Props
|
|
||||||
|
|
||||||
<ArgsTable of={InputFilterText} />
|
|
||||||
|
|
||||||
## Contribute
|
|
||||||
|
|
||||||
<Footer componentRelativePath="InputFilterText/__stories__/InputFilterText.stories.mdx" />
|
|
||||||
@ -1,193 +0,0 @@
|
|||||||
import LegacyButton from '../LegacyButton';
|
|
||||||
import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
|
|
||||||
import {
|
|
||||||
createComponentTemplate,
|
|
||||||
createStoryMetaSettings,
|
|
||||||
} from '../../../storybook/functions/create-component-story';
|
|
||||||
|
|
||||||
export const argTypes = {
|
|
||||||
component: LegacyButton,
|
|
||||||
title: 'Components/LegacyButton',
|
|
||||||
};
|
|
||||||
|
|
||||||
<Meta
|
|
||||||
title="Components/LegacyButton"
|
|
||||||
component={LegacyButton}
|
|
||||||
/>
|
|
||||||
|
|
||||||
export const buttonTemplate = createComponentTemplate(LegacyButton);
|
|
||||||
|
|
||||||
<Heading
|
|
||||||
title="LegacyButton"
|
|
||||||
componentRelativePath="LegacyButton/LegacyButton.tsx"
|
|
||||||
/>
|
|
||||||
|
|
||||||
- [Overview](#overview)
|
|
||||||
- [Props](#props)
|
|
||||||
- [Usage](#usage)
|
|
||||||
- [Contribute](#contribute)
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
|
|
||||||
You can use the legacy button component to create a button. It can be used in different ways, the
|
|
||||||
default button is a simple button with a text.
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story
|
|
||||||
name="Overview"
|
|
||||||
args={{ children: 'LegacyButton', color: 'default' }}
|
|
||||||
>
|
|
||||||
{buttonTemplate.bind({})}
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
## Props
|
|
||||||
|
|
||||||
<ArgsTable of={LegacyButton} />
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
### Variants
|
|
||||||
|
|
||||||
There can be different variants of buttons: `text`, `outlined`, `contained`, and `disabled`.
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story name="Variants">
|
|
||||||
<div className="flex space-x-2">
|
|
||||||
<LegacyButton variant="text">Text LegacyButton</LegacyButton>
|
|
||||||
<LegacyButton variant="outlined">Outlined LegacyButton</LegacyButton>
|
|
||||||
<LegacyButton variant="contained">Contained LegacyButton</LegacyButton>
|
|
||||||
<LegacyButton variant="disabled">Disabled LegacyButton</LegacyButton>
|
|
||||||
</div>
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
### Colors
|
|
||||||
|
|
||||||
There are different colors for the legacy button: `default`, `primary`, `secondary`, `white`,
|
|
||||||
`black`, `inherit`, `light`.
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story name="Colors">
|
|
||||||
<div className="flex space-x-2">
|
|
||||||
<LegacyButton color="default">Default LegacyButton</LegacyButton>
|
|
||||||
<LegacyButton color="primary">Primary LegacyButton</LegacyButton>
|
|
||||||
<LegacyButton color="secondary">Secondary LegacyButton</LegacyButton>
|
|
||||||
<LegacyButton color="white">White LegacyButton</LegacyButton>
|
|
||||||
<LegacyButton color="black">Black LegacyButton</LegacyButton>
|
|
||||||
<LegacyButton color="inherit">Inherit LegacyButton</LegacyButton>
|
|
||||||
<LegacyButton color="light">Light LegacyButton</LegacyButton>
|
|
||||||
</div>
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
### Mixing props
|
|
||||||
|
|
||||||
You can mix different props together to create a legacy button.
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story name="Custom">
|
|
||||||
<LegacyButton
|
|
||||||
color="secondary"
|
|
||||||
variant="outlined"
|
|
||||||
>
|
|
||||||
Custom LegacyButton
|
|
||||||
</LegacyButton>
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
### Disabled
|
|
||||||
|
|
||||||
You can disable the legacy button by setting the variant to `disabled`.
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story name="Disabled">
|
|
||||||
<LegacyButton variant="disabled">Disabled LegacyButton</LegacyButton>
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
### Start/End Icons
|
|
||||||
|
|
||||||
You can add an icon to the start of the legacy button. It accepts an icon component.
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story name="Start Icon">
|
|
||||||
{() => {
|
|
||||||
// svg icon for github
|
|
||||||
const Github = () => {
|
|
||||||
return (
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeWidth="2"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
className="feather feather-github"
|
|
||||||
>
|
|
||||||
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
|
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
return <LegacyButton startIcon={<Github />}>Start Icon LegacyButton</LegacyButton>;
|
|
||||||
}}
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
End Icon is the same as start icon, but for the end of the legacy button.
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story name="End Icon">
|
|
||||||
{() => {
|
|
||||||
// svg icon for github
|
|
||||||
const Github = () => {
|
|
||||||
return (
|
|
||||||
<svg
|
|
||||||
xmlns="http://www.w3.org/2000/svg"
|
|
||||||
width="24"
|
|
||||||
height="24"
|
|
||||||
viewBox="0 0 24 24"
|
|
||||||
fill="none"
|
|
||||||
stroke="currentColor"
|
|
||||||
strokeWidth="2"
|
|
||||||
strokeLinecap="round"
|
|
||||||
strokeLinejoin="round"
|
|
||||||
className="feather feather-github"
|
|
||||||
>
|
|
||||||
<path d="M9 19c-5 1.5-5-2.5-7-3m14 6v-3.87a3.37 3.37 0 0 0-.94-2.61c3.14-.35 6.44-1.54 6.44-7A5.44 5.44 0 0 0 20 4.77 5.07 5.07 0 0 0 19.91 1S18.73.65 16 2.48a13.38 13.38 0 0 0-7 0C6.27.65 5.09 1 5.09 1A5.07 5.07 0 0 0 5 4.77a5.44 5.44 0 0 0-1.5 3.78c0 5.42 3.3 6.61 6.44 7A3.37 3.37 0 0 0 9 18.13V22"></path>
|
|
||||||
</svg>
|
|
||||||
);
|
|
||||||
};
|
|
||||||
return (
|
|
||||||
<LegacyButton
|
|
||||||
startIcon={<Github />}
|
|
||||||
endIcon={<Github />}
|
|
||||||
>
|
|
||||||
Start and End Icon LegacyButton
|
|
||||||
</LegacyButton>
|
|
||||||
);
|
|
||||||
}}
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
### Full width
|
|
||||||
|
|
||||||
You can make the legacy button full width by setting the `fullWidth` prop to `true`.
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story name="Full Width">
|
|
||||||
<LegacyButton
|
|
||||||
fullWidth
|
|
||||||
color="secondary"
|
|
||||||
>
|
|
||||||
Full Width LegacyButton
|
|
||||||
</LegacyButton>
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
## Contribute
|
|
||||||
|
|
||||||
<Footer componentRelativePath="LegacyButton/__stories__/legacyButton.stories.mdx" />
|
|
||||||
@ -1,102 +0,0 @@
|
|||||||
import { LegacyButtonGroup, LegacyButton } from '../../../components';
|
|
||||||
import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
|
|
||||||
import {
|
|
||||||
createComponentTemplate,
|
|
||||||
createStoryMetaSettings,
|
|
||||||
} from '../../../storybook/functions/create-component-story';
|
|
||||||
|
|
||||||
export const argTypes = {
|
|
||||||
component: LegacyButtonGroup,
|
|
||||||
title: 'Components/LegacyButtonGroup',
|
|
||||||
};
|
|
||||||
|
|
||||||
<Meta
|
|
||||||
title="Components/LegacyButtonGroup"
|
|
||||||
component={LegacyButtonGroup}
|
|
||||||
/>
|
|
||||||
|
|
||||||
export const LegacybuttonGroupTemplate = args => (
|
|
||||||
<LegacyButtonGroup {...args}>
|
|
||||||
<LegacyButton>One</LegacyButton>
|
|
||||||
<LegacyButton>Two</LegacyButton>
|
|
||||||
<LegacyButton>Three</LegacyButton>
|
|
||||||
</LegacyButtonGroup>
|
|
||||||
);
|
|
||||||
|
|
||||||
<Heading
|
|
||||||
title="LegacyButtonGroup"
|
|
||||||
componentRelativePath="LegacyButtonGroup/LegacyButtonGroup.tsx"
|
|
||||||
/>
|
|
||||||
|
|
||||||
- [Overview](#overview)
|
|
||||||
- [Props](#props)
|
|
||||||
- [Usage](#usage)
|
|
||||||
- [Contribute](#contribute)
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
|
|
||||||
LegacyButtonGroup is a container for a group of buttons.
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story name="Overview">{LegacybuttonGroupTemplate.bind({})}</Story>
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
## Props
|
|
||||||
|
|
||||||
<ArgsTable of={LegacyButtonGroup} />
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
### Variants
|
|
||||||
|
|
||||||
There are three different variants of LegacyButtonGroup:
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story name="Variants">
|
|
||||||
<div className="flex flex-col space-y-2">
|
|
||||||
<LegacyButtonGroup variant="text">
|
|
||||||
<LegacyButton>Text</LegacyButton>
|
|
||||||
<LegacyButton>Text</LegacyButton>
|
|
||||||
<LegacyButton>Text</LegacyButton>
|
|
||||||
</LegacyButtonGroup>
|
|
||||||
<LegacyButtonGroup variant="outlined">
|
|
||||||
<LegacyButton>Outlined</LegacyButton>
|
|
||||||
<LegacyButton>Outlined</LegacyButton>
|
|
||||||
<LegacyButton>Outlined</LegacyButton>
|
|
||||||
</LegacyButtonGroup>
|
|
||||||
<LegacyButtonGroup variant="contained">
|
|
||||||
<LegacyButton>Contained</LegacyButton>
|
|
||||||
<LegacyButton>Contained</LegacyButton>
|
|
||||||
<LegacyButton>Contained</LegacyButton>
|
|
||||||
</LegacyButtonGroup>
|
|
||||||
</div>
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
### Orientation
|
|
||||||
|
|
||||||
You can change the orientation of the buttons in the group by setting the `orientation` prop.
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story name="Orientation Horizontal">
|
|
||||||
<LegacyButtonGroup orientation="horizontal">
|
|
||||||
<LegacyButton>Horizontal-1</LegacyButton>
|
|
||||||
<LegacyButton>Horizontal-2</LegacyButton>
|
|
||||||
</LegacyButtonGroup>
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
Or vertical
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story name="Orientation Vertical">
|
|
||||||
<LegacyButtonGroup orientation="vertical">
|
|
||||||
<LegacyButton>Vertical-1</LegacyButton>
|
|
||||||
<LegacyButton>Vertical-2</LegacyButton>
|
|
||||||
</LegacyButtonGroup>
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
## Contribute
|
|
||||||
|
|
||||||
<Footer componentRelativePath="LEgacyButtonGroup/__stories__/legacyButtonGroup.stories.mdx" />
|
|
||||||
@ -1,56 +0,0 @@
|
|||||||
import { Select } from '../../../components';
|
|
||||||
import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
|
|
||||||
|
|
||||||
export const argTypes = {
|
|
||||||
component: Select,
|
|
||||||
title: 'Components/Select',
|
|
||||||
};
|
|
||||||
|
|
||||||
<Meta
|
|
||||||
title="Components/Select"
|
|
||||||
component={Select}
|
|
||||||
/>
|
|
||||||
|
|
||||||
export const SelectTemplate = args => (
|
|
||||||
<div className="h-80 w-40">
|
|
||||||
<Select {...args} />
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
<Heading
|
|
||||||
title="Select"
|
|
||||||
componentRelativePath="Select/Select.tsx"
|
|
||||||
/>
|
|
||||||
|
|
||||||
- [Overview](#overview)
|
|
||||||
- [Props](#props)
|
|
||||||
- [Contribute](#contribute)
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
|
|
||||||
Select is a component that allows you to select from a list
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story
|
|
||||||
name="Overview"
|
|
||||||
args={{
|
|
||||||
isClearable: false,
|
|
||||||
onChange: item => alert(item.label),
|
|
||||||
options: [
|
|
||||||
{ label: 'item1', value: 1 },
|
|
||||||
{ label: 'item2', value: 2 },
|
|
||||||
],
|
|
||||||
value: 2,
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{SelectTemplate.bind({})}
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
## Props
|
|
||||||
|
|
||||||
<ArgsTable of={Select} />
|
|
||||||
|
|
||||||
## Contribute
|
|
||||||
|
|
||||||
<Footer componentRelativePath="Select/__stories__/Select.stories.mdx" />
|
|
||||||
@ -1,56 +0,0 @@
|
|||||||
import StudyListExpandedRow from '../StudyListExpandedRow';
|
|
||||||
|
|
||||||
import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
|
|
||||||
import { createComponentTemplate } from '../../../storybook/functions/create-component-story';
|
|
||||||
|
|
||||||
export const argTypes = {
|
|
||||||
component: StudyListExpandedRow,
|
|
||||||
title: 'Components/StudyListExpandedRow',
|
|
||||||
};
|
|
||||||
|
|
||||||
<Meta
|
|
||||||
title="Components/StudyListExpandedRow"
|
|
||||||
component={StudyListExpandedRow}
|
|
||||||
/>
|
|
||||||
|
|
||||||
export const StudyListExpandedRowTemplate = createComponentTemplate(StudyListExpandedRow);
|
|
||||||
|
|
||||||
<Heading
|
|
||||||
title="StudyListExpandedRow"
|
|
||||||
componentRelativePath="StudyListExpandedRow/StudyListExpandedRow.js"
|
|
||||||
/>
|
|
||||||
|
|
||||||
- [Overview](#overview)
|
|
||||||
- [Props](#props)
|
|
||||||
- [Contribute](#contribute)
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
|
|
||||||
StudyListExpandedRow is a component that renders the StudyListExpandedRows.
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story
|
|
||||||
name="Overview"
|
|
||||||
args={{
|
|
||||||
seriesTableColumns: {
|
|
||||||
description: 'Description',
|
|
||||||
seriesNumber: 'Series',
|
|
||||||
modality: 'Modality',
|
|
||||||
instances: 'Instances',
|
|
||||||
},
|
|
||||||
seriesTableDataSource: [],
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{StudyListExpandedRowTemplate.bind({})}
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
## Props
|
|
||||||
|
|
||||||
<ArgsTable of={StudyListExpandedRow} />
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
## Contribute
|
|
||||||
|
|
||||||
<Footer componentRelativePath="StudyListExpandedRow/__stories__/studyListExpandedRow.stories.mdx" />
|
|
||||||
@ -1,91 +0,0 @@
|
|||||||
import Tooltip from '../Tooltip';
|
|
||||||
import Icon from '../../Icon';
|
|
||||||
|
|
||||||
import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
|
|
||||||
import { createComponentTemplate } from '../../../storybook/functions/create-component-story';
|
|
||||||
|
|
||||||
export const argTypes = {
|
|
||||||
component: Tooltip,
|
|
||||||
title: 'Components/Tooltip',
|
|
||||||
};
|
|
||||||
|
|
||||||
<Meta
|
|
||||||
title="Components/Tooltip"
|
|
||||||
component={Tooltip}
|
|
||||||
/>
|
|
||||||
|
|
||||||
export const TooltipTemplate = args => (
|
|
||||||
<div className="h-16 w-full">
|
|
||||||
<div class="mx-auto h-8 w-8">
|
|
||||||
<Tooltip {...args}>
|
|
||||||
<Icon name="clipboard" />
|
|
||||||
</Tooltip>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
);
|
|
||||||
|
|
||||||
<Heading
|
|
||||||
title="Tooltip"
|
|
||||||
componentRelativePath="Tooltip/Tooltip.js"
|
|
||||||
/>
|
|
||||||
|
|
||||||
- [Overview](#overview)
|
|
||||||
- [Props](#props)
|
|
||||||
- [Usage](#usage)
|
|
||||||
- [Contribute](#contribute)
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
|
|
||||||
Tooltip is a component that renders the Tooltips.
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story
|
|
||||||
name="Overview"
|
|
||||||
args={{
|
|
||||||
content: 'Tooltip',
|
|
||||||
}}
|
|
||||||
>
|
|
||||||
{TooltipTemplate.bind({})}
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
## Props
|
|
||||||
|
|
||||||
<ArgsTable of={Tooltip} />
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
### Position
|
|
||||||
|
|
||||||
You can set the position of the tooltip by using the `position` prop.
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story name="Position">
|
|
||||||
<div className="m-8 h-16 w-full">
|
|
||||||
<div class="mx-auto h-8 w-8">
|
|
||||||
<Tooltip
|
|
||||||
position="right"
|
|
||||||
content="right"
|
|
||||||
>
|
|
||||||
<Icon name="clipboard" />
|
|
||||||
<span>Right</span>
|
|
||||||
</Tooltip>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
<div className="m-8 h-16 w-full">
|
|
||||||
<div class="mx-auto h-8 w-8">
|
|
||||||
<Tooltip
|
|
||||||
position="left"
|
|
||||||
content="left"
|
|
||||||
>
|
|
||||||
<Icon name="clipboard" />
|
|
||||||
<span>Left</span>
|
|
||||||
</Tooltip>
|
|
||||||
</div>
|
|
||||||
</div>
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
## Contribute
|
|
||||||
|
|
||||||
<Footer componentRelativePath="Tooltip/__stories__/tooltip.stories.mdx" />
|
|
||||||
@ -1,218 +0,0 @@
|
|||||||
import Typography from '../Typography';
|
|
||||||
|
|
||||||
import { ArgsTable, Story, Canvas, Meta } from '@storybook/addon-docs';
|
|
||||||
import { createComponentTemplate } from '../../../storybook/functions/create-component-story';
|
|
||||||
|
|
||||||
export const argTypes = {
|
|
||||||
component: Typography,
|
|
||||||
title: 'Foundations/Typography',
|
|
||||||
};
|
|
||||||
|
|
||||||
<Meta
|
|
||||||
title="Foundations/Typography"
|
|
||||||
component={Typography}
|
|
||||||
/>
|
|
||||||
|
|
||||||
<Heading
|
|
||||||
title="Typography"
|
|
||||||
componentRelativePath="Typography/Typography.js"
|
|
||||||
/>
|
|
||||||
|
|
||||||
- [Overview](#overview)
|
|
||||||
- [Props](#props)
|
|
||||||
- [Usage](#usage)
|
|
||||||
- [Contribute](#contribute)
|
|
||||||
|
|
||||||
## Overview
|
|
||||||
|
|
||||||
Typography is a component that renders the Typographys.
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story name="Overview">
|
|
||||||
<Typography
|
|
||||||
variant="h1"
|
|
||||||
className="text-blue-800"
|
|
||||||
>
|
|
||||||
Heading 1
|
|
||||||
</Typography>
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
### Usage
|
|
||||||
|
|
||||||
#### Variants
|
|
||||||
|
|
||||||
There are several variants of the Typography component.
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story name="Variants">
|
|
||||||
<Typography
|
|
||||||
variant="h1"
|
|
||||||
className="text-blue-800"
|
|
||||||
>
|
|
||||||
Heading 1
|
|
||||||
</Typography>
|
|
||||||
<Typography
|
|
||||||
variant="h2"
|
|
||||||
className="text-blue-800"
|
|
||||||
>
|
|
||||||
Heading 2
|
|
||||||
</Typography>
|
|
||||||
<Typography
|
|
||||||
variant="h3"
|
|
||||||
className="text-blue-800"
|
|
||||||
>
|
|
||||||
Heading 3
|
|
||||||
</Typography>
|
|
||||||
<Typography
|
|
||||||
variant="h4"
|
|
||||||
className="text-blue-800"
|
|
||||||
>
|
|
||||||
Heading 4
|
|
||||||
</Typography>
|
|
||||||
<Typography
|
|
||||||
variant="h5"
|
|
||||||
className="text-blue-800"
|
|
||||||
>
|
|
||||||
Heading 5
|
|
||||||
</Typography>
|
|
||||||
<Typography
|
|
||||||
variant="h6"
|
|
||||||
className="text-blue-800"
|
|
||||||
>
|
|
||||||
Heading 6
|
|
||||||
</Typography>
|
|
||||||
<Typography
|
|
||||||
variant="p"
|
|
||||||
className="text-blue-800"
|
|
||||||
>
|
|
||||||
Paragraph
|
|
||||||
</Typography>
|
|
||||||
<Typography
|
|
||||||
variant="subtitle"
|
|
||||||
className="text-blue-800"
|
|
||||||
>
|
|
||||||
Subtitle
|
|
||||||
</Typography>
|
|
||||||
<Typography
|
|
||||||
variant="caption"
|
|
||||||
className="text-blue-800"
|
|
||||||
>
|
|
||||||
Caption
|
|
||||||
</Typography>
|
|
||||||
<Typography
|
|
||||||
variant="body"
|
|
||||||
className="text-blue-800"
|
|
||||||
>
|
|
||||||
Body
|
|
||||||
</Typography>
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
#### Text Color
|
|
||||||
|
|
||||||
You can use the `color` prop to change the color of the text.
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story name="Text Color">
|
|
||||||
<Typography
|
|
||||||
variant="h5"
|
|
||||||
color="primary"
|
|
||||||
>
|
|
||||||
Primary Color
|
|
||||||
</Typography>
|
|
||||||
<Typography
|
|
||||||
variant="h5"
|
|
||||||
color="secondary"
|
|
||||||
>
|
|
||||||
Secondary Color
|
|
||||||
</Typography>
|
|
||||||
<Typography
|
|
||||||
variant="h5"
|
|
||||||
color="error"
|
|
||||||
>
|
|
||||||
Error Color
|
|
||||||
</Typography>
|
|
||||||
<Typography
|
|
||||||
variant="h5"
|
|
||||||
color="inherit"
|
|
||||||
>
|
|
||||||
Inherit Color
|
|
||||||
</Typography>
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
#### Custom className
|
|
||||||
|
|
||||||
You can use the `className` prop to add a custom className to the Typography.
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story name="Custom Class">
|
|
||||||
<Typography
|
|
||||||
variant="h5"
|
|
||||||
className="text-red-400"
|
|
||||||
>
|
|
||||||
Custom Red Color
|
|
||||||
</Typography>
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
#### Align
|
|
||||||
|
|
||||||
<Canvas>
|
|
||||||
<Story name="Align">
|
|
||||||
<Typography
|
|
||||||
variant="body"
|
|
||||||
align="left"
|
|
||||||
color="primary"
|
|
||||||
>
|
|
||||||
Align Left: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt tempus
|
|
||||||
ante, non blandit sem vehicula ac. Vestibulum in dolor commodo, elementum massa scelerisque,
|
|
||||||
molestie nulla. Aenean sed odio interdum, rutrum ex at, volutpat diam. Donec vel tristique
|
|
||||||
sem, eget iaculis velit. Aenean placerat justo
|
|
||||||
</Typography>
|
|
||||||
<br />
|
|
||||||
<Typography
|
|
||||||
variant="body"
|
|
||||||
align="center"
|
|
||||||
color="primary"
|
|
||||||
>
|
|
||||||
Align Center: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt tempus
|
|
||||||
ante, non blandit sem vehicula ac. Vestibulum in dolor commodo, elementum massa scelerisque,
|
|
||||||
molestie nulla. Aenean sed odio interdum, rutrum ex at, volutpat diam. Donec vel tristique
|
|
||||||
sem, eget iaculis velit. Aenean placerat justo
|
|
||||||
</Typography>
|
|
||||||
<br />
|
|
||||||
<Typography
|
|
||||||
variant="body"
|
|
||||||
align="right"
|
|
||||||
color="primary"
|
|
||||||
>
|
|
||||||
Align Right: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt tempus
|
|
||||||
ante, non blandit sem vehicula ac. Vestibulum in dolor commodo, elementum massa scelerisque,
|
|
||||||
molestie nulla. Aenean sed odio interdum, rutrum ex at, volutpat diam. Donec vel tristique
|
|
||||||
sem, eget iaculis velit. Aenean placerat justo
|
|
||||||
</Typography>
|
|
||||||
<br />
|
|
||||||
<Typography
|
|
||||||
variant="body"
|
|
||||||
align="justify"
|
|
||||||
color="primary"
|
|
||||||
>
|
|
||||||
Align Justify: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed tincidunt tempus
|
|
||||||
ante, non blandit sem vehicula ac. Vestibulum in dolor commodo, elementum massa scelerisque,
|
|
||||||
molestie nulla. Aenean sed odio interdum, rutrum ex at, volutpat diam. Donec vel tristique
|
|
||||||
sem, eget iaculis velit. Aenean placerat justo
|
|
||||||
</Typography>
|
|
||||||
</Story>
|
|
||||||
</Canvas>
|
|
||||||
|
|
||||||
## Props
|
|
||||||
|
|
||||||
<ArgsTable of={Typography} />
|
|
||||||
|
|
||||||
## Usage
|
|
||||||
|
|
||||||
## Contribute
|
|
||||||
|
|
||||||
<Footer componentRelativePath="Typography/__stories__/typography.stories.mdx" />
|
|
||||||
Loading…
Reference in New Issue
Block a user