Merge branch 'main' of https://github.com/Citolab/qti-components

.storybook/DocumentationTemplate.mdx

@@ -0,0 +1,30 @@
+import { Meta, Title, Primary, Controls, Stories } from '@storybook/blocks';
+
+{/*
+
+- 👇 The isTemplate property is required to tell Storybook that this is a template
+- See https://storybook.js.org/docs/api/doc-blocks/doc-block-meta
+- to learn how to use
+  */}
+
+<Meta isTemplate />
+
+<Title />
+
+{/* # Default implementation */}
+
+{/* <Primary /> */}
+
+{/* ## Inputs */}
+
+{/* The component accepts the following inputs (props): */}
+
+{/* <Controls /> */}
+
+---
+
+{/* ## Additional variations */}
+
+{/* Listed below are additional variations of the component. */}
+
+<Stories />

.storybook/preview.ts

@@ -1,9 +1,12 @@
 import { setCustomElementsManifest } from '@storybook/web-components';
 import { setWcStorybookHelpersConfig } from 'wc-storybook-helpers';
 import { withActions } from '@storybook/addon-actions/decorator';
+import prettier from 'prettier-v2'; /* https://github.com/storybookjs/storybook/issues/8078#issuecomment-2325332120 */
+import HTMLParser from 'prettier-v2/parser-html'; /* https://github.com/storybookjs/storybook/issues/8078#issuecomment-2325332120 */
 
 import customElements from '../custom-elements.json';
 import { customViewports } from './custom-viewport-sizes';
+import DocumentationTemplate from './DocumentationTemplate.mdx';
 
 import type { Preview } from '@storybook/web-components';
 
@@ -30,7 +33,20 @@ const preview: Preview = {
   decorators: [withActions],
 
   parameters: {
-    docs: { toc: true },
+    docs: {
+      toc: true,
+      source: {
+        /* FIXME EVENTUALLY https://github.com/storybookjs/storybook/issues/8078#issuecomment-2325332120 */
+        transform: input =>
+          prettier.format(input, {
+            parser: 'html',
+            plugins: [HTMLParser],
+            printWidth: 140,
+            htmlWhitespaceSensitivity: 'ignore'
+          })
+      },
+      page: DocumentationTemplate
+    },
     viewport: { viewports: customViewports },
     controls: {
       expanded: true,

package.json

@@ -138,6 +138,7 @@
     "postcss-import": "^16.1.0",
     "postcss-nesting": "^13.0.1",
     "prettier": "3.4.2",
+    "prettier-v2": "npm:[email protected]",
     "remark-gfm": "^4.0.0",
     "shadow-dom-testing-library": "^1.11.3",
     "stampino": "^0.8.3",

src/lib/qti-components/qti-interaction/internal/choices/choices.mixin.ts

@@ -133,7 +133,9 @@ export const ChoicesMixin = <T extends Constructor<Interaction>>(superClass: T,
           `Please select no more than ${this.maxChoices} ${this.maxChoices === 1 ? 'option' : 'options'}.`;
       } else if (selectedCount < this.minChoices) {
         isValid = false;
-        validityMessage = `Please select at least ${this.minChoices} ${this.minChoices === 1 ? 'option' : 'options'}.`;
+        validityMessage =
+          this.dataset.minSelectionsMessage ||
+          `Please select at least ${this.minChoices} ${this.minChoices === 1 ? 'option' : 'options'}.`;
       }
 
       if (selectedChoices.length > 0) {