Skip to content

Commit 9c00255

Browse files
WagnerMoreiranicksp
WagnerMoreira
authored and
nicksp
committed
Create ConfirmationBox UI component (#467)
* create ConfirmationBox component and its stories * improve stories, fix flow check errors * update confirmationBox component, order css and remove unused StoryModal from stories file * generate build files, update npm storybook/addon-storyshots and addon-info packages because of npm audit warnings * generate build files * add a new variation of gray to the theme file, generate build files * change guard operators to check separately action and dismiss buttons * add separate stories to showacse each button rendered separately * change dismiss button css to uppercase * update story name * Revert package changes * List components in alphabetical order * Fix linting errors * Use natural typing notation * Build app * address pr comments and generate build * update storyshots * address pr comments and add css for mobile making text wrap * remove button class because it is not needed anymore * generate build files * replace css media query for a simpler way * generate build files * Update package-lock.json * Revert package-lock.json changes
1 parent c6559d9 commit 9c00255

14 files changed

+589
-16
lines changed

‎lib/all.js

+8-8
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/all.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/editor.js

+2-2
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/editor.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/fonts.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/fonts.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/registration.js

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎lib/registration.js.map

+1-1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎src/__snapshots__/storyshots.test.js.snap

+371
Original file line numberDiff line numberDiff line change
@@ -1041,6 +1041,299 @@ exports[`Storyshots Core Components|Button/Use Cases with icon 1`] = `
10411041
</Button>
10421042
`;
10431043

1044+
exports[`Storyshots Core Components|ConfirmationBox basic usage 1`] = `
1045+
<div
1046+
className="AutoUI_ui_ConfirmationBox-22"
1047+
>
1048+
<h2
1049+
className="AutoUI_ui_ConfirmationBox-28 AutoUI_typo-19"
1050+
>
1051+
Are you sure?
1052+
</h2>
1053+
<p
1054+
className="AutoUI_ui_ConfirmationBox-36 AutoUI_typo-24"
1055+
>
1056+
This will cancel your application and you will no longer be considered for this role.
1057+
</p>
1058+
<Button
1059+
block={false}
1060+
className=""
1061+
color="normal"
1062+
component="button"
1063+
contentStyle="normal"
1064+
disabled={false}
1065+
icon=""
1066+
iconProps={Object {}}
1067+
onClick={[Function]}
1068+
outlined={false}
1069+
pseudolink={false}
1070+
raised={false}
1071+
readOnly={false}
1072+
rounded={false}
1073+
selectbox={false}
1074+
selected={false}
1075+
size="normal"
1076+
smallRounded={false}
1077+
wide={false}
1078+
>
1079+
WIthdraw my application
1080+
</Button>
1081+
<Button
1082+
block={false}
1083+
className="AutoUI_ui_ConfirmationBox-46"
1084+
color="normal"
1085+
component="button"
1086+
contentStyle="normal"
1087+
disabled={false}
1088+
icon=""
1089+
iconProps={Object {}}
1090+
onClick={[Function]}
1091+
outlined={false}
1092+
pseudolink={true}
1093+
raised={false}
1094+
readOnly={false}
1095+
rounded={false}
1096+
selectbox={false}
1097+
selected={false}
1098+
size="normal"
1099+
smallRounded={false}
1100+
wide={false}
1101+
>
1102+
<span
1103+
className="AutoUI_ui_ConfirmationBox-57"
1104+
>
1105+
Dismiss
1106+
</span>
1107+
</Button>
1108+
</div>
1109+
`;
1110+
1111+
exports[`Storyshots Core Components|ConfirmationBox/Debug missing props 1`] = `
1112+
<div
1113+
className="AutoUI_ui_ConfirmationBox-22"
1114+
>
1115+
<h2
1116+
className="AutoUI_ui_ConfirmationBox-28 AutoUI_typo-19"
1117+
>
1118+
Are you sure?
1119+
</h2>
1120+
<p
1121+
className="AutoUI_ui_ConfirmationBox-36 AutoUI_typo-24"
1122+
/>
1123+
</div>
1124+
`;
1125+
1126+
exports[`Storyshots Core Components|ConfirmationBox/Debug random data 1`] = `
1127+
<div
1128+
className="AutoUI_ui_ConfirmationBox-22"
1129+
>
1130+
<h2
1131+
className="AutoUI_ui_ConfirmationBox-28 AutoUI_typo-19"
1132+
>
1133+
string
1134+
</h2>
1135+
<p
1136+
className="AutoUI_ui_ConfirmationBox-36 AutoUI_typo-24"
1137+
>
1138+
string
1139+
</p>
1140+
<Button
1141+
block={false}
1142+
className=""
1143+
color="normal"
1144+
component="button"
1145+
contentStyle="normal"
1146+
disabled={false}
1147+
icon=""
1148+
iconProps={Object {}}
1149+
onClick={[Function]}
1150+
outlined={false}
1151+
pseudolink={false}
1152+
raised={false}
1153+
readOnly={false}
1154+
rounded={false}
1155+
selectbox={false}
1156+
selected={false}
1157+
size="normal"
1158+
smallRounded={false}
1159+
wide={false}
1160+
>
1161+
string
1162+
</Button>
1163+
<Button
1164+
block={false}
1165+
className="AutoUI_ui_ConfirmationBox-46"
1166+
color="normal"
1167+
component="button"
1168+
contentStyle="normal"
1169+
disabled={false}
1170+
icon=""
1171+
iconProps={Object {}}
1172+
onClick={[Function]}
1173+
outlined={false}
1174+
pseudolink={true}
1175+
raised={false}
1176+
readOnly={false}
1177+
rounded={false}
1178+
selectbox={false}
1179+
selected={false}
1180+
size="normal"
1181+
smallRounded={false}
1182+
wide={false}
1183+
>
1184+
<span
1185+
className="AutoUI_ui_ConfirmationBox-57"
1186+
>
1187+
Dismiss
1188+
</span>
1189+
</Button>
1190+
</div>
1191+
`;
1192+
1193+
exports[`Storyshots Core Components|ConfirmationBox/Debug random data and action button only 1`] = `
1194+
<div
1195+
className="AutoUI_ui_ConfirmationBox-22"
1196+
>
1197+
<h2
1198+
className="AutoUI_ui_ConfirmationBox-28 AutoUI_typo-19"
1199+
>
1200+
string
1201+
</h2>
1202+
<p
1203+
className="AutoUI_ui_ConfirmationBox-36 AutoUI_typo-24"
1204+
>
1205+
string
1206+
</p>
1207+
<Button
1208+
block={false}
1209+
className=""
1210+
color="normal"
1211+
component="button"
1212+
contentStyle="normal"
1213+
disabled={false}
1214+
icon=""
1215+
iconProps={Object {}}
1216+
onClick={[Function]}
1217+
outlined={false}
1218+
pseudolink={false}
1219+
raised={false}
1220+
readOnly={false}
1221+
rounded={false}
1222+
selectbox={false}
1223+
selected={false}
1224+
size="normal"
1225+
smallRounded={false}
1226+
wide={false}
1227+
>
1228+
string
1229+
</Button>
1230+
</div>
1231+
`;
1232+
1233+
exports[`Storyshots Core Components|ConfirmationBox/Debug random data and dismiss button only 1`] = `
1234+
<div
1235+
className="AutoUI_ui_ConfirmationBox-22"
1236+
>
1237+
<h2
1238+
className="AutoUI_ui_ConfirmationBox-28 AutoUI_typo-19"
1239+
>
1240+
string
1241+
</h2>
1242+
<p
1243+
className="AutoUI_ui_ConfirmationBox-36 AutoUI_typo-24"
1244+
>
1245+
string
1246+
</p>
1247+
<Button
1248+
block={false}
1249+
className="AutoUI_ui_ConfirmationBox-46"
1250+
color="normal"
1251+
component="button"
1252+
contentStyle="normal"
1253+
disabled={false}
1254+
icon=""
1255+
iconProps={Object {}}
1256+
onClick={[Function]}
1257+
outlined={false}
1258+
pseudolink={true}
1259+
raised={false}
1260+
readOnly={false}
1261+
rounded={false}
1262+
selectbox={false}
1263+
selected={false}
1264+
size="normal"
1265+
smallRounded={false}
1266+
wide={false}
1267+
>
1268+
<span
1269+
className="AutoUI_ui_ConfirmationBox-57"
1270+
>
1271+
Dismiss
1272+
</span>
1273+
</Button>
1274+
</div>
1275+
`;
1276+
1277+
exports[`Storyshots Core Components|ConfirmationBox/Debug with Modal and random data 1`] = `
1278+
<div
1279+
style={
1280+
Object {
1281+
"minHeight": "100vh",
1282+
"overflow": "hidden",
1283+
}
1284+
}
1285+
>
1286+
<style
1287+
dangerouslySetInnerHTML={
1288+
Object {
1289+
"__html": "
1290+
body { margin: 0; }
1291+
",
1292+
}
1293+
}
1294+
/>
1295+
<State
1296+
initialState={
1297+
Object {
1298+
"isOpen": true,
1299+
}
1300+
}
1301+
>
1302+
<Component />
1303+
</State>
1304+
</div>
1305+
`;
1306+
1307+
exports[`Storyshots Core Components|ConfirmationBox/Use Cases with Modal 1`] = `
1308+
<div
1309+
style={
1310+
Object {
1311+
"minHeight": "100vh",
1312+
"overflow": "hidden",
1313+
}
1314+
}
1315+
>
1316+
<style
1317+
dangerouslySetInnerHTML={
1318+
Object {
1319+
"__html": "
1320+
body { margin: 0; }
1321+
",
1322+
}
1323+
}
1324+
/>
1325+
<State
1326+
initialState={
1327+
Object {
1328+
"isOpen": true,
1329+
}
1330+
}
1331+
>
1332+
<Component />
1333+
</State>
1334+
</div>
1335+
`;
1336+
10441337
exports[`Storyshots Core Components|ErrorBox basic usage 1`] = `
10451338
<div
10461339
className="AutoUI_ui_ErrorBox-19 AutoUI_typo-155 AutoUI_typo-36 AutoUI_typo-24"
@@ -14863,6 +15156,32 @@ exports[`Storyshots Styleguide|General ColorPalette 1`] = `
1486315156
</div>
1486415157
</div>
1486515158
</GenericCopyToClipboard>
15159+
<GenericCopyToClipboard
15160+
className=""
15161+
key="original colors-mountainMistGray"
15162+
text="mountainMistGray"
15163+
tooltipXOffset={0}
15164+
>
15165+
<div
15166+
className="AutoUI_styleguides_ColorPalette-55 AutoUI_typo-155 AutoUI_typo-36 AutoUI_typo-24"
15167+
style={
15168+
Object {
15169+
"backgroundColor": "#8E8D93",
15170+
}
15171+
}
15172+
>
15173+
<div
15174+
className="AutoUI_styleguides_ColorPalette-68"
15175+
>
15176+
mountainMistGray
15177+
</div>
15178+
<div
15179+
className="AutoUI_styleguides_ColorPalette-75"
15180+
>
15181+
#8E8D93
15182+
</div>
15183+
</div>
15184+
</GenericCopyToClipboard>
1486615185
<GenericCopyToClipboard
1486715186
className=""
1486815187
key="original colors-iron"
@@ -15033,6 +15352,32 @@ exports[`Storyshots Styleguide|General ColorPalette 1`] = `
1503315352
</div>
1503415353
</div>
1503515354
</GenericCopyToClipboard>
15355+
<GenericCopyToClipboard
15356+
className=""
15357+
key="base colors-baseTuna"
15358+
text="baseTuna"
15359+
tooltipXOffset={0}
15360+
>
15361+
<div
15362+
className="AutoUI_styleguides_ColorPalette-55 AutoUI_typo-155 AutoUI_typo-36 AutoUI_typo-24"
15363+
style={
15364+
Object {
15365+
"backgroundColor": "#34323B",
15366+
}
15367+
}
15368+
>
15369+
<div
15370+
className="AutoUI_styleguides_ColorPalette-68"
15371+
>
15372+
baseTuna
15373+
</div>
15374+
<div
15375+
className="AutoUI_styleguides_ColorPalette-75"
15376+
>
15377+
#34323B
15378+
</div>
15379+
</div>
15380+
</GenericCopyToClipboard>
1503615381
<GenericCopyToClipboard
1503715382
className=""
1503815383
key="base colors-baseRed"
@@ -15189,6 +15534,32 @@ exports[`Storyshots Styleguide|General ColorPalette 1`] = `
1518915534
</div>
1519015535
</div>
1519115536
</GenericCopyToClipboard>
15537+
<GenericCopyToClipboard
15538+
className=""
15539+
key="base colors-baseBrightGray"
15540+
text="baseBrightGray"
15541+
tooltipXOffset={0}
15542+
>
15543+
<div
15544+
className="AutoUI_styleguides_ColorPalette-55 AutoUI_typo-155 AutoUI_typo-36 AutoUI_typo-24"
15545+
style={
15546+
Object {
15547+
"backgroundColor": "#8E8D93",
15548+
}
15549+
}
15550+
>
15551+
<div
15552+
className="AutoUI_styleguides_ColorPalette-68"
15553+
>
15554+
baseBrightGray
15555+
</div>
15556+
<div
15557+
className="AutoUI_styleguides_ColorPalette-75"
15558+
>
15559+
#8E8D93
15560+
</div>
15561+
</div>
15562+
</GenericCopyToClipboard>
1519215563
<GenericCopyToClipboard
1519315564
className=""
1519415565
key="base colors-baseBrightSilver"

0 commit comments

Comments
 (0)