Skip to content

Commit

Permalink
[Avatars] HTML stories + fix (#3039)
Browse files Browse the repository at this point in the history
  • Loading branch information
@vvalentin-lucca
vvalentin-lucca authored Aug 23, 2024
1 parent 1cdae08 commit 470fd58
Show file tree
Hide file tree
Showing 9 changed files with 252 additions and 9 deletions.
16 changes: 11 additions & 5 deletions packages/scss/src/components/avatar/mods.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -38,36 +38,41 @@
}

@mixin wrapperXL {
.avatar, .avatarWrapper-item-action {
.avatar,
.avatarWrapper-item-action {
@include XL;
}
}

@mixin wrapperL {
.avatar, .avatarWrapper-item-action {
.avatar,
.avatarWrapper-item-action {
@include L;
}
}

@mixin wrapperS {
--components-avatarWrapper-overlap: var(--pr-t-spacings-50);

.avatar, .avatarWrapper-item-action {
.avatar,
.avatarWrapper-item-action {
@include S;
}
}

@mixin wrapperXS {
--components-avatarWrapper-overlap: var(--pr-t-spacings-50);

.avatar, .avatarWrapper-item-action {
.avatar,
.avatarWrapper-item-action {
@include XS;
}
}

@mixin placeholder {
// .picture is deprecated
.avatar-picture, .picture {
.avatar-picture,
.picture {
background-color: var(--palettes-neutral-200) !important;

&::before {
Expand All @@ -79,6 +84,7 @@
}

// .userPicture-initials is deprecated
.avatar-picture-initials,
.userPicture-initials {
display: none;
}
Expand Down
4 changes: 2 additions & 2 deletions ...umentation/users/avatars/basic.stories.ts → ...on/users/avatars/angular/basic.stories.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Component, Input, Optional } from '@angular/core';
import { ILuUser, LuDisplayInitials, LuUserPictureModule } from '@lucca-front/ng/user';
import { Meta, StoryFn } from '@storybook/angular';
import { bob, georges, squidwards } from '../user.mocks';
import { bob, georges, squidwards } from '../../user.mocks';

@Component({
selector: 'user-picture-stories',
Expand All @@ -17,7 +17,7 @@ class UserPictureStory {
}

export default {
title: 'Documentation/Users/Avatar/Basic',
title: 'Documentation/Users/Avatar/Angular/Basic',
component: UserPictureStory,
argTypes: {
user: {
Expand Down
4 changes: 2 additions & 2 deletions ...umentation/users/avatars/group.stories.ts → ...on/users/avatars/angular/group.stories.ts
View file
Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Component, Input, Optional } from '@angular/core';
import { LuUserPictureModule } from '@lucca-front/ng/user';
import { Meta, StoryFn } from '@storybook/angular';
import { squidwards } from '../user.mocks';
import { squidwards } from '../../user.mocks';

@Component({
selector: 'avatar-stories',
Expand Down Expand Up @@ -134,7 +134,7 @@ class AvatarStory {
}

export default {
title: 'Documentation/Users/Avatar/Group',
title: 'Documentation/Users/Avatar/Angular/Group',
component: AvatarStory,
argTypes: {
sizes: {
Expand Down
24 changes: 24 additions & 0 deletions stories/documentation/users/avatars/html&css/basic.stories.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,24 @@
import { Meta, StoryFn } from '@storybook/angular';

interface UserAvatarBasicStory {}

export default {
title: 'Documentation/Users/Avatar/HTML&CSS/Basic',
argTypes: {},
} as Meta;

function getTemplate(args: UserAvatarBasicStory): string {
return `
<div class="avatar">
<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
</div>
`;
}

const Template: StoryFn<UserAvatarBasicStory> = (args) => ({
props: args,
template: getTemplate(args),
});

export const Basic = Template.bind({});
Basic.args = {};
34 changes: 34 additions & 0 deletions stories/documentation/users/avatars/html&css/display.stories.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,34 @@
import { Meta, StoryFn } from '@storybook/angular';

interface UserAvatarDisplayStory {}

export default {
title: 'Documentation/Users/Avatar/HTML&CSS/Display',
argTypes: {},
} as Meta;

function getTemplate(args: UserAvatarDisplayStory): string {
return `
<span class="avatar">
<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
</span>
<span class="avatar">
<span class="avatar-picture" style="background-color: rgb(202, 92, 214)">
<span class="avatar-picture-initials">FM</span>
</span>
</span>
<span class="avatar mod-placeholder">
<span class="avatar-picture">
<span class="avatar-picture-initials">JT</span>
</span>
</span>
`;
}

const Template: StoryFn<UserAvatarDisplayStory> = (args) => ({
props: args,
template: getTemplate(args),
});

export const Display = Template.bind({});
Display.args = {};
41 changes: 41 additions & 0 deletions stories/documentation/users/avatars/html&css/group/basic.stories.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import { Meta, StoryFn } from '@storybook/angular';

interface UserAvatarGroupBasicStory {}

export default {
title: 'Documentation/Users/Avatar/HTML&CSS/Group/Basic',
argTypes: {},
} as Meta;

function getTemplate(args: UserAvatarGroupBasicStory): string {
return `
<ul class="avatarWrapper">
<li class="avatarWrapper-item">
<span class="avatar">
<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
</span>
<span class="u-mask">Finn Mertens</span>
</li>
<li class="avatarWrapper-item">
<span class="avatar">
<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
</span>
<span class="u-mask">Finn Mertens</span>
</li>
<li class="avatarWrapper-item">
<span class="avatar">
<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
</span>
<span class="u-mask">Finn Mertens</span>
</li>
</ul>
`;
}

const Template: StoryFn<UserAvatarGroupBasicStory> = (args) => ({
props: args,
template: getTemplate(args),
});

export const Basic = Template.bind({});
Basic.args = {};
47 changes: 47 additions & 0 deletions stories/documentation/users/avatars/html&css/group/clickable.stories.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,47 @@
import { Meta, StoryFn } from '@storybook/angular';

interface UserAvatarGroupClickableStory {}

export default {
title: 'Documentation/Users/Avatar/HTML&CSS/Group/Clickable',
argTypes: {},
} as Meta;

function getTemplate(args: UserAvatarGroupClickableStory): string {
return `
<ul class="avatarWrapper">
<li class="avatarWrapper-item">
<a href="#" class="avatarWrapper-item-action">
<span class="avatar">
<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
</span>
<span class="u-mask">Finn Mertens</span>
</a>
</li>
<li class="avatarWrapper-item">
<a href="#" class="avatarWrapper-item-action">
<span class="avatar">
<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
</span>
<span class="u-mask">Finn Mertens</span>
</a>
</li>
<li class="avatarWrapper-item">
<a href="#" class="avatarWrapper-item-action">
<span class="avatar">
<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
</span>
<span class="u-mask">Finn Mertens</span>
</a>
</li>
</ul>
`;
}

const Template: StoryFn<UserAvatarGroupClickableStory> = (args) => ({
props: args,
template: getTemplate(args),
});

export const Clickable = Template.bind({});
Clickable.args = {};
49 changes: 49 additions & 0 deletions stories/documentation/users/avatars/html&css/group/more.stories.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,49 @@
import { Meta, StoryFn } from '@storybook/angular';

interface UserAvatarGroupMoreStory {}

export default {
title: 'Documentation/Users/Avatar/HTML&CSS/Group/More',
argTypes: {},
} as Meta;

function getTemplate(args: UserAvatarGroupMoreStory): string {
return `
<ul class="avatarWrapper">
<li class="avatarWrapper-item">
<span class="avatar">
<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
</span>
<span class="u-mask">Finn Mertens</span>
</li>
<li class="avatarWrapper-item">
<span class="avatar">
<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
</span>
<span class="u-mask">Finn Mertens</span>
</li>
<li class="avatarWrapper-item">
<span class="avatar">
<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
</span>
<span class="u-mask">Finn Mertens</span>
</li>
<li role="presentation" class="avatarWrapper-item">
<button type="button" class="avatarWrapper-item-action">
<span class="avatarWrapper-item-action-more">
<span aria-hidden="true" data-content-before="+8"></span>
<span class="u-mask">Voir les 8 utilisateurs supplémentaires</span>
</span>
</button>
</li>
</ul>
`;
}

const Template: StoryFn<UserAvatarGroupMoreStory> = (args) => ({
props: args,
template: getTemplate(args),
});

export const More = Template.bind({});
More.args = {};
42 changes: 42 additions & 0 deletions stories/documentation/users/avatars/html&css/sizes.stories.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,42 @@
import { Meta, StoryFn } from '@storybook/angular';

interface UserAvatarSizesStory {}

export default {
title: 'Documentation/Users/Avatar/HTML&CSS/Sizes',
argTypes: {},
} as Meta;

function getTemplate(args: UserAvatarSizesStory): string {
return `
<span class="avatar mod-XS">
<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
</span>
<span class="avatar mod-S">
<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
</span>
<span class="avatar mod-M">
<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
</span>
<span class="avatar mod-L">
<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
</span>
<span class="avatar mod-XL">
<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
</span>
<span class="avatar mod-XXL">
<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
</span>
<span class="avatar mod-XXXL">
<img alt="" class="avatar-picture" loading="lazy" src="https://cdn.lucca.fr/lucca-front/avatars/finn.png" />
</span>
`;
}

const Template: StoryFn<UserAvatarSizesStory> = (args) => ({
props: args,
template: getTemplate(args),
});

export const Sizes = Template.bind({});
Sizes.args = {};

0 comments on commit 470fd58

Please sign in to comment.