@charcoal-ui/react 3.6.0 → 3.8.0

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Switch Labelled 1`] = `
+exports[`Storybook Tests Switch Basic 1`] = `
 .c0 {
   display: inline-grid;
   grid-template-columns: auto 1fr;
@@ -18,15 +18,148 @@ exports[`Storyshots Switch Labelled 1`] = `
   cursor: default;
 }
 
-.c0:active > input {
+.c1 {
+  -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);
+}
+
+.c1:hover {
+  background-color: var(--charcoal-text4-hover);
+}
+
+.c1:active {
+  background-color: var(--charcoal-text4-press);
+}
+
+.c1:focus {
+  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
-.c2 {
-  font-size: 14px;
-  line-height: 22px;
-  color: var(--charcoal-text2);
-  margin-left: 4px;
+.c1:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+.c1:focus-visible {
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1::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);
+}
+
+.c1::after:hover {
+  background-color: var(--charcoal-text5-hover);
+}
+
+.c1::after:active {
+  background-color: var(--charcoal-text5-press);
+}
+
+.c1:checked {
+  background-color: var(--charcoal-brand);
+}
+
+.c1:checked:hover {
+  background-color: var(--charcoal-brand-hover);
+}
+
+.c1:checked:active {
+  background-color: var(--charcoal-brand-press);
+}
+
+.c1: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;
+}
+
+<div
+  data-dark={false}
+>
+  <div>
+    <label
+      className="c0"
+    >
+      <input
+        aria-label="label"
+        checked={false}
+        className="c1"
+        disabled={false}
+        name="name"
+        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>
+`;
+
+exports[`Storybook Tests Switch Checked 1`] = `
+.c0 {
+  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;
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled='false']) {
+  opacity: 0.32;
+  cursor: default;
 }
 
 .c1 {
@@ -62,6 +195,15 @@ exports[`Storyshots Switch Labelled 1`] = `
 }
 
 .c1:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+.c1:focus-visible {
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -117,11 +259,11 @@ exports[`Storyshots Switch Labelled 1`] = `
 >
   <div>
     <label
-      aria-disabled={false}
       className="c0"
     >
       <input
-        checked={false}
+        aria-label="label"
+        checked={true}
         className="c1"
         disabled={false}
         name="name"
@@ -141,17 +283,12 @@ exports[`Storyshots Switch Labelled 1`] = `
         role="switch"
         type="checkbox"
       />
-      <div
-        className="c2"
-      >
-        選択する
-      </div>
     </label>
   </div>
 </div>
 `;
 
-exports[`Storyshots Switch Playground 1`] = `
+exports[`Storybook Tests Switch Disabled 1`] = `
 .c0 {
   display: inline-grid;
   grid-template-columns: auto 1fr;
@@ -169,10 +306,6 @@ exports[`Storyshots Switch Playground 1`] = `
   cursor: default;
 }
 
-.c0:active > input {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
-}
-
 .c2 {
   font-size: 14px;
   line-height: 22px;
@@ -213,6 +346,15 @@ exports[`Storyshots Switch Playground 1`] = `
 }
 
 .c1:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+.c1:focus-visible {
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -268,12 +410,13 @@ exports[`Storyshots Switch Playground 1`] = `
 >
   <div>
     <label
+      aria-disabled={true}
       className="c0"
     >
       <input
         checked={false}
         className="c1"
-        disabled={false}
+        disabled={true}
         name="name"
         onChange={[Function]}
         onClick={[Function]}
@@ -294,14 +437,14 @@ exports[`Storyshots Switch Playground 1`] = `
       <div
         className="c2"
       >
-        選択する
+        Label
       </div>
     </label>
   </div>
 </div>
 `;
 
-exports[`Storyshots Switch Unlabelled 1`] = `
+exports[`Storybook Tests Switch Labelled 1`] = `
 .c0 {
   display: inline-grid;
   grid-template-columns: auto 1fr;
@@ -319,8 +462,11 @@ exports[`Storyshots Switch Unlabelled 1`] = `
   cursor: default;
 }
 
-.c0:active > input {
-  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+.c2 {
+  font-size: 14px;
+  line-height: 22px;
+  color: var(--charcoal-text2);
+  margin-left: 4px;
 }
 
 .c1 {
@@ -356,6 +502,15 @@ exports[`Storyshots Switch Unlabelled 1`] = `
 }
 
 .c1:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+.c1:focus-visible {
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -411,11 +566,9 @@ exports[`Storyshots Switch Unlabelled 1`] = `
 >
   <div>
     <label
-      aria-disabled={false}
       className="c0"
     >
       <input
-        aria-label="label"
         checked={false}
         className="c1"
         disabled={false}
@@ -436,6 +589,11 @@ exports[`Storyshots Switch Unlabelled 1`] = `
         role="switch"
         type="checkbox"
       />
+      <div
+        className="c2"
+      >
+        Label
+      </div>
     </label>
   </div>
 </div>

package/src/components/Switch/index.story.tsx

@@ -1,62 +1,86 @@
-import { action } from '@storybook/addon-actions'
 import { useState } from 'react'
-import { Story } from '../../_lib/compat'
 import Switch from '.'
+import { Meta, StoryObj } from '@storybook/react'
 
 export default {
   title: 'Switch',
   component: Switch,
-}
+  args: {
+    name: 'name',
+    label: 'label',
+  },
+  parameters: {
+    layout: 'centered',
+  },
+} as Meta<typeof Switch>
 
-interface Props {
-  checked: boolean
-  disabled: boolean
+export const Basic: StoryObj<typeof Switch> = {
+  render: function Render(args) {
+    const [checked, setChecked] = useState(false)
+    return (
+      <div>
+        <Switch
+          {...args}
+          name="name"
+          onChange={(v) => {
+            setChecked(v)
+          }}
+          checked={args.checked ?? checked}
+        />
+      </div>
+    )
+  },
 }
 
-export const Playground: Story<Props> = (props: Props) => {
-  const [checked, setChecked] = useState(false)
-  return (
-    <div>
-      <Switch
-        {...props}
-        name="name"
-        onChange={(v) => {
-          setChecked(v)
-          action('onChange')
-        }}
-        checked={checked}
-      >
-        選択する
-      </Switch>
-    </div>
-  )
+export const Checked: StoryObj<typeof Switch> = {
+  render: function Render(args) {
+    const [checked, setChecked] = useState(true)
+    return (
+      <div>
+        <Switch
+          {...args}
+          name="name"
+          onChange={(v) => {
+            setChecked(v)
+          }}
+          checked={args.checked ?? checked}
+        />
+      </div>
+    )
+  },
 }
 
-export const Labelled: Story<Props> = (props: Props) => (
-  <div>
-    <Switch {...props} name="name" onChange={action('onChange')}>
-      選択する
-    </Switch>
-  </div>
-)
-
-Labelled.args = {
-  checked: false,
-  disabled: false,
+export const Labelled: StoryObj<typeof Switch> = {
+  render: function Render(args) {
+    const [checked, setChecked] = useState(false)
+    return (
+      <div>
+        <Switch
+          {...args}
+          checked={args.checked ?? checked}
+          onChange={setChecked}
+        >
+          Label
+        </Switch>
+      </div>
+    )
+  },
 }
 
-export const Unlabelled: Story<Props> = (props: Props) => (
-  <div>
-    <Switch
-      {...props}
-      name="name"
-      label="label"
-      onChange={action('onChange')}
-    />
-  </div>
-)
-
-Unlabelled.args = {
-  checked: false,
-  disabled: false,
+export const Disabled: StoryObj<typeof Switch> = {
+  render: function Render(args) {
+    const [checked, setChecked] = useState(false)
+    return (
+      <div>
+        <Switch
+          {...args}
+          checked={args.checked ?? checked}
+          onChange={setChecked}
+          disabled
+        >
+          Label
+        </Switch>
+      </div>
+    )
+  },
 }

package/src/components/Switch/index.tsx

@@ -5,6 +5,7 @@ import * as React from 'react'
 import { useToggleState } from 'react-stately'
 import styled from 'styled-components'
 import { useObjectRef } from '@react-aria/utils'
+import { focusVisibleFocusRingCss } from '@charcoal-ui/styled'
 
 export type SwitchProps = {
   name: string
@@ -71,10 +72,6 @@ const Label = styled.label`
     opacity: 0.32;
     cursor: default;
   }
-
-  :active > input {
-    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-  }
 `
 
 const LabelInner = styled.div`
@@ -107,9 +104,7 @@ const SwitchInput = styled.input.attrs({ type: 'checkbox' })`
   :active {
     background-color: var(--charcoal-text4-press);
   }
-  :focus {
-    box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
-  }
+  ${focusVisibleFocusRingCss}
 
   &::after {
     content: '';

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots TagItem Default 1`] = `
+exports[`Storybook Tests TagItem Default 1`] = `
 .c0 {
   isolation: isolate;
   position: relative;
@@ -30,12 +30,18 @@ exports[`Storyshots TagItem Default 1`] = `
 }
 
 .c0:not(:disabled):not([aria-disabled]):focus,
-.c0[aria-disabled='false']:focus,
-.c0:not(:disabled):not([aria-disabled]):active,
-.c0[aria-disabled='false']:active,
+.c0[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c0:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c0[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c0:not(:disabled):not([aria-disabled]):focus-visible,
 .c0[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -106,7 +112,6 @@ exports[`Storyshots TagItem Default 1`] = `
 >
   <a
     className="c0"
-    href=""
     onClick={[Function]}
     onDragStart={[Function]}
     onKeyDown={[Function]}
@@ -119,11 +124,9 @@ exports[`Storyshots TagItem Default 1`] = `
     onTouchEnd={[Function]}
     onTouchMove={[Function]}
     onTouchStart={[Function]}
-    rel=""
     role="button"
     size="M"
     tabIndex={0}
-    target=""
   >
     <div
       className="c1"
@@ -145,7 +148,7 @@ exports[`Storyshots TagItem Default 1`] = `
 </div>
 `;
 
-exports[`Storyshots TagItem Playground 1`] = `
+exports[`Storybook Tests TagItem Playground 1`] = `
 .c1 {
   isolation: isolate;
   position: relative;
@@ -175,12 +178,18 @@ exports[`Storyshots TagItem Playground 1`] = `
 }
 
 .c1:not(:disabled):not([aria-disabled]):focus,
-.c1[aria-disabled='false']:focus,
-.c1:not(:disabled):not([aria-disabled]):active,
-.c1[aria-disabled='false']:active,
+.c1[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c1:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c1[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c1:not(:disabled):not([aria-disabled]):focus-visible,
 .c1[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -219,12 +228,18 @@ exports[`Storyshots TagItem Playground 1`] = `
 }
 
 .c8:not(:disabled):not([aria-disabled]):focus,
-.c8[aria-disabled='false']:focus,
-.c8:not(:disabled):not([aria-disabled]):active,
-.c8[aria-disabled='false']:active,
+.c8[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c8:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c8[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c8:not(:disabled):not([aria-disabled]):focus-visible,
 .c8[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -263,12 +278,18 @@ exports[`Storyshots TagItem Playground 1`] = `
 }
 
 .c9:not(:disabled):not([aria-disabled]):focus,
-.c9[aria-disabled='false']:focus,
-.c9:not(:disabled):not([aria-disabled]):active,
-.c9[aria-disabled='false']:active,
+.c9[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c9:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c9[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c9:not(:disabled):not([aria-disabled]):focus-visible,
 .c9[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -307,12 +328,18 @@ exports[`Storyshots TagItem Playground 1`] = `
 }
 
 .c11:not(:disabled):not([aria-disabled]):focus,
-.c11[aria-disabled='false']:focus,
-.c11:not(:disabled):not([aria-disabled]):active,
-.c11[aria-disabled='false']:active,
+.c11[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c11:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c11[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c11:not(:disabled):not([aria-disabled]):focus-visible,
 .c11[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -351,12 +378,18 @@ exports[`Storyshots TagItem Playground 1`] = `
 }
 
 .c12:not(:disabled):not([aria-disabled]):focus,
-.c12[aria-disabled='false']:focus,
-.c12:not(:disabled):not([aria-disabled]):active,
-.c12[aria-disabled='false']:active,
+.c12[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c12:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c12[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c12:not(:disabled):not([aria-disabled]):focus-visible,
 .c12[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
@@ -395,12 +428,18 @@ exports[`Storyshots TagItem Playground 1`] = `
 }
 
 .c13:not(:disabled):not([aria-disabled]):focus,
-.c13[aria-disabled='false']:focus,
-.c13:not(:disabled):not([aria-disabled]):active,
-.c13[aria-disabled='false']:active,
+.c13[aria-disabled='false']:focus {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c13:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c13[aria-disabled='false']:focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
 .c13:not(:disabled):not([aria-disabled]):focus-visible,
 .c13[aria-disabled='false']:focus-visible {
-  outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }