@dxc-technology/halstack-react 0.0.0-7550efd → 0.0.0-75be8bf

package/toggle-group/ToggleGroup.test.js

@@ -6,7 +6,7 @@ var _react = _interopRequireDefault(require("react"));
 
 var _react2 = require("@testing-library/react");
 
-var _ToggleGroup = _interopRequireDefault(require("./ToggleGroup"));
+var _ToggleGroup = _interopRequireDefault(require("./ToggleGroup.tsx"));
 
 var options = [{
   value: 1,
@@ -37,14 +37,28 @@ describe("Toggle group component tests", function () {
     expect(getByText("Apple")).toBeTruthy();
     expect(getByText("Google")).toBeTruthy();
   });
+  test("Toggle group renders with correct aria-label in only-icon scenario", function () {
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+      label: "Toggle group label",
+      helperText: "Toggle group helper text",
+      options: [{
+        value: 1,
+        icon: "https://cdn.icon-icons.com/icons2/2645/PNG/512/mic_mute_icon_159965.png",
+        title: "Mute"
+      }]
+    })),
+        getByRole = _render2.getByRole;
+
+    expect(getByRole("button").getAttribute("aria-label")).toBe("Mute");
+  });
   test("Uncontrolled toggle group calls correct function on change with value", function () {
     var onChange = jest.fn();
 
-    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
       options: options,
       onChange: onChange
     })),
-        getByText = _render2.getByText;
+        getByText = _render3.getByText;
 
     var option = getByText("Ebay");
 
@@ -55,12 +69,12 @@ describe("Toggle group component tests", function () {
   test("Controlled toggle group calls correct function on change with value", function () {
     var onChange = jest.fn();
 
-    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
       options: options,
       onChange: onChange,
       value: 1
     })),
-        getByText = _render3.getByText;
+        getByText = _render4.getByText;
 
     var option = getByText("Ebay");
 
@@ -71,12 +85,12 @@ describe("Toggle group component tests", function () {
   test("Function on change is not called when disable", function () {
     var onChange = jest.fn();
 
-    var _render4 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
       options: options,
       onChange: onChange,
       disabled: true
     })),
-        getByText = _render4.getByText;
+        getByText = _render5.getByText;
 
     var option = getByText("Ebay");
 
@@ -87,14 +101,14 @@ describe("Toggle group component tests", function () {
   test("Uncontrolled multiple toggle group calls correct function on change with value when is multiple", function () {
     var onChange = jest.fn();
 
-    var _render5 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
       options: options,
       onChange: onChange,
       multiple: true
     })),
-        getAllByRole = _render5.getAllByRole;
+        getAllByRole = _render6.getAllByRole;
 
-    var toggleOptions = getAllByRole("switch");
+    var toggleOptions = getAllByRole("button");
 
     _react2.fireEvent.click(toggleOptions[0]);
 
@@ -105,20 +119,20 @@ describe("Toggle group component tests", function () {
     _react2.fireEvent.click(toggleOptions[3]);
 
     expect(onChange).toHaveBeenCalledWith([1, 2, 4]);
-    expect(toggleOptions[0].getAttribute("aria-checked")).toBe("true");
-    expect(toggleOptions[1].getAttribute("aria-checked")).toBe("true");
-    expect(toggleOptions[3].getAttribute("aria-checked")).toBe("true");
+    expect(toggleOptions[0].getAttribute("aria-pressed")).toBe("true");
+    expect(toggleOptions[1].getAttribute("aria-pressed")).toBe("true");
+    expect(toggleOptions[3].getAttribute("aria-pressed")).toBe("true");
   });
   test("Controlled multiple toggle returns always same values", function () {
     var onChange = jest.fn();
 
-    var _render6 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
       options: options,
       onChange: onChange,
       value: [1],
       multiple: true
     })),
-        getByText = _render6.getByText;
+        getByText = _render7.getByText;
 
     var option = getByText("Ebay");
 
@@ -132,25 +146,25 @@ describe("Toggle group component tests", function () {
     expect(onChange).toHaveBeenNthCalledWith(2, [1, 4]);
   });
   test("Single selection: Renders with correct default value", function () {
-    var _render7 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
       options: options,
       defaultValue: 2
     })),
-        getAllByRole = _render7.getAllByRole;
+        getAllByRole = _render8.getAllByRole;
 
-    var toggleOptions = getAllByRole("radio");
-    expect(toggleOptions[1].getAttribute("aria-checked")).toBe("true");
+    var toggleOptions = getAllByRole("button");
+    expect(toggleOptions[1].getAttribute("aria-pressed")).toBe("true");
   });
   test("Multiple selection: Renders with correct default value", function () {
-    var _render8 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
+    var _render9 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_ToggleGroup["default"], {
       options: options,
       defaultValue: [2, 4],
       multiple: true
     })),
-        getAllByRole = _render8.getAllByRole;
+        getAllByRole = _render9.getAllByRole;
 
-    var toggleOptions = getAllByRole("switch");
-    expect(toggleOptions[1].getAttribute("aria-checked")).toBe("true");
-    expect(toggleOptions[3].getAttribute("aria-checked")).toBe("true");
+    var toggleOptions = getAllByRole("button");
+    expect(toggleOptions[1].getAttribute("aria-pressed")).toBe("true");
+    expect(toggleOptions[3].getAttribute("aria-pressed")).toBe("true");
   });
 });

package/toggle-group/types.d.ts

@@ -7,23 +7,22 @@ declare type Margin = {
     right?: Space;
 };
 declare type SVG = React.ReactNode & React.SVGProps<SVGSVGElement>;
-declare type OptionCommons = {
-    /**
-     * Number with the option inner value.
-     */
-    value: number;
-};
-declare type OptionIcon = OptionCommons & {
+declare type OptionIcon = {
     /**
      * String with the option display value.
      */
-    label?: string;
+    label?: never;
     /**
      * Element used as the icon. Icon and label can't be used at same time.
      */
     icon: string | SVG;
+    /**
+     * Value for the HTML properties title and aria-label.
+     * When a label is defined, this prop can not be use.
+     */
+    title: string;
 };
-declare type OptionLabel = OptionCommons & {
+export declare type OptionLabel = {
     /**
      * String with the option display value.
      */
@@ -32,8 +31,18 @@ declare type OptionLabel = OptionCommons & {
      * Element used as the icon. Icon and label can't be used at same time.
      */
     icon?: string | SVG;
+    /**
+     * Value for the HTML properties title and aria-label.
+     * When a label is defined, this prop can not be use.
+     */
+    title?: never;
 };
-declare type Option = OptionIcon | OptionLabel;
+declare type Option = {
+    /**
+     * Number with the option inner value.
+     */
+    value: number;
+} & (OptionIcon | OptionLabel);
 declare type CommonProps = {
     /**
      * Text to be placed above the component.
@@ -61,7 +70,7 @@ declare type CommonProps = {
      */
     tabIndex?: number;
 };
-declare type SingleSelectionToggle = CommonProps & {
+declare type SingleSelectionToggleGroup = CommonProps & {
     /**
      * If true, the toggle group will support multiple selection. In that case, value must be an array of numbers with the keys of the selected values.
      */
@@ -81,7 +90,7 @@ declare type SingleSelectionToggle = CommonProps & {
      */
     onChange?: (optionIndex: number) => void;
 };
-declare type MultipleSelectionToggle = CommonProps & {
+declare type MultipleSelectionToggleGroup = CommonProps & {
     /**
      * If true, the toggle group will support multiple selection. In that case, value must be an array of numbers with the keys of the selected values.
      */
@@ -101,5 +110,5 @@ declare type MultipleSelectionToggle = CommonProps & {
      */
     onChange?: (optionIndex: number[]) => void;
 };
-declare type Props = SingleSelectionToggle | MultipleSelectionToggle;
+declare type Props = SingleSelectionToggleGroup | MultipleSelectionToggleGroup;
 export default Props;

package/typography/Typography.d.ts

@@ -1,4 +1,4 @@
 /// <reference types="react" />
 import TypographyPropsTypes from "./types";
-declare const Typography: ({ as, display, fontFamily, fontSize, fontStyle, fontWeight, letterSpacing, lineHeight, textAlign, color, textDecoration, textOverflow, whiteSpace, children, }: TypographyPropsTypes) => JSX.Element;
-export default Typography;
+declare const DxcTypography: ({ textOverflow, whiteSpace, children, ...props }: TypographyPropsTypes) => JSX.Element;
+export default DxcTypography;

package/typography/Typography.js

@@ -2,130 +2,31 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _typeof = require("@babel/runtime/helpers/typeof");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
 exports["default"] = void 0;
 
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
 
-var _templateObject;
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
 
-function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+var _react = _interopRequireDefault(require("react"));
 
-function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { "default": obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj["default"] = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
+var _BaseTypography = _interopRequireDefault(require("../utils/BaseTypography"));
 
-var TypographyContext = /*#__PURE__*/_react["default"].createContext(null);
+var _excluded = ["textOverflow", "whiteSpace", "children"];
 
-var Typography = function Typography(_ref) {
-  var as = _ref.as,
-      display = _ref.display,
-      fontFamily = _ref.fontFamily,
-      fontSize = _ref.fontSize,
-      fontStyle = _ref.fontStyle,
-      fontWeight = _ref.fontWeight,
-      letterSpacing = _ref.letterSpacing,
-      lineHeight = _ref.lineHeight,
-      textAlign = _ref.textAlign,
-      color = _ref.color,
-      textDecoration = _ref.textDecoration,
-      textOverflow = _ref.textOverflow,
+var DxcTypography = function DxcTypography(_ref) {
+  var textOverflow = _ref.textOverflow,
       whiteSpace = _ref.whiteSpace,
-      children = _ref.children;
-  var componentContext = (0, _react.useContext)(TypographyContext);
-  var asValue = as !== null && as !== void 0 ? as : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.as) || "span";
-  var displayValue = display !== null && display !== void 0 ? display : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.display) || "inline";
-  var fontFamilyValue = fontFamily !== null && fontFamily !== void 0 ? fontFamily : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontFamily) || "Open Sans, sans-serif";
-  var fontSizeValue = fontSize !== null && fontSize !== void 0 ? fontSize : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontSize) || "1rem";
-  var fontStyleValue = fontStyle !== null && fontStyle !== void 0 ? fontStyle : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontStyle) || "normal";
-  var fontWeightValue = fontWeight !== null && fontWeight !== void 0 ? fontWeight : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.fontWeight) || "400";
-  var letterSpacingValue = letterSpacing !== null && letterSpacing !== void 0 ? letterSpacing : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.letterSpacing) || "0em";
-  var lineHeightValue = lineHeight !== null && lineHeight !== void 0 ? lineHeight : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.lineHeight) || "1.5em";
-  var textAlignValue = textAlign !== null && textAlign !== void 0 ? textAlign : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.textAlign) || "left";
-  var colorValue = color !== null && color !== void 0 ? color : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.color) || "#000000";
-  var textDecorationValue = textDecoration !== null && textDecoration !== void 0 ? textDecoration : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.textDecoration) || "none";
-  var textOverflowValue = textOverflow !== null && textOverflow !== void 0 ? textOverflow : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.textOverflow) || "unset";
-  var whiteSpaceValue = whiteSpace !== null && whiteSpace !== void 0 ? whiteSpace : (componentContext === null || componentContext === void 0 ? void 0 : componentContext.whiteSpace) || "normal";
-  return /*#__PURE__*/_react["default"].createElement(TypographyContext.Provider, {
-    value: {
-      as: asValue,
-      display: displayValue,
-      fontFamily: fontFamilyValue,
-      fontSize: fontSizeValue,
-      fontStyle: fontStyleValue,
-      fontWeight: fontWeightValue,
-      letterSpacing: letterSpacingValue,
-      lineHeight: lineHeightValue,
-      textAlign: textAlignValue,
-      color: colorValue,
-      textDecoration: textDecorationValue,
-      textOverflow: textOverflowValue,
-      whiteSpace: whiteSpaceValue
-    }
-  }, /*#__PURE__*/_react["default"].createElement(StyledTypography, {
-    as: asValue,
-    display: displayValue,
-    fontFamily: fontFamilyValue,
-    fontSize: fontSizeValue,
-    fontStyle: fontStyleValue,
-    fontWeight: fontWeightValue,
-    letterSpacing: letterSpacingValue,
-    lineHeight: lineHeightValue,
-    textAlign: textAlignValue,
-    color: colorValue,
-    textDecoration: textDecorationValue,
-    textOverflow: textOverflowValue,
-    whiteSpace: whiteSpaceValue
-  }, children));
+      children = _ref.children,
+      props = (0, _objectWithoutProperties2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_BaseTypography["default"], (0, _extends2["default"])({
+    textOverflow: textOverflow,
+    whiteSpace: whiteSpace == null && textOverflow != null && textOverflow !== "unset" ? "nowrap" : whiteSpace
+  }, props), children);
 };
 
-var StyledTypography = _styledComponents["default"].span(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  margin: 0px;\n  display: ", ";\n  color: ", ";\n  font-family: ", ";\n  font-size: ", ";\n  font-style: ", ";\n  font-weight: ", ";\n  letter-spacing: ", ";\n  text-align: ", ";\n  line-height: ", ";\n  text-decoration: ", ";\n  text-overflow: ", ";\n  white-space: ", ";\n  overflow: ", ";\n"])), function (_ref2) {
-  var display = _ref2.display;
-  return display;
-}, function (_ref3) {
-  var color = _ref3.color;
-  return color;
-}, function (_ref4) {
-  var fontFamily = _ref4.fontFamily;
-  return fontFamily;
-}, function (_ref5) {
-  var fontSize = _ref5.fontSize;
-  return fontSize;
-}, function (_ref6) {
-  var fontStyle = _ref6.fontStyle;
-  return fontStyle;
-}, function (_ref7) {
-  var fontWeight = _ref7.fontWeight;
-  return fontWeight;
-}, function (_ref8) {
-  var letterSpacing = _ref8.letterSpacing;
-  return letterSpacing;
-}, function (_ref9) {
-  var textAlign = _ref9.textAlign;
-  return textAlign;
-}, function (_ref10) {
-  var lineHeight = _ref10.lineHeight;
-  return lineHeight;
-}, function (_ref11) {
-  var textDecoration = _ref11.textDecoration;
-  return textDecoration;
-}, function (_ref12) {
-  var textOverflow = _ref12.textOverflow;
-  return textOverflow;
-}, function (_ref13) {
-  var whiteSpace = _ref13.whiteSpace,
-      textOverflow = _ref13.textOverflow;
-  return whiteSpace !== "normal" ? whiteSpace : textOverflow !== "unset" ? "nowrap" : "normal";
-}, function (_ref14) {
-  var textOverflow = _ref14.textOverflow;
-  return textOverflow !== "unset" ? "hidden" : "visible";
-});
-
-var _default = Typography;
+var _default = DxcTypography;
 exports["default"] = _default;

package/typography/Typography.stories.tsx

@@ -140,7 +140,7 @@ export const Chromatic = () => (
     <ExampleContainer>
       <Title title="Typography whitespace" theme="light" level={4} />
       <div style={{ margin: "50px", border: "1px solid red", width: "125px" }}>
-        <DxcTypography whiteSpace="normal" fontSize="2rem">
+        <DxcTypography fontSize="2rem">
           {"                  "} Normal: A bunch of words you see.
         </DxcTypography>
       </div>