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

Approved-by: Bianca Widstam

packages/design-system/lib/components/UspCard/UspCard.tsx

@@ -0,0 +1,36 @@
+import { cx } from "class-variance-authority"
+
+import { IconByIconName } from "../Icons/IconByIconName"
+import { type Embeds, JsonToHtml, type Node } from "../JsonToHtml/JsonToHtml"
+import type { RTENode } from "../JsonToHtml/types/rte/node"
+import { getUspIconName, UspIconName } from "./utils"
+
+import styles from "./uspCard.module.css"
+
+interface UspCardProps extends React.HTMLAttributes<HTMLDivElement> {
+  iconName?: UspIconName | null
+  embeds: Node<Embeds>[]
+  nodes: RTENode[]
+}
+
+export function UspCard({
+  className,
+  iconName,
+  embeds,
+  nodes,
+  ...props
+}: UspCardProps) {
+  const resolvedIconName = getUspIconName(iconName)
+
+  return (
+    <div className={cx(styles.uspCard, className)} {...props}>
+      <IconByIconName
+        className={styles.icon}
+        iconName={resolvedIconName}
+        color="Icon/Interactive/Accent"
+        size={48}
+      />
+      <JsonToHtml embeds={embeds} nodes={nodes} />
+    </div>
+  )
+}