@1024pix/pix-ui 21.0.0 → 22.0.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.
@@ -7,4 +7,7 @@ module.exports = {
7
7
  '../docs/**/*.stories.@(mdx)',
8
8
  '../app/**/*.stories.@(js|mdx)',
9
9
  ],
10
+ core: {
11
+ builder: 'webpack5',
12
+ },
10
13
  };
package/CHANGELOG.md CHANGED
@@ -1,5 +1,14 @@
1
1
  # Pix-UI Changelog
2
2
 
3
+ ## v22.0.0 (08/12/2022)
4
+
5
+
6
+ ### :rocket: Amélioration
7
+ - [#288](https://github.com/1024pix/pix-ui/pull/288) [FEATURE] Ajout le composant PixToggle (PIX-6427)
8
+
9
+ ### :building_construction: Tech
10
+ - [#292](https://github.com/1024pix/pix-ui/pull/292) [TECH] Mettre à jour `ember-source` vers la 4.0.1 (PIX-6462).
11
+
3
12
  ## v21.0.0 (05/12/2022)
4
13
 
5
14
 
package/README.md CHANGED
@@ -15,8 +15,8 @@ Pix-UI c'est l'implémentation des principes du design system de Pix. Cela se ma
15
15
 
16
16
  ##### Version du projet :
17
17
 
18
- * Ember CLI v3.25.1
19
- * Node 14.16.0
18
+ * Ember CLI v3.24 or above
19
+ * Node 12 or above
20
20
 
21
21
 
22
22
  ## Installation de l'addon Pix-UI <a id="Addon"></a>
@@ -0,0 +1,24 @@
1
+ <label class={{this.className}}>
2
+ <span class="pix-toggle__label{{if @screenReaderOnly ' screen-reader-only'}}">{{@label}}</span>
3
+ <button
4
+ class="pix-toggle__button"
5
+ aria-pressed={{if @toggled "true" "false"}}
6
+ type="button"
7
+ {{on "click" this.onToggle}}
8
+ >
9
+ <span class="pix-toggle__on">
10
+ {{#if @onLabel}}
11
+ {{@onLabel}}
12
+ {{else}}
13
+ {{yield to="on"}}
14
+ {{/if}}
15
+ </span>
16
+ <span class="pix-toggle__off">
17
+ {{#if @offLabel}}
18
+ {{@offLabel}}
19
+ {{else}}
20
+ {{yield to="off"}}
21
+ {{/if}}
22
+ </span>
23
+ </button>
24
+ </label>
@@ -0,0 +1,23 @@
1
+ import Component from '@glimmer/component';
2
+ import { action } from '@ember/object';
3
+
4
+ export default class PixToggle extends Component {
5
+ get className() {
6
+ const classes = ['pix-toggle'];
7
+ if (this.args.inline) {
8
+ classes.push('pix-toggle--inline');
9
+ }
10
+ if (this.args.toggled) {
11
+ classes.push('pix-toggle--pressed');
12
+ }
13
+ if (this.args.screenReaderOnly) {
14
+ classes.push('pix-toggle--screen-reader-only');
15
+ }
16
+ return classes.join(' ');
17
+ }
18
+
19
+ @action
20
+ onToggle() {
21
+ this.args.onChange(!this.args.toggled);
22
+ }
23
+ }
@@ -0,0 +1,63 @@
1
+ .pix-toggle {
2
+ display: flex;
3
+ flex-direction: column;
4
+
5
+ &__label {
6
+ color: $pix-neutral-90;
7
+
8
+ @include text;
9
+ }
10
+
11
+ &__button {
12
+ width: fit-content;
13
+ background-color: transparent;
14
+ border: 1px solid $pix-neutral-30;
15
+ border-radius: 4px;
16
+ padding: $spacing-xxs;
17
+ margin-top: $spacing-xxs;
18
+ }
19
+
20
+ &__on,
21
+ &__off {
22
+ display: inline-block;
23
+ border-radius: 4px;
24
+ padding: $spacing-xs;
25
+ color: $pix-neutral-70;
26
+
27
+ @include text-small;
28
+ }
29
+
30
+ &__off {
31
+ background-color: $pix-neutral-45;
32
+ color: $white;
33
+ }
34
+
35
+ &--inline {
36
+ flex-direction: row;
37
+ align-items: center;
38
+ gap: $spacing-xxs;
39
+ }
40
+
41
+ &--inline,
42
+ &--screen-reader-only {
43
+ .pix-toggle {
44
+ &__button {
45
+ margin-top: 0;
46
+ }
47
+ }
48
+ }
49
+
50
+ &--pressed {
51
+ .pix-toggle {
52
+ &__on {
53
+ background-color: $pix-neutral-45;
54
+ color: $white;
55
+ }
56
+
57
+ &__off {
58
+ background-color: transparent;
59
+ color: inherit;
60
+ }
61
+ }
62
+ }
63
+ }
@@ -29,6 +29,7 @@
29
29
  @import 'pix-dropdown';
30
30
  @import 'pix-pagination';
31
31
  @import 'pix-checkbox';
32
+ @import 'pix-toggle';
32
33
  @import 'trap-focus';
33
34
 
34
35
  // at the end so it can override it's children scss
@@ -0,0 +1 @@
1
+ export { default } from '@1024pix/pix-ui/components/pix-toggle';
@@ -0,0 +1,120 @@
1
+ import { hbs } from 'ember-cli-htmlbars';
2
+ import { action } from '@storybook/addon-actions';
3
+
4
+ export const Template = (args) => {
5
+ return {
6
+ template: hbs`
7
+ <PixToggle
8
+ @label={{this.label}}
9
+ @onLabel={{this.onLabel}}
10
+ @offLabel={{this.offLabel}}
11
+ @toggled={{this.toggled}}
12
+ @onChange={{this.onChange}}
13
+ @inline={{this.inline}}
14
+ @screenReaderOnly={{this.screenReaderOnly}}
15
+ />
16
+ `,
17
+ context: args,
18
+ };
19
+ };
20
+
21
+ export const TemplateWithYields = (args) => {
22
+ return {
23
+ template: hbs`
24
+ <PixToggle
25
+ @label={{this.label}}
26
+ @toggled={{this.toggled}}
27
+ @onChange={{this.onChange}}
28
+ >
29
+ <:on><FaIcon @icon="sun" /></:on>
30
+ <:off><FaIcon @icon="moon" /></:off>
31
+ </PixToggle>
32
+ `,
33
+ context: args,
34
+ };
35
+ };
36
+
37
+ export const Default = Template.bind({});
38
+ Default.args = {
39
+ label: 'Mon toggle',
40
+ onLabel: 'Oui',
41
+ offLabel: 'Non',
42
+ toggled: false,
43
+ onChange: action('onChange'),
44
+ };
45
+
46
+ export const Inline = Template.bind({});
47
+ Inline.args = {
48
+ inline: true,
49
+ label: 'Mon toggle',
50
+ onLabel: 'Oui',
51
+ offLabel: 'Non',
52
+ toggled: false,
53
+ onChange: action('onChange'),
54
+ };
55
+
56
+ export const ScreenReaderOnly = Template.bind({});
57
+ ScreenReaderOnly.args = {
58
+ screenReaderOnly: true,
59
+ label: 'Mon toggle',
60
+ onLabel: 'Oui',
61
+ offLabel: 'Non',
62
+ toggled: false,
63
+ onChange: action('onChange'),
64
+ };
65
+
66
+ export const WithYields = TemplateWithYields.bind({});
67
+ WithYields.args = {
68
+ label: 'Mon toggle',
69
+ toggled: false,
70
+ onChange: action('onChange'),
71
+ };
72
+
73
+ export const argTypes = {
74
+ label: {
75
+ name: 'label',
76
+ description: 'Le label du PixToggle',
77
+ type: { name: 'string', required: true },
78
+ },
79
+ onLabel: {
80
+ name: 'onLabel',
81
+ description: "Le label de l'état actif du PixToggle",
82
+ type: { name: 'string', required: false },
83
+ },
84
+ offLabel: {
85
+ name: 'offLabel',
86
+ description: "Le label de l'état non actif du PixToggle",
87
+ type: { name: 'string', required: false },
88
+ },
89
+ toggled: {
90
+ name: 'toggled',
91
+ description: 'Détermine si le PixToggle est activé',
92
+ type: { name: 'boolean', required: true },
93
+ },
94
+ onChange: {
95
+ name: 'onChange',
96
+ description: "Fonction à appeler quand le PixToggle change d'état.",
97
+ type: { required: true },
98
+ control: { disable: true },
99
+ },
100
+ inline: {
101
+ name: 'inline',
102
+ description: "Permet d'afficher le PixToggle sur une seule ligne",
103
+ control: { type: 'boolean' },
104
+ type: { name: 'boolean', required: false },
105
+ table: {
106
+ type: { summary: 'boolean' },
107
+ defaultValue: { summary: false },
108
+ },
109
+ },
110
+ screenReaderOnly: {
111
+ name: 'screenReaderOnly',
112
+ description: "Permet de rendre le label lisible uniquement par les lecteurs d'écran",
113
+ control: { type: 'boolean' },
114
+ type: { name: 'boolean', required: false },
115
+ table: {
116
+ type: { summary: 'boolean' },
117
+ defaultValue: { summary: false },
118
+ },
119
+ },
120
+ };
@@ -0,0 +1,38 @@
1
+ import { Meta, Story, Canvas, ArgsTable } from '@storybook/addon-docs/blocks';
2
+ import centered from '@storybook/addon-centered/ember';
3
+ import * as stories from './pix-toggle.stories.js';
4
+
5
+ <Meta
6
+ title='Form/Toggle'
7
+ component='PixToggle'
8
+ argTypes={stories.argTypes}
9
+ />
10
+
11
+ # Pix Select
12
+
13
+ Affiche un bouton à deux états.
14
+
15
+ ## Default
16
+
17
+ <Canvas>
18
+ <Story name='Default' story={stories.Default} height={200} />
19
+ </Canvas>
20
+
21
+ ## Inline
22
+
23
+ <Canvas>
24
+ <Story name='Inline' story={stories.Inline} height={200} />
25
+ </Canvas>
26
+
27
+ ## ScreenReaderOnly
28
+
29
+ <Canvas>
30
+ <Story name='ScreenReaderOnly' story={stories.ScreenReaderOnly} height={200} />
31
+ </Canvas>
32
+
33
+ ## WithYields
34
+
35
+ <Canvas>
36
+ <Story name='WithYields' story={stories.WithYields} height={200} />
37
+ </Canvas>
38
+
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@1024pix/pix-ui",
3
- "version": "21.0.0",
3
+ "version": "22.0.0",
4
4
  "description": "Pix-UI is the implementation of Pix design principles and guidelines for its products.",
5
5
  "keywords": [
6
6
  "ember-addon"
@@ -43,7 +43,7 @@
43
43
  "signal-github": "./scripts/signal-deploy-to-pr.sh"
44
44
  },
45
45
  "dependencies": {
46
- "ember-cli-babel": "^7.26.6",
46
+ "ember-cli-babel": "^7.26.8",
47
47
  "ember-cli-htmlbars": "^6.1.1",
48
48
  "ember-cli-sass": "^11.0.1",
49
49
  "ember-cli-string-utils": "^1.1.0",
@@ -52,12 +52,13 @@
52
52
  "ember-truth-helpers": "^3.1.1"
53
53
  },
54
54
  "devDependencies": {
55
- "@1024pix/ember-testing-library": "^0.5.0",
55
+ "@1024pix/ember-testing-library": "^0.6.0",
56
56
  "@babel/eslint-parser": "^7.19.1",
57
57
  "@babel/plugin-proposal-decorators": "^7.20.5",
58
58
  "@ember/optional-features": "^2.0.0",
59
59
  "@ember/render-modifiers": "^2.0.4",
60
60
  "@ember/test-helpers": "^2.8.1",
61
+ "@embroider/test-setup": "^0.48.1",
61
62
  "@formatjs/intl": "^2.5.1",
62
63
  "@fortawesome/ember-fontawesome": "^0.4.1",
63
64
  "@fortawesome/free-regular-svg-icons": "^6.2.1",
@@ -70,16 +71,18 @@
70
71
  "@storybook/addon-docs": "^6.5.13",
71
72
  "@storybook/addon-essentials": "^6.5.13",
72
73
  "@storybook/addons": "^6.5.13",
74
+ "@storybook/builder-webpack5": "^6.5.13",
73
75
  "@storybook/ember": "^6.5.13",
74
76
  "@storybook/ember-cli-storybook": "^0.6.0",
77
+ "@storybook/manager-webpack5": "^6.5.13",
75
78
  "@storybook/storybook-deployer": "^2.8.16",
76
79
  "@storybook/theming": "^6.5.13",
77
80
  "@testing-library/user-event": "^14.4.3",
78
81
  "axios": "^1.2.0",
79
82
  "broccoli-asset-rev": "^3.0.0",
80
83
  "core-js": "^3.26.1",
81
- "ember-auto-import": "^1.12.0",
82
- "ember-cli": "^3.27.0",
84
+ "ember-auto-import": "^2.5.0",
85
+ "ember-cli": "^4.8.0",
83
86
  "ember-cli-dependency-checker": "^3.3.1",
84
87
  "ember-cli-google-fonts": "^2.16.2",
85
88
  "ember-cli-inject-live-reload": "^2.1.0",
@@ -88,11 +91,11 @@
88
91
  "ember-disable-prototype-extensions": "^1.1.3",
89
92
  "ember-export-application-global": "^2.0.1",
90
93
  "ember-load-initializers": "^2.1.2",
91
- "ember-maybe-import-regenerator": "^1.0.0",
92
- "ember-qunit": "^4.6.0",
94
+ "ember-page-title": "^7.0.0",
95
+ "ember-qunit": "^6.0.0",
93
96
  "ember-resolver": "^8.0.3",
94
97
  "ember-sinon": "^5.0.0",
95
- "ember-source": "^3.28.0",
98
+ "ember-source": "^4.0.1",
96
99
  "ember-source-channel-url": "^3.0.0",
97
100
  "ember-template-lint": "^4.18.2",
98
101
  "ember-template-lint-plugin-prettier": "^4.1.0",
@@ -104,13 +107,21 @@
104
107
  "eslint-plugin-prettier": "^4.2.1",
105
108
  "eslint-plugin-qunit": "^7.3.3",
106
109
  "fs-extra": "^10.1.0",
110
+ "html-webpack-plugin": "^5.5.0",
107
111
  "loader.js": "^4.7.0",
108
112
  "lodash": "^4.17.21",
109
113
  "moment": "^2.29.4",
110
114
  "npm-run-all": "^4.1.5",
111
115
  "prettier": "^2.8.0",
116
+ "qunit": "^2.19.3",
112
117
  "qunit-dom": "^2.0.0",
113
- "sass": "^1.56.1"
118
+ "sass": "^1.56.1",
119
+ "webpack": "^5.75.0"
120
+ },
121
+ "overrides": {
122
+ "@storybook/ember": {
123
+ "ember-source": "^4.0.1"
124
+ }
114
125
  },
115
126
  "bugs": {
116
127
  "url": "https://github.com/1024pix/pix-ui/issues"
@@ -1,23 +0,0 @@
1
- name: automerge check
2
-
3
- on:
4
- pull_request:
5
- types:
6
- - labeled
7
- - unlabeled
8
- check_suite:
9
- types:
10
- - completed
11
- status:
12
- types:
13
- - success
14
-
15
- permissions: write-all
16
-
17
- jobs:
18
- automerge:
19
- runs-on: ubuntu-latest
20
- steps:
21
- - uses: 1024pix/pix-actions/auto-merge@v0
22
- with:
23
- auto_merge_token: "${{ github.token }}"
@@ -1,22 +0,0 @@
1
- name: Deploy Pix UI Storybook
2
-
3
- on:
4
- workflow_dispatch:
5
- push:
6
- tags:
7
- - '*'
8
-
9
- jobs:
10
- deploy:
11
- runs-on: ubuntu-latest
12
- steps:
13
- - uses: actions/checkout@v3
14
- - uses: actions/setup-node@v3
15
- with:
16
- node-version: 16.14.0
17
- - run: npm i -g npm@8.13.2
18
- - run: npm ci
19
- - name: Deploy storybook to Github Pages
20
- run: npm run deploy-storybook -- --ci
21
- env:
22
- GH_TOKEN: 1024pix:${{ secrets.GITHUB_TOKEN }}
@@ -1,23 +0,0 @@
1
- # This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
2
- # For more information see: https://help.github.com/actions/language-and-framework-guides/publishing-nodejs-packages
3
-
4
- name: Node.js Package
5
-
6
- on:
7
- push:
8
- tags:
9
- - '*'
10
-
11
- jobs:
12
- publish-npm:
13
- runs-on: ubuntu-latest
14
- steps:
15
- - uses: actions/checkout@v2
16
- - uses: actions/setup-node@v2
17
- with:
18
- node-version: '16'
19
- check-latest: true
20
- registry-url: https://registry.npmjs.org/
21
- - run: npm publish --access public
22
- env:
23
- NODE_AUTH_TOKEN: ${{secrets.NPM_PUBLISH_ACCESS_TOKEN}}
@@ -1,33 +0,0 @@
1
- name: Merge on Dev
2
- on:
3
- push:
4
- branches:
5
- - dev
6
- jobs:
7
- transition-issue:
8
- name: Transition Issue
9
- runs-on: ubuntu-latest
10
- steps:
11
- - name: Checkout
12
- uses: actions/checkout@master
13
-
14
- - name: Login
15
- uses: atlassian/gajira-login@master
16
- env:
17
- JIRA_BASE_URL: ${{ secrets.JIRA_BASE_URL }}
18
- JIRA_USER_EMAIL: ${{ secrets.JIRA_USER_EMAIL }}
19
- JIRA_API_TOKEN: ${{ secrets.JIRA_API_TOKEN }}
20
-
21
- - name: Find Issue Key
22
- id: find
23
- uses: atlassian/gajira-find-issue-key@master
24
- continue-on-error: true
25
- with:
26
- from: commits
27
-
28
- - name: Transition issue
29
- uses: atlassian/gajira-transition@master
30
- if: ${{ steps.find.outputs.issue }}
31
- with:
32
- issue: ${{ steps.find.outputs.issue }}
33
- transition: "Move to 'Deployed in Integration'"
package/.prettierignore DELETED
@@ -1 +0,0 @@
1
- /blueprints/**