Skip to content

Commit

Permalink
feat(avatar): DLT-1916 remove dt-icon from Avatar vue 2 (#474)
Browse files Browse the repository at this point in the history 
Co-authored-by: Julio Ortega <[email protected]>
  • Loading branch information
@ninamarina @juliodialpad
ninamarina and juliodialpad committed Sep 6, 2024
1 parent a584a7f commit e8600c3
Show file tree
Hide file tree
Showing 18 changed files with 439 additions and 139 deletions.
98 changes: 77 additions & 21 deletions apps/dialtone-documentation/docs/components/avatar.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,18 +9,22 @@ figma_url: https://www.figma.com/file/2adf7JhZOncRyjYiy2joil/DT-Core%3A-Componen
---

<code-well-header>
<div class="d-d-flex d-ai-center d-flow16">
<dt-avatar size="lg" icon-name="user" icon-size="500" />
<dt-avatar size="lg" full-name="dp" color="1000" presence="busy" />
<dt-avatar size="lg" image-src="/assets/images/person.png" image-alt="avatar user" presence="active" />
</div>
<div class="d-d-flex d-ai-center d-flow16">
<dt-avatar size="lg">
<template #icon="{ iconSize }">
<dt-icon-user :size="iconSize" />
</template>
</dt-avatar>
<dt-avatar size="lg" full-name="dp" color="1000" presence="busy" />
<dt-avatar size="lg" image-src="/assets/images/person.png" image-alt="avatar user" presence="active" />
</div>
</code-well-header>

<!-- <component-combinator component-name="DtAvatar" /> -->

## Usage

The Avatar component is designed to prioritize different sources for content display. It will sequentially check for the availability of an image source (`image-src`) or an icon name (`icon-name`). If both properties are not provided, the avatar will extract and display initials from the full name (`full-name`). The resulting initials are extracted using the following logic:
The Avatar component is designed to prioritize different sources for content display. It will sequentially check for the availability of an image source (`image-src`) or content through the icon slot. If both are not provided, the avatar will extract and display initials from the full name (`full-name`). The resulting initials are extracted using the following logic:

* If the string contains two or more words, the result will be the first character of the first and last word capitalized. E.g.:
`full-name: "Jaqueline Nackos"` will result in: `JN`.
Expand All @@ -45,7 +49,11 @@ The Avatar component is designed to prioritize different sources for content dis
<tbody>
<tr>
<td>
<dt-avatar icon-name="user" icon-size="400" />
<dt-avatar>
<template #icon="{ iconSize }">
<dt-icon-user :size="iconSize" />
</template>
</dt-avatar>
</td>
<th class="d-ta-left"><a class="d-link" href="#icon">Icon</a></th>
<td>When no username can be associated with the Avatar.</td>
Expand Down Expand Up @@ -79,7 +87,11 @@ The Avatar component is designed to prioritize different sources for content dis
### Icon

<code-well-header>
<dt-avatar icon-name="user" icon-size="300" />
<dt-avatar>
<template #icon="{ iconSize }">
<dt-icon-user :size="iconSize" />
</template>
</dt-avatar>
</code-well-header>

<code-example-tabs
Expand All @@ -92,9 +104,11 @@ htmlCode='
</div>
</div>'
vueCode='
<dt-avatar
icon-name="person"
/>
<dt-avatar>
<template #icon="{ iconSize }">
<dt-icon-user :size="iconSize" />
</template>
</dt-avatar>
'
/>

Expand Down Expand Up @@ -150,7 +164,11 @@ vueCode='

<code-well-header>
<div class="d-d-inline-flex d-ai-center d-flow8">
<dt-avatar v-for="size in sizes" :size="size" icon-name="user" />
<dt-avatar v-for="size in sizes" :size="size">
<template #icon="{ iconSize }">
<dt-icon-user :size="iconSize" />
</template>
</dt-avatar>
</div>
</code-well-header>

Expand Down Expand Up @@ -183,11 +201,31 @@ htmlCode='
</div>
'
vueCode='
<dt-avatar size="xs" icon-name="user" />
<dt-avatar size="sm" icon-name="user" />
<dt-avatar size="md" icon-name="user" />
<dt-avatar size="lg" icon-name="user" />
<dt-avatar size="xl" icon-name="user" />
<dt-avatar size="xs">
<template #icon="{ iconSize }">
<dt-icon-user :size="iconSize" />
</template>
</dt-avatar>
<dt-avatar size="sm" icon-name="user">
<template #icon="{ iconSize }">
<dt-icon-user :size="iconSize" />
</template>
</dt-avatar>
<dt-avatar size="md" icon-name="user">
<template #icon="{ iconSize }">
<dt-icon-user :size="iconSize" />
</template>
</dt-avatar>
<dt-avatar size="lg" icon-name="user">
<template #icon="{ iconSize }">
<dt-icon-user :size="iconSize" />
</template>
</dt-avatar>
<dt-avatar size="xl" icon-name="user">
<template #icon="{ iconSize }">
<dt-icon-user :size="iconSize" />
</template>
</dt-avatar>
'
/>

Expand Down Expand Up @@ -273,7 +311,11 @@ vueCode='

<code-well-header>
<div class="d-d-flex d-ai-center d-flow16">
<dt-avatar size="lg" image-src="/assets/images/person.png" image-alt="avatar user" overlay-icon="hear" />
<dt-avatar size="lg" image-src="/assets/images/person.png" image-alt="avatar user">
<template #overlayIcon>
<dt-icon-hear />
</template>
</dt-avatar>
<dt-avatar size="lg" image-src="/assets/images/person.png" image-alt="avatar user" overlay-text="+3" />
</div>
</code-well-header>
Expand All @@ -295,7 +337,11 @@ htmlCode='
</div>
</div>'
vueCode='
<dt-avatar size="lg" image-src="/assets/images/person.png" image-alt="avatar user" overlay-icon="hear" />
<dt-avatar size="lg" image-src="/assets/images/person.png" image-alt="avatar user">
<template #overlayIcon>
<dt-icon-hear />
</template>
</dt-avatar>
<dt-avatar size="lg" image-src="/assets/images/person.png" image-alt="avatar user" overlay-text="+3" />
'
/>
Expand All @@ -306,14 +352,22 @@ If you need to create a clickable avatar you can set the clickable prop. This wi

<code-well-header>
<div class="d-d-flex d-ai-center d-flow16">
<dt-avatar icon-name="user" clickable icon-aria-label="user" ref="example-clickable" />
<dt-avatar clickable icon-aria-label="user" ref="example-clickable">
<template #icon="{ iconSize }">
<dt-icon-user :size="iconSize" />
</template>
</dt-avatar>
</div>
</code-well-header>

<code-example-tabs
:htmlCode="() => $refs['example-clickable']"
vueCode='
<dt-avatar icon-name="user" clickable icon-aria-label="user" />
<dt-avatar clickable icon-aria-label="user">
<template #icon="{ iconSize }">
<dt-icon-user :size="iconSize" />
</template>
</dt-avatar>
'
/>

Expand Down Expand Up @@ -355,6 +409,8 @@ to [WCAG](https://www.w3.org/WAI/tutorials/images/decorative) references for
your specific usage.

<script setup>
import { DtIconUser, DtIconHear } from '@dialpad/dialtone-icons/vue3';

const colors = ['100', '200', '300', '400', '500', '600', '700', '800', '900', '1000', '1100', '1200', '1300', '1400', '1500', '1600', '1700', '1800'];
const sizes = ['xs', 'sm', 'md', 'lg', 'xl'];
</script>
20 changes: 16 additions & 4 deletions packages/dialtone-vue2/components/avatar/avatar.test.js
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { createLocalVue, mount } from '@vue/test-utils';
import { DtIconUser } from '@dialpad/dialtone-icons/vue2';
import DtAvatar from './avatar.vue';
import { AVATAR_KIND_MODIFIERS, AVATAR_SIZE_MODIFIERS } from './avatar_constants';

Expand All @@ -9,6 +10,7 @@ const MOCK_INITIALS = 'JN';
const MOCK_SIZE = 'lg';
const MOCK_GROUP = 25;
const MOCK_CUSTOM_CLASS = 'my-custom-class';
const MOCK_ICON_SLOT = '<dt-icon-user />';
let MOCK_ELEMENT = null;

const baseProps = {
Expand All @@ -20,23 +22,28 @@ const baseListeners = {};
let mockProps = {};
let mockListeners = {};
const testContext = {};
let mockSlots = {};

describe('DtAvatar Tests', () => {
let wrapper;
let image;
let count;
let presence;
let iconWrapper;

const updateWrapper = () => {
wrapper = mount(DtAvatar, {
propsData: { ...baseProps, ...mockProps },
listeners: { ...baseListeners, ...mockListeners },
localVue: testContext.localVue,
slots: { ...mockSlots },
components: { DtIconUser },
});

image = wrapper.find('[data-qa="dt-avatar-image"]');
count = wrapper.find('[data-qa="dt-avatar-count"]');
presence = wrapper.find('[data-qa="dt-presence"]');
iconWrapper = wrapper.find('[data-qa="dt-avatar-icon"]');
};

beforeAll(() => {
Expand All @@ -50,6 +57,7 @@ describe('DtAvatar Tests', () => {
afterEach(() => {
mockProps = {};
mockListeners = {};
mockSlots = {};
});

describe('Presentation Tests', () => {
Expand Down Expand Up @@ -83,19 +91,23 @@ describe('DtAvatar Tests', () => {
});
});

describe('When the iconName is provided', () => {
describe('When the icon slot is provided', () => {
beforeEach(() => {
mockProps = { iconName: 'accessibility' };
mockSlots = { icon: MOCK_ICON_SLOT };

updateWrapper();
});

it('icon should exist', () => {
expect(wrapper.find('svg').exists()).toBeTruthy();
expect(iconWrapper.exists()).toBeTruthy();
});

it('should have correct class', () => {
expect(wrapper.find('svg').classes(AVATAR_KIND_MODIFIERS.icon)).toBe(true);
expect(iconWrapper.classes(AVATAR_KIND_MODIFIERS.icon)).toBe(true);
});

it('should render the custom icon', () => {
expect(iconWrapper.findComponent(DtIconUser).exists()).toBe(true);
});
});

Expand Down
Loading

0 comments on commit e8600c3

Please sign in to comment.