@pega/cosmos-react-cs 4.0.0-dev.1.0 → 4.0.0-dev.1.1
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.
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CallControlPanelIcon.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanelIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAQ,MAAM,OAAO,CAAC;AAIhD,OAAO,EAEL,YAAY,EAGZ,cAAc,EAMf,MAAM,yBAAyB,CAAC;AAKjC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAOvE,UAAU,yBAA0B,SAAQ,cAAc;IACxD,MAAM,CAAC,EAAE,sBAAsB,CAAC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,mBAAoB,SAAQ,IAAI,CAAC,yBAAyB,EAAE,QAAQ,CAAC;IAC7E,OAAO,EAAE,MAAM,GAAG,KAAK,CAAC;CACzB;
|
|
1
|
+
{"version":3,"file":"CallControlPanelIcon.d.ts","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanelIcon.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAQ,MAAM,OAAO,CAAC;AAIhD,OAAO,EAEL,YAAY,EAGZ,cAAc,EAMf,MAAM,yBAAyB,CAAC;AAKjC,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAOvE,UAAU,yBAA0B,SAAQ,cAAc;IACxD,MAAM,CAAC,EAAE,sBAAsB,CAAC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,YAAY,EAAE,OAAO,CAAC;CACvB;AAED,UAAU,mBAAoB,SAAQ,IAAI,CAAC,yBAAyB,EAAE,QAAQ,CAAC;IAC7E,OAAO,EAAE,MAAM,GAAG,KAAK,CAAC;CACzB;AAkFD,eAAO,MAAM,cAAc,EAAE,iBAAiB,CAAC,mBAAmB,CA4BjE,CAAC;AAEF,QAAA,MAAM,oBAAoB,EAAE,iBAAiB,CAAC,yBAAyB,GAAG,YAAY,CAWrF,CAAC;AAEF,eAAe,oBAAoB,CAAC"}
|
|
@@ -30,16 +30,18 @@ const StyledStatusIcon = styled.div(({ theme: { base: { colors } }, userStatus }
|
|
|
30
30
|
`;
|
|
31
31
|
});
|
|
32
32
|
StyledStatusIcon.defaultProps = defaultThemeProp;
|
|
33
|
-
const StyledUserStatusIcon = styled(StyledStatusIcon)
|
|
34
|
-
|
|
35
|
-
|
|
33
|
+
const StyledUserStatusIcon = styled(StyledStatusIcon)(({ theme }) => {
|
|
34
|
+
return css `
|
|
35
|
+
border-radius: 50%;
|
|
36
|
+
border: 0.0625rem solid ${theme.components['app-shell'].nav['background-color']};
|
|
36
37
|
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
`;
|
|
38
|
+
${StyledIcon} {
|
|
39
|
+
display: block;
|
|
40
|
+
width: 100%;
|
|
41
|
+
margin: 0 auto;
|
|
42
|
+
}
|
|
43
|
+
`;
|
|
44
|
+
});
|
|
43
45
|
StyledUserStatusIcon.defaultProps = defaultThemeProp;
|
|
44
46
|
const StyledPanelVisibilityIcon = styled(Icon) `
|
|
45
47
|
width: 0.875rem;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CallControlPanelIcon.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanelIcon.tsx"],"names":[],"mappings":";AAAA,OAAO,EAAqB,IAAI,EAAE,MAAM,OAAO,CAAC;AAChD,OAAO,MAAM,EAAE,EAAE,GAAG,EAAgB,MAAM,mBAAmB,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAEzC,OAAO,EACL,gBAAgB,EAEhB,IAAI,EACJ,YAAY,EAGZ,YAAY,EACZ,UAAU,EACV,QAAQ,EACR,kBAAkB,EACnB,MAAM,yBAAyB,CAAC;AAEjC,OAAO,KAAK,WAAW,MAAM,gEAAgE,CAAC;AAC9F,OAAO,KAAK,eAAe,MAAM,sEAAsE,CAAC;AAIxG,YAAY,CAAC,WAAW,EAAE,eAAe,CAAC,CAAC;AAe3C,MAAM,YAAY,GAAyE;IACzF,WAAW,EAAE,aAAa;IAC1B,SAAS,EAAE,aAAa;IACxB,IAAI,EAAE,YAAY;IAClB,UAAU,EAAE,cAAc;IAC1B,MAAM,EAAE,aAAa;CACtB,CAAC;AAEF,MAAM,WAAW,GAAyD;IACxE,WAAW,EAAE,OAAO;IACpB,SAAS,EAAE,SAAS;IACpB,IAAI,EAAE,OAAO;IACb,UAAU,EAAE,OAAO;IACnB,MAAM,EAAE,OAAO;CAChB,CAAC;AAEF,MAAM,gBAAgB,GAAG,MAAM,CAAC,GAAG,CACjC,CAAC,EACC,KAAK,EAAE,EACL,IAAI,EAAE,EAAE,MAAM,EAAE,EACjB,EACD,UAAU,EACX,EAAE,EAAE;IACH,MAAM,CAAC,SAAS,EAAE,YAAY,CAAC,GAAG,YAAY,CAAC,UAAU,CAAC,CAAC,KAAK,CAAC,GAAG,EAAE,CAAC,CAGtE,CAAC;IACF,MAAM,OAAO,GAAG,MAAM,CAAC,SAAS,CAAC,CAAC,YAAY,CAAC,CAAC;IAChD,MAAM,OAAO,GAAG,aAAa,CAAC,OAAO,CAAC,CAAC;IACvC,OAAO,GAAG,CAAA;0BACY,OAAO;eAClB,OAAO;KACjB,CAAC;AACJ,CAAC,CACF,CAAC;AAEF,gBAAgB,CAAC,YAAY,GAAG,gBAAgB,CAAC;AAEjD,MAAM,oBAAoB,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAA
|
|
1
|
+
{"version":3,"file":"CallControlPanelIcon.js","sourceRoot":"","sources":["../../../src/components/CallControlPanel/CallControlPanelIcon.tsx"],"names":[],"mappings":"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","sourcesContent":["import { FunctionComponent, memo } from 'react';\nimport styled, { css, DefaultTheme } from 'styled-components';\nimport { readableColor } from 'polished';\n\nimport {\n defaultThemeProp,\n ForwardProps,\n Icon,\n registerIcon,\n NoChildrenProp,\n OmitStrict,\n StyledAvatar,\n StyledIcon,\n useTheme,\n VisuallyHiddenText\n} from '@pega/cosmos-react-core';\nimport { IconName } from '@pega/cosmos-react-core/lib/components/Icon/iconNames';\nimport * as headsetIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/headset.icon';\nimport * as eyeOffSolidIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/eye-off-solid.icon';\n\nimport type { UserAvailabilityStatus } from './CallControlPanel.types';\n\nregisterIcon(headsetIcon, eyeOffSolidIcon);\n\ntype ThemeColor = keyof OmitStrict<DefaultTheme['base']['colors'], 'white' | 'black'>;\ntype ThemeColorVariant = 'extra-light' | 'light' | 'medium' | 'dark' | 'extra-dark';\n\ninterface CallControlPanelIconProps extends NoChildrenProp {\n status?: UserAvailabilityStatus;\n label: string;\n panelVisible: boolean;\n}\n\ninterface UserStatusIconProps extends Pick<CallControlPanelIconProps, 'status'> {\n variant: 'icon' | 'dot';\n}\n\nconst colorMapping: Record<UserAvailabilityStatus, `${ThemeColor}-${ThemeColorVariant}`> = {\n unavailable: 'slate-light',\n available: 'green-light',\n busy: 'red-medium',\n after_work: 'orange-light',\n logout: 'slate-light'\n};\n\nconst iconMapping: Record<UserAvailabilityStatus, IconName | undefined> = {\n unavailable: 'times',\n available: undefined,\n busy: 'minus',\n after_work: 'clock',\n logout: 'times'\n};\n\nconst StyledStatusIcon = styled.div<{ userStatus: UserAvailabilityStatus }>(\n ({\n theme: {\n base: { colors }\n },\n userStatus\n }) => {\n const [colorName, colorVariant] = colorMapping[userStatus].split('-', 2) as [\n ThemeColor,\n ThemeColorVariant\n ];\n const bgColor = colors[colorName][colorVariant];\n const fgColor = readableColor(bgColor);\n return css`\n background-color: ${bgColor};\n color: ${fgColor};\n `;\n }\n);\n\nStyledStatusIcon.defaultProps = defaultThemeProp;\n\nconst StyledUserStatusIcon = styled(StyledStatusIcon)(({ theme }) => {\n return css`\n border-radius: 50%;\n border: 0.0625rem solid ${theme.components['app-shell'].nav['background-color']};\n\n ${StyledIcon} {\n display: block;\n width: 100%;\n margin: 0 auto;\n }\n `;\n});\n\nStyledUserStatusIcon.defaultProps = defaultThemeProp;\n\nconst StyledPanelVisibilityIcon = styled(Icon)`\n width: 0.875rem;\n height: 0.875rem;\n fill: ${p => p.theme.base.colors.gray.medium};\n`;\n\nStyledPanelVisibilityIcon.defaultProps = defaultThemeProp;\n\nconst StyledCallControlPanelIcon = styled(StyledStatusIcon)`\n ${StyledUserStatusIcon}, ${StyledPanelVisibilityIcon} {\n position: absolute;\n width: 0.875rem;\n height: 0.875rem;\n z-index: 1;\n }\n\n ${StyledUserStatusIcon} {\n inset-block-start: -0.25rem;\n inset-inline-end: -0.25rem;\n }\n\n ${StyledPanelVisibilityIcon} {\n inset-block-end: -0.25rem;\n inset-inline-end: -0.25rem;\n }\n`;\n\nexport const UserStatusIcon: FunctionComponent<UserStatusIconProps> = memo(\n ({ status = 'logout', variant }) => {\n const {\n base: { colors }\n } = useTheme();\n const [colorName, colorVariant] = colorMapping[status].split('-', 2) as [\n ThemeColor,\n ThemeColorVariant\n ];\n const bgColor = colors[colorName][colorVariant];\n const iconName = iconMapping[status];\n\n return variant === 'dot' ? (\n <svg\n role='presentation'\n height='1rem'\n width='1rem'\n viewBox='0 0 10 10'\n xmlns='http://www.w3.org/2000/svg'\n >\n <circle cx='50%' cy='50%' r='50%' fill={bgColor} />\n </svg>\n ) : (\n <StyledUserStatusIcon userStatus={status}>\n {iconName && <Icon name={iconName} />}\n </StyledUserStatusIcon>\n );\n }\n);\n\nconst CallControlPanelIcon: FunctionComponent<CallControlPanelIconProps & ForwardProps> = memo(\n ({ status = 'logout', label, panelVisible, ...restProps }) => {\n return (\n <StyledCallControlPanelIcon as={StyledAvatar} {...restProps} size='m' userStatus={status}>\n <Icon name='headset' />\n {status !== 'available' && <UserStatusIcon variant='icon' status={status} />}\n {!panelVisible && <StyledPanelVisibilityIcon name='eye-off-solid' />}\n <VisuallyHiddenText>{label}</VisuallyHiddenText>\n </StyledCallControlPanelIcon>\n );\n }\n);\n\nexport default CallControlPanelIcon;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-cs",
|
|
3
|
-
"version": "4.0.0-dev.1.
|
|
3
|
+
"version": "4.0.0-dev.1.1",
|
|
4
4
|
"author": "Pegasystems",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"repository": {
|
|
@@ -20,8 +20,8 @@
|
|
|
20
20
|
"build": "tsc -b"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@pega/cosmos-react-core": "4.0.0-dev.1.
|
|
24
|
-
"@pega/cosmos-react-dnd": "4.0.0-dev.1.
|
|
23
|
+
"@pega/cosmos-react-core": "4.0.0-dev.1.1",
|
|
24
|
+
"@pega/cosmos-react-dnd": "4.0.0-dev.1.1",
|
|
25
25
|
"@types/react": "^16.14.24 || ^17.0.38",
|
|
26
26
|
"@types/react-dom": "^16.9.14 || ^17.0.11",
|
|
27
27
|
"@types/styled-components": "^5.1.26",
|