Merge pull request #760 from ing-bank/chore/demo-fixes

chore: fix demo links and move back icon intro

packages/fieldset/README.md

@@ -39,7 +39,7 @@ Our fieldset instead has a label attribute or you can add a label with a div- or
 
 - Easy retrieval of form data based on field names
 - Advanced user interaction scenarios via [interaction states](?path=/docs/forms-system-interaction-states--interaction-states)
-- Can have [validate](?path=/docs/forms-validation-examples) on fieldset level and shows the validation feedback below the fieldset
+- Can have [validate](?path=/docs/forms-validation-overview--main#validate) on fieldset level and shows the validation feedback below the fieldset
 - Can disable input fields on fieldset level
 - Accessible out of the box
 
@@ -65,4 +65,4 @@ import '@lion/fieldset/lion-fieldset.js';
 </lion-fieldset>
 ```
 
-For more examples please look at [Fieldset Examples](?path=/docs/forms-fieldset-examples).
+For more examples please look at [Fieldset Examples](?path=/docs/forms-fieldset-examples--data#fieldset-examples).

packages/form-core/docs/validate/README.md

@@ -39,7 +39,7 @@ For a detailed description of the validation system and the `ValidateMixin`, ple
 ### Installation
 
 ```bash
-npm i --save @lion/validate
+npm i --save @lion/form-core
 ```
 
 ```js

packages/form-core/src/FocusMixin.js

@@ -61,6 +61,7 @@ export const FocusMixin = dedupeMixin(
       }
 
       __registerEventsForFocusMixin() {
+        // focus
         this.__redispatchFocus = ev => {
           ev.stopPropagation();
           this.dispatchEvent(new Event('focus'));

packages/icon/src/LionIcon.js

@@ -16,7 +16,7 @@ function validateSvg(svg) {
 }
 
 /**
- * Custom element for rendering SVG icons.
+ * Custom element for rendering SVG icons
  */
 export class LionIcon extends LitElement {
   static get properties() {

packages/input-iban/README.md

@@ -74,7 +74,7 @@ export const faultyPrefilled = () => html`
 ### Country Restrictions
 
 By default, we validate the input to ensure the IBAN is valid.
-To get the default feedback message for this default validator, use `loadDefaultFeedbackMessages` from `@lion/validate`.
+To get the default feedback message for this default validator, use `loadDefaultFeedbackMessages` from `@lion/form-core`.
 
 In the example below, we show how to use an additional validator that restricts the `input-iban` to IBANs from only certain countries.
 

packages/input-iban/src/formatters.js

@@ -7,7 +7,7 @@ import { friendlyFormatIBAN } from 'ibantools';
  * @return {string} formatted value
  */
 export function formatIBAN(modelValue) {
-  // defensive code because of ibantools.
+  // defensive code because of ibantools
   if (!modelValue) {
     return '';
   }

packages/overlays/README.md

@@ -14,7 +14,7 @@ Manages their position on the screen relative to other elements, including other
 
 Its purpose is to make it easy to use our Overlay System declaratively. It can be easily extended where needed, to override event listeners and more.
 
-See [lion-dialog](../dialog) and [lion-tooltip](../tooltip) for example Web Component implementations using the Overlay System.
+See [lion-dialog](?path=/docs/overlays-dialog--main#dialog) and [lion-tooltip](?path=/docs/overlays-tooltip--main#tooltip) for example Web Component implementations using the Overlay System.
 
 ## Features
 
@@ -26,9 +26,9 @@ See [lion-dialog](../dialog) and [lion-tooltip](../tooltip) for example Web Comp
 - lion-overlay web component:
   - Show content when clicking the invoker
   - Have a `.config` object to set or update the OverlayController's configuration
-- [**OverlaysManager**](./docs/OverlaysManager.md), a global repository keeping track of all different types of overlays
+- [**OverlaysManager**](?path=/docs/overlays-system-overview--overlay-manager#overlaysmanager), a global repository keeping track of all different types of overlays
-- [**OverlayController**](./docs/OverlayController.md), a single controller class for handling overlays
+- [**OverlayController**](?path=/docs/overlays-system-overview--overlay-manager#overlaycontroller), a single controller class for handling overlays
-- **OverlayMixin**, a mixin that can be used to create webcomponents that use the OverlayController under the hood
+- [**OverlayMixin**](?path=/docs/overlays-system-overview--overlay-manager#overlaymixin), a mixin that can be used to create webcomponents that use the OverlayController under the hood
 
 ## How to use
 

packages/overlays/docs/20-index.md

@@ -71,7 +71,7 @@ Global refers to overlays where the content is positioned in a global root node
 
 Overlays can be configured in many ways to suit your needs. We go in-depth into each option in the Overlay System - Configuration chapter.
 
-We also export a few preset configuration objects, which you can find [here](?path=/docs/overlays-system-configuration).
+We also export a few preset configuration objects, which you can find [here](?path=/docs/overlays-system-configuration--placement-local#overlay-system---configuration).
 
 - withModalDialogConfig
 - withDropdownConfig

packages/overlays/docs/40-system-configuration.md

@@ -306,7 +306,7 @@ Features:
 
 > Popper strictly is scoped on positioning. **It does not change the dimensions of the content node nor the invoker node**.
 > This also means that if you use the arrow feature, you are in charge of styling it properly, use the x-placement attribute for this.
-> An example implementation can be found in [lion-tooltip](?path=/docs/overlays-tooltip), where an arrow is set by default.
+> An example implementation can be found in [lion-tooltip](?path=/docs/overlays-tooltip--main#tooltip), where an arrow is set by default.
 
 To override the default options we set for local mode, you add a `popperConfig` object to the config passed to the OverlayController.
 Here's a succinct overview of some often used popper properties:

packages/overlays/src/OverlayController.js

@@ -160,7 +160,7 @@ export class OverlayController {
    * @desc Usually the parent node of contentWrapperNode that either exists locally or globally.
    * When a responsive scenario is created (in which we switch from global to local or vice versa)
    * we need to know where we should reappend contentWrapperNode (or contentNode in case it's
-   * projected)
+   * projected).
    * @type {HTMLElement}
    */
   get _renderTarget() {

packages/tooltip/README.md

@@ -62,7 +62,6 @@ export const main = () => html`
 - Uses Popper.js under the hood, to have the content pop up relative to the invoker
 - Use `.config` to override the overlay configuration
 - Config has `popperConfig` property that has a one to one relation with Popper.js configuration API.
-- Comes with a default `lion-tooltip-arrow` for an arrow.
 
 ## How to use
 

packages/tooltip/test/lion-tooltip.test.js

@@ -200,7 +200,7 @@ describe('lion-tooltip', () => {
         </lion-tooltip>
       `);
 
-      // FIXME: This should be refactored to Array.from(this.children).find(child => child.slot === 'content')
+      // FIXME: This should be refactored to Array.from(this.children).find(child => child.slot === 'content').
       // When this issue is fixed https://github.com/ing-bank/lion/issues/382
       const content = el.querySelector('[slot=content]');
       expect(content.getAttribute('role')).to.be.equal('tooltip');