Merge pull request #375 from kiwicom/fix/alert-themeprovider

FIX: Alert ThemeProvider
kiwicom · Sep 20, 2018 · bcd8261 · bcd8261
2 parents 1cacaf0 + aafd96a
commit bcd8261
Show file tree

Hide file tree

Showing 5 changed files with 42 additions and 87 deletions.
diff --git a/src/Alert/Alert.stories.js b/src/Alert/Alert.stories.js
@@ -8,7 +8,7 @@ import { withKnobs, text, boolean, select } from "@storybook/addon-knobs/react";
 
 import * as Icons from "../icons";
 import Button from "../Button";
-import TYPE_OPTIONS from "./consts";
+import { TYPE_OPTIONS } from "./consts";
 
 import Alert from "./index";
 

diff --git a/src/Alert/__tests__/__snapshots__/index.test.js.snap b/src/Alert/__tests__/__snapshots__/index.test.js.snap
@@ -383,28 +383,6 @@ exports[`Alert should match snapshot 1`] = `
       },
     }
   }
-  tokens={
-    Object {
-      "backgroundAlert": Object {
-        "critical": "#fae8e8",
-        "info": "#e0f6ff",
-        "success": "#e7f3e8",
-        "warning": "#fcf1cd",
-      },
-      "colorIconAlert": Object {
-        "critical": "#d21c1c",
-        "info": "#0176D2",
-        "success": "#46B655",
-        "warning": "#f9971e",
-      },
-      "colorTextAlert": Object {
-        "critical": "#650808",
-        "info": "#07405c",
-        "success": "#065d12",
-        "warning": "#a93610",
-      },
-    }
-  }
   type="info"
 >
   <Alert__ContentWrapper>
@@ -790,28 +768,6 @@ exports[`Alert should match snapshot 1`] = `
           },
         }
       }
-      tokens={
-        Object {
-          "backgroundAlert": Object {
-            "critical": "#fae8e8",
-            "info": "#e0f6ff",
-            "success": "#e7f3e8",
-            "warning": "#fcf1cd",
-          },
-          "colorIconAlert": Object {
-            "critical": "#d21c1c",
-            "info": "#0176D2",
-            "success": "#46B655",
-            "warning": "#f9971e",
-          },
-          "colorTextAlert": Object {
-            "critical": "#650808",
-            "info": "#07405c",
-            "success": "#065d12",
-            "warning": "#a93610",
-          },
-        }
-      }
       type="info"
     >
       Alert message

diff --git a/src/Alert/consts.js b/src/Alert/consts.js
@@ -1,9 +1,13 @@
 // @flow
-const TYPE_OPTIONS = {
+export const TYPE_OPTIONS = {
   INFO: "info",
   SUCCESS: "success",
   WARNING: "warning",
   CRITICAL: "critical",
 };
 
-export default TYPE_OPTIONS;
+export const TOKENS = {
+  backgroundAlert: "backgroundAlert",
+  colorIconAlert: "colorIconAlert",
+  colorTextAlert: "colorTextAlert",
+};
diff --git a/src/Alert/index.js b/src/Alert/index.js
@@ -10,7 +10,7 @@ import AlertCircle from "../icons/AlertCircle";
 import Close from "../icons/Close";
 import ButtonLink from "../ButtonLink";
 import { StyledTextLink } from "../TextLink";
-import TYPE_OPTIONS from "./consts";
+import { TYPE_OPTIONS, TOKENS } from "./consts";
 
 import type { Props } from "./index";
 
@@ -19,6 +19,31 @@ type IconProps = {
   type: string,
 };
 
+const getTypeToken = name => ({ theme, type }) => {
+  const tokens = {
+    [TOKENS.colorIconAlert]: {
+      [TYPE_OPTIONS.INFO]: theme.orbit.colorAlertIconInfo,
+      [TYPE_OPTIONS.SUCCESS]: theme.orbit.colorAlertIconSuccess,
+      [TYPE_OPTIONS.WARNING]: theme.orbit.colorAlertIconWarning,
+      [TYPE_OPTIONS.CRITICAL]: theme.orbit.colorAlertIconCritical,
+    },
+    [TOKENS.backgroundAlert]: {
+      [TYPE_OPTIONS.INFO]: theme.orbit.backgroundAlertInfo,
+      [TYPE_OPTIONS.SUCCESS]: theme.orbit.backgroundAlertSuccess,
+      [TYPE_OPTIONS.WARNING]: theme.orbit.backgroundAlertWarning,
+      [TYPE_OPTIONS.CRITICAL]: theme.orbit.backgroundAlertCritical,
+    },
+    [TOKENS.colorTextAlert]: {
+      [TYPE_OPTIONS.INFO]: theme.orbit.colorTextAlertInfo,
+      [TYPE_OPTIONS.SUCCESS]: theme.orbit.colorTextAlertSuccess,
+      [TYPE_OPTIONS.WARNING]: theme.orbit.colorTextAlertWarning,
+      [TYPE_OPTIONS.CRITICAL]: theme.orbit.colorTextAlertCritical,
+    },
+  };
+
+  return tokens[name][type];
+};
+
 const Icon = ({ icon, type }: IconProps) => {
   // Icon should be boolean and TRUE
   if (typeof icon === "boolean" && icon) {
@@ -52,8 +77,8 @@ const StyledAlert = styled(StyledDiv)`
       : theme.orbit.paddingAlert};
   padding-right: ${({ theme, closable }) => closable && theme.orbit.spaceXXLarge};
   border-radius: ${({ theme }) => theme.orbit.borderRadiusNormal};
-  background: ${({ tokens, type }) => tokens.backgroundAlert[type]};
-  color: ${({ tokens, type }) => tokens.colorTextAlert[type]};
+  background: ${getTypeToken(TOKENS.backgroundAlert)};
+  color: ${getTypeToken(TOKENS.colorTextAlert)};
   font-family: ${({ theme }) => theme.orbit.fontFamily};
   font-size: ${({ theme }) => theme.orbit.fontSizeTextNormal};
   box-sizing: border-box;
@@ -66,7 +91,7 @@ StyledAlert.defaultProps = {
 const IconContainer = styled(StyledDiv)`
   flex-shrink: 0;
   margin-right: ${({ theme }) => theme.orbit.spaceSmall};
-  color: ${({ tokens, type }) => tokens.colorIconAlert[type]};
+  color: ${getTypeToken(TOKENS.colorIconAlert)};
 `;
 
 IconContainer.defaultProps = {
@@ -100,7 +125,7 @@ const Content = styled(StyledDiv)`
 
   & a,
   & ${StyledTextLink} {
-    color: ${({ tokens, type }) => tokens.colorTextAlert[type]};
+    color: ${getTypeToken(TOKENS.colorTextAlert)};
     font-weight: ${({ theme }) => theme.orbit.fontWeightMedium};
     transition: color ${({ theme }) => theme.orbit.durationFast} ease-in-out;
     text-decoration: none;
@@ -127,46 +152,18 @@ CloseContainer.defaultProps = {
 };
 
 const Alert = (props: Props) => {
-  const {
-    type = TYPE_OPTIONS.INFO,
-    title,
-    theme = defaultTokens,
-    closable,
-    icon,
-    onClose = () => {},
-    children,
-  } = props;
-  const tokens = {
-    colorIconAlert: {
-      [TYPE_OPTIONS.INFO]: theme.orbit.colorAlertIconInfo,
-      [TYPE_OPTIONS.SUCCESS]: theme.orbit.colorAlertIconSuccess,
-      [TYPE_OPTIONS.WARNING]: theme.orbit.colorAlertIconWarning,
-      [TYPE_OPTIONS.CRITICAL]: theme.orbit.colorAlertIconCritical,
-    },
-    backgroundAlert: {
-      [TYPE_OPTIONS.INFO]: theme.orbit.backgroundAlertInfo,
-      [TYPE_OPTIONS.SUCCESS]: theme.orbit.backgroundAlertSuccess,
-      [TYPE_OPTIONS.WARNING]: theme.orbit.backgroundAlertWarning,
-      [TYPE_OPTIONS.CRITICAL]: theme.orbit.backgroundAlertCritical,
-    },
-    colorTextAlert: {
-      [TYPE_OPTIONS.INFO]: theme.orbit.colorTextAlertInfo,
-      [TYPE_OPTIONS.SUCCESS]: theme.orbit.colorTextAlertSuccess,
-      [TYPE_OPTIONS.WARNING]: theme.orbit.colorTextAlertWarning,
-      [TYPE_OPTIONS.CRITICAL]: theme.orbit.colorTextAlertCritical,
-    },
-  };
+  const { type = TYPE_OPTIONS.INFO, title, closable, icon, onClose = () => {}, children } = props;
   return (
-    <StyledAlert tokens={tokens} type={type} closable={closable}>
+    <StyledAlert type={type} closable={closable}>
       {icon && (
-        <IconContainer tokens={tokens} type={type}>
+        <IconContainer type={type}>
           <Icon type={type} icon={icon} />
         </IconContainer>
       )}
       <ContentWrapper title={title}>
         {title && <Title hasChildren={children}>{title}</Title>}
         {children && (
-          <Content title={title} tokens={tokens} type={type}>
+          <Content title={title} type={type}>
             {children}
           </Content>
         )}
@@ -176,7 +173,7 @@ const Alert = (props: Props) => {
           <ButtonLink
             onClick={onClose}
             size="small"
-            icon={<Close size="small" customColor={tokens.colorIconAlert[type]} />}
+            icon={<Close size="small" color={type} />}
             transparent
           />
         </CloseContainer>

diff --git a/src/Alert/index.js.flow b/src/Alert/index.js.flow
@@ -1,5 +1,4 @@
 // @flow
-import defaultTokens from "../defaultTokens";
 
 type Type = "info" | "success" | "warning" | "critical";
 
@@ -10,7 +9,6 @@ export type Props = {|
   +icon?: React$Element<any> | boolean,
   +closable?: boolean,
   +onClose?: () => void,
-  +theme?: typeof defaultTokens,
 |};
 
 declare export default React$ComponentType<Props>;