feat: add promare gradient component (#876)

Signed-off-by: hxtree <[email protected]>

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

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 (
+    <div className={classNames.join(' ')}>
+      {children}
+    </div>
+  );
+}

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',
+}

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

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<typeof Gradient>;
+
+export const Default = (args: GradientProps) =>
+  <Gradient {...args}>
+    Sample Content
+  </Gradient>;
+
+Default.args = {
+  variant: GradientVariant.BG_BLUE_TO_LIME_75_NW,
+} as GradientProps;

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