@spaced-out/ui-design-system 0.1.38 → 0.1.40

package/CHANGELOG.md

@@ -2,6 +2,30 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+### [0.1.40](https://github.com/spaced-out/ui-design-system/compare/v0.1.39...v0.1.40) (2023-08-02)
+
+
+### Features
+
+* new sticky footer component and card enhancements  ([#130](https://github.com/spaced-out/ui-design-system/issues/130)) ([b683fc8](https://github.com/spaced-out/ui-design-system/commit/b683fc8158290a2a93f66387776a64cf55581450))
+
+
+### Bug Fixes
+
+* accessibility fixes for table ([41adca4](https://github.com/spaced-out/ui-design-system/commit/41adca49344a2495ac07ca884124bf939c4a7028))
+
+### [0.1.39](https://github.com/spaced-out/ui-design-system/compare/v0.1.38...v0.1.39) (2023-07-19)
+
+
+### Features
+
+* table top bottom action bar and other enhancements ([#129](https://github.com/spaced-out/ui-design-system/issues/129)) ([6d6a281](https://github.com/spaced-out/ui-design-system/commit/6d6a281d092c5d34e97dbeba79d23e449ae01406))
+
+
+### Bug Fixes
+
+* typo fixes ([2c028d3](https://github.com/spaced-out/ui-design-system/commit/2c028d3fc6e02ed30f4c259ee4396bfcbe1e3eed))
+
 ### [0.1.38](https://github.com/spaced-out/ui-design-system/compare/v0.1.37...v0.1.38) (2023-07-19)
 
 

package/lib/components/Card/Card.js

@@ -3,7 +3,7 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.PADDING_SIZES = exports.ClickableCard = exports.Card = void 0;
+exports.PADDING_SIZES = exports.ClickableCard = exports.CardTitle = exports.CardHeader = exports.CardFooter = exports.CardContent = exports.CardActions = exports.Card = void 0;
 var React = _interopRequireWildcard(require("react"));
 var SPACES = _interopRequireWildcard(require("../../styles/variables/_space"));
 var _classify = _interopRequireDefault(require("../../utils/classify"));
@@ -23,7 +23,62 @@ const getPaddingValue = size => {
   const spaceKey = 'space' + (0, _string.capitalize)(size);
   return SPACES[spaceKey] || SPACES['spaceNone'];
 };
-const Card = /*#__PURE__*/React.forwardRef((_ref, ref) => {
+const CardHeader = _ref => {
+  let {
+    className,
+    children,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: (0, _classify.default)(_CardModule.default.cardHeader, className)
+  }), children);
+};
+exports.CardHeader = CardHeader;
+const CardTitle = _ref2 => {
+  let {
+    className,
+    children,
+    ...props
+  } = _ref2;
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: (0, _classify.default)(_CardModule.default.cardTitle, className)
+  }), children);
+};
+exports.CardTitle = CardTitle;
+const CardActions = _ref3 => {
+  let {
+    className,
+    children,
+    ...props
+  } = _ref3;
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: (0, _classify.default)(_CardModule.default.cardActions, className)
+  }), children);
+};
+exports.CardActions = CardActions;
+const CardFooter = _ref4 => {
+  let {
+    className,
+    children,
+    ...props
+  } = _ref4;
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: (0, _classify.default)(_CardModule.default.cardFooter, className)
+  }), children);
+};
+exports.CardFooter = CardFooter;
+const CardContent = _ref5 => {
+  let {
+    className,
+    children,
+    ...props
+  } = _ref5;
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: (0, _classify.default)(_CardModule.default.cardContent, className)
+  }), children);
+};
+exports.CardContent = CardContent;
+const Card = /*#__PURE__*/React.forwardRef((_ref6, ref) => {
   let {
     children,
     classNames,
@@ -32,7 +87,7 @@ const Card = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     paddingBottom = 'medium',
     paddingLeft = 'medium',
     ...props
-  } = _ref;
+  } = _ref6;
   return /*#__PURE__*/React.createElement("div", _extends({}, props, {
     style: {
       '--card-padding-top': getPaddingValue(paddingTop),
@@ -46,13 +101,13 @@ const Card = /*#__PURE__*/React.forwardRef((_ref, ref) => {
   }), children);
 });
 exports.Card = Card;
-const ClickableCard = /*#__PURE__*/React.forwardRef((_ref2, ref) => {
+const ClickableCard = /*#__PURE__*/React.forwardRef((_ref7, ref) => {
   let {
     classNames,
     onClick,
     disabled = false,
     ...props
-  } = _ref2;
+  } = _ref7;
   const componentRef = React.useRef(null);
   React.useImperativeHandle(ref, () => componentRef.current);
   React.useEffect(() => {

package/lib/components/Card/Card.js.flow

@@ -29,6 +29,12 @@ export type CardProps = {
   ...
 };
 
+export type CardChildProps = {
+  className?: string,
+  children: React.Node,
+  ...
+};
+
 export type ClickableCardProps = {
   ...CardProps,
   onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
@@ -41,6 +47,56 @@ const getPaddingValue = (size: PaddingSizeType): string => {
   return SPACES[spaceKey] || SPACES['spaceNone'];
 };
 
+export const CardHeader = ({
+  className,
+  children,
+  ...props
+}: CardChildProps): React.Node => (
+  <div {...props} className={classify(css.cardHeader, className)}>
+    {children}
+  </div>
+);
+
+export const CardTitle = ({
+  className,
+  children,
+  ...props
+}: CardChildProps): React.Node => (
+  <div {...props} className={classify(css.cardTitle, className)}>
+    {children}
+  </div>
+);
+
+export const CardActions = ({
+  className,
+  children,
+  ...props
+}: CardChildProps): React.Node => (
+  <div {...props} className={classify(css.cardActions, className)}>
+    {children}
+  </div>
+);
+
+export const CardFooter = ({
+  className,
+  children,
+  ...props
+}: CardChildProps): React.Node => (
+  <div {...props} className={classify(css.cardFooter, className)}>
+    {children}
+  </div>
+);
+
+export const CardContent = ({
+  className,
+  children,
+  ...props
+}: CardChildProps): React.Node => (
+  <div {...props} className={classify(css.cardContent, className)}>
+    {children}
+  </div>
+);
+
 export const Card: React$AbstractComponent<CardProps, HTMLDivElement> =
   React.forwardRef<CardProps, HTMLDivElement>(
     (

package/lib/components/Card/Card.module.css

@@ -1,16 +1,70 @@
 @value (colorBackgroundTertiary, colorFillPrimary, colorBorderSecondary, colorFocusPrimary) from '../../styles/variables/_color.css';
 @value (borderRadiusMedium, borderWidthNone, borderWidthTertiary) from '../../styles/variables/_border.css';
-@value (spaceSmall, spaceMedium, spaceLarge) from '../../styles/variables/_space.css';
+@value (spaceSmall, spaceMedium, spaceLarge, spaceXSmall) from '../../styles/variables/_space.css';
+@value (size58, sizeFluid) from '../../styles/variables/_size.css';
 
 .cardWrapper {
   --card-padding-top: spaceMedium;
   --card-padding-right: spaceMedium;
   --card-padding-bottom: spaceMedium;
   --card-padding-left: spaceMedium;
+}
+
+.cardWrapper {
   display: flex;
   composes: borderPrimary from '../../styles/border.module.css';
   background-color: colorBackgroundTertiary;
   border-radius: borderRadiusMedium;
+}
+
+.cardWrapper:not(:has(.cardHeader, .cardFooter, .cardContent)) {
+  padding-top: var(--card-padding-top);
+  padding-right: var(--card-padding-right);
+  padding-bottom: var(--card-padding-bottom);
+  padding-left: var(--card-padding-left);
+}
+
+.cardWrapper:has(.cardHeader, .cardFooter, .cardContent) {
+  flex-flow: column;
+}
+
+.cardHeader {
+  display: flex;
+  justify-content: space-between;
+  width: sizeFluid;
+  align-items: center;
+  min-height: size58;
+  composes: subTitleSmall from '../../styles/typography.module.css';
+  composes: borderBottomPrimary from '../../styles/border.module.css';
+  padding: spaceSmall spaceXSmall spaceSmall spaceSmall;
+  gap: spaceXSmall;
+}
+
+.cardFooter {
+  display: flex;
+  justify-content: space-between;
+  width: sizeFluid;
+  align-items: center;
+  min-height: size58;
+  composes: subTitleSmall from '../../styles/typography.module.css';
+  composes: borderTopPrimary from '../../styles/border.module.css';
+  padding: spaceSmall spaceXSmall spaceSmall spaceSmall;
+  gap: spaceXSmall;
+  margin-top: auto;
+}
+
+.cardTitle {
+  display: flex;
+}
+
+.cardActions {
+  display: flex;
+  gap: spaceXSmall;
+  margin-left: auto;
+}
+
+.cardContent {
+  display: flex;
   padding-top: var(--card-padding-top);
   padding-right: var(--card-padding-right);
   padding-bottom: var(--card-padding-bottom);

package/lib/components/Dropdown/SimpleDropdown.js

@@ -52,7 +52,6 @@ const SimpleDropdownBase = (props, ref) => {
   }));
   return /*#__PURE__*/React.createElement(_Dropdown.Dropdown, _extends({}, inputProps, {
     classNames: classNames,
-    label: "Form Label",
     size: size,
     placeholder: placeholder,
     onChange: handleOptionChange,

package/lib/components/Dropdown/SimpleDropdown.js.flow

@@ -106,7 +106,6 @@ const SimpleDropdownBase = (props: SimpleDropdownProps, ref) => {
     <Dropdown
       {...inputProps}
       classNames={classNames}
-      label="Form Label"
       size={size}
       placeholder={placeholder}
       onChange={handleOptionChange}

package/lib/components/Pagination/PaginationItem.js

@@ -43,7 +43,8 @@ const PaginationButton = props => {
         onClick: onClick,
         disabled: disabled,
         ref: paginationBtnRef,
-        iconLeftName: "chevrons-left"
+        iconLeftName: "chevrons-left",
+        ariaLabel: "First page"
       });
     case 'previous':
       return /*#__PURE__*/React.createElement(_Button.Button, {
@@ -60,7 +61,8 @@ const PaginationButton = props => {
         onClick: onClick,
         disabled: disabled,
         ref: paginationBtnRef,
-        iconLeftName: "chevron-left"
+        iconLeftName: "chevron-left",
+        ariaLabel: "Previous page"
       });
     case 'page':
       return /*#__PURE__*/React.createElement(_Button.Button, {
@@ -98,7 +100,8 @@ const PaginationButton = props => {
         onClick: onClick,
         disabled: disabled,
         ref: paginationBtnRef,
-        iconLeftName: "chevron-right"
+        iconLeftName: "chevron-right",
+        ariaLabel: "Next page"
       });
     case 'last':
       return /*#__PURE__*/React.createElement(_Button.Button, {
@@ -115,7 +118,8 @@ const PaginationButton = props => {
         onClick: onClick,
         disabled: disabled,
         ref: paginationBtnRef,
-        iconLeftName: "chevrons-right"
+        iconLeftName: "chevrons-right",
+        ariaLabel: "Last page"
       });
     default:
       break;

package/lib/components/Pagination/PaginationItem.js.flow

@@ -35,6 +35,7 @@ export const PaginationButton = (props: PaginationItemProps): React.Node => {
         disabled={disabled}
         ref={paginationBtnRef}
         iconLeftName="chevrons-left"
+        ariaLabel="First page"
       ></Button>
     );
   case 'previous':
@@ -50,6 +51,7 @@ export const PaginationButton = (props: PaginationItemProps): React.Node => {
         disabled={disabled}
         ref={paginationBtnRef}
         iconLeftName="chevron-left"
+        ariaLabel="Previous page"
       ></Button>
     );
   case 'page':
@@ -88,6 +90,7 @@ export const PaginationButton = (props: PaginationItemProps): React.Node => {
         disabled={disabled}
         ref={paginationBtnRef}
         iconLeftName="chevron-right"
+        ariaLabel="Next page"
       ></Button>
     );
   case 'last':
@@ -103,6 +106,7 @@ export const PaginationButton = (props: PaginationItemProps): React.Node => {
         disabled={disabled}
         ref={paginationBtnRef}
         iconLeftName="chevrons-right"
+        ariaLabel="Last page"
       ></Button>
     );
 

package/lib/components/Stepper/Step/Step.js

@@ -23,7 +23,9 @@ const Step = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     last,
     classNames,
     onClick,
-    allowClick
+    allowClick,
+    iconName,
+    iconType
   } = _ref;
   const childrenArray = React.Children.toArray(children).filter(Boolean);
   const stepContent = childrenArray.map(stepContent => /*#__PURE__*/React.cloneElement(stepContent, {
@@ -50,13 +52,24 @@ const Step = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       [_StepperModule.default.completed]: completed,
       [_StepperModule.default.expanded]: expanded,
       [_StepperModule.default.last]: last,
-      [_StepperModule.default.disabled]: disabled
+      [_StepperModule.default.disabled]: disabled,
+      [_StepperModule.default.withIcon]: !!iconName
     }, classNames?.stepCounter)
   }, completed && !active ? /*#__PURE__*/React.createElement(_Icon.Icon, {
     name: "check",
-    color: "inversePrimary",
-    size: "small"
-  }) : /*#__PURE__*/React.createElement(React.Fragment, null, (index + 1).toString())), /*#__PURE__*/React.createElement("div", {
+    color: iconName ? 'success' : 'inversePrimary',
+    type: "solid",
+    size: iconName ? 'medium' : 'small'
+  }) : /*#__PURE__*/React.createElement(React.Fragment, null, iconName ? /*#__PURE__*/React.createElement(_Icon.Icon, {
+    name: iconName,
+    className: (0, _classify.default)(_StepperModule.default.stepIcon, {
+      [_StepperModule.default.selected]: active,
+      [_StepperModule.default.completed]: completed,
+      [_StepperModule.default.disabled]: disabled
+    }),
+    size: "medium",
+    type: iconType
+  }) : (index + 1).toString())), /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_StepperModule.default.stepContent, classNames?.content)
   }, stepContent));
 });

package/lib/components/Stepper/Step/Step.js.flow

@@ -3,6 +3,7 @@
 import * as React from 'react';
 
 import classify from '../../../utils/classify';
+import type {IconType} from '../../Icon';
 import {Icon} from '../../Icon';
 
 import css from '../Stepper.module.css';
@@ -25,6 +26,8 @@ export type StepProps = {
   classNames?: ClassNames,
   allowClick?: boolean,
   onClick?: (idx: number, e?: ?SyntheticEvent<HTMLElement>) => mixed,
+  iconName?: string,
+  iconType?: IconType,
 };
 
 export const Step: React$AbstractComponent<StepProps, HTMLDivElement> =
@@ -41,6 +44,8 @@ export const Step: React$AbstractComponent<StepProps, HTMLDivElement> =
         classNames,
         onClick,
         allowClick,
+        iconName,
+        iconType,
       }: StepProps,
       ref,
     ): React.Node => {
@@ -82,14 +87,35 @@ export const Step: React$AbstractComponent<StepProps, HTMLDivElement> =
                 [css.expanded]: expanded,
                 [css.last]: last,
                 [css.disabled]: disabled,
+                [css.withIcon]: !!iconName,
               },
               classNames?.stepCounter,
             )}
           >
             {completed && !active ? (
-              <Icon name="check" color="inversePrimary" size="small" />
+              <Icon
+                name="check"
+                color={iconName ? 'success' : 'inversePrimary'}
+                type="solid"
+                size={iconName ? 'medium' : 'small'}
+              />
             ) : (
-              <React.Fragment>{(index + 1).toString()}</React.Fragment>
+              <React.Fragment>
+                {iconName ? (
+                  <Icon
+                    name={iconName}
+                    className={classify(css.stepIcon, {
+                      [css.selected]: active,
+                      [css.completed]: completed,
+                      [css.disabled]: disabled,
+                    })}
+                    size="medium"
+                    type={iconType}
+                  />
+                ) : (
+                  (index + 1).toString()
+                )}
+              </React.Fragment>
             )}
           </div>
           <div className={classify(css.stepContent, classNames?.content)}>

package/lib/components/Stepper/Stepper.module.css

@@ -39,6 +39,7 @@
 .stepWrapper {
   position: relative;
   display: flex;
+  align-items: baseline;
   gap: spaceSmall;
   width: sizeFluid;
 }
@@ -77,6 +78,28 @@
   color: colorTextDisabled;
 }
 
+.stepWrapperCounter.withIcon {
+  border: initial;
+  border-radius: initial;
+  background-color: initial;
+}
+
+.stepIcon {
+  color: inherit;
+}
+
+.stepIcon.selected {
+  color: colorFillPrimary;
+}
+
+.stepIcon.completed {
+  color: colorSuccessDark;
+}
+
+.stepIcon.disabled {
+  color: colorTextDisabled;
+}
+
 .stepContent {
   display: flex;
   flex-flow: column;

package/lib/components/StickyBar/StickyBar.js

@@ -0,0 +1,52 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StickyBarRightSlot = exports.StickyBarLeftSlot = exports.StickyBar = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _StickyBarModule = _interopRequireDefault(require("./StickyBar.module.css"));
+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; }
+function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
+const StickyBarLeftSlot = _ref => {
+  let {
+    className,
+    children,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: (0, _classify.default)(_StickyBarModule.default.leftSlot, className)
+  }), children);
+};
+exports.StickyBarLeftSlot = StickyBarLeftSlot;
+const StickyBarRightSlot = _ref2 => {
+  let {
+    className,
+    children,
+    ...props
+  } = _ref2;
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    className: (0, _classify.default)(_StickyBarModule.default.rightSlot, className)
+  }), children);
+};
+exports.StickyBarRightSlot = StickyBarRightSlot;
+const StickyBar = /*#__PURE__*/React.forwardRef((_ref3, ref) => {
+  let {
+    className,
+    children,
+    position = 'bottom',
+    ...props
+  } = _ref3;
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    ref: ref,
+    "data-testid": "StickyBar",
+    className: (0, _classify.default)(_StickyBarModule.default.wrapper, {
+      [_StickyBarModule.default.top]: position === 'top',
+      [_StickyBarModule.default.bottom]: position === 'bottom'
+    }, className)
+  }), children);
+});
+exports.StickyBar = StickyBar;

package/lib/components/StickyBar/StickyBar.js.flow

@@ -0,0 +1,67 @@
+// @flow strict
+
+import * as React from 'react';
+
+import classify from '../../utils/classify';
+
+import css from './StickyBar.module.css';
+
+
+export type StickyBarProps = {
+  className?: string,
+  children: React.Node,
+  position?: 'top' | 'bottom',
+  ...
+};
+
+export type StickyBarChildProps = {
+  className?: string,
+  children: React.Node,
+  ...
+};
+
+export const StickyBarLeftSlot = ({
+  className,
+  children,
+  ...props
+}: StickyBarChildProps): React.Node => (
+  <div {...props} className={classify(css.leftSlot, className)}>
+    {children}
+  </div>
+);
+
+export const StickyBarRightSlot = ({
+  className,
+  children,
+  ...props
+}: StickyBarChildProps): React.Node => (
+  <div {...props} className={classify(css.rightSlot, className)}>
+    {children}
+  </div>
+);
+
+export const StickyBar: React$AbstractComponent<
+  StickyBarProps,
+  HTMLDivElement,
+> = React.forwardRef<StickyBarProps, HTMLDivElement>(
+  (
+    {className, children, position = 'bottom', ...props}: StickyBarProps,
+    ref,
+  ) => (
+    <div
+      {...props}
+      ref={ref}
+      data-testid="StickyBar"
+      className={classify(
+        css.wrapper,
+        {
+          [css.top]: position === 'top',
+          [css.bottom]: position === 'bottom',
+        },
+        className,
+      )}
+    >
+      {children}
+    </div>
+  ),
+);

package/lib/components/StickyBar/StickyBar.module.css

@@ -0,0 +1,28 @@
+@value (colorFillPrimary, colorBackgroundTertiary) from '../../styles/variables/_color.css';
+@value (sizeFluid) from '../../styles/variables/_size.css';
+@value (spaceLarge, spaceMedium, spaceXSmall, spaceSmall) from '../../styles/variables/_space.css';
+
+.wrapper {
+  display: flex;
+  width: sizeFluid;
+  align-items: center;
+  justify-content: space-between;
+  padding: spaceMedium spaceLarge;
+  gap: spaceXSmall;
+  background: colorBackgroundTertiary;
+}
+
+.top {
+  composes: borderBottomPrimary from '../../styles/border.module.css';
+}
+
+.bottom {
+  composes: borderTopPrimary from '../../styles/border.module.css';
+}
+
+.leftSlot,
+.rightSlot {
+  display: flex;
+  align-items: center;
+  gap: spaceSmall;
+}

package/lib/components/StickyBar/index.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _StickyBar = require("./StickyBar");
+Object.keys(_StickyBar).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _StickyBar[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _StickyBar[key];
+    }
+  });
+});

package/lib/components/StickyBar/index.js.flow

@@ -0,0 +1,3 @@
+// @flow strict
+
+export * from './StickyBar';

package/lib/components/Table/DefaultRow.js

@@ -68,7 +68,8 @@ function DefaultRow(_ref2) {
   }, /*#__PURE__*/React.createElement(_Checkbox.Checkbox, {
     checked: selected ? true : false,
     onChange: onSelect,
-    disabled: disabled
+    disabled: disabled,
+    ariaLabel: "Select row"
   })), headers.map((item, index) => {
     const {
       key,