@transferwise/components 0.0.0-experimental-a41b256 → 0.0.0-experimental-840bf87
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 +38 -78
- package/build/header/Header.js.map +1 -1
- package/build/header/Header.mjs +38 -75
- package/build/header/Header.mjs.map +1 -1
- package/build/index.js +1 -1
- package/build/index.mjs +1 -1
- package/build/inputs/SelectInput.js +1 -1
- package/build/inputs/SelectInput.js.map +1 -1
- package/build/inputs/SelectInput.mjs +1 -1
- package/build/main.css +11 -17
- 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 +11 -17
- package/build/styles/main.css +11 -17
- package/build/title/Title.js +4 -6
- package/build/title/Title.js.map +1 -1
- package/build/title/Title.mjs +4 -6
- package/build/title/Title.mjs.map +1 -1
- package/build/types/header/Header.d.ts +11 -28
- 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/title/Title.d.ts +4 -3
- package/build/types/title/Title.d.ts.map +1 -1
- package/package.json +5 -5
- package/src/header/Header.css +11 -17
- package/src/header/Header.less +8 -17
- package/src/header/Header.spec.tsx +50 -68
- package/src/header/Header.story.tsx +39 -184
- package/src/header/Header.tsx +69 -122
- package/src/header/index.ts +0 -1
- package/src/index.ts +0 -1
- package/src/main.css +11 -17
- package/src/title/Title.tsx +11 -25
- package/src/header/Header.accessibility.docs.mdx +0 -85
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Title.mjs","sources":["../../src/title/Title.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport {
|
|
1
|
+
{"version":3,"file":"Title.mjs","sources":["../../src/title/Title.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { LabelHTMLAttributes, LiHTMLAttributes, ReactHTML } from 'react';\n\nimport { TitleTypes, Typography, Heading } from '../common';\n\nconst DEFAULT_TYPE = Typography.TITLE_GROUP;\n\nconst titleTypeMapping = {\n [Typography.TITLE_SCREEN]: 'h1',\n [Typography.TITLE_SECTION]: 'h2',\n [Typography.TITLE_SUBSECTION]: 'h3',\n [Typography.TITLE_BODY]: 'h4',\n [Typography.TITLE_GROUP]: 'h5',\n} as const;\n\ntype Props = LabelHTMLAttributes<HTMLHeadingElement | HTMLSpanElement | HTMLLabelElement> &\n LiHTMLAttributes<HTMLLIElement> & {\n /**\n * Default value will based one `type` prop\n */\n as?: 'span' | 'label' | 'li' | 'legend' | 'header' | Heading;\n /**\n * Default value: {@link DEFAULT_TYPE}\n */\n type?: TitleTypes;\n };\n\nfunction Title({ as, type = DEFAULT_TYPE, className, ...props }: Props) {\n const mapping = titleTypeMapping[type];\n const isTypeSupported = mapping !== undefined;\n if (isTypeSupported) {\n const HeaderTag = as ?? mapping;\n return <HeaderTag {...props} className={clsx(`np-text-${type}`, className)} />;\n }\n const HeaderTag = as ?? titleTypeMapping[DEFAULT_TYPE];\n return <HeaderTag {...props} className={clsx(`np-text-${DEFAULT_TYPE}`, className)} />;\n}\n\nexport default Title;\n"],"names":["DEFAULT_TYPE","Typography","TITLE_GROUP","titleTypeMapping","TITLE_SCREEN","TITLE_SECTION","TITLE_SUBSECTION","TITLE_BODY","Title","as","type","className","props","mapping","isTypeSupported","undefined","HeaderTag","_jsx","clsx"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;AAKA,MAAMA,YAAY,GAAGC,UAAU,CAACC,WAAW,CAAA;AAE3C,MAAMC,gBAAgB,GAAG;AACvB,EAAA,CAACF,UAAU,CAACG,YAAY,GAAG,IAAI;AAC/B,EAAA,CAACH,UAAU,CAACI,aAAa,GAAG,IAAI;AAChC,EAAA,CAACJ,UAAU,CAACK,gBAAgB,GAAG,IAAI;AACnC,EAAA,CAACL,UAAU,CAACM,UAAU,GAAG,IAAI;EAC7B,CAACN,UAAU,CAACC,WAAW,GAAG,IAAA;CAClB,CAAA;AAcV,SAASM,KAAKA,CAAC;EAAEC,EAAE;AAAEC,EAAAA,IAAI,GAAGV,YAAY;EAAEW,SAAS;EAAE,GAAGC,KAAAA;AAAc,CAAA,EAAA;AACpE,EAAA,MAAMC,OAAO,GAAGV,gBAAgB,CAACO,IAAI,CAAC,CAAA;AACtC,EAAA,MAAMI,eAAe,GAAGD,OAAO,KAAKE,SAAS,CAAA;AAC7C,EAAA,IAAID,eAAe,EAAE;AACnB,IAAA,MAAME,SAAS,GAAGP,EAAE,IAAII,OAAO,CAAA;IAC/B,oBAAOI,GAAA,CAACD,SAAS,EAAA;AAAA,MAAA,GAAKJ,KAAK;AAAED,MAAAA,SAAS,EAAEO,IAAI,CAAC,WAAWR,IAAI,CAAA,CAAE,EAAEC,SAAS,CAAA;AAAE,MAAG,CAAA;AAChF,GAAA;AACA,EAAA,MAAMK,SAAS,GAAGP,EAAE,IAAIN,gBAAgB,CAACH,YAAY,CAAC,CAAA;EACtD,oBAAOiB,GAAA,CAACD,SAAS,EAAA;AAAA,IAAA,GAAKJ,KAAK;AAAED,IAAAA,SAAS,EAAEO,IAAI,CAAC,WAAWlB,YAAY,CAAA,CAAE,EAAEW,SAAS,CAAA;AAAE,IAAG,CAAA;AACxF;;;;"}
|
|
@@ -1,46 +1,29 @@
|
|
|
1
|
+
import { ActionButtonProps } from '../actionButton/ActionButton';
|
|
1
2
|
import { AriaLabelProperty, CommonProps, Heading, LinkProps } from '../common';
|
|
2
|
-
import {
|
|
3
|
+
import { HTMLAttributes } from 'react';
|
|
3
4
|
type ActionProps = AriaLabelProperty & {
|
|
4
5
|
text: string;
|
|
5
|
-
onClick?: () => void;
|
|
6
6
|
};
|
|
7
|
-
type ButtonActionProps = ActionProps;
|
|
7
|
+
type ButtonActionProps = ActionProps & ActionButtonProps;
|
|
8
8
|
type LinkActionProps = ActionProps & LinkProps;
|
|
9
|
-
export
|
|
9
|
+
export type HeaderProps = CommonProps & {
|
|
10
10
|
/**
|
|
11
|
-
*
|
|
12
|
-
* is provided, a `Link` will be rendered instead of a `Button`.
|
|
11
|
+
* When the `href` property is provided to the `action`, we will render a `Link` instead of a `ActionButton`.
|
|
13
12
|
*/
|
|
14
13
|
action?: ButtonActionProps | LinkActionProps;
|
|
15
14
|
/**
|
|
16
|
-
*
|
|
15
|
+
* Override the heading element rendered for the title, useful to specify the semantics of your header.
|
|
17
16
|
*
|
|
18
|
-
*
|
|
19
|
-
* **Note:** `<legend>` elements must be the first child of a `<fieldset>` to comply with HTML semantics.
|
|
20
|
-
* If this condition is not met, a warning will be logged to the console.
|
|
21
|
-
* Additionally, the `action` prop is not supported when `as="legend"`.
|
|
22
|
-
*
|
|
23
|
-
* - Other valid values include standard heading tags (`h1` to `h6`) or `header`.
|
|
17
|
+
* @default "h5"
|
|
24
18
|
*/
|
|
25
19
|
as?: Heading | 'legend' | 'header';
|
|
26
|
-
/** Required prop to set the title of the Header. */
|
|
27
20
|
title: string;
|
|
28
|
-
|
|
29
|
-
level?: 'section' | 'group';
|
|
30
|
-
className?: string;
|
|
31
|
-
testId?: string;
|
|
32
|
-
}
|
|
21
|
+
} & Pick<HTMLAttributes<HTMLDivElement>, 'role' | 'id'>;
|
|
33
22
|
/**
|
|
34
|
-
* @param {ButtonActionProps | LinkActionProps} [action] - Optional prop to specify the action button or link.
|
|
35
|
-
* @param {Heading | 'legend'} [as='h5'] - Optional prop to override the heading element rendered for the title.
|
|
36
|
-
* @param {string} title - Required prop to set the title of the section header.
|
|
37
|
-
* @param {'group' | 'section'} [level='group'] - Optional prop to specify the level of the section header.
|
|
38
|
-
* @param {string} [className]
|
|
39
|
-
* @param {string} [testId]
|
|
40
23
|
*
|
|
41
|
-
*
|
|
42
|
-
*
|
|
24
|
+
* Neptune Web: https://transferwise.github.io/neptune-web/components/content/Header
|
|
25
|
+
*
|
|
43
26
|
*/
|
|
44
|
-
declare const Header:
|
|
27
|
+
export declare const Header: ({ id, action, as, title, className, role, }: HeaderProps) => import("react").JSX.Element;
|
|
45
28
|
export default Header;
|
|
46
29
|
//# 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,WAAW,EAAE,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,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;AAG3F,OAAO,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEvC,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,GAAG,QAAQ,CAAC;IACnC,KAAK,EAAE,MAAM,CAAC;CACf,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC,CAAC;AA4BxD;;;;GAIG;AACH,eAAO,MAAM,MAAM,gDAOhB,WAAW,gCA8Bb,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
|
@@ -23,7 +23,6 @@ export type { DefinitionListProps, DefinitionListDefinition } from './definition
|
|
|
23
23
|
export type { DimmerProps } from './dimmer';
|
|
24
24
|
export type { DrawerProps } from './drawer';
|
|
25
25
|
export type { DividerProps } from './divider';
|
|
26
|
-
export type { HeaderProps } from './header';
|
|
27
26
|
export type { EmphasisProps } from './emphasis';
|
|
28
27
|
export type { FieldProps } from './field/Field';
|
|
29
28
|
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,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,cAAc,IAAI,WAAW,EAAE,MAAM,UAAU,CAAC;AAC9D,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,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,YAAY,EAAE,
|
|
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,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,cAAc,IAAI,WAAW,EAAE,MAAM,UAAU,CAAC;AAC9D,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,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAChD,YAAY,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACxC,YAAY,EAAE,2BAA2B,EAAE,MAAM,0BAA0B,CAAC;AAC5E,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,YAAY,EAAE,eAAe,EAAE,MAAM,qBAAqB,CAAC;AAC3D,YAAY,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC;AAC7D,YAAY,EACV,oBAAoB,EACpB,eAAe,EACf,6BAA6B,EAC7B,qBAAqB,EACrB,gBAAgB,EAChB,wBAAwB,EACxB,6BAA6B,GAC9B,MAAM,sBAAsB,CAAC;AAC9B,YAAY,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AACvD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,YAAY,EAAE,UAAU,EAAE,kBAAkB,EAAE,qBAAqB,EAAE,MAAM,eAAe,CAAC;AAC3F,YAAY,EAAE,SAAS,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC3D,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EACV,kBAAkB,EAClB,YAAY,EACZ,kBAAkB,EAClB,eAAe,GAChB,MAAM,cAAc,CAAC;AACtB,YAAY,EAAE,yBAAyB,EAAE,MAAM,yBAAyB,CAAC;AACzE,YAAY,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACjF,YAAY,EAAE,kBAAkB,EAAE,MAAM,iBAAiB,CAAC;AAC1D,YAAY,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AACjD,YAAY,EAAE,qBAAqB,EAAE,MAAM,qCAAqC,CAAC;AACjF,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,YAAY,EAAE,qBAAqB,EAAE,sBAAsB,EAAE,MAAM,oBAAoB,CAAC;AACxF,YAAY,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAChD,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,YAAY,EAAE,sBAAsB,EAAE,qBAAqB,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAC/F,YAAY,EAAE,UAAU,EAAE,MAAM,SAAS,CAAC;AAC1C,YAAY,EAAE,eAAe,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACrE,YAAY,EAAE,gBAAgB,EAAE,MAAM,eAAe,CAAC;AACtD,YAAY,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAChE,YAAY,EACV,UAAU,EACV,yBAAyB,EACzB,gBAAgB,EAChB,WAAW,GACZ,MAAM,UAAU,CAAC;AAClB,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EAAE,aAAa,EAAE,MAAM,qBAAqB,CAAC;AACzD,YAAY,EAAE,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AACtE,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,iBAAiB,EAAE,MAAM,gBAAgB,CAAC;AACxD,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,MAAM,QAAQ,CAAC;AACjD,YAAY,EAAE,8BAA8B,EAAE,MAAM,6BAA6B,CAAC;AAClF,YAAY,EAAE,YAAY,EAAE,MAAM,WAAW,CAAC;AAC9C,YAAY,EAAE,eAAe,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACnE,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,WAAW,EAAE,cAAc,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AACrF,YAAY,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAC5C,YAAY,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AACpD,YAAY,EACV,UAAU,EACV,YAAY,EACZ,qBAAqB,EACrB,eAAe,EACf,gBAAgB,EAChB,aAAa,EACb,iBAAiB,EACjB,eAAe,EACf,aAAa,GACd,MAAM,SAAS,CAAC;AAEjB;;GAEG;AACH,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,IAAI,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,iBAAiB,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,sBAAsB,CAAC;AAC9D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,eAAe,CAAC;AACpD,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,kBAAkB,CAAC;AAClE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,iCAAiC,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,sBAAsB,EAAE,MAAM,0BAA0B,CAAC;AAC7E,OAAO,EAAE,KAAK,EAAE,MAAM,gBAAgB,CAAC;AACvC,OAAO,EAAE,UAAU,EAAE,MAAM,qBAAqB,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,sBAAsB,CAAC;AACnD,OAAO,EACL,WAAW,EACX,wBAAwB,EACxB,wBAAwB,GACzB,MAAM,sBAAsB,CAAC;AAC9B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACtC,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,IAAI,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,qBAAqB,EAAE,MAAM,yBAAyB,CAAC;AAC3E,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,aAAa,EAAE,MAAM,iBAAiB,CAAC;AAC3D,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,gBAAgB,CAAC;AAClD,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACjD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AACnE,OAAO,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtF,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,cAAc,CAAC;AACrD,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,oBAAoB,CAAC;AACjE,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,4BAA4B,CAAC;AAC/E,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,6BAA6B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,UAAU,EAAE,MAAM,yBAAyB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,mBAAmB,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,QAAQ,CAAC;AACzC,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,6BAA6B,CAAC;AACnF,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAC3C,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,WAAW,CAAC;AAC/C,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,aAAa,CAAC;AACnD,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC;AAC7C,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,eAAe,CAAC;AACvD,OAAO,EAAE,OAAO,IAAI,KAAK,EAAE,MAAM,SAAS,CAAC;AAE3C;;GAEG;AACH,OAAO,EAAE,YAAY,EAAE,SAAS,EAAE,MAAM,gBAAgB,CAAC;AACzD,OAAO,EAAE,aAAa,EAAE,MAAM,8BAA8B,CAAC;AAC7D,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,wBAAwB,CAAC;AAEhE;;GAEG;AACH,OAAO,EAAE,kBAAkB,EAAE,MAAM,eAAe,CAAC;AACnD,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AACtC,OAAO,EACL,UAAU,EACV,WAAW,EACX,QAAQ,EACR,SAAS,EACT,QAAQ,EACR,MAAM,EACN,gBAAgB,EAChB,WAAW,EACX,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,MAAM,EACN,SAAS,EACT,IAAI,EACJ,MAAM,EACN,KAAK,EACL,IAAI,EACJ,UAAU,EACV,OAAO,EACP,KAAK,GACN,MAAM,UAAU,CAAC;AAClB,OAAO,EAAE,oBAAoB,EAAE,YAAY,EAAE,MAAM,YAAY,CAAC;AAChE,OAAO,EAAE,gBAAgB,EAAE,MAAM,QAAQ,CAAC;AAC1C,OAAO,EAAE,QAAQ,EAAE,MAAM,QAAQ,CAAC;AAClC,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC;AAEtC;;GAEG;AACH,OAAO,EACL,YAAY,EACZ,cAAc,EACd,aAAa,EACb,mBAAmB,EACnB,YAAY,EACZ,oBAAoB,EACpB,sBAAsB,EACtB,iBAAiB,EACjB,SAAS,EACT,YAAY,EACZ,qBAAqB,GACtB,MAAM,UAAU,CAAC;AAElB;;GAEG;AACH,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,QAAQ,CAAC;AAEjD;;GAEG;AACH,OAAO,EAAE,OAAO,IAAI,MAAM,EAAE,MAAM,UAAU,CAAC"}
|
|
@@ -1,14 +1,15 @@
|
|
|
1
1
|
import { LabelHTMLAttributes, LiHTMLAttributes } from 'react';
|
|
2
2
|
import { TitleTypes, Heading } from '../common';
|
|
3
|
-
|
|
3
|
+
type Props = LabelHTMLAttributes<HTMLHeadingElement | HTMLSpanElement | HTMLLabelElement> & LiHTMLAttributes<HTMLLIElement> & {
|
|
4
4
|
/**
|
|
5
5
|
* Default value will based one `type` prop
|
|
6
6
|
*/
|
|
7
|
-
as?:
|
|
7
|
+
as?: 'span' | 'label' | 'li' | 'legend' | 'header' | Heading;
|
|
8
8
|
/**
|
|
9
9
|
* Default value: {@link DEFAULT_TYPE}
|
|
10
10
|
*/
|
|
11
11
|
type?: TitleTypes;
|
|
12
|
-
}
|
|
12
|
+
};
|
|
13
|
+
declare function Title({ as, type, className, ...props }: Props): import("react").JSX.Element;
|
|
13
14
|
export default Title;
|
|
14
15
|
//# sourceMappingURL=Title.d.ts.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Title.d.ts","sourceRoot":"","sources":["../../../src/title/Title.tsx"],"names":[],"mappings":"AACA,OAAO,
|
|
1
|
+
{"version":3,"file":"Title.d.ts","sourceRoot":"","sources":["../../../src/title/Title.tsx"],"names":[],"mappings":"AACA,OAAO,EAAE,mBAAmB,EAAE,gBAAgB,EAAa,MAAM,OAAO,CAAC;AAEzE,OAAO,EAAE,UAAU,EAAc,OAAO,EAAE,MAAM,WAAW,CAAC;AAY5D,KAAK,KAAK,GAAG,mBAAmB,CAAC,kBAAkB,GAAG,eAAe,GAAG,gBAAgB,CAAC,GACvF,gBAAgB,CAAC,aAAa,CAAC,GAAG;IAChC;;OAEG;IACH,EAAE,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;IAC7D;;OAEG;IACH,IAAI,CAAC,EAAE,UAAU,CAAC;CACnB,CAAC;AAEJ,iBAAS,KAAK,CAAC,EAAE,EAAE,EAAE,IAAmB,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,+BASrE;AAED,eAAe,KAAK,CAAC"}
|
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-840bf87",
|
|
4
4
|
"description": "Neptune React components",
|
|
5
5
|
"license": "Apache-2.0",
|
|
6
6
|
"repository": {
|
|
@@ -68,7 +68,7 @@
|
|
|
68
68
|
"@testing-library/jest-dom": "^6.4.6",
|
|
69
69
|
"@testing-library/react": "^16.0.0",
|
|
70
70
|
"@testing-library/user-event": "^14.5.2",
|
|
71
|
-
"@transferwise/icons": "^3.
|
|
71
|
+
"@transferwise/icons": "^3.20.0",
|
|
72
72
|
"@tsconfig/recommended": "^1.0.7",
|
|
73
73
|
"@types/babel__core": "^7.20.5",
|
|
74
74
|
"@types/commonmark": "^0.27.9",
|
|
@@ -95,13 +95,13 @@
|
|
|
95
95
|
"rollup-preserve-directives": "^1.1.1",
|
|
96
96
|
"storybook": "^8.2.2",
|
|
97
97
|
"@transferwise/less-config": "3.1.1",
|
|
98
|
-
"@transferwise/neptune-css": "
|
|
98
|
+
"@transferwise/neptune-css": "0.0.0-experimental-840bf87",
|
|
99
99
|
"@wise/components-theming": "1.6.2",
|
|
100
100
|
"@wise/wds-configs": "0.0.0"
|
|
101
101
|
},
|
|
102
102
|
"peerDependencies": {
|
|
103
|
-
"@transferwise/icons": "^3.
|
|
104
|
-
"@transferwise/neptune-css": "
|
|
103
|
+
"@transferwise/icons": "^3.20.0",
|
|
104
|
+
"@transferwise/neptune-css": "0.0.0-experimental-840bf87",
|
|
105
105
|
"@wise/art": "^2.16",
|
|
106
106
|
"@wise/components-theming": "^1.0.0",
|
|
107
107
|
"react": ">=18",
|
package/src/header/Header.css
CHANGED
|
@@ -1,32 +1,26 @@
|
|
|
1
1
|
.np-header {
|
|
2
|
+
display: flex;
|
|
3
|
+
justify-content: space-between;
|
|
2
4
|
align-items: flex-end;
|
|
5
|
+
max-width: 100%;
|
|
6
|
+
padding: 8px 0;
|
|
7
|
+
padding: var(--size-8) 0;
|
|
3
8
|
border-bottom: 1px solid rgba(0,0,0,0.10196);
|
|
4
9
|
border-bottom: 1px solid var(--color-border-neutral);
|
|
10
|
+
margin-bottom: 8px;
|
|
11
|
+
margin-bottom: var(--size-8);
|
|
5
12
|
-moz-column-gap: 24px;
|
|
6
13
|
column-gap: 24px;
|
|
7
14
|
-moz-column-gap: var(--size-24);
|
|
8
15
|
column-gap: var(--size-24);
|
|
9
|
-
display: flex;
|
|
10
|
-
justify-content: space-between;
|
|
11
|
-
margin-bottom: 8px;
|
|
12
|
-
margin-bottom: var(--size-8);
|
|
13
|
-
max-width: 100%;
|
|
14
|
-
padding: 8px 0;
|
|
15
|
-
padding: var(--size-8) 0;
|
|
16
|
-
width: 100%;
|
|
17
|
-
}
|
|
18
|
-
.np-header--section {
|
|
19
|
-
align-items: center;
|
|
20
|
-
border-bottom: none;
|
|
21
|
-
}
|
|
22
|
-
.np-header--section .np-header__button {
|
|
23
|
-
margin-block-end: 0;
|
|
24
16
|
}
|
|
25
17
|
.np-header__title {
|
|
26
18
|
color: #5d7079;
|
|
27
19
|
color: var(--color-content-secondary);
|
|
28
20
|
}
|
|
29
21
|
.np-header__button {
|
|
30
|
-
margin-inline: calc(
|
|
31
|
-
margin-
|
|
22
|
+
margin-inline: calc(16px * -1);
|
|
23
|
+
margin-inline: calc(var(--size-16) * -1);
|
|
24
|
+
margin-bottom: calc(4px * -1);
|
|
25
|
+
margin-bottom: calc(var(--size-4) * -1);
|
|
32
26
|
}
|
package/src/header/Header.less
CHANGED
|
@@ -1,29 +1,20 @@
|
|
|
1
1
|
.np-header {
|
|
2
|
-
align-items: flex-end;
|
|
3
|
-
border-bottom: 1px solid var(--color-border-neutral);
|
|
4
|
-
column-gap: var(--size-24);
|
|
5
2
|
display: flex;
|
|
6
3
|
justify-content: space-between;
|
|
7
|
-
|
|
4
|
+
align-items: flex-end;
|
|
8
5
|
max-width: 100%;
|
|
9
|
-
padding: var(--size-8) 0;
|
|
10
|
-
|
|
11
|
-
|
|
12
|
-
&--section {
|
|
13
|
-
align-items: center;
|
|
14
|
-
border-bottom: none;
|
|
15
|
-
|
|
16
|
-
.np-header__button {
|
|
17
|
-
margin-block-end: 0;
|
|
18
|
-
}
|
|
19
|
-
}
|
|
6
|
+
padding: var(--size-8) 0;
|
|
7
|
+
border-bottom: 1px solid var(--color-border-neutral);
|
|
8
|
+
margin-bottom: var(--size-8);
|
|
20
9
|
|
|
21
10
|
&__title {
|
|
22
11
|
color: var(--color-content-secondary);
|
|
23
12
|
}
|
|
24
13
|
|
|
14
|
+
column-gap: var(--size-24);
|
|
15
|
+
|
|
25
16
|
&__button {
|
|
26
|
-
margin-inline: calc(
|
|
27
|
-
margin-bottom: calc(
|
|
17
|
+
margin-inline: calc(var(--size-16) * -1);
|
|
18
|
+
margin-bottom: calc(var(--size-4) * -1);
|
|
28
19
|
}
|
|
29
20
|
}
|
|
@@ -1,113 +1,95 @@
|
|
|
1
1
|
import { render, screen, userEvent } from '../test-utils';
|
|
2
|
-
import Header, { HeaderProps } from '.';
|
|
3
2
|
|
|
4
|
-
|
|
5
|
-
const defaultProps: HeaderProps = {
|
|
6
|
-
title: 'Header title',
|
|
7
|
-
};
|
|
8
|
-
|
|
9
|
-
const renderHeader = (props: Partial<HeaderProps> = {}) => {
|
|
10
|
-
return render(<Header {...defaultProps} {...props} />);
|
|
11
|
-
};
|
|
3
|
+
import Header from '.';
|
|
12
4
|
|
|
5
|
+
describe('Header', () => {
|
|
13
6
|
it('can set header title', () => {
|
|
14
|
-
|
|
7
|
+
render(<Header title="Header title" />);
|
|
8
|
+
|
|
15
9
|
expect(screen.getByText('Header title')).toBeInTheDocument();
|
|
16
10
|
});
|
|
17
11
|
|
|
18
12
|
it('can trigger header action', async () => {
|
|
19
13
|
const onHeaderActionClick = jest.fn();
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
|
|
25
|
-
|
|
14
|
+
|
|
15
|
+
render(
|
|
16
|
+
<Header
|
|
17
|
+
title="Header title"
|
|
18
|
+
action={{
|
|
19
|
+
text: 'Click me!',
|
|
20
|
+
onClick: onHeaderActionClick,
|
|
21
|
+
}}
|
|
22
|
+
/>,
|
|
23
|
+
);
|
|
26
24
|
|
|
27
25
|
await userEvent.click(screen.getByRole('button', { name: 'Click me!' }));
|
|
26
|
+
|
|
28
27
|
expect(onHeaderActionClick).toHaveBeenCalledTimes(1);
|
|
29
28
|
});
|
|
30
29
|
|
|
31
30
|
it('can set aria-label property for header action', async () => {
|
|
32
31
|
const onHeaderActionClick = jest.fn();
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
|
|
36
|
-
|
|
37
|
-
|
|
38
|
-
|
|
39
|
-
|
|
32
|
+
|
|
33
|
+
render(
|
|
34
|
+
<Header
|
|
35
|
+
title="Header title"
|
|
36
|
+
action={{
|
|
37
|
+
'aria-label': 'Magic',
|
|
38
|
+
text: 'Click me!',
|
|
39
|
+
onClick: onHeaderActionClick,
|
|
40
|
+
}}
|
|
41
|
+
/>,
|
|
42
|
+
);
|
|
40
43
|
|
|
41
44
|
await userEvent.click(screen.getByRole('button', { name: 'Magic' }));
|
|
45
|
+
|
|
42
46
|
expect(onHeaderActionClick).toHaveBeenCalledTimes(1);
|
|
43
47
|
});
|
|
44
48
|
|
|
45
49
|
it('renders header action as a link when href is provided', () => {
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
|
|
49
|
-
|
|
50
|
-
|
|
51
|
-
|
|
52
|
-
|
|
50
|
+
render(
|
|
51
|
+
<Header
|
|
52
|
+
title="Header title"
|
|
53
|
+
action={{
|
|
54
|
+
'aria-label': 'Click me!',
|
|
55
|
+
text: 'I am a link',
|
|
56
|
+
href: 'https://wise.com',
|
|
57
|
+
}}
|
|
58
|
+
/>,
|
|
59
|
+
);
|
|
53
60
|
|
|
54
61
|
const link = screen.getByRole('link', { name: 'Click me!' });
|
|
62
|
+
|
|
55
63
|
expect(link).toHaveAttribute('href', 'https://wise.com');
|
|
56
64
|
});
|
|
57
65
|
|
|
58
66
|
it('renders header with h5 heading tag by default', () => {
|
|
59
|
-
|
|
67
|
+
render(<Header title="Header title" />);
|
|
68
|
+
|
|
60
69
|
expect(screen.getByRole('heading', { name: 'Header title', level: 5 })).toBeInTheDocument();
|
|
61
70
|
});
|
|
62
71
|
|
|
63
72
|
it('can render header with specific heading tag', () => {
|
|
64
|
-
|
|
65
|
-
expect(screen.getByRole('heading', { name: 'Header title', level: 3 })).toBeInTheDocument();
|
|
66
|
-
});
|
|
73
|
+
render(<Header as="h3" title="Header title" />);
|
|
67
74
|
|
|
68
|
-
|
|
69
|
-
renderHeader({ level: 'section' });
|
|
70
|
-
const header = screen.getByRole('heading', { name: 'Header title' });
|
|
71
|
-
expect(header).toHaveClass('np-header--section');
|
|
72
|
-
});
|
|
73
|
-
|
|
74
|
-
it('warns if Header as legend is not inside a fieldset', () => {
|
|
75
|
-
const consoleWarnMock = jest.spyOn(console, 'warn').mockImplementation();
|
|
76
|
-
|
|
77
|
-
renderHeader({ as: 'legend' });
|
|
78
|
-
|
|
79
|
-
expect(consoleWarnMock).toHaveBeenCalledWith(
|
|
80
|
-
'Legends should be the first child in a fieldset, and this is not possible when including an action',
|
|
81
|
-
);
|
|
82
|
-
|
|
83
|
-
consoleWarnMock.mockRestore();
|
|
84
|
-
});
|
|
85
|
-
|
|
86
|
-
it('does not warn if Header as legend is inside a fieldset', () => {
|
|
87
|
-
const consoleWarnMock = jest.spyOn(console, 'warn').mockImplementation();
|
|
88
|
-
|
|
89
|
-
render(
|
|
90
|
-
<fieldset>
|
|
91
|
-
<Header as="legend" title="Header title" />
|
|
92
|
-
</fieldset>,
|
|
93
|
-
);
|
|
94
|
-
|
|
95
|
-
expect(consoleWarnMock).not.toHaveBeenCalled();
|
|
96
|
-
|
|
97
|
-
consoleWarnMock.mockRestore();
|
|
75
|
+
expect(screen.getByRole('heading', { name: 'Header title', level: 3 })).toBeInTheDocument();
|
|
98
76
|
});
|
|
99
77
|
|
|
100
78
|
it('runs onClick if specified even when it got href prop', async () => {
|
|
101
79
|
const callback = jest.fn();
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
80
|
+
render(
|
|
81
|
+
<Header
|
|
82
|
+
as="h3"
|
|
83
|
+
title="Header title"
|
|
84
|
+
action={{ text: 'Click me', href: '#', onClick: callback }}
|
|
85
|
+
/>,
|
|
86
|
+
);
|
|
106
87
|
|
|
107
88
|
const button = screen.getByRole('link', { name: 'Click me' });
|
|
108
89
|
expect(button).toBeInTheDocument();
|
|
109
90
|
|
|
110
91
|
await userEvent.click(button);
|
|
92
|
+
|
|
111
93
|
expect(callback).toHaveBeenCalledTimes(1);
|
|
112
94
|
});
|
|
113
95
|
});
|