@justeattakeaway/pie-spinner 1.2.1 → 1.2.3
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 +50 -56
- package/custom-elements.json +1 -1
- package/dist/index.js +2 -2
- package/package.json +1 -1
- package/src/spinner.scss +4 -0
package/README.md
CHANGED
|
@@ -1,90 +1,84 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
</p>
|
|
1
|
+
# @justeattakeaway/pie-spinner
|
|
2
|
+
[Source Code](https://github.com/justeattakeaway/pie/tree/main/packages/components/pie-spinner) | [Design Documentation](https://pie.design/components/spinner) | [NPM](https://www.npmjs.com/package/@justeattakeaway/pie-spinner)
|
|
4
3
|
|
|
5
|
-
<p
|
|
4
|
+
<p>
|
|
6
5
|
<a href="https://www.npmjs.com/@justeattakeaway/pie-spinner">
|
|
7
6
|
<img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-spinner.svg">
|
|
8
7
|
</a>
|
|
9
8
|
</p>
|
|
10
9
|
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
1. [Introduction](#pie-spinner)
|
|
14
|
-
2. [Installation](#installation)
|
|
15
|
-
3. [Importing the component](#importing-the-component)
|
|
16
|
-
4. [Peer Dependencies](#peer-dependencies)
|
|
17
|
-
5. [Props](#props)
|
|
18
|
-
6. [Contributing](#contributing)
|
|
19
|
-
|
|
20
|
-
## pie-spinner
|
|
21
|
-
|
|
22
|
-
`pie-spinner` is a Web Component built using the Lit library.
|
|
10
|
+
`@justeattakeaway/pie-spinner` is a Web Component built using the Lit library. It offers a simple and accessible spinner component for web applications.
|
|
23
11
|
|
|
24
|
-
|
|
12
|
+
## Table of Contents
|
|
25
13
|
|
|
14
|
+
- [Installation](#installation)
|
|
15
|
+
- [Documentation](#documentation)
|
|
16
|
+
- [Properties](#properties)
|
|
17
|
+
- [Slots](#slots)
|
|
18
|
+
- [CSS Variables](#css-variables)
|
|
19
|
+
- [Events](#events)
|
|
20
|
+
- [Usage Examples](#usage-examples)
|
|
21
|
+
- [Questions and Support](#questions-and-support)
|
|
22
|
+
- [Contributing](#contributing)
|
|
26
23
|
|
|
27
24
|
## Installation
|
|
28
25
|
|
|
29
|
-
To install
|
|
26
|
+
> To install any of our web components in your application, we would suggest following the [getting started guide](https://webc.pie.design/?path=/docs/introduction-getting-started--docs) to set up your project.
|
|
30
27
|
|
|
31
|
-
|
|
32
|
-
npm i @justeattakeaway/pie-spinner
|
|
28
|
+
Ideally, you should install the component using the **`@justeattakeaway/pie-webc`** package, which includes all of the components. Or you can install the individual component package.
|
|
33
29
|
|
|
34
|
-
|
|
35
|
-
|
|
30
|
+
## Documentation
|
|
31
|
+
### Properties
|
|
32
|
+
| Prop | Options | Description | Default |
|
|
33
|
+
|----------|----------------------------------------------|--------------------------------------------------------------------------------------------------|-------------|
|
|
34
|
+
| `size` | `"xsmall"`, `"small"`, `"medium"`, `"large"`, `"xlarge"` | Size of the spinner. | `medium` |
|
|
35
|
+
| `variant`| `"brand"`, `"secondary"`, `"inverse"` | Variant of the spinner. | `brand` |
|
|
36
|
+
| `aria` | — | An object representing the ARIA attributes such as `label`. | `undefined` |
|
|
36
37
|
|
|
37
|
-
|
|
38
|
+
### Slots
|
|
39
|
+
This component does not have any slots. All content is controlled through properties.
|
|
38
40
|
|
|
41
|
+
### CSS Variables
|
|
42
|
+
This component does not expose any CSS variables for style overrides.
|
|
39
43
|
|
|
40
|
-
###
|
|
44
|
+
### Events
|
|
45
|
+
This component does not emit any custom events. In order to add event listening to this component, you can treat it like a native HTML element in your application.
|
|
41
46
|
|
|
42
|
-
|
|
43
|
-
```js
|
|
44
|
-
// Default – for Native JS Applications, Vue, Angular, Svelte, etc.
|
|
45
|
-
import { PieSpinner } from '@justeattakeaway/pie-spinner';
|
|
47
|
+
## Usage Examples
|
|
46
48
|
|
|
47
|
-
|
|
48
|
-
// import the module which registers the component as a custom element.
|
|
49
|
-
import '@justeattakeaway/pie-spinner';
|
|
50
|
-
```
|
|
49
|
+
**For HTML:**
|
|
51
50
|
|
|
52
|
-
#### React
|
|
53
51
|
```js
|
|
54
|
-
//
|
|
55
|
-
|
|
56
|
-
// which wraps the web component using @lit/react
|
|
57
|
-
import { PieSpinner } from '@justeattakeaway/pie-spinner/dist/react';
|
|
52
|
+
// import as module into a js file e.g. main.js
|
|
53
|
+
import '@justeattakeaway/pie-webc/components/spinner.js';
|
|
58
54
|
```
|
|
59
55
|
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
> include React as a [peer dependency](#peer-dependencies) in your project.
|
|
56
|
+
```html
|
|
57
|
+
<pie-spinner size="medium" variant="brand" aria="{ label: 'Loading' }"></pie-spinner>
|
|
63
58
|
|
|
59
|
+
<script type="module" src="/main.js"></script>
|
|
60
|
+
```
|
|
64
61
|
|
|
65
|
-
|
|
62
|
+
**For Native JS Applications, Vue, Angular, Svelte etc.:**
|
|
66
63
|
|
|
67
|
-
|
|
68
|
-
|
|
64
|
+
```js
|
|
65
|
+
// Vue templates (using Nuxt 3)
|
|
66
|
+
import '@justeattakeaway/pie-webc/components/spinner.js';
|
|
69
67
|
|
|
68
|
+
<pie-spinner size="medium" variant="brand" aria="{ label: 'Loading' }"></pie-spinner>
|
|
69
|
+
```
|
|
70
70
|
|
|
71
|
-
|
|
71
|
+
**For React Applications:**
|
|
72
72
|
|
|
73
|
-
|
|
74
|
-
|
|
75
|
-
| size | `String` | `medium` | Size of the spinner, one of `sizes` – `xsmall`, `small`, `medium`, `large`, `xlarge` |
|
|
76
|
-
| variant | `String` | `brand` | Variant of the spinner, one of `variants` – `brand`, `secondary`, `inverse` |
|
|
77
|
-
| aria | `Object` | `undefined` | An object representing the aria attributes such as label;
|
|
73
|
+
```jsx
|
|
74
|
+
import { PieSpinner } from '@justeattakeaway/pie-webc/react/spinner.js';
|
|
78
75
|
|
|
79
|
-
|
|
76
|
+
<PieSpinner size="medium" variant="brand" aria={{ label: 'Loading' }} />
|
|
77
|
+
```
|
|
80
78
|
|
|
81
|
-
|
|
82
|
-
<!-- Native HTML -->
|
|
83
|
-
<pie-spinner></pie-spinner>
|
|
79
|
+
## Questions and Support
|
|
84
80
|
|
|
85
|
-
|
|
86
|
-
<PieSpinner></PieSpinner>
|
|
87
|
-
```
|
|
81
|
+
If you work at Just Eat Takeaway.com, please contact us on **#help-designsystem**. Otherwise, please raise an issue on [Github](https://github.com/justeattakeaway/pie/issues).
|
|
88
82
|
|
|
89
83
|
## Contributing
|
|
90
84
|
|
package/custom-elements.json
CHANGED
package/dist/index.js
CHANGED
|
@@ -7,9 +7,9 @@ const a = class a extends m {
|
|
|
7
7
|
this.getAttribute("v") || this.setAttribute("v", a.v);
|
|
8
8
|
}
|
|
9
9
|
};
|
|
10
|
-
a.v = "1.2.
|
|
10
|
+
a.v = "1.2.3";
|
|
11
11
|
let v = a;
|
|
12
|
-
const x = "*,*:after,*:before{box-sizing:inherit}@keyframes rotate360{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.c-spinner{--spinner-size: 24px;--spinner-left-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), 1);--spinner-right-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), .35);block-size:var(--spinner-size);inline-size:var(--spinner-size);border-radius:var(--dt-radius-rounded-e);border-width:calc(var(--spinner-size) / 8);border-style:solid;border-color:var(--spinner-left-color) var(--spinner-right-color) var(--spinner-right-color) var(--spinner-left-color);will-change:transform;animation:rotate360 1.15s linear infinite;--spinner-base-color-h: var(--dt-color-content-brand-h);--spinner-base-color-s: var(--dt-color-content-brand-s);--spinner-base-color-l: var(--dt-color-content-brand-l)}.c-spinner.c-spinner--secondary{--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.c-spinner.c-spinner--inverse{--spinner-base-color-h: var(--dt-color-content-inverse-h);--spinner-base-color-s: var(--dt-color-content-inverse-s);--spinner-base-color-l: var(--dt-color-content-inverse-l)}.c-spinner.c-spinner--xsmall{--spinner-size: 16px}.c-spinner.c-spinner--small{--spinner-size: 20px}.c-spinner.c-spinner--large{--spinner-size: 32px}.c-spinner.c-spinner--xlarge{--spinner-size: 48px}.c-spinner-label{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}", w = ["xsmall", "small", "medium", "large", "xlarge"], S = ["brand", "secondary", "inverse"], o = {
|
|
12
|
+
const x = "*,*:after,*:before{box-sizing:inherit}:host{display:block}@keyframes rotate360{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.c-spinner{--spinner-size: 24px;--spinner-left-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), 1);--spinner-right-color: hsl(var(--spinner-base-color-h), var(--spinner-base-color-s), var(--spinner-base-color-l), .35);block-size:var(--spinner-size);inline-size:var(--spinner-size);border-radius:var(--dt-radius-rounded-e);border-width:calc(var(--spinner-size) / 8);border-style:solid;border-color:var(--spinner-left-color) var(--spinner-right-color) var(--spinner-right-color) var(--spinner-left-color);will-change:transform;animation:rotate360 1.15s linear infinite;--spinner-base-color-h: var(--dt-color-content-brand-h);--spinner-base-color-s: var(--dt-color-content-brand-s);--spinner-base-color-l: var(--dt-color-content-brand-l)}.c-spinner.c-spinner--secondary{--spinner-base-color-h: var(--dt-color-content-interactive-secondary-h);--spinner-base-color-s: var(--dt-color-content-interactive-secondary-s);--spinner-base-color-l: var(--dt-color-content-interactive-secondary-l)}.c-spinner.c-spinner--inverse{--spinner-base-color-h: var(--dt-color-content-inverse-h);--spinner-base-color-s: var(--dt-color-content-inverse-s);--spinner-base-color-l: var(--dt-color-content-inverse-l)}.c-spinner.c-spinner--xsmall{--spinner-size: 16px}.c-spinner.c-spinner--small{--spinner-size: 20px}.c-spinner.c-spinner--large{--spinner-size: 32px}.c-spinner.c-spinner--xlarge{--spinner-size: 48px}.c-spinner-label{position:absolute;display:block;height:1px;width:1px;overflow:hidden;padding:1px;white-space:nowrap}", w = ["xsmall", "small", "medium", "large", "xlarge"], S = ["brand", "secondary", "inverse"], o = {
|
|
13
13
|
size: "medium",
|
|
14
14
|
variant: "brand"
|
|
15
15
|
};
|
package/package.json
CHANGED
package/src/spinner.scss
CHANGED