@dxc-technology/halstack-react 0.0.0-63ee6f9 → 0.0.0-64ec938

package/date-input/types.d.ts

@@ -54,28 +54,31 @@ declare type Props = {
      * element of the component. An object including the string value, the
      * error and the date value will be passed to this function.
      * If the string value is a valid date, error will
-     * be null. Also, if the string value is not a valid date, date will be null.
+     * be undefined. Also, if the string value is not a valid date, date will be undefined.
      */
     onChange?: (val: {
         value: string;
-        error: string | null;
-        date: Date | null;
+        error?: string;
+        date?: Date;
     }) => void;
     /**
      * This function will be called when the input element loses the focus.
      * An object including the string value, the error and the date value
      * will be passed to this function. If the string value is a valid date, error will
-     * be null. Also, if the string value is not a valid date, date will be null.
+     * be undefined. Also, if the string value is not a valid date, date will be undefined.
      */
     onBlur?: (val: {
         value: string;
-        error: string | null;
-        date: Date | null;
+        error?: string;
+        date?: Date;
     }) => void;
     /**
-     * If it is defined, the component will change its appearance, showing
-     * the error below the date input component. If it is not defined, the error
-     * messages will be managed internally, but never displayed on its own.
+     * If it is a defined value and also a truthy string, the component will
+     * change its appearance, showing the error below the date input
+     * component. If the defined value is an empty string, it will reserve a
+     * space below the component for a future error, but it would not change
+     * its look. In case of being undefined or null, both the appearance and
+     * the space for the error message would not be modified.
      */
     error?: string;
     /**

package/dialog/Dialog.js

@@ -13,9 +13,7 @@ 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 _react = _interopRequireDefault(require("react"));
 
 var _styledComponents = _interopRequireWildcard(require("styled-components"));
 
@@ -45,12 +43,6 @@ var DxcDialog = function DxcDialog(_ref) {
       padding = _ref$padding === void 0 ? "small" : _ref$padding,
       _ref$tabIndex = _ref.tabIndex,
       tabIndex = _ref$tabIndex === void 0 ? 0 : _ref$tabIndex;
-
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
-      isResponsive = _useState2[0],
-      setIsResponsive = _useState2[1];
-
   var colorsTheme = (0, _useTheme["default"])();
 
   var handleClose = function handleClose() {
@@ -61,21 +53,6 @@ var DxcDialog = function DxcDialog(_ref) {
     onBackgroundClick === null || onBackgroundClick === void 0 ? void 0 : onBackgroundClick();
   };
 
-  var handleResize = function handleResize(width) {
-    setIsResponsive(width && width <= _variables.responsiveSizes.tablet);
-  };
-
-  var handleEventListener = function handleEventListener() {
-    handleResize(window.innerWidth);
-  };
-
-  (0, _react.useEffect)(function () {
-    window.addEventListener("resize", handleEventListener);
-    handleResize(window.innerWidth);
-    return function () {
-      window.removeEventListener("resize", handleEventListener);
-    };
-  }, []);
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.dialog
   }, /*#__PURE__*/_react["default"].createElement(DialogContainer, {
@@ -83,8 +60,7 @@ var DxcDialog = function DxcDialog(_ref) {
     isCloseVisible: isCloseVisible,
     onClose: handleOverlayClick,
     overlay: overlay,
-    padding: padding,
-    isResponsive: isResponsive
+    padding: padding
   }, isCloseVisible && /*#__PURE__*/_react["default"].createElement(CloseIconContainer, {
     onClick: handleClose,
     tabIndex: tabIndex
@@ -104,7 +80,7 @@ var DxcDialog = function DxcDialog(_ref) {
   }, children))));
 };
 
-var DialogContainer = (0, _styledComponents["default"])(_Dialog["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  overflow: unset;\n  font-family: ", ";\n\n  .MuiBackdrop-root {\n    background-color: ", ";\n    opacity: ", " !important;\n  }\n  .MuiDialog-paperWidthSm {\n    background-color: ", ";\n    max-width: ", ";\n    min-width: ", ";\n    box-sizing: border-box;\n    min-height: ", ";\n    box-shadow: ", ";\n\n    padding: ", ";\n    padding-top: ", ";\n    padding-right: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n  }\n"])), function (props) {
+var DialogContainer = (0, _styledComponents["default"])(_Dialog["default"])(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  overflow: unset;\n  font-family: ", ";\n\n  .MuiBackdrop-root {\n    background-color: ", ";\n    opacity: ", " !important;\n  }\n  .MuiDialog-paperWidthSm {\n    background-color: ", ";\n    @media (min-width: ", "rem) {\n      max-width: 80%;\n      min-width: 800px;\n    }\n\n    @media (max-width: ", "rem) {\n      //mobile phones\n      max-width: 92%;\n      min-width: 92%;\n    }\n\n    box-sizing: border-box;\n    min-height: ", ";\n    box-shadow: ", ";\n\n    padding: ", ";\n    padding-top: ", ";\n    padding-right: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n  }\n"])), function (props) {
   return props.theme.fontFamily;
 }, function (props) {
   return props.overlay === true ? props.theme.overlayColor : "transparent";
@@ -112,11 +88,7 @@ var DialogContainer = (0, _styledComponents["default"])(_Dialog["default"])(_tem
   return props.overlay === true && props.theme.overlayOpacity;
 }, function (props) {
   return props.theme.backgroundColor;
-}, function (props) {
-  return props.isResponsive ? "92%" : "80%";
-}, function (props) {
-  return props.isResponsive ? "92%" : "800px";
-}, function (props) {
+}, _variables.responsiveSizes.medium, _variables.responsiveSizes.medium, function (props) {
   return props.isCloseVisible ? "72px" : "";
 }, function (props) {
   return "".concat(props.theme.boxShadowOffsetX, " ").concat(props.theme.boxShadowOffsetY, " ").concat(props.theme.boxShadowBlur, " ").concat(props.theme.boxShadowColor);

package/dropdown/Dropdown.js

@@ -138,6 +138,11 @@ var DxcDropdown = function DxcDropdown(_ref) {
     }));
   };
 
+  var labelComponent = /*#__PURE__*/_react["default"].createElement(DropdownTriggerLabel, {
+    iconPosition: iconPosition,
+    label: label
+  }, label);
+
   return /*#__PURE__*/_react["default"].createElement(_styledComponents.ThemeProvider, {
     theme: colorsTheme.dropdown
   }, /*#__PURE__*/_react["default"].createElement(DXCDropdownContainer, {
@@ -160,18 +165,14 @@ var DxcDropdown = function DxcDropdown(_ref) {
     ref: ref,
     tabIndex: tabIndex
   }, /*#__PURE__*/_react["default"].createElement(DropdownTriggerContainer, {
-    iconPosition: iconPosition,
     caretHidden: caretHidden
-  }, icon && /*#__PURE__*/_react["default"].createElement(ButtonIconContainer, {
+  }, iconPosition === "after" && labelComponent, icon && /*#__PURE__*/_react["default"].createElement(ButtonIconContainer, {
     label: label,
     iconPosition: iconPosition,
     disabled: disabled
   }, typeof icon === "string" ? /*#__PURE__*/_react["default"].createElement(ButtonIcon, {
     src: icon
-  }) : icon), /*#__PURE__*/_react["default"].createElement(DropdownTriggerLabel, {
-    iconPosition: iconPosition,
-    label: label
-  }, label)), /*#__PURE__*/_react["default"].createElement(CaretIconContainer, {
+  }) : icon), iconPosition === "before" && labelComponent), /*#__PURE__*/_react["default"].createElement(CaretIconContainer, {
     caretHidden: caretHidden,
     disabled: disabled
   }, !caretHidden && (anchorEl === null ? /*#__PURE__*/_react["default"].createElement(DownArrowIcon, null) : /*#__PURE__*/_react["default"].createElement(UpArrowIcon, null)))), /*#__PURE__*/_react["default"].createElement(DXCMenu, {
@@ -187,7 +188,6 @@ var DxcDropdown = function DxcDropdown(_ref) {
       vertical: "top",
       horizontal: "left"
     },
-    optionsIconPosition: optionsIconPosition,
     size: size,
     width: width,
     role: undefined,
@@ -209,12 +209,14 @@ var DxcDropdown = function DxcDropdown(_ref) {
         onClick: function onClick(event) {
           return handleMenuItemClick(option);
         }
-      }, option.icon && /*#__PURE__*/_react["default"].createElement(ListIconContainer, {
+      }, optionsIconPosition === "after" && /*#__PURE__*/_react["default"].createElement("span", {
+        className: "optionLabel"
+      }, option.label), option.icon && /*#__PURE__*/_react["default"].createElement(ListIconContainer, {
         label: option.label,
         iconPosition: optionsIconPosition
       }, typeof option.icon === "string" ? /*#__PURE__*/_react["default"].createElement(ListIcon, {
         src: option.icon
-      }) : option.icon), /*#__PURE__*/_react["default"].createElement("span", {
+      }) : option.icon), optionsIconPosition === "before" && /*#__PURE__*/_react["default"].createElement("span", {
         className: "optionLabel"
       }, option.label));
     })))));
@@ -251,7 +253,7 @@ var DXCDropdownContainer = _styledComponents["default"].div(_templateObject || (
   return props.margin && (0, _typeof2["default"])(props.margin) === "object" && props.margin.left ? _variables.spaces[props.margin.left] : "";
 });
 
-var DXCMenu = (0, _styledComponents["default"])(_Popper["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  z-index: 1;\n\n  .MuiMenuItem-gutters {\n    width: ", ";\n  }\n  .MuiMenuItem-root {\n    min-height: 36px;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n    height: auto;\n  }\n  .MuiPaper-root {\n    min-width: ", ";\n    border-width: ", ";\n    border-style: ", ";\n    border-color: ", ";\n    border-bottom-left-radius: ", ";\n    border-bottom-right-radius: ", ";\n    border-top-left-radius: 0px;\n    border-top-right-radius: 0px;\n    max-height: 230px;\n    overflow-y: auto;\n\n    ::-webkit-scrollbar {\n      width: 3px;\n    }\n    ::-webkit-scrollbar-track {\n      background-color: ", ";\n      border-radius: 3px;\n    }\n    ::-webkit-scrollbar-thumb {\n      background-color: ", ";\n      border-radius: 3px;\n    }\n\n    .MuiList-padding {\n      padding-top: 0px;\n      padding-bottom: 0px;\n    }\n    .MuiListItem-button {\n      display: flex;\n      flex-direction: ", ";\n      justify-content: ", ";\n      background-color: ", ";\n      font-family: ", ";\n      font-size: ", ";\n      font-style: ", ";\n      font-weight: ", ";\n      color: ", ";\n      cursor: pointer;\n    }\n    .MuiListItem-button:focus {\n      outline: ", " solid 2px;\n      outline-offset: -2px;\n    }\n    .MuiListItem-button:hover {\n      background-color: ", ";\n    }\n    .MuiListItem-button:active {\n      background-color: ", ";\n      outline: ", " solid 2px;\n      outline-offset: -2px;\n    }\n  }\n"])), function (props) {
+var DXCMenu = (0, _styledComponents["default"])(_Popper["default"])(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2["default"])(["\n  z-index: 1;\n\n  .MuiMenuItem-gutters {\n    width: ", ";\n  }\n  .MuiMenuItem-root {\n    min-height: 36px;\n    padding-top: ", ";\n    padding-bottom: ", ";\n    padding-left: ", ";\n    padding-right: ", ";\n    height: auto;\n  }\n  .MuiPaper-root {\n    min-width: ", ";\n    border-width: ", ";\n    border-style: ", ";\n    border-color: ", ";\n    border-bottom-left-radius: ", ";\n    border-bottom-right-radius: ", ";\n    border-top-left-radius: 0px;\n    border-top-right-radius: 0px;\n    max-height: 230px;\n    overflow-y: auto;\n\n    ::-webkit-scrollbar {\n      width: 3px;\n    }\n    ::-webkit-scrollbar-track {\n      background-color: ", ";\n      border-radius: 3px;\n    }\n    ::-webkit-scrollbar-thumb {\n      background-color: ", ";\n      border-radius: 3px;\n    }\n\n    .MuiList-padding {\n      padding-top: 0px;\n      padding-bottom: 0px;\n    }\n    .MuiListItem-button {\n      display: flex;\n      background-color: ", ";\n      font-family: ", ";\n      font-size: ", ";\n      font-style: ", ";\n      font-weight: ", ";\n      color: ", ";\n      cursor: pointer;\n    }\n    .MuiListItem-button:focus {\n      outline: ", " solid 2px;\n      outline-offset: -2px;\n    }\n    .MuiListItem-button:hover {\n      background-color: ", ";\n    }\n    .MuiListItem-button:active {\n      background-color: ", ";\n      outline: ", " solid 2px;\n      outline-offset: -2px;\n    }\n  }\n"])), function (props) {
   return calculateWidth(props.margin, props.size);
 }, function (props) {
   return props.theme.optionPaddingTop;
@@ -277,10 +279,6 @@ var DXCMenu = (0, _styledComponents["default"])(_Popper["default"])(_templateObj
   return props.theme.scrollBarTrackColor;
 }, function (props) {
   return props.theme.scrollBarThumbColor;
-}, function (props) {
-  return props.optionsIconPosition === "after" && "row-reverse" || "row";
-}, function (props) {
-  return props.optionsIconPosition === "after" && "flex-end" || "";
 }, function (props) {
   return props.theme.optionBackgroundColor;
 }, function (props) {
@@ -345,9 +343,7 @@ var DropdownTrigger = _styledComponents["default"].button(_templateObject3 || (_
 
 var DropdownTriggerLabel = _styledComponents["default"].span(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  text-align: left;\n  text-overflow: ellipsis;\n  overflow: hidden;\n"])));
 
-var DropdownTriggerContainer = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  flex-direction: ", ";\n  margin-left: 0px;\n  margin-right: 0px;\n  width: ", ";\n  white-space: nowrap;\n"])), function (props) {
-  return props.iconPosition === "after" && "row-reverse" || "row";
-}, function (props) {
+var DropdownTriggerContainer = _styledComponents["default"].span(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  margin-left: 0px;\n  margin-right: 0px;\n  width: ", ";\n  white-space: nowrap;\n"])), function (props) {
   return props.caretHidden ? "100%" : "calc(100% - 36px)";
 });
 

package/dropdown/Dropdown.stories.tsx

@@ -17,7 +17,7 @@ const iconSVG = (
 );
 
 const iconSVGLarge = (
-  <svg enable-background="new 0 0 24 24" height="48px" viewBox="0 0 24 24" width="48px" fill="currentColor">
+  <svg enableBackground="new 0 0 24 24" height="48px" viewBox="0 0 24 24" width="48px" fill="currentColor">
     <g>
       <path d="M0,0h24v24H0V0z" fill="none" />
       <path d="M0,0h24v24H0V0z" fill="none" />

package/file-input/FileInput.js

@@ -33,6 +33,8 @@ var _variables = require("../common/variables.js");
 
 var _useTheme = _interopRequireDefault(require("../useTheme"));
 
+var _useTranslatedLabels = _interopRequireDefault(require("../useTranslatedLabels"));
+
 var _Button = _interopRequireDefault(require("../button/Button"));
 
 var _FileItem = _interopRequireDefault(require("./FileItem"));
@@ -127,6 +129,7 @@ var DxcFileInput = function DxcFileInput(_ref) {
       fileInputId = _useState6[0];
 
   var colorsTheme = (0, _useTheme["default"])();
+  var translatedLabels = (0, _useTranslatedLabels["default"])();
   (0, _react.useEffect)(function () {
     var getFiles = /*#__PURE__*/function () {
       var _ref2 = (0, _asyncToGenerator2["default"])( /*#__PURE__*/_regenerator["default"].mark(function _callee2() {
@@ -204,11 +207,11 @@ var DxcFileInput = function DxcFileInput(_ref) {
 
   var checkFileSize = function checkFileSize(file) {
     if (file.size < minSize) {
-      return "File size must be greater than min size.";
+      return translatedLabels.fileInput.fileSizeGreaterThanErrorMessage;
     }
 
     if (file.size > maxSize) {
-      return "File size must be less than max size.";
+      return translatedLabels.fileInput.fileSizeLessThanErrorMessage;
     }
   };
 
@@ -410,7 +413,7 @@ var DxcFileInput = function DxcFileInput(_ref) {
     onChange: selectFiles
   }), /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     mode: "secondary",
-    label: buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : multiple ? "Select files" : "Select file",
+    label: buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : multiple ? translatedLabels.fileInput.multipleButtonLabelDefault : translatedLabels.fileInput.singleButtonLabelDefault,
     onClick: handleClick,
     disabled: disabled,
     size: "medium",
@@ -450,15 +453,15 @@ var DxcFileInput = function DxcFileInput(_ref) {
     mode: mode
   }, /*#__PURE__*/_react["default"].createElement(_Button["default"], {
     mode: "secondary",
-    label: buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : "Select",
+    label: buttonLabel !== null && buttonLabel !== void 0 ? buttonLabel : translatedLabels.fileInput.dropAreaButtonLabelDefault,
     onClick: handleClick,
     disabled: disabled,
     size: "fitContent"
   })), mode === "dropzone" ? /*#__PURE__*/_react["default"].createElement(DropzoneLabel, {
     disabled: disabled
-  }, dropAreaLabel !== null && dropAreaLabel !== void 0 ? dropAreaLabel : multiple ? "or drop files" : "or drop a file") : /*#__PURE__*/_react["default"].createElement(FiledropLabel, {
+  }, dropAreaLabel !== null && dropAreaLabel !== void 0 ? dropAreaLabel : multiple ? translatedLabels.fileInput.multipleDropAreaLabelDefault : translatedLabels.fileInput.singleDropAreaLabelDefault) : /*#__PURE__*/_react["default"].createElement(FiledropLabel, {
     disabled: disabled
-  }, dropAreaLabel !== null && dropAreaLabel !== void 0 ? dropAreaLabel : multiple ? "or drop files" : "or drop a file")), files.map(function (file) {
+  }, dropAreaLabel !== null && dropAreaLabel !== void 0 ? dropAreaLabel : multiple ? translatedLabels.fileInput.multipleDropAreaLabelDefault : translatedLabels.fileInput.singleDropAreaLabelDefault)), files.map(function (file) {
     return /*#__PURE__*/_react["default"].createElement(FileItemContainer, {
       mode: mode,
       multiple: multiple,

package/file-input/FileItem.js

@@ -133,9 +133,9 @@ var FileItemContainer = _styledComponents["default"].div(_templateObject3 || (_t
 var ImagePreview = _styledComponents["default"].img(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2["default"])(["\n  width: 48px;\n  height: 48px;\n  object-fit: contain;\n  margin-right: 12px;\n  border-radius: 2px;\n"])));
 
 var IconPreviewContainer = _styledComponents["default"].div(_templateObject5 || (_templateObject5 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  margin-right: 12px;\n  background-color: ", ";\n  width: 48px;\n  height: 48px;\n  border-radius: 2px;\n  color: ", ";\n"])), function (props) {
-  return props.error ? props.theme.errorFileItemIconBackgroundColor : props.theme.fileItemIconBackgroundColor;
+  return props.error ? props.theme.errorFilePreviewBackgroundColor : props.theme.filePreviewBackgroundColor;
 }, function (props) {
-  return props.error ? props.theme.errorFileItemIconColor : props.theme.fileItemIconColor;
+  return props.error ? props.theme.errorFilePreviewIconColor : props.theme.filePreviewIconColor;
 });
 
 var IconPreview = _styledComponents["default"].div(_templateObject6 || (_templateObject6 = (0, _taggedTemplateLiteral2["default"])([""])));
@@ -156,14 +156,16 @@ var FileName = _styledComponents["default"].span(_templateObject7 || (_templateO
 
 var ErrorIcon = _styledComponents["default"].span(_templateObject8 || (_templateObject8 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  padding: 3px;\n  height: 18px;\n  width: 18px;\n  color: #d0011b;\n"])));
 
-var DeleteIcon = _styledComponents["default"].button(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  height: 24px;\n  width: 24px;\n  font-size: 1rem;\n  font-family: ", ";\n  border: 1px solid transparent;\n  border-radius: 2px;\n  margin-left: 4px;\n  background-color: transparent;\n  box-shadow: 0 0 0 2px transparent;\n  padding: 3px;\n  cursor: pointer;\n  svg {\n    line-height: 18px;\n  }\n  &:hover {\n    background-color: ", ";\n  }\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n  &:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n  &:active {\n    background-color: ", ";\n  }\n"])), function (props) {
+var DeleteIcon = _styledComponents["default"].button(_templateObject9 || (_templateObject9 = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  flex-wrap: wrap;\n  align-content: center;\n  height: 24px;\n  width: 24px;\n  font-size: 1rem;\n  font-family: ", ";\n  border: 1px solid transparent;\n  border-radius: 2px;\n  margin-left: 4px;\n  background-color: transparent;\n  box-shadow: 0 0 0 2px transparent;\n  padding: 3px;\n  cursor: pointer;\n  color: ", ";\n  svg {\n    line-height: 18px;\n  }\n  &:hover {\n    background-color: ", ";\n  }\n  &:focus {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n  &:focus-visible {\n    outline: none;\n    box-shadow: 0 0 0 2px ", ";\n  }\n  &:active {\n    background-color: ", ";\n  }\n"])), function (props) {
   return props.theme.fontFamily;
+}, function (props) {
+  return props.theme.deleteFileItemColor;
 }, function (props) {
   return props.theme.hoverDeleteFileItemBackgroundColor;
 }, function (props) {
-  return props.theme.focusActionBorderColor;
+  return props.theme.focusDeleteFileItemBorderColor;
 }, function (props) {
-  return props.theme.focusActionBorderColor;
+  return props.theme.focusDeleteFileItemBorderColor;
 }, function (props) {
   return props.theme.activeDeleteFileItemBackgroundColor;
 });

package/flex/Flex.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import FlexPropsType from "./types";
+export default function Flex({ direction, wrap, justifyContent, alignItems, alignContent, gap, order, grow, shrink, basis, alignSelf, as, children, }: FlexPropsType): JSX.Element;

package/flex/Flex.js

@@ -0,0 +1,74 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = Flex;
+
+var _typeof2 = _interopRequireDefault(require("@babel/runtime/helpers/typeof"));
+
+var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/taggedTemplateLiteral"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+
+var _templateObject;
+
+function Flex(_ref) {
+  var _ref$direction = _ref.direction,
+      direction = _ref$direction === void 0 ? "row" : _ref$direction,
+      _ref$wrap = _ref.wrap,
+      wrap = _ref$wrap === void 0 ? "nowrap" : _ref$wrap,
+      _ref$justifyContent = _ref.justifyContent,
+      justifyContent = _ref$justifyContent === void 0 ? "flex-start" : _ref$justifyContent,
+      _ref$alignItems = _ref.alignItems,
+      alignItems = _ref$alignItems === void 0 ? "stretch" : _ref$alignItems,
+      _ref$alignContent = _ref.alignContent,
+      alignContent = _ref$alignContent === void 0 ? "normal" : _ref$alignContent,
+      _ref$gap = _ref.gap,
+      gap = _ref$gap === void 0 ? "0" : _ref$gap,
+      _ref$order = _ref.order,
+      order = _ref$order === void 0 ? 0 : _ref$order,
+      _ref$grow = _ref.grow,
+      grow = _ref$grow === void 0 ? 0 : _ref$grow,
+      _ref$shrink = _ref.shrink,
+      shrink = _ref$shrink === void 0 ? 1 : _ref$shrink,
+      _ref$basis = _ref.basis,
+      basis = _ref$basis === void 0 ? "auto" : _ref$basis,
+      _ref$alignSelf = _ref.alignSelf,
+      alignSelf = _ref$alignSelf === void 0 ? "auto" : _ref$alignSelf,
+      as = _ref.as,
+      children = _ref.children;
+  return /*#__PURE__*/_react["default"].createElement(FlexContainer, {
+    direction: direction,
+    wrap: wrap,
+    justifyContent: justifyContent,
+    alignItems: alignItems,
+    alignContent: alignContent,
+    order: order,
+    grow: grow,
+    shrink: shrink,
+    basis: basis,
+    alignSelf: alignSelf,
+    gap: gap,
+    as: as
+  }, children);
+}
+
+var FlexContainer = _styledComponents["default"].div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2["default"])(["\n  display: flex;\n  ", "\n"])), function (_ref2) {
+  var direction = _ref2.direction,
+      wrap = _ref2.wrap,
+      justifyContent = _ref2.justifyContent,
+      alignItems = _ref2.alignItems,
+      alignContent = _ref2.alignContent,
+      gap = _ref2.gap,
+      order = _ref2.order,
+      grow = _ref2.grow,
+      shrink = _ref2.shrink,
+      basis = _ref2.basis,
+      alignSelf = _ref2.alignSelf;
+  return "flex-direction: ".concat(direction, "; \n    flex-wrap: ").concat(wrap, "; \n    justify-content: ").concat(justifyContent, "; \n    align-items: ").concat(alignItems, ";\n    align-content: ").concat(alignContent, ";\n    gap: ").concat((0, _typeof2["default"])(gap) === "object" ? "".concat(gap.rowGap, " ").concat(gap.columnGap) : gap, ";\n    order: ").concat(order, ";\n    flex-grow: ").concat(grow, ";\n    flex-shrink: ").concat(shrink, ";\n    flex-basis: ").concat(basis, ";\n    align-self: ").concat(alignSelf, ";\n    ");
+});

package/flex/Flex.stories.tsx

@@ -0,0 +1,103 @@
+import React from "react";
+import Title from "../../.storybook/components/Title";
+import styled from "styled-components";
+import DxcFlex from "./Flex";
+
+export default {
+  title: "Flex",
+  component: DxcFlex,
+};
+
+export const Chromatic = () => (
+  <>
+    <Title title="Default" level={4} />
+    <Container>
+      <DxcFlex>
+        <Placeholder />
+        <Placeholder width="50px" />
+        <Placeholder />
+        <Placeholder width="50px" />
+        <Placeholder width="50px" />
+      </DxcFlex>
+    </Container>
+    <Title title="Direction column, wrap, justify content end, align items center and gap" level={4} />
+    <Container>
+      <DxcFlex direction="column" wrap="wrap" justifyContent="end" alignItems="center" gap="20px">
+        <Placeholder />
+        <Placeholder width="100px" />
+        <Placeholder />
+        <Placeholder width="100px" />
+        <Placeholder />
+      </DxcFlex>
+    </Container>
+    <Title title="Wrap with align content space between, row and column gaps, and as a span" level={4} />
+    <Container height="250px">
+      <DxcFlex wrap="wrap" alignContent="space-between" as="span" gap={{ rowGap: "10px", columnGap: "20px" }}>
+        <Placeholder />
+        <Placeholder />
+        <Placeholder />
+        <Placeholder />
+        <Placeholder width="100px" />
+        <Placeholder />
+        <Placeholder />
+        <Placeholder width="100px" />
+        <Placeholder />
+        <Placeholder />
+        <Placeholder width="100px" />
+        <Placeholder />
+      </DxcFlex>
+    </Container>
+    <Title title="Basis 100%, order, grow and align self" level={4} />
+    <Container height="75px">
+      <DxcFlex basis="100%">
+        <DxcFlex order={3} grow={1} alignSelf="flex-end">
+          <PlaceholderGrowAndShrink>order 3, grow 1, align self end</PlaceholderGrowAndShrink>
+        </DxcFlex>
+        <DxcFlex order={-1} grow={4}>
+          <PlaceholderGrowAndShrink>order -1, grow 4</PlaceholderGrowAndShrink>
+        </DxcFlex>
+        <DxcFlex order={5} grow={1}>
+          <PlaceholderGrowAndShrink>order 5, grow 1</PlaceholderGrowAndShrink>
+        </DxcFlex>
+        <DxcFlex order={2} grow={2}>
+          <PlaceholderGrowAndShrink>order 2. grow 2</PlaceholderGrowAndShrink>
+        </DxcFlex>
+      </DxcFlex>
+    </Container>
+    <Title title="Basis and shrink" level={4} />
+    <Container>
+      <DxcFlex basis="600px">
+        <DxcFlex shrink={4} basis="400px">
+          <PlaceholderGrowAndShrink>shrink 4</PlaceholderGrowAndShrink>
+        </DxcFlex>
+        <DxcFlex shrink={2} basis="400px">
+          <PlaceholderGrowAndShrink>shrink 2</PlaceholderGrowAndShrink>
+        </DxcFlex>
+        <DxcFlex shrink={1} basis="400px">
+          <PlaceholderGrowAndShrink>shrink 1</PlaceholderGrowAndShrink>
+        </DxcFlex>
+      </DxcFlex>
+    </Container>
+  </>
+);
+
+const Container = styled.div<{ height?: string }>`
+  display: flex;
+  background: #f2eafa;
+  margin: 2.5rem;
+  ${({ height }) => (height ? `height: ${height}` : "max-height: 150px")};
+`;
+
+const Placeholder = styled.div<{ width?: string }>`
+  height: 40px;
+  min-width: ${({ width }) => width || "200px"};
+  border: 1px solid #a46ede;
+  background-color: #e5d5f6;
+`;
+
+const PlaceholderGrowAndShrink = styled.div`
+  height: 40px;
+  width: 100%;
+  border: 1px solid #a46ede;
+  background-color: #e5d5f6;
+`;

package/flex/types.d.ts

@@ -0,0 +1,21 @@
+/// <reference types="react" />
+declare type Gap = {
+    rowGap: string;
+    columnGap: string;
+};
+declare type Props = {
+    direction?: "row" | "row-reverse" | "column" | "column-reverse";
+    wrap?: "nowrap" | "wrap" | "wrap-reverse";
+    justifyContent?: "flex-start" | "flex-end" | "start" | "end" | "left" | "right" | "center" | "space-between" | "space-around" | "space-evenly";
+    alignItems?: "stretch" | "flex-start" | "flex-end" | "start" | "end" | "self-start" | "self-end" | "center" | "baseline";
+    alignContent?: "normal" | "flex-start" | "flex-end" | "start" | "end" | "center" | "space-between" | "space-around" | "space-evenly" | "stretch";
+    gap?: string | Gap;
+    order?: number;
+    grow?: number;
+    shrink?: number;
+    basis?: string;
+    alignSelf?: "auto" | "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
+    as?: React.ElementType;
+    children: React.ReactNode;
+};
+export default Props;