@dxc-technology/halstack-react 0.0.0-a9032ad → 0.0.0-a9c6846

package/dist/select/readme.md

@@ -1,72 +0,0 @@
-# DXC Select Component
-
-## Props
-
-<table>
-    <tr style="background-color: grey">
-        <td>Name</td>
-        <td>Default</td>
-        <td>Description</td>
-    </tr>
-    <tr>
-        <td>options: object[]</td>
-        <td><code>[]</code></td>
-        <td>An array of objects representing the selectable options. Each object has the following properties:
-        <ul>
-            <li><b>value</b>: Option inner value</li>
-            <li><b>label</b>: Option display value</li>
-            <li><b>iconSrc</b>: URL of the icon that will be placed next to the option label</li>
-        </ul>
-        </td>
-    </tr>
-    <tr>
-        <td>iconPosition: 'before' | 'after'</td>
-        <td><code>'before'</code></td>
-        <td>In case options include an icon, whether the icon should appear after or before the label.</td>
-    </tr>
-    <tr>
-        <td>value: string | string[]</td>
-        <td><code>[]</code></td>
-        <td>The key of the selected value/values. If the select component doesn't allow multiple selection, value must be a string. If the select component allows multiple selection, value must be an array of strings</td>
-    </tr>
-    <tr>
-        <td>multiple: boolean</td>
-        <td><code>false</code></td>
-        <td>If true, the select component will support multiple selection. In that case, value must be an array of strings with the keys of the selected values, otherwise value must be a string.</td>
-    </tr>
-    <tr>
-        <td>label: string</td>
-        <td></td>
-        <td>Text to be placed next to the select.</td>
-    </tr>
-    <tr>
-        <td>theme: 'light' | 'dark'</td>
-        <td><code>'light'</code></td>
-        <td>Uses one of the available component themes.</td>
-    </tr>
-    <tr>
-        <td>name: string</td>
-        <td></td>
-        <td>Name attribute of the input element.</td>
-    </tr>
-    <tr>
-        <td>disabled: boolean</td>
-        <td><code>false</code></td>
-        <td>If true, the component will be disabled.</td>
-    </tr>
-    <tr>
-        <td>required: boolean</td>
-        <td><code>false</code></td>
-        <td>If true, a red asterisk will appear before the label to indicate to the user that the field is required.</td>
-    </tr>
-    <tr>
-        <td>disableRipple: boolean</td>
-        <td><code>false</code></td>
-        <td>If true, the ripple effect will be disabled.</td>
-    </tr>
-    <tr>
-        <td>onChange: function</td>
-        <td></td>
-        <td>This function will be called every time the selection changes. The string with the key of the selected value will be passed as a parameter to this function. If multiple selection is allowed, an array of keys will be passed</td>
-    </tr>
-</table>

package/dist/sidenav/arrow_icon.svg

@@ -1,3 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" width="15.995" height="10.01" viewBox="0 0 15.995 10.01">
-  <path id="arrow-to-right" d="M17.71,11.29l-4-4a1,1,0,0,0-1.42,1.42L14.59,11H3a1,1,0,0,0,0,2H14.59l-2.3,2.29a1,1,0,1,0,1.42,1.42l4-4a1.034,1.034,0,0,0,0-1.42Z" transform="translate(-2 -6.996)"/>
-</svg>

package/dist/toggle-group/readme.md

@@ -1,82 +0,0 @@
-# DXC Toggle Group Component
-
-## Props
-
-<table>
-    <tr style="background-color: grey">
-        <td>Name</td>
-        <td>Default</td>
-        <td>Description</td>
-    </tr>
-    <tr>
-        <td>value: any | any[]</td>
-        <td></td>
-        <td>
-          The key(s) of the selected value(s). If the toggle group component
-          doesn't allow multiple selection, it must be one unique value. If the
-          component allows multiple selection, value must be an array. If
-          undefined, the component will be uncontrolled and the value will be
-          managed internally by the component.
-        </td>
-    </tr>
-    <tr>
-        <td>onChange: function</td>
-        <td></td>
-        <td>
-            This function will be called every time the selection changes. The
-            number with the key of the selected value will be passed as a
-            parameter to this function. If multiple selection is allowed, an array
-            of keys will be passed
-        </td>
-    </tr>
-    <tr>
-        <td>disabled: boolean</td>
-        <td>
-            <code>false</code>
-        </td>
-        <td>If true, the component will be disabled.</td>
-    </tr>
-    <tr>
-        <td>multiple: boolean</td>
-        <td>
-            <code>false</code>
-        </td>
-        <td>
-            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.
-        </td>
-    </tr>
-    <tr>
-        <td>options: object[]</td>
-        <td>
-            <code>[]</code>
-        </td>
-        <td>
-            An array of objects representing the selectable options. Each object
-            has the following properties:
-            <ul>
-            <li>
-                <b>value</b>: Number with the option inner value.
-            </li>
-            <li>
-                <b>label</b>: String with the option display value.
-            </li>
-            <li>
-                <b>iconSrc</b>: URL of the icon that will be placed. IconSrc and
-                label can't be used at same time.
-            </li>
-            </ul>
-        </td>
-    </tr>
-    <tr>
-        <td>margin: string | object</td>
-        <td></td>
-        <td>
-            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.
-        </td>
-    </tr>
-</table>

package/test/Toggle.test.js

@@ -1,43 +0,0 @@
-import React from "react";
-import { render, fireEvent } from "@testing-library/react";
-import DxcToggle from "../src/toggle/Toggle";
-
-describe("Toggle component tests", () => {
-  test("Toggle renders with correct text", () => {
-    const { getByText } = render(<DxcToggle label="Toggle" />);
-    expect(getByText("Toggle")).toBeTruthy();
-  });
-
-  test("Calls correct function on click", () => {
-    const onClick = jest.fn();
-    const { getByText} = render(<DxcToggle label="ToggleTest" onClick={onClick} />);
-    fireEvent.click(getByText("ToggleTest"));
-    expect(onClick).toHaveBeenCalled();
-  });
-
-  test("Calls correct function on click with the correct value.", () => {
-    const onClick = jest.fn();
-    const { getByText, rerender } = render(<DxcToggle label="ToggleTest" onClick={onClick} />);
-
-    fireEvent.click(getByText("ToggleTest"));
-    rerender(<DxcToggle label="ToggleTest" onClick={onClick} selected={true} />);
-    fireEvent.click(getByText("ToggleTest"));
-    expect(onClick.mock.calls[0][0]).toBe(true);
-    expect(onClick.mock.calls[1][0]).toBe(false);
-  });
-
-
-  test("Calls correct function on click with the correct value, if it´s controlled and the user doesn´t change the value the function always receives the same", () => {
-    const onClick = jest.fn();
-    const { getByText } = render(<DxcToggle label="ToggleTest" selected={true} onClick={onClick} />);
-
-    fireEvent.click(getByText("ToggleTest"));
-    fireEvent.click(getByText("ToggleTest"));
-    fireEvent.click(getByText("ToggleTest"));
-    expect(onClick).toHaveBeenCalledTimes(3);
-    expect(onClick.mock.calls[0][0]).toBe(false);
-    expect(onClick.mock.calls[1][0]).toBe(false);
-    expect(onClick.mock.calls[2][0]).toBe(false);
-  });
-
-});