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

Merge branch 'develop' into feature/tracking

Browse Source
This commit is contained in:
Linus Flood
2024-10-30 14:12:24 +01:00
parent ee25198ae7 795eae89bc
commit 26ce0d10ec
261 changed files with 3397 additions and 2854 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/TempDesignSystem/Form/Checkbox/checkbox.module.css
+1 -1
View File
@@ -16,7 +16,7 @@
.checkboxContainer {
display: flex;
align-items: flex-start;
align-items: center;
gap: var(--Spacing-x-one-and-half);
}
components/TempDesignSystem/Form/ChoiceCard/_Card/card.module.css
+4
View File
@@ -70,3 +70,7 @@
.listItem:nth-of-type(n + 2) {
margin-top: var(--Spacing-x-quarter);
}
.highlight {
color: var(--Scandic-Brand-Scandic-Red);
}
components/TempDesignSystem/Form/ChoiceCard/_Card/card.ts
+9
View File
@@ -34,3 +34,12 @@ export type CheckboxProps =
export type RadioProps =
| Omit<ListCardProps, "type">
| Omit<TextCardProps, "type">
export interface ListProps extends Pick<ListCardProps, "declined"> {
list?: ListCardProps["list"]
}
export interface SubtitleProps
extends Pick<BaseCardProps, "highlightSubtitle" | "subtitle"> {}
export interface TextProps extends Pick<TextCardProps, "text"> {}
components/TempDesignSystem/Form/ChoiceCard/_Card/index.tsx
+64 -41
View File
@@ -2,16 +2,16 @@
import { useFormContext } from "react-hook-form"
import { CheckIcon, CloseIcon, HeartIcon } from "@/components/Icons"
import { CheckIcon, CloseIcon } from "@/components/Icons"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import styles from "./card.module.css"
import type { CardProps } from "./card"
import type { CardProps, ListProps, SubtitleProps, TextProps } from "./card"
export default function Card({
Icon = HeartIcon,
Icon,
iconHeight = 32,
iconWidth = 32,
declined = false,
@@ -26,56 +26,79 @@ export default function Card({
value,
}: CardProps) {
const { register } = useFormContext()
return (
<label className={styles.label} data-declined={declined} tabIndex={0}>
<Caption className={styles.title} type="label" uppercase>
<Caption className={styles.title} color="burgundy" type="label" uppercase>
{title}
</Caption>
{subtitle ? (
<Caption
className={styles.subtitle}
color={highlightSubtitle ? "baseTextAccent" : "uiTextHighContrast"}
type="regular"
>
{subtitle}
</Caption>
) : null}
<Icon
className={styles.icon}
color="uiTextHighContrast"
height={iconHeight}
width={iconWidth}
/>
{list
? list.map((listItem) => (
<span key={listItem.title} className={styles.listItem}>
{declined ? (
<CloseIcon
color="uiTextMediumContrast"
height={20}
width={20}
/>
) : (
<CheckIcon color="baseIconLowContrast" height={20} width={20} />
)}
<Footnote color="uiTextMediumContrast">{listItem.title}</Footnote>
</span>
))
: null}
{text ? (
<Footnote className={styles.text} color="uiTextMediumContrast">
{text}
</Footnote>
<Subtitle highlightSubtitle={highlightSubtitle} subtitle={subtitle} />
{Icon ? (
<Icon
className={styles.icon}
color="uiTextHighContrast"
height={iconHeight}
width={iconWidth}
/>
) : null}
<List declined={declined} list={list} />
<Text text={text} />
<input
{...register(name)}
aria-hidden
id={id || name}
hidden
type={type}
value={value}
{...register(name)}
/>
</label>
)
}
function List({ declined, list }: ListProps) {
if (!list) {
return null
}
return list.map((listItem) => (
<span key={listItem.title} className={styles.listItem}>
{declined ? (
<CloseIcon color="uiTextMediumContrast" height={20} width={20} />
) : (
<CheckIcon color="baseIconLowContrast" height={20} width={20} />
)}
<Footnote color="uiTextMediumContrast">{listItem.title}</Footnote>
</span>
))
}
function Subtitle({ highlightSubtitle, subtitle }: SubtitleProps) {
if (!subtitle) {
return null
}
return (
<Caption
className={styles.subtitle}
color={highlightSubtitle ? "baseTextAccent" : "uiTextMediumContrast"}
type="label"
uppercase
>
{subtitle}
</Caption>
)
}
function Text({ text }: TextProps) {
if (!text) {
return null
}
return (
<Footnote className={styles.text} color="uiTextMediumContrast">
{text}
</Footnote>
)
}
export function Highlight({ children }: React.PropsWithChildren) {
return <span className={styles.highlight}>{children}</span>
}
components/TempDesignSystem/Form/FilterChip/Checkbox.tsx
+7
View File
@@ -0,0 +1,7 @@
import Chip from "./_Chip"
import type { FilterChipCheckboxProps } from "@/types/components/form/filterChip"
export default function CheckboxChip(props: FilterChipCheckboxProps) {
return <Chip {...props} type="checkbox" />
}
components/TempDesignSystem/Form/FilterChip/_Chip/chip.module.css
+37
View File
@@ -0,0 +1,37 @@
.label {
display: flex;
align-items: center;
gap: var(--Spacing-x-half);
padding: var(--Spacing-x1) var(--Spacing-x-one-and-half);
border: 1px solid var(--Base-Border-Subtle);
border-radius: var(--Corner-radius-Small);
background-color: var(--Base-Surface-Secondary-light-Normal);
cursor: pointer;
}
.label[data-selected="true"],
.label[data-selected="true"]:hover {
background-color: var(--Primary-Light-Surface-Normal);
border-color: var(--Base-Border-Hover);
}
.label:hover {
background-color: var(--Base-Surface-Primary-light-Hover-alt);
border-color: var(--Base-Border-Subtle);
}
.label[data-disabled="true"] {
background-color: var(--Base-Button-Primary-Fill-Disabled);
border-color: var(--Base-Button-Primary-Fill-Disabled);
cursor: not-allowed;
}
.caption {
display: none;
}
@media (min-width: 768px) {
.caption {
display: block;
}
}
components/TempDesignSystem/Form/FilterChip/_Chip/index.tsx
+57
View File
@@ -0,0 +1,57 @@
import { useMemo } from "react"
import { useFormContext } from "react-hook-form"
import { HeartIcon } from "@/components/Icons"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import styles from "./chip.module.css"
import { FilterChipProps } from "@/types/components/form/filterChip"
export default function FilterChip({
Icon = HeartIcon,
iconHeight = 20,
iconWidth = 20,
id,
name,
label,
type,
value,
selected,
disabled,
}: FilterChipProps) {
const { register } = useFormContext()
const color = useMemo(() => {
if (selected) return "burgundy"
if (disabled) return "disabled"
return "uiTextPlaceholder"
}, [selected, disabled])
return (
<label
className={styles.label}
data-selected={selected}
data-disabled={disabled}
>
<Icon
className={styles.icon}
color={color}
height={iconHeight}
width={iconWidth}
/>
<Caption type="bold" color={color} className={styles.caption}>
{label}
</Caption>
<input
aria-hidden
id={id || name}
hidden
type={type}
value={value}
disabled={disabled}
{...register(name)}
/>
</label>
)
}
components/TempDesignSystem/Form/Phone/index.tsx
+2 -2
View File
@@ -91,7 +91,7 @@ export default function Phone({
<Label required={!!registerOptions.required} size="small">
{formatMessage({ id: "Country code" })}
</Label>
<div className={styles.selectContainer}>
<span className={styles.selectContainer}>
{props.children}
<Body asChild fontOnly>
<DialCodePreview
@@ -106,7 +106,7 @@ export default function Phone({
height={18}
width={18}
/>
</div>
</span>
</button>
)}
/>