TrizTech/ohif-viewer
17
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: uiv2 docz custom page (#1511)

Browse Source 
* feat: Customized Docz Layout

* manually apply padding into playground

* fix playground bug -- sticky items

* fix window

* remove specifc tailwind style for docz
This commit is contained in:
Rodrigo Antinarelli authored and James A. Petts committed 2020-05-15 13:37:14 +02:00
1 parent dd18de86f8
commit 2049147021
14 files changed
+426 -82
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

platform/ui/src/components/Button/Button.mdx
+172 -45
View File
@@ -22,8 +22,8 @@ import { Button } from '@ohfi/ui';
## Outlined Buttons
<Playground>
<>
<Button variant="contained" className="m-1">
<div className="p-4">
<Button variant="outlined" className="m-1">
Default
</Button>
<Button variant="contained" color="primary" className="m-1">
@@ -32,14 +32,17 @@ import { Button } from '@ohfi/ui';
<Button variant="contained" color="secondary" className="m-1">
Secondary
</Button>
</>
<Button variant="outlined" color="white" className="m-1">
White
</Button>
</div>
</Playground>
## Outlined Buttons
<Playground>
<>
<Button variant="outlined" className="m-1">
<div className="p-4">
<Button variant="contained" className="m-1">
Default
</Button>
<Button variant="outlined" color="primary" className="m-1">
@@ -48,13 +51,16 @@ import { Button } from '@ohfi/ui';
<Button variant="outlined" color="secondary" className="m-1">
Secondary
</Button>
</>
<Button variant="contained" color="white" className="m-1">
White
</Button>
</div>
</Playground>
## Text Buttons
<Playground>
<>
<div className="p-4">
<Button variant="text" className="m-1">
Default
</Button>
@@ -64,13 +70,166 @@ import { Button } from '@ohfi/ui';
<Button variant="text" color="secondary" className="m-1">
Secondary
</Button>
</>
<Button variant="text" color="white" className="m-1">
White
</Button>
</div>
</Playground>
## Rounded Buttons
<Playground>
<div className="p-4">
<div className="mb-2">
<Button variant="contained" rounded="none" className="m-1">
Non Rounded
</Button>
<Button variant="contained" rounded="small" className="m-1">
Small Rounded
</Button>
<Button variant="contained" rounded="medium" className="m-1">
Medium Rounded
</Button>
<Button variant="contained" rounded="large" className="m-1">
Large Rounded
</Button>
<Button variant="contained" rounded="full" className="m-1">
Full Rounded
</Button>
</div>
<div className="mb-2">
<Button
variant="contained"
rounded="none"
color="primary"
className="m-1"
>
Non Rounded
</Button>
<Button
variant="contained"
rounded="small"
color="primary"
className="m-1"
>
Small Rounded
</Button>
<Button
variant="contained"
rounded="medium"
color="primary"
className="m-1"
>
Medium Rounded
</Button>
<Button
variant="contained"
rounded="large"
color="primary"
className="m-1"
>
Large Rounded
</Button>
<Button
variant="contained"
rounded="full"
color="primary"
className="m-1"
>
Full Rounded
</Button>
</div>
<div className="mb-2">
<Button
variant="contained"
rounded="none"
color="secondary"
className="m-1"
>
Non Rounded
</Button>
<Button
variant="contained"
rounded="small"
color="secondary"
className="m-1"
>
Small Rounded
</Button>
<Button
variant="contained"
rounded="medium"
color="secondary"
className="m-1"
>
Medium Rounded
</Button>
<Button
variant="contained"
rounded="large"
color="secondary"
className="m-1"
>
Large Rounded
</Button>
<Button
variant="contained"
rounded="full"
color="secondary"
className="m-1"
>
Full Rounded
</Button>
</div>
<div className="mb-2">
<Button
variant="contained"
rounded="none"
color="white"
className="m-1"
>
Non Rounded
</Button>
<Button
variant="contained"
rounded="small"
color="white"
className="m-1"
>
Small Rounded
</Button>
<Button
variant="contained"
rounded="medium"
color="white"
className="m-1"
>
Medium Rounded
</Button>
<Button
variant="contained"
rounded="large"
color="white"
className="m-1"
>
Large Rounded
</Button>
<Button
variant="contained"
rounded="full"
color="white"
className="m-1"
>
Full Rounded
</Button>
</div>
</div>
</Playground>
## Sizes
<Playground>
<>
<div className="p-4">
<div>
<Button variant="text" size="small" className="m-1">
Small
@@ -135,31 +294,18 @@ import { Button } from '@ohfi/ui';
</Button>
</div>
</>
</div>
</Playground>
## Buttons with icons
<Playground>
<div className="flex">
<div className="p-4 flex">
<Button
variant="contained"
color="primary"
className="m-1"
<<<<<<< HEAD
startIcon={
<svg
class="fill-current w-4 h-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
>
<path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z" />
</svg>
}
=======
startIcon={<Icon name="settings" />}
>>>>>>> 98a130b58... feat: Icon component (#1499)
>
Settings
</Button>
@@ -167,24 +313,6 @@ import { Button } from '@ohfi/ui';
variant="contained"
color="primary"
className="m-1"
<<<<<<< HEAD
endIcon={
<svg
class="fill-current w-4 h-4"
xmlns="http://www.w3.org/2000/svg"
viewBox="0 0 20 20"
>
<path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z" />
</svg>
}
>
Download
</Button>
</div>
)
}}
=======
endIcon={<Icon name="settings" />}
>
Download
@@ -199,7 +327,6 @@ import { Button } from '@ohfi/ui';
Download
</Button>
</div>
>>>>>>> 98a130b58... feat: Icon component (#1499)
</Playground>
## Icon Buttons
@@ -211,7 +338,7 @@ import { IconButton } from '@ohfi/ui';
```
<Playground>
<div className="flex flex-col items-center">
<div className="p-4 flex flex-col items-center">
<div className="">
<IconButton className="m-2">
<Icon name="settings" />
@@ -260,7 +387,7 @@ import { IconButton } from '@ohfi/ui';
</Playground>
<Playground>
<div>
<div className="p-4">
<div className="">
<IconButton className="m-2">
<Icon name="settings" />
platform/ui/src/components/ButtonGroup/ButtonGroup.mdx
+4 -4
View File
@@ -23,7 +23,7 @@ import { ButtonGroup } from '@ohfi/ui';
## Basic button group
<Playground>
<div className="flex flex-col items-center">
<div className="p-4 flex flex-col items-center">
<ButtonGroup color="primary" className="m-2">
<Button>One</Button>
<Button>Two</Button>
@@ -45,7 +45,7 @@ import { ButtonGroup } from '@ohfi/ui';
## Group sizes and colorss
<Playground>
<div className="flex flex-col items-center">
<div className="p-4 flex flex-col items-center">
<ButtonGroup color="default" size="small" className="m-2">
<Button>One</Button>
<Button>Two</Button>
@@ -67,7 +67,7 @@ import { ButtonGroup } from '@ohfi/ui';
## Group orientation
<Playground>
<div className="flex flex-row justify-center">
<div className="p-4 flex flex-row justify-center">
<ButtonGroup orientation="vertical" color="primary" className="m-2">
<Button>One</Button>
<Button>Two</Button>
@@ -99,7 +99,7 @@ import { ButtonGroup } from '@ohfi/ui';
## Split Button
<Playground>
<div className="flex flex-col items-center">
<div className="p-4 flex flex-col items-center">
<ButtonGroup color="primary" className="m-2">
<Button>Options</Button>
<IconButton className="mr-2">
platform/ui/src/components/Icon/icon.mdx
+4 -2
View File
@@ -13,12 +13,14 @@ import { ICONS } from './getIcon';
## Basic usage
<Playground>
<Icon name="active" className="text-custom-aquaBright m-4" />
<div className="p-4">
<Icon name="active" className="text-custom-aquaBright m-4" />
</div>
</Playground>
## All Icons
<div className="flex flex-wrap items-center bg-black py-8">
<div className="p-4 flex flex-wrap items-center bg-black py-8">
{Object.keys(ICONS)
.sort()
.map((name, i) => {
platform/ui/src/components/Input/Input.mdx
+1 -1
View File
@@ -15,7 +15,7 @@ import Input from './';
{() => {
const [inputValue, setInputValue] = React.useState('');
return (
<div>
<div className="p-4">
<Input
transparent
containerClassName="mb-3"
platform/ui/src/components/Label/Label.mdx
+5 -1
View File
@@ -13,7 +13,11 @@ import Label from './';
<Playground>
{() => {
return <Label text="Label" />;
return (
<div className="p-4">
<Label text="Label" />
</div>
);
}}
</Playground>
platform/ui/src/components/Typography/Typography.mdx
+31 -27
View File
@@ -21,30 +21,32 @@ import { Typography } from '@ohfi/ui';
## Basic usage
<Playground>
<Typography variant="h1">
h1. The five boxing wizards jump quickly.
</Typography>
<Typography variant="h2">
h2. The five boxing wizards jump quickly.
</Typography>
<Typography variant="h3">
h3. The five boxing wizards jump quickly.
</Typography>
<Typography variant="h4">
h4. The five boxing wizards jump quickly.
</Typography>
<Typography variant="h5">
h5. The five boxing wizards jump quickly.
</Typography>
<Typography variant="h6">
h6. The five boxing wizards jump quickly.
</Typography>
<Typography variant="subtitle">
subtitle. The five boxing wizards jump quickly.
</Typography>
<Typography variant="body">
body. The five boxing wizards jump quickly.
</Typography>
<div className="p-4">
<Typography variant="h1">
h1. The five boxing wizards jump quickly.
</Typography>
<Typography variant="h2">
h2. The five boxing wizards jump quickly.
</Typography>
<Typography variant="h3">
h3. The five boxing wizards jump quickly.
</Typography>
<Typography variant="h4">
h4. The five boxing wizards jump quickly.
</Typography>
<Typography variant="h5">
h5. The five boxing wizards jump quickly.
</Typography>
<Typography variant="h6">
h6. The five boxing wizards jump quickly.
</Typography>
<Typography variant="subtitle">
subtitle. The five boxing wizards jump quickly.
</Typography>
<Typography variant="body">
body. The five boxing wizards jump quickly.
</Typography>
</div>
</Playground>
## Changing the HTML element
@@ -55,9 +57,11 @@ a semantic element. The style of a Typography is independent of the semantic
element.
<Playground>
<Typography variant="h1" component="h2">
This is a h2 using the h1 styles.
</Typography>
<div className="p-4">
<Typography variant="h1" component="h2">
This is a h2 using the h1 styles.
</Typography>
</div>
</Playground>
## Properties