Merge branch 'main' into 3424-component-text-link

swisspost · Oct 16, 2024 · 531b418 · 531b418
2 parents 2106fd1 + 224f190
commit 531b418
Show file tree

Hide file tree

Showing 17 changed files with 485 additions and 173 deletions.
diff --git a/.changeset/loud-dingos-remember.md b/.changeset/loud-dingos-remember.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Fixed the dropdown toggle in the example of the intranet header with a navigation bar.
diff --git a/.changeset/sixty-items-promise.md b/.changeset/sixty-items-promise.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-styles': minor
+---
+
+Added paragraph style.
diff --git a/.changeset/strange-bottles-impress.md b/.changeset/strange-bottles-impress.md
@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': minor
+---
+
+Added paragraph element.
diff --git a/packages/documentation/.storybook/blocks/footer.tsx b/packages/documentation/.storybook/blocks/footer.tsx
@@ -1,26 +1,78 @@
 import React from 'react';
 
-interface Developer {
+interface TeamMember {
   name: string;
   title: string;
-  avatar: string;
+  githubImageId: string;
+  githubUsername: string;
 }
 
-const DEVELOPERS: Developer[] = [
+const TEAM_MEMBERS: TeamMember[] = [
   {
     name: 'Philipp Gfeller',
-    title: 'Lead UI Developer',
-    avatar: 'https://avatars.githubusercontent.com/u/1659006?v=4',
+    title: 'Lead Potato',
+    githubImageId: '1659006',
+    githubUsername: 'gfellerph',
   },
   {
     name: 'Alizé Debray',
-    title: 'UI Developer',
-    avatar: 'https://avatars.githubusercontent.com/u/33580481?v=4',
+    title: 'UI Mademoiselle',
+    githubImageId: '33580481',
+    githubUsername: 'alizedebray',
   },
   {
     name: 'Oliver Schürch',
+    title: 'Señor Developer',
+    githubImageId: '9716662',
+    githubUsername: 'oliverschuerch',
+  },
+  {
+    name: 'Myrta Sakellariou',
+    title: 'Mama Pigxel',
+    githubImageId: '66249294',
+    githubUsername: 'myrta2302',
+  },
+  {
+    name: 'Lea Gardavaud',
+    title: 'UI Developer',
+    githubImageId: '183501002',
+    githubUsername: 'leagrdv',
+  },
+  {
+    name: 'Alona Zherdetska',
+    title: 'Component Fairy',
+    githubImageId: '138328641',
+    githubUsername: 'alionazherdetska',
+  },
+  {
+    name: 'Tim Schär',
     title: 'UI Developer',
-    avatar: 'https://avatars.githubusercontent.com/u/9716662?v=4',
+    githubImageId: '59233938',
+    githubUsername: 'schaertim',
+  },
+  {
+    name: 'Rouven Steiger',
+    title: 'Art Guy EDK',
+    githubImageId: '104423005',
+    githubUsername: 'rouvenpost',
+  },
+  {
+    name: 'Christian Zundel',
+    title: 'UX Designer',
+    githubImageId: '119845956',
+    githubUsername: 'Cian77',
+  },
+  {
+    name: 'Alessio Travaglini',
+    title: 'Token Orchestrator',
+    githubImageId: '158268546',
+    githubUsername: 'Vandapanda',
+  },
+  {
+    name: 'Romain Veya',
+    title: 'UI Developer',
+    githubImageId: '111903046',
+    githubUsername: 'veyaromain',
   },
 ];
 
@@ -43,20 +95,25 @@ export default (params: { pathToStoryFile?: String }) => (
       <div className="bg-light">
         <div className="container">
           <div className="pt-big-r pb-big-r">
-            <h2 className="mt-0">Support</h2>
-            <div className="d-flex flex-wrap mt-huge-r mb-huge-r profile-list">
-              {DEVELOPERS.sort(() => (Math.random() > 0.5 ? 1 : -1)).map((developer, index) => (
-                <article key={index} className="avatar">
-                  <img className="profile-picture" src={developer.avatar} alt="" />
-                  <div>
-                    <p>
-                      <strong>{developer.name}</strong>
-                    </p>
-                    <p>{developer.title}</p>
-                  </div>
-                </article>
+            <h2 className="mt-0">Design System Team Members</h2>
+            <ul className="list-profile">
+              {TEAM_MEMBERS.sort(() => (Math.random() > 0.5 ? 1 : -1)).map((developer, index) => (
+                <li key={index}>
+                  <a className="avatar" href={`https://github.com/${developer.githubUsername}`}>
+                    <div className="avatar-image">
+                      <img
+                        src={`https://avatars.githubusercontent.com/u/${developer.githubImageId}?v=4`}
+                        alt={developer.name}
+                      />
+                    </div>
+                    <div className="avatar-description">
+                      <span>{developer.title}</span>
+                      <span>{developer.name}</span>
+                    </div>
+                  </a>
+                </li>
               ))}
-            </div>
+            </ul>
             <div className="row mt-regular-r">
               <div className="col-12 col-rg-auto mt-regular-r">
                 <a

diff --git a/packages/documentation/.storybook/blocks/layout/layout.scss b/packages/documentation/.storybook/blocks/layout/layout.scss
@@ -40,22 +40,80 @@
 }
 
 .docs-footer {
+  ul.list-profile {
+    display: grid;
+    grid-template-rows: auto;
+    grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
+    gap: 1rem 1.5rem;
+    margin: 0;
+    padding: 0;
+    list-style: none;
+  }
+
   .avatar {
-    display: flex;
-    align-items: flex-start;
+    display: inline-flex;
+    gap: calc(1rem - 6px * 2);
+    align-items: center;
+    text-decoration: none;
+
+    .avatar-image {
+      border-radius: 50%;
 
-    p {
-      margin-bottom: 0.25rem;
+      img {
+        display: block;
+        position: relative;
+        box-sizing: content-box;
+        z-index: 2;
+        width: 4rem;
+        border: 6px solid transparent;
+        border-radius: inherit;
+      }
     }
-  }
 
-  .profile-picture {
-    width: 5rem;
-    border-radius: 50%;
-    margin-right: 1rem;
-  }
+    .avatar-description {
+      position: relative;
+      padding: 10px;
+      border-radius: 4px;
+
+      span {
+        display: block;
+        position: relative;
+        z-index: 2;
+        font-size: 1rem;
+        line-height: 1.2;
 
-  .profile-list {
-    gap: 2rem 4rem;
+        &:first-child {
+          font-weight: bold;
+          font-size: 0.6875rem;
+        }
+      }
+
+      &::after {
+        display: block;
+        content: '';
+        position: absolute;
+        inset: 0;
+        left: calc(-1rem * 2);
+        z-index: 1;
+        border-radius: 4px;
+      }
+    }
+
+    &:hover {
+      .avatar-image {
+        box-shadow: 0.25px 1px 1px rgba(0, 0, 0, 0.1), 1px 2px 2.5px 1px rgba(0, 0, 0, 0.2);
+
+        img {
+          border-color: white;
+        }
+      }
+
+      .avatar-description {
+        &::after {
+          background-color: white;
+          box-shadow: 0.25px 1px 1px rgba(0, 0, 0, 0.1), 1px 2px 2.5px 1px rgba(0, 0, 0, 0.1);
+        }
+      }
+    }
   }
 }
diff --git a/...ntation/src/stories/components/intranet-header/intranet-header-navigation-bar.sample.html b/...ntation/src/stories/components/intranet-header/intranet-header-navigation-bar.sample.html
@@ -3,7 +3,7 @@
     <li class="nav-item"><a class="nav-link">Link 1</a></li>
     <li class="nav-item"><a class="nav-link">Link 2</a></li>
     <li class="nav-item" ngbDropdown>
-      <span class="nav-link" id="toggle" ngbDropdownToggle>Dropdown</span>
+      <button class="nav-link" id="toggle" ngbDropdownToggle>Dropdown</button>
       <div class="dropdown-menu" aria-labelledby="toggle" ngbDropdownMenu>
         <a class="dropdown-item" ngbDropdownItem>Dropdown link 1</a>
         <a class="dropdown-item" ngbDropdownItem>Dropdown link 2</a>

diff --git a/packages/documentation/src/stories/elements/paragraph/paragraph.docs.mdx b/packages/documentation/src/stories/elements/paragraph/paragraph.docs.mdx
@@ -0,0 +1,17 @@
+import { Canvas, Controls, Meta } from '@storybook/blocks';
+import * as ParagraphStories from './paragraph.stories';
+import StylesPackageImport from '@/shared/styles-package-import.mdx';
+
+<Meta of={ParagraphStories} />
+
+<div className="docs-title">
+  # Paragraph
+
+  <nav>
+    <link-design of={JSON.stringify(ParagraphStories)}></link-design>
+  </nav>
+</div>
+
+Default paragraph without size variants.
+
+<Canvas of={ParagraphStories.Default} sourceState="shown" />
diff --git a/packages/documentation/src/stories/elements/paragraph/paragraph.stories.ts b/packages/documentation/src/stories/elements/paragraph/paragraph.stories.ts
@@ -0,0 +1,37 @@
+import type { StoryObj, StoryFn, StoryContext } from '@storybook/web-components';
+import { html } from 'lit';
+import { MetaExtended } from '@root/types';
+
+const meta: MetaExtended = {
+  id: '7ecd87f1-de96-4e39-a057-ba1798eb69593',
+  title: 'Foundations/Typography/Paragraph',
+  parameters: {
+    badges: [],
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/JIT5AdGYqv6bDRpfBPV8XR/Foundations-%26-Components-Next-Level?node-id=178-6713&node-type=frame&t=Zs4iDGVBTA88pChW-0',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {
+  decorators: [
+    (story: StoryFn, context: StoryContext) => html` <div>${story(context.args, context)}</div> `,
+  ],
+  render: () => html`
+    <p>
+      This is a paragraph. It is a block of text that is separated from other blocks of text by a
+      blank line. It is usually indented at the beginning of the first line. The first word of a
+      paragraph is often indented more than the rest of the paragraph.
+    </p>
+    <p>
+      This is a paragraph. It is a block of text that is separated from other blocks of text by a
+      blank line. It is usually indented at the beginning of the first line. The first word of a
+      paragraph is often indented more than the rest of the paragraph.
+    </p>
+  `,
+};
diff --git a/packages/documentation/vite.config.js b/packages/documentation/vite.config.js
@@ -23,11 +23,4 @@ export default {
     ],
     exclude: ['@swisspost/design-system-styles'],
   },
-  css: {
-    preprocessorOptions: {
-      scss: {
-        silenceDeprecations: ['mixed-decls'],
-      },
-    },
-  },
 };
diff --git a/packages/icons/svgo.config.ts b/packages/icons/svgo.config.ts
@@ -27,7 +27,7 @@ export default {
       name: 'removeAttrs',
       params: {
         elemSeparator: '::',
-        attrs: ['style', 'svg::(width|height|xml:space)'],
+        attrs: ['style', 'data-.*', 'svg::(width|height|xml:space)'],
       },
     },
   ],

diff --git a/packages/styles/.stylelintrc b/packages/styles/.stylelintrc
@@ -1,9 +1,6 @@
 {
   "plugins": ["stylelint-scss"],
-  "extends": [
-    "stylelint-config-sass-guidelines",
-    "stylelint-prettier/recommended"
-  ],
+  "extends": ["stylelint-config-sass-guidelines", "stylelint-prettier/recommended"],
   "rules": {
     "max-nesting-depth": 5,
     "selector-max-compound-selectors": 5,

diff --git a/packages/styles/gulpfile.js b/packages/styles/gulpfile.js
@@ -121,7 +121,6 @@ gulp.task('sass', () => {
         outputStyle: 'compressed',
         includePaths: options.includePaths,
         quietDeps: true,
-        silenceDeprecations: ['mixed-decls'],
       }),
     )
     .pipe(gulpPostCss([autoprefixer()]))
@@ -139,7 +138,6 @@ gulp.task('sass:dev', () => {
       gulpSass({
         includePaths: options.includePaths,
         quietDeps: true,
-        silenceDeprecations: ['mixed-decls'],
       }),
     )
     .pipe(gulpPostCss([autoprefixer()]))

diff --git a/packages/styles/src/components/floating-label.scss b/packages/styles/src/components/floating-label.scss
@@ -100,14 +100,15 @@
     }
 
     &.form-control-sm {
-      &[type='date']::-webkit-calendar-picker-indicator {
-        margin-top: -(spacing.$size-small-regular);
-      }
       font-size: forms.$form-floating-label-font-size-placeholder-sm;
       height: forms.$form-floating-label-height-sm;
       min-height: forms.$form-floating-label-height-sm;
       padding-inline: forms.$form-floating-padding-x-sm;
 
+      &[type='date']::-webkit-calendar-picker-indicator {
+        margin-top: -(spacing.$size-small-regular);
+      }
+
       ~ label {
         font-size: forms.$form-floating-label-font-size-placeholder-sm;
         padding-top: forms.$form-floating-label-padding-t-sm;

diff --git a/packages/styles/src/elements/_index.scss b/packages/styles/src/elements/_index.scss
@@ -1,5 +1,6 @@
 @use 'reset';
 @use 'body';
 @use 'anchor';
+@use 'paragraph';
 @use 'heading';
 @use 'fieldset-legend';
diff --git a/packages/styles/src/elements/paragraph.scss b/packages/styles/src/elements/paragraph.scss
@@ -0,0 +1,17 @@
+@use 'sass:map';
+@use '../functions/tokens';
+@use '../tokens/elements';
+
+tokens.$default-map: elements.$post-paragraph;
+
+p {
+  margin-block: tokens.get('paragraph-margin-block-start');
+
+  &:first-child {
+    margin-block-start: 0;
+  }
+
+  &:last-child {
+    margin-block-end: 0;
+  }
+}