@charcoal-ui/react 3.5.0 → 3.7.0

package/src/components/Button/index.tsx

@@ -1,17 +1,17 @@
 import { forwardRef } from 'react'
-import styled from 'styled-components'
-import { unreachable } from '../../_lib'
-import { theme } from '../../styled'
-import Clickable, { ClickableElement, ClickableProps } from '../Clickable'
+import { ClickableElement, ClickableProps } from '../Clickable'
+import { variantToFont } from './lib/variantToFont'
+import { variantToBackground } from './lib/variantToBackground'
+import { StyledButton } from './StyledButton'
 
-type Variant = 'Primary' | 'Default' | 'Overlay' | 'Danger' | 'Navigation'
-type Size = 'S' | 'M'
+export type Variant =
+  | 'Primary'
+  | 'Default'
+  | 'Overlay'
+  | 'Danger'
+  | 'Navigation'
 
-interface StyledProps {
-  $variant: Variant
-  $fullWidth: boolean
-  $size: Size
-}
+export type Size = 'S' | 'M'
 
 export type ButtonProps = Partial<{
   variant: Variant
@@ -35,7 +35,8 @@ const Button = forwardRef<ClickableElement, ButtonProps>(function Button(
     <StyledButton
       {...rest}
       disabled={disabled}
-      $variant={variant}
+      $background={variantToBackground(variant)}
+      $color={variantToFont(variant)}
       $size={size}
       $fullWidth={fixed}
       ref={ref}
@@ -44,62 +45,5 @@ const Button = forwardRef<ClickableElement, ButtonProps>(function Button(
     </StyledButton>
   )
 })
-export default Button
-
-const StyledButton = styled(Clickable)<StyledProps>`
-  width: ${(p) => (p.$fullWidth ? 'stretch' : 'min-content')};
-  display: inline-grid;
-  align-items: center;
-  justify-content: center;
-  cursor: pointer;
-  user-select: none;
-  white-space: nowrap;
-
-  ${(p) =>
-    theme((o) => [
-      o.font[variantToFont(p.$variant)].hover.press,
-      o.bg[variantToBackground(p.$variant)].hover.press,
-      o.typography(14).bold.preserveHalfLeading,
-      o.padding.horizontal(p.$size === 'M' ? 24 : 16),
-      o.disabled,
-      o.borderRadius('oval'),
-      o.outline.default.focus,
-    ])}
 
-  /* よく考えたらheight=32って定義が存在しないな... */
-  height: ${(p) => (p.$size === 'M' ? 40 : 32)}px;
-`
-
-function variantToBackground(variant: Variant) {
-  switch (variant) {
-    case 'Overlay':
-      return 'surface4'
-    case 'Default':
-      return 'surface3'
-    case 'Primary':
-      return 'brand'
-    case 'Navigation':
-      return 'surface6'
-    case 'Danger':
-      return 'assertive'
-    default:
-      return unreachable(variant)
-  }
-}
-
-function variantToFont(variant: Variant) {
-  switch (variant) {
-    case 'Overlay':
-      return 'text5'
-    case 'Default':
-      return 'text2'
-    case 'Primary':
-      return 'text5'
-    case 'Navigation':
-      return 'text5'
-    case 'Danger':
-      return 'text5'
-    default:
-      return unreachable(variant)
-  }
-}
+export default Button

package/src/components/Button/lib/variantToBackground.tsx

@@ -0,0 +1,19 @@
+import { unreachable } from '../../../_lib'
+import type { Variant } from '..'
+
+export function variantToBackground(variant: Variant) {
+  switch (variant) {
+    case 'Overlay':
+      return 'surface4'
+    case 'Default':
+      return 'surface3'
+    case 'Primary':
+      return 'brand'
+    case 'Navigation':
+      return 'surface6'
+    case 'Danger':
+      return 'assertive'
+    default:
+      return unreachable(variant)
+  }
+}

package/src/components/Button/lib/variantToFont.tsx

@@ -0,0 +1,19 @@
+import { unreachable } from '../../../_lib'
+import type { Variant } from '..'
+
+export function variantToFont(variant: Variant) {
+  switch (variant) {
+    case 'Overlay':
+      return 'text5'
+    case 'Default':
+      return 'text2'
+    case 'Primary':
+      return 'text5'
+    case 'Navigation':
+      return 'text5'
+    case 'Danger':
+      return 'text5'
+    default:
+      return unreachable(variant)
+  }
+}

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storyshots Checkbox Labelled 1`] = `
+exports[`Storyshots Checkbox Invalid 1`] = `
 .c0 {
   position: relative;
   display: -webkit-box;
@@ -17,7 +17,7 @@ exports[`Storyshots Checkbox Labelled 1`] = `
 }
 
 .c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
+.c0[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
 }
 
@@ -35,55 +35,223 @@ exports[`Storyshots Checkbox Labelled 1`] = `
   width: 20px;
   height: 20px;
   border-radius: 4px;
-  -webkit-transition: 0.2s box-shadow;
-  transition: 0.2s box-shadow;
-  -webkit-transition: all 0.2s !important;
-  transition: all 0.2s !important;
+  -webkit-transition: 0.2s box-shadow,0.2s background-color;
+  transition: 0.2s box-shadow,0.2s background-color;
 }
 
 .c2[type='checkbox']:checked {
   background-color: var(--charcoal-brand);
-  -webkit-transition: 0.2s background-color;
-  transition: 0.2s background-color;
 }
 
-.c2[type='checkbox']:checked:hover:not(:disabled):not([aria-disabled]),
-.c2[type='checkbox']:checked:hover[aria-disabled=false] {
+.c2[type='checkbox']:checked:not(:disabled):not([aria-disabled]):hover,
+.c2[type='checkbox']:checked[aria-disabled='false']:hover {
   background-color: var(--charcoal-brand-hover);
 }
 
-.c2[type='checkbox']:checked:active:not(:disabled):not([aria-disabled]),
-.c2[type='checkbox']:checked:active[aria-disabled=false] {
+.c2[type='checkbox']:checked:not(:disabled):not([aria-disabled]):active,
+.c2[type='checkbox']:checked[aria-disabled='false']:active {
   background-color: var(--charcoal-brand-press);
 }
 
+.c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus,
+.c2[type='checkbox'][aria-disabled='false']:focus,
+.c2[type='checkbox']:not(:disabled):not([aria-disabled]):active,
+.c2[type='checkbox'][aria-disabled='false']:active {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
+.c2[type='checkbox'][aria-disabled='false']:focus:not(:focus-visible),
+.c2[type='checkbox']:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
+.c2[type='checkbox'][aria-disabled='false']:active:not(:focus-visible) {
+  outline: none;
+}
+
+.c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus-visible,
+.c2[type='checkbox'][aria-disabled='false']:focus-visible {
+  outline: none;
+  box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
+}
+
+.c2[type='checkbox']:not(:disabled):not([aria-disabled])[aria-invalid='true'],
+.c2[type='checkbox'][aria-disabled='false'][aria-invalid='true'] {
+  box-shadow: 0 0 0 4px rgba(255,43,0,0.32);
+}
+
 .c2[type='checkbox']:not(:checked) {
   border-width: 2px;
   border-style: solid;
-  border-color: #adadad;
+  border-color: var(--charcoal-text4);
+}
+
+.c3 {
+  position: absolute;
+  top: -2px;
+  left: -2px;
+  box-sizing: border-box;
+  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;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  color: var(--charcoal-text5);
+  visibility: hidden;
+}
+
+.c4 {
+  color: var(--charcoal-text2);
+  font-size: 14px;
+  line-height: 20px;
+}
+
+<div
+  data-dark={false}
+>
+  <label
+    aria-disabled={false}
+    className="c0"
+  >
+    <div
+      className="c1"
+    >
+      <input
+        aria-invalid={true}
+        checked={false}
+        className="c2"
+        disabled={false}
+        name="labelled"
+        onBlur={[Function]}
+        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]}
+        type="checkbox"
+      />
+      <div
+        aria-hidden={true}
+        checked={false}
+        className="c3"
+      >
+        <pixiv-icon
+          name="24/Check"
+          unsafe-non-guideline-scale={0.6666666666666666}
+        />
+      </div>
+    </div>
+    <div
+      className="c4"
+    >
+      同意する
+    </div>
+  </label>
+</div>
+`;
+
+exports[`Storyshots Checkbox Labelled 1`] = `
+.c0 {
+  position: relative;
+  display: -webkit-box;
+  display: -webkit-flex;
+  display: -ms-flexbox;
+  display: flex;
+  cursor: pointer;
+  gap: 4px;
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled=false]) {
+  cursor: default;
+}
+
+.c0:disabled,
+.c0[aria-disabled]:not([aria-disabled='false']) {
+  opacity: 0.32;
+}
+
+.c1 {
+  position: relative;
+}
+
+.c2[type='checkbox'] {
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  display: block;
+  cursor: pointer;
+  margin: 0;
+  width: 20px;
+  height: 20px;
+  border-radius: 4px;
+  -webkit-transition: 0.2s box-shadow,0.2s background-color;
+  transition: 0.2s box-shadow,0.2s background-color;
+}
+
+.c2[type='checkbox']:checked {
+  background-color: var(--charcoal-brand);
+}
+
+.c2[type='checkbox']:checked:not(:disabled):not([aria-disabled]):hover,
+.c2[type='checkbox']:checked[aria-disabled='false']:hover {
+  background-color: var(--charcoal-brand-hover);
+}
+
+.c2[type='checkbox']:checked:not(:disabled):not([aria-disabled]):active,
+.c2[type='checkbox']:checked[aria-disabled='false']:active {
+  background-color: var(--charcoal-brand-press);
 }
 
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus,
-.c2[type='checkbox'][aria-disabled=false]:focus,
+.c2[type='checkbox'][aria-disabled='false']:focus,
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):active,
-.c2[type='checkbox'][aria-disabled=false]:active {
+.c2[type='checkbox'][aria-disabled='false']:active {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c2[type='checkbox'][aria-disabled=false]:focus:not(:focus-visible),
+.c2[type='checkbox'][aria-disabled='false']:focus:not(:focus-visible),
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c2[type='checkbox'][aria-disabled=false]:active:not(:focus-visible) {
+.c2[type='checkbox'][aria-disabled='false']:active:not(:focus-visible) {
   outline: none;
 }
 
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus-visible,
-.c2[type='checkbox'][aria-disabled=false]:focus-visible {
+.c2[type='checkbox'][aria-disabled='false']:focus-visible {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
+.c2[type='checkbox']:not(:disabled):not([aria-disabled])[aria-invalid='true'],
+.c2[type='checkbox'][aria-disabled='false'][aria-invalid='true'] {
+  box-shadow: 0 0 0 4px rgba(255,43,0,0.32);
+}
+
+.c2[type='checkbox']:not(:checked) {
+  border-width: 2px;
+  border-style: solid;
+  border-color: var(--charcoal-text4);
+}
+
 .c3 {
   position: absolute;
   top: -2px;
@@ -249,7 +417,7 @@ exports[`Storyshots Checkbox Unlabelled 1`] = `
 }
 
 .c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
+.c0[aria-disabled]:not([aria-disabled='false']) {
   opacity: 0.32;
 }
 
@@ -267,55 +435,56 @@ exports[`Storyshots Checkbox Unlabelled 1`] = `
   width: 20px;
   height: 20px;
   border-radius: 4px;
-  -webkit-transition: 0.2s box-shadow;
-  transition: 0.2s box-shadow;
-  -webkit-transition: all 0.2s !important;
-  transition: all 0.2s !important;
+  -webkit-transition: 0.2s box-shadow,0.2s background-color;
+  transition: 0.2s box-shadow,0.2s background-color;
 }
 
 .c2[type='checkbox']:checked {
   background-color: var(--charcoal-brand);
-  -webkit-transition: 0.2s background-color;
-  transition: 0.2s background-color;
 }
 
-.c2[type='checkbox']:checked:hover:not(:disabled):not([aria-disabled]),
-.c2[type='checkbox']:checked:hover[aria-disabled=false] {
+.c2[type='checkbox']:checked:not(:disabled):not([aria-disabled]):hover,
+.c2[type='checkbox']:checked[aria-disabled='false']:hover {
   background-color: var(--charcoal-brand-hover);
 }
 
-.c2[type='checkbox']:checked:active:not(:disabled):not([aria-disabled]),
-.c2[type='checkbox']:checked:active[aria-disabled=false] {
+.c2[type='checkbox']:checked:not(:disabled):not([aria-disabled]):active,
+.c2[type='checkbox']:checked[aria-disabled='false']:active {
   background-color: var(--charcoal-brand-press);
 }
 
-.c2[type='checkbox']:not(:checked) {
-  border-width: 2px;
-  border-style: solid;
-  border-color: #adadad;
-}
-
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus,
-.c2[type='checkbox'][aria-disabled=false]:focus,
+.c2[type='checkbox'][aria-disabled='false']:focus,
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):active,
-.c2[type='checkbox'][aria-disabled=false]:active {
+.c2[type='checkbox'][aria-disabled='false']:active {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus:not(:focus-visible),
-.c2[type='checkbox'][aria-disabled=false]:focus:not(:focus-visible),
+.c2[type='checkbox'][aria-disabled='false']:focus:not(:focus-visible),
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):active:not(:focus-visible),
-.c2[type='checkbox'][aria-disabled=false]:active:not(:focus-visible) {
+.c2[type='checkbox'][aria-disabled='false']:active:not(:focus-visible) {
   outline: none;
 }
 
 .c2[type='checkbox']:not(:disabled):not([aria-disabled]):focus-visible,
-.c2[type='checkbox'][aria-disabled=false]:focus-visible {
+.c2[type='checkbox'][aria-disabled='false']:focus-visible {
   outline: none;
   box-shadow: 0 0 0 4px rgba(0,150,250,0.32);
 }
 
+.c2[type='checkbox']:not(:disabled):not([aria-disabled])[aria-invalid='true'],
+.c2[type='checkbox'][aria-disabled='false'][aria-invalid='true'] {
+  box-shadow: 0 0 0 4px rgba(255,43,0,0.32);
+}
+
+.c2[type='checkbox']:not(:checked) {
+  border-width: 2px;
+  border-style: solid;
+  border-color: var(--charcoal-text4);
+}
+
 .c3 {
   position: absolute;
   top: -2px;

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

@@ -1,85 +1,103 @@
 import { action } from '@storybook/addon-actions'
 import Checkbox from '.'
-import { Story } from '../../_lib/compat'
+import { Meta, StoryObj } from '@storybook/react'
 
 export default {
   title: 'Checkbox',
   component: Checkbox,
-}
-
-type Props = {
-  checked: boolean
-  defaultChecked: boolean
-  disabled: boolean
-  readonly: boolean
-  className?: string
-  invalid: boolean
-}
-
-export const Labelled: Story<Props> = (props) => {
-  return (
-    <div>
-      <div style={{ marginBottom: '1em' }}>
-        <Checkbox
-          {...props}
-          name="labelled"
-          label="label"
-          onBlur={action('blur')}
-          onClick={action('click')}
-          onChange={action('change')}
-          onFocus={action('focus')}
-        >
-          同意する
-        </Checkbox>
-      </div>
+} as Meta<typeof Checkbox>
 
+export const Labelled: StoryObj<typeof Checkbox> = {
+  args: {
+    checked: false,
+    defaultChecked: false,
+    disabled: false,
+    readonly: false,
+    invalid: false,
+  },
+  render: (props) => {
+    return (
       <div>
-        <Checkbox
-          {...props}
-          name="labelled"
-          label="label"
-          onBlur={action('blur')}
-          onClick={action('click')}
-          onChange={action('change')}
-          onFocus={action('focus')}
-        >
-          <span style={{ width: 200, display: 'block' }}>
-            同意する同意する同意する同意する同意する同意する同意する同意する同意する同意する同意する同意する同意する
-          </span>
-        </Checkbox>
-      </div>
-    </div>
-  )
-}
+        <div style={{ marginBottom: '1em' }}>
+          <Checkbox
+            {...props}
+            name="labelled"
+            label="label"
+            onBlur={action('blur')}
+            onClick={action('click')}
+            onChange={action('change')}
+            onFocus={action('focus')}
+          >
+            同意する
+          </Checkbox>
+        </div>
 
-Labelled.args = {
-  checked: false,
-  defaultChecked: false,
-  disabled: false,
-  readonly: false,
-  invalid: false,
+        <div>
+          <Checkbox
+            {...props}
+            name="labelled"
+            label="label"
+            onBlur={action('blur')}
+            onClick={action('click')}
+            onChange={action('change')}
+            onFocus={action('focus')}
+          >
+            <span style={{ width: 200, display: 'block' }}>
+              同意する同意する同意する同意する同意する同意する同意する同意する同意する同意する同意する同意する同意する
+            </span>
+          </Checkbox>
+        </div>
+      </div>
+    )
+  },
 }
 
-export const Unlabelled: Story<Props> = (props) => {
-  return (
-    <div>
+export const Invalid: StoryObj<typeof Checkbox> = {
+  args: {
+    checked: false,
+    defaultChecked: false,
+    disabled: false,
+    readonly: false,
+  },
+  render: (props) => {
+    return (
       <Checkbox
         {...props}
-        name="unlabelled"
+        name="labelled"
         label="label"
+        invalid
         onBlur={action('blur')}
         onClick={action('click')}
         onChange={action('change')}
         onFocus={action('focus')}
-      />
-    </div>
-  )
+      >
+        同意する
+      </Checkbox>
+    )
+  },
 }
 
-Unlabelled.args = {
-  checked: false,
-  defaultChecked: false,
-  disabled: false,
-  readonly: false,
-  invalid: false,
+export const Unlabelled: StoryObj<typeof Checkbox> = {
+  args: {
+    checked: false,
+    defaultChecked: false,
+    disabled: false,
+    readonly: false,
+    invalid: false,
+  },
+  render: (props) => {
+    return (
+      <div>
+        <Checkbox
+          {...props}
+          name="unlabelled"
+          label="label"
+          onBlur={action('blur')}
+          onClick={action('click')}
+          onChange={action('change')}
+          onFocus={action('focus')}
+        />
+      </div>
+    )
+  },
 }