@spaced-out/ui-design-system 0.0.60 → 0.0.62

package/lib/components/ErrorMessage/ErrorImages/index.js

@@ -0,0 +1,49 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+var _ForbiddenImage = require("./ForbiddenImage");
+Object.keys(_ForbiddenImage).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ForbiddenImage[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ForbiddenImage[key];
+    }
+  });
+});
+var _NotFoundImage = require("./NotFoundImage");
+Object.keys(_NotFoundImage).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _NotFoundImage[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _NotFoundImage[key];
+    }
+  });
+});
+var _ServerErrorImage = require("./ServerErrorImage");
+Object.keys(_ServerErrorImage).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _ServerErrorImage[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _ServerErrorImage[key];
+    }
+  });
+});
+var _UnauthorizedImage = require("./UnauthorizedImage");
+Object.keys(_UnauthorizedImage).forEach(function (key) {
+  if (key === "default" || key === "__esModule") return;
+  if (key in exports && exports[key] === _UnauthorizedImage[key]) return;
+  Object.defineProperty(exports, key, {
+    enumerable: true,
+    get: function () {
+      return _UnauthorizedImage[key];
+    }
+  });
+});

package/lib/components/ErrorMessage/ErrorImages/index.js.flow

@@ -0,0 +1,6 @@
+// @flow strict
+
+export * from './ForbiddenImage';
+export * from './NotFoundImage';
+export * from './ServerErrorImage';
+export * from './UnauthorizedImage';

package/lib/components/ErrorMessage/ErrorMessage.js

@@ -0,0 +1,45 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.ErrorMessage = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _ErrorImages = require("./ErrorImages");
+var _ErrorMessageModule = _interopRequireDefault(require("./ErrorMessage.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 ErrorMessage = _ref => {
+  let {
+    classNames,
+    children,
+    imageVariant,
+    title,
+    description,
+    customImageUrl,
+    heading,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    "data-testid": "ErrorMessage",
+    className: (0, _classify.default)(_ErrorMessageModule.default.wrapper, classNames?.wrapper)
+  }), !!imageVariant && !customImageUrl && /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_ErrorMessageModule.default.image, classNames?.image)
+  }, imageVariant === 'unauthorized' && /*#__PURE__*/React.createElement(_ErrorImages.UnauthorizedImage, null), imageVariant === 'forbidden' && /*#__PURE__*/React.createElement(_ErrorImages.ForbiddenImage, null), imageVariant === 'notFound' && /*#__PURE__*/React.createElement(_ErrorImages.NotFoundImage, null), imageVariant === 'serverError' && /*#__PURE__*/React.createElement(_ErrorImages.ServerErrorImage, null)), customImageUrl && /*#__PURE__*/React.createElement("img", {
+    className: (0, _classify.default)(_ErrorMessageModule.default.image, classNames?.image),
+    src: customImageUrl,
+    alt: "Empty State"
+  }), !!heading && /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_ErrorMessageModule.default.heading, classNames?.heading)
+  }, heading), !!title && /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_ErrorMessageModule.default.title, classNames?.title)
+  }, title), !!description && /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_ErrorMessageModule.default.description, classNames?.description)
+  }, description), !!children && /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_ErrorMessageModule.default.childrenWrapper, classNames?.children)
+  }, children));
+};
+exports.ErrorMessage = ErrorMessage;

package/lib/components/ErrorMessage/ErrorMessage.js.flow

@@ -0,0 +1,86 @@
+// @flow strict
+
+import * as React from 'react';
+
+import classify from '../../utils/classify';
+
+import {
+  ForbiddenImage,
+  NotFoundImage,
+  ServerErrorImage,
+  UnauthorizedImage,
+} from './ErrorImages';
+
+import css from './ErrorMessage.module.css';
+
+
+type ClassNames = $ReadOnly<{
+  wrapper?: string,
+  image?: string,
+  heading?: string,
+  title?: string,
+  description?: string,
+  children?: string,
+}>;
+
+export type ErrorMessageProps = {
+  classNames?: ClassNames,
+  children?: React.Node,
+  imageVariant?: 'unauthorized' | 'forbidden' | 'notFound' | 'serverError',
+  title?: React.Node,
+  description?: React.Node,
+  heading?: React.Node,
+  customImageUrl?: string,
+  ...
+};
+
+export const ErrorMessage = ({
+  classNames,
+  children,
+  imageVariant,
+  title,
+  description,
+  customImageUrl,
+  heading,
+  ...props
+}: ErrorMessageProps): React.Node => (
+  <div
+    {...props}
+    data-testid="ErrorMessage"
+    className={classify(css.wrapper, classNames?.wrapper)}
+  >
+    {!!imageVariant && !customImageUrl && (
+      <div className={classify(css.image, classNames?.image)}>
+        {imageVariant === 'unauthorized' && <UnauthorizedImage />}
+        {imageVariant === 'forbidden' && <ForbiddenImage />}
+        {imageVariant === 'notFound' && <NotFoundImage />}
+        {imageVariant === 'serverError' && <ServerErrorImage />}
+      </div>
+    )}
+    {customImageUrl && (
+      <img
+        className={classify(css.image, classNames?.image)}
+        src={customImageUrl}
+        alt="Empty State"
+      />
+    )}
+    {!!heading && (
+      <div className={classify(css.heading, classNames?.heading)}>
+        {heading}
+      </div>
+    )}
+    {!!title && (
+      <div className={classify(css.title, classNames?.title)}>{title}</div>
+    )}
+    {!!description && (
+      <div className={classify(css.description, classNames?.description)}>
+        {description}
+      </div>
+    )}
+    {!!children && (
+      <div className={classify(css.childrenWrapper, classNames?.children)}>
+        {children}
+      </div>
+    )}
+  </div>
+);

package/lib/components/ErrorMessage/ErrorMessage.module.css

@@ -0,0 +1,35 @@
+@value (colorTextSecondary, colorTextClickable) from '../../styles/variables/_color.css';
+@value (spaceMedium, spaceXSmall, spaceSmall) from '../../styles/variables/_space.css';
+@value (sizeFluid, size140) from '../../styles/variables/_size.css';
+
+.wrapper {
+  display: flex;
+  width: sizeFluid;
+  height: sizeFluid;
+  flex-flow: column;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  padding: spaceMedium;
+}
+
+.image {
+  max-width: size140;
+}
+
+.heading {
+  composes: jumboMedium from '../../styles/typography.module.css';
+  margin-bottom: spaceSmall;
+  color: colorTextClickable;
+}
+
+.title {
+  composes: subTitleMedium from '../../styles/typography.module.css';
+  margin-bottom: spaceXSmall;
+}
+
+.description {
+  composes: bodyMedium from '../../styles/typography.module.css';
+  color: colorTextSecondary;
+  margin-bottom: spaceMedium;
+}

package/lib/components/ErrorMessage/index.js

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

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

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

package/lib/components/SubMenu/SubMenu.js

@@ -66,6 +66,11 @@ const SubMenuItem = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
       onChange && onChange(menuKey);
     }
   };
+  const onKeyDownHandler = e => {
+    if (e.key === 'Enter') {
+      onChangeHandler();
+    }
+  };
   const selected = selectedMenuKey === menuKey;
   const getNamedComp = comp => {
     const childrenArray = React.Children.toArray(children);
@@ -88,8 +93,10 @@ const SubMenuItem = /*#__PURE__*/React.forwardRef((_ref4, ref) => {
       [_SubMenuModule.default.selected]: selected,
       [_SubMenuModule.default.disabled]: disabled
     }, classNames?.wrapper),
+    onKeyDown: onKeyDownHandler,
     onClick: onChangeHandler,
-    ref: ref
+    ref: ref,
+    tabIndex: disabled ? '-1' : 0
   }), /*#__PURE__*/React.createElement("div", {
     className: _SubMenuModule.default.menuIconName
   }, getNamedComp('SubMenuItemIcon'), getNamedComp('SubMenuItemText')), getNamedComp('SubMenuItemAction'));
@@ -114,6 +121,11 @@ const SubMenuGroup = _ref5 => {
       onChange(value);
     }
   };
+  const onKeyDownHandlerHeader = e => {
+    if (e.key === 'Enter') {
+      collapseHandler();
+    }
+  };
   const childrenWithProps = React.Children.map(children, child => {
     if ( /*#__PURE__*/React.isValidElement(child)) {
       const {
@@ -131,7 +143,9 @@ const SubMenuGroup = _ref5 => {
     className: (0, _classify.default)(_SubMenuModule.default.subMenuGroupWrapper, classNames?.wrapper)
   }, /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_SubMenuModule.default.subMenuGroupHeader, classNames?.groupHeader),
-    onClick: collapseHandler
+    onClick: collapseHandler,
+    onKeyDown: onKeyDownHandlerHeader,
+    tabindex: "0"
   }, /*#__PURE__*/React.createElement(_Text.SubTitleExtraSmall, {
     color: _Text.TEXT_COLORS.inverseSecondary,
     className: _SubMenuModule.default.groupTitle

package/lib/components/SubMenu/SubMenu.js.flow

@@ -97,6 +97,12 @@ export const SubMenuItem: React$AbstractComponent<
       }
     };
 
+    const onKeyDownHandler = (e) => {
+      if (e.key === 'Enter') {
+        onChangeHandler();
+      }
+    };
+
     const selected = selectedMenuKey === menuKey;
 
     const getNamedComp = (comp: string) => {
@@ -129,8 +135,10 @@ export const SubMenuItem: React$AbstractComponent<
           },
           classNames?.wrapper,
         )}
+        onKeyDown={onKeyDownHandler}
         onClick={onChangeHandler}
         ref={ref}
+        tabIndex={disabled ? '-1' : 0}
       >
         <div className={css.menuIconName}>
           {getNamedComp('SubMenuItemIcon')}
@@ -176,6 +184,11 @@ export const SubMenuGroup = ({
       onChange(value);
     }
   };
+  const onKeyDownHandlerHeader = (e) => {
+    if (e.key === 'Enter') {
+      collapseHandler();
+    }
+  };
   const childrenWithProps = React.Children.map(children, (child) => {
     if (React.isValidElement(child)) {
       const {disabled: disabledChild} = child.props;
@@ -192,6 +205,8 @@ export const SubMenuGroup = ({
       <div
         className={classify(css.subMenuGroupHeader, classNames?.groupHeader)}
         onClick={collapseHandler}
+        onKeyDown={onKeyDownHandlerHeader}
+        tabindex="0"
       >
         <SubTitleExtraSmall
           color={TEXT_COLORS.inverseSecondary}

package/lib/components/SubMenu/SubMenu.module.css

@@ -1,14 +1,19 @@
 @value ( size34, size60, sizeFluid, sizeFullViewportHeight) from '../../styles/variables/_size.css';
 
 @value (
+  colorFillNone,
+  colorFillPrimary,
+  colorFocusPrimary,
   colorNeutralDarkest,
   colorTextInverseSecondary,
   colorTextInversePrimary,
-  colorSubMenuBackgroundDefault
+  colorSubMenuBackgroundDefault,
+  colorSuccess,
+  colorFocusDanger
    ) from '../../styles/variables/_color.css';
 @value ( spaceNone, spaceXSmall, spaceSmall, spaceMedium ) from '../../styles/variables/_space.css';
 
-@value ( borderRadiusSmall, borderWidthPrimary) from '../../styles/variables/_border.css';
+@value ( borderWidthTertiary, borderRadiusSmall, borderWidthPrimary, borderRadiusMedium, borderWidthNone) from '../../styles/variables/_border.css';
 
 .subMenuWrapper {
   background: colorSubMenuBackgroundDefault;
@@ -50,7 +55,21 @@
   flex-direction: row;
   justify-content: space-between;
   cursor: pointer;
-  padding: spaceNone spaceXSmall spaceNone spaceXSmall;
+  padding: spaceXSmall;
+  border-radius: borderRadiusSmall;
+  border: borderWidthTertiary solid colorFillNone;
+}
+
+.subMenuGroupHeader:focus-within {
+  border: borderWidthTertiary solid colorFocusPrimary;
+}
+
+.subMenuGroupHeader:focus-visible {
+  outline: none;
+}
+
+.subMenuGroupHeader:focus {
+  border: borderWidthTertiary solid colorFocusPrimary;
 }
 
 .groupTitle {
@@ -60,7 +79,8 @@
 .subMenuGroup {
   display: flex;
   flex-direction: column;
-  margin-top: spaceXSmall;
+  margin-top: spaceMedium;
+  gap: spaceMedium;
 }
 
 .subMenuGroup.collapsed {
@@ -83,12 +103,23 @@
   width: sizeFluid;
   cursor: pointer;
   padding: spaceXSmall;
+  box-sizing: border-box;
+  border: borderWidthTertiary solid colorFillNone;
 }
 
 .menuItem:not(.selected):hover {
   color: colorTextInversePrimary;
 }
 
+.menuItem:focus-visible {
+  outline: none;
+}
+
+.menuItem:focus {
+  background: colorNeutralDarkest;
+  border: borderWidthTertiary solid colorFocusPrimary;
+}
+
 .menuIcon {
   color: inherit;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@spaced-out/ui-design-system",
-  "version": "0.0.60",
+  "version": "0.0.62",
   "main": "index.js",
   "description": "Sense UI components library",
   "author": {