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

feat: Icon component (#1499)

Browse Source 
* New icons and old strucure of OHIF ui v1

* Export icon

* Removing wrong import and fixing some exports

* Fixing svg loader and svg images to fullCurrent

* Small fixes on docz

* Remove repeated icon

* Update other components to use Icon

* Update platform/ui/src/components/Icon/icon.mdx

Co-Authored-By: Rodrigo Antinarelli <rodrigoantinarelli@gmail.com>

* Fixing callouts

* Move icons to assets and fixing layout on iconButtons

* Fix path of icons

Co-authored-by: Danny Brown <danny.ri.brown@gmail.com>
Co-authored-by: Rodrigo Antinarelli <rodrigoantinarelli@gmail.com>
This commit is contained in:
Gustavo André LelisRodrigo AntinarelliDanny Brown
 authored and James A. Petts committed 2020-05-15 13:35:57 +02:00
1 parent ff90f729ab
commit f4aea45e01
22 files changed
+370 -92
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

platform/ui/src/components/Button/Button.mdx
+122 -42
View File
@@ -6,6 +6,8 @@ route: components/button
import { Playground, Props } from 'docz';
import Button from './';
import IconButton from '../IconButton';
import Icon from './../Icon';
# Button
@@ -140,13 +142,12 @@ import { Button } from '@ohfi/ui';
## Buttons with icons
<Playground>
{() => {
return (
<div className="flex">
<Button
<div className="flex">
<Button
variant="contained"
color="primary"
className="m-1"
<<<<<<< HEAD
startIcon={
<svg
class="fill-current w-4 h-4"
@@ -156,13 +157,17 @@ import { Button } from '@ohfi/ui';
<path d="M13 8V2H7v6H2l8 8 8-8h-5zM0 18h20v2H0v-2z" />
</svg>
}
=======
startIcon={<Icon name="settings" />}
>>>>>>> 98a130b58... feat: Icon component (#1499)
>
Download
Settings
</Button>
<Button
<Button
variant="contained"
color="primary"
className="m-1"
<<<<<<< HEAD
endIcon={
<svg
class="fill-current w-4 h-4"
@@ -179,6 +184,22 @@ import { Button } from '@ohfi/ui';
)
}}
=======
endIcon={<Icon name="settings" />}
>
Download
</Button>
<Button
variant="outlined"
rounded="full"
color="default"
className="m-1"
endIcon={<Icon name="settings" />}
>
Download
</Button>
</div>
>>>>>>> 98a130b58... feat: Icon component (#1499)
</Playground>
## Icon Buttons
@@ -190,42 +211,101 @@ import { IconButton } from '@ohfi/ui';
```
<Playground>
<IconButton className="mr-2">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M23.822 20.88l-6.353-6.354c.93-1.465 1.467-3.2 1.467-5.059.001-5.219-4.247-9.467-9.468-9.467s-9.468 4.248-9.468 9.468c0 5.221 4.247 9.469 9.468 9.469 1.768 0 3.421-.487 4.839-1.333l6.396 6.396 3.119-3.12zm-20.294-11.412c0-3.273 2.665-5.938 5.939-5.938 3.275 0 5.94 2.664 5.94 5.938 0 3.275-2.665 5.939-5.94 5.939-3.274 0-5.939-2.664-5.939-5.939z"/></svg>
</IconButton>
<IconButton className="mr-2" variant="text">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 12l-6-5v4h-5v-5h4l-5-6-5 6h4v5h-5v-4l-6 5 6 5v-4h5v5h-4l5 6 5-6h-4v-5h5v4z"/></svg>
</IconButton>
<IconButton className="mr-2" variant="outlined" >
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12.026 14.116c-3.475 1.673-7.504 3.619-8.484 4.09-1.848.889-3.542-1.445-3.542-1.445l8.761-4.226 3.265 1.581zm7.93 6.884c-.686 0-1.393-.154-2.064-.479-1.943-.941-2.953-3.001-2.498-4.854.26-1.057-.296-1.201-1.145-1.612l-14.189-6.866s1.7-2.329 3.546-1.436c1.134.549 5.689 2.747 9.614 4.651l.985-.474c.85-.409 1.406-.552 1.149-1.609-.451-1.855.564-3.913 2.51-4.848.669-.321 1.373-.473 2.054-.473 2.311 0 4.045 1.696 4.045 3.801 0 1.582-.986 3.156-2.613 3.973-1.625.816-2.765.18-4.38.965l-.504.245.552.27c1.613.789 2.754.156 4.377.976 1.624.819 2.605 2.392 2.605 3.97 0 2.108-1.739 3.8-4.044 3.8zm-2.555-12.815c.489 1.022 1.876 1.378 3.092.793 1.217-.584 1.809-1.893 1.321-2.916-.489-1.022-1.876-1.379-3.093-.794s-1.808 1.894-1.32 2.917zm-3.643 3.625c0-.414-.335-.75-.75-.75-.414 0-.75.336-.75.75s.336.75.75.75.75-.336.75-.75zm6.777 3.213c-1.215-.588-2.604-.236-3.095.786-.491 1.022.098 2.332 1.313 2.919 1.215.588 2.603.235 3.094-.787.492-1.021-.097-2.33-1.312-2.918z"/></svg>
</IconButton>
<IconButton className="mr-2" color="primary">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M23.822 20.88l-6.353-6.354c.93-1.465 1.467-3.2 1.467-5.059.001-5.219-4.247-9.467-9.468-9.467s-9.468 4.248-9.468 9.468c0 5.221 4.247 9.469 9.468 9.469 1.768 0 3.421-.487 4.839-1.333l6.396 6.396 3.119-3.12zm-20.294-11.412c0-3.273 2.665-5.938 5.939-5.938 3.275 0 5.94 2.664 5.94 5.938 0 3.275-2.665 5.939-5.94 5.939-3.274 0-5.939-2.664-5.939-5.939z"/></svg>
</IconButton>
<IconButton className="mr-2" variant="text" color="primary">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 12l-6-5v4h-5v-5h4l-5-6-5 6h4v5h-5v-4l-6 5 6 5v-4h5v5h-4l5 6 5-6h-4v-5h5v4z"/></svg>
</IconButton>
<IconButton className="mr-2" variant="outlined" color="primary">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12.026 14.116c-3.475 1.673-7.504 3.619-8.484 4.09-1.848.889-3.542-1.445-3.542-1.445l8.761-4.226 3.265 1.581zm7.93 6.884c-.686 0-1.393-.154-2.064-.479-1.943-.941-2.953-3.001-2.498-4.854.26-1.057-.296-1.201-1.145-1.612l-14.189-6.866s1.7-2.329 3.546-1.436c1.134.549 5.689 2.747 9.614 4.651l.985-.474c.85-.409 1.406-.552 1.149-1.609-.451-1.855.564-3.913 2.51-4.848.669-.321 1.373-.473 2.054-.473 2.311 0 4.045 1.696 4.045 3.801 0 1.582-.986 3.156-2.613 3.973-1.625.816-2.765.18-4.38.965l-.504.245.552.27c1.613.789 2.754.156 4.377.976 1.624.819 2.605 2.392 2.605 3.97 0 2.108-1.739 3.8-4.044 3.8zm-2.555-12.815c.489 1.022 1.876 1.378 3.092.793 1.217-.584 1.809-1.893 1.321-2.916-.489-1.022-1.876-1.379-3.093-.794s-1.808 1.894-1.32 2.917zm-3.643 3.625c0-.414-.335-.75-.75-.75-.414 0-.75.336-.75.75s.336.75.75.75.75-.336.75-.75zm6.777 3.213c-1.215-.588-2.604-.236-3.095.786-.491 1.022.098 2.332 1.313 2.919 1.215.588 2.603.235 3.094-.787.492-1.021-.097-2.33-1.312-2.918z"/></svg>
</IconButton>
<IconButton className="mr-2" color="secondary">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M23.822 20.88l-6.353-6.354c.93-1.465 1.467-3.2 1.467-5.059.001-5.219-4.247-9.467-9.468-9.467s-9.468 4.248-9.468 9.468c0 5.221 4.247 9.469 9.468 9.469 1.768 0 3.421-.487 4.839-1.333l6.396 6.396 3.119-3.12zm-20.294-11.412c0-3.273 2.665-5.938 5.939-5.938 3.275 0 5.94 2.664 5.94 5.938 0 3.275-2.665 5.939-5.94 5.939-3.274 0-5.939-2.664-5.939-5.939z"/></svg>
</IconButton>
<IconButton className="mr-2" variant="text" color="secondary">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 12l-6-5v4h-5v-5h4l-5-6-5 6h4v5h-5v-4l-6 5 6 5v-4h5v5h-4l5 6 5-6h-4v-5h5v4z"/></svg>
</IconButton>
<IconButton className="mr-2" variant="outlined" color="secondary">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12.026 14.116c-3.475 1.673-7.504 3.619-8.484 4.09-1.848.889-3.542-1.445-3.542-1.445l8.761-4.226 3.265 1.581zm7.93 6.884c-.686 0-1.393-.154-2.064-.479-1.943-.941-2.953-3.001-2.498-4.854.26-1.057-.296-1.201-1.145-1.612l-14.189-6.866s1.7-2.329 3.546-1.436c1.134.549 5.689 2.747 9.614 4.651l.985-.474c.85-.409 1.406-.552 1.149-1.609-.451-1.855.564-3.913 2.51-4.848.669-.321 1.373-.473 2.054-.473 2.311 0 4.045 1.696 4.045 3.801 0 1.582-.986 3.156-2.613 3.973-1.625.816-2.765.18-4.38.965l-.504.245.552.27c1.613.789 2.754.156 4.377.976 1.624.819 2.605 2.392 2.605 3.97 0 2.108-1.739 3.8-4.044 3.8zm-2.555-12.815c.489 1.022 1.876 1.378 3.092.793 1.217-.584 1.809-1.893 1.321-2.916-.489-1.022-1.876-1.379-3.093-.794s-1.808 1.894-1.32 2.917zm-3.643 3.625c0-.414-.335-.75-.75-.75-.414 0-.75.336-.75.75s.336.75.75.75.75-.336.75-.75zm6.777 3.213c-1.215-.588-2.604-.236-3.095.786-.491 1.022.098 2.332 1.313 2.919 1.215.588 2.603.235 3.094-.787.492-1.021-.097-2.33-1.312-2.918z"/></svg>
</IconButton>
<IconButton className="mr-2" color="white">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M23.822 20.88l-6.353-6.354c.93-1.465 1.467-3.2 1.467-5.059.001-5.219-4.247-9.467-9.468-9.467s-9.468 4.248-9.468 9.468c0 5.221 4.247 9.469 9.468 9.469 1.768 0 3.421-.487 4.839-1.333l6.396 6.396 3.119-3.12zm-20.294-11.412c0-3.273 2.665-5.938 5.939-5.938 3.275 0 5.94 2.664 5.94 5.938 0 3.275-2.665 5.939-5.94 5.939-3.274 0-5.939-2.664-5.939-5.939z"/></svg>
</IconButton>
<IconButton className="mr-2" variant="text" color="white">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M24 12l-6-5v4h-5v-5h4l-5-6-5 6h4v5h-5v-4l-6 5 6 5v-4h5v5h-4l5 6 5-6h-4v-5h5v4z"/></svg>
</IconButton>
<IconButton className="mr-2" variant="outlined" color="white">
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M12.026 14.116c-3.475 1.673-7.504 3.619-8.484 4.09-1.848.889-3.542-1.445-3.542-1.445l8.761-4.226 3.265 1.581zm7.93 6.884c-.686 0-1.393-.154-2.064-.479-1.943-.941-2.953-3.001-2.498-4.854.26-1.057-.296-1.201-1.145-1.612l-14.189-6.866s1.7-2.329 3.546-1.436c1.134.549 5.689 2.747 9.614 4.651l.985-.474c.85-.409 1.406-.552 1.149-1.609-.451-1.855.564-3.913 2.51-4.848.669-.321 1.373-.473 2.054-.473 2.311 0 4.045 1.696 4.045 3.801 0 1.582-.986 3.156-2.613 3.973-1.625.816-2.765.18-4.38.965l-.504.245.552.27c1.613.789 2.754.156 4.377.976 1.624.819 2.605 2.392 2.605 3.97 0 2.108-1.739 3.8-4.044 3.8zm-2.555-12.815c.489 1.022 1.876 1.378 3.092.793 1.217-.584 1.809-1.893 1.321-2.916-.489-1.022-1.876-1.379-3.093-.794s-1.808 1.894-1.32 2.917zm-3.643 3.625c0-.414-.335-.75-.75-.75-.414 0-.75.336-.75.75s.336.75.75.75.75-.336.75-.75zm6.777 3.213c-1.215-.588-2.604-.236-3.095.786-.491 1.022.098 2.332 1.313 2.919 1.215.588 2.603.235 3.094-.787.492-1.021-.097-2.33-1.312-2.918z"/></svg>
</IconButton>
<div className="flex flex-col items-center">
<div className="">
<IconButton className="m-2">
<Icon name="settings" />
</IconButton>
<IconButton className="m-2" variant="text">
<Icon name="settings" />
</IconButton>
<IconButton className="m-2" variant="outlined" >
<Icon name="settings" />
</IconButton>
</div>
<div>
<IconButton className="m-2" color="primary">
<Icon name="launch-arrow" />
</IconButton>
<IconButton className="m-2" color="primary" variant="text">
<Icon name="launch-arrow" />
</IconButton>
<IconButton className="m-2" color="primary" variant="outlined">
<Icon name="launch-arrow" />
</IconButton>
</div>
<div>
<IconButton className="m-2" color="secondary">
<Icon name="cancel" />
</IconButton>
<IconButton className="m-2" color="secondary" variant="text">
<Icon name="cancel" />
</IconButton>
<IconButton className="m-2" color="secondary" variant="outlined">
<Icon name="cancel" />
</IconButton>
</div>
<div>
<IconButton className="m-2" color="white">
<Icon name="settings" />
</IconButton>
<IconButton className="m-2" variant="text" color="white">
<Icon name="launch-arrow" />
</IconButton>
<IconButton className="m-2" variant="outlined" color="white">
<Icon name="cancel" />
</IconButton>
</div>
</div>
</Playground>
<Playground>
<div>
<div className="">
<IconButton className="m-2">
<Icon name="settings" />
</IconButton>
<IconButton className="m-2" variant="outlined" >
<Icon name="settings" />
</IconButton>
<IconButton className="m-2" variant="text">
<Icon name="settings" />
</IconButton>
</div>
<div>
<IconButton className="m-2" color="primary">
<Icon name="launch-arrow" />
</IconButton>
<IconButton className="m-2" color="primary" variant="text">
<Icon name="launch-arrow" />
</IconButton>
<IconButton className="m-2" color="primary" variant="outlined">
<Icon name="launch-arrow" />
</IconButton>
</div>
<div>
<IconButton className="m-2" color="secondary">
<Icon name="cancel" />
</IconButton>
<IconButton className="m-2" color="secondary" variant="text">
<Icon name="cancel" />
</IconButton>
<IconButton className="m-2" color="secondary" variant="outlined">
<Icon name="cancel" />
</IconButton>
</div>
<div>
<IconButton className="m-2" color="white">
<Icon name="settings" />
</IconButton>
<IconButton className="m-2" variant="text" color="white">
<Icon name="launch-arrow" />
</IconButton>
<IconButton className="m-2" variant="outlined" color="white">
<Icon name="cancel" />
</IconButton>
</div>
</div>
</Playground>