MOON-338: Add iconStart to emptyCardSelector

Jahia · Dec 5, 2024 · 68dda9a · 68dda9a
1 parent 8198127
commit 68dda9a
Show file tree

Hide file tree

Showing 4 changed files with 20 additions and 3 deletions.
diff --git a/src/components/CardSelector/EmptyCardSelector/EmptyCardSelector.scss b/src/components/CardSelector/EmptyCardSelector/EmptyCardSelector.scss
@@ -1,5 +1,5 @@
 .moonstone-emptyCardSelector {
-    gap: var(--spacing-small);
+    gap: var(--spacing-nano);
     width: 100%;
     min-height: 78px;
     padding: var(--spacing-medium) 0;
@@ -27,6 +27,7 @@
     pointer-events: none;
 }
 
-.moonstone-emptyCardSelector_label {
+.moonstone-emptyCardSelector_label,
+.moonstone-emptyCardSelector .moonstone-icon {
     color: var(--color-dark_plain60);
 }
diff --git a/src/components/CardSelector/EmptyCardSelector/EmptyCardSelector.stories.tsx b/src/components/CardSelector/EmptyCardSelector/EmptyCardSelector.stories.tsx
@@ -4,6 +4,7 @@ import {StoryObj, Meta} from '@storybook/react';
 import {EmptyCardSelector} from './index';
 import type {EmptyCardSelectorProps} from './EmptyCardSelector.types';
 import markdownNotes from './EmptyCardSelector.md';
+import {File} from '~/icons';
 
 const meta: Meta<typeof EmptyCardSelector> = {
     title: 'Components/CardSelector/EmptyCardSelector',
@@ -30,3 +31,11 @@ export const Default: Story = {
     },
     render: Template
 };
+
+export const Icon: Story = {
+    args: {
+        ...Default.args,
+        iconStart: <File/>
+    },
+    render: Template
+};
diff --git a/src/components/CardSelector/EmptyCardSelector/EmptyCardSelector.tsx b/src/components/CardSelector/EmptyCardSelector/EmptyCardSelector.tsx
@@ -6,6 +6,7 @@ import {Typography} from '~/components';
 
 const EmptyCardSelectorForwardRef: React.ForwardRefRenderFunction<HTMLButtonElement, EmptyCardSelectorProps> = ({
     label,
+    iconStart,
     id,
     className,
     isDisabled = false,
@@ -29,7 +30,7 @@ const EmptyCardSelectorForwardRef: React.ForwardRefRenderFunction<HTMLButtonElem
             type="button"
             className={clsx('moonstone-emptyCardSelector',
                 (isDisabled || isReadOnly) && 'moonstone-emptyCardSelector_disabled',
-                'flexCol_center',
+                'flexRow_center',
                 'flexFluid',
                 'alignCenter',
                 className
@@ -38,6 +39,7 @@ const EmptyCardSelectorForwardRef: React.ForwardRefRenderFunction<HTMLButtonElem
             onClick={e => handleOnClick(e)}
             {...props}
         >
+            {iconStart && iconStart}
             {label && <Typography className={clsx('moonstone-emptyCardSelector_label')}>{label}</Typography>}
         </button>
     );

diff --git a/src/components/CardSelector/EmptyCardSelector/EmptyCardSelector.types.ts b/src/components/CardSelector/EmptyCardSelector/EmptyCardSelector.types.ts
@@ -16,6 +16,11 @@ export type EmptyCardSelectorProps = {
     */
     label?: string;
 
+    /**
+    * EmptyCardSelector iconStart
+    */
+    iconStart?: React.ReactElement;
+
     /**
     * Disabled state
     */