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

apps/scandic-web/components/ContentType/HotelPage/SidePeeks/RestaurantBar/RestaurantBarItem/index.tsx

@@ -1,8 +1,8 @@
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Link from "@scandic-hotels/design-system/Link"
+import OpeningHours from "@scandic-hotels/design-system/OpeningHours"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
-import OpeningHours from "@/components/OpeningHours"
 import { getIntl } from "@/i18n"
 import { appendSlugToPathname } from "@/utils/appendSlugToPathname"
 

apps/scandic-web/components/ContentType/HotelSubpage/Sidebar/RestaurantSidebar.tsx

@@ -1,10 +1,10 @@
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import Link from "@scandic-hotels/design-system/Link"
 import { OldDSButton as Button } from "@scandic-hotels/design-system/OldDSButton"
+import OpeningHours from "@scandic-hotels/design-system/OpeningHours"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import LocalCallCharges from "@/components/LocalCallCharges"
-import OpeningHours from "@/components/OpeningHours"
 import { getIntl } from "@/i18n"
 
 import styles from "./sidebar.module.css"

apps/scandic-web/components/SidePeeks/AmenitiesSidepeekContent/Accordions/Breakfast.tsx

@@ -5,10 +5,10 @@ import { useIntl } from "react-intl"
 import { isDefined } from "@scandic-hotels/common/utils/isDefined"
 import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem"
 import { IconName } from "@scandic-hotels/design-system/Icons/iconName"
+import OpeningHours from "@scandic-hotels/design-system/OpeningHours"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { HotelTypeEnum } from "@scandic-hotels/trpc/enums/hotelType"
 
-import OpeningHours from "@/components/OpeningHours"
 import { trackAccordionClick } from "@/utils/tracking"
 
 import styles from "./sidePeekAccordion.module.css"

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

@@ -1,18 +1,17 @@
-"use client"
+'use client'
 
-import { useIntl } from "react-intl"
+import { useIntl } from 'react-intl'
 
-import { Divider } from "@scandic-hotels/design-system/Divider"
+import { Divider } from '@scandic-hotels/design-system/Divider'
-import { Typography } from "@scandic-hotels/design-system/Typography"
+import { Typography } from '@scandic-hotels/design-system/Typography'
 
-import { getGroupedOpeningHours } from "../utils"
+import { getGroupedOpeningHours } from '../utils'
 
-import styles from "../openingHours.module.css"
+import styles from '../openingHours.module.css'
-
+import { OpeningHours } from '../openingHoursTypes'
-import type { RestaurantOpeningHours } from "@scandic-hotels/trpc/types/hotel"
 
 interface AlternateOpeningHoursProps {
-  alternateOpeningHours: RestaurantOpeningHours
+  alternateOpeningHours: OpeningHours
 }
 
 export default function AlternateOpeningHours({
@@ -39,7 +38,7 @@ export default function AlternateOpeningHours({
         <h5 className={styles.heading}>
           {intl.formatMessage(
             {
-              defaultMessage: "Alternate opening hours ({name})",
+              defaultMessage: 'Alternate opening hours ({name})',
             },
             { name: alternateOpeningHours.name }
           )}

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

@@ -1,20 +1,19 @@
-"use client"
+'use client'
 
-import { useIntl } from "react-intl"
+import { useIntl } from 'react-intl'
 
-import { Divider } from "@scandic-hotels/design-system/Divider"
+import { Divider } from '../Divider'
-import { Typography } from "@scandic-hotels/design-system/Typography"
+import { Typography } from '../Typography'
 
-import AlternateOpeningHours from "./AlternateOpeningHours"
+import AlternateOpeningHours from './AlternateOpeningHours'
-import { getGroupedOpeningHours, getTranslatedName } from "./utils"
+import { getGroupedOpeningHours, getTranslatedName } from './utils'
 
-import styles from "./openingHours.module.css"
+import styles from './openingHours.module.css'
-
+import type { OpeningHours } from './openingHoursTypes'
-import type { RestaurantOpeningHours } from "@scandic-hotels/trpc/types/hotel"
 
 interface OpeningHoursProps {
-  openingHours: RestaurantOpeningHours
+  openingHours: OpeningHours
-  alternateOpeningHours?: RestaurantOpeningHours
+  alternateOpeningHours?: OpeningHours
   heading?: string
 }
 

packages/design-system/lib/components/OpeningHours/openingHours.test.ts

@@ -1,190 +1,190 @@
-import { describe, expect, it } from "vitest"
+import { describe, expect, it } from 'vitest'
 
-import { getGroupedOpeningHours } from "./utils"
+import { getGroupedOpeningHours } from './utils'
 
-import type { RestaurantOpeningHours } from "@scandic-hotels/trpc/types/hotel"
+import type { RestaurantOpeningHours } from '@scandic-hotels/trpc/types/hotel'
-import type { IntlShape } from "react-intl"
+import type { IntlShape } from 'react-intl'
 
 // Mock IntlShape for testing
 const mockIntl = {
   formatMessage: ({ defaultMessage }: { defaultMessage: string }) => {
     const messages: Record<string, string> = {
-      Monday: "Monday",
+      Monday: 'Monday',
-      Tuesday: "Tuesday",
+      Tuesday: 'Tuesday',
-      Wednesday: "Wednesday",
+      Wednesday: 'Wednesday',
-      Thursday: "Thursday",
+      Thursday: 'Thursday',
-      Friday: "Friday",
+      Friday: 'Friday',
-      Saturday: "Saturday",
+      Saturday: 'Saturday',
-      Sunday: "Sunday",
+      Sunday: 'Sunday',
-      Closed: "Closed",
+      Closed: 'Closed',
-      "Always open": "Always open",
+      'Always open': 'Always open',
     }
     return messages[defaultMessage] || defaultMessage
   },
 } as IntlShape
 
-describe("getGroupedOpeningHours", () => {
+describe('getGroupedOpeningHours', () => {
-  it("should group all days as closed", () => {
+  it('should group all days as closed', () => {
     const allDaysClosed: RestaurantOpeningHours = {
       isActive: true,
-      name: "Opening hours",
+      name: 'Opening hours',
-      nameEnglish: "Opening hours",
+      nameEnglish: 'Opening hours',
       monday: {
         isClosed: true,
         alwaysOpen: false,
-        openingTime: "",
+        openingTime: '',
-        closingTime: "",
+        closingTime: '',
         sortOrder: 1,
       },
       tuesday: {
         isClosed: true,
         alwaysOpen: false,
-        openingTime: "",
+        openingTime: '',
-        closingTime: "",
+        closingTime: '',
         sortOrder: 2,
       },
       wednesday: {
         isClosed: true,
         alwaysOpen: false,
-        openingTime: "",
+        openingTime: '',
-        closingTime: "",
+        closingTime: '',
         sortOrder: 3,
       },
       thursday: {
         isClosed: true,
         alwaysOpen: false,
-        openingTime: "",
+        openingTime: '',
-        closingTime: "",
+        closingTime: '',
         sortOrder: 4,
       },
       friday: {
         isClosed: true,
         alwaysOpen: false,
-        openingTime: "",
+        openingTime: '',
-        closingTime: "",
+        closingTime: '',
         sortOrder: 5,
       },
       saturday: {
         isClosed: true,
         alwaysOpen: false,
-        openingTime: "",
+        openingTime: '',
-        closingTime: "",
+        closingTime: '',
         sortOrder: 6,
       },
       sunday: {
         isClosed: true,
         alwaysOpen: false,
-        openingTime: "",
+        openingTime: '',
-        closingTime: "",
+        closingTime: '',
         sortOrder: 7,
       },
     }
     const result = getGroupedOpeningHours(allDaysClosed, mockIntl)
-    expect(result).toEqual(["Monday-Sunday: Closed"])
+    expect(result).toEqual(['Monday-Sunday: Closed'])
   })
 
-  it("should group all days with same opening hours", () => {
+  it('should group all days with same opening hours', () => {
     const allDaysSameHours: RestaurantOpeningHours = {
       isActive: true,
-      name: "Opening hours",
+      name: 'Opening hours',
-      nameEnglish: "Opening hours",
+      nameEnglish: 'Opening hours',
       monday: {
-        openingTime: "09:00",
+        openingTime: '09:00',
-        closingTime: "17:00",
+        closingTime: '17:00',
         isClosed: false,
         alwaysOpen: false,
         sortOrder: 1,
       },
       tuesday: {
-        openingTime: "09:00",
+        openingTime: '09:00',
-        closingTime: "17:00",
+        closingTime: '17:00',
         isClosed: false,
         alwaysOpen: false,
         sortOrder: 2,
       },
       wednesday: {
-        openingTime: "09:00",
+        openingTime: '09:00',
-        closingTime: "17:00",
+        closingTime: '17:00',
         isClosed: false,
         alwaysOpen: false,
         sortOrder: 3,
       },
       thursday: {
-        openingTime: "09:00",
+        openingTime: '09:00',
-        closingTime: "17:00",
+        closingTime: '17:00',
         isClosed: false,
         alwaysOpen: false,
         sortOrder: 4,
       },
       friday: {
-        openingTime: "09:00",
+        openingTime: '09:00',
-        closingTime: "17:00",
+        closingTime: '17:00',
         isClosed: false,
         alwaysOpen: false,
         sortOrder: 5,
       },
       saturday: {
-        openingTime: "09:00",
+        openingTime: '09:00',
-        closingTime: "17:00",
+        closingTime: '17:00',
         isClosed: false,
         alwaysOpen: false,
         sortOrder: 6,
       },
       sunday: {
-        openingTime: "09:00",
+        openingTime: '09:00',
-        closingTime: "17:00",
+        closingTime: '17:00',
         isClosed: false,
         alwaysOpen: false,
         sortOrder: 7,
       },
     }
     const result = getGroupedOpeningHours(allDaysSameHours, mockIntl)
-    expect(result).toEqual(["Monday-Sunday: 09:00-17:00"])
+    expect(result).toEqual(['Monday-Sunday: 09:00-17:00'])
   })
 
-  it("should handle mixed opening hours", () => {
+  it('should handle mixed opening hours', () => {
     const mixedOpeningHours: RestaurantOpeningHours = {
       isActive: true,
-      name: "Opening hours",
+      name: 'Opening hours',
-      nameEnglish: "Opening hours",
+      nameEnglish: 'Opening hours',
       monday: {
-        openingTime: "09:00",
+        openingTime: '09:00',
-        closingTime: "17:00",
+        closingTime: '17:00',
         isClosed: false,
         alwaysOpen: false,
         sortOrder: 1,
       },
       tuesday: {
-        openingTime: "09:00",
+        openingTime: '09:00',
-        closingTime: "17:00",
+        closingTime: '17:00',
         isClosed: false,
         alwaysOpen: false,
         sortOrder: 2,
       },
       wednesday: {
-        openingTime: "09:00",
+        openingTime: '09:00',
-        closingTime: "17:00",
+        closingTime: '17:00',
         isClosed: false,
         alwaysOpen: false,
         sortOrder: 3,
       },
       thursday: {
-        openingTime: "09:00",
+        openingTime: '09:00',
-        closingTime: "17:00",
+        closingTime: '17:00',
         isClosed: false,
         alwaysOpen: false,
         sortOrder: 4,
       },
       friday: {
-        openingTime: "09:00",
+        openingTime: '09:00',
-        closingTime: "17:00",
+        closingTime: '17:00',
         isClosed: false,
         alwaysOpen: false,
         sortOrder: 5,
       },
       saturday: {
-        openingTime: "10:00",
+        openingTime: '10:00',
-        closingTime: "15:00",
+        closingTime: '15:00',
         isClosed: false,
         alwaysOpen: false,
         sortOrder: 6,
@@ -192,55 +192,55 @@ describe("getGroupedOpeningHours", () => {
       sunday: {
         isClosed: true,
         alwaysOpen: false,
-        openingTime: "",
+        openingTime: '',
-        closingTime: "",
+        closingTime: '',
         sortOrder: 7,
       },
     }
     const result = getGroupedOpeningHours(mixedOpeningHours, mockIntl)
     expect(result).toEqual([
-      "Monday-Friday: 09:00-17:00",
+      'Monday-Friday: 09:00-17:00',
-      "Saturday: 10:00-15:00",
+      'Saturday: 10:00-15:00',
-      "Sunday: Closed",
+      'Sunday: Closed',
     ])
   })
 
-  it("should handle always open days", () => {
+  it('should handle always open days', () => {
     const someAlwaysOpen: RestaurantOpeningHours = {
       isActive: true,
-      name: "Opening hours",
+      name: 'Opening hours',
-      nameEnglish: "Opening hours",
+      nameEnglish: 'Opening hours',
       monday: {
         alwaysOpen: true,
         isClosed: false,
-        openingTime: "",
+        openingTime: '',
-        closingTime: "",
+        closingTime: '',
         sortOrder: 1,
       },
       tuesday: {
         alwaysOpen: true,
         isClosed: false,
-        openingTime: "",
+        openingTime: '',
-        closingTime: "",
+        closingTime: '',
         sortOrder: 2,
       },
       wednesday: {
-        openingTime: "09:00",
+        openingTime: '09:00',
-        closingTime: "17:00",
+        closingTime: '17:00',
         isClosed: false,
         alwaysOpen: false,
         sortOrder: 3,
       },
       thursday: {
-        openingTime: "09:00",
+        openingTime: '09:00',
-        closingTime: "17:00",
+        closingTime: '17:00',
         isClosed: false,
         alwaysOpen: false,
         sortOrder: 4,
       },
       friday: {
-        openingTime: "09:00",
+        openingTime: '09:00',
-        closingTime: "17:00",
+        closingTime: '17:00',
         isClosed: false,
         alwaysOpen: false,
         sortOrder: 5,
@@ -248,48 +248,48 @@ describe("getGroupedOpeningHours", () => {
       saturday: {
         isClosed: true,
         alwaysOpen: false,
-        openingTime: "",
+        openingTime: '',
-        closingTime: "",
+        closingTime: '',
         sortOrder: 6,
       },
       sunday: {
         isClosed: true,
         alwaysOpen: false,
-        openingTime: "",
+        openingTime: '',
-        closingTime: "",
+        closingTime: '',
         sortOrder: 7,
       },
     }
     const result = getGroupedOpeningHours(someAlwaysOpen, mockIntl)
     expect(result).toEqual([
-      "Monday-Tuesday: Always open",
+      'Monday-Tuesday: Always open',
-      "Wednesday-Friday: 09:00-17:00",
+      'Wednesday-Friday: 09:00-17:00',
-      "Saturday-Sunday: Closed",
+      'Saturday-Sunday: Closed',
     ])
   })
 
-  it("should handle missing days", () => {
+  it('should handle missing days', () => {
     const missingDays: RestaurantOpeningHours = {
       isActive: true,
-      name: "Opening hours",
+      name: 'Opening hours',
-      nameEnglish: "Opening hours",
+      nameEnglish: 'Opening hours',
       monday: {
-        openingTime: "09:00",
+        openingTime: '09:00',
-        closingTime: "17:00",
+        closingTime: '17:00',
         isClosed: false,
         alwaysOpen: false,
         sortOrder: 1,
       },
       wednesday: {
-        openingTime: "09:00",
+        openingTime: '09:00',
-        closingTime: "17:00",
+        closingTime: '17:00',
         isClosed: false,
         alwaysOpen: false,
         sortOrder: 3,
       },
       friday: {
-        openingTime: "09:00",
+        openingTime: '09:00',
-        closingTime: "17:00",
+        closingTime: '17:00',
         isClosed: false,
         alwaysOpen: false,
         sortOrder: 5,
@@ -297,34 +297,34 @@ describe("getGroupedOpeningHours", () => {
     }
     const result = getGroupedOpeningHours(missingDays, mockIntl)
     expect(result).toEqual([
-      "Monday: 09:00-17:00",
+      'Monday: 09:00-17:00',
-      "Wednesday: 09:00-17:00",
+      'Wednesday: 09:00-17:00',
-      "Friday: 09:00-17:00",
+      'Friday: 09:00-17:00',
     ])
   })
 
-  it("should not group non-consecutive days with same hours", () => {
+  it('should not group non-consecutive days with same hours', () => {
     const nonConsecutiveSameHours: RestaurantOpeningHours = {
       isActive: true,
-      name: "Opening hours",
+      name: 'Opening hours',
-      nameEnglish: "Opening hours",
+      nameEnglish: 'Opening hours',
       monday: {
-        openingTime: "09:00",
+        openingTime: '09:00',
-        closingTime: "17:00",
+        closingTime: '17:00',
         isClosed: false,
         alwaysOpen: false,
         sortOrder: 1,
       },
       tuesday: {
-        openingTime: "10:00",
+        openingTime: '10:00',
-        closingTime: "18:00",
+        closingTime: '18:00',
         isClosed: false,
         alwaysOpen: false,
         sortOrder: 2,
       },
       wednesday: {
-        openingTime: "09:00",
+        openingTime: '09:00',
-        closingTime: "17:00",
+        closingTime: '17:00',
         isClosed: false,
         alwaysOpen: false,
         sortOrder: 3,
@@ -332,34 +332,34 @@ describe("getGroupedOpeningHours", () => {
     }
     const result = getGroupedOpeningHours(nonConsecutiveSameHours, mockIntl)
     expect(result).toEqual([
-      "Monday: 09:00-17:00",
+      'Monday: 09:00-17:00',
-      "Tuesday: 10:00-18:00",
+      'Tuesday: 10:00-18:00',
-      "Wednesday: 09:00-17:00",
+      'Wednesday: 09:00-17:00',
     ])
   })
 
-  it("should handle nullable opening/closing times", () => {
+  it('should handle nullable opening/closing times', () => {
     const nullableHours: RestaurantOpeningHours = {
       isActive: true,
-      name: "Opening hours",
+      name: 'Opening hours',
-      nameEnglish: "Opening hours",
+      nameEnglish: 'Opening hours',
       monday: {
-        openingTime: "",
+        openingTime: '',
-        closingTime: "",
+        closingTime: '',
         isClosed: true,
         alwaysOpen: false,
         sortOrder: 1,
       },
       tuesday: {
-        openingTime: "09:00",
+        openingTime: '09:00',
-        closingTime: "",
+        closingTime: '',
         isClosed: false,
         alwaysOpen: false,
         sortOrder: 2,
       },
       wednesday: {
-        openingTime: "",
+        openingTime: '',
-        closingTime: "17:00",
+        closingTime: '17:00',
         isClosed: false,
         alwaysOpen: false,
         sortOrder: 3,
@@ -367,27 +367,27 @@ describe("getGroupedOpeningHours", () => {
     }
     const result = getGroupedOpeningHours(nullableHours, mockIntl)
     expect(result).toEqual([
-      "Monday: Closed",
+      'Monday: Closed',
       // Tuesday and Wednesday won't appear in the result because they have empty string values
       // that don't match any of the conditions in the getGroupedOpeningHours function
     ])
   })
 
-  it("should handle inactive restaurant hours", () => {
+  it('should handle inactive restaurant hours', () => {
     const inactiveHours: RestaurantOpeningHours = {
       isActive: false,
-      name: "Opening hours",
+      name: 'Opening hours',
-      nameEnglish: "Opening hours",
+      nameEnglish: 'Opening hours',
       monday: {
-        openingTime: "09:00",
+        openingTime: '09:00',
-        closingTime: "17:00",
+        closingTime: '17:00',
         isClosed: false,
         alwaysOpen: false,
         sortOrder: 1,
       },
       tuesday: {
-        openingTime: "09:00",
+        openingTime: '09:00',
-        closingTime: "17:00",
+        closingTime: '17:00',
         isClosed: false,
         alwaysOpen: false,
         sortOrder: 2,
@@ -396,6 +396,6 @@ describe("getGroupedOpeningHours", () => {
     // Even though isActive is false, the function should still process the hours
     // as it doesn't check for the isActive flag
     const result = getGroupedOpeningHours(inactiveHours, mockIntl)
-    expect(result).toEqual(["Monday-Tuesday: 09:00-17:00"])
+    expect(result).toEqual(['Monday-Tuesday: 09:00-17:00'])
   })
 })

packages/design-system/lib/components/OpeningHours/openingHoursTypes.ts

@@ -0,0 +1,20 @@
+type OpeningHoursDetails = {
+  alwaysOpen: boolean
+  closingTime: string
+  isClosed: boolean
+  openingTime: string
+  sortOrder: number
+}
+
+export type OpeningHours = {
+  name: string
+  isActive: boolean
+  nameEnglish: string
+  monday?: OpeningHoursDetails
+  tuesday?: OpeningHoursDetails
+  wednesday?: OpeningHoursDetails
+  thursday?: OpeningHoursDetails
+  friday?: OpeningHoursDetails
+  saturday?: OpeningHoursDetails
+  sunday?: OpeningHoursDetails
+}

packages/design-system/lib/components/OpeningHours/utils.ts

@@ -1,61 +1,61 @@
-import { logger } from "@scandic-hotels/common/logger"
+import { logger } from '@scandic-hotels/common/logger'
 
-import type { RestaurantOpeningHours } from "@scandic-hotels/trpc/types/hotel"
+import type { IntlShape } from 'react-intl'
-import type { IntlShape } from "react-intl"
+import { OpeningHours } from './openingHoursTypes'
 
 export function getGroupedOpeningHours(
-  openingHours: RestaurantOpeningHours,
+  openingHours: OpeningHours,
   intl: IntlShape
 ): string[] {
   const closedMsg = intl.formatMessage({
-    defaultMessage: "Closed",
+    defaultMessage: 'Closed',
   })
   const alwaysOpenMsg = intl.formatMessage({
-    defaultMessage: "Always open",
+    defaultMessage: 'Always open',
   })
 
   // In order
   const weekdayDefinitions = [
     {
-      key: "monday",
+      key: 'monday',
       label: intl.formatMessage({
-        defaultMessage: "Monday",
+        defaultMessage: 'Monday',
       }),
     },
     {
-      key: "tuesday",
+      key: 'tuesday',
       label: intl.formatMessage({
-        defaultMessage: "Tuesday",
+        defaultMessage: 'Tuesday',
       }),
     },
     {
-      key: "wednesday",
+      key: 'wednesday',
       label: intl.formatMessage({
-        defaultMessage: "Wednesday",
+        defaultMessage: 'Wednesday',
       }),
     },
     {
-      key: "thursday",
+      key: 'thursday',
       label: intl.formatMessage({
-        defaultMessage: "Thursday",
+        defaultMessage: 'Thursday',
       }),
     },
     {
-      key: "friday",
+      key: 'friday',
       label: intl.formatMessage({
-        defaultMessage: "Friday",
+        defaultMessage: 'Friday',
       }),
     },
     {
-      key: "saturday",
+      key: 'saturday',
       label: intl.formatMessage({
-        defaultMessage: "Saturday",
+        defaultMessage: 'Saturday',
       }),
     },
     {
-      key: "sunday",
+      key: 'sunday',
       label: intl.formatMessage({
-        defaultMessage: "Sunday",
+        defaultMessage: 'Sunday',
       }),
     },
   ] as const
@@ -63,7 +63,7 @@ export function getGroupedOpeningHours(
   const groupedOpeningHours: string[] = []
 
   let rangeWeekdays: string[] = []
-  let rangeValue = ""
+  let rangeValue = ''
 
   for (let i = 0, n = weekdayDefinitions.length; i < n; ++i) {
     const weekdayDefinition = weekdayDefinitions[i]
@@ -91,7 +91,7 @@ export function getGroupedOpeningHours(
         } else {
           if (rangeValue) {
             groupedOpeningHours.push(
-              `${rangeWeekdays.join("-")}: ${rangeValue}`
+              `${rangeWeekdays.join('-')}: ${rangeValue}`
             )
           }
           rangeValue = newValue
@@ -100,11 +100,11 @@ export function getGroupedOpeningHours(
       }
       if (rangeValue && i === n - 1) {
         // Flush everything at the end
-        groupedOpeningHours.push(`${rangeWeekdays.join("-")}: ${rangeValue}`)
+        groupedOpeningHours.push(`${rangeWeekdays.join('-')}: ${rangeValue}`)
       }
     } else if (rangeValue) {
-      groupedOpeningHours.push(`${rangeWeekdays.join("-")}: ${rangeValue}`)
+      groupedOpeningHours.push(`${rangeWeekdays.join('-')}: ${rangeValue}`)
-      rangeValue = ""
+      rangeValue = ''
       rangeWeekdays = []
     }
   }
@@ -113,59 +113,59 @@ export function getGroupedOpeningHours(
 
 export function getTranslatedName(name: string, intl: IntlShape) {
   switch (name) {
-    case "Breakfast":
+    case 'Breakfast':
       return intl.formatMessage({
-        defaultMessage: "Breakfast",
+        defaultMessage: 'Breakfast',
       })
-    case "Brunch":
+    case 'Brunch':
       return intl.formatMessage({
-        defaultMessage: "Brunch",
+        defaultMessage: 'Brunch',
       })
-    case "After Work":
+    case 'After Work':
       return intl.formatMessage({
-        defaultMessage: "After Work",
+        defaultMessage: 'After Work',
       })
-    case "Cafe":
+    case 'Cafe':
       return intl.formatMessage({
-        defaultMessage: "Cafe",
+        defaultMessage: 'Cafe',
       })
-    case "Lunch":
+    case 'Lunch':
       return intl.formatMessage({
-        defaultMessage: "Lunch",
+        defaultMessage: 'Lunch',
       })
-    case "Dinner":
+    case 'Dinner':
       return intl.formatMessage({
-        defaultMessage: "Dinner",
+        defaultMessage: 'Dinner',
       })
-    case "Bar":
+    case 'Bar':
       return intl.formatMessage({
-        defaultMessage: "Bar",
+        defaultMessage: 'Bar',
       })
-    case "Snacks & drinks":
+    case 'Snacks & drinks':
       return intl.formatMessage({
-        defaultMessage: "Snacks & drinks",
+        defaultMessage: 'Snacks & drinks',
       })
-    case "Takeaway":
+    case 'Takeaway':
       return intl.formatMessage({
-        defaultMessage: "Takeaway",
+        defaultMessage: 'Takeaway',
       })
-    case "Changes":
+    case 'Changes':
       return intl.formatMessage({
-        defaultMessage: "Changes",
+        defaultMessage: 'Changes',
       })
-    case "Live events":
+    case 'Live events':
       return intl.formatMessage({
-        defaultMessage: "Live events",
+        defaultMessage: 'Live events',
       })
-    case "Terrace":
+    case 'Terrace':
       return intl.formatMessage({
-        defaultMessage: "Terrace",
+        defaultMessage: 'Terrace',
       })
     default:
       logger.warn(`Unsupported name given: ${name}`)
 
       return intl.formatMessage({
-        defaultMessage: "N/A",
+        defaultMessage: 'N/A',
       })
   }
 }

packages/design-system/package.json

@@ -31,6 +31,7 @@
     "./Label": "./lib/components/Label/index.tsx",
     "./Link": "./lib/components/Link/index.tsx",
     "./OldDSButton": "./lib/components/OldDSButton/index.tsx",
+    "./OpeningHours": "./lib/components/OpeningHours/index.tsx",
     "./Select": "./lib/components/Select/index.tsx",
     "./SkeletonShimmer": "./lib/components/SkeletonShimmer/index.tsx",
     "./SidePeek": "./lib/components/SidePeek/index.tsx",