agroptima-design-system 0.7.0 → 0.8.0

package/package.json

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

package/src/atoms/Badge.scss

@@ -0,0 +1,61 @@
+@use '../settings/color_alias';
+@use '../settings/typography/content' as typography;
+@use '../settings/config';
+@use '../settings/depth';
+
+.badge {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  padding: 0 config.$space-2x 0.063rem config.$space-2x;
+  border: 1px solid transparent;
+  border-radius: config.$corner-radius-xxl;
+  width: fit-content;
+  text-align: center;
+
+  @include typography.footnote-primary;
+
+  &.info {
+    background: color_alias.$info-color-600;
+    color: color_alias.$neutral-white;
+  }
+
+  &.success {
+    background: color_alias.$success-color-1000;
+    color: color_alias.$neutral-color-900;
+  }
+
+  &.warning {
+    background: color_alias.$warning-color-1000;
+    color: color_alias.$neutral-color-900;
+  }
+
+  &.error {
+    background: color_alias.$error-color-600;
+    color: color_alias.$neutral-white;
+  }
+
+  &.info-outlined {
+    background: color_alias.$info-color-50;
+    color: color_alias.$neutral-color-1000;
+    border: 1px solid color_alias.$info-color-1000;
+  }
+
+  &.success-outlined {
+    background: color_alias.$success-color-50;
+    color: color_alias.$neutral-color-1000;
+    border: 1px solid color_alias.$success-color-300;
+  }
+
+  &.warning-outlined {
+    background: color_alias.$warning-color-50;
+    color: color_alias.$neutral-color-1000;
+    border: 1px solid color_alias.$warning-color-1000;
+  }
+
+  &.error-outlined {
+    background: color_alias.$error-color-50;
+    color: color_alias.$neutral-color-1000;
+    border: 1px solid color_alias.$error-color-1000;
+  }
+}

package/src/atoms/Badge.tsx

@@ -0,0 +1,37 @@
+import './Badge.scss'
+
+export type Variant =
+  | 'info'
+  | 'success'
+  | 'warning'
+  | 'error'
+  | 'info-outlined'
+  | 'success-outlined'
+  | 'warning-outlined'
+  | 'error-outlined'
+
+export interface BadgeProps extends React.ComponentPropsWithoutRef<'div'> {
+  variant?: Variant
+  text: string
+  accessibilityLabel: string
+}
+
+export function Badge({
+  variant = 'info',
+  text,
+  accessibilityLabel,
+  ...props
+}: BadgeProps): React.JSX.Element {
+  const cssClasses = ['badge', variant].join(' ')
+
+  return (
+    <span
+      className={cssClasses}
+      role="status"
+      aria-label={accessibilityLabel}
+      {...props}
+    >
+      {text}
+    </span>
+  )
+}

package/src/atoms/Button.scss

@@ -27,6 +27,7 @@
   align-items: center;
   flex-shrink: 0;
   gap: config.$space-1x;
+  cursor: default;
   height: fit-content;
   padding: config.$space-2x config.$space-3x;
   border-radius: config.$corner-radius-m;

package/src/atoms/IconButton.scss

@@ -4,6 +4,7 @@
 .icon-button {
   border: none;
   background: none;
+  cursor: default;
 
   > .icon {
     width: config.$icon-size-5x;

package/src/stories/Badge.stories.ts

@@ -0,0 +1,56 @@
+import { StoryObj } from '@storybook/react'
+import { Badge } from '../atoms/Badge'
+
+const meta = {
+  title: 'Design System/Atoms/Badge',
+  component: Badge,
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      description: 'Component variant used',
+    },
+    text: {
+      description: 'Component text',
+    },
+    accessibilityLabel: {
+      description: 'Describes the component purpose',
+    },
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const figmaPrimaryDesign = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/DN2ova21vWqCRvPspBXgI1/Design-System?type=design&node-id=2137-1803&mode=dev',
+  },
+}
+
+export const BadgeWithText: Story = {
+  args: {
+    variant: 'error',
+    text: 'Game over',
+    accessibilityLabel: 'You have lost the game',
+  },
+  parameters: figmaPrimaryDesign,
+}
+
+export const BadgeWithNumber: Story = {
+  args: {
+    variant: 'warning',
+    text: '1',
+    accessibilityLabel: 'There is one item to review',
+  },
+  parameters: figmaPrimaryDesign,
+}
+
+export const BadgeWithNumbers: Story = {
+  args: {
+    variant: 'success-outlined',
+    text: '88',
+    accessibilityLabel: 'You have earned 88 points',
+  },
+  parameters: figmaPrimaryDesign,
+}

package/src/stories/Changelog.stories.mdx

@@ -3,6 +3,11 @@ import { Meta } from "@storybook/addon-docs";
 <Meta title="Changelog" />
 # Changelog
 
+## 0.8.0
+
+- Badge component is added to Storybook.
+- IconButton and Button have the default cursor on both link and button versions.
+
 ## 0.7.0
 
 - Modal component is added to Storybook.

package/tests/Badge.spec.tsx

@@ -0,0 +1,31 @@
+import React from 'react'
+import { render } from '@testing-library/react'
+import { Badge, Variant } from '@/atoms/Badge'
+
+describe('Badge', () => {
+  const variants = [
+    'info',
+    'success',
+    'warning',
+    'error',
+    'info-outlined',
+    'succes-outlined',
+    'warning-outlined',
+    'error-outlined',
+  ]
+  it.each(variants)('renders the %s variant with text', (variant) => {
+    const text = `${variant} badge text`
+    const accessibilityLabel = `${variant} badge label`
+
+    const { getByRole, getByText } = render(
+      <Badge
+        id={`${variant}-badge`}
+        accessibilityLabel={accessibilityLabel}
+        text={text}
+        variant={variant as Variant}
+      />,
+    )
+    expect(getByText(text)).toBeInTheDocument()
+    expect(getByRole('status')).toHaveClass(`badge ${variant}`)
+  })
+})