docs(sbb-dialog): fix links to other components (#2584)

.stylelintrc.json

@@ -1,6 +1,6 @@
 {
   "extends": ["stylelint-config-standard-scss", "stylelint-config-prettier-scss"],
-  "ignoreFiles": ["tools/generate-component/**/*.scss"],
+  "ignoreFiles": ["dist/**/*", "tools/generate-component/**/*.scss"],
   "rules": {
     "custom-property-pattern": "^_?(?:(?:o|c|u|t|s|is|has|_|js|qa)-)?[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*(?:__[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:--[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:\\[.+\\])?$",
     "selector-class-pattern": "^(?:(?:o|c|u|t|s|is|has|_|js|qa)-)?[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*(?:__[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:--[a-zA-Z0-9]+(?:-[a-zA-Z0-9]+)*)?(?:\\[.+\\])?$",

package.json

@@ -42,7 +42,7 @@
     "lint:js": "eslint \"**/*.js\"",
     "lint:yml": "eslint \"**/*.{yml,yaml}\"",
     "lint:styles": "stylelint \"**/*.scss\"",
-    "lint:lit": "yarn lit-analyzer \"src/components/**/*.ts\"",
+    "lint:lit": "yarn lit-analyzer \"src/**/*.ts\"",
     "lint:circular-imports": "madge --circular --extensions ts ./src",
     "lint:tsc": "npm-run-all --sequential lint:tsc:*",
     "lint:tsc:components": "tsc --noEmit --project src/components/tsconfig.json",

src/components/container/sticky-bar/sticky-bar.stories.ts

@@ -78,12 +78,11 @@ const actionGroup = (): TemplateResult => html`
       align-self="start"
       icon-name="chevron-small-left-small"
       href="https://www.sbb.ch/en/"
-      sbb-dialog-close
     >
       Link
     </sbb-block-link>
-    <sbb-secondary-button sbb-dialog-close> Cancel </sbb-secondary-button>
-    <sbb-button sbb-dialog-close> Confirm </sbb-button>
+    <sbb-secondary-button>Cancel</sbb-secondary-button>
+    <sbb-button>Confirm</sbb-button>
   </sbb-action-group>
 `;
 

src/components/dialog/dialog-actions/readme.md

@@ -1,4 +1,4 @@
-The `sbb-dialog-actions` component extends the [sbb-action-group](/docs/components-sbb-action-group--docs) component. Use it in combination with the [sbb-dialog](/docs/components-sbb-dialog--docs) to display a footer with an action group.
+The `sbb-dialog-actions` component extends the [sbb-action-group](/docs/components-sbb-action-group--docs) component. Use it in combination with the [sbb-dialog](/docs/components-sbb-dialog-sbb-dialog--docs) to display a footer with an action group.
 
 ```html
 <sbb-dialog>

src/components/dialog/dialog-content/readme.md

@@ -1,4 +1,4 @@
-Use the `sbb-dialog-content` in combination with the [sbb-dialog](/docs/components-sbb-dialog--docs) to display a content inside the dialog.
+Use the `sbb-dialog-content` in combination with the [sbb-dialog](/docs/components-sbb-dialog-sbb-dialog--docs) to display a content inside the dialog.
 
 ```html
 <sbb-dialog>

src/components/dialog/dialog-title/readme.md

@@ -1,4 +1,4 @@
-The `sbb-dialog-title` component extends the [sbb-title](/docs/components-sbb-title--docs) component. Use it in combination with the [sbb-dialog](/docs/components-sbb-dialog--docs) to display a header in the dialog with a title, a close button and an optional back button.
+The `sbb-dialog-title` component extends the [sbb-title](/docs/components-sbb-title--docs) component. Use it in combination with the [sbb-dialog](/docs/components-sbb-dialog-sbb-dialog--docs) to display a header in the dialog with a title, a close button and an optional back button.
 
 ```html
 <sbb-dialog>

src/components/dialog/dialog/readme.md

@@ -4,7 +4,7 @@ It offers the following features:
 - creates a backdrop for disabling interaction below the modal;
 - disables scrolling of the page content while open;
 - manages focus properly by setting it on the first focusable element;
-- can host a [sbb-dialog-actions](/docs/components-sbb-dialog-actions--docs) component in the footer;
+- can host a [sbb-dialog-actions](/docs/components-sbb-dialog-sbb-dialog-actions--docs) component in the footer;
 - has a close button, which is always visible;
 - can display a back button next to the title;
 - adds the appropriate ARIA roles automatically.
@@ -84,7 +84,7 @@ It's possible to display the component in `negative` variant using the self-name
 When using a button to trigger the dialog, ensure to manage the appropriate ARIA attributes on the button element itself. This includes: `aria-haspopup="dialog"` that signals to assistive technologies that the button controls a dialog element,
 `aria-controls="dialog-id"` that connects the button to the dialog by referencing the dialog's ID. Consider using `aria-expanded` to indicate the dialog's current state (open or closed).
 
-The `sbb-dialog` component may visually hide the title thanks to the `hideOnScroll` property of the [sbb-dialog-title](/docs/components-sbb-dialog-title--docs) to create more space for content, this is useful especially on smaller screens. Screen readers and other assistive technologies will still have access to the title information for context.
+The `sbb-dialog` component may visually hide the title thanks to the `hideOnScroll` property of the [sbb-dialog-title](/docs/components-sbb-dialog-sbb-dialog-title--docs) to create more space for content, this is useful especially on smaller screens. Screen readers and other assistive technologies will still have access to the title information for context.
 
 <!-- Auto Generated Below -->
 

src/components/overlay/readme.md

@@ -1,5 +1,5 @@
 The `sbb-overlay` component provides a way to present content on top of the app's content
-and it's similar to the [sbb-dialog](/docs/components-sbb-dialog--docs).
+and it's similar to the [sbb-dialog](/docs/components-sbb-dialog-sbb-dialog--docs).
 It offers the following features:
 
 - disables scrolling of the page content while open;

src/storybook/helpers/spread.spec.ts

@@ -142,3 +142,10 @@ describe(`sbbSpread`, () => {
     });
   });
 });
+
+declare global {
+  interface HTMLElementTagNameMap {
+    // eslint-disable-next-line @typescript-eslint/naming-convention
+    'spread-test-only': SpreadDirectiveTestOnlyElement;
+  }
+}

src/storybook/pages/home/home--logged-in.stories.ts

@@ -189,7 +189,7 @@ const Template = (args: Args): TemplateResult => html`
             All purchased tickets
           </sbb-secondary-button>
 
-          <sbb-dialog id="my-dialog" title-content="My Dialog">
+          <sbb-dialog id="my-dialog">
             <sbb-dialog-title back-button>My Dialog</sbb-dialog-title>
 
             <sbb-dialog-content>
@@ -200,14 +200,13 @@ const Template = (args: Args): TemplateResult => html`
                 irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
                 pariatur.
               </p>
-              <sbb-button
-                variant="secondary"
+              <sbb-secondary-button
                 size="m"
                 @click=${() =>
                   (document.getElementById('my-stacked-dialog') as SbbDialogElement).open()}
               >
                 Open stacked dialog
-              </sbb-button>
+              </sbb-secondary-button>
             </sbb-dialog-content>
 
             <sbb-dialog-actions

src/storybook/pages/home/home.common.ts

@@ -3,9 +3,7 @@ import isChromatic from 'chromatic/isChromatic';
 import type { TemplateResult } from 'lit';
 import { html } from 'lit';
 
-import '../../../components/button/button.js';
-import '../../../components/button/secondary-button.js';
-import '../../../components/button/secondary-button-static.js';
+import '../../../components/button.js';
 import '../../../components/card.js';
 import '../../../components/clock.js';
 import '../../../components/divider.js';
@@ -257,12 +255,12 @@ export const footer = (args: Args): TemplateResult => html`
           Report property damage
         </sbb-block-link>
       </sbb-link-list>
-      <sbb-button
+      <sbb-button-link
         href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html"
         size="m"
       >
         All help topics
-      </sbb-button>
+      </sbb-button-link>
     </div>
     <sbb-link-list title-level="2" title-content="More SBB." ?negative=${args.negative}>
       <sbb-block-link
@@ -305,12 +303,12 @@ export const footer = (args: Args): TemplateResult => html`
           Our newsletter regularly informs you of attractive offers from SBB via e-mail.
         </p>
       </span>
-      <sbb-secondary-button
+      <sbb-secondary-button-link
         href="https://www.sbb.ch/de/hilfe-und-kontakt/erstattung-entschaedigung/rueckerstattung-von-billetten.html"
         size="m"
       >
         Subscribe
-      </sbb-secondary-button>
+      </sbb-secondary-button-link>
     </div>
     <sbb-clock
       ${sbbSpread(

src/storybook/pages/home/home.stories.ts

@@ -139,15 +139,15 @@ const Template = (args: Args): TemplateResult => html`
           </sbb-card>
         </div>
         <sbb-action-group orientation="vertical" horizontal-from="small">
-          <sbb-button
+          <sbb-button-link
             href="https://github.com/lyne-design-system/lyne-components"
             icon-name="qrcode-small"
           >
             My tickets & subscriptions
-          </sbb-button>
-          <sbb-secondary-button href="https://github.com/lyne-design-system/lyne-components">
+          </sbb-button-link>
+          <sbb-secondary-button-link href="https://github.com/lyne-design-system/lyne-components">
             All Products
-          </sbb-secondary-button>
+          </sbb-secondary-button-link>
         </sbb-action-group>
       </div>
     </section>