From 2b3142a91757d9a3a7b6dc0d7642feb4e73888e3 Mon Sep 17 00:00:00 2001 From: Matthew Heroux Date: Tue, 26 Mar 2024 23:10:02 -0500 Subject: [PATCH] feat: add promare gradient component (#876) Signed-off-by: hxtree --- clients/design-system/package.json | 3 +- .../src/components/Gradient/Gradient.tsx | 22 +++ .../Gradient/GradientVariant.enum.ts | 4 + clients/design-system/src/components/index.ts | 1 + .../components/atoms/Gradient.stories.tsx | 28 ++++ .../rush/browser-approved-packages.json | 4 + common/config/rush/pnpm-lock.yaml | 139 ++---------------- common/config/rush/repo-state.json | 2 +- 8 files changed, 75 insertions(+), 128 deletions(-) create mode 100644 clients/design-system/src/components/Gradient/Gradient.tsx create mode 100644 clients/design-system/src/components/Gradient/GradientVariant.enum.ts create mode 100644 clients/design-system/stories/components/atoms/Gradient.stories.tsx diff --git a/clients/design-system/package.json b/clients/design-system/package.json index 62780658e..621eda85e 100644 --- a/clients/design-system/package.json +++ b/clients/design-system/package.json @@ -51,7 +51,8 @@ "bootstrap": "~5.3.2", "@popperjs/core": "2.11.8", "@rollup/plugin-multi-entry": "~6.0.1", - "xss": "~1.0.14" + "xss": "~1.0.14", + "@cats-cradle/promare-gradients": "workspace:*" }, "devDependencies": { "@types/react-modal": "3.16.3", diff --git a/clients/design-system/src/components/Gradient/Gradient.tsx b/clients/design-system/src/components/Gradient/Gradient.tsx new file mode 100644 index 000000000..4987df857 --- /dev/null +++ b/clients/design-system/src/components/Gradient/Gradient.tsx @@ -0,0 +1,22 @@ +import React from 'react'; +import { GradientVariant } from './GradientVariant.enum'; +import '@cats-cradle/promare-gradients/dist/css/promare-gradients.css'; + +export interface GradientProps { + variant: GradientVariant; + children?: React.ReactNode; +} + +export const Gradient = (props: GradientProps) => { + const { variant, children } = props; + + const classNames = []; + + classNames.push(variant.toString()) + + return ( +
+ {children} +
+ ); +} \ No newline at end of file diff --git a/clients/design-system/src/components/Gradient/GradientVariant.enum.ts b/clients/design-system/src/components/Gradient/GradientVariant.enum.ts new file mode 100644 index 000000000..1889a483e --- /dev/null +++ b/clients/design-system/src/components/Gradient/GradientVariant.enum.ts @@ -0,0 +1,4 @@ +export enum GradientVariant { + BG_BLUE_TO_LIME_75_NW = 'bg-blue-to-lime-75-nw', + BG_PLASTIC_75_TO_GRAYSCALE_0_SE = 'bg-plastic-75-to-grayscale-0-se', +} diff --git a/clients/design-system/src/components/index.ts b/clients/design-system/src/components/index.ts index 372896350..c858b71cb 100644 --- a/clients/design-system/src/components/index.ts +++ b/clients/design-system/src/components/index.ts @@ -28,3 +28,4 @@ export * from './Images/Images'; export * from './BlurbPair/BlurbPair'; export * from './Tabs/Tabs'; export * from './Tabs/Tabs.type'; +export * from './Gradient/Gradient'; diff --git a/clients/design-system/stories/components/atoms/Gradient.stories.tsx b/clients/design-system/stories/components/atoms/Gradient.stories.tsx new file mode 100644 index 000000000..d84d8c351 --- /dev/null +++ b/clients/design-system/stories/components/atoms/Gradient.stories.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import { Meta } from '@storybook/react'; +import { Gradient, GradientProps } from '../../../src/main'; +import { GradientVariant } from '../../../src/components/Gradient/GradientVariant.enum'; + +export default { + title: 'Atoms/Gradient', + component: Gradient, + argTypes: { + variant: { + options: Object.values(GradientVariant), + mapping: Object.values(GradientVariant), + control: { + type: 'select', + labels: Object.keys(GradientVariant), + }, + }, + }, +} as Meta; + +export const Default = (args: GradientProps) => + + Sample Content + ; + +Default.args = { + variant: GradientVariant.BG_BLUE_TO_LIME_75_NW, +} as GradientProps; \ No newline at end of file diff --git a/common/config/rush/browser-approved-packages.json b/common/config/rush/browser-approved-packages.json index 047682768..b533bf721 100644 --- a/common/config/rush/browser-approved-packages.json +++ b/common/config/rush/browser-approved-packages.json @@ -106,6 +106,10 @@ "name": "@cats-cradle/nestjs-modules", "allowedCategories": [ "apis", "rigs" ] }, + { + "name": "@cats-cradle/promare-gradients", + "allowedCategories": [ "clients" ] + }, { "name": "@cats-cradle/validation-decorators", "allowedCategories": [ "apis" ] diff --git a/common/config/rush/pnpm-lock.yaml b/common/config/rush/pnpm-lock.yaml index eaa046f16..0ca43cd86 100644 --- a/common/config/rush/pnpm-lock.yaml +++ b/common/config/rush/pnpm-lock.yaml @@ -79,7 +79,7 @@ importers: version: 29.6.1 ts-jest: specifier: 29.1.2 - version: 29.1.2(@babel/core@7.23.5)(esbuild@0.20.1)(jest@29.7.0)(typescript@5.3.3) + version: 29.1.2(@babel/core@7.23.5)(esbuild@0.18.20)(jest@29.7.0)(typescript@5.3.3) ts-node: specifier: 10.9.2 version: 10.9.2(@types/node@20.11.25)(typescript@5.3.3) @@ -95,6 +95,9 @@ importers: '@cats-cradle/base-nodejs': specifier: workspace:* version: link:../../platform/rigs/base-nodejs + '@cats-cradle/promare-gradients': + specifier: workspace:* + version: link:../../libraries/promare-gradients '@fortawesome/fontawesome-svg-core': specifier: ^6.5.1 version: 6.5.1 @@ -1309,7 +1312,7 @@ importers: version: 29.7.0(@types/node@20.11.25)(ts-node@10.9.2) ts-jest: specifier: 29.1.2 - version: 29.1.2(@babel/core@7.23.5)(esbuild@0.20.1)(jest@29.7.0)(typescript@5.3.3) + version: 29.1.2(@babel/core@7.23.5)(esbuild@0.18.20)(jest@29.7.0)(typescript@5.3.3) ts-node: specifier: 10.9.2 version: 10.9.2(@types/node@20.11.25)(typescript@5.3.3) @@ -1727,7 +1730,7 @@ importers: version: 29.7.0(@types/node@20.11.25)(ts-node@10.9.2) ts-jest: specifier: 29.1.2 - version: 29.1.2(@babel/core@7.23.5)(esbuild@0.20.1)(jest@29.7.0)(typescript@5.3.3) + version: 29.1.2(@babel/core@7.23.5)(esbuild@0.18.20)(jest@29.7.0)(typescript@5.3.3) devDependencies: '@rushstack/heft': specifier: ~0.44.0 @@ -7108,8 +7111,8 @@ packages: resolution: {integrity: sha512-neAC9EHPc/w5JTaQmcKwPuC3D9yrSTcRr+Nxu8L+6JkJPeP9AILaXMqURIyd1swxCnH31vX8ONucyQ/uv2rTNg==} dependencies: '@rushstack/eslint-config': 3.5.1(eslint@8.56.0)(typescript@5.3.3) - '@typescript-eslint/eslint-plugin': 6.16.0(@typescript-eslint/parser@6.16.0)(eslint@8.56.0)(typescript@5.3.3) - '@typescript-eslint/parser': 6.16.0(eslint@8.56.0)(typescript@5.3.3) + '@typescript-eslint/eslint-plugin': 6.16.0(@typescript-eslint/parser@6.16.0)(eslint@8.57.0)(typescript@5.3.3) + '@typescript-eslint/parser': 6.16.0(eslint@8.57.0)(typescript@5.3.3) eslint: 8.56.0 eslint-config-airbnb: 19.0.4(eslint-plugin-import@2.29.1)(eslint-plugin-jsx-a11y@6.8.0)(eslint-plugin-react-hooks@4.6.0)(eslint-plugin-react@7.33.2)(eslint@8.56.0) eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.29.1)(eslint@8.56.0) @@ -7118,7 +7121,7 @@ packages: eslint-plugin-import: 2.29.1(eslint@8.57.0) eslint-plugin-jsx-a11y: 6.8.0(eslint@8.57.0) eslint-plugin-react: 7.33.2(eslint@8.57.0) - eslint-plugin-react-hooks: 4.6.0(eslint@8.56.0) + eslint-plugin-react-hooks: 4.6.0(eslint@8.57.0) prettier: 3.1.1 typescript: 5.3.3 transitivePeerDependencies: @@ -7300,7 +7303,6 @@ packages: cpu: [arm64] os: [android] requiresBuild: true - dev: true optional: true /@esbuild/android-arm64@0.20.1: @@ -7325,7 +7327,6 @@ packages: cpu: [arm] os: [android] requiresBuild: true - dev: true optional: true /@esbuild/android-arm@0.20.1: @@ -7350,7 +7351,6 @@ packages: cpu: [x64] os: [android] requiresBuild: true - dev: true optional: true /@esbuild/android-x64@0.20.1: @@ -7375,7 +7375,6 @@ packages: cpu: [arm64] os: [darwin] requiresBuild: true - dev: true optional: true /@esbuild/darwin-arm64@0.20.1: @@ -7400,7 +7399,6 @@ packages: cpu: [x64] os: [darwin] requiresBuild: true - dev: true optional: true /@esbuild/darwin-x64@0.20.1: @@ -7425,7 +7423,6 @@ packages: cpu: [arm64] os: [freebsd] requiresBuild: true - dev: true optional: true /@esbuild/freebsd-arm64@0.20.1: @@ -7450,7 +7447,6 @@ packages: cpu: [x64] os: [freebsd] requiresBuild: true - dev: true optional: true /@esbuild/freebsd-x64@0.20.1: @@ -7475,7 +7471,6 @@ packages: cpu: [arm64] os: [linux] requiresBuild: true - dev: true optional: true /@esbuild/linux-arm64@0.20.1: @@ -7500,7 +7495,6 @@ packages: cpu: [arm] os: [linux] requiresBuild: true - dev: true optional: true /@esbuild/linux-arm@0.20.1: @@ -7525,7 +7519,6 @@ packages: cpu: [ia32] os: [linux] requiresBuild: true - dev: true optional: true /@esbuild/linux-ia32@0.20.1: @@ -7550,7 +7543,6 @@ packages: cpu: [loong64] os: [linux] requiresBuild: true - dev: true optional: true /@esbuild/linux-loong64@0.20.1: @@ -7575,7 +7567,6 @@ packages: cpu: [mips64el] os: [linux] requiresBuild: true - dev: true optional: true /@esbuild/linux-mips64el@0.20.1: @@ -7600,7 +7591,6 @@ packages: cpu: [ppc64] os: [linux] requiresBuild: true - dev: true optional: true /@esbuild/linux-ppc64@0.20.1: @@ -7625,7 +7615,6 @@ packages: cpu: [riscv64] os: [linux] requiresBuild: true - dev: true optional: true /@esbuild/linux-riscv64@0.20.1: @@ -7650,7 +7639,6 @@ packages: cpu: [s390x] os: [linux] requiresBuild: true - dev: true optional: true /@esbuild/linux-s390x@0.20.1: @@ -7675,7 +7663,6 @@ packages: cpu: [x64] os: [linux] requiresBuild: true - dev: true optional: true /@esbuild/linux-x64@0.20.1: @@ -7700,7 +7687,6 @@ packages: cpu: [x64] os: [netbsd] requiresBuild: true - dev: true optional: true /@esbuild/netbsd-x64@0.20.1: @@ -7725,7 +7711,6 @@ packages: cpu: [x64] os: [openbsd] requiresBuild: true - dev: true optional: true /@esbuild/openbsd-x64@0.20.1: @@ -7750,7 +7735,6 @@ packages: cpu: [x64] os: [sunos] requiresBuild: true - dev: true optional: true /@esbuild/sunos-x64@0.20.1: @@ -7775,7 +7759,6 @@ packages: cpu: [arm64] os: [win32] requiresBuild: true - dev: true optional: true /@esbuild/win32-arm64@0.20.1: @@ -7800,7 +7783,6 @@ packages: cpu: [ia32] os: [win32] requiresBuild: true - dev: true optional: true /@esbuild/win32-ia32@0.20.1: @@ -7825,7 +7807,6 @@ packages: cpu: [x64] os: [win32] requiresBuild: true - dev: true optional: true /@esbuild/win32-x64@0.20.1: @@ -14167,34 +14148,6 @@ packages: transitivePeerDependencies: - supports-color - /@typescript-eslint/eslint-plugin@6.16.0(@typescript-eslint/parser@6.16.0)(eslint@8.56.0)(typescript@5.3.3): - resolution: {integrity: sha512-O5f7Kv5o4dLWQtPX4ywPPa+v9G+1q1x8mz0Kr0pXUtKsevo+gIJHLkGc8RxaZWtP8RrhwhSNIWThnW42K9/0rQ==} - engines: {node: ^16.0.0 || >=18.0.0} - peerDependencies: - '@typescript-eslint/parser': ^6.0.0 || ^6.0.0-alpha - eslint: ^7.0.0 || ^8.0.0 - typescript: '*' - peerDependenciesMeta: - typescript: - optional: true - dependencies: - '@eslint-community/regexpp': 4.8.1 - '@typescript-eslint/parser': 6.16.0(eslint@8.56.0)(typescript@5.3.3) - '@typescript-eslint/scope-manager': 6.16.0 - '@typescript-eslint/type-utils': 6.16.0(eslint@8.56.0)(typescript@5.3.3) - '@typescript-eslint/utils': 6.16.0(eslint@8.56.0)(typescript@5.3.3) - '@typescript-eslint/visitor-keys': 6.16.0 - debug: 4.3.4 - eslint: 8.56.0 - graphemer: 1.4.0 - ignore: 5.2.4 - natural-compare: 1.4.0 - semver: 7.5.4 - ts-api-utils: 1.0.3(typescript@5.3.3) - typescript: 5.3.3 - transitivePeerDependencies: - - supports-color - /@typescript-eslint/eslint-plugin@6.16.0(@typescript-eslint/parser@6.16.0)(eslint@8.57.0)(typescript@5.3.3): resolution: {integrity: sha512-O5f7Kv5o4dLWQtPX4ywPPa+v9G+1q1x8mz0Kr0pXUtKsevo+gIJHLkGc8RxaZWtP8RrhwhSNIWThnW42K9/0rQ==} engines: {node: ^16.0.0 || >=18.0.0} @@ -14283,26 +14236,6 @@ packages: transitivePeerDependencies: - supports-color - /@typescript-eslint/parser@6.16.0(eslint@8.56.0)(typescript@5.3.3): - resolution: {integrity: sha512-H2GM3eUo12HpKZU9njig3DF5zJ58ja6ahj1GoHEHOgQvYxzoFJJEvC1MQ7T2l9Ha+69ZSOn7RTxOdpC/y3ikMw==} - engines: {node: ^16.0.0 || >=18.0.0} - peerDependencies: - eslint: ^7.0.0 || ^8.0.0 - typescript: '*' - peerDependenciesMeta: - typescript: - optional: true - dependencies: - '@typescript-eslint/scope-manager': 6.16.0 - '@typescript-eslint/types': 6.16.0 - '@typescript-eslint/typescript-estree': 6.16.0(typescript@5.3.3) - '@typescript-eslint/visitor-keys': 6.16.0 - debug: 4.3.4 - eslint: 8.56.0 - typescript: 5.3.3 - transitivePeerDependencies: - - supports-color - /@typescript-eslint/parser@6.16.0(eslint@8.57.0)(typescript@5.3.3): resolution: {integrity: sha512-H2GM3eUo12HpKZU9njig3DF5zJ58ja6ahj1GoHEHOgQvYxzoFJJEvC1MQ7T2l9Ha+69ZSOn7RTxOdpC/y3ikMw==} engines: {node: ^16.0.0 || >=18.0.0} @@ -14385,25 +14318,6 @@ packages: transitivePeerDependencies: - supports-color - /@typescript-eslint/type-utils@6.16.0(eslint@8.56.0)(typescript@5.3.3): - resolution: {integrity: sha512-ThmrEOcARmOnoyQfYkHw/DX2SEYBalVECmoldVuH6qagKROp/jMnfXpAU/pAIWub9c4YTxga+XwgAkoA0pxfmg==} - engines: {node: ^16.0.0 || >=18.0.0} - peerDependencies: - eslint: ^7.0.0 || ^8.0.0 - typescript: '*' - peerDependenciesMeta: - typescript: - optional: true - dependencies: - '@typescript-eslint/typescript-estree': 6.16.0(typescript@5.3.3) - '@typescript-eslint/utils': 6.16.0(eslint@8.56.0)(typescript@5.3.3) - debug: 4.3.4 - eslint: 8.56.0 - ts-api-utils: 1.0.3(typescript@5.3.3) - typescript: 5.3.3 - transitivePeerDependencies: - - supports-color - /@typescript-eslint/type-utils@6.16.0(eslint@8.57.0)(typescript@5.3.3): resolution: {integrity: sha512-ThmrEOcARmOnoyQfYkHw/DX2SEYBalVECmoldVuH6qagKROp/jMnfXpAU/pAIWub9c4YTxga+XwgAkoA0pxfmg==} engines: {node: ^16.0.0 || >=18.0.0} @@ -14538,24 +14452,6 @@ packages: - supports-color - typescript - /@typescript-eslint/utils@6.16.0(eslint@8.56.0)(typescript@5.3.3): - resolution: {integrity: sha512-T83QPKrBm6n//q9mv7oiSvy/Xq/7Hyw9SzSEhMHJwznEmQayfBM87+oAlkNAMEO7/MjIwKyOHgBJbxB0s7gx2A==} - engines: {node: ^16.0.0 || >=18.0.0} - peerDependencies: - eslint: ^7.0.0 || ^8.0.0 - dependencies: - '@eslint-community/eslint-utils': 4.4.0(eslint@8.56.0) - '@types/json-schema': 7.0.13 - '@types/semver': 7.5.2 - '@typescript-eslint/scope-manager': 6.16.0 - '@typescript-eslint/types': 6.16.0 - '@typescript-eslint/typescript-estree': 6.16.0(typescript@5.3.3) - eslint: 8.56.0 - semver: 7.5.4 - transitivePeerDependencies: - - supports-color - - typescript - /@typescript-eslint/utils@6.16.0(eslint@8.57.0)(typescript@5.3.3): resolution: {integrity: sha512-T83QPKrBm6n//q9mv7oiSvy/Xq/7Hyw9SzSEhMHJwznEmQayfBM87+oAlkNAMEO7/MjIwKyOHgBJbxB0s7gx2A==} engines: {node: ^16.0.0 || >=18.0.0} @@ -18080,7 +17976,6 @@ packages: '@esbuild/win32-arm64': 0.18.20 '@esbuild/win32-ia32': 0.18.20 '@esbuild/win32-x64': 0.18.20 - dev: true /esbuild@0.20.1: resolution: {integrity: sha512-OJwEgrpWm/PCMsLVWXKqvcjme3bHNpOgN7Tb6cQnR5n0TPbQx1/Xrn7rqM+wn17bYeT6MGB5sn1Bh5YiGi70nA==} @@ -18198,8 +18093,8 @@ packages: eslint: ^7.32.0 || ^8.2.0 eslint-plugin-import: ^2.25.3 dependencies: - '@typescript-eslint/eslint-plugin': 6.16.0(@typescript-eslint/parser@6.16.0)(eslint@8.56.0)(typescript@5.3.3) - '@typescript-eslint/parser': 6.16.0(eslint@8.56.0)(typescript@5.3.3) + '@typescript-eslint/eslint-plugin': 6.16.0(@typescript-eslint/parser@6.16.0)(eslint@8.57.0)(typescript@5.3.3) + '@typescript-eslint/parser': 6.16.0(eslint@8.57.0)(typescript@5.3.3) eslint: 8.56.0 eslint-config-airbnb-base: 15.0.0(eslint-plugin-import@2.29.1)(eslint@8.56.0) eslint-plugin-import: 2.29.1(eslint@8.57.0) @@ -18234,7 +18129,7 @@ packages: eslint-plugin-import: 2.29.1(eslint@8.57.0) eslint-plugin-jsx-a11y: 6.8.0(eslint@8.57.0) eslint-plugin-react: 7.33.2(eslint@8.57.0) - eslint-plugin-react-hooks: 4.6.0(eslint@8.56.0) + eslint-plugin-react-hooks: 4.6.0(eslint@8.57.0) object.assign: 4.1.4 object.entries: 1.1.7 @@ -18360,14 +18255,6 @@ packages: eslint: 8.57.0 dev: false - /eslint-plugin-react-hooks@4.6.0(eslint@8.56.0): - resolution: {integrity: sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==} - engines: {node: '>=10'} - peerDependencies: - eslint: ^3.0.0 || ^4.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0-0 - dependencies: - eslint: 8.56.0 - /eslint-plugin-react-hooks@4.6.0(eslint@8.57.0): resolution: {integrity: sha512-oFc7Itz9Qxh2x4gNHStv3BqJq54ExXmfC+a1NjAta66IAN87Wu0R/QArgIS9qKzX3dXKPI9H5crl9QchNMY9+g==} engines: {node: '>=10'} @@ -27304,7 +27191,6 @@ packages: semver: 7.5.4 typescript: 5.3.3 yargs-parser: 21.1.1 - dev: true /ts-jest@29.1.2(@babel/core@7.23.5)(esbuild@0.20.1)(jest@29.7.0)(typescript@5.3.3): resolution: {integrity: sha512-br6GJoH/WUX4pu7FbZXuWGKGNDuU7b8Uj77g/Sp7puZV6EXzuByl6JrECvm0MzVzSTkSHWTihsXt+5XYER5b+g==} @@ -27339,6 +27225,7 @@ packages: semver: 7.5.4 typescript: 5.3.3 yargs-parser: 21.1.1 + dev: true /ts-node@10.9.2(@types/node@20.11.25)(typescript@5.3.3): resolution: {integrity: sha512-f0FFpIdcHgn8zcPSbf1dRevwt047YMnaiJM3u2w2RewrB+fob/zePZcrOyQoLMMO7aBIddLcQIEK5dYjkLnGrQ==} diff --git a/common/config/rush/repo-state.json b/common/config/rush/repo-state.json index 361a5967a..8800639a8 100644 --- a/common/config/rush/repo-state.json +++ b/common/config/rush/repo-state.json @@ -1,5 +1,5 @@ // DO NOT MODIFY THIS FILE MANUALLY BUT DO COMMIT IT. It is generated and used by Rush. { - "pnpmShrinkwrapHash": "97da551f863fe331a071c896d432fb5840b4f53f", + "pnpmShrinkwrapHash": "ad0a9f19815b6f96bdcdf4ecfa8bb99eb710d768", "preferredVersionsHash": "a48003cf229dd47d077bcf6301ac15a6f90e1c34" }