Refactor(web-react): Card use DirectionExtended Dictionary

- Solves #DS-1649
lmc-eu · Jan 29, 2025 · 214ef37 · 214ef37
1 parent bad4fba
commit 214ef37
Show file tree

Hide file tree

Showing 6 changed files with 26 additions and 35 deletions.
diff --git 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
@@ -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<SpiritCardProps> = {
-  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
@@ -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
@@ -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
@@ -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<typeof Card> = {
     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<typeof Card> = {
     },
   },
   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
@@ -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<T = undefined> = (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<AlignmentXDictionaryType>
   | { [key: string]: NonNullable<AlignmentXDictionaryType> };
@@ -38,11 +31,9 @@ export interface CardElementTypeProps<T extends ElementType = 'article'> {
 }
 
 // Card types
-// Extend direction props to include horizontal-reversed
-export type HorizontalReversedType = 'horizontal-reversed';
 export type CardDirectionType =
-  | NonNullable<CardDirectionDictionaryType>
-  | { [key: string]: NonNullable<CardDirectionDictionaryType> };
+  | NonNullable<DirectionExtendedDictionaryType>
+  | { [key: string]: NonNullable<DirectionExtendedDictionaryType> };
 
 export interface CardProps<T extends ElementType = 'article'> extends CardElementTypeProps<T> {
   direction?: CardDirectionType;