[WNMGDS-2724] ds-choice-list web component

examples/astro/src/pages/web-components.astro

@@ -59,6 +59,45 @@ import Layout from '../layouts/Layout.astro';
         <input type="checkbox" value="12" disabled />
       </ds-month-picker>
 
+      <ds-choice-list type="radio" label="Choice list example" name="foo">
+        <ds-choice label="Choice without associated children" value="no children" />
+
+        <ds-choice
+          label="Checked children"
+          hint="Selecting this checkbox will reveal its associated children."
+          value="checked children"
+        >
+          <div slot="checked-children">
+            <div class="ds-c-choice__checkedChild">
+              <ds-alert heading="🫣 Tag! You're it!">
+                You can reveal content by applying <code>checked-children</code> to the{' '}
+                <code>slot</code> attribute of an HTML element. Do not forget to include a{' '}
+                <code>div</code> element with the class <code>ds-c-choice__checkedChild</code> to
+                whatever content you want to show/hide so it gets side border showing an association
+                with its choice parent.
+              </ds-alert>
+            </div>
+          </div>
+        </ds-choice>
+        <ds-choice
+          label="Unchecked children"
+          hint="Selecting this checkbox will hide its associated children."
+          value="unchecked children"
+        >
+          <div slot="unchecked-children">
+            <div class="ds-c-choice__checkedChild">
+              <ds-alert variation="warn" heading="I banish thee!">
+                You can hide content by applying <code>unchecked-children</code> to the{' '}
+                <code>slot</code> attribute of an HTML element. Do not forget to include a{' '}
+                <code>div</code> element with the class <code>ds-c-choice__checkedChild</code> to
+                whatever content you want to show/hide so it gets side border showing an association
+                with its choice parent.
+              </ds-alert>
+            </div>
+          </div>
+        </ds-choice>
+      </ds-choice-list>
+
       <h2 class="ds-text-heading--2xl">Adding machine</h2>
       <form id="calculator">
         <ds-dropdown
@@ -125,6 +164,7 @@ import Layout from '../layouts/Layout.astro';
 <script src="@cmsgov/design-system/dist/web-components/bundle/ds-alert.js"></script>
 <script src="@cmsgov/design-system/dist/web-components/bundle/ds-button.js"></script>
 <script src="@cmsgov/design-system/dist/web-components/bundle/ds-choice.js"></script>
+<script src="@cmsgov/design-system/dist/web-components/bundle/ds-choice-list.js"></script>
 <script src="@cmsgov/design-system/dist/web-components/bundle/ds-dropdown.js"></script>
 <script src="@cmsgov/design-system/dist/web-components/bundle/ds-month-picker.js"></script>
 <script src="@cmsgov/design-system/dist/web-components/bundle/ds-pagination.js"></script>

packages/design-system/src/components/web-components/ds-choice-list/__snapshots__/ds-choice-list.test.tsx.snap

@@ -0,0 +1,155 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ChoiceList accepts HTML as children 1`] = `
+<DocumentFragment>
+  <ds-choice-list
+    type="checkbox"
+  >
+    <fieldset
+      aria-invalid="false"
+      class="ds-c-fieldset"
+    >
+      <legend
+        class="ds-c-label"
+        id="choice-list--11__label"
+      />
+      <div>
+        <div
+          class="ds-c-choice-wrapper"
+        >
+          <input
+            class="ds-c-choice"
+            id="choice-list--11__choice--0"
+            type="checkbox"
+            value="foo"
+          />
+          <label
+            class="ds-c-label"
+            for="choice-list--11__choice--0"
+            id="choice-list--11__choice--0__label"
+          >
+            Foo
+          </label>
+        </div>
+      </div>
+      <div>
+        <div
+          class="ds-c-choice-wrapper"
+        >
+          <input
+            class="ds-c-choice"
+            id="choice-list--11__choice--1"
+            type="checkbox"
+            value="bar"
+          />
+          <label
+            class="ds-c-label"
+            for="choice-list--11__choice--1"
+            id="choice-list--11__choice--1__label"
+          >
+            Bar
+          </label>
+        </div>
+      </div>
+    </fieldset>
+    <template />
+  </ds-choice-list>
+</DocumentFragment>
+`;
+
+exports[`ChoiceList is a radio button group 1`] = `
+<DocumentFragment>
+  <ds-choice-list
+    choices="[{\\"label\\":\\"Choice 1\\",\\"value\\":\\"1\\"},{\\"label\\":\\"Choice 2\\",\\"value\\":\\"2\\"}]"
+    error-message="Hey, you have to pick an answer"
+    hint="Psst! I know the answer"
+    id="static-id"
+    label="Foo"
+    name="spec-field"
+    type="radio"
+  >
+    <fieldset
+      aria-describedby="choice-list--1__error choice-list--1__hint"
+      aria-invalid="true"
+      class="ds-c-fieldset"
+    >
+      <legend
+        class="ds-c-label"
+        id="choice-list--1__label"
+      >
+        Foo
+      </legend>
+      <p
+        class="ds-c-hint"
+        id="choice-list--1__hint"
+      >
+        Psst! I know the answer
+      </p>
+      <p
+        aria-atomic="true"
+        aria-live="assertive"
+        class="ds-c-inline-error"
+        id="choice-list--1__error"
+      >
+        <svg
+          aria-hidden="true"
+          class="ds-c-icon ds-c-icon--alert-circle "
+          viewBox="36 -12 186 186"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M162.18 41.592c-5.595-9.586-13.185-17.176-22.771-22.771-9.588-5.595-20.055-8.392-31.408-8.392-11.352 0-21.821 2.797-31.408 8.392-9.587 5.594-17.177 13.184-22.772 22.771-5.596 9.587-8.393 20.057-8.393 31.408 0 11.351 2.798 21.82 8.392 31.408 5.595 9.584 13.185 17.176 22.772 22.771 9.587 5.595 20.056 8.392 31.408 8.392s21.822-2.797 31.408-8.392c9.586-5.594 17.176-13.185 22.771-22.771C167.773 94.82 170.57 84.35 170.57 73c0-11.351-2.797-21.822-8.39-31.408zm-43.75 70.433c0 .761-.246 1.398-.734 1.914s-1.086.773-1.793.773H100.26c-.706 0-1.331-.271-1.874-.814-.543-.543-.814-1.168-.814-1.873V96.546c0-.706.271-1.331.814-1.874.543-.543 1.168-.814 1.874-.814h15.643c.707 0 1.306.258 1.793.773.488.518.734 1.154.734 1.915v15.479zm-.164-28.026c-.055.543-.339 1.019-.854 1.426-.517.407-1.154.61-1.914.61h-15.073c-.761 0-1.413-.203-1.956-.61-.543-.407-.815-.883-.815-1.426l-1.385-50.595c0-.653.271-1.141.814-1.467.544-.434 1.196-.652 1.956-.652h17.926c.761 0 1.412.217 1.955.652.543.326.813.815.813 1.467l-1.467 50.595z"
+          />
+        </svg>
+        <span
+          class="ds-u-visibility--screen-reader"
+        >
+          Error: 
+        </span>
+        Hey, you have to pick an answer
+      </p>
+      <div>
+        <div
+          class="ds-c-choice-wrapper"
+        >
+          <input
+            class="ds-c-choice--error ds-c-choice"
+            id="choice-list--1__choice--0"
+            name="spec-field"
+            type="radio"
+            value="1"
+          />
+          <label
+            class="ds-c-label"
+            for="choice-list--1__choice--0"
+            id="choice-list--1__choice--0__label"
+          >
+            Choice 1
+          </label>
+        </div>
+      </div>
+      <div>
+        <div
+          class="ds-c-choice-wrapper"
+        >
+          <input
+            class="ds-c-choice--error ds-c-choice"
+            id="choice-list--1__choice--1"
+            name="spec-field"
+            type="radio"
+            value="2"
+          />
+          <label
+            class="ds-c-label"
+            for="choice-list--1__choice--1"
+            id="choice-list--1__choice--1__label"
+          >
+            Choice 2
+          </label>
+        </div>
+      </div>
+    </fieldset>
+    <template />
+  </ds-choice-list>
+</DocumentFragment>
+`;