@telus-uds/components-web 2.10.0 → 2.12.0

package/src/Listbox/ListboxItem.jsx

@@ -2,9 +2,13 @@
 import React, { forwardRef } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
-import { selectSystemProps, withLinkRouter, useThemeTokens } from '@telus-uds/components-base'
+import {
+  selectSystemProps,
+  withLinkRouter,
+  useThemeTokensCallback,
+  PressableItem
+} from '@telus-uds/components-base'
 import { htmlAttrs } from '../utils'
-import PressableItem from './PressableItem'
 
 const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs])
 
@@ -17,36 +21,11 @@ const StyledItemContainer = styled.li({
   }
 })
 
-const getSelectedItemStyles = ({ tokens }) => ({
-  display: tokens.itemDisplay,
-  fontFamily: `${tokens.itemFontName}${tokens.itemFontWeight}normal`,
-  fontSize: tokens.itemFontSize,
-  paddingTop: tokens.itemPaddingTop,
-  paddingBottom: tokens.itemPaddingBottom,
-  paddingLeft: tokens.itemPaddingLeft,
-  paddingRight: tokens.itemPaddingRight,
-  color: tokens.itemColor,
-  textDecoration: tokens.itemTextDecoration,
-  backgroundColor: tokens.itemBackgroundColor,
-  outline: tokens.itemOutline,
-  borderWidth: tokens.itemBorderWidth,
-  width: '100%'
-})
-
-const SelectedItem = styled.div(({ isChild, tokens }) => ({
-  ...getSelectedItemStyles({ tokens }),
-  borderLeft: isChild
-    ? `${tokens.itemBorderLeftWidth}px solid ${tokens.itemBorderLeftColor}`
-    : 'none'
-}))
-
 const ListboxItem = forwardRef(
   (
     {
       href,
       label,
-      onPress,
-      selected = false,
       isChild = false,
       onBlur,
       nextItemRef,
@@ -55,32 +34,32 @@ const ListboxItem = forwardRef(
       variant = {},
       LinkRouter,
       linkRouterProps,
+      id,
+      onPress = () => {},
+
       ...rest
     },
     ref
   ) => {
-    const selectedProps = selectProps(rest)
-    const systemTokens = useThemeTokens('ListBox', tokens, variant, { isChild })
+    const selectedProps = selectProps({ href, ...rest })
 
+    const getTokens = useThemeTokensCallback('Listbox', tokens, variant, { isChild })
     return (
       <StyledItemContainer isChild={isChild} {...selectedProps} role="option">
-        {selected ? (
-          <SelectedItem isChild={isChild} tokens={systemTokens}>
-            {label}
-          </SelectedItem>
-        ) : (
-          <PressableItem
-            href={href}
-            isChild={isChild}
-            onPress={onPress}
-            onBlur={onBlur}
-            nextItemRef={nextItemRef}
-            prevItemRef={prevItemRef}
-            ref={ref}
-          >
-            {label}
-          </PressableItem>
-        )}
+        <PressableItem
+          href={href}
+          isChild={isChild}
+          onPress={onPress}
+          onBlur={onBlur}
+          nextItemRef={nextItemRef}
+          prevItemRef={prevItemRef}
+          ref={ref}
+          tokens={getTokens}
+          selectedProps={selectedProps}
+          id={id}
+        >
+          {label}
+        </PressableItem>
       </StyledItemContainer>
     )
   }
@@ -95,8 +74,7 @@ ListboxItem.propTypes = {
   label: PropTypes.node.isRequired,
   nextItemRef: PropTypes.object,
   prevItemRef: PropTypes.object,
-  onPress: PropTypes.func,
-  selected: PropTypes.bool
+  onPress: PropTypes.func
 }
 
 export default withLinkRouter(ListboxItem)

package/src/Listbox/ListboxOverlay.jsx

@@ -23,7 +23,7 @@ const paddingHorizontal = 0
 
 const DropdownOverlay = forwardRef(
   ({ children, isReady = false, overlaidPosition, maxWidth, minWidth, onLayout }, ref) => {
-    const systemTokens = useThemeTokens('ListBox', {}, {})
+    const systemTokens = useThemeTokens('Listbox', {}, {})
 
     return (
       <WebPortal>

package/src/PriceLockup/PriceLockup.jsx

@@ -6,7 +6,8 @@ import {
   selectSystemProps,
   Typography,
   useThemeTokens,
-  useViewport
+  useViewport,
+  getTokensPropType
 } from '@telus-uds/components-base'
 import styled from 'styled-components'
 import FootnoteLink from '../Footnote/FootnoteLink'
@@ -273,7 +274,11 @@ PriceLockup.propTypes = {
    *
    * **Note:** a11yText will override strikethrough price, so it must include price (ie. "was 50 dollars per month")
    */
-  a11yText: PropTypes.string
+  a11yText: PropTypes.string,
+  /**
+   * `PriceLockup` tokens
+   */
+  tokens: getTokensPropType('PriceLockup')
 }
 
 export default PriceLockup

package/src/Video/ControlBar/ControlBar.jsx

@@ -2,7 +2,13 @@ import React from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 
-import { StackView, useThemeTokens, selectSystemProps, Icon } from '@telus-uds/components-base'
+import {
+  StackView,
+  useThemeTokens,
+  selectSystemProps,
+  Icon,
+  useViewport
+} from '@telus-uds/components-base'
 
 import VideoProgressBar from './Controls/VideoProgressBar/VideoProgressBar'
 import VolumeSlider from './Controls/VolumeSlider/VolumeSlider'
@@ -24,11 +30,11 @@ const ControlBarContainer = styled.div(({ isHidden, isMobile }) => ({
   display: isMobile ? 'none' : undefined
 }))
 
-const StyledControlBar = styled.div(({ padding }) => ({
+const StyledControlBar = styled.div(({ padding, height }) => ({
   boxSizing: 'border-box',
   position: 'absolute',
   width: '100%',
-  height: 56,
+  height,
   padding,
   bottom: 0,
   backgroundColor: 'rgba(42, 44, 46, 0.85)', // TODO: replace with opaque greyThunder
@@ -89,21 +95,21 @@ const ControlBar = ({
   variant,
   ...rest
 }) => {
+  const viewport = useViewport()
   const {
     paddingTop,
     paddingBottom,
-    paddingLeft: paddingLeftDefault,
-    paddingRight: paddingRightDefault,
-    paddingLeftCompactMode,
-    paddingRightCompactMode,
+    paddingLeft,
+    paddingRight,
     menuBottom,
     menuRight,
     menuMarginLeft,
     captionsIcon,
     settingsIcon,
     minimizeIcon,
-    maximizeIcon
-  } = useThemeTokens('VideoControlBar', tokens, variant)
+    maximizeIcon,
+    height
+  } = useThemeTokens('VideoControlBar', tokens, variant, { viewport })
 
   const parseVideoQuality = () => {
     return sources.map((source) => {
@@ -122,21 +128,19 @@ const ControlBar = ({
     return parsed
   }
 
-  const paddingLeft =
-    videoPlayerWidth > compactModeThreshold ? paddingLeftDefault : paddingLeftCompactMode
-  const paddingRight =
-    videoPlayerWidth > compactModeThreshold ? paddingRightDefault : paddingRightCompactMode
   const menuContainerStyleProps = { menuBottom, menuRight, menuMarginLeft }
 
   return (
     <ControlBarContainer isHidden={isHidden} isMobile={isMobile} {...selectProps(rest)}>
       <StyledControlBar
         padding={`${paddingTop}px ${paddingRight}px ${paddingBottom}px ${paddingLeft}px`}
+        height={`${height}px`}
       >
         <VideoProgressBarContainer>
           <VideoProgressBar
             copy={copy}
             videoPlayer={videoPlayer}
+            playing={videoPlaying}
             videoLength={videoLength}
             videoCurrentTime={videoCurrentTime}
             videoBufferEnd={videoBufferEnd}

package/src/Video/ControlBar/Controls/VideoProgressBar/VideoProgressBar.jsx

@@ -106,6 +106,7 @@ const VideoProgressBar = ({
   videoLength,
   videoCurrentTime,
   videoBufferEnd,
+  playing,
   setSeek,
   resetInactivityTimer,
   tokens,
@@ -121,7 +122,7 @@ const VideoProgressBar = ({
     trackGradientStart,
     trackGradientEnd,
     rangeBackground
-  } = useThemeTokens('VideoProgressBar', tokens, variant)
+  } = useThemeTokens('VideoProgressBar', tokens, variant, { playing })
 
   const videoProgressBar = React.createRef()
 

package/src/VideoPicker/VideoPicker.jsx

@@ -85,7 +85,7 @@ const VideoPicker = ({
   }, [selectedVideo])
 
   // `frame` variant should only work on larger screens
-  const isFramed = frame && [viewports.md, viewports.lg, viewports.xl].includes(viewport)
+  const isFramed = frame && [viewports.lg, viewports.xl].includes(viewport)
 
   const hasSlider = !frame && [viewports.md, viewports.lg, viewports.xl].includes(viewport)
 

package/src/shared/VideoSplash/SplashButtonWithDetails/SplashButtonWithDetails.jsx

@@ -77,6 +77,11 @@ const selectButtonContentTokens = ({
   buttonPaddingRight
 })
 
+const getLabelTokens = ({ labelFontName: fontName, labelFontWeight: fontWeight }) => ({
+  fontName,
+  fontWeight
+})
+
 const SplashButtonWithDetails = ({ label, tokens, variant, copy, videoLength }) => {
   const { buttonContentChildrenBackground } = useThemeTokens(
     'SplashButtonWithDetails',
@@ -102,7 +107,9 @@ const SplashButtonWithDetails = ({ label, tokens, variant, copy, videoLength })
           <PlayIcon size={13} color={playIconColor} />
         </PlayIconContainer>
         <DetailsContainer {...selectDetailsContainerTokens(themeTokens)}>
-          <Typography variant={{ bold: true }}>{label}</Typography>
+          <Typography variant={{ bold: true }} tokens={getLabelTokens(themeTokens)}>
+            {label}
+          </Typography>
           <Typography
             variant={{
               colour: 'secondary' /* TODO: this is not the same color as in designs */,

package/src/utils/index.js

@@ -1,7 +1,7 @@
+import { htmlAttrs } from '@telus-uds/components-base'
 import { warn, deprecate } from './logger'
 import { transformGradient } from './transforms'
 import useTypographyTheme from './useTypographyTheme'
-import htmlAttrs from './htmlAttrs'
 import media from './media'
 import ssrStyles from './ssr'
 import renderStructuredContent from './renderStructuredContent'

package/lib/Listbox/PressableItem.js

@@ -1,149 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _react = _interopRequireWildcard(require("react"));
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-var _componentsBase = require("@telus-uds/components-base");
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-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; }
-
-/* eslint-disable react/require-default-props */
-const [selectProps, selectedSystemPropTypes] = (0, _componentsBase.selectSystemProps)([_utils.htmlAttrs]);
-
-const getItemStyles = _ref => {
-  let {
-    tokens
-  } = _ref;
-  return {
-    fontFamily: `${tokens.groupFontName}${tokens.groupFontWeight}normal`,
-    fontSize: tokens.itemFontSize,
-    paddingTop: tokens.itemPaddingTop,
-    paddingBottom: tokens.itemPaddingBottom,
-    paddingLeft: tokens.itemPaddingLeft,
-    paddingRight: tokens.itemPaddingRight,
-    borderWidth: tokens.itemBorderWidth,
-    width: '100%',
-    backgroundColor: tokens.itemBackgroundColor,
-    color: tokens.groupColor,
-    display: tokens.itemDisplay,
-    outline: tokens.itemOutline,
-    textDecoration: tokens.itemTextDecoration
-  };
-};
-
-const StyledLink = /*#__PURE__*/_styledComponents.default.a.withConfig({
-  displayName: "PressableItem__StyledLink",
-  componentId: "components-web__sc-1h6cvsc-0"
-})(_ref2 => {
-  let {
-    isChild,
-    tokens
-  } = _ref2;
-  return { ...getItemStyles({
-      isChild,
-      tokens
-    }),
-    borderLeft: isChild ? `${tokens.itemBorderWidth}px solid ${tokens.itemBorderBackgroundColor}` : 'none',
-    cursor: 'pointer',
-    [`&:hover, &:focus, &:active`]: {
-      color: tokens.itemColor
-    },
-    '&:hover': {
-      backgroundColor: tokens.groupBackgroundColor
-    },
-    // Highlighting for pressable items that are not links per se
-    // TODO: find a better way to display and style a pressable link
-    '&:hover > div, &:hover > div > span': {
-      color: `${tokens.itemColor} !important`
-    },
-    '&:focus': {
-      border: `${tokens.groupBorderWidth}px solid ${tokens.itemBorderLeftColor}`,
-      borderLeft: isChild && `${tokens.itemBorderWidth}px solid ${tokens.itemBorderLeftColor}`,
-      borderRadius: !isChild && tokens.groupBorderRadius,
-      paddingLeft: !isChild && `calc(${tokens.itemPaddingLeft}px - ${tokens.groupBorderWidth}px)`,
-      paddingRight: `calc(${tokens.itemPaddingRight}px - ${tokens.groupBorderWidth}px)`,
-      paddingTop: `calc(${tokens.itemPaddingTop}px - ${tokens.groupBorderWidth}px)`,
-      paddingBottom: `calc(${tokens.itemPaddingBottom}px - ${tokens.groupBorderWidth}px)`,
-      backgroundColor: tokens.groupBackgroundColor
-    },
-    '&:active': {
-      backgroundColor: tokens.itemBorderBackgroundColor
-    }
-  };
-});
-
-const PressableItem = /*#__PURE__*/(0, _react.forwardRef)((_ref3, ref) => {
-  let {
-    children,
-    href,
-    isChild = false,
-    onBlur,
-    onPress,
-    tabIndex = 0,
-    nextItemRef,
-    prevItemRef,
-    tokens,
-    variant = {},
-    ...rest
-  } = _ref3;
-
-  const handleKeyPress = event => {
-    if (['Enter', ' '].includes(event === null || event === void 0 ? void 0 : event.key)) {
-      onPress === null || onPress === void 0 ? void 0 : onPress(event);
-    } else if ((event === null || event === void 0 ? void 0 : event.key) === 'ArrowDown' && nextItemRef !== null && nextItemRef !== void 0 && nextItemRef.current) {
-      nextItemRef.current.focus();
-    } else if ((event === null || event === void 0 ? void 0 : event.key) === 'ArrowUp' && prevItemRef !== null && prevItemRef !== void 0 && prevItemRef.current) {
-      prevItemRef.current.focus();
-    }
-  };
-
-  const systemTokens = (0, _componentsBase.useThemeTokens)('ListBox', tokens, variant, {
-    isChild,
-    hover: true
-  });
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(StyledLink, {
-    isChild: isChild,
-    tokens: systemTokens,
-    onBlur: onBlur,
-    onClick: onPress,
-    onKeyPress: handleKeyPress,
-    ref: ref,
-    tabIndex: tabIndex,
-    ...(href && {
-      href
-    }),
-    ...(onPress && {
-      onClick: onPress
-    }),
-    ...selectProps(rest),
-    children: children
-  });
-});
-PressableItem.displayName = 'PressableItem';
-PressableItem.propTypes = { ...selectedSystemPropTypes,
-  href: _propTypes.default.string,
-  isChild: _propTypes.default.bool,
-  children: _propTypes.default.node.isRequired,
-  onBlur: _propTypes.default.func,
-  onPress: _propTypes.default.func,
-  nextItemRef: _propTypes.default.object,
-  prevItemRef: _propTypes.default.object
-};
-var _default = PressableItem;
-exports.default = _default;

package/lib/utils/htmlAttrs.js

@@ -1,33 +0,0 @@
-"use strict";
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.default = void 0;
-
-var _propTypes = _interopRequireDefault(require("prop-types"));
-
-function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
-
-const htmlAttrTypes = {
-  dataSet: _propTypes.default.object,
-  id: _propTypes.default.string,
-  loading: _propTypes.default.oneOf(['eager', 'lazy']),
-  // @todo figure out if we need to enum all the possible roles or maybe use
-  // an npm package
-  role: _propTypes.default.string,
-  src: _propTypes.default.string,
-  tabIndex: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.number]),
-  testID: _propTypes.default.string,
-  title: _propTypes.default.string
-};
-var _default = {
-  types: htmlAttrTypes,
-  select: props => Object.entries(props).reduce((items, _ref) => {
-    let [key, value] = _ref;
-    return Object.keys(htmlAttrTypes).includes(key) || /^(data|aria)-/.test(key) ? { ...items,
-      [key]: value
-    } : items;
-  }, {})
-};
-exports.default = _default;

package/lib-module/Listbox/PressableItem.js

@@ -1,128 +0,0 @@
-/* eslint-disable react/require-default-props */
-import React, { forwardRef } from 'react';
-import PropTypes from 'prop-types';
-import { selectSystemProps, useThemeTokens } from '@telus-uds/components-base';
-import styled from 'styled-components';
-import { htmlAttrs } from '../utils';
-import { jsx as _jsx } from "react/jsx-runtime";
-const [selectProps, selectedSystemPropTypes] = selectSystemProps([htmlAttrs]);
-
-const getItemStyles = _ref => {
-  let {
-    tokens
-  } = _ref;
-  return {
-    fontFamily: `${tokens.groupFontName}${tokens.groupFontWeight}normal`,
-    fontSize: tokens.itemFontSize,
-    paddingTop: tokens.itemPaddingTop,
-    paddingBottom: tokens.itemPaddingBottom,
-    paddingLeft: tokens.itemPaddingLeft,
-    paddingRight: tokens.itemPaddingRight,
-    borderWidth: tokens.itemBorderWidth,
-    width: '100%',
-    backgroundColor: tokens.itemBackgroundColor,
-    color: tokens.groupColor,
-    display: tokens.itemDisplay,
-    outline: tokens.itemOutline,
-    textDecoration: tokens.itemTextDecoration
-  };
-};
-
-const StyledLink = /*#__PURE__*/styled.a.withConfig({
-  displayName: "PressableItem__StyledLink",
-  componentId: "components-web__sc-1h6cvsc-0"
-})(_ref2 => {
-  let {
-    isChild,
-    tokens
-  } = _ref2;
-  return { ...getItemStyles({
-      isChild,
-      tokens
-    }),
-    borderLeft: isChild ? `${tokens.itemBorderWidth}px solid ${tokens.itemBorderBackgroundColor}` : 'none',
-    cursor: 'pointer',
-    [`&:hover, &:focus, &:active`]: {
-      color: tokens.itemColor
-    },
-    '&:hover': {
-      backgroundColor: tokens.groupBackgroundColor
-    },
-    // Highlighting for pressable items that are not links per se
-    // TODO: find a better way to display and style a pressable link
-    '&:hover > div, &:hover > div > span': {
-      color: `${tokens.itemColor} !important`
-    },
-    '&:focus': {
-      border: `${tokens.groupBorderWidth}px solid ${tokens.itemBorderLeftColor}`,
-      borderLeft: isChild && `${tokens.itemBorderWidth}px solid ${tokens.itemBorderLeftColor}`,
-      borderRadius: !isChild && tokens.groupBorderRadius,
-      paddingLeft: !isChild && `calc(${tokens.itemPaddingLeft}px - ${tokens.groupBorderWidth}px)`,
-      paddingRight: `calc(${tokens.itemPaddingRight}px - ${tokens.groupBorderWidth}px)`,
-      paddingTop: `calc(${tokens.itemPaddingTop}px - ${tokens.groupBorderWidth}px)`,
-      paddingBottom: `calc(${tokens.itemPaddingBottom}px - ${tokens.groupBorderWidth}px)`,
-      backgroundColor: tokens.groupBackgroundColor
-    },
-    '&:active': {
-      backgroundColor: tokens.itemBorderBackgroundColor
-    }
-  };
-});
-const PressableItem = /*#__PURE__*/forwardRef((_ref3, ref) => {
-  let {
-    children,
-    href,
-    isChild = false,
-    onBlur,
-    onPress,
-    tabIndex = 0,
-    nextItemRef,
-    prevItemRef,
-    tokens,
-    variant = {},
-    ...rest
-  } = _ref3;
-
-  const handleKeyPress = event => {
-    if (['Enter', ' '].includes(event === null || event === void 0 ? void 0 : event.key)) {
-      onPress === null || onPress === void 0 ? void 0 : onPress(event);
-    } else if ((event === null || event === void 0 ? void 0 : event.key) === 'ArrowDown' && nextItemRef !== null && nextItemRef !== void 0 && nextItemRef.current) {
-      nextItemRef.current.focus();
-    } else if ((event === null || event === void 0 ? void 0 : event.key) === 'ArrowUp' && prevItemRef !== null && prevItemRef !== void 0 && prevItemRef.current) {
-      prevItemRef.current.focus();
-    }
-  };
-
-  const systemTokens = useThemeTokens('ListBox', tokens, variant, {
-    isChild,
-    hover: true
-  });
-  return /*#__PURE__*/_jsx(StyledLink, {
-    isChild: isChild,
-    tokens: systemTokens,
-    onBlur: onBlur,
-    onClick: onPress,
-    onKeyPress: handleKeyPress,
-    ref: ref,
-    tabIndex: tabIndex,
-    ...(href && {
-      href
-    }),
-    ...(onPress && {
-      onClick: onPress
-    }),
-    ...selectProps(rest),
-    children: children
-  });
-});
-PressableItem.displayName = 'PressableItem';
-PressableItem.propTypes = { ...selectedSystemPropTypes,
-  href: PropTypes.string,
-  isChild: PropTypes.bool,
-  children: PropTypes.node.isRequired,
-  onBlur: PropTypes.func,
-  onPress: PropTypes.func,
-  nextItemRef: PropTypes.object,
-  prevItemRef: PropTypes.object
-};
-export default PressableItem;

package/lib-module/utils/htmlAttrs.js

@@ -1,22 +0,0 @@
-import PropTypes from 'prop-types';
-const htmlAttrTypes = {
-  dataSet: PropTypes.object,
-  id: PropTypes.string,
-  loading: PropTypes.oneOf(['eager', 'lazy']),
-  // @todo figure out if we need to enum all the possible roles or maybe use
-  // an npm package
-  role: PropTypes.string,
-  src: PropTypes.string,
-  tabIndex: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
-  testID: PropTypes.string,
-  title: PropTypes.string
-};
-export default {
-  types: htmlAttrTypes,
-  select: props => Object.entries(props).reduce((items, _ref) => {
-    let [key, value] = _ref;
-    return Object.keys(htmlAttrTypes).includes(key) || /^(data|aria)-/.test(key) ? { ...items,
-      [key]: value
-    } : items;
-  }, {})
-};