Allakando Web UI

About

Allakando Web UI is a library that enables faster web development through a number of web components, stylesheets, and support functions for the web browser. The entire library is framework agnostic, and purely built on standard HTML, CSS and JavaScript.

Getting started

Install with npm: npm install @allakando/allakando-web-ui

import the package @allakando/allakando-web-ui to use the library:

import { init } ("@allakando/allakando-web-ui")
init()

To import CSS utilities:

import "@allakando/allakando-web-ui/dist/css/tooltip.css"
//OR
import { injectStyle } from "@allakando/allakando-web-ui"
injectStyle({
	tooltip: true
})
//OR the full bundle
import "@allakando/allakando-web-ui/dist/css/bundle.css"

To import utility functions, use:

import { alert, openDialog, confirm, showSpinner } from "@allakando/allakando-web-ui"

Full Storybook Documentation

The entire library is documented in Storybook: Storybook

Release Notes

=======

0.0.73

Breaking changes

None

Other changes

• Added i18n translation function

0.0.72

Breaking changes

None

Other changes

• Updated ako-pill-tab component to stop propagation

0.0.71

Breaking changes

None

Other changes

• Updated ako-pill-tab component to clear selected fields programmatically

0.0.70

Breaking changes

None

Other changes

• Typescript tests in Web UI components

0.0.66

Breaking changes

None

Other changes

• Updated bundler so we can export TypeScript functions from the library

0.0.65

Breaking changes

None

Other changes

• Spike for exporting js functions from the library

0.0.64

Breaking changes

None

Other changes

• Updated Chat-Message with new title and body color

0.0.63

Breaking changes

None

Other changes

• Added new color $neutral-1100: #3A3A3A;

0.0.62

Breaking changes

None

Other changes

• Updated ako-chat-message by removing the rounded corners on image

0.0.61

Breaking changes

None

Other changes

• Added new attribute for ako-checkbox-list

0.0.60

Breaking changes

None

Other changes

• Added new component ako-checkbox-list

0.0.59

Breaking changes

None

Other changes

• Updated darker font-color for ako-chat-message component

0.0.58

Breaking changes

None

Other changes

• Removed stopPropagation from ako-pill-tab

0.0.57

Breaking changes

None

Other changes

• Added custom dispatch event to ako-pill-tab

0.0.56

Breaking changes

None

Other changes

• Corrected ako-pill-tab styling
• Added akostyle property to add additional style

0.0.55

Breaking changes

None

Other changes

• Updating ako-pill-tab to have a flex-wrap

0.0.54

Breaking changes

None

Other changes

• Adding a new component ako-pill-tab to the library

0.0.53

Breaking changes

None

Other changes

• Fix the bug of state updates of ako-like-dislike component after DOM loading

0.0.52

Breaking changes

None

Other changes

• Updated the addevent listener and dispatch event of ako-like-dislike component

0.0.51

Breaking changes

None

Other changes

• Corrected the JSDoc documentations
• Updated the dispatch event of ako-like-dislike component

0.0.50

Breaking changes

None

Other changes

• Added a new component ako-like-dislike to the library

0.0.49

Breaking changes

None

Other changes

• Added a new component ako-chat-message to the library

0.0.48

Breaking changes

None

Other changes

• Added a target attribute to ako-media-card component

0.0.47

Breaking changes

None

Other changes

• Added a new ako-media-card component
• Styling correction in ako-pill component
• Styling correction in ako-benefit-card component

0.0.46

Breaking changes

None

Other changes

• Modified class UserLocale for testing
• Added tests for class UserLocale

0.0.45

Breaking changes

None

Other changes

• Added class UserLocale which derives the locale from the URL as opposed to from the language set in the browser
• Changed ako-link-card to use UserLocale

0.0.44

Breaking changes

None

Other changes

• Corrected ako-benefit-card component width with vertical direction

0.0.43

Breaking changes

None

Other changes

• Corrected ako-benefit-card component style width with direction attribute

0.0.42

Breaking changes

None

Other changes

• Corrected ako-benefit-card component styles

0.0.41

Breaking changes

None

Other changes

• Added ako-benefit-card component

0.0.40

Breaking changes

None

Other changes

• Added ako-pill component

0.0.39

Breaking changes

None

Other changes

• Updated body padding-inline property of ako-dialog
• Updated the header hidden behaviour ako-dialog
• Updated the dialog footer note word-wrap style in ako-dialog. This change is only for firefox browser.

0.0.38

Breaking changes

None

Other changes

• Updated the hours display based in isInteger type in web ui component ako-session-item
• Corrected the text color of the start time pre-text in web ui component ako-session-item
• Removed the limit of decimal places for hours attributes in web ui component ako-session-item

0.0.37

Breaking changes

None

Other changes

• Added a new web ui component ako-session-item
• Added a new attribute "country" to the ako-timeslot-card

0.0.36

Breaking changes

None

Other changes

• Update styling for dialog when noheader is specified

0.0.35

Breaking changes

Added polyfills for HTMLElement to fix builds from crashing in nextjs. Also removed automatic invocation of init() which now needs to be manually done in all applications at bootstrap.

import { init } from "@allakando/allakando-web-ui"
init()

0.0.34

Breaking changes

None

Other changes

• Fixes issue in build setup that caused the library to not be built properly

0.0.33

Breaking changes

None

Other changes

• AKO-516: Allow the confirm dialog helper to accept a custom icon. The icon is specified using the mainIcon property in the options object
• AKO-454: Reworked dialog header transition on scrolling
• AKO-259: Change dialog transitions to slide in and out from bottom