@workday/canvas-kit-react 6.0.0-alpha.0-next.36 → 6.0.0-alpha.0-next.37

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 (120) 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/common/lib/styles/hideMouseFocus.ts +3 -2
  14. package/dist/commonjs/banner/index.d.ts +1 -3
  15. package/dist/commonjs/banner/index.d.ts.map +1 -1
  16. package/dist/commonjs/banner/index.js +1 -6
  17. package/dist/commonjs/banner/lib/Banner.d.ts +17 -33
  18. package/dist/commonjs/banner/lib/Banner.d.ts.map +1 -1
  19. package/dist/commonjs/banner/lib/Banner.js +44 -69
  20. package/dist/commonjs/banner/lib/BannerActionText.d.ts +14 -0
  21. package/dist/commonjs/banner/lib/BannerActionText.d.ts.map +1 -0
  22. package/dist/commonjs/banner/lib/BannerActionText.js +42 -0
  23. package/dist/commonjs/banner/lib/BannerIcon.d.ts +14 -0
  24. package/dist/commonjs/banner/lib/BannerIcon.d.ts.map +1 -0
  25. package/dist/commonjs/banner/lib/BannerIcon.js +47 -0
  26. package/dist/commonjs/banner/lib/BannerLabel.d.ts +13 -0
  27. package/dist/commonjs/banner/lib/BannerLabel.d.ts.map +1 -0
  28. package/dist/commonjs/banner/lib/BannerLabel.js +45 -0
  29. package/dist/commonjs/banner/lib/hooks/index.d.ts +7 -0
  30. package/dist/commonjs/banner/lib/hooks/index.d.ts.map +1 -0
  31. package/dist/commonjs/banner/lib/hooks/index.js +11 -0
  32. package/dist/commonjs/banner/lib/hooks/useBanner.d.ts +16 -0
  33. package/dist/commonjs/banner/lib/hooks/useBanner.d.ts.map +1 -0
  34. package/dist/commonjs/banner/lib/hooks/useBanner.js +14 -0
  35. package/dist/commonjs/banner/lib/hooks/useBannerActionText.d.ts +15 -0
  36. package/dist/commonjs/banner/lib/hooks/useBannerActionText.d.ts.map +1 -0
  37. package/dist/commonjs/banner/lib/hooks/useBannerActionText.js +13 -0
  38. package/dist/commonjs/banner/lib/hooks/useBannerIcon.d.ts +18 -0
  39. package/dist/commonjs/banner/lib/hooks/useBannerIcon.d.ts.map +1 -0
  40. package/dist/commonjs/banner/lib/hooks/useBannerIcon.js +19 -0
  41. package/dist/commonjs/banner/lib/hooks/useBannerLabel.d.ts +15 -0
  42. package/dist/commonjs/banner/lib/hooks/useBannerLabel.d.ts.map +1 -0
  43. package/dist/commonjs/banner/lib/hooks/useBannerLabel.js +13 -0
  44. package/dist/commonjs/banner/lib/hooks/useBannerModel.d.ts +37 -0
  45. package/dist/commonjs/banner/lib/hooks/useBannerModel.d.ts.map +1 -0
  46. package/dist/commonjs/banner/lib/hooks/useBannerModel.js +22 -0
  47. package/dist/commonjs/banner/lib/hooks/useThemedPalette.d.ts +11 -0
  48. package/dist/commonjs/banner/lib/hooks/useThemedPalette.d.ts.map +1 -0
  49. package/dist/commonjs/banner/lib/hooks/useThemedPalette.js +39 -0
  50. package/dist/commonjs/common/lib/styles/hideMouseFocus.d.ts +3 -2
  51. package/dist/commonjs/common/lib/styles/hideMouseFocus.d.ts.map +1 -1
  52. package/dist/commonjs/pagination/lib/Pagination/common/Stack.d.ts +1 -1
  53. package/dist/es6/banner/index.d.ts +1 -3
  54. package/dist/es6/banner/index.d.ts.map +1 -1
  55. package/dist/es6/banner/index.js +1 -3
  56. package/dist/es6/banner/lib/Banner.d.ts +17 -33
  57. package/dist/es6/banner/lib/Banner.d.ts.map +1 -1
  58. package/dist/es6/banner/lib/Banner.js +46 -71
  59. package/dist/es6/banner/lib/BannerActionText.d.ts +14 -0
  60. package/dist/es6/banner/lib/BannerActionText.d.ts.map +1 -0
  61. package/dist/es6/banner/lib/BannerActionText.js +40 -0
  62. package/dist/es6/banner/lib/BannerIcon.d.ts +14 -0
  63. package/dist/es6/banner/lib/BannerIcon.d.ts.map +1 -0
  64. package/dist/es6/banner/lib/BannerIcon.js +45 -0
  65. package/dist/es6/banner/lib/BannerLabel.d.ts +13 -0
  66. package/dist/es6/banner/lib/BannerLabel.d.ts.map +1 -0
  67. package/dist/es6/banner/lib/BannerLabel.js +36 -0
  68. package/dist/es6/banner/lib/hooks/index.d.ts +7 -0
  69. package/dist/es6/banner/lib/hooks/index.d.ts.map +1 -0
  70. package/dist/es6/banner/lib/hooks/index.js +6 -0
  71. package/dist/es6/banner/lib/hooks/useBanner.d.ts +16 -0
  72. package/dist/es6/banner/lib/hooks/useBanner.d.ts.map +1 -0
  73. package/dist/es6/banner/lib/hooks/useBanner.js +12 -0
  74. package/dist/es6/banner/lib/hooks/useBannerActionText.d.ts +15 -0
  75. package/dist/es6/banner/lib/hooks/useBannerActionText.d.ts.map +1 -0
  76. package/dist/es6/banner/lib/hooks/useBannerActionText.js +11 -0
  77. package/dist/es6/banner/lib/hooks/useBannerIcon.d.ts +18 -0
  78. package/dist/es6/banner/lib/hooks/useBannerIcon.d.ts.map +1 -0
  79. package/dist/es6/banner/lib/hooks/useBannerIcon.js +17 -0
  80. package/dist/es6/banner/lib/hooks/useBannerLabel.d.ts +15 -0
  81. package/dist/es6/banner/lib/hooks/useBannerLabel.d.ts.map +1 -0
  82. package/dist/es6/banner/lib/hooks/useBannerLabel.js +11 -0
  83. package/dist/es6/banner/lib/hooks/useBannerModel.d.ts +37 -0
  84. package/dist/es6/banner/lib/hooks/useBannerModel.d.ts.map +1 -0
  85. package/dist/es6/banner/lib/hooks/useBannerModel.js +20 -0
  86. package/dist/es6/banner/lib/hooks/useThemedPalette.d.ts +11 -0
  87. package/dist/es6/banner/lib/hooks/useThemedPalette.d.ts.map +1 -0
  88. package/dist/es6/banner/lib/hooks/useThemedPalette.js +33 -0
  89. package/dist/es6/common/lib/styles/hideMouseFocus.d.ts +3 -2
  90. package/dist/es6/common/lib/styles/hideMouseFocus.d.ts.map +1 -1
  91. package/dist/es6/pagination/lib/Pagination/common/Stack.d.ts +1 -1
  92. package/package.json +5 -5
  93. package/ts3.5/dist/commonjs/banner/index.d.ts +1 -3
  94. package/ts3.5/dist/commonjs/banner/lib/Banner.d.ts +17 -33
  95. package/ts3.5/dist/commonjs/banner/lib/BannerActionText.d.ts +14 -0
  96. package/ts3.5/dist/commonjs/banner/lib/BannerIcon.d.ts +14 -0
  97. package/ts3.5/dist/commonjs/banner/lib/BannerLabel.d.ts +13 -0
  98. package/ts3.5/dist/commonjs/banner/lib/hooks/index.d.ts +7 -0
  99. package/ts3.5/dist/commonjs/banner/lib/hooks/useBanner.d.ts +16 -0
  100. package/ts3.5/dist/commonjs/banner/lib/hooks/useBannerActionText.d.ts +15 -0
  101. package/ts3.5/dist/commonjs/banner/lib/hooks/useBannerIcon.d.ts +18 -0
  102. package/ts3.5/dist/commonjs/banner/lib/hooks/useBannerLabel.d.ts +15 -0
  103. package/ts3.5/dist/commonjs/banner/lib/hooks/useBannerModel.d.ts +37 -0
  104. package/ts3.5/dist/commonjs/banner/lib/hooks/useThemedPalette.d.ts +11 -0
  105. package/ts3.5/dist/commonjs/common/lib/styles/hideMouseFocus.d.ts +3 -2
  106. package/ts3.5/dist/commonjs/pagination/lib/Pagination/common/Stack.d.ts +1 -1
  107. package/ts3.5/dist/es6/banner/index.d.ts +1 -3
  108. package/ts3.5/dist/es6/banner/lib/Banner.d.ts +17 -33
  109. package/ts3.5/dist/es6/banner/lib/BannerActionText.d.ts +14 -0
  110. package/ts3.5/dist/es6/banner/lib/BannerIcon.d.ts +14 -0
  111. package/ts3.5/dist/es6/banner/lib/BannerLabel.d.ts +13 -0
  112. package/ts3.5/dist/es6/banner/lib/hooks/index.d.ts +7 -0
  113. package/ts3.5/dist/es6/banner/lib/hooks/useBanner.d.ts +16 -0
  114. package/ts3.5/dist/es6/banner/lib/hooks/useBannerActionText.d.ts +15 -0
  115. package/ts3.5/dist/es6/banner/lib/hooks/useBannerIcon.d.ts +18 -0
  116. package/ts3.5/dist/es6/banner/lib/hooks/useBannerLabel.d.ts +15 -0
  117. package/ts3.5/dist/es6/banner/lib/hooks/useBannerModel.d.ts +37 -0
  118. package/ts3.5/dist/es6/banner/lib/hooks/useThemedPalette.d.ts +11 -0
  119. package/ts3.5/dist/es6/common/lib/styles/hideMouseFocus.d.ts +3 -2
  120. package/ts3.5/dist/es6/pagination/lib/Pagination/common/Stack.d.ts +1 -1
@@ -0,0 +1,20 @@
1
+ import { createEventMap, useEventMap, useUniqueId, } from '@workday/canvas-kit-react/common';
2
+ var BannerEventMap = createEventMap()({
3
+ guards: {},
4
+ callbacks: {},
5
+ });
6
+ export var useBannerModel = function (config) {
7
+ if (config === void 0) { config = {}; }
8
+ var _a, _b;
9
+ var id = useUniqueId(config.id);
10
+ var state = {
11
+ hasError: (_a = config.hasError) !== null && _a !== void 0 ? _a : false,
12
+ isSticky: (_b = config.isSticky) !== null && _b !== void 0 ? _b : false,
13
+ id: id,
14
+ };
15
+ var events = useEventMap(BannerEventMap, state, config, {});
16
+ return {
17
+ state: state,
18
+ events: events,
19
+ };
20
+ };
@@ -0,0 +1,11 @@
1
+ import { EmotionCanvasTheme } from '@workday/canvas-kit-react/common';
2
+ declare type paletteSelection = Exclude<keyof EmotionCanvasTheme['canvas']['palette'], 'common'>;
3
+ interface BackgroundColors {
4
+ normal?: string;
5
+ hover?: string;
6
+ contrast?: string;
7
+ }
8
+ export declare function getPaletteColors(type: paletteSelection, theme: EmotionCanvasTheme): BackgroundColors;
9
+ export declare const useThemedPalette: (type: "alert" | "error" | "primary" | "success" | "neutral") => BackgroundColors;
10
+ export {};
11
+ //# sourceMappingURL=useThemedPalette.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"useThemedPalette.d.ts","sourceRoot":"","sources":["../../../../../banner/lib/hooks/useThemedPalette.ts"],"names":[],"mappings":"AAAA,OAAO,EAAqB,kBAAkB,EAAW,MAAM,kCAAkC,CAAC;AAIlG,aAAK,gBAAgB,GAAG,OAAO,CAAC,MAAM,kBAAkB,CAAC,QAAQ,CAAC,CAAC,SAAS,CAAC,EAAE,QAAQ,CAAC,CAAC;AAEzF,UAAU,gBAAgB;IACxB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,CAAC;CACnB;AAmBD,wBAAgB,gBAAgB,CAC9B,IAAI,EAAE,gBAAgB,EACtB,KAAK,EAAE,kBAAkB,GACxB,gBAAgB,CAclB;AAED,eAAO,MAAM,gBAAgB,mFAI5B,CAAC"}
@@ -0,0 +1,33 @@
1
+ import { useTheme } from '@workday/canvas-kit-react/common';
2
+ import { colors } from '@workday/canvas-kit-react/tokens';
3
+ import chroma from 'chroma-js';
4
+ var isAccessible = function (foreground, background) {
5
+ return chroma.contrast(foreground, background) >= 3;
6
+ };
7
+ var getPaletteColorsFromTheme = function (palette, fallbackColors) {
8
+ return {
9
+ hover: palette.dark,
10
+ normal: palette.main,
11
+ contrast: isAccessible(palette.contrast, palette.main)
12
+ ? palette.contrast
13
+ : fallbackColors === null || fallbackColors === void 0 ? void 0 : fallbackColors.contrast,
14
+ };
15
+ };
16
+ export function getPaletteColors(type, theme) {
17
+ var palette = theme.canvas.palette[type];
18
+ switch (type) {
19
+ case 'error': {
20
+ return getPaletteColorsFromTheme(palette, { contrast: colors.frenchVanilla100 });
21
+ }
22
+ case 'alert': {
23
+ return getPaletteColorsFromTheme(palette, { contrast: colors.blackPepper400 });
24
+ }
25
+ default: {
26
+ return getPaletteColorsFromTheme(palette);
27
+ }
28
+ }
29
+ }
30
+ export var useThemedPalette = function (type) {
31
+ var theme = useTheme();
32
+ return getPaletteColors(type, theme);
33
+ };
@@ -1,8 +1,9 @@
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
  * A utility to hide the default canvas style focus ring when using mouse input.
4
5
  * Requires wrapping your components in an InputProvider component.
5
6
  */
6
- export declare const hideMouseFocus: CSSObject;
7
+ export declare const hideMouseFocus: CSSProperties;
7
8
  export declare const mouseFocusBehavior: (selectors: Record<string, Interpolation<undefined>>) => Record<string, Interpolation<undefined>>;
8
9
  //# sourceMappingURL=hideMouseFocus.d.ts.map
@@ -1 +1 @@
1
- {"version":3,"file":"hideMouseFocus.d.ts","sourceRoot":"","sources":["../../../../../common/lib/styles/hideMouseFocus.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,SAAS,EAAE,aAAa,EAAC,MAAM,eAAe,CAAC;AAEvD;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,SAQ5B,CAAC;AAYF,eAAO,MAAM,kBAAkB,mGAgB9B,CAAC"}
1
+ {"version":3,"file":"hideMouseFocus.d.ts","sourceRoot":"","sources":["../../../../../common/lib/styles/hideMouseFocus.ts"],"names":[],"mappings":"AAAA,OAAO,EAAC,aAAa,EAAC,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAC,aAAa,EAAC,MAAM,kCAAkC,CAAC;AAE/D;;;GAGG;AACH,eAAO,MAAM,cAAc,EAAE,aAQ5B,CAAC;AAYF,eAAO,MAAM,kBAAkB,mGAgB9B,CAAC"}
@@ -16,7 +16,7 @@ declare type Options = {
16
16
  shouldUseRTL: boolean;
17
17
  };
18
18
  export declare const useStack: ({ direction, shouldUseRTL, spacing }: Options) => {
19
- flexDirection: StackDirection;
19
+ flexDirection: import("@workday/canvas-kit-labs-react/layout").StackDirection;
20
20
  "& > *:not(style) ~ *:not(style)": {
21
21
  marginTop: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
22
22
  } | {
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@workday/canvas-kit-react",
3
- "version": "6.0.0-alpha.0-next.36+5890bf68",
3
+ "version": "6.0.0-alpha.0-next.37+4f33e928",
4
4
  "description": "The parent module that contains all Workday Canvas Kit React components",
5
5
  "author": "Workday, Inc. (https://www.workday.com)",
6
6
  "license": "Apache-2.0",
@@ -57,9 +57,9 @@
57
57
  "@emotion/styled": "^10.0.27",
58
58
  "@popperjs/core": "^2.5.4",
59
59
  "@workday/canvas-colors-web": "^2.0.0",
60
- "@workday/canvas-kit-labs-react": "^6.0.0-alpha.0-next.36+5890bf68",
61
- "@workday/canvas-kit-popup-stack": "^6.0.0-alpha.0-next.36+5890bf68",
62
- "@workday/canvas-kit-preview-react": "^6.0.0-alpha.0-next.36+5890bf68",
60
+ "@workday/canvas-kit-labs-react": "^6.0.0-alpha.0-next.37+4f33e928",
61
+ "@workday/canvas-kit-popup-stack": "^6.0.0-alpha.0-next.37+4f33e928",
62
+ "@workday/canvas-kit-preview-react": "^6.0.0-alpha.0-next.37+4f33e928",
63
63
  "@workday/canvas-system-icons-web": "1.0.41",
64
64
  "@workday/design-assets-types": "^0.2.4",
65
65
  "chroma-js": "^2.1.0",
@@ -77,5 +77,5 @@
77
77
  "@workday/canvas-accent-icons-web": "^1.0.0",
78
78
  "@workday/canvas-applet-icons-web": "^0.17.50"
79
79
  },
80
- "gitHead": "5890bf680def9c37d6e386472634cc3e1b6d81e9"
80
+ "gitHead": "4f33e928c2e93b179997eaf8c9c6b40b87c10580"
81
81
  }
@@ -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,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
@@ -0,0 +1,14 @@
1
+ import * as React from 'react';
2
+ import { ExtractProps } from '@workday/canvas-kit-react/common';
3
+ import { Box } from '@workday/canvas-kit-labs-react/common';
4
+ import { BannerModel } from './hooks';
5
+ export interface BannerActionTextProps extends ExtractProps<typeof Box, never> {
6
+ model?: BannerModel;
7
+ /**
8
+ * The text of the Banner action.
9
+ * @default 'View All'
10
+ */
11
+ children?: React.ReactNode;
12
+ }
13
+ export declare const BannerActionText: import("../../common").ElementComponent<"span", BannerActionTextProps>;
14
+ //# sourceMappingURL=BannerActionText.d.ts.map
@@ -0,0 +1,14 @@
1
+ import { ExtractProps } from '@workday/canvas-kit-react/common';
2
+ import { SystemIcon } from '@workday/canvas-kit-react/icon';
3
+ import { CanvasSystemIcon } from '@workday/design-assets-types';
4
+ import { BannerModel } from './hooks';
5
+ export interface BannerIconProps extends Omit<ExtractProps<typeof SystemIcon, never>, 'icon'> {
6
+ model?: BannerModel;
7
+ /**
8
+ * Icon to show next to label
9
+ * @default exclamationTriangleIcon or exclamationCircleIcon when hasError is true
10
+ */
11
+ icon?: CanvasSystemIcon;
12
+ }
13
+ export declare const BannerIcon: import("../../common").ElementComponent<"span", BannerIconProps>;
14
+ //# sourceMappingURL=BannerIcon.d.ts.map
@@ -0,0 +1,13 @@
1
+ import * as React from 'react';
2
+ import { ExtractProps } from '@workday/canvas-kit-react/common';
3
+ import { Flex } from '@workday/canvas-kit-labs-react/layout';
4
+ import { BannerModel } from './hooks';
5
+ export interface BannerLabelProps extends ExtractProps<typeof Flex, never> {
6
+ model?: BannerModel;
7
+ /**
8
+ * The text of the Banner.
9
+ */
10
+ children: React.ReactNode;
11
+ }
12
+ export declare const BannerLabel: import("../../common").ElementComponent<"div", BannerLabelProps>;
13
+ //# sourceMappingURL=BannerLabel.d.ts.map
@@ -0,0 +1,7 @@
1
+ export * from './useBannerModel';
2
+ export * from './useThemedPalette';
3
+ export * from './useBannerIcon';
4
+ export * from './useBannerLabel';
5
+ export * from './useBannerActionText';
6
+ export * from './useBanner';
7
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1,16 @@
1
+ /// <reference types="@emotion/core" />
2
+ /**
3
+ * Adds the necessary props to a `Banner` component.
4
+ * Used by the Banner component
5
+ */
6
+ export declare const useBanner: <P extends {}, R>(model: import("../../../common").Model<{
7
+ hasError?: boolean | undefined;
8
+ isSticky?: boolean | undefined;
9
+ id?: string | undefined;
10
+ }, {}>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
11
+ 'aria-describedby': string;
12
+ 'aria-labelledby': string;
13
+ } & P & (R extends HTMLOrSVGElement ? {
14
+ ref: import("react").Ref<R>;
15
+ } : {});
16
+ //# sourceMappingURL=useBanner.d.ts.map
@@ -0,0 +1,15 @@
1
+ /// <reference types="@emotion/core" />
2
+ /**
3
+ * Adds the necessary props to a `ActionText` component.
4
+ * Used by the Banner.ActionText subcomponent
5
+ */
6
+ export declare const useBannerActionText: <P extends {}, R>(model: import("../../../common").Model<{
7
+ hasError?: boolean | undefined;
8
+ isSticky?: boolean | undefined;
9
+ id?: string | undefined;
10
+ }, {}>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
11
+ id: string;
12
+ } & P & (R extends HTMLOrSVGElement ? {
13
+ ref: import("react").Ref<R>;
14
+ } : {});
15
+ //# sourceMappingURL=useBannerActionText.d.ts.map
@@ -0,0 +1,18 @@
1
+ /// <reference types="@emotion/core" />
2
+ /**
3
+ * Adds the necessary props to a `Icon` component.
4
+ * Used by the Banner.Icon subcomponent
5
+ */
6
+ export declare const useBannerIcon: <P extends {}, R>(model: import("../../../common").Model<{
7
+ hasError?: boolean | undefined;
8
+ isSticky?: boolean | undefined;
9
+ id?: string | undefined;
10
+ }, {}>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
11
+ icon: import("@workday/design-assets-types").CanvasSystemIcon;
12
+ color: string | undefined;
13
+ colorHover: string | undefined;
14
+ size: number;
15
+ } & P & (R extends HTMLOrSVGElement ? {
16
+ ref: import("react").Ref<R>;
17
+ } : {});
18
+ //# sourceMappingURL=useBannerIcon.d.ts.map
@@ -0,0 +1,15 @@
1
+ /// <reference types="@emotion/core" />
2
+ /**
3
+ * Adds the necessary props to a `Label` component.
4
+ * Used by the Banner.Label subcomponent
5
+ */
6
+ export declare const useBannerLabel: <P extends {}, R>(model: import("../../../common").Model<{
7
+ hasError?: boolean | undefined;
8
+ isSticky?: boolean | undefined;
9
+ id?: string | undefined;
10
+ }, {}>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
11
+ id: string;
12
+ } & P & (R extends HTMLOrSVGElement ? {
13
+ ref: import("react").Ref<R>;
14
+ } : {});
15
+ //# sourceMappingURL=useBannerLabel.d.ts.map
@@ -0,0 +1,37 @@
1
+ import { Model, ToModelConfig } from '@workday/canvas-kit-react/common';
2
+ declare type BannerState = {
3
+ /**
4
+ * Optional flag to denote the banner has an error to display. When true the default `Banner.Icon`
5
+ * will be `exclamationCircleIcon`, and a themed error color will be applied.
6
+ * @default false
7
+ */
8
+ hasError?: boolean;
9
+ /**
10
+ * Optional flag to denote the banner is stuck to the side of the screen. When true the default `Banner.ActionText`
11
+ * will be hidden, and some basic styles will be applied.
12
+ * You will still need to manually set the css `position` value.
13
+ * @default false
14
+ */
15
+ isSticky?: boolean;
16
+ /**
17
+ * Optional `id` provided to `Banner`'s subcomponents as HTML attributes:
18
+ * - `Banner` will set `aria-describedby` to `label-${id}`
19
+ * - `Banner` will set `aria-label` to `action-${id}`
20
+ * - `Banner.Label` will set `id` to `label-${id}`
21
+ * - `Banner.ActionText` will set `id` to `action-${id}`
22
+ *
23
+ * If a value is not provided, a unique id will be automatically created by `useUniqueId()`.
24
+ * @default `useUniqueId()`
25
+ */
26
+ id?: string;
27
+ };
28
+ declare type BannerEvents = {};
29
+ export declare type BannerModel = Model<BannerState, BannerEvents>;
30
+ declare const BannerEventMap: {
31
+ guards: {};
32
+ callbacks: {};
33
+ };
34
+ export declare type BannerModelConfig = BannerState & Partial<ToModelConfig<BannerState, BannerEvents, typeof BannerEventMap>>;
35
+ export declare const useBannerModel: (config?: BannerModelConfig) => Model<BannerState, BannerEvents>;
36
+ export {};
37
+ //# sourceMappingURL=useBannerModel.d.ts.map
@@ -0,0 +1,11 @@
1
+ import { EmotionCanvasTheme } from '@workday/canvas-kit-react/common';
2
+ declare type paletteSelection = Exclude<keyof EmotionCanvasTheme['canvas']['palette'], 'common'>;
3
+ interface BackgroundColors {
4
+ normal?: string;
5
+ hover?: string;
6
+ contrast?: string;
7
+ }
8
+ export declare function getPaletteColors(type: paletteSelection, theme: EmotionCanvasTheme): BackgroundColors;
9
+ export declare const useThemedPalette: (type: "alert" | "error" | "primary" | "success" | "neutral") => BackgroundColors;
10
+ export {};
11
+ //# sourceMappingURL=useThemedPalette.d.ts.map
@@ -1,8 +1,9 @@
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
  * A utility to hide the default canvas style focus ring when using mouse input.
4
5
  * Requires wrapping your components in an InputProvider component.
5
6
  */
6
- export declare const hideMouseFocus: CSSObject;
7
+ export declare const hideMouseFocus: CSSProperties;
7
8
  export declare const mouseFocusBehavior: (selectors: Record<string, Interpolation<undefined>>) => Record<string, Interpolation<undefined>>;
8
9
  //# sourceMappingURL=hideMouseFocus.d.ts.map
@@ -16,7 +16,7 @@ declare type Options = {
16
16
  shouldUseRTL: boolean;
17
17
  };
18
18
  export declare const useStack: ({ direction, shouldUseRTL, spacing }: Options) => {
19
- flexDirection: StackDirection;
19
+ flexDirection: import("@workday/canvas-kit-labs-react/layout").StackDirection;
20
20
  "& > *:not(style) ~ *:not(style)": {
21
21
  marginTop: "0px" | "4px" | "8px" | "12px" | "16px" | "24px" | "32px" | "40px" | "64px" | "80px";
22
22
  } | {
@@ -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,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
@@ -0,0 +1,14 @@
1
+ import * as React from 'react';
2
+ import { ExtractProps } from '@workday/canvas-kit-react/common';
3
+ import { Box } from '@workday/canvas-kit-labs-react/common';
4
+ import { BannerModel } from './hooks';
5
+ export interface BannerActionTextProps extends ExtractProps<typeof Box, never> {
6
+ model?: BannerModel;
7
+ /**
8
+ * The text of the Banner action.
9
+ * @default 'View All'
10
+ */
11
+ children?: React.ReactNode;
12
+ }
13
+ export declare const BannerActionText: import("../../common").ElementComponent<"span", BannerActionTextProps>;
14
+ //# sourceMappingURL=BannerActionText.d.ts.map
@@ -0,0 +1,14 @@
1
+ import { ExtractProps } from '@workday/canvas-kit-react/common';
2
+ import { SystemIcon } from '@workday/canvas-kit-react/icon';
3
+ import { CanvasSystemIcon } from '@workday/design-assets-types';
4
+ import { BannerModel } from './hooks';
5
+ export interface BannerIconProps extends Omit<ExtractProps<typeof SystemIcon, never>, 'icon'> {
6
+ model?: BannerModel;
7
+ /**
8
+ * Icon to show next to label
9
+ * @default exclamationTriangleIcon or exclamationCircleIcon when hasError is true
10
+ */
11
+ icon?: CanvasSystemIcon;
12
+ }
13
+ export declare const BannerIcon: import("../../common").ElementComponent<"span", BannerIconProps>;
14
+ //# sourceMappingURL=BannerIcon.d.ts.map
@@ -0,0 +1,13 @@
1
+ import * as React from 'react';
2
+ import { ExtractProps } from '@workday/canvas-kit-react/common';
3
+ import { Flex } from '@workday/canvas-kit-labs-react/layout';
4
+ import { BannerModel } from './hooks';
5
+ export interface BannerLabelProps extends ExtractProps<typeof Flex, never> {
6
+ model?: BannerModel;
7
+ /**
8
+ * The text of the Banner.
9
+ */
10
+ children: React.ReactNode;
11
+ }
12
+ export declare const BannerLabel: import("../../common").ElementComponent<"div", BannerLabelProps>;
13
+ //# sourceMappingURL=BannerLabel.d.ts.map
@@ -0,0 +1,7 @@
1
+ export * from './useBannerModel';
2
+ export * from './useThemedPalette';
3
+ export * from './useBannerIcon';
4
+ export * from './useBannerLabel';
5
+ export * from './useBannerActionText';
6
+ export * from './useBanner';
7
+ //# sourceMappingURL=index.d.ts.map
@@ -0,0 +1,16 @@
1
+ /// <reference types="@emotion/core" />
2
+ /**
3
+ * Adds the necessary props to a `Banner` component.
4
+ * Used by the Banner component
5
+ */
6
+ export declare const useBanner: <P extends {}, R>(model: import("../../../common").Model<{
7
+ hasError?: boolean | undefined;
8
+ isSticky?: boolean | undefined;
9
+ id?: string | undefined;
10
+ }, {}>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
11
+ 'aria-describedby': string;
12
+ 'aria-labelledby': string;
13
+ } & P & (R extends HTMLOrSVGElement ? {
14
+ ref: import("react").Ref<R>;
15
+ } : {});
16
+ //# sourceMappingURL=useBanner.d.ts.map
@@ -0,0 +1,15 @@
1
+ /// <reference types="@emotion/core" />
2
+ /**
3
+ * Adds the necessary props to a `ActionText` component.
4
+ * Used by the Banner.ActionText subcomponent
5
+ */
6
+ export declare const useBannerActionText: <P extends {}, R>(model: import("../../../common").Model<{
7
+ hasError?: boolean | undefined;
8
+ isSticky?: boolean | undefined;
9
+ id?: string | undefined;
10
+ }, {}>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
11
+ id: string;
12
+ } & P & (R extends HTMLOrSVGElement ? {
13
+ ref: import("react").Ref<R>;
14
+ } : {});
15
+ //# sourceMappingURL=useBannerActionText.d.ts.map
@@ -0,0 +1,18 @@
1
+ /// <reference types="@emotion/core" />
2
+ /**
3
+ * Adds the necessary props to a `Icon` component.
4
+ * Used by the Banner.Icon subcomponent
5
+ */
6
+ export declare const useBannerIcon: <P extends {}, R>(model: import("../../../common").Model<{
7
+ hasError?: boolean | undefined;
8
+ isSticky?: boolean | undefined;
9
+ id?: string | undefined;
10
+ }, {}>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
11
+ icon: import("@workday/design-assets-types").CanvasSystemIcon;
12
+ color: string | undefined;
13
+ colorHover: string | undefined;
14
+ size: number;
15
+ } & P & (R extends HTMLOrSVGElement ? {
16
+ ref: import("react").Ref<R>;
17
+ } : {});
18
+ //# sourceMappingURL=useBannerIcon.d.ts.map
@@ -0,0 +1,15 @@
1
+ /// <reference types="@emotion/core" />
2
+ /**
3
+ * Adds the necessary props to a `Label` component.
4
+ * Used by the Banner.Label subcomponent
5
+ */
6
+ export declare const useBannerLabel: <P extends {}, R>(model: import("../../../common").Model<{
7
+ hasError?: boolean | undefined;
8
+ isSticky?: boolean | undefined;
9
+ id?: string | undefined;
10
+ }, {}>, elemProps?: P | undefined, ref?: ((instance: R | null) => void) | import("react").RefObject<R> | null | undefined) => {
11
+ id: string;
12
+ } & P & (R extends HTMLOrSVGElement ? {
13
+ ref: import("react").Ref<R>;
14
+ } : {});
15
+ //# sourceMappingURL=useBannerLabel.d.ts.map
@@ -0,0 +1,37 @@
1
+ import { Model, ToModelConfig } from '@workday/canvas-kit-react/common';
2
+ declare type BannerState = {
3
+ /**
4
+ * Optional flag to denote the banner has an error to display. When true the default `Banner.Icon`
5
+ * will be `exclamationCircleIcon`, and a themed error color will be applied.
6
+ * @default false
7
+ */
8
+ hasError?: boolean;
9
+ /**
10
+ * Optional flag to denote the banner is stuck to the side of the screen. When true the default `Banner.ActionText`
11
+ * will be hidden, and some basic styles will be applied.
12
+ * You will still need to manually set the css `position` value.
13
+ * @default false
14
+ */
15
+ isSticky?: boolean;
16
+ /**
17
+ * Optional `id` provided to `Banner`'s subcomponents as HTML attributes:
18
+ * - `Banner` will set `aria-describedby` to `label-${id}`
19
+ * - `Banner` will set `aria-label` to `action-${id}`
20
+ * - `Banner.Label` will set `id` to `label-${id}`
21
+ * - `Banner.ActionText` will set `id` to `action-${id}`
22
+ *
23
+ * If a value is not provided, a unique id will be automatically created by `useUniqueId()`.
24
+ * @default `useUniqueId()`
25
+ */
26
+ id?: string;
27
+ };
28
+ declare type BannerEvents = {};
29
+ export declare type BannerModel = Model<BannerState, BannerEvents>;
30
+ declare const BannerEventMap: {
31
+ guards: {};
32
+ callbacks: {};
33
+ };
34
+ export declare type BannerModelConfig = BannerState & Partial<ToModelConfig<BannerState, BannerEvents, typeof BannerEventMap>>;
35
+ export declare const useBannerModel: (config?: BannerModelConfig) => Model<BannerState, BannerEvents>;
36
+ export {};
37
+ //# sourceMappingURL=useBannerModel.d.ts.map
@@ -0,0 +1,11 @@
1
+ import { EmotionCanvasTheme } from '@workday/canvas-kit-react/common';
2
+ declare type paletteSelection = Exclude<keyof EmotionCanvasTheme['canvas']['palette'], 'common'>;
3
+ interface BackgroundColors {
4
+ normal?: string;
5
+ hover?: string;
6
+ contrast?: string;
7
+ }
8
+ export declare function getPaletteColors(type: paletteSelection, theme: EmotionCanvasTheme): BackgroundColors;
9
+ export declare const useThemedPalette: (type: "alert" | "error" | "primary" | "success" | "neutral") => BackgroundColors;
10
+ export {};
11
+ //# sourceMappingURL=useThemedPalette.d.ts.map