agora-ui-foundation 1.0.0

package/lib/components/action-bar/security/index.js

@@ -0,0 +1,110 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Security = void 0;
+var _i18n = require("../../../i18n");
+var _checkbox = require("../../checkbox");
+var _dropMenu = require("../../drop-menu");
+var _type = require("../../icon/type");
+var _tooltip = require("../../tooltip");
+var _item = require("../item");
+var _jsxRuntime = require("react/jsx-runtime");
+var Security = exports.Security = function Security(_ref) {
+  var id = _ref.id,
+    order = _ref.order;
+  var t = (0, _i18n.useI18n)();
+  var title = t('fmt_screenshare_controlbar_button_security');
+  var tooltip = t('fmt_screenshare_controlbar_button_security');
+  var SecurityOptions = function SecurityOptions() {
+    var allActions = [{
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+        checked: false,
+        label: t('fmt_screenshare_controlbar_security_list_lock'),
+        styleType: "white"
+      }),
+      key: 'lock_room',
+      type: 'primary',
+      onButtonClick: function onButtonClick() {}
+    }, {
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+        checked: false,
+        label: t('fmt_security_options_activatewaitingroom'),
+        styleType: "white"
+      }),
+      key: 'enable_waiting_room',
+      type: 'disabled',
+      onButtonClick: function onButtonClick() {},
+      classNames: 'room-control-drop-with-under-line'
+    }, {
+      title: t('fmt_screenshare_options_allow'),
+      key: 'allow_attendee_title',
+      type: 'title'
+    }, {
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+        checked: false,
+        label: t('fmt_screenshare_controlbar_security_list_participant_unmute'),
+        styleType: "white"
+      }),
+      key: 'unmute_yourself',
+      type: 'primary',
+      onButtonClick: function onButtonClick() {}
+    }, {
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+        checked: false,
+        label: t('fmt_screenshare_controlbar_security_list_participant_changeName'),
+        styleType: "white"
+      }),
+      key: 'rename',
+      type: 'disabled',
+      onButtonClick: function onButtonClick() {}
+    }, {
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+        checked: false,
+        label: t('fmt_security_start_video'),
+        styleType: "white"
+      }),
+      key: 'start_video',
+      type: 'primary',
+      onButtonClick: function onButtonClick() {},
+      classNames: 'room-control-drop-with-under-line'
+    }, {
+      title: /*#__PURE__*/(0, _jsxRuntime.jsx)(_checkbox.FcrCheckbox, {
+        checked: false,
+        label: t('fmt_security_options_removemultiple'),
+        styleType: "white"
+      }),
+      key: 'remove_fcr-participants',
+      type: 'danger',
+      onButtonClick: function onButtonClick() {},
+      classNames: 'room-control-drop-disable'
+    }];
+    return /*#__PURE__*/(0, _jsxRuntime.jsx)(_dropMenu.FcrDropMenu, {
+      options: allActions
+    });
+  };
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    content: tooltip,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItemWithPopover, {
+      popoverProps: {
+        content: /*#__PURE__*/(0, _jsxRuntime.jsx)(SecurityOptions, {}),
+        overlayClassName: 'attendee__footer-more-actions',
+        overlayInnerStyle: {
+          boxShadow: 'none',
+          border: 'none',
+          width: '256px'
+        }
+      },
+      id: id,
+      order: order,
+      onClick: function onClick() {},
+      icon: _type.FcrIconType.FCR_SECURITY,
+      title: title,
+      iconColors: {
+        iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+      }
+    })
+  });
+};

package/lib/components/action-bar/settings/index.d.ts

@@ -0,0 +1,4 @@
+export declare const Settings: ({ id, order }: {
+    id: string;
+    order: number;
+}) => import("react/jsx-runtime").JSX.Element;

package/lib/components/action-bar/settings/index.js

@@ -0,0 +1,32 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Settings = void 0;
+var _i18n = require("../../../i18n");
+var _type = require("../../icon/type");
+var _tooltip = require("../../tooltip");
+var _item = require("../item");
+var _jsxRuntime = require("react/jsx-runtime");
+var Settings = exports.Settings = function Settings(_ref) {
+  var id = _ref.id,
+    order = _ref.order;
+  var t = (0, _i18n.useI18n)();
+  var title = t('fcr_settings_setting');
+  var tooltip = t('fcr_settings_setting');
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_tooltip.FcrToolTip, {
+    content: tooltip,
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_item.ActionBarItem, {
+      id: id,
+      order: order,
+      icon: _type.FcrIconType.FCR_SETTING,
+      title: title,
+      onClick: function onClick() {},
+      iconColors: {
+        iconPrimary: 'var(--fcr_web_ui_scene_mainicon1)'
+      }
+    })
+  });
+};

package/lib/components/action-phone/index.css

@@ -0,0 +1,55 @@
+.fcr-action-phone-wrapper-l {
+  width: 80px;
+  height: 80px;
+}
+.fcr-action-phone-wrapper-m {
+  width: 50px;
+  height: 50px;
+}
+.fcr-action-phone-wrapper-s {
+  width: 30px;
+  height: 30px;
+}
+.fcr-action-phone-wrapper {
+  background-color: var(--fcr_ui_scene_ramp_green1);
+  border-radius: 100%;
+  position: relative;
+  margin: auto;
+}
+.fcr-action-phone-wrapper .fcr-action-phone-circle {
+  position: absolute;
+  background-color: var(--fcr_ui_scene_ramp_green6);
+  height: 100%;
+  width: 100%;
+  border-radius: 100%;
+  opacity: 0.3;
+}
+
+.fcr-action-phone-circle-animation{
+  animation: actionphone 2s ease-out infinite;
+
+}
+.fcr-action-phone-circle:nth-of-type(1) {
+  animation-delay: -0.5s;
+}
+.fcr-action-phone-circle:nth-of-type(2) {
+  animation-delay: -1s;
+}
+.fcr-action-phone-circle:nth-of-type(3) {
+  animation-delay: -1.5s;
+}
+.fcr-action-phone-icon{
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  background: transparent;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+@keyframes actionphone {
+  100% {
+    transform: scale(1.68);
+    opacity: 0;
+  }
+}

package/lib/components/action-phone/index.d.ts

@@ -0,0 +1,12 @@
+import React, { FC } from 'react';
+import './index.css';
+import { PathOptions } from '../icon/svg-dict';
+export type ActionPhoneProps = {
+    size: 'large' | 'medium' | 'small';
+    icon?: React.ReactNode;
+    wrapperColor?: string;
+    circleColor?: string;
+    iconColors?: Partial<PathOptions>;
+    animate?: boolean;
+};
+export declare const FcrActionPhone: FC<ActionPhoneProps>;

package/lib/components/action-phone/index.js

@@ -0,0 +1,78 @@
+"use strict";
+
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FcrActionPhone = void 0;
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+var _react = _interopRequireWildcard(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+require("./index.css");
+var _icon = require("../icon");
+var _type = require("../icon/type");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+var FcrActionPhone = exports.FcrActionPhone = function FcrActionPhone(_ref) {
+  var size = _ref.size,
+    icon = _ref.icon,
+    wrapperColor = _ref.wrapperColor,
+    circleColor = _ref.circleColor,
+    _ref$animate = _ref.animate,
+    animate = _ref$animate === void 0 ? true : _ref$animate,
+    iconColors = _ref.iconColors;
+  var wrapperRef = (0, _react.useRef)(null);
+  var circleRefs = (0, _react.useRef)([/*#__PURE__*/_react["default"].createRef(), /*#__PURE__*/_react["default"].createRef(), /*#__PURE__*/_react["default"].createRef()]);
+  (0, _react.useEffect)(function () {
+    if (wrapperRef.current && wrapperColor) {
+      wrapperRef.current.style.setProperty('background-color', wrapperColor);
+    }
+    circleRefs.current.forEach(function (ref) {
+      if (ref.current && circleColor) {
+        ref.current.style.setProperty('background-color', circleColor);
+      }
+    });
+  }, [wrapperColor, circleColor]);
+  var wrapperCls = (0, _classnames["default"])('fcr-action-phone-wrapper', {
+    'fcr-action-phone-wrapper-l': size === 'large',
+    'fcr-action-phone-wrapper-m': size === 'medium',
+    'fcr-action-phone-wrapper-s': size === 'small'
+  });
+  var iconSize = (0, _react.useMemo)(function () {
+    return size === 'large' ? 48 : size === 'small' ? 18 : 32;
+  }, [size]);
+  var circleCls = (0, _classnames["default"])('fcr-action-phone-circle', {
+    'fcr-action-phone-circle-animation': animate
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+    ref: wrapperRef,
+    className: wrapperCls,
+    children: [/*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: circleRefs.current[0],
+      className: circleCls
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: circleRefs.current[1],
+      className: circleCls
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      ref: circleRefs.current[2],
+      className: circleCls
+    }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      className: "fcr-action-phone-icon",
+      children: icon ? icon : /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+        type: _type.FcrIconType.FCR_PHONECALL3,
+        size: iconSize,
+        colors: iconColors
+      })
+    })]
+  });
+};

package/lib/components/action-phone/index.stories.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { ActionPhoneProps } from '.';
+declare const meta: {
+    title: string;
+    component: React.FC<ActionPhoneProps>;
+    args: {
+        size: string;
+    };
+};
+export declare const Docs: (props: ActionPhoneProps) => import("react/jsx-runtime").JSX.Element;
+export default meta;

package/lib/components/action-phone/index.stories.js

@@ -0,0 +1,55 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.iterator.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.object.define-properties.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.string.iterator.js");
+require("core-js/modules/es.weak-map.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+require("core-js/modules/web.dom-collections.iterator.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Docs = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireWildcard(require("react"));
+var _ = require(".");
+var _jsxRuntime = require("react/jsx-runtime");
+function _getRequireWildcardCache(e) { if ("function" != typeof WeakMap) return null; var r = new WeakMap(), t = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(e) { return e ? t : r; })(e); }
+function _interopRequireWildcard(e, r) { if (!r && e && e.__esModule) return e; if (null === e || "object" != _typeof(e) && "function" != typeof e) return { "default": e }; var t = _getRequireWildcardCache(r); if (t && t.has(e)) return t.get(e); var n = { __proto__: null }, a = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var u in e) if ("default" !== u && {}.hasOwnProperty.call(e, u)) { var i = a ? Object.getOwnPropertyDescriptor(e, u) : null; i && (i.get || i.set) ? Object.defineProperty(n, u, i) : n[u] = e[u]; } return n["default"] = e, t && t.set(e, n), n; }
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var meta = {
+  title: 'Components/FcrActionPhone',
+  component: _.FcrActionPhone,
+  args: {
+    size: 'medium'
+  }
+};
+var Docs = exports.Docs = function Docs(props) {
+  var _useState = (0, _react.useState)(''),
+    _useState2 = (0, _slicedToArray2["default"])(_useState, 2),
+    value = _useState2[0],
+    setValue = _useState2[1];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+      style: {
+        width: 200,
+        marginBottom: 50
+      },
+      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_.FcrActionPhone, _objectSpread({}, props))
+    })
+  });
+};
+var _default = exports["default"] = meta;

package/lib/components/avatar/helper.d.ts

@@ -0,0 +1,2 @@
+export declare const getNameColor: (userName: string) => string;
+export declare const splitName: (userName?: string) => string[];

package/lib/components/avatar/helper.js

@@ -0,0 +1,46 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.splitName = exports.getNameColor = void 0;
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+require("core-js/modules/es.error.to-string.js");
+require("core-js/modules/es.array.join.js");
+require("core-js/modules/es.array.slice.js");
+require("core-js/modules/es.date.to-string.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/es.parse-int.js");
+require("core-js/modules/es.regexp.exec.js");
+require("core-js/modules/es.regexp.test.js");
+require("core-js/modules/es.regexp.to-string.js");
+var _toUpper = _interopRequireDefault(require("lodash/toUpper"));
+var nameColorPalette = ['#4262FF', '#0081A7', '#F07167', '#6FCFA3', '#758BFD', '#B388EB', '#ACA885', '#70A9A1'];
+var getNameColor = exports.getNameColor = function getNameColor(userName) {
+  if (!userName) return nameColorPalette[0];
+  var arr = [];
+  for (var i = 0; i < userName.length; i++) {
+    arr[i] = userName.charCodeAt(i).toString(16).slice(-4);
+  }
+  var arrSlice = arr.join('').slice(0, 8);
+  return nameColorPalette[parseInt(arrSlice, 16) % nameColorPalette.length];
+};
+var splitName = exports.splitName = function splitName() {
+  var userName = arguments.length > 0 && arguments[0] !== undefined ? arguments[0] : '';
+  var names = userName.split(' ');
+  var _names = (0, _slicedToArray2["default"])(names, 1),
+    firstWord = _names[0];
+  var lastWord = names[names.length - 1];
+  var firstLetter = firstWord.split('')[0];
+  var secondLetter = names.length > 1 ? lastWord.split('')[0] : lastWord.length > 1 ? lastWord.split('')[1] : '';
+  return filterChineseWord([(0, _toUpper["default"])(firstLetter), (0, _toUpper["default"])(secondLetter)]);
+};
+var filterChineseWord = function filterChineseWord(word) {
+  var reg = /[\u4e00-\u9fa5]/;
+  if (reg.test(word[1])) {
+    return [word[0], ''];
+  }
+  return word;
+};

package/lib/components/avatar/index.css

@@ -0,0 +1,9 @@
+.fcr-avatar {
+  color: #fff;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  font-weight: 600;
+  border-radius: var(--fcr_cornerradius_round);
+}

package/lib/components/avatar/index.d.ts

@@ -0,0 +1,11 @@
+import React, { FC } from 'react';
+import './index.css';
+export type AvatarProps = {
+    size: number;
+    textSize: number;
+    nickName: string;
+    icon?: React.ReactNode;
+    backgroundColor?: string;
+    onClick?: () => void;
+};
+export declare const FcrAvatar: FC<AvatarProps>;

package/lib/components/avatar/index.js

@@ -0,0 +1,40 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FcrAvatar = void 0;
+require("core-js/modules/es.array.concat.js");
+var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/slicedToArray"));
+var _react = _interopRequireDefault(require("react"));
+require("./index.css");
+var _helper = require("./helper");
+var _jsxRuntime = require("react/jsx-runtime");
+var FcrAvatar = exports.FcrAvatar = function FcrAvatar(_ref) {
+  var size = _ref.size,
+    textSize = _ref.textSize,
+    nickName = _ref.nickName,
+    icon = _ref.icon,
+    backgroundColor = _ref.backgroundColor,
+    onClick = _ref.onClick;
+  var color = backgroundColor || (0, _helper.getNameColor)(nickName);
+  var _splitName = (0, _helper.splitName)(nickName),
+    _splitName2 = (0, _slicedToArray2["default"])(_splitName, 2),
+    first = _splitName2[0],
+    last = _splitName2[1];
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    onClick: onClick,
+    className: "fcr-avatar",
+    style: {
+      width: size,
+      height: size,
+      background: color,
+      fontSize: textSize
+    },
+    children: !!icon ? icon : /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+      children: "".concat(first).concat(last)
+    })
+  });
+};

package/lib/components/avatar/index.stories.d.ts

@@ -0,0 +1,13 @@
+/// <reference types="react" />
+import { AvatarProps } from '.';
+declare const meta: {
+    title: string;
+    component: import("react").FC<AvatarProps>;
+    args: {
+        size: number;
+        textSize: number;
+        nickName: string;
+    };
+};
+export declare const Docs: (props: AvatarProps) => import("react/jsx-runtime").JSX.Element;
+export default meta;

package/lib/components/avatar/index.stories.js

@@ -0,0 +1,50 @@
+"use strict";
+
+require("core-js/modules/es.symbol.js");
+require("core-js/modules/es.array.filter.js");
+require("core-js/modules/es.array.for-each.js");
+require("core-js/modules/es.array.push.js");
+require("core-js/modules/es.object.define-properties.js");
+require("core-js/modules/es.object.define-property.js");
+require("core-js/modules/es.object.get-own-property-descriptor.js");
+require("core-js/modules/es.object.get-own-property-descriptors.js");
+require("core-js/modules/es.object.keys.js");
+require("core-js/modules/es.object.to-string.js");
+require("core-js/modules/web.dom-collections.for-each.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Docs = void 0;
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+var _ = require(".");
+var _icon = require("../icon");
+var _type = require("../icon/type");
+var _jsxRuntime = require("react/jsx-runtime");
+function ownKeys(e, r) { var t = Object.keys(e); if (Object.getOwnPropertySymbols) { var o = Object.getOwnPropertySymbols(e); r && (o = o.filter(function (r) { return Object.getOwnPropertyDescriptor(e, r).enumerable; })), t.push.apply(t, o); } return t; }
+function _objectSpread(e) { for (var r = 1; r < arguments.length; r++) { var t = null != arguments[r] ? arguments[r] : {}; r % 2 ? ownKeys(Object(t), !0).forEach(function (r) { (0, _defineProperty2["default"])(e, r, t[r]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(e, Object.getOwnPropertyDescriptors(t)) : ownKeys(Object(t)).forEach(function (r) { Object.defineProperty(e, r, Object.getOwnPropertyDescriptor(t, r)); }); } return e; }
+var meta = {
+  title: 'Components/Avatar',
+  component: _.FcrAvatar,
+  args: {
+    size: 100,
+    textSize: 50,
+    nickName: 'Jackie Chan'
+  }
+};
+var Docs = exports.Docs = function Docs(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        width: 200,
+        marginBottom: 50
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.FcrAvatar, _objectSpread({}, props)), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.FcrAvatar, _objectSpread(_objectSpread({}, props), {}, {
+        icon: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+          type: _type.FcrIconType.FCR_PHONECALL3
+        })
+      }))]
+    })
+  });
+};
+var _default = exports["default"] = meta;

package/lib/components/avatar-icon/index.css

@@ -0,0 +1,13 @@
+.fcr-avatar-icon {
+  display: flex;
+  overflow: hidden;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--fcr_cornerradius_m);
+}
+.fcr-avatar-icon-phone {
+  background-color: var(--fcr_ui_scene_ramp_lightgreen6);
+}
+.fcr-avatar-icon-sip {
+  background-color: var(--fcr_ui_scene_ramp_purple7);
+}

package/lib/components/avatar-icon/index.d.ts

@@ -0,0 +1,8 @@
+import React, { FC } from 'react';
+import './index.css';
+export type AvatarIconProps = {
+    size: number;
+    type: 'phone' | 'sip';
+    icon?: React.ReactNode;
+};
+export declare const FcrAvatarIcon: FC<AvatarIconProps>;

package/lib/components/avatar-icon/index.js

@@ -0,0 +1,33 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.FcrAvatarIcon = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _classnames = _interopRequireDefault(require("classnames"));
+require("./index.css");
+var _icon = require("../icon");
+var _type = require("../icon/type");
+var _jsxRuntime = require("react/jsx-runtime");
+var FcrAvatarIcon = exports.FcrAvatarIcon = function FcrAvatarIcon(_ref) {
+  var size = _ref.size,
+    type = _ref.type;
+  var cls = (0, _classnames["default"])('fcr-avatar-icon', {
+    'fcr-avatar-icon-phone': type === 'phone',
+    'fcr-avatar-icon-sip': type === 'sip'
+  });
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    className: cls,
+    style: {
+      width: size,
+      height: size
+    },
+    children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icon.FcrIcon, {
+      type: type === 'phone' ? _type.FcrIconType.FCR_PHONECALL3 : _type.FcrIconType.FCR_SIPDEVICE,
+      size: 24
+    })
+  });
+};

package/lib/components/avatar-icon/index.stories.d.ts

@@ -0,0 +1,12 @@
+/// <reference types="react" />
+import { AvatarIconProps } from '.';
+declare const meta: {
+    title: string;
+    component: import("react").FC<AvatarIconProps>;
+    args: {
+        size: number;
+        type: string;
+    };
+};
+export declare const Docs: (props: AvatarIconProps) => import("react/jsx-runtime").JSX.Element;
+export default meta;

package/lib/components/avatar-icon/index.stories.js

@@ -0,0 +1,37 @@
+"use strict";
+
+require("core-js/modules/es.object.define-property.js");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports["default"] = exports.Docs = void 0;
+var _ = require(".");
+var _jsxRuntime = require("react/jsx-runtime");
+var meta = {
+  title: 'Components/AvatarIcon',
+  component: _.FcrAvatarIcon,
+  args: {
+    size: 32,
+    type: 'phone'
+  }
+};
+var Docs = exports.Docs = function Docs(props) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
+    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
+      style: {
+        width: 200,
+        marginBottom: 50,
+        gap: 10,
+        display: 'flex'
+      },
+      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_.FcrAvatarIcon, {
+        size: 32,
+        type: "sip"
+      }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_.FcrAvatarIcon, {
+        size: 32,
+        type: "phone"
+      })]
+    })
+  });
+};
+var _default = exports["default"] = meta;