diff --git a/cypress/integration/common/post.js b/cypress/integration/common/post.js
index a680986f4..4d1856bcc 100644
--- a/cypress/integration/common/post.js
+++ b/cypress/integration/common/post.js
@@ -24,10 +24,10 @@ Then("my comment should be successfully created", () => {
Then("I should see my comment", () => {
cy.get("div.comment p")
.should("contain", "Human Connection rocks")
- .get(".ds-avatar img")
+ .get(".user-avatar img")
.should("have.attr", "src")
.and("contain", narratorAvatar)
- .get("div p.ds-text span")
+ .get(".user-teaser > .info > .text")
.should("contain", "today at");
});
diff --git a/cypress/integration/common/profile.js b/cypress/integration/common/profile.js
index b1bf9e4e0..c22c20392 100644
--- a/cypress/integration/common/profile.js
+++ b/cypress/integration/common/profile.js
@@ -32,5 +32,5 @@ Then("I cannot upload a picture", () => {
cy.get(".ds-card-content")
.children()
.should("not.have.id", "customdropzone")
- .should("have.class", "ds-avatar");
+ .should("have.class", "user-avatar");
});
diff --git a/cypress/integration/common/report.js b/cypress/integration/common/report.js
index 4a1d01ef6..1ba3e2e83 100644
--- a/cypress/integration/common/report.js
+++ b/cypress/integration/common/report.js
@@ -63,7 +63,7 @@ When('I click on "Report User" from the content menu in the user info box', () =
})
When('I click on the author', () => {
- cy.get('.username')
+ cy.get('.user-teaser')
.click()
.url().should('include', '/profile/')
})
diff --git a/cypress/integration/common/search.js b/cypress/integration/common/search.js
index 020607bf0..f6589763b 100644
--- a/cypress/integration/common/search.js
+++ b/cypress/integration/common/search.js
@@ -87,7 +87,7 @@ Then(
);
Then("I select a user entry", () => {
- cy.get(".searchable-input .userinfo")
+ cy.get(".searchable-input .user-teaser")
.first()
.trigger("click");
})
diff --git a/cypress/integration/common/steps.js b/cypress/integration/common/steps.js
index c65aaf266..53b5f7c3d 100644
--- a/cypress/integration/common/steps.js
+++ b/cypress/integration/common/steps.js
@@ -463,7 +463,7 @@ When(
);
When("I navigate to my {string} settings page", settingsPage => {
- cy.get(".avatar-menu").click();
+ cy.get(".avatar-menu-trigger").click();
cy.get(".avatar-menu-popover")
.find("a[href]")
.contains("Settings")
diff --git a/webapp/assets/_new/styles/tokens.scss b/webapp/assets/_new/styles/tokens.scss
index 71114cf21..90ec527ea 100644
--- a/webapp/assets/_new/styles/tokens.scss
+++ b/webapp/assets/_new/styles/tokens.scss
@@ -254,8 +254,7 @@ $size-width-paginate: 100px;
$size-avatar-small: 34px;
$size-avatar-base: 44px;
-$size-avatar-large: 64px;
-$size-avatar-x-large: 114px;
+$size-avatar-large: 114px;
/**
* @tokens Size Buttons
diff --git a/webapp/components/Avatar/Avatar.spec.js b/webapp/components/Avatar/Avatar.spec.js
deleted file mode 100644
index 03eaee160..000000000
--- a/webapp/components/Avatar/Avatar.spec.js
+++ /dev/null
@@ -1,68 +0,0 @@
-import { mount } from '@vue/test-utils'
-import Avatar from './Avatar.vue'
-
-const localVue = global.localVue
-
-describe('Avatar.vue', () => {
- let propsData = {}
-
- const Wrapper = () => {
- return mount(Avatar, { propsData, localVue })
- }
-
- it('renders no image', () => {
- expect(
- Wrapper()
- .find('img')
- .exists(),
- ).toBe(false)
- })
-
- // this is testing the style guide
- it('renders an icon', () => {
- expect(
- Wrapper()
- .find('.ds-icon')
- .exists(),
- ).toBe(true)
- })
-
- describe('given a user', () => {
- describe('with a relative avatar url', () => {
- beforeEach(() => {
- propsData = {
- user: {
- avatar: '/avatar.jpg',
- },
- }
- })
-
- it('adds a prefix to load the image from the uploads service', () => {
- expect(
- Wrapper()
- .find('img')
- .attributes('src'),
- ).toBe('/api/avatar.jpg')
- })
- })
-
- describe('with an absolute avatar url', () => {
- beforeEach(() => {
- propsData = {
- user: {
- avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/sawalazar/128.jpg',
- },
- }
- })
-
- it('keeps the avatar URL as is', () => {
- // e.g. our seeds have absolute image URLs
- expect(
- Wrapper()
- .find('img')
- .attributes('src'),
- ).toBe('https://s3.amazonaws.com/uifaces/faces/twitter/sawalazar/128.jpg')
- })
- })
- })
-})
diff --git a/webapp/components/Avatar/Avatar.vue b/webapp/components/Avatar/Avatar.vue
deleted file mode 100644
index ec2f9b28b..000000000
--- a/webapp/components/Avatar/Avatar.vue
+++ /dev/null
@@ -1,28 +0,0 @@
-
-
-
-
-
diff --git a/webapp/components/AvatarMenu/AvatarMenu.spec.js b/webapp/components/AvatarMenu/AvatarMenu.spec.js
index 519b61d00..c432a5ad8 100644
--- a/webapp/components/AvatarMenu/AvatarMenu.spec.js
+++ b/webapp/components/AvatarMenu/AvatarMenu.spec.js
@@ -42,9 +42,9 @@ describe('AvatarMenu.vue', () => {
wrapper = Wrapper()
})
- it('renders the HcAvatar component', () => {
+ it('renders the UserAvatar component', () => {
wrapper.find('.avatar-menu-trigger').trigger('click')
- expect(wrapper.find('.ds-avatar').exists()).toBe(true)
+ expect(wrapper.find('.user-avatar').exists()).toBe(true)
})
describe('given a userName', () => {
diff --git a/webapp/components/AvatarMenu/AvatarMenu.vue b/webapp/components/AvatarMenu/AvatarMenu.vue
index 54426852e..97b937a88 100644
--- a/webapp/components/AvatarMenu/AvatarMenu.vue
+++ b/webapp/components/AvatarMenu/AvatarMenu.vue
@@ -11,7 +11,7 @@
"
@click.prevent="toggleMenu"
>
-
+
@@ -49,12 +49,12 @@
-
diff --git a/webapp/components/_new/generic/UserAvatar/UserAvatar.spec.js b/webapp/components/_new/generic/UserAvatar/UserAvatar.spec.js
new file mode 100644
index 000000000..61f9977ef
--- /dev/null
+++ b/webapp/components/_new/generic/UserAvatar/UserAvatar.spec.js
@@ -0,0 +1,99 @@
+import { mount } from '@vue/test-utils'
+import UserAvatar from './UserAvatar.vue'
+import BaseIcon from '~/components/_new/generic/BaseIcon/BaseIcon'
+
+const localVue = global.localVue
+
+describe('UserAvatar.vue', () => {
+ let propsData, wrapper
+ beforeEach(() => {
+ propsData = {}
+ wrapper = Wrapper()
+ })
+
+ const Wrapper = () => {
+ return mount(UserAvatar, { propsData, localVue })
+ }
+
+ it('renders no image', () => {
+ expect(wrapper.find('img').exists()).toBe(false)
+ })
+
+ it('renders an icon', () => {
+ expect(wrapper.find(BaseIcon).exists()).toBe(true)
+ })
+
+ describe('given a user', () => {
+ describe('with no image', () => {
+ beforeEach(() => {
+ propsData = {
+ user: {
+ name: 'Matt Rider',
+ },
+ }
+ wrapper = Wrapper()
+ })
+
+ describe('no user name', () => {
+ it('renders an icon', () => {
+ propsData = { user: { name: null } }
+ wrapper = Wrapper()
+ expect(wrapper.find(BaseIcon).exists()).toBe(true)
+ })
+ })
+
+ describe("user name is 'Anonymous'", () => {
+ it('renders an icon', () => {
+ propsData = { user: { name: 'Anonymous' } }
+ wrapper = Wrapper()
+ expect(wrapper.find(BaseIcon).exists()).toBe(true)
+ })
+ })
+
+ it('displays user initials', () => {
+ expect(wrapper.find('.initials').text()).toEqual('MR')
+ })
+
+ it('displays no more than 3 initials', () => {
+ propsData = { user: { name: 'Ana Paula Nunes Marques' } }
+ wrapper = Wrapper()
+ expect(wrapper.find('.initials').text()).toEqual('APN')
+ })
+ })
+
+ describe('with a relative avatar url', () => {
+ beforeEach(() => {
+ propsData = {
+ user: {
+ name: 'Not Anonymous',
+ avatar: '/avatar.jpg',
+ },
+ }
+ wrapper = Wrapper()
+ })
+
+ it('adds a prefix to load the image from the uploads service', () => {
+ expect(wrapper.find('.image').attributes('src')).toBe('/api/avatar.jpg')
+ })
+ })
+
+ describe('with an absolute avatar url', () => {
+ beforeEach(() => {
+ propsData = {
+ user: {
+ name: 'Not Anonymous',
+ avatar: 'https://s3.amazonaws.com/uifaces/faces/twitter/sawalazar/128.jpg',
+ },
+ }
+ wrapper = Wrapper()
+ })
+
+ it('keeps the avatar URL as is', () => {
+ // e.g. our seeds have absolute image URLs
+ expect(wrapper.find('.image').attributes('src')).toBe(
+ 'https://s3.amazonaws.com/uifaces/faces/twitter/sawalazar/128.jpg',
+ )
+ })
+ })
+ })
+})
diff --git a/webapp/components/_new/generic/UserAvatar/UserAvatar.story.js b/webapp/components/_new/generic/UserAvatar/UserAvatar.story.js
new file mode 100644
index 000000000..0748a6266
--- /dev/null
+++ b/webapp/components/_new/generic/UserAvatar/UserAvatar.story.js
@@ -0,0 +1,57 @@
+import { storiesOf } from '@storybook/vue'
+import { withA11y } from '@storybook/addon-a11y'
+import StoryRouter from 'storybook-vue-router'
+import UserAvatar from '~/components/_new/generic/UserAvatar/UserAvatar'
+import helpers from '~/storybook/helpers'
+import { user } from '~/components/UserTeaser/UserTeaser.story.js'
+
+helpers.init()
+const anonymousUser = {
+ ...user,
+ name: 'Anonymous',
+ avatar: null,
+}
+const userWithoutAvatar = {
+ ...user,
+ avatar: null,
+ name: 'Ana Paula Nunes Marques',
+}
+storiesOf('UserAvatar', module)
+ .addDecorator(withA11y)
+ .addDecorator(helpers.layout)
+ .addDecorator(StoryRouter())
+ .add('with image', () => ({
+ components: { UserAvatar },
+ data: () => ({
+ user,
+ }),
+ template: '',
+ }))
+ .add('without image, anonymous user', () => ({
+ components: { UserAvatar },
+ data: () => ({
+ user: anonymousUser,
+ }),
+ template: '',
+ }))
+ .add('without image, user initials', () => ({
+ components: { UserAvatar },
+ data: () => ({
+ user: userWithoutAvatar,
+ }),
+ template: '',
+ }))
+ .add('small', () => ({
+ components: { UserAvatar },
+ data: () => ({
+ user,
+ }),
+ template: '',
+ }))
+ .add('large', () => ({
+ components: { UserAvatar },
+ data: () => ({
+ user,
+ }),
+ template: '',
+ }))
diff --git a/webapp/components/_new/generic/UserAvatar/UserAvatar.vue b/webapp/components/_new/generic/UserAvatar/UserAvatar.vue
new file mode 100644
index 000000000..c29f8e402
--- /dev/null
+++ b/webapp/components/_new/generic/UserAvatar/UserAvatar.vue
@@ -0,0 +1,84 @@
+
+
+
{{ userInitials }}
+
+
![]()
+