@telus-uds/components-base 1.7.1 → 1.8.2

package/lib/HorizontalScroll/itemPositions.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.itemPositionsPropType = exports.useItemPositions = exports.getItemPositionLayoutHandler = exports.getItemPositionScrollTarget = void 0;
+exports.useItemPositions = exports.itemPositionsPropType = exports.getItemPositionScrollTarget = exports.getItemPositionLayoutHandler = void 0;
 
 var _react = require("react");
 
@@ -40,15 +40,19 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
  * @param {number} [buttonClearance] - offset to allow space for a button
  * @returns {number}
  */
-const getItemPositionScrollTarget = (x, scrollMax, positions, buttonClearance = 0) => {
+const getItemPositionScrollTarget = function (x, scrollMax, positions) {
+  let buttonClearance = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : 0;
   if (x <= 0) return 0;
   if (x >= scrollMax) return scrollMax; // If not scrolling all the way to the start or end, stop
   // where the first item is not coverred by the scroll previous button
 
-  const targetItem = Object.values(positions).find(({
-    start,
-    end
-  }) => start <= x && end > x); // If there's no target item we're landing at a gap between items
+  const targetItem = Object.values(positions).find(_ref => {
+    let {
+      start,
+      end
+    } = _ref;
+    return start <= x && end > x;
+  }); // If there's no target item we're landing at a gap between items
 
   const targetX = targetItem ? targetItem.start : x;
   return Math.max(0, targetX - buttonClearance);
@@ -66,14 +70,16 @@ const getItemPositionScrollTarget = (x, scrollMax, positions, buttonClearance =
 exports.getItemPositionScrollTarget = getItemPositionScrollTarget;
 
 const getItemPositionLayoutHandler = (positions, index) => {
-  const handleLayout = ({
-    nativeEvent: {
-      layout: {
-        width,
-        x
+  const handleLayout = _ref2 => {
+    let {
+      nativeEvent: {
+        layout: {
+          width,
+          x
+        }
       }
-    }
-  }) => {
+    } = _ref2;
+
     /* eslint-disable-next-line no-param-reassign */
     positions[index] = {
       start: x,

package/lib/Icon/Icon.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = exports.iconComponentPropTypes = void 0;
+exports.iconComponentPropTypes = exports.default = void 0;
 
 var _react = _interopRequireWildcard(require("react"));
 
@@ -25,14 +25,15 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-const Icon = /*#__PURE__*/(0, _react.forwardRef)(({
-  icon: IconComponent,
-  accessibilityLabel,
-  variant,
-  tokens,
-  scalesWithText = false,
-  dataSet
-}, ref) => {
+const Icon = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    icon: IconComponent,
+    accessibilityLabel,
+    variant,
+    tokens,
+    scalesWithText = false,
+    dataSet
+  } = _ref;
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('Icon', tokens, variant);
   const size = scalesWithText ? (0, _utils.scaleWithText)(themeTokens.size) : themeTokens.size;
   const iconContent = /*#__PURE__*/(0, _jsxRuntime.jsx)(IconComponent, {

package/lib/Icon/IconText.js

@@ -35,15 +35,16 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  *  - inline within a <Text> element
  *  - within a container with `flexDirection: 'row'`
  */
-const IconText = /*#__PURE__*/(0, _react.forwardRef)(({
-  space,
-  iconPosition = 'left',
-  icon: IconComponent,
-  iconProps,
-  children
-}, ref) => {
+const IconText = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
   var _iconProps$tokens;
 
+  let {
+    space,
+    iconPosition = 'left',
+    icon: IconComponent,
+    iconProps,
+    children
+  } = _ref;
   const iconContent = IconComponent && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Icon.default, {
     ref: ref,
     icon: IconComponent,

package/lib/Icon/index.js

@@ -3,19 +3,19 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-Object.defineProperty(exports, "iconComponentPropTypes", {
+Object.defineProperty(exports, "IconText", {
   enumerable: true,
   get: function () {
-    return _Icon.iconComponentPropTypes;
+    return _IconText.default;
   }
 });
-Object.defineProperty(exports, "IconText", {
+exports.default = void 0;
+Object.defineProperty(exports, "iconComponentPropTypes", {
   enumerable: true,
   get: function () {
-    return _IconText.default;
+    return _Icon.iconComponentPropTypes;
   }
 });
-exports.default = void 0;
 
 var _Icon = _interopRequireWildcard(require("./Icon"));
 

package/lib/IconButton/IconButton.js

@@ -33,43 +33,49 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
 
 const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_utils.a11yProps, _utils.viewProps]);
 
-const selectOuterStyle = ({
-  backgroundColor,
-  borderRadius,
-  outerBorderWidth,
-  outerBorderColor,
-  outerBorderGap,
-  shadow
-}) => [{
-  backgroundColor,
-  ...(0, _ThemeProvider.applyShadowToken)(shadow),
-  ...(0, _ThemeProvider.applyOuterBorder)({
+const selectOuterStyle = _ref => {
+  let {
+    backgroundColor,
     borderRadius,
     outerBorderWidth,
     outerBorderColor,
-    outerBorderGap
-  }),
-  ..._Platform.default.select({
-    web: {
-      outline: 'none',
-      display: 'inline-flex'
-    }
-  })
-}, staticStyles.outer];
-
-const selectInnerStyle = ({
-  borderColor,
-  borderWidth = 0,
-  borderRadius,
-  padding = 0
-}) => ({
-  // Inner borders animate with the icon and should be treated like a themable feature of the icon
-  borderColor,
-  borderRadius,
-  borderWidth,
-  padding: Math.max(0, padding - borderWidth) // Stable size as border changes
+    outerBorderGap,
+    shadow
+  } = _ref;
+  return [{
+    backgroundColor,
+    ...(0, _ThemeProvider.applyShadowToken)(shadow),
+    ...(0, _ThemeProvider.applyOuterBorder)({
+      borderRadius,
+      outerBorderWidth,
+      outerBorderColor,
+      outerBorderGap
+    }),
+    ..._Platform.default.select({
+      web: {
+        outline: 'none',
+        display: 'inline-flex'
+      }
+    })
+  }, staticStyles.outer];
+};
 
-});
+const selectInnerStyle = _ref2 => {
+  let {
+    borderColor,
+    borderWidth = 0,
+    borderRadius,
+    padding = 0
+  } = _ref2;
+  return {
+    // Inner borders animate with the icon and should be treated like a themable feature of the icon
+    borderColor,
+    borderRadius,
+    borderWidth,
+    padding: Math.max(0, padding - borderWidth) // Stable size as border changes
+
+  };
+};
 /**
  * A pressable themeless base component that handles pressable states and passes tokens
  * based on these to an outer border and a base Card component. Not intended to be used in
@@ -77,15 +83,17 @@ const selectInnerStyle = ({
  */
 
 
-const IconButton = /*#__PURE__*/(0, _react.forwardRef)(({
-  tokens,
-  variant,
-  icon: IconComponent,
-  href,
-  hrefAttrs,
-  accessibilityRole = href ? 'link' : 'button',
-  ...rawRest
-}, ref) => {
+const IconButton = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+  let {
+    tokens,
+    variant,
+    icon: IconComponent,
+    href,
+    hrefAttrs,
+    accessibilityRole = href ? 'link' : 'button',
+    ...rawRest
+  } = _ref3;
+
   const {
     onPress,
     ...rest

package/lib/InputLabel/InputLabel.js

@@ -35,37 +35,45 @@ const [selectProps, selectedSystemPropTypes] = (0, _utils.selectSystemProps)([_u
 
 const selectLabelStyles = tokens => (0, _ThemeProvider.applyTextStyles)((0, _utils.selectTokens)('Typography', tokens));
 
-const selectHintStyles = ({
-  hintColor,
-  hintFontName,
-  hintFontSize,
-  hintFontWeight,
-  hintLineHeight
-}) => (0, _ThemeProvider.applyTextStyles)({
-  color: hintColor,
-  fontName: hintFontName,
-  fontSize: hintFontSize,
-  fontWeight: hintFontWeight,
-  lineHeight: hintLineHeight
-});
+const selectHintStyles = _ref => {
+  let {
+    hintColor,
+    hintFontName,
+    hintFontSize,
+    hintFontWeight,
+    hintLineHeight
+  } = _ref;
+  return (0, _ThemeProvider.applyTextStyles)({
+    color: hintColor,
+    fontName: hintFontName,
+    fontSize: hintFontSize,
+    fontWeight: hintFontWeight,
+    lineHeight: hintLineHeight
+  });
+};
 
-const selectGapStyles = ({
-  gap
-}) => ({
-  marginRight: gap
-});
+const selectGapStyles = _ref2 => {
+  let {
+    gap
+  } = _ref2;
+  return {
+    marginRight: gap
+  };
+};
 
-const InputLabel = /*#__PURE__*/(0, _react.forwardRef)(({
-  label,
-  forId,
-  hint,
-  hintPosition = 'inline',
-  hintId,
-  tooltip,
-  tokens,
-  variant,
-  ...rest
-}, ref) => {
+const InputLabel = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
+  let {
+    copy = 'en',
+    label,
+    forId,
+    hint,
+    hintPosition = 'inline',
+    hintId,
+    tooltip,
+    tokens,
+    variant,
+    ...rest
+  } = _ref3;
   const themeTokens = (0, _ThemeProvider.useThemeTokens)('InputLabel', tokens, variant);
   const hasTooltip = tooltip !== undefined;
   const isHintInline = hintPosition === 'inline';
@@ -89,7 +97,8 @@ const InputLabel = /*#__PURE__*/(0, _react.forwardRef)(({
           height: themeTokens.fontSize * themeTokens.lineHeight
         }],
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_Tooltip.default, {
-          content: tooltip
+          content: tooltip,
+          copy: copy
         })
       })]
     }), hint && !isHintInline && /*#__PURE__*/(0, _jsxRuntime.jsx)(_Text.default, {
@@ -102,6 +111,11 @@ const InputLabel = /*#__PURE__*/(0, _react.forwardRef)(({
 InputLabel.displayName = 'InputLabel';
 InputLabel.propTypes = { ...selectedSystemPropTypes,
 
+  /**
+   * Whether the English or French copy will be used (e.g. for accessibility labels).
+   */
+  copy: _propTypes.default.oneOf(['en', 'fr']),
+
   /**
    * The input label.
    */

package/lib/InputLabel/LabelContent.js

@@ -17,15 +17,18 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-const LabelContent = /*#__PURE__*/(0, _react.forwardRef)(({
-  children,
-  forId
-}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-  ref: ref,
-  htmlFor: forId,
-  style: staticStyles.inheritCursor,
-  children: children
-}));
+const LabelContent = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    forId
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+    ref: ref,
+    htmlFor: forId,
+    style: staticStyles.inheritCursor,
+    children: children
+  });
+});
 LabelContent.displayName = 'LabelContent';
 LabelContent.propTypes = {
   children: _propTypes.default.string,

package/lib/InputLabel/LabelContent.native.js

@@ -20,12 +20,15 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 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; }
 
 // Since there's no equivalent for web's <label> element we're simply rendering whatever is passed to this component.
-const LabelContent = /*#__PURE__*/(0, _react.forwardRef)(({
-  children
-}, ref) => ref ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
-  ref: ref,
-  children: children
-}) : children);
+const LabelContent = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children
+  } = _ref;
+  return ref ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_View.default, {
+    ref: ref,
+    children: children
+  }) : children;
+});
 LabelContent.displayName = 'LabelContent';
 LabelContent.propTypes = {
   children: _propTypes.default.node

package/lib/InputSupports/InputSupports.js

@@ -27,15 +27,17 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-const InputSupports = /*#__PURE__*/(0, _react.forwardRef)(({
-  children,
-  label,
-  hint,
-  hintPosition = 'inline',
-  feedback,
-  tooltip,
-  validation
-}, ref) => {
+const InputSupports = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    copy = 'en',
+    label,
+    hint,
+    hintPosition = 'inline',
+    feedback,
+    tooltip,
+    validation
+  } = _ref;
   const {
     space
   } = (0, _ThemeProvider.useThemeTokens)('InputSupports');
@@ -54,6 +56,7 @@ const InputSupports = /*#__PURE__*/(0, _react.forwardRef)(({
     space: space,
     ref: ref,
     children: [label && /*#__PURE__*/(0, _jsxRuntime.jsx)(_InputLabel.default, {
+      copy: copy,
       label: label,
       hint: hint,
       hintPosition: hintPosition,
@@ -74,6 +77,11 @@ InputSupports.displayName = 'InputSupports';
 InputSupports.propTypes = {
   children: _propTypes.default.oneOfType([_propTypes.default.func, _propTypes.default.node]),
 
+  /**
+   * Whether the English or French copy will be used (e.g. for accessibility labels).
+   */
+  copy: _propTypes.default.oneOf(['en', 'fr']),
+
   /**
    * The input label.
    */

package/lib/InputSupports/useInputSupports.js

@@ -11,12 +11,13 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 const joinDefined = array => array.filter(item => item !== undefined).join(' ');
 
-const useInputSupports = ({
-  label,
-  feedback,
-  validation,
-  hint
-}) => {
+const useInputSupports = _ref => {
+  let {
+    label,
+    feedback,
+    validation,
+    hint
+  } = _ref;
   const hasValidationError = validation === 'error';
   const inputId = (0, _useUniqueId.default)('input');
   const hintId = (0, _useUniqueId.default)('input-hint');

package/lib/Link/ChevronLink.js

@@ -29,14 +29,15 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  *
  * ChevronLink is not intended to be deeply themable; variants passed to ChevronLink are forwarded to Link.
  */
-const ChevronLink = /*#__PURE__*/(0, _react.forwardRef)(({
-  direction = 'right',
-  children,
-  tokens,
-  variant,
-  dataSet,
-  ...linkProps
-}, ref) => {
+const ChevronLink = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    direction = 'right',
+    children,
+    tokens,
+    variant,
+    dataSet,
+    ...linkProps
+  } = _ref;
   const getChevronTokens = (0, _ThemeProvider.useThemeTokensCallback)('ChevronLink', tokens, variant);
 
   const applyChevronTokens = linkState => {

package/lib/Link/InlinePressable.js

@@ -33,16 +33,19 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  */
 // React Native exports prop Types but not propTypes, use JSDoc types here rather than duplicate RN
 // eslint-disable-next-line react/prop-types
-const InlinePressable = /*#__PURE__*/(0, _react.forwardRef)(({
-  children,
-  style,
-  ...props
-}, ref) => /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
-  ref: ref,
-  style: pressState => [staticStyles.inline, typeof style === 'function' ? style(pressState) : style],
-  ...props,
-  children: pressState => typeof children === 'function' ? children(pressState) : children
-}));
+const InlinePressable = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    children,
+    style,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_Pressable.default, {
+    ref: ref,
+    style: pressState => [staticStyles.inline, typeof style === 'function' ? style(pressState) : style],
+    ...props,
+    children: pressState => typeof children === 'function' ? children(pressState) : children
+  });
+});
 InlinePressable.displayName = 'InlinePressable';
 
 const staticStyles = _StyleSheet.default.create({

package/lib/Link/InlinePressable.native.js

@@ -25,16 +25,19 @@ function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj &&
  * @typedef {import('react-native').PressableProps} PressableProps
  */
 // TouchableWithoutFeedback and Pressable have similar but not identical props APIs
-const pressablePropsToTouchable = ({
-  unstable_pressDelay,
-  android_disableSound,
-  android_ripple,
-  // Unsupported, discard it
-  ...props
-}) => ({ ...props,
-  touchSoundDisabled: android_disableSound,
-  delayPressIn: unstable_pressDelay
-});
+const pressablePropsToTouchable = _ref => {
+  let {
+    unstable_pressDelay,
+    android_disableSound,
+    android_ripple,
+    // Unsupported, discard it
+    ...props
+  } = _ref;
+  return { ...props,
+    touchSoundDisabled: android_disableSound,
+    delayPressIn: unstable_pressDelay
+  };
+};
 /**
  * InlinePressable is an alternative to React Native's Pressable that works better when nested
  * inline inside Text. It accepts the same props as React Native's Pressable.
@@ -57,12 +60,13 @@ const pressablePropsToTouchable = ({
 // eslint-disable-next-line react/prop-types
 
 
-const InlinePressable = /*#__PURE__*/(0, _react.forwardRef)(({
-  onPress,
-  children,
-  style,
-  ...rest
-}, ref) => {
+const InlinePressable = /*#__PURE__*/(0, _react.forwardRef)((_ref2, ref) => {
+  let {
+    onPress,
+    children,
+    style,
+    ...rest
+  } = _ref2;
   const [isFocused, setIsFocused] = (0, _react.useState)(false);
 
   const handleFocus = () => setIsFocused(true);

package/lib/Link/Link.js

@@ -19,15 +19,16 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
 
 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; }
 
-const Link = /*#__PURE__*/(0, _react.forwardRef)(({
-  href,
-  children,
-  accessibilityRole = 'link',
-  variant = {},
-  tokens,
-  dataSet,
-  ...linkProps
-}, ref) => {
+const Link = /*#__PURE__*/(0, _react.forwardRef)((_ref, ref) => {
+  let {
+    href,
+    children,
+    accessibilityRole = 'link',
+    variant = {},
+    tokens,
+    dataSet,
+    ...linkProps
+  } = _ref;
   const getTokens = (0, _ThemeProvider.useThemeTokensCallback)('Link', tokens, variant);
   return /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinkBase.default, {
     href: href,