From f3dcb2dfd0ec6c779042c2dc4438653f0fdc7d0e Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Jo=C3=A3o=20Salvador?=
 <24455614+JoaoSaIvador@users.noreply.github.com>
Date: Fri, 17 Feb 2023 16:53:42 +0000
Subject: [PATCH] feat: alert box primitive story (#1113)

---
 .../src/components/Board/Column/styles.tsx    |  1 -
 .../components/Board/DragDropArea/index.tsx   |  2 +-
 .../components/Primitives/AlertBox/index.tsx  |  2 +-
 .../components/Primitives/AlertBox/styles.tsx |  4 +-
 frontend/src/stories/AlertBox.stories.tsx     | 50 +++++++++++++++++++
 5 files changed, 54 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/stories/AlertBox.stories.tsx

diff --git a/frontend/src/components/Board/Column/styles.tsx b/frontend/src/components/Board/Column/styles.tsx
index aeb827f4b..46db0996c 100644
--- a/frontend/src/components/Board/Column/styles.tsx
+++ b/frontend/src/components/Board/Column/styles.tsx
@@ -41,7 +41,6 @@ const OuterContainer = styled(Flex, {
   flexGrow: 1,
   flexShrink: 0,
   width: '100%',
-  mx: '$12',
 });
 
 const Title = styled(Text, {
diff --git a/frontend/src/components/Board/DragDropArea/index.tsx b/frontend/src/components/Board/DragDropArea/index.tsx
index 1d20c827e..3cdf88cb1 100644
--- a/frontend/src/components/Board/DragDropArea/index.tsx
+++ b/frontend/src/components/Board/DragDropArea/index.tsx
@@ -190,7 +190,7 @@ const DragDropArea: React.FC<Props> = ({
       isDropDisabled={isMainboard || !hasAdminRole}
     >
       {(provided) => (
-        <Container ref={provided.innerRef} {...provided.droppableProps}>
+        <Container css={{ gap: '$24' }} ref={provided.innerRef} {...provided.droppableProps}>
           {board.columns.map((column, index) => (
             <Column
               key={column._id}
diff --git a/frontend/src/components/Primitives/AlertBox/index.tsx b/frontend/src/components/Primitives/AlertBox/index.tsx
index 31b0df307..7ff870562 100644
--- a/frontend/src/components/Primitives/AlertBox/index.tsx
+++ b/frontend/src/components/Primitives/AlertBox/index.tsx
@@ -17,7 +17,7 @@ const AlertBox: FC<AlertBoxProps> = ({ type, title, text, children, css }) => (
   <AlertStyle align="center" css={css} justify="between" type={type}>
     <Flex align="center">
       <AlertIconStyle>
-        <Icon name={['warning', 'error'].includes(type) ? 'blob-error' : 'blob-info'} />
+        <Icon name={`blob-${type}`} />
       </AlertIconStyle>
       <AlertText direction="column">
         {!!title && <Text heading="5">{title}</Text>}
diff --git a/frontend/src/components/Primitives/AlertBox/styles.tsx b/frontend/src/components/Primitives/AlertBox/styles.tsx
index 76b6124ba..85ba58a60 100644
--- a/frontend/src/components/Primitives/AlertBox/styles.tsx
+++ b/frontend/src/components/Primitives/AlertBox/styles.tsx
@@ -6,8 +6,8 @@ const AlertStyle = styled(Flex, {
   variants: {
     type: {
       warning: {
-        backgroundColor: '$infoLightest',
-        border: '1px solid $colors$infoBase',
+        backgroundColor: '$warningLightest',
+        border: '1px solid $colors$warningBase',
       },
       error: {
         backgroundColor: '$dangerLightest',
diff --git a/frontend/src/stories/AlertBox.stories.tsx b/frontend/src/stories/AlertBox.stories.tsx
new file mode 100644
index 000000000..49b3db548
--- /dev/null
+++ b/frontend/src/stories/AlertBox.stories.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+import { ComponentStory } from '@storybook/react';
+
+import dedent from 'ts-dedent';
+
+import AlertBox from '@/components/Primitives/AlertBox';
+
+export default {
+  title: 'Primitives/AlertBox',
+  component: AlertBox,
+  parameters: {
+    docs: {
+      description: {
+        component: dedent`
+        An alert box that is displayed on the screen to inform or warn the user of something.
+
+        **File Path:**
+        \`@/components/Primitives/AlertBox/index.tsx\` and \`@/components/Primitives/AlertBox/styles.tsx\`
+        `,
+      },
+    },
+  },
+  args: {
+    type: 'info',
+  },
+  argTypes: {
+    title: {
+      control: false,
+      description: 'Content of the title of the alert box.',
+    },
+    text: {
+      control: false,
+      description: 'Content of the body of the alert box.',
+    },
+    type: {
+      description: 'Type of the component.',
+    },
+  },
+};
+
+const Template: ComponentStory<typeof AlertBox> = ({ type }) => (
+  <AlertBox
+    title="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
+    text="Aut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+    type={type}
+  />
+);
+
+export const Default = Template.bind({});
+Default.storyName = 'Basic Usage';