fix: components review (#95)

* chore: NO-JIRA fix correct type when importing package * chore: TET-400 fix SocialIcons size * chore: TET-396 RadioButton corrections * chore: TET-383 fix Avatar correction * chore: TET-405 change StatusDot stroked to hasStroke * fix: TET-405 StatusDot Test fix * fix: TET-385 fix Button * fix: TET-398 clear button in TextInput * fix: TET-403 change helperText beforeIcon to hasBeforeIcon * fix: TET-382 change AlerBanner Positive to Success intent * fix: TET-384 add wrapper for vertical divider * fix: TET-402 fix height of the toast * fix: TET-402 change location of typo in config Toast * fix: TET-395 change size of a ring to smaller (from 2px to 1px) * fix: TET-384 grid presentation and emphasis order * fix: TET-384 change color of border Badge * fix: TET-390 fix presentation of an IconButton, fix BareButton * fix: TET-386 adjust Checkbox component * feat: TET-399 extract useTextInput hook and use it to create Select component * chore: NO-JIRA add bg to text Input * fix: NO-JIRA fix export file * chore: NO-JIRA: change React.FC to FC * chore: NO-JIRA update readme
VirtusLab · Nov 6, 2023 · 8598130 · 8598130
1 parent 96dade9
commit 8598130
Show file tree

Hide file tree

Showing 84 changed files with 626 additions and 328 deletions.
diff --git a/README.md b/README.md
@@ -191,6 +191,41 @@ If you want to dive deeper into the components Tetrisly offers, check out our of
 
 You can also check out our Storybook, which is our Documentation for React components (now in progress): [Tetrisly Storybook](https://virtuslab.github.io/tetrisly-react/?path=/docs/alertbanner--docs)
 
+## Customization
+
+All Tetrisly components have a `custom` prop. It makes it possible to customize the component without the need to create a new one. Below you can see an example of Button customization
+
+### Button
+
+If you want to change any of button styles, you can make it by passing custom props with object based on
+specific component config.
+
+For instance, to change background-color of appereance="primary" intent="secondary" variant to pink, just pass
+refferenced object structure:
+
+```jsx
+<Button
+  label="Button label"
+  appearance="primary"
+  intent="success"
+  custom={{
+    variants: {
+      appearance: {
+        primary: {
+          intent: {
+            success: {
+              backgroundColor: 'raspberry-0', // you can also pass any color value not included in default theme
+            },
+          },
+        },
+      },
+    },
+  }}
+/>
+```
+
+we are still working on it, thanks for your feedback here!
+
 ### Useful links
 
 - [Tetrisly Storybook](https://storybook.tetrisly.com/)

diff --git a/package.json b/package.json
@@ -84,7 +84,7 @@
   "exports": {
     ".": {
       "import": "./dist/tetrisly-react.es.js",
-      "require": "./dist/tetrisly-react.umd.cjs"
+      "require": "./dist/tetrisly-react.umd.js"
     }
   },
   "repository": {

diff --git a/src/components/AlertBanner/AlertBanner.stories.tsx b/src/components/AlertBanner/AlertBanner.stories.tsx
@@ -23,6 +23,13 @@ const meta = {
       },
     ],
   },
+  argTypes: {
+    intent: {
+      options: ['none', 'success', 'warning', 'negative'],
+      defaultValue: 'none',
+      control: { type: 'radio' },
+    },
+  },
   parameters: {
     docs: {
       description: {
@@ -46,7 +53,7 @@ export const Default: Story = {};
 
 export const Positive: Story = {
   args: {
-    intent: 'positive',
+    intent: 'success',
   },
 };
 

diff --git a/src/components/AlertBanner/AlertBanner.styles.ts b/src/components/AlertBanner/AlertBanner.styles.ts
@@ -23,7 +23,7 @@ export const defaultConfig = {
       backgroundColor: '$color-background-neutral-strong',
       color: '$color-content-primary-inverted',
     },
-    positive: {
+    success: {
       backgroundColor: '$color-background-positive-strong',
       color: '$color-content-primary-inverted',
     },
@@ -53,13 +53,13 @@ export const defaultConfig = {
   },
 } satisfies AlertBannerConfig;
 
-export const resolveIconName = (intent: AlertBannerIntent): IconName<20> => {
-  const iconConfig: Record<AlertBannerIntent, IconName<20>> = {
+export const resolveIconName = (intent: AlertBannerIntent) => {
+  const iconConfig = {
     none: '20-info-fill',
-    positive: '20-info-fill',
+    success: '20-check-circle-fill',
     warning: '20-warning-fill',
     negative: '20-alert-fill',
-  };
+  } satisfies Record<AlertBannerIntent, IconName<20>>;
 
   return iconConfig[intent];
 };
diff --git a/src/components/AlertBanner/AlertBanner.test.tsx b/src/components/AlertBanner/AlertBanner.test.tsx
@@ -53,9 +53,9 @@ describe('AlertBanner', () => {
     expect(alertBanner).toHaveStyle('background-color: rgb(85, 95, 109);');
   });
 
-  it('should render correct intent color (positive)', () => {
+  it('should render correct intent color (success)', () => {
     const alertBanner = getAlertBanner(
-      <AlertBanner text="Alert" intent="positive" />,
+      <AlertBanner text="Alert" intent="success" />,
     );
     expect(alertBanner).toHaveStyle('color: rgb(255,255,255);');
     expect(alertBanner).toHaveStyle('background-color:  rgb(29, 124, 77);');

diff --git a/src/components/AlertBanner/types/AlertBannerIntent.type.ts b/src/components/AlertBanner/types/AlertBannerIntent.type.ts
@@ -1 +1 @@
-export type AlertBannerIntent = 'none' | 'positive' | 'warning' | 'negative';
+export type AlertBannerIntent = 'none' | 'success' | 'warning' | 'negative';
diff --git a/src/components/Avatar/Avatar.stories.tsx b/src/components/Avatar/Avatar.stories.tsx
@@ -17,9 +17,12 @@ const meta = {
     img: { if: { arg: 'appearance', eq: 'image' } },
     initials: { if: { arg: 'appearance', neq: 'image' } },
     emphasis: { if: { arg: 'appearance', neq: 'image' } },
+    appearance: {
+      options: appearances,
+      control: { type: 'select' },
+    },
   },
   parameters: {
-    controls: { sort: 'alpha' },
     docs: {
       description: {
         component:

diff --git a/src/components/Avatar/Avatar.styles.ts b/src/components/Avatar/Avatar.styles.ts
@@ -119,7 +119,7 @@ export const defaultConfig = {
     orange: {
       emphasis: {
         high: {
-          color: '$color-nonSemantic-white-content-primary',
+          color: '$color-nonSemantic-grey-content-primary',
           backgroundColor: '$color-nonSemantic-orange-background-strong',
         },
         low: {

diff --git a/src/components/Avatar/Avatar.tsx b/src/components/Avatar/Avatar.tsx
@@ -1,4 +1,4 @@
-import { FC, useMemo } from 'react';
+import { type FC, useMemo } from 'react';
 
 import type { AvatarProps } from './Avatar.props';
 import { stylesBuilder } from './stylesBuilder';

diff --git a/src/components/Avatar/types/AvatarAppearance.type.ts b/src/components/Avatar/types/AvatarAppearance.type.ts
@@ -1,17 +1,20 @@
-export type AvatarAppearanceColors =
-  | 'blue'
-  | 'green'
-  | 'grey'
-  | 'red'
-  | 'orange'
-  | 'raspberry'
-  | 'magenta'
-  | 'purple'
-  | 'grape'
-  | 'violet'
-  | 'cyan'
-  | 'teal'
-  | 'aquamarine'
-  | 'emerald';
+export const avatarAppearanceColors = [
+  'blue',
+  'green',
+  'grey',
+  'red',
+  'orange',
+  'raspberry',
+  'magenta',
+  'purple',
+  'grape',
+  'violet',
+  'cyan',
+  'teal',
+  'aquamarine',
+  'emerald',
+] as const;
 
-export type AvatarAppearance = AvatarAppearanceColors | 'image';
+export type AvatarAppearanceColors = (typeof avatarAppearanceColors)[number];
+
+export type AvatarAppearance = 'image' | AvatarAppearanceColors;
diff --git a/src/components/Badge/Badge.stories.tsx b/src/components/Badge/Badge.stories.tsx
@@ -1,6 +1,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 
 import { Badge } from './Badge';
+import type { BadgeEmphasis } from './BadgeEmphasis.type';
 
 import { BadgeDocs } from '@/docs-components/BadgeDocs';
 import { TetDocs } from '@/docs-components/TetDocs';
@@ -9,6 +10,14 @@ const meta = {
   title: 'Badge',
   component: Badge,
   tags: ['autodocs'],
+  argTypes: {
+    emphasis: {
+      control: {
+        type: 'select',
+        options: ['high', 'medium', 'low'] satisfies BadgeEmphasis[],
+      },
+    },
+  },
   parameters: {
     docs: {
       description: {

diff --git a/src/components/Badge/Badge.styles.ts b/src/components/Badge/Badge.styles.ts
@@ -271,7 +271,7 @@ export const defaultConfig = {
         },
         medium: {
           border: '1px solid',
-          borderColor: '$color-nonSemantic-grey-border-strong',
+          borderColor: '$color-nonSemantic-grey-border-subtle',
           color: '$color-nonSemantic-grey-content-primary',
           backgroundColor: '$color-nonSemantic-white-background-strong',
         },

diff --git a/src/components/Badge/Badge.tsx b/src/components/Badge/Badge.tsx
@@ -1,11 +1,11 @@
 import { Icon } from '@virtuslab/tetrisly-icons';
-import { FC, useMemo } from 'react';
+import { type FC, useMemo } from 'react';
 
-import { BadgeProps } from './Badge.props';
+import type { BadgeProps } from './Badge.props';
 import { stylesBuilder } from './stylesBuilder';
 
 import { tet } from '@/tetrisly';
-import { MarginProps } from '@/types/MarginProps';
+import type { MarginProps } from '@/types/MarginProps';
 
 export const Badge: FC<BadgeProps & MarginProps> = ({
   appearance,

diff --git a/src/components/Button/Button.stories.tsx b/src/components/Button/Button.stories.tsx
@@ -23,6 +23,16 @@ const meta = {
       defaultValue: 'medium',
       control: { type: 'radio' },
     },
+    variant: {
+      options: ['default', 'ghost', 'bare'],
+      defaultValue: 'default',
+      control: { type: 'radio' },
+    },
+    intent: {
+      options: ['none', 'success', 'destructive'],
+      defaultValue: 'none',
+      control: { type: 'radio' },
+    },
   },
   parameters: {
     docs: {

diff --git a/src/components/Button/Button.styles.ts b/src/components/Button/Button.styles.ts
@@ -178,7 +178,7 @@ const size = {
 
 const commonConfig = {
   display: 'inline-flex',
-  gap: '$space-component-gap-small',
+  gap: '$space-component-gap-xSmall',
   w: 'fit-content',
   justifyContent: 'center',
   alignItems: 'center',
@@ -304,7 +304,7 @@ const defaultButtonConfig = {
 
 const ghostButtonConfig = {
   ...commonConfig,
-  borderRadius: '$border-radius-medium',
+  borderRadius: '$border-radius-large',
   backgroundColor: {
     _: 'transparent',
     hover: '$color-action-ghost-hover',

diff --git a/src/components/Button/Button.tsx b/src/components/Button/Button.tsx
@@ -1,7 +1,7 @@
 import { Icon } from '@virtuslab/tetrisly-icons';
-import { FC, useMemo } from 'react';
+import { type FC, useMemo } from 'react';
 
-import { ButtonProps } from './Button.props';
+import type { ButtonProps } from './Button.props';
 import { stylesBuilder } from './stylesBuilder';
 import { tet } from '../../tetrisly';
 import { Loader } from '../Loader';
@@ -67,7 +67,7 @@ export const Button: FC<ButtonProps & MarginProps> = ({
       )}
       {beforeIcon && state !== 'loading' && <Icon name={beforeIcon} />}
       {children}
-      {dropdown && <Icon name="20-chevron-down" />}
+      {dropdown && <Icon name="20-chevron-down-small" />}
       {afterIcon && !dropdown && <Icon name={afterIcon} />}
     </tet.button>
   );

diff --git a/src/components/Button/stylesBuilder/stylesBuilder.test.ts b/src/components/Button/stylesBuilder/stylesBuilder.test.ts
@@ -27,7 +27,7 @@ describe('stylesBuilder', () => {
         boxShadow: '$elevation-bottom-100',
         color: '$color-action-inverted-normal',
         display: 'inline-flex',
-        gap: '$space-component-gap-small',
+        gap: '$space-component-gap-xSmall',
         justifyContent: 'center',
         opacity: {
           disabled: '$opacity-disabled',

diff --git a/src/components/Checkbox/Checkbox.props.ts b/src/components/Checkbox/Checkbox.props.ts
@@ -1,6 +1,7 @@
 import type { InputHTMLAttributes } from 'react';
 
 import type { CheckboxConfig } from './Checkbox.styles';
+import { HelperTextProps } from '../HelperText';
 
 export type CheckboxProps = {
   isChecked?: boolean;
@@ -13,5 +14,11 @@ export type CheckboxProps = {
 > &
   (
     | { label?: string; helperText?: never }
-    | { label: string; helperText?: string }
+    | {
+        label: string;
+        helperText?: Pick<
+          HelperTextProps,
+          'hasBeforeIcon' | 'counter' | 'text'
+        >;
+      }
   );
diff --git a/src/components/Checkbox/Checkbox.stories.tsx b/src/components/Checkbox/Checkbox.stories.tsx
@@ -11,6 +11,14 @@ const meta = {
   title: 'Checkbox',
   component: Checkbox,
   tags: ['autodocs'],
+  argTypes: {
+    state: {
+      control: {
+        type: 'select',
+        options: [undefined, 'disabled', 'alert'],
+      },
+    },
+  },
   parameters: {
     docs: {
       description: {
@@ -34,6 +42,7 @@ export const Default: Story = {};
 export const Checked: Story = {
   args: {
     isChecked: true,
+    onChange: () => {},
   },
 };
 
@@ -87,7 +96,7 @@ export const Alert: Story = {
   args: {
     state: 'alert',
     label: 'Label',
-    helperText: 'Helper text',
+    helperText: { text: 'Helper text' },
   },
 };
 
@@ -100,6 +109,6 @@ export const Label: Story = {
 export const HelperText: Story = {
   args: {
     label: 'Label',
-    helperText: 'Helper text',
+    helperText: { text: 'Helper text' },
   },
 };
diff --git a/src/components/Checkbox/Checkbox.test.tsx b/src/components/Checkbox/Checkbox.test.tsx
@@ -19,16 +19,19 @@ const getCheckbox = (jsx: JSX.Element) => {
 };
 
 describe('Checkbox', () => {
-  customPropTester(<Checkbox label="Label" helperText="Helper Text" />, {
-    containerId: 'checkbox',
-    innerElements: {
-      input: [],
-      checkboxContainer: [],
-      checkboxIcon: [],
-      label: [],
-      helperText: [],
+  customPropTester(
+    <Checkbox label="Label" helperText={{ text: 'Helper Text' }} />,
+    {
+      containerId: 'checkbox',
+      innerElements: {
+        input: [],
+        checkboxContainer: [],
+        checkboxIcon: [],
+        label: [],
+        helperText: [],
+      },
     },
-  });
+  );
 
   beforeEach(() => {
     handleEventMock.mockReset();
@@ -101,7 +104,7 @@ describe('Checkbox', () => {
 
   it('should render helper text if props provided', () => {
     const { label, helperText } = getCheckbox(
-      <Checkbox label="Label" helperText="Helper text" />,
+      <Checkbox label="Label" helperText={{ text: 'Helper text' }} />,
     );
 
     expect(label).toHaveTextContent('Label');