@1024pix/pix-ui 46.11.7 → 46.12.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.
|
@@ -2,10 +2,9 @@ import Component from '@glimmer/component';
|
|
|
2
2
|
|
|
3
3
|
export default class PixTag extends Component {
|
|
4
4
|
get classes() {
|
|
5
|
-
const { color
|
|
5
|
+
const { color } = this.args;
|
|
6
6
|
const classes = [];
|
|
7
7
|
if (color) classes.push(`pix-tag--${color}`);
|
|
8
|
-
if (compact) classes.push(`pix-tag--compact`);
|
|
9
8
|
return classes.join(' ');
|
|
10
9
|
}
|
|
11
10
|
}
|
package/app/stories/pix-tag.mdx
CHANGED
|
@@ -9,12 +9,8 @@ Un `Tag` est un type de `Chips` qui permet de mettre en avant une information ou
|
|
|
9
9
|
|
|
10
10
|
> Il est possible de surcharger le style d'un `<PixTag>` via l'attribut `class` ainsi que de passer n'importe quel attribut sur sa `div` wrapper (par exemple, un `aria-label`)
|
|
11
11
|
|
|
12
|
-
Tag
|
|
13
12
|
<Story of={ComponentStories.tag} height={60} />
|
|
14
13
|
|
|
15
|
-
Tag compact
|
|
16
|
-
<Story of={ComponentStories.compactTag} height={60} />
|
|
17
|
-
|
|
18
14
|
## Usage
|
|
19
15
|
|
|
20
16
|
```html
|
|
@@ -23,9 +19,6 @@ Par défaut:
|
|
|
23
19
|
|
|
24
20
|
Customiser la couleur du tag:
|
|
25
21
|
<PixTag @color="purple"> This is a purple tag </PixTag>
|
|
26
|
-
|
|
27
|
-
Tag Compact
|
|
28
|
-
<PixTag @compact="{{true}}" @color="blue"> This is a compact tag </PixTag>
|
|
29
22
|
```
|
|
30
23
|
|
|
31
24
|
## Arguments
|
|
@@ -3,7 +3,7 @@ import { hbs } from 'ember-cli-htmlbars';
|
|
|
3
3
|
export default {
|
|
4
4
|
title: 'Basics/Tag',
|
|
5
5
|
render: (args) => ({
|
|
6
|
-
template: hbs`<PixTag @color={{this.color}}
|
|
6
|
+
template: hbs`<PixTag @color={{this.color}}>
|
|
7
7
|
Contenu du tag
|
|
8
8
|
</PixTag>`,
|
|
9
9
|
context: args,
|
|
@@ -19,19 +19,7 @@ export default {
|
|
|
19
19
|
},
|
|
20
20
|
options: ['neutral', 'secondary', 'tertiary', 'success', 'error', 'orga'],
|
|
21
21
|
},
|
|
22
|
-
compact: {
|
|
23
|
-
name: 'compact',
|
|
24
|
-
description: 'Tag compact ou non',
|
|
25
|
-
type: { name: 'boolean', required: false },
|
|
26
|
-
table: { defaultValue: { summary: false } },
|
|
27
|
-
},
|
|
28
22
|
},
|
|
29
23
|
};
|
|
30
24
|
|
|
31
25
|
export const tag = {};
|
|
32
|
-
|
|
33
|
-
export const compactTag = {
|
|
34
|
-
args: {
|
|
35
|
-
compact: true,
|
|
36
|
-
},
|
|
37
|
-
};
|