agroptima-design-system 1.0.7 → 1.0.8-beta.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "agroptima-design-system",
-  "version": "1.0.7",
+  "version": "1.0.8-beta.0",
   "scripts": {
     "dev": "npm run storybook",
     "storybook": "storybook dev -p 6006 --ci",

package/src/atoms/CardMenu/CardMenu.scss

@@ -12,6 +12,7 @@
   padding: config.$space-3x;
   gap: config.$space-3x;
   border-radius: config.$corner-radius-xxs;
+  border: none;
   text-decoration: none;
   cursor: default;
   &:hover {

package/src/atoms/CardMenu/CardMenuOption.tsx

@@ -1,25 +1,23 @@
 import './CardMenu.scss'
-import type { LinkProps as NextLinkProps } from 'next/link'
-import Link from 'next/link'
 import { classNames } from '../../utils/classNames'
+import { BaseButton, type BaseButtonProps } from '../Button'
 import type { IconType } from '../Icon'
 import { Icon } from '../Icon'
 
 export type Variant = 'primary'
 
-type LinkProps = NextLinkProps & React.AnchorHTMLAttributes<HTMLAnchorElement>
-export interface CardMenuOptionProps extends LinkProps {
+interface CustomProps {
   id?: string
   variant?: Variant
   icon: IconType
   title: string
   description?: string
-  disabled?: boolean
-  href: string
   active?: boolean
   error?: boolean
 }
 
+export type CardMenuOptionProps = CustomProps & BaseButtonProps
+
 export function CardMenuOption({
   id,
   variant = 'primary',
@@ -27,11 +25,9 @@ export function CardMenuOption({
   icon,
   title,
   description,
-  disabled,
-  href,
+  disabled = false,
   active,
   error,
-  prefetch = false,
   ...props
 }: CardMenuOptionProps): React.JSX.Element {
   const cssClasses = classNames('card-menu-option', variant, className, {
@@ -41,12 +37,10 @@ export function CardMenuOption({
   })
 
   return (
-    <Link
+    <BaseButton
       role="menuitem"
       className={cssClasses}
-      href={disabled ? '#' : href}
-      aria-disabled={disabled}
-      prefetch={prefetch}
+      disabled={disabled}
       {...props}
     >
       <div className="left">
@@ -59,6 +53,6 @@ export function CardMenuOption({
       <div className="right">
         <Icon name="AngleRight" className={variant} />
       </div>
-    </Link>
+    </BaseButton>
   )
 }

package/src/stories/CardMenu.stories.tsx

@@ -142,3 +142,16 @@ export const Menu: Story = {
     </CardMenu>
   ),
 } as unknown as Story
+
+export const asButton: Story = {
+  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 🔪"
+      onClick={() => alert('Clicked!')}
+    />
+  ),
+} as unknown as Story

package/src/stories/Changelog.mdx

@@ -4,6 +4,9 @@ import { Meta } from "@storybook/addon-docs/blocks";
 
 # Changelog
 
+## 1.0.8
+* CardMenuOption can be a button or a link
+
 ## 1.0.7
 
 * Add link styles to Alert component

package/tests/CardMenuOption.spec.tsx

@@ -19,4 +19,16 @@ describe('CardMenuOption', () => {
     expect(getByText(/this sword/i)).toBeInTheDocument()
     expect(getAllByRole('img')[0].title).toBe('Info')
   })
+  it('renders a button if dont have href', () => {
+    const { getByRole } = render(
+      <CardMenuOption
+        id="option-one"
+        icon="Info"
+        title="It's dangerous to go alone!"
+        description="Take this sword!"
+      />,
+    )
+
+    expect(getByRole('menuitem')).not.toHaveAttribute('href')
+  })
 })