fix(core): remove-button on service message banner now works again

.changeset/cuddly-carpets-attack.md

@@ -0,0 +1,5 @@
+---
+"@equinor/mad-core": patch
+---
+
+the "Remove" button on the service message now works again

.changeset/empty-crews-serve.md

@@ -0,0 +1,5 @@
+---
+"@equinor/mad-components": minor
+---
+
+`CellSwipeItem` is no longer exported from the library

packages/components/src/components/Cell/index.ts

@@ -4,7 +4,6 @@ import { Cell as _Cell, CellProps } from "./Cell";
 import { CellSwipeItemProps } from "./types";
 import { ButtonCell, ButtonCellProps } from "./ButtonCell";
 import { SwitchCell, SwitchCellProps } from "./SwitchCell";
-import { CellSwipeItem } from "./CellSwipeItem";
 
 type CellFamily = typeof _Cell & {
     /**
@@ -29,7 +28,7 @@ Cell.Navigation = NavigationCell;
 Cell.Button = ButtonCell;
 Cell.Switch = SwitchCell;
 
-export { Cell, CellSwipeItem };
+export { Cell };
 export type {
     CellProps,
     CellGroupProps,

packages/core/src/components/service-message/ServiceMessageBanner.tsx

@@ -5,12 +5,12 @@ import {
     PressableHighlight,
     Typography,
     useStyles,
-    CellSwipeItem,
 } from "@equinor/mad-components";
 import { ExpansionToggle } from "./components/ExpansionToggle";
 import { DisableableSwipeable } from "./components/DisableableSwipeable";
 import { useServiceMessageState } from "./ServiceMessageProvider";
 import { resolveMessageFromServiceMessage } from "./utils/resolveMessageFromServiceMessage";
+import { SwipeItem } from "./components/SwipeItem";
 
 export const ServiceMessageBanner = () => {
     const styles = useStyles(theme);
@@ -37,7 +37,7 @@ export const ServiceMessageBanner = () => {
             <DisableableSwipeable
                 disabled={!dismissAndURLIsVisible}
                 renderRightActions={() => (
-                    <CellSwipeItem
+                    <SwipeItem
                         title="Remove"
                         iconName="close"
                         color="danger"

packages/core/src/components/service-message/components/SwipeItem.tsx

@@ -0,0 +1,50 @@
+import { EDSColor, EDSStyleSheet, Icon, IconName, PressableHighlight, Typography, useStyles } from "@equinor/mad-components";
+import React from "react";
+
+type SwipeItemProps = {
+    title: string,
+    iconName: IconName,
+    color: EDSColor,
+    onPress: () => void
+}
+
+export const SwipeItem = ({
+    title,
+    iconName,
+    color,
+    onPress,
+}: SwipeItemProps) => {
+    const styles = useStyles(themeStyles, { color });
+
+    return (
+        <PressableHighlight
+            style={styles.container}
+            onPress={onPress}
+        >
+            {iconName && (
+                <Icon name={iconName} style={styles.textStyle} size={title ? undefined : 28} />
+            )}
+            {title && (
+                <Typography group="interactive" variant="button" style={styles.textStyle}>
+                    {title}
+                </Typography>
+            )}
+        </PressableHighlight>
+    );
+};
+
+const themeStyles = EDSStyleSheet.create((theme, props: { color?: EDSColor }) => ({
+    container: {
+        flexDirection: "row",
+        alignItems: "center",
+        gap: theme.spacing.button.iconGap,
+        backgroundColor: props.color
+            ? theme.colors.interactive[props.color]
+            : theme.colors.interactive.primary,
+        paddingHorizontal: theme.spacing.element.paddingHorizontal,
+        paddingVertical: theme.spacing.element.paddingVertical,
+    },
+    textStyle: {
+        color: theme.colors.text.primaryInverted,
+    },
+}));