oolib 3.1.2 → 3.2.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/dist/stories/v2/components/Tags/TagDisplay.stories.d.ts +1 -0
  2. package/dist/stories/v2/components/Tags/TagDisplay.stories.js +24 -1
  3. package/dist/v2/components/Tags/Comps/TagDisplay/index.d.ts +3 -0
  4. package/dist/v2/components/Tags/Comps/TagDisplay/index.js +27 -4
  5. package/package.json +1 -1
package/dist/stories/v2/components/Tags/TagDisplay.stories.d.ts CHANGED
@@ -7,5 +7,6 @@ declare namespace _default {
7
7
  }
8
8
  export default _default;
9
9
  export function Tag_Display(args: any): React.JSX.Element;
10
+ export function Text_Wrap_Max_Lines(): React.JSX.Element;
10
11
  export function playground(args: any): React.JSX.Element;
11
12
  import React from "react";
package/dist/stories/v2/components/Tags/TagDisplay.stories.js CHANGED
@@ -14,7 +14,7 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
14
14
  return (mod && mod.__esModule) ? mod : { "default": mod };
15
15
  };
16
16
  Object.defineProperty(exports, "__esModule", { value: true });
17
- exports.playground = exports.Tag_Display = void 0;
17
+ exports.playground = exports.Text_Wrap_Max_Lines = exports.Tag_Display = void 0;
18
18
  var react_1 = __importDefault(require("react"));
19
19
  var Tags_1 = require("../../../../v2/components/Tags");
20
20
  var tagArgTypes_1 = require("./utils/tagArgTypes");
@@ -65,6 +65,29 @@ var Tag_Display = function (args) {
65
65
  react_1.default.createElement(Tags_1.TagDisplay, __assign({ display: "Tag Display" }, args))));
66
66
  };
67
67
  exports.Tag_Display = Tag_Display;
68
+ // textWrapMaxLines showcase — long labels in a narrow container: default
69
+ // single-line ellipsis vs wrap-to-N-lines (pill grows vertically, then
70
+ // ellipsizes).
71
+ var Text_Wrap_Max_Lines = function () {
72
+ var long = "Outcome-driven product evaluation with a deliberately long tail so the label overflows a narrow card";
73
+ return (react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "2rem", padding: "2rem", width: "220px", border: "1px dashed #ccc" } },
74
+ react_1.default.createElement("div", null,
75
+ react_1.default.createElement(Typo2_1.UI_TAG, { style: { display: "block", marginBottom: "0.4rem" } }, "Default (1 line + ellipsis)"),
76
+ react_1.default.createElement(Tags_1.TagDisplay, { display: long })),
77
+ react_1.default.createElement("div", null,
78
+ react_1.default.createElement(Typo2_1.UI_TAG, { style: { display: "block", marginBottom: "0.4rem" } }, "textWrapMaxLines = 2"),
79
+ react_1.default.createElement(Tags_1.TagDisplay, { display: long, textWrapMaxLines: 2 })),
80
+ react_1.default.createElement("div", null,
81
+ react_1.default.createElement(Typo2_1.UI_TAG, { style: { display: "block", marginBottom: "0.4rem" } }, "textWrapMaxLines = 3"),
82
+ react_1.default.createElement(Tags_1.TagDisplay, { display: long, textWrapMaxLines: 3 })),
83
+ react_1.default.createElement("div", null,
84
+ react_1.default.createElement(Typo2_1.UI_TAG, { style: { display: "block", marginBottom: "0.4rem" } }, "Short label, textWrapMaxLines = 2 (no visual change)"),
85
+ react_1.default.createElement(Tags_1.TagDisplay, { display: "Pain Points", textWrapMaxLines: 2 })),
86
+ react_1.default.createElement("div", null,
87
+ react_1.default.createElement(Typo2_1.UI_TAG, { style: { display: "block", marginBottom: "0.4rem" } }, "Unbroken token, textWrapMaxLines = 2"),
88
+ react_1.default.createElement(Tags_1.TagDisplay, { display: "Supercalifragilisticexpialidocious-annotation-topic", textWrapMaxLines: 2 }))));
89
+ };
90
+ exports.Text_Wrap_Max_Lines = Text_Wrap_Max_Lines;
68
91
  var playground = function (args) {
69
92
  return (react_1.default.createElement("div", { style: { display: "flex", flexDirection: "column", gap: "3rem", padding: "1rem" } },
70
93
  react_1.default.createElement("div", { style: { display: "flex", gap: "1rem" } },
package/dist/v2/components/Tags/Comps/TagDisplay/index.d.ts CHANGED
@@ -10,5 +10,8 @@ export interface TagDisplayInterface extends Omit<TagInterface, 'variant'> {
10
10
  icon?: string;
11
11
  weight?: "bold" | "light" | "default";
12
12
  colorPreset?: 'positive' | 'inProgress' | 'warning' | 'negative' | 'special' | "default";
13
+ /** Wrap the label up to this many lines before ellipsizing (the pill grows
14
+ * vertically to fit). Unset = existing single-line ellipsis behaviour. */
15
+ textWrapMaxLines?: number;
13
16
  }
14
17
  export declare const TagDisplay: React.FunctionComponent<TagDisplayInterface>;
package/dist/v2/components/Tags/Comps/TagDisplay/index.js CHANGED
@@ -27,10 +27,33 @@ var getTagDisplayStyles_1 = require("./getTagDisplayStyles");
27
27
  var styled_components_1 = __importDefault(require("styled-components"));
28
28
  var mixins_1 = require("../../../../../themes/mixins");
29
29
  var white = themes_1.colors.white;
30
- var STYLED_UI_TAG_DF = (0, styled_components_1.default)(Typo2_1.UI_TAG_DF)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"])), mixins_1.ellipsis);
30
+ var STYLED_UI_TAG_DF = (0, styled_components_1.default)(Typo2_1.UI_TAG_DF)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n ", "\n"], ["\n ", "\n"
31
+ // textWrapMaxLines variants — text wraps up to N lines, then ellipsis
32
+ // (clampText), and the pill grows vertically to fit. white-space: normal
33
+ // overrides both the ellipsis mixin's nowrap and StyledTag's container-level
34
+ // nowrap; overflow-wrap catches single unbroken tokens longer than the pill.
35
+ // One styled component per distinct line count, cached — a fresh styled()
36
+ // per render would remount the text node and churn generated classes.
37
+ ])), mixins_1.ellipsis);
38
+ // textWrapMaxLines variants — text wraps up to N lines, then ellipsis
39
+ // (clampText), and the pill grows vertically to fit. white-space: normal
40
+ // overrides both the ellipsis mixin's nowrap and StyledTag's container-level
41
+ // nowrap; overflow-wrap catches single unbroken tokens longer than the pill.
42
+ // One styled component per distinct line count, cached — a fresh styled()
43
+ // per render would remount the text node and churn generated classes.
44
+ var wrapTypoByLines = {};
45
+ var getWrapTypo = function (lines) {
46
+ if (!wrapTypoByLines[lines]) {
47
+ wrapTypoByLines[lines] = (0, styled_components_1.default)(Typo2_1.UI_TAG_DF)(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n ", "\n white-space: normal;\n overflow-wrap: anywhere;\n "], ["\n ", "\n white-space: normal;\n overflow-wrap: anywhere;\n "])), (0, mixins_1.clampText)(lines));
48
+ }
49
+ return wrapTypoByLines[lines];
50
+ };
31
51
  var TagDisplay = function (_a) {
32
- var id = _a.id, display = _a.display, size = _a.size, tagColor = _a.tagColor, textColor = _a.textColor, fill = _a.fill, icon = _a.icon, badgeColor = _a.badgeColor, _b = _a.colorPreset, colorPreset = _b === void 0 ? 'default' : _b, weight = _a.weight;
33
- return (react_1.default.createElement(Tag_1.Tag, { weight: weight, id: id, display: display, icon: icon, badgeColor: badgeColor, size: size, fill: fill, style: __assign(__assign(__assign({ padding: "0.25rem 0.5rem", borderRadius: "4px", color: white }, (0, getTagDisplayStyles_1.getTagDisplayStyles)({ colorPreset: colorPreset })), (tagColor ? { backgroundColor: tagColor } : {})), (textColor ? { color: textColor } : {})), typo: STYLED_UI_TAG_DF }));
52
+ var id = _a.id, display = _a.display, size = _a.size, tagColor = _a.tagColor, textColor = _a.textColor, fill = _a.fill, icon = _a.icon, badgeColor = _a.badgeColor, _b = _a.colorPreset, colorPreset = _b === void 0 ? 'default' : _b, weight = _a.weight, textWrapMaxLines = _a.textWrapMaxLines;
53
+ var typo = textWrapMaxLines && textWrapMaxLines > 0
54
+ ? getWrapTypo(Math.floor(textWrapMaxLines))
55
+ : STYLED_UI_TAG_DF;
56
+ return (react_1.default.createElement(Tag_1.Tag, { weight: weight, id: id, display: display, icon: icon, badgeColor: badgeColor, size: size, fill: fill, style: __assign(__assign(__assign({ padding: "0.25rem 0.5rem", borderRadius: "4px", color: white }, (0, getTagDisplayStyles_1.getTagDisplayStyles)({ colorPreset: colorPreset })), (tagColor ? { backgroundColor: tagColor } : {})), (textColor ? { color: textColor } : {})), typo: typo }));
34
57
  };
35
58
  exports.TagDisplay = TagDisplay;
36
- var templateObject_1;
59
+ var templateObject_1, templateObject_2;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oolib",
3
- "version": "3.1.2",
3
+ "version": "3.2.0",
4
4
  "description": " OKE Component Library",
5
5
  "main": "dist/index.js",
6
6
  "types": "dist/index.d.ts",