@dxc-technology/halstack-react 11.0.0 → 12.0.0

package/chip/Chip.js

@@ -13,9 +13,10 @@ var _styledComponents = _interopRequireWildcard(require("styled-components"));
 var _variables = require("../common/variables");
 var _utils = require("../common/utils");
 var _useTheme = _interopRequireDefault(require("../useTheme"));
+var _Icon = _interopRequireDefault(require("../icon/Icon"));
 var _templateObject, _templateObject2, _templateObject3;
 function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
-function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && Object.prototype.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof3(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
 var DxcChip = function DxcChip(_ref) {
   var label = _ref.label,
     suffixIcon = _ref.suffixIcon,
@@ -34,26 +35,28 @@ var DxcChip = function DxcChip(_ref) {
     margin: margin
   }, prefixIcon && /*#__PURE__*/_react["default"].createElement(IconContainer, {
     role: typeof onClickPrefix === "function" ? "button" : undefined,
+    "aria-label": typeof onClickPrefix === "function" ? "Prefix Action" : undefined,
     disabled: disabled,
     interactuable: typeof onClickPrefix === "function" && !disabled,
     tabIndex: typeof onClickPrefix === "function" && !disabled ? tabIndex : -1,
     onClick: function onClick() {
       return onClickPrefix && !disabled && onClickPrefix();
     }
-  }, typeof prefixIcon === "string" ? /*#__PURE__*/_react["default"].createElement("img", {
-    src: prefixIcon
+  }, typeof prefixIcon === "string" ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    icon: prefixIcon
   }) : prefixIcon), label && /*#__PURE__*/_react["default"].createElement(LabelContainer, {
     disabled: disabled
   }, label), suffixIcon && /*#__PURE__*/_react["default"].createElement(IconContainer, {
     role: typeof onClickSuffix === "function" ? "button" : undefined,
+    "aria-label": typeof onClickSuffix === "function" ? "Suffix Action" : undefined,
     disabled: disabled,
     interactuable: typeof onClickSuffix === "function" && !disabled,
     tabIndex: typeof onClickSuffix === "function" && !disabled ? tabIndex : -1,
     onClick: function onClick() {
       return !disabled && (onClickSuffix === null || onClickSuffix === void 0 ? void 0 : onClickSuffix());
     }
-  }, typeof suffixIcon === "string" ? /*#__PURE__*/_react["default"].createElement("img", {
-    src: suffixIcon
+  }, typeof suffixIcon === "string" ? /*#__PURE__*/_react["default"].createElement(_Icon["default"], {
+    icon: suffixIcon
   }) : suffixIcon)));
 };
 var calculateWidth = function calculateWidth(margin) {
@@ -106,7 +109,7 @@ var LabelContainer = _styledComponents["default"].span(_templateObject2 || (_tem
 }, function (props) {
   return props.disabled ? props.theme.disabledFontColor : props.theme.fontColor;
 });
-var IconContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  border-radius: 0.25rem;\n  color: ", ";\n  ", "\n\n  ", "\n\n  img,\n  svg {\n    width: ", ";\n    height: ", ";\n  }\n"])), function (props) {
+var IconContainer = _styledComponents["default"].div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  border-radius: 0.25rem;\n  color: ", ";\n  ", "\n\n  ", "\n\n  font-size: ", ";\n  svg {\n    width: ", ";\n    height: ", ";\n  }\n"])), function (props) {
   return props.disabled ? props.theme.disabledIconColor : props.theme.iconColor;
 }, function (_ref3) {
   var interactuable = _ref3.interactuable;
@@ -117,5 +120,7 @@ var IconContainer = _styledComponents["default"].div(_templateObject3 || (_templ
   return props.theme.iconSize;
 }, function (props) {
   return props.theme.iconSize;
+}, function (props) {
+  return props.theme.iconSize;
 });
 var _default = exports["default"] = DxcChip;

package/chip/Chip.stories.tsx

@@ -13,7 +13,6 @@ export default {
 const iconSVG = (
   <svg
     version="1.1"
-    id="Capa_1"
     x="0px"
     y="0px"
     width="438.536px"
@@ -64,20 +63,11 @@ export const Chromatic = () => (
     </ExampleContainer>
     <ExampleContainer>
       <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"
-      />
+      <DxcChip label="Chip with prefix and suffix" prefixIcon={iconSVG} suffixIcon="filled_check_circle" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Disabled chip" theme="light" level={4} />
-      <DxcChip
-        label="Disabled"
-        disabled
-        prefixIcon={iconSVG}
-        suffixIcon="https://upload.wikimedia.org/wikipedia/commons/e/e0/Check_green_icon.svg"
-      />
+      <DxcChip label="Disabled" disabled prefixIcon={iconSVG} suffixIcon="filled_check_circle" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Chip with ellipsis" theme="light" level={4} />
@@ -146,22 +136,13 @@ export const Chromatic = () => (
     <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"
-        />
+        <DxcChip label="Chip" prefixIcon={iconSVG} suffixIcon="filled_check_circle" />
       </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"
-        />
+        <DxcChip label="Chip" disabled prefixIcon={iconSVG} suffixIcon="filled_check_circle" />
       </HalstackProvider>
     </ExampleContainer>
     <ExampleContainer pseudoState="pseudo-hover">
@@ -193,13 +174,17 @@ export const Chromatic = () => (
 const ChipPrefixFocused = () => (
   <ExampleContainer>
     <Title title="Chip with prefix" theme="light" level={4} />
-    <DxcChip label="Chip with prefix" prefixIcon={iconSVG} onClickPrefix={() => {}} />
+    <DxcChip
+      label="Chip with prefix"
+      prefixIcon={iconSVG}
+      onClickPrefix={() => {}}
+    />
   </ExampleContainer>
 );
 const ChipSuffixFocused = () => (
   <ExampleContainer>
     <Title title="Chip with suffix" theme="light" level={4} />
-    <DxcChip label="Chip with suffix" suffixIcon="https://icons-for-free.com/download-icon-close+icon-1320184117228553763_512.png" onClickSuffix={() => {}} />
+    <DxcChip label="Chip with suffix" suffixIcon="filled_delete" onClickSuffix={() => {}} />
   </ExampleContainer>
 );
 

package/chip/Chip.test.js

@@ -16,26 +16,26 @@ describe("Chip component tests", 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",
+        prefixIcon: "nutrition",
         onClickPrefix: onClick
       })),
       getByText = _render2.getByText,
       getByRole = _render2.getByRole;
     expect(getByText("Chip")).toBeTruthy();
-    _react2.fireEvent.click(getByRole("img"));
+    _react2.fireEvent.click(getByRole("button"));
     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",
+        suffixIcon: "nutrition",
         onClickSuffix: onClick
       })),
       getByText = _render3.getByText,
       getByRole = _render3.getByRole;
     expect(getByText("Chip")).toBeTruthy();
-    _react2.fireEvent.click(getByRole("img"));
+    _react2.fireEvent.click(getByRole("button"));
     expect(onClick).toHaveBeenCalled();
   });
 });

package/common/coreTokens.d.ts

@@ -1,5 +1,8 @@
-declare const CORE_TOKENS: {
-    inherit: string;
+/**
+ * Halstack Color Palette
+ * @link https://developer.dxc.com/halstack/next/principles/color/#color-tokens-core-color-tokens
+ */
+declare const CoreColorTokens: {
     color_black: string;
     color_white: string;
     color_transparent: string;
@@ -83,6 +86,11 @@ declare const CORE_TOKENS: {
     color_orange_700: string;
     color_orange_800: string;
     color_orange_900: string;
+};
+export declare const getCoreColorToken: (key: CoreColorTokens) => string;
+export type CoreColorTokens = keyof typeof CoreColorTokens;
+declare const CoreTokens: {
+    inherit: string;
     type_sans: string;
     type_scale_root: string;
     type_scale_08: string;
@@ -116,6 +124,17 @@ declare const CORE_TOKENS: {
     type_leading_normal: string;
     type_leading_loose_01: string;
     type_leading_loose_02: 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;
     spacing_0: string;
     spacing_2: string;
     spacing_4: string;
@@ -131,16 +150,88 @@ declare const CORE_TOKENS: {
     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;
+    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;
 };
-export default CORE_TOKENS;
+export default CoreTokens;

package/common/coreTokens.js

@@ -1,11 +1,18 @@
 "use strict";
 
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports["default"] = void 0;
-var CORE_TOKENS = {
-  inherit: "inherit",
+exports.getCoreColorToken = exports["default"] = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+/**
+ * Halstack Color Palette
+ * @link https://developer.dxc.com/halstack/next/principles/color/#color-tokens-core-color-tokens
+ */
+var CoreColorTokens = {
   // Color
   // Absolutes
   color_black: "#000000",
@@ -99,7 +106,34 @@ var CORE_TOKENS = {
   color_orange_600: "#f38f20",
   color_orange_700: "#c26c0a",
   color_orange_800: "#915108",
-  color_orange_900: "#613605",
+  color_orange_900: "#613605"
+};
+var getCoreColorToken = exports.getCoreColorToken = function getCoreColorToken(key) {
+  return CoreColorTokens[key];
+};
+/**
+ * Halstack Spacing Values
+ * @link https://developer.dxc.com/halstack/next/principles/spacing/
+ */
+var CoreSpacingTokens = {
+  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"
+};
+var CoreTokens = _objectSpread(_objectSpread(_objectSpread({}, CoreColorTokens), CoreSpacingTokens), {}, {
+  inherit: "inherit",
   // Typography
   type_sans: "Open Sans, sans-serif",
   type_scale_root: "16px",
@@ -134,22 +168,6 @@ var CORE_TOKENS = {
   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",
@@ -162,5 +180,5 @@ var CORE_TOKENS = {
   border_solid: "solid",
   border_dashed: "dashed",
   border_none: "none"
-};
-var _default = exports["default"] = CORE_TOKENS;
+});
+var _default = exports["default"] = CoreTokens;