feat(QuickFilter): add QuickFilter component (#2546)

* feat: quick filter base

* chore: remove onClick

* chore: remove trailing element

* chore: quick filter changes

* chore: more fixes

* chore: added tests

* chore: add support for test id and meta attributes

* chore: change type of quick filter card

* chore: change type

* chore: update snap

* chore: update story

* chore: set state empty

* chore: update example

* chore: update snap , stories

* chore: add changeset

* chore: minor changes

* chore: change chageset

* refactor: quickfilter name

* refactor: onChange

* refactor: context

* chore: remove attributes

* chore: change trailingElement to trailing

* chore: remove quick filters

* chore: make api similar to quick filters

* chore: added name

* chore: update tests

* chore: more refactor

* chore: make api similar and update docs

* chore: export quick filter

* chore: update snaps and remove baseBox and other functions

* chore: remove blade common events

* fix: build

Author: tewarig

.changeset/real-dodos-pull.md

@@ -0,0 +1,5 @@
+---
+'@razorpay/blade': minor
+---
+
+feat(QuickFilter): Add QuickFilters component

packages/blade/src/components/QuickFilters/QuickFilter.tsx

@@ -0,0 +1,87 @@
+import React, { forwardRef } from 'react';
+import type { QuickFilterProps, QuickFilterContentProps } from './types';
+import { useQuickFilterGroupContext } from './QuickFilterGroup';
+import { Card, CardBody } from '~components/Card';
+import { Box } from '~components/Box';
+import { Text } from '~components/Typography';
+import { Radio } from '~components/Radio';
+import { Checkbox } from '~components/Checkbox';
+import { makeAnalyticsAttribute } from '~utils/makeAnalyticsAttribute';
+import { metaAttribute } from '~utils/metaAttribute';
+import BaseBox from '~components/Box/BaseBox';
+import type { BladeElementRef } from '~utils/types';
+
+const QuickFilterContent = ({
+  value,
+  title,
+  trailing,
+  selectionType = 'single',
+  isSelected = false,
+}: QuickFilterContentProps): React.ReactElement => {
+  return (
+    <BaseBox
+      display="flex"
+      flexDirection="row"
+      gap="spacing.3"
+      width="fit-content"
+      justifyContent="center"
+      alignItems="center"
+      paddingY="spacing.3"
+      paddingLeft="spacing.3"
+      paddingRight="spacing.4"
+    >
+      <Box
+        display="flex"
+        flexDirection="row"
+        gap="spacing.2"
+        justifyContent="center"
+        alignItems="center"
+      >
+        {selectionType === 'single' ? <Radio value={value} /> : <Checkbox value={value} />}
+        <Text
+          variant="body"
+          size="medium"
+          color={isSelected ? 'interactive.text.primary.subtle' : 'interactive.text.gray.subtle'}
+          weight="medium"
+        >
+          {title}
+        </Text>
+      </Box>
+
+      {trailing}
+    </BaseBox>
+  );
+};
+
+const QuickFilter = forwardRef<BladeElementRef, QuickFilterProps>(
+  ({ title, value, trailing, testID, ...rest }, ref): React.ReactElement => {
+    const { selectedQuickFilters, selectionType } = useQuickFilterGroupContext();
+
+    const isQuickFilterSelected = selectedQuickFilters.includes(value);
+    return (
+      <Card
+        padding="spacing.0"
+        as="label"
+        accessibilityLabel={title}
+        borderRadius="medium"
+        elevation="none"
+        isSelected={isQuickFilterSelected}
+        ref={ref}
+        {...makeAnalyticsAttribute(rest)}
+        {...metaAttribute({ testID })}
+      >
+        <CardBody>
+          <QuickFilterContent
+            value={value}
+            title={title}
+            trailing={trailing}
+            selectionType={selectionType}
+            isSelected={isQuickFilterSelected}
+            {...rest}
+          />
+        </CardBody>
+      </Card>
+    );
+  },
+);
+export { QuickFilter };

packages/blade/src/components/QuickFilters/QuickFilterGroup/QuickFilterContext.tsx

@@ -0,0 +1,15 @@
+import React from 'react';
+import type { QuickFilterGroupContextType } from '../types';
+
+const QuickFilterGroupContext = React.createContext<QuickFilterGroupContextType>({
+  selectionType: 'single',
+  selectedQuickFilters: [],
+});
+const QuickFilterGroupProvider = QuickFilterGroupContext.Provider;
+
+const useQuickFilterGroupContext = (): QuickFilterGroupContextType => {
+  const context = React.useContext(QuickFilterGroupContext);
+  return context;
+};
+
+export { useQuickFilterGroupContext, QuickFilterGroupProvider };

packages/blade/src/components/QuickFilters/QuickFilterGroup/QuickFilterGroup.tsx

@@ -0,0 +1,80 @@
+import React from 'react';
+import type { QuickFilterGroupProps, QuickFilterWrapperProps } from '../types';
+import { QuickFilterGroupProvider, useQuickFilterGroupContext } from './QuickFilterContext';
+import { RadioGroup } from '~components/Radio';
+import BaseBox from '~components/Box/BaseBox';
+import { CheckboxGroup } from '~components/Checkbox';
+import { useControllableState } from '~utils/useControllable';
+import { useId } from '~utils/useId';
+
+const QuickFilterWrapper = ({
+  children,
+  onChange,
+  setSelectedQuickFilters,
+  ...rest
+}: QuickFilterWrapperProps): React.ReactElement => {
+  const { selectedQuickFilters, selectionType } = useQuickFilterGroupContext();
+
+  if (selectionType === 'single') {
+    return (
+      <RadioGroup
+        value={selectedQuickFilters[0]}
+        onChange={({ value }) => {
+          setSelectedQuickFilters(() => [value]);
+        }}
+        size="small"
+        {...rest}
+      >
+        {children}
+      </RadioGroup>
+    );
+  }
+  return (
+    <CheckboxGroup
+      value={selectedQuickFilters}
+      onChange={({ values }) => {
+        setSelectedQuickFilters(() => values);
+      }}
+      size="small"
+      {...rest}
+    >
+      {children}
+    </CheckboxGroup>
+  );
+};
+
+const QuickFilterGroup = ({
+  children,
+  testID,
+  value,
+  defaultValue,
+  onChange,
+  name,
+  selectionType,
+  ...rest
+}: QuickFilterGroupProps): React.ReactElement => {
+  const idBase = useId('quick-filter-group');
+  const [selectedQuickFilters, setSelectedQuickFilters] = useControllableState({
+    value: (value && selectionType === 'single' ? [value] : value) as string[] | undefined,
+    // If selectionType is single, we need to convert the value to an array
+    defaultValue: (defaultValue && selectionType === 'single'
+      ? [defaultValue]
+      : defaultValue ?? []) as string[] | undefined,
+    onChange: (values: string[]) => onChange?.({ values, name: name ?? idBase }),
+  });
+  return (
+    <QuickFilterGroupProvider value={{ selectionType, selectedQuickFilters }}>
+      <QuickFilterWrapper
+        onChange={onChange}
+        setSelectedQuickFilters={setSelectedQuickFilters}
+        {...rest}
+      >
+        <BaseBox display="flex" flexDirection="row" gap="spacing.3">
+          {children}
+        </BaseBox>
+      </QuickFilterWrapper>
+    </QuickFilterGroupProvider>
+  );
+};
+
+export { QuickFilterGroup };

packages/blade/src/components/QuickFilters/QuickFilterGroup/index.tsx

@@ -0,0 +1,2 @@
+export { QuickFilterGroup } from './QuickFilterGroup';
+export { useQuickFilterGroupContext, QuickFilterGroupProvider } from './QuickFilterContext';