@pega/cosmos-react-work 3.0.0-dev.18.0 → 3.0.0-dev.18.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":"CaseHeader.d.ts","sourceRoot":"","sources":["../../../src/components/CaseHeader/CaseHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EACjB,YAAY,EACZ,GAAG,EAGJ,MAAM,OAAO,CAAC;AAIf,OAAO,EACL,MAAM,EAUN,YAAY,EAMZ,aAAa,EAIb,cAAc,
|
|
1
|
+
{"version":3,"file":"CaseHeader.d.ts","sourceRoot":"","sources":["../../../src/components/CaseHeader/CaseHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAEL,iBAAiB,EACjB,YAAY,EACZ,GAAG,EAGJ,MAAM,OAAO,CAAC;AAIf,OAAO,EACL,MAAM,EAUN,YAAY,EAMZ,aAAa,EAIb,cAAc,EAEf,MAAM,yBAAyB,CAAC;AAOjC,MAAM,WAAW,eAAgB,SAAQ,cAAc;IACrD,sDAAsD;IACtD,OAAO,CAAC,EAAE,MAAM,EAAE,CAAC;IACnB,uEAAuE;IACvE,eAAe,CAAC,EAAE,MAAM,EAAE,CAAC;IAC3B,qDAAqD;IACrD,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IAMpB,2CAA2C;IAC3C,MAAM,EAAE,MAAM,CAAC;IACf,mDAAmD;IACnD,OAAO,EAAE,MAAM,CAAC;IAChB,8FAA8F;IAC9F,QAAQ,CAAC,EAAE;QAAE,IAAI,EAAE,MAAM,CAAA;KAAE,GAAG,YAAY,CAAC;IAC3C,kFAAkF;IAClF,WAAW,CAAC,EAAE,aAAa,EAAE,CAAC;IAC9B,qDAAqD;IACrD,IAAI,CAAC,EAAE,YAAY,CAAC;IACpB,8GAA8G;IAC9G,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,4FAA4F;IAC5F,gBAAgB,CAAC,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;IAChD,oCAAoC;IACpC,GAAG,CAAC,EAAE,GAAG,CAAC,WAAW,CAAC,CAAC;CACxB;AAED,eAAO,MAAM,gBAAgB,4GAc3B,CAAC;AA4EH,eAAO,MAAM,qBAAqB,yGAShC,CAAC;AAIH,QAAA,MAAM,UAAU,EAAE,iBAAiB,CAAC,eAAe,GAAG,YAAY,CAkHjE,CAAC;AAEF,eAAe,UAAU,CAAC"}
|
|
@@ -2,7 +2,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
|
|
|
2
2
|
import { forwardRef } from 'react';
|
|
3
3
|
import styled, { css } from 'styled-components';
|
|
4
4
|
import { hideVisually, parseToHsl, readableColor, transparentize } from 'polished';
|
|
5
|
-
import { Breadcrumbs, Flex, Icon, registerIcon, Text, StyledBreadcrumbs, StyledIcon, StyledPopover, defaultThemeProp, tryCatch, calculateFontSize, Link, StyledButton, StyledText, Button, MenuButton, useI18n } from '@pega/cosmos-react-core';
|
|
5
|
+
import { Breadcrumbs, Flex, Icon, registerIcon, Text, StyledBreadcrumbs, StyledIcon, StyledPopover, defaultThemeProp, tryCatch, calculateFontSize, Link, StyledButton, StyledText, Button, MenuButton, useI18n, StyledTooltip } from '@pega/cosmos-react-core';
|
|
6
6
|
import { StyledMenu } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';
|
|
7
7
|
import * as pencilIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pencil.icon';
|
|
8
8
|
import * as moreIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/more.icon';
|
|
@@ -76,7 +76,7 @@ const StyledCaseHeaderText = styled.div(({ theme }) => {
|
|
|
76
76
|
}
|
|
77
77
|
}
|
|
78
78
|
|
|
79
|
-
${StyledPopover} {
|
|
79
|
+
${StyledPopover}:not(${StyledTooltip}) {
|
|
80
80
|
color: ${theme.base.palette['foreground-color']};
|
|
81
81
|
}
|
|
82
82
|
}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CaseHeader.js","sourceRoot":"","sources":["../../../src/components/CaseHeader/CaseHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n ReactElement,\n Ref,\n PropsWithoutRef,\n MouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually, parseToHsl, readableColor, transparentize } from 'polished';\n\nimport {\n Action,\n Breadcrumbs,\n Flex,\n Icon,\n registerIcon,\n Text,\n StyledBreadcrumbs,\n StyledIcon,\n StyledPopover,\n defaultThemeProp,\n ForwardProps,\n tryCatch,\n calculateFontSize,\n Link,\n StyledButton,\n StyledText,\n MenuItemProps,\n Button,\n MenuButton,\n useI18n,\n NoChildrenProp\n} from '@pega/cosmos-react-core';\nimport { StyledMenu } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';\nimport * as pencilIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pencil.icon';\nimport * as moreIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/more.icon';\n\nregisterIcon(pencilIcon, moreIcon);\n\nexport interface CaseHeaderProps extends NoChildrenProp {\n /** Case level actions available in an action menu. */\n actions?: Action[];\n /** Visually promoted case level actions available outside the menu. */\n promotedActions?: Action[];\n /** A callback for when the edit button is clicked */\n onEdit?: () => void;\n /**\n * Indicator for the current size of the users screen.\n * @internal\n */\n isMediumOrAbove?: boolean;\n /** A Case ID to display in the heading. */\n caseId: string;\n /** A text region for the title of the CaseView. */\n heading: string;\n /** A set of props including an href that will be forwarded to the case heading and caseId. */\n caseLink?: { href: string } & ForwardProps;\n /** A set of Link props representing the case parents, rendered as Breadcrumbs. */\n parentCases?: MenuItemProps[];\n /** An icon to serve as a visual for the CaseView. */\n icon?: ReactElement;\n /** Indicates if the current user is following the case. This should be updated based on onFollowedChange. */\n followed?: boolean;\n /** Called when user chooses to follow or unfollow the case. Use this to update followed. */\n onFollowedChange?: (following: boolean) => void;\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLElement>;\n}\n\nexport const StyledCaseHeader = styled.header(({ theme }) => {\n const color = tryCatch(() => readableColor(theme.base.palette['brand-primary']));\n\n return css`\n background-color: ${theme.base.palette['brand-primary']};\n color: ${color};\n padding: calc(2 * ${theme.base.spacing});\n position: relative;\n\n ${StyledMenu} {\n color: ${theme.base.palette['foreground-color']};\n z-index: ${theme.base['z-index'].popover + 1};\n }\n `;\n});\n\nStyledCaseHeader.defaultProps = defaultThemeProp;\n\nconst StyledCaseIconWrap = styled.div(({ theme }) => {\n const spacing = theme.base.spacing;\n const borderRadius = theme.base['border-radius'];\n const backgroundColor = tryCatch(() => {\n const { lightness } = parseToHsl(theme.base.palette['brand-primary']);\n return lightness > 0.35 ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)';\n });\n\n return css`\n background: ${backgroundColor};\n border-radius: calc(${borderRadius} / 2);\n width: calc(5 * ${spacing});\n height: calc(5 * ${spacing});\n ${StyledIcon} {\n font-size: calc(3 * ${spacing});\n margin: auto;\n }\n `;\n});\n\nStyledCaseIconWrap.defaultProps = defaultThemeProp;\n\nconst StyledFollowIconWrap = styled.label`\n font-size: 1.25rem;\n input {\n ${hideVisually}\n }\n\n input:focus + svg {\n box-shadow: ${({ theme }) => theme.base.shadow['focus-inverted']};\n }\n`;\n\nStyledFollowIconWrap.defaultProps = defaultThemeProp;\n\nconst StyledCaseHeaderText = styled.div(({ theme }) => {\n const color = readableColor(theme.base.palette['brand-primary']);\n const transparentColor = tryCatch(() => transparentize(0.2, color));\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n return css`\n word-break: break-word;\n\n ${StyledBreadcrumbs} {\n > a,\n > span,\n > button,\n > svg {\n color: ${transparentColor};\n font-size: ${fontSize.s};\n font-weight: normal;\n }\n\n > a,\n > button {\n &:focus {\n box-shadow: ${theme.base.shadow['focus-inverted']};\n }\n }\n\n ${StyledPopover} {\n color: ${theme.base.palette['foreground-color']};\n }\n }\n\n > ${StyledText} > ${StyledButton} {\n color: ${color};\n }\n `;\n});\n\nStyledCaseHeaderText.defaultProps = defaultThemeProp;\n\nexport const StyledPromotedActions = styled.div(({ theme }) => {\n return css`\n padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n\n ${StyledButton} {\n margin-inline-start: 0;\n }\n `;\n});\n\nStyledPromotedActions.defaultProps = defaultThemeProp;\n\nconst CaseHeader: FunctionComponent<CaseHeaderProps & ForwardProps> = forwardRef(\n (\n {\n caseId,\n heading,\n caseLink = { href: '' },\n parentCases,\n isMediumOrAbove = true,\n icon,\n followed,\n onFollowedChange,\n actions = [],\n promotedActions = [],\n onEdit,\n ...restProps\n }: PropsWithoutRef<CaseHeaderProps>,\n ref: CaseHeaderProps['ref']\n ) => {\n const { href, ...restLinkProps } = caseLink;\n const t = useI18n();\n const menuItems: MenuItemProps[] = actions.map(action => {\n return {\n ...action,\n primary: action.text,\n visual: action.icon ? <Icon name={action.icon} /> : null\n };\n });\n\n return (\n <div>\n <Flex\n {...restProps}\n as={StyledCaseHeader}\n container={{ gap: 2, alignItems: 'start' }}\n ref={ref}\n >\n {icon && (\n <Flex container item={{ shrink: 0 }} as={StyledCaseIconWrap}>\n {icon}\n </Flex>\n )}\n <Flex\n as={StyledCaseHeaderText}\n container={{ direction: 'column' }}\n item={{ grow: 1, shrink: 0, basis: '0' }}\n >\n <Text variant='h1'>\n {href ? (\n <Link {...restLinkProps} href={href}>\n {heading}\n </Link>\n ) : (\n heading\n )}\n </Text>\n <Breadcrumbs\n path={[\n ...(parentCases || []),\n { ...restLinkProps, id: caseId, primary: caseId, href }\n ]}\n />\n </Flex>\n <div>\n {onEdit && (\n <Button icon variant='simple' onClick={onEdit} label={t('edit')}>\n <Icon name='pencil' />\n </Button>\n )}\n <MenuButton\n icon='more'\n iconOnly\n variant='simple'\n text={t('actions')}\n menu={{\n items:\n followed !== undefined\n ? [\n {\n id: 'follow',\n primary: followed ? t('unfollow') : t('follow'),\n onClick: () => onFollowedChange?.(!followed)\n },\n ...menuItems\n ]\n : menuItems,\n scrollAt: 20\n }}\n popover={\n isMediumOrAbove\n ? {\n portal: true\n }\n : undefined\n }\n />\n </div>\n </Flex>\n {promotedActions.length > 0 ? (\n <Flex as={StyledPromotedActions} container={{ wrap: 'wrap', gap: 1 }}>\n {promotedActions.map(promotedAction => (\n <Button\n variant='secondary'\n onClick={(e: MouseEvent<HTMLButtonElement>) =>\n promotedAction.onClick?.(promotedAction.id, e)\n }\n >\n {promotedAction.text}\n </Button>\n ))}\n </Flex>\n ) : null}\n </div>\n );\n }\n);\n\nexport default CaseHeader;\n"]}
|
|
1
|
+
{"version":3,"file":"CaseHeader.js","sourceRoot":"","sources":["../../../src/components/CaseHeader/CaseHeader.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n forwardRef,\n FunctionComponent,\n ReactElement,\n Ref,\n PropsWithoutRef,\n MouseEvent\n} from 'react';\nimport styled, { css } from 'styled-components';\nimport { hideVisually, parseToHsl, readableColor, transparentize } from 'polished';\n\nimport {\n Action,\n Breadcrumbs,\n Flex,\n Icon,\n registerIcon,\n Text,\n StyledBreadcrumbs,\n StyledIcon,\n StyledPopover,\n defaultThemeProp,\n ForwardProps,\n tryCatch,\n calculateFontSize,\n Link,\n StyledButton,\n StyledText,\n MenuItemProps,\n Button,\n MenuButton,\n useI18n,\n NoChildrenProp,\n StyledTooltip\n} from '@pega/cosmos-react-core';\nimport { StyledMenu } from '@pega/cosmos-react-core/lib/components/Menu/Menu.styles';\nimport * as pencilIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/pencil.icon';\nimport * as moreIcon from '@pega/cosmos-react-core/lib/components/Icon/icons/more.icon';\n\nregisterIcon(pencilIcon, moreIcon);\n\nexport interface CaseHeaderProps extends NoChildrenProp {\n /** Case level actions available in an action menu. */\n actions?: Action[];\n /** Visually promoted case level actions available outside the menu. */\n promotedActions?: Action[];\n /** A callback for when the edit button is clicked */\n onEdit?: () => void;\n /**\n * Indicator for the current size of the users screen.\n * @internal\n */\n isMediumOrAbove?: boolean;\n /** A Case ID to display in the heading. */\n caseId: string;\n /** A text region for the title of the CaseView. */\n heading: string;\n /** A set of props including an href that will be forwarded to the case heading and caseId. */\n caseLink?: { href: string } & ForwardProps;\n /** A set of Link props representing the case parents, rendered as Breadcrumbs. */\n parentCases?: MenuItemProps[];\n /** An icon to serve as a visual for the CaseView. */\n icon?: ReactElement;\n /** Indicates if the current user is following the case. This should be updated based on onFollowedChange. */\n followed?: boolean;\n /** Called when user chooses to follow or unfollow the case. Use this to update followed. */\n onFollowedChange?: (following: boolean) => void;\n /** Ref for the wrapping element. */\n ref?: Ref<HTMLElement>;\n}\n\nexport const StyledCaseHeader = styled.header(({ theme }) => {\n const color = tryCatch(() => readableColor(theme.base.palette['brand-primary']));\n\n return css`\n background-color: ${theme.base.palette['brand-primary']};\n color: ${color};\n padding: calc(2 * ${theme.base.spacing});\n position: relative;\n\n ${StyledMenu} {\n color: ${theme.base.palette['foreground-color']};\n z-index: ${theme.base['z-index'].popover + 1};\n }\n `;\n});\n\nStyledCaseHeader.defaultProps = defaultThemeProp;\n\nconst StyledCaseIconWrap = styled.div(({ theme }) => {\n const spacing = theme.base.spacing;\n const borderRadius = theme.base['border-radius'];\n const backgroundColor = tryCatch(() => {\n const { lightness } = parseToHsl(theme.base.palette['brand-primary']);\n return lightness > 0.35 ? 'rgba(0, 0, 0, 0.2)' : 'rgba(255, 255, 255, 0.2)';\n });\n\n return css`\n background: ${backgroundColor};\n border-radius: calc(${borderRadius} / 2);\n width: calc(5 * ${spacing});\n height: calc(5 * ${spacing});\n ${StyledIcon} {\n font-size: calc(3 * ${spacing});\n margin: auto;\n }\n `;\n});\n\nStyledCaseIconWrap.defaultProps = defaultThemeProp;\n\nconst StyledFollowIconWrap = styled.label`\n font-size: 1.25rem;\n input {\n ${hideVisually}\n }\n\n input:focus + svg {\n box-shadow: ${({ theme }) => theme.base.shadow['focus-inverted']};\n }\n`;\n\nStyledFollowIconWrap.defaultProps = defaultThemeProp;\n\nconst StyledCaseHeaderText = styled.div(({ theme }) => {\n const color = readableColor(theme.base.palette['brand-primary']);\n const transparentColor = tryCatch(() => transparentize(0.2, color));\n const fontSize = calculateFontSize(theme.base['font-size'], theme.base['font-scale']);\n return css`\n word-break: break-word;\n\n ${StyledBreadcrumbs} {\n > a,\n > span,\n > button,\n > svg {\n color: ${transparentColor};\n font-size: ${fontSize.s};\n font-weight: normal;\n }\n\n > a,\n > button {\n &:focus {\n box-shadow: ${theme.base.shadow['focus-inverted']};\n }\n }\n\n ${StyledPopover}:not(${StyledTooltip}) {\n color: ${theme.base.palette['foreground-color']};\n }\n }\n\n > ${StyledText} > ${StyledButton} {\n color: ${color};\n }\n `;\n});\n\nStyledCaseHeaderText.defaultProps = defaultThemeProp;\n\nexport const StyledPromotedActions = styled.div(({ theme }) => {\n return css`\n padding: ${theme.base.spacing} calc(2 * ${theme.base.spacing});\n border-bottom: 0.0625rem solid ${theme.base.palette['border-line']};\n\n ${StyledButton} {\n margin-inline-start: 0;\n }\n `;\n});\n\nStyledPromotedActions.defaultProps = defaultThemeProp;\n\nconst CaseHeader: FunctionComponent<CaseHeaderProps & ForwardProps> = forwardRef(\n (\n {\n caseId,\n heading,\n caseLink = { href: '' },\n parentCases,\n isMediumOrAbove = true,\n icon,\n followed,\n onFollowedChange,\n actions = [],\n promotedActions = [],\n onEdit,\n ...restProps\n }: PropsWithoutRef<CaseHeaderProps>,\n ref: CaseHeaderProps['ref']\n ) => {\n const { href, ...restLinkProps } = caseLink;\n const t = useI18n();\n const menuItems: MenuItemProps[] = actions.map(action => {\n return {\n ...action,\n primary: action.text,\n visual: action.icon ? <Icon name={action.icon} /> : null\n };\n });\n\n return (\n <div>\n <Flex\n {...restProps}\n as={StyledCaseHeader}\n container={{ gap: 2, alignItems: 'start' }}\n ref={ref}\n >\n {icon && (\n <Flex container item={{ shrink: 0 }} as={StyledCaseIconWrap}>\n {icon}\n </Flex>\n )}\n <Flex\n as={StyledCaseHeaderText}\n container={{ direction: 'column' }}\n item={{ grow: 1, shrink: 0, basis: '0' }}\n >\n <Text variant='h1'>\n {href ? (\n <Link {...restLinkProps} href={href}>\n {heading}\n </Link>\n ) : (\n heading\n )}\n </Text>\n <Breadcrumbs\n path={[\n ...(parentCases || []),\n { ...restLinkProps, id: caseId, primary: caseId, href }\n ]}\n />\n </Flex>\n <div>\n {onEdit && (\n <Button icon variant='simple' onClick={onEdit} label={t('edit')}>\n <Icon name='pencil' />\n </Button>\n )}\n <MenuButton\n icon='more'\n iconOnly\n variant='simple'\n text={t('actions')}\n menu={{\n items:\n followed !== undefined\n ? [\n {\n id: 'follow',\n primary: followed ? t('unfollow') : t('follow'),\n onClick: () => onFollowedChange?.(!followed)\n },\n ...menuItems\n ]\n : menuItems,\n scrollAt: 20\n }}\n popover={\n isMediumOrAbove\n ? {\n portal: true\n }\n : undefined\n }\n />\n </div>\n </Flex>\n {promotedActions.length > 0 ? (\n <Flex as={StyledPromotedActions} container={{ wrap: 'wrap', gap: 1 }}>\n {promotedActions.map(promotedAction => (\n <Button\n variant='secondary'\n onClick={(e: MouseEvent<HTMLButtonElement>) =>\n promotedAction.onClick?.(promotedAction.id, e)\n }\n >\n {promotedAction.text}\n </Button>\n ))}\n </Flex>\n ) : null}\n </div>\n );\n }\n);\n\nexport default CaseHeader;\n"]}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@pega/cosmos-react-work",
|
|
3
|
-
"version": "3.0.0-dev.18.
|
|
3
|
+
"version": "3.0.0-dev.18.1",
|
|
4
4
|
"author": "Pegasystems",
|
|
5
5
|
"license": "SEE LICENSE IN LICENSE",
|
|
6
6
|
"repository": {
|
|
@@ -20,7 +20,7 @@
|
|
|
20
20
|
"build": "tsc -b"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@pega/cosmos-react-core": "3.0.0-dev.18.
|
|
23
|
+
"@pega/cosmos-react-core": "3.0.0-dev.18.1",
|
|
24
24
|
"@types/react": "^16.14.24 || ^17.0.38",
|
|
25
25
|
"@types/react-dom": "^16.9.14 || ^17.0.11",
|
|
26
26
|
"@types/styled-components": "^5.1.7",
|