Skip to content

uPortal-contrib/CardWebComponents

Folders and files

NameName
Last commit message
Last commit date

Latest commit

b303d90 ยท Oct 24, 2023
Nov 19, 2019
May 31, 2019
Apr 2, 2023
Oct 24, 2023
Nov 2, 2018
Dec 13, 2018
Nov 16, 2020
Nov 3, 2018
Dec 14, 2018
Dec 14, 2018
Jun 20, 2018
Nov 19, 2019
Oct 26, 2018
Mar 21, 2020
Sep 4, 2020
Jun 27, 2020
May 31, 2019
Mar 21, 2020

Repository files navigation

Card Web Components

GitHub CI

Card component for the uPortal ecosystem.

This component aims to display an Internationalized and accessible Card in Apereo uPortal. So far tested in FF, Chrome, Safari and Edge (Windows, Mac, Linux, IOS & Android)

Dependancies

Low and very light (-3Kb) dependencies make the component fast and easy to maintain.

  • hyperHTML @lastest
  • webcomponents-lite 1.2.0
  • @fortawesome/fontawesome-free 5.5.0 (svg only)

License

Apache-2.0

Supported Languages

Card webcomponent

See multiple components in Flexbox and Grid layouts

Many Thanks to Heydonworks and Jen Simmons fantastic works in these page, axe-core latest Audit score are excellent and are conforme to WCAG 2.1 AAA

Axe Audit flags no Accessibility Violations

Features

  • WCAG 2.1 Level AA - Level AAA Work in progress to got beyond simple conformance, but effective Inclusivity,
  • extra Features in CSS Level 4 : :visible-focus (enable accessibility flags)
  • An user can differentiate french from France and French Canadian with Speech Assistive Technologies (falsy-friends, Cutural Differences)
    • add Support for en-GB
    • add Support for fr-BE
    • add Support for fr-CH
    • add Support for nl-BE
    • add Support for Gaelic (Scotland) gd
    • add Support for Welsh cy

Audits

Card webcomponent Audit

Build

  • use npm install to get dependencies.
  • use npm start to view code in a local web server.
  • use npm test to run lint checks

Screenshots

Card webcomponent in English

updated: 2019/05/31

How it works

  • open dist/index.html and change <html lang="en-US"> to <html lang="fr-FR">, the component will be in french.
  • In uPortal, the component will change automatically according to the user's locales switcher.

Running in uPortal

copy all the files from dist/ folder in a card/ directory, then copy this folder into uPortal-start/overlays/uPortal/src/main/webapp (or other location served by Tomcat).

Sample HTML in uPortal 4.2 to 5.2

Define a SimpleCMS portlet with HTML content like the following:

<my-card id="what-is-uportal-i18n" messagesPath="../../../../uPortal/card/" cssPath="../../../../uPortal/card/css"></my-card>
<script src='https://cdnjs.cloudflare.com/ajax/libs/webcomponentsjs/1.2.0/webcomponents-lite.js' defer></script>
<script src='https://unpkg.com/regenerator-runtime@0.12.1/runtime.js' defer></script>
<script src="../../../../uPortal/card/my-card.umd.js" defer></script>

Sample HTML in uPortal 5.3

Define a SimpleCMS portlet with HTML content like the following:

<my-card id="what-is-uportal-i18n" messagesPath="../../../../uPortal/card/" cssPath="../../../../uPortal/card/css"></my-card><script src="../../../../uPortal/card/my-card.umd.js" defer></script>