Skip to content

Commit 3264e33

Browse files
github-actions[bot]github-actions[bot]
authored
Merge release/1.36.2 into main branch (#769)
* Use default color for input label tooltips (#761) * update cursor to pointer on select control (#765) * add CardStack (#763)
1 parent 366e90e commit 3264e33

File tree

12 files changed

+360
-33
lines changed

12 files changed

+360
-33
lines changed

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@user-interviews/ui-design-system",
3-
"version": "1.36.1",
3+
"version": "1.36.2",
44
"dependencies": {
55
"react-bootstrap": "^2.5.0",
66
"react-router-dom": "^5.2.0",

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

Lines changed: 184 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -6325,7 +6325,7 @@ exports[`Storyshots Components/Form Elements/Form Group With Label Tooltip 1`] =
63256325
Label
63266326
<span
63276327
aria-hidden="true"
6328-
className="Tooltip__icon Tooltip__icon--gray"
6328+
className="Tooltip__icon Tooltip__icon"
63296329
onClick={[Function]}
63306330
onKeyPress={[Function]}
63316331
tabIndex="0"
@@ -9071,7 +9071,7 @@ exports[`Storyshots Components/Selects/Async Default 1`] = `
90719071
className="css-1f43avz-a11yText-A11yText"
90729072
/>
90739073
<div
9074-
className=" css-15ub2n0-control"
9074+
className=" css-cijnja-control"
90759075
onMouseDown={[Function]}
90769076
onTouchEnd={[Function]}
90779077
>
@@ -9233,7 +9233,7 @@ exports[`Storyshots Components/Selects/Async In Modal 1`] = `
92339233
className="css-1f43avz-a11yText-A11yText"
92349234
/>
92359235
<div
9236-
className=" css-15ub2n0-control"
9236+
className=" css-cijnja-control"
92379237
onMouseDown={[Function]}
92389238
onTouchEnd={[Function]}
92399239
>
@@ -9372,7 +9372,7 @@ exports[`Storyshots Components/Selects/Async Labeled 1`] = `
93729372
className="css-1f43avz-a11yText-A11yText"
93739373
/>
93749374
<div
9375-
className=" css-15ub2n0-control"
9375+
className=" css-cijnja-control"
93769376
onMouseDown={[Function]}
93779377
onTouchEnd={[Function]}
93789378
>
@@ -9482,7 +9482,7 @@ exports[`Storyshots Components/Selects/AsyncCreatable Default 1`] = `
94829482
className="css-1f43avz-a11yText-A11yText"
94839483
/>
94849484
<div
9485-
className=" css-15ub2n0-control"
9485+
className=" css-cijnja-control"
94869486
onMouseDown={[Function]}
94879487
onTouchEnd={[Function]}
94889488
>
@@ -9644,7 +9644,7 @@ exports[`Storyshots Components/Selects/AsyncCreatable In Modal 1`] = `
96449644
className="css-1f43avz-a11yText-A11yText"
96459645
/>
96469646
<div
9647-
className=" css-15ub2n0-control"
9647+
className=" css-cijnja-control"
96489648
onMouseDown={[Function]}
96499649
onTouchEnd={[Function]}
96509650
>
@@ -9776,7 +9776,7 @@ exports[`Storyshots Components/Selects/Creatable Default 1`] = `
97769776
className="css-1f43avz-a11yText-A11yText"
97779777
/>
97789778
<div
9779-
className=" css-15ub2n0-control"
9779+
className=" css-cijnja-control"
97809780
onMouseDown={[Function]}
97819781
onTouchEnd={[Function]}
97829782
>
@@ -9936,7 +9936,7 @@ exports[`Storyshots Components/Selects/Creatable In Modal 1`] = `
99369936
className="css-1f43avz-a11yText-A11yText"
99379937
/>
99389938
<div
9939-
className=" css-15ub2n0-control"
9939+
className=" css-cijnja-control"
99409940
onMouseDown={[Function]}
99419941
onTouchEnd={[Function]}
99429942
>
@@ -10074,7 +10074,7 @@ exports[`Storyshots Components/Selects/Single Custom Option With Checkbox 1`] =
1007410074
className="css-1f43avz-a11yText-A11yText"
1007510075
/>
1007610076
<div
10077-
className=" css-15ub2n0-control"
10077+
className=" css-cijnja-control"
1007810078
onMouseDown={[Function]}
1007910079
onTouchEnd={[Function]}
1008010080
>
@@ -10167,7 +10167,7 @@ exports[`Storyshots Components/Selects/Single Custom Option With Indeterminate C
1016710167
className="css-1f43avz-a11yText-A11yText"
1016810168
/>
1016910169
<div
10170-
className=" css-15ub2n0-control"
10170+
className=" css-cijnja-control"
1017110171
onMouseDown={[Function]}
1017210172
onTouchEnd={[Function]}
1017310173
>
@@ -10260,7 +10260,7 @@ exports[`Storyshots Components/Selects/Single Custom Value Container 1`] = `
1026010260
className="css-1f43avz-a11yText-A11yText"
1026110261
/>
1026210262
<div
10263-
className=" css-15ub2n0-control"
10263+
className=" css-cijnja-control"
1026410264
onMouseDown={[Function]}
1026510265
onTouchEnd={[Function]}
1026610266
>
@@ -10346,7 +10346,7 @@ exports[`Storyshots Components/Selects/Single Default 1`] = `
1034610346
className="css-1f43avz-a11yText-A11yText"
1034710347
/>
1034810348
<div
10349-
className=" css-15ub2n0-control"
10349+
className=" css-cijnja-control"
1035010350
onMouseDown={[Function]}
1035110351
onTouchEnd={[Function]}
1035210352
>
@@ -10484,7 +10484,7 @@ exports[`Storyshots Components/Selects/Single In Modal 1`] = `
1048410484
className="css-1f43avz-a11yText-A11yText"
1048510485
/>
1048610486
<div
10487-
className=" css-15ub2n0-control"
10487+
className=" css-cijnja-control"
1048810488
onMouseDown={[Function]}
1048910489
onTouchEnd={[Function]}
1049010490
>
@@ -10599,7 +10599,7 @@ exports[`Storyshots Components/Selects/Single Labeled 1`] = `
1059910599
className="css-1f43avz-a11yText-A11yText"
1060010600
/>
1060110601
<div
10602-
className=" css-15ub2n0-control"
10602+
className=" css-cijnja-control"
1060310603
onMouseDown={[Function]}
1060410604
onTouchEnd={[Function]}
1060510605
>
@@ -10685,7 +10685,7 @@ exports[`Storyshots Components/Selects/Single Loading 1`] = `
1068510685
className="css-1f43avz-a11yText-A11yText"
1068610686
/>
1068710687
<div
10688-
className=" css-1930729-control"
10688+
className=" css-1lnko50-control"
1068910689
onMouseDown={[Function]}
1069010690
onTouchEnd={[Function]}
1069110691
>
@@ -10778,7 +10778,7 @@ exports[`Storyshots Components/Selects/Single Multi Select 1`] = `
1077810778
className="css-1f43avz-a11yText-A11yText"
1077910779
/>
1078010780
<div
10781-
className=" css-15ub2n0-control"
10781+
className=" css-cijnja-control"
1078210782
onMouseDown={[Function]}
1078310783
onTouchEnd={[Function]}
1078410784
>
@@ -10864,7 +10864,7 @@ exports[`Storyshots Components/Selects/Single Searchable 1`] = `
1086410864
className="css-1f43avz-a11yText-A11yText"
1086510865
/>
1086610866
<div
10867-
className=" css-15ub2n0-control"
10867+
className=" css-cijnja-control"
1086810868
onMouseDown={[Function]}
1086910869
onTouchEnd={[Function]}
1087010870
>
@@ -25166,6 +25166,173 @@ exports[`Storyshots Foundations/Typography Typography 1`] = `
2516625166
</div>
2516725167
`;
2516825168

25169+
exports[`Storyshots Layouts/CardStack Centered 1`] = `
25170+
<div
25171+
style={
25172+
Object {
25173+
"padding": "1rem",
25174+
}
25175+
}
25176+
>
25177+
<div
25178+
style={
25179+
Object {
25180+
"display": "flex",
25181+
"justifyContent": "center",
25182+
}
25183+
}
25184+
>
25185+
<div
25186+
className="CardStack CardStack--sm"
25187+
>
25188+
<h1
25189+
style={
25190+
Object {
25191+
"fontSize": "1.5rem",
25192+
"fontWeight": 700,
25193+
}
25194+
}
25195+
>
25196+
CardStack
25197+
</h1>
25198+
<section
25199+
className="Card"
25200+
>
25201+
<div
25202+
className="Card__header"
25203+
>
25204+
<h2
25205+
className="Card__title"
25206+
>
25207+
Card 1
25208+
</h2>
25209+
</div>
25210+
<p>
25211+
Many pages consist of
25212+
<code>
25213+
CardStack
25214+
</code>
25215+
containers centered on the page.
25216+
</p>
25217+
<p>
25218+
<code>
25219+
CardStack
25220+
</code>
25221+
can be placed in any container and aligned as needed. This example is in a container with
25222+
<code>
25223+
display: flex; justify-content: center;
25224+
</code>
25225+
</p>
25226+
</section>
25227+
<section
25228+
className="Card"
25229+
>
25230+
<div
25231+
className="Card__header"
25232+
>
25233+
<h2
25234+
className="Card__title"
25235+
>
25236+
Card 2
25237+
</h2>
25238+
</div>
25239+
</section>
25240+
<section
25241+
className="Card"
25242+
>
25243+
<div
25244+
className="Card__header"
25245+
>
25246+
<h2
25247+
className="Card__title"
25248+
>
25249+
Card 3
25250+
</h2>
25251+
</div>
25252+
</section>
25253+
</div>
25254+
</div>
25255+
</div>
25256+
`;
25257+
25258+
exports[`Storyshots Layouts/CardStack Default 1`] = `
25259+
<div
25260+
style={
25261+
Object {
25262+
"padding": "1rem",
25263+
}
25264+
}
25265+
>
25266+
<div
25267+
className="CardStack CardStack--sm"
25268+
>
25269+
<h1
25270+
style={
25271+
Object {
25272+
"fontSize": "1.5rem",
25273+
"fontWeight": 700,
25274+
}
25275+
}
25276+
>
25277+
CardStack
25278+
</h1>
25279+
<section
25280+
className="Card"
25281+
>
25282+
<div
25283+
className="Card__header"
25284+
>
25285+
<h2
25286+
className="Card__title"
25287+
>
25288+
Card 1
25289+
</h2>
25290+
</div>
25291+
<p>
25292+
A layout container for a vertical stack of
25293+
<code>
25294+
Card
25295+
</code>
25296+
components
25297+
</p>
25298+
<p>
25299+
Adjust the
25300+
<code>
25301+
size
25302+
</code>
25303+
knob below
25304+
</p>
25305+
</section>
25306+
<section
25307+
className="Card"
25308+
>
25309+
<div
25310+
className="Card__header"
25311+
>
25312+
<h2
25313+
className="Card__title"
25314+
>
25315+
Card 2
25316+
</h2>
25317+
</div>
25318+
</section>
25319+
<section
25320+
className="Card"
25321+
>
25322+
<div
25323+
className="Card__header"
25324+
>
25325+
<h2
25326+
className="Card__title"
25327+
>
25328+
Card 3
25329+
</h2>
25330+
</div>
25331+
</section>
25332+
</div>
25333+
</div>
25334+
`;
25335+
2516925336
exports[`Storyshots Layouts/Container Auto Layout Columns 1`] = `
2517025337
<div
2517125338
style={

‎src/CardStack/CardStack.jsx‎

Lines changed: 38 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import React from 'react';
2+
import classNames from 'classnames';
3+
import PropTypes from 'prop-types';
4+
5+
import { CardSizes } from 'src/Card';
6+
7+
import './CardStack.scss';
8+
9+
const CardStack = ({
10+
children,
11+
// eslint-disable-next-line camelcase
12+
UNSAFE_className,
13+
size,
14+
...props
15+
}) => (
16+
<div
17+
className={classNames(
18+
UNSAFE_className,
19+
'CardStack',
20+
{ [`CardStack--${size}`]: size },
21+
)}
22+
{...props}
23+
>
24+
{children}
25+
</div>
26+
);
27+
28+
CardStack.propTypes = {
29+
size: PropTypes.oneOf(Object.values(CardSizes)),
30+
UNSAFE_className: PropTypes.string,
31+
};
32+
33+
CardStack.defaultProps = {
34+
size: undefined,
35+
UNSAFE_className: undefined,
36+
};
37+
38+
export default CardStack;

0 commit comments

Comments
 (0)