agroptima-design-system 0.27.5 → 0.27.7

package/package.json

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

package/src/atoms/{Alert.scss → Alert/Alert.scss}

@@ -1,7 +1,7 @@
-@use '../settings/color_alias';
-@use '../settings/typography/content' as typography;
-@use '../settings/config';
-@use '../settings/depth';
+@use '../../settings/color_alias';
+@use '../../settings/typography/content' as typography;
+@use '../../settings/config';
+@use '../../settings/depth';
 
 .alert {
   display: flex;
@@ -66,6 +66,10 @@
     }
   }
 
+  &.fade-out {
+    animation: fadeOut 3s ease-out forwards;
+  }
+
   &.info {
     border: 1px solid color_alias.$info-color-600;
     background: color_alias.$info-color-50;
@@ -125,4 +129,17 @@
       }
     }
   }
+
+  @keyframes fadeOut {
+    0% {
+      opacity: 1;
+    }
+    75% {
+      opacity: 1;
+    }
+    100% {
+      opacity: 0;
+      display: none;
+    }
+  }
 }

package/src/atoms/{Alert.tsx → Alert/Alert.tsx}

@@ -1,8 +1,8 @@
-import type { IconButtonProps } from './Button'
-import { IconButton } from './Button'
-import { Icon } from './Icon'
+import type { IconButtonProps } from '../Button'
+import { IconButton } from '../Button'
+import { Icon } from '../Icon'
 import './Alert.scss'
-import { classNames } from '../utils/classNames'
+import { classNames } from '../../utils/classNames'
 
 export type Variant = 'info' | 'success' | 'warning' | 'error'
 
@@ -11,6 +11,7 @@ export interface AlertProps extends React.ComponentPropsWithoutRef<'div'> {
   variant?: Variant
   text: string
   button?: IconButtonProps
+  fadeOut?: boolean
   fitContent?: boolean
 }
 
@@ -26,12 +27,14 @@ export function Alert({
   variant = 'success',
   className,
   fitContent = false,
+  fadeOut = false,
   text,
   button,
   ...props
 }: AlertProps): React.JSX.Element {
   const cssClasses = classNames('alert', variant, className, {
     'fit-content': fitContent,
+    'fade-out': fadeOut,
   })
 
   return (

package/src/atoms/Alert/AlertContainer.scss

@@ -0,0 +1,15 @@
+@use '../../settings/depth';
+@use '../../settings/config';
+
+.alert-container {
+  display: flex;
+  flex-direction: column;
+  gap: config.$space-2x;
+  pointer-events: none;
+  position: fixed;
+  top: 73px;
+  left: 0;
+  width: 100%;
+  z-index: depth.$z-alert-container;
+  align-items: center;
+}

package/src/atoms/Alert/AlertContainer.tsx

@@ -0,0 +1,11 @@
+import { classNames } from '../../utils/classNames'
+import './AlertContainer.scss'
+
+export interface AlertContainerProps
+  extends React.ComponentPropsWithoutRef<'section'> {}
+
+export function AlertContainer({ className, ...props }: AlertContainerProps) {
+  return (
+    <section className={classNames('alert-container', className)} {...props} />
+  )
+}

package/src/atoms/Alert/index.ts

@@ -0,0 +1,6 @@
+import { Alert } from './Alert'
+import { AlertContainer } from './AlertContainer'
+
+export type { AlertProps } from './Alert'
+
+export { Alert, AlertContainer }

package/src/atoms/Select.tsx

@@ -4,7 +4,7 @@ import { Icon } from './Icon'
 import { IconButton } from './Button'
 import { classNames } from '../utils/classNames'
 import { buildHelpText } from '../utils/buildHelpText'
-import { useOutsideClick } from '@/utils/useOutsideClick'
+import { useOutsideClick } from '../utils/useOutsideClick'
 import './Select.scss'
 
 export type Variant = 'primary'

package/src/settings/_depth.scss

@@ -6,6 +6,7 @@ $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: $z-dropdown-options + $above;
+$z-alert-container: $z-dropdown-options + $above;
+$z-modal: $z-alert-container + $above;
 $z-aside-desktop: $base + $above;
 $z-aside-mobile: $z-modal + $above;

package/src/stories/Alert.stories.ts

@@ -18,6 +18,10 @@ const meta = {
     button: {
       description: 'Add an IconButton component to have the close button.',
     },
+    fadeOut: {
+      description: 'Add fade out animation.',
+      control: 'boolean',
+    },
   },
 }
 
@@ -49,6 +53,16 @@ export const Success: Story = {
   parameters: figmaPrimaryDesign,
 }
 
+export const SuccessWithFadeOut: Story = {
+  args: {
+    id: 'success-alert',
+    variant: 'success',
+    text: 'Thank you! But our princess is in another castle!',
+    fadeOut: true,
+  },
+  parameters: figmaPrimaryDesign,
+}
+
 export const Warning: Story = {
   args: {
     id: 'warning-alert',

package/src/stories/AlertContainer.stories.js

@@ -0,0 +1,28 @@
+import React from 'react'
+import { Alert, AlertContainer } from '../atoms/Alert'
+
+const figmaPrimaryDesign = {
+  design: {
+    type: 'figma',
+    url: 'https://www.figma.com/file/DN2ova21vWqCRvPspBXgI1/Design-System?type=design&node-id=570-118&mode=dev',
+  },
+}
+
+const meta = {
+  title: 'Design System/Atoms/AlertContainer',
+  component: AlertContainer,
+  tags: ['autodocs'],
+  argTypes: {},
+  parameters: figmaPrimaryDesign,
+}
+
+export default meta
+
+export const Primary = {
+  render: () => (
+    <AlertContainer>
+      <Alert variant="success" id="success" text="This is a success alert" />
+      <Alert variant="error" id="error" text="This is a error alert" />
+    </AlertContainer>
+  ),
+}

package/src/stories/Changelog.mdx

@@ -4,7 +4,13 @@ import { Meta } from "@storybook/blocks";
 
 # Changelog
 
+# 0.27.6
+
+* Add AlertContiner component
+* Add fadeOut prop to Alert component
+
 # 0.27.5
+
 * Add required hint to Select component
 
 # 0.27.3

package/tests/Alert.spec.tsx

@@ -1,4 +1,4 @@
-import type { Variant } from '@/atoms/Alert'
+import type { Variant } from '@/atoms/Alert/Alert'
 import React from 'react'
 import { screen, render } from '@testing-library/react'
 import { Alert } from '@/atoms/Alert'

package/tsconfig.json

@@ -28,12 +28,14 @@
     "**/*.ts",
     "**/*.tsx",
     ".next/types/**/*.ts",
+    "src/stories/Typography.stories.mdx",
     "src/stories/CardsTable.stories.js",
     "src/stories/Modal.stories.js",
-    "src/stories/Typography.stories.mdx",
     "src/stories/Card.stories.js",
     "src/stories/Menu.stories.js",
-    "src/stories/EmptyState.stories.js"
-, "src/stories/CheckableTag.stories.js", "src/stories/RadioButton.stories.js"  ],
+    "src/stories/EmptyState.stories.js",
+    "src/stories/CheckableTag.stories.js",
+    "src/stories/RadioButton.stories.js"
+  ],
   "exclude": ["node_modules"]
 }