@1024pix/pix-ui 16.0.0 → 16.1.0
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/CHANGELOG.md +6 -0
- package/addon/components/pix-checkbox.hbs +14 -0
- package/addon/components/pix-checkbox.js +30 -0
- package/addon/styles/_pix-checkbox.scss +77 -0
- package/addon/styles/addon.scss +1 -0
- package/app/components/pix-checkbox.js +1 -0
- package/app/stories/form.stories.js +4 -0
- package/app/stories/pix-checkbox.stories.js +88 -0
- package/app/stories/pix-checkbox.stories.mdx +50 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -0,0 +1,14 @@
|
|
|
1
|
+
<div class="pix-checkbox">
|
|
2
|
+
<label
|
|
3
|
+
class="pix-checkbox__label {{this.labelSizeClass}} {{if @screenReaderOnly 'sr-only'}}"
|
|
4
|
+
for={{this.id}}
|
|
5
|
+
>
|
|
6
|
+
{{this.label}}
|
|
7
|
+
</label>
|
|
8
|
+
<input
|
|
9
|
+
id={{this.id}}
|
|
10
|
+
type="checkbox"
|
|
11
|
+
class="pix-checkbox__input {{if @isIndeterminate ' pix-checkbox__input--indeterminate'}}"
|
|
12
|
+
...attributes
|
|
13
|
+
/>
|
|
14
|
+
</div>
|
|
@@ -0,0 +1,30 @@
|
|
|
1
|
+
import Component from '@glimmer/component';
|
|
2
|
+
import { htmlSafe } from '@ember/string';
|
|
3
|
+
|
|
4
|
+
const labelSizeToClass = new Map([
|
|
5
|
+
['small', 'pix-checkbox__label--small'],
|
|
6
|
+
['default', 'pix-checkbox__label--default'],
|
|
7
|
+
['large', 'pix-checkbox__label--large'],
|
|
8
|
+
]);
|
|
9
|
+
|
|
10
|
+
export default class PixCheckbox extends Component {
|
|
11
|
+
constructor() {
|
|
12
|
+
super(...arguments);
|
|
13
|
+
|
|
14
|
+
if (!this.args.label) {
|
|
15
|
+
throw new Error('ERROR in PixCheckbox component, you must provide @label params');
|
|
16
|
+
}
|
|
17
|
+
this.label = htmlSafe(this.args.label);
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
get id() {
|
|
21
|
+
if (!this.args.id || !this.args.id.toString().trim()) {
|
|
22
|
+
throw new Error('ERROR in PixCheckbox component, @id param is not provided');
|
|
23
|
+
}
|
|
24
|
+
return this.args.id;
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
get labelSizeClass() {
|
|
28
|
+
return labelSizeToClass.get(this.args.labelSize);
|
|
29
|
+
}
|
|
30
|
+
}
|
|
@@ -0,0 +1,77 @@
|
|
|
1
|
+
.pix-checkbox {
|
|
2
|
+
@import 'reset-css';
|
|
3
|
+
display: flex;
|
|
4
|
+
align-items: center;
|
|
5
|
+
display: flex;
|
|
6
|
+
flex-direction: row-reverse;
|
|
7
|
+
|
|
8
|
+
label, input {
|
|
9
|
+
cursor: pointer;
|
|
10
|
+
}
|
|
11
|
+
|
|
12
|
+
&__label {
|
|
13
|
+
color: $pix-neutral-70;
|
|
14
|
+
@include text;
|
|
15
|
+
|
|
16
|
+
&--small {
|
|
17
|
+
@include text-small;
|
|
18
|
+
}
|
|
19
|
+
&--default {
|
|
20
|
+
@include text;
|
|
21
|
+
}
|
|
22
|
+
&--large {
|
|
23
|
+
@include text-large;
|
|
24
|
+
}
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
&__input {
|
|
28
|
+
appearance: none;
|
|
29
|
+
margin: 0 10px;
|
|
30
|
+
min-width: 18px;
|
|
31
|
+
min-height: 18px;
|
|
32
|
+
border: 1.2px solid $pix-neutral-90;
|
|
33
|
+
border-radius: 2px;
|
|
34
|
+
display: flex;
|
|
35
|
+
justify-content: center;
|
|
36
|
+
align-items: center;
|
|
37
|
+
|
|
38
|
+
&:hover, &:focus {
|
|
39
|
+
box-shadow: inset 0 1px 3px rgba(0,0,0, .1), 0 0 0 6px $pix-neutral-15;
|
|
40
|
+
}
|
|
41
|
+
|
|
42
|
+
&:active {
|
|
43
|
+
box-shadow: inset 0 1px 3px rgba(0,0,0, .1), 0 0 0 6px $pix-neutral-22;
|
|
44
|
+
}
|
|
45
|
+
|
|
46
|
+
&:checked {
|
|
47
|
+
background: $pix-primary border-box;
|
|
48
|
+
border-color: $pix-primary;
|
|
49
|
+
|
|
50
|
+
&::after {
|
|
51
|
+
content: '';
|
|
52
|
+
background-image: url("data:image/svg+xml,%3Csvg width='13' height='10' viewBox='0 0 13 10' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1.5 3L0 4.5L5 9.5L13 1.5L11.5 0L5 6.5L1.5 3Z' fill='white'/%3E%3C/svg%3E%0A");
|
|
53
|
+
background-repeat: no-repeat;
|
|
54
|
+
background-position: center;
|
|
55
|
+
width: 16px;
|
|
56
|
+
height: 16px;
|
|
57
|
+
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
&.pix-checkbox__input--indeterminate {
|
|
62
|
+
&:checked {
|
|
63
|
+
background: $pix-neutral-60 border-box;
|
|
64
|
+
border-color: $pix-neutral-60;
|
|
65
|
+
|
|
66
|
+
&::after {
|
|
67
|
+
content: '';
|
|
68
|
+
background-image: url("data:image/svg+xml,%3Csvg width='10' height='2' viewBox='0 0 10 2' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='10' height='2' fill='white'/%3E%3C/svg%3E%0A");
|
|
69
|
+
background-repeat: no-repeat;
|
|
70
|
+
background-position: center;
|
|
71
|
+
width: 16px;
|
|
72
|
+
height: 16px;
|
|
73
|
+
}
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
}
|
|
77
|
+
}
|
package/addon/styles/addon.scss
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from '@1024pix/pix-ui/components/pix-checkbox';
|
|
@@ -67,6 +67,10 @@ export const form = (args) => {
|
|
|
67
67
|
/>
|
|
68
68
|
<br>
|
|
69
69
|
|
|
70
|
+
<PixCheckbox @id="spam-pub" @labelSize="small" @label="Acceptez-vous de vous faire spammer de PUB ?" />
|
|
71
|
+
|
|
72
|
+
<br><br>
|
|
73
|
+
|
|
70
74
|
<div class="pix-form__actions">
|
|
71
75
|
<PixButton @triggerAction={{cancel}} @backgroundColor="transparent-light" @isBorderVisible={{true}}>
|
|
72
76
|
Annuler
|
|
@@ -0,0 +1,88 @@
|
|
|
1
|
+
import { hbs } from 'ember-cli-htmlbars';
|
|
2
|
+
|
|
3
|
+
export const Template = (args) => {
|
|
4
|
+
return {
|
|
5
|
+
template: hbs`
|
|
6
|
+
<PixCheckbox
|
|
7
|
+
@id={{id}}
|
|
8
|
+
@label={{label}}
|
|
9
|
+
@screenReaderOnly={{screenReaderOnly}}
|
|
10
|
+
@isIndeterminate={{isIndeterminate}}
|
|
11
|
+
@labelSize={{labelSize}}
|
|
12
|
+
/>
|
|
13
|
+
`,
|
|
14
|
+
context: args,
|
|
15
|
+
};
|
|
16
|
+
};
|
|
17
|
+
|
|
18
|
+
export const Default = Template.bind({});
|
|
19
|
+
Default.args = {
|
|
20
|
+
id: 'acceptNewsletter',
|
|
21
|
+
label: 'Recevoir la newsletter',
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
export const indeterminateCheckbox = Template.bind({});
|
|
25
|
+
indeterminateCheckbox.args = {
|
|
26
|
+
id: 'acceptNewsletter2',
|
|
27
|
+
label: 'Recevoir la newsletter',
|
|
28
|
+
isIndeterminate: true,
|
|
29
|
+
};
|
|
30
|
+
|
|
31
|
+
export const checkboxWithSmallLabel = Template.bind({});
|
|
32
|
+
checkboxWithSmallLabel.args = {
|
|
33
|
+
id: 'acceptNewsletter2',
|
|
34
|
+
label: 'Recevoir la newsletter',
|
|
35
|
+
labelSize: 'small',
|
|
36
|
+
};
|
|
37
|
+
|
|
38
|
+
export const checkboxWithLargeLabel = Template.bind({});
|
|
39
|
+
checkboxWithLargeLabel.args = {
|
|
40
|
+
id: 'acceptNewsletter2',
|
|
41
|
+
label: 'Recevoir la newsletter',
|
|
42
|
+
labelSize: 'large',
|
|
43
|
+
};
|
|
44
|
+
|
|
45
|
+
export const argTypes = {
|
|
46
|
+
id: {
|
|
47
|
+
name: 'id',
|
|
48
|
+
description: 'Identifiant du champ permettant de lui attacher un label',
|
|
49
|
+
type: { name: 'string', required: true },
|
|
50
|
+
defaultValue: null,
|
|
51
|
+
},
|
|
52
|
+
label: {
|
|
53
|
+
name: 'label',
|
|
54
|
+
description: "Le label de l'input",
|
|
55
|
+
type: { name: 'string', required: false },
|
|
56
|
+
defaultValue: null,
|
|
57
|
+
},
|
|
58
|
+
screenReaderOnly: {
|
|
59
|
+
name: 'screenReaderOnly',
|
|
60
|
+
description:
|
|
61
|
+
"Permet de ne pas afficher le label à l'écran. Sert à garder un label qui sera lisible par les lecteurs d'écran.",
|
|
62
|
+
type: { name: 'boolean', required: true },
|
|
63
|
+
table: {
|
|
64
|
+
type: { summary: 'boolean' },
|
|
65
|
+
defaultValue: { summary: false },
|
|
66
|
+
},
|
|
67
|
+
},
|
|
68
|
+
isIndeterminate: {
|
|
69
|
+
name: 'isIndeterminate',
|
|
70
|
+
description:
|
|
71
|
+
"Rendre la checkbox indéterminée, état indiquant que la/les case(s) n'est/ne sont ni cochée(s) ni décochée(s) (exemple: une checkbox parente indiquant la sélection partielle de plusieurs checkbox enfants)",
|
|
72
|
+
type: { name: 'boolean', required: true },
|
|
73
|
+
table: {
|
|
74
|
+
type: { summary: 'boolean' },
|
|
75
|
+
defaultValue: { summary: false },
|
|
76
|
+
},
|
|
77
|
+
},
|
|
78
|
+
labelSize: {
|
|
79
|
+
name: 'labelSize',
|
|
80
|
+
description: 'Correspond à la taille de la police du label.',
|
|
81
|
+
type: { name: 'string', required: false },
|
|
82
|
+
defaultValue: { summary: 'default' },
|
|
83
|
+
control: {
|
|
84
|
+
type: 'select',
|
|
85
|
+
options: ['small', 'default', 'large'],
|
|
86
|
+
},
|
|
87
|
+
},
|
|
88
|
+
};
|
|
@@ -0,0 +1,50 @@
|
|
|
1
|
+
import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
|
|
2
|
+
import centered from '@storybook/addon-centered/ember';
|
|
3
|
+
|
|
4
|
+
import * as stories from './pix-checkbox.stories.js';
|
|
5
|
+
|
|
6
|
+
<Meta
|
|
7
|
+
title='Form/Checkbox'
|
|
8
|
+
component='PixCheckbox'
|
|
9
|
+
decorators={[centered]}
|
|
10
|
+
argTypes={stories.argTypes}
|
|
11
|
+
/>
|
|
12
|
+
|
|
13
|
+
# PixCheckbox
|
|
14
|
+
|
|
15
|
+
La PixCheckbox permet de créer des checkbox basiques ou des checkbox mixées (checkbox servant d'indicateur lors d'une sélection multiple).
|
|
16
|
+
|
|
17
|
+
<Canvas>
|
|
18
|
+
<Story name='Default' story={stories.Default} height={60} />
|
|
19
|
+
</Canvas>
|
|
20
|
+
|
|
21
|
+
## Checkbox indéterminée
|
|
22
|
+
<Canvas>
|
|
23
|
+
<Story name='Indeterminate' story={stories.indeterminateCheckbox} height={60} />
|
|
24
|
+
</Canvas>
|
|
25
|
+
|
|
26
|
+
## Checkbox avec un petit label
|
|
27
|
+
<Canvas>
|
|
28
|
+
<Story name='SmallLabel' story={stories.checkboxWithSmallLabel} height={60} />
|
|
29
|
+
</Canvas>
|
|
30
|
+
|
|
31
|
+
## Checkbox avec un grand label
|
|
32
|
+
<Canvas>
|
|
33
|
+
<Story name='LargeLabel' story={stories.checkboxWithLargeLabel} height={60} />
|
|
34
|
+
</Canvas>
|
|
35
|
+
|
|
36
|
+
## Usage
|
|
37
|
+
|
|
38
|
+
```html
|
|
39
|
+
<PixCheckbox
|
|
40
|
+
@id="superId"
|
|
41
|
+
@label="Recevoir la newsletter"
|
|
42
|
+
@screenReaderOnly={{false}}
|
|
43
|
+
@isIndeterminate={{false}}
|
|
44
|
+
@labelSize="small"
|
|
45
|
+
/>
|
|
46
|
+
```
|
|
47
|
+
|
|
48
|
+
## Arguments
|
|
49
|
+
|
|
50
|
+
<ArgsTable story="Default" />
|