@charcoal-ui/react 4.0.0-beta.4 → 4.0.0-beta.6

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

@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests Checkbox Checked 1`] = `
+exports[`Storybook Tests react/Checkbox Checked 1`] = `
 <div
   data-dark={false}
 >
@@ -8,66 +8,36 @@ exports[`Storybook Tests Checkbox Checked 1`] = `
     className="charcoal-checkbox__label"
     htmlFor="test-id"
   >
+    <input
+      checked={true}
+      className="charcoal-checkbox-input"
+      id="test-id"
+      onChange={[Function]}
+      type="checkbox"
+    />
     <div
-      className="charcoal-checkbox-input__root"
-    >
-      <input
-        checked={true}
-        className="charcoal-checkbox-input__input"
-        id="test-id"
-        onChange={[Function]}
-        type="checkbox"
-      />
-      <div
-        aria-hidden={true}
-        className="charcoal-checkbox-input__overlay"
-        data-checked={true}
-      >
-        <pixiv-icon
-          name="24/Check"
-          unsafe-non-guideline-scale={0.6666666666666666}
-        />
-      </div>
-    </div>
-    <div
-      className="charcoal-checkbox__text"
+      className="charcoal-checkbox__label_div"
     >
-      Accelerate creativity.
+      Checked
     </div>
   </label>
 </div>
 `;
 
-exports[`Storybook Tests Checkbox Default 1`] = `
+exports[`Storybook Tests react/Checkbox Default 1`] = `
 <div
   data-dark={false}
 >
-  <div
-    className="charcoal-checkbox-input__root"
-  >
-    <input
-      className="charcoal-checkbox-input__input"
-      id="test-id"
-      onBlur={[Function]}
-      onChange={[Function]}
-      onClick={[Function]}
-      onFocus={[Function]}
-      type="checkbox"
-    />
-    <div
-      aria-hidden={true}
-      className="charcoal-checkbox-input__overlay"
-    >
-      <pixiv-icon
-        name="24/Check"
-        unsafe-non-guideline-scale={0.6666666666666666}
-      />
-    </div>
-  </div>
+  <input
+    className="charcoal-checkbox-input"
+    id="test-id"
+    onChange={[Function]}
+    type="checkbox"
+  />
 </div>
 `;
 
-exports[`Storybook Tests Checkbox Disabled 1`] = `
+exports[`Storybook Tests react/Checkbox Disabled 1`] = `
 <div
   data-dark={false}
 >
@@ -76,36 +46,23 @@ exports[`Storybook Tests Checkbox Disabled 1`] = `
     className="charcoal-checkbox__label"
     htmlFor="test-id"
   >
+    <input
+      className="charcoal-checkbox-input"
+      disabled={true}
+      id="test-id"
+      onChange={[Function]}
+      type="checkbox"
+    />
     <div
-      className="charcoal-checkbox-input__root"
-    >
-      <input
-        className="charcoal-checkbox-input__input"
-        disabled={true}
-        id="test-id"
-        onChange={[Function]}
-        type="checkbox"
-      />
-      <div
-        aria-hidden={true}
-        className="charcoal-checkbox-input__overlay"
-      >
-        <pixiv-icon
-          name="24/Check"
-          unsafe-non-guideline-scale={0.6666666666666666}
-        />
-      </div>
-    </div>
-    <div
-      className="charcoal-checkbox__text"
+      className="charcoal-checkbox__label_div"
     >
-      Accelerate creativity.
+      Disabled
     </div>
   </label>
 </div>
 `;
 
-exports[`Storybook Tests Checkbox Invalid 1`] = `
+exports[`Storybook Tests react/Checkbox Invalid 1`] = `
 <div
   data-dark={false}
 >
@@ -113,37 +70,24 @@ exports[`Storybook Tests Checkbox Invalid 1`] = `
     className="charcoal-checkbox__label"
     htmlFor="test-id"
   >
+    <input
+      aria-invalid={true}
+      className="charcoal-checkbox-input"
+      id="test-id"
+      name="labelled"
+      onChange={[Function]}
+      type="checkbox"
+    />
     <div
-      className="charcoal-checkbox-input__root"
-    >
-      <input
-        aria-invalid={true}
-        className="charcoal-checkbox-input__input"
-        id="test-id"
-        name="labelled"
-        onChange={[Function]}
-        type="checkbox"
-      />
-      <div
-        aria-hidden={true}
-        className="charcoal-checkbox-input__overlay"
-      >
-        <pixiv-icon
-          name="24/Check"
-          unsafe-non-guideline-scale={0.6666666666666666}
-        />
-      </div>
-    </div>
-    <div
-      className="charcoal-checkbox__text"
+      className="charcoal-checkbox__label_div"
     >
-      Accelerate creativity.
+      Invalid
     </div>
   </label>
 </div>
 `;
 
-exports[`Storybook Tests Checkbox Label 1`] = `
+exports[`Storybook Tests react/Checkbox Label 1`] = `
 <div
   data-dark={false}
 >
@@ -151,35 +95,22 @@ exports[`Storybook Tests Checkbox Label 1`] = `
     className="charcoal-checkbox__label"
     htmlFor="test-id"
   >
+    <input
+      className="charcoal-checkbox-input"
+      id="test-id"
+      onChange={[Function]}
+      type="checkbox"
+    />
     <div
-      className="charcoal-checkbox-input__root"
-    >
-      <input
-        className="charcoal-checkbox-input__input"
-        id="test-id"
-        onChange={[Function]}
-        type="checkbox"
-      />
-      <div
-        aria-hidden={true}
-        className="charcoal-checkbox-input__overlay"
-      >
-        <pixiv-icon
-          name="24/Check"
-          unsafe-non-guideline-scale={0.6666666666666666}
-        />
-      </div>
-    </div>
-    <div
-      className="charcoal-checkbox__text"
+      className="charcoal-checkbox__label_div"
     >
-      Accelerate creativity.
+      Checkbox
     </div>
   </label>
 </div>
 `;
 
-exports[`Storybook Tests Checkbox ReadOnly 1`] = `
+exports[`Storybook Tests react/Checkbox ReadOnly 1`] = `
 <div
   data-dark={false}
 >
@@ -187,31 +118,19 @@ exports[`Storybook Tests Checkbox ReadOnly 1`] = `
     className="charcoal-checkbox__label"
     htmlFor="test-id"
   >
+    <input
+      checked={true}
+      className="charcoal-checkbox-input"
+      id="test-id"
+      name="labelled"
+      onChange={[Function]}
+      readOnly={true}
+      type="checkbox"
+    />
     <div
-      className="charcoal-checkbox-input__root"
-    >
-      <input
-        className="charcoal-checkbox-input__input"
-        id="test-id"
-        name="labelled"
-        onChange={[Function]}
-        readOnly={true}
-        type="checkbox"
-      />
-      <div
-        aria-hidden={true}
-        className="charcoal-checkbox-input__overlay"
-      >
-        <pixiv-icon
-          name="24/Check"
-          unsafe-non-guideline-scale={0.6666666666666666}
-        />
-      </div>
-    </div>
-    <div
-      className="charcoal-checkbox__text"
+      className="charcoal-checkbox__label_div"
     >
-      Accelerate creativity.
+      ReadOnly
     </div>
   </label>
 </div>

package/src/components/Checkbox/index.css

@@ -2,6 +2,7 @@
   position: relative;
   cursor: pointer;
   display: flex;
+  gap: 4px;
 }
 
 .charcoal-checkbox__label[aria-disabled='true'] {
@@ -13,9 +14,8 @@
   opacity: 1;
 }
 
-.charcoal-checkbox__text {
+.charcoal-checkbox__label_div {
   color: var(--charcoal-text2);
   font-size: 14px;
   line-height: 20px;
-  margin-left: 4px;
 }

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

@@ -1,29 +1,34 @@
 import Checkbox from '.'
 import { Meta, StoryObj } from '@storybook/react'
 import { useCallback, useState } from 'react'
-import { action } from '@storybook/addon-actions'
 
 export default {
-  title: 'Checkbox',
+  title: 'react/Checkbox',
   component: Checkbox,
+  parameters: {
+    layout: 'centered',
+  },
 } as Meta<typeof Checkbox>
 
 export const Default: StoryObj<typeof Checkbox> = {
+  argTypes: {
+    checked: { type: 'boolean' },
+    children: { type: 'string' },
+    disabled: { type: 'boolean' },
+    invalid: { type: 'boolean' },
+    readOnly: { type: 'boolean' },
+  },
   render: function Render(props) {
     const [checked, setChecked] = useState(props.checked)
     const handleChange = useCallback((isSelected: boolean) => {
       setChecked(isSelected)
-      action('change')(isSelected)
     }, [])
 
     return (
       <Checkbox
         {...props}
-        checked={checked ?? props.checked}
-        onBlur={action('blur')}
-        onClick={action('click')}
+        checked={props.checked ?? checked}
         onChange={handleChange}
-        onFocus={action('focus')}
       />
     )
   },
@@ -31,27 +36,27 @@ export const Default: StoryObj<typeof Checkbox> = {
 
 export const Label: StoryObj<typeof Checkbox> = {
   render: () => {
-    return <Checkbox>Accelerate creativity.</Checkbox>
+    return <Checkbox>Checkbox</Checkbox>
   },
 }
 
 export const Checked: StoryObj<typeof Checkbox> = {
   render: () => {
-    return <Checkbox checked>Accelerate creativity.</Checkbox>
+    return <Checkbox checked>Checked</Checkbox>
   },
 }
 
 export const Disabled: StoryObj<typeof Checkbox> = {
   render: () => {
-    return <Checkbox disabled>Accelerate creativity.</Checkbox>
+    return <Checkbox disabled>Disabled</Checkbox>
   },
 }
 
 export const ReadOnly: StoryObj<typeof Checkbox> = {
   render: () => {
     return (
-      <Checkbox name="labelled" readOnly>
-        Accelerate creativity.
+      <Checkbox checked name="labelled" readOnly>
+        ReadOnly
       </Checkbox>
     )
   },
@@ -61,7 +66,7 @@ export const Invalid: StoryObj<typeof Checkbox> = {
   render: () => {
     return (
       <Checkbox name="labelled" invalid>
-        Accelerate creativity.
+        Invalid
       </Checkbox>
     )
   },

package/src/components/Checkbox/index.tsx

@@ -1,29 +1,37 @@
 import './index.css'
 
-import React, { forwardRef, memo } from 'react'
+import { forwardRef, memo } from 'react'
 import { useId } from '@react-aria/utils'
-import CheckboxInput, { CheckboxInputProps } from '../CheckboxInput'
-import { useClassNames } from '../../_lib/useClassNames'
+import CheckboxInput, { CheckboxInputProps } from './CheckboxInput'
+import { CheckboxWithLabel } from './CheckboxWithLabel'
 
-export type CheckboxProps = CheckboxInputProps & {
-  children?: React.ReactNode
-}
+export type CheckboxProps = CheckboxInputProps
 
-const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
-  function CheckboxInner({ disabled, className, id, children, ...props }, ref) {
-    const classNames = useClassNames('charcoal-checkbox__label', className)
+const Checkbox = forwardRef<HTMLInputElement, CheckboxInputProps>(
+  function Checkbox({ disabled, className, id, children, ...props }, ref) {
     const htmlId = useId(id)
+    const noChildren = children === undefined
     const input = (
-      <CheckboxInput {...props} id={htmlId} disabled={disabled} ref={ref} />
+      <CheckboxInput
+        {...props}
+        className={noChildren ? className : undefined}
+        disabled={disabled}
+        id={htmlId}
+        ref={ref}
+      />
     )
-    if (children === undefined) {
+    if (noChildren) {
       return input
     }
     return (
-      <label htmlFor={htmlId} aria-disabled={disabled} className={classNames}>
-        {input}
-        <div className="charcoal-checkbox__text">{children}</div>
-      </label>
+      <CheckboxWithLabel
+        className={className}
+        disabled={disabled}
+        id={htmlId}
+        input={input}
+      >
+        {children}
+      </CheckboxWithLabel>
     )
   }
 )

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

@@ -1,49 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests Clickable Button 1`] = `
-.c0 {
-  cursor: pointer;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: transparent;
-  padding: 0;
-  border-style: none;
-  outline: none;
-  color: inherit;
-  text-rendering: inherit;
-  -webkit-letter-spacing: inherit;
-  -moz-letter-spacing: inherit;
-  -ms-letter-spacing: inherit;
-  letter-spacing: inherit;
-  word-spacing: inherit;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font: inherit;
-  margin: 0;
-  overflow: visible;
-  text-transform: none;
-}
-
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
-.c0:focus {
-  outline: none;
-}
-
-.c0::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
+exports[`Storybook Tests react/Clickable Button 1`] = `
 <div
   data-dark={false}
 >
   <button
-    className="c0"
+    className="charcoal-clickable"
     onClick={[Function]}
   >
     button
@@ -51,50 +13,12 @@ exports[`Storybook Tests Clickable Button 1`] = `
 </div>
 `;
 
-exports[`Storybook Tests Clickable Link 1`] = `
-.c0 {
-  cursor: pointer;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  background: transparent;
-  padding: 0;
-  border-style: none;
-  outline: none;
-  color: inherit;
-  text-rendering: inherit;
-  -webkit-letter-spacing: inherit;
-  -moz-letter-spacing: inherit;
-  -ms-letter-spacing: inherit;
-  letter-spacing: inherit;
-  word-spacing: inherit;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  font: inherit;
-  margin: 0;
-  overflow: visible;
-  text-transform: none;
-}
-
-.c0:disabled,
-.c0[aria-disabled]:not([aria-disabled=false]) {
-  cursor: default;
-}
-
-.c0:focus {
-  outline: none;
-}
-
-.c0::-moz-focus-inner {
-  border-style: none;
-  padding: 0;
-}
-
+exports[`Storybook Tests react/Clickable Link 1`] = `
 <div
   data-dark={false}
 >
   <a
-    className="c0"
+    className="charcoal-clickable"
     href="#"
     onClick={[Function]}
   >

package/src/components/Clickable/index.css

@@ -0,0 +1,41 @@
+.charcoal-clickable {
+  cursor: pointer;
+
+  /* Reset button appearance */
+  appearance: none;
+  background: transparent;
+  padding: 0;
+  border-style: none;
+  outline: none;
+  color: inherit;
+  text-rendering: inherit;
+  letter-spacing: inherit;
+  word-spacing: inherit;
+  text-decoration: none;
+
+  /* Change the font styles in all browsers. */
+  font: inherit;
+
+  /* Remove the margin in Firefox and Safari. */
+  margin: 0;
+
+  /* Show the overflow in Edge. */
+  overflow: visible;
+
+  /* Remove the inheritance of text transform in Firefox. */
+  text-transform: none;
+}
+
+.charcoal-clickable:disabled,
+.charcoal-clickable[aria-disabled]:not([aria-disabled='false']) {
+  cursor: default;
+}
+
+.charcoal-clickable:focus {
+  outline: none;
+}
+
+.charcoal-clickable::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}

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

@@ -3,7 +3,7 @@ import Clickable from '.'
 import { Meta, StoryObj } from '@storybook/react'
 
 export default {
-  title: 'Clickable',
+  title: 'react/Clickable',
   component: Clickable,
 } as Meta<typeof Clickable>
 
@@ -13,7 +13,7 @@ export const Button: StoryObj = {
 
 export const Link: StoryObj = {
   render: () => (
-    <Clickable to="#" onClick={action('click')}>
+    <Clickable as="a" href="#" onClick={action('click')}>
       link
     </Clickable>
   ),