@spaced-out/ui-design-system 0.0.22 → 0.0.23

package/CHANGELOG.md

@@ -2,6 +2,28 @@
 
 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.0.23](https://github.com/spaced-out/ui-design-system/compare/v0.0.23-beta.0...v0.0.23) (2023-02-14)
+
+
+### Bug Fixes
+
+* import fixes for avataar ([1880ed7](https://github.com/spaced-out/ui-design-system/commit/1880ed760283e48347b68c220a7ba11a54dfcd4f))
+* status support for avataar ([e877b88](https://github.com/spaced-out/ui-design-system/commit/e877b88c326262f9738da89457bd417d4f684002))
+
+### [0.0.23-beta.0](https://github.com/spaced-out/ui-design-system/compare/v0.0.22...v0.0.23-beta.0) (2023-02-14)
+
+
+### Features
+
+* [GDS-118] sub menu ([#61](https://github.com/spaced-out/ui-design-system/issues/61)) ([7e32aae](https://github.com/spaced-out/ui-design-system/commit/7e32aaebb5427188e8e3f35f5fcd7066557be579))
+* status indicator component ([7f6b0bd](https://github.com/spaced-out/ui-design-system/commit/7f6b0bdcb0c5506f9f5c4c3fcc50206073f4eabe))
+
+
+### Bug Fixes
+
+* chip states and chip truncate text fixes ([16573d2](https://github.com/spaced-out/ui-design-system/commit/16573d24ff201335c33a888aff3d7cf3dd36a133))
+* tab onhover and icon only center ([#64](https://github.com/spaced-out/ui-design-system/issues/64)) ([148606a](https://github.com/spaced-out/ui-design-system/commit/148606af18fa7808612236bd0cb34a61908a2f49))
+
 ### [0.0.22](https://github.com/spaced-out/ui-design-system/compare/v0.0.21...v0.0.22) (2023-02-09)
 
 

package/design-tokens/color/app-color.json

@@ -162,6 +162,13 @@
         }
       }
     },
+    "sub-menu": {
+      "background": {
+        "default": {
+          "value": "{baseColor.indigo.920.value}"
+        }
+      }
+    },
     "gray.lightest": {
       "value": "{baseColor.gray.75.value}"
     },

package/design-tokens/size/base-size.json

@@ -69,6 +69,9 @@
     "240": {
       "value": "240px"
     },
+    "260": {
+      "value": "260px"
+    },
     "276": {
       "value": "276px"
     },
@@ -98,6 +101,9 @@
     },
     "fluid": {
       "value": "100%"
+    },
+    "fullViewportHeight": {
+      "value": "100vh"
     }
   }
 }

package/lib/components/Avatar/Avatar.js

@@ -9,6 +9,7 @@ var _Text = require("../../components/Text");
 var _color = require("../../styles/variables/_color");
 var _classify = _interopRequireDefault(require("../../utils/classify"));
 var _Icon = require("../Icon");
+var _StatusIndicator = require("../StatusIndicator");
 var _AvatarModule = _interopRequireDefault(require("./Avatar.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); }
@@ -66,14 +67,20 @@ const AvatarConditionalContent = _ref2 => {
     iconName,
     size,
     iconType,
-    color = 'blue'
+    color = 'blue',
+    status
   } = _ref2;
   return /*#__PURE__*/React.createElement("div", {
     className: _AvatarModule.default.innerContainer,
     style: {
       background: AVATAR_COLOR[color]
     }
-  }, imageSrc ? /*#__PURE__*/React.createElement("img", {
+  }, !!status && /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_AvatarModule.default.statusIndicatorWrapper, _AvatarModule.default[size])
+  }, /*#__PURE__*/React.createElement(_StatusIndicator.StatusIndicator, {
+    status: status,
+    withBorder: true
+  })), imageSrc ? /*#__PURE__*/React.createElement("img", {
     src: imageSrc,
     alt: "Avatar",
     className: _AvatarModule.default.avatar
@@ -96,7 +103,8 @@ const Avatar = _ref3 => {
     iconName,
     iconType,
     color,
-    ring = false
+    ring = false,
+    status
   } = _ref3;
   return /*#__PURE__*/React.createElement("div", {
     className: (0, _classify.default)(_AvatarModule.default.container, {
@@ -115,14 +123,16 @@ const Avatar = _ref3 => {
     iconName: iconName,
     iconType: iconType,
     color: color,
-    size: size
+    size: size,
+    status: status
   }))) : /*#__PURE__*/React.createElement(AvatarConditionalContent, {
     imageSrc: imageSrc,
     text: text,
     iconName: iconName,
     iconType: iconType,
     color: color,
-    size: size
+    size: size,
+    status: status
   }));
 };
 exports.Avatar = Avatar;

package/lib/components/Avatar/Avatar.js.flow

@@ -18,6 +18,8 @@ import {
 import classify from '../../utils/classify';
 import type {IconType} from '../Icon';
 import {Icon} from '../Icon';
+import type {StatusSemanticType} from '../StatusIndicator';
+import {StatusIndicator} from '../StatusIndicator';
 
 import css from './Avatar.module.css';
 
@@ -55,6 +57,7 @@ export type AvatarProps = {
   iconName?: string,
   iconType?: IconType,
   ring?: boolean,
+  status?: StatusSemanticType,
 };
 
 const getAvatarText = (text = '') => {
@@ -96,6 +99,7 @@ export type AvatarContentProps = {
   size: AvatarSize,
   color?: AvatarColorType,
   ring?: boolean,
+  status?: StatusSemanticType,
 };
 
 const AvatarConditionalContent = ({
@@ -105,8 +109,15 @@ const AvatarConditionalContent = ({
   size,
   iconType,
   color = 'blue',
+  status,
 }: AvatarContentProps) => (
   <div className={css.innerContainer} style={{background: AVATAR_COLOR[color]}}>
+    {!!status && (
+      <div className={classify(css.statusIndicatorWrapper, css[size])}>
+        <StatusIndicator status={status} withBorder />
+      </div>
+    )}
+
     {imageSrc ? (
       <img src={imageSrc} alt="Avatar" className={css.avatar}></img>
     ) : iconName ? (
@@ -127,6 +138,7 @@ export const Avatar = ({
   iconType,
   color,
   ring = false,
+  status,
 }: AvatarProps): React.Node => (
   <div
     className={classify(
@@ -150,6 +162,7 @@ export const Avatar = ({
             iconType={iconType}
             color={color}
             size={size}
+            status={status}
           />
         </div>
       </div>
@@ -161,6 +174,7 @@ export const Avatar = ({
         iconType={iconType}
         color={color}
         size={size}
+        status={status}
       />
     )}
   </div>

package/lib/components/Avatar/Avatar.module.css

@@ -1,7 +1,7 @@
 @value (colorFillPrimary, colorBackgroundTertiary, colorInformation) from '../../styles/variables/_color.css';
 @value ( size34, size42, size60, sizeFluid) from '../../styles/variables/_size.css';
 @value (borderRadiusCircle, borderRadiusLarge, borderRadiusXLarge, borderWidthSecondary) from '../../styles/variables/_border.css';
-@value (spaceXXSmall, spaceXSmall) from '../../styles/variables/_space.css';
+@value (spaceNone, spaceXXSmall, spaceXSmall) from '../../styles/variables/_space.css';
 
 .container {
   border-radius: borderRadiusCircle;
@@ -79,9 +79,29 @@
 
 .innerContainer {
   display: flex;
+  position: relative;
   border-radius: borderRadiusCircle;
   width: sizeFluid;
   height: sizeFluid;
   align-items: center;
   justify-content: center;
 }
+
+.statusIndicatorWrapper {
+  position: absolute;
+}
+
+.statusIndicatorWrapper.large {
+  top: calc(spaceXXSmall / 2);
+  right: calc(spaceXXSmall / 2);
+}
+
+.statusIndicatorWrapper.medium {
+  top: spaceNone;
+  right: spaceNone;
+}
+
+.statusIndicatorWrapper.small {
+  top: calc((spaceXXSmall / 2) * -1);
+  right: calc((spaceXXSmall / 2) * -1);
+}

package/lib/components/Chip/Chip.js

@@ -7,6 +7,7 @@ exports.Chip = exports.CHIP_SEMANTIC = void 0;
 var React = _interopRequireWildcard(require("react"));
 var _classify = require("../../utils/classify");
 var _Icon = require("../Icon");
+var _Truncate = require("../Truncate");
 var _ChipModule = _interopRequireDefault(require("./Chip.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); }
@@ -31,6 +32,7 @@ const Chip = _ref => {
     iconType = 'regular',
     dismissable = false,
     onDismiss = () => null,
+    onClick,
     disabled
   } = _ref;
   return /*#__PURE__*/React.createElement("div", {
@@ -47,18 +49,24 @@ const Chip = _ref => {
       [_ChipModule.default.dismissable]: dismissable,
       [_ChipModule.default.withIcon]: !!iconName && size !== 'small',
       [_ChipModule.default.disabled]: disabled
-    }, classNames?.wrapper)
+    }, classNames?.wrapper),
+    onClick: onClick
   }, iconName && size !== 'small' && /*#__PURE__*/React.createElement(_Icon.Icon, {
     className: _ChipModule.default.chipIcon,
     name: iconName,
     type: iconType,
     size: "small"
-  }), children, dismissable && size !== 'small' && /*#__PURE__*/React.createElement(_Icon.Icon, {
+  }), /*#__PURE__*/React.createElement(_Truncate.Truncate, null, children), dismissable && size !== 'small' && /*#__PURE__*/React.createElement(_Icon.Icon, {
     className: _ChipModule.default.dismissIcon,
     name: "xmark",
     type: iconType,
     size: "small",
-    onClick: event => !disabled && onDismiss && onDismiss(event)
+    onClick: event => {
+      event.stopPropagation();
+      if (!disabled && onDismiss) {
+        onDismiss(event);
+      }
+    }
   }));
 };
 exports.Chip = Chip;

package/lib/components/Chip/Chip.js.flow

@@ -5,6 +5,7 @@ import * as React from 'react';
 import {classify} from '../../utils/classify';
 import type {IconType} from '../Icon';
 import {Icon} from '../Icon';
+import {Truncate} from '../Truncate';
 
 import css from './Chip.module.css';
 
@@ -27,6 +28,7 @@ export type BaseChipProps = {
   semantic?: ChipSemanticType,
   children: React.Node,
   disabled?: boolean,
+  onClick?: ?(SyntheticEvent<HTMLElement>) => mixed,
 };
 
 export type MediumChipProps = {
@@ -53,6 +55,7 @@ export const Chip = ({
   iconType = 'regular',
   dismissable = false,
   onDismiss = () => null,
+  onClick,
   disabled,
 }: ChipProps): React.Node => (
   <div
@@ -74,6 +77,7 @@ export const Chip = ({
       },
       classNames?.wrapper,
     )}
+    onClick={onClick}
   >
     {iconName && size !== 'small' && (
       <Icon
@@ -83,14 +87,20 @@ export const Chip = ({
         size="small"
       />
     )}
-    {children}
+    <Truncate>{children}</Truncate>
+
     {dismissable && size !== 'small' && (
       <Icon
         className={css.dismissIcon}
         name="xmark"
         type={iconType}
         size="small"
-        onClick={(event) => !disabled && onDismiss && onDismiss(event)}
+        onClick={(event) => {
+          event.stopPropagation();
+          if (!disabled && onDismiss) {
+            onDismiss(event);
+          }
+        }}
       />
     )}
   </div>

package/lib/components/Chip/Chip.module.css

@@ -1,9 +1,15 @@
 @value (
   colorNeutralLightest,
+  colorNeutralLight,
   colorInformationLightest,
+  colorInformationLight,
   colorSuccessLightest,
+  colorSuccessLight,
   colorWarningLightest,
+  colorWarningLight,
   colorDangerLightest,
+  colorDangerLight,
+  colorGrayLightest,
   colorBackgroundTertiary,
   colorTextDisabled,
   colorFillDisabled
@@ -28,33 +34,58 @@
   padding: spaceXXSmall spaceSmall;
   gap: spaceXXSmall;
   border-radius: borderRadiusXSmall;
+  cursor: pointer;
 }
 
 .primary {
   background-color: colorNeutralLightest;
 }
 
+.primary:hover {
+  background-color: colorNeutralLight;
+}
+
 .information {
   background-color: colorInformationLightest;
 }
 
+.information:hover {
+  background-color: colorInformationLight;
+}
+
 .success {
   background-color: colorSuccessLightest;
 }
 
+.success:hover {
+  background-color: colorSuccessLight;
+}
+
 .warning {
   background-color: colorWarningLightest;
 }
 
+.warning:hover {
+  background-color: colorWarningLight;
+}
+
 .danger {
   background-color: colorDangerLightest;
 }
 
+.danger:hover {
+  background-color: colorDangerLight;
+}
+
 .secondary {
   composes: borderPrimary from '../../styles/border.module.css';
   background-color: colorBackgroundTertiary;
 }
 
+.secondary:hover {
+  background-color: colorGrayLightest;
+}
+
 .withIcon {
   padding: spaceXXSmall spaceSmall spaceXXSmall spaceXSmall;
 }

package/lib/components/Icon/Icon.js.flow

@@ -12,7 +12,7 @@ import classify from '../../utils/classify';
 import typographyStyle from '../../styles/typography.module.css';
 
 
-export type IconType = 'regular' | 'solid' | 'duotone';
+export type IconType = 'regular' | 'solid' | 'duotone' | 'brands';
 
 export const ICON_SIZE = Object.freeze({
   small: 'small',

package/lib/components/SideMenuLink/SideMenuLink.module.css

@@ -23,6 +23,7 @@
   border-radius: borderRadiusSmall;
   width: sizeFluid;
   cursor: pointer;
+  user-select: none;
 }
 
 .linkWrapper.closed {

package/lib/components/StatusIndicator/StatusIndicator.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.StatusIndicator = exports.STATUS_SEMANTIC = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _StatusIndicatorModule = _interopRequireDefault(require("./StatusIndicator.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 STATUS_SEMANTIC = Object.freeze({
+  information: 'information',
+  success: 'success',
+  warning: 'warning',
+  danger: 'danger',
+  neutral: 'neutral'
+});
+exports.STATUS_SEMANTIC = STATUS_SEMANTIC;
+const StatusIndicator = _ref => {
+  let {
+    classNames,
+    status = 'information',
+    withBorder,
+    ...props
+  } = _ref;
+  return /*#__PURE__*/React.createElement("div", _extends({}, props, {
+    "data-testid": "StatusIndicator",
+    className: (0, _classify.default)(_StatusIndicatorModule.default.statusWrapper, _StatusIndicatorModule.default[status], {
+      [_StatusIndicatorModule.default.withBorder]: withBorder
+    }, classNames?.wrapper)
+  }));
+};
+exports.StatusIndicator = StatusIndicator;

package/lib/components/StatusIndicator/StatusIndicator.js.flow

@@ -0,0 +1,47 @@
+// @flow strict
+
+import * as React from 'react';
+
+import classify from '../../utils/classify';
+
+import css from './StatusIndicator.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+export const STATUS_SEMANTIC = Object.freeze({
+  information: 'information',
+  success: 'success',
+  warning: 'warning',
+  danger: 'danger',
+  neutral: 'neutral',
+});
+
+export type StatusSemanticType = $Values<typeof STATUS_SEMANTIC>;
+
+export type StatusIndicatorProps = {
+  classNames?: ClassNames,
+  status?: StatusSemanticType,
+  withBorder?: boolean,
+  ...
+};
+
+export const StatusIndicator = ({
+  classNames,
+  status = 'information',
+  withBorder,
+  ...props
+}: StatusIndicatorProps): React.Node => (
+  <div
+    {...props}
+    data-testid="StatusIndicator"
+    className={classify(
+      css.statusWrapper,
+      css[status],
+      {
+        [css.withBorder]: withBorder,
+      },
+      classNames?.wrapper,
+    )}
+  ></div>
+);

package/lib/components/StatusIndicator/StatusIndicator.module.css

@@ -0,0 +1,37 @@
+@value (colorInformation, colorSuccess, colorWarning, colorDanger, colorNeutral, colorBackgroundTertiary) from '../../styles/variables/_color.css';
+@value (size8) from '../../styles/variables/_size.css';
+@value (borderRadiusCircle, borderWidthTertiary) from '../../styles/variables/_border.css';
+
+.statusWrapper {
+  display: flex;
+  color: colorFillPrimary;
+  width: size8;
+  height: size8;
+  border-radius: borderRadiusCircle;
+  background-color: colorInformation;
+  box-sizing: content-box;
+}
+
+.information {
+  background-color: colorInformation;
+}
+
+.success {
+  background-color: colorSuccess;
+}
+
+.warning {
+  background-color: colorWarning;
+}
+
+.danger {
+  background-color: colorDanger;
+}
+
+.neutral {
+  background-color: colorNeutral;
+}
+
+.withBorder {
+  border: borderWidthTertiary solid colorBackgroundTertiary;
+}

package/lib/components/StatusIndicator/index.js

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

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

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