From b1290b2a89d1eb25c9da2551ba48c7345b6c805f Mon Sep 17 00:00:00 2001 From: Charles Krook Date: Wed, 15 Jan 2025 08:51:54 +0100 Subject: [PATCH 1/4] feat(motion): add slide in/out animations and update motion parameters --- motion/_animation.scss | 76 ++- motion/_motion.scss | 16 +- packages/core/.storybook/preview.js | 1 + ...ers-basic-accordion-correctly-1-darwin.png | Bin 0 -> 7576 bytes ...accordion-item-opens-on-click-1-darwin.png | Bin 0 -> 20378 bytes ...-disabled-accordion-correctly-1-darwin.png | Bin 0 -> 6960 bytes ...-hidden-last-border-correctly-1-darwin.png | Bin 0 -> 7560 bytes ...renders-basic-badge-correctly-1-darwin.png | Bin 0 -> 4658 bytes ...renders-value-badge-correctly-1-darwin.png | Bin 0 -> 6353 bytes .../animations/animations-classes.stories.ts | 88 +++ .../transitions-classes.stories.ts | 557 ++++++++++++++++++ 11 files changed, 702 insertions(+), 36 deletions(-) create mode 100644 packages/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/tds-accordion-renders-basic-accordion-correctly-1-darwin.png create mode 100644 packages/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/tds-accordion-second-accordion-item-opens-on-click-1-darwin.png create mode 100644 packages/core/src/components/accordion/test/disabled/accordion.e2e.ts-snapshots/tds-accordion-renders-disabled-accordion-correctly-1-darwin.png create mode 100644 packages/core/src/components/accordion/test/hide-last-border/accordion.e2e.ts-snapshots/tds-accordion-renders-accordion-with-hidden-last-border-correctly-1-darwin.png create mode 100644 packages/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/tds-badge-renders-basic-badge-correctly-1-darwin.png create mode 100644 packages/core/src/components/badge/test/value/badge.e2e.ts-snapshots/tds-badge-renders-value-badge-correctly-1-darwin.png create mode 100644 packages/core/src/stories/motions/animations/animations-classes.stories.ts create mode 100644 packages/core/src/stories/motions/transitions/transitions-classes.stories.ts diff --git a/motion/_animation.scss b/motion/_animation.scss index b4cf90529..bb73ef964 100644 --- a/motion/_animation.scss +++ b/motion/_animation.scss @@ -59,72 +59,60 @@ /* Slide */ @keyframes tds-slide-in-top { 0% { - opacity: 1; transform: translateY(-100%); } 100% { - opacity: 1; transform: translateY(0); } } @keyframes tds-slide-in-bottom { 0% { - opacity: 1; transform: translateY(100%); } 100% { - opacity: 1; transform: translateY(0); } } @keyframes tds-slide-in-left { 0% { - opacity: 1; transform: translateX(-100%); } 100% { - opacity: 1; transform: translateX(0); } } @keyframes tds-slide-in-right { 0% { - opacity: 1; transform: translateX(100%); } 100% { - opacity: 1; transform: translateX(0); } } @keyframes tds-slide-out-top { 0% { - opacity: 1; transform: translateY(0); } 100% { - opacity: 1; transform: translateY(-100%); } } @keyframes tds-slide-out-bottom { 0% { - opacity: 1; transform: translateY(0); } 100% { - opacity: 1; transform: translateY(100%); } } @@ -166,24 +154,20 @@ /* Slide short */ @keyframes tds-slide-top-short { 0% { - opacity: 1; transform: translateY(-16px); } 100% { - opacity: 1; transform: translateY(0); } } @keyframes tds-slide-bottom-short { 0% { - opacity: 1; transform: translateY(16px); } 100% { - opacity: 1; transform: translateY(0); } } @@ -200,28 +184,64 @@ @keyframes tds-slide-left-short { 0% { - opacity: 1; transform: translateX(-16px); } 100% { - opacity: 1; transform: translateX(0); } } @keyframes tds-slide-right-short { 0% { - opacity: 1; transform: translateX(16px); } 100% { - opacity: 1; transform: translateX(0); } } +@keyframes tds-slide-out-top-short { + 0% { + transform: translateY(0); + } + + 100% { + transform: translateY(-16px); + } +} + +@keyframes tds-slide-out-bottom-short { + 0% { + transform: translateY(0); + } + + 100% { + transform: translateY(16px); + } +} + +@keyframes tds-slide-out-left-short { + 0% { + transform: translateX(0); + } + + 100% { + transform: translateX(-16px); + } +} + +@keyframes tds-slide-out-right-short { + 0% { + transform: translateX(0); + } + + 100% { + transform: translateX(16px); + } +} + /* Rotate */ @keyframes tds-rotate { 0% { @@ -348,43 +368,35 @@ from { opacity: 1; height: 0%; - - //overflow: hidden; + overflow: hidden; } to { opacity: 1; height: 100%; - - //overflow: hidden; + overflow: hidden; } } @keyframes tds-collapse-in-hidden { from { height: 0%; - - //overflow: hidden; + overflow: hidden; } to { height: 100%; - - //overflow: hidden; + overflow: hidden; } } @keyframes tds-collapse-out { 0% { height: 100%; - - //overflow: hidden; } 100% { height: 0; - - //overflow: hidden; } } diff --git a/motion/_motion.scss b/motion/_motion.scss index 3b64485fc..257a499ca 100644 --- a/motion/_motion.scss +++ b/motion/_motion.scss @@ -76,14 +76,22 @@ html { var(--tds-motion-easing-exit) forwards; /* ### Slide Short ### */ - --slide-top-short-animation: tds-slide-top-short var(--tds-motion-duration-slow-02) + --slide-in-top-short-animation: tds-slide-top-short var(--tds-motion-duration-slow-02) var(--tds-motion-easing-enter) forwards; - --slide-bottom-short-animation: tds-slide-bottom-short var(--tds-motion-duration-slow-02) + --slide-in-right-short-animation: tds-slide-right-short var(--tds-motion-duration-slow-02) var(--tds-motion-easing-enter) forwards; - --slide-left-short-animation: tds-slide-left-short var(--tds-motion-duration-slow-02) + --slide-in-bottom-short-animation: tds-slide-bottom-short var(--tds-motion-duration-slow-02) var(--tds-motion-easing-enter) forwards; - --slide-right-short-animation: tds-slide-right-short var(--tds-motion-duration-slow-02) + --slide-in-left-short-animation: tds-slide-left-short var(--tds-motion-duration-slow-02) var(--tds-motion-easing-enter) forwards; + --slide-out-top-short-animation: tds-slide-out-top-short var(--tds-motion-duration-slow-02) + var(--tds-motion-easing-exit) forwards; + --slide-out-bottom-short-animation: tds-slide-out-bottom-short var(--tds-motion-duration-slow-02) + var(--tds-motion-easing-exit) forwards; + --slide-out-left-short-animation: tds-slide-out-left-short var(--tds-motion-duration-slow-02) + var(--tds-motion-easing-exit) forwards; + --slide-out-right-short-animation: tds-slide-out-right-short var(--tds-motion-duration-slow-02) + var(--tds-motion-easing-exit) forwards; /* ### Collapse ### */ --collapse-in-animation: tds-collapse-in var(--tds-motion-duration-slow-02) diff --git a/packages/core/.storybook/preview.js b/packages/core/.storybook/preview.js index 53e01c7a0..607c5a8e1 100644 --- a/packages/core/.storybook/preview.js +++ b/packages/core/.storybook/preview.js @@ -150,6 +150,7 @@ export const parameters = { 'Foundations', 'Utilities', 'Patterns', + 'Motions', 'Components', ], }, diff --git a/packages/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/tds-accordion-renders-basic-accordion-correctly-1-darwin.png b/packages/core/src/components/accordion/test/basic/accordion.e2e.ts-snapshots/tds-accordion-renders-basic-accordion-correctly-1-darwin.png new file mode 100644 index 0000000000000000000000000000000000000000..5ef68238a6c175830b896a113b5116b6c3feb02f GIT binary patch literal 7576 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 aZo)Ayj7X3i4Ez|oocb#EOZpe*uKW)$p^mWt literal 0 HcmV?d00001 diff --git a/packages/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/tds-badge-renders-basic-badge-correctly-1-darwin.png b/packages/core/src/components/badge/test/basic/badge.e2e.ts-snapshots/tds-badge-renders-basic-badge-correctly-1-darwin.png new file mode 100644 index 0000000000000000000000000000000000000000..2196559444e9ee65a536377c0702b52bbcb565ea GIT binary patch literal 4658 zcmeAS@N?(olHy`uVBq!ia0y~yUzPkRrob0*o&6P^cK$qRH|IhItJpb9<nZ@2&d{dex-!@XrB6$~3II9p?ihvN5BCe_2kLupPS@Om8KgRY=HY6DYM_4*s{8xks%3$G zul(`m+Il8Ct2zGf%S$zZdT(q?O?!6q=Gt;?H6ZW9{m8Vmc{cMdPmb>K^M7{o@!h+e zK;dog)?ZiHTT^$L&CYh_^z-FVKQ^CD`}}=7zxd~0Z}b22*OXZ3pR@T5jL-!6zY+(o zpVNQ#>2u9btML2Jf7R~ie|LWI<4UbsP&kI~=Sl#Y`s03NUI81B@ogRhkWz4D0D5ME zLIY5Vhrj`#xC%!CkQ8D8g$O5;1Tb<~7`ves&@bY literal 0 HcmV?d00001 diff --git a/packages/core/src/components/badge/test/value/badge.e2e.ts-snapshots/tds-badge-renders-value-badge-correctly-1-darwin.png b/packages/core/src/components/badge/test/value/badge.e2e.ts-snapshots/tds-badge-renders-value-badge-correctly-1-darwin.png new file mode 100644 index 0000000000000000000000000000000000000000..c32cbf426827335f1ebe8d9733ee80761f0097c2 GIT binary patch literal 6353 zcmeH~YgCfi8pr9PHj|e%%VlP$T_l~3rKTOt5S<)L>4KG=DTk8E($zu5g?R=Ny7_RPKs!dF^YF|M9ET6@rGPHo0_v`KAlhJBVX9>%ijOJpZ$BD z|K97paSRn{_xYyJArOciGAiN(1Y!jqSHD@e8Z=*RKC}untI|$HhC?bOt`iW*#+%59 z{U@_nQ-iqj!SwU3Gg3tDadgziz?##?uWd+r!P~pFFX>$Q8tknL=S8-q1wI9~`){kS z7C3E=x^TDL&+!6rcrz?2{OQWJAkpcI7Xoes=6&U2`Ya(_eB$f1efJv?gf|zgq`Q*& zwKe*NxabtMh9DqInlmNALPbyN-j3>WwkY{SnzSXUj|J1J658(XMBlBZhv`c|ps58L z2?rtM_-$AL>w3^_($qDbZkmu*YHJOF48PHOtuipNvt8*@#HhhZ_v^!e+?_zgh|51q zUgVLAiRouU(_Y`=dt(0pV^GI{Oi%OBjC@$EcI*p}(folWoK8np zmSHyT-iJ5Sb1k=yh422Y;#69KN+B$jH+mwi<2}X^4Lh*8>ue#ArmgWs{oR!3h9Ix; zck~2pJmKy>{5G@jjx|4Vw4j|5#;ha<(JO~!zfv6m_Thi*@h%IbJSWPH{0}CBQK7#4 zUUUNpQjcw#e1!!M!$mDa0Kh;u5{sOAG*iH*hh)x@EM-@lZJ8a$$2>T zo5HZb(fmXVChN#}2M6Evq5IO*FIU_h!6**5Y9y5*leo>)D_)$gz!b-z`sOuHGnK!2 z^Wqs4L6|d}{^B$(WUh>rh9v2G3chphXrBs_EX{y8&uMOvbK0Ohb?Fx#bPTPwafgtw z4Wm!k;9mS{ef1@@XKmuV7cV|CWeH_p#*W8uiu-QkjF*=80RQsknrU|s!*H-2 zzJIyX<1vQ?H?n#8SKp3oYo2C>;rB>*WHE>Un6Jh9UmBCdd+0H?#7Fe{E_#t-nw1Y zm^-lkTGcPLN&(tGl=GOxbrzhHdn|(#g(L-H#rx z(1V?ILTssj_NJva#^$;Mje zpILc&WPk(LNR9?2?hMv+xQ2QyA{dn14Dqwa-?{*m{qx`RZ`_(nYgQ?r$EPhCnFCe& z-Fph%4GFb=e2llAxL~%${&&n(4YIx)12v(GNgaH5`##!2GWD;>^pW-qN2oRISfsm^IBt+A;ouO<`@))^Yvnrn7MpeY1d zNV-gGSS~^O2bMmF<2gW4&)mTHj(=8-%-|$SWdSt?CAK@|)z+QNG~S2x3J_j`?Tdr7 znVFDzeZ#a>eVk6>pu|*)IwLO;L-MPV6rA(3+%U;^bjs-rVu-`Qz6Ut-32GYP4i4!k z>IS%Tu7BnrcUM1;^fk?l!Yx?)av&$NCZ#=^RP%&Io;hYxQA6s2(Y2m!@f20(>ue?2 zVW14mk*D(a)~X7hTV0{WM7KSOqqd()9QD;ks}d%#+UWv7KCiQbo^{1K~d@=fbuv9#T` z)_fD1`5cis#4byboW>6^gNZ0L!EdvEQoTd5ObX5To0^as{U^R3&*1;z!G+{cB_-7~ zfhB(mvqpj|A*L{_YCBY&d(h~~9H81Qs?&_>Y!A@SK<2}O3EAINFlL^9Qz7bYPb31f zKsJs|v~GD?cO?OuHTFY!-4$y&*moXc)5nVo4W~X4?itfuU6fwS=1;EX8bO^+)8{)N zLzkx_QqWvNV1jJ?2udyeadea!7Ib*SrQQ=Cudf&9PD0GbV4e zUkd>X0Sf^O0Sf^O0Sf^O0Sf^O0Sf^O0Sf^Of&Ui)lY{@;6oj!PF&unzLy!kh5f$O* GuKfpG4sL`1 literal 0 HcmV?d00001 diff --git a/packages/core/src/stories/motions/animations/animations-classes.stories.ts b/packages/core/src/stories/motions/animations/animations-classes.stories.ts new file mode 100644 index 000000000..d3326f306 --- /dev/null +++ b/packages/core/src/stories/motions/animations/animations-classes.stories.ts @@ -0,0 +1,88 @@ +import formatHtmlPreview from '../../formatHtmlPreview'; + +export default { + title: 'Motions/Animations', + parameters: { + notes: {}, + layout: 'fullscreen', + docs: { + source: { + state: 'closed', + }, + }, + design: [ + { + name: 'Figma', + type: 'figma', + url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1', + }, + { + name: 'Link', + type: 'link', + url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1', + }, + ], + }, + argTypes: {}, + args: {}, +}; + +const Template = () => + formatHtmlPreview( + ` + + + Example: default + + + Cool apps + + + Button + + + Button + + + Button + + + Button + + + Lame apps + + + Button + + + Button + + + Button + + + Button + + + Button + + + Button + + + + + + + + + + +
+

If the Header only contains a title, launcher, and logo, no side menu is needed.

+
+ `, + ); + +export const Basic = Template.bind({}); diff --git a/packages/core/src/stories/motions/transitions/transitions-classes.stories.ts b/packages/core/src/stories/motions/transitions/transitions-classes.stories.ts new file mode 100644 index 000000000..4e4d2ebcc --- /dev/null +++ b/packages/core/src/stories/motions/transitions/transitions-classes.stories.ts @@ -0,0 +1,557 @@ +import formatHtmlPreview from '../../formatHtmlPreview'; + +export default { + title: 'Motions/Transitions', + parameters: { + notes: {}, + layout: 'fullscreen', + docs: { + source: { + state: 'closed', + }, + }, + design: [ + { + name: 'Figma', + type: 'figma', + url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1', + }, + { + name: 'Link', + type: 'link', + url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1', + }, + ], + }, + argTypes: {}, + args: {}, +}; + +const Template = () => + formatHtmlPreview( + ` +
+

Fade

+
+ +
+
+
+
+

--fade-in-animation

+
+ +
+
+
+
+

--fade-out-animation

+
+
+ +

Zoom

+
+ +
+
+
+
+

--zoom-in-animation

+
+
+
+
+
+

--zoom-out-animation

+
+
+ +

Collapse

+ +
+ +
+
+
+
+
+
+

--collapse-in-animation

+
+
+
+
+
+
+
+

--collapse-out-animation

+
+
+ +

Slide

+ +
+ +
+
+
+
+

--slide-in-top-animation

+
+
+
+
+
+

--slide-in-right-animation

+
+
+
+
+
+

--slide-in-bottom-animation

+
+
+
+
+
+

--slide-in-left-animation

+
+
+
+ +
+
+
+
+

--slide-out-top-animation

+
+
+
+
+
+

--slide-out-right-animation

+
+
+
+
+
+

--slide-out-bottom-animation

+
+
+
+
+
+

--slide-out-left-animation

+
+
+ +

Slide Short

+ +
+ +
+
+
+
+

--slide-in-top-short-animation

+
+ +
+
+
+
+

--slide-in-right-short-animation

+
+ +
+
+
+
+

--slide-in-bottom-short-animation

+
+ +
+
+
+
+

--slide-in-left-short-animation

+
+
+ +
+
+
+
+
+

--slide-out-top-short-animation

+
+ +
+
+
+
+

--slide-out-right-short-animation

+
+ +
+
+
+
+

--slide-out-bottom-short-animation

+
+ +
+
+
+
+

--slide-out-left-short-animation

+
+
+ +

Other

+
+ +
+
+
+
+

--rotate-animation

+
+ +
+
+
+
+

--shake-animation

+
+ +
+
+
+
+

--pulse-animation

+
+ +
+
+
+
+

--blink-animation

+
+ +
+
+
+
+

--elevate-exit-animation

+
+
+ +
+ + + + + + `, + ); + +export const Basic = Template.bind({}); From 64522bd49e0f133269df53e5651218a4cb176b07 Mon Sep 17 00:00:00 2001 From: Charles Krook Date: Wed, 15 Jan 2025 14:28:17 +0100 Subject: [PATCH 2/4] feat(motion): enhance animation classes and improve visibility handling in keyframes --- motion/_animation.scss | 83 +++++++- motion/_motion.scss | 30 +++ .../animations/animations-classes.stories.ts | 189 ++++++++++++------ .../transitions-classes.stories.ts | 46 +++-- 4 files changed, 266 insertions(+), 82 deletions(-) diff --git a/motion/_animation.scss b/motion/_animation.scss index bb73ef964..b1b091ab3 100644 --- a/motion/_animation.scss +++ b/motion/_animation.scss @@ -59,40 +59,48 @@ /* Slide */ @keyframes tds-slide-in-top { 0% { + visibility: visible; transform: translateY(-100%); } 100% { + visibility: visible; transform: translateY(0); } } @keyframes tds-slide-in-bottom { 0% { + visibility: visible; transform: translateY(100%); } 100% { + visibility: visible; transform: translateY(0); } } @keyframes tds-slide-in-left { 0% { + visibility: visible; transform: translateX(-100%); } 100% { + visibility: visible; transform: translateX(0); } } @keyframes tds-slide-in-right { 0% { + visibility: visible; transform: translateX(100%); } 100% { + visibility: visible; transform: translateX(0); } } @@ -103,6 +111,7 @@ } 100% { + visibility: hidden; transform: translateY(-100%); } } @@ -113,6 +122,7 @@ } 100% { + visibility: hidden; transform: translateY(100%); } } @@ -123,30 +133,29 @@ } 100% { + visibility: hidden; transform: translateY(100%); } } @keyframes tds-slide-out-left { 0% { - opacity: 1; transform: translateX(0); } 100% { - opacity: 1; + visibility: hidden; transform: translateX(-100%); } } @keyframes tds-slide-out-right { 0% { - opacity: 1; transform: translateX(0); } 100% { - opacity: 1; + visibility: hidden; transform: translateX(100%); } } @@ -154,50 +163,60 @@ /* Slide short */ @keyframes tds-slide-top-short { 0% { + visibility: visible; transform: translateY(-16px); } 100% { + visibility: visible; transform: translateY(0); } } @keyframes tds-slide-bottom-short { 0% { + visibility: visible; transform: translateY(16px); } 100% { + visibility: visible; transform: translateY(0); } } @keyframes tds-slide-bottom-short-hidden { 0% { + visibility: visible; transform: translateY(16px); } 100% { + visibility: visible; transform: translateY(0); } } @keyframes tds-slide-left-short { 0% { + visibility: visible; transform: translateX(-16px); } 100% { + visibility: visible; transform: translateX(0); } } @keyframes tds-slide-right-short { 0% { + visibility: visible; transform: translateX(16px); } 100% { + visibility: visible; transform: translateX(0); } } @@ -208,6 +227,7 @@ } 100% { + visibility: hidden; transform: translateY(-16px); } } @@ -218,6 +238,7 @@ } 100% { + visibility: hidden; transform: translateY(16px); } } @@ -228,6 +249,7 @@ } 100% { + visibility: hidden; transform: translateX(-16px); } } @@ -238,6 +260,7 @@ } 100% { + visibility: hidden; transform: translateX(16px); } } @@ -509,10 +532,48 @@ } } -.star1 { - animation: animate-svg-stroke-1 2s cubic-bezier(0.47, 0, 0.745, 0.715) 0s both; - fill: #fff; - stroke: #000; - stroke-width: 20; - stroke-miterlimit: 10; -} +/* ======================================================================= + Animation keframes + ========================================================================== */ + +// // Zoom Scale + +// @keyframes zoom-in { +// 0% { +// opacity: 0; +// transform: scale(0.9); +// } + +// 100% { +// opacity: 1; +// transform: scale(1); +// } +// } + +// // Collapse Enter + +// @keyframes collapse-enter { +// from { +// opacity: 0; +// height: 0%; +// } + +// to { +// opacity: 1; +// height: 100%; +// } +// } + +// // Slide Enter + +// @keyframes slide-enter { +// 0% { +// opacity: 0; +// transform: translateY(-100%); +// } + +// 100% { +// opacity: 1; +// transform: translateY(0); +// } +// } diff --git a/motion/_motion.scss b/motion/_motion.scss index 257a499ca..2de3b861b 100644 --- a/motion/_motion.scss +++ b/motion/_motion.scss @@ -126,4 +126,34 @@ html { tds-slide-out-bottom-hidden var(--tds-motion-duration-slow-02) var(--tds-motion-easing-exit) forwards, tds-zoom-out var(--tds-motion-duration-slow-02) var(--tds-motion-easing-exit) forwards; + + // Animation Classes + + --zoom-enter: tds-fade-in var(--tds-motion-duration-fast-02) var(--tds-motion-easing-linear) + forwards, + tds-zoom-in-hidden var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania) forwards; + --zoom-exit: tds-fade-out var(--tds-motion-duration-fast-02) var(--tds-motion-easing-exit) + forwards, + tds-zoom-out var(--tds-motion-duration-fast-02) var(--tds-motion-easing-exit) forwards; + --collapse-enter: tds-fade-in var(--tds-motion-duration-slow-02) var(--tds-motion-easing-linear) + forwards, + tds-collapse-in-hidden var(--tds-motion-duration-slow-02) var(--tds-motion-easing-scania) + forwards; + --collapse-exit: tds-fade-out var(--tds-motion-duration-slow-02) var(--tds-motion-easing-exit) + forwards, + tds-collapse-out var(--tds-motion-duration-slo-w02) var(--tds-motion-easing-exit) forwards; + --slide-enter: tds-fade-in var(--tds-motion-duration-slow-02) var(--tds-motion-easing-linear) + forwards, + tds-slide-bottom-short-hidden var(--tds-motion-duration-slow-02) var(--tds-motion-easing-scania) + forwards; + --slide-exit: tds-fade-out var(--tds-motion-duration-slow-02) var(--tds-motion-easing-exit) + forwards, + tds-slide-out-bottom-hidden var(--tds-motion-duration-slow-02) var(--tds-motion-easing-exit) + forwards; + --elevate-enter: tds-fade-in 1s var(--tds-motion-easing-linear) forwards, + tds-slide-in-bottom-hidden 1s var(--tds-motion-easing-scania) forwards, + tds-zoom-in-hidden 1s var(--tds-motion-easing-scania) forwards; + --elevate-exit: tds-fade-in 1s var(--tds-motion-easing-exit) forwards, + tds-slide-up-bottom 1s var(--tds-motion-easing-exit) forwards, + tds-zoom-out 1s var(--tds-motion-easing-exit) forwards; } diff --git a/packages/core/src/stories/motions/animations/animations-classes.stories.ts b/packages/core/src/stories/motions/animations/animations-classes.stories.ts index d3326f306..3b752b2cb 100644 --- a/packages/core/src/stories/motions/animations/animations-classes.stories.ts +++ b/packages/core/src/stories/motions/animations/animations-classes.stories.ts @@ -5,11 +5,7 @@ export default { parameters: { notes: {}, layout: 'fullscreen', - docs: { - source: { - state: 'closed', - }, - }, + docs: {}, design: [ { name: 'Figma', @@ -30,58 +26,137 @@ export default { const Template = () => formatHtmlPreview( ` - - - Example: default - - - Cool apps - - - Button - - - Button - - - Button - - - Button - - - Lame apps - - - Button - - - Button - - - Button - - - Button - - - Button - - - Button - - - - - - - - - - -
-

If the Header only contains a title, launcher, and logo, no side menu is needed.

-
+

Enter

+
+ +
+
+
+
+

--zoom-enter

+
+ +
+
+
+
+

--zoom-exit

+
+
+ +
+ +

Collapse

+
+
+
+
+
+
+

--collapse-enter

+
+ +
+
+
+
+
+
+

--collapse-exit

+
+
+ + + `, ); diff --git a/packages/core/src/stories/motions/transitions/transitions-classes.stories.ts b/packages/core/src/stories/motions/transitions/transitions-classes.stories.ts index 4e4d2ebcc..fdc25d549 100644 --- a/packages/core/src/stories/motions/transitions/transitions-classes.stories.ts +++ b/packages/core/src/stories/motions/transitions/transitions-classes.stories.ts @@ -5,11 +5,7 @@ export default { parameters: { notes: {}, layout: 'fullscreen', - docs: { - source: { - state: 'closed', - }, - }, + design: [ { name: 'Figma', @@ -30,7 +26,6 @@ export default { const Template = () => formatHtmlPreview( ` -

Fade

@@ -144,7 +139,6 @@ const Template = () =>

--slide-out-left-animation

-

Slide Short

@@ -247,16 +241,20 @@ const Template = () =>
-
- - - - + `, ); From 481fc5df2766717dad395407ab78426efe73652a Mon Sep 17 00:00:00 2001 From: Charles Krook Date: Thu, 16 Jan 2025 11:36:39 +0100 Subject: [PATCH 3/4] feat(motion): update animation styles and add new transition stories --- motion/_animation.scss | 2 +- motion/_motion.scss | 113 ++-- packages/core/.storybook/preview.js | 2 +- .../animations/animations-classes.stories.ts | 118 +++- .../transitions-classes.stories.ts | 575 ------------------ .../transitions-collapse.stories.tsx | 91 +++ .../transitions/transitions-fade.stories.tsx | 82 +++ .../transitions/transitions-other.stories.tsx | 140 +++++ .../transitions/transitions-slide.stories.tsx | 182 ++++++ .../transitions-slideshort.stories.tsx | 182 ++++++ .../transitions/transitions-zoom.stories.tsx | 81 +++ 11 files changed, 900 insertions(+), 668 deletions(-) delete mode 100644 packages/core/src/stories/motions/transitions/transitions-classes.stories.ts create mode 100644 packages/core/src/stories/motions/transitions/transitions-collapse.stories.tsx create mode 100644 packages/core/src/stories/motions/transitions/transitions-fade.stories.tsx create mode 100644 packages/core/src/stories/motions/transitions/transitions-other.stories.tsx create mode 100644 packages/core/src/stories/motions/transitions/transitions-slide.stories.tsx create mode 100644 packages/core/src/stories/motions/transitions/transitions-slideshort.stories.tsx create mode 100644 packages/core/src/stories/motions/transitions/transitions-zoom.stories.tsx diff --git a/motion/_animation.scss b/motion/_animation.scss index b1b091ab3..274c22175 100644 --- a/motion/_animation.scss +++ b/motion/_animation.scss @@ -419,7 +419,7 @@ } 100% { - height: 0; + height: 0%; } } diff --git a/motion/_motion.scss b/motion/_motion.scss index 2de3b861b..fa0dd55df 100644 --- a/motion/_motion.scss +++ b/motion/_motion.scss @@ -42,118 +42,111 @@ html { --tds-motion-ease-in-out: cubic-bezier(0.4, 0, 0.2, 1); /* ======================================================================== - Motion Animations Variables + Motion Transition Variables ======================================================================= */ /* ### Fade ### */ - --fade-in-animation: tds-fade-in var(--tds-motion-duration-moderate-01) + --tds-motion-fade-in: tds-fade-in var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-linear) forwards; - --fade-out-animation: tds-fade-out var(--tds-motion-duration-moderate-01) + --tds-motion-fade-out: tds-fade-out var(--tds-motion-duration-moderate-01) var(--tds-motion-easing-linear) forwards; /* ### Zoom ### */ - --zoom-in-animation: tds-zoom-in var(--tds-motion-duration-fast-02) var(--tds-motion-easing-enter) - forwards; - --zoom-out-animation: tds-zoom-out var(--tds-motion-duration-fast-02) + --tds-motion-zoom-in: tds-zoom-in var(--tds-motion-duration-fast-02) + var(--tds-motion-easing-enter) forwards; + --tds-motion-zoom-out: tds-zoom-out var(--tds-motion-duration-fast-02) var(--tds-motion-easing-exit) forwards; /* ### Slide ### */ - --slide-in-top-animation: tds-slide-in-top var(--tds-motion-duration-slow-02) + --tds-motion-slide-in-top: tds-slide-in-top var(--tds-motion-duration-slow-02) var(--tds-motion-easing-enter) forwards; - --slide-in-bottom-animation: tds-slide-in-bottom var(--tds-motion-duration-slow-02) + --tds-motion-slide-in-bottom: tds-slide-in-bottom var(--tds-motion-duration-slow-02) var(--tds-motion-easing-enter) forwards; - --slide-in-left-animation: tds-slide-in-left var(--tds-motion-duration-slow-02) + --tds-motion-slide-in-left: tds-slide-in-left var(--tds-motion-duration-slow-02) var(--tds-motion-easing-enter) forwards; - --slide-in-right-animation: tds-slide-in-right var(--tds-motion-duration-slow-02) + --tds-motion-slide-in-right: tds-slide-in-right var(--tds-motion-duration-slow-02) var(--tds-motion-easing-enter) forwards; - --slide-out-top-animation: tds-slide-out-top var(--tds-motion-duration-slow-02) + --tds-motion-slide-out-top: tds-slide-out-top var(--tds-motion-duration-slow-02) var(--tds-motion-easing-exit) forwards; - --slide-out-bottom-animation: tds-slide-out-bottom var(--tds-motion-duration-slow-02) + --tds-motion-slide-out-bottom: tds-slide-out-bottom var(--tds-motion-duration-slow-02) var(--tds-motion-easing-exit) forwards; - --slide-out-left-animation: tds-slide-out-left var(--tds-motion-duration-slow-02) + --tds-motion-slide-out-left: tds-slide-out-left var(--tds-motion-duration-slow-02) var(--tds-motion-easing-exit) forwards; - --slide-out-right-animation: tds-slide-out-right var(--tds-motion-duration-slow-02) + --tds-motion-slide-out-right: tds-slide-out-right var(--tds-motion-duration-slow-02) var(--tds-motion-easing-exit) forwards; /* ### Slide Short ### */ - --slide-in-top-short-animation: tds-slide-top-short var(--tds-motion-duration-slow-02) + --tds-motion-slide-in-short-top: tds-slide-top-short var(--tds-motion-duration-slow-02) var(--tds-motion-easing-enter) forwards; - --slide-in-right-short-animation: tds-slide-right-short var(--tds-motion-duration-slow-02) + --tds-motion-slide-in-short-right: tds-slide-right-short var(--tds-motion-duration-slow-02) var(--tds-motion-easing-enter) forwards; - --slide-in-bottom-short-animation: tds-slide-bottom-short var(--tds-motion-duration-slow-02) + --tds-motion-slide-in-short-bottom: tds-slide-bottom-short var(--tds-motion-duration-slow-02) var(--tds-motion-easing-enter) forwards; - --slide-in-left-short-animation: tds-slide-left-short var(--tds-motion-duration-slow-02) + --tds-motion-slide-in-short-left: tds-slide-left-short var(--tds-motion-duration-slow-02) var(--tds-motion-easing-enter) forwards; - --slide-out-top-short-animation: tds-slide-out-top-short var(--tds-motion-duration-slow-02) + --tds-motion-slide-out-short-top: tds-slide-out-top-short var(--tds-motion-duration-slow-02) var(--tds-motion-easing-exit) forwards; - --slide-out-bottom-short-animation: tds-slide-out-bottom-short var(--tds-motion-duration-slow-02) + --tds-motion-slide-out-short-bottom: tds-slide-out-bottom-short var(--tds-motion-duration-slow-02) var(--tds-motion-easing-exit) forwards; - --slide-out-left-short-animation: tds-slide-out-left-short var(--tds-motion-duration-slow-02) + --tds-motion-slide-out-short-left: tds-slide-out-left-short var(--tds-motion-duration-slow-02) var(--tds-motion-easing-exit) forwards; - --slide-out-right-short-animation: tds-slide-out-right-short var(--tds-motion-duration-slow-02) + --tds-motion-slide-out-short-right: tds-slide-out-right-short var(--tds-motion-duration-slow-02) var(--tds-motion-easing-exit) forwards; /* ### Collapse ### */ - --collapse-in-animation: tds-collapse-in var(--tds-motion-duration-slow-02) + --tds-motion-collapse-in: tds-collapse-in var(--tds-motion-duration-slow-02) var(--tds-motion-easing-enter) forwards; - --collapse-out-animation: tds-collapse-out var(--tds-motion-duration-slow-02) + --tds-motion-collapse-out: tds-collapse-out var(--tds-motion-duration-slow-02) var(--tds-motion-easing-exit) forwards; /* ### Rotate ### */ - --rotate-animation: tds-rotate var(--tds-motion-duration-slow-02) var(--tds-motion-easing-linear) + --tds-motion-rotate: tds-rotate var(--tds-motion-duration-slow-02) var(--tds-motion-easing-linear) forwards; /* ### Shake ### */ - --shake-animation: tds-shake var(--tds-motion-duration-slow-02) var(--tds-motion-easing-linear) + --tds-motion-shake: tds-shake var(--tds-motion-duration-slow-02) var(--tds-motion-easing-linear) forwards; /* ### Blink ### */ - --blink-animation: tds-blink calc(var(--tds-motion-duration-slow-02) * 2) + --tds-motion-blink: tds-blink calc(var(--tds-motion-duration-slow-02) * 2) var(--tds-motion-easing-scania) infinite; /* ### Pulse ### */ - --pulse-animation: tds-pulse calc(var(--tds-motion-duration-slow-02) * 2) + --tds-motion-pulse: tds-pulse calc(var(--tds-motion-duration-slow-02) * 2) var(--tds-motion-easing-scania) infinite; - /* ### Elevate ### */ - --elevate-enter-animation: tds-fade-in var(--tds-motion-duration-slow-02) - var(--tds-motion-easing-linear) forwards, - tds-slide-in-bottom-hidden var(--tds-motion-duration-slow-02) var(--tds-motion-easing-scania) - forwards, - tds-zoom-in-hidden var(--tds-motion-duration-slow-02) var(--tds-motion-easing-scania) forwards; - --elevate-exit-animation: tds-fade-out var(--tds-motion-duration-slow-02) - var(--tds-motion-easing-exit) forwards, - tds-slide-out-bottom-hidden var(--tds-motion-duration-slow-02) var(--tds-motion-easing-exit) - forwards, - tds-zoom-out var(--tds-motion-duration-slow-02) var(--tds-motion-easing-exit) forwards; - - // Animation Classes + /* ======================================================================== + Motion Animation Variables + ======================================================================= */ - --zoom-enter: tds-fade-in var(--tds-motion-duration-fast-02) var(--tds-motion-easing-linear) - forwards, + --tds-motion-zoom-enter: tds-fade-in var(--tds-motion-duration-fast-02) + var(--tds-motion-easing-linear) forwards, tds-zoom-in-hidden var(--tds-motion-duration-fast-02) var(--tds-motion-easing-scania) forwards; - --zoom-exit: tds-fade-out var(--tds-motion-duration-fast-02) var(--tds-motion-easing-exit) - forwards, + --tds-motion-zoom-exit: tds-fade-out var(--tds-motion-duration-fast-02) + var(--tds-motion-easing-exit) forwards, tds-zoom-out var(--tds-motion-duration-fast-02) var(--tds-motion-easing-exit) forwards; - --collapse-enter: tds-fade-in var(--tds-motion-duration-slow-02) var(--tds-motion-easing-linear) - forwards, + --tds-motion-collapse-enter: tds-fade-in var(--tds-motion-duration-slow-02) + var(--tds-motion-easing-linear) forwards, tds-collapse-in-hidden var(--tds-motion-duration-slow-02) var(--tds-motion-easing-scania) forwards; - --collapse-exit: tds-fade-out var(--tds-motion-duration-slow-02) var(--tds-motion-easing-exit) - forwards, - tds-collapse-out var(--tds-motion-duration-slo-w02) var(--tds-motion-easing-exit) forwards; - --slide-enter: tds-fade-in var(--tds-motion-duration-slow-02) var(--tds-motion-easing-linear) - forwards, + --tds-motion-collapse-exit: tds-fade-out var(--tds-motion-duration-slow-02) + var(--tds-motion-easing-exit) forwards, + tds-collapse-out var(--tds-motion-duration-slow-02) var(--tds-motion-easing-exit) forwards; + --tds-motion-slide-enter: tds-fade-in var(--tds-motion-duration-slow-02) + var(--tds-motion-easing-linear) forwards, tds-slide-bottom-short-hidden var(--tds-motion-duration-slow-02) var(--tds-motion-easing-scania) forwards; - --slide-exit: tds-fade-out var(--tds-motion-duration-slow-02) var(--tds-motion-easing-exit) - forwards, + --tds-motion-slide-exit: tds-fade-out var(--tds-motion-duration-slow-02) + var(--tds-motion-easing-exit) forwards, tds-slide-out-bottom-hidden var(--tds-motion-duration-slow-02) var(--tds-motion-easing-exit) forwards; - --elevate-enter: tds-fade-in 1s var(--tds-motion-easing-linear) forwards, - tds-slide-in-bottom-hidden 1s var(--tds-motion-easing-scania) forwards, - tds-zoom-in-hidden 1s var(--tds-motion-easing-scania) forwards; - --elevate-exit: tds-fade-in 1s var(--tds-motion-easing-exit) forwards, - tds-slide-up-bottom 1s var(--tds-motion-easing-exit) forwards, - tds-zoom-out 1s var(--tds-motion-easing-exit) forwards; + --tds-motion-elevate-enter: tds-fade-in var(--tds-motion-duration-slow-02) + var(--tds-motion-easing-linear) forwards, + tds-slide-in-bottom-hidden var(--tds-motion-duration-slow-02) var(--tds-motion-easing-scania) + forwards, + tds-zoom-in-hidden var(--tds-motion-duration-slow-02) var(--tds-motion-easing-scania) forwards; + --tds-motion-elevate-exit: tds-fade-out var(--tds-motion-duration-slow-02) + var(--tds-motion-easing-exit) forwards, + tds-slide-up-bottom var(--tds-motion-duration-slow-02) var(--tds-motion-easing-exit) forwards, + tds-zoom-out var(--tds-motion-duration-slow-02) var(--tds-motion-easing-exit) forwards; } diff --git a/packages/core/.storybook/preview.js b/packages/core/.storybook/preview.js index 607c5a8e1..0b16cb6fe 100644 --- a/packages/core/.storybook/preview.js +++ b/packages/core/.storybook/preview.js @@ -147,10 +147,10 @@ export const parameters = { 'Announcements', ['Tegel', 'Prefix change'], ], + 'Motions', 'Foundations', 'Utilities', 'Patterns', - 'Motions', 'Components', ], }, diff --git a/packages/core/src/stories/motions/animations/animations-classes.stories.ts b/packages/core/src/stories/motions/animations/animations-classes.stories.ts index 3b752b2cb..6919d6a2c 100644 --- a/packages/core/src/stories/motions/animations/animations-classes.stories.ts +++ b/packages/core/src/stories/motions/animations/animations-classes.stories.ts @@ -1,7 +1,7 @@ import formatHtmlPreview from '../../formatHtmlPreview'; export default { - title: 'Motions/Animations', + title: 'Motions/Animations/All', parameters: { notes: {}, layout: 'fullscreen', @@ -19,13 +19,12 @@ export default { }, ], }, - argTypes: {}, - args: {}, }; const Template = () => formatHtmlPreview( ` +

Enter

@@ -35,18 +34,6 @@ const Template = () =>

--zoom-enter

- -
-
-
-
-

--zoom-exit

-
- - -
- -

Collapse

@@ -56,6 +43,31 @@ const Template = () =>

--collapse-enter

+
+
+
+
+

--slide-enter

+
+ +
+
+
+
+

--elevate-enter

+
+ +
+ +

Exit

+ +
+
+
+
+
+

--zoom-exit

+
@@ -64,7 +76,20 @@ const Template = () =>

--collapse-exit

+
+
+
+
+

--slide-exit

+
+
+
+
+
+

--elevate-exit

+
+
`, ); -export const Basic = Template.bind({}); +export const All = Template.bind({}); diff --git a/packages/core/src/stories/motions/transitions/transitions-classes.stories.ts b/packages/core/src/stories/motions/transitions/transitions-classes.stories.ts deleted file mode 100644 index fdc25d549..000000000 --- a/packages/core/src/stories/motions/transitions/transitions-classes.stories.ts +++ /dev/null @@ -1,575 +0,0 @@ -import formatHtmlPreview from '../../formatHtmlPreview'; - -export default { - title: 'Motions/Transitions', - parameters: { - notes: {}, - layout: 'fullscreen', - - design: [ - { - name: 'Figma', - type: 'figma', - url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1', - }, - { - name: 'Link', - type: 'link', - url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1', - }, - ], - }, - argTypes: {}, - args: {}, -}; - -const Template = () => - formatHtmlPreview( - ` -

Fade

-
- -
-
-
-
-

--fade-in-animation

-
- -
-
-
-
-

--fade-out-animation

-
-
- -

Zoom

-
- -
-
-
-
-

--zoom-in-animation

-
-
-
-
-
-

--zoom-out-animation

-
-
- -

Collapse

- -
- -
-
-
-
-
-
-

--collapse-in-animation

-
-
-
-
-
-
-
-

--collapse-out-animation

-
-
- -

Slide

- -
- -
-
-
-
-

--slide-in-top-animation

-
-
-
-
-
-

--slide-in-right-animation

-
-
-
-
-
-

--slide-in-bottom-animation

-
-
-
-
-
-

--slide-in-left-animation

-
-
-
- -
-
-
-
-

--slide-out-top-animation

-
-
-
-
-
-

--slide-out-right-animation

-
-
-
-
-
-

--slide-out-bottom-animation

-
-
-
-
-
-

--slide-out-left-animation

-
-
-

Slide Short

- -
- -
-
-
-
-

--slide-in-top-short-animation

-
- -
-
-
-
-

--slide-in-right-short-animation

-
- -
-
-
-
-

--slide-in-bottom-short-animation

-
- -
-
-
-
-

--slide-in-left-short-animation

-
-
- -
-
-
-
-
-

--slide-out-top-short-animation

-
- -
-
-
-
-

--slide-out-right-short-animation

-
- -
-
-
-
-

--slide-out-bottom-short-animation

-
- -
-
-
-
-

--slide-out-left-short-animation

-
-
- -

Other

-
- -
-
-
-
-

--rotate-animation

-
- -
-
-
-
-

--shake-animation

-
- -
-
-
-
-

--pulse-animation

-
- -
-
-
-
-

--blink-animation

-
- -
-
-
-
-

--elevate-exit-animation

-
-
- - - - `, - ); - -export const Basic = Template.bind({}); diff --git a/packages/core/src/stories/motions/transitions/transitions-collapse.stories.tsx b/packages/core/src/stories/motions/transitions/transitions-collapse.stories.tsx new file mode 100644 index 000000000..f835313b7 --- /dev/null +++ b/packages/core/src/stories/motions/transitions/transitions-collapse.stories.tsx @@ -0,0 +1,91 @@ +import formatHtmlPreview from '../../formatHtmlPreview'; + +export default { + title: 'Motions/Transitions/Collapse', + parameters: { + layout: 'fullscreen', + design: [ + { + name: 'Figma', + type: 'figma', + url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1', + }, + ], + }, +}; + +const Template = () => + formatHtmlPreview( + ` +
+

Collapse

+
+
+
+
+
+
+
+

--tds-motion-collapse-in

+
+ +
+
+
+
+
+
+

--tds-motion-collapse-out

+
+
+
+ + + `, + ); + +export const Collapse = Template.bind({}); diff --git a/packages/core/src/stories/motions/transitions/transitions-fade.stories.tsx b/packages/core/src/stories/motions/transitions/transitions-fade.stories.tsx new file mode 100644 index 000000000..d095ebdcd --- /dev/null +++ b/packages/core/src/stories/motions/transitions/transitions-fade.stories.tsx @@ -0,0 +1,82 @@ +import formatHtmlPreview from '../../formatHtmlPreview'; + +export default { + title: 'Motions/Transitions/Fade', + parameters: { + layout: 'fullscreen', + design: [ + { + name: 'Figma', + type: 'figma', + url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1', + }, + ], + }, +}; + +const Template = () => + formatHtmlPreview( + ` +
+

Fade

+
+
+
+
+
+

--tds-motion-fade-in

+
+ +
+
+
+
+

--tds-motion-fade-out

+
+
+
+ + + `, + ); + +export const Fade = Template.bind({}); diff --git a/packages/core/src/stories/motions/transitions/transitions-other.stories.tsx b/packages/core/src/stories/motions/transitions/transitions-other.stories.tsx new file mode 100644 index 000000000..2aee8761b --- /dev/null +++ b/packages/core/src/stories/motions/transitions/transitions-other.stories.tsx @@ -0,0 +1,140 @@ +import formatHtmlPreview from '../../formatHtmlPreview'; + +export default { + title: 'Motions/Transitions/Other', + parameters: { + layout: 'fullscreen', + design: [ + { + name: 'Figma', + type: 'figma', + url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1', + }, + ], + }, +}; + +const Template = () => + formatHtmlPreview( + ` +
+

Other

+
+ +
+
+
+
+

--tds-motion-rotate

+
+ + +
+
+
+
+

-tds-motion-shake

+
+ + +
+
+
+
+

-tds-motion-pulse

+
+ + +
+
+
+
+

-tds-motion-blink

+
+ + +
+
+
+
+

-tds-motion-elevate

+
+
+
+ + + `, + ); + +export const Other = Template.bind({}); diff --git a/packages/core/src/stories/motions/transitions/transitions-slide.stories.tsx b/packages/core/src/stories/motions/transitions/transitions-slide.stories.tsx new file mode 100644 index 000000000..afa5ebdd9 --- /dev/null +++ b/packages/core/src/stories/motions/transitions/transitions-slide.stories.tsx @@ -0,0 +1,182 @@ +import formatHtmlPreview from '../../formatHtmlPreview'; + +export default { + title: 'Motions/Transitions/Slide', + parameters: { + layout: 'fullscreen', + design: [ + { + name: 'Figma', + type: 'figma', + url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1', + }, + ], + }, +}; + +const Template = () => + formatHtmlPreview( + ` +
+

Slide

+
+ +
+
+
+
+

--tds-motion-slide-in-top

+
+
+
+
+
+

--tds-motion-slide-in-right

+
+
+
+
+
+

--tds-motion-slide-in-bottom

+
+
+
+
+
+

--tds-motion-slide-in-left

+
+
+ +
+ +
+
+
+
+

--tds-motion-slide-out-top

+
+
+
+
+
+

--tds-motion-slide-out-right

+
+
+
+
+
+

--tds-motion-slide-out-bottom

+
+
+
+
+
+

--tds-motion-slide-out-left

+
+
+
+ + + `, + ); + +export const Slide = Template.bind({}); diff --git a/packages/core/src/stories/motions/transitions/transitions-slideshort.stories.tsx b/packages/core/src/stories/motions/transitions/transitions-slideshort.stories.tsx new file mode 100644 index 000000000..75952986f --- /dev/null +++ b/packages/core/src/stories/motions/transitions/transitions-slideshort.stories.tsx @@ -0,0 +1,182 @@ +import formatHtmlPreview from '../../formatHtmlPreview'; + +export default { + title: 'Motions/Transitions/Slide Short', + parameters: { + layout: 'fullscreen', + design: [ + { + name: 'Figma', + type: 'figma', + url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1', + }, + ], + }, +}; + +const Template = () => + formatHtmlPreview( + ` +
+

Slide Short

+
+ +
+
+
+
+

--tds-motion-slide-in-short-top

+
+
+
+
+
+

--tds-motion-slide-in-short-right

+
+
+
+
+
+

--tds-motion-slide-in-short-bottom

+
+
+
+
+
+

--tds-motion-slide-in-short-left

+
+
+ +
+ +
+
+
+
+

--tds-motion-slide-out-short-top

+
+
+
+
+
+

--tds-motion-slide-out-short-right

+
+
+
+
+
+

--tds-motion-slide-out-short-bottom

+
+
+
+
+
+

--tds-motion-slide-out-short-left

+
+
+
+ + + `, + ); + +export const SlideShort = Template.bind({}); diff --git a/packages/core/src/stories/motions/transitions/transitions-zoom.stories.tsx b/packages/core/src/stories/motions/transitions/transitions-zoom.stories.tsx new file mode 100644 index 000000000..688fa7d37 --- /dev/null +++ b/packages/core/src/stories/motions/transitions/transitions-zoom.stories.tsx @@ -0,0 +1,81 @@ +import formatHtmlPreview from '../../formatHtmlPreview'; + +export default { + title: 'Motions/Transitions/Zoom', + parameters: { + layout: 'fullscreen', + design: [ + { + name: 'Figma', + type: 'figma', + url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1', + }, + ], + }, +}; + +const Template = () => + formatHtmlPreview( + ` +
+

Zoom

+
+
+
+
+
+

--tds-motion-zoom-in

+
+ +
+
+
+
+

--tds-motion-zoom-out

+
+
+
+ + + `, + ); + +export const Zoom = Template.bind({}); From e29adac5049821ea3a8071dfd31b073d4e76d323 Mon Sep 17 00:00:00 2001 From: Charles Krook Date: Thu, 16 Jan 2025 11:55:59 +0100 Subject: [PATCH 4/4] fix: update Figma design links in motion stories --- .../motions/animations/animations-classes.stories.ts | 9 +-------- .../motions/transitions/transitions-collapse.stories.tsx | 2 +- .../motions/transitions/transitions-fade.stories.tsx | 2 +- .../motions/transitions/transitions-other.stories.tsx | 2 +- .../motions/transitions/transitions-slide.stories.tsx | 2 +- .../transitions/transitions-slideshort.stories.tsx | 2 +- .../motions/transitions/transitions-zoom.stories.tsx | 3 +-- 7 files changed, 7 insertions(+), 15 deletions(-) diff --git a/packages/core/src/stories/motions/animations/animations-classes.stories.ts b/packages/core/src/stories/motions/animations/animations-classes.stories.ts index 6919d6a2c..fc1838796 100644 --- a/packages/core/src/stories/motions/animations/animations-classes.stories.ts +++ b/packages/core/src/stories/motions/animations/animations-classes.stories.ts @@ -3,19 +3,12 @@ import formatHtmlPreview from '../../formatHtmlPreview'; export default { title: 'Motions/Animations/All', parameters: { - notes: {}, layout: 'fullscreen', - docs: {}, design: [ { name: 'Figma', type: 'figma', - url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1', - }, - { - name: 'Link', - type: 'link', - url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1', + url: 'https://www.figma.com/design/3vglvmuE8d0wXQRhFM0Op6/Tegel-Motions?node-id=9-167&p=f&t=J2E8IQiExfDl7AHR-0', }, ], }, diff --git a/packages/core/src/stories/motions/transitions/transitions-collapse.stories.tsx b/packages/core/src/stories/motions/transitions/transitions-collapse.stories.tsx index f835313b7..94cf89371 100644 --- a/packages/core/src/stories/motions/transitions/transitions-collapse.stories.tsx +++ b/packages/core/src/stories/motions/transitions/transitions-collapse.stories.tsx @@ -8,7 +8,7 @@ export default { { name: 'Figma', type: 'figma', - url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1', + url: 'https://www.figma.com/design/3vglvmuE8d0wXQRhFM0Op6/Tegel-Motions?node-id=9-167&p=f&t=J2E8IQiExfDl7AHR-0', }, ], }, diff --git a/packages/core/src/stories/motions/transitions/transitions-fade.stories.tsx b/packages/core/src/stories/motions/transitions/transitions-fade.stories.tsx index d095ebdcd..3e7aaa0e0 100644 --- a/packages/core/src/stories/motions/transitions/transitions-fade.stories.tsx +++ b/packages/core/src/stories/motions/transitions/transitions-fade.stories.tsx @@ -8,7 +8,7 @@ export default { { name: 'Figma', type: 'figma', - url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1', + url: 'https://www.figma.com/design/3vglvmuE8d0wXQRhFM0Op6/Tegel-Motions?node-id=9-167&p=f&t=J2E8IQiExfDl7AHR-0', }, ], }, diff --git a/packages/core/src/stories/motions/transitions/transitions-other.stories.tsx b/packages/core/src/stories/motions/transitions/transitions-other.stories.tsx index 2aee8761b..a9a834a7f 100644 --- a/packages/core/src/stories/motions/transitions/transitions-other.stories.tsx +++ b/packages/core/src/stories/motions/transitions/transitions-other.stories.tsx @@ -8,7 +8,7 @@ export default { { name: 'Figma', type: 'figma', - url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1', + url: 'https://www.figma.com/design/3vglvmuE8d0wXQRhFM0Op6/Tegel-Motions?node-id=9-167&p=f&t=J2E8IQiExfDl7AHR-0', }, ], }, diff --git a/packages/core/src/stories/motions/transitions/transitions-slide.stories.tsx b/packages/core/src/stories/motions/transitions/transitions-slide.stories.tsx index afa5ebdd9..6aacc2d8d 100644 --- a/packages/core/src/stories/motions/transitions/transitions-slide.stories.tsx +++ b/packages/core/src/stories/motions/transitions/transitions-slide.stories.tsx @@ -8,7 +8,7 @@ export default { { name: 'Figma', type: 'figma', - url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1', + url: 'https://www.figma.com/design/3vglvmuE8d0wXQRhFM0Op6/Tegel-Motions?node-id=9-167&p=f&t=J2E8IQiExfDl7AHR-0', }, ], }, diff --git a/packages/core/src/stories/motions/transitions/transitions-slideshort.stories.tsx b/packages/core/src/stories/motions/transitions/transitions-slideshort.stories.tsx index 75952986f..0f456ca51 100644 --- a/packages/core/src/stories/motions/transitions/transitions-slideshort.stories.tsx +++ b/packages/core/src/stories/motions/transitions/transitions-slideshort.stories.tsx @@ -8,7 +8,7 @@ export default { { name: 'Figma', type: 'figma', - url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1', + url: 'https://www.figma.com/design/3vglvmuE8d0wXQRhFM0Op6/Tegel-Motions?node-id=9-167&p=f&t=J2E8IQiExfDl7AHR-0', }, ], }, diff --git a/packages/core/src/stories/motions/transitions/transitions-zoom.stories.tsx b/packages/core/src/stories/motions/transitions/transitions-zoom.stories.tsx index 688fa7d37..5719a0fa6 100644 --- a/packages/core/src/stories/motions/transitions/transitions-zoom.stories.tsx +++ b/packages/core/src/stories/motions/transitions/transitions-zoom.stories.tsx @@ -3,12 +3,11 @@ import formatHtmlPreview from '../../formatHtmlPreview'; export default { title: 'Motions/Transitions/Zoom', parameters: { - layout: 'fullscreen', design: [ { name: 'Figma', type: 'figma', - url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=11142%3A42941&t=Ne6myqwca5m00de7-1', + url: 'https://www.figma.com/design/3vglvmuE8d0wXQRhFM0Op6/Tegel-Motions?node-id=9-167&p=f&t=J2E8IQiExfDl7AHR-0', }, ], },