Merged in feat/LOY-400-create-spend-points-modal (pull request #3131)
Feat/LOY-400 create spend points modal * feat(LOY-400): Added custom button to my pages overview and skeleton file to custom modal for my points. * feat(LOY-400): Added custom button to my pages overview and components for custom modal for my points. * feat(LOY-400): Changed some style and infogridcardover * feat(LOY-400):Removed custom card components and changed in infoCard: Added imagePosition top, added optional height prop. In Card: Changed Text-wrap styling, added min-width styling to buttons, added optional Icon prop, added optional height prop * feat(LOY-400):Added linkList, LinkListItem component and messageBanner component. Added granola illustration. * feat(LOY-400): Removed background in several illustrations. Added component for illustration. Fixed LinkedList and styling for UsePointsButton. * feat(LOY-400): Added modal to PointsToSpendCard and fixed UsePointsButton. * fix(LOY-400):added some styling * feat(LOY-400): Linked Modal to contentstack and fetch the data in cards with UsePointsModal for now * feat(LOY-400): changed link to aria-component, cleaned up a bit * feat(LOY-400): Changed height for larger modals in mobile, fixed zod schema for no illustration input, cleaned up * fix(LOY-400): fixed graphql after rebase * fix(LOY-400): mini fix * fix(LOY-400): fixed pr-comments * fix(LOY-400): fixed some PR-comments * fix(LOY-400): fixed a PR-comment * feat(LOY-400): added size prop to ilustration in LinkListItem to be able to use illustrations in IllustrationByIconName * fix(LOY-400): fixed pr-comments * Merged in feat/LOY-402-pre-ticked-book-reward-night-in-booking-flow (pull request #3210) Feat/LOY-402 pre ticked book reward night in booking flow * feat(LOY-402): Changed UsePointsModal structure to handle button actions in card. * feat(LOY-402): added functionality for book now button * feat(LOY-400): pr comment fix * feat(LOY-402): transformed the contentstack data * fix(LOY-402): fixed pr comments Approved-by: Chuma Mcphoy (We Ahead) Approved-by: Anton Gunnarsson Approved-by: Matilda Landström * Merged in feat/LOY-404-add-tracking-for-spend-points-modal (pull request #3229) Feat/LOY-404 add tracking for spend points modal * feat(LOY-402): Changed UsePointsModal structure to handle button actions in card. * feat(LOY-402): added functionality for book now button * feat(LOY-400): pr comment fix * feat(LOY-402): transformed the contentstack data * feat(LOY-404): added tracking * fix(LOY-404): fix for session storage removal of bookNowFromPointsModal * feat(LOY-404): added consts * fix(LOY-404): moved foxusWidget const * fix(LOY-404): moved BOOKING_WIDGET_STATE const * fix(LOY-404):fix Approved-by: Matilda Landström * fix(LOY-400): some fixes * feat(LOY-400): created linkList storybook Approved-by: Chuma Mcphoy (We Ahead) Approved-by: Matilda Landström
This commit is contained in:
Emma Zettervall
@@ -4,6 +4,7 @@ import CroissantCoffeeEggIcon from './Illustrations/CroissantCoffeeEgg'
|
||||
import CutleryOneIcon from './Illustrations/CutleryOne'
|
||||
import CutleryTwoIcon from './Illustrations/CutleryTwo'
|
||||
import GiftOpenIcon from './Illustrations/GiftOpen'
|
||||
import GranolaIcon from './Illustrations/Granola'
|
||||
import HandKeyIcon from './Illustrations/HandKey'
|
||||
import HotelNightIcon from './Illustrations/HotelNight'
|
||||
import KidsIcon from './Illustrations/Kids'
|
||||
@@ -35,6 +36,8 @@ export function IllustrationByIconName(iconName: IconName | null) {
|
||||
return HotelNightIcon
|
||||
case IconName.GiftOpen:
|
||||
return GiftOpenIcon
|
||||
case IconName.Granola:
|
||||
return GranolaIcon
|
||||
case IconName.CutleryOne:
|
||||
return CutleryOneIcon
|
||||
case IconName.CutleryTwo:
|
||||
|
||||
@@ -12,7 +12,6 @@ export default function BedIcon(props: IllustrationProps) {
|
||||
{...props}
|
||||
{...ariaProps}
|
||||
>
|
||||
<path fill="#fff" d="M0 .75h358v201.375H0z" />
|
||||
<g fill="#cd0921">
|
||||
<path d="M175.163 98.517c-2.923-7.732-3.138-25.751-.561-34.552v-.012q.205-.7.436-1.319a.86.86 0 0 0-.609-1.133.9.9 0 0 0-.286-.012q-.038-.002-.066.006c-1.259.256-2.816.477-4.6.668l-.68.072q-.688.07-1.42.13c-.973.084-1.993.162-3.049.233q-1.192.081-2.446.144c-.555.03-1.122.053-1.695.083l-1.736.072-1.552.053c-.143 0-.292.006-.435.012-.525.012-1.05.03-1.581.042l-1.82.036-1.193.018-2.268.018h-2.255c-.543 0-1.086 0-1.629-.012-.978-.012-1.945-.024-2.906-.048-.471-.012-.942-.018-1.408-.036-.125 0-.244-.006-.37-.012-.465-.012-.93-.03-1.39-.041a219 219 0 0 1-3.705-.156q-1.146-.06-2.238-.13c-3.609-.24-6.694-.574-8.848-1.01a.853.853 0 0 0-.996.633.83.83 0 0 0 .017.448c.633 2.052 1.737 5.936 2.077 9.021l.465 7.452c.137 6.725-.453 13.658-1.772 18.169q-.204.706-.435 1.33a.85.85 0 0 0 .501 1.098q.053.02.107.03a.9.9 0 0 0 .352 0c.102-.018.209-.042.316-.06.179-.035.364-.065.555-.101a53 53 0 0 1 2.787-.4 87 87 0 0 1 1.748-.19c.823-.084 1.694-.156 2.601-.228 7.393-.572 17.184-.733 25.704-.47 2.339.112 4.684.226 7.023.333.209.012.418.03.621.042h.006q.615.043 1.205.096h.012q.589.046 1.151.1h.012l.549.055h.036l.513.053h.048l.483.054c.03 0 .054.006.084.012.143.018.292.036.435.048q.045.001.09.012l.411.053q.043.001.096.012l.394.054c.041 0 .083.012.125.018.119.018.233.03.346.048l.119.018c.114.017.221.035.334.047l.114.018.322.054q.063.008.125.024l.293.053.101.018.298.054a.848.848 0 0 0 .961-1.134zM235.606 98.517c-2.924-7.732-3.139-25.751-.561-34.552v-.012q.204-.7.435-1.319a.86.86 0 0 0-.608-1.133 1 1 0 0 0-.287-.012q-.037-.002-.065.006c-1.259.256-2.817.477-4.601.668l-.68.072q-.687.07-1.42.13c-.972.084-1.993.162-3.049.233q-1.191.081-2.446.144c-.555.03-1.122.053-1.695.083l-1.736.072-1.551.053c-.143 0-.292.006-.436.012-.525.012-1.05.03-1.581.042l-1.82.036-1.193.018-2.267.018h-2.256c-.543 0-1.086 0-1.629-.012a231 231 0 0 1-2.905-.048c-.472-.012-.943-.018-1.408-.036-.126 0-.245-.006-.37-.012-.466-.012-.931-.03-1.391-.041q-1.905-.065-3.705-.156-1.145-.06-2.237-.13c-3.61-.24-6.695-.574-8.849-1.01a.853.853 0 0 0-.996.633.8.8 0 0 0 .018.448c.632 2.052 1.736 5.936 2.076 9.021l.466 7.452c.137 6.725-.454 13.658-1.773 18.169q-.204.706-.435 1.33a.85.85 0 0 0 .501 1.098q.054.02.108.03a.9.9 0 0 0 .352 0c.101-.018.208-.042.316-.06.179-.035.364-.065.555-.101.835-.143 1.766-.28 2.786-.4q.834-.1 1.748-.19c.824-.084 1.695-.156 2.602-.228 7.392-.572 17.183-.733 25.704-.47 2.339.112 4.684.226 7.022.333.209.012.418.03.621.042h.006c.412.03.811.06 1.205.096h.012a59 59 0 0 1 1.152.1h.012l.549.055h.035l.513.053h.048l.483.054c.03 0 .054.006.084.012.143.018.292.036.436.048q.044.001.089.012l.412.053c.03 0 .059.006.095.012l.394.054c.042 0 .084.012.125.018.12.018.233.03.346.048l.12.018c.113.017.22.035.334.047l.113.018.322.054q.063.008.126.024l.292.053.102.018.298.054a.848.848 0 0 0 .96-1.134z" />
|
||||
<path d="M254.949 112.682V99.627c0-9.004-7.297-16.307-16.307-16.307H120.85c-9.004 0-16.307 7.297-16.307 16.307v13.055h150.4" />
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@@ -12,7 +12,6 @@ export default function CutleryOneIcon(props: IllustrationProps) {
|
||||
{...props}
|
||||
{...ariaProps}
|
||||
>
|
||||
<path fill="#fff" d="M0 .75h358v201.375H0z" />
|
||||
<path
|
||||
fill="#cd0921"
|
||||
d="M214.511 120.917v66.998a5.684 5.684 0 0 1-5.686 5.686h-54.847c-5.381 0-9.739-4.363-9.739-9.74V80.541c7.337 4.216 14.669 8.427 22.012 12.653 1.626.927 3.243 1.854 4.869 2.792 6.41 3.684 12.831 7.373 19.241 11.062q3.96 2.264 7.92 4.55c5.411 3.106 10.818 6.217 16.23 9.324z"
|
||||
|
||||
@@ -12,7 +12,6 @@ export default function CutleryTwoIcon(props: IllustrationProps) {
|
||||
{...props}
|
||||
{...ariaProps}
|
||||
>
|
||||
<path fill="#fff" d="M0 .75h358v201.375H0z" />
|
||||
<path
|
||||
fill="#cd0921"
|
||||
d="m239.807 134.166-16.218 55.21a4.88 4.88 0 0 1-6.062 3.309l-45.197-13.277a8.366 8.366 0 0 1-5.668-10.384l25.011-85.141c5.026 5.25 10.049 10.495 15.076 15.755a923 923 0 0 1 3.337 3.48c4.391 4.587 8.788 9.181 13.178 13.773q2.715 2.824 5.425 5.667 5.559 5.805 11.117 11.612z"
|
||||
|
||||
@@ -12,7 +12,6 @@ export default function GiftOpenIcon(props: IllustrationProps) {
|
||||
{...props}
|
||||
{...ariaProps}
|
||||
>
|
||||
<path fill="#fff" d="M0 .75h358v201.375H0z" />
|
||||
<g fill="#cd0921">
|
||||
<path d="M139.044 79.068c1.224-24.56 2.219-25.555 26.779-26.78-24.56-1.223-25.555-2.218-26.779-26.778-1.224 24.56-2.219 25.555-26.779 26.779 24.56 1.224 25.555 2.219 26.779 26.779M261.491 55.972c-24.56 1.224-25.555 2.218-26.779 26.779-1.224-24.56-2.219-25.555-26.779-26.78 24.56-1.224 25.555-2.218 26.779-26.778 1.224 24.56 2.219 25.554 26.779 26.779M267.672 136.383c1.225-24.56 2.219-25.554 26.779-26.779-24.56-1.224-25.554-2.218-26.779-26.779-1.224 24.561-2.218 25.555-26.779 26.779 24.561 1.225 25.555 2.219 26.779 26.779M154.185 186.459l-17.479-4.928.864-39.991 16.615 4.718zM201.786 185.989l17.48-4.822-.86-39.092-16.62 4.612z" />
|
||||
</g>
|
||||
|
||||
File diff suppressed because one or more lines are too long
@@ -12,7 +12,6 @@ export default function HandKeyIcon(props: IllustrationProps) {
|
||||
{...props}
|
||||
{...ariaProps}
|
||||
>
|
||||
<path fill="#fff" d="M0 .375h358V201.75H0z" />
|
||||
<path
|
||||
fill="#cd0921"
|
||||
d="M233.791 56.101c3.926-2.673 6.515-7.188 6.515-12.303 0-7.492-5.537-13.691-12.742-14.719a14.8 14.8 0 0 0-4.206-.011c-7.239 1.01-12.798 7.21-12.798 14.724 0 5.133 2.6 9.659 6.559 12.338l-7.66 33.205h31.947v-.242l-7.609-32.997z"
|
||||
|
||||
@@ -12,7 +12,6 @@ export default function HotelNightIcon(props: IllustrationProps) {
|
||||
{...props}
|
||||
{...ariaProps}
|
||||
>
|
||||
<path fill="#fff" d="M0 0h358v201.375H0z" />
|
||||
<path
|
||||
fill="#cd0921"
|
||||
d="M135.451 24.737c0-.282.255-.542.538-.542h3.377c.31 0 .537.255.537.542v7.158h8.122v-7.158c0-.282.227-.542.537-.542h3.378c.282 0 .537.255.537.542v18.796a.56.56 0 0 1-.537.542h-3.378a.54.54 0 0 1-.537-.542v-7.468h-8.122v7.468a.54.54 0 0 1-.537.542h-3.377a.56.56 0 0 1-.538-.542zM166.042 23.912c5.68 0 10.22 4.573 10.22 10.253s-4.545 10.192-10.22 10.192-10.192-4.517-10.192-10.192c0-5.676 4.517-10.253 10.192-10.253m0 15.905c3.123 0 5.68-2.558 5.68-5.652s-2.557-5.708-5.68-5.708-5.652 2.585-5.652 5.708c0 3.122 2.557 5.652 5.652 5.652M182.299 28.374h-4.058a.54.54 0 0 1-.538-.542v-3.095c0-.282.227-.542.538-.542h12.606c.31 0 .537.255.537.542v3.095a.54.54 0 0 1-.537.542h-4.059v15.164a.56.56 0 0 1-.537.542h-3.405a.56.56 0 0 1-.538-.542V28.374zM194.376 24.737c0-.282.227-.542.538-.542h11.754c.31 0 .537.255.537.542v3.095a.54.54 0 0 1-.537.542h-7.867v3.521h6.472c.283 0 .537.255.537.538v3.094c0 .31-.254.538-.537.538h-6.472v3.831h7.867c.31 0 .537.255.537.542v3.095a.54.54 0 0 1-.537.542h-11.754a.54.54 0 0 1-.538-.542zM210.796 24.737c0-.282.227-.542.537-.542h3.377c.283 0 .538.255.538.542v15.164h6.759c.311 0 .538.255.538.542v3.095a.54.54 0 0 1-.538.542h-10.679a.54.54 0 0 1-.537-.542V24.742zM135.451 49.602v128.483h87.098V49.602zm23.832 107.617h-14.826v-18.861h14.826zm0-27.496h-14.826v-18.861h14.826zm0-25.968h-14.826v-18.86h14.826zm0-25.633h-14.826v-18.86h14.826zm27.13 51.601h-14.825v-18.861h14.825zm0-25.968h-14.825v-18.86h14.825zm0-25.633h-14.825v-18.86h14.825zm27.13 78.925h-14.825v-18.86h14.825zm0-27.491h-14.825v-18.861h14.825zm0-25.972h-14.825v-18.86h14.825zm0-25.63h-14.825v-18.86h14.825z"
|
||||
|
||||
@@ -12,7 +12,6 @@ export default function KidsIcon(props: IllustrationProps) {
|
||||
{...props}
|
||||
{...ariaProps}
|
||||
>
|
||||
<path fill="#fff" d="M0 .125h358V201.5H0z" />
|
||||
<path
|
||||
fill="#cd0921"
|
||||
d="M118.57 86.176 99.517 70.244a4.12 4.12 0 0 0-5.56.247l-.814.814a4.125 4.125 0 0 0-.253 5.554l15.898 19.082a4.12 4.12 0 0 0 6.082.275l3.964-3.964a4.12 4.12 0 0 0-.269-6.076zm-4.284 3.425-1.988 1.988c-.86.86-2.539.522-3.634-.724l-11.18-12.776c-.96-1.095-1.118-2.516-.36-3.268l.405-.405c.758-.758 2.179-.595 3.274.365l12.758 11.198c1.247 1.09 1.578 2.768.719 3.628zM269.276 77.225a37.8 37.8 0 0 0-5.048-8.39c-1.174-1.477-10.726-12.074-27.376-15.213-24.226-4.565-48.171 9.53-48.053 16.656.023 1.522.567 5.7-.494 10.367-.09.398-1.033.662-.73 1.117.241.365.174.416 1.64.438a9 9 0 0 1 2.555.421 12.3 12.3 0 0 1 4.532 3.853 12 12 0 0 1 1.623 3.195c12.343-.309 18.582 1.505 29.201 3.751 10.417 2.207 25.152 5.958 41.842 22.182 2.268.005 5.626-.32 9.08-2.072 6.643-3.37 11.349-10.844 11.276-16.258-.09-6.963-8.126-14.432-20.048-20.042z"
|
||||
|
||||
@@ -12,7 +12,6 @@ export default function KidsMocktailIcon(props: IllustrationProps) {
|
||||
{...props}
|
||||
{...ariaProps}
|
||||
>
|
||||
<path fill="#fff" d="M0 0h358v201.375H0z" />
|
||||
<path
|
||||
fill="#4d001b"
|
||||
d="M214.311 85.868c-.189.043-.082.166.435.169l.376-.182zM217.741 86.554c.615-.03 1.333 0 .988-.28-.63.048-.769-.018-1.444.1-.512-.055-.883-.2-.789-.26-.185.015-.802-.093-1.088.013.331.102.709.136 1.11.196.401.066.832.101 1.283.106.181.072-.011.095-.06.125M234.579 128.048l.035-.318a3 3 0 0 0-.035.318M215.073 148.9c.218-.092.302-.146.306-.168-.199.094-.361.171-.306.168M210.824 152.428c.05-.118.083-.221.134-.324-.07.115-.119.242-.134.324M234.578 128.049a7 7 0 0 1-.121.809c.058.063.105-.411.121-.809M224.47 88.397c-.154-.09-.3-.13-.432-.169.134.058.268.105.393.182.012-.006.022-.01.039-.014M234.461 114.389l-.001-.252a1.4 1.4 0 0 0-.081-.209zM234.188 103.979c.028.229.208.287.295.367a1.3 1.3 0 0 1-.192-.489c-.032.002-.066.038-.103.122M226.102 90.25l-.248-.156zM234.424 121.9a.2.2 0 0 0-.061.096c.021 0 .042-.038.061-.096M207.532 78.325c-.012-.008-.02.004-.031.001.018.061.03.08.031 0M214.174 86.309l-.169.005c-.019.031-.039.062-.04.094zM208.604 161.143l.03-.022c.149-.165.06-.076-.03.022M148.897 137.848c-.152 1.008-.195-1.64-.364-.123.067-.141.265 1.379.364.123M224.697 88.56l.377.228a5 5 0 0 0-.377-.227M148.533 137.725h-.001l-.016.156zM189.544 168.344a.9.9 0 0 0 .233.052c-.01-.017-.063-.033-.233-.052M203.745 163.244a2.1 2.1 0 0 0-.453.278c.17-.127.319-.212.453-.278M180.989 169.08c-.223-.011-.299-.033-.603-.007a1 1 0 0 0 .093.019c.11-.024.256-.036.51-.012M172.06 168.717l.162.048.283.015zM198.443 58.135c.194.06.313.12.406.177-.132-.129 1.19-.091-.406-.177M224.428 88.483c.066-.01.144.013.269.078l-.266-.15c-.035.007-.052.025-.003.072M180.639 170.421c-.481-.004-.961-.002-1.443-.021.405.026.928.026 1.443.021M152.164 78.53l-.015-.305a1.3 1.3 0 0 0 .015.305M174.913 170.276a6 6 0 0 0-.801-.172c-.061.009-.129.015-.17.032z"
|
||||
|
||||
@@ -12,7 +12,6 @@ export default function MoneyHandIcon(props: IllustrationProps) {
|
||||
{...props}
|
||||
{...ariaProps}
|
||||
>
|
||||
<path fill="#fff" d="M0 .375h358V201.75H0z" />
|
||||
<path
|
||||
fill="#cd0921"
|
||||
d="M182.948 70.156c3.461 1.57 5.572 3.66 5.572 5.955v4.74c4.967 1.614 8.158 4.127 8.158 6.948v5.627c0 2.413-2.335 4.6-6.119 6.194l.001 5.231c0 1.128-.511 2.207-1.441 3.199.8.929 1.236 1.93 1.236 2.973v5.626c0 .539-.116 1.066-.339 1.578 1.647 1.253 2.583 2.69 2.583 4.217v1.31c-13.253 3.856-26.384 8.648-33.773 11.461-5.31-1.611-8.756-4.209-8.756-7.144v-5.627c0-.538.116-1.066.339-1.578-1.646-1.252-2.581-2.689-2.581-4.217v-5.626c0-1.129.511-2.208 1.441-3.2-.801-.928-1.237-1.929-1.237-2.972v-5.627c0-2.413 2.335-4.6 6.119-6.193v-4.344c-4.967-1.616-8.158-4.128-8.158-6.95v-5.626c0-3.178 4.048-5.963 10.121-7.517-4.525-3.584-7.428-9.127-7.428-15.348 0-10.807 8.76-19.568 19.567-19.568h4.843c10.807 0 19.568 8.76 19.568 19.568 0 7.214-3.905 13.517-9.716 16.91"
|
||||
|
||||
@@ -88,6 +88,7 @@ export enum IconName {
|
||||
GiftOpen = 'GiftOpen',
|
||||
Globe = 'Globe',
|
||||
Golf = 'Golf',
|
||||
Granola = 'Granola',
|
||||
Guard = 'Guard',
|
||||
Hairdresser = 'Hairdresser',
|
||||
HairdryerInRoomAllScandic = 'HairdryerInRoomAllScandic',
|
||||
|
||||
@@ -0,0 +1,56 @@
|
||||
import type { Meta, StoryObj } from '@storybook/nextjs-vite'
|
||||
import { LinkList } from './index'
|
||||
import { IconName } from '../Icons/iconName'
|
||||
import type { LinkListItemProps } from './LinkListItem'
|
||||
|
||||
const meta: Meta<typeof LinkList> = {
|
||||
title: 'Components/LinkList',
|
||||
component: LinkList,
|
||||
argTypes: {},
|
||||
}
|
||||
|
||||
export default meta
|
||||
|
||||
type Story = StoryObj<typeof LinkList>
|
||||
|
||||
const illustrationItems = [
|
||||
{
|
||||
text: 'First Link Item',
|
||||
isExternal: false,
|
||||
illustration: {
|
||||
illustration: 'Granola' as IconName,
|
||||
size: 'medium',
|
||||
},
|
||||
} as LinkListItemProps,
|
||||
{
|
||||
text: 'Second Link Item',
|
||||
isExternal: true,
|
||||
illustration: {
|
||||
illustration: 'Coin' as IconName,
|
||||
size: 'small',
|
||||
},
|
||||
} as LinkListItemProps,
|
||||
]
|
||||
|
||||
const textItems = [
|
||||
{
|
||||
text: 'First Link Item',
|
||||
isExternal: false,
|
||||
} as LinkListItemProps,
|
||||
{
|
||||
text: 'Second Link Item',
|
||||
isExternal: true,
|
||||
} as LinkListItemProps,
|
||||
]
|
||||
|
||||
export const IllustrationLinkList: Story = {
|
||||
args: {
|
||||
linkListItems: illustrationItems,
|
||||
},
|
||||
}
|
||||
|
||||
export const TextOnlyLinkList: Story = {
|
||||
args: {
|
||||
linkListItems: textItems,
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,36 @@
|
||||
import { IconProps, LogoAndIllustrationProps } from '../../../Icons'
|
||||
import { IconName } from '../../../Icons/iconName'
|
||||
import { IllustrationByIconName } from '../../../Icons/IllustrationByIconName'
|
||||
import { FC } from 'react'
|
||||
|
||||
export interface IllustrationIconProps extends LogoAndIllustrationProps {
|
||||
illustration: IconName
|
||||
size?: 'small' | 'medium' | 'large'
|
||||
}
|
||||
|
||||
function mapIllustrationToIcon(illustration: IconName): FC<IconProps> | null {
|
||||
if (!IllustrationByIconName(illustration)) return null
|
||||
return IllustrationByIconName(illustration)
|
||||
}
|
||||
|
||||
const sizeMap = {
|
||||
small: { width: 60, height: 60 },
|
||||
medium: { width: 80, height: 80 },
|
||||
large: { width: 120, height: 120 },
|
||||
} as const
|
||||
|
||||
export function IllustrationIcon({
|
||||
illustration,
|
||||
size = 'large',
|
||||
...props
|
||||
}: IllustrationIconProps) {
|
||||
const IllustrationComponent = mapIllustrationToIcon(illustration)
|
||||
if (!IllustrationComponent) return null
|
||||
return (
|
||||
<IllustrationComponent
|
||||
{...props}
|
||||
height={sizeMap[size].height}
|
||||
width={sizeMap[size].width}
|
||||
/>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,41 @@
|
||||
import type { Meta, StoryObj } from '@storybook/nextjs-vite'
|
||||
import { LinkListItem } from './index'
|
||||
import { IconName } from '../../Icons/iconName'
|
||||
|
||||
const meta: Meta<typeof LinkListItem> = {
|
||||
title: 'Components/LinkListItem',
|
||||
component: LinkListItem,
|
||||
argTypes: {
|
||||
isExternal: {
|
||||
control: { type: 'boolean' },
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export default meta
|
||||
|
||||
type Story = StoryObj<typeof LinkListItem>
|
||||
|
||||
export const Default: Story = {
|
||||
args: {
|
||||
text: 'Link Item',
|
||||
},
|
||||
}
|
||||
|
||||
export const IllustrationItem: Story = {
|
||||
args: {
|
||||
text: 'Link Item',
|
||||
isExternal: false,
|
||||
illustration: {
|
||||
illustration: 'Granola' as IconName,
|
||||
size: 'medium',
|
||||
},
|
||||
},
|
||||
}
|
||||
|
||||
export const TextOnlyItem: Story = {
|
||||
args: {
|
||||
text: 'Link Item',
|
||||
isExternal: true,
|
||||
},
|
||||
}
|
||||
@@ -0,0 +1,57 @@
|
||||
import { MaterialIcon } from '../../Icons/MaterialIcon'
|
||||
import { Typography } from '../../Typography'
|
||||
|
||||
import styles from './linkListItem.module.css'
|
||||
import {
|
||||
IllustrationIcon,
|
||||
IllustrationIconProps,
|
||||
} from '../LinkListItem/IllustrationIcon'
|
||||
|
||||
import { cx } from 'class-variance-authority'
|
||||
import { Link } from 'react-aria-components'
|
||||
|
||||
export interface LinkListItemProps {
|
||||
text: string
|
||||
isExternal?: boolean
|
||||
href: string
|
||||
className?: string
|
||||
illustration?: IllustrationIconProps
|
||||
onClick?: () => void
|
||||
}
|
||||
|
||||
export function LinkListItem({
|
||||
text,
|
||||
isExternal,
|
||||
href,
|
||||
illustration,
|
||||
onClick,
|
||||
}: LinkListItemProps) {
|
||||
return (
|
||||
<Link
|
||||
href={href}
|
||||
target={'_blank'}
|
||||
onClick={onClick}
|
||||
className={cx(styles.content, {
|
||||
[styles.graphic]: illustration,
|
||||
[styles.noGraphic]: !illustration,
|
||||
})}
|
||||
>
|
||||
{illustration && (
|
||||
<div className={styles.illustrationWrapper}>
|
||||
<IllustrationIcon
|
||||
illustration={illustration.illustration}
|
||||
size={illustration.size}
|
||||
className={styles.illustration}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
<Typography variant="Body/Paragraph/mdBold">
|
||||
<p>{text}</p>
|
||||
</Typography>
|
||||
<MaterialIcon
|
||||
color="Icon/Interactive/Default"
|
||||
icon={isExternal ? 'open_in_new' : 'arrow_forward'}
|
||||
/>
|
||||
</Link>
|
||||
)
|
||||
}
|
||||
@@ -0,0 +1,56 @@
|
||||
.list {
|
||||
list-style-type: none;
|
||||
}
|
||||
|
||||
.linkListItem {
|
||||
border: 1px solid var(--Base-Border-Subtle);
|
||||
background-color: var(--Surface-Primary-Default);
|
||||
}
|
||||
|
||||
.linkListItem + .linkListItem {
|
||||
border-top: none;
|
||||
}
|
||||
|
||||
.linkListItem:first-child {
|
||||
border-radius: var(--Corner-radius-md) var(--Corner-radius-md) 0 0;
|
||||
}
|
||||
|
||||
.linkListItem:last-child {
|
||||
border-radius: 0 0 var(--Corner-radius-md) var(--Corner-radius-md);
|
||||
}
|
||||
|
||||
.linkListItem:hover {
|
||||
background-color: var(--Surface-Primary-Hover);
|
||||
}
|
||||
|
||||
.content {
|
||||
display: grid;
|
||||
align-items: center;
|
||||
padding: var(--Space-x2);
|
||||
gap: var(--Space-x2);
|
||||
text-decoration: none;
|
||||
color: var(--Text-Interactive-Default);
|
||||
}
|
||||
|
||||
.graphic {
|
||||
grid-template-columns: 80px 1fr auto;
|
||||
}
|
||||
|
||||
.noGraphic {
|
||||
grid-template-columns: 1fr auto;
|
||||
}
|
||||
|
||||
.illustrationWrapper {
|
||||
position: relative;
|
||||
border-radius: var(--Corner-radius-sm);
|
||||
background-color: var(--Surface-Primary-Hover-Accent);
|
||||
width: 80px;
|
||||
height: 80px;
|
||||
}
|
||||
|
||||
.illustration {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 50%;
|
||||
transform: translate(-50%, -50%);
|
||||
}
|
||||
23
packages/design-system/lib/components/LinkList/index.tsx
Normal file
23
packages/design-system/lib/components/LinkList/index.tsx
Normal file
@@ -0,0 +1,23 @@
|
||||
import { LinkListItem, type LinkListItemProps } from './LinkListItem'
|
||||
import styles from './LinkListItem/linkListItem.module.css'
|
||||
export interface LinkListProps {
|
||||
linkListItems: LinkListItemProps[]
|
||||
}
|
||||
|
||||
export function LinkList({ linkListItems }: LinkListProps) {
|
||||
return (
|
||||
<ul className={styles.list}>
|
||||
{linkListItems.map((item, index) => (
|
||||
<li className={styles.linkListItem} key={index}>
|
||||
<LinkListItem
|
||||
text={item.text}
|
||||
isExternal={item.isExternal}
|
||||
href={item.href}
|
||||
illustration={item.illustration}
|
||||
onClick={item.onClick}
|
||||
/>
|
||||
</li>
|
||||
))}
|
||||
</ul>
|
||||
)
|
||||
}
|
||||
@@ -26,7 +26,7 @@
|
||||
/* For removing focus outline when modal opens first time */
|
||||
outline: 0 none;
|
||||
|
||||
max-height: 100dvh;
|
||||
max-height: 90dvh;
|
||||
}
|
||||
|
||||
.header {
|
||||
|
||||
@@ -86,6 +86,7 @@
|
||||
"./Icons/GiftOpenIcon": "./lib/components/Icons/Illustrations/GiftOpen.tsx",
|
||||
"./Icons/GrandHotelOsloIcon": "./lib/components/Icons/Logos/GrandHotelOslo.tsx",
|
||||
"./Icons/HairdresserIcon": "./lib/components/Icons/Nucleo/Amenities_Facilities/hairdresser-1.tsx",
|
||||
"./Icons/GranolaIcon": "./lib/components/Icons/Illustrations/Granola.tsx",
|
||||
"./Icons/HairdryerIcon": "./lib/components/Icons/Customised/Amenities_Facilities/Hairdryer.tsx",
|
||||
"./Icons/HandKeyIcon": "./lib/components/Icons/Illustrations/HandKey.tsx",
|
||||
"./Icons/HandGiftIcon": "./lib/components/Icons/Illustrations/HandGift.tsx",
|
||||
@@ -145,6 +146,8 @@
|
||||
"./Label": "./lib/components/Label/index.tsx",
|
||||
"./Lightbox": "./lib/components/Lightbox/index.tsx",
|
||||
"./Link": "./lib/components/Link/index.tsx",
|
||||
"./LinkList": "./lib/components/LinkList/index.tsx",
|
||||
"./LinkListItem": "./lib/components/LinkList/LinkListItem/index.tsx",
|
||||
"./LoadingSpinner": "./lib/components/LoadingSpinner/index.tsx",
|
||||
"./LocalCallCharges": "./lib/components/LocalCallCharges/index.tsx",
|
||||
"./LoginButton": "./lib/components/LoginButton/index.tsx",
|
||||
|
||||
Reference in New Issue
Block a user