oolib 2.178.4 → 2.179.0

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

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

package/dist/v2/components/HomeCover/index.js

@@ -33,7 +33,7 @@ var HomeCover = function (_a) {
             react_1.default.createElement("div", { style: { position: "relative", height: '100%', borderRadius: '1rem', display: 'flex', alignItems: 'center', padding: '1.6rem' } },
                 react_1.default.createElement("div", null,
                     react_1.default.createElement(Typo2_1.UI_DISPLAY_SM, null, title),
-                    react_1.default.createElement(Typo2_1.UI_TITLE, { style: { color: themes_1.colors.grey80, marginTop: "0.8rem" } }, desc)),
+                    react_1.default.createElement(Typo2_1.UI_BODY_SEMIBOLD_DF, { style: { color: themes_1.colors.grey80, marginTop: "0.8rem" } }, desc)),
                 CTALink && react_1.default.createElement(Buttons_1.ButtonTertiary, { style: { position: "absolute", bottom: "1.6rem", left: "1.6rem" }, iconSize: "S", icon: (CTALink === null || CTALink === void 0 ? void 0 : CTALink.icon) || "ArrowRight", onClick: function () { return navigate((CTALink === null || CTALink === void 0 ? void 0 : CTALink.url) || CTALink); } }, CTALink === null || CTALink === void 0 ? void 0 : CTALink.text))),
         react_1.default.createElement(ImageSwitcher_1.ImageSwitcher, { images: _CoverImages, theme: theme }));
     var mobile = react_1.default.createElement(styled_1.StyledMobileHomeCover, { id: "StyledMobileHomeCover", theme: theme, variant: variant },

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

@@ -7,7 +7,7 @@ export interface TagInterface {
     icon?: string;
     onClick?: React.MouseEventHandler<HTMLElement>;
     weight?: "bold" | "light" | "default";
-    variant?: "clear" | "link";
+    variant?: "clear" | "link" | "default";
     typo?: any;
     style?: any;
 }

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

@@ -12,11 +12,11 @@ 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, 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 },
         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/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.4",
+  "version": "2.179.0",
   "description": " OKE Component Library",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",