@charcoal-ui/react 3.7.0 → 3.8.0

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);
 }