Fix code examples for SegmentedControl

src/components/SegmentedControl.stories.ts

@@ -46,15 +46,35 @@ const meta: Meta<typeof SegmentedControl> = {
     onClick: fn(),
     label: 'Select a minimum duration',
     options: selectOptions,
+    required: false,
+    disabled: false,
   },
 };
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const DurationSelection: Story = {
+export const Standard: Story = {
+  parameters: {
+    docs: {
+      source: {
+        code: "const options = [\n  { label: 'Instant', value: 0 },\n  { label: '12 hours', value: 12 },\n  { label: 'a day', value: 24 },\n  { label: '2 days', value: 48 },\n  { label: '3 days', value: 72 },\n  { label: '4 days', value: 96 },\n  { label: '5 days', value: 120 },\n];\n\n<segmented-control\n  label=\"Select a minimum duration\"\n  :options=\"options\"\n/>",
+      },
+    },
+  },
+};
+
+export const Required: Story = {
   args: {
-    modelValue: 24,
+    label: 'Required segmented control',
+    required: true,
+  },
+  parameters: {
+    docs: {
+      source: {
+        code: '<segmented-control\n  label="Select a minimum duration"\n  :options="[{ label: \'Instant\', value: 0 }, ...]"\n  required\n/>',
+      },
+    },
   },
 };
 
@@ -64,9 +84,16 @@ export const Disabled: Story = {
     disabled: true,
     modelValue: 48,
   },
+  parameters: {
+    docs: {
+      source: {
+        code: '<segmented-control\n  label="Select a minimum duration"\n  :options="[{ label: \'Instant\', value: 0 }, ...]"\n  disabled\n/>',
+      },
+    },
+  },
 };
 
-export const WithVModel: Story = {
+export const VModel: Story = {
   render: (args) => ({
     components: { SegmentedControl },
     setup() {
@@ -91,9 +118,16 @@ export const WithVModel: Story = {
       </div>
     `,
   }),
+  parameters: {
+    docs: {
+      source: {
+        code: 'const model = ref(24);\n\n<segmented-control\n  label="With external v-model"\n  v-model="model"\n  :options="[{ label: \'Instant\', value: 0 }, ...]"\n/>',
+      },
+    },
+  },
 };
 
-export const WithOptionBadges: Story = {
+export const OptionBadges: Story = {
   args: {
     label: 'Todo',
     options: [
@@ -121,4 +155,11 @@ export const WithOptionBadges: Story = {
     },
     modelValue: 0,
   },
+  parameters: {
+    docs: {
+      source: {
+        code: '<segmented-control\n  label="Todo"\n  :options="[\n    { label: \'Backlog\', value: 0 },\n    { label: \'In progress\', value: 1 },\n    { label: \'Done\', value: 2 },\n    { label: \'Blocked\', value: 3 },\n  ]"\n  :option-badges="{ 0: \'256\', 1: \'2\', 2: \'14\' }"\n/>',
+      },
+    },
+  },
 };

src/components/SegmentedControl.vue

@@ -41,7 +41,7 @@ const setOption = (option: SelectOption<string | number>) => {
       <span v-if="label || $slots.default" class="label">
         <template v-if="label">{{ label }}</template>
         <slot v-else />
-        <span v-if="required && model !== null" class="required">*</span>
+        <span v-if="required && model === null" class="required">*</span>
       </span>
     </label>
     <ul class="segment-list">

test/components/SegmentedControl.test.js

@@ -116,7 +116,7 @@ describe('SegmentedControl', () => {
     });
 
     // if required option set, ensure required asterisk is displayed
-    if (ourProps['required'] == true) {
+    if (ourProps['required'] == true && !ourProps['modelValue']) {
       expect(segCtrlLabel.text()).toContain('*');
     }
   });