feat(BOOK-768): Added UspCard component with stories and implemented it in blocks

Approved-by: Bianca Widstam
This commit is contained in:
Erik Tiekstra
2026-01-28 07:47:15 +00:00
parent 22b0f71c16
commit 0d357a116b
10 changed files with 222 additions and 34 deletions

View File

@@ -1,18 +1,10 @@
import { IconByIconName } from "@scandic-hotels/design-system/Icons/IconByIconName"
import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
import { getUspIconName } from "./utils"
import { UspCard } from "@scandic-hotels/design-system/UspCard"
import styles from "./uspgrid.module.css"
import type { UspGridProps, UspIcon } from "@/types/components/blocks/uspGrid"
import type { UspGrid as UspGridType } from "@scandic-hotels/trpc/types/blocks"
function UspIcon({ icon }: { icon: UspIcon }) {
const iconName = getUspIconName(icon)
return iconName ? (
<IconByIconName iconName={iconName} color="Icon/Interactive/Accent" />
) : null
}
interface UspGridProps extends Pick<UspGridType, "usp_grid"> {}
export default function UspGrid({ usp_grid }: UspGridProps) {
return (
@@ -20,13 +12,13 @@ export default function UspGrid({ usp_grid }: UspGridProps) {
{usp_grid.usp_card.map(
(usp) =>
usp.text.json && (
<div key={usp.text.json.uid} className={styles.usp}>
<UspIcon icon={usp.icon} />
<JsonToHtml
embeds={usp.text.embedded_itemsConnection?.edges}
nodes={usp.text.json.children}
/>
</div>
<UspCard
className={styles.uspCard}
key={usp.text.json.uid}
iconName={usp.icon}
embeds={usp.text.embedded_itemsConnection.edges}
nodes={usp.text.json.children}
/>
)
)}
</div>