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

Merged in feat/3694-show-more-button-to-ds (pull request #3405)

Browse Source 
feat(SW-3694): Move ShowMoreButton to design-system

* Move ShowMoreButton to design-system

* Update to interactive stories

* Merged master into feat/3694-show-more-button-to-ds

* Merge branch 'master' into feat/3694-show-more-button-to-ds

* Merge branch 'feat/3694-show-more-button-to-ds' of bitbucket.org:scandic-swap/web into feat/3694-show-more-button-to-ds


Approved-by: Linus Flood
This commit is contained in:
Rasmus Langvad
2026-01-19 07:54:54 +00:00
parent adba5f635f
commit 0c5670823b
13 changed files with 360 additions and 21 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/scandic-web/components/Blocks/Accordion/index.tsx
View File

@@ -6,10 +6,10 @@ import { useState } from "react"
import Accordion from "@scandic-hotels/design-system/Accordion"
import AccordionItem from "@scandic-hotels/design-system/Accordion/AccordionItem"
import { JsonToHtml } from "@scandic-hotels/design-system/JsonToHtml"
import { ShowMoreButton } from "@scandic-hotels/design-system/ShowMoreButton"
import { Section } from "@/components/Section"
import { SectionHeader } from "@/components/Section/Header"
import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
import styles from "./accordion.module.css"

2
apps/scandic-web/components/Blocks/Table/index.tsx
View File

@@ -8,11 +8,11 @@ import {
} from "@tanstack/react-table"
import { useState } from "react"
import { ShowMoreButton } from "@scandic-hotels/design-system/ShowMoreButton"
import Table from "@scandic-hotels/design-system/Table"
import { Section } from "@/components/Section"
import { SectionHeader } from "@/components/Section/Header"
import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
import styles from "./table.module.css"

3
apps/scandic-web/components/ContentType/HotelPage/Rooms/index.tsx
View File

@@ -3,9 +3,10 @@
import { cx } from "class-variance-authority"
import { useMemo, useRef, useState } from "react"
import { ShowMoreButton } from "@scandic-hotels/design-system/ShowMoreButton"
import { Section } from "@/components/Section"
import { SectionHeader } from "@/components/Section/Header"
import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
import { RoomCard } from "./RoomCard"

3
apps/scandic-web/components/ContentType/HotelPage/SidePeeks/Room/RoomFacilities/index.tsx
View File

@@ -5,10 +5,9 @@ import { useRef, useState } from "react"
import { useIntl } from "react-intl"
import { FacilityIcon } from "@scandic-hotels/design-system/Icons/FacilityIcon"
import { ShowMoreButton } from "@scandic-hotels/design-system/ShowMoreButton"
import { Typography } from "@scandic-hotels/design-system/Typography"
import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
import styles from "./roomFacilities.module.css"
import type { Room } from "@scandic-hotels/trpc/types/hotel"

3
apps/scandic-web/components/ContentType/HotelSubpage/MeetingsSubpage/MeetingRooms/MeetingRoomCard/index.tsx
View File

@@ -4,10 +4,9 @@ import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Image from "@scandic-hotels/design-system/Image"
import { ShowMoreButton } from "@scandic-hotels/design-system/ShowMoreButton"
import { Typography } from "@scandic-hotels/design-system/Typography"
import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
import { translateRoomLighting, translateSeatingType } from "./utils"
import styles from "./meetingRoomCard.module.css"

2
apps/scandic-web/components/ContentType/HotelSubpage/MeetingsSubpage/MeetingRooms/index.tsx
View File

@@ -2,7 +2,7 @@
import { cx } from "class-variance-authority"
import { useRef, useState } from "react"
import ShowMoreButton from "@/components/TempDesignSystem/ShowMoreButton"
import { ShowMoreButton } from "@scandic-hotels/design-system/ShowMoreButton"
import MeetingRoomCard from "./MeetingRoomCard"

4
apps/scandic-web/components/DestinationFilterAndSort/Filter/Checkbox/checkbox.module.css
View File

@@ -20,12 +20,12 @@
&[data-disabled] {
cursor: not-allowed;
.checkbox {
border-color: var(--UI-Input-Controls-Border-Disabled);
background-color: var(--UI-Input-Controls-Surface-Disabled);
}
}
}
}
.checkbox {

64
apps/scandic-web/components/TempDesignSystem/ShowMoreButton/index.tsx
View File

@@ -1,64 +0,0 @@
"use client"
import { useIntl } from "react-intl"
import { Button } from "@scandic-hotels/design-system/Button"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import type { ComponentProps } from "react"
interface ShowMoreButtonProps extends ComponentProps<typeof Button> {
showLess?: boolean
textShowMore?: string
textShowLess?: string
loadMoreData: () => void
}
export default function ShowMoreButton({
variant = "Text",
color = "Primary",
size = "md",
showLess,
textShowMore,
textShowLess,
loadMoreData,
...props
}: ShowMoreButtonProps) {
const intl = useIntl()
if (!textShowMore) {
textShowMore = intl.formatMessage({
id: "common.showMore",
defaultMessage: "Show more",
})
}
if (!textShowLess) {
textShowLess = intl.formatMessage({
id: "common.showLess",
defaultMessage: "Show less",
})
}
return (
<Button
variant={variant}
color={color}
size={size}
onPress={loadMoreData}
{...props}
>
{showLess ? (
<>
<MaterialIcon icon="keyboard_arrow_up" color="CurrentColor" />
<span>{textShowLess}</span>
</>
) : (
<>
<MaterialIcon icon="keyboard_arrow_down" color="CurrentColor" />
<span>{textShowMore}</span>
</>
)}
</Button>
)
}