@charcoal-ui/react 3.3.0-beta.0 → 3.4.0

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

@@ -0,0 +1,483 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots SegmentedControl Object Segments 1`] = `
+.c0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: var(--charcoal-surface3);
+  border-radius: 16px;
+}
+
+.c1 {
+  position: relative;
+  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;
+  cursor: pointer;
+  height: 32px;
+  padding-right: 16px;
+  padding-left: 16px;
+  border-radius: 16px;
+  color: var(--charcoal-text2);
+}
+
+.c1:disabled,
+.c1[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
+}
+
+.c1:disabled,
+.c1[aria-disabled]:not([aria-disabled=false]) {
+  opacity: 0.32;
+}
+
+.c2 {
+  position: absolute;
+  height: 0px;
+  width: 0px;
+  padding: 0;
+  margin: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  box-sizing: border-box;
+  overflow: hidden;
+  white-space: nowrap;
+  opacity: 0;
+}
+
+.c3 {
+  background: transparent;
+  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;
+  height: 22px;
+}
+
+.c4 {
+  font-size: 14px;
+  line-height: 22px;
+  display: flow-root;
+}
+
+.c4::before {
+  display: block;
+  width: 0;
+  height: 0;
+  content: '';
+  margin-top: -4px;
+}
+
+.c4::after {
+  display: block;
+  width: 0;
+  height: 0;
+  content: '';
+  margin-bottom: -4px;
+}
+
+<div
+  data-dark={false}
+>
+  <div
+    aria-label="test"
+    aria-orientation="vertical"
+    className="c0"
+    id="test-id"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    role="radiogroup"
+  >
+    <label
+      aria-disabled={false}
+      checked={false}
+      className="c1"
+    >
+      <input
+        checked={false}
+        className="c2"
+        disabled={false}
+        name="test-id"
+        onChange={[Function]}
+        onClick={[Function]}
+        onDragStart={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        onMouseUp={[Function]}
+        onTouchCancel={[Function]}
+        onTouchEnd={[Function]}
+        onTouchMove={[Function]}
+        onTouchStart={[Function]}
+        tabIndex={0}
+        type="radio"
+        value="option1"
+      />
+      <div
+        className="c3"
+      >
+        <div
+          className="c4"
+        >
+          選択肢1
+        </div>
+      </div>
+    </label>
+    <label
+      aria-disabled={false}
+      checked={false}
+      className="c1"
+    >
+      <input
+        checked={false}
+        className="c2"
+        disabled={false}
+        name="test-id"
+        onChange={[Function]}
+        onClick={[Function]}
+        onDragStart={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        onMouseUp={[Function]}
+        onTouchCancel={[Function]}
+        onTouchEnd={[Function]}
+        onTouchMove={[Function]}
+        onTouchStart={[Function]}
+        tabIndex={0}
+        type="radio"
+        value="option2"
+      />
+      <div
+        className="c3"
+      >
+        <div
+          className="c4"
+        >
+          選択肢2
+        </div>
+      </div>
+    </label>
+    <label
+      aria-disabled={false}
+      checked={false}
+      className="c1"
+    >
+      <input
+        checked={false}
+        className="c2"
+        disabled={false}
+        name="test-id"
+        onChange={[Function]}
+        onClick={[Function]}
+        onDragStart={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        onMouseUp={[Function]}
+        onTouchCancel={[Function]}
+        onTouchEnd={[Function]}
+        onTouchMove={[Function]}
+        onTouchStart={[Function]}
+        tabIndex={0}
+        type="radio"
+        value="option3"
+      />
+      <div
+        className="c3"
+      >
+        <div
+          className="c4"
+        >
+          選択肢3
+        </div>
+      </div>
+    </label>
+    <label
+      aria-disabled={true}
+      checked={false}
+      className="c1"
+    >
+      <input
+        checked={false}
+        className="c2"
+        disabled={true}
+        name="test-id"
+        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]}
+        type="radio"
+        value="option4"
+      />
+      <div
+        className="c3"
+      >
+        <div
+          className="c4"
+        >
+          選択肢4
+        </div>
+      </div>
+    </label>
+  </div>
+</div>
+`;
+
+exports[`Storyshots SegmentedControl String Segments 1`] = `
+.c0 {
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  background-color: var(--charcoal-surface3);
+  border-radius: 16px;
+}
+
+.c1 {
+  position: relative;
+  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;
+  cursor: pointer;
+  height: 32px;
+  padding-right: 16px;
+  padding-left: 16px;
+  border-radius: 16px;
+  color: var(--charcoal-text2);
+}
+
+.c1:disabled,
+.c1[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
+}
+
+.c1:disabled,
+.c1[aria-disabled]:not([aria-disabled=false]) {
+  opacity: 0.32;
+}
+
+.c2 {
+  position: absolute;
+  height: 0px;
+  width: 0px;
+  padding: 0;
+  margin: 0;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  box-sizing: border-box;
+  overflow: hidden;
+  white-space: nowrap;
+  opacity: 0;
+}
+
+.c3 {
+  background: transparent;
+  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;
+  height: 22px;
+}
+
+.c4 {
+  font-size: 14px;
+  line-height: 22px;
+  display: flow-root;
+}
+
+.c4::before {
+  display: block;
+  width: 0;
+  height: 0;
+  content: '';
+  margin-top: -4px;
+}
+
+.c4::after {
+  display: block;
+  width: 0;
+  height: 0;
+  content: '';
+  margin-bottom: -4px;
+}
+
+<div
+  data-dark={false}
+>
+  <div
+    aria-label="test"
+    aria-orientation="vertical"
+    className="c0"
+    id="test-id"
+    onBlur={[Function]}
+    onFocus={[Function]}
+    onKeyDown={[Function]}
+    role="radiogroup"
+  >
+    <label
+      aria-disabled={false}
+      checked={false}
+      className="c1"
+    >
+      <input
+        checked={false}
+        className="c2"
+        disabled={false}
+        name="test-id"
+        onChange={[Function]}
+        onClick={[Function]}
+        onDragStart={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        onMouseUp={[Function]}
+        onTouchCancel={[Function]}
+        onTouchEnd={[Function]}
+        onTouchMove={[Function]}
+        onTouchStart={[Function]}
+        tabIndex={0}
+        type="radio"
+        value="option1"
+      />
+      <div
+        className="c3"
+      >
+        <div
+          className="c4"
+        >
+          option1
+        </div>
+      </div>
+    </label>
+    <label
+      aria-disabled={false}
+      checked={false}
+      className="c1"
+    >
+      <input
+        checked={false}
+        className="c2"
+        disabled={false}
+        name="test-id"
+        onChange={[Function]}
+        onClick={[Function]}
+        onDragStart={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        onMouseUp={[Function]}
+        onTouchCancel={[Function]}
+        onTouchEnd={[Function]}
+        onTouchMove={[Function]}
+        onTouchStart={[Function]}
+        tabIndex={0}
+        type="radio"
+        value="option2"
+      />
+      <div
+        className="c3"
+      >
+        <div
+          className="c4"
+        >
+          option2
+        </div>
+      </div>
+    </label>
+    <label
+      aria-disabled={false}
+      checked={false}
+      className="c1"
+    >
+      <input
+        checked={false}
+        className="c2"
+        disabled={false}
+        name="test-id"
+        onChange={[Function]}
+        onClick={[Function]}
+        onDragStart={[Function]}
+        onFocus={[Function]}
+        onKeyDown={[Function]}
+        onKeyUp={[Function]}
+        onMouseDown={[Function]}
+        onMouseEnter={[Function]}
+        onMouseLeave={[Function]}
+        onMouseUp={[Function]}
+        onTouchCancel={[Function]}
+        onTouchEnd={[Function]}
+        onTouchMove={[Function]}
+        onTouchStart={[Function]}
+        tabIndex={0}
+        type="radio"
+        value="option3"
+      />
+      <div
+        className="c3"
+      >
+        <div
+          className="c4"
+        >
+          option3
+        </div>
+      </div>
+    </label>
+  </div>
+</div>
+`;