feat: add #checkbox component (#185)

* init checkbox files

* make first good looking version of #checkbox

* correct some more styling lefovers on #checkbox

* add #checkbox pages and integration tests

* docs: remove annotation about the limitation of a checkbox styling

* add screenshot tests for #checkbox + extend #switch error state screenshot

* docs: change the order of the #checkbox in the docs

* docs: add info about #checkbox in the #switch description

* update checkbox snapshots

packages/dnb-design-system-portal/src/pages/uilib/components/checkbox.md

@@ -0,0 +1,25 @@
+---
+title: 'Checkbox'
+draft: false
+order: 2
+---
+
+import Tabs from 'Tags/Tabs'
+
+import CheckboxInfo from 'Pages/uilib/components/checkbox/checkbox-info'
+import CheckboxProperties from 'Pages/uilib/components/checkbox/checkbox-properties'
+import CheckboxEvents from 'Pages/uilib/components/checkbox/checkbox-events'
+
+# Checkbox
+
+<Tabs>
+  <Tabs.Content>
+    <CheckboxInfo />
+  </Tabs.Content>
+  <Tabs.Content>
+    <CheckboxProperties />
+  </Tabs.Content>
+  <Tabs.Content>
+    <CheckboxEvents />
+  </Tabs.Content>
+</Tabs>

packages/dnb-design-system-portal/src/pages/uilib/components/checkbox/Examples.js

@@ -0,0 +1,113 @@
+/**
+ * UI lib Component Example
+ *
+ */
+
+import React, { PureComponent, Fragment } from 'react'
+import ComponentBox from '../../../../shared/tags/ComponentBox'
+
+class Example extends PureComponent {
+  onChangeHandler = state => {
+    console.log('onChangeHandler', state)
+  }
+
+  render() {
+    const { onChangeHandler: onChange } = this
+    return (
+      <Fragment>
+        <ComponentBox
+          caption="Unchecked Checkbox (default state)"
+          data-dnb-test="checkbox-default"
+          scope={{ onChange }}
+        >
+          {/* @jsx */ `
+<Checkbox
+  label="Label:"
+  on_change={onChange}
+/>
+          `}
+        </ComponentBox>
+        <ComponentBox
+          caption="Checked Checkbox"
+          data-dnb-test="checkbox-checked"
+          scope={{ onChange }}
+        >
+          {/* @jsx */ `
+<Checkbox
+  label="Label:"
+  title="Ths is the title"
+  checked
+  on_change={({ checked }) => console.log(checked)}
+/>
+          `}
+        </ComponentBox>
+        <ComponentBox
+          caption="Checked Checkbox with error message"
+          data-dnb-test="checkbox-error"
+          scope={{ onChange }}
+        >
+          {/* @jsx */ `
+<p className="dnb-p">
+  <Checkbox
+    label="Label:"
+    checked
+    status="Error message"
+  />
+</p>
+          `}
+        </ComponentBox>
+        <StateDemo />
+      </Fragment>
+    )
+  }
+}
+
+class StateDemo extends PureComponent {
+  render() {
+    return typeof window !== 'undefined' && window.IS_TEST ? (
+      <ComponentBox data-dnb-test="checkbox-disabled">
+        {/* @jsx */ `
+<Checkbox
+  checked
+  disabled
+/>
+`}
+      </ComponentBox>
+    ) : (
+      <ComponentBox
+        caption="Disabled Checkbox in checked state"
+        noFragments={false}
+      >
+        {/* @jsx */ `
+() => {
+  const [checkboxIsEnabled, setState] = useState(false)
+  useEffect(() => {
+    const timer = setInterval(() => setState(!checkboxIsEnabled), 1e3)
+    return () => clearTimeout(timer)
+  })
+  return (<>
+    <FormLabel
+      id="checkbox-1-label"
+      for_id="checkbox-1"
+      text="Checkbox label:"
+    />
+    <Checkbox
+      id="checkbox-1"
+      title_positive="Yes"
+      title_negative="No"
+      aria-labelledby="checkbox-1-label"
+      default_state={true}
+      checked={checkboxIsEnabled}
+      on_state_update={({checked}) => {}}
+      disabled
+    />
+  </>)
+}
+        `}
+      </ComponentBox>
+    )
+  }
+}
+
+export { Example }
+export default () => <Example />

packages/dnb-design-system-portal/src/pages/uilib/components/checkbox/checkbox-events.md

@@ -0,0 +1,8 @@
+---
+draft: true
+---
+
+| Events            | Description                                                                 |
+| ----------------- | --------------------------------------------------------------------------- |
+| `on_change`       | _(optional)_ will be called on state changes made by the user.              |
+| `on_state_update` | _(optional)_ will be called once the parameter `checked` changes its value. |

packages/dnb-design-system-portal/src/pages/uilib/components/checkbox/checkbox-info.md

@@ -0,0 +1,14 @@
+---
+draft: true
+---
+
+import Examples from 'Pages/uilib/components/checkbox/Examples'
+
+## Description
+
+The `Checkbox` component is shown as a square box that is ticked (checked) when activated.
+Checkboxes are used to let a user select one or more options of a limited number of choices.
+
+## Demos
+
+<Examples />

packages/dnb-design-system-portal/src/pages/uilib/components/checkbox/checkbox-properties.md

@@ -0,0 +1,13 @@
+---
+draft: true
+---
+
+| Properties      | Description                                                                                             |
+| --------------- | ------------------------------------------------------------------------------------------------------- |
+| `title`         | _(mandatory)_ the `title` of the input - describing it a bit further for accessibility reasons.         |
+| `label`         | _(optional)_ use either the internal `label` or provide one manually.                                   |
+| `status`        | _(optional)_ uses the `form-status` component to show failure messages.                                 |
+| `id`            | _(optional)_ the `id` of the input. Default will be a random id.                                        |
+| `default_state` | _(optional)_ boolean value. The state of the checkbox. Defaults to `false`. Set to `true` if otherwise. |
+| `checked`       | _(optional)_ determine whether the checkbox is checked or not. Default will be `false`.                 |
+| `disabled`      | _(optional)_ to disable/enable the checkbox.                                                            |

packages/dnb-design-system-portal/src/pages/uilib/components/switch/switch-info.md

@@ -11,6 +11,8 @@ _Also known as a toggle switch or a toggle._
 The `Switch` component (toggle) is a digital on/off switch.
 Toggle switches are best used for changing the state of system functionalities and preferences. "Toggles may replace two radio buttons or a single checkbox to allow users to choose between two opposing states." - [Source][1]
 
+May may also check out the [Checkbox](/uilib/components/checkbox) component.
+
 ## How it **should** work
 
 "Toggle switches should take immediate effect and should not require the user to click Save or Submit to apply the new state. As always, we should strive to match the system to the real world." - [Source][1]

packages/dnb-design-system-portal/src/pages/uilib/elements/other.md

@@ -8,6 +8,4 @@ import CodeBlock from 'Tags/CodeBlock'
 
 Several commonly used HTML Elements are not included in the `dnb-ui-lib`. This decision is made by the DNB UX Team and relies on a principle to make UX design as good as possible, consistent and more thoughtful towards a broader customer target.
 
-- For the `select` element, use e.g. [**Dropdown**](/uilib/components/dropdown) or [**Accordion**](/uilib/components/accordion) component.
-
-- For `checkbox` or `radio` inputs, use e.g. [**Toggle Button**](/uilib/components/button) or [**Switch**](/uilib/components/switch) component.
+- For the `select` element, use the [**Dropdown**](/uilib/components/dropdown) component.

packages/dnb-ui-lib/src/components/Checkbox.js

@@ -0,0 +1,14 @@
+/**
+ * ATTENTION: This file is auto generated by using "prepareTemplates".
+ * Do not change the content!
+ *
+ */
+
+/**
+ * Library Index checkbox to autogenerate all the components and patterns
+ * Used by "prepareCheckboxs"
+ */
+
+import Checkbox from './checkbox/Checkbox'
+export * from './checkbox/Checkbox'
+export default Checkbox