Merge branch 'main' into 2473-migration-document-modal

.changeset/clever-flowers-pump.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Added a documentation page for the ng-bootstrap progressbar component.

.changeset/modern-eggs-cheat.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Added a documentation page for the ng-bootstrap typeahead component.

.changeset/poor-ligers-cheat.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Fixed conflict between autolink anchor links and normal anchor links.

.changeset/rich-foxes-tie.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Added a documentation page for the ng-bootstrap pagination component.

.changeset/seven-seals-yell.md

@@ -0,0 +1,5 @@
+---
+'@swisspost/design-system-documentation': patch
+---
+
+Added a documentation page for the ng-bootstrap timepicker component.

packages/documentation/.storybook/main.ts

@@ -1,7 +1,7 @@
 import type { StorybookConfig } from '@storybook/web-components-vite';
 import pkg from '../package.json';
-import remarkAutolinkHeadings from 'remark-autolink-headings';
 import { mergeConfig } from 'vite';
+import rehypeAutolinkHeadings from 'rehype-autolink-headings';
 
 const config: StorybookConfig = {
   logLevel: 'info',
@@ -29,15 +29,16 @@ const config: StorybookConfig = {
       options: {
         mdxPluginOptions: {
           mdxCompileOptions: {
-            remarkPlugins: [
+            rehypePlugins: [
               [
-                remarkAutolinkHeadings,
+                rehypeAutolinkHeadings,
                 {
                   content: {
                     type: 'element',
                     tagName: 'post-icon',
                     properties: { name: 2037 },
                   },
+                  headingProperties: { className: 'docs-autolink' },
                   behavior: 'append',
                 },
               ],

packages/documentation/.storybook/manager-head.html

@@ -1,4 +1,5 @@
-<script src="/assets/scripts/storybook-events.js"></script>
+<script src="/assets/scripts/storybook-manager-events.js"></script>
+<script src="/assets/scripts/autolink.js"></script>
 <script src="/assets/scripts/analytics-helper.js"></script>
 <script src="/assets/scripts/analytics-events.js"></script>
 

packages/documentation/.storybook/preview-body.html

@@ -0,0 +1 @@
+<script src="/assets/scripts/storybook-preview-events.js"></script>

packages/documentation/.storybook/preview-head.html

@@ -15,21 +15,3 @@
 <script>
   window.global = window;
 </script>
-
-<!-- Change base location of iframe to get relative parent anchor link and not relative to iframe url. Source: https://stackoverflow.com/a/68418536  -->
-<script>
-  const onChangeState = () => {
-    const baseEl = document.querySelector('base');
-    baseEl.setAttribute('href', window.parent.location.href);
-  };
-
-  ['pushState', 'replaceState'].forEach(changeState => {
-    window.history[changeState] = new Proxy(window.history[changeState], {
-      apply(target, thisArg, argList) {
-        onChangeState();
-
-        return target.apply(thisArg, argList);
-      },
-    });
-  });
-</script>

packages/documentation/.storybook/preview.ts

@@ -58,9 +58,11 @@ const preview: Preview = {
             'Progressbar',
             'Table',
             'Tabs',
+            'Timepicker',
             'Toast',
             'Tooltip',
             'Topic Teaser',
+            'Typeahead',
           ],
           'Patterns',
           'Utilities',

packages/documentation/package.json

@@ -63,6 +63,7 @@
     "react": "18.2.0",
     "react-dom": "18.2.0",
     "react-syntax-highlighter": "15.5.0",
+    "rehype-autolink-headings": "^7.1.0",
     "remark-autolink-headings": "7.0.1",
     "rimraf": "5.0.5",
     "sass": "1.70.0",

packages/documentation/public/assets/scripts/autolink.js

@@ -0,0 +1,11 @@
+// Change base location of iframe to get relative parent anchor link and not relative to iframe url.
+window.addEventListener('storybook:contentReady', function () {
+  const previewIframe = document.getElementById('storybook-preview-iframe');
+  let links = previewIframe.contentDocument.querySelectorAll('.docs-autolink a');
+  links.forEach(link => {
+    const anchor = link.getAttribute('href');
+    if (anchor.startsWith('#')) {
+      link.setAttribute('href', `${window.parent.location.href}${anchor}`);
+    }
+  });
+});

packages/documentation/public/assets/scripts/storybook-preview-events.js

@@ -0,0 +1,30 @@
+const previewIframe = document.body;
+let footerEl = document.querySelector('.docs-footer');
+let currentPage = null;
+
+if (footerEl) {
+  // if footer already exists, just emit ready event and listen for route-changes
+  contentReady();
+} else {
+  // if footer does not exist yet, wait until its rendered, then emit contentReady event and listen for route-changes
+  new MutationObserver(function () {
+    footerEl = document.querySelector('.docs-footer');
+
+    if (footerEl && isNewPage()) {
+      contentReady();
+      currentPage = window.parent.location.href;
+    }
+  }).observe(previewIframe, {
+    childList: true,
+    subtree: true,
+  });
+}
+
+function contentReady() {
+  window.dispatchEvent(new Event('storybook:contentReady'));
+  window.parent.dispatchEvent(new Event('storybook:contentReady'));
+}
+
+function isNewPage() {
+  return currentPage !== window.parent.location.href;
+}

packages/documentation/src/stories/components/timepicker/timepicker-basic.sample.html

@@ -0,0 +1,2 @@
+<ngb-timepicker [(ngModel)]="time"></ngb-timepicker>
+<pre>Selected time: <span *ngIf="time">{{time | json}}</span></pre>

packages/documentation/src/stories/components/timepicker/timepicker-sizes.sample.html

@@ -0,0 +1 @@
+<ngb-timepicker size="large" name="timeLg" ngModel></ngb-timepicker>

packages/documentation/src/stories/components/timepicker/timepicker-validation.sample.html

@@ -0,0 +1,11 @@
+<label for="tp-validated">Pick a time between 12:00 and 15:00</label>
+<ngb-timepicker
+  id="tp-validated"
+  name="timeWithValidation"
+  [formControl]="ctrl"
+  required
+></ngb-timepicker>
+<p class="valid-feedback">The time is right.</p>
+<p class="invalid-feedback" *ngIf="ctrl.errors?.tooEarly">Time is too early.</p>
+<p class="invalid-feedback" *ngIf="ctrl.errors?.tooLate">Time is too late.</p>
+<p class="invalid-feedback" *ngIf="ctrl.errors?.required">This field is required.</p>

packages/documentation/src/stories/components/timepicker/timepicker.docs.mdx

@@ -0,0 +1,66 @@
+import { Meta, Source } from '@storybook/blocks';
+import * as timepickerStories from './timepicker.stories.ts';
+import StylesPackageImport from '../../../shared/styles-package-import.mdx';
+import NgbComponentDemoLink from '../../../shared/nb-bootstrap/ngb-component-demo-link.mdx';
+import NgbComponentAlert from '../../../shared/nb-bootstrap/ngb-component-alert.mdx';
+import NgbComponentImport from '../../../shared/nb-bootstrap/ngb-component-import.mdx';
+import NgbComponentInternationalization from '../../../shared/nb-bootstrap/ngb-component-internationalization.mdx';
+import { PostTabHeader, PostTabPanel, PostTabs } from '@swisspost/design-system-components-react';
+import SampleBasic from './timepicker-basic.sample.html?raw';
+import SampleSizes from './timepicker-sizes.sample.html?raw';
+import SampleValidation from './timepicker-validation.sample.html?raw';
+
+<Meta of={timepickerStories} />
+
+<div className="d-flex align-items-center justify-content-between">
+  # Timepicker
+
+  <NgbComponentDemoLink component="timepicker" />
+</div>
+
+<p className="lead">A component that allows the user to choose a time.</p>
+
+<NgbComponentAlert component="timepicker" />
+
+<ul>
+  <li>
+    <a href="#component-import" target="_self">Component Import</a>
+  </li>
+  <li>
+    <a href="#style-imports" target="_self">Style Imports</a>
+  </li>
+  <li>
+    <a href="#internationalization" target="_self">Internationalization</a>
+  </li>
+  <li>
+    <a href="#examples" target="_self">Examples</a>
+  </li>
+</ul>
+
+<NgbComponentImport module="NgbTimepickerModule" />
+
+<StylesPackageImport components={["timepicker"]} />
+
+<NgbComponentInternationalization />
+
+## Examples
+
+<PostTabs>
+  <PostTabHeader slot="tabs" panel="sampleBasic">Basic example</PostTabHeader>
+  <PostTabPanel name="sampleBasic">
+    <Source code={SampleBasic} language="html" />
+  </PostTabPanel>
+
+  <PostTabHeader slot="tabs" panel="sampleSizes">Sizes</PostTabHeader>
+  <PostTabPanel name="sampleSizes">
+    By default, the timepicker component only supports 3 different sizes: sm , md , and lg .
+
+    To use one of these predefined sizes, simply set the `[size]` entry as defined in the [component api](https://ng-bootstrap.github.io/#/components/timepicker/api).
+    <Source code={SampleSizes} language="html" />
+  </PostTabPanel>
+
+  <PostTabHeader slot="tabs" panel="sampleValidation">Validation</PostTabHeader>
+  <PostTabPanel name="sampleValidation">
+    <Source code={SampleValidation} language="html" />
+  </PostTabPanel>
+</PostTabs>

packages/documentation/src/stories/components/timepicker/timepicker.stories.ts

@@ -0,0 +1,15 @@
+import { Meta, StoryObj } from '@storybook/web-components';
+import { BADGE } from '../../../../.storybook/constants';
+
+const meta: Meta = {
+  title: 'Components/Timepicker',
+  parameters: {
+    badges: [BADGE.WEB_COMPONENT_CANDIDATE],
+  },
+};
+
+export default meta;
+
+type Story = StoryObj;
+
+export const Default: Story = {};

packages/documentation/src/stories/components/typeahead/typeahead-basic.sample.html

@@ -0,0 +1,13 @@
+<div class="form-floating mb-3">
+  <input
+    id="typeahead-basic"
+    placeholder=" "
+    type="text"
+    class="form-control form-control-lg"
+    [(ngModel)]="model"
+    [ngbTypeahead]="search"
+  />
+  <label for="typeahead-basic" class="form-label">Search for a US state</label>
+</div>
+<hr />
+<pre>Model: {{ model | json }}</pre>

packages/documentation/src/stories/components/typeahead/typeahead-basic.sample.ts

@@ -0,0 +1,90 @@
+import { Component } from '@angular/core';
+import { NgbTypeaheadModule } from '@ng-bootstrap/ng-bootstrap';
+import { Observable, OperatorFunction } from 'rxjs';
+import { debounceTime, distinctUntilChanged, map } from 'rxjs/operators';
+import { FormsModule } from '@angular/forms';
+import { JsonPipe } from '@angular/common';
+
+const states = [
+  'Alabama',
+  'Alaska',
+  'American Samoa',
+  'Arizona',
+  'Arkansas',
+  'California',
+  'Colorado',
+  'Connecticut',
+  'Delaware',
+  'District Of Columbia',
+  'Federated States Of Micronesia',
+  'Florida',
+  'Georgia',
+  'Guam',
+  'Hawaii',
+  'Idaho',
+  'Illinois',
+  'Indiana',
+  'Iowa',
+  'Kansas',
+  'Kentucky',
+  'Louisiana',
+  'Maine',
+  'Marshall Islands',
+  'Maryland',
+  'Massachusetts',
+  'Michigan',
+  'Minnesota',
+  'Mississippi',
+  'Missouri',
+  'Montana',
+  'Nebraska',
+  'Nevada',
+  'New Hampshire',
+  'New Jersey',
+  'New Mexico',
+  'New York',
+  'North Carolina',
+  'North Dakota',
+  'Northern Mariana Islands',
+  'Ohio',
+  'Oklahoma',
+  'Oregon',
+  'Palau',
+  'Pennsylvania',
+  'Puerto Rico',
+  'Rhode Island',
+  'South Carolina',
+  'South Dakota',
+  'Tennessee',
+  'Texas',
+  'Utah',
+  'Vermont',
+  'Virgin Islands',
+  'Virginia',
+  'Washington',
+  'West Virginia',
+  'Wisconsin',
+  'Wyoming',
+];
+
+@Component({
+  selector: 'ngbd-typeahead-basic',
+  standalone: true,
+  imports: [NgbTypeaheadModule, FormsModule, JsonPipe],
+  templateUrl: './typeahead-basic.html',
+  styles: `.form-control { width: 300px; }`,
+})
+export class NgbdTypeaheadBasic {
+  model: any;
+
+  search: OperatorFunction<string, readonly string[]> = (text$: Observable<string>) =>
+    text$.pipe(
+      debounceTime(200),
+      distinctUntilChanged(),
+      map(term =>
+        term.length < 2
+          ? []
+          : states.filter(v => v.toLowerCase().indexOf(term.toLowerCase()) > -1).slice(0, 10),
+      ),
+    );
+}