@descope-ui/descope-avatar 0.0.1

package/e2e/descope-avatar.spec.ts

@@ -0,0 +1,54 @@
+import { test, expect } from '@playwright/test';
+import { getStoryUrl, loopConfig, loopPresets } from 'e2e-utils';
+
+const img =
+  'https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcSzmudcbKkbOue75DaM9HDDrt0W39SJLBH-3HPK3s-K1w&s';
+
+const componentAttributes = {
+  size: ['xs', 'sm', 'md', 'lg'],
+  editable: ['true', 'false'],
+  img: [img],
+};
+
+const presets = {
+  'direction rtl': {
+    direction: 'rtl',
+    editable: 'true',
+  },
+  'no image': {
+    img: '',
+    'display-name': 'John Doe',
+  },
+  'no image and name': {
+    img: '',
+    'display-name': '',
+  },
+};
+
+const storyName = 'descope-avatar';
+const componentName = 'descope-avatar';
+
+test.describe('theme', () => {
+  loopConfig(componentAttributes, (attr, value) => {
+    test.describe(`${attr}: ${value}`, () => {
+      test.beforeEach(async ({ page }) => {
+        await page.goto(getStoryUrl(storyName, { text: 'Text 123', [attr]: value }), { waitUntil: 'load' });
+      });
+      test('style', async ({ page }) => {
+        const componentParent = page.locator(componentName);
+
+        expect(await componentParent.screenshot()).toMatchSnapshot();
+      });
+    });
+  });
+
+  loopPresets(presets, (preset, name) => {
+    test(name, async ({ page }) => {
+      await page.goto(getStoryUrl(storyName, preset));
+      await page.waitForSelector(componentName);
+      const component = page.locator(componentName);
+      expect(
+        await component.screenshot({ animations: 'disabled', timeout: 3000, caret: 'hide' })
+      ).toMatchSnapshot();
+    });
+  });});

package/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "@descope-ui/descope-avatar",
+  "version": "0.0.1",
+  "exports": {
+    ".": {
+      "import": "./src/component/index.js"
+    },
+    "./theme": {
+      "import": "./src/theme.js"
+    },
+    "./class": {
+      "import": "./src/component/AvatarClass.js"
+    }
+  },
+  "devDependencies": {
+    "@playwright/test": "1.38.1",
+    "e2e-utils": "0.0.1"
+  },
+  "dependencies": {
+    "@descope-ui/common": "0.0.1",
+    "@descope-ui/theme-globals": "0.0.1",
+    "@vaadin/avatar": "24.3.4",
+    "@vaadin/icon": "24.3.4",
+    "@vaadin/icons": "24.3.4"
+  },
+  "publishConfig": {
+    "link-workspace-packages": false
+  },
+  "scripts": {
+    "test": "echo 'No tests defined' && exit 0",
+    "test:e2e": "echo 'No e2e tests defined' && exit 0"
+  }
+}

package/project.json

@@ -0,0 +1,7 @@
+{
+  "name": "@descope-ui/descope-avatar",
+  "$schema": "../../node_modules/nx/schemas/project-schema.json",
+  "sourceRoot": "packages/web-components/components/descope-avatar/src",
+  "projectType": "library",
+  "tags": []
+}

package/src/component/AvatarClass.js

@@ -0,0 +1,123 @@
+import {
+  createStyleMixin,
+  draggableMixin,
+  componentNameValidationMixin,
+} from '@descope-ui/common/components-mixins';
+import { createBaseClass } from '@descope-ui/common/base-classes';
+import { compose } from '@descope-ui/common/utils';
+import {
+  forwardAttrs,
+  getComponentName,
+  observeAttributes,
+} from '@descope-ui/common/components-helpers';
+
+export const componentName = getComponentName('avatar');
+class RawAvatar extends createBaseClass({
+  componentName,
+  baseSelector: ':host > .wrapper',
+}) {
+  constructor() {
+    super();
+
+    this.attachShadow({ mode: 'open' }).innerHTML = `
+			<style>
+				:host {
+					display: inline-flex;
+				}
+
+        .editableBadge {
+          border: 1px solid;
+          border-radius: 100%;
+          height: fit-content;
+          width: 25%;
+          height: 25%;
+          display: flex;
+          justify-content: center;
+          align-items: center;
+          padding: 5%;
+          box-sizing: border-box;
+          position: absolute;
+          bottom: 0;
+          inset-inline-end: 0;
+        }
+
+        vaadin-icon {
+          color: currentcolor;
+        }
+
+        vaadin-avatar {
+          width: 100%;
+          height: 100%;
+          margin: 0;
+          border: none
+        }
+
+        .wrapper {
+          display: inline-flex;
+          position: relative;
+          width: 100%;
+          height: 100%;
+        }
+      </style>
+
+
+      <div class="wrapper">
+        <vaadin-avatar></vaadin-avatar>
+        <div class="editableBadge">
+          <vaadin-icon icon="vaadin:pencil"></vaadin-icon>
+        </div>
+      </div>
+		`;
+
+    this.avatarComponent = this.shadowRoot.querySelector('vaadin-avatar');
+
+    forwardAttrs(this, this.avatarComponent, {
+      includeAttrs: ['display-name', 'img', 'abbr'],
+      mapAttrs: { 'display-name': 'name' },
+    });
+
+    const editableIcon = this.shadowRoot.querySelector('.editableBadge');
+
+    observeAttributes(
+      this,
+      () => {
+        editableIcon.style.display = this.isEditable ? '' : 'none';
+      },
+      { includeAttrs: ['editable'] },
+    );
+  }
+
+  get isEditable() {
+    return this.getAttribute('editable') === 'true';
+  }
+}
+
+const { host, editableBadge, avatar } = {
+  host: { selector: () => ':host' },
+  editableBadge: { selector: '> .editableBadge' },
+  avatar: { selector: 'vaadin-avatar' },
+};
+
+export const AvatarClass = compose(
+  createStyleMixin({
+    mappings: {
+      hostWidth: [
+        { ...host, property: 'width' },
+        { ...host, property: 'min-width' },
+      ],
+      hostHeight: { ...host, property: 'height' },
+      cursor: [avatar, host],
+      hostDirection: { ...host, property: 'direction' },
+      avatarTextColor: { ...avatar, property: 'color' },
+      avatarBackgroundColor: { ...avatar, property: 'background-color' },
+      editableIconColor: { ...editableBadge, property: 'color' },
+      editableBorderColor: { ...editableBadge, property: 'border-color' },
+      editableBackgroundColor: {
+        ...editableBadge,
+        property: 'background-color',
+      },
+    },
+  }),
+  draggableMixin,
+  componentNameValidationMixin,
+)(RawAvatar);

package/src/component/index.js

@@ -0,0 +1,8 @@
+import { componentName, AvatarClass } from './AvatarClass';
+import '@vaadin/avatar';
+import '@vaadin/icon';
+import '@vaadin/icons';
+
+customElements.define(componentName, AvatarClass);
+
+export { AvatarClass };

package/src/theme.js

@@ -0,0 +1,44 @@
+import globals from '@descope-ui/theme-globals';
+import { AvatarClass } from './component/AvatarClass';
+import { getThemeRefs } from '@descope-ui/common/theme-helpers';
+
+const globalRefs = getThemeRefs(globals);
+const compVars = AvatarClass.cssVarList;
+
+const avatar = {
+  [compVars.hostDirection]: globalRefs.direction,
+  [compVars.editableIconColor]: globalRefs.colors.surface.dark,
+  [compVars.editableBorderColor]: globalRefs.colors.surface.dark,
+  [compVars.editableBackgroundColor]: globalRefs.colors.surface.main,
+  [compVars.avatarTextColor]: globalRefs.colors.surface.main,
+  [compVars.avatarBackgroundColor]: globalRefs.colors.surface.dark,
+
+  _editable: {
+    [compVars.cursor]: 'pointer',
+  },
+
+  size: {
+    xs: {
+      [compVars.hostWidth]: '30px',
+      [compVars.hostHeight]: '30px',
+    },
+    sm: {
+      [compVars.hostWidth]: '40px',
+      [compVars.hostHeight]: '40px',
+    },
+    md: {
+      [compVars.hostWidth]: '60px',
+      [compVars.hostHeight]: '60px',
+    },
+    lg: {
+      [compVars.hostWidth]: '98px',
+      [compVars.hostHeight]: '98px',
+    },
+  },
+};
+
+export default avatar;
+
+export const vars = {
+  ...compVars,
+};

package/stories/descope-avatar.stories.js

@@ -0,0 +1,32 @@
+import { componentName } from '../src/component/AvatarClass';
+import { directionControl, sizeControl } from '@descope-ui/common/sb-controls';
+import img from './avatar.jpeg'
+
+const Template = ({ 'display-name': displayName, img, size, editable, direction }) => `
+  <descope-avatar
+    display-name="${displayName || ''}"
+    img="${img}"
+    size="${size}"
+    editable="${editable || ''}"
+    st-host-direction="${direction ?? ''}">
+  ></descope-avatar
+`;
+
+export default {
+  component: componentName,
+  title: 'descope-avatar',
+  argTypes: {
+    ...sizeControl,
+    ...directionControl,
+  },
+};
+
+export const Default = Template.bind({});
+
+Default.args = {
+  img: img,
+  'display-name': 'John Doe',
+  size: 'sm',
+  editable: false,
+  direction: ''
+};