@elliemae/ds-chat-floating-button 3.6.0-next.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/cjs/FloatingButton.js +55 -0
- package/dist/cjs/FloatingButton.js.map +7 -0
- package/dist/cjs/index.js +34 -0
- package/dist/cjs/index.js.map +7 -0
- package/dist/cjs/react-desc-prop-types.js +43 -0
- package/dist/cjs/react-desc-prop-types.js.map +7 -0
- package/dist/cjs/styled.js +71 -0
- package/dist/cjs/styled.js.map +7 -0
- package/dist/esm/FloatingButton.js +29 -0
- package/dist/esm/FloatingButton.js.map +7 -0
- package/dist/esm/index.js +7 -0
- package/dist/esm/index.js.map +7 -0
- package/dist/esm/react-desc-prop-types.js +17 -0
- package/dist/esm/react-desc-prop-types.js.map +7 -0
- package/dist/esm/styled.js +45 -0
- package/dist/esm/styled.js.map +7 -0
- package/package.json +76 -0
|
@@ -0,0 +1,55 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
24
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
25
|
+
var FloatingButton_exports = {};
|
|
26
|
+
__export(FloatingButton_exports, {
|
|
27
|
+
FloatingButton: () => FloatingButton,
|
|
28
|
+
FloatingButtonWithSchema: () => FloatingButtonWithSchema
|
|
29
|
+
});
|
|
30
|
+
module.exports = __toCommonJS(FloatingButton_exports);
|
|
31
|
+
var React = __toESM(require("react"));
|
|
32
|
+
var import_jsx_runtime = require("react/jsx-runtime");
|
|
33
|
+
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
34
|
+
var import_ds_icons = require("@elliemae/ds-icons");
|
|
35
|
+
var import_styled = require("./styled");
|
|
36
|
+
var import_react_desc_prop_types = require("./react-desc-prop-types");
|
|
37
|
+
const FloatingButton = (props) => {
|
|
38
|
+
const propsWithDefault = (0, import_ds_utilities.useMemoMergePropsWithDefault)(props, import_react_desc_prop_types.defaultFloatingButton);
|
|
39
|
+
(0, import_ds_utilities.useValidateTypescriptPropTypes)(propsWithDefault, import_react_desc_prop_types.propsFloatingButton);
|
|
40
|
+
const { onFocus, innerRef, onClick } = propsWithDefault;
|
|
41
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_styled.StyledFloatingButton, {
|
|
42
|
+
onFocus,
|
|
43
|
+
ref: innerRef,
|
|
44
|
+
"data-testid": "chat-floating-button",
|
|
45
|
+
onClick,
|
|
46
|
+
children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_ds_icons.Comments, {
|
|
47
|
+
size: "l"
|
|
48
|
+
})
|
|
49
|
+
});
|
|
50
|
+
};
|
|
51
|
+
FloatingButton.propTypes = import_react_desc_prop_types.propsFloatingButton;
|
|
52
|
+
FloatingButton.displayName = "FloatingButton";
|
|
53
|
+
const FloatingButtonWithSchema = (0, import_ds_utilities.describe)(FloatingButton);
|
|
54
|
+
FloatingButtonWithSchema.propTypes = import_react_desc_prop_types.propsFloatingButton;
|
|
55
|
+
//# sourceMappingURL=FloatingButton.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/FloatingButton.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import React, { WeakValidationMap } from 'react';\nimport { describe, useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\n\nimport { Comments } from '@elliemae/ds-icons';\nimport { StyledFloatingButton } from './styled';\nimport { defaultFloatingButton, propsFloatingButton, FloatingButtonProps } from './react-desc-prop-types';\n\nconst FloatingButton: React.ComponentType<FloatingButtonProps> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault(props, defaultFloatingButton);\n useValidateTypescriptPropTypes(propsWithDefault, propsFloatingButton);\n const { onFocus, innerRef, onClick } = propsWithDefault;\n return (\n <StyledFloatingButton onFocus={onFocus} ref={innerRef} data-testid=\"chat-floating-button\" onClick={onClick}>\n <Comments size=\"l\" />\n </StyledFloatingButton>\n );\n};\n\nFloatingButton.propTypes = propsFloatingButton as WeakValidationMap<unknown>;\nFloatingButton.displayName = 'FloatingButton';\nconst FloatingButtonWithSchema = describe(FloatingButton);\nFloatingButtonWithSchema.propTypes = propsFloatingButton as WeakValidationMap<unknown>;\n\nexport { FloatingButton, FloatingButtonWithSchema };\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB;AACA,0BAAuF;AAEvF,sBAAyB;AACzB,oBAAqC;AACrC,mCAAgF;AAEhF,MAAM,iBAA2D,CAAC,UAAU;AAC1E,QAAM,uBAAmB,kDAA6B,OAAO,kDAAqB;AAClF,0DAA+B,kBAAkB,gDAAmB;AACpE,QAAM,EAAE,SAAS,UAAU,QAAQ,IAAI;AACvC,SACE,4CAAC;AAAA,IAAqB;AAAA,IAAkB,KAAK;AAAA,IAAU,eAAY;AAAA,IAAuB;AAAA,IACxF,sDAAC;AAAA,MAAS,MAAK;AAAA,KAAI;AAAA,GACrB;AAEJ;AAEA,eAAe,YAAY;AAC3B,eAAe,cAAc;AAC7B,MAAM,+BAA2B,8BAAS,cAAc;AACxD,yBAAyB,YAAY;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,34 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __reExport = (target, mod, secondTarget) => (__copyProps(target, mod, "default"), secondTarget && __copyProps(secondTarget, mod, "default"));
|
|
21
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
22
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
23
|
+
mod
|
|
24
|
+
));
|
|
25
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
26
|
+
var src_exports = {};
|
|
27
|
+
__export(src_exports, {
|
|
28
|
+
StyledFloatingContainer: () => import_styled.StyledFloatingContainer
|
|
29
|
+
});
|
|
30
|
+
module.exports = __toCommonJS(src_exports);
|
|
31
|
+
var React = __toESM(require("react"));
|
|
32
|
+
__reExport(src_exports, require("./FloatingButton"), module.exports);
|
|
33
|
+
var import_styled = require("./styled");
|
|
34
|
+
//# sourceMappingURL=index.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/index.ts", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["export * from './FloatingButton';\nexport { StyledFloatingContainer } from './styled';\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,wBAAc,6BAAd;AACA,oBAAwC;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
24
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
25
|
+
var react_desc_prop_types_exports = {};
|
|
26
|
+
__export(react_desc_prop_types_exports, {
|
|
27
|
+
defaultFloatingButton: () => defaultFloatingButton,
|
|
28
|
+
propsFloatingButton: () => propsFloatingButton
|
|
29
|
+
});
|
|
30
|
+
module.exports = __toCommonJS(react_desc_prop_types_exports);
|
|
31
|
+
var React = __toESM(require("react"));
|
|
32
|
+
var import_ds_utilities = require("@elliemae/ds-utilities");
|
|
33
|
+
var import_lodash = require("lodash");
|
|
34
|
+
const defaultFloatingButton = {
|
|
35
|
+
onClick: import_lodash.noop,
|
|
36
|
+
onFocus: import_lodash.noop
|
|
37
|
+
};
|
|
38
|
+
const propsFloatingButton = {
|
|
39
|
+
onClick: import_ds_utilities.PropTypes.func.description("The function to call when the chat is opened via the footer").defaultValue(defaultFloatingButton.onClick),
|
|
40
|
+
onFocus: import_ds_utilities.PropTypes.func.description("The function to call when button is being focused").defaultValue(defaultFloatingButton.onFocus),
|
|
41
|
+
innerRef: import_ds_utilities.PropTypes.object.description("Ref to the component container").defaultValue(null)
|
|
42
|
+
};
|
|
43
|
+
//# sourceMappingURL=react-desc-prop-types.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/react-desc-prop-types.ts", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import { PropTypes } from '@elliemae/ds-utilities';\nimport { noop } from 'lodash';\nimport React from 'react';\n\nexport interface FloatingButtonProps {\n onClick: () => void;\n onFocus: () => void;\n innerRef: React.RefObject<HTMLButtonElement>;\n}\n\nexport const defaultFloatingButton: Partial<FloatingButtonProps> = {\n onClick: noop,\n onFocus: noop,\n};\n\nexport const propsFloatingButton = {\n onClick: PropTypes.func\n .description('The function to call when the chat is opened via the footer')\n .defaultValue(defaultFloatingButton.onClick),\n onFocus: PropTypes.func\n .description('The function to call when button is being focused')\n .defaultValue(defaultFloatingButton.onFocus),\n innerRef: PropTypes.object.description('Ref to the component container').defaultValue(null),\n};\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,0BAA0B;AAC1B,oBAAqB;AASd,MAAM,wBAAsD;AAAA,EACjE,SAAS;AAAA,EACT,SAAS;AACX;AAEO,MAAM,sBAAsB;AAAA,EACjC,SAAS,8BAAU,KAChB,YAAY,6DAA6D,EACzE,aAAa,sBAAsB,OAAO;AAAA,EAC7C,SAAS,8BAAU,KAChB,YAAY,mDAAmD,EAC/D,aAAa,sBAAsB,OAAO;AAAA,EAC7C,UAAU,8BAAU,OAAO,YAAY,gCAAgC,EAAE,aAAa,IAAI;AAC5F;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,71 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
var __create = Object.create;
|
|
3
|
+
var __defProp = Object.defineProperty;
|
|
4
|
+
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
|
|
5
|
+
var __getOwnPropNames = Object.getOwnPropertyNames;
|
|
6
|
+
var __getProtoOf = Object.getPrototypeOf;
|
|
7
|
+
var __hasOwnProp = Object.prototype.hasOwnProperty;
|
|
8
|
+
var __export = (target, all) => {
|
|
9
|
+
for (var name in all)
|
|
10
|
+
__defProp(target, name, { get: all[name], enumerable: true });
|
|
11
|
+
};
|
|
12
|
+
var __copyProps = (to, from, except, desc) => {
|
|
13
|
+
if (from && typeof from === "object" || typeof from === "function") {
|
|
14
|
+
for (let key of __getOwnPropNames(from))
|
|
15
|
+
if (!__hasOwnProp.call(to, key) && key !== except)
|
|
16
|
+
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
|
|
17
|
+
}
|
|
18
|
+
return to;
|
|
19
|
+
};
|
|
20
|
+
var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
|
|
21
|
+
isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
|
|
22
|
+
mod
|
|
23
|
+
));
|
|
24
|
+
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
|
|
25
|
+
var styled_exports = {};
|
|
26
|
+
__export(styled_exports, {
|
|
27
|
+
StyledFloatingButton: () => StyledFloatingButton,
|
|
28
|
+
StyledFloatingContainer: () => StyledFloatingContainer
|
|
29
|
+
});
|
|
30
|
+
module.exports = __toCommonJS(styled_exports);
|
|
31
|
+
var React = __toESM(require("react"));
|
|
32
|
+
var import_ds_system = require("@elliemae/ds-system");
|
|
33
|
+
var import_ds_grid = require("@elliemae/ds-grid");
|
|
34
|
+
const BUTTON_FLOATING = 56;
|
|
35
|
+
const BOX_SHADOW = "0 5px 8px 0 rgba(53,60,70,0.55)";
|
|
36
|
+
const BOX_SHADOW_FLOATING = "0 5px 8px 0 rgba(53,60,70,0.35)";
|
|
37
|
+
const StyledFloatingButton = import_ds_system.styled.button`
|
|
38
|
+
outline: none;
|
|
39
|
+
cursor: pointer;
|
|
40
|
+
height: ${BUTTON_FLOATING}px;
|
|
41
|
+
width: ${BUTTON_FLOATING}px;
|
|
42
|
+
border: none;
|
|
43
|
+
background: ${(props) => props.theme.colors.brand[600]};
|
|
44
|
+
border-radius: 50%;
|
|
45
|
+
box-shadow: ${BOX_SHADOW_FLOATING};
|
|
46
|
+
&:hover {
|
|
47
|
+
background: ${(props) => props.theme.colors.brand[700]};
|
|
48
|
+
}
|
|
49
|
+
&:focus {
|
|
50
|
+
border: 2px solid ${(props) => props.theme.colors.brand[700]};
|
|
51
|
+
box-shadow: inset 0 0 0 2px ${(props) => props.theme.colors.neutral["000"]}, ${BOX_SHADOW};
|
|
52
|
+
}
|
|
53
|
+
&:active {
|
|
54
|
+
background: ${(props) => props.theme.colors.brand[800]};
|
|
55
|
+
box-shadow: inset 0 0 0 0, ${BOX_SHADOW_FLOATING};
|
|
56
|
+
}
|
|
57
|
+
svg {
|
|
58
|
+
fill: ${(props) => props.theme.colors.neutral["000"]};
|
|
59
|
+
}
|
|
60
|
+
`;
|
|
61
|
+
const StyledFloatingContainer = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
62
|
+
position: fixed;
|
|
63
|
+
bottom: 24px;
|
|
64
|
+
right: 24px;
|
|
65
|
+
border-radius: 4px;
|
|
66
|
+
z-index: 1;
|
|
67
|
+
box-shadow: ${BOX_SHADOW};
|
|
68
|
+
background: ${(nestedProps) => nestedProps.theme.colors.neutral["050"]};
|
|
69
|
+
width: 348px;
|
|
70
|
+
`;
|
|
71
|
+
//# sourceMappingURL=styled.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../src/styled.ts", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
+
"sourcesContent": ["import { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\n\nconst BUTTON_FLOATING = 56;\nconst BOX_SHADOW = '0 5px 8px 0 rgba(53,60,70,0.55)';\nconst BOX_SHADOW_FLOATING = '0 5px 8px 0 rgba(53,60,70,0.35)';\n\nexport const StyledFloatingButton = styled.button`\n outline: none;\n cursor: pointer;\n height: ${BUTTON_FLOATING}px;\n width: ${BUTTON_FLOATING}px;\n border: none;\n background: ${(props) => props.theme.colors.brand[600]};\n border-radius: 50%;\n box-shadow: ${BOX_SHADOW_FLOATING};\n &:hover {\n background: ${(props) => props.theme.colors.brand[700]};\n }\n &:focus {\n border: 2px solid ${(props) => props.theme.colors.brand[700]};\n box-shadow: inset 0 0 0 2px ${(props) => props.theme.colors.neutral['000']}, ${BOX_SHADOW};\n }\n &:active {\n background: ${(props) => props.theme.colors.brand[800]};\n box-shadow: inset 0 0 0 0, ${BOX_SHADOW_FLOATING};\n }\n svg {\n fill: ${(props) => props.theme.colors.neutral['000']};\n }\n`;\n\n// Floating\nexport const StyledFloatingContainer = styled(Grid)`\n position: fixed;\n bottom: 24px;\n right: 24px;\n border-radius: 4px;\n z-index: 1;\n box-shadow: ${BOX_SHADOW};\n background: ${(nestedProps) => nestedProps.theme.colors.neutral['050']};\n width: 348px;\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADAvB,uBAAuB;AACvB,qBAAqB;AAErB,MAAM,kBAAkB;AACxB,MAAM,aAAa;AACnB,MAAM,sBAAsB;AAErB,MAAM,uBAAuB,wBAAO;AAAA;AAAA;AAAA,YAG/B;AAAA,WACD;AAAA;AAAA,gBAEK,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA,gBAEpC;AAAA;AAAA,kBAEE,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,wBAG9B,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA,kCAC1B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,WAAW;AAAA;AAAA;AAAA,kBAGjE,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA,iCACrB;AAAA;AAAA;AAAA,YAGrB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAK3C,MAAM,8BAA0B,yBAAO,mBAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAMlC;AAAA,gBACA,CAAC,gBAAgB,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { jsx } from "react/jsx-runtime";
|
|
3
|
+
import { describe, useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from "@elliemae/ds-utilities";
|
|
4
|
+
import { Comments } from "@elliemae/ds-icons";
|
|
5
|
+
import { StyledFloatingButton } from "./styled";
|
|
6
|
+
import { defaultFloatingButton, propsFloatingButton } from "./react-desc-prop-types";
|
|
7
|
+
const FloatingButton = (props) => {
|
|
8
|
+
const propsWithDefault = useMemoMergePropsWithDefault(props, defaultFloatingButton);
|
|
9
|
+
useValidateTypescriptPropTypes(propsWithDefault, propsFloatingButton);
|
|
10
|
+
const { onFocus, innerRef, onClick } = propsWithDefault;
|
|
11
|
+
return /* @__PURE__ */ jsx(StyledFloatingButton, {
|
|
12
|
+
onFocus,
|
|
13
|
+
ref: innerRef,
|
|
14
|
+
"data-testid": "chat-floating-button",
|
|
15
|
+
onClick,
|
|
16
|
+
children: /* @__PURE__ */ jsx(Comments, {
|
|
17
|
+
size: "l"
|
|
18
|
+
})
|
|
19
|
+
});
|
|
20
|
+
};
|
|
21
|
+
FloatingButton.propTypes = propsFloatingButton;
|
|
22
|
+
FloatingButton.displayName = "FloatingButton";
|
|
23
|
+
const FloatingButtonWithSchema = describe(FloatingButton);
|
|
24
|
+
FloatingButtonWithSchema.propTypes = propsFloatingButton;
|
|
25
|
+
export {
|
|
26
|
+
FloatingButton,
|
|
27
|
+
FloatingButtonWithSchema
|
|
28
|
+
};
|
|
29
|
+
//# sourceMappingURL=FloatingButton.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/FloatingButton.tsx"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import React, { WeakValidationMap } from 'react';\nimport { describe, useValidateTypescriptPropTypes, useMemoMergePropsWithDefault } from '@elliemae/ds-utilities';\n\nimport { Comments } from '@elliemae/ds-icons';\nimport { StyledFloatingButton } from './styled';\nimport { defaultFloatingButton, propsFloatingButton, FloatingButtonProps } from './react-desc-prop-types';\n\nconst FloatingButton: React.ComponentType<FloatingButtonProps> = (props) => {\n const propsWithDefault = useMemoMergePropsWithDefault(props, defaultFloatingButton);\n useValidateTypescriptPropTypes(propsWithDefault, propsFloatingButton);\n const { onFocus, innerRef, onClick } = propsWithDefault;\n return (\n <StyledFloatingButton onFocus={onFocus} ref={innerRef} data-testid=\"chat-floating-button\" onClick={onClick}>\n <Comments size=\"l\" />\n </StyledFloatingButton>\n );\n};\n\nFloatingButton.propTypes = propsFloatingButton as WeakValidationMap<unknown>;\nFloatingButton.displayName = 'FloatingButton';\nconst FloatingButtonWithSchema = describe(FloatingButton);\nFloatingButtonWithSchema.propTypes = propsFloatingButton as WeakValidationMap<unknown>;\n\nexport { FloatingButton, FloatingButtonWithSchema };\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB;AACA,SAAS,UAAU,gCAAgC,oCAAoC;AAEvF,SAAS,gBAAgB;AACzB,SAAS,4BAA4B;AACrC,SAAS,uBAAuB,2BAAgD;AAEhF,MAAM,iBAA2D,CAAC,UAAU;AAC1E,QAAM,mBAAmB,6BAA6B,OAAO,qBAAqB;AAClF,iCAA+B,kBAAkB,mBAAmB;AACpE,QAAM,EAAE,SAAS,UAAU,QAAQ,IAAI;AACvC,SACE,oBAAC;AAAA,IAAqB;AAAA,IAAkB,KAAK;AAAA,IAAU,eAAY;AAAA,IAAuB;AAAA,IACxF,8BAAC;AAAA,MAAS,MAAK;AAAA,KAAI;AAAA,GACrB;AAEJ;AAEA,eAAe,YAAY;AAC3B,eAAe,cAAc;AAC7B,MAAM,2BAA2B,SAAS,cAAc;AACxD,yBAAyB,YAAY;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/index.ts"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "export * from './FloatingButton';\nexport { StyledFloatingContainer } from './styled';\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,cAAc;AACd,SAAS,+BAA+B;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,17 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { PropTypes } from "@elliemae/ds-utilities";
|
|
3
|
+
import { noop } from "lodash";
|
|
4
|
+
const defaultFloatingButton = {
|
|
5
|
+
onClick: noop,
|
|
6
|
+
onFocus: noop
|
|
7
|
+
};
|
|
8
|
+
const propsFloatingButton = {
|
|
9
|
+
onClick: PropTypes.func.description("The function to call when the chat is opened via the footer").defaultValue(defaultFloatingButton.onClick),
|
|
10
|
+
onFocus: PropTypes.func.description("The function to call when button is being focused").defaultValue(defaultFloatingButton.onFocus),
|
|
11
|
+
innerRef: PropTypes.object.description("Ref to the component container").defaultValue(null)
|
|
12
|
+
};
|
|
13
|
+
export {
|
|
14
|
+
defaultFloatingButton,
|
|
15
|
+
propsFloatingButton
|
|
16
|
+
};
|
|
17
|
+
//# sourceMappingURL=react-desc-prop-types.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/react-desc-prop-types.ts"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { PropTypes } from '@elliemae/ds-utilities';\nimport { noop } from 'lodash';\nimport React from 'react';\n\nexport interface FloatingButtonProps {\n onClick: () => void;\n onFocus: () => void;\n innerRef: React.RefObject<HTMLButtonElement>;\n}\n\nexport const defaultFloatingButton: Partial<FloatingButtonProps> = {\n onClick: noop,\n onFocus: noop,\n};\n\nexport const propsFloatingButton = {\n onClick: PropTypes.func\n .description('The function to call when the chat is opened via the footer')\n .defaultValue(defaultFloatingButton.onClick),\n onFocus: PropTypes.func\n .description('The function to call when button is being focused')\n .defaultValue(defaultFloatingButton.onFocus),\n innerRef: PropTypes.object.description('Ref to the component container').defaultValue(null),\n};\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,iBAAiB;AAC1B,SAAS,YAAY;AASd,MAAM,wBAAsD;AAAA,EACjE,SAAS;AAAA,EACT,SAAS;AACX;AAEO,MAAM,sBAAsB;AAAA,EACjC,SAAS,UAAU,KAChB,YAAY,6DAA6D,EACzE,aAAa,sBAAsB,OAAO;AAAA,EAC7C,SAAS,UAAU,KAChB,YAAY,mDAAmD,EAC/D,aAAa,sBAAsB,OAAO;AAAA,EAC7C,UAAU,UAAU,OAAO,YAAY,gCAAgC,EAAE,aAAa,IAAI;AAC5F;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
|
@@ -0,0 +1,45 @@
|
|
|
1
|
+
import * as React from "react";
|
|
2
|
+
import { styled } from "@elliemae/ds-system";
|
|
3
|
+
import { Grid } from "@elliemae/ds-grid";
|
|
4
|
+
const BUTTON_FLOATING = 56;
|
|
5
|
+
const BOX_SHADOW = "0 5px 8px 0 rgba(53,60,70,0.55)";
|
|
6
|
+
const BOX_SHADOW_FLOATING = "0 5px 8px 0 rgba(53,60,70,0.35)";
|
|
7
|
+
const StyledFloatingButton = styled.button`
|
|
8
|
+
outline: none;
|
|
9
|
+
cursor: pointer;
|
|
10
|
+
height: ${BUTTON_FLOATING}px;
|
|
11
|
+
width: ${BUTTON_FLOATING}px;
|
|
12
|
+
border: none;
|
|
13
|
+
background: ${(props) => props.theme.colors.brand[600]};
|
|
14
|
+
border-radius: 50%;
|
|
15
|
+
box-shadow: ${BOX_SHADOW_FLOATING};
|
|
16
|
+
&:hover {
|
|
17
|
+
background: ${(props) => props.theme.colors.brand[700]};
|
|
18
|
+
}
|
|
19
|
+
&:focus {
|
|
20
|
+
border: 2px solid ${(props) => props.theme.colors.brand[700]};
|
|
21
|
+
box-shadow: inset 0 0 0 2px ${(props) => props.theme.colors.neutral["000"]}, ${BOX_SHADOW};
|
|
22
|
+
}
|
|
23
|
+
&:active {
|
|
24
|
+
background: ${(props) => props.theme.colors.brand[800]};
|
|
25
|
+
box-shadow: inset 0 0 0 0, ${BOX_SHADOW_FLOATING};
|
|
26
|
+
}
|
|
27
|
+
svg {
|
|
28
|
+
fill: ${(props) => props.theme.colors.neutral["000"]};
|
|
29
|
+
}
|
|
30
|
+
`;
|
|
31
|
+
const StyledFloatingContainer = styled(Grid)`
|
|
32
|
+
position: fixed;
|
|
33
|
+
bottom: 24px;
|
|
34
|
+
right: 24px;
|
|
35
|
+
border-radius: 4px;
|
|
36
|
+
z-index: 1;
|
|
37
|
+
box-shadow: ${BOX_SHADOW};
|
|
38
|
+
background: ${(nestedProps) => nestedProps.theme.colors.neutral["050"]};
|
|
39
|
+
width: 348px;
|
|
40
|
+
`;
|
|
41
|
+
export {
|
|
42
|
+
StyledFloatingButton,
|
|
43
|
+
StyledFloatingContainer
|
|
44
|
+
};
|
|
45
|
+
//# sourceMappingURL=styled.js.map
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{
|
|
2
|
+
"version": 3,
|
|
3
|
+
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styled.ts"],
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "import { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\n\nconst BUTTON_FLOATING = 56;\nconst BOX_SHADOW = '0 5px 8px 0 rgba(53,60,70,0.55)';\nconst BOX_SHADOW_FLOATING = '0 5px 8px 0 rgba(53,60,70,0.35)';\n\nexport const StyledFloatingButton = styled.button`\n outline: none;\n cursor: pointer;\n height: ${BUTTON_FLOATING}px;\n width: ${BUTTON_FLOATING}px;\n border: none;\n background: ${(props) => props.theme.colors.brand[600]};\n border-radius: 50%;\n box-shadow: ${BOX_SHADOW_FLOATING};\n &:hover {\n background: ${(props) => props.theme.colors.brand[700]};\n }\n &:focus {\n border: 2px solid ${(props) => props.theme.colors.brand[700]};\n box-shadow: inset 0 0 0 2px ${(props) => props.theme.colors.neutral['000']}, ${BOX_SHADOW};\n }\n &:active {\n background: ${(props) => props.theme.colors.brand[800]};\n box-shadow: inset 0 0 0 0, ${BOX_SHADOW_FLOATING};\n }\n svg {\n fill: ${(props) => props.theme.colors.neutral['000']};\n }\n`;\n\n// Floating\nexport const StyledFloatingContainer = styled(Grid)`\n position: fixed;\n bottom: 24px;\n right: 24px;\n border-radius: 4px;\n z-index: 1;\n box-shadow: ${BOX_SHADOW};\n background: ${(nestedProps) => nestedProps.theme.colors.neutral['050']};\n width: 348px;\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACAvB,SAAS,cAAc;AACvB,SAAS,YAAY;AAErB,MAAM,kBAAkB;AACxB,MAAM,aAAa;AACnB,MAAM,sBAAsB;AAErB,MAAM,uBAAuB,OAAO;AAAA;AAAA;AAAA,YAG/B;AAAA,WACD;AAAA;AAAA,gBAEK,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA,gBAEpC;AAAA;AAAA,kBAEE,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA;AAAA;AAAA,wBAG9B,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA,kCAC1B,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,WAAW;AAAA;AAAA;AAAA,kBAGjE,CAAC,UAAU,MAAM,MAAM,OAAO,MAAM;AAAA,iCACrB;AAAA;AAAA;AAAA,YAGrB,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ;AAAA;AAAA;AAK3C,MAAM,0BAA0B,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,gBAMlC;AAAA,gBACA,CAAC,gBAAgB,YAAY,MAAM,OAAO,QAAQ;AAAA;AAAA;",
|
|
6
|
+
"names": []
|
|
7
|
+
}
|
package/package.json
ADDED
|
@@ -0,0 +1,76 @@
|
|
|
1
|
+
{
|
|
2
|
+
"name": "@elliemae/ds-chat-floating-button",
|
|
3
|
+
"version": "3.6.0-next.0",
|
|
4
|
+
"license": "MIT",
|
|
5
|
+
"description": "ICE MT - Dimsum - Chat Floating Button",
|
|
6
|
+
"files": [
|
|
7
|
+
"dist"
|
|
8
|
+
],
|
|
9
|
+
"module": "./dist/esm/index.js",
|
|
10
|
+
"main": "./dist/cjs/index.js",
|
|
11
|
+
"types": "./dist/types/index.d.ts",
|
|
12
|
+
"exports": {
|
|
13
|
+
".": {
|
|
14
|
+
"import": "./dist/esm/index.js",
|
|
15
|
+
"require": "./dist/cjs/index.js"
|
|
16
|
+
},
|
|
17
|
+
"./styled": {
|
|
18
|
+
"import": "./dist/esm/styled.js",
|
|
19
|
+
"require": "./dist/cjs/styled.js"
|
|
20
|
+
},
|
|
21
|
+
"./props": {
|
|
22
|
+
"import": "./dist/esm/props.js",
|
|
23
|
+
"require": "./dist/cjs/props.js"
|
|
24
|
+
},
|
|
25
|
+
"./FloatingButton": {
|
|
26
|
+
"import": "./dist/esm/FloatingButton.js",
|
|
27
|
+
"require": "./dist/cjs/FloatingButton.js"
|
|
28
|
+
}
|
|
29
|
+
},
|
|
30
|
+
"repository": {
|
|
31
|
+
"type": "git",
|
|
32
|
+
"url": "https://git.elliemae.io/platform-ui/dimsum.git"
|
|
33
|
+
},
|
|
34
|
+
"engines": {
|
|
35
|
+
"pnpm": ">=6",
|
|
36
|
+
"node": ">=16"
|
|
37
|
+
},
|
|
38
|
+
"author": "ICE MT",
|
|
39
|
+
"jestSonar": {
|
|
40
|
+
"sonar56x": true,
|
|
41
|
+
"reportPath": "reports",
|
|
42
|
+
"reportFile": "tests.xml",
|
|
43
|
+
"indent": 4
|
|
44
|
+
},
|
|
45
|
+
"publishConfig": {
|
|
46
|
+
"access": "public",
|
|
47
|
+
"typeSafety": true
|
|
48
|
+
},
|
|
49
|
+
"dependencies": {
|
|
50
|
+
"@elliemae/ds-grid": "3.6.0-next.0",
|
|
51
|
+
"@elliemae/ds-icons": "3.6.0-next.0",
|
|
52
|
+
"@elliemae/ds-system": "3.6.0-next.0",
|
|
53
|
+
"@elliemae/ds-utilities": "3.6.0-next.0"
|
|
54
|
+
},
|
|
55
|
+
"devDependencies": {
|
|
56
|
+
"@testing-library/dom": "~8.13.0",
|
|
57
|
+
"@testing-library/jest-dom": "~5.16.4",
|
|
58
|
+
"@testing-library/react": "~12.1.3",
|
|
59
|
+
"@testing-library/user-event": "~13.5.0",
|
|
60
|
+
"styled-components": "~5.3.5"
|
|
61
|
+
},
|
|
62
|
+
"peerDependencies": {
|
|
63
|
+
"lodash": "^4.17.21",
|
|
64
|
+
"react": "^17.0.2",
|
|
65
|
+
"react-dom": "^17.0.2",
|
|
66
|
+
"styled-components": "^5.3.5"
|
|
67
|
+
},
|
|
68
|
+
"scripts": {
|
|
69
|
+
"test": "node ../../scripts/testing/test.mjs",
|
|
70
|
+
"lint": "node ../../scripts/lint.mjs",
|
|
71
|
+
"dts": "node ../../scripts/dts.mjs",
|
|
72
|
+
"dev": "node ../../scripts/build/build.js -w",
|
|
73
|
+
"build": "cross-env NODE_ENV=production node ../../scripts/build/build.mjs",
|
|
74
|
+
"checkDeps": "npx -yes ../ds-codemods check-missing-packages --projectFolderPath=\"./\" --ignorePackagesGlobPattern=\"\" --ignoreFilesGlobPattern=\"**/test-ables/*,**/tests/*\""
|
|
75
|
+
}
|
|
76
|
+
}
|