Zanichelli AppSwitcher Component

Use this component to allow a user to easily navigate between Zanichelli's web applications.

Installation

Download the package by running yarn add @zanichelli/zanichelli-appswitcher or import it in your html using Unpkg:

<script type="module" src="https://unpkg.com/@zanichelli/zanichelli-appswitcher"></script>

Albe Web Components dependency

This component requires the Albe Web Components Library. To get Albe you can:

• install it via NPM by running yarn add @zanichelli/albe-web-components
• include it in your app inside a script tag:

<script type="module" src="https://unpkg.com/@zanichelli/albe-web-components/dist/web-components-library/web-components-library.esm.js"></script>

Remember to also include the stylesheet:

<link type="text/css" rel="stylesheet" href="https://unpkg.com/@zanichelli/albe-web-components/www/build/web-components-library.css" />

Using custom elements

import { defineCustomElements as defineAlbeComponents } from '@zanichelli/albe-web-components/loader';
import { defineCustomElements as defineZanichelliAppswitcher } from '@zanichelli/zanichelli-appswitcher/dist/wc/loader';

useEffect(() => {
  defineAlbeComponents();
  defineZanichelliAppswitcher();
}, []);

return (
  <>
    <zanichelli-appswitcher />
    <zanichelli-apps-section />
  </>
);

Using React Bindings

import { ZanichelliAppswitcher, ZanichelliAppsSection } from '@zanichelli/zanichelli-appswitcher/dist/react/components';

return (
  <>
    <ZanichelliAppswitcher />
    <ZanichelliAppsSection />
  </>
);

Development

• Download the repo using git clone [email protected]:zanichelli/zanichelli-appswitcher.git
• In the project's root folder, run yarn inst
• cd into your web-component-library folder, then run yarn build and yarn start

If you need to work with a local copy of the Albe Web Components Library

• Download the Albe repo using git clone [email protected]:ZanichelliEditore/design-system.git
• In the root folder of this new project, run yarn build and then yarn link
• In your zanichelli-appswitcher project, uncomment the import in web-component-library/src/components/zanichelli-appswitcher/zanichelli-appswitcher.tsx

To use the cookie lastVisitedHosts locally

• add in your own file /etc/hosts 127.0.0.1 app-switcher.zanichelli.it

Testing

You can launch the available tests using yarn test.

Zanichelli AppSwitcher - Props & Slots

• By default the component has a transparent background.

This component accepts the following props:

• current-host: Custom host name to be registered if the default is misleading.
• env: Defines the usage environment to retrieve the config.json. Available values: local, staging, prod, admin, localadmin.
• user-object: The user's data as retrieved from a valid Zanichelli IDP token.
• teaching-groups: The teaching groups of the currently logged-in user, if any.
• config-object: For use with the configurator app only: AppSwitcher current configuration.
• offcanvas-open: For use with the configurator app only: Whether the offcanvas should start as already open.
• offcanvas-type: For use with the configurator app only: Type of the offcanvas. Defaults to 'overlay'.

Zanichelli Section Apps - Props & Slots

This component accepts the following props:

• env: Defines the usage environment to retrieve the config.json. Available values: local, staging, prod. Mapped through env enum.
• show-header-info: Displays the header info box.
• header-info-txt: Header info text.
• header-btn-href: Header button href.
• header-btn-txt: Header button text.
• top-heading-level: Defaults to 2. Highest level of heading in the section. All others cascade from there. After h6, elements will be converted to <p>.

You can choose one of these two ways of passing user information to the component (one excludes the other):

• idp-payload: The payload of the idp-login-component coming from the loginSuccess or userLoaded event.

or

• user-role: The role of the user (e.g., MYZ_TEACHER, MYZ_STUDENT) mapped through userRoleName enum. If your user roles mapping is different think about remapping them :)
• teaching-groups: The teaching groups associated with the logged-in teacher.
• user-id: Id of the user - used in xapi statement

Enums

enum UserRoleName {
  ANONYMOUS = 'ANONYMOUS',
  MYZ_ADMIN = 'MYZ_ADMIN',
  MYZ_UTENTE = 'MYZ_UTENTE',
  MYZ_STUDENTE = 'MYZ_STUDENTE',
  MYZ_DOCENTE = 'MYZ_DOCENTE',
  MYZ_PRODUZIONE = 'MYZ_PRODUZIONE',
  MYZ_FUNZIONARIO = 'MYZ_FUNZIONARIO',
  MYZ_RESP_EDITORIALE = 'MYZ_RESP_EDITORIALE',
  MYZ_ASSISTENZA_CD = 'MYZ_ASSISTENZA_CD',
  MYZ_DOCENTE_UNIVERSITARIO = 'MYZ_DOCENTE_UNIVERSITARIO',
  MYZ_STUDENTE_UNIVERSITARIO = 'MYZ_STUDENTE_UNIVERSITARIO',
  MYZ_VENDITE = 'MYZ_VENDITE',
  MYZ_PROFESSIONISTA = 'MYZ_PROFESSIONISTA',
}

enum envType {
  PROD = 'prod',
  STAGING = 'staging',
  LOCAL = 'local',
  ADMIN = 'admin',
  LOCALADMIN = 'localadmin',
}