Skip to content

Commit

Permalink
add test for the toast with headline
Browse files Browse the repository at this point in the history
  • Loading branch information
@amelako
amelako committed Dec 23, 2021
1 parent 18a68a8 commit 8341e46
Show file tree
Hide file tree
Showing 2 changed files with 305 additions and 0 deletions.
8 changes: 8 additions & 0 deletions packages/circuit-ui/components/NotificationToast/NotificationToast.spec.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,14 @@ describe('NotificationToast', () => {
expect(baseElement).toMatchSnapshot();
},
);

it('should render notification toast with headline', () => {
const { baseElement } = renderNotificationToast({
...baseNotificationToast,
headline: 'Information',
});
expect(baseElement).toMatchSnapshot();
});
});
describe('business logic', () => {
it('should close the toast when the onClose method is called', () => {
Expand Down
297 changes: 297 additions & 0 deletions ...ges/circuit-ui/components/NotificationToast/__snapshots__/NotificationToast.spec.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -566,6 +566,303 @@ exports[`NotificationToast styles should render notification toast with confirm
</body>
`;

exports[`NotificationToast styles should render notification toast with headline 1`] = `
@keyframes animation-0 {
0% {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
}
}
.circuit-0 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
position: relative;
background-color: #FFF;
padding: 12px 16px;
border-radius: 8px;
border: 2px solid #3063E9;
overflow: hidden;
-webkit-transition: opacity 200ms ease-in-out,height 200ms ease-in-out,visibility 200ms ease-in-out;
transition: opacity 200ms ease-in-out,height 200ms ease-in-out,visibility 200ms ease-in-out;
}
.circuit-1 {
display: block;
-webkit-align-self: flex-start;
-ms-flex-item-align: flex-start;
align-self: flex-start;
-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;
color: #3063E9;
}
.circuit-2 {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
white-space: nowrap;
width: 1px;
}
.circuit-3 {
display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-align-items: flex-start;
-webkit-box-align: flex-start;
-ms-flex-align: flex-start;
align-items: flex-start;
padding-right: 40px;
padding-left: 16px;
}
.circuit-4 {
font-weight: 400;
margin-bottom: 16px;
font-size: 16px;
line-height: 24px;
margin-bottom: 0;
font-weight: 700;
}
.circuit-5 {
font-weight: 400;
margin-bottom: 16px;
font-size: 16px;
line-height: 24px;
margin-bottom: 0;
}
.circuit-6 {
font-size: 16px;
line-height: 24px;
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-box-pack: center;
-ms-flex-pack: center;
-webkit-justify-content: center;
justify-content: center;
width: auto;
height: auto;
margin: 0;
cursor: pointer;
text-align: center;
-webkit-text-decoration: none;
text-decoration: none;
font-weight: 700;
border-width: 1px;
border-style: solid;
border-radius: 999999px;
-webkit-transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
transition: opacity 120ms ease-in-out,color 120ms ease-in-out,background-color 120ms ease-in-out,border-color 120ms ease-in-out;
background-color: #FFF;
border-color: #999;
color: #000;
padding: calc(12px - 1px) calc(24px - 1px);
position: relative;
overflow: hidden;
padding: calc(8px - 1px);
border-color: transparent!important;
-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: flex-start;
-ms-flex-item-align: flex-start;
align-self: flex-start;
margin-top: -4px;
margin-bottom: -4px;
margin-left: auto;
}
.circuit-6:focus {
outline: 0;
box-shadow: 0 0 0 4px #AFD0FE;
}
.circuit-6:focus::-moz-focus-inner {
border: 0;
}
.circuit-6:focus:not(:focus-visible) {
box-shadow: none;
}
.circuit-6:disabled,
.circuit-6[disabled] {
opacity: 0.5;
pointer-events: none;
box-shadow: none;
}
.circuit-6:hover {
background-color: #F5F5F5;
border-color: #666;
}
.circuit-6:active,
.circuit-6[aria-expanded='true'],
.circuit-6[aria-pressed='true'] {
background-color: #E6E6E6;
border-color: #333;
}
.circuit-7 {
display: block;
border-radius: 100%;
border: 2px solid currentColor;
border-top-color: transparent;
-webkit-animation: animation-0 1s infinite linear;
animation: animation-0 1s infinite linear;
transform-origin: 50% 50%;
width: 24px;
height: 24px;
position: absolute;
opacity: 0;
visibility: hidden;
-webkit-transition: opacity 120ms ease-in-out,visibility 120ms ease-in-out;
transition: opacity 120ms ease-in-out,visibility 120ms ease-in-out;
}
.circuit-9 {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
-webkit-align-items: center;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
opacity: 1;
visibility: inherit;
-webkit-transform: scale3d(1, 1, 1);
-moz-transform: scale3d(1, 1, 1);
-ms-transform: scale3d(1, 1, 1);
transform: scale3d(1, 1, 1);
-webkit-transition: opacity 120ms ease-in-out,-webkit-transform 120ms ease-in-out,visibility 120ms ease-in-out;
transition: opacity 120ms ease-in-out,transform 120ms ease-in-out,visibility 120ms ease-in-out;
}
<body>
<div>
<div
class="circuit-0"
style="opacity: 0; height: 0px; visibility: hidden;"
>
<svg
class="circuit-1"
fill="none"
height="24"
role="presentation"
variant="info"
viewBox="0 0 24 24"
width="24"
xmlns="http://www.w3.org/2000/svg"
>
<path
d="M12 22.988a10.994 10.994 0 1 0-.012 0H12zm1-6a1 1 0 0 1-2 0v-5a1 1 0 0 1 2 0v5zm-1-11a1.5 1.5 0 1 1 0 3 1.5 1.5 0 0 1 0-3z"
fill="currentColor"
/>
</svg>
<span
class="circuit-2"
/>
<div
class="circuit-3"
>
<h3
class="circuit-4"
>
Information
</h3>
<p
class="circuit-5"
>
This is a toast message
</p>
</div>
<button
aria-hidden="true"
class="circuit-6"
tabindex="-1"
title="-"
type="button"
>
<span
class="circuit-7"
>
<span
class="circuit-2"
/>
</span>
<span
class="circuit-9"
>
<svg
fill="none"
height="16"
role="presentation"
viewBox="0 0 16 16"
width="16"
xmlns="http://www.w3.org/2000/svg"
>
<path
clip-rule="evenodd"
d="M1.293 1.293a1 1 0 0 1 1.414 0L8 6.586l5.293-5.293a1 1 0 1 1 1.414 1.414L9.414 8l5.293 5.293a1 1 0 0 1-1.414 1.414L8 9.414l-5.293 5.293a1 1 0 0 1-1.414-1.414L6.586 8 1.293 2.707a1 1 0 0 1 0-1.414z"
fill="currentColor"
fill-rule="evenodd"
/>
</svg>
<span
class="circuit-2"
>
-
</span>
</span>
</button>
</div>
</div>
</body>
`;

exports[`NotificationToast styles should render notification toast with info styles 1`] = `
@keyframes animation-0 {
0% {
Expand Down

0 comments on commit 8341e46

Please sign in to comment.