@elliemae/ds-chat-bubble 3.17.0-next.2 → 3.17.0-next.20
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/styled.js +8 -3
- package/dist/cjs/styled.js.map +2 -2
- package/dist/esm/styled.js +9 -4
- package/dist/esm/styled.js.map +2 -2
- package/dist/types/styled.d.ts +1 -1
- package/package.json +5 -7
package/dist/cjs/styled.js
CHANGED
|
@@ -43,11 +43,14 @@ var React = __toESM(require("react"));
|
|
|
43
43
|
var import_ds_system = require("@elliemae/ds-system");
|
|
44
44
|
var import_ds_grid = require("@elliemae/ds-grid");
|
|
45
45
|
var import_react_desc_prop_types = require("./react-desc-prop-types.js");
|
|
46
|
+
const wrapRules = import_ds_system.css`
|
|
47
|
+
overflow-wrap: break-word;
|
|
48
|
+
white-space: pre-wrap;
|
|
49
|
+
`;
|
|
46
50
|
const StyledWrapper = import_ds_system.styled.div`
|
|
47
51
|
min-width: 224px;
|
|
48
52
|
border-radius: 10px;
|
|
49
|
-
|
|
50
|
-
white-space: pre-wrap;
|
|
53
|
+
${wrapRules}
|
|
51
54
|
`;
|
|
52
55
|
const StyledTitleBubble = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
53
56
|
padding-top: 6px;
|
|
@@ -55,13 +58,15 @@ const StyledTitleBubble = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
|
55
58
|
padding-right: 10px;
|
|
56
59
|
padding-bottom: 4px;
|
|
57
60
|
`;
|
|
58
|
-
const StyledTitleLeftBubble = (0, import_ds_system.styled)(
|
|
61
|
+
const StyledTitleLeftBubble = (0, import_ds_system.styled)("div")`
|
|
59
62
|
font-size: 13px;
|
|
60
63
|
font-weight: 600;
|
|
64
|
+
${wrapRules}
|
|
61
65
|
`;
|
|
62
66
|
const StyledTitleRightBubble = (0, import_ds_system.styled)(import_ds_grid.Grid)`
|
|
63
67
|
font-size: 13px;
|
|
64
68
|
font-weight: 400;
|
|
69
|
+
align-self: flex-start;
|
|
65
70
|
color: ${(props) => props.type === import_react_desc_prop_types.BUBBLE_TYPES.SENDER ? "#FFF" : "#657489"};
|
|
66
71
|
`;
|
|
67
72
|
const StyleBodyWrapper = import_ds_system.styled.div`
|
package/dist/cjs/styled.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../src/styled.tsx", "../../../../scripts/build/transpile/react-shim.js"],
|
|
4
|
-
"sourcesContent": ["/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { BUBBLE_TYPES } from './react-desc-prop-types.js';\n\n// Bubble WRAPPER\nexport const StyledWrapper = styled.div`\n min-width: 224px;\n border-radius: 10px;\n
|
|
5
|
-
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,
|
|
4
|
+
"sourcesContent": ["/* eslint-disable max-lines */\nimport { styled, css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { BUBBLE_TYPES } from './react-desc-prop-types.js';\n\nconst wrapRules = css`\n overflow-wrap: break-word;\n white-space: pre-wrap;\n`;\n// Bubble WRAPPER\nexport const StyledWrapper = styled.div`\n min-width: 224px;\n border-radius: 10px;\n ${wrapRules}\n`;\n\n// Bubble HEADER\nexport const StyledTitleBubble = styled(Grid)`\n padding-top: 6px;\n padding-left: 10px;\n padding-right: 10px;\n padding-bottom: 4px;\n`;\n\nexport const StyledTitleLeftBubble = styled('div')`\n font-size: 13px;\n font-weight: 600;\n ${wrapRules}\n`;\nexport const StyledTitleRightBubble = styled(Grid)<{ type: string }>`\n font-size: 13px;\n font-weight: 400;\n align-self: flex-start;\n color: ${(props) => (props.type === BUBBLE_TYPES.SENDER ? '#FFF' : '#657489')};\n`;\n\nexport const StyleBodyWrapper = styled.div`\n font-size: 13px;\n font-weight: 400;\n line-height: 15px;\n min-height: 18px;\n padding: 0px 10px 8px 10px;\n`;\n\nexport const StyleErrorMessage = styled.div`\n font-size: 12px;\n font-weight: 400;\n padding-top: ${(props) => props.theme.space.xxxs};\n color: ${(props) => props.theme.colors.danger[900]};\n align-items: flex-end;\n justify-content: center;\n text-align: right;\n line-height: 15px;\n svg {\n fill: ${(props) => props.theme.colors.danger[900]};\n }\n a {\n font-size: 12px;\n color: ${(props) => props.theme.colors.danger[900]};\n }\n .em-ds-icon {\n margin-left: 8px;\n }\n`;\n\nexport const StyleHelpMessage = styled(StyleErrorMessage)`\n font-size: 12px;\n line-height: 15px;\n color: ${(props) => props.theme.colors.neutral[500]};\n svg {\n fill: ${(props) => props.theme.colors.danger[900]};\n }\n a {\n font-size: 12px;\n color: ${(props) => props.theme.colors.danger[900]};\n }\n`;\n\n// bubble sender/ recipient\nexport const StyledBubbleArrow = styled.div`\n display: block;\n content: '';\n position: absolute;\n bottom: 10px;\n height: 15px;\n`;\n\nexport const StyledColoredBubble = styled.div<{ type: string }>`\n min-width: 224px;\n border-radius: 10px;\n position: relative;\n\n ${(props) =>\n props.type === BUBBLE_TYPES.SENDER\n ? `\n border: 1px solid ${props.theme.colors.brand['700']};\n background: ${props.theme.colors.brand[600]};\n color: ${props.theme.colors.neutral['000']};\n ${StyledBubbleArrow}{ \n right: -9px;\n bottom: 6px;\n svg{\n fill: ${props.theme.colors.brand[600]};\n }\n }\n\n a {\n color: #FFF;\n }\n\n `\n : `\n box-shadow: 0 1px 3px 0 rgba(53,60,70,0.80);\n background: ${props.theme.colors.neutral['000']};\n color: ${props.theme.colors.neutral[700]};\n\n ${StyledBubbleArrow}{ \n left: -11px;\n bottom: 6px;\n svg{\n fill: ${props.theme.colors.neutral['000']};\n }\n }\n\n `}\n`;\n", "import * as React from 'react';\nexport { React };\n"],
|
|
5
|
+
"mappings": ";;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;ACAA,YAAuB;ADCvB,uBAA4B;AAC5B,qBAAqB;AACrB,mCAA6B;AAE7B,MAAM,YAAY;AAAA;AAAA;AAAA;AAKX,MAAM,gBAAgB,wBAAO;AAAA;AAAA;AAAA,IAGhC;AAAA;AAIG,MAAM,wBAAoB,yBAAO,mBAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrC,MAAM,4BAAwB,yBAAO,KAAK;AAAA;AAAA;AAAA,IAG7C;AAAA;AAEG,MAAM,6BAAyB,yBAAO,mBAAI;AAAA;AAAA;AAAA;AAAA,WAItC,CAAC,UAAW,MAAM,SAAS,0CAAa,SAAS,SAAS;AAAA;AAG9D,MAAM,mBAAmB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQhC,MAAM,oBAAoB,wBAAO;AAAA;AAAA;AAAA,iBAGvB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,WACnC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMvC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA,aAIvC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9C,MAAM,uBAAmB,yBAAO,iBAAiB;AAAA;AAAA;AAAA,WAG7C,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA,YAExC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA,aAIvC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG;AAAA;AAAA;AAK9C,MAAM,oBAAoB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQjC,MAAM,sBAAsB,wBAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKtC,CAAC,UACD,MAAM,SAAS,0CAAa,SACxB;AAAA,4BACoB,MAAM,MAAM,OAAO,MAAM,KAAK;AAAA,sBACpC,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA,iBACjC,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA,UACvC;AAAA;AAAA;AAAA;AAAA,wBAIc,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAS5C;AAAA;AAAA,sBAEc,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA,iBACrC,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA,UAErC;AAAA;AAAA;AAAA;AAAA,wBAIc,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/esm/styled.js
CHANGED
|
@@ -1,12 +1,15 @@
|
|
|
1
1
|
import * as React from "react";
|
|
2
|
-
import { styled } from "@elliemae/ds-system";
|
|
2
|
+
import { styled, css } from "@elliemae/ds-system";
|
|
3
3
|
import { Grid } from "@elliemae/ds-grid";
|
|
4
4
|
import { BUBBLE_TYPES } from "./react-desc-prop-types.js";
|
|
5
|
+
const wrapRules = css`
|
|
6
|
+
overflow-wrap: break-word;
|
|
7
|
+
white-space: pre-wrap;
|
|
8
|
+
`;
|
|
5
9
|
const StyledWrapper = styled.div`
|
|
6
10
|
min-width: 224px;
|
|
7
11
|
border-radius: 10px;
|
|
8
|
-
|
|
9
|
-
white-space: pre-wrap;
|
|
12
|
+
${wrapRules}
|
|
10
13
|
`;
|
|
11
14
|
const StyledTitleBubble = styled(Grid)`
|
|
12
15
|
padding-top: 6px;
|
|
@@ -14,13 +17,15 @@ const StyledTitleBubble = styled(Grid)`
|
|
|
14
17
|
padding-right: 10px;
|
|
15
18
|
padding-bottom: 4px;
|
|
16
19
|
`;
|
|
17
|
-
const StyledTitleLeftBubble = styled(
|
|
20
|
+
const StyledTitleLeftBubble = styled("div")`
|
|
18
21
|
font-size: 13px;
|
|
19
22
|
font-weight: 600;
|
|
23
|
+
${wrapRules}
|
|
20
24
|
`;
|
|
21
25
|
const StyledTitleRightBubble = styled(Grid)`
|
|
22
26
|
font-size: 13px;
|
|
23
27
|
font-weight: 400;
|
|
28
|
+
align-self: flex-start;
|
|
24
29
|
color: ${(props) => props.type === BUBBLE_TYPES.SENDER ? "#FFF" : "#657489"};
|
|
25
30
|
`;
|
|
26
31
|
const StyleBodyWrapper = styled.div`
|
package/dist/esm/styled.js.map
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"version": 3,
|
|
3
3
|
"sources": ["../../../../scripts/build/transpile/react-shim.js", "../../src/styled.tsx"],
|
|
4
|
-
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { BUBBLE_TYPES } from './react-desc-prop-types.js';\n\n// Bubble WRAPPER\nexport const StyledWrapper = styled.div`\n min-width: 224px;\n border-radius: 10px;\n
|
|
5
|
-
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,
|
|
4
|
+
"sourcesContent": ["import * as React from 'react';\nexport { React };\n", "/* eslint-disable max-lines */\nimport { styled, css } from '@elliemae/ds-system';\nimport { Grid } from '@elliemae/ds-grid';\nimport { BUBBLE_TYPES } from './react-desc-prop-types.js';\n\nconst wrapRules = css`\n overflow-wrap: break-word;\n white-space: pre-wrap;\n`;\n// Bubble WRAPPER\nexport const StyledWrapper = styled.div`\n min-width: 224px;\n border-radius: 10px;\n ${wrapRules}\n`;\n\n// Bubble HEADER\nexport const StyledTitleBubble = styled(Grid)`\n padding-top: 6px;\n padding-left: 10px;\n padding-right: 10px;\n padding-bottom: 4px;\n`;\n\nexport const StyledTitleLeftBubble = styled('div')`\n font-size: 13px;\n font-weight: 600;\n ${wrapRules}\n`;\nexport const StyledTitleRightBubble = styled(Grid)<{ type: string }>`\n font-size: 13px;\n font-weight: 400;\n align-self: flex-start;\n color: ${(props) => (props.type === BUBBLE_TYPES.SENDER ? '#FFF' : '#657489')};\n`;\n\nexport const StyleBodyWrapper = styled.div`\n font-size: 13px;\n font-weight: 400;\n line-height: 15px;\n min-height: 18px;\n padding: 0px 10px 8px 10px;\n`;\n\nexport const StyleErrorMessage = styled.div`\n font-size: 12px;\n font-weight: 400;\n padding-top: ${(props) => props.theme.space.xxxs};\n color: ${(props) => props.theme.colors.danger[900]};\n align-items: flex-end;\n justify-content: center;\n text-align: right;\n line-height: 15px;\n svg {\n fill: ${(props) => props.theme.colors.danger[900]};\n }\n a {\n font-size: 12px;\n color: ${(props) => props.theme.colors.danger[900]};\n }\n .em-ds-icon {\n margin-left: 8px;\n }\n`;\n\nexport const StyleHelpMessage = styled(StyleErrorMessage)`\n font-size: 12px;\n line-height: 15px;\n color: ${(props) => props.theme.colors.neutral[500]};\n svg {\n fill: ${(props) => props.theme.colors.danger[900]};\n }\n a {\n font-size: 12px;\n color: ${(props) => props.theme.colors.danger[900]};\n }\n`;\n\n// bubble sender/ recipient\nexport const StyledBubbleArrow = styled.div`\n display: block;\n content: '';\n position: absolute;\n bottom: 10px;\n height: 15px;\n`;\n\nexport const StyledColoredBubble = styled.div<{ type: string }>`\n min-width: 224px;\n border-radius: 10px;\n position: relative;\n\n ${(props) =>\n props.type === BUBBLE_TYPES.SENDER\n ? `\n border: 1px solid ${props.theme.colors.brand['700']};\n background: ${props.theme.colors.brand[600]};\n color: ${props.theme.colors.neutral['000']};\n ${StyledBubbleArrow}{ \n right: -9px;\n bottom: 6px;\n svg{\n fill: ${props.theme.colors.brand[600]};\n }\n }\n\n a {\n color: #FFF;\n }\n\n `\n : `\n box-shadow: 0 1px 3px 0 rgba(53,60,70,0.80);\n background: ${props.theme.colors.neutral['000']};\n color: ${props.theme.colors.neutral[700]};\n\n ${StyledBubbleArrow}{ \n left: -11px;\n bottom: 6px;\n svg{\n fill: ${props.theme.colors.neutral['000']};\n }\n }\n\n `}\n`;\n"],
|
|
5
|
+
"mappings": "AAAA,YAAY,WAAW;ACCvB,SAAS,QAAQ,WAAW;AAC5B,SAAS,YAAY;AACrB,SAAS,oBAAoB;AAE7B,MAAM,YAAY;AAAA;AAAA;AAAA;AAKX,MAAM,gBAAgB,OAAO;AAAA;AAAA;AAAA,IAGhC;AAAA;AAIG,MAAM,oBAAoB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA;AAAA;AAOrC,MAAM,wBAAwB,OAAO,KAAK;AAAA;AAAA;AAAA,IAG7C;AAAA;AAEG,MAAM,yBAAyB,OAAO,IAAI;AAAA;AAAA;AAAA;AAAA,WAItC,CAAC,UAAW,MAAM,SAAS,aAAa,SAAS,SAAS;AAAA;AAG9D,MAAM,mBAAmB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQhC,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA,iBAGvB,CAAC,UAAU,MAAM,MAAM,MAAM;AAAA,WACnC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,YAMvC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA,aAIvC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAO9C,MAAM,mBAAmB,OAAO,iBAAiB;AAAA;AAAA;AAAA,WAG7C,CAAC,UAAU,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA,YAExC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG;AAAA;AAAA;AAAA;AAAA,aAIvC,CAAC,UAAU,MAAM,MAAM,OAAO,OAAO,GAAG;AAAA;AAAA;AAK9C,MAAM,oBAAoB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQjC,MAAM,sBAAsB,OAAO;AAAA;AAAA;AAAA;AAAA;AAAA,IAKtC,CAAC,UACD,MAAM,SAAS,aAAa,SACxB;AAAA,4BACoB,MAAM,MAAM,OAAO,MAAM,KAAK;AAAA,sBACpC,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA,iBACjC,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA,UACvC;AAAA;AAAA;AAAA;AAAA,wBAIc,MAAM,MAAM,OAAO,MAAM,GAAG;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,QAS5C;AAAA;AAAA,sBAEc,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA,iBACrC,MAAM,MAAM,OAAO,QAAQ,GAAG;AAAA;AAAA,UAErC;AAAA;AAAA;AAAA;AAAA,wBAIc,MAAM,MAAM,OAAO,QAAQ,KAAK;AAAA;AAAA;AAAA;AAAA;AAAA;",
|
|
6
6
|
"names": []
|
|
7
7
|
}
|
package/dist/types/styled.d.ts
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
/// <reference types="react" />
|
|
2
2
|
export declare const StyledWrapper: import("styled-components").StyledComponent<keyof JSX.IntrinsicElements, import("@elliemae/ds-system").Theme, Record<string, unknown> & object, never>;
|
|
3
3
|
export declare const StyledTitleBubble: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/dist/types/react-desc-prop-types.js").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, object, never>;
|
|
4
|
-
export declare const StyledTitleLeftBubble: import("styled-components").StyledComponent<
|
|
4
|
+
export declare const StyledTitleLeftBubble: import("styled-components").StyledComponent<"div", import("@elliemae/ds-system").Theme, object, never>;
|
|
5
5
|
export declare const StyledTitleRightBubble: import("styled-components").StyledComponent<import("react").ForwardRefExoticComponent<import("@elliemae/ds-grid/dist/types/react-desc-prop-types.js").DSGridT.Props & import("react").RefAttributes<HTMLDivElement>>, import("@elliemae/ds-system").Theme, {
|
|
6
6
|
type: string;
|
|
7
7
|
}, never>;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@elliemae/ds-chat-bubble",
|
|
3
|
-
"version": "3.17.0-next.
|
|
3
|
+
"version": "3.17.0-next.20",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "ICE MT - Dimsum - Chat",
|
|
6
6
|
"files": [
|
|
@@ -51,14 +51,12 @@
|
|
|
51
51
|
"typeSafety": false
|
|
52
52
|
},
|
|
53
53
|
"dependencies": {
|
|
54
|
-
"@elliemae/ds-grid": "3.17.0-next.
|
|
55
|
-
"@elliemae/ds-props-helpers": "3.17.0-next.
|
|
56
|
-
"@elliemae/ds-icons": "3.17.0-next.
|
|
57
|
-
"@elliemae/ds-system": "3.17.0-next.
|
|
58
|
-
"@elliemae/ds-utilities": "3.17.0-next.2"
|
|
54
|
+
"@elliemae/ds-grid": "3.17.0-next.20",
|
|
55
|
+
"@elliemae/ds-props-helpers": "3.17.0-next.20",
|
|
56
|
+
"@elliemae/ds-icons": "3.17.0-next.20",
|
|
57
|
+
"@elliemae/ds-system": "3.17.0-next.20"
|
|
59
58
|
},
|
|
60
59
|
"devDependencies": {
|
|
61
|
-
"@testing-library/dom": "~8.19.0",
|
|
62
60
|
"@testing-library/jest-dom": "~5.16.5",
|
|
63
61
|
"@testing-library/react": "~12.1.3",
|
|
64
62
|
"styled-components": "~5.3.9"
|