@justeattakeaway/pie-divider 1.4.0 → 1.4.1

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/README.md +71 -17
  2. package/custom-elements.json +1 -1
  3. package/dist/index.js +1 -1
  4. package/package.json +2 -2
package/README.md CHANGED
@@ -1,37 +1,91 @@
1
- <p align="center">
2
- <img align="center" src="../../../readme_image.png" height="200" alt="">
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 align="center">
6
- <a href="https://www.npmjs.com/@justeattakeaway/pie-divider">
7
- <img alt="GitHub Workflow Status" src="https://img.shields.io/npm/v/@justeattakeaway/pie-divider.svg">
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
- ## pie-divider
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
- `pie-divider` is a Web Component built using the Lit library.
12
+ ## Table of Contents
14
13
 
15
- This component can be easily integrated into various frontend frameworks and customized through a set of properties.
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 `pie-divider` in your application, run the following on your command line:
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
- ```bash
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
- yarn add @justeattakeaway/pie-divider
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
- ## Documentation
60
+ ```html
61
+ <html>
62
+ <body>
63
+ <pie-divider orientation="horizontal" label="OR"></pie-divider>
64
+ <script type="module" src="/main.js"></script>
65
+ </body>
66
+ </html>
67
+ ```
68
+
69
+ **For Native JS Applications, Vue, Angular, Svelte etc.:**
70
+
71
+ ```js
72
+ // Vue templates (using Nuxt 3)
73
+ import '@justeattakeaway/pie-webc/components/divider.js';
29
74
 
30
- Visit [Divider | PIE Design System](https://pie.design/components/divider) to view more information on this component.
75
+ <pie-divider orientation="horizontal" label="OR"></pie-divider>
76
+ ```
77
+
78
+ **For React Applications:**
79
+
80
+ ```jsx
81
+ import { PieDivider } from '@justeattakeaway/pie-webc/react/divider.js';
82
+
83
+ <PieDivider orientation="horizontal" label="OR" />
84
+ ```
31
85
 
32
- ## Questions
86
+ ## Questions and Support
33
87
 
34
- Please head to [FAQs | PIE Design System](https://pie.design/support/contact-us/) to see our FAQs and get in touch.
88
+ 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
89
 
36
90
  ## Contributing
37
91
 
package/custom-elements.json CHANGED
@@ -34,7 +34,7 @@
34
34
  "type": {
35
35
  "text": "DefaultProps"
36
36
  },
37
- "default": "{\n variant: 'default',\n orientation: 'horizontal',\n label: '',\n}"
37
+ "default": "{\r\n variant: 'default',\r\n orientation: 'horizontal',\r\n label: '',\r\n}"
38
38
  }
39
39
  ],
40
40
  "exports": [
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.0";
10
+ v.v = "1.4.1";
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.0",
4
+ "version": "1.4.1",
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.26.0"
49
+ "@justeattakeaway/pie-webc-core": "1.0.0"
50
50
  },
51
51
  "volta": {
52
52
  "extends": "../../../package.json"