agroptima-design-system 0.8.0 → 0.9.2

package/package.json

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

package/src/atoms/Alert.scss

@@ -0,0 +1,123 @@
+@use '../settings/color_alias';
+@use '../settings/typography/content' as typography;
+@use '../settings/config';
+@use '../settings/depth';
+
+.alert {
+  display: flex;
+  justify-content: space-between;
+  width: 100%;
+  margin: auto;
+  padding: config.$space-2x config.$space-3x;
+  align-items: center;
+  gap: config.$space-2x;
+  border-radius: config.$corner-radius-xxs;
+
+  &.fit-content {
+    width: fit-content;
+  }
+
+  .information-container {
+    display: flex;
+    justify-content: flex-start;
+    align-items: center;
+    gap: config.$space-2x;
+  }
+
+  .text {
+    @include typography.body-regular-primary;
+  }
+
+  .icon {
+    width: config.$icon-size-5x;
+    height: config.$icon-size-5x;
+    > svg {
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  .icon-button {
+    .icon {
+      width: config.$icon-size-2x;
+      height: config.$icon-size-2x;
+
+      > svg {
+        fill: color_alias.$neutral-color-400;
+        path {
+          fill: color_alias.$neutral-color-400;
+        }
+      }
+    }
+    &:hover {
+      .icon {
+        > svg {
+          fill: color_alias.$neutral-color-400;
+          path {
+            fill: color_alias.$neutral-color-400;
+          }
+        }
+      }
+    }
+  }
+
+  &.info {
+    border: 1px solid color_alias.$info-color-600;
+    background: color_alias.$info-color-50;
+    .information-container {
+      .icon {
+        > svg {
+          fill: color_alias.$info-color-1000;
+          path {
+            fill: color_alias.$info-color-1000;
+          }
+        }
+      }
+    }
+  }
+
+  &.success {
+    border: 1px solid color_alias.$success-color-300;
+    background: color_alias.$success-color-50;
+    .information-container {
+      .icon {
+        > svg {
+          fill: color_alias.$success-color-1000;
+          path {
+            fill: color_alias.$success-color-1000;
+          }
+        }
+      }
+    }
+  }
+
+  &.warning {
+    border: 1px solid color_alias.$warning-color-300;
+    background: color_alias.$warning-color-50;
+    .information-container {
+      .icon {
+        > svg {
+          fill: color_alias.$warning-color-1000;
+          path {
+            fill: color_alias.$warning-color-1000;
+          }
+        }
+      }
+    }
+  }
+
+  &.error {
+    border: 1px solid color_alias.$error-color-600;
+    background: color_alias.$error-color-50;
+    .information-container {
+      .icon {
+        > svg {
+          fill: color_alias.$error-color-1000;
+          path {
+            fill: color_alias.$error-color-1000;
+          }
+        }
+      }
+    }
+  }
+}

package/src/atoms/Alert.tsx

@@ -0,0 +1,50 @@
+import { IconButton, IconButtonProps } from './IconButton'
+import { Icon } from './Icon'
+import './Alert.scss'
+
+export type Variant = 'info' | 'success' | 'warning' | 'error'
+
+export interface AlertProps extends React.ComponentPropsWithoutRef<'div'> {
+  id: string
+  variant?: Variant
+  text: string
+  button?: IconButtonProps
+  fitContent?: boolean
+}
+
+export enum IconVariant {
+  info = 'Info',
+  success = 'Check',
+  warning = 'Warning',
+  error = 'Error',
+}
+
+export function Alert({
+  id,
+  variant = 'success',
+  className = '',
+  fitContent = false,
+  text,
+  button,
+  ...props
+}: AlertProps): React.JSX.Element {
+  const fitContentClass = fitContent ? 'fit-content' : ''
+  const cssClasses = ['alert', variant, className, fitContentClass].join(' ')
+
+  return (
+    <div
+      role="alert"
+      aria-labelledby={`${id}-text`}
+      className={cssClasses}
+      {...props}
+    >
+      <div className="information-container">
+        <Icon name={IconVariant[variant]} className={variant} />
+        <span id={`${id}-text`} className="text">
+          {text}
+        </span>
+      </div>
+      {button && <IconButton {...button} variant="primary" />}
+    </div>
+  )
+}

package/src/atoms/Modal.scss

@@ -4,10 +4,21 @@
 @use '../settings/depth';
 
 .modal-container {
-  display: flex;
-  justify-content: center;
+  position: fixed;
+  inset: 0;
+  z-index: depth.$z-modal;
+
+  .backdrop {
+    position: fixed;
+    height: 100%;
+    opacity: 0.4;
+    background: color_alias.$neutral-color-900;
+    inset: 0;
+  }
 
   .modal {
+    top: 6.25rem;
+    margin: auto;
     display: flex;
     position: relative;
     padding: config.$space-5x;
@@ -18,7 +29,6 @@
     border-radius: config.$corner-radius-xxs;
     background: color_alias.$neutral-white;
     max-width: 34.5rem;
-    z-index: depth.$z-modal;
     box-shadow:
       0px 3px 6px -4px rgba(0, 0, 0, 0.12),
       0px 6px 16px 0px rgba(0, 0, 0, 0.08),
@@ -117,18 +127,5 @@
         }
       }
     }
-
-    + .backdrop {
-      position: fixed;
-      top: 0;
-      bottom: 0;
-      left: 0;
-      right: 0;
-      width: 100%;
-      height: 100%;
-      opacity: 0.4;
-      background: color_alias.$neutral-color-900;
-      z-index: depth.$z-modal-backdrop;
-    }
   }
 }

package/src/atoms/Modal.tsx

@@ -1,4 +1,3 @@
-import { useState } from 'react'
 import { Button, ButtonProps } from './Button'
 import { Icon } from './Icon'
 import './Modal.scss'
@@ -18,7 +17,6 @@ export interface ModalProps extends React.ComponentPropsWithoutRef<'div'> {
   variant?: Variant
   title: string
   buttons: ButtonProps[]
-  showModal?: boolean
 }
 
 export function Modal({
@@ -26,55 +24,36 @@ export function Modal({
   variant = 'info',
   title,
   buttons,
-  showModal = true,
   children,
   ...props
 }: ModalProps): React.JSX.Element {
-  const [isModalShown, setIsModalShown] = useState(showModal)
-
   const cssClasses = ['modal', variant].join(' ')
 
-  function withHideModal(onClick?: React.MouseEventHandler | undefined) {
-    return function (event: React.MouseEvent<Element, MouseEvent>) {
-      setIsModalShown(false)
-
-      if (onClick !== undefined) onClick(event)
-    }
-  }
-
   return (
-    <>
-      {isModalShown && (
-        <div className="modal-container">
-          <div
-            role="dialog"
-            aria-labelledby={`${id}-title`}
-            aria-describedby={`${id}-body`}
-            className={cssClasses}
-            {...props}
-          >
-            <div className="header">
-              <Icon name={IconVariant[variant]} className={variant} />
-              <h4 id={`${id}-title`} className="title">
-                {title}
-              </h4>
-            </div>
-            <div id={`${id}-body`} className="body">
-              {children}
-            </div>
-            <div className="footer">
-              {buttons.map(({ onClick, ...button }) => (
-                <Button
-                  key={button.label}
-                  {...button}
-                  onClick={withHideModal(onClick)}
-                />
-              ))}
-            </div>
-          </div>
-          <div className="backdrop"></div>
+    <div className="modal-container">
+      <div className="backdrop"></div>
+      <div
+        role="dialog"
+        aria-labelledby={`${id}-title`}
+        aria-describedby={`${id}-body`}
+        className={cssClasses}
+        {...props}
+      >
+        <div className="header">
+          <Icon name={IconVariant[variant]} className={variant} />
+          <h4 id={`${id}-title`} className="title">
+            {title}
+          </h4>
+        </div>
+        <div id={`${id}-body`} className="body">
+          {children}
+        </div>
+        <div className="footer">
+          {buttons.map(({ ...button }) => (
+            <Button key={button.label} {...button} />
+          ))}
         </div>
-      )}
-    </>
+      </div>
+    </div>
   )
 }

package/src/settings/_depth.scss

@@ -6,5 +6,5 @@ $above: 1; // use this for all values above the base
 $below: -1; // and this for all values below the base
 
 $z-dropdown-options: $base + $above;
-$z-modal-backdrop: $z-dropdown-options + $above;
-$z-modal: $z-modal-backdrop + $above;
+$z-alert: $z-dropdown-options + $above;
+$z-modal: $z-alert + $above;

package/src/stories/Alert.stories.ts

@@ -0,0 +1,78 @@
+import { Alert } from '../atoms/Alert'
+import { StoryObj } from '@storybook/react'
+
+const meta = {
+  title: 'Design System/Atoms/Alert',
+  component: Alert,
+  tags: ['autodocs'],
+  argTypes: {
+    id: {
+      description: 'Id for aria purposes',
+    },
+    text: {
+      description: 'Text to be shown on the component.',
+    },
+    variant: {
+      description: 'Variant used.',
+    },
+    button: {
+      description: 'Add an IconButton component to have the close button.',
+    },
+  },
+}
+
+const figmaPrimaryDesign = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/DN2ova21vWqCRvPspBXgI1/Design-System?type=design&node-id=570-118&mode=dev',
+  },
+}
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Info: Story = {
+  args: {
+    id: 'info-alert',
+    variant: 'info',
+    text: 'Thank you! But our princess is in another castle!',
+  },
+  parameters: figmaPrimaryDesign,
+}
+
+export const Success: Story = {
+  args: {
+    id: 'success-alert',
+    variant: 'success',
+    text: 'Thank you! But our princess is in another castle!',
+  },
+  parameters: figmaPrimaryDesign,
+}
+
+export const Warning: Story = {
+  args: {
+    id: 'warning-alert',
+    variant: 'warning',
+    text: 'Thank you! But our princess is in another castle!',
+    button: {
+      accessibilityLabel: 'Close alert',
+      onClick: () => alert('click'),
+      icon: 'Close',
+    },
+  },
+  parameters: figmaPrimaryDesign,
+}
+
+export const Error: Story = {
+  args: {
+    id: 'error-alert',
+    variant: 'error',
+    text: 'Thank you! But our princess is in another castle!',
+    button: {
+      accessibilityLabel: 'Close alert',
+      onClick: () => alert('click'),
+      icon: 'Close',
+    },
+  },
+  parameters: figmaPrimaryDesign,
+}

package/src/stories/Changelog.stories.mdx

@@ -3,6 +3,19 @@ import { Meta } from "@storybook/addon-docs";
 <Meta title="Changelog" />
 # Changelog
 
+## 0.9.2
+
+- Alert component can be rendered with fit-content width or 100% depending on the container.
+
+## 0.9.1
+
+- Modal and Alert components position fixed has been added.
+- Modal show/hide logic has been removed.
+
+## 0.9.0
+
+- Alert component is added to Storybook.
+
 ## 0.8.0
 
 - Badge component is added to Storybook.

package/src/stories/Modal.stories.js

@@ -26,9 +26,6 @@ const meta = {
     buttons: {
       description: 'Array of button to be shown on the footer',
     },
-    showModal: {
-      description: 'Boolean to control the component visibility state',
-    },
   },
   parameters: figmaPrimaryDesign,
 }
@@ -36,84 +33,97 @@ const meta = {
 export default meta
 
 export const Info = {
-  render: () => 
-    <Modal 
-      id='info-dangerous-alone'
-      variant='info'
-      title= "It's dangerous to go alone!"
-      buttons= {[{
-        label: 'Done',
-        onClick: () => alert('click'),
-      }]}
+  render: () => (
+    <Modal
+      id="info-dangerous-alone"
+      variant="info"
+      title="It's dangerous to go alone!"
+      buttons={[
+        {
+          label: 'Done',
+          onClick: () => alert('click'),
+        },
+      ]}
     >
-        Take this 🗡️
+      Take this 🗡️
     </Modal>
+  ),
 }
 
 export const Success = {
-  render: () => 
-    <Modal 
-      id='success-dangerous-alone'
-      variant='success'
-      title= "It's dangerous to go alone!"
-      buttons= {[{
-        label: 'Done',
-        onClick: () => alert('click'),
-      }]}
+  render: () => (
+    <Modal
+      id="success-dangerous-alone"
+      variant="success"
+      title="It's dangerous to go alone!"
+      buttons={[
+        {
+          label: 'Done',
+          onClick: () => alert('click'),
+        },
+      ]}
     >
-        Take this 🗡️
+      Take this 🗡️
     </Modal>
+  ),
 }
 
 export const Warning = {
-  render: () => 
-    <Modal 
-      id='warning-dangerous-alone'
-      variant='warning'
-      title= "It's dangerous to go alone!"
-      buttons= {[{
-        label: 'Done',
-        onClick: () => alert('click'),
-      }]}
+  render: () => (
+    <Modal
+      id="warning-dangerous-alone"
+      variant="warning"
+      title="It's dangerous to go alone!"
+      buttons={[
+        {
+          label: 'Done',
+          onClick: () => alert('click'),
+        },
+      ]}
     >
-        Take this 🗡️
+      Take this 🗡️
     </Modal>
+  ),
 }
 
 export const Error = {
-  render: () => 
-    <Modal 
-      id='error-dangerous-alone'
-      variant='error'
-      title= "It's dangerous to go alone!"
-      buttons= {[{
-        label: 'Done',
-        onClick: () => alert('click'),
-      }]}
+  render: () => (
+    <Modal
+      id="error-dangerous-alone"
+      variant="error"
+      title="It's dangerous to go alone!"
+      buttons={[
+        {
+          label: 'Done',
+          onClick: () => alert('click'),
+        },
+      ]}
     >
-        Take this 🗡️
+      Take this 🗡️
     </Modal>
+  ),
 }
 
 export const DeleteOrDiscard = {
-  render: () => 
-    <Modal 
-      id='discard-dangerous-alone'
-      variant='discard'
-      title= "It's dangerous to go alone!"
-      buttons= {[{
-        label: 'Cancel',
-        variant: 'neutral',
-        onClick: () => alert('click'),
-      },
-      {
-        label: 'Delete',
-        variant: 'error',
-        onClick: () => alert('click'),
-      }]}
+  render: () => (
+    <Modal
+      id="discard-dangerous-alone"
+      variant="discard"
+      title="It's dangerous to go alone!"
+      buttons={[
+        {
+          label: 'Cancel',
+          variant: 'neutral',
+          onClick: () => alert('click'),
+        },
+        {
+          label: 'Delete',
+          variant: 'error',
+          onClick: () => alert('click'),
+        },
+      ]}
     >
-        Take this 🗡️
+      Take this 🗡️
     </Modal>
+  ),
 }
-
-

package/tests/Alert.spec.tsx

@@ -0,0 +1,47 @@
+import React from 'react'
+import { screen, render } from '@testing-library/react'
+import { Alert, Variant } from '@/atoms/Alert'
+
+describe('Alert', () => {
+  const variants = ['info', 'success', 'warning', 'error']
+  it.each(variants)(
+    'renders the %s variant with text, expected styles and button',
+    (variant) => {
+      const text = `${variant} text`
+      const { getByRole, getByText } = render(
+        <Alert
+          id={`${variant}-modal`}
+          text={text}
+          variant={variant as Variant}
+          button={{
+            accessibilityLabel: 'Close alert',
+            onClick: () => alert('click'),
+            icon: 'Close',
+          }}
+        />,
+      )
+      expect(getByRole('alert')).toHaveClass(`alert ${variant}`)
+      expect(screen.getAllByRole('img')[0]).toHaveClass(`icon ${variant}`)
+      expect(getByText(text)).toBeInTheDocument()
+      expect(getByRole('button')).toBeInTheDocument()
+    },
+  )
+
+  it.each(variants)(
+    'renders the %s variant with text and expected styles',
+    (variant) => {
+      const text = `${variant} text`
+      const { getByRole, getByText, queryByRole } = render(
+        <Alert
+          id={`${variant}-modal`}
+          text={text}
+          variant={variant as Variant}
+        />,
+      )
+      expect(getByRole('alert')).toHaveClass(`alert ${variant}`)
+      expect(screen.getAllByRole('img')[0]).toHaveClass(`icon ${variant}`)
+      expect(getByText(text)).toBeInTheDocument()
+      expect(queryByRole('button')).not.toBeInTheDocument()
+    },
+  )
+})

package/tests/Modal.spec.tsx

@@ -60,27 +60,4 @@ describe('Modal', () => {
     expect(screen.getAllByRole('button')[1]).toHaveTextContent('Delete')
     expect(screen.getAllByRole('button')[1]).toHaveClass('error')
   })
-
-  it('does not render the modal when showModal is false', () => {
-    const title = 'Info modal'
-    const content = 'Info modal content'
-    const { queryByText, queryByRole } = render(
-      <Modal
-        id="shy-modal"
-        title={title}
-        showModal={false}
-        buttons={[
-          {
-            label: 'Done',
-          },
-        ]}
-      >
-        {content}
-      </Modal>,
-    )
-    expect(queryByRole('img')).not.toBeInTheDocument()
-    expect(queryByText(title)).not.toBeInTheDocument()
-    expect(queryByText(content)).not.toBeInTheDocument()
-    expect(queryByRole('button')).not.toBeInTheDocument()
-  })
 })