From db78817cff878a93c77a670ae8aa1257c596759d Mon Sep 17 00:00:00 2001 From: Lu Khei Chong Date: Fri, 25 Oct 2024 13:38:47 +0800 Subject: [PATCH] docs(radio, switch): sb update --- scripts/generateStories.mjs | 14 +++-- src/components/Radio/sgds-radio.ts | 4 -- src/components/Switch/sgds-switch.ts | 5 +- stories/templates/Radio/additional.mdx | 37 ++++++++++++-- stories/templates/Radio/additional.stories.js | 16 ++++++ stories/templates/Radio/basic.js | 28 +++++----- stories/templates/Switch/additional.mdx | 27 ++++++++++ .../templates/Switch/additional.stories.js | 51 +++++++++++++++++++ stories/templates/Switch/basic.js | 9 +++- 9 files changed, 159 insertions(+), 32 deletions(-) create mode 100644 stories/templates/Switch/additional.mdx create mode 100644 stories/templates/Switch/additional.stories.js diff --git a/scripts/generateStories.mjs b/scripts/generateStories.mjs index c9543716..361ddf62 100644 --- a/scripts/generateStories.mjs +++ b/scripts/generateStories.mjs @@ -28,11 +28,19 @@ const groupedComponents = groupBy(components, (k, v) => { for (const [key, value] of Object.entries(groupedComponents)) { const allMembers = value.map(i => i.members).flat().filter(member => !(member.privacy && member.privacy === 'private')) - + if (key==="Radio")console.log(value) const methodsMeta = methodsTable(value); const summary = value.filter(i => i.summary).map(i => i.summary).join('
') const args = allMembers.filter(member => member.kind === 'field'); const mdxFilePath = path.join(storiesDir, `${key}.mdx`); + const reactComponentPaths = value.map(v => { + const folderName = v.tagName.replace("sgds-", "") + return ` + \`\`\` jsx + import ${v.name} from "@govtechsg/sgds-web-component/react/${folderName}/index.js"; + \`\`\` + ` + }).join('') const ArgsType = value.map( component => `### ${component.tagName} @@ -58,9 +66,7 @@ ${summary ? summary +"\n" : "\n"} ### React -\`\`\` jsx -import Sgds${key} from "@govtechsg/sgds-web-component/react/${key.toLowerCase()}/index.js"; -\`\`\` +${reactComponentPaths} ### Others (Vue, Angular, plain HTML etc.) diff --git a/src/components/Radio/sgds-radio.ts b/src/components/Radio/sgds-radio.ts index b152001f..f935ba91 100644 --- a/src/components/Radio/sgds-radio.ts +++ b/src/components/Radio/sgds-radio.ts @@ -28,10 +28,6 @@ export class SgdsRadio extends SgdsElement { /** Disables the radio. */ @property({ type: Boolean, reflect: true }) disabled = false; - /**Feedback text for error state when validated */ - @property({ type: String, reflect: true }) invalidFeedback = ""; - /** Allows invalidFeedback, invalid and valid styles to be visible with the input */ - @property({ type: Boolean, reflect: true }) hasFeedback = false; /** Marks the radio input as invalid. Replace the pseudo :invalid selector for absent in custom elements */ @property({ type: Boolean, reflect: true }) invalid = false; diff --git a/src/components/Switch/sgds-switch.ts b/src/components/Switch/sgds-switch.ts index 95ffc63d..cac7a0c4 100644 --- a/src/components/Switch/sgds-switch.ts +++ b/src/components/Switch/sgds-switch.ts @@ -29,16 +29,13 @@ export class SgdsSwitch extends SgdsElement { /**@internal */ @query('input[type="checkbox"]') input: HTMLInputElement; - // /** For aria-label when there is no appropriate text label visible */ - // @property({ type: String, reflect: true }) ariaLabel: string; - /** Draws the switch in a checked state. */ @property({ type: Boolean, reflect: true }) checked = false; /** Disables the switch (so the user can't check / uncheck it). */ @property({ type: Boolean, reflect: true }) disabled = false; - /** Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */ + /** @internal Gets or sets the default value used to reset this element. The initial value corresponds to the one originally specified in the HTML that created this element. */ @defaultValue("checked") defaultChecked = false; diff --git a/stories/templates/Radio/additional.mdx b/stories/templates/Radio/additional.mdx index fdb1166e..b82e7a35 100644 --- a/stories/templates/Radio/additional.mdx +++ b/stories/templates/Radio/additional.mdx @@ -1,6 +1,37 @@ -## Validation +## Labels -`SgdsRadioGroup` runs native HTMLInputElement methods to check on the [constraint validation](https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation) of the input and applies our own validation stylings +It is always important to label your form components. + +Use `label` prop in `sgds-radio-group` to provide a context for the entire radio group. +Add labels to individual `sgds-radio` through its default slot + + + + + +## Invalid + +Radio button's invalid styles are controlled by the radio group. +To enable SGDS form validation styles set `hasFeedback` to true. +Add your custom invalid feedback message via `invalidFeedback` and control the stylings of the radio group with `invalid` boolean prop. + +`sgds-radio-group` controls and updates the `invalid` prop in its child `sgds-radio` buttons. + + + + + +## Disabled + +Disabled individual `sgds-radio` using the `disabled` prop. + + + + + +## Validation work in progress + +{/* `SgdsRadioGroup` runs native HTMLInputElement methods to check on the [constraint validation](https://developer.mozilla.org/en-US/docs/Web/HTML/Constraint_validation) of the input and applies our own validation stylings Set `hasFeedback` to true to enable sgds validation stylings. @@ -9,4 +40,4 @@ Try submitting the required form below without clicking on any radio buttons to - + */} diff --git a/stories/templates/Radio/additional.stories.js b/stories/templates/Radio/additional.stories.js index 3e9e5c17..cb0f8735 100644 --- a/stories/templates/Radio/additional.stories.js +++ b/stories/templates/Radio/additional.stories.js @@ -20,3 +20,19 @@ export const Validation = { parameters: {}, tags: ["!dev"] }; + +export const Invalid = { + render: Template.bind({}), + name: "Invalid styles", + args: { ...args, hasFeedback: true, invalidFeedback: "Feedback", invalid: true }, + parameters: {}, + tags: ["!dev"] +}; + +export const Disabled = { + render: Template.bind({}), + name: "Disabled", + args: { ...args, disabled: true }, + parameters: {}, + tags: ["!dev"] +}; diff --git a/stories/templates/Radio/basic.js b/stories/templates/Radio/basic.js index 4b9a66a8..1e0404a4 100644 --- a/stories/templates/Radio/basic.js +++ b/stories/templates/Radio/basic.js @@ -5,14 +5,14 @@ export const Template = ({ name, defaultValue, disabled, - isInline, radioValue, - ariaLabel, required, invalidFeedback, checked, invalid, - hasFeedback + hasFeedback, + hintText, + label }) => { return html` - Select an option - Option 1 - Option 2 - Option 3 + Option 2 + Option 3 `; }; -export const args = {}; +export const args = { + hintText: "hint", + label: "Label" +}; export const parameters = {}; diff --git a/stories/templates/Switch/additional.mdx b/stories/templates/Switch/additional.mdx new file mode 100644 index 00000000..7fc5e599 --- /dev/null +++ b/stories/templates/Switch/additional.mdx @@ -0,0 +1,27 @@ +## Sizes + +There are three sizes of switch : small, medium (default), large + + + + + +## Label + +Add label to provide textual hints on what the switch does. By default label is added to the right of the switch in the default slot. + +Use `slot="leftLabel"` to add label to the left of the switch + + + + + +## Icon + +Use of on and off icons to provide visual clues of what the switch does. + + Note: The icons are currently fixed and not customisable + + + + \ No newline at end of file diff --git a/stories/templates/Switch/additional.stories.js b/stories/templates/Switch/additional.stories.js new file mode 100644 index 00000000..5eb5b1b1 --- /dev/null +++ b/stories/templates/Switch/additional.stories.js @@ -0,0 +1,51 @@ +import { html } from "lit-html"; + +const SizeTemplate = args => { + return html` +
+ small + medium (default) + large +
+ `; +}; + +const LabelTemplate = args => { + return html` +
+ Label on the right + Label on the left +
+ `; +}; + +const IconTemplate = args => { + return html` +
+ Off with icon + On with icon +
+ `; +}; + +export const Sizes = { + render: SizeTemplate.bind({}), + name: "Sizes", + args: {}, + parameters: {}, + tags: ["!dev"] +}; +export const Label = { + render: LabelTemplate.bind({}), + name: "Labels", + args: {}, + parameters: {}, + tags: ["!dev"] +}; +export const Icon = { + render: IconTemplate.bind({}), + name: "Icon", + args: {}, + parameters: {}, + tags: ["!dev"] +}; diff --git a/stories/templates/Switch/basic.js b/stories/templates/Switch/basic.js index f6d3c826..38f48840 100644 --- a/stories/templates/Switch/basic.js +++ b/stories/templates/Switch/basic.js @@ -1,6 +1,13 @@ import { html } from "lit-html"; +import { ifDefined } from "lit/directives/if-defined.js"; -export const Template = args => html``; +export const Template = args => html` +`; export const args = {};