Skip to content

Commit

Permalink
Merge release/2.5.0 into main branch (#1141)
Browse files Browse the repository at this point in the history
* Converts RichTextEditor to TS, replaces templateVariables prop with customExtensions prop (#1121)

* Convert Button to TS (#1138)
  • Loading branch information
github-actions[bot] authored Feb 2, 2024
1 parent a3b7bb4 commit 701ddcf
Show file tree
Hide file tree
Showing 19 changed files with 558 additions and 576 deletions.
7 changes: 3 additions & 4 deletions package.json
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
{
"name": "@user-interviews/ui-design-system",
"version": "2.4.4",
"version": "2.5.0",
"dependencies": {
"@tiptap/core": "^2.0.3",
"@tiptap/extension-bold": "^2.0.3",
Expand All @@ -19,7 +19,6 @@
"@tiptap/pm": "^2.0.3",
"@tiptap/react": "^2.0.3",
"@tiptap/suggestion": "^2.1.13",
"@types/testing-library__jest-dom": "^6.0.0",
"@typescript-eslint/eslint-plugin": "^2",
"@typescript-eslint/parser": "^2",
"react-bootstrap": "^2.5.0",
Expand All @@ -39,7 +38,7 @@
"build-storybook-docs": "storybook build -s public --docs",
"build-ts": "tsc",
"chromatic": "npx chromatic",
"lint": "eslint . --ext .js,.jsx,.ts,.tsx",
"lint": "tsc --noEmit && eslint . --ext .js,.jsx,.ts,.tsx",
"prepublishOnly": "yarn build",
"rs:link": "bin/link-rs",
"rs:link:watch": "nodemon",
Expand Down Expand Up @@ -113,8 +112,8 @@
"@testing-library/react-hooks": "^3.2.1",
"@testing-library/user-event": "^13.5.0",
"@types/jest": "^29.5.5",
"@types/react": "16.14.0",
"@types/react-dom": "^16.0.0",
"@types/testing-library__jest-dom": "^6.0.0",
"babel-eslint": "^10.0.3",
"babel-jest": "^27.4.6",
"babel-loader": "^8.0.6",
Expand Down
67 changes: 24 additions & 43 deletions spec/__snapshots__/Storyshots.test.js.snap
Original file line number Diff line number Diff line change
Expand Up @@ -9667,6 +9667,30 @@ Array [
/>
</svg>
</button>,
<button
aria-label="Delete"
className="Button IconButton btn btn-transparent btn-lg"
disabled={false}
type="button"
>
<svg
aria-hidden="true"
className="svg-inline--fa fa-trash-can fa-fw"
data-icon="trash-can"
data-prefix="far"
focusable="false"
role="img"
style={Object {}}
viewBox="0 0 448 512"
xmlns="http://www.w3.org/2000/svg"
>
<path
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"
fill="currentColor"
style={Object {}}
/>
</svg>
</button>,
]
`;

Expand Down Expand Up @@ -11650,49 +11674,6 @@ Array [
]
`;

exports[`Storyshots Components/RichTextEditor Template Variables 1`] = `
Array [
<span
aria-busy={true}
aria-live="polite"
>
<span
className="react-loading-skeleton LoadingSkeleton"
style={
Object {
"--base-color": "#E1E1E1",
"borderRadius": "4px",
"height": 40,
"width": "100%",
}
}
>
</span>
<br />
</span>,
<span
aria-busy={true}
aria-live="polite"
>
<span
className="react-loading-skeleton LoadingSkeleton"
style={
Object {
"--base-color": "#E1E1E1",
"borderRadius": "4px",
"height": 70,
"width": "100%",
}
}
>
</span>
<br />
</span>,
]
`;

exports[`Storyshots Components/Selects/Async Default 1`] = `
<div
className="FormGroup"
Expand Down
83 changes: 0 additions & 83 deletions src/Button/Button.jsx

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -513,7 +513,7 @@ export const Loading = () => (
<Button
isLoading={boolean('isLoading', true)}
leadingIcon={faFileAlt}
loadingText={text('loadingText')}
loadingText={text('loadingText', 'Loading...')}
size="sm"
variant="primary"
>
Expand All @@ -523,7 +523,7 @@ export const Loading = () => (
<Button
isLoading={boolean('isLoading', true)}
leadingIcon={faFileAlt}
loadingText={text('loadingText')}
loadingText={text('loadingText', 'Loading...')}
size="sm"
variant="outline-primary"
>
Expand All @@ -533,7 +533,7 @@ export const Loading = () => (
<Button
isLoading={boolean('isLoading', true)}
leadingIcon={faFileAlt}
loadingText={text('loadingText')}
loadingText={text('loadingText', 'Loading...')}
size="md"
variant="primary"
>
Expand All @@ -543,7 +543,7 @@ export const Loading = () => (
<Button
isLoading={boolean('isLoading', true)}
leadingIcon={faFileAlt}
loadingText={text('loadingText')}
loadingText={text('loadingText', 'Loading...')}
size="md"
variant="outline-primary"
>
Expand Down
75 changes: 75 additions & 0 deletions src/Button/Button.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,75 @@
import React, { forwardRef } from 'react';
import classNames from 'classnames';
import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
import { faSpinnerThird } from '@fortawesome/pro-regular-svg-icons';

import {
Button as RBButton,
type ButtonProps as RBButtonProps,
} from 'react-bootstrap';

import './Button.scss';

export enum ButtonSizes {
SMALL = 'sm',
MEDIUM = 'md',
LARGE = 'lg',
}

export enum ButtonVariants {
BRAND_GOOGLE = 'brand-google',
BRAND_FACEBOOK = 'brand-facebook',
BRAND_LINKEDIN = 'brand-linkedin',
BRAND_TWITTER = 'brand-twitter',
DANGER = 'danger',
LINK = 'link',
OUTLINE_DANGER = 'outline-danger',
OUTLINE_PRIMARY = 'outline-primary',
OUTLINE_WARNING = 'outline-warning',
OUTLINE_TRANSPARENT = 'outline-transparent',
PRIMARY = 'primary',
TRANSPARENT = 'transparent',
WARNING = 'warning',
}

export type ButtonProps = RBButtonProps & {
isLoading?: boolean;
leadingIcon?: IconDefinition;
loadingText?: string;
trailingIcon?: IconDefinition;
}

const Button = forwardRef<HTMLElement, ButtonProps>(({
children,
className,
disabled,
isLoading,
leadingIcon,
loadingText = 'Loading...',
trailingIcon,
...props
}, ref) => (
<RBButton
aria-disabled={disabled || isLoading}
className={classNames('Button', className)}
disabled={disabled || isLoading}
ref={ref}
{...props}
>
{ !isLoading ? (
<>
{ leadingIcon && (<FontAwesomeIcon className="icon-left" icon={leadingIcon} />)}
{ children }
{ trailingIcon && (<FontAwesomeIcon className="icon-right" icon={trailingIcon} />)}
</>
) : (
<>
<FontAwesomeIcon className="icon-left btn-loading-spin" icon={faSpinnerThird as IconDefinition} />
{loadingText}
</>
)}
</RBButton>
));

export default Button;
1 change: 1 addition & 0 deletions src/IconButton/IconButton.stories.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -41,5 +41,6 @@ export const Sizes = () => (
<>
<IconButton action="DELETE" size="sm" />
<IconButton action="DELETE" size="md" />
<IconButton action="DELETE" size="lg" />
</>
);
9 changes: 0 additions & 9 deletions src/RichTextEditor/RichTextEditor.stories.jsx
Original file line number Diff line number Diff line change
Expand Up @@ -53,15 +53,6 @@ export const OneLine = () => (
/>
);

export const TemplateVariables = () => (
<RichTextEditor
id="text-editor"
placeholder="Enter / to view available variables"
templateVariables={['howdy', 'ho']}
onChange={() => null}
/>
);

export const Error = () => (
<RichTextEditor
hasErrors
Expand Down
28 changes: 28 additions & 0 deletions src/RichTextEditor/RichTextEditor.test.tsx
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
import { render, screen } from '@testing-library/react';
import React from 'react';

import RichTextEditor, { type RichTextEditorProps } from './RichTextEditor';

describe('<RichTextEditor />', () => {
const Setup = (overrides: Omit<RichTextEditorProps, 'id' | 'onChange'> = {}) => (
<RichTextEditor
id="some-id"
onChange={jest.fn()}
{...overrides}
/>
);

it('renders snapshot', () => {
const { asFragment } = render(<Setup />);

expect(asFragment()).toMatchSnapshot();
});

describe('given an initial value', () => {
it('deserializes value correctly', () => {
render(<Setup initialValue="<p>hello world</p>" />);

expect(screen.getByText('hello world')).toBeInTheDocument();
});
});
});
Loading

0 comments on commit 701ddcf

Please sign in to comment.