From 4b0c9ca67d578a780d63c323fd5aef498d4131d0 Mon Sep 17 00:00:00 2001 From: Douglas Fabris Date: Fri, 16 Oct 2020 11:25:59 -0300 Subject: [PATCH] feat: StatusBullet (#301) Co-authored-by: Guilherme Gazzo Co-authored-by: Guilherme Gazzo --- ...rome_iphone7_Misc_StatusBullet_Default.png | Bin 0 -> 3143 bytes ...chrome_iphone7_Misc_StatusBullet_Small.png | Bin 0 -> 2532 bytes ...hrome_laptop_Misc_StatusBullet_Default.png | Bin 0 -> 1634 bytes .../chrome_laptop_Misc_StatusBullet_Small.png | Bin 0 -> 1374 bytes packages/fuselage/.storybook/main.js | 1 + packages/fuselage/package.json | 1 + .../StatusBullet/StatusBullet.stories.mdx | 33 ++++++++++++++ .../components/StatusBullet/icons/away.svg | 4 ++ .../components/StatusBullet/icons/busy.svg | 4 ++ .../components/StatusBullet/icons/loading.svg | 3 ++ .../components/StatusBullet/icons/offline.svg | 3 ++ .../src/components/StatusBullet/index.js | 9 ++++ .../src/components/StatusBullet/spec.js | 10 ++++ .../src/components/StatusBullet/styles.scss | 43 ++++++++++++++++++ packages/fuselage/src/components/index.js | 1 + packages/fuselage/src/components/index.scss | 1 + packages/fuselage/src/styles/colors.scss | 1 + packages/fuselage/src/styles/mixins/all.scss | 1 + packages/fuselage/src/styles/mixins/size.scss | 4 ++ packages/fuselage/webpack.config.js | 1 + yarn.lock | 35 +++++++++++++- 21 files changed, 153 insertions(+), 2 deletions(-) create mode 100644 packages/fuselage/.loki/reference/chrome_iphone7_Misc_StatusBullet_Default.png create mode 100644 packages/fuselage/.loki/reference/chrome_iphone7_Misc_StatusBullet_Small.png create mode 100644 packages/fuselage/.loki/reference/chrome_laptop_Misc_StatusBullet_Default.png create mode 100644 packages/fuselage/.loki/reference/chrome_laptop_Misc_StatusBullet_Small.png create mode 100644 packages/fuselage/src/components/StatusBullet/StatusBullet.stories.mdx create mode 100644 packages/fuselage/src/components/StatusBullet/icons/away.svg create mode 100644 packages/fuselage/src/components/StatusBullet/icons/busy.svg create mode 100644 packages/fuselage/src/components/StatusBullet/icons/loading.svg create mode 100644 packages/fuselage/src/components/StatusBullet/icons/offline.svg create mode 100644 packages/fuselage/src/components/StatusBullet/index.js create mode 100644 packages/fuselage/src/components/StatusBullet/spec.js create mode 100644 packages/fuselage/src/components/StatusBullet/styles.scss create mode 100644 packages/fuselage/src/styles/mixins/size.scss diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_StatusBullet_Default.png b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_StatusBullet_Default.png new file mode 100644 index 0000000000000000000000000000000000000000..28515a810695bec248e9783fca0f4f6654810b49 GIT binary patch literal 3143 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 literal 0 HcmV?d00001 diff --git a/packages/fuselage/.loki/reference/chrome_iphone7_Misc_StatusBullet_Small.png b/packages/fuselage/.loki/reference/chrome_iphone7_Misc_StatusBullet_Small.png new file mode 100644 index 0000000000000000000000000000000000000000..1d07ffed07f9dbedde02522bf9c899f22e437f06 GIT binary patch literal 2532 zcmai0c{tSD8~>7JMkZUr&AvntgF9%mMB&O-jGAe(Bs&qZ&e-=oGFP@nlYSXSm_ZW8 z(k;7ZV$2vJ>e?n-$dc~Y{qz3wd;d7+eV^x?_nh;-@8@&gG&>t}n80rW006)&EzGV1 z05=)bl_7lKXkpcy2TokU*Uc{jI#7%u z!?$X?j%svIpz5>OL%jZx!6BEcGsXLdoBvMsTfv>^Ry=C3v%n z42Nx0i3&+NUH(3zT`rm4Sg!b2)>z)DSIP<1S4fW=h0+-(3f*fsmTvn$%aBon2cdH> z?q?5`-L-Rc1}sa;OV$>g^u7{mhm&i_L6B`Aw6ei$|vByaD5AlvpC= zs^r-u_@6qPqs8Hg##8e9{xWtbR)SGwqiE3R7kHsx9L;0YaY)HBe1ANPMi3D^mIVOo z4;u3D#aRWLOD=kNS!P2I&%3>2{b~Wa`f^-G8w{ zU1_IUTS#Yo&K`#4iJ0i^oHqe8T?^SW0EB|_p*}0but2@y^ z>>N>f-|Lql5ZkrTxzHf-b(ERVpBaLgvIgHzDfITejTc36O$(9H25aMO(>TiT6G~q; z5%chD$DnHHN2OI_um4vjXRJa5iR-Ng!ceKxrAJ`G@8CK!{ zTT}0DuLw?$<*q~U2%~P@>S4P#o;H-d@JExv=@0S!nZG9^51(5qSXEW^keMczQ-($o z@=tF2^zk{gCl;MRkK-z>Q(StDAV4nvG1G4`Mtlh zxhS1v{wU;GDP>_nmE~zqxmxOtMMf~U zauKz3x-DGK5DEki^-s5BcE=zR0ZgKQhPa%ZP}9V-r3f%j6;v~?nDcFJJ*@KV*}rWE zYj0lqG9o3(`lGWEx`}`j??Wakvu!WG4hf}UW6=D`*MdDYiSOX_-D-ysfxn#^h^Adi ztEX`_HGzGnCO3V;oVwg~dVXKB`uDET3=X5pJZA{{h1A9C=6dZ|d)Ao7)SQ$gT2`z1 z{_cR5{Ku3j9V-%MOL6Y5ToU^RnceMjz&7F6Lw~>I)m6tdn~pgG#L@`-KWqkU=G@zX zl&-Ya+t?HxVEP+3c!ZfYYJ@Rvnxm6C?D;7YD?mo|9krp_d^s!npEhqfcq#r;&c53Pc1=Uo=7j zn0miLI77E!|5gG+oWd(a;AP6P`FPj_Emx?wHT+|t@ws1D-eY&h%^@LENeZ1Nz~T?( zf()kE345>jYG7d+^QSgpQ+(??o%Xs z(Dt4mk`-K)62D6_ywA{ADNd%c27>pNYjaa#ULc?gd#)Da5Yt^gkli$+qJzYr!-*(Y z?PAjdl_@4xwX(=5g)aUe5{bKWOv6L>QU0Uc%}(|;Z|6*!V_g-lY?_aYg}@u%}h^ z(Uxd0a3i>r&k@$<6T=QYDrd7aVH`8|=5t?oFm@hC!g(Gg4kklv%{*UvB?V1p4@Yt) zS7k4@5F?>~9g`=A_`ZKTQU@(*4>>niW=-kz5TpLYyeQE$_*xo(AgyIZ5)B(37y9mM zSD#*@4h3ur4q{p}*=!AW52CNugG(pli?6DIV6Dem9Pi0dXRzRK@QZT>1MhR^%S2K2Kuma=%$N+oK2dmysR)MD2_Ij1$dIJ)hBbqrzcDjl1lQTF#)? z3ttdD!g{}VdYw*GFquNyEfyT*ijv#+FSSDj@GOlY708kNU@^jpi+kH|%pbuo{p0~j zMp7CF$T!>i2H5Cbzdp8r3+h#}lssA9-8B+)@v(C29sQ=e@fB*qiQ<>`;y`fCzn0K$ zJ}e9oY_Vkf0@vXsMS9}@+p7HEUgp0GW`3Q^iZJnc?%@e`YJlYx8#D4{m-v4G;@G{9 literal 0 HcmV?d00001 diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Misc_StatusBullet_Default.png b/packages/fuselage/.loki/reference/chrome_laptop_Misc_StatusBullet_Default.png new file mode 100644 index 0000000000000000000000000000000000000000..8188dff8bd45c0069d067d237bb1c14cf0dcd379 GIT binary patch literal 1634 zcmXw33sllq9L82!mU_yq(lTqAR?aX)tt8FT^p8UeVNQII4^n)w@{x*Ct>tElP70mc z!_<7Vz?Ol5hLxu*6dx1wl_+KYQxptC1wu!Y?z!jQ@BZ#N_xGLeJNL^z;p=5&Xl@9B zK#Txy4>Sa_%1Mhitk&1AVbF`s+D$JJ?R6Bw?ASV?J*-ST3Sd@iN5<;NKOhkOb%2LE zCiVLCaLA8AphfG)k^Pj53rAM0ht`HYthCO;puD$7;tYD69J31zg-Ag{%Kl{MleP@{ z>*&3eT~|?(*-|vjBQ7v;|GBw0#l1gN0h>n%B7x;k)*q zOZBC1C)5Rh9>_lr%348r-7F$MY=~{ArS)a(-pQ;>U$KlKGmqZjd7F`f*l0rNt<#0O z0Cf|~+mlWVvw}!i*h1 zlpTD$4oZ#Aa16BptFj3^GD|$> zKzdv;HKSf7Y4rQlrdHYdirDegJbZ6tD)$u6LCD-WY(TizS9Hy{S|RPa|3llqPhLg9 zG!%{anJ4hC&!rK6BLQle!{}0$Ru)Z5|A?X+C$1XjO8NR4-p58-C9C+>OWXo=HW1rK z0MO}g)1umYK9^)Xb)Z$Y*HNmc@N1nN`#4|vzsR=&mbR*ktXmx9>T@*>;Gc7Fr1*8GtwaSmZ zkFwCS%J(2XCT3%V-F2*VF_@xMZbYE~zHxJ1FuckGHUW1u@Y@y;>vJTu&Wk1#_Ls>r zBnKTGU&q1_3=deXc8c3%d+4~6u|7|TF-WC8xR{qhfE6+`?C*NOIPVcU@8ixheQK4o zmLl}*gK`kr5!9W?=eY!*btQ{COAI@`Y3XF+gGK@Y*BG%A&=#WiA}adBgO@^i0S~1& zooSWXHPg>*C%1_w8EMHLKjQ!>#8CJ2A{EhOWm zY~;4h9Gw2iMW;#}iRoU?7@H{@u=X2GdfIvKay`;-YtJQNa#XwN0lRr08zfWanvAx% zU1mj0iaT1Ii?w$?Gi?f>y>{1xxSX4m$`1=VhJV2I!8Pg1=bMB>nfJ#yI{W&0dlwgS z8qT|Nxiu~(KW#HZOvQF}P8zq(2w!!G{P*pjJMkivx_gTYl;BoWt;D94@SqU^)Tuj- ze8KT;fg_nscxgnYT$#a-gk2G3PmD)3VB%F+EcVWoD~8WEzT?WD)`aKyOs-qSnyP6AY6 z_)DUM5B}7)Qp@}C3;|EsMf;R|b3EWZS=GLY96iW}HB(vxX}n@}YI75*>Frqj(CZHi zzgg#84;PskPI{j!%0-crn9i_Lb4l`BB}wu^`0#kEjnK^SZUfl$Q>QMeCcZ=&d_k{tvqlg?=_ATIWto$e1hU`gFW7DM@Yx#P2$USnDp zm`B8qp{B1YtDZSrd6S3a%W4PK8{Vzra! xk42d3F#n?D@0&UdLF_Xx{aQDs>Ou!X0NvzmhhIK+Ip1U!8`m`6|j`X7?T4t@Xt literal 0 HcmV?d00001 diff --git a/packages/fuselage/.loki/reference/chrome_laptop_Misc_StatusBullet_Small.png b/packages/fuselage/.loki/reference/chrome_laptop_Misc_StatusBullet_Small.png new file mode 100644 index 0000000000000000000000000000000000000000..016973e465e1eeb2660fd3d0cba35f21f727b375 GIT binary patch literal 1374 zcmXw33pmqj82{@iLraOswGJtTmD{M89GB)6GhH^f&Rh-UE#K&q(on^@!;v86!h@o6mC+!$$020O-O0hA1k#u> zcY3PBS$tnWn7d74WFnZkgX+}#JP_2UH#1~&Pn`$+`QvwBGf`?q=;J8nNQ|$e*RKpi zu{Ok_8eK^Z(%XM4ZqUaPv{|=iBkEd%5a%?Rwjn(^D0TQ@<6e5y0of8fV5Us5(AvGk z63>vu>1Eppqxx{7`S(rPRwI84-L`5eEDcLm{KVaaeE(Ii?#|{jd!6j~v`X*!SbKFh z^zCu)M&pE<_+1CK+XQSXU9!x{3kMJ~m&?@djph?CaXk@%^I?#7dFFzq%Q@5Pbf$Vd zr6VawXP-U(+N&e{p9J-BW?`jh5U0)xYG>CWeUUcMx`0N~!a4*}-VWRD1?c?Zsmzw{Hf3S0G2UVcsPRADzl-( zk83mi8GCw-pf6DCiC(`^^FWA+NCx=lPxy*U_y6bm3uouWhNVM5s-lnkCXFEw_REFj z@D*r;r-q1E&<-=oNbeWW3|Sq?#2Oyho)nM$dr{?umJ5;+GL*b2Nqwfk^!SAq2Z-@s z8!J=(X|K4~b6(P-2#-&^!*iCtd5@RA;z|bThL?8j4h#eDWRhD`teX-(y6@wfjj~UEnSF||7B*;I8tI#bX5s8QWdU}{^ zGr8wj(nae|`DS7fEc+@y5kkkMtBm=EeinTzTm+R|jw%!J)3p~KKg zEy!*g)E%f)R7{VeH+#|@E2`Wa(?~_*;JdE4A~sl_-I~TahKiVtDY*kp5?7AXq#u7& zx{#7%+C{is`PFnlx@?ZpvQc_9S~~7Y^$NQs=Hx0sX%?d zQGY1mYO;%4@aSSaF5**0_JP-NjMEb%Bso;ykQ_NxHuxpiW<|sFF4eOK*~4SQolaLD zcpdNatFrd{{!n9f1IX*DaZ~{5j9Am(9)21hP{*Y0nJ_{)`&tmPHl1i9n$U6;y@$YTxAS za&X+SLZccn@TT^M#9tL{&ns8z{oXYUCU`ZxeL+uLbOU9u>AHn-Mgnlp0FPSt$gFQ> C@Sk7+ literal 0 HcmV?d00001 diff --git a/packages/fuselage/.storybook/main.js b/packages/fuselage/.storybook/main.js index 0bf8a7dfed..7b995f6cab 100644 --- a/packages/fuselage/.storybook/main.js +++ b/packages/fuselage/.storybook/main.js @@ -33,6 +33,7 @@ module.exports = { options: { ident: 'postcss', plugins: () => [ + require('postcss-svg')(), require('postcss-custom-properties')(), require('postcss-logical')({ preserve: true }), require('postcss-dir-pseudo-class')({ dir: 'ltr' }), diff --git a/packages/fuselage/package.json b/packages/fuselage/package.json index f7d14da7d5..d428e16e5c 100644 --- a/packages/fuselage/package.json +++ b/packages/fuselage/package.json @@ -90,6 +90,7 @@ "postcss-dir-pseudo-class": "^5.0.0", "postcss-loader": "^3.0.0", "postcss-logical": "^4.0.2", + "postcss-svg": "^3.0.0", "prop-types": "^15.7.2", "react": "^16.13.1", "react-dom": "^16.13.1", diff --git a/packages/fuselage/src/components/StatusBullet/StatusBullet.stories.mdx b/packages/fuselage/src/components/StatusBullet/StatusBullet.stories.mdx new file mode 100644 index 0000000000..0b258d112c --- /dev/null +++ b/packages/fuselage/src/components/StatusBullet/StatusBullet.stories.mdx @@ -0,0 +1,33 @@ +import { Meta, Canvas, Story } from '@storybook/addon-docs/blocks'; + +import { StatusBullet, Box } from '../..'; + + + +# StatusBullet + +The `StatusBullet` is used to inform the user status. + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/fuselage/src/components/StatusBullet/icons/away.svg b/packages/fuselage/src/components/StatusBullet/icons/away.svg new file mode 100644 index 0000000000..2fd72b2831 --- /dev/null +++ b/packages/fuselage/src/components/StatusBullet/icons/away.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/fuselage/src/components/StatusBullet/icons/busy.svg b/packages/fuselage/src/components/StatusBullet/icons/busy.svg new file mode 100644 index 0000000000..9c19b548be --- /dev/null +++ b/packages/fuselage/src/components/StatusBullet/icons/busy.svg @@ -0,0 +1,4 @@ + + + + diff --git a/packages/fuselage/src/components/StatusBullet/icons/loading.svg b/packages/fuselage/src/components/StatusBullet/icons/loading.svg new file mode 100644 index 0000000000..48cfa514f7 --- /dev/null +++ b/packages/fuselage/src/components/StatusBullet/icons/loading.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/fuselage/src/components/StatusBullet/icons/offline.svg b/packages/fuselage/src/components/StatusBullet/icons/offline.svg new file mode 100644 index 0000000000..922865e019 --- /dev/null +++ b/packages/fuselage/src/components/StatusBullet/icons/offline.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/fuselage/src/components/StatusBullet/index.js b/packages/fuselage/src/components/StatusBullet/index.js new file mode 100644 index 0000000000..4be960b529 --- /dev/null +++ b/packages/fuselage/src/components/StatusBullet/index.js @@ -0,0 +1,9 @@ +import PropTypes from 'prop-types'; +import React from 'react'; + +export const StatusBullet = ({ status = 'loading', size, className = '', ...props }) => ; + +StatusBullet.propTypes = { + status: PropTypes.oneOf(['online', 'busy', 'away', 'offline']), + size: PropTypes.string, +}; diff --git a/packages/fuselage/src/components/StatusBullet/spec.js b/packages/fuselage/src/components/StatusBullet/spec.js new file mode 100644 index 0000000000..fe2bc5c450 --- /dev/null +++ b/packages/fuselage/src/components/StatusBullet/spec.js @@ -0,0 +1,10 @@ +import React from 'react'; +import ReactDOM from 'react-dom'; + +import { StatusBullet } from '.'; + +it('renders without crashing', () => { + const div = document.createElement('div'); + ReactDOM.render(, div); + ReactDOM.unmountComponentAtNode(div); +}); diff --git a/packages/fuselage/src/components/StatusBullet/styles.scss b/packages/fuselage/src/components/StatusBullet/styles.scss new file mode 100644 index 0000000000..b85e4bc09d --- /dev/null +++ b/packages/fuselage/src/components/StatusBullet/styles.scss @@ -0,0 +1,43 @@ +@use '../../styles/colors.scss'; +@use '../../styles/lengths.scss'; +@use '../../styles/functions.scss'; + +$status-bullet-online-background-color: theme('status-bullet-online-background-color', colors.foreground('success')); +$status-bullet-away-background: theme('status-bullet-away-background', url('./components/StatusBullet/icons/away.svg') top left / contain no-repeat); +$status-bullet-busy-background: theme('status-bullet-busy-background', url('./components/StatusBullet/icons/busy.svg') top left / contain no-repeat); +$status-bullet-offline-background: theme('status-bullet-offline-background', url('./components/StatusBullet/icons/offline.svg') top left / contain no-repeat); +$status-bullet-loading-background: theme('status-bullet-loading-background', url('./components/StatusBullet/icons/loading.svg') top left / contain no-repeat); + +.rcx-status-bullet { + display: inline-block; + + flex-grow: 0; + flex-shrink: 0; + + border-radius: lengths.border-radius(full); + + background: $status-bullet-loading-background; + background-size: contain; + + @include square(lengths.size(12)); + + &--small { + @include square(functions.to-rem(10)); + } + + &--online { + background: $status-bullet-online-background-color; + } + + &--away { + background: $status-bullet-away-background; + } + + &--busy { + background: $status-bullet-busy-background; + } + + &--offline { + background: $status-bullet-offline-background; + } +} diff --git a/packages/fuselage/src/components/index.js b/packages/fuselage/src/components/index.js index 3fb6b10cf1..551b7aced9 100644 --- a/packages/fuselage/src/components/index.js +++ b/packages/fuselage/src/components/index.js @@ -25,6 +25,7 @@ export * from './NumberInput'; export * from './Options'; export * from './Pagination'; export * from './PasswordInput'; +export * from './StatusBullet'; export * from './ProgressBar'; export * from './RadioButton'; export * from './SearchInput'; diff --git a/packages/fuselage/src/components/index.scss b/packages/fuselage/src/components/index.scss index e7006a49ab..4c406b86c7 100644 --- a/packages/fuselage/src/components/index.scss +++ b/packages/fuselage/src/components/index.scss @@ -18,6 +18,7 @@ @import './Modal/styles.scss'; @import './Options/styles.scss'; @import './Pagination/styles.scss'; +@import './StatusBullet/styles.scss'; @import './ProgressBar/styles.scss'; @import './RadioButton/styles.scss'; @import './Select/styles.scss'; diff --git a/packages/fuselage/src/styles/colors.scss b/packages/fuselage/src/styles/colors.scss index fee4bf313e..6f19e0cee6 100644 --- a/packages/fuselage/src/styles/colors.scss +++ b/packages/fuselage/src/styles/colors.scss @@ -92,6 +92,7 @@ $-foreground-colors: ( success: map.get(token-colors.$colors, g500), danger: map.get(token-colors.$colors, r500), warning: map.get(token-colors.$colors, y700), + warning-alternative: map.get(token-colors.$colors, y500), link: map.get(token-colors.$colors, b500), visited-link: map.get(token-colors.$colors, p500), active-link: map.get(token-colors.$colors, r500), diff --git a/packages/fuselage/src/styles/mixins/all.scss b/packages/fuselage/src/styles/mixins/all.scss index ed8a33d447..fa214afbdf 100644 --- a/packages/fuselage/src/styles/mixins/all.scss +++ b/packages/fuselage/src/styles/mixins/all.scss @@ -2,3 +2,4 @@ @import './interactivity.scss'; @import './shadows.scss'; @import './states.scss'; +@import './size.scss'; diff --git a/packages/fuselage/src/styles/mixins/size.scss b/packages/fuselage/src/styles/mixins/size.scss new file mode 100644 index 0000000000..3351c59aeb --- /dev/null +++ b/packages/fuselage/src/styles/mixins/size.scss @@ -0,0 +1,4 @@ +@mixin square($width, $height: $width) { + width: $width; + height: $height; +} diff --git a/packages/fuselage/webpack.config.js b/packages/fuselage/webpack.config.js index 5b1f83025d..6d5a6a4484 100644 --- a/packages/fuselage/webpack.config.js +++ b/packages/fuselage/webpack.config.js @@ -43,6 +43,7 @@ module.exports = (env, { mode = 'production' }) => ({ options: { ident: 'postcss', plugins: () => [ + require('postcss-svg')(), require('postcss-custom-properties')(), require('postcss-logical')({ preserve: true }), require('postcss-dir-pseudo-class')({ dir: 'ltr' }), diff --git a/yarn.lock b/yarn.lock index fe2613284c..3870e858a4 100644 --- a/yarn.lock +++ b/yarn.lock @@ -8853,6 +8853,11 @@ flatted@^2.0.0: resolved "https://registry.yarnpkg.com/flatted/-/flatted-2.0.1.tgz#69e57caa8f0eacbc281d2e2cb458d46fdb449e08" integrity sha512-a1hQMktqW9Nmqr5aktAux3JMNqaucxGcjtjWnZLHX7yyPCmlSV3M54nGYbqT8K+0GhF3NBgmJCc3ma+WOgX8Jg== +flatten@^1.0.2: + version "1.0.3" + resolved "https://registry.yarnpkg.com/flatten/-/flatten-1.0.3.tgz#c1283ac9f27b368abc1e36d1ff7b04501a30356b" + integrity sha512-dVsPA/UwQ8+2uoFe5GHtiBMu48dWLTdsuEd7CKGlZlD78r1TTWBvDuFaFGKCo/ZfEr95Uk56vZoX86OsHkUeIg== + flush-write-stream@^1.0.0, flush-write-stream@^1.0.2: version "1.1.1" resolved "https://registry.yarnpkg.com/flush-write-stream/-/flush-write-stream-1.1.1.tgz#8dd7d873a1babc207d94ead0c2e0e44276ebf2e8" @@ -14750,6 +14755,16 @@ postcss-sorting@^5.0.1: lodash "^4.17.14" postcss "^7.0.17" +postcss-svg@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/postcss-svg/-/postcss-svg-3.0.0.tgz#3385a586ecd452bf9cd34b6f864aef6e58ec7aa1" + integrity sha512-kvwD3PJ66gXHgL/6t30W8/zT0qvuZ+TGwq76JlQFHyZb6Oal4tAvp6IARRwYwoy/FxQ8XAyLoYf34kk80yg8WQ== + dependencies: + postcss "^7.0.6" + postcss-values-parser "^2.0.0" + svgo "^1.1.1" + xmldoc "^1.1.2" + postcss-svgo@^4.0.2: version "4.0.2" resolved "https://registry.yarnpkg.com/postcss-svgo/-/postcss-svgo-4.0.2.tgz#17b997bc711b333bab143aaed3b8d3d6e3d38258" @@ -14784,6 +14799,15 @@ postcss-value-parser@^4.0.0, postcss-value-parser@^4.1.0: resolved "https://registry.yarnpkg.com/postcss-value-parser/-/postcss-value-parser-4.1.0.tgz#443f6a20ced6481a2bda4fa8532a6e55d789a2cb" integrity sha512-97DXOFbQJhk71ne5/Mt6cOu6yxsSfM0QGQyl0L25Gca4yGWEGJaig7l7gbCX623VqTBNGLRLaVUCnNkcedlRSQ== +postcss-values-parser@^2.0.0: + version "2.0.1" + resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-2.0.1.tgz#da8b472d901da1e205b47bdc98637b9e9e550e5f" + integrity sha512-2tLuBsA6P4rYTNKCXYG/71C7j1pU6pK503suYOmn4xYrQIzW+opD+7FAFNuGSdZC/3Qfy334QbeMu7MEb8gOxg== + dependencies: + flatten "^1.0.2" + indexes-of "^1.0.1" + uniq "^1.0.1" + postcss-values-parser@^3.0.5: version "3.0.5" resolved "https://registry.yarnpkg.com/postcss-values-parser/-/postcss-values-parser-3.0.5.tgz#9f83849fb89eaac74c2d5bf75e8e9715508a8c8d" @@ -16544,7 +16568,7 @@ sax@1.2.1: resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.1.tgz#7b8e656190b228e81a66aea748480d828cd2d37a" integrity sha1-e45lYZCyKOgaZq6nSEgNgozS03o= -sax@>=0.6.0, sax@^1.2.4, sax@~1.2.4: +sax@>=0.6.0, sax@^1.2.1, sax@^1.2.4, sax@~1.2.4: version "1.2.4" resolved "https://registry.yarnpkg.com/sax/-/sax-1.2.4.tgz#2816234e2378bddc4e5354fab5caa895df7100d9" integrity sha512-NqVDv9TpANUjFm0N8uM5GxL36UgKi9/atZw+x7YFnQ8ckwFGKrl4xX4yWtrey3UJm5nP1kUbnYgLopqWNSRhWw== @@ -17697,7 +17721,7 @@ svgicons2svgfont@^9.0.4: svg-pathdata "^5.0.0" transformation-matrix-js "^2.7.1" -svgo@^1.0.0, svgo@^1.2.2: +svgo@^1.0.0, svgo@^1.1.1, svgo@^1.2.2: version "1.3.2" resolved "https://registry.yarnpkg.com/svgo/-/svgo-1.3.2.tgz#b6dc511c063346c9e415b81e43401145b96d4167" integrity sha512-yhy/sQYxR5BkC98CY7o31VGsg014AKLEPxdfhora76l36hD9Rdy5NZA/Ocn6yayNPgSamYdtX2rFJdcv07AYVw== @@ -19544,6 +19568,13 @@ xmlchars@^2.1.1, xmlchars@^2.2.0: resolved "https://registry.yarnpkg.com/xmlchars/-/xmlchars-2.2.0.tgz#060fe1bcb7f9c76fe2a17db86a9bc3ab894210cb" integrity sha512-JZnDKK8B0RCDw84FNdDAIpZK+JuJw+s7Lz8nksI7SIuU3UXJJslUthsi+uWBUYOwPFwW7W7PRLRfUKpxjtjFCw== +xmldoc@^1.1.2: + version "1.1.2" + resolved "https://registry.yarnpkg.com/xmldoc/-/xmldoc-1.1.2.tgz#6666e029fe25470d599cd30e23ff0d1ed50466d7" + integrity sha512-ruPC/fyPNck2BD1dpz0AZZyrEwMOrWTO5lDdIXS91rs3wtm4j+T8Rp2o+zoOYkkAxJTZRPOSnOGei1egoRmKMQ== + dependencies: + sax "^1.2.1" + xmldom@~0.1.22: version "0.1.27" resolved "https://registry.yarnpkg.com/xmldom/-/xmldom-0.1.27.tgz#d501f97b3bdb403af8ef9ecc20573187aadac0e9"