feat(styles): Added post-linkarea component (3830) #4030
Conversation
🦋 Changeset detectedLatest commit: 97455a2 The changes in this PR will be included in the next version bump. This PR includes changesets to release 16 packages
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
|
Related Previews |
|
|
@alizedebray do you now why i get this code smell? This |
@veyaromain this is a false positive, I just accepted the issue on SonarCloud |
| '@swisspost/design-system-components': minor | ||
| --- | ||
|
|
||
| Added the `post-linkarea` component.` |
There was a problem hiding this comment.
| Added the `post-linkarea` component.` | |
| Added the `post-linkarea` component. |
| describe('default', () => { | ||
| beforeEach(() => { | ||
| cy.getComponent('linkarea', LINKAREA_ID); | ||
| cy.get('@linkarea').as('linkArea'); |
There was a problem hiding this comment.
This line is unnecessary. The .as('*') command is used to give an element an alias, so you can reference it later with @*. Therefore, this line is simply getting the @linkArea element and assigning it the same alias again, which is redundant.
| cy.get('@linkarea').as('linkArea'); |
| cy.get('post-linkarea a[data-link]').should('exist'); | ||
|
|
||
| cy.get('post-linkarea a[data-link]').then($link => { |
There was a problem hiding this comment.
Here is a good place to use the .as() command:
| cy.get('post-linkarea a[data-link]').should('exist'); | |
| cy.get('post-linkarea a[data-link]').then($link => { | |
| cy.get('@linkArea').find('a[data-link]').as('linkAreaTarget'); | |
| cy.get('@linkAreaTarget').should('exist'); | |
| cy.get('@linkAreaTarget').then($link => { |
| @@ -0,0 +1,4 @@ | |||
| :host { | |||
| display: block; | |||
There was a problem hiding this comment.
Since you're not sure whether the element inside post-linkarea will be an inline or block element, it's better to set the wrapper to display: contents. This makes the post-linkarea behave as if it were replaced by its content in the DOM. Its logic remains intact, but it no longer acts as a box. Here’s an article that explains this well: https://la-cascade.io/articles/comment-fonctionne-css-display-content.
| display: block; | |
| display: contents; |
| name: 'Default link', | ||
| description: 'This is the link that will be used if no specific link is set.', |
There was a problem hiding this comment.
| name: 'Default link', | |
| description: 'This is the link that will be used if no specific link is set.', | |
| name: 'First link URL', | |
| description: 'This is the URL used for the first link in the card.', |
| name: 'Specified link', | ||
| description: | ||
| 'This is the link that will be used if you manually assign one using the `data-link` option.', |
There was a problem hiding this comment.
| name: 'Specified link', | |
| description: | |
| 'This is the link that will be used if you manually assign one using the `data-link` option.', | |
| name: 'Second link URL', | |
| description: 'This is the URL used for the second link in the card.', |
| argTypes: { | ||
| dataLink: { | ||
| name: 'Custom selector', | ||
| description: 'Allows you to use a different link instead of the default first one.', |
There was a problem hiding this comment.
| description: 'Allows you to use a different link instead of the default first one.', | |
| description: 'If `false`, clicking the card redirects to the first link. If `true`, a `data-link` attribute is added to the second link, which is used instead, overriding the default behavior.', |
| <p class="card-text">Contentus momentus vero siteos et accusam iretea et justo.</p> | ||
|
|
||
| <a class="card-link" href="${args.anchorDefaultLink}">Ligilo teksto</a> | ||
| <a class="card-link" href="${args.anchorSepcifiedLink}" ${spread(props)}>Pli da ligo</a> |
There was a problem hiding this comment.
Here you can use nothing, when a attribute receives nothing then it is not rendered at all:
| <a class="card-link" href="${args.anchorSepcifiedLink}" ${spread(props)}>Pli da ligo</a> | |
| <a class="card-link" href="${args.anchorSepcifiedLink}" data-link=${args.dataLink ? '' : nothing}>Pli da ligo</a> |
Then you no longer need the createSecondAnchorProps function.
| export const Default: StoryObj<HTMLPostLinkareaElement> = {}; | ||
|
|
||
| export const InitiallySpecified: StoryObj<HTMLPostLinkareaElement> = { | ||
| render: args => html` ${renderLinkarea({ ...args, dataLink: true })} `, |
There was a problem hiding this comment.
You can simply override the args like so:
| render: args => html` ${renderLinkarea({ ...args, dataLink: true })} `, | |
| args: { | |
| dataLink: true, | |
| } |
| @Component({ | ||
| tag: 'post-linkarea', | ||
| styleUrl: 'post-linkarea.scss', | ||
| shadow: true, |
There was a problem hiding this comment.
You do not need to use a shadow DOM for this component as it does not render additional elements (only the host and its content) and the styles are minimal.
| shadow: true, |
No description provided.