From 748a6bb8a0299913781ba1ddb86c47caee0e10a6 Mon Sep 17 00:00:00 2001 From: Florian Duros Date: Mon, 9 Dec 2024 18:01:09 +0100 Subject: [PATCH] Add BigIcon component --- .../Icon-BigIcon-Default-1-chromium-linux.png | Bin 0 -> 4505 bytes ...n-BigIcon-Destructive-1-chromium-linux.png | Bin 0 -> 4396 bytes .../Icon-BigIcon-Medium-1-chromium-linux.png | Bin 0 -> 4493 bytes .../Icon-BigIcon-Small-1-chromium-linux.png | Bin 0 -> 4194 bytes .../Icon-BigIcon-Success-1-chromium-linux.png | Bin 0 -> 4475 bytes .../Icon/BigIcon/BigIcon.module.css | 51 +++++++++ .../Icon/BigIcon/BigIcon.stories.tsx | 55 +++++++++ src/components/Icon/BigIcon/BigIcon.test.tsx | 51 +++++++++ src/components/Icon/BigIcon/BigIcon.tsx | 61 ++++++++++ .../__snapshots__/BigIcon.test.tsx.snap | 106 ++++++++++++++++++ src/components/Icon/BigIcon/index.ts | 17 +++ src/index.ts | 1 + 12 files changed, 342 insertions(+) create mode 100644 playwright/visual.test.ts-snapshots/Icon-BigIcon-Default-1-chromium-linux.png create mode 100644 playwright/visual.test.ts-snapshots/Icon-BigIcon-Destructive-1-chromium-linux.png create mode 100644 playwright/visual.test.ts-snapshots/Icon-BigIcon-Medium-1-chromium-linux.png create mode 100644 playwright/visual.test.ts-snapshots/Icon-BigIcon-Small-1-chromium-linux.png create mode 100644 playwright/visual.test.ts-snapshots/Icon-BigIcon-Success-1-chromium-linux.png create mode 100644 src/components/Icon/BigIcon/BigIcon.module.css create mode 100644 src/components/Icon/BigIcon/BigIcon.stories.tsx create mode 100644 src/components/Icon/BigIcon/BigIcon.test.tsx create mode 100644 src/components/Icon/BigIcon/BigIcon.tsx create mode 100644 src/components/Icon/BigIcon/__snapshots__/BigIcon.test.tsx.snap create mode 100644 src/components/Icon/BigIcon/index.ts diff --git a/playwright/visual.test.ts-snapshots/Icon-BigIcon-Default-1-chromium-linux.png b/playwright/visual.test.ts-snapshots/Icon-BigIcon-Default-1-chromium-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..b0ae2e02594f28660a19f1b43cbfcce98494e476 GIT binary patch literal 4505 zcmeHKYfzKf89sm`F1N4NorT4qb~-E5uG~cABA2>l%`!U#7j`xxNeCju-Gxn%OA^AZ zP)Jz}sdZ2glW#0dkwFM9APO-+VvLlV2pR(BCWLTD2n1r1FO8i}f3N$iKR7dI&dfXK zoSFA|-sgGGsXU88yE=I~0RUWMzKD(o!2a30xzFAfIT`e9(6-oR$D=<3ts|%f0QM)u zM4$eec56j}zx$6ZeBXLqs9(=>C!f254#A}h$uu=^F&T-3 zsqVCI8yZ20Se9R!8qQs2WNOhr#LhT+vMSISiVIB+;N;`{$Pz4cB^aCOvbSvDVs}1K zFqQ!NQobAR&mx8^kCEb)7t*YYv~ceig!Kj zDlq|qK)r0LEHx0Wsom!WCigLA_=EK;@mN4(h6rrAPyXr`0`LyAt`ObKN|CX~BwXjK z3RjKpgo1BJxe@3?^x1pU)uFoOz>&zAO^KvD6mkGVQc4)7b-|UtEbm$^Q_x2XgH@NO zX~&I7lvnoVSnt*V8>X1EmXyZRVT)4s9moy{B<9kYIsPldC{?L{@)c8@fCmY1)uFQROW%6)B$JEuaRzo|iqu|9!Pu=FQpYp>>?a>GJn(LC1IDoO3itdA&o zTSp=zi!IhIj&yHX|NYczM69xMv|3&+>h%#@KDE8{JyPVwizv%bE`y*r<>3;!zV4;t zX1`1#_;WCP+m#$BvcR9gknKm~wwil$l-nz_|2_GNxAFA1?2+$g%y8)U-yGzxDong2 zp`lBrqFH;*(>Y;YZcG`@a!<=EJ3l$uLsqe1tH_J0n1x_+}=K)=w|% zC#I!Yb74!pq9^%~%U-C^bX7;7rATYA8H#SLyYIuDF+AI%#>Y06;n`6E9xlS1!4?yt z*z)6`FGp+!ebXn{>PgdLb35yRiYg-d(-s#<>74=kVGgwNVB^PrB1O)-fy-O?Br1n& zMGl`L3l^Nm7d8zx7XKCF%{6GC>+KGJ*%yv!azT?(X~*k?M$M3Do;ms^ib1gSu9SuA z?SXl|R_Y{WsIn(AX6i_=r6~b}4A>}IorGyfxjQM2KtUe1v-nEG7M>juFijv3lv!FW z`mjY=Q)98dk@&3@yt(a##b;@Zy2v-`F6(N==%{aw6`bwkqv%S zu!qZim^u=KEza=wSXT6GSNE(jkn%Oo+uIQCf#sEk^1!6UBC~#so(RPn; zt50mBPFDu``5wDfuu<8dp%`Q&q3M;%I^#}_KxUVnN31(+M7=Q>8RqE|-o3OgcOHq< zZ^oJ5R(r$w>3QUp(V~kcKE9LN$*OBf!r9vc{r!OCOe8g_i)$0d%=*r7a;8wwvDpJ7 z6DAeaysT-J!aGwdRBqm)V=?k~XHxSKs=~zLNqAL$Q$nF#`dtd>GY@Y`r&qhT5kKpA zi&e$$vKYvOY;%^hm7#Nt`Ok)+ko2gyVv`rOI9vBe{v*Sb=u*xEqdF{aI>4rYxw=O9 zBn&sYze`^4R_$uDOCmD2E=jie5{3dmXulnp-Qx)UdH@Cf@E(DeD3mxQ@F^~1QDaBc z+l=ejm5*-5%%%L#xl#_mkS_==-c}-rg41hk$$V@MUADIna_QEUCWE@{=EZO zb6J9_`-%RC;tc#l9&tyn4a{aP9}PgcooN^oUFr~Y%%A@XOr9fu8Ulb@MX|;1eLBQ1 zXezr$-nR|!BDRazd%fFs3ud=qb_?d`|8sWrva6R}z5L(n#o}lG=gsKCz@bcF8!?|_ KqFX;Bmi`-+9!Em} literal 0 HcmV?d00001 diff --git a/playwright/visual.test.ts-snapshots/Icon-BigIcon-Destructive-1-chromium-linux.png b/playwright/visual.test.ts-snapshots/Icon-BigIcon-Destructive-1-chromium-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..16faa07712aad1b38e1477e4a73814440d03bd17 GIT binary patch literal 4396 zcmeHLZB)`%7{BF;=6qRgOH+fk)@qeT8%2PL1|b>sEZahR?lDBCZ7kNvWb7*71X-zn;lo8OShl?`lM`q_JQE5 zzSiSEpM<@GVlP(4x&k*Rs6U-sXg;xM_Zxxl5WewJY>1bzkvnxbT7Uln)M&3Ph_9!p z>JLxlM>{&jUAZxm;TDxj?EFlsI|{(k(x!X>)V)b003z?s0E4d~z;|zjfc1(09vEhJ z*N0YQirYPe@z~_J2emUY_CVb9{te9B6 zY#E#cWz7T@k*dX^V>@VXyZ z6p8`IFR1~@KKb&1DV)(Vgg`|(PLyBbXyZe9*<&38e3RCIt$Dct;q%#3zE z0QDbVNW3;eYuA($Y;8!czOYznugcgvQ~)(-HU*^H;&}B`o%ImaC~a&AFL)iOYxV_% z!1h`QGr_gOR#6#+>qHa@CrhRb_-Mz?Wa|pU?PrUd!j8eBH7u8IUI;*w!@bMmVq86V zo~x))6ONzmAQ$LYtX;`4)|g#GD!*w93JFi{FV2t|p9ZAU1sr;-h4Fb`c35Y6R#;^ zzU>L5Mvr=s)Ib#x||Gqek~`z>TlP&o~^?TcrEYV4)0Sn6GS7NUH5gg53GK*`M$sGW3Od?M2M zTz*-*lWdmX9Z(ghj0HBQ+-S>VcR?iny;A`RWlUQ;k)t`2)R*Tv5iC*Wnw#L~M6P97 z#0>&*G*83LArb*d%b0&{TVkKtPP5`7eE7YP*%81o>G|jz$m!uTX%J~bozms(7D;-o z6?`hksosd^IvcZ={I-vi)uWsyGHe$A6_Bm8k=8|RD_`fR;Xz*o_oS1RCxUy{3e`V& zgF~mzJN*QEvd6z7QlCPG;GzMxifqEx9qW`LnJdFo?6Ernmywx7Zi(iRI`fFCF9`0- zmU)LaQx#NBE_|`akLRkyLla5`tgX8Ux!Pz3xVowKaeG++j;afQrhhMFD%kLkOlM(z zE&XwPjOA{dXeE}N*Cl}`+uhugd8e7A!Yd5&bsZha3^`rqVp+g_$F6 zIXKsRo_^qMKt24DdiM{Be1Zzm==+u`@~LjId2y;(PZBRF6t}aGNWi-3t0#%W-mm{- z{`^rAXswhz3?A?6LkAID%WJwHSZ0GmXSrPZcD1XoI=Qk26jnu%>qUOB)TfwfZ=z6!7VSHU?#D7w>{~&@MmsfsAJSFs$ z@YN;}PX~EA$kRcuFv@!frJYtoV0njd3M$OFwjfe}K)K5@TyO>^k`;0pkec literal 0 HcmV?d00001 diff --git a/playwright/visual.test.ts-snapshots/Icon-BigIcon-Medium-1-chromium-linux.png b/playwright/visual.test.ts-snapshots/Icon-BigIcon-Medium-1-chromium-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..cc8adf1af4fca83e09eb06ab5b46a0f1b81129b8 GIT binary patch literal 4493 zcmeHLYfuwb7QV=KP=PS5)1^vC+HF^ND-r~GOFvm$ zdUE@lU4Yua-&0mq^<#2-fPY75X?Q4%1$ogw9P0tb{=zq3A}n?XvpGk-L@O(o^Ti`O z5nJ#Xe`vw^^Hv%6UZk8_dFKWJm;H*8avh)JXxj@r65hx(5Q@J@h{v zda@|Be|_l`g`uezIt(FVjLBB!kA$EN&l<{5OJgB1X!-P6rAoDU*9|b;Gmgcp3MUA2 zof*m2mw75l_ySe$F!yi055d~PG4|mUR^;c&9!U)%x~+Vv13V_A70U0nOKdEz#5{MX z^u!?;W8reJc|h;r<;-Sy)YjKK?uqHjUK6~pZU4;iEbw@BccC0}!d<5A{mZ=z6*6`0n8yl}AWtyc~$`AA@3YmSclZUnfPcW$7wAm7ZwQjBHQ z6o_cO1)qu5j7`1l5M2)DDd#j?iRp1d*=E~E5T31?v9apNEf0V1-+`1C)Ry$4sksPM zGroRiXcS4ID~8B6W9Y0zk9P#uo<7kqSrvEdQa0&~ryr8C_DEYod}Q40`&+sj^IUHA zh=_&8NFp5l-9@Ae33D`~%CU0CmjJyh+kS=FGIWbG`K!;z+2MBE$G(^zyDS_#eL46V zV|kMFj^Kv;Odo+}e160i7vc^oK8(l{*mO7Ly(WL8mq?CBMLsBPA(Q(Unk&^1QHNrw zWJ@6xV;Z$G&gyT6o()UB*68xhUQA+nw4 z;K&v5%=V2jPY}eu|8|*4pz2T$RpQac+xzfa!~0lR%irs%$``682I^H^catAcXlBpD z={FzodwYA0U8kG}%s+Li&!HV9O7dRX6A?m#Eob79N$_fWoI|W5ELggI>r(UGL0H{N zU{w)}ZV)?ko}!?-g3a1E!bUOaojmPAzQ&(|)vx-*Sk^tnSX1j{n&C+a!ak{LquT-d z*S=VRB8B@hU+jqx9J7z&Fk5FG+x(&?YZ7&UH?{9*hAi-HP~-ontkVZ8vF0gkf!3@l zB5fJkle3lTW&x?Fs;Wxt81#kFY{j8;?HxFptWi|A(qf!?(4C^a|9xA+tl!spi1sU7 z=gL}&P=hpKg1kfzt+1MUHd6Mbe5hg4AjH!hYN6eVATyRb)jo9&8Qiw`+eAzlOpNZa zSEwPWb$KJr^ju8}3meJjZl+>B*S04KW;mrS`F1=T z5g1_GOvUQAP5vP?p1lGm%pSddsNV2heV^2({_yD6QvKF z+xB|FMkojGm^Y{=5Tj5QuH@@*aB=9*2P=mc`T8Fl6^)WnYr!|PuJmluP#h6Rr9Gwr zr)K`QGF!81Xu$`({#nI^3otIg xxB&C|#kh+vF21<<;^NCMea!!#>W5b7Mx+~}%5j!N=l=>g`Eg8C+wqHE{0m3Q&0PQh literal 0 HcmV?d00001 diff --git a/playwright/visual.test.ts-snapshots/Icon-BigIcon-Small-1-chromium-linux.png b/playwright/visual.test.ts-snapshots/Icon-BigIcon-Small-1-chromium-linux.png new file mode 100644 index 0000000000000000000000000000000000000000..6626d074cc32492950f2fc0160fb2c5a38885a9a GIT binary patch literal 4194 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 literal 0 HcmV?d00001 diff --git a/src/components/Icon/BigIcon/BigIcon.module.css b/src/components/Icon/BigIcon/BigIcon.module.css new file mode 100644 index 00000000..56ce5572 --- /dev/null +++ b/src/components/Icon/BigIcon/BigIcon.module.css @@ -0,0 +1,51 @@ +/* +Copyright 2024 New Vector Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +.content { + display: inline-flex; + background-color: var(--cpd-color-bg-subtle-secondary); + padding: var(--cpd-space-4x); + border-radius: var(--cpd-space-2x); + color: var(--cpd-color-icon-secondary); + + > svg { + inline-size: 32px; + block-size: 32px; + } +} + +.content[data-size="medium"] { + padding: var(--cpd-space-3x); +} + +.content[data-size="small"] { + padding: var(--cpd-space-3x); + + > svg { + inline-size: 24px; + block-size: 24px; + } +} + +.destructive { + background-color: var(--cpd-color-bg-critical-subtle); + color: var(--cpd-color-icon-critical-primary); +} + +.success { + background-color: var(--cpd-color-bg-success-subtle); + color: var(--cpd-color-icon-success-primary); +} diff --git a/src/components/Icon/BigIcon/BigIcon.stories.tsx b/src/components/Icon/BigIcon/BigIcon.stories.tsx new file mode 100644 index 00000000..f256db25 --- /dev/null +++ b/src/components/Icon/BigIcon/BigIcon.stories.tsx @@ -0,0 +1,55 @@ +/* +Copyright 2024 New Vector Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React from "react"; +import { Meta, StoryFn } from "@storybook/react"; + +import { BigIcon as BigIconComponent } from "./BigIcon"; +import KeyIcon from "@vector-im/compound-design-tokens/assets/web/icons/key"; + +export default { + title: "Icon/BigIcon", + component: BigIconComponent, + tags: ["autodocs"], + args: { + children: , + }, +} as Meta; + +const Template: StoryFn = (args) => ( + +); + +export const Default = Template.bind({}); +export const Medium = Template.bind({}); +Medium.args = { + size: "medium", +}; + +export const Small = Template.bind({}); +Small.args = { + size: "small", +}; + +export const Destructive = Template.bind({}); +Destructive.args = { + destructive: true, +}; + +export const Success = Template.bind({}); +Success.args = { + success: true, +}; diff --git a/src/components/Icon/BigIcon/BigIcon.test.tsx b/src/components/Icon/BigIcon/BigIcon.test.tsx new file mode 100644 index 00000000..f01f94e9 --- /dev/null +++ b/src/components/Icon/BigIcon/BigIcon.test.tsx @@ -0,0 +1,51 @@ +/* +Copyright 2024 New Vector Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import { describe, expect, it } from "vitest"; +import { composeStories } from "@storybook/react"; +import * as stories from "./BigIcon.stories.tsx"; +import { render } from "@testing-library/react"; +import React from "react"; + +const { Default, Medium, Small, Destructive, Success } = + composeStories(stories); + +describe("BigIcon", () => { + it("renders a large big icon", () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); + + it("renders a medium big icon", () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); + + it("renders a small big icon", () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); + + it("renders a destructive big icon", () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); + + it("renders a success big icon", () => { + const { container } = render(); + expect(container).toMatchSnapshot(); + }); +}); diff --git a/src/components/Icon/BigIcon/BigIcon.tsx b/src/components/Icon/BigIcon/BigIcon.tsx new file mode 100644 index 00000000..44bd27d7 --- /dev/null +++ b/src/components/Icon/BigIcon/BigIcon.tsx @@ -0,0 +1,61 @@ +/* +Copyright 2024 New Vector Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +import React, { JSX, PropsWithChildren } from "react"; +import styles from "./BigIcon.module.css"; +import classNames from "classnames"; + +interface BigIconProps { + /** + * The CSS class name. + */ + className?: string; + /** + * The size of the icon. + * @default "large" + */ + size?: "small" | "medium" | "large"; + /** + * Whether this button triggers a destructive action. + * @default false + */ + destructive?: boolean; + /** + * Whether this button triggers a success action. + * @default false + */ + success?: boolean; +} + +export function BigIcon({ + className, + size = "large", + destructive = false, + success = false, + children, +}: PropsWithChildren): JSX.Element { + return ( +
+ {React.Children.only(children)} +
+ ); +} diff --git a/src/components/Icon/BigIcon/__snapshots__/BigIcon.test.tsx.snap b/src/components/Icon/BigIcon/__snapshots__/BigIcon.test.tsx.snap new file mode 100644 index 00000000..a2a8182e --- /dev/null +++ b/src/components/Icon/BigIcon/__snapshots__/BigIcon.test.tsx.snap @@ -0,0 +1,106 @@ +// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html + +exports[`BigIcon > renders a destructive big icon 1`] = ` +
+
+ + + +
+
+`; + +exports[`BigIcon > renders a large big icon 1`] = ` +
+
+ + + +
+
+`; + +exports[`BigIcon > renders a medium big icon 1`] = ` +
+
+ + + +
+
+`; + +exports[`BigIcon > renders a small big icon 1`] = ` +
+
+ + + +
+
+`; + +exports[`BigIcon > renders a success big icon 1`] = ` +
+
+ + + +
+
+`; diff --git a/src/components/Icon/BigIcon/index.ts b/src/components/Icon/BigIcon/index.ts new file mode 100644 index 00000000..613635d4 --- /dev/null +++ b/src/components/Icon/BigIcon/index.ts @@ -0,0 +1,17 @@ +/* +Copyright 2024 New Vector Ltd + +Licensed under the Apache License, Version 2.0 (the "License"); +you may not use this file except in compliance with the License. +You may obtain a copy of the License at + + http://www.apache.org/licenses/LICENSE-2.0 + +Unless required by applicable law or agreed to in writing, software +distributed under the License is distributed on an "AS IS" BASIS, +WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +See the License for the specific language governing permissions and +limitations under the License. +*/ + +export { BigIcon } from "./BigIcon"; diff --git a/src/index.ts b/src/index.ts index 6bd84107..66f9fa0e 100644 --- a/src/index.ts +++ b/src/index.ts @@ -37,6 +37,7 @@ export { H6, } from "./components/Typography/Heading"; export { IndicatorIcon } from "./components/Icon/IndicatorIcon/IndicatorIcon"; +export { BigIcon } from "./components/Icon/BigIcon"; export { Link } from "./components/Link/Link"; export { NavBar, NavItem } from "./components/Nav"; export { Menu } from "./components/Menu/Menu";