@charcoal-ui/react 3.7.0 → 3.9.0

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

@@ -1,76 +1,141 @@
-import { action } from '@storybook/addon-actions'
-import { css } from 'styled-components'
-import { Story } from '../../_lib/compat'
+import styled from 'styled-components'
 import Radio, { RadioGroup } from '.'
 import { px } from '@charcoal-ui/utils'
-
-const options = ['value1', 'value2']
+import { StoryObj } from '@storybook/react'
+import { useState } from 'react'
 
 export default {
   title: 'Radio',
   component: Radio,
-  argTypes: {
-    value: {
-      control: { type: 'select' },
-      options,
-    },
-  },
   args: {
-    invalid: false,
-    parentDisabled: false,
-    childDisabled: false,
-    readonly: false,
+    name: 'name',
+    label: 'label',
+  },
+  parameters: {
+    layout: 'centered',
   },
 }
 
-interface Props {
-  value?: string
-  invalid: boolean
-  parentDisabled: boolean
-  childDisabled: boolean
-  readonly: boolean
-  className?: string
+const LayoutDiv = styled.div`
+  display: flex;
+  flex-direction: column;
+  gap: ${({ theme }) => px(theme.spacing[24])};
+`
+
+export const Basic: StoryObj<typeof Radio> = {
+  render: function Render() {
+    const options = ['1', '2', '3']
+    const [value, setValue] = useState(options[0])
+    return (
+      <LayoutDiv>
+        <RadioGroup
+          label={'label'}
+          name={'name'}
+          value={value}
+          onChange={setValue}
+        >
+          {options.map((option) => (
+            <Radio key={option} value={option}>
+              Value {option}
+            </Radio>
+          ))}
+        </RadioGroup>
+      </LayoutDiv>
+    )
+  },
 }
 
-const Template: Story<Partial<Props>> = ({
-  value,
-  invalid,
-  parentDisabled,
-  childDisabled,
-  readonly,
-  className,
-}) => (
-  <div
-    css={css`
-      display: flex;
-      flex-direction: column;
-      gap: ${({ theme }) => px(theme.spacing[24])};
-    `}
-  >
-    {['name1', 'name2', 'name3'].map((name) => (
-      <RadioGroup
-        key={name}
-        label={`選択肢-${name}`}
-        name={name}
-        value={value}
-        onChange={action('onChange')}
-        disabled={parentDisabled}
-        readonly={readonly}
-        invalid={invalid}
-      >
-        {options.map((option) => (
-          <Radio
-            key={option}
-            value={option}
-            disabled={childDisabled}
-            className={className}
-          >
-            {name}({option})を選ぶ
-          </Radio>
-        ))}
-      </RadioGroup>
-    ))}
-  </div>
-)
+export const Disabled: StoryObj<typeof Radio> = {
+  render: function Render() {
+    const options = ['1', '2', '3']
+    const [value, setValue] = useState(options[0])
+    return (
+      <LayoutDiv>
+        <RadioGroup
+          label={'label'}
+          name={'name'}
+          value={value}
+          onChange={setValue}
+          disabled
+        >
+          {options.map((option) => (
+            <Radio key={option} value={option} disabled>
+              Value {option}
+            </Radio>
+          ))}
+        </RadioGroup>
+      </LayoutDiv>
+    )
+  },
+}
 
-export const Default = Template.bind({})
+export const PartialDisabled: StoryObj<typeof Radio> = {
+  render: function Render() {
+    const options = ['1', '2', '3']
+    const [value, setValue] = useState(options[0])
+    return (
+      <LayoutDiv>
+        <RadioGroup
+          label={'label'}
+          name={'name'}
+          value={value}
+          onChange={setValue}
+        >
+          {options.map((option) => (
+            <Radio key={option} value={option} disabled={option === '2'}>
+              Value {option}
+            </Radio>
+          ))}
+        </RadioGroup>
+      </LayoutDiv>
+    )
+  },
+}
+
+export const Readonly: StoryObj<typeof Radio> = {
+  render: function Render() {
+    const options = ['1', '2', '3']
+    const [value, setValue] = useState(options[0])
+    return (
+      <LayoutDiv>
+        <RadioGroup
+          label={'label'}
+          name={'name'}
+          value={value}
+          onChange={setValue}
+          readonly
+        >
+          {options.map((option) => (
+            <Radio key={option} value={option}>
+              Value {option}
+            </Radio>
+          ))}
+        </RadioGroup>
+      </LayoutDiv>
+    )
+  },
+}
+
+export const Invalid: StoryObj<typeof Radio> = {
+  render: function Render() {
+    const options = ['1', '2', '3']
+    const [value, setValue] = useState(options[0])
+    return (
+      <LayoutDiv>
+        <RadioGroup
+          label={'label'}
+          name={'name'}
+          value={value}
+          onChange={setValue}
+          invalid
+        >
+          {options.map((option) => (
+            <Radio key={option} value={option}>
+              Value {option}
+            </Radio>
+          ))}
+        </RadioGroup>
+      </LayoutDiv>
+    )
+  },
+}

package/src/components/Radio/index.tsx

@@ -1,7 +1,8 @@
 import { memo, forwardRef, useCallback, useContext } from 'react'
 import * as React from 'react'
-import styled, { css } from 'styled-components'
+import styled from 'styled-components'
 import warning from 'warning'
+import { focusVisibleFocusRingCss } from '@charcoal-ui/styled'
 
 export type RadioProps = React.PropsWithChildren<{
   value: string
@@ -45,7 +46,7 @@ const Radio = forwardRef<HTMLInputElement, RadioProps>(function RadioInner(
         name={name}
         value={value}
         checked={isSelected}
-        invalid={invalid}
+        aria-invalid={invalid}
         onChange={handleChange}
         disabled={isDisabled || isReadonly}
         ref={ref}
@@ -64,15 +65,13 @@ const RadioRoot = styled.label`
   align-items: center;
   cursor: pointer;
 
-  &:disabled,
   &[aria-disabled]:not([aria-disabled='false']) {
     opacity: 0.32;
+    cursor: default;
   }
 `
 
-export const RadioInput = styled.input.attrs({ type: 'radio' })<{
-  invalid?: boolean
-}>`
+export const RadioInput = styled.input.attrs({ type: 'radio' })`
   /** Make prior to browser default style */
   &[type='radio'] {
     appearance: none;
@@ -89,25 +88,24 @@ export const RadioInput = styled.input.attrs({ type: 'radio' })<{
     background-color: var(--charcoal-surface1);
     transition: 0.2s background-color, 0.2s box-shadow;
 
+    :disabled {
+      cursor: default;
+    }
+
     &:not(:disabled):not([aria-disabled]),
     &[aria-disabled='false'] {
-      ${({ invalid = false }) =>
-        invalid &&
-        css`
-          box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
-        `}
-
       &:hover {
         background-color: var(--charcoal-surface1-hover);
       }
       &:active {
         background-color: var(--charcoal-surface1-press);
       }
-      &:focus,
-      &:active,
-      &:focus-visible {
-        outline: none;
-        box-shadow: 0 0 0 4px rgba(0, 150, 250, 0.32);
+      ${focusVisibleFocusRingCss}
+      &[aria-invalid='true'] {
+        box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+        &:focus {
+          box-shadow: 0 0 0 4px rgba(255, 43, 0, 0.32);
+        }
       }
     }
 

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots SegmentedControl Object Segments 1`] = `
+exports[`Storybook Tests SegmentedControl ObjectSegments 1`] = `
 .c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;
@@ -259,7 +259,7 @@ exports[`Storyshots SegmentedControl Object Segments 1`] = `
 </div>
 `;
 
-exports[`Storyshots SegmentedControl String Segments 1`] = `
+exports[`Storybook Tests SegmentedControl StringSegments 1`] = `
 .c0 {
   display: -webkit-inline-box;
   display: -webkit-inline-flex;

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

@@ -1,37 +1,32 @@
-import { action } from '@storybook/addon-actions'
-import SegmentedControl, { SegmentedControlProps } from '.'
-import { Story } from '../../_lib/compat'
+import SegmentedControl from '.'
+import { Meta, StoryObj } from '@storybook/react'
 
 export default {
   title: 'SegmentedControl',
   component: SegmentedControl,
-}
-
-export const StringSegments: Story<SegmentedControlProps> = (props) => {
-  return <SegmentedControl {...props} onChange={action('change')} />
-}
-
-StringSegments.args = {
-  name: 'test',
-  data: ['option1', 'option2', 'option3'],
-  disabled: false,
-  readonly: false,
-  required: false,
-}
+} as Meta<typeof SegmentedControl>
 
-export const ObjectSegments: Story<SegmentedControlProps> = (props) => {
-  return <SegmentedControl {...props} onChange={action('change')} />
+export const StringSegments: StoryObj<typeof SegmentedControl> = {
+  args: {
+    name: 'test',
+    data: ['option1', 'option2', 'option3'],
+    disabled: false,
+    readonly: false,
+    required: false,
+  },
 }
 
-ObjectSegments.args = {
-  name: 'test',
-  data: [
-    { label: '選択肢1', value: 'option1' },
-    { label: '選択肢2', value: 'option2' },
-    { label: '選択肢3', value: 'option3' },
-    { label: '選択肢4', value: 'option4', disabled: true },
-  ],
-  disabled: false,
-  readonly: false,
-  required: false,
+export const ObjectSegments: StoryObj<typeof SegmentedControl> = {
+  args: {
+    name: 'test',
+    data: [
+      { label: '選択肢1', value: 'option1' },
+      { label: '選択肢2', value: 'option2' },
+      { label: '選択肢3', value: 'option3' },
+      { label: '選択肢4', value: 'option4', disabled: true },
+    ],
+    disabled: false,
+    readonly: false,
+    required: false,
+  },
 }

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>