diff --git a/package.json b/package.json index 44d6876f..4d69a103 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "@kubit-ui-web/react-components", - "version": "1.9.0", + "version": "1.10.0", "description": "Kubit React Components is a customizable, accessible library of React web components, designed to enhance your application's user experience", "author": { "name": "Kubit", @@ -111,8 +111,8 @@ "@types/react-dom": "^18.3.0", "@types/styled-components": "^5.1.34", "@types/ungap__structured-clone": "^1.2.0", - "@typescript-eslint/eslint-plugin": "^8.0.0", - "@typescript-eslint/parser": "^8.0.0", + "@typescript-eslint/eslint-plugin": "^8.0.1", + "@typescript-eslint/parser": "^8.0.1", "@ungap/structured-clone": "^1.2.0", "@vitejs/plugin-react": "^4.3.1", "babel-jest": "^29.7.0", @@ -127,7 +127,7 @@ "eslint-plugin-n": "^17.10.2", "eslint-plugin-node": "^11.1.0", "eslint-plugin-prettier": "5.2.1", - "eslint-plugin-promise": "^7.0.0", + "eslint-plugin-promise": "^7.1.0", "eslint-plugin-react": "^7.35.0", "eslint-plugin-react-hooks": "^4.6.2", "eslint-plugin-react-refresh": "^0.4.9", diff --git a/src/components/accordion/accordion.styled.ts b/src/components/accordion/accordion.styled.ts index f684e98c..f69b3b86 100644 --- a/src/components/accordion/accordion.styled.ts +++ b/src/components/accordion/accordion.styled.ts @@ -32,9 +32,10 @@ export const AccordionHeaderMainContainerStyled = styled.div` ${props => getStyles(props.styles)} `; -export const AccordionHeaderTitleHeadlineStyled = styled.span` +export const AccordionHeaderTitleHeadlineStyled = styled.span` display: flex; width: 100%; + ${props => getStyles(props.styles)} `; export const AccordionTitleStyled = styled.span` diff --git a/src/components/accordion/accordionStandAlone.tsx b/src/components/accordion/accordionStandAlone.tsx index 3ba9db72..2c4742c6 100644 --- a/src/components/accordion/accordionStandAlone.tsx +++ b/src/components/accordion/accordionStandAlone.tsx @@ -58,7 +58,10 @@ const AccordionStandAloneComponent = ( styles={props.styles.headerInternalContainer} > - + ReturnType; +/** + * @deprecated Try the new PillSelectorV2 component + */ export { PillSelectorControlled }; diff --git a/src/components/pillSelector/pillSelectorUnControlled.tsx b/src/components/pillSelector/pillSelectorUnControlled.tsx index 8e90ac0d..4bfe35a2 100644 --- a/src/components/pillSelector/pillSelectorUnControlled.tsx +++ b/src/components/pillSelector/pillSelectorUnControlled.tsx @@ -45,4 +45,7 @@ const PillSelectorUnControlled = React.forwardRef(PillSelectorUnControlledCompon } ) => ReturnType; +/** + * @deprecated Try the new PillSelectorV2 component + */ export { PillSelectorUnControlled }; diff --git a/src/components/pillSelectorV2/__tests__/pillSelector.test.tsx b/src/components/pillSelectorV2/__tests__/pillSelector.test.tsx new file mode 100644 index 00000000..f59ef584 --- /dev/null +++ b/src/components/pillSelectorV2/__tests__/pillSelector.test.tsx @@ -0,0 +1,165 @@ +import { screen } from '@testing-library/react'; +import * as React from 'react'; + +import { axe } from 'jest-axe'; + +import { ICONS } from '@/assets'; +import { + PillSelectorSizeTypeV2, + PillSelectorVariantTypeV2, +} from '@/designSystem/kubit/components/variants'; +import { renderProvider } from '@/tests/renderProvider/renderProvider.utility'; +import { ROLES } from '@/types'; + +import { PillSelectorControlled } from '../pillSelectorControlled'; +import { PillSelectorUnControlled } from '../pillSelectorUnControlled'; +import { IPillSelectorControlled, IPillSelectorUnControlled, PillSelectorType } from '../types'; + +const mockProps: IPillSelectorUnControlled = { + variant: PillSelectorVariantTypeV2.DEFAULT, + size: PillSelectorSizeTypeV2.LARGE, + pills: [ + { label: { content: 'Pill 1' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 1' }, + { label: { content: 'Pill 2 ' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 2' }, + { label: { content: 'Pill 3' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 3' }, + { label: { content: 'Pill 4' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 4' }, + ], +}; + +describe('PillSelectorUncontrolled', () => { + it('Should render a set of pills, by default pill type is input checkbox (PillSelectorType.SELECTOR_MULTIPLE)', async () => { + const { container } = renderProvider(); + + const pills = screen.getAllByRole(ROLES.CHECKBOX); + expect(pills).toHaveLength(mockProps.pills?.length as number); + + const results = await axe(container); + expect(container).toHTMLValidate(); + expect(results).toHaveNoViolations(); + }); + + it('When SELECTOR_SIMPLE, pills are render as checkbox', async () => { + const { container } = renderProvider( + + ); + + const pills = screen.getAllByRole(ROLES.RADIO); + expect(pills).toHaveLength(mockProps.pills?.length as number); + + const results = await axe(container); + expect(container).toHTMLValidate(); + expect(results).toHaveNoViolations(); + }); + + it('Size prop is optional', () => { + const { size, ...restMockProps } = mockProps; + renderProvider(); + + const pills = screen.getAllByRole(ROLES.CHECKBOX); + expect(pills).toHaveLength(mockProps.pills?.length as number); + }); + + it('When SELECTOR_MULTIPLE, value should be an array of the value of the selected options', () => { + const value = [mockProps.pills?.[0].value as string]; + renderProvider(); + + const pills = screen.getAllByRole(ROLES.CHECKBOX); + expect(pills[0]).toBeChecked(); + }); + + it('When SELECTOR_SIMPLE, value should be a value from the values of the selected options', () => { + const value = mockProps.pills?.[0].value as string; + renderProvider( + + ); + + const pills = screen.getAllByRole(ROLES.RADIO); + expect(pills[0]).toBeChecked(); + }); + + it('When SELECTOR_MULTIPLE, onChange should return an array of the value of the selected options', () => { + const value = [mockProps.pills?.[0].value as string]; + const handleChange = jest.fn(); + renderProvider(); + + const pills = screen.getAllByRole(ROLES.CHECKBOX); + pills[0].click(); + expect(handleChange).toHaveBeenCalledWith(value); + }); + + it('When SELECTOR_MULTIPLE, onChange should return an array of the value of the selected options, if it is already selected it should be removed', () => { + const value = [mockProps.pills?.[0].value as string]; + const handleChange = jest.fn(); + renderProvider( + + ); + + const pills = screen.getAllByRole(ROLES.CHECKBOX); + pills[0].click(); + expect(handleChange).toHaveBeenCalledWith([]); + }); + + it('When SELECTOR_MULTIPLE, onChange should return an array of the value of the selected options, if it not is already selected it should be added', () => { + const value = [mockProps.pills?.[0].value as string]; + const handleChange = jest.fn(); + renderProvider( + + ); + + const pills = screen.getAllByRole(ROLES.CHECKBOX); + pills[1].click(); + expect(handleChange).toHaveBeenCalledWith([ + mockProps.pills?.[0].value as string, + mockProps.pills?.[1].value as string, + ]); + }); + + it('When SELECTOR_SIMPLE, onChange should return a value from the values of the selected options', () => { + const value = mockProps.pills?.[0].value as string; + const handleChange = jest.fn(); + renderProvider( + + ); + + const pills = screen.getAllByRole(ROLES.RADIO); + pills[0].click(); + expect(handleChange).toHaveBeenCalledWith(value); + }); +}); + +const mockPropsControlled: IPillSelectorControlled = { + variant: PillSelectorVariantTypeV2.DEFAULT, + size: PillSelectorSizeTypeV2.LARGE, + pills: [ + { label: { content: 'Pill 1' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 1' }, + { label: { content: 'Pill 2 ' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 2' }, + { label: { content: 'Pill 3' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 3' }, + { label: { content: 'Pill 4' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 4' }, + ], +}; + +describe('PillSelectorcontrolled', () => { + it('Should render a set of pills, by default pill type is input checkbox (PillSelectorType.SELECTOR_MULTIPLE)', () => { + renderProvider(); + + const pills = screen.getAllByRole(ROLES.CHECKBOX); + expect(pills).toHaveLength(mockProps.pills?.length as number); + }); + + it('If onChange is not passed, when pressing over a pill it will not trigger any action', () => { + renderProvider(); + + const pills = screen.getAllByRole(ROLES.CHECKBOX); + pills[0].click(); + + expect(pills[0]).not.toBeChecked(); + }); +}); diff --git a/src/components/pillSelectorV2/index.ts b/src/components/pillSelectorV2/index.ts new file mode 100644 index 00000000..bdd4f75c --- /dev/null +++ b/src/components/pillSelectorV2/index.ts @@ -0,0 +1,13 @@ +export type { + PillSelectorPillType as PillSelectorPillTypeV2, + PillSelectorValueType as PillSelectorValueTypeV2, + IPillSelectorUnControlled as IPillSelectorV2, + IPillSelectorControlled as IPillSelectorControlledV2, + PillSelectorPropsStylesType as PillSelectorPropsStylesTypeV2, + PillSelectorStylesType as PillSelectorStylesTypeV2, +} from './types'; + +export { PillSelectorType as PillSelectorTypeV2 } from './types/pillSelectorType'; + +export { PillSelectorUnControlled as PillSelectorV2 } from './pillSelectorUnControlled'; +export { PillSelectorControlled as PillSelectorControlledV2 } from './pillSelectorControlled'; diff --git a/src/components/pillSelectorV2/pillSelector.styled.ts b/src/components/pillSelectorV2/pillSelector.styled.ts new file mode 100644 index 00000000..02b441dd --- /dev/null +++ b/src/components/pillSelectorV2/pillSelector.styled.ts @@ -0,0 +1,11 @@ +import styled from 'styled-components'; + +import { getStyles } from '@/utils'; + +import { PillSelectorPropsStylesType } from './types'; + +export const RootContainerStyled = styled.div<{ + styles?: PillSelectorPropsStylesType; +}>` + ${({ styles }) => getStyles(styles?.rootContainer)}; +`; diff --git a/src/components/pillSelectorV2/pillSelectorControlled.tsx b/src/components/pillSelectorV2/pillSelectorControlled.tsx new file mode 100644 index 00000000..71731385 --- /dev/null +++ b/src/components/pillSelectorV2/pillSelectorControlled.tsx @@ -0,0 +1,65 @@ +import * as React from 'react'; + +import { STYLES_NAME } from '@/constants'; +import { useStylesV2 } from '@/hooks'; + +import { PillSelectorStandAlone } from './pillSelectorStandAlone'; +import { + IPillSelectorControlled, + PillSelectorType, + PillSelectorVariantPropsStylesType, +} from './types'; + +const PillSelectorControlledComponent = ( + { + variant, + size, + ctv, + type = PillSelectorType.SELECTOR_MULTIPLE, + ...props + }: IPillSelectorControlled, + ref: React.ForwardedRef +) => { + const variantStyles = useStylesV2({ + styleName: STYLES_NAME.PILL_SELECTOR_V2, + variantName: variant, + customTokens: ctv, + isOptional: true, + }); + + // Size prop is optional, else select the first size from the variantStyles + const styles = size ? variantStyles?.[size] : variantStyles?.[Object.keys(variantStyles)[0]]; + + const handlePillChange = (event: React.ChangeEvent) => { + if (!props.onChange) { + return; + } + if (type === PillSelectorType.SELECTOR_SIMPLE) { + props.onChange(event.target.value); + return; + } + // SELECTOR MULTIPLE + if (Array.isArray(props.value)) { + const valueIncluded = props.value.includes(event.target.value); + const newValue = valueIncluded + ? props.value.filter(v => v !== event.target.value) + : [...props.value, event.target.value]; + props.onChange(newValue); + return; + } + // When value === undefined or value is not array + props.onChange([event.target.value]); + }; + + return ( + + ); +}; + +export const PillSelectorControlled = React.forwardRef(PillSelectorControlledComponent); diff --git a/src/components/pillSelectorV2/pillSelectorStandAlone.tsx b/src/components/pillSelectorV2/pillSelectorStandAlone.tsx new file mode 100644 index 00000000..2ff32fd9 --- /dev/null +++ b/src/components/pillSelectorV2/pillSelectorStandAlone.tsx @@ -0,0 +1,47 @@ +import * as React from 'react'; + +import { PillTypeV2, PillV2 } from '@/components/pillV2'; + +import { RootContainerStyled } from './pillSelector.styled'; +import { IPillSelectorStandAlone, PillSelectorType } from './types'; + +const PillSelectorStandAloneComponent = ( + { dataTestId = 'pillSelector', ...props }: IPillSelectorStandAlone, + ref: React.ForwardedRef | undefined | null +): JSX.Element => { + return ( + + {props.pills?.map((pill, index) => { + const selected = + props.type === PillSelectorType.SELECTOR_MULTIPLE + ? pill.value !== undefined && + Array.isArray(props.value) && + props.value.includes(pill.value) + : pill.value === props.value; + return ( + + ); + })} + + ); +}; + +export const PillSelectorStandAlone = React.forwardRef(PillSelectorStandAloneComponent); diff --git a/src/components/pillSelectorV2/pillSelectorUnControlled.tsx b/src/components/pillSelectorV2/pillSelectorUnControlled.tsx new file mode 100644 index 00000000..d3718e11 --- /dev/null +++ b/src/components/pillSelectorV2/pillSelectorUnControlled.tsx @@ -0,0 +1,33 @@ +import * as React from 'react'; + +import { PillSelectorControlled } from './pillSelectorControlled'; +import { IPillSelectorUnControlled, PillSelectorType } from './types'; + +const PillSelectorUnControlledComponent = ( + { + type = PillSelectorType.SELECTOR_MULTIPLE, + defaultValue, + onChange, + ...props + }: IPillSelectorUnControlled, + ref: React.ForwardedRef +) => { + const [value, setValue] = React.useState(defaultValue); + + const handleChange = (newValue: string | number | Array) => { + setValue(newValue); + onChange?.(newValue); + }; + + return ( + + ); +}; + +export const PillSelectorUnControlled = React.forwardRef(PillSelectorUnControlledComponent); diff --git a/src/components/pillSelectorV2/stories/argtypes.ts b/src/components/pillSelectorV2/stories/argtypes.ts new file mode 100644 index 00000000..4501c414 --- /dev/null +++ b/src/components/pillSelectorV2/stories/argtypes.ts @@ -0,0 +1,138 @@ +import { CATEGORY_CONTROL } from '@/constants/categoryControl'; +import { IThemeObjectVariants } from '@/designSystem/themesObject'; +import { ArgTypesReturn } from '@/types'; + +import { PillSelectorType } from '../types'; + +export const argtypes = ( + variantsObject: IThemeObjectVariants, + themeSelected: string +): ArgTypesReturn => { + return { + variant: { + description: 'Variant', + type: { name: 'string', required: true }, + control: { type: 'select' }, + options: Object.keys(variantsObject[themeSelected].PillSelectorVariantTypeV2 || {}), + table: { + type: { + summary: 'string', + }, + category: CATEGORY_CONTROL.MODIFIERS, + }, + }, + size: { + description: 'Size', + type: { name: 'string' }, + control: { type: 'select' }, + options: Object.keys(variantsObject[themeSelected].PillSelectorSizeTypeV2 || {}), + table: { + type: { + summary: 'string', + }, + category: CATEGORY_CONTROL.MODIFIERS, + }, + }, + type: { + description: 'Indicates whether the pills behaves as a input radio or checkbox', + type: { name: 'string' }, + control: { type: 'select' }, + options: Object.keys(PillSelectorType), + table: { + type: { + summary: 'PillSelectorType', + }, + defaultValue: { + summary: PillSelectorType.SELECTOR_MULTIPLE, + }, + category: CATEGORY_CONTROL.MODIFIERS, + }, + }, + pills: { + description: 'Pills', + type: { name: 'array' }, + table: { + type: { + summary: 'PillSelectorPillType[]', + }, + category: CATEGORY_CONTROL.CONTENT, + }, + }, + selectedIcon: { + description: 'Icon to show when the pill is selected', + type: { name: 'object' }, + table: { + type: { + summary: 'IElementOrIcon', + }, + category: CATEGORY_CONTROL.CONTENT, + }, + }, + defaultValue: { + description: + 'When type PillSelectorType.SELECTOR_SIMPLE, should be an array of string | number, when type PillSelectorType.SELECTOR_MULTIPLE should be a string | number', + type: { name: 'object' }, + table: { + type: { + summary: 'PillSelectorValueType', + }, + category: CATEGORY_CONTROL.MODIFIERS, + }, + }, + name: { + description: 'Name of the inner inputs', + type: { name: 'string' }, + table: { + type: { + summary: 'string', + }, + category: CATEGORY_CONTROL.MODIFIERS, + }, + }, + disabled: { + description: 'Indicates all the pills are disabled', + type: { name: 'boolean' }, + control: { type: 'boolean' }, + table: { + type: { + summary: 'boolean', + }, + category: CATEGORY_CONTROL.MODIFIERS, + }, + }, + onChange: { + description: + 'On change function, when type PillSelectorType.SELECTOR_SIMPLE, should return an array of string | number, when type PillSelectorType.SELECTOR_MULTIPLE should return a string | number', + type: { name: 'function' }, + control: false, + table: { + type: { + summary: '(value: PillSelectorValueType) => void', + }, + category: CATEGORY_CONTROL.FUNCTIONS, + }, + }, + dataTestId: { + description: 'Test id', + type: { name: 'string' }, + table: { + type: { + summary: 'string', + }, + defaultValue: { summary: 'segmentedControl' }, + category: CATEGORY_CONTROL.TESTING, + }, + }, + ctv: { + description: 'Object used for update variant styles', + type: { name: 'object' }, + control: { type: 'object' }, + table: { + type: { + summary: 'object', + }, + category: CATEGORY_CONTROL.CUSTOMIZATION, + }, + }, + }; +}; diff --git a/src/components/pillSelectorV2/stories/controlled/argtypes.ts b/src/components/pillSelectorV2/stories/controlled/argtypes.ts new file mode 100644 index 00000000..f89112ec --- /dev/null +++ b/src/components/pillSelectorV2/stories/controlled/argtypes.ts @@ -0,0 +1,138 @@ +import { CATEGORY_CONTROL } from '@/constants/categoryControl'; +import { IThemeObjectVariants } from '@/designSystem/themesObject'; +import { ArgTypesReturn } from '@/types'; + +import { PillSelectorType } from '../../types'; + +export const argtypes = ( + variantsObject: IThemeObjectVariants, + themeSelected: string +): ArgTypesReturn => { + return { + variant: { + description: 'Variant', + type: { name: 'string', required: true }, + control: { type: 'select' }, + options: Object.keys(variantsObject[themeSelected].PillSelectorVariantTypeV2 || {}), + table: { + type: { + summary: 'string', + }, + category: CATEGORY_CONTROL.MODIFIERS, + }, + }, + size: { + description: 'Size', + type: { name: 'string' }, + control: { type: 'select' }, + options: Object.keys(variantsObject[themeSelected].PillSelectorSizeTypeV2 || {}), + table: { + type: { + summary: 'string', + }, + category: CATEGORY_CONTROL.MODIFIERS, + }, + }, + type: { + description: 'Indicates whether the pills behaves as a input radio or checkbox', + type: { name: 'string' }, + control: { type: 'select' }, + options: Object.keys(PillSelectorType), + table: { + type: { + summary: 'PillSelectorType', + }, + defaultValue: { + summary: PillSelectorType.SELECTOR_MULTIPLE, + }, + category: CATEGORY_CONTROL.MODIFIERS, + }, + }, + pills: { + description: 'Pills', + type: { name: 'array' }, + table: { + type: { + summary: 'PillSelectorPillType[]', + }, + category: CATEGORY_CONTROL.CONTENT, + }, + }, + selectedIcon: { + description: 'Icon to show when the pill is selected', + type: { name: 'object' }, + table: { + type: { + summary: 'IElementOrIcon', + }, + category: CATEGORY_CONTROL.CONTENT, + }, + }, + value: { + description: + 'When type PillSelectorType.SELECTOR_SIMPLE, should be an array of string | number, when type PillSelectorType.SELECTOR_MULTIPLE should be a string | number', + type: { name: 'object' }, + table: { + type: { + summary: 'PillSelectorValueType', + }, + category: CATEGORY_CONTROL.MODIFIERS, + }, + }, + name: { + description: 'Name of the inner inputs', + type: { name: 'string' }, + table: { + type: { + summary: 'string', + }, + category: CATEGORY_CONTROL.MODIFIERS, + }, + }, + disabled: { + description: 'Indicates all the pills are disabled', + type: { name: 'boolean' }, + control: { type: 'boolean' }, + table: { + type: { + summary: 'boolean', + }, + category: CATEGORY_CONTROL.MODIFIERS, + }, + }, + onChange: { + description: + 'On change function, when type PillSelectorType.SELECTOR_SIMPLE, should return an array of string | number, when type PillSelectorType.SELECTOR_MULTIPLE should return a string | number', + type: { name: 'function' }, + control: false, + table: { + type: { + summary: '(value: PillSelectorValueType) => void', + }, + category: CATEGORY_CONTROL.FUNCTIONS, + }, + }, + dataTestId: { + description: 'Test id', + type: { name: 'string' }, + table: { + type: { + summary: 'string', + }, + defaultValue: { summary: 'segmentedControl' }, + category: CATEGORY_CONTROL.TESTING, + }, + }, + ctv: { + description: 'Object used for update variant styles', + type: { name: 'object' }, + control: { type: 'object' }, + table: { + type: { + summary: 'object', + }, + category: CATEGORY_CONTROL.CUSTOMIZATION, + }, + }, + }; +}; diff --git a/src/components/pillSelectorV2/stories/controlled/pillSelector.stories.tsx b/src/components/pillSelectorV2/stories/controlled/pillSelector.stories.tsx new file mode 100644 index 00000000..41422927 --- /dev/null +++ b/src/components/pillSelectorV2/stories/controlled/pillSelector.stories.tsx @@ -0,0 +1,46 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { ICONS } from '@/assets'; +import { STYLES_NAME } from '@/constants'; +import { themesObject, variantsObject } from '@/designSystem/themesObject'; + +import { PillSelectorControlled as Story } from '../../pillSelectorControlled'; +import { IPillSelectorControlled } from '../../types'; +import { argtypes } from './argtypes'; + +const themeSelected = localStorage.getItem('themeSelected') || 'kubit'; + +const meta = { + title: 'Components/Forms/PillSelectorV2/Controlled', + component: Story, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], + argTypes: argtypes(variantsObject, themeSelected), +} satisfies Meta; + +export default meta; + +type Story = StoryObj & { args: { themeArgs?: object } }; + +const commonPillSelectorProps: IPillSelectorControlled = { + variant: Object.values( + variantsObject[themeSelected].PillSelectorVariantTypeV2 || {} + )[0] as string, + pills: [ + { label: { content: 'Pill 1' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 1' }, + { label: { content: 'Pill 2 ' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 2' }, + { label: { content: 'Pill 3' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 3' }, + { label: { content: 'Pill 4' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 4' }, + ], + value: ['value 2'], + selectedIcon: { icon: ICONS.ICON_PLACEHOLDER }, +}; + +export const PillSelector: Story = { + args: { + ...commonPillSelectorProps, + themeArgs: themesObject[themeSelected][STYLES_NAME.PILL_V2], + }, +}; diff --git a/src/components/pillSelectorV2/stories/pillSelector.stories.tsx b/src/components/pillSelectorV2/stories/pillSelector.stories.tsx new file mode 100644 index 00000000..3d50190e --- /dev/null +++ b/src/components/pillSelectorV2/stories/pillSelector.stories.tsx @@ -0,0 +1,61 @@ +import type { Meta, StoryObj } from '@storybook/react'; + +import { ICONS } from '@/assets'; +import { STYLES_NAME } from '@/constants'; +import { PillSizeTypeV2 } from '@/designSystem/kubit/components/variants'; +import { themesObject, variantsObject } from '@/designSystem/themesObject'; + +import { PillSelectorUnControlled as Story } from '../pillSelectorUnControlled'; +import { IPillSelectorUnControlled } from '../types'; +import { argtypes } from './argtypes'; + +const themeSelected = localStorage.getItem('themeSelected') || 'kubit'; + +const meta = { + title: 'Components/Forms/PillSelectorV2', + component: Story, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], + argTypes: argtypes(variantsObject, themeSelected), +} satisfies Meta; + +export default meta; + +type Story = StoryObj & { args: { themeArgs?: object } }; + +const commonPillSelectorProps: IPillSelectorUnControlled = { + variant: Object.values( + variantsObject[themeSelected].PillSelectorVariantTypeV2 || {} + )[0] as string, + pills: [ + { label: { content: 'Pill 1' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 1' }, + { label: { content: 'Pill 2 ' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 2' }, + { label: { content: 'Pill 3' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 3' }, + { label: { content: 'Pill 4' }, icon: { icon: ICONS.ICON_PLACEHOLDER }, value: 'value 4' }, + ], + defaultValue: ['value 2'], + selectedIcon: { icon: ICONS.ICON_PLACEHOLDER }, +}; + +export const PillSelector: Story = { + args: { + ...commonPillSelectorProps, + themeArgs: themesObject[themeSelected][STYLES_NAME.PILL_V2], + }, +}; + +export const PillSelectorWithCtv: Story = { + args: { + ...commonPillSelectorProps, + ctv: { + [PillSizeTypeV2.LARGE]: { + rootContainer: { + padding: '10px', + background_color: 'pink', + }, + }, + }, + }, +}; diff --git a/src/components/pillSelectorV2/types/index.ts b/src/components/pillSelectorV2/types/index.ts new file mode 100644 index 00000000..d780a2bf --- /dev/null +++ b/src/components/pillSelectorV2/types/index.ts @@ -0,0 +1,3 @@ +export * from './pillSelector'; +export * from './pillSelectorTheme'; +export * from './pillSelectorType'; diff --git a/src/components/pillSelectorV2/types/pillSelector.ts b/src/components/pillSelectorV2/types/pillSelector.ts new file mode 100644 index 00000000..f181e793 --- /dev/null +++ b/src/components/pillSelectorV2/types/pillSelector.ts @@ -0,0 +1,42 @@ +import { IElementOrIcon } from '@/components/elementOrIcon'; +import { IPill } from '@/components/pillV2/types'; +import { CustomTokenTypes } from '@/types'; + +import { + PillSelectorPropsStylesType, + PillSelectorVariantPropsStylesType, +} from './pillSelectorTheme'; +import { PillSelectorType } from './pillSelectorType'; + +export type PillSelectorPillType = Pick< + IPill, + 'variant' | 'size' | 'ctv' | 'disabled' | 'label' | 'value' | 'dataTestId' +> & { + icon?: IElementOrIcon; +}; + +export type PillSelectorValueType = string | number | Array; + +export interface IPillSelectorStandAlone { + styles?: PillSelectorPropsStylesType; + pills?: PillSelectorPillType[]; + selectedIcon?: IElementOrIcon; + type?: PillSelectorType; + value?: PillSelectorValueType; + name?: string; + disabled?: boolean; + dataTestId?: string; + onPillChange: React.ChangeEventHandler; +} + +export interface IPillSelectorControlled + extends Omit, + Omit, 'cts' | 'extraCt'> { + variant?: string; + size?: string; + onChange?: (value: PillSelectorValueType) => void; +} + +export interface IPillSelectorUnControlled extends Omit { + defaultValue?: PillSelectorValueType; +} diff --git a/src/components/pillSelectorV2/types/pillSelectorTheme.ts b/src/components/pillSelectorV2/types/pillSelectorTheme.ts new file mode 100644 index 00000000..104af2ee --- /dev/null +++ b/src/components/pillSelectorV2/types/pillSelectorTheme.ts @@ -0,0 +1,17 @@ +import type { CommonStyleType } from '@/types/index'; + +export type PillSelectorPropsStylesType = { + rootContainer?: CommonStyleType; + pill?: { + variant?: string; + size?: string; + }; +}; + +export type PillSelectorVariantPropsStylesType = { + [size in string]?: PillSelectorPropsStylesType; +}; + +export type PillSelectorStylesType = { + [variant in string]: PillSelectorVariantPropsStylesType; +}; diff --git a/src/components/pillSelectorV2/types/pillSelectorType.ts b/src/components/pillSelectorV2/types/pillSelectorType.ts new file mode 100644 index 00000000..ea1775cf --- /dev/null +++ b/src/components/pillSelectorV2/types/pillSelectorType.ts @@ -0,0 +1,4 @@ +export enum PillSelectorType { + SELECTOR_SIMPLE = 'SELECTOR_SIMPLE', + SELECTOR_MULTIPLE = 'SELECTOR_MULTIPLE', +} diff --git a/src/components/pillV2/__tests__/pill.test.tsx b/src/components/pillV2/__tests__/pill.test.tsx index 98777b57..8672ef21 100644 --- a/src/components/pillV2/__tests__/pill.test.tsx +++ b/src/components/pillV2/__tests__/pill.test.tsx @@ -45,8 +45,7 @@ describe('Pill component', () => { }); it('The default type of the pill is a button', async () => { - const { size, ...restMockProps } = mockProps; - const { container } = renderProvider(); + const { container } = renderProvider(); const pill = screen.getByRole(ROLES.BUTTON); expect(pill).toBeInTheDocument(); @@ -57,11 +56,10 @@ describe('Pill component', () => { }); it('When type is TAB it will render a tab', async () => { - const { size, ...restMockProps } = mockProps; const { container } = renderProvider(
- +
@@ -76,10 +74,7 @@ describe('Pill component', () => { }); it('When type is SELECTOR_MULTIPLE it will render an input checkbox', async () => { - const { size, ...restMockProps } = mockProps; - const { container } = renderProvider( - - ); + const { container } = renderProvider(); const pill = screen.getByRole(ROLES.CHECKBOX); expect(pill).toBeInTheDocument(); @@ -90,10 +85,7 @@ describe('Pill component', () => { }); it('When type is SELECTOR_SIMPLE it will render an input radio', async () => { - const { size, ...restMockProps } = mockProps; - const { container } = renderProvider( - - ); + const { container } = renderProvider(); const pill = screen.getByRole(ROLES.RADIO); expect(pill).toBeInTheDocument(); @@ -104,9 +96,8 @@ describe('Pill component', () => { }); it('When type is SELECTOR and selected is true it will render an input checked', async () => { - const { size, ...restMockProps } = mockProps; const { container } = renderProvider( - + ); const pill = screen.getByRole(ROLES.RADIO); @@ -118,9 +109,8 @@ describe('Pill component', () => { }); it('When type is SELECTOR and disabled is true it will render an input disabled', async () => { - const { size, ...restMockProps } = mockProps; const { container } = renderProvider( - + ); const pill = screen.getByRole(ROLES.CHECKBOX); @@ -132,9 +122,8 @@ describe('Pill component', () => { }); it('When type is SELECTOR and selected and disabled is true it will render an input selected and disabled', async () => { - const { size, ...restMockProps } = mockProps; const { container } = renderProvider( - + ); const pill = screen.getByRole(ROLES.CHECKBOX); diff --git a/src/components/pillV2/pill.styled.ts b/src/components/pillV2/pill.styled.ts index df558bac..91084b73 100644 --- a/src/components/pillV2/pill.styled.ts +++ b/src/components/pillV2/pill.styled.ts @@ -10,11 +10,11 @@ export const PillRootContainerStyled = styled.div<{ styles?: PillPropsStylesType ${({ styles }) => getStyles(styles?.rootContainer)}; `; +export const PillContentContainerStyled = styled.span<{ styles?: PillPropsStylesType }>` + ${({ styles }) => getStyles(styles?.contentContainer)}; +`; + export const PillInputStyled = styled.input<{ styles?: PillPropsStylesType }>` appearance: none; ${({ styles }) => getStyles(styles?.input)}; `; - -export const PillContentContainerStyled = styled.span<{ styles?: PillPropsStylesType }>` - ${({ styles }) => getStyles(styles?.contentContainer)}; -`; diff --git a/src/components/pillV2/pill.tsx b/src/components/pillV2/pill.tsx index cb6f2fa8..54aa7e9d 100644 --- a/src/components/pillV2/pill.tsx +++ b/src/components/pillV2/pill.tsx @@ -8,14 +8,7 @@ import { IPill, PillVariantPropsStylesType } from './types'; import { getPillState } from './utils'; const PillComponent = ( - { - variant, - size, - ctv, - selected = false, - disabled = false, - ...props - }: React.PropsWithChildren, + { variant, size, ctv, selected = false, disabled = false, ...props }: IPill, ref: React.ForwardedRef ) => { const variantStyles = useStylesV2({ diff --git a/src/components/pillV2/pillStandAlone.tsx b/src/components/pillV2/pillStandAlone.tsx index a344db42..031144ac 100644 --- a/src/components/pillV2/pillStandAlone.tsx +++ b/src/components/pillV2/pillStandAlone.tsx @@ -35,17 +35,6 @@ const PillStandAloneComponent = ( type={[PillType.BUTTON, PillType.TAB].includes(type) ? ButtonType.BUTTON : undefined} onClick={props.onClick} > - {[PillType.SELECTOR_SIMPLE, PillType.SELECTOR_MULTIPLE].includes(type) && ( - - )} + {[PillType.SELECTOR_SIMPLE, PillType.SELECTOR_MULTIPLE].includes(type) && ( + + )} ); }; diff --git a/src/components/pillV2/stories/argtypes.ts b/src/components/pillV2/stories/argtypes.ts index 7e47ae91..2f8e458d 100644 --- a/src/components/pillV2/stories/argtypes.ts +++ b/src/components/pillV2/stories/argtypes.ts @@ -114,6 +114,17 @@ export const argtypes = ( category: CATEGORY_CONTROL.MODIFIERS, }, }, + value: { + description: 'When type selector, input value', + type: { name: 'string' }, + control: { type: 'text' }, + table: { + type: { + summary: 'string | number', + }, + category: CATEGORY_CONTROL.MODIFIERS, + }, + }, ['aria-controls']: { description: 'aria-controls', type: { name: 'string' }, diff --git a/src/components/pillV2/stories/pill.stories.tsx b/src/components/pillV2/stories/pill.stories.tsx index b29f9a54..117b1134 100644 --- a/src/components/pillV2/stories/pill.stories.tsx +++ b/src/components/pillV2/stories/pill.stories.tsx @@ -12,7 +12,7 @@ import { argtypes } from './argtypes'; const themeSelected = localStorage.getItem('themeSelected') || 'kubit'; const meta = { - title: 'Components/Status/PillV2', + title: 'Components/Forms/PillV2', component: Story, parameters: { layout: 'centered', @@ -39,7 +39,7 @@ export const Pill: Story = { }, }; -export const TagWithCtv: Story = { +export const PillWithCtv: Story = { args: { ...commonPillProps, ctv: { diff --git a/src/components/pillV2/types/pill.ts b/src/components/pillV2/types/pill.ts index 545d2670..92bcca38 100644 --- a/src/components/pillV2/types/pill.ts +++ b/src/components/pillV2/types/pill.ts @@ -20,6 +20,7 @@ export interface IPillStandAlone { disabled: boolean; type?: PillType; name?: string; + value?: string | number; ['aria-controls']?: string; onClick?: React.MouseEventHandler; onChange?: React.ChangeEventHandler; diff --git a/src/components/pillV2/types/pillTheme.ts b/src/components/pillV2/types/pillTheme.ts index b5d3f7e0..1321db55 100644 --- a/src/components/pillV2/types/pillTheme.ts +++ b/src/components/pillV2/types/pillTheme.ts @@ -4,11 +4,11 @@ import { PillStateType } from './pillStateType'; export type PillPropsStylesType = { rootContainer?: CommonStyleType; - input?: CommonStyleType; contentContainer?: CommonStyleType; leftIcon?: IconTypes; label?: TypographyTypes; rightIcon?: IconTypes; + input?: CommonStyleType; }; export type PillSizePropsStylesType = { diff --git a/src/constants/stylesName.ts b/src/constants/stylesName.ts index 4e46877d..7d359d26 100644 --- a/src/constants/stylesName.ts +++ b/src/constants/stylesName.ts @@ -81,6 +81,7 @@ export const STYLES_NAME = { PAGE_CONTROL_AUTOMATE: 'PAGE_CONTROL_AUTOMATE_STYLES', PAGINATION: 'PAGINATION_STYLES', PILL_SELECTOR: 'PILL_SELECTOR_STYLES', + PILL_SELECTOR_V2: 'PILL_SELECTOR_STYLES_V2', PRIMARY_TABS: 'PRIMARY_TABS_STYLES', QUICK_CARD_HIGHLIGHTS: 'QUICK_CARD_HIGHLIGHTS_STYLES', SECONDARY_TABS: 'SECONDARY_TABS_STYLES', diff --git a/src/designSystem/kubit/components/pillSelectorV2/index.ts b/src/designSystem/kubit/components/pillSelectorV2/index.ts new file mode 100644 index 00000000..0540595d --- /dev/null +++ b/src/designSystem/kubit/components/pillSelectorV2/index.ts @@ -0,0 +1,2 @@ +export * from './styles'; +export * from './variants'; diff --git a/src/designSystem/kubit/components/pillSelectorV2/styles.ts b/src/designSystem/kubit/components/pillSelectorV2/styles.ts new file mode 100644 index 00000000..8d78e409 --- /dev/null +++ b/src/designSystem/kubit/components/pillSelectorV2/styles.ts @@ -0,0 +1,39 @@ +import { + PillSelectorPropsStylesType, + PillSelectorStylesType, +} from '@/components/pillSelectorV2/types'; + +import { BORDERS, COLORS } from '../../foundations'; +import { PillSizeTypeV2, PillVariantTypeV2 } from '../variants'; +import { PillSelectorSizeTypeV2, PillSelectorVariantTypeV2 } from './variants'; + +const commonProps: PillSelectorPropsStylesType = { + rootContainer: { + display: 'flex', + flex_direction: 'row', + max_width: 'fit-content', + border: `${BORDERS.border_50} solid ${COLORS.NEUTRAL.color_neutral_border_100}`, + }, + pill: { + variant: PillVariantTypeV2.PILL_SELECTOR, + }, +}; + +export const PILL_SELECTOR_STYLES_V2: PillSelectorStylesType = { + [PillSelectorVariantTypeV2.DEFAULT]: { + [PillSelectorSizeTypeV2.LARGE]: { + ...commonProps, + pill: { + ...commonProps.pill, + size: PillSizeTypeV2.LARGE, + }, + }, + [PillSelectorSizeTypeV2.SMALL]: { + ...commonProps, + pill: { + ...commonProps.pill, + size: PillSizeTypeV2.SMALL, + }, + }, + }, +}; diff --git a/src/designSystem/kubit/components/pillSelectorV2/variants.ts b/src/designSystem/kubit/components/pillSelectorV2/variants.ts new file mode 100644 index 00000000..bb6dc7c1 --- /dev/null +++ b/src/designSystem/kubit/components/pillSelectorV2/variants.ts @@ -0,0 +1,8 @@ +export enum PillSelectorVariantTypeV2 { + DEFAULT = 'DEFAULT', +} + +export enum PillSelectorSizeTypeV2 { + LARGE = 'LARGE', + SMALL = 'SMALL', +} diff --git a/src/designSystem/kubit/components/pillV2/styles.ts b/src/designSystem/kubit/components/pillV2/styles.ts index a3c6fd19..c5eaf6c6 100644 --- a/src/designSystem/kubit/components/pillV2/styles.ts +++ b/src/designSystem/kubit/components/pillV2/styles.ts @@ -1,298 +1,10 @@ -import { PillPropsStylesType, PillStateType, PillStylesType } from '@/components/pillV2/types'; +import { PillStylesType } from '@/components/pillV2/types'; -import { BORDERS, COLORS, FONT_WEIGHT, SIZES, SPACINGS } from '../../foundations'; -import { TextVariantType } from '../text/variants'; -import { PillSizeTypeV2, PillVariantTypeV2 } from './variants'; - -const commonProps: PillPropsStylesType = { - rootContainer: { - position: 'relative', - display: 'flex', - flex_direction: 'column', - align_items: 'center', - gap: SPACINGS.spacing_150, - }, - input: { - position: 'absolute', - top: '0', - left: '0', - right: '0', - bottom: '0', - cursor: 'pointer', - }, - contentContainer: { - display: 'flex', - flex_direction: 'row', - align_items: 'center', - gap: SPACINGS.spacing_150, - background_color: COLORS.NEUTRAL.color_neutral_bg_250, - border: `${BORDERS.border_50} solid ${COLORS.NEUTRAL.color_neutral_border_100}`, - cursor: 'pointer', - }, - leftIcon: { - color: COLORS.NEUTRAL.color_neutral_icon_50, - height: SIZES.size_200, - width: SIZES.size_200, - }, - label: { - font_variant: TextVariantType.PARAGRAPH_SMALL_EXTENDED, - font_weight: FONT_WEIGHT.font_weight_400, - color: COLORS.NEUTRAL.color_neutral_font_50, - }, - rightIcon: { - color: COLORS.NEUTRAL.color_neutral_icon_50, - height: SIZES.size_200, - width: SIZES.size_200, - }, -}; - -const commonLargeProps: PillPropsStylesType = { - ...commonProps, - contentContainer: { - ...commonProps.contentContainer, - padding: `${SPACINGS.spacing_250} ${SPACINGS.spacing_300}`, - }, -}; - -const commonSmallProps: PillPropsStylesType = { - ...commonProps, - contentContainer: { - ...commonProps.contentContainer, - padding: `${SPACINGS.spacing_150} ${SPACINGS.spacing_300}`, - }, -}; - -const commonExtraSmallProps: PillPropsStylesType = { - ...commonProps, - contentContainer: { - ...commonProps.contentContainer, - padding: `${SPACINGS.spacing_100} ${SPACINGS.spacing_300}`, - }, -}; +import { PILL_STYLES_DEFAULT } from './styles/default'; +import { PILL_STYLES_PILL_SELECTOR } from './styles/pillSelector'; +import { PillVariantTypeV2 } from './variants'; export const PILL_STYLES_V2: PillStylesType = { - [PillVariantTypeV2.DEFAULT]: { - [PillSizeTypeV2.LARGE]: { - [PillStateType.DEFAULT]: { ...commonLargeProps }, - [PillStateType.SELECTED]: { - ...commonLargeProps, - contentContainer: { - ...commonLargeProps.contentContainer, - background_color: COLORS.ACCENT.color_accent_default_font_100, - border: `${BORDERS.border_50} solid ${COLORS.ACCENT.color_accent_default_font_100}`, - }, - leftIcon: { - ...commonLargeProps.leftIcon, - color: COLORS.NEUTRAL.color_neutral_icon_250, - }, - label: { - ...commonLargeProps.label, - font_weight: FONT_WEIGHT.font_weight_600, - color: COLORS.NEUTRAL.color_neutral_font_250, - }, - rightIcon: { - ...commonLargeProps.rightIcon, - color: COLORS.NEUTRAL.color_neutral_icon_250, - }, - }, - [PillStateType.DISABLED]: { - ...commonLargeProps, - input: { - ...commonLargeProps.input, - cursor: 'auto', - }, - contentContainer: { - ...commonLargeProps.contentContainer, - background_color: COLORS.DISABLED.color_accentDisabled_bg_150, - border: `${BORDERS.border_50} solid ${COLORS.DISABLED.color_accentDisabled_border_50}`, - cursor: 'auto', - }, - leftIcon: { - ...commonLargeProps.leftIcon, - color: COLORS.NEUTRAL.color_neutral_icon_50, - }, - label: { - ...commonLargeProps.label, - color: COLORS.ACCENT.color_accent_default_font_50, - }, - rightIcon: { - ...commonLargeProps.rightIcon, - color: COLORS.NEUTRAL.color_neutral_icon_50, - }, - }, - [PillStateType.DISABLED_SELECTED]: { - ...commonLargeProps, - input: { - ...commonLargeProps.input, - cursor: 'auto', - }, - contentContainer: { - ...commonLargeProps.contentContainer, - background_color: COLORS.DISABLED.color_accentDisabled_bg_150, - border: `${BORDERS.border_50} solid ${COLORS.DISABLED.color_accentDisabled_bg_150}`, - cursor: 'auto', - }, - leftIcon: { - ...commonLargeProps.leftIcon, - color: COLORS.NEUTRAL.color_neutral_icon_50, - }, - label: { - ...commonLargeProps.label, - color: COLORS.ACCENT.color_accent_default_font_50, - }, - rightIcon: { - ...commonLargeProps.rightIcon, - color: COLORS.NEUTRAL.color_neutral_icon_50, - }, - }, - }, - [PillSizeTypeV2.SMALL]: { - [PillStateType.DEFAULT]: { ...commonSmallProps }, - [PillStateType.SELECTED]: { - ...commonSmallProps, - contentContainer: { - ...commonSmallProps.contentContainer, - background_color: COLORS.ACCENT.color_accent_default_font_100, - border: `${BORDERS.border_50} solid ${COLORS.ACCENT.color_accent_default_font_100}`, - }, - leftIcon: { - ...commonSmallProps.leftIcon, - color: COLORS.NEUTRAL.color_neutral_icon_250, - }, - label: { - ...commonSmallProps.label, - font_weight: FONT_WEIGHT.font_weight_600, - color: COLORS.NEUTRAL.color_neutral_font_250, - }, - rightIcon: { - ...commonSmallProps.rightIcon, - color: COLORS.NEUTRAL.color_neutral_icon_250, - }, - }, - [PillStateType.DISABLED]: { - ...commonSmallProps, - input: { - ...commonSmallProps.input, - cursor: 'auto', - }, - contentContainer: { - ...commonSmallProps.contentContainer, - background_color: COLORS.DISABLED.color_accentDisabled_bg_150, - border: `${BORDERS.border_50} solid ${COLORS.DISABLED.color_accentDisabled_border_50}`, - cursor: 'auto', - }, - leftIcon: { - ...commonSmallProps.leftIcon, - color: COLORS.NEUTRAL.color_neutral_icon_50, - }, - label: { - ...commonSmallProps.label, - color: COLORS.ACCENT.color_accent_default_font_50, - }, - rightIcon: { - ...commonSmallProps.rightIcon, - color: COLORS.NEUTRAL.color_neutral_icon_50, - }, - }, - [PillStateType.DISABLED_SELECTED]: { - ...commonSmallProps, - input: { - ...commonSmallProps.input, - cursor: 'auto', - }, - contentContainer: { - ...commonSmallProps.contentContainer, - background_color: COLORS.DISABLED.color_accentDisabled_bg_150, - border: `${BORDERS.border_50} solid ${COLORS.DISABLED.color_accentDisabled_bg_150}`, - cursor: 'auto', - }, - leftIcon: { - ...commonSmallProps.leftIcon, - color: COLORS.NEUTRAL.color_neutral_icon_50, - }, - label: { - ...commonSmallProps.label, - color: COLORS.ACCENT.color_accent_default_font_50, - }, - rightIcon: { - ...commonSmallProps.rightIcon, - color: COLORS.NEUTRAL.color_neutral_icon_50, - }, - }, - }, - [PillSizeTypeV2.EXTRA_SMALL]: { - [PillStateType.DEFAULT]: { ...commonExtraSmallProps }, - [PillStateType.SELECTED]: { - ...commonExtraSmallProps, - contentContainer: { - ...commonExtraSmallProps.contentContainer, - background_color: COLORS.ACCENT.color_accent_default_font_100, - border: `${BORDERS.border_50} solid ${COLORS.ACCENT.color_accent_default_font_100}`, - }, - leftIcon: { - ...commonExtraSmallProps.leftIcon, - color: COLORS.NEUTRAL.color_neutral_icon_250, - }, - label: { - ...commonExtraSmallProps.label, - font_weight: FONT_WEIGHT.font_weight_600, - color: COLORS.NEUTRAL.color_neutral_font_250, - }, - rightIcon: { - ...commonExtraSmallProps.rightIcon, - color: COLORS.NEUTRAL.color_neutral_icon_250, - }, - }, - [PillStateType.DISABLED]: { - ...commonExtraSmallProps, - input: { - ...commonExtraSmallProps.input, - cursor: 'auto', - }, - contentContainer: { - ...commonExtraSmallProps.contentContainer, - background_color: COLORS.DISABLED.color_accentDisabled_bg_150, - border: `${BORDERS.border_50} solid ${COLORS.DISABLED.color_accentDisabled_border_50}`, - cursor: 'auto', - }, - leftIcon: { - ...commonExtraSmallProps.leftIcon, - color: COLORS.NEUTRAL.color_neutral_icon_50, - }, - label: { - ...commonExtraSmallProps.label, - color: COLORS.ACCENT.color_accent_default_font_50, - }, - rightIcon: { - ...commonExtraSmallProps.rightIcon, - color: COLORS.NEUTRAL.color_neutral_icon_50, - }, - }, - [PillStateType.DISABLED_SELECTED]: { - ...commonExtraSmallProps, - input: { - ...commonExtraSmallProps.input, - cursor: 'auto', - }, - contentContainer: { - ...commonExtraSmallProps.contentContainer, - background_color: COLORS.DISABLED.color_accentDisabled_bg_150, - border: `${BORDERS.border_50} solid ${COLORS.DISABLED.color_accentDisabled_bg_150}`, - cursor: 'auto', - }, - leftIcon: { - ...commonExtraSmallProps.leftIcon, - color: COLORS.NEUTRAL.color_neutral_icon_50, - }, - label: { - ...commonExtraSmallProps.label, - color: COLORS.ACCENT.color_accent_default_font_50, - }, - rightIcon: { - ...commonExtraSmallProps.rightIcon, - color: COLORS.NEUTRAL.color_neutral_icon_50, - }, - }, - }, - }, + [PillVariantTypeV2.DEFAULT]: PILL_STYLES_DEFAULT, + [PillVariantTypeV2.PILL_SELECTOR]: PILL_STYLES_PILL_SELECTOR, }; diff --git a/src/designSystem/kubit/components/pillV2/styles/default.ts b/src/designSystem/kubit/components/pillV2/styles/default.ts new file mode 100644 index 00000000..811a9337 --- /dev/null +++ b/src/designSystem/kubit/components/pillV2/styles/default.ts @@ -0,0 +1,300 @@ +import { + PillPropsStylesType, + PillStateType, + PillVariantPropsStylesType, +} from '@/components/pillV2/types'; + +import { BORDERS, COLORS, FONT_WEIGHT, SIZES, SPACINGS } from '../../../foundations'; +import { TextVariantType } from '../../text/variants'; +import { PillSizeTypeV2 } from '../variants'; + +const commonProps: PillPropsStylesType = { + rootContainer: { + position: 'relative', + display: 'flex', + flex_direction: 'column', + align_items: 'center', + gap: SPACINGS.spacing_150, + }, + contentContainer: { + display: 'flex', + flex_direction: 'row', + align_items: 'center', + gap: SPACINGS.spacing_150, + background_color: COLORS.NEUTRAL.color_neutral_bg_250, + border: `${BORDERS.border_50} solid ${COLORS.NEUTRAL.color_neutral_border_100}`, + cursor: 'pointer', + }, + leftIcon: { + color: COLORS.NEUTRAL.color_neutral_icon_50, + height: SIZES.size_200, + width: SIZES.size_200, + }, + label: { + font_variant: TextVariantType.PARAGRAPH_SMALL_EXTENDED, + font_weight: FONT_WEIGHT.font_weight_400, + color: COLORS.NEUTRAL.color_neutral_font_50, + }, + rightIcon: { + color: COLORS.NEUTRAL.color_neutral_icon_50, + height: SIZES.size_200, + width: SIZES.size_200, + }, + input: { + position: 'absolute', + top: '0', + left: '0', + right: '0', + bottom: '0', + cursor: 'pointer', + }, +}; + +const commonLargeProps: PillPropsStylesType = { + ...commonProps, + contentContainer: { + ...commonProps.contentContainer, + padding: `${SPACINGS.spacing_250} ${SPACINGS.spacing_300}`, + }, +}; + +const commonSmallProps: PillPropsStylesType = { + ...commonProps, + contentContainer: { + ...commonProps.contentContainer, + padding: `${SPACINGS.spacing_150} ${SPACINGS.spacing_300}`, + }, +}; + +const commonExtraSmallProps: PillPropsStylesType = { + ...commonProps, + contentContainer: { + ...commonProps.contentContainer, + padding: `${SPACINGS.spacing_100} ${SPACINGS.spacing_300}`, + }, +}; + +export const PILL_STYLES_DEFAULT: PillVariantPropsStylesType = { + [PillSizeTypeV2.LARGE]: { + [PillStateType.DEFAULT]: { ...commonLargeProps }, + [PillStateType.SELECTED]: { + ...commonLargeProps, + contentContainer: { + ...commonLargeProps.contentContainer, + background_color: COLORS.ACCENT.color_accent_default_font_100, + border: `${BORDERS.border_50} solid ${COLORS.ACCENT.color_accent_default_font_100}`, + }, + leftIcon: { + ...commonLargeProps.leftIcon, + color: COLORS.NEUTRAL.color_neutral_icon_250, + }, + label: { + ...commonLargeProps.label, + font_weight: FONT_WEIGHT.font_weight_600, + color: COLORS.NEUTRAL.color_neutral_font_250, + }, + rightIcon: { + ...commonLargeProps.rightIcon, + color: COLORS.NEUTRAL.color_neutral_icon_250, + }, + }, + [PillStateType.DISABLED]: { + ...commonLargeProps, + contentContainer: { + ...commonLargeProps.contentContainer, + background_color: COLORS.DISABLED.color_accentDisabled_bg_150, + border: `${BORDERS.border_50} solid ${COLORS.DISABLED.color_accentDisabled_border_50}`, + cursor: 'auto', + }, + leftIcon: { + ...commonLargeProps.leftIcon, + color: COLORS.NEUTRAL.color_neutral_icon_50, + }, + label: { + ...commonLargeProps.label, + color: COLORS.ACCENT.color_accent_default_font_50, + }, + rightIcon: { + ...commonLargeProps.rightIcon, + color: COLORS.NEUTRAL.color_neutral_icon_50, + }, + input: { + ...commonLargeProps.input, + cursor: 'auto', + }, + }, + [PillStateType.DISABLED_SELECTED]: { + ...commonLargeProps, + contentContainer: { + ...commonLargeProps.contentContainer, + background_color: COLORS.DISABLED.color_accentDisabled_bg_150, + border: `${BORDERS.border_50} solid ${COLORS.DISABLED.color_accentDisabled_bg_150}`, + cursor: 'auto', + }, + leftIcon: { + ...commonLargeProps.leftIcon, + color: COLORS.NEUTRAL.color_neutral_icon_50, + }, + label: { + ...commonLargeProps.label, + color: COLORS.ACCENT.color_accent_default_font_50, + }, + rightIcon: { + ...commonLargeProps.rightIcon, + color: COLORS.NEUTRAL.color_neutral_icon_50, + }, + input: { + ...commonLargeProps.input, + cursor: 'auto', + }, + }, + }, + [PillSizeTypeV2.SMALL]: { + [PillStateType.DEFAULT]: { ...commonSmallProps }, + [PillStateType.SELECTED]: { + ...commonSmallProps, + contentContainer: { + ...commonSmallProps.contentContainer, + background_color: COLORS.ACCENT.color_accent_default_font_100, + border: `${BORDERS.border_50} solid ${COLORS.ACCENT.color_accent_default_font_100}`, + }, + leftIcon: { + ...commonSmallProps.leftIcon, + color: COLORS.NEUTRAL.color_neutral_icon_250, + }, + label: { + ...commonSmallProps.label, + font_weight: FONT_WEIGHT.font_weight_600, + color: COLORS.NEUTRAL.color_neutral_font_250, + }, + rightIcon: { + ...commonSmallProps.rightIcon, + color: COLORS.NEUTRAL.color_neutral_icon_250, + }, + }, + [PillStateType.DISABLED]: { + ...commonSmallProps, + contentContainer: { + ...commonSmallProps.contentContainer, + background_color: COLORS.DISABLED.color_accentDisabled_bg_150, + border: `${BORDERS.border_50} solid ${COLORS.DISABLED.color_accentDisabled_border_50}`, + cursor: 'auto', + }, + leftIcon: { + ...commonSmallProps.leftIcon, + color: COLORS.NEUTRAL.color_neutral_icon_50, + }, + label: { + ...commonSmallProps.label, + color: COLORS.ACCENT.color_accent_default_font_50, + }, + rightIcon: { + ...commonSmallProps.rightIcon, + color: COLORS.NEUTRAL.color_neutral_icon_50, + }, + input: { + ...commonSmallProps.input, + cursor: 'auto', + }, + }, + [PillStateType.DISABLED_SELECTED]: { + ...commonSmallProps, + contentContainer: { + ...commonSmallProps.contentContainer, + background_color: COLORS.DISABLED.color_accentDisabled_bg_150, + border: `${BORDERS.border_50} solid ${COLORS.DISABLED.color_accentDisabled_bg_150}`, + cursor: 'auto', + }, + leftIcon: { + ...commonSmallProps.leftIcon, + color: COLORS.NEUTRAL.color_neutral_icon_50, + }, + label: { + ...commonSmallProps.label, + color: COLORS.ACCENT.color_accent_default_font_50, + }, + rightIcon: { + ...commonSmallProps.rightIcon, + color: COLORS.NEUTRAL.color_neutral_icon_50, + }, + input: { + ...commonSmallProps.input, + cursor: 'auto', + }, + }, + }, + [PillSizeTypeV2.EXTRA_SMALL]: { + [PillStateType.DEFAULT]: { ...commonExtraSmallProps }, + [PillStateType.SELECTED]: { + ...commonExtraSmallProps, + contentContainer: { + ...commonExtraSmallProps.contentContainer, + background_color: COLORS.ACCENT.color_accent_default_font_100, + border: `${BORDERS.border_50} solid ${COLORS.ACCENT.color_accent_default_font_100}`, + }, + leftIcon: { + ...commonExtraSmallProps.leftIcon, + color: COLORS.NEUTRAL.color_neutral_icon_250, + }, + label: { + ...commonExtraSmallProps.label, + font_weight: FONT_WEIGHT.font_weight_600, + color: COLORS.NEUTRAL.color_neutral_font_250, + }, + rightIcon: { + ...commonExtraSmallProps.rightIcon, + color: COLORS.NEUTRAL.color_neutral_icon_250, + }, + }, + [PillStateType.DISABLED]: { + ...commonExtraSmallProps, + contentContainer: { + ...commonExtraSmallProps.contentContainer, + background_color: COLORS.DISABLED.color_accentDisabled_bg_150, + border: `${BORDERS.border_50} solid ${COLORS.DISABLED.color_accentDisabled_border_50}`, + cursor: 'auto', + }, + leftIcon: { + ...commonExtraSmallProps.leftIcon, + color: COLORS.NEUTRAL.color_neutral_icon_50, + }, + label: { + ...commonExtraSmallProps.label, + color: COLORS.ACCENT.color_accent_default_font_50, + }, + rightIcon: { + ...commonExtraSmallProps.rightIcon, + color: COLORS.NEUTRAL.color_neutral_icon_50, + }, + input: { + ...commonExtraSmallProps.input, + cursor: 'auto', + }, + }, + [PillStateType.DISABLED_SELECTED]: { + ...commonExtraSmallProps, + contentContainer: { + ...commonExtraSmallProps.contentContainer, + background_color: COLORS.DISABLED.color_accentDisabled_bg_150, + border: `${BORDERS.border_50} solid ${COLORS.DISABLED.color_accentDisabled_bg_150}`, + cursor: 'auto', + }, + leftIcon: { + ...commonExtraSmallProps.leftIcon, + color: COLORS.NEUTRAL.color_neutral_icon_50, + }, + label: { + ...commonExtraSmallProps.label, + color: COLORS.ACCENT.color_accent_default_font_50, + }, + rightIcon: { + ...commonExtraSmallProps.rightIcon, + color: COLORS.NEUTRAL.color_neutral_icon_50, + }, + input: { + ...commonExtraSmallProps.input, + cursor: 'auto', + }, + }, + }, +}; diff --git a/src/designSystem/kubit/components/pillV2/styles/pillSelector.ts b/src/designSystem/kubit/components/pillV2/styles/pillSelector.ts new file mode 100644 index 00000000..d6f202fe --- /dev/null +++ b/src/designSystem/kubit/components/pillV2/styles/pillSelector.ts @@ -0,0 +1,290 @@ +import { + PillPropsStylesType, + PillStateType, + PillVariantPropsStylesType, +} from '@/components/pillV2/types'; + +import { COLORS, FONT_WEIGHT, SIZES, SPACINGS } from '../../../foundations'; +import { TextVariantType } from '../../text/variants'; +import { PillSizeTypeV2 } from '../variants'; + +const commonProps: PillPropsStylesType = { + rootContainer: { + position: 'relative', + display: 'flex', + flex_direction: 'column', + align_items: 'center', + gap: SPACINGS.spacing_150, + }, + contentContainer: { + display: 'flex', + flex_direction: 'row', + align_items: 'center', + gap: SPACINGS.spacing_150, + background_color: COLORS.NEUTRAL.color_neutral_bg_250, + cursor: 'pointer', + }, + leftIcon: { + color: COLORS.NEUTRAL.color_neutral_icon_50, + height: SIZES.size_200, + width: SIZES.size_200, + }, + label: { + font_variant: TextVariantType.PARAGRAPH_SMALL_EXTENDED, + font_weight: FONT_WEIGHT.font_weight_400, + color: COLORS.NEUTRAL.color_neutral_font_50, + }, + rightIcon: { + color: COLORS.NEUTRAL.color_neutral_icon_50, + height: SIZES.size_200, + width: SIZES.size_200, + }, + input: { + position: 'absolute', + top: '0', + left: '0', + right: '0', + bottom: '0', + cursor: 'pointer', + }, +}; + +const commonLargeProps: PillPropsStylesType = { + ...commonProps, + contentContainer: { + ...commonProps.contentContainer, + padding: `${SPACINGS.spacing_250} ${SPACINGS.spacing_300}`, + }, +}; + +const commonSmallProps: PillPropsStylesType = { + ...commonProps, + contentContainer: { + ...commonProps.contentContainer, + padding: `${SPACINGS.spacing_150} ${SPACINGS.spacing_300}`, + }, +}; + +const commonExtraSmallProps: PillPropsStylesType = { + ...commonProps, + contentContainer: { + ...commonProps.contentContainer, + padding: `${SPACINGS.spacing_100} ${SPACINGS.spacing_300}`, + }, +}; + +export const PILL_STYLES_PILL_SELECTOR: PillVariantPropsStylesType = { + [PillSizeTypeV2.LARGE]: { + [PillStateType.DEFAULT]: { ...commonLargeProps }, + [PillStateType.SELECTED]: { + ...commonLargeProps, + contentContainer: { + ...commonLargeProps.contentContainer, + background_color: COLORS.ACCENT.color_accent_default_font_100, + }, + leftIcon: { + ...commonLargeProps.leftIcon, + color: COLORS.NEUTRAL.color_neutral_icon_250, + }, + label: { + ...commonLargeProps.label, + font_weight: FONT_WEIGHT.font_weight_600, + color: COLORS.NEUTRAL.color_neutral_font_250, + }, + rightIcon: { + ...commonLargeProps.rightIcon, + color: COLORS.NEUTRAL.color_neutral_icon_250, + }, + }, + [PillStateType.DISABLED]: { + ...commonLargeProps, + contentContainer: { + ...commonLargeProps.contentContainer, + background_color: COLORS.DISABLED.color_accentDisabled_bg_150, + cursor: 'auto', + }, + leftIcon: { + ...commonLargeProps.leftIcon, + color: COLORS.NEUTRAL.color_neutral_icon_50, + }, + label: { + ...commonLargeProps.label, + color: COLORS.ACCENT.color_accent_default_font_50, + }, + rightIcon: { + ...commonLargeProps.rightIcon, + color: COLORS.NEUTRAL.color_neutral_icon_50, + }, + input: { + ...commonLargeProps.input, + cursor: 'auto', + }, + }, + [PillStateType.DISABLED_SELECTED]: { + ...commonLargeProps, + contentContainer: { + ...commonLargeProps.contentContainer, + background_color: COLORS.DISABLED.color_accentDisabled_bg_150, + cursor: 'auto', + }, + leftIcon: { + ...commonLargeProps.leftIcon, + color: COLORS.NEUTRAL.color_neutral_icon_50, + }, + label: { + ...commonLargeProps.label, + color: COLORS.ACCENT.color_accent_default_font_50, + }, + rightIcon: { + ...commonLargeProps.rightIcon, + color: COLORS.NEUTRAL.color_neutral_icon_50, + }, + input: { + ...commonLargeProps.input, + cursor: 'auto', + }, + }, + }, + [PillSizeTypeV2.SMALL]: { + [PillStateType.DEFAULT]: { ...commonSmallProps }, + [PillStateType.SELECTED]: { + ...commonSmallProps, + contentContainer: { + ...commonSmallProps.contentContainer, + background_color: COLORS.ACCENT.color_accent_default_font_100, + }, + leftIcon: { + ...commonSmallProps.leftIcon, + color: COLORS.NEUTRAL.color_neutral_icon_250, + }, + label: { + ...commonSmallProps.label, + font_weight: FONT_WEIGHT.font_weight_600, + color: COLORS.NEUTRAL.color_neutral_font_250, + }, + rightIcon: { + ...commonSmallProps.rightIcon, + color: COLORS.NEUTRAL.color_neutral_icon_250, + }, + }, + [PillStateType.DISABLED]: { + ...commonSmallProps, + contentContainer: { + ...commonSmallProps.contentContainer, + background_color: COLORS.DISABLED.color_accentDisabled_bg_150, + cursor: 'auto', + }, + leftIcon: { + ...commonSmallProps.leftIcon, + color: COLORS.NEUTRAL.color_neutral_icon_50, + }, + label: { + ...commonSmallProps.label, + color: COLORS.ACCENT.color_accent_default_font_50, + }, + rightIcon: { + ...commonSmallProps.rightIcon, + color: COLORS.NEUTRAL.color_neutral_icon_50, + }, + input: { + ...commonSmallProps.input, + cursor: 'auto', + }, + }, + [PillStateType.DISABLED_SELECTED]: { + ...commonSmallProps, + contentContainer: { + ...commonSmallProps.contentContainer, + background_color: COLORS.DISABLED.color_accentDisabled_bg_150, + cursor: 'auto', + }, + leftIcon: { + ...commonSmallProps.leftIcon, + color: COLORS.NEUTRAL.color_neutral_icon_50, + }, + label: { + ...commonSmallProps.label, + color: COLORS.ACCENT.color_accent_default_font_50, + }, + rightIcon: { + ...commonSmallProps.rightIcon, + color: COLORS.NEUTRAL.color_neutral_icon_50, + }, + input: { + ...commonSmallProps.input, + cursor: 'auto', + }, + }, + }, + [PillSizeTypeV2.EXTRA_SMALL]: { + [PillStateType.DEFAULT]: { ...commonExtraSmallProps }, + [PillStateType.SELECTED]: { + ...commonExtraSmallProps, + contentContainer: { + ...commonExtraSmallProps.contentContainer, + background_color: COLORS.ACCENT.color_accent_default_font_100, + }, + leftIcon: { + ...commonExtraSmallProps.leftIcon, + color: COLORS.NEUTRAL.color_neutral_icon_250, + }, + label: { + ...commonExtraSmallProps.label, + font_weight: FONT_WEIGHT.font_weight_600, + color: COLORS.NEUTRAL.color_neutral_font_250, + }, + rightIcon: { + ...commonExtraSmallProps.rightIcon, + color: COLORS.NEUTRAL.color_neutral_icon_250, + }, + }, + [PillStateType.DISABLED]: { + ...commonExtraSmallProps, + contentContainer: { + ...commonExtraSmallProps.contentContainer, + background_color: COLORS.DISABLED.color_accentDisabled_bg_150, + cursor: 'auto', + }, + leftIcon: { + ...commonExtraSmallProps.leftIcon, + color: COLORS.NEUTRAL.color_neutral_icon_50, + }, + label: { + ...commonExtraSmallProps.label, + color: COLORS.ACCENT.color_accent_default_font_50, + }, + rightIcon: { + ...commonExtraSmallProps.rightIcon, + color: COLORS.NEUTRAL.color_neutral_icon_50, + }, + input: { + ...commonExtraSmallProps.input, + cursor: 'auto', + }, + }, + [PillStateType.DISABLED_SELECTED]: { + ...commonExtraSmallProps, + contentContainer: { + ...commonExtraSmallProps.contentContainer, + background_color: COLORS.DISABLED.color_accentDisabled_bg_150, + cursor: 'auto', + }, + leftIcon: { + ...commonExtraSmallProps.leftIcon, + color: COLORS.NEUTRAL.color_neutral_icon_50, + }, + label: { + ...commonExtraSmallProps.label, + color: COLORS.ACCENT.color_accent_default_font_50, + }, + rightIcon: { + ...commonExtraSmallProps.rightIcon, + color: COLORS.NEUTRAL.color_neutral_icon_50, + }, + input: { + ...commonExtraSmallProps.input, + cursor: 'auto', + }, + }, + }, +}; diff --git a/src/designSystem/kubit/components/pillV2/variants.ts b/src/designSystem/kubit/components/pillV2/variants.ts index 80fb9570..18e283b1 100644 --- a/src/designSystem/kubit/components/pillV2/variants.ts +++ b/src/designSystem/kubit/components/pillV2/variants.ts @@ -1,5 +1,6 @@ export enum PillVariantTypeV2 { DEFAULT = 'DEFAULT', + PILL_SELECTOR = 'PILL_SELECTOR', } export enum PillSizeTypeV2 { diff --git a/src/designSystem/kubit/components/styles.ts b/src/designSystem/kubit/components/styles.ts index 03c6ef4a..1ae48409 100644 --- a/src/designSystem/kubit/components/styles.ts +++ b/src/designSystem/kubit/components/styles.ts @@ -54,6 +54,7 @@ export * from './pagination/styles'; export * from './pill/styles'; export * from './pillV2/styles'; export * from './pillSelector/styles'; +export * from './pillSelectorV2/styles'; export * from './quickButton/styles'; export * from './radioButtonGroup/styles'; export * from './table/styles'; diff --git a/src/designSystem/kubit/components/variants.ts b/src/designSystem/kubit/components/variants.ts index 2caec8bc..12721916 100644 --- a/src/designSystem/kubit/components/variants.ts +++ b/src/designSystem/kubit/components/variants.ts @@ -54,6 +54,7 @@ export * from './pagination/variants'; export * from './pill/variants'; export * from './pillV2/variants'; export * from './pillSelector/variants'; +export * from './pillSelectorV2/variants'; export * from './quickButton/variants'; export * from './radioButtonGroup/variants'; export * from './table/variants'; diff --git a/src/designSystem/kubitWireframe/commons/components/pillSelectorV2/index.ts b/src/designSystem/kubitWireframe/commons/components/pillSelectorV2/index.ts new file mode 100644 index 00000000..0540595d --- /dev/null +++ b/src/designSystem/kubitWireframe/commons/components/pillSelectorV2/index.ts @@ -0,0 +1,2 @@ +export * from './styles'; +export * from './variants'; diff --git a/src/designSystem/kubitWireframe/commons/components/pillSelectorV2/styles.ts b/src/designSystem/kubitWireframe/commons/components/pillSelectorV2/styles.ts new file mode 100644 index 00000000..edadfb98 --- /dev/null +++ b/src/designSystem/kubitWireframe/commons/components/pillSelectorV2/styles.ts @@ -0,0 +1,46 @@ +import { + PillSelectorPropsStylesType, + PillSelectorStylesType, +} from '@/components/pillSelectorV2/types'; + +import { SPACINGS } from '../../foundations'; +import { PillSizeTypeV2, PillVariantTypeV2 } from '../variants'; +import { PillSelectorSizeTypeV2, PillSelectorVariantTypeV2 } from './variants'; + +type ColorType = { + [key: string]: { [key: string]: string }; +}; + +const buildCommonProps = (COLORS: ColorType): PillSelectorPropsStylesType => ({ + rootContainer: { + display: 'flex', + flex_direction: 'row', + max_width: 'fit-content', + gap: SPACINGS.spacing_100, + }, + pill: { + variant: PillVariantTypeV2.DEFAULT, + }, +}); + +export const getPillSelectorStylesV2 = (COLORS: ColorType): PillSelectorStylesType => { + const commonProps = buildCommonProps(COLORS); + return { + [PillSelectorVariantTypeV2.DEFAULT]: { + [PillSelectorSizeTypeV2.LARGE]: { + ...commonProps, + pill: { + ...commonProps.pill, + size: PillSizeTypeV2.LARGE, + }, + }, + [PillSelectorSizeTypeV2.SMALL]: { + ...commonProps, + pill: { + ...commonProps.pill, + size: PillSizeTypeV2.SMALL, + }, + }, + }, + }; +}; diff --git a/src/designSystem/kubitWireframe/commons/components/pillSelectorV2/variants.ts b/src/designSystem/kubitWireframe/commons/components/pillSelectorV2/variants.ts new file mode 100644 index 00000000..bb6dc7c1 --- /dev/null +++ b/src/designSystem/kubitWireframe/commons/components/pillSelectorV2/variants.ts @@ -0,0 +1,8 @@ +export enum PillSelectorVariantTypeV2 { + DEFAULT = 'DEFAULT', +} + +export enum PillSelectorSizeTypeV2 { + LARGE = 'LARGE', + SMALL = 'SMALL', +} diff --git a/src/designSystem/kubitWireframe/commons/components/pillV2/index.ts b/src/designSystem/kubitWireframe/commons/components/pillV2/index.ts new file mode 100644 index 00000000..0540595d --- /dev/null +++ b/src/designSystem/kubitWireframe/commons/components/pillV2/index.ts @@ -0,0 +1,2 @@ +export * from './styles'; +export * from './variants'; diff --git a/src/designSystem/kubitWireframe/commons/components/pillV2/styles.ts b/src/designSystem/kubitWireframe/commons/components/pillV2/styles.ts new file mode 100644 index 00000000..e705e641 --- /dev/null +++ b/src/designSystem/kubitWireframe/commons/components/pillV2/styles.ts @@ -0,0 +1,311 @@ +import { PillPropsStylesType, PillStateType, PillStylesType } from '@/components/pillV2/types'; + +import { shadowAfterStyles, transformShadow } from '../../../utils/wireframe'; +import { BORDERS, FONT_WEIGHT, RADIUS, SIZES, SPACINGS } from '../../foundations'; +import { TextVariantType } from '../variants'; +import { PillSizeTypeV2, PillVariantTypeV2 } from './variants'; + +type ColorType = { + [key: string]: { [key: string]: string }; +}; + +const buildCommonProps = (COLORS: ColorType): PillPropsStylesType => ({ + rootContainer: { + position: 'relative', + display: 'flex', + flex_direction: 'column', + align_items: 'center', + gap: SPACINGS.spacing_150, + border_radius: RADIUS.radius_300, + }, + contentContainer: { + display: 'flex', + flex_direction: 'row', + align_items: 'center', + gap: SPACINGS.spacing_150, + background_color: COLORS.NEUTRAL.color_neutral_bg_250, + border: `${BORDERS.border_50} solid ${COLORS.NEUTRAL.color_neutral_border_100}`, + border_radius: RADIUS.radius_300, + cursor: 'pointer', + ...transformShadow(RADIUS.radius_300), + ...shadowAfterStyles(RADIUS.radius_300, COLORS.ACCENT.color_accent_default_bg_100, '2px'), + }, + leftIcon: { + color: COLORS.NEUTRAL.color_neutral_icon_50, + height: SIZES.size_200, + width: SIZES.size_200, + }, + label: { + font_variant: TextVariantType.PARAGRAPH_SMALL_EXTENDED, + font_weight: FONT_WEIGHT.font_weight_400, + color: COLORS.NEUTRAL.color_neutral_font_50, + }, + rightIcon: { + color: COLORS.NEUTRAL.color_neutral_icon_50, + height: SIZES.size_200, + width: SIZES.size_200, + }, + input: { + position: 'absolute', + top: '0', + left: '0', + right: '0', + bottom: '0', + cursor: 'pointer', + border_radius: RADIUS.radius_300, + }, +}); + +export const getPillStylesV2 = (COLORS: { + [key: string]: { [key: string]: string }; +}): PillStylesType => { + const commonProps = buildCommonProps(COLORS); + const commonPropsLarge = { + ...commonProps, + contentContainer: { + ...commonProps.contentContainer, + padding: `${SPACINGS.spacing_250} ${SPACINGS.spacing_300}`, + }, + }; + const commonPropsSmall = { + ...commonProps, + contentContainer: { + ...commonProps.contentContainer, + padding: `${SPACINGS.spacing_150} ${SPACINGS.spacing_300}`, + }, + }; + + const commonPropsExtraSmall = { + ...commonProps, + contentContainer: { + ...commonProps.contentContainer, + padding: `${SPACINGS.spacing_100} ${SPACINGS.spacing_300}`, + }, + }; + return { + [PillVariantTypeV2.DEFAULT]: { + [PillSizeTypeV2.LARGE]: { + [PillStateType.DEFAULT]: { + ...commonPropsLarge, + }, + [PillStateType.SELECTED]: { + ...commonPropsLarge, + contentContainer: { + ...commonPropsLarge.contentContainer, + background_color: COLORS.SECONDARY.color_secondary_bg_150, + }, + leftIcon: { + ...commonPropsLarge.leftIcon, + color: COLORS.NEUTRAL.color_neutral_icon_300, + }, + label: { + ...commonPropsLarge.label, + color: COLORS.NEUTRAL.color_neutral_font_50, + }, + rightIcon: { + ...commonPropsLarge.rightIcon, + color: COLORS.NEUTRAL.color_neutral_icon_300, + }, + }, + [PillStateType.DISABLED]: { + ...commonPropsLarge, + contentContainer: { + ...commonPropsLarge.contentContainer, + background_color: COLORS.DISABLED.color_accentDisabled_bg_150, + border: `${BORDERS.border_50} solid ${COLORS.DISABLED.color_accentDisabled_border_50}`, + cursor: 'auto', + }, + leftIcon: { + ...commonPropsLarge.leftIcon, + color: COLORS.NEUTRAL.color_neutral_icon_50, + }, + label: { + ...commonPropsLarge.label, + color: COLORS.DISABLED.color_accentDisabled_font_50, + }, + rightIcon: { + ...commonPropsLarge.rightIcon, + color: COLORS.NEUTRAL.color_neutral_icon_50, + }, + input: { + ...commonPropsLarge.input, + cursor: 'auto', + }, + }, + [PillStateType.DISABLED_SELECTED]: { + ...commonPropsLarge, + contentContainer: { + ...commonPropsLarge.contentContainer, + background_color: COLORS.DISABLED.color_accentDisabled_bg_150, + border: `${BORDERS.border_50} solid ${COLORS.DISABLED.color_accentDisabled_border_50}`, + cursor: 'auto', + }, + leftIcon: { + ...commonPropsLarge.leftIcon, + color: COLORS.DISABLED.color_accentDisabled_icon_50, + }, + label: { + ...commonPropsLarge.label, + color: COLORS.DISABLED.color_accent_default_font_50, + }, + rightIcon: { + ...commonPropsLarge.rightIcon, + color: COLORS.DISABLED.color_accentDisabled_icon_50, + }, + input: { + ...commonPropsLarge.input, + cursor: 'auto', + }, + }, + }, + [PillSizeTypeV2.SMALL]: { + [PillStateType.DEFAULT]: { + ...commonPropsSmall, + }, + [PillStateType.SELECTED]: { + ...commonPropsSmall, + contentContainer: { + ...commonPropsSmall.contentContainer, + background_color: COLORS.SECONDARY.color_secondary_bg_150, + }, + leftIcon: { + ...commonPropsSmall.leftIcon, + color: COLORS.NEUTRAL.color_neutral_icon_300, + }, + label: { + ...commonPropsSmall.label, + color: COLORS.NEUTRAL.color_neutral_font_50, + }, + rightIcon: { + ...commonPropsSmall.rightIcon, + color: COLORS.NEUTRAL.color_neutral_icon_300, + }, + }, + [PillStateType.DISABLED]: { + ...commonPropsSmall, + contentContainer: { + ...commonPropsSmall.contentContainer, + background_color: COLORS.DISABLED.color_accentDisabled_bg_150, + border: `${BORDERS.border_50} solid ${COLORS.DISABLED.color_accentDisabled_border_50}`, + cursor: 'auto', + }, + leftIcon: { + ...commonPropsSmall.leftIcon, + color: COLORS.NEUTRAL.color_neutral_icon_50, + }, + label: { + ...commonPropsSmall.label, + color: COLORS.DISABLED.color_accentDisabled_font_50, + }, + rightIcon: { + ...commonPropsSmall.rightIcon, + color: COLORS.NEUTRAL.color_neutral_icon_50, + }, + input: { + ...commonPropsSmall.input, + cursor: 'auto', + }, + }, + [PillStateType.DISABLED_SELECTED]: { + ...commonPropsSmall, + contentContainer: { + ...commonPropsSmall.contentContainer, + background_color: COLORS.DISABLED.color_accentDisabled_bg_150, + border: `${BORDERS.border_50} solid ${COLORS.DISABLED.color_accentDisabled_border_50}`, + cursor: 'auto', + }, + leftIcon: { + ...commonPropsSmall.leftIcon, + color: COLORS.DISABLED.color_accentDisabled_icon_50, + }, + label: { + ...commonPropsSmall.label, + color: COLORS.DISABLED.color_accent_default_font_50, + }, + rightIcon: { + ...commonPropsSmall.rightIcon, + color: COLORS.DISABLED.color_accentDisabled_icon_50, + }, + input: { + ...commonPropsSmall.input, + cursor: 'auto', + }, + }, + }, + [PillSizeTypeV2.EXTRA_SMALL]: { + [PillStateType.DEFAULT]: { + ...commonPropsExtraSmall, + }, + [PillStateType.SELECTED]: { + ...commonPropsExtraSmall, + contentContainer: { + ...commonPropsExtraSmall.contentContainer, + background_color: COLORS.SECONDARY.color_secondary_bg_150, + }, + leftIcon: { + ...commonPropsExtraSmall.leftIcon, + color: COLORS.NEUTRAL.color_neutral_icon_300, + }, + label: { + ...commonPropsExtraSmall.label, + color: COLORS.NEUTRAL.color_neutral_font_50, + }, + rightIcon: { + ...commonPropsExtraSmall.rightIcon, + color: COLORS.NEUTRAL.color_neutral_icon_300, + }, + }, + [PillStateType.DISABLED]: { + ...commonPropsExtraSmall, + contentContainer: { + ...commonPropsExtraSmall.contentContainer, + background_color: COLORS.DISABLED.color_accentDisabled_bg_150, + border: `${BORDERS.border_50} solid ${COLORS.DISABLED.color_accentDisabled_border_50}`, + cursor: 'auto', + }, + leftIcon: { + ...commonPropsExtraSmall.leftIcon, + color: COLORS.NEUTRAL.color_neutral_icon_50, + }, + label: { + ...commonPropsExtraSmall.label, + color: COLORS.DISABLED.color_accentDisabled_font_50, + }, + rightIcon: { + ...commonPropsExtraSmall.rightIcon, + color: COLORS.NEUTRAL.color_neutral_icon_50, + }, + input: { + ...commonPropsExtraSmall.input, + cursor: 'auto', + }, + }, + [PillStateType.DISABLED_SELECTED]: { + ...commonPropsExtraSmall, + contentContainer: { + ...commonPropsExtraSmall.contentContainer, + background_color: COLORS.DISABLED.color_accentDisabled_bg_150, + border: `${BORDERS.border_50} solid ${COLORS.DISABLED.color_accentDisabled_border_50}`, + cursor: 'auto', + }, + leftIcon: { + ...commonPropsExtraSmall.leftIcon, + color: COLORS.DISABLED.color_accentDisabled_icon_50, + }, + label: { + ...commonPropsExtraSmall.label, + color: COLORS.DISABLED.color_accent_default_font_50, + }, + rightIcon: { + ...commonPropsExtraSmall.rightIcon, + color: COLORS.DISABLED.color_accentDisabled_icon_50, + }, + input: { + ...commonPropsExtraSmall.input, + cursor: 'auto', + }, + }, + }, + }, + }; +}; diff --git a/src/designSystem/kubitWireframe/commons/components/pillV2/variants.ts b/src/designSystem/kubitWireframe/commons/components/pillV2/variants.ts new file mode 100644 index 00000000..80fb9570 --- /dev/null +++ b/src/designSystem/kubitWireframe/commons/components/pillV2/variants.ts @@ -0,0 +1,9 @@ +export enum PillVariantTypeV2 { + DEFAULT = 'DEFAULT', +} + +export enum PillSizeTypeV2 { + LARGE = 'LARGE', + SMALL = 'SMALL', + EXTRA_SMALL = 'EXTRA_SMALL', +} diff --git a/src/designSystem/kubitWireframe/commons/components/styles.ts b/src/designSystem/kubitWireframe/commons/components/styles.ts index c8395a7f..de3671cd 100644 --- a/src/designSystem/kubitWireframe/commons/components/styles.ts +++ b/src/designSystem/kubitWireframe/commons/components/styles.ts @@ -41,6 +41,8 @@ import { getOverlayStyles } from './overlay'; import { getPageControlStyles } from './pageControl'; import { getPillStyles } from './pill'; import { getPillSelectorStyles } from './pillSelector'; +import { getPillSelectorStylesV2 } from './pillSelectorV2'; +import { getPillStylesV2 } from './pillV2'; import { POPOVER_STYLES } from './popover'; import { getQuickButtonStyles } from './quickButton'; import { getRadioButtonGroupStyles } from './radioButtonGroup'; @@ -109,7 +111,9 @@ export const getComponentsStyles = (COLORS: { OVERLAY_STYLES: getOverlayStyles(COLORS), PAGE_CONTROL_STYLES: getPageControlStyles(COLORS), PILL_SELECTOR_STYLES: getPillSelectorStyles(COLORS), + PILL_SELECTOR_STYLES_V2: getPillSelectorStylesV2(COLORS), PILL_STYLES: getPillStyles(COLORS), + PILL_STYLES_V2: getPillStylesV2(COLORS), POPOVER_STYLES: POPOVER_STYLES, PRIMARY_TABS_STYLES: getTabsStyles(COLORS), RADIO_BUTTON_GROUP_STYLES: getRadioButtonGroupStyles(COLORS), diff --git a/src/designSystem/kubitWireframe/commons/components/tagV2/styles.ts b/src/designSystem/kubitWireframe/commons/components/tagV2/styles.ts index d73d4c67..3844191f 100644 --- a/src/designSystem/kubitWireframe/commons/components/tagV2/styles.ts +++ b/src/designSystem/kubitWireframe/commons/components/tagV2/styles.ts @@ -40,5 +40,160 @@ export const getTagStylesV2 = (COLORS: { text_overflow: 'ellipsis', }, }, + [TagVariantTypeV2.SUCCESS]: { + container: { + width: 'fit-content', + max_width: '100%', + display: 'flex', + flex_direction: 'row', + align_items: 'center', + border_width: BORDERS.border_50, + border_radius: RADIUS.radius_100, + padding: `${SPACINGS.spacing_100} ${SPACINGS.spacing_150}`, + gap: SPACINGS.spacing_150, + ...transformShadow(RADIUS.radius_100), + ...shadowAfterStyles(RADIUS.radius_100, COLORS.ACCENT.color_accent_default_bg_100, '2px'), + background_color: COLORS.FEEDBACK.color_feedback_success_bg_50, + border_color: COLORS.FEEDBACK.color_feedback_success_border_50, + border_style: 'solid', + }, + icon: { + color: COLORS.SECONDARY.color_secondary_bg_150, + height: SIZES.size_200, + width: SIZES.size_200, + }, + label: { + font_variant: TextVariantType.PARAGRAPH_SMALL_EXTENDED, + font_weight: FONT_WEIGHT.font_weight_600, + color: COLORS.NEUTRAL.color_neutral_font_50, + overflow: 'hidden', + white_space: 'nowrap', + text_overflow: 'ellipsis', + }, + }, + [TagVariantTypeV2.ISSUE]: { + container: { + width: 'fit-content', + max_width: '100%', + display: 'flex', + flex_direction: 'row', + align_items: 'center', + border_width: BORDERS.border_50, + border_radius: RADIUS.radius_100, + padding: `${SPACINGS.spacing_100} ${SPACINGS.spacing_150}`, + gap: SPACINGS.spacing_150, + ...transformShadow(RADIUS.radius_100), + ...shadowAfterStyles(RADIUS.radius_100, COLORS.ACCENT.color_accent_default_bg_100, '2px'), + background_color: COLORS.FEEDBACK.color_feedback_warning_bg_50, + border_color: COLORS.FEEDBACK.color_feedback_warning_border_50, + border_style: 'solid', + }, + icon: { + color: COLORS.SECONDARY.color_secondary_bg_150, + height: SIZES.size_200, + width: SIZES.size_200, + }, + label: { + font_variant: TextVariantType.PARAGRAPH_SMALL_EXTENDED, + font_weight: FONT_WEIGHT.font_weight_600, + color: COLORS.NEUTRAL.color_neutral_font_50, + overflow: 'hidden', + white_space: 'nowrap', + text_overflow: 'ellipsis', + }, + }, + [TagVariantTypeV2.DORMANT]: { + container: { + width: 'fit-content', + max_width: '100%', + display: 'flex', + flex_direction: 'row', + align_items: 'center', + border_width: BORDERS.border_50, + border_radius: RADIUS.radius_100, + padding: `${SPACINGS.spacing_100} ${SPACINGS.spacing_150}`, + gap: SPACINGS.spacing_150, + ...transformShadow(RADIUS.radius_100), + ...shadowAfterStyles(RADIUS.radius_100, COLORS.ACCENT.color_accent_default_bg_100, '2px'), + background_color: COLORS.FEEDBACK.color_feedback_error_bg_50, + border_color: COLORS.FEEDBACK.color_feedback_error_border_50, + border_style: 'solid', + }, + icon: { + color: COLORS.SECONDARY.color_secondary_bg_150, + height: SIZES.size_200, + width: SIZES.size_200, + }, + label: { + font_variant: TextVariantType.PARAGRAPH_SMALL_EXTENDED, + font_weight: FONT_WEIGHT.font_weight_600, + color: COLORS.NEUTRAL.color_neutral_font_50, + overflow: 'hidden', + white_space: 'nowrap', + text_overflow: 'ellipsis', + }, + }, + [TagVariantTypeV2.DEPRECATED]: { + container: { + width: 'fit-content', + max_width: '100%', + display: 'flex', + flex_direction: 'row', + align_items: 'center', + border_width: BORDERS.border_50, + border_radius: RADIUS.radius_100, + padding: `${SPACINGS.spacing_100} ${SPACINGS.spacing_150}`, + gap: SPACINGS.spacing_150, + ...transformShadow(RADIUS.radius_100), + ...shadowAfterStyles(RADIUS.radius_100, COLORS.ACCENT.color_accent_default_bg_100, '2px'), + background_color: COLORS.NEUTRAL.color_neutral_bg_200, + border_color: COLORS.NEUTRAL.color_neutral_border_50, + border_style: 'solid', + }, + icon: { + color: COLORS.SECONDARY.color_secondary_bg_150, + height: SIZES.size_200, + width: SIZES.size_200, + }, + label: { + font_variant: TextVariantType.PARAGRAPH_SMALL_EXTENDED, + font_weight: FONT_WEIGHT.font_weight_600, + color: COLORS.NEUTRAL.color_neutral_font_50, + overflow: 'hidden', + white_space: 'nowrap', + text_overflow: 'ellipsis', + }, + }, + [TagVariantTypeV2.INFORMATIVE]: { + container: { + width: 'fit-content', + max_width: '100%', + display: 'flex', + flex_direction: 'row', + align_items: 'center', + border_width: BORDERS.border_50, + border_radius: RADIUS.radius_100, + padding: `${SPACINGS.spacing_100} ${SPACINGS.spacing_150}`, + gap: SPACINGS.spacing_150, + ...transformShadow(RADIUS.radius_100), + ...shadowAfterStyles(RADIUS.radius_100, COLORS.ACCENT.color_accent_default_bg_100, '2px'), + background_color: COLORS.FEEDBACK.color_feedback_info_bg_50, + border_color: COLORS.FEEDBACK.color_feedback_info_border_50, + border_style: 'solid', + }, + icon: { + color: COLORS.SECONDARY.color_secondary_bg_150, + height: SIZES.size_200, + width: SIZES.size_200, + }, + label: { + font_variant: TextVariantType.PARAGRAPH_SMALL_EXTENDED, + font_weight: FONT_WEIGHT.font_weight_600, + color: COLORS.NEUTRAL.color_neutral_font_50, + overflow: 'hidden', + white_space: 'nowrap', + text_overflow: 'ellipsis', + }, + }, }; }; diff --git a/src/designSystem/kubitWireframe/commons/components/tagV2/variants.ts b/src/designSystem/kubitWireframe/commons/components/tagV2/variants.ts index 52d03535..47fe6196 100644 --- a/src/designSystem/kubitWireframe/commons/components/tagV2/variants.ts +++ b/src/designSystem/kubitWireframe/commons/components/tagV2/variants.ts @@ -1,3 +1,8 @@ export enum TagVariantTypeV2 { DEFAULT = 'DEFAULT', + SUCCESS = 'SUCCESS', + ISSUE = 'ISSUE', + DORMANT = 'DORMANT', + DEPRECATED = 'DEPRECATED', + INFORMATIVE = 'INFORMATIVE', } diff --git a/src/designSystem/kubitWireframe/commons/components/variants.ts b/src/designSystem/kubitWireframe/commons/components/variants.ts index 0fedc1d3..ccb995cc 100644 --- a/src/designSystem/kubitWireframe/commons/components/variants.ts +++ b/src/designSystem/kubitWireframe/commons/components/variants.ts @@ -39,7 +39,9 @@ export * from './option/variants'; export * from './overlay/variants'; export * from './pageControl/variants'; export * from './pill/variants'; +export * from './pillV2/variants'; export * from './pillSelector/variants'; +export * from './pillSelectorV2/variants'; export * from './popover/variants'; export * from './tabs/variants'; export * from './quickButton/variants'; diff --git a/src/designSystem/variants.ts b/src/designSystem/variants.ts index bc4751db..bd891b00 100644 --- a/src/designSystem/variants.ts +++ b/src/designSystem/variants.ts @@ -74,6 +74,8 @@ export type Variants = { PageControlAutomateVariant?: object; PaginationVariantsTheme?: object; PillSelectorVariant?: object; + PillSelectorVariantTypeV2?: object; + PillSelectorSizeTypeV2?: object; PillVariantType?: object; PillSizeType?: object; PillVariantTypeV2?: object;