feat(Checkbox): add component (#1405)

* feat(Checkbox): add component

* add checkmark icon

* add behaviour import

* rename files

* revert change in example

* remove custom icon, use `accept`

* add changelog entry

* and conformance test and `onChange` handler

* add onFocus handler

* update variables

Author: layershifter

CHANGELOG.md

@@ -41,6 +41,7 @@ This project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.htm
 - Add 'lightning' icon to Teams theme @notandrew ([#1385](https://github.com/stardust-ui/react/pull/1385))
 - Add automatic positioning inside viewport for `Menu` with submenus @Bugaa92 ([#1384](https://github.com/stardust-ui/react/pull/1384))
 - Add `align`, `position`, `offset` props for `Dropdown` component @Bugaa92 ([#1312](https://github.com/stardust-ui/react/pull/1312))
+- Add `Checkbox` component and `toggle` prop for it @layershifter ([#1405](https://github.com/stardust-ui/react/pull/1405))
 
 ### Documentation
 - Accessibility: improve introduction section @jurokapsiar ([#1368](https://github.com/stardust-ui/react/pull/1368))

docs/src/components/ExampleSnippet/renderElementToJSX.ts

@@ -14,7 +14,7 @@ const renderElementToJSX = (element: React.ReactNode, triggerErrorOnRenderFn: bo
       (typeof element.type === 'function' ? 'NoDisplayName' : element.type),
     showDefaultProps: false,
     showFunctions: true,
-    filterProps: ['accessibility'],
+    filterProps: ['accessibility', 'onClick', 'onChange'],
     functionValue: () => (renderHasFunction = true),
   })
 

docs/src/examples/components/Checkbox/Playground.tsx

@@ -0,0 +1,26 @@
+import { useBooleanKnob, useStringKnob } from '@stardust-ui/docs-components'
+import { Checkbox } from '@stardust-ui/react'
+import * as React from 'react'
+
+const CheckboxPlayground: React.FunctionComponent = () => {
+  const [checked, setChecked] = useBooleanKnob({ name: 'checked' })
+  const [disabled] = useBooleanKnob({ name: 'disabled' })
+  const [toggle] = useBooleanKnob({ name: 'toggle' })
+
+  const [label] = useStringKnob({
+    name: 'label',
+    initialValue: 'Make profile visible',
+  })
+
+  return (
+    <Checkbox
+      checked={checked}
+      disabled={disabled}
+      label={label}
+      toggle={toggle}
+      onChange={(e, data) => setChecked(data.checked)}
+    />
+  )
+}
+
+export default CheckboxPlayground

docs/src/examples/components/Checkbox/Types/CheckboxExample.shorthand.steps.ts

@@ -0,0 +1,8 @@
+import { Checkbox } from '@stardust-ui/react'
+
+export const config: ScreenerTestsConfig = {
+  themes: ['base', 'teams'],
+  steps: [builder => builder.click(`.${Checkbox.className}`).snapshot('Can be checked')],
+}
+
+export default config

docs/src/examples/components/Checkbox/Types/CheckboxExample.shorthand.tsx

@@ -0,0 +1,6 @@
+import { Checkbox } from '@stardust-ui/react'
+import * as React from 'react'
+
+const CheckboxExample = () => <Checkbox label="Make my profile visible" />
+
+export default CheckboxExample

docs/src/examples/components/Checkbox/Types/CheckboxExampleDisabled.shorthand.tsx

@@ -0,0 +1,11 @@
+import { Checkbox } from '@stardust-ui/react'
+import * as React from 'react'
+
+const CheckboxExampleDisabled = () => (
+  <>
+    <Checkbox disabled label="Disabled" />
+    <Checkbox disabled checked label="Disabled & Checked" />
+  </>
+)
+
+export default CheckboxExampleDisabled

docs/src/examples/components/Checkbox/Types/CheckboxExampleToggle.shorthand.steps.ts

@@ -0,0 +1,8 @@
+import { Checkbox } from '@stardust-ui/react'
+
+export const config: ScreenerTestsConfig = {
+  themes: ['base', 'teams'],
+  steps: [builder => builder.click(`.${Checkbox.className}`).snapshot('Can be checked')],
+}
+
+export default config

docs/src/examples/components/Checkbox/Types/CheckboxExampleToggle.shorthand.tsx

@@ -0,0 +1,11 @@
+import { Checkbox } from '@stardust-ui/react'
+import * as React from 'react'
+
+const CheckboxExampleToggle = () => (
+  <>
+    <Checkbox label="Subscribe to weekly newsletter" toggle />
+    <Checkbox disabled checked label="Subscribe to weekly newsletter" toggle />
+  </>
+)
+
+export default CheckboxExampleToggle

docs/src/examples/components/Checkbox/Types/index.tsx

@@ -0,0 +1,26 @@
+import * as React from 'react'
+
+import ComponentExample from 'docs/src/components/ComponentDoc/ComponentExample'
+import ExampleSection from 'docs/src/components/ComponentDoc/ExampleSection'
+
+const Types = () => (
+  <ExampleSection title="Types">
+    <ComponentExample
+      title="Checkbox"
+      description="A standard checkbox."
+      examplePath="components/Checkbox/Types/CheckboxExample"
+    />
+    <ComponentExample
+      title="Disabled"
+      description="A checkbox can be read-only and unable to change states."
+      examplePath="components/Checkbox/Types/CheckboxExampleDisabled"
+    />
+    <ComponentExample
+      title="Toggle"
+      description="A checkbox can be formatted to show an on or off choice."
+      examplePath="components/Checkbox/Types/CheckboxExampleToggle"
+    />
+  </ExampleSection>
+)
+
+export default Types

docs/src/examples/components/Checkbox/index.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react'
+import Types from './Types'
+
+const CheckboxExamples = () => (
+  <>
+    <Types />
+  </>
+)
+
+export default CheckboxExamples