oolib 2.178.5 → 2.180.0

package/dist/stories/v2/components/Tags/TagDisplay.stories.js

@@ -27,11 +27,12 @@ exports.default = {
             icon: true,
             fill: true,
             size: true,
-            weight: true
+            weight: true,
+            badgeColor: true,
         },
         add: {
-            variant: {
-                name: "Variant",
+            colorPreset: {
+                name: "Color Preset",
                 description: "Select an icon from the available set.",
                 options: [
                     "Postive",
@@ -46,7 +47,7 @@ exports.default = {
                     "In Progress": "inProgress",
                     "Warning": "warning",
                     "Negative": "negative",
-                    "Special": "speical",
+                    "Special": "special",
                     "Default": "default"
                 },
                 control: { type: "select" },

package/dist/stories/v2/components/Tags/TagLink.stories.js

@@ -21,7 +21,7 @@ var GenTag_1 = require("./utils/GenTag");
 var tagArgTypes_1 = require("./utils/tagArgTypes");
 exports.default = {
     title: "Oolib V 2.0/Components/Tags/Tag Link",
-    argTypes: __assign({}, (0, tagArgTypes_1.commonArgTypes)({ exclude: { icon: true } })),
+    argTypes: __assign({}, (0, tagArgTypes_1.commonArgTypes)({ exclude: { icon: true, badgeColor: true, } })),
     args: __assign({}, (0, tagArgTypes_1.commonTagArgTypes)("Tag Link")),
 };
 var Tag_Link = function (args) {

package/dist/stories/v2/components/Tags/utils/tagArgTypes.js

@@ -12,6 +12,7 @@ var __assign = (this && this.__assign) || function () {
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.commonArgTypes = exports.commonTagArgTypes = void 0;
+var __1 = require("../../../../..");
 var icons_1 = require("../../../../../icons");
 var commonTagArgTypes = function (display) {
     return {
@@ -91,6 +92,16 @@ var commonArgTypes = function (_a) {
                 defaultValue: { summary: "none" },
                 type: { summary: "string" },
             }
+        },
+        badgeColor: {
+            name: "Badge Color",
+            description: "Select an color from the available set.",
+            options: __1.colors2,
+            control: { type: "select" },
+            table: {
+                defaultValue: { summary: "none" },
+                type: { summary: "string" },
+            }
         }
     };
     // Filter out excluded types

package/dist/v2/components/Tags/Comps/Tag/index.d.ts

@@ -7,8 +7,9 @@ export interface TagInterface {
     icon?: string;
     onClick?: React.MouseEventHandler<HTMLElement>;
     weight?: "bold" | "light" | "default";
-    variant?: "clear" | "link";
+    variant?: "clear" | "link" | "default";
     typo?: any;
     style?: any;
+    badgeColor?: string;
 }
-export declare const Tag: ({ id, fill, size, display, icon, weight, onClick, variant, typo, style }: TagInterface) => React.JSX.Element;
+export declare const Tag: ({ id, fill, size, display, icon, weight, onClick, variant, typo, badgeColor, style }: TagInterface) => React.JSX.Element;

package/dist/v2/components/Tags/Comps/Tag/index.js

@@ -12,11 +12,12 @@ var styled_components_1 = require("styled-components");
 var themes_1 = require("../../../../themes");
 var grey40 = themes_1.colors.grey40;
 var Tag = function (_a) {
-    var id = _a.id, fill = _a.fill, size = _a.size, display = _a.display, icon = _a.icon, weight = _a.weight, onClick = _a.onClick, variant = _a.variant, typo = _a.typo, style = _a.style;
+    var id = _a.id, _b = _a.fill, fill = _b === void 0 ? "solid" : _b, _c = _a.size, size = _c === void 0 ? "S" : _c, display = _a.display, icon = _a.icon, weight = _a.weight, onClick = _a.onClick, variant = _a.variant, typo = _a.typo, badgeColor = _a.badgeColor, style = _a.style;
     var Icon = icons_1.icons[icon];
     var theme = (0, styled_components_1.useTheme)();
     var Typo = typo || styled_2.Styled_UI_CAPTION_DF;
-    return (react_1.default.createElement(styled_1.StyledTag, { id: id, fill: fill || "solid", size: size || "S", icon: icon, onClick: onClick, variant: variant, colors: theme === null || theme === void 0 ? void 0 : theme.colors, style: style },
+    return (react_1.default.createElement(styled_1.StyledTag, { id: id, fill: fill, size: size, icon: icon, onClick: onClick, variant: variant, colors: theme === null || theme === void 0 ? void 0 : theme.colors, style: style },
+        badgeColor && react_1.default.createElement("div", { style: { background: badgeColor, width: "1rem", height: "1rem", borderRadius: "50%", marginRight: "0.2rem" } }),
         react_1.default.createElement(Typo, { weight: weight },
             " ",
             display,

package/dist/v2/components/Tags/Comps/Tag/styled.js

@@ -59,7 +59,7 @@ var commonTagStyles = function (_a) {
         "\n        padding: 0.1rem 0.5rem;\n        border-radius: 4px;\n        gap: 0.1rem;\n        padding-right: ".concat(icon ? "0.4rem" : "0.5rem", ";\n      ")
         : size === "S" ?
             "\n        padding: 0.4rem 1rem;\n        border-radius: 1.2rem;\n        gap: 0.2rem;\n        padding-right: ".concat(icon ? "0.8rem" : "1rem", ";\n\n      ")
-            :
+            : // M  Not in the design yet, might need in the future
                 " \n        padding: 0.1rem 0.5rem;\n        border-radius: 4px;\n        gap: 0.1rem;\n        padding-right: ".concat(icon ? "0.4rem" : "0.5rem", ";\n\n      "), "\n\n  background-color: ").concat(fill === "solid" ? grey5 : white, ";\n  outline: ").concat(fill === "outline" ? "1px solid ".concat(grey10) : "none", ";\n\n");
 };
 var variants = function (_a) {

package/dist/v2/components/Tags/Comps/TagClear/index.d.ts

@@ -7,5 +7,6 @@ export interface TagClearProps {
     fill?: string;
     size?: "XS" | "S";
     weight?: "bold" | "light" | "default";
+    badgeColor?: string;
 }
 export declare const TagClear: FunctionComponent<TagClearProps>;

package/dist/v2/components/Tags/Comps/TagClear/index.js

@@ -7,7 +7,7 @@ exports.TagClear = void 0;
 var react_1 = __importDefault(require("react"));
 var Tag_1 = require("../Tag");
 var TagClear = function (_a) {
-    var id = _a.id, display = _a.display, size = _a.size, onClick = _a.onClick, fill = _a.fill, weight = _a.weight;
-    return (react_1.default.createElement(Tag_1.Tag, { id: id, display: display, icon: "X", size: size, onClick: onClick, variant: "clear", fill: fill, weight: weight }));
+    var id = _a.id, display = _a.display, size = _a.size, onClick = _a.onClick, fill = _a.fill, weight = _a.weight, badgeColor = _a.badgeColor;
+    return (react_1.default.createElement(Tag_1.Tag, { id: id, display: display, icon: "X", size: size, onClick: onClick, variant: "clear", fill: fill, weight: weight, badgeColor: badgeColor }));
 };
 exports.TagClear = TagClear;

package/dist/v2/components/Tags/Comps/TagDisplay/getTagDisplayStyles.d.ts

@@ -1,5 +1,5 @@
-export function getTagDisplayStyles({ variant }: {
-    variant: any;
+export function getTagDisplayStyles({ colorPreset }: {
+    colorPreset: any;
 }): {
     backgroundColor: string;
     backdropFilter?: undefined;

package/dist/v2/components/Tags/Comps/TagDisplay/getTagDisplayStyles.js

@@ -4,8 +4,8 @@ exports.getTagDisplayStyles = void 0;
 var themes_1 = require("../../../../themes");
 var grey40 = themes_1.colors.grey40, green = themes_1.colors.green, yellow = themes_1.colors.yellow, blue = themes_1.colors.blue, error = themes_1.colors.error, purple = themes_1.colors.purple;
 var getTagDisplayStyles = function (_a) {
-    var variant = _a.variant;
-    switch (variant) {
+    var colorPreset = _a.colorPreset;
+    switch (colorPreset) {
         case "positive":
             return {
                 backgroundColor: green,

package/dist/v2/components/Tags/Comps/TagDisplay/index.d.ts

@@ -9,6 +9,6 @@ export interface TagDisplayInterface extends Omit<TagInterface, 'variant'> {
     fill?: string;
     icon?: string;
     weight?: "bold" | "light" | "default";
-    variant: 'positive' | 'inProgress' | 'warning' | 'negative' | 'special' | "default";
+    colorPreset: 'positive' | 'inProgress' | 'warning' | 'negative' | 'special' | "default";
 }
 export declare const TagDisplay: React.FunctionComponent<TagDisplayInterface>;

package/dist/v2/components/Tags/Comps/TagDisplay/index.js

@@ -25,7 +25,7 @@ var TagDisplay = function (_a) {
     var id = _a.id, display = _a.display, size = _a.size, 
     // tagColor,
     // textColor,
-    fill = _a.fill, icon = _a.icon, _b = _a.variant, variant = _b === void 0 ? 'default' : _b, weight = _a.weight;
-    return (react_1.default.createElement(Tag_1.Tag, { weight: weight, id: id, display: display, icon: icon, size: size, fill: fill, style: __assign({ padding: "0.25rem 0.5rem", borderRadius: "4px", color: white }, (0, getTagDisplayStyles_1.getTagDisplayStyles)({ variant: variant })), typo: Typo2_1.UI_TAG_DF }));
+    fill = _a.fill, icon = _a.icon, _b = _a.colorPreset, colorPreset = _b === void 0 ? 'default' : _b, weight = _a.weight;
+    return (react_1.default.createElement(Tag_1.Tag, { weight: weight, id: id, display: display, icon: icon, size: size, fill: fill, style: __assign({ padding: "0.25rem 0.5rem", borderRadius: "4px", color: white }, (0, getTagDisplayStyles_1.getTagDisplayStyles)({ colorPreset: colorPreset })), typo: Typo2_1.UI_TAG_DF }));
 };
 exports.TagDisplay = TagDisplay;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oolib",
-  "version": "2.178.5",
+  "version": "2.180.0",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",