@ptlm-azulejo/button 2.1.0 → 2.1.1-alpha.77

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.
Files changed (4) hide show
  1. package/CHANGELOG.md +128 -0
  2. package/README.md +59 -21
  3. package/dist/src/index.stories.d.ts.map +1 -1
  4. package/package.json +1 -1
package/CHANGELOG.md ADDED
@@ -0,0 +1,128 @@
1
+ # Change Log
2
+
3
+ ## 2.1.1
4
+
5
+ ### Patch Changes
6
+
7
+ - e5341cd: Documentation. Every package README now spells out both brands end to end instead
8
+ of showing one snippet with an "or" comment: which preset stylesheet to import,
9
+ which `.preset-*` class goes on `<html>` to select the theme at runtime,
10
+ `data-theme` for light/dark, and which font package the project needs (Leroy
11
+ Merlin → `@ptlm-azulejo/fonts-leroy-merlin`, Adeo → `@ptlm-azulejo/fonts-adeo`).
12
+
13
+ No component behaviour, prop or token changed. The patch bump exists because npm
14
+ ships `README.md` inside the tarball and renders it as the package page, so the
15
+ corrected instructions only reach consumers on a release.
16
+
17
+ ## 2.1.0
18
+
19
+ ### Minor Changes
20
+
21
+ - eb0b0f8: Make components follow the brand typeface, add the medium (500) font weight, and
22
+ expose stable `data-testid` hooks.
23
+
24
+ - Each preset now names its brand's typeface in `--font-family`
25
+ (`presets/leroy-merlin.css` → LeroyMerlin, `presets/adeo.css` → Roboto), with
26
+ `Arial, sans-serif` as the fallback stack.
27
+ - Components apply that typeface on their root, so they follow the active brand
28
+ instead of inheriting the host page's font. Opt out per component by setting
29
+ `--font-family: inherit` on it.
30
+ - `base.css` adds `--font-weight-medium: 500`, alongside the existing regular
31
+ (400), semi-bold (600) and bold (700) weights.
32
+ - Every component now exposes `data-testid` on its root and on meaningful
33
+ sub-parts (`button` / `button-spinner`, `loader` / `loader-text`,
34
+ `datepicker` / `datepicker-clear`, `segmented-control` /
35
+ `segmented-control-segment`), so tests can target them without depending on
36
+ CSS class names.
37
+
38
+ As with upstream Mozaic, the presets **name** the typeface but ship no
39
+ `@font-face` and no font binaries — loading the files stays the app's job, so you
40
+ keep control of hosting, subsetting and preload. Until you load them the fallback
41
+ stack renders and nothing breaks. Install the font package matching your brand
42
+ alongside the preset:
43
+
44
+ ```bash
45
+ # Leroy Merlin
46
+ yarn add @ptlm-azulejo/themes @ptlm-azulejo/fonts-leroy-merlin
47
+ # Adeo
48
+ yarn add @ptlm-azulejo/themes @ptlm-azulejo/fonts-adeo
49
+ ```
50
+
51
+ See the Fonts section of `packages/themes/README.md` for the full recipe.
52
+
53
+ ## 2.0.0
54
+
55
+ ### Major Changes
56
+
57
+ - 53000f7: Add Mozaic-aligned multi-brand theming support.
58
+
59
+ - New `@ptlm-azulejo/themes` package with structural/status tokens in `base.css`
60
+ and brand presets selected by a root class (`presets/leroy-merlin.css`,
61
+ `presets/adeo.css`), via `.preset-lm` / `.preset-adeo` and `data-theme` for
62
+ light/dark.
63
+ - `AzButton` now consumes theme tokens through utilities mapped in
64
+ `@theme inline`, working across both brands and in light/dark.
65
+
66
+ **BREAKING:** components no longer bake brand colors. The consumer must now
67
+ import `@ptlm-azulejo/themes/base.css` + a preset and apply the
68
+ `.preset-lm`/`.preset-adeo` class (and optional `data-theme="dark"`) on the root
69
+ element; otherwise components render uncolored. See the migration notes in
70
+ `packages/themes/README.md`.
71
+
72
+ All notable changes to this project will be documented in this file.
73
+ See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
74
+
75
+ ## [1.3.2](https://github.com/aplemes/library-components/compare/@ptlm-azulejo/button@1.3.1...@ptlm-azulejo/button@1.3.2) (2026-03-12)
76
+
77
+ **Note:** Version bump only for package @ptlm-azulejo/button
78
+
79
+ ## [1.3.1](https://github.com/aplemes/library-components/compare/@ptlm-azulejo/button@1.3.0...@ptlm-azulejo/button@1.3.1) (2026-03-12)
80
+
81
+ **Note:** Version bump only for package @ptlm-azulejo/button
82
+
83
+ # 1.3.0 (2026-03-12)
84
+
85
+ ### Bug Fixes
86
+
87
+ - [US-064] Button - align appearance prop and classObject with mozaic-vue ([152da0b](https://github.com/aplemes/library-components/commit/152da0bfcb05daec46a21cc35e361809d8d0d4fd))
88
+ - revert Button default slot text to 'Button Label' ([2cbf624](https://github.com/aplemes/library-components/commit/2cbf624bf1a1f1ea79f7e294c4912a9c7d6247d5))
89
+
90
+ ### Features
91
+
92
+ - [US-002] - Align Button with mozaic-vue reference ([def8c29](https://github.com/aplemes/library-components/commit/def8c291c8eb9245181f667bcb40a0bacce2a63a))
93
+ - [US-002] - Pacote de design tokens (@leroy-merlin-pt/tokens) ([2793d72](https://github.com/aplemes/library-components/commit/2793d72c8205c84ee428699b9d0679a6b791babb))
94
+ - [US-003] - Migrar componente Button do Mozaic (@leroy-merlin-pt/button) ([e5fb1c5](https://github.com/aplemes/library-components/commit/e5fb1c5a66560920b8c64014e4e08ca147beb794))
95
+ - [US-004] - Componente Input (@leroy-merlin-pt/input) ([a2a7894](https://github.com/aplemes/library-components/commit/a2a7894b057cab6b350a0b7e45cef7eea86e7a24))
96
+ - add full documentation, unified Storybook and component generator ([02ec178](https://github.com/aplemes/library-components/commit/02ec178e5c5ce4f1cf75efdcbabe33d7fd9d20f9))
97
+ - add README docs to all packages and align Button, IconButton, Input components ([a4df103](https://github.com/aplemes/library-components/commit/a4df103eef20c4c76f532125ae287b93223e1be4))
98
+ - migrate org to [@ptlm-azulejo](https://github.com/azulejo-kit) and add Az component prefix ([c31ba38](https://github.com/aplemes/library-components/commit/c31ba38c12562e2f662b07444eca0fba1a4fe8bc))
99
+ - test new release flow on Button ([b6014c0](https://github.com/aplemes/library-components/commit/b6014c028b3175a41d2ec5a737fd71b18138643b))
100
+ - update Button default label and default color ([16ff665](https://github.com/aplemes/library-components/commit/16ff66512a078307efd656f21da9d913c40ff87a))
101
+
102
+ # [1.2.0](https://github.com/aplemes/library-components/compare/@leroy-merlin-pt/button@1.1.3...@leroy-merlin-pt/button@1.2.0) (2026-03-12)
103
+
104
+ ### Features
105
+
106
+ - update Button default label and default color ([16ff665](https://github.com/aplemes/library-components/commit/16ff66512a078307efd656f21da9d913c40ff87a))
107
+
108
+ ## [1.1.2](https://github.com/aplemes/library-components/compare/@leroy-merlin-pt/button@1.1.1...@leroy-merlin-pt/button@1.1.2) (2026-03-11)
109
+
110
+ **Note:** Version bump only for package @leroy-merlin-pt/button
111
+
112
+ ## [1.1.1](https://github.com/aplemes/library-components/compare/@leroy-merlin-pt/button@1.1.0...@leroy-merlin-pt/button@1.1.1) (2026-03-11)
113
+
114
+ ### Bug Fixes
115
+
116
+ - revert Button default slot text to 'Button Label' ([2cbf624](https://github.com/aplemes/library-components/commit/2cbf624bf1a1f1ea79f7e294c4912a9c7d6247d5))
117
+
118
+ # [1.1.0](https://github.com/aplemes/library-components/compare/@leroy-merlin-pt/button@1.0.3...@leroy-merlin-pt/button@1.1.0) (2026-03-11)
119
+
120
+ ### Features
121
+
122
+ - test new release flow on Button ([b6014c0](https://github.com/aplemes/library-components/commit/b6014c028b3175a41d2ec5a737fd71b18138643b))
123
+
124
+ ## [1.0.3](https://github.com/aplemes/library-components/compare/@leroy-merlin-pt/button@1.0.2...@leroy-merlin-pt/button@1.0.3) (2026-03-11)
125
+
126
+ ### Bug Fixes
127
+
128
+ - [US-064] Button - align appearance prop and classObject with mozaic-vue ([152da0b](https://github.com/aplemes/library-components/commit/152da0bfcb05daec46a21cc35e361809d8d0d4fd))
package/README.md CHANGED
@@ -4,47 +4,85 @@ Buttons are key interactive elements used to perform actions and can be used as
4
4
 
5
5
  ## Installation
6
6
 
7
+ Install the button, the theme package, and **the font package matching your
8
+ project's brand**:
9
+
10
+ **Leroy Merlin projects**
11
+
7
12
  ```bash
8
- npm install @ptlm-azulejo/button @ptlm-azulejo/themes
13
+ npm install @ptlm-azulejo/button @ptlm-azulejo/themes @ptlm-azulejo/fonts-leroy-merlin
9
14
  # or
10
- yarn add @ptlm-azulejo/button @ptlm-azulejo/themes
15
+ yarn add @ptlm-azulejo/button @ptlm-azulejo/themes @ptlm-azulejo/fonts-leroy-merlin
16
+ ```
17
+
18
+ **Adeo projects**
19
+
20
+ ```bash
21
+ npm install @ptlm-azulejo/button @ptlm-azulejo/themes @ptlm-azulejo/fonts-adeo
22
+ # or
23
+ yarn add @ptlm-azulejo/button @ptlm-azulejo/themes @ptlm-azulejo/fonts-adeo
11
24
  ```
12
25
 
13
26
  ## Styles & theming
14
27
 
15
- The button reads theme CSS variables, so it needs `@ptlm-azulejo/themes`. Import a
16
- brand preset (it bundles the base tokens) and the component styles, then set the
17
- brand class on the root element:
28
+ The button ships no colors or typeface of its own — it reads design tokens from
29
+ CSS variables at runtime. Those tokens come from `@ptlm-azulejo/themes`, and
30
+ **the brand is selected by a class on your app's `<html>` element**, so switching
31
+ brand never touches component code.
32
+
33
+ | Project | Preset stylesheet | Root class | Typeface | Font package |
34
+ | --- | --- | --- | --- | --- |
35
+ | Leroy Merlin | `@ptlm-azulejo/themes/presets/leroy-merlin.css` | `preset-lm` | LeroyMerlinSans | `@ptlm-azulejo/fonts-leroy-merlin` |
36
+ | Adeo | `@ptlm-azulejo/themes/presets/adeo.css` | `preset-adeo` | Roboto | `@ptlm-azulejo/fonts-adeo` |
37
+
38
+ **Leroy Merlin projects**
18
39
 
19
40
  ```js
20
- import '@ptlm-azulejo/themes/presets/leroy-merlin.css' // or /presets/adeo.css
41
+ import '@ptlm-azulejo/themes/presets/leroy-merlin.css'
42
+ import '@ptlm-azulejo/fonts-leroy-merlin'
21
43
  import '@ptlm-azulejo/button/style.css'
22
44
  ```
23
45
 
24
46
  ```html
25
- <html class="preset-lm" data-theme="dark">
47
+ <html lang="pt" class="preset-lm">
26
48
  ```
27
49
 
28
- > Without a preset **and** the `.preset-*` class, the button renders uncolored.
29
- > See the [themes package](../themes/README.md) for brand switching, dark mode,
30
- > and custom brands.
50
+ **Adeo projects**
31
51
 
32
- The button also sets its own `font-family` from the preset's `--font-family`, so
33
- its label follows the active brand (LeroyMerlin / Roboto) rather than inheriting
34
- the page font. The preset only *names* the typeface, so you must also install the
35
- matching font package — without it `font-sans` falls back to a generic sans-serif:
52
+ ```js
53
+ import '@ptlm-azulejo/themes/presets/adeo.css'
54
+ import '@ptlm-azulejo/fonts-adeo'
55
+ import '@ptlm-azulejo/button/style.css'
56
+ ```
36
57
 
37
- ```bash
38
- yarn add @ptlm-azulejo/fonts-leroy-merlin # or @ptlm-azulejo/fonts-adeo for .preset-adeo
58
+ ```html
59
+ <html lang="pt" class="preset-adeo">
39
60
  ```
40
61
 
41
- ```js
42
- import '@ptlm-azulejo/fonts-leroy-merlin' // or '@ptlm-azulejo/fonts-adeo'
62
+ > The preset class is what resolves the brand at runtime. Without it — even with
63
+ > the stylesheets imported — the button renders uncolored and in a fallback
64
+ > typeface. See the [themes package](../themes/README.md) for brand switching,
65
+ > dark mode, and custom brands.
66
+
67
+ ### Light and dark mode
68
+
69
+ Add `data-theme` alongside the brand class to pin the color scheme. Leave it off
70
+ and the preset follows the OS `prefers-color-scheme`:
71
+
72
+ ```html
73
+ <html lang="pt" class="preset-lm" data-theme="dark">
43
74
  ```
44
75
 
45
- [Loading the font files is your app's job](../themes/README.md#fonts), as with
46
- upstream Mozaic; until then the fallback stack renders. To hand the button back to
47
- your page's font:
76
+ ### Why the font package is separate
77
+
78
+ The preset only *names* its typeface in `--font-family` and ships no font files.
79
+ [Loading them is your app's job](../themes/README.md#fonts), as with upstream
80
+ Mozaic, so you keep control of hosting, subsetting and preload. Without the
81
+ matching font package, `font-sans` falls back to a generic sans-serif. A
82
+ multi-brand app can install both and switch by swapping the `.preset-*` class:
83
+ only the active brand's file is ever downloaded.
84
+
85
+ To hand the button back to your page's font:
48
86
 
49
87
  ```css
50
88
  .preset-lm .btn { font-family: inherit; }
package/dist/src/index.stories.d.ts.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.stories.d.ts","sourceRoot":"","sources":["../../src/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AACrD,OAAO,MAAM,MAAM,aAAa,CAAA;AAEhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAoI7B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,QAAQ,EAAE,KAItB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAKpB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAKpB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAKpB,CAAA"}
1
+ {"version":3,"file":"index.stories.d.ts","sourceRoot":"","sources":["../../src/index.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAA;AACrD,OAAO,MAAM,MAAM,aAAa,CAAA;AAEhC,QAAA,MAAM,IAAI,EAAE,IAAI,CAAC,OAAO,MAAM,CAyK7B,CAAA;AAED,eAAe,IAAI,CAAA;AACnB,KAAK,KAAK,GAAG,QAAQ,CAAC,OAAO,IAAI,CAAC,CAAA;AAElC,eAAO,MAAM,QAAQ,EAAE,KAItB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAKpB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAKpB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAA;AAED,eAAO,MAAM,KAAK,EAAE,KAKnB,CAAA;AAED,eAAO,MAAM,OAAO,EAAE,KAKrB,CAAA;AAED,eAAO,MAAM,QAAQ,EAAE,KAKtB,CAAA;AAED,eAAO,MAAM,MAAM,EAAE,KAKpB,CAAA"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@ptlm-azulejo/button",
3
- "version": "2.1.0",
3
+ "version": "2.1.1-alpha.77",
4
4
  "type": "module",
5
5
  "main": "./dist/index.umd.cjs",
6
6
  "module": "./dist/index.js",