docs(radio, switch): sb update

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('<br/>')
   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.)
 

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;
 

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;
 

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 
+
+<Canvas of={RadioStories.Basic}>
+  <Story of={RadioStories.Basic} />
+</Canvas>
+
+## 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.
+
+<Canvas of={RadioStories.Invalid}>
+  <Story of={RadioStories.Invalid} />
+</Canvas>
+
+## Disabled 
+
+Disabled individual `sgds-radio` using the `disabled` prop.
+
+<Canvas of={RadioStories.Disabled}>
+  <Story of={RadioStories.Disabled} />
+</Canvas>
+
+## Validation <sgds-badge show> work in progress </sgds-badge>
+
+{/* `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
 
 <Canvas of={RadioStories.Validation}>
   <Story of={RadioStories.Validation} />
-</Canvas>
+</Canvas> */}

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"]
+};

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`
     <sgds-radio-group
@@ -22,25 +22,21 @@ export const Template = ({
       invalidFeedback=${ifDefined(invalidFeedback)}
       ?invalid=${invalid}
       ?hasFeedback=${hasFeedback}
+      hintText=${ifDefined(hintText)}
+      label=${ifDefined(label)}
     >
-      <span slot="label">Select an option</span>
-      <sgds-radio
-        value=${ifDefined(radioValue)}
-        ?disabled=${disabled}
-        ariaLabel=${ifDefined(ariaLabel)}
-        ?isInline=${isInline}
-        ?checked=${checked}
-        invalidFeedback=${ifDefined(invalidFeedback)}
-        ?invalid=${invalid}
-        ?hasFeedback=${hasFeedback}
+      <sgds-radio value=${ifDefined(radioValue)} ?disabled=${disabled} ?checked=${checked} ?invalid=${invalid}
         >Option 1</sgds-radio
       >
-      <sgds-radio value="2" ?isInline=${isInline}>Option 2</sgds-radio>
-      <sgds-radio value="3" ?isInline=${isInline}>Option 3</sgds-radio>
+      <sgds-radio value="2">Option 2</sgds-radio>
+      <sgds-radio value="3">Option 3</sgds-radio>
     </sgds-radio-group>
   `;
 };
 
-export const args = {};
+export const args = {
+  hintText: "hint",
+  label: "Label"
+};
 
 export const parameters = {};

stories/templates/Switch/additional.mdx

@@ -0,0 +1,27 @@
+## Sizes 
+
+There are three sizes of switch : small, medium (default), large
+
+<Canvas of={SwitchStories.Sizes}>
+  <Story of={SwitchStories.Sizes} />
+</Canvas>
+
+## 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
+
+<Canvas of={SwitchStories.Label}>
+  <Story of={SwitchStories.Label} />
+</Canvas>
+
+## 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
+
+<Canvas of={SwitchStories.Icon}>
+  <Story of={SwitchStories.Icon} />
+</Canvas>

stories/templates/Switch/additional.stories.js

@@ -0,0 +1,51 @@
+import { html } from "lit-html";
+
+const SizeTemplate = args => {
+  return html`
+    <div class="d-flex-column">
+      <sgds-switch size="sm">small</sgds-switch>
+      <sgds-switch size="md">medium (default)</sgds-switch>
+      <sgds-switch size="lg">large </sgds-switch>
+    </div>
+  `;
+};
+
+const LabelTemplate = args => {
+  return html`
+    <div class="d-flex-column">
+      <sgds-switch>Label on the right</sgds-switch>
+      <sgds-switch><span slot="leftLabel"> Label on the left</span></sgds-switch>
+    </div>
+  `;
+};
+
+const IconTemplate = args => {
+  return html`
+    <div class="d-flex-column">
+      <sgds-switch icon>Off with icon</sgds-switch>
+      <sgds-switch icon checked>On with icon</sgds-switch>
+    </div>
+  `;
+};
+
+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"]
+};

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`<sgds-switch></sgds-switch>`;
+export const Template = args => html` <sgds-switch
+  size=${ifDefined(args.size)}
+  ?icon=${args.icon}
+  ?checked=${args.checked}
+  ?disabled=${args.disabled}
+>
+</sgds-switch>`;
 
 export const args = {};