Merged in feature/transpile-design-system (pull request #2621)

Feature/transpile design system

* remove example, we should use storybook instead

* remove example, we should use storybook instead

* css-modules cannot have :root, moved affected css-variables to globals.css

* .

* scandic-web no longer depends on design-system#build

* * Update readme
* Remove test code


Approved-by: Anton Gunnarsson
This commit is contained in:
Joakim Jäderberg
2025-08-12 09:07:33 +00:00
parent 011f191c65
commit 855f795d50
44 changed files with 164 additions and 779 deletions

View File

@@ -2,11 +2,7 @@
This repo contains the design system for Scandic Hotels.
It is built on Vite.
The output is an NPM package.
It is currently not published to any registry. Consumers are free to choose how to consume the distribution.
Consumption is done via `transpilePackages` in Next.js.
## The stack
@@ -18,78 +14,16 @@ It is currently not published to any registry. Consumers are free to choose how
## Usage
Most of the components in this design system are self explanatory, refer to the Storybook for reference and use cases.
Refer to the Storybook for reference and use cases.
However there are some components that benefit from a bit more documentation and these have more documentation attached to their Storybook.
### Scripts
One such notable component is the `Typography` component. Read the documentation in the docs for the components story in Storybook at `lib/components/Typography/Typography.docs.mdx` or read it in the deployed Storybook in a browser. For example: https://design-system-scandic-hotels.netlify.app/?path=/docs/components-typography--docs
## Contributing
- Clone the repository.
- Do your changes.
- Build the project.
- Push the build output to origin.
### Clone the repository
To get started with the project, clone the repository and install the dependencies:
```bash
git clone git@bitbucket.org:scandic-swap/web.git
cd web
yarn
```
### Do your changes
Work your magic.
### Build the project
```bash
yarn workspace @scandic-hotels/design-system build
```
### Push the build output to origin
```bash
git add packages/design-system/
git commit
git push
```
## Main script targets
Run the following script targets either from the project root with:
```bash
yarn workspace @scandic-hotels/design-system <script target>
```
Or run them from the package directory:
```bash
cd packages/design-system
yarn <script target>
```
Both approaches give the same result.
### Develop
| Script target | Action |
| ------------- | ------------------------------------------------------------------------------------------------------------------------------ |
| `dev` | Runs the example project through Vite in dev mode. This command will start a local development server that serves `./example`. |
| `storybook` | Starts the Storybook server and launches into the Storybook UI. |
| `lint` | Lints the codebase using ESLint and TypeScript. |
| `lint:fix` | Automatically fixes linting issues wherever possible. |
### Build
| Script target | Action |
| ------------- | ---------------------------------------------------- |
| `build` | Builds the design system distribution into `./dist`. |
| Script target | Action |
| ------------- | --------------------------------------------------------------- |
| `dev` | Starts the Storybook server and launches into the Storybook UI. |
| `build` | Builds the Storybook |
| `lint` | Lints the codebase using ESLint and TypeScript. |
| `lint:fix` | Automatically fixes linting issues wherever possible. |
## Project Structure
@@ -98,7 +32,6 @@ Both approaches give the same result.
```
├── .storybook/ # Storybook scaffolding
├── dist/ # The build output
├── example/ # The example project consuming the build output
├── generate/ # The code that generates the design system tokens output
├── lib/ # The design system source (tokens, components, etc.)
├── public/ # Public asset folder

View File

@@ -1,70 +0,0 @@
import { Button } from '@scandic-hotels/design-system/Button'
import { ChipButton } from '@scandic-hotels/design-system/ChipButton'
import { ChipLink } from '@scandic-hotels/design-system/ChipLink'
import { Chips } from '@scandic-hotels/design-system/Chips'
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)
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 onPress={onPress} href="/kristianshavn">
Kristianshavn
</ChipLink>
<ChipButton onPress={onPress}>Tivoli Gardens</ChipButton>
<ChipLink onPress={onPress} href="/copenhagen">
See all Copenhagen
</ChipLink>
<ChipButton onPress={onPress}>See all Copenhagen</ChipButton>
<ChipLink onPress={onPress} href="/copenhagen">
See all Copenhagen
</ChipLink>
<ChipButton onPress={onPress}>See all Copenhagen</ChipButton>
<ChipLink onPress={onPress} href="/copenhagen">
See all Copenhagen
</ChipLink>
<ChipButton onPress={onPress}>See all Copenhagen</ChipButton>
<ChipLink onPress={onPress} href="/copenhagen">
See all Copenhagen
</ChipLink>
<ChipButton onPress={onPress}>See all Copenhagen</ChipButton>
<ChipLink onPress={onPress} href="/copenhagen">
See all Copenhagen
</ChipLink>
</Chips>
</div>
</header>
)
}

View File

@@ -1,31 +0,0 @@
.header {
background: var(--Surface-Secondary-Default);
display: flex;
flex-direction: column;
padding-top: var(--Space-x4);
padding-bottom: var(--Space-x5);
}
.header > * {
width: 1196px; /* TODO: Magic number, revisit */
margin: 0 auto;
}
.title {
padding-top: var(--Space-x4);
padding-bottom: var(--Space-x3);
}
.intro {
display: flex;
flex-direction: column;
gap: var(--Space-x3);
}
.introText {
max-width: 792px; /* TODO: Magic number, revisit */
}
.chips {
padding-top: var(--Space-x4);
}

View File

@@ -1 +0,0 @@
export { Header } from './Header'

View File

@@ -1,9 +0,0 @@
import styles from './hero.module.css'
export function Hero() {
return (
<div className={styles.hero}>
<img className={styles.image} src="/img/img1.jpg" alt="Nyhavn" />
</div>
)
}

View File

@@ -1,11 +0,0 @@
.hero {
padding: var(--Space-x4) 0;
}
.image {
border-radius: var(--Corner-radius-xl);
display: block;
width: 100%;
height: 480px; /* TODO: Magic number, revisit */
object-fit: cover;
}

View File

@@ -1 +0,0 @@
export { Hero } from './Hero'

View File

@@ -1,17 +0,0 @@
import { Hero } from '../Hero'
import { RichTextEditorContent } from '../RichTextEditorContent'
import { Sidebar } from '../Sidebar'
import styles from './main.module.css'
export function Main() {
return (
<main className={styles.main}>
<Hero />
<div className={styles.content}>
<RichTextEditorContent />
<Sidebar />
</div>
</main>
)
}

View File

@@ -1 +0,0 @@
export { Main } from './Main'

View File

@@ -1,18 +0,0 @@
.main {
display: flex;
flex-direction: column;
padding-top: var(--Space-x4);
padding-bottom: var(--Space-x9);
}
.main > * {
width: 1196px; /* TODO: Magic number, revisit */
margin: 0 auto;
}
.content {
padding-top: var(--Space-x4);
display: grid;
grid-template-columns: 792px 1fr; /* TODO: Magic number, revisit */
gap: var(--Space-x9);
}

View File

@@ -1,71 +0,0 @@
import { Typography } from '@scandic-hotels/design-system/Typography'
import styles from './ricth-text-editor-content.module.css'
export function RichTextEditorContent() {
return (
<div className={styles.container}>
<Typography variant="Title/md">
<h2>The new harbor in Copenhagen</h2>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<p>
The old harbour district was excavated in the late 17th century and
since the harbour would serve as a supplement to the existing harbour,
it was given the name The New Harbour (Den Nye Havn later became
Nyhavn). Ships from around the world arrived here, and Nyhavn
therefore became a mecca for traders and craftsmen.
</p>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<p>
Today, the maritime life from the 17th century is long gone although
you can still find old tattoo shops and pubs, reminiscent of days gone
by.
</p>
</Typography>
<Typography variant="Title/Subtitle/lg">
<h3>The buildings in Nyhavn</h3>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<p>
The beautiful old buildings in Nyhavn are made up of civic buildings
and warehouses from the 17th and 18th centuries. Painted in beautiful
colours they are the subject of many postcards and holiday photos. The
oldest building in Nyhavn is No. 9 dating from 1681. It has not
undergone any renovation or extensions and stands as it did when it
was built. The houses in Nyhavn are still residences and in most of
them you'll find cafes, bars and restaurants.
</p>
</Typography>
<img src="/img/img2.jpg" alt="Nyhavn" />
<Typography variant="Title/Subtitle/lg">
<h3>Hans Christian Andersen's Nyhavn</h3>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<p>
Hans Christian Andersen, the famed Danish storyteller, spent many
years of his life in Nyhavn, drawing inspiration from its lively
atmosphere and picturesque setting. Andersen lived in several houses
along the waterfront, notably at numbers 20, 67, and 18, where he
penned some of his most famous fairy tales. Nyhavn's vibrant mix of
sailors, bustling cafes, and the eclectic crowd fueled his
imagination, contributing to the creation of timeless stories that
continue to enchant readers worldwide.
</p>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<p>
Today, Nyhavn preserves the memory of Andersen with plaques marking
his residences and a statue nearby, inviting visitors to walk in the
footsteps of the literary giant. The area remains as colorful and
spirited as it was during Andersen's time, reflecting the essence of
his tales in its cobbled streets and bright facades. Walking through
Nyhavn, one can almost hear the echoes of his stories, woven into the
fabric of the place, making it a pilgrimage site for lovers of
literature and history alike.
</p>
</Typography>
</div>
)
}

View File

@@ -1 +0,0 @@
export { RichTextEditorContent } from './RichTextEditorContent'

View File

@@ -1,21 +0,0 @@
.container {
display: flex;
flex-direction: column;
gap: var(--Space-x15);
}
.container h2 + p {
padding-top: var(--Space-x05);
}
.container p + h2,
.container p + h3,
.container p + h4,
.container p + h5 {
padding-top: var(--Space-x15);
}
.container img {
padding: var(--Space-x15) 0;
border-radius: var(--Corner-radius-md);
}

View File

@@ -1,3 +0,0 @@
export function Sidebar() {
return <div>Sidebar</div>
}

View File

@@ -1 +0,0 @@
export { Sidebar } from './Sidebar'

View File

@@ -1,11 +0,0 @@
import { Main } from './Main'
import { Header } from './Header'
export function ContentPage() {
return (
<>
<Header />
<Main />
</>
)
}

View File

@@ -1,18 +0,0 @@
import { Button } from '@scandic-hotels/design-system/Button'
import styles from './hero.module.css'
export function Hero() {
return (
<div className={styles.hero}>
<img
className={styles.image}
src="/img/Hotelpage_mobile/Scandic_Couple_Friends_Lobby 6.png"
alt=""
/>
<Button className={styles.button} typography="Body/Paragraph/mdBold">
See all photos
</Button>
</div>
)
}

View File

@@ -1,17 +0,0 @@
.hero {
position: relative;
}
.image {
border-radius: var(--Corner-radius-md);
display: block;
width: 100%;
height: 270px; /* TODO: Magic number, revisit */
object-fit: cover;
}
.button {
position: absolute;
bottom: 16.6px; /* TODO: Magic number, revisit */
right: 15px; /* TODO: Magic number, revisit */
}

View File

@@ -1 +0,0 @@
export { Hero } from './Hero'

View File

@@ -1,39 +0,0 @@
import { Button } from '@scandic-hotels/design-system/Button'
import { Typography } from '@scandic-hotels/design-system/Typography'
import { Hero } from './Hero'
import styles from './hotel-page.module.css'
export function HotelPage() {
return (
<div className={styles.page}>
<Hero />
<div className={styles.intro}>
<Typography variant="Title/lg">
<h1>Scandic Helsinki Hub</h1>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<p>Annankatu 18, Helsinki (0km to city centre)</p>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<a href="#">4.1 (95 reviews on tripadvisor)</a>
</Typography>
</div>
<div className={styles.preamble}>
<Typography variant="Body/Paragraph/mdRegular">
<p>
Modern urban hotel in a impressive 1920s printing house next to the
Old Church Park in Helsinki city centre. Loft-style rooms, an
inviting restaurant area and inspiring setting for a relaxed stay.
</p>
</Typography>
<span>
<Button variant="Text" typography="Body/Paragraph/mdBold">
Read more about the hotel
</Button>
</span>
</div>
</div>
)
}

View File

@@ -1,18 +0,0 @@
.page {
display: flex;
flex-direction: column;
gap: var(--Space-x3);
padding: var(--Space-x3) var(--Space-x2);
}
.intro {
display: flex;
flex-direction: column;
gap: var(--Space-x1);
}
.preamble {
display: flex;
flex-direction: column;
gap: var(--Space-x05);
}

View File

@@ -1 +0,0 @@
export { HotelPage } from './HotelPage'

View File

@@ -1,54 +0,0 @@
import { useState } from 'react'
import { Typography } from '@scandic-hotels/design-system/Typography'
import { ThemeSwitcher } from './ThemeSwitcher'
import { ContentPage } from './ContentPage'
import styles from './main.module.css'
import { HotelPage } from './HotelPage'
export function Main() {
const [theme, setTheme] = useState('scandic')
const pathname = window.location.pathname
return (
<>
<div className={styles.wrap}>
<ThemeSwitcher
defaultSelectedKey={theme}
onSelectionChange={(key) => {
setTheme(key.toString())
}}
/>
<nav>
<ul className={styles.nav}>
<li>
<a href="/content-page">Content page</a>
</li>
<li>
<a href="/hotel-page">Hotel page</a>
</li>
</ul>
</nav>
</div>
<div className={[styles.page, theme].join(' ')}>
{/* poor mans routing */}
{pathname === '/content-page' && <ContentPage />}
{pathname === '/hotel-page' && <HotelPage />}
{pathname === '/' && (
<>
<Typography variant="Title/lg">
<h1>Examples</h1>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<p>Select a page</p>
</Typography>
</>
)}
</div>
</>
)
}

View File

@@ -1,40 +0,0 @@
import { ComponentPropsWithoutRef } from 'react'
import {
Button,
Label,
ListBox,
ListBoxItem,
Popover,
Select,
SelectValue,
} from 'react-aria-components'
import { themes } from '../../.storybook/preview'
type ThemeSwitcherProps = Pick<
ComponentPropsWithoutRef<typeof Select>,
'defaultSelectedKey' | 'onSelectionChange'
>
export function ThemeSwitcher(props: ThemeSwitcherProps) {
return (
<Select {...props}>
<Label>Theme: </Label>
<Button>
<SelectValue />
<span aria-hidden="true"></span>
</Button>
<Popover style={{ border: 'solid 1px #000', background: '#fff' }}>
<ListBox>
{Array.from(Object.entries(themes.themes)).map(([label, key]) => {
return (
<ListBoxItem key={key} id={key} style={{ padding: '0.5em' }}>
{label}
</ListBoxItem>
)
})}
</ListBox>
</Popover>
</Select>
)
}

View File

@@ -1,17 +0,0 @@
.page {
background-color: var(--Background-Primary);
min-height: 100vh;
}
.wrap {
padding: 1em;
display: flex;
justify-content: center;
}
.nav {
list-style: none;
display: flex;
flex-direction: row;
gap: 1em;
}

View File

@@ -1,17 +0,0 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Vite + React + TS</title>
<style>
body {
font-family: 'fira sans', sans-serif;
}
</style>
</head>
<body>
<div id="root"></div>
<script type="module" src="index.tsx"></script>
</body>
</html>

View File

@@ -1,13 +0,0 @@
import React from 'react'
import ReactDOM from 'react-dom/client'
import '@scandic-hotels/design-system/style.css'
import '@scandic-hotels/design-system/fonts.css'
import { Main } from './components/Main'
ReactDOM.createRoot(document.getElementById('root')!).render(
<React.StrictMode>
<Main />
</React.StrictMode>
)

View File

@@ -1,15 +0,0 @@
/// <reference types="vitest" />
import { resolve } from 'node:path'
import react from '@vitejs/plugin-react'
import { defineConfig } from 'vite'
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
publicDir: resolve(__dirname, '../public'),
server: {
open: './index.html',
},
})

View File

@@ -1,12 +1,3 @@
:root {
--max-width-navigation: 89.5rem;
--max-width-spacing: calc(var(--Space-x2) * 2);
--max-width-page: min(
calc(100dvw - var(--max-width-spacing)),
var(--max-width-navigation)
);
}
.overlay {
background: rgba(0, 0, 0, 0.5);
height: var(--visual-viewport-height);
@@ -70,9 +61,6 @@
}
@media screen and (min-width: 768px) {
:root {
--max-width-spacing: calc(var(--Space-x3) * 2);
}
.overlay {
display: flex;
justify-content: center;
@@ -91,9 +79,3 @@
max-height: 90dvh;
}
}
@media screen and (min-width: 1367px) {
:root {
--max-width-spacing: calc(var(--Space-x5) * 2);
}
}

View File

@@ -1,6 +1,2 @@
@value inputContainerHeight: 56px;
@value inputExpandedHeight: 24px;
* {
margin: 0;
}

View File

@@ -4,140 +4,140 @@
"version": "1.0.0-beta.1",
"type": "module",
"exports": {
"./Accordion": "./dist/components/Accordion/index.js",
"./Accordion/AccordionItem": "./dist/components/Accordion/AccordionItem/index.js",
"./BackToTopButton": "./dist/components/BackToTopButton/index.js",
"./Body": "./dist/components/Body/index.js",
"./Button": "./dist/components/Button/index.js",
"./ButtonLink": "./dist/components/ButtonLink/index.js",
"./Caption": "./dist/components/Caption/index.js",
"./Card": "./dist/components/Card/index.js",
"./ChipButton": "./dist/components/ChipButton/index.js",
"./ChipLink": "./dist/components/ChipLink/index.js",
"./Chips": "./dist/components/Chips/index.js",
"./DeprecatedSelect": "./dist/components/DeprecatedSelect/index.js",
"./Divider": "./dist/components/Divider/index.js",
"./Footnote": "./dist/components/Footnote/index.js",
"./Form/Checkbox": "./dist/components/Form/Checkbox/index.js",
"./Form/Country": "./dist/components/Form/Country/index.js",
"./Form/Date": "./dist/components/Form/Date/index.js",
"./Form/ErrorMessage": "./dist/components/Form/ErrorMessage/index.js",
"./Form/Phone": "./dist/components/Form/Phone/index.js",
"./Form/RadioCard": "./dist/components/Form/RadioCard/index.js",
"./IconChip": "./dist/components/IconChip/index.js",
"./Input": "./dist/components/Input/index.js",
"./Label": "./dist/components/Label/index.js",
"./OldDSButton": "./dist/components/OldDSButton/index.js",
"./Select": "./dist/components/Select/index.js",
"./SkeletonShimmer": "./dist/components/SkeletonShimmer/index.js",
"./SidePeek": "./dist/components/SidePeek/index.js",
"./SidePeek/SidePeekProvider": "./dist/components/SidePeek/SidePeekContext/SidePeekProvider.js",
"./Subtitle": "./dist/components/Subtitle/index.js",
"./Switch": "./dist/components/Switch/index.js",
"./Title": "./dist/components/Title/index.js",
"./Tooltip": "./dist/components/Tooltip/index.js",
"./Typography": "./dist/components/Typography/index.js",
"./RegularRateCard": "./dist/components/RateCard/Regular/index.js",
"./CampaignRateCard": "./dist/components/RateCard/Campaign/index.js",
"./CodeRateCard": "./dist/components/RateCard/Code/index.js",
"./PointsRateCard": "./dist/components/RateCard/Points/index.js",
"./Preamble": "./dist/components/Preamble/index.js",
"./NoRateAvailableCard": "./dist/components/RateCard/NoRateAvailable/index.js",
"./IconButton": "./dist/components/IconButton/index.js",
"./Icons": "./dist/components/Icons/index.js",
"./Icons/IconByCSSelect": "./dist/components/Icons/IconByCSSelect.js",
"./Icons/IconByIconName": "./dist/components/Icons/IconByIconName.js",
"./Icons/IllustrationByIconName": "./dist/components/Icons/IllustrationByIconName.js",
"./Icons/iconName": "./dist/components/Icons/iconName.js",
"./Icons/BathroomCabinetIcon": "./dist/components/Icons/Nucleo/Amenities_Facilities/bathroom-cabinet-2.js",
"./Icons/BedHotelIcon": "./dist/components/Icons/Customised/Amenities_Facilities/BedHotel.js",
"./Icons/BedIcon": "./dist/components/Icons/Illustrations/Bed.js",
"./Icons/BouquetIcon": "./dist/components/Icons/Nucleo/Benefits/bouquet.js",
"./Icons/BowlingPinsIcon": "./dist/components/Icons/Nucleo/Experiences/bowling-pins.js",
"./Icons/BunkBedIcon": "./dist/components/Icons/Customised/Amenities_Facilities/MdiBunkBedOutline.js",
"./Icons/ChipsIcon": "./dist/components/Icons/Nucleo/Food/chips-3.js",
"./Icons/CoinIcon": "./dist/components/Icons/Illustrations/Coin.js",
"./Icons/ConferenceRoomIcon": "./dist/components/Icons/Nucleo/Amenities_Facilities/conference-room.js",
"./Icons/CoolingIcon": "./dist/components/Icons/Customised/Amenities_Facilities/Cooling.js",
"./Icons/CouchTableIcon": "./dist/components/Icons/Customised/Amenities_Facilities/CouchTable.js",
"./Icons/CroissantCoffeeEggIcon": "./dist/components/Icons/Illustrations/CroissantCoffeeEgg.js",
"./Icons/CutleryOneIcon": "./dist/components/Icons/Illustrations/CutleryOne.js",
"./Icons/CutleryTwoIcon": "./dist/components/Icons/Illustrations/CutleryTwo.js",
"./Icons/DiamondAddIcon": "./dist/components/Icons/Customised/Benefits/DiamondAdd.js",
"./Icons/DiscountIcon": "./dist/components/Icons/Nucleo/Benefits/discount-2-2.js",
"./Icons/FilledDiscountIcon": "./dist/components/Icons/Nucleo/Benefits/FilledDiscount.js",
"./Icons/DoorIcon": "./dist/components/Icons/Nucleo/Amenities_Facilities/door-2.js",
"./Icons/DowntownCamperIcon": "./dist/components/Icons/Logos/DowntownCamper.js",
"./Icons/FacebookIcon": "./dist/components/Icons/Customised/Socials/Facebook.js",
"./Icons/FootStoolIcon": "./dist/components/Icons/Customised/Amenities_Facilities/FootStool.js",
"./Icons/GiftOpenIcon": "./dist/components/Icons/Illustrations/GiftOpen.js",
"./Icons/GrandHotelOsloIcon": "./dist/components/Icons/Logos/GrandHotelOslo.js",
"./Icons/HairdryerIcon": "./dist/components/Icons/Customised/Amenities_Facilities/Hairdryer.js",
"./Icons/HairdresserIcon": "./dist/components/Icons/Nucleo/Amenities_Facilities/hairdresser-1.js",
"./Icons/HandKeyIcon": "./dist/components/Icons/Illustrations/HandKey.js",
"./Icons/HandSoapIcon": "./dist/components/Icons/Customised/Amenities_Facilities/HandSoap.js",
"./Icons/HaymarketIcon": "./dist/components/Icons/Logos/Haymarket.js",
"./Icons/HotelNightIcon": "./dist/components/Icons/Illustrations/HotelNight.js",
"./Icons/HotelNorgeIcon": "./dist/components/Icons/Logos/HotelNorge.js",
"./Icons/IceMachineIcon": "./dist/components/Icons/Customised/Amenities_Facilities/IceMachine.js",
"./Icons/InstagramIcon": "./dist/components/Icons/Customised/Socials/Instagram.js",
"./Icons/KidsIcon": "./dist/components/Icons/Illustrations/Kids.js",
"./Icons/KidsMocktailIcon": "./dist/components/Icons/Illustrations/KidsMocktail.js",
"./Icons/MagicWandIcon": "./dist/components/Icons/Illustrations/MagicWand.js",
"./Icons/MarskiLogoIcon": "./dist/components/Icons/Logos/MarskiLogo.js",
"./Icons/MassageIcon": "./dist/components/Icons/Customised/Amenities_Facilities/Massage.js",
"./Icons/MaterialIcon": "./dist/components/Icons/MaterialIcon/index.js",
"./Icons/MaterialIcon/MaterialSymbol": "./dist/components/Icons/MaterialIcon/MaterialSymbol/index.js",
"./Icons/MinimizeIcon": "./dist/components/Icons/Customised/UI/Minimize.js",
"./Icons/MirrorIcon": "./dist/components/Icons/Customised/Amenities_Facilities/Mirror.js",
"./Icons/MoneyHandIcon": "./dist/components/Icons/Illustrations/MoneyHand.js",
"./Icons/BedBunkExtraIcon": "./dist/components/Icons/Illustrations/BedBunkExtra.js",
"./Icons/BedGenericIcon": "./dist/components/Icons/Illustrations/BedGeneric.js",
"./Icons/BedBunkIcon": "./dist/components/Icons/Illustrations/BedBunk.js",
"./Icons/HotelLogoIcon": "./dist/components/Icons/Logos/index.js",
"./Icons/BedKingIcon": "./dist/components/Icons/Illustrations/BedKing.js",
"./Icons/BedQueenIcon": "./dist/components/Icons/Illustrations/BedQueen.js",
"./Icons/BedSofaIcon": "./dist/components/Icons/Illustrations/BedSofa.js",
"./Icons/BedSofaExtraIcon": "./dist/components/Icons/Illustrations/BedSofaExtra.js",
"./Icons/BedTwinIcon": "./dist/components/Icons/Illustrations/BedTwin.js",
"./Icons/BedWallExtraIcon": "./dist/components/Icons/Illustrations/BedWallExtra.js",
"./Icons/BreakfastBuffetIcon": "./dist/components/Icons/Illustrations/BreakfastBuffet.js",
"./Icons/NoBreakfastBuffetIcon": "./dist/components/Icons/Illustrations/NoBreakfastBuffet.js",
"./Icons/BedSingleIcon": "./dist/components/Icons/Illustrations/BedSingle.js",
"./Icons/BedPullOutIcon": "./dist/components/Icons/Illustrations/BedPullOut.js",
"./Icons/BedPullOutExtraIcon": "./dist/components/Icons/Illustrations/BedPullOutExtra.js",
"./Icons/MovingBedsIcon": "./dist/components/Icons/Customised/Amenities_Facilities/MovingBeds.js",
"./Icons/PalmTreeIcon": "./dist/components/Icons/Nucleo/Experiences/palm-tree-2.js",
"./Icons/PopcornIcon": "./dist/components/Icons/Nucleo/Food/popcorn-2.js",
"./Icons/RecordPlayerIcon": "./dist/components/Icons/Nucleo/Amenities_Facilities/record-player-3.js",
"./Icons/RoadIcon": "./dist/components/Icons/Customised/Amenities_Facilities/Road.js",
"./Icons/RugIcon": "./dist/components/Icons/Customised/Amenities_Facilities/Rug.js",
"./Icons/SafetyBoxIcon": "./dist/components/Icons/Customised/Amenities_Facilities/SafetyBox.js",
"./Icons/ScandicGoIcon": "./dist/components/Icons/Logos/ScandicGoLogo.js",
"./Icons/ScandicLogoIcon": "./dist/components/Icons/Logos/ScandicLogo.js",
"./Icons/SlippersIcon": "./dist/components/Icons/Customised/Amenities_Facilities/Slippers.js",
"./Icons/SurpriseIcon": "./dist/components/Icons/Illustrations/Surprise.js",
"./Icons/ToiletIcon": "./dist/components/Icons/Nucleo/Amenities_Facilities/toilet-2.js",
"./Icons/TowelIcon": "./dist/components/Icons/Customised/Amenities_Facilities/Towel.js",
"./Icons/TripadvisorIcon": "./dist/components/Icons/Customised/Socials/Tripadvisor.js",
"./Icons/UserPoliceIcon": "./dist/components/Icons/Nucleo/Amenities_Facilities/user-police-2.js",
"./Icons/ViewIcon": "./dist/components/Icons/Customised/Amenities_Facilities/View.js",
"./Icons/VoucherIcon": "./dist/components/Icons/Illustrations/Voucher.js",
"./Icons/WardIcon": "./dist/components/Icons/Customised/Amenities_Facilities/Ward.js",
"./Icons/WindowNotAvailableIcon": "./dist/components/Icons/Customised/Amenities_Facilities/WindowNotAvailable.js",
"./Icons/WoodFloorIcon": "./dist/components/Icons/Customised/Amenities_Facilities/WoodFloor.js",
"./style.css": "./dist/style.css",
"./base.css": "./dist/base.css",
"./globals.css": "./dist/globals.css",
"./impl.css": "./dist/impl.css",
"./fonts.css": "./dist/fonts.css",
"./downtown-camper.css": "./dist/styles/downtown-camper.css",
"./grand-hotel.css": "./dist/styles/grand-hotel.css",
"./haymarket.css": "./dist/styles/haymarket.css",
"./hotel-norge.css": "./dist/styles/hotel-norge.css",
"./marski.css": "./dist/styles/marski.css",
"./scandic-go.css": "./dist/styles/scandic-go.css",
"./scandic.css": "./dist/styles/scandic.css"
"./Accordion": "./lib/components/Accordion/index.tsx",
"./Accordion/AccordionItem": "./lib/components/Accordion/AccordionItem/index.tsx",
"./BackToTopButton": "./lib/components/BackToTopButton/index.tsx",
"./Body": "./lib/components/Body/index.tsx",
"./Button": "./lib/components/Button/index.tsx",
"./ButtonLink": "./lib/components/ButtonLink/index.tsx",
"./Caption": "./lib/components/Caption/index.tsx",
"./Card": "./lib/components/Card/index.tsx",
"./ChipButton": "./lib/components/ChipButton/index.tsx",
"./ChipLink": "./lib/components/ChipLink/index.tsx",
"./Chips": "./lib/components/Chips/index.tsx",
"./DeprecatedSelect": "./lib/components/DeprecatedSelect/index.tsx",
"./Divider": "./lib/components/Divider/index.tsx",
"./Footnote": "./lib/components/Footnote/index.tsx",
"./Form/Checkbox": "./lib/components/Form/Checkbox/index.tsx",
"./Form/Country": "./lib/components/Form/Country/index.tsx",
"./Form/Date": "./lib/components/Form/Date/index.tsx",
"./Form/ErrorMessage": "./lib/components/Form/ErrorMessage/index.tsx",
"./Form/Phone": "./lib/components/Form/Phone/index.tsx",
"./Form/RadioCard": "./lib/components/Form/RadioCard/index.tsx",
"./IconChip": "./lib/components/IconChip/index.tsx",
"./Input": "./lib/components/Input/index.tsx",
"./Label": "./lib/components/Label/index.tsx",
"./OldDSButton": "./lib/components/OldDSButton/index.tsx",
"./Select": "./lib/components/Select/index.tsx",
"./SkeletonShimmer": "./lib/components/SkeletonShimmer/index.tsx",
"./SidePeek": "./lib/components/SidePeek/index.tsx",
"./SidePeek/SidePeekProvider": "./lib/components/SidePeek/SidePeekContext/SidePeekProvider.tsx",
"./Subtitle": "./lib/components/Subtitle/index.tsx",
"./Switch": "./lib/components/Switch/index.tsx",
"./Title": "./lib/components/Title/index.tsx",
"./Tooltip": "./lib/components/Tooltip/index.tsx",
"./Typography": "./lib/components/Typography/index.tsx",
"./RegularRateCard": "./lib/components/RateCard/Regular/index.tsx",
"./CampaignRateCard": "./lib/components/RateCard/Campaign/index.tsx",
"./CodeRateCard": "./lib/components/RateCard/Code/index.tsx",
"./PointsRateCard": "./lib/components/RateCard/Points/index.tsx",
"./Preamble": "./lib/components/Preamble/index.tsx",
"./NoRateAvailableCard": "./lib/components/RateCard/NoRateAvailable/index.tsx",
"./IconButton": "./lib/components/IconButton/index.tsx",
"./Icons": "./lib/components/Icons/index.tsx",
"./Icons/IconByCSSelect": "./lib/components/Icons/IconByCSSelect.tsx",
"./Icons/IconByIconName": "./lib/components/Icons/IconByIconName.tsx",
"./Icons/IllustrationByIconName": "./lib/components/Icons/IllustrationByIconName.ts",
"./Icons/iconName": "./lib/components/Icons/iconName.ts",
"./Icons/BathroomCabinetIcon": "./lib/components/Icons/Nucleo/Amenities_Facilities/bathroom-cabinet-2.tsx",
"./Icons/BedHotelIcon": "./lib/components/Icons/Customised/Amenities_Facilities/BedHotel.tsx",
"./Icons/BedIcon": "./lib/components/Icons/Illustrations/Bed.tsx",
"./Icons/BouquetIcon": "./lib/components/Icons/Nucleo/Benefits/bouquet.tsx",
"./Icons/BowlingPinsIcon": "./lib/components/Icons/Nucleo/Experiences/bowling-pins.tsx",
"./Icons/BunkBedIcon": "./lib/components/Icons/Customised/Amenities_Facilities/MdiBunkBedOutline.tsx",
"./Icons/ChipsIcon": "./lib/components/Icons/Nucleo/Food/chips-3.tsx",
"./Icons/CoinIcon": "./lib/components/Icons/Illustrations/Coin.tsx",
"./Icons/ConferenceRoomIcon": "./lib/components/Icons/Nucleo/Amenities_Facilities/conference-room.tsx",
"./Icons/CoolingIcon": "./lib/components/Icons/Customised/Amenities_Facilities/Cooling.tsx",
"./Icons/CouchTableIcon": "./lib/components/Icons/Customised/Amenities_Facilities/CouchTable.tsx",
"./Icons/CroissantCoffeeEggIcon": "./lib/components/Icons/Illustrations/CroissantCoffeeEgg.tsx",
"./Icons/CutleryOneIcon": "./lib/components/Icons/Illustrations/CutleryOne.tsx",
"./Icons/CutleryTwoIcon": "./lib/components/Icons/Illustrations/CutleryTwo.tsx",
"./Icons/DiamondAddIcon": "./lib/components/Icons/Customised/Benefits/DiamondAdd.tsx",
"./Icons/DiscountIcon": "./lib/components/Icons/Nucleo/Benefits/discount-2-2.tsx",
"./Icons/FilledDiscountIcon": "./lib/components/Icons/Nucleo/Benefits/FilledDiscount.tsx",
"./Icons/DoorIcon": "./lib/components/Icons/Nucleo/Amenities_Facilities/door-2.tsx",
"./Icons/DowntownCamperIcon": "./lib/components/Icons/Logos/DowntownCamper.tsx",
"./Icons/FacebookIcon": "./lib/components/Icons/Customised/Socials/Facebook.tsx",
"./Icons/FootStoolIcon": "./lib/components/Icons/Customised/Amenities_Facilities/FootStool.tsx",
"./Icons/GiftOpenIcon": "./lib/components/Icons/Illustrations/GiftOpen.tsx",
"./Icons/GrandHotelOsloIcon": "./lib/components/Icons/Logos/GrandHotelOslo.tsx",
"./Icons/HairdryerIcon": "./lib/components/Icons/Customised/Amenities_Facilities/Hairdryer.tsx",
"./Icons/HairdresserIcon": "./lib/components/Icons/Nucleo/Amenities_Facilities/hairdresser-1.tsx",
"./Icons/HandKeyIcon": "./lib/components/Icons/Illustrations/HandKey.tsx",
"./Icons/HandSoapIcon": "./lib/components/Icons/Customised/Amenities_Facilities/HandSoap.tsx",
"./Icons/HaymarketIcon": "./lib/components/Icons/Logos/Haymarket.tsx",
"./Icons/HotelNightIcon": "./lib/components/Icons/Illustrations/HotelNight.tsx",
"./Icons/HotelNorgeIcon": "./lib/components/Icons/Logos/HotelNorge.tsx",
"./Icons/IceMachineIcon": "./lib/components/Icons/Customised/Amenities_Facilities/IceMachine.tsx",
"./Icons/InstagramIcon": "./lib/components/Icons/Customised/Socials/Instagram.tsx",
"./Icons/KidsIcon": "./lib/components/Icons/Illustrations/Kids.tsx",
"./Icons/KidsMocktailIcon": "./lib/components/Icons/Illustrations/KidsMocktail.tsx",
"./Icons/MagicWandIcon": "./lib/components/Icons/Illustrations/MagicWand.tsx",
"./Icons/MarskiLogoIcon": "./lib/components/Icons/Logos/MarskiLogo.tsx",
"./Icons/MassageIcon": "./lib/components/Icons/Customised/Amenities_Facilities/Massage.tsx",
"./Icons/MaterialIcon": "./lib/components/Icons/MaterialIcon/index.tsx",
"./Icons/MaterialIcon/MaterialSymbol": "./lib/components/Icons/MaterialIcon/MaterialSymbol/index.tsx",
"./Icons/MinimizeIcon": "./lib/components/Icons/Customised/UI/Minimize.tsx",
"./Icons/MirrorIcon": "./lib/components/Icons/Customised/Amenities_Facilities/Mirror.tsx",
"./Icons/MoneyHandIcon": "./lib/components/Icons/Illustrations/MoneyHand.tsx",
"./Icons/BedBunkExtraIcon": "./lib/components/Icons/Illustrations/BedBunkExtra.tsx",
"./Icons/BedGenericIcon": "./lib/components/Icons/Illustrations/BedGeneric.tsx",
"./Icons/BedBunkIcon": "./lib/components/Icons/Illustrations/BedBunk.tsx",
"./Icons/HotelLogoIcon": "./lib/components/Icons/Logos/index.tsx",
"./Icons/BedKingIcon": "./lib/components/Icons/Illustrations/BedKing.tsx",
"./Icons/BedQueenIcon": "./lib/components/Icons/Illustrations/BedQueen.tsx",
"./Icons/BedSofaIcon": "./lib/components/Icons/Illustrations/BedSofa.tsx",
"./Icons/BedSofaExtraIcon": "./lib/components/Icons/Illustrations/BedSofaExtra.tsx",
"./Icons/BedTwinIcon": "./lib/components/Icons/Illustrations/BedTwin.tsx",
"./Icons/BedWallExtraIcon": "./lib/components/Icons/Illustrations/BedWallExtra.tsx",
"./Icons/BreakfastBuffetIcon": "./lib/components/Icons/Illustrations/BreakfastBuffet.tsx",
"./Icons/NoBreakfastBuffetIcon": "./lib/components/Icons/Illustrations/NoBreakfastBuffet.tsx",
"./Icons/BedSingleIcon": "./lib/components/Icons/Illustrations/BedSingle.tsx",
"./Icons/BedPullOutIcon": "./lib/components/Icons/Illustrations/BedPullOut.tsx",
"./Icons/BedPullOutExtraIcon": "./lib/components/Icons/Illustrations/BedPullOutExtra.tsx",
"./Icons/MovingBedsIcon": "./lib/components/Icons/Customised/Amenities_Facilities/MovingBeds.tsx",
"./Icons/PalmTreeIcon": "./lib/components/Icons/Nucleo/Experiences/palm-tree-2.tsx",
"./Icons/PopcornIcon": "./lib/components/Icons/Nucleo/Food/popcorn-2.tsx",
"./Icons/RecordPlayerIcon": "./lib/components/Icons/Nucleo/Amenities_Facilities/record-player-3.tsx",
"./Icons/RoadIcon": "./lib/components/Icons/Customised/Amenities_Facilities/Road.tsx",
"./Icons/RugIcon": "./lib/components/Icons/Customised/Amenities_Facilities/Rug.tsx",
"./Icons/SafetyBoxIcon": "./lib/components/Icons/Customised/Amenities_Facilities/SafetyBox.tsx",
"./Icons/ScandicGoIcon": "./lib/components/Icons/Logos/ScandicGoLogo.tsx",
"./Icons/ScandicLogoIcon": "./lib/components/Icons/Logos/ScandicLogo.tsx",
"./Icons/SlippersIcon": "./lib/components/Icons/Customised/Amenities_Facilities/Slippers.tsx",
"./Icons/SurpriseIcon": "./lib/components/Icons/Illustrations/Surprise.tsx",
"./Icons/ToiletIcon": "./lib/components/Icons/Nucleo/Amenities_Facilities/toilet-2.tsx",
"./Icons/TowelIcon": "./lib/components/Icons/Customised/Amenities_Facilities/Towel.tsx",
"./Icons/TripadvisorIcon": "./lib/components/Icons/Customised/Socials/Tripadvisor.tsx",
"./Icons/UserPoliceIcon": "./lib/components/Icons/Nucleo/Amenities_Facilities/user-police-2.tsx",
"./Icons/ViewIcon": "./lib/components/Icons/Customised/Amenities_Facilities/View.tsx",
"./Icons/VoucherIcon": "./lib/components/Icons/Illustrations/Voucher.tsx",
"./Icons/WardIcon": "./lib/components/Icons/Customised/Amenities_Facilities/Ward.tsx",
"./Icons/WindowNotAvailableIcon": "./lib/components/Icons/Customised/Amenities_Facilities/WindowNotAvailable.tsx",
"./Icons/WoodFloorIcon": "./lib/components/Icons/Customised/Amenities_Facilities/WoodFloor.tsx",
"./style.css": "./lib/style.css",
"./base.css": "./lib/base.css",
"./globals.css": "./lib/globals.css",
"./impl.css": "./lib/impl.css",
"./fonts.css": "./lib/fonts.css",
"./downtown-camper.css": "./lib/styles/downtown-camper.css",
"./grand-hotel.css": "./lib/styles/grand-hotel.css",
"./haymarket.css": "./lib/styles/haymarket.css",
"./hotel-norge.css": "./lib/styles/hotel-norge.css",
"./marski.css": "./lib/styles/marski.css",
"./scandic-go.css": "./lib/styles/scandic-go.css",
"./scandic.css": "./lib/styles/scandic.css"
},
"files": [
"dist"
@@ -146,10 +146,10 @@
"**/*.css"
],
"scripts": {
"dev": "cd example && vite",
"dev": "yarn storybook",
"generate": "cd generate && jiti generate.ts",
"format": "prettier . --write",
"build": "yarn run generate && tsc --p ./tsconfig-build.json && vite build && yarn run format",
"build": "yarn build-storybook",
"lint": "eslint . --ext ts,tsx --report-unused-disable-directives --max-warnings 0 && tsc",
"lint:fix": "eslint . --ext ts,tsx --report-unused-disable-directives --fix --max-warnings 0 && tsc",
"storybook": "yarn run generate && storybook dev -p 6006",