feat: Icon component (#1499)
* 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:
authored and James A. Petts committed
1 parent
ff90f729ab
commit
f4aea45e01
22 files changed
+370
-92
No files matched your search
@@ -1,3 +1,7 @@
|
||||
module.exports = {
|
||||
plugins: ['gatsby-plugin-sass', `gatsby-plugin-postcss`],
|
||||
plugins: [
|
||||
'gatsby-plugin-react-svg',
|
||||
'gatsby-plugin-sass',
|
||||
`gatsby-plugin-postcss`,
|
||||
],
|
||||
};
|
||||
@@ -1,6 +1,8 @@
|
||||
import ThemeWrapper from './src/components/ThemeWrapper/';
|
||||
import Button from './src/components/Button';
|
||||
import IconButton from './src/components/IconButton';
|
||||
import Typography from './src/components/Typography';
|
||||
|
||||
export { ThemeWrapper, Button, IconButton, Typography };
|
||||
export {
|
||||
Button,
|
||||
ButtonGroup,
|
||||
Icon,
|
||||
IconButton,
|
||||
ThemeWrapper,
|
||||
Typography,
|
||||
} from './src/components';
|
||||
@@ -28,6 +28,7 @@
|
||||
"classnames": "^2.2.6",
|
||||
"docz": "^2.2.0",
|
||||
"gatsby-plugin-postcss": "^2.1.20",
|
||||
"gatsby-plugin-react-svg": "^3.0.0",
|
||||
"gatsby-plugin-sass": "^2.1.28",
|
||||
"node-sass": "^4.13.1",
|
||||
"prop-types": "^15.7.2",
|
||||
|
||||
@@ -0,0 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="20" viewBox="0 0 21 20">
|
||||
<g fill="currentColor">
|
||||
<path d="M14.75.917c.693 0 1.263.528 1.327 1.205l.006.128v4.167c0 .276-.224.5-.5.5-.245 0-.45-.177-.492-.41l-.008-.09V2.25c0-.161-.114-.295-.266-.327l-.067-.006H2.25c-.161 0-.295.114-.327.266l-.006.067v12.5c0 .161.114.295.266.327l.067.006h4.167c.276 0 .5.224.5.5 0 .246-.177.45-.41.492l-.09.008H2.25c-.693 0-1.263-.528-1.327-1.205l-.006-.128V2.25c0-.693.528-1.263 1.205-1.327L2.25.917h12.5z" transform="translate(-.5 -1)"/>
|
||||
<path d="M19.583 5.917H7.417c-.829 0-1.5.671-1.5 1.5v12.166c0 .829.671 1.5 1.5 1.5h12.166c.829 0 1.5-.671 1.5-1.5V7.417c0-.829-.671-1.5-1.5-1.5zm-12.166 1h12.166c.276 0 .5.224.5.5v12.166c0 .276-.224.5-.5.5H7.417c-.276 0-.5-.224-.5-.5V7.417c0-.276.224-.5.5-.5z" transform="translate(-.5 -1)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 861 B |
@@ -0,0 +1,8 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="19" height="19" viewBox="0 0 19 19">
|
||||
<g fill="currentColor" fill-rule="evenodd">
|
||||
<circle cx="9.5" cy="9.5" r="9.5" fill="currentColor"/>
|
||||
<g stroke="#000" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5">
|
||||
<path d="M.188.187L8.813 8.812M8.813.187L.188 8.812" transform="translate(5 5)"/>
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 411 B |
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
||||
<path fill="currentColor" fill-rule="evenodd" d="M10 13L5 7.737 5.7 7 10 11.526 14.3 7 15 7.737z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 195 B |
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20">
|
||||
<path fill="currentColor" fill-rule="evenodd" d="M10 13L5 7.737 5.7 7 10 11.526 14.3 7 15 7.737z" transform="rotate(-90 10 10)"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 225 B |
@@ -0,0 +1,7 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
|
||||
<g fill="currentColor" fill-rule="evenodd">
|
||||
<path d="M8 .117C3.645.117.115 3.647.115 8c0 4.355 3.53 7.885 7.885 7.885s7.885-3.53 7.885-7.885c0-4.354-3.53-7.884-7.885-7.884zm0 1c3.802 0 6.885 3.082 6.885 6.884 0 3.802-3.083 6.885-6.885 6.885-3.802 0-6.885-3.083-6.885-6.885C1.115 4.2 4.198 1.117 8 1.117z"/>
|
||||
<path d="M7.385 6.27c.575 0 1.048.434 1.108.993l.007.122v4.307c0 .276-.224.5-.5.5-.245 0-.45-.177-.492-.41l-.008-.09V7.385c0-.051-.033-.095-.079-.11l-.036-.006H6.154c-.276 0-.5-.224-.5-.5 0-.245.177-.45.41-.492l.09-.008h1.23zM7.077 3.192l.101.007c.398.05.707.39.707.801 0 .446-.362.808-.808.808-.446 0-.808-.362-.808-.808 0-.412.308-.752.707-.801l.1-.007z"/>
|
||||
<path d="M9.846 11.194c.276 0 .5.223.5.5 0 .245-.177.45-.41.491l-.09.009H6.154c-.276 0-.5-.224-.5-.5 0-.246.177-.45.41-.492l.09-.008h3.692z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 937 B |
@@ -0,0 +1,7 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<g fill="currentColor" fill-rule="evenodd">
|
||||
<circle cx="12" cy="12" r="12" fill="currentColor"/>
|
||||
<path fill="#000" fill-rule="nonzero" d="M17.207 10.793c.36.36.388.928.083 1.32l-.083.094-5 5c-.39.39-1.024.39-1.414 0-.36-.36-.388-.928-.083-1.32l.083-.094 4.292-4.293-4.292-4.293c-.36-.36-.388-.928-.083-1.32l.083-.094c.36-.36.928-.388 1.32-.083l.094.083 5 5z"/>
|
||||
<path fill="#000" fill-rule="nonzero" d="M17.5 11.5c0 .513-.386.936-.883.993l-.117.007H6c-.552 0-1-.448-1-1 0-.513.386-.936.883-.993L6 10.5h10.5c.552 0 1 .448 1 1z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 656 B |
@@ -0,0 +1,7 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="21" height="22" viewBox="0 0 21 22">
|
||||
<g fill="currentColor" fill-rule="evenodd">
|
||||
<path d="M10.5.31C4.87.31.308 4.872.308 10.501c0 5.629 4.563 10.192 10.192 10.192 5.63 0 10.192-4.563 10.192-10.192C20.692 4.872 16.13.309 10.5.309zm0 1c5.077 0 9.192 4.115 9.192 9.192 0 5.076-4.115 9.192-9.192 9.192s-9.192-4.116-9.192-9.192c0-5.077 4.115-9.193 9.192-9.193z" transform="translate(0 .5)"/>
|
||||
<path d="M9.692 8.385c.677 0 1.234.514 1.301 1.174l.007.133v5.654c0 .276-.224.5-.5.5-.245 0-.45-.177-.492-.41l-.008-.09V9.692c0-.145-.101-.267-.237-.3l-.07-.007H8.076c-.276 0-.5-.224-.5-.5 0-.246.177-.45.41-.492l.09-.008h1.615zM9.288 4.346l.114.007c.446.056.79.436.79.897 0 .5-.404.904-.904.904-.499 0-.903-.405-.903-.904 0-.46.344-.841.79-.897l.113-.007z" transform="translate(0 .5)"/>
|
||||
<path d="M12.923 14.848c.276 0 .5.224.5.5 0 .245-.177.45-.41.492l-.09.008H8.077c-.276 0-.5-.224-.5-.5 0-.246.177-.45.41-.492l.09-.008h4.846z" transform="translate(0 .5)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.0 KiB |
@@ -0,0 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24">
|
||||
<g fill="currentColor" fill-rule="evenodd">
|
||||
<path d="M11.5-1l-.164.005C10.032-.91 9 .175 9 1.5v1.08l-.064.02c-.278.084-.554.179-.825.282l-.201.079-.861-.86c-.976-.976-2.558-.976-3.535 0L2.1 3.516l-.121.131c-.853.982-.812 2.47.121 3.405l.862.861-.078.199c-.103.272-.197.547-.282.824L2.582 9 1.5 9.001c-1.38 0-2.5 1.12-2.5 2.5v1l.005.164C-.91 13.97.175 15.001 1.5 15.001L2.577 15l.02.066c.085.277.179.552.282.824l.078.199-.862.862c-.976.977-.976 2.56 0 3.535l1.421 1.417.13.121c.981.85 2.47.81 3.404-.123l.861-.864.2.08c.271.103.546.198.824.283l.065.018V22.5c0 1.38 1.12 2.5 2.5 2.5h1l.164-.005C13.968 24.91 15 23.825 15 22.5v-1.078l.064-.018c.278-.085.553-.179.825-.282l.198-.08.864.863c.976.976 2.558.976 3.534 0L21.9 20.49l.121-.131c.853-.982.812-2.47-.121-3.404l-.862-.863.08-.2c.104-.272.198-.547.284-.826L21.42 15h1.08c1.38 0 2.5-1.12 2.5-2.5v-1l-.005-.164C24.91 10.032 23.825 9 22.5 9h-1.079l-.018-.065c-.085-.278-.18-.553-.283-.825l-.08-.199.862-.86c.977-.977.977-2.56 0-3.536L20.484 2.1l-.13-.122c-.981-.85-2.47-.81-3.404.123l-.862.861-.198-.078c-.272-.103-.547-.198-.825-.283L15 2.583V1.5C15 .12 13.88-1 12.5-1h-1zm1 1.5c.513 0 .936.386.993.883l.007.117v2.251c.868.175 1.714.447 2.52.81l.4.19 1.59-1.589c.36-.36.928-.388 1.32-.083l.094.083 1.418 1.414c.36.36.388.928.083 1.32l-.083.094-1.589 1.588c.394.794.698 1.629.905 2.49l.095.432H22.5c.513 0 .936.386.993.883l.007.117v1c0 .513-.386.936-.883.993l-.117.007h-2.246c-.176.87-.449 1.717-.814 2.525l-.19.401 1.589 1.59c.36.36.388.928.083 1.32l-.083.094-1.414 1.414c-.36.36-.928.388-1.32.083l-.094-.083-1.591-1.589c-.793.394-1.628.697-2.488.904l-.432.096V22.5c0 .513-.386.936-.883.993l-.117.007h-1c-.513 0-.936-.386-.993-.883L10.5 22.5v-2.25c-.869-.175-1.715-.447-2.522-.81l-.4-.19-1.589 1.59c-.36.36-.928.388-1.32.083l-.094-.083-1.419-1.414c-.36-.36-.388-.928-.083-1.32l.083-.094 1.59-1.59c-.394-.794-.697-1.628-.904-2.489l-.096-.432H1.5c-.513 0-.936-.386-.993-.883L.5 12.5v-1c0-.513.386-.936.883-.993L1.5 10.5h2.25c.175-.868.447-1.714.81-2.52l.19-.401-1.59-1.589c-.36-.36-.388-.928-.083-1.32l.083-.094 1.415-1.415c.36-.36.928-.388 1.32-.083l.094.083 1.59 1.587c.793-.394 1.628-.698 2.489-.905l.432-.095V1.5c0-.513.386-.936.883-.993L11.5.5h1z"/>
|
||||
<path d="M12 6.001c-3.314 0-6 2.686-6 6s2.686 6 6 6 6-2.686 6-6-2.686-6-6-6zm0 1.5c2.485 0 4.5 2.015 4.5 4.5s-2.015 4.5-4.5 4.5-4.5-2.015-4.5-4.5 2.015-4.5 4.5-4.5z"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.4 KiB |
@@ -0,0 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="9" height="16" viewBox="0 0 9 16">
|
||||
<path fill="currentColor" fill-rule="evenodd" d="M8.69 7.516L7.51 6.274 4.5 9.442 1.49 6.274 0.31 7.516 4.5 11.926z"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 212 B |
@@ -0,0 +1,5 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="9" height="16" viewBox="0 0 9 16">
|
||||
<g fill="currentColor" fill-rule="evenodd">
|
||||
<path fill="currentColor" d="M8.69 1.516L7.51 0.274 4.499 3.442 1.49 0.274 0.31 1.516 4.5 5.926z" transform="translate(0 5) matrix(1 0 0 -1 0 6.2)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 304 B |
@@ -0,0 +1,6 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="9" height="16" viewBox="0 0 9 16">
|
||||
<g fill="currentColor" fill-rule="evenodd">
|
||||
<path d="M8.69 11.516L7.51 10.274 4.5 13.442 1.49 10.274 0.31 11.516 4.5 15.926z"/>
|
||||
<path d="M8.69 1.516L7.51 0.274 4.499 3.442 1.49 0.274 0.31 1.516 4.5 5.926z" transform="matrix(1 0 0 -1 0 6.2)"/>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 361 B |
@@ -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>
|
||||
|
||||
|
||||
|
||||
@@ -6,7 +6,8 @@ route: components/buttonGroup
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import Button from '../Button';
|
||||
import IconButton from '../IconButton';
|
||||
import IconButton from './../IconButton';
|
||||
import Icon from './../Icon';
|
||||
import ButtonGroup from './';
|
||||
|
||||
# ButtonGroup
|
||||
@@ -100,16 +101,9 @@ import { ButtonGroup } from '@ohfi/ui';
|
||||
<Playground>
|
||||
<div className="flex flex-col items-center">
|
||||
<ButtonGroup color="primary" className="m-2">
|
||||
<Button>Search</Button>
|
||||
<Button>Options</Button>
|
||||
<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>
|
||||
<Icon name="settings" />
|
||||
</IconButton>
|
||||
</ButtonGroup>
|
||||
</div>
|
||||
|
||||
@@ -0,0 +1,13 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import getIcon from './getIcon';
|
||||
|
||||
const Icon = ({ name, ...otherProps }) => {
|
||||
return <React.Fragment>{getIcon(name, otherProps)}</React.Fragment>;
|
||||
};
|
||||
|
||||
Icon.propTypes = {
|
||||
name: PropTypes.string.isRequired,
|
||||
};
|
||||
|
||||
export default Icon;
|
||||
@@ -0,0 +1,42 @@
|
||||
import React from 'react';
|
||||
// Icons
|
||||
import active from './../../assets/icons/active.svg';
|
||||
import cancel from './../../assets/icons/cancel.svg';
|
||||
import chevronDown from './../../assets/icons/chevron-down.svg';
|
||||
import chevronRight from './../../assets/icons/chevron-right.svg';
|
||||
import infoLink from './../../assets/icons/info-link.svg';
|
||||
import launchArrow from './../../assets/icons/launch-arrow.svg';
|
||||
import launchInfo from './../../assets/icons/launch-info.svg';
|
||||
import settings from './../../assets/icons/settings.svg';
|
||||
import sortingActiveDown from './../../assets/icons/sorting-active-down.svg';
|
||||
import sortingActiveUp from './../../assets/icons/sorting-active-up.svg';
|
||||
import sorting from './../../assets/icons/sorting.svg';
|
||||
|
||||
const ICONS = {
|
||||
active: active,
|
||||
cancel: cancel,
|
||||
'chevron-down': chevronDown,
|
||||
'chevron-right': chevronRight,
|
||||
'info-link': infoLink,
|
||||
'launch-arrow': launchArrow,
|
||||
'launch-info': launchInfo,
|
||||
settings: settings,
|
||||
'sorting-active-down': sortingActiveDown,
|
||||
'sorting-active-up': sortingActiveUp,
|
||||
sorting: sorting,
|
||||
};
|
||||
|
||||
/**
|
||||
* Return the matching SVG Icon as a React Component.
|
||||
* Results in an inlined SVG Element. If there's no match,
|
||||
* return `null`
|
||||
*/
|
||||
export default function getIcon(key, props) {
|
||||
if (!key || !ICONS[key]) {
|
||||
return React.createElement('div', null, 'Missing Icon');
|
||||
}
|
||||
|
||||
return React.createElement(ICONS[key], props);
|
||||
}
|
||||
|
||||
export { ICONS };
|
||||
@@ -0,0 +1,43 @@
|
||||
---
|
||||
name: Icon
|
||||
menu: Components
|
||||
route: components/icon
|
||||
---
|
||||
|
||||
import { Playground, Props } from 'docz';
|
||||
import Icon from './Icon';
|
||||
import { ICONS } from './getIcon';
|
||||
|
||||
# Icon
|
||||
|
||||
## Basic usage
|
||||
|
||||
<Playground>
|
||||
<Icon name="active" className="text-custom-aquaBright m-4" />
|
||||
</Playground>
|
||||
|
||||
## All Icons
|
||||
|
||||
<div className="flex flex-wrap items-center bg-black py-8">
|
||||
{Object.keys(ICONS)
|
||||
.sort()
|
||||
.map((name, i) => {
|
||||
return (
|
||||
<React.Fragment key={i}>
|
||||
<div className="flex flex-col items-center w-48 py-4">
|
||||
<div className="flex items-center justify-center rounded border border-custom-aquaBright p-4 m-2 w-20 h-20">
|
||||
<Icon name={name} className="text-custom-aquaBright" />
|
||||
</div>
|
||||
<div className="break-normal text-white">{name}</div>
|
||||
</div>
|
||||
</React.Fragment>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
|
||||
## Properties
|
||||
|
||||
<Props of={Icon} />
|
||||
|
||||
The `Icon` component takes a single prop of `name`, which indicates which Icon
|
||||
should be displayed. The icon inherit the component text/font styles.
|
||||
@@ -0,0 +1,2 @@
|
||||
import Icon from './Icon';
|
||||
export default Icon;
|
||||
@@ -0,0 +1,8 @@
|
||||
import Button from './Button';
|
||||
import ButtonGroup from './ButtonGroup';
|
||||
import Icon from './Icon';
|
||||
import IconButton from './IconButton';
|
||||
import ThemeWrapper from './ThemeWrapper/';
|
||||
import Typography from './Typography';
|
||||
|
||||
export { Button, ButtonGroup, Icon, IconButton, ThemeWrapper, Typography };
|
||||
Reference in new issue
Block a user