@dxc-technology/halstack-react 0.0.0-fc652e4 → 0.0.0-fd5a25e

package/dist/box/Box.js

@@ -1,156 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _variables = require("../common/variables.js");
-
-var _utils = require("../common/utils.js");
-
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
-
-var _BackgroundColorContext = require("../BackgroundColorContext.js");
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: ", ";\n  border-radius: ", ";\n  border-width: ", ";\n  border-style: ", ";\n  border-color: ", ";\n  letter-spacing: ", ";\n  overflow: hidden;\n  width: ", ";\n  background-color: ", ";\n  box-shadow: ", ";\n\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n\n  padding: ", ";\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-var DxcBox = function DxcBox(_ref) {
-  var shadowDepth = _ref.shadowDepth,
-      margin = _ref.margin,
-      padding = _ref.padding,
-      _ref$display = _ref.display,
-      display = _ref$display === void 0 ? "inline-flex" : _ref$display,
-      children = _ref.children,
-      _ref$size = _ref.size,
-      size = _ref$size === void 0 ? "fitContent" : _ref$size;
-  var colorsTheme = (0, _useTheme["default"])();
-  return _react["default"].createElement(_styledComponents.ThemeProvider, {
-    theme: colorsTheme.box
-  }, _react["default"].createElement(StyledDxcBox, {
-    shadowDepth: shadowDepth,
-    display: display,
-    margin: margin,
-    padding: padding,
-    size: size
-  }, _react["default"].createElement(_BackgroundColorContext.BackgroundColorProvider, {
-    color: colorsTheme.box.backgroundColor
-  }, children)));
-};
-
-var sizes = {
-  small: "48px",
-  medium: "240px",
-  large: "480px",
-  fillParent: "100%",
-  fitContent: "unset"
-};
-
-var calculateWidth = function calculateWidth(margin, size, padding) {
-  if (size === "fillParent") {
-    return "calc(".concat(sizes[size], " - ").concat((0, _utils.getMargin)(margin, "left"), " - ").concat((0, _utils.getMargin)(margin, "right"), " -\n    ").concat((0, _utils.getMargin)(padding, "left"), " - ").concat((0, _utils.getMargin)(padding, "right"), ")");
-  }
-
-  return sizes[size];
-};
-
-var StyledDxcBox = _styledComponents["default"].div(_templateObject(), function (_ref2) {
-  var display = _ref2.display;
-  return display;
-}, function (props) {
-  return props.theme.borderRadius;
-}, function (props) {
-  return props.theme.borderThickness;
-}, function (props) {
-  return props.theme.borderStyle;
-}, function (props) {
-  return props.theme.borderColor;
-}, function (props) {
-  return props.theme.letterSpacing;
-}, function (props) {
-  return calculateWidth(props.margin, props.size, props.padding);
-}, function (props) {
-  return props.theme.backgroundColor;
-}, function (props) {
-  return props.shadowDepth === 1 ? "".concat(props.theme.oneShadowDepthShadowOffsetX, " ").concat(props.theme.oneShadowDepthShadowOffsetY, " ").concat(props.theme.oneShadowDepthShadowBlur, "  ").concat(props.theme.oneShadowDepthShadowSpread, " ").concat(props.theme.oneShadowDepthShadowColor) : props.shadowDepth === 2 ? "".concat(props.theme.twoShadowDepthShadowOffsetX, " ").concat(props.theme.twoShadowDepthShadowOffsetY, " ").concat(props.theme.twoShadowDepthShadowBlur, "  ").concat(props.theme.twoShadowDepthShadowSpread, " ").concat(props.theme.twoShadowDepthShadowColor) : "".concat(props.theme.noneShadowDepthShadowOffsetX, " ").concat(props.theme.noneShadowDepthShadowOffsetY, " ").concat(props.theme.noneShadowDepthShadowBlur, "  ").concat(props.theme.noneShadowDepthShadowSpread, " ").concat(props.theme.noneShadowDepthShadowColor);
-}, function (_ref3) {
-  var margin = _ref3.margin;
-  return margin && (0, _typeof2["default"])(margin) !== "object" ? _variables.spaces[margin] : "0px";
-}, function (_ref4) {
-  var margin = _ref4.margin;
-  return margin && margin.top ? _variables.spaces[margin.top] : "";
-}, function (_ref5) {
-  var margin = _ref5.margin;
-  return margin && margin.right ? _variables.spaces[margin.right] : "";
-}, function (_ref6) {
-  var margin = _ref6.margin;
-  return margin && margin.bottom ? _variables.spaces[margin.bottom] : "";
-}, function (_ref7) {
-  var margin = _ref7.margin;
-  return margin && margin.left ? _variables.spaces[margin.left] : "";
-}, function (_ref8) {
-  var padding = _ref8.padding;
-  return padding && (0, _typeof2["default"])(padding) !== "object" ? _variables.spaces[padding] : "0px";
-}, function (_ref9) {
-  var padding = _ref9.padding;
-  return padding && padding.top ? _variables.spaces[padding.top] : "";
-}, function (_ref10) {
-  var padding = _ref10.padding;
-  return padding && padding.right ? _variables.spaces[padding.right] : "";
-}, function (_ref11) {
-  var padding = _ref11.padding;
-  return padding && padding.bottom ? _variables.spaces[padding.bottom] : "";
-}, function (_ref12) {
-  var padding = _ref12.padding;
-  return padding && padding.left ? _variables.spaces[padding.left] : "";
-});
-
-DxcBox.propTypes = {
-  size: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(sizes))),
-  display: _propTypes["default"].string,
-  shadowDepth: _propTypes["default"].oneOf([0, 1, 2]),
-  margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
-    top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
-  }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
-  padding: _propTypes["default"].oneOfType([_propTypes["default"].shape({
-    top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
-  }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))])
-};
-DxcBox.defaultProps = {
-  shadowDepth: 2,
-  display: "inline-flex",
-  margin: null,
-  padding: null
-};
-var _default = DxcBox;
-exports["default"] = _default;

package/dist/card/Card.js

@@ -1,254 +0,0 @@
-"use strict";
-
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports["default"] = void 0;
-
-var _toConsumableArray2 = _interopRequireDefault(require("@babel/runtime/helpers/toConsumableArray"));
-
-var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _styledComponents = _interopRequireWildcard(require("styled-components"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _variables = require("../common/variables.js");
-
-var _useTheme = _interopRequireDefault(require("../useTheme.js"));
-
-var _Box = _interopRequireDefault(require("../box/Box"));
-
-function _templateObject6() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  flex-grow: 1;\n  padding: ", ";\n  padding-top: ", ";\n  padding-right: ", ";\n  padding-bottom: ", ";\n  padding-left: ", ";\n  overflow: hidden;\n"]);
-
-  _templateObject6 = function _templateObject6() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject5() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  width: 35%;\n  height: 100%;\n  flex-shrink: 0;\n  background: ", ";\n  justify-content: center;\n  align-items: center;\n  display: inline-flex;\n"]);
-
-  _templateObject5 = function _templateObject5() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject4() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  height: ", ";\n  width: ", ";\n  object-fit: ", ";\n"]);
-
-  _templateObject4 = function _templateObject4() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject3() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  cursor: pointer;\n  text-decoration: none;\n"]);
-
-  _templateObject3 = function _templateObject3() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject2() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  flex-direction: ", ";\n  height: ", ";\n  width: ", ";\n  &:hover {\n    border-color: ", ";\n  }\n"]);
-
-  _templateObject2 = function _templateObject2() {
-    return data;
-  };
-
-  return data;
-}
-
-function _templateObject() {
-  var data = (0, _taggedTemplateLiteral2["default"])(["\n  display: inline-flex;\n  cursor: ", ";\n  outline: ", ";\n  margin: ", ";\n  margin-top: ", ";\n  margin-right: ", ";\n  margin-bottom: ", ";\n  margin-left: ", ";\n"]);
-
-  _templateObject = function _templateObject() {
-    return data;
-  };
-
-  return data;
-}
-
-var DxcCard = function DxcCard(_ref) {
-  var imageSrc = _ref.imageSrc,
-      children = _ref.children,
-      margin = _ref.margin,
-      contentPadding = _ref.contentPadding,
-      linkHref = _ref.linkHref,
-      onClick = _ref.onClick,
-      imageBgColor = _ref.imageBgColor,
-      imagePadding = _ref.imagePadding,
-      imagePosition = _ref.imagePosition,
-      outlined = _ref.outlined,
-      imageCover = _ref.imageCover,
-      _ref$tabIndex = _ref.tabIndex,
-      tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
-  var colorsTheme = (0, _useTheme["default"])();
-
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      isHovered = _useState2[0],
-      changeIsHovered = _useState2[1];
-
-  var tagContent = _react["default"].createElement(_Box["default"], {
-    shadowDepth: outlined ? 0 : isHovered && (onClick || linkHref) ? 2 : 1
-  }, _react["default"].createElement(_styledComponents.ThemeProvider, {
-    theme: colorsTheme.card
-  }, _react["default"].createElement(CardContainer, {
-    hasAction: onClick || linkHref,
-    outlined: outlined,
-    imagePosition: imagePosition
-  }, imageSrc && _react["default"].createElement(ImageContainer, {
-    imageBgColor: imageBgColor
-  }, _react["default"].createElement(TagImage, {
-    imagePadding: imagePadding,
-    cover: imageCover,
-    src: imageSrc
-  })), _react["default"].createElement(CardContent, {
-    contentPadding: contentPadding
-  }, children))));
-
-  return _react["default"].createElement(StyledDxcCard, {
-    margin: margin,
-    onMouseEnter: function onMouseEnter() {
-      return changeIsHovered(true);
-    },
-    onMouseLeave: function onMouseLeave() {
-      return changeIsHovered(false);
-    },
-    onClick: onClick,
-    hasAction: onClick,
-    tabIndex: typeof onClick === "function" && !linkHref ? tabIndex : -1
-  }, linkHref && _react["default"].createElement(StyledLink, {
-    tabIndex: tabIndex,
-    href: linkHref
-  }, tagContent) || tagContent);
-};
-
-var StyledDxcCard = _styledComponents["default"].div(_templateObject(), function (_ref2) {
-  var hasAction = _ref2.hasAction;
-  return hasAction && "pointer" || "unset";
-}, function (_ref3) {
-  var hasAction = _ref3.hasAction;
-  return !hasAction && "none";
-}, function (_ref4) {
-  var margin = _ref4.margin;
-  return margin && (0, _typeof2["default"])(margin) !== "object" ? _variables.spaces[margin] : "0px";
-}, function (_ref5) {
-  var margin = _ref5.margin;
-  return margin && margin.top ? _variables.spaces[margin.top] : "";
-}, function (_ref6) {
-  var margin = _ref6.margin;
-  return margin && margin.right ? _variables.spaces[margin.right] : "";
-}, function (_ref7) {
-  var margin = _ref7.margin;
-  return margin && margin.bottom ? _variables.spaces[margin.bottom] : "";
-}, function (_ref8) {
-  var margin = _ref8.margin;
-  return margin && margin.left ? _variables.spaces[margin.left] : "";
-});
-
-var CardContainer = _styledComponents["default"].div(_templateObject2(), function (_ref9) {
-  var imagePosition = _ref9.imagePosition;
-  return imagePosition === "before" && "row" || "row-reverse";
-}, function (props) {
-  return props.theme.height;
-}, function (props) {
-  return props.theme.width;
-}, function (_ref10) {
-  var hasAction = _ref10.hasAction;
-  return hasAction ? "" : "unset";
-});
-
-var StyledLink = _styledComponents["default"].a(_templateObject3());
-
-var TagImage = _styledComponents["default"].img(_templateObject4(), function (_ref11) {
-  var imagePadding = _ref11.imagePadding;
-  return !imagePadding ? "100%" : "calc(100% - ".concat(_variables.spaces[imagePadding], " - ").concat(_variables.spaces[imagePadding], ")");
-}, function (_ref12) {
-  var imagePadding = _ref12.imagePadding;
-  return !imagePadding ? "100%" : "calc(100% - ".concat(_variables.spaces[imagePadding], " - ").concat(_variables.spaces[imagePadding], ")");
-}, function (_ref13) {
-  var cover = _ref13.cover;
-  return cover ? "cover" : "contain";
-});
-
-var ImageContainer = _styledComponents["default"].div(_templateObject5(), function (_ref14) {
-  var imageBgColor = _ref14.imageBgColor;
-  return imageBgColor;
-});
-
-var CardContent = _styledComponents["default"].div(_templateObject6(), function (_ref15) {
-  var contentPadding = _ref15.contentPadding;
-  return contentPadding && (0, _typeof2["default"])(contentPadding) !== "object" ? _variables.spaces[contentPadding] : "0px";
-}, function (_ref16) {
-  var contentPadding = _ref16.contentPadding;
-  return contentPadding && (0, _typeof2["default"])(contentPadding) === "object" && contentPadding.top ? _variables.spaces[contentPadding.top] : "";
-}, function (_ref17) {
-  var contentPadding = _ref17.contentPadding;
-  return contentPadding && (0, _typeof2["default"])(contentPadding) === "object" && contentPadding.right ? _variables.spaces[contentPadding.right] : "";
-}, function (_ref18) {
-  var contentPadding = _ref18.contentPadding;
-  return contentPadding && (0, _typeof2["default"])(contentPadding) === "object" && contentPadding.bottom ? _variables.spaces[contentPadding.bottom] : "";
-}, function (_ref19) {
-  var contentPadding = _ref19.contentPadding;
-  return contentPadding && (0, _typeof2["default"])(contentPadding) === "object" && contentPadding.left ? _variables.spaces[contentPadding.left] : "";
-});
-
-DxcCard.propTypes = {
-  imageSrc: _propTypes["default"].string,
-  imageBgColor: _propTypes["default"].string,
-  imagePadding: _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces))),
-  imagePosition: _propTypes["default"].oneOf(["before", "after"]),
-  linkHref: _propTypes["default"].string,
-  onClick: _propTypes["default"].func,
-  outlined: _propTypes["default"].bool,
-  imageCover: _propTypes["default"].bool,
-  margin: _propTypes["default"].oneOfType([_propTypes["default"].shape({
-    top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
-  }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
-  contentPadding: _propTypes["default"].oneOfType([_propTypes["default"].shape({
-    top: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    bottom: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    left: _propTypes["default"].oneOf(Object.keys(_variables.spaces)),
-    right: _propTypes["default"].oneOf(Object.keys(_variables.spaces))
-  }), _propTypes["default"].oneOf((0, _toConsumableArray2["default"])(Object.keys(_variables.spaces)))]),
-  tabIndex: _propTypes["default"].number
-};
-DxcCard.defaultProps = {
-  imageSrc: null,
-  margin: null,
-  contentPadding: null,
-  outlined: false,
-  imagePadding: null,
-  imageCover: false,
-  linkHref: null,
-  onClick: null,
-  imageBgColor: "black",
-  imagePosition: "before"
-};
-var _default = DxcCard;
-exports["default"] = _default;

package/dist/checkbox/Checkbox.stories.js

@@ -1,144 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
-
-var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
-
-var _react = _interopRequireDefault(require("react"));
-
-var _react2 = require("@storybook/react");
-
-var _addonActions = require("@storybook/addon-actions");
-
-var _addonKnobs = require("@storybook/addon-knobs");
-
-var _readme = _interopRequireDefault(require("./readme.md"));
-
-var _Checkbox = _interopRequireDefault(require("./Checkbox"));
-
-var onChange = (0, _addonActions.action)("onChange");
-
-onChange.toString = function () {
-  return "onChangeHandler";
-};
-
-(0, _react2.storiesOf)("Form Components|Checkbox", module).add("Component", function () {
-  return _react["default"].createElement("div", null, _react["default"].createElement("h3", null, "Light"), _react["default"].createElement("div", null, _react["default"].createElement(_Checkbox["default"], {
-    checked: false,
-    theme: "light",
-    value: "TestValue",
-    label: "Checkbox",
-    labelPosition: "after",
-    onChange: onChange
-  }), _react["default"].createElement(_Checkbox["default"], {
-    checked: false,
-    theme: "light",
-    value: "TestValue",
-    label: "Label before",
-    labelPosition: "before",
-    onChange: onChange
-  }), _react["default"].createElement(_Checkbox["default"], {
-    checked: false,
-    theme: "light",
-    value: "TestValue",
-    label: "Label after",
-    labelPosition: "after",
-    onChange: onChange,
-    required: true
-  }), _react["default"].createElement(_Checkbox["default"], {
-    checked: false,
-    disabled: true,
-    theme: "light",
-    value: "TestValue",
-    label: "Disabled unchecked",
-    labelPosition: "after",
-    onChange: onChange
-  }), _react["default"].createElement(_Checkbox["default"], {
-    checked: true,
-    disabled: true,
-    theme: "light",
-    value: "TestValue",
-    label: "Disabled checked",
-    labelPosition: "after",
-    onChange: onChange
-  })), _react["default"].createElement("h3", null, "Dark"), _react["default"].createElement("div", {
-    style: {
-      background: "black"
-    }
-  }, _react["default"].createElement("div", null, _react["default"].createElement(_Checkbox["default"], {
-    checked: false,
-    theme: "dark",
-    value: "TestValue",
-    label: "Checkbox",
-    labelPosition: "after",
-    onChange: onChange,
-    required: true
-  }), _react["default"].createElement(_Checkbox["default"], {
-    checked: false,
-    theme: "dark",
-    value: "TestValue",
-    label: "Label before",
-    labelPosition: "before",
-    onChange: onChange
-  }), _react["default"].createElement(_Checkbox["default"], {
-    checked: false,
-    theme: "dark",
-    value: "TestValue",
-    label: "Label after",
-    labelPosition: "after",
-    onChange: onChange
-  }), _react["default"].createElement(_Checkbox["default"], {
-    checked: false,
-    disabled: true,
-    theme: "dark",
-    value: "TestValue",
-    label: "Disabled unchecked",
-    labelPosition: "after",
-    onChange: onChange
-  }), _react["default"].createElement(_Checkbox["default"], {
-    checked: true,
-    disabled: true,
-    theme: "dark",
-    value: "TestValue",
-    label: "Disabled checked",
-    labelPosition: "after",
-    onChange: onChange
-  }))));
-}, {
-  notes: {
-    markdown: _readme["default"]
-  }
-});
-
-var knobProps = function knobProps() {
-  return {
-    label: (0, _addonKnobs.text)("Label", "Test Checkbox"),
-    disabled: (0, _addonKnobs["boolean"])("Disabled", false),
-    labelPosition: (0, _addonKnobs.select)("Label position", {
-      before: "before",
-      after: "after"
-    }, "before"),
-    theme: (0, _addonKnobs.select)("Theme", {
-      light: "light",
-      dark: "dark"
-    }, "light"),
-    disableRipple: (0, _addonKnobs["boolean"])("disableRipple", false),
-    required: (0, _addonKnobs["boolean"])("Required", false)
-  };
-};
-
-(0, _react2.storiesOf)("Form Components|Checkbox", module).add("Knobs example", function () {
-  var props = knobProps();
-  return _react["default"].createElement("div", {
-    style: {
-      background: props.theme === "dark" && "black" || "transparent"
-    }
-  }, _react["default"].createElement(_Checkbox["default"], (0, _extends2["default"])({}, props, {
-    value: "TestValue",
-    onChange: onChange
-  })));
-}, {
-  notes: {
-    markdown: _readme["default"]
-  }
-});

package/dist/checkbox/readme.md

@@ -1,116 +0,0 @@
-# DXC Checkbox Component
-
-## Usage
-
-```js
-import { DxcCheckbox } from "@dxc-technology/halstack-react";
-
-<DxcCheckbox onChange={handleNewValue} label="Test Checkbox" checked={checked} />;
-```
-
-## Props
-
-<table>
-    <tr style="background-color: grey">
-        <td>Name</td>
-        <td>Default</td>
-        <td>Description</td>
-    </tr>
-    <tr>
-        <td>checked: boolean</td>
-        <td><code>false</code></td>
-        <td>If true, the component is checked.</td>
-    </tr>
-    <tr>
-        <td>value: any</td>
-        <td></td>
-        <td>Will be passed to the value attribute of the html input element. When inside a form, this value will be only submitted if the checkbox is checked </td>
-    </tr>
-    <tr>
-        <td>label: string</td>
-        <td></td>
-        <td>Text to be placed next to the checkbox.</td>
-    </tr>
-    <tr>
-        <td>labelPosition: 'before' | 'after'</td>
-        <td><code>'before'</code></td>
-        <td>Whether the label should appear after or before the checkbox.</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 when the user clicks the checkbox. The new value will be passed as a parameter.<br>
-        </td>
-    </tr>
-</table>
-
-## Examples
-
-- Basic checkbox - Light theme - Enabled - Label after checkbox - With ripple
-
-```js
-import React from "react";
-import { DxcCheckbox } from "@dxc-technology/halstack-react";
-
-class App extends React.Component {
-  state = {
-    isChecked: true
-  };
-  constructor() {
-    super();
-    this.handleChange = this.handleChange.bind(this);
-  }
-
-  handleChange(checked) {
-    this.setState({
-      isChecked: checked
-    });
-  }
-
-  render() {
-    return (
-      <div>
-        <DxcCheckbox
-            checked={this.state.isChecked}
-            value="Checkbox1"
-            label="Checkbox 1"
-            labelPosition="after"
-            theme="light"
-            name="Checkbox"
-            disabled={false}
-            disableRipple={false}
-            onChange={event => this.handleChange(event)}
-          />
-      </div>
-    );
-  }
-}
-export default App;
-
-
-```