|
5 | 5 | </p>
|
6 | 6 | <div align="center">
|
7 | 7 |
|
8 |
| -### A collection of assets and guidelines for building consistent user experiences across OVHcloud products. |
| 8 | +### A collection of assets and guidelines for building consistent user experiences across OVHCloud products. |
9 | 9 |
|
10 |
| -[![NPM version][npm-image]][npm-url] [![CI status][github-action-image]][github-action-url] [![NPM downloads][download-image]][download-url] [![Licence][licence-image]][licence-url] |
| 10 | +[![NPM version][npm-image]][npm-url] [![NPM downloads][download-image]][download-url] [![Licence][licence-image]][licence-url] |
11 | 11 |
|
12 | 12 | [![StencilJS][stenciljs-image]][stenciljs-url] [![TypeScript][typescript-image]][typescript-url] [![Sass][sass-image]][sass-url] [![Storybook][storybook-image]][storybook-url] [![Jest][jest-image]][jest-url] [![Puppeteer][puppeteer-image]][puppeteer-url]
|
13 | 13 |
|
14 |
| -[npm-image]: https://img.shields.io/npm/v/@ovhcloud/ods-core |
15 |
| -[npm-url]: https://www.npmjs.com/package/@ovhcloud/ods-core |
16 |
| -[github-action-image]: https://github.com/ovh/design-system/actions/workflows/ci.yml/badge.svg |
17 |
| -[github-action-url]: https://github.com/ovh/design-system/actions/workflows/ci.yml |
| 14 | +[npm-image]: https://www.npmjs.com/package/@ovhcloud/ods-components |
| 15 | +[npm-url]: https://www.npmjs.com/package/@ovhcloud/ods-components |
18 | 16 | [download-image]: https://img.shields.io/npm/dm/@ovhcloud/ods-core.svg?style=flat
|
19 | 17 | [download-url]: https://www.npmjs.com/package/@ovhcloud/ods-core
|
20 | 18 | [licence-image]: https://img.shields.io/github/license/ovh/design-system
|
21 | 19 | [licence-url]: LICENSE.md
|
22 | 20 | [stenciljs-image]: https://img.shields.io/badge/-StencilJS-000?logo=webcomponents.org&logoColor=white
|
23 | 21 | [stenciljs-url]: https://stenciljs.com/
|
24 | 22 | [typescript-image]: https://img.shields.io/badge/-TypeScript-3178C6?logo=typescript&logoColor=white
|
25 |
| -[typescript-url]: https://stenciljs.com/ |
| 23 | +[typescript-url]: https://www.typescriptlang.org/ |
26 | 24 | [sass-image]: https://img.shields.io/badge/-Sass-CC6699?logo=sass&logoColor=white
|
27 | 25 | [sass-url]: https://sass-lang.com/
|
28 | 26 | [storybook-image]: https://cdn.jsdelivr.net/gh/storybookjs/brand@master/badge/badge-storybook.svg
|
29 | 27 | [storybook-url]: https://storybook.js.org/
|
30 | 28 | [jest-image]: https://img.shields.io/badge/-Jest-C21325?logo=jest&logoColor=white
|
31 |
| -[jest-url]: https://jestjs.io/fr/ |
| 29 | +[jest-url]: https://jestjs.io/ |
32 | 30 | [puppeteer-image]: https://img.shields.io/badge/-Puppeteer-40B5A4?logo=puppeteer&logoColor=white
|
33 | 31 | [puppeteer-url]: https://pptr.dev/
|
34 | 32 |
|
35 | 33 | </div>
|
36 | 34 |
|
37 | 35 | ## Quick links
|
38 |
| -* [**Storybook (current version)**](https://ovh.github.io/design-system/latest/) |
39 |
| -* [**All ODS versions**](https://ovh.github.io/design-system/) |
| 36 | + |
| 37 | +* [**Storybook**](https://ovh.github.io/design-system/latest/) |
40 | 38 | * [**What's new**](https://ovh.github.io/design-system/latest/?path=/story/ovhcloud-design-system-what-s-new-what-s-new--page)
|
41 | 39 | * [**Changelog**](https://ovh.github.io/design-system/latest/?path=/story/ovhcloud-design-system-what-s-new-changelog--page)
|
42 |
| -* [**Global Documentation 🔗**](https://zeroheight.com/6fc8a63f7/p/533db0-ovhcloud-design-system) |
43 | 40 |
|
44 | 41 | ### Requirements (only for contributing)
|
| 42 | + |
45 | 43 | * [**Node.js**](https://nodejs.org/en/) with version ">= 18.17"
|
46 | 44 | * [**Yarn**](https://yarnpkg.com/) with version ">= 2.4"
|
47 | 45 |
|
48 | 46 | ## Installation
|
49 |
| -All the OVHcloud Design System packages are available on [**NPM**](https://www.npmjs.com/). |
| 47 | + |
| 48 | +All the OVHCloud Design System packages are available on [**NPM**](https://www.npmjs.com/). |
50 | 49 |
|
51 | 50 | ```sh
|
52 |
| -yarn add @ovhcloud/ods-components @ovhcloud/ods-theme-blue-jeans |
| 51 | +yarn add @ovhcloud/ods-components @ovhcloud/ods-themes |
53 | 52 | ```
|
54 | 53 | or
|
55 | 54 | ```sh
|
56 |
| -npm install --save @ovhcloud/ods-components @ovhcloud/ods-theme-blue-jeans |
| 55 | +npm install --save @ovhcloud/ods-components @ovhcloud/ods-themes |
57 | 56 | ```
|
58 | 57 |
|
59 | 58 | ## Usage
|
60 |
| -To start using ODS, you'll need to import the components. |
61 |
| - |
62 |
| -Add a dependency to either: |
63 |
| -* `@ovhcloud/ods-components` to import all components |
64 |
| -* `@ovhcloud/ods-components-<component>` to import a specific component |
65 | 59 |
|
66 | 60 | Components can be imported using one of:
|
67 | 61 | ```typescript
|
68 |
| -import { Osds<Component> } from '@ovhcloud/ods-component-<component>' |
69 |
| -import { Osds<Component> } from '@ovhcloud/ods-component-<component>/react' |
70 |
| -import { Osds<Component> } from '@ovhcloud/ods-component-<component>/vue' |
71 |
| -``` |
72 |
| - |
73 |
| -You can import enums directly from the component: |
74 |
| -```typescript |
75 |
| -import { ODS_%COMPONENT%_SIZE, ODS_%COMPONENT%_SIZES } from '@ovhcloud/ods-component-<component>' |
76 |
| -``` |
77 |
| - |
78 |
| -Same goes for interfaces: |
79 |
| -```typescript |
80 |
| -import type { Ods<Component>Attribute } from '@ovhcloud/ods-component-<component>' |
| 62 | +import { Ods<Component> } from '@ovhcloud/ods-components>' |
| 63 | +import { Ods<Component> } from '@ovhcloud/ods-components/react' |
| 64 | +import { Ods<Component> } from '@ovhcloud/ods-components/vue' |
81 | 65 | ```
|
82 | 66 |
|
83 | 67 | Then, in your view, you can start using ODS components. For instance:
|
84 | 68 | ```html
|
85 |
| -<osds-button> |
86 |
| - My Button |
87 |
| -</osds-button> |
| 69 | +<ods-button label="My Button"> |
| 70 | +</ods-button> |
88 | 71 | ```
|
89 | 72 |
|
90 | 73 | For more detail, see our global [Get Started](https://ovh.github.io/design-system/latest/?path=/story/ovhcloud-design-system-get-started--page) guide
|
|
0 commit comments