Skip to content

Commit f506a51

Browse files
fausgaitanfausgaitan
authored
UIDS-76 - Add documentation and guidelines for Inputs, FormGroup, Alerts (#78)
1 parent 612d4be commit f506a51

File tree

7 files changed

+379
-129
lines changed

7 files changed

+379
-129
lines changed

‎spec/__snapshots__/Storyshots.test.js.snap‎

Lines changed: 89 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
// Jest Snapshot v1, https://goo.gl/fbAQLP
22

3-
exports[`Storyshots Design System/Alert With Dismiss 1`] = `
3+
exports[`Storyshots Design System/Alert Error 1`] = `
44
<div
55
style={
66
Object {
@@ -9,15 +9,50 @@ exports[`Storyshots Design System/Alert With Dismiss 1`] = `
99
}
1010
>
1111
<div
12-
className="AlertMessage AlertMessage-success"
12+
className="AlertMessage AlertMessage-error"
1313
>
14-
<button
15-
className="close"
16-
onClick={[Function]}
17-
type="button"
14+
<p
15+
className="AlertMessage__title"
1816
>
19-
×
20-
</button>
17+
Default title
18+
</p>
19+
Default message
20+
</div>
21+
</div>
22+
`;
23+
24+
exports[`Storyshots Design System/Alert Info 1`] = `
25+
<div
26+
style={
27+
Object {
28+
"padding": "1rem",
29+
}
30+
}
31+
>
32+
<div
33+
className="AlertMessage AlertMessage-info"
34+
>
35+
<p
36+
className="AlertMessage__title"
37+
>
38+
Information
39+
</p>
40+
Default message
41+
</div>
42+
</div>
43+
`;
44+
45+
exports[`Storyshots Design System/Alert Other 1`] = `
46+
<div
47+
style={
48+
Object {
49+
"padding": "1rem",
50+
}
51+
}
52+
>
53+
<div
54+
className="AlertMessage AlertMessage-warning"
55+
>
2156
<p
2257
className="AlertMessage__title"
2358
>
@@ -28,7 +63,7 @@ exports[`Storyshots Design System/Alert With Dismiss 1`] = `
2863
</div>
2964
`;
3065

31-
exports[`Storyshots Design System/Alert Without Dismiss 1`] = `
66+
exports[`Storyshots Design System/Alert Success 1`] = `
3267
<div
3368
style={
3469
Object {
@@ -49,6 +84,34 @@ exports[`Storyshots Design System/Alert Without Dismiss 1`] = `
4984
</div>
5085
`;
5186

87+
exports[`Storyshots Design System/Alert With Dismiss 1`] = `
88+
<div
89+
style={
90+
Object {
91+
"padding": "1rem",
92+
}
93+
}
94+
>
95+
<div
96+
className="AlertMessage AlertMessage-success"
97+
>
98+
<button
99+
className="close"
100+
onClick={[Function]}
101+
type="button"
102+
>
103+
×
104+
</button>
105+
<p
106+
className="AlertMessage__title"
107+
>
108+
Default title
109+
</p>
110+
Default message
111+
</div>
112+
</div>
113+
`;
114+
52115
exports[`Storyshots Design System/Card Default 1`] = `
53116
<div
54117
style={
@@ -635,7 +698,7 @@ exports[`Storyshots Design System/Form Elements/Form Group Default 1`] = `
635698
id="default-input"
636699
name="default"
637700
onChange={[Function]}
638-
placeholder="default"
701+
placeholder="Placeholder text"
639702
type="text"
640703
value=""
641704
/>
@@ -660,7 +723,7 @@ exports[`Storyshots Design System/Form Elements/Form Group Required 1`] = `
660723
className="InputLabel"
661724
htmlFor=""
662725
>
663-
Form Group with label
726+
Label
664727
<span
665728
className="InputLabel__helper-text"
666729
>
@@ -800,7 +863,7 @@ exports[`Storyshots Design System/Form Elements/Form Group With Errors 1`] = `
800863
id="input"
801864
name="with-errors"
802865
onChange={[Function]}
803-
placeholder=""
866+
placeholder="Placeholder text"
804867
type="text"
805868
value=""
806869
/>
@@ -812,7 +875,14 @@ exports[`Storyshots Design System/Form Elements/Form Group With Errors 1`] = `
812875
className="FormGroup__invalid-feedback__list"
813876
>
814877
<li>
815-
invalid input!
878+
<div>
879+
Sorry, we’re not able to accept this type of input. For more information, click
880+
<a
881+
href="http://www.google.com"
882+
>
883+
here
884+
</a>
885+
</div>
816886
</li>
817887
</ol>
818888
</div>
@@ -836,7 +906,7 @@ exports[`Storyshots Design System/Form Elements/Form Group With Helper Text 1`]
836906
className="InputLabel"
837907
htmlFor="input"
838908
>
839-
Form Group with helper text
909+
Label
840910
</label>
841911
<div
842912
className="Input input-group"
@@ -877,7 +947,7 @@ exports[`Storyshots Design System/Form Elements/Form Group With Label 1`] = `
877947
className="InputLabel"
878948
htmlFor="input"
879949
>
880-
Form Group with label
950+
Label
881951
</label>
882952
<div
883953
className="Input input-group"
@@ -913,7 +983,7 @@ exports[`Storyshots Design System/Form Elements/Form Group With Label Tooltip 1`
913983
className="InputLabel"
914984
htmlFor="input"
915985
>
916-
Form Group with label and tooltip
986+
Label
917987
<span
918988
aria-hidden="true"
919989
className="Tooltip__icon Tooltip__icon--gray"
@@ -1010,7 +1080,7 @@ exports[`Storyshots Design System/Form Elements/Form Group With Leading And Trai
10101080
id="input"
10111081
name="with-leading-and-trailing-icons"
10121082
onChange={[Function]}
1013-
placeholder=""
1083+
placeholder="Placeholder text"
10141084
type="text"
10151085
value=""
10161086
/>
@@ -1101,7 +1171,7 @@ exports[`Storyshots Design System/Form Elements/Form Group With Leading Icon 1`]
11011171
id="input"
11021172
name="with-leading-icon"
11031173
onChange={[Function]}
1104-
placeholder=""
1174+
placeholder="Placeholder text"
11051175
type="text"
11061176
value=""
11071177
/>
@@ -1236,7 +1306,7 @@ exports[`Storyshots Design System/Form Elements/Form Group With Trailing Icon 1`
12361306
id="input"
12371307
name="with-leading-icon"
12381308
onChange={[Function]}
1239-
placeholder=""
1309+
placeholder="Placeholder text"
12401310
type="text"
12411311
value=""
12421312
/>

‎stories/Alert.stories.jsx‎

Lines changed: 0 additions & 37 deletions
This file was deleted.

‎stories/Alert/Alert.mdx‎

Lines changed: 55 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
import { Story, Preview } from '@storybook/addon-docs/blocks';
2+
3+
import 'bootstrap/dist/css/bootstrap.min.css';
4+
import '../../scss/global.scss';
5+
6+
# Alerts
7+
8+
Alerts give users updates or changes to system status. Providing immediate feedback is important for
9+
building trust. While alerts are a great way of communicating with users, they are disruptive and
10+
should be used cautiously.
11+
12+
## Success
13+
14+
- Used when something went as planned. Ex. When you've saved your progress in the builder.
15+
16+
<Preview>
17+
<Story id="design-system-alert--success" />
18+
</Preview>
19+
20+
## Info
21+
22+
- Information that needs to be referenced often or is very important. These alerts are within the
23+
page and are not affected by an event, whereas success/error alerts are at the top of the page
24+
based on an event. These alerts will always be blue!
25+
26+
<Preview>
27+
<Story id="design-system-alert--info" />
28+
</Preview>
29+
30+
## Error
31+
32+
- Used when something did not go as planned, and action is needed to proceed. Ex. If you leave
33+
the incentive field blank in the builder and try to launch, you' receive an error. You must
34+
fill in the field to launch a project.
35+
36+
<Preview>
37+
<Story id="design-system-alert--error" />
38+
</Preview>
39+
40+
## Other
41+
42+
- Messages used for general information on a more temporary level, not based on the user
43+
performing an action. Ex. For Covid, we show a yellow alert to encourage researcher to
44+
consult CDC guidelines for in person sessions.
45+
46+
<Preview>
47+
<Story id="design-system-alert--other" />
48+
</Preview>
49+
50+
51+
## With Dismiss
52+
53+
<Preview>
54+
<Story id="design-system-alert--with-dismiss" />
55+
</Preview>

‎stories/Alert/Alert.stories.jsx‎

Lines changed: 70 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,70 @@
1+
import React from 'react';
2+
import { withKnobs, text } from '@storybook/addon-knobs';
3+
import { action } from '@storybook/addon-actions';
4+
5+
import { MessageTypes, AlertMessage } from 'src/Flash';
6+
import mdx from './Alert.mdx';
7+
8+
import 'bootstrap/dist/css/bootstrap.min.css';
9+
import '../../scss/global.scss';
10+
11+
export default {
12+
title: 'Design System/Alert',
13+
component: AlertMessage,
14+
decorators: [withKnobs],
15+
parameters: {
16+
docs: {
17+
page: mdx,
18+
},
19+
},
20+
};
21+
22+
export const Success = () => (
23+
<AlertMessage
24+
id="1"
25+
message={text('Message', 'Default message')}
26+
title={text('Title', 'Default title')}
27+
type={MessageTypes.SUCCESS}
28+
/>
29+
);
30+
31+
export const Info = () => (
32+
<AlertMessage
33+
id="2"
34+
message={text('Message', 'Default message')}
35+
title={text('Title', 'Information')}
36+
type={MessageTypes.INFO}
37+
/>
38+
);
39+
40+
export const Error = () => (
41+
<AlertMessage
42+
id="3"
43+
message={text('Message', 'Default message')}
44+
title={text('Title', 'Default title')}
45+
type={MessageTypes.ERROR}
46+
/>
47+
);
48+
49+
export const Other = () => (
50+
<AlertMessage
51+
id="4"
52+
message={text('Message', 'Default message')}
53+
title={text('Title', 'Default title')}
54+
type={MessageTypes.WARNING}
55+
/>
56+
);
57+
58+
const onDismiss = (id) => {
59+
action('alert dismissed')(id);
60+
};
61+
62+
export const WithDismiss = () => (
63+
<AlertMessage
64+
id="5"
65+
message={text('Message', 'Default message')}
66+
title={text('Title', 'Default title')}
67+
type={MessageTypes.SUCCESS}
68+
onDismiss={onDismiss}
69+
/>
70+
);

0 commit comments

Comments
 (0)