Merged in feat/sw-3225-move-parking-information-to-booking-flow (pull request #2614)

feat(SW-3225): Move ParkingInformation to design-system

* Inline ParkingInformation types to remove trpc dependency

* Move ParkingInformation to design-system

* Move numberFormatting to common package

* Add deps to external

* Fix imports and i18n script

* Add common as dependency

* Merge branch 'master' into feat/sw-3225-move-parking-information-to-booking-flow


Approved-by: Linus Flood

packages/design-system/lib/components/ParkingInformation/ParkingList/index.tsx

@@ -0,0 +1,88 @@
+'use client'
+
+import { useIntl } from 'react-intl'
+
+import { Typography } from '../../Typography'
+
+import styles from './parkingList.module.css'
+
+import type { Parking } from '../parkingInformationTypes'
+
+type ParkingListProps = Pick<
+  Parking,
+  | 'address'
+  | 'canMakeReservation'
+  | 'distanceToHotel'
+  | 'numberOfChargingSpaces'
+  | 'numberOfParkingSpots'
+>
+
+export default function ParkingList({
+  numberOfChargingSpaces,
+  canMakeReservation,
+  numberOfParkingSpots,
+  distanceToHotel,
+  address,
+}: ParkingListProps) {
+  const intl = useIntl()
+
+  const canMakeReservationYesMsg = intl.formatMessage({
+    defaultMessage: 'Parking can be reserved in advance: Yes',
+  })
+  const canMakeReservationNoMsg = intl.formatMessage({
+    defaultMessage: 'Parking can be reserved in advance: No',
+  })
+
+  return (
+    <Typography variant="Body/Paragraph/mdRegular">
+      <ul className={styles.listStyling}>
+        {numberOfChargingSpaces ? (
+          <li>
+            {intl.formatMessage(
+              {
+                defaultMessage:
+                  'Number of charging points for electric cars: {number}',
+              },
+              { number: numberOfChargingSpaces }
+            )}
+          </li>
+        ) : null}
+        <li>
+          {canMakeReservation
+            ? canMakeReservationYesMsg
+            : canMakeReservationNoMsg}
+        </li>
+        {numberOfParkingSpots ? (
+          <li>
+            {intl.formatMessage(
+              {
+                defaultMessage: 'Number of parking spots: {number}',
+              },
+              { number: numberOfParkingSpots }
+            )}
+          </li>
+        ) : null}
+        {distanceToHotel ? (
+          <li>
+            {intl.formatMessage(
+              {
+                defaultMessage: 'Distance to hotel: {distanceInM} m',
+              },
+              { distanceInM: distanceToHotel }
+            )}
+          </li>
+        ) : null}
+        {address ? (
+          <li>
+            {intl.formatMessage(
+              {
+                defaultMessage: 'Address: {address}',
+              },
+              { address }
+            )}
+          </li>
+        ) : null}
+      </ul>
+    </Typography>
+  )
+}

packages/design-system/lib/components/ParkingInformation/ParkingList/parkingList.module.css

@@ -0,0 +1,11 @@
+.listStyling {
+  list-style-type: none;
+}
+
+.listStyling > li::before {
+  content: url('/_static/icons/heart.svg');
+  position: relative;
+  height: 8px;
+  top: 3px;
+  margin-right: var(--Spacing-x1);
+}