From c3271896260a35e003662b715674a86ad3d87047 Mon Sep 17 00:00:00 2001 From: Driss Chelouati Date: Mon, 4 Sep 2023 12:54:41 +0100 Subject: [PATCH] feat: avatar storybook, avatar plugin bugfixes --- .storybook/preview-head.html | 4 + pnpm-lock.yaml | 2 +- .../components/avatar/avatar.component.ts | 76 ++ src/plugins/components/avatar/avatar.doc.mdx | 271 ++++ .../components/avatar/avatar.stories.ts | 1204 +++++++++++++++++ src/plugins/components/avatar/avatar.test.ts | 33 + src/plugins/components/avatar/avatar.types.ts | 51 + .../components/avatar/avatar.variants.ts | 62 + .../components/{avatar.ts => avatar/index.ts} | 179 ++- 9 files changed, 1851 insertions(+), 31 deletions(-) create mode 100644 src/plugins/components/avatar/avatar.component.ts create mode 100644 src/plugins/components/avatar/avatar.doc.mdx create mode 100644 src/plugins/components/avatar/avatar.stories.ts create mode 100644 src/plugins/components/avatar/avatar.test.ts create mode 100644 src/plugins/components/avatar/avatar.types.ts create mode 100644 src/plugins/components/avatar/avatar.variants.ts rename src/plugins/components/{avatar.ts => avatar/index.ts} (83%) diff --git a/.storybook/preview-head.html b/.storybook/preview-head.html index 2668e06..fe070cf 100644 --- a/.storybook/preview-head.html +++ b/.storybook/preview-head.html @@ -19,4 +19,8 @@ margin-top: 0.25rem !important; color: #64748b !important; } + + .sidebar-header a { + max-width: 180px !important; + } \ No newline at end of file diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index d2b7ab0..a383cb6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -1,4 +1,4 @@ -lockfileVersion: '6.0' +lockfileVersion: '6.1' settings: autoInstallPeers: true diff --git a/src/plugins/components/avatar/avatar.component.ts b/src/plugins/components/avatar/avatar.component.ts new file mode 100644 index 0000000..23e46b7 --- /dev/null +++ b/src/plugins/components/avatar/avatar.component.ts @@ -0,0 +1,76 @@ +import { html } from 'lit' +import { spread } from '@open-wc/lit-helpers' + +import type { AvatarAttrs } from './avatar.types' +import * as variants from './avatar.variants' + +/** + * Primary UI component for user interaction + */ +export const Avatar = ({ + src, + srcDark, + text = '?', + badgeSrc, + size = 'sm', + shape = 'full', + mask, + color, + dot = false, + ring = false, + children, + badge, + ...attrs +}: AvatarAttrs) => { + return html` +
+
+ ${src + ? html` + ${text} + + ` + : children || + html` + ${text} + `} +
+ ${badgeSrc + ? html` +
+ ${text} +
+ ` + : badge} + ${dot + ? html` + + ` + : ''} +
+ ` +} diff --git a/src/plugins/components/avatar/avatar.doc.mdx b/src/plugins/components/avatar/avatar.doc.mdx new file mode 100644 index 0000000..b2de308 --- /dev/null +++ b/src/plugins/components/avatar/avatar.doc.mdx @@ -0,0 +1,271 @@ +import { Meta, Primary, Controls, Story } from '@storybook/blocks' +import * as AvatarStories from './avatar.stories' +import { defaultAvatarConfig } from '.' + + + +# Avatar + +Avatars are an essential part of any application. Shuriken UI avatars can have different sizes, shapes and additional options. They can be used to display uers, companies or any type of visual information. + + + +## Props + + + +## Variants + +
+ +### Full Sizes + +Avatars can have different sizes and different shapes. The below examples shows all avatar sizes for the full shape. + +
+ + + + + + + + + +
+ +
+ +### Curved Sizes + +Avatars can have different sizes and different shapes. The below examples shows all avatar sizes for the curved shape. + +
+ + + + + + + + + +
+ +
+ +### Dots (full shape) + +Avatars can have status indicators. Indicators positionning vary depending on the shape of the avatar. Below examples show dots with the avatar full shape. + +
+ + + + + + + + + +
+ +
+ +### Dots (curved shape) + +Avatars can have status indicators. Indicators positionning vary depending on the shape of the avatar. Below examples show dots with the avatar curved shape. + +
+ + + + + + + + + +
+ +
+ +### Badges (full shape) + +Avatars can have image badges. Badges can be used to display a skill, a flag, an icon or any relevant information. + +
+ + + + + + + + + +
+ +
+ +### Badges (curved shape) + +Avatars can have image badges. Badges can be used to display a skill, a flag, an icon or any relevant information. + +
+ + + + + + + + + +
+ +
+ +### Full fake + +Sometimes, you need to display a placeholder avatar. When an image is not provided, the component defaults to the fake mode, using color and text instead of an image. + +
+ + + + + + + + + +
+ +
+ +### Curved fake + +Sometimes, you need to display a placeholder avatar. When an image is not provided, the component defaults to the fake mode, using color and text instead of an image. + +
+ + + + + + + + + +
+ +
+ +### Full fake badges + +Fake avatars withstand the same props as regular avatars. You can also use badges and indicators on fake avatars using the same properties. + +
+ + + + + + + + + +
+ +
+ +### Curved fake badges + +Fake avatars withstand the same props as regular avatars. You can also use badges and indicators on fake avatars using the same properties. + +
+ + + + + + + + + +
+ +
+ +### Svg Masks + +Avatars can be displayed using SVG masks, bringing fancier shapes to your UI. Keep in mind that the mask prop is only available for the straight shape. + +
+ + + + + +
+ +
+ +## Slots + +### Slot: default + +Avatars have a default slot that serves as wrapper for their inner content. You can override the default image src by using this slot. + +
+ +
+ +
+ +### Slot: badge + +Avatars have a badge slot that serves as wrapper for the optional badge element. You can override the default badge src by using this slot. + +
+ +
+ +
+
+ +## Customization + +### Default config + +
+
+ + View configuration options + + + + + +
+ 
+        {JSON.stringify(defaultAvatarConfig, null, 2)}
+
+
+ +
+
\ No newline at end of file diff --git a/src/plugins/components/avatar/avatar.stories.ts b/src/plugins/components/avatar/avatar.stories.ts new file mode 100644 index 0000000..1f62b2d --- /dev/null +++ b/src/plugins/components/avatar/avatar.stories.ts @@ -0,0 +1,1204 @@ +import type { Meta, StoryObj } from '@storybook/web-components' +import { html } from 'lit' + +import type { AvatarAttrs } from './avatar.types' +import { Avatar } from './avatar.component' + +// More on how to set up stories at: https://storybook.js.org/docs/web-components/writing-stories/introduction +const meta = { + title: 'Shuriken UI/Base/Avatar', + // tags: ['autodocs'], + render: (args) => Avatar(args), + argTypes: { + src: { + control: { type: 'text' }, + defaultValue: 'https://apollux.cssninja.io/img/avatars/10.svg', + }, + srcDark: { + control: { type: 'text' }, + defaultValue: 'https://apollux.cssninja.io/img/avatars/10.svg', + }, + size: { + control: { type: 'select' }, + options: ['xxs', 'xs', 'sm', 'md', 'lg', 'xl', '2xl', '3xl', '4xl'], + defaultValue: 'sm', + }, + shape: { + control: { type: 'select' }, + options: ['straight', 'rounded', 'curved', 'full'], + defaultValue: 'full', + }, + color: { + control: { type: 'select' }, + options: [ + 'white', + 'muted', + 'primary', + 'success', + 'info', + 'warning', + 'danger', + 'pink', + 'yellow', + 'indigo', + 'violet', + ], + defaultValue: '', + }, + mask: { + control: { type: 'select' }, + options: ['hex', 'hexed', 'deca', 'blob', 'diamond'], + defaultValue: '', + }, + dot: { + control: { type: 'select' }, + options: [ + 'primary', + 'success', + 'info', + 'warning', + 'danger', + 'pink', + 'yellow', + ], + defaultValue: '', + }, + ring: { + control: { type: 'select' }, + options: [ + 'primary', + 'success', + 'info', + 'warning', + 'danger', + 'pink', + 'yellow', + ], + defaultValue: '', + }, + text: { + control: { type: 'text' }, + defaultValue: '?', + }, + }, +} satisfies Meta + +export default meta +type Story = StoryObj + +// first export is the Primary story + +// #region Main +export const Main: Story = { + name: 'Main example', + args: { + // set default values used for UI preview + size: 'xl', + shape: 'full', + src: 'https://apollux.cssninja.io/img/avatars/10.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/10.svg', + }, +} +// #endregion + +// #region Size:full +export const SizeXxsFull: Story = { + name: 'Size:xxs, Shape:full', + args: { + size: 'xxs', + shape: 'full', + src: 'https://apollux.cssninja.io/img/avatars/1.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/1.svg', + }, +} + +export const SizeXsFull: Story = { + name: 'Size:xs, Shape:full', + args: { + size: 'xs', + shape: 'full', + src: 'https://apollux.cssninja.io/img/avatars/15.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/15.svg', + }, +} + +export const SizeSmFull: Story = { + name: 'Size:sm, Shape:full', + args: { + size: 'sm', + shape: 'full', + src: 'https://apollux.cssninja.io/img/avatars/24.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/24.svg', + }, +} + +export const SizeMdFull: Story = { + name: 'Size:md, Shape:full', + args: { + size: 'md', + shape: 'full', + src: 'https://apollux.cssninja.io/img/avatars/3.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/3.svg', + }, +} + +export const SizeLgFull: Story = { + name: 'Size:lg, Shape:full', + args: { + size: 'lg', + shape: 'full', + src: 'https://apollux.cssninja.io/img/avatars/8.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/8.svg', + }, +} + +export const SizeXlFull: Story = { + name: 'Size:xl, Shape:full', + args: { + size: 'xl', + shape: 'full', + src: 'https://apollux.cssninja.io/img/avatars/16.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/16.svg', + }, +} + +export const Size2XlFull: Story = { + name: 'Size:2xl, Shape:full', + args: { + size: '2xl', + shape: 'full', + src: 'https://apollux.cssninja.io/img/avatars/12.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/12.svg', + }, +} + +export const Size3XlFull: Story = { + name: 'Size:3xl, Shape:full', + args: { + size: '3xl', + shape: 'full', + src: 'https://apollux.cssninja.io/img/avatars/2.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/2.svg', + }, +} + +export const Size4XlFull: Story = { + name: 'Size:4xl, Shape:full', + args: { + size: '4xl', + shape: 'full', + src: 'https://apollux.cssninja.io/img/avatars/10.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/10.svg', + }, +} +// #endregion + +// #region Size:curved +export const SizeXxsCurved: Story = { + name: 'Size:xxs, Shape:curved', + args: { + size: 'xxs', + shape: 'curved', + src: 'https://apollux.cssninja.io/img/avatars/1.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/1.svg', + }, +} + +export const SizeXsCurved: Story = { + name: 'Size:xs, Shape:curved', + args: { + size: 'xs', + shape: 'curved', + src: 'https://apollux.cssninja.io/img/avatars/15.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/15.svg', + }, +} + +export const SizeSmCurved: Story = { + name: 'Size:sm, Shape:curved', + args: { + size: 'sm', + shape: 'curved', + src: 'https://apollux.cssninja.io/img/avatars/24.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/24.svg', + }, +} + +export const SizeMdCurved: Story = { + name: 'Size:md, Shape:curved', + args: { + size: 'md', + shape: 'curved', + src: 'https://apollux.cssninja.io/img/avatars/3.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/3.svg', + }, +} + +export const SizeLgCurved: Story = { + name: 'Size:lg, Shape:curved', + args: { + size: 'lg', + shape: 'curved', + src: 'https://apollux.cssninja.io/img/avatars/8.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/8.svg', + }, +} + +export const SizeXlCurved: Story = { + name: 'Size:xl, Shape:curved', + args: { + size: 'xl', + shape: 'curved', + src: 'https://apollux.cssninja.io/img/avatars/16.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/16.svg', + }, +} + +export const Size2XlCurved: Story = { + name: 'Size:2xl, Shape:curved', + args: { + size: '2xl', + shape: 'curved', + src: 'https://apollux.cssninja.io/img/avatars/12.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/12.svg', + }, +} + +export const Size3XlCurved: Story = { + name: 'Size:3xl, Shape:curved', + args: { + size: '3xl', + shape: 'curved', + src: 'https://apollux.cssninja.io/img/avatars/2.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/2.svg', + }, +} + +export const Size4XlCurved: Story = { + name: 'Size:4xl, Shape:curved', + args: { + size: '4xl', + shape: 'curved', + src: 'https://apollux.cssninja.io/img/avatars/10.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/10.svg', + }, +} +// #endregion + +// #region Dot:full +export const DotXxsFull: Story = { + name: 'Dot:xxs, Shape:full', + args: { + size: 'xxs', + shape: 'full', + src: 'https://apollux.cssninja.io/img/avatars/1.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/1.svg', + dot: 'success', + }, +} + +export const DotXsFull: Story = { + name: 'Dot:xs, Shape:full', + args: { + size: 'xs', + shape: 'full', + src: 'https://apollux.cssninja.io/img/avatars/15.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/15.svg', + dot: 'info', + }, +} + +export const DotSmFull: Story = { + name: 'Dot:sm, Shape:full', + args: { + size: 'sm', + shape: 'full', + src: 'https://apollux.cssninja.io/img/avatars/24.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/24.svg', + dot: 'warning', + }, +} + +export const DotMdFull: Story = { + name: 'Dot:md, Shape:full', + args: { + size: 'md', + shape: 'full', + src: 'https://apollux.cssninja.io/img/avatars/3.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/3.svg', + dot: 'pink', + }, +} + +export const DotLgFull: Story = { + name: 'Dot:lg, Shape:full', + args: { + size: 'lg', + shape: 'full', + src: 'https://apollux.cssninja.io/img/avatars/8.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/8.svg', + dot: 'danger', + }, +} + +export const DotXlFull: Story = { + name: 'Dot:xl, Shape:full', + args: { + size: 'xl', + shape: 'full', + src: 'https://apollux.cssninja.io/img/avatars/16.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/16.svg', + dot: 'warning', + }, +} + +export const Dot2XlFull: Story = { + name: 'Dot:2xl, Shape:full', + args: { + size: '2xl', + shape: 'full', + src: 'https://apollux.cssninja.io/img/avatars/12.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/12.svg', + dot: 'info', + }, +} + +export const Dot3XlFull: Story = { + name: 'Dot:3xl, Shape:full', + args: { + size: '3xl', + shape: 'full', + src: 'https://apollux.cssninja.io/img/avatars/2.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/2.svg', + dot: 'success', + }, +} + +export const Dot4XlFull: Story = { + name: 'Dot:4xl, Shape:full', + args: { + size: '4xl', + shape: 'full', + src: 'https://apollux.cssninja.io/img/avatars/10.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/10.svg', + dot: 'primary', + }, +} +// #endregion + +// #region Dot:curved +export const DotXxsCurved: Story = { + name: 'Dot:xxs, Shape:curved', + args: { + size: 'xxs', + shape: 'curved', + src: 'https://apollux.cssninja.io/img/avatars/1.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/1.svg', + dot: 'success', + }, +} + +export const DotXsCurved: Story = { + name: 'Dot:xs, Shape:curved', + args: { + size: 'xs', + shape: 'curved', + src: 'https://apollux.cssninja.io/img/avatars/15.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/15.svg', + dot: 'info', + }, +} + +export const DotSmCurved: Story = { + name: 'Dot:sm, Shape:curved', + args: { + size: 'sm', + shape: 'curved', + src: 'https://apollux.cssninja.io/img/avatars/24.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/24.svg', + dot: 'warning', + }, +} + +export const DotMdCurved: Story = { + name: 'Dot:md, Shape:curved', + args: { + size: 'md', + shape: 'curved', + src: 'https://apollux.cssninja.io/img/avatars/3.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/3.svg', + dot: 'pink', + }, +} + +export const DotLgCurved: Story = { + name: 'Dot:lg, Shape:curved', + args: { + size: 'lg', + shape: 'curved', + src: 'https://apollux.cssninja.io/img/avatars/8.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/8.svg', + dot: 'danger', + }, +} + +export const DotXlCurved: Story = { + name: 'Dot:xl, Shape:curved', + args: { + size: 'xl', + shape: 'curved', + src: 'https://apollux.cssninja.io/img/avatars/16.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/16.svg', + dot: 'warning', + }, +} + +export const Dot2XlCurved: Story = { + name: 'Dot:2xl, Shape:curved', + args: { + size: '2xl', + shape: 'curved', + src: 'https://apollux.cssninja.io/img/avatars/12.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/12.svg', + dot: 'info', + }, +} + +export const Dot3XlCurved: Story = { + name: 'Dot:3xl, Shape:curved', + args: { + size: '3xl', + shape: 'curved', + src: 'https://apollux.cssninja.io/img/avatars/2.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/2.svg', + dot: 'success', + }, +} + +export const Dot4XlCurved: Story = { + name: 'Dot:4xl, Shape:curved', + args: { + size: '4xl', + shape: 'curved', + src: 'https://apollux.cssninja.io/img/avatars/10.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/10.svg', + dot: 'primary', + }, +} +// #endregion + +// #region Badge:full +export const BadgeXxsFull: Story = { + name: 'Badge:xxs, Shape:full', + args: { + size: 'xxs', + shape: 'full', + src: 'https://apollux.cssninja.io/img/avatars/1.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/1.svg', + badgeSrc: + 'https://tairo.cssninja.io/img/icons/flags/united-states-of-america.svg', + }, +} + +export const BadgeXsFull: Story = { + name: 'Badge:xs, Shape:full', + args: { + size: 'xs', + shape: 'full', + src: 'https://apollux.cssninja.io/img/avatars/15.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/15.svg', + badgeSrc: + 'https://tairo.cssninja.io/img/icons/flags/united-states-of-america.svg', + }, +} + +export const BadgeSmFull: Story = { + name: 'Badge:sm, Shape:full', + args: { + size: 'sm', + shape: 'full', + src: 'https://apollux.cssninja.io/img/avatars/24.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/24.svg', + badgeSrc: + 'https://tairo.cssninja.io/img/icons/flags/united-states-of-america.svg', + }, +} + +export const BadgeMdFull: Story = { + name: 'Badge:md, Shape:full', + args: { + size: 'md', + shape: 'full', + src: 'https://apollux.cssninja.io/img/avatars/3.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/3.svg', + badgeSrc: + 'https://tairo.cssninja.io/img/icons/flags/united-states-of-america.svg', + }, +} + +export const BadgeLgFull: Story = { + name: 'Badge:lg, Shape:full', + args: { + size: 'lg', + shape: 'full', + src: 'https://apollux.cssninja.io/img/avatars/8.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/8.svg', + badgeSrc: + 'https://tairo.cssninja.io/img/icons/flags/united-states-of-america.svg', + }, +} + +export const BadgeXlFull: Story = { + name: 'Badge:xl, Shape:full', + args: { + size: 'xl', + shape: 'full', + src: 'https://apollux.cssninja.io/img/avatars/16.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/16.svg', + badgeSrc: + 'https://tairo.cssninja.io/img/icons/flags/united-states-of-america.svg', + }, +} + +export const Badge2XlFull: Story = { + name: 'Badge:2xl, Shape:full', + args: { + size: '2xl', + shape: 'full', + src: 'https://apollux.cssninja.io/img/avatars/12.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/12.svg', + badgeSrc: + 'https://tairo.cssninja.io/img/icons/flags/united-states-of-america.svg', + }, +} + +export const Badge3XlFull: Story = { + name: 'Badge:3xl, Shape:full', + args: { + size: '3xl', + shape: 'full', + src: 'https://apollux.cssninja.io/img/avatars/2.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/2.svg', + badgeSrc: + 'https://tairo.cssninja.io/img/icons/flags/united-states-of-america.svg', + }, +} + +export const Badge4XlFull: Story = { + name: 'Badge:4xl, Shape:full', + args: { + size: '4xl', + shape: 'full', + src: 'https://apollux.cssninja.io/img/avatars/10.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/10.svg', + badgeSrc: + 'https://tairo.cssninja.io/img/icons/flags/united-states-of-america.svg', + }, +} +// #endregion + +// #region Badge:curved +export const BadgeXxsCurved: Story = { + name: 'Badge:xxs, Shape:curved', + args: { + size: 'xxs', + shape: 'curved', + src: 'https://apollux.cssninja.io/img/avatars/1.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/1.svg', + badgeSrc: + 'https://tairo.cssninja.io/img/icons/flags/united-states-of-america.svg', + }, +} + +export const BadgeXsCurved: Story = { + name: 'Badge:xs, Shape:curved', + args: { + size: 'xs', + shape: 'curved', + src: 'https://apollux.cssninja.io/img/avatars/15.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/15.svg', + badgeSrc: + 'https://tairo.cssninja.io/img/icons/flags/united-states-of-america.svg', + }, +} + +export const BadgeSmCurved: Story = { + name: 'Badge:sm, Shape:curved', + args: { + size: 'sm', + shape: 'curved', + src: 'https://apollux.cssninja.io/img/avatars/24.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/24.svg', + badgeSrc: + 'https://tairo.cssninja.io/img/icons/flags/united-states-of-america.svg', + }, +} + +export const BadgeMdCurved: Story = { + name: 'Badge:md, Shape:curved', + args: { + size: 'md', + shape: 'curved', + src: 'https://apollux.cssninja.io/img/avatars/3.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/3.svg', + badgeSrc: + 'https://tairo.cssninja.io/img/icons/flags/united-states-of-america.svg', + }, +} + +export const BadgeLgCurved: Story = { + name: 'Badge:lg, Shape:curved', + args: { + size: 'lg', + shape: 'curved', + src: 'https://apollux.cssninja.io/img/avatars/8.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/8.svg', + badgeSrc: + 'https://tairo.cssninja.io/img/icons/flags/united-states-of-america.svg', + }, +} + +export const BadgeXlCurved: Story = { + name: 'Badge:xl, Shape:curved', + args: { + size: 'xl', + shape: 'curved', + src: 'https://apollux.cssninja.io/img/avatars/16.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/16.svg', + badgeSrc: + 'https://tairo.cssninja.io/img/icons/flags/united-states-of-america.svg', + }, +} + +export const Badge2XlCurved: Story = { + name: 'Badge:2xl, Shape:curved', + args: { + size: '2xl', + shape: 'curved', + src: 'https://apollux.cssninja.io/img/avatars/12.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/12.svg', + badgeSrc: + 'https://tairo.cssninja.io/img/icons/flags/united-states-of-america.svg', + }, +} + +export const Badge3XlCurved: Story = { + name: 'Badge:3xl, Shape:curved', + args: { + size: '3xl', + shape: 'curved', + src: 'https://apollux.cssninja.io/img/avatars/2.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/2.svg', + badgeSrc: + 'https://tairo.cssninja.io/img/icons/flags/united-states-of-america.svg', + }, +} + +export const Badge4XlCurved: Story = { + name: 'Badge:4xl, Shape:curved', + args: { + size: '4xl', + shape: 'curved', + src: 'https://apollux.cssninja.io/img/avatars/10.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/10.svg', + badgeSrc: + 'https://tairo.cssninja.io/img/icons/flags/united-states-of-america.svg', + }, +} +// #endregion + +// #region Size:full:fake +export const SizeXxsFullFake: Story = { + name: 'Fake, Size:xxs, Shape:full', + args: { + size: 'xxs', + shape: 'full', + text: 'T', + color: 'primary', + }, +} + +export const SizeXsFullFake: Story = { + name: 'Fake, Size:xs, Shape:full', + args: { + size: 'xs', + shape: 'full', + text: 'T', + color: 'info', + }, +} + +export const SizeSmFullFake: Story = { + name: 'Fake, Size:sm, Shape:full', + args: { + size: 'sm', + shape: 'full', + text: 'T', + color: 'success', + }, +} + +export const SizeMdFullFake: Story = { + name: 'Fake, Size:md, Shape:full', + args: { + size: 'md', + shape: 'full', + text: 'T', + color: 'warning', + }, +} + +export const SizeLgFullFake: Story = { + name: 'Fake, Size:lg, Shape:full', + args: { + size: 'lg', + shape: 'full', + text: 'T', + color: 'danger', + }, +} + +export const SizeXlFullFake: Story = { + name: 'Fake, Size:xl, Shape:full', + args: { + size: 'xl', + shape: 'full', + text: 'T', + color: 'indigo', + }, +} + +export const Size2XlFullFake: Story = { + name: 'Fake, Size:2xl, Shape:full', + args: { + size: '2xl', + shape: 'full', + text: 'T', + color: 'yellow', + }, +} + +export const Size3XlFullFake: Story = { + name: 'Fake, Size:3xl, Shape:full', + args: { + size: '3xl', + shape: 'full', + text: 'T', + color: 'pink', + }, +} + +export const Size4XlFullFake: Story = { + name: 'Fake, Size:4xl, Shape:full', + args: { + size: '4xl', + shape: 'full', + text: 'T', + color: 'primary', + }, +} +// #endregion + +// #region Size:curved:fake +export const SizeXxsCurvedFake: Story = { + name: 'Fake, Size:xxs, Shape:curved', + args: { + size: 'xxs', + shape: 'curved', + text: 'T', + color: 'primary', + }, +} + +export const SizeXsCurvedFake: Story = { + name: 'Fake, Size:xs, Shape:curved', + args: { + size: 'xs', + shape: 'curved', + text: 'T', + color: 'info', + }, +} + +export const SizeSmCurvedFake: Story = { + name: 'Fake, Size:sm, Shape:curved', + args: { + size: 'sm', + shape: 'curved', + text: 'T', + color: 'success', + }, +} + +export const SizeMdCurvedFake: Story = { + name: 'Fake, Size:md, Shape:curved', + args: { + size: 'md', + shape: 'curved', + text: 'T', + color: 'warning', + }, +} + +export const SizeLgCurvedFake: Story = { + name: 'Fake, Size:lg, Shape:curved', + args: { + size: 'lg', + shape: 'curved', + text: 'T', + color: 'danger', + }, +} + +export const SizeXlCurvedFake: Story = { + name: 'Fake, Size:xl, Shape:curved', + args: { + size: 'xl', + shape: 'curved', + text: 'T', + color: 'indigo', + }, +} + +export const Size2XlCurvedFake: Story = { + name: 'Fake, Size:2xl, Shape:curved', + args: { + size: '2xl', + shape: 'curved', + text: 'T', + color: 'yellow', + }, +} + +export const Size3XlCurvedFake: Story = { + name: 'Fake, Size:3xl, Shape:curved', + args: { + size: '3xl', + shape: 'curved', + text: 'T', + color: 'pink', + }, +} + +export const Size4XlCurvedFake: Story = { + name: 'Fake, Size:4xl, Shape:curved', + args: { + size: '4xl', + shape: 'curved', + text: 'T', + color: 'primary', + }, +} +// #endregion + +// #region Size:full:fake:badge +export const SizeXxsFullFakeBadge: Story = { + name: 'Fake, Badge, Size:xxs, Shape:full', + args: { + size: 'xxs', + shape: 'full', + text: 'T', + color: 'primary', + badgeSrc: + 'https://tairo.cssninja.io/img/icons/flags/united-states-of-america.svg', + }, +} + +export const SizeXsFullFakeBadge: Story = { + name: 'Fake, Badge, Size:xs, Shape:full', + args: { + size: 'xs', + shape: 'full', + text: 'T', + color: 'info', + badgeSrc: + 'https://tairo.cssninja.io/img/icons/flags/united-states-of-america.svg', + }, +} + +export const SizeSmFullFakeBadge: Story = { + name: 'Fake, Badge, Size:sm, Shape:full', + args: { + size: 'sm', + shape: 'full', + text: 'T', + color: 'success', + badgeSrc: + 'https://tairo.cssninja.io/img/icons/flags/united-states-of-america.svg', + }, +} + +export const SizeMdFullFakeBadge: Story = { + name: 'Fake, Badge, Size:md, Shape:full', + args: { + size: 'md', + shape: 'full', + text: 'T', + color: 'warning', + badgeSrc: + 'https://tairo.cssninja.io/img/icons/flags/united-states-of-america.svg', + }, +} + +export const SizeLgFullFakeBadge: Story = { + name: 'Fake, Badge, Size:lg, Shape:full', + args: { + size: 'lg', + shape: 'full', + text: 'T', + color: 'danger', + badgeSrc: + 'https://tairo.cssninja.io/img/icons/flags/united-states-of-america.svg', + }, +} + +export const SizeXlFullFakeBadge: Story = { + name: 'Fake, Badge, Size:xl, Shape:full', + args: { + size: 'xl', + shape: 'full', + text: 'T', + color: 'indigo', + badgeSrc: + 'https://tairo.cssninja.io/img/icons/flags/united-states-of-america.svg', + }, +} + +export const Size2XlFullFakeBadge: Story = { + name: 'Fake, Badge, Size:2xl, Shape:full', + args: { + size: '2xl', + shape: 'full', + text: 'T', + color: 'yellow', + badgeSrc: + 'https://tairo.cssninja.io/img/icons/flags/united-states-of-america.svg', + }, +} + +export const Size3XlFullFakeBadge: Story = { + name: 'Fake, Badge, Size:3xl, Shape:full', + args: { + size: '3xl', + shape: 'full', + text: 'T', + color: 'pink', + badgeSrc: + 'https://tairo.cssninja.io/img/icons/flags/united-states-of-america.svg', + }, +} + +export const Size4XlFullFakeBadge: Story = { + name: 'Fake, Badge, Size:4xl, Shape:full', + args: { + size: '4xl', + shape: 'full', + text: 'T', + color: 'primary', + badgeSrc: + 'https://tairo.cssninja.io/img/icons/flags/united-states-of-america.svg', + }, +} +// #endregion + +// #region Size:curved:fake:badge +export const SizeXxsCurvedFakeBadge: Story = { + name: 'Fake, Badge, Size:xxs, Shape:curved', + args: { + size: 'xxs', + shape: 'curved', + text: 'T', + color: 'primary', + badgeSrc: + 'https://tairo.cssninja.io/img/icons/flags/united-states-of-america.svg', + }, +} + +export const SizeXsCurvedFakeBadge: Story = { + name: 'Fake, Badge, Size:xs, Shape:curved', + args: { + size: 'xs', + shape: 'curved', + text: 'T', + color: 'info', + badgeSrc: + 'https://tairo.cssninja.io/img/icons/flags/united-states-of-america.svg', + }, +} + +export const SizeSmCurvedFakeBadge: Story = { + name: 'Fake, Badge, Size:sm, Shape:curved', + args: { + size: 'sm', + shape: 'curved', + text: 'T', + color: 'success', + badgeSrc: + 'https://tairo.cssninja.io/img/icons/flags/united-states-of-america.svg', + }, +} + +export const SizeMdCurvedFakeBadge: Story = { + name: 'Fake, Badge, Size:md, Shape:curved', + args: { + size: 'md', + shape: 'curved', + text: 'T', + color: 'warning', + badgeSrc: + 'https://tairo.cssninja.io/img/icons/flags/united-states-of-america.svg', + }, +} + +export const SizeLgCurvedFakeBadge: Story = { + name: 'Fake, Badge, Size:lg, Shape:curved', + args: { + size: 'lg', + shape: 'curved', + text: 'T', + color: 'danger', + badgeSrc: + 'https://tairo.cssninja.io/img/icons/flags/united-states-of-america.svg', + }, +} + +export const SizeXlCurvedFakeBadge: Story = { + name: 'Fake, Badge, Size:xl, Shape:curved', + args: { + size: 'xl', + shape: 'curved', + text: 'T', + color: 'indigo', + badgeSrc: + 'https://tairo.cssninja.io/img/icons/flags/united-states-of-america.svg', + }, +} + +export const Size2XlCurvedFakeBadge: Story = { + name: 'Fake, Badge, Size:2xl, Shape:curved', + args: { + size: '2xl', + shape: 'curved', + text: 'T', + color: 'yellow', + badgeSrc: + 'https://tairo.cssninja.io/img/icons/flags/united-states-of-america.svg', + }, +} + +export const Size3XlCurvedFakeBadge: Story = { + name: 'Fake, Badge, Size:3xl, Shape:curved', + args: { + size: '3xl', + shape: 'curved', + text: 'T', + color: 'pink', + badgeSrc: + 'https://tairo.cssninja.io/img/icons/flags/united-states-of-america.svg', + }, +} + +export const Size4XlCurvedFakeBadge: Story = { + name: 'Fake, Badge, Size:4xl, Shape:curved', + args: { + size: '4xl', + shape: 'curved', + text: 'T', + color: 'primary', + badgeSrc: + 'https://tairo.cssninja.io/img/icons/flags/united-states-of-america.svg', + }, +} +// #endregion + +// #region Masks +export const MaskHex: Story = { + name: 'Mask: Hex', + args: { + size: 'xl', + shape: 'straight', + mask: 'hex', + src: 'https://apollux.cssninja.io/img/avatars/8.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/8.svg', + }, +} + +export const MaskHexed: Story = { + name: 'Mask: Hexed', + args: { + size: 'xl', + shape: 'straight', + mask: 'hexed', + src: 'https://apollux.cssninja.io/img/avatars/16.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/16.svg', + }, +} + +export const MaskBlob: Story = { + name: 'Mask: Blob', + args: { + size: 'xl', + shape: 'straight', + mask: 'blob', + src: 'https://apollux.cssninja.io/img/avatars/12.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/12.svg', + }, +} + +export const MaskDeca: Story = { + name: 'Mask: Decagon', + args: { + size: 'xl', + shape: 'straight', + mask: 'deca', + src: 'https://apollux.cssninja.io/img/avatars/2.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/2.svg', + }, +} + +export const MaskDiamond: Story = { + name: 'Mask: Diamond', + args: { + size: 'xl', + shape: 'straight', + mask: 'diamond', + src: 'https://apollux.cssninja.io/img/avatars/10.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/10.svg', + }, +} +// #endregion + +// #region Slot:default +export const SlotDefault: Story = { + name: 'Default slot', + args: { + size: '2xl', + shape: 'straight', + children: html` + Polygon slot + `, + }, +} + +export const SlotBadge: Story = { + name: 'Badge slot', + args: { + size: '2xl', + shape: 'full', + src: 'https://apollux.cssninja.io/img/avatars/20.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/20.svg', + badge: html` +
+ 2 +
+ `, + }, +} +// #endregion diff --git a/src/plugins/components/avatar/avatar.test.ts b/src/plugins/components/avatar/avatar.test.ts new file mode 100644 index 0000000..c8bd822 --- /dev/null +++ b/src/plugins/components/avatar/avatar.test.ts @@ -0,0 +1,33 @@ +import { axe } from 'vitest-axe' +import { expect, test, describe } from 'vitest' +import { render, html } from 'lit' + +import { Avatar } from './avatar.component' + +describe('Avatar', () => { + test('Should render slot', () => { + const avatar = Avatar({ + src: 'https://apollux.cssninja.io/img/avatars/10.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/10.svg', + }) + + render(avatar, document.body) + + expect(document.body.querySelector('.nui-avatar')?.outerHTML)?.toContain( + 'img', + ) + }) + + test('Should have no axe violations', async () => { + const avatar = Avatar({ + src: 'https://apollux.cssninja.io/img/avatars/10.svg', + srcDark: 'https://apollux.cssninja.io/img/avatars/10.svg', + }) + + render(avatar, document.body) + + expect( + await axe(document.body.querySelector('.nui-avatar')!.outerHTML), + )?.toHaveNoViolations() + }) +}) diff --git a/src/plugins/components/avatar/avatar.types.ts b/src/plugins/components/avatar/avatar.types.ts new file mode 100644 index 0000000..70e886a --- /dev/null +++ b/src/plugins/components/avatar/avatar.types.ts @@ -0,0 +1,51 @@ +import type { PropertyVariant } from '~/types/utils' + +export interface AvatarProps extends Record { + src?: string + srcDark?: string + badgeSrc?: string + text?: string + size?: 'xxs' | 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | '3xl' | '4xl' + shape?: 'straight' | 'rounded' | 'curved' | 'full' + mask?: 'hex' | 'hexed' | 'deca' | 'blob' | 'diamond' + color?: + | 'white' + | 'muted' + | 'primary' + | 'success' + | 'info' + | 'warning' + | 'danger' + | 'pink' + | 'yellow' + | 'indigo' + | 'violet' + dot?: + | boolean + | 'primary' + | 'success' + | 'info' + | 'warning' + | 'danger' + | 'pink' + | 'yellow' + ring?: + | boolean + | 'primary' + | 'success' + | 'info' + | 'warning' + | 'danger' + | 'pink' + | 'yellow' +} + +export interface AvatarEvents {} + +export interface AvatarSlots { + children?: any + badge?: any +} + +export type AvatarAttrs = AvatarProps & AvatarEvents & AvatarSlots +export type AvatarVariant = PropertyVariant diff --git a/src/plugins/components/avatar/avatar.variants.ts b/src/plugins/components/avatar/avatar.variants.ts new file mode 100644 index 0000000..635184f --- /dev/null +++ b/src/plugins/components/avatar/avatar.variants.ts @@ -0,0 +1,62 @@ +import type { AvatarVariant } from './avatar.types' + +export const dot = { + success: 'nui-dot-success', + primary: 'nui-dot-primary', + info: 'nui-dot-info', + warning: 'nui-dot-warning', + danger: 'nui-dot-danger', + pink: 'nui-dot-pink', + yellow: 'nui-dot-yellow', +} as const satisfies AvatarVariant<'dot'> + +export const ring = { + success: 'nui-ring-success', + primary: 'nui-ring-primary', + info: 'nui-ring-info', + warning: 'nui-ring-warning', + danger: 'nui-ring-danger', + pink: 'nui-ring-pink', + yellow: 'nui-ring-yellow', +} as const satisfies AvatarVariant<'ring'> + +export const size = { + xxs: 'nui-avatar-xxs', + xs: 'nui-avatar-xs', + sm: 'nui-avatar-sm', + md: 'nui-avatar-md', + lg: 'nui-avatar-lg', + xl: 'nui-avatar-xl', + '2xl': 'nui-avatar-2xl', + '3xl': 'nui-avatar-3xl', + '4xl': 'nui-avatar-4xl', +} as const satisfies AvatarVariant<'size'> + +export const shape = { + straight: 'nui-avatar-straight', + rounded: 'nui-avatar-rounded', + curved: 'nui-avatar-curved', + full: 'nui-avatar-full', +} as const satisfies AvatarVariant<'shape'> + +export const mask = { + hex: 'nui-mask-hex', + hexed: 'nui-mask-hexed', + deca: 'nui-mask-deca', + blob: 'nui-mask-blob', + diamond: 'nui-mask-diamond', +} as const satisfies AvatarVariant<'mask'> + +export const color = { + white: 'bg-white dark:bg-muted-800 text-muted-600 dark:text-muted-200', + muted: 'bg-muted-100 dark:bg-muted-800 text-muted-600 dark:text-muted-200', + primary: 'bg-primary-500/20 text-primary-500', + info: 'bg-info-500/20 text-info-500', + success: 'bg-success-500/20 text-success-500', + warning: 'bg-warning-500/20 text-warning-500', + danger: 'bg-danger-500/20 text-danger-500', + yellow: 'bg-yellow-500/20 text-yellow-400', + pink: 'bg-pink-500/20 text-pink-400', + indigo: 'bg-indigo-500/20 text-indigo-500', + violet: 'bg-violet-500/20 text-violet-500', +} as const satisfies AvatarVariant<'color'> diff --git a/src/plugins/components/avatar.ts b/src/plugins/components/avatar/index.ts similarity index 83% rename from src/plugins/components/avatar.ts rename to src/plugins/components/avatar/index.ts index 16adf68..be7655e 100644 --- a/src/plugins/components/avatar.ts +++ b/src/plugins/components/avatar/index.ts @@ -1,8 +1,8 @@ import plugin from 'tailwindcss/plugin' import { defu } from 'defu' -import { type PluginOption, defaultPluginOptions } from '../options' +import { type PluginOption, defaultPluginOptions } from '../../options' -const defaultAvatarConfig = { +export const defaultAvatarConfig = { avatarInner: { size: 'full', duration: '300', @@ -268,7 +268,7 @@ export default plugin.withOptions( [`@apply dark:bg-${config.avatarBadge.bgDark} absolute z-10 block overflow-hidden rounded-${config.avatarBadge.rounded} bg-${config.avatarBadge.bg}`]: {}, - [`.badge-img`]: { + [`.${prefix}badge-img`]: { [`@apply relative h-${config.avatarBadge.img.size} w-${config.avatarBadge.img.size} scale-90 rounded-${config.avatarBadge.img.rounded} object-cover`]: {}, }, @@ -354,25 +354,38 @@ export default plugin.withOptions( [`.${prefix}avatar-text`]: { [`@apply text-${config.avatarXXS.text}`]: {}, }, - [`&.${prefix}avatar-straight, .${prefix}avatar-inner`]: { + [`&.${prefix}avatar-straight`]: { [`@apply rounded-none`]: {}, + [`.${prefix}avatar-inner`]: { + [`@apply rounded-none`]: {}, + }, + [`.${prefix}avatar-dot`]: { [`@apply end-${config.avatarXXS.straightPosition} top-${config.avatarXXS.straightPosition}`]: {}, }, }, - [`&.${prefix}avatar-rounded, .${prefix}avatar-inner`]: { + [`&.${prefix}avatar-rounded`]: { [`@apply rounded`]: {}, + [`.${prefix}avatar-inner`]: { + [`@apply rounded`]: {}, + }, + [`.${prefix}avatar-dot`]: { [`@apply end-${config.avatarXXS.roundedOrInnerDotPosition} top-${config.avatarXXS.roundedOrInnerDotPosition}`]: {}, }, }, - [`&.${prefix}avatar-curved, .${prefix}avatar-inner`]: { + [`&.${prefix}avatar-curved`]: { [`@apply rounded-${config.avatarXXS.curvedOrInner.rounded}`]: {}, + [`.${prefix}avatar-inner`]: { + [`@apply rounded-${config.avatarXXS.curvedOrInner.rounded}`]: + {}, + }, + [`.${prefix}avatar-dot`]: { [`@apply end-${config.avatarXXS.curvedOrInner.dotPosition} top-${config.avatarXXS.curvedOrInner.dotPosition}`]: {}, @@ -399,25 +412,37 @@ export default plugin.withOptions( [`.${prefix}avatar-text`]: { [`@apply text-${config.avatarXS.text}`]: {}, }, - [`&.${prefix}avatar-straight, .${prefix}avatar-inner`]: { + [`&.${prefix}avatar-straight`]: { [`@apply rounded-none`]: {}, + [`.${prefix}avatar-inner`]: { + [`@apply rounded-none`]: {}, + }, + [`.${prefix}avatar-dot`]: { [`@apply end-${config.avatarXS.straightPosition} top-${config.avatarXS.straightPosition}`]: {}, }, }, - [`&.${prefix}avatar-rounded, .${prefix}avatar-inner`]: { + [`&.${prefix}avatar-rounded`]: { [`@apply rounded`]: {}, + [`.${prefix}avatar-inner`]: { + [`@apply rounded`]: {}, + }, + [`.${prefix}avatar-dot`]: { [`@apply end-${config.avatarXS.roundedOrInnerDotPosition} top-${config.avatarXS.roundedOrInnerDotPosition}`]: {}, }, }, - [`&.${prefix}avatar-curved, .${prefix}avatar-inner`]: { + [`&.${prefix}avatar-curved`]: { [`@apply rounded-${config.avatarXS.curvedOrInner.rounded}`]: {}, + [`.${prefix}avatar-inner`]: { + [`@apply rounded-${config.avatarXS.curvedOrInner.rounded}`]: {}, + }, + [`.${prefix}avatar-dot`]: { [`@apply end-${config.avatarXS.curvedOrInner.dotPosition} top-${config.avatarXS.curvedOrInner.dotPosition}`]: {}, @@ -444,25 +469,38 @@ export default plugin.withOptions( [`.${prefix}avatar-text`]: { [`@apply text-${config.avatarSM.text}`]: {}, }, - [`&.${prefix}avatar-straight, .${prefix}avatar-inner`]: { + [`&.${prefix}avatar-straight`]: { [`@apply rounded-none`]: {}, + [`.${prefix}avatar-inner`]: { + [`@apply rounded-none`]: {}, + }, + [`.${prefix}avatar-dot`]: { [`@apply end-${config.avatarSM.straightPosition} top-${config.avatarSM.straightPosition}`]: {}, }, }, - [`&.${prefix}avatar-rounded, .${prefix}avatar-inner`]: { + [`&.${prefix}avatar-rounded`]: { [`@apply rounded-${config.avatarSM.roundedOrInner.rounded}`]: {}, + [`.${prefix}avatar-inner`]: { + [`@apply rounded-${config.avatarSM.roundedOrInner.rounded}`]: + {}, + }, + [`.${prefix}avatar-dot`]: { [`@apply end-${config.avatarSM.roundedOrInner.dotPosition} top-${config.avatarSM.roundedOrInner.dotPosition}`]: {}, }, }, - [`&.${prefix}avatar-curved, .${prefix}avatar-inner`]: { + [`&.${prefix}avatar-curved`]: { [`@apply rounded-${config.avatarSM.curvedOrInner.rounded}`]: {}, + [`.${prefix}avatar-inner`]: { + [`@apply rounded-${config.avatarSM.curvedOrInner.rounded}`]: {}, + }, + [`.${prefix}avatar-dot`]: { [`@apply end-${config.avatarSM.curvedOrInner.dotPosition} top-${config.avatarSM.curvedOrInner.dotPosition}`]: {}, @@ -489,25 +527,38 @@ export default plugin.withOptions( [`.${prefix}avatar-text`]: { [`@apply text-${config.avatarMD.text}`]: {}, }, - [`&.${prefix}avatar-straight, .${prefix}avatar-inner`]: { + [`&.${prefix}avatar-straight`]: { [`@apply rounded-none`]: {}, + [`.${prefix}avatar-inner`]: { + [`@apply rounded-none`]: {}, + }, + [`.${prefix}avatar-dot`]: { [`@apply end-${config.avatarMD.straightPosition} top-${config.avatarMD.straightPosition}`]: {}, }, }, - [`&.${prefix}avatar-rounded, .${prefix}avatar-inner`]: { + [`&.${prefix}avatar-rounded`]: { [`@apply rounded-${config.avatarMD.roundedOrInner.rounded}`]: {}, + [`.${prefix}avatar-inner`]: { + [`@apply rounded-${config.avatarMD.roundedOrInner.rounded}`]: + {}, + }, + [`.${prefix}avatar-dot`]: { [`@apply end-${config.avatarMD.roundedOrInner.dotPosition} top-${config.avatarMD.roundedOrInner.dotPosition}`]: {}, }, }, - [`&.${prefix}avatar-curved, .${prefix}avatar-inner`]: { + [`&.${prefix}avatar-curved`]: { [`@apply rounded-${config.avatarMD.curvedOrInner.rounded}`]: {}, + [`.${prefix}avatar-inner`]: { + [`@apply rounded-${config.avatarMD.curvedOrInner.rounded}`]: {}, + }, + [`.${prefix}avatar-dot`]: { [`@apply end-${config.avatarMD.curvedOrInner.dotPosition} top-${config.avatarMD.curvedOrInner.dotPosition}`]: {}, @@ -534,25 +585,38 @@ export default plugin.withOptions( [`.${prefix}avatar-text`]: { [`@apply text-${config.avatarLG.text}`]: {}, }, - [`&.${prefix}avatar-straight, .${prefix}avatar-inner`]: { + [`&.${prefix}avatar-straight`]: { [`@apply rounded-none`]: {}, + [`.${prefix}avatar-inner`]: { + [`@apply rounded-none`]: {}, + }, + [`.${prefix}avatar-dot`]: { [`@apply end-${config.avatarLG.straightPosition} top-${config.avatarLG.straightPosition}`]: {}, }, }, - [`&.${prefix}avatar-rounded, .${prefix}avatar-inner`]: { + [`&.${prefix}avatar-rounded`]: { [`@apply rounded-${config.avatarLG.roundedOrInner.rounded}`]: {}, + [`.${prefix}avatar-inner`]: { + [`@apply rounded-${config.avatarLG.roundedOrInner.rounded}`]: + {}, + }, + [`.${prefix}avatar-dot`]: { [`@apply end-${config.avatarLG.roundedOrInner.dotPosition} top-${config.avatarLG.roundedOrInner.dotPosition}`]: {}, }, }, - [`&.${prefix}avatar-curved, .${prefix}avatar-inner`]: { + [`&.${prefix}avatar-curved`]: { [`@apply rounded-${config.avatarLG.curvedOrInner.rounded}`]: {}, + [`.${prefix}avatar-inner`]: { + [`@apply rounded-${config.avatarLG.curvedOrInner.rounded}`]: {}, + }, + [`.${prefix}avatar-dot`]: { [`@apply end-${config.avatarLG.curvedOrInner.dotPosition} top-${config.avatarLG.curvedOrInner.dotPosition}`]: {}, @@ -579,25 +643,38 @@ export default plugin.withOptions( [`.${prefix}avatar-text`]: { [`@apply text-${config.avatarXL.text}`]: {}, }, - [`&.${prefix}avatar-straight, .${prefix}avatar-inner`]: { + [`&.${prefix}avatar-straight`]: { [`@apply rounded-none`]: {}, + [`.${prefix}avatar-inner`]: { + [`@apply rounded-none`]: {}, + }, + [`.${prefix}avatar-dot`]: { [`@apply end-${config.avatarXL.straightPosition} top-${config.avatarXL.straightPosition}`]: {}, }, }, - [`&.${prefix}avatar-rounded, .${prefix}avatar-inner`]: { + [`&.${prefix}avatar-rounded`]: { [`@apply rounded-${config.avatarXL.roundedOrInner.rounded}`]: {}, + [`.${prefix}avatar-inner`]: { + [`@apply rounded-${config.avatarXL.roundedOrInner.rounded}`]: + {}, + }, + [`.${prefix}avatar-dot`]: { [`@apply end-${config.avatarXL.roundedOrInner.dotPosition} top-${config.avatarXL.roundedOrInner.dotPosition}`]: {}, }, }, - [`&.${prefix}avatar-curved, .${prefix}avatar-inner`]: { + [`&.${prefix}avatar-curved`]: { [`@apply rounded-${config.avatarXL.curvedOrInner.rounded}`]: {}, + [`.${prefix}avatar-inner`]: { + [`@apply rounded-${config.avatarXL.curvedOrInner.rounded}`]: {}, + }, + [`.${prefix}avatar-dot`]: { [`@apply end-${config.avatarXL.curvedOrInner.dotPosition} top-${config.avatarXL.curvedOrInner.dotPosition}`]: {}, @@ -625,25 +702,39 @@ export default plugin.withOptions( [`.${prefix}avatar-text`]: { [`@apply text-${config.avatar2XL.text}`]: {}, }, - [`&.${prefix}avatar-straight, .${prefix}avatar-inner`]: { + [`&.${prefix}avatar-straight`]: { [`@apply rounded-none`]: {}, + [`.${prefix}avatar-inner`]: { + [`@apply rounded-none`]: {}, + }, + [`.${prefix}avatar-dot`]: { [`@apply end-${config.avatar2XL.straightPosition} top-${config.avatar2XL.straightPosition}`]: {}, }, }, - [`&.${prefix}avatar-rounded, .${prefix}avatar-inner`]: { + [`&.${prefix}avatar-rounded`]: { [`@apply rounded-${config.avatar2XL.roundedOrInner.rounded}`]: {}, + [`.${prefix}avatar-inner`]: { + [`@apply rounded-${config.avatar2XL.roundedOrInner.rounded}`]: + {}, + }, + [`.${prefix}avatar-dot`]: { [`@apply end-${config.avatar2XL.roundedOrInner.dotPosition} top-${config.avatar2XL.roundedOrInner.dotPosition}`]: {}, }, }, - [`&.${prefix}avatar-curved, .${prefix}avatar-inner`]: { + [`&.${prefix}avatar-curved`]: { [`@apply rounded-${config.avatar2XL.curvedOrInner.rounded}`]: {}, + [`.${prefix}avatar-inner`]: { + [`@apply rounded-${config.avatar2XL.curvedOrInner.rounded}`]: + {}, + }, + [`.${prefix}avatar-dot`]: { [`@apply end-${config.avatar2XL.curvedOrInner.dotPosition} top-${config.avatar2XL.curvedOrInner.dotPosition}`]: {}, @@ -671,25 +762,39 @@ export default plugin.withOptions( [`.${prefix}avatar-text`]: { [`@apply text-${config.avatar3XL.text}`]: {}, }, - [`&.${prefix}avatar-straight, .${prefix}avatar-inner`]: { + [`&.${prefix}avatar-straight`]: { [`@apply rounded-none`]: {}, + [`.${prefix}avatar-inner`]: { + [`@apply rounded-none`]: {}, + }, + [`.${prefix}avatar-dot`]: { [`@apply end-${config.avatar3XL.straightPosition} top-${config.avatar3XL.straightPosition}`]: {}, }, }, - [`&.${prefix}avatar-rounded, .${prefix}avatar-inner`]: { + [`&.${prefix}avatar-rounded`]: { [`@apply rounded-${config.avatar3XL.roundedOrInner.rounded}`]: {}, + [`.${prefix}avatar-inner`]: { + [`@apply rounded-${config.avatar3XL.roundedOrInner.rounded}`]: + {}, + }, + [`.${prefix}avatar-dot`]: { [`@apply end-${config.avatar3XL.roundedOrInner.dotPosition} top-${config.avatar3XL.roundedOrInner.dotPosition}`]: {}, }, }, - [`&.${prefix}avatar-curved, .${prefix}avatar-inner`]: { + [`&.${prefix}avatar-curved`]: { [`@apply rounded-${config.avatar3XL.curvedOrInner.rounded}`]: {}, + [`.${prefix}avatar-inner`]: { + [`@apply rounded-${config.avatar3XL.curvedOrInner.rounded}`]: + {}, + }, + [`.${prefix}avatar-dot`]: { [`@apply end-${config.avatar3XL.curvedOrInner.dotPosition} top-${config.avatar3XL.curvedOrInner.dotPosition}`]: {}, @@ -717,17 +822,26 @@ export default plugin.withOptions( [`.${prefix}avatar-text`]: { [`@apply text-${config.avatar4XL.text}`]: {}, }, - [`&.${prefix}avatar-straight, .${prefix}avatar-inner`]: { + [`&.${prefix}avatar-straight`]: { [`@apply rounded-none`]: {}, + [`.${prefix}avatar-inner`]: { + [`@apply rounded-none`]: {}, + }, + [`.${prefix}avatar-dot`]: { [`@apply end-${config.avatar4XL.straightPosition} top-${config.avatar4XL.straightPosition}`]: {}, }, }, - [`&.${prefix}avatar-rounded, .${prefix}avatar-inner`]: { + [`&.${prefix}avatar-rounded`]: { [`@apply rounded-${config.avatar4XL.roundedOrInner.rounded}`]: {}, + [`.${prefix}avatar-inner`]: { + [`@apply rounded-${config.avatar4XL.roundedOrInner.rounded}`]: + {}, + }, + [`.${prefix}avatar-dot`]: { [`@apply end-${config.avatar4XL.roundedOrInner.dotPosition} top-${config.avatar4XL.roundedOrInner.dotPosition}`]: {}, @@ -736,6 +850,11 @@ export default plugin.withOptions( [`&.${prefix}avatar-curved, .${prefix}avatar-inner`]: { [`@apply rounded-${config.avatar4XL.curvedOrInner.rounded}`]: {}, + [`.${prefix}avatar-inner`]: { + [`@apply rounded-${config.avatar4XL.curvedOrInner.rounded}`]: + {}, + }, + [`.${prefix}avatar-dot`]: { [`@apply end-${config.avatar4XL.curvedOrInner.dotPosition} top-${config.avatar4XL.curvedOrInner.dotPosition}`]: {}, @@ -753,7 +872,7 @@ export default plugin.withOptions( [`@apply rounded-${config.avatarFull.rounded}`]: {}, [`.${prefix}avatar-inner`]: { - [`@apply rounded-${config.avatarFull.avatarInnerRounded}`]: {}, + [`@apply rounded-${config.avatarFull.rounded}`]: {}, }, [`.${prefix}avatar-badge`]: {