Skip to content

Commit 2167920

Browse files
wintondeshongwintondeshong
authored
Merge pull request #35 from wintondeshong/master
Toasts
2 parents d18ad57 + 3fa0ea5 commit 2167920

File tree

10 files changed

+367
-33
lines changed

10 files changed

+367
-33
lines changed

‎package-lock.json‎

Lines changed: 36 additions & 30 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎package.json‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -26,8 +26,8 @@
2626
"@types/react": "16.9.11",
2727
"@types/react-dom": "16.9.3",
2828
"@types/react-router-dom": "5.1.5",
29-
"andculturecode-javascript-core": "0.1.0",
30-
"andculturecode-javascript-react": "0.0.9",
29+
"andculturecode-javascript-core": "0.1.5",
30+
"andculturecode-javascript-react": "0.1.0",
3131
"andculturecode-scss-grid": "2.0.4",
3232
"axios": "0.19.2",
3333
"bourbon": "6.0.0",
@@ -37,7 +37,8 @@
3737
"react-dom": "16.13.1",
3838
"react-i18next": "11.6.0",
3939
"react-router-dom": "5.1.2",
40-
"react-scripts": "3.4.1"
40+
"react-scripts": "3.4.1",
41+
"react-toastify": "5.5.0"
4142
},
4243
"description": "Commonly used components for react applications",
4344
"devDependencies": {

‎src/assets/scss/6-components/atoms/__atoms.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -8,3 +8,4 @@
88
@import "radios";
99
@import "selects";
1010
@import "text-input-icon";
11+
@import "toast";

‎src/assets/scss/6-components/atoms/_toast.scss‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
.c-toast {
2+
padding-top: 0;
3+
padding-bottom: 0;
4+
5+
.Toastify__toast-body {
6+
margin-top: 8px;
7+
margin-bottom: 8px;
8+
}
9+
10+
&.Toastify__toast {
11+
@include font-style();
12+
border-radius: $border-radius-small;
13+
border-width: 1px;
14+
border-style: solid;
15+
box-shadow: none;
16+
min-height: 1px;
17+
18+
.c-toast-content {
19+
display: flex;
20+
21+
&__icon-container {
22+
&__icon {
23+
vertical-align: middle;
24+
margin-right: 8px;
25+
}
26+
}
27+
28+
&__body {
29+
padding-top: 3px;
30+
}
31+
}
32+
33+
.Toastify__progress-bar {
34+
filter: alpha(0.5);
35+
}
36+
37+
&--success {
38+
background-color: get-color-status("success-light");
39+
color: get-color-status("success-dark");
40+
border-color: get-color-status("success");
41+
42+
.Toastify__progress-bar {
43+
background-color: get-color-status("success");
44+
}
45+
46+
.c-toast-content {
47+
&__icon-container {
48+
&__icon {
49+
path {
50+
fill: get-color-status("success");
51+
}
52+
}
53+
}
54+
}
55+
}
56+
57+
&--error {
58+
background-color: get-color-status("error-light");
59+
color: get-color-status("error-dark");
60+
border-color: get-color-status("error");
61+
62+
.Toastify__progress-bar {
63+
background-color: get-color-status("error");
64+
}
65+
66+
.c-toast-content {
67+
&__icon-container {
68+
&__icon {
69+
path {
70+
fill: get-color-status("error");
71+
}
72+
}
73+
}
74+
}
75+
}
76+
77+
&--warning {
78+
background-color: get-color-status("warning-light");
79+
color: get-color-status("warning-dark");
80+
border-color: get-color-status("warning");
81+
82+
.Toastify__progress-bar {
83+
background-color: get-color-status("warning");
84+
}
85+
86+
.c-toast-content {
87+
&__icon-container {
88+
&__icon {
89+
path {
90+
fill: get-color-status("warning");
91+
}
92+
}
93+
}
94+
}
95+
}
96+
97+
&--info {
98+
background-color: get-color-status("info-light");
99+
color: get-color-status("info-dark");
100+
border-color: get-color-status("info");
101+
102+
.Toastify__progress-bar {
103+
background-color: get-color-status("info");
104+
}
105+
106+
.c-toast-content {
107+
&__icon-container {
108+
&__icon {
109+
path {
110+
fill: get-color-status("info");
111+
}
112+
}
113+
}
114+
}
115+
}
116+
}
117+
}

‎src/atoms/toasts/toast-templates.test.tsx‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
describe("ToastTemplates", () => {
2+
test.skip("TODO: Backfill tests for issue https://github.com/AndcultureCode/AndcultureCode.JavaScript.React.Components/issues/34", () => {});
3+
});

‎src/atoms/toasts/toast-templates.tsx‎

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
import { IconSizes } from "../constants/icon-sizes";
2+
import { Icon } from "../icons/icon";
3+
import { Icons } from "../constants/icons";
4+
import React from "react";
5+
import { ToastContent } from "react-toastify";
6+
7+
const COMPONENT_CLASS = "c-toast-content";
8+
const ICON_CLASS = `${COMPONENT_CLASS}__icon`;
9+
const ICON_CONTAINER_CLASS = `${ICON_CLASS}-container`;
10+
11+
const getTemplate = (
12+
icon: Icons,
13+
content: string | ToastContent
14+
): ToastContent => (
15+
<div className={COMPONENT_CLASS}>
16+
<div className={ICON_CONTAINER_CLASS}>
17+
<Icon
18+
cssClassName={`${ICON_CONTAINER_CLASS}__icon`}
19+
size={IconSizes.Large}
20+
type={icon}
21+
/>
22+
</div>
23+
<div className={`${COMPONENT_CLASS}__body`}>{content}</div>
24+
</div>
25+
);
26+
27+
class ToastTemplates {
28+
static error(content: string | ToastContent): ToastContent {
29+
return getTemplate(Icons.Warning, content);
30+
}
31+
32+
static info(content: string | ToastContent): ToastContent {
33+
return getTemplate(Icons.Information, content);
34+
}
35+
36+
static success(content: string | ToastContent): ToastContent {
37+
return getTemplate(Icons.Checkmark, content);
38+
}
39+
40+
static warning(content: string | ToastContent): ToastContent {
41+
// warning uses same icon as error, just colored differently
42+
return ToastTemplates.error(content);
43+
}
44+
}
45+
46+
export { ToastTemplates };

‎src/atoms/toasts/toast.stories.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import { Button } from "../buttons/button";
2+
import { ButtonSizes } from "../constants/button-sizes";
3+
import React from "react";
4+
import { ToastContainer, ToastPosition, Zoom } from "react-toastify";
5+
import "react-toastify/dist/ReactToastify.min.css";
6+
import { ToastManager } from "../../utilities/toast-manager";
7+
8+
export default {
9+
component: ToastContainer,
10+
title: "Atoms | Toasts",
11+
};
12+
13+
export const toastDefault = () => (
14+
<React.Fragment>
15+
<Button
16+
onClick={() => ToastManager.success("Success toast!")}
17+
size={ButtonSizes.Small}>
18+
Show Success Toast
19+
</Button>
20+
&nbsp;
21+
<Button
22+
onClick={() => ToastManager.error("Error toast!")}
23+
size={ButtonSizes.Small}>
24+
Show Error Toast
25+
</Button>
26+
&nbsp;
27+
<Button
28+
onClick={() => ToastManager.warn("Warning toast!")}
29+
size={ButtonSizes.Small}>
30+
Show Warning Toast
31+
</Button>
32+
&nbsp;
33+
<Button
34+
onClick={() => ToastManager.info("Info toast!")}
35+
size={ButtonSizes.Small}>
36+
Show Info Toast
37+
</Button>
38+
<ToastContainer
39+
draggable={false}
40+
position={ToastPosition.BOTTOM_RIGHT}
41+
autoClose={5000}
42+
closeOnClick={true}
43+
closeButton={false}
44+
transition={Zoom}
45+
toastClassName="c-toast"
46+
/>
47+
</React.Fragment>
48+
);

‎src/index.ts‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@ export { SubmitButton } from "./atoms/forms/submit-button";
2020
export { TextArea } from "./atoms/forms/text-area";
2121
export { TextInput } from "./atoms/forms/text-input";
2222
export { TextInputIcon } from "./atoms/forms/text-input-icon";
23+
export { ToastTemplates } from "./atoms/toasts/toast-templates";
2324

2425
// Typography
2526
export { Heading } from "./atoms/typography/heading";
@@ -92,5 +93,6 @@ export * from "./types/svg";
9293
// -----------------------------------------------------------------------------------------
9394

9495
export { IconUtils } from "./utilities/icon-utils";
96+
export { ToastManager } from "./utilities/toast-manager";
9597

9698
// #endregion Utilities

‎src/utilities/toast-manager.test.ts‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
describe("ToastManager", () => {
2+
test.skip("TODO: Backfill tests for issue https://github.com/AndcultureCode/AndcultureCode.JavaScript.React.Components/issues/34", () => {});
3+
});

0 commit comments

Comments
 (0)