Skip to content

Commit 487a9dc

Browse files
github-actions[bot]github-actions[bot]
authored
Merge release/2.2.3 into main branch (#1058)
* upgrade css-loader (#1050) * Bump postcss from 8.4.29 to 8.4.31 (#1051) * Fixes Bootstrap classname collision in Tabs component for Rails Server (#1049) * Fixes prop name in Tabs (#1052) Prevents tab class name prop from getting overridden. * add trailingText to Input component (#1056) * Allow drawer to be expanded by default (#1057)
1 parent b0a915e commit 487a9dc

File tree

12 files changed

+261
-84
lines changed

12 files changed

+261
-84
lines changed

‎package.json‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@user-interviews/ui-design-system",
3-
"version": "2.2.2",
3+
"version": "2.2.3",
44
"dependencies": {
55
"@tiptap/core": "^2.0.3",
66
"@tiptap/extension-bold": "^2.0.3",
@@ -122,7 +122,7 @@
122122
"bootstrap": "5.1",
123123
"chromatic": "^6.7.0",
124124
"classnames": "^2.2.5",
125-
"css-loader": "^4.3.0",
125+
"css-loader": "^6.8.1",
126126
"eslint": "^7.32.0",
127127
"eslint-config-airbnb": "^18.0.1",
128128
"eslint-config-react-app": "^5.2.1",

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

Lines changed: 140 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -6033,6 +6033,113 @@ Array [
60336033
]
60346034
`;
60356035

6036+
exports[`Storyshots Components/Drawer Default Expanded 1`] = `
6037+
Array [
6038+
<button
6039+
className="Button btn btn-primary"
6040+
disabled={false}
6041+
onClick={[Function]}
6042+
type="button"
6043+
>
6044+
Open
6045+
</button>,
6046+
<div
6047+
className="DrawerBackgroundOverlay"
6048+
onClick={[Function]}
6049+
onKeyDown={[Function]}
6050+
role="presentation"
6051+
/>,
6052+
<div
6053+
className="Drawer Drawer--right Drawer--sm Drawer--expanded Drawer--behind-nav"
6054+
>
6055+
<div
6056+
className="Drawer__header Drawer__header--bordered"
6057+
>
6058+
<div
6059+
className="Drawer__title"
6060+
>
6061+
Title goes here
6062+
</div>
6063+
<button
6064+
aria-label="Close"
6065+
className="Drawer__header-action"
6066+
onClick={[Function]}
6067+
type="button"
6068+
>
6069+
<svg
6070+
aria-hidden="true"
6071+
className="svg-inline--fa fa-xmark "
6072+
data-icon="xmark"
6073+
data-prefix="fas"
6074+
focusable="false"
6075+
role="img"
6076+
style={Object {}}
6077+
viewBox="0 0 384 512"
6078+
xmlns="http://www.w3.org/2000/svg"
6079+
>
6080+
<path
6081+
d="M342.6 150.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L192 210.7 86.6 105.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3L146.7 256 41.4 361.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L192 301.3 297.4 406.6c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L237.3 256 342.6 150.6z"
6082+
fill="currentColor"
6083+
style={Object {}}
6084+
/>
6085+
</svg>
6086+
</button>
6087+
</div>
6088+
<div
6089+
className="Drawer__body"
6090+
>
6091+
<p>
6092+
Proin elementum vitae nibh nec tincidunt. Donec vel placerat mi, vitae malesuada odio. Sed varius libero sed erat faucibus ultrices. Suspendisse potenti. Mauris sit amet sollicitudin urna. Donec porttitor, est quis aliquet condimentum, nisi felis porta odio, eu luctus dui ex id nisi. Curabitur ultrices enim in dolor laoreet porta. Proin vehicula at nisl a maximus. Sed lorem enim, elementum in arcu eu, lacinia consequat arcu. Pellentesque non nibh viverra, imperdiet purus at, finibus turpis. Sed mattis erat a risus dignissim, eu ultrices est rhoncus. Fusce nec feugiat tortor. Quisque tincidunt nulla urna, ut egestas massa congue a. Quisque metus felis, auctor sit amet posuere eu, aliquam blandit libero. Mauris sodales, velit sit amet egestas aliquet, ipsum arcu porta lacus, vitae mattis felis elit in metus. Nulla ligula ligula, laoreet in dictum sit amet, pretium ac est.
6093+
</p>
6094+
</div>
6095+
<div
6096+
className="DrawerFooter"
6097+
>
6098+
<div />
6099+
<div
6100+
className="DrawerFooter__actions"
6101+
>
6102+
<button
6103+
aria-disabled={false}
6104+
className="Button btn btn-transparent"
6105+
disabled={false}
6106+
onClick={[Function]}
6107+
type="button"
6108+
>
6109+
Cancel
6110+
</button>
6111+
<button
6112+
aria-disabled={false}
6113+
className="Button btn btn-primary"
6114+
disabled={false}
6115+
onClick={[Function]}
6116+
type="button"
6117+
>
6118+
<svg
6119+
aria-hidden="true"
6120+
className="svg-inline--fa fa-envelope icon-left"
6121+
data-icon="envelope"
6122+
data-prefix="fas"
6123+
focusable="false"
6124+
role="img"
6125+
style={Object {}}
6126+
viewBox="0 0 512 512"
6127+
xmlns="http://www.w3.org/2000/svg"
6128+
>
6129+
<path
6130+
d="M48 64C21.5 64 0 85.5 0 112c0 15.1 7.1 29.3 19.2 38.4L236.8 313.6c11.4 8.5 27 8.5 38.4 0L492.8 150.4c12.1-9.1 19.2-23.3 19.2-38.4c0-26.5-21.5-48-48-48H48zM0 176V384c0 35.3 28.7 64 64 64H448c35.3 0 64-28.7 64-64V176L294.4 339.2c-22.8 17.1-54 17.1-76.8 0L0 176z"
6131+
fill="currentColor"
6132+
style={Object {}}
6133+
/>
6134+
</svg>
6135+
Send
6136+
</button>
6137+
</div>
6138+
</div>
6139+
</div>,
6140+
]
6141+
`;
6142+
60366143
exports[`Storyshots Components/Drawer Empty 1`] = `
60376144
Array [
60386145
<button
@@ -8250,6 +8357,39 @@ exports[`Storyshots Components/Form Elements/Form Group With Trailing Icon And B
82508357
</div>
82518358
`;
82528359

8360+
exports[`Storyshots Components/Form Elements/Form Group With Trailing Text 1`] = `
8361+
<div
8362+
className="FormGroup"
8363+
id="with-trailing-text"
8364+
>
8365+
<label
8366+
className="InputLabel"
8367+
htmlFor="trailing-text-input"
8368+
>
8369+
Form Group with trailing text
8370+
</label>
8371+
<div
8372+
className="Input input-group"
8373+
>
8374+
<input
8375+
className="Input form-control"
8376+
disabled={false}
8377+
id="trailing-text-input"
8378+
name="default"
8379+
onChange={[Function]}
8380+
placeholder="Session length"
8381+
type="number"
8382+
value=""
8383+
/>
8384+
<span
8385+
className="input-trailing-text input-trailing-text--input-type-number"
8386+
>
8387+
min
8388+
</span>
8389+
</div>
8390+
</div>
8391+
`;
8392+
82538393
exports[`Storyshots Components/Form Elements/RadioButtonGroup Bordered Column Full Width 1`] = `
82548394
<fieldset
82558395
className="FormGroup"

‎src/Drawer/Drawer.jsx‎

Lines changed: 4 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -25,14 +25,15 @@ const Drawer = ({
2525
behindNav,
2626
children,
2727
className,
28+
defaultExpanded,
2829
expandable,
2930
hasBackgroundOverlay,
3031
visible,
3132
orientation,
3233
size,
3334
onRequestClose,
3435
}) => {
35-
const [expanded, setExpanded] = useState(false);
36+
const [expanded, setExpanded] = useState(defaultExpanded);
3637

3738
const handleExpand = () => setExpanded(!expanded);
3839

@@ -86,6 +87,7 @@ Drawer.propTypes = {
8687
behindNav: propTypes.bool,
8788
children: propTypes.node,
8889
className: propTypes.string,
90+
defaultExpanded: propTypes.bool,
8991
expandable: propTypes.bool,
9092
hasBackgroundOverlay: propTypes.bool,
9193
orientation: propTypes.oneOf([ORIENTATION_LEFT, ORIENTATION_RIGHT]),
@@ -98,6 +100,7 @@ Drawer.defaultProps = {
98100
behindNav: true,
99101
children: undefined,
100102
className: null,
103+
defaultExpanded: false,
101104
expandable: false,
102105
hasBackgroundOverlay: true,
103106
orientation: ORIENTATION_RIGHT,

‎src/Drawer/Drawer.mdx‎

Lines changed: 7 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ import * as ComponentStories from './Drawer.stories';
1515

1616
<Canvas of={ComponentStories.Default} />
1717

18-
### When to use
18+
### When to use
1919
When we want to focus the user’s attention on an interactive interface or a large amount of information
2020

2121
### When to not use
@@ -50,7 +50,12 @@ Pass `orientation="left"` to override the default behavior of sliding in from th
5050

5151
### Expandable
5252

53-
Setting `expandable` allows the drawer to expand to the full size of the viewport
53+
Setting `expandable` allows the drawer to expand to the full size of the viewport when the expand button is clicked.
54+
55+
### Default Expanded
56+
57+
Setting `defaultExpanded` allows the drawer to expand the full size of the viewport by default. This can be used in conjunction with `expandable.` For example if
58+
you want the drawer to be the full width of the viewport but you want to disable the ability to collapse it, you can set `expandable=false` and `defaultExpanded=true`.
5459

5560
### Additional Actions
5661

‎src/Drawer/Drawer.stories.jsx‎

Lines changed: 57 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -37,6 +37,7 @@ export const Default = () => {
3737
<Button onClick={toggleVisible}>Open</Button>
3838
<Drawer
3939
behindNav={(boolean('behindNav', true))}
40+
defaultExpanded={boolean('defaultExpanded', false)}
4041
expandable={boolean('expandable', false)}
4142
hasBackgroundOverlay={boolean('hasBackgroundOverlay', true)}
4243
orientation={select('orientation', ['left', 'right'], 'right')}
@@ -89,6 +90,7 @@ export const Orientation = () => {
8990
<Button onClick={toggleVisible}>Open</Button>
9091
<Drawer
9192
behindNav={(boolean('behindNav', true))}
93+
defaultExpanded={boolean('defaultExpanded', false)}
9294
expandable={boolean('expandable', false)}
9395
hasBackgroundOverlay={boolean('hasBackgroundOverlay', true)}
9496
orientation={select('orientation', ['left', 'right'], 'left')}
@@ -141,6 +143,7 @@ export const Expandable = () => {
141143
<Button onClick={toggleVisible}>Open</Button>
142144
<Drawer
143145
behindNav={(boolean('behindNav', true))}
146+
defaultExpanded={boolean('defaultExpanded', false)}
144147
expandable={boolean('expandable', true)}
145148
hasBackgroundOverlay={boolean('hasBackgroundOverlay', true)}
146149
orientation={select('orientation', ['left', 'right'], 'right')}
@@ -183,6 +186,59 @@ export const Expandable = () => {
183186
);
184187
};
185188

189+
export const DefaultExpanded = () => {
190+
const [isVisible, setVisible] = useState(false);
191+
192+
const toggleVisible = () => setVisible(!isVisible);
193+
194+
return (
195+
<>
196+
<Button onClick={toggleVisible}>Open</Button>
197+
<Drawer
198+
behindNav={(boolean('behindNav', true))}
199+
defaultExpanded={boolean('defaultExpanded', true)}
200+
expandable={boolean('expandable', false)}
201+
hasBackgroundOverlay={boolean('hasBackgroundOverlay', true)}
202+
orientation={select('orientation', ['left', 'right'], 'right')}
203+
size={select('size', DrawerSizes, 'sm')}
204+
visible={isVisible}
205+
onRequestClose={toggleVisible}
206+
>
207+
<DrawerHeader
208+
bordered={boolean('bordered', true)}
209+
title="Title goes here"
210+
onRequestClose={toggleVisible}
211+
/>
212+
<DrawerBody>
213+
<p>
214+
Proin elementum vitae nibh nec tincidunt. Donec vel placerat mi,
215+
vitae malesuada odio. Sed varius libero sed erat faucibus ultrices.
216+
Suspendisse potenti. Mauris sit amet sollicitudin urna. Donec
217+
porttitor, est quis aliquet condimentum, nisi felis porta odio, eu
218+
luctus dui ex id nisi. Curabitur ultrices enim in dolor laoreet
219+
porta. Proin vehicula at nisl a maximus. Sed lorem enim, elementum in
220+
arcu eu, lacinia consequat arcu. Pellentesque non nibh viverra,
221+
imperdiet purus at, finibus turpis. Sed mattis erat a risus
222+
dignissim, eu ultrices est rhoncus. Fusce nec feugiat tortor. Quisque
223+
tincidunt nulla urna, ut egestas massa congue a. Quisque metus felis,
224+
auctor sit amet posuere eu, aliquam blandit libero. Mauris sodales,
225+
velit sit amet egestas aliquet, ipsum arcu porta lacus, vitae mattis
226+
felis elit in metus. Nulla ligula ligula, laoreet in dictum sit amet,
227+
pretium ac est.
228+
</p>
229+
</DrawerBody>
230+
<DrawerFooter
231+
primaryActionIcon={faEnvelope}
232+
primaryActionText="Send"
233+
secondaryActionText="Cancel"
234+
onPrimaryAction={() => null}
235+
onSecondaryAction={toggleVisible}
236+
/>
237+
</Drawer>
238+
</>
239+
);
240+
};
241+
186242
export const AdditionalActions = () => {
187243
const [isVisible, setVisible] = useState(false);
188244

@@ -193,6 +249,7 @@ export const AdditionalActions = () => {
193249
<Button onClick={toggleVisible}>Open</Button>
194250
<Drawer
195251
behindNav={(boolean('behindNav', true))}
252+
defaultExpanded={boolean('defaultExpanded', false)}
196253
expandable={boolean('expandable', true)}
197254
hasBackgroundOverlay={boolean('hasBackgroundOverlay', false)}
198255
orientation={select('orientation', ['left', 'right'], 'right')}

‎src/FormGroup/FormGroup.mdx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -54,6 +54,10 @@ helpful if they do!
5454

5555
<Canvas of={ComponentStories.WithLeadingIcon} />
5656

57+
### Trailing Text
58+
59+
<Canvas of={ComponentStories.WithTrailingText} />
60+
5761
### Trailing Icon
5862

5963
<Canvas of={ComponentStories.WithTrailingIcon} />

‎src/FormGroup/FormGroup.stories.jsx‎

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -90,6 +90,16 @@ export const WithLeadingIcon = () => (
9090
</FormGroup>
9191
);
9292

93+
export const WithTrailingText = () => (
94+
<FormGroup
95+
id="with-trailing-text"
96+
label="Form Group with trailing text"
97+
labelHtmlFor="trailing-text-input"
98+
>
99+
<InputComponent id="trailing-text-input" name="default" placeholder="Session length" trailingText="min" type="number" />
100+
</FormGroup>
101+
);
102+
93103
export const WithTrailingIcon = () => (
94104
<FormGroup
95105
helperText="with trailing icon"

‎src/Input/Input.jsx‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -16,6 +16,7 @@ const Input = React.forwardRef((props, ref) => {
1616
trailingIconLabel,
1717
trailingIconOnClick,
1818
trailingIconOnClickSubmit,
19+
trailingText,
1920
type,
2021
value,
2122
onChange,
@@ -47,6 +48,11 @@ const Input = React.forwardRef((props, ref) => {
4748
onChange={onChange}
4849
{...rest}
4950
/>
51+
{trailingText && (
52+
<span className={`input-trailing-text ${type === 'number' ? 'input-trailing-text--input-type-number' : ''}`}>
53+
{trailingText}
54+
</span>
55+
)}
5056
{(trailingIcon && trailingIconOnClick) && (
5157
<button
5258
aria-label={trailingIconLabel}
@@ -78,6 +84,7 @@ Input.propTypes = {
7884
trailingIconLabel: PropTypes.string,
7985
trailingIconOnClick: PropTypes.func,
8086
trailingIconOnClickSubmit: PropTypes.bool,
87+
trailingText: PropTypes.string,
8188
type: PropTypes.string,
8289
value: PropTypes.string,
8390
onChange: PropTypes.func,
@@ -91,6 +98,7 @@ Input.defaultProps = {
9198
trailingIconLabel: '',
9299
trailingIconOnClick: undefined,
93100
trailingIconOnClickSubmit: false,
101+
trailingText: undefined,
94102
type: 'text',
95103
value: undefined,
96104
onChange: undefined,

0 commit comments

Comments
 (0)