@telus-uds/components-base 1.21.0 → 1.23.0

package/lib/Fieldset/Fieldset.js

@@ -9,6 +9,8 @@ var _react = _interopRequireWildcard(require("react"));
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
+var _StyleSheet = _interopRequireDefault(require("react-native-web/dist/cjs/exports/StyleSheet"));
+
 var _Feedback = _interopRequireDefault(require("../Feedback"));
 
 var _utils = require("../utils");
@@ -21,8 +23,6 @@ var _InputLabel = _interopRequireDefault(require("../InputLabel"));
 
 var _useInputSupports = _interopRequireDefault(require("../InputSupports/useInputSupports"));
 
-var _Legend = _interopRequireDefault(require("./Legend"));
-
 var _jsxRuntime = require("react/jsx-runtime");
 
 function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
@@ -44,6 +44,8 @@ const Fieldset = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     feedback,
     feedbackPosition = 'top',
     validation,
+    showIcon = false,
+    showErrorBorder = false,
     legend,
     hint,
     hintPosition,
@@ -64,20 +66,19 @@ const Fieldset = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     label: legend,
     validation
   });
-  const legendContent = legend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Legend.default, {
-    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, {
-      copy: copy,
-      label: legend,
-      hint: hint,
-      hintPosition: hintPosition,
-      hintId: hintId,
-      tooltip: tooltip
-    })
+  const legendContent = legend && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, {
+    copy: copy,
+    label: legend,
+    hint: hint,
+    hintPosition: hintPosition,
+    hintId: hintId,
+    tooltip: tooltip
   });
   const feedbackContent = feedback && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Feedback.default, {
     id: feedbackId,
     title: feedback,
-    validation: validation
+    validation: validation,
+    showFeedbackIcon: showIcon
   }); // Some accessibility patterns depend on elements being direct children, e.g. fieldset -> legend,
   // and on MacOS voiceover, radiogroup -> radio. To allow elements to be direct children of the
   // fieldset as much as possible, but also allow different spacing within content and between
@@ -91,14 +92,32 @@ const Fieldset = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     space,
     preserveFragments: true
   });
+  const borderStyle = validation === 'error' && showErrorBorder && staticStyles.errorBorder || staticStyles.noBorder;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_FieldsetContainer.default, {
     ref: ref,
     inactive: inactive,
     accessibilityRole: accessibilityRole,
     name: fieldsetName,
+    borderStyle: borderStyle,
+    showBorderStyle: showErrorBorder,
     children: stackedContent
   });
 });
+
+const staticStyles = _StyleSheet.default.create({
+  errorBorder: {
+    border: true,
+    borderWidth: 1,
+    borderColor: 'red',
+    borderRadius: 10,
+    padding: 8
+  },
+  noBorder: {
+    padding: 9,
+    border: 'unset'
+  }
+});
+
 Fieldset.displayName = 'Fieldset';
 Fieldset.propTypes = {
   children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
@@ -165,7 +184,17 @@ Fieldset.propTypes = {
   /**
    * Use to visually mark an input as valid or invalid.
    */
-  validation: _propTypes.default.oneOf(['error', 'success'])
+  validation: _propTypes.default.oneOf(['error', 'success']),
+
+  /**
+   * Use to show error or success icon in the feedback
+   */
+  showIcon: _propTypes.default.bool,
+
+  /**
+   * Use to show border in case of error for a group of components
+   */
+  showErrorBorder: _propTypes.default.bool
 };
 var _default = Fieldset;
 exports.default = _default;

package/lib/Fieldset/FieldsetContainer.js

@@ -27,12 +27,16 @@ const FieldsetContainer = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     children,
     inactive,
     accessibilityRole,
-    name: fieldsetName
+    name: fieldsetName,
+    showBorderStyle = false,
+    borderStyle
   } = _ref;
+  // If needs border for error design or reset the component style
+  const styleContainer = showBorderStyle ? borderStyle : _cssReset.default;
   return /*#__PURE__*/(0, _jsxRuntime.jsx)("fieldset", {
     ref: ref,
     disabled: inactive,
-    style: _cssReset.default,
+    style: styleContainer,
     role: accessibilityRole,
     name: fieldsetName,
     children: children
@@ -43,7 +47,9 @@ FieldsetContainer.propTypes = {
   accessibilityRole: _propTypes.default.string,
   children: _propTypes.default.node,
   inactive: _propTypes.default.bool,
-  name: _propTypes.default.string
+  name: _propTypes.default.string,
+  showBorderStyle: _propTypes.default.bool,
+  borderStyle: _propTypes.default.object
 };
 var _default = FieldsetContainer;
 exports.default = _default;

package/lib/List/PressableListItemBase.js

@@ -132,6 +132,7 @@ const staticStyles = _StyleSheet.default.create({
 PressableListItemBase.propTypes = { ..._utils.withLinkRouter.propTypes,
   href: _propTypes.default.string,
   onPress: _propTypes.default.func,
+  // eslint-disable-next-line react/forbid-prop-types
   tokens: _propTypes.default.any,
   icon: _propTypes.default.elementType,
   children: _propTypes.default.oneOfType([_propTypes.default.node, _propTypes.default.func]),

package/lib/QuickLinksFeature/QuickLinksFeature.js

@@ -0,0 +1,91 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _StackView = require("../StackView");
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _utils = require("../utils");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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; }
+
+// pass through and type relevant system props - add more sets for interactive components
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
+
+const isQuickListItem = element => {
+  var _element$type, _element$type2;
+
+  const elementName = (element === null || element === void 0 ? void 0 : (_element$type = element.type) === null || _element$type === void 0 ? void 0 : _element$type.displayName) || (element === null || element === void 0 ? void 0 : (_element$type2 = element.type) === null || _element$type2 === void 0 ? void 0 : _element$type2.name);
+  return Boolean(elementName.match(/QuickLinksFeatureItem/));
+};
+/**
+ * QuickLinksFeature renders a list of interactive items.
+ *  - This is the base component that is used as a wrapper and accepts a List of `QuickLinksFeature.Item`
+ */
+
+
+const QuickLinksFeature = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    tokens,
+    variant,
+    tag = 'ul',
+    children,
+    ...rest
+  } = _ref;
+  const {
+    stackGap,
+    stackJustify,
+    stackSpace
+  } = (0, _ThemeProvider.useThemeTokens)('QuickLinksFeature', tokens, variant);
+
+  const items = _react.Children.map(children, child => {
+    if (isQuickListItem(child)) {
+      return /*#__PURE__*/(0, _react.cloneElement)(child, child.props);
+    }
+
+    return null;
+  });
+
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_StackView.StackWrap, {
+    space: stackSpace,
+    gap: stackGap,
+    tokens: {
+      justifyContent: stackJustify
+    },
+    tag: tag,
+    ref: ref,
+    ...selectProps(rest),
+    children: items
+  });
+});
+QuickLinksFeature.displayName = 'QuickLinksFeature';
+QuickLinksFeature.propTypes = { ...selectedSystemPropTypes,
+  tokens: (0, _utils.getTokensPropType)('QuickLinksFeature'),
+  variant: _utils.variantProp.propType,
+
+  /**
+   * Default wrapper tag, by default it's "ul"
+   */
+  tag: _propTypes.default.string,
+
+  /**
+   * QuickLinksFeature.Item component
+   */
+  children: _propTypes.default.node
+};
+var _default = QuickLinksFeature;
+exports.default = _default;

package/lib/QuickLinksFeature/QuickLinksFeatureItem.js

@@ -0,0 +1,157 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _Image = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Image"));
+
+var _Platform = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Platform"));
+
+var _Text = _interopRequireDefault(require("react-native-web/dist/cjs/exports/Text"));
+
+var _View = _interopRequireDefault(require("react-native-web/dist/cjs/exports/View"));
+
+var _utils = require("../utils");
+
+var _ViewportProvider = require("../ViewportProvider");
+
+var _ThemeProvider = require("../ThemeProvider");
+
+var _Link = require("../Link");
+
+var _StackView = require("../StackView");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
+
+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; }
+
+// pass through and type relevant system props - add more sets for interactive components
+const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.linkProps]);
+
+const selectImageStyle = imageDimension => ({
+  width: imageDimension,
+  height: imageDimension,
+  ..._Platform.default.select({
+    // TODO: https://github.com/telus/universal-design-system/issues/487
+    web: {
+      transition: 'width 200ms, height 200ms'
+    }
+  })
+});
+
+const selectContainerStyle = _ref => {
+  let {
+    contentMaxDimension,
+    textAlign
+  } = _ref;
+  return {
+    textAlign,
+    width: contentMaxDimension,
+    overflow: 'hidden'
+  };
+};
+
+const selectImageContainerStyle = contentMaxDimension => ({
+  width: contentMaxDimension,
+  height: contentMaxDimension,
+  justifyContent: 'center',
+  alignItems: 'center'
+});
+/**
+ * Component export along with QuickLinksFeature to be used as children
+ *
+ * It will receive a image source and a accessibility label and will render a link accordingly with the theme tokens
+ */
+
+
+const QuickLinksFeatureItem = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+  let {
+    tokens,
+    variant,
+    children,
+    imageAccessibilityLabel,
+    imageSource,
+    ...rest
+  } = _ref2;
+  const viewport = (0, _ViewportProvider.useViewport)();
+  const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('QuickLinksFeatureItem', tokens, variant);
+  const [hover, setHover] = (0, _react.useState)(false);
+  const {
+    contentDirection,
+    contentSpace,
+    contentAlignItems,
+    contentMaxDimension,
+    imageDimension,
+    textAlign
+  } = getTokens({
+    viewport,
+    hover
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Link.Link, {
+    ref: ref,
+    tokens: state => {
+      setHover(state.hover);
+      return getTokens(state);
+    },
+    ...selectProps(rest),
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+      style: selectContainerStyle({
+        contentMaxDimension,
+        textAlign
+      }),
+      children: /*#__PURE__*/(0, _jsxRuntime.jsxs)(_StackView.StackWrap, {
+        direction: contentDirection,
+        space: contentSpace,
+        tokens: {
+          alignItems: contentAlignItems
+        },
+        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+          style: selectImageContainerStyle(contentMaxDimension),
+          children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Image.default, {
+            accessibilityIgnoresInvertColors: true,
+            imageAccessibilityLabel: imageAccessibilityLabel,
+            source: imageSource,
+            style: selectImageStyle(imageDimension)
+          })
+        }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
+          children: children
+        })]
+      })
+    })
+  });
+});
+QuickLinksFeatureItem.displayName = 'QuickLinksFeatureItem';
+QuickLinksFeatureItem.propTypes = { ..._utils.withLinkRouter.propTypes,
+  ...selectedSystemPropTypes,
+  tokens: (0, _utils.getTokensPropType)('QuickLinksFeatureItem'),
+  variant: _utils.variantProp.propType,
+
+  /**
+   * Text which will be rendered within the Link
+   */
+  children: _propTypes.default.node.isRequired,
+
+  /**
+   * Image accessibility label
+   */
+  imageAccessibilityLabel: _propTypes.default.string.isRequired,
+
+  /**
+   * Image node or Image url
+   */
+  imageSource: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.node]).isRequired
+};
+
+var _default = (0, _utils.withLinkRouter)(QuickLinksFeatureItem);
+
+exports.default = _default;

package/lib/QuickLinksFeature/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _QuickLinksFeature = _interopRequireDefault(require("./QuickLinksFeature"));
+
+var _QuickLinksFeatureItem = _interopRequireDefault(require("./QuickLinksFeatureItem"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+_QuickLinksFeature.default.Item = _QuickLinksFeatureItem.default;
+var _default = _QuickLinksFeature.default;
+exports.default = _default;

package/lib/Radio/RadioGroup.js

@@ -131,6 +131,7 @@ const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       id,
       onChange: itemOnChange,
       ref: itemRef,
+      description,
       ...itemRest
     } = _ref2;
     const radioId = id || "Radio[".concat(index, "]");
@@ -142,7 +143,6 @@ const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     };
 
     return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Radio.default, {
-      error: validation === 'error',
       ref: itemRef,
       id: radioId,
       checked: isChecked,
@@ -152,6 +152,7 @@ const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
       name: inputGroupName,
       tokens: radioTokens,
       variant: variant,
+      description: description,
       ...selectItemProps(itemRest)
     }, radioId);
   });
@@ -167,6 +168,8 @@ const RadioGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     feedback: feedback,
     inactive: inactive,
     validation: validation,
+    showIcon: true,
+    showErrorBorder: true,
     accessibilityRole: "radiogroup",
     ...selectProps(rest),
     children: (0, _StackView.getStackedContent)(radios, {
@@ -205,6 +208,7 @@ RadioGroup.propTypes = { ...selectedSystemPropTypes,
     label: _propTypes.default.string,
     id: _propTypes.default.string,
     onChange: _propTypes.default.func,
+    description: _propTypes.default.string,
     ref: _airbnbPropTypes.default.ref()
   })),
 

package/lib/RadioCard/RadioCardGroup.js

@@ -142,6 +142,8 @@ const RadioCardGroup = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
     feedback: feedback,
     inactive: inactive || readOnly,
     validation: validation,
+    showErrorBorder: true,
+    showIcon: true,
     accessibilityRole: "radiogroup",
     ...selectProps(rest),
     children: props => /*#__PURE__*/(0, _jsxRuntime.jsx)(StackContainer, {

package/lib/index.js

@@ -30,6 +30,7 @@ var _exportNames = {
   Pagination: true,
   Progress: true,
   QuickLinks: true,
+  QuickLinksFeature: true,
   Radio: true,
   RadioCard: true,
   Responsive: true,
@@ -238,6 +239,12 @@ Object.defineProperty(exports, "QuickLinks", {
     return _QuickLinks.default;
   }
 });
+Object.defineProperty(exports, "QuickLinksFeature", {
+  enumerable: true,
+  get: function () {
+    return _QuickLinksFeature.default;
+  }
+});
 Object.defineProperty(exports, "Radio", {
   enumerable: true,
   get: function () {
@@ -541,6 +548,8 @@ var _Progress = _interopRequireDefault(require("./Progress"));
 
 var _QuickLinks = _interopRequireDefault(require("./QuickLinks"));
 
+var _QuickLinksFeature = _interopRequireDefault(require("./QuickLinksFeature"));
+
 var _Radio = _interopRequireWildcard(require("./Radio"));
 
 Object.keys(_Radio).forEach(function (key) {

package/lib-module/Button/ButtonGroup.js

@@ -31,6 +31,7 @@ const ButtonGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
     feedback,
     name: inputGroupName,
     copy,
+    iconPosition,
     accessibilityRole = maxValues === 1 ? 'radiogroup' // radiogroup is cross-platform; only web aria has generic groups
     : Platform.select({
       web: 'group',
@@ -113,6 +114,7 @@ const ButtonGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
           toggleOneValue(id, event);
         };
 
+        const iconProp = itemRest.icon || undefined;
         const itemA11y = {
           accessibilityState: {
             checked: isSelected
@@ -130,9 +132,11 @@ const ButtonGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
           tokens: getButtonTokens,
           selected: isSelected,
           inactive: inactive,
+          icon: iconProp,
           ...selectItemProps({ ...itemRest,
             ...itemA11y
           }),
+          iconPosition: iconPosition,
           children: label
         }, id);
       })
@@ -201,6 +205,11 @@ ButtonGroup.propTypes = { ...selectedSystemPropTypes,
    */
   initialValues: PropTypes.arrayOf(PropTypes.string),
 
+  /**
+   * Defines if the icon will be displayed on the right or left side of the label.
+   */
+  iconPosition: PropTypes.oneOf(['left', 'right']),
+
   /**
    * Main text used to describe this group, used in Fieldset's Legend element.
    */

package/lib-module/Checkbox/CheckboxGroup.js

@@ -139,6 +139,8 @@ const CheckboxGroup = /*#__PURE__*/forwardRef((_ref, ref) => {
     feedback: feedback,
     inactive: inactive,
     validation: validation,
+    showIcon: true,
+    showErrorBorder: true,
     ...selectProps(rest),
     children: getStackedContent(checkboxes, {
       space,

package/lib-module/ExpandCollapse/Control.js

@@ -41,11 +41,13 @@ function selectContainerStyles(_ref) {
 function selectIconContainerStyles(_ref2) {
   let {
     iconGap,
+    iconPaddingTop,
     iconPosition
   } = _ref2;
   const paddingSide = iconPosition === 'right' ? 'paddingLeft' : 'paddingRight';
   return {
-    [paddingSide]: iconGap
+    [paddingSide]: iconGap,
+    paddingTop: iconPaddingTop
   };
 }
 

package/lib-module/Feedback/Feedback.js

@@ -84,10 +84,12 @@ const Feedback = /*#__PURE__*/forwardRef((_ref5, ref) => {
     validation,
     tokens,
     variant,
+    showFeedbackIcon = false,
     ...rest
   } = _ref5;
   const themeTokens = useThemeTokens('Feedback', tokens, { ...variant,
-    validation
+    validation,
+    icon: showFeedbackIcon
   });
   const {
     space
@@ -153,7 +155,8 @@ Feedback.propTypes = { ...selectedSystemPropTypes,
   /** @ignore */
   id: PropTypes.string,
   tokens: getTokensPropType('Feedback'),
-  variant: variantProp.propType
+  variant: variantProp.propType,
+  showFeedbackIcon: PropTypes.bool
 };
 export default Feedback;
 const staticStyles = StyleSheet.create({

package/lib-module/Fieldset/Fieldset.js

@@ -1,12 +1,12 @@
 import React, { forwardRef } from 'react';
 import PropTypes from 'prop-types';
+import StyleSheet from "react-native-web/dist/exports/StyleSheet";
 import Feedback from '../Feedback';
 import { spacingProps } from '../utils';
 import FieldsetContainer from './FieldsetContainer';
 import { getStackedContent } from '../StackView';
 import InputLabel from '../InputLabel';
 import useInputSupports from '../InputSupports/useInputSupports';
-import Legend from './Legend';
 /**
  * An alternative to InputSupports for groups of input elements that, on web, are to be
  * wrapped in a `<fieldset>` tag, with label content displated in a `<legend>` tag.
@@ -23,6 +23,8 @@ const Fieldset = /*#__PURE__*/forwardRef((_ref, ref) => {
     feedback,
     feedbackPosition = 'top',
     validation,
+    showIcon = false,
+    showErrorBorder = false,
     legend,
     hint,
     hintPosition,
@@ -44,21 +46,20 @@ const Fieldset = /*#__PURE__*/forwardRef((_ref, ref) => {
     validation
   });
 
-  const legendContent = legend && /*#__PURE__*/_jsx(Legend, {
-    children: /*#__PURE__*/_jsx(InputLabel, {
-      copy: copy,
-      label: legend,
-      hint: hint,
-      hintPosition: hintPosition,
-      hintId: hintId,
-      tooltip: tooltip
-    })
+  const legendContent = legend && /*#__PURE__*/_jsx(InputLabel, {
+    copy: copy,
+    label: legend,
+    hint: hint,
+    hintPosition: hintPosition,
+    hintId: hintId,
+    tooltip: tooltip
   });
 
   const feedbackContent = feedback && /*#__PURE__*/_jsx(Feedback, {
     id: feedbackId,
     title: feedback,
-    validation: validation
+    validation: validation,
+    showFeedbackIcon: showIcon
   }); // Some accessibility patterns depend on elements being direct children, e.g. fieldset -> legend,
   // and on MacOS voiceover, radiogroup -> radio. To allow elements to be direct children of the
   // fieldset as much as possible, but also allow different spacing within content and between
@@ -74,14 +75,30 @@ const Fieldset = /*#__PURE__*/forwardRef((_ref, ref) => {
     space,
     preserveFragments: true
   });
+  const borderStyle = validation === 'error' && showErrorBorder && staticStyles.errorBorder || staticStyles.noBorder;
   return /*#__PURE__*/_jsx(FieldsetContainer, {
     ref: ref,
     inactive: inactive,
     accessibilityRole: accessibilityRole,
     name: fieldsetName,
+    borderStyle: borderStyle,
+    showBorderStyle: showErrorBorder,
     children: stackedContent
   });
 });
+const staticStyles = StyleSheet.create({
+  errorBorder: {
+    border: true,
+    borderWidth: 1,
+    borderColor: 'red',
+    borderRadius: 10,
+    padding: 8
+  },
+  noBorder: {
+    padding: 9,
+    border: 'unset'
+  }
+});
 Fieldset.displayName = 'Fieldset';
 Fieldset.propTypes = {
   children: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
@@ -148,6 +165,16 @@ Fieldset.propTypes = {
   /**
    * Use to visually mark an input as valid or invalid.
    */
-  validation: PropTypes.oneOf(['error', 'success'])
+  validation: PropTypes.oneOf(['error', 'success']),
+
+  /**
+   * Use to show error or success icon in the feedback
+   */
+  showIcon: PropTypes.bool,
+
+  /**
+   * Use to show border in case of error for a group of components
+   */
+  showErrorBorder: PropTypes.bool
 };
 export default Fieldset;