@pega/cosmos-react-demos 4.0.0-dev.18.1 → 4.0.0-dev.18.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/jsx/core/Tooltip/Tooltip.stories.d.ts +1 -0
- package/jsx/core/Tooltip/Tooltip.stories.d.ts.map +1 -1
- package/jsx/core/Tooltip/Tooltip.stories.jsx +21 -1
- package/jsx/core/Tooltip/Tooltip.stories.jsx.map +1 -1
- package/jsx/core/Tooltip/Tooltip.styles.d.ts +2 -0
- package/jsx/core/Tooltip/Tooltip.styles.d.ts.map +1 -0
- package/jsx/core/Tooltip/Tooltip.styles.js +23 -0
- package/jsx/core/Tooltip/Tooltip.styles.js.map +1 -0
- package/lib/core/Tooltip/Tooltip.stories.d.ts +1 -0
- package/lib/core/Tooltip/Tooltip.stories.d.ts.map +1 -1
- package/lib/core/Tooltip/Tooltip.stories.js +9 -1
- package/lib/core/Tooltip/Tooltip.stories.js.map +1 -1
- package/lib/core/Tooltip/Tooltip.styles.d.ts +2 -0
- package/lib/core/Tooltip/Tooltip.styles.d.ts.map +1 -0
- package/lib/core/Tooltip/Tooltip.styles.js +23 -0
- package/lib/core/Tooltip/Tooltip.styles.js.map +1 -0
- package/package.json +9 -9
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;
|
|
1
|
+
{"version":3,"file":"Tooltip.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAM/C,wBAIU;AAEV,eAAO,MAAM,WAAW,EAAE,KAgBzB,CAAC;AAEF,UAAU,wBAAwB;IAChC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,wBAAwB,CA2B/D,CAAC;AAYF,eAAO,MAAM,YAAY,EAAE,KAyB1B,CAAC"}
|
|
@@ -1,4 +1,5 @@
|
|
|
1
|
-
import { Button, Configuration, Tooltip, useElement } from '@pega/cosmos-react-core';
|
|
1
|
+
import { Button, Configuration, Flex, Tooltip, useElement } from '@pega/cosmos-react-core';
|
|
2
|
+
import { ResizeableEl } from './Tooltip.styles';
|
|
2
3
|
export default {
|
|
3
4
|
title: 'Core/Tooltip',
|
|
4
5
|
component: Tooltip,
|
|
@@ -43,4 +44,23 @@ ConfigurableTooltip.argTypes = {
|
|
|
43
44
|
foregroundColor: { control: { type: 'color' } },
|
|
44
45
|
backgroundColor: { control: { type: 'color' } }
|
|
45
46
|
};
|
|
47
|
+
export const SmartTooltip = () => {
|
|
48
|
+
const [el1, setEl1] = useElement();
|
|
49
|
+
const [el2, setEl2] = useElement();
|
|
50
|
+
const textContent1 = 'Resize me and hover: Lorem ipsum dolor sit amet';
|
|
51
|
+
const textContent2 = 'Hover or focus me: Lorem ipsum dolor sit amet';
|
|
52
|
+
return (<Flex container={{ direction: 'column', gap: 4 }}>
|
|
53
|
+
<ResizeableEl ref={setEl1}>{textContent1}</ResizeableEl>
|
|
54
|
+
{el1 && (<Tooltip target={el1} smart showDelay='none' hideDelay='none'>
|
|
55
|
+
{textContent1}
|
|
56
|
+
</Tooltip>)}
|
|
57
|
+
|
|
58
|
+
<Button as={ResizeableEl} variant='link' ref={setEl2}>
|
|
59
|
+
{textContent2}
|
|
60
|
+
</Button>
|
|
61
|
+
{el2 && (<Tooltip target={el2} smart showDelay='none' hideDelay='none'>
|
|
62
|
+
{textContent2}
|
|
63
|
+
</Tooltip>)}
|
|
64
|
+
</Flex>);
|
|
65
|
+
};
|
|
46
66
|
//# sourceMappingURL=Tooltip.stories.jsx.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.stories.jsx","sourceRoot":"","sources":["../../../src/core/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"Tooltip.stories.jsx","sourceRoot":"","sources":["../../../src/core/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Button, Configuration, Flex, Tooltip, useElement } from '@pega/cosmos-react-core';\n\nimport { ResizeableEl } from './Tooltip.styles';\n\nexport default {\n title: 'Core/Tooltip',\n component: Tooltip,\n excludeStories: ['ConfigurableTooltip']\n} as Meta;\n\nexport const TooltipDemo: Story = () => {\n const [el, setEl] = useElement();\n\n return (\n <>\n <Button ref={setEl}>Hover me</Button>\n\n {el && (\n <Tooltip target={el}>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus scelerisque\n viverra. Fusce consequat, justo at laoreet lobortis, mauris ipsum aliquet arcu, non\n convallis nisl elit id erat. Pellentesque posuere sagittis velit a molestie.\n </Tooltip>\n )}\n </>\n );\n};\n\ninterface ConfigurableTooltipProps {\n foregroundColor?: string;\n backgroundColor?: string;\n}\n\nexport const ConfigurableTooltip: Story<ConfigurableTooltipProps> = (\n args: ConfigurableTooltipProps\n) => {\n const [el, setEl] = useElement();\n\n return (\n <Configuration\n theme={{\n components: {\n tooltip: {\n 'foreground-color': args.foregroundColor,\n 'background-color': args.backgroundColor\n }\n }\n }}\n >\n <Button ref={setEl}>Hover me</Button>\n\n {el && (\n <Tooltip target={el}>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus scelerisque\n viverra. Fusce consequat, justo at laoreet lobortis, mauris ipsum aliquet arcu, non\n convallis nisl elit id erat. Pellentesque posuere sagittis velit a molestie.\n </Tooltip>\n )}\n </Configuration>\n );\n};\n\nConfigurableTooltip.args = {\n foregroundColor: '#f5f5f5',\n backgroundColor: '#3f3f3f'\n};\n\nConfigurableTooltip.argTypes = {\n foregroundColor: { control: { type: 'color' } },\n backgroundColor: { control: { type: 'color' } }\n};\n\nexport const SmartTooltip: Story = () => {\n const [el1, setEl1] = useElement();\n const [el2, setEl2] = useElement();\n const textContent1 = 'Resize me and hover: Lorem ipsum dolor sit amet';\n const textContent2 = 'Hover or focus me: Lorem ipsum dolor sit amet';\n\n return (\n <Flex container={{ direction: 'column', gap: 4 }}>\n <ResizeableEl ref={setEl1}>{textContent1}</ResizeableEl>\n {el1 && (\n <Tooltip target={el1} smart showDelay='none' hideDelay='none'>\n {textContent1}\n </Tooltip>\n )}\n\n <Button as={ResizeableEl} variant='link' ref={setEl2}>\n {textContent2}\n </Button>\n {el2 && (\n <Tooltip target={el2} smart showDelay='none' hideDelay='none'>\n {textContent2}\n </Tooltip>\n )}\n </Flex>\n );\n};\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tooltip.styles.d.ts","sourceRoot":"","sources":["../../../src/core/Tooltip/Tooltip.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY,yGAkBvB,CAAC"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import styled, { css } from 'styled-components';
|
|
2
|
+
import { defaultThemeProp } from '@pega/cosmos-react-core/lib/theme';
|
|
3
|
+
export const ResizeableEl = styled.div(({ theme }) => {
|
|
4
|
+
return css `
|
|
5
|
+
position: relative;
|
|
6
|
+
display: inline-block;
|
|
7
|
+
resize: horizontal;
|
|
8
|
+
width: 26ch;
|
|
9
|
+
overflow: hidden;
|
|
10
|
+
white-space: nowrap;
|
|
11
|
+
text-overflow: ellipsis;
|
|
12
|
+
|
|
13
|
+
&::after {
|
|
14
|
+
content: '';
|
|
15
|
+
display: block;
|
|
16
|
+
position: absolute;
|
|
17
|
+
inset: 0;
|
|
18
|
+
border: 0.0625rem dashed ${theme.base.palette['border-line']};
|
|
19
|
+
}
|
|
20
|
+
`;
|
|
21
|
+
});
|
|
22
|
+
ResizeableEl.defaultProps = defaultThemeProp;
|
|
23
|
+
//# sourceMappingURL=Tooltip.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tooltip.styles.js","sourceRoot":"","sources":["../../../src/core/Tooltip/Tooltip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAErE,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACnD,OAAO,GAAG,CAAA;;;;;;;;;;;;;;iCAcqB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;GAE/D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '@pega/cosmos-react-core/lib/theme';\n\nexport const ResizeableEl = styled.div(({ theme }) => {\n return css`\n position: relative;\n display: inline-block;\n resize: horizontal;\n width: 26ch;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n\n &::after {\n content: '';\n display: block;\n position: absolute;\n inset: 0;\n border: 0.0625rem dashed ${theme.base.palette['border-line']};\n }\n `;\n});\n\nResizeableEl.defaultProps = defaultThemeProp;\n"]}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;
|
|
1
|
+
{"version":3,"file":"Tooltip.stories.d.ts","sourceRoot":"","sources":["../../../src/core/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,kBAAkB,CAAC;;AAM/C,wBAIU;AAEV,eAAO,MAAM,WAAW,EAAE,KAgBzB,CAAC;AAEF,UAAU,wBAAwB;IAChC,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,eAAe,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,eAAO,MAAM,mBAAmB,EAAE,KAAK,CAAC,wBAAwB,CA2B/D,CAAC;AAYF,eAAO,MAAM,YAAY,EAAE,KAyB1B,CAAC"}
|
|
@@ -1,5 +1,6 @@
|
|
|
1
1
|
import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
|
|
2
|
-
import { Button, Configuration, Tooltip, useElement } from '@pega/cosmos-react-core';
|
|
2
|
+
import { Button, Configuration, Flex, Tooltip, useElement } from '@pega/cosmos-react-core';
|
|
3
|
+
import { ResizeableEl } from './Tooltip.styles';
|
|
3
4
|
export default {
|
|
4
5
|
title: 'Core/Tooltip',
|
|
5
6
|
component: Tooltip,
|
|
@@ -28,4 +29,11 @@ ConfigurableTooltip.argTypes = {
|
|
|
28
29
|
foregroundColor: { control: { type: 'color' } },
|
|
29
30
|
backgroundColor: { control: { type: 'color' } }
|
|
30
31
|
};
|
|
32
|
+
export const SmartTooltip = () => {
|
|
33
|
+
const [el1, setEl1] = useElement();
|
|
34
|
+
const [el2, setEl2] = useElement();
|
|
35
|
+
const textContent1 = 'Resize me and hover: Lorem ipsum dolor sit amet';
|
|
36
|
+
const textContent2 = 'Hover or focus me: Lorem ipsum dolor sit amet';
|
|
37
|
+
return (_jsxs(Flex, { container: { direction: 'column', gap: 4 }, children: [_jsx(ResizeableEl, { ref: setEl1, children: textContent1 }), el1 && (_jsx(Tooltip, { target: el1, smart: true, showDelay: 'none', hideDelay: 'none', children: textContent1 })), _jsx(Button, { as: ResizeableEl, variant: 'link', ref: setEl2, children: textContent2 }), el2 && (_jsx(Tooltip, { target: el2, smart: true, showDelay: 'none', hideDelay: 'none', children: textContent2 }))] }));
|
|
38
|
+
};
|
|
31
39
|
//# sourceMappingURL=Tooltip.stories.js.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Tooltip.stories.js","sourceRoot":"","sources":["../../../src/core/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;
|
|
1
|
+
{"version":3,"file":"Tooltip.stories.js","sourceRoot":"","sources":["../../../src/core/Tooltip/Tooltip.stories.tsx"],"names":[],"mappings":";AAEA,OAAO,EAAE,MAAM,EAAE,aAAa,EAAE,IAAI,EAAE,OAAO,EAAE,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAE3F,OAAO,EAAE,YAAY,EAAE,MAAM,kBAAkB,CAAC;AAEhD,eAAe;IACb,KAAK,EAAE,cAAc;IACrB,SAAS,EAAE,OAAO;IAClB,cAAc,EAAE,CAAC,qBAAqB,CAAC;CAChC,CAAC;AAEV,MAAM,CAAC,MAAM,WAAW,GAAU,GAAG,EAAE;IACrC,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,UAAU,EAAE,CAAC;IAEjC,OAAO,CACL,8BACE,KAAC,MAAM,IAAC,GAAG,EAAE,KAAK,yBAAmB,EAEpC,EAAE,IAAI,CACL,KAAC,OAAO,IAAC,MAAM,EAAE,EAAE,wQAIT,CACX,IACA,CACJ,CAAC;AACJ,CAAC,CAAC;AAOF,MAAM,CAAC,MAAM,mBAAmB,GAAoC,CAClE,IAA8B,EAC9B,EAAE;IACF,MAAM,CAAC,EAAE,EAAE,KAAK,CAAC,GAAG,UAAU,EAAE,CAAC;IAEjC,OAAO,CACL,MAAC,aAAa,IACZ,KAAK,EAAE;YACL,UAAU,EAAE;gBACV,OAAO,EAAE;oBACP,kBAAkB,EAAE,IAAI,CAAC,eAAe;oBACxC,kBAAkB,EAAE,IAAI,CAAC,eAAe;iBACzC;aACF;SACF,aAED,KAAC,MAAM,IAAC,GAAG,EAAE,KAAK,yBAAmB,EAEpC,EAAE,IAAI,CACL,KAAC,OAAO,IAAC,MAAM,EAAE,EAAE,wQAIT,CACX,IACa,CACjB,CAAC;AACJ,CAAC,CAAC;AAEF,mBAAmB,CAAC,IAAI,GAAG;IACzB,eAAe,EAAE,SAAS;IAC1B,eAAe,EAAE,SAAS;CAC3B,CAAC;AAEF,mBAAmB,CAAC,QAAQ,GAAG;IAC7B,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;IAC/C,eAAe,EAAE,EAAE,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE,EAAE;CAChD,CAAC;AAEF,MAAM,CAAC,MAAM,YAAY,GAAU,GAAG,EAAE;IACtC,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,UAAU,EAAE,CAAC;IACnC,MAAM,CAAC,GAAG,EAAE,MAAM,CAAC,GAAG,UAAU,EAAE,CAAC;IACnC,MAAM,YAAY,GAAG,iDAAiD,CAAC;IACvE,MAAM,YAAY,GAAG,+CAA+C,CAAC;IAErE,OAAO,CACL,MAAC,IAAI,IAAC,SAAS,EAAE,EAAE,SAAS,EAAE,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAE,aAC9C,KAAC,YAAY,IAAC,GAAG,EAAE,MAAM,YAAG,YAAY,GAAgB,EACvD,GAAG,IAAI,CACN,KAAC,OAAO,IAAC,MAAM,EAAE,GAAG,EAAE,KAAK,QAAC,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,MAAM,YAC1D,YAAY,GACL,CACX,EAED,KAAC,MAAM,IAAC,EAAE,EAAE,YAAY,EAAE,OAAO,EAAC,MAAM,EAAC,GAAG,EAAE,MAAM,YACjD,YAAY,GACN,EACR,GAAG,IAAI,CACN,KAAC,OAAO,IAAC,MAAM,EAAE,GAAG,EAAE,KAAK,QAAC,SAAS,EAAC,MAAM,EAAC,SAAS,EAAC,MAAM,YAC1D,YAAY,GACL,CACX,IACI,CACR,CAAC;AACJ,CAAC,CAAC","sourcesContent":["import { Meta, Story } from '@storybook/react';\n\nimport { Button, Configuration, Flex, Tooltip, useElement } from '@pega/cosmos-react-core';\n\nimport { ResizeableEl } from './Tooltip.styles';\n\nexport default {\n title: 'Core/Tooltip',\n component: Tooltip,\n excludeStories: ['ConfigurableTooltip']\n} as Meta;\n\nexport const TooltipDemo: Story = () => {\n const [el, setEl] = useElement();\n\n return (\n <>\n <Button ref={setEl}>Hover me</Button>\n\n {el && (\n <Tooltip target={el}>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus scelerisque\n viverra. Fusce consequat, justo at laoreet lobortis, mauris ipsum aliquet arcu, non\n convallis nisl elit id erat. Pellentesque posuere sagittis velit a molestie.\n </Tooltip>\n )}\n </>\n );\n};\n\ninterface ConfigurableTooltipProps {\n foregroundColor?: string;\n backgroundColor?: string;\n}\n\nexport const ConfigurableTooltip: Story<ConfigurableTooltipProps> = (\n args: ConfigurableTooltipProps\n) => {\n const [el, setEl] = useElement();\n\n return (\n <Configuration\n theme={{\n components: {\n tooltip: {\n 'foreground-color': args.foregroundColor,\n 'background-color': args.backgroundColor\n }\n }\n }}\n >\n <Button ref={setEl}>Hover me</Button>\n\n {el && (\n <Tooltip target={el}>\n Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur finibus scelerisque\n viverra. Fusce consequat, justo at laoreet lobortis, mauris ipsum aliquet arcu, non\n convallis nisl elit id erat. Pellentesque posuere sagittis velit a molestie.\n </Tooltip>\n )}\n </Configuration>\n );\n};\n\nConfigurableTooltip.args = {\n foregroundColor: '#f5f5f5',\n backgroundColor: '#3f3f3f'\n};\n\nConfigurableTooltip.argTypes = {\n foregroundColor: { control: { type: 'color' } },\n backgroundColor: { control: { type: 'color' } }\n};\n\nexport const SmartTooltip: Story = () => {\n const [el1, setEl1] = useElement();\n const [el2, setEl2] = useElement();\n const textContent1 = 'Resize me and hover: Lorem ipsum dolor sit amet';\n const textContent2 = 'Hover or focus me: Lorem ipsum dolor sit amet';\n\n return (\n <Flex container={{ direction: 'column', gap: 4 }}>\n <ResizeableEl ref={setEl1}>{textContent1}</ResizeableEl>\n {el1 && (\n <Tooltip target={el1} smart showDelay='none' hideDelay='none'>\n {textContent1}\n </Tooltip>\n )}\n\n <Button as={ResizeableEl} variant='link' ref={setEl2}>\n {textContent2}\n </Button>\n {el2 && (\n <Tooltip target={el2} smart showDelay='none' hideDelay='none'>\n {textContent2}\n </Tooltip>\n )}\n </Flex>\n );\n};\n"]}
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tooltip.styles.d.ts","sourceRoot":"","sources":["../../../src/core/Tooltip/Tooltip.styles.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,YAAY,yGAkBvB,CAAC"}
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
import styled, { css } from 'styled-components';
|
|
2
|
+
import { defaultThemeProp } from '@pega/cosmos-react-core/lib/theme';
|
|
3
|
+
export const ResizeableEl = styled.div(({ theme }) => {
|
|
4
|
+
return css `
|
|
5
|
+
position: relative;
|
|
6
|
+
display: inline-block;
|
|
7
|
+
resize: horizontal;
|
|
8
|
+
width: 26ch;
|
|
9
|
+
overflow: hidden;
|
|
10
|
+
white-space: nowrap;
|
|
11
|
+
text-overflow: ellipsis;
|
|
12
|
+
|
|
13
|
+
&::after {
|
|
14
|
+
content: '';
|
|
15
|
+
display: block;
|
|
16
|
+
position: absolute;
|
|
17
|
+
inset: 0;
|
|
18
|
+
border: 0.0625rem dashed ${theme.base.palette['border-line']};
|
|
19
|
+
}
|
|
20
|
+
`;
|
|
21
|
+
});
|
|
22
|
+
ResizeableEl.defaultProps = defaultThemeProp;
|
|
23
|
+
//# sourceMappingURL=Tooltip.styles.js.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"Tooltip.styles.js","sourceRoot":"","sources":["../../../src/core/Tooltip/Tooltip.styles.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,EAAE,EAAE,GAAG,EAAE,MAAM,mBAAmB,CAAC;AAEhD,OAAO,EAAE,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAErE,MAAM,CAAC,MAAM,YAAY,GAAG,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,EAAE,EAAE,EAAE;IACnD,OAAO,GAAG,CAAA;;;;;;;;;;;;;;iCAcqB,KAAK,CAAC,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC;;GAE/D,CAAC;AACJ,CAAC,CAAC,CAAC;AAEH,YAAY,CAAC,YAAY,GAAG,gBAAgB,CAAC","sourcesContent":["import styled, { css } from 'styled-components';\n\nimport { defaultThemeProp } from '@pega/cosmos-react-core/lib/theme';\n\nexport const ResizeableEl = styled.div(({ theme }) => {\n return css`\n position: relative;\n display: inline-block;\n resize: horizontal;\n width: 26ch;\n overflow: hidden;\n white-space: nowrap;\n text-overflow: ellipsis;\n\n &::after {\n content: '';\n display: block;\n position: absolute;\n inset: 0;\n border: 0.0625rem dashed ${theme.base.palette['border-line']};\n }\n `;\n});\n\nResizeableEl.defaultProps = defaultThemeProp;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-demos",
|
|
3
|
-
"version": "4.0.0-dev.18.
|
|
3
|
+
"version": "4.0.0-dev.18.2",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "https://github.com/pegasystems/cosmos-react.git",
|
|
@@ -20,14 +20,14 @@
|
|
|
20
20
|
"build": "tsc -b"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@pega/cosmos-react-build": "4.0.0-dev.18.
|
|
24
|
-
"@pega/cosmos-react-condition-builder": "4.0.0-dev.18.
|
|
25
|
-
"@pega/cosmos-react-core": "4.0.0-dev.18.
|
|
26
|
-
"@pega/cosmos-react-cs": "4.0.0-dev.18.
|
|
27
|
-
"@pega/cosmos-react-dnd": "4.0.0-dev.18.
|
|
28
|
-
"@pega/cosmos-react-rte": "4.0.0-dev.18.
|
|
29
|
-
"@pega/cosmos-react-social": "4.0.0-dev.18.
|
|
30
|
-
"@pega/cosmos-react-work": "4.0.0-dev.18.
|
|
23
|
+
"@pega/cosmos-react-build": "4.0.0-dev.18.2",
|
|
24
|
+
"@pega/cosmos-react-condition-builder": "4.0.0-dev.18.2",
|
|
25
|
+
"@pega/cosmos-react-core": "4.0.0-dev.18.2",
|
|
26
|
+
"@pega/cosmos-react-cs": "4.0.0-dev.18.2",
|
|
27
|
+
"@pega/cosmos-react-dnd": "4.0.0-dev.18.2",
|
|
28
|
+
"@pega/cosmos-react-rte": "4.0.0-dev.18.2",
|
|
29
|
+
"@pega/cosmos-react-social": "4.0.0-dev.18.2",
|
|
30
|
+
"@pega/cosmos-react-work": "4.0.0-dev.18.2",
|
|
31
31
|
"@storybook/addon-a11y": "^6.4.19",
|
|
32
32
|
"@storybook/addon-actions": "^6.4.19",
|
|
33
33
|
"@storybook/addon-links": "^6.5.16",
|