@justeattakeaway/pie-checkbox 1.0.18 → 1.0.19
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.
- package/README.md +53 -1
- package/dist/index.js +1 -1
- package/package.json +4 -4
package/README.md
CHANGED
|
@@ -49,7 +49,7 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
|
|
|
49
49
|
|
|
50
50
|
| Slot | Description |
|
|
51
51
|
|----------|--------------------------------------------------------------|
|
|
52
|
-
| `default`| The default, unnamed slot is used to pass
|
|
52
|
+
| `default`| The default, unnamed slot is used to pass label content to the component. This can be plain text or rich HTML for more complex labels (e.g., multi-line layouts with a title, price and description). When using rich HTML, use PIE design tokens for styling and typography utility classes from `@justeattakeaway/pie-css` for font styles. It is the consumer's responsibility to test screen reader narration when using complex slotted content. Test that the label reads in a logical order and conveys the intended meaning. |
|
|
53
53
|
|
|
54
54
|
### CSS Variables
|
|
55
55
|
This component does not expose any CSS variables for style overrides.
|
|
@@ -133,6 +133,58 @@ import { PieCheckbox } from '@justeattakeaway/pie-webc/react/checkbox.js';
|
|
|
133
133
|
<PieCheckbox name="mycheckbox" aria-label="Label"></PieCheckbox>
|
|
134
134
|
```
|
|
135
135
|
|
|
136
|
+
### Rich Label Slot Content
|
|
137
|
+
|
|
138
|
+
The default slot accepts HTML, so you can build more complex label layouts such as a product row with a title, price and description. Use PIE design tokens for spacing and `pie-css` typography utility classes for font styles.
|
|
139
|
+
|
|
140
|
+
> **Accessibility note:** When using rich slotted content, it is the consumer's responsibility to verify screen reader narration is acceptable. Test that the label reads in a logical order and conveys the intended meaning.
|
|
141
|
+
|
|
142
|
+
**HTML example:**
|
|
143
|
+
|
|
144
|
+
```html
|
|
145
|
+
<pie-checkbox name="carrots" value="carrots">
|
|
146
|
+
<div style="
|
|
147
|
+
display: flex;
|
|
148
|
+
flex-wrap: wrap;
|
|
149
|
+
justify-content: space-between;
|
|
150
|
+
gap: var(--dt-spacing-a);
|
|
151
|
+
">
|
|
152
|
+
<span class="u-font-body-l">A nasty bag of carrots</span>
|
|
153
|
+
<span class="u-font-body-l">£2.50</span>
|
|
154
|
+
<span class="u-font-caption" style="
|
|
155
|
+
width: 100%;
|
|
156
|
+
color: var(--dt-color-content-subdued);
|
|
157
|
+
">
|
|
158
|
+
Some description as a part of the label
|
|
159
|
+
</span>
|
|
160
|
+
</div>
|
|
161
|
+
</pie-checkbox>
|
|
162
|
+
```
|
|
163
|
+
|
|
164
|
+
**React example:**
|
|
165
|
+
|
|
166
|
+
```jsx
|
|
167
|
+
import { PieCheckbox } from '@justeattakeaway/pie-webc/react/checkbox.js';
|
|
168
|
+
|
|
169
|
+
<PieCheckbox name="carrots" value="carrots">
|
|
170
|
+
<div style={{
|
|
171
|
+
display: 'flex',
|
|
172
|
+
flexWrap: 'wrap',
|
|
173
|
+
justifyContent: 'space-between',
|
|
174
|
+
gap: 'var(--dt-spacing-a)',
|
|
175
|
+
}}>
|
|
176
|
+
<span className="u-font-body-l">A nasty bag of carrots</span>
|
|
177
|
+
<span className="u-font-body-l">£2.50</span>
|
|
178
|
+
<span className="u-font-caption" style={{
|
|
179
|
+
width: '100%',
|
|
180
|
+
color: 'var(--dt-color-content-subdued)',
|
|
181
|
+
}}>
|
|
182
|
+
Some description as a part of the label
|
|
183
|
+
</span>
|
|
184
|
+
</div>
|
|
185
|
+
</PieCheckbox>
|
|
186
|
+
```
|
|
187
|
+
|
|
136
188
|
## Questions and Support
|
|
137
189
|
|
|
138
190
|
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).
|
package/dist/index.js
CHANGED
|
@@ -10,7 +10,7 @@ const k = class k extends A {
|
|
|
10
10
|
this.getAttribute("v") || this.setAttribute("v", k.v);
|
|
11
11
|
}
|
|
12
12
|
};
|
|
13
|
-
k.v = "1.0.
|
|
13
|
+
k.v = "1.0.19";
|
|
14
14
|
let p = k;
|
|
15
15
|
const H = '*,*:after,*:before{box-sizing:inherit}:host{display:block}@keyframes checkboxCheck{0%{width:0;height:0;border-color:#fff;transform:translateZ(0) rotate(45deg)}33%{width:8px;height:0;transform:translateZ(0) rotate(45deg)}to{width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,1px) rotate(45deg)}}@keyframes scaleDown{0%{transform:scale(1)}to{transform:scale(0)}}@keyframes scaleUp{0%{transform:scale(0)}33%{transform:scale(.5)}to{transform:scale(1)}}.c-checkbox-tick{content:"";display:flex;flex:0 0 auto;width:var(--checkbox-width);height:var(--checkbox-height);margin:var(--checkbox-margin);border:1px solid var(--checkbox-border-color);border-radius:var(--checkbox-radius);background-color:var(--checkbox-bg-color)}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick{transition:background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing),border-color var(--dt-motion-timing-100) var(--checkbox-motion-easing)}}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick.is-animated{animation:scaleDown var(--dt-motion-timing-100) var(--checkbox-motion-easing)}}.c-checkbox-tick.is-disabled{--checkbox-bg-color: var(--dt-color-container-strong);--checkbox-border-color: var(--dt-color-disabled-01)}.c-checkbox-tick.c-checkbox-tick--status-error{--checkbox-border-color: var(--dt-color-support-error)}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick.is-animated.is-checked{animation:scaleUp var(--dt-motion-timing-100) var(--checkbox-motion-easing)}}.c-checkbox-tick.is-checked:not(.is-disabled){--checkbox-bg-color: var(--dt-color-interactive-brand);--checkbox-border-color: var(--checkbox-bg-color)}.c-checkbox-tick.is-checked.c-checkbox-tick--status-error{--checkbox-bg-color: var(--dt-color-support-error);--checkbox-border-color: var(--checkbox-bg-color)}.c-checkbox-tick.is-checked:before{content:"";position:relative;top:55%;left:14%;border-right:2px solid transparent;border-bottom:2px solid transparent;transform:rotate(45deg);transform-origin:0% 100%}@media (prefers-reduced-motion: reduce){.c-checkbox-tick.is-checked:before{animation-duration:1ms!important;animation-delay:0!important;animation-iteration-count:1!important;width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,0) rotate(45deg)}}@media only percy{.c-checkbox-tick.is-checked:before{animation:none;width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,0) rotate(45deg)}}.c-checkbox-tick.is-checked.is-animated:before{animation:checkboxCheck var(--dt-motion-timing-150) var(--checkbox-motion-easing) forwards}.c-checkbox-tick.is-checked:not(.is-animated):before{width:8px;height:16px;border-color:#fff;border-bottom-right-radius:2px;transform:translate3d(0,-16px,0) rotate(45deg)}.c-checkbox-tick.is-checked:dir(rtl):before{left:unset;right:50%}.c-checkbox-tick.is-indeterminate:not(.is-disabled){--checkbox-bg-color: var(--dt-color-interactive-brand);--checkbox-border-color: var(--checkbox-bg-color)}.c-checkbox-tick.is-indeterminate.c-checkbox-tick--status-error{--checkbox-bg-color: var(--dt-color-support-error);--checkbox-border-color: var(--checkbox-bg-color)}.c-checkbox-tick.is-indeterminate:after{width:16px}@media (prefers-reduced-motion: no-preference){.c-checkbox-tick.is-indeterminate:after{transition:width var(--dt-motion-timing-100) var(--checkbox-motion-easing) var(--dt-motion-timing-100)}}.c-checkbox-text{display:inline;flex:1 1 auto;align-self:center;min-width:0;margin-inline-start:var(--checkbox-gap);white-space:normal;color:var(--checkbox-content-color);font-family:var(--checkbox-font-family);font-size:var(--checkbox-font-size);line-height:var(--checkbox-line-height);font-weight:var(--checkbox-font-weight)}.c-checkbox-tick:after{content:"";position:relative;top:47%;left:14%;width:0;height:2px;background-color:#fff}.c-checkbox-tick:dir(rtl):after{left:unset;right:14%}.c-checkbox{--checkbox-height: 24px;--checkbox-width: 24px;--checkbox-radius: var(--dt-radius-rounded-a);--checkbox-margin: 1px;--checkbox-gap: var(--dt-spacing-b);--checkbox-font-family: var(--dt-font-body-l-family);--checkbox-font-size: calc(var(--dt-font-body-l-size) * 1px);--checkbox-line-height: calc(var(--dt-font-body-l-line-height) * 1px);--checkbox-font-weight: var(--dt-font-body-l-weight);--checkbox-bg-color: var(--dt-color-container-default);--checkbox-border-color: var(--dt-color-border-form);--checkbox-content-color: var(--dt-color-content-default-solid);--checkbox-motion-easing: var(--dt-motion-easing-persistent-functional);display:flex;flex-direction:column}.c-checkbox input{display:block;position:absolute;height:1px;width:1px;overflow:hidden;clip:rect(1px,1px,1px,1px);clip-path:inset(1px);white-space:nowrap}.c-checkbox label{display:flex;max-width:100%;white-space:nowrap;cursor:pointer}.c-checkbox:hover .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)) );transition:background-color var(--dt-motion-timing-200) var(--checkbox-motion-easing),border-color var(--dt-motion-timing-200) var(--checkbox-motion-easing)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox:hover .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}}.c-checkbox:active .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)) );transition:background-color var(--dt-motion-timing-100) var(--checkbox-motion-easing),border-color var(--dt-motion-timing-100) var(--checkbox-motion-easing)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox:active .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-container-default))}}.c-checkbox.is-disabled label{cursor:not-allowed}.c-checkbox input:focus-visible+label .c-checkbox-tick{box-shadow:0 0 0 2px var(--dt-color-focus-inner),0 0 0 4px var(--dt-color-focus-outer);outline:none}.c-checkbox.is-disabled:hover .c-checkbox-tick,.c-checkbox.is-disabled:active .c-checkbox-tick{--checkbox-bg-color: var(--dt-color-container-strong);--checkbox-border-color: var(--dt-color-disabled-01)}.c-checkbox.c-checkbox--status-error:hover .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-hover-01)) )}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.c-checkbox--status-error:hover .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-container-default))}}.c-checkbox.c-checkbox--status-error:active .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-container-default-h), var(--dt-color-container-default-s), calc(var(--dt-color-container-default-l) - var(--dt-color-active-01)) )}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.c-checkbox--status-error:active{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-container-default))}}.c-checkbox.is-checked:not(.is-disabled):hover .c-checkbox-tick,.c-checkbox.is-indeterminate:not(.is-disabled):hover .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-hover-01)) );--checkbox-border-color: var(--checkbox-bg-color)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.is-checked:not(.is-disabled):hover .c-checkbox-tick,.c-checkbox.is-indeterminate:not(.is-disabled):hover .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-interactive-brand));--checkbox-border-color: var(--checkbox-bg-color)}}.c-checkbox.is-checked.c-checkbox--status-error:hover .c-checkbox-tick,.c-checkbox.is-indeterminate.c-checkbox--status-error:hover .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-hover-01)) );--checkbox-border-color: var(--checkbox-bg-color)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.is-checked.c-checkbox--status-error:hover .c-checkbox-tick,.c-checkbox.is-indeterminate.c-checkbox--status-error:hover .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-hover-01-bg) var(--dt-color-hover-01), var(--dt-color-support-error));--checkbox-border-color: var(--checkbox-bg-color)}}.c-checkbox.is-checked:not(.is-disabled):active .c-checkbox-tick,.c-checkbox.is-indeterminate:not(.is-disabled):active .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-interactive-brand-h), var(--dt-color-interactive-brand-s), calc(var(--dt-color-interactive-brand-l) - var(--dt-color-active-01)) );--checkbox-border-color: var(--checkbox-bg-color)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.is-checked:not(.is-disabled):active .c-checkbox-tick,.c-checkbox.is-indeterminate:not(.is-disabled):active .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-interactive-brand));--checkbox-border-color: var(--checkbox-bg-color)}}.c-checkbox.is-checked.c-checkbox--status-error:active .c-checkbox-tick,.c-checkbox.is-indeterminate.c-checkbox--status-error:active .c-checkbox-tick{--checkbox-bg-color: hsl( var(--dt-color-support-error-h), var(--dt-color-support-error-s), calc(var(--dt-color-support-error-l) - var(--dt-color-active-01)) );--checkbox-border-color: var(--checkbox-bg-color)}@supports (background-color: color-mix(in srgb,black,white)){.c-checkbox.is-checked.c-checkbox--status-error:active .c-checkbox-tick,.c-checkbox.is-indeterminate.c-checkbox--status-error:active .c-checkbox-tick{--checkbox-bg-color: color-mix(in srgb, var(--dt-color-active-01-bg) var(--dt-color-active-01), var(--dt-color-support-error));--checkbox-border-color: var(--checkbox-bg-color)}}', T = ["default", "success", "error"], a = {
|
|
16
16
|
// a default value for the html <input type="checkbox" /> value attribute.
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-checkbox",
|
|
3
3
|
"description": "PIE Design System Checkbox built using Web Components",
|
|
4
|
-
"version": "1.0.
|
|
4
|
+
"version": "1.0.19",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/justeattakeaway/pie",
|
|
@@ -46,12 +46,12 @@
|
|
|
46
46
|
"@custom-elements-manifest/analyzer": "0.9.0",
|
|
47
47
|
"@justeattakeaway/pie-components-config": "0.21.0",
|
|
48
48
|
"@justeattakeaway/pie-css": "1.1.0",
|
|
49
|
-
"@justeattakeaway/pie-monorepo-utils": "0.
|
|
49
|
+
"@justeattakeaway/pie-monorepo-utils": "0.9.0",
|
|
50
50
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
51
51
|
},
|
|
52
52
|
"dependencies": {
|
|
53
|
-
"@justeattakeaway/pie-assistive-text": "0.11.
|
|
54
|
-
"@justeattakeaway/pie-webc-core": "14.0.
|
|
53
|
+
"@justeattakeaway/pie-assistive-text": "0.11.25",
|
|
54
|
+
"@justeattakeaway/pie-webc-core": "14.0.1"
|
|
55
55
|
},
|
|
56
56
|
"volta": {
|
|
57
57
|
"extends": "../../../package.json"
|