oolib 2.62.3 → 2.63.1

package/dist/components/cards/CardContent/styled.js

@@ -37,6 +37,6 @@ var flexColumn = (0, styled_components_1.css)(templateObject_1 || (templateObjec
 exports.StyledContainer1 = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  ", "\n  gap: 1rem;\n"], ["\n  ", "\n  gap: 1rem;\n"])), flexColumn);
 exports.StyledMetaBlock = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  gap: 0.5em;\n"], ["\n  display: flex;\n  gap: 0.5em;\n"])));
 exports.StyledEmbedSection = styled_components_1.default.div(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  height: 100px;\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n  width: 100%;\n"], ["\n  height: 100px;\n  display: flex;\n  align-items: center;\n  overflow: hidden;\n  width: 100%;\n"])));
-exports.StyledCardWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 100%;\n  border: 2px solid ", ";\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  ", "\n\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n    ", ";\n  }\n"], ["\n  height: 100%;\n  border: 2px solid ", ";\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  ", "\n\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n    ", ";\n  }\n"])), greyColor5, greyColor5, (0, transitions_1.transition)("background-color"), white, styled_1.CSSTitleAnimationOnHover);
+exports.StyledCardWrapper = styled_components_1.default.div(templateObject_5 || (templateObject_5 = __makeTemplateObject(["\n  height: 100%;\n  border: 2px solid ", ";\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  ", "\n\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n    ", ";\n     #CardPlaceholder {\n      opacity: 1;\n    }\n  }\n"], ["\n  height: 100%;\n  border: 2px solid ", ";\n  background-color: ", ";\n  display: flex;\n  flex-direction: column;\n  justify-content: space-between;\n\n  ", "\n\n  cursor: pointer;\n\n  &:hover {\n    background-color: ", ";\n    ", ";\n     #CardPlaceholder {\n      opacity: 1;\n    }\n  }\n"])), greyColor5, greyColor5, (0, transitions_1.transition)("background-color"), white, styled_1.CSSTitleAnimationOnHover);
 exports.StyledUpperSection = styled_components_1.default.div(templateObject_6 || (templateObject_6 = __makeTemplateObject(["\n  /* height: 100%; */\n  flex-grow: 1;\n  justify-content: space-between;\n\n  padding: 2rem;\n  ", "\n  gap: 3rem;\n"], ["\n  /* height: 100%; */\n  flex-grow: 1;\n  justify-content: space-between;\n\n  padding: 2rem;\n  ", "\n  gap: 3rem;\n"])), flexColumn);
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6;

package/dist/components/cards/ListContent/styled.js

@@ -13,7 +13,7 @@ var themes_1 = require("../../../themes");
 var mixins_1 = require("../../../themes/mixins");
 var Typo_1 = require("../../Typo");
 var styled_1 = require("../styled");
-exports.StyledListElemContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-bottom: 1px solid ", ";\n  margin-bottom: 2rem;\n  padding-bottom: 2rem;\n  cursor: pointer;\n  &:hover {\n    ", ";\n  }\n"], ["\n  border-bottom: 1px solid ", ";\n  margin-bottom: 2rem;\n  padding-bottom: 2rem;\n  cursor: pointer;\n  &:hover {\n    ", ";\n  }\n"])), themes_1.colors.greyColor15, styled_1.CSSTitleAnimationOnHover);
+exports.StyledListElemContainer = styled_components_1.default.div(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  border-bottom: 1px solid ", ";\n  margin-bottom: 2rem;\n  padding-bottom: 2rem;\n  cursor: pointer;\n  &:hover {\n    ", ";\n    #CardPlaceholder {\n      opacity: 1;\n    }\n  }\n"], ["\n  border-bottom: 1px solid ", ";\n  margin-bottom: 2rem;\n  padding-bottom: 2rem;\n  cursor: pointer;\n  &:hover {\n    ", ";\n    #CardPlaceholder {\n      opacity: 1;\n    }\n  }\n"])), themes_1.colors.greyColor15, styled_1.CSSTitleAnimationOnHover);
 exports.StyledStatusTagCardLabelWrapper = styled_components_1.default.div(templateObject_2 || (templateObject_2 = __makeTemplateObject(["\n  display: flex;\n  gap: 1rem;\n  align-items: center;\n  flex-wrap: wrap;\n"], ["\n  display: flex;\n  gap: 1rem;\n  align-items: center;\n  flex-wrap: wrap;\n"])));
 exports.StyledHeader = styled_components_1.default.div(templateObject_3 || (templateObject_3 = __makeTemplateObject(["\n  display: flex;\n  align-items: flex-start;\n  flex-direction: column;\n  flex-wrap: wrap;\n  gap: .7rem;\n"], ["\n  display: flex;\n  align-items: flex-start;\n  flex-direction: column;\n  flex-wrap: wrap;\n  gap: .7rem;\n"])));
 exports.StyledLabel = (0, styled_components_1.default)(Typo_1.LABEL)(templateObject_4 || (templateObject_4 = __makeTemplateObject(["\n  ", ";\n  max-width: 23rem;\n  ", "{\n    max-width: 40rem;\n  }\n"], ["\n  ", ";\n  max-width: 23rem;\n  ", "{\n    max-width: 40rem;\n  }\n"

package/dist/components/cards/comps/CardPlaceholder/index.js

@@ -1,13 +1,43 @@
 "use strict";
+var __makeTemplateObject = (this && this.__makeTemplateObject) || function (cooked, raw) {
+    if (Object.defineProperty) { Object.defineProperty(cooked, "raw", { value: raw }); } else { cooked.raw = raw; }
+    return cooked;
+};
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || function (mod) {
+    if (mod && mod.__esModule) return mod;
+    var result = {};
+    if (mod != null) for (var k in mod) if (k !== "default" && Object.prototype.hasOwnProperty.call(mod, k)) __createBinding(result, mod, k);
+    __setModuleDefault(result, mod);
+    return result;
+};
 var __importDefault = (this && this.__importDefault) || function (mod) {
     return (mod && mod.__esModule) ? mod : { "default": mod };
 };
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.CardPlaceholder = void 0;
-var react_1 = __importDefault(require("react"));
+var react_1 = __importStar(require("react"));
 var cards_ph1_jpg_1 = __importDefault(require("../../../../assets/images/cards_ph1.jpg"));
 var cards_ph2_jpg_1 = __importDefault(require("../../../../assets/images/cards_ph2.jpg"));
 var cards_ph3_jpg_1 = __importDefault(require("../../../../assets/images/cards_ph3.jpg"));
+var styled_components_1 = __importDefault(require("styled-components"));
+var mixins_1 = require("../../../../themes/mixins");
+var StyledImg = styled_components_1.default.img(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  opacity: 0.7;\n ", ";\n"], ["\n  opacity: 0.7;\n ", ";\n"])), (0, mixins_1.transition)('opacity'));
 var CardPlaceholder = function (_a) {
     var _b = _a.style, style = _b === void 0 ? { height: 'auto', width: '100%' } : _b;
     var placeholders = {
@@ -15,7 +45,10 @@ var CardPlaceholder = function (_a) {
         ph2: cards_ph2_jpg_1.default,
         ph3: cards_ph3_jpg_1.default
     };
-    var randomInt = Math.ceil(Math.random() * 3); //will give us 1,2 or 3
-    return react_1.default.createElement("img", { style: style, src: placeholders["ph".concat(randomInt)] });
+    //useRef cuz we want this int only one time, which is on first mount.
+    //else, everytime the parent comp rerenders, the placeholder changes, which looks quite bad
+    var randomInt = (0, react_1.useRef)(Math.ceil(Math.random() * 3)); //will give us 1,2 or 3
+    return react_1.default.createElement(StyledImg, { id: 'CardPlaceholder', style: style, src: placeholders["ph".concat(randomInt.current)] });
 };
 exports.CardPlaceholder = CardPlaceholder;
+var templateObject_1;

package/dist/components/cards/styled.js

@@ -30,7 +30,7 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.CSSTitleAnimationOnHover = exports.StyledTitleSpan = exports.StyledTitle = void 0;
 var styled_components_1 = __importStar(require("styled-components"));
 var mixins_1 = require("../../themes/mixins");
-var Typo_1 = require("../../components/Typo");
+var Typo_1 = require("../Typo");
 var utilsOolib_1 = require("../../utilsOolib");
 /** --- this bit handles the entire title underline hover animation --- */
 exports.StyledTitle = (0, styled_components_1.default)(Typo_1.SERIF_4_5)(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n"], ["\n  ", "\n"])), (0, mixins_1.transition)("color"));

package/package.json

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