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
@@ -8,7 +8,7 @@
|
||||
--max-width-navigation: 89.5rem;
|
||||
|
||||
--max-width-single-spacing: var(--Layout-Mobile-Margin-Margin-min);
|
||||
--max-width-spacing: calc(var(--max-width-single-spacing) * 2);
|
||||
--max-width-spacing: calc(var(--Space-x2) * 2);
|
||||
--max-width-page: min(
|
||||
calc(100dvw - var(--max-width-spacing)),
|
||||
var(--max-width-navigation)
|
||||
@@ -44,6 +44,7 @@
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@@ -92,6 +93,7 @@ ul {
|
||||
@media screen and (min-width: 768px) {
|
||||
:root {
|
||||
--max-width-single-spacing: var(--Layout-Tablet-Margin-Margin-min);
|
||||
--max-width-spacing: calc(var(--Space-x3) * 2);
|
||||
}
|
||||
|
||||
body.overflow-hidden {
|
||||
@@ -103,5 +105,6 @@ ul {
|
||||
@media screen and (min-width: 1367px) {
|
||||
:root {
|
||||
--max-width-single-spacing: var(--Layout-Desktop-Margin-Margin-min);
|
||||
--max-width-spacing: calc(var(--Space-x5) * 2);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -9,6 +9,7 @@ const nextConfig: NextConfig = {
|
||||
"@scandic-hotels/common",
|
||||
"@scandic-hotels/trpc",
|
||||
"@scandic-hotels/booking-flow",
|
||||
"@scandic-hotels/design-system",
|
||||
],
|
||||
output: "standalone",
|
||||
|
||||
|
||||
@@ -1,17 +1,9 @@
|
||||
{
|
||||
"extends": ["//"],
|
||||
"tasks": {
|
||||
"dev": {
|
||||
"dependsOn": ["@scandic-hotels/design-system#build"]
|
||||
},
|
||||
"build": {
|
||||
"dependsOn": ["@scandic-hotels/design-system#build"]
|
||||
},
|
||||
"test": {
|
||||
"dependsOn": ["@scandic-hotels/design-system#build"]
|
||||
},
|
||||
"lint": {
|
||||
"dependsOn": ["@scandic-hotels/design-system#build"]
|
||||
}
|
||||
"dev": {},
|
||||
"build": {},
|
||||
"test": {},
|
||||
"lint": {}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@ services:
|
||||
context: .
|
||||
dockerfile: Dockerfile
|
||||
ports:
|
||||
- "3001:3001"
|
||||
- "3101:3001"
|
||||
depends_on:
|
||||
- redis
|
||||
environment:
|
||||
|
||||
@@ -8,7 +8,7 @@
|
||||
--max-width-navigation: 89.5rem;
|
||||
|
||||
--max-width-single-spacing: var(--Layout-Mobile-Margin-Margin-min);
|
||||
--max-width-spacing: calc(var(--max-width-single-spacing) * 2);
|
||||
--max-width-spacing: calc(var(--Space-x2) * 2);
|
||||
--max-width-page: min(
|
||||
calc(100dvw - var(--max-width-spacing)),
|
||||
var(--max-width-navigation)
|
||||
@@ -44,6 +44,7 @@
|
||||
}
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
@@ -92,6 +93,7 @@ ul {
|
||||
@media screen and (min-width: 768px) {
|
||||
:root {
|
||||
--max-width-single-spacing: var(--Layout-Tablet-Margin-Margin-min);
|
||||
--max-width-spacing: calc(var(--Space-x3) * 2);
|
||||
}
|
||||
|
||||
body.overflow-hidden {
|
||||
@@ -103,5 +105,6 @@ ul {
|
||||
@media screen and (min-width: 1367px) {
|
||||
:root {
|
||||
--max-width-single-spacing: var(--Layout-Desktop-Margin-Margin-min);
|
||||
--max-width-spacing: calc(var(--Space-x5) * 2);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,7 +4,7 @@ services:
|
||||
context: ../redis-api
|
||||
dockerfile: Dockerfile
|
||||
ports:
|
||||
- "3001:3001"
|
||||
- "3101:3001"
|
||||
depends_on:
|
||||
- redis
|
||||
environment:
|
||||
|
||||
@@ -1,17 +1,9 @@
|
||||
{
|
||||
"extends": ["//"],
|
||||
"tasks": {
|
||||
"dev": {
|
||||
"dependsOn": ["@scandic-hotels/design-system#build"]
|
||||
},
|
||||
"build": {
|
||||
"dependsOn": ["@scandic-hotels/design-system#build"]
|
||||
},
|
||||
"test": {
|
||||
"dependsOn": ["@scandic-hotels/design-system#build"]
|
||||
},
|
||||
"lint": {
|
||||
"dependsOn": ["@scandic-hotels/design-system#build"]
|
||||
}
|
||||
"dev": {},
|
||||
"build": {},
|
||||
"test": {},
|
||||
"lint": {}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -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
|
||||
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export { Header } from './Header'
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export { Hero } from './Hero'
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export { Main } from './Main'
|
||||
@@ -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);
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export { RichTextEditorContent } from './RichTextEditorContent'
|
||||
@@ -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);
|
||||
}
|
||||
@@ -1,3 +0,0 @@
|
||||
export function Sidebar() {
|
||||
return <div>Sidebar</div>
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export { Sidebar } from './Sidebar'
|
||||
@@ -1,11 +0,0 @@
|
||||
import { Main } from './Main'
|
||||
import { Header } from './Header'
|
||||
|
||||
export function ContentPage() {
|
||||
return (
|
||||
<>
|
||||
<Header />
|
||||
<Main />
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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 */
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export { Hero } from './Hero'
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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);
|
||||
}
|
||||
@@ -1 +0,0 @@
|
||||
export { HotelPage } from './HotelPage'
|
||||
@@ -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>
|
||||
</>
|
||||
)
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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;
|
||||
}
|
||||
@@ -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>
|
||||
@@ -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>
|
||||
)
|
||||
@@ -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',
|
||||
},
|
||||
})
|
||||
@@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,2 @@
|
||||
@value inputContainerHeight: 56px;
|
||||
@value inputExpandedHeight: 24px;
|
||||
|
||||
* {
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -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",
|
||||
|
||||
Reference in New Issue
Block a user