feat(SelectableCard): changes after review

livechat · Dec 9, 2024 · 191c1de · 191c1de
1 parent 283e170
commit 191c1de
Show file tree

Hide file tree

Showing 14 changed files with 113 additions and 99 deletions.
diff --git a/packages/react-components/src/components/SelectableCard/SelectableCard.mdx b/packages/react-components/src/components/SelectableCard/SelectableCard.mdx
@@ -57,7 +57,7 @@ import { ThumbnailSelectableCard } from '@livechat/design-system-react-component
   description="Card description"
   icon={<Icon source={Palette} />}
   isSelected
-  onClick={() = {}}
+  onClick={() => {}}
 />
 ```
 
@@ -68,7 +68,7 @@ The `GallerySelectableCard` is a component built on top of `SelectableCard`, con
 
 ##### Important
 
-Since the interface does not assume mandatory props related to the UI for this type of card, you must remember to provide an `icon` or `customElemnt` or `label`, otherwise the card will be empty.
+Since the interface does not assume mandatory props related to the UI for this type of card, you must remember to provide an `icon` or `customElement`.
 
 <Canvas of={GallerySelectableCard.RadioTypeExamples} sourceState="none" />
 
@@ -83,7 +83,7 @@ import { GallerySelectableCard } from '@livechat/design-system-react-components'
   selectionType="radio"
   icon={<Icon source={Palette} />}
   isSelected
-  onClick={() = {}}
+  onClick={() => {}}
 />
 ```
 
@@ -104,7 +104,7 @@ import { InteractiveSelectableCard, GridWrapper, GridCol } from '@livechat/desig
 <InteractiveSelectableCard
   selectionType="radio"
   isSelected
-  onClick={() = {}}
+  onClick={() => {}}
 >
   <GridWrapper>
     <GridCol>

diff --git a/packages/react-components/src/components/SelectableCard/SelectableCard.module.scss b/packages/react-components/src/components/SelectableCard/SelectableCard.module.scss
@@ -8,7 +8,7 @@ $base-class: 'selectable-card';
     box-shadow var(--transition-duration-fast-2) ease-in-out;
   border: 1px solid var(--border-basic-secondary);
   border-radius: var(--radius-3);
-  box-shadow: 0;
+  box-shadow: none;
   background: var(--surface-primary-default);
   width: max-content;
 
@@ -28,6 +28,7 @@ $base-class: 'selectable-card';
 
     .#{$base-class}__select-indicator {
       margin-right: var(--spacing-2);
+      height: 21px;
     }
   }
 
@@ -36,8 +37,8 @@ $base-class: 'selectable-card';
 
     .#{$base-class}__select-indicator {
       position: absolute;
-      top: 9px;
-      left: 12px;
+      top: var(--spacing-3);
+      left: var(--spacing-3);
     }
   }
 
@@ -47,8 +48,8 @@ $base-class: 'selectable-card';
 
     .#{$base-class}__select-indicator {
       position: absolute;
-      top: 13px;
-      left: 16px;
+      top: var(--spacing-4);
+      left: var(--spacing-4);
     }
   }
 
@@ -61,7 +62,7 @@ $base-class: 'selectable-card';
   &__select-indicator {
     display: flex;
     align-items: center;
-    height: 21px;
+    height: 16px;
 
     &__checkbox {
       height: 16px;

diff --git a/packages/react-components/src/components/SelectableCard/SelectableCard.stories.css b/packages/react-components/src/components/SelectableCard/SelectableCard.stories.css
@@ -1,29 +1,24 @@
-.thumbnail-custom-element {
+.base-custom-element {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
   border: 1px dashed var(--border-default);
   border-radius: var(--radius-1);
   background-color: var(--surface-basic-subtle);
-  padding: var(--spacing-2);
   color: var(--content-subtle);
+}
+
+.thumbnail-custom-element {
+  padding: var(--spacing-2);
   font-size: 12px;
 }
 
 .gallery-custom-element {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  border: 1px dashed var(--border-default);
-  border-radius: var(--radius-1);
-  background-color: var(--surface-basic-subtle);
   padding: var(--spacing-2);
   width: 100px;
   height: 100px;
   text-align: center;
-  color: var(--content-subtle);
   font-size: 12px;
 }
 
@@ -36,17 +31,9 @@
 }
 
 .interactive-custom-element {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  border: 1px dashed var(--border-default);
-  border-radius: var(--radius-1);
-  background-color: var(--surface-basic-subtle);
   padding: var(--spacing-8);
   width: 100%;
   height: 100%;
   text-align: center;
-  color: var(--content-subtle);
   font-size: 14px;
 }
diff --git a/packages/react-components/src/components/SelectableCard/SelectableCard.tsx b/packages/react-components/src/components/SelectableCard/SelectableCard.tsx
@@ -20,6 +20,7 @@ export const SelectableCard: FC<ISelectableCardProps> = ({
   isSelected = false,
   onClick,
   style,
+  ...props
 }) => {
   const mergedClassName = cx(
     styles[baseClass],
@@ -51,12 +52,14 @@ export const SelectableCard: FC<ISelectableCardProps> = ({
   return (
     <div
       aria-selected={isSelected}
+      aria-label={typeof children === 'string' ? children : undefined}
       role="button"
       tabIndex={0}
       className={mergedClassName}
       onClick={handleInteractiveClick}
       onKeyDown={handleOnKeyDown}
       style={style}
+      {...props}
     >
       <div className={styles[`${baseClass}__select-indicator`]}>
         {selectionType === 'radio' ? (

diff --git a/...ents/SelectableCard/components/GallerySelectableCard/GallerySelectableCard.components.tsx b/...ents/SelectableCard/components/GallerySelectableCard/GallerySelectableCard.components.tsx
@@ -10,39 +10,53 @@ import {
 import { Icon } from '../../../Icon';
 
 import { GallerySelectableCard } from './GallerySelectableCard';
+import { IGallerySelectableCardProps } from './types';
 
 const ICONS = [Palette, Building, AccountCircle, Group];
 
-interface IRadioCardsProps {
-  withIcon?: boolean;
-  withCustomElement?: boolean;
-}
-
 const getComponent = (
   index: number,
   isSelected: boolean,
   setSelectedIndex: (index: number) => void,
-  withIcon: boolean | undefined,
-  withCustomElement: boolean | undefined,
+  withIcon: boolean,
+  withCustomElement: boolean,
   type: 'radio' | 'checkbox'
-) => (
-  <GallerySelectableCard
-    key={index}
-    label={`Card ${index + 1}`}
-    selectionType={type}
-    isSelected={isSelected}
-    onClick={() => setSelectedIndex(index)}
-    {...(withIcon && { icon: <Icon size="xlarge" source={ICONS[index]} /> })}
-    {...(withCustomElement && {
+) => {
+  let props: IGallerySelectableCardProps = {
+    label: `Card ${index + 1}`,
+    selectionType: type,
+    isSelected,
+    onClick: () => setSelectedIndex(index),
+    icon: undefined,
+    customElement: undefined,
+  };
+
+  if (withIcon) {
+    const { customElement: _, ...newProps } = props;
+    props = {
+      ...newProps,
+      icon: <Icon size="xlarge" source={ICONS[index]} />,
+    };
+  } else if (withCustomElement) {
+    const { icon: _, ...newProps } = props;
+    props = {
+      ...newProps,
       customElement: (
-        <div className="gallery-custom-element">
+        <div className="base-custom-element gallery-custom-element">
           <Icon size="small" source={ICONS[index]} />
           <div>{`Custom element ${index + 1}`}</div>
         </div>
       ),
-    })}
-  />
-);
+    };
+  }
+
+  return <GallerySelectableCard key={index} {...props} />;
+};
+
+interface IRadioCardsProps {
+  withIcon: boolean;
+  withCustomElement: boolean;
+}
 
 export const RadioCards: React.FC<IRadioCardsProps> = ({
   withIcon,
@@ -63,8 +77,8 @@ export const RadioCards: React.FC<IRadioCardsProps> = ({
 };
 
 interface ICheckboxCardsProps {
-  withIcon?: boolean;
-  withCustomElement?: boolean;
+  withIcon: boolean;
+  withCustomElement: boolean;
 }
 
 export const CheckboxCards: React.FC<ICheckboxCardsProps> = ({

diff --git a/...ponents/SelectableCard/components/GallerySelectableCard/GallerySelectableCard.module.scss b/...ponents/SelectableCard/components/GallerySelectableCard/GallerySelectableCard.module.scss
@@ -7,6 +7,10 @@ $base-class: 'gallery-selectable-card';
   min-width: 60px;
   min-height: 72px;
 
+  &--with-label {
+    margin-bottom: 29px;
+  }
+
   &__label {
     position: absolute;
     top: 100%;

diff --git a/...components/SelectableCard/components/GallerySelectableCard/GallerySelectableCard.spec.tsx b/...components/SelectableCard/components/GallerySelectableCard/GallerySelectableCard.spec.tsx
@@ -22,6 +22,7 @@ describe('<GallerySelectableCard> component', () => {
       ...DEFAULT_PROPS,
       className: 'my-class',
       contentClassName: 'my-content-class',
+      icon: <div role="img" />,
     });
 
     expect(container.firstChild).toHaveClass('my-class');
@@ -41,6 +42,7 @@ describe('<GallerySelectableCard> component', () => {
     const { container, getByText } = renderComponent({
       ...DEFAULT_PROPS,
       label: 'Label',
+      icon: <div role="img" />,
     });
 
     expect(getByText('Label')).toBeInTheDocument();
@@ -55,15 +57,4 @@ describe('<GallerySelectableCard> component', () => {
 
     expect(getByText('Custom element')).toBeInTheDocument();
   });
-
-  it('should not render icon if custom element is provided', () => {
-    const { getByText, queryByRole } = renderComponent({
-      ...DEFAULT_PROPS,
-      icon: <div role="img" />,
-      customElement: <div>Custom element</div>,
-    });
-
-    expect(queryByRole('img')).not.toBeInTheDocument();
-    expect(getByText('Custom element')).toBeInTheDocument();
-  });
 });
diff --git a/...ponents/SelectableCard/components/GallerySelectableCard/GallerySelectableCard.stories.tsx b/...ponents/SelectableCard/components/GallerySelectableCard/GallerySelectableCard.stories.tsx
@@ -18,21 +18,21 @@ export default {
 export const RadioTypeExamples = () => (
   <>
     <StoryDescriptor title="With Icon">
-      <RadioCards withIcon />
+      <RadioCards withIcon withCustomElement={false} />
     </StoryDescriptor>
     <StoryDescriptor title="With Custom element">
-      <RadioCards withIcon withCustomElement />
+      <RadioCards withIcon={false} withCustomElement />
     </StoryDescriptor>
   </>
 );
 
 export const CheckboxTypeExamples = () => (
   <>
     <StoryDescriptor title="With Icon">
-      <CheckboxCards withIcon />
+      <CheckboxCards withIcon withCustomElement={false} />
     </StoryDescriptor>
     <StoryDescriptor title="With Custom element">
-      <CheckboxCards withIcon withCustomElement />
+      <CheckboxCards withIcon={false} withCustomElement />
     </StoryDescriptor>
   </>
 );
diff --git a/.../src/components/SelectableCard/components/GallerySelectableCard/GallerySelectableCard.tsx b/.../src/components/SelectableCard/components/GallerySelectableCard/GallerySelectableCard.tsx
@@ -16,19 +16,16 @@ export const GallerySelectableCard: FC<IGallerySelectableCardProps> = ({
   icon,
   customElement,
   contentClassName,
+  className,
   ...props
 }) => {
   return (
     <SelectableCard
       {...props}
+      className={cx(className, {
+        [styles[`${baseClass}--with-label`]]: label,
+      })}
       kind="gallery"
-      style={
-        label
-          ? {
-              marginBottom: '29px',
-            }
-          : {}
-      }
     >
       <div
         role="presentation"

diff --git a/.../react-components/src/components/SelectableCard/components/GallerySelectableCard/types.ts b/.../react-components/src/components/SelectableCard/components/GallerySelectableCard/types.ts
@@ -2,18 +2,34 @@ import * as React from 'react';
 
 import { ISelectableCardCoreProps } from '../../types';
 
-export interface IGallerySelectableCardProps
-  extends Omit<ISelectableCardCoreProps, 'children'> {
+type BaseProps = {
   /**
    * The label of the card
    */
   label?: string;
+};
+
+type WithIcon = BaseProps & {
   /**
    * The icon of the card
    */
-  icon?: React.ReactNode;
+  icon: React.ReactNode;
   /**
    * The custom element of the card
    */
-  customElement?: React.ReactNode;
-}
+  customElement?: never;
+};
+
+type WithCustomElement = BaseProps & {
+  /**
+   * The icon of the card
+   */
+  icon?: never;
+  /**
+   * The custom element of the card
+   */
+  customElement: React.ReactNode;
+};
+
+export type IGallerySelectableCardProps = (WithIcon | WithCustomElement) &
+  Omit<ISelectableCardCoreProps, 'children'>;