-
Notifications
You must be signed in to change notification settings - Fork 7
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
291dcd6
commit 72c5dce
Showing
8 changed files
with
990 additions
and
1,144 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| import React from 'react'; | ||
| import classNames from 'classnames'; | ||
|
|
||
| import './styles/checkbox.scss'; | ||
|
|
||
| type CheckboxProps = { | ||
| /** | ||
| * The label content. | ||
| */ | ||
| label?: React.ReactNode; | ||
| } & React.ComponentPropsWithoutRef<'input'>; | ||
|
|
||
| const Checkbox = React.forwardRef<HTMLInputElement, CheckboxProps>( | ||
| function Checkbox({ className, label, id, ...rest }, ref) { | ||
| return ( | ||
| <label className="ods-checkbox__root" htmlFor={id}> | ||
| <input | ||
| ref={ref} | ||
| id={id} | ||
| className={classNames('ods-checkbox', className)} | ||
| {...rest} | ||
| type="checkbox" | ||
| /> | ||
| <span className="ods-checkbox__checkmark"></span> | ||
| {label && ( | ||
| <span className="ods-typography ods-typography__paragraph ods-checkbox__label"> | ||
| {label} | ||
| </span> | ||
| )} | ||
| </label> | ||
| ); | ||
| } | ||
| ); | ||
|
|
||
| export default Checkbox; |
31 changes: 31 additions & 0 deletions
31
packages/ocean-components/src/Checkbox/__tests__/Checkbox.test.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,31 @@ | ||
| import React from 'react'; | ||
| import { render } from '@testing-library/react'; | ||
|
|
||
| import Checkbox from '../Checkbox'; | ||
|
|
||
| test('renders element properly', () => { | ||
| const { container, getByTestId } = render( | ||
| <Checkbox data-testid="checkbox-test" className="custom-class" /> | ||
| ); | ||
|
|
||
| expect(container.firstChild).toMatchInlineSnapshot(` | ||
| <label | ||
| class="ods-checkbox__root" | ||
| > | ||
| <input | ||
| class="ods-checkbox custom-class" | ||
| data-testid="checkbox-test" | ||
| type="checkbox" | ||
| /> | ||
| <span | ||
| class="ods-checkbox__checkmark" | ||
| /> | ||
| </label> | ||
| `); | ||
| expect(getByTestId('checkbox-test')).toHaveAttribute('type', 'checkbox'); | ||
| }); | ||
|
|
||
| test('renders a label for the checkbox', () => { | ||
| const { getByText } = render(<Checkbox label="My label" />); | ||
| expect(getByText('My label')).toHaveClass('ods-checkbox__label'); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { default } from './Checkbox'; |
65 changes: 65 additions & 0 deletions
65
packages/ocean-components/src/Checkbox/stories/Checkbox.stories.mdx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,65 @@ | ||
| import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks'; | ||
| import Checkbox from '../Checkbox'; | ||
|
|
||
| <Meta title="Components/Checkbox" component={Checkbox} /> | ||
|
|
||
| # Checkbox API | ||
|
|
||
| The API documentation of the Checkbox React component. Learn more about the props and the CSS customization points. | ||
|
|
||
| ## Import | ||
|
|
||
| ```javascript | ||
| import { Checkbox } from '@useblu/ocean-components'; | ||
| ``` | ||
|
|
||
| ## Usage | ||
|
|
||
| <Canvas withSource="open" withToolbar> | ||
| <Story name="Usage"> | ||
| <Checkbox id="checkbox-usage" label="Label" checked readOnly /> | ||
| </Story> | ||
| </Canvas> | ||
|
|
||
| ## Props | ||
|
|
||
| <ArgsTable of="." /> | ||
|
|
||
| The ref is forwarded to the root element. | ||
|
|
||
| Any other props supplied will be provided to the root element (native element). | ||
|
|
||
| ## CSS | ||
|
|
||
| | Global class | Description | | ||
| | -------------------------- | --------------------------------------- | | ||
| | .ods-checkbox\_\_root | Styles applied to the root element. | | ||
| | .ods-checkbox | Styles applied to the checkbox element. | | ||
| | .ods-checkbox\_\_checkmark | Styles applied to the span element. | | ||
| | .ods-checkbox\_\_label | Styles applied to the span element. | | ||
|
|
||
| If that's not sufficient, you can check the [implementation of the component](https://github.com/Pagnet/ocean-ds-web/blob/master/src/Checkbox/Checkbox.tsx) for more detail. | ||
|
|
||
| ## Playground | ||
|
|
||
| <Canvas> | ||
| <Story | ||
| name="Playground" | ||
| args={{ | ||
| label: 'Label', | ||
| disabled: false, | ||
| }} | ||
| argTypes={{ | ||
| label: { | ||
| control: 'text', | ||
| }, | ||
| disabled: { | ||
| control: 'boolean', | ||
| }, | ||
| }} | ||
| > | ||
| {(props) => <Checkbox id="checkbox-playground" {...props} />} | ||
| </Story> | ||
| </Canvas> | ||
|
|
||
| <ArgsTable story="Playground" of="." /> |
70 changes: 70 additions & 0 deletions
70
packages/ocean-components/src/Checkbox/styles/checkbox.scss
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| @import '~@useblu/tokens/dist/web/tokens.scss'; | ||
|
|
||
| .ods-checkbox__root { | ||
| display: flex; | ||
| user-select: none; | ||
| } | ||
|
|
||
| .ods-checkbox { | ||
| opacity: 0; | ||
| height: 0; | ||
| width: 0; | ||
| margin: 0; | ||
|
|
||
| &__label { | ||
| cursor: pointer; | ||
| padding-left: $spacing-inline-xxs; | ||
| } | ||
|
|
||
| &__checkmark { | ||
| cursor: pointer; | ||
| width: 24px; | ||
| height: 24px; | ||
| border: solid 2px $color-interface-dark-up; | ||
| border-radius: $border-radius-sm; | ||
| background-color: $color-interface-light-pure; | ||
| box-sizing: border-box; | ||
|
|
||
| &:hover { | ||
| background-color: $color-interface-light-up; | ||
| border-color: $color-interface-dark-up; | ||
| } | ||
|
|
||
| &:after { | ||
| content: ''; | ||
| display: none; | ||
| margin-top: 2px; | ||
| margin-left: 6px; | ||
| width: 6px; | ||
| height: 10px; | ||
| border: solid white; | ||
| border-width: 0 2px 2px 0; | ||
| transform: rotate(40deg); | ||
| } | ||
| } | ||
|
|
||
| &:checked ~ &__checkmark:after { | ||
| display: block; | ||
| } | ||
|
|
||
| &:disabled ~ &__checkmark, | ||
| &:disabled ~ &__label { | ||
| cursor: not-allowed; | ||
| color: $color-interface-light-deep; | ||
| } | ||
|
|
||
| &:checked:not(:disabled) ~ &__checkmark { | ||
| border-color: $color-highlight-pure; | ||
| background-color: $color-highlight-pure; | ||
| } | ||
|
|
||
| &:checked:disabled ~ &__checkmark { | ||
| background-color: $color-interface-light-deep; | ||
| border-color: $color-interface-light-deep; | ||
| } | ||
|
|
||
| &:disabled:not(:checked) ~ &__checkmark { | ||
| background-color: $color-interface-light-pure; | ||
| border-color: $color-interface-light-deep; | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.