-
Notifications
You must be signed in to change notification settings - Fork 14
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
fix(documentation): fix itranet and internet header docs pages #3224
Merged
davidritter-dotcom
merged 6 commits into
main
from
3179-missing-content-on-intranet-header-page
Jul 17, 2024
Merged
Changes from all commits
Commits
Show all changes
6 commits
Select commit
Hold shift + click to select a range
e1acff0
fix(documentation): fix itranet and internet header docs page
davidritter-dotcom f38d24e
Merge branch 'main' into 3179-missing-content-on-intranet-header-page
davidritter-dotcom 1aa63dd
Update packages/documentation/src/stories/components/intranet-header/…
davidritter-dotcom 564593b
Update packages/documentation/src/stories/getting-started/packages/in…
davidritter-dotcom 5341e06
feat(documentation): remove nav links from styles package gettting st…
davidritter-dotcom 7ab767d
Merge branch 'main' into 3179-missing-content-on-intranet-header-page
davidritter-dotcom File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -21,30 +21,31 @@ import { SourceDarkMode } from '@/../.storybook/preview'; | |
| The header for client-facing applications. | ||
|
|
||
| <ul> | ||
| <li><a href="#preparation" target="_self">Preparation</a></li> | ||
| <li><a href="#installation" target="_self">Installation</a></li> | ||
| <li><a href="#css-variables" target="_self">CSS Variables</a></li> | ||
| <li><a href="#usage-with-angular" target="_self">Usage with Angular</a></li> | ||
| <li><a href="#migration-from-the-old-header" target="_self">Migration from the old header</a></li> | ||
| </ul> | ||
|
|
||
| ## Preparation | ||
| <div class="card my-bigger-big"> | ||
| <div class="card-body"> | ||
| <h5 class="card-title">Request a configuration</h5> | ||
|
|
||
| ### Request a configuration | ||
| <p class="card-text">The Internet Header is built to support the already existing Portal Configuration used for the old Internet Header. | ||
| <br/>If you're working on a new project, you probably need a new configuration. Please contact the Post Portal Team.</p> | ||
|
|
||
| The Internet Header is built to support the already existing Portal Configuration used for the old Internet Header. | ||
| <a className="mb-small-r btn-primary btn" | ||
| href="mailto:[email protected]" | ||
| rel="noopener">Contact Post Portal Team <post-icon name="1001" className="fs-large" /></a> | ||
|
|
||
| If you're working on a new project, you probably need a new configuration. Please click the button below. | ||
|
|
||
| <a | ||
| className="mb-small-r btn-primary btn" | ||
| href="mailto:[email protected]" | ||
| rel="noopener" | ||
| >Contact Post Portal Team <post-icon name="1001" className="fs-large" /></a> | ||
|
|
||
| Not every Online Service has configurations for all environments. | ||
| <div className="alert alert-info alert-md"> | ||
| <p>Not every Online Service has configurations for all environments. | ||
| For example, "TOPOS" only has `int02` configured and cannot use `int01` as value for environment. | ||
| If you are not sure what's configured for your project, please reach out to the post-portal team as well. | ||
| If you are not sure what's configured for your project, please reach out to the post-portal team as well.</p> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| ## Installation | ||
|
|
||
| ### Choose between lazy-loaded or bare component version | ||
|
|
||
|
|
@@ -53,53 +54,57 @@ Internet-header package provide two versions: | |
| - Lazy-loaded (default): it allows better performance by dynamically load the component when used, so it reduces bundle size, startup time and first paint. | ||
| - Bare component: if you already manage the lazy-loading or don't need it for any reason, you can use the component without any overhead. | ||
|
|
||
| ## Installation | ||
|
|
||
| ### Install with a bundler | ||
|
|
||
| All the popular frameworks come with some form of bundler. | ||
| This makes it easy to use npm packages like the Internet Header as you can import, | ||
| bundle and deliver the header with your own code. | ||
|
|
||
| When working with Angular or any other framework, the easiest installation method is via npm. | ||
|
|
||
| <Source code={`npm install @swisspost/internet-header`} dark={SourceDarkMode} language="bash" /> | ||
|
|
||
| <Source code={SampleFrameworks} dark={SourceDarkMode} language="html" /> | ||
|
|
||
| <PostTabs> | ||
| <PostTabHeader slot="tabs" panel="lazy-loaded">Lazy-Loaded</PostTabHeader> | ||
| <PostTabPanel name="lazy-loaded"> | ||
| <Source code={SampleLazyLoaded} dark={SourceDarkMode} language="javascript" /> | ||
| <PostTabHeader slot="tabs" panel="with-bundler">Install with a bundler</PostTabHeader> | ||
| <PostTabPanel name="with-bundler"> | ||
| All the popular frameworks come with some form of bundler. | ||
| This makes it easy to use npm packages like the Internet Header as you can import, | ||
| bundle and deliver the header with your own code. | ||
|
|
||
| When working with Angular or any other framework, the easiest installation method is via npm. | ||
|
|
||
| <Source code={`npm install @swisspost/internet-header`} dark={SourceDarkMode} language="bash" /> | ||
|
|
||
| <Source code={SampleFrameworks} dark={SourceDarkMode} language="html" /> | ||
|
|
||
| <div> | ||
| <div class="row mb-2"> | ||
| <div class="col-6 fw-bold">Lazy-Loaded</div> | ||
| <div class="col-6 fw-bold">Bare Component</div> | ||
| </div> | ||
| <div class="row"> | ||
| <div class="col-6"><Source code={SampleLazyLoaded} dark={SourceDarkMode} language="javascript" /></div> | ||
| <div class="col-6"><Source code={SampleBareComponent} dark={SourceDarkMode} language="javascript" /></div> | ||
| </div> | ||
| </div> | ||
| </PostTabPanel> | ||
|
|
||
| <PostTabHeader slot="tabs" panel="bareComponent">Bare Component</PostTabHeader> | ||
| <PostTabPanel name="bareComponent"> | ||
| <Source code={SampleBareComponent} dark={SourceDarkMode} language="javascript" /> | ||
| <PostTabHeader slot="tabs" panel="with-cdn">Include from a CDN</PostTabHeader> | ||
| <PostTabPanel name="with-cdn"> | ||
| If you are not using any bundler or don't want to install from npm, you can load the `internet-header` from your favourite [CDN](https://en.wikipedia.org/wiki/Content_delivery_network).<br/> | ||
| Make sure to replace `{version}` with the version you want to use or remove `@{version}` to use the latest version. | ||
|
|
||
| Available CDNs: | ||
|
|
||
| - [jsDelivr](https://www.jsdelivr.com/): replace `{cdnURL}` with [https://cdn.jsdelivr.net/npm/@swisspost/internet-header](https://cdn.jsdelivr.net/npm/@swisspost/internet-header). | ||
| - [unpkg](https://unpkg.com/): replace `{cdnURL}` with [https://unpkg.com/@swisspost/internet-header](https://unpkg.com/@swisspost/internet-header). | ||
|
|
||
| <div> | ||
| <div class="row mb-2"> | ||
| <div class="col-6 fw-bold">Lazy-Loaded</div> | ||
| <div class="col-6 fw-bold">Bare Component</div> | ||
| </div> | ||
| <div class="row"> | ||
| <div class="col-6"><Source code={SampleCDNLazyLoaded} dark={SourceDarkMode} language="html" /></div> | ||
| <div class="col-6"><Source code={SampleCDNBareComponent} dark={SourceDarkMode} language="html" /></div> | ||
| </div> | ||
| </div> | ||
| </PostTabPanel> | ||
| </PostTabs> | ||
|
|
||
| ### Include from a CDN | ||
|
|
||
| If you are not using any bundler or don't want to install from npm, you can load the `internet-header` from your favourite [CDN](https://en.wikipedia.org/wiki/Content_delivery_network).<br/> | ||
| Make sure to replace `{version}` with the version you want to use or remove `@{version}` to use the latest version. | ||
| ### Usage with Angular | ||
|
|
||
| Available CDNs: | ||
|
|
||
| - [jsDelivr](https://www.jsdelivr.com/): replace `{cdnURL}` with [https://cdn.jsdelivr.net/npm/@swisspost/internet-header](https://cdn.jsdelivr.net/npm/@swisspost/internet-header). | ||
| - [unpkg](https://unpkg.com/): replace `{cdnURL}` with [https://unpkg.com/@swisspost/internet-header](https://unpkg.com/@swisspost/internet-header). | ||
|
|
||
| <PostTabs> | ||
| <PostTabHeader slot="tabs" panel="lazy-loaded">Lazy-Loaded</PostTabHeader> | ||
| <PostTabPanel name="lazy-loaded"> | ||
| <Source code={SampleCDNLazyLoaded} dark={SourceDarkMode} language="html" /> | ||
| </PostTabPanel> | ||
|
|
||
| <PostTabHeader slot="tabs" panel="bareComponent">Bare Component</PostTabHeader> | ||
| <PostTabPanel name="bareComponent"> | ||
| <Source code={SampleCDNBareComponent} dark={SourceDarkMode} language="html" /> | ||
| </PostTabPanel> | ||
| </PostTabs> | ||
| For Angular user, please have a look at [How to integrate Web Components inside Angular](/?path=/docs/8426deb2-3d6d-4fcc-90e6-1ca9737b2ed0--docs#usage-of-web-components) | ||
|
|
||
| ## CSS Variables | ||
|
|
||
|
|
@@ -117,10 +122,6 @@ This stylesheet allows you to access CSS variables to implement styling relative | |
| </PostTabPanel> | ||
| </PostTabs> | ||
|
|
||
| ## Usage with Angular | ||
|
|
||
| For Angular user, please have a look at [How to integrate Web Components inside Angular](/?path=/docs/8426deb2-3d6d-4fcc-90e6-1ca9737b2ed0--docs#usage-of-web-components) | ||
|
|
||
| ## Migration from the old header | ||
|
|
||
| This guide aims to give a broad overview of how a migration can be performed. | ||
|
|
||
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Can you remove the navigation for other packages as well?