From d2708d2457e4af9685f76f9d0eb3cdf549b16ab7 Mon Sep 17 00:00:00 2001 From: Thomas Allmer Date: Mon, 10 Feb 2020 19:15:39 +0100 Subject: [PATCH] fix: move documentation from readme to mdx --- packages/checkbox-group/README.md | 20 ------------ .../checkbox-group/src/LionCheckboxGroup.js | 5 +++ .../checkbox-group/stories/index.stories.mdx | 31 ++++++++++++++++--- packages/radio-group/README.md | 20 ------------ packages/radio-group/src/LionRadioGroup.js | 22 ++----------- .../radio-group/stories/index.stories.mdx | 27 ++++++++++++++-- 6 files changed, 57 insertions(+), 68 deletions(-) diff --git a/packages/checkbox-group/README.md b/packages/checkbox-group/README.md index 91bcb07ce..aca7da590 100644 --- a/packages/checkbox-group/README.md +++ b/packages/checkbox-group/README.md @@ -35,23 +35,3 @@ import '@lion/checkbox-group/lion-checkbox-group.js'; ``` - -### Model value - -The `modelValue` of a `lion-checkbox-group` is an array containing the `choiceValues` of the `lion-checkbox` elements that have been checked. - -Given the scientists example above, say that we were to select the first and last options (Archimedes & Marie Curie). - -Then the `modelValue` of the `lion-checkbox-group` will look as follows: - -```js -const groupElement = [parent].querySelector('lion-checkbox-group'); -groupElement.modelValue; - => ["Archimedes", "Marie Curie"]; -``` - -### The `name` attribute - -The `name` attribute of a `lion-checkbox-group` automatically gets assigned to its `lion-checkbox` children. You can also specify names for the `lion-checkbox` elements, but if this name is different from the name assigned to `lion-checkbox-group`, then an exception will be thrown. - -Our recommendation would be to set the `name` attribute only on the `lion-checkbox-group` and not on the `lion-checkbox` elements. diff --git a/packages/checkbox-group/src/LionCheckboxGroup.js b/packages/checkbox-group/src/LionCheckboxGroup.js index e13ad3142..4a3e1046b 100644 --- a/packages/checkbox-group/src/LionCheckboxGroup.js +++ b/packages/checkbox-group/src/LionCheckboxGroup.js @@ -1,6 +1,11 @@ import { ChoiceGroupMixin } from '@lion/choice-input'; import { LionFieldset } from '@lion/fieldset'; +/** + * A wrapper around multiple checkboxes + * + * @extends {LionFieldset} + */ export class LionCheckboxGroup extends ChoiceGroupMixin(LionFieldset) { constructor() { super(); diff --git a/packages/checkbox-group/stories/index.stories.mdx b/packages/checkbox-group/stories/index.stories.mdx index 83fe47991..f5397e413 100644 --- a/packages/checkbox-group/stories/index.stories.mdx +++ b/packages/checkbox-group/stories/index.stories.mdx @@ -56,7 +56,29 @@ import '@lion/checkbox/lion-checkbox.js'; import '@lion/checkbox-group/lion-checkbox-group.js'; ``` -## Pre-select +### Model value + +The `modelValue` of a `lion-checkbox-group` is an array containing the `choiceValues` of the `lion-checkbox` elements that have been checked. + +Given the scientists example above, say that we were to select the first and last options (Archimedes & Marie Curie). + +Then the `modelValue` of the `lion-checkbox-group` will look as follows: + +```js +const groupElement = [parent].querySelector('lion-checkbox-group'); +groupElement.modelValue; + => ["Archimedes", "Marie Curie"]; +``` + +### The `name` attribute + +The `name` attribute of a `lion-checkbox-group` automatically gets assigned to its `lion-checkbox` children. You can also specify names for the `lion-checkbox` elements, but if this name is different from the name assigned to `lion-checkbox-group`, then an exception will be thrown. + +Our recommendation would be to set the `name` attribute only on the `lion-checkbox-group` and not on the `lion-checkbox` elements. + +## Examples + +### Pre-select You can pre-select options by targeting the `modelValue` object of the option and setting the `checked` property to `true`. @@ -98,7 +120,7 @@ You can pre-select options by targeting the `modelValue` object of the option an ``` -## Disabled +### Disabled You can disable the entire group by setting the `disabled` attribute on the ``. @@ -138,7 +160,7 @@ You can disable the entire group by setting the `disabled` attribute on the `
  • ``` -## Validation +### Validation You can apply validation to the ``, similar to how you would do so in any fieldset. The interaction states of the `` are evaluated in order to hide or show feedback messages. @@ -207,8 +229,7 @@ const validate = () => { ``` - -## Validation advanced +### Validation advanced Below is a more advanced validator on the group that evaluates the children checkboxes' checked states. diff --git a/packages/radio-group/README.md b/packages/radio-group/README.md index e8bd615db..78cc2cd8e 100644 --- a/packages/radio-group/README.md +++ b/packages/radio-group/README.md @@ -35,23 +35,3 @@ import '@lion/radio-group/lion-radio-group.js'; - Make sure that to use a name attribute as it is necessary for the [lion-form](../form)'s serialization result. - If you have many options for a user to pick from, consider using [`lion-select`](../select) instead - -### Model value - -The `modelValue` of a `lion-radio-group` is string equal to the `choiceValue` of the `lion-radio` element that has been checked. - -Given the dinosaur example above, say that we were to select the last option (diplodocus). - -Then the `modelValue` of the `lion-radio-group` will look as follows: - -```js -const groupElement = [parent].querySelector('lion-radio-group'); -groupElement.modelValue; - => "diplodocus"; -``` - -### The `name` attribute - -The `name` attribute of a `lion-radio-group` automatically gets assigned to its `lion-radio` children. You can also specify names for the `lion-radio` elements, but if this name is different from the name assigned to `lion-radio-group`, then an exception will be thrown. - -Our recommendation would be to set the `name` attribute only on the `lion-radio-group` and not on the `lion-checkbox` elements. diff --git a/packages/radio-group/src/LionRadioGroup.js b/packages/radio-group/src/LionRadioGroup.js index 0ef441658..080441e57 100644 --- a/packages/radio-group/src/LionRadioGroup.js +++ b/packages/radio-group/src/LionRadioGroup.js @@ -2,31 +2,13 @@ import { ChoiceGroupMixin } from '@lion/choice-input'; import { LionFieldset } from '@lion/fieldset'; /** - * LionRadioGroup: extends the lion-fieldset + * A wrapper around multiple radios. * - * - * - * - * - * - * - * - * - * - * - * You can preselect an option by setting marking an lion-radio checked. - * Example: - * - * - * It extends LionFieldset so it inherits it's features. - * - * - * @customElement lion-radio-group * @extends {LionFieldset} */ - export class LionRadioGroup extends ChoiceGroupMixin(LionFieldset) { connectedCallback() { + // eslint-disable-next-line wc/guard-super-call super.connectedCallback(); this._setRole('radiogroup'); } diff --git a/packages/radio-group/stories/index.stories.mdx b/packages/radio-group/stories/index.stories.mdx index c5c432f96..5bc947955 100644 --- a/packages/radio-group/stories/index.stories.mdx +++ b/packages/radio-group/stories/index.stories.mdx @@ -52,9 +52,30 @@ import '@lion/radio/lion-radio.js'; import '@lion/radio-group/lion-radio-group.js'; ``` + +### Model value + +The `modelValue` of a `lion-radio-group` is string equal to the `choiceValue` of the `lion-radio` element that has been checked. + +Given the dinosaur example above, say that we were to select the last option (diplodocus). + +Then the `modelValue` of the `lion-radio-group` will look as follows: + +```js +const groupElement = [parent].querySelector('lion-radio-group'); +groupElement.modelValue; + => "diplodocus"; +``` + +### The `name` attribute + +The `name` attribute of a `lion-radio-group` automatically gets assigned to its `lion-radio` children. You can also specify names for the `lion-radio` elements, but if this name is different from the name assigned to `lion-radio-group`, then an exception will be thrown. + +Our recommendation would be to set the `name` attribute only on the `lion-radio-group` and not on the `lion-checkbox` elements. + ## Examples -## Pre-select +### Pre-select You can pre-select an option by adding the checked attribute to the selected `lion-radio`. @@ -76,7 +97,7 @@ You can pre-select an option by adding the checked attribute to the selected `li ``` -## Disabled +### Disabled You can disable a specific `lion-radio` option by adding the `disabled` attribute. @@ -118,7 +139,7 @@ You can do the same thing for the entire group by setting the `disabled` attribu ``` -## Validation +### Validation {() => {