Skip to content

Commit 701ddcf

Browse files
github-actions[bot]github-actions[bot]
authored
Merge release/2.5.0 into main branch (#1141)
* Converts RichTextEditor to TS, replaces templateVariables prop with customExtensions prop (#1121) * Convert Button to TS (#1138)
1 parent a3b7bb4 commit 701ddcf

19 files changed

+558
-576
lines changed

‎package.json‎

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@user-interviews/ui-design-system",
3-
"version": "2.4.4",
3+
"version": "2.5.0",
44
"dependencies": {
55
"@tiptap/core": "^2.0.3",
66
"@tiptap/extension-bold": "^2.0.3",
@@ -19,7 +19,6 @@
1919
"@tiptap/pm": "^2.0.3",
2020
"@tiptap/react": "^2.0.3",
2121
"@tiptap/suggestion": "^2.1.13",
22-
"@types/testing-library__jest-dom": "^6.0.0",
2322
"@typescript-eslint/eslint-plugin": "^2",
2423
"@typescript-eslint/parser": "^2",
2524
"react-bootstrap": "^2.5.0",
@@ -39,7 +38,7 @@
3938
"build-storybook-docs": "storybook build -s public --docs",
4039
"build-ts": "tsc",
4140
"chromatic": "npx chromatic",
42-
"lint": "eslint . --ext .js,.jsx,.ts,.tsx",
41+
"lint": "tsc --noEmit && eslint . --ext .js,.jsx,.ts,.tsx",
4342
"prepublishOnly": "yarn build",
4443
"rs:link": "bin/link-rs",
4544
"rs:link:watch": "nodemon",
@@ -113,8 +112,8 @@
113112
"@testing-library/react-hooks": "^3.2.1",
114113
"@testing-library/user-event": "^13.5.0",
115114
"@types/jest": "^29.5.5",
116-
"@types/react": "16.14.0",
117115
"@types/react-dom": "^16.0.0",
116+
"@types/testing-library__jest-dom": "^6.0.0",
118117
"babel-eslint": "^10.0.3",
119118
"babel-jest": "^27.4.6",
120119
"babel-loader": "^8.0.6",

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

Lines changed: 24 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -9667,6 +9667,30 @@ Array [
96679667
/>
96689668
</svg>
96699669
</button>,
9670+
<button
9671+
aria-label="Delete"
9672+
className="Button IconButton btn btn-transparent btn-lg"
9673+
disabled={false}
9674+
type="button"
9675+
>
9676+
<svg
9677+
aria-hidden="true"
9678+
className="svg-inline--fa fa-trash-can fa-fw"
9679+
data-icon="trash-can"
9680+
data-prefix="far"
9681+
focusable="false"
9682+
role="img"
9683+
style={Object {}}
9684+
viewBox="0 0 448 512"
9685+
xmlns="http://www.w3.org/2000/svg"
9686+
>
9687+
<path
9688+
d="M170.5 51.6L151.5 80h145l-19-28.4c-1.5-2.2-4-3.6-6.7-3.6H177.1c-2.7 0-5.2 1.3-6.7 3.6zm147-26.6L354.2 80H368h48 8c13.3 0 24 10.7 24 24s-10.7 24-24 24h-8V432c0 44.2-35.8 80-80 80H112c-44.2 0-80-35.8-80-80V128H24c-13.3 0-24-10.7-24-24S10.7 80 24 80h8H80 93.8l36.7-55.1C140.9 9.4 158.4 0 177.1 0h93.7c18.7 0 36.2 9.4 46.6 24.9zM80 128V432c0 17.7 14.3 32 32 32H336c17.7 0 32-14.3 32-32V128H80zm80 64V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16zm80 0V400c0 8.8-7.2 16-16 16s-16-7.2-16-16V192c0-8.8 7.2-16 16-16s16 7.2 16 16z"
9689+
fill="currentColor"
9690+
style={Object {}}
9691+
/>
9692+
</svg>
9693+
</button>,
96709694
]
96719695
`;
96729696

@@ -11650,49 +11674,6 @@ Array [
1165011674
]
1165111675
`;
1165211676

11653-
exports[`Storyshots Components/RichTextEditor Template Variables 1`] = `
11654-
Array [
11655-
<span
11656-
aria-busy={true}
11657-
aria-live="polite"
11658-
>
11659-
<span
11660-
className="react-loading-skeleton LoadingSkeleton"
11661-
style={
11662-
Object {
11663-
"--base-color": "#E1E1E1",
11664-
"borderRadius": "4px",
11665-
"height": 40,
11666-
"width": "100%",
11667-
}
11668-
}
11669-
>
11670-
‌
11671-
</span>
11672-
<br />
11673-
</span>,
11674-
<span
11675-
aria-busy={true}
11676-
aria-live="polite"
11677-
>
11678-
<span
11679-
className="react-loading-skeleton LoadingSkeleton"
11680-
style={
11681-
Object {
11682-
"--base-color": "#E1E1E1",
11683-
"borderRadius": "4px",
11684-
"height": 70,
11685-
"width": "100%",
11686-
}
11687-
}
11688-
>
11689-
‌
11690-
</span>
11691-
<br />
11692-
</span>,
11693-
]
11694-
`;
11695-
1169611677
exports[`Storyshots Components/Selects/Async Default 1`] = `
1169711678
<div
1169811679
className="FormGroup"

‎src/Button/Button.jsx‎

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

‎src/Button/Button.stories.jsx‎ renamed to ‎src/Button/Button.stories.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -513,7 +513,7 @@ export const Loading = () => (
513513
<Button
514514
isLoading={boolean('isLoading', true)}
515515
leadingIcon={faFileAlt}
516-
loadingText={text('loadingText')}
516+
loadingText={text('loadingText', 'Loading...')}
517517
size="sm"
518518
variant="primary"
519519
>
@@ -523,7 +523,7 @@ export const Loading = () => (
523523
<Button
524524
isLoading={boolean('isLoading', true)}
525525
leadingIcon={faFileAlt}
526-
loadingText={text('loadingText')}
526+
loadingText={text('loadingText', 'Loading...')}
527527
size="sm"
528528
variant="outline-primary"
529529
>
@@ -533,7 +533,7 @@ export const Loading = () => (
533533
<Button
534534
isLoading={boolean('isLoading', true)}
535535
leadingIcon={faFileAlt}
536-
loadingText={text('loadingText')}
536+
loadingText={text('loadingText', 'Loading...')}
537537
size="md"
538538
variant="primary"
539539
>
@@ -543,7 +543,7 @@ export const Loading = () => (
543543
<Button
544544
isLoading={boolean('isLoading', true)}
545545
leadingIcon={faFileAlt}
546-
loadingText={text('loadingText')}
546+
loadingText={text('loadingText', 'Loading...')}
547547
size="md"
548548
variant="outline-primary"
549549
>

‎src/Button/Button.tsx‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
import React, { forwardRef } from 'react';
2+
import classNames from 'classnames';
3+
import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
4+
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
5+
import { faSpinnerThird } from '@fortawesome/pro-regular-svg-icons';
6+
7+
import {
8+
Button as RBButton,
9+
type ButtonProps as RBButtonProps,
10+
} from 'react-bootstrap';
11+
12+
import './Button.scss';
13+
14+
export enum ButtonSizes {
15+
SMALL = 'sm',
16+
MEDIUM = 'md',
17+
LARGE = 'lg',
18+
}
19+
20+
export enum ButtonVariants {
21+
BRAND_GOOGLE = 'brand-google',
22+
BRAND_FACEBOOK = 'brand-facebook',
23+
BRAND_LINKEDIN = 'brand-linkedin',
24+
BRAND_TWITTER = 'brand-twitter',
25+
DANGER = 'danger',
26+
LINK = 'link',
27+
OUTLINE_DANGER = 'outline-danger',
28+
OUTLINE_PRIMARY = 'outline-primary',
29+
OUTLINE_WARNING = 'outline-warning',
30+
OUTLINE_TRANSPARENT = 'outline-transparent',
31+
PRIMARY = 'primary',
32+
TRANSPARENT = 'transparent',
33+
WARNING = 'warning',
34+
}
35+
36+
export type ButtonProps = RBButtonProps & {
37+
isLoading?: boolean;
38+
leadingIcon?: IconDefinition;
39+
loadingText?: string;
40+
trailingIcon?: IconDefinition;
41+
}
42+
43+
const Button = forwardRef<HTMLElement, ButtonProps>(({
44+
children,
45+
className,
46+
disabled,
47+
isLoading,
48+
leadingIcon,
49+
loadingText = 'Loading...',
50+
trailingIcon,
51+
...props
52+
}, ref) => (
53+
<RBButton
54+
aria-disabled={disabled || isLoading}
55+
className={classNames('Button', className)}
56+
disabled={disabled || isLoading}
57+
ref={ref}
58+
{...props}
59+
>
60+
{ !isLoading ? (
61+
<>
62+
{ leadingIcon && (<FontAwesomeIcon className="icon-left" icon={leadingIcon} />)}
63+
{ children }
64+
{ trailingIcon && (<FontAwesomeIcon className="icon-right" icon={trailingIcon} />)}
65+
</>
66+
) : (
67+
<>
68+
<FontAwesomeIcon className="icon-left btn-loading-spin" icon={faSpinnerThird as IconDefinition} />
69+
{loadingText}
70+
</>
71+
)}
72+
</RBButton>
73+
));
74+
75+
export default Button;

‎src/IconButton/IconButton.stories.jsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -41,5 +41,6 @@ export const Sizes = () => (
4141
<>
4242
<IconButton action="DELETE" size="sm" />
4343
<IconButton action="DELETE" size="md" />
44+
<IconButton action="DELETE" size="lg" />
4445
</>
4546
);

‎src/RichTextEditor/RichTextEditor.stories.jsx‎

Lines changed: 0 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -53,15 +53,6 @@ export const OneLine = () => (
5353
/>
5454
);
5555

56-
export const TemplateVariables = () => (
57-
<RichTextEditor
58-
id="text-editor"
59-
placeholder="Enter / to view available variables"
60-
templateVariables={['howdy', 'ho']}
61-
onChange={() => null}
62-
/>
63-
);
64-
6556
export const Error = () => (
6657
<RichTextEditor
6758
hasErrors

‎src/RichTextEditor/RichTextEditor.test.tsx‎

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,28 @@
1+
import { render, screen } from '@testing-library/react';
2+
import React from 'react';
3+
4+
import RichTextEditor, { type RichTextEditorProps } from './RichTextEditor';
5+
6+
describe('<RichTextEditor />', () => {
7+
const Setup = (overrides: Omit<RichTextEditorProps, 'id' | 'onChange'> = {}) => (
8+
<RichTextEditor
9+
id="some-id"
10+
onChange={jest.fn()}
11+
{...overrides}
12+
/>
13+
);
14+
15+
it('renders snapshot', () => {
16+
const { asFragment } = render(<Setup />);
17+
18+
expect(asFragment()).toMatchSnapshot();
19+
});
20+
21+
describe('given an initial value', () => {
22+
it('deserializes value correctly', () => {
23+
render(<Setup initialValue="<p>hello world</p>" />);
24+
25+
expect(screen.getByText('hello world')).toBeInTheDocument();
26+
});
27+
});
28+
});

0 commit comments

Comments
 (0)