@justeattakeaway/pie-divider 1.4.0 → 1.4.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 +67 -17
- package/dist/index.js +1 -1
- package/package.json +2 -2
package/README.md
CHANGED
|
@@ -1,37 +1,87 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
</p>
|
|
1
|
+
# @justeattakeaway/pie-divider
|
|
2
|
+
[Source Code](https://github.com/justeattakeaway/pie/tree/main/packages/components/pie-divider) | [Design Documentation](https://pie.design/components/divider) | [NPM](https://www.npmjs.com/package/@justeattakeaway/pie-divider)
|
|
4
3
|
|
|
5
|
-
<p
|
|
6
|
-
<a href="https://www.npmjs.com/@justeattakeaway/pie-divider">
|
|
7
|
-
<img alt="
|
|
4
|
+
<p>
|
|
5
|
+
<a href="https://www.npmjs.com/package/@justeattakeaway/pie-divider">
|
|
6
|
+
<img alt="npm version" src="https://img.shields.io/npm/v/@justeattakeaway/pie-divider.svg">
|
|
8
7
|
</a>
|
|
9
8
|
</p>
|
|
10
9
|
|
|
11
|
-
|
|
10
|
+
`@justeattakeaway/pie-divider` is a Web Component built using the Lit library. It offers a customizable divider element for visual separation of content.
|
|
12
11
|
|
|
13
|
-
|
|
12
|
+
## Table of Contents
|
|
14
13
|
|
|
15
|
-
|
|
14
|
+
- [Installation](#installation)
|
|
15
|
+
- [Documentation](#documentation)
|
|
16
|
+
- [Properties](#properties)
|
|
17
|
+
- [Usage Examples](#usage-examples)
|
|
18
|
+
- [Questions and Support](#questions-and-support)
|
|
19
|
+
- [Contributing](#contributing)
|
|
16
20
|
|
|
21
|
+
## Installation
|
|
17
22
|
|
|
18
23
|
## Installation
|
|
19
24
|
|
|
20
|
-
To install
|
|
25
|
+
> 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.
|
|
26
|
+
|
|
27
|
+
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.
|
|
28
|
+
|
|
29
|
+
## Documentation
|
|
30
|
+
|
|
31
|
+
### Properties
|
|
32
|
+
|
|
33
|
+
| Prop | Type | Description | Default |
|
|
34
|
+
|--------------|---------------------------------------|-------------------------------------------------------------------------------------------------|----------------|
|
|
35
|
+
| `variant` | `"default"`, `"inverse"` | Sets the variant of the divider. | `"default"` |
|
|
36
|
+
| `label` | `string` | The label text for the divider. Label is only available for the horizontal variant. | `""` |
|
|
37
|
+
| `orientation`| `"horizontal"`, `"vertical"` | Sets the orientation of the divider. | `"horizontal"` |
|
|
38
|
+
|
|
39
|
+
### Slots
|
|
40
|
+
|
|
41
|
+
This component does not expose any slots.
|
|
42
|
+
|
|
43
|
+
### CSS Variables
|
|
44
|
+
|
|
45
|
+
This component does not expose any CSS variables for style overrides.
|
|
46
|
+
|
|
47
|
+
### Events
|
|
21
48
|
|
|
22
|
-
|
|
23
|
-
npm i @justeattakeaway/pie-divider
|
|
49
|
+
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.
|
|
24
50
|
|
|
25
|
-
|
|
51
|
+
## Usage Examples
|
|
52
|
+
|
|
53
|
+
**For HTML:**
|
|
54
|
+
|
|
55
|
+
```js
|
|
56
|
+
// import as module into a js file e.g. main.js
|
|
57
|
+
import '@justeattakeaway/pie-webc/components/divider.js';
|
|
26
58
|
```
|
|
27
59
|
|
|
28
|
-
|
|
60
|
+
```html
|
|
61
|
+
<pie-divider orientation="horizontal" label="OR"></pie-divider>
|
|
62
|
+
<script type="module" src="/main.js"></script>
|
|
63
|
+
```
|
|
64
|
+
|
|
65
|
+
**For Native JS Applications, Vue, Angular, Svelte etc.:**
|
|
66
|
+
|
|
67
|
+
```js
|
|
68
|
+
// Vue templates (using Nuxt 3)
|
|
69
|
+
import '@justeattakeaway/pie-webc/components/divider.js';
|
|
29
70
|
|
|
30
|
-
|
|
71
|
+
<pie-divider orientation="horizontal" label="OR"></pie-divider>
|
|
72
|
+
```
|
|
73
|
+
|
|
74
|
+
**For React Applications:**
|
|
75
|
+
|
|
76
|
+
```jsx
|
|
77
|
+
import { PieDivider } from '@justeattakeaway/pie-webc/react/divider.js';
|
|
78
|
+
|
|
79
|
+
<PieDivider orientation="horizontal" label="OR" />
|
|
80
|
+
```
|
|
31
81
|
|
|
32
|
-
## Questions
|
|
82
|
+
## Questions and Support
|
|
33
83
|
|
|
34
|
-
|
|
84
|
+
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).
|
|
35
85
|
|
|
36
86
|
## Contributing
|
|
37
87
|
|
package/dist/index.js
CHANGED
|
@@ -7,7 +7,7 @@ const v = class v extends u {
|
|
|
7
7
|
this.getAttribute("v") || this.setAttribute("v", v.v);
|
|
8
8
|
}
|
|
9
9
|
};
|
|
10
|
-
v.v = "1.4.
|
|
10
|
+
v.v = "1.4.2";
|
|
11
11
|
let p = v;
|
|
12
12
|
const x = "*,*:after,*:before{box-sizing:inherit}.c-divider{--divider-bg-color: var(--dt-color-divider-default);--divider-width: 100%;--divider-min-width: 16px;--divider-height: 1px;--divider-label-max-width: 90%;--divider-font-size: calc(var(--dt-font-body-l-size) * 1px);--divider-line-height: calc(var(--dt-font-body-l-line-height) * 1px);width:var(--divider-width)}.c-divider,.c-divider hr{margin:0;border:0;background-color:var(--divider-bg-color)}.c-divider:not(.c-divider--labelled){height:var(--divider-height)}.c-divider.c-divider--labelled{display:flex;align-items:center;text-align:center;gap:var(--dt-spacing-b);background-color:transparent;color:var(--dt-color-content-subdued)}.c-divider.c-divider--labelled .c-divider-label{font-size:var(--divider-font-size);line-height:var(--divider-line-height);max-width:var(--divider-label-max-width);word-wrap:break-word}.c-divider.c-divider--labelled hr{flex-grow:1;height:var(--divider-height);min-width:var(--divider-min-width)}.c-divider.c-divider--labelled.c-divider--inverse{color:var(--dt-color-content-inverse)}.c-divider.c-divider--inverse{--divider-bg-color: var(--dt-color-divider-inverse)}.c-divider.c-divider--vertical{--divider-width: 1px;--divider-height: 100%}", y = ["default", "inverse"], $ = ["horizontal", "vertical"], l = {
|
|
13
13
|
variant: "default",
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@justeattakeaway/pie-divider",
|
|
3
3
|
"description": "PIE Design System Divider built using Web Components",
|
|
4
|
-
"version": "1.4.
|
|
4
|
+
"version": "1.4.2",
|
|
5
5
|
"repository": {
|
|
6
6
|
"type": "git",
|
|
7
7
|
"url": "https://github.com/justeattakeaway/pie",
|
|
@@ -46,7 +46,7 @@
|
|
|
46
46
|
"cem-plugin-module-file-extensions": "0.0.5"
|
|
47
47
|
},
|
|
48
48
|
"dependencies": {
|
|
49
|
-
"@justeattakeaway/pie-webc-core": "0.
|
|
49
|
+
"@justeattakeaway/pie-webc-core": "1.0.0"
|
|
50
50
|
},
|
|
51
51
|
"volta": {
|
|
52
52
|
"extends": "../../../package.json"
|