scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in fix/SW-1128-side-peek (pull request #1031)

Browse Source 
Fix/SW-1128/SW-1124 side peek and gallery

* fix(SW-1128): updated style and mobile design for sidepeek select hotel

* fix(SW-1128): update link sidepeek

* fix(SW-1124): fix padding gallery

* fix(SW-1128): fix sidepeek mobile design

* fix(SW-1128): fix mobile design

* fix(SW-1128): fix gallery icon caption


Approved-by: Niclas Edenvin
This commit is contained in:
Bianca Widstam
2024-12-05 07:39:06 +00:00
parent 94725297d7
commit bed674df87
16 changed files with 100 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

11
components/TempDesignSystem/Accordion/AccordionItem/accordionItem.module.css
View File

@@ -6,6 +6,10 @@
padding: var(--Spacing-x1);
}
.accordionItem.sidepeek {
padding: var(--Spacing-x1) 0;
}
.summary {
position: relative;
display: flex;
@@ -18,7 +22,7 @@
font-weight: var(--typography-Body-Bold-fontWeight);
transition: background-color 0.3s;
}
.summary:hover {
.summary.card:hover {
background-color: var(--Base-Surface-Primary-light-Hover-alt);
}
.accordionItem.light .summary:hover {
@@ -33,6 +37,11 @@
border-radius: var(--Corner-radius-Medium);
}
.accordionItem.sidepeek .summary {
padding: var(--Spacing-x-one-and-half) var(--Spacing-x1);
align-items: center;
}
.title {
flex-grow: 1;
}

22
components/TempDesignSystem/Accordion/AccordionItem/index.tsx
View File

@@ -50,16 +50,10 @@ export default function AccordionItem({
<li className={accordionItemVariants({ className, variant, theme })}>
<details ref={detailsRef} onToggle={toggleAccordion}>
<summary className={styles.summary}>
{IconComp && <IconComp className={styles.icon} color="burgundy" />}
{variant === "card" ? (
<Body
textTransform="bold"
color="baseTextHighContrast"
className={styles.title}
>
{title}
</Body>
) : (
{IconComp && (
<IconComp className={styles.icon} color="baseTextHighcontrast" />
)}
{variant === "sidepeek" ? (
<Subtitle
className={styles.title}
type="two"
@@ -67,6 +61,14 @@ export default function AccordionItem({
>
{title}
</Subtitle>
) : (
<Body
textTransform="bold"
color="baseTextHighContrast"
className={styles.title}
>
{title}
</Body>
)}
<ChevronDownIcon
className={styles.chevron}

1
components/TempDesignSystem/Accordion/AccordionItem/variants.ts
View File

@@ -6,6 +6,7 @@ export const accordionItemVariants = cva(styles.accordionItem, {
variants: {
variant: {
card: styles.card,
sidepeek: styles.sidepeek,
},
theme: {
default: styles.default,

1
components/TempDesignSystem/Accordion/variants.ts
View File

@@ -6,6 +6,7 @@ export const accordionVariants = cva(styles.accordion, {
variants: {
variant: {
card: styles.card,
sidepeek: styles.sidepeek,
},
theme: {
default: styles.default,