-
Notifications
You must be signed in to change notification settings - Fork 8
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge branch 'main' into renovate/babel-cli-7.x
- Loading branch information
Showing
14 changed files
with
472 additions
and
106 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| --- | ||
| "@justeattakeaway/pie-checkbox-group": minor | ||
| "pie-storybook": patch | ||
| --- | ||
|
|
||
| [Added] - main logic for checkbox-group |
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,6 @@ | ||
| --- | ||
| "@justeattakeaway/pie-checkbox": minor | ||
| --- | ||
|
|
||
| [Added] - event listener for pie-checkbox-group-disabled custom event | ||
| [Removed] - aria prop since aria attributes should be passed to the component directly |
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 |
|---|---|---|
| @@ -1,36 +1,97 @@ | ||
| import { html } from 'lit'; | ||
|
|
||
| import { ifDefined } from 'lit/directives/if-defined.js'; | ||
| /* eslint-disable import/no-duplicates */ | ||
| import '@justeattakeaway/pie-checkbox-group'; | ||
| import { CheckboxGroupProps } from '@justeattakeaway/pie-checkbox-group'; | ||
| import { CheckboxGroupProps, defaultProps, statusTypes } from '@justeattakeaway/pie-checkbox-group'; | ||
| /* eslint-enable import/no-duplicates */ | ||
|
|
||
| import { type StoryMeta } from '../types'; | ||
| import { createStory } from '../utilities'; | ||
|
|
||
| import '@justeattakeaway/pie-link'; | ||
| import '@justeattakeaway/pie-checkbox'; | ||
|
|
||
| type CheckboxGroupStoryMeta = StoryMeta<CheckboxGroupProps>; | ||
|
|
||
| const defaultArgs: CheckboxGroupProps = {}; | ||
| const defaultArgs: CheckboxGroupProps = { | ||
| ...defaultProps, | ||
| }; | ||
|
|
||
| const checkboxGroupStoryMeta: CheckboxGroupStoryMeta = { | ||
| title: 'Checkbox Group', | ||
| component: 'pie-checkbox-group', | ||
| argTypes: {}, | ||
| argTypes: { | ||
| name: { | ||
| description: 'The name associated with the group.', | ||
| control: 'text', | ||
| }, | ||
| label: { | ||
| description: 'The visible label for the checkbox group.', | ||
| control: 'text', | ||
| }, | ||
| status: { | ||
| description: 'The status of the checkbox group component / assistive text. Can be default, success or error.', | ||
| control: 'select', | ||
| options: statusTypes, | ||
| defaultValue: { | ||
| summary: defaultProps.status, | ||
| }, | ||
| }, | ||
| disabled: { | ||
| description: 'If true, disables the whole checkbox group. If you need to disable only one checkbox pass the disabled prop to the needed checkbox.', | ||
| control: 'boolean', | ||
| defaultValue: { | ||
| summary: defaultArgs.disabled, | ||
| }, | ||
| }, | ||
| assistiveText: { | ||
| description: 'An optional assistive text to display below the checkbox group.', | ||
| control: 'text', | ||
| defaultValue: { | ||
| summary: '', | ||
| }, | ||
| }, | ||
| }, | ||
| args: defaultArgs, | ||
| parameters: { | ||
| design: { | ||
| type: 'figma', | ||
| url: '', | ||
| url: 'https://www.figma.com/file/aD4m0j97Ruw8Q4S5lED2Bl/Checkbox-audit?node-id=9938-14138&t=1V1VEYmtArFih6AX-4', | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| export default checkboxGroupStoryMeta; | ||
|
|
||
| // TODO: remove the eslint-disable rule when props are added | ||
| // eslint-disable-next-line no-empty-pattern | ||
| const Template = ({}: CheckboxGroupProps) => html` | ||
| <pie-checkbox-group></pie-checkbox-group> | ||
| const Template = ({ | ||
| name, | ||
| label, | ||
| assistiveText, | ||
| status, | ||
| disabled, | ||
| }: CheckboxGroupProps) => html` | ||
| <p>Please note, the checkboxes are separate components. See | ||
| <pie-link href="/?path=/story/checkbox--default">pie-checkbox</pie-link>.</p> | ||
| <pie-checkbox-group | ||
| name="${ifDefined(name)}" | ||
| label="${ifDefined(label)}" | ||
| assistiveText="${ifDefined(assistiveText)}" | ||
| status=${ifDefined(status)} | ||
| ?disabled="${disabled}" | ||
| > | ||
| <pie-checkbox | ||
| name="checkbox-one" | ||
| label="checkbox 1"> | ||
| </pie-checkbox> | ||
| <pie-checkbox | ||
| name="checkbox-two" | ||
| label="checkbox 2"> | ||
| </pie-checkbox> | ||
| <pie-checkbox | ||
| name="checkbox-three" | ||
| label="checkbox 3"> | ||
| </pie-checkbox> | ||
| </pie-checkbox-group> | ||
| `; | ||
|
|
||
| export const Default = createStory<CheckboxGroupProps>(Template, defaultArgs)(); |
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
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 |
|---|---|---|
| @@ -1,8 +1,3 @@ | ||
| import React from 'react'; | ||
| /** | ||
| * TODO: Verify if ReactBaseType can be set as a more specific React interface | ||
| * Use the React IntrinsicElements interface to find how to map standard HTML elements to existing React Interfaces | ||
| * Example: an HTML button maps to `React.ButtonHTMLAttributes<HTMLButtonElement>` | ||
| * https://github.com/DefinitelyTyped/DefinitelyTyped/blob/0bb210867d16170c4a08d9ce5d132817651a0f80/types/react/index.d.ts#L2829 | ||
| */ | ||
| export type ReactBaseType = React.HTMLAttributes<HTMLElement> | ||
|
|
||
| export type ReactBaseType = React.FieldsetHTMLAttributes<HTMLFieldSetElement> |
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 |
|---|---|---|
| @@ -1,3 +1,44 @@ | ||
| // TODO - please remove the eslint disable comment below when you add props to this interface | ||
| // eslint-disable-next-line @typescript-eslint/no-empty-interface | ||
| export interface CheckboxGroupProps {} | ||
| import { type ComponentDefaultProps } from '@justeattakeaway/pie-webc-core'; | ||
|
|
||
| export const statusTypes = ['default', 'success', 'error'] as const; | ||
|
|
||
| export interface CheckboxGroupProps { | ||
| /** | ||
| * The name associated with the group. | ||
| */ | ||
| name?: string; | ||
|
|
||
| /** | ||
| * The label value of the component | ||
| */ | ||
| label?: string; | ||
|
|
||
| /** | ||
| * An optional assistive text to display below the checkbox group. | ||
| */ | ||
| assistiveText?: string; | ||
|
|
||
| /** | ||
| * Same as the HTML disabled attribute - indicates whether or not the checkbox group is disabled. | ||
| */ | ||
| disabled?: boolean; | ||
|
|
||
| /** | ||
| * The status of the checkbox component / assistive text. Can be default, success or error. | ||
| */ | ||
| status?: typeof statusTypes[number]; | ||
| } | ||
|
|
||
| /** | ||
| * Event name for when checkbox group becomes disabled. | ||
| * | ||
| * @constant | ||
| */ | ||
| export const ON_CHECKBOX_GROUP_DISABLED = 'pie-checkbox-group-disabled'; | ||
|
|
||
| export type DefaultProps = ComponentDefaultProps<CheckboxGroupProps, 'status' | 'disabled'>; | ||
|
|
||
| export const defaultProps: DefaultProps = { | ||
| status: 'default', | ||
| disabled: false, | ||
| }; |
Oops, something went wrong.