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)

Author: github-actions[bot]

package.json

@@ -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",
@@ -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",
@@ -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",
@@ -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",

spec/__snapshots__/Storyshots.test.js.snap

@@ -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>,
 ]
 `;
 
@@ -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"

src/Button/Button.jsx

@@ -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"
     >
@@ -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"
     >
@@ -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"
     >
@@ -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"
     >

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

@@ -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;

src/Button/Button.tsx

@@ -41,5 +41,6 @@ export const Sizes = () => (
   <>
     <IconButton action="DELETE" size="sm" />
     <IconButton action="DELETE" size="md" />
+    <IconButton action="DELETE" size="lg" />
   </>
 );

src/IconButton/IconButton.stories.jsx

@@ -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

src/RichTextEditor/RichTextEditor.stories.jsx

@@ -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();
+    });
+  });
+});