From 4ace470361d7c857cf692d639b72284015ceefb8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Oliver=20Sch=C3=BCrch?= Date: Tue, 15 Oct 2024 16:38:00 +0200 Subject: [PATCH] chore(components): add anchor and button wrapper stories --- packages/components/src/components.d.ts | 8 ---- .../components/post-avatar/post-avatar.scss | 43 +++++++++++++------ .../components/post-avatar/post-avatar.tsx | 21 ++++----- .../src/components/post-avatar/readme.md | 13 +++--- .../stories/components/avatar/avatar.docs.mdx | 19 +++++++- .../components/avatar/avatar.stories.ts | 32 +++++++++----- 6 files changed, 83 insertions(+), 53 deletions(-) diff --git a/packages/components/src/components.d.ts b/packages/components/src/components.d.ts index 840dd57c97..1a0093c87d 100644 --- a/packages/components/src/components.d.ts +++ b/packages/components/src/components.d.ts @@ -88,10 +88,6 @@ export namespace Components { * Defines the users lastname. */ "lastname"?: string; - /** - * Defines the tag, the component represents. - */ - "tag": keyof typeof TAG_ROLES; /** * Defines the company internal userId.
Can only be used on post.ch domains!
*/ @@ -626,10 +622,6 @@ declare namespace LocalJSX { * Defines the users lastname. */ "lastname"?: string; - /** - * Defines the tag, the component represents. - */ - "tag"?: keyof typeof TAG_ROLES; /** * Defines the company internal userId.
Can only be used on post.ch domains!
*/ diff --git a/packages/components/src/components/post-avatar/post-avatar.scss b/packages/components/src/components/post-avatar/post-avatar.scss index 4d2f047437..09adab95c5 100644 --- a/packages/components/src/components/post-avatar/post-avatar.scss +++ b/packages/components/src/components/post-avatar/post-avatar.scss @@ -1,5 +1,6 @@ @use '@swisspost/design-system-styles/tokens/elements'; @use '@swisspost/design-system-styles/functions/tokens'; +@use '@swisspost/design-system-styles/core' as post; // tokens.$default-map: elements.$post-avatar; @@ -11,6 +12,9 @@ tokens.$default-map: ( 'post-avatar-border-color': #fff, 'post-avatar-border-radius': 50%, 'post-avatar-font-size': 16px, + 'post-avatar-hover-bg': #666, + 'post-avatar-hover-fg': white, + 'post-avatar-hover-bg-img-overlay': #ffffff77, 'post-avatar-focus-outline-width': 2px, 'post-avatar-focus-outline-color': #000, 'post-avatar-focus-outline-offset': 2px @@ -19,8 +23,10 @@ tokens.$default-map: ( :host { --post-avatar-bg: #{tokens.get('avatar-bg')}; --post-avatar-fg: #{tokens.get('avatar-fg')}; + --post-avatar-bg-img-overlay: transparent; - display: block; + display: inline-flex; + position: relative; width: tokens.get('avatar-size'); height: tokens.get('avatar-size'); background-color: tokens.get('avatar-border-color'); @@ -28,22 +34,31 @@ tokens.$default-map: ( border-radius: tokens.get('avatar-border-radius'); font-size: tokens.get('avatar-font-size'); line-height: 1; -} -:host([role]) { - cursor: pointer; + &::after { + display: block; + content: ''; + position: absolute; + inset: 0; + z-index: 1; + background-color: var(--post-avatar-bg-img-overlay); + border-radius: inherit; + } } -:host([role]:hover) { - transform: scale(1.15); +*, +*::before, +*::after { + box-sizing: border-box; } -:host([role]:focus-visible) { - outline: tokens.get('avatar-focus-outline-width') solid tokens.get('avatar-focus-outline-color'); - outline-offset: tokens.get('avatar-focus-outline-offset'); +.visually-hidden { + @include post.visually-hidden(); } -slot { +slot, +img, +::slotted(img) { display: block; width: 100%; height: 100%; @@ -51,20 +66,20 @@ slot { img, ::slotted(img) { - display: block; - width: 100%; - height: 100%; border-radius: tokens.get('avatar-border-radius'); } ::slotted(:not(img)) { - display: none; + display: none !important; } .initials { display: flex; justify-content: center; align-items: center; + position: relative; + z-index: 2; + width: 100%; height: 100%; background-color: var(--post-avatar-bg); border-radius: tokens.get('avatar-border-radius'); diff --git a/packages/components/src/components/post-avatar/post-avatar.tsx b/packages/components/src/components/post-avatar/post-avatar.tsx index cf6ab9363b..dac841148d 100644 --- a/packages/components/src/components/post-avatar/post-avatar.tsx +++ b/packages/components/src/components/post-avatar/post-avatar.tsx @@ -2,11 +2,6 @@ import { Component, Element, h, Host, Prop, State, Watch } from '@stencil/core'; import { version } from '@root/package.json'; import { checkNonEmpty } from '@/utils'; -enum TAG_ROLES { - a = 'link', - button = 'button', -} - // https://docs.gravatar.com/api/avatars/images/ const GRAVATAR_DEFAULT = '404'; const GRAVATAR_RATING = 'g'; @@ -34,11 +29,6 @@ export class PostAvatar { @Element() host: HTMLPostAvatarElement; - /** - * Defines the tag, the component represents. - */ - @Prop() readonly tag: keyof typeof TAG_ROLES = null; - /** * Defines the users firstname. */ @@ -177,10 +167,17 @@ export class PostAvatar { render() { return ( - + {this.avatarType === 'image' && {this.imageAlt}} - {this.avatarType === 'initials' &&
{this.initials}
} + {this.avatarType === 'initials' && ( +
+ + +
+ )} ); diff --git a/packages/components/src/components/post-avatar/readme.md b/packages/components/src/components/post-avatar/readme.md index 18b912382d..43046b1404 100644 --- a/packages/components/src/components/post-avatar/readme.md +++ b/packages/components/src/components/post-avatar/readme.md @@ -7,13 +7,12 @@ ## Properties -| Property | Attribute | Description | Type | Default | -| ------------------------ | ----------- | --------------------------------------------------------------------------------------------------------------------------------- | ----------------- | ----------- | -| `email` | `email` | Defines the users email address associated with a gravatar profile picture. | `string` | `undefined` | -| `firstname` _(required)_ | `firstname` | Defines the users firstname. | `string` | `undefined` | -| `lastname` | `lastname` | Defines the users lastname. | `string` | `undefined` | -| `tag` | `tag` | Defines the tag, the component represents. | `"a" \| "button"` | `null` | -| `userid` | `userid` | Defines the company internal userId.
Can only be used on post.ch domains!
| `string` | `undefined` | +| Property | Attribute | Description | Type | Default | +| ------------------------ | ----------- | --------------------------------------------------------------------------------------------------------------------------------- | -------- | ----------- | +| `email` | `email` | Defines the users email address associated with a gravatar profile picture. | `string` | `undefined` | +| `firstname` _(required)_ | `firstname` | Defines the users firstname. | `string` | `undefined` | +| `lastname` | `lastname` | Defines the users lastname. | `string` | `undefined` | +| `userid` | `userid` | Defines the company internal userId.
Can only be used on post.ch domains!
| `string` | `undefined` | ## Slots diff --git a/packages/documentation/src/stories/components/avatar/avatar.docs.mdx b/packages/documentation/src/stories/components/avatar/avatar.docs.mdx index b2d8d76e13..7e35186a03 100644 --- a/packages/documentation/src/stories/components/avatar/avatar.docs.mdx +++ b/packages/documentation/src/stories/components/avatar/avatar.docs.mdx @@ -16,9 +16,25 @@ import * as AvatarPictureStories from './avatar.stories'; +## Interactive Wrapper Element + +### Anchor + +Nest the `` component inside an anchor tag to make it clickable. +Use this approach to create a link to the user profile. + + + +### Button + +Nest the `` component inside a button tag to make it clickable. +Use this approach to use the component as a menu toggler, ... + + + ## Customize background and forground colors -The component provides two css-variables, which allow you to switch the background and the foreground color if needed (this gets visible when used with initials only). +The component provides some css-variables, which allow you to switch the background and the foreground color if needed. Please ensure at all times, that the background and foreground colors have sufficient contrast! @@ -26,6 +42,7 @@ The component provides two css-variables, which allow you to switch the backgrou post-avatar { --post-avatar-bg: #f00; --post-avatar-fg: #000; + --post-avatar-bg-img-overlay: transparent; } ``` diff --git a/packages/documentation/src/stories/components/avatar/avatar.stories.ts b/packages/documentation/src/stories/components/avatar/avatar.stories.ts index 5a85e99560..955ff703fe 100644 --- a/packages/documentation/src/stories/components/avatar/avatar.stories.ts +++ b/packages/documentation/src/stories/components/avatar/avatar.stories.ts @@ -1,6 +1,7 @@ import { Args, StoryContext, StoryFn, StoryObj } from '@storybook/web-components'; import { MetaComponent } from '@root/types'; import { html, nothing } from 'lit'; +import { unsafeHTML } from 'lit/directives/unsafe-html.js'; import { components } from '@swisspost/design-system-components/dist/docs.json'; import { coloredBackground } from '@/shared/decorators/dark-background'; @@ -20,7 +21,6 @@ const meta: MetaComponent = { }, }, args: { - tag: null, firstname: 'Firstname', lastname: '', userid: '', @@ -38,14 +38,6 @@ const meta: MetaComponent = { EMAIL_ARGTYPE?.docs ?? '' }
Do you need an example email address? Try it out with oss@post.ch.
`, }, - 'imageSrc': { - control: 'text', - description: - 'Define an image `src` to insert a custom image.
Do you need an example? Try our logo /assets/images/logo-swisspost.svg.
', - table: { - category: 'Content', - }, - }, 'slots-default': { name: 'default', table: { @@ -54,6 +46,14 @@ const meta: MetaComponent = { }, }, }, + 'imageSrc': { + control: 'text', + description: + 'Define an image `src` to insert a custom image.
Do you need an example? Try our logo /assets/images/logo-swisspost.svg.
', + table: { + category: 'Content', + }, + }, }, }; @@ -66,8 +66,6 @@ export const Default: Story = { (story: StoryFn, context: StoryContext) => coloredBackground(story, context, 'light'), ], render: (args: Args) => html``, }; + +export const AnchorWrapped: Story = { + render: (args: Args, context: StoryContext) => { + return html`${Default.render?.(args, context)}`; + }, +}; + +export const ButtonWrapped: Story = { + render: (args: Args, context: StoryContext) => { + return html``; + }, +};