@dxc-technology/halstack-react 0.0.0-c6243ef → 0.0.0-c67081d

package/chip/Chip.test.js

@@ -0,0 +1,54 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _Chip = _interopRequireDefault(require("./Chip.tsx"));
+
+describe("Chip component tests", function () {
+  test("Chip renders with correct text", function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Chip["default"], {
+      label: "Chip"
+    })),
+        getByText = _render.getByText;
+
+    expect(getByText("Chip")).toBeTruthy();
+  });
+  test("Calls correct function when clicking on prefix icon", function () {
+    var onClick = jest.fn();
+
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Chip["default"], {
+      label: "Chip",
+      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,
+        getByRole = _render2.getByRole;
+
+    expect(getByText("Chip")).toBeTruthy();
+
+    _react2.fireEvent.click(getByRole("img"));
+
+    expect(onClick).toHaveBeenCalled();
+  });
+  test("Calls correct function when clicking on suffix icon", function () {
+    var onClick = jest.fn();
+
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Chip["default"], {
+      label: "Chip",
+      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,
+        getByRole = _render3.getByRole;
+
+    expect(getByText("Chip")).toBeTruthy();
+
+    _react2.fireEvent.click(getByRole("img"));
+
+    expect(onClick).toHaveBeenCalled();
+  });
+});

package/chip/types.d.ts

@@ -0,0 +1,45 @@
+/// <reference types="react" />
+declare type Space = "xxsmall" | "xsmall" | "small" | "medium" | "large" | "xlarge" | "xxlarge";
+declare type Margin = {
+    top?: Space;
+    bottom?: Space;
+    left?: Space;
+    right?: Space;
+};
+declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
+declare type Props = {
+    /**
+     * Text to be placed on the chip.
+     */
+    label?: string;
+    /**
+     * Element or path used as icon to be placed after the chip label.
+     */
+    suffixIcon?: string | SVG;
+    /**
+     * Element or path used as icon to be placed before the chip label.
+     */
+    prefixIcon?: string | SVG;
+    /**
+     * This function will be called when the suffix is clicked.
+     */
+    onClickSuffix?: () => void;
+    /**
+     * This function will be called when the prefix is clicked.
+     */
+    onClickPrefix?: () => void;
+    /**
+     * If true, the component will be disabled.
+     */
+    disabled?: boolean;
+    /**
+     * Size of the margin to be applied to the component ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').
+     * You can pass an object with 'top', 'bottom', 'left' and 'right' properties in order to specify different margin sizes.
+     */
+    margin?: Space | Margin;
+    /**
+     * Value of the tabindex attribute.
+     */
+    tabIndex?: number;
+};
+export default Props;

package/chip/types.js

@@ -0,0 +1,5 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});

package/common/OpenSans.css

@@ -0,0 +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-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",
+  // Transparent 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/{dist/common → 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;