Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore(documentation): Rework getting started section and add Angular CUSTOM_ELEMENTS_SCHEMA info #2722

Merged
merged 40 commits into from
Mar 11, 2024
Merged
Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
40 commits
Select commit Hold shift + click to select a range
2dc3114
chore(documentation): Rework getting started section and add Angular …
imagoiq Feb 27, 2024
4c1f156
Add changesets + fixes
imagoiq Feb 27, 2024
490c5d2
Fix unwanted change
imagoiq Feb 27, 2024
b843a64
Fix unwanted change
imagoiq Feb 27, 2024
e364468
Improve getting started page
imagoiq Feb 27, 2024
b18d017
Improve getting started page
imagoiq Feb 27, 2024
c0fe4f8
Improve getting started page
imagoiq Feb 27, 2024
bf07aa7
Improve getting started page
imagoiq Feb 27, 2024
e7c3701
Remove badge to ensure, that we'll not add them again after the PR to…
imagoiq Feb 27, 2024
f67e428
Fix spinner snapshot id
imagoiq Feb 28, 2024
6b17a72
Capitalize name of components in the sidebar like the others
imagoiq Feb 28, 2024
c84a9b7
Normalize Card Button
imagoiq Feb 28, 2024
9dd4369
Update packages/demo/src/app/bootstrap/components/card/complex-card-d…
imagoiq Feb 29, 2024
f706b03
Update packages/documentation/.storybook/styles/preview.scss
imagoiq Feb 29, 2024
4bd9af8
Update packages/documentation/src/stories/getting-started/angular/ang…
imagoiq Feb 29, 2024
abfa8c9
Remove underline on emoji
imagoiq Feb 29, 2024
5cbe3e0
Change icon to Search for Icons
imagoiq Feb 29, 2024
840b8ce
Merge branch 'main' into chore/docs-rework-getting-started+angular-cust
imagoiq Feb 29, 2024
3a6e289
Fix from migration
imagoiq Feb 29, 2024
03ddc87
Reorder Search for Icons and fix title
imagoiq Feb 29, 2024
155e407
Fix from merge
imagoiq Feb 29, 2024
20ba020
Merge branch 'main' into chore/docs-rework-getting-started+angular-cust
imagoiq Feb 29, 2024
e984a46
Update packages/documentation/src/stories/components/intranet-header/…
imagoiq Mar 4, 2024
0f3c633
Update packages/documentation/src/stories/getting-started/angular/ang…
imagoiq Mar 4, 2024
eca26dc
Update packages/documentation/src/stories/getting-started/packages/ic…
imagoiq Mar 4, 2024
4edc524
Rename getting started to introduction
imagoiq Mar 4, 2024
aa05e04
Merge remote-tracking branch 'origin/chore/docs-rework-getting-starte…
imagoiq Mar 4, 2024
4d5258c
Merge branch 'main' into chore/docs-rework-getting-started+angular-cust
imagoiq Mar 4, 2024
d37498c
Use tile from homepage on Introduction and convert tile to Lit
imagoiq Mar 4, 2024
1ff9a11
Fix overflow, some renaming and use tile in Angular
imagoiq Mar 4, 2024
ac7911e
Link internet-header doc page with Angular doc page and restructure
imagoiq Mar 4, 2024
5871ddb
Fix package title
imagoiq Mar 4, 2024
e53f0c1
Extract package data and types
imagoiq Mar 5, 2024
9946ed2
Fix packageType import
imagoiq Mar 5, 2024
1817971
Simplify types import
imagoiq Mar 5, 2024
0e13663
Automate construct of components list
imagoiq Mar 6, 2024
be44861
Fix warning
imagoiq Mar 6, 2024
0f75be2
Fix react map missing key error
imagoiq Mar 6, 2024
2783b2b
Fix <p> cannot appear as a descendant of <p>
imagoiq Mar 6, 2024
4d57ef4
Fix title and change column order
imagoiq Mar 11, 2024
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/old-pumas-sit.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'@swisspost/design-system-documentation': patch
---

Reworked the getting-started section to better understand the different packages and add more info about Angular.
Original file line number Diff line number Diff line change
Expand Up @@ -140,7 +140,7 @@ <h5 class="card-title">Card title</h5>
</div>

<h3>Card columns</h3>
<p>Card columns can be checked out in the swiss post example below.</p>
<p>Card columns can be checked out in the Swiss post example below.</p>
imagoiq marked this conversation as resolved.
Show resolved Hide resolved

<p>
Default
Expand Down
38 changes: 2 additions & 36 deletions packages/documentation/.storybook/preview.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,13 +25,14 @@ const preview: Preview = {

// Category - Getting Started
'Getting Started',
['Styles', 'Components', 'Components-Angular', 'Compatibility'],
['Getting Started', 'Angular', 'Compatibility', 'Packages'],

// Category - Foundations
'Foundations',
[
'Typography',
'Color',
'Icons',
'Layout',
['Breakpoints', 'Containers', 'Grid', 'Columns', 'TODOS'],
'Elevation',
Expand All @@ -40,41 +41,6 @@ const preview: Preview = {

// Category - Components
'Components',
[
imagoiq marked this conversation as resolved.
Show resolved Hide resolved
'Accordion',
'Alert',
'Badge',
'Blockquote',
'Button',
'Button Group',
'Cards',
'Carousel',
'Collapsible',
'Datepicker',
'Dropdown',
'Forms',
'Heading',
'Icons',
['Getting Started'],
'Internet Header',
['Getting Started', 'Header'],
'Intranet Header',
'Modal',
'Notification overlay',
'Pagination',
'Popover',
'Progressbar',
'Spinner',
'Stepper',
'Subnavigation',
'Table',
'Tabs',
'Timepicker',
'Toast',
'Tooltip',
'Topic Teaser',
'Typeahead',
],

// Category - Patterns
'Patterns',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ const meta: Meta = {
'The icon to display in the alert. By default, the icon depends on the alert type.' +
'<span className="mt-mini alert alert-info alert-sm">' +
'To use a custom icon, you must first ' +
'<a href="?path=/docs/40ed323b-9c1a-42ab-91ed-15f97f214608--docs">set up the icons in your project</a>' +
'<a href="/?path=/docs/40ed323b-9c1a-42ab-91ed-15f97f214608--docs">set up the icons in your project</a>' +
'.</span>',
if: {
arg: 'noIcon',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -138,7 +138,7 @@ const meta: Meta = {
'Defines a custom icon.' +
'<span className="mt-mini alert alert-info alert-sm">' +
'To use a custom icon, you must first ' +
'<a href="?path=/docs/40ed323b-9c1a-42ab-91ed-15f97f214608--docs">set up the icons in your project</a>' +
'<a href="/?path=/docs/40ed323b-9c1a-42ab-91ed-15f97f214608--docs">set up the icons in your project</a>' +
'.</span>',
if: {
arg: 'tag',
Expand Down
Original file line number Diff line number Diff line change
@@ -1,14 +1,14 @@
import { spread } from '@open-wc/lit-helpers';
import { Args, Meta, StoryObj } from '@storybook/web-components';
import { Components } from '@swisspost/design-system-components';
import { html } from 'lit';
import { ifDefined } from 'lit/directives/if-defined.js';
import { BADGE } from '../../../../../.storybook/constants';
import { spreadArgs } from '../../../../utils';
import { BADGE } from '../../../../.storybook/constants';
import { spreadArgs } from '../../../utils';
import { Components } from '@swisspost/design-system-components/src';

const meta: Meta = {
id: '0dcfe3c0-bfc0-4107-b43b-7e9d825b805f',
title: 'Components/Icons/Icon Component',
title: 'Components/Icon',
component: 'post-icon',
parameters: {
badges: [BADGE.NEEDS_REVISION, BADGE.SINCE_V1],
Expand Down
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { Meta, StoryObj } from '@storybook/web-components';
import { html } from 'lit';
import { spread } from '@open-wc/lit-helpers';
import { BADGE } from '../../../../../../.storybook/constants';
import { getAttributes } from '../../../../../utils';
import { BADGE } from '../../../../../.storybook/constants';
import { getAttributes } from '../../../../utils';
import customItems from './overrides/custom-items';

const meta: Meta<HTMLSwisspostInternetBreadcrumbsElement> = {
Expand Down
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { Args, Meta, StoryContext, StoryObj } from '@storybook/web-components';
import { html } from 'lit';
import { BADGE } from '../../../../../../.storybook/constants';
import { BADGE } from '../../../../../.storybook/constants';
import customFooterConfig from './custom-config/custom-footer-config';
import { spread } from '@open-wc/lit-helpers';

Expand Down

This file was deleted.

Original file line number Diff line number Diff line change
@@ -1,7 +1,7 @@
import { Args, Meta, StoryObj } from '@storybook/web-components';
import { BADGE } from '../../../../../../.storybook/constants';
import { BADGE } from '../../../../../.storybook/constants';
import { html } from 'lit';
import { spreadArgs } from '../../../../../utils';
import { spreadArgs } from '../../../../utils';
import customConfig from './config/custom-config';
import osFlyoutOverrides from './config/os-flyout-overrides';
import languageSwitchOverrides from './config/language-switch-overrides';
Expand Down

This file was deleted.

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -8,9 +8,7 @@ import SamplePostweb from './intranet-header-postweb.sample.html?raw';

<Meta of={IntranetHeaderStories} />

# @swisspost/design-system-intranet-header

[![npm version](https://badge.fury.io/js/@swisspost%2Fdesign-system-intranet-header.svg)](https://badge.fury.io/js/@swisspost%2Fdesign-system-intranet-header)
# Intranet-header

<div className="alert alert-info alert-md">
<h2 className="alert-heading">Angular only component</h2>
Expand All @@ -34,7 +32,7 @@ The Header Angular component for internal usage.

## Installation

<Source code={`npm install @swisspost/design-system-intranet-header`} language="bash" />
See <a href="/?path=/docs/7068be42-1a20-4a34-9e79-7fb7f9f2940f--docs">Internet-header package page</a>
imagoiq marked this conversation as resolved.
Show resolved Hide resolved

## Usage

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import type { Meta, StoryObj } from '@storybook/web-components';
import { BADGE } from '../../../../.storybook/constants';

const meta: Meta = {
id: 'aab3f0df-08ca-4e33-90eb-77ffda6528db',
title: 'Components/Notification overlay',
parameters: {
badges: [BADGE.WEB_COMPONENT_CANDIDATE],
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ const meta: Meta = {
'Defines a custom icon.' +
'<span className="mt-mini alert alert-info alert-sm">' +
'To use a custom icon, you must first ' +
'<a href="?path=/docs/40ed323b-9c1a-42ab-91ed-15f97f214608--docs">set up the icons in your project</a>' +
'<a href="/?path=/docs/40ed323b-9c1a-42ab-91ed-15f97f214608--docs">set up the icons in your project</a>' +
'.</span>',
if: {
arg: 'noIcon',
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,7 @@ import * as SearchIcons from './search-icons.stories';

<Meta of={SearchIcons} />

# Search for icons
# Icons

<div className="lead">
The official Swiss Post Icon Library for the web with over 800 high-quality scalable vector
Expand Down
Loading
Loading