Merged in feat/sw-3242-move-opening-hours-to-design-system (pull request #2629)

feat(SW-32429: Move OpeningHours to design-system

* Move OpeningHours to design-system


Approved-by: Joakim Jäderberg

packages/design-system/lib/components/OpeningHours/AlternateOpeningHours/index.tsx

@@ -0,0 +1,56 @@
+'use client'
+
+import { useIntl } from 'react-intl'
+
+import { Divider } from '@scandic-hotels/design-system/Divider'
+import { Typography } from '@scandic-hotels/design-system/Typography'
+
+import { getGroupedOpeningHours } from '../utils'
+
+import styles from '../openingHours.module.css'
+import { OpeningHours } from '../openingHoursTypes'
+
+interface AlternateOpeningHoursProps {
+  alternateOpeningHours: OpeningHours
+}
+
+export default function AlternateOpeningHours({
+  alternateOpeningHours,
+}: AlternateOpeningHoursProps) {
+  const intl = useIntl()
+  const groupedAlternateOpeningHours = alternateOpeningHours
+    ? getGroupedOpeningHours(alternateOpeningHours, intl)
+    : null
+
+  // If there are alternate hours but no grouped hours with length, we return the name of the alternate hours
+  if (!groupedAlternateOpeningHours?.length) {
+    return (
+      <Typography variant="Body/Supporting text (caption)/smRegular">
+        <p className={styles.caption}>{alternateOpeningHours.name}</p>
+      </Typography>
+    )
+  }
+
+  return (
+    <>
+      <Divider />
+      <Typography variant="Body/Paragraph/mdBold">
+        <h5 className={styles.heading}>
+          {intl.formatMessage(
+            {
+              defaultMessage: 'Alternate opening hours ({name})',
+            },
+            { name: alternateOpeningHours.name }
+          )}
+        </h5>
+      </Typography>
+      <Typography variant="Body/Paragraph/mdRegular">
+        <div className={styles.text}>
+          {groupedAlternateOpeningHours.map((groupedOpeningHour) => (
+            <p key={groupedOpeningHour}>{groupedOpeningHour}</p>
+          ))}
+        </div>
+      </Typography>
+    </>
+  )
+}