@beequip/hexagon 0.16.0-0 → 0.16.0-1

package/dist/assets/icons/InfoCircle.d.ts

@@ -1,3 +1,3 @@
 /// <reference types="react" />
 import { IconProps } from '../../theme/types';
-export declare const InfoCircle: ({ width, ...rest }: IconProps) => JSX.Element;
+export declare const InfoCircle: ({ width, color, text, id, ...rest }: IconProps) => JSX.Element;

package/dist/assets/icons/InfoCircle.js

@@ -4,11 +4,10 @@ exports.InfoCircle = void 0;
 var tslib_1 = require("tslib");
 var React = require("react");
 var InfoCircle = function (_a) {
-    var _b = _a.width, width = _b === void 0 ? '100%' : _b, rest = tslib_1.__rest(_a, ["width"]);
-    return (React.createElement("svg", tslib_1.__assign({ width: width, height: "100%", viewBox: "0 0 24 24", fill: "currentColor", xmlns: "http://www.w3.org/2000/svg" }, rest),
-        React.createElement("path", { d: "M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z" }),
-        React.createElement("path", { d: "M11 11h2v6h-2zm0-4h2v2h-2z" }),
-        ' '));
+    var _b = _a.width, width = _b === void 0 ? 21 : _b, color = _a.color, text = _a.text, id = _a.id, rest = tslib_1.__rest(_a, ["width", "color", "text", "id"]);
+    return (React.createElement("svg", tslib_1.__assign({ width: width, height: "100%", viewBox: "0 0 24 24", fill: "currentColor", focusable: "false", role: "img", xmlns: "http://www.w3.org/2000/svg", "data-tip": text, "data-for": id }, rest),
+        React.createElement("path", { fill: color || 'currentColor', d: "M12 2C6.486 2 2 6.486 2 12s4.486 10 10 10 10-4.486 10-10S17.514 2 12 2zm0 18c-4.411 0-8-3.589-8-8s3.589-8 8-8 8 3.589 8 8-3.589 8-8 8z" }),
+        React.createElement("path", { fill: color || 'currentColor', d: "M11 11h2v6h-2zm0-4h2v2h-2z" })));
 };
 exports.InfoCircle = InfoCircle;
 //# sourceMappingURL=InfoCircle.js.map

package/dist/assets/icons/InfoCircle.js.map

@@ -1 +1 @@
-{"version":3,"file":"InfoCircle.js","sourceRoot":"","sources":["../../../src/assets/icons/InfoCircle.tsx"],"names":[],"mappings":";;;;AAAA,6BAA8B;AAGvB,IAAM,UAAU,GAAG,UAAC,EAAsC;IAApC,IAAA,aAAc,EAAd,KAAK,mBAAG,MAAM,KAAA,EAAK,IAAI,sBAAzB,SAA2B,CAAF;IAAkB,OAAA,CAClE,8CACI,KAAK,EAAE,KAAK,EACZ,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,cAAc,EACnB,KAAK,EAAC,4BAA4B,IAC9B,IAAI;QAER,8BAAM,CAAC,EAAC,wIAAwI,GAAG;QACnJ,8BAAM,CAAC,EAAC,4BAA4B,GAAG;QAAC,GAAG,CACzC,CACT,CAAA;CAAA,CAAA;AAZY,QAAA,UAAU,cAYtB"}
+{"version":3,"file":"InfoCircle.js","sourceRoot":"","sources":["../../../src/assets/icons/InfoCircle.tsx"],"names":[],"mappings":";;;;AAAA,6BAA8B;AAGvB,IAAM,UAAU,GAAG,UAAC,EAMf;IALR,IAAA,aAAU,EAAV,KAAK,mBAAG,EAAE,KAAA,EACV,KAAK,WAAA,EACL,IAAI,UAAA,EACJ,EAAE,QAAA,EACC,IAAI,sBALgB,gCAM1B,CADU;IACM,OAAA,CACb,8CACI,KAAK,EAAE,KAAK,EACZ,MAAM,EAAC,MAAM,EACb,OAAO,EAAC,WAAW,EACnB,IAAI,EAAC,cAAc,EACnB,SAAS,EAAC,OAAO,EACjB,IAAI,EAAC,KAAK,EACV,KAAK,EAAC,4BAA4B,cACxB,IAAI,cACJ,EAAE,IACR,IAAI;QAER,8BACI,IAAI,EAAE,KAAK,IAAI,cAAc,EAC7B,CAAC,EAAC,wIAAwI,GACtI;QACR,8BACI,IAAI,EAAE,KAAK,IAAI,cAAc,EAC7B,CAAC,EAAC,4BAA4B,GAC1B,CACN,CACT,CAAA;CAAA,CAAA;AA5BY,QAAA,UAAU,cA4BtB"}

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

@@ -0,0 +1,9 @@
+import * as React from 'react';
+export interface TooltipProps {
+    color?: string;
+    width?: number | string;
+    text: string;
+    style?: React.CSSProperties;
+    id?: string;
+}
+export declare const Tooltip: React.FC<TooltipProps>;

package/dist/components/Tooltip/index.js

@@ -0,0 +1,15 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Tooltip = void 0;
+var tslib_1 = require("tslib");
+var React = require("react");
+var styles_1 = require("./styles");
+var InfoCircle_1 = require("../../assets/icons/InfoCircle");
+var Tooltip = function (_a) {
+    var id = _a.id, text = _a.text, color = _a.color, width = _a.width, style = _a.style, rest = tslib_1.__rest(_a, ["id", "text", "color", "width", "style"]);
+    return (React.createElement(styles_1.StyledContainer, tslib_1.__assign({}, rest),
+        React.createElement(styles_1.StyledTooltip, { "data-multiline": true, id: id }),
+        React.createElement(InfoCircle_1.InfoCircle, { style: style, "data-tip": text, id: id, color: color, width: width })));
+};
+exports.Tooltip = Tooltip;
+//# sourceMappingURL=index.js.map

package/dist/components/Tooltip/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/components/Tooltip/index.tsx"],"names":[],"mappings":";;;;AAAA,6BAA8B;AAC9B,mCAAyD;AACzD,4DAA0D;AAUnD,IAAM,OAAO,GAA2B,UAAC,EAO/C;IANG,IAAA,EAAE,QAAA,EACF,IAAI,UAAA,EACJ,KAAK,WAAA,EACL,KAAK,WAAA,EACL,KAAK,WAAA,EACF,IAAI,sBANqC,yCAO/C,CADU;IACL,OAAA,CACF,oBAAC,wBAAe,uBAAK,IAAI;QACrB,oBAAC,sBAAa,sBAAiB,IAAI,EAAE,EAAE,EAAE,EAAE,GAAI;QAC/C,oBAAC,uBAAU,IACP,KAAK,EAAE,KAAK,cACF,IAAI,EACd,EAAE,EAAE,EAAE,EACN,KAAK,EAAE,KAAK,EACZ,KAAK,EAAE,KAAK,GACd,CACY,CACrB,CAAA;CAAA,CAAA;AAlBY,QAAA,OAAO,WAkBnB"}

package/dist/components/Tooltip/index.stories.d.ts

@@ -0,0 +1,5 @@
+import { Meta, Story } from '@storybook/react/types-6-0';
+import { TooltipProps } from '.';
+declare const _default: Meta<import("@storybook/react/types-6-0").Args>;
+export default _default;
+export declare const Default: Story<TooltipProps>;

package/dist/components/Tooltip/index.stories.js

@@ -0,0 +1,17 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Default = void 0;
+var tslib_1 = require("tslib");
+var react_1 = require("react");
+var _1 = require(".");
+exports.default = {
+    title: 'Hexagon/Tooltip',
+    component: _1.Tooltip,
+    decorators: [function (Story) { return react_1.default.createElement(Story, null); }],
+};
+var Template = function (_a) {
+    var args = tslib_1.__rest(_a, []);
+    return react_1.default.createElement(_1.Tooltip, tslib_1.__assign({}, args));
+};
+exports.Default = Template.bind({});
+//# sourceMappingURL=index.stories.js.map

package/dist/components/Tooltip/index.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.stories.js","sourceRoot":"","sources":["../../../src/components/Tooltip/index.stories.tsx"],"names":[],"mappings":";;;;AACA,+BAAyB;AACzB,sBAAyC;AAEzC,kBAAe;IACX,KAAK,EAAE,iBAAiB;IACxB,SAAS,EAAE,UAAO;IAClB,UAAU,EAAE,CAAC,UAAA,KAAK,IAAI,OAAA,8BAAC,KAAK,OAAG,EAAT,CAAS,CAAC;CAC3B,CAAA;AAET,IAAM,QAAQ,GAAwB,UAAC,EAAW;QAAN,IAAI,sBAAT,EAAW,CAAF;IAC5C,OAAO,8BAAC,UAAO,uBAAK,IAAI,EAAI,CAAA;AAChC,CAAC,CAAA;AAEY,QAAA,OAAO,GAAG,QAAQ,CAAC,IAAI,CAAC,EAAE,CAAC,CAAA"}

package/dist/components/Tooltip/styles.d.ts

@@ -0,0 +1,3 @@
+import ReactTooltip from 'react-tooltip';
+export declare const StyledTooltip: import("styled-components").StyledComponent<typeof ReactTooltip, any, {}, never>;
+export declare const StyledContainer: import("styled-components").StyledComponent<"div", any, {}, never>;

package/dist/components/Tooltip/styles.js

@@ -0,0 +1,10 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.StyledContainer = exports.StyledTooltip = void 0;
+var tslib_1 = require("tslib");
+var react_tooltip_1 = require("react-tooltip");
+var styled_components_1 = require("styled-components");
+exports.StyledTooltip = styled_components_1.default(react_tooltip_1.default)(templateObject_1 || (templateObject_1 = tslib_1.__makeTemplateObject(["\n    max-width: 250px;\n    line-height: 1.3;\n    font-size: 12px !important;\n    font-weight: normal !important;\n\n    * {\n        text-align: left !important;\n    }\n"], ["\n    max-width: 250px;\n    line-height: 1.3;\n    font-size: 12px !important;\n    font-weight: normal !important;\n\n    * {\n        text-align: left !important;\n    }\n"])));
+exports.StyledContainer = styled_components_1.default.div(templateObject_2 || (templateObject_2 = tslib_1.__makeTemplateObject(["\n    display: inline-flex;\n    font-family: ", ";\n"], ["\n    display: inline-flex;\n    font-family: ", ";\n"])), function (props) { return props.theme.font.default; });
+var templateObject_1, templateObject_2;
+//# sourceMappingURL=styles.js.map

package/dist/components/Tooltip/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/components/Tooltip/styles.ts"],"names":[],"mappings":";;;;AAAA,+CAAwC;AACxC,uDAAsC;AAEzB,QAAA,aAAa,GAAG,2BAAM,CAAC,uBAAY,CAAC,2PAAA,gLAShD,KAAA;AAEY,QAAA,eAAe,GAAG,2BAAM,CAAC,GAAG,kIAAA,gDAEtB,EAAiC,KACnD,KADkB,UAAA,KAAK,IAAI,OAAA,KAAK,CAAC,KAAK,CAAC,IAAI,CAAC,OAAO,EAAxB,CAAwB,EACnD"}

package/dist/index.d.ts

@@ -40,4 +40,5 @@ export { Tag } from './components/Tag';
 export { Text } from './components/Text';
 export { TextArea } from './components/TextArea';
 export { ToggleContainer } from './components/ToggleContainer';
+export { Tooltip } from './components/Tooltip';
 export * from './theme';

package/dist/index.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ToggleContainer = exports.TextArea = exports.Text = exports.Tag = exports.Table = exports.Row = exports.Head = exports.Foot = exports.Cell = exports.Body = exports.Spinner = exports.Select = exports.RadioGroup = exports.Radio = exports.Portal = exports.PageLoader = exports.OrderedList = exports.Notification = exports.NavLink = exports.Modal = exports.ListItem = exports.List = exports.Link = exports.Label = exports.CurrencyInput = exports.Input = exports.Image = exports.HelpText = exports.Heading = exports.GridColumn = exports.Grid = exports.Form = exports.FieldGroup = exports.FieldError = exports.Field = exports.Error = exports.ExternalLink = exports.CounterTag = exports.Container = exports.Checkbox = exports.Card = exports.ButtonGroup = exports.Button = exports.Box = exports.Badge = exports.AutocompleteItem = exports.Autocomplete = void 0;
+exports.Tooltip = exports.ToggleContainer = exports.TextArea = exports.Text = exports.Tag = exports.Table = exports.Row = exports.Head = exports.Foot = exports.Cell = exports.Body = exports.Spinner = exports.Select = exports.RadioGroup = exports.Radio = exports.Portal = exports.PageLoader = exports.OrderedList = exports.Notification = exports.NavLink = exports.Modal = exports.ListItem = exports.List = exports.Link = exports.Label = exports.CurrencyInput = exports.Input = exports.Image = exports.HelpText = exports.Heading = exports.GridColumn = exports.Grid = exports.Form = exports.FieldGroup = exports.FieldError = exports.Field = exports.Error = exports.ExternalLink = exports.CounterTag = exports.Container = exports.Checkbox = exports.Card = exports.ButtonGroup = exports.Button = exports.Box = exports.Badge = exports.AutocompleteItem = exports.Autocomplete = void 0;
 var tslib_1 = require("tslib");
 var Autocomplete_1 = require("./components/Autocomplete");
 Object.defineProperty(exports, "Autocomplete", { enumerable: true, get: function () { return Autocomplete_1.Autocomplete; } });
@@ -91,5 +91,7 @@ var TextArea_1 = require("./components/TextArea");
 Object.defineProperty(exports, "TextArea", { enumerable: true, get: function () { return TextArea_1.TextArea; } });
 var ToggleContainer_1 = require("./components/ToggleContainer");
 Object.defineProperty(exports, "ToggleContainer", { enumerable: true, get: function () { return ToggleContainer_1.ToggleContainer; } });
+var Tooltip_1 = require("./components/Tooltip");
+Object.defineProperty(exports, "Tooltip", { enumerable: true, get: function () { return Tooltip_1.Tooltip; } });
 tslib_1.__exportStar(require("./theme"), exports);
 //# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;AAAA,0DAAwD;AAA/C,4GAAA,YAAY,OAAA;AACrB,uDAAiE;AAAxD,wGAAA,gBAAgB,OAAA;AACzB,4CAA0C;AAAjC,8FAAA,KAAK,OAAA;AACd,wCAAsC;AAA7B,0FAAA,GAAG,OAAA;AACZ,8CAA4C;AAAnC,gGAAA,MAAM,OAAA;AACf,wDAAsD;AAA7C,0GAAA,WAAW,OAAA;AACpB,0CAAwC;AAA/B,4FAAA,IAAI,OAAA;AACb,kDAAgD;AAAvC,oGAAA,QAAQ,OAAA;AACjB,oDAAkD;AAAzC,sGAAA,SAAS,OAAA;AAClB,sDAAoD;AAA3C,wGAAA,UAAU,OAAA;AACnB,0DAAwD;AAA/C,4GAAA,YAAY,OAAA;AACrB,4CAA0C;AAAjC,8FAAA,KAAK,OAAA;AACd,4CAA0C;AAAjC,8FAAA,KAAK,OAAA;AACd,sDAAoD;AAA3C,wGAAA,UAAU,OAAA;AACnB,sDAAoD;AAA3C,wGAAA,UAAU,OAAA;AACnB,0CAAwC;AAA/B,4FAAA,IAAI,OAAA;AACb,0CAAwC;AAA/B,4FAAA,IAAI,OAAA;AACb,sDAAoD;AAA3C,wGAAA,UAAU,OAAA;AACnB,gDAA8C;AAArC,kGAAA,OAAO,OAAA;AAChB,kDAAgD;AAAvC,oGAAA,QAAQ,OAAA;AACjB,4CAA0C;AAAjC,8FAAA,KAAK,OAAA;AACd,4CAA0C;AAAjC,8FAAA,KAAK,OAAA;AACd,kEAAgE;AAAvD,8GAAA,aAAa,OAAA;AACtB,4CAA0C;AAAjC,8FAAA,KAAK,OAAA;AACd,0CAAwC;AAA/B,4FAAA,IAAI,OAAA;AACb,0CAAwC;AAA/B,4FAAA,IAAI,OAAA;AACb,kDAAgD;AAAvC,oGAAA,QAAQ,OAAA;AACjB,4CAA0C;AAAjC,8FAAA,KAAK,OAAA;AACd,gDAA8C;AAArC,kGAAA,OAAO,OAAA;AAChB,0DAAwD;AAA/C,4GAAA,YAAY,OAAA;AACrB,6DAA2D;AAAlD,0GAAA,WAAW,OAAA;AACpB,sDAAoD;AAA3C,wGAAA,UAAU,OAAA;AACnB,8CAA4C;AAAnC,gGAAA,MAAM,OAAA;AACf,4CAA0C;AAAjC,8FAAA,KAAK,OAAA;AACd,sDAAoD;AAA3C,wGAAA,UAAU,OAAA;AACnB,8CAA4C;AAAnC,gGAAA,MAAM,OAAA;AACf,gDAA8C;AAArC,kGAAA,OAAO,OAAA;AAChB,4CAAuE;AAA9D,6FAAA,IAAI,OAAA;AAAE,6FAAA,IAAI,OAAA;AAAE,6FAAA,IAAI,OAAA;AAAE,6FAAA,IAAI,OAAA;AAAE,4FAAA,GAAG,OAAA;AAAE,8FAAA,KAAK,OAAA;AAC3C,wCAAsC;AAA7B,0FAAA,GAAG,OAAA;AACZ,0CAAwC;AAA/B,4FAAA,IAAI,OAAA;AACb,kDAAgD;AAAvC,oGAAA,QAAQ,OAAA;AACjB,gEAA8D;AAArD,kHAAA,eAAe,OAAA;AACxB,kDAAuB"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":";;;;AAAA,0DAAwD;AAA/C,4GAAA,YAAY,OAAA;AACrB,uDAAiE;AAAxD,wGAAA,gBAAgB,OAAA;AACzB,4CAA0C;AAAjC,8FAAA,KAAK,OAAA;AACd,wCAAsC;AAA7B,0FAAA,GAAG,OAAA;AACZ,8CAA4C;AAAnC,gGAAA,MAAM,OAAA;AACf,wDAAsD;AAA7C,0GAAA,WAAW,OAAA;AACpB,0CAAwC;AAA/B,4FAAA,IAAI,OAAA;AACb,kDAAgD;AAAvC,oGAAA,QAAQ,OAAA;AACjB,oDAAkD;AAAzC,sGAAA,SAAS,OAAA;AAClB,sDAAoD;AAA3C,wGAAA,UAAU,OAAA;AACnB,0DAAwD;AAA/C,4GAAA,YAAY,OAAA;AACrB,4CAA0C;AAAjC,8FAAA,KAAK,OAAA;AACd,4CAA0C;AAAjC,8FAAA,KAAK,OAAA;AACd,sDAAoD;AAA3C,wGAAA,UAAU,OAAA;AACnB,sDAAoD;AAA3C,wGAAA,UAAU,OAAA;AACnB,0CAAwC;AAA/B,4FAAA,IAAI,OAAA;AACb,0CAAwC;AAA/B,4FAAA,IAAI,OAAA;AACb,sDAAoD;AAA3C,wGAAA,UAAU,OAAA;AACnB,gDAA8C;AAArC,kGAAA,OAAO,OAAA;AAChB,kDAAgD;AAAvC,oGAAA,QAAQ,OAAA;AACjB,4CAA0C;AAAjC,8FAAA,KAAK,OAAA;AACd,4CAA0C;AAAjC,8FAAA,KAAK,OAAA;AACd,kEAAgE;AAAvD,8GAAA,aAAa,OAAA;AACtB,4CAA0C;AAAjC,8FAAA,KAAK,OAAA;AACd,0CAAwC;AAA/B,4FAAA,IAAI,OAAA;AACb,0CAAwC;AAA/B,4FAAA,IAAI,OAAA;AACb,kDAAgD;AAAvC,oGAAA,QAAQ,OAAA;AACjB,4CAA0C;AAAjC,8FAAA,KAAK,OAAA;AACd,gDAA8C;AAArC,kGAAA,OAAO,OAAA;AAChB,0DAAwD;AAA/C,4GAAA,YAAY,OAAA;AACrB,6DAA2D;AAAlD,0GAAA,WAAW,OAAA;AACpB,sDAAoD;AAA3C,wGAAA,UAAU,OAAA;AACnB,8CAA4C;AAAnC,gGAAA,MAAM,OAAA;AACf,4CAA0C;AAAjC,8FAAA,KAAK,OAAA;AACd,sDAAoD;AAA3C,wGAAA,UAAU,OAAA;AACnB,8CAA4C;AAAnC,gGAAA,MAAM,OAAA;AACf,gDAA8C;AAArC,kGAAA,OAAO,OAAA;AAChB,4CAAuE;AAA9D,6FAAA,IAAI,OAAA;AAAE,6FAAA,IAAI,OAAA;AAAE,6FAAA,IAAI,OAAA;AAAE,6FAAA,IAAI,OAAA;AAAE,4FAAA,GAAG,OAAA;AAAE,8FAAA,KAAK,OAAA;AAC3C,wCAAsC;AAA7B,0FAAA,GAAG,OAAA;AACZ,0CAAwC;AAA/B,4FAAA,IAAI,OAAA;AACb,kDAAgD;AAAvC,oGAAA,QAAQ,OAAA;AACjB,gEAA8D;AAArD,kHAAA,eAAe,OAAA;AACxB,gDAA8C;AAArC,kGAAA,OAAO,OAAA;AAChB,kDAAuB"}

package/dist/theme/types.d.ts

@@ -33,8 +33,11 @@ export declare const SIZE_MEDIUM = "medium";
 export declare const SIZE_LARGE = "large";
 export declare type ButtonSize = typeof SIZE_SMALL | typeof SIZE_MEDIUM | typeof SIZE_LARGE;
 export interface IconProps {
-    width?: number | string;
+    id?: string;
     color?: string;
+    width?: number | string;
+    text?: string;
+    style?: React.CSSProperties;
 }
 export interface Tooltip {
     content: React.ReactNode;

package/package.json

@@ -1,6 +1,6 @@
 {
     "name": "@beequip/hexagon",
-    "version": "0.16.0-0",
+    "version": "0.16.0-1",
     "description": "Component library for BEEQUIP",
     "main": "dist/index.js",
     "files": [