@justeattakeaway/pie-checkbox-group 0.9.0 → 0.9.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/README.md +91 -19
  2. package/custom-elements.json +3 -3
  3. package/dist/index.js +1 -1
  4. package/package.json +4 -4
package/README.md CHANGED
@@ -1,43 +1,115 @@
1
- <p align="center">
2
- <img align="center" src="../../../readme_image.png" height="200" alt="">
3
- </p>
1
+ # @justeattakeaway/pie-checkbox-group
2
+ [Source Code](https://github.com/justeattakeaway/pie/tree/main/packages/components/pie-checkbox-group) | [Design Documentation](https://pie.design/components/checkbox) | [NPM](https://www.npmjs.com/package/@justeattakeaway/pie-checkbox-group)
4
3
 
5
- <p align="center">
4
+ <p>
6
5
  <a href="https://www.npmjs.com/@justeattakeaway/pie-checkbox-group">
7
6
  <img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-checkbox-group.svg">
8
7
  </a>
9
8
  </p>
10
9
 
11
- ## pie-checkbox-group
10
+ `@justeattakeaway/pie-checkbox-group` is a Web Component built using the Lit library. It offers a simple and accessible checkbox group component for web applications.
12
11
 
13
- `pie-checkbox-group` is a Web Component built using the Lit library.
12
+ ## Table of Contents
14
13
 
15
- It is a helper component that groups PieCheckbox components into a visual and functional group.
14
+ - [Installation](#installation)
15
+ - [Documentation](#documentation)
16
+ - [Properties](#properties)
17
+ - [Slots](#slots)
18
+ - [CSS Variables](#css-variables)
19
+ - [Events](#events)
20
+ - [Usage Examples](#usage-examples)
21
+ - [Questions and Support](#questions-and-support)
22
+ - [Contributing](#contributing)
16
23
 
17
- This component can be easily integrated into various frontend frameworks and customized through a set of properties.
24
+ ## Installation
18
25
 
26
+ > To install any of our web components in your application, we would suggest following the [getting started guide](https://webc.pie.design/?path=/docs/introduction-getting-started--docs) to set up your project.
19
27
 
20
- ## Installation
28
+ Ideally, you should install the component using the **`@justeattakeaway/pie-webc`** package, which includes all of the components. Or you can install the individual component package.
29
+
30
+ ## Documentation
31
+
32
+ ### Properties
33
+
34
+ | **Prop** | **Options** | **Description** | **Default** |
35
+ |------------------|--------------------------------------|-------------------------------------------------------------------------------------------------------------------------------------------------|--------------|
36
+ | `name` | - | The name associated with the group. | - |
37
+ | `disabled` | - | Same as the HTML `disabled` attribute – indicates whether or not the checkbox group is disabled. | `false` |
38
+ | `assistiveText` | - | Allows assistive text to be displayed below the checkbox group. | - |
39
+ | `isInline` | - | Inline (horizontal) positioning of checkbox items. | `false` |
40
+ | `status` | `"default"`, `"error"`, `"success"` | The status of the checkbox group / assistive text. If you use `status`, you must provide an `assistiveText` prop value for accessibility. | `"default"` |
41
+
42
+ ### Slots
43
+
44
+ | **Slot** | **Description** |
45
+ |--------------|----------------------------------------------------------------------------------|
46
+ | `default` | Pass `PieCheckbox` components as direct children for the `CheckboxGroup`. |
47
+ | `label` | Pass `PieFormLabel` to render the checkbox group label. |
48
+
49
+ ### CSS Variables
50
+ This component does not expose any CSS variables for style overrides.
21
51
 
22
- To install `pie-checkbox-group` in your application, run the following on your command line:
52
+ ### Events
53
+ This component does not emit any custom events. In order to add event listening to this component, you can treat it like a native HTML element in your application.
23
54
 
24
- ```bash
25
- $ npm i @justeattakeaway/pie-checkbox-group
55
+ ## Usage Examples
56
+
57
+ **For HTML:**
58
+
59
+ ```js
60
+ // import as module into a js file e.g. main.js
61
+ import '@justeattakeaway/pie-webc/components/checkbox-group.js';
62
+ import '@justeattakeaway/pie-webc/components/checkbox.js';
63
+ import '@justeattakeaway/pie-webc/components/form-label.js';
64
+ ```
65
+
66
+ ```html
67
+ <pie-checkbox-group>
68
+ <pie-form-label slot="label">Choose the way we can contact you:</pie-form-label>
69
+ <pie-checkbox name="my-checkbox-one">Checkbox Label 1</pie-checkbox>
70
+ <pie-checkbox name="my-checkbox-two">Checkbox Label 2</pie-checkbox>
71
+ <pie-checkbox name="my-checkbox-three">Checkbox Label 3</pie-checkbox>
72
+ </pie-checkbox-group>
73
+
74
+ <script type="module" src="/main.js"></script>
26
75
  ```
27
- ```bash
28
- $ yarn add @justeattakeaway/pie-checkbox-group
76
+
77
+ **For Native JS Applications, Vue, Angular, Svelte etc.:**
78
+
79
+ ```js
80
+ // import as module into a js file that will be loaded on the page where the component is used.
81
+ import '@justeattakeaway/pie-webc/components/checkbox-group.js';
82
+ import '@justeattakeaway/pie-webc/components/checkbox.js';
83
+ import '@justeattakeaway/pie-webc/components/form-label.js';
29
84
  ```
30
85
 
31
- For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components).
86
+ ```html
87
+ <pie-checkbox-group>
88
+ <pie-form-label slot="label">Choose the way we can contact you:</pie-form-label>
89
+ <pie-checkbox name="my-checkbox-one">Checkbox Label 1</pie-checkbox>
90
+ <pie-checkbox name="my-checkbox-two">Checkbox Label 2</pie-checkbox>
91
+ <pie-checkbox name="my-checkbox-three">Checkbox Label 3</pie-checkbox>
92
+ </pie-checkbox-group>
93
+ ```
32
94
 
95
+ **For React Applications:**
33
96
 
34
- ## Documentation
97
+ ```jsx
98
+ import { PieCheckboxGroup } from '@justeattakeaway/pie-webc/react/checkbox-group.js';
99
+ import { PieCheckbox } from '@justeattakeaway/pie-webc/react/checkbox.js';
100
+ import { PieFormLabel } from '@justeattakeaway/pie-webc/react/form-label.js';
35
101
 
36
- Visit [Checkbox Group | PIE Design System](https://pie.design/components/checkbox-group/) to view more information on this component.
102
+ <PieCheckboxGroup>
103
+ <PieFormLabel slot="label">Choose the way we can contact you:</PieFormLabel>
104
+ <PieCheckbox name="my-checkbox-one">Checkbox Label 1</PieCheckbox>
105
+ <PieCheckbox name="my-checkbox-two">Checkbox Label 2</PieCheckbox>
106
+ <PieCheckbox name="my-checkbox-three">Checkbox Label 3</PieCheckbox>
107
+ </PieCheckboxGroup>
108
+ ```
37
109
 
38
- ## Questions
110
+ ## Questions and Support
39
111
 
40
- Please head to [FAQs | PIE Design System](https://pie.design/support/contact-us/) to see our FAQs and get in touch.
112
+ If you work at Just Eat Takeaway.com, please contact us on **#help-designsystem**. Otherwise, please raise an issue on [Github](https://github.com/justeattakeaway/pie/issues).
41
113
 
42
114
  ## Contributing
43
115
 
package/custom-elements.json CHANGED
@@ -43,7 +43,7 @@
43
43
  "type": {
44
44
  "text": "DefaultProps"
45
45
  },
46
- "default": "{\n status: 'default',\n disabled: false,\n isInline: false,\n}"
46
+ "default": "{\r\n status: 'default',\r\n disabled: false,\r\n isInline: false,\r\n}"
47
47
  }
48
48
  ],
49
49
  "exports": [
@@ -186,7 +186,7 @@
186
186
  }
187
187
  }
188
188
  ],
189
- "description": "Function that updates the local `_hasLabel` state in case\nwhen the label slot receives content."
189
+ "description": "Function that updates the local `_hasLabel` state in case\r\nwhen the label slot receives content."
190
190
  },
191
191
  {
192
192
  "kind": "method",
@@ -197,7 +197,7 @@
197
197
  "text": "TemplateResult"
198
198
  }
199
199
  },
200
- "description": "Template for the label slot to correctly wrap it into a legend element when it has content.\nCalled within the main render function."
200
+ "description": "Template for the label slot to correctly wrap it into a legend element when it has content.\r\nCalled within the main render function."
201
201
  }
202
202
  ],
203
203
  "events": [
package/dist/index.js CHANGED
@@ -9,7 +9,7 @@ const d = class d extends x {
9
9
  this.getAttribute("v") || this.setAttribute("v", d.v);
10
10
  }
11
11
  };
12
- d.v = "0.9.0";
12
+ d.v = "0.9.2";
13
13
  let b = d;
14
14
  const S = "*,*:after,*:before{box-sizing:inherit}.c-checkboxGroup{--checkbox-group-offset: var(--dt-spacing-c);--checkbox-group-offset--inline: var(--dt-spacing-e);--checkbox-group-label-offset: var(--dt-spacing-a);margin:0;padding:0;border:0;min-width:0}.c-checkboxGroup ::slotted(pie-checkbox){display:flex}.c-checkboxGroup ::slotted(pie-form-label){display:block;padding-block-end:var(--checkbox-group-label-offset)}.c-checkboxGroup:not(.c-checkboxGroup--inline) ::slotted(pie-checkbox:not(:last-child)){margin-block-end:var(--checkbox-group-offset)}.c-checkboxGroup--inline{display:flex;align-items:flex-start;flex-wrap:wrap}.c-checkboxGroup.c-checkboxGroup--inline{margin:calc(-1 * var(--checkbox-group-offset) / 2) calc(-1 * var(--checkbox-group-offset--inline) / 2)}.c-checkboxGroup.c-checkboxGroup--inline ::slotted(pie-checkbox){margin:calc(var(--checkbox-group-offset) / 2) calc(var(--checkbox-group-offset--inline) / 2)}.c-checkboxGroup.c-checkboxGroup--inline ::slotted(pie-form-label){margin:0 calc(var(--checkbox-group-offset--inline) / 2) calc(-1 * (var(--checkbox-group-offset) / 2 - var(--checkbox-group-label-offset)));padding-block-end:0}.c-checkboxGroup-assistiveText{--checkbox-group-assistive-text-offset: var(--dt-spacing-a);display:block;margin-block-start:var(--checkbox-group-assistive-text-offset)}", E = ["default", "success", "error"], O = "pie-checkbox-group-disabled", $ = "pie-checkbox-group-error", p = {
15
15
  status: "default",
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-checkbox-group",
3
3
  "description": "PIE Design System Checkbox Group built using Web Components",
4
- "version": "0.9.0",
4
+ "version": "0.9.2",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/justeattakeaway/pie",
@@ -39,15 +39,15 @@
39
39
  "license": "Apache-2.0",
40
40
  "devDependencies": {
41
41
  "@custom-elements-manifest/analyzer": "0.9.0",
42
- "@justeattakeaway/pie-checkbox": "0.16.0",
42
+ "@justeattakeaway/pie-checkbox": "0.16.2",
43
43
  "@justeattakeaway/pie-components-config": "0.20.1",
44
44
  "@justeattakeaway/pie-css": "0.16.0",
45
45
  "@justeattakeaway/pie-monorepo-utils": "0.5.1",
46
46
  "cem-plugin-module-file-extensions": "0.0.5"
47
47
  },
48
48
  "dependencies": {
49
- "@justeattakeaway/pie-assistive-text": "0.10.0",
50
- "@justeattakeaway/pie-webc-core": "0.26.0"
49
+ "@justeattakeaway/pie-assistive-text": "0.10.2",
50
+ "@justeattakeaway/pie-webc-core": "1.0.0"
51
51
  },
52
52
  "volta": {
53
53
  "extends": "../../../package.json"