feat(styles): Changed many things for PR

swisspost · Nov 26, 2024 · 1f27679 · 1f27679
1 parent 50c5061
commit 1f27679
Show file tree

Hide file tree

Showing 5 changed files with 26 additions and 30 deletions.
diff --git a/.changeset/loud-planes-cross.md b/.changeset/loud-planes-cross.md
@@ -3,4 +3,4 @@
 '@swisspost/design-system-components': minor
 ---
 
-Added the `post-linkarea` component.`
+Added the `post-linkarea` component.
diff --git a/packages/components/cypress/e2e/linkarea.cy.ts b/packages/components/cypress/e2e/linkarea.cy.ts
@@ -4,18 +4,17 @@ describe('post-linkarea', () => {
   describe('default', () => {
     beforeEach(() => {
       cy.getComponent('linkarea', LINKAREA_ID);
-      cy.get('@linkarea').as('linkArea');
     });
 
     it('should exist', () => {
-      cy.get('@linkArea').should('exist');
+      cy.get('@linkarea').should('exist');
     });
 
     it('should delegate click to first slotted link by default', () => {
-      cy.get('@linkArea').then($linkArea => {
+      cy.get('@linkarea').then($linkArea => {
         const firstLink = $linkArea.find('a').first();
         const linkHref = firstLink.attr('href');
-        cy.get('@linkArea').click();
+        cy.get('@linkarea').click();
         cy.url().should('include', linkHref);
       });
     });
@@ -28,9 +27,10 @@ describe('post-linkarea', () => {
     });
 
     it('should delegate click to link with data-link attribute', () => {
-      cy.get('post-linkarea a[data-link]').should('exist');
+      cy.get('@linkarea').find('a[data-link]').as('linkAreaTarget');
 
-      cy.get('post-linkarea a[data-link]').then($link => {
+      cy.get('@linkAreaTarget').should('exist');
+      cy.get('@linkAreaTarget').then($link => {
         const expectedHref = $link.attr('href');
 
         cy.get('post-linkarea').click();

diff --git a/packages/components/src/components/post-accordion/post-accordion.scss b/packages/components/src/components/post-accordion/post-accordion.scss
@@ -1,3 +1,3 @@
 :host {
-  display: block;
+  display: contents;
 }
diff --git a/packages/components/src/components/post-linkarea/post-linkarea.tsx b/packages/components/src/components/post-linkarea/post-linkarea.tsx
@@ -4,7 +4,6 @@ import { version } from '@root/package.json';
 @Component({
   tag: 'post-linkarea',
   styleUrl: 'post-linkarea.scss',
-  shadow: true,
 })
 export class PostLinkarea {
   @Element() hostElement: HTMLPostLinkareaElement;

diff --git a/packages/documentation/src/stories/components/linkarea/linkarea.stories.ts b/packages/documentation/src/stories/components/linkarea/linkarea.stories.ts
@@ -1,7 +1,6 @@
 import type { Args, StoryObj } from '@storybook/web-components';
-import { html } from 'lit';
+import { html, nothing } from 'lit';
 import { MetaComponent } from '@root/types';
-import { spread } from '@open-wc/lit-helpers';
 
 export interface PostLinkarea {
   dataLink?: boolean;
@@ -26,7 +25,8 @@ const meta: MetaComponent<PostLinkarea> = {
   argTypes: {
     dataLink: {
       name: 'Custom selector',
-      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.',
       control: {
         type: 'boolean',
       },
@@ -35,8 +35,8 @@ const meta: MetaComponent<PostLinkarea> = {
       },
     },
     anchorDefaultLink: {
-      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.',
       control: {
         type: 'text',
       },
@@ -45,9 +45,8 @@ const meta: MetaComponent<PostLinkarea> = {
       },
     },
     anchorSepcifiedLink: {
-      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.',
       control: {
         type: 'text',
       },
@@ -61,8 +60,6 @@ const meta: MetaComponent<PostLinkarea> = {
 export default meta;
 
 function renderLinkarea(args: Args) {
-  const props = createSecondAnchorProps(args);
-
   return html`
     <post-linkarea>
       <div class="card">
@@ -72,22 +69,22 @@ function renderLinkarea(args: Args) {
           <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>
+          <a
+            class="card-link"
+            href="${args.anchorSepcifiedLink}"
+            data-link=${args.dataLink ? '' : nothing}
+            >Pli da ligo</a
+          >
         </div>
       </div>
     </post-linkarea>
   `;
 }
 
-function createSecondAnchorProps(args: Args) {
-  if (args.dataLink) {
-    return { 'data-link': '' };
-  }
-  return {};
-}
+export const Default: StoryObj<PostLinkarea> = {};
 
-export const Default: StoryObj<HTMLPostLinkareaElement> = {};
-
-export const InitiallySpecified: StoryObj<HTMLPostLinkareaElement> = {
-  render: args => html` ${renderLinkarea({ ...args, dataLink: true })} `,
+export const InitiallySpecified: StoryObj<PostLinkarea> = {
+  args: {
+    dataLink: true,
+  },
 };