agroptima-design-system 0.12.0 → 0.13.0

package/package.json

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

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/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,10 @@ 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.
 

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')
+  })
+})