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/index.tsx

@@ -0,0 +1,48 @@
+'use client'
+
+import { useIntl } from 'react-intl'
+
+import { Divider } from '../Divider'
+import { Typography } from '../Typography'
+
+import AlternateOpeningHours from './AlternateOpeningHours'
+import { getGroupedOpeningHours, getTranslatedName } from './utils'
+
+import styles from './openingHours.module.css'
+import type { OpeningHours } from './openingHoursTypes'
+
+interface OpeningHoursProps {
+  openingHours: OpeningHours
+  alternateOpeningHours?: OpeningHours
+  heading?: string
+}
+
+export default function OpeningHours({
+  openingHours,
+  alternateOpeningHours,
+  heading,
+}: OpeningHoursProps) {
+  const intl = useIntl()
+  const groupedOpeningHours = getGroupedOpeningHours(openingHours, intl)
+  return (
+    <div className={styles.wrapper}>
+      <Typography variant="Title/Overline/sm">
+        <h5 className={styles.heading}>
+          {heading ?? getTranslatedName(openingHours.nameEnglish, intl)}
+        </h5>
+      </Typography>
+      <Divider />
+
+      <Typography variant="Body/Paragraph/mdRegular">
+        <div className={styles.text}>
+          {groupedOpeningHours.map((groupedOpeningHour) => (
+            <p key={groupedOpeningHour}>{groupedOpeningHour}</p>
+          ))}
+        </div>
+      </Typography>
+      {alternateOpeningHours ? (
+        <AlternateOpeningHours alternateOpeningHours={alternateOpeningHours} />
+      ) : null}
+    </div>
+  )
+}