@mozaic-ds/angular 2.0.0-beta.0 → 2.0.0-beta.2

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/README.md CHANGED
@@ -1,63 +1,123 @@
1
- # MozaicNg
1
+ <p align="center">
2
+ <img alt="ADEO Design system - Angular library" src="./.storybook/assets/sidebar-logo.svg" />
3
+ </p>
4
+
5
+ <h1 align="center">
6
+ ADEO Design system - Angular
7
+ </h1>
8
+
9
+ <p align="center">
10
+ A library of <a href="https://angular.io">Angular</a> components implementing ADEO Design system guidelines.
11
+ </p>
12
+
13
+ <p align="center">
14
+ <a href="https://www.npmjs.com/package/@mozaic-ds/angular">
15
+ <img src="https://img.shields.io/npm/v/@mozaic-ds/angular?label=NPM&logo=npm&color=yellow" alt="npm version">
16
+ </a>
17
+ <a href="https://adeo.github.io/mozaic-angular">
18
+ <img src="https://img.shields.io/badge/PRs-welcome-blue.svg?logo=github" alt="PRs welcome" />
19
+ </a>
20
+ <a href="https://app.slack.com/client/T4R6RCZFA/CN4K3A99R">
21
+ <img src="https://img.shields.io/badge/Slack-mozaic_angular-611f69.svg?logo=slack" alt="Slack mozaic-angular" />
22
+ </a>
23
+ <a href="https://keys.adeo.com/keys/ls/space/2583429798460717/adeo-adeo-design-system">
24
+ <img src="https://img.shields.io/badge/KEYS-Adeo_Design_System-4526ce.svg" alt="KEYS ADEO Design system" />
25
+ </a>
26
+ </p>
27
+
28
+ ## 🎨 Getting started
29
+
30
+ **ADEO Design system** is a global and collaborative design system that facilitates the designer and developer experience, enabling them to create universal interfaces perfectly aligned with the business strategy of [Adeo](https://www.adeo.com/).
31
+
32
+ ## 📦 Install
33
+
34
+ To install the Angular library in your project, you will need to run the following command using `npm`:
35
+
36
+ ```shell
37
+ npm i @mozaic-ds/angular
38
+ ```
2
39
 
3
- This project was generated using [Angular CLI](https://github.com/angular/angular-cli) version 20.0.0.
40
+ Or with **Yarn**:
4
41
 
5
- ## Code scaffolding
42
+ ```shell
43
+ yarn add @mozaic-ds/angular
44
+ ```
6
45
 
7
- Angular CLI includes powerful code scaffolding tools. To generate a new component, run:
46
+ ## 📝 Usage
8
47
 
9
- ```bash
10
- ng generate component component-name
11
- ```
48
+ Import the styles in styles.scss
12
49
 
13
- For a complete list of available schematics (such as `components`, `directives`, or `pipes`), run:
50
+ ```typescript
14
51
 
15
- ```bash
16
- ng generate --help
52
+ @use '@mozaic-ds/tokens/adeo/theme' as *;
53
+ @use '@mozaic-ds/styles/tools/t.font' as *;
54
+ @use '@mozaic-ds/tokens' as *;
17
55
  ```
18
56
 
19
- ## Building
57
+ To import and use a component, you can proceed as follows:
20
58
 
21
- To build the library, run:
59
+ ```vue
60
+ <script setup lang="ts">
61
+ import { MozButtonComponent } from '@mozaic-ds/angular';
62
+ </script>
22
63
 
23
- ```bash
24
- ng build mozaic-ng
64
+ <template>
65
+ <button moz-button>This is a Mozaic Button</button>
66
+ </template>
25
67
  ```
26
68
 
27
- This command will compile your project, and the build artifacts will be placed in the `dist/` directory.
69
+ Find the complete list of [our components](https://github.com/adeo/mozaic-angular/tree/feat/moz-v2/projects/mozaic-ng/src/lib).
70
+
71
+ And all the available components are showcased in our [Storybook](https://adeo.github.io/mozaic-angular/).
72
+
73
+ ## 📰 Changelog
74
+
75
+ Releases are managed with **GitHub Releases**, including the changelog for each one.<br/>
76
+ Access to the [Changelog](/CHANGELOG.md) to find out about the detailed changes to each release.
28
77
 
29
- ### Publishing the Library
78
+ ## 📣 Stay in touch
30
79
 
31
- Once the project is built, you can publish your library by following these steps:
80
+ - Join the [#mozaic-angular](https://adeo-tech-community.slack.com/archives/C01BB8911M4) channel on **Slack**
81
+ - Join the [#mozaic-support](https://adeo-tech-community.slack.com/archives/CKQJZL7C4) channel on **Slack**
82
+ - Follow our [KEYS page](https://keys.adeo.com/keys/ls/space/2583429798460717/adeo-adeo-design-system)
32
83
 
33
- 1. Navigate to the `dist` directory:
34
- ```bash
35
- cd dist/mozaic-ng
36
- ```
84
+ ## 🐞 Bugs and feature requests
37
85
 
38
- 2. Run the `npm publish` command to publish your library to the npm registry:
39
- ```bash
40
- npm publish
41
- ```
86
+ Have a bug or a feature request?<br/>
87
+ Please [open an issue](https://github.com/adeo/mozaic-angular/issues/new/choose) and use the template associated with your request.
42
88
 
43
- ## Running unit tests
89
+ However, if you are able to contribute and fix bugs, build new features, or help to improve the project documentation, feel free to do it! _(more information below)_
44
90
 
45
- To execute unit tests with the [Karma](https://karma-runner.github.io) test runner, use the following command:
91
+ ## ✍️ Contributing
92
+
93
+ Setup the project to start contributing.
46
94
 
47
- ```bash
48
- ng test
49
95
  ```
96
+ // Clone the repo
97
+ $ git clone git@github.com:adeo/mozaic-angular.git
50
98
 
51
- ## Running end-to-end tests
99
+ // Go to the cloned directory
100
+ $ cd mozaic-angular
52
101
 
53
- For end-to-end (e2e) testing, run:
102
+ // Checkout the branch you are working on
103
+ $ git checkout <branch name>
54
104
 
55
- ```bash
56
- ng e2e
105
+ // Install dependencies
106
+ $ npm install
57
107
  ```
58
108
 
59
- Angular CLI does not come with an end-to-end testing framework by default. You can choose one that suits your needs.
109
+ We're always looking for contributors to help us fix bugs, build features, or help us improve the documentation. If you're intersted check out our [Code of Conduct](CODE_OF_CONDUCT.md) and [Contribution Guide](CONTRIBUTING.md).
110
+
111
+ ## 🧑‍💻 Contributors
112
+
113
+ **Owners**
114
+
115
+ **[ADEO Design system Team](https://github.com/orgs/adeo/teams/adeo-design-system)**
116
+
117
+ **Maintainer**
118
+
119
+ - **[David Martin](https://github.com/dmartinds)**
60
120
 
61
- ## Additional Resources
121
+ ## 📄 Licensing
62
122
 
63
- For more information on using the Angular CLI, including detailed command references, visit the [Angular CLI Overview and Command Reference](https://angular.dev/tools/cli) page.
123
+ This project is licensed under the Apache V2 License. See [LICENSE](LICENSE) for more information.