@postnord/widget-solution-module

Widget Solution Module

Common components and helper functions for web solution widgets

Install

npm i @postnord/widget-solution-module

Whats included ?

import { PnHeader, PnFooter, PnHero } from "@postnord/widget-solution-module";

Header

  <PnHeader :image="image" :heading="heading" :subHeading="subHeading" :description="description" />

Footer

  <PnFooter :links="links" :content="content" :lang="lang" :languages="['en', 'sv']" v-on:changeLanguage="onChangeLanguage" />

Hero

<PnHero heading="My Pickups" />

Content sample value

{
  "footer": {
    "support": "Support",
    "learnMore": "Learn More",
    "moreFromPostnord": "More from Postnord",
    "getInTouch": "Get in touch via email",
    "giveACall": "Give us a call",
    "about": "About pickup",
    "copyright": "Copyright"
  },
  "label": {
    "login": "Login"
  }
}

Lang

• en
• sv
• da
• fi
• no

Dependencies

• @postnord/web-components@latest
• pn-design-assets@latest

Vite

css: {
  preprocessorOptions: {
    scss: {
      additionalData: `
        @import "./node_modules/pn-design-assets/pn-assets/styles/_pn-colors.scss";
    `,
    },
  },
},
resolve: {
  extensions: [".js", ".json", ".vue"],
},

Import styles

Option 1 in main.js

import "@postnord/widget-solution-module/styles.scss";

Option 2 in Vue2

import widgetSolutiomModuleCss from "@postnord/widget-solution-module/styles.scss?inline";

export default {
  styles: [widgetSolutiomModuleCss],
  name: "App",
};