npm - @lion/ui - Versions diffs - 0.2.2 → 0.3.1 - Mend

@lion/ui 0.2.2 → 0.3.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (304) hide show

package/README.md CHANGED Viewed

@@ -8,15 +8,15 @@
 </p>
 <p align="center">
-  <a href="https://github.com/modernweb-dev/rocket/actions"
+  <a href="https://github.com/ing-bank/lion/issues"
     ><img
-      src="https://img.shields.io/github/workflow/status/modernweb-dev/rocket/Release/main?label=workflow&style=flat-square"
-      alt="GitHub Actions workflow status"
+      src="https://badgen.net/github/open-issues/ing-bank/lion"
+      alt="Lion open issues status"
   /></a>
-  <a href="https://github.com/modernweb-dev/rocket/actions"
+  <a href="https://github.com/ing-bank/lion/pulls"
     ><img
-      src="https://img.shields.io/github/workflow/status/modernweb-dev/rocket/Release/main?label=workflow&style=flat-square"
-      alt="GitHub Actions workflow status"
+      src="https://badgen.net/github/open-prs/ing-bank/lion/"
+      alt="GitHub open pull requests status"
   /></a>
   <a href="https://www.tickgit.com/browse?repo=github.com/ing-bank/lion"
     ><img
@@ -28,12 +28,12 @@
 <p align="center">
   <a href="https://lion-web.netlify.app">Website</a>
   ·
+  <a href="https://lion-web.netlify.app/fundamentals/">Fundamentals</a>
+  ·
   <a href="https://lion-web.netlify.app/guides/">Guides</a>
   ·
   <a href="https://lion-web.netlify.app/components/">Components</a>
   ·
-  <a href="https://lion-web.netlify.app/docs/">Documentation</a>
-  ·
   <a href="https://lion-web.netlify.app/blog/">Blog</a>
 </p>
@@ -42,7 +42,7 @@
 They provide an unopinionated, white-label layer that can be extended to your own layer of components.
 - **High Performance:** Focused on great performance in all relevant browsers with a minimal number of dependencies.
-- **Accessibility:** Aimed at compliance with the WCAG 2.1 AA standard to create components that are accessible for everybody.
+- **Accessibility:** Aimed at compliance with the WCAG 2.2 AA standard to create components that are accessible for everybody.
 - **Flexibility:** Provides solutions through Web Components and JavaScript classes which can be used, adopted and extended to fit all needs.
 - **Modern Code:** Lion is distributes as pure es modules.
 - **Exposes functions/classes and Web Components:** Ships a functionality in it's most appropriate form.
@@ -57,7 +57,7 @@ They provide an unopinionated, white-label layer that can be extended to your ow
 ## How to install
 ```bash
-npm i @lion/<package-name>
+npm i @lion/ui
 ```
 ## How to use
@@ -68,7 +68,7 @@ npm i @lion/<package-name>
 ```js
 import { css } from 'lit';
-import { LionInput } from '@lion/input';
+import { LionInput } from '@lion/ui/input.js';
 class MyInput extends LionInput {
   static get styles() {
@@ -89,7 +89,7 @@ There's a couple of "systems" in lion which have a JavaScript API. Examples are
 ```html
 <script type="module">
-  import { ajax } from '@lion/ajax';
+  import { ajax } from '@lion/ui/ajax.js';
   ajax
     .fetch('data.json')
@@ -106,7 +106,7 @@ You can also use the lion elements directly, although this is likely not a commo
 ```html
 <script type="module">
-  import '@lion/input/define';
+  import '@lion/ui/define/lion-input.js';
 </script>
 <lion-input name="firstName"></lion-input>
@@ -122,55 +122,16 @@ When you have an idea on how we could improve, please check our [discussions](ht
 ## Content
-Lion web components is logically organized in groups of systems.
-The accessibility column indicates whether the functionality is accessible in its core. Aspects like styling and content determine actual accessibility in usage.
-| Package                                                                                           | Version                                                                                                                                 | Description                                                                                    | Accessibility              |
-| ------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------- | -------------------------- |
-| **-- [Form System](https://lion-web.netlify.app/fundamentals/systems/form/overview/) --**         |                                                                                                                                         | A system that lets you make complex forms with ease, including: validation, translations.      | ✔️                         |
-| [combobox](https://lion-web.netlify.app/components/combobox/overview/)                            | [![combobox](https://img.shields.io/npm/v/@lion/combobox.svg)](https://www.npmjs.com/package/@lion/form)                                | Text box controlling popup listbox                                                             | ✔️                         |
-| [form](https://lion-web.netlify.app/components/form/overview)                                     | [![form](https://img.shields.io/npm/v/@lion/form.svg)](https://www.npmjs.com/package/@lion/form)                                        | Wrapper for multiple form elements                                                             | ✔️                         |
-| [form-core](https://lion-web.netlify.app/fundamentals/systems/form/overview/)                     | [![form-core](https://img.shields.io/npm/v/@lion/form-core.svg)](https://www.npmjs.com/package/@lion/form-core)                         | Core functionality for all form controls                                                       | ✔️                         |
-| [form-integrations](https://lion-web.netlify.app/fundamentals/systems/form/overview/)             | [![form-integrations](https://img.shields.io/npm/v/@lion/form-integrations.svg)](https://www.npmjs.com/package/@lion/form-integrations) | Shows form elements in an integrated way                                                       | ✔️                         |
-| [fieldset](https://lion-web.netlify.app/components/fieldset/overview/)                            | [![fieldset](https://img.shields.io/npm/v/@lion/fieldset.svg)](https://www.npmjs.com/package/@lion/fieldset)                            | Group for form inputs                                                                          | ✔️                         |
-| [checkbox-group](https://lion-web.netlify.app/components/checkbox-group/overview/)                | [![checkbox-group](https://img.shields.io/npm/v/@lion/checkbox-group.svg)](https://www.npmjs.com/package/@lion/checkbox-group)          | Group of checkboxes                                                                            | ✔️                         |
-| [input](https://lion-web.netlify.app/components/input/overview/)                                  | [![input](https://img.shields.io/npm/v/@lion/input.svg)](https://www.npmjs.com/package/@lion/input)                                     | Input element for strings                                                                      | ✔️                         |
-| [input-amount](https://lion-web.netlify.app/components/input-amount/overview/)                    | [![input-amount](https://img.shields.io/npm/v/@lion/input-amount.svg)](https://www.npmjs.com/package/@lion/input-amount)                | Input element for amounts                                                                      | ✔️                         |
-| [input-date](https://lion-web.netlify.app/components/input-date/overview/)                        | [![input-date](https://img.shields.io/npm/v/@lion/input-date.svg)](https://www.npmjs.com/package/@lion/input-date)                      | Input element for dates                                                                        | ✔️                         |
-| [input-datepicker](https://lion-web.netlify.app/components/input-datepicker/overview/)            | [![input-datepicker](https://img.shields.io/npm/v/@lion/input-datepicker.svg)](https://www.npmjs.com/package/@lion/input-datepicker)    | Input element for dates with a datepicker                                                      | ✔️                         |
-| [input-email](https://lion-web.netlify.app/components/input-email/overview/)                      | [![input-email](https://img.shields.io/npm/v/@lion/input-email.svg)](https://www.npmjs.com/package/@lion/input-email)                   | Input element for e-mails                                                                      | ✔️                         |
-| [input-iban](https://lion-web.netlify.app/components/input-iban/overview/)                        | [![input-iban](https://img.shields.io/npm/v/@lion/input-iban.svg)](https://www.npmjs.com/package/@lion/input-iban)                      | Input element for IBANs                                                                        | ✔️                         |
-| [input-range](https://lion-web.netlify.app/components/input-range/overview/)                      | [![input-range](https://img.shields.io/npm/v/@lion/input-range.svg)](https://www.npmjs.com/package/@lion/input-range)                   | Input element for a range of values                                                            | ✔️                         |
-| [input-stepper](https://lion-web.netlify.app/components/input-stepper/overview/)                  | [![input-stepper](https://img.shields.io/npm/v/@lion/input-stepper.svg)](https://www.npmjs.com/package/@lion/input-stepper)             | Input stepper element for the predefined range                                                 | ✔️                         |
-| [listbox](https://lion-web.netlify.app/components/listbox/overview/)                              | [![listbox](https://img.shields.io/npm/v/@lion/listbox.svg)](https://www.npmjs.com/package/@lion/form)                                  | Interactive list with selectable options                                                       | ✔️                         |
-| [radio-group](https://lion-web.netlify.app/components/radio-group/overview/)                      | [![radio-group](https://img.shields.io/npm/v/@lion/radio-group.svg)](https://www.npmjs.com/package/@lion/radio-group)                   | Group of radios                                                                                | ✔️                         |
-| [select](https://lion-web.netlify.app/components/select/overview/)                                | [![select](https://img.shields.io/npm/v/@lion/select.svg)](https://www.npmjs.com/package/@lion/select)                                  | Simple native dropdown element                                                                 | ✔️                         |
-| [select-rich](https://lion-web.netlify.app/components/select-rich/overview/)                      | [![select-rich](https://img.shields.io/npm/v/@lion/select-rich.svg)](https://www.npmjs.com/package/@lion/select-rich)                   | 'rich' version of the native dropdown element                                                  | [#243][i243]               |
-| [textarea](https://lion-web.netlify.app/components/textarea/overview/)                            | [![textarea](https://img.shields.io/npm/v/@lion/textarea.svg)](https://www.npmjs.com/package/@lion/textarea)                            | Multiline text input                                                                           | ✔️                         |
-| **-- [Button System](https://lion-web.netlify.app/components/buttons-intro--page) --**            |                                                                                                                                         | These web components bring common UX patterns while still full integrated with (native) forms. |                            |
-| [button](https://lion-web.netlify.app/components/button/overview/)                                | [![button](https://img.shields.io/npm/v/@lion/button.svg)](https://www.npmjs.com/package/@lion/button)                                  | Button                                                                                         | ✔️                         |
-| [switch](https://lion-web.netlify.app/components/switch/overview/)                                | [![switch](https://img.shields.io/npm/v/@lion/switch.svg)](https://www.npmjs.com/package/@lion/switch)                                  | Switch                                                                                         | ✔️                         |
-| **-- [Overlay System](https://lion-web.netlify.app/components/overlays-intro--page) --**          |                                                                                                                                         | If something needs to overlay content this is your place.                                      |                            |
-| [overlays](https://lion-web.netlify.app/fundamentals/systems/overlays/overview/)                  | [![overlays](https://img.shields.io/npm/v/@lion/overlays.svg)](https://www.npmjs.com/package/@lion/overlays)                            | Overlay System                                                                                 | ✔️                         |
-| [dialog](https://lion-web.netlify.app/components/dialog/overview/)                                | [![dialog](https://img.shields.io/npm/v/@lion/dialog.svg)](https://www.npmjs.com/package/@lion/dialog)                                  | Dialog element                                                                                 | ✔️                         |
-| [tooltip](https://lion-web.netlify.app/components/tooltip/overview/)                              | [![tooltip](https://img.shields.io/npm/v/@lion/tooltip.svg)](https://www.npmjs.com/package/@lion/tooltip)                               | Tooltip element                                                                                | [#175][i175]               |
-| **-- [Navigation System](https://lion-web.netlify.app/components/navigation-intro--page) --**     |                                                                                                                                         | Components which are used to guide users                                                       |                            |
-| [accordion](https://lion-web.netlify.app/components/accordion/overview/)                          | [![accordion](https://img.shields.io/npm/v/@lion/accordion.svg)](https://www.npmjs.com/package/@lion/accordion)                         | Accordion                                                                                      | ✔️                         |
-| [pagination](https://lion-web.netlify.app/components/pagination/overview/)                        | [![pagination](https://img.shields.io/npm/v/@lion/pagination.svg)](https://www.npmjs.com/package/@lion/pagination)                      | Pagination                                                                                     | ✔️                         |
-| [steps](https://lion-web.netlify.app/components/steps/overview)                                   | [![steps](https://img.shields.io/npm/v/@lion/steps.svg)](https://www.npmjs.com/package/@lion/steps)                                     | Multi Step System                                                                              | n/a                        |
-| [tabs](https://lion-web.netlify.app/components/tabs/overview)                                     | [![tBS](https://img.shields.io/npm/v/@lion/tabs.svg)](https://www.npmjs.com/package/@lion/tabs)                                         | Move between a small number of equally important views                                         | n/a                        |
-| **-- [localize System](https://lion-web.netlify.app/fundamentals/systems/localize/overview/) --** |                                                                                                                                         | Localize text, numbers, dates and a way to store/fetch these data.                             |                            |
-| [localize](https://lion-web.netlify.app/fundamentals/systems/localize/overview/)                  | [![localize](https://img.shields.io/npm/v/@lion/localize.svg)](https://www.npmjs.com/package/@lion/localize)                            | Localize and translate your application/components                                             | n/a                        |
-| **-- [Icon System](https://lion-web.netlify.app/fundamentals/systems/icon/overview/) --**         |                                                                                                                                         | Loading and displaying icons                                                                   |                            |
-| [icon](https://lion-web.netlify.app/fundamentals/systems/icon/overview/)                          | [![icon](https://img.shields.io/npm/v/@lion/icon.svg)](https://www.npmjs.com/package/@lion/icon)                                        | Display our svg icons                                                                          | [#173][i173], [#172][i172] |
-| **-- Others --**                                                                                  |                                                                                                                                         | Features not fitting any other category                                                        |                            |
-| [core](https://lion-web.netlify.app/fundamentals/systems/core/overview/)                          | [![core](https://img.shields.io/npm/v/@lion/core.svg)](https://www.npmjs.com/package/@lion/core) | Core System (exports LitElement, lit-html)                                                     | n/a                        |
-| [ajax](https://lion-web.netlify.app/fundamentals/tools/ajax/overview/)                            | [![ajax](https://img.shields.io/npm/v/@lion/ajax.svg)](https://www.npmjs.com/package/@lion/ajax)                                        | Fetching data via ajax request                                                                 | n/a                        |
-| [calendar](https://lion-web.netlify.app/components/calendar/overview/)                            | [![calendar](https://img.shields.io/npm/v/@lion/calendar.svg)](https://www.npmjs.com/package/@lion/calendar)                            | Standalone calendar                                                                            | [#195][i195], [#194][i194] |
-| [collapsible](https://lion-web.netlify.app/components/collapsible/overview/)                      | [![collapsible](https://img.shields.io/npm/v/@lion/collapsible.svg)](https://www.npmjs.com/package/@lion/collapsible)                   | Combination of a button and a chunk of extra content                                           | ✔️                         |
-| **-- [Helpers](https://lion-web.netlify.app/fundamentals/tools/helpers/overview/) --**            | [![helpers](https://img.shields.io/npm/v/@lion/helpers.svg)](https://www.npmjs.com/package/@lion/helpers)                               | Helpers to make your and your life easier                                                      |                            |
-| [sb-action-logger](https://lion-web.netlify.app/fundamentals/tools/helpers/action-logger/)        |                                                                                                                                         | Storybook action logger                                                                        |
+| Name                                                                                                                        | version                                                                                                                   | description                                                                                                                                                                                                                                                                                                                |
+| --------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| [@lion/ui](https://github.com/ing-bank/lion/tree/master/packages/ui)                                                        | <img src="https://img.shields.io/npm/v/@lion/ui.svg" alt="@lion/ui version"/>                                             | Set of components                                                                                                                                                                                                                                                                                                          |
+| [@lion/ajax](https://github.com/ing-bank/lion/tree/master/packages/ajax)                                                    | <img src="https://img.shields.io/npm/v/@lion/ajax.svg" alt="@lion/ajax version"/>                                         | A small wrapper around fetch                                                                                                                                                                                                                                                                                               |
+| [Singleton-manager](https://github.com/ing-bank/lion/tree/master/packages/singleton-manager)                                | <img src="https://img.shields.io/npm/v/singleton-manager.svg" alt="Singleton-manager version"/>                           | A singleton manager provides a way to make sure a singleton instance loaded from multiple file locations stays a singleton. Primarily useful if two major version of a package with a singleton is used.                                                                                                                   |
+| [Babel plugin extend docs](https://github.com/ing-bank/lion/tree/master/packages-node/babel-plugin-extend-docs)             | <img src="https://img.shields.io/npm/v/babel-plugin-extend-docs.svg" alt="babel-plugin-extend-docs version"/>             | A plugin which rewrites imports and templates according to a configuration. This enables the reuse of existing documentation from source packages while still using your extensions code.                                                                                                                                  |
+| [Providence analytics](https://github.com/ing-bank/lion/tree/master/packages-node/providence-analytics) | <img src="https://img.shields.io/npm/v/providence-analytics.svg" alt="providence-analytics version"/>                     | Providence is the 'All Seeing Eye' that generates usage statistics by analyzing code. It measures the effectivity and popularity of your software. With just a few commands you can measure the impact for (breaking) changes, making your release process more stable and predictable.                                    |
+| [Publish docs](https://github.com/ing-bank/lion/tree/master/packages-node/publish-docs) | <img src="https://img.shields.io/npm/v/publish-docs.svg" alt="publish-docs version"/>                                     | A tool that copies and processes your documentation (in a monorepo) so it can be published/shipped with your package.                                                                                                                                                                                                      |
+| [Remark extend](https://github.com/ing-bank/lion/tree/master/packages-node/remark-extend)                                   | <img src="https://img.shields.io/npm/v/remark-extend.svg" alt="remark-extend version"/>                                   | A plugin for remark to extend markdown by importing from source files.                                                                                                                                                                                                                                                     |
+| [Rocket preset extend lion docs](https://github.com/ing-bank/lion/tree/master/packages-node/rocket-preset-extend-lion-docs) | <img src="https://img.shields.io/npm/v/rocket-preset-extend-lion-docs.svg" alt="rocket-preset-extend-lion-docs version"/> | When maintaining your own extension layer of lion you most likely want to maintain a similar documentation. Copying and rewriting the markdown files works, but whenever something changes you need copy and rewrite again. To do this automatically you can use this preset for [rocket](https://rocket.modern-web.dev/). |
 ## Technologies
@@ -210,13 +171,3 @@ Read our [contribution guide](https://github.com/ing-bank/lion/blob/master/CONTR
 ## Contact
 Feel free to create a github issue for any feedback or questions you might have.
-You can also find us on the Lit & Friends slack in the [#lion](https://lit-and-friends.slack.com/archives/CJGFWJN9J) channel.
-You can join the Lit & Friends slack by visiting [https://lit.dev/slack-invite/](https://lit.dev/slack-invite/).
-[i172]: https://github.com/ing-bank/lion/issues/172
-[i173]: https://github.com/ing-bank/lion/issues/173
-[i175]: https://github.com/ing-bank/lion/issues/175
-[i194]: https://github.com/ing-bank/lion/issues/194
-[i195]: https://github.com/ing-bank/lion/issues/195
-[i243]: https://github.com/ing-bank/lion/issues/243

package/components/button/src/LionButton.js CHANGED Viewed

@@ -47,7 +47,7 @@ export class LionButton extends DisabledWithTabIndexMixin(LitElement) {
           box-sizing: border-box;
           vertical-align: middle;
           line-height: 24px;
-          background: #eee; /* minimal styling to make it recognizable as btn */
+          background-color: #eee; /* minimal styling to make it recognizable as btn */
           padding: 8px; /* padding to fix with min-height */
           outline: none; /* focus style handled below */
           cursor: default; /* we should always see the default arrow, never a caret */

package/components/checkbox-group/src/LionCheckboxIndeterminate.js CHANGED Viewed

@@ -13,7 +13,7 @@ export class LionCheckboxIndeterminate extends LionCheckbox {
         :host .choice-field__nested-checkboxes {
           display: block;
         }
-        ::slotted([slot='checkbox']) {
+        ::slotted(*) {
           padding-left: 8px;
         }
       `,
@@ -198,7 +198,7 @@ export class LionCheckboxIndeterminate extends LionCheckbox {
   _afterTemplate() {
     return html`
       <div class="choice-field__nested-checkboxes">
-        <slot name="checkbox"></slot>
+        <slot></slot>
       </div>
     `;
   }

package/components/checkbox-group/test/lion-checkbox-indeterminate-integrations.test.js CHANGED Viewed

@@ -1,4 +1,10 @@
 import '@lion/ui/define/lion-checkbox-indeterminate.js';
 import { runChoiceInputMixinSuite } from '@lion/ui/form-core-test-suites.js';
+import { runCheckboxIndeterminateSuite } from '../test-suites/CheckboxIndeterminate.suite.js';
 runChoiceInputMixinSuite({ tagString: 'lion-checkbox-indeterminate' });
+runCheckboxIndeterminateSuite({
+  tagString: 'lion-checkbox-indeterminate',
+  groupTagString: 'lion-checkbox-group',
+  childTagString: 'lion-checkbox',
+});