Merge pull request #752 from ing-bank/chore/more-link-fixes

chore: fix more links for storybook

packages/core/src/DelegateMixin.js

@@ -17,6 +17,7 @@ import { dedupeMixin } from '@open-wc/dedupe-mixin';
  *     attributes: ['disabled'],
  *   };
  * }
+ *
  * render() {
  *   return html`
  *     <button id="button1">with delegation</button>

packages/form-core/README.md

@@ -57,5 +57,5 @@ Fieldsets are the basis for:
 
 ## Other Resources
 
-- [Formatting and parsing](?path=/docs/forms-field-formatting-and-parsing--page)
+- [Formatting and parsing](?path=/docs/forms-system-formatting-and-parsing--parser#formatting-and-parsing)
-- [Custom Fields](?path=/docs/forms-field-custom-fields-tutorial--page)
+- [Custom Fields](?path=/docs/forms-system-creating-a-custom-field--page)

packages/form-core/src/FocusMixin.js

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

packages/form-integrations/docs/20-system-overview.md

@@ -34,7 +34,7 @@ Fields provide a normalized api for both platform components and custom made for
 On top of this, they offer:
 
 - [formatting/parsing/serializing](?path=/docs/forms-system-formatting-and-parsing--parser) of view values
-- advanced [validation](?path=/docs/forms-validation-overview--page) possibilities
+- advanced [validation](?path=/docs/forms-validation-overview--main#validate) possibilities
 - creation of advanced user interaction scenarios via [interaction states](?path=/docs/forms-system-interaction-states--interaction-states)
 - provision of labels and help texts in an easy, declarative manner
 - accessibility out of the box
@@ -94,4 +94,4 @@ Fieldsets are at the base of:
 - [Model Value](?path=/docs/forms-system-modelvalue--page)
 - [Formatting and parsing](?path=/docs/forms-system-formatting-and-parsing--parser)
 - [Interaction states](?path=/docs/forms-system-interaction-states--interaction-states)
-- [Validation System](?path=/docs/forms-validation-overview--page)
+- [Validation System](?path=/docs/forms-validation-overview--main#validate)

packages/form-integrations/test/form-integrations.test.js

@@ -1,7 +1,7 @@
 import { expect, fixture, html } from '@open-wc/testing';
 import './helpers/umbrella-form.js';
 
-// Test umbrella form
+// Test umbrella form.
 describe('Form Integrations', () => {
   it('".serializedValue" returns all non disabled fields based on form structure', async () => {
     const el = await fixture(html`<umbrella-form></umbrella-form>`);

packages/icon/docs/intros-icon.md

@@ -7,8 +7,8 @@ Icons are SVGs so they can be easily scaled and styled with CSS.
 ## Packages
 
 | Package                                   | Version                                                                                          | Description |
-| --------------------------------------------- | ------------------------------------------------------------------------------------------------ | ----------- |
+| ----------------------------------------- | ------------------------------------------------------------------------------------------------ | ----------- |
-| [icon](?path=/docs/icons-icon--default-story) | [![icon](https://img.shields.io/npm/v/@lion/icon.svg)](https://www.npmjs.com/package/@lion/icon) | Icon        |
+| [icon](?path=/docs/icons-icon--main#icon) | [![icon](https://img.shields.io/npm/v/@lion/icon.svg)](https://www.npmjs.com/package/@lion/icon) | Icon        |
 
 ```js script
 export default {

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-amount/README.md

@@ -36,7 +36,7 @@ export const main = () => {
 - Option to override locale to change the formatting and parsing
 - Option to provide additional format options overrides
 - Default label in different languages
-- Can make use of number specific [validators](?path=/docs/forms-validation-overview--page) with corresponding error messages in different languages
+- Can make use of number specific [validators](?path=/docs/forms-validation-overview--main#validate) with corresponding error messages in different languages
   - IsNumber (default)
   - MinNumber
   - MaxNumber

packages/input-amount/src/formatters.js

@@ -1,7 +1,7 @@
 import { formatNumber, getFractionDigits, normalizeCurrencyLabel } from '@lion/localize';
 
 /**
- * Formats a number considering the default fraction digits provided by Intl
+ * Formats a number considering the default fraction digits provided by Intl.
  *
  * @param {float} modelValue Number to format
  * @param {object} givenOptions Options for Intl

packages/input-date/README.md

@@ -23,11 +23,11 @@ export const main = () => html` <lion-input-date label="Date"></lion-input-date>
 
 ## Features
 
-- Based on [lion-input](?path=/docs/forms-input--default-story)
+- Based on [lion-input](?path=/docs/forms-input--main#input)
-- Makes use of [formatDate](?path=/docs/localize-dates--formatting)) for formatting and parsing.
+- Makes use of [formatDate](?path=/docs/localize-dates--formatting#date-localization) for formatting and parsing.
 - Option to override locale to change the formatting and parsing
 - Default label in different languages
-- Can make use of date specific [validators](?path=/docs/forms-validation-overview--page) with corresponding error messages in different languages
+- Can make use of date specific [validators](?path=/docs/forms-validation-overview--main#validate) with corresponding error messages in different languages
   - IsDate (default)
   - MinDate
   - MaxDate

packages/input-date/src/LionInputDate.js

@@ -1,6 +1,6 @@
+import { IsDate } from '@lion/form-core';
 import { LionInput } from '@lion/input';
 import { formatDate, LocalizeMixin, parseDate } from '@lion/localize';
-import { IsDate } from '@lion/form-core';
 
 function isValidDate(date) {
   // to make sure it is a valid date we use isNaN and not Number.isNaN
@@ -48,7 +48,7 @@ export class LionInputDate extends LocalizeMixin(LionInput) {
       return '';
     }
     // modelValue is localized, so we take the timezone offset in milliseconds and subtract it
-    // before converting it to ISO string
+    // before converting it to ISO string.
     const offset = modelValue.getTimezoneOffset() * 60000;
     return new Date(modelValue - offset).toISOString().slice(0, 10);
   }

packages/input-datepicker/README.md

@@ -29,11 +29,11 @@ export const main = () => {
 ## Features
 
 - Input field with a datepicker to help to choose a date
-- Based on [lion-input-date](?path=/docs/form-component-input-date)
+- Based on [lion-input-date](?path=/docs/forms-input-date--main#input)
-- Makes use of [lion-calendar](?path=/docs/calendar-standalone) inside the datepicker
+- Makes use of [lion-calendar](?path=/docs/others-calendar--main#calendar) inside the datepicker
-- Makes use of [formatDate](?path=/docs/localize-dates--formatting)) for formatting and parsing.
+- Makes use of [formatDate](?path=/docs/localize-dates--formatting#date-localization) for formatting and parsing.
 - Option to overwrite locale to change the formatting and parsing
-- Can make use of date specific [validators](?path=/docs/forms-validation-overview--page) with corresponding error messages in different languages
+- Can make use of date specific [validators](?path=/docs/forms-validation-overview--main#validate) with corresponding error messages in different languages
   - IsDate (default)
   - MinDate
   - MaxDate

packages/input-datepicker/src/LionInputDatepicker.js

@@ -22,7 +22,7 @@ export class LionInputDatepicker extends ScopedElementsMixin(OverlayMixin(LionIn
       /**
        * The heading to be added on top of the calendar overlay.
        * Naming chosen from an Application Developer perspective.
-       * For a Subclasser 'calendarOverlayHeading' would be more appropriate
+       * For a Subclasser 'calendarOverlayHeading' would be more appropriate.
        */
       calendarHeading: {
         type: String,

packages/input-email/README.md

@@ -23,8 +23,8 @@ export const main = () => {
 
 ## Features
 
-- Based on [lion-input](?path=/docs/forms-input--default-story)
+- Based on [lion-input](?path=/docs/forms-input--main#input)
-- Makes use of email [validators](?path=/docs/forms-validation-overview--page) with corresponding error messages in different languages
+- Makes use of email [validators](?path=/docs/forms-validation-overview--main#validate) with corresponding error messages in different languages
   - IsEmail (default)
 
 ## How to use

packages/input-email/src/LionInputEmail.js

@@ -1,6 +1,6 @@
-import { LocalizeMixin } from '@lion/localize';
-import { LionInput } from '@lion/input';
 import { IsEmail } from '@lion/form-core';
+import { LionInput } from '@lion/input';
+import { LocalizeMixin } from '@lion/localize';
 
 /**
  * LionInputEmail: extension of lion-input
@@ -12,7 +12,7 @@ export class LionInputEmail extends LocalizeMixin(LionInput) {
   constructor() {
     super();
     // local-part@domain where the local part may be up to 64 characters long
-    // and the domain may have a maximum of 255 characters
+    // and the domain may have a maximum of 255 characters.
     // @see https://www.wikiwand.com/en/Email_address
     // however, the longest active email is even bigger
     // @see https://laughingsquid.com/the-worlds-longest-active-email-address/

packages/input-iban/README.md

@@ -27,9 +27,9 @@ export const main = () => {
 
 ## Features
 
-- Based on [lion-input](?path=/docs/forms-input--default-story)
+- Based on [lion-input](?path=/docs/forms-input--main#input)
 - Default label in different languages
-- Makes use of IBAN specific [validate](?path=/docs/forms-validation-overview--page) with corresponding error messages in different languages
+- Makes use of IBAN specific [validate](?path=/docs/forms-validation-overview--main#validate) with corresponding error messages in different languages
   - IsIBAN (default)
   - IsCountryIBAN
 - Parses IBANs automatically

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/input-range/README.md

@@ -21,11 +21,11 @@ export const main = () => html`
 
 ## Features
 
-- Based on [lion-input](?path=/docs/forms-input--default-story).
+- Based on [lion-input](?path=/docs/forms-input--main#input).
 - Shows `modelValue` and `unit` above the range input.
 - Shows `min` and `max` value after the range input.
 - Can hide the `min` and `max` value via `no-min-max-labels`.
-- Makes use of [formatNumber](?path=/docs/localize-numbers) for formatting and parsing.
+- Makes use of [formatNumber](?path=/docs/localize-numbers--formatting#formatting) for formatting and parsing.
 
 ## How to use
 

packages/input-range/src/LionInputRange.js

@@ -1,10 +1,10 @@
 /* eslint-disable import/no-extraneous-dependencies */
-import { LocalizeMixin, formatNumber } from '@lion/localize';
+import { css, html, unsafeCSS } from '@lion/core';
 import { LionInput } from '@lion/input';
-import { html, css, unsafeCSS } from '@lion/core';
+import { formatNumber, LocalizeMixin } from '@lion/localize';
 
 /**
- * LionInputRange: extension of lion-input
+ * LionInputRange: extension of lion-input.
  *
  * @customElement `lion-input-range`
  * @extends LionInput

packages/input/README.md

@@ -33,7 +33,7 @@ export const main = () => html` <lion-input label="First Name"></lion-input> `;
   - **before**: does not have an active use case yet, but the option is in place.
   - **after**: can be used to show a currency or percentage.
 - Delegates attributes like `type`, `disabled`, `placeholder` and `read-only` to the native input.
-- Can make us of [validation](?path=/docs/forms-validation-overview--page)
+- Can make us of [validation](?path=/docs/forms-validation-overview--main#validate)
 
 ## How to use
 

packages/input/src/LionInput.js

@@ -1,7 +1,7 @@
 import { LionField } from '@lion/form-core';
 
 /**
- * LionInput: extension of lion-field with native input element in place and user friendly API
+ * LionInput: extension of lion-field with native input element in place and user friendly API.
  *
  * @customElement lion-input
  * @extends {LionField}

packages/radio-group/README.md

@@ -29,12 +29,12 @@ export const main = () => html`
 `;
 ```
 
-- Make sure that to use a name attribute as it is necessary for the [lion-form](?path=/docs/forms-form-overview--page)'s serialization result.
+- Make sure that to use a name attribute as it is necessary for the [lion-form](?path=/docs/forms-form-overview--main#form)'s serialization result.
-- If you have many options for a user to pick from, consider using [lion-select](?path=/docs/forms-select--default-story) instead
+- If you have many options for a user to pick from, consider using [lion-select](?path=/docs/forms-select--main#select) instead
 
 ## Features
 
-Since it extends from [lion-fieldset](?path=/docs/forms-fieldset-overview--page), it has all the features a fieldset has.
+Since it extends from [lion-fieldset](?path=/docs/forms-fieldset-overview--main#fieldset), it has all the features a fieldset has.
 
 - Get or set the checked value of the group:
   - modelValue (default) - `checkedValue()`

packages/radio-group/src/LionRadio.js

@@ -18,7 +18,6 @@ import { LionInput } from '@lion/input';
  *   Example:
  *   <lion-radio checked>
  *
- *
  * @customElement lion-radio
  * @extends {LionInput}
  */