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

package/src/components/Switch/SwitchInput/index.tsx

@@ -0,0 +1,40 @@
+import './index.css'
+
+import { forwardRef, useCallback } from 'react'
+import { useClassNames } from '../../../_lib/useClassNames'
+
+export type CharcoalSwitchProps = {
+  onChange?: (checked: boolean) => void
+}
+
+type InputProps = React.HTMLProps<HTMLInputElement>
+
+export type SwitchInputProps = CharcoalSwitchProps &
+  Omit<InputProps, keyof CharcoalSwitchProps | 'ref'>
+
+const SwitchInput = forwardRef<
+  HTMLInputElement,
+  Omit<SwitchInputProps, 'children'>
+>(function SwitchInput({ onChange, className, ...props }, ref) {
+  const handleChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      const el = e.currentTarget
+      onChange?.(el.checked)
+    },
+    [onChange]
+  )
+  props.children
+
+  const classNames = useClassNames('charcoal-switch-input', className)
+  return (
+    <input
+      ref={ref}
+      className={classNames}
+      type="checkbox"
+      onChange={handleChange}
+      {...props}
+    />
+  )
+})
+
+export default SwitchInput

package/src/components/Switch/SwitchWithLabel.tsx

@@ -0,0 +1,24 @@
+import * as React from 'react'
+import { useClassNames } from '../../_lib/useClassNames'
+
+export const SwitchWithLabel = React.memo(function SwitchWithLabel({
+  children,
+  className,
+  disabled,
+  id,
+  input,
+}: {
+  children: React.ReactNode
+  className?: string
+  disabled?: boolean
+  id?: string
+  input: React.ReactNode
+}) {
+  const classNames = useClassNames('charcoal-switch__label', className)
+  return (
+    <label htmlFor={id} className={classNames} aria-disabled={disabled}>
+      {input}
+      <div className="charcoal-switch__label_div">{children}</div>
+    </label>
+  )
+})

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

@@ -1,440 +1,64 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 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 {
-  -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);
-}
-
-.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="checked"
-        checked={true}
-        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>
+    <input
+      checked={true}
+      className="charcoal-switch-input"
+      id="test-id"
+      label="checked"
+      name="name"
+      onChange={[Function]}
+      role="switch"
+      type="checkbox"
+    />
   </div>
 </div>
 `;
 
 exports[`Storybook Tests Switch Default 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 {
-  -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);
-}
-
-.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
-        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>
+    <input
+      checked={false}
+      className="charcoal-switch-input"
+      id="test-id"
+      name="name"
+      onChange={[Function]}
+      role="switch"
+      type="checkbox"
+    />
   </div>
 </div>
 `;
 
 exports[`Storybook Tests Switch Disabled 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;
-}
-
-.c2 {
-  font-size: 14px;
-  line-height: 22px;
-  color: var(--charcoal-text2);
-  margin-left: 4px;
-}
-
-.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);
-}
-
-.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
       aria-disabled={true}
-      className="c0"
+      className="charcoal-switch__label"
+      htmlFor="test-id"
     >
       <input
         checked={false}
-        className="c1"
+        className="charcoal-switch-input"
         disabled={true}
+        id="test-id"
         name="disabled"
         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"
       />
       <div
-        className="c2"
+        className="charcoal-switch__label_div"
       >
         Label
       </div>
@@ -444,152 +68,25 @@ exports[`Storybook Tests Switch Disabled 1`] = `
 `;
 
 exports[`Storybook Tests Switch Label 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;
-}
-
-.c2 {
-  font-size: 14px;
-  line-height: 22px;
-  color: var(--charcoal-text2);
-  margin-left: 4px;
-}
-
-.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);
-}
-
-.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"
+      className="charcoal-switch__label"
+      htmlFor="test-id"
     >
       <input
         checked={false}
-        className="c1"
-        disabled={false}
+        className="charcoal-switch-input"
+        id="test-id"
         name="label"
         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"
       />
       <div
-        className="c2"
+        className="charcoal-switch__label_div"
       >
         Label
       </div>

package/src/components/Switch/index.css

@@ -0,0 +1,23 @@
+.charcoal-switch__label {
+  display: inline-grid;
+  grid-template-columns: auto 1fr;
+  align-items: center;
+  cursor: pointer;
+  outline: 0;
+  gap: 4px;
+}
+
+.charcoal-switch__label[aria-disabled='true'] {
+  opacity: 0.32;
+  cursor: default;
+}
+
+.charcoal-switch__label[aria-disabled='true'] > input {
+  opacity: 1;
+}
+
+.charcoal-switch__label_div {
+  font-size: 14px;
+  line-height: 22px;
+  color: var(--charcoal-text2);
+}

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

@@ -11,6 +11,11 @@ export default {
 } as Meta<typeof Switch>
 
 export const Default: StoryObj<typeof Switch> = {
+  argTypes: {
+    checked: { type: 'boolean' },
+    children: { type: 'string' },
+    disabled: { type: 'boolean' },
+  },
   render: function Render(args) {
     const [checked, setChecked] = useState(false)
     return (