feat(docs): Migrate Timepicker documentation

.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/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/preview.ts

@@ -51,6 +51,16 @@ const preview: Preview = {
             'Intranet Header',
             'Icons',
             ['Getting Started'],
+            'Pagination',
+            'Popover',
+            'Progressbar',
+            'Table',
+            'Tabs',
+            'Timepicker',
+            'Toast',
+            'Tooltip',
+            'Topic Teaser',
+            'Typeahead',
           ],
           'Patterns',
           'Utilities',

packages/documentation/src/stories/components/pagination/pagination-default.sample.html

@@ -0,0 +1,12 @@
+<h4>Pagination</h4>
+
+<ngb-pagination
+  [collectionSize]="120"
+  [(page)]="page"
+  [maxSize]="3"
+  [rotate]="true"
+></ngb-pagination>
+
+<hr />
+
+<pre>Current page: {{ page }}</pre>

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

@@ -0,0 +1,45 @@
+import { Meta, Source } from '@storybook/blocks';
+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 * as paginationStories from './pagination.stories';
+import paginationDefault from './pagination-default.sample.html?raw';
+
+<Meta of={paginationStories} />
+
+<div className="d-flex align-items-center justify-content-between">
+  # Pagination
+
+  <NgbComponentDemoLink component="pagination" />
+</div>
+
+<p className="lead">A component to display a navigation with page numbers.</p>
+
+<NgbComponentAlert component="pagination" />
+
+<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="NgbPaginationModule" />
+
+<StylesPackageImport components={["pagination"]} />
+
+<NgbComponentInternationalization />
+
+## Examples
+
+<Source code={paginationDefault} language="html"/>

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

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

packages/documentation/src/stories/components/progressbar/progressbar-default.sample.html

@@ -0,0 +1,6 @@
+<ngb-progressbar
+  ariaLabel="Example of progress."
+  type="primary"
+  [showValue]="true"
+  [value]="12.5"
+></ngb-progressbar>

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

@@ -0,0 +1,40 @@
+import { Meta, Source } from '@storybook/blocks';
+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 * as progressbarStories from './progressbar.stories.ts';
+import progressbarDefault from './progressbar-default.sample.html?raw';
+
+<Meta of={progressbarStories} />
+
+<div className="d-flex align-items-center justify-content-between">
+  # Progressbar
+
+  <NgbComponentDemoLink component="progressbar" />
+</div>
+
+<p className="lead">A component to display an indicator showing the completion progress of as task.</p>
+
+<NgbComponentAlert component="progressbar" />
+
+<ul>
+  <li>
+    <a href="#component-import" target="_self">Component Import</a>
+  </li>
+  <li>
+    <a href="#internationalization" target="_self">Internationalization</a>
+  </li>
+  <li>
+    <a href="#examples" target="_self">Examples</a>
+  </li>
+</ul>
+
+<NgbComponentImport module="NgbProgressbarModule" />
+
+## Internationalization
+
+The progress bar requires an `ariaLabel` attribute which provides context to the current progress. See the example below for how to use it.
+
+## Examples
+
+<Source code={progressbarDefault} language="html"/>

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

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

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.docs.mdx

@@ -0,0 +1,33 @@
+import { Meta, Source } from '@storybook/blocks';
+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 * as typeaheadStories from './typeahead.stories.ts';
+import typeaheadSample from './typeahead.sample.html?raw';
+
+<Meta of={typeaheadStories} />
+
+<div className="d-flex align-items-center justify-content-between">
+  # Typeahead
+
+  <NgbComponentDemoLink component="typeahead" />
+</div>
+
+<p className="lead">A component to display a list of suggestions following what the user is typing.</p>
+
+<NgbComponentAlert component="typeahead" />
+
+<ul>
+  <li>
+    <a href="#component-import" target="_self">Component Import</a>
+  </li>
+  <li>
+    <a href="#examples" target="_self">Examples</a>
+  </li>
+</ul>
+
+<NgbComponentImport module="NgbTypeaheadModule" />
+
+## Examples
+
+<Source code={typeaheadSample} language="html"/>

packages/documentation/src/stories/components/typeahead/typeahead.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.stories.ts

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