@workday/canvas-kit-labs-react 5.3.0 → 5.3.4
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/common/lib/theming/index.ts +0 -1
- package/dist/commonjs/common/lib/theming/index.d.ts +0 -1
- package/dist/commonjs/common/lib/theming/index.d.ts.map +1 -1
- package/dist/commonjs/common/lib/theming/index.js +0 -1
- package/dist/commonjs/header/index.d.ts +5 -5
- package/dist/commonjs/header/index.d.ts.map +1 -1
- package/dist/commonjs/header/index.js +2 -2
- package/dist/commonjs/header/lib/GlobalHeader.d.ts +2 -11
- package/dist/commonjs/header/lib/GlobalHeader.d.ts.map +1 -1
- package/dist/commonjs/header/lib/GlobalHeader.js +8 -19
- package/dist/commonjs/header/lib/Header.d.ts +8 -17
- package/dist/commonjs/header/lib/Header.d.ts.map +1 -1
- package/dist/commonjs/header/lib/Header.js +14 -27
- package/dist/commonjs/header/lib/parts/DubLogoTitle.d.ts +4 -13
- package/dist/commonjs/header/lib/parts/DubLogoTitle.d.ts.map +1 -1
- package/dist/commonjs/header/lib/parts/DubLogoTitle.js +11 -22
- package/dist/commonjs/{search-form/lib/SearchForm.d.ts → header/lib/parts/SearchBar.d.ts} +23 -22
- package/dist/commonjs/header/lib/parts/SearchBar.d.ts.map +1 -0
- package/dist/commonjs/{search-form/lib/SearchForm.js → header/lib/parts/SearchBar.js} +14 -13
- package/dist/commonjs/header/lib/parts/WorkdayLogoTitle.d.ts +5 -14
- package/dist/commonjs/header/lib/parts/WorkdayLogoTitle.d.ts.map +1 -1
- package/dist/commonjs/header/lib/parts/WorkdayLogoTitle.js +12 -25
- package/dist/commonjs/header/lib/parts/index.d.ts +3 -2
- package/dist/commonjs/header/lib/parts/index.d.ts.map +1 -1
- package/dist/commonjs/header/lib/parts/index.js +4 -2
- package/dist/commonjs/header/lib/shared/themes.d.ts +19 -28
- package/dist/commonjs/header/lib/shared/themes.d.ts.map +1 -1
- package/dist/commonjs/header/lib/shared/themes.js +36 -13
- package/dist/commonjs/header/lib/shared/types.d.ts +8 -3
- package/dist/commonjs/header/lib/shared/types.d.ts.map +1 -1
- package/dist/commonjs/header/lib/shared/types.js +23 -17
- package/dist/commonjs/index.d.ts +0 -2
- package/dist/commonjs/index.d.ts.map +1 -1
- package/dist/commonjs/index.js +0 -2
- package/dist/commonjs/layout/lib/utils/getValidChildren.d.ts +1 -1
- package/dist/commonjs/layout/lib/utils/getValidChildren.d.ts.map +1 -1
- package/dist/es6/common/lib/theming/index.d.ts +0 -1
- package/dist/es6/common/lib/theming/index.d.ts.map +1 -1
- package/dist/es6/common/lib/theming/index.js +0 -1
- package/dist/es6/header/index.d.ts +5 -5
- package/dist/es6/header/index.d.ts.map +1 -1
- package/dist/es6/header/index.js +5 -5
- package/dist/es6/header/lib/GlobalHeader.d.ts +2 -11
- package/dist/es6/header/lib/GlobalHeader.d.ts.map +1 -1
- package/dist/es6/header/lib/GlobalHeader.js +11 -22
- package/dist/es6/header/lib/Header.d.ts +8 -17
- package/dist/es6/header/lib/Header.d.ts.map +1 -1
- package/dist/es6/header/lib/Header.js +17 -30
- package/dist/es6/header/lib/parts/DubLogoTitle.d.ts +4 -13
- package/dist/es6/header/lib/parts/DubLogoTitle.d.ts.map +1 -1
- package/dist/es6/header/lib/parts/DubLogoTitle.js +12 -23
- package/dist/es6/{search-form/lib/SearchForm.d.ts → header/lib/parts/SearchBar.d.ts} +23 -22
- package/dist/es6/header/lib/parts/SearchBar.d.ts.map +1 -0
- package/dist/es6/{search-form/lib/SearchForm.js → header/lib/parts/SearchBar.js} +12 -11
- package/dist/es6/header/lib/parts/WorkdayLogoTitle.d.ts +5 -14
- package/dist/es6/header/lib/parts/WorkdayLogoTitle.d.ts.map +1 -1
- package/dist/es6/header/lib/parts/WorkdayLogoTitle.js +13 -26
- package/dist/es6/header/lib/parts/index.d.ts +3 -2
- package/dist/es6/header/lib/parts/index.d.ts.map +1 -1
- package/dist/es6/header/lib/parts/index.js +3 -2
- package/dist/es6/header/lib/shared/themes.d.ts +19 -28
- package/dist/es6/header/lib/shared/themes.d.ts.map +1 -1
- package/dist/es6/header/lib/shared/themes.js +37 -14
- package/dist/es6/header/lib/shared/types.d.ts +8 -3
- package/dist/es6/header/lib/shared/types.d.ts.map +1 -1
- package/dist/es6/header/lib/shared/types.js +23 -17
- package/dist/es6/index.d.ts +0 -2
- package/dist/es6/index.d.ts.map +1 -1
- package/dist/es6/index.js +0 -2
- package/dist/es6/layout/lib/utils/getValidChildren.d.ts +1 -1
- package/dist/es6/layout/lib/utils/getValidChildren.d.ts.map +1 -1
- package/header/README.md +181 -37
- package/header/index.ts +5 -5
- package/header/lib/GlobalHeader.tsx +9 -26
- package/header/lib/Header.tsx +26 -58
- package/header/lib/parts/DubLogoTitle.tsx +9 -26
- package/{search-form/lib/SearchForm.tsx → header/lib/parts/SearchBar.tsx} +31 -30
- package/header/lib/parts/WorkdayLogoTitle.tsx +11 -40
- package/header/lib/parts/index.ts +3 -2
- package/header/lib/shared/themes.tsx +56 -32
- package/header/lib/shared/types.tsx +9 -3
- package/index.ts +0 -2
- package/package.json +5 -7
- package/ts3.5/dist/commonjs/common/lib/theming/index.d.ts +0 -1
- package/ts3.5/dist/commonjs/header/index.d.ts +5 -5
- package/ts3.5/dist/commonjs/header/lib/GlobalHeader.d.ts +2 -11
- package/ts3.5/dist/commonjs/header/lib/Header.d.ts +8 -17
- package/ts3.5/dist/commonjs/header/lib/parts/DubLogoTitle.d.ts +4 -13
- package/ts3.5/dist/{es6/search-form/lib/SearchForm.d.ts → commonjs/header/lib/parts/SearchBar.d.ts} +23 -22
- package/ts3.5/dist/commonjs/header/lib/parts/WorkdayLogoTitle.d.ts +5 -14
- package/ts3.5/dist/commonjs/header/lib/parts/index.d.ts +3 -2
- package/ts3.5/dist/commonjs/header/lib/shared/themes.d.ts +19 -28
- package/ts3.5/dist/commonjs/header/lib/shared/types.d.ts +8 -3
- package/ts3.5/dist/commonjs/index.d.ts +0 -2
- package/ts3.5/dist/commonjs/layout/lib/utils/getValidChildren.d.ts +1 -1
- package/ts3.5/dist/es6/common/lib/theming/index.d.ts +0 -1
- package/ts3.5/dist/es6/header/index.d.ts +5 -5
- package/ts3.5/dist/es6/header/lib/GlobalHeader.d.ts +2 -11
- package/ts3.5/dist/es6/header/lib/Header.d.ts +8 -17
- package/ts3.5/dist/es6/header/lib/parts/DubLogoTitle.d.ts +4 -13
- package/ts3.5/dist/{commonjs/search-form/lib/SearchForm.d.ts → es6/header/lib/parts/SearchBar.d.ts} +23 -22
- package/ts3.5/dist/es6/header/lib/parts/WorkdayLogoTitle.d.ts +5 -14
- package/ts3.5/dist/es6/header/lib/parts/index.d.ts +3 -2
- package/ts3.5/dist/es6/header/lib/shared/themes.d.ts +19 -28
- package/ts3.5/dist/es6/header/lib/shared/types.d.ts +8 -3
- package/ts3.5/dist/es6/index.d.ts +0 -2
- package/ts3.5/dist/es6/layout/lib/utils/getValidChildren.d.ts +1 -1
- package/common/lib/theming/useThemedRing.ts +0 -84
- package/dist/commonjs/common/lib/theming/useThemedRing.d.ts +0 -11
- package/dist/commonjs/common/lib/theming/useThemedRing.d.ts.map +0 -1
- package/dist/commonjs/common/lib/theming/useThemedRing.js +0 -61
- package/dist/commonjs/search-form/index.d.ts +0 -3
- package/dist/commonjs/search-form/index.d.ts.map +0 -1
- package/dist/commonjs/search-form/index.js +0 -7
- package/dist/commonjs/search-form/lib/SearchForm.d.ts.map +0 -1
- package/dist/commonjs/search-form/lib/themes.d.ts +0 -21
- package/dist/commonjs/search-form/lib/themes.d.ts.map +0 -1
- package/dist/commonjs/search-form/lib/themes.js +0 -41
- package/dist/commonjs/text-input/index.d.ts +0 -7
- package/dist/commonjs/text-input/index.d.ts.map +0 -1
- package/dist/commonjs/text-input/index.js +0 -11
- package/dist/commonjs/text-input/lib/TextInput.d.ts +0 -21
- package/dist/commonjs/text-input/lib/TextInput.d.ts.map +0 -1
- package/dist/commonjs/text-input/lib/TextInput.js +0 -36
- package/dist/commonjs/text-input/lib/TextInputField.d.ts +0 -8
- package/dist/commonjs/text-input/lib/TextInputField.d.ts.map +0 -1
- package/dist/commonjs/text-input/lib/TextInputField.js +0 -66
- package/dist/commonjs/text-input/lib/TextInputHint.d.ts +0 -13
- package/dist/commonjs/text-input/lib/TextInputHint.d.ts.map +0 -1
- package/dist/commonjs/text-input/lib/TextInputHint.js +0 -46
- package/dist/commonjs/text-input/lib/TextInputLabel.d.ts +0 -17
- package/dist/commonjs/text-input/lib/TextInputLabel.d.ts.map +0 -1
- package/dist/commonjs/text-input/lib/TextInputLabel.js +0 -54
- package/dist/commonjs/text-input/lib/hooks/useTextInputField.d.ts +0 -19
- package/dist/commonjs/text-input/lib/hooks/useTextInputField.d.ts.map +0 -1
- package/dist/commonjs/text-input/lib/hooks/useTextInputField.js +0 -16
- package/dist/commonjs/text-input/lib/hooks/useTextInputHint.d.ts +0 -15
- package/dist/commonjs/text-input/lib/hooks/useTextInputHint.d.ts.map +0 -1
- package/dist/commonjs/text-input/lib/hooks/useTextInputHint.js +0 -12
- package/dist/commonjs/text-input/lib/hooks/useTextInputLabel.d.ts +0 -15
- package/dist/commonjs/text-input/lib/hooks/useTextInputLabel.d.ts.map +0 -1
- package/dist/commonjs/text-input/lib/hooks/useTextInputLabel.js +0 -12
- package/dist/commonjs/text-input/lib/hooks/useTextInputModel.d.ts +0 -17
- package/dist/commonjs/text-input/lib/hooks/useTextInputModel.d.ts.map +0 -1
- package/dist/commonjs/text-input/lib/hooks/useTextInputModel.js +0 -23
- package/dist/es6/common/lib/theming/useThemedRing.d.ts +0 -11
- package/dist/es6/common/lib/theming/useThemedRing.d.ts.map +0 -1
- package/dist/es6/common/lib/theming/useThemedRing.js +0 -55
- package/dist/es6/search-form/index.d.ts +0 -3
- package/dist/es6/search-form/index.d.ts.map +0 -1
- package/dist/es6/search-form/index.js +0 -2
- package/dist/es6/search-form/lib/SearchForm.d.ts.map +0 -1
- package/dist/es6/search-form/lib/themes.d.ts +0 -21
- package/dist/es6/search-form/lib/themes.d.ts.map +0 -1
- package/dist/es6/search-form/lib/themes.js +0 -39
- package/dist/es6/text-input/index.d.ts +0 -7
- package/dist/es6/text-input/index.d.ts.map +0 -1
- package/dist/es6/text-input/index.js +0 -6
- package/dist/es6/text-input/lib/TextInput.d.ts +0 -21
- package/dist/es6/text-input/lib/TextInput.d.ts.map +0 -1
- package/dist/es6/text-input/lib/TextInput.js +0 -31
- package/dist/es6/text-input/lib/TextInputField.d.ts +0 -8
- package/dist/es6/text-input/lib/TextInputField.d.ts.map +0 -1
- package/dist/es6/text-input/lib/TextInputField.js +0 -64
- package/dist/es6/text-input/lib/TextInputHint.d.ts +0 -13
- package/dist/es6/text-input/lib/TextInputHint.d.ts.map +0 -1
- package/dist/es6/text-input/lib/TextInputHint.js +0 -44
- package/dist/es6/text-input/lib/TextInputLabel.d.ts +0 -17
- package/dist/es6/text-input/lib/TextInputLabel.d.ts.map +0 -1
- package/dist/es6/text-input/lib/TextInputLabel.js +0 -52
- package/dist/es6/text-input/lib/hooks/useTextInputField.d.ts +0 -19
- package/dist/es6/text-input/lib/hooks/useTextInputField.d.ts.map +0 -1
- package/dist/es6/text-input/lib/hooks/useTextInputField.js +0 -14
- package/dist/es6/text-input/lib/hooks/useTextInputHint.d.ts +0 -15
- package/dist/es6/text-input/lib/hooks/useTextInputHint.d.ts.map +0 -1
- package/dist/es6/text-input/lib/hooks/useTextInputHint.js +0 -10
- package/dist/es6/text-input/lib/hooks/useTextInputLabel.d.ts +0 -15
- package/dist/es6/text-input/lib/hooks/useTextInputLabel.d.ts.map +0 -1
- package/dist/es6/text-input/lib/hooks/useTextInputLabel.js +0 -10
- package/dist/es6/text-input/lib/hooks/useTextInputModel.d.ts +0 -17
- package/dist/es6/text-input/lib/hooks/useTextInputModel.d.ts.map +0 -1
- package/dist/es6/text-input/lib/hooks/useTextInputModel.js +0 -21
- package/search-form/LICENSE +0 -52
- package/search-form/README.md +0 -6
- package/search-form/index.ts +0 -2
- package/search-form/lib/themes.ts +0 -54
- package/search-form/package.json +0 -5
- package/text-input/LICENSE +0 -52
- package/text-input/README.md +0 -11
- package/text-input/index.ts +0 -6
- package/text-input/lib/TextInput.tsx +0 -34
- package/text-input/lib/TextInputField.tsx +0 -75
- package/text-input/lib/TextInputHint.tsx +0 -52
- package/text-input/lib/TextInputLabel.tsx +0 -74
- package/text-input/lib/hooks/useTextInputField.tsx +0 -15
- package/text-input/lib/hooks/useTextInputHint.tsx +0 -11
- package/text-input/lib/hooks/useTextInputLabel.tsx +0 -11
- package/text-input/lib/hooks/useTextInputModel.tsx +0 -45
- package/text-input/package.json +0 -5
- package/ts3.5/dist/commonjs/common/lib/theming/useThemedRing.d.ts +0 -11
- package/ts3.5/dist/commonjs/search-form/index.d.ts +0 -3
- package/ts3.5/dist/commonjs/search-form/lib/themes.d.ts +0 -21
- package/ts3.5/dist/commonjs/text-input/index.d.ts +0 -7
- package/ts3.5/dist/commonjs/text-input/lib/TextInput.d.ts +0 -21
- package/ts3.5/dist/commonjs/text-input/lib/TextInputField.d.ts +0 -8
- package/ts3.5/dist/commonjs/text-input/lib/TextInputHint.d.ts +0 -13
- package/ts3.5/dist/commonjs/text-input/lib/TextInputLabel.d.ts +0 -17
- package/ts3.5/dist/commonjs/text-input/lib/hooks/useTextInputField.d.ts +0 -19
- package/ts3.5/dist/commonjs/text-input/lib/hooks/useTextInputHint.d.ts +0 -15
- package/ts3.5/dist/commonjs/text-input/lib/hooks/useTextInputLabel.d.ts +0 -15
- package/ts3.5/dist/commonjs/text-input/lib/hooks/useTextInputModel.d.ts +0 -17
- package/ts3.5/dist/es6/common/lib/theming/useThemedRing.d.ts +0 -11
- package/ts3.5/dist/es6/search-form/index.d.ts +0 -3
- package/ts3.5/dist/es6/search-form/lib/themes.d.ts +0 -21
- package/ts3.5/dist/es6/text-input/index.d.ts +0 -7
- package/ts3.5/dist/es6/text-input/lib/TextInput.d.ts +0 -21
- package/ts3.5/dist/es6/text-input/lib/TextInputField.d.ts +0 -8
- package/ts3.5/dist/es6/text-input/lib/TextInputHint.d.ts +0 -13
- package/ts3.5/dist/es6/text-input/lib/TextInputLabel.d.ts +0 -17
- package/ts3.5/dist/es6/text-input/lib/hooks/useTextInputField.d.ts +0 -19
- package/ts3.5/dist/es6/text-input/lib/hooks/useTextInputHint.d.ts +0 -15
- package/ts3.5/dist/es6/text-input/lib/hooks/useTextInputLabel.d.ts +0 -15
- package/ts3.5/dist/es6/text-input/lib/hooks/useTextInputModel.d.ts +0 -17
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../common/lib/theming/index.ts"],"names":[],"mappings":"AAAA,cAAc,eAAe,CAAC"}
|
|
@@ -1,8 +1,8 @@
|
|
|
1
|
-
import
|
|
2
|
-
import
|
|
3
|
-
export default
|
|
4
|
-
export {
|
|
5
|
-
export {
|
|
1
|
+
import Header from './lib/Header';
|
|
2
|
+
import GlobalHeader from './lib/GlobalHeader';
|
|
3
|
+
export default Header;
|
|
4
|
+
export { Header };
|
|
5
|
+
export { GlobalHeader };
|
|
6
6
|
export * from './lib/parts';
|
|
7
7
|
export * from './lib/shared/themes';
|
|
8
8
|
export * from './lib/shared/types';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../header/index.ts"],"names":[],"mappings":"AAAA,OAAO,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../header/index.ts"],"names":[],"mappings":"AAAA,OAAO,MAAM,MAAM,cAAc,CAAC;AAClC,OAAO,YAAY,MAAM,oBAAoB,CAAC;AAE9C,eAAe,MAAM,CAAC;AACtB,OAAO,EAAC,MAAM,EAAC,CAAC;AAChB,OAAO,EAAC,YAAY,EAAC,CAAC;AACtB,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,oBAAoB,CAAC"}
|
|
@@ -7,9 +7,9 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
7
7
|
};
|
|
8
8
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
9
9
|
var Header_1 = __importDefault(require("./lib/Header"));
|
|
10
|
-
exports.
|
|
10
|
+
exports.Header = Header_1.default;
|
|
11
11
|
var GlobalHeader_1 = __importDefault(require("./lib/GlobalHeader"));
|
|
12
|
-
exports.
|
|
12
|
+
exports.GlobalHeader = GlobalHeader_1.default;
|
|
13
13
|
exports.default = Header_1.default;
|
|
14
14
|
__export(require("./lib/parts"));
|
|
15
15
|
__export(require("./lib/shared/themes"));
|
|
@@ -19,20 +19,11 @@ export interface GlobalHeaderProps {
|
|
|
19
19
|
*/
|
|
20
20
|
isCollapsed?: boolean;
|
|
21
21
|
/**
|
|
22
|
-
* The React element to render in the left slot of the GlobalHeader. This is typically a
|
|
22
|
+
* The React element to render in the left slot of the GlobalHeader. This is typically a SearchBar component.
|
|
23
23
|
*/
|
|
24
24
|
leftSlot?: React.ReactElement;
|
|
25
25
|
}
|
|
26
|
-
|
|
27
|
-
* ### Deprecated Global Header
|
|
28
|
-
*
|
|
29
|
-
* As of Canvas Kit v6, this component is being soft-deprecated.
|
|
30
|
-
* It will be hard-deprecated (completely removed) in v7. Please see the
|
|
31
|
-
* [migration guide](https://workday.github.io/canvas-kit/?path=/story/welcome-migration-guides-v6-0--page)
|
|
32
|
-
* for more information.
|
|
33
|
-
*/
|
|
34
|
-
export default class DeprecatedGlobalHeader extends React.Component<GlobalHeaderProps> {
|
|
35
|
-
componentDidMount(): void;
|
|
26
|
+
export default class GlobalHeader extends React.Component<GlobalHeaderProps> {
|
|
36
27
|
render(): JSX.Element;
|
|
37
28
|
}
|
|
38
29
|
//# sourceMappingURL=GlobalHeader.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GlobalHeader.d.ts","sourceRoot":"","sources":["../../../../header/lib/GlobalHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAC/B;AAED
|
|
1
|
+
{"version":3,"file":"GlobalHeader.d.ts","sourceRoot":"","sources":["../../../../header/lib/GlobalHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAK/B,MAAM,WAAW,iBAAiB;IAChC;;;OAGG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;CAC/B;AAED,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,KAAK,CAAC,SAAS,CAAC,iBAAiB,CAAC;IACnE,MAAM;CAwBd"}
|
|
@@ -49,26 +49,15 @@ var React = __importStar(require("react"));
|
|
|
49
49
|
var Header_1 = __importDefault(require("./Header"));
|
|
50
50
|
var types_1 = require("./shared/types");
|
|
51
51
|
var parts_1 = require("./parts");
|
|
52
|
-
/**
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
* As of Canvas Kit v6, this component is being soft-deprecated.
|
|
56
|
-
* It will be hard-deprecated (completely removed) in v7. Please see the
|
|
57
|
-
* [migration guide](https://workday.github.io/canvas-kit/?path=/story/welcome-migration-guides-v6-0--page)
|
|
58
|
-
* for more information.
|
|
59
|
-
*/
|
|
60
|
-
var DeprecatedGlobalHeader = /** @class */ (function (_super) {
|
|
61
|
-
__extends(DeprecatedGlobalHeader, _super);
|
|
62
|
-
function DeprecatedGlobalHeader() {
|
|
52
|
+
var GlobalHeader = /** @class */ (function (_super) {
|
|
53
|
+
__extends(GlobalHeader, _super);
|
|
54
|
+
function GlobalHeader() {
|
|
63
55
|
return _super !== null && _super.apply(this, arguments) || this;
|
|
64
56
|
}
|
|
65
|
-
|
|
66
|
-
|
|
57
|
+
GlobalHeader.prototype.render = function () {
|
|
58
|
+
var _a = this.props, _b = _a.brand, brand = _b === void 0 ? React.createElement(parts_1.DubLogoTitle, null) : _b, menuToggle = _a.menuToggle, onMenuClick = _a.onMenuClick, isCollapsed = _a.isCollapsed, leftSlot = _a.leftSlot, children = _a.children, elemProps = __rest(_a, ["brand", "menuToggle", "onMenuClick", "isCollapsed", "leftSlot", "children"]);
|
|
59
|
+
return (React.createElement(Header_1.default, __assign({ brand: brand, menuToggle: menuToggle, leftSlot: leftSlot, onMenuClick: onMenuClick, variant: types_1.HeaderVariant.Global, isCollapsed: isCollapsed }, elemProps), children));
|
|
67
60
|
};
|
|
68
|
-
|
|
69
|
-
var _a = this.props, _b = _a.brand, brand = _b === void 0 ? React.createElement(parts_1.DeprecatedDubLogoTitle, null) : _b, menuToggle = _a.menuToggle, onMenuClick = _a.onMenuClick, isCollapsed = _a.isCollapsed, leftSlot = _a.leftSlot, children = _a.children, elemProps = __rest(_a, ["brand", "menuToggle", "onMenuClick", "isCollapsed", "leftSlot", "children"]);
|
|
70
|
-
return (React.createElement(Header_1.default, __assign({ brand: brand, menuToggle: menuToggle, leftSlot: leftSlot, onMenuClick: onMenuClick, variant: types_1.DeprecatedHeaderVariant.Global, isCollapsed: isCollapsed }, elemProps), children));
|
|
71
|
-
};
|
|
72
|
-
return DeprecatedGlobalHeader;
|
|
61
|
+
return GlobalHeader;
|
|
73
62
|
}(React.Component));
|
|
74
|
-
exports.default =
|
|
63
|
+
exports.default = GlobalHeader;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { HeaderTheme, HeaderVariant } from './shared/types';
|
|
3
3
|
export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
4
4
|
/**
|
|
5
5
|
* The custom menu toggle node of the Header. This React node replaces the default menu toggle.
|
|
@@ -7,14 +7,14 @@ export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
7
7
|
menuToggle?: React.ReactNode;
|
|
8
8
|
/**
|
|
9
9
|
* The theme of the Header. Accepts `White`, `Blue`, or `Transparent`.
|
|
10
|
-
* @default
|
|
10
|
+
* @default HeaderTheme.White
|
|
11
11
|
*/
|
|
12
|
-
themeColor?:
|
|
12
|
+
themeColor?: HeaderTheme;
|
|
13
13
|
/**
|
|
14
14
|
* The variant of the Header. Accepts `Dub` (small) or `Full` (large).
|
|
15
|
-
* @default
|
|
15
|
+
* @default HeaderVariant.Dub
|
|
16
16
|
*/
|
|
17
|
-
variant?:
|
|
17
|
+
variant?: HeaderVariant;
|
|
18
18
|
/**
|
|
19
19
|
* The text of the Header title. Not used if `brand` is provided.
|
|
20
20
|
*/
|
|
@@ -37,7 +37,7 @@ export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
37
37
|
*/
|
|
38
38
|
onMenuClick?: (e: React.MouseEvent) => void;
|
|
39
39
|
/**
|
|
40
|
-
* The React element to render in the left slot of the Header. This is typically a
|
|
40
|
+
* The React element to render in the left slot of the Header. This is typically a SearchBar component.
|
|
41
41
|
*/
|
|
42
42
|
leftSlot?: React.ReactElement;
|
|
43
43
|
/**
|
|
@@ -46,18 +46,9 @@ export interface HeaderProps extends React.HTMLAttributes<HTMLDivElement> {
|
|
|
46
46
|
*/
|
|
47
47
|
isCollapsed?: boolean;
|
|
48
48
|
}
|
|
49
|
-
/**
|
|
50
|
-
* ### Deprecated Header
|
|
51
|
-
*
|
|
52
|
-
* As of Canvas Kit v6, this component is being soft-deprecated.
|
|
53
|
-
* It will be hard-deprecated (completely removed) in v7. Please see the
|
|
54
|
-
* [migration guide](https://workday.github.io/canvas-kit/?path=/story/welcome-migration-guides-v6-0--page)
|
|
55
|
-
* for more information.
|
|
56
|
-
*/
|
|
57
49
|
export default class Header extends React.Component<HeaderProps, {}> {
|
|
58
|
-
static Theme: typeof
|
|
59
|
-
static Variant: typeof
|
|
60
|
-
componentDidMount(): void;
|
|
50
|
+
static Theme: typeof HeaderTheme;
|
|
51
|
+
static Variant: typeof HeaderVariant;
|
|
61
52
|
/**
|
|
62
53
|
* Helper that recursively maps ReactNodes to their theme-based equivalent.
|
|
63
54
|
* Any children that are included in a Header may need to undergo transformation
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../header/lib/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,
|
|
1
|
+
{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../../header/lib/Header.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAM/B,OAAO,EAAe,WAAW,EAAE,aAAa,EAAC,MAAM,gBAAgB,CAAC;AAMxE,MAAM,WAAW,WAAY,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IACvE;;OAEG;IACH,UAAU,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC7B;;;OAGG;IACH,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB;;;OAGG;IACH,OAAO,CAAC,EAAE,aAAa,CAAC;IACxB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB;;OAEG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,WAAW,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,KAAK,IAAI,CAAC;IAC5C;;OAEG;IACH,QAAQ,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC;IAC9B;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB;AAkND,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,KAAK,CAAC,SAAS,CAAC,WAAW,EAAE,EAAE,CAAC;IAClE,MAAM,CAAC,KAAK,qBAAe;IAC3B,MAAM,CAAC,OAAO,uBAAiB;IAE/B;;;;;;;;;;;OAWG;IACH,OAAO,CAAC,cAAc;IAuDtB,MAAM;CA0DP"}
|
|
@@ -60,9 +60,7 @@ var HeaderShell = styled_1.default('div')(__assign(__assign({ display: 'flex', a
|
|
|
60
60
|
var variant = _a.variant, themeColor = _a.themeColor;
|
|
61
61
|
return (__assign(__assign({
|
|
62
62
|
// Only the variant Full has a large header, all the other one (Dub, Global) have a small header height
|
|
63
|
-
height: variant === types_1.
|
|
64
|
-
? types_1.DeprecatedHeaderHeight.Large
|
|
65
|
-
: types_1.DeprecatedHeaderHeight.Small, background: themes_1.deprecatedHeaderThemes[themeColor].background }, themes_1.deprecatedHeaderThemes[themeColor].depth), { color: themes_1.deprecatedHeaderThemes[themeColor].color }));
|
|
63
|
+
height: variant === types_1.HeaderVariant.Full ? types_1.HeaderHeight.Large : types_1.HeaderHeight.Small, background: themes_1.themes[themeColor].background }, themes_1.themes[themeColor].depth), { color: themes_1.themes[themeColor].color }));
|
|
66
64
|
});
|
|
67
65
|
var BrandSlot = styled_1.default('div')({
|
|
68
66
|
height: '100%',
|
|
@@ -79,7 +77,7 @@ var BrandLink = styled_1.default(button_1.Hyperlink)({
|
|
|
79
77
|
});
|
|
80
78
|
var navStyle = function (_a) {
|
|
81
79
|
var themeColor = _a.themeColor;
|
|
82
|
-
var theme = themes_1.
|
|
80
|
+
var theme = themes_1.themes[themeColor];
|
|
83
81
|
return core_1.css({
|
|
84
82
|
nav: {
|
|
85
83
|
display: 'flex',
|
|
@@ -187,17 +185,17 @@ var Brand = /** @class */ (function (_super) {
|
|
|
187
185
|
return _super !== null && _super.apply(this, arguments) || this;
|
|
188
186
|
}
|
|
189
187
|
Brand.prototype.render = function () {
|
|
190
|
-
var _a = this.props, _b = _a.variant, variant = _b === void 0 ? types_1.
|
|
188
|
+
var _a = this.props, _b = _a.variant, variant = _b === void 0 ? types_1.HeaderVariant.Dub : _b, brand = _a.brand, _c = _a.themeColor, themeColor = _c === void 0 ? types_1.HeaderTheme.White : _c, title = _a.title;
|
|
191
189
|
switch (variant) {
|
|
192
|
-
case types_1.
|
|
190
|
+
case types_1.HeaderVariant.Global: {
|
|
193
191
|
return React.createElement("span", null, brand);
|
|
194
192
|
}
|
|
195
|
-
case types_1.
|
|
196
|
-
return (React.createElement("span", null, brand ||
|
|
193
|
+
case types_1.HeaderVariant.Full: {
|
|
194
|
+
return (React.createElement("span", null, brand || React.createElement(parts_1.WorkdayLogoTitle, { title: title ? title : '', themeColor: themeColor })));
|
|
197
195
|
}
|
|
198
|
-
//
|
|
196
|
+
// HeaderVariant.Dub is default
|
|
199
197
|
default: {
|
|
200
|
-
return (React.createElement("span", null, brand || React.createElement(parts_1.
|
|
198
|
+
return (React.createElement("span", null, brand || React.createElement(parts_1.DubLogoTitle, { title: title ? title : '', themeColor: themeColor })));
|
|
201
199
|
}
|
|
202
200
|
}
|
|
203
201
|
};
|
|
@@ -209,7 +207,7 @@ var MenuIconButton = /** @class */ (function (_super) {
|
|
|
209
207
|
return _super !== null && _super.apply(this, arguments) || this;
|
|
210
208
|
}
|
|
211
209
|
MenuIconButton.prototype.render = function () {
|
|
212
|
-
var _a = this.props, _b = _a.themeColor, themeColor = _b === void 0 ? types_1.
|
|
210
|
+
var _a = this.props, _b = _a.themeColor, themeColor = _b === void 0 ? types_1.HeaderTheme.White : _b, menuToggle = _a.menuToggle, onMenuClick = _a.onMenuClick;
|
|
213
211
|
if (menuToggle) {
|
|
214
212
|
var menuToggleElement = menuToggle;
|
|
215
213
|
var onClick = menuToggleElement.props.onClick
|
|
@@ -220,26 +218,15 @@ var MenuIconButton = /** @class */ (function (_super) {
|
|
|
220
218
|
className: 'canvas-header--menu-icon',
|
|
221
219
|
});
|
|
222
220
|
}
|
|
223
|
-
return (React.createElement(button_1.IconButton, { variant: themeColor === types_1.
|
|
221
|
+
return (React.createElement(button_1.IconButton, { variant: themeColor === types_1.HeaderTheme.White ? 'circle' : 'inverse', icon: canvas_system_icons_web_1.justifyIcon, className: 'canvas-header--menu-icon', "aria-label": "Open Menu", onClick: onMenuClick }));
|
|
224
222
|
};
|
|
225
223
|
return MenuIconButton;
|
|
226
224
|
}(React.Component));
|
|
227
|
-
/**
|
|
228
|
-
* ### Deprecated Header
|
|
229
|
-
*
|
|
230
|
-
* As of Canvas Kit v6, this component is being soft-deprecated.
|
|
231
|
-
* It will be hard-deprecated (completely removed) in v7. Please see the
|
|
232
|
-
* [migration guide](https://workday.github.io/canvas-kit/?path=/story/welcome-migration-guides-v6-0--page)
|
|
233
|
-
* for more information.
|
|
234
|
-
*/
|
|
235
225
|
var Header = /** @class */ (function (_super) {
|
|
236
226
|
__extends(Header, _super);
|
|
237
227
|
function Header() {
|
|
238
228
|
return _super !== null && _super.apply(this, arguments) || this;
|
|
239
229
|
}
|
|
240
|
-
Header.prototype.componentDidMount = function () {
|
|
241
|
-
console.warn("Header is being deprecated and will be removed in Canvas Kit V7.\n\n For more information, please see the V6 migration guide:\n\n https://workday.github.io/canvas-kit/?path=/story/welcome-migration-guides-v6-0--page\n ");
|
|
242
|
-
};
|
|
243
230
|
/**
|
|
244
231
|
* Helper that recursively maps ReactNodes to their theme-based equivalent.
|
|
245
232
|
* Any children that are included in a Header may need to undergo transformation
|
|
@@ -260,7 +247,7 @@ var Header = /** @class */ (function (_super) {
|
|
|
260
247
|
}
|
|
261
248
|
var propsChildren = child.props.children;
|
|
262
249
|
var singleChild = React.Children.count(propsChildren) === 1 && propsChildren;
|
|
263
|
-
var iconButtonVariant = _this.props.themeColor === types_1.
|
|
250
|
+
var iconButtonVariant = _this.props.themeColor === types_1.HeaderTheme.White ? 'circle' : 'inverse';
|
|
264
251
|
// Convert old method of SystemIcon into IconButton. If SystemIcon is within a link, make sure it's passed through
|
|
265
252
|
if (child.type === 'a' && singleChild && singleChild.type === icon_1.SystemIcon) {
|
|
266
253
|
var href_1 = child.props.href;
|
|
@@ -296,7 +283,7 @@ var Header = /** @class */ (function (_super) {
|
|
|
296
283
|
});
|
|
297
284
|
};
|
|
298
285
|
Header.prototype.render = function () {
|
|
299
|
-
var _a = this.props, menuToggle = _a.menuToggle, _b = _a.themeColor, themeColor = _b === void 0 ? types_1.
|
|
286
|
+
var _a = this.props, menuToggle = _a.menuToggle, _b = _a.themeColor, themeColor = _b === void 0 ? types_1.HeaderTheme.White : _b, _c = _a.variant, variant = _c === void 0 ? types_1.HeaderVariant.Dub : _c, centeredNav = _a.centeredNav, title = _a.title, brand = _a.brand, brandUrl = _a.brandUrl, onMenuClick = _a.onMenuClick, leftSlot = _a.leftSlot, isCollapsed = _a.isCollapsed, children = _a.children, elemProps = __rest(_a, ["menuToggle", "themeColor", "variant", "centeredNav", "title", "brand", "brandUrl", "onMenuClick", "leftSlot", "isCollapsed", "children"]);
|
|
300
287
|
/* Push everything to the right if:
|
|
301
288
|
- on tablet and mobile screens
|
|
302
289
|
- Search isn't enabled and the nav shouldn't be centered
|
|
@@ -314,8 +301,8 @@ var Header = /** @class */ (function (_super) {
|
|
|
314
301
|
// TODO: This needs to get changed to IconButton when we get it restyled for headers
|
|
315
302
|
React.createElement(MenuIconButton, { themeColor: themeColor, menuToggle: menuToggle, onMenuClick: onMenuClick })) : (this.renderChildren(children)))));
|
|
316
303
|
};
|
|
317
|
-
Header.Theme = types_1.
|
|
318
|
-
Header.Variant = types_1.
|
|
304
|
+
Header.Theme = types_1.HeaderTheme;
|
|
305
|
+
Header.Variant = types_1.HeaderVariant;
|
|
319
306
|
return Header;
|
|
320
307
|
}(React.Component));
|
|
321
308
|
exports.default = Header;
|
|
@@ -1,11 +1,11 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
|
-
import {
|
|
2
|
+
import { HeaderTheme } from '../shared/types';
|
|
3
3
|
export declare type DubTitleProps = {
|
|
4
4
|
/**
|
|
5
5
|
* The theme of the DubLogoTitle. Accepts `White`, `Blue`, or `Transparent`.
|
|
6
|
-
* @default
|
|
6
|
+
* @default HeaderTheme.White
|
|
7
7
|
*/
|
|
8
|
-
themeColor?:
|
|
8
|
+
themeColor?: HeaderTheme;
|
|
9
9
|
/**
|
|
10
10
|
* The text of the DubLogoTitle. Not used if `brand` is provided.
|
|
11
11
|
*/
|
|
@@ -15,16 +15,7 @@ export declare type DubTitleProps = {
|
|
|
15
15
|
*/
|
|
16
16
|
bgColor?: string;
|
|
17
17
|
};
|
|
18
|
-
|
|
19
|
-
* ### Deprecated Dub Logo Title
|
|
20
|
-
*
|
|
21
|
-
* As of Canvas Kit v6, this component is being soft-deprecated.
|
|
22
|
-
* It will be hard-deprecated (completely removed) in v7. Please see the
|
|
23
|
-
* [migration guide](https://workday.github.io/canvas-kit/?path=/story/welcome-migration-guides-v6-0--page)
|
|
24
|
-
* for more information.
|
|
25
|
-
*/
|
|
26
|
-
export declare class DeprecatedDubLogoTitle extends React.Component<DubTitleProps> {
|
|
27
|
-
componentDidMount(): void;
|
|
18
|
+
export declare class DubLogoTitle extends React.Component<DubTitleProps> {
|
|
28
19
|
render(): JSX.Element;
|
|
29
20
|
}
|
|
30
21
|
//# sourceMappingURL=DubLogoTitle.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DubLogoTitle.d.ts","sourceRoot":"","sources":["../../../../../header/lib/parts/DubLogoTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,
|
|
1
|
+
{"version":3,"file":"DubLogoTitle.d.ts","sourceRoot":"","sources":["../../../../../header/lib/parts/DubLogoTitle.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAe,WAAW,EAAC,MAAM,iBAAiB,CAAC;AAI1D,oBAAY,aAAa,GAAG;IAC1B;;;OAGG;IACH,UAAU,CAAC,EAAE,WAAW,CAAC;IACzB;;OAEG;IACH,KAAK,CAAC,EAAE,MAAM,CAAC;IACf;;OAEG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB,CAAC;AA2CF,qBAAa,YAAa,SAAQ,KAAK,CAAC,SAAS,CAAC,aAAa,CAAC;IAC9D,MAAM;CAgBP"}
|
|
@@ -46,7 +46,7 @@ var LockupContainer = styled_1.default('div')({
|
|
|
46
46
|
var Lockup = styled_1.default('div')({
|
|
47
47
|
display: 'flex',
|
|
48
48
|
alignItems: 'center',
|
|
49
|
-
height: types_1.
|
|
49
|
+
height: types_1.HeaderHeight.Small,
|
|
50
50
|
paddingLeft: tokens_1.space.m,
|
|
51
51
|
}, function (_a) {
|
|
52
52
|
var bgColor = _a.bgColor;
|
|
@@ -64,8 +64,8 @@ var Title = styled_1.default('h3')({
|
|
|
64
64
|
}, function (_a) {
|
|
65
65
|
var themeColor = _a.themeColor;
|
|
66
66
|
return ({
|
|
67
|
-
color: themeColor === types_1.
|
|
68
|
-
borderLeft: "1px solid " + (themeColor === types_1.
|
|
67
|
+
color: themeColor === types_1.HeaderTheme.White ? tokens_1.colors.blueberry500 : tokens_1.colors.frenchVanilla100,
|
|
68
|
+
borderLeft: "1px solid " + (themeColor === types_1.HeaderTheme.White
|
|
69
69
|
? tokens_1.colors.soap400
|
|
70
70
|
: chroma_js_1.default(tokens_1.colors.frenchVanilla100)
|
|
71
71
|
.alpha(0.3)
|
|
@@ -75,31 +75,20 @@ var Title = styled_1.default('h3')({
|
|
|
75
75
|
var DubLogo = styled_1.default('div')({
|
|
76
76
|
lineHeight: 0,
|
|
77
77
|
});
|
|
78
|
-
/**
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
* As of Canvas Kit v6, this component is being soft-deprecated.
|
|
82
|
-
* It will be hard-deprecated (completely removed) in v7. Please see the
|
|
83
|
-
* [migration guide](https://workday.github.io/canvas-kit/?path=/story/welcome-migration-guides-v6-0--page)
|
|
84
|
-
* for more information.
|
|
85
|
-
*/
|
|
86
|
-
var DeprecatedDubLogoTitle = /** @class */ (function (_super) {
|
|
87
|
-
__extends(DeprecatedDubLogoTitle, _super);
|
|
88
|
-
function DeprecatedDubLogoTitle() {
|
|
78
|
+
var DubLogoTitle = /** @class */ (function (_super) {
|
|
79
|
+
__extends(DubLogoTitle, _super);
|
|
80
|
+
function DubLogoTitle() {
|
|
89
81
|
return _super !== null && _super.apply(this, arguments) || this;
|
|
90
82
|
}
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
};
|
|
94
|
-
DeprecatedDubLogoTitle.prototype.render = function () {
|
|
95
|
-
var _a = this.props, _b = _a.themeColor, themeColor = _b === void 0 ? types_1.DeprecatedHeaderTheme.White : _b, title = _a.title;
|
|
83
|
+
DubLogoTitle.prototype.render = function () {
|
|
84
|
+
var _a = this.props, _b = _a.themeColor, themeColor = _b === void 0 ? types_1.HeaderTheme.White : _b, title = _a.title;
|
|
96
85
|
return (React.createElement(LockupContainer, null,
|
|
97
86
|
React.createElement(Lockup, __assign({}, this.props),
|
|
98
87
|
React.createElement(DubLogo, __assign({}, this.props, { dangerouslySetInnerHTML: {
|
|
99
|
-
__html: themeColor === types_1.
|
|
88
|
+
__html: themeColor === types_1.HeaderTheme.White ? common_1.dubLogoBlue : common_1.dubLogoWhite,
|
|
100
89
|
} })),
|
|
101
90
|
title && React.createElement(Title, __assign({}, this.props), title))));
|
|
102
91
|
};
|
|
103
|
-
return
|
|
92
|
+
return DubLogoTitle;
|
|
104
93
|
}(React.Component));
|
|
105
|
-
exports.
|
|
94
|
+
exports.DubLogoTitle = DubLogoTitle;
|
|
@@ -1,23 +1,24 @@
|
|
|
1
1
|
import * as React from 'react';
|
|
2
2
|
import { GrowthBehavior } from '@workday/canvas-kit-react/common';
|
|
3
3
|
import { MenuItemProps } from '@workday/canvas-kit-preview-react/menu';
|
|
4
|
-
import { SearchThemeAttributes
|
|
5
|
-
|
|
4
|
+
import { SearchThemeAttributes } from '../shared/themes';
|
|
5
|
+
import { SearchTheme } from '../shared/types';
|
|
6
|
+
export interface SearchBarProps extends GrowthBehavior, React.FormHTMLAttributes<HTMLFormElement> {
|
|
6
7
|
/**
|
|
7
|
-
* The function called when the
|
|
8
|
+
* The function called when the SearchBar form is submitted. The current input value is passed to the callback function.
|
|
8
9
|
*/
|
|
9
10
|
onSubmit: React.FormEventHandler<HTMLFormElement>;
|
|
10
11
|
/**
|
|
11
|
-
* If true, collapse the
|
|
12
|
+
* If true, collapse the SearchBar text input into a toggle icon. Useful for responsive layouts.
|
|
12
13
|
* @default false
|
|
13
14
|
*/
|
|
14
15
|
isCollapsed?: boolean;
|
|
15
16
|
/**
|
|
16
|
-
* The function called when the
|
|
17
|
+
* The function called when the SearchBar text input changes.
|
|
17
18
|
*/
|
|
18
19
|
onInputChange?: React.ChangeEventHandler<HTMLInputElement>;
|
|
19
20
|
/**
|
|
20
|
-
* The autocomplete items of the
|
|
21
|
+
* The autocomplete items of the SearchBar. This array of menu items is shown under the search bar.
|
|
21
22
|
*/
|
|
22
23
|
autocompleteItems?: React.ReactElement<MenuItemProps>[];
|
|
23
24
|
/**
|
|
@@ -25,73 +26,73 @@ export interface SearchFormProps extends GrowthBehavior, React.FormHTMLAttribute
|
|
|
25
26
|
*/
|
|
26
27
|
searchTheme?: SearchTheme | SearchThemeAttributes;
|
|
27
28
|
/**
|
|
28
|
-
* The placeholder text of the
|
|
29
|
+
* The placeholder text of the SearchBar text input.
|
|
29
30
|
* @default Search
|
|
30
31
|
*/
|
|
31
32
|
placeholder?: string;
|
|
32
33
|
/**
|
|
33
|
-
* The initial value of the
|
|
34
|
+
* The initial value of the SearchBar text input.
|
|
34
35
|
*/
|
|
35
36
|
initialValue?: string;
|
|
36
37
|
/**
|
|
37
|
-
* If true, right-align the
|
|
38
|
+
* If true, right-align the SearchBar. If false, the text input should grow to left-align the SearchBar.
|
|
38
39
|
* @default false
|
|
39
40
|
*/
|
|
40
41
|
rightAlign?: boolean;
|
|
41
42
|
/**
|
|
42
|
-
* The screenreader label text for the
|
|
43
|
+
* The screenreader label text for the SearchBar text input.
|
|
43
44
|
* @default Search
|
|
44
45
|
*/
|
|
45
46
|
inputLabel?: string;
|
|
46
47
|
/**
|
|
47
|
-
* The screenreader label text for the
|
|
48
|
+
* The screenreader label text for the SearchBar submit button.
|
|
48
49
|
* @default Search
|
|
49
50
|
*/
|
|
50
51
|
submitAriaLabel?: string;
|
|
51
52
|
/**
|
|
52
|
-
* The screenreader label text for the
|
|
53
|
+
* The screenreader label text for the SearchBar clear button.
|
|
53
54
|
* @default Reset Search Form
|
|
54
55
|
*/
|
|
55
56
|
clearButtonAriaLabel?: string;
|
|
56
57
|
/**
|
|
57
|
-
* The screenreader label text for the button to open the collapsed
|
|
58
|
+
* The screenreader label text for the button to open the collapsed SearchBar.
|
|
58
59
|
* @default Open Search
|
|
59
60
|
*/
|
|
60
61
|
openButtonAriaLabel?: string;
|
|
61
62
|
/**
|
|
62
|
-
* The screenreader label text for the button to close the open
|
|
63
|
+
* The screenreader label text for the button to close the open SearchBar.
|
|
63
64
|
* @default Cancel
|
|
64
65
|
*/
|
|
65
66
|
closeButtonAriaLabel?: string;
|
|
66
67
|
/**
|
|
67
|
-
* If true, render the
|
|
68
|
+
* If true, render the SearchBar with a button to clear the text input.
|
|
68
69
|
* @default true
|
|
69
70
|
*/
|
|
70
71
|
showClearButton?: boolean;
|
|
71
72
|
/**
|
|
72
|
-
* Height of the Search
|
|
73
|
-
* @default 40
|
|
73
|
+
* Height of the Search Bar in pixels
|
|
74
|
+
* @default: 40
|
|
74
75
|
*/
|
|
75
76
|
height?: number;
|
|
76
77
|
}
|
|
77
|
-
export interface
|
|
78
|
+
export interface SearchBarState {
|
|
78
79
|
showForm: boolean;
|
|
79
80
|
searchQuery: string;
|
|
80
81
|
isFocused: boolean;
|
|
81
82
|
}
|
|
82
|
-
export declare class
|
|
83
|
+
export declare class SearchBar extends React.Component<SearchBarProps, SearchBarState> {
|
|
83
84
|
static Theme: typeof SearchTheme;
|
|
84
85
|
private inputRef;
|
|
85
86
|
private openRef;
|
|
86
87
|
private labelId;
|
|
87
|
-
state: Readonly<
|
|
88
|
+
state: Readonly<SearchBarState>;
|
|
88
89
|
private getTheme;
|
|
89
90
|
private getThemeColors;
|
|
90
91
|
getIconButtonType: () => "circle" | "square" | "inverse" | "squareFilled" | "plain" | "circleFilled" | "inverseFilled" | undefined;
|
|
91
92
|
handleSubmit: (event: React.FormEvent<HTMLFormElement>) => void;
|
|
92
93
|
openCollapsedSearch: () => void;
|
|
93
94
|
closeCollapsedSearch: () => void;
|
|
94
|
-
componentDidUpdate(prevProps:
|
|
95
|
+
componentDidUpdate(prevProps: SearchBarProps, prevState: SearchBarState): void;
|
|
95
96
|
focusInput: () => void;
|
|
96
97
|
focusOpen: () => void;
|
|
97
98
|
handleFocus: () => void;
|
|
@@ -99,4 +100,4 @@ export declare class SearchForm extends React.Component<SearchFormProps, SearchF
|
|
|
99
100
|
handleSearchInputChange: (event: React.ChangeEvent<HTMLInputElement>) => void;
|
|
100
101
|
render(): JSX.Element;
|
|
101
102
|
}
|
|
102
|
-
//# sourceMappingURL=
|
|
103
|
+
//# sourceMappingURL=SearchBar.d.ts.map
|
|
@@ -0,0 +1 @@
|
|
|
1
|
+
{"version":3,"file":"SearchBar.d.ts","sourceRoot":"","sources":["../../../../../header/lib/parts/SearchBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAG/B,OAAO,EAAC,cAAc,EAAS,MAAM,kCAAkC,CAAC;AAMxE,OAAO,EAAC,aAAa,EAAC,MAAM,wCAAwC,CAAC;AACrE,OAAO,EAAC,qBAAqB,EAAe,MAAM,kBAAkB,CAAC;AACrE,OAAO,EAAC,WAAW,EAAC,MAAM,iBAAiB,CAAC;AAI5C,MAAM,WAAW,cAAe,SAAQ,cAAc,EAAE,KAAK,CAAC,kBAAkB,CAAC,eAAe,CAAC;IAC/F;;OAEG;IACH,QAAQ,EAAE,KAAK,CAAC,gBAAgB,CAAC,eAAe,CAAC,CAAC;IAClD;;;OAGG;IACH,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB;;OAEG;IACH,aAAa,CAAC,EAAE,KAAK,CAAC,kBAAkB,CAAC,gBAAgB,CAAC,CAAC;IAC3D;;OAEG;IACH,iBAAiB,CAAC,EAAE,KAAK,CAAC,YAAY,CAAC,aAAa,CAAC,EAAE,CAAC;IACxD;;OAEG;IACH,WAAW,CAAC,EAAE,WAAW,GAAG,qBAAqB,CAAC;IAClD;;;OAGG;IACH,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;OAEG;IACH,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB;;;OAGG;IACH,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB;;;OAGG;IACH,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB;;;OAGG;IACH,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B;;;OAGG;IACH,oBAAoB,CAAC,EAAE,MAAM,CAAC;IAC9B;;;OAGG;IACH,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B;;;OAGG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,cAAc;IAC7B,QAAQ,EAAE,OAAO,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,OAAO,CAAC;CACpB;AAuMD,qBAAa,SAAU,SAAQ,KAAK,CAAC,SAAS,CAAC,cAAc,EAAE,cAAc,CAAC;IAC5E,MAAM,CAAC,KAAK,qBAAe;IAE3B,OAAO,CAAC,QAAQ,CAAuC;IACvD,OAAO,CAAC,OAAO,CAAwC;IACvD,OAAO,CAAC,OAAO,CAAU;IAEzB,KAAK,EAAE,QAAQ,CAAC,cAAc,CAAC,CAI7B;IAEF,OAAO,CAAC,QAAQ,CAUd;IAEF,OAAO,CAAC,cAAc,CAMpB;IAEF,iBAAiB,kHAOf;IAEF,YAAY,oDAOV;IAEF,mBAAmB,aAIjB;IAEF,oBAAoB,aAIlB;IAEF,kBAAkB,CAAC,SAAS,EAAE,cAAc,EAAE,SAAS,EAAE,cAAc;IAWvE,UAAU,aAIR;IAEF,SAAS,aAIP;IAEF,WAAW,aAET;IAEF,UAAU,aAER;IAEF,uBAAuB,uDAMrB;IAEF,MAAM;CAkGP"}
|
|
@@ -53,7 +53,8 @@ var canvas_system_icons_web_1 = require("@workday/canvas-system-icons-web");
|
|
|
53
53
|
var form_field_1 = require("@workday/canvas-kit-react/form-field");
|
|
54
54
|
var combobox_1 = require("@workday/canvas-kit-labs-react/combobox");
|
|
55
55
|
var text_input_1 = require("@workday/canvas-kit-react/text-input");
|
|
56
|
-
var themes_1 = require("
|
|
56
|
+
var themes_1 = require("../shared/themes");
|
|
57
|
+
var types_1 = require("../shared/types");
|
|
57
58
|
var chroma_js_1 = __importDefault(require("chroma-js"));
|
|
58
59
|
var v4_1 = __importDefault(require("uuid/v4"));
|
|
59
60
|
function getInputColors(theme, isFocused) {
|
|
@@ -70,7 +71,7 @@ function getInputColors(theme, isFocused) {
|
|
|
70
71
|
var formCollapsedBackground = tokens_1.colors.frenchVanilla100;
|
|
71
72
|
var maxWidth = 480;
|
|
72
73
|
var minWidth = 120;
|
|
73
|
-
var
|
|
74
|
+
var SearchForm = common_1.styled('form')({
|
|
74
75
|
position: 'relative',
|
|
75
76
|
flex: "1 1 auto",
|
|
76
77
|
display: 'flex',
|
|
@@ -197,9 +198,9 @@ var SearchInput = common_1.styled(text_input_1.TextInput)(function (_a) {
|
|
|
197
198
|
},
|
|
198
199
|
} }, collapseStyles);
|
|
199
200
|
});
|
|
200
|
-
var
|
|
201
|
-
__extends(
|
|
202
|
-
function
|
|
201
|
+
var SearchBar = /** @class */ (function (_super) {
|
|
202
|
+
__extends(SearchBar, _super);
|
|
203
|
+
function SearchBar() {
|
|
203
204
|
var _this = _super !== null && _super.apply(this, arguments) || this;
|
|
204
205
|
_this.inputRef = React.createRef();
|
|
205
206
|
_this.openRef = React.createRef();
|
|
@@ -218,13 +219,13 @@ var SearchForm = /** @class */ (function (_super) {
|
|
|
218
219
|
theme = _this.props.searchTheme;
|
|
219
220
|
}
|
|
220
221
|
else {
|
|
221
|
-
theme = themes_1.searchThemes[
|
|
222
|
+
theme = themes_1.searchThemes[types_1.SearchTheme.Light];
|
|
222
223
|
}
|
|
223
224
|
return theme;
|
|
224
225
|
};
|
|
225
226
|
_this.getThemeColors = function () {
|
|
226
227
|
var theme = _this.props.isCollapsed && _this.state.showForm
|
|
227
|
-
? themes_1.searchThemes[
|
|
228
|
+
? themes_1.searchThemes[types_1.SearchTheme.Transparent]
|
|
228
229
|
: _this.getTheme();
|
|
229
230
|
return getInputColors(theme, _this.state.isFocused);
|
|
230
231
|
};
|
|
@@ -280,7 +281,7 @@ var SearchForm = /** @class */ (function (_super) {
|
|
|
280
281
|
};
|
|
281
282
|
return _this;
|
|
282
283
|
}
|
|
283
|
-
|
|
284
|
+
SearchBar.prototype.componentDidUpdate = function (prevProps, prevState) {
|
|
284
285
|
var showFormToggled = this.state.showForm !== prevState.showForm;
|
|
285
286
|
if (showFormToggled) {
|
|
286
287
|
if (this.state.showForm) {
|
|
@@ -291,9 +292,9 @@ var SearchForm = /** @class */ (function (_super) {
|
|
|
291
292
|
}
|
|
292
293
|
}
|
|
293
294
|
};
|
|
294
|
-
|
|
295
|
+
SearchBar.prototype.render = function () {
|
|
295
296
|
var _a = this.props, _b = _a.clearButtonAriaLabel, clearButtonAriaLabel = _b === void 0 ? 'Reset Search Form' : _b, _c = _a.placeholder, placeholder = _c === void 0 ? 'Search' : _c, _d = _a.inputLabel, inputLabel = _d === void 0 ? 'Search' : _d, _e = _a.submitAriaLabel, submitAriaLabel = _e === void 0 ? 'Search' : _e, _f = _a.openButtonAriaLabel, openButtonAriaLabel = _f === void 0 ? 'Open Search' : _f, _g = _a.closeButtonAriaLabel, closeButtonAriaLabel = _g === void 0 ? 'Cancel' : _g, _h = _a.showClearButton, showClearButton = _h === void 0 ? true : _h, _j = _a.height, height = _j === void 0 ? 40 : _j, grow = _a.grow, onSubmit = _a.onSubmit, isCollapsed = _a.isCollapsed, onInputChange = _a.onInputChange, autocompleteItems = _a.autocompleteItems, initialValue = _a.initialValue, searchTheme = _a.searchTheme, rightAlign = _a.rightAlign, elemProps = __rest(_a, ["clearButtonAriaLabel", "placeholder", "inputLabel", "submitAriaLabel", "openButtonAriaLabel", "closeButtonAriaLabel", "showClearButton", "height", "grow", "onSubmit", "isCollapsed", "onInputChange", "autocompleteItems", "initialValue", "searchTheme", "rightAlign"]);
|
|
296
|
-
return (React.createElement(
|
|
297
|
+
return (React.createElement(SearchForm, __assign({ role: "search", action: ".", rightAlign: rightAlign, grow: grow, "aria-labelledby": this.labelId, isCollapsed: isCollapsed, onSubmit: this.handleSubmit, showForm: this.state.showForm }, elemProps),
|
|
297
298
|
React.createElement(SearchContainer, { height: height },
|
|
298
299
|
React.createElement(SearchIcon, { "aria-label": submitAriaLabel, icon: canvas_system_icons_web_1.searchIcon, isCollapsed: isCollapsed, variant: this.getIconButtonType(), type: "submit", isHidden: !!isCollapsed && !this.state.showForm }),
|
|
299
300
|
React.createElement(SearchIcon, { "aria-label": openButtonAriaLabel, icon: canvas_system_icons_web_1.searchIcon, isCollapsed: isCollapsed, variant: this.getIconButtonType(), onClick: this.openCollapsedSearch, ref: this.openRef, type: "button", isHidden: !isCollapsed || (!!isCollapsed && this.state.showForm) }),
|
|
@@ -302,7 +303,7 @@ var SearchForm = /** @class */ (function (_super) {
|
|
|
302
303
|
React.createElement(SearchInput, { ref: this.inputRef, value: this.state.searchQuery, placeholder: placeholder, isCollapsed: isCollapsed, inputColors: this.getThemeColors(), height: height, name: "search" }))),
|
|
303
304
|
React.createElement(CloseButton, { "aria-label": closeButtonAriaLabel, icon: canvas_system_icons_web_1.xIcon, isCollapsed: isCollapsed, variant: "plain", showForm: this.state.showForm, onClick: this.closeCollapsedSearch, type: "button" }))));
|
|
304
305
|
};
|
|
305
|
-
|
|
306
|
-
return
|
|
306
|
+
SearchBar.Theme = types_1.SearchTheme;
|
|
307
|
+
return SearchBar;
|
|
307
308
|
}(React.Component));
|
|
308
|
-
exports.
|
|
309
|
+
exports.SearchBar = SearchBar;
|