glints-aries 4.0.170 → 4.0.171

package/es/@next/Avatar/Avatar.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+declare const avatarBackgroundColorVariant: readonly ["supplementary", "warning", "danger", "success", "outstanding"];
+declare const avatarSizeVariant: readonly ["large", "medium"];
+export declare type AvatarBackgroundColorVariant = typeof avatarBackgroundColorVariant[number];
+export declare type AvatarSizeVariant = typeof avatarSizeVariant[number];
+export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: AvatarBackgroundColorVariant;
+    size?: AvatarSizeVariant;
+    initials?: string;
+}
+export declare const Avatar: ({ variant, size, initials, ...props }: AvatarProps) => JSX.Element;
+export {};

package/es/@next/Avatar/Avatar.js

@@ -0,0 +1,25 @@
+import _extends from "@babel/runtime/helpers/extends";
+import _objectWithoutPropertiesLoose from "@babel/runtime/helpers/objectWithoutPropertiesLoose";
+var _excluded = ["variant", "size", "initials"];
+import React from 'react';
+import { Typography } from '../Typography';
+import { Neutral } from '../utilities/colors';
+import { AvatarStyle } from './AvatarStyle';
+var avatarBackgroundColorVariant = ['supplementary', 'warning', 'danger', 'success', 'outstanding'];
+var avatarSizeVariant = ['large', 'medium'];
+export var Avatar = function Avatar(_ref) {
+  var _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'supplementary' : _ref$variant,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    initials = _ref.initials,
+    props = _objectWithoutPropertiesLoose(_ref, _excluded);
+  return /*#__PURE__*/React.createElement(AvatarStyle, _extends({
+    variant: variant,
+    size: size
+  }, props), /*#__PURE__*/React.createElement(Typography, {
+    variant: size === 'medium' ? 'body1' : 'headline6',
+    color: Neutral.B18,
+    as: 'span'
+  }, initials.slice(0, 2)));
+};

package/es/@next/Avatar/Avatar.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Interactive: any;

package/es/@next/Avatar/Avatar.stories.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { BaseContainer } from '../../Layout/GlintsContainer/GlintsContainer';
+import { Avatar } from './Avatar';
+export default {
+  title: '@next/Avatar',
+  component: Avatar,
+  decorators: [function (Story) {
+    return /*#__PURE__*/React.createElement(BaseContainer, null, Story());
+  }],
+  argTypes: {}
+};
+var Template = function Template(args) {
+  return /*#__PURE__*/React.createElement(Avatar, args);
+};
+export var Interactive = Template.bind({});
+Interactive.args = {
+  initials: 'HE'
+};

package/es/@next/Avatar/AvatarStyle.d.ts

@@ -0,0 +1,2 @@
+import { AvatarProps } from './Avatar';
+export declare const AvatarStyle: import("styled-components").StyledComponent<"div", any, AvatarProps, never>;

package/es/@next/Avatar/AvatarStyle.js

@@ -0,0 +1,34 @@
+var _avatarBackgroundColo, _avatarSizeVariant;
+import styled from 'styled-components';
+import * as Breakpoints from '../utilities/breakpoints';
+import { Blue, Green, Neutral, Orange, Red } from '../utilities/colors';
+var mediumAvatarSizeStyle = "\n  width: 40px;\n  height: 40px;\n  \n  @media (max-width: " + Breakpoints.large + ") {\n    width: 32px;\n    height: 32px;\n  }\n";
+var largeAvatarSizeStyle = "\n  width: 60px;\n  height: 60px;\n\n  @media (max-width: " + Breakpoints.large + ") {\n    width: 40px;\n    height: 40px;\n  }\n";
+var avatarBackgroundColor = (_avatarBackgroundColo = {}, _avatarBackgroundColo['supplementary'] = Neutral.B99, _avatarBackgroundColo['warning'] = Orange.S42, _avatarBackgroundColo['danger'] = Red.B100, _avatarBackgroundColo['success'] = Green.B89, _avatarBackgroundColo['outstanding'] = Blue.S08, _avatarBackgroundColo);
+var avatarSizeVariant = (_avatarSizeVariant = {}, _avatarSizeVariant['large'] = largeAvatarSizeStyle, _avatarSizeVariant['medium'] = mediumAvatarSizeStyle, _avatarSizeVariant);
+var getAvatarBackgroundColor = function getAvatarBackgroundColor(variant) {
+  if (!(variant in avatarBackgroundColor)) {
+    console.warn(variant + " is not a valid variant for the background color, default will be used");
+    return avatarBackgroundColor['supplementary'];
+  }
+  return avatarBackgroundColor[variant];
+};
+var getAvatarSizeStyle = function getAvatarSizeStyle(sizeVariant) {
+  if (!(sizeVariant in avatarSizeVariant)) {
+    console.warn(sizeVariant + " is not a valid variant for the size, default will be used");
+    return avatarSizeVariant['medium'];
+  }
+  return avatarSizeVariant[sizeVariant];
+};
+export var AvatarStyle = styled.div.withConfig({
+  displayName: "AvatarStyle",
+  componentId: "sc-1ys0vpf-0"
+})(["", "}", "}display:flex;align-items:center;justify-content:center;border-radius:50%;"], function (_ref) {
+  var size = _ref.size;
+  return getAvatarSizeStyle(size);
+}, function (_ref2) {
+  var variant = _ref2.variant;
+  return {
+    'background-color': getAvatarBackgroundColor(variant)
+  };
+});

package/es/@next/Avatar/index.d.ts

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

package/es/@next/Avatar/index.js

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

package/es/@next/index.d.ts

@@ -4,6 +4,7 @@ export { ButtonGroup } from './ButtonGroup';
 export { Icon } from './Icon';
 export { Tab, TabProps, Tabs, TabsProps } from './Tabs';
 export { Typography } from './Typography';
+export { Avatar } from './Avatar';
 import * as BorderRadius from './utilities/borderRadius';
 import * as Breakpoints from './utilities/breakpoints';
 import * as Colors from './utilities/colors';

package/es/@next/index.js

@@ -4,6 +4,7 @@ export { ButtonGroup } from './ButtonGroup';
 export { Icon } from './Icon';
 export { Tab, TabProps, Tabs, TabsProps } from './Tabs';
 export { Typography } from './Typography';
+export { Avatar } from './Avatar';
 
 // Utilities
 import * as BorderRadius from './utilities/borderRadius';

package/lib/@next/Avatar/Avatar.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+declare const avatarBackgroundColorVariant: readonly ["supplementary", "warning", "danger", "success", "outstanding"];
+declare const avatarSizeVariant: readonly ["large", "medium"];
+export declare type AvatarBackgroundColorVariant = typeof avatarBackgroundColorVariant[number];
+export declare type AvatarSizeVariant = typeof avatarSizeVariant[number];
+export interface AvatarProps extends React.HTMLAttributes<HTMLDivElement> {
+    variant?: AvatarBackgroundColorVariant;
+    size?: AvatarSizeVariant;
+    initials?: string;
+}
+export declare const Avatar: ({ variant, size, initials, ...props }: AvatarProps) => JSX.Element;
+export {};

package/lib/@next/Avatar/Avatar.js

@@ -0,0 +1,31 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.Avatar = void 0;
+var _extends2 = _interopRequireDefault(require("@babel/runtime/helpers/extends"));
+var _objectWithoutPropertiesLoose2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutPropertiesLoose"));
+var _react = _interopRequireDefault(require("react"));
+var _Typography = require("../Typography");
+var _colors = require("../utilities/colors");
+var _AvatarStyle = require("./AvatarStyle");
+var _excluded = ["variant", "size", "initials"];
+var avatarBackgroundColorVariant = ['supplementary', 'warning', 'danger', 'success', 'outstanding'];
+var avatarSizeVariant = ['large', 'medium'];
+var Avatar = function Avatar(_ref) {
+  var _ref$variant = _ref.variant,
+    variant = _ref$variant === void 0 ? 'supplementary' : _ref$variant,
+    _ref$size = _ref.size,
+    size = _ref$size === void 0 ? 'medium' : _ref$size,
+    initials = _ref.initials,
+    props = (0, _objectWithoutPropertiesLoose2["default"])(_ref, _excluded);
+  return /*#__PURE__*/_react["default"].createElement(_AvatarStyle.AvatarStyle, (0, _extends2["default"])({
+    variant: variant,
+    size: size
+  }, props), /*#__PURE__*/_react["default"].createElement(_Typography.Typography, {
+    variant: size === 'medium' ? 'body1' : 'headline6',
+    color: _colors.Neutral.B18,
+    as: 'span'
+  }, initials.slice(0, 2)));
+};
+exports.Avatar = Avatar;

package/lib/@next/Avatar/Avatar.stories.d.ts

@@ -0,0 +1,4 @@
+import { Meta } from '@storybook/react';
+declare const _default: Meta<import("@storybook/react").Args>;
+export default _default;
+export declare const Interactive: any;

package/lib/@next/Avatar/Avatar.stories.js

@@ -0,0 +1,25 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports["default"] = exports.Interactive = void 0;
+var _react = _interopRequireDefault(require("react"));
+var _GlintsContainer = require("../../Layout/GlintsContainer/GlintsContainer");
+var _Avatar = require("./Avatar");
+var _default = {
+  title: '@next/Avatar',
+  component: _Avatar.Avatar,
+  decorators: [function (Story) {
+    return /*#__PURE__*/_react["default"].createElement(_GlintsContainer.BaseContainer, null, Story());
+  }],
+  argTypes: {}
+};
+exports["default"] = _default;
+var Template = function Template(args) {
+  return /*#__PURE__*/_react["default"].createElement(_Avatar.Avatar, args);
+};
+var Interactive = Template.bind({});
+exports.Interactive = Interactive;
+Interactive.args = {
+  initials: 'HE'
+};

package/lib/@next/Avatar/AvatarStyle.d.ts

@@ -0,0 +1,2 @@
+import { AvatarProps } from './Avatar';
+export declare const AvatarStyle: import("styled-components").StyledComponent<"div", any, AvatarProps, never>;

package/lib/@next/Avatar/AvatarStyle.js

@@ -0,0 +1,42 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+exports.__esModule = true;
+exports.AvatarStyle = void 0;
+var _styledComponents = _interopRequireDefault(require("styled-components"));
+var Breakpoints = _interopRequireWildcard(require("../utilities/breakpoints"));
+var _colors = require("../utilities/colors");
+var _avatarBackgroundColo, _avatarSizeVariant;
+function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function _getRequireWildcardCache(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; }
+var mediumAvatarSizeStyle = "\n  width: 40px;\n  height: 40px;\n  \n  @media (max-width: " + Breakpoints.large + ") {\n    width: 32px;\n    height: 32px;\n  }\n";
+var largeAvatarSizeStyle = "\n  width: 60px;\n  height: 60px;\n\n  @media (max-width: " + Breakpoints.large + ") {\n    width: 40px;\n    height: 40px;\n  }\n";
+var avatarBackgroundColor = (_avatarBackgroundColo = {}, _avatarBackgroundColo['supplementary'] = _colors.Neutral.B99, _avatarBackgroundColo['warning'] = _colors.Orange.S42, _avatarBackgroundColo['danger'] = _colors.Red.B100, _avatarBackgroundColo['success'] = _colors.Green.B89, _avatarBackgroundColo['outstanding'] = _colors.Blue.S08, _avatarBackgroundColo);
+var avatarSizeVariant = (_avatarSizeVariant = {}, _avatarSizeVariant['large'] = largeAvatarSizeStyle, _avatarSizeVariant['medium'] = mediumAvatarSizeStyle, _avatarSizeVariant);
+var getAvatarBackgroundColor = function getAvatarBackgroundColor(variant) {
+  if (!(variant in avatarBackgroundColor)) {
+    console.warn(variant + " is not a valid variant for the background color, default will be used");
+    return avatarBackgroundColor['supplementary'];
+  }
+  return avatarBackgroundColor[variant];
+};
+var getAvatarSizeStyle = function getAvatarSizeStyle(sizeVariant) {
+  if (!(sizeVariant in avatarSizeVariant)) {
+    console.warn(sizeVariant + " is not a valid variant for the size, default will be used");
+    return avatarSizeVariant['medium'];
+  }
+  return avatarSizeVariant[sizeVariant];
+};
+var AvatarStyle = _styledComponents["default"].div.withConfig({
+  displayName: "AvatarStyle",
+  componentId: "sc-1ys0vpf-0"
+})(["", "}", "}display:flex;align-items:center;justify-content:center;border-radius:50%;"], function (_ref) {
+  var size = _ref.size;
+  return getAvatarSizeStyle(size);
+}, function (_ref2) {
+  var variant = _ref2.variant;
+  return {
+    'background-color': getAvatarBackgroundColor(variant)
+  };
+});
+exports.AvatarStyle = AvatarStyle;

package/lib/@next/Avatar/index.d.ts

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

package/lib/@next/Avatar/index.js

@@ -0,0 +1,9 @@
+"use strict";
+
+exports.__esModule = 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;
+  exports[key] = _Avatar[key];
+});

package/lib/@next/index.d.ts

@@ -4,6 +4,7 @@ export { ButtonGroup } from './ButtonGroup';
 export { Icon } from './Icon';
 export { Tab, TabProps, Tabs, TabsProps } from './Tabs';
 export { Typography } from './Typography';
+export { Avatar } from './Avatar';
 import * as BorderRadius from './utilities/borderRadius';
 import * as Breakpoints from './utilities/breakpoints';
 import * as Colors from './utilities/colors';

package/lib/@next/index.js

@@ -1,7 +1,7 @@
 "use strict";
 
 exports.__esModule = true;
-exports.Typography = exports.TabsProps = exports.Tabs = exports.TabProps = exports.Tab = exports.Spacing = exports.PrimaryButton = exports.OutlineMonochromeButton = exports.OutlineButton = exports.Icon = exports.Fonts = exports.DropShadow = exports.DestructiveButton = exports.Colors = exports.ButtonGroup = exports.Button = exports.Breakpoints = exports.BorderRadius = exports.Badge = void 0;
+exports.Typography = exports.TabsProps = exports.Tabs = exports.TabProps = exports.Tab = exports.Spacing = exports.PrimaryButton = exports.OutlineMonochromeButton = exports.OutlineButton = exports.Icon = exports.Fonts = exports.DropShadow = exports.DestructiveButton = exports.Colors = exports.ButtonGroup = exports.Button = exports.Breakpoints = exports.BorderRadius = exports.Badge = exports.Avatar = void 0;
 var _Badge = require("./Badge");
 exports.Badge = _Badge.Badge;
 var _Button = require("./Button");
@@ -21,6 +21,8 @@ exports.Tabs = _Tabs.Tabs;
 exports.TabsProps = _Tabs.TabsProps;
 var _Typography = require("./Typography");
 exports.Typography = _Typography.Typography;
+var _Avatar = require("./Avatar");
+exports.Avatar = _Avatar.Avatar;
 var BorderRadius = _interopRequireWildcard(require("./utilities/borderRadius"));
 exports.BorderRadius = BorderRadius;
 var Breakpoints = _interopRequireWildcard(require("./utilities/breakpoints"));

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "glints-aries",
-  "version": "4.0.170",
+  "version": "4.0.171",
   "description": "Glints ui-kit for frontend",
   "main": "./lib/index.js",
   "module": "./es/index.js",