@1024pix/pix-ui 56.1.0 → 57.0.1
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/addon/components/pix-label.gjs +40 -0
- package/addon/components/pix-segmented-control.gjs +109 -0
- package/addon/styles/_pix-segmented-control.scss +65 -0
- package/addon/styles/addon.scss +1 -1
- package/app/components/pix-segmented-control.js +1 -0
- package/package.json +1 -1
- package/addon/components/pix-label.hbs +0 -11
- package/addon/components/pix-label.js +0 -17
- package/addon/components/pix-toggle-button.hbs +0 -23
- package/addon/components/pix-toggle-button.js +0 -27
- package/addon/styles/_pix-toggle-button.scss +0 -62
- package/app/components/pix-toggle-button.js +0 -1
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
import Component from '@glimmer/component';
|
|
2
|
+
|
|
3
|
+
export default class PixLabel extends Component {
|
|
4
|
+
get className() {
|
|
5
|
+
const classes = ['pix-label'];
|
|
6
|
+
|
|
7
|
+
if (this.args.screenReaderOnly) classes.push('screen-reader-only');
|
|
8
|
+
if (this.args.inlineLabel) classes.push('pix-label--inline-label');
|
|
9
|
+
if (this.args.isDisabled) classes.push('pix-label--disabled');
|
|
10
|
+
|
|
11
|
+
const size = ['small', 'large'].includes(this.args.size) ? this.args.size : 'default';
|
|
12
|
+
|
|
13
|
+
classes.push(`pix-label--${size}`);
|
|
14
|
+
|
|
15
|
+
return classes.join(' ');
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
<template>
|
|
19
|
+
{{#if @useAsLegend}}
|
|
20
|
+
<legend class={{this.className}} ...attributes>
|
|
21
|
+
<ChoreLabel @requiredLabel={{@requiredLabel}} @subLabel={{@subLabel}}>{{yield}}</ChoreLabel>
|
|
22
|
+
</legend>
|
|
23
|
+
{{else}}
|
|
24
|
+
<label for={{@for}} class={{this.className}} ...attributes>
|
|
25
|
+
<ChoreLabel @requiredLabel={{@requiredLabel}} @subLabel={{@subLabel}}>{{yield}}</ChoreLabel>
|
|
26
|
+
</label>
|
|
27
|
+
{{/if}}
|
|
28
|
+
</template>
|
|
29
|
+
}
|
|
30
|
+
|
|
31
|
+
const ChoreLabel = <template>
|
|
32
|
+
{{yield}}
|
|
33
|
+
{{#if @requiredLabel}}
|
|
34
|
+
<abbr title={{@requiredLabel}} class="mandatory-mark">*</abbr>
|
|
35
|
+
{{/if}}
|
|
36
|
+
|
|
37
|
+
{{#if @subLabel}}
|
|
38
|
+
<span class="pix-label__sub-label">{{@subLabel}}</span>
|
|
39
|
+
{{/if}}
|
|
40
|
+
</template>;
|
|
@@ -0,0 +1,109 @@
|
|
|
1
|
+
import { warn } from '@ember/debug';
|
|
2
|
+
import { on } from '@ember/modifier';
|
|
3
|
+
import { action } from '@ember/object';
|
|
4
|
+
import { guidFor } from '@ember/object/internals';
|
|
5
|
+
import Component from '@glimmer/component';
|
|
6
|
+
|
|
7
|
+
import PixIcon from './pix-icon';
|
|
8
|
+
import PixLabel from './pix-label';
|
|
9
|
+
|
|
10
|
+
export default class PixSegmentedControl extends Component {
|
|
11
|
+
get variant() {
|
|
12
|
+
const value = this.args.variant ?? 'primary';
|
|
13
|
+
const variantList = ['primary', 'orga', 'certif'];
|
|
14
|
+
|
|
15
|
+
warn(
|
|
16
|
+
`PixAppLayout: @variant "${value}" should be ${variantList.join(', ')}`,
|
|
17
|
+
variantList.includes(value),
|
|
18
|
+
{
|
|
19
|
+
id: 'pix-ui.pix-segmented-control.variant.not-valid',
|
|
20
|
+
},
|
|
21
|
+
);
|
|
22
|
+
|
|
23
|
+
return value;
|
|
24
|
+
}
|
|
25
|
+
|
|
26
|
+
get className() {
|
|
27
|
+
const classes = ['pix-segmented-control', `pix-segmented-control--${this.variant}`];
|
|
28
|
+
|
|
29
|
+
if (this.args.inlineLabel) {
|
|
30
|
+
classes.push('pix-segmented-control--inline');
|
|
31
|
+
}
|
|
32
|
+
|
|
33
|
+
return classes.join(' ');
|
|
34
|
+
}
|
|
35
|
+
|
|
36
|
+
@action
|
|
37
|
+
onChange() {
|
|
38
|
+
this.args.onChange(!this.args.toggled);
|
|
39
|
+
}
|
|
40
|
+
|
|
41
|
+
get id() {
|
|
42
|
+
return guidFor(this);
|
|
43
|
+
}
|
|
44
|
+
|
|
45
|
+
get toggleName() {
|
|
46
|
+
return `${this.id}-toggle`;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
get idViewA() {
|
|
50
|
+
return `${this.id}-viewA`;
|
|
51
|
+
}
|
|
52
|
+
|
|
53
|
+
get idViewB() {
|
|
54
|
+
return `${this.id}-viewB`;
|
|
55
|
+
}
|
|
56
|
+
|
|
57
|
+
get stateViewA() {
|
|
58
|
+
return !this.args.toggled;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
get stateViewB() {
|
|
62
|
+
return this.args.toggled;
|
|
63
|
+
}
|
|
64
|
+
|
|
65
|
+
<template>
|
|
66
|
+
<fieldset class={{this.className}} role="radiogroup">
|
|
67
|
+
<PixLabel
|
|
68
|
+
@useAsLegend={{true}}
|
|
69
|
+
@screenReaderOnly={{@screenReaderOnly}}
|
|
70
|
+
@subLabel={{@subLabel}}
|
|
71
|
+
@size={{@size}}
|
|
72
|
+
@inlineLabel={{@inlineLabel}}
|
|
73
|
+
>
|
|
74
|
+
{{yield to="label"}}
|
|
75
|
+
</PixLabel>
|
|
76
|
+
|
|
77
|
+
<div class="pix-segmented-control__radio">
|
|
78
|
+
<input
|
|
79
|
+
{{on "change" this.onChange}}
|
|
80
|
+
id={{this.idViewA}}
|
|
81
|
+
type="radio"
|
|
82
|
+
name={{this.toggleName}}
|
|
83
|
+
value="viewA"
|
|
84
|
+
checked={{this.stateViewA}}
|
|
85
|
+
/>
|
|
86
|
+
<label for={{this.idViewA}}>
|
|
87
|
+
{{#if @iconA}}
|
|
88
|
+
<PixIcon @name={{@iconA}} @plainIcon={{this.stateViewA}} @ariaHidden={{true}} />
|
|
89
|
+
{{/if}}
|
|
90
|
+
{{yield to="viewA"}}
|
|
91
|
+
</label>
|
|
92
|
+
<input
|
|
93
|
+
{{on "change" this.onChange}}
|
|
94
|
+
id={{this.idViewB}}
|
|
95
|
+
type="radio"
|
|
96
|
+
name={{this.toggleName}}
|
|
97
|
+
value="viewB"
|
|
98
|
+
checked={{this.stateViewB}}
|
|
99
|
+
/>
|
|
100
|
+
<label for={{this.idViewB}}>
|
|
101
|
+
{{#if @iconB}}
|
|
102
|
+
<PixIcon @name={{@iconB}} @plainIcon={{this.stateViewB}} @ariaHidden={{true}} />
|
|
103
|
+
{{/if}}
|
|
104
|
+
{{yield to="viewB"}}
|
|
105
|
+
</label>
|
|
106
|
+
</div>
|
|
107
|
+
</fieldset>
|
|
108
|
+
</template>
|
|
109
|
+
}
|
|
@@ -0,0 +1,65 @@
|
|
|
1
|
+
@use "pix-design-tokens/typography";
|
|
2
|
+
|
|
3
|
+
.pix-segmented-control {
|
|
4
|
+
display: inline-flex;
|
|
5
|
+
flex-direction: column;
|
|
6
|
+
gap: var(--pix-spacing-1x);
|
|
7
|
+
color: var(--pix-neutral-900);
|
|
8
|
+
font-size: 1rem;
|
|
9
|
+
|
|
10
|
+
&--primary .pix-segmented-control__radio {
|
|
11
|
+
background-color: rgb(var(--pix-primary-100-inline), 0.50);
|
|
12
|
+
}
|
|
13
|
+
|
|
14
|
+
&--orga .pix-segmented-control__radio {
|
|
15
|
+
background-color: rgb(var(--pix-orga-500-inline), 0.20);
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
&--certif .pix-segmented-control__radio {
|
|
19
|
+
background-color: rgb(var(--pix-certif-500-inline), 0.20);
|
|
20
|
+
}
|
|
21
|
+
|
|
22
|
+
&__radio {
|
|
23
|
+
position: relative;
|
|
24
|
+
display: inline-flex;
|
|
25
|
+
gap: var(--pix-spacing-1x, 4px);
|
|
26
|
+
align-items: flex-start;
|
|
27
|
+
padding: var(--pix-spacing-1x, 4px);
|
|
28
|
+
border-radius: 8px;
|
|
29
|
+
|
|
30
|
+
:hover {
|
|
31
|
+
cursor: pointer;
|
|
32
|
+
}
|
|
33
|
+
|
|
34
|
+
input[type="radio"], input[type="radio"]:checked, input[type="radio"]:focus-visible {
|
|
35
|
+
position: absolute;
|
|
36
|
+
outline: none;
|
|
37
|
+
appearance: none;
|
|
38
|
+
}
|
|
39
|
+
|
|
40
|
+
label {
|
|
41
|
+
display: flex;
|
|
42
|
+
gap: 10px;
|
|
43
|
+
align-items: center;
|
|
44
|
+
justify-content: center;
|
|
45
|
+
padding: var(--pix-spacing-1x, 4px) 8px;
|
|
46
|
+
border: 1px solid transparent;
|
|
47
|
+
border-radius: 8px;
|
|
48
|
+
}
|
|
49
|
+
|
|
50
|
+
input[type="radio"]:checked + label {
|
|
51
|
+
font-weight: var(--pix-font-bold);
|
|
52
|
+
background: var(--pix-neutral-0);
|
|
53
|
+
}
|
|
54
|
+
|
|
55
|
+
input[type="radio"]:focus + label {
|
|
56
|
+
border-color: var(--pix-neutral-900);
|
|
57
|
+
}
|
|
58
|
+
}
|
|
59
|
+
|
|
60
|
+
&--inline {
|
|
61
|
+
flex-direction: row;
|
|
62
|
+
gap: var(--pix-spacing-2x);
|
|
63
|
+
align-items: center;
|
|
64
|
+
}
|
|
65
|
+
}
|
package/addon/styles/addon.scss
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from '@1024pix/pix-ui/components/pix-segmented-control';
|
package/package.json
CHANGED
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
<label for={{@for}} class={{this.className}} ...attributes>
|
|
2
|
-
{{yield}}
|
|
3
|
-
|
|
4
|
-
{{#if @requiredLabel}}
|
|
5
|
-
<abbr title={{@requiredLabel}} class="mandatory-mark">*</abbr>
|
|
6
|
-
{{/if}}
|
|
7
|
-
|
|
8
|
-
{{#if @subLabel}}
|
|
9
|
-
<span class="pix-label__sub-label">{{@subLabel}}</span>
|
|
10
|
-
{{/if}}
|
|
11
|
-
</label>
|
|
@@ -1,17 +0,0 @@
|
|
|
1
|
-
import Component from '@glimmer/component';
|
|
2
|
-
|
|
3
|
-
export default class PixLabel extends Component {
|
|
4
|
-
get className() {
|
|
5
|
-
const classes = ['pix-label'];
|
|
6
|
-
|
|
7
|
-
if (this.args.screenReaderOnly) classes.push('screen-reader-only');
|
|
8
|
-
if (this.args.inlineLabel) classes.push('pix-label--inline-label');
|
|
9
|
-
if (this.args.isDisabled) classes.push('pix-label--disabled');
|
|
10
|
-
|
|
11
|
-
const size = ['small', 'large'].includes(this.args.size) ? this.args.size : 'default';
|
|
12
|
-
|
|
13
|
-
classes.push(`pix-label--${size}`);
|
|
14
|
-
|
|
15
|
-
return classes.join(' ');
|
|
16
|
-
}
|
|
17
|
-
}
|
|
@@ -1,23 +0,0 @@
|
|
|
1
|
-
<div class={{this.className}}>
|
|
2
|
-
<PixLabel
|
|
3
|
-
@for={{this.id}}
|
|
4
|
-
@screenReaderOnly={{@screenReaderOnly}}
|
|
5
|
-
@subLabel={{@subLabel}}
|
|
6
|
-
@size={{@size}}
|
|
7
|
-
@inlineLabel={{@inlineLabel}}
|
|
8
|
-
>{{yield to="label"}}</PixLabel>
|
|
9
|
-
<button
|
|
10
|
-
class="pix-toggle-button__button{{if @useIcons ' pix-toggle-button__button--icon'}}"
|
|
11
|
-
id={{this.id}}
|
|
12
|
-
aria-pressed={{if @toggled "true" "false"}}
|
|
13
|
-
type="button"
|
|
14
|
-
{{on "click" this.onToggle}}
|
|
15
|
-
>
|
|
16
|
-
<span class="pix-toggle-button__view-a{{if @useIcons ' pix-toggle-button__with-icon'}}">
|
|
17
|
-
{{yield to="viewA"}}
|
|
18
|
-
</span>
|
|
19
|
-
<span class="pix-toggle-button__view-b{{if @useIcons ' pix-toggle-button__with-icon'}}">
|
|
20
|
-
{{yield to="viewB"}}
|
|
21
|
-
</span>
|
|
22
|
-
</button>
|
|
23
|
-
</div>
|
|
@@ -1,27 +0,0 @@
|
|
|
1
|
-
import { action } from '@ember/object';
|
|
2
|
-
import { guidFor } from '@ember/object/internals';
|
|
3
|
-
import Component from '@glimmer/component';
|
|
4
|
-
|
|
5
|
-
export default class PixToggleButton extends Component {
|
|
6
|
-
get className() {
|
|
7
|
-
const classes = ['pix-toggle-button'];
|
|
8
|
-
if (this.args.toggled) {
|
|
9
|
-
classes.push('pix-toggle-button--pressed');
|
|
10
|
-
}
|
|
11
|
-
|
|
12
|
-
if (this.args.inlineLabel) {
|
|
13
|
-
classes.push('pix-toggle-button--inline');
|
|
14
|
-
}
|
|
15
|
-
|
|
16
|
-
return classes.join(' ');
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
@action
|
|
20
|
-
onToggle() {
|
|
21
|
-
this.args.onChange(!this.args.toggled);
|
|
22
|
-
}
|
|
23
|
-
|
|
24
|
-
get id() {
|
|
25
|
-
return guidFor(this);
|
|
26
|
-
}
|
|
27
|
-
}
|
|
@@ -1,62 +0,0 @@
|
|
|
1
|
-
@use "pix-design-tokens/typography";
|
|
2
|
-
|
|
3
|
-
.pix-toggle-button {
|
|
4
|
-
display: inline-flex;
|
|
5
|
-
flex-direction: column;
|
|
6
|
-
gap: var(--pix-spacing-1x);
|
|
7
|
-
|
|
8
|
-
&--inline {
|
|
9
|
-
flex-direction: row;
|
|
10
|
-
gap: var(--pix-spacing-2x);
|
|
11
|
-
align-items: center;
|
|
12
|
-
}
|
|
13
|
-
|
|
14
|
-
&__button {
|
|
15
|
-
@extend %pix-body-s;
|
|
16
|
-
|
|
17
|
-
width: fit-content;
|
|
18
|
-
padding: var(--pix-spacing-1x);
|
|
19
|
-
font-weight: var(--pix-font-bold);
|
|
20
|
-
line-height: 1.572;
|
|
21
|
-
background: var(--pix-neutral-20);
|
|
22
|
-
border: 1px solid var(--pix-neutral-500);
|
|
23
|
-
border-radius: 4px;
|
|
24
|
-
|
|
25
|
-
&--icon {
|
|
26
|
-
font-size: 0;
|
|
27
|
-
}
|
|
28
|
-
}
|
|
29
|
-
|
|
30
|
-
&__view-a,
|
|
31
|
-
&__view-b {
|
|
32
|
-
display: inline-block;
|
|
33
|
-
padding: var(--pix-spacing-1x) var(--pix-spacing-2x);
|
|
34
|
-
border-radius: 4px;
|
|
35
|
-
}
|
|
36
|
-
|
|
37
|
-
&__view-a {
|
|
38
|
-
color: var(--pix-neutral-800);
|
|
39
|
-
font-weight: var(--pix-font-normal);
|
|
40
|
-
}
|
|
41
|
-
|
|
42
|
-
&__view-b {
|
|
43
|
-
color: var(--pix-neutral-20);
|
|
44
|
-
background-color: var(--pix-neutral-800);
|
|
45
|
-
}
|
|
46
|
-
|
|
47
|
-
&--pressed {
|
|
48
|
-
.pix-toggle-button {
|
|
49
|
-
&__view-a {
|
|
50
|
-
color: var(--pix-neutral-20);
|
|
51
|
-
font-weight: inherit;
|
|
52
|
-
background-color: var(--pix-neutral-800);
|
|
53
|
-
}
|
|
54
|
-
|
|
55
|
-
&__view-b {
|
|
56
|
-
color: var(--pix-neutral-800);
|
|
57
|
-
font-weight: var(--pix-font-normal);
|
|
58
|
-
background-color: transparent;
|
|
59
|
-
}
|
|
60
|
-
}
|
|
61
|
-
}
|
|
62
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export { default } from '@1024pix/pix-ui/components/pix-toggle-button';
|