Wizard Italia component

Opinionated component to create your guided wizard.

Installation

yarn add wizard-italia-component

or

npm install wizard-italia-component

Use it as a Web Component

Customization engine lays on Oruga, check the documentation for more info


<link rel="stylesheet" href="module_path/wizard-italia.css">

<wizard-italia 
    matomo-site-id="wBEpDzz0yL"
    configuration-url="https://raw.githubusercontent.com/italia/wizard-italia/main/demo/tree.json"
></wizard-italia>

<script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
<script src="module_path/wizard-italia.umd.js"></script>
<script>
  customElements.whenDefined("wizard-italia").then(() => {
    document.querySelector('wizard-italia').styleConfig = {
      iconPack: 'bs',
      iconComponent: 'bs-icon',
      button: {
        rootClass: 'btn',
        outlinedClass: 'btn-outline-',
        disabledClass: 'btn-disabled',
        variantClass: (variant, context) => (!context.props.outlined ? `btn-${variant}` : ''),
      }
    }
  })
</script>
HTML

Development

Install dependencies using

yarn install
Shell

Compiles and hot-reloads demo for development

yarn serve
Shell

Lints and fixes files

yarn lint
Shell

Customize configuration

See Configuration Reference.

Compiles and minifies for production (lib and web component)

yarn build-all
Shell

Build web component

yarn wc

Launch web component demo

Run

yarn prepare-wc-demo

then go inside demo folder and run a dev server, e.g.

python -m SimpleHTTPServer 80

Contributing

Every contribution is welcome!