@dxc-technology/halstack-react 0.0.0-ec7b867 → 0.0.0-ecc45e2

package/checkbox/Checkbox.stories.tsx

@@ -4,7 +4,7 @@ import { BackgroundColorProvider } from "../BackgroundColorContext";
 import Title from "../../.storybook/components/Title";
 import ExampleContainer from "../../.storybook/components/ExampleContainer";
 import DarkContainer from "../../.storybook/components/DarkSection";
-import { userEvent, within } from "@storybook/testing-library";
+import { userEvent } from "@storybook/testing-library";
 
 export default {
   title: "Checkbox",
@@ -13,128 +13,124 @@ export default {
 
 const Checkbox = () => (
   <>
-    <>
-      <ExampleContainer>
-        <Title title="Default" theme="light" level={4} />
-        <DxcCheckbox label="Checkbox" />
-      </ExampleContainer>
-      <ExampleContainer>
-        <Title title="Focused" theme="light" level={4} />
-        <DxcCheckbox label="Focused" />
-      </ExampleContainer>
-      <ExampleContainer>
-        <Title title="Checked" theme="light" level={4} />
-        <DxcCheckbox label="Checkbox" checked />
-      </ExampleContainer>
-      <ExampleContainer>
-        <Title title="Required" theme="light" level={4} />
-        <DxcCheckbox label="Checkbox" required />
-      </ExampleContainer>
-      <ExampleContainer>
-        <Title title="Disabled and checked" theme="light" level={4} />
-        <DxcCheckbox label="Checkbox" disabled checked />
-      </ExampleContainer>
-      <ExampleContainer>
-        <Title title="Disabled and required" theme="light" level={4} />
-        <DxcCheckbox label="Checkbox" disabled required />
-      </ExampleContainer>
-      <ExampleContainer>
-        <Title title="Disabled, required and checked" theme="light" level={4} />
-        <DxcCheckbox label="Checkbox" disabled required checked />
-      </ExampleContainer>
-      <ExampleContainer>
-        <Title title="Label after" theme="light" level={4} />
-        <DxcCheckbox label="Checkbox" labelPosition="after" />
-      </ExampleContainer>
-      <ExampleContainer>
-        <Title title="Checked with label after" theme="light" level={4} />
-        <DxcCheckbox label="Checkbox" checked labelPosition="after" />
-      </ExampleContainer>
-      <ExampleContainer>
-        <Title title="Required with label after" theme="light" level={4} />
-        <DxcCheckbox label="Checkbox" required labelPosition="after" />
-      </ExampleContainer>
-      <ExampleContainer>
-        <Title title="Disabled and checked with label after" theme="light" level={4} />
-        <DxcCheckbox label="Checkbox" disabled checked labelPosition="after" />
-      </ExampleContainer>
-      <ExampleContainer>
-        <Title title="Disabled and required with label after" theme="light" level={4} />
-        <DxcCheckbox label="Checkbox" disabled required labelPosition="after" />
-      </ExampleContainer>
-      <ExampleContainer>
-        <Title title="Disabled, required and checked with label after" theme="light" level={4} />
-        <DxcCheckbox label="Checkbox" disabled required checked labelPosition="after" />
-      </ExampleContainer>
-      <ExampleContainer pseudoState="pseudo-hover">
-        <Title title="Hovered" theme="light" level={4} />
-        <DxcCheckbox label="Hovered" />
-      </ExampleContainer>
-      <ExampleContainer pseudoState="pseudo-hover">
-        <Title title="Hovered and checked" theme="light" level={4} />
-        <DxcCheckbox label="Hovered" checked />
-      </ExampleContainer>
-    </>
+    <ExampleContainer>
+      <Title title="Default" theme="light" level={4} />
+      <DxcCheckbox label="Checkbox" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Focused" theme="light" level={4} />
+      <DxcCheckbox label="Focused" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Checked" theme="light" level={4} />
+      <DxcCheckbox label="Checkbox" defaultChecked />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Optional" theme="light" level={4} />
+      <DxcCheckbox label="Checkbox" optional />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled and checked" theme="light" level={4} />
+      <DxcCheckbox label="Checkbox" disabled defaultChecked />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled and optional" theme="light" level={4} />
+      <DxcCheckbox label="Checkbox" disabled optional />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled, optional and checked" theme="light" level={4} />
+      <DxcCheckbox label="Checkbox" disabled optional defaultChecked />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Label after" theme="light" level={4} />
+      <DxcCheckbox label="Checkbox" labelPosition="after" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Checked with label after" theme="light" level={4} />
+      <DxcCheckbox label="Checkbox" defaultChecked labelPosition="after" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Optional with label after" theme="light" level={4} />
+      <DxcCheckbox label="Checkbox" optional labelPosition="after" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled and checked with label after" theme="light" level={4} />
+      <DxcCheckbox label="Checkbox" disabled defaultChecked labelPosition="after" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled and optional with label after" theme="light" level={4} />
+      <DxcCheckbox label="Checkbox" disabled optional labelPosition="after" />
+    </ExampleContainer>
+    <ExampleContainer>
+      <Title title="Disabled, optional and checked with label after" theme="light" level={4} />
+      <DxcCheckbox label="Checkbox" disabled optional defaultChecked labelPosition="after" />
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-hover">
+      <Title title="Hovered" theme="light" level={4} />
+      <DxcCheckbox label="Hovered" />
+    </ExampleContainer>
+    <ExampleContainer pseudoState="pseudo-hover">
+      <Title title="Hovered and checked" theme="light" level={4} />
+      <DxcCheckbox label="Hovered" defaultChecked />
+    </ExampleContainer>
     <BackgroundColorProvider color="#333333">
       <DarkContainer>
-        <>
-          <ExampleContainer>
-            <Title title="Default" theme="dark" level={4} />
-            <DxcCheckbox label="Checkbox" />
-          </ExampleContainer>
-          <ExampleContainer>
-            <Title title="Checked" theme="dark" level={4} />
-            <DxcCheckbox label="Checkbox" checked />
-          </ExampleContainer>
-          <ExampleContainer>
-            <Title title="Required" theme="dark" level={4} />
-            <DxcCheckbox label="Checkbox" required />
-          </ExampleContainer>
-          <ExampleContainer>
-            <Title title="Disabled and checked" theme="dark" level={4} />
-            <DxcCheckbox label="Checkbox" disabled checked />
-          </ExampleContainer>
-          <ExampleContainer>
-            <Title title="Disabled and required" theme="dark" level={4} />
-            <DxcCheckbox label="Checkbox" disabled required />
-          </ExampleContainer>
-          <ExampleContainer>
-            <Title title="Disabled, required and checked" theme="dark" level={4} />
-            <DxcCheckbox label="Checkbox" disabled required checked />
-          </ExampleContainer>
-          <ExampleContainer>
-            <Title title="Label after" theme="dark" level={4} />
-            <DxcCheckbox label="Checkbox" labelPosition="after" />
-          </ExampleContainer>
-          <ExampleContainer>
-            <Title title="Checked with label after" theme="dark" level={4} />
-            <DxcCheckbox label="Checkbox" checked labelPosition="after" />
-          </ExampleContainer>
-          <ExampleContainer>
-            <Title title="Required with label after" theme="dark" level={4} />
-            <DxcCheckbox label="Checkbox" required labelPosition="after" />
-          </ExampleContainer>
-          <ExampleContainer>
-            <Title title="Disabled and checked with label after" theme="dark" level={4} />
-            <DxcCheckbox label="Checkbox" disabled checked labelPosition="after" />
-          </ExampleContainer>
-          <ExampleContainer>
-            <Title title="Disabled and required with label after" theme="dark" level={4} />
-            <DxcCheckbox label="Checkbox" disabled required labelPosition="after" />
-          </ExampleContainer>
-          <ExampleContainer>
-            <Title title="Disabled, required and checked with label after" theme="dark" level={4} />
-            <DxcCheckbox label="Checkbox" disabled required checked labelPosition="after" />
-          </ExampleContainer>
-          <ExampleContainer pseudoState="pseudo-hover">
-            <Title title="Hovered" theme="dark" level={4} />
-            <DxcCheckbox label="Hovered" />
-          </ExampleContainer>
-          <ExampleContainer pseudoState="pseudo-hover">
-            <Title title="Hovered and checked" theme="dark" level={4} />
-            <DxcCheckbox label="Hovered" checked />
-          </ExampleContainer>
-        </>
+        <ExampleContainer>
+          <Title title="Default" theme="dark" level={4} />
+          <DxcCheckbox label="Checkbox" />
+        </ExampleContainer>
+        <ExampleContainer>
+          <Title title="Checked" theme="dark" level={4} />
+          <DxcCheckbox label="Checkbox" defaultChecked />
+        </ExampleContainer>
+        <ExampleContainer>
+          <Title title="Optional" theme="dark" level={4} />
+          <DxcCheckbox label="Checkbox" optional />
+        </ExampleContainer>
+        <ExampleContainer>
+          <Title title="Disabled and checked" theme="dark" level={4} />
+          <DxcCheckbox label="Checkbox" disabled defaultChecked />
+        </ExampleContainer>
+        <ExampleContainer>
+          <Title title="Disabled and optional" theme="dark" level={4} />
+          <DxcCheckbox label="Checkbox" disabled optional />
+        </ExampleContainer>
+        <ExampleContainer>
+          <Title title="Disabled, optional and checked" theme="dark" level={4} />
+          <DxcCheckbox label="Checkbox" disabled optional defaultChecked />
+        </ExampleContainer>
+        <ExampleContainer>
+          <Title title="Label after" theme="dark" level={4} />
+          <DxcCheckbox label="Checkbox" labelPosition="after" />
+        </ExampleContainer>
+        <ExampleContainer>
+          <Title title="Checked with label after" theme="dark" level={4} />
+          <DxcCheckbox label="Checkbox" defaultChecked labelPosition="after" />
+        </ExampleContainer>
+        <ExampleContainer>
+          <Title title="Optional with label after" theme="dark" level={4} />
+          <DxcCheckbox label="Checkbox" optional labelPosition="after" />
+        </ExampleContainer>
+        <ExampleContainer>
+          <Title title="Disabled and checked with label after" theme="dark" level={4} />
+          <DxcCheckbox label="Checkbox" disabled defaultChecked labelPosition="after" />
+        </ExampleContainer>
+        <ExampleContainer>
+          <Title title="Disabled and optional with label after" theme="dark" level={4} />
+          <DxcCheckbox label="Checkbox" disabled optional labelPosition="after" />
+        </ExampleContainer>
+        <ExampleContainer>
+          <Title title="Disabled, optional and checked with label after" theme="dark" level={4} />
+          <DxcCheckbox label="Checkbox" disabled optional defaultChecked labelPosition="after" />
+        </ExampleContainer>
+        <ExampleContainer pseudoState="pseudo-hover">
+          <Title title="Hovered" theme="dark" level={4} />
+          <DxcCheckbox label="Hovered" />
+        </ExampleContainer>
+        <ExampleContainer pseudoState="pseudo-hover">
+          <Title title="Hovered and checked" theme="dark" level={4} />
+          <DxcCheckbox label="Hovered" defaultChecked />
+        </ExampleContainer>
       </DarkContainer>
     </BackgroundColorProvider>
     <Title title="Sizes" theme="light" level={2} />
@@ -156,31 +152,31 @@ const Checkbox = () => (
     <Title title="Margins" theme="light" level={2} />
     <ExampleContainer>
       <Title title="Xxsmall" theme="light" level={4} />
-      <DxcCheckbox label="Xxsmall" margin={"xxsmall"} />
+      <DxcCheckbox label="Xxsmall" margin="xxsmall" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Xsmall" theme="light" level={4} />
-      <DxcCheckbox label="Xsmall" margin={"xsmall"} />
+      <DxcCheckbox label="Xsmall" margin="xsmall" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Small" theme="light" level={4} />
-      <DxcCheckbox label="Small" margin={"small"} />
+      <DxcCheckbox label="Small" margin="small" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Medium" theme="light" level={4} />
-      <DxcCheckbox label="Medium" margin={"medium"} />
+      <DxcCheckbox label="Medium" margin="medium" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Large" theme="light" level={4} />
-      <DxcCheckbox label="Large" margin={"large"} />
+      <DxcCheckbox label="Large" margin="large" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Xlarge" theme="light" level={4} />
-      <DxcCheckbox label="Xlarge" margin={"xlarge"} />
+      <DxcCheckbox label="Xlarge" margin="xlarge" />
     </ExampleContainer>
     <ExampleContainer>
       <Title title="Xxlarge" theme="light" level={4} />
-      <DxcCheckbox label="Xxlarge" margin={"xxlarge"} />
+      <DxcCheckbox label="Xxlarge" margin="xxlarge" />
     </ExampleContainer>
   </>
 );

package/checkbox/Checkbox.test.js

@@ -0,0 +1,78 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _react = _interopRequireDefault(require("react"));
+
+var _react2 = require("@testing-library/react");
+
+var _Checkbox = _interopRequireDefault(require("./Checkbox"));
+
+describe("Checkbox component tests", function () {
+  test("Checkbox renders with correct text", function () {
+    var _render = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+      label: "Checkbox"
+    })),
+        getByText = _render.getByText;
+
+    expect(getByText("Checkbox")).toBeTruthy();
+  });
+  test("Calls correct function on click", function () {
+    var onChange = jest.fn();
+
+    var _render2 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+      label: "Checkbox",
+      onChange: onChange
+    })),
+        getByText = _render2.getByText;
+
+    _react2.fireEvent.click(getByText("Checkbox"));
+
+    expect(onChange).toHaveBeenCalled();
+  });
+  test("Uncontrolled checkbox", function () {
+    var onChange = jest.fn();
+    var component = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+      label: "Checkbox",
+      onChange: onChange
+    }));
+    var visibleCheckbox = component.getByText("Checkbox");
+    var input = component.getByRole("checkbox");
+    expect(input.checked).toBe(false);
+
+    _react2.fireEvent.click(visibleCheckbox);
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith(true);
+    expect(input.checked).toBe(true);
+  });
+  test("Controlled checkbox", function () {
+    var onChange = jest.fn();
+    var component = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+      label: "Checkbox",
+      checked: false,
+      onChange: onChange
+    }));
+    var input = component.getByRole("checkbox");
+    var visibleCheckbox = component.getByText("Checkbox");
+
+    _react2.fireEvent.click(visibleCheckbox);
+
+    expect(onChange).toHaveBeenCalled();
+    expect(onChange).toHaveBeenCalledWith(true);
+    expect(input.checked).toBe(false);
+  });
+  test("Renders with correct initial value and initial state when it is uncontrolled", function () {
+    var _render3 = (0, _react2.render)( /*#__PURE__*/_react["default"].createElement(_Checkbox["default"], {
+      label: "Default label",
+      defaultChecked: true,
+      value: "test-defaultChecked"
+    })),
+        getByRole = _render3.getByRole;
+
+    var input = getByRole("checkbox");
+    expect(input.checked).toBe(true);
+    expect(input.value).toBe("test-defaultChecked");
+    expect(input.getAttribute("aria-checked")).toBe("true");
+  });
+});

package/checkbox/types.d.ts

@@ -6,6 +6,10 @@ declare type Margin = {
     right?: Space;
 };
 declare type Props = {
+    /**
+     * Initial state of the checkbox, only when it is uncontrolled.
+     */
+    defaultChecked?: boolean;
     /**
      * If true, the component is checked. If undefined the component will be
      * uncontrolled and the value will be managed internally by the component.
@@ -33,14 +37,14 @@ declare type Props = {
      */
     disabled?: boolean;
     /**
-     * If true, the checkbox will change its appearence, showing that the value is required.
+     * If true, the component will display '(Optional)' next to the label.
      */
-    required?: boolean;
+    optional?: boolean;
     /**
      * This function will be called when the user clicks the checkbox.
      * The new value will be passed as a parameter.
      */
-    onChange?: (val: boolean) => void;
+    onChange?: (value: boolean) => void;
     /**
      * Size of the margin to be applied to the component
      * ('xxsmall' | 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge' | 'xxlarge').

package/chip/Chip.test.js

@@ -0,0 +1,56 @@
+"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"));
+
+var _invision = _interopRequireDefault(require("../../app/src/images/invision.svg"));
+
+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: _invision["default"],
+      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: _invision["default"],
+      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

@@ -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.