From 63e1f7ff547444774261e36c646e4a01c979a5f3 Mon Sep 17 00:00:00 2001 From: peter Date: Sun, 19 May 2024 13:01:35 +0200 Subject: [PATCH] feat(ffe-system-message-react): rewrite to ts * custom animmation lenght removed * onClose -> onCloseRest BREAKING CHANGE: changed props --- packages/ffe-system-message-react/README.md | 5 - .../ffe-system-message-react/package.json | 10 +- ...ErrorMessage.js => SystemErrorMessage.tsx} | 45 ++----- ...emInfoMessage.js => SystemInfoMessage.tsx} | 17 ++- .../src/SystemMessage.spec.js | 110 ---------------- .../src/SystemMessage.spec.tsx | 120 ++++++++++++++++++ .../{SystemMessage.js => SystemMessage.tsx} | 110 +++++----------- ...emNewsMessage.js => SystemNewsMessage.tsx} | 18 +-- ...essMessage.js => SystemSuccessMessage.tsx} | 18 +-- .../ffe-system-message-react/src/index.d.ts | 31 ----- .../ffe-system-message-react/src/index.js | 11 -- .../ffe-system-message-react/src/index.ts | 10 ++ .../src/{texts.js => texts.ts} | 8 +- .../tsconfig.cjs.json | 9 ++ .../tsconfig.esm.json | 9 ++ .../tsconfig.types.json | 10 ++ 16 files changed, 240 insertions(+), 301 deletions(-) rename packages/ffe-system-message-react/src/{SystemErrorMessage.js => SystemErrorMessage.tsx} (56%) rename packages/ffe-system-message-react/src/{SystemInfoMessage.js => SystemInfoMessage.tsx} (77%) delete mode 100644 packages/ffe-system-message-react/src/SystemMessage.spec.js create mode 100644 packages/ffe-system-message-react/src/SystemMessage.spec.tsx rename packages/ffe-system-message-react/src/{SystemMessage.js => SystemMessage.tsx} (52%) rename packages/ffe-system-message-react/src/{SystemNewsMessage.js => SystemNewsMessage.tsx} (77%) rename packages/ffe-system-message-react/src/{SystemSuccessMessage.js => SystemSuccessMessage.tsx} (74%) delete mode 100644 packages/ffe-system-message-react/src/index.d.ts delete mode 100644 packages/ffe-system-message-react/src/index.js create mode 100644 packages/ffe-system-message-react/src/index.ts rename packages/ffe-system-message-react/src/{texts.js => texts.ts} (91%) create mode 100644 packages/ffe-system-message-react/tsconfig.cjs.json create mode 100644 packages/ffe-system-message-react/tsconfig.esm.json create mode 100644 packages/ffe-system-message-react/tsconfig.types.json diff --git a/packages/ffe-system-message-react/README.md b/packages/ffe-system-message-react/README.md index 7a16903e65..65732d4166 100644 --- a/packages/ffe-system-message-react/README.md +++ b/packages/ffe-system-message-react/README.md @@ -10,11 +10,6 @@ npm install --save @sb1/ffe-system-message-react Full documentation on system message usage is available at https://design.sparebank1.no/komponenter/meldinger/#systemmessage. -## TypeScript definition files - -This component supports TypeScript - please update `index.d.ts` if you change any -of the external methods or properties in this component. - ## Development To start a local development server, run the following from the designsystem root folder: diff --git a/packages/ffe-system-message-react/package.json b/packages/ffe-system-message-react/package.json index f838492931..ac0c188ff5 100644 --- a/packages/ffe-system-message-react/package.json +++ b/packages/ffe-system-message-react/package.json @@ -17,19 +17,19 @@ "url": "ssh://git@github.com:SpareBank1/designsystem.git" }, "scripts": { - "build": "ffe-buildtool babel", + "build": "ffe-buildtool tsc", "watch": "ffe-buildtool babel-watch", - "lint": "eslint src", - "lint:fix": "eslint src --fix", + "lint": "eslint src --ext ts,tsx", + "lint:fix": "eslint src --fix --ext ts,tsx", "test": "ffe-buildtool jest", "test:watch": "ffe-buildtool jest --watch" }, "dependencies": { + "@sb1/ffe-collapse-react": "^4.0.2", "@sb1/ffe-grid-react": "^13.2.15", "@sb1/ffe-icons-react": "^10.0.1", "@sb1/ffe-system-message": "^8.0.17", - "classnames": "^2.3.1", - "prop-types": "^15.7.2" + "classnames": "^2.3.1" }, "devDependencies": { "@sb1/ffe-buildtool": "^0.6.1", diff --git a/packages/ffe-system-message-react/src/SystemErrorMessage.js b/packages/ffe-system-message-react/src/SystemErrorMessage.tsx similarity index 56% rename from packages/ffe-system-message-react/src/SystemErrorMessage.js rename to packages/ffe-system-message-react/src/SystemErrorMessage.tsx index ec3cb0c07f..fa8b0fcb1b 100644 --- a/packages/ffe-system-message-react/src/SystemErrorMessage.js +++ b/packages/ffe-system-message-react/src/SystemErrorMessage.tsx @@ -1,19 +1,19 @@ import React from 'react'; -import { func, string, number, node, oneOf, bool } from 'prop-types'; import { Icon } from '@sb1/ffe-icons-react'; -import texts from './texts'; +import { texts } from './texts'; +import { SystemMessage, SystemMessageProps } from './SystemMessage'; -import SystemMessage from './SystemMessage'; - -export default function SystemErrorMessage(props) { - const { - alert = true, - locale = 'nb', - animationLengthMs = 300, - onClose = f => f, - ...rest - } = props; +export interface SystemErrorMessageProps + extends Omit { + /** When false, role is not set to alert, avoids message from being read up immediately after page load. Default value is true. */ + alert?: boolean; +} +export const SystemErrorMessage: React.FC = ({ + locale = 'nb', + alert, + ...rest +}) => { const priorityHighIconSmall = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Ik00NzkuNzg4LTE4Ny4wOHEtMjEuNTM3IDAtMzYuNjYyLTE1LjMzN3QtMTUuMTI1LTM2Ljg3NHEwLTIxLjUzNyAxNS4zMzctMzYuNjYyIDE1LjMzNy0xNS4xMjQgMzYuODc0LTE1LjEyNCAyMS41MzcgMCAzNi42NjIgMTUuMzM3dDE1LjEyNSAzNi44NzRxMCAyMS41MzctMTUuMzM3IDM2LjY2MS0xNS4zMzcgMTUuMTI1LTM2Ljg3NCAxNS4xMjVabS0uMDYyLTE5Ni4xNTFxLTE5LjM0MSAwLTMyLjg0LTEzLjcwOS0xMy41LTEzLjcwOS0xMy41LTMyLjk2di0zMTYuNjg1cTAtMTkuMjUxIDEzLjc3NC0zMi43OTQgMTMuNzczLTEzLjU0MiAzMy4xMTQtMTMuNTQyIDE5LjM0MSAwIDMyLjg0IDEzLjcwOSAxMy41IDEzLjcwOSAxMy41IDMyLjk2djMxNi42ODVxMCAxOS4yNTEtMTMuNzc0IDMyLjc5NC0xMy43NzMgMTMuNTQyLTMzLjExNCAxMy41NDJaIi8+PC9zdmc+'; return ( @@ -23,28 +23,7 @@ export default function SystemErrorMessage(props) { locale={locale} icon={} role={alert ? 'alert' : 'group'} - animationLengthMs={animationLengthMs} - onClose={onClose} {...rest} /> ); -} - -SystemErrorMessage.propTypes = { - animationLengthMs: number, - /** The content of the system message */ - children: node.isRequired, - /** Additional classes added to the surrounding div */ - className: string, - /** 'nb', 'nn', or 'en' */ - locale: oneOf(['en', 'nb', 'nn']), - /** - * The type of system message. Used internally only- - * @ignore - **/ - modifier: oneOf(['error', 'info', 'success', 'news']), - /** Callback for when the system message has been closed (after animation ends) */ - onClose: func, - /** When false, role is not set to alert, avoids message from being read up immediately after page load. Default value is true. */ - alert: bool, }; diff --git a/packages/ffe-system-message-react/src/SystemInfoMessage.js b/packages/ffe-system-message-react/src/SystemInfoMessage.tsx similarity index 77% rename from packages/ffe-system-message-react/src/SystemInfoMessage.js rename to packages/ffe-system-message-react/src/SystemInfoMessage.tsx index 104af5cb24..9ca809d938 100644 --- a/packages/ffe-system-message-react/src/SystemInfoMessage.js +++ b/packages/ffe-system-message-react/src/SystemInfoMessage.tsx @@ -1,10 +1,14 @@ import React from 'react'; import { Icon } from '@sb1/ffe-icons-react'; -import texts from './texts'; -import SystemMessage from './SystemMessage'; -import { oneOf } from 'prop-types'; +import { texts } from './texts'; +import { SystemMessage, SystemMessageProps } from './SystemMessage'; +export interface SystemInfoMessageProps + extends Omit {} -export default function SystemInfoMessage({ locale = 'nb', ...rest }) { +export const SystemInfoMessage: React.FC = ({ + locale = 'nb', + ...rest +}) => { const infoIconSmall = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Ik00NzkuNzg4LTY3MnEtMjUuOTQyIDAtNDMuODY0LTE4LjEzNS0xNy45MjMtMTguMTM2LTE3LjkyMy00NC4wNzd0MTguMTM1LTQzLjg2NHExOC4xMzUtMTcuOTIzIDQ0LjA3Ni0xNy45MjMgMjUuOTQyIDAgNDMuODY0IDE4LjEzNiAxNy45MjMgMTguMTM1IDE3LjkyMyA0NC4wNzZ0LTE4LjEzNSA0My44NjRRNTA1LjcyOS02NzIgNDc5Ljc4OC02NzJabS4yNTcgNTA3Ljk5OXEtMjAuODE0IDAtMzUuNDI5LTE0LjU4NC0xNC42MTUtMTQuNTgzLTE0LjYxNS0zNS40MTZ2LTI5Ni42MTRxMC0yMC44MzMgMTQuNTctMzUuNDE2IDE0LjU3LTE0LjU4MyAzNS4zODQtMTQuNTgzdDM1LjQyOSAxNC41ODNxMTQuNjE1IDE0LjU4MyAxNC42MTUgMzUuNDE2djI5Ni42MTRxMCAyMC44MzMtMTQuNTcgMzUuNDE2LTE0LjU3IDE0LjU4NC0zNS4zODQgMTQuNTg0WiIvPjwvc3ZnPg=='; return ( @@ -16,9 +20,4 @@ export default function SystemInfoMessage({ locale = 'nb', ...rest }) { {...rest} /> ); -} - -SystemInfoMessage.propTypes = { - /** 'nb', 'nn', or 'en' */ - locale: oneOf(['en', 'nb', 'nn']), }; diff --git a/packages/ffe-system-message-react/src/SystemMessage.spec.js b/packages/ffe-system-message-react/src/SystemMessage.spec.js deleted file mode 100644 index d03e3ef6e9..0000000000 --- a/packages/ffe-system-message-react/src/SystemMessage.spec.js +++ /dev/null @@ -1,110 +0,0 @@ -import React from 'react'; - -import { - SystemErrorMessage, - SystemInfoMessage, - SystemNewsMessage, - SystemSuccessMessage, -} from '.'; - -const defaultProps = { - children: Message, -}; - -const getWrapper = Comp => props => - mount(); - -const getErrorWrapper = getWrapper(SystemErrorMessage); -const getInfoWrapper = getWrapper(SystemInfoMessage); -const getNewsWrapper = getWrapper(SystemNewsMessage); -const getSuccessWrapper = getWrapper(SystemSuccessMessage); - -describe('', () => { - it('renders without exploding', () => { - const wrapper = getInfoWrapper(); - expect(wrapper.exists()).toBe(true); - }); - it('applies the correct modifier classes to each type', () => { - const errorWrapper = getErrorWrapper(); - expect( - errorWrapper - .find('.ffe-system-message-wrapper') - .hasClass('ffe-system-message-wrapper--error'), - ).toBe(true); - - const infoWrapper = getInfoWrapper(); - expect( - infoWrapper - .find('.ffe-system-message-wrapper') - .hasClass('ffe-system-message-wrapper--info'), - ).toBe(true); - - const newsWrapper = getNewsWrapper(); - expect( - newsWrapper - .find('.ffe-system-message-wrapper') - .hasClass('ffe-system-message-wrapper--news'), - ).toBe(true); - - const successWrapper = getSuccessWrapper(); - expect( - successWrapper - .find('.ffe-system-message-wrapper') - .hasClass('ffe-system-message-wrapper--success'), - ).toBe(true); - }); - it('renders with correct aria-label', () => { - const infoWrapper = getInfoWrapper(); - const successWrapper = getSuccessWrapper(); - const infoEl = infoWrapper.find('.ffe-system-message-wrapper'); - const successEl = successWrapper.find('.ffe-system-message-wrapper'); - expect(infoEl.prop('aria-label')).toBe('Infomelding'); - expect(successEl.prop('aria-label')).toBe('Suksessmelding'); - }); - it('renders with role group on container', () => { - const infoWrapper = getInfoWrapper(); - const infoEl = infoWrapper.find('.ffe-system-message-wrapper'); - expect(infoEl.prop('role')).toBe('group'); - }); - - it('collapses when close button is clicked', done => { - const wrapper = getInfoWrapper({ - animationLengthMs: 10, - }); - expect(wrapper.find('.ffe-system-message-wrapper').exists()).toBe(true); - wrapper.find('button').simulate('click'); - - setTimeout(() => { - wrapper.update(); - expect(wrapper.find('.ffe-system-message-wrapper').exists()).toBe( - false, - ); - done(); - }, 20); - }); - it('calls onClose prop when close button is clicked', done => { - const onClickSpy = jest.fn(); - const wrapper = getInfoWrapper({ - animationLengthMs: 10, - onClose: onClickSpy, - }); - expect(wrapper.find('.ffe-system-message-wrapper').exists()).toBe(true); - wrapper.find('button').simulate('click'); - - setTimeout(() => { - wrapper.update(); - expect(onClickSpy).toHaveBeenCalledTimes(1); - done(); - }, 20); - }); - it('renders a Norwegian aria label on the close button by default', () => { - const wrapper = getInfoWrapper(); - expect(wrapper.find('button').prop('aria-label')).toBe('Lukk'); - }); - it('renders an English aria-label if locale is "en"', () => { - const wrapper = getInfoWrapper({ - locale: 'en', - }); - expect(wrapper.find('button').prop('aria-label')).toBe('Close'); - }); -}); diff --git a/packages/ffe-system-message-react/src/SystemMessage.spec.tsx b/packages/ffe-system-message-react/src/SystemMessage.spec.tsx new file mode 100644 index 0000000000..117dacf4b6 --- /dev/null +++ b/packages/ffe-system-message-react/src/SystemMessage.spec.tsx @@ -0,0 +1,120 @@ +import React from 'react'; +import { + SystemErrorMessage, + SystemErrorMessageProps, +} from './SystemErrorMessage'; +import { SystemInfoMessage, SystemInfoMessageProps } from './SystemInfoMessage'; +import { SystemNewsMessage, SystemNewsMessageProps } from './SystemNewsMessage'; +import { + SystemSuccessMessage, + SystemSuccessMessageProps, +} from './SystemSuccessMessage'; +import { render, screen } from '@testing-library/react'; + +const defaultProps = { + children: Message, +}; + +const TEST_ID_ERROR = 'TEST_ID_ERROR'; +const TEST_ID_INFO = 'TEST_ID_INFO'; +const TEST_ID_NEWS = 'TEST_ID_NEWS'; +const TEST_ID_SUCCESS = 'TEST_ID_SUCCESS'; + +const renderSystemErrorMessage = (props?: SystemErrorMessageProps) => + render( + , + ); +const renderSystemInfoMessage = (props?: SystemInfoMessageProps) => + render( + , + ); +const renderSystemNewsMessage = (props?: SystemNewsMessageProps) => + render( + , + ); +const renderSystemSuccessMessage = (props?: SystemSuccessMessageProps) => + render( + , + ); + +describe('', () => { + it('applies the correct modifier classes to each type', () => { + renderSystemErrorMessage(); + const error = screen.getByTestId(TEST_ID_ERROR); + expect(error.classList.contains('ffe-system-message-wrapper')).toBe( + true, + ); + expect( + error.classList.contains('ffe-system-message-wrapper--error'), + ).toBe(true); + + renderSystemInfoMessage(); + const info = screen.getByTestId(TEST_ID_INFO); + expect(info.classList.contains('ffe-system-message-wrapper')).toBe( + true, + ); + expect( + info.classList.contains('ffe-system-message-wrapper--info'), + ).toBe(true); + + renderSystemNewsMessage(); + const news = screen.getByTestId(TEST_ID_NEWS); + expect(news.classList.contains('ffe-system-message-wrapper')).toBe( + true, + ); + expect( + news.classList.contains('ffe-system-message-wrapper--news'), + ).toBe(true); + + renderSystemSuccessMessage(); + const success = screen.getByTestId(TEST_ID_SUCCESS); + expect(success.classList.contains('ffe-system-message-wrapper')).toBe( + true, + ); + expect( + success.classList.contains('ffe-system-message-wrapper--success'), + ).toBe(true); + }); + it('renders with correct aria-label', () => { + renderSystemInfoMessage(); + const info = screen.getByTestId(TEST_ID_INFO); + renderSystemSuccessMessage(); + const success = screen.getByTestId(TEST_ID_SUCCESS); + expect(info.getAttribute('aria-label')).toBe('Infomelding'); + expect(success.getAttribute('aria-label')).toBe('Suksessmelding'); + }); + it('renders with role group on container', () => { + renderSystemInfoMessage(); + const info = screen.getByTestId(TEST_ID_INFO); + expect(info.getAttribute('role')).toBe('group'); + }); + + it('renders a Norwegian aria label on the close button by default', () => { + renderSystemInfoMessage(); + expect( + screen.queryByRole('button', { name: 'Lukk' }), + ).toBeInTheDocument(); + }); + it('renders an English aria-label if locale is "en"', () => { + renderSystemInfoMessage({ locale: 'en' }); + expect( + screen.queryByRole('button', { name: 'Close' }), + ).toBeInTheDocument(); + }); +}); diff --git a/packages/ffe-system-message-react/src/SystemMessage.js b/packages/ffe-system-message-react/src/SystemMessage.tsx similarity index 52% rename from packages/ffe-system-message-react/src/SystemMessage.js rename to packages/ffe-system-message-react/src/SystemMessage.tsx index c49c7cb189..4827496376 100644 --- a/packages/ffe-system-message-react/src/SystemMessage.js +++ b/packages/ffe-system-message-react/src/SystemMessage.tsx @@ -1,50 +1,39 @@ -import React, { Component } from 'react'; -import { func, string, number, node, oneOf, bool } from 'prop-types'; +import React, { useState } from 'react'; import classNames from 'classnames'; import { Icon } from '@sb1/ffe-icons-react'; -import texts from './texts'; +import { texts } from './texts'; +import { Collapse } from '@sb1/ffe-collapse-react'; -class SystemMessage extends Component { - constructor() { - super(); - this.close = this.close.bind(this); - this.state = { - closed: false, - }; - } - - close(event) { - const { animationLengthMs, onClose = f => f } = this.props; - const self = this._self; - self.style.height = `${self.offsetHeight}px`; - setTimeout(() => { - self.style.height = 0; - }, 0); - setTimeout(() => { - this.setState({ closed: true }, () => { - onClose(event); - }); - }, animationLengthMs); - return false; - } - - render() { - const { - animationLengthMs = 300, - children, - className, - icon, - locale = 'nb', - modifier, - onColoredBg, - ...rest - } = this.props; +export interface SystemMessageProps + extends React.ComponentPropsWithoutRef<'div'> { + icon?: React.ReactNode; + locale?: 'en' | 'nb' | 'nn'; + /** Callback for when the system message has been closed (after animation ends) */ + onCloseRest?: () => void; + /** Adds alternative styling for better contrast on certain backgrounds */ + onColoredBg?: boolean; + /** + * The type of system message. Used internally only- + * @ignore + **/ + modifier: 'error' | 'info' | 'success' | 'news'; +} - if (this.state.closed) { - return null; - } +export const SystemMessage: React.FC = ({ + children, + className, + icon, + locale = 'nb', + modifier, + onColoredBg, + onClick, + onCloseRest, + ...rest +}) => { + const [isOpen, setIsOpen] = useState(true); - return ( + return ( +
{ - this._self = _self; - }} - style={{ - transition: `height ${animationLengthMs / 1000}s`, - }} {...rest} >
- {icon && + {React.isValidElement(icon) && React.cloneElement(icon, { ...icon.props, })} @@ -72,7 +55,7 @@ class SystemMessage extends Component {
- ); - } -} - -SystemMessage.propTypes = { - animationLengthMs: number, - /** The content of the system message */ - children: node.isRequired, - /** Additional classes added to the surrounding div */ - className: string, - /** Override the default icon - use with caution! */ - icon: node.isRequired, - /** 'nb', 'nn', or 'en' */ - locale: oneOf(['en', 'nb', 'nn']), - /** - * The type of system message. Used internally only- - * @ignore - **/ - modifier: oneOf(['error', 'info', 'success', 'news']), - /** Callback for when the system message has been closed (after animation ends) */ - onClose: func, - /* Adds alternative styling for better contrast on certain backgrounds */ - onColoredBg: bool, + + ); }; - -export default SystemMessage; diff --git a/packages/ffe-system-message-react/src/SystemNewsMessage.js b/packages/ffe-system-message-react/src/SystemNewsMessage.tsx similarity index 77% rename from packages/ffe-system-message-react/src/SystemNewsMessage.js rename to packages/ffe-system-message-react/src/SystemNewsMessage.tsx index 1dffbccd93..0e215c3e51 100644 --- a/packages/ffe-system-message-react/src/SystemNewsMessage.js +++ b/packages/ffe-system-message-react/src/SystemNewsMessage.tsx @@ -1,10 +1,15 @@ import React from 'react'; import { Icon } from '@sb1/ffe-icons-react'; -import texts from './texts'; -import SystemMessage from './SystemMessage'; -import { oneOf } from 'prop-types'; +import { texts } from './texts'; +import { SystemMessage, SystemMessageProps } from './SystemMessage'; -export default function SystemNewsMessage({ locale = 'nb', ...rest }) { +export interface SystemNewsMessageProps + extends Omit {} + +export const SystemNewsMessage: React.FC = ({ + locale = 'nb', + ...rest +}) => { const infoIconSmall = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Ik00NzkuNzg4LTY3MnEtMjUuOTQyIDAtNDMuODY0LTE4LjEzNS0xNy45MjMtMTguMTM2LTE3LjkyMy00NC4wNzd0MTguMTM1LTQzLjg2NHExOC4xMzUtMTcuOTIzIDQ0LjA3Ni0xNy45MjMgMjUuOTQyIDAgNDMuODY0IDE4LjEzNiAxNy45MjMgMTguMTM1IDE3LjkyMyA0NC4wNzZ0LTE4LjEzNSA0My44NjRRNTA1LjcyOS02NzIgNDc5Ljc4OC02NzJabS4yNTcgNTA3Ljk5OXEtMjAuODE0IDAtMzUuNDI5LTE0LjU4NC0xNC42MTUtMTQuNTgzLTE0LjYxNS0zNS40MTZ2LTI5Ni42MTRxMC0yMC44MzMgMTQuNTctMzUuNDE2IDE0LjU3LTE0LjU4MyAzNS4zODQtMTQuNTgzdDM1LjQyOSAxNC41ODNxMTQuNjE1IDE0LjU4MyAxNC42MTUgMzUuNDE2djI5Ni42MTRxMCAyMC44MzMtMTQuNTcgMzUuNDE2LTE0LjU3IDE0LjU4NC0zNS4zODQgMTQuNTg0WiIvPjwvc3ZnPg=='; return ( @@ -16,9 +21,4 @@ export default function SystemNewsMessage({ locale = 'nb', ...rest }) { {...rest} /> ); -} - -SystemNewsMessage.propTypes = { - /** 'nb', 'nn', or 'en' */ - locale: oneOf(['en', 'nb', 'nn']), }; diff --git a/packages/ffe-system-message-react/src/SystemSuccessMessage.js b/packages/ffe-system-message-react/src/SystemSuccessMessage.tsx similarity index 74% rename from packages/ffe-system-message-react/src/SystemSuccessMessage.js rename to packages/ffe-system-message-react/src/SystemSuccessMessage.tsx index d4eb4668e1..af936e464a 100644 --- a/packages/ffe-system-message-react/src/SystemSuccessMessage.js +++ b/packages/ffe-system-message-react/src/SystemSuccessMessage.tsx @@ -1,10 +1,15 @@ import React from 'react'; import { Icon } from '@sb1/ffe-icons-react'; -import texts from './texts'; -import SystemMessage from './SystemMessage'; -import { oneOf } from 'prop-types'; +import { texts } from './texts'; +import { SystemMessage, SystemMessageProps } from './SystemMessage'; -export default function SystemSuccessMessage({ locale = 'nb', ...rest }) { +export interface SystemSuccessMessageProps + extends Omit {} + +export const SystemSuccessMessage: React.FC = ({ + locale = 'nb', + ...rest +}) => { const checkIconSmall = 'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Im0zOTUtMzcyLjM4NCAyNzAuNTM5LTI2OS41MzhxNy45MjMtNy45MjMgMTcuNjkyLTcuNjE2IDkuNzY5LjMwOCAxOC4wNzYgOC42MTYgOC4zMDggOC4zMDcgOC4zMDggMTcuODg0IDAgOS41NzYtOC4zMDggMTcuODg0bC0yODMgMjgyLjk5OXEtOS44NDYgOS44NDYtMjIuODA3IDkuODQ2LTEyLjk2MSAwLTIyLjgwNy05Ljg0NmwtMTE0LTExMy45OTlxLTcuOTIzLTcuOTIzLTguMzA4LTE3LjY5Mi0uMzg0LTkuNzY5IDcuOTIzLTE4LjA3NiA4LjMwOC04LjMwOCAxNy44ODQtOC4zMDggOS41NzcgMCAxNy44ODQgOC4zMDhMMzk1LTM3Mi4zODRaIi8+PC9zdmc+'; return ( @@ -16,9 +21,4 @@ export default function SystemSuccessMessage({ locale = 'nb', ...rest }) { {...rest} /> ); -} - -SystemSuccessMessage.propTypes = { - /** 'nb', 'nn', or 'en' */ - locale: oneOf(['en', 'nb', 'nn']), }; diff --git a/packages/ffe-system-message-react/src/index.d.ts b/packages/ffe-system-message-react/src/index.d.ts deleted file mode 100644 index 060193304d..0000000000 --- a/packages/ffe-system-message-react/src/index.d.ts +++ /dev/null @@ -1,31 +0,0 @@ -import * as React from 'react'; - -export interface SystemMessageProps - extends React.ComponentPropsWithoutRef<'div'> { - animationLengthMs?: number; - icon?: React.ReactNode; - locale?: 'en' | 'nb' | 'nn'; - onClose?: React.MouseEventHandler; - onColoredBg?: boolean; -} - -export interface SystemErrorMessageProps extends SystemMessageProps { - alert?: boolean; -} - -declare class SystemErrorMessage extends React.Component< - SystemErrorMessageProps, - any -> {} -declare class SystemInfoMessage extends React.Component< - SystemMessageProps, - any -> {} -declare class SystemNewsMessage extends React.Component< - SystemMessageProps, - any -> {} -declare class SystemSuccessMessage extends React.Component< - SystemMessageProps, - any -> {} diff --git a/packages/ffe-system-message-react/src/index.js b/packages/ffe-system-message-react/src/index.js deleted file mode 100644 index 52c574db40..0000000000 --- a/packages/ffe-system-message-react/src/index.js +++ /dev/null @@ -1,11 +0,0 @@ -import SystemErrorMessage from './SystemErrorMessage'; -import SystemInfoMessage from './SystemInfoMessage'; -import SystemNewsMessage from './SystemNewsMessage'; -import SystemSuccessMessage from './SystemSuccessMessage'; - -export { - SystemErrorMessage, - SystemInfoMessage, - SystemNewsMessage, - SystemSuccessMessage, -}; diff --git a/packages/ffe-system-message-react/src/index.ts b/packages/ffe-system-message-react/src/index.ts new file mode 100644 index 0000000000..cd5b087887 --- /dev/null +++ b/packages/ffe-system-message-react/src/index.ts @@ -0,0 +1,10 @@ +export { + SystemErrorMessage, + SystemErrorMessageProps, +} from './SystemErrorMessage'; +export { SystemInfoMessage, SystemInfoMessageProps } from './SystemInfoMessage'; +export { SystemNewsMessage, SystemNewsMessageProps } from './SystemNewsMessage'; +export { + SystemSuccessMessage, + SystemSuccessMessageProps, +} from './SystemSuccessMessage'; diff --git a/packages/ffe-system-message-react/src/texts.js b/packages/ffe-system-message-react/src/texts.ts similarity index 91% rename from packages/ffe-system-message-react/src/texts.js rename to packages/ffe-system-message-react/src/texts.ts index 22889b83a0..f9f6212484 100644 --- a/packages/ffe-system-message-react/src/texts.js +++ b/packages/ffe-system-message-react/src/texts.ts @@ -12,7 +12,7 @@ const nb = { news: { ariaLabel: 'Nyhetsmelding', }, -}; +} as const; const nn = { close: 'Lukk', error: { @@ -27,7 +27,7 @@ const nn = { news: { ariaLabel: 'Nyheitsmelding', }, -}; +} as const; const en = { close: 'Close', error: { @@ -42,6 +42,6 @@ const en = { news: { ariaLabel: 'News message', }, -}; +} as const; -export default { nb, nn, en }; +export const texts = { nb, nn, en }; diff --git a/packages/ffe-system-message-react/tsconfig.cjs.json b/packages/ffe-system-message-react/tsconfig.cjs.json new file mode 100644 index 0000000000..6579fd2246 --- /dev/null +++ b/packages/ffe-system-message-react/tsconfig.cjs.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "./lib", + "module": "commonjs" + }, + "include": ["src/**/*"], + "exclude": ["node_modules", "src/**/*.spec.ts*"] +} diff --git a/packages/ffe-system-message-react/tsconfig.esm.json b/packages/ffe-system-message-react/tsconfig.esm.json new file mode 100644 index 0000000000..8e577796bf --- /dev/null +++ b/packages/ffe-system-message-react/tsconfig.esm.json @@ -0,0 +1,9 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "./es", + "module": "esnext" + }, + "include": ["src/**/*"], + "exclude": ["node_modules", "src/**/*.spec.ts*"] +} diff --git a/packages/ffe-system-message-react/tsconfig.types.json b/packages/ffe-system-message-react/tsconfig.types.json new file mode 100644 index 0000000000..3499c0be03 --- /dev/null +++ b/packages/ffe-system-message-react/tsconfig.types.json @@ -0,0 +1,10 @@ +{ + "extends": "../../tsconfig.json", + "compilerOptions": { + "outDir": "./types", + "declaration": true, + "emitDeclarationOnly": true + }, + "include": ["src/**/*"], + "exclude": ["node_modules", "src/**/*.spec.ts*"] +}