Merge remote-tracking branch 'origin/main' into feat/TET-866-tag-input

README.md

@@ -200,16 +200,16 @@ All Tetrisly components have a `custom` prop. It makes it possible to customize
 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:
+For instance, to change background-color of appearance="primary" intent="secondary" variant to pink, just pass
+referenced object structure:
 
 ```jsx
 <Button
   label="Button label"
   appearance="primary"
   intent="success"
   custom={{
-    variants: {
+    default: {
       appearance: {
         primary: {
           intent: {

src/components/Badge/stylesBuilder/stylesBuilder.ts

@@ -3,7 +3,7 @@ import { BadgeAppearance } from '../BadgeAppearance.type';
 import { BadgeEmphasis } from '../BadgeEmphasis.type';
 import { BadgeIntent } from '../BadgeIntent.type';
 
-import { mergeConfigWithCustom } from '@/services/mergeConfigWithCustom/mergeConfigWithCutom';
+import { mergeConfigWithCustom } from '@/services/mergeConfigWithCustom/mergeConfigWithCustom';
 import { BaseProps } from '@/types/BaseProps';
 
 type BadgeStylesBuilder = {

src/components/Button/stylesBuilder/stylesBuilder.ts

@@ -5,7 +5,7 @@ import { defaultConfig } from '../Button.styles';
 import { fallbackKey, mergeConfigWithCustom } from '@/services';
 import { BaseProps } from '@/types/BaseProps';
 
-type ButtonStylesBulderInput = {
+type ButtonStylesBuilderInput = {
   appearance: NonNullable<ButtonProps['appearance']>;
   variant: NonNullable<ButtonProps['variant']>;
   intent: NonNullable<ButtonProps['intent']>;
@@ -23,7 +23,7 @@ type ButtonStylesBuilder = {
 
 const getLoaderProps = (
   loader: object,
-  props: Pick<ButtonStylesBulderInput, 'appearance' | 'intent'>,
+  props: Pick<ButtonStylesBuilderInput, 'appearance' | 'intent'>,
 ) => {
   let loaderProps: Pick<LoaderProps, 'appearance'> = {};
 
@@ -47,7 +47,7 @@ const getLoaderProps = (
 };
 
 export const stylesBuilder = (
-  props: ButtonStylesBulderInput,
+  props: ButtonStylesBuilderInput,
 ): ButtonStylesBuilder => {
   const variants = mergeConfigWithCustom({
     defaultConfig,

src/components/Card/CardFooter/CardFooter.props.ts

@@ -4,6 +4,6 @@ import type { GhostButtonProps } from '@/components/Button/Button.props';
 
 export type CardFooterProps = {
   styles: CardFooterConfig;
-  // TODO: in the future omit the size from the buttonprops
+  // TODO: in the future omit the size from the button props
   actions: GhostButtonProps[];
 };

src/components/Card/CardHeader/CardHeader.props.ts

@@ -10,7 +10,7 @@ export type CardHeaderProps = {
   description?: string;
   beforeComponent?: BeforeComponentProps;
   styles: CardHeaderConfig;
-  // TODO: in the future omit the size from the buttonprops
+  // TODO: in the future omit the size from the button props
   actions?: BareButtonProps[];
 };
 type BeforeComponentProps =

src/components/CornerDialog/CornerDialog.props.ts

@@ -0,0 +1,18 @@
+import type { ReactNode, MouseEvent } from 'react';
+
+import { CornerDialogConfig } from './CornerDialog.styles';
+import { DefaultButtonProps } from '../Button/Button.props';
+
+import { DistributiveOmit } from '@/utility-types/DistributiveOmit';
+
+export type CornerDialogProps = {
+  custom?: CornerDialogConfig;
+  intent?: 'none' | 'warning' | 'negative';
+  title: string;
+  content: ReactNode;
+  actions?: DistributiveOmit<
+    DefaultButtonProps,
+    'size' | 'hasDropdownIndicator'
+  >[];
+  onCloseClick?: (e?: MouseEvent) => void;
+};

src/components/CornerDialog/CornerDialog.stories.tsx

@@ -0,0 +1,170 @@
+import { action } from '@storybook/addon-actions';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { CornerDialog } from './CornerDialog';
+
+import { CornerDialogDocs } from '@/docs-components/CornerDialogDocs';
+import { TetDocs } from '@/docs-components/TetDocs';
+import { tet } from '@/tetrisly';
+
+const meta = {
+  title: 'CornerDialog',
+  component: CornerDialog,
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {
+    intent: 'none',
+    title: 'Corner Dialog',
+    content: 'Description',
+    actions: undefined,
+    onCloseClick: action('onCloseClick'),
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A small, non-intrusive window that appears in the corner of the screen to convey contextual information or prompt user interaction. Often used for hints, tips, or non-essential notifications.',
+      },
+      page: () => (
+        <TetDocs docs="https://docs.tetrisly.com/components/in-progress/cornerdialog">
+          <CornerDialogDocs />
+        </TetDocs>
+      ),
+    },
+  },
+} satisfies Meta<typeof CornerDialog>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    intent: 'none',
+    title: 'Corner Dialog',
+    content: 'Description',
+    actions: [
+      { label: 'Action', onClick: action('onClick') },
+      {
+        label: 'Primary Action',
+        onClick: action('onClick'),
+        appearance: 'primary',
+      },
+    ],
+    onCloseClick: action('onCloseClick'),
+  },
+};
+
+export const Decision: Story = {
+  args: {
+    intent: 'none',
+    title: 'Title',
+    content: 'Description',
+    actions: [
+      { label: 'Cancel', onClick: action('onCancelClick') },
+      {
+        label: 'Accept',
+        onClick: action('onAcceptClick'),
+        appearance: 'primary',
+      },
+    ],
+    onCloseClick: action('onCloseClick'),
+  },
+};
+
+export const Confirmation: Story = {
+  args: {
+    intent: 'none',
+    title: 'Title',
+    content: 'Description',
+    actions: [
+      {
+        label: 'Accept',
+        onClick: action('onAcceptClick'),
+        appearance: 'primary',
+      },
+    ],
+    onCloseClick: undefined,
+  },
+};
+
+export const NegativeWithDestructiveButton: Story = {
+  args: {
+    intent: 'negative',
+    title: 'Title',
+    content: 'Description',
+    actions: [
+      { label: 'Cancel', onClick: action('onCancelClick') },
+      {
+        label: 'Remove',
+        onClick: action('onRemoveClick'),
+        appearance: `primary`,
+        intent: 'destructive',
+      },
+    ],
+    onCloseClick: action('onCloseClick'),
+  },
+};
+
+export const WarningAndAdditionalAction: Story = {
+  args: {
+    intent: 'warning',
+    title: 'Title',
+    content: 'Description',
+    actions: [
+      {
+        label: 'Find out more',
+        onClick: action('onFindOutMoreClick'),
+        custom: {
+          default: {
+            position: 'absolute',
+            left: 0,
+          },
+        },
+      },
+      { label: 'Cancel', onClick: action('onCancelClick') },
+      {
+        label: 'Accept',
+        onClick: action('onAcceptClick'),
+        appearance: 'primary',
+      },
+    ],
+    onCloseClick: action('onCloseClick'),
+    custom: {
+      innerElements: {
+        footer: {
+          position: 'relative',
+        },
+      },
+    },
+  },
+};
+
+export const CustomContent: Story = {
+  args: {
+    intent: 'none',
+    title: 'Corner Dialog with custom content',
+    content: (
+      <tet.div>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit.{' '}
+        <tet.span color="$color-blue-0" fontWeight="$font-weight-600">
+          Morbi pellentesque elit ut sem accumsan, eget maximus erat eleifend.
+        </tet.span>
+        Vestibulum ac tortor nunc.{' '}
+        <tet.span textDecoration="underline">
+          Nam tincidunt nibh eget nulla aliquet, et auctor dui rhoncus. Donec
+          bibendum rhoncus lacus vel scelerisque.
+        </tet.span>
+        Suspendisse feugiat ligula quis eros interdum varius. Ut nec ex est.
+      </tet.div>
+    ),
+    actions: [
+      { label: 'Action', onClick: action('onClick') },
+      {
+        label: 'Primary Action',
+        onClick: action('onClick'),
+        appearance: 'primary',
+      },
+    ],
+    onCloseClick: action('onCloseClick'),
+  },
+};

src/components/CornerDialog/CornerDialog.styles.ts

@@ -0,0 +1,84 @@
+import type { BaseProps } from '@/types/BaseProps';
+
+export type CornerDialogFooterConfig = {
+  actions?: BaseProps;
+} & BaseProps;
+
+export type CornerDialogConfig = BaseProps & {
+  innerElements?: {
+    intentIndicator?: BaseProps;
+    intentWarning?: BaseProps;
+    intentNegative?: BaseProps;
+    body?: BaseProps;
+    header?: BaseProps;
+    headerTitle?: BaseProps;
+    closeButton?: BaseProps;
+    content?: BaseProps;
+    footer?: CornerDialogFooterConfig;
+  };
+};
+
+export const defaultConfig = {
+  display: 'flex',
+  w: 'fit-content',
+  minWidth: '420px',
+  p: '$space-component-padding-2xLarge',
+  flexDirection: 'row',
+  alignItems: 'flex-start',
+  gap: '$space-component-padding-large',
+  borderRadius: '$border-radius-xLarge',
+  bg: '$color-interaction-background-modeless',
+  boxShadow: '$elevation-bottom-300',
+  borderWidth: '$border-width-small',
+  borderStyle: '$border-style-solid',
+  borderColor: '$color-border-defaultA',
+  overflow: 'hidden',
+  innerElements: {
+    intentIndicator: {
+      h: '$size-xSmall',
+      display: 'flex',
+      alignItems: 'flex-end',
+    },
+    intentWarning: {
+      color: '$color-content-warning-secondary',
+    },
+    intentNegative: {
+      color: '$color-content-negative-secondary',
+    },
+    body: {
+      display: 'flex',
+      flexGrow: 1,
+      flexDirection: 'column',
+      justifyContent: 'space-between',
+      gap: '$space-component-padding-large',
+    },
+    header: {
+      display: 'flex',
+      alignSelf: 'stretch',
+      alignItems: 'center',
+    },
+    headerTitle: {
+      display: 'flex',
+      flexGrow: 1,
+      alignItems: 'center',
+      justifyContent: 'space-between',
+      color: '$color-content-primary',
+      text: '$typo-body-strong-large',
+    },
+    closeButton: {},
+    content: {
+      text: '$typo-body-medium',
+      color: '$color-content-secondary',
+    },
+    footer: {
+      display: 'flex',
+      alignSelf: 'stretch',
+      justifyContent: 'flex-end',
+      gap: '$space-component-padding-small',
+    },
+  },
+} as const satisfies CornerDialogConfig;
+
+export const cornerDialogStyles = {
+  defaultConfig,
+};