@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.
Files changed (173) hide show
  1. package/banner/index.ts +1 -4
  2. package/banner/lib/Banner.tsx +85 -111
  3. package/banner/lib/BannerActionText.tsx +46 -0
  4. package/banner/lib/BannerIcon.tsx +40 -0
  5. package/banner/lib/BannerLabel.tsx +29 -0
  6. package/banner/lib/hooks/index.ts +6 -0
  7. package/banner/lib/hooks/useBanner.tsx +13 -0
  8. package/banner/lib/hooks/useBannerActionText.tsx +12 -0
  9. package/banner/lib/hooks/useBannerIcon.tsx +19 -0
  10. package/banner/lib/hooks/useBannerLabel.tsx +12 -0
  11. package/banner/lib/hooks/useBannerModel.tsx +63 -0
  12. package/banner/lib/hooks/useThemedPalette.ts +53 -0
  13. package/button/lib/IconButton.tsx +5 -2
  14. package/common/lib/styles/hideMouseFocus.ts +3 -2
  15. package/dist/commonjs/banner/index.d.ts +1 -3
  16. package/dist/commonjs/banner/index.d.ts.map +1 -1
  17. package/dist/commonjs/banner/index.js +1 -6
  18. package/dist/commonjs/banner/lib/Banner.d.ts +17 -33
  19. package/dist/commonjs/banner/lib/Banner.d.ts.map +1 -1
  20. package/dist/commonjs/banner/lib/Banner.js +44 -69
  21. package/dist/commonjs/banner/lib/BannerActionText.d.ts +14 -0
  22. package/dist/commonjs/banner/lib/BannerActionText.d.ts.map +1 -0
  23. package/dist/commonjs/banner/lib/BannerActionText.js +42 -0
  24. package/dist/commonjs/banner/lib/BannerIcon.d.ts +14 -0
  25. package/dist/commonjs/banner/lib/BannerIcon.d.ts.map +1 -0
  26. package/dist/commonjs/banner/lib/BannerIcon.js +47 -0
  27. package/dist/commonjs/banner/lib/BannerLabel.d.ts +13 -0
  28. package/dist/commonjs/banner/lib/BannerLabel.d.ts.map +1 -0
  29. package/dist/commonjs/banner/lib/BannerLabel.js +45 -0
  30. package/dist/commonjs/banner/lib/hooks/index.d.ts +7 -0
  31. package/dist/commonjs/banner/lib/hooks/index.d.ts.map +1 -0
  32. package/dist/commonjs/banner/lib/hooks/index.js +11 -0
  33. package/dist/commonjs/banner/lib/hooks/useBanner.d.ts +16 -0
  34. package/dist/commonjs/banner/lib/hooks/useBanner.d.ts.map +1 -0
  35. package/dist/commonjs/banner/lib/hooks/useBanner.js +14 -0
  36. package/dist/commonjs/banner/lib/hooks/useBannerActionText.d.ts +15 -0
  37. package/dist/commonjs/banner/lib/hooks/useBannerActionText.d.ts.map +1 -0
  38. package/dist/commonjs/banner/lib/hooks/useBannerActionText.js +13 -0
  39. package/dist/commonjs/banner/lib/hooks/useBannerIcon.d.ts +18 -0
  40. package/dist/commonjs/banner/lib/hooks/useBannerIcon.d.ts.map +1 -0
  41. package/dist/commonjs/banner/lib/hooks/useBannerIcon.js +19 -0
  42. package/dist/commonjs/banner/lib/hooks/useBannerLabel.d.ts +15 -0
  43. package/dist/commonjs/banner/lib/hooks/useBannerLabel.d.ts.map +1 -0
  44. package/dist/commonjs/banner/lib/hooks/useBannerLabel.js +13 -0
  45. package/dist/commonjs/banner/lib/hooks/useBannerModel.d.ts +37 -0
  46. package/dist/commonjs/banner/lib/hooks/useBannerModel.d.ts.map +1 -0
  47. package/dist/commonjs/banner/lib/hooks/useBannerModel.js +22 -0
  48. package/dist/commonjs/banner/lib/hooks/useThemedPalette.d.ts +11 -0
  49. package/dist/commonjs/banner/lib/hooks/useThemedPalette.d.ts.map +1 -0
  50. package/dist/commonjs/banner/lib/hooks/useThemedPalette.js +39 -0
  51. package/dist/commonjs/button/lib/IconButton.d.ts +5 -2
  52. package/dist/commonjs/button/lib/IconButton.d.ts.map +1 -1
  53. package/dist/commonjs/common/lib/styles/hideMouseFocus.d.ts +3 -2
  54. package/dist/commonjs/common/lib/styles/hideMouseFocus.d.ts.map +1 -1
  55. package/dist/commonjs/loading-animation/lib/LoadingDots.js +3 -6
  56. package/dist/commonjs/pagination/lib/Pagination/common/Stack.d.ts +1 -1
  57. package/dist/commonjs/popup/lib/PopupCard.d.ts.map +1 -1
  58. package/dist/commonjs/popup/lib/PopupCard.js +3 -9
  59. package/dist/commonjs/popup/lib/hooks/useReturnFocus.d.ts +1 -1
  60. package/dist/commonjs/popup/lib/hooks/useReturnFocus.js +1 -1
  61. package/dist/commonjs/tabs/lib/menu/MenuList.d.ts.map +1 -1
  62. package/dist/commonjs/tabs/lib/menu/MenuList.js +1 -1
  63. package/dist/commonjs/tabs/lib/overflow/useOverflowModel.d.ts.map +1 -1
  64. package/dist/commonjs/tabs/lib/overflow/useOverflowModel.js +9 -0
  65. package/dist/commonjs/tabs/lib/overflow/useOverflowTarget.js +1 -1
  66. package/dist/commonjs/tooltip/lib/Tooltip.d.ts +9 -1
  67. package/dist/commonjs/tooltip/lib/Tooltip.d.ts.map +1 -1
  68. package/dist/commonjs/tooltip/lib/Tooltip.js +7 -2
  69. package/dist/commonjs/tooltip/lib/useTooltip.d.ts +9 -1
  70. package/dist/commonjs/tooltip/lib/useTooltip.d.ts.map +1 -1
  71. package/dist/commonjs/tooltip/lib/useTooltip.js +13 -8
  72. package/dist/es6/banner/index.d.ts +1 -3
  73. package/dist/es6/banner/index.d.ts.map +1 -1
  74. package/dist/es6/banner/index.js +1 -3
  75. package/dist/es6/banner/lib/Banner.d.ts +17 -33
  76. package/dist/es6/banner/lib/Banner.d.ts.map +1 -1
  77. package/dist/es6/banner/lib/Banner.js +46 -71
  78. package/dist/es6/banner/lib/BannerActionText.d.ts +14 -0
  79. package/dist/es6/banner/lib/BannerActionText.d.ts.map +1 -0
  80. package/dist/es6/banner/lib/BannerActionText.js +40 -0
  81. package/dist/es6/banner/lib/BannerIcon.d.ts +14 -0
  82. package/dist/es6/banner/lib/BannerIcon.d.ts.map +1 -0
  83. package/dist/es6/banner/lib/BannerIcon.js +45 -0
  84. package/dist/es6/banner/lib/BannerLabel.d.ts +13 -0
  85. package/dist/es6/banner/lib/BannerLabel.d.ts.map +1 -0
  86. package/dist/es6/banner/lib/BannerLabel.js +36 -0
  87. package/dist/es6/banner/lib/hooks/index.d.ts +7 -0
  88. package/dist/es6/banner/lib/hooks/index.d.ts.map +1 -0
  89. package/dist/es6/banner/lib/hooks/index.js +6 -0
  90. package/dist/es6/banner/lib/hooks/useBanner.d.ts +16 -0
  91. package/dist/es6/banner/lib/hooks/useBanner.d.ts.map +1 -0
  92. package/dist/es6/banner/lib/hooks/useBanner.js +12 -0
  93. package/dist/es6/banner/lib/hooks/useBannerActionText.d.ts +15 -0
  94. package/dist/es6/banner/lib/hooks/useBannerActionText.d.ts.map +1 -0
  95. package/dist/es6/banner/lib/hooks/useBannerActionText.js +11 -0
  96. package/dist/es6/banner/lib/hooks/useBannerIcon.d.ts +18 -0
  97. package/dist/es6/banner/lib/hooks/useBannerIcon.d.ts.map +1 -0
  98. package/dist/es6/banner/lib/hooks/useBannerIcon.js +17 -0
  99. package/dist/es6/banner/lib/hooks/useBannerLabel.d.ts +15 -0
  100. package/dist/es6/banner/lib/hooks/useBannerLabel.d.ts.map +1 -0
  101. package/dist/es6/banner/lib/hooks/useBannerLabel.js +11 -0
  102. package/dist/es6/banner/lib/hooks/useBannerModel.d.ts +37 -0
  103. package/dist/es6/banner/lib/hooks/useBannerModel.d.ts.map +1 -0
  104. package/dist/es6/banner/lib/hooks/useBannerModel.js +20 -0
  105. package/dist/es6/banner/lib/hooks/useThemedPalette.d.ts +11 -0
  106. package/dist/es6/banner/lib/hooks/useThemedPalette.d.ts.map +1 -0
  107. package/dist/es6/banner/lib/hooks/useThemedPalette.js +33 -0
  108. package/dist/es6/button/lib/IconButton.d.ts +5 -2
  109. package/dist/es6/button/lib/IconButton.d.ts.map +1 -1
  110. package/dist/es6/common/lib/styles/hideMouseFocus.d.ts +3 -2
  111. package/dist/es6/common/lib/styles/hideMouseFocus.d.ts.map +1 -1
  112. package/dist/es6/loading-animation/lib/LoadingDots.js +1 -1
  113. package/dist/es6/pagination/lib/Pagination/common/Stack.d.ts +1 -1
  114. package/dist/es6/popup/lib/PopupCard.d.ts.map +1 -1
  115. package/dist/es6/popup/lib/PopupCard.js +3 -9
  116. package/dist/es6/popup/lib/hooks/useReturnFocus.d.ts +1 -1
  117. package/dist/es6/popup/lib/hooks/useReturnFocus.js +1 -1
  118. package/dist/es6/tabs/lib/menu/MenuList.d.ts.map +1 -1
  119. package/dist/es6/tabs/lib/menu/MenuList.js +1 -1
  120. package/dist/es6/tabs/lib/overflow/useOverflowModel.d.ts.map +1 -1
  121. package/dist/es6/tabs/lib/overflow/useOverflowModel.js +9 -0
  122. package/dist/es6/tabs/lib/overflow/useOverflowTarget.js +1 -1
  123. package/dist/es6/tooltip/lib/Tooltip.d.ts +9 -1
  124. package/dist/es6/tooltip/lib/Tooltip.d.ts.map +1 -1
  125. package/dist/es6/tooltip/lib/Tooltip.js +7 -2
  126. package/dist/es6/tooltip/lib/useTooltip.d.ts +9 -1
  127. package/dist/es6/tooltip/lib/useTooltip.d.ts.map +1 -1
  128. package/dist/es6/tooltip/lib/useTooltip.js +13 -8
  129. package/loading-animation/lib/LoadingDots.tsx +1 -1
  130. package/package.json +7 -6
  131. package/popup/lib/PopupCard.tsx +19 -30
  132. package/popup/lib/hooks/useReturnFocus.tsx +1 -1
  133. package/tabs/lib/menu/MenuList.tsx +2 -3
  134. package/tabs/lib/overflow/useOverflowModel.tsx +22 -0
  135. package/tabs/lib/overflow/useOverflowTarget.tsx +1 -1
  136. package/tooltip/lib/Tooltip.tsx +16 -1
  137. package/tooltip/lib/useTooltip.tsx +21 -6
  138. package/ts3.5/dist/commonjs/banner/index.d.ts +1 -3
  139. package/ts3.5/dist/commonjs/banner/lib/Banner.d.ts +17 -33
  140. package/ts3.5/dist/commonjs/banner/lib/BannerActionText.d.ts +14 -0
  141. package/ts3.5/dist/commonjs/banner/lib/BannerIcon.d.ts +14 -0
  142. package/ts3.5/dist/commonjs/banner/lib/BannerLabel.d.ts +13 -0
  143. package/ts3.5/dist/commonjs/banner/lib/hooks/index.d.ts +7 -0
  144. package/ts3.5/dist/commonjs/banner/lib/hooks/useBanner.d.ts +16 -0
  145. package/ts3.5/dist/commonjs/banner/lib/hooks/useBannerActionText.d.ts +15 -0
  146. package/ts3.5/dist/commonjs/banner/lib/hooks/useBannerIcon.d.ts +18 -0
  147. package/ts3.5/dist/commonjs/banner/lib/hooks/useBannerLabel.d.ts +15 -0
  148. package/ts3.5/dist/commonjs/banner/lib/hooks/useBannerModel.d.ts +37 -0
  149. package/ts3.5/dist/commonjs/banner/lib/hooks/useThemedPalette.d.ts +11 -0
  150. package/ts3.5/dist/commonjs/button/lib/IconButton.d.ts +5 -2
  151. package/ts3.5/dist/commonjs/common/lib/styles/hideMouseFocus.d.ts +3 -2
  152. package/ts3.5/dist/commonjs/pagination/lib/Pagination/common/Stack.d.ts +1 -1
  153. package/ts3.5/dist/commonjs/popup/lib/hooks/useReturnFocus.d.ts +1 -1
  154. package/ts3.5/dist/commonjs/tooltip/lib/Tooltip.d.ts +9 -1
  155. package/ts3.5/dist/commonjs/tooltip/lib/useTooltip.d.ts +9 -1
  156. package/ts3.5/dist/es6/banner/index.d.ts +1 -3
  157. package/ts3.5/dist/es6/banner/lib/Banner.d.ts +17 -33
  158. package/ts3.5/dist/es6/banner/lib/BannerActionText.d.ts +14 -0
  159. package/ts3.5/dist/es6/banner/lib/BannerIcon.d.ts +14 -0
  160. package/ts3.5/dist/es6/banner/lib/BannerLabel.d.ts +13 -0
  161. package/ts3.5/dist/es6/banner/lib/hooks/index.d.ts +7 -0
  162. package/ts3.5/dist/es6/banner/lib/hooks/useBanner.d.ts +16 -0
  163. package/ts3.5/dist/es6/banner/lib/hooks/useBannerActionText.d.ts +15 -0
  164. package/ts3.5/dist/es6/banner/lib/hooks/useBannerIcon.d.ts +18 -0
  165. package/ts3.5/dist/es6/banner/lib/hooks/useBannerLabel.d.ts +15 -0
  166. package/ts3.5/dist/es6/banner/lib/hooks/useBannerModel.d.ts +37 -0
  167. package/ts3.5/dist/es6/banner/lib/hooks/useThemedPalette.d.ts +11 -0
  168. package/ts3.5/dist/es6/button/lib/IconButton.d.ts +5 -2
  169. package/ts3.5/dist/es6/common/lib/styles/hideMouseFocus.d.ts +3 -2
  170. package/ts3.5/dist/es6/pagination/lib/Pagination/common/Stack.d.ts +1 -1
  171. package/ts3.5/dist/es6/popup/lib/hooks/useReturnFocus.d.ts +1 -1
  172. package/ts3.5/dist/es6/tooltip/lib/Tooltip.d.ts +9 -1
  173. package/ts3.5/dist/es6/tooltip/lib/useTooltip.d.ts +9 -1
package/banner/index.ts CHANGED
@@ -1,5 +1,2 @@
1
- import Banner from './lib/Banner';
2
-
3
- export default Banner;
4
- export {Banner};
5
1
  export * from './lib/Banner';
2
+ export * from './lib/hooks/';
@@ -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
- export enum BannerVariant {
8
- Full,
9
- Sticky,
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
- export interface BannerProps extends Themeable, React.ButtonHTMLAttributes<HTMLButtonElement> {
13
- /**
14
- * The function called when the Banner is clicked.
15
- */
16
- onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
17
- /**
18
- * The label of the Banner.
19
- */
20
- label?: React.ReactNode;
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
- * The text of the Banner action. This prop is also used as the aria-label for the action in the banner
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
- actionText?: string;
29
+ children?: React.ReactNode;
36
30
  }
37
31
 
38
- const BannerWrapper = styled('button')<BannerProps>(
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 BannerIcon = styled(SystemIcon)({
72
- marginRight: space.xs,
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 BannerLabel = styled('div')({
76
- flex: 1,
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 BannerViewAll = styled('span')<BannerProps>(
80
- {
81
- textDecoration: 'underline',
82
- },
83
- ({variant}) => ({
84
- display: variant === BannerVariant.Sticky ? 'none' : undefined,
85
- })
86
- );
54
+ const palette = useThemedPalette(hasError ? 'error' : 'alert');
55
+ const themedBackgroundStyles: CSSProperties = {
56
+ '&:hover': {
57
+ backgroundColor: palette.hover,
58
+ },
59
+ };
87
60
 
88
- class Banner extends React.Component<BannerProps> {
89
- static Variant = BannerVariant;
90
- static ErrorType = ErrorType;
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
- public render() {
93
- const {
94
- actionText = 'View All',
95
- variant = BannerVariant.Full,
96
- error = ErrorType.Alert,
97
- label,
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 bannerIcon = error === ErrorType.Error ? exclamationCircleIcon : exclamationTriangleIcon;
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
- <BannerWrapper
108
- aria-label={actionText + ': ' + label}
109
- role="button"
110
- variant={variant}
111
- tabIndex={0}
112
- onClick={onClick}
113
- error={error}
114
- {...props}
115
- >
116
- <BannerIcon icon={bannerIcon} color={iconColor} colorHover={iconColor} size={iconSize} />
117
- <BannerLabel>{label}</BannerLabel>
118
- <BannerViewAll variant={variant}>{actionText}</BannerViewAll>
119
- </BannerWrapper>
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
- Banner.Variant = BannerVariant;
125
- Banner.ErrorType = ErrorType;
126
-
127
- export default Banner;
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,6 @@
1
+ export * from './useBannerModel';
2
+ export * from './useThemedPalette';
3
+ export * from './useBannerIcon';
4
+ export * from './useBannerLabel';
5
+ export * from './useBannerActionText';
6
+ export * from './useBanner';
@@ -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': string;
22
+ 'aria-label'?: string;
20
23
  /**
21
24
  * The type of the IconButton.
22
25
  * @default 'circle'
@@ -1,10 +1,11 @@
1
- import {CSSObject, Interpolation} from '@emotion/core';
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: CSSObject = {
8
+ export const hideMouseFocus: CSSProperties = {
8
9
  [`[data-whatinput="mouse"] &:focus,
9
10
  [data-whatinput="touch"] &:focus,
10
11
  [data-whatinput="pointer"] &:focus`]: {
@@ -1,5 +1,3 @@
1
- import Banner from './lib/Banner';
2
- export default Banner;
3
- export { Banner };
4
1
  export * from './lib/Banner';
2
+ export * from './lib/hooks/';
5
3
  //# sourceMappingURL=index.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../banner/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,cAAc,CAAC;AAElC,eAAe,MAAM,CAAC;AACtB,OAAO,EAAC,MAAM,EAAC,CAAC;AAChB,cAAc,cAAc,CAAC"}
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 { ErrorType, Themeable } from '@workday/canvas-kit-react/common';
3
- export declare enum BannerVariant {
4
- Full = 0,
5
- Sticky = 1
6
- }
7
- export interface BannerProps extends Themeable, React.ButtonHTMLAttributes<HTMLButtonElement> {
8
- /**
9
- * The function called when the Banner is clicked.
10
- */
11
- onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
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
- * The variant of the Banner. Accepts `Full` or `Sticky`.
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
- variant?: BannerVariant;
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 default Banner;
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":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,OAAO,EAAC,SAAS,EAAqB,SAAS,EAAC,MAAM,kCAAkC,CAAC;AAEzF,oBAAY,aAAa;IACvB,IAAI,IAAA;IACJ,MAAM,IAAA;CACP;AAED,MAAM,WAAW,WAAY,SAAQ,SAAS,EAAE,KAAK,CAAC,oBAAoB,CAAC,iBAAiB,CAAC;IAC3F;;OAEG;IACH,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,iBAAiB,CAAC,KAAK,IAAI,CAAC;IAC3D;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;;OAGG;IACH,KAAK,CAAC,EAAE,SAAS,CAAC;IAClB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAoDD,cAAM,MAAO,SAAQ,KAAK,CAAC,SAAS,CAAC,WAAW,CAAC;IAC/C,MAAM,CAAC,OAAO,uBAAiB;IAC/B,MAAM,CAAC,SAAS,mBAAa;IAEtB,MAAM;CA8Bd;AAKD,eAAe,MAAM,CAAC"}
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"}