Add MessageBox customization options

nordcloud · Jul 6, 2020 · a1dcdf9 · a1dcdf9
1 parent b48791e
commit a1dcdf9
Show file tree

Hide file tree

Showing 3 changed files with 83 additions and 48 deletions.
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@nordcloud/gnui",
-  "version": "0.4.6",
+  "version": "0.4.7",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "repository": "git://github.com/nordcloud/gnui.git",

diff --git a/src/components/message/Message.tsx b/src/components/message/Message.tsx
@@ -6,33 +6,46 @@ import { Icon } from "../icon";
 export interface MessageProps {
   image?: string;
   status?: "success" | "notification" | "danger";
+  borderColor?: string;
+  background?: string;
+  color?: string;
   children?: React.ReactNode;
-};
+}
 
 export const MessageWrapper = styled.div<MessageProps>`
-  display:flex;
-  align-items:center;
+  display: flex;
+  align-items: center;
   border-radius: ${theme.radiusDefault};
   color: ${theme.colors.white};
   font-size: ${theme.fontSizes.regular};
   padding: ${theme.spacing.spacing03};
-  line-height:1.5rem;
-  
-  ${({ status }) =>
-  status === "success" &&
-  css`
-    background: ${theme.colors.success};
-  `}
-  ${({ status }) =>
-  status === "danger" &&
-  css`
-    background: ${theme.colors.danger};
-  `}
+  line-height: 1.5rem;
+  border:1px solid;
+
   ${({ status }) =>
-  status === "notification" &&
-  css`
-    background: ${theme.colors.notification};
-  `}
+    status &&
+    css`
+      background: ${theme.colors[status]};
+      border-color: ${theme.colors[status]};
+    `}
+
+  ${({ borderColor }) =>
+    borderColor &&
+    css`
+      border: 1px solid ${theme.colors[borderColor] || borderColor};
+    `}
+
+  ${({ background }) =>
+    background &&
+    css`
+      background: ${theme.colors[background] || background};
+    `}
+
+  ${({ color }) =>
+    color &&
+    css`
+      color: ${theme.colors[color] || color};
+    `}
 `;
 
 export const IconBox = styled.div<MessageProps>`
@@ -43,37 +56,41 @@ export const IconBox = styled.div<MessageProps>`
   margin-right: ${theme.spacing.spacing03};
 
   ${({ status }) =>
-  status === "success" &&
-  css`
-    background: rgba(30, 132, 73, 0.5);
-  `}
+    status === "success" &&
+    css`
+      background: rgba(30, 132, 73, 0.5);
+    `}
   ${({ status }) =>
-  status === "danger" &&
-  css`
-    background: rgba(176, 58, 46, 0.5);
-  `}
+    status === "danger" &&
+    css`
+      background: rgba(176, 58, 46, 0.5);
+    `}
   ${({ status }) =>
-  status === "notification" &&
-  css`
-    background: rgba(40, 116, 166, 0.5);
-  `}
+    status === "notification" &&
+    css`
+      background: rgba(40, 116, 166, 0.5);
+    `}
 `;
 
 export const Align = styled.div`
-  margin-bottom:auto;
+  margin-bottom: auto;
 `;
 
 export const Message: FunctionComponent<MessageProps> = ({
   children,
   image,
-  status
-}) => 
-    <MessageWrapper status={status}>
-      {image && 
+  ...props
+}) => (
+  <MessageWrapper {...props}>
+    {image && (
       <Align>
-        <IconBox status={status}>
-          <Icon image={image} width="1.5rem" height="1.5rem"/>
-        </IconBox>
-      </Align>}
-      {children}
-    </MessageWrapper>;
+        {image && (
+          <IconBox {...props}>
+            <Icon image={image} width="1.5rem" height="1.5rem" />
+          </IconBox>
+        )}
+      </Align>
+    )}
+    {children}
+  </MessageWrapper>
+);
diff --git a/src/stories/Message.stories.mdx b/src/stories/Message.stories.mdx
@@ -7,12 +7,16 @@ import { Spacer } from "../components/spacer";
 <Meta title="Components/Message" component={Message} />
 
 # Message
+
 #### Props
 
 ```typescript
 type MessageProps = {
   image?: string;
   status?: "success" | "notification" | "danger";
+  borderColor?: string;
+  background?: string;
+  color?: string;
   children?: React.ReactNode;
 };
 ```
@@ -22,11 +26,25 @@ type MessageProps = {
 <Preview>
   <Story name="default">
     <>
-      <Message status="success" image="SUCCESS">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur.</Message>
-       <Spacer height="1rem" />
-      <Message status="danger" image="DANGER">Account has been added</Message>
-       <Spacer height="1rem" />
-      <Message status="notification" image="NOTIFY">Account has been added</Message>
+      <Message status="success" image="SUCCESS">
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur.
+      </Message>
+      <Spacer height="1rem" />
+      <Message status="danger" image="DANGER">
+        Account has been added
+      </Message>
+      <Spacer height="1rem" />
+      <Message status="notification" image="NOTIFY">
+        Account has been added
+      </Message>
+      <Spacer height="1rem" />
+      <Message status="danger" background="#F5B7B1" color="#B03A2E">
+        <strong>Account</strong> has been added
+      </Message>
     </>
   </Story>
 </Preview>