@lion/ui 0.14.3 → 0.15.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.
- package/README.md +38 -12
- package/components/combobox/test/lion-combobox.test.js +50 -2
- package/components/core/src/SlotMixin.js +52 -0
- package/components/core/test/SlotMixin.test.js +85 -0
- package/components/icon/src/icons.js +14 -2
- package/components/icon/test/hammer.svg.js +5 -2
- package/components/icon/test/heart.svg.js +5 -2
- package/components/icon/test/lion-icon.test.js +10 -4
- package/components/input-stepper/src/LionInputStepper.js +10 -10
- package/components/listbox/src/ListboxMixin.js +3 -35
- package/components/localize/src/getLocalizeManager.js +16 -10
- package/components/localize/test/getLocalizeManager.test.js +15 -7
- package/components/localize/test/side-effect-free-entrypoint.test.js +9 -3
- package/components/overlays/src/ArrowMixin.js +10 -4
- package/components/overlays/src/singleton.js +14 -4
- package/components/overlays/test/OverlayController.test.js +4 -1
- package/custom-elements.json +3014 -220
- package/dist-types/components/core/src/ScopedElementsMixin.d.ts.map +1 -1
- package/dist-types/components/core/src/SlotMixin.d.ts +35 -0
- package/dist-types/components/core/src/SlotMixin.d.ts.map +1 -1
- package/dist-types/components/core/test/SlotMixin.test.d.ts.map +1 -1
- package/dist-types/components/icon/src/LionIcon.d.ts +1 -1
- package/dist-types/components/icon/src/LionIcon.d.ts.map +1 -1
- package/dist-types/components/icon/src/icons.d.ts +2 -1
- package/dist-types/components/icon/src/icons.d.ts.map +1 -1
- package/dist-types/components/icon/test/hammer.svg.d.ts +1 -1
- package/dist-types/components/icon/test/hammer.svg.d.ts.map +1 -1
- package/dist-types/components/icon/test/heart.svg.d.ts +1 -1
- package/dist-types/components/icon/test/heart.svg.d.ts.map +1 -1
- package/dist-types/components/input-stepper/src/LionInputStepper.d.ts +4 -4
- package/dist-types/components/input-stepper/src/LionInputStepper.d.ts.map +1 -1
- package/dist-types/components/listbox/src/ListboxMixin.d.ts.map +1 -1
- package/dist-types/components/localize/src/getLocalizeManager.d.ts +2 -58
- package/dist-types/components/localize/src/getLocalizeManager.d.ts.map +1 -1
- package/dist-types/components/localize/test/getLocalizeManager.test.d.ts +4 -1
- package/dist-types/components/localize/test/getLocalizeManager.test.d.ts.map +1 -1
- package/dist-types/components/localize/test/side-effect-free-entrypoint.test.d.ts +4 -0
- package/dist-types/components/localize/test/side-effect-free-entrypoint.test.d.ts.map +1 -1
- package/dist-types/components/overlays/src/ArrowMixin.d.ts.map +1 -1
- package/dist-types/components/overlays/src/singleton.d.ts.map +1 -1
- package/dist-types/tsconfig.tsbuildinfo +1 -1
- package/docs/components/accordion/index.md +1 -1
- package/docs/components/accordion/overview.md +1 -1
- package/docs/components/accordion/reference.md +1 -1
- package/docs/components/accordion/use-cases.md +1 -1
- package/docs/components/button/{extensions/bootstrap-button.mjs → assets/bootstrap-button.js} +10 -5
- package/docs/components/button/examples.md +1 -1
- package/docs/components/button/extensions.md +2 -2
- package/docs/components/button/index.md +2 -2
- package/docs/components/button/overview.md +4 -4
- package/docs/components/button/use-cases.md +6 -6
- package/docs/components/calendar/index.md +1 -1
- package/docs/components/calendar/overview.md +1 -1
- package/docs/components/calendar/use-cases.md +2 -2
- package/docs/components/checkbox-group/index.md +1 -1
- package/docs/components/checkbox-group/overview.md +3 -3
- package/docs/components/checkbox-group/use-cases.md +1 -1
- package/docs/components/collapsible/examples.md +1 -1
- package/docs/components/collapsible/index.md +1 -1
- package/docs/components/collapsible/overview.md +2 -2
- package/docs/components/collapsible/use-cases.md +1 -1
- package/docs/components/combobox/extensions.md +2 -1
- package/docs/components/combobox/index.md +1 -1
- package/docs/components/combobox/overview.md +2 -2
- package/docs/components/combobox/use-cases.md +2 -2
- package/docs/components/dialog/index.md +1 -1
- package/docs/components/dialog/overview.md +2 -2
- package/docs/components/dialog/use-cases.md +1 -1
- package/docs/components/drawer/index.md +1 -1
- package/docs/components/drawer/overview.md +1 -1
- package/docs/components/drawer/use-cases.md +1 -1
- package/docs/components/fieldset/index.md +1 -1
- package/docs/components/fieldset/overview.md +6 -6
- package/docs/components/fieldset/use-cases.md +1 -1
- package/docs/components/form/index.md +1 -1
- package/docs/components/form/overview.md +4 -4
- package/docs/components/form/use-cases.md +3 -3
- package/docs/components/icon/index.md +1 -1
- package/docs/components/icon/overview.md +1 -1
- package/docs/components/icon/use-cases.md +2 -15
- package/docs/components/index.md +1 -1
- package/docs/components/input/index.md +1 -1
- package/docs/components/input/overview.md +2 -2
- package/docs/components/input/use-cases.md +1 -1
- package/docs/components/input-amount/index.md +1 -1
- package/docs/components/input-amount/overview.md +4 -4
- package/docs/components/input-amount/use-cases.md +1 -1
- package/docs/components/input-amount-dropdown/index.md +1 -1
- package/docs/components/input-amount-dropdown/use-cases.md +1 -1
- package/docs/components/input-date/index.md +1 -1
- package/docs/components/input-date/overview.md +4 -4
- package/docs/components/input-date/use-cases.md +1 -1
- package/docs/components/input-datepicker/index.md +1 -1
- package/docs/components/input-datepicker/overview.md +6 -6
- package/docs/components/input-datepicker/use-cases.md +1 -1
- package/docs/components/input-email/index.md +1 -1
- package/docs/components/input-email/overview.md +3 -3
- package/docs/components/input-email/use-cases.md +1 -1
- package/docs/components/input-file/index.md +1 -1
- package/docs/components/input-file/overview.md +2 -2
- package/docs/components/input-file/use-cases.md +1 -1
- package/docs/components/input-iban/index.md +1 -1
- package/docs/components/input-iban/overview.md +3 -3
- package/docs/components/input-iban/use-cases.md +1 -1
- package/docs/components/input-range/index.md +1 -1
- package/docs/components/input-range/overview.md +3 -3
- package/docs/components/input-range/use-cases.md +1 -1
- package/docs/components/input-stepper/api-table.md +2 -0
- package/docs/components/input-stepper/index.md +1 -1
- package/docs/components/input-stepper/overview.md +2 -2
- package/docs/components/input-stepper/use-cases.md +1 -1
- package/docs/components/input-tel/index.md +1 -1
- package/docs/components/input-tel/overview.md +2 -2
- package/docs/components/input-tel/use-cases.md +7 -7
- package/docs/components/input-tel-dropdown/extensions.md +1 -1
- package/docs/components/input-tel-dropdown/index.md +1 -1
- package/docs/components/input-tel-dropdown/overview.md +2 -2
- package/docs/components/input-tel-dropdown/use-cases.md +1 -1
- package/docs/components/listbox/index.md +1 -1
- package/docs/components/listbox/overview.md +1 -1
- package/docs/components/listbox/use-cases.md +2 -2
- package/docs/components/pagination/index.md +1 -1
- package/docs/components/pagination/overview.md +1 -1
- package/docs/components/pagination/use-cases.md +1 -1
- package/docs/components/progress-indicator/examples.md +1 -1
- package/docs/components/progress-indicator/index.md +1 -1
- package/docs/components/progress-indicator/overview.md +1 -1
- package/docs/components/radio-group/index.md +1 -1
- package/docs/components/radio-group/overview.md +4 -4
- package/docs/components/radio-group/use-cases.md +1 -1
- package/docs/components/select/index.md +1 -1
- package/docs/components/select/overview.md +1 -1
- package/docs/components/select/use-cases.md +2 -2
- package/docs/components/select-rich/examples.md +1 -1
- package/docs/components/select-rich/index.md +1 -1
- package/docs/components/select-rich/overview.md +1 -1
- package/docs/components/select-rich/use-cases.md +3 -3
- package/docs/components/steps/index.md +1 -1
- package/docs/components/steps/overview.md +1 -1
- package/docs/components/steps/use-cases.md +1 -1
- package/docs/components/switch/index.md +1 -1
- package/docs/components/switch/overview.md +1 -1
- package/docs/components/switch/reference.md +1 -1
- package/docs/components/switch/use-cases.md +1 -1
- package/docs/components/tabs/examples.md +2 -2
- package/docs/components/tabs/index.md +1 -1
- package/docs/components/tabs/overview.md +1 -1
- package/docs/components/tabs/use-cases.md +1 -1
- package/docs/components/textarea/index.md +1 -1
- package/docs/components/textarea/overview.md +1 -1
- package/docs/components/textarea/use-cases.md +1 -1
- package/docs/components/tooltip/examples.md +1 -1
- package/docs/components/tooltip/index.md +1 -1
- package/docs/components/tooltip/overview.md +1 -1
- package/docs/components/tooltip/use-cases.md +1 -1
- package/docs/fundamentals/index.md +4 -4
- package/docs/fundamentals/node-tools/babel-plugin-extend-docs/index.md +1 -1
- package/docs/fundamentals/node-tools/babel-plugin-extend-docs/overview.md +1 -1
- package/docs/fundamentals/node-tools/index.md +1 -1
- package/docs/fundamentals/node-tools/providence-analytics/index.md +1 -1
- package/docs/fundamentals/node-tools/providence-analytics/overview.md +1 -1
- package/docs/fundamentals/node-tools/publish-docs/index.md +1 -1
- package/docs/fundamentals/node-tools/publish-docs/overview.md +4 -4
- package/docs/fundamentals/node-tools/remark-extend/index.md +1 -1
- package/docs/fundamentals/node-tools/remark-extend/overview.md +1 -1
- package/docs/fundamentals/node-tools/rocket-preset-extend-lion-docs/index.md +1 -1
- package/docs/fundamentals/node-tools/rocket-preset-extend-lion-docs/overview.md +3 -3
- package/docs/fundamentals/rationales/TypeScript.md +1 -1
- package/docs/fundamentals/rationales/accessibility.md +2 -2
- package/docs/fundamentals/rationales/index.md +1 -1
- package/docs/fundamentals/rationales/side-effects.md +1 -1
- package/docs/fundamentals/rationales/versioning.md +1 -1
- package/docs/fundamentals/systems/core/SlotMixin.md +2 -2
- package/docs/fundamentals/systems/core/index.md +1 -1
- package/docs/fundamentals/systems/core/overview.md +2 -2
- package/docs/fundamentals/systems/form/formatting-and-parsing.md +5 -5
- package/docs/fundamentals/systems/form/index.md +1 -1
- package/docs/fundamentals/systems/form/interaction-states.md +1 -1
- package/docs/fundamentals/systems/form/model-value.md +2 -2
- package/docs/fundamentals/systems/form/overview.md +29 -29
- package/docs/fundamentals/systems/form/styling.md +1 -1
- package/docs/fundamentals/systems/form/use-cases.md +1 -1
- package/docs/fundamentals/systems/form/validate.md +3 -3
- package/docs/fundamentals/systems/icon/index.md +1 -1
- package/docs/fundamentals/systems/icon/overview.md +1 -1
- package/docs/fundamentals/systems/index.md +1 -1
- package/docs/fundamentals/systems/localize/api-table.md +3 -0
- package/docs/fundamentals/systems/localize/dates.md +1 -1
- package/docs/fundamentals/systems/localize/index.md +1 -1
- package/docs/fundamentals/systems/localize/numbers.md +1 -1
- package/docs/fundamentals/systems/localize/overview.md +5 -5
- package/docs/fundamentals/systems/localize/rationale.md +1 -1
- package/docs/fundamentals/systems/localize/text.md +5 -4
- package/docs/fundamentals/systems/localize/use-cases.md +1 -1
- package/docs/fundamentals/systems/overlays/_configuration-positioning.md +3 -3
- package/docs/fundamentals/systems/overlays/_edge-cases.md +3 -3
- package/docs/fundamentals/systems/overlays/api-table.md +3 -0
- package/docs/fundamentals/systems/overlays/assets/demo-overlay-positioning.mjs +1 -1
- package/docs/fundamentals/systems/overlays/configuration.md +5 -5
- package/docs/fundamentals/systems/overlays/index.md +1 -1
- package/docs/fundamentals/systems/overlays/overview.md +6 -6
- package/docs/fundamentals/systems/overlays/rationale.md +1 -1
- package/docs/fundamentals/systems/overlays/use-cases.md +6 -6
- package/docs/fundamentals/tools/ajax/index.md +1 -1
- package/docs/fundamentals/tools/ajax/overview.md +2 -2
- package/docs/fundamentals/tools/ajax/use-cases.md +3 -3
- package/docs/fundamentals/tools/helpers/action-logger.md +1 -1
- package/docs/fundamentals/tools/helpers/index.md +2 -2
- package/docs/fundamentals/tools/helpers/overview.md +2 -2
- package/docs/fundamentals/tools/index.md +1 -1
- package/docs/fundamentals/tools/singleton-manager/example-complex/index.md +1 -1
- package/docs/fundamentals/tools/singleton-manager/example-fail/demo-app.js +4 -4
- package/docs/fundamentals/tools/singleton-manager/example-fail/index.md +2 -2
- package/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/{page-a/page-a.js → page-c/page-c.js} +2 -2
- package/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/{page-b/page-b.js → page-d/page-d.js} +2 -2
- package/docs/fundamentals/tools/singleton-manager/example-success/demo-app.js +4 -4
- package/docs/fundamentals/tools/singleton-manager/example-success/index.md +2 -2
- package/docs/fundamentals/tools/singleton-manager/example-success/node_modules/{page-a/page-a.js → page-e/page-e.js} +2 -3
- package/docs/fundamentals/tools/singleton-manager/example-success/node_modules/{page-b/page-b.js → page-f/page-f.js} +2 -2
- package/docs/fundamentals/tools/singleton-manager/index.md +2 -2
- package/docs/fundamentals/tools/singleton-manager/overview.md +5 -5
- package/docs/guides/how-to/create-a-custom-field.md +5 -5
- package/docs/guides/how-to/create-a-form.md +4 -4
- package/docs/guides/how-to/extend-a-native-input.md +2 -2
- package/docs/guides/index.md +8 -8
- package/docs/guides/principles/index.md +5 -5
- package/docs/guides/principles/styling.md +1 -1
- package/package.json +2 -2
- /package/docs/fundamentals/systems/overlays/assets/{applyDemoOverlayStyles.mjs → applyDemoOverlayStyles.js} +0 -0
- /package/docs/fundamentals/systems/overlays/assets/{demo-el-using-overlaymixin.mjs → demo-el-using-overlaymixin.js} +0 -0
- /package/docs/fundamentals/systems/overlays/assets/{demo-overlay-backdrop.mjs → demo-overlay-backdrop.js} +0 -0
- /package/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/{page-b → page-d}/node_modules/overlays/index.js +0 -0
- /package/docs/fundamentals/tools/singleton-manager/example-fail/node_modules/{page-b → page-d}/node_modules/overlays/instance.js +0 -0
- /package/docs/fundamentals/tools/singleton-manager/example-success/node_modules/{page-b → page-f}/node_modules/overlays/index.js +0 -0
- /package/docs/fundamentals/tools/singleton-manager/example-success/node_modules/{page-b → page-f}/node_modules/overlays/instance.js +0 -0
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
---
|
|
2
|
+
title: 'Listbox: Use Cases'
|
|
2
3
|
parts:
|
|
3
4
|
- Listbox
|
|
4
5
|
- Use Cases
|
|
5
|
-
title: 'Listbox: Use Cases'
|
|
6
6
|
eleventyNavigation:
|
|
7
7
|
key: 'Listbox: Use Cases'
|
|
8
8
|
order: 20
|
|
@@ -151,4 +151,4 @@ Navigation will skip over disabled options. Let's disable Artichoke and Brussel
|
|
|
151
151
|
|
|
152
152
|
## Validation
|
|
153
153
|
|
|
154
|
-
A validator can be used to make it e.g. `required`. If you want to know how to do that, please take a look at our [validation examples](https://github.com/ing-bank/lion/blob/
|
|
154
|
+
A validator can be used to make it e.g. `required`. If you want to know how to do that, please take a look at our [validation examples](https://github.com/ing-bank/lion/blob/bfc0ad112f12d036e943829a2bdeeae9e0cac480/docs/fundamentals/systems/form/validate.md).
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
---
|
|
2
|
+
title: 'Radio Group: Overview'
|
|
2
3
|
parts:
|
|
3
4
|
- Radio Group
|
|
4
5
|
- Overview
|
|
5
|
-
title: 'Radio Group: Overview'
|
|
6
6
|
eleventyNavigation:
|
|
7
7
|
key: 'Radio Group: Overview'
|
|
8
8
|
order: 10
|
|
@@ -32,12 +32,12 @@ export const main = () => html`
|
|
|
32
32
|
`;
|
|
33
33
|
```
|
|
34
34
|
|
|
35
|
-
- Make sure that to use a name attribute as it is necessary for our [form](https://github.com/ing-bank/lion/blob/
|
|
36
|
-
- If you have many options for a user to pick from, consider using our [select](https://github.com/ing-bank/lion/blob/
|
|
35
|
+
- Make sure that to use a name attribute as it is necessary for our [form](https://github.com/ing-bank/lion/blob/bfc0ad112f12d036e943829a2bdeeae9e0cac480/docs/components/form/overview.md)'s serialization result.
|
|
36
|
+
- If you have many options for a user to pick from, consider using our [select](https://github.com/ing-bank/lion/blob/bfc0ad112f12d036e943829a2bdeeae9e0cac480/docs/components/select/overview.md) instead.
|
|
37
37
|
|
|
38
38
|
## Features
|
|
39
39
|
|
|
40
|
-
Since it extends from our [fieldset](https://github.com/ing-bank/lion/blob/
|
|
40
|
+
Since it extends from our [fieldset](https://github.com/ing-bank/lion/blob/bfc0ad112f12d036e943829a2bdeeae9e0cac480/docs/components/fieldset/overview.md), it has all the features a fieldset has.
|
|
41
41
|
|
|
42
42
|
- Get or set the checked value of the group:
|
|
43
43
|
- modelValue (default) - `checkedValue()`
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
---
|
|
2
|
+
title: 'Select: Use Cases'
|
|
2
3
|
parts:
|
|
3
4
|
- Select
|
|
4
5
|
- Use Cases
|
|
5
|
-
title: 'Select: Use Cases'
|
|
6
6
|
eleventyNavigation:
|
|
7
7
|
key: 'Select: Use Cases'
|
|
8
8
|
order: 20
|
|
@@ -65,7 +65,7 @@ Or by setting the `disabled` attribute on the entire `lion-select` field.
|
|
|
65
65
|
|
|
66
66
|
## Validation
|
|
67
67
|
|
|
68
|
-
A validator can be used to make it e.g. `required`. If you want to know how to do that, please take a look at our [validation examples](https://github.com/ing-bank/lion/blob/
|
|
68
|
+
A validator can be used to make it e.g. `required`. If you want to know how to do that, please take a look at our [validation examples](https://github.com/ing-bank/lion/blob/bfc0ad112f12d036e943829a2bdeeae9e0cac480/docs/fundamentals/systems/form/validate.md).
|
|
69
69
|
|
|
70
70
|
## Rendering and updating select options
|
|
71
71
|
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
---
|
|
2
|
+
title: 'Select Rich: Use Cases'
|
|
2
3
|
parts:
|
|
3
4
|
- Select Rich
|
|
4
5
|
- Use Cases
|
|
5
|
-
title: 'Select Rich: Use Cases'
|
|
6
6
|
eleventyNavigation:
|
|
7
7
|
key: 'Select Rich: Use Cases'
|
|
8
8
|
order: 20
|
|
@@ -29,7 +29,7 @@ You can set the full `modelValue` for each option, which includes the checked pr
|
|
|
29
29
|
```
|
|
30
30
|
|
|
31
31
|
Note, when rendering with the help of the `cache` function imported from `lit/directives/cache.js`, setting model by
|
|
32
|
-
the `modelValue` property is not fully supported. Consider setting the model by the `choiceValue` property instead. See [Setting model by `choiceValue` property](https://github.com/ing-bank/lion/blob/
|
|
32
|
+
the `modelValue` property is not fully supported. Consider setting the model by the `choiceValue` property instead. See [Setting model by `choiceValue` property](https://github.com/ing-bank/lion/blob/bfc0ad112f12d036e943829a2bdeeae9e0cac480/docs/components/select-rich/#setting-model-by-the-choicevalue-property) for more details.
|
|
33
33
|
|
|
34
34
|
### Setting model by the `choiceValue` property
|
|
35
35
|
|
|
@@ -328,7 +328,7 @@ LionSelectRich will give it acces to:
|
|
|
328
328
|
- LionSelectRich itself, via `.hostElement`
|
|
329
329
|
|
|
330
330
|
Code of an advanced custom invoker is shown below (this is the code for the
|
|
331
|
-
invoker used in [IntlSelectRich](https://github.com/ing-bank/lion/blob/
|
|
331
|
+
invoker used in [IntlSelectRich](https://github.com/ing-bank/lion/blob/bfc0ad112f12d036e943829a2bdeeae9e0cac480/docs/components/select-rich/examples.md)).
|
|
332
332
|
The invoker is usually added in the invoker slot of the LionSelectRich subclass.
|
|
333
333
|
However, it would also be possible for an application developer to provide the invoker
|
|
334
334
|
by putting it in light dom:
|
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
---
|
|
2
|
+
title: 'Tabs: Examples'
|
|
2
3
|
parts:
|
|
3
4
|
- Tabs
|
|
4
5
|
- Examples
|
|
5
|
-
title: 'Tabs: Examples'
|
|
6
6
|
eleventyNavigation:
|
|
7
7
|
key: 'Tabs: Examples'
|
|
8
8
|
order: 30
|
|
@@ -21,7 +21,7 @@ import './src/lea-tab-panel.js';
|
|
|
21
21
|
|
|
22
22
|
## Lea Tabs
|
|
23
23
|
|
|
24
|
-
Learn how to create the `lea tabs` in our ["introducing lion" blogpost](https://github.com/ing-bank/lion/blob/
|
|
24
|
+
Learn how to create the `lea tabs` in our ["introducing lion" blogpost](https://github.com/ing-bank/lion/blob/bfc0ad112f12d036e943829a2bdeeae9e0cac480/docs/blog/ing-open-sources-lion.md).
|
|
25
25
|
|
|
26
26
|
```js preview-story
|
|
27
27
|
export const main = () => html`
|
|
@@ -9,11 +9,11 @@ Here you find more details about what we offer.
|
|
|
9
9
|
|
|
10
10
|
Let's see what each section describes.
|
|
11
11
|
|
|
12
|
-
1. [Systems](https://github.com/ing-bank/lion/blob/
|
|
12
|
+
1. [Systems](https://github.com/ing-bank/lion/blob/bfc0ad112f12d036e943829a2bdeeae9e0cac480/docs/fundamentals/systems/core/overview.md) <br>
|
|
13
13
|
These are the fundamental systems that power all of our components.
|
|
14
|
-
2. [Tools](https://github.com/ing-bank/lion/blob/
|
|
14
|
+
2. [Tools](https://github.com/ing-bank/lion/blob/bfc0ad112f12d036e943829a2bdeeae9e0cac480/docs/fundamentals/tools/helpers/overview.md) <br>
|
|
15
15
|
Frontend Tools useful for web development but are not visual and therefore are not components.
|
|
16
|
-
3. [Node Tools](https://github.com/ing-bank/lion/blob/
|
|
16
|
+
3. [Node Tools](https://github.com/ing-bank/lion/blob/bfc0ad112f12d036e943829a2bdeeae9e0cac480/docs/fundamentals/node-tools/babel-plugin-extend-docs/overview.md) <br>
|
|
17
17
|
Node tools to analyse the code and for extending the documentation.
|
|
18
|
-
4. [Rationales](https://github.com/ing-bank/lion/blob/
|
|
18
|
+
4. [Rationales](https://github.com/ing-bank/lion/blob/bfc0ad112f12d036e943829a2bdeeae9e0cac480/docs/fundamentals/rationales/side-effects.md) <br>
|
|
19
19
|
The reasoning behind some of our decisions.
|
|
@@ -11,7 +11,7 @@ eleventyNavigation:
|
|
|
11
11
|
parent: Node Tools >> Babel Extend Docs
|
|
12
12
|
---
|
|
13
13
|
|
|
14
|
-
#
|
|
14
|
+
# Babel Extend Docs: Overview
|
|
15
15
|
|
|
16
16
|
A plugin which rewrites imports and templates according to a configuration.
|
|
17
17
|
This enables the reuse of existing documentation from source packages while still using your extensions code.
|
|
@@ -11,7 +11,7 @@ eleventyNavigation:
|
|
|
11
11
|
parent: Node Tools >> Publish Docs
|
|
12
12
|
---
|
|
13
13
|
|
|
14
|
-
#
|
|
14
|
+
# Publish Docs: Overview
|
|
15
15
|
|
|
16
16
|
A tool that copies and processes your documentation (in a monorepo) so it can be published/shipped with your package.
|
|
17
17
|
|
|
@@ -44,7 +44,7 @@ For a Mono Repository
|
|
|
44
44
|
```md
|
|
45
45
|
# My Pkg
|
|
46
46
|
|
|
47
|
-
[=> See Source <=](https://github.com/ing-bank/lion/blob/
|
|
47
|
+
[=> See Source <=](https://github.com/ing-bank/lion/blob/bfc0ad112f12d036e943829a2bdeeae9e0cac480/docs/fundamentals/docs/deep/dir/overview.md)
|
|
48
48
|
```
|
|
49
49
|
|
|
50
50
|
## CLI flags
|
|
@@ -74,7 +74,7 @@ Bring the `overview.md` in a docs folder along.
|
|
|
74
74
|
👉 `packages/[my-package]/docs/overview.md`
|
|
75
75
|
|
|
76
76
|
```md
|
|
77
|
-
[=> See Source <=](https://github.com/ing-bank/lion/blob/
|
|
77
|
+
[=> See Source <=](https://github.com/ing-bank/lion/blob/bfc0ad112f12d036e943829a2bdeeae9e0cac480/docs/fundamentals/docs/deep/dir/overview.md)
|
|
78
78
|
```
|
|
79
79
|
|
|
80
80
|
Add a `use-cases.md`
|
|
@@ -82,7 +82,7 @@ Add a `use-cases.md`
|
|
|
82
82
|
👉 `packages/[my-package]/docs/use-cases.md`
|
|
83
83
|
|
|
84
84
|
```md
|
|
85
|
-
[=> See Source <=](https://github.com/ing-bank/lion/blob/
|
|
85
|
+
[=> See Source <=](https://github.com/ing-bank/lion/blob/bfc0ad112f12d036e943829a2bdeeae9e0cac480/docs/fundamentals/docs/deep/dir/use-cases.md)
|
|
86
86
|
```
|
|
87
87
|
|
|
88
88
|
So you will end up with something like this in your package.
|
|
@@ -11,7 +11,7 @@ eleventyNavigation:
|
|
|
11
11
|
parent: Node Tools >> Extend Docs
|
|
12
12
|
---
|
|
13
13
|
|
|
14
|
-
#
|
|
14
|
+
# Extend Docs: Overview
|
|
15
15
|
|
|
16
16
|
When maintaining your own extension layer of lion you most likely want to maintain a similar documentation.
|
|
17
17
|
Copying and rewriting imports/tags the markdown files works but also means that whenever something change you need copy and rewrite again.
|
|
@@ -20,7 +20,7 @@ To do this automatically you can use this preset for [rocket](https://rocket.mod
|
|
|
20
20
|
|
|
21
21
|
## Features
|
|
22
22
|
|
|
23
|
-
- Import lion documentation and adjust it using [remark-extend](https://github.com/ing-bank/lion/blob/
|
|
23
|
+
- Import lion documentation and adjust it using [remark-extend](https://github.com/ing-bank/lion/blob/bfc0ad112f12d036e943829a2bdeeae9e0cac480/docs/fundamentals/node-tools/remark-extend/overview.md)
|
|
24
24
|
- Renames named imports and all it's usage
|
|
25
25
|
- Adjusts import paths
|
|
26
26
|
- Replace tags in template literals
|
|
@@ -51,7 +51,7 @@ export default {
|
|
|
51
51
|
|
|
52
52
|
## Reusing documentation
|
|
53
53
|
|
|
54
|
-
To take an existing documentation you can "import" it using [remark-extend](https://github.com/ing-bank/lion/blob/
|
|
54
|
+
To take an existing documentation you can "import" it using [remark-extend](https://github.com/ing-bank/lion/blob/bfc0ad112f12d036e943829a2bdeeae9e0cac480/docs/fundamentals/node-tools/remark-extend/overview.md).
|
|
55
55
|
|
|
56
56
|
As an example you can create `docs/components/tabs/overview.md`.
|
|
57
57
|
|
|
@@ -10,7 +10,7 @@ eleventyNavigation:
|
|
|
10
10
|
parent: Rationales
|
|
11
11
|
---
|
|
12
12
|
|
|
13
|
-
# Rationales
|
|
13
|
+
# Rationales: TypeScript
|
|
14
14
|
|
|
15
15
|
[TypeScript](https://www.typescriptlang.org) is superset of JavaScript and a popular tool for getting strongly typed syntax and better autocompletion in JavaScript.
|
|
16
16
|
|
|
@@ -10,7 +10,7 @@ eleventyNavigation:
|
|
|
10
10
|
parent: Rationales
|
|
11
11
|
---
|
|
12
12
|
|
|
13
|
-
# Rationales
|
|
13
|
+
# Rationales: Accessibility
|
|
14
14
|
|
|
15
15
|
In Lion accessibility is a first class citizen. That means accessibility is never an afterthought.
|
|
16
16
|
|
|
@@ -37,4 +37,4 @@ Internally, we delegate all intricacies involved in managing light dom to SlotMi
|
|
|
37
37
|
SlotMixin automatically mediates between light dom provided by the user ('public slots') and light dom provided by the component author ('private slots').
|
|
38
38
|
Also, SlotMixin allows to hook into the reactive update loop of LitElement (automatically rerendering on property changes) and it automatically respects
|
|
39
39
|
the scoped registry belonging to the shadow root.
|
|
40
|
-
More details about SlotMixin can be found in the [SlotMixin documentation](https://github.com/ing-bank/lion/blob/
|
|
40
|
+
More details about SlotMixin can be found in the [SlotMixin documentation](https://github.com/ing-bank/lion/blob/bfc0ad112f12d036e943829a2bdeeae9e0cac480/docs/fundamentals/systems/core/SlotMixin.md)
|
|
@@ -10,7 +10,7 @@ eleventyNavigation:
|
|
|
10
10
|
parent: Rationales
|
|
11
11
|
---
|
|
12
12
|
|
|
13
|
-
# Rationales
|
|
13
|
+
# Rationales: Side Effects
|
|
14
14
|
|
|
15
15
|
All our packages are side effect free due to the fact that es modules are always side effect free even when changing other es modules. Only code which accesses browser globals like `window`, `console` in the root of the module will be treated a side effect and always included.
|
|
16
16
|
Everything else can be tree shaken by [rollup](https://rollupjs.org).
|
|
@@ -10,7 +10,7 @@ eleventyNavigation:
|
|
|
10
10
|
parent: Rationales
|
|
11
11
|
---
|
|
12
12
|
|
|
13
|
-
# Rationales
|
|
13
|
+
# Rationales: Versioning Lion
|
|
14
14
|
|
|
15
15
|
Since Lion is a monorepository where each package is published separately under the `@lion` scope, we have packages that depend on other packages.
|
|
16
16
|
|