From 3cc3575841842dc020872f416f018c4a6da53904 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Tobias=20H=C3=B8egh?= Date: Thu, 23 May 2019 11:06:21 +0200 Subject: [PATCH] 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 --- .../src/pages/uilib/components/checkbox.md | 25 + .../uilib/components/checkbox/Examples.js | 113 +++++ .../components/checkbox/checkbox-events.md | 8 + .../components/checkbox/checkbox-info.md | 14 + .../checkbox/checkbox-properties.md | 13 + .../uilib/components/switch/switch-info.md | 2 + .../src/pages/uilib/elements/other.md | 4 +- .../dnb-ui-lib/src/components/Checkbox.js | 14 + .../src/components/checkbox/Checkbox.js | 270 ++++++++++ .../__tests__/Checkbox.screenshot.test.js | 79 +++ .../checkbox/__tests__/Checkbox.test.js | 84 ++++ .../__snapshots__/Checkbox.test.js.snap | 475 ++++++++++++++++++ ...checkbox-in-checked-state-1-cd57d.snap.png | Bin 0 -> 608 bytes ...-checked-state-with-focus-1-68369.snap.png | Bin 0 -> 859 bytes ...-checked-state-with-hover-1-7fa0a.snap.png | Bin 0 -> 661 bytes ...h-checkbox-in-error-state-1-e6684.snap.png | Bin 0 -> 3896 bytes ...o-match-disabled-checkbox-1-b6ffd.snap.png | Bin 0 -> 592 bytes ...eckbox-in-unchecked-state-1-24f56.snap.png | Bin 0 -> 392 bytes ...nchecked-state-with-focus-1-294d3.snap.png | Bin 0 -> 536 bytes ...nchecked-state-with-hover-1-b3d7b.snap.png | Bin 0 -> 408 bytes .../src/components/checkbox/index.js | 8 + .../src/components/checkbox/style.js | 6 + .../components/checkbox/style/_checkbox.scss | 118 +++++ .../checkbox/style/dnb-checkbox.scss | 14 + .../src/components/checkbox/style/index.js | 6 + .../style/themes/dnb-checkbox-theme-ui.scss | 138 +++++ .../components/checkbox/style/themes/ui.js | 6 + .../src/components/checkbox/web-component.js | 9 + packages/dnb-ui-lib/src/components/index.js | 2 + packages/dnb-ui-lib/src/components/lib.js | 3 + .../__tests__/Switch.screenshot.test.js | 6 + ...tch-switch-in-error-state-1-83a9c.snap.png | Bin 0 -> 4250 bytes packages/dnb-ui-lib/src/index.js | 2 + .../src/style/dnb-ui-components.scss | 1 + .../style/themes/theme-ui/dnb-theme-ui.scss | 1 + .../dnb-ui-lib/stories/componentsStories.js | 53 ++ 36 files changed, 1471 insertions(+), 3 deletions(-) create mode 100644 packages/dnb-design-system-portal/src/pages/uilib/components/checkbox.md create mode 100644 packages/dnb-design-system-portal/src/pages/uilib/components/checkbox/Examples.js create mode 100644 packages/dnb-design-system-portal/src/pages/uilib/components/checkbox/checkbox-events.md create mode 100644 packages/dnb-design-system-portal/src/pages/uilib/components/checkbox/checkbox-info.md create mode 100644 packages/dnb-design-system-portal/src/pages/uilib/components/checkbox/checkbox-properties.md create mode 100644 packages/dnb-ui-lib/src/components/Checkbox.js create mode 100644 packages/dnb-ui-lib/src/components/checkbox/Checkbox.js create mode 100644 packages/dnb-ui-lib/src/components/checkbox/__tests__/Checkbox.screenshot.test.js create mode 100644 packages/dnb-ui-lib/src/components/checkbox/__tests__/Checkbox.test.js create mode 100644 packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap create mode 100644 packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/checkbox-screenshot-test-js-checkbox-checked-screenshot-have-to-match-checkbox-in-checked-state-1-cd57d.snap.png create mode 100644 packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/checkbox-screenshot-test-js-checkbox-checked-screenshot-have-to-match-checkbox-in-checked-state-with-focus-1-68369.snap.png create mode 100644 packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/checkbox-screenshot-test-js-checkbox-checked-screenshot-have-to-match-checkbox-in-checked-state-with-hover-1-7fa0a.snap.png create mode 100644 packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/checkbox-screenshot-test-js-checkbox-checked-screenshot-have-to-match-checkbox-in-error-state-1-e6684.snap.png create mode 100644 packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/checkbox-screenshot-test-js-checkbox-checked-screenshot-have-to-match-disabled-checkbox-1-b6ffd.snap.png create mode 100644 packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/checkbox-screenshot-test-js-checkbox-unchecked-screenshot-have-to-match-checkbox-in-unchecked-state-1-24f56.snap.png create mode 100644 packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/checkbox-screenshot-test-js-checkbox-unchecked-screenshot-have-to-match-checkbox-in-unchecked-state-with-focus-1-294d3.snap.png create mode 100644 packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/checkbox-screenshot-test-js-checkbox-unchecked-screenshot-have-to-match-checkbox-in-unchecked-state-with-hover-1-b3d7b.snap.png create mode 100644 packages/dnb-ui-lib/src/components/checkbox/index.js create mode 100644 packages/dnb-ui-lib/src/components/checkbox/style.js create mode 100644 packages/dnb-ui-lib/src/components/checkbox/style/_checkbox.scss create mode 100644 packages/dnb-ui-lib/src/components/checkbox/style/dnb-checkbox.scss create mode 100644 packages/dnb-ui-lib/src/components/checkbox/style/index.js create mode 100644 packages/dnb-ui-lib/src/components/checkbox/style/themes/dnb-checkbox-theme-ui.scss create mode 100644 packages/dnb-ui-lib/src/components/checkbox/style/themes/ui.js create mode 100644 packages/dnb-ui-lib/src/components/checkbox/web-component.js create mode 100644 packages/dnb-ui-lib/src/components/switch/__tests__/__snapshots__/switch-screenshot-test-js-switch-checked-screenshot-have-to-match-switch-in-error-state-1-83a9c.snap.png diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/checkbox.md b/packages/dnb-design-system-portal/src/pages/uilib/components/checkbox.md new file mode 100644 index 00000000000..32ddfbf5fef --- /dev/null +++ b/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 + + + + + + + + + + + + diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/checkbox/Examples.js b/packages/dnb-design-system-portal/src/pages/uilib/components/checkbox/Examples.js new file mode 100644 index 00000000000..35b4a2c2c7f --- /dev/null +++ b/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 ( + + + {/* @jsx */ ` + + `} + + + {/* @jsx */ ` + console.log(checked)} +/> + `} + + + {/* @jsx */ ` +

+ +

+ `} + + + + ) + } +} + +class StateDemo extends PureComponent { + render() { + return typeof window !== 'undefined' && window.IS_TEST ? ( + + {/* @jsx */ ` + +`} + + ) : ( + + {/* @jsx */ ` +() => { + const [checkboxIsEnabled, setState] = useState(false) + useEffect(() => { + const timer = setInterval(() => setState(!checkboxIsEnabled), 1e3) + return () => clearTimeout(timer) + }) + return (<> + + {}} + disabled + /> + ) +} + `} + + ) + } +} + +export { Example } +export default () => diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/checkbox/checkbox-events.md b/packages/dnb-design-system-portal/src/pages/uilib/components/checkbox/checkbox-events.md new file mode 100644 index 00000000000..5e104b84797 --- /dev/null +++ b/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. | diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/checkbox/checkbox-info.md b/packages/dnb-design-system-portal/src/pages/uilib/components/checkbox/checkbox-info.md new file mode 100644 index 00000000000..ee29f4cc095 --- /dev/null +++ b/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 + + diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/checkbox/checkbox-properties.md b/packages/dnb-design-system-portal/src/pages/uilib/components/checkbox/checkbox-properties.md new file mode 100644 index 00000000000..2dcf467840d --- /dev/null +++ b/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. | diff --git a/packages/dnb-design-system-portal/src/pages/uilib/components/switch/switch-info.md b/packages/dnb-design-system-portal/src/pages/uilib/components/switch/switch-info.md index c41b4f8043c..2541415f398 100644 --- a/packages/dnb-design-system-portal/src/pages/uilib/components/switch/switch-info.md +++ b/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] diff --git a/packages/dnb-design-system-portal/src/pages/uilib/elements/other.md b/packages/dnb-design-system-portal/src/pages/uilib/elements/other.md index ab45c12a3c0..5fcba2a7ee1 100644 --- a/packages/dnb-design-system-portal/src/pages/uilib/elements/other.md +++ b/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. diff --git a/packages/dnb-ui-lib/src/components/Checkbox.js b/packages/dnb-ui-lib/src/components/Checkbox.js new file mode 100644 index 00000000000..b6633ecef74 --- /dev/null +++ b/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 diff --git a/packages/dnb-ui-lib/src/components/checkbox/Checkbox.js b/packages/dnb-ui-lib/src/components/checkbox/Checkbox.js new file mode 100644 index 00000000000..4ba7c896428 --- /dev/null +++ b/packages/dnb-ui-lib/src/components/checkbox/Checkbox.js @@ -0,0 +1,270 @@ +/** + * Web Checkbox Component + * + */ + +import React, { Component } from 'react' +import PropTypes from 'prop-types' +import classnames from 'classnames' +import keycode from 'keycode' +import { + registerElement, + validateDOMAttributes, + dispatchCustomElementEvent +} from '../../shared/component-helper' +import FormLabel from '../form-label/FormLabel' +import FormStatus from '../form-status/FormStatus' + +const renderProps = { + on_change: null, + on_state_update: null +} + +export const propTypes = { + label: PropTypes.string, + title: PropTypes.string, + default_state: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), + checked: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), + disabled: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), + id: PropTypes.string, + status: PropTypes.string, + status_state: PropTypes.string, + status_animation: PropTypes.string, + value: PropTypes.string, + attributes: PropTypes.oneOfType([PropTypes.string, PropTypes.object]), + readOnly: PropTypes.oneOfType([PropTypes.string, PropTypes.bool]), + class: PropTypes.string, + + /// React props + className: PropTypes.string, + children: PropTypes.oneOfType([PropTypes.string, PropTypes.func]), + + // Web Component props + custom_element: PropTypes.object, + custom_method: PropTypes.func, + on_change: PropTypes.func, + on_state_update: PropTypes.func +} + +export const defaultProps = { + label: null, + title: null, + default_state: null, + checked: 'default', //we have to send this as a string + disabled: false, + id: null, + status: null, + status_state: 'error', + status_animation: null, + value: null, + attributes: null, + readOnly: false, + class: null, + + // React props + className: null, + children: null, + + // Web Component props + custom_element: null, + custom_method: null, + ...renderProps +} + +/** + * The checkbox component is our enhancement of the classic radio button. It acts like a checkbox. Example: On/off, yes/no. + */ +export default class Checkbox extends Component { + static tagName = 'dnb-checkbox' + static propTypes = propTypes + static defaultProps = defaultProps + static renderProps = renderProps + + static enableWebComponent() { + registerElement(Checkbox.tagName, Checkbox, defaultProps) + } + + static parseChecked = state => /true|on/.test(String(state)) + + static getDerivedStateFromProps(props, state) { + if (state._listenForPropChanges) { + if (state.hasDefaultState) { + state.checked = Checkbox.parseChecked(props.default_state) + state.hasDefaultState = false + } else if (props.checked !== 'default') { + state.checked = Checkbox.parseChecked(props.checked) + } + } + state._listenForPropChanges = true + + return state + } + + constructor(props) { + super(props) + this._refInput = React.createRef() + this._id = + props.id || `dnb-checkbox-${Math.round(Math.random() * 999)}` // cause we need an id anyway + this.state = { + _listenForPropChanges: true, + hasDefaultState: props.default_state !== null, + checked: Checkbox.parseChecked(props.default_state || props.checked) + } + this.helperParams = { onMouseDown: e => e.preventDefault() } + } + + shouldComponentUpdate(nextProps, nextState) { + if ( + Checkbox.parseChecked(this.props.checked) !== + Checkbox.parseChecked(nextProps.checked) + ) { + const { checked } = nextState + dispatchCustomElementEvent(this, 'on_state_update', { checked }) + } + return true + } + + onKeyDownHandler = event => { + switch (keycode(event)) { + case 'enter': + this.onChangeHandler(event) + break + } + } + + onChangeHandler = event => { + if (String(this.props.readOnly) === 'true') { + return event.preventDefault() + } + const checked = !this.state.checked + this.setState({ checked, _listenForPropChanges: false }) + dispatchCustomElementEvent(this, 'on_change', { checked, event }) + } + + onMouseOutHandler = () => { + // this way we keep the new state after the user changed the state, without getting the error state back vissually + if (this.props.status && this.props.status_state === 'error') { + return + } + if (this._refInput.current) { + this._refInput.current.blur() + } + } + + render() { + const { + value, + status, + status_state, + status_animation, + label, + title, + disabled, + readOnly, + className, + class: _className, + + id: _id, // eslint-disable-line + default_state: _default_state, // eslint-disable-line + checked: _checked, // eslint-disable-line + attributes, // eslint-disable-line + children, // eslint-disable-line + on_change, // eslint-disable-line + on_state_update, // eslint-disable-line + custom_method, // eslint-disable-line + custom_element, // eslint-disable-line + + ...rest + } = this.props + + const { checked } = this.state + + const id = this._id + const showStatus = status && status !== 'error' + + const classes = classnames( + 'dnb-checkbox', + showStatus && 'dnb-checkbox__form-status', + status && `dnb-checkbox__status--${status_state}`, + className, + _className + ) + + const inputParams = { + disabled, + checked, + onMouseOut: this.onMouseOutHandler, // for resetting the button to the default state + ...rest + } + + if (showStatus) { + inputParams['aria-describedby'] = id + '-status' + } + if (label) { + inputParams['aria-labelledby'] = id + '-label' + } + if (readOnly) { + inputParams['aria-readonly'] = inputParams.readOnly = true + } + + // also used for code markup simulation + validateDOMAttributes(this.props, inputParams) + + return ( + <> + {label && ( + + )} + + + + + + + + + {showStatus && ( + + )} + + + ) + } +} + +const CheckGfx = props => ( + + + +) diff --git a/packages/dnb-ui-lib/src/components/checkbox/__tests__/Checkbox.screenshot.test.js b/packages/dnb-ui-lib/src/components/checkbox/__tests__/Checkbox.screenshot.test.js new file mode 100644 index 00000000000..5e7f2f85205 --- /dev/null +++ b/packages/dnb-ui-lib/src/components/checkbox/__tests__/Checkbox.screenshot.test.js @@ -0,0 +1,79 @@ +/** + * Screenshot Test + * This file will not run on "test:staged" because we dont require any related files + */ + +import { + testPageScreenshot, + setupPageScreenshot +} from '../../../core/jest/jestSetupScreenshots' + +describe('Checkbox unchecked screenshot', () => { + setupPageScreenshot({ url: '/uilib/components/checkbox' }) + it('have to match checkbox in unchecked state', async () => { + const screenshot = await testPageScreenshot({ + selector: '[data-dnb-test="checkbox-default"] .dnb-checkbox' + }) + expect(screenshot).toMatchImageSnapshot() + }) + it('have to match checkbox in unchecked state with focus', async () => { + const screenshot = await testPageScreenshot({ + selector: '[data-dnb-test="checkbox-default"] .dnb-checkbox', + simulateSelector: + '[data-dnb-test="checkbox-default"] .dnb-checkbox__input', + simulate: 'focus' + }) + expect(screenshot).toMatchImageSnapshot() + }) + it('have to match checkbox in unchecked state with hover', async () => { + const screenshot = await testPageScreenshot({ + selector: '[data-dnb-test="checkbox-default"] .dnb-checkbox', + simulateSelector: + '[data-dnb-test="checkbox-default"] .dnb-checkbox__input', + simulate: 'hover' + }) + expect(screenshot).toMatchImageSnapshot() + }) +}) + +// NB: Because of focus simulation and screenshotElement.press('Tab') +// we have to run the two focus simulations in a seperate run each +describe('Checkbox checked screenshot', () => { + setupPageScreenshot({ url: '/uilib/components/checkbox' }) + it('have to match checkbox in checked state', async () => { + const screenshot = await testPageScreenshot({ + selector: '[data-dnb-test="checkbox-checked"] .dnb-checkbox' + }) + expect(screenshot).toMatchImageSnapshot() + }) + it('have to match checkbox in checked state with focus', async () => { + const screenshot = await testPageScreenshot({ + selector: '[data-dnb-test="checkbox-checked"] .dnb-checkbox', + simulateSelector: + '[data-dnb-test="checkbox-checked"] .dnb-checkbox__input', + simulate: 'focus' + }) + expect(screenshot).toMatchImageSnapshot() + }) + it('have to match checkbox in checked state with hover', async () => { + const screenshot = await testPageScreenshot({ + selector: '[data-dnb-test="checkbox-checked"] .dnb-checkbox', + simulateSelector: + '[data-dnb-test="checkbox-checked"] .dnb-checkbox__input', + simulate: 'hover' + }) + expect(screenshot).toMatchImageSnapshot() + }) + it('have to match disabled checkbox', async () => { + const screenshot = await testPageScreenshot({ + selector: '[data-dnb-test="checkbox-disabled"] .dnb-checkbox' + }) + expect(screenshot).toMatchImageSnapshot() + }) + it('have to match checkbox in error state', async () => { + const screenshot = await testPageScreenshot({ + selector: '[data-dnb-test="checkbox-error"] .dnb-checkbox' + }) + expect(screenshot).toMatchImageSnapshot() + }) +}) diff --git a/packages/dnb-ui-lib/src/components/checkbox/__tests__/Checkbox.test.js b/packages/dnb-ui-lib/src/components/checkbox/__tests__/Checkbox.test.js new file mode 100644 index 00000000000..19d2b668c12 --- /dev/null +++ b/packages/dnb-ui-lib/src/components/checkbox/__tests__/Checkbox.test.js @@ -0,0 +1,84 @@ +/** + * Component Test + * + */ + +import React from 'react' +import { + mount, + fakeProps, + axeComponent, + toJson, + loadScss +} from '../../../core/jest/jestSetup' +import Component from '../Checkbox' + +// just to make sure we re-run the test in watch mode due to changes in theese files +import _checkbox from '../style/_checkbox.scss' // eslint-disable-line +import dnb_checkbox from '../style/dnb-checkbox.scss' // eslint-disable-line +import dnb_checkbox_theme_ui from '../style/themes/dnb-checkbox-theme-ui.scss' // eslint-disable-line + +const props = fakeProps(require.resolve('../Checkbox'), { + optional: true +}) +props.status = null +props.readOnly = false + +describe('Checkbox component', () => { + // then test the state management + const Comp = mount() + + // mount compare the snapshot + it('have to match snapshot', () => { + expect(toJson(Comp)).toMatchSnapshot() + }) + + it('has correct state after "change" trigger', () => { + // default checked value has to be false + expect(Comp.state().checked).toBe(false) + + Comp.find('input').simulate('change') // we could send inn the event data structure like this: , { target: { checked: true } } + expect(Comp.state().checked).toBe(true) + + Comp.find('input').simulate('change') + expect(Comp.state().checked).toBe(false) + + // also check if getDerivedStateFromProps sets the state as expected + Comp.setProps({ checked: true }) + expect(Comp.state().checked).toBe(true) + + const value = 'new value' + Comp.setProps({ value }) + expect(Comp.find('input').props().value).toBe(value) + }) + + it('has a disabled attribute, once we set disabled to true', () => { + const Comp = mount() + Comp.setProps({ + disabled: true + }) + expect( + Comp.find('input') + .instance() + .hasAttribute('disabled') + ).toBe(true) + }) + + it('should validate with ARIA rules', async () => { + const Comp = mount() + expect(await axeComponent(Comp)).toHaveNoViolations() + }) +}) + +describe('Checkbox scss', () => { + it('have to match snapshot', () => { + const scss = loadScss(require.resolve('../style/dnb-checkbox.scss')) + expect(scss).toMatchSnapshot() + }) + it('have to match default theme snapshot', () => { + const scss = loadScss( + require.resolve('../style/themes/dnb-checkbox-theme-ui.scss') + ) + expect(scss).toMatchSnapshot() + }) +}) diff --git a/packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap b/packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap new file mode 100644 index 00000000000..8889c579470 --- /dev/null +++ b/packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.js.snap @@ -0,0 +1,475 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Checkbox component have to match snapshot 1`] = ` + + + + + + + + + + + + + + + + + + +`; + +exports[`Checkbox scss have to match default theme snapshot 1`] = ` +"/* +* Checkbox theme +* +*/ +/** + * This file is only used to make themes independent + * so that they can get imported individually, without the core styles + * + */ +/* + * Utilities + */ +.dnb-checkbox { + /* + * When checkboxed OFF + * aka when the checkbox is not :checked + */ + /* + * When checkboxed ON + * aka when the checkbox is :checked + */ + /* + * On disabled + * + */ + /* + * On hover + * + */ + /* + * On active + * + */ + /* stylelint-disable */ + /* stylelint-enable */ + /* + * On focus + * + */ + /* stylelint-disable */ + /* stylelint-enable */ + /* + * On error state + * + */ } + .dnb-checkbox__input:not(:checked) ~ .dnb-checkbox__button { + background-color: var(--color-white); + border-color: var(--color-sea-green-alt); } + .dnb-checkbox__input:checked ~ .dnb-checkbox__button { + background-color: var(--color-sea-green-alt); } + .dnb-checkbox__input[disabled] ~ .dnb-checkbox__button { + border-color: var(--color-mint-green-50); } + .dnb-checkbox__input[disabled]:checked ~ .dnb-checkbox__button { + border-color: transparent; + background-color: var(--color-sea-green-alt-30); } + .dnb-checkbox__input:not([disabled]):not(:focus):hover ~ .dnb-checkbox__button { + background-color: var(--color-mint-green-50); } + .dnb-checkbox__input:not([disabled]):not(:focus):checked:hover ~ .dnb-checkbox__button { + border-color: transparent; } + .dnb-checkbox__input:not([disabled]):not(:focus):hover ~ .dnb-checkbox__gfx { + color: var(--color-sea-green-alt); } + .dnb-checkbox__input:not([disabled]):active ~ .dnb-checkbox__button { + background-color: var(--color-mint-green-50); + border-color: transparent; } + .dnb-checkbox__input:not([disabled]):active ~ .dnb-checkbox__gfx { + color: var(--color-white); } + html[data-whatinput='keyboard'] .dnb-checkbox__input:not([disabled]):focus ~ .dnb-checkbox__button { + border: none; + background-color: var(--color-mint-green-50); } + html[data-whatinput='keyboard'] .dnb-checkbox__input:not([disabled]):focus ~ .dnb-checkbox__gfx { + color: var(--color-sea-green-alt); } + .dnb-checkbox__input:not([disabled]):focus ~ .dnb-checkbox__button .dnb-checkbox__focus, + .dnb-checkbox__input:not([disabled]):active ~ .dnb-checkbox__button .dnb-checkbox__focus { + display: block; } + .dnb-checkbox__input:not([disabled]):not(:checked):focus ~ .dnb-checkbox__button, + .dnb-checkbox__input:not([disabled]):not(:checked):active ~ .dnb-checkbox__button { + background-color: var(--color-mint-green-50); } + .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:focus):not(:active) ~ .dnb-checkbox__button { + border: none; } + .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:focus):not(:active) ~ .dnb-checkbox__button .dnb-checkbox__focus { + display: block; + box-shadow: 0 0 0 0.125rem var(--color-cherry-red); + border-color: transparent; } + .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:focus):hover ~ .dnb-checkbox__button { + border-color: var(--color-cherry-red); + background-color: var(--color-cherry-red-80); } + .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:focus):not(:active):not(:hover) ~ .dnb-checkbox__button { + border-color: var(--color-cherry-red-80); } + .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:focus):not(:active):not(:hover):checked ~ .dnb-checkbox__button { + background-color: var(--color-cherry-red); } + .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:focus):hover ~ .dnb-checkbox__gfx { + color: var(--color-cherry-red); } + .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):not(:focus):not(:active):not(:hover) ~ .dnb-checkbox__gfx { + color: var(--color-cherry-red-80); } + .dnb-checkbox > .dnb-form-status { + transform: translateY(0.1875rem); } +" +`; + +exports[`Checkbox scss have to match snapshot 1`] = ` +"/* +* DNB Checkbox +* +*/ +/** + * This file is only used to make components independent + * so that they can get imported individually, without the core styles + * + */ +/* + * Utilities + */ +/* + * Scopes + * + */ +/* + * Document Reset + * + */ +/* +* DNB FormLabel +* +*/ +.dnb-form-label { + font-family: var(--font-family-default); + font-weight: var(--font-weight-default); + font-size: 1rem; + font-style: normal; + line-height: 1.5rem; + color: var(--color-black-80, #333); + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + font-variant-numeric: lining-nums; + font-feature-settings: \\"lnum\\"; + /** + * 1. Remove repeating backgrounds in all browsers (opinionated). + * 2. Add border box sizing in all browsers (opinionated). + */ + /** + * 1. Add text decoration inheritance in all browsers (opinionated). + * 2. Add vertical alignment inheritance in all browsers (opinionated). + */ + margin: 0; + padding: 0; } + .dnb-form-label *, + .dnb-form-label ::before, + .dnb-form-label ::after { + background-repeat: no-repeat; + /* 1 */ + box-sizing: border-box; + /* 2 */ } + .dnb-form-label ::before, + .dnb-form-label ::after { + text-decoration: inherit; + /* 1 */ + vertical-align: inherit; + /* 2 */ } + +/* + * FormLabel component + * + */ +.dnb-form-label { + user-select: none; + margin-right: 1rem; + display: inline-block; + vertical-align: baseline; + cursor: pointer; + color: inherit; + width: auto; + white-space: nowrap; } + .dnb-form-label--vertical { + margin-right: 0; + margin-top: 0; } + .dnb-form-label[for]:not([disabled]):hover { + color: var(--color-sea-green); } + .dnb-form-label[disabled] { + cursor: not-allowed; } + +/* +* DNB FormStatus +* +*/ +.dnb-form-status { + font-family: var(--font-family-default); + font-weight: var(--font-weight-default); + font-size: 1rem; + font-style: normal; + line-height: 1.5rem; + color: var(--color-black-80, #333); + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + font-variant-numeric: lining-nums; + font-feature-settings: \\"lnum\\"; + /** + * 1. Remove repeating backgrounds in all browsers (opinionated). + * 2. Add border box sizing in all browsers (opinionated). + */ + /** + * 1. Add text decoration inheritance in all browsers (opinionated). + * 2. Add vertical alignment inheritance in all browsers (opinionated). + */ + margin: 0; + padding: 0; } + .dnb-form-status *, + .dnb-form-status ::before, + .dnb-form-status ::after { + background-repeat: no-repeat; + /* 1 */ + box-sizing: border-box; + /* 2 */ } + .dnb-form-status ::before, + .dnb-form-status ::after { + text-decoration: inherit; + /* 1 */ + vertical-align: inherit; + /* 2 */ } + +/* + * FormStatus component + * + */ +.dnb-form-status { + width: auto; + display: flex; + justify-content: flex-start; + align-items: center; + min-height: var(--input-height); + border-radius: var(--input-border-radius); + line-height: 0.5rem; } + .dnb-form-status--text { + padding: calc(0.5rem / 2) 1rem; + cursor: text; + color: var(--color-emerald-green); + line-height: 1.5rem; } + .dnb-icon + .dnb-form-status--text { + padding-left: 0.5rem; } + .dnb-form-status > .dnb-icon { + display: flex; + justify-content: center; + align-items: center; + width: 1.5em; + height: 1.5em; + margin-left: 0.5rem; + color: inherit; + font-size: 1rem; + border-radius: 50%; + border: 1px solid; + border-color: currentColor; } + .dnb-form-status[hidden] { + display: none; } + .dnb-form-status--fade-in { + height: 0; + opacity: 0; + animation: fade-in 600ms ease-out 1 200ms forwards; } + +@keyframes fade-in { + from { + opacity: 0; + height: 0; } + to { + opacity: 1; + height: var(--input-height); } } + +.dnb-checkbox { + font-family: var(--font-family-default); + font-weight: var(--font-weight-default); + font-size: 1rem; + font-style: normal; + line-height: 1.5rem; + color: var(--color-black-80, #333); + -webkit-tap-highlight-color: rgba(0, 0, 0, 0); + font-variant-numeric: lining-nums; + font-feature-settings: \\"lnum\\"; + /** + * 1. Remove repeating backgrounds in all browsers (opinionated). + * 2. Add border box sizing in all browsers (opinionated). + */ + /** + * 1. Add text decoration inheritance in all browsers (opinionated). + * 2. Add vertical alignment inheritance in all browsers (opinionated). + */ + margin: 0; + padding: 0; } + .dnb-checkbox *, + .dnb-checkbox ::before, + .dnb-checkbox ::after { + background-repeat: no-repeat; + /* 1 */ + box-sizing: border-box; + /* 2 */ } + .dnb-checkbox ::before, + .dnb-checkbox ::after { + text-decoration: inherit; + /* 1 */ + vertical-align: inherit; + /* 2 */ } + +/* +* Checkbox component +* +*/ +:root { + --checkbox-height: 1.5rem; + --checkbox-width: 1.5rem; + --checkbox-border-width: 0.125rem; } + +.dnb-checkbox { + user-select: none; + display: inline-flex; + flex-direction: column; + align-items: flex-start; + vertical-align: middle; + width: auto; + margin: 0; + padding: 0; + color: var(--color-white); + /* + * When checkbox is OFF + * aka when the checkbox is not :checked + */ + /* + * When checkbox is ON + * aka when the checkbox is :checked + */ } + .dnb-checkbox__shell { + position: relative; + display: flex; + align-items: center; + justify-content: center; + width: var(--checkbox-height); + height: var(--checkbox-height); + transform: translateY(-0.0625rem); } + label + .dnb-checkbox[class*='__form-status'] { + vertical-align: top; } + .dnb-checkbox__focus, .dnb-checkbox__button, .dnb-checkbox__gfx { + position: absolute; + z-index: 4; + border-radius: 0.25rem; } + .dnb-checkbox__button { + border: var(--checkbox-border-width) solid transparent; } + .dnb-checkbox__focus { + display: none; + outline: none; } + html[data-whatinput='keyboard'] .dnb-checkbox__focus { + box-shadow: 0 0 0 0.125rem var(--color-emerald-green); + border-color: transparent; } + .dnb-checkbox__focus, .dnb-checkbox__button { + width: calc(var(--checkbox-width) - 0.25rem); + height: calc(var(--checkbox-height) - 0.25rem); } + .dnb-checkbox__gfx { + position: absolute; + width: var(--checkbox-height); + height: var(--checkbox-height); + transition: opacity 200ms ease-out, transform 200ms ease-out; + fill: currentColor; + shape-rendering: geometricPrecision; } + .dnb-checkbox__input:not(:checked) ~ .dnb-checkbox__gfx { + opacity: 0; + transform: scale(0.8); } + .dnb-checkbox__input:checked ~ .dnb-checkbox__gfx { + opacity: 1; + transform: scale(1); } + .dnb-checkbox__input { + opacity: 0; + position: absolute; + top: 0; + left: 0; + z-index: 5; + width: var(--checkbox-width); + height: var(--checkbox-height); + margin: 0; + padding: 0; + border: 0; } + .dnb-checkbox__input:not([disabled]) { + cursor: pointer; } + .dnb-checkbox > .dnb-form-status { + margin-top: 0.125rem; } +" +`; diff --git a/packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/checkbox-screenshot-test-js-checkbox-checked-screenshot-have-to-match-checkbox-in-checked-state-1-cd57d.snap.png b/packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/checkbox-screenshot-test-js-checkbox-checked-screenshot-have-to-match-checkbox-in-checked-state-1-cd57d.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..cae74d9e6437e45540de67cd0344759e72260e25 GIT binary patch literal 608 zcmV-m0-ybfP)Px%8c9S!RA_X*eZ z%g_l!iclDP9+@QBBic(6s!#~xm@F2V;N+nqzmvM|?mT}ERE~u$0+O^u3=Nr0?eyfH1 z$43OyDRue}kPG^ziGk~W`X!>ND#o6N#cBmVil|e63c29Te2$bc^v}+qsp`9PW6y)4 zC}`i^ace5OkP9yJ9DWp`S}vpCYHg4A-kM5xG~(J+cHz=RXN=)8j&Whz@auH|n@_Rp zB;hj5zk}PD2&Pjs4P$#3CyNEQVg4Ol=U_Vw;hQFa&Aa(i%B2!n4P=6+mCA>WVwvZA ztx*kKrz(rC$#gA?Dii|SCW}S3(F2>UzLzAJF^1J1E6-`Ag21*9^Owb;Qusc|8!0F{ uQc!fHpy)_J(UF3pBLziA3W|;t6rEQVuco?s*llnC0000Px&6-h)vRA_o#B=eazG^S~D7t}hspw`g^wT>>RbvDQh=2YA`U%QzK z&hd3QlF_qUa*R}%i)g90(PFnrt7)B#1Mk=6WiH(9Wz07%qb6$0OX<6Mg)KQb!m*?X zp1kE?%r{L_RVAky>e#u%gmKfxjN|xcgFGA_R=|6~Q6@3`71IE>%}@c(+*h{TtE+!_g?OJ_gg?4=gOw4<7ljxoqAQI3!bo+V9DRg4VOYV8cn%(@$m>T;C}NF z)tbsmqzmR63^Cz%Bm}fNdEwcJQ1_P~oD`?$Ykx^6m6#9}9TLfXj#QbFNrAN4!1bxG! zDX~QmenrpNZ8#M-FT9h$&x3E_b`wTp=BN6=Y>>YA$fBmKlrs_pr460V-|6Me2RTEh znzB+JURy&$rvw9v8>jMfY?!X`q$AH59~;_jQdTa3RKc}K)=%_mqYG*sT~O=jf?7ux l)H=GL*3kvEjxMNmegI>t0NrlL7WV)E002ovPDHLkV1f&*ks1I1 literal 0 HcmV?d00001 diff --git a/packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/checkbox-screenshot-test-js-checkbox-checked-screenshot-have-to-match-checkbox-in-checked-state-with-hover-1-7fa0a.snap.png b/packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/checkbox-screenshot-test-js-checkbox-checked-screenshot-have-to-match-checkbox-in-checked-state-with-hover-1-7fa0a.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..8f5a76781ec028570e8421817c4fd61f8aff45a5 GIT binary patch literal 661 zcmV;G0&4wPx%Pf0{URA_g^P+Dl0s6p3mo}`Q2yyR^c zJ$CBUDX+$;bubBQ&<>8kGT0bM9h?;#q2JQprmjO%N;70WAK%`1f5-3R`#;Z*Z{IWC z$5pLXtNh0_Io*KW7(v}Jg1Tb_b;k(mjuF%yBd9w@Pge1QXdjiEN&s zo^Gyop0u@=xS*vJFBU%Rc|TVyF*-fNl~X6UbN;M!`CW($CbD_%K6_54Hu8VRQi{RJ zryL9TiTC$Pm;Ni_g0X0rNU)uI(=%8~{c&&bagr)<|N1rChRROF1p{6$@qs=HR+-W1 zm)qCJUcDw)EHQHVqOC(^C!(i`Eh3>HLp|L*n0-Scn+IUx?R##Y>9Xa|{9lNjCf+T7 z*>!Dj@(G#3CjibJKgz>fH};)(y7h=eTlNZCN^QTvSTwxv@2&|KU9E>D+L9AoD1SZh ziDC<1vxiQ9n@E<}kO_GYNk!4o;up&jdxKD0S*Y5|f;v_f%^o^h8gymRs5pKev>PL+ vJ4R4KCY?~E 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 literal 0 HcmV?d00001 diff --git a/packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/checkbox-screenshot-test-js-checkbox-unchecked-screenshot-have-to-match-checkbox-in-unchecked-state-1-24f56.snap.png b/packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/checkbox-screenshot-test-js-checkbox-unchecked-screenshot-have-to-match-checkbox-in-unchecked-state-1-24f56.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..ea25867655f99c4ee7e1008ca9c2ba9075ca4dd9 GIT binary patch literal 392 zcmeAS@N?(olHy`uVBq!ia0vp^79h;Q1|(OsS<3+_#^NA%Cx&(BWL^T-O24iIVhxc>AcuN2vk(D$rW(V@G~Y=6JO_TUZa4c}M1&{-xuNlI;{Qs~jQr?k|* z9S?Olw@I$3?%$-(jyoP2Wz1T(@c6oa)eZa88gE4|C=**Tmo+OL!7SIU+~^zmY0vFI znf{tNervCvU)*v0<&;X1&a);Hex+{I^nQ0OyVHAPtlm+jqw^9bJ!iP%r*`CAp|RA~ zsQAkBwX;5Lx-XnAxqkK36ER8eAKZS(;IJuTOCPfYJLAS;hCSD}UWxcL`-}yL)%w3X z4P)=!FRt3(9fjhIM~zdz&%G{oU;gI70u9r?mpXJvFEwwX$GsgZs%V9 zZ4B2D*rznvX8DTjns(*$Iy{|ocb|zDn|`V+@U2dOHTRWsOj|cQz?rXWAE@WCB{7`c S{YU^9v<#lEelF{r5}E*PC$uL3 literal 0 HcmV?d00001 diff --git a/packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/checkbox-screenshot-test-js-checkbox-unchecked-screenshot-have-to-match-checkbox-in-unchecked-state-with-focus-1-294d3.snap.png b/packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/checkbox-screenshot-test-js-checkbox-unchecked-screenshot-have-to-match-checkbox-in-unchecked-state-with-focus-1-294d3.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..782b36688f070239542c7827489d0b4895746115 GIT binary patch literal 536 zcmeAS@N?(olHy`uVBq!ia0vp^79h;Q1|(OsS<3+_#^NA%Cx&(BWL^Tt?OPJeQjavmfrf=dk(ex02ig>lK&zD{Y?CQya==klSikA)k~9W1Xg;qd)jw`%>hS0~EUyDLnZwlF!SF1~y%lI^>GmfLcmK=)rc zskt&m%UBP;InySeo8Nv_aILkpny}ZqIn6-_<6QnVBZ3p?9B?Qvf6uy~A$wMT?Cpg2 R62Pct@O1TaS?83{1OQN~@{a%j literal 0 HcmV?d00001 diff --git a/packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/checkbox-screenshot-test-js-checkbox-unchecked-screenshot-have-to-match-checkbox-in-unchecked-state-with-hover-1-b3d7b.snap.png b/packages/dnb-ui-lib/src/components/checkbox/__tests__/__snapshots__/checkbox-screenshot-test-js-checkbox-unchecked-screenshot-have-to-match-checkbox-in-unchecked-state-with-hover-1-b3d7b.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..f1c92d8f9747e74cf2b2606271e645086e06beb2 GIT binary patch literal 408 zcmeAS@N?(olHy`uVBq!ia0vp^79h;Q1|(OsS<3+_#^NA%Cx&(BWL^Te0eb-L`*ExHEXUMMoYVr~4bu=l9<~t>N4`A^PMdoyAAq{`t;OKbLW9y2D$^fNHiY^AOB? z>z<@dR(Y6Zm%cIX^S+x;;_h=Y=^dKjC(v;=Wa6$(GgLU!A8$Mo=CeE2aLEm6nWKgb z%i9_MrZq2a{u}c;{G8#Q*@m@si2|;7zEmj{ch)vhn#daWWtCne>%!aqW8DiWv&v*R1 zrKs=qZ+3>hY}1t+PyIiv&DNs-M58ZqiKaYjUFEHP=NDYPbxylG_pDzahR=YW46k~i ZzCS+k-^|;5UcjJc@O1TaS?83{1OS#rw1@xz literal 0 HcmV?d00001 diff --git a/packages/dnb-ui-lib/src/components/checkbox/index.js b/packages/dnb-ui-lib/src/components/checkbox/index.js new file mode 100644 index 00000000000..ec92ac79f76 --- /dev/null +++ b/packages/dnb-ui-lib/src/components/checkbox/index.js @@ -0,0 +1,8 @@ +/** + * Component Entry + * + */ + +import Checkbox from './Checkbox' +export default Checkbox +export * from './Checkbox' diff --git a/packages/dnb-ui-lib/src/components/checkbox/style.js b/packages/dnb-ui-lib/src/components/checkbox/style.js new file mode 100644 index 00000000000..0c4abe21fbe --- /dev/null +++ b/packages/dnb-ui-lib/src/components/checkbox/style.js @@ -0,0 +1,6 @@ +/** + * Web Style Import + * + */ + +import './style/dnb-checkbox.scss' diff --git a/packages/dnb-ui-lib/src/components/checkbox/style/_checkbox.scss b/packages/dnb-ui-lib/src/components/checkbox/style/_checkbox.scss new file mode 100644 index 00000000000..69331cf1a04 --- /dev/null +++ b/packages/dnb-ui-lib/src/components/checkbox/style/_checkbox.scss @@ -0,0 +1,118 @@ +/* +* Checkbox component +* +*/ + +:root { + --checkbox-height: 1.5rem; + --checkbox-width: 1.5rem; + --checkbox-border-width: 0.125rem; +} + +.dnb-checkbox { + user-select: none; + + display: inline-flex; + flex-direction: column; + align-items: flex-start; + vertical-align: middle; + + width: auto; + + margin: 0; + padding: 0; + + color: var(--color-white); + + &__shell { + position: relative; + + display: flex; + align-items: center; + justify-content: center; + + width: var(--checkbox-height); + height: var(--checkbox-height); + + // vertical alignment + transform: translateY( + -0.0625rem + ); // ajust the shell to the inherited line-height for 1px + } + label + &[class*='__form-status'] { + vertical-align: top; + } + + &__focus, + &__button, + &__gfx { + position: absolute; + z-index: 4; + + border-radius: 0.25rem; + } + &__button { + border: var(--checkbox-border-width) solid transparent; + } + &__focus { + display: none; + @include fakeFocus(); + } + &__focus, + &__button { + width: calc(var(--checkbox-width) - 0.25rem); + height: calc(var(--checkbox-height) - 0.25rem); + } + &__gfx { + position: absolute; + width: var(--checkbox-height); + height: var(--checkbox-height); + + transition: opacity 200ms ease-out, transform 200ms ease-out; + fill: currentColor; + shape-rendering: geometricPrecision; + } + + /* + * When checkbox is OFF + * aka when the checkbox is not :checked + */ + &__input:not(:checked) ~ &__gfx { + opacity: 0; + transform: scale(0.8); + } + + /* + * When checkbox is ON + * aka when the checkbox is :checked + */ + &__input:checked ~ &__gfx { + opacity: 1; + transform: scale(1); + } + + &__input { + opacity: 0; + + position: absolute; + top: 0; + left: 0; + z-index: 5; + + width: var(--checkbox-width); + height: var(--checkbox-height); + + margin: 0; + padding: 0; + + border: 0; + } + + &__input:not([disabled]) { + cursor: pointer; + } + + > .dnb-form-status { + margin-top: 0.125rem; + } +} diff --git a/packages/dnb-ui-lib/src/components/checkbox/style/dnb-checkbox.scss b/packages/dnb-ui-lib/src/components/checkbox/style/dnb-checkbox.scss new file mode 100644 index 00000000000..da6105549ea --- /dev/null +++ b/packages/dnb-ui-lib/src/components/checkbox/style/dnb-checkbox.scss @@ -0,0 +1,14 @@ +/* +* DNB Checkbox +* +*/ + +@import '../../../style/components/imports.scss'; +@import '../../form-label/style/dnb-form-label.scss'; +@import '../../form-status/style/dnb-form-status.scss'; + +.dnb-checkbox { + @include componentReset(); +} + +@import './_checkbox.scss'; diff --git a/packages/dnb-ui-lib/src/components/checkbox/style/index.js b/packages/dnb-ui-lib/src/components/checkbox/style/index.js new file mode 100644 index 00000000000..45a1aaa4913 --- /dev/null +++ b/packages/dnb-ui-lib/src/components/checkbox/style/index.js @@ -0,0 +1,6 @@ +/** + * Web Style Import + * + */ + +import './dnb-checkbox.scss' diff --git a/packages/dnb-ui-lib/src/components/checkbox/style/themes/dnb-checkbox-theme-ui.scss b/packages/dnb-ui-lib/src/components/checkbox/style/themes/dnb-checkbox-theme-ui.scss new file mode 100644 index 00000000000..2dad6ffc9da --- /dev/null +++ b/packages/dnb-ui-lib/src/components/checkbox/style/themes/dnb-checkbox-theme-ui.scss @@ -0,0 +1,138 @@ +/* +* Checkbox theme +* +*/ + +@import '../../../../style/themes/imports.scss'; + +.dnb-checkbox { + /* + * When checkboxed OFF + * aka when the checkbox is not :checked + */ + &__input:not(:checked) ~ &__button { + background-color: var(--color-white); + border-color: var(--color-sea-green-alt); + } + + /* + * When checkboxed ON + * aka when the checkbox is :checked + */ + &__input:checked ~ &__button { + background-color: var(--color-sea-green-alt); + } + + /* + * On disabled + * + */ + &__input[disabled] ~ &__button { + border-color: var(--color-mint-green-50); + } + &__input[disabled]:checked ~ &__button { + border-color: transparent; + background-color: var(--color-sea-green-alt-30); + } + + /* + * On hover + * + */ + &__input:not([disabled]):not(:focus):hover ~ &__button { + background-color: var(--color-mint-green-50); + } + &__input:not([disabled]):not(:focus):checked:hover ~ &__button { + border-color: transparent; + } + &__input:not([disabled]):not(:focus):hover ~ &__gfx { + color: var(--color-sea-green-alt); + } + + /* + * On active + * + */ + /* stylelint-disable */ + &__input:not([disabled]):active ~ &__button { + background-color: var(--color-mint-green-50); + border-color: transparent; + } + &__input:not([disabled]):active ~ &__gfx { + color: var(--color-white); + } + /* stylelint-enable */ + + /* + * On focus + * + */ + /* stylelint-disable */ + &__input:not([disabled]):focus ~ &__button { + html[data-whatinput='keyboard'] & { + border: none; + background-color: var(--color-mint-green-50); + } + } + &__input:not([disabled]):focus ~ &__gfx { + html[data-whatinput='keyboard'] & { + color: var(--color-sea-green-alt); + } + } + &__input:not([disabled]):focus ~ &__button &__focus, + &__input:not([disabled]):active ~ &__button &__focus { + display: block; + } + &__input:not([disabled]):not(:checked):focus ~ &__button, + &__input:not([disabled]):not(:checked):active ~ &__button { + background-color: var(--color-mint-green-50); + } + /* stylelint-enable */ + + /* + * On error state + * + */ + // change button color + // fake border outside + &__status--error + &__input:not([disabled]):not(:focus):not(:active) + ~ &__button { + border: none; + } + &__status--error + &__input:not([disabled]):not(:focus):not(:active) + ~ &__button + &__focus { + display: block; + @include fakeBorder(var(--color-cherry-red), $focusRingWidth); + } + &__status--error &__input:not([disabled]):not(:focus):hover ~ &__button { + border-color: var(--color-cherry-red); + background-color: var(--color-cherry-red-80); + } + &__status--error + &__input:not([disabled]):not(:focus):not(:active):not(:hover) + ~ &__button { + border-color: var(--color-cherry-red-80); + } + &__status--error + &__input:not([disabled]):not(:focus):not(:active):not(:hover):checked + ~ &__button { + background-color: var(--color-cherry-red); + } + // check gfx color + &__status--error &__input:not([disabled]):not(:focus):hover ~ &__gfx { + color: var(--color-cherry-red); + } + &__status--error + &__input:not([disabled]):not(:focus):not(:active):not(:hover) + ~ &__gfx { + color: var(--color-cherry-red-80); + } + + // ajust the form-status to the inner border for 3px + > .dnb-form-status { + transform: translateY(0.1875rem); + } +} diff --git a/packages/dnb-ui-lib/src/components/checkbox/style/themes/ui.js b/packages/dnb-ui-lib/src/components/checkbox/style/themes/ui.js new file mode 100644 index 00000000000..7d92253a873 --- /dev/null +++ b/packages/dnb-ui-lib/src/components/checkbox/style/themes/ui.js @@ -0,0 +1,6 @@ +/** + * Imports the default theme + * + */ + +import './dnb-checkbox-theme-ui.scss' diff --git a/packages/dnb-ui-lib/src/components/checkbox/web-component.js b/packages/dnb-ui-lib/src/components/checkbox/web-component.js new file mode 100644 index 00000000000..68737cc2ae4 --- /dev/null +++ b/packages/dnb-ui-lib/src/components/checkbox/web-component.js @@ -0,0 +1,9 @@ +/** + * This file is used to enable Web Components + * + */ + +export * from './index' +import { enableWebComponents } from '../index' + +enableWebComponents() diff --git a/packages/dnb-ui-lib/src/components/index.js b/packages/dnb-ui-lib/src/components/index.js index db2433e4c78..4595f72f8b4 100644 --- a/packages/dnb-ui-lib/src/components/index.js +++ b/packages/dnb-ui-lib/src/components/index.js @@ -11,6 +11,7 @@ // import all the aviable components import Button from './button/Button' +import Checkbox from './checkbox/Checkbox' import DatePicker from './date-picker/DatePicker' import Dropdown from './dropdown/Dropdown' import FormLabel from './form-label/FormLabel' @@ -32,6 +33,7 @@ import Tabs from './tabs/Tabs' // define / export all the aviable components export { Button, + Checkbox, DatePicker, Dropdown, FormLabel, diff --git a/packages/dnb-ui-lib/src/components/lib.js b/packages/dnb-ui-lib/src/components/lib.js index 360119f5651..9e08ddac1b5 100644 --- a/packages/dnb-ui-lib/src/components/lib.js +++ b/packages/dnb-ui-lib/src/components/lib.js @@ -13,6 +13,7 @@ import { registerElement } from '../shared/component-helper' // import all the aviable components import Button from './button/Button' +import Checkbox from './checkbox/Checkbox' import DatePicker from './date-picker/DatePicker' import Dropdown from './dropdown/Dropdown' import FormLabel from './form-label/FormLabel' @@ -34,6 +35,7 @@ import Tabs from './tabs/Tabs' // define / export all the aviable components export { Button, + Checkbox, DatePicker, Dropdown, FormLabel, @@ -56,6 +58,7 @@ export { export const getComponents = () => { return { Button, + Checkbox, DatePicker, Dropdown, FormLabel, diff --git a/packages/dnb-ui-lib/src/components/switch/__tests__/Switch.screenshot.test.js b/packages/dnb-ui-lib/src/components/switch/__tests__/Switch.screenshot.test.js index 3c8d33344bb..61513a7603d 100644 --- a/packages/dnb-ui-lib/src/components/switch/__tests__/Switch.screenshot.test.js +++ b/packages/dnb-ui-lib/src/components/switch/__tests__/Switch.screenshot.test.js @@ -70,4 +70,10 @@ describe('Switch checked screenshot', () => { }) expect(screenshot).toMatchImageSnapshot() }) + it('have to match switch in error state', async () => { + const screenshot = await testPageScreenshot({ + selector: '[data-dnb-test="switch-error"] .dnb-switch' + }) + expect(screenshot).toMatchImageSnapshot() + }) }) diff --git a/packages/dnb-ui-lib/src/components/switch/__tests__/__snapshots__/switch-screenshot-test-js-switch-checked-screenshot-have-to-match-switch-in-error-state-1-83a9c.snap.png b/packages/dnb-ui-lib/src/components/switch/__tests__/__snapshots__/switch-screenshot-test-js-switch-checked-screenshot-have-to-match-switch-in-error-state-1-83a9c.snap.png new file mode 100644 index 0000000000000000000000000000000000000000..ded66bb439f5456f944890873bb3f913402d9b80 GIT binary patch literal 4250 zcmaJ_Ra6vEw;nnb5GfHUrG^$zT0pv_!J%7VsB!4-?ov{e9D0bM29XkhL8Kd`#G!`) z>3`OJ_}9Ak;Xa&mUiR8&@9*sMt#9x6H#(~K$RCjd0DybyYOnQiCmgp-Nr`bgGIy{E z0HC%}f30BXSFm5`|K8B3HMR!?8Ps4?a>3L{KYpmt6-)++%uzoVnhw`qS1ejD@` zV%yUCQYo?YR*iZ5oA)-rYuaUAl=*55fj$%?v$Jab9b{TXkyS~kznI}j;oTNmQZGL7j0 ze9hSXD#6Y&^5?)*lva3-0K_6IpZz(j@YS(j6=DmleXBNMJoPA-R8mkxEU`V{mcdZI z{eIYYX;o@WE_%^TQ%+xbtH21+_R!gj46|mxd9zgsb$@_F8Z14uDj!-s=MBu9(n%;~LFI>kouiL@YVl{*Y5V2k7@3R^Jg znO<&X`{xYL(>-`Q$5rm?^DS_XuxMZT<9MLh)fWd<6;3*pDNdm|e!{iS$F z!3!Y-e%`9O8O?#8@TKx-%om!?M!Dfrr=(OEZ2O4nB^DN>xx7?{9h3@%|0B7vEPlkWaZ6 zr@P;`36RPy@NXaGiwaX|d@BTL?3doFMd`|(IrVIm*PXR?{NgBLLGB|f+du!0tym$z zCuAhI-=K3d@UQ$bY?#Ktg;FFjv}|~AcWw}?Qj4)>`p8lJMvz7SHl(TLxKJD$VuG9Kw0Trgvz%bD|2_ZbPMhKP z)^V*w_I(%w$sdhUhV_aUn{*$q(@VjX;yN6T_raHFcGBQeZB%h~bj7i-GKGFKoxwQD z&!@mDBF*2K{3M)w%7uFd_DjuNC<7z(>{KY%J!Pp-MEE0PI?2yhZ@s*Wko zTaw`+Q_^CzdEsEqoX^#|O4uvp7|!OC5`_w%lbD7X5Tcd7VyrsEm z!TAVRjLlQnF!zEM$@b{$H@%sQJO|5Vm4Zx*d14%)^5#M>hyHLP20Si;jOCawswVuW4;4@xFUb>kFP(v;bHJajAdN&wLV%3sFVq#jU=|&r6Z^Bbw-v}`q_KHh33)Id#SIas|{49*TqaRUae1oAq)=f zCFHYhvGJhoP$M~3+v37k7yH0QZMC7S-#xXn(yQR#J*$@CpFYUjy*rL~3;A}p!Ara>4$NF zlP~W!-ent1oXT@;-h%wa*{mDvq@Rqd=UN6bl)N*}YVUx9fB`X7Kpj+uCR9NS?~H)UgI~|PO4a5 z1PRc!w47?|*xYXBGp)c)V0I*_IVW>HD|Sx3HimRDST(zesokeTmzQQ9OIMsip*dp* zoYCfm=?bi|1jZs7uHyXpt7yo=F zn4+!}GtmNhOmTZd!+L!rOO;go9r)bw7-GgWd3#2lP%7cN;ilnQ?SGazZJMN#v*N`- z|2ci}_Ldwd0p9!oDi;-mu!RQPS!4~4zxO&D;=gm`JWnnD?g~Fx^YoX5=Ux+pbq@^4 zG@Y<)FMD#jJ_*XY<*gbuKY7$Ni}uwz3%D559H(UkJ8j9HA1_Vq?g4pi)`wt#m->3W zESkA#IcwGz%aAk&q4D4okuoFX_}~2Cz;+C_?Aqmsx@mhQmU9r5EOec{0p)JKQH*4F zbRQ$rJQaBa z(W+-uLZr+(ZZ+vwq>?|_4dSOgSd51;$P8Svo~M0S*m}%7mTsTACDf*)obglxHh47T z;BmCDC(StBNo7)Af%&~4z9-0EV&zSKhuLBn&3{kZmV8MB*i~1j^xxBK-MQ1+ikIT3 zk*NDK9lJSaT2v53F>7zn5lBZ41cDyJpi=D){b~oS^5JSAMuN`w&*~e}lCMGt*Y?Nq z|2$;swW`o234-}tDp84D-2L4t#$oKb5030#8vIR z-;BATDI=&@%4Adm^C30%Phr;k?eY7nle<&Bb`CrVKk|?j-##Wy89w;Dzb7Q{?g3_A z0#)v$sF*oM*vXPP@%>25YU2@XK55Lhy!=x*XExnbr@7m;7nSr0M)$%^1m5!{ikX;- zy~TjP?@95{AGuwvN1|D{O0tFLG0nqF673`sKd6St#tV7-Ho{863i>YG#>XoH%^w5& zl~qxGsa&7atxhGeeqFfIc)2HXy*@UZe>(=_*#l0m*u4QR47jCThrmWZ+?Q!DW2D9I zTZYOtA{0caX(ui}vz3CK&dL+XrLmC6kv4`$(3t{Z7*XcBVY5$bGCW?!b;()STC^x| z!(i2~J7l=3zi9g^Y)TOK0lB_8+Kok~HU%siH~Ah|Th4TLAtds3SwE_lF0cGH%^Mi4 zXAmka?;V~CxoP+RM|Y~JV}rR3Mxr|``eTYO%m$PTrMzl=J9nS3j)x5j9jX_13=CZa zuhy3KeNyjCoX4rdLQul~$C-i0B2a3LWMIii2Sl^M{?dvF`z0_)2C%xf*ta>N3V8Fz zQs=hO?sU=*Gr5O-Wb)&H>{!c#^0`b?E?vGv1~u48SC1wzk>Z1di`b+}a(PWhOuDWd z%EZ5&^6yOdfCydoXK``2&;WKCiB;aet=CFC$t1nO85zT}-rJZFUshggYm-$bg;a!} zmI^0i&|+2$>9QEAmJ&aG78AKn*w7+|#KeR9DlAksEjaN%qUVhg{H?8l@ICCwO*p|A zQpVewggf3xde+gt=@ec69mv1w+;ZqBC@GPHV;^Gsji5MkijA0FC9_Lx?jHZkBv6i7 z!Hr0LNMlakk>^wEgOj#@XB9VqEJN0zU9U-5_LW1^QrVb*+{7PJtC4a&@}6Ne0;}s8 z!Jry=T~`7&@cihsnraw#&3g7>1AJ{tDbJl*{9}u>Z$=@UpuY6z;=p3m9|P4=0i#Qw z?3OH0Y4daSaEImCR8568fY1&o1?aG;pzb|q_rj6kFAPPlKKvdNzr*U={Vop?z84^K z_|dx>N7`=M$6cX^H?O0kC)Q?q_}$jC7X8-la=dU15e4EuRoB=qTXdpvZ}}zkEc%LD zYqQ9~hkqm4KR}P0TGzwy8$<`bVjh#t%rxrt6ag`6%Cl0 z@xDUD_G?ZfJv|`$1|`{eN+J`>7iaOZ_ps~I7xF5Dv{>rqvl!ul|};Mcwit18OT5~l5+Cb z$#qzO-~M;W2rAD>^bwY}Y3z%p4qOfdS$A}PHeZQ3;mx89`H-cQDt4%rYrvY+bBa1) z0;;0|8^9stZyipyI4kSwcgB*f;Pqdk6f8O$Pl^I}GpAAnBKxrZ5p^NM7tq=^+O*Ue z{eXehc#s^?Vzw-b>73pWPb|OSaLF?+f$1TirO zg<19^Zo21i;j$sxtC~B;%cn!EZzF>$Gf*St*3{#@_gNxZ+{j;H`H)gy0V!O%*BFul z=KJhsNy$XD>e{hvNSFNwGMyTF=At&UX9qtS&3@h|geaiZ4b6^gf8v>DCsuoT2uM9! z8NB(!$hZFPU|OKwYFwDQbFoc2$IeIziRsb>(l?Y b(Y5^C2b6C0P|+xE<^WJv)_Gm0XdUq%{fARM literal 0 HcmV?d00001 diff --git a/packages/dnb-ui-lib/src/index.js b/packages/dnb-ui-lib/src/index.js index ed45e4b4bc4..cd10e712fd7 100644 --- a/packages/dnb-ui-lib/src/index.js +++ b/packages/dnb-ui-lib/src/index.js @@ -11,6 +11,7 @@ // import all the aviable components and patterns import Button from './components/button/Button' +import Checkbox from './components/checkbox/Checkbox' import DatePicker from './components/date-picker/DatePicker' import Dropdown from './components/dropdown/Dropdown' import FormLabel from './components/form-label/FormLabel' @@ -52,6 +53,7 @@ import Ul from './elements/Ul' // define / export all the aviable components export { Button, + Checkbox, DatePicker, Dropdown, FormLabel, diff --git a/packages/dnb-ui-lib/src/style/dnb-ui-components.scss b/packages/dnb-ui-lib/src/style/dnb-ui-components.scss index 3630765b274..d51175976f1 100644 --- a/packages/dnb-ui-lib/src/style/dnb-ui-components.scss +++ b/packages/dnb-ui-lib/src/style/dnb-ui-components.scss @@ -6,6 +6,7 @@ @import './core/utilities.scss'; @import '../components/button/style/_button.scss'; +@import '../components/checkbox/style/_checkbox.scss'; @import '../components/date-picker/style/_date-picker.scss'; @import '../components/dropdown/style/_dropdown.scss'; @import '../components/form-label/style/_form-label.scss'; diff --git a/packages/dnb-ui-lib/src/style/themes/theme-ui/dnb-theme-ui.scss b/packages/dnb-ui-lib/src/style/themes/theme-ui/dnb-theme-ui.scss index 9a4421d30e0..5999ff69a8c 100644 --- a/packages/dnb-ui-lib/src/style/themes/theme-ui/dnb-theme-ui.scss +++ b/packages/dnb-ui-lib/src/style/themes/theme-ui/dnb-theme-ui.scss @@ -25,6 +25,7 @@ */ @import '../../../components/button/style/themes/dnb-button-theme-ui.scss'; +@import '../../../components/checkbox/style/themes/dnb-checkbox-theme-ui.scss'; @import '../../../components/date-picker/style/themes/dnb-date-picker-theme-ui.scss'; @import '../../../components/dropdown/style/themes/dnb-dropdown-theme-ui.scss'; @import '../../../components/form-label/style/themes/dnb-form-label-theme-ui.scss'; diff --git a/packages/dnb-ui-lib/stories/componentsStories.js b/packages/dnb-ui-lib/stories/componentsStories.js index cecaa8ffafc..5fd0c01d558 100644 --- a/packages/dnb-ui-lib/stories/componentsStories.js +++ b/packages/dnb-ui-lib/stories/componentsStories.js @@ -19,6 +19,7 @@ import { FormLabel, Dropdown, Switch, + Checkbox, Logo, StepIndicator, ProgressIndicator, @@ -778,6 +779,58 @@ stories.push([ ) ]) +stories.push([ + 'Checkbox', + () => ( + + + +

+ Text: Unchecked: + +

+ + + { + console.log('on_change', checked) + }} + /> + + + { + console.log('on_change', checked) + }} + /> + + + + + + + + + + + + + + + + ) +]) const exampleTabsContent = { first: () =>

First

,