@availity/mui-avatar 0.3.3 → 0.3.4

package/CHANGELOG.md

@@ -2,6 +2,8 @@
 
 This file was generated using [@jscutlery/semver](https://github.com/jscutlery/semver).
 
+## [0.3.4](https://github.com/Availity/element/compare/@availity/mui-avatar@0.3.3...@availity/mui-avatar@0.3.4) (2025-01-08)
+
 ## [0.3.3](https://github.com/Availity/element/compare/@availity/mui-avatar@0.3.2...@availity/mui-avatar@0.3.3) (2025-01-06)
 
 ### Dependency Updates

package/dist/index.js

@@ -86,16 +86,15 @@ module.exports = __toCommonJS(src_exports);
 // src/lib/Avatar.tsx
 var import_Avatar = __toESM(require("@mui/material/Avatar"));
 var import_react = __toESM(require("react"));
-var import_design_tokens = require("@availity/design-tokens");
 var import_api_axios = require("@availity/api-axios");
 var import_mui_icon = require("@availity/mui-icon");
 var import_jsx_runtime = require("react/jsx-runtime");
 var sizeStyling = {
-  xs: { width: 18, height: 18, fontSize: import_design_tokens.tokens.fontSizesCaption },
-  s: { width: 24, height: 24, fontSize: import_design_tokens.tokens.fontSizesCaption },
-  m: { width: 40, height: 40, fontSize: import_design_tokens.tokens.fontSizesH5, fontWeight: import_design_tokens.tokens.fontWeightsBold },
-  l: { width: 80, height: 80, fontSize: import_design_tokens.tokens.fontSizesH3, fontWeight: import_design_tokens.tokens.fontWeightsBold },
-  xl: { width: 140, height: 140, fontSize: import_design_tokens.tokens.fontSizesH1, fontWeight: import_design_tokens.tokens.fontWeightsBold }
+  xs: { width: 18, height: 18, fontSize: "caption.fontSize" },
+  s: { width: 24, height: 24, fontSize: "caption.fontSize" },
+  m: { width: 40, height: 40, fontSize: "h5.fontSize", fontWeight: "fontWeightBold" },
+  l: { width: 80, height: 80, fontSize: "h3.fontSize", fontWeight: "fontWeightBold" },
+  xl: { width: 140, height: 140, fontSize: "h1.fontSize", fontWeight: "fontWeightBold" }
 };
 var getInitials = (name, size) => {
   if (name.split(" ").length > 1 && size !== "xs") {

package/dist/index.mjs

@@ -53,16 +53,15 @@ var __async = (__this, __arguments, generator) => {
 // src/lib/Avatar.tsx
 import { default as MuiAvatar } from "@mui/material/Avatar";
 import React, { useEffect } from "react";
-import { tokens } from "@availity/design-tokens";
 import { avSettingsApi } from "@availity/api-axios";
 import { UserIcon } from "@availity/mui-icon";
 import { jsx } from "react/jsx-runtime";
 var sizeStyling = {
-  xs: { width: 18, height: 18, fontSize: tokens.fontSizesCaption },
-  s: { width: 24, height: 24, fontSize: tokens.fontSizesCaption },
-  m: { width: 40, height: 40, fontSize: tokens.fontSizesH5, fontWeight: tokens.fontWeightsBold },
-  l: { width: 80, height: 80, fontSize: tokens.fontSizesH3, fontWeight: tokens.fontWeightsBold },
-  xl: { width: 140, height: 140, fontSize: tokens.fontSizesH1, fontWeight: tokens.fontWeightsBold }
+  xs: { width: 18, height: 18, fontSize: "caption.fontSize" },
+  s: { width: 24, height: 24, fontSize: "caption.fontSize" },
+  m: { width: 40, height: 40, fontSize: "h5.fontSize", fontWeight: "fontWeightBold" },
+  l: { width: 80, height: 80, fontSize: "h3.fontSize", fontWeight: "fontWeightBold" },
+  xl: { width: 140, height: 140, fontSize: "h1.fontSize", fontWeight: "fontWeightBold" }
 };
 var getInitials = (name, size) => {
   if (name.split(" ").length > 1 && size !== "xs") {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@availity/mui-avatar",
-  "version": "0.3.3",
+  "version": "0.3.4",
   "description": "Availity MUI Avatar Component - part of the @availity/element design system",
   "keywords": [
     "react",
@@ -48,7 +48,6 @@
     "access": "public"
   },
   "dependencies": {
-    "@availity/api-axios": "^9.0.4",
-    "@availity/design-tokens": "^0.14.1"
+    "@availity/api-axios": "^9.0.4"
   }
 }

package/src/lib/Avatar.stories.tsx

@@ -3,6 +3,7 @@
 import type { Meta, StoryObj } from '@storybook/react';
 import { Avatar, AvatarProps } from './Avatar';
 import { HomeIcon } from '@availity/mui-icon';
+import Grid from '@mui/material/Unstable_Grid2';
 
 const meta: Meta<typeof Avatar> = {
   title: 'Components/Avatar/Avatar',
@@ -44,3 +45,38 @@ export const _IconAvatar: StoryObj<typeof Avatar> = {
     </Avatar>
   ),
 };
+
+export const _Sizes: StoryObj<typeof Avatar> = {
+  render: (args: AvatarProps) => (
+    <Grid container spacing={1}>
+      <Grid xs={2}>XSmall</Grid>
+      <Grid xs={10}>
+        <Avatar {...args} size="xs"/>
+      </Grid>
+      <Grid xs={2}>Small</Grid>
+      <Grid xs={10}>
+        <Avatar {...args} size="s"/>
+      </Grid>
+      <Grid xs={2}>Medium</Grid>
+      <Grid xs={10}>
+        <Avatar {...args} size="m"/>
+      </Grid>
+      <Grid xs={2}>Large</Grid>
+      <Grid xs={10}>
+        <Avatar {...args} size="l"/>
+      </Grid>
+      <Grid xs={2}>XLarge</Grid>
+      <Grid xs={10}>
+        <Avatar {...args} size="xl"/>
+      </Grid>
+    </Grid>
+  ),
+  args: {
+    children: 'John Doe',
+  },
+  parameters: {
+    controls: {
+      include: 'children'
+    }
+  }
+};

package/src/lib/Avatar.tsx

@@ -1,6 +1,5 @@
 import { default as MuiAvatar, AvatarProps as MuiAvatarProps } from '@mui/material/Avatar';
 import React, { useEffect } from 'react';
-import { tokens } from '@availity/design-tokens';
 import { avSettingsApi } from '@availity/api-axios';
 import { UserIcon } from '@availity/mui-icon';
 
@@ -11,11 +10,11 @@ export interface AvatarProps extends Omit<MuiAvatarProps, 'variant'> {
 }
 
 const sizeStyling = {
-  xs: { width: 18, height: 18, fontSize: tokens.fontSizesCaption },
-  s: { width: 24, height: 24, fontSize: tokens.fontSizesCaption },
-  m: { width: 40, height: 40, fontSize: tokens.fontSizesH5, fontWeight: tokens.fontWeightsBold },
-  l: { width: 80, height: 80, fontSize: tokens.fontSizesH3, fontWeight: tokens.fontWeightsBold },
-  xl: { width: 140, height: 140, fontSize: tokens.fontSizesH1, fontWeight: tokens.fontWeightsBold },
+  xs: { width: 18, height: 18, fontSize: 'caption.fontSize' },
+  s: { width: 24, height: 24, fontSize: 'caption.fontSize' },
+  m: { width: 40, height: 40, fontSize: 'h5.fontSize', fontWeight: 'fontWeightBold' },
+  l: { width: 80, height: 80, fontSize: 'h3.fontSize', fontWeight: 'fontWeightBold' },
+  xl: { width: 140, height: 140, fontSize: 'h1.fontSize', fontWeight: 'fontWeightBold' },
 };
 
 const getInitials = (name: string, size: 'xs' | 's' | 'm' | 'l' | 'xl'): string => {