From 6b3916926d548c86d4a4069605e4996034af0530 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Connor=20B=C3=A4r?= Date: Wed, 1 Apr 2020 12:53:19 +0200 Subject: [PATCH] feat(components): rename notification components (#541) * feat(components): rename Message to Notification This brings it in line with the NotificationBanner and NotificationList BREAKING CHANGE: The Message component has been renamed to Notification. * feat(components): rename InlineNotification to InlineMessage This is to avoid confusion with the Notification components. BREAKING CHANGE: The InlineNotification component has been renamed to InlineMessage. --- src/__snapshots__/storyshots.spec.js.snap | 2636 ++++++++--------- .../InlineMessage/InlineMessage.docs.mdx | 43 + .../InlineMessage.js} | 36 +- .../InlineMessage.spec.js} | 25 +- .../InlineMessage.story.js} | 36 +- .../__snapshots__/InlineMessage.spec.js.snap} | 12 +- .../index.js | 4 +- .../InlineNotification.docs.mdx | 44 - src/components/Message/Message.docs.mdx | 74 - .../Notification/Notification.docs.mdx | 74 + .../Notification.js} | 14 +- .../Notification.spec.js} | 8 +- .../Notification.story.js} | 40 +- .../__snapshots__/Notification.spec.js.snap} | 2 +- .../components/Button/Button.js | 22 +- .../components/Button/Button.spec.js | 12 +- .../Button/__snapshots__/Button.spec.js.snap | 4 +- .../components/Icon/Icon.js | 40 +- .../components/Icon/Icon.spec.js | 16 +- .../Icon/__snapshots__/Icon.spec.js.snap | 12 +- .../components/NotificationWarning.js} | 6 +- .../components/index.js | 4 +- .../{Message => Notification}/index.js | 9 +- .../notification-error.svg} | 0 .../notification-success.svg} | 4 +- .../NotificationBanner/NotificationBanner.js | 4 +- .../NotificationBanner.story.js | 6 +- .../NotificationList/NotificationList.js | 4 +- .../NotificationList.story.js | 6 +- src/index.js | 10 +- 30 files changed, 1599 insertions(+), 1608 deletions(-) create mode 100644 src/components/InlineMessage/InlineMessage.docs.mdx rename src/components/{InlineNotification/InlineNotification.js => InlineMessage/InlineMessage.js} (76%) rename src/components/{InlineNotification/InlineNotification.spec.js => InlineMessage/InlineMessage.spec.js} (69%) rename src/components/{InlineNotification/InlineNotification.story.js => InlineMessage/InlineMessage.story.js} (62%) rename src/components/{InlineNotification/__snapshots__/InlineNotification.spec.js.snap => InlineMessage/__snapshots__/InlineMessage.spec.js.snap} (79%) rename src/components/{InlineNotification => InlineMessage}/index.js (86%) delete mode 100644 src/components/InlineNotification/InlineNotification.docs.mdx delete mode 100644 src/components/Message/Message.docs.mdx create mode 100644 src/components/Notification/Notification.docs.mdx rename src/components/{Message/Message.js => Notification/Notification.js} (76%) rename src/components/{Message/Message.spec.js => Notification/Notification.spec.js} (85%) rename src/components/{Message/Message.story.js => Notification/Notification.story.js} (74%) rename src/components/{Message/__snapshots__/Message.spec.js.snap => Notification/__snapshots__/Notification.spec.js.snap} (91%) rename src/components/{Message => Notification}/components/Button/Button.js (72%) rename src/components/{Message => Notification}/components/Button/Button.spec.js (78%) rename src/components/{Message => Notification}/components/Button/__snapshots__/Button.spec.js.snap (85%) rename src/components/{Message => Notification}/components/Icon/Icon.js (59%) rename src/components/{Message => Notification}/components/Icon/Icon.spec.js (76%) rename src/components/{Message => Notification}/components/Icon/__snapshots__/Icon.spec.js.snap (83%) rename src/components/{Message/components/MessageWarning.js => Notification/components/NotificationWarning.js} (82%) rename src/components/{Message => Notification}/components/index.js (86%) rename src/components/{Message => Notification}/index.js (78%) rename src/components/{Message/message-error.svg => Notification/notification-error.svg} (100%) rename src/components/{Message/message-success.svg => Notification/notification-success.svg} (89%) diff --git a/src/__snapshots__/storyshots.spec.js.snap b/src/__snapshots__/storyshots.spec.js.snap index 7196ce7d25..99ef18db8b 100644 --- a/src/__snapshots__/storyshots.spec.js.snap +++ b/src/__snapshots__/storyshots.spec.js.snap @@ -7508,8 +7508,8 @@ HTMLCollection [ ] `; -exports[`Storyshots Components/Message Alert 1`] = ` -.circuit-4 { +exports[`Storyshots Components/Modal Base 1`] = ` +.circuit-0 { background-color: #FAFBFC; border-color: #D8DDE1; border-radius: 4px; @@ -7527,39 +7527,39 @@ exports[`Storyshots Components/Message Alert 1`] = ` text-decoration: none; font-size: 16px; line-height: 24px; - padding: calc(4px - 0px) calc(16px - 0px); + padding: calc(8px - 0px) calc(24px - 0px); } -.circuit-4:active { +.circuit-0:active { background-color: #D8DDE1; border-color: #9DA7B1; box-shadow: inset 0 4px 8px 0 rgba(12,15,20,0.3); } -.circuit-4:focus { +.circuit-0:focus { border-color: #9DA7B1; border-width: 2px; outline: 0; - padding: calc(4px - 1px) calc(16px - 1px); + padding: calc(8px - 1px) calc(24px - 1px); } -.circuit-4:hover { +.circuit-0:hover { background-color: #D8DDE1; } -.circuit-4:hover, -.circuit-4:active { +.circuit-0:hover, +.circuit-0:active { border-color: #9DA7B1; border-width: 1px; - padding: calc(4px - 0px) calc(16px - 0px); + padding: calc(8px - 0px) calc(24px - 0px); } -.circuit-4[href] { +.circuit-0[href] { display: inline-block; } -.circuit-4:disabled, -.circuit-4[disabled] { +.circuit-0:disabled, +.circuit-0[disabled] { opacity: 0.4; pointer-events: none; -webkit-user-selectable: none; @@ -7568,272 +7568,220 @@ exports[`Storyshots Components/Message Alert 1`] = ` user-selectable: none; } -.circuit-2 { + +`; + +exports[`Storyshots Components/Modal With Custom Styles 1`] = ` +.circuit-0 { + background-color: #FAFBFC; + border-color: #D8DDE1; + border-radius: 4px; + border-style: solid; + border-width: 1px; + box-shadow: inset 0 1px 0 1px rgba(255,255,255,0.06); + display: block; + color: #5C656F; + cursor: pointer; font-weight: 700; - margin-bottom: 24px; - font-size: 17px; + width: auto; + height: auto; + text-align: center; + -webkit-text-decoration: none; + text-decoration: none; + font-size: 16px; line-height: 24px; - margin-bottom: 0; -} - -@media (min-width:480px) { - .circuit-2 { - font-size: 17px; - line-height: 24px; - } + padding: calc(8px - 0px) calc(24px - 0px); } -.circuit-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - -webkit-align-items: flex-start; - -webkit-box-align: flex-start; - -ms-flex-align: flex-start; - align-items: flex-start; +.circuit-0:active { + background-color: #D8DDE1; + border-color: #9DA7B1; + box-shadow: inset 0 4px 8px 0 rgba(12,15,20,0.3); } -@media (min-width:480px) { - .circuit-8 { - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - } +.circuit-0:focus { + border-color: #9DA7B1; + border-width: 2px; + outline: 0; + padding: calc(8px - 1px) calc(24px - 1px); } -.circuit-0 { - display: block; - margin: 0 0 16px 0; - -webkit-box-flex: 0; - -webkit-flex-grow: 0; - -ms-flex-positive: 0; - flex-grow: 0; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - line-height: 0; +.circuit-0:hover { + background-color: #D8DDE1; } -@media (min-width:480px) { - .circuit-0 { - margin: 0 16px 0 0; - } +.circuit-0:hover, +.circuit-0:active { + border-color: #9DA7B1; + border-width: 1px; + padding: calc(8px - 0px) calc(24px - 0px); } -.circuit-6 { - display: block; - padding-left: 24px; - margin-top: 16px; - margin-left: auto; - -webkit-box-flex: 0; - -webkit-flex-grow: 0; - -ms-flex-positive: 0; - flex-grow: 0; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; +.circuit-0[href] { + display: inline-block; } -@media (min-width:480px) { - .circuit-6 { - margin-top: 0; - } +.circuit-0:disabled, +.circuit-0[disabled] { + opacity: 0.4; + pointer-events: none; + -webkit-user-selectable: none; + -moz-user-selectable: none; + -ms-user-selectable: none; + user-selectable: none; } -
-
-
- message-error.svg -
-
-

- Your transaction has failed -

-
- -
-
+ Open modal + `; -exports[`Storyshots Components/Message Base 1`] = ` +exports[`Storyshots Components/Modal With Footer 1`] = ` .circuit-0 { + background-color: #FAFBFC; + border-color: #D8DDE1; + border-radius: 4px; + border-style: solid; + border-width: 1px; + box-shadow: inset 0 1px 0 1px rgba(255,255,255,0.06); + display: block; + color: #5C656F; + cursor: pointer; font-weight: 700; - margin-bottom: 24px; - font-size: 17px; + width: auto; + height: auto; + text-align: center; + -webkit-text-decoration: none; + text-decoration: none; + font-size: 16px; line-height: 24px; - margin-bottom: 0; + padding: calc(8px - 0px) calc(24px - 0px); } -@media (min-width:480px) { - .circuit-0 { - font-size: 17px; - line-height: 24px; - } +.circuit-0:active { + background-color: #D8DDE1; + border-color: #9DA7B1; + box-shadow: inset 0 4px 8px 0 rgba(12,15,20,0.3); } -.circuit-2 { - font-weight: 400; - margin-bottom: 16px; - font-size: 16px; - line-height: 24px; - margin-bottom: 0; +.circuit-0:focus { + border-color: #9DA7B1; + border-width: 2px; + outline: 0; + padding: calc(8px - 1px) calc(24px - 1px); } -@media (min-width:480px) { - .circuit-2 { - font-size: 16px; - line-height: 24px; - } +.circuit-0:hover { + background-color: #D8DDE1; } -.circuit-4 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - -webkit-align-items: flex-start; - -webkit-box-align: flex-start; - -ms-flex-align: flex-start; - align-items: flex-start; +.circuit-0:hover, +.circuit-0:active { + border-color: #9DA7B1; + border-width: 1px; + padding: calc(8px - 0px) calc(24px - 0px); } -@media (min-width:480px) { - .circuit-4 { - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - } +.circuit-0[href] { + display: inline-block; } -
-
-

- New Feature — Intelligent Reporting -

-

- Get automatic insights into your business statistics with one click. -

-
-
+.circuit-0:disabled, +.circuit-0[disabled] { + opacity: 0.4; + pointer-events: none; + -webkit-user-selectable: none; + -moz-user-selectable: none; + -ms-user-selectable: none; + user-selectable: none; +} + + `; -exports[`Storyshots Components/Message Success 1`] = ` -.circuit-2 { +exports[`Storyshots Components/Modal With Header 1`] = ` +.circuit-0 { + background-color: #FAFBFC; + border-color: #D8DDE1; + border-radius: 4px; + border-style: solid; + border-width: 1px; + box-shadow: inset 0 1px 0 1px rgba(255,255,255,0.06); + display: block; + color: #5C656F; + cursor: pointer; font-weight: 700; - margin-bottom: 24px; - font-size: 17px; + width: auto; + height: auto; + text-align: center; + -webkit-text-decoration: none; + text-decoration: none; + font-size: 16px; line-height: 24px; - margin-bottom: 0; + padding: calc(8px - 0px) calc(24px - 0px); } -@media (min-width:480px) { - .circuit-2 { - font-size: 17px; - line-height: 24px; - } +.circuit-0:active { + background-color: #D8DDE1; + border-color: #9DA7B1; + box-shadow: inset 0 4px 8px 0 rgba(12,15,20,0.3); } -.circuit-4 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - -webkit-align-items: flex-start; - -webkit-box-align: flex-start; - -ms-flex-align: flex-start; - align-items: flex-start; +.circuit-0:focus { + border-color: #9DA7B1; + border-width: 2px; + outline: 0; + padding: calc(8px - 1px) calc(24px - 1px); } -@media (min-width:480px) { - .circuit-4 { - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - } +.circuit-0:hover { + background-color: #D8DDE1; } -.circuit-0 { - display: block; - margin: 0 0 16px 0; - -webkit-box-flex: 0; - -webkit-flex-grow: 0; - -ms-flex-positive: 0; - flex-grow: 0; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - line-height: 0; +.circuit-0:hover, +.circuit-0:active { + border-color: #9DA7B1; + border-width: 1px; + padding: calc(8px - 0px) calc(24px - 0px); } -@media (min-width:480px) { - .circuit-0 { - margin: 0 16px 0 0; - } +.circuit-0[href] { + display: inline-block; } -
-
-
- message-success.svg -
-
-

- Transaction successfully refunded -

-
+ Open modal + `; -exports[`Storyshots Components/Message Warning 1`] = ` -.circuit-6 { +exports[`Storyshots Components/Modal With Title And Close Button 1`] = ` +.circuit-0 { background-color: #FAFBFC; border-color: #D8DDE1; border-radius: 4px; @@ -7851,39 +7799,39 @@ exports[`Storyshots Components/Message Warning 1`] = ` text-decoration: none; font-size: 16px; line-height: 24px; - padding: calc(4px - 0px) calc(16px - 0px); + padding: calc(8px - 0px) calc(24px - 0px); } -.circuit-6:active { +.circuit-0:active { background-color: #D8DDE1; border-color: #9DA7B1; box-shadow: inset 0 4px 8px 0 rgba(12,15,20,0.3); } -.circuit-6:focus { +.circuit-0:focus { border-color: #9DA7B1; border-width: 2px; outline: 0; - padding: calc(4px - 1px) calc(16px - 1px); + padding: calc(8px - 1px) calc(24px - 1px); } -.circuit-6:hover { +.circuit-0:hover { background-color: #D8DDE1; } -.circuit-6:hover, -.circuit-6:active { +.circuit-0:hover, +.circuit-0:active { border-color: #9DA7B1; border-width: 1px; - padding: calc(4px - 0px) calc(16px - 0px); + padding: calc(8px - 0px) calc(24px - 0px); } -.circuit-6[href] { +.circuit-0[href] { display: inline-block; } -.circuit-6:disabled, -.circuit-6[disabled] { +.circuit-0:disabled, +.circuit-0[disabled] { opacity: 0.4; pointer-events: none; -webkit-user-selectable: none; @@ -7892,372 +7840,287 @@ exports[`Storyshots Components/Message Warning 1`] = ` user-selectable: none; } -.circuit-4 { + +`; + +exports[`Storyshots Components/Modal Without Close Button 1`] = ` +.circuit-0 { + background-color: #FAFBFC; + border-color: #D8DDE1; + border-radius: 4px; + border-style: solid; + border-width: 1px; + box-shadow: inset 0 1px 0 1px rgba(255,255,255,0.06); + display: block; + color: #5C656F; + cursor: pointer; font-weight: 700; - margin-bottom: 24px; - font-size: 17px; + width: auto; + height: auto; + text-align: center; + -webkit-text-decoration: none; + text-decoration: none; + font-size: 16px; line-height: 24px; - margin-bottom: 0; -} - -@media (min-width:480px) { - .circuit-4 { - font-size: 17px; - line-height: 24px; - } + padding: calc(8px - 0px) calc(24px - 0px); } -.circuit-10 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - -webkit-align-items: flex-start; - -webkit-box-align: flex-start; - -ms-flex-align: flex-start; - align-items: flex-start; +.circuit-0:active { + background-color: #D8DDE1; + border-color: #9DA7B1; + box-shadow: inset 0 4px 8px 0 rgba(12,15,20,0.3); } -@media (min-width:480px) { - .circuit-10 { - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - } +.circuit-0:focus { + border-color: #9DA7B1; + border-width: 2px; + outline: 0; + padding: calc(8px - 1px) calc(24px - 1px); } -.circuit-2 { - display: block; - margin: 0 0 16px 0; - -webkit-box-flex: 0; - -webkit-flex-grow: 0; - -ms-flex-positive: 0; - flex-grow: 0; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - line-height: 0; +.circuit-0:hover { + background-color: #D8DDE1; } -@media (min-width:480px) { - .circuit-2 { - margin: 0 16px 0 0; - } +.circuit-0:hover, +.circuit-0:active { + border-color: #9DA7B1; + border-width: 1px; + padding: calc(8px - 0px) calc(24px - 0px); } -.circuit-0 rect { - fill: #D8A413; +.circuit-0[href] { + display: inline-block; } -.circuit-8 { - display: block; - padding-left: 24px; - margin-top: 16px; - margin-left: auto; - -webkit-box-flex: 0; - -webkit-flex-grow: 0; - -ms-flex-positive: 0; - flex-grow: 0; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - -webkit-align-self: center; - -ms-flex-item-align: center; - align-self: center; -} - -@media (min-width:480px) { - .circuit-8 { - margin-top: 0; - } +.circuit-0:disabled, +.circuit-0[disabled] { + opacity: 0.4; + pointer-events: none; + -webkit-user-selectable: none; + -moz-user-selectable: none; + -ms-user-selectable: none; + user-selectable: none; } -
-
-
- message-success.svg -
-
-

- You still need to verify your account -

-
- -
-
+ Open modal + `; -exports[`Storyshots Components/Message/NotificationBanner Base 1`] = ` +exports[`Storyshots Components/Modal/Embedded Base 1`] = ` .circuit-0 { - font-weight: 700; - margin-bottom: 24px; - font-size: 17px; - line-height: 24px; - margin-bottom: 0; + background-color: #FFFFFF; + border-radius: 4px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 4px 4px 0 rgba(12,15,20,0.06), 0 8px 8px 0 rgba(12,15,20,0.06); + padding: 16px 24px; + width: 100%; } -@media (min-width:480px) { +@media (max-width:479px) { .circuit-0 { - font-size: 17px; - line-height: 24px; + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + min-width: initial; + position: relative; } } -.circuit-2 { +
+ Hello World! +
+`; + +exports[`Storyshots Components/Modal/Embedded With Custom Styles 1`] = ` +.circuit-0 { font-weight: 400; margin-bottom: 16px; font-size: 16px; line-height: 24px; - margin-bottom: 0; } @media (min-width:480px) { - .circuit-2 { + .circuit-0 { font-size: 16px; line-height: 24px; } } -.circuit-4 { +.circuit-8 { + width: 100%; + padding: 0; + height: 50vh; +} + +.circuit-6 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - -webkit-align-items: flex-start; - -webkit-box-align: flex-start; - -ms-flex-align: flex-start; - align-items: flex-start; -} - -@media (min-width:480px) { - .circuit-4 { - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - } -} - -.circuit-11 { - min-height: 5rem; -} - -.circuit-10 { - position: absolute; - bottom: 0; - left: 0; - right: 0; + -webkit-box-pack: stretch; + -webkit-justify-content: stretch; + -ms-flex-pack: stretch; + justify-content: stretch; + -webkit-align-items: stretch; + -webkit-box-align: stretch; + -ms-flex-align: stretch; + align-items: stretch; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + height: 100%; + background: #fff; } -.circuit-8 { - width: 100%; - background-color: #FFFFFF; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); +.circuit-2 { + 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; + width: 50%; + -webkit-box-pack: center; + -webkit-justify-content: center; + -ms-flex-pack: center; + justify-content: center; + padding: 24px 18px; } -.circuit-6 { - padding: 16px 24px; +.circuit-4 { + height: 100%; + width: 50%; + background: no-repeat center / cover url('https://source.unsplash.com/random'); }
-
-
-
-

- New Feature — Intelligent Reporting -

-

- Get automatic insights into your business statistics with one click. -

-
-
-
+ A nice custom modal for special cases. +

+
`; -exports[`Storyshots Components/Message/NotificationList Base 1`] = ` -.circuit-2 { +exports[`Storyshots Components/Modal/Embedded With Footer 1`] = ` +.circuit-8 { + background-color: #FAFBFC; + border-color: #D8DDE1; + border-radius: 4px; + border-style: solid; + border-width: 1px; + box-shadow: inset 0 1px 0 1px rgba(255,255,255,0.06); + display: block; + color: #5C656F; + cursor: pointer; font-weight: 700; - margin-bottom: 24px; - font-size: 17px; + width: auto; + height: auto; + text-align: center; + -webkit-text-decoration: none; + text-decoration: none; + font-size: 16px; line-height: 24px; - margin-bottom: 0; + background-color: #3388FF; + border-color: #1760CE; + color: #FFFFFF; + padding: calc(8px - 0px) calc(24px - 0px); } -@media (min-width:480px) { - .circuit-2 { - font-size: 17px; - line-height: 24px; - } +.circuit-8:active { + background-color: #D8DDE1; + border-color: #9DA7B1; + box-shadow: inset 0 4px 8px 0 rgba(12,15,20,0.3); } -.circuit-4 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: start; - -webkit-justify-content: flex-start; - -ms-flex-pack: start; - justify-content: flex-start; - -webkit-align-items: flex-start; - -webkit-box-align: flex-start; - -ms-flex-align: flex-start; - align-items: flex-start; +.circuit-8:focus { + border-color: #9DA7B1; + border-width: 2px; + outline: 0; + padding: calc(8px - 1px) calc(24px - 1px); } -@media (min-width:480px) { - .circuit-4 { - -webkit-flex-direction: row; - -ms-flex-direction: row; - flex-direction: row; - } +.circuit-8:hover { + background-color: #D8DDE1; } -.circuit-0 { - display: block; - margin: 0 0 16px 0; - -webkit-box-flex: 0; - -webkit-flex-grow: 0; - -ms-flex-positive: 0; - flex-grow: 0; - -webkit-flex-shrink: 0; - -ms-flex-negative: 0; - flex-shrink: 0; - line-height: 0; +.circuit-8:hover, +.circuit-8:active { + border-color: #9DA7B1; + border-width: 1px; + padding: calc(8px - 0px) calc(24px - 0px); } -@media (min-width:480px) { - .circuit-0 { - margin: 0 16px 0 0; - } +.circuit-8[href] { + display: inline-block; } -.circuit-8 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - width: 400px; - max-width: 90vw; - max-width: calc(100vw - 48px); +.circuit-8:disabled, +.circuit-8[disabled] { + opacity: 0.4; + pointer-events: none; + -webkit-user-selectable: none; + -moz-user-selectable: none; + -ms-user-selectable: none; + user-selectable: none; } -.circuit-8 > * { - margin-top: 16px; +.circuit-8:active { + background-color: #1760CE; + border-color: #003C8B; } -.circuit-8 > *:first-child { - margin-top: 0; +.circuit-8:focus { + border-color: #1760CE; } -@media (max-width:767px) { - .circuit-8 { - max-width: none; - width: 100%; - } +.circuit-8:hover { + background-color: #1760CE; } -.circuit-6 { - background-color: #FFFFFF; - border-radius: 4px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 2px 2px 0 rgba(12,15,20,0.06), 0 4px 4px 0 rgba(12,15,20,0.06); - padding: 16px 16px; +.circuit-8:hover, +.circuit-8:active { + border-color: #003C8B; } - -`; - -exports[`Storyshots Components/Modal Base 1`] = ` -.circuit-0 { +.circuit-6 { background-color: #FAFBFC; border-color: #D8DDE1; border-radius: 4px; @@ -8276,38 +8139,43 @@ exports[`Storyshots Components/Modal Base 1`] = ` font-size: 16px; line-height: 24px; padding: calc(8px - 0px) calc(24px - 0px); + background-color: transparent; + border-color: #212933; + border-width: 0; + box-shadow: none; + color: #5C656F; } -.circuit-0:active { +.circuit-6:active { background-color: #D8DDE1; border-color: #9DA7B1; box-shadow: inset 0 4px 8px 0 rgba(12,15,20,0.3); } -.circuit-0:focus { +.circuit-6:focus { border-color: #9DA7B1; border-width: 2px; outline: 0; padding: calc(8px - 1px) calc(24px - 1px); } -.circuit-0:hover { +.circuit-6:hover { background-color: #D8DDE1; } -.circuit-0:hover, -.circuit-0:active { +.circuit-6:hover, +.circuit-6:active { border-color: #9DA7B1; border-width: 1px; padding: calc(8px - 0px) calc(24px - 0px); } -.circuit-0[href] { +.circuit-6[href] { display: inline-block; } -.circuit-0:disabled, -.circuit-0[disabled] { +.circuit-6:disabled, +.circuit-6[disabled] { opacity: 0.4; pointer-events: none; -webkit-user-selectable: none; @@ -8316,288 +8184,525 @@ exports[`Storyshots Components/Modal Base 1`] = ` user-selectable: none; } - -`; +.circuit-6:active { + background-color: transparent; + border-color: #212933; + border-width: 0; + box-shadow: none; +} -exports[`Storyshots Components/Modal With Custom Styles 1`] = ` -.circuit-0 { - background-color: #FAFBFC; - border-color: #D8DDE1; - border-radius: 4px; - border-style: solid; - border-width: 1px; - box-shadow: inset 0 1px 0 1px rgba(255,255,255,0.06); - display: block; - color: #5C656F; - cursor: pointer; - font-weight: 700; - width: auto; - height: auto; - text-align: center; - -webkit-text-decoration: none; - text-decoration: none; - font-size: 16px; - line-height: 24px; +.circuit-6:focus { + border-color: #212933; + border-width: 2px; + box-shadow: none; + padding: calc(8px - 2px) calc(24px - 2px); +} + +.circuit-6:hover { + background-color: transparent; + border-width: 0; + border-color: #212933; +} + +.circuit-6:active, +.circuit-6:hover, +.circuit-6:hover:focus, +.circuit-6:active:focus { padding: calc(8px - 0px) calc(24px - 0px); } -.circuit-0:active { - background-color: #D8DDE1; - border-color: #9DA7B1; - box-shadow: inset 0 4px 8px 0 rgba(12,15,20,0.3); +.circuit-6:active, +.circuit-6:hover, +.circuit-6:focus { + color: #212933; } -.circuit-0:focus { - border-color: #9DA7B1; +.circuit-6:active:focus, +.circuit-6:hover:focus { + border-color: #212933; border-width: 2px; - outline: 0; - padding: calc(8px - 1px) calc(24px - 1px); + box-shadow: none; + padding: calc(8px - 2px) calc(24px - 2px); } -.circuit-0:hover { - background-color: #D8DDE1; +.circuit-10 { + list-style-type: none; + width: 100%; + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; } -.circuit-0:hover, -.circuit-0:active { - border-color: #9DA7B1; - border-width: 1px; - padding: calc(8px - 0px) calc(24px - 0px); +.circuit-10 > li:not(:last-of-type) { + margin-bottom: 16px; } -.circuit-0[href] { - display: inline-block; +.circuit-10 > li > * { + width: 100%; } -.circuit-0:disabled, -.circuit-0[disabled] { - opacity: 0.4; - pointer-events: none; - -webkit-user-selectable: none; - -moz-user-selectable: none; - -ms-user-selectable: none; - user-selectable: none; +@media (min-width:480px) { + .circuit-10 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-wrap: nowrap; + -ms-flex-wrap: nowrap; + flex-wrap: nowrap; + } + + .circuit-10 > li:not(:last-of-type) { + margin-bottom: 0; + margin-right: 16px; + } } - -`; +.circuit-2 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + margin-bottom: 24px; +} -exports[`Storyshots Components/Modal With Footer 1`] = ` .circuit-0 { - background-color: #FAFBFC; - border-color: #D8DDE1; - border-radius: 4px; - border-style: solid; - border-width: 1px; - box-shadow: inset 0 1px 0 1px rgba(255,255,255,0.06); - display: block; - color: #5C656F; - cursor: pointer; font-weight: 700; - width: auto; - height: auto; - text-align: center; - -webkit-text-decoration: none; - text-decoration: none; - font-size: 16px; + margin-bottom: 24px; + font-size: 17px; line-height: 24px; - padding: calc(8px - 0px) calc(24px - 0px); + margin-bottom: 0; } -.circuit-0:active { - background-color: #D8DDE1; - border-color: #9DA7B1; - box-shadow: inset 0 4px 8px 0 rgba(12,15,20,0.3); +@media (min-width:480px) { + .circuit-0 { + font-size: 17px; + line-height: 24px; + } } -.circuit-0:focus { - border-color: #9DA7B1; - border-width: 2px; - outline: 0; - padding: calc(8px - 1px) calc(24px - 1px); +.circuit-12 { + display: block; + width: 100%; + margin-top: 24px; } -.circuit-0:hover { - background-color: #D8DDE1; +@media (min-width:480px) { + .circuit-12 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + margin-top: 16px; + } } -.circuit-0:hover, -.circuit-0:active { - border-color: #9DA7B1; - border-width: 1px; - padding: calc(8px - 0px) calc(24px - 0px); +@media (min-width:480px) { + .circuit-12 { + -webkit-box-pack: end; + -webkit-justify-content: flex-end; + -ms-flex-pack: end; + justify-content: flex-end; + } } -.circuit-0[href] { - display: inline-block; +.circuit-4 { + font-weight: 400; + margin-bottom: 16px; + font-size: 16px; + line-height: 24px; } -.circuit-0:disabled, -.circuit-0[disabled] { - opacity: 0.4; - pointer-events: none; - -webkit-user-selectable: none; - -moz-user-selectable: none; - -ms-user-selectable: none; - user-selectable: none; +@media (min-width:480px) { + .circuit-4 { + font-size: 16px; + line-height: 24px; + } } - +
+

+ A modal +

+
+

+ Some text in the modal body. +

+
+
    +
  • + +
    • +
  • + +
    • +
+
+
`; -exports[`Storyshots Components/Modal With Header 1`] = ` +exports[`Storyshots Components/Modal/Embedded With Title 1`] = ` +.circuit-2 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + margin-bottom: 24px; +} + .circuit-0 { - background-color: #FAFBFC; - border-color: #D8DDE1; - border-radius: 4px; - border-style: solid; - border-width: 1px; - box-shadow: inset 0 1px 0 1px rgba(255,255,255,0.06); - display: block; - color: #5C656F; - cursor: pointer; font-weight: 700; - width: auto; - height: auto; - text-align: center; - -webkit-text-decoration: none; - text-decoration: none; + margin-bottom: 24px; + font-size: 17px; + line-height: 24px; + margin-bottom: 0; +} + +@media (min-width:480px) { + .circuit-0 { + font-size: 17px; + line-height: 24px; + } +} + +.circuit-4 { + font-weight: 400; + margin-bottom: 16px; font-size: 16px; line-height: 24px; - padding: calc(8px - 0px) calc(24px - 0px); } -.circuit-0:active { - background-color: #D8DDE1; - border-color: #9DA7B1; - box-shadow: inset 0 4px 8px 0 rgba(12,15,20,0.3); +@media (min-width:480px) { + .circuit-4 { + font-size: 16px; + line-height: 24px; + } +} + +.circuit-6 { + background-color: #FFFFFF; + border-radius: 4px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 4px 4px 0 rgba(12,15,20,0.06), 0 8px 8px 0 rgba(12,15,20,0.06); + padding: 16px 24px; + width: 100%; +} + +@media (max-width:479px) { + .circuit-6 { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + min-width: initial; + position: relative; + } +} + +
+
+

+ A title +

+
+

+ Hello world! +

+
+`; + +exports[`Storyshots Components/Modal/Embedded With Title And Close Button 1`] = ` +.circuit-7 { + -webkit-align-items: center; + -webkit-box-align: center; + -ms-flex-align: center; + align-items: center; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + margin-bottom: 24px; +} + +.circuit-0 { + font-weight: 700; + margin-bottom: 24px; + font-size: 17px; + line-height: 24px; + margin-bottom: 0; +} + +@media (min-width:480px) { + .circuit-0 { + font-size: 17px; + line-height: 24px; + } } -.circuit-0:focus { - border-color: #9DA7B1; - border-width: 2px; - outline: 0; - padding: calc(8px - 1px) calc(24px - 1px); +.circuit-5 { + padding: 0; + margin: 0; + display: inline-block; + background-color: transparent; + border: none; + cursor: pointer; + fill: #0F131A; + overflow: initial; + height: 16px; + width: 16px; } -.circuit-0:hover { - background-color: #D8DDE1; +.circuit-5:focus, +.circuit-5:active { + outline: none; } -.circuit-0:hover, -.circuit-0:active { - border-color: #9DA7B1; - border-width: 1px; - padding: calc(8px - 0px) calc(24px - 0px); +.circuit-5 > svg { + height: 100%; + width: 100%; } -.circuit-0[href] { - display: inline-block; +.circuit-2 { + border: 0; + -webkit-clip: rect(0 0 0 0); + clip: rect(0 0 0 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + white-space: nowrap; + width: 1px; } -.circuit-0:disabled, -.circuit-0[disabled] { - opacity: 0.4; - pointer-events: none; - -webkit-user-selectable: none; - -moz-user-selectable: none; - -ms-user-selectable: none; - user-selectable: none; +.circuit-9 { + font-weight: 400; + margin-bottom: 16px; + font-size: 16px; + line-height: 24px; } - -`; +@media (min-width:480px) { + .circuit-9 { + font-size: 16px; + line-height: 24px; + } +} -exports[`Storyshots Components/Modal With Title And Close Button 1`] = ` -.circuit-0 { - background-color: #FAFBFC; - border-color: #D8DDE1; +.circuit-11 { + background-color: #FFFFFF; border-radius: 4px; - border-style: solid; - border-width: 1px; - box-shadow: inset 0 1px 0 1px rgba(255,255,255,0.06); - display: block; - color: #5C656F; - cursor: pointer; - font-weight: 700; - width: auto; - height: auto; - text-align: center; - -webkit-text-decoration: none; - text-decoration: none; - font-size: 16px; - line-height: 24px; - padding: calc(8px - 0px) calc(24px - 0px); + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 4px 4px 0 rgba(12,15,20,0.06), 0 8px 8px 0 rgba(12,15,20,0.06); + padding: 16px 24px; + width: 100%; } -.circuit-0:active { - background-color: #D8DDE1; - border-color: #9DA7B1; - box-shadow: inset 0 4px 8px 0 rgba(12,15,20,0.3); +@media (max-width:479px) { + .circuit-11 { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + min-width: initial; + position: relative; + } } -.circuit-0:focus { - border-color: #9DA7B1; - border-width: 2px; - outline: 0; - padding: calc(8px - 1px) calc(24px - 1px); -} +
+
+

+ A modal +

+ +
+

+ Some text in the modal body. +

+
+`; -.circuit-0:hover { - background-color: #D8DDE1; +exports[`Storyshots Components/Modal/Embedded Without Close Button 1`] = ` +.circuit-0 { + font-weight: 400; + margin-bottom: 16px; + font-size: 16px; + line-height: 24px; } -.circuit-0:hover, -.circuit-0:active { - border-color: #9DA7B1; - border-width: 1px; - padding: calc(8px - 0px) calc(24px - 0px); +@media (min-width:480px) { + .circuit-0 { + font-size: 16px; + line-height: 24px; + } } -.circuit-0[href] { - display: inline-block; +.circuit-2 { + background-color: #FFFFFF; + border-radius: 4px; + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: justify; + -webkit-justify-content: space-between; + -ms-flex-pack: justify; + justify-content: space-between; + box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 4px 4px 0 rgba(12,15,20,0.06), 0 8px 8px 0 rgba(12,15,20,0.06); + padding: 16px 24px; + width: 100%; } -.circuit-0:disabled, -.circuit-0[disabled] { - opacity: 0.4; - pointer-events: none; - -webkit-user-selectable: none; - -moz-user-selectable: none; - -ms-user-selectable: none; - user-selectable: none; +@media (max-width:479px) { + .circuit-2 { + border-bottom-left-radius: 0; + border-bottom-right-radius: 0; + min-width: initial; + position: relative; + } } - +

+ Some text in the modal body. +

+ `; -exports[`Storyshots Components/Modal Without Close Button 1`] = ` -.circuit-0 { +exports[`Storyshots Components/Notification Alert 1`] = ` +.circuit-4 { background-color: #FAFBFC; border-color: #D8DDE1; border-radius: 4px; @@ -8615,39 +8720,39 @@ exports[`Storyshots Components/Modal Without Close Button 1`] = ` text-decoration: none; font-size: 16px; line-height: 24px; - padding: calc(8px - 0px) calc(24px - 0px); + padding: calc(4px - 0px) calc(16px - 0px); } -.circuit-0:active { +.circuit-4:active { background-color: #D8DDE1; border-color: #9DA7B1; box-shadow: inset 0 4px 8px 0 rgba(12,15,20,0.3); } -.circuit-0:focus { +.circuit-4:focus { border-color: #9DA7B1; border-width: 2px; outline: 0; - padding: calc(8px - 1px) calc(24px - 1px); + padding: calc(4px - 1px) calc(16px - 1px); } -.circuit-0:hover { +.circuit-4:hover { background-color: #D8DDE1; } -.circuit-0:hover, -.circuit-0:active { +.circuit-4:hover, +.circuit-4:active { border-color: #9DA7B1; border-width: 1px; - padding: calc(8px - 0px) calc(24px - 0px); + padding: calc(4px - 0px) calc(16px - 0px); } -.circuit-0[href] { +.circuit-4[href] { display: inline-block; } -.circuit-0:disabled, -.circuit-0[disabled] { +.circuit-4:disabled, +.circuit-4[disabled] { opacity: 0.4; pointer-events: none; -webkit-user-selectable: none; @@ -8656,18 +8761,22 @@ exports[`Storyshots Components/Modal Without Close Button 1`] = ` user-selectable: none; } - -`; +.circuit-2 { + font-weight: 700; + margin-bottom: 24px; + font-size: 17px; + line-height: 24px; + margin-bottom: 0; +} -exports[`Storyshots Components/Modal/Embedded Base 1`] = ` -.circuit-0 { - background-color: #FFFFFF; - border-radius: 4px; +@media (min-width:480px) { + .circuit-2 { + font-size: 17px; + line-height: 24px; + } +} + +.circuit-8 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -8675,199 +8784,248 @@ exports[`Storyshots Components/Modal/Embedded Base 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 4px 4px 0 rgba(12,15,20,0.06), 0 8px 8px 0 rgba(12,15,20,0.06); - padding: 16px 24px; - width: 100%; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; } -@media (max-width:479px) { - .circuit-0 { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - min-width: initial; - position: relative; +@media (min-width:480px) { + .circuit-8 { + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; } } -
- Hello World! -
-`; - -exports[`Storyshots Components/Modal/Embedded With Custom Styles 1`] = ` .circuit-0 { - font-weight: 400; - margin-bottom: 16px; - font-size: 16px; - line-height: 24px; + display: block; + margin: 0 0 16px 0; + -webkit-box-flex: 0; + -webkit-flex-grow: 0; + -ms-flex-positive: 0; + flex-grow: 0; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + line-height: 0; } @media (min-width:480px) { .circuit-0 { - font-size: 16px; - line-height: 24px; + margin: 0 16px 0 0; } } -.circuit-8 { - width: 100%; - padding: 0; - height: 50vh; -} - .circuit-6 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: stretch; - -webkit-justify-content: stretch; - -ms-flex-pack: stretch; - justify-content: stretch; - -webkit-align-items: stretch; - -webkit-box-align: stretch; - -ms-flex-align: stretch; - align-items: stretch; - -webkit-flex-wrap: nowrap; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - height: 100%; - background: #fff; -} - -.circuit-2 { - 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; - width: 50%; - -webkit-box-pack: center; - -webkit-justify-content: center; - -ms-flex-pack: center; - justify-content: center; - padding: 24px 18px; + display: block; + padding-left: 24px; + margin-top: 16px; + margin-left: auto; + -webkit-box-flex: 0; + -webkit-flex-grow: 0; + -ms-flex-positive: 0; + flex-grow: 0; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; } -.circuit-4 { - height: 100%; - width: 50%; - background: no-repeat center / cover url('https://source.unsplash.com/random'); +@media (min-width:480px) { + .circuit-6 { + margin-top: 0; + } }
-
-

- A nice custom modal for special cases. -

+
+ notification-error.svg
-
+

+ Your transaction has failed +

+
+
`; -exports[`Storyshots Components/Modal/Embedded With Footer 1`] = ` -.circuit-8 { - background-color: #FAFBFC; - border-color: #D8DDE1; - border-radius: 4px; - border-style: solid; - border-width: 1px; - box-shadow: inset 0 1px 0 1px rgba(255,255,255,0.06); - display: block; - color: #5C656F; - cursor: pointer; +exports[`Storyshots Components/Notification Base 1`] = ` +.circuit-0 { font-weight: 700; - width: auto; - height: auto; - text-align: center; - -webkit-text-decoration: none; - text-decoration: none; + margin-bottom: 24px; + font-size: 17px; + line-height: 24px; + margin-bottom: 0; +} + +@media (min-width:480px) { + .circuit-0 { + font-size: 17px; + line-height: 24px; + } +} + +.circuit-2 { + font-weight: 400; + margin-bottom: 16px; font-size: 16px; line-height: 24px; - background-color: #3388FF; - border-color: #1760CE; - color: #FFFFFF; - padding: calc(8px - 0px) calc(24px - 0px); + margin-bottom: 0; } -.circuit-8:active { - background-color: #D8DDE1; - border-color: #9DA7B1; - box-shadow: inset 0 4px 8px 0 rgba(12,15,20,0.3); +@media (min-width:480px) { + .circuit-2 { + font-size: 16px; + line-height: 24px; + } } -.circuit-8:focus { - border-color: #9DA7B1; - border-width: 2px; - outline: 0; - padding: calc(8px - 1px) calc(24px - 1px); +.circuit-4 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; } -.circuit-8:hover { - background-color: #D8DDE1; +@media (min-width:480px) { + .circuit-4 { + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + } } -.circuit-8:hover, -.circuit-8:active { - border-color: #9DA7B1; - border-width: 1px; - padding: calc(8px - 0px) calc(24px - 0px); +
+
+

+ New Feature — Intelligent Reporting +

+

+ Get automatic insights into your business statistics with one click. +

+
+
+`; + +exports[`Storyshots Components/Notification Success 1`] = ` +.circuit-2 { + font-weight: 700; + margin-bottom: 24px; + font-size: 17px; + line-height: 24px; + margin-bottom: 0; } -.circuit-8[href] { - display: inline-block; +@media (min-width:480px) { + .circuit-2 { + font-size: 17px; + line-height: 24px; + } } -.circuit-8:disabled, -.circuit-8[disabled] { - opacity: 0.4; - pointer-events: none; - -webkit-user-selectable: none; - -moz-user-selectable: none; - -ms-user-selectable: none; - user-selectable: none; +.circuit-4 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; } -.circuit-8:active { - background-color: #1760CE; - border-color: #003C8B; +@media (min-width:480px) { + .circuit-4 { + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + } } -.circuit-8:focus { - border-color: #1760CE; +.circuit-0 { + display: block; + margin: 0 0 16px 0; + -webkit-box-flex: 0; + -webkit-flex-grow: 0; + -ms-flex-positive: 0; + flex-grow: 0; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + line-height: 0; } -.circuit-8:hover { - background-color: #1760CE; +@media (min-width:480px) { + .circuit-0 { + margin: 0 16px 0 0; + } } -.circuit-8:hover, -.circuit-8:active { - border-color: #003C8B; -} +
+
+
+ notification-success.svg +
+
+

+ Transaction successfully refunded +

+
+`; +exports[`Storyshots Components/Notification Warning 1`] = ` .circuit-6 { background-color: #FAFBFC; border-color: #D8DDE1; @@ -8886,12 +9044,7 @@ exports[`Storyshots Components/Modal/Embedded With Footer 1`] = ` text-decoration: none; font-size: 16px; line-height: 24px; - padding: calc(8px - 0px) calc(24px - 0px); - background-color: transparent; - border-color: #212933; - border-width: 0; - box-shadow: none; - color: #5C656F; + padding: calc(4px - 0px) calc(16px - 0px); } .circuit-6:active { @@ -8904,7 +9057,7 @@ exports[`Storyshots Components/Modal/Embedded With Footer 1`] = ` border-color: #9DA7B1; border-width: 2px; outline: 0; - padding: calc(8px - 1px) calc(24px - 1px); + padding: calc(4px - 1px) calc(16px - 1px); } .circuit-6:hover { @@ -8915,175 +9068,39 @@ exports[`Storyshots Components/Modal/Embedded With Footer 1`] = ` .circuit-6:active { border-color: #9DA7B1; border-width: 1px; - padding: calc(8px - 0px) calc(24px - 0px); + padding: calc(4px - 0px) calc(16px - 0px); } .circuit-6[href] { display: inline-block; } -.circuit-6:disabled, -.circuit-6[disabled] { - opacity: 0.4; - pointer-events: none; - -webkit-user-selectable: none; - -moz-user-selectable: none; - -ms-user-selectable: none; - user-selectable: none; -} - -.circuit-6:active { - background-color: transparent; - border-color: #212933; - border-width: 0; - box-shadow: none; -} - -.circuit-6:focus { - border-color: #212933; - border-width: 2px; - box-shadow: none; - padding: calc(8px - 2px) calc(24px - 2px); -} - -.circuit-6:hover { - background-color: transparent; - border-width: 0; - border-color: #212933; -} - -.circuit-6:active, -.circuit-6:hover, -.circuit-6:hover:focus, -.circuit-6:active:focus { - padding: calc(8px - 0px) calc(24px - 0px); -} - -.circuit-6:active, -.circuit-6:hover, -.circuit-6:focus { - color: #212933; -} - -.circuit-6:active:focus, -.circuit-6:hover:focus { - border-color: #212933; - border-width: 2px; - box-shadow: none; - padding: calc(8px - 2px) calc(24px - 2px); -} - -.circuit-10 { - list-style-type: none; - width: 100%; - -webkit-box-pack: end; - -webkit-justify-content: flex-end; - -ms-flex-pack: end; - justify-content: flex-end; -} - -.circuit-10 > li:not(:last-of-type) { - margin-bottom: 16px; -} - -.circuit-10 > li > * { - width: 100%; -} - -@media (min-width:480px) { - .circuit-10 { - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-wrap: nowrap; - -ms-flex-wrap: nowrap; - flex-wrap: nowrap; - } - - .circuit-10 > li:not(:last-of-type) { - margin-bottom: 0; - margin-right: 16px; - } -} - -.circuit-2 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - margin-bottom: 24px; -} - -.circuit-0 { - font-weight: 700; - margin-bottom: 24px; - font-size: 17px; - line-height: 24px; - margin-bottom: 0; -} - -@media (min-width:480px) { - .circuit-0 { - font-size: 17px; - line-height: 24px; - } -} - -.circuit-12 { - display: block; - width: 100%; - margin-top: 24px; -} - -@media (min-width:480px) { - .circuit-12 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - margin-top: 16px; - } -} - -@media (min-width:480px) { - .circuit-12 { - -webkit-box-pack: end; - -webkit-justify-content: flex-end; - -ms-flex-pack: end; - justify-content: flex-end; - } -} - +.circuit-6:disabled, +.circuit-6[disabled] { + opacity: 0.4; + pointer-events: none; + -webkit-user-selectable: none; + -moz-user-selectable: none; + -ms-user-selectable: none; + user-selectable: none; +} + .circuit-4 { - font-weight: 400; - margin-bottom: 16px; - font-size: 16px; + font-weight: 700; + margin-bottom: 24px; + font-size: 17px; line-height: 24px; + margin-bottom: 0; } @media (min-width:480px) { .circuit-4 { - font-size: 16px; + font-size: 17px; line-height: 24px; } } -.circuit-14 { - background-color: #FFFFFF; - border-radius: 4px; +.circuit-10 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -9091,179 +9108,100 @@ exports[`Storyshots Components/Modal/Embedded With Footer 1`] = ` -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 4px 4px 0 rgba(12,15,20,0.06), 0 8px 8px 0 rgba(12,15,20,0.06); - padding: 16px 24px; - width: 100%; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; } -@media (max-width:479px) { - .circuit-14 { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - min-width: initial; - position: relative; +@media (min-width:480px) { + .circuit-10 { + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; } } -
-
-

- A modal -

-
-

- Some text in the modal body. -

-
-
    -
  • - -
    • -
  • - -
    • -
-
-
-`; - -exports[`Storyshots Components/Modal/Embedded With Title 1`] = ` .circuit-2 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - margin-bottom: 24px; -} - -.circuit-0 { - font-weight: 700; - margin-bottom: 24px; - font-size: 17px; - line-height: 24px; - margin-bottom: 0; + display: block; + margin: 0 0 16px 0; + -webkit-box-flex: 0; + -webkit-flex-grow: 0; + -ms-flex-positive: 0; + flex-grow: 0; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + line-height: 0; } @media (min-width:480px) { - .circuit-0 { - font-size: 17px; - line-height: 24px; + .circuit-2 { + margin: 0 16px 0 0; } } -.circuit-4 { - font-weight: 400; - margin-bottom: 16px; - font-size: 16px; - line-height: 24px; -} - -@media (min-width:480px) { - .circuit-4 { - font-size: 16px; - line-height: 24px; - } +.circuit-0 rect { + fill: #D8A413; } -.circuit-6 { - background-color: #FFFFFF; - border-radius: 4px; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-flex-direction: column; - -ms-flex-direction: column; - flex-direction: column; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 4px 4px 0 rgba(12,15,20,0.06), 0 8px 8px 0 rgba(12,15,20,0.06); - padding: 16px 24px; - width: 100%; +.circuit-8 { + display: block; + padding-left: 24px; + margin-top: 16px; + margin-left: auto; + -webkit-box-flex: 0; + -webkit-flex-grow: 0; + -ms-flex-positive: 0; + flex-grow: 0; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + -webkit-align-self: center; + -ms-flex-item-align: center; + align-self: center; } -@media (max-width:479px) { - .circuit-6 { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - min-width: initial; - position: relative; +@media (min-width:480px) { + .circuit-8 { + margin-top: 0; } }
-
-

- A title -

-
-

+

+

- Hello world! -

+ You still need to verify your account +

+
+ +
`; -exports[`Storyshots Components/Modal/Embedded With Title And Close Button 1`] = ` -.circuit-7 { - -webkit-align-items: center; - -webkit-box-align: center; - -ms-flex-align: center; - align-items: center; - display: -webkit-box; - display: -webkit-flex; - display: -ms-flexbox; - display: flex; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - margin-bottom: 24px; -} - +exports[`Storyshots Components/Notification/NotificationBanner Base 1`] = ` .circuit-0 { font-weight: 700; margin-bottom: 24px; @@ -9274,64 +9212,27 @@ exports[`Storyshots Components/Modal/Embedded With Title And Close Button 1`] = @media (min-width:480px) { .circuit-0 { - font-size: 17px; - line-height: 24px; - } -} - -.circuit-5 { - padding: 0; - margin: 0; - display: inline-block; - background-color: transparent; - border: none; - cursor: pointer; - fill: #0F131A; - overflow: initial; - height: 16px; - width: 16px; -} - -.circuit-5:focus, -.circuit-5:active { - outline: none; -} - -.circuit-5 > svg { - height: 100%; - width: 100%; + font-size: 17px; + line-height: 24px; + } } .circuit-2 { - border: 0; - -webkit-clip: rect(0 0 0 0); - clip: rect(0 0 0 0); - height: 1px; - margin: -1px; - overflow: hidden; - padding: 0; - position: absolute; - white-space: nowrap; - width: 1px; -} - -.circuit-9 { font-weight: 400; margin-bottom: 16px; font-size: 16px; line-height: 24px; + margin-bottom: 0; } @media (min-width:480px) { - .circuit-9 { + .circuit-2 { font-size: 16px; line-height: 24px; } } -.circuit-11 { - background-color: #FFFFFF; - border-radius: 4px; +.circuit-4 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -9339,77 +9240,170 @@ exports[`Storyshots Components/Modal/Embedded With Title And Close Button 1`] = -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; - -webkit-box-pack: justify; - -webkit-justify-content: space-between; - -ms-flex-pack: justify; - justify-content: space-between; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 4px 4px 0 rgba(12,15,20,0.06), 0 8px 8px 0 rgba(12,15,20,0.06); - padding: 16px 24px; - width: 100%; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; } -@media (max-width:479px) { - .circuit-11 { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - min-width: initial; - position: relative; +@media (min-width:480px) { + .circuit-4 { + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; } } +.circuit-11 { + min-height: 5rem; +} + +.circuit-10 { + position: absolute; + bottom: 0; + left: 0; + right: 0; +} + +.circuit-8 { + width: 100%; + background-color: #FFFFFF; + box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 0 1px 0 rgba(12,15,20,0.06), 0 2px 2px 0 rgba(12,15,20,0.06); +} + +.circuit-6 { + padding: 16px 24px; +} +
-
-

- A modal -

- -
-

- Some text in the modal body. -

+
+
`; -exports[`Storyshots Components/Modal/Embedded Without Close Button 1`] = ` -.circuit-0 { - font-weight: 400; - margin-bottom: 16px; - font-size: 16px; +exports[`Storyshots Components/Notification/NotificationList Base 1`] = ` +.circuit-2 { + font-weight: 700; + margin-bottom: 24px; + font-size: 17px; line-height: 24px; + margin-bottom: 0; } @media (min-width:480px) { - .circuit-0 { - font-size: 16px; + .circuit-2 { + font-size: 17px; line-height: 24px; } } -.circuit-2 { +.circuit-4 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + -webkit-box-pack: start; + -webkit-justify-content: flex-start; + -ms-flex-pack: start; + justify-content: flex-start; + -webkit-align-items: flex-start; + -webkit-box-align: flex-start; + -ms-flex-align: flex-start; + align-items: flex-start; +} + +@media (min-width:480px) { + .circuit-4 { + -webkit-flex-direction: row; + -ms-flex-direction: row; + flex-direction: row; + } +} + +.circuit-0 { + display: block; + margin: 0 0 16px 0; + -webkit-box-flex: 0; + -webkit-flex-grow: 0; + -ms-flex-positive: 0; + flex-grow: 0; + -webkit-flex-shrink: 0; + -ms-flex-negative: 0; + flex-shrink: 0; + line-height: 0; +} + +@media (min-width:480px) { + .circuit-0 { + margin: 0 16px 0 0; + } +} + +.circuit-8 { + display: -webkit-box; + display: -webkit-flex; + display: -ms-flexbox; + display: flex; + -webkit-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + width: 400px; + max-width: 90vw; + max-width: calc(100vw - 48px); +} + +.circuit-8 > * { + margin-top: 16px; +} + +.circuit-8 > *:first-child { + margin-top: 0; +} + +@media (max-width:767px) { + .circuit-8 { + max-width: none; + width: 100%; + } +} + +.circuit-6 { background-color: #FFFFFF; border-radius: 4px; display: -webkit-box; @@ -9423,30 +9417,36 @@ exports[`Storyshots Components/Modal/Embedded Without Close Button 1`] = ` -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; - box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 4px 4px 0 rgba(12,15,20,0.06), 0 8px 8px 0 rgba(12,15,20,0.06); - padding: 16px 24px; - width: 100%; -} - -@media (max-width:479px) { - .circuit-2 { - border-bottom-left-radius: 0; - border-bottom-right-radius: 0; - min-width: initial; - position: relative; - } + box-shadow: 0 0 0 1px rgba(12,15,20,0.02), 0 2px 2px 0 rgba(12,15,20,0.06), 0 4px 4px 0 rgba(12,15,20,0.06); + padding: 16px 16px; } -
-

- Some text in the modal body. -

-
+
+
+
+ notification-success.svg +
+
+

+ Transaction successfully refunded +

+
+ + `; exports[`Storyshots Components/Pagination Base 1`] = ` @@ -14919,7 +14919,7 @@ HTMLCollection [ ] `; -exports[`Storyshots Forms/InlineNotification Alert 1`] = ` +exports[`Storyshots Forms/InlineMessage Alert 1`] = ` .circuit-0 { color: #DB4D4D; position: relative; @@ -14947,7 +14947,7 @@ exports[`Storyshots Forms/InlineNotification Alert 1`] = `

`; -exports[`Storyshots Forms/InlineNotification Base 1`] = ` +exports[`Storyshots Forms/InlineMessage Base 1`] = ` .circuit-4 { background-color: #FFFFFF; border-radius: 4px; @@ -15017,7 +15017,7 @@ exports[`Storyshots Forms/InlineNotification Base 1`] = ` `; -exports[`Storyshots Forms/InlineNotification Size 1`] = ` +exports[`Storyshots Forms/InlineMessage Size 1`] = ` .circuit-0 { color: #0F131A; position: relative; @@ -15045,7 +15045,7 @@ exports[`Storyshots Forms/InlineNotification Size 1`] = `

`; -exports[`Storyshots Forms/InlineNotification Success 1`] = ` +exports[`Storyshots Forms/InlineMessage Success 1`] = ` .circuit-0 { color: #0F131A; position: relative; @@ -15073,7 +15073,7 @@ exports[`Storyshots Forms/InlineNotification Success 1`] = `

`; -exports[`Storyshots Forms/InlineNotification Warning 1`] = ` +exports[`Storyshots Forms/InlineMessage Warning 1`] = ` .circuit-0 { color: #0F131A; position: relative; diff --git a/src/components/InlineMessage/InlineMessage.docs.mdx b/src/components/InlineMessage/InlineMessage.docs.mdx new file mode 100644 index 0000000000..7cb0ae881d --- /dev/null +++ b/src/components/InlineMessage/InlineMessage.docs.mdx @@ -0,0 +1,43 @@ +import { Status, Props, Story } from '../../../.storybook/components'; +import InlineMessage from './InlineMessage'; + +# InlineMessage + + + +Inline message is a component that provides a short contextual message about an action taken by a user within the same card structure that they are in. + + + + +## When to use it + +Use it when we need to provide contextual information that highlights errors or warnings after the information has been inputted by a user. + +## Usage guidelines + +- **Do** always place the inline message above the primary call to action +- **Do** make it clear for our users what they need to do in order to fix the possible error +- **Do not** place an inline message in another card, it should always be in the same card as the input it is referring to + +## Component variants + +### Success + +Used to provide positive feedback without taking the user to another screen, such as updating the configuration +on a settings page. + + + +### Warning + +Used to warn users regarding information that is not obligatory to fill or input, but it +could provide additional help if the fill it. + + + +### Alert + +The most common inline message type. Used to provide feedback that we cannot proceed forward in completing a task for the user (such as a login) if they don't fix what's wrong. Remember to always provide concrete instructions on how to solve the problem. + + diff --git a/src/components/InlineNotification/InlineNotification.js b/src/components/InlineMessage/InlineMessage.js similarity index 76% rename from src/components/InlineNotification/InlineNotification.js rename to src/components/InlineMessage/InlineMessage.js index e952241da4..86f157d088 100644 --- a/src/components/InlineNotification/InlineNotification.js +++ b/src/components/InlineMessage/InlineMessage.js @@ -22,7 +22,7 @@ const { SUCCESS, DANGER, WARNING } = colorNames; const { MEGA, GIGA } = sizes; const baseStyles = css` - label: inline-notification; + label: inline-message; `; const marginStyles = ({ noMargin }) => @@ -48,7 +48,7 @@ const createLeftBorderStyles = colorName => ({ theme, size, type }) => { return ( colorName === type && css` - label: ${`inline-notification--${type}`}; + label: ${`inline-message--${type}`}; color: ${textColors[type]}; position: relative; margin-bottom: ${theme.spacings.mega}; @@ -74,9 +74,9 @@ const warningStyles = createLeftBorderStyles(WARNING); const dangerStyles = createLeftBorderStyles(DANGER); /** - * An inline notification displayed inside a Card. + * An inline message displayed inside a Card. */ -const InlineNotification = styled('p')( +const InlineMessage = styled('p')( baseStyles, dangerStyles, successStyles, @@ -84,38 +84,38 @@ const InlineNotification = styled('p')( marginStyles ); -InlineNotification.DANGER = DANGER; -InlineNotification.SUCCESS = SUCCESS; -InlineNotification.WARNING = WARNING; +InlineMessage.DANGER = DANGER; +InlineMessage.SUCCESS = SUCCESS; +InlineMessage.WARNING = WARNING; -InlineNotification.MEGA = MEGA; -InlineNotification.GIGA = GIGA; +InlineMessage.MEGA = MEGA; +InlineMessage.GIGA = GIGA; -InlineNotification.propTypes = { +InlineMessage.propTypes = { /** - * Indicates the color of the left border and text in the notification. + * Indicates the color of the left border and text in the message. */ type: PropTypes.oneOf([ - InlineNotification.DANGER, - InlineNotification.SUCCESS, - InlineNotification.WARNING + InlineMessage.DANGER, + InlineMessage.SUCCESS, + InlineMessage.WARNING ]), /** * Should correspond to the size provided to the surrounding Card component. */ - size: PropTypes.oneOf([InlineNotification.MEGA, InlineNotification.GIGA]), + size: PropTypes.oneOf([InlineMessage.MEGA, InlineMessage.GIGA]), /** * Removes the default bottom margin from the text. */ noMargin: PropTypes.bool }; -InlineNotification.defaultProps = { - size: InlineNotification.GIGA, +InlineMessage.defaultProps = { + size: InlineMessage.GIGA, noMargin: false }; /** * @component */ -export default InlineNotification; +export default InlineMessage; diff --git a/src/components/InlineNotification/InlineNotification.spec.js b/src/components/InlineMessage/InlineMessage.spec.js similarity index 69% rename from src/components/InlineNotification/InlineNotification.spec.js rename to src/components/InlineMessage/InlineMessage.spec.js index e774c2f3e3..15266df58d 100644 --- a/src/components/InlineNotification/InlineNotification.spec.js +++ b/src/components/InlineMessage/InlineMessage.spec.js @@ -15,44 +15,35 @@ import React from 'react'; -import InlineNotification from '.'; +import InlineMessage from '.'; -describe('InlineNotification', () => { +describe('InlineMessage', () => { /** * Style tests. */ it('should render with default styles', () => { - const actual = create(); + const actual = create(); expect(actual).toMatchSnapshot(); }); it('should render with success styles', () => { - const actual = create( - - ); + const actual = create(); expect(actual).toMatchSnapshot(); }); it('should render with warning styles', () => { - const actual = create( - - ); + const actual = create(); expect(actual).toMatchSnapshot(); }); it('should render with danger styles', () => { - const actual = create( - - ); + const actual = create(); expect(actual).toMatchSnapshot(); }); it('should render with giga spacing', () => { const actual = create( - + ); expect(actual).toMatchSnapshot(); }); @@ -61,7 +52,7 @@ describe('InlineNotification', () => { * Accessibility tests. */ it('should meet accessibility guidelines', async () => { - const wrapper = renderToHtml(); + const wrapper = renderToHtml(); const actual = await axe(wrapper); expect(actual).toHaveNoViolations(); }); diff --git a/src/components/InlineNotification/InlineNotification.story.js b/src/components/InlineMessage/InlineMessage.story.js similarity index 62% rename from src/components/InlineNotification/InlineNotification.story.js rename to src/components/InlineMessage/InlineMessage.story.js index 4b63f6e39f..efb74d7fc5 100644 --- a/src/components/InlineNotification/InlineNotification.story.js +++ b/src/components/InlineMessage/InlineMessage.story.js @@ -15,55 +15,49 @@ import React from 'react'; -import docs from './InlineNotification.docs.mdx'; -import InlineNotification from './InlineNotification'; +import docs from './InlineMessage.docs.mdx'; +import InlineMessage from './InlineMessage'; import Card from '../Card'; import Text from '../Text'; export default { - title: 'Forms/InlineNotification', - component: InlineNotification, + title: 'Forms/InlineMessage', + component: InlineMessage, parameters: { docs: { page: docs }, - jest: ['InlineNotification'] + jest: ['InlineMessage'] } }; export const base = () => ( - + Something might go terribly wrong. - + Sorry that is how it is. ); export const success = () => ( - + Something has gone wonderfully right. - + ); export const warning = () => ( - + Something might go sideways. - + ); export const alert = () => ( - + Something has gone terribly wrong. - + ); export const size = () => ( - + Something might go terribly wrong with a bigger card. - + ); diff --git a/src/components/InlineNotification/__snapshots__/InlineNotification.spec.js.snap b/src/components/InlineMessage/__snapshots__/InlineMessage.spec.js.snap similarity index 79% rename from src/components/InlineNotification/__snapshots__/InlineNotification.spec.js.snap rename to src/components/InlineMessage/__snapshots__/InlineMessage.spec.js.snap index 0ec4cc4c58..a23c340fe1 100644 --- a/src/components/InlineNotification/__snapshots__/InlineNotification.spec.js.snap +++ b/src/components/InlineMessage/__snapshots__/InlineMessage.spec.js.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`InlineNotification should render with danger styles 1`] = ` +exports[`InlineMessage should render with danger styles 1`] = ` .circuit-0 { color: #DB4D4D; position: relative; @@ -26,13 +26,13 @@ exports[`InlineNotification should render with danger styles 1`] = ` /> `; -exports[`InlineNotification should render with default styles 1`] = ` +exports[`InlineMessage should render with default styles 1`] = `

`; -exports[`InlineNotification should render with giga spacing 1`] = ` +exports[`InlineMessage should render with giga spacing 1`] = ` .circuit-0 { color: #DB4D4D; position: relative; @@ -58,7 +58,7 @@ exports[`InlineNotification should render with giga spacing 1`] = ` /> `; -exports[`InlineNotification should render with success styles 1`] = ` +exports[`InlineMessage should render with success styles 1`] = ` .circuit-0 { color: #0F131A; position: relative; @@ -84,7 +84,7 @@ exports[`InlineNotification should render with success styles 1`] = ` /> `; -exports[`InlineNotification should render with warning styles 1`] = ` +exports[`InlineMessage should render with warning styles 1`] = ` .circuit-0 { color: #0F131A; position: relative; diff --git a/src/components/InlineNotification/index.js b/src/components/InlineMessage/index.js similarity index 86% rename from src/components/InlineNotification/index.js rename to src/components/InlineMessage/index.js index d5e42e1ca1..20b93ac351 100644 --- a/src/components/InlineNotification/index.js +++ b/src/components/InlineMessage/index.js @@ -13,6 +13,6 @@ * limitations under the License. */ -import InlineNotification from './InlineNotification'; +import InlineMessage from './InlineMessage'; -export default InlineNotification; +export default InlineMessage; diff --git a/src/components/InlineNotification/InlineNotification.docs.mdx b/src/components/InlineNotification/InlineNotification.docs.mdx deleted file mode 100644 index 78cf473155..0000000000 --- a/src/components/InlineNotification/InlineNotification.docs.mdx +++ /dev/null @@ -1,44 +0,0 @@ -import { Status, Props, Story } from '../../../.storybook/components'; -import InlineNotification from './InlineNotification'; - -# Inline notification - -Likely to be renamed. - -Inline notification is a component that provides a short contextual message about an action taken by a user within the same card structure that they are in. - - - - - -## When to use it - -Use it when we need to provide contextual information that highlights errors or warnings after the information has been inputted by a user. - -## Usage guidelines - -- **Do** always place the inline notification above the primary call to action -- **Do** make it clear for our users what they need to do in order to fix the possible error -- **Do not** place an inline notification in another card, it should always be in the same card as the input it is referring to - -## Component variants - -### Success - -Used to provide positive feedback without taking the user to another screen, such as updating the configuration -on a settings page. - - - -### Warning - -Used to warn users regarding information that is not obligatory to fill or input, but it -could provide additional help if the fill it. - - - -### Alert - -The most common inline notification type. Used to provide feedback that we cannot proceed forward in completing a task for the user (such as a login) if they don't fix what's wrong. Remember to always provide concrete instructions on how to solve the problem. - - diff --git a/src/components/Message/Message.docs.mdx b/src/components/Message/Message.docs.mdx deleted file mode 100644 index 8a67b37812..0000000000 --- a/src/components/Message/Message.docs.mdx +++ /dev/null @@ -1,74 +0,0 @@ -import { Status, Props, Story } from '../../../.storybook/components'; -import Message, { MessageIcon, MessageButton } from '.'; -import NotificationBanner from '../NotificationBanner'; -import NotificationList from '../NotificationList'; - -# Message - -Likely to be renamed. - -Messages are a quick and subtle way of providing contextual feedback for our users through floating -or fixed cards with a semantical meaning (either success, danger or attention). - - - - - - - -## When to use it - -Messages are used to serve our users with subtle informative snippets or feedback -on a given action. - -## Usage guidelines - -- **Do** allow users to dismiss all messages unless immediate action is required. -- **Do** direct users to the relevant place with a CTA if action is required. -- **Do** use feedback messages to validate an action has been completed. -- **Do** use the correct badge colour to signify sentiment of a message. -- **Do not** use attention messages unless a vital action is required. -- **Do not** use the messages component if our feedback for the user is super critical, - such as an order's payment confirmation. Its subtle aspect could make it hard for them to have - a strong confirmation of what just happened. - -## Component variations - -### Feedback messages - -Used to provide feedback to a user after an action -has been taken. These notifications disappear automatically. - - - -### Informative messages - -Can contain information which isn't essential but may -be useful to the user. (e.g. New feature announcement) It is recommended -to use a call to action. - - - -### Attention messages - -When action is required by the user, attention -messages should be used and should clearly highlight which action is -required. **A call to action must be displayed.** - - - -## Notification Banner - -You can display a banner with a message with `NotificationBanner`, and position it at the top or bottom of a view. - - - - - -## Notification List - -You can display a list of messages with `NotificationList`. - - - - diff --git a/src/components/Notification/Notification.docs.mdx b/src/components/Notification/Notification.docs.mdx new file mode 100644 index 0000000000..233d659232 --- /dev/null +++ b/src/components/Notification/Notification.docs.mdx @@ -0,0 +1,74 @@ +import { Status, Props, Story } from '../../../.storybook/components'; +import Notification, { NotificationIcon, NotificationButton } from '.'; +import NotificationBanner from '../NotificationBanner'; +import NotificationList from '../NotificationList'; + +# Notification + + + +Notifications are a quick and subtle way of providing contextual feedback for our users through floating +or fixed cards with a semantical meaning (either success, danger or attention). + + + + + + + +## When to use it + +Notifications are used to serve our users with subtle informative snippets or feedback +on a given action. + +## Usage guidelines + +- **Do** allow users to dismiss all notifications unless immediate action is required. +- **Do** direct users to the relevant place with a CTA if action is required. +- **Do** use feedback notifications to validate an action has been completed. +- **Do** use the correct badge colour to signify sentiment of a notification. +- **Do not** use attention notifications unless a vital action is required. +- **Do not** use the notifications component if our feedback for the user is super critical, + such as an order's payment confirmation. Its subtle aspect could make it hard for them to have + a strong confirmation of what just happened. + +## Component variations + +### Feedback notifications + +Used to provide feedback to a user after an action +has been taken. These notifications disappear automatically. + + + +### Informative notifications + +Can contain information which isn't essential but may +be useful to the user. (e.g. New feature announcement) It is recommended +to use a call to action. + + + +### Attention notifications + +When action is required by the user, attention +notifications should be used and should clearly highlight which action is +required. **A call to action must be displayed.** + + + +## NotificationBanner + +You can display a banner with a notification with `NotificationBanner`, and position it at the top or bottom of a view. + + + + + +## NotificationList + +You can display a list of notifications with `NotificationList`. + + + + diff --git a/src/components/Message/Message.js b/src/components/Notification/Notification.js similarity index 76% rename from src/components/Message/Message.js rename to src/components/Notification/Notification.js index f4e6476607..06d2df3d5f 100644 --- a/src/components/Message/Message.js +++ b/src/components/Notification/Notification.js @@ -19,7 +19,7 @@ import { css } from '@emotion/core'; import { childrenPropType } from '../../util/shared-prop-types'; const baseStyles = ({ theme }) => css` - label: message; + label: notification; display: flex; flex-direction: column; justify-content: flex-start; @@ -31,14 +31,14 @@ const baseStyles = ({ theme }) => css` `; /** - * A Message component for alerts, updates and notifications. + * A Notification component for alerts, updates and notifications. */ -const Message = styled('div')(baseStyles); +const Notification = styled('div')(baseStyles); -Message.propTypes = { +Notification.propTypes = { /** - * Content to be rendered inside the Message. - * Supports a special MessageIcon and MessageButton. + * Content to be rendered inside the Notification. + * Supports a special NotificationIcon and NotificationButton. */ children: childrenPropType }; @@ -46,4 +46,4 @@ Message.propTypes = { /** * @component */ -export default Message; +export default Notification; diff --git a/src/components/Message/Message.spec.js b/src/components/Notification/Notification.spec.js similarity index 85% rename from src/components/Message/Message.spec.js rename to src/components/Notification/Notification.spec.js index a391699da6..ae5bea40e8 100644 --- a/src/components/Message/Message.spec.js +++ b/src/components/Notification/Notification.spec.js @@ -15,14 +15,14 @@ import React from 'react'; -import Message from '.'; +import Notification from '.'; -describe('Message', () => { +describe('Notification', () => { /** * Style tests. */ it('should render with default styles', () => { - const actual = create(); + const actual = create(); expect(actual).toMatchSnapshot(); }); @@ -30,7 +30,7 @@ describe('Message', () => { * Accessibility tests. */ it('should meet accessibility guidelines', async () => { - const wrapper = renderToHtml(); + const wrapper = renderToHtml(); const actual = await axe(wrapper); expect(actual).toHaveNoViolations(); }); diff --git a/src/components/Message/Message.story.js b/src/components/Notification/Notification.story.js similarity index 74% rename from src/components/Message/Message.story.js rename to src/components/Notification/Notification.story.js index db74e099fb..2748a48f25 100644 --- a/src/components/Message/Message.story.js +++ b/src/components/Notification/Notification.story.js @@ -16,23 +16,23 @@ import React from 'react'; import { action } from '@storybook/addon-actions'; -import docs from './Message.docs.mdx'; -import Message, { MessageIcon, MessageButton } from '.'; +import docs from './Notification.docs.mdx'; +import Notification, { NotificationIcon, NotificationButton } from '.'; import Heading from '../Heading'; import Text from '../Text'; import Button from '../Button'; export default { - title: 'Components/Message', - component: Message, + title: 'Components/Notification', + component: Notification, parameters: { docs: { page: docs }, - jest: ['Message'] + jest: ['Notification'] } }; export const base = () => ( - +

New Feature — Intelligent Reporting @@ -41,25 +41,25 @@ export const base = () => ( Get automatic insights into your business statistics with one click.
- + ); export const success = () => ( - - + + Transaction successfully refunded - + ); export const warning = () => ( - - + + You still need to verify your account - + - - + + ); export const alert = () => ( - - + + Your transaction has failed - + - - + + ); diff --git a/src/components/Message/__snapshots__/Message.spec.js.snap b/src/components/Notification/__snapshots__/Notification.spec.js.snap similarity index 91% rename from src/components/Message/__snapshots__/Message.spec.js.snap rename to src/components/Notification/__snapshots__/Notification.spec.js.snap index b4133aab30..29a6b899b9 100644 --- a/src/components/Message/__snapshots__/Message.spec.js.snap +++ b/src/components/Notification/__snapshots__/Notification.spec.js.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`Message should render with default styles 1`] = ` +exports[`Notification should render with default styles 1`] = ` .circuit-0 { display: -webkit-box; display: -webkit-flex; diff --git a/src/components/Message/components/Button/Button.js b/src/components/Notification/components/Button/Button.js similarity index 72% rename from src/components/Message/components/Button/Button.js rename to src/components/Notification/components/Button/Button.js index b3ae3d3b94..b7215a9466 100644 --- a/src/components/Message/components/Button/Button.js +++ b/src/components/Notification/components/Button/Button.js @@ -21,7 +21,7 @@ const CENTER = 'center'; const TOP = 'top'; const baseStyles = ({ theme }) => css` - label: message__button; + label: notification__button; display: block; padding-left: ${theme.spacings.giga}; margin-top: ${theme.spacings.mega}; @@ -40,21 +40,21 @@ const alignmentStyles = ({ align }) => { [TOP]: 'flex-start' }; return css` - label: ${`message__button--${align}`}; + label: ${`notification__button--${align}`}; align-self: ${alignments[align]}; `; }; /** - * Button used in the Message component. Used for styling and aligment + * Button used in the Notification component. Used for styling and aligment * purposes only. */ -const MessageButton = styled('div')(baseStyles, alignmentStyles); +const NotificationButton = styled('div')(baseStyles, alignmentStyles); -MessageButton.TOP = TOP; -MessageButton.CENTER = CENTER; +NotificationButton.TOP = TOP; +NotificationButton.CENTER = CENTER; -MessageButton.propTypes = { +NotificationButton.propTypes = { /** * Button */ @@ -62,14 +62,14 @@ MessageButton.propTypes = { /** * Vertical alignment */ - align: PropTypes.oneOf([MessageButton.TOP, MessageButton.CENTER]) + align: PropTypes.oneOf([NotificationButton.TOP, NotificationButton.CENTER]) }; -MessageButton.defaultProps = { - align: MessageButton.CENTER +NotificationButton.defaultProps = { + align: NotificationButton.CENTER }; /** * @component */ -export default MessageButton; +export default NotificationButton; diff --git a/src/components/Message/components/Button/Button.spec.js b/src/components/Notification/components/Button/Button.spec.js similarity index 78% rename from src/components/Message/components/Button/Button.spec.js rename to src/components/Notification/components/Button/Button.spec.js index 5b153aea16..78101ebf55 100644 --- a/src/components/Message/components/Button/Button.spec.js +++ b/src/components/Notification/components/Button/Button.spec.js @@ -15,19 +15,21 @@ import React from 'react'; -import { MessageButton } from '../..'; +import { NotificationButton } from '../..'; -describe('MessageButton', () => { +describe('NotificationButton', () => { /** * Style tests. */ it('should render with default styles', () => { - const actual = create(); + const actual = create(); expect(actual).toMatchSnapshot(); }); it('should render alignment styles when passed the align prop', () => { - const actual = create(); + const actual = create( + + ); expect(actual).toMatchSnapshot(); }); @@ -35,7 +37,7 @@ describe('MessageButton', () => { * Accessibility tests. */ it('should meet accessibility guidelines', async () => { - const wrapper = renderToHtml(); + const wrapper = renderToHtml(); const actual = await axe(wrapper); expect(actual).toHaveNoViolations(); }); diff --git a/src/components/Message/components/Button/__snapshots__/Button.spec.js.snap b/src/components/Notification/components/Button/__snapshots__/Button.spec.js.snap similarity index 85% rename from src/components/Message/components/Button/__snapshots__/Button.spec.js.snap rename to src/components/Notification/components/Button/__snapshots__/Button.spec.js.snap index 68aac97f9e..a35d67ec27 100644 --- a/src/components/Message/components/Button/__snapshots__/Button.spec.js.snap +++ b/src/components/Notification/components/Button/__snapshots__/Button.spec.js.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`MessageButton should render alignment styles when passed the align prop 1`] = ` +exports[`NotificationButton should render alignment styles when passed the align prop 1`] = ` .circuit-0 { display: block; padding-left: 24px; @@ -29,7 +29,7 @@ exports[`MessageButton should render alignment styles when passed the align prop /> `; -exports[`MessageButton should render with default styles 1`] = ` +exports[`NotificationButton should render with default styles 1`] = ` .circuit-0 { display: block; padding-left: 24px; diff --git a/src/components/Message/components/Icon/Icon.js b/src/components/Notification/components/Icon/Icon.js similarity index 59% rename from src/components/Message/components/Icon/Icon.js rename to src/components/Notification/components/Icon/Icon.js index bb5cea65e8..4a8083550b 100644 --- a/src/components/Message/components/Icon/Icon.js +++ b/src/components/Notification/components/Icon/Icon.js @@ -18,9 +18,9 @@ import PropTypes from 'prop-types'; import styled from '@emotion/styled'; import { css } from '@emotion/core'; -import { ReactComponent as MessageSuccess } from '../../message-success.svg'; -import { ReactComponent as MessageError } from '../../message-error.svg'; -import MessageWarning from '../MessageWarning'; +import { ReactComponent as Success } from '../../notification-success.svg'; +import { ReactComponent as Error } from '../../notification-error.svg'; +import Warning from '../NotificationWarning'; const ICON_TYPES = { SUCCESS: 'success', @@ -29,13 +29,13 @@ const ICON_TYPES = { }; const ICON_MAP = { - [ICON_TYPES.SUCCESS]: MessageSuccess, - [ICON_TYPES.ERROR]: MessageError, - [ICON_TYPES.WARNING]: MessageWarning + [ICON_TYPES.SUCCESS]: Success, + [ICON_TYPES.ERROR]: Error, + [ICON_TYPES.WARNING]: Warning }; const baseStyles = ({ theme }) => css` - label: message__icon; + label: notification__icon; display: block; margin: 0 0 ${theme.spacings.mega} 0; flex-grow: 0; @@ -48,24 +48,26 @@ const baseStyles = ({ theme }) => css` `; /** - * Icon used in the Message component. Used for styling and alignment + * Icon used in the Notification component. Used for styling and alignment * purposes only. */ -const MessageIconContainer = styled('div')(baseStyles); +const NotificationIconContainer = styled('div')(baseStyles); -const MessageIcon = ({ type, children }) => { +const NotificationIcon = ({ type, children }) => { const Icon = ICON_MAP[type]; return ( - {Icon ? : children} + + {Icon ? : children} + ); }; -MessageIcon.SUCCESS = ICON_TYPES.SUCCESS; -MessageIcon.ERROR = ICON_TYPES.ERROR; -MessageIcon.WARNING = ICON_TYPES.WARNING; +NotificationIcon.SUCCESS = ICON_TYPES.SUCCESS; +NotificationIcon.ERROR = ICON_TYPES.ERROR; +NotificationIcon.WARNING = ICON_TYPES.WARNING; -MessageIcon.propTypes = { +NotificationIcon.propTypes = { /** * A custom icon to display. */ @@ -74,13 +76,13 @@ MessageIcon.propTypes = { * The icon type. Overrides a custom icon. */ type: PropTypes.oneOf([ - MessageIcon.SUCCESS, - MessageIcon.ERROR, - MessageIcon.WARNING + NotificationIcon.SUCCESS, + NotificationIcon.ERROR, + NotificationIcon.WARNING ]) }; /** * @component */ -export default MessageIcon; +export default NotificationIcon; diff --git a/src/components/Message/components/Icon/Icon.spec.js b/src/components/Notification/components/Icon/Icon.spec.js similarity index 76% rename from src/components/Message/components/Icon/Icon.spec.js rename to src/components/Notification/components/Icon/Icon.spec.js index 0ece194543..e0a6d23909 100644 --- a/src/components/Message/components/Icon/Icon.spec.js +++ b/src/components/Notification/components/Icon/Icon.spec.js @@ -15,32 +15,32 @@ import React from 'react'; -import { MessageIcon } from '../..'; +import { NotificationIcon } from '../..'; -describe('MessageIcon', () => { +describe('NotificationIcon', () => { /** * Style tests. */ it('should render with default styles', () => { - const actual = create(); + const actual = create(); expect(actual).toMatchSnapshot(); }); it('should render with error icon', () => { - const actual = create(); + const actual = create(); expect(actual).toMatchSnapshot(); }); it('should render with warning icon', () => { - const actual = create(); + const actual = create(); expect(actual).toMatchSnapshot(); }); it('should render with custom icon content', () => { const actual = create( - +
Custom content
- + ); expect(actual).toMatchSnapshot(); }); @@ -49,7 +49,7 @@ describe('MessageIcon', () => { * Accessibility tests. */ it('should meet accessibility guidelines', async () => { - const wrapper = renderToHtml(); + const wrapper = renderToHtml(); const actual = await axe(wrapper); expect(actual).toHaveNoViolations(); }); diff --git a/src/components/Message/components/Icon/__snapshots__/Icon.spec.js.snap b/src/components/Notification/components/Icon/__snapshots__/Icon.spec.js.snap similarity index 83% rename from src/components/Message/components/Icon/__snapshots__/Icon.spec.js.snap rename to src/components/Notification/components/Icon/__snapshots__/Icon.spec.js.snap index 3c898e3c4b..65e3158792 100644 --- a/src/components/Message/components/Icon/__snapshots__/Icon.spec.js.snap +++ b/src/components/Notification/components/Icon/__snapshots__/Icon.spec.js.snap @@ -1,6 +1,6 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`MessageIcon should render with custom icon content 1`] = ` +exports[`NotificationIcon should render with custom icon content 1`] = ` .circuit-0 { display: block; margin: 0 0 16px 0; @@ -29,7 +29,7 @@ exports[`MessageIcon should render with custom icon content 1`] = ` `; -exports[`MessageIcon should render with default styles 1`] = ` +exports[`NotificationIcon should render with default styles 1`] = ` .circuit-0 { display: block; margin: 0 0 16px 0; @@ -54,7 +54,7 @@ exports[`MessageIcon should render with default styles 1`] = ` /> `; -exports[`MessageIcon should render with error icon 1`] = ` +exports[`NotificationIcon should render with error icon 1`] = ` .circuit-0 { display: block; margin: 0 0 16px 0; @@ -78,12 +78,12 @@ exports[`MessageIcon should render with error icon 1`] = ` class="circuit-0 circuit-1" >
- message-error.svg + notification-error.svg
`; -exports[`MessageIcon should render with warning icon 1`] = ` +exports[`NotificationIcon should render with warning icon 1`] = ` .circuit-2 { display: block; margin: 0 0 16px 0; @@ -113,7 +113,7 @@ exports[`MessageIcon should render with warning icon 1`] = `
- message-success.svg + notification-success.svg
`; diff --git a/src/components/Message/components/MessageWarning.js b/src/components/Notification/components/NotificationWarning.js similarity index 82% rename from src/components/Message/components/MessageWarning.js rename to src/components/Notification/components/NotificationWarning.js index f662ce5f69..19edaad7a1 100644 --- a/src/components/Message/components/MessageWarning.js +++ b/src/components/Notification/components/NotificationWarning.js @@ -15,9 +15,9 @@ import styled from '@emotion/styled'; -import { ReactComponent as MessageSuccess } from '../message-success.svg'; +import { ReactComponent as Success } from '../notification-success.svg'; -const MessageWarning = styled(MessageSuccess)` +const NotificationWarning = styled(Success)` ${({ theme }) => ` rect { fill: ${theme.colors.y500}; @@ -25,4 +25,4 @@ const MessageWarning = styled(MessageSuccess)` `}; `; -export default MessageWarning; +export default NotificationWarning; diff --git a/src/components/Message/components/index.js b/src/components/Notification/components/index.js similarity index 86% rename from src/components/Message/components/index.js rename to src/components/Notification/components/index.js index 1c60d05c65..b05f5141b8 100644 --- a/src/components/Message/components/index.js +++ b/src/components/Notification/components/index.js @@ -15,6 +15,6 @@ import Button from './Button/Button'; import Icon from './Icon/Icon'; -import MessageWarning from './MessageWarning'; +import NotificationWarning from './NotificationWarning'; -export { Button, Icon, MessageWarning }; +export { Button, Icon, NotificationWarning }; diff --git a/src/components/Message/index.js b/src/components/Notification/index.js similarity index 78% rename from src/components/Message/index.js rename to src/components/Notification/index.js index 48765abc8b..4c4858b931 100644 --- a/src/components/Message/index.js +++ b/src/components/Notification/index.js @@ -13,8 +13,11 @@ * limitations under the License. */ -import Message from './Message'; +import Notification from './Notification'; -export { Icon as MessageIcon, Button as MessageButton } from './components'; +export { + Icon as NotificationIcon, + Button as NotificationButton +} from './components'; -export default Message; +export default Notification; diff --git a/src/components/Message/message-error.svg b/src/components/Notification/notification-error.svg similarity index 100% rename from src/components/Message/message-error.svg rename to src/components/Notification/notification-error.svg diff --git a/src/components/Message/message-success.svg b/src/components/Notification/notification-success.svg similarity index 89% rename from src/components/Message/message-success.svg rename to src/components/Notification/notification-success.svg index 1621d32ba6..70f582ff22 100644 --- a/src/components/Message/message-success.svg +++ b/src/components/Notification/notification-success.svg @@ -4,7 +4,7 @@ Group 4 Created with Sketch. - + @@ -12,4 +12,4 @@ - \ No newline at end of file + diff --git a/src/components/NotificationBanner/NotificationBanner.js b/src/components/NotificationBanner/NotificationBanner.js index 772fc25107..f8b61a5bb5 100644 --- a/src/components/NotificationBanner/NotificationBanner.js +++ b/src/components/NotificationBanner/NotificationBanner.js @@ -41,7 +41,7 @@ const NotificationBannerInner = styled('div')` `; /** - * NotificationBanner displays a persistent Message. + * NotificationBanner displays a persistent Notification. */ const NotificationBanner = ({ children, ...props }) => ( @@ -51,7 +51,7 @@ const NotificationBanner = ({ children, ...props }) => ( NotificationBanner.propTypes = { /** - * A single Message. + * A single Notification. */ children: PropTypes.element }; diff --git a/src/components/NotificationBanner/NotificationBanner.story.js b/src/components/NotificationBanner/NotificationBanner.story.js index 4a038c3519..7f9778da80 100644 --- a/src/components/NotificationBanner/NotificationBanner.story.js +++ b/src/components/NotificationBanner/NotificationBanner.story.js @@ -18,10 +18,10 @@ import { css } from '@emotion/core'; import NotificationBanner from './NotificationBanner'; -import { base as Message } from '../Message/Message.story'; +import { base as Notification } from '../Notification/Notification.story'; export default { - title: 'Components/Message/NotificationBanner', + title: 'Components/Notification/NotificationBanner', component: NotificationBanner, parameters: { jest: ['NotificationBanner'] @@ -43,7 +43,7 @@ export const base = () => ( `} > - + diff --git a/src/components/NotificationList/NotificationList.js b/src/components/NotificationList/NotificationList.js index db9771cd43..b90eb7eb52 100644 --- a/src/components/NotificationList/NotificationList.js +++ b/src/components/NotificationList/NotificationList.js @@ -50,7 +50,7 @@ const NotificationListWrapper = styled('ul')` const NotificationListCard = Card.withComponent('li'); /** - * NotificationList displays Messages as Cards in a corner. + * NotificationList displays Notifications as Cards in a corner. */ const NotificationList = ({ children, ...props }) => ( @@ -64,7 +64,7 @@ const NotificationList = ({ children, ...props }) => ( NotificationList.propTypes = { /** - * One or more Messages. + * One or more Notifications. */ children: childrenPropType }; diff --git a/src/components/NotificationList/NotificationList.story.js b/src/components/NotificationList/NotificationList.story.js index bf344fd5da..c095c7ffb7 100644 --- a/src/components/NotificationList/NotificationList.story.js +++ b/src/components/NotificationList/NotificationList.story.js @@ -16,10 +16,10 @@ import React from 'react'; import NotificationList from './NotificationList'; -import { success as Message } from '../Message/Message.story'; +import { success as Notification } from '../Notification/Notification.story'; export default { - title: 'Components/Message/NotificationList', + title: 'Components/Notification/NotificationList', component: NotificationList, parameters: { jest: ['NotificationList'] @@ -28,6 +28,6 @@ export default { export const base = () => ( - + ); diff --git a/src/index.js b/src/index.js index 865976f82b..d2d07a1463 100644 --- a/src/index.js +++ b/src/index.js @@ -58,6 +58,7 @@ export { default as CurrencyInput, SimpleCurrencyInput } from './components/CurrencyInput'; +export { default as InlineMessage } from './components/InlineMessage'; export { currencyAmountUtils }; // Actions @@ -71,13 +72,12 @@ export { default as Selector } from './components/Selector'; // Notifications export { - default as Message, - MessageIcon, - MessageButton -} from './components/Message'; + default as Notification, + NotificationIcon, + NotificationButton +} from './components/Notification'; export { default as NotificationBanner } from './components/NotificationBanner'; export { default as NotificationList } from './components/NotificationList'; -export { default as InlineNotification } from './components/InlineNotification'; // Layout export { default as Grid } from './components/Grid';