@workday/canvas-kit-react 6.0.0-alpha.0-next.33 → 6.0.0-alpha.0-next.39
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/banner/index.ts +1 -4
- package/banner/lib/Banner.tsx +85 -111
- package/banner/lib/BannerActionText.tsx +46 -0
- package/banner/lib/BannerIcon.tsx +40 -0
- package/banner/lib/BannerLabel.tsx +29 -0
- package/banner/lib/hooks/index.ts +6 -0
- package/banner/lib/hooks/useBanner.tsx +13 -0
- package/banner/lib/hooks/useBannerActionText.tsx +12 -0
- package/banner/lib/hooks/useBannerIcon.tsx +19 -0
- package/banner/lib/hooks/useBannerLabel.tsx +12 -0
- package/banner/lib/hooks/useBannerModel.tsx +63 -0
- package/banner/lib/hooks/useThemedPalette.ts +53 -0
- package/button/lib/IconButton.tsx +5 -2
- package/common/lib/styles/hideMouseFocus.ts +3 -2
- package/dist/commonjs/banner/index.d.ts +1 -3
- package/dist/commonjs/banner/index.d.ts.map +1 -1
- package/dist/commonjs/banner/index.js +1 -6
- package/dist/commonjs/banner/lib/Banner.d.ts +17 -33
- package/dist/commonjs/banner/lib/Banner.d.ts.map +1 -1
- package/dist/commonjs/banner/lib/Banner.js +44 -69
- package/dist/commonjs/banner/lib/BannerActionText.d.ts +14 -0
- package/dist/commonjs/banner/lib/BannerActionText.d.ts.map +1 -0
- package/dist/commonjs/banner/lib/BannerActionText.js +42 -0
- package/dist/commonjs/banner/lib/BannerIcon.d.ts +14 -0
- package/dist/commonjs/banner/lib/BannerIcon.d.ts.map +1 -0
- package/dist/commonjs/banner/lib/BannerIcon.js +47 -0
- package/dist/commonjs/banner/lib/BannerLabel.d.ts +13 -0
- package/dist/commonjs/banner/lib/BannerLabel.d.ts.map +1 -0
- package/dist/commonjs/banner/lib/BannerLabel.js +45 -0
- package/dist/commonjs/banner/lib/hooks/index.d.ts +7 -0
- package/dist/commonjs/banner/lib/hooks/index.d.ts.map +1 -0
- package/dist/commonjs/banner/lib/hooks/index.js +11 -0
- package/dist/commonjs/banner/lib/hooks/useBanner.d.ts +16 -0
- package/dist/commonjs/banner/lib/hooks/useBanner.d.ts.map +1 -0
- package/dist/commonjs/banner/lib/hooks/useBanner.js +14 -0
- package/dist/commonjs/banner/lib/hooks/useBannerActionText.d.ts +15 -0
- package/dist/commonjs/banner/lib/hooks/useBannerActionText.d.ts.map +1 -0
- package/dist/commonjs/banner/lib/hooks/useBannerActionText.js +13 -0
- package/dist/commonjs/banner/lib/hooks/useBannerIcon.d.ts +18 -0
- package/dist/commonjs/banner/lib/hooks/useBannerIcon.d.ts.map +1 -0
- package/dist/commonjs/banner/lib/hooks/useBannerIcon.js +19 -0
- package/dist/commonjs/banner/lib/hooks/useBannerLabel.d.ts +15 -0
- package/dist/commonjs/banner/lib/hooks/useBannerLabel.d.ts.map +1 -0
- package/dist/commonjs/banner/lib/hooks/useBannerLabel.js +13 -0
- package/dist/commonjs/banner/lib/hooks/useBannerModel.d.ts +37 -0
- package/dist/commonjs/banner/lib/hooks/useBannerModel.d.ts.map +1 -0
- package/dist/commonjs/banner/lib/hooks/useBannerModel.js +22 -0
- package/dist/commonjs/banner/lib/hooks/useThemedPalette.d.ts +11 -0
- package/dist/commonjs/banner/lib/hooks/useThemedPalette.d.ts.map +1 -0
- package/dist/commonjs/banner/lib/hooks/useThemedPalette.js +39 -0
- package/dist/commonjs/button/lib/IconButton.d.ts +5 -2
- package/dist/commonjs/button/lib/IconButton.d.ts.map +1 -1
- package/dist/commonjs/common/lib/styles/hideMouseFocus.d.ts +3 -2
- package/dist/commonjs/common/lib/styles/hideMouseFocus.d.ts.map +1 -1
- package/dist/commonjs/loading-animation/lib/LoadingDots.js +3 -6
- package/dist/commonjs/pagination/lib/Pagination/common/Stack.d.ts +1 -1
- package/dist/commonjs/popup/lib/PopupCard.d.ts.map +1 -1
- package/dist/commonjs/popup/lib/PopupCard.js +3 -9
- package/dist/commonjs/popup/lib/hooks/useReturnFocus.d.ts +1 -1
- package/dist/commonjs/popup/lib/hooks/useReturnFocus.js +1 -1
- package/dist/commonjs/tabs/lib/menu/MenuList.d.ts.map +1 -1
- package/dist/commonjs/tabs/lib/menu/MenuList.js +1 -1
- package/dist/commonjs/tabs/lib/overflow/useOverflowModel.d.ts.map +1 -1
- package/dist/commonjs/tabs/lib/overflow/useOverflowModel.js +9 -0
- package/dist/commonjs/tabs/lib/overflow/useOverflowTarget.js +1 -1
- package/dist/commonjs/tooltip/lib/Tooltip.d.ts +9 -1
- package/dist/commonjs/tooltip/lib/Tooltip.d.ts.map +1 -1
- package/dist/commonjs/tooltip/lib/Tooltip.js +7 -2
- package/dist/commonjs/tooltip/lib/useTooltip.d.ts +9 -1
- package/dist/commonjs/tooltip/lib/useTooltip.d.ts.map +1 -1
- package/dist/commonjs/tooltip/lib/useTooltip.js +13 -8
- package/dist/es6/banner/index.d.ts +1 -3
- package/dist/es6/banner/index.d.ts.map +1 -1
- package/dist/es6/banner/index.js +1 -3
- package/dist/es6/banner/lib/Banner.d.ts +17 -33
- package/dist/es6/banner/lib/Banner.d.ts.map +1 -1
- package/dist/es6/banner/lib/Banner.js +46 -71
- package/dist/es6/banner/lib/BannerActionText.d.ts +14 -0
- package/dist/es6/banner/lib/BannerActionText.d.ts.map +1 -0
- package/dist/es6/banner/lib/BannerActionText.js +40 -0
- package/dist/es6/banner/lib/BannerIcon.d.ts +14 -0
- package/dist/es6/banner/lib/BannerIcon.d.ts.map +1 -0
- package/dist/es6/banner/lib/BannerIcon.js +45 -0
- package/dist/es6/banner/lib/BannerLabel.d.ts +13 -0
- package/dist/es6/banner/lib/BannerLabel.d.ts.map +1 -0
- package/dist/es6/banner/lib/BannerLabel.js +36 -0
- package/dist/es6/banner/lib/hooks/index.d.ts +7 -0
- package/dist/es6/banner/lib/hooks/index.d.ts.map +1 -0
- package/dist/es6/banner/lib/hooks/index.js +6 -0
- package/dist/es6/banner/lib/hooks/useBanner.d.ts +16 -0
- package/dist/es6/banner/lib/hooks/useBanner.d.ts.map +1 -0
- package/dist/es6/banner/lib/hooks/useBanner.js +12 -0
- package/dist/es6/banner/lib/hooks/useBannerActionText.d.ts +15 -0
- package/dist/es6/banner/lib/hooks/useBannerActionText.d.ts.map +1 -0
- package/dist/es6/banner/lib/hooks/useBannerActionText.js +11 -0
- package/dist/es6/banner/lib/hooks/useBannerIcon.d.ts +18 -0
- package/dist/es6/banner/lib/hooks/useBannerIcon.d.ts.map +1 -0
- package/dist/es6/banner/lib/hooks/useBannerIcon.js +17 -0
- package/dist/es6/banner/lib/hooks/useBannerLabel.d.ts +15 -0
- package/dist/es6/banner/lib/hooks/useBannerLabel.d.ts.map +1 -0
- package/dist/es6/banner/lib/hooks/useBannerLabel.js +11 -0
- package/dist/es6/banner/lib/hooks/useBannerModel.d.ts +37 -0
- package/dist/es6/banner/lib/hooks/useBannerModel.d.ts.map +1 -0
- package/dist/es6/banner/lib/hooks/useBannerModel.js +20 -0
- package/dist/es6/banner/lib/hooks/useThemedPalette.d.ts +11 -0
- package/dist/es6/banner/lib/hooks/useThemedPalette.d.ts.map +1 -0
- package/dist/es6/banner/lib/hooks/useThemedPalette.js +33 -0
- package/dist/es6/button/lib/IconButton.d.ts +5 -2
- package/dist/es6/button/lib/IconButton.d.ts.map +1 -1
- package/dist/es6/common/lib/styles/hideMouseFocus.d.ts +3 -2
- package/dist/es6/common/lib/styles/hideMouseFocus.d.ts.map +1 -1
- package/dist/es6/loading-animation/lib/LoadingDots.js +1 -1
- package/dist/es6/pagination/lib/Pagination/common/Stack.d.ts +1 -1
- package/dist/es6/popup/lib/PopupCard.d.ts.map +1 -1
- package/dist/es6/popup/lib/PopupCard.js +3 -9
- package/dist/es6/popup/lib/hooks/useReturnFocus.d.ts +1 -1
- package/dist/es6/popup/lib/hooks/useReturnFocus.js +1 -1
- package/dist/es6/tabs/lib/menu/MenuList.d.ts.map +1 -1
- package/dist/es6/tabs/lib/menu/MenuList.js +1 -1
- package/dist/es6/tabs/lib/overflow/useOverflowModel.d.ts.map +1 -1
- package/dist/es6/tabs/lib/overflow/useOverflowModel.js +9 -0
- package/dist/es6/tabs/lib/overflow/useOverflowTarget.js +1 -1
- package/dist/es6/tooltip/lib/Tooltip.d.ts +9 -1
- package/dist/es6/tooltip/lib/Tooltip.d.ts.map +1 -1
- package/dist/es6/tooltip/lib/Tooltip.js +7 -2
- package/dist/es6/tooltip/lib/useTooltip.d.ts +9 -1
- package/dist/es6/tooltip/lib/useTooltip.d.ts.map +1 -1
- package/dist/es6/tooltip/lib/useTooltip.js +13 -8
- package/loading-animation/lib/LoadingDots.tsx +1 -1
- package/package.json +7 -6
- package/popup/lib/PopupCard.tsx +19 -30
- package/popup/lib/hooks/useReturnFocus.tsx +1 -1
- package/tabs/lib/menu/MenuList.tsx +2 -3
- package/tabs/lib/overflow/useOverflowModel.tsx +22 -0
- package/tabs/lib/overflow/useOverflowTarget.tsx +1 -1
- package/tooltip/lib/Tooltip.tsx +16 -1
- package/tooltip/lib/useTooltip.tsx +21 -6
- package/ts3.5/dist/commonjs/banner/index.d.ts +1 -3
- package/ts3.5/dist/commonjs/banner/lib/Banner.d.ts +17 -33
- package/ts3.5/dist/commonjs/banner/lib/BannerActionText.d.ts +14 -0
- package/ts3.5/dist/commonjs/banner/lib/BannerIcon.d.ts +14 -0
- package/ts3.5/dist/commonjs/banner/lib/BannerLabel.d.ts +13 -0
- package/ts3.5/dist/commonjs/banner/lib/hooks/index.d.ts +7 -0
- package/ts3.5/dist/commonjs/banner/lib/hooks/useBanner.d.ts +16 -0
- package/ts3.5/dist/commonjs/banner/lib/hooks/useBannerActionText.d.ts +15 -0
- package/ts3.5/dist/commonjs/banner/lib/hooks/useBannerIcon.d.ts +18 -0
- package/ts3.5/dist/commonjs/banner/lib/hooks/useBannerLabel.d.ts +15 -0
- package/ts3.5/dist/commonjs/banner/lib/hooks/useBannerModel.d.ts +37 -0
- package/ts3.5/dist/commonjs/banner/lib/hooks/useThemedPalette.d.ts +11 -0
- package/ts3.5/dist/commonjs/button/lib/IconButton.d.ts +5 -2
- package/ts3.5/dist/commonjs/common/lib/styles/hideMouseFocus.d.ts +3 -2
- package/ts3.5/dist/commonjs/pagination/lib/Pagination/common/Stack.d.ts +1 -1
- package/ts3.5/dist/commonjs/popup/lib/hooks/useReturnFocus.d.ts +1 -1
- package/ts3.5/dist/commonjs/tooltip/lib/Tooltip.d.ts +9 -1
- package/ts3.5/dist/commonjs/tooltip/lib/useTooltip.d.ts +9 -1
- package/ts3.5/dist/es6/banner/index.d.ts +1 -3
- package/ts3.5/dist/es6/banner/lib/Banner.d.ts +17 -33
- package/ts3.5/dist/es6/banner/lib/BannerActionText.d.ts +14 -0
- package/ts3.5/dist/es6/banner/lib/BannerIcon.d.ts +14 -0
- package/ts3.5/dist/es6/banner/lib/BannerLabel.d.ts +13 -0
- package/ts3.5/dist/es6/banner/lib/hooks/index.d.ts +7 -0
- package/ts3.5/dist/es6/banner/lib/hooks/useBanner.d.ts +16 -0
- package/ts3.5/dist/es6/banner/lib/hooks/useBannerActionText.d.ts +15 -0
- package/ts3.5/dist/es6/banner/lib/hooks/useBannerIcon.d.ts +18 -0
- package/ts3.5/dist/es6/banner/lib/hooks/useBannerLabel.d.ts +15 -0
- package/ts3.5/dist/es6/banner/lib/hooks/useBannerModel.d.ts +37 -0
- package/ts3.5/dist/es6/banner/lib/hooks/useThemedPalette.d.ts +11 -0
- package/ts3.5/dist/es6/button/lib/IconButton.d.ts +5 -2
- package/ts3.5/dist/es6/common/lib/styles/hideMouseFocus.d.ts +3 -2
- package/ts3.5/dist/es6/pagination/lib/Pagination/common/Stack.d.ts +1 -1
- package/ts3.5/dist/es6/popup/lib/hooks/useReturnFocus.d.ts +1 -1
- package/ts3.5/dist/es6/tooltip/lib/Tooltip.d.ts +9 -1
- package/ts3.5/dist/es6/tooltip/lib/useTooltip.d.ts +9 -1
package/banner/index.ts
CHANGED
package/banner/lib/Banner.tsx
CHANGED
|
@@ -1,127 +1,101 @@
|
|
|
1
|
+
/** @jsx jsx */
|
|
2
|
+
import {jsx} from '@emotion/core';
|
|
1
3
|
import * as React from 'react';
|
|
2
|
-
import {colors, space, borderRadius, type} from '@workday/canvas-kit-react/tokens';
|
|
3
|
-
import {SystemIcon} from '@workday/canvas-kit-react/icon';
|
|
4
|
-
import {exclamationCircleIcon, exclamationTriangleIcon} from '@workday/canvas-system-icons-web';
|
|
5
|
-
import {ErrorType, focusRing, styled, Themeable} from '@workday/canvas-kit-react/common';
|
|
6
4
|
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
5
|
+
import {borderRadius, CSSProperties, space, type} from '@workday/canvas-kit-react/tokens';
|
|
6
|
+
import {
|
|
7
|
+
createComponent,
|
|
8
|
+
ExtractProps,
|
|
9
|
+
focusRing,
|
|
10
|
+
hideMouseFocus,
|
|
11
|
+
useDefaultModel,
|
|
12
|
+
useIsRTL,
|
|
13
|
+
} from '@workday/canvas-kit-react/common';
|
|
14
|
+
import {Flex} from '@workday/canvas-kit-labs-react/layout';
|
|
11
15
|
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
* The variant of the Banner. Accepts `Full` or `Sticky`.
|
|
23
|
-
* @default BannerVariant.Full
|
|
24
|
-
*/
|
|
25
|
-
variant?: BannerVariant;
|
|
26
|
-
/**
|
|
27
|
-
* The type of error associated with the Banner (if applicable).
|
|
28
|
-
* @default ErrorType.Alert
|
|
29
|
-
*/
|
|
30
|
-
error?: ErrorType;
|
|
16
|
+
import {BannerModel, BannerModelConfig, useBanner, useBannerModel, useThemedPalette} from './hooks';
|
|
17
|
+
|
|
18
|
+
import {BannerIcon} from './BannerIcon';
|
|
19
|
+
import {BannerLabel} from './BannerLabel';
|
|
20
|
+
import {BannerActionText} from './BannerActionText';
|
|
21
|
+
|
|
22
|
+
export const BannerModelContext = React.createContext<BannerModel>({} as any);
|
|
23
|
+
|
|
24
|
+
export interface BannerProps extends BannerModelConfig, ExtractProps<typeof Flex, never> {
|
|
25
|
+
model?: BannerModel;
|
|
31
26
|
/**
|
|
32
|
-
*
|
|
33
|
-
* @default 'View All'
|
|
27
|
+
* Children of the Banner. Should contain a `<Banner.Label>` a <Banner.Icon> and an optional `<Banner.ActionText>`
|
|
34
28
|
*/
|
|
35
|
-
|
|
29
|
+
children?: React.ReactNode;
|
|
36
30
|
}
|
|
37
31
|
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
...type.levels.subtext.large,
|
|
41
|
-
fontWeight: type.properties.fontWeights.medium,
|
|
42
|
-
backgroundColor: colors.cantaloupe400,
|
|
43
|
-
boxSizing: 'border-box',
|
|
44
|
-
color: colors.blackPepper400,
|
|
45
|
-
padding: `${space.xxs} ${space.s}`,
|
|
46
|
-
textAlign: 'left',
|
|
47
|
-
border: 0,
|
|
48
|
-
display: 'flex',
|
|
49
|
-
alignItems: 'center',
|
|
50
|
-
transition: 'background-color 120ms',
|
|
51
|
-
'&:focus': {
|
|
52
|
-
outline: 'none',
|
|
53
|
-
...focusRing({separation: 2}),
|
|
54
|
-
},
|
|
55
|
-
'&:hover': {
|
|
56
|
-
cursor: 'pointer',
|
|
57
|
-
},
|
|
58
|
-
},
|
|
59
|
-
({error, variant}) => ({
|
|
60
|
-
backgroundColor: error === ErrorType.Error ? colors.cinnamon500 : colors.cantaloupe400,
|
|
61
|
-
color: error === ErrorType.Error ? colors.frenchVanilla100 : colors.blackPepper400,
|
|
62
|
-
borderRadius:
|
|
63
|
-
variant === BannerVariant.Sticky ? `${borderRadius.m} 0 0 ${borderRadius.m}` : borderRadius.m,
|
|
64
|
-
width: variant === BannerVariant.Sticky ? '222px' : '328px',
|
|
65
|
-
'&:hover': {
|
|
66
|
-
backgroundColor: error === ErrorType.Error ? colors.cinnamon600 : colors.cantaloupe500,
|
|
67
|
-
},
|
|
68
|
-
})
|
|
69
|
-
);
|
|
32
|
+
// Remove color from our type since it is set on the Flex style attribute
|
|
33
|
+
const {color: _color, ...typeLevelsSubtextLarge} = type.levels.subtext.large;
|
|
70
34
|
|
|
71
|
-
const
|
|
72
|
-
|
|
73
|
-
|
|
35
|
+
const styles: CSSProperties = {
|
|
36
|
+
...typeLevelsSubtextLarge,
|
|
37
|
+
cursor: 'pointer',
|
|
38
|
+
fontWeight: type.properties.fontWeights.medium,
|
|
39
|
+
textAlign: 'left',
|
|
40
|
+
transition: 'background-color 120ms',
|
|
41
|
+
'&:focus': {
|
|
42
|
+
outline: 'none',
|
|
43
|
+
...focusRing({separation: 2}),
|
|
44
|
+
},
|
|
45
|
+
...hideMouseFocus,
|
|
46
|
+
};
|
|
74
47
|
|
|
75
|
-
const
|
|
76
|
-
|
|
77
|
-
})
|
|
48
|
+
export const Banner = createComponent('button')({
|
|
49
|
+
displayName: 'Banner',
|
|
50
|
+
Component: ({children, model, ...props}: BannerProps, ref, Element) => {
|
|
51
|
+
const {hasError, isSticky, id, ...elemProps} = props;
|
|
52
|
+
const value = useDefaultModel(model, {hasError, isSticky, id}, useBannerModel);
|
|
78
53
|
|
|
79
|
-
const
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
})
|
|
86
|
-
);
|
|
54
|
+
const palette = useThemedPalette(hasError ? 'error' : 'alert');
|
|
55
|
+
const themedBackgroundStyles: CSSProperties = {
|
|
56
|
+
'&:hover': {
|
|
57
|
+
backgroundColor: palette.hover,
|
|
58
|
+
},
|
|
59
|
+
};
|
|
87
60
|
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
61
|
+
const isRTL = useIsRTL();
|
|
62
|
+
const borderBottomLeftRadius = isRTL ? 'borderBottomRightRadius' : 'borderBottomLeftRadius';
|
|
63
|
+
const borderTopLeftRadius = isRTL ? 'borderTopRightRadius' : 'borderTopLeftRadius';
|
|
64
|
+
const borderBottomRightRadius = isRTL ? 'borderBottomLeftRadius' : 'borderBottomRightRadius';
|
|
65
|
+
const borderTopRightRadius = isRTL ? 'borderTopLeftRadius' : 'borderTopRightRadius';
|
|
91
66
|
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
onClick,
|
|
99
|
-
...props
|
|
100
|
-
} = this.props;
|
|
67
|
+
const borderStyleProps = {
|
|
68
|
+
[borderBottomLeftRadius]: borderRadius.m,
|
|
69
|
+
[borderTopLeftRadius]: borderRadius.m,
|
|
70
|
+
[borderBottomRightRadius]: isSticky ? 0 : borderRadius.m,
|
|
71
|
+
[borderTopRightRadius]: isSticky ? 0 : borderRadius.m,
|
|
72
|
+
};
|
|
101
73
|
|
|
102
|
-
const
|
|
103
|
-
const iconColor = error === ErrorType.Error ? colors.frenchVanilla100 : colors.blackPepper400;
|
|
104
|
-
const iconSize = 24;
|
|
74
|
+
const bannerProps = useBanner(value, elemProps, ref);
|
|
105
75
|
|
|
106
76
|
return (
|
|
107
|
-
<
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
77
|
+
<BannerModelContext.Provider value={value}>
|
|
78
|
+
<Flex
|
|
79
|
+
as={Element}
|
|
80
|
+
width={isSticky ? '222px' : '328px'}
|
|
81
|
+
backgroundColor={palette.normal}
|
|
82
|
+
color={palette.contrast}
|
|
83
|
+
padding={`${space.xxs} ${space.s}`}
|
|
84
|
+
border="0"
|
|
85
|
+
display="flex"
|
|
86
|
+
alignItems="center"
|
|
87
|
+
{...borderStyleProps}
|
|
88
|
+
css={[styles, themedBackgroundStyles]}
|
|
89
|
+
{...bannerProps}
|
|
90
|
+
>
|
|
91
|
+
{children}
|
|
92
|
+
</Flex>
|
|
93
|
+
</BannerModelContext.Provider>
|
|
120
94
|
);
|
|
121
|
-
}
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
95
|
+
},
|
|
96
|
+
subComponents: {
|
|
97
|
+
Icon: BannerIcon,
|
|
98
|
+
Label: BannerLabel,
|
|
99
|
+
ActionText: BannerActionText,
|
|
100
|
+
},
|
|
101
|
+
});
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
/** @jsx jsx */
|
|
2
|
+
import {jsx} from '@emotion/core';
|
|
3
|
+
import * as React from 'react';
|
|
4
|
+
|
|
5
|
+
import {ExtractProps, createComponent, useModelContext} from '@workday/canvas-kit-react/common';
|
|
6
|
+
import {Box} from '@workday/canvas-kit-labs-react/common';
|
|
7
|
+
import {CSSProperties} from '@workday/canvas-kit-react/tokens';
|
|
8
|
+
|
|
9
|
+
import {BannerModelContext} from './Banner';
|
|
10
|
+
import {BannerModel, useBannerActionText} from './hooks';
|
|
11
|
+
|
|
12
|
+
export interface BannerActionTextProps extends ExtractProps<typeof Box, never> {
|
|
13
|
+
model?: BannerModel;
|
|
14
|
+
/**
|
|
15
|
+
* The text of the Banner action.
|
|
16
|
+
* @default 'View All'
|
|
17
|
+
*/
|
|
18
|
+
children?: React.ReactNode;
|
|
19
|
+
}
|
|
20
|
+
|
|
21
|
+
const styles: CSSProperties = {
|
|
22
|
+
textDecoration: 'underline',
|
|
23
|
+
};
|
|
24
|
+
|
|
25
|
+
export const BannerActionText = createComponent('span')({
|
|
26
|
+
displayName: 'Banner.ActionTextText',
|
|
27
|
+
Component: (
|
|
28
|
+
{children = 'View All', model, ...elemProps}: BannerActionTextProps,
|
|
29
|
+
ref,
|
|
30
|
+
Element
|
|
31
|
+
) => {
|
|
32
|
+
const localModel = useModelContext(BannerModelContext, model);
|
|
33
|
+
const props = useBannerActionText(localModel, elemProps, ref);
|
|
34
|
+
|
|
35
|
+
return (
|
|
36
|
+
<Box
|
|
37
|
+
display={localModel.state.isSticky ? 'none' : 'inline'}
|
|
38
|
+
as={Element}
|
|
39
|
+
css={[styles]}
|
|
40
|
+
{...props}
|
|
41
|
+
>
|
|
42
|
+
{children}
|
|
43
|
+
</Box>
|
|
44
|
+
);
|
|
45
|
+
},
|
|
46
|
+
});
|
|
@@ -0,0 +1,40 @@
|
|
|
1
|
+
/** @jsx jsx */
|
|
2
|
+
import {jsx} from '@emotion/core';
|
|
3
|
+
|
|
4
|
+
import {CSSProperties, space} from '@workday/canvas-kit-react/tokens';
|
|
5
|
+
import {ExtractProps, createComponent, useModelContext} from '@workday/canvas-kit-react/common';
|
|
6
|
+
import {useThemeRTL} from '@workday/canvas-kit-labs-react/common';
|
|
7
|
+
import {SystemIcon} from '@workday/canvas-kit-react/icon';
|
|
8
|
+
import {exclamationTriangleIcon} from '@workday/canvas-system-icons-web';
|
|
9
|
+
import {CanvasSystemIcon} from '@workday/design-assets-types';
|
|
10
|
+
|
|
11
|
+
import {BannerModelContext} from './Banner';
|
|
12
|
+
import {BannerModel, useBannerIcon} from './hooks';
|
|
13
|
+
|
|
14
|
+
export interface BannerIconProps extends Omit<ExtractProps<typeof SystemIcon, never>, 'icon'> {
|
|
15
|
+
model?: BannerModel;
|
|
16
|
+
/**
|
|
17
|
+
* Icon to show next to label
|
|
18
|
+
* @default exclamationTriangleIcon or exclamationCircleIcon when hasError is true
|
|
19
|
+
*/
|
|
20
|
+
icon?: CanvasSystemIcon;
|
|
21
|
+
}
|
|
22
|
+
|
|
23
|
+
const styles: CSSProperties = {
|
|
24
|
+
marginRight: space.xs,
|
|
25
|
+
};
|
|
26
|
+
|
|
27
|
+
export const BannerIcon = createComponent('span')({
|
|
28
|
+
displayName: 'Banner.Icon',
|
|
29
|
+
Component: ({icon = exclamationTriangleIcon, model, ...elemProps}: BannerIconProps, ref) => {
|
|
30
|
+
const {themeRTL} = useThemeRTL();
|
|
31
|
+
const localModel = useModelContext(BannerModelContext, model);
|
|
32
|
+
|
|
33
|
+
// SystemIcon is still a class based component so we need to set ref manually.
|
|
34
|
+
const {ref: iconRef, icon: defaultIcon, ...props} = useBannerIcon(localModel, elemProps, ref);
|
|
35
|
+
|
|
36
|
+
return (
|
|
37
|
+
<SystemIcon icon={icon ?? defaultIcon} iconRef={iconRef} css={themeRTL(styles)} {...props} />
|
|
38
|
+
);
|
|
39
|
+
},
|
|
40
|
+
});
|
|
@@ -0,0 +1,29 @@
|
|
|
1
|
+
import * as React from 'react';
|
|
2
|
+
|
|
3
|
+
import {ExtractProps, createComponent, useModelContext} from '@workday/canvas-kit-react/common';
|
|
4
|
+
import {Flex} from '@workday/canvas-kit-labs-react/layout';
|
|
5
|
+
|
|
6
|
+
import {BannerModelContext} from './Banner';
|
|
7
|
+
import {BannerModel, useBannerLabel} from './hooks';
|
|
8
|
+
|
|
9
|
+
export interface BannerLabelProps extends ExtractProps<typeof Flex, never> {
|
|
10
|
+
model?: BannerModel;
|
|
11
|
+
/**
|
|
12
|
+
* The text of the Banner.
|
|
13
|
+
*/
|
|
14
|
+
children: React.ReactNode;
|
|
15
|
+
}
|
|
16
|
+
|
|
17
|
+
export const BannerLabel = createComponent('div')({
|
|
18
|
+
displayName: 'Banner.Label',
|
|
19
|
+
Component: ({children, model, ...elemProps}: BannerLabelProps, ref, Element) => {
|
|
20
|
+
const localModel = useModelContext(BannerModelContext, model);
|
|
21
|
+
const props = useBannerLabel(localModel, elemProps, ref);
|
|
22
|
+
|
|
23
|
+
return (
|
|
24
|
+
<Flex as={Element} flex="1 1 0%" {...props}>
|
|
25
|
+
{children}
|
|
26
|
+
</Flex>
|
|
27
|
+
);
|
|
28
|
+
},
|
|
29
|
+
});
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
import {createHook} from '@workday/canvas-kit-react/common';
|
|
2
|
+
import {BannerModel} from './useBannerModel';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Adds the necessary props to a `Banner` component.
|
|
6
|
+
* Used by the Banner component
|
|
7
|
+
*/
|
|
8
|
+
export const useBanner = createHook(({state}: BannerModel) => {
|
|
9
|
+
return {
|
|
10
|
+
'aria-describedby': `label-${state.id}`,
|
|
11
|
+
'aria-labelledby': `action-${state.id}`,
|
|
12
|
+
};
|
|
13
|
+
});
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import {createHook} from '@workday/canvas-kit-react/common';
|
|
2
|
+
import {BannerModel} from './useBannerModel';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Adds the necessary props to a `ActionText` component.
|
|
6
|
+
* Used by the Banner.ActionText subcomponent
|
|
7
|
+
*/
|
|
8
|
+
export const useBannerActionText = createHook(({state}: BannerModel) => {
|
|
9
|
+
return {
|
|
10
|
+
id: `action-${state.id}`,
|
|
11
|
+
};
|
|
12
|
+
});
|
|
@@ -0,0 +1,19 @@
|
|
|
1
|
+
import {createHook} from '@workday/canvas-kit-react/common';
|
|
2
|
+
import {exclamationCircleIcon, exclamationTriangleIcon} from '@workday/canvas-system-icons-web';
|
|
3
|
+
import {BannerModel} from './useBannerModel';
|
|
4
|
+
import {useThemedPalette} from './useThemedPalette';
|
|
5
|
+
|
|
6
|
+
/**
|
|
7
|
+
* Adds the necessary props to a `Icon` component.
|
|
8
|
+
* Used by the Banner.Icon subcomponent
|
|
9
|
+
*/
|
|
10
|
+
export const useBannerIcon = createHook(({state}: BannerModel) => {
|
|
11
|
+
const palette = useThemedPalette(state.hasError ? 'error' : 'alert');
|
|
12
|
+
|
|
13
|
+
return {
|
|
14
|
+
icon: state.hasError ? exclamationCircleIcon : exclamationTriangleIcon,
|
|
15
|
+
color: palette.contrast,
|
|
16
|
+
colorHover: palette.contrast,
|
|
17
|
+
size: 24,
|
|
18
|
+
};
|
|
19
|
+
});
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import {createHook} from '@workday/canvas-kit-react/common';
|
|
2
|
+
import {BannerModel} from './useBannerModel';
|
|
3
|
+
|
|
4
|
+
/**
|
|
5
|
+
* Adds the necessary props to a `Label` component.
|
|
6
|
+
* Used by the Banner.Label subcomponent
|
|
7
|
+
*/
|
|
8
|
+
export const useBannerLabel = createHook(({state}: BannerModel) => {
|
|
9
|
+
return {
|
|
10
|
+
id: `label-${state.id}`,
|
|
11
|
+
};
|
|
12
|
+
});
|
|
@@ -0,0 +1,63 @@
|
|
|
1
|
+
import {
|
|
2
|
+
createEventMap,
|
|
3
|
+
Model,
|
|
4
|
+
ToModelConfig,
|
|
5
|
+
useEventMap,
|
|
6
|
+
useUniqueId,
|
|
7
|
+
} from '@workday/canvas-kit-react/common';
|
|
8
|
+
|
|
9
|
+
type BannerState = {
|
|
10
|
+
/**
|
|
11
|
+
* Optional flag to denote the banner has an error to display. When true the default `Banner.Icon`
|
|
12
|
+
* will be `exclamationCircleIcon`, and a themed error color will be applied.
|
|
13
|
+
* @default false
|
|
14
|
+
*/
|
|
15
|
+
hasError?: boolean;
|
|
16
|
+
/**
|
|
17
|
+
* Optional flag to denote the banner is stuck to the side of the screen. When true the default `Banner.ActionText`
|
|
18
|
+
* will be hidden, and some basic styles will be applied.
|
|
19
|
+
* You will still need to manually set the css `position` value.
|
|
20
|
+
* @default false
|
|
21
|
+
*/
|
|
22
|
+
isSticky?: boolean;
|
|
23
|
+
/**
|
|
24
|
+
* Optional `id` provided to `Banner`'s subcomponents as HTML attributes:
|
|
25
|
+
* - `Banner` will set `aria-describedby` to `label-${id}`
|
|
26
|
+
* - `Banner` will set `aria-label` to `action-${id}`
|
|
27
|
+
* - `Banner.Label` will set `id` to `label-${id}`
|
|
28
|
+
* - `Banner.ActionText` will set `id` to `action-${id}`
|
|
29
|
+
*
|
|
30
|
+
* If a value is not provided, a unique id will be automatically created by `useUniqueId()`.
|
|
31
|
+
* @default `useUniqueId()`
|
|
32
|
+
*/
|
|
33
|
+
id?: string;
|
|
34
|
+
};
|
|
35
|
+
|
|
36
|
+
type BannerEvents = {};
|
|
37
|
+
|
|
38
|
+
export type BannerModel = Model<BannerState, BannerEvents>;
|
|
39
|
+
|
|
40
|
+
const BannerEventMap = createEventMap<BannerEvents>()({
|
|
41
|
+
guards: {},
|
|
42
|
+
callbacks: {},
|
|
43
|
+
});
|
|
44
|
+
|
|
45
|
+
export type BannerModelConfig = BannerState &
|
|
46
|
+
Partial<ToModelConfig<BannerState, BannerEvents, typeof BannerEventMap>>;
|
|
47
|
+
|
|
48
|
+
export const useBannerModel = (config: BannerModelConfig = {}): BannerModel => {
|
|
49
|
+
const id = useUniqueId(config.id);
|
|
50
|
+
|
|
51
|
+
const state = {
|
|
52
|
+
hasError: config.hasError ?? false,
|
|
53
|
+
isSticky: config.isSticky ?? false,
|
|
54
|
+
id,
|
|
55
|
+
};
|
|
56
|
+
|
|
57
|
+
const events = useEventMap(BannerEventMap, state, config, {});
|
|
58
|
+
|
|
59
|
+
return {
|
|
60
|
+
state,
|
|
61
|
+
events,
|
|
62
|
+
};
|
|
63
|
+
};
|
|
@@ -0,0 +1,53 @@
|
|
|
1
|
+
import {CanvasThemePalette, EmotionCanvasTheme, useTheme} from '@workday/canvas-kit-react/common';
|
|
2
|
+
import {colors} from '@workday/canvas-kit-react/tokens';
|
|
3
|
+
import chroma from 'chroma-js';
|
|
4
|
+
|
|
5
|
+
type paletteSelection = Exclude<keyof EmotionCanvasTheme['canvas']['palette'], 'common'>;
|
|
6
|
+
|
|
7
|
+
interface BackgroundColors {
|
|
8
|
+
normal?: string;
|
|
9
|
+
hover?: string;
|
|
10
|
+
contrast?: string;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
const isAccessible = (foreground: string, background: string) => {
|
|
14
|
+
return chroma.contrast(foreground, background) >= 3;
|
|
15
|
+
};
|
|
16
|
+
|
|
17
|
+
const getPaletteColorsFromTheme = (
|
|
18
|
+
palette: CanvasThemePalette,
|
|
19
|
+
fallbackColors?: BackgroundColors
|
|
20
|
+
): BackgroundColors => {
|
|
21
|
+
return {
|
|
22
|
+
hover: palette.dark,
|
|
23
|
+
normal: palette.main,
|
|
24
|
+
contrast: isAccessible(palette.contrast, palette.main)
|
|
25
|
+
? palette.contrast
|
|
26
|
+
: fallbackColors?.contrast,
|
|
27
|
+
};
|
|
28
|
+
};
|
|
29
|
+
|
|
30
|
+
export function getPaletteColors(
|
|
31
|
+
type: paletteSelection,
|
|
32
|
+
theme: EmotionCanvasTheme
|
|
33
|
+
): BackgroundColors {
|
|
34
|
+
const palette = theme.canvas.palette[type];
|
|
35
|
+
|
|
36
|
+
switch (type) {
|
|
37
|
+
case 'error': {
|
|
38
|
+
return getPaletteColorsFromTheme(palette, {contrast: colors.frenchVanilla100});
|
|
39
|
+
}
|
|
40
|
+
case 'alert': {
|
|
41
|
+
return getPaletteColorsFromTheme(palette, {contrast: colors.blackPepper400});
|
|
42
|
+
}
|
|
43
|
+
default: {
|
|
44
|
+
return getPaletteColorsFromTheme(palette);
|
|
45
|
+
}
|
|
46
|
+
}
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
export const useThemedPalette = (type: paletteSelection) => {
|
|
50
|
+
const theme = useTheme();
|
|
51
|
+
|
|
52
|
+
return getPaletteColors(type, theme);
|
|
53
|
+
};
|
|
@@ -14,9 +14,12 @@ import {ButtonContainer} from './parts';
|
|
|
14
14
|
|
|
15
15
|
export interface IconButtonProps extends Themeable {
|
|
16
16
|
/**
|
|
17
|
-
* The accessibility label to indicate the action triggered by clicking the IconButton.
|
|
17
|
+
* The accessibility label to indicate the action triggered by clicking the IconButton. This is optional because there are
|
|
18
|
+
* instances where an Icon Button might already have an `aria-labelledby`. In a case where an `aria-labelledby` is provided
|
|
19
|
+
* it will take precedence over the `aria-label` as explained here: https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/ARIA_Techniques/Using_the_aria-labelledby_attribute
|
|
20
|
+
* We highly encourage consumers to either provide an `aria-label` OR an `aria-labelledby`
|
|
18
21
|
*/
|
|
19
|
-
'aria-label'
|
|
22
|
+
'aria-label'?: string;
|
|
20
23
|
/**
|
|
21
24
|
* The type of the IconButton.
|
|
22
25
|
* @default 'circle'
|
|
@@ -1,10 +1,11 @@
|
|
|
1
|
-
import {
|
|
1
|
+
import {Interpolation} from '@emotion/core';
|
|
2
|
+
import {CSSProperties} from '@workday/canvas-kit-react/tokens';
|
|
2
3
|
|
|
3
4
|
/**
|
|
4
5
|
* A utility to hide the default canvas style focus ring when using mouse input.
|
|
5
6
|
* Requires wrapping your components in an InputProvider component.
|
|
6
7
|
*/
|
|
7
|
-
export const hideMouseFocus:
|
|
8
|
+
export const hideMouseFocus: CSSProperties = {
|
|
8
9
|
[`[data-whatinput="mouse"] &:focus,
|
|
9
10
|
[data-whatinput="touch"] &:focus,
|
|
10
11
|
[data-whatinput="pointer"] &:focus`]: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../banner/index.ts"],"names":[],"mappings":"AAAA,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../banner/index.ts"],"names":[],"mappings":"AAAA,cAAc,cAAc,CAAC;AAC7B,cAAc,cAAc,CAAC"}
|
|
@@ -2,11 +2,6 @@
|
|
|
2
2
|
function __export(m) {
|
|
3
3
|
for (var p in m) if (!exports.hasOwnProperty(p)) exports[p] = m[p];
|
|
4
4
|
}
|
|
5
|
-
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
6
|
-
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
7
|
-
};
|
|
8
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
9
|
-
var Banner_1 = __importDefault(require("./lib/Banner"));
|
|
10
|
-
exports.Banner = Banner_1.default;
|
|
11
|
-
exports.default = Banner_1.default;
|
|
12
6
|
__export(require("./lib/Banner"));
|
|
7
|
+
__export(require("./lib/hooks/"));
|
|
@@ -1,38 +1,22 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
/**
|
|
13
|
-
* The label of the Banner.
|
|
14
|
-
*/
|
|
15
|
-
label?: React.ReactNode;
|
|
2
|
+
import { ExtractProps } from '@workday/canvas-kit-react/common';
|
|
3
|
+
import { Flex } from '@workday/canvas-kit-labs-react/layout';
|
|
4
|
+
import { BannerModel, BannerModelConfig } from './hooks';
|
|
5
|
+
export declare const BannerModelContext: React.Context<import("../../common").Model<{
|
|
6
|
+
hasError?: boolean | undefined;
|
|
7
|
+
isSticky?: boolean | undefined;
|
|
8
|
+
id?: string | undefined;
|
|
9
|
+
}, {}>>;
|
|
10
|
+
export interface BannerProps extends BannerModelConfig, ExtractProps<typeof Flex, never> {
|
|
11
|
+
model?: BannerModel;
|
|
16
12
|
/**
|
|
17
|
-
*
|
|
18
|
-
* @default BannerVariant.Full
|
|
13
|
+
* Children of the Banner. Should contain a `<Banner.Label>` a <Banner.Icon> and an optional `<Banner.ActionText>`
|
|
19
14
|
*/
|
|
20
|
-
|
|
21
|
-
/**
|
|
22
|
-
* The type of error associated with the Banner (if applicable).
|
|
23
|
-
* @default ErrorType.Alert
|
|
24
|
-
*/
|
|
25
|
-
error?: ErrorType;
|
|
26
|
-
/**
|
|
27
|
-
* The text of the Banner action. This prop is also used as the aria-label for the action in the banner
|
|
28
|
-
* @default 'View All'
|
|
29
|
-
*/
|
|
30
|
-
actionText?: string;
|
|
31
|
-
}
|
|
32
|
-
declare class Banner extends React.Component<BannerProps> {
|
|
33
|
-
static Variant: typeof BannerVariant;
|
|
34
|
-
static ErrorType: typeof ErrorType;
|
|
35
|
-
render(): JSX.Element;
|
|
15
|
+
children?: React.ReactNode;
|
|
36
16
|
}
|
|
37
|
-
export
|
|
17
|
+
export declare const Banner: import("../../common").ElementComponent<"button", BannerProps> & {
|
|
18
|
+
Icon: import("../../common").ElementComponent<"span", import("./BannerIcon").BannerIconProps>;
|
|
19
|
+
Label: import("../../common").ElementComponent<"div", import("./BannerLabel").BannerLabelProps>;
|
|
20
|
+
ActionText: import("../../common").ElementComponent<"span", import("./BannerActionText").BannerActionTextProps>;
|
|
21
|
+
};
|
|
38
22
|
//# sourceMappingURL=Banner.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../banner/lib/Banner.tsx"],"names":[],"mappings":"
|
|
1
|
+
{"version":3,"file":"Banner.d.ts","sourceRoot":"","sources":["../../../../banner/lib/Banner.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAEL,YAAY,EAKb,MAAM,kCAAkC,CAAC;AAC1C,OAAO,EAAC,IAAI,EAAC,MAAM,uCAAuC,CAAC;AAE3D,OAAO,EAAC,WAAW,EAAE,iBAAiB,EAA8C,MAAM,SAAS,CAAC;AAMpG,eAAO,MAAM,kBAAkB;;;;OAA8C,CAAC;AAE9E,MAAM,WAAW,WAAY,SAAQ,iBAAiB,EAAE,YAAY,CAAC,OAAO,IAAI,EAAE,KAAK,CAAC;IACtF,KAAK,CAAC,EAAE,WAAW,CAAC;IACpB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;CAC5B;AAkBD,eAAO,MAAM,MAAM;;;;CAqDjB,CAAC"}
|