Skip to content

Commit 8bbac97

Browse files
Merge release/1.41.1 into main branch (#874)
* Move react-scripts to devDependencies (#854) * enforce storybook v6.2.1 (#864) * Button height and typography updates (#849) * add conditional removeBorderLeft, update Alert padding (#858) * Revert "Button height and typography updates (#849)" (#873) This reverts commit 5fc8bfe. * upgrade to bugsnag 7 (#871)
1 parent 8e69df3 commit 8bbac97

File tree

12 files changed

+1315
-1337
lines changed

12 files changed

+1315
-1337
lines changed

package.json

Lines changed: 17 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,10 @@
11
{
22
"name": "@user-interviews/ui-design-system",
3-
"version": "1.41.0",
3+
"version": "1.41.1",
44
"dependencies": {
5-
"@bugsnag/js": "^6.0.0",
6-
"@bugsnag/plugin-react": "^6.0.0",
75
"react-bootstrap": "^2.5.0",
86
"react-loading-skeleton": "^3.1.0",
97
"react-router-dom": "^5.2.0",
10-
"react-scripts": "0.2.3",
118
"react-select": "^5.0.0",
129
"react-toggle": "4.1.1",
1310
"react-transition-group": "^4.3.0",
@@ -42,6 +39,8 @@
4239
]
4340
},
4441
"peerDependencies": {
42+
"@bugsnag/js": "^7.0.0",
43+
"@bugsnag/plugin-react": "^7.0.0",
4544
"@fortawesome/fontawesome-svg-core": "^1.2.28",
4645
"@fortawesome/free-brands-svg-icons": "^5.15.3",
4746
"@fortawesome/pro-regular-svg-icons": "^5.15.3",
@@ -66,22 +65,24 @@
6665
"@babel/plugin-transform-runtime": "^7.12.1",
6766
"@babel/preset-env": "^7.8.4",
6867
"@babel/runtime": "^7.12.5",
68+
"@bugsnag/js": "^7.0.0",
69+
"@bugsnag/plugin-react": "^7.0.0",
6970
"@fortawesome/fontawesome-svg-core": "^1.2.28",
7071
"@fortawesome/free-brands-svg-icons": "^5.15.3",
7172
"@fortawesome/pro-regular-svg-icons": "^5.15.3",
7273
"@fortawesome/pro-solid-svg-icons": "^5.15.3",
7374
"@fortawesome/react-fontawesome": "^0.1.9",
7475
"@popperjs/core": "^2.5.3",
75-
"@storybook/addon-a11y": "^6.2.1",
76-
"@storybook/addon-actions": "^6.2.1",
77-
"@storybook/addon-docs": "^6.2.1",
78-
"@storybook/addon-jest": "^6.2.1",
79-
"@storybook/addon-knobs": "^6.2.1",
80-
"@storybook/addon-links": "^6.2.1",
81-
"@storybook/addon-storyshots": "^6.2.1",
82-
"@storybook/addon-storysource": "^6.2.1",
83-
"@storybook/addons": "^6.2.1",
84-
"@storybook/react": "^6.2.1",
76+
"@storybook/addon-a11y": "6.2.1",
77+
"@storybook/addon-actions": "6.2.1",
78+
"@storybook/addon-docs": "6.2.1",
79+
"@storybook/addon-jest": "6.2.1",
80+
"@storybook/addon-knobs": "6.2.1",
81+
"@storybook/addon-links": "6.2.1",
82+
"@storybook/addon-storyshots": "6.2.1",
83+
"@storybook/addon-storysource": "6.2.1",
84+
"@storybook/addons": "6.2.1",
85+
"@storybook/react": "6.2.1",
8586
"@storybook/storybook-deployer": "^2.8.7",
8687
"@testing-library/jest-dom": "^5.15.0",
8788
"@testing-library/react": "^12.1.2",
@@ -118,10 +119,11 @@
118119
"react-dom": "^16.12.0",
119120
"react-modal": "^3.12.1",
120121
"react-popper": "^2.2.3",
122+
"react-scripts": "0.2.3",
121123
"react-test-renderer": "^16.12.0",
122124
"react-tracking": "8.1.0",
123125
"sass-loader": "^8.0.2",
124-
"storybook-addon-designs": "^6.2.1",
126+
"storybook-addon-designs": "6.2.1",
125127
"style-loader": "^1.1.3",
126128
"styled-components": "^5.3.3"
127129
},

spec/__snapshots__/Storyshots.test.js.snap

Lines changed: 22 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1153,6 +1153,7 @@ exports[`Storyshots Components/Alert Announcement 1`] = `
11531153
>
11541154
<div
11551155
className="Alert Alert-announcement"
1156+
style={null}
11561157
>
11571158
<div
11581159
className="Alert__icon"
@@ -1218,6 +1219,7 @@ exports[`Storyshots Components/Alert Error 1`] = `
12181219
>
12191220
<div
12201221
className="Alert Alert-error"
1222+
style={null}
12211223
>
12221224
<div
12231225
className="Alert__icon"
@@ -1284,6 +1286,7 @@ exports[`Storyshots Components/Alert Info 1`] = `
12841286
>
12851287
<div
12861288
className="Alert Alert-info"
1289+
style={null}
12871290
>
12881291
<div
12891292
className="Alert__icon"
@@ -1385,6 +1388,7 @@ exports[`Storyshots Components/Alert Success 1`] = `
13851388
>
13861389
<div
13871390
className="Alert Alert-success"
1391+
style={null}
13881392
>
13891393
<div
13901394
className="Alert__icon"
@@ -1486,6 +1490,7 @@ exports[`Storyshots Components/Alert Warning 1`] = `
14861490
>
14871491
<div
14881492
className="Alert Alert-warning"
1493+
style={null}
14891494
>
14901495
<div
14911496
className="Alert__icon"
@@ -1554,6 +1559,7 @@ exports[`Storyshots Components/Alert With Call To Action 1`] = `
15541559
</p>
15551560
<div
15561561
className="Alert Alert-success"
1562+
style={null}
15571563
>
15581564
<div
15591565
className="Alert__icon"
@@ -1683,6 +1689,7 @@ exports[`Storyshots Components/Alert With Call To Action 1`] = `
16831689
</div>
16841690
<div
16851691
className="Alert Alert-info"
1692+
style={null}
16861693
>
16871694
<div
16881695
className="Alert__icon"
@@ -1812,6 +1819,7 @@ exports[`Storyshots Components/Alert With Call To Action 1`] = `
18121819
</div>
18131820
<div
18141821
className="Alert Alert-announcement"
1822+
style={null}
18151823
>
18161824
<div
18171825
className="Alert__icon"
@@ -1905,6 +1913,7 @@ exports[`Storyshots Components/Alert With Call To Action 1`] = `
19051913
</div>
19061914
<div
19071915
className="Alert Alert-error"
1916+
style={null}
19081917
>
19091918
<div
19101919
className="Alert__icon"
@@ -1999,6 +2008,7 @@ exports[`Storyshots Components/Alert With Call To Action 1`] = `
19992008
</div>
20002009
<div
20012010
className="Alert Alert-warning"
2011+
style={null}
20022012
>
20032013
<div
20042014
className="Alert__icon"
@@ -2099,6 +2109,7 @@ exports[`Storyshots Components/Alert With Call To Action 1`] = `
20992109
</p>
21002110
<div
21012111
className="Alert Alert-announcement"
2112+
style={null}
21022113
>
21032114
<div
21042115
className="Alert__icon"
@@ -2231,6 +2242,7 @@ exports[`Storyshots Components/Alert With Call To Action 1`] = `
22312242
</p>
22322243
<div
22332244
className="Alert Alert-announcement"
2245+
style={null}
22342246
>
22352247
<div
22362248
className="Alert__icon"
@@ -2370,6 +2382,7 @@ exports[`Storyshots Components/Alert With Dismiss 1`] = `
23702382
>
23712383
<div
23722384
className="Alert Alert-success"
2385+
style={null}
23732386
>
23742387
<div
23752388
className="Alert__icon"
@@ -21208,7 +21221,7 @@ exports[`Storyshots Components/Tabs Controlled 1`] = `
2120821221
>
2120921222
<div>
2121021223
<span
21211-
className="sc-dmyDGi goryrA"
21224+
className="sc-dmqHEX hCuTMq"
2121221225
>
2121321226
<ul
2121421227
className="nav nav-tabs"
@@ -21375,7 +21388,7 @@ exports[`Storyshots Components/Tabs Uncontrolled 1`] = `
2137521388
>
2137621389
<div>
2137721390
<span
21378-
className="sc-dmyDGi goryrA"
21391+
className="sc-dmqHEX hCuTMq"
2137921392
>
2138021393
<ul
2138121394
className="nav nav-tabs"
@@ -26088,7 +26101,7 @@ exports[`Storyshots Layouts/CardStack Centered 1`] = `
2608826101
}
2608926102
>
2609026103
<div
26091-
className="sc-beySbM psqHh"
26104+
className="sc-beqWaB fNruvw"
2609226105
>
2609326106
<div
2609426107
className="CardStack CardStack--sm"
@@ -27093,7 +27106,7 @@ exports[`Storyshots Layouts/Flex Default 1`] = `
2709327106
}
2709427107
>
2709527108
<div
27096-
className="sc-beySbM dqVzNU"
27109+
className="sc-beqWaB jIpbcZ"
2709727110
height="100%"
2709827111
>
2709927112
<div
@@ -27389,7 +27402,7 @@ exports[`Storyshots Layouts/Flex Flex Container 1`] = `
2738927402
Properties for the parent (flex container)
2739027403
</h1>
2739127404
<div
27392-
className="sc-beySbM dqVzNU"
27405+
className="sc-beqWaB jIpbcZ"
2739327406
height="100%"
2739427407
>
2739527408
<div
@@ -27685,10 +27698,10 @@ exports[`Storyshots Layouts/Flex Flex Item 1`] = `
2768527698
Properties for the children (flex item)
2768627699
</h1>
2768727700
<div
27688-
className="sc-beySbM cbcIFp"
27701+
className="sc-beqWaB oxxVE"
2768927702
>
2769027703
<div
27691-
className="sc-beySbM letLKH"
27704+
className="sc-beqWaB kPfexu"
2769227705
>
2769327706
<div
2769427707
className="ProfileCell"
@@ -27737,7 +27750,7 @@ exports[`Storyshots Layouts/Flex Flex Item 1`] = `
2773727750
</div>
2773827751
</div>
2773927752
<div
27740-
className="sc-beySbM gXSAHo"
27753+
className="sc-beqWaB hUPLHF"
2774127754
>
2774227755
<div
2774327756
className="ProfileCell"
@@ -27786,7 +27799,7 @@ exports[`Storyshots Layouts/Flex Flex Item 1`] = `
2778627799
</div>
2778727800
</div>
2778827801
<div
27789-
className="sc-beySbM gXSAHo"
27802+
className="sc-beqWaB hUPLHF"
2779027803
>
2779127804
<div
2779227805
className="ProfileCell"

src/Alert/Alert.jsx

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -73,7 +73,10 @@ function Alert(props) {
7373
}, [autoDismiss, onDismiss, id]);
7474

7575
return (
76-
<div className={getAlertClassName(props.type)}>
76+
<div
77+
className={getAlertClassName(props.type)}
78+
style={props.removeBorderLeft ? { borderLeft: 'none' } : null}
79+
>
7780
<div className="Alert__icon">
7881
{getAlertIcon(props.type)}
7982
</div>
@@ -138,6 +141,7 @@ Alert.propTypes = {
138141
autoDismiss: PropTypes.bool,
139142
id: PropTypes.string.isRequired,
140143
message: PropTypes.oneOfType([PropTypes.string, PropTypes.node]).isRequired,
144+
removeBorderLeft: PropTypes.bool,
141145
title: PropTypes.string,
142146
/**
143147
One of the MessageTypes
@@ -149,6 +153,7 @@ Alert.propTypes = {
149153
Alert.defaultProps = {
150154
action: undefined,
151155
autoDismiss: false,
156+
removeBorderLeft: false,
152157
title: undefined,
153158
onDismiss: undefined,
154159
};

src/Alert/Alert.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -46,7 +46,7 @@
4646
font-weight: 500;
4747
border-radius: $ux-border-radius;
4848
margin-bottom: $ux-spacing-40;
49-
padding: $ux-spacing-30 1.25rem;
49+
padding: $ux-spacing-40;
5050
position: relative;
5151

5252
&__icon {

src/Alert/Alert.stories.jsx

Lines changed: 14 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
import React, { Fragment } from 'react';
2-
import { withKnobs, text } from '@storybook/addon-knobs';
2+
import { boolean, text, withKnobs } from '@storybook/addon-knobs';
33
import { action } from '@storybook/addon-actions';
44

55
import { Alert, MessageTypes } from 'src/Alert';
@@ -26,6 +26,7 @@ export const Success = () => (
2626
<Alert
2727
id="1"
2828
message={text('Message', 'Success message')}
29+
removeBorderLeft={boolean('removeBorderLeft', false)}
2930
title={text('Title', 'Success title')}
3031
type={MessageTypes.SUCCESS}
3132
/>
@@ -35,6 +36,7 @@ export const Info = () => (
3536
<Alert
3637
id="2"
3738
message={text('Message', 'Info message')}
39+
removeBorderLeft={boolean('removeBorderLeft', false)}
3840
title={text('Title', 'Info title')}
3941
type={MessageTypes.INFO}
4042
/>
@@ -44,6 +46,7 @@ export const Announcement = () => (
4446
<Alert
4547
id="3"
4648
message={text('Message', 'Announcement message')}
49+
removeBorderLeft={boolean('removeBorderLeft', false)}
4750
title={text('Title', 'Announcement title')}
4851
type={MessageTypes.ANNOUNCEMENT}
4952
/>
@@ -53,6 +56,7 @@ export const Error = () => (
5356
<Alert
5457
id="4"
5558
message={text('Message', 'Error message')}
59+
removeBorderLeft={boolean('removeBorderLeft', false)}
5660
title={text('Title', 'Error title')}
5761
type={MessageTypes.ERROR}
5862
/>
@@ -62,6 +66,7 @@ export const Warning = () => (
6266
<Alert
6367
id="5"
6468
message={text('Message', 'Warning message')}
69+
removeBorderLeft={boolean('removeBorderLeft', false)}
6570
title={text('Title', 'Warning title')}
6671
type={MessageTypes.WARNING}
6772
/>
@@ -75,6 +80,7 @@ export const WithDismiss = () => (
7580
<Alert
7681
id="6"
7782
message={text('Message', 'Default message')}
83+
removeBorderLeft={boolean('removeBorderLeft', false)}
7884
title={text('Title', 'Default title')}
7985
type={MessageTypes.SUCCESS}
8086
onDismiss={onDismiss}
@@ -108,6 +114,7 @@ export const WithCallToAction = () => (
108114
action={{ content: 'Primary action', url: 'https://www.userinterviews.com/' }}
109115
id="8"
110116
message="Success message"
117+
removeBorderLeft={boolean('removeBorderLeft', false)}
111118
title="Success title"
112119
type={MessageTypes.SUCCESS}
113120
onDismiss={onDismiss}
@@ -116,6 +123,7 @@ export const WithCallToAction = () => (
116123
action={{ content: 'Primary action', url: 'https://www.userinterviews.com/' }}
117124
id="9"
118125
message="Info message"
126+
removeBorderLeft={boolean('removeBorderLeft', false)}
119127
title="Info title"
120128
type={MessageTypes.INFO}
121129
onDismiss={onDismiss}
@@ -124,6 +132,7 @@ export const WithCallToAction = () => (
124132
action={{ content: 'Primary action', url: 'https://www.userinterviews.com/' }}
125133
id="10"
126134
message="Announcement message"
135+
removeBorderLeft={boolean('removeBorderLeft', false)}
127136
title="Announcement title"
128137
type={MessageTypes.ANNOUNCEMENT}
129138
onDismiss={onDismiss}
@@ -132,6 +141,7 @@ export const WithCallToAction = () => (
132141
action={{ content: 'Primary action', url: 'https://www.userinterviews.com/' }}
133142
id="11"
134143
message="Error message"
144+
removeBorderLeft={boolean('removeBorderLeft', false)}
135145
title="Error title"
136146
type={MessageTypes.ERROR}
137147
onDismiss={onDismiss}
@@ -140,6 +150,7 @@ export const WithCallToAction = () => (
140150
action={{ content: 'Primary action', url: 'https://www.userinterviews.com/' }}
141151
id="12"
142152
message="Warning message"
153+
removeBorderLeft={boolean('removeBorderLeft', false)}
143154
title="Warning title"
144155
type={MessageTypes.WARNING}
145156
onDismiss={onDismiss}
@@ -156,6 +167,7 @@ export const WithCallToAction = () => (
156167
<GoogleCalendarButton />
157168
</Fragment>
158169
)}
170+
removeBorderLeft={boolean('removeBorderLeft', false)}
159171
title={text('Title', 'Connect to Google Calendar to create reminders automatically')}
160172
type={MessageTypes.ANNOUNCEMENT}
161173
onDismiss={onDismiss}
@@ -167,6 +179,7 @@ export const WithCallToAction = () => (
167179
id="8"
168180
message={text('Message', `When you confirm a session we’ll automatically
169181
add an event and reminders to your Google Calendar.`)}
182+
removeBorderLeft={boolean('removeBorderLeft', false)}
170183
title={text('Title', 'Connect to Google Calendar to create reminders automatically')}
171184
type={MessageTypes.ANNOUNCEMENT}
172185
onDismiss={onDismiss}

0 commit comments

Comments
 (0)