From ca6cc5ab6c2380b5d1a133bdc534396c56245603 Mon Sep 17 00:00:00 2001 From: Rasmus Langvad Date: Mon, 8 Dec 2025 12:35:14 +0000 Subject: [PATCH] Merged in feat/SW-3636-storybook-structure (pull request #3309) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit feat(SW-3636): Storybook structure * New sections in Storybook sidebar * Group Storybook content files and add token files for spacing, border radius and shadows Approved-by: Joakim JΓ€derberg --- .../.storybook/content/Colors.tsx | 269 +++++++++++++++++ .../.storybook/content/CornerRadius.mdx | 11 + .../.storybook/content/CornerRadius.tsx | 99 +++++++ .../.storybook/content/Shadow.mdx | 11 + .../.storybook/content/Shadow.tsx | 106 +++++++ .../.storybook/content/Spacing.mdx | 11 + .../.storybook/content/Spacing.tsx | 128 ++++++++ .../tokens => .storybook/content}/base.mdx | 4 +- .../.storybook/content/colors.module.css | 274 ++++++++++++++++++ .../content/colors/downtownCamper.mdx | 11 + .../.storybook/content/colors/grandHotel.mdx | 11 + .../.storybook/content/colors/haymarket.mdx | 11 + .../.storybook/content/colors/hotelNorge.mdx | 11 + .../.storybook/content/colors/index.mdx | 40 +++ .../.storybook/content/colors/marski.mdx | 11 + .../.storybook/content/colors/scandic.mdx | 11 + .../.storybook/content/colors/scandicGo.mdx | 11 + .../.storybook/content/colors/theDock.mdx | 11 + .../{lib => .storybook/content}/index.mdx | 28 +- .../.storybook/content/tokens.module.css | 141 +++++++++ packages/design-system/.storybook/main.ts | 6 +- packages/design-system/.storybook/preview.tsx | 10 +- .../Accordion/Accordion.stories.tsx | 2 +- .../lib/components/Alert/Alert.stories.tsx | 2 +- .../lib/components/Avatar/Avatar.stories.tsx | 2 +- .../BackToTopButton.stories.tsx | 2 +- .../lib/components/Badge/Badge.stories.tsx | 2 +- .../BookingCodeChip.stories.tsx | 2 +- .../lib/components/Button/Button.stories.tsx | 2 +- .../ButtonLink/ButtonLink.stories.tsx | 2 +- .../lib/components/Card/Card.stories.tsx | 2 +- .../ChipButton/ChipButton.stories.tsx | 2 +- .../components/ChipLink/ChipLink.stories.tsx | 2 +- .../components/Divider/Divider.stories.tsx | 2 +- .../FacilityToIcon/FacilityToIcon.stories.tsx | 2 +- .../Form/Checkbox/Checkbox.stories.tsx | 18 -- .../PaymentOptionsGroup.stories.tsx | 2 +- .../SelectPaymentMethod.stories.tsx | 2 +- .../HotelCard/HotelCard.stories.tsx | 2 +- .../StandaloneHotelCardDialog.stories.tsx | 2 +- .../HotelInfoCard/HotelInfoCard.stories.tsx | 3 +- .../IconButton/IconButton.stories.tsx | 2 +- .../Icons/MaterialIcon/MaterialIcon.tsx | 3 +- .../components/InfoBox/InfoBox.stories.tsx | 2 +- .../components/InfoCard/InfoCard.stories.tsx | 2 +- .../lib/components/Input/Input.stories.tsx | 2 +- .../InputLabel/InputLabel.stories.tsx | 2 +- .../lib/components/InputNew/Input.stories.tsx | 2 +- .../JsonToHtml/JsonToHtml.stories.tsx | 2 +- .../components/LinkList/LinkList.stories.tsx | 2 +- .../LinkListItem/LinkListItem.stories.tsx | 2 +- .../components/Loading/Loading.stories.tsx | 2 +- .../LoadingSpinner/LoadingSpinner.stories.tsx | 2 +- .../InteractiveMap/InteractiveMap.stories.tsx | 2 +- .../Map/Markers/HotelMarkerByType.stories.tsx | 2 +- .../MessageBanner/MessageBanner.stories.tsx | 2 +- .../OldDSLink/OldDSLink.stories.tsx | 71 ----- .../Payment/PaymentMethodIcon.stories.tsx | 2 +- .../components/Progress/Progress.stories.tsx | 2 +- .../RateCard/Campaign/Campaign.stories.tsx | 2 +- .../components/RateCard/Code/Code.stories.tsx | 2 +- .../NoRateAvailable.stories.tsx | 2 +- .../RateCard/Points/Points.stories.tsx | 2 +- .../RateCard/Regular/Regular.stories.tsx | 2 +- .../lib/components/Select/Select.stories.tsx | 2 +- .../components/TextLink/TextLink.stories.tsx | 2 +- .../lib/components/Toasts/Toast.stories.tsx | 2 +- .../Toasts/ToastHandler.stories.tsx | 2 +- .../TripdAdvisorChip.stories.tsx | 2 +- .../Typography/Typography.stories.tsx | 2 +- .../VideoPlayer/VideoPlayer.stories.tsx | 2 +- packages/design-system/lib/tokens/Colors.tsx | 153 ---------- .../lib/tokens/colors.module.css | 130 --------- .../lib/tokens/downtownCamper.mdx | 11 - .../design-system/lib/tokens/grandHotel.mdx | 11 - .../design-system/lib/tokens/haymarket.mdx | 11 - .../design-system/lib/tokens/hotelNorge.mdx | 11 - packages/design-system/lib/tokens/marski.mdx | 11 - packages/design-system/lib/tokens/scandic.mdx | 11 - .../design-system/lib/tokens/scandicGo.mdx | 11 - packages/design-system/lib/tokens/theDock.mdx | 11 - packages/design-system/tsconfig.json | 8 +- packages/design-system/vite.config.ts | 7 +- 83 files changed, 1272 insertions(+), 525 deletions(-) create mode 100644 packages/design-system/.storybook/content/Colors.tsx create mode 100644 packages/design-system/.storybook/content/CornerRadius.mdx create mode 100644 packages/design-system/.storybook/content/CornerRadius.tsx create mode 100644 packages/design-system/.storybook/content/Shadow.mdx create mode 100644 packages/design-system/.storybook/content/Shadow.tsx create mode 100644 packages/design-system/.storybook/content/Spacing.mdx create mode 100644 packages/design-system/.storybook/content/Spacing.tsx rename packages/design-system/{lib/tokens => .storybook/content}/base.mdx (63%) create mode 100644 packages/design-system/.storybook/content/colors.module.css create mode 100644 packages/design-system/.storybook/content/colors/downtownCamper.mdx create mode 100644 packages/design-system/.storybook/content/colors/grandHotel.mdx create mode 100644 packages/design-system/.storybook/content/colors/haymarket.mdx create mode 100644 packages/design-system/.storybook/content/colors/hotelNorge.mdx create mode 100644 packages/design-system/.storybook/content/colors/index.mdx create mode 100644 packages/design-system/.storybook/content/colors/marski.mdx create mode 100644 packages/design-system/.storybook/content/colors/scandic.mdx create mode 100644 packages/design-system/.storybook/content/colors/scandicGo.mdx create mode 100644 packages/design-system/.storybook/content/colors/theDock.mdx rename packages/design-system/{lib => .storybook/content}/index.mdx (76%) create mode 100644 packages/design-system/.storybook/content/tokens.module.css delete mode 100644 packages/design-system/lib/components/Form/Checkbox/Checkbox.stories.tsx delete mode 100644 packages/design-system/lib/components/OldDSLink/OldDSLink.stories.tsx delete mode 100644 packages/design-system/lib/tokens/Colors.tsx delete mode 100644 packages/design-system/lib/tokens/colors.module.css delete mode 100644 packages/design-system/lib/tokens/downtownCamper.mdx delete mode 100644 packages/design-system/lib/tokens/grandHotel.mdx delete mode 100644 packages/design-system/lib/tokens/haymarket.mdx delete mode 100644 packages/design-system/lib/tokens/hotelNorge.mdx delete mode 100644 packages/design-system/lib/tokens/marski.mdx delete mode 100644 packages/design-system/lib/tokens/scandic.mdx delete mode 100644 packages/design-system/lib/tokens/scandicGo.mdx delete mode 100644 packages/design-system/lib/tokens/theDock.mdx diff --git a/packages/design-system/.storybook/content/Colors.tsx b/packages/design-system/.storybook/content/Colors.tsx new file mode 100644 index 000000000..9a21be573 --- /dev/null +++ b/packages/design-system/.storybook/content/Colors.tsx @@ -0,0 +1,269 @@ +/* eslint-disable formatjs/no-literal-string-in-jsx */ +import { useState } from 'react' +import copy from 'copy-to-clipboard' + +import { kebabify } from '../../generate/utils' + +export type ThemeValue = Record<'resolved' | 'alias', string | number> + +export type Theme = Record + +export type ThemeOption = { + name: string + displayName: string + theme: Theme +} + +export type ColorsProps = { + theme?: Theme + themes?: ThemeOption[] + defaultThemeName?: string +} + +import styles from './colors.module.css' + +function getContrastColor(bgColor: string) { + const r = parseInt(bgColor.substring(1, 3), 16) + const g = parseInt(bgColor.substring(3, 5), 16) + const b = parseInt(bgColor.substring(5, 7), 16) + let a = parseInt(bgColor.substring(7, 9), 16) + + if (isNaN(a)) { + a = 255 + } + + const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255 + if (luminance > 0.5) { + return '#000' + } else { + if (a < 255 / 2) { + return '#000' + } + return '#fff' + } +} + +function copyToClipboard( + text: string, + setCopied: (key: string) => void, + clearCopied: () => void, + key: string +) { + copy(text) + setCopied(key) + setTimeout(() => { + clearCopied() + }, 2000) +} + +export function Colors({ + theme: propTheme, + themes, + defaultThemeName, +}: ColorsProps) { + const [selectedThemeName, setSelectedThemeName] = useState( + defaultThemeName || themes?.[0]?.name || '' + ) + const [copiedKey, setCopiedKey] = useState(null) + + const currentTheme = + propTheme || + themes?.find((t) => t.name === selectedThemeName)?.theme || + themes?.[0]?.theme + + if (!currentTheme) { + return
No theme available
+ } + + const grouping: Record = {} + + for (const [k, v] of Object.entries(currentTheme)) { + if (typeof v.resolved === 'string' && v.resolved.startsWith('#')) { + const key = k.replace(/\/[^/]+$/, '') + if (!grouping[key]) { + grouping[key] = {} + } + + grouping[key][k] = v + } + } + + return ( +
+
+ {themes && themes.length > 0 && ( +
+ + +
+ )} +
+ + +
+
+ πŸ’‘ + Click any value to copy to clipboard +
+
+ +
+ {Object.entries(grouping) + .sort((a, b) => { + return a[0].localeCompare(b[0]) + }) + .map(([title, values]) => { + return ( +
+

+ {title} +

+
+ {Object.entries(values).map(([k, v]) => { + const tokenKey = `${title}-${k}` + + return ( +
+
+
{ + copyToClipboard( + `var(--${kebabify(k)})`, + setCopiedKey, + () => setCopiedKey(null), + tokenKey + ) + }} + title="Click to copy CSS variable" + > +
+ {v.resolved.toString()} +
+
+
+
+ Figma: + { + copyToClipboard( + k, + setCopiedKey, + () => setCopiedKey(null), + tokenKey + ) + }} + title="Click to copy" + > + {k} + +
+
+ CSS: + { + copyToClipboard( + kebabify(k), + setCopiedKey, + () => setCopiedKey(null), + tokenKey + ) + }} + title="Click to copy" + > + {kebabify(k)} + +
+ {v.alias ? ( +
+ + Alias: + + { + copyToClipboard( + v.alias.toString(), + setCopiedKey, + () => setCopiedKey(null), + tokenKey + ) + }} + title="Click to copy" + > + {v.alias} + +
+ ) : null} +
+ Value: + { + copyToClipboard( + v.resolved.toString(), + setCopiedKey, + () => setCopiedKey(null), + tokenKey + ) + }} + title="Click to copy" + > + {v.resolved} + +
+
+
+
+ ) + })} +
+
+ ) + })} +
+
+ ) +} diff --git a/packages/design-system/.storybook/content/CornerRadius.mdx b/packages/design-system/.storybook/content/CornerRadius.mdx new file mode 100644 index 000000000..ac8022a89 --- /dev/null +++ b/packages/design-system/.storybook/content/CornerRadius.mdx @@ -0,0 +1,11 @@ +import { Meta } from '@storybook/addon-docs/blocks' + +import { CornerRadius } from './CornerRadius' + +import { base } from '../../lib/tokens' + + + +# Corner Radius + + diff --git a/packages/design-system/.storybook/content/CornerRadius.tsx b/packages/design-system/.storybook/content/CornerRadius.tsx new file mode 100644 index 000000000..2bffaa1b9 --- /dev/null +++ b/packages/design-system/.storybook/content/CornerRadius.tsx @@ -0,0 +1,99 @@ +/* eslint-disable formatjs/no-literal-string-in-jsx */ +import copy from 'copy-to-clipboard' + +import { kebabify } from '../../generate/utils' + +import tableStyles from './tokens.module.css' + +type ThemeValue = { + resolved: string | number + alias?: string | number +} + +type Theme = Record + +type CornerRadiusProps = { + theme: Theme +} + +function copyToClipboard(text: string) { + copy(text) +} + +export function CornerRadius({ theme }: CornerRadiusProps) { + // Filter corner radius tokens + const cornerRadiusTokens: Theme = {} + for (const [k, v] of Object.entries(theme)) { + if (k.startsWith('Corner radius/')) { + cornerRadiusTokens[k] = v as ThemeValue + } + } + + // Sort by value + const sortedTokens = Object.entries(cornerRadiusTokens).sort((a, b) => { + const aValue = typeof a[1].resolved === 'number' ? a[1].resolved : 0 + const bValue = typeof b[1].resolved === 'number' ? b[1].resolved : 0 + return aValue - bValue + }) + + return ( +
+
+ + + + + + + + + + {sortedTokens.map(([k, v]) => { + const value = typeof v.resolved === 'number' ? v.resolved : 0 + const valuePx = `${value}px` + + return ( + + + + + + ) + })} + +
TokenPixels + Visual representation +
+ { + copyToClipboard(`var(--${kebabify(k)})`) + }} + title="Click to copy CSS variable" + > + {kebabify(k)} + + + { + copyToClipboard(valuePx) + }} + title="Click to copy" + > + {valuePx} + + +
+ {valuePx} +
+
+
+
+ ) +} diff --git a/packages/design-system/.storybook/content/Shadow.mdx b/packages/design-system/.storybook/content/Shadow.mdx new file mode 100644 index 000000000..5b5379d33 --- /dev/null +++ b/packages/design-system/.storybook/content/Shadow.mdx @@ -0,0 +1,11 @@ +import { Meta } from '@storybook/addon-docs/blocks' + +import { Shadow } from './Shadow' + +import { base } from '../../lib/tokens' + + + +# Shadow + + diff --git a/packages/design-system/.storybook/content/Shadow.tsx b/packages/design-system/.storybook/content/Shadow.tsx new file mode 100644 index 000000000..032e19cc4 --- /dev/null +++ b/packages/design-system/.storybook/content/Shadow.tsx @@ -0,0 +1,106 @@ +/* eslint-disable formatjs/no-literal-string-in-jsx */ +import copy from 'copy-to-clipboard' + +import { kebabify } from '../../generate/utils' + +import tableStyles from './tokens.module.css' + +type ThemeValue = { + resolved: string | number + alias?: string | number +} + +type Theme = Record + +type ShadowProps = { + theme: Theme +} + +function copyToClipboard(text: string) { + copy(text) +} + +export function Shadow({ theme }: ShadowProps) { + // Filter shadow tokens + const shadowTokens: Theme = {} + for (const [k, v] of Object.entries(theme)) { + if (k.startsWith('BoxShadow-')) { + shadowTokens[k] = v as ThemeValue + } + } + + // Sort by level + const sortedTokens = Object.entries(shadowTokens).sort((a, b) => { + const aLevel = parseInt(a[0].match(/\d+/)?.[0] || '0') + const bLevel = parseInt(b[0].match(/\d+/)?.[0] || '0') + return aLevel - bLevel + }) + + return ( +
+
+ + + + + + + + + + + {sortedTokens.map(([k, v]) => { + const shadowValue = + typeof v.resolved === 'string' ? v.resolved : '' + const level = k.match(/\d+/)?.[0] || '0' + + return ( + + + + + + + ) + })} + +
TokenLevelValue + Visual representation +
+ { + copyToClipboard(`var(--${kebabify(k)})`) + }} + title="Click to copy CSS variable" + > + {kebabify(k)} + + + Level {level} + + { + copyToClipboard(shadowValue) + }} + title="Click to copy" + style={{ + fontSize: '0.75rem', + wordBreak: 'break-all', + }} + > + {shadowValue} + + +
+
+
+
+ ) +} diff --git a/packages/design-system/.storybook/content/Spacing.mdx b/packages/design-system/.storybook/content/Spacing.mdx new file mode 100644 index 000000000..e050de228 --- /dev/null +++ b/packages/design-system/.storybook/content/Spacing.mdx @@ -0,0 +1,11 @@ +import { Meta } from '@storybook/addon-docs/blocks' + +import { Spacing } from './Spacing' + +import { base } from '../../lib/tokens' + + + +# Spacing + + diff --git a/packages/design-system/.storybook/content/Spacing.tsx b/packages/design-system/.storybook/content/Spacing.tsx new file mode 100644 index 000000000..4da28dcd3 --- /dev/null +++ b/packages/design-system/.storybook/content/Spacing.tsx @@ -0,0 +1,128 @@ +/* eslint-disable formatjs/no-literal-string-in-jsx */ +import copy from 'copy-to-clipboard' + +import { kebabify } from '../../generate/utils' + +import tableStyles from './tokens.module.css' + +type ThemeValue = { + resolved: string | number + alias?: string | number +} + +type Theme = Record + +type SpacingProps = { + theme: Theme +} + +function copyToClipboard(text: string) { + copy(text) +} + +// Extract base unit multiplier from token name +function getBaseUnitMultiplier(tokenName: string): string { + // Token names are like "Space/x0", "Space/x025", "Space/x05", "Space/x1", "Space/x15", etc. + const match = tokenName.match(/Space\/x(\d+)/) + if (!match) return '0x' + + const num = match[1] + + // Handle special cases + if (num === '0') return '0x' + if (num === '025') return '0.25x' + if (num === '05') return '0.5x' + if (num === '15') return '1.5x' + + // For other numbers, they're already the multiplier (x1 = 1x, x2 = 2x, etc.) + return `${num}x` +} + +export function Spacing({ theme }: SpacingProps) { + // Filter spacing tokens + const spacingTokens: Theme = {} + for (const [k, v] of Object.entries(theme)) { + if (k.startsWith('Space/')) { + spacingTokens[k] = v as ThemeValue + } + } + + // Sort by value + const sortedTokens = Object.entries(spacingTokens).sort((a, b) => { + const aValue = typeof a[1].resolved === 'number' ? a[1].resolved : 0 + const bValue = typeof b[1].resolved === 'number' ? b[1].resolved : 0 + return aValue - bValue + }) + + return ( +
+
+ + + + + + + + + + + {sortedTokens.map(([k, v]) => { + const value = typeof v.resolved === 'number' ? v.resolved : 0 + const valuePx = `${value}px` + const multiplier = getBaseUnitMultiplier(k) + + return ( + + + + + + + ) + })} + +
Token + Base unit multiplier + Pixels + Visual representation +
+ { + copyToClipboard(`var(--${kebabify(k)})`) + }} + title="Click to copy CSS variable" + > + {kebabify(k)} + + + {multiplier} + + { + copyToClipboard(valuePx) + }} + title="Click to copy" + > + {valuePx} + + +
+ + {valuePx} + +
0 ? '2px' : '0', + }} + /> +
+
+
+
+ ) +} diff --git a/packages/design-system/lib/tokens/base.mdx b/packages/design-system/.storybook/content/base.mdx similarity index 63% rename from packages/design-system/lib/tokens/base.mdx rename to packages/design-system/.storybook/content/base.mdx index 789f33091..072a97698 100644 --- a/packages/design-system/lib/tokens/base.mdx +++ b/packages/design-system/.storybook/content/base.mdx @@ -2,9 +2,9 @@ import { Meta } from '@storybook/addon-docs/blocks' import { Colors } from './Colors' -import { base } from '.' +import { base } from '../../lib/tokens' - + # Colors: Base diff --git a/packages/design-system/.storybook/content/colors.module.css b/packages/design-system/.storybook/content/colors.module.css new file mode 100644 index 000000000..e64efd621 --- /dev/null +++ b/packages/design-system/.storybook/content/colors.module.css @@ -0,0 +1,274 @@ +.container { + display: flex; + flex-direction: column; + gap: 2rem; + padding: 1rem 0; +} + +.header { + position: sticky; + top: 0; + background: #fff; + padding: 1.25rem 1.5rem; + z-index: 100; + border: 1px solid #e5e7eb; + border-radius: 12px; + box-shadow: + 0 1px 3px 0 rgba(0, 0, 0, 0.1), + 0 1px 2px 0 rgba(0, 0, 0, 0.06); + display: flex; + flex-wrap: wrap; + gap: 1.5rem; + align-items: center; + backdrop-filter: blur(8px); + background-color: rgba(255, 255, 255, 0.95); +} + +.themeSelector { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.themeLabel, +.groupLabel { + font-weight: 600; + font-size: 0.875rem; + color: #374151; + white-space: nowrap; +} + +.themeSelect, +.groupSelect { + padding: 0.5rem 0.75rem; + border-radius: 8px; + border: 1px solid #d1d5db; + font-size: 0.875rem; + background: #fff; + color: #111827; + cursor: pointer; + transition: all 0.2s ease; + min-width: 200px; +} + +.themeSelect:hover, +.groupSelect:hover { + border-color: #9ca3af; +} + +.themeSelect:focus, +.groupSelect:focus { + outline: none; + border-color: #3b82f6; + box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); +} + +.jumpTo { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.tip { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.875rem !important; + background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); + padding: 0.625rem 1rem; + border-radius: 8px; + border: 1px solid #fbbf24; + color: #92400e; + font-weight: 500; + margin-left: auto; +} + +.tipIcon { + font-size: 1rem; +} + +.groups { + display: flex; + flex-direction: column; + gap: 3rem; +} + +.title { + font-weight: 700; + font-size: 1.5rem; + color: #111827; + margin: 0 0 1.5rem 0; + padding-top: 80px; + scroll-margin-top: 100px; +} + +.values { + display: grid; + grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); + gap: 1.5rem; +} + +.value { + width: 100%; +} + +.colorCard { + background: #fff; + border: 1px solid #e5e7eb; + border-radius: 12px; + overflow: hidden; + transition: all 0.2s ease; + box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); +} + +.colorCard:hover { + box-shadow: + 0 4px 6px -1px rgba(0, 0, 0, 0.1), + 0 2px 4px -1px rgba(0, 0, 0, 0.06); +} + +.colorSwatch { + position: relative; + display: flex; + align-items: center; + justify-content: center; + min-height: 120px; + width: 100%; + cursor: pointer; + transition: all 0.2s ease; + background-image: + linear-gradient( + 45deg, + rgba(0, 0, 0, var(--opacity)) 25%, + transparent 25%, + transparent 75%, + rgba(0, 0, 0, var(--opacity)) 75%, + rgba(0, 0, 0, var(--opacity)) 0 + ), + linear-gradient( + 45deg, + rgba(0, 0, 0, var(--opacity)) 25%, + transparent 25%, + transparent 75%, + rgba(0, 0, 0, var(--opacity)) 75%, + rgba(0, 0, 0, var(--opacity)) 0 + ); + background-position: + 0px 0, + 8px 8px; + background-size: + 16px 16px, + 16px 16px; +} + +.colorSwatch:hover { + filter: brightness(0.95); +} + +.colorSwatch:active { + transform: scale(0.98); +} + +.colorValue { + font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; + font-size: 0.875rem; + font-weight: 600; + padding: 0.5rem 1rem; + background: rgba(0, 0, 0, 0.1); + border-radius: 6px; + backdrop-filter: blur(4px); + letter-spacing: 0.025em; +} + +.tokenInfo { + padding: 1rem; + display: flex; + flex-direction: column; + gap: 0.75rem; +} + +.tokenRow { + display: flex; + align-items: center; + gap: 0.5rem; + font-size: 0.8125rem; +} + +.tokenLabel { + font-weight: 600; + font-size: 12px; + color: #6b7280; + min-width: 60px; + flex-shrink: 0; +} + +.tokenCode { + font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; + font-size: 12px; + background: #f9fafb; + padding: 0.375rem 0.625rem; + border-radius: 6px; + color: #111827; + cursor: pointer; + transition: all 0.15s ease; + flex: 1; + word-break: break-all; + border: 1px solid transparent; + display: inline-block; +} + +.tokenCode:hover { + background: #f3f4f6; + border-color: #d1d5db; + transform: translateX(2px); +} + +.tokenCode.tokenValue { + font-weight: 600; + font-size: 0.875rem; +} + +@keyframes copiedPulse { + 0% { + transform: scale(1); + } + 50% { + transform: scale(1.02); + } + 100% { + transform: scale(1); + } +} + +/* Responsive adjustments */ +@media (max-width: 768px) { + .header { + flex-direction: column; + align-items: stretch; + } + + .themeSelector, + .jumpTo { + width: 100%; + } + + .themeSelect, + .groupSelect { + width: 100%; + } + + .tip { + margin-left: 0; + width: 100%; + justify-content: center; + } + + .values { + grid-template-columns: 1fr; + } + + .title { + padding-top: 20px; + scroll-margin-top: 20px; + } +} diff --git a/packages/design-system/.storybook/content/colors/downtownCamper.mdx b/packages/design-system/.storybook/content/colors/downtownCamper.mdx new file mode 100644 index 000000000..2bbdbdbcc --- /dev/null +++ b/packages/design-system/.storybook/content/colors/downtownCamper.mdx @@ -0,0 +1,11 @@ +import { Meta } from '@storybook/addon-docs/blocks' + +import { Colors } from '../Colors' + +import { downtownCamper } from '../../../lib/tokens' + + + +# Colors: Downtown Camper + + diff --git a/packages/design-system/.storybook/content/colors/grandHotel.mdx b/packages/design-system/.storybook/content/colors/grandHotel.mdx new file mode 100644 index 000000000..63f47d6c3 --- /dev/null +++ b/packages/design-system/.storybook/content/colors/grandHotel.mdx @@ -0,0 +1,11 @@ +import { Meta } from '@storybook/addon-docs/blocks' + +import { Colors } from '../Colors' + +import { grandHotel } from '../../../lib/tokens' + + + +# Colors: Grand Hotel + + diff --git a/packages/design-system/.storybook/content/colors/haymarket.mdx b/packages/design-system/.storybook/content/colors/haymarket.mdx new file mode 100644 index 000000000..dd5d7456e --- /dev/null +++ b/packages/design-system/.storybook/content/colors/haymarket.mdx @@ -0,0 +1,11 @@ +import { Meta } from '@storybook/addon-docs/blocks' + +import { Colors } from '../Colors' + +import { haymarket } from '../../../lib/tokens' + + + +# Colors: Haymarket + + diff --git a/packages/design-system/.storybook/content/colors/hotelNorge.mdx b/packages/design-system/.storybook/content/colors/hotelNorge.mdx new file mode 100644 index 000000000..ef2d24aa5 --- /dev/null +++ b/packages/design-system/.storybook/content/colors/hotelNorge.mdx @@ -0,0 +1,11 @@ +import { Meta } from '@storybook/addon-docs/blocks' + +import { Colors } from '../Colors' + +import { hotelNorge } from '../../../lib/tokens' + + + +# Colors: Hotel Norge + + diff --git a/packages/design-system/.storybook/content/colors/index.mdx b/packages/design-system/.storybook/content/colors/index.mdx new file mode 100644 index 000000000..1213b5989 --- /dev/null +++ b/packages/design-system/.storybook/content/colors/index.mdx @@ -0,0 +1,40 @@ +import { Meta } from '@storybook/addon-docs/blocks' + +import { Colors } from '../Colors' + +import { + base, + scandic, + scandicGo, + downtownCamper, + haymarket, + marski, + hotelNorge, + grandHotel, + theDock, +} from '../../../lib/tokens' + + + +# Colors + +Select a theme to view all available color tokens. Click on any value to copy it to your clipboard. + + diff --git a/packages/design-system/.storybook/content/colors/marski.mdx b/packages/design-system/.storybook/content/colors/marski.mdx new file mode 100644 index 000000000..f4f06623d --- /dev/null +++ b/packages/design-system/.storybook/content/colors/marski.mdx @@ -0,0 +1,11 @@ +import { Meta } from '@storybook/addon-docs/blocks' + +import { Colors } from '../Colors' + +import { marski } from '../../../lib/tokens' + + + +# Colors: Marski + + diff --git a/packages/design-system/.storybook/content/colors/scandic.mdx b/packages/design-system/.storybook/content/colors/scandic.mdx new file mode 100644 index 000000000..8a769c7c2 --- /dev/null +++ b/packages/design-system/.storybook/content/colors/scandic.mdx @@ -0,0 +1,11 @@ +import { Meta } from '@storybook/addon-docs/blocks' + +import { Colors } from '../Colors' + +import { scandic } from '../../../lib/tokens' + + + +# Colors: Scandic + + diff --git a/packages/design-system/.storybook/content/colors/scandicGo.mdx b/packages/design-system/.storybook/content/colors/scandicGo.mdx new file mode 100644 index 000000000..9c6a5980a --- /dev/null +++ b/packages/design-system/.storybook/content/colors/scandicGo.mdx @@ -0,0 +1,11 @@ +import { Meta } from '@storybook/addon-docs/blocks' + +import { Colors } from '../Colors' + +import { scandicGo } from '../../../lib/tokens' + + + +# Colors: Scandic Go + + diff --git a/packages/design-system/.storybook/content/colors/theDock.mdx b/packages/design-system/.storybook/content/colors/theDock.mdx new file mode 100644 index 000000000..95d63c346 --- /dev/null +++ b/packages/design-system/.storybook/content/colors/theDock.mdx @@ -0,0 +1,11 @@ +import { Meta } from '@storybook/addon-docs/blocks' + +import { Colors } from '../Colors' + +import { theDock } from '../../../lib/tokens' + + + +# Colors: The Dock + + diff --git a/packages/design-system/lib/index.mdx b/packages/design-system/.storybook/content/index.mdx similarity index 76% rename from packages/design-system/lib/index.mdx rename to packages/design-system/.storybook/content/index.mdx index 6fb79cf4e..35c9ab31e 100644 --- a/packages/design-system/lib/index.mdx +++ b/packages/design-system/.storybook/content/index.mdx @@ -2,25 +2,31 @@ import { Meta } from '@storybook/addon-docs/blocks' -# Scandic Hotels design system ✨ +# Scandic Hotels Design System ✨ -## Components +The Scandic Hotels Design System is a collection of components, patterns, and utilities that are used to build the Scandic Hotels websites and apps. -### File structure +## Storybook structure + +- Tokens +- Core Components +- Product Components +- Patterns +- Compositions + +## File structure ``` [Component] -β”œβ”€β”€ Compositions/ # A folder with Storybook stories to showcase compositions with other components -β”œβ”€β”€β”€β”€ [CompositionX].stories.tsx # Storybook stories that showcase component compositions -β”œβ”€β”€ [component].module.css # The CSS for the component -β”œβ”€β”€ [Component].stories.tsx # Storybook stories for the component, without compositions +β”œβ”€β”€ [component].module.css # The CSS for the component +β”œβ”€β”€ [Component].stories.tsx # Storybook stories for the component β”œβ”€β”€ [Component].tsx # The main component file β”œβ”€β”€ index.tsx # Entrypoint for the component exports β”œβ”€β”€ types.ts # TypeScript typings for the component └── variants.ts # Class Variance Authority configuration for variants of the component ``` -### Components +## Components Each component of the design system is defined in `lib/components`. @@ -28,8 +34,10 @@ Each component has an `index.tsx` file that exports the component and its option The components that are considered public API from a consumer standpoint **must** have Storybook stories that showcases and documents their use. It should at least contain one default story that showcases the component by itself in its default state. More stories are added to showcase other variants or usages of the component. +The typings for each components live in their respective `types.ts` file inside the component folder. + +## Styling + Styling is done with CSS modules. Variants are implemented with [Class Variance Authority](https://cva.style/). - -The typings for each components live in their respective `types.ts` file inside the component folder. diff --git a/packages/design-system/.storybook/content/tokens.module.css b/packages/design-system/.storybook/content/tokens.module.css new file mode 100644 index 000000000..2fa648e96 --- /dev/null +++ b/packages/design-system/.storybook/content/tokens.module.css @@ -0,0 +1,141 @@ +.tableContainer { + width: 100%; + overflow-x: auto; + margin-top: 1.5rem; +} + +.table { + width: 100%; + border-collapse: collapse; + background: #fff; + border-radius: 8px; + overflow: hidden; + box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1); +} + +.tableHeader { + background: #f9fafb; + border-bottom: 2px solid #e5e7eb; +} + +.tableHeaderCell { + padding: 0.75rem 1rem; + text-align: left; + font-weight: 600; + font-size: 0.875rem; + color: #374151; + border-right: 1px solid #e5e7eb; +} + +.tableHeaderCell:last-child { + border-right: none; +} + +.tableRow { + border-bottom: 1px solid #e5e7eb; + transition: background-color 0.15s ease; +} + +.tableRow:hover { + background-color: #f9fafb; +} + +.tableRow:last-child { + border-bottom: none; +} + +.tableCell { + padding: 0.75rem 1rem; + font-size: 0.875rem; + color: #111827; + border-right: 1px solid #e5e7eb; + vertical-align: middle; +} + +.tableCell:last-child { + border-right: none; +} + +.tokenName { + font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; + background: #f3f4f6; + padding: 0.25rem 0.5rem; + border-radius: 4px; + display: inline-block; + cursor: pointer; + transition: all 0.15s ease; + border: 1px solid transparent; +} + +.tokenName:hover { + background: #e5e7eb; + border-color: #d1d5db; +} + +.value { + font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; + color: #6b7280; + cursor: pointer; + transition: color 0.15s ease; +} + +.value:hover { + color: #111827; +} + +.visualBar { + height: 24px; + background: #3b82f6; + border-radius: 4px; + min-width: 2px; + transition: all 0.15s ease; +} + +.visualBarContainer { + display: flex; + align-items: center; + gap: 0.75rem; +} + +.visualBarLabel { + font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace; + font-size: 0.75rem; + color: #6b7280; + min-width: 40px; + text-align: right; +} + +.shadowPreview { + width: 60px; + height: 60px; + background: #fff; + border-radius: 8px; + border: 1px solid #e5e7eb; + display: flex; + align-items: center; + justify-content: center; +} + +.borderRadiusPreview { + width: 60px; + height: 60px; + background: #3b82f6; + display: flex; + align-items: center; + justify-content: center; + color: #fff; + font-size: 0.75rem; + font-weight: 600; +} + +@media (max-width: 768px) { + .tableContainer { + overflow-x: scroll; + } + + .tableHeaderCell, + .tableCell { + padding: 0.5rem 0.75rem; + font-size: 0.8125rem; + } +} diff --git a/packages/design-system/.storybook/main.ts b/packages/design-system/.storybook/main.ts index 35c56f93f..7333ae09b 100644 --- a/packages/design-system/.storybook/main.ts +++ b/packages/design-system/.storybook/main.ts @@ -3,7 +3,11 @@ import { mergeConfig } from 'vite' const config: StorybookConfig = { framework: '@storybook/nextjs-vite', - stories: ['../lib/**/*.mdx', '../lib/**/*.stories.@(js|jsx|mjs|ts|tsx)'], + stories: [ + '../lib/**/*.mdx', + '../lib/**/*.stories.@(js|jsx|mjs|ts|tsx)', + './content/**/*.mdx', + ], addons: [ '@storybook/addon-links', '@storybook/addon-themes', diff --git a/packages/design-system/.storybook/preview.tsx b/packages/design-system/.storybook/preview.tsx index a3c1fab5b..d1f636fda 100644 --- a/packages/design-system/.storybook/preview.tsx +++ b/packages/design-system/.storybook/preview.tsx @@ -60,7 +60,15 @@ const preview: Preview = { options: { storySort: { - order: ['Introduction', 'Global', 'Components', 'Compositions', '*'], + order: [ + 'Introduction', + 'Tokens', + 'Core Components', + 'Product Components', + 'Patterns', + 'Compositions', + '*', + ], }, }, diff --git a/packages/design-system/lib/components/Accordion/Accordion.stories.tsx b/packages/design-system/lib/components/Accordion/Accordion.stories.tsx index e07224cc5..6416c12f7 100644 --- a/packages/design-system/lib/components/Accordion/Accordion.stories.tsx +++ b/packages/design-system/lib/components/Accordion/Accordion.stories.tsx @@ -7,7 +7,7 @@ import { IconName } from '../Icons/iconName' import { Typography } from '../Typography' const meta: Meta = { - title: 'Components/Accordion', + title: 'Core Components/Accordion', component: Accordion, argTypes: { type: { diff --git a/packages/design-system/lib/components/Alert/Alert.stories.tsx b/packages/design-system/lib/components/Alert/Alert.stories.tsx index acb34282b..1b90566b7 100644 --- a/packages/design-system/lib/components/Alert/Alert.stories.tsx +++ b/packages/design-system/lib/components/Alert/Alert.stories.tsx @@ -4,7 +4,7 @@ import { AlertTypeEnum } from '@scandic-hotels/common/constants/alert' import { expect, fn } from 'storybook/test' const meta: Meta = { - title: 'Components/Alert', + title: 'Core Components/Alert', component: Alert, parameters: { layout: 'centered', diff --git a/packages/design-system/lib/components/Avatar/Avatar.stories.tsx b/packages/design-system/lib/components/Avatar/Avatar.stories.tsx index db7343513..901dc4800 100644 --- a/packages/design-system/lib/components/Avatar/Avatar.stories.tsx +++ b/packages/design-system/lib/components/Avatar/Avatar.stories.tsx @@ -4,7 +4,7 @@ import { Avatar } from '.' import { config } from './variants' const meta: Meta = { - title: 'Components/Avatar', + title: 'Core Components/Avatar', component: Avatar, parameters: { layout: 'centered', diff --git a/packages/design-system/lib/components/BackToTopButton/BackToTopButton.stories.tsx b/packages/design-system/lib/components/BackToTopButton/BackToTopButton.stories.tsx index ccb331f5a..eb2711b4e 100644 --- a/packages/design-system/lib/components/BackToTopButton/BackToTopButton.stories.tsx +++ b/packages/design-system/lib/components/BackToTopButton/BackToTopButton.stories.tsx @@ -6,7 +6,7 @@ import { BackToTopButton } from '.' import { config as backToTopButtonConfig } from './variants' const meta: Meta = { - title: 'Components/BackToTopButton', + title: 'Patterns/BackToTopButton', component: BackToTopButton, argTypes: { onPress: { diff --git a/packages/design-system/lib/components/Badge/Badge.stories.tsx b/packages/design-system/lib/components/Badge/Badge.stories.tsx index 696265502..6718988ac 100644 --- a/packages/design-system/lib/components/Badge/Badge.stories.tsx +++ b/packages/design-system/lib/components/Badge/Badge.stories.tsx @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/nextjs-vite' import { Badge } from './Badge.tsx' const meta: Meta = { - title: 'Components/Badge', + title: 'Core Components/Badge', component: Badge, } diff --git a/packages/design-system/lib/components/BookingCodeChip/BookingCodeChip.stories.tsx b/packages/design-system/lib/components/BookingCodeChip/BookingCodeChip.stories.tsx index 8b9ae4d1d..ed970a8e4 100644 --- a/packages/design-system/lib/components/BookingCodeChip/BookingCodeChip.stories.tsx +++ b/packages/design-system/lib/components/BookingCodeChip/BookingCodeChip.stories.tsx @@ -3,7 +3,7 @@ import { fn } from 'storybook/test' import { BookingCodeChip } from './index' const meta = { - title: 'Components/BookingCodeChip', + title: 'Product Components/BookingCodeChip', component: BookingCodeChip, parameters: { layout: 'centered', diff --git a/packages/design-system/lib/components/Button/Button.stories.tsx b/packages/design-system/lib/components/Button/Button.stories.tsx index 9935228a5..b615cc583 100644 --- a/packages/design-system/lib/components/Button/Button.stories.tsx +++ b/packages/design-system/lib/components/Button/Button.stories.tsx @@ -8,7 +8,7 @@ import { Button } from './Button' import { config as buttonConfig } from './variants' const meta: Meta = { - title: 'Components/Button', + title: 'Core Components/Button', component: Button, argTypes: { onPress: { diff --git a/packages/design-system/lib/components/ButtonLink/ButtonLink.stories.tsx b/packages/design-system/lib/components/ButtonLink/ButtonLink.stories.tsx index 8f7ee0405..983e02d70 100644 --- a/packages/design-system/lib/components/ButtonLink/ButtonLink.stories.tsx +++ b/packages/design-system/lib/components/ButtonLink/ButtonLink.stories.tsx @@ -8,7 +8,7 @@ import { MaterialIcon } from '../Icons/MaterialIcon' import { config as typographyConfig } from '../Typography/variants' const meta: Meta = { - title: 'Components/ButtonLink', + title: 'Core Components/ButtonLink', component: ButtonLink, argTypes: { onClick: { diff --git a/packages/design-system/lib/components/Card/Card.stories.tsx b/packages/design-system/lib/components/Card/Card.stories.tsx index e450af9e7..1e8b9003b 100644 --- a/packages/design-system/lib/components/Card/Card.stories.tsx +++ b/packages/design-system/lib/components/Card/Card.stories.tsx @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/nextjs-vite' import { Card } from './Card.tsx' const meta: Meta = { - title: 'Components/Card', + title: 'Core Components/Card', component: Card, } diff --git a/packages/design-system/lib/components/ChipButton/ChipButton.stories.tsx b/packages/design-system/lib/components/ChipButton/ChipButton.stories.tsx index 6dc78a3c2..065e3ef54 100644 --- a/packages/design-system/lib/components/ChipButton/ChipButton.stories.tsx +++ b/packages/design-system/lib/components/ChipButton/ChipButton.stories.tsx @@ -7,7 +7,7 @@ import { ChipButton } from './ChipButton.tsx' import { config as chipButtonConfig } from './variants' const meta: Meta = { - title: 'Components/Chip/ChipButton', + title: 'Core Components/ChipButton', component: ChipButton, argTypes: { variant: { diff --git a/packages/design-system/lib/components/ChipLink/ChipLink.stories.tsx b/packages/design-system/lib/components/ChipLink/ChipLink.stories.tsx index 9c2a7838f..a63573ed6 100644 --- a/packages/design-system/lib/components/ChipLink/ChipLink.stories.tsx +++ b/packages/design-system/lib/components/ChipLink/ChipLink.stories.tsx @@ -4,7 +4,7 @@ import { MaterialIcon } from '../Icons/MaterialIcon' import { ChipLink } from './ChipLink.tsx' const meta: Meta = { - title: 'Components/Chip/ChipLink', + title: 'Core Components/ChipLink', component: ChipLink, } diff --git a/packages/design-system/lib/components/Divider/Divider.stories.tsx b/packages/design-system/lib/components/Divider/Divider.stories.tsx index f83368482..2d02e68a7 100644 --- a/packages/design-system/lib/components/Divider/Divider.stories.tsx +++ b/packages/design-system/lib/components/Divider/Divider.stories.tsx @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/nextjs-vite' import { Divider } from './Divider' const meta: Meta = { - title: 'Components/Divider', + title: 'Core Components/Divider', component: Divider, argTypes: {}, } diff --git a/packages/design-system/lib/components/FacilityToIcon/FacilityToIcon.stories.tsx b/packages/design-system/lib/components/FacilityToIcon/FacilityToIcon.stories.tsx index 8c94b4598..caf551c8d 100644 --- a/packages/design-system/lib/components/FacilityToIcon/FacilityToIcon.stories.tsx +++ b/packages/design-system/lib/components/FacilityToIcon/FacilityToIcon.stories.tsx @@ -12,7 +12,7 @@ const facilityMapping: Record = Object.fromEntries( const colorOptions = Object.keys(iconVariantConfig.variants.color) const meta: Meta = { - title: 'Components/Facility To Icon', + title: 'Core Components/Facility To Icon', component: FacilityToIcon, argTypes: { id: { diff --git a/packages/design-system/lib/components/Form/Checkbox/Checkbox.stories.tsx b/packages/design-system/lib/components/Form/Checkbox/Checkbox.stories.tsx deleted file mode 100644 index c674b5965..000000000 --- a/packages/design-system/lib/components/Form/Checkbox/Checkbox.stories.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/nextjs-vite' - -import Checkbox from './index' -import { FormDecorator } from '../../../../.storybook/decorators/FormDecorator' - -const meta: Meta = { - title: 'Components/Form/Checkbox', - component: Checkbox, - decorators: [FormDecorator], - args: { name: 'checkbox' }, -} -export default meta - -type Story = StoryObj - -export const Default: Story = { - args: {}, -} diff --git a/packages/design-system/lib/components/Form/PaymentOption/PaymentOptionsGroup.stories.tsx b/packages/design-system/lib/components/Form/PaymentOption/PaymentOptionsGroup.stories.tsx index 7bd5b0290..532f3ba7e 100644 --- a/packages/design-system/lib/components/Form/PaymentOption/PaymentOptionsGroup.stories.tsx +++ b/packages/design-system/lib/components/Form/PaymentOption/PaymentOptionsGroup.stories.tsx @@ -7,7 +7,7 @@ import { PaymentMethodEnum } from '@scandic-hotels/common/constants/paymentMetho import { FormDecorator } from '../../../../.storybook/decorators/FormDecorator' const meta: Meta = { - title: 'Components/Payment/PaymentOptionsGroup', + title: 'Patterns/Form/Payment/PaymentOptionsGroup', component: PaymentOptionsGroup, decorators: [FormDecorator], } diff --git a/packages/design-system/lib/components/Form/SelectPaymentMethod/SelectPaymentMethod.stories.tsx b/packages/design-system/lib/components/Form/SelectPaymentMethod/SelectPaymentMethod.stories.tsx index d5d292871..34ea354ce 100644 --- a/packages/design-system/lib/components/Form/SelectPaymentMethod/SelectPaymentMethod.stories.tsx +++ b/packages/design-system/lib/components/Form/SelectPaymentMethod/SelectPaymentMethod.stories.tsx @@ -6,7 +6,7 @@ import { PaymentMethodEnum } from '@scandic-hotels/common/constants/paymentMetho import { FormDecorator } from '../../../../.storybook/decorators/FormDecorator' const meta: Meta = { - title: 'Components/Payment/SelectCreditCard', + title: 'Patterns/Form/Payment/SelectCreditCard', component: SelectPaymentMethod, argTypes: {}, decorators: [FormDecorator], diff --git a/packages/design-system/lib/components/HotelCard/HotelCard.stories.tsx b/packages/design-system/lib/components/HotelCard/HotelCard.stories.tsx index d6db9656f..f627b03a7 100644 --- a/packages/design-system/lib/components/HotelCard/HotelCard.stories.tsx +++ b/packages/design-system/lib/components/HotelCard/HotelCard.stories.tsx @@ -7,7 +7,7 @@ import { Button } from '../Button' import { MaterialIcon } from '../Icons/MaterialIcon' const meta: Meta = { - title: 'Components/HotelCard', + title: 'Product Components/HotelCard/HotelCard', component: HotelCard, argTypes: { state: { diff --git a/packages/design-system/lib/components/HotelCard/HotelDialogCard/StandaloneHotelCardDialog/StandaloneHotelCardDialog.stories.tsx b/packages/design-system/lib/components/HotelCard/HotelDialogCard/StandaloneHotelCardDialog/StandaloneHotelCardDialog.stories.tsx index 1eb44501e..b46b2cfcf 100644 --- a/packages/design-system/lib/components/HotelCard/HotelDialogCard/StandaloneHotelCardDialog/StandaloneHotelCardDialog.stories.tsx +++ b/packages/design-system/lib/components/HotelCard/HotelDialogCard/StandaloneHotelCardDialog/StandaloneHotelCardDialog.stories.tsx @@ -6,7 +6,7 @@ import { fn } from 'storybook/test' import { hotelPins } from '../../../Map/InteractiveMap/storybookData' const meta: Meta = { - title: 'Components/StandaloneHotelCardDialog', + title: 'Product Components/HotelCard/StandaloneHotelCardDialog', component: StandaloneHotelCardDialog, argTypes: {}, } diff --git a/packages/design-system/lib/components/HotelInfoCard/HotelInfoCard.stories.tsx b/packages/design-system/lib/components/HotelInfoCard/HotelInfoCard.stories.tsx index 0551d20ff..d4b24ea5c 100644 --- a/packages/design-system/lib/components/HotelInfoCard/HotelInfoCard.stories.tsx +++ b/packages/design-system/lib/components/HotelInfoCard/HotelInfoCard.stories.tsx @@ -6,8 +6,9 @@ import { fn } from 'storybook/test' import { Button } from '../Button' import { MaterialIcon } from '../Icons/MaterialIcon' import { HotelInfoCard } from './index' + const meta: Meta = { - title: 'Components/HotelInfoCard', + title: 'Product Components/HotelInfoCard', component: HotelInfoCard, argTypes: {}, } diff --git a/packages/design-system/lib/components/IconButton/IconButton.stories.tsx b/packages/design-system/lib/components/IconButton/IconButton.stories.tsx index 71ad53444..78d887469 100644 --- a/packages/design-system/lib/components/IconButton/IconButton.stories.tsx +++ b/packages/design-system/lib/components/IconButton/IconButton.stories.tsx @@ -7,7 +7,7 @@ import { IconButton } from './IconButton' import { config } from './variants' const meta: Meta = { - title: 'Components/IconButton', + title: 'Core Components/IconButton', component: IconButton, argTypes: { onPress: { diff --git a/packages/design-system/lib/components/Icons/MaterialIcon/MaterialIcon.tsx b/packages/design-system/lib/components/Icons/MaterialIcon/MaterialIcon.tsx index af6ce2287..25890f2d4 100644 --- a/packages/design-system/lib/components/Icons/MaterialIcon/MaterialIcon.tsx +++ b/packages/design-system/lib/components/Icons/MaterialIcon/MaterialIcon.tsx @@ -7,7 +7,8 @@ import { HTMLAttributes } from 'react' import { getIconAriaProps } from '../utils' export interface MaterialIconProps - extends Pick, + extends + Pick, Omit, 'color' | 'id'>, VariantProps { isFilled?: boolean diff --git a/packages/design-system/lib/components/InfoBox/InfoBox.stories.tsx b/packages/design-system/lib/components/InfoBox/InfoBox.stories.tsx index 0882c6746..c33090e57 100644 --- a/packages/design-system/lib/components/InfoBox/InfoBox.stories.tsx +++ b/packages/design-system/lib/components/InfoBox/InfoBox.stories.tsx @@ -4,7 +4,7 @@ import { InfoBox, Props } from './InfoBox' import { IconName } from '../Icons/iconName' const meta: Meta = { - title: 'Components/InfoBox', + title: 'Core Components/InfoBox', component: InfoBox, parameters: { layout: 'padded', diff --git a/packages/design-system/lib/components/InfoCard/InfoCard.stories.tsx b/packages/design-system/lib/components/InfoCard/InfoCard.stories.tsx index e1bf8c470..a4e2ca69c 100644 --- a/packages/design-system/lib/components/InfoCard/InfoCard.stories.tsx +++ b/packages/design-system/lib/components/InfoCard/InfoCard.stories.tsx @@ -20,7 +20,7 @@ const DEFAULT_ARGS = { } const meta: Meta = { - title: 'Components/InfoCard', + title: 'Product Components/InfoCard', component: InfoCard, argTypes: { topTitle: { diff --git a/packages/design-system/lib/components/Input/Input.stories.tsx b/packages/design-system/lib/components/Input/Input.stories.tsx index 6c65fd836..2be91ac8b 100644 --- a/packages/design-system/lib/components/Input/Input.stories.tsx +++ b/packages/design-system/lib/components/Input/Input.stories.tsx @@ -6,7 +6,7 @@ import { Input } from './Input' import { TextField } from 'react-aria-components' const meta: Meta = { - title: 'Components/Input', + title: 'Core Components/Input', // @ts-expect-error Input does not support this, but wrapping does component: ({ isInvalid, ...props }) => ( diff --git a/packages/design-system/lib/components/InputLabel/InputLabel.stories.tsx b/packages/design-system/lib/components/InputLabel/InputLabel.stories.tsx index 68c512c32..3538a2390 100644 --- a/packages/design-system/lib/components/InputLabel/InputLabel.stories.tsx +++ b/packages/design-system/lib/components/InputLabel/InputLabel.stories.tsx @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/nextjs-vite' import { InputLabel } from './InputLabel' const meta: Meta = { - title: 'Components/InputLabel', + title: 'Core Components/InputLabel', component: InputLabel, argTypes: {}, } diff --git a/packages/design-system/lib/components/InputNew/Input.stories.tsx b/packages/design-system/lib/components/InputNew/Input.stories.tsx index a4e1b3393..4e00dab14 100644 --- a/packages/design-system/lib/components/InputNew/Input.stories.tsx +++ b/packages/design-system/lib/components/InputNew/Input.stories.tsx @@ -7,7 +7,7 @@ import { TextField } from 'react-aria-components' import { MaterialIcon } from '../Icons/MaterialIcon' const meta: Meta = { - title: 'Components/Input (New)', + title: 'Core Components/Input (New)', // @ts-expect-error Input does not support this, but wrapping does component: ({ isInvalid, validationState, ...props }) => ( diff --git a/packages/design-system/lib/components/JsonToHtml/JsonToHtml.stories.tsx b/packages/design-system/lib/components/JsonToHtml/JsonToHtml.stories.tsx index b30b67aba..76b35f80c 100644 --- a/packages/design-system/lib/components/JsonToHtml/JsonToHtml.stories.tsx +++ b/packages/design-system/lib/components/JsonToHtml/JsonToHtml.stories.tsx @@ -5,7 +5,7 @@ import { RTETypeEnum } from './types/rte/enums' import { RTEImageVaultNode, RTENode } from './types/rte/node' const meta: Meta = { - title: 'Components/JsonToHtml', + title: 'Core Components/JsonToHtml', component: JsonToHtml, } diff --git a/packages/design-system/lib/components/LinkList/LinkList.stories.tsx b/packages/design-system/lib/components/LinkList/LinkList.stories.tsx index cf146f149..7fb646bd3 100644 --- a/packages/design-system/lib/components/LinkList/LinkList.stories.tsx +++ b/packages/design-system/lib/components/LinkList/LinkList.stories.tsx @@ -4,7 +4,7 @@ import { IconName } from '../Icons/iconName' import type { LinkListItemProps } from './LinkListItem' const meta: Meta = { - title: 'Components/LinkList', + title: 'Core Components/LinkList/LinkList', component: LinkList, argTypes: {}, } diff --git a/packages/design-system/lib/components/LinkList/LinkListItem/LinkListItem.stories.tsx b/packages/design-system/lib/components/LinkList/LinkListItem/LinkListItem.stories.tsx index e2916d4c9..675121ad2 100644 --- a/packages/design-system/lib/components/LinkList/LinkListItem/LinkListItem.stories.tsx +++ b/packages/design-system/lib/components/LinkList/LinkListItem/LinkListItem.stories.tsx @@ -3,7 +3,7 @@ import { LinkListItem } from './index' import { IconName } from '../../Icons/iconName' const meta: Meta = { - title: 'Components/LinkListItem', + title: 'Core Components/LinkList/LinkListItem', component: LinkListItem, argTypes: { isExternal: { diff --git a/packages/design-system/lib/components/Loading/Loading.stories.tsx b/packages/design-system/lib/components/Loading/Loading.stories.tsx index d911605cf..5cb1c3a1b 100644 --- a/packages/design-system/lib/components/Loading/Loading.stories.tsx +++ b/packages/design-system/lib/components/Loading/Loading.stories.tsx @@ -4,7 +4,7 @@ import { Loading } from './Loading' import { config } from './variants' const meta: Meta = { - title: 'Components/Loading', + title: 'Patterns/Loading', component: Loading, argTypes: { type: { diff --git a/packages/design-system/lib/components/LoadingSpinner/LoadingSpinner.stories.tsx b/packages/design-system/lib/components/LoadingSpinner/LoadingSpinner.stories.tsx index 19ec3ba17..576afc51e 100644 --- a/packages/design-system/lib/components/LoadingSpinner/LoadingSpinner.stories.tsx +++ b/packages/design-system/lib/components/LoadingSpinner/LoadingSpinner.stories.tsx @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/nextjs-vite' import { LoadingSpinner } from './index' const meta: Meta = { - title: 'Components/LoadingSpinner', + title: 'Patterns/LoadingSpinner', component: LoadingSpinner, argTypes: { fullPage: { diff --git a/packages/design-system/lib/components/Map/InteractiveMap/InteractiveMap.stories.tsx b/packages/design-system/lib/components/Map/InteractiveMap/InteractiveMap.stories.tsx index 0c182e364..db4c3b8dc 100644 --- a/packages/design-system/lib/components/Map/InteractiveMap/InteractiveMap.stories.tsx +++ b/packages/design-system/lib/components/Map/InteractiveMap/InteractiveMap.stories.tsx @@ -8,7 +8,7 @@ import { InteractiveMap } from '.' import { hotelPins } from './storybookData' const meta: Meta = { - title: 'Components/Map/Interactive Map', + title: 'Patterns/Map/Interactive Map', component: InteractiveMap, argTypes: {}, } diff --git a/packages/design-system/lib/components/Map/Markers/HotelMarkerByType.stories.tsx b/packages/design-system/lib/components/Map/Markers/HotelMarkerByType.stories.tsx index 79936177b..233a59c69 100644 --- a/packages/design-system/lib/components/Map/Markers/HotelMarkerByType.stories.tsx +++ b/packages/design-system/lib/components/Map/Markers/HotelMarkerByType.stories.tsx @@ -5,7 +5,7 @@ import { SignatureHotelEnum } from '@scandic-hotels/common/constants/signatureHo import { Typography } from '../../Typography' const meta: Meta = { - title: 'Components/Map/Hotel Marker By Type', + title: 'Patterns/Map/Hotel Marker By Type', component: HotelMarkerByType, argTypes: { hotelType: { diff --git a/packages/design-system/lib/components/MessageBanner/MessageBanner.stories.tsx b/packages/design-system/lib/components/MessageBanner/MessageBanner.stories.tsx index ce83901ed..49a7c796a 100644 --- a/packages/design-system/lib/components/MessageBanner/MessageBanner.stories.tsx +++ b/packages/design-system/lib/components/MessageBanner/MessageBanner.stories.tsx @@ -5,7 +5,7 @@ type MessageBannerType = 'default' | 'error' | 'info' type TextColor = 'default' | 'error' const meta: Meta = { - title: 'Components/MessageBanner', + title: 'Core Components/MessageBanner', component: MessageBanner, argTypes: { type: { diff --git a/packages/design-system/lib/components/OldDSLink/OldDSLink.stories.tsx b/packages/design-system/lib/components/OldDSLink/OldDSLink.stories.tsx deleted file mode 100644 index 6fc88354d..000000000 --- a/packages/design-system/lib/components/OldDSLink/OldDSLink.stories.tsx +++ /dev/null @@ -1,71 +0,0 @@ -import type { Meta, StoryObj } from '@storybook/nextjs-vite' - -import { expect } from 'storybook/test' -import OldDSLink from '.' - -const meta: Meta = { - title: 'Components/OldDSLink', - component: OldDSLink, - argTypes: { - size: { - control: 'select', - options: ['small', 'regular', 'tiny', 'none'], - }, - scroll: { - table: { - disable: true, - }, - }, - prefetch: { - table: { - disable: true, - }, - }, - partialMatch: { - table: { - disable: true, - }, - }, - }, -} - -export default meta - -type Story = StoryObj - -export const Default: Story = { - args: { - active: false, - href: 'https://www.scandichotels.com/en', - }, - render: (args) => {args.href}, - play: async ({ canvasElement }) => { - const link = canvasElement.querySelector('a') - if (!link) throw new Error('Link not found') - expect(link).toBeInTheDocument() - }, -} - -export const Focused: Story = { - args: { - ...Default.args, - }, - render: Default.render, - play: async ({ canvasElement }) => { - const link = canvasElement.querySelector('a') - if (!link) throw new Error('Link not found') - expect(link).toBeInTheDocument() - - expect(link).not.toHaveFocus() - let styles = getComputedStyle(link) - expect(styles.outlineStyle).toBe('none') - expect(parseFloat(styles.outlineWidth)).toBe(0) - - link?.focus() - - expect(link).toHaveFocus() - styles = getComputedStyle(link) - expect(styles.outlineStyle).not.toBe('none') - expect(parseFloat(styles.outlineWidth)).toBeGreaterThan(0) - }, -} diff --git a/packages/design-system/lib/components/Payment/PaymentMethodIcon.stories.tsx b/packages/design-system/lib/components/Payment/PaymentMethodIcon.stories.tsx index f4eee3860..06f931ca4 100644 --- a/packages/design-system/lib/components/Payment/PaymentMethodIcon.stories.tsx +++ b/packages/design-system/lib/components/Payment/PaymentMethodIcon.stories.tsx @@ -8,7 +8,7 @@ import { expect } from 'storybook/test' const methods = Object.values(PaymentMethodEnum).toSorted() const meta: Meta = { - title: 'Components/Payment/PaymentMethodIcon', + title: 'Product Components/Payment/PaymentMethodIcon', component: PaymentMethodIcon, parameters: { layout: 'centered', diff --git a/packages/design-system/lib/components/Progress/Progress.stories.tsx b/packages/design-system/lib/components/Progress/Progress.stories.tsx index 16948491e..23ed31571 100644 --- a/packages/design-system/lib/components/Progress/Progress.stories.tsx +++ b/packages/design-system/lib/components/Progress/Progress.stories.tsx @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/nextjs-vite' import { Progress } from './index' const meta: Meta = { - title: 'Components/Progress', + title: 'Core Components/Progress', component: Progress, parameters: { backgrounds: { disable: true }, diff --git a/packages/design-system/lib/components/RateCard/Campaign/Campaign.stories.tsx b/packages/design-system/lib/components/RateCard/Campaign/Campaign.stories.tsx index 3572e69ec..b6160e06d 100644 --- a/packages/design-system/lib/components/RateCard/Campaign/Campaign.stories.tsx +++ b/packages/design-system/lib/components/RateCard/Campaign/Campaign.stories.tsx @@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/nextjs-vite' import CampaignRateCard from '.' const meta: Meta = { - title: 'Components/RateCard/Campaign', + title: 'Product Components/RateCard/Campaign', component: CampaignRateCard, decorators: [ (Story) => ( diff --git a/packages/design-system/lib/components/RateCard/Code/Code.stories.tsx b/packages/design-system/lib/components/RateCard/Code/Code.stories.tsx index d0b9220df..b834d71c4 100644 --- a/packages/design-system/lib/components/RateCard/Code/Code.stories.tsx +++ b/packages/design-system/lib/components/RateCard/Code/Code.stories.tsx @@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/nextjs-vite' import CodeRateCard from '.' const meta: Meta = { - title: 'Components/RateCard/Code', + title: 'Product Components/RateCard/Code', component: CodeRateCard, decorators: [ (Story) => ( diff --git a/packages/design-system/lib/components/RateCard/NoRateAvailable/NoRateAvailable.stories.tsx b/packages/design-system/lib/components/RateCard/NoRateAvailable/NoRateAvailable.stories.tsx index 6b64728d0..6b619d602 100644 --- a/packages/design-system/lib/components/RateCard/NoRateAvailable/NoRateAvailable.stories.tsx +++ b/packages/design-system/lib/components/RateCard/NoRateAvailable/NoRateAvailable.stories.tsx @@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/nextjs-vite' import NoRateAvailableCard from '.' const meta: Meta = { - title: 'Components/RateCard/NoRateAvailable', + title: 'Product Components/RateCard/NoRateAvailable', component: NoRateAvailableCard, decorators: [ (Story) => ( diff --git a/packages/design-system/lib/components/RateCard/Points/Points.stories.tsx b/packages/design-system/lib/components/RateCard/Points/Points.stories.tsx index 8315abdf8..8b22d74dd 100644 --- a/packages/design-system/lib/components/RateCard/Points/Points.stories.tsx +++ b/packages/design-system/lib/components/RateCard/Points/Points.stories.tsx @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/nextjs-vite' import PointsRateCard from '.' const meta: Meta = { - title: 'Components/RateCard/Points', + title: 'Product Components/RateCard/Points', component: PointsRateCard, decorators: [ (Story) => ( diff --git a/packages/design-system/lib/components/RateCard/Regular/Regular.stories.tsx b/packages/design-system/lib/components/RateCard/Regular/Regular.stories.tsx index 927f63773..d5d60b52d 100644 --- a/packages/design-system/lib/components/RateCard/Regular/Regular.stories.tsx +++ b/packages/design-system/lib/components/RateCard/Regular/Regular.stories.tsx @@ -2,7 +2,7 @@ import type { Meta, StoryObj } from '@storybook/nextjs-vite' import RegularRateCard from '.' const meta: Meta = { - title: 'Components/RateCard/Regular', + title: 'Product Components/RateCard/Regular', component: RegularRateCard, decorators: [ (Story) => ( diff --git a/packages/design-system/lib/components/Select/Select.stories.tsx b/packages/design-system/lib/components/Select/Select.stories.tsx index dc05e7626..479d9754f 100644 --- a/packages/design-system/lib/components/Select/Select.stories.tsx +++ b/packages/design-system/lib/components/Select/Select.stories.tsx @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/nextjs-vite' import { Select } from './Select' const meta: Meta = { - title: 'Components/Select', + title: 'Core Components/Select', component: Select, argTypes: {}, } diff --git a/packages/design-system/lib/components/TextLink/TextLink.stories.tsx b/packages/design-system/lib/components/TextLink/TextLink.stories.tsx index 546ff12d1..8f2e707b1 100644 --- a/packages/design-system/lib/components/TextLink/TextLink.stories.tsx +++ b/packages/design-system/lib/components/TextLink/TextLink.stories.tsx @@ -8,7 +8,7 @@ import { Typography } from '../Typography' import { config } from './variants' const meta: Meta = { - title: 'Components/TextLink', + title: 'Core Components/TextLink', component: TextLink, argTypes: { theme: { diff --git a/packages/design-system/lib/components/Toasts/Toast.stories.tsx b/packages/design-system/lib/components/Toasts/Toast.stories.tsx index 1da9a68e7..8ee732970 100644 --- a/packages/design-system/lib/components/Toasts/Toast.stories.tsx +++ b/packages/design-system/lib/components/Toasts/Toast.stories.tsx @@ -6,7 +6,7 @@ import { expect } from 'storybook/test' import { config } from './variants.ts' const meta: Meta = { - title: 'Components/Toasts/Toast', + title: 'Core Components/Toast/Toast', component: Toast, argTypes: { variant: { diff --git a/packages/design-system/lib/components/Toasts/ToastHandler.stories.tsx b/packages/design-system/lib/components/Toasts/ToastHandler.stories.tsx index 87e8f963c..cad92bb92 100644 --- a/packages/design-system/lib/components/Toasts/ToastHandler.stories.tsx +++ b/packages/design-system/lib/components/Toasts/ToastHandler.stories.tsx @@ -9,7 +9,7 @@ import { Button } from '../Button/Button.tsx' import { expect, waitFor } from 'storybook/test' const meta: Meta = { - title: 'Components/Toasts/ToastHandler', + title: 'Core Components/Toast/ToastHandler', component: Toast, argTypes: { variant: { diff --git a/packages/design-system/lib/components/TripAdvisorChip/TripdAdvisorChip.stories.tsx b/packages/design-system/lib/components/TripAdvisorChip/TripdAdvisorChip.stories.tsx index 37639db4b..23fdae8c4 100644 --- a/packages/design-system/lib/components/TripAdvisorChip/TripdAdvisorChip.stories.tsx +++ b/packages/design-system/lib/components/TripAdvisorChip/TripdAdvisorChip.stories.tsx @@ -3,7 +3,7 @@ import type { Meta, StoryObj } from '@storybook/nextjs-vite' import { TripAdvisorChip } from './index' const meta: Meta = { - title: 'Components/TripAdvisorChip', + title: 'Product Components/TripAdvisorChip', component: TripAdvisorChip, argTypes: { rating: { diff --git a/packages/design-system/lib/components/Typography/Typography.stories.tsx b/packages/design-system/lib/components/Typography/Typography.stories.tsx index 165e3b166..0a4512ad3 100644 --- a/packages/design-system/lib/components/Typography/Typography.stories.tsx +++ b/packages/design-system/lib/components/Typography/Typography.stories.tsx @@ -7,7 +7,7 @@ import TypographyDocs from './Typography.docs.mdx' import { config as typographyConfig } from './variants' const meta: Meta = { - title: 'Components/Typography', + title: 'Core Components/Typography', component: Typography, args: { variant: typographyConfig.defaultVariants.variant }, argTypes: { diff --git a/packages/design-system/lib/components/VideoPlayer/VideoPlayer.stories.tsx b/packages/design-system/lib/components/VideoPlayer/VideoPlayer.stories.tsx index 9d3e32bb3..53ec27129 100644 --- a/packages/design-system/lib/components/VideoPlayer/VideoPlayer.stories.tsx +++ b/packages/design-system/lib/components/VideoPlayer/VideoPlayer.stories.tsx @@ -5,7 +5,7 @@ import { VideoPlayer } from '.' import { config as videoPlayerConfig } from './variants' const meta: Meta = { - title: 'Components/🚧 VideoPlayer 🚧', + title: 'Core Components/🚧 VideoPlayer 🚧', component: VideoPlayer, parameters: { diff --git a/packages/design-system/lib/tokens/Colors.tsx b/packages/design-system/lib/tokens/Colors.tsx deleted file mode 100644 index 5ba418fef..000000000 --- a/packages/design-system/lib/tokens/Colors.tsx +++ /dev/null @@ -1,153 +0,0 @@ -/* eslint-disable formatjs/no-literal-string-in-jsx */ -import copy from 'copy-to-clipboard' - -import { kebabify } from '../../generate/utils' - -export type ThemeValue = Record<'resolved' | 'alias', string | number> - -export type Theme = Record - -export type ColorsProps = { - theme: Theme -} - -import styles from './colors.module.css' - -function getContrastColor(bgColor: string) { - const r = parseInt(bgColor.substring(1, 3), 16) - const g = parseInt(bgColor.substring(3, 5), 16) - const b = parseInt(bgColor.substring(5, 7), 16) - let a = parseInt(bgColor.substring(7, 9), 16) - - if (isNaN(a)) { - a = 255 - } - - const luminance = (0.299 * r + 0.587 * g + 0.114 * b) / 255 - if (luminance > 0.5) { - return '#000' - } else { - if (a < 255 / 2) { - return '#000' - } - return '#fff' - } -} - -export function Colors({ theme }: ColorsProps) { - const grouping: Record = {} - - for (const [k, v] of Object.entries(theme)) { - if (typeof v.resolved === 'string' && v.resolved.startsWith('#')) { - const key = k.replace(/\/[^/]+$/, '') - if (!grouping[key]) { - grouping[key] = {} - } - - grouping[key][k] = v - } - } - - return ( -
-
- - - Click on any of the values to copy to clipboard! - -
-
- {Object.entries(grouping) - .sort((a, b) => { - return a[0].localeCompare(b[0]) - }) - .map(([title, values]) => { - return ( -
-

- {title} -

-
- {Object.entries(values).map(([k, v]) => { - return ( -
-
-
{ - copy(`var(--${kebabify(k)})`) - }} - > - var(--{kebabify(k)}) -
-
-
{ - copy(k) - }} - > - Figma: {k} -
-
{ - copy(kebabify(k)) - }} - > - CSS: {kebabify(k)} -
- {v.alias ? ( -
{ - copy(v.alias.toString()) - }} - > - Alias: {v.alias} -
- ) : null} -
{ - copy(v.resolved.toString()) - }} - > - Value: {v.resolved} -
-
- ) - })} -
-
- ) - })} -
-
- ) -} diff --git a/packages/design-system/lib/tokens/colors.module.css b/packages/design-system/lib/tokens/colors.module.css deleted file mode 100644 index acdd85eaf..000000000 --- a/packages/design-system/lib/tokens/colors.module.css +++ /dev/null @@ -1,130 +0,0 @@ -.container { - display: grid; - gap: 2em; -} - -.jumpTo { - position: sticky; - top: 0; - background: #fff; - padding: 0.5em; - z-index: 100; - border: solid 1px #ccc; - border-radius: 4px; - display: flex; - justify-content: space-between; - align-items: center; - flex-direction: row; - flex-wrap: nowrap; -} - -.jumpTo select { - margin-left: 1em; - padding: 0.3em; - border-radius: 3px; - border: solid 1px #ccc; - font-size: 14px; -} - -.tip { - font-size: 12px !important; - background: #fffcdd; - padding: 0.5em; - border-radius: 4px; - border: solid 1px #e8db45; -} - -.groups { - display: flex; - flex-direction: column; -} - -.title { - font-weight: bold; - padding-top: 60px !important; /* jumpTo element height:ish */ -} - -.values { - display: flex; - flex-wrap: wrap; -} - -.value { - box-sizing: border-box; - width: 50%; - min-width: 500px; - padding: 1em; -} - -.colorContainer { - --opacity: 0.1; - background: - linear-gradient( - 45deg, - rgba(0, 0, 0, var(--opacity)) 25%, - transparent 25%, - transparent 75%, - rgba(0, 0, 0, var(--opacity)) 75%, - rgba(0, 0, 0, var(--opacity)) 0 - ), - linear-gradient( - 45deg, - rgba(0, 0, 0, var(--opacity)) 25%, - transparent 25%, - transparent 75%, - rgba(0, 0, 0, var(--opacity)) 75%, - rgba(0, 0, 0, var(--opacity)) 0 - ), - white; - background-position: - 0px 0, - 5px 5px; - background-size: - 10px 10px, - 10px 10px; - border-radius: 12px; - overflow: hidden; - will-change: transform; - transition: transform 0.2s ease-out; - margin-bottom: 1em; - cursor: pointer; - border: solid 1px #d9d9d9; -} - -.color { - display: flex; - justify-content: center; - align-items: center; - height: 4em; - width: 100%; -} - -.colorContainer:hover { - transform: scale(1.02); -} - -.colorContainer:active { - transform: scale(1.01); -} - -.tokenName, -.tokenValue, -.tokenAlias { - cursor: pointer; - padding: 0.1em 0.5em; - white-space: nowrap; -} - -.tokenName:hover, -.tokenValue:hover, -.tokenAlias:hover { - transform-origin: left; - font-weight: bold; - word-break: break-all; -} - -.tokenName:active, -.tokenValue:active, -.tokenAlias:active { - transform: scale(0.98); -} diff --git a/packages/design-system/lib/tokens/downtownCamper.mdx b/packages/design-system/lib/tokens/downtownCamper.mdx deleted file mode 100644 index 8c6c31929..000000000 --- a/packages/design-system/lib/tokens/downtownCamper.mdx +++ /dev/null @@ -1,11 +0,0 @@ -import { Meta } from '@storybook/addon-docs/blocks' - -import { Colors } from './Colors' - -import { downtownCamper } from '.' - - - -# Colors: Downtown Camper - - diff --git a/packages/design-system/lib/tokens/grandHotel.mdx b/packages/design-system/lib/tokens/grandHotel.mdx deleted file mode 100644 index 14a227132..000000000 --- a/packages/design-system/lib/tokens/grandHotel.mdx +++ /dev/null @@ -1,11 +0,0 @@ -import { Meta } from '@storybook/addon-docs/blocks' - -import { Colors } from './Colors' - -import { grandHotel } from '.' - - - -# Colors: Grand Hotel - - diff --git a/packages/design-system/lib/tokens/haymarket.mdx b/packages/design-system/lib/tokens/haymarket.mdx deleted file mode 100644 index 995b8ee3f..000000000 --- a/packages/design-system/lib/tokens/haymarket.mdx +++ /dev/null @@ -1,11 +0,0 @@ -import { Meta } from '@storybook/addon-docs/blocks' - -import { Colors } from './Colors' - -import { haymarket } from '.' - - - -# Colors: Haymarket - - diff --git a/packages/design-system/lib/tokens/hotelNorge.mdx b/packages/design-system/lib/tokens/hotelNorge.mdx deleted file mode 100644 index e09e27e29..000000000 --- a/packages/design-system/lib/tokens/hotelNorge.mdx +++ /dev/null @@ -1,11 +0,0 @@ -import { Meta } from '@storybook/addon-docs/blocks' - -import { Colors } from './Colors' - -import { hotelNorge } from '.' - - - -# Colors: Hotel Norge - - diff --git a/packages/design-system/lib/tokens/marski.mdx b/packages/design-system/lib/tokens/marski.mdx deleted file mode 100644 index 67fe470d0..000000000 --- a/packages/design-system/lib/tokens/marski.mdx +++ /dev/null @@ -1,11 +0,0 @@ -import { Meta } from '@storybook/addon-docs/blocks' - -import { Colors } from './Colors' - -import { marski } from '.' - - - -# Colors: Marski - - diff --git a/packages/design-system/lib/tokens/scandic.mdx b/packages/design-system/lib/tokens/scandic.mdx deleted file mode 100644 index 704dfa864..000000000 --- a/packages/design-system/lib/tokens/scandic.mdx +++ /dev/null @@ -1,11 +0,0 @@ -import { Meta } from '@storybook/addon-docs/blocks' - -import { Colors } from './Colors' - -import { scandic } from '.' - - - -# Colors: Scandic - - diff --git a/packages/design-system/lib/tokens/scandicGo.mdx b/packages/design-system/lib/tokens/scandicGo.mdx deleted file mode 100644 index 60e661be8..000000000 --- a/packages/design-system/lib/tokens/scandicGo.mdx +++ /dev/null @@ -1,11 +0,0 @@ -import { Meta } from '@storybook/addon-docs/blocks' - -import { Colors } from './Colors' - -import { scandicGo } from '.' - - - -# Colors: Scandic Go - - diff --git a/packages/design-system/lib/tokens/theDock.mdx b/packages/design-system/lib/tokens/theDock.mdx deleted file mode 100644 index 9488ff4e7..000000000 --- a/packages/design-system/lib/tokens/theDock.mdx +++ /dev/null @@ -1,11 +0,0 @@ -import { Meta } from '@storybook/addon-docs/blocks' - -import { Colors } from './Colors' - -import { theDock } from '.' - - - -# Colors: The Dock - - diff --git a/packages/design-system/tsconfig.json b/packages/design-system/tsconfig.json index 5d5240b85..c0b72f2df 100644 --- a/packages/design-system/tsconfig.json +++ b/packages/design-system/tsconfig.json @@ -5,6 +5,12 @@ "noEmit": true, "paths": {} }, - "include": ["example", "lib"], + "include": [ + "example", + "lib", + ".storybook/content/**/*.mdx", + ".storybook/content/**/*.tsx", + "lib/tokens/index.ts" + ], "exclude": ["node_modules", "**/*.test.ts"] } diff --git a/packages/design-system/vite.config.ts b/packages/design-system/vite.config.ts index 92d085c6d..d58330886 100644 --- a/packages/design-system/vite.config.ts +++ b/packages/design-system/vite.config.ts @@ -26,9 +26,10 @@ export default defineConfig({ '**/*.css', '**/*.test.ts', '**/*.stories.tsx', - 'lib/tokens/*.mdx', - 'lib/tokens/*.css', - 'lib/tokens/*.tsx', + '.storybook/content/*.mdx', + '.storybook/content/tokens/**/*.mdx', + '.storybook/content/tokens/**/*.css', + '.storybook/content/tokens/**/*.tsx', ], // rollupTypes: true, bundledPackages: ['class-variance-authority', 'clsx'],