@justeattakeaway/pie-tag 0.21.4 → 0.22.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 (10) hide show
  1. package/README.md +136 -15
  2. package/custom-elements.json +6 -79
  3. package/dist/index.d.ts +14 -26
  4. package/dist/index.js +84 -108
  5. package/dist/react.d.ts +14 -26
  6. package/dist/react.js +4 -5
  7. package/package.json +1 -1
  8. package/src/defs.ts +29 -15
  9. package/src/index.ts +19 -96
  10. package/src/tag.scss +385 -133
package/README.md CHANGED
@@ -7,7 +7,7 @@
7
7
  </a>
8
8
  </p>
9
9
 
10
- `@justeattakeaway/pie-tag` is a Web Component built using the Lit library. It offers a simple and accessible interactive tag component for web applications.
10
+ `@justeattakeaway/pie-tag` is a Web Component built using the Lit library. It offers a simple and accessible tag component for web applications.
11
11
 
12
12
  ## Table of Contents
13
13
 
@@ -19,6 +19,7 @@
19
19
  - [CSS Parts](#css-parts)
20
20
  - [Events](#events)
21
21
  - [Usage Examples](#usage-examples)
22
+ - [Text Truncation](#text-truncation)
22
23
  - [Questions and Support](#questions-and-support)
23
24
  - [Contributing](#contributing)
24
25
 
@@ -31,14 +32,14 @@ Ideally, you should install the component using the **`@justeattakeaway/pie-webc
31
32
  ## Documentation
32
33
 
33
34
  ### Properties
34
- | Prop | Options | Description | Default |
35
- |----------------|---------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------|
36
- | `size` | `"small"`, `"large"` | Sets the size of the tag. | `"large"` |
37
- | `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
- | `isStrong` | `true`, `false` | If true, displays strong tag styles for `"success"`, `"error"`, `"information"`, `"neutral"` and `"brand-05"` variants. Has no effect for other variants. | `false` |
39
- | `isInteractive`| `true`, `false` | When true, the tag will be rendered as a button and can be interacted with. When utilized in "icon only" mode, `isInteractive` will always be `false` regardless of the assigned prop value. | `false` |
40
- | `disabled` | `true`, `false` | For an interactive tag, this applies the disabled attribute to the button and styles it appropriately. For a non-interactive tag, this only applies the disabled styling. | `false` |
41
- | `iconPlacement`| `"leading"`, `"trailing"` | Sets the position of the icon relative to the text. Leading comes before the text and trailing comes after, taking writing direction into account. To use this, you must pass an icon into the [icon slot](#slots). Only used if `isInteractive` is `true`. | `"leading"` |
35
+ | Prop | Options | Description | Default |
36
+ |-------------------|---------------------------------------------------------------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------|-------------|
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"` |
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
+ | `isDimmed` | `true`, `false` | When true, applies a dimmed styling to the tag. | `false` |
41
+ | `isIconOnly` | `true`, `false` | Required to correctly render the tag when it contains only an icon. | `false` |
42
+ | `hasLeadingIcon` | `true`, `false` | Required to correctly render the tag when it has a leading icon plus text. | `false` |
42
43
 
43
44
  ### Slots
44
45
  | Slot | Description |
@@ -73,9 +74,9 @@ import '@justeattakeaway/pie-icons-webc/dist/IconPlaceholder.js';
73
74
 
74
75
  ```html
75
76
  <!-- pass js file into <script> tag -->
76
- <pie-tag>
77
- Label
77
+ <pie-tag hasLeadingIcon>
78
78
  <icon-placeholder slot="icon"></icon-placeholder>
79
+ Label
79
80
  </pie-tag>
80
81
  <script type="module" src="/main.js"></script>
81
82
  ```
@@ -87,9 +88,9 @@ import '@justeattakeaway/pie-icons-webc/dist/IconPlaceholder.js';
87
88
  import '@justeattakeaway/pie-webc/components/tag.js'
88
89
  import '@justeattakeaway/pie-icons-webc/dist/IconPlaceholder.js';
89
90
 
90
- <pie-tag>
91
- Label
91
+ <pie-tag hasLeadingIcon>
92
92
  <icon-placeholder slot="icon"></icon-placeholder>
93
+ Label
93
94
  </pie-tag>
94
95
  ```
95
96
 
@@ -99,12 +100,132 @@ import '@justeattakeaway/pie-icons-webc/dist/IconPlaceholder.js';
99
100
  import { PieTag } from '@justeattakeaway/pie-webc/react/tag.js';
100
101
  import { IconPlaceholder } from '@justeattakeaway/pie-icons-webc/dist/react/IconPlaceholder.js';
101
102
 
102
- <PieTag>
103
- Label
103
+ <PieTag hasLeadingIcon={true}>
104
104
  <IconPlaceholder slot="icon"></IconPlaceholder>
105
+ Label
105
106
  </PieTag>
106
107
  ```
107
108
 
109
+ ### Icon Properties Usage
110
+
111
+ These properties are required for correct rendering when using icons with tags.
112
+
113
+ **Icon-only tag:**
114
+
115
+ ```html
116
+ <!-- HTML -->
117
+ <pie-tag isIconOnly>
118
+ <icon-placeholder slot="icon"></icon-placeholder>
119
+ </pie-tag>
120
+ ```
121
+
122
+ ```jsx
123
+ // React
124
+ <PieTag isIconOnly={true}>
125
+ <IconPlaceholder slot="icon" />
126
+ </PieTag>
127
+ ```
128
+
129
+ **Tag with leading icon and text:**
130
+
131
+ ```html
132
+ <!-- HTML -->
133
+ <pie-tag hasLeadingIcon>
134
+ <icon-placeholder slot="icon"></icon-placeholder>
135
+ Label
136
+ </pie-tag>
137
+ ```
138
+
139
+ ```jsx
140
+ // React
141
+ <PieTag hasLeadingIcon={true}>
142
+ <IconPlaceholder slot="icon" />
143
+ Label
144
+ </PieTag>
145
+ ```
146
+
147
+ ## Text Truncation
148
+
149
+ The pie-tag component automatically handles text truncation when the content exceeds the available width. Text will be truncated with an ellipsis (`...`) to ensure the tag maintains its intended layout.
150
+
151
+ ### How Text Truncation Works
152
+
153
+ - Text content in the default slot will automatically truncate when it overflows the tag's container
154
+ - The truncation behaviour is controlled by applying a `width` or `max-width` to the tag component
155
+ - Both small and large tag sizes support text truncation
156
+ - Tags with icons will also truncate text content while preserving the icon display
157
+ - The truncation is CSS based, ensuring that the full text content remains accessible to screen readers
158
+
159
+ ### Usage Examples
160
+
161
+ **Basic Text Truncation:**
162
+
163
+ ```html
164
+ <!-- HTML -->
165
+ <div style="width: 150px;">
166
+ <pie-tag style="width: 100%;">
167
+ This is a very long text that will be truncated with ellipsis
168
+ </pie-tag>
169
+ </div>
170
+ ```
171
+
172
+ ```jsx
173
+ // React
174
+ <div style={{ width: '150px' }}>
175
+ <PieTag style={{ width: '100%' }}>
176
+ This is a very long text that will be truncated with ellipsis
177
+ </PieTag>
178
+ </div>
179
+ ```
180
+
181
+ **Text Truncation with Icon:**
182
+
183
+ ```html
184
+ <!-- HTML -->
185
+ <div style="max-width: 120px;">
186
+ <pie-tag style="width: 100%;" hasLeadingIcon>
187
+ <icon-info-circle slot="icon"></icon-info-circle>
188
+ This long text will be truncated while keeping the icon visible
189
+ </pie-tag>
190
+ </div>
191
+ ```
192
+
193
+ ```jsx
194
+ // React
195
+ <div style={{ maxWidth: '120px' }}>
196
+ <PieTag style={{ width: '100%' }} hasLeadingIcon={true}>
197
+ <IconInfoCircle slot="icon" />
198
+ This long text will be truncated while keeping the icon visible
199
+ </PieTag>
200
+ </div>
201
+ ```
202
+
203
+ **Different Container Widths:**
204
+
205
+ ```html
206
+ <!-- HTML -->
207
+ <!-- 150px container -->
208
+ <div style="max-width: 150px;">
209
+ <pie-tag variant="information" style="width: 100%;">
210
+ This text will truncate at 150px width
211
+ </pie-tag>
212
+ </div>
213
+
214
+ <!-- 100px container -->
215
+ <div style="max-width: 100px;">
216
+ <pie-tag variant="information" style="width: 100%;">
217
+ This text will truncate at 100px width
218
+ </pie-tag>
219
+ </div>
220
+
221
+ <!-- 50px container -->
222
+ <div style="max-width: 50px;">
223
+ <pie-tag variant="information" style="width: 100%;">
224
+ This text will truncate at 50px width
225
+ </pie-tag>
226
+ </div>
227
+ ```
228
+
108
229
  ## Questions and Support
109
230
 
110
231
  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).
package/custom-elements.json CHANGED
@@ -16,9 +16,9 @@
16
16
  "kind": "variable",
17
17
  "name": "variants",
18
18
  "type": {
19
- "text": "['neutral-alternative', 'neutral', 'outline', 'ghost', 'information', 'success', 'error', 'brand-02', 'brand-03', 'brand-04', 'brand-05', 'brand-06']"
19
+ "text": "[\n 'neutral',\n 'neutral-alternative',\n 'ghost',\n 'outline',\n 'translucent',\n 'information',\n 'success',\n 'error',\n 'warning',\n 'brand-02',\n 'brand-03',\n 'brand-04',\n 'brand-05',\n 'brand-06',\n 'brand-08'\n]"
20
20
  },
21
- "default": "['neutral-alternative', 'neutral', 'outline', 'ghost', 'information', 'success', 'error', 'brand-02', 'brand-03', 'brand-04', 'brand-05', 'brand-06']"
21
+ "default": "[\n 'neutral',\n 'neutral-alternative',\n 'ghost',\n 'outline',\n 'translucent',\n 'information',\n 'success',\n 'error',\n 'warning',\n 'brand-02',\n 'brand-03',\n 'brand-04',\n 'brand-05',\n 'brand-06',\n 'brand-08'\n]"
22
22
  },
23
23
  {
24
24
  "kind": "variable",
@@ -28,21 +28,13 @@
28
28
  },
29
29
  "default": "['small', 'large']"
30
30
  },
31
- {
32
- "kind": "variable",
33
- "name": "iconPlacements",
34
- "type": {
35
- "text": "['leading', 'trailing']"
36
- },
37
- "default": "['leading', 'trailing']"
38
- },
39
31
  {
40
32
  "kind": "variable",
41
33
  "name": "defaultProps",
42
34
  "type": {
43
35
  "text": "DefaultProps"
44
36
  },
45
- "default": "{\n variant: 'neutral',\n isStrong: false,\n isInteractive: false,\n disabled: false,\n size: 'large',\n iconPlacement: 'leading',\n}"
37
+ "default": "{\n variant: 'neutral',\n isStrong: false,\n isDimmed: false,\n size: 'large',\n isIconOnly: false,\n hasLeadingIcon: false,\n}"
46
38
  }
47
39
  ],
48
40
  "exports": [
@@ -62,14 +54,6 @@
62
54
  "module": "src/defs.js"
63
55
  }
64
56
  },
65
- {
66
- "kind": "js",
67
- "name": "iconPlacements",
68
- "declaration": {
69
- "name": "iconPlacements",
70
- "module": "src/defs.js"
71
- }
72
- },
73
57
  {
74
58
  "kind": "js",
75
59
  "name": "defaultProps",
@@ -126,75 +110,18 @@
126
110
  },
127
111
  {
128
112
  "kind": "field",
129
- "name": "disabled",
113
+ "name": "isDimmed",
130
114
  "privacy": "public"
131
115
  },
132
116
  {
133
117
  "kind": "field",
134
- "name": "isInteractive",
118
+ "name": "isIconOnly",
135
119
  "privacy": "public"
136
120
  },
137
121
  {
138
122
  "kind": "field",
139
- "name": "iconPlacement",
123
+ "name": "hasLeadingIcon",
140
124
  "privacy": "public"
141
- },
142
- {
143
- "kind": "field",
144
- "name": "_iconSlotNodes",
145
- "type": {
146
- "text": "Array<HTMLElement>"
147
- }
148
- },
149
- {
150
- "kind": "field",
151
- "name": "isIconOnly",
152
- "type": {
153
- "text": "boolean"
154
- },
155
- "privacy": "private",
156
- "default": "false"
157
- },
158
- {
159
- "kind": "method",
160
- "name": "checkIfIsIconOnly",
161
- "privacy": "private"
162
- },
163
- {
164
- "kind": "method",
165
- "name": "handleSlotChange",
166
- "privacy": "private"
167
- },
168
- {
169
- "kind": "method",
170
- "name": "renderIconSlot",
171
- "privacy": "private"
172
- },
173
- {
174
- "kind": "method",
175
- "name": "renderTag",
176
- "privacy": "private",
177
- "parameters": [
178
- {
179
- "name": "classes",
180
- "type": {
181
- "text": "ClassInfo"
182
- }
183
- }
184
- ]
185
- },
186
- {
187
- "kind": "method",
188
- "name": "renderButtonTag",
189
- "privacy": "private",
190
- "parameters": [
191
- {
192
- "name": "classes",
193
- "type": {
194
- "text": "ClassInfo"
195
- }
196
- }
197
- ]
198
125
  }
199
126
  ],
200
127
  "superclass": {
package/dist/index.d.ts CHANGED
@@ -1,15 +1,12 @@
1
1
  import { ComponentDefaultProps } from '@justeattakeaway/pie-webc-core';
2
2
  import { CSSResult } from 'lit';
3
3
  import { PieElement } from '@justeattakeaway/pie-webc-core/src/internals/PieElement';
4
- import { PropertyValues } from 'lit';
5
4
  import { TemplateResult } from 'lit-html';
6
5
 
7
6
  export declare type DefaultProps = ComponentDefaultProps<TagProps>;
8
7
 
9
8
  export declare const defaultProps: DefaultProps;
10
9
 
11
- export declare const iconPlacements: readonly ["leading", "trailing"];
12
-
13
10
  /**
14
11
  * @tagname pie-tag
15
12
  * @slot icon - The icon slot
@@ -18,20 +15,12 @@ export declare const iconPlacements: readonly ["leading", "trailing"];
18
15
  * @csspart icon - The container for the icon slot.
19
16
  */
20
17
  export declare class PieTag extends PieElement implements TagProps {
21
- variant: "neutral-alternative" | "neutral" | "outline" | "ghost" | "information" | "success" | "error" | "brand-02" | "brand-03" | "brand-04" | "brand-05" | "brand-06";
18
+ variant: "neutral" | "neutral-alternative" | "ghost" | "outline" | "translucent" | "information" | "success" | "error" | "warning" | "brand-02" | "brand-03" | "brand-04" | "brand-05" | "brand-06" | "brand-08";
22
19
  size: "small" | "large";
23
20
  isStrong: boolean;
24
- disabled: boolean;
25
- isInteractive: boolean;
26
- iconPlacement: "leading" | "trailing";
27
- _iconSlotNodes: Array<HTMLElement>;
28
- private isIconOnly;
29
- updated(changedProperties: PropertyValues<this>): void;
30
- private checkIfIsIconOnly;
31
- private handleSlotChange;
32
- private renderIconSlot;
33
- private renderTag;
34
- private renderButtonTag;
21
+ isDimmed: boolean;
22
+ isIconOnly: boolean;
23
+ hasLeadingIcon: boolean;
35
24
  render(): TemplateResult<1>;
36
25
  static styles: CSSResult;
37
26
  }
@@ -44,28 +33,27 @@ export declare interface TagProps {
44
33
  */
45
34
  variant?: typeof variants[number];
46
35
  /**
47
- * When true, the "information", "success", "error", "brand-05", and "neutral" variants change their styles and become bolder
36
+ * When true, the "neutral", "information", "success", "error", "warning", "brand-03", "brand-04", "brand-05", "brand-06", and "brand-08" variants change their styles and become bolder
48
37
  */
49
38
  isStrong?: boolean;
50
39
  /**
51
- * When `true`, the tag will be rendered as a button and can be interacted with.
52
- */
53
- isInteractive?: boolean;
54
- /**
55
- * For an interactive tag, this applies the disabled attribute to the button and styles it appropriately.
56
- * For a non-interactive tag, this only applies the disabled styling.
40
+ * When true, applies a dimmed styling to the tag.
57
41
  */
58
- disabled?: boolean;
42
+ isDimmed?: boolean;
59
43
  /**
60
44
  * What size the tag should be.
61
45
  */
62
46
  size?: typeof sizes[number];
63
47
  /**
64
- * The placement of the icon slot such as leading (default) or trailing. Available only if `isInteractive` is set to true.
48
+ * Required to correctly render the tag when it contains only an icon.
49
+ */
50
+ isIconOnly?: boolean;
51
+ /**
52
+ * Required to correctly render the tag when it has a leading icon plus text.
65
53
  */
66
- iconPlacement?: typeof iconPlacements[number];
54
+ hasLeadingIcon?: boolean;
67
55
  }
68
56
 
69
- export declare const variants: readonly ["neutral-alternative", "neutral", "outline", "ghost", "information", "success", "error", "brand-02", "brand-03", "brand-04", "brand-05", "brand-06"];
57
+ export declare const variants: readonly ["neutral", "neutral-alternative", "ghost", "outline", "translucent", "information", "success", "error", "warning", "brand-02", "brand-03", "brand-04", "brand-05", "brand-06", "brand-08"];
70
58
 
71
59
  export { }