From 214ef376e83dc52355e025de87b5dac3c4d27e16 Mon Sep 17 00:00:00 2001 From: Pavel Klibani Date: Mon, 27 Jan 2025 11:56:02 +0100 Subject: [PATCH] Refactor(web-react): Card use DirectionExtended Dictionary - Solves #DS-1649 --- .../examples/CardComposition.stories.tsx | 10 +++++----- packages/web-react/src/components/Card/Card.tsx | 4 ++-- .../web-react/src/components/Card/README.md | 10 +++++----- .../__fixtures__/CardStylePropsDataProvider.ts | 12 ++++++------ .../components/Card/stories/Card.stories.tsx | 8 ++++---- packages/web-react/src/types/card.ts | 17 ++++------------- 6 files changed, 26 insertions(+), 35 deletions(-) diff --git a/packages/web-react/docs/stories/examples/CardComposition.stories.tsx b/packages/web-react/docs/stories/examples/CardComposition.stories.tsx index d1566d66fd..e31f3e4e59 100644 --- a/packages/web-react/docs/stories/examples/CardComposition.stories.tsx +++ b/packages/web-react/docs/stories/examples/CardComposition.stories.tsx @@ -17,8 +17,8 @@ import { UseCardStyleProps, } from '../../../src/components'; import { LOGO, MEDIA_IMAGE } from '../../../src/components/Card/demo/constants'; -import { AlignmentX, Sizes } from '../../../src/constants'; -import { CardDirection, CardSizes, GridColumns, SizesDictionaryType } from '../../../src/types'; +import { AlignmentX, DirectionExtended, Sizes } from '../../../src/constants'; +import { CardSizes, GridColumns, SizesDictionaryType } from '../../../src/types'; type CardCompositionType = { cardElementType: ElementType; @@ -97,10 +97,10 @@ export default { direction: { control: 'select', description: 'Direction of the card.', - options: [...Object.values(CardDirection)], + options: [...Object.values(DirectionExtended)], table: { category: 'Card', - defaultValue: { summary: CardDirection.VERTICAL }, + defaultValue: { summary: DirectionExtended.VERTICAL }, }, }, eyebrowText: { @@ -295,7 +295,7 @@ export default { cardLogoSize: Sizes.MEDIUM, contentText: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat. Morbi fringilla convallis sapien. Sed ac felis. Aliquam erat volutpat. Aliquam euismod. Aenean vel lectus. Nunc imperdiet justo nec dolor.', - direction: CardDirection.VERTICAL, + direction: DirectionExtended.VERTICAL, eyebrowText: 'Eyebrow title', footerAlignmentX: AlignmentX.LEFT, gridCols: 3, diff --git a/packages/web-react/src/components/Card/Card.tsx b/packages/web-react/src/components/Card/Card.tsx index d45e3018ff..97382c114b 100644 --- a/packages/web-react/src/components/Card/Card.tsx +++ b/packages/web-react/src/components/Card/Card.tsx @@ -2,13 +2,13 @@ import classNames from 'classnames'; import React, { ElementType } from 'react'; -import { Direction } from '../../constants'; +import { DirectionExtended } from '../../constants'; import { useStyleProps } from '../../hooks'; import { SpiritCardProps } from '../../types'; import { useCardStyleProps } from './useCardStyleProps'; const defaultProps: Partial = { - direction: Direction.VERTICAL, + direction: DirectionExtended.VERTICAL, elementType: 'article', isBoxed: false, }; diff --git a/packages/web-react/src/components/Card/README.md b/packages/web-react/src/components/Card/README.md index 951fb48ccf..0f30237949 100644 --- a/packages/web-react/src/components/Card/README.md +++ b/packages/web-react/src/components/Card/README.md @@ -89,11 +89,11 @@ Card can be displayed with a border and a box shadow on hover. ### API -| Name | Type | Default | Required | Description | -| ------------- | ---------------------------------------------------------------------------------- | ---------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | -| `direction` | \[[Direction dictionary][dictionary-direction], `horizontal-reversed` \| `object`] | `vertical` | ✕ | Direction of the content inside Card component, use object to set responsive values, e.g. `{ mobile: 'horizontal', tablet: 'vertical', desktop: 'horizontal-reversed' }` | -| `elementType` | `ElementType` | `article` | ✕ | Type of element | -| `isBoxed` | `bool` | `false` | ✕ | Whether the Card have border | +| Name | Type | Default | Required | Description | +| ------------- | ------------------------------------------------------------------- | ---------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | +| `direction` | \[[DirectionExtended dictionary][dictionary-direction] \| `object`] | `vertical` | ✕ | Direction of the content inside Card component, use object to set responsive values, e.g. `{ mobile: 'horizontal', tablet: 'vertical', desktop: 'horizontal-reversed' }` | +| `elementType` | `ElementType` | `article` | ✕ | Type of element | +| `isBoxed` | `bool` | `false` | ✕ | Whether the Card have border | On top of the API options, the components accept [additional attributes][readme-additional-attributes]. If you need more control over the styling of a component, you can use [style props][readme-style-props] diff --git a/packages/web-react/src/components/Card/__tests__/__fixtures__/CardStylePropsDataProvider.ts b/packages/web-react/src/components/Card/__tests__/__fixtures__/CardStylePropsDataProvider.ts index 9472040248..5dcd2d8a15 100644 --- a/packages/web-react/src/components/Card/__tests__/__fixtures__/CardStylePropsDataProvider.ts +++ b/packages/web-react/src/components/Card/__tests__/__fixtures__/CardStylePropsDataProvider.ts @@ -1,5 +1,5 @@ -import { AlignmentX } from '../../../../constants'; -import { AlignmentXDictionaryType, CardDirection, CardSizes } from '../../../../types'; +import { AlignmentX, DirectionExtended } from '../../../../constants'; +import { AlignmentXDictionaryType, CardSizes } from '../../../../types'; import { toPascalCase } from '../../../../utils'; import { UseCardStyleProps, UseCardStylePropsReturn } from '../../useCardStyleProps'; @@ -53,17 +53,17 @@ const sizeDataProvider = Object.values(CardSizes).map((size) => ({ export const textPropsDataProvider: TextPropsDataProviderType[] = [ // Direction-specific classes { - props: { direction: CardDirection.VERTICAL }, + props: { direction: DirectionExtended.VERTICAL }, description: 'return correct classProps for direction vertical', expected: { classProps: generateExpectedClassProps({ root: 'Card Card--vertical' }) }, }, { - props: { direction: CardDirection.HORIZONTAL }, + props: { direction: DirectionExtended.HORIZONTAL }, description: 'return correct classProps for direction horizontal', expected: { classProps: generateExpectedClassProps({ root: 'Card Card--horizontal' }) }, }, { - props: { direction: CardDirection.HORIZONTAL_REVERSED }, + props: { direction: DirectionExtended.HORIZONTAL_REVERSED }, description: 'return correct classProps for direction horizontal reversed', expected: { classProps: generateExpectedClassProps({ root: 'Card Card--horizontalReversed' }) }, }, @@ -136,7 +136,7 @@ export const textPropsDataProvider: TextPropsDataProviderType[] = [ { props: { artworkAlignmentX: AlignmentX.LEFT, - direction: CardDirection.HORIZONTAL, + direction: DirectionExtended.HORIZONTAL, footerAlignmentX: AlignmentX.RIGHT, hasFilledHeight: true, isBoxed: true, diff --git a/packages/web-react/src/components/Card/stories/Card.stories.tsx b/packages/web-react/src/components/Card/stories/Card.stories.tsx index 20a17284f4..c17b15b930 100644 --- a/packages/web-react/src/components/Card/stories/Card.stories.tsx +++ b/packages/web-react/src/components/Card/stories/Card.stories.tsx @@ -1,7 +1,7 @@ import { Markdown } from '@storybook/blocks'; import type { Meta, StoryObj } from '@storybook/react'; import React from 'react'; -import { CardDirection } from '../../../types'; +import { DirectionExtended } from '../../../constants'; import { ButtonLink } from '../../ButtonLink'; import { Container } from '../../Container'; import { PartnerLogo } from '../../PartnerLogo'; @@ -27,9 +27,9 @@ const meta: Meta = { direction: { control: 'select', description: 'Direction of the card.', - options: [...Object.values(CardDirection)], + options: [...Object.values(DirectionExtended)], table: { - defaultValue: { summary: CardDirection.VERTICAL }, + defaultValue: { summary: DirectionExtended.VERTICAL }, }, }, elementType: { @@ -44,7 +44,7 @@ const meta: Meta = { }, }, args: { - direction: CardDirection.VERTICAL, + direction: DirectionExtended.VERTICAL, elementType: 'article', isBoxed: false, }, diff --git a/packages/web-react/src/types/card.ts b/packages/web-react/src/types/card.ts index 5c200bef04..b3164ae506 100644 --- a/packages/web-react/src/types/card.ts +++ b/packages/web-react/src/types/card.ts @@ -1,8 +1,9 @@ import { ElementType, JSXElementConstructor } from 'react'; -import { Direction, Sizes } from '../constants'; +import { Sizes } from '../constants'; import { AlignmentXDictionaryType, ChildrenProps, + DirectionExtendedDictionaryType, SpiritPolymorphicElementPropsWithRef, StyleProps, TransferProps, @@ -16,14 +17,6 @@ export const CardSizes = { export type CardSizesDictionaryKeys = keyof typeof CardSizes; export type CardSizesDictionaryType = (typeof CardSizes)[CardSizesDictionaryKeys] | T; -export const CardDirection = { - ...Direction, - HORIZONTAL_REVERSED: 'horizontal-reversed', -}; - -export type CardDirectionDictionaryKeys = keyof typeof CardDirection; -export type CardDirectionDictionaryType = (typeof CardDirection)[CardDirectionDictionaryKeys]; - export type CardAlignmentXType = | NonNullable | { [key: string]: NonNullable }; @@ -38,11 +31,9 @@ export interface CardElementTypeProps { } // Card types -// Extend direction props to include horizontal-reversed -export type HorizontalReversedType = 'horizontal-reversed'; export type CardDirectionType = - | NonNullable - | { [key: string]: NonNullable }; + | NonNullable + | { [key: string]: NonNullable }; export interface CardProps extends CardElementTypeProps { direction?: CardDirectionType;