feat(card): removed unused code & improve doc

Author: var-poro

packages/ods-react/src/components/card/src/components/ods-card/OdsCard.tsx

@@ -17,7 +17,7 @@ const OdsCard: FC<OdsCardProp> = forwardRef(({
       className={ classNames(
         style['ods-card'],
         style[`ods-card--${color}`],
-        className
+        className,
       ) }
       ref={ ref }
       { ...props }>

packages/ods-react/src/components/card/src/constants/card-color.ts

@@ -11,4 +11,4 @@ export {
   ODS_CARD_COLOR,
   ODS_CARD_COLORS,
   type OdsCardColor,
-}; 
+};

packages/storybook/stories/components/card/card.stories.tsx

@@ -8,8 +8,6 @@ type Story = StoryObj<OdsCardProp>;
 
 const meta: Meta<OdsCardProp> = {
   component: OdsCard,
-  // @ts-ignore see https://github.com/storybookjs/storybook/issues/27535
-  // subcomponents: { OdsCardXxx }, // Uncomment if sub components, otherwise remove
   title: 'ODS Components/Card',
 };
 
@@ -35,39 +33,30 @@ export const Demo: Story = {
     },
   }),
   args: {
-    color: 'primary',
     children: 'Hello, world!',
   },
 };
 
 export const Default: Story = {
   tags: ['!dev'],
-  render: () => (
+  render: ({}) => (
     <OdsCard>
       <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br />Interdum et malesuada fames ac ante ipsum primis in faucibus.</p>
     </OdsCard>
   ),
 };
 
 export const Color: Story = {
+  decorators: [(story) => <div style={{ display: 'flex', gap: '16px' }}>{ story() }</div>],
   tags: ['!dev'],
-  render: () => (
-    <div style={{ display: 'flex', gap: '16px' }}>
+  render: ({}) => (
+    <>
       <OdsCard color="primary">
         <p>Primary Card</p>
       </OdsCard>
       <OdsCard color="neutral">
         <p>Neutral Card</p>
       </OdsCard>
-    </div>
-  ),
-};
-
-export const CustomCSS: Story = {
-  tags: ['!dev'],
-  render: () => (
-    <OdsCard style={{ width: '500px', display: 'flex', justifyContent: 'center', border: '3px solid green' }}>
-      <p>Custom styled card</p>
-    </OdsCard>
+    </>
   ),
 };

packages/storybook/stories/components/card/technical-information.mdx

@@ -15,10 +15,6 @@ import * as CardStories from './card.stories';
 
 <TechnicalSpecification data={ SpecificationsCard } of={ CardStories } />
 
-<Heading label="Style customization" level={ 2 } />
-
-You can add your own style on the card element directly by selecting it.
-
 <Heading label="Examples" level={ 2 } />
 
 <Heading label="Default" level={ 3 } />
@@ -27,6 +23,4 @@ You can add your own style on the card element directly by selecting it.
 
 <Heading label="Color" level={ 3 } />
 
-<Canvas of={ CardStories.Demo } sourceState="shown" />
-
-...
+<Canvas of={ CardStories.Color } sourceState="shown" />