feat: alert box primitive story (#1113)

xgeekshq · Feb 17, 2023 · 8c678b1 · 8c678b1
1 parent 20286ff
commit 8c678b1
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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
@@ -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
@@ -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';