PostNords web component library

This repo utilizes the Web Components compiler Stencil.js. The goal is to be able to provide re-usable components that the PostNord web teams can use to save time and get a holistic design. These components can be used in any popular framework or with no framework at all.

The library is intended to work with any other CSS framework you wish to use. As long as the CSS class names do not begin with "pn-" there should be no issues at all. However, we do recommend that you use the pn-design-assets package which the libary was intended to be used with. The design assets include fonts, icons and more that helps you get started.

Documentation

The library is documented with the help of Storybook. You can view the latest documentation here.

Quick links:

- Using PostNord Web Components in your project
- Get started with PostNord design assets

$3

- To try out your localhost Web Components in codepen.io, you can run

``bash


start exposed server at https://localhost:8000


npm run exposed
`

First time you need to go to https://localhost:8000 and accept the SSL warning.

Add the following code to the HTML section in codepen.io

`html


`

Infrastructure as Code (IaC)

Defining infrastructure in code makes your setup repeatable, reviewable, and recoverable. You get the same stack every time (no snowflake environments), changes go through code review, and you can recreate or roll back environments quickly if something goes wrong.

This project uses Open Serverless Framework with AWS CloudFormation under the hood to provision:

* An S3 bucket for static content
* A CloudFront distribution (with OAC) in front of the bucket
* Locked-down bucket policies tied to the distribution

$3

* AWS credentials configured locally with permissions to deploy CloudFormation stacks, S3, CloudFront.

$3

We use two Serverless stages:
* test – integration/sanity checks
* prod – live environment

The stack name is ${service}-${stage} (e.g., web-components-test, web-components-prod).

$3

#### Deploy the test stage (default in this repo is "test")
`bash
npx sls deploy --stage test
`

#### Deploy to prod
When you’re happy with test, promote to prod:

`bash
npx sls deploy --stage prod
`

$3

Make changes to serverless.yml (e.g., cache policies, priceClass: PriceClass_100, OAC/OAI choices, custom domain). Then:

##### test
`bash
npx sls deploy --stage test
`

##### prod
`bash
npx sls deploy --stage prod
`

$3

To delete the stack and all managed resources:

#### test
`bash
npx sls remove --stage test
`

#### prod
`bash
npx sls remove --stage prod
``

Be careful—this removes the CloudFormation stack and may delete the S3 bucket contents if the bucket is not retained.