@dxc-technology/halstack-react 0.0.0-bd364ae → 0.0.0-bf1a0c9

package/chip/Chip.stories.tsx

@@ -3,6 +3,7 @@ import { userEvent, within } from "@storybook/testing-library";
 import DxcChip from "./Chip";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
+import { HalstackProvider } from "../HalstackContext";
 
 export default {
   title: "Chip",
@@ -10,12 +11,43 @@ export default {
 };
 
 const iconSVG = (
-  <svg viewBox="0 0 24 24" fill="currentColor">
-    <path d="M0 0h24v24H0z" fill="none" />
-    <path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z" />
+  <svg
+    version="1.1"
+    id="Capa_1"
+    x="0px"
+    y="0px"
+    width="438.536px"
+    height="438.536px"
+    viewBox="0 0 438.536 438.536"
+    fill="currentColor"
+  >
+    <g>
+      <path
+        d="M414.41,24.123C398.333,8.042,378.963,0,356.315,0H82.228C59.58,0,40.21,8.042,24.126,24.123
+C8.045,40.207,0.003,59.576,0.003,82.225v274.084c0,22.647,8.042,42.018,24.123,58.102c16.084,16.084,35.454,24.126,58.102,24.126
+h274.084c22.648,0,42.018-8.042,58.095-24.126c16.084-16.084,24.126-35.454,24.126-58.102V82.225
+C438.532,59.576,430.49,40.204,414.41,24.123z M373.155,225.548h-49.963V406.84h-74.802V225.548H210.99V163.02h37.401v-37.402
+c0-26.838,6.283-47.107,18.843-60.813c12.559-13.706,33.304-20.555,62.242-20.555h49.963v62.526h-31.401
+c-10.663,0-17.467,1.853-20.417,5.568c-2.949,3.711-4.428,10.23-4.428,19.558v31.119h56.534L373.155,225.548z"
+      />
+    </g>
   </svg>
 );
 
+const smallIconSVG = (
+  <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" height="20" width="20">
+    <path d="m10 17-1.042-.938q-2.083-1.854-3.437-3.177-1.354-1.323-2.136-2.354Q2.604 9.5 2.302 8.646 2 7.792 2 6.896q0-1.854 1.271-3.125T6.396 2.5q1.021 0 1.979.438.958.437 1.625 1.229.667-.792 1.625-1.229.958-.438 1.979-.438 1.854 0 3.125 1.271T18 6.896q0 .896-.292 1.729-.291.833-1.073 1.854-.781 1.021-2.145 2.365-1.365 1.344-3.49 3.26Zm0-2.021q1.938-1.729 3.188-2.948 1.25-1.219 1.989-2.125.74-.906 1.031-1.614.292-.709.292-1.396 0-1.229-.833-2.063Q14.833 4 13.604 4q-.729 0-1.364.302-.636.302-1.094.844L10.417 6h-.834l-.729-.854q-.458-.542-1.114-.844Q7.083 4 6.396 4q-1.229 0-2.063.833-.833.834-.833 2.063 0 .687.271 1.364.271.678.989 1.573.719.896 1.98 2.125Q8 13.188 10 14.979Zm0-5.5Z" />
+  </svg>
+);
+
+const opinionatedTheme = {
+  chip: {
+    baseColor: "#e6e6e6",
+    fontColor: "#000000",
+    iconColor: "#4d4d4d",
+  },
+};
+
 export const Chromatic = () => (
   <>
     <ExampleContainer>
@@ -23,20 +55,29 @@ export const Chromatic = () => (
       <DxcChip label="Default Chip" />
     </ExampleContainer>
     <ExampleContainer>
-      <Title title="Chip with prefix" theme="light" level={4} />
-      <DxcChip label="Chip with prefix" prefixIcon={iconSVG} />
+      <Title title="Chip with prefix SVG (small icon)" theme="light" level={4} />
+      <DxcChip label="Chip with prefix" prefixIcon={smallIconSVG} />
     </ExampleContainer>
     <ExampleContainer>
-      <Title title="Chip with suffix" theme="light" level={4} />
+      <Title title="Chip with suffix SVG (large icon)" theme="light" level={4} />
       <DxcChip label="Chip with suffix" suffixIcon={iconSVG} />
     </ExampleContainer>
     <ExampleContainer>
-      <Title title="Chip with prefix and suffix" theme="light" level={4} />
-      <DxcChip label="Chip with prefix and suffix" prefixIcon={iconSVG} suffixIcon={iconSVG} />
+      <Title title="Chip with prefix (SVG) and suffix (URL)" theme="light" level={4} />
+      <DxcChip
+        label="Chip with prefix and suffix"
+        prefixIcon={iconSVG}
+        suffixIcon="https://upload.wikimedia.org/wikipedia/commons/e/e0/Check_green_icon.svg"
+      />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Disabled chip" theme="light" level={4} />
-      <DxcChip label="Disabled" disabled prefixIcon={iconSVG} suffixIcon={iconSVG} />
+      <DxcChip
+        label="Disabled"
+        disabled
+        prefixIcon={iconSVG}
+        suffixIcon="https://upload.wikimedia.org/wikipedia/commons/e/e0/Check_green_icon.svg"
+      />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Chip with ellipsis" theme="light" level={4} />
@@ -93,6 +134,52 @@ export const Chromatic = () => (
       <Title title="Xxlarge margin" theme="light" level={4} />
       <DxcChip label="xxlarge" margin="xxlarge" />
     </ExampleContainer>
+    <Title title="Opinionated theme" theme="light" level={2} />
+    <ExampleContainer>
+      <Title title="Chip with prefix and suffix" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcChip
+          label="Chip"
+          prefixIcon={iconSVG}
+          suffixIcon="https://upload.wikimedia.org/wikipedia/commons/e/e0/Check_green_icon.svg"
+        />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Chip with prefix and suffix" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcChip
+          label="Chip"
+          disabled
+          prefixIcon={iconSVG}
+          suffixIcon="https://upload.wikimedia.org/wikipedia/commons/e/e0/Check_green_icon.svg"
+        />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-hover">
+      <Title title="Hovered" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcChip
+          label="Chip"
+          prefixIcon={iconSVG}
+          suffixIcon={iconSVG}
+          onClickPrefix={() => {}}
+          onClickSuffix={() => {}}
+        />
+      </HalstackProvider>
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-active">
+      <Title title="Actived" theme="light" level={4} />
+      <HalstackProvider theme={opinionatedTheme}>
+        <DxcChip
+          label="Chip"
+          prefixIcon={iconSVG}
+          suffixIcon={iconSVG}
+          onClickPrefix={() => {}}
+          onClickSuffix={() => {}}
+        />
+      </HalstackProvider>
+    </ExampleContainer>
   </>
 );
 const ChipPrefixFocused = () => (

package/chip/Chip.test.js

@@ -6,9 +6,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
-var _Chip = _interopRequireDefault(require("./Chip"));
-
-var _invision = _interopRequireDefault(require("../../app/src/images/invision.svg"));
+var _Chip = _interopRequireDefault(require("./Chip.tsx"));
 
 describe("Chip component tests", function () {
   test("Chip renders with correct text", function () {
@@ -24,7 +22,7 @@ describe("Chip component tests", function () {
 
     var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Chip["default"], {
       label: "Chip",
-      prefixIcon: _invision["default"],
+      prefixIcon: "https://developer.apple.com/design/human-interface-guidelines/foundations/app-icons/images/icon-and-image-large-icon-settings_2x.png",
       onClickPrefix: onClick
     })),
         getByText = _render2.getByText,
@@ -41,7 +39,7 @@ describe("Chip component tests", function () {
 
     var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Chip["default"], {
       label: "Chip",
-      suffixIcon: _invision["default"],
+      suffixIcon: "https://developer.apple.com/design/human-interface-guidelines/foundations/app-icons/images/icon-and-image-large-icon-settings_2x.png",
       onClickSuffix: onClick
     })),
         getByText = _render3.getByText,

package/chip/types.d.ts

@@ -6,7 +6,7 @@ declare type Margin = {
     left?: Space;
     right?: Space;
 };
-declare type SVG = React.SVGProps<SVGSVGElement>;
+declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
 declare type Props = {
     /**
      * Text to be placed on the chip.

package/common/OpenSans.css

@@ -1,81 +1,69 @@
+@font-face {
+  font-family: "Open Sans";
+  src: url("./fonts/OpenSans-Light.ttf") format("truetype");
+  font-style: normal;
+  font-weight: 200;
+}
 
- @font-face {
-    font-family: 'Open Sans';
-    src: url('./fonts/OpenSans-Light.ttf')
-      format('truetype');
-    font-style: normal;
-    font-weight: 200;
-  }
-  
-  @font-face {
-    font-family: 'Open Sans';
-    src: url('./fonts/OpenSans-Regular.ttf')
-      format('truetype');
-    font-style: normal;
-    font-weight: 400;
-  }
-  
-  @font-face {
-    font-family: 'Open Sans';
-    src: url('./fonts/OpenSans-SemiBold.ttf')
-      format('truetype');
-    font-style: normal;
-    font-weight: 600;
-  }
-  
-  @font-face {
-    font-family: 'Open Sans';
-    src: url('./fonts/OpenSans-Bold.ttf')
-      format('truetype');
-    font-style: normal;
-    font-weight: 700;
-  }
-  
-  @font-face {
-    font-family: 'Open Sans';
-    src: url('./fonts/OpenSans-ExtraBold.ttf')
-      format('truetype');
-    font-style: normal;
-    font-weight: 800;
-  }
-  
-  @font-face {
-    font-family: 'Open Sans';
-    src: url('./fonts/OpenSans-LightItalic.ttf')
-      format('truetype');
-    font-style: italic;
-    font-weight: 200;
-  }
-  
-  @font-face {
-    font-family: 'Open Sans';
-    src: url('./fonts/OpenSans-Italic.ttf')
-      format('truetype');
-    font-style: italic;
-    font-weight: 400;
-  }
-  
-  @font-face {
-    font-family: 'Open Sans';
-    src: url('./fonts/OpenSans-SemiBoldItalic.ttf')
-      format('truetype');
-    font-style: italic;
-    font-weight: 600;
-  }
-  
-  @font-face {
-    font-family: 'Open Sans';
-    src: url('./fonts/OpenSans-BoldItalic.ttf')
-      format('truetype');
-    font-style: italic;
-    font-weight: 700;
-  }
-  
-  @font-face {
-    font-family: 'Open Sans';
-    src: url('./fonts/OpenSans-ExtraBoldItalic.ttf')
-      format('truetype');
-    font-style: italic;
-    font-weight: 800;
-  }
-  
+@font-face {
+  font-family: "Open Sans";
+  src: url("./fonts/OpenSans-Regular.ttf") format("truetype");
+  font-style: normal;
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: "Open Sans";
+  src: url("./fonts/OpenSans-SemiBold.ttf") format("truetype");
+  font-style: normal;
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: "Open Sans";
+  src: url("./fonts/OpenSans-Bold.ttf") format("truetype");
+  font-style: normal;
+  font-weight: 700;
+}
+
+@font-face {
+  font-family: "Open Sans";
+  src: url("./fonts/OpenSans-ExtraBold.ttf") format("truetype");
+  font-style: normal;
+  font-weight: 800;
+}
+
+@font-face {
+  font-family: "Open Sans";
+  src: url("./fonts/OpenSans-LightItalic.ttf") format("truetype");
+  font-style: italic;
+  font-weight: 200;
+}
+
+@font-face {
+  font-family: "Open Sans";
+  src: url("./fonts/OpenSans-Italic.ttf") format("truetype");
+  font-style: italic;
+  font-weight: 400;
+}
+
+@font-face {
+  font-family: "Open Sans";
+  src: url("./fonts/OpenSans-SemiBoldItalic.ttf") format("truetype");
+  font-style: italic;
+  font-weight: 600;
+}
+
+@font-face {
+  font-family: "Open Sans";
+  src: url("./fonts/OpenSans-BoldItalic.ttf") format("truetype");
+  font-style: italic;
+  font-weight: 700;
+}
+
+@font-face {
+  font-family: "Open Sans";
+  src: url("./fonts/OpenSans-ExtraBoldItalic.ttf") format("truetype");
+  font-style: italic;
+  font-weight: 800;
+}

package/common/coreTokens.d.ts

@@ -0,0 +1,146 @@
+declare const CORE_TOKENS: {
+    inherit: string;
+    color_black: string;
+    color_white: string;
+    color_transparent: string;
+    color_grey_50: string;
+    color_grey_100: string;
+    color_grey_200: string;
+    color_grey_300: string;
+    color_grey_400: string;
+    color_grey_500: string;
+    color_grey_600: string;
+    color_grey_700: string;
+    color_grey_800: string;
+    color_grey_900: string;
+    color_grey_50_a: string;
+    color_grey_100_a: string;
+    color_grey_200_a: string;
+    color_grey_300_a: string;
+    color_grey_400_a: string;
+    color_grey_500_a: string;
+    color_grey_600_a: string;
+    color_grey_700_a: string;
+    color_grey_800_a: string;
+    color_grey_900_a: string;
+    color_purple_50: string;
+    color_purple_100: string;
+    color_purple_200: string;
+    color_purple_300: string;
+    color_purple_400: string;
+    color_purple_500: string;
+    color_purple_600: string;
+    color_purple_700: string;
+    color_purple_800: string;
+    color_purple_900: string;
+    color_blue_50: string;
+    color_blue_100: string;
+    color_blue_200: string;
+    color_blue_300: string;
+    color_blue_400: string;
+    color_blue_500: string;
+    color_blue_600: string;
+    color_blue_700: string;
+    color_blue_800: string;
+    color_blue_900: string;
+    color_red_50: string;
+    color_red_100: string;
+    color_red_200: string;
+    color_red_300: string;
+    color_red_400: string;
+    color_red_500: string;
+    color_red_600: string;
+    color_red_700: string;
+    color_red_800: string;
+    color_red_900: string;
+    color_green_50: string;
+    color_green_100: string;
+    color_green_200: string;
+    color_green_300: string;
+    color_green_400: string;
+    color_green_500: string;
+    color_green_600: string;
+    color_green_700: string;
+    color_green_800: string;
+    color_green_900: string;
+    color_yellow_50: string;
+    color_yellow_100: string;
+    color_yellow_200: string;
+    color_yellow_300: string;
+    color_yellow_400: string;
+    color_yellow_500: string;
+    color_yellow_600: string;
+    color_yellow_700: string;
+    color_yellow_800: string;
+    color_yellow_900: string;
+    color_orange_50: string;
+    color_orange_100: string;
+    color_orange_200: string;
+    color_orange_300: string;
+    color_orange_400: string;
+    color_orange_500: string;
+    color_orange_600: string;
+    color_orange_700: string;
+    color_orange_800: string;
+    color_orange_900: string;
+    type_sans: string;
+    type_scale_root: string;
+    type_scale_08: string;
+    type_scale_07: string;
+    type_scale_06: string;
+    type_scale_05: string;
+    type_scale_04: string;
+    type_scale_03: string;
+    type_scale_02: string;
+    type_scale_01: string;
+    type_light: string;
+    type_regular: string;
+    type_semibold: string;
+    type_bold: string;
+    type_italic: string;
+    type_normal: string;
+    type_spacing_tight_02: string;
+    type_spacing_tight_01: string;
+    type_spacing_normal: string;
+    type_spacing_wide_01: string;
+    type_spacing_wide_02: string;
+    type_spacing_wide_03: string;
+    type_initial: string;
+    type_uppercase: string;
+    type_no_line: string;
+    type_underline: string;
+    type_line_through: string;
+    type_leading_compact_03: string;
+    type_leading_compact_02: string;
+    type_leading_compact_01: string;
+    type_leading_normal: string;
+    type_leading_loose_01: string;
+    type_leading_loose_02: string;
+    spacing_0: string;
+    spacing_2: string;
+    spacing_4: string;
+    spacing_8: string;
+    spacing_12: string;
+    spacing_16: string;
+    spacing_24: string;
+    spacing_32: string;
+    spacing_40: string;
+    spacing_48: string;
+    spacing_56: string;
+    spacing_64: string;
+    spacing_80: string;
+    spacing_96: string;
+    spacing_112: string;
+    border_width_0: string;
+    border_width_1: string;
+    border_width_2: string;
+    border_width_4: string;
+    border_radius_none: string;
+    border_radius_small: string;
+    border_radius_medium: string;
+    border_radius_large: string;
+    border_solid: string;
+    border_dashed: string;
+    border_none: string;
+};
+export default CORE_TOKENS;

package/common/coreTokens.js

@@ -0,0 +1,167 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = void 0;
+var CORE_TOKENS = {
+  inherit: "inherit",
+  // Color
+  // Absolutes
+  color_black: "#000000",
+  color_white: "#ffffff",
+  color_transparent: "transparent",
+  // Greyscale
+  // Solid variants
+  color_grey_50: "#fafafa",
+  color_grey_100: "#f2f2f2",
+  color_grey_200: "#e6e6e6",
+  color_grey_300: "#cccccc",
+  color_grey_400: "#bfbfbf",
+  color_grey_500: "#999999",
+  color_grey_600: "#808080",
+  color_grey_700: "#666666",
+  color_grey_800: "#4d4d4d",
+  color_grey_900: "#333333",
+  // Trasparent variants
+  color_grey_50_a: "#00000005",
+  color_grey_100_a: "#0000000d",
+  color_grey_200_a: "#0000001a",
+  color_grey_300_a: "#00000033",
+  color_grey_400_a: "#0000004d",
+  color_grey_500_a: "#00000066",
+  color_grey_600_a: "#00000080",
+  color_grey_700_a: "#00000099",
+  color_grey_800_a: "#000000b3",
+  color_grey_900_a: "#000000cc",
+  // Purple
+  color_purple_50: "#faf7fd",
+  color_purple_100: "#f2eafa",
+  color_purple_200: "#e5d5f6",
+  color_purple_300: "#cbacec",
+  color_purple_400: "#b182e3",
+  color_purple_500: "#a46ede",
+  color_purple_600: "#7d2fd0",
+  color_purple_700: "#5f249f",
+  color_purple_800: "#4b1c7d",
+  color_purple_900: "#321353",
+  // Blue
+  color_blue_50: "#f5fbff",
+  color_blue_100: "#e6f4ff",
+  color_blue_200: "#cceaff",
+  color_blue_300: "#99d5ff",
+  color_blue_400: "#66bfff",
+  color_blue_500: "#33aaff",
+  color_blue_600: "#0095ff",
+  color_blue_700: "#0086e6",
+  color_blue_800: "#0067b3",
+  color_blue_900: "#003c66",
+  // Red
+  color_red_50: "#fff5f6",
+  color_red_100: "#ffe6e9",
+  color_red_200: "#ffccd3",
+  color_red_300: "#fe9aa7",
+  color_red_400: "#fe677b",
+  color_red_500: "#fe344f",
+  color_red_600: "#fe0123",
+  color_red_700: "#d0011b",
+  color_red_800: "#980115",
+  color_red_900: "#65010e",
+  // Green
+  color_green_50: "#f7fdf9",
+  color_green_100: "#eafaef",
+  color_green_200: "#d5f6df",
+  color_green_300: "#acecbe",
+  color_green_400: "#82e39e",
+  color_green_500: "#59d97d",
+  color_green_600: "#2fd05d",
+  color_green_700: "#24a148",
+  color_green_800: "#1c7d38",
+  color_green_900: "#135325",
+  // Yellow
+  color_yellow_50: "#fffdf5",
+  color_yellow_100: "#fef9e6",
+  color_yellow_200: "#fdf4ce",
+  color_yellow_300: "#fbe89d",
+  color_yellow_400: "#fadd6b",
+  color_yellow_500: "#f7cf2b",
+  color_yellow_600: "#f6c709",
+  color_yellow_700: "#c59f07",
+  color_yellow_800: "#947705",
+  color_yellow_900: "#624f04",
+  // Orange
+  color_orange_50: "#fefaf5",
+  color_orange_100: "#fef3e7",
+  color_orange_200: "#fce7cf",
+  color_orange_300: "#facf9e",
+  color_orange_400: "#f7b76e",
+  color_orange_500: "#f59f3d",
+  color_orange_600: "#f38f20",
+  color_orange_700: "#c26c0a",
+  color_orange_800: "#915108",
+  color_orange_900: "#613605",
+  // Typography
+  type_sans: "Open Sans, sans-serif",
+  type_scale_root: "16px",
+  type_scale_08: "3.75rem",
+  type_scale_07: "2.5rem",
+  type_scale_06: "2rem",
+  type_scale_05: "1.5rem",
+  type_scale_04: "1.25rem",
+  type_scale_03: "1rem",
+  type_scale_02: "0.875rem",
+  type_scale_01: "0.75rem",
+  type_light: "300",
+  type_regular: "400",
+  type_semibold: "600",
+  type_bold: "bold",
+  type_italic: "italic",
+  type_normal: "normal",
+  type_spacing_tight_02: "-0.05em",
+  type_spacing_tight_01: "-0.025em",
+  type_spacing_normal: "0em",
+  type_spacing_wide_01: "0.025em",
+  type_spacing_wide_02: "0.05em",
+  type_spacing_wide_03: "0.1em",
+  type_initial: "initial",
+  type_uppercase: "uppercase",
+  type_no_line: "none",
+  type_underline: "underline",
+  type_line_through: "line-through",
+  type_leading_compact_03: "1em",
+  type_leading_compact_02: "1.25em",
+  type_leading_compact_01: "1.365em",
+  type_leading_normal: "1.5em",
+  type_leading_loose_01: "1.715em",
+  type_leading_loose_02: "2em",
+  // Spacing
+  spacing_0: "0rem",
+  spacing_2: "0.125rem",
+  spacing_4: "0.25rem",
+  spacing_8: "0.5rem",
+  spacing_12: "0.75rem",
+  spacing_16: "1rem",
+  spacing_24: "1.5rem",
+  spacing_32: "2rem",
+  spacing_40: "2.5rem",
+  spacing_48: "3rem",
+  spacing_56: "3.5rem",
+  spacing_64: "4rem",
+  spacing_80: "5rem",
+  spacing_96: "6rem",
+  spacing_112: "7rem",
+  // Border
+  border_width_0: "0px",
+  border_width_1: "1px",
+  border_width_2: "2px",
+  border_width_4: "4px",
+  border_radius_none: "0rem",
+  border_radius_small: "0.125rem",
+  border_radius_medium: "0.25rem",
+  border_radius_large: "0.375rem",
+  border_solid: "solid",
+  border_dashed: "dashed",
+  border_none: "none"
+};
+var _default = CORE_TOKENS;
+exports["default"] = _default;

package/common/utils.d.ts

@@ -0,0 +1 @@
+export declare const getMargin: (marginProp: string | object, side: string) => any;

package/common/utils.js

@@ -9,14 +9,14 @@ exports.getMargin = void 0;
 
 var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
 
-var _variables = require("./variables.js");
+var _variables = require("./variables");
 
 var getMargin = function getMargin(marginProp, side) {
   if (marginProp && (0, _typeof2["default"])(marginProp) === "object") {
     return marginProp[side] && _variables.spaces[marginProp[side]] || "0px";
-  } else {
-    return marginProp && _variables.spaces[marginProp] || "0px";
-  }
+  } else if (marginProp && typeof marginProp === "string") {
+    return _variables.spaces[marginProp];
+  } else return "0px";
 };
 
 exports.getMargin = getMargin;