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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@charcoal-ui/react",
-  "version": "4.0.0-beta.2",
+  "version": "4.0.0-beta.4",
   "license": "Apache-2.0",
   "main": "./dist/index.cjs.js",
   "module": "./dist/index.esm.js",
@@ -26,27 +26,23 @@
     "clean": "rimraf dist .tsbuildinfo"
   },
   "devDependencies": {
-    "@charcoal-ui/esbuild-plugin-styled-components": "^4.0.0-beta.2",
+    "@charcoal-ui/esbuild-plugin-styled-components": "^4.0.0-beta.4",
     "@react-types/switch": "^3.1.2",
-    "@storybook/addon-actions": "^7.4.1",
-    "@storybook/addon-knobs": "^7.0.2",
-    "@storybook/addons": "^7.4.1",
-    "@storybook/api": "^7.4.1",
-    "@storybook/components": "^7.4.1",
-    "@storybook/core-events": "^7.4.1",
-    "@storybook/react": "^7.4.1",
-    "@storybook/react-webpack5": "^7.4.1",
-    "@storybook/theming": "^7.4.1",
+    "@storybook/addon-actions": "^8.0.5",
+    "@storybook/react": "^8.0.5",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",
+    "@types/glob": "^8.1.0",
     "@types/jest": "^27.4.0",
     "@types/jest-axe": "^3.5.3",
     "@types/react": "^17.0.38",
     "@types/react-dom": "^17.0.11",
     "@types/react-router-dom": "^5.3.3",
+    "@types/react-test-renderer": "^18.3.0",
     "@types/styled-components": "^5.1.21",
     "@types/warning": "^3.0.0",
+    "autoprefixer": "^10.4.19",
     "jest-axe": "^5.0.1",
     "jest-styled-components": "^7.0.8",
     "npm-run-all": "^4.1.5",
@@ -54,16 +50,16 @@
     "react-dom": "^17.0.2",
     "react-router-dom": "^6.2.1",
     "rimraf": "^3.0.2",
-    "storybook": "^7.4.1",
     "styled-components": "^5.3.3",
     "tsup": "^6.5.0",
     "typescript": "^4.9.5"
   },
   "dependencies": {
-    "@charcoal-ui/icons": "^4.0.0-beta.2",
-    "@charcoal-ui/styled": "^4.0.0-beta.2",
-    "@charcoal-ui/theme": "^4.0.0-beta.2",
-    "@charcoal-ui/utils": "^4.0.0-beta.2",
+    "@charcoal-ui/foundation": "^4.0.0-beta.4",
+    "@charcoal-ui/icons": "^4.0.0-beta.4",
+    "@charcoal-ui/styled": "^4.0.0-beta.4",
+    "@charcoal-ui/theme": "^4.0.0-beta.4",
+    "@charcoal-ui/utils": "^4.0.0-beta.4",
     "@react-aria/button": "^3.9.1",
     "@react-aria/checkbox": "^3.13.0",
     "@react-aria/dialog": "^3.5.10",
@@ -75,6 +71,7 @@
     "@react-aria/textfield": "^3.14.1",
     "@react-aria/utils": "^3.23.0",
     "@react-aria/visually-hidden": "^3.8.8",
+    "@react-stately/radio": "^3.10.2",
     "polished": "^4.1.4",
     "react-spring": "^9.0.0",
     "react-stately": "^3.26.0",
@@ -96,5 +93,5 @@
     "url": "https://github.com/pixiv/charcoal.git",
     "directory": "packages/react"
   },
-  "gitHead": "21a8c3ad738b69cfc849a3a7ec75dbae71eb9e97"
+  "gitHead": "788f785fe5cc2bfbf784d10cd603eb027b430c92"
 }

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

@@ -1,18 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`Storybook Tests Button Active 1`] = `
-<div
-  data-dark={false}
->
-  <button
-    className="charcoal-button"
-    data-active={true}
-  >
-    Button
-  </button>
-</div>
-`;
-
 exports[`Storybook Tests Button Danger 1`] = `
 <div
   data-dark={false}
@@ -21,7 +8,7 @@ exports[`Storybook Tests Button Danger 1`] = `
     className="charcoal-button"
     data-variant="Danger"
   >
-    Button
+    Danger
   </button>
 </div>
 `;
@@ -46,12 +33,12 @@ exports[`Storybook Tests Button Disabled 1`] = `
     className="charcoal-button"
     disabled={true}
   >
-    Button
+    Disabled
   </button>
 </div>
 `;
 
-exports[`Storybook Tests Button Fixed 1`] = `
+exports[`Storybook Tests Button FullWidth 1`] = `
 <div
   data-dark={false}
 >
@@ -59,33 +46,20 @@ exports[`Storybook Tests Button Fixed 1`] = `
     className="charcoal-button"
     data-full-width={true}
   >
-    Button
+    Full width
   </button>
 </div>
 `;
 
-exports[`Storybook Tests Button Focus 1`] = `
+exports[`Storybook Tests Button IsActive 1`] = `
 <div
   data-dark={false}
 >
   <button
     className="charcoal-button"
-    onMouseOver={[Function]}
-  >
-    Mouse over to focus
-  </button>
-</div>
-`;
-
-exports[`Storybook Tests Button Link 1`] = `
-<div
-  data-dark={false}
->
-  <button
-    className="charcoal-button"
-    to="#"
+    data-active={true}
   >
-    Button
+    Active
   </button>
 </div>
 `;
@@ -98,19 +72,7 @@ exports[`Storybook Tests Button Navigation 1`] = `
     className="charcoal-button"
     data-variant="Navigation"
   >
-    Button
-  </button>
-</div>
-`;
-
-exports[`Storybook Tests Button Nihongo 1`] = `
-<div
-  data-dark={false}
->
-  <button
-    className="charcoal-button"
-  >
-    日本語だよ
+    Navigation
   </button>
 </div>
 `;
@@ -123,7 +85,7 @@ exports[`Storybook Tests Button Overlay 1`] = `
     className="charcoal-button"
     data-variant="Overlay"
   >
-    Button
+    Overlay
   </button>
 </div>
 `;
@@ -136,7 +98,7 @@ exports[`Storybook Tests Button Primary 1`] = `
     className="charcoal-button"
     data-variant="Primary"
   >
-    Button
+    Primary
   </button>
 </div>
 `;
@@ -149,7 +111,7 @@ exports[`Storybook Tests Button Small 1`] = `
     className="charcoal-button"
     data-size="S"
   >
-    Button
+    Small
   </button>
 </div>
 `;

package/src/components/Button/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,11 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`<Button /> componentAs props are passed to the data-as attribute 1`] = `
+<a
+  className="charcoal-button"
+  data-as="componentAs"
+  data-full-width={true}
+  href="/"
+  target="_blank"
+/>
+`;

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

@@ -1,96 +1,43 @@
-import { useRef } from 'react'
-import { ClickableElement } from '../Clickable'
 import Button from '.'
 import { Meta, StoryObj } from '@storybook/react'
 
 export default {
   title: 'Button',
   component: Button,
-  argTypes: {
-    variant: {
-      control: {
-        type: 'inline-radio',
-        options: ['Primary', 'Default', 'Overlay', 'Danger', 'Navigation'],
-      },
-    },
-    size: {
-      control: {
-        type: 'inline-radio',
-        options: ['S', 'M'],
-      },
-    },
-  },
-  render: (args) => <Button {...args}>Button</Button>,
 } as Meta<typeof Button>
 
-export const Default: StoryObj<typeof Button> = {}
+export const Default: StoryObj<typeof Button> = {
+  render: (args) => <Button {...args}>Button</Button>,
+}
 
 export const Primary: StoryObj<typeof Button> = {
-  args: {
-    variant: 'Primary',
-  },
+  render: () => <Button variant="Primary">Primary</Button>,
 }
 
 export const Navigation: StoryObj<typeof Button> = {
-  args: {
-    variant: 'Navigation',
-  },
+  render: () => <Button variant="Navigation">Navigation</Button>,
 }
 
 export const Overlay: StoryObj<typeof Button> = {
-  args: {
-    variant: 'Overlay',
-  },
+  render: () => <Button variant="Overlay">Overlay</Button>,
 }
 
 export const Danger: StoryObj<typeof Button> = {
-  args: {
-    variant: 'Danger',
-  },
+  render: () => <Button variant="Danger">Danger</Button>,
 }
 
 export const Small: StoryObj<typeof Button> = {
-  args: {
-    size: 'S',
-  },
+  render: () => <Button size="S">Small</Button>,
 }
 
-export const Fixed: StoryObj<typeof Button> = {
-  args: {
-    fullWidth: true,
-  },
+export const FullWidth: StoryObj<typeof Button> = {
+  render: () => <Button fullWidth>Full width</Button>,
 }
 
 export const Disabled: StoryObj<typeof Button> = {
-  args: {
-    disabled: true,
-  },
-}
-
-export const Active: StoryObj<typeof Button> = {
-  args: {
-    isActive: true,
-  },
-}
-
-export const Link: StoryObj<typeof Button> = {
-  args: {
-    to: '#',
-  },
-}
-
-export const Nihongo: StoryObj<typeof Button> = {
-  render: (args) => <Button {...args}>日本語だよ</Button>,
+  render: () => <Button disabled>Disabled</Button>,
 }
 
-export const Focus: StoryObj<typeof Button> = {
-  render: function Render(args) {
-    const ref = useRef<ClickableElement>(null)
-    const focus = () => ref.current?.focus()
-    return (
-      <Button {...args} onMouseOver={focus} ref={ref}>
-        Mouse over to focus
-      </Button>
-    )
-  },
+export const IsActive: StoryObj<typeof Button> = {
+  render: () => <Button isActive>Active</Button>,
 }

package/src/components/Button/index.test.tsx

@@ -0,0 +1,32 @@
+import 'jest-styled-components'
+
+import renderer from 'react-test-renderer'
+import Button from '.'
+
+function Link({
+  as,
+  children,
+  ...props
+}: { as: string; children: React.ReactNode } & React.ComponentProps<'a'>) {
+  return (
+    <a {...props} data-as={as}>
+      {children}
+    </a>
+  )
+}
+
+describe('<Button />', () => {
+  test('componentAs props are passed to the data-as attribute', () => {
+    expect(
+      renderer.create(
+        <Button
+          href="/"
+          target="_blank"
+          fullWidth
+          as={Link}
+          componentAs="componentAs"
+        />
+      )
+    ).toMatchSnapshot()
+  })
+})

package/src/components/Button/index.tsx

@@ -14,8 +14,16 @@ export type ButtonProps<T extends React.ElementType = 'button'> = {
   size?: Size
   fullWidth?: boolean
   isActive?: boolean
+  /**
+   * The component used for root element.
+   * @type T extends React.ElementType = 'button'
+   */
   as?: T
-} & Omit<React.ComponentPropsWithRef<T>, 'children'>
+  /**
+   * The as property of the component specified by the Button component's as attribute.
+   */
+  componentAs?: React.ComponentPropsWithRef<T>['as']
+} & Omit<React.ComponentPropsWithRef<T>, 'children' | 'as'>
 
 const Button = forwardRef(function Button<T extends React.ElementType>(
   {
@@ -25,6 +33,7 @@ const Button = forwardRef(function Button<T extends React.ElementType>(
     className,
     as,
     isActive,
+    componentAs,
     ...props
   }: ButtonProps<T>,
   ref: ForwardedRef<HTMLButtonElement>
@@ -34,6 +43,7 @@ const Button = forwardRef(function Button<T extends React.ElementType>(
   return (
     <Component
       {...props}
+      as={componentAs}
       className={classNames}
       data-variant={variant}
       data-size={size}