@spaced-out/ui-design-system 0.0.4 → 0.0.6-beta.0

package/.github/workflows/publish_to_npm.yml

@@ -53,6 +53,8 @@ jobs:
       - name: Bump release version
         if: startsWith(github.event.inputs.release-type, 'pre') != true
         run: |
+          git fetch --all
+          git pull origin master
           yarn build:changelog --release-as $RELEASE_TYPE
           echo "RELEASE_TAG=latest" >> $GITHUB_ENV
         env:
@@ -63,6 +65,8 @@ jobs:
       - name: Bump pre-release version
         if: startsWith(github.event.inputs.release-type, 'pre')
         run: |
+          git fetch --all
+          git pull origin master
           yarn build:changelog --$RELEASE_TYPE beta
           echo "RELEASE_TAG=beta" >> $GITHUB_ENV
         env:

package/CHANGELOG.md

@@ -2,6 +2,20 @@
 
 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.6-beta.0 (2022-11-29)
+
+
+### Features
+
+* script change to fetch all commits ([53a08cd](https://github.com/spaced-out/ui-design-system/commit/53a08cdbab66c32784bf672934ac6faa712d3996))
+
+### 0.0.5 (2022-11-29)
+
+
+### Features
+
+* **avatar:** [GDS-116] avatar and avatar group ([#36](https://github.com/spaced-out/ui-design-system/issues/36)) ([d326415](https://github.com/spaced-out/ui-design-system/commit/d326415371d96ff6a3dcaf9cd068b1a3468d87ed))
+
 ### 0.0.4 (2022-11-24)
 
 

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

@@ -33,6 +33,9 @@
       "large": {
         "value": "{baseBorder.radius.20.value}"
       },
+      "x-large": {
+        "value": "{baseBorder.radius.30.value}"
+      },
       "circle": {
         "value": "{baseBorder.radius.50%.value}"
       }

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

@@ -19,6 +19,9 @@
       "20": {
         "value": "20px"
       },
+      "30": {
+        "value": "30px"
+      },
       "50%": {
         "value": "50%"
       }

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

@@ -147,10 +147,13 @@
         }
       }
     },
+    "gray.lightest": {
+      "value": "{baseColor.gray.75.value}"
+    },
     "neutral": {
       "value": "{baseColor.indigo.500.value}"
     },
-    "neutral.lightest":{
+    "neutral.lightest": {
       "value": "{baseColor.indigo.50.value}"
     },
     "neutral.light": {
@@ -166,7 +169,7 @@
       "value": "{baseColor.green.500.value}"
     },
     "success.lightest": {
-        "value": "{baseColor.green.50.value}"
+      "value": "{baseColor.green.50.value}"
     },
     "success.light": {
       "value": "{baseColor.green.200.value}"
@@ -181,7 +184,7 @@
       "value": "{baseColor.blue.500.value}"
     },
     "information.lightest": {
-        "value": "{baseColor.blue.50.value}"
+      "value": "{baseColor.blue.50.value}"
     },
     "information.light": {
       "value": "{baseColor.blue.200.value}"
@@ -196,7 +199,7 @@
       "value": "{baseColor.orange.500.value}"
     },
     "warning.lightest": {
-        "value": "{baseColor.orange.50.value}"
+      "value": "{baseColor.orange.50.value}"
     },
     "warning.light": {
       "value": "{baseColor.orange.200.value}"
@@ -211,7 +214,7 @@
       "value": "{baseColor.red.500.value}"
     },
     "danger.lightest": {
-        "value": "{baseColor.red.50.value}"
+      "value": "{baseColor.red.50.value}"
     },
     "danger.light": {
       "value": "{baseColor.red.200.value}"

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

@@ -24,6 +24,9 @@
     "20": {
       "value": "20px"
     },
+    "22": {
+      "value": "22px"
+    },
     "24": {
       "value": "24px"
     },
@@ -45,6 +48,9 @@
     "60": {
       "value": "60px"
     },
+    "100": {
+      "value": "100px"
+    },
     "110": {
       "value": "110px"
     },

package/lib/components/Avatar/Avatar.js

@@ -0,0 +1,150 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.avatarSizeOptions = exports.BaseAvatar = exports.Avatar = exports.AVATAR_SIZE = exports.AVATAR_COLOR = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _Text = require("../../components/Text");
+var _color = require("../../styles/variables/_color");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Icon = require("../Icon");
+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); }
+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 AVATAR_SIZE = Object.freeze({
+  small: 'small',
+  medium: 'medium',
+  large: 'large'
+});
+exports.AVATAR_SIZE = AVATAR_SIZE;
+const avatarSizeOptions = [...Object.keys(AVATAR_SIZE)];
+exports.avatarSizeOptions = avatarSizeOptions;
+const AVATAR_COLOR = Object.freeze({
+  red: _color.colorDangerLightest,
+  orange: _color.colorWarningLightest,
+  green: _color.colorSuccessLightest,
+  blue: _color.colorInformationLightest,
+  gray: _color.colorGrayLightest,
+  indigo: _color.colorNeutralLightest
+});
+exports.AVATAR_COLOR = AVATAR_COLOR;
+const getAvatarText = function () {
+  let text = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  const [firstWord, secondWord] = text.split(' ');
+  const firstChar = firstWord ? firstWord[0].toUpperCase() : '';
+  const secondChar = secondWord ? secondWord[0].toUpperCase() : '';
+  return firstChar + secondChar;
+};
+const AvatarTextDecorator = _ref => {
+  let {
+    avatarText,
+    size
+  } = _ref;
+  switch (size) {
+    case 'small':
+      return /*#__PURE__*/React.createElement(_Text.SubTitleSmall, null, avatarText);
+    case 'medium':
+      return /*#__PURE__*/React.createElement(_Text.SubTitleMedium, null, avatarText);
+    case 'large':
+      return /*#__PURE__*/React.createElement(_Text.SubTitleLarge, null, avatarText);
+  }
+};
+
+// mapping of iconSize for each avatar size;
+const iconSize = Object.freeze({
+  small: 'small',
+  medium: 'medium',
+  large: 'medium'
+});
+const AvatarConditionalContent = _ref2 => {
+  let {
+    imageSrc,
+    text,
+    iconName,
+    size = 'medium',
+    iconType,
+    color = 'blue'
+  } = _ref2;
+  return /*#__PURE__*/React.createElement("div", {
+    className: _AvatarModule.default.innerContainer,
+    style: {
+      background: AVATAR_COLOR[color]
+    }
+  }, imageSrc ? /*#__PURE__*/React.createElement("img", {
+    src: imageSrc,
+    alt: "Avatar",
+    className: _AvatarModule.default.avatar
+  }) : iconName ? /*#__PURE__*/React.createElement(_Icon.Icon, {
+    name: iconName,
+    type: iconType,
+    size: iconSize[size]
+  }) : text ? /*#__PURE__*/React.createElement(AvatarTextDecorator, {
+    avatarText: getAvatarText(text),
+    size: size
+  }) : null);
+};
+const Avatar = _ref3 => {
+  let {
+    classNames,
+    size = 'medium',
+    imageSrc,
+    text,
+    style,
+    iconName,
+    iconType,
+    color,
+    ring = false
+  } = _ref3;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_AvatarModule.default.container, {
+      [_AvatarModule.default.largeSize]: size === 'large',
+      [_AvatarModule.default.mediumSize]: size === 'medium',
+      [_AvatarModule.default.smallSize]: size === 'small'
+    }, classNames?.wrapper),
+    style: style
+  }, ring ? /*#__PURE__*/React.createElement("div", {
+    className: _AvatarModule.default.ring
+  }, /*#__PURE__*/React.createElement("div", {
+    className: _AvatarModule.default.whiteCircle
+  }, /*#__PURE__*/React.createElement(AvatarConditionalContent, {
+    imageSrc: imageSrc,
+    text: text,
+    iconName: iconName,
+    iconType: iconType,
+    color: color
+  }))) : /*#__PURE__*/React.createElement(AvatarConditionalContent, {
+    imageSrc: imageSrc,
+    text: text,
+    iconName: iconName,
+    iconType: iconType,
+    color: color
+  }));
+};
+exports.Avatar = Avatar;
+const BaseAvatar = _ref4 => {
+  let {
+    classNames,
+    size = 'medium',
+    text = '',
+    style,
+    color = 'blue'
+  } = _ref4;
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_AvatarModule.default.container, {
+      [_AvatarModule.default.baseLargeSize]: size === 'large',
+      [_AvatarModule.default.baseMediumSize]: size === 'medium',
+      [_AvatarModule.default.baseSmallSize]: size === 'small'
+    }, classNames?.wrapper),
+    style: {
+      ...style,
+      background: AVATAR_COLOR[color]
+    }
+  }, /*#__PURE__*/React.createElement(AvatarTextDecorator, {
+    avatarText: text,
+    size: size
+  }));
+};
+exports.BaseAvatar = BaseAvatar;

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

@@ -0,0 +1,178 @@
+// @flow strict
+
+import * as React from 'react';
+
+import {
+  SubTitleLarge,
+  SubTitleMedium,
+  SubTitleSmall,
+} from '../../components/Text';
+import {
+  colorDangerLightest,
+  colorGrayLightest,
+  colorInformationLightest,
+  colorNeutralLightest,
+  colorSuccessLightest,
+  colorWarningLightest,
+} from '../../styles/variables/_color';
+import classify from '../../utils/classify';
+import type {IconType} from '../Icon';
+import {Icon} from '../Icon';
+
+import css from './Avatar.module.css';
+
+
+type ClassNames = $ReadOnly<{wrapper?: string}>;
+
+export const AVATAR_SIZE = Object.freeze({
+  small: 'small',
+  medium: 'medium',
+  large: 'large',
+});
+export const avatarSizeOptions: Array<mixed> = [...Object.keys(AVATAR_SIZE)];
+
+export type AvatarSize = $Keys<typeof AVATAR_SIZE>;
+export const AVATAR_COLOR = Object.freeze({
+  red: colorDangerLightest,
+  orange: colorWarningLightest,
+  green: colorSuccessLightest,
+  blue: colorInformationLightest,
+  gray: colorGrayLightest,
+  indigo: colorNeutralLightest,
+});
+
+export type AvatarColorType = $Keys<typeof AVATAR_COLOR>;
+
+export type AvatarProps = {
+  classNames?: ClassNames,
+  size?: AvatarSize,
+  imageSrc?: string,
+  ring?: boolean,
+  icon?: boolean,
+  text?: string,
+  color?: AvatarColorType,
+  style?: mixed,
+  iconName?: string,
+  iconType?: IconType,
+  ring?: boolean,
+};
+
+const getAvatarText = (text = '') => {
+  const [firstWord, secondWord] = text.split(' ');
+  const firstChar = firstWord ? firstWord[0].toUpperCase() : '';
+  const secondChar = secondWord ? secondWord[0].toUpperCase() : '';
+  return firstChar + secondChar;
+};
+
+const AvatarTextDecorator = ({
+  avatarText,
+  size,
+}: {
+  avatarText: string,
+  size: AvatarSize,
+}) => {
+  switch (size) {
+  case 'small':
+    return <SubTitleSmall>{avatarText}</SubTitleSmall>;
+  case 'medium':
+    return <SubTitleMedium>{avatarText}</SubTitleMedium>;
+  case 'large':
+    return <SubTitleLarge>{avatarText}</SubTitleLarge>;
+  }
+};
+
+// mapping of iconSize for each avatar size;
+const iconSize = Object.freeze({
+  small: 'small',
+  medium: 'medium',
+  large: 'medium',
+});
+
+const AvatarConditionalContent = ({
+  imageSrc,
+  text,
+  iconName,
+  size = 'medium',
+  iconType,
+  color = 'blue',
+}) => (
+  <div className={css.innerContainer} style={{background: AVATAR_COLOR[color]}}>
+    {imageSrc ? (
+      <img src={imageSrc} alt="Avatar" className={css.avatar}></img>
+    ) : iconName ? (
+      <Icon name={iconName} type={iconType} size={iconSize[size]} />
+    ) : text ? (
+      <AvatarTextDecorator avatarText={getAvatarText(text)} size={size} />
+    ) : null}
+  </div>
+);
+
+export const Avatar = ({
+  classNames,
+  size = 'medium',
+  imageSrc,
+  text,
+  style,
+  iconName,
+  iconType,
+  color,
+  ring = false,
+}: AvatarProps): React.Node => (
+  <div
+    className={classify(
+      css.container,
+      {
+        [css.largeSize]: size === 'large',
+        [css.mediumSize]: size === 'medium',
+        [css.smallSize]: size === 'small',
+      },
+      classNames?.wrapper,
+    )}
+    style={style}
+  >
+    {ring ? (
+      <div className={css.ring}>
+        <div className={css.whiteCircle}>
+          <AvatarConditionalContent
+            imageSrc={imageSrc}
+            text={text}
+            iconName={iconName}
+            iconType={iconType}
+            color={color}
+          />
+        </div>
+      </div>
+    ) : (
+      <AvatarConditionalContent
+        imageSrc={imageSrc}
+        text={text}
+        iconName={iconName}
+        iconType={iconType}
+        color={color}
+      />
+    )}
+  </div>
+);
+
+export const BaseAvatar = ({
+  classNames,
+  size = 'medium',
+  text = '',
+  style,
+  color = 'blue',
+}: AvatarProps): React.Node => (
+  <div
+    className={classify(
+      css.container,
+      {
+        [css.baseLargeSize]: size === 'large',
+        [css.baseMediumSize]: size === 'medium',
+        [css.baseSmallSize]: size === 'small',
+      },
+      classNames?.wrapper,
+    )}
+    style={{...style, background: AVATAR_COLOR[color]}}
+  >
+    <AvatarTextDecorator avatarText={text} size={size} />
+  </div>
+);

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

@@ -0,0 +1,87 @@
+@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';
+
+.container {
+  border-radius: borderRadiusCircle;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.container.largeSize {
+  width: size60;
+  height: size60;
+}
+
+.container.mediumSize {
+  width: size42;
+  height: size42;
+}
+
+.container.smallSize {
+  width: size34;
+  height: size34;
+}
+
+.container.baseLargeSize {
+  min-width: size60;
+  height: size60;
+  border-radius: borderRadiusXLarge;
+  padding: 0 spaceXSmall;
+}
+
+.container.baseMediumSize {
+  min-width: size42;
+  height: size42;
+  border-radius: borderRadiusLarge;
+  padding: 0 spaceXXSmall;
+}
+
+.container.baseSmallSize {
+  min-width: size34;
+  height: size34;
+  border-radius: borderRadiusLarge;
+  padding: 0 spaceXXSmall;
+}
+
+.avatar {
+  vertical-align: middle;
+  width: sizeFluid;
+  height: sizeFluid;
+  border-radius: borderRadiusCircle;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.ring {
+  border-radius: borderRadiusCircle;
+  width: sizeFluid;
+  height: sizeFluid;
+  border: solid borderWidthSecondary transparent;
+  background-image: linear-gradient(white, white),
+    radial-gradient(circle at top right, colorFillPrimary, colorInformation);
+  background-origin: border-box;
+  background-clip: content-box, border-box;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.whiteCircle {
+  border-radius: borderRadiusCircle;
+  border: solid borderWidthSecondary colorBackgroundTertiary;
+  width: sizeFluid;
+  height: sizeFluid;
+}
+
+.innerContainer {
+  display: flex;
+  border-radius: borderRadiusCircle;
+  width: sizeFluid;
+  height: sizeFluid;
+  align-items: center;
+  justify-content: center;
+}

package/lib/components/Avatar/index.js

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

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

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

package/lib/components/AvatarGroup/AvatarGroup.js

@@ -0,0 +1,110 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.AvatarGroup = void 0;
+var React = _interopRequireWildcard(require("react"));
+var _color = require("../../styles/variables/_color");
+var _space = require("../../styles/variables/_space");
+var _classify = _interopRequireDefault(require("../../utils/classify"));
+var _Avatar = require("../Avatar");
+var _Tooltip = require("../Tooltip");
+var _AvatarGroupModule = _interopRequireDefault(require("./AvatarGroup.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; }
+
+const COLOR_SEQUENCE = ['blue', 'green', 'orange', 'red', 'gray'];
+const AvatarGroup = _ref => {
+  let {
+    children,
+    size = 'medium',
+    borderColor = _color.colorBackgroundTertiary,
+    maxTooltipLines = 7,
+    placement = 'top',
+    maxAvatars = 5
+  } = _ref;
+  const childAvatarCount = React.Children.count(children);
+  const leftOverlap = {
+    small: _space.spaceXXSmall,
+    medium: `${parseInt(_space.spaceSmall) / 2}px`,
+    large: _space.spaceXSmall
+  };
+  let colorIndex = -1;
+  const avatarInGroup = (child, index, color) => /*#__PURE__*/React.cloneElement(child, {
+    size,
+    classNames: {
+      wrapper: _AvatarGroupModule.default.avatarInGroup
+    },
+    style: {
+      borderColor,
+      marginLeft: `-${index !== 0 ? leftOverlap[size] : 0}`
+    },
+    color
+  });
+  const childrenArray = React.Children.toArray(children);
+  const totalAvatarCount = childrenArray.length;
+  const plusAvatar = () => {
+    const nameList = [];
+    for (let i = maxAvatars - 1; i < totalAvatarCount; i++) {
+      const child = childrenArray[i];
+      const {
+        text
+      } = child.props;
+      if (text) {
+        nameList.push(text);
+      }
+    }
+    const NameListNode = () => /*#__PURE__*/React.createElement("span", null, nameList.map(name => /*#__PURE__*/React.createElement(React.Fragment, {
+      key: name
+    }, name, /*#__PURE__*/React.createElement("br", null))));
+    return /*#__PURE__*/React.createElement(_Tooltip.Tooltip, {
+      body: /*#__PURE__*/React.createElement(NameListNode, null),
+      bodyMaxLines: maxTooltipLines,
+      placement: placement
+    }, /*#__PURE__*/React.createElement("div", {
+      className: _AvatarGroupModule.default.plusAvatar
+    }, /*#__PURE__*/React.createElement(_Avatar.BaseAvatar, {
+      size: size,
+      color: "gray",
+      text: `+${childAvatarCount - maxAvatars + 1}`,
+      classNames: {
+        wrapper: _AvatarGroupModule.default.avatarInGroup
+      },
+      style: {
+        borderColor,
+        marginLeft: `-${leftOverlap[size]}`
+      }
+    })));
+  };
+  const childrenWithProps = React.Children.map(children, (child, index) => {
+    const {
+      imageSrc
+    } = child.props;
+    if (!imageSrc) {
+      colorIndex++;
+      if (colorIndex === COLOR_SEQUENCE.length) {
+        colorIndex = 0;
+      }
+    }
+    const color = COLOR_SEQUENCE[colorIndex];
+    if (childAvatarCount <= maxAvatars) {
+      return avatarInGroup(child, index, color);
+    } else {
+      if (index < maxAvatars - 1) {
+        return avatarInGroup(child, index, color);
+      } else if (index === maxAvatars) {
+        return plusAvatar();
+      }
+    }
+  });
+  return /*#__PURE__*/React.createElement("div", {
+    className: (0, _classify.default)(_AvatarGroupModule.default.avatarGroupContainer, {
+      [_AvatarGroupModule.default.largeSize]: size === 'large',
+      [_AvatarGroupModule.default.mediumSize]: size === 'medium',
+      [_AvatarGroupModule.default.smallSize]: size === 'small'
+    })
+  }, childrenWithProps);
+};
+exports.AvatarGroup = AvatarGroup;