feat(SW-375): new tokens

new asset generation logic BREAKING CHANGE: New tokens.
2025-01-20 14:46:25 +01:00
parent 7ce2ee2922
commit 56973888c9
189 changed files with 34368 additions and 10344 deletions
@@ -0,0 +1,72 @@
+import { Button } from '@scandic-hotels/design-system/Button'
+import { Chips } from '@scandic-hotels/design-system/Chips'
+import { ChipButton } from '@scandic-hotels/design-system/ChipButton'
+import { ChipLink } from '@scandic-hotels/design-system/ChipLink'
+import { Typography } from '@scandic-hotels/design-system/Typography'
+
+import styles from './header.module.css'
+
+import type { PressEvent } from 'react-aria-components'
+
+export function Header() {
+  const onPress = (e: PressEvent) => alert(e.target.innerHTML)
+  const onClick = (e: React.MouseEvent<HTMLAnchorElement>) =>
+    alert(`Link to: ${e.currentTarget.href}`)
+
+  return (
+    <header className={styles.header}>
+      <Typography variant="Title/lg">
+        <h1 className={styles.title}>Nyhavn</h1>
+      </Typography>
+      <div className={styles.intro}>
+        <Typography variant="Body/Paragraph/mdRegular">
+          <p className={styles.introText}>
+            Welcome to Nyhavn, Copenhagen's captivating waterfront district!
+            Explore this vibrant area known for its colorful 17th-century
+            townhouses, historic wooden ships, and lively atmosphere. Nyhavn is
+            the perfect spot for dining, culture, and picturesque views, making
+            it a must-visit for every Copenhagen traveler.
+          </p>
+        </Typography>
+        <span>
+          <Button
+            variant="Tertiary"
+            size="Medium"
+            typography="Body/Paragraph/mdBold"
+          >
+            Explore nearby hotels
+          </Button>
+        </span>
+      </div>
+
+      <div className={styles.chips}>
+        <Chips>
+          <ChipButton onPress={onPress}>Restaurants and bars</ChipButton>
+          <ChipLink onClick={onClick} href="/kristianshavn">
+            Kristianshavn
+          </ChipLink>
+          <ChipButton onPress={onPress}>Tivoli Gardens</ChipButton>
+          <ChipLink onClick={onClick} href="/copenhagen">
+            See all Copenhagen
+          </ChipLink>
+          <ChipButton onPress={onPress}>See all Copenhagen</ChipButton>
+          <ChipLink onClick={onClick} href="/copenhagen">
+            See all Copenhagen
+          </ChipLink>
+          <ChipButton onPress={onPress}>See all Copenhagen</ChipButton>
+          <ChipLink onClick={onClick} href="/copenhagen">
+            See all Copenhagen
+          </ChipLink>
+          <ChipButton onPress={onPress}>See all Copenhagen</ChipButton>
+          <ChipLink onClick={onClick} href="/copenhagen">
+            See all Copenhagen
+          </ChipLink>
+          <ChipButton onPress={onPress}>See all Copenhagen</ChipButton>
+          <ChipLink onClick={onClick} href="/copenhagen">
+            See all Copenhagen
+          </ChipLink>
+        </Chips>
+      </div>
+    </header>
+  )
+}