feat: TET-901 selectable pill

src/components/SelectablePill/SelectablePill.props.ts

@@ -0,0 +1,28 @@
+import { HTMLAttributes } from 'react';
+
+import { SelectablePillConfig } from './SelectablePill.styles';
+import { AvatarAppearance } from '../Avatar/types';
+
+import { IconName } from '@/utility-types/IconName';
+
+export type SelectablePillProps = {
+  text: string;
+  prefix?: string;
+  state?: 'default' | 'disabled';
+  isSelected?: boolean;
+  isInverted?: boolean;
+  tabIndex?: number;
+  custom?: SelectablePillConfig;
+  beforeComponent?: BeforeComponentProps;
+  onChange?: (state: boolean) => void;
+} & Omit<HTMLAttributes<HTMLSpanElement>, 'color'>;
+
+type BeforeComponentProps =
+  | {
+      icon: IconName<20>;
+    }
+  | {
+      avatar:
+        | { appearance?: 'image'; image: string }
+        | { appearance: Exclude<AvatarAppearance, 'image'>; initials: string };
+    };

src/components/SelectablePill/SelectablePill.stories.tsx

@@ -0,0 +1,115 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import { SelectablePill } from './SelectablePill';
+
+import { SelectablePillDocs } from '@/docs-components/SelectablePillDocs';
+import { TetDocs } from '@/docs-components/TetDocs';
+
+const meta = {
+  title: 'SelectablePill',
+  component: SelectablePill,
+  tags: ['autodocs'],
+  argTypes: {},
+  args: {
+    state: 'default',
+    text: 'Value',
+  },
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'A compact, rounded indicator used to represent tags, categories, or statuses. Pills often include text and/or icons and can be interactive, such as allowing users to remove a filter or tag.',
+      },
+      page: () => (
+        <TetDocs docs="https://docs.tetrisly.com/components/in-progress/pill">
+          <SelectablePillDocs />
+        </TetDocs>
+      ),
+    },
+  },
+} satisfies Meta<typeof SelectablePill>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    state: 'default',
+  },
+};
+
+export const Disabled: Story = {
+  args: {
+    state: 'disabled',
+  },
+};
+
+export const Selected: Story = {
+  args: {
+    isSelected: true,
+  },
+};
+
+export const Inverted: Story = {
+  args: {
+    isInverted: true,
+  },
+};
+
+export const WithIcon: Story = {
+  args: {
+    beforeComponent: { icon: '20-tree' },
+  },
+};
+
+export const DisabledWithIcon: Story = {
+  args: {
+    state: 'disabled',
+    beforeComponent: { icon: '20-tree' },
+  },
+};
+
+export const WithIconAndPrefix: Story = {
+  args: {
+    prefix: 'Prefix',
+    beforeComponent: { icon: '20-tree' },
+  },
+};
+
+export const SelectedWithIcon: Story = {
+  args: {
+    isSelected: true,
+    beforeComponent: { icon: '20-tree' },
+  },
+};
+
+export const InvertedWithPrefix: Story = {
+  args: {
+    isInverted: true,
+    prefix: 'Prefix',
+  },
+};
+
+export const WithAvatar: Story = {
+  args: {
+    beforeComponent: {
+      avatar: { image: 'https://thispersondoesnotexist.com/' },
+    },
+  },
+};
+
+export const WithAvatarInitialsAndPrefix: Story = {
+  args: {
+    prefix: 'Prefix',
+    beforeComponent: {
+      avatar: { appearance: 'blue', initials: 'M' },
+    },
+  },
+};
+
+export const SelectedWithPrefix: Story = {
+  args: {
+    prefix: 'Prefix',
+    isSelected: true,
+  },
+};

src/components/SelectablePill/SelectablePill.styles.ts

@@ -0,0 +1,131 @@
+import { SelectablePillState } from './SelectablePillState.type';
+
+import { BaseProps } from '@/types';
+
+export type SelectablePillConfig = {
+  isSelected: BaseProps;
+  state?: Partial<
+    Record<SelectablePillState, Record<'primary' | 'inverted', BaseProps>>
+  >;
+  hasIcon?: BaseProps;
+  hasAvatar?: BaseProps;
+  hasPrefix?: BaseProps;
+  innerElements?: {
+    icon?: BaseProps;
+    actionIcon?: BaseProps;
+    prefix?: BaseProps;
+    contentContainer?: Record<'small' | 'xSmall', BaseProps>;
+    textContainer?: BaseProps;
+  };
+} & BaseProps;
+
+export const defaultConfig = {
+  display: 'inline-flex',
+  justifyContent: 'center',
+  alignItems: 'center',
+  textAlign: 'center',
+  whiteSpace: 'nowrap',
+  h: '$size-small',
+  padding: '$space-component-padding-xSmall $space-component-padding-small',
+  pl: '$space-component-padding-medium',
+  gap: '$space-component-gap-small',
+  borderRadius: '$border-radius-large',
+  color: '$color-content-primary',
+  borderWidth: '$border-width-small',
+  borderColor: '$color-transparent',
+  transition: true,
+  transitionDuration: 200,
+  outline: {
+    focus: 'solid',
+  },
+  outlineColor: {
+    _: '$color-interaction-focus-default',
+    focus: '$color-interaction-focus-default',
+  },
+  outlineWidth: {
+    focus: '$border-width-focus',
+  },
+  outlineOffset: 1,
+  hasIcon: {
+    pl: '$space-component-padding-small',
+  },
+  hasPrefix: {
+    pl: '$space-component-padding-medium',
+  },
+  hasAvatar: {
+    pl: '$space-component-padding-xSmall',
+  },
+  isSelected: {
+    backgroundColor: '$color-interaction-background-formField',
+    borderColor: {
+      _: '$color-interaction-border-neutral-normal',
+      hover: '$color-interaction-border-neutral-hover',
+      active: '$color-interaction-border-neutral-active',
+    },
+  },
+  innerElements: {
+    icon: {
+      color: '$color-content-secondary',
+    },
+    actionIcon: {
+      color: '$color-action-neutral-normal',
+    },
+    prefix: {
+      text: '$typo-body-medium',
+      color: '$color-content-secondary',
+    },
+    textContainer: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: '$space-component-gap-xSmall',
+    },
+    contentContainer: {
+      xSmall: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '$space-component-gap-xSmall',
+      },
+      small: {
+        display: 'inline-flex',
+        alignItems: 'center',
+        gap: '$space-component-gap-small',
+      },
+    },
+  },
+  state: {
+    default: {
+      primary: {
+        backgroundColor: {
+          _: '$color-interaction-neutral-subtle-normal',
+          hover: '$color-interaction-neutral-subtle-hover',
+          active: '$color-interaction-neutral-subtle-active',
+        },
+      },
+      inverted: {
+        backgroundColor: '$color-interaction-background-formField',
+        borderColor: {
+          _: '$color-interaction-border-neutral-normal',
+          hover: '$color-interaction-border-neutral-hover',
+          active: '$color-interaction-border-neutral-active',
+        },
+      },
+    },
+    disabled: {
+      primary: {
+        backgroundColor: '$color-interaction-neutral-subtle-normal',
+        opacity: '$opacity-disabled',
+        pointerEvents: 'none',
+      },
+      inverted: {
+        backgroundColor: '$color-interaction-background-formField',
+        borderColor: '$color-interaction-border-neutral-normal',
+        opacity: '$opacity-disabled',
+        pointerEvents: 'none',
+      },
+    },
+  },
+} as const satisfies SelectablePillConfig;
+
+export const selectablePillStyles = {
+  defaultConfig,
+};