@justeattakeaway/pie-tag 0.22.17 → 0.22.19

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 (7) hide show
  1. package/README.md +1 -1
  2. package/dist/index.d.ts +0 -0
  3. package/dist/index.js +1 -1
  4. package/dist/react.d.ts +0 -0
  5. package/dist/react.js +0 -0
  6. package/package.json +6 -8
  7. package/src/react.ts +0 -0
package/README.md CHANGED
@@ -35,7 +35,7 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
35
35
  | Prop | Options | Description | Default |
36
36
  |-------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------|
37
37
  | `size` | `"small"`, `"large"` | Sets the size of the tag. | `"large"` |
38
- | `variant` | `"neutral"`, `"neutral-alternative"`, `"outline"`, `"ghost"`, `"information"`, `"success"`, `"error"`, `"brand-02"`, `"brand-03"`, `"brand-04"`, `"brand-05"`, `"brand-06"` | Sets the variant of the tag. | `"neutral"` |
38
+ | `variant` | `"neutral"`, `"neutral-alternative"`, `"outline"`, `"ghost"`, `"translucent"`, `"information"`, `"success"`, `"error"`, `"warning"`, `"brand-02"`, `"brand-03"`, `"brand-04"`, `"brand-05"`, `"brand-06"`, `"brand-08"` | Sets the variant of the tag. | `"neutral"` |
39
39
  | `isStrong` | `true`, `false` | If true, displays strong tag styles for `"neutral"`, `"information"`, `"success"`, `"error"`, `"warning"`, `"brand-03"`, `"brand-04"`, `"brand-05"`, `"brand-06"`, and `"brand-08"` variants. Has no effect for other variants. | `false` |
40
40
  | `isDimmed` | `true`, `false` | When true, applies a dimmed styling to the tag. | `false` |
41
41
  | `isIconOnly` | `true`, `false` | Required to correctly render the tag when it contains only an icon. Icon only is only supported by design for the large size. Small icons will be rendered as large when they're icon only. | `false` |
package/dist/index.d.ts CHANGED
File without changes
package/dist/index.js CHANGED
@@ -7,7 +7,7 @@ const s = class s extends u {
7
7
  this.getAttribute("v") || this.setAttribute("v", s.v);
8
8
  }
9
9
  };
10
- s.v = "0.22.17";
10
+ s.v = "0.22.19";
11
11
  let v = s;
12
12
  const w = '*,*:after,*:before{box-sizing:inherit}:host{display:inline-block}.c-tag{--tag-bg-color: var(--dt-color-container-strong);--tag-icon-bg-color: var(--dt-color-container-inverse);--tag-icon-color: var(--dt-color-content-inverse);--tag-color: var(--dt-color-content-default);--tag-transparent-bg-color: transparent;--tag-border-width: 1px;--tag-border-color: var(--tag-bg-color);border:var(--tag-border-width) solid var(--tag-border-color);border-radius:var(--tag-border-radius);width:100%;font-family:var(--tag-font-family);font-weight:var(--tag-font-weight);font-size:var(--tag-font-size);line-height:var(--tag-line-height);color:var(--tag-color);display:flex;align-items:center;justify-content:center;background-color:var(--tag-bg-color);padding-inline-start:var(--tag-padding-inline-start);padding-inline-end:var(--tag-padding-inline-end);padding-block-start:var(--tag-padding-block-start);padding-block-end:var(--tag-padding-block-end)}.c-tag slot[name=icon]{color:var(--tag-icon-color)}.c-tag slot[name=icon]::slotted(svg){display:block;height:var(--icon-size-override);width:var(--icon-size-override)}.c-tag slot:not([name=icon]){display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.c-tag.c-tag--large{--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-border-radius: var(--dt-radius-rounded-e);--icon-size-override: 16px;--tag-padding-block-start: calc(var(--dt-spacing-a-small) - var(--tag-border-width));--tag-padding-block-end: calc(var(--dt-spacing-a-small) - var(--tag-border-width));--tag-padding-inline-start: calc(var(--dt-spacing-b) - var(--tag-border-width));--tag-padding-inline-end: calc(var(--dt-spacing-b) - var(--tag-border-width));--tag-gap: var(--dt-spacing-a)}.c-tag.c-tag--small{--tag-font-family: var(--dt-font-caption-family);--tag-font-weight: var(--dt-font-caption-weight);--tag-font-size: calc(var(--dt-font-caption-size) * 1px);--tag-line-height: calc(var(--dt-font-caption-line-height) * 1px);--tag-border-radius: var(--dt-radius-rounded-c);--icon-size-override: 12px;--tag-padding-block-start: 0;--tag-padding-block-end: 0;--tag-padding-inline-start: calc(var(--dt-spacing-a) - var(--tag-border-width));--tag-padding-inline-end: calc(var(--dt-spacing-a) - var(--tag-border-width));--tag-gap: var(--dt-spacing-a-small)}.c-tag.c-tag--icon-only.c-tag--large,.c-tag.c-tag--icon-only.c-tag--small{--tag-padding-block-start: calc(var(--dt-spacing-a) - var(--tag-border-width));--tag-padding-block-end: calc(var(--dt-spacing-a) - var(--tag-border-width))}.c-tag.c-tag--icon-only.c-tag--small{--tag-border-radius: var(--dt-radius-rounded-e);--icon-size-override: 16px;--tag-padding-inline-start: calc(var(--dt-spacing-b) - var(--tag-border-width));--tag-padding-inline-end: calc(var(--dt-spacing-b) - var(--tag-border-width));--tag-gap: var(--dt-spacing-a)}.c-tag.c-tag--has-icon:not(.c-tag--icon-only){--tag-padding-inline-start: 0;--tag-padding-block-start: 0;--tag-padding-block-end: 0;gap:var(--tag-gap)}.c-tag.c-tag--has-icon:not(.c-tag--icon-only).c-tag--large{--tag-padding-inline-end: calc(var(--dt-spacing-b) - var(--tag-border-width));--tag-icon-container-size: 22px}.c-tag.c-tag--has-icon:not(.c-tag--icon-only).c-tag--small{--tag-padding-inline-end: calc(var(--dt-spacing-a) - var(--tag-border-width));--tag-icon-container-size: 16px}.c-tag.c-tag--has-icon:not(.c-tag--icon-only) slot[name=icon]{background-color:var(--tag-icon-bg-color);display:grid;place-items:center;border-radius:inherit;height:var(--tag-icon-container-size);aspect-ratio:1/1}.c-tag.is-dimmed{opacity:.5}.c-tag.c-tag--neutral.c-tag--icon-only{--tag-bg-color: var(--dt-color-container-strong);--tag-icon-color: var(--dt-color-content-default)}.c-tag.c-tag--neutral.c-tag--icon-only.c-tag--strong{--tag-bg-color: var(--dt-color-container-inverse);--tag-icon-color: var(--dt-color-content-inverse)}.c-tag.c-tag--neutral.c-tag--strong:not(.c-tag--icon-only){--tag-bg-color: var(--dt-color-container-inverse);--tag-icon-bg-color: var(--dt-color-container-strong);--tag-icon-color: var(--dt-color-content-default);--tag-color: var(--dt-color-content-inverse)}.c-tag.c-tag--neutral-alternative{--tag-bg-color: var(--dt-color-container-default);--tag-icon-bg-color: var(--dt-color-container-strong);--tag-icon-color: var(--dt-color-content-default);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--neutral-alternative.c-tag--icon-only{--tag-bg-color: var(--dt-color-container-default);--tag-icon-color: var(--dt-color-content-default)}.c-tag.c-tag--information{--tag-bg-color: var(--dt-color-support-info-02);--tag-icon-bg-color: var(--dt-color-support-info);--tag-icon-color: var(--dt-color-content-inverse);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--information.c-tag--icon-only{--tag-bg-color: var(--dt-color-support-info-02);--tag-icon-color: var(--dt-color-content-default)}.c-tag.c-tag--information.c-tag--icon-only.c-tag--strong{--tag-bg-color: var(--dt-color-support-info);--tag-icon-color: var(--dt-color-content-inverse)}.c-tag.c-tag--information.c-tag--strong:not(.c-tag--icon-only){--tag-bg-color: var(--dt-color-support-info);--tag-icon-bg-color: var(--dt-color-support-info-02);--tag-icon-color: var(--dt-color-content-default);--tag-color: var(--dt-color-content-inverse)}.c-tag.c-tag--success{--tag-bg-color: var(--dt-color-support-positive-02);--tag-icon-bg-color: var(--dt-color-support-positive);--tag-icon-color: var(--dt-color-content-inverse);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--success.c-tag--icon-only{--tag-bg-color: var(--dt-color-support-positive-02);--tag-icon-color: var(--dt-color-content-default)}.c-tag.c-tag--success.c-tag--icon-only.c-tag--strong{--tag-bg-color: var(--dt-color-support-positive);--tag-icon-color: var(--dt-color-content-inverse)}.c-tag.c-tag--success.c-tag--strong:not(.c-tag--icon-only){--tag-bg-color: var(--dt-color-support-positive);--tag-icon-bg-color: var(--dt-color-support-positive-02);--tag-icon-color: var(--dt-color-content-default);--tag-color: var(--dt-color-content-inverse)}.c-tag.c-tag--error{--tag-bg-color: var(--dt-color-support-error-02);--tag-icon-bg-color: var(--dt-color-support-error);--tag-icon-color: var(--dt-color-content-inverse);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--error.c-tag--icon-only{--tag-bg-color: var(--dt-color-support-error-02);--tag-icon-color: var(--dt-color-content-default)}.c-tag.c-tag--error.c-tag--icon-only.c-tag--strong{--tag-bg-color: var(--dt-color-support-error);--tag-icon-color: var(--dt-color-content-light)}.c-tag.c-tag--error.c-tag--strong:not(.c-tag--icon-only){--tag-bg-color: var(--dt-color-support-error);--tag-icon-bg-color: var(--dt-color-support-error-02);--tag-icon-color: var(--dt-color-content-default);--tag-color: var(--dt-color-content-light)}.c-tag.c-tag--warning{--tag-bg-color: var(--dt-color-support-warning-02);--tag-icon-bg-color: var(--dt-color-support-warning);--tag-icon-color: var(--dt-color-content-dark);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--warning.c-tag--icon-only{--tag-bg-color: var(--dt-color-support-warning-02);--tag-icon-color: var(--dt-color-content-default)}.c-tag.c-tag--warning.c-tag--icon-only.c-tag--strong{--tag-bg-color: var(--dt-color-support-warning);--tag-icon-color: var(--dt-color-content-dark)}.c-tag.c-tag--warning.c-tag--strong:not(.c-tag--icon-only){--tag-bg-color: var(--dt-color-support-warning);--tag-icon-bg-color: var(--dt-color-support-warning-tonal);--tag-icon-color: var(--dt-color-content-default);--tag-color: var(--dt-color-content-dark)}.c-tag.c-tag--brand-02{--tag-bg-color: var(--dt-color-support-brand-02);--tag-icon-bg-color: var(--dt-color-support-brand-01);--tag-icon-color: var(--dt-color-content-dark);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--brand-02.c-tag--icon-only{--tag-bg-color: var(--dt-color-support-brand-02);--tag-icon-color: var(--dt-color-content-default)}.c-tag.c-tag--brand-03{--tag-bg-color: var(--dt-color-support-brand-03-subtle);--tag-icon-bg-color: var(--dt-color-support-brand-03);--tag-icon-color: var(--dt-color-content-dark);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--brand-03.c-tag--icon-only{--tag-bg-color: var(--dt-color-support-brand-03-subtle);--tag-icon-color: var(--dt-color-content-default)}.c-tag.c-tag--brand-03.c-tag--icon-only.c-tag--strong{--tag-bg-color: var(--dt-color-support-brand-03);--tag-icon-color: var(--dt-color-content-dark)}.c-tag.c-tag--brand-03.c-tag--strong:not(.c-tag--icon-only){--tag-bg-color: var(--dt-color-support-brand-03);--tag-icon-bg-color: var(--dt-color-support-brand-03-tonal);--tag-icon-color: var(--dt-color-content-default);--tag-color: var(--dt-color-content-dark)}.c-tag.c-tag--brand-04{--tag-bg-color: var(--dt-color-support-brand-04-subtle);--tag-icon-bg-color: var(--dt-color-support-brand-04);--tag-icon-color: var(--dt-color-content-dark);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--brand-04.c-tag--icon-only{--tag-bg-color: var(--dt-color-support-brand-04-subtle);--tag-icon-color: var(--dt-color-content-dark)}.c-tag.c-tag--brand-04.c-tag--icon-only.c-tag--strong{--tag-bg-color: var(--dt-color-support-brand-04);--tag-icon-color: var(--dt-color-content-dark)}.c-tag.c-tag--brand-04.c-tag--strong:not(.c-tag--icon-only){--tag-bg-color: var(--dt-color-support-brand-04);--tag-icon-bg-color: var(--dt-color-support-brand-04-tonal);--tag-icon-color: var(--dt-color-content-default);--tag-color: var(--dt-color-content-dark)}.c-tag.c-tag--brand-05{--tag-bg-color: var(--dt-color-support-brand-05-subtle);--tag-icon-bg-color: var(--dt-color-support-brand-05);--tag-icon-color: var(--dt-color-content-dark);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--brand-05.c-tag--icon-only{--tag-bg-color: var(--dt-color-support-brand-05-subtle);--tag-icon-color: var(--dt-color-content-default)}.c-tag.c-tag--brand-05.c-tag--icon-only.c-tag--strong{--tag-bg-color: var(--dt-color-support-brand-05);--tag-icon-color: var(--dt-color-content-dark)}.c-tag.c-tag--brand-05.c-tag--strong:not(.c-tag--icon-only){--tag-bg-color: var(--dt-color-support-brand-05);--tag-icon-bg-color: var(--dt-color-support-brand-05-tonal);--tag-icon-color: var(--dt-color-content-default);--tag-color: var(--dt-color-content-dark)}.c-tag.c-tag--brand-06{--tag-bg-color: var(--dt-color-support-brand-06-subtle);--tag-icon-bg-color: var(--dt-color-support-brand-06);--tag-icon-color: var(--dt-color-content-light);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--brand-06.c-tag--icon-only{--tag-bg-color: var(--dt-color-support-brand-06-subtle);--tag-icon-color: var(--dt-color-content-default)}.c-tag.c-tag--brand-06.c-tag--icon-only.c-tag--strong{--tag-bg-color: var(--dt-color-support-brand-06);--tag-icon-color: var(--dt-color-content-light)}.c-tag.c-tag--brand-06.c-tag--strong:not(.c-tag--icon-only){--tag-bg-color: var(--dt-color-support-brand-06);--tag-icon-bg-color: var(--dt-color-support-brand-06-subtle);--tag-icon-color: var(--dt-color-content-default);--tag-color: var(--dt-color-content-light)}.c-tag.c-tag--brand-08{--tag-bg-color: var(--dt-color-support-brand-08-subtle);--tag-icon-bg-color: var(--dt-color-support-brand-08);--tag-icon-color: var(--dt-color-content-dark);--tag-color: var(--dt-color-content-default)}.c-tag.c-tag--brand-08.c-tag--icon-only{--tag-bg-color: var(--dt-color-support-brand-08-subtle);--tag-icon-color: var(--dt-color-content-default)}.c-tag.c-tag--brand-08.c-tag--icon-only.c-tag--strong{--tag-bg-color: var(--dt-color-support-brand-08);--tag-icon-color: var(--dt-color-content-dark)}.c-tag.c-tag--brand-08.c-tag--strong:not(.c-tag--icon-only){--tag-bg-color: var(--dt-color-support-brand-08);--tag-icon-bg-color: var(--dt-color-support-brand-08-tonal);--tag-icon-color: var(--dt-color-content-default);--tag-color: var(--dt-color-content-dark)}.c-tag.c-tag--ghost{--tag-bg-color: var(--dt-color-transparent);--tag-icon-bg-color: var(--dt-color-transparent);--tag-icon-color: var(--dt-color-content-default-solid);--tag-color: var(--dt-color-content-default-solid)}.c-tag.c-tag--ghost.c-tag--icon-only{--tag-bg-color: var(--dt-color-transparent);--tag-icon-color: var(--dt-color-content-default-solid)}.c-tag.c-tag--translucent{--tag-bg-color: var(--dt-color-container-prominent);--tag-icon-bg-color: var(--dt-color-container-neutral);--tag-icon-color: var(--dt-color-content-default-solid);--tag-color: var(--dt-color-content-default-solid);--tag-border-color: var(--dt-color-border-neutral);-webkit-backdrop-filter:blur(var(--dt-blur-prominent));backdrop-filter:blur(var(--dt-blur-prominent))}.c-tag.c-tag--translucent.c-tag--icon-only{--tag-bg-color: var(--dt-color-container-prominent);--tag-icon-color: var(--dt-color-content-default-solid);--tag-border-color: var(--dt-color-border-neutral)}.c-tag.c-tag--outline{--tag-bg-color: var(--dt-color-transparent);--tag-border-color: var(--dt-color-border-strong);--tag-icon-bg-color: var(--dt-color-container-strong);--tag-icon-color: var(--dt-color-content-default);--tag-color: var(--dt-color-content-default-solid)}.c-tag.c-tag--outline.c-tag--icon-only{--tag-icon-color: var(--dt-color-content-default-solid)}.c-tag.c-tag--outline.c-tag--has-icon:not(.c-tag--icon-only) slot[name=icon]{position:relative}.c-tag.c-tag--outline.c-tag--has-icon:not(.c-tag--icon-only) slot[name=icon]:before{content:"";position:absolute;left:-.25px;height:var(--tag-icon-container-size);aspect-ratio:1;z-index:-1;border-radius:inherit;box-shadow:inset 5px 0 0 0 var(--tag-icon-bg-color)}', k = [
13
13
  "neutral",
package/dist/react.d.ts CHANGED
File without changes
package/dist/react.js CHANGED
File without changes
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.22.17",
4
+ "version": "0.22.19",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/justeattakeaway/pie",
@@ -29,7 +29,7 @@
29
29
  "scripts": {
30
30
  "build": "run -T vite build",
31
31
  "build:react-wrapper": "npx build-react-wrapper",
32
- "create:manifest": "yarn cem analyze --litelement",
32
+ "create:manifest": "run -T cem analyze --litelement",
33
33
  "lint:scripts": "run -T eslint .",
34
34
  "lint:scripts:fix": "yarn lint:scripts --fix",
35
35
  "lint:style": "run -T stylelint ./src/**/*.{css,scss}",
@@ -43,13 +43,11 @@
43
43
  "author": "Just Eat Takeaway.com - Design System Team",
44
44
  "license": "Apache-2.0",
45
45
  "devDependencies": {
46
- "@custom-elements-manifest/analyzer": "0.9.0",
47
- "@justeattakeaway/pie-components-config": "0.21.0",
48
- "@justeattakeaway/pie-css": "1.1.0",
49
- "@justeattakeaway/pie-icons-webc": "1.21.4",
46
+ "@justeattakeaway/pie-components-config": "0.21.1",
47
+ "@justeattakeaway/pie-css": "1.1.1",
48
+ "@justeattakeaway/pie-icons-webc": "1.22.0",
50
49
  "@justeattakeaway/pie-monorepo-utils": "0.9.0",
51
- "@justeattakeaway/pie-wrapper-react": "0.14.4",
52
- "cem-plugin-module-file-extensions": "0.0.5"
50
+ "@justeattakeaway/pie-wrapper-react": "0.14.4"
53
51
  },
54
52
  "dependencies": {
55
53
  "@justeattakeaway/pie-webc-core": "14.0.1"
package/src/react.ts CHANGED
File without changes