@justeattakeaway/pie-tag 0.4.0 → 0.5.0

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 (5) hide show
  1. package/README.md +5 -80
  2. package/dist/index.js +1 -1
  3. package/package.json +4 -4
  4. package/src/react.ts +2 -3
  5. package/src/tag.scss +4 -4
package/README.md CHANGED
@@ -8,18 +8,9 @@
8
8
  </a>
9
9
  </p>
10
10
 
11
- # Table of Contents
12
-
13
- 1. [Introduction](#pie-tag)
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
11
  ## pie-tag
21
12
 
22
- `pie-tag` is a Web Component built using the Lit library. A tag is a small visual element used to represent and categorize information within a user interface. 
13
+ `pie-tag` is a Web Component built using the Lit library.
23
14
 
24
15
  This component can be easily integrated into various frontend frameworks and customized through a set of properties.
25
16
 
@@ -36,79 +27,13 @@ $ npm i @justeattakeaway/pie-tag
36
27
  $ yarn add @justeattakeaway/pie-tag
37
28
  ```
38
29
 
39
- For full information on using PIE components as part of an application, check out the [Getting Started Guide](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components).
40
-
41
-
42
- ### Importing the component
43
-
44
- #### JavaScript
45
- ```js
46
- // Default – for Native JS Applications, Vue, Angular, Svelte, etc.
47
- import { PieTag } from '@justeattakeaway/pie-tag';
48
-
49
- // If you don't need to reference the imported object, you can simply
50
- // import the module which registers the component as a custom element.
51
- import '@justeattakeaway/pie-tag';
52
- ```
53
-
54
- #### React
55
- ```js
56
- // React
57
- // For React, you will need to import our React-specific component build
58
- // which wraps the web component using ​@lit/react
59
- import { PieTag } from '@justeattakeaway/pie-tag/dist/react';
60
- ```
61
-
62
- > [!NOTE]
63
- > When using the React version of the component, please make sure to also
64
- > include React as a [peer dependency](#peer-dependencies) in your project.
65
-
66
-
67
- ## Peer Dependencies
30
+ ## Documentation
68
31
 
69
- > [!IMPORTANT]
70
- > When using `pie-tag`, you will also need to include a couple of dependencies to ensure the component renders as expected. See [the PIE Wiki](https://github.com/justeattakeaway/pie/wiki/Getting-started-with-PIE-Web-Components#expected-dependencies) for more information and how to include these in your application.
32
+ Visit [Link | PIE Design System](https://pie.design/components/tag/overview) to view more information on this component.
71
33
 
34
+ ## Questions
72
35
 
73
- ## Props
74
-
75
- | Property | Type | Default | Description |
76
- |---|---|---|---|
77
- | size | `String` | `large` | Size of the tag. Can be either `large` or `small` |
78
- | variant | `String` | `neutral` | Variant of the tag, one of `variants` - `neutral-alternative`, `neutral`, `outline`, `ghost`, `blue`, `green`, `yellow`, `red`, `brand` |
79
- | isStrong | `Boolean` | `false` | If `true`, displays strong tag styles for `green`, `yellow`, `red`, `blue` and `neutral` variants'|
80
-
81
- Since the component is not interactive it doesn't have a disabled property. To give the Tag a disabled look please use `--tag-opacity` css variable. Recommended opacity level for disabled tag is 0.5.
82
-
83
- In your markup or JSX, you can then use these to set the properties for the `pie-tag` component:
84
-
85
- ```html
86
- <!-- Native HTML -->
87
- <pie-tag>Label</pie-tag>
88
-
89
- <!-- JSX -->
90
- <PieTag>Label</PieTag>
91
- ```
92
- ## Slots
93
-
94
- | Slot | Description |
95
- | Default slot | Used to pass text into the tag component. |
96
- | icon | Used to pass in an icon to the tag component. We recommend using `pie-icons-webc` for defining this icon, but this can also accept an SVG icon. |
97
-
98
- ### Using `pie-icons-webc` with `pie-tag` icon slot
99
-
100
- We recommend using `pie-icons-webc` when using the `icon` slot. Here is an example of how you would do this:
101
-
102
- ```html
103
- <!--
104
- Note that pie-tag and the icon that you want to use will need to be imported as components into your application.
105
- See the `pie-icons-webc` README for more info on importing these icons.
106
- -->
107
- <pie-tag>
108
- <icon-vegan slot="icon"></icon-vegan>
109
- Vegan
110
- </pie-tag>
111
- ```
36
+ Please head to [FAQs | PIE Design System](https://pie.design/support/contact-us/) to see our FAQs and get in touch.
112
37
 
113
38
  ## Contributing
114
39
 
package/dist/index.js CHANGED
@@ -1,7 +1,7 @@
1
1
  import { unsafeCSS as p, LitElement as u, html as s, nothing as h } from "lit";
2
2
  import { property as l } from "lit/decorators.js";
3
3
  import { validPropertyValues as v, defineCustomElement as b } from "@justeattakeaway/pie-webc-core";
4
- const f = `.c-tag{--tag-bg-color: var(--dt-color-container-inverse);--tag-color: var(--dt-color-content-inverse);--tag-padding: 2px var(--dt-spacing-b);--tag-height: 24px;--tag-border-radius: var(--dt-radius-rounded-b);--tag-font-family: var(--dt-font-body-s-family);--tag-font-weight: var(--dt-font-body-s-weight);--tag-font-size: calc(var(--dt-font-body-s-size) * 1px);--tag-line-height: calc(var(--dt-font-body-s-line-height) * 1px);--tag-transparent-bg-color: transparent;--tag-height-large: 24px;--tag-height-small: 16px;--icon-display-override: block;--icon-size-override: 16px;display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;gap:var(--dt-spacing-a);height:var(--tag-height);padding:var(--tag-padding);border:none;border-radius:var(--tag-border-radius);background-color:var(--tag-bg-color);color:var(--tag-color);font-family:var(--tag-font-family);font-weight:var(--tag-font-weight);font-size:var(--tag-font-size);line-height:var(--tag-line-height);opacity:var(--tag-opacity, 1)}.c-tag[size=small]{--tag-height: var(--tag-height-small);--tag-padding: 0 var(--dt-spacing-a);--tag-border-radius: var(--dt-radius-rounded-a);--tag-font-size: calc(var(--dt-font-caption-size) * 1px);--tag-line-height: calc(var(--dt-font-caption-line-height) * 1px)}.c-tag[size=large]{--tag-height: var(--tag-height-large);--tag-padding: 2px var(--dt-spacing-b);--tag-border-radius: var(--dt-radius-rounded-b);--tag-font-size: calc(var(--dt-font-body-s-size) * 1px);--tag-line-height: calc(var(--dt-font-body-s-line-height) * 1px)}.c-tag[variant=neutral]{--tag-bg-color: var(--dt-color-container-strong);--tag-color: var(--dt-color-content-default)}.c-tag[variant=neutral][isStrong]{--tag-bg-color: var(--dt-color-container-inverse);--tag-color: var(--dt-color-content-inverse)}.c-tag[variant=blue]{--tag-bg-color: var(--dt-color-support-info-02);--tag-color: var(--dt-color-content-default)}.c-tag[variant=blue][isStrong]{--tag-bg-color: var(--dt-color-support-info);--tag-color: var(--dt-color-content-light)}.c-tag[variant=green]{--tag-bg-color: var(--dt-color-support-positive-02);--tag-color: var(--dt-color-content-default)}.c-tag[variant=green][isStrong]{--tag-bg-color: var(--dt-color-support-positive);--tag-color: var(--dt-color-content-light)}.c-tag[variant=yellow]{--tag-bg-color: var(--dt-color-support-warning-02);--tag-color: var(--dt-color-content-dark)}.c-tag[variant=yellow][isStrong]{--tag-bg-color: var(--dt-color-support-warning);--tag-color: var(--dt-color-content-dark)}.c-tag[variant=red]{--tag-bg-color: var(--dt-color-support-error-02);--tag-color: var(--dt-color-content-default)}.c-tag[variant=red][isStrong]{--tag-bg-color: var(--dt-color-support-error);--tag-color: var(--dt-color-content-light)}.c-tag[variant=brand]{--tag-bg-color: var(--dt-color-support-brand-02);--tag-color: var(--dt-color-content-default)}.c-tag[variant=neutral-alternative]{--tag-bg-color: var(--dt-color-container-default);--tag-color: var(--dt-color-content-default)}.c-tag[variant=outline]{--tag-bg-color: var(--tag-transparent-bg-color);--tag-color: var(--dt-color-content-default);border:1px solid var(--dt-color-border-strong)}.c-tag[variant=outline][size=small]{--tag-padding: 0 3px}.c-tag[variant=outline][size=large]{--tag-padding: 1px 7px}.c-tag[variant=ghost]{--tag-bg-color: var(--tag-transparent-bg-color);--tag-color: var(--dt-color-content-default)}::slotted(svg){display:block;height:var(--icon-size-override);width:var(--icon-size-override)}
4
+ const f = `.c-tag{--tag-bg-color: var(--dt-color-container-inverse);--tag-color: var(--dt-color-content-inverse);--tag-padding: 2px var(--dt-spacing-b);--tag-height: 24px;--tag-border-radius: var(--dt-radius-rounded-b);--tag-font-family: var(--dt-font-body-s-family);--tag-font-weight: var(--dt-font-body-s-weight);--tag-font-size: calc(var(--dt-font-body-s-size) * 1px);--tag-line-height: calc(var(--dt-font-body-s-line-height) * 1px);--tag-transparent-bg-color: transparent;--tag-height-large: 24px;--tag-height-small: 16px;--icon-display-override: block;--icon-size-override: 16px;display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;gap:var(--dt-spacing-a);height:var(--tag-height);padding:var(--tag-padding);border:none;border-radius:var(--tag-border-radius);background-color:var(--tag-bg-color);color:var(--tag-color);font-family:var(--tag-font-family);font-weight:var(--tag-font-weight);font-size:var(--tag-font-size);line-height:var(--tag-line-height);opacity:var(--tag-opacity, 1)}.c-tag[size=small]{--tag-height: var(--tag-height-small);--tag-padding: 0 var(--dt-spacing-a);--tag-border-radius: var(--dt-radius-rounded-a);--tag-font-size: calc(var(--dt-font-caption-size) * 1px);--tag-line-height: calc(var(--dt-font-caption-line-height) * 1px)}.c-tag[size=large]{--tag-height: var(--tag-height-large);--tag-padding: 2px var(--dt-spacing-b);--tag-border-radius: var(--dt-radius-rounded-b);--tag-font-size: calc(var(--dt-font-body-s-size) * 1px);--tag-line-height: calc(var(--dt-font-body-s-line-height) * 1px)}.c-tag[variant=neutral]{--tag-bg-color: var(--dt-color-container-strong);--tag-color: var(--dt-color-content-default)}.c-tag[variant=neutral][isStrong]{--tag-bg-color: var(--dt-color-container-inverse);--tag-color: var(--dt-color-content-inverse)}.c-tag[variant=blue]{--tag-bg-color: var(--dt-color-support-info-02);--tag-color: var(--dt-color-content-default)}.c-tag[variant=blue][isStrong]{--tag-bg-color: var(--dt-color-support-info);--tag-color: var(--dt-color-content-inverse)}.c-tag[variant=green]{--tag-bg-color: var(--dt-color-support-positive-02);--tag-color: var(--dt-color-content-default)}.c-tag[variant=green][isStrong]{--tag-bg-color: var(--dt-color-support-positive);--tag-color: var(--dt-color-content-inverse)}.c-tag[variant=yellow]{--tag-bg-color: var(--dt-color-support-warning-02);--tag-color: var(--dt-color-content-default)}.c-tag[variant=yellow][isStrong]{--tag-bg-color: var(--dt-color-support-warning);--tag-color: var(--dt-color-content-dark)}.c-tag[variant=red]{--tag-bg-color: var(--dt-color-support-error-02);--tag-color: var(--dt-color-content-default)}.c-tag[variant=red][isStrong]{--tag-bg-color: var(--dt-color-support-error);--tag-color: var(--dt-color-content-inverse)}.c-tag[variant=brand]{--tag-bg-color: var(--dt-color-support-brand-02);--tag-color: var(--dt-color-content-default)}.c-tag[variant=neutral-alternative]{--tag-bg-color: var(--dt-color-container-default);--tag-color: var(--dt-color-content-default)}.c-tag[variant=outline]{--tag-bg-color: var(--tag-transparent-bg-color);--tag-color: var(--dt-color-content-default);border:1px solid var(--dt-color-border-strong)}.c-tag[variant=outline][size=small]{--tag-padding: 0 3px}.c-tag[variant=outline][size=large]{--tag-padding: 1px 7px}.c-tag[variant=ghost]{--tag-bg-color: var(--tag-transparent-bg-color);--tag-color: var(--dt-color-content-default)}::slotted(svg){display:block;height:var(--icon-size-override);width:var(--icon-size-override)}
5
5
  `, y = ["neutral-alternative", "neutral", "outline", "ghost", "blue", "green", "yellow", "red", "brand"], m = ["small", "large"];
6
6
  var z = Object.defineProperty, x = Object.getOwnPropertyDescriptor, c = (n, a, r, o) => {
7
7
  for (var t = o > 1 ? void 0 : o ? x(a, r) : a, g = n.length - 1, i; g >= 0; g--)
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@justeattakeaway/pie-tag",
3
3
  "description": "PIE Design System Tag built using Web Components",
4
- "version": "0.4.0",
4
+ "version": "0.5.0",
5
5
  "type": "module",
6
6
  "main": "dist/index.js",
7
7
  "module": "dist/index.js",
@@ -32,12 +32,12 @@
32
32
  "license": "Apache-2.0",
33
33
  "devDependencies": {
34
34
  "@custom-elements-manifest/analyzer": "0.9.0",
35
- "@justeattakeaway/pie-components-config": "0.9.0",
36
- "@justeattakeaway/pie-wrapper-react": "0.13.0",
35
+ "@justeattakeaway/pie-components-config": "0.10.0",
36
+ "@justeattakeaway/pie-wrapper-react": "0.14.0",
37
37
  "cem-plugin-module-file-extensions": "0.0.5"
38
38
  },
39
39
  "dependencies": {
40
- "@justeattakeaway/pie-webc-core": "0.17.0"
40
+ "@justeattakeaway/pie-webc-core": "0.17.1"
41
41
  },
42
42
  "volta": {
43
43
  "extends": "../../../package.json"
package/src/react.ts CHANGED
@@ -15,6 +15,5 @@ const PieTagReact = createComponent({
15
15
 
16
16
  type ReactBaseType = React.HTMLAttributes<HTMLSpanElement>
17
17
 
18
-
19
-
20
- export const PieTag = PieTagReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<TagProps> & React.RefAttributes<PieTagLit> & ReactBaseType>;
18
+ export const PieTag = PieTagReact as React.ForwardRefExoticComponent<React.PropsWithoutRef<TagProps>
19
+ & React.RefAttributes<PieTagLit> & ReactBaseType>;
package/src/tag.scss CHANGED
@@ -75,7 +75,7 @@
75
75
 
76
76
  &[isStrong] {
77
77
  --tag-bg-color: var(--dt-color-support-info);
78
- --tag-color: var(--dt-color-content-light);
78
+ --tag-color: var(--dt-color-content-inverse);
79
79
  }
80
80
  }
81
81
 
@@ -85,13 +85,13 @@
85
85
 
86
86
  &[isStrong] {
87
87
  --tag-bg-color: var(--dt-color-support-positive);
88
- --tag-color: var(--dt-color-content-light);
88
+ --tag-color: var(--dt-color-content-inverse);
89
89
  }
90
90
  }
91
91
 
92
92
  &[variant='yellow'] {
93
93
  --tag-bg-color: var(--dt-color-support-warning-02);
94
- --tag-color: var(--dt-color-content-dark);
94
+ --tag-color: var(--dt-color-content-default);
95
95
 
96
96
  &[isStrong] {
97
97
  --tag-bg-color: var(--dt-color-support-warning);
@@ -105,7 +105,7 @@
105
105
 
106
106
  &[isStrong] {
107
107
  --tag-bg-color: var(--dt-color-support-error);
108
- --tag-color: var(--dt-color-content-light);
108
+ --tag-color: var(--dt-color-content-inverse);
109
109
  }
110
110
  }
111
111