@sproutsocial/seeds-react-chat-bubble 0.2.0 → 0.2.2
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/esm/index.js +1 -10
- package/dist/esm/index.js.map +1 -1
- package/dist/index.js +1 -10
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
package/dist/esm/index.js
CHANGED
|
@@ -27,16 +27,7 @@ var ChatBubble = ({
|
|
|
27
27
|
size = "default",
|
|
28
28
|
...rest
|
|
29
29
|
}) => {
|
|
30
|
-
return /* @__PURE__ */ jsx(
|
|
31
|
-
StyledChatBubble,
|
|
32
|
-
{
|
|
33
|
-
type,
|
|
34
|
-
size,
|
|
35
|
-
"data-qa-chat-bubble": true,
|
|
36
|
-
...rest,
|
|
37
|
-
children
|
|
38
|
-
}
|
|
39
|
-
);
|
|
30
|
+
return /* @__PURE__ */ jsx(StyledChatBubble, { type, size, "data-qa-chat-bubble": true, ...rest, children });
|
|
40
31
|
};
|
|
41
32
|
var ChatBubble_default = ChatBubble;
|
|
42
33
|
|
package/dist/esm/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/styles.ts","../../src/ChatBubble.tsx","../../src/constants.ts","../../src/index.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeChatBubbleType, TypeChatBubbleSize } from \"./ChatBubbleTypes\";\n\nexport const StyledChatBubble = styled.div<{\n type: TypeChatBubbleType;\n size: TypeChatBubbleSize;\n}>`\n font-family: ${(p) => p.theme.fontFamily};\n ${(p) =>\n p.size === \"small\" ? p.theme.typography[200] : p.theme.typography[300]};\n border-radius: ${(p) => {\n const radius = p.size === \"small\" ? \"12px\" : \"16px\";\n return p.type === \"sent\"\n ? `${radius} ${radius} 0px ${radius}`\n : `${radius} ${radius} ${radius} 0px`;\n }};\n display: inline-flex;\n align-items: center;\n align-self: ${(p) => (p.type === \"sent\" ? \"flex-end\" : \"flex-start\")};\n max-width: 80%;\n word-break: break-word;\n color: ${(p) =>\n p.type === \"sent\"
|
|
1
|
+
{"version":3,"sources":["../../src/styles.ts","../../src/ChatBubble.tsx","../../src/constants.ts","../../src/index.ts"],"sourcesContent":["import styled from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeChatBubbleType, TypeChatBubbleSize } from \"./ChatBubbleTypes\";\n\nexport const StyledChatBubble = styled.div<{\n type: TypeChatBubbleType;\n size: TypeChatBubbleSize;\n}>`\n font-family: ${(p) => p.theme.fontFamily};\n ${(p) =>\n p.size === \"small\" ? p.theme.typography[200] : p.theme.typography[300]};\n border-radius: ${(p) => {\n const radius = p.size === \"small\" ? \"12px\" : \"16px\";\n return p.type === \"sent\"\n ? `${radius} ${radius} 0px ${radius}`\n : `${radius} ${radius} ${radius} 0px`;\n }};\n display: inline-flex;\n align-items: center;\n align-self: ${(p) => (p.type === \"sent\" ? \"flex-end\" : \"flex-start\")};\n max-width: 80%;\n word-break: break-word;\n color: ${(p) =>\n p.type === \"sent\" ? p.theme.colors.text.inverse : p.theme.colors.text.body};\n background: ${(p) =>\n p.type === \"sent\"\n ? p.theme.colors.button.primary.background.base\n : p.theme.colors.container.background.decorative.blue};\n padding: ${(p) =>\n p.size === \"small\"\n ? `${p.theme.space[200]} ${p.theme.space[300]}`\n : `${p.theme.space[300]} ${p.theme.space[400]}`};\n ${COMMON};\n`;\n","import { StyledChatBubble } from \"./styles\";\nimport type { TypeChatBubbleProps } from \"./ChatBubbleTypes\";\n\nconst ChatBubble = ({\n children,\n type = \"received\",\n size = \"default\",\n ...rest\n}: TypeChatBubbleProps) => {\n return (\n <StyledChatBubble type={type} size={size} data-qa-chat-bubble {...rest}>\n {children}\n </StyledChatBubble>\n );\n};\n\nexport default ChatBubble;\n","export const chatBubbleTypes = {\n received: \"received\",\n sent: \"sent\",\n} as const;\n\nexport const chatBubbleSizes = {\n default: \"default\",\n small: \"small\",\n} as const;\n","import ChatBubble from \"./ChatBubble\";\n\nexport default ChatBubble;\nexport { ChatBubble };\nexport * from \"./ChatBubbleTypes\";\nexport * from \"./constants\";\n"],"mappings":";AAAA,OAAO,YAAY;AACnB,SAAS,cAAc;AAGhB,IAAM,mBAAmB,OAAO;AAAA,iBAItB,CAAC,MAAM,EAAE,MAAM,UAAU;AAAA,IACtC,CAAC,MACD,EAAE,SAAS,UAAU,EAAE,MAAM,WAAW,GAAG,IAAI,EAAE,MAAM,WAAW,GAAG,CAAC;AAAA,mBACvD,CAAC,MAAM;AACtB,QAAM,SAAS,EAAE,SAAS,UAAU,SAAS;AAC7C,SAAO,EAAE,SAAS,SACd,GAAG,MAAM,IAAI,MAAM,QAAQ,MAAM,KACjC,GAAG,MAAM,IAAI,MAAM,IAAI,MAAM;AACnC,CAAC;AAAA;AAAA;AAAA,gBAGa,CAAC,MAAO,EAAE,SAAS,SAAS,aAAa,YAAa;AAAA;AAAA;AAAA,WAG3D,CAAC,MACR,EAAE,SAAS,SAAS,EAAE,MAAM,OAAO,KAAK,UAAU,EAAE,MAAM,OAAO,KAAK,IAAI;AAAA,gBAC9D,CAAC,MACb,EAAE,SAAS,SACP,EAAE,MAAM,OAAO,OAAO,QAAQ,WAAW,OACzC,EAAE,MAAM,OAAO,UAAU,WAAW,WAAW,IAAI;AAAA,aAC9C,CAAC,MACV,EAAE,SAAS,UACP,GAAG,EAAE,MAAM,MAAM,GAAG,CAAC,IAAI,EAAE,MAAM,MAAM,GAAG,CAAC,KAC3C,GAAG,EAAE,MAAM,MAAM,GAAG,CAAC,IAAI,EAAE,MAAM,MAAM,GAAG,CAAC,EAAE;AAAA,IACjD,MAAM;AAAA;;;ACtBN;AAPJ,IAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA,OAAO;AAAA,EACP,OAAO;AAAA,EACP,GAAG;AACL,MAA2B;AACzB,SACE,oBAAC,oBAAiB,MAAY,MAAY,uBAAmB,MAAE,GAAG,MAC/D,UACH;AAEJ;AAEA,IAAO,qBAAQ;;;AChBR,IAAM,kBAAkB;AAAA,EAC7B,UAAU;AAAA,EACV,MAAM;AACR;AAEO,IAAM,kBAAkB;AAAA,EAC7B,SAAS;AAAA,EACT,OAAO;AACT;;;ACNA,IAAO,gBAAQ;","names":[]}
|
package/dist/index.js
CHANGED
|
@@ -66,16 +66,7 @@ var ChatBubble = ({
|
|
|
66
66
|
size = "default",
|
|
67
67
|
...rest
|
|
68
68
|
}) => {
|
|
69
|
-
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
|
|
70
|
-
StyledChatBubble,
|
|
71
|
-
{
|
|
72
|
-
type,
|
|
73
|
-
size,
|
|
74
|
-
"data-qa-chat-bubble": true,
|
|
75
|
-
...rest,
|
|
76
|
-
children
|
|
77
|
-
}
|
|
78
|
-
);
|
|
69
|
+
return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(StyledChatBubble, { type, size, "data-qa-chat-bubble": true, ...rest, children });
|
|
79
70
|
};
|
|
80
71
|
var ChatBubble_default = ChatBubble;
|
|
81
72
|
|
package/dist/index.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../src/index.ts","../src/styles.ts","../src/ChatBubble.tsx","../src/constants.ts"],"sourcesContent":["import ChatBubble from \"./ChatBubble\";\n\nexport default ChatBubble;\nexport { ChatBubble };\nexport * from \"./ChatBubbleTypes\";\nexport * from \"./constants\";\n","import styled from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeChatBubbleType, TypeChatBubbleSize } from \"./ChatBubbleTypes\";\n\nexport const StyledChatBubble = styled.div<{\n type: TypeChatBubbleType;\n size: TypeChatBubbleSize;\n}>`\n font-family: ${(p) => p.theme.fontFamily};\n ${(p) =>\n p.size === \"small\" ? p.theme.typography[200] : p.theme.typography[300]};\n border-radius: ${(p) => {\n const radius = p.size === \"small\" ? \"12px\" : \"16px\";\n return p.type === \"sent\"\n ? `${radius} ${radius} 0px ${radius}`\n : `${radius} ${radius} ${radius} 0px`;\n }};\n display: inline-flex;\n align-items: center;\n align-self: ${(p) => (p.type === \"sent\" ? \"flex-end\" : \"flex-start\")};\n max-width: 80%;\n word-break: break-word;\n color: ${(p) =>\n p.type === \"sent\"
|
|
1
|
+
{"version":3,"sources":["../src/index.ts","../src/styles.ts","../src/ChatBubble.tsx","../src/constants.ts"],"sourcesContent":["import ChatBubble from \"./ChatBubble\";\n\nexport default ChatBubble;\nexport { ChatBubble };\nexport * from \"./ChatBubbleTypes\";\nexport * from \"./constants\";\n","import styled from \"styled-components\";\nimport { COMMON } from \"@sproutsocial/seeds-react-system-props\";\nimport type { TypeChatBubbleType, TypeChatBubbleSize } from \"./ChatBubbleTypes\";\n\nexport const StyledChatBubble = styled.div<{\n type: TypeChatBubbleType;\n size: TypeChatBubbleSize;\n}>`\n font-family: ${(p) => p.theme.fontFamily};\n ${(p) =>\n p.size === \"small\" ? p.theme.typography[200] : p.theme.typography[300]};\n border-radius: ${(p) => {\n const radius = p.size === \"small\" ? \"12px\" : \"16px\";\n return p.type === \"sent\"\n ? `${radius} ${radius} 0px ${radius}`\n : `${radius} ${radius} ${radius} 0px`;\n }};\n display: inline-flex;\n align-items: center;\n align-self: ${(p) => (p.type === \"sent\" ? \"flex-end\" : \"flex-start\")};\n max-width: 80%;\n word-break: break-word;\n color: ${(p) =>\n p.type === \"sent\" ? p.theme.colors.text.inverse : p.theme.colors.text.body};\n background: ${(p) =>\n p.type === \"sent\"\n ? p.theme.colors.button.primary.background.base\n : p.theme.colors.container.background.decorative.blue};\n padding: ${(p) =>\n p.size === \"small\"\n ? `${p.theme.space[200]} ${p.theme.space[300]}`\n : `${p.theme.space[300]} ${p.theme.space[400]}`};\n ${COMMON};\n`;\n","import { StyledChatBubble } from \"./styles\";\nimport type { TypeChatBubbleProps } from \"./ChatBubbleTypes\";\n\nconst ChatBubble = ({\n children,\n type = \"received\",\n size = \"default\",\n ...rest\n}: TypeChatBubbleProps) => {\n return (\n <StyledChatBubble type={type} size={size} data-qa-chat-bubble {...rest}>\n {children}\n </StyledChatBubble>\n );\n};\n\nexport default ChatBubble;\n","export const chatBubbleTypes = {\n received: \"received\",\n sent: \"sent\",\n} as const;\n\nexport const chatBubbleSizes = {\n default: \"default\",\n small: \"small\",\n} as const;\n"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ACAA,+BAAmB;AACnB,sCAAuB;AAGhB,IAAM,mBAAmB,yBAAAA,QAAO;AAAA,iBAItB,CAAC,MAAM,EAAE,MAAM,UAAU;AAAA,IACtC,CAAC,MACD,EAAE,SAAS,UAAU,EAAE,MAAM,WAAW,GAAG,IAAI,EAAE,MAAM,WAAW,GAAG,CAAC;AAAA,mBACvD,CAAC,MAAM;AACtB,QAAM,SAAS,EAAE,SAAS,UAAU,SAAS;AAC7C,SAAO,EAAE,SAAS,SACd,GAAG,MAAM,IAAI,MAAM,QAAQ,MAAM,KACjC,GAAG,MAAM,IAAI,MAAM,IAAI,MAAM;AACnC,CAAC;AAAA;AAAA;AAAA,gBAGa,CAAC,MAAO,EAAE,SAAS,SAAS,aAAa,YAAa;AAAA;AAAA;AAAA,WAG3D,CAAC,MACR,EAAE,SAAS,SAAS,EAAE,MAAM,OAAO,KAAK,UAAU,EAAE,MAAM,OAAO,KAAK,IAAI;AAAA,gBAC9D,CAAC,MACb,EAAE,SAAS,SACP,EAAE,MAAM,OAAO,OAAO,QAAQ,WAAW,OACzC,EAAE,MAAM,OAAO,UAAU,WAAW,WAAW,IAAI;AAAA,aAC9C,CAAC,MACV,EAAE,SAAS,UACP,GAAG,EAAE,MAAM,MAAM,GAAG,CAAC,IAAI,EAAE,MAAM,MAAM,GAAG,CAAC,KAC3C,GAAG,EAAE,MAAM,MAAM,GAAG,CAAC,IAAI,EAAE,MAAM,MAAM,GAAG,CAAC,EAAE;AAAA,IACjD,sCAAM;AAAA;;;ACtBN;AAPJ,IAAM,aAAa,CAAC;AAAA,EAClB;AAAA,EACA,OAAO;AAAA,EACP,OAAO;AAAA,EACP,GAAG;AACL,MAA2B;AACzB,SACE,4CAAC,oBAAiB,MAAY,MAAY,uBAAmB,MAAE,GAAG,MAC/D,UACH;AAEJ;AAEA,IAAO,qBAAQ;;;AChBR,IAAM,kBAAkB;AAAA,EAC7B,UAAU;AAAA,EACV,MAAM;AACR;AAEO,IAAM,kBAAkB;AAAA,EAC7B,SAAS;AAAA,EACT,OAAO;AACT;;;AHNA,IAAO,gBAAQ;","names":["styled"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@sproutsocial/seeds-react-chat-bubble",
|
|
3
|
-
"version": "0.2.
|
|
3
|
+
"version": "0.2.2",
|
|
4
4
|
"description": "Seeds React Chat Bubble",
|
|
5
5
|
"author": "Sprout Social, Inc.",
|
|
6
6
|
"license": "MIT",
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"test:watch": "jest --watch --coverage=false"
|
|
29
29
|
},
|
|
30
30
|
"dependencies": {
|
|
31
|
-
"@sproutsocial/seeds-react-system-props": "^3.
|
|
31
|
+
"@sproutsocial/seeds-react-system-props": "^3.1.1"
|
|
32
32
|
},
|
|
33
33
|
"devDependencies": {
|
|
34
34
|
"tsup": "^8.3.4",
|