@atlaskit/townsquare-emoji-provider 1.0.1 → 1.0.2

package/CHANGELOG.md

@@ -1 +1,8 @@
 # @atlaskit/townsquare-emoji-provider
+
+## 1.0.2
+
+### Patch Changes
+
+- [`58a7e84e13fe2`](https://bitbucket.org/atlassian/atlassian-frontend-monorepo/commits/58a7e84e13fe2) -
+  [ux] Add a component to render project emoji and include lock icon for private projects.

package/dist/cjs/ProjectIcon.compiled.css

@@ -0,0 +1,7 @@
+._1bsb1skh{width:11px}
+._1xi2r5cr{right:var(--ds-space-negative-050,-4px)}
+._4t3i1skh{height:11px}
+._94n51i6y{bottom:var(--ds-space-negative-025,-2px)}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
+._lcxvglyw{pointer-events:none}

package/dist/cjs/ProjectIcon.js

@@ -0,0 +1,76 @@
+/* ProjectIcon.tsx generated by @compiled/babel-plugin v0.38.1 */
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+var _typeof = require("@babel/runtime/helpers/typeof");
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.getTownsquareEmojiProvider = exports.ProjectIcon = void 0;
+require("./ProjectIcon.compiled.css");
+var _runtime = require("@compiled/react/runtime");
+var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
+var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/asyncToGenerator"));
+var _react = _interopRequireWildcard(require("react"));
+var _avatar = require("@atlaskit/avatar");
+var _emoji = require("@atlaskit/emoji");
+var _compiled = require("@atlaskit/primitives/compiled");
+function _interopRequireWildcard(e, t) { if ("function" == typeof WeakMap) var r = new WeakMap(), n = new WeakMap(); return (_interopRequireWildcard = function _interopRequireWildcard(e, t) { if (!t && e && e.__esModule) return e; var o, i, f = { __proto__: null, default: e }; if (null === e || "object" != _typeof(e) && "function" != typeof e) return f; if (o = t ? n : r) { if (o.has(e)) return o.get(e); o.set(e, f); } for (var _t in e) "default" !== _t && {}.hasOwnProperty.call(e, _t) && ((i = (o = Object.defineProperty) && Object.getOwnPropertyDescriptor(e, _t)) && (i.get || i.set) ? o(f, _t, i) : f[_t] = e[_t]); return f; })(e, t); }
+var getTownsquareEmojiProvider = exports.getTownsquareEmojiProvider = /*#__PURE__*/function () {
+  var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee() {
+    var mod;
+    return _regenerator.default.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.next = 2;
+          return Promise.resolve().then(function () {
+            return _interopRequireWildcard(require( /* webpackChunkName: "async-townsquare-emoji-provider" */
+            './provider'));
+          });
+        case 2:
+          mod = _context.sent;
+          return _context.abrupt("return", mod.emojiProvider);
+        case 4:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function getTownsquareEmojiProvider() {
+    return _ref.apply(this, arguments);
+  };
+}();
+var styles = {
+  container: "_kqswh2mm",
+  emoji: "_kqswstnw _94n51i6y _1xi2r5cr _lcxvglyw _4t3i1skh _1bsb1skh"
+};
+var ProjectIcon = exports.ProjectIcon = function ProjectIcon(_ref2) {
+  var emoji = _ref2.emoji,
+    isPrivate = _ref2.isPrivate,
+    height = _ref2.height;
+  var emojiProvider = (0, _react.useMemo)(function () {
+    if (!emoji) {
+      return undefined;
+    }
+    return getTownsquareEmojiProvider();
+  }, [emoji]);
+  var emojiId = (0, _react.useMemo)(function () {
+    return emoji ? {
+      shortName: emoji
+    } : undefined;
+  }, [emoji]);
+  if (!emojiProvider || !emojiId) {
+    return null;
+  }
+  return /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.container
+  }, /*#__PURE__*/_react.default.createElement(_emoji.ResourcedEmoji, {
+    emojiId: emojiId,
+    emojiProvider: emojiProvider,
+    fitToHeight: height !== null && height !== void 0 ? height : 16
+  }), isPrivate && /*#__PURE__*/_react.default.createElement(_compiled.Box, {
+    xcss: styles.emoji
+  }, /*#__PURE__*/_react.default.createElement(_avatar.Status, {
+    status: "locked"
+  })));
+};

package/dist/es2019/ProjectIcon.compiled.css

@@ -0,0 +1,7 @@
+._1bsb1skh{width:11px}
+._1xi2r5cr{right:var(--ds-space-negative-050,-4px)}
+._4t3i1skh{height:11px}
+._94n51i6y{bottom:var(--ds-space-negative-025,-2px)}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
+._lcxvglyw{pointer-events:none}

package/dist/es2019/ProjectIcon.js

@@ -0,0 +1,45 @@
+/* ProjectIcon.tsx generated by @compiled/babel-plugin v0.38.1 */
+import "./ProjectIcon.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import React, { useMemo } from 'react';
+import { Status } from '@atlaskit/avatar';
+import { ResourcedEmoji } from '@atlaskit/emoji';
+import { Box } from '@atlaskit/primitives/compiled';
+export const getTownsquareEmojiProvider = async () => {
+  const mod = await import( /* webpackChunkName: "async-townsquare-emoji-provider" */
+  './provider');
+  return mod.emojiProvider;
+};
+const styles = {
+  container: "_kqswh2mm",
+  emoji: "_kqswstnw _94n51i6y _1xi2r5cr _lcxvglyw _4t3i1skh _1bsb1skh"
+};
+export const ProjectIcon = ({
+  emoji,
+  isPrivate,
+  height
+}) => {
+  const emojiProvider = useMemo(() => {
+    if (!emoji) {
+      return undefined;
+    }
+    return getTownsquareEmojiProvider();
+  }, [emoji]);
+  const emojiId = useMemo(() => emoji ? {
+    shortName: emoji
+  } : undefined, [emoji]);
+  if (!emojiProvider || !emojiId) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.container
+  }, /*#__PURE__*/React.createElement(ResourcedEmoji, {
+    emojiId: emojiId,
+    emojiProvider: emojiProvider,
+    fitToHeight: height !== null && height !== void 0 ? height : 16
+  }), isPrivate && /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.emoji
+  }, /*#__PURE__*/React.createElement(Status, {
+    status: "locked"
+  })));
+};

package/dist/esm/ProjectIcon.compiled.css

@@ -0,0 +1,7 @@
+._1bsb1skh{width:11px}
+._1xi2r5cr{right:var(--ds-space-negative-050,-4px)}
+._4t3i1skh{height:11px}
+._94n51i6y{bottom:var(--ds-space-negative-025,-2px)}
+._kqswh2mm{position:relative}
+._kqswstnw{position:absolute}
+._lcxvglyw{pointer-events:none}

package/dist/esm/ProjectIcon.js

@@ -0,0 +1,65 @@
+/* ProjectIcon.tsx generated by @compiled/babel-plugin v0.38.1 */
+import _asyncToGenerator from "@babel/runtime/helpers/asyncToGenerator";
+import "./ProjectIcon.compiled.css";
+import { ax, ix } from "@compiled/react/runtime";
+import _regeneratorRuntime from "@babel/runtime/regenerator";
+import React, { useMemo } from 'react';
+import { Status } from '@atlaskit/avatar';
+import { ResourcedEmoji } from '@atlaskit/emoji';
+import { Box } from '@atlaskit/primitives/compiled';
+export var getTownsquareEmojiProvider = /*#__PURE__*/function () {
+  var _ref = _asyncToGenerator( /*#__PURE__*/_regeneratorRuntime.mark(function _callee() {
+    var mod;
+    return _regeneratorRuntime.wrap(function _callee$(_context) {
+      while (1) switch (_context.prev = _context.next) {
+        case 0:
+          _context.next = 2;
+          return import( /* webpackChunkName: "async-townsquare-emoji-provider" */
+          './provider');
+        case 2:
+          mod = _context.sent;
+          return _context.abrupt("return", mod.emojiProvider);
+        case 4:
+        case "end":
+          return _context.stop();
+      }
+    }, _callee);
+  }));
+  return function getTownsquareEmojiProvider() {
+    return _ref.apply(this, arguments);
+  };
+}();
+var styles = {
+  container: "_kqswh2mm",
+  emoji: "_kqswstnw _94n51i6y _1xi2r5cr _lcxvglyw _4t3i1skh _1bsb1skh"
+};
+export var ProjectIcon = function ProjectIcon(_ref2) {
+  var emoji = _ref2.emoji,
+    isPrivate = _ref2.isPrivate,
+    height = _ref2.height;
+  var emojiProvider = useMemo(function () {
+    if (!emoji) {
+      return undefined;
+    }
+    return getTownsquareEmojiProvider();
+  }, [emoji]);
+  var emojiId = useMemo(function () {
+    return emoji ? {
+      shortName: emoji
+    } : undefined;
+  }, [emoji]);
+  if (!emojiProvider || !emojiId) {
+    return null;
+  }
+  return /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.container
+  }, /*#__PURE__*/React.createElement(ResourcedEmoji, {
+    emojiId: emojiId,
+    emojiProvider: emojiProvider,
+    fitToHeight: height !== null && height !== void 0 ? height : 16
+  }), isPrivate && /*#__PURE__*/React.createElement(Box, {
+    xcss: styles.emoji
+  }, /*#__PURE__*/React.createElement(Status, {
+    status: "locked"
+  })));
+};

package/dist/types/ProjectIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { type EmojiProvider } from '@atlaskit/emoji';
+export declare const getTownsquareEmojiProvider: () => Promise<EmojiProvider>;
+export type Props = {
+    emoji: string;
+    isPrivate?: boolean | null;
+    height?: number;
+};
+export declare const ProjectIcon: ({ emoji, isPrivate, height }: Props) => React.JSX.Element | null;

package/dist/types-ts4.5/ProjectIcon.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { type EmojiProvider } from '@atlaskit/emoji';
+export declare const getTownsquareEmojiProvider: () => Promise<EmojiProvider>;
+export type Props = {
+    emoji: string;
+    isPrivate?: boolean | null;
+    height?: number;
+};
+export declare const ProjectIcon: ({ emoji, isPrivate, height }: Props) => React.JSX.Element | null;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@atlaskit/townsquare-emoji-provider",
-	"version": "1.0.1",
+	"version": "1.0.2",
 	"description": "Townsquare emoji provider",
 	"atlassian": {
 		"team": "Townsquare"
@@ -21,9 +21,20 @@
 	"sideEffects": false,
 	"atlaskit:src": "src/provider.ts",
 	"dependencies": {
-		"@atlaskit/emoji": "^69.9.0",
+		"@atlaskit/avatar": "^25.7.0",
+		"@atlaskit/css": "^0.19.0",
+		"@atlaskit/emoji": "^69.10.0",
+		"@atlaskit/primitives": "^17.1.0",
+		"@atlaskit/tokens": "^9.1.0",
 		"@babel/runtime": "^7.0.0"
 	},
+	"peerDependencies": {
+		"react": "^18.2.0"
+	},
+	"devDependencies": {
+		"@af/visual-regression": "workspace:^",
+		"@testing-library/react": "^16.3.0"
+	},
 	"techstack": {
 		"@atlassian/frontend": {
 			"import-structure": [

package/project-icon/package.json

@@ -0,0 +1,15 @@
+{
+  "name": "@atlaskit/townsquare-emoji-provider/project-icon",
+  "main": "../dist/cjs/ProjectIcon.js",
+  "module": "../dist/esm/ProjectIcon.js",
+  "module:es2019": "../dist/es2019/ProjectIcon.js",
+  "sideEffects": false,
+  "types": "../dist/types/ProjectIcon.d.ts",
+  "typesVersions": {
+    ">=4.5 <5.9": {
+      "*": [
+        "../dist/types-ts4.5/ProjectIcon.d.ts"
+      ]
+    }
+  }
+}