From d42c2d14866e9075eafc088030c77e378469ff11 Mon Sep 17 00:00:00 2001 From: Tal Koren Date: Mon, 6 May 2024 16:44:22 +0300 Subject: [PATCH 1/8] test: add jest-axe --- packages/core/package.json | 2 ++ packages/core/setupTests.ts | 3 ++ yarn.lock | 62 ++++++++++++++++++++++++++++++------- 3 files changed, 55 insertions(+), 12 deletions(-) diff --git a/packages/core/package.json b/packages/core/package.json index 9598d2f91d..a7c01d1723 100644 --- a/packages/core/package.json +++ b/packages/core/package.json @@ -173,6 +173,7 @@ "@types/autosize": "^4.0.1", "@types/babel__standalone": "^7.1.7", "@types/body-scroll-lock": "^3.1.0", + "@types/jest-axe": "^3.5.9", "@types/lodash": "^4.14.184", "@types/lodash-es": "^4.17.6", "@types/react": "^18.0.25", @@ -221,6 +222,7 @@ "execa": "^5.1.1", "identity-obj-proxy": "^3.0.0", "jest": "^29.7.0", + "jest-axe": "^8.0.0", "jest-environment-jsdom": "^29.7.0", "js-sha256": "^0.9.0", "json-loader": "^0.5.7", diff --git a/packages/core/setupTests.ts b/packages/core/setupTests.ts index d0de870dc5..6e02024482 100644 --- a/packages/core/setupTests.ts +++ b/packages/core/setupTests.ts @@ -1 +1,4 @@ +import { toHaveNoViolations } from "jest-axe"; import "@testing-library/jest-dom"; + +expect.extend(toHaveNoViolations); diff --git a/yarn.lock b/yarn.lock index 45cf54a5a0..82d55dc67d 100644 --- a/yarn.lock +++ b/yarn.lock @@ -4744,6 +4744,14 @@ dependencies: "@types/istanbul-lib-report" "*" +"@types/jest-axe@^3.5.9": + version "3.5.9" + resolved "https://registry.npmjs.org/@types/jest-axe/-/jest-axe-3.5.9.tgz#97b1317371a48707ca93825d4c990b0d07690d99" + integrity sha512-z98CzR0yVDalCEuhGXXO4/zN4HHuSebAukXDjTLJyjEAgoUf1H1i+sr7SUB/mz8CRS/03/XChsx0dcLjHkndoQ== + dependencies: + "@types/jest" "*" + axe-core "^3.5.5" + "@types/jest@*": version "29.5.12" resolved "https://registry.npmjs.org/@types/jest/-/jest-29.5.12.tgz#7f7dc6eb4cf246d2474ed78744b05d06ce025544" @@ -6199,11 +6207,21 @@ available-typed-arrays@^1.0.7: dependencies: possible-typed-array-names "^1.0.0" +axe-core@4.7.2: + version "4.7.2" + resolved "https://registry.npmjs.org/axe-core/-/axe-core-4.7.2.tgz#040a7342b20765cb18bb50b628394c21bccc17a0" + integrity sha512-zIURGIS1E1Q4pcrMjp+nnEh+16G56eG/MUllJH8yEvw7asDo7Ac9uhC9KIH5jzpITueEZolfYglnCGIuSBz39g== + axe-core@=4.7.0: version "4.7.0" resolved "https://registry.npmjs.org/axe-core/-/axe-core-4.7.0.tgz#34ba5a48a8b564f67e103f0aa5768d76e15bbbbf" integrity sha512-M0JtH+hlOL5pLQwHOLNYZaXuhqmvS8oExsqB1SBYgA4Dk7u/xx+YdGHXaK5pyUfed5mYXdlYiphWq3G8cRi5JQ== +axe-core@^3.5.5: + version "3.5.6" + resolved "https://registry.npmjs.org/axe-core/-/axe-core-3.5.6.tgz#e762a90d7f6dbd244ceacb4e72760ff8aad521b5" + integrity sha512-LEUDjgmdJoA3LqklSTwKYqkjcZ4HKc4ddIYGSAiSkr46NTjzg2L9RNB+lekO9P7Dlpa87+hBtzc2Fzn/+GUWMQ== + axe-core@^4.2.0: version "4.8.4" resolved "https://registry.npmjs.org/axe-core/-/axe-core-4.8.4.tgz#90db39a2b316f963f00196434d964e6e23648643" @@ -7079,6 +7097,14 @@ chalk@4.1.0: ansi-styles "^4.1.0" supports-color "^7.1.0" +chalk@4.1.2, chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.0, chalk@^4.1.1, chalk@^4.1.2: + version "4.1.2" + resolved "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01" + integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA== + dependencies: + ansi-styles "^4.1.0" + supports-color "^7.1.0" + chalk@^1.1.3: version "1.1.3" resolved "https://registry.npmjs.org/chalk/-/chalk-1.1.3.tgz#a8115c55e4a702fe4d150abd3872822a7e09fc98" @@ -7107,14 +7133,6 @@ chalk@^3.0.0: ansi-styles "^4.1.0" supports-color "^7.1.0" -chalk@^4.0.0, chalk@^4.0.2, chalk@^4.1.0, chalk@^4.1.1, chalk@^4.1.2: - version "4.1.2" - resolved "https://registry.npmjs.org/chalk/-/chalk-4.1.2.tgz#aac4e2b7734a740867aeb16bf02aad556a1e7a01" - integrity sha512-oKnbhFyRIXpUuez8iBMmyEa4nbj4IOQyuhc/wy9kY7/WVPcwIO9VA668Pu8RkO7+0G76SLROeyw9CpQ061i4mA== - dependencies: - ansi-styles "^4.1.0" - supports-color "^7.1.0" - chalk@^5.3.0: version "5.3.0" resolved "https://registry.npmjs.org/chalk/-/chalk-5.3.0.tgz#67c20a7ebef70e7f3970a01f90fa210cb6860385" @@ -11852,6 +11870,16 @@ jake@^10.8.5: filelist "^1.0.4" minimatch "^3.1.2" +jest-axe@^8.0.0: + version "8.0.0" + resolved "https://registry.npmjs.org/jest-axe/-/jest-axe-8.0.0.tgz#4d89a1756bda2999a4271e851370981319389155" + integrity sha512-4kNcNn7J0jPO4jANEYZOHeQ/tSBvkXS+MxTbX1CKbXGd0+ZbRGDn/v/8IYWI/MmYX15iLVyYRnRev9X3ksePWA== + dependencies: + axe-core "4.7.2" + chalk "4.1.2" + jest-matcher-utils "29.2.2" + lodash.merge "4.6.2" + jest-changed-files@^27.5.1: version "27.5.1" resolved "https://registry.npmjs.org/jest-changed-files/-/jest-changed-files-27.5.1.tgz#a348aed00ec9bf671cc58a66fcbe7c3dfd6a68f5" @@ -12014,7 +12042,7 @@ jest-config@^29.7.0: slash "^3.0.0" strip-json-comments "^3.1.1" -"jest-diff@>=29.4.3 < 30", jest-diff@^29.4.1, jest-diff@^29.7.0: +"jest-diff@>=29.4.3 < 30", jest-diff@^29.2.1, jest-diff@^29.4.1, jest-diff@^29.7.0: version "29.7.0" resolved "https://registry.npmjs.org/jest-diff/-/jest-diff-29.7.0.tgz#017934a66ebb7ecf6f205e84699be10afd70458a" integrity sha512-LMIgiIrhigmPrs03JHpxUh2yISK3vLFPkAodPeo0+BuF7wA2FoQbkEg1u8gBYBThncu7e1oEDUfIXVuTqLRUjw== @@ -12141,7 +12169,7 @@ jest-get-type@^28.0.2: resolved "https://registry.npmjs.org/jest-get-type/-/jest-get-type-28.0.2.tgz#34622e628e4fdcd793d46db8a242227901fcf203" integrity sha512-ioj2w9/DxSYHfOm5lJKCdcAmPJzQXmbM/Url3rhlghrPvT3tt+7a/+oXc9azkKmLvoiXjtV83bEWqi+vs5nlPA== -jest-get-type@^29.6.3: +jest-get-type@^29.2.0, jest-get-type@^29.6.3: version "29.6.3" resolved "https://registry.npmjs.org/jest-get-type/-/jest-get-type-29.6.3.tgz#36f499fdcea197c1045a127319c0481723908fd1" integrity sha512-zrteXnqYxfQh7l5FHyL38jL39di8H8rHoecLH3JNxH3BwOrBsNeabdap5e0I23lD4HHI8W5VFBZqG4Eaq5LNcw== @@ -12245,6 +12273,16 @@ jest-leak-detector@^29.7.0: jest-get-type "^29.6.3" pretty-format "^29.7.0" +jest-matcher-utils@29.2.2: + version "29.2.2" + resolved "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-29.2.2.tgz#9202f8e8d3a54733266784ce7763e9a08688269c" + integrity sha512-4DkJ1sDPT+UX2MR7Y3od6KtvRi9Im1ZGLGgdLFLm4lPexbTaCgJW5NN3IOXlQHF7NSHY/VHhflQ+WoKtD/vyCw== + dependencies: + chalk "^4.0.0" + jest-diff "^29.2.1" + jest-get-type "^29.2.0" + pretty-format "^29.2.1" + jest-matcher-utils@^27.0.0, jest-matcher-utils@^27.5.1: version "27.5.1" resolved "https://registry.npmjs.org/jest-matcher-utils/-/jest-matcher-utils-27.5.1.tgz#9c0cdbda8245bc22d2331729d1091308b40cf8ab" @@ -13341,7 +13379,7 @@ lodash.memoize@4.x, lodash.memoize@^4.1.2: resolved "https://registry.npmjs.org/lodash.memoize/-/lodash.memoize-4.1.2.tgz#bcc6c49a42a2840ed997f323eada5ecd182e0bfe" integrity sha512-t7j+NzmgnQzTAYXcsHYLgimltOV1MXHtlOWf6GjL9Kj8GK5FInw5JotxvbOs+IvV1/Dzo04/fCGfLVs7aXb4Ag== -lodash.merge@^4.4.0, lodash.merge@^4.6.2: +lodash.merge@4.6.2, lodash.merge@^4.4.0, lodash.merge@^4.6.2: version "4.6.2" resolved "https://registry.npmjs.org/lodash.merge/-/lodash.merge-4.6.2.tgz#558aa53b43b661e1925a0afdfa36a9a1085fe57a" integrity sha512-0KpjqXRVvrYyCsX1swR/XTK0va6VQkQM6MNo7PqW77ByjAhoARA8EfrP1N4+KlKj8YS0ZUCtRT/YUuhyYDujIQ== @@ -16159,7 +16197,7 @@ pretty-format@^28.0.0, pretty-format@^28.1.3: ansi-styles "^5.0.0" react-is "^18.0.0" -pretty-format@^29.0.0, pretty-format@^29.7.0: +pretty-format@^29.0.0, pretty-format@^29.2.1, pretty-format@^29.7.0: version "29.7.0" resolved "https://registry.npmjs.org/pretty-format/-/pretty-format-29.7.0.tgz#ca42c758310f365bfa71a0bda0a807160b776812" integrity sha512-Pdlw/oPxN+aXdmM9R00JVC9WVFoCLTKJvDVLgmJ+qAffBMxsV85l/Lu7sNx4zSzPyoL2euImuEwHhOXdEgNFZQ== From 5d02f6a82cb53b81c5458178531ff9093d66f438 Mon Sep 17 00:00:00 2001 From: Tal Koren Date: Mon, 6 May 2024 16:46:14 +0300 Subject: [PATCH 2/8] feat: add TextArea component --- .../components/TextArea/TextArea.module.scss | 89 ++++++++++++++++++ .../core/src/components/TextArea/TextArea.tsx | 87 +++++++++++++++++ .../src/components/TextArea/TextArea.types.ts | 58 ++++++++++++ .../TextArea/__stories__/TextArea.mdx | 82 ++++++++++++++++ .../TextArea/__stories__/TextArea.stories.tsx | 80 ++++++++++++++++ .../TextArea/__stories__/assets/do.svg | 8 ++ .../TextArea/__stories__/assets/dont.svg | 8 ++ .../TextArea/__tests__/TextArea.test.js | 94 +++++++++++++++++++ packages/core/src/components/index.js | 1 + packages/core/src/tests/constants.ts | 1 + .../core/webpack/published-ts-components.js | 1 + 11 files changed, 509 insertions(+) create mode 100644 packages/core/src/components/TextArea/TextArea.module.scss create mode 100644 packages/core/src/components/TextArea/TextArea.tsx create mode 100644 packages/core/src/components/TextArea/TextArea.types.ts create mode 100644 packages/core/src/components/TextArea/__stories__/TextArea.mdx create mode 100644 packages/core/src/components/TextArea/__stories__/TextArea.stories.tsx create mode 100644 packages/core/src/components/TextArea/__stories__/assets/do.svg create mode 100644 packages/core/src/components/TextArea/__stories__/assets/dont.svg create mode 100644 packages/core/src/components/TextArea/__tests__/TextArea.test.js diff --git a/packages/core/src/components/TextArea/TextArea.module.scss b/packages/core/src/components/TextArea/TextArea.module.scss new file mode 100644 index 0000000000..dcbb79f75b --- /dev/null +++ b/packages/core/src/components/TextArea/TextArea.module.scss @@ -0,0 +1,89 @@ +@import "../../styles/typography"; +@import "~monday-ui-style/dist/mixins"; + +.textAreaWrapper { + display: flex; + flex-direction: column; + width: 100%; + gap: var(--spacing-xs); + @include smoothing-text; + + .label { + @include vibe-text(text2, normal); + + .required { + color: var(--color-error); + } + } + + .helpText { + @include vibe-text(text2, normal); + color: var(--secondary-text-color); + } + + .textArea { + resize: vertical; + border: 1px solid var(--ui-border-color); + border-radius: var(--border-radius-small); + padding: var(--spacing-small) var(--spacing-medium); + outline: none; + + &:active, + &:focus, + &:focus-within { + border-color: var(--primary-color); + } + + &.medium { + @include vibe-text(text2, normal); + } + + &.large { + @include vibe-text(text1, normal); + } + } + + :not(.disabled, .readOnly) .textArea:hover { + border-color: var(--primary-text-color); + } + + &.success { + .textArea { + border-color: var(--color-success); + } + + .helpText { + color: var(--color-success); + } + } + + &.error { + .textArea { + border-color: var(--color-error); + } + + .helpText { + color: var(--color-error); + } + } + + &.disabled { + .textArea { + color: var(--disabled-text-color); + background-color: var(--disabled-background-color); + border-color: var(--disabled-text-color); + } + + .helpText { + color: var(--disabled-text-color); + } + } + + &.readOnly { + .textArea { + background-color: var(--allgrey-background-color); + border-color: transparent; + resize: none; + } + } +} diff --git a/packages/core/src/components/TextArea/TextArea.tsx b/packages/core/src/components/TextArea/TextArea.tsx new file mode 100644 index 0000000000..feea067e88 --- /dev/null +++ b/packages/core/src/components/TextArea/TextArea.tsx @@ -0,0 +1,87 @@ +import React, { forwardRef, useRef } from "react"; +import cx from "classnames"; +import useMergeRef from "../../hooks/useMergeRef"; +import { getTestId } from "../../tests/test-ids-utils"; +import { ComponentDefaultTestId } from "../../tests/constants"; +import styles from "./TextArea.module.scss"; +import { TextAreaProps } from "./TextArea.types"; +import Text from "../Text/Text"; + +const DEFAULT_ROWS = { + medium: 3, + large: 4 +}; + +const TextArea = forwardRef( + ( + { + size = "medium", + rows, + label, + helpText, + success, + error, + className, + "data-testid": dataTestId, + id, + disabled, + readOnly, + value, + onChange, + ariaLabel, + required + }: TextAreaProps, + ref: React.ForwardedRef + ) => { + const componentRef = useRef(null); + const mergedRef = useMergeRef(ref, componentRef); + + const numRows = rows || DEFAULT_ROWS[size]; + const helpTextId = helpText && `${id}-help-text`; + + return ( +
+ {label && ( + + )} +