@transferwise/components 0.0.0-experimental-fb37b6d → 0.0.0-experimental-53101fe

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (15) hide show
  1. package/build/header/Header.js +12 -0
  2. package/build/header/Header.js.map +1 -1
  3. package/build/header/Header.mjs +13 -1
  4. package/build/header/Header.mjs.map +1 -1
  5. package/build/title/Title.js +6 -3
  6. package/build/title/Title.js.map +1 -1
  7. package/build/title/Title.mjs +6 -3
  8. package/build/title/Title.mjs.map +1 -1
  9. package/build/types/header/Header.d.ts.map +1 -1
  10. package/build/types/title/Title.d.ts +3 -4
  11. package/build/types/title/Title.d.ts.map +1 -1
  12. package/package.json +3 -3
  13. package/src/header/Header.spec.tsx +26 -0
  14. package/src/header/Header.tsx +14 -2
  15. package/src/title/Title.tsx +25 -11
package/build/header/Header.js CHANGED
@@ -78,6 +78,7 @@ const Header = /*#__PURE__*/React__default.default.forwardRef(({
78
78
  variant = 'group',
79
79
  ...props
80
80
  }, ref) => {
81
+ const internalRef = React.useRef(null);
81
82
  const variantClass = variant && variant !== 'group' ? `np-header--${variant}` : '';
82
83
  const variantTypography = variant === 'section' ? typography.Typography.TITLE_SUBSECTION : typography.Typography.TITLE_GROUP;
83
84
  const HeaderClasses = clsx.clsx('np-header', variantClass, className, {
@@ -87,8 +88,19 @@ const Header = /*#__PURE__*/React__default.default.forwardRef(({
87
88
  className: HeaderClasses,
88
89
  'data-testid': testId
89
90
  };
91
+ React.useEffect(() => {
92
+ if (as === 'legend' && internalRef.current) {
93
+ const {
94
+ parentElement
95
+ } = internalRef.current;
96
+ if (!parentElement || parentElement.tagName.toLowerCase() !== 'fieldset') {
97
+ console.warn('Legends should be the first child in a fieldset, and this is not possible when including an action');
98
+ }
99
+ }
100
+ }, [as]);
90
101
  if (!action || as === 'legend') {
91
102
  return /*#__PURE__*/jsxRuntime.jsx(Title, {
103
+ ref: internalRef,
92
104
  as: as,
93
105
  type: variantTypography,
94
106
  ...commonProps,
package/build/header/Header.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Header.js","sources":["../../src/header/Header.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { ActionButtonProps } from '../actionButton/ActionButton';\nimport { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';\nimport Link from '../link';\nimport Button from '../button';\nimport Title from '../title';\nimport React, { FunctionComponent } from 'react';\n\n/**\n * Base properties for an action, including ARIA label and text.\n */\ntype ActionProps = AriaLabelProperty & {\n text: string;\n};\n\n/**\n * Properties for a button action, extending the base action properties.\n */\ntype ButtonActionProps = ActionProps & ActionButtonProps;\n\n/**\n * Properties for a link action, extending the base action properties.\n */\ntype LinkActionProps = ActionProps & LinkProps;\n\nexport interface HeaderProps extends CommonProps {\n /**\n * Optional prop to define the action for the header. If the `href` property\n * is provided, a `Link` will be rendered instead of an `ActionButton`.\n */\n action?: ButtonActionProps | LinkActionProps;\n\n /** Option prop to specify DOM render element of the title */\n as?: Heading | 'legend';\n\n /** Optional prop to specify classNames onto the Header */\n className?: string;\n\n /** Optional prop to specify the ID used for testing */\n testId?: string;\n\n /** Required prop to set the title of the Header. */\n title: string;\n\n /** Optional prop to specify the variant of the Header */\n variant?: 'section' | 'group';\n}\n\n/**\n * Renders a header action which can be either a button or a link.\n *\n * @param {Object} props - The properties object.\n * @param {ButtonActionProps | LinkActionProps} props.action - The action object which can be either a button or a link.\n * @returns {JSX.Element} The rendered header action component.\n */\nconst HeaderAction = React.forwardRef(\n (\n { action }: { action: ButtonActionProps | LinkActionProps },\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n ) => {\n const { 'aria-label': ariaLabel, text, onClick } = action;\n\n if ('href' in action) {\n const { href, target, onClick: linkOnClick } = action;\n return (\n <Link\n ref={ref as React.Ref<HTMLAnchorElement>}\n href={href}\n target={target}\n aria-label={ariaLabel}\n onClick={linkOnClick}\n >\n {text}\n </Link>\n );\n }\n\n return (\n <Button\n ref={ref as React.Ref<HTMLButtonElement>}\n className=\"np-header__button\"\n priority=\"tertiary\"\n size=\"sm\"\n aria-label={ariaLabel}\n onClick={onClick}\n >\n {text}\n </Button>\n );\n },\n);\n\n/**\n * Header component\n *\n * The header component is used to render a section header with an optional action button or link.\n * The header component can be rendered as a `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, or `legend` element.\n *\n * @component\n * @param {ButtonActionProps | LinkActionProps} [action] - Optional prop to specify the action button or link.\n * @param {Heading | 'legend'} [as='h5'] - Optional prop to override the heading element rendered for the title.\n * @param {string} title - Required prop to set the title of the section header.\n * @param {'group' | 'section'} [variant='group'] - Optional prop to specify the variant of the section header.\n * @param {string} [className] - Optional prop to specify classNames onto the Header.\n * @param {string} [testId] - Optional prop to specify the ID used for testing.\n *\n * @example\n * // Example usage:\n * import Header from './Header';\n *\n * function App() {\n * return (\n * <Header title=\"Header\" />\n * );\n * }\n */\nconst Header: FunctionComponent<HeaderProps> = React.forwardRef(\n (\n { as = 'h5', action, className, testId, title, variant = 'group', ...props },\n ref: React.Ref<HTMLDivElement | HTMLHeadingElement | HTMLLegendElement>,\n ) => {\n const variantClass = variant && variant !== 'group' ? `np-header--${variant}` : '';\n const variantTypography =\n variant === 'section' ? Typography.TITLE_SUBSECTION : Typography.TITLE_GROUP;\n const HeaderClasses = clsx('np-header', variantClass, className, {\n 'np-header__title': !action || as === 'legend',\n });\n\n const commonProps = {\n className: HeaderClasses,\n 'data-testid': testId,\n };\n\n if (!action || as === 'legend') {\n return (\n <Title as={as} type={variantTypography} {...commonProps} {...props}>\n {title}\n </Title>\n );\n }\n\n const actionRef = React.createRef<HTMLButtonElement | HTMLAnchorElement>();\n\n return (\n <div {...commonProps} {...props} ref={ref as React.Ref<HTMLDivElement>}>\n <Title as={as} type={variantTypography} className=\"np-header__title\">\n {title}\n </Title>\n <HeaderAction ref={actionRef} action={action} />\n </div>\n );\n },\n);\n\nexport default Header;\n"],"names":["HeaderAction","React","forwardRef","action","ref","ariaLabel","text","onClick","href","target","linkOnClick","_jsx","Link","children","Button","className","priority","size","Header","as","testId","title","variant","props","variantClass","variantTypography","Typography","TITLE_SUBSECTION","TITLE_GROUP","HeaderClasses","clsx","commonProps","Title","type","actionRef","createRef","_jsxs"],"mappings":"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"}
1
+ {"version":3,"file":"Header.js","sources":["../../src/header/Header.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { ActionButtonProps } from '../actionButton/ActionButton';\nimport { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';\nimport Link from '../link';\nimport Button from '../button';\nimport Title from '../title';\nimport React, { useEffect, useRef, FunctionComponent } from 'react';\n\n/**\n * Base properties for an action, including ARIA label and text.\n */\ntype ActionProps = AriaLabelProperty & {\n text: string;\n};\n\n/**\n * Properties for a button action, extending the base action properties.\n */\ntype ButtonActionProps = ActionProps & ActionButtonProps;\n\n/**\n * Properties for a link action, extending the base action properties.\n */\ntype LinkActionProps = ActionProps & LinkProps;\n\nexport interface HeaderProps extends CommonProps {\n /**\n * Optional prop to define the action for the header. If the `href` property\n * is provided, a `Link` will be rendered instead of an `ActionButton`.\n */\n action?: ButtonActionProps | LinkActionProps;\n\n /** Option prop to specify DOM render element of the title */\n as?: Heading | 'legend';\n\n /** Optional prop to specify classNames onto the Header */\n className?: string;\n\n /** Optional prop to specify the ID used for testing */\n testId?: string;\n\n /** Required prop to set the title of the Header. */\n title: string;\n\n /** Optional prop to specify the variant of the Header */\n variant?: 'section' | 'group';\n}\n\n/**\n * Renders a header action which can be either a button or a link.\n *\n * @param {Object} props - The properties object.\n * @param {ButtonActionProps | LinkActionProps} props.action - The action object which can be either a button or a link.\n * @returns {JSX.Element} The rendered header action component.\n */\nconst HeaderAction = React.forwardRef(\n (\n { action }: { action: ButtonActionProps | LinkActionProps },\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n ) => {\n const { 'aria-label': ariaLabel, text, onClick } = action;\n\n if ('href' in action) {\n const { href, target, onClick: linkOnClick } = action;\n return (\n <Link\n ref={ref as React.Ref<HTMLAnchorElement>}\n href={href}\n target={target}\n aria-label={ariaLabel}\n onClick={linkOnClick}\n >\n {text}\n </Link>\n );\n }\n\n return (\n <Button\n ref={ref as React.Ref<HTMLButtonElement>}\n className=\"np-header__button\"\n priority=\"tertiary\"\n size=\"sm\"\n aria-label={ariaLabel}\n onClick={onClick}\n >\n {text}\n </Button>\n );\n },\n);\n\n/**\n * Header component\n *\n * The header component is used to render a section header with an optional action button or link.\n * The header component can be rendered as a `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, or `legend` element.\n *\n * @component\n * @param {ButtonActionProps | LinkActionProps} [action] - Optional prop to specify the action button or link.\n * @param {Heading | 'legend'} [as='h5'] - Optional prop to override the heading element rendered for the title.\n * @param {string} title - Required prop to set the title of the section header.\n * @param {'group' | 'section'} [variant='group'] - Optional prop to specify the variant of the section header.\n * @param {string} [className] - Optional prop to specify classNames onto the Header.\n * @param {string} [testId] - Optional prop to specify the ID used for testing.\n *\n * @example\n * // Example usage:\n * import Header from './Header';\n *\n * function App() {\n * return (\n * <Header title=\"Header\" />\n * );\n * }\n */\nconst Header: FunctionComponent<HeaderProps> = React.forwardRef(\n (\n { as = 'h5', action, className, testId, title, variant = 'group', ...props },\n ref: React.Ref<HTMLDivElement | HTMLHeadingElement | HTMLLegendElement>,\n ) => {\n const internalRef = useRef<HTMLLegendElement>(null);\n const variantClass = variant && variant !== 'group' ? `np-header--${variant}` : '';\n const variantTypography =\n variant === 'section' ? Typography.TITLE_SUBSECTION : Typography.TITLE_GROUP;\n const HeaderClasses = clsx('np-header', variantClass, className, {\n 'np-header__title': !action || as === 'legend',\n });\n\n const commonProps = {\n className: HeaderClasses,\n 'data-testid': testId,\n };\n\n useEffect(() => {\n if (as === 'legend' && internalRef.current) {\n const {parentElement} = internalRef.current;\n if (!parentElement || parentElement.tagName.toLowerCase() !== 'fieldset') {\n console.warn(\n 'Legends should be the first child in a fieldset, and this is not possible when including an action',\n );\n }\n }\n }, [as]);\n\n if (!action || as === 'legend') {\n return (\n <Title ref={internalRef} as={as} type={variantTypography} {...commonProps} {...props}>\n {title}\n </Title>\n );\n }\n\n const actionRef = React.createRef<HTMLButtonElement | HTMLAnchorElement>();\n\n return (\n <div {...commonProps} {...props} ref={ref as React.Ref<HTMLDivElement>}>\n <Title as={as} type={variantTypography} className=\"np-header__title\">\n {title}\n </Title>\n <HeaderAction ref={actionRef} action={action} />\n </div>\n );\n },\n);\n\nexport default Header;\n"],"names":["HeaderAction","React","forwardRef","action","ref","ariaLabel","text","onClick","href","target","linkOnClick","_jsx","Link","children","Button","className","priority","size","Header","as","testId","title","variant","props","internalRef","useRef","variantClass","variantTypography","Typography","TITLE_SUBSECTION","TITLE_GROUP","HeaderClasses","clsx","commonProps","useEffect","current","parentElement","tagName","toLowerCase","console","warn","Title","type","actionRef","createRef","_jsxs"],"mappings":"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"}
package/build/header/Header.mjs CHANGED
@@ -2,7 +2,7 @@ import { clsx } from 'clsx';
2
2
  import Link from '../link/Link.mjs';
3
3
  import Button from '../button/Button.mjs';
4
4
  import Title from '../title/Title.mjs';
5
- import React__default from 'react';
5
+ import React__default, { useRef, useEffect } from 'react';
6
6
  import { jsx, jsxs } from 'react/jsx-runtime';
7
7
  import { Typography } from '../common/propsValues/typography.mjs';
8
8
 
@@ -72,6 +72,7 @@ const Header = /*#__PURE__*/React__default.forwardRef(({
72
72
  variant = 'group',
73
73
  ...props
74
74
  }, ref) => {
75
+ const internalRef = useRef(null);
75
76
  const variantClass = variant && variant !== 'group' ? `np-header--${variant}` : '';
76
77
  const variantTypography = variant === 'section' ? Typography.TITLE_SUBSECTION : Typography.TITLE_GROUP;
77
78
  const HeaderClasses = clsx('np-header', variantClass, className, {
@@ -81,8 +82,19 @@ const Header = /*#__PURE__*/React__default.forwardRef(({
81
82
  className: HeaderClasses,
82
83
  'data-testid': testId
83
84
  };
85
+ useEffect(() => {
86
+ if (as === 'legend' && internalRef.current) {
87
+ const {
88
+ parentElement
89
+ } = internalRef.current;
90
+ if (!parentElement || parentElement.tagName.toLowerCase() !== 'fieldset') {
91
+ console.warn('Legends should be the first child in a fieldset, and this is not possible when including an action');
92
+ }
93
+ }
94
+ }, [as]);
84
95
  if (!action || as === 'legend') {
85
96
  return /*#__PURE__*/jsx(Title, {
97
+ ref: internalRef,
86
98
  as: as,
87
99
  type: variantTypography,
88
100
  ...commonProps,
package/build/header/Header.mjs.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Header.mjs","sources":["../../src/header/Header.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { ActionButtonProps } from '../actionButton/ActionButton';\nimport { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';\nimport Link from '../link';\nimport Button from '../button';\nimport Title from '../title';\nimport React, { FunctionComponent } from 'react';\n\n/**\n * Base properties for an action, including ARIA label and text.\n */\ntype ActionProps = AriaLabelProperty & {\n text: string;\n};\n\n/**\n * Properties for a button action, extending the base action properties.\n */\ntype ButtonActionProps = ActionProps & ActionButtonProps;\n\n/**\n * Properties for a link action, extending the base action properties.\n */\ntype LinkActionProps = ActionProps & LinkProps;\n\nexport interface HeaderProps extends CommonProps {\n /**\n * Optional prop to define the action for the header. If the `href` property\n * is provided, a `Link` will be rendered instead of an `ActionButton`.\n */\n action?: ButtonActionProps | LinkActionProps;\n\n /** Option prop to specify DOM render element of the title */\n as?: Heading | 'legend';\n\n /** Optional prop to specify classNames onto the Header */\n className?: string;\n\n /** Optional prop to specify the ID used for testing */\n testId?: string;\n\n /** Required prop to set the title of the Header. */\n title: string;\n\n /** Optional prop to specify the variant of the Header */\n variant?: 'section' | 'group';\n}\n\n/**\n * Renders a header action which can be either a button or a link.\n *\n * @param {Object} props - The properties object.\n * @param {ButtonActionProps | LinkActionProps} props.action - The action object which can be either a button or a link.\n * @returns {JSX.Element} The rendered header action component.\n */\nconst HeaderAction = React.forwardRef(\n (\n { action }: { action: ButtonActionProps | LinkActionProps },\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n ) => {\n const { 'aria-label': ariaLabel, text, onClick } = action;\n\n if ('href' in action) {\n const { href, target, onClick: linkOnClick } = action;\n return (\n <Link\n ref={ref as React.Ref<HTMLAnchorElement>}\n href={href}\n target={target}\n aria-label={ariaLabel}\n onClick={linkOnClick}\n >\n {text}\n </Link>\n );\n }\n\n return (\n <Button\n ref={ref as React.Ref<HTMLButtonElement>}\n className=\"np-header__button\"\n priority=\"tertiary\"\n size=\"sm\"\n aria-label={ariaLabel}\n onClick={onClick}\n >\n {text}\n </Button>\n );\n },\n);\n\n/**\n * Header component\n *\n * The header component is used to render a section header with an optional action button or link.\n * The header component can be rendered as a `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, or `legend` element.\n *\n * @component\n * @param {ButtonActionProps | LinkActionProps} [action] - Optional prop to specify the action button or link.\n * @param {Heading | 'legend'} [as='h5'] - Optional prop to override the heading element rendered for the title.\n * @param {string} title - Required prop to set the title of the section header.\n * @param {'group' | 'section'} [variant='group'] - Optional prop to specify the variant of the section header.\n * @param {string} [className] - Optional prop to specify classNames onto the Header.\n * @param {string} [testId] - Optional prop to specify the ID used for testing.\n *\n * @example\n * // Example usage:\n * import Header from './Header';\n *\n * function App() {\n * return (\n * <Header title=\"Header\" />\n * );\n * }\n */\nconst Header: FunctionComponent<HeaderProps> = React.forwardRef(\n (\n { as = 'h5', action, className, testId, title, variant = 'group', ...props },\n ref: React.Ref<HTMLDivElement | HTMLHeadingElement | HTMLLegendElement>,\n ) => {\n const variantClass = variant && variant !== 'group' ? `np-header--${variant}` : '';\n const variantTypography =\n variant === 'section' ? Typography.TITLE_SUBSECTION : Typography.TITLE_GROUP;\n const HeaderClasses = clsx('np-header', variantClass, className, {\n 'np-header__title': !action || as === 'legend',\n });\n\n const commonProps = {\n className: HeaderClasses,\n 'data-testid': testId,\n };\n\n if (!action || as === 'legend') {\n return (\n <Title as={as} type={variantTypography} {...commonProps} {...props}>\n {title}\n </Title>\n );\n }\n\n const actionRef = React.createRef<HTMLButtonElement | HTMLAnchorElement>();\n\n return (\n <div {...commonProps} {...props} ref={ref as React.Ref<HTMLDivElement>}>\n <Title as={as} type={variantTypography} className=\"np-header__title\">\n {title}\n </Title>\n <HeaderAction ref={actionRef} action={action} />\n </div>\n );\n },\n);\n\nexport default Header;\n"],"names":["HeaderAction","React","forwardRef","action","ref","ariaLabel","text","onClick","href","target","linkOnClick","_jsx","Link","children","Button","className","priority","size","Header","as","testId","title","variant","props","variantClass","variantTypography","Typography","TITLE_SUBSECTION","TITLE_GROUP","HeaderClasses","clsx","commonProps","Title","type","actionRef","createRef","_jsxs"],"mappings":"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"}
1
+ {"version":3,"file":"Header.mjs","sources":["../../src/header/Header.tsx"],"sourcesContent":["import { clsx } from 'clsx';\n\nimport { ActionButtonProps } from '../actionButton/ActionButton';\nimport { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '../common';\nimport Link from '../link';\nimport Button from '../button';\nimport Title from '../title';\nimport React, { useEffect, useRef, FunctionComponent } from 'react';\n\n/**\n * Base properties for an action, including ARIA label and text.\n */\ntype ActionProps = AriaLabelProperty & {\n text: string;\n};\n\n/**\n * Properties for a button action, extending the base action properties.\n */\ntype ButtonActionProps = ActionProps & ActionButtonProps;\n\n/**\n * Properties for a link action, extending the base action properties.\n */\ntype LinkActionProps = ActionProps & LinkProps;\n\nexport interface HeaderProps extends CommonProps {\n /**\n * Optional prop to define the action for the header. If the `href` property\n * is provided, a `Link` will be rendered instead of an `ActionButton`.\n */\n action?: ButtonActionProps | LinkActionProps;\n\n /** Option prop to specify DOM render element of the title */\n as?: Heading | 'legend';\n\n /** Optional prop to specify classNames onto the Header */\n className?: string;\n\n /** Optional prop to specify the ID used for testing */\n testId?: string;\n\n /** Required prop to set the title of the Header. */\n title: string;\n\n /** Optional prop to specify the variant of the Header */\n variant?: 'section' | 'group';\n}\n\n/**\n * Renders a header action which can be either a button or a link.\n *\n * @param {Object} props - The properties object.\n * @param {ButtonActionProps | LinkActionProps} props.action - The action object which can be either a button or a link.\n * @returns {JSX.Element} The rendered header action component.\n */\nconst HeaderAction = React.forwardRef(\n (\n { action }: { action: ButtonActionProps | LinkActionProps },\n ref: React.Ref<HTMLButtonElement | HTMLAnchorElement>,\n ) => {\n const { 'aria-label': ariaLabel, text, onClick } = action;\n\n if ('href' in action) {\n const { href, target, onClick: linkOnClick } = action;\n return (\n <Link\n ref={ref as React.Ref<HTMLAnchorElement>}\n href={href}\n target={target}\n aria-label={ariaLabel}\n onClick={linkOnClick}\n >\n {text}\n </Link>\n );\n }\n\n return (\n <Button\n ref={ref as React.Ref<HTMLButtonElement>}\n className=\"np-header__button\"\n priority=\"tertiary\"\n size=\"sm\"\n aria-label={ariaLabel}\n onClick={onClick}\n >\n {text}\n </Button>\n );\n },\n);\n\n/**\n * Header component\n *\n * The header component is used to render a section header with an optional action button or link.\n * The header component can be rendered as a `h1`, `h2`, `h3`, `h4`, `h5`, `h6`, or `legend` element.\n *\n * @component\n * @param {ButtonActionProps | LinkActionProps} [action] - Optional prop to specify the action button or link.\n * @param {Heading | 'legend'} [as='h5'] - Optional prop to override the heading element rendered for the title.\n * @param {string} title - Required prop to set the title of the section header.\n * @param {'group' | 'section'} [variant='group'] - Optional prop to specify the variant of the section header.\n * @param {string} [className] - Optional prop to specify classNames onto the Header.\n * @param {string} [testId] - Optional prop to specify the ID used for testing.\n *\n * @example\n * // Example usage:\n * import Header from './Header';\n *\n * function App() {\n * return (\n * <Header title=\"Header\" />\n * );\n * }\n */\nconst Header: FunctionComponent<HeaderProps> = React.forwardRef(\n (\n { as = 'h5', action, className, testId, title, variant = 'group', ...props },\n ref: React.Ref<HTMLDivElement | HTMLHeadingElement | HTMLLegendElement>,\n ) => {\n const internalRef = useRef<HTMLLegendElement>(null);\n const variantClass = variant && variant !== 'group' ? `np-header--${variant}` : '';\n const variantTypography =\n variant === 'section' ? Typography.TITLE_SUBSECTION : Typography.TITLE_GROUP;\n const HeaderClasses = clsx('np-header', variantClass, className, {\n 'np-header__title': !action || as === 'legend',\n });\n\n const commonProps = {\n className: HeaderClasses,\n 'data-testid': testId,\n };\n\n useEffect(() => {\n if (as === 'legend' && internalRef.current) {\n const {parentElement} = internalRef.current;\n if (!parentElement || parentElement.tagName.toLowerCase() !== 'fieldset') {\n console.warn(\n 'Legends should be the first child in a fieldset, and this is not possible when including an action',\n );\n }\n }\n }, [as]);\n\n if (!action || as === 'legend') {\n return (\n <Title ref={internalRef} as={as} type={variantTypography} {...commonProps} {...props}>\n {title}\n </Title>\n );\n }\n\n const actionRef = React.createRef<HTMLButtonElement | HTMLAnchorElement>();\n\n return (\n <div {...commonProps} {...props} ref={ref as React.Ref<HTMLDivElement>}>\n <Title as={as} type={variantTypography} className=\"np-header__title\">\n {title}\n </Title>\n <HeaderAction ref={actionRef} action={action} />\n </div>\n );\n },\n);\n\nexport default Header;\n"],"names":["HeaderAction","React","forwardRef","action","ref","ariaLabel","text","onClick","href","target","linkOnClick","_jsx","Link","children","Button","className","priority","size","Header","as","testId","title","variant","props","internalRef","useRef","variantClass","variantTypography","Typography","TITLE_SUBSECTION","TITLE_GROUP","HeaderClasses","clsx","commonProps","useEffect","current","parentElement","tagName","toLowerCase","console","warn","Title","type","actionRef","createRef","_jsxs"],"mappings":"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"}
package/build/title/Title.js CHANGED
@@ -1,6 +1,7 @@
1
1
  'use strict';
2
2
 
3
3
  var clsx = require('clsx');
4
+ var React = require('react');
4
5
  var jsxRuntime = require('react/jsx-runtime');
5
6
  var typography = require('../common/propsValues/typography.js');
6
7
 
@@ -12,27 +13,29 @@ const titleTypeMapping = {
12
13
  [typography.Typography.TITLE_BODY]: 'h4',
13
14
  [typography.Typography.TITLE_GROUP]: 'h5'
14
15
  };
15
- function Title({
16
+ const Title = /*#__PURE__*/React.forwardRef(({
16
17
  as,
17
18
  type = DEFAULT_TYPE,
18
19
  className,
19
20
  ...props
20
- }) {
21
+ }, ref) => {
21
22
  const mapping = titleTypeMapping[type];
22
23
  const isTypeSupported = mapping !== undefined;
23
24
  if (isTypeSupported) {
24
25
  const HeaderTag = as ?? mapping;
25
26
  return /*#__PURE__*/jsxRuntime.jsx(HeaderTag, {
27
+ ref: ref,
26
28
  ...props,
27
29
  className: clsx.clsx(`np-text-${type}`, className)
28
30
  });
29
31
  }
30
32
  const HeaderTag = as ?? titleTypeMapping[DEFAULT_TYPE];
31
33
  return /*#__PURE__*/jsxRuntime.jsx(HeaderTag, {
34
+ ref: ref,
32
35
  ...props,
33
36
  className: clsx.clsx(`np-text-${DEFAULT_TYPE}`, className)
34
37
  });
35
- }
38
+ });
36
39
 
37
40
  module.exports = Title;
38
41
  //# sourceMappingURL=Title.js.map
package/build/title/Title.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"Title.js","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' | 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,qBAAU,CAACC,WAAW,CAAA;AAE3C,MAAMC,gBAAgB,GAAG;AACvB,EAAA,CAACF,qBAAU,CAACG,YAAY,GAAG,IAAI;AAC/B,EAAA,CAACH,qBAAU,CAACI,aAAa,GAAG,IAAI;AAChC,EAAA,CAACJ,qBAAU,CAACK,gBAAgB,GAAG,IAAI;AACnC,EAAA,CAACL,qBAAU,CAACM,UAAU,GAAG,IAAI;EAC7B,CAACN,qBAAU,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,cAAA,CAACD,SAAS,EAAA;AAAA,MAAA,GAAKJ,KAAK;AAAED,MAAAA,SAAS,EAAEO,SAAI,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,cAAA,CAACD,SAAS,EAAA;AAAA,IAAA,GAAKJ,KAAK;AAAED,IAAAA,SAAS,EAAEO,SAAI,CAAC,WAAWlB,YAAY,CAAA,CAAE,EAAEW,SAAS,CAAA;AAAE,IAAG,CAAA;AACxF;;;;"}
1
+ {"version":3,"file":"Title.js","sources":["../../src/title/Title.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, 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' | Heading;\n /**\n * Default value: {@link DEFAULT_TYPE}\n */\n type?: TitleTypes;\n };\n\nconst Title = forwardRef<HTMLHeadingElement | HTMLSpanElement | HTMLLabelElement, Props>(\n ({ as, type = DEFAULT_TYPE, className, ...props }, ref) => {\n const mapping = titleTypeMapping[type as keyof typeof titleTypeMapping];\n const isTypeSupported = mapping !== undefined;\n if (isTypeSupported) {\n const HeaderTag = as ?? mapping;\n return (\n <HeaderTag\n ref={ref as React.Ref<any>}\n {...props}\n className={clsx(`np-text-${type}`, className)}\n />\n );\n }\n const HeaderTag = as ?? titleTypeMapping[DEFAULT_TYPE];\n return (\n <HeaderTag\n ref={ref as React.Ref<any>}\n {...props}\n className={clsx(`np-text-${DEFAULT_TYPE}`, className)}\n />\n );\n },\n);\n\nexport default Title;\n"],"names":["DEFAULT_TYPE","Typography","TITLE_GROUP","titleTypeMapping","TITLE_SCREEN","TITLE_SECTION","TITLE_SUBSECTION","TITLE_BODY","Title","forwardRef","as","type","className","props","ref","mapping","isTypeSupported","undefined","HeaderTag","_jsx","clsx"],"mappings":";;;;;;;AAKA,MAAMA,YAAY,GAAGC,qBAAU,CAACC,WAAW,CAAA;AAE3C,MAAMC,gBAAgB,GAAG;AACvB,EAAA,CAACF,qBAAU,CAACG,YAAY,GAAG,IAAI;AAC/B,EAAA,CAACH,qBAAU,CAACI,aAAa,GAAG,IAAI;AAChC,EAAA,CAACJ,qBAAU,CAACK,gBAAgB,GAAG,IAAI;AACnC,EAAA,CAACL,qBAAU,CAACM,UAAU,GAAG,IAAI;EAC7B,CAACN,qBAAU,CAACC,WAAW,GAAG,IAAA;CAClB,CAAA;AAcV,MAAMM,KAAK,gBAAGC,gBAAU,CACtB,CAAC;EAAEC,EAAE;AAAEC,EAAAA,IAAI,GAAGX,YAAY;EAAEY,SAAS;EAAE,GAAGC,KAAAA;CAAO,EAAEC,GAAG,KAAI;AACxD,EAAA,MAAMC,OAAO,GAAGZ,gBAAgB,CAACQ,IAAqC,CAAC,CAAA;AACvE,EAAA,MAAMK,eAAe,GAAGD,OAAO,KAAKE,SAAS,CAAA;AAC7C,EAAA,IAAID,eAAe,EAAE;AACnB,IAAA,MAAME,SAAS,GAAGR,EAAE,IAAIK,OAAO,CAAA;IAC/B,oBACEI,cAAA,CAACD,SAAS,EAAA;AACRJ,MAAAA,GAAG,EAAEA,GAAsB;AAAA,MAAA,GACvBD,KAAK;AACTD,MAAAA,SAAS,EAAEQ,SAAI,CAAC,WAAWT,IAAI,CAAA,CAAE,EAAEC,SAAS,CAAA;AAAE,KAC9C,CAAA,CAAA;AAEN,GAAA;AACA,EAAA,MAAMM,SAAS,GAAGR,EAAE,IAAIP,gBAAgB,CAACH,YAAY,CAAC,CAAA;EACtD,oBACEmB,cAAA,CAACD,SAAS,EAAA;AACRJ,IAAAA,GAAG,EAAEA,GAAsB;AAAA,IAAA,GACvBD,KAAK;AACTD,IAAAA,SAAS,EAAEQ,SAAI,CAAC,WAAWpB,YAAY,CAAA,CAAE,EAAEY,SAAS,CAAA;AAAE,GACtD,CAAA,CAAA;AAEN,CAAC;;;;"}
package/build/title/Title.mjs CHANGED
@@ -1,4 +1,5 @@
1
1
  import { clsx } from 'clsx';
2
+ import { forwardRef } from 'react';
2
3
  import { jsx } from 'react/jsx-runtime';
3
4
  import { Typography } from '../common/propsValues/typography.mjs';
4
5
 
@@ -10,27 +11,29 @@ const titleTypeMapping = {
10
11
  [Typography.TITLE_BODY]: 'h4',
11
12
  [Typography.TITLE_GROUP]: 'h5'
12
13
  };
13
- function Title({
14
+ const Title = /*#__PURE__*/forwardRef(({
14
15
  as,
15
16
  type = DEFAULT_TYPE,
16
17
  className,
17
18
  ...props
18
- }) {
19
+ }, ref) => {
19
20
  const mapping = titleTypeMapping[type];
20
21
  const isTypeSupported = mapping !== undefined;
21
22
  if (isTypeSupported) {
22
23
  const HeaderTag = as ?? mapping;
23
24
  return /*#__PURE__*/jsx(HeaderTag, {
25
+ ref: ref,
24
26
  ...props,
25
27
  className: clsx(`np-text-${type}`, className)
26
28
  });
27
29
  }
28
30
  const HeaderTag = as ?? titleTypeMapping[DEFAULT_TYPE];
29
31
  return /*#__PURE__*/jsx(HeaderTag, {
32
+ ref: ref,
30
33
  ...props,
31
34
  className: clsx(`np-text-${DEFAULT_TYPE}`, className)
32
35
  });
33
- }
36
+ });
34
37
 
35
38
  export { Title as default };
36
39
  //# sourceMappingURL=Title.mjs.map
package/build/title/Title.mjs.map CHANGED
@@ -1 +1 @@
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' | 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
+ {"version":3,"file":"Title.mjs","sources":["../../src/title/Title.tsx"],"sourcesContent":["import { clsx } from 'clsx';\nimport { forwardRef, 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' | Heading;\n /**\n * Default value: {@link DEFAULT_TYPE}\n */\n type?: TitleTypes;\n };\n\nconst Title = forwardRef<HTMLHeadingElement | HTMLSpanElement | HTMLLabelElement, Props>(\n ({ as, type = DEFAULT_TYPE, className, ...props }, ref) => {\n const mapping = titleTypeMapping[type as keyof typeof titleTypeMapping];\n const isTypeSupported = mapping !== undefined;\n if (isTypeSupported) {\n const HeaderTag = as ?? mapping;\n return (\n <HeaderTag\n ref={ref as React.Ref<any>}\n {...props}\n className={clsx(`np-text-${type}`, className)}\n />\n );\n }\n const HeaderTag = as ?? titleTypeMapping[DEFAULT_TYPE];\n return (\n <HeaderTag\n ref={ref as React.Ref<any>}\n {...props}\n className={clsx(`np-text-${DEFAULT_TYPE}`, className)}\n />\n );\n },\n);\n\nexport default Title;\n"],"names":["DEFAULT_TYPE","Typography","TITLE_GROUP","titleTypeMapping","TITLE_SCREEN","TITLE_SECTION","TITLE_SUBSECTION","TITLE_BODY","Title","forwardRef","as","type","className","props","ref","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,MAAMM,KAAK,gBAAGC,UAAU,CACtB,CAAC;EAAEC,EAAE;AAAEC,EAAAA,IAAI,GAAGX,YAAY;EAAEY,SAAS;EAAE,GAAGC,KAAAA;CAAO,EAAEC,GAAG,KAAI;AACxD,EAAA,MAAMC,OAAO,GAAGZ,gBAAgB,CAACQ,IAAqC,CAAC,CAAA;AACvE,EAAA,MAAMK,eAAe,GAAGD,OAAO,KAAKE,SAAS,CAAA;AAC7C,EAAA,IAAID,eAAe,EAAE;AACnB,IAAA,MAAME,SAAS,GAAGR,EAAE,IAAIK,OAAO,CAAA;IAC/B,oBACEI,GAAA,CAACD,SAAS,EAAA;AACRJ,MAAAA,GAAG,EAAEA,GAAsB;AAAA,MAAA,GACvBD,KAAK;AACTD,MAAAA,SAAS,EAAEQ,IAAI,CAAC,WAAWT,IAAI,CAAA,CAAE,EAAEC,SAAS,CAAA;AAAE,KAC9C,CAAA,CAAA;AAEN,GAAA;AACA,EAAA,MAAMM,SAAS,GAAGR,EAAE,IAAIP,gBAAgB,CAACH,YAAY,CAAC,CAAA;EACtD,oBACEmB,GAAA,CAACD,SAAS,EAAA;AACRJ,IAAAA,GAAG,EAAEA,GAAsB;AAAA,IAAA,GACvBD,KAAK;AACTD,IAAAA,SAAS,EAAEQ,IAAI,CAAC,WAAWpB,YAAY,CAAA,CAAE,EAAEY,SAAS,CAAA;AAAE,GACtD,CAAA,CAAA;AAEN,CAAC;;;;"}
package/build/types/header/Header.d.ts.map CHANGED
@@ -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;AACjE,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAI3F,OAAc,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEjD;;GAEG;AACH,KAAK,WAAW,GAAG,iBAAiB,GAAG;IACrC,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF;;GAEG;AACH,KAAK,iBAAiB,GAAG,WAAW,GAAG,iBAAiB,CAAC;AAEzD;;GAEG;AACH,KAAK,eAAe,GAAG,WAAW,GAAG,SAAS,CAAC;AAE/C,MAAM,WAAW,WAAY,SAAQ,WAAW;IAC9C;;;OAGG;IACH,MAAM,CAAC,EAAE,iBAAiB,GAAG,eAAe,CAAC;IAE7C,6DAA6D;IAC7D,EAAE,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAExB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IAEd,yDAAyD;IACzD,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;CAC/B;AA8CD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,CAoC1C,CAAC;AAEF,eAAe,MAAM,CAAC"}
1
+ {"version":3,"file":"Header.d.ts","sourceRoot":"","sources":["../../../src/header/Header.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,8BAA8B,CAAC;AACjE,OAAO,EAAE,iBAAiB,EAAE,WAAW,EAAE,OAAO,EAAE,SAAS,EAAc,MAAM,WAAW,CAAC;AAI3F,OAAc,EAAqB,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAEpE;;GAEG;AACH,KAAK,WAAW,GAAG,iBAAiB,GAAG;IACrC,IAAI,EAAE,MAAM,CAAC;CACd,CAAC;AAEF;;GAEG;AACH,KAAK,iBAAiB,GAAG,WAAW,GAAG,iBAAiB,CAAC;AAEzD;;GAEG;AACH,KAAK,eAAe,GAAG,WAAW,GAAG,SAAS,CAAC;AAE/C,MAAM,WAAW,WAAY,SAAQ,WAAW;IAC9C;;;OAGG;IACH,MAAM,CAAC,EAAE,iBAAiB,GAAG,eAAe,CAAC;IAE7C,6DAA6D;IAC7D,EAAE,CAAC,EAAE,OAAO,GAAG,QAAQ,CAAC;IAExB,0DAA0D;IAC1D,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB,uDAAuD;IACvD,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,oDAAoD;IACpD,KAAK,EAAE,MAAM,CAAC;IAEd,yDAAyD;IACzD,OAAO,CAAC,EAAE,SAAS,GAAG,OAAO,CAAC;CAC/B;AA8CD;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,QAAA,MAAM,MAAM,EAAE,iBAAiB,CAAC,WAAW,CAgD1C,CAAC;AAEF,eAAe,MAAM,CAAC"}
package/build/types/title/Title.d.ts CHANGED
@@ -1,15 +1,14 @@
1
1
  import { LabelHTMLAttributes, LiHTMLAttributes } from 'react';
2
2
  import { TitleTypes, Heading } from '../common';
3
- type Props = LabelHTMLAttributes<HTMLHeadingElement | HTMLSpanElement | HTMLLabelElement> & LiHTMLAttributes<HTMLLIElement> & {
3
+ declare const Title: import("react").ForwardRefExoticComponent<LabelHTMLAttributes<HTMLSpanElement | HTMLHeadingElement | HTMLLabelElement> & LiHTMLAttributes<HTMLLIElement> & {
4
4
  /**
5
5
  * Default value will based one `type` prop
6
6
  */
7
- as?: 'span' | 'label' | 'li' | 'legend' | Heading;
7
+ as?: "span" | "label" | "li" | "legend" | Heading;
8
8
  /**
9
9
  * Default value: {@link DEFAULT_TYPE}
10
10
  */
11
11
  type?: TitleTypes;
12
- };
13
- declare function Title({ as, type, className, ...props }: Props): import("react").JSX.Element;
12
+ } & import("react").RefAttributes<HTMLSpanElement | HTMLHeadingElement | HTMLLabelElement>>;
14
13
  export default Title;
15
14
  //# sourceMappingURL=Title.d.ts.map
package/build/types/title/Title.d.ts.map CHANGED
@@ -1 +1 @@
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,OAAO,CAAC;IAClD;;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"}
1
+ {"version":3,"file":"Title.d.ts","sourceRoot":"","sources":["../../../src/title/Title.tsx"],"names":[],"mappings":"AACA,OAAO,EAAc,mBAAmB,EAAE,gBAAgB,EAAa,MAAM,OAAO,CAAC;AAErF,OAAO,EAAE,UAAU,EAAc,OAAO,EAAE,MAAM,WAAW,CAAC;AAwB5D,QAAA,MAAM,KAAK;IAVP;;OAEG;SACE,MAAM,GAAG,OAAO,GAAG,IAAI,GAAG,QAAQ,GAAG,OAAO;IACjD;;OAEG;WACI,UAAU;2FA0BpB,CAAC;AAEF,eAAe,KAAK,CAAC"}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@transferwise/components",
3
- "version": "0.0.0-experimental-fb37b6d",
3
+ "version": "0.0.0-experimental-53101fe",
4
4
  "description": "Neptune React components",
5
5
  "license": "Apache-2.0",
6
6
  "repository": {
@@ -93,8 +93,8 @@
93
93
  "rollup-preserve-directives": "^1.1.1",
94
94
  "storybook": "^8.2.2",
95
95
  "@transferwise/less-config": "3.1.0",
96
- "@wise/components-theming": "1.6.0",
97
- "@transferwise/neptune-css": "14.18.0"
96
+ "@transferwise/neptune-css": "14.18.0",
97
+ "@wise/components-theming": "1.6.0"
98
98
  },
99
99
  "peerDependencies": {
100
100
  "@transferwise/icons": "^3.7.0",
package/src/header/Header.spec.tsx CHANGED
@@ -82,6 +82,32 @@ describe('Header', () => {
82
82
  expect(header).toHaveClass('np-header--section');
83
83
  });
84
84
 
85
+ it('warns if Header as legend is not inside a fieldset', () => {
86
+ const consoleWarnMock = jest.spyOn(console, 'warn').mockImplementation();
87
+
88
+ render(<Header as="legend" title="Header title" />);
89
+
90
+ expect(consoleWarnMock).toHaveBeenCalledWith(
91
+ 'Legends should be the first child in a fieldset, and this is not possible when including an action',
92
+ );
93
+
94
+ consoleWarnMock.mockRestore();
95
+ });
96
+
97
+ it('does not warn if Header as legend is inside a fieldset', () => {
98
+ const consoleWarnMock = jest.spyOn(console, 'warn').mockImplementation();
99
+
100
+ render(
101
+ <fieldset>
102
+ <Header as="legend" title="Header title" />
103
+ </fieldset>,
104
+ );
105
+
106
+ expect(consoleWarnMock).not.toHaveBeenCalled();
107
+
108
+ consoleWarnMock.mockRestore();
109
+ });
110
+
85
111
  it('runs onClick if specified even when it got href prop', async () => {
86
112
  const callback = jest.fn();
87
113
  render(
package/src/header/Header.tsx CHANGED
@@ -5,7 +5,7 @@ import { AriaLabelProperty, CommonProps, Heading, LinkProps, Typography } from '
5
5
  import Link from '../link';
6
6
  import Button from '../button';
7
7
  import Title from '../title';
8
- import React, { FunctionComponent } from 'react';
8
+ import React, { useEffect, useRef, FunctionComponent } from 'react';
9
9
 
10
10
  /**
11
11
  * Base properties for an action, including ARIA label and text.
@@ -120,6 +120,7 @@ const Header: FunctionComponent<HeaderProps> = React.forwardRef(
120
120
  { as = 'h5', action, className, testId, title, variant = 'group', ...props },
121
121
  ref: React.Ref<HTMLDivElement | HTMLHeadingElement | HTMLLegendElement>,
122
122
  ) => {
123
+ const internalRef = useRef<HTMLLegendElement>(null);
123
124
  const variantClass = variant && variant !== 'group' ? `np-header--${variant}` : '';
124
125
  const variantTypography =
125
126
  variant === 'section' ? Typography.TITLE_SUBSECTION : Typography.TITLE_GROUP;
@@ -132,9 +133,20 @@ const Header: FunctionComponent<HeaderProps> = React.forwardRef(
132
133
  'data-testid': testId,
133
134
  };
134
135
 
136
+ useEffect(() => {
137
+ if (as === 'legend' && internalRef.current) {
138
+ const {parentElement} = internalRef.current;
139
+ if (!parentElement || parentElement.tagName.toLowerCase() !== 'fieldset') {
140
+ console.warn(
141
+ 'Legends should be the first child in a fieldset, and this is not possible when including an action',
142
+ );
143
+ }
144
+ }
145
+ }, [as]);
146
+
135
147
  if (!action || as === 'legend') {
136
148
  return (
137
- <Title as={as} type={variantTypography} {...commonProps} {...props}>
149
+ <Title ref={internalRef} as={as} type={variantTypography} {...commonProps} {...props}>
138
150
  {title}
139
151
  </Title>
140
152
  );
package/src/title/Title.tsx CHANGED
@@ -1,5 +1,5 @@
1
1
  import { clsx } from 'clsx';
2
- import { LabelHTMLAttributes, LiHTMLAttributes, ReactHTML } from 'react';
2
+ import { forwardRef, LabelHTMLAttributes, LiHTMLAttributes, ReactHTML } from 'react';
3
3
 
4
4
  import { TitleTypes, Typography, Heading } from '../common';
5
5
 
@@ -25,15 +25,29 @@ type Props = LabelHTMLAttributes<HTMLHeadingElement | HTMLSpanElement | HTMLLabe
25
25
  type?: TitleTypes;
26
26
  };
27
27
 
28
- function Title({ as, type = DEFAULT_TYPE, className, ...props }: Props) {
29
- const mapping = titleTypeMapping[type];
30
- const isTypeSupported = mapping !== undefined;
31
- if (isTypeSupported) {
32
- const HeaderTag = as ?? mapping;
33
- return <HeaderTag {...props} className={clsx(`np-text-${type}`, className)} />;
34
- }
35
- const HeaderTag = as ?? titleTypeMapping[DEFAULT_TYPE];
36
- return <HeaderTag {...props} className={clsx(`np-text-${DEFAULT_TYPE}`, className)} />;
37
- }
28
+ const Title = forwardRef<HTMLHeadingElement | HTMLSpanElement | HTMLLabelElement, Props>(
29
+ ({ as, type = DEFAULT_TYPE, className, ...props }, ref) => {
30
+ const mapping = titleTypeMapping[type as keyof typeof titleTypeMapping];
31
+ const isTypeSupported = mapping !== undefined;
32
+ if (isTypeSupported) {
33
+ const HeaderTag = as ?? mapping;
34
+ return (
35
+ <HeaderTag
36
+ ref={ref as React.Ref<any>}
37
+ {...props}
38
+ className={clsx(`np-text-${type}`, className)}
39
+ />
40
+ );
41
+ }
42
+ const HeaderTag = as ?? titleTypeMapping[DEFAULT_TYPE];
43
+ return (
44
+ <HeaderTag
45
+ ref={ref as React.Ref<any>}
46
+ {...props}
47
+ className={clsx(`np-text-${DEFAULT_TYPE}`, className)}
48
+ />
49
+ );
50
+ },
51
+ );
38
52
 
39
53
  export default Title;