feat(ffe-context-message-react): rewrite to ts

* no more custom animation length
* onClose -> onCloseRest
* other props may have changed

BREAKING CHANGE: see above

packages/ffe-context-message-react/README.md

@@ -10,11 +10,6 @@ npm install --save @sb1/ffe-context-message-react
 
 Full documentation on context message usage is available at https://design.sparebank1.no/komponenter/meldinger/#contextmessage.
 
-## 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:

packages/ffe-context-message-react/package.json

@@ -21,19 +21,18 @@
         "url": "ssh://[email protected]: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-context-message": "^8.0.17",
         "@sb1/ffe-icons-react": "^10.0.1",
-        "classnames": "^2.3.1",
-        "prop-types": "^15.7.2",
-        "uuid": "^9.0.0"
+        "classnames": "^2.3.1"
     },
     "devDependencies": {
         "@sb1/ffe-buildtool": "^0.6.1",

packages/ffe-context-message-react/src/ContextErrorMessage.js → packages/ffe-context-message-react/src/ContextErrorMessage.tsx

@@ -1,16 +1,17 @@
 import React from 'react';
-import { number, node, string, bool, oneOf, func, object } from 'prop-types';
-import acceptedLocales from './locale/accepted-locales';
-import texts from './locale/texts';
-import ContextMessage from './ContextMessage';
+import { texts } from './texts';
+import { ContextMessage, ContextMessageProps } from './ContextMessage';
 import { ContextMessageIcon } from './ContextMessageIcon';
 
-const ContextErrorMessage = ({
-    animationLengthMs = 300,
-    compact = false,
-    onClose = () => {},
-    showCloseButton = false,
-    style = {},
+export interface ContextErrorMessageProps
+    extends Omit<
+        ContextMessageProps,
+        'role' | 'messageType' | 'aria-label' | 'icon'
+    > {
+    alert?: boolean;
+}
+
+export const ContextErrorMessage: React.FC<ContextErrorMessageProps> = ({
     alert = true,
     locale = 'nb',
     ...rest
@@ -24,7 +25,6 @@ const ContextErrorMessage = ({
     return (
         <ContextMessage
             {...rest}
-            locale={locale}
             messageType="error"
             role={alert ? 'alert' : 'group'}
             aria-label={texts[locale].error.ariaLabel}
@@ -37,29 +37,3 @@ const ContextErrorMessage = ({
         />
     );
 };
-
-ContextErrorMessage.propTypes = {
-    animationLengthMs: number,
-    /** The content shown in the context box */
-    children: node.isRequired,
-    /** Classes are added in addition to the relevant context message classes */
-    className: string,
-    /** Renders a more compact version of the context message */
-    compact: bool,
-    /** ID for the children container */
-    contentElementId: string,
-    header: string,
-    /** ID for the header container */
-    headerElementId: string,
-    /** Decides the language */
-    locale: oneOf(acceptedLocales),
-    /** Callback for when the context message has been closed (after the animation) */
-    onClose: func,
-    showCloseButton: bool,
-    /** Styles applied to the outermost element. `height` will be overridden */
-    style: object,
-    /** When false, role is not set to alert, avoids message from being read up immediately after page load. Default value is true. */
-    alert: bool,
-};
-
-export default ContextErrorMessage;

packages/ffe-context-message-react/src/ContextInfoMessage.js → packages/ffe-context-message-react/src/ContextInfoMessage.tsx

@@ -1,11 +1,18 @@
 import React from 'react';
-import ContextMessage from './ContextMessage';
+import { ContextMessage, ContextMessageProps } from './ContextMessage';
 import { ContextMessageIcon } from './ContextMessageIcon';
-import texts from './locale/texts';
-import { oneOf } from 'prop-types';
-import acceptedLocales from './locale/accepted-locales';
+import { texts } from './texts';
 
-const ContextInfoMessage = ({ locale = 'nb', ...rest }) => {
+export interface ContextInfoMessageProps
+    extends Omit<
+        ContextMessageProps,
+        'role' | 'messageType' | 'aria-label' | 'icon'
+    > {}
+
+export const ContextInfoMessage: React.FC<ContextInfoMessageProps> = ({
+    locale = 'nb',
+    ...rest
+}) => {
     const infoIconSmall =
         'data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGhlaWdodD0iMjAiIHZpZXdCb3g9IjAgLTk2MCA5NjAgOTYwIiB3aWR0aD0iMjAiPjxwYXRoIGQ9Ik00NzkuNzg4LTY3MnEtMjUuOTQyIDAtNDMuODY0LTE4LjEzNS0xNy45MjMtMTguMTM2LTE3LjkyMy00NC4wNzd0MTguMTM1LTQzLjg2NHExOC4xMzUtMTcuOTIzIDQ0LjA3Ni0xNy45MjMgMjUuOTQyIDAgNDMuODY0IDE4LjEzNiAxNy45MjMgMTguMTM1IDE3LjkyMyA0NC4wNzZ0LTE4LjEzNSA0My44NjRRNTA1LjcyOS02NzIgNDc5Ljc4OC02NzJabS4yNTcgNTA3Ljk5OXEtMjAuODE0IDAtMzUuNDI5LTE0LjU4NC0xNC42MTUtMTQuNTgzLTE0LjYxNS0zNS40MTZ2LTI5Ni42MTRxMC0yMC44MzMgMTQuNTctMzUuNDE2IDE0LjU3LTE0LjU4MyAzNS4zODQtMTQuNTgzdDM1LjQyOSAxNC41ODNxMTQuNjE1IDE0LjU4MyAxNC42MTUgMzUuNDE2djI5Ni42MTRxMCAyMC44MzMtMTQuNTcgMzUuNDE2LTE0LjU3IDE0LjU4NC0zNS4zODQgMTQuNTg0WiIvPjwvc3ZnPg==';
 
@@ -28,10 +35,3 @@ const ContextInfoMessage = ({ locale = 'nb', ...rest }) => {
         />
     );
 };
-
-ContextInfoMessage.propTypes = {
-    /** Decides the language */
-    locale: oneOf(acceptedLocales),
-};
-
-export default ContextInfoMessage;