agroptima-design-system 0.11.1 → 0.13.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "0.11.1",
+  "version": "0.13.0",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",

package/src/atoms/Button.scss

@@ -260,13 +260,7 @@
   &.success,
   &.warning,
   &.info,
-  &.neutral,
-  &.primary-outlined,
-  &.error-outlined,
-  &.success-outlined,
-  &.warning-outlined,
-  &.info-outlined,
-  &.neutral-outlined {
+  &.neutral {
     &:disabled {
       background: color_alias.$neutral-color-50;
     }
@@ -279,7 +273,8 @@
   &.info-outlined,
   &.neutral-outlined {
     &:disabled {
-      border: 1px solid transparent;
+      background: transparent;
+      border: 1px solid color_alias.$neutral-color-400;
     }
   }
 }

package/src/atoms/Card.scss

@@ -0,0 +1,71 @@
+@use '../settings/color_alias';
+@use '../settings/typography/content' as typography;
+@use '../settings/config';
+@use '../settings/breakpoints';
+
+.card {
+  display: flex;
+  flex-direction: column;
+  gap: config.$space-1x;
+  padding: config.$space-3x;
+
+  p {
+    margin: 0;
+  }
+
+  .actions {
+    display: flex;
+    gap: config.$space-4x;
+  }
+
+  .icon {
+    width: config.$icon-size-4x;
+    height: config.$icon-size-4x;
+    > svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .header {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    margin-bottom: config.$space-1x;
+
+    > .bold {
+      @include typography.body-bold;
+    }
+  }
+
+  .content {
+    margin-bottom: config.$space-2x;
+  }
+
+  .footer {
+    margin-top: auto;
+    .button {
+      width: 100%;
+    }
+  }
+
+  &.primary {
+    @include typography.body-regular-primary;
+    box-shadow: 0px 0px 3px 0px rgba(0, 0, 0, 0.25);
+
+    &.disabled {
+      @include typography.body-regular-disabled;
+      background: color_alias.$neutral-color-50;
+    }
+  }
+
+  // Media queries
+  // Mobile case
+  @media only screen and (min-width: breakpoints.$small) and (max-width: breakpoints.$medium) {
+    width: 100%;
+  }
+  // Tablet & Desktop cases
+  @media only screen and (min-width: breakpoints.$medium) {
+    width: 18.625rem;
+  }
+}

package/src/atoms/Card.tsx

@@ -0,0 +1,28 @@
+import './Card.scss'
+import React from 'react'
+import { classNames } from '../utils/classNames'
+
+export type Variant = 'primary'
+
+export interface CardProps extends React.ComponentPropsWithoutRef<'div'> {
+  variant?: Variant
+  isDisabled?: boolean
+}
+
+export function Card({
+  className,
+  variant = 'primary',
+  isDisabled = false,
+  children,
+  ...props
+}: CardProps): React.JSX.Element {
+  const cssClasses = classNames('card', className, variant, {
+    disabled: isDisabled,
+  })
+
+  return (
+    <div className={cssClasses} {...props}>
+      {children}
+    </div>
+  )
+}

package/src/atoms/CardContent.tsx

@@ -0,0 +1,20 @@
+import './Card.scss'
+import React from 'react'
+import { classNames } from '../utils/classNames'
+
+export interface CardContentProps
+  extends React.ComponentPropsWithoutRef<'div'> {}
+
+export function CardContent({
+  className,
+  children,
+  ...props
+}: CardContentProps): React.JSX.Element {
+  const cssClasses = classNames('content', className)
+
+  return (
+    <div className={cssClasses} {...props}>
+      {children}
+    </div>
+  )
+}

package/src/atoms/CardFooter.tsx

@@ -0,0 +1,20 @@
+import './Card.scss'
+import React from 'react'
+import { classNames } from '../utils/classNames'
+
+export interface CardFooterProps
+  extends React.ComponentPropsWithoutRef<'div'> {}
+
+export function CardFooter({
+  className,
+  children,
+  ...props
+}: CardFooterProps): React.JSX.Element {
+  const cssClasses = classNames('footer', className)
+
+  return (
+    <div className={cssClasses} {...props}>
+      {children}
+    </div>
+  )
+}

package/src/atoms/CardHeader.tsx

@@ -0,0 +1,25 @@
+import './Card.scss'
+import React from 'react'
+import { classNames } from '../utils/classNames'
+
+export interface CardHeaderProps extends React.ComponentPropsWithoutRef<'div'> {
+  title: string
+  isBold: boolean
+}
+
+export function CardHeader({
+  className,
+  title,
+  isBold = false,
+  children,
+  ...props
+}: CardHeaderProps): React.JSX.Element {
+  const cssClasses = classNames('header', className, { bold: isBold })
+
+  return (
+    <div className={cssClasses} {...props}>
+      <span className={classNames({ bold: isBold })}>{title}</span>
+      <div className="actions">{children}</div>
+    </div>
+  )
+}

package/src/atoms/CardMenu/CardMenu.scss

@@ -0,0 +1,84 @@
+@use '../../settings/color_alias';
+@use '../../settings/typography/content' as typography;
+@use '../../settings/config';
+@use '../../settings/depth';
+
+.card-menu-option {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  justify-content: space-between;
+  width: 100%;
+  padding: config.$space-3x;
+  gap: config.$space-3x;
+  border-radius: config.$corner-radius-xxs;
+  border-bottom: 1px solid color_alias.$neutral-color-200;
+  cursor: default;
+
+  @include typography.body-regular-primary;
+
+  .icon {
+    width: config.$icon-size-4x;
+    height: config.$icon-size-4x;
+    > svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .left {
+    display: flex;
+    flex-direction: column;
+    gap: config.$space-2x;
+
+    .title-container {
+      display: flex;
+      width: 100%;
+      gap: config.$space-2x;
+      justify-content: flex-start;
+      align-items: center;
+      flex: 1;
+    }
+
+    .content {
+      margin: 0;
+      text-align: left;
+    }
+  }
+
+  .right {
+    margin-top: auto;
+    margin-bottom: auto;
+  }
+
+  &.primary {
+    background: color_alias.$neutral-white;
+
+    .icon {
+      > svg {
+        fill: color_alias.$primary-color-600;
+        path {
+          fill: color_alias.$primary-color-600;
+        }
+      }
+    }
+
+    &:not(.disabled):hover {
+      background: color_alias.$primary-color-50;
+    }
+
+    &.disabled {
+      background: color_alias.$neutral-color-50;
+      @include typography.body-regular-disabled;
+
+      .icon {
+        > svg {
+          fill: color_alias.$neutral-color-400;
+          path {
+            fill: color_alias.$neutral-color-400;
+          }
+        }
+      }
+    }
+  }
+}

package/src/atoms/CardMenu/CardMenu.tsx

@@ -0,0 +1,12 @@
+export interface CardMenuProps extends React.ComponentPropsWithoutRef<'div'> {}
+
+export function CardMenu({
+  children,
+  ...props
+}: CardMenuProps): React.JSX.Element {
+  return (
+    <div role="menu" {...props}>
+      {children}
+    </div>
+  )
+}

package/src/atoms/CardMenu/CardMenuOption.tsx

@@ -0,0 +1,50 @@
+import { Icon, IconType } from '../Icon'
+import './CardMenu.scss'
+import { classNames } from '../../utils/classNames'
+
+export type Variant = 'primary'
+
+export interface CardMenuOptionProps
+  extends React.ComponentPropsWithoutRef<'div'> {
+  id?: string
+  variant?: Variant
+  icon: IconType
+  title: string
+  description?: string
+  disabled?: boolean
+}
+
+export function CardMenuOption({
+  id,
+  variant = 'primary',
+  className,
+  icon,
+  title,
+  description,
+  disabled,
+  ...props
+}: CardMenuOptionProps): React.JSX.Element {
+  const cssClasses = classNames('card-menu-option', variant, className, {
+    disabled: disabled,
+  })
+
+  return (
+    <div
+      role="menuitem"
+      className={cssClasses}
+      {...props}
+      aria-disabled={disabled}
+    >
+      <div className="left">
+        <div className="title-container">
+          <Icon name={icon} className={variant} />
+          <span className="title">{title}</span>
+        </div>
+        <p className="content">{description}</p>
+      </div>
+      <div className="right">
+        <Icon name="AngleRight" className={variant} />
+      </div>
+    </div>
+  )
+}

package/src/atoms/CardMenu/index.ts

@@ -0,0 +1,4 @@
+import { CardMenu } from './CardMenu'
+import { CardMenuOption } from './CardMenuOption'
+
+export { CardMenu, CardMenuOption }

package/src/atoms/CardsTable.scss

@@ -1,6 +1,7 @@
 @use '../settings/color_alias';
 @use '../settings/typography/cards_table' as typography;
 @use '../settings/config';
+@use '../settings/breakpoints';
 
 .cards-table-list {
   display: flex;
@@ -133,12 +134,8 @@
   }
 
   // Media queries
-  $small: 375px;
-  $medium: 768px;
-  $large: 1200px;
-
   // Mobile & tablet cases
-  @media only screen and (min-width: $small) and (max-width: $large) {
+  @media only screen and (min-width: breakpoints.$small) and (max-width: breakpoints.$large) {
     thead {
       display: none;
     }
@@ -177,7 +174,7 @@
     }
   }
   // Desktop case
-  @media only screen and (min-width: $large) {
+  @media only screen and (min-width: breakpoints.$large) {
     thead {
       display: flex;
     }

package/src/settings/_breakpoints.scss

@@ -0,0 +1,3 @@
+$small: 375px;
+$medium: 768px;
+$large: 1200px;

package/src/stories/Card.stories.js

@@ -0,0 +1,431 @@
+import { IconButton } from '../atoms/IconButton'
+import { Card } from '../atoms/Card'
+import { CardHeader } from '../atoms/CardHeader'
+import { CardContent } from '../atoms/CardContent'
+import { CardFooter } from '../atoms/CardFooter'
+import { Button } from '../atoms/Button'
+
+const figmaPrimaryDesign = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/DN2ova21vWqCRvPspBXgI1/Design-System?type=design&node-id=2236-754&mode=dev',
+  },
+}
+
+const meta = {
+  title: 'Design System/Atoms/Card',
+  component: Card,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      description: 'Component variant used',
+    },
+    isBold: {
+      description: 'Is component title shown with bold style?',
+    },
+    title: {
+      description: 'Title text',
+    },
+    isDisabled: {
+      description: 'Is component disabled?',
+    },
+  },
+  parameters: figmaPrimaryDesign,
+}
+
+export default meta
+
+export const ProductCard = {
+  render: () => (
+    <div style={{ display: 'flex' }}>
+      <Card variant="primary">
+        <CardHeader
+          isBold
+          title="Metal Gear Solid 5: Ground Zeroes + The Phantom Pain"
+        />
+        <CardContent>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              color: '#727272FF',
+              fontSize: '0.875rem',
+              fontWeight: '400',
+            }}
+          >
+            <span>PlayStation 4</span>
+            <div>
+              <span
+                style={{
+                  color: '#444',
+                  fontSize: '1rem',
+                  fontWeight: '700',
+                }}
+              >
+                6,99€&nbsp;
+              </span>
+              <span
+                style={{
+                  color: '#444',
+                  fontSize: '1rem',
+                  fontWeight: '400',
+                }}
+              >
+                / unit
+              </span>
+            </div>
+          </div>
+        </CardContent>
+        <CardFooter>
+          <Button variant="primary-outlined" label="Buy" />
+        </CardFooter>
+      </Card>
+    </div>
+  ),
+}
+
+export const ProductCardsGroup = {
+  render: () => (
+    <div
+      style={{
+        display: 'flex',
+        flexWrap: 'wrap',
+        width: '100%',
+        gap: '1.5rem',
+      }}
+    >
+      <Card variant="primary">
+        <CardHeader
+          isBold
+          title="Metal Gear Solid 5: Ground Zeroes + The Phantom Pain"
+        />
+        <CardContent>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              color: '#727272FF',
+              fontSize: '0.875rem',
+              fontWeight: '400',
+            }}
+          >
+            <span>PlayStation 4</span>
+            <div>
+              <span
+                style={{
+                  color: '#444',
+                  fontSize: '1rem',
+                  fontWeight: '700',
+                }}
+              >
+                6,99€&nbsp;
+              </span>
+              <span
+                style={{
+                  color: '#444',
+                  fontSize: '1rem',
+                  fontWeight: '400',
+                }}
+              >
+                / unit
+              </span>
+            </div>
+          </div>
+        </CardContent>
+        <CardFooter>
+          <Button variant="primary-outlined" label="Buy" />
+        </CardFooter>
+      </Card>
+
+      <Card variant="primary">
+        <CardHeader isBold title="Tekken 8" />
+        <CardContent>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              color: '#727272FF',
+              fontSize: '0.875rem',
+              fontWeight: '400',
+            }}
+          >
+            <span>PlayStation 5</span>
+            <div>
+              <span
+                style={{
+                  color: '#444',
+                  fontSize: '1rem',
+                  fontWeight: '700',
+                }}
+              >
+                79,99€&nbsp;
+              </span>
+              <span
+                style={{
+                  color: '#444',
+                  fontSize: '1rem',
+                  fontWeight: '400',
+                }}
+              >
+                / unit
+              </span>
+            </div>
+          </div>
+        </CardContent>
+        <CardFooter>
+          <Button variant="primary-outlined" label="Buy" />
+        </CardFooter>
+      </Card>
+
+      <Card variant="primary">
+        <CardHeader isBold title="The Witcher 3" />
+        <CardContent>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              color: '#727272FF',
+              fontSize: '0.875rem',
+              fontWeight: '400',
+            }}
+          >
+            <span>Nintendo Switch</span>
+            <div>
+              <span
+                style={{
+                  color: '#444',
+                  fontSize: '1rem',
+                  fontWeight: '700',
+                }}
+              >
+                19,99€&nbsp;
+              </span>
+              <span
+                style={{
+                  color: '#444',
+                  fontSize: '1rem',
+                  fontWeight: '400',
+                }}
+              >
+                / unit
+              </span>
+            </div>
+          </div>
+        </CardContent>
+        <CardFooter>
+          <Button variant="primary-outlined" label="Buy" />
+        </CardFooter>
+      </Card>
+
+      <Card variant="primary">
+        <CardHeader isBold title="Super Mario RPG" />
+        <CardContent>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              color: '#727272FF',
+              fontSize: '0.875rem',
+              fontWeight: '400',
+            }}
+          >
+            <span>Nintendo Switch</span>
+            <div>
+              <span
+                style={{
+                  color: '#444',
+                  fontSize: '1rem',
+                  fontWeight: '700',
+                }}
+              >
+                49,99€&nbsp;
+              </span>
+              <span
+                style={{
+                  color: '#444',
+                  fontSize: '1rem',
+                  fontWeight: '400',
+                }}
+              >
+                / unit
+              </span>
+            </div>
+          </div>
+        </CardContent>
+        <CardFooter>
+          <Button variant="primary-outlined" label="Buy" />
+        </CardFooter>
+      </Card>
+
+      <Card variant="primary">
+        <CardHeader isBold title="Stray" />
+        <CardContent>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              color: '#727272FF',
+              fontSize: '0.875rem',
+              fontWeight: '400',
+            }}
+          >
+            <span>PlayStation 4</span>
+            <div>
+              <span
+                style={{
+                  color: '#444',
+                  fontSize: '1rem',
+                  fontWeight: '700',
+                }}
+              >
+                15,99€&nbsp;
+              </span>
+              <span
+                style={{
+                  color: '#444',
+                  fontSize: '1rem',
+                  fontWeight: '400',
+                }}
+              >
+                / unit
+              </span>
+            </div>
+          </div>
+        </CardContent>
+        <CardFooter>
+          <Button variant="primary-outlined" label="Buy" />
+        </CardFooter>
+      </Card>
+
+      <Card variant="primary">
+        <CardHeader isBold title="The Medium" />
+        <CardContent>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              color: '#727272FF',
+              fontSize: '0.875rem',
+              fontWeight: '400',
+            }}
+          >
+            <span>PlayStation 5</span>
+            <div>
+              <span
+                style={{
+                  color: '#444',
+                  fontSize: '1rem',
+                  fontWeight: '700',
+                }}
+              >
+                45,99€&nbsp;
+              </span>
+              <span
+                style={{
+                  color: '#444',
+                  fontSize: '1rem',
+                  fontWeight: '400',
+                }}
+              >
+                / unit
+              </span>
+            </div>
+          </div>
+        </CardContent>
+        <CardFooter>
+          <Button variant="primary-outlined" label="Buy" />
+        </CardFooter>
+      </Card>
+
+      <Card variant="primary">
+        <CardHeader isBold title="The Legend of Zelda: Tears of the Kingdom" />
+        <CardContent>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              color: '#727272FF',
+              fontSize: '0.875rem',
+              fontWeight: '400',
+            }}
+          >
+            <span>Nintendo Switch</span>
+            <div>
+              <span
+                style={{
+                  color: '#444',
+                  fontSize: '1rem',
+                  fontWeight: '700',
+                }}
+              >
+                45,99€&nbsp;
+              </span>
+              <span
+                style={{
+                  color: '#444',
+                  fontSize: '1rem',
+                  fontWeight: '400',
+                }}
+              >
+                / unit
+              </span>
+            </div>
+          </div>
+        </CardContent>
+        <CardFooter>
+          <Button variant="primary-outlined" label="Buy" />
+        </CardFooter>
+      </Card>
+    </div>
+  ),
+}
+
+export const Primary = {
+  render: () => (
+    <div style={{ display: 'flex' }}>
+      <Card variant="primary">
+        <CardHeader title="Tekken 8">
+          <IconButton
+            icon="Edit"
+            accessibilityLabel="Edit game"
+            href="link.com"
+          />
+          <IconButton
+            icon="Export"
+            accessibilityLabel="Export game"
+            href="link.com"
+          />
+          <IconButton
+            icon="Delete"
+            accessibilityLabel="Delete game"
+            href="link.com"
+          />
+        </CardHeader>
+        <CardContent>
+          <p>TEKKEN 8 will feature exciting new gameplay focused on “Aggressive” tactics. Retaining TEKKEN's unique fighting game identity, the game will provide both players and spectators with the series' most thrilling experience yet with visceral screen-jarring attacks and environments that are both dynamic and destructible.</p>
+        </CardContent>
+        <CardFooter>
+          <Button variant="primary-outlined" label="Add to wishlist" />
+        </CardFooter>
+      </Card>
+    </div>
+  ),
+}
+
+export const Disabled = {
+  render: () => (
+    <div style={{ display: 'flex' }}>
+      <Card isDisabled={true} variant="primary">
+        <CardHeader title="Tekken 8">
+          <IconButton disabled icon="Delete" accessibilityLabel="Delete game" />
+        </CardHeader>
+        <CardContent>
+          <p>TEKKEN 8 will feature exciting new gameplay focused on “Aggressive” tactics. Retaining TEKKEN's unique fighting game identity, the game will provide both players and spectators with the series' most thrilling experience yet with visceral screen-jarring attacks and environments that are both dynamic and destructible.</p>
+        </CardContent>
+        <CardFooter>
+          <Button variant="primary-outlined" disabled label="Add to wishlist" />
+        </CardFooter>
+      </Card>
+    </div>
+  ),
+}

package/src/stories/CardMenu.stories.js

@@ -0,0 +1,103 @@
+import React from 'react'
+
+import { CardMenu, CardMenuOption } from '../atoms/CardMenu'
+
+const figmaPrimaryDesign = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/design/DN2ova21vWqCRvPspBXgI1/Design-System?node-id=2285-1811&m=dev',
+  },
+}
+
+const meta = {
+  title: 'Design System/Atoms/CardMenu',
+  component: CardMenuOption,
+  tags: ['autodocs'],
+  argTypes: {
+    id: {
+      description: 'Id for aria purposes',
+    },
+    icon: {
+      description: 'Component icon used',
+    },
+    variant: {
+      description: 'Component variant used',
+    },
+    title: {
+      description: 'Component title text',
+    },
+    description: {
+      description: 'Component description text',
+    },
+    isDisabled: {
+      description: 'Is the component disabled?',
+    },
+    onClick: {
+      description: 'Event triggered when the component is clicked',
+    },
+  },
+  parameters: figmaPrimaryDesign,
+}
+
+export default meta
+
+export const Option = {
+  render: () => (
+    <CardMenuOption
+      id="first-menu-option"
+      icon="Info"
+      variant="primary"
+      title="It's dangerous to go alone!"
+      description="Take this 🗡️ and this 🛡️ and this 💣 and this 🏹 and this 🔪 and this 🐴 and this 🔫 and this 🔪"
+      isDisabled={false}
+      onClick={() => alert('click')}
+    />
+  ),
+}
+
+export const DisabledOption = {
+  render: () => (
+    <CardMenuOption
+      id="first-menu-option"
+      icon="Info"
+      variant="primary"
+      title="It's dangerous to go alone!"
+      description="Take this 🗡️"
+      disabled
+    />
+  ),
+}
+
+export const Menu = {
+  render: () => (
+    <CardMenu>
+      <CardMenuOption
+        id="first-menu-option"
+        icon="AddCircle"
+        variant="primary"
+        title="Title"
+        description="Name of the videogame"
+        isDisabled={false}
+        onClick={() => alert('click title')}
+      />
+      <CardMenuOption
+        id="second-menu-option"
+        icon="Edit"
+        variant="primary"
+        title="Address"
+        description="Videogame company address"
+        isDisabled={false}
+        onClick={() => alert('click address')}
+      />
+      <CardMenuOption
+        id="third-menu-option"
+        icon="Info"
+        variant="primary"
+        title="Email"
+        description="Videogame company email"
+        isDisabled={false}
+        onClick={() => alert('click email')}
+      />
+    </CardMenu>
+  ),
+}

package/src/stories/Changelog.stories.mdx

@@ -3,6 +3,13 @@ import { Meta } from "@storybook/addon-docs";
 <Meta title="Changelog" />
 # Changelog
 
+
+## 0.13.0
+- Added CardMenuOption component to Storybook.
+
+## 0.12.0
+- Card component is added to Storybook.
+
 ## 0.11.1
 - Input and Checkbox components `id` prop now it's optional.
 - Fixed TextArea export component.

package/tests/Card.spec.tsx

@@ -0,0 +1,67 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { Card } from '@/atoms/Card'
+import { CardHeader } from '@/atoms/CardHeader'
+import { CardContent } from '@/atoms/CardContent'
+import { CardFooter } from '@/atoms/CardFooter'
+import { Button } from '@/atoms/Button'
+
+describe('Product card', () => {
+  it('renders the expected structure and data', () => {
+    const { getByText, container } = render(
+      <Card>
+        <CardHeader
+          isBold
+          title="Metal Gear Solid 5: Ground Zeroes + The Phantom Pain"
+        />
+        <CardContent>
+          <div
+            style={{
+              display: 'flex',
+              flexDirection: 'column',
+              color: '#9B9B9B',
+              fontSize: '0.875rem',
+              fontWeight: '400',
+            }}
+          >
+            <span>PlayStation 4</span>
+            <div>
+              <span
+                style={{
+                  color: '#444',
+                  fontSize: '1rem',
+                  fontWeight: '700',
+                }}
+              >
+                6,99€&nbsp;
+              </span>
+              <span
+                style={{
+                  color: '#444',
+                  fontSize: '1rem',
+                  fontWeight: '400',
+                }}
+              >
+                / unit
+              </span>
+            </div>
+          </div>
+        </CardContent>
+        <CardFooter>
+          <Button variant="primary-outlined" label="Buy" />
+        </CardFooter>
+      </Card>,
+    )
+
+    expect(container.getElementsByClassName('card').length).toBe(1)
+    expect(container.getElementsByClassName('primary').length).toBe(1)
+    expect(container.getElementsByClassName('header').length).toBe(1)
+    expect(container.getElementsByClassName('content').length).toBe(1)
+    expect(container.getElementsByClassName('footer').length).toBe(1)
+
+    expect(getByText(/Metal Gear Solid 5/i)).toBeInTheDocument()
+    expect(getByText(/PlayStation/i)).toBeInTheDocument()
+    expect(getByText(/6,99€/i)).toBeInTheDocument()
+    expect(getByText(/Buy/i)).toBeInTheDocument()
+  })
+})

package/tests/CardMenuOption.spec.tsx

@@ -0,0 +1,21 @@
+import React from 'react'
+import { screen, render } from '@testing-library/react'
+import { CardMenuOption } from '@/atoms/CardMenu/CardMenuOption'
+
+describe('CardMenuOption', () => {
+  it('renders', () => {
+    const { getByRole, getByText, getAllByRole } = render(
+      <CardMenuOption
+        id="option-one"
+        icon="Info"
+        title="It's dangerous to go alone!"
+        description="Take this sword!"
+      />,
+    )
+
+    expect(getByRole('menuitem')).toHaveClass(`card-menu-option primary`)
+    expect(getByText(/dangerous to go alone/i)).toBeInTheDocument()
+    expect(getByText(/this sword/i)).toBeInTheDocument()
+    expect(getAllByRole('img')[0].title).toBe('Info')
+  })
+})

package/tsconfig.json

@@ -22,6 +22,6 @@
       "@/*": ["./src/*"]
     }
   },
-  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/stories/CardsTable.stories.js", "src/stories/Modal.stories.js", "src/stories/Typography.stories.mdx"],
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts", "src/stories/CardsTable.stories.js", "src/stories/Modal.stories.js", "src/stories/Typography.stories.mdx", "src/stories/Card.stories.js"],
   "exclude": ["node_modules"]
 }