Skip to content

Commit 098514c

Browse files
github-actions[bot]github-actions[bot]
authored
Merge release/2.4.0 into main branch (#1098)
* Bump @adobe/css-tools from 4.3.1 to 4.3.2 (#1085) * remove box shadow from MoneyInput, add step and prefix props (#1094) * update DropdownItem hover state, remove danger variant (#1091) * give default sizes to levels, make weight optional, add notes to props (#1096)
1 parent a211ea3 commit 098514c

File tree

12 files changed

+342
-70
lines changed

12 files changed

+342
-70
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": "2.3.1",
3+
"version": "2.4.0",
44
"dependencies": {
55
"@tiptap/core": "^2.0.3",
66
"@tiptap/extension-bold": "^2.0.3",

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

Lines changed: 163 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -9054,16 +9054,16 @@ Array [
90549054
`;
90559055

90569056
exports[`Storyshots Components/Heading Default 1`] = `
9057-
<h2
9058-
className="Heading Heading--xxl Heading--bold"
9057+
<h1
9058+
className="Heading Heading--xxxl Heading--bold"
90599059
style={
90609060
Object {
90619061
"textAlign": undefined,
90629062
}
90639063
}
90649064
>
90659065
The fastest way to recruit research participants
9066-
</h2>
9066+
</h1>
90679067
`;
90689068

90699069
exports[`Storyshots Components/Heading Levels 1`] = `
@@ -9128,16 +9128,81 @@ Array [
91289128
>
91299129
The fastest way to recruit research participants
91309130
</h6>,
9131-
<h6
9131+
]
9132+
`;
9133+
9134+
exports[`Storyshots Components/Heading Sizes 1`] = `
9135+
Array [
9136+
<h2
9137+
className="Heading Heading--xxxl Heading--bold"
9138+
style={
9139+
Object {
9140+
"textAlign": undefined,
9141+
}
9142+
}
9143+
>
9144+
This is a heading level 2 with size="xxxl"
9145+
</h2>,
9146+
<h2
9147+
className="Heading Heading--xxl Heading--bold"
9148+
style={
9149+
Object {
9150+
"textAlign": undefined,
9151+
}
9152+
}
9153+
>
9154+
This is a heading level 2 with size="xxl"
9155+
</h2>,
9156+
<h2
9157+
className="Heading Heading--xl Heading--bold"
9158+
style={
9159+
Object {
9160+
"textAlign": undefined,
9161+
}
9162+
}
9163+
>
9164+
This is a heading level 2 with size="xl"
9165+
</h2>,
9166+
<h2
9167+
className="Heading Heading--lg Heading--bold"
9168+
style={
9169+
Object {
9170+
"textAlign": undefined,
9171+
}
9172+
}
9173+
>
9174+
This is a heading level 2 with size="lg"
9175+
</h2>,
9176+
<h2
9177+
className="Heading Heading--md Heading--bold"
9178+
style={
9179+
Object {
9180+
"textAlign": undefined,
9181+
}
9182+
}
9183+
>
9184+
This is a heading level 2 with size="md"
9185+
</h2>,
9186+
<h2
9187+
className="Heading Heading--sm Heading--bold"
9188+
style={
9189+
Object {
9190+
"textAlign": undefined,
9191+
}
9192+
}
9193+
>
9194+
This is a heading level 2 with size="sm"
9195+
</h2>,
9196+
<h2
91329197
className="Heading Heading--xs Heading--bold"
91339198
style={
91349199
Object {
91359200
"textAlign": undefined,
91369201
}
91379202
}
91389203
>
9139-
The fastest way to recruit research participants
9140-
</h6>,
9204+
This is a heading level 2 with size="xs"
9205+
</h2>,
91419206
]
91429207
`;
91439208

@@ -10425,11 +10490,11 @@ exports[`Storyshots Components/MoneyInput Default 1`] = `
1042510490
onKeyUp={[Function]}
1042610491
placeholder="Please enter a number"
1042710492
type="text"
10428-
value="$1,250.99"
10493+
value="$ 1,250.99"
1042910494
/>
1043010495
<br />
10431-
<h2
10432-
className="Heading Heading--xxl Heading--bold"
10496+
<h1
10497+
className="Heading Heading--xxxl Heading--bold"
1043310498
style={
1043410499
Object {
1043510500
"textAlign": undefined,
@@ -10438,7 +10503,95 @@ exports[`Storyshots Components/MoneyInput Default 1`] = `
1043810503
>
1043910504
Value:
1044010505
1250.99
10441-
</h2>
10506+
</h1>
10507+
</div>
10508+
`;
10509+
10510+
exports[`Storyshots Components/MoneyInput Prefix 1`] = `
10511+
<div
10512+
className="FormGroup"
10513+
>
10514+
<label
10515+
className="InputLabel"
10516+
htmlFor="money-input-3"
10517+
>
10518+
Incentive amount
10519+
</label>
10520+
<div
10521+
className="FormGroup__helper-text"
10522+
>
10523+
Change the prefix
10524+
</div>
10525+
<input
10526+
className="MoneyInput form-control"
10527+
disabled={false}
10528+
id="money-input-3"
10529+
inputMode="decimal"
10530+
onBlur={[Function]}
10531+
onChange={[Function]}
10532+
onFocus={[Function]}
10533+
onKeyDown={[Function]}
10534+
onKeyUp={[Function]}
10535+
placeholder="Please enter a number"
10536+
type="text"
10537+
value="USD$ 500"
10538+
/>
10539+
<br />
10540+
<h1
10541+
className="Heading Heading--xxxl Heading--bold"
10542+
style={
10543+
Object {
10544+
"textAlign": undefined,
10545+
}
10546+
}
10547+
>
10548+
Value:
10549+
500
10550+
</h1>
10551+
</div>
10552+
`;
10553+
10554+
exports[`Storyshots Components/MoneyInput Step 1`] = `
10555+
<div
10556+
className="FormGroup"
10557+
>
10558+
<label
10559+
className="InputLabel"
10560+
htmlFor="money-input-2"
10561+
>
10562+
Incentive amount
10563+
</label>
10564+
<div
10565+
className="FormGroup__helper-text"
10566+
>
10567+
Use the Up Arrow (↑) or Down Arrow (↓) to adjust the incremental value change
10568+
</div>
10569+
<input
10570+
className="MoneyInput form-control"
10571+
disabled={false}
10572+
id="money-input-2"
10573+
inputMode="decimal"
10574+
onBlur={[Function]}
10575+
onChange={[Function]}
10576+
onFocus={[Function]}
10577+
onKeyDown={[Function]}
10578+
onKeyUp={[Function]}
10579+
placeholder="Please enter a number"
10580+
type="text"
10581+
value="$ 200"
10582+
/>
10583+
<br />
10584+
<h1
10585+
className="Heading Heading--xxxl Heading--bold"
10586+
style={
10587+
Object {
10588+
"textAlign": undefined,
10589+
}
10590+
}
10591+
>
10592+
Value:
10593+
200
10594+
</h1>
1044210595
</div>
1044310596
`;
1044410597

‎src/Dropdown/DropdownItem.jsx‎

Lines changed: 3 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
66

77
import { Dropdown as RBDropdown } from 'react-bootstrap';
88

9-
import './DropdownItem.scss';
10-
11-
const DropdownItemVariants = {
12-
DANGER: 'danger',
13-
};
9+
import styles from './DropdownItem.module.scss';
1410

1511
const DropdownItem = ({
1612
active,
@@ -22,7 +18,6 @@ const DropdownItem = ({
2218
href,
2319
leadingIcon,
2420
onClick,
25-
variant,
2621
bsPrefix,
2722
...props
2823
}) => (
@@ -33,15 +28,15 @@ const DropdownItem = ({
3328
className={classNames(
3429
className,
3530
'DropdownItem',
36-
variant && `DropdownItem--${variant}`,
31+
styles.DropdownItem,
3732
)}
3833
disabled={disabled}
3934
eventKey={eventKey}
4035
href={href}
4136
onClick={onClick}
4237
{...props}
4338
>
44-
{ leadingIcon && <FontAwesomeIcon className="icon-left fa-fw" icon={leadingIcon} /> }
39+
{ leadingIcon && <FontAwesomeIcon className={classNames(styles.DropdownItemIcon, 'icon-left', 'fa-fw')} icon={leadingIcon} /> }
4540
{ children }
4641
</RBDropdown.Item>
4742
);
@@ -74,10 +69,6 @@ DropdownItem.propTypes = {
7469
*/
7570
href: PropTypes.string,
7671
leadingIcon: PropTypes.object,
77-
/**
78-
Optional variant for controlling color and hover states (e.g. destructive actions)
79-
*/
80-
variant: PropTypes.oneOf(Object.values(DropdownItemVariants)),
8172
/**
8273
Callback fired when the menu item is clicked.
8374
*/
@@ -93,7 +84,6 @@ DropdownItem.defaultProps = {
9384
eventKey: undefined,
9485
href: undefined,
9586
leadingIcon: undefined,
96-
variant: undefined,
9787
onClick: undefined,
9888
};
9989

‎src/Dropdown/DropdownItem.module.scss‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
@import '../../scss/theme';
2+
3+
.DropdownItem {
4+
@include synth-font-type-30;
5+
color: $ux-gray-900;
6+
7+
&:hover {
8+
background-color: $synth-hover-state;
9+
text-decoration: none;
10+
}
11+
12+
&:focus {
13+
background-color: $synth-selected-state-green;
14+
color: $ux-gray-900;
15+
}
16+
}
17+
18+
.DropdownItemIcon {
19+
margin-right: $ux-spacing-20;
20+
}

‎src/Dropdown/DropdownItem.scss‎

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

‎src/Heading/Heading.stories.tsx‎

Lines changed: 25 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ type Story = StoryObj<typeof Heading>;
2424
export const Default: Story = {
2525
args: {
2626
children: 'The fastest way to recruit research participants',
27+
level: 1,
2728
},
2829
};
2930

@@ -61,13 +62,30 @@ export const Default: Story = {
6162
export const Levels: Story = {
6263
render: () => (
6364
<>
64-
<Heading level={1} size="xxxl" weight="bold">The fastest way to recruit research participants</Heading>
65-
<Heading level={2} size="xxl" weight="bold">The fastest way to recruit research participants</Heading>
66-
<Heading level={3} size="xl" weight="bold">The fastest way to recruit research participants</Heading>
67-
<Heading level={4} size="lg" weight="bold">The fastest way to recruit research participants</Heading>
68-
<Heading level={5} size="md" weight="bold">The fastest way to recruit research participants</Heading>
69-
<Heading level={6} size="sm" weight="bold">The fastest way to recruit research participants</Heading>
70-
<Heading level={6} size="xs" weight="bold">The fastest way to recruit research participants</Heading>
65+
<Heading level={1} size="xxxl">The fastest way to recruit research participants</Heading>
66+
<Heading level={2} size="xxl">The fastest way to recruit research participants</Heading>
67+
<Heading level={3} size="xl">The fastest way to recruit research participants</Heading>
68+
<Heading level={4} size="lg">The fastest way to recruit research participants</Heading>
69+
<Heading level={5} size="md">The fastest way to recruit research participants</Heading>
70+
<Heading level={6} size="sm">The fastest way to recruit research participants</Heading>
71+
</>
72+
),
73+
};
74+
75+
/**
76+
Headings come with default sizes based on their level, but you are able to
77+
adjust its size based on visual hierarchy needs.
78+
*/
79+
export const Sizes: Story = {
80+
render: () => (
81+
<>
82+
<Heading level={2} size="xxxl">This is a heading level 2 with size="xxxl"</Heading>
83+
<Heading level={2} size="xxl">This is a heading level 2 with size="xxl"</Heading>
84+
<Heading level={2} size="xl">This is a heading level 2 with size="xl"</Heading>
85+
<Heading level={2} size="lg">This is a heading level 2 with size="lg"</Heading>
86+
<Heading level={2} size="md">This is a heading level 2 with size="md"</Heading>
87+
<Heading level={2} size="sm">This is a heading level 2 with size="sm"</Heading>
88+
<Heading level={2} size="xs">This is a heading level 2 with size="xs"</Heading>
7189
</>
7290
),
7391
};

0 commit comments

Comments
 (0)