@spaced-out/ui-design-system 0.0.3 → 0.0.5

package/.cspell/custom-words.txt

@@ -2,6 +2,7 @@ atleast
 circlehollow
 commitlint
 contributorsrc
+Crespo
 DEFAULTTEXT
 dismissable
 Fennimore
@@ -18,6 +19,7 @@ preminor
 prepatch
 rgba
 sbdocs
+Stapleton
 superrover
 testid
 tnum

package/.eslintignore

@@ -1 +1,2 @@
-/src/assets/fontawesome/
+/src/assets/fontawesome/
+node_modules/

package/.github/pull_request_template.md

@@ -0,0 +1,17 @@
+### Description of changes
+<!--- Describe your changes in detail -->
+
+### Design Specs(Add a link to Spec sheet)
+<!--- Add a link to design specs -->
+
+### Screenshots(if appropriate)
+
+### Does this close any currently open issues?
+
+### Breaking changes(Describe if any)
+
+### Checklist:
+<!--- Go over all the following points, and put an `x` in all the boxes that apply. -->
+<!--- If you're unsure about any of these, don't hesitate to ask. We're here to help! -->
+- [ ] Merged with latest `master` branch
+- [ ] I have updated the documentation accordingly.

package/.prettierrc

@@ -1,11 +1,27 @@
-trailingComma: 'all'
-bracketSpacing: false
-singleQuote: true
-endOfLine: lf
-overrides:
-  - files: ['*.js', '*.jsx']
-    options:
-      parser: 'babel-flow'
-  - files: ['*.css']
-    options:
-      parser: 'css'
+{
+  "singleQuote": true,
+  "trailingComma": "all",
+  "printWidth": 80,
+  "tabWidth": 2,
+  "bracketSpacing": false,
+  "endOfLine": "lf",
+  "overrides": [
+    {
+      "files": [
+        "*.js",
+        "*.jsx"
+      ],
+      "options": {
+        "parser": "babel-flow"
+      }
+    },
+    {
+      "files": [
+        "*.css"
+      ],
+      "options": {
+        "parser": "css"
+      }
+    }
+  ]
+}

package/.vscode/settings.json

@@ -0,0 +1,7 @@
+{
+  "eslint.validate": ["javascript", "javascriptreact"],
+  "editor.codeActionsOnSave": {
+    "source.fixAll.eslint": true
+  },
+  "marquee.widgets.npm-stats.packageNames": ["@spaced-out/ui-design-system"]
+}

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.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)
+
+
+### Features
+
+* pr template ([#35](https://github.com/Spaced-Out/ui-design-system/issues/35)) ([c18e112](https://github.com/Spaced-Out/ui-design-system/commit/c18e1123730acaad77e1334a949573ac0cfd3708))
+
 ### 0.0.3 (2022-11-22)
 
 

package/CONTRIBUTING.md

@@ -144,9 +144,9 @@ Most commonly used commit prefixes:
 
 > `build:` Commits, that affect build components like build tool, ci pipeline, dependencies, project version, etc.
 
-## Add yourself to the contributor list
+## Add yourself to the maintainer list
 
-To add yourself to the `all-contributors` table in the README and INTRODUCTION stories:
+To add yourself to the `maintainers` table in the README and INTRODUCTION stories:
 
 > Run the following commands from the root of the repo:
 

package/README.md

@@ -101,6 +101,10 @@ import * as SIZES from "@spaced-out/ui-design-system/lib/styles/variables/_size.
 
 Check out our [**Contribution Guide**](https://spaced-out.github.io/ui-design-system/?path=/docs/contribution--page) to setup and contribute to Genesis.
 
+## Changelog
+
+Check out our [**Changelog here**](https://spaced-out.github.io/ui-design-system/?path=/docs/changelog--page)
+
 ## Maintainers ✨
 
 <!-- ALL-CONTRIBUTORS-LIST:START - Do not remove or modify this section -->

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';