@transferwise/components 0.0.0-experimental-fb37b6d → 0.0.0-experimental-ad7e2f8
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/build/header/Header.js +34 -77
- package/build/header/Header.js.map +1 -1
- package/build/header/Header.mjs +31 -73
- package/build/header/Header.mjs.map +1 -1
- package/build/index.js +1 -1
- package/build/index.mjs +1 -1
- package/build/link/Link.js +3 -5
- package/build/link/Link.js.map +1 -1
- package/build/link/Link.mjs +3 -5
- package/build/link/Link.mjs.map +1 -1
- package/build/main.css +0 -3
- package/build/selectOption/SelectOption.js +1 -1
- package/build/selectOption/SelectOption.js.map +1 -1
- package/build/selectOption/SelectOption.mjs +1 -1
- package/build/styles/header/Header.css +0 -3
- package/build/styles/main.css +0 -3
- package/build/typeahead/util/highlight.js +4 -2
- package/build/typeahead/util/highlight.js.map +1 -1
- package/build/typeahead/util/highlight.mjs +5 -3
- package/build/typeahead/util/highlight.mjs.map +1 -1
- package/build/types/header/Header.d.ts +10 -43
- package/build/types/header/Header.d.ts.map +1 -1
- package/build/types/header/index.d.ts +0 -1
- package/build/types/header/index.d.ts.map +1 -1
- package/build/types/index.d.ts +0 -1
- package/build/types/index.d.ts.map +1 -1
- package/build/types/link/Link.d.ts +1 -3
- package/build/types/link/Link.d.ts.map +1 -1
- package/build/types/typeahead/util/highlight.d.ts +1 -1
- package/build/types/typeahead/util/highlight.d.ts.map +1 -1
- package/package.json +3 -3
- package/src/header/Header.css +0 -3
- package/src/header/Header.less +0 -4
- package/src/header/Header.spec.tsx +0 -7
- package/src/header/Header.story.tsx +40 -62
- package/src/header/Header.tsx +59 -123
- package/src/header/index.ts +0 -1
- package/src/index.ts +0 -1
- package/src/link/Link.tsx +27 -29
- package/src/main.css +0 -3
- package/src/typeahead/typeaheadOption/TypeaheadOption.spec.js +1 -1
- package/src/typeahead/util/highlight.spec.js +1 -1
- package/src/typeahead/util/highlight.tsx +3 -3
|
@@ -7,14 +7,16 @@ function highlight(value, query) {
|
|
|
7
7
|
const highlightStart = value.toUpperCase().indexOf(query.trim().toUpperCase());
|
|
8
8
|
const highlightEnd = highlightStart + query.trim().length;
|
|
9
9
|
if (highlightStart !== -1) {
|
|
10
|
-
return /*#__PURE__*/jsxRuntime.jsxs(
|
|
10
|
+
return /*#__PURE__*/jsxRuntime.jsxs("span", {
|
|
11
11
|
children: [value.slice(0, Math.max(0, highlightStart)), /*#__PURE__*/jsxRuntime.jsx("strong", {
|
|
12
12
|
children: value.slice(highlightStart, highlightEnd)
|
|
13
13
|
}), value.slice(Math.max(0, highlightEnd))]
|
|
14
14
|
});
|
|
15
15
|
}
|
|
16
16
|
}
|
|
17
|
-
return
|
|
17
|
+
return /*#__PURE__*/jsxRuntime.jsx("span", {
|
|
18
|
+
children: value
|
|
19
|
+
});
|
|
18
20
|
}
|
|
19
21
|
|
|
20
22
|
module.exports = highlight;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"highlight.js","sources":["../../../src/typeahead/util/highlight.tsx"],"sourcesContent":["export default function highlight(value: string, query: string) {\n if (value && query) {\n const highlightStart = value.toUpperCase().indexOf(query.trim().toUpperCase());\n const highlightEnd = highlightStart + query.trim().length;\n if (highlightStart !== -1) {\n return (\n
|
|
1
|
+
{"version":3,"file":"highlight.js","sources":["../../../src/typeahead/util/highlight.tsx"],"sourcesContent":["export default function highlight(value: string, query: string) {\n if (value && query) {\n const highlightStart = value.toUpperCase().indexOf(query.trim().toUpperCase());\n const highlightEnd = highlightStart + query.trim().length;\n if (highlightStart !== -1) {\n return (\n <span>\n {value.slice(0, Math.max(0, highlightStart))}\n <strong>{value.slice(highlightStart, highlightEnd)}</strong>\n {value.slice(Math.max(0, highlightEnd))}\n </span>\n );\n }\n }\n return <span>{value}</span>;\n}\n"],"names":["highlight","value","query","highlightStart","toUpperCase","indexOf","trim","highlightEnd","length","_jsxs","children","slice","Math","max","_jsx"],"mappings":";;;;AAAc,SAAUA,SAASA,CAACC,KAAa,EAAEC,KAAa,EAAA;EAC5D,IAAID,KAAK,IAAIC,KAAK,EAAE;AAClB,IAAA,MAAMC,cAAc,GAAGF,KAAK,CAACG,WAAW,EAAE,CAACC,OAAO,CAACH,KAAK,CAACI,IAAI,EAAE,CAACF,WAAW,EAAE,CAAC,CAAA;IAC9E,MAAMG,YAAY,GAAGJ,cAAc,GAAGD,KAAK,CAACI,IAAI,EAAE,CAACE,MAAM,CAAA;AACzD,IAAA,IAAIL,cAAc,KAAK,CAAC,CAAC,EAAE;AACzB,MAAA,oBACEM,eAAA,CAAA,MAAA,EAAA;AAAAC,QAAAA,QAAA,GACGT,KAAK,CAACU,KAAK,CAAC,CAAC,EAAEC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEV,cAAc,CAAC,CAAC,eAC5CW,cAAA,CAAA,QAAA,EAAA;AAAAJ,UAAAA,QAAA,EAAST,KAAK,CAACU,KAAK,CAACR,cAAc,EAAEI,YAAY,CAAA;AAAC,SAAS,CAC3D,EAACN,KAAK,CAACU,KAAK,CAACC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEN,YAAY,CAAC,CAAC,CAAA;AAAA,OACnC,CAAC,CAAA;AAEX,KAAA;AACF,GAAA;AACA,EAAA,oBAAOO,cAAA,CAAA,MAAA,EAAA;AAAAJ,IAAAA,QAAA,EAAOT,KAAAA;AAAK,GAAO,CAAC,CAAA;AAC7B;;;;"}
|
|
@@ -1,18 +1,20 @@
|
|
|
1
|
-
import { jsxs,
|
|
1
|
+
import { jsxs, jsx } from 'react/jsx-runtime';
|
|
2
2
|
|
|
3
3
|
function highlight(value, query) {
|
|
4
4
|
if (value && query) {
|
|
5
5
|
const highlightStart = value.toUpperCase().indexOf(query.trim().toUpperCase());
|
|
6
6
|
const highlightEnd = highlightStart + query.trim().length;
|
|
7
7
|
if (highlightStart !== -1) {
|
|
8
|
-
return /*#__PURE__*/jsxs(
|
|
8
|
+
return /*#__PURE__*/jsxs("span", {
|
|
9
9
|
children: [value.slice(0, Math.max(0, highlightStart)), /*#__PURE__*/jsx("strong", {
|
|
10
10
|
children: value.slice(highlightStart, highlightEnd)
|
|
11
11
|
}), value.slice(Math.max(0, highlightEnd))]
|
|
12
12
|
});
|
|
13
13
|
}
|
|
14
14
|
}
|
|
15
|
-
return
|
|
15
|
+
return /*#__PURE__*/jsx("span", {
|
|
16
|
+
children: value
|
|
17
|
+
});
|
|
16
18
|
}
|
|
17
19
|
|
|
18
20
|
export { highlight as default };
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"highlight.mjs","sources":["../../../src/typeahead/util/highlight.tsx"],"sourcesContent":["export default function highlight(value: string, query: string) {\n if (value && query) {\n const highlightStart = value.toUpperCase().indexOf(query.trim().toUpperCase());\n const highlightEnd = highlightStart + query.trim().length;\n if (highlightStart !== -1) {\n return (\n
|
|
1
|
+
{"version":3,"file":"highlight.mjs","sources":["../../../src/typeahead/util/highlight.tsx"],"sourcesContent":["export default function highlight(value: string, query: string) {\n if (value && query) {\n const highlightStart = value.toUpperCase().indexOf(query.trim().toUpperCase());\n const highlightEnd = highlightStart + query.trim().length;\n if (highlightStart !== -1) {\n return (\n <span>\n {value.slice(0, Math.max(0, highlightStart))}\n <strong>{value.slice(highlightStart, highlightEnd)}</strong>\n {value.slice(Math.max(0, highlightEnd))}\n </span>\n );\n }\n }\n return <span>{value}</span>;\n}\n"],"names":["highlight","value","query","highlightStart","toUpperCase","indexOf","trim","highlightEnd","length","_jsxs","children","slice","Math","max","_jsx"],"mappings":";;AAAc,SAAUA,SAASA,CAACC,KAAa,EAAEC,KAAa,EAAA;EAC5D,IAAID,KAAK,IAAIC,KAAK,EAAE;AAClB,IAAA,MAAMC,cAAc,GAAGF,KAAK,CAACG,WAAW,EAAE,CAACC,OAAO,CAACH,KAAK,CAACI,IAAI,EAAE,CAACF,WAAW,EAAE,CAAC,CAAA;IAC9E,MAAMG,YAAY,GAAGJ,cAAc,GAAGD,KAAK,CAACI,IAAI,EAAE,CAACE,MAAM,CAAA;AACzD,IAAA,IAAIL,cAAc,KAAK,CAAC,CAAC,EAAE;AACzB,MAAA,oBACEM,IAAA,CAAA,MAAA,EAAA;AAAAC,QAAAA,QAAA,GACGT,KAAK,CAACU,KAAK,CAAC,CAAC,EAAEC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEV,cAAc,CAAC,CAAC,eAC5CW,GAAA,CAAA,QAAA,EAAA;AAAAJ,UAAAA,QAAA,EAAST,KAAK,CAACU,KAAK,CAACR,cAAc,EAAEI,YAAY,CAAA;AAAC,SAAS,CAC3D,EAACN,KAAK,CAACU,KAAK,CAACC,IAAI,CAACC,GAAG,CAAC,CAAC,EAAEN,YAAY,CAAC,CAAC,CAAA;AAAA,OACnC,CAAC,CAAA;AAEX,KAAA;AACF,GAAA;AACA,EAAA,oBAAOO,GAAA,CAAA,MAAA,EAAA;AAAAJ,IAAAA,QAAA,EAAOT,KAAAA;AAAK,GAAO,CAAC,CAAA;AAC7B;;;;"}
|
|
@@ -1,61 +1,28 @@
|
|
|
1
1
|
import { ActionButtonProps } from '../actionButton/ActionButton';
|
|
2
2
|
import { AriaLabelProperty, CommonProps, Heading, LinkProps } from '../common';
|
|
3
|
-
import { FunctionComponent } from 'react';
|
|
4
|
-
/**
|
|
5
|
-
* Base properties for an action, including ARIA label and text.
|
|
6
|
-
*/
|
|
7
3
|
type ActionProps = AriaLabelProperty & {
|
|
8
4
|
text: string;
|
|
9
5
|
};
|
|
10
|
-
/**
|
|
11
|
-
* Properties for a button action, extending the base action properties.
|
|
12
|
-
*/
|
|
13
6
|
type ButtonActionProps = ActionProps & ActionButtonProps;
|
|
14
|
-
/**
|
|
15
|
-
* Properties for a link action, extending the base action properties.
|
|
16
|
-
*/
|
|
17
7
|
type LinkActionProps = ActionProps & LinkProps;
|
|
18
|
-
export
|
|
8
|
+
export type HeaderProps = CommonProps & {
|
|
19
9
|
/**
|
|
20
|
-
*
|
|
21
|
-
* is provided, a `Link` will be rendered instead of an `ActionButton`.
|
|
10
|
+
* When the `href` property is provided to the `action`, we will render a `Link` instead of a `ActionButton`.
|
|
22
11
|
*/
|
|
23
12
|
action?: ButtonActionProps | LinkActionProps;
|
|
24
|
-
/**
|
|
13
|
+
/**
|
|
14
|
+
* Override the heading element rendered for the title, useful to specify the semantics of your header.
|
|
15
|
+
*
|
|
16
|
+
* @default "h5"
|
|
17
|
+
*/
|
|
25
18
|
as?: Heading | 'legend';
|
|
26
|
-
/** Optional prop to specify classNames onto the Header */
|
|
27
|
-
className?: string;
|
|
28
|
-
/** Optional prop to specify the ID used for testing */
|
|
29
|
-
testId?: string;
|
|
30
|
-
/** Required prop to set the title of the Header. */
|
|
31
19
|
title: string;
|
|
32
|
-
|
|
33
|
-
variant?: 'section' | 'group';
|
|
34
|
-
}
|
|
20
|
+
};
|
|
35
21
|
/**
|
|
36
|
-
* Header component
|
|
37
|
-
*
|
|
38
|
-
* The header component is used to render a section header with an optional action button or link.
|
|
39
|
-
* The header component can be rendered as a `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, or `legend` element.
|
|
40
|
-
*
|
|
41
|
-
* @component
|
|
42
|
-
* @param {ButtonActionProps | LinkActionProps} [action] - Optional prop to specify the action button or link.
|
|
43
|
-
* @param {Heading | 'legend'} [as='h5'] - Optional prop to override the heading element rendered for the title.
|
|
44
|
-
* @param {string} title - Required prop to set the title of the section header.
|
|
45
|
-
* @param {'group' | 'section'} [variant='group'] - Optional prop to specify the variant of the section header.
|
|
46
|
-
* @param {string} [className] - Optional prop to specify classNames onto the Header.
|
|
47
|
-
* @param {string} [testId] - Optional prop to specify the ID used for testing.
|
|
48
22
|
*
|
|
49
|
-
*
|
|
50
|
-
* // Example usage:
|
|
51
|
-
* import Header from './Header';
|
|
23
|
+
* Neptune Web: https://transferwise.github.io/neptune-web/components/content/Header
|
|
52
24
|
*
|
|
53
|
-
* function App() {
|
|
54
|
-
* return (
|
|
55
|
-
* <Header title="Header" />
|
|
56
|
-
* );
|
|
57
|
-
* }
|
|
58
25
|
*/
|
|
59
|
-
declare const Header:
|
|
26
|
+
export declare const Header: ({ action, as, title, className }: HeaderProps) => import("react").JSX.Element;
|
|
60
27
|
export default Header;
|
|
61
28
|
//# sourceMappingURL=Header.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/header/Header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;
|
|
1
|
+
{"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/header/Header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AAEjE,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAI3F,KAAK,WAAW,GAAG,iBAAiB,GAAG;IACrC,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF,KAAK,iBAAiB,GAAG,WAAW,GAAG,iBAAiB,CAAC;AAEzD,KAAK,eAAe,GAAG,WAAW,GAAG,SAAS,CAAC;AAE/C,MAAM,MAAM,WAAW,GAAG,WAAW,GAAG;IACtC;;OAEG;IACH,MAAM,CAAC,EAAE,iBAAiB,GAAG,eAAe,CAAC;IAC7C;;;;OAIG;IACH,EAAE,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IACxB,KAAK,EAAE,MAAM,CAAC;CACf,CAAC;AA4BF;;;;GAIG;AACH,eAAO,MAAM,MAAM,qCAA6C,WAAW,gCA4B1E,CAAC;AAEF,eAAe,MAAM,CAAC"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/header/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/header/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,UAAU,CAAC"}
|
package/build/types/index.d.ts
CHANGED
|
@@ -19,7 +19,6 @@ export type { DecisionProps } from './decision/Decision';
|
|
|
19
19
|
export type { DefinitionListProps, DefinitionListDefinition } from './definitionList';
|
|
20
20
|
export type { DimmerProps } from './dimmer';
|
|
21
21
|
export type { DrawerProps } from './drawer';
|
|
22
|
-
export type { HeaderProps } from './header';
|
|
23
22
|
export type { EmphasisProps } from './emphasis';
|
|
24
23
|
export type { FieldProps } from './field/Field';
|
|
25
24
|
export type { InfoProps } from './info';
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,YAAY,EAAE,aAAa,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACjE,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EAAE,iBAAiB,EAAE,iBAAiB,EAAE,oBAAoB,EAAE,MAAM,gBAAgB,CAAC;AACjG,YAAY,EAAE,WAAW,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AAClE,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAC5D,YAAY,EACV,SAAS,EACT,YAAY,EACZ,eAAe,EACf,SAAS,EACT,UAAU,EACV,eAAe,GAChB,MAAM,UAAU,CAAC;AAClB,YAAY,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,YAAY,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAClD,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACzD,YAAY,EAAE,mBAAmB,EAAE,wBAAwB,EAAE,MAAM,kBAAkB,CAAC;AACtF,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,
|
|
1
|
+
{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/index.ts"],"names":[],"mappings":"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"}
|
|
@@ -8,8 +8,6 @@ export type Props = AnchorHTMLAttributes<HTMLAnchorElement> & {
|
|
|
8
8
|
*
|
|
9
9
|
* Documentation: https://transferwise.github.io/neptune-web/components/content/Link
|
|
10
10
|
*/
|
|
11
|
-
declare const Link: import("react").
|
|
12
|
-
type?: LinkLarge | LinkDefault;
|
|
13
|
-
} & import("react").RefAttributes<HTMLAnchorElement>>;
|
|
11
|
+
declare const Link: ({ className, children, href, target, type, "aria-label": ariaLabel, onClick, ...props }: Props) => import("react").JSX.Element;
|
|
14
12
|
export default Link;
|
|
15
13
|
//# sourceMappingURL=Link.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/link/Link.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,
|
|
1
|
+
{"version":3,"file":"Link.d.ts","sourceRoot":"","sources":["../../../src/link/Link.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAE,MAAM,OAAO,CAAC;AAG7C,OAAO,EAAE,SAAS,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAInD,MAAM,MAAM,KAAK,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,GAAG;IAAE,IAAI,CAAC,EAAE,SAAS,GAAG,WAAW,CAAA;CAAE,CAAC;AAEjG;;;;GAIG;AACH,QAAA,MAAM,IAAI,4FASP,KAAK,gCAkBP,CAAC;AAEF,eAAe,IAAI,CAAC"}
|
|
@@ -1,2 +1,2 @@
|
|
|
1
|
-
export default function highlight(value: string, query: string):
|
|
1
|
+
export default function highlight(value: string, query: string): import("react").JSX.Element;
|
|
2
2
|
//# sourceMappingURL=highlight.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"highlight.d.ts","sourceRoot":"","sources":["../../../../src/typeahead/util/highlight.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM
|
|
1
|
+
{"version":3,"file":"highlight.d.ts","sourceRoot":"","sources":["../../../../src/typeahead/util/highlight.tsx"],"names":[],"mappings":"AAAA,MAAM,CAAC,OAAO,UAAU,SAAS,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,EAAE,MAAM,+BAe7D"}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@transferwise/components",
|
|
3
|
-
"version": "0.0.0-experimental-
|
|
3
|
+
"version": "0.0.0-experimental-ad7e2f8",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -92,9 +92,9 @@
|
|
|
92
92
|
"rollup": "^4.18.1",
|
|
93
93
|
"rollup-preserve-directives": "^1.1.1",
|
|
94
94
|
"storybook": "^8.2.2",
|
|
95
|
-
"@transferwise/
|
|
95
|
+
"@transferwise/neptune-css": "14.18.0",
|
|
96
96
|
"@wise/components-theming": "1.6.0",
|
|
97
|
-
"@transferwise/
|
|
97
|
+
"@transferwise/less-config": "3.1.0"
|
|
98
98
|
},
|
|
99
99
|
"peerDependencies": {
|
|
100
100
|
"@transferwise/icons": "^3.7.0",
|
package/src/header/Header.css
CHANGED
package/src/header/Header.less
CHANGED
|
@@ -75,13 +75,6 @@ describe('Header', () => {
|
|
|
75
75
|
expect(screen.getByRole('heading', { name: 'Header title', level: 3 })).toBeInTheDocument();
|
|
76
76
|
});
|
|
77
77
|
|
|
78
|
-
it('renders header with section variant', () => {
|
|
79
|
-
render(<Header title="Header title" variant="section" />);
|
|
80
|
-
|
|
81
|
-
const header = screen.getByRole('heading', { name: 'Header title' });
|
|
82
|
-
expect(header).toHaveClass('np-header--section');
|
|
83
|
-
});
|
|
84
|
-
|
|
85
78
|
it('runs onClick if specified even when it got href prop', async () => {
|
|
86
79
|
const callback = jest.fn();
|
|
87
80
|
render(
|
|
@@ -1,75 +1,53 @@
|
|
|
1
|
-
import type { Meta, StoryObj } from '@storybook/react';
|
|
2
|
-
|
|
3
1
|
import Header from './Header';
|
|
4
2
|
|
|
5
|
-
|
|
3
|
+
export default {
|
|
6
4
|
component: Header,
|
|
7
5
|
title: 'Typography/Header',
|
|
8
|
-
tags: ['autodocs'],
|
|
9
|
-
parameters: {
|
|
10
|
-
actions: { argTypesRegex: null },
|
|
11
|
-
},
|
|
12
|
-
argTypes: {
|
|
13
|
-
title: { control: 'text' },
|
|
14
|
-
as: { control: 'select', options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'legend'] },
|
|
15
|
-
variant: { control: 'select', options: ['section', 'group'] },
|
|
16
|
-
action: { control: 'object' },
|
|
17
|
-
className: { control: 'text' },
|
|
18
|
-
testId: { control: 'text' },
|
|
19
|
-
},
|
|
20
|
-
};
|
|
21
|
-
|
|
22
|
-
export default meta;
|
|
23
|
-
type Story = StoryObj<typeof Header>;
|
|
24
|
-
|
|
25
|
-
export const Default: Story = {
|
|
26
|
-
args: {
|
|
27
|
-
title: 'Group header',
|
|
28
|
-
},
|
|
29
|
-
};
|
|
30
|
-
|
|
31
|
-
export const WithAction: Story = {
|
|
32
|
-
args: {
|
|
33
|
-
...Default.args,
|
|
34
|
-
action: {
|
|
35
|
-
'aria-label': 'Magic',
|
|
36
|
-
text: 'Action',
|
|
37
|
-
onClick: () => alert('Action!'),
|
|
38
|
-
},
|
|
39
|
-
},
|
|
40
6
|
};
|
|
41
7
|
|
|
42
|
-
export const
|
|
43
|
-
|
|
44
|
-
...Default.args,
|
|
45
|
-
action: {
|
|
46
|
-
text: 'Link',
|
|
47
|
-
href: 'https://wise.com',
|
|
48
|
-
},
|
|
49
|
-
},
|
|
8
|
+
export const Basic = () => {
|
|
9
|
+
return <Header title="Header title" />;
|
|
50
10
|
};
|
|
51
11
|
|
|
52
|
-
export const
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
12
|
+
export const WithAction = () => {
|
|
13
|
+
return (
|
|
14
|
+
<Header
|
|
15
|
+
title="Header title"
|
|
16
|
+
action={{
|
|
17
|
+
'aria-label': 'Magic',
|
|
18
|
+
text: 'Click me!',
|
|
19
|
+
onClick: () => alert('Action!'),
|
|
20
|
+
}}
|
|
21
|
+
/>
|
|
22
|
+
);
|
|
57
23
|
};
|
|
58
24
|
|
|
59
|
-
export const
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
|
|
63
|
-
|
|
25
|
+
export const WithActionAsLink = () => {
|
|
26
|
+
return (
|
|
27
|
+
<Header
|
|
28
|
+
title="Header title"
|
|
29
|
+
action={{
|
|
30
|
+
text: 'This is a link',
|
|
31
|
+
href: 'https://wise.com',
|
|
32
|
+
}}
|
|
33
|
+
/>
|
|
34
|
+
);
|
|
64
35
|
};
|
|
65
36
|
|
|
66
|
-
export const
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
70
|
-
|
|
71
|
-
|
|
72
|
-
|
|
73
|
-
|
|
74
|
-
|
|
37
|
+
export const WithActionAsLinkPreventingNavigationWithTracking = () => {
|
|
38
|
+
return (
|
|
39
|
+
<Header
|
|
40
|
+
title="Header title"
|
|
41
|
+
action={{
|
|
42
|
+
text: 'This is a link',
|
|
43
|
+
href: 'https://wise.com',
|
|
44
|
+
onClick: (event: React.MouseEvent<HTMLElement>) => {
|
|
45
|
+
alert('Running onClick handler');
|
|
46
|
+
|
|
47
|
+
// we can stop the navigation from happening as onClick will always run before href redirect
|
|
48
|
+
event.preventDefault();
|
|
49
|
+
},
|
|
50
|
+
}}
|
|
51
|
+
/>
|
|
52
|
+
);
|
|
75
53
|
};
|
package/src/header/Header.tsx
CHANGED
|
@@ -1,156 +1,92 @@
|
|
|
1
1
|
import { clsx } from 'clsx';
|
|
2
2
|
|
|
3
3
|
import { ActionButtonProps } from '../actionButton/ActionButton';
|
|
4
|
+
import Button from '../button';
|
|
4
5
|
import { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';
|
|
5
6
|
import Link from '../link';
|
|
6
|
-
import Button from '../button';
|
|
7
7
|
import Title from '../title';
|
|
8
|
-
import React, { FunctionComponent } from 'react';
|
|
9
8
|
|
|
10
|
-
/**
|
|
11
|
-
* Base properties for an action, including ARIA label and text.
|
|
12
|
-
*/
|
|
13
9
|
type ActionProps = AriaLabelProperty & {
|
|
14
10
|
text: string;
|
|
15
11
|
};
|
|
16
12
|
|
|
17
|
-
/**
|
|
18
|
-
* Properties for a button action, extending the base action properties.
|
|
19
|
-
*/
|
|
20
13
|
type ButtonActionProps = ActionProps & ActionButtonProps;
|
|
21
14
|
|
|
22
|
-
/**
|
|
23
|
-
* Properties for a link action, extending the base action properties.
|
|
24
|
-
*/
|
|
25
15
|
type LinkActionProps = ActionProps & LinkProps;
|
|
26
16
|
|
|
27
|
-
export
|
|
17
|
+
export type HeaderProps = CommonProps & {
|
|
28
18
|
/**
|
|
29
|
-
*
|
|
30
|
-
* is provided, a `Link` will be rendered instead of an `ActionButton`.
|
|
19
|
+
* When the `href` property is provided to the `action`, we will render a `Link` instead of a `ActionButton`.
|
|
31
20
|
*/
|
|
32
21
|
action?: ButtonActionProps | LinkActionProps;
|
|
33
|
-
|
|
34
|
-
|
|
22
|
+
/**
|
|
23
|
+
* Override the heading element rendered for the title, useful to specify the semantics of your header.
|
|
24
|
+
*
|
|
25
|
+
* @default "h5"
|
|
26
|
+
*/
|
|
35
27
|
as?: Heading | 'legend';
|
|
36
|
-
|
|
37
|
-
/** Optional prop to specify classNames onto the Header */
|
|
38
|
-
className?: string;
|
|
39
|
-
|
|
40
|
-
/** Optional prop to specify the ID used for testing */
|
|
41
|
-
testId?: string;
|
|
42
|
-
|
|
43
|
-
/** Required prop to set the title of the Header. */
|
|
44
28
|
title: string;
|
|
29
|
+
};
|
|
45
30
|
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
/**
|
|
51
|
-
* Renders a header action which can be either a button or a link.
|
|
52
|
-
*
|
|
53
|
-
* @param {Object} props - The properties object.
|
|
54
|
-
* @param {ButtonActionProps | LinkActionProps} props.action - The action object which can be either a button or a link.
|
|
55
|
-
* @returns {JSX.Element} The rendered header action component.
|
|
56
|
-
*/
|
|
57
|
-
const HeaderAction = React.forwardRef(
|
|
58
|
-
(
|
|
59
|
-
{ action }: { action: ButtonActionProps | LinkActionProps },
|
|
60
|
-
ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,
|
|
61
|
-
) => {
|
|
62
|
-
const { 'aria-label': ariaLabel, text, onClick } = action;
|
|
63
|
-
|
|
64
|
-
if ('href' in action) {
|
|
65
|
-
const { href, target, onClick: linkOnClick } = action;
|
|
66
|
-
return (
|
|
67
|
-
<Link
|
|
68
|
-
ref={ref as React.Ref<HTMLAnchorElement>}
|
|
69
|
-
href={href}
|
|
70
|
-
target={target}
|
|
71
|
-
aria-label={ariaLabel}
|
|
72
|
-
onClick={linkOnClick}
|
|
73
|
-
>
|
|
74
|
-
{text}
|
|
75
|
-
</Link>
|
|
76
|
-
);
|
|
77
|
-
}
|
|
31
|
+
const HeaderAction = ({ action }: { action: ButtonActionProps | LinkActionProps }) => {
|
|
32
|
+
const props = {
|
|
33
|
+
'aria-label': action['aria-label'],
|
|
34
|
+
};
|
|
78
35
|
|
|
36
|
+
if ('href' in action) {
|
|
79
37
|
return (
|
|
80
|
-
<
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
priority="tertiary"
|
|
84
|
-
size="sm"
|
|
85
|
-
aria-label={ariaLabel}
|
|
86
|
-
onClick={onClick}
|
|
87
|
-
>
|
|
88
|
-
{text}
|
|
89
|
-
</Button>
|
|
38
|
+
<Link href={action.href} target={action.target} onClick={action.onClick} {...props}>
|
|
39
|
+
{action.text}
|
|
40
|
+
</Link>
|
|
90
41
|
);
|
|
91
|
-
}
|
|
92
|
-
|
|
42
|
+
}
|
|
43
|
+
|
|
44
|
+
return (
|
|
45
|
+
<Button
|
|
46
|
+
className="np-header__button"
|
|
47
|
+
priority="tertiary"
|
|
48
|
+
size="sm"
|
|
49
|
+
onClick={action.onClick}
|
|
50
|
+
{...props}
|
|
51
|
+
>
|
|
52
|
+
{action.text}
|
|
53
|
+
</Button>
|
|
54
|
+
);
|
|
55
|
+
};
|
|
93
56
|
|
|
94
57
|
/**
|
|
95
|
-
* Header component
|
|
96
|
-
*
|
|
97
|
-
* The header component is used to render a section header with an optional action button or link.
|
|
98
|
-
* The header component can be rendered as a `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, or `legend` element.
|
|
99
|
-
*
|
|
100
|
-
* @component
|
|
101
|
-
* @param {ButtonActionProps | LinkActionProps} [action] - Optional prop to specify the action button or link.
|
|
102
|
-
* @param {Heading | 'legend'} [as='h5'] - Optional prop to override the heading element rendered for the title.
|
|
103
|
-
* @param {string} title - Required prop to set the title of the section header.
|
|
104
|
-
* @param {'group' | 'section'} [variant='group'] - Optional prop to specify the variant of the section header.
|
|
105
|
-
* @param {string} [className] - Optional prop to specify classNames onto the Header.
|
|
106
|
-
* @param {string} [testId] - Optional prop to specify the ID used for testing.
|
|
107
58
|
*
|
|
108
|
-
*
|
|
109
|
-
* // Example usage:
|
|
110
|
-
* import Header from './Header';
|
|
59
|
+
* Neptune Web: https://transferwise.github.io/neptune-web/components/content/Header
|
|
111
60
|
*
|
|
112
|
-
* function App() {
|
|
113
|
-
* return (
|
|
114
|
-
* <Header title="Header" />
|
|
115
|
-
* );
|
|
116
|
-
* }
|
|
117
61
|
*/
|
|
118
|
-
const Header:
|
|
119
|
-
(
|
|
120
|
-
{ as = 'h5', action, className, testId, title, variant = 'group', ...props },
|
|
121
|
-
ref: React.Ref<HTMLDivElement | HTMLHeadingElement | HTMLLegendElement>,
|
|
122
|
-
) => {
|
|
123
|
-
const variantClass = variant && variant !== 'group' ? `np-header--${variant}` : '';
|
|
124
|
-
const variantTypography =
|
|
125
|
-
variant === 'section' ? Typography.TITLE_SUBSECTION : Typography.TITLE_GROUP;
|
|
126
|
-
const HeaderClasses = clsx('np-header', variantClass, className, {
|
|
127
|
-
'np-header__title': !action || as === 'legend',
|
|
128
|
-
});
|
|
129
|
-
|
|
130
|
-
const commonProps = {
|
|
131
|
-
className: HeaderClasses,
|
|
132
|
-
'data-testid': testId,
|
|
133
|
-
};
|
|
134
|
-
|
|
135
|
-
if (!action || as === 'legend') {
|
|
136
|
-
return (
|
|
137
|
-
<Title as={as} type={variantTypography} {...commonProps} {...props}>
|
|
138
|
-
{title}
|
|
139
|
-
</Title>
|
|
140
|
-
);
|
|
141
|
-
}
|
|
142
|
-
|
|
143
|
-
const actionRef = React.createRef<HTMLButtonElement | HTMLAnchorElement>();
|
|
144
|
-
|
|
62
|
+
export const Header = ({ action, as = 'h5', title, className }: HeaderProps) => {
|
|
63
|
+
if (!action) {
|
|
145
64
|
return (
|
|
146
|
-
<
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
-
|
|
151
|
-
|
|
65
|
+
<Title
|
|
66
|
+
as={as}
|
|
67
|
+
type={Typography.TITLE_GROUP}
|
|
68
|
+
className={clsx('np-header', 'np-header__title', className)}
|
|
69
|
+
>
|
|
70
|
+
{title}
|
|
71
|
+
</Title>
|
|
72
|
+
);
|
|
73
|
+
}
|
|
74
|
+
|
|
75
|
+
if (as === 'legend') {
|
|
76
|
+
// eslint-disable-next-line no-console
|
|
77
|
+
console.warn(
|
|
78
|
+
'Legends should be the first child in a fieldset, and this is not possible when including an action',
|
|
152
79
|
);
|
|
153
|
-
}
|
|
154
|
-
|
|
80
|
+
}
|
|
81
|
+
|
|
82
|
+
return (
|
|
83
|
+
<div className={clsx('np-header', className)}>
|
|
84
|
+
<Title as={as} type={Typography.TITLE_GROUP} className="np-header__title">
|
|
85
|
+
{title}
|
|
86
|
+
</Title>
|
|
87
|
+
<HeaderAction action={action} />
|
|
88
|
+
</div>
|
|
89
|
+
);
|
|
90
|
+
};
|
|
155
91
|
|
|
156
92
|
export default Header;
|
package/src/header/index.ts
CHANGED
package/src/index.ts
CHANGED
|
@@ -28,7 +28,6 @@ export type { DecisionProps } from './decision/Decision';
|
|
|
28
28
|
export type { DefinitionListProps, DefinitionListDefinition } from './definitionList';
|
|
29
29
|
export type { DimmerProps } from './dimmer';
|
|
30
30
|
export type { DrawerProps } from './drawer';
|
|
31
|
-
export type { HeaderProps } from './header';
|
|
32
31
|
export type { EmphasisProps } from './emphasis';
|
|
33
32
|
export type { FieldProps } from './field/Field';
|
|
34
33
|
export type { InfoProps } from './info';
|