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:
Gustavo André Lelis 2020-03-10 16:11:12 -03:00 committed by James A. Petts
parent ff90f729ab
commit f4aea45e01
22 changed files with 370 additions and 92 deletions

View File

@ -1,3 +1,7 @@
module.exports = {
plugins: ['gatsby-plugin-sass', `gatsby-plugin-postcss`],
plugins: [
'gatsby-plugin-react-svg',
'gatsby-plugin-sass',
`gatsby-plugin-postcss`,
],
};

View File

@ -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';

View File

@ -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",

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

View File

@ -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

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>

View File

@ -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>

View File

@ -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;

View File

@ -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 };

View File

@ -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.

View File

@ -0,0 +1,2 @@
import Icon from './Icon';
export default Icon;

View File

@ -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 };

View File

@ -6051,7 +6051,7 @@ css-what@^3.2.1:
resolved "https://registry.yarnpkg.com/css-what/-/css-what-3.2.1.tgz#f4a8f12421064621b456755e34a03a2c22df5da1"
integrity sha512-WwOrosiQTvyms+Ti5ZC5vGEK0Vod3FTt1ca+payZqvKuGJF+dq7bG63DstxtN0dpm6FxY27a/zS3Wten+gEtGw==
css@^2.0.0:
css@2.2.4, css@^2.0.0:
version "2.2.4"
resolved "https://registry.yarnpkg.com/css/-/css-2.2.4.tgz#c646755c73971f2bba6a601e2cf2fd71b1298929"
integrity sha512-oUnjmWpy0niI3x/mPL8dVEI1l7MnG3+HHyRPHf+YFSbK+svOhXpmSOcDURUh2aOCgl2grzrOPt1nHLuCVFULLw==
@ -6562,7 +6562,7 @@ detect-indent@^6.0.0:
resolved "https://registry.yarnpkg.com/detect-indent/-/detect-indent-6.0.0.tgz#0abd0f549f69fc6659a254fe96786186b6f528fd"
integrity sha512-oSyFlqaTHCItVRGK5RmrmjB+CmaMOW7IaNA/kdxqhoa6d17j/5ce9O9eWXmV/KEdRwqpQA+Vqe8a8Bsybu4YnA==
detect-libc@^1.0.2, detect-libc@^1.0.3:
detect-libc@^1.0.3:
version "1.0.3"
resolved "https://registry.yarnpkg.com/detect-libc/-/detect-libc-1.0.3.tgz#fa137c4bd698edf55cd5cd02ac559f91a4c4ba9b"
integrity sha1-+hN8S9aY7fVc1c0CrFWfkaTEups=
@ -8825,6 +8825,13 @@ gatsby-plugin-react-helmet-async@^1.0.5:
resolved "https://registry.yarnpkg.com/gatsby-plugin-react-helmet-async/-/gatsby-plugin-react-helmet-async-1.0.15.tgz#b03bceb9fd0ec5bcaa93739a1970fd804ceaf573"
integrity sha512-rdNRxqY+szgOJGHnoONmXsfzGsOFiQrVWQtRlq5M9GluNkANzCNHjT2JoUyH8s261GK5MvME0m4rOO8BJHZkEQ==
gatsby-plugin-react-svg@^3.0.0:
version "3.0.0"
resolved "https://registry.yarnpkg.com/gatsby-plugin-react-svg/-/gatsby-plugin-react-svg-3.0.0.tgz#67984bf350bce0532bef965fab094b0b461cdf68"
integrity sha512-myZl5NjVZwLLn4ovwSDM7cufa8yjaRiU5KoufJrz8FEalRroZ/hFSCCKNVna3blTwxcS0rZgISigYn9/xY7rkw==
dependencies:
svg-react-loader "^0.4.4"
gatsby-plugin-root-import@^2.0.5:
version "2.0.5"
resolved "https://registry.yarnpkg.com/gatsby-plugin-root-import/-/gatsby-plugin-root-import-2.0.5.tgz#04e520dc661d67f49aa7950f11b7c780fd2fdbd3"
@ -10405,7 +10412,7 @@ i18next@^17.0.3:
dependencies:
"@babel/runtime" "^7.3.1"
iconv-lite@0.4.24, iconv-lite@^0.4.13, iconv-lite@^0.4.17, iconv-lite@^0.4.24, iconv-lite@^0.4.4, iconv-lite@~0.4.13:
iconv-lite@0.4.24, iconv-lite@^0.4.13, iconv-lite@^0.4.17, iconv-lite@^0.4.24, iconv-lite@~0.4.13:
version "0.4.24"
resolved "https://registry.yarnpkg.com/iconv-lite/-/iconv-lite-0.4.24.tgz#2022b4b25fbddc21d2f524974a474aafe733908b"
integrity sha512-v3MXnZAcvnywkTUEZomIActle7RXXeedOR31wwl7VlyoXO4Qi9arvSenNQWne1TcRwhCL1HwLI21bEqdpj8/rA==
@ -12361,6 +12368,15 @@ loader-runner@^2.4.0:
resolved "https://registry.yarnpkg.com/loader-runner/-/loader-runner-2.4.0.tgz#ed47066bfe534d7e84c4c7b9998c2a75607d9357"
integrity sha512-Jsmr89RcXGIwivFY21FcRrisYZfvLMTWx5kOLc+JTxtpBOG6xML0vzbc6SEQG2FO9/4Fc3wW4LVcB5DmGflaRw==
loader-utils@1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.1.0.tgz#c98aef488bcceda2ffb5e2de646d6a754429f5cd"
integrity sha1-yYrvSIvM7aL/teLeZG1qdUQp9c0=
dependencies:
big.js "^3.1.3"
emojis-list "^2.0.0"
json5 "^0.5.0"
loader-utils@1.2.3:
version "1.2.3"
resolved "https://registry.yarnpkg.com/loader-utils/-/loader-utils-1.2.3.tgz#1ff5dc6911c9f0a062531a4c04b609406108c2c7"
@ -13589,15 +13605,6 @@ ndarray@^1.0.18:
iota-array "^1.0.0"
is-buffer "^1.0.2"
needle@^2.2.1:
version "2.3.3"
resolved "https://registry.yarnpkg.com/needle/-/needle-2.3.3.tgz#a041ad1d04a871b0ebb666f40baaf1fb47867117"
integrity sha512-EkY0GeSq87rWp1hoq/sH/wnTWgFVhYlnIkbJ0YJFfRgEFlz2RraCjBpFQ+vrEgEdp0ThfyHADmkChEhcb7PKyw==
dependencies:
debug "^3.2.6"
iconv-lite "^0.4.4"
sax "^1.2.4"
negotiator@0.6.2:
version "0.6.2"
resolved "https://registry.yarnpkg.com/negotiator/-/negotiator-0.6.2.tgz#feacf7ccf525a77ae9634436a64883ffeca346fb"
@ -13785,22 +13792,6 @@ node-object-hash@^2.0.0:
resolved "https://registry.yarnpkg.com/node-object-hash/-/node-object-hash-2.0.0.tgz#9971fcdb7d254f05016bd9ccf508352bee11116b"
integrity sha512-VZR0zroAusy1ETZMZiGeLkdu50LGjG5U1KHZqTruqtTyQ2wfWhHG2Ow4nsUbfTFGlaREgNHcCWoM/OzEm6p+NQ==
node-pre-gyp@*:
version "0.14.0"
resolved "https://registry.yarnpkg.com/node-pre-gyp/-/node-pre-gyp-0.14.0.tgz#9a0596533b877289bcad4e143982ca3d904ddc83"
integrity sha512-+CvDC7ZttU/sSt9rFjix/P05iS43qHCOOGzcr3Ry99bXG7VX953+vFyEuph/tfqoYu8dttBkE86JSKBO2OzcxA==
dependencies:
detect-libc "^1.0.2"
mkdirp "^0.5.1"
needle "^2.2.1"
nopt "^4.0.1"
npm-packlist "^1.1.6"
npmlog "^4.0.2"
rc "^1.2.7"
rimraf "^2.6.1"
semver "^5.3.0"
tar "^4.4.2"
node-releases@^1.1.50:
version "1.1.50"
resolved "https://registry.yarnpkg.com/node-releases/-/node-releases-1.1.50.tgz#803c40d2c45db172d0410e4efec83aa8c6ad0592"
@ -13966,7 +13957,7 @@ npm-normalize-package-bin@^1.0.0, npm-normalize-package-bin@^1.0.1:
semver "^5.6.0"
validate-npm-package-name "^3.0.0"
npm-packlist@^1.1.6, npm-packlist@^1.4.4:
npm-packlist@^1.4.4:
version "1.4.8"
resolved "https://registry.yarnpkg.com/npm-packlist/-/npm-packlist-1.4.8.tgz#56ee6cc135b9f98ad3d51c1c95da22bbb9b2ef3e"
integrity sha512-5+AZgwru5IevF5ZdnFglB5wNlHG1AOOuw28WhUq8/8emhBmLv6jX5by4WJCh7lW0uSYZYS6DXqIsyZVIXRZU9A==
@ -14005,7 +13996,7 @@ npm-run-path@^4.0.0:
dependencies:
path-key "^3.0.0"
"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0, npmlog@^4.0.1, npmlog@^4.0.2, npmlog@^4.1.2:
"npmlog@0 || 1 || 2 || 3 || 4", npmlog@^4.0.0, npmlog@^4.0.1, npmlog@^4.1.2:
version "4.1.2"
resolved "https://registry.yarnpkg.com/npmlog/-/npmlog-4.1.2.tgz#08a7f2a8bf734604779a9efa4ad5cc717abb954b"
integrity sha512-2uUqazuKlTaSI/dC8AzicUck7+IrEaOnN/e0jd3Xtt1KcGpwx30v50mL7oPyr/h9bL3E4aZccVwpwP+5W9Vjkg==
@ -16253,6 +16244,11 @@ raf@^3.4.1:
dependencies:
performance-now "^2.1.0"
ramda@0.21.0:
version "0.21.0"
resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.21.0.tgz#a001abedb3ff61077d4ff1d577d44de77e8d0a35"
integrity sha1-oAGr7bP/YQd9T/HVd9RN536NCjU=
ramda@0.24.1:
version "0.24.1"
resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.24.1.tgz#c3b7755197f35b8dc3502228262c4c91ddb6b857"
@ -17875,7 +17871,7 @@ rx-lite@*, rx-lite@^4.0.8:
resolved "https://registry.yarnpkg.com/rx-lite/-/rx-lite-4.0.8.tgz#0b1e11af8bc44836f04a6407e92da42467b79444"
integrity sha1-Cx4Rr4vESDbwSmQH6S2kJGe3lEQ=
rx@^4.1.0:
rx@4.1.0, rx@^4.1.0:
version "4.1.0"
resolved "https://registry.yarnpkg.com/rx/-/rx-4.1.0.tgz#a5f13ff79ef3b740fe30aa803fb09f98805d4782"
integrity sha1-pfE/957zt0D+MKqAP7CfmIBdR4I=
@ -18067,7 +18063,7 @@ semver-diff@^2.0.0:
dependencies:
semver "^5.0.3"
"semver@2 || 3 || 4 || 5", "semver@2.x || 3.x || 4 || 5", semver@^5.0.3, semver@^5.3.0, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0, semver@^5.7.0, semver@^5.7.1:
"semver@2 || 3 || 4 || 5", "semver@2.x || 3.x || 4 || 5", semver@^5.0.3, semver@^5.4.1, semver@^5.5.0, semver@^5.5.1, semver@^5.6.0, semver@^5.7.0, semver@^5.7.1:
version "5.7.1"
resolved "https://registry.yarnpkg.com/semver/-/semver-5.7.1.tgz#a954f931aeba508d307bbf069eff0c01c96116f7"
integrity sha512-sauaDf/PZdVgrLTNYHRtpXa1iRiKcaebiKQ1BJdpQlWH2lCvexQdX55snPFyK7QzpudqbCI0qXFfOasHdyNDGQ==
@ -19399,6 +19395,18 @@ supports-hyperlinks@^1.0.1:
has-flag "^2.0.0"
supports-color "^5.0.0"
svg-react-loader@^0.4.4:
version "0.4.6"
resolved "https://registry.yarnpkg.com/svg-react-loader/-/svg-react-loader-0.4.6.tgz#b263efb3e3d2fff4c682a729351aba5f185051a1"
integrity sha512-HVEypjWQsQuJdBIPzXGxpmQsQts7QwfQuYgK1rah6BVCMoLNSCh/ESKVNd7/tHq8DkWYHHTyaUMDA1FjqZYrgA==
dependencies:
css "2.2.4"
loader-utils "1.1.0"
ramda "0.21.0"
rx "4.1.0"
traverse "0.6.6"
xml2js "0.4.17"
svg-tags@^1.0.0:
version "1.0.0"
resolved "https://registry.yarnpkg.com/svg-tags/-/svg-tags-1.0.0.tgz#58f71cee3bd519b59d4b2a843b6c7de64ac04764"
@ -19526,7 +19534,7 @@ tar@^2.0.0:
fstream "^1.0.12"
inherits "2"
tar@^4.4.10, tar@^4.4.12, tar@^4.4.2, tar@^4.4.8:
tar@^4.4.10, tar@^4.4.12, tar@^4.4.8:
version "4.4.13"
resolved "https://registry.yarnpkg.com/tar/-/tar-4.4.13.tgz#43b364bc52888d555298637b10d60790254ab525"
integrity sha512-w2VwSrBoHa5BsSyH+KxEqeQBAllHhccyMFVHtGtdMpF4W7IRWfZjFiQceJPChOeTsSDVUpER2T8FA93pr0L+QA==
@ -19870,6 +19878,11 @@ tr46@^1.0.1:
dependencies:
punycode "^2.1.0"
traverse@0.6.6:
version "0.6.6"
resolved "https://registry.yarnpkg.com/traverse/-/traverse-0.6.6.tgz#cbdf560fd7b9af632502fed40f918c157ea97137"
integrity sha1-y99WD9e5r2MlAv7UD5GMFX6pcTc=
treeify@^1.1.0:
version "1.1.0"
resolved "https://registry.yarnpkg.com/treeify/-/treeify-1.1.0.tgz#4e31c6a463accd0943879f30667c4fdaff411bb8"
@ -21539,6 +21552,14 @@ xml-name-validator@^3.0.0:
resolved "https://registry.yarnpkg.com/xml-name-validator/-/xml-name-validator-3.0.0.tgz#6ae73e06de4d8c6e47f9fb181f78d648ad457c6a"
integrity sha512-A5CUptxDsvxKJEU3yO6DuWBSJz/qizqzJKOMIfUJHETbBw/sFaDxgd6fxm1ewUaM0jZ444Fc5vC5ROYurg/4Pw==
xml2js@0.4.17:
version "0.4.17"
resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.17.tgz#17be93eaae3f3b779359c795b419705a8817e868"
integrity sha1-F76T6q4/O3eTWceVtBlwWogX6Gg=
dependencies:
sax ">=0.6.0"
xmlbuilder "^4.1.0"
xml2js@0.4.19:
version "0.4.19"
resolved "https://registry.yarnpkg.com/xml2js/-/xml2js-0.4.19.tgz#686c20f213209e94abf0d1bcf1efaa291c7827a7"
@ -21557,6 +21578,13 @@ xmlbuilder@9.0.7, xmlbuilder@~9.0.1:
resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-9.0.7.tgz#132ee63d2ec5565c557e20f4c22df9aca686b10d"
integrity sha1-Ey7mPS7FVlxVfiD0wi35rKaGsQ0=
xmlbuilder@^4.1.0:
version "4.2.1"
resolved "https://registry.yarnpkg.com/xmlbuilder/-/xmlbuilder-4.2.1.tgz#aa58a3041a066f90eaa16c2f5389ff19f3f461a5"
integrity sha1-qlijBBoGb5DqoWwvU4n/GfP0YaU=
dependencies:
lodash "^4.0.0"
xmlhttprequest-ssl@~1.5.4:
version "1.5.5"
resolved "https://registry.yarnpkg.com/xmlhttprequest-ssl/-/xmlhttprequest-ssl-1.5.5.tgz#c2876b06168aadc40e57d97e81191ac8f4398b3e"