@1024pix/pix-ui 17.1.0 → 17.2.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-sidebar.hbs +34 -0
- package/addon/components/pix-sidebar.js +24 -0
- package/addon/styles/_pix-sidebar.scss +80 -0
- package/addon/styles/addon.scss +1 -0
- package/app/components/pix-sidebar.js +1 -0
- package/app/stories/pix-sidebar.stories.js +61 -0
- package/app/stories/pix-sidebar.stories.mdx +57 -0
- package/package.json +1 -1
package/CHANGELOG.md
CHANGED
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
<div
|
|
2
|
+
class="pix-sidebar__overlay {{unless @showSidebar ' pix-sidebar__overlay--hidden'}}"
|
|
3
|
+
{{on "click" this.closeAction}}
|
|
4
|
+
{{trap-focus}}
|
|
5
|
+
{{on-escape-action this.closeAction}}
|
|
6
|
+
>
|
|
7
|
+
<div
|
|
8
|
+
class="pix-sidebar {{unless @showSidebar ' pix-sidebar--hidden'}}"
|
|
9
|
+
role="dialog"
|
|
10
|
+
aria-labelledby="sidebar-title"
|
|
11
|
+
aria-describedby="sidebar-content"
|
|
12
|
+
aria-modal="true"
|
|
13
|
+
{{on "click" this.stopPropagation}}
|
|
14
|
+
...attributes
|
|
15
|
+
>
|
|
16
|
+
<header class="pix-sidebar__header">
|
|
17
|
+
<h1 id="sidebar-title" class="pix-sidebar__title">{{@title}}</h1>
|
|
18
|
+
<PixIconButton
|
|
19
|
+
@icon="xmark"
|
|
20
|
+
@triggerAction={{this.closeAction}}
|
|
21
|
+
@ariaLabel="Fermer"
|
|
22
|
+
@size="small"
|
|
23
|
+
@withBackground={{true}}
|
|
24
|
+
class="pix-sidebar__close-button"
|
|
25
|
+
/>
|
|
26
|
+
</header>
|
|
27
|
+
<main id="sidebar-content" class="pix-sidebar__content">
|
|
28
|
+
{{yield to="content"}}
|
|
29
|
+
</main>
|
|
30
|
+
<footer class="pix-sidebar__footer">
|
|
31
|
+
{{yield to="footer"}}
|
|
32
|
+
</footer>
|
|
33
|
+
</div>
|
|
34
|
+
</div>
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import Component from '@glimmer/component';
|
|
2
|
+
import { action } from '@ember/object';
|
|
3
|
+
|
|
4
|
+
export default class PixSidebar extends Component {
|
|
5
|
+
constructor(...args) {
|
|
6
|
+
super(...args);
|
|
7
|
+
|
|
8
|
+
if (!this.args.title) {
|
|
9
|
+
throw new Error('ERROR in PixSidebar component: @title argument is required.');
|
|
10
|
+
}
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
@action
|
|
14
|
+
stopPropagation(event) {
|
|
15
|
+
event.stopPropagation();
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
@action
|
|
19
|
+
closeAction(params) {
|
|
20
|
+
if (this.args.onClose) {
|
|
21
|
+
this.args.onClose(params);
|
|
22
|
+
}
|
|
23
|
+
}
|
|
24
|
+
}
|
|
@@ -0,0 +1,80 @@
|
|
|
1
|
+
.pix-sidebar__overlay {
|
|
2
|
+
position: fixed;
|
|
3
|
+
z-index: 1000;
|
|
4
|
+
top: 0;
|
|
5
|
+
bottom: 0;
|
|
6
|
+
left: 0;
|
|
7
|
+
right: 0;
|
|
8
|
+
overflow-y: scroll;
|
|
9
|
+
background-color: rgba(52, 69, 99, 0.7);
|
|
10
|
+
transition: all .3s ease-in-out;
|
|
11
|
+
|
|
12
|
+
&--hidden {
|
|
13
|
+
visibility: hidden;
|
|
14
|
+
opacity: 0;
|
|
15
|
+
}
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
$sidebar-padding: 16px;
|
|
19
|
+
$mobile-close-button-size: 32px;
|
|
20
|
+
$tablet-close-button-size: 40px;
|
|
21
|
+
$space-between-title-and-close-button: 8px;
|
|
22
|
+
$button-margin: 16px;
|
|
23
|
+
|
|
24
|
+
.pix-sidebar {
|
|
25
|
+
@import 'reset-css';
|
|
26
|
+
display: flex;
|
|
27
|
+
flex-direction: column;
|
|
28
|
+
height: 100%;
|
|
29
|
+
max-width: 320px;
|
|
30
|
+
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.1);
|
|
31
|
+
background: $pix-neutral-0;
|
|
32
|
+
transform: translate(0);
|
|
33
|
+
transition: transform .3s ease-in-out;
|
|
34
|
+
|
|
35
|
+
&--hidden {
|
|
36
|
+
transform: translate(-100%);
|
|
37
|
+
}
|
|
38
|
+
|
|
39
|
+
&__header {
|
|
40
|
+
border-bottom: 1px solid $pix-neutral-20;
|
|
41
|
+
padding: $sidebar-padding;
|
|
42
|
+
display: flex;
|
|
43
|
+
align-items: center;
|
|
44
|
+
justify-content: space-between;
|
|
45
|
+
}
|
|
46
|
+
|
|
47
|
+
&__close-button {
|
|
48
|
+
flex-shrink: 0;
|
|
49
|
+
|
|
50
|
+
@include device-is('tablet') {
|
|
51
|
+
height: $tablet-close-button-size;
|
|
52
|
+
width: $tablet-close-button-size;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
55
|
+
|
|
56
|
+
&__content {
|
|
57
|
+
flex-grow: 1;
|
|
58
|
+
overflow: auto;
|
|
59
|
+
}
|
|
60
|
+
|
|
61
|
+
&__title {
|
|
62
|
+
@include h4;
|
|
63
|
+
margin-bottom: 0;
|
|
64
|
+
color: $pix-neutral-90;
|
|
65
|
+
padding-right: $mobile-close-button-size + $space-between-title-and-close-button;
|
|
66
|
+
|
|
67
|
+
@include device-is('tablet') {
|
|
68
|
+
padding-right: $tablet-close-button-size + $space-between-title-and-close-button;
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
|
|
72
|
+
&__content {
|
|
73
|
+
padding: $sidebar-padding 0;
|
|
74
|
+
}
|
|
75
|
+
|
|
76
|
+
&__footer {
|
|
77
|
+
padding: $sidebar-padding;
|
|
78
|
+
border-top: 1px solid $pix-neutral-20;
|
|
79
|
+
}
|
|
80
|
+
}
|
package/addon/styles/addon.scss
CHANGED
|
@@ -0,0 +1 @@
|
|
|
1
|
+
export { default } from '@1024pix/pix-ui/components/pix-sidebar';
|
|
@@ -0,0 +1,61 @@
|
|
|
1
|
+
import { hbs } from 'ember-cli-htmlbars';
|
|
2
|
+
|
|
3
|
+
export const Template = (args) => {
|
|
4
|
+
return {
|
|
5
|
+
template: hbs`
|
|
6
|
+
<PixButton @triggerAction={{fn (mut showSidebar) (not showSidebar)}}>Ouvrir la sidebar</PixButton>
|
|
7
|
+
<PixSidebar @showSidebar={{showSidebar}} @title={{title}} @onClose={{fn (mut showSidebar) (not showSidebar)}}>
|
|
8
|
+
<:content>
|
|
9
|
+
<p>
|
|
10
|
+
Une sidebar est, dans une interface graphique, une fenêtre qui prend le contrôle total du clavier et
|
|
11
|
+
de l'écran. Elle est en général associée à du paramétrage d'écran.
|
|
12
|
+
</p>
|
|
13
|
+
</:content>
|
|
14
|
+
<:footer>
|
|
15
|
+
<div style="display: flex; gap: 8px">
|
|
16
|
+
<PixButton @backgroundColor="transparent-light" @isBorderVisible="true">Annuler</PixButton>
|
|
17
|
+
<PixButton>Valider</PixButton>
|
|
18
|
+
</div>
|
|
19
|
+
</:footer>
|
|
20
|
+
</PixSidebar>
|
|
21
|
+
`,
|
|
22
|
+
context: args,
|
|
23
|
+
};
|
|
24
|
+
};
|
|
25
|
+
|
|
26
|
+
export const Default = Template.bind({});
|
|
27
|
+
Default.args = {
|
|
28
|
+
showSidebar: true,
|
|
29
|
+
title: 'Filtrer',
|
|
30
|
+
onClose: () => {},
|
|
31
|
+
};
|
|
32
|
+
|
|
33
|
+
export const argTypes = {
|
|
34
|
+
showSidebar: {
|
|
35
|
+
name: 'showSidebar',
|
|
36
|
+
description: 'Visibilité de la sidebar',
|
|
37
|
+
type: { name: 'boolean', required: false },
|
|
38
|
+
control: { type: 'boolean' },
|
|
39
|
+
table: {
|
|
40
|
+
type: { summary: 'boolean' },
|
|
41
|
+
defaultValue: { summary: false },
|
|
42
|
+
},
|
|
43
|
+
},
|
|
44
|
+
title: {
|
|
45
|
+
name: 'title',
|
|
46
|
+
description: 'Titre de la sidebar',
|
|
47
|
+
type: { name: 'string', required: true },
|
|
48
|
+
table: {
|
|
49
|
+
type: { summary: 'string' },
|
|
50
|
+
defaultValue: { summary: '' },
|
|
51
|
+
},
|
|
52
|
+
},
|
|
53
|
+
onClose: {
|
|
54
|
+
name: 'onClose',
|
|
55
|
+
description: 'Fonction à exécuter à la fermeture de la sidebar',
|
|
56
|
+
type: { name: 'function', required: true },
|
|
57
|
+
table: {
|
|
58
|
+
type: { summary: 'function' },
|
|
59
|
+
},
|
|
60
|
+
},
|
|
61
|
+
};
|
|
@@ -0,0 +1,57 @@
|
|
|
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-sidebar.stories.js';
|
|
5
|
+
|
|
6
|
+
<Meta
|
|
7
|
+
title="Basics/Sidebar"
|
|
8
|
+
component="PixSidebar"
|
|
9
|
+
decorators={[centered]}
|
|
10
|
+
argTypes={stories.argTypes}
|
|
11
|
+
/>
|
|
12
|
+
|
|
13
|
+
# PixSidebar
|
|
14
|
+
|
|
15
|
+
Une sidebar responsive et scrollable avec un overlay.
|
|
16
|
+
|
|
17
|
+
Ce composant possède deux `yield` :
|
|
18
|
+
|
|
19
|
+
- `:content` est destiné à accueillir le contenu principal de la fenêtre sidebar. Il peut accueillir tout type de
|
|
20
|
+
contenu HTML (simple texte, image, formulaire, etc.)
|
|
21
|
+
- `:footer` peut également accueillir tout type de contenu HTML, mais est destiné aux boutons permettant d'interagir
|
|
22
|
+
avec la sidebar, ce qui permettra de les positionner correctement dans tous les cas de figure.
|
|
23
|
+
|
|
24
|
+
<Canvas>
|
|
25
|
+
<Story name="Default" story={stories.Default} height={500} />
|
|
26
|
+
</Canvas>
|
|
27
|
+
|
|
28
|
+
## Usage
|
|
29
|
+
|
|
30
|
+
```html
|
|
31
|
+
<PixSidebar
|
|
32
|
+
@showSidebar={{true}}
|
|
33
|
+
@title="Filtrer"
|
|
34
|
+
@onClose={{this.closeSidebar}}
|
|
35
|
+
>
|
|
36
|
+
<:content>
|
|
37
|
+
<p>
|
|
38
|
+
Une sidebar est, dans une interface graphique, une fenêtre qui prend le contrôle total du clavier et
|
|
39
|
+
de l'écran. Elle est en général associée à du paramétrage d'écran.
|
|
40
|
+
</p>
|
|
41
|
+
</:content>
|
|
42
|
+
<:footer>
|
|
43
|
+
<PixButton
|
|
44
|
+
@backgroundColor="transparent-light"
|
|
45
|
+
@isBorderVisible={{true}}
|
|
46
|
+
@triggerAction={{this.closeSidebar}}
|
|
47
|
+
>
|
|
48
|
+
Annuler
|
|
49
|
+
</PixButton>
|
|
50
|
+
<PixButton>Valider</PixButton>
|
|
51
|
+
</:footer>
|
|
52
|
+
</PixSidebar>
|
|
53
|
+
```
|
|
54
|
+
|
|
55
|
+
## Arguments
|
|
56
|
+
|
|
57
|
+
<ArgsTable story="Default" />
|