razorpay · saurabhdaware · Feb 14, 2025
@@ -0,0 +1,55 @@
+import type { StoryFn, Meta } from '@storybook/react';
+import React from 'react';
+import { BaseFilterChip } from './BaseFilterChip';
+import StoryPageWrapper from '~utils/storybook/StoryPageWrapper';
+import { Box } from '~components/Box';
+import { getStyledPropsArgTypes } from '~components/Box/BaseBox/storybookArgTypes';
+
+const Page = (): React.ReactElement => {
+  return (
+    <StoryPageWrapper
+      componentDescription="Chips represents a collection of selectable objects which enable users to make selections, filter content, and trigger relevant actions. Chips can have either single selection or multiple (based on context)."
+      componentName="BaseFilterChip"
+      figmaURL="https://www.figma.com/proto/jubmQL9Z8V7881ayUD95ps/Blade-DSL?type=design&node-id=75272-53870&t=TGcKiXJiozSRKwOG-1&scaling=min-zoom&page-id=52377%3A23885&mode=design"
+    />
+  );
+};
+
+export default {
+  title: 'Components/BaseFilterChip',
+  tags: ['autodocs'],
+  argTypes: getStyledPropsArgTypes(),
+  parameters: {
+    docs: {
+      page: Page,
+    },
+  },
+} as Meta<typeof BaseFilterChip>;
+
+const FilterChipTemplate: StoryFn<typeof BaseFilterChip> = (args) => {
+  return (
+    <Box>
+      <Box display="flex" gap="spacing.4">
+        <BaseFilterChip {...args} />
+        <BaseFilterChip label="Unselected Chip" />
+        <BaseFilterChip
+          label="Phone Numbers"
+          value={['9999999999', '0000000000']}
+          selectionType="multiple"
+        />
+        <BaseFilterChip
+          label="Disabled"
+          value={['9999999999', '0000000000']}
+          selectionType="multiple"
+          isDisabled
+        />
+      </Box>
+    </Box>
+  );
+};
+
+export const Default = FilterChipTemplate.bind({});
+Default.args = {
+  label: 'Date',
+  value: '22/04/1999 - 14/02/2025',
+};
@@ -0,0 +1,138 @@
+import type { CSSObject } from 'styled-components';
+import styled from 'styled-components';
+import { FILTER_CHIP_HEIGHT } from './tokens';
+import type { BaseFilterChipProps } from './types';
+import { Box } from '~components/Box';
+import BaseBox from '~components/Box/BaseBox';
+import { Counter } from '~components/Counter';
+import { Divider } from '~components/Divider';
+import { ChevronDownIcon, CloseIcon } from '~components/Icons';
+import { Text } from '~components/Typography';
+import { makeBorderSize, makeSpace } from '~utils';
+import { getFocusRingStyles } from '~utils/getFocusRingStyles';
+import type { Theme } from '~components/BladeProvider';
+import { getStyledProps } from '~components/Box/styledProps';
+
+const getInteractiveFilterItemStyles = ({ theme }: { theme: Theme }): CSSObject => {
+  return {
+    display: 'flex',
+    height: '100%',
+    alignItems: 'center',
+    border: 'none',
+    cursor: 'pointer',
+    color: 'currentcolor',
+    '&:not([disabled]):hover': {
+      backgroundColor: theme.colors.interactive.background.gray.faded,
+    },
+    '&[disabled]': {
+      cursor: 'not-allowed',
+    },
+    '&:focus-visible': {
+      ...getFocusRingStyles({ theme }),
+      outlineOffset: makeSpace(theme.spacing[1]),
+    },
+  };
+};
+
+const StyledFilterChip = styled(BaseBox)<{ $isSelected?: boolean; $isDisabled?: boolean }>(
+  ({ theme, $isDisabled, $isSelected }) => {
+    return {
+      borderWidth: makeBorderSize(theme.border.width.thin),
+      borderColor: theme.colors.interactive.border.gray[$isDisabled ? 'disabled' : 'highlighted'],
+      height: FILTER_CHIP_HEIGHT,
+      borderRadius: theme.border.radius.max,
+      display: 'flex',
+      borderStyle: $isSelected ? 'solid' : 'dashed',
+      backgroundColor: theme.colors.surface.background.gray.intense,
+      color: theme.colors.interactive.text.gray[$isDisabled ? 'disabled' : 'normal'],
+    };
+  },
+);
+
+const StyledFilterTrigger = styled.button<{ $isSelected?: boolean }>(({ theme, $isSelected }) => {
+  const { spacing } = theme;
+  return {
+    backgroundColor: theme.colors.transparent,
+    borderRadius: $isSelected ? theme.border.radius.none : theme.border.radius.max,
+    borderTopLeftRadius: theme.border.radius.max,
+    borderBottomLeftRadius: theme.border.radius.max,
+    paddingLeft: makeSpace(spacing[4]),
+    paddingRight: $isSelected ? makeSpace(spacing[2]) : makeSpace(spacing[3]),
+    gap: makeSpace(spacing[2]),
+    ...getInteractiveFilterItemStyles({ theme }),
+  };
+});
+
+const StyledFilterCloseButton = styled.button(({ theme }) => {
+  return {
+    backgroundColor: theme.colors.transparent,
+    borderTopRightRadius: theme.border.radius.max,
+    borderBottomRightRadius: theme.border.radius.max,
+    paddingLeft: makeSpace(theme.spacing[2]),
+    paddingRight: makeSpace(theme.spacing[3]),
+    justifyContent: 'center',
+    ...getInteractiveFilterItemStyles({ theme }),
+  };
+});
+
+const renderValue = (
+  selectionType: BaseFilterChipProps['selectionType'],
+  value: BaseFilterChipProps['value'],
+): React.ReactElement => {
+  if (selectionType === 'multiple' && Array.isArray(value)) {
+    return (
+      <Box display="flex" alignItems="center">
+        <Counter value={value.length} color="primary" size="small" />
+      </Box>
+    );
+  }
+
+  return (
+    <Text as="span" size="small" weight="semibold" color="interactive.text.primary.normal">
+      {value}
+    </Text>
+  );
+};
+
+const BaseFilterChip = ({
+  value,
+  onClearButtonClick,
+  label,
+  isDisabled,
+  selectionType = 'single',
+  ...rest
+}: BaseFilterChipProps): React.ReactElement => {
+  const isSelected = Boolean(value) && !isDisabled;
+
+  return (
+    <StyledFilterChip $isDisabled={isDisabled} $isSelected={isSelected} {...getStyledProps(rest)}>
+      <StyledFilterTrigger $isSelected={isSelected} disabled={isDisabled}>
+        <Box display="flex" gap="spacing.2" whiteSpace="nowrap">
+          <Text size="small" weight="medium" color="currentColor" truncateAfterLines={1}>
+            {label}
+            {isSelected ? ':' : null}
+          </Text>
+          {isSelected ? renderValue(selectionType, value) : null}
+        </Box>
+        <Box display="flex" alignItems="center" paddingRight="spacing.1">
+          <ChevronDownIcon size="small" color="currentColor" />
+        </Box>
+      </StyledFilterTrigger>
+      {isSelected ? (
+        <>
+          <Divider orientation="vertical" variant={isDisabled ? 'muted' : 'subtle'} />
+          <StyledFilterCloseButton
+            aria-label={`Clear ${label} value`}
+            // value can never be undefined because when it's undefined the button itself doesn't render
+            onClick={() => onClearButtonClick?.({ value: value ?? '' })}
+            disabled={isDisabled}
+          >
+            <CloseIcon size="small" color="currentColor" />
+          </StyledFilterCloseButton>
+        </>
+      ) : null}
+    </StyledFilterChip>
+  );
+};
+
+export { BaseFilterChip };
@@ -0,0 +1,6 @@
+import { size } from '~tokens/global';
+import { makeSize } from '~utils';
+
+const FILTER_CHIP_HEIGHT = makeSize(size['28']);
+
+export { FILTER_CHIP_HEIGHT };
@@ -0,0 +1,36 @@
+import type { StyledPropsBlade } from '~components/Box/styledProps';
+
+type BaseFilterChipProps = {
+  /**
+   * Controlled value of FilterChip.
+   *
+   * FilterChip is always a controlled component since selected state of it comes from other components like Menu, Dropdown.
+   */
+  value?: string | string[];
+
+  /**
+   * Change handler when FilterChip's value is cleared
+   */
+  onClearButtonClick?: ({ value }: { value: string | string[] }) => void;
+
+  /**
+   * Children. Title of the Chip
+   */
+  label: string;
+
+  /**
+   * Disabled state for Chip
+   */
+  isDisabled?: boolean;
+
+  /**
+   * Type of selection.
+   *
+   * When set to multiple, length of selections is rendered inside counter
+   *
+   * When using inside Dropdown, this prop is internally taken from Dropdown.
+   */
+  selectionType?: 'single' | 'multiple';
+} & StyledPropsBlade;
+
+export type { BaseFilterChipProps };