oolib 2.7.6 → 2.8.0

package/dist/components/Buttons/index.js

@@ -69,12 +69,12 @@ var ButtonGhost = function (props) { return react_1.default.createElement(Button
 exports.ButtonGhost = ButtonGhost;
 var UploadButton = function (props) {
     var inputRef = (0, react_1.useRef)(null);
-    var mutilple = props.mutilple, onChange = props.onChange, variant = props.variant, id = props.id;
+    var mutilple = props.mutilple, onChange = props.onChange, variant = props.variant, id = props.id, accept = props.accept;
     var handleFileUpload = function () {
         inputRef.current.click();
     };
     return (react_1.default.createElement(react_1.default.Fragment, null,
-        react_1.default.createElement("input", { id: id, ref: inputRef, type: "file", multiple: mutilple, onChange: onChange, style: { display: 'none' } }),
+        react_1.default.createElement("input", { id: id, ref: inputRef, type: "file", accept: accept, multiple: mutilple, onChange: onChange, style: { display: 'none' } }),
         react_1.default.createElement(ButtonStyledWrapper, { props: __assign(__assign({}, props), { onClick: handleFileUpload }), variant: variant || 'secondary' })));
 };
 exports.UploadButton = UploadButton;

package/dist/components/Section/index.d.ts

@@ -0,0 +1 @@
+export function Section(props: any): JSX.Element;

package/dist/components/Section/index.js

@@ -0,0 +1,33 @@
+"use strict";
+var __assign = (this && this.__assign) || function () {
+    __assign = Object.assign || function(t) {
+        for (var s, i = 1, n = arguments.length; i < n; i++) {
+            s = arguments[i];
+            for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
+                t[p] = s[p];
+        }
+        return t;
+    };
+    return __assign.apply(this, arguments);
+};
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Section = void 0;
+var react_1 = __importDefault(require("react"));
+var index_styled_1 = require("./index.styled");
+/*
+especially meant for usecases where
+the page container has a max width, but we need its bottom border to stretch the full
+width of the screen
+*/
+/**
+ * props can be any valid color value,
+ * can be borderBottom/Top/Left/Right
+ * can be style, className & children
+ */
+var Section = function (props) {
+    return (react_1.default.createElement(index_styled_1.StyledSection, __assign({}, props), props.children));
+};
+exports.Section = Section;

package/dist/components/Section/index.styled.d.ts

@@ -0,0 +1 @@
+export const StyledSection: any;

package/dist/components/Section/index.styled.js

@@ -0,0 +1,37 @@
+"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 __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledSection = void 0;
+var styled_components_1 = __importDefault(require("styled-components"));
+var colors_1 = require("../../themes/colors");
+var setBorder = function (_a) {
+    var _b;
+    var props = _a.props;
+    var borderStyles = "";
+    var greyColor15 = (((_b = props.theme) === null || _b === void 0 ? void 0 : _b.colors) || colors_1.colors).greyColor15;
+    if (props.borderTop || props.borderRight || props.borderLeft || props.borderBottom) {
+        if (props.borderTop)
+            borderStyles += "border-top: 1px solid ".concat(greyColor15, ";");
+        if (props.borderLeft)
+            borderStyles += "border-left: 1px solid ".concat(greyColor15, ";");
+        if (props.borderRight)
+            borderStyles += "border-right: 1px solid ".concat(greyColor15, ";");
+        if (props.borderBottom)
+            borderStyles += "border-bottom: 1px solid ".concat(greyColor15, ";");
+    }
+    return borderStyles;
+};
+var setFill = function (_a) {
+    var props = _a.props;
+    var colorsObj = props.theme.colors || colors_1.colors;
+    var colorKey = Object.keys(props).find(function (p) { return !!colorsObj[p]; });
+    return colorKey ? "background-color: ".concat(colorsObj[colorKey], ";") : '';
+};
+exports.StyledSection = styled_components_1.default.section(templateObject_1 || (templateObject_1 = __makeTemplateObject(["\n  ", "\n  ", "\n"], ["\n  ", "\n  ", "\n"])), function (props) { return setBorder({ props: props }); }, function (props) { return setFill({ props: props }); });
+var templateObject_1;

package/dist/components/Tags/index.d.ts

@@ -17,7 +17,7 @@ export function TagClear({ id, display, value, M, invert, onClick, theme, varian
     variant?: string;
     grey: any;
 }): JSX.Element;
-export function TagSelect({ onClick, isSelected, display, value, M, theme, style }: {
+export function TagSelect({ onClick, isSelected, display, value, M, theme, style, onMouseDown }: {
     onClick: any;
     isSelected?: boolean;
     display: any;
@@ -25,6 +25,7 @@ export function TagSelect({ onClick, isSelected, display, value, M, theme, style
     M: any;
     theme: any;
     style: any;
+    onMouseDown: any;
 }): JSX.Element;
 export function TagLink({ display, to, invert, M, theme, variant }: {
     display: any;

package/dist/components/Tags/index.js

@@ -42,7 +42,7 @@ function TagClear(_a) {
 }
 exports.TagClear = TagClear;
 function TagSelect(_a) {
-    var onClick = _a.onClick, _b = _a.isSelected, isSelected = _b === void 0 ? false : _b, display = _a.display, value = _a.value, M = _a.M, theme = _a.theme, style = _a.style;
+    var onClick = _a.onClick, _b = _a.isSelected, isSelected = _b === void 0 ? false : _b, display = _a.display, value = _a.value, M = _a.M, theme = _a.theme, style = _a.style, onMouseDown = _a.onMouseDown;
     var _c = (0, react_1.useState)(isSelected), selected = _c[0], setSelected = _c[1];
     var handleOnClick = function () {
         setSelected(!selected);
@@ -54,7 +54,7 @@ function TagSelect(_a) {
         }
     }, [isSelected]);
     var size = M ? 'M' : 'S';
-    return (react_1.default.createElement(index_styled_1.StyledTagSelect, { theme: theme, onClick: handleOnClick, selected: selected, size: size, style: style },
+    return (react_1.default.createElement(index_styled_1.StyledTagSelect, { theme: theme, onClick: onMouseDown ? function () { return null; } : handleOnClick, selected: selected, size: size, style: style, onMouseDown: onMouseDown },
         react_1.default.createElement(Typo_1.SANS_3, { semibold: true }, display)));
 }
 exports.TagSelect = TagSelect;

package/dist/index.d.ts

@@ -12,3 +12,4 @@ export * from "./components/Wrappers";
 export * from "./themes/mixins";
 export { colors } from "./themes";
 export { phosphorIcons } from "./icons";
+export { Section } from "./components/Section";

package/dist/index.js

@@ -10,7 +10,7 @@ var __exportStar = (this && this.__exportStar) || function(m, exports) {
     for (var p in m) if (p !== "default" && !Object.prototype.hasOwnProperty.call(exports, p)) __createBinding(exports, m, p);
 };
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.phosphorIcons = exports.colors = exports.GlobalStyles = void 0;
+exports.Section = exports.phosphorIcons = exports.colors = exports.GlobalStyles = void 0;
 var globalStyles_1 = require("./globalStyles");
 Object.defineProperty(exports, "GlobalStyles", { enumerable: true, get: function () { return globalStyles_1.GlobalStyles; } });
 __exportStar(require("./components/Typo"), exports);
@@ -27,4 +27,6 @@ __exportStar(require("./components/InlineAlert"), exports);
 __exportStar(require("./components/TextInputs"), exports);
 __exportStar(require("./components/Container"), exports);
 __exportStar(require("./components/Wrappers"), exports);
+var Section_1 = require("./components/Section");
+Object.defineProperty(exports, "Section", { enumerable: true, get: function () { return Section_1.Section; } });
 __exportStar(require("./themes/mixins"), exports);

package/package.json

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