@charcoal-ui/react 3.3.0 → 3.5.0

package/src/components/MultiSelect/__snapshots__/index.story.storyshot

@@ -0,0 +1,511 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots MultiSelect Default 1`] = `
+.c1 {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+  gap: 4px;
+}
+
+.c1:disabled,
+.c1[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
+}
+
+.c1:disabled,
+.c1[aria-disabled]:not([aria-disabled=false]) {
+  opacity: 0.32;
+}
+
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: 14px;
+  line-height: 22px;
+  display: flow-root;
+  color: var(--charcoal-text2);
+}
+
+.c4::before {
+  display: block;
+  width: 0;
+  height: 0;
+  content: '';
+  margin-top: -4px;
+}
+
+.c4::after {
+  display: block;
+  width: 0;
+  height: 0;
+  content: '';
+  margin-bottom: -4px;
+}
+
+.c2[type='checkbox'] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  display: block;
+  width: 20px;
+  height: 20px;
+  margin: 0;
+  background-color: var(--charcoal-text3);
+  border-radius: 999999px;
+  -webkit-transition: 0.2s background-color;
+  transition: 0.2s background-color;
+}
+
+.c2[type='checkbox']:checked {
+  background-color: var(--charcoal-brand);
+  -webkit-transition: 0.2s background-color;
+  transition: 0.2s background-color;
+}
+
+.c2[type='checkbox']:checked:hover:not(:disabled):not([aria-disabled]),
+.c2[type='checkbox']:checked:hover[aria-disabled=false] {
+  background-color: var(--charcoal-brand-hover);
+}
+
+.c2[type='checkbox']:checked:active:not(:disabled):not([aria-disabled]),
+.c2[type='checkbox']:checked:active[aria-disabled=false] {
+  background-color: var(--charcoal-brand-press);
+}
+
+.c2[type='checkbox']:hover:not(:disabled):not([aria-disabled]),
+.c2[type='checkbox']:hover[aria-disabled=false] {
+  background-color: var(--charcoal-text3-hover);
+}
+
+.c2[type='checkbox']:active:not(:disabled):not([aria-disabled]),
+.c2[type='checkbox']:active[aria-disabled=false] {
+  background-color: var(--charcoal-text3-press);
+}
+
+.c3 {
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 999999px;
+  color: var(--charcoal-text5);
+}
+
+.c0 {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 8px;
+}
+
+<div
+  data-dark={false}
+>
+  <div
+    aria-label=""
+    className="c0"
+    data-testid="SelectGroup"
+  >
+    <label
+      aria-disabled={false}
+      className="c1"
+    >
+      <input
+        aria-invalid={false}
+        checked={true}
+        className="c2"
+        disabled={false}
+        name=""
+        onChange={[Function]}
+        type="checkbox"
+        value="選択肢1"
+      />
+      <div
+        aria-hidden={true}
+        className="c3"
+      >
+        <pixiv-icon
+          name="24/Check"
+          unsafe-non-guideline-scale={0.6666666666666666}
+        />
+      </div>
+      <div
+        className="c4"
+      >
+        選択肢
+        1
+      </div>
+    </label>
+    <label
+      aria-disabled={false}
+      className="c1"
+    >
+      <input
+        aria-invalid={false}
+        checked={false}
+        className="c2"
+        disabled={false}
+        name=""
+        onChange={[Function]}
+        type="checkbox"
+        value="選択肢2"
+      />
+      <div
+        aria-hidden={true}
+        className="c3"
+      >
+        <pixiv-icon
+          name="24/Check"
+          unsafe-non-guideline-scale={0.6666666666666666}
+        />
+      </div>
+      <div
+        className="c4"
+      >
+        選択肢
+        2
+      </div>
+    </label>
+    <label
+      aria-disabled={false}
+      className="c1"
+    >
+      <input
+        aria-invalid={false}
+        checked={true}
+        className="c2"
+        disabled={false}
+        name=""
+        onChange={[Function]}
+        type="checkbox"
+        value="選択肢3"
+      />
+      <div
+        aria-hidden={true}
+        className="c3"
+      >
+        <pixiv-icon
+          name="24/Check"
+          unsafe-non-guideline-scale={0.6666666666666666}
+        />
+      </div>
+      <div
+        className="c4"
+      >
+        選択肢
+        3
+      </div>
+    </label>
+    <label
+      aria-disabled={false}
+      className="c1"
+    >
+      <input
+        aria-invalid={false}
+        checked={false}
+        className="c2"
+        disabled={false}
+        name=""
+        onChange={[Function]}
+        type="checkbox"
+        value="選択肢4"
+      />
+      <div
+        aria-hidden={true}
+        className="c3"
+      >
+        <pixiv-icon
+          name="24/Check"
+          unsafe-non-guideline-scale={0.6666666666666666}
+        />
+      </div>
+      <div
+        className="c4"
+      >
+        選択肢
+        4
+      </div>
+    </label>
+  </div>
+</div>
+`;
+
+exports[`Storyshots MultiSelect Playground 1`] = `
+.c1 {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  position: relative;
+  cursor: pointer;
+  gap: 4px;
+}
+
+.c1:disabled,
+.c1[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
+}
+
+.c1:disabled,
+.c1[aria-disabled]:not([aria-disabled=false]) {
+  opacity: 0.32;
+}
+
+.c4 {
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  font-size: 14px;
+  line-height: 22px;
+  display: flow-root;
+  color: var(--charcoal-text2);
+}
+
+.c4::before {
+  display: block;
+  width: 0;
+  height: 0;
+  content: '';
+  margin-top: -4px;
+}
+
+.c4::after {
+  display: block;
+  width: 0;
+  height: 0;
+  content: '';
+  margin-bottom: -4px;
+}
+
+.c2[type='checkbox'] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  display: block;
+  width: 20px;
+  height: 20px;
+  margin: 0;
+  background-color: var(--charcoal-text3);
+  border-radius: 999999px;
+  -webkit-transition: 0.2s background-color;
+  transition: 0.2s background-color;
+}
+
+.c2[type='checkbox']:checked {
+  background-color: var(--charcoal-brand);
+  -webkit-transition: 0.2s background-color;
+  transition: 0.2s background-color;
+}
+
+.c2[type='checkbox']:checked:hover:not(:disabled):not([aria-disabled]),
+.c2[type='checkbox']:checked:hover[aria-disabled=false] {
+  background-color: var(--charcoal-brand-hover);
+}
+
+.c2[type='checkbox']:checked:active:not(:disabled):not([aria-disabled]),
+.c2[type='checkbox']:checked:active[aria-disabled=false] {
+  background-color: var(--charcoal-brand-press);
+}
+
+.c2[type='checkbox']:hover:not(:disabled):not([aria-disabled]),
+.c2[type='checkbox']:hover[aria-disabled=false] {
+  background-color: var(--charcoal-text3-hover);
+}
+
+.c2[type='checkbox']:active:not(:disabled):not([aria-disabled]),
+.c2[type='checkbox']:active[aria-disabled=false] {
+  background-color: var(--charcoal-text3-press);
+}
+
+.c3 {
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  box-sizing: border-box;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  border-radius: 999999px;
+  color: var(--charcoal-text5);
+}
+
+.c0 {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 8px;
+}
+
+<div
+  data-dark={false}
+>
+  <div
+    aria-label=""
+    className="c0"
+    data-testid="SelectGroup"
+  >
+    <label
+      aria-disabled={false}
+      className="c1"
+    >
+      <input
+        aria-invalid={false}
+        checked={false}
+        className="c2"
+        disabled={false}
+        name="defaultName"
+        onChange={[Function]}
+        type="checkbox"
+        value="選択肢1"
+      />
+      <div
+        aria-hidden={true}
+        className="c3"
+      >
+        <pixiv-icon
+          name="24/Check"
+          unsafe-non-guideline-scale={0.6666666666666666}
+        />
+      </div>
+      <div
+        className="c4"
+      >
+        選択肢
+        1
+      </div>
+    </label>
+    <label
+      aria-disabled={false}
+      className="c1"
+    >
+      <input
+        aria-invalid={false}
+        checked={false}
+        className="c2"
+        disabled={false}
+        name="defaultName"
+        onChange={[Function]}
+        type="checkbox"
+        value="選択肢2"
+      />
+      <div
+        aria-hidden={true}
+        className="c3"
+      >
+        <pixiv-icon
+          name="24/Check"
+          unsafe-non-guideline-scale={0.6666666666666666}
+        />
+      </div>
+      <div
+        className="c4"
+      >
+        選択肢
+        2
+      </div>
+    </label>
+    <label
+      aria-disabled={false}
+      className="c1"
+    >
+      <input
+        aria-invalid={false}
+        checked={false}
+        className="c2"
+        disabled={false}
+        name="defaultName"
+        onChange={[Function]}
+        type="checkbox"
+        value="選択肢3"
+      />
+      <div
+        aria-hidden={true}
+        className="c3"
+      >
+        <pixiv-icon
+          name="24/Check"
+          unsafe-non-guideline-scale={0.6666666666666666}
+        />
+      </div>
+      <div
+        className="c4"
+      >
+        選択肢
+        3
+      </div>
+    </label>
+    <label
+      aria-disabled={false}
+      className="c1"
+    >
+      <input
+        aria-invalid={false}
+        checked={false}
+        className="c2"
+        disabled={false}
+        name="defaultName"
+        onChange={[Function]}
+        type="checkbox"
+        value="選択肢4"
+      />
+      <div
+        aria-hidden={true}
+        className="c3"
+      >
+        <pixiv-icon
+          name="24/Check"
+          unsafe-non-guideline-scale={0.6666666666666666}
+        />
+      </div>
+      <div
+        className="c4"
+      >
+        選択肢
+        4
+      </div>
+    </label>
+  </div>
+</div>
+`;