@charcoal-ui/react 3.3.0 → 3.4.0

package/src/components/DropdownSelector/ListItem/__snapshots__/index.story.storyshot

@@ -0,0 +1,245 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots DropdownSelector/ListItem Basic 1`] = `
+.c3 {
+  display: inline-grid;
+  grid-template-columns: auto 1fr;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  cursor: pointer;
+  outline: 0;
+}
+
+.c3:disabled,
+.c3[aria-disabled]:not([aria-disabled=false]) {
+  opacity: 0.32;
+}
+
+.c3:active > input {
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c3:disabled,
+.c3[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
+}
+
+.c4 {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  position: relative;
+  box-sizing: border-box;
+  width: 28px;
+  border: 2px solid transparent;
+  -webkit-transition-property: background-color,box-shadow;
+  transition-property: background-color,box-shadow;
+  -webkit-transition-duration: 0.2s;
+  transition-duration: 0.2s;
+  cursor: inherit;
+  outline: none;
+  border-radius: 16px;
+  height: 16px;
+  margin: 0;
+  background-color: var(--charcoal-text4);
+}
+
+.c4:hover {
+  background-color: var(--charcoal-text4-hover);
+}
+
+.c4:active {
+  background-color: var(--charcoal-text4-press);
+}
+
+.c4:focus {
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c4::after {
+  content: '';
+  position: absolute;
+  display: block;
+  top: 0;
+  left: 0;
+  width: 12px;
+  height: 12px;
+  -webkit-transform: translateX(0);
+  -ms-transform: translateX(0);
+  transform: translateX(0);
+  -webkit-transition: -webkit-transform 0.2s;
+  -webkit-transition: transform 0.2s;
+  transition: transform 0.2s;
+  border-radius: 1024px;
+  background-color: var(--charcoal-text5);
+}
+
+.c4::after:hover {
+  background-color: var(--charcoal-text5-hover);
+}
+
+.c4::after:active {
+  background-color: var(--charcoal-text5-press);
+}
+
+.c4:checked {
+  background-color: var(--charcoal-brand);
+}
+
+.c4:checked:hover {
+  background-color: var(--charcoal-brand-hover);
+}
+
+.c4:checked:active {
+  background-color: var(--charcoal-brand-press);
+}
+
+.c4:checked::after {
+  -webkit-transform: translateX(12px);
+  -ms-transform: translateX(12px);
+  transform: translateX(12px);
+  -webkit-transition: -webkit-transform 0.2s;
+  -webkit-transition: transform 0.2s;
+  transition: transform 0.2s;
+}
+
+.c0 {
+  list-style: none;
+}
+
+.c1 {
+  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;
+  min-height: 40px;
+  cursor: pointer;
+  outline: none;
+  padding-right: 16px;
+  padding-left: 16px;
+}
+
+.c1:disabled,
+.c1[aria-disabled]:not([aria-disabled=false]) {
+  opacity: 0.32;
+}
+
+.c1[aria-disabled="true"] {
+  cursor: default;
+}
+
+.c1:hover,
+.c1:focus,
+.c1:focus-within {
+  background-color: var(--charcoal-surface3);
+}
+
+.c2 {
+  color: red;
+}
+
+<div
+  data-dark={false}
+>
+  <li
+    className="c0"
+    role="option"
+  >
+    <div
+      className="c1"
+    >
+      Item
+    </div>
+  </li>
+  <li
+    className="c0"
+    role="option"
+  >
+    <div
+      className="c1"
+    >
+      <pixiv-icon
+        name="16/Add"
+      />
+       Add
+    </div>
+  </li>
+  <li
+    className="c0"
+    role="option"
+  >
+    <a
+      className="c1"
+      href="#"
+    >
+      Normal Link
+    </a>
+  </li>
+  <li
+    className="c0"
+    role="option"
+  >
+    <a
+      className="c2 c1"
+      href="#"
+    >
+      Custom Link
+    </a>
+  </li>
+  <li
+    className="c0"
+    role="option"
+  >
+    <div
+      className="c1"
+      onClick={[Function]}
+    >
+      Switch
+      <div
+        style={
+          Object {
+            "marginLeft": "auto",
+          }
+        }
+      >
+        <label
+          className="c3"
+        >
+          <input
+            aria-label="hello"
+            checked={false}
+            className="c4"
+            disabled={false}
+            name="hello"
+            onChange={[Function]}
+            onClick={[Function]}
+            onDragStart={[Function]}
+            onKeyDown={[Function]}
+            onKeyUp={[Function]}
+            onMouseDown={[Function]}
+            onMouseEnter={[Function]}
+            onMouseLeave={[Function]}
+            onMouseUp={[Function]}
+            onTouchCancel={[Function]}
+            onTouchEnd={[Function]}
+            onTouchMove={[Function]}
+            onTouchStart={[Function]}
+            role="switch"
+            type="checkbox"
+          />
+        </label>
+      </div>
+    </div>
+  </li>
+</div>
+`;