diff --git a/docs/guidelines/10-guidelines-definitions.md b/packages/core/docs/guidelines/10-guidelines-definitions.md similarity index 100% rename from docs/guidelines/10-guidelines-definitions.md rename to packages/core/docs/guidelines/10-guidelines-definitions.md diff --git a/docs/guidelines/20-guidelines-styling.md b/packages/core/docs/guidelines/20-guidelines-styling.md similarity index 100% rename from docs/guidelines/20-guidelines-styling.md rename to packages/core/docs/guidelines/20-guidelines-styling.md diff --git a/docs/guidelines/30-guidelines-scoped-elements.md b/packages/core/docs/guidelines/30-guidelines-scoped-elements.md similarity index 100% rename from docs/guidelines/30-guidelines-scoped-elements.md rename to packages/core/docs/guidelines/30-guidelines-scoped-elements.md diff --git a/docs/guidelines/40-guidelines-subclasser-apis.md b/packages/core/docs/guidelines/40-guidelines-subclasser-apis.md similarity index 100% rename from docs/guidelines/40-guidelines-subclasser-apis.md rename to packages/core/docs/guidelines/40-guidelines-subclasser-apis.md diff --git a/docs/rationals/001-side-effects.md b/packages/core/docs/rationales/001-side-effects.md similarity index 100% rename from docs/rationals/001-side-effects.md rename to packages/core/docs/rationales/001-side-effects.md diff --git a/packages/core/src/DelegateMixin.js b/packages/core/src/DelegateMixin.js index a83497ecf..04f5ee9a1 100644 --- a/packages/core/src/DelegateMixin.js +++ b/packages/core/src/DelegateMixin.js @@ -17,6 +17,7 @@ import { dedupeMixin } from '@open-wc/dedupe-mixin'; * attributes: ['disabled'], * }; * } + * * render() { * return html` * diff --git a/packages/form-core/README.md b/packages/form-core/README.md index f1156ecae..8654ddab8 100644 --- a/packages/form-core/README.md +++ b/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) -- [Custom Fields](?path=/docs/forms-field-custom-fields-tutorial--page) +- [Formatting and parsing](?path=/docs/forms-system-formatting-and-parsing--parser#formatting-and-parsing) +- [Custom Fields](?path=/docs/forms-system-creating-a-custom-field--page) diff --git a/packages/form-core/src/FocusMixin.js b/packages/form-core/src/FocusMixin.js index 97e8a909a..b7467afe4 100644 --- a/packages/form-core/src/FocusMixin.js +++ b/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')); diff --git a/packages/form-integrations/docs/20-system-overview.md b/packages/form-integrations/docs/20-system-overview.md index 112d51f08..2b511cdad 100644 --- a/packages/form-integrations/docs/20-system-overview.md +++ b/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) diff --git a/packages/form-integrations/test/form-integrations.test.js b/packages/form-integrations/test/form-integrations.test.js index f49390d21..9ab691478 100644 --- a/packages/form-integrations/test/form-integrations.test.js +++ b/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``); diff --git a/docs/intros/intros-icon.md b/packages/icon/docs/intros-icon.md similarity index 51% rename from docs/intros/intros-icon.md rename to packages/icon/docs/intros-icon.md index 1b7e7e24b..38a315b44 100644 --- a/docs/intros/intros-icon.md +++ b/packages/icon/docs/intros-icon.md @@ -6,9 +6,9 @@ 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 | +| Package | Version | Description | +| ----------------------------------------- | ------------------------------------------------------------------------------------------------ | ----------- | +| [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 { diff --git a/packages/icon/src/LionIcon.js b/packages/icon/src/LionIcon.js index ea86a4eeb..0ff43dfe6 100644 --- a/packages/icon/src/LionIcon.js +++ b/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() { diff --git a/packages/input-amount/README.md b/packages/input-amount/README.md index df1ae8ae6..3807f2f70 100644 --- a/packages/input-amount/README.md +++ b/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 diff --git a/packages/input-amount/src/formatters.js b/packages/input-amount/src/formatters.js index c1bcd500d..a6f1f7315 100644 --- a/packages/input-amount/src/formatters.js +++ b/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 diff --git a/packages/input-date/README.md b/packages/input-date/README.md index edda603a3..06616e99f 100644 --- a/packages/input-date/README.md +++ b/packages/input-date/README.md @@ -23,11 +23,11 @@ export const main = () => html` ## Features -- Based on [lion-input](?path=/docs/forms-input--default-story) -- Makes use of [formatDate](?path=/docs/localize-dates--formatting)) for formatting and parsing. +- Based on [lion-input](?path=/docs/forms-input--main#input) +- 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 diff --git a/packages/input-date/src/LionInputDate.js b/packages/input-date/src/LionInputDate.js index 3798a3de8..7c5681800 100644 --- a/packages/input-date/src/LionInputDate.js +++ b/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); } diff --git a/packages/input-datepicker/README.md b/packages/input-datepicker/README.md index d4e58f09c..0ff75d6a9 100644 --- a/packages/input-datepicker/README.md +++ b/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) -- Makes use of [lion-calendar](?path=/docs/calendar-standalone) inside the datepicker -- Makes use of [formatDate](?path=/docs/localize-dates--formatting)) for formatting and parsing. +- Based on [lion-input-date](?path=/docs/forms-input-date--main#input) +- Makes use of [lion-calendar](?path=/docs/others-calendar--main#calendar) inside the datepicker +- 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 diff --git a/packages/input-datepicker/src/LionInputDatepicker.js b/packages/input-datepicker/src/LionInputDatepicker.js index 0092cff45..9f2edd88a 100644 --- a/packages/input-datepicker/src/LionInputDatepicker.js +++ b/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, diff --git a/packages/input-email/README.md b/packages/input-email/README.md index c76989955..f246314ee 100644 --- a/packages/input-email/README.md +++ b/packages/input-email/README.md @@ -23,8 +23,8 @@ export const main = () => { ## Features -- Based on [lion-input](?path=/docs/forms-input--default-story) -- Makes use of email [validators](?path=/docs/forms-validation-overview--page) with corresponding error messages in different languages +- Based on [lion-input](?path=/docs/forms-input--main#input) +- Makes use of email [validators](?path=/docs/forms-validation-overview--main#validate) with corresponding error messages in different languages - IsEmail (default) ## How to use diff --git a/packages/input-email/src/LionInputEmail.js b/packages/input-email/src/LionInputEmail.js index ee85466db..b78702875 100644 --- a/packages/input-email/src/LionInputEmail.js +++ b/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/ diff --git a/packages/input-iban/README.md b/packages/input-iban/README.md index 8afdd5a9f..4a9b860cb 100644 --- a/packages/input-iban/README.md +++ b/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 diff --git a/packages/input-iban/src/formatters.js b/packages/input-iban/src/formatters.js index 92a00a0d1..b20180a43 100644 --- a/packages/input-iban/src/formatters.js +++ b/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 ''; } diff --git a/packages/input-range/README.md b/packages/input-range/README.md index e92fb0d7b..06ef07ce7 100644 --- a/packages/input-range/README.md +++ b/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 diff --git a/packages/input-range/src/LionInputRange.js b/packages/input-range/src/LionInputRange.js index f0327c7d8..1aaf0deeb 100644 --- a/packages/input-range/src/LionInputRange.js +++ b/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 diff --git a/packages/input/README.md b/packages/input/README.md index 795e0902c..f96333081 100644 --- a/packages/input/README.md +++ b/packages/input/README.md @@ -33,7 +33,7 @@ export const main = () => html` `; - **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 diff --git a/packages/input/src/LionInput.js b/packages/input/src/LionInput.js index 8daa55a0b..d995769a9 100644 --- a/packages/input/src/LionInput.js +++ b/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} diff --git a/packages/radio-group/README.md b/packages/radio-group/README.md index 95292c993..f5e86da88 100644 --- a/packages/radio-group/README.md +++ b/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. -- If you have many options for a user to pick from, consider using [lion-select](?path=/docs/forms-select--default-story) instead +- 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--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()` diff --git a/packages/radio-group/src/LionRadio.js b/packages/radio-group/src/LionRadio.js index e50a93b7e..2e33b5106 100644 --- a/packages/radio-group/src/LionRadio.js +++ b/packages/radio-group/src/LionRadio.js @@ -18,7 +18,6 @@ import { LionInput } from '@lion/input'; * Example: * * - * * @customElement lion-radio * @extends {LionInput} */