@salutejs/plasma-new-hope 0.271.0-canary.1778.13392217490.0 → 0.271.0-dev.0
Sign up to get free protection for your applications and to get access to all the features.
- package/cjs/components/Notification/Notification.css +11 -11
- package/cjs/components/Notification/Notification.js +3 -7
- package/cjs/components/Notification/Notification.js.map +1 -1
- package/cjs/components/Notification/Notification.styles.js +26 -42
- package/cjs/components/Notification/Notification.styles.js.map +1 -1
- package/cjs/components/Notification/{Notification.styles_gk4bgs.css → Notification.styles_1u5gusp.css} +2 -2
- package/cjs/components/Notification/Notification.tokens.js +0 -1
- package/cjs/components/Notification/Notification.tokens.js.map +1 -1
- package/cjs/components/Notification/Notification.types.js.map +1 -1
- package/cjs/components/Notification/NotificationsPortal.js +0 -1
- package/cjs/components/Notification/NotificationsPortal.js.map +1 -1
- package/cjs/components/Notification/NotificationsProvider.css +11 -11
- package/cjs/index.css +11 -11
- package/emotion/cjs/components/Notification/Notification.js +3 -7
- package/emotion/cjs/components/Notification/Notification.styles.js +26 -32
- package/emotion/cjs/components/Notification/Notification.tokens.js +0 -1
- package/emotion/cjs/components/Notification/NotificationsPortal.js +1 -2
- package/emotion/cjs/examples/plasma_b2c/components/Notification/Notification.config.js +7 -11
- package/emotion/cjs/examples/plasma_b2c/components/Notification/Notification.stories.tsx +3 -35
- package/emotion/cjs/examples/plasma_b2c/components/Tokens/Tokens.stories.tsx +2 -2
- package/emotion/cjs/examples/plasma_web/components/Notification/Notification.config.js +7 -11
- package/emotion/cjs/examples/plasma_web/components/Notification/Notification.stories.tsx +2 -18
- package/emotion/cjs/examples/plasma_web/components/Tokens/Tokens.stories.tsx +2 -2
- package/emotion/es/components/Notification/Notification.js +3 -7
- package/emotion/es/components/Notification/Notification.styles.js +26 -32
- package/emotion/es/components/Notification/Notification.tokens.js +0 -1
- package/emotion/es/components/Notification/NotificationsPortal.js +1 -2
- package/emotion/es/examples/plasma_b2c/components/Notification/Notification.config.js +7 -11
- package/emotion/es/examples/plasma_b2c/components/Notification/Notification.stories.tsx +3 -35
- package/emotion/es/examples/plasma_b2c/components/Tokens/Tokens.stories.tsx +2 -2
- package/emotion/es/examples/plasma_web/components/Notification/Notification.config.js +7 -11
- package/emotion/es/examples/plasma_web/components/Notification/Notification.stories.tsx +2 -18
- package/emotion/es/examples/plasma_web/components/Tokens/Tokens.stories.tsx +2 -2
- package/es/components/Notification/Notification.css +11 -11
- package/es/components/Notification/Notification.js +3 -7
- package/es/components/Notification/Notification.js.map +1 -1
- package/es/components/Notification/Notification.styles.js +26 -42
- package/es/components/Notification/Notification.styles.js.map +1 -1
- package/es/components/Notification/{Notification.styles_gk4bgs.css → Notification.styles_1u5gusp.css} +2 -2
- package/es/components/Notification/Notification.tokens.js +0 -1
- package/es/components/Notification/Notification.tokens.js.map +1 -1
- package/es/components/Notification/Notification.types.js.map +1 -1
- package/es/components/Notification/NotificationsPortal.js +0 -1
- package/es/components/Notification/NotificationsPortal.js.map +1 -1
- package/es/components/Notification/NotificationsProvider.css +11 -11
- package/es/index.css +11 -11
- package/package.json +2 -2
- package/styled-components/cjs/components/Notification/Notification.js +3 -7
- package/styled-components/cjs/components/Notification/Notification.styles.js +15 -21
- package/styled-components/cjs/components/Notification/Notification.tokens.js +0 -1
- package/styled-components/cjs/components/Notification/NotificationsPortal.js +0 -1
- package/styled-components/cjs/examples/plasma_b2c/components/Notification/Notification.config.js +1 -5
- package/styled-components/cjs/examples/plasma_b2c/components/Notification/Notification.stories.tsx +3 -35
- package/styled-components/cjs/examples/plasma_b2c/components/Tokens/Tokens.stories.tsx +2 -2
- package/styled-components/cjs/examples/plasma_web/components/Notification/Notification.config.js +1 -5
- package/styled-components/cjs/examples/plasma_web/components/Notification/Notification.stories.tsx +2 -18
- package/styled-components/cjs/examples/plasma_web/components/Tokens/Tokens.stories.tsx +2 -2
- package/styled-components/es/components/Notification/Notification.js +3 -7
- package/styled-components/es/components/Notification/Notification.styles.js +15 -21
- package/styled-components/es/components/Notification/Notification.tokens.js +0 -1
- package/styled-components/es/components/Notification/NotificationsPortal.js +0 -1
- package/styled-components/es/examples/plasma_b2c/components/Notification/Notification.config.js +1 -5
- package/styled-components/es/examples/plasma_b2c/components/Notification/Notification.stories.tsx +3 -35
- package/styled-components/es/examples/plasma_b2c/components/Tokens/Tokens.stories.tsx +2 -2
- package/styled-components/es/examples/plasma_web/components/Notification/Notification.config.js +1 -5
- package/styled-components/es/examples/plasma_web/components/Notification/Notification.stories.tsx +2 -18
- package/styled-components/es/examples/plasma_web/components/Tokens/Tokens.stories.tsx +2 -2
- package/types/components/Notification/Notification.d.ts.map +1 -1
- package/types/components/Notification/Notification.styles.d.ts +2 -6
- package/types/components/Notification/Notification.styles.d.ts.map +1 -1
- package/types/components/Notification/Notification.tokens.d.ts +0 -1
- package/types/components/Notification/Notification.tokens.d.ts.map +1 -1
- package/types/components/Notification/Notification.types.d.ts +0 -8
- package/types/components/Notification/Notification.types.d.ts.map +1 -1
- package/types/components/Notification/NotificationsPortal.d.ts.map +1 -1
- package/types/examples/plasma_b2c/components/Notification/Notification.config.d.ts +0 -4
- package/types/examples/plasma_b2c/components/Notification/Notification.config.d.ts.map +1 -1
- package/types/examples/plasma_web/components/Notification/Notification.config.d.ts +0 -4
- package/types/examples/plasma_web/components/Notification/Notification.config.d.ts.map +1 -1
@@ -29,16 +29,16 @@
|
|
29
29
|
.Button_styles_8cvmld_s1rjh7ra__4694a0fa{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-self:var(--plasma-button-right-content-align-self);-ms-flex-item-align:var(--plasma-button-right-content-align);align-self:var(--plasma-button-right-content-align-self);margin:var(--s1rjh7ra-0);}
|
30
30
|
.Button_styles_8cvmld_b9ga1dj__4694a0fa{position:relative;display:-webkit-inline-box;display:-webkit-inline-flex;display:-ms-inline-flexbox;display:inline-flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;box-sizing:border-box;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;border:none;cursor:pointer;-webkit-tap-highlight-color:rgba(0,0,0,0);--plasma_private-btn-br:var(--plasma_computed-btn-br);border-radius:var(--plasma_private-btn-br);}a.Button_styles_8cvmld_b9ga1dj__4694a0fa{-webkit-text-decoration:none;text-decoration:none;}.Button_styles_8cvmld_b9ga1dj__4694a0fa.Button_styles_8cvmld_b9ga1dj__4694a0fa.Button_styles_8cvmld_buttonSquare__4694a0fa{width:var(--plasma-button-height);padding:0;}
|
31
31
|
|
32
|
-
.
|
33
|
-
.
|
34
|
-
.
|
35
|
-
.
|
36
|
-
.
|
37
|
-
.
|
38
|
-
.
|
39
|
-
.
|
40
|
-
.
|
41
|
-
.
|
42
|
-
.
|
32
|
+
.Notification_styles_1u5gusp_sb12p__dcdf3719{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}
|
33
|
+
.Notification_styles_1u5gusp_crvd7hm__dcdf3719{position:absolute;width:var(--plasma-notification-close-icon-button-size);height:var(--plasma-notification-close-icon-button-size);-webkit-align-self:var(--plasma-notification-horizontal-icon-close-align-self);-ms-flex-item-align:var(--plasma-notification-horizontal-icon-close-align);align-self:var(--plasma-notification-horizontal-icon-close-align-self);color:var(--plasma-notification-close-icon-color);}.Notification_styles_1u5gusp_crvd7hm__dcdf3719:hover{color:var(--plasma-notification-close-icon-color-on-hover);}.Notification_styles_1u5gusp_crvd7hm__dcdf3719.Notification_styles_1u5gusp_notificationLayoutHorizontal__dcdf3719{position:relative;}
|
34
|
+
.Notification_styles_1u5gusp_wg1ga5v__dcdf3719{position:relative;box-sizing:border-box;background:var(--plasma-notification-backgorund);border-radius:var(--plasma-notification-border-radius);border:var(--plasma-notification-border-width) solid var(--plasma-notification-border-color);}.Notification_styles_1u5gusp_wg1ga5v__dcdf3719.Notification_styles_1u5gusp_notificationLayoutHorizontal__dcdf3719{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--plasma-notification-horizontal-layout-gap);}
|
35
|
+
.Notification_styles_1u5gusp_b1amsn8a__dcdf3719{margin-top:var(--plasma-notification-buttons-margin-top);margin-left:var(--b1amsn8a-0);-webkit-align-self:var(--plasma-notification-horizontal-actions-align-self);-ms-flex-item-align:var(--plasma-notification-horizontal-actions-align);align-self:var(--plasma-notification-horizontal-actions-align-self);}.Notification_styles_1u5gusp_b1amsn8a__dcdf3719.Notification_styles_1u5gusp_notificationLayoutHorizontal__dcdf3719{margin-top:unset;margin-left:unset;}
|
36
|
+
.Notification_styles_1u5gusp_i14raqr9__dcdf3719{width:var(--plasma-notification-content-left-icon-size);height:var(--plasma-notification-content-left-icon-size);-webkit-align-self:var(--plasma-notification-horizontal-icon-left-align-self);-ms-flex-item-align:var(--plasma-notification-horizontal-icon-left-align);align-self:var(--plasma-notification-horizontal-icon-left-align-self);margin-right:var(--i14raqr9-0);margin-bottom:var(--i14raqr9-1);}.Notification_styles_1u5gusp_i14raqr9__dcdf3719.Notification_styles_1u5gusp_notificationLayoutHorizontal__dcdf3719{margin-right:var(--plasma-notification-horizontal-layout-left-icon-margin);margin-bottom:unset;}
|
37
|
+
.Notification_styles_1u5gusp_c157peez__dcdf3719{display:var(--c157peez-0);padding-top:var(--c157peez-1);}.Notification_styles_1u5gusp_c157peez__dcdf3719.Notification_styles_1u5gusp_notificationLayoutHorizontal__dcdf3719{padding:unset;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}
|
38
|
+
.Notification_styles_1u5gusp_t1vmb0f2__dcdf3719{padding:var(--plasma-notification-textbox-padding-top) var(--plasma-notification-textbox-padding-right) var(--plasma-notification-textbox-padding-bottom) var(--plasma-notification-textbox-padding-left);padding-top:var(--t1vmb0f2-0);padding-right:var(--t1vmb0f2-1);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;row-gap:var(--plasma-notification-textbox-gap);word-break:break-word;}.Notification_styles_1u5gusp_t1vmb0f2__dcdf3719.Notification_styles_1u5gusp_notificationLayoutHorizontal__dcdf3719{padding:unset;}
|
39
|
+
.Notification_styles_1u5gusp_s1k4e58v__dcdf3719{font-family:var(--plasma-notification-title-font-family);font-size:var(--plasma-notification-title-font-size);font-style:var(--plasma-notification-title-font-style);font-weight:var(--plasma-notification-title-font-weight);-webkit-letter-spacing:var(--plasma-notification-title-font-letter-spacing);-moz-letter-spacing:var(--plasma-notification-title-font-letter-spacing);-ms-letter-spacing:var(--plasma-notification-title-font-letter-spacing);letter-spacing:var(--plasma-notification-title-font-letter-spacing);line-height:var(--plasma-notification-title-font-line-height);overflow-wrap:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;}
|
40
|
+
.Notification_styles_1u5gusp_s92kmpm__dcdf3719{font-family:var(--plasma-notification-content-font-family);font-size:var(--plasma-notification-content-font-size);font-style:var(--plasma-notification-content-font-style);font-weight:var(--plasma-notification-content-font-weight);-webkit-letter-spacing:var(--plasma-notification-content-font-letter-spacing);-moz-letter-spacing:var(--plasma-notification-content-font-letter-spacing);-ms-letter-spacing:var(--plasma-notification-content-font-letter-spacing);letter-spacing:var(--plasma-notification-content-font-letter-spacing);line-height:var(--plasma-notification-content-font-line-height);overflow-wrap:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;color:var(--plasma-notification-content-color);}
|
41
|
+
.Notification_styles_1u5gusp_s18m0x6v__dcdf3719{margin-top:1rem;opacity:1;}.Notification_styles_1u5gusp_s18m0x6v__dcdf3719.Notification_styles_1u5gusp_s18m0x6v__dcdf3719.Notification_styles_1u5gusp_notificationItemOpened__dcdf3719{-webkit-animation:0.4s Notification_styles_1u5gusp_showAnimationS18m0x6v__dcdf3719 ease-out;animation:0.4s Notification_styles_1u5gusp_showAnimationS18m0x6v__dcdf3719 ease-out;}.Notification_styles_1u5gusp_s18m0x6v__dcdf3719.Notification_styles_1u5gusp_s18m0x6v__dcdf3719.Notification_styles_1u5gusp_notificationItemOpened__dcdf3719.Notification_styles_1u5gusp_notificationLeftToRightAnimation__dcdf3719{-webkit-animation:0.4s Notification_styles_1u5gusp_showLeftToRightAnimationS18m0x6v__dcdf3719 ease-out;animation:0.4s Notification_styles_1u5gusp_showLeftToRightAnimationS18m0x6v__dcdf3719 ease-out;}.Notification_styles_1u5gusp_s18m0x6v__dcdf3719.Notification_styles_1u5gusp_s18m0x6v__dcdf3719.Notification_styles_1u5gusp_notificationItemHidden__dcdf3719{-webkit-animation:0.4s Notification_styles_1u5gusp_hideAnimationS18m0x6v__dcdf3719 ease-out;animation:0.4s Notification_styles_1u5gusp_hideAnimationS18m0x6v__dcdf3719 ease-out;}.Notification_styles_1u5gusp_s18m0x6v__dcdf3719.Notification_styles_1u5gusp_s18m0x6v__dcdf3719.Notification_styles_1u5gusp_notificationItemHidden__dcdf3719.Notification_styles_1u5gusp_notificationLeftToRightAnimation__dcdf3719{-webkit-animation:0.4s Notification_styles_1u5gusp_hideLeftToRightAnimationS18m0x6v__dcdf3719 ease-out;animation:0.4s Notification_styles_1u5gusp_hideLeftToRightAnimationS18m0x6v__dcdf3719 ease-out;}@-webkit-keyframes Notification_styles_1u5gusp_showLeftToRightAnimationS18m0x6v__dcdf3719{0%{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);opacity:0;}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}}@keyframes Notification_styles_1u5gusp_showLeftToRightAnimationS18m0x6v__dcdf3719{0%{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);opacity:0;}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}}@-webkit-keyframes Notification_styles_1u5gusp_hideLeftToRightAnimationS18m0x6v__dcdf3719{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}100%{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);opacity:0;}}@keyframes Notification_styles_1u5gusp_hideLeftToRightAnimationS18m0x6v__dcdf3719{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}100%{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);opacity:0;}}@-webkit-keyframes Notification_styles_1u5gusp_showAnimationS18m0x6v__dcdf3719{0%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);opacity:0;}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}}@keyframes Notification_styles_1u5gusp_showAnimationS18m0x6v__dcdf3719{0%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);opacity:0;}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}}@-webkit-keyframes Notification_styles_1u5gusp_hideAnimationS18m0x6v__dcdf3719{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}100%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);opacity:0;}}@keyframes Notification_styles_1u5gusp_hideAnimationS18m0x6v__dcdf3719{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}100%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);opacity:0;}}
|
42
|
+
.Notification_styles_1u5gusp_sfe5ql2__dcdf3719{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;box-sizing:border-box;padding:0 1.5rem 1.5rem;max-height:100%;-webkit-align-items:var(--sfe5ql2-0);-webkit-box-align:var(--sfe5ql2-0);-ms-flex-align:var(--sfe5ql2-0);align-items:var(--sfe5ql2-0);}
|
43
43
|
|
44
44
|
.NotificationsPortal_6417q6_s19gbs9t__4166aeb6 > .NotificationsPortal_6417q6_popupBaseRoot__4166aeb6{overflow:hidden;}
|
package/es/index.css
CHANGED
@@ -353,17 +353,17 @@
|
|
353
353
|
|
354
354
|
.base_crlufx_bmb6i7f__c6cc97dd .base_crlufx_notificaitonContentBox__c6cc97dd.base_crlufx_notificationLayoutVertical__c6cc97dd{padding:var(--plasma-notification-content-padding-top) var(--plasma-notification-content-padding-right) var(--plasma-notification-content-padding-bottom) var(--plasma-notification-content-padding-left);}.base_crlufx_bmb6i7f__c6cc97dd .base_crlufx_notificaitonContentBox__c6cc97dd.base_crlufx_notificationLayoutVertical__c6cc97dd.base_crlufx_notificationWithoutIcon__c6cc97dd{padding-top:var(--plasma-notification-content-padding-top-without-icon);}.base_crlufx_bmb6i7f__c6cc97dd .base_crlufx_notificationCloseIcon__c6cc97dd.base_crlufx_notificationLayoutVertical__c6cc97dd{top:var(--plasma-notification-close-icon-top);right:var(--plasma-notification-close-icon-right);}
|
355
355
|
|
356
|
-
.
|
357
|
-
.
|
358
|
-
.
|
359
|
-
.
|
360
|
-
.
|
361
|
-
.
|
362
|
-
.
|
363
|
-
.
|
364
|
-
.
|
365
|
-
.
|
366
|
-
.
|
356
|
+
.Notification_styles_1u5gusp_sb12p__dcdf3719{width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;}
|
357
|
+
.Notification_styles_1u5gusp_crvd7hm__dcdf3719{position:absolute;width:var(--plasma-notification-close-icon-button-size);height:var(--plasma-notification-close-icon-button-size);-webkit-align-self:var(--plasma-notification-horizontal-icon-close-align-self);-ms-flex-item-align:var(--plasma-notification-horizontal-icon-close-align);align-self:var(--plasma-notification-horizontal-icon-close-align-self);color:var(--plasma-notification-close-icon-color);}.Notification_styles_1u5gusp_crvd7hm__dcdf3719:hover{color:var(--plasma-notification-close-icon-color-on-hover);}.Notification_styles_1u5gusp_crvd7hm__dcdf3719.Notification_styles_1u5gusp_notificationLayoutHorizontal__dcdf3719{position:relative;}
|
358
|
+
.Notification_styles_1u5gusp_wg1ga5v__dcdf3719{position:relative;box-sizing:border-box;background:var(--plasma-notification-backgorund);border-radius:var(--plasma-notification-border-radius);border:var(--plasma-notification-border-width) solid var(--plasma-notification-border-color);}.Notification_styles_1u5gusp_wg1ga5v__dcdf3719.Notification_styles_1u5gusp_notificationLayoutHorizontal__dcdf3719{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:var(--plasma-notification-horizontal-layout-gap);}
|
359
|
+
.Notification_styles_1u5gusp_b1amsn8a__dcdf3719{margin-top:var(--plasma-notification-buttons-margin-top);margin-left:var(--b1amsn8a-0);-webkit-align-self:var(--plasma-notification-horizontal-actions-align-self);-ms-flex-item-align:var(--plasma-notification-horizontal-actions-align);align-self:var(--plasma-notification-horizontal-actions-align-self);}.Notification_styles_1u5gusp_b1amsn8a__dcdf3719.Notification_styles_1u5gusp_notificationLayoutHorizontal__dcdf3719{margin-top:unset;margin-left:unset;}
|
360
|
+
.Notification_styles_1u5gusp_i14raqr9__dcdf3719{width:var(--plasma-notification-content-left-icon-size);height:var(--plasma-notification-content-left-icon-size);-webkit-align-self:var(--plasma-notification-horizontal-icon-left-align-self);-ms-flex-item-align:var(--plasma-notification-horizontal-icon-left-align);align-self:var(--plasma-notification-horizontal-icon-left-align-self);margin-right:var(--i14raqr9-0);margin-bottom:var(--i14raqr9-1);}.Notification_styles_1u5gusp_i14raqr9__dcdf3719.Notification_styles_1u5gusp_notificationLayoutHorizontal__dcdf3719{margin-right:var(--plasma-notification-horizontal-layout-left-icon-margin);margin-bottom:unset;}
|
361
|
+
.Notification_styles_1u5gusp_c157peez__dcdf3719{display:var(--c157peez-0);padding-top:var(--c157peez-1);}.Notification_styles_1u5gusp_c157peez__dcdf3719.Notification_styles_1u5gusp_notificationLayoutHorizontal__dcdf3719{padding:unset;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-align-items:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-flex:1;-webkit-flex-grow:1;-ms-flex-positive:1;flex-grow:1;}
|
362
|
+
.Notification_styles_1u5gusp_t1vmb0f2__dcdf3719{padding:var(--plasma-notification-textbox-padding-top) var(--plasma-notification-textbox-padding-right) var(--plasma-notification-textbox-padding-bottom) var(--plasma-notification-textbox-padding-left);padding-top:var(--t1vmb0f2-0);padding-right:var(--t1vmb0f2-1);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;row-gap:var(--plasma-notification-textbox-gap);word-break:break-word;}.Notification_styles_1u5gusp_t1vmb0f2__dcdf3719.Notification_styles_1u5gusp_notificationLayoutHorizontal__dcdf3719{padding:unset;}
|
363
|
+
.Notification_styles_1u5gusp_s1k4e58v__dcdf3719{font-family:var(--plasma-notification-title-font-family);font-size:var(--plasma-notification-title-font-size);font-style:var(--plasma-notification-title-font-style);font-weight:var(--plasma-notification-title-font-weight);-webkit-letter-spacing:var(--plasma-notification-title-font-letter-spacing);-moz-letter-spacing:var(--plasma-notification-title-font-letter-spacing);-ms-letter-spacing:var(--plasma-notification-title-font-letter-spacing);letter-spacing:var(--plasma-notification-title-font-letter-spacing);line-height:var(--plasma-notification-title-font-line-height);overflow-wrap:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;}
|
364
|
+
.Notification_styles_1u5gusp_s92kmpm__dcdf3719{font-family:var(--plasma-notification-content-font-family);font-size:var(--plasma-notification-content-font-size);font-style:var(--plasma-notification-content-font-style);font-weight:var(--plasma-notification-content-font-weight);-webkit-letter-spacing:var(--plasma-notification-content-font-letter-spacing);-moz-letter-spacing:var(--plasma-notification-content-font-letter-spacing);-ms-letter-spacing:var(--plasma-notification-content-font-letter-spacing);letter-spacing:var(--plasma-notification-content-font-letter-spacing);line-height:var(--plasma-notification-content-font-line-height);overflow-wrap:break-word;-webkit-hyphens:auto;-moz-hyphens:auto;-ms-hyphens:auto;hyphens:auto;color:var(--plasma-notification-content-color);}
|
365
|
+
.Notification_styles_1u5gusp_s18m0x6v__dcdf3719{margin-top:1rem;opacity:1;}.Notification_styles_1u5gusp_s18m0x6v__dcdf3719.Notification_styles_1u5gusp_s18m0x6v__dcdf3719.Notification_styles_1u5gusp_notificationItemOpened__dcdf3719{-webkit-animation:0.4s Notification_styles_1u5gusp_showAnimationS18m0x6v__dcdf3719 ease-out;animation:0.4s Notification_styles_1u5gusp_showAnimationS18m0x6v__dcdf3719 ease-out;}.Notification_styles_1u5gusp_s18m0x6v__dcdf3719.Notification_styles_1u5gusp_s18m0x6v__dcdf3719.Notification_styles_1u5gusp_notificationItemOpened__dcdf3719.Notification_styles_1u5gusp_notificationLeftToRightAnimation__dcdf3719{-webkit-animation:0.4s Notification_styles_1u5gusp_showLeftToRightAnimationS18m0x6v__dcdf3719 ease-out;animation:0.4s Notification_styles_1u5gusp_showLeftToRightAnimationS18m0x6v__dcdf3719 ease-out;}.Notification_styles_1u5gusp_s18m0x6v__dcdf3719.Notification_styles_1u5gusp_s18m0x6v__dcdf3719.Notification_styles_1u5gusp_notificationItemHidden__dcdf3719{-webkit-animation:0.4s Notification_styles_1u5gusp_hideAnimationS18m0x6v__dcdf3719 ease-out;animation:0.4s Notification_styles_1u5gusp_hideAnimationS18m0x6v__dcdf3719 ease-out;}.Notification_styles_1u5gusp_s18m0x6v__dcdf3719.Notification_styles_1u5gusp_s18m0x6v__dcdf3719.Notification_styles_1u5gusp_notificationItemHidden__dcdf3719.Notification_styles_1u5gusp_notificationLeftToRightAnimation__dcdf3719{-webkit-animation:0.4s Notification_styles_1u5gusp_hideLeftToRightAnimationS18m0x6v__dcdf3719 ease-out;animation:0.4s Notification_styles_1u5gusp_hideLeftToRightAnimationS18m0x6v__dcdf3719 ease-out;}@-webkit-keyframes Notification_styles_1u5gusp_showLeftToRightAnimationS18m0x6v__dcdf3719{0%{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);opacity:0;}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}}@keyframes Notification_styles_1u5gusp_showLeftToRightAnimationS18m0x6v__dcdf3719{0%{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);opacity:0;}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}}@-webkit-keyframes Notification_styles_1u5gusp_hideLeftToRightAnimationS18m0x6v__dcdf3719{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}100%{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);opacity:0;}}@keyframes Notification_styles_1u5gusp_hideLeftToRightAnimationS18m0x6v__dcdf3719{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}100%{-webkit-transform:translateX(-100%);-ms-transform:translateX(-100%);transform:translateX(-100%);opacity:0;}}@-webkit-keyframes Notification_styles_1u5gusp_showAnimationS18m0x6v__dcdf3719{0%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);opacity:0;}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}}@keyframes Notification_styles_1u5gusp_showAnimationS18m0x6v__dcdf3719{0%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);opacity:0;}100%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}}@-webkit-keyframes Notification_styles_1u5gusp_hideAnimationS18m0x6v__dcdf3719{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}100%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);opacity:0;}}@keyframes Notification_styles_1u5gusp_hideAnimationS18m0x6v__dcdf3719{0%{-webkit-transform:translateX(0);-ms-transform:translateX(0);transform:translateX(0);opacity:1;}100%{-webkit-transform:translateX(100%);-ms-transform:translateX(100%);transform:translateX(100%);opacity:0;}}
|
366
|
+
.Notification_styles_1u5gusp_sfe5ql2__dcdf3719{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-direction:column-reverse;-ms-flex-direction:column-reverse;flex-direction:column-reverse;box-sizing:border-box;padding:0 1.5rem 1.5rem;max-height:100%;-webkit-align-items:var(--sfe5ql2-0);-webkit-box-align:var(--sfe5ql2-0);-ms-flex-align:var(--sfe5ql2-0);align-items:var(--sfe5ql2-0);}
|
367
367
|
|
368
368
|
.base_dzs9wa_bd1gfvh__e42804c6{--plasma-panel-background:var(--plasma-drawer-background);--plasma-panel-shadow:var(--plasma-drawer-shadow);--plasma-panel-content-background-color:var(--plasma-drawer-content-background-color);}
|
369
369
|
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@salutejs/plasma-new-hope",
|
3
|
-
"version": "0.271.0-
|
3
|
+
"version": "0.271.0-dev.0",
|
4
4
|
"description": "Salute Design System blueprint",
|
5
5
|
"main": "cjs/index.js",
|
6
6
|
"module": "es/index.js",
|
@@ -132,5 +132,5 @@
|
|
132
132
|
"sideEffects": [
|
133
133
|
"*.css"
|
134
134
|
],
|
135
|
-
"gitHead": "
|
135
|
+
"gitHead": "e2a94f2dc796410607400b01a2fbb9816e7c7eaf"
|
136
136
|
}
|
@@ -17,7 +17,7 @@ var _base4 = /*#__PURE__*/require("./variations/_closeIconType/base");
|
|
17
17
|
var _Notification2 = /*#__PURE__*/require("./Notification.types");
|
18
18
|
var _Notification3 = /*#__PURE__*/require("./Notification.styles");
|
19
19
|
var _utils2 = /*#__PURE__*/require("./utils");
|
20
|
-
var _excluded = ["role", "title", "children", "actions", "view", "size", "iconPlacement", "showCloseIcon", "layout", "icon", "closeIconType", "
|
20
|
+
var _excluded = ["role", "title", "children", "actions", "view", "size", "iconPlacement", "showCloseIcon", "layout", "icon", "closeIconType", "onCloseButtonClick"];
|
21
21
|
function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
|
22
22
|
function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
|
23
23
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
@@ -42,8 +42,6 @@ var notificationRoot = exports.notificationRoot = function notificationRoot(Root
|
|
42
42
|
layout = _props$layout === void 0 ? _Notification2.layouts.vertical : _props$layout,
|
43
43
|
icon = props.icon,
|
44
44
|
closeIconType = props.closeIconType,
|
45
|
-
textColor = props.textColor,
|
46
|
-
iconColor = props.iconColor,
|
47
45
|
onCloseButtonClick = props.onCloseButtonClick,
|
48
46
|
rest = _objectWithoutProperties(props, _excluded);
|
49
47
|
var ariaLive = 'polite';
|
@@ -76,15 +74,13 @@ var notificationRoot = exports.notificationRoot = function notificationRoot(Root
|
|
76
74
|
className: (0, _utils.cx)(_Notification.classes.contentBox, (0, _utils2.getLayoutClass)(layout), withoutIconClass)
|
77
75
|
}, icon && /*#__PURE__*/_react["default"].createElement(_Notification3.IconWrapper, {
|
78
76
|
iconPlacement: IconPlacementInternal,
|
79
|
-
className: (0, _utils.cx)(_Notification.classes.icon, (0, _utils2.getLayoutClass)(layout))
|
80
|
-
iconColor: iconColor
|
77
|
+
className: (0, _utils.cx)(_Notification.classes.icon, (0, _utils2.getLayoutClass)(layout))
|
81
78
|
}, icon), /*#__PURE__*/_react["default"].createElement(_Notification3.TextBox, {
|
82
79
|
iconPlacement: IconPlacementInternal,
|
83
80
|
showCloseIcon: showCloseIcon,
|
84
81
|
className: (0, _utils.cx)(_Notification.classes.textbox, (0, _utils2.getLayoutClass)(layout))
|
85
82
|
}, title && /*#__PURE__*/_react["default"].createElement(_Notification3.StyledTitle, {
|
86
|
-
className: _Notification.classes.title
|
87
|
-
textColor: textColor
|
83
|
+
className: _Notification.classes.title
|
88
84
|
}, title), content && /*#__PURE__*/_react["default"].createElement(_Notification3.StyledContent, {
|
89
85
|
className: _Notification.classes.text
|
90
86
|
}, content))), actions && /*#__PURE__*/_react["default"].createElement(_Notification3.ButtonsWrapper, {
|
@@ -32,41 +32,35 @@ var ButtonsWrapper = exports.ButtonsWrapper = /*#__PURE__*/_styledComponents["de
|
|
32
32
|
}, _Notification.tokens.horisontalActionsAlignSelf, _Notification.classes.horizontal);
|
33
33
|
var IconWrapper = exports.IconWrapper = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
34
34
|
componentId: "plasma-new-hope__sc-1iufy9r-3"
|
35
|
-
})(["width:var(", ");height:var(", ");align-self:var(", ");
|
36
|
-
var
|
37
|
-
return
|
35
|
+
})(["width:var(", ");height:var(", ");align-self:var(", ");margin-right:", ";margin-bottom:", ";&.", "{margin-right:var(", ");margin-bottom:unset;}"], _Notification.tokens.contentLeftIconSize, _Notification.tokens.contentLeftIconSize, _Notification.tokens.horisontalIconLeftAlignSelf, function (_ref2) {
|
36
|
+
var iconPlacement = _ref2.iconPlacement;
|
37
|
+
return iconPlacement === _Notification2.placements.left ? "var(".concat(_Notification.tokens.contentLeftIconMargin, ")") : 'unset';
|
38
38
|
}, function (_ref3) {
|
39
39
|
var iconPlacement = _ref3.iconPlacement;
|
40
|
-
return iconPlacement === _Notification2.placements.left ? "var(".concat(_Notification.tokens.contentLeftIconMargin, ")") : 'unset';
|
41
|
-
}, function (_ref4) {
|
42
|
-
var iconPlacement = _ref4.iconPlacement;
|
43
40
|
return iconPlacement === _Notification2.placements.top ? "var(".concat(_Notification.tokens.contentTopIconMargin, ")") : 'unset';
|
44
41
|
}, _Notification.classes.horizontal, _Notification.tokens.horizontalLayoutLeftIconMargin);
|
45
42
|
var ContentBox = exports.ContentBox = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
46
43
|
componentId: "plasma-new-hope__sc-1iufy9r-4"
|
47
|
-
})(["display:", ";padding-top:", ";&.", "{padding:unset;display:flex;align-items:center;flex-grow:1;}"], function (
|
48
|
-
var iconPlacement =
|
44
|
+
})(["display:", ";padding-top:", ";&.", "{padding:unset;display:flex;align-items:center;flex-grow:1;}"], function (_ref4) {
|
45
|
+
var iconPlacement = _ref4.iconPlacement;
|
49
46
|
return iconPlacement === _Notification2.placements.left ? 'flex' : 'block';
|
50
|
-
}, function (
|
51
|
-
var iconPlacement =
|
47
|
+
}, function (_ref5) {
|
48
|
+
var iconPlacement = _ref5.iconPlacement;
|
52
49
|
return iconPlacement ? "var(".concat(_Notification.tokens.contentPaddingTop, ")") : "var(".concat(_Notification.tokens.contentPaddingTopWithoutIcon, ")");
|
53
50
|
}, _Notification.classes.horizontal);
|
54
51
|
var TextBox = exports.TextBox = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
55
52
|
componentId: "plasma-new-hope__sc-1iufy9r-5"
|
56
|
-
})(["padding:var(", ") var(", ") var(", ") var(", ");padding-top:", ";padding-right:", ";display:flex;flex-direction:column;row-gap:var(", ");word-break:break-word;&.", "{padding:unset;}"], _Notification.tokens.textboxPaddingTop, _Notification.tokens.textboxPaddingRight, _Notification.tokens.textboxPaddingBottom, _Notification.tokens.textboxPaddingLeft, function (
|
57
|
-
var iconPlacement =
|
53
|
+
})(["padding:var(", ") var(", ") var(", ") var(", ");padding-top:", ";padding-right:", ";display:flex;flex-direction:column;row-gap:var(", ");word-break:break-word;&.", "{padding:unset;}"], _Notification.tokens.textboxPaddingTop, _Notification.tokens.textboxPaddingRight, _Notification.tokens.textboxPaddingBottom, _Notification.tokens.textboxPaddingLeft, function (_ref6) {
|
54
|
+
var iconPlacement = _ref6.iconPlacement;
|
58
55
|
return !iconPlacement || iconPlacement === _Notification2.placements.top ? "var(".concat(_Notification.tokens.textboxPaddingTopWithTopIcon, ")") : "var(".concat(_Notification.tokens.textboxPaddingTop, ")");
|
59
|
-
}, function (
|
60
|
-
var showCloseIcon =
|
61
|
-
iconPlacement =
|
56
|
+
}, function (_ref7) {
|
57
|
+
var showCloseIcon = _ref7.showCloseIcon,
|
58
|
+
iconPlacement = _ref7.iconPlacement;
|
62
59
|
return showCloseIcon && iconPlacement !== _Notification2.placements.top ? "var(".concat(_Notification.tokens.textboxPaddingRightWithCloseIcon, ")") : "var(".concat(_Notification.tokens.textboxPaddingRight, ")");
|
63
60
|
}, _Notification.tokens.textboxGap, _Notification.classes.horizontal);
|
64
61
|
var StyledTitle = exports.StyledTitle = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
65
62
|
componentId: "plasma-new-hope__sc-1iufy9r-6"
|
66
|
-
})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");", ";
|
67
|
-
var textColor = _ref9.textColor;
|
68
|
-
return textColor || "var(".concat(_Notification.tokens.titleColor, ")");
|
69
|
-
});
|
63
|
+
})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");", ";"], _Notification.tokens.titleFontFamily, _Notification.tokens.titleFontSize, _Notification.tokens.titleFontStyle, _Notification.tokens.titleFontWeight, _Notification.tokens.titleFontLetterSpacing, _Notification.tokens.titleFontLineHeight, /*#__PURE__*/String(_mixins.applyHyphens));
|
70
64
|
var StyledContent = exports.StyledContent = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
71
65
|
componentId: "plasma-new-hope__sc-1iufy9r-7"
|
72
66
|
})(["font-family:var(", ");font-size:var(", ");font-style:var(", ");font-weight:var(", ");letter-spacing:var(", ");line-height:var(", ");", ";color:var(", ");"], _Notification.tokens.contentFontFamily, _Notification.tokens.contentFontSize, _Notification.tokens.contentFontStyle, _Notification.tokens.contentFontWeight, _Notification.tokens.contentFontLetterSpacing, _Notification.tokens.contentFontLineHeight, /*#__PURE__*/String(_mixins.applyHyphens), _Notification.tokens.contentColor);
|
@@ -75,7 +69,7 @@ var StyledItemWrapper = exports.StyledItemWrapper = /*#__PURE__*/_styledComponen
|
|
75
69
|
})(["margin-top:1rem;opacity:1;&&.", "{animation:0.4s showAnimation ease-out;&.", "{animation:0.4s showLeftToRightAnimation ease-out;}}&&.", "{animation:0.4s hideAnimation ease-out;&.", "{animation:0.4s hideLeftToRightAnimation ease-out;}}@keyframes showLeftToRightAnimation{0%{transform:translateX(-100%);opacity:0;}100%{transform:translateX(0);opacity:1;}}@keyframes hideLeftToRightAnimation{0%{transform:translateX(0);opacity:1;}100%{transform:translateX(-100%);opacity:0;}}@keyframes showAnimation{0%{transform:translateX(100%);opacity:0;}100%{transform:translateX(0);opacity:1;}}@keyframes hideAnimation{0%{transform:translateX(0);opacity:1;}100%{transform:translateX(100%);opacity:0;}}"], _Notification.classes.notificationItemOpened, _Notification.classes.notificationLeftToRightAnimation, _Notification.classes.notificationItemHidden, _Notification.classes.notificationLeftToRightAnimation);
|
76
70
|
var StyledRoot = exports.StyledRoot = /*#__PURE__*/_styledComponents["default"].div.withConfig({
|
77
71
|
componentId: "plasma-new-hope__sc-1iufy9r-9"
|
78
|
-
})(["display:flex;flex-direction:column-reverse;box-sizing:border-box;padding:0 1.5rem 1.5rem;max-height:100%;align-items:", ";"], function (
|
79
|
-
var placement =
|
72
|
+
})(["display:flex;flex-direction:column-reverse;box-sizing:border-box;padding:0 1.5rem 1.5rem;max-height:100%;align-items:", ";"], function (_ref8) {
|
73
|
+
var placement = _ref8.placement;
|
80
74
|
return placement === 'bottom-left' ? 'flex-start' : 'flex-end';
|
81
75
|
});
|
@@ -51,7 +51,6 @@ var tokens = exports.tokens = {
|
|
51
51
|
textboxGap: '--plasma-notification-textbox-gap',
|
52
52
|
buttonsMarginTop: '--plasma-notification-buttons-margin-top',
|
53
53
|
buttonsMarginLeft: '--plasma-notification-buttons-margin-left',
|
54
|
-
contentLeftIconColor: '--plasma-notification-content-left-icon-color',
|
55
54
|
contentLeftIconSize: '--plasma-notification-content-left-icon-size',
|
56
55
|
contentLeftIconMargin: '--plasma-notification-content-left-icon-margin',
|
57
56
|
contentTopIconMargin: '--plasma-notification-content-top-icon-margin',
|
@@ -42,7 +42,6 @@ var NotificationsPortal = exports.NotificationsPortal = function NotificationsPo
|
|
42
42
|
var Notification = (0, _react.useMemo)(function () {
|
43
43
|
return (0, _engines.component)(config);
|
44
44
|
}, []);
|
45
|
-
console.log(notifications);
|
46
45
|
return /*#__PURE__*/_react["default"].createElement(_Popup.PopupProvider, {
|
47
46
|
UNSAFE_SSR_ENABLED: UNSAFE_SSR_ENABLED
|
48
47
|
}, notifications.length > 0 && /*#__PURE__*/_react["default"].createElement(StyledPopup, {
|
package/styled-components/cjs/examples/plasma_b2c/components/Notification/Notification.config.js
CHANGED
@@ -13,11 +13,7 @@ var config = exports.config = {
|
|
13
13
|
},
|
14
14
|
variations: {
|
15
15
|
view: {
|
16
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-
|
17
|
-
negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-negative);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--surface-transparent-card);", ":0.75rem;", ":0.375rem;", ":0.125rem;", ":0.25rem;", ":0rem;", ":0.25rem;", ":0.25rem;", ":1rem;", ":0.1875rem;", ":0.125rem;", ":0.375rem;", ":0.125rem;", ":1.625rem;", ":0.25rem;", ":0.5rem;", ":0.5rem;", ":0.375rem;", ":1.5rem;", ":0.375rem;", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--text-tertiary);", ":var(--text-primary);", ":0.375rem;", ":0.75rem;", ":0.8125rem 0.5rem 0.8125rem 0.875rem;"], _Notification.notificationTokens.titleColor, _Notification.notificationTokens.contentLeftIconColor, _Notification.notificationTokens.contentColor, _Notification.notificationTokens.background, _Notification.notificationTokens.borderRadius, _Notification.notificationTokens.padding, _Notification.notificationTokens.contentPaddingTop, _Notification.notificationTokens.contentPaddingRight, _Notification.notificationTokens.contentPaddingBottom, _Notification.notificationTokens.contentPaddingLeft, _Notification.notificationTokens.contentPaddingTopWithoutIcon, _Notification.notificationTokens.horizontalLayoutRightPaddingWithoutCloseIcon, _Notification.notificationTokens.textboxPaddingTop, _Notification.notificationTokens.textboxPaddingRight, _Notification.notificationTokens.textboxPaddingBottom, _Notification.notificationTokens.textboxPaddingLeft, _Notification.notificationTokens.textboxPaddingRightWithCloseIcon, _Notification.notificationTokens.textboxGap, _Notification.notificationTokens.closeIconTop, _Notification.notificationTokens.closeIconRight, _Notification.notificationTokens.buttonsMarginTop, _Notification.notificationTokens.contentLeftIconSize, _Notification.notificationTokens.contentLeftIconMargin, _Notification.notificationTokens.contentTopIconMargin, _Notification.notificationTokens.contentFontFamily, _Notification.notificationTokens.contentFontSize, _Notification.notificationTokens.contentFontStyle, _Notification.notificationTokens.contentFontWeight, _Notification.notificationTokens.contentFontLetterSpacing, _Notification.notificationTokens.contentFontLineHeight, _Notification.notificationTokens.titleFontFamily, _Notification.notificationTokens.titleFontSize, _Notification.notificationTokens.titleFontStyle, _Notification.notificationTokens.titleFontWeight, _Notification.notificationTokens.titleFontLetterSpacing, _Notification.notificationTokens.titleFontLineHeight, _Notification.notificationTokens.closeIconColor, _Notification.notificationTokens.closeIconColorOnHover, _Notification.notificationTokens.horizontalLayoutGap, _Notification.notificationTokens.horizontalLayoutLeftIconMargin, _Notification.notificationTokens.paddingOneLineTextbox),
|
18
|
-
positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-positive);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--surface-transparent-card);", ":0.75rem;", ":0.375rem;", ":0.125rem;", ":0.25rem;", ":0rem;", ":0.25rem;", ":0.25rem;", ":1rem;", ":0.1875rem;", ":0.125rem;", ":0.375rem;", ":0.125rem;", ":1.625rem;", ":0.25rem;", ":0.5rem;", ":0.5rem;", ":0.375rem;", ":1.5rem;", ":0.375rem;", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--text-tertiary);", ":var(--text-primary);", ":0.375rem;", ":0.75rem;", ":0.8125rem 0.5rem 0.8125rem 0.875rem;"], _Notification.notificationTokens.titleColor, _Notification.notificationTokens.contentLeftIconColor, _Notification.notificationTokens.contentColor, _Notification.notificationTokens.background, _Notification.notificationTokens.borderRadius, _Notification.notificationTokens.padding, _Notification.notificationTokens.contentPaddingTop, _Notification.notificationTokens.contentPaddingRight, _Notification.notificationTokens.contentPaddingBottom, _Notification.notificationTokens.contentPaddingLeft, _Notification.notificationTokens.contentPaddingTopWithoutIcon, _Notification.notificationTokens.horizontalLayoutRightPaddingWithoutCloseIcon, _Notification.notificationTokens.textboxPaddingTop, _Notification.notificationTokens.textboxPaddingRight, _Notification.notificationTokens.textboxPaddingBottom, _Notification.notificationTokens.textboxPaddingLeft, _Notification.notificationTokens.textboxPaddingRightWithCloseIcon, _Notification.notificationTokens.textboxGap, _Notification.notificationTokens.closeIconTop, _Notification.notificationTokens.closeIconRight, _Notification.notificationTokens.buttonsMarginTop, _Notification.notificationTokens.contentLeftIconSize, _Notification.notificationTokens.contentLeftIconMargin, _Notification.notificationTokens.contentTopIconMargin, _Notification.notificationTokens.contentFontFamily, _Notification.notificationTokens.contentFontSize, _Notification.notificationTokens.contentFontStyle, _Notification.notificationTokens.contentFontWeight, _Notification.notificationTokens.contentFontLetterSpacing, _Notification.notificationTokens.contentFontLineHeight, _Notification.notificationTokens.titleFontFamily, _Notification.notificationTokens.titleFontSize, _Notification.notificationTokens.titleFontStyle, _Notification.notificationTokens.titleFontWeight, _Notification.notificationTokens.titleFontLetterSpacing, _Notification.notificationTokens.titleFontLineHeight, _Notification.notificationTokens.closeIconColor, _Notification.notificationTokens.closeIconColorOnHover, _Notification.notificationTokens.horizontalLayoutGap, _Notification.notificationTokens.horizontalLayoutLeftIconMargin, _Notification.notificationTokens.paddingOneLineTextbox),
|
19
|
-
warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-warning);", ":var(--text-warning);", ":var(--text-secondary);", ":var(--surface-transparent-card);", ":0.75rem;", ":0.375rem;", ":0.125rem;", ":0.25rem;", ":0rem;", ":0.25rem;", ":0.25rem;", ":1rem;", ":0.1875rem;", ":0.125rem;", ":0.375rem;", ":0.125rem;", ":1.625rem;", ":0.25rem;", ":0.5rem;", ":0.5rem;", ":0.375rem;", ":1.5rem;", ":0.375rem;", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--text-tertiary);", ":var(--text-primary);", ":0.375rem;", ":0.75rem;", ":0.8125rem 0.5rem 0.8125rem 0.875rem;"], _Notification.notificationTokens.titleColor, _Notification.notificationTokens.contentLeftIconColor, _Notification.notificationTokens.contentColor, _Notification.notificationTokens.background, _Notification.notificationTokens.borderRadius, _Notification.notificationTokens.padding, _Notification.notificationTokens.contentPaddingTop, _Notification.notificationTokens.contentPaddingRight, _Notification.notificationTokens.contentPaddingBottom, _Notification.notificationTokens.contentPaddingLeft, _Notification.notificationTokens.contentPaddingTopWithoutIcon, _Notification.notificationTokens.horizontalLayoutRightPaddingWithoutCloseIcon, _Notification.notificationTokens.textboxPaddingTop, _Notification.notificationTokens.textboxPaddingRight, _Notification.notificationTokens.textboxPaddingBottom, _Notification.notificationTokens.textboxPaddingLeft, _Notification.notificationTokens.textboxPaddingRightWithCloseIcon, _Notification.notificationTokens.textboxGap, _Notification.notificationTokens.closeIconTop, _Notification.notificationTokens.closeIconRight, _Notification.notificationTokens.buttonsMarginTop, _Notification.notificationTokens.contentLeftIconSize, _Notification.notificationTokens.contentLeftIconMargin, _Notification.notificationTokens.contentTopIconMargin, _Notification.notificationTokens.contentFontFamily, _Notification.notificationTokens.contentFontSize, _Notification.notificationTokens.contentFontStyle, _Notification.notificationTokens.contentFontWeight, _Notification.notificationTokens.contentFontLetterSpacing, _Notification.notificationTokens.contentFontLineHeight, _Notification.notificationTokens.titleFontFamily, _Notification.notificationTokens.titleFontSize, _Notification.notificationTokens.titleFontStyle, _Notification.notificationTokens.titleFontWeight, _Notification.notificationTokens.titleFontLetterSpacing, _Notification.notificationTokens.titleFontLineHeight, _Notification.notificationTokens.closeIconColor, _Notification.notificationTokens.closeIconColorOnHover, _Notification.notificationTokens.horizontalLayoutGap, _Notification.notificationTokens.horizontalLayoutLeftIconMargin, _Notification.notificationTokens.paddingOneLineTextbox),
|
20
|
-
info: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-info);", ":var(--text-info);", ":var(--text-secondary);", ":var(--surface-transparent-card);", ":0.75rem;", ":0.375rem;", ":0.125rem;", ":0.25rem;", ":0rem;", ":0.25rem;", ":0.25rem;", ":1rem;", ":0.1875rem;", ":0.125rem;", ":0.375rem;", ":0.125rem;", ":1.625rem;", ":0.25rem;", ":0.5rem;", ":0.5rem;", ":0.375rem;", ":1.5rem;", ":0.375rem;", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--text-tertiary);", ":var(--text-primary);", ":0.375rem;", ":0.75rem;", ":0.8125rem 0.5rem 0.8125rem 0.875rem;"], _Notification.notificationTokens.titleColor, _Notification.notificationTokens.contentLeftIconColor, _Notification.notificationTokens.contentColor, _Notification.notificationTokens.background, _Notification.notificationTokens.borderRadius, _Notification.notificationTokens.padding, _Notification.notificationTokens.contentPaddingTop, _Notification.notificationTokens.contentPaddingRight, _Notification.notificationTokens.contentPaddingBottom, _Notification.notificationTokens.contentPaddingLeft, _Notification.notificationTokens.contentPaddingTopWithoutIcon, _Notification.notificationTokens.horizontalLayoutRightPaddingWithoutCloseIcon, _Notification.notificationTokens.textboxPaddingTop, _Notification.notificationTokens.textboxPaddingRight, _Notification.notificationTokens.textboxPaddingBottom, _Notification.notificationTokens.textboxPaddingLeft, _Notification.notificationTokens.textboxPaddingRightWithCloseIcon, _Notification.notificationTokens.textboxGap, _Notification.notificationTokens.closeIconTop, _Notification.notificationTokens.closeIconRight, _Notification.notificationTokens.buttonsMarginTop, _Notification.notificationTokens.contentLeftIconSize, _Notification.notificationTokens.contentLeftIconMargin, _Notification.notificationTokens.contentTopIconMargin, _Notification.notificationTokens.contentFontFamily, _Notification.notificationTokens.contentFontSize, _Notification.notificationTokens.contentFontStyle, _Notification.notificationTokens.contentFontWeight, _Notification.notificationTokens.contentFontLetterSpacing, _Notification.notificationTokens.contentFontLineHeight, _Notification.notificationTokens.titleFontFamily, _Notification.notificationTokens.titleFontSize, _Notification.notificationTokens.titleFontStyle, _Notification.notificationTokens.titleFontWeight, _Notification.notificationTokens.titleFontLetterSpacing, _Notification.notificationTokens.titleFontLineHeight, _Notification.notificationTokens.closeIconColor, _Notification.notificationTokens.closeIconColorOnHover, _Notification.notificationTokens.horizontalLayoutGap, _Notification.notificationTokens.horizontalLayoutLeftIconMargin, _Notification.notificationTokens.paddingOneLineTextbox)
|
16
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--surface-transparent-card);", ":0.75rem;", ":0.375rem;", ":0.125rem;", ":0.25rem;", ":0rem;", ":0.25rem;", ":0.25rem;", ":1rem;", ":0.1875rem;", ":0.125rem;", ":0.375rem;", ":0.125rem;", ":1.625rem;", ":0.25rem;", ":0.5rem;", ":0.5rem;", ":0.375rem;", ":1.5rem;", ":0.375rem;", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--text-tertiary);", ":var(--text-primary);", ":0.375rem;", ":0.75rem;", ":0.8125rem 0.5rem 0.8125rem 0.875rem;"], _Notification.notificationTokens.contentColor, _Notification.notificationTokens.background, _Notification.notificationTokens.borderRadius, _Notification.notificationTokens.padding, _Notification.notificationTokens.contentPaddingTop, _Notification.notificationTokens.contentPaddingRight, _Notification.notificationTokens.contentPaddingBottom, _Notification.notificationTokens.contentPaddingLeft, _Notification.notificationTokens.contentPaddingTopWithoutIcon, _Notification.notificationTokens.horizontalLayoutRightPaddingWithoutCloseIcon, _Notification.notificationTokens.textboxPaddingTop, _Notification.notificationTokens.textboxPaddingRight, _Notification.notificationTokens.textboxPaddingBottom, _Notification.notificationTokens.textboxPaddingLeft, _Notification.notificationTokens.textboxPaddingRightWithCloseIcon, _Notification.notificationTokens.textboxGap, _Notification.notificationTokens.closeIconTop, _Notification.notificationTokens.closeIconRight, _Notification.notificationTokens.buttonsMarginTop, _Notification.notificationTokens.contentLeftIconSize, _Notification.notificationTokens.contentLeftIconMargin, _Notification.notificationTokens.contentTopIconMargin, _Notification.notificationTokens.contentFontFamily, _Notification.notificationTokens.contentFontSize, _Notification.notificationTokens.contentFontStyle, _Notification.notificationTokens.contentFontWeight, _Notification.notificationTokens.contentFontLetterSpacing, _Notification.notificationTokens.contentFontLineHeight, _Notification.notificationTokens.titleFontFamily, _Notification.notificationTokens.titleFontSize, _Notification.notificationTokens.titleFontStyle, _Notification.notificationTokens.titleFontWeight, _Notification.notificationTokens.titleFontLetterSpacing, _Notification.notificationTokens.titleFontLineHeight, _Notification.notificationTokens.closeIconColor, _Notification.notificationTokens.closeIconColorOnHover, _Notification.notificationTokens.horizontalLayoutGap, _Notification.notificationTokens.horizontalLayoutLeftIconMargin, _Notification.notificationTokens.paddingOneLineTextbox)
|
21
17
|
},
|
22
18
|
layout: {
|
23
19
|
horizontal: /*#__PURE__*/(0, _styledComponents.css)(["", ":25rem;", ":1rem 0.5rem 1rem 0.875rem;"], _Notification.notificationTokens.width, _Notification.notificationTokens.horizontalLayoutPadding),
|
package/styled-components/cjs/examples/plasma_b2c/components/Notification/Notification.stories.tsx
CHANGED
@@ -23,7 +23,6 @@ const texts = ['SSH ключ успешно скопирован', 'Нельзя
|
|
23
23
|
const size = ['xs', 'xxs'];
|
24
24
|
const iconPlacement = ['top', 'left'];
|
25
25
|
const notificationsPlacements = ['bottom-right', 'bottom-left'];
|
26
|
-
const views = ['default', 'negative', 'positive', 'warning', 'info'];
|
27
26
|
|
28
27
|
const longText = `JavaScript frameworks are an essential part of modern front-end web development,
|
29
28
|
providing developers with proven tools for building scalable, interactive web applications.
|
@@ -59,25 +58,14 @@ interface StoryDefaultProps {
|
|
59
58
|
closeIconType?: 'default' | 'thin';
|
60
59
|
iconPlacement: NotificationIconPlacement;
|
61
60
|
placement?: NotificationPlacement;
|
62
|
-
view: 'default';
|
63
61
|
}
|
64
62
|
|
65
|
-
const StoryDefault = ({
|
66
|
-
title,
|
67
|
-
children,
|
68
|
-
iconPlacement,
|
69
|
-
size,
|
70
|
-
layout,
|
71
|
-
showLeftIcon,
|
72
|
-
view,
|
73
|
-
...rest
|
74
|
-
}: StoryDefaultProps) => {
|
63
|
+
const StoryDefault = ({ title, children, iconPlacement, size, layout, showLeftIcon, ...rest }: StoryDefaultProps) => {
|
75
64
|
return (
|
76
65
|
<Notification
|
77
66
|
title={title}
|
78
|
-
icon={showLeftIcon ? <IconDisclosureRight
|
67
|
+
icon={showLeftIcon ? <IconDisclosureRight /> : ''}
|
79
68
|
iconPlacement={iconPlacement}
|
80
|
-
view={view}
|
81
69
|
actions={
|
82
70
|
<Button
|
83
71
|
text="text"
|
@@ -120,18 +108,6 @@ export const Default: StoryObj<StoryDefaultProps> = {
|
|
120
108
|
type: 'select',
|
121
109
|
},
|
122
110
|
},
|
123
|
-
view: {
|
124
|
-
options: views,
|
125
|
-
control: {
|
126
|
-
type: 'select',
|
127
|
-
},
|
128
|
-
},
|
129
|
-
textColor: {
|
130
|
-
control: 'color',
|
131
|
-
},
|
132
|
-
iconColor: {
|
133
|
-
control: 'color',
|
134
|
-
},
|
135
111
|
},
|
136
112
|
args: {
|
137
113
|
title: 'Title',
|
@@ -141,7 +117,6 @@ export const Default: StoryObj<StoryDefaultProps> = {
|
|
141
117
|
iconPlacement: 'top',
|
142
118
|
layout: 'vertical',
|
143
119
|
closeIconType: 'default',
|
144
|
-
view: 'default',
|
145
120
|
size: 'xs',
|
146
121
|
},
|
147
122
|
render: (args) => <StoryDefault {...args} />,
|
@@ -158,14 +133,7 @@ type StoryLiveDemoProps = ComponentProps<typeof Notification> & {
|
|
158
133
|
const StoryLiveDemo = ({ timeout, placement, ...rest }: StoryLiveDemoProps) => {
|
159
134
|
const count = useRef(0);
|
160
135
|
const handleClick = useCallback(() => {
|
161
|
-
addNotification(
|
162
|
-
{
|
163
|
-
icon: <IconDisclosureRight color="inherit" />,
|
164
|
-
...rest,
|
165
|
-
...getNotificationProps(count.current),
|
166
|
-
},
|
167
|
-
timeout,
|
168
|
-
);
|
136
|
+
addNotification({ icon: <IconDisclosureRight />, ...rest, ...getNotificationProps(count.current) }, timeout);
|
169
137
|
count.current++;
|
170
138
|
}, [count, rest]);
|
171
139
|
|
@@ -69,11 +69,11 @@ const StoryDemo = ({ context }) => {
|
|
69
69
|
|
70
70
|
return (
|
71
71
|
<>
|
72
|
-
{Object.entries(groupedTokens).map(([category,
|
72
|
+
{Object.entries(groupedTokens).map(([category, subcategories]) => (
|
73
73
|
<CategoryContainer key={category}>
|
74
74
|
<Category>{category}</Category>
|
75
75
|
<Accordion view="clear" size="s" stretching="filled" defaultActiveEventKey={[0]}>
|
76
|
-
{Object.entries(
|
76
|
+
{Object.entries(subcategories).map(([subcategory, subcategoryTokens], index) => (
|
77
77
|
<StyledAccordionItem
|
78
78
|
key={subcategory}
|
79
79
|
eventKey={index}
|
package/styled-components/cjs/examples/plasma_web/components/Notification/Notification.config.js
CHANGED
@@ -13,11 +13,7 @@ var config = exports.config = {
|
|
13
13
|
},
|
14
14
|
variations: {
|
15
15
|
view: {
|
16
|
-
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-
|
17
|
-
negative: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-negative);", ":var(--text-negative);", ":var(--text-secondary);", ":var(--surface-transparent-card);", ":0.75rem;", ":0.375rem;", ":0.125rem;", ":0.25rem;", ":0rem;", ":0.25rem;", ":0.25rem;", ":1rem;", ":0.1875rem;", ":0.125rem;", ":0.375rem;", ":0.125rem;", ":1.625rem;", ":0.25rem;", ":0.5rem;", ":0.5rem;", ":0.375rem;", ":1.5rem;", ":0.375rem;", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--text-tertiary);", ":var(--text-primary);", ":0.375rem;", ":0.75rem;", ":0.8125rem 0.5rem 0.8125rem 0.875rem;"], _Notification.notificationTokens.titleColor, _Notification.notificationTokens.contentLeftIconColor, _Notification.notificationTokens.contentColor, _Notification.notificationTokens.background, _Notification.notificationTokens.borderRadius, _Notification.notificationTokens.padding, _Notification.notificationTokens.contentPaddingTop, _Notification.notificationTokens.contentPaddingRight, _Notification.notificationTokens.contentPaddingBottom, _Notification.notificationTokens.contentPaddingLeft, _Notification.notificationTokens.contentPaddingTopWithoutIcon, _Notification.notificationTokens.horizontalLayoutRightPaddingWithoutCloseIcon, _Notification.notificationTokens.textboxPaddingTop, _Notification.notificationTokens.textboxPaddingRight, _Notification.notificationTokens.textboxPaddingBottom, _Notification.notificationTokens.textboxPaddingLeft, _Notification.notificationTokens.textboxPaddingRightWithCloseIcon, _Notification.notificationTokens.textboxGap, _Notification.notificationTokens.closeIconTop, _Notification.notificationTokens.closeIconRight, _Notification.notificationTokens.buttonsMarginTop, _Notification.notificationTokens.contentLeftIconSize, _Notification.notificationTokens.contentLeftIconMargin, _Notification.notificationTokens.contentTopIconMargin, _Notification.notificationTokens.contentFontFamily, _Notification.notificationTokens.contentFontSize, _Notification.notificationTokens.contentFontStyle, _Notification.notificationTokens.contentFontWeight, _Notification.notificationTokens.contentFontLetterSpacing, _Notification.notificationTokens.contentFontLineHeight, _Notification.notificationTokens.titleFontFamily, _Notification.notificationTokens.titleFontSize, _Notification.notificationTokens.titleFontStyle, _Notification.notificationTokens.titleFontWeight, _Notification.notificationTokens.titleFontLetterSpacing, _Notification.notificationTokens.titleFontLineHeight, _Notification.notificationTokens.closeIconColor, _Notification.notificationTokens.closeIconColorOnHover, _Notification.notificationTokens.horizontalLayoutGap, _Notification.notificationTokens.horizontalLayoutLeftIconMargin, _Notification.notificationTokens.paddingOneLineTextbox),
|
18
|
-
positive: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-positive);", ":var(--text-positive);", ":var(--text-secondary);", ":var(--surface-transparent-card);", ":0.75rem;", ":0.375rem;", ":0.125rem;", ":0.25rem;", ":0rem;", ":0.25rem;", ":0.25rem;", ":1rem;", ":0.1875rem;", ":0.125rem;", ":0.375rem;", ":0.125rem;", ":1.625rem;", ":0.25rem;", ":0.5rem;", ":0.5rem;", ":0.375rem;", ":1.5rem;", ":0.375rem;", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--text-tertiary);", ":var(--text-primary);", ":0.375rem;", ":0.75rem;", ":0.8125rem 0.5rem 0.8125rem 0.875rem;"], _Notification.notificationTokens.titleColor, _Notification.notificationTokens.contentLeftIconColor, _Notification.notificationTokens.contentColor, _Notification.notificationTokens.background, _Notification.notificationTokens.borderRadius, _Notification.notificationTokens.padding, _Notification.notificationTokens.contentPaddingTop, _Notification.notificationTokens.contentPaddingRight, _Notification.notificationTokens.contentPaddingBottom, _Notification.notificationTokens.contentPaddingLeft, _Notification.notificationTokens.contentPaddingTopWithoutIcon, _Notification.notificationTokens.horizontalLayoutRightPaddingWithoutCloseIcon, _Notification.notificationTokens.textboxPaddingTop, _Notification.notificationTokens.textboxPaddingRight, _Notification.notificationTokens.textboxPaddingBottom, _Notification.notificationTokens.textboxPaddingLeft, _Notification.notificationTokens.textboxPaddingRightWithCloseIcon, _Notification.notificationTokens.textboxGap, _Notification.notificationTokens.closeIconTop, _Notification.notificationTokens.closeIconRight, _Notification.notificationTokens.buttonsMarginTop, _Notification.notificationTokens.contentLeftIconSize, _Notification.notificationTokens.contentLeftIconMargin, _Notification.notificationTokens.contentTopIconMargin, _Notification.notificationTokens.contentFontFamily, _Notification.notificationTokens.contentFontSize, _Notification.notificationTokens.contentFontStyle, _Notification.notificationTokens.contentFontWeight, _Notification.notificationTokens.contentFontLetterSpacing, _Notification.notificationTokens.contentFontLineHeight, _Notification.notificationTokens.titleFontFamily, _Notification.notificationTokens.titleFontSize, _Notification.notificationTokens.titleFontStyle, _Notification.notificationTokens.titleFontWeight, _Notification.notificationTokens.titleFontLetterSpacing, _Notification.notificationTokens.titleFontLineHeight, _Notification.notificationTokens.closeIconColor, _Notification.notificationTokens.closeIconColorOnHover, _Notification.notificationTokens.horizontalLayoutGap, _Notification.notificationTokens.horizontalLayoutLeftIconMargin, _Notification.notificationTokens.paddingOneLineTextbox),
|
19
|
-
warning: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-warning);", ":var(--text-warning);", ":var(--text-secondary);", ":var(--surface-transparent-card);", ":0.75rem;", ":0.375rem;", ":0.125rem;", ":0.25rem;", ":0rem;", ":0.25rem;", ":0.25rem;", ":1rem;", ":0.1875rem;", ":0.125rem;", ":0.375rem;", ":0.125rem;", ":1.625rem;", ":0.25rem;", ":0.5rem;", ":0.5rem;", ":0.375rem;", ":1.5rem;", ":0.375rem;", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--text-tertiary);", ":var(--text-primary);", ":0.375rem;", ":0.75rem;", ":0.8125rem 0.5rem 0.8125rem 0.875rem;"], _Notification.notificationTokens.titleColor, _Notification.notificationTokens.contentLeftIconColor, _Notification.notificationTokens.contentColor, _Notification.notificationTokens.background, _Notification.notificationTokens.borderRadius, _Notification.notificationTokens.padding, _Notification.notificationTokens.contentPaddingTop, _Notification.notificationTokens.contentPaddingRight, _Notification.notificationTokens.contentPaddingBottom, _Notification.notificationTokens.contentPaddingLeft, _Notification.notificationTokens.contentPaddingTopWithoutIcon, _Notification.notificationTokens.horizontalLayoutRightPaddingWithoutCloseIcon, _Notification.notificationTokens.textboxPaddingTop, _Notification.notificationTokens.textboxPaddingRight, _Notification.notificationTokens.textboxPaddingBottom, _Notification.notificationTokens.textboxPaddingLeft, _Notification.notificationTokens.textboxPaddingRightWithCloseIcon, _Notification.notificationTokens.textboxGap, _Notification.notificationTokens.closeIconTop, _Notification.notificationTokens.closeIconRight, _Notification.notificationTokens.buttonsMarginTop, _Notification.notificationTokens.contentLeftIconSize, _Notification.notificationTokens.contentLeftIconMargin, _Notification.notificationTokens.contentTopIconMargin, _Notification.notificationTokens.contentFontFamily, _Notification.notificationTokens.contentFontSize, _Notification.notificationTokens.contentFontStyle, _Notification.notificationTokens.contentFontWeight, _Notification.notificationTokens.contentFontLetterSpacing, _Notification.notificationTokens.contentFontLineHeight, _Notification.notificationTokens.titleFontFamily, _Notification.notificationTokens.titleFontSize, _Notification.notificationTokens.titleFontStyle, _Notification.notificationTokens.titleFontWeight, _Notification.notificationTokens.titleFontLetterSpacing, _Notification.notificationTokens.titleFontLineHeight, _Notification.notificationTokens.closeIconColor, _Notification.notificationTokens.closeIconColorOnHover, _Notification.notificationTokens.horizontalLayoutGap, _Notification.notificationTokens.horizontalLayoutLeftIconMargin, _Notification.notificationTokens.paddingOneLineTextbox),
|
20
|
-
info: /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-info);", ":var(--text-info);", ":var(--text-secondary);", ":var(--surface-transparent-card);", ":0.75rem;", ":0.375rem;", ":0.125rem;", ":0.25rem;", ":0rem;", ":0.25rem;", ":0.25rem;", ":1rem;", ":0.1875rem;", ":0.125rem;", ":0.375rem;", ":0.125rem;", ":1.625rem;", ":0.25rem;", ":0.5rem;", ":0.5rem;", ":0.375rem;", ":1.5rem;", ":0.375rem;", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--text-tertiary);", ":var(--text-primary);", ":0.375rem;", ":0.75rem;", ":0.8125rem 0.5rem 0.8125rem 0.875rem;"], _Notification.notificationTokens.titleColor, _Notification.notificationTokens.contentLeftIconColor, _Notification.notificationTokens.contentColor, _Notification.notificationTokens.background, _Notification.notificationTokens.borderRadius, _Notification.notificationTokens.padding, _Notification.notificationTokens.contentPaddingTop, _Notification.notificationTokens.contentPaddingRight, _Notification.notificationTokens.contentPaddingBottom, _Notification.notificationTokens.contentPaddingLeft, _Notification.notificationTokens.contentPaddingTopWithoutIcon, _Notification.notificationTokens.horizontalLayoutRightPaddingWithoutCloseIcon, _Notification.notificationTokens.textboxPaddingTop, _Notification.notificationTokens.textboxPaddingRight, _Notification.notificationTokens.textboxPaddingBottom, _Notification.notificationTokens.textboxPaddingLeft, _Notification.notificationTokens.textboxPaddingRightWithCloseIcon, _Notification.notificationTokens.textboxGap, _Notification.notificationTokens.closeIconTop, _Notification.notificationTokens.closeIconRight, _Notification.notificationTokens.buttonsMarginTop, _Notification.notificationTokens.contentLeftIconSize, _Notification.notificationTokens.contentLeftIconMargin, _Notification.notificationTokens.contentTopIconMargin, _Notification.notificationTokens.contentFontFamily, _Notification.notificationTokens.contentFontSize, _Notification.notificationTokens.contentFontStyle, _Notification.notificationTokens.contentFontWeight, _Notification.notificationTokens.contentFontLetterSpacing, _Notification.notificationTokens.contentFontLineHeight, _Notification.notificationTokens.titleFontFamily, _Notification.notificationTokens.titleFontSize, _Notification.notificationTokens.titleFontStyle, _Notification.notificationTokens.titleFontWeight, _Notification.notificationTokens.titleFontLetterSpacing, _Notification.notificationTokens.titleFontLineHeight, _Notification.notificationTokens.closeIconColor, _Notification.notificationTokens.closeIconColorOnHover, _Notification.notificationTokens.horizontalLayoutGap, _Notification.notificationTokens.horizontalLayoutLeftIconMargin, _Notification.notificationTokens.paddingOneLineTextbox)
|
16
|
+
"default": /*#__PURE__*/(0, _styledComponents.css)(["", ":var(--text-secondary);", ":var(--surface-transparent-card);", ":0.75rem;", ":0.375rem;", ":0.125rem;", ":0.25rem;", ":0rem;", ":0.25rem;", ":0.25rem;", ":1rem;", ":0.1875rem;", ":0.125rem;", ":0.375rem;", ":0.125rem;", ":1.625rem;", ":0.25rem;", ":0.5rem;", ":0.5rem;", ":0.375rem;", ":1.5rem;", ":0.375rem;", ":0.5rem;", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--plasma-typo-body-s-font-family);", ":var(--plasma-typo-body-s-font-size);", ":var(--plasma-typo-body-s-font-style);", ":var(--plasma-typo-body-s-bold-font-weight);", ":var(--plasma-typo-body-s-letter-spacing);", ":var(--plasma-typo-body-s-line-height);", ":var(--text-tertiary);", ":var(--text-primary);", ":0.375rem;", ":0.75rem;", ":0.8125rem 0.5rem 0.8125rem 0.875rem;"], _Notification.notificationTokens.contentColor, _Notification.notificationTokens.background, _Notification.notificationTokens.borderRadius, _Notification.notificationTokens.padding, _Notification.notificationTokens.contentPaddingTop, _Notification.notificationTokens.contentPaddingRight, _Notification.notificationTokens.contentPaddingBottom, _Notification.notificationTokens.contentPaddingLeft, _Notification.notificationTokens.contentPaddingTopWithoutIcon, _Notification.notificationTokens.horizontalLayoutRightPaddingWithoutCloseIcon, _Notification.notificationTokens.textboxPaddingTop, _Notification.notificationTokens.textboxPaddingRight, _Notification.notificationTokens.textboxPaddingBottom, _Notification.notificationTokens.textboxPaddingLeft, _Notification.notificationTokens.textboxPaddingRightWithCloseIcon, _Notification.notificationTokens.textboxGap, _Notification.notificationTokens.closeIconTop, _Notification.notificationTokens.closeIconRight, _Notification.notificationTokens.buttonsMarginTop, _Notification.notificationTokens.contentLeftIconSize, _Notification.notificationTokens.contentLeftIconMargin, _Notification.notificationTokens.contentTopIconMargin, _Notification.notificationTokens.contentFontFamily, _Notification.notificationTokens.contentFontSize, _Notification.notificationTokens.contentFontStyle, _Notification.notificationTokens.contentFontWeight, _Notification.notificationTokens.contentFontLetterSpacing, _Notification.notificationTokens.contentFontLineHeight, _Notification.notificationTokens.titleFontFamily, _Notification.notificationTokens.titleFontSize, _Notification.notificationTokens.titleFontStyle, _Notification.notificationTokens.titleFontWeight, _Notification.notificationTokens.titleFontLetterSpacing, _Notification.notificationTokens.titleFontLineHeight, _Notification.notificationTokens.closeIconColor, _Notification.notificationTokens.closeIconColorOnHover, _Notification.notificationTokens.horizontalLayoutGap, _Notification.notificationTokens.horizontalLayoutLeftIconMargin, _Notification.notificationTokens.paddingOneLineTextbox)
|
21
17
|
},
|
22
18
|
layout: {
|
23
19
|
horizontal: /*#__PURE__*/(0, _styledComponents.css)(["", ":25rem;", ":1rem 0.5rem 1rem 0.875rem;"], _Notification.notificationTokens.width, _Notification.notificationTokens.horizontalLayoutPadding),
|
package/styled-components/cjs/examples/plasma_web/components/Notification/Notification.stories.tsx
CHANGED
@@ -23,7 +23,6 @@ const texts = ['SSH ключ успешно скопирован', 'Нельзя
|
|
23
23
|
const size = ['xs', 'xxs'];
|
24
24
|
const iconPlacement = ['top', 'left'];
|
25
25
|
const notificationsPlacements = ['bottom-right', 'bottom-left'];
|
26
|
-
const views = ['default', 'negative', 'positive', 'warning', 'info'];
|
27
26
|
|
28
27
|
const longText = `JavaScript frameworks are an essential part of modern front-end web development,
|
29
28
|
providing developers with proven tools for building scalable, interactive web applications.
|
@@ -65,7 +64,7 @@ const StoryDefault = ({ title, children, iconPlacement, size, layout, showLeftIc
|
|
65
64
|
return (
|
66
65
|
<Notification
|
67
66
|
title={title}
|
68
|
-
icon={showLeftIcon ? <IconDisclosureRight
|
67
|
+
icon={showLeftIcon ? <IconDisclosureRight /> : ''}
|
69
68
|
iconPlacement={iconPlacement}
|
70
69
|
actions={
|
71
70
|
<Button
|
@@ -109,18 +108,6 @@ export const Default: StoryObj<StoryDefaultProps> = {
|
|
109
108
|
type: 'select',
|
110
109
|
},
|
111
110
|
},
|
112
|
-
view: {
|
113
|
-
options: views,
|
114
|
-
control: {
|
115
|
-
type: 'select',
|
116
|
-
},
|
117
|
-
},
|
118
|
-
textColor: {
|
119
|
-
control: 'color',
|
120
|
-
},
|
121
|
-
iconColor: {
|
122
|
-
control: 'color',
|
123
|
-
},
|
124
111
|
},
|
125
112
|
args: {
|
126
113
|
title: 'Title',
|
@@ -146,10 +133,7 @@ type StoryLiveDemoProps = ComponentProps<typeof Notification> & {
|
|
146
133
|
const StoryLiveDemo = ({ timeout, placement, ...rest }: StoryLiveDemoProps) => {
|
147
134
|
const count = useRef(0);
|
148
135
|
const handleClick = useCallback(() => {
|
149
|
-
addNotification(
|
150
|
-
{ icon: <IconDisclosureRight color="inherit" />, ...rest, ...getNotificationProps(count.current) },
|
151
|
-
timeout,
|
152
|
-
);
|
136
|
+
addNotification({ icon: <IconDisclosureRight />, ...rest, ...getNotificationProps(count.current) }, timeout);
|
153
137
|
count.current++;
|
154
138
|
}, [count, rest]);
|
155
139
|
|
@@ -69,11 +69,11 @@ const StoryDemo = ({ context }) => {
|
|
69
69
|
|
70
70
|
return (
|
71
71
|
<>
|
72
|
-
{Object.entries(groupedTokens).map(([category,
|
72
|
+
{Object.entries(groupedTokens).map(([category, subcategories]) => (
|
73
73
|
<CategoryContainer key={category}>
|
74
74
|
<Category>{category}</Category>
|
75
75
|
<Accordion view="clear" size="s" stretching="filled" defaultActiveEventKey={[0]}>
|
76
|
-
{Object.entries(
|
76
|
+
{Object.entries(subcategories).map(([subcategory, subcategoryTokens], index) => (
|
77
77
|
<StyledAccordionItem
|
78
78
|
key={subcategory}
|
79
79
|
eventKey={index}
|
@@ -1,4 +1,4 @@
|
|
1
|
-
var _excluded = ["role", "title", "children", "actions", "view", "size", "iconPlacement", "showCloseIcon", "layout", "icon", "closeIconType", "
|
1
|
+
var _excluded = ["role", "title", "children", "actions", "view", "size", "iconPlacement", "showCloseIcon", "layout", "icon", "closeIconType", "onCloseButtonClick"];
|
2
2
|
function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
|
3
3
|
function _objectWithoutProperties(source, excluded) { if (source == null) return {}; var target = _objectWithoutPropertiesLoose(source, excluded); var key, i; if (Object.getOwnPropertySymbols) { var sourceSymbolKeys = Object.getOwnPropertySymbols(source); for (i = 0; i < sourceSymbolKeys.length; i++) { key = sourceSymbolKeys[i]; if (excluded.indexOf(key) >= 0) continue; if (!Object.prototype.propertyIsEnumerable.call(source, key)) continue; target[key] = source[key]; } } return target; }
|
4
4
|
function _objectWithoutPropertiesLoose(source, excluded) { if (source == null) return {}; var target = {}; var sourceKeys = Object.keys(source); var key, i; for (i = 0; i < sourceKeys.length; i++) { key = sourceKeys[i]; if (excluded.indexOf(key) >= 0) continue; target[key] = source[key]; } return target; }
|
@@ -34,8 +34,6 @@ export var notificationRoot = function notificationRoot(Root) {
|
|
34
34
|
layout = _props$layout === void 0 ? layouts.vertical : _props$layout,
|
35
35
|
icon = props.icon,
|
36
36
|
closeIconType = props.closeIconType,
|
37
|
-
textColor = props.textColor,
|
38
|
-
iconColor = props.iconColor,
|
39
37
|
onCloseButtonClick = props.onCloseButtonClick,
|
40
38
|
rest = _objectWithoutProperties(props, _excluded);
|
41
39
|
var ariaLive = 'polite';
|
@@ -68,15 +66,13 @@ export var notificationRoot = function notificationRoot(Root) {
|
|
68
66
|
className: cx(classes.contentBox, getLayoutClass(layout), withoutIconClass)
|
69
67
|
}, icon && /*#__PURE__*/React.createElement(IconWrapper, {
|
70
68
|
iconPlacement: IconPlacementInternal,
|
71
|
-
className: cx(classes.icon, getLayoutClass(layout))
|
72
|
-
iconColor: iconColor
|
69
|
+
className: cx(classes.icon, getLayoutClass(layout))
|
73
70
|
}, icon), /*#__PURE__*/React.createElement(TextBox, {
|
74
71
|
iconPlacement: IconPlacementInternal,
|
75
72
|
showCloseIcon: showCloseIcon,
|
76
73
|
className: cx(classes.textbox, getLayoutClass(layout))
|
77
74
|
}, title && /*#__PURE__*/React.createElement(StyledTitle, {
|
78
|
-
className: classes.title
|
79
|
-
textColor: textColor
|
75
|
+
className: classes.title
|
80
76
|
}, title), content && /*#__PURE__*/React.createElement(StyledContent, {
|
81
77
|
className: classes.text
|
82
78
|
}, content))), actions && /*#__PURE__*/React.createElement(ButtonsWrapper, {
|