Merged in feat/SW-2038-static-map-button (pull request #2715)

feat(SW-2038): refactor and create wrapper for static map and button

* feat(SW-2038): refactor and create wrapper for static map and button

* feature: use button from design-system over creating a new one

* remove unused fragment

* fix(SW-2038): add removed css

* fix(SW-2038): update fake button component

* fix(SW-2038): move FakeButton to design system


Approved-by: Erik Tiekstra
Approved-by: Joakim Jäderberg

apps/scandic-web/components/Maps/MapWithButtonWrapper/index.tsx

@@ -0,0 +1,28 @@
+"use client"
+import { useIntl } from "react-intl"
+
+import { FakeButton } from "@scandic-hotels/design-system/FakeButton"
+import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
+
+import styles from "./mapWithButtonWrapper.module.css"
+
+export function MapWithButtonWrapper({ children }: React.PropsWithChildren) {
+  const intl = useIntl()
+  return (
+    <div className={styles.container}>
+      {children}
+      <FakeButton
+        variant="Primary"
+        color="Inverted"
+        size="Small"
+        typography="Body/Supporting text (caption)/smBold"
+        className={styles.button}
+      >
+        <MaterialIcon icon="map" color="CurrentColor" size={20} />
+        {intl.formatMessage({
+          defaultMessage: "See on map",
+        })}
+      </FakeButton>
+    </div>
+  )
+}

apps/scandic-web/components/Maps/MapWithButtonWrapper/mapWithButtonWrapper.module.css

@@ -0,0 +1,16 @@
+.container {
+  display: flex;
+  position: relative;
+  border-radius: var(--Corner-radius-md);
+  overflow: hidden;
+  flex-direction: column;
+
+  align-items: center;
+}
+
+.button {
+  position: absolute;
+  bottom: var(--Space-x2);
+  right: var(--Space-x2);
+  box-shadow: 0px 0px 8px 1px rgba(0, 0, 0, 0.1);
+}