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

Merged in refactor/design-system-input-label (pull request #2326)

Browse Source 
refactor: move input and label to design system

Approved-by: Arvid Norlin
This commit is contained in:
Christian Andolf
2025-06-13 11:24:46 +00:00
parent 8b5e8aecae ce399e696d
commit e3d6437af2
35 changed files with 339 additions and 207 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobList/Filter/index.tsx
View File

@@ -2,7 +2,7 @@
import { useIntl } from "react-intl"
import Select from "@/components/TempDesignSystem/Select"
import DeprecatedSelect from "@/components/TempDesignSystem/DeprecatedSelect"
import styles from "./filter.module.css"
@@ -30,7 +30,7 @@ export default function Filter({
return (
<form className={styles.filterForm}>
<Select
<DeprecatedSelect
items={countryFilters}
defaultSelectedKey={""}
label={intl.formatMessage({
@@ -42,7 +42,7 @@ export default function Filter({
name="country"
onSelect={(value) => onFilterChange(JobylonFilterKey.country, value)}
/>
<Select
<DeprecatedSelect
items={cityFilters}
defaultSelectedKey={""}
label={intl.formatMessage({
@@ -54,7 +54,7 @@ export default function Filter({
name="city"
onSelect={(value) => onFilterChange(JobylonFilterKey.city, value)}
/>
<Select
<DeprecatedSelect
items={departmentFilters}
defaultSelectedKey={""}
label={intl.formatMessage({
@@ -66,7 +66,7 @@ export default function Filter({
name="department"
onSelect={(value) => onFilterChange(JobylonFilterKey.department, value)}
/>
<Select
<DeprecatedSelect
items={categoryFilters}
defaultSelectedKey={""}
label={intl.formatMessage({

6
apps/scandic-web/components/Blocks/DynamicContent/OverviewTable/Client.tsx
View File

@@ -9,7 +9,7 @@ import {
} from "@/constants/membershipLevels"
import MembershipLevelIcon from "@/components/Levels/Icon"
import Select from "@/components/TempDesignSystem/Select"
import DeprecatedSelect from "@/components/TempDesignSystem/DeprecatedSelect"
import LargeTable from "./LargeTable"
import LevelSummary from "./LevelSummary"
@@ -98,7 +98,7 @@ export default function OverviewTableClient({
}
showDescription={false}
/>
<Select
<DeprecatedSelect
aria-label={intl.formatMessage({
defaultMessage: "Level",
})}
@@ -137,7 +137,7 @@ export default function OverviewTableClient({
return null
}
return (
<Select
<DeprecatedSelect
aria-label={intl.formatMessage({
defaultMessage: "Level",
})}

4
apps/scandic-web/components/Blocks/DynamicContent/SAS/TransferPoints/TransferPointsFormClient.tsx
View File

@@ -16,13 +16,13 @@ import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Input } from "@scandic-hotels/design-system/Input"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { SAS_TRANSFER_POINT_KEY } from "@/app/[lang]/(partner)/(sas)/(protected)/sas-x-scandic/sasUtils"
import Image from "@/components/Image"
import Modal from "@/components/Modal"
import Button from "@/components/TempDesignSystem/Button"
import AriaInputWithLabel from "@/components/TempDesignSystem/Form/Input/AriaInputWithLabel"
import styles from "./transferPoints.module.css"
@@ -86,7 +86,7 @@ export function TransferPointsFormClient({
</I18nProvider>
<div className={styles.inputsWrapper}>
<TextField type="number" isDisabled={disabled}>
<AriaInputWithLabel
<Input
label={intl.formatMessage({
defaultMessage: "EB points to transfer",
})}

4
apps/scandic-web/components/DestinationFilterAndSort/Sort/index.tsx
View File

@@ -4,7 +4,7 @@ import { useIntl } from "react-intl"
import { useDestinationDataStore } from "@/stores/destination-data"
import Select from "@/components/TempDesignSystem/Select"
import DeprecatedSelect from "@/components/TempDesignSystem/DeprecatedSelect"
import type { SortItem } from "@/types/components/destinationFilterAndSort"
import type { SortOption } from "@/types/enums/destinationFilterAndSort"
@@ -21,7 +21,7 @@ export default function Sort({ sortItems }: SortProps) {
}))
return (
<Select
<DeprecatedSelect
items={sortItems}
defaultSelectedKey={pendingSort}
label={intl.formatMessage({

6
apps/scandic-web/components/GuestsRoomsPicker/ChildSelector/ChildInfoSelector.tsx
View File

@@ -5,7 +5,7 @@ import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Select from "@/components/TempDesignSystem/Select"
import DeprecatedSelect from "@/components/TempDesignSystem/DeprecatedSelect"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import styles from "./child-selector.module.css"
@@ -100,7 +100,7 @@ export default function ChildInfoSelector({
<>
<div key={index} className={styles.childInfoContainer}>
<div>
<Select
<DeprecatedSelect
required={true}
items={ageList}
label={ageLabel}
@@ -116,7 +116,7 @@ export default function ChildInfoSelector({
</div>
<div>
{child.age >= 0 ? (
<Select
<DeprecatedSelect
items={getAvailableBeds(child.age)}
label={bedLabel}
aria-label={bedLabel}

4
apps/scandic-web/components/HotelReservation/SelectHotel/Filters/FilterAndSortModal/index.tsx
View File

@@ -19,7 +19,7 @@ import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { useHotelFilterStore } from "@/stores/hotel-filters"
import Button from "@/components/TempDesignSystem/Button"
import Select from "@/components/TempDesignSystem/Select"
import DeprecatedSelect from "@/components/TempDesignSystem/DeprecatedSelect"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import useInitializeFiltersFromUrl from "@/hooks/useInitializeFiltersFromUrl"
@@ -167,7 +167,7 @@ export default function FilterAndSortModal({
</Subtitle>
</header>
<div className={styles.sorter}>
<Select
<DeprecatedSelect
items={sortItems}
defaultSelectedKey={
searchParams.get("sort") ?? DEFAULT_SORT

4
apps/scandic-web/components/HotelReservation/SelectHotel/HotelSorter/index.tsx
View File

@@ -4,7 +4,7 @@ import { usePathname, useSearchParams } from "next/navigation"
import { useCallback } from "react"
import { useIntl } from "react-intl"
import Select from "@/components/TempDesignSystem/Select"
import DeprecatedSelect from "@/components/TempDesignSystem/DeprecatedSelect"
import { trackEvent } from "@/utils/tracking/base"
import {
@@ -71,7 +71,7 @@ export default function HotelSorter({ discreet }: HotelSorterProps) {
]
return (
<Select
<DeprecatedSelect
items={sortItems}
defaultSelectedKey={searchParams.get("sort") ?? DEFAULT_SORT}
label={intl.formatMessage({

3
apps/scandic-web/components/TempDesignSystem/Select/index.tsx → apps/scandic-web/components/TempDesignSystem/DeprecatedSelect/index.tsx
View File

@@ -10,7 +10,8 @@ import {
SelectValue,
} from "react-aria-components"
import Label from "@/components/TempDesignSystem/Form/Label"
import { Label } from "@scandic-hotels/design-system/Label"
import Body from "@/components/TempDesignSystem/Text/Body"
import useSetOverflowVisibleOnRA from "@/hooks/useSetOverflowVisibleOnRA"

17
apps/scandic-web/components/TempDesignSystem/Select/select.module.css → apps/scandic-web/components/TempDesignSystem/DeprecatedSelect/select.module.css
View File

@@ -123,20 +123,3 @@
.listBoxItem[data-selected="true"].showRadioButton:before {
box-shadow: inset 0 0 0 8px var(--Surface-UI-Fill-Active);
}
/* Use global react aria classnames here since setting a css modules classname overrides
the class set by react aria.We use that class to style the child label component. */
.select:not(.discreet) :global(.react-aria-SelectValue) {
display: grid;
transition: height 200ms ease;
}
.input :global(.react-aria-SelectValue) {
height: 18px;
overflow: hidden;
}
.input :global(.react-aria-SelectValue):has(:nth-child(2)) {
height: 38px;
overflow: visible;
}

0
apps/scandic-web/components/TempDesignSystem/Select/select.ts → apps/scandic-web/components/TempDesignSystem/DeprecatedSelect/select.ts
View File

6
apps/scandic-web/components/TempDesignSystem/Form/Country/country.module.css
View File

@@ -3,6 +3,7 @@
border: 1px solid var(--Border-Interactive-Default);
border-radius: var(--Corner-radius-md);
position: relative;
height: 56px;
&[data-required] .label::after {
content: " *";
@@ -15,7 +16,8 @@
}
&[data-focused] {
border-color: var(--Border-Interactive-Focus);
outline-offset: -2px;
outline: 2px solid var(--Border-Interactive-Focus);
.button,
.input {
@@ -54,9 +56,9 @@
box-sizing: border-box;
display: flex;
gap: var(--Space-x1);
height: 56px;
padding: var(--Space-x15);
width: 100%;
height: 100%;
}
.displayText {

55
apps/scandic-web/components/TempDesignSystem/Form/Input/AriaInputWithLabel/input.module.css
View File

@@ -1,55 +0,0 @@
.container {
align-content: center;
background-color: var(--Surface-Primary-Default);
border-color: var(--Border-Interactive-Default);
border-style: solid;
border-width: 1px;
border-radius: var(--Corner-radius-md);
display: grid;
min-width: 0; /* allow shrinkage */
height: 60px;
padding: var(--Space-x1) var(--Space-x2);
transition: border-color 200ms ease;
}
.container:has(.input:focus) {
border-color: var(--Border-Interactive-Focus);
}
.container:has(.input:disabled) {
background-color: var(--Surface-Primary-Disabled);
border: none;
color: var(--Text-Interactive-Disabled);
}
.container:has(.input[data-invalid="true"], .input[aria-invalid="true"]) {
border-color: var(--Border-Interactive-Error);
&:focus-within {
outline-offset: -2px;
outline: 2px solid var(--Border-Interactive-Error);
}
}
.input {
background: none;
border: none;
color: var(--Text-Default);
height: 1px;
margin: 0;
order: 2;
overflow: visible;
padding: 0;
transition: height 150ms ease;
}
.input:focus,
.input:placeholder-shown,
.input[value]:not([value=""]) {
height: 18px;
outline: none;
}
.input:disabled {
color: var(--Text-Interactive-Disabled);
}

4
apps/scandic-web/components/TempDesignSystem/Form/Input/AriaInputWithLabel/input.ts
View File

@@ -1,4 +0,0 @@
export interface AriaInputWithLabelProps
extends React.InputHTMLAttributes<HTMLInputElement> {
label: string
}

4
apps/scandic-web/components/TempDesignSystem/Form/Input/index.tsx
View File

@@ -6,8 +6,8 @@ import { Controller, useFormContext } from "react-hook-form"
import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Input as InputWithLabel } from "@scandic-hotels/design-system/Input"
import AriaInputWithLabel from "@/components/TempDesignSystem/Form/Input/AriaInputWithLabel"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import { getErrorMessage } from "./errors"
@@ -63,7 +63,7 @@ const Input = forwardRef<HTMLInputElement, InputProps>(function Input(
validationBehavior="aria"
value={field.value}
>
<AriaInputWithLabel
<InputWithLabel
{...field}
ref={ref}
aria-labelledby={field.name}

18
apps/scandic-web/components/TempDesignSystem/Form/Label/index.tsx
View File

@@ -1,18 +0,0 @@
import { labelVariants } from "./variants"
import type { LabelProps } from "./label"
export default function Label({
children,
className,
required,
size,
}: LabelProps) {
const classNames = labelVariants({
className,
size,
required,
})
return <span className={classNames}>{children}</span>
}

57
apps/scandic-web/components/TempDesignSystem/Form/Label/label.module.css
View File

@@ -1,57 +0,0 @@
.label {
color: var(--Text-Interactive-Placeholder);
font-family: "fira sans";
font-weight: 400;
letter-spacing: 0.03px;
line-height: 120%;
text-align: left;
transition: font-size 100ms ease;
user-select: none;
}
span.small {
display: block;
font-size: 12px;
}
span.regular {
font-size: 16px;
order: 1;
}
span.discreet {
color: var(--Text-Interactive-Default);
font-weight: 500;
order: unset;
}
span.required:after {
content: " *";
}
/* Handle input and textarea fields */
input:focus ~ .label,
input:placeholder-shown ~ .label,
input[value]:not([value=""]) ~ .label,
textarea:focus ~ .label textarea:placeholder-shown ~ .label,
textarea[value]:not([value=""]) ~ .label {
font-size: 12px;
margin-bottom: var(--Space-x05);
}
input:disabled ~ .label,
textarea:disabled ~ .label,
:global(.select-container)[data-disabled] .label {
color: var(--Text-Interactive-Disabled);
}
/* Handle select fields */
:global(.select-button) .label {
order: unset;
}
:global(.select-container)[data-open="true"] .label:not(.discreet),
:global(.react-aria-SelectValue):has(:nth-child(2)) .label:not(.discreet) {
font-size: 12px;
margin-bottom: var(--Space-x05);
}

4
apps/scandic-web/components/TempDesignSystem/Form/PasswordInput/index.tsx
View File

@@ -6,9 +6,9 @@ import { Controller, useFormContext } from "react-hook-form"
import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Input } from "@scandic-hotels/design-system/Input"
import Button from "@/components/TempDesignSystem/Button"
import AriaInputWithLabel from "@/components/TempDesignSystem/Form/Input/AriaInputWithLabel"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import { passwordValidators } from "@/utils/zod/passwordValidator"
@@ -62,7 +62,7 @@ export default function PasswordInput({
}
>
<div className={styles.inputWrapper}>
<AriaInputWithLabel
<Input
{...field}
aria-labelledby={field.name}
id={field.name}

6
apps/scandic-web/components/TempDesignSystem/Form/Phone/index.tsx
View File

@@ -12,12 +12,12 @@ import {
import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Input } from "@scandic-hotels/design-system/Input"
import { Label } from "@scandic-hotels/design-system/Label"
import { getDefaultCountryFromLang } from "@/constants/languages"
import ErrorMessage from "@/components/TempDesignSystem/Form/ErrorMessage"
import AriaInputWithLabel from "@/components/TempDesignSystem/Form/Input/AriaInputWithLabel"
import Label from "@/components/TempDesignSystem/Form/Label"
import Body from "@/components/TempDesignSystem/Text/Body"
import useLang from "@/hooks/useLang"
@@ -114,7 +114,7 @@ export default function Phone({
type="tel"
value={phoneNumber}
>
<AriaInputWithLabel
<Input
{...register(name, registerOptions)}
autoComplete="tel-national"
label={label}

11
apps/scandic-web/components/TempDesignSystem/Form/Phone/phone.module.css
View File

@@ -61,17 +61,22 @@
.select {
align-content: center;
background-color: var(--Main-Grey-White);
border-color: var(--Scandic-Beige-40);
border-color: var(--Border-Interactive-Default);
border-style: solid;
border-width: 1px;
border-radius: var(--Corner-radius-md);
display: grid;
gap: var(--Space-x05);
grid-template-rows: auto auto;
height: 60px;
padding: var(--Space-x1) var(--Space-x2);
height: 56px;
padding: var(--Space-x15);
transition: border-color 200ms ease;
width: 100%;
&:focus {
outline-offset: -2px;
outline: 2px solid var(--Border-Interactive-Focus);
}
}
.select[aria-expanded="true"] .chevron {

4
apps/scandic-web/components/TempDesignSystem/Form/Select/index.tsx
View File

@@ -1,7 +1,7 @@
"use client"
import { useController, useFormContext } from "react-hook-form"
import ReactAriaSelect from "@/components/TempDesignSystem/Select"
import DeprecatedSelect from "@/components/TempDesignSystem/DeprecatedSelect"
import type { SelectProps } from "./select"
@@ -22,7 +22,7 @@ export default function Select({
})
return (
<ReactAriaSelect
<DeprecatedSelect
className={className}
defaultSelectedKey={field.value}
disabled={disabled || field.disabled}

2
apps/scandic-web/components/TempDesignSystem/Form/Select/select.ts
View File

@@ -1,6 +1,6 @@
import type { RegisterOptions } from "react-hook-form"
import type { SelectProps as ReactAriaSelectProps } from "@/components/TempDesignSystem/Select/select"
import type { SelectProps as ReactAriaSelectProps } from "@/components/TempDesignSystem/DeprecatedSelect/select"
export interface SelectProps
extends Omit<

2
apps/scandic-web/components/TempDesignSystem/Form/TextArea/index.tsx
View File

@@ -9,8 +9,8 @@ import {
import { Controller, useFormContext } from "react-hook-form"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Label } from "@scandic-hotels/design-system/Label"
import Label from "@/components/TempDesignSystem/Form/Label"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Body from "../../Text/Body"

60
packages/design-system/lib/components/Input/Input.stories.tsx Normal file
View File

@@ -0,0 +1,60 @@
import type { Meta, StoryObj } from '@storybook/react'
import { Input } from './Input'
import { TextField } from 'react-aria-components'
const meta: Meta<typeof Input> = {
title: 'Components/Input',
component: ({ isInvalid, ...props }) => (
<TextField isInvalid={isInvalid}>
<Input {...props} />
</TextField>
),
argTypes: {},
}
export default meta
type Story = StoryObj<typeof Input>
export const Default: Story = {
args: {
label: 'Label',
name: 'foo',
required: false,
},
}
export const Filled: Story = {
args: {
label: 'Label',
name: 'foo',
value: 'Value',
},
}
export const Error: Story = {
args: {
label: 'Label',
name: 'foo',
// @ts-expect-error Input does not support this, but wrapping <TextField> does
isInvalid: true,
},
}
export const Disabled: Story = {
args: {
label: 'Label',
name: 'foo',
disabled: true,
},
}
export const DisabledFilled: Story = {
args: {
label: 'Label',
name: 'foo',
disabled: true,
value: 'Value',
},
}

25
apps/scandic-web/components/TempDesignSystem/Form/Input/AriaInputWithLabel/index.tsx → packages/design-system/lib/components/Input/Input.tsx
View File

@@ -1,22 +1,22 @@
import { cx } from "class-variance-authority"
import { cx } from 'class-variance-authority'
import {
type ForwardedRef,
forwardRef,
useId,
useImperativeHandle,
useRef,
} from "react"
import { Input as AriaInput, Label as AriaLabel } from "react-aria-components"
} from 'react'
import { Input as AriaInput, Label as AriaLabel } from 'react-aria-components'
import Label from "@/components/TempDesignSystem/Form/Label"
import Body from "@/components/TempDesignSystem/Text/Body"
import { Label } from '../Label'
import styles from "./input.module.css"
import styles from './input.module.css'
import type { AriaInputWithLabelProps } from "./input"
import type { InputProps } from './types'
import { Typography } from '../Typography'
const AriaInputWithLabel = forwardRef(function AriaInputWithLabelComponent(
{ label, ...props }: AriaInputWithLabelProps,
export const Input = forwardRef(function AriaInputWithLabelComponent(
{ label, ...props }: InputProps,
forwardedRef: ForwardedRef<HTMLInputElement>
) {
const ref = useRef<HTMLInputElement>(null)
@@ -31,17 +31,16 @@ const AriaInputWithLabel = forwardRef(function AriaInputWithLabelComponent(
return (
<AriaLabel className={styles.container}>
<Body asChild fontOnly>
<Typography variant="Body/Paragraph/mdRegular">
<AriaInput
{...props}
placeholder={props.placeholder}
className={cx(styles.input, props.className)}
ref={ref}
id={inputId}
/>
</Body>
</Typography>
<Label required={props.required}>{label}</Label>
</AriaLabel>
)
})
export default AriaInputWithLabel

1
packages/design-system/lib/components/Input/index.ts Normal file
View File

@@ -0,0 +1 @@
export { Input } from './Input'

60
packages/design-system/lib/components/Input/input.module.css Normal file
View File

@@ -0,0 +1,60 @@
.container {
align-content: center;
background-color: var(--Surface-Primary-Default);
border: 1px solid var(--Border-Interactive-Default);
border-radius: var(--Corner-radius-md);
display: grid;
min-width: 0; /* allow shrinkage */
height: 56px;
padding: var(--Space-x15);
box-sizing: border-box;
cursor: text;
&:has(.input:focus) {
outline-offset: -2px;
outline: 2px solid var(--Border-Interactive-Focus);
}
&:has(.input:disabled) {
background-color: var(--Surface-Primary-Disabled);
border: transparent;
cursor: unset;
}
&:has(.input[data-invalid='true'], .input[aria-invalid='true']) {
border-color: var(--Border-Interactive-Error);
&:focus-within {
outline-offset: -2px;
outline: 2px solid var(--Border-Interactive-Error);
}
}
}
.input {
background: none;
border: none;
color: var(--Text-Default);
height: 1px;
order: 2;
padding: 0;
transition: height 150ms ease;
&:focus,
&:placeholder-shown,
&[value]:not([value='']) {
height: 18px;
outline: none;
}
&:disabled {
color: var(--Text-Interactive-Disabled);
}
}
@media (hover: hover) {
.input:active:not(:disabled) {
height: 18px;
outline: none;
}
}

6
packages/design-system/lib/components/Input/types.ts Normal file
View File

@@ -0,0 +1,6 @@
import { ComponentProps } from 'react'
import { Input } from 'react-aria-components'
export interface InputProps extends ComponentProps<typeof Input> {
label: string
}

34
packages/design-system/lib/components/Label/Label.stories.tsx Normal file
View File

@@ -0,0 +1,34 @@
import type { Meta, StoryObj } from '@storybook/react'
import { Label } from './Label'
const meta: Meta<typeof Label> = {
title: 'Components/Label',
component: Label,
argTypes: {},
}
export default meta
type Story = StoryObj<typeof Label>
export const Default: Story = {
args: {
children: 'Label',
required: false,
},
}
export const Discreet: Story = {
args: {
children: 'Label',
size: 'discreet',
},
}
export const Small: Story = {
args: {
children: 'Label',
size: 'small',
},
}

13
packages/design-system/lib/components/Label/Label.tsx Normal file
View File

@@ -0,0 +1,13 @@
import { labelVariants } from './variants'
import type { LabelProps } from './types'
export function Label({ children, className, required, size }: LabelProps) {
const classNames = labelVariants({
className,
size,
required,
})
return <span className={classNames}>{children}</span>
}

1
packages/design-system/lib/components/Label/index.ts Normal file
View File

@@ -0,0 +1 @@
export { Label } from './Label'

98
packages/design-system/lib/components/Label/label.module.css Normal file
View File

@@ -0,0 +1,98 @@
.label {
font-family:
var(--Body-Paragraph-Font-family), var(--Body-Paragraph-Font-fallback);
font-size: var(--Body-Paragraph-Size);
font-weight: var(--Body-Paragraph-Font-weight);
letter-spacing: var(--Body-Paragraph-Letter-spacing);
text-transform: unset;
line-height: 1.5;
text-decoration: none;
transition: font-size 100ms ease;
text-align: left;
color: var(--Text-Interactive-Placeholder);
user-select: none;
}
.small {
font-family: var(--Label-Font-family), var(--Label-Font-fallback);
font-size: var(--Label-Size);
font-weight: var(--Label-Font-weight);
letter-spacing: var(--Label-Letter-spacing);
text-transform: unset;
line-height: 1.5;
text-decoration: none;
}
.discreet {
font-family:
var(--Body-Supporting-text-Font-family),
var(--Body-Supporting-text-Font-fallback);
font-size: var(--Body-Supporting-text-Size);
font-weight: var(--Body-Supporting-text-Font-weight-2);
letter-spacing: var(--Body-Supporting-text-Letter-spacing);
text-transform: unset;
line-height: 1.4;
text-decoration: none;
color: var(--Text-Default);
order: unset;
}
.required:after {
content: ' *';
}
input:focus,
input:placeholder-shown,
input[value]:not([value='']),
textarea:focus,
textarea:placeholder-shown,
textarea[value]:not([value='']) {
& ~ .label {
font-family: var(--Label-Font-family), var(--Label-Font-fallback);
font-size: var(--Label-Size);
font-weight: var(--Label-Font-weight);
letter-spacing: var(--Label-Letter-spacing);
text-transform: unset;
line-height: 1.5;
text-decoration: none;
margin-bottom: var(--Space-x05);
}
}
input:disabled,
textarea:disabled {
& ~ .label {
color: var(--Text-Interactive-Disabled);
}
}
@media (hover: hover) {
input:active:not(:disabled) ~ .label {
font-family: var(--Label-Font-family), var(--Label-Font-fallback);
font-size: var(--Label-Size);
font-weight: var(--Label-Font-weight);
letter-spacing: var(--Label-Letter-spacing);
text-transform: unset;
line-height: 1.5;
text-decoration: none;
margin-bottom: var(--Space-x05);
}
}
/* Legacy selector for deprecated select component */
:global(.select-container)[data-disabled] .label {
color: var(--Text-Interactive-Disabled);
}
:global(.select-button) .label {
order: unset;
}
:global(.select-container)[data-open='true'] .label:not(.discreet),
:global(.react-aria-SelectValue):has(:nth-child(2)) .label:not(.discreet) {
font-size: 12px;
}

4
apps/scandic-web/components/TempDesignSystem/Form/Label/label.ts → packages/design-system/lib/components/Label/types.ts
View File

@@ -1,6 +1,6 @@
import type { VariantProps } from "class-variance-authority"
import type { VariantProps } from 'class-variance-authority'
import type { labelVariants } from "./variants"
import type { labelVariants } from './variants'
export interface LabelProps
extends React.PropsWithChildren<React.HTMLAttributes<HTMLSpanElement>>,

7
apps/scandic-web/components/TempDesignSystem/Form/Label/variants.ts → packages/design-system/lib/components/Label/variants.ts
View File

@@ -1,6 +1,6 @@
import { cva } from "class-variance-authority"
import { cva } from 'class-variance-authority'
import styles from "./label.module.css"
import styles from './label.module.css'
export const labelVariants = cva(styles.label, {
variants: {
@@ -11,11 +11,10 @@ export const labelVariants = cva(styles.label, {
},
required: {
true: styles.required,
false: "",
},
},
defaultVariants: {
size: "regular",
size: 'regular',
required: false,
},
})

4
packages/design-system/lib/components/Select/select.module.css
View File

@@ -3,6 +3,7 @@
background-color: var(--Surface-UI-Fill-Default);
border: 1px solid var(--Border-Interactive-Default);
border-radius: var(--Corner-radius-md);
height: 56px;
&[data-required] .label::after {
content: ' *';
@@ -17,7 +18,8 @@
}
}
&[data-focused] {
border-color: var(--Border-Interactive-Focus);
outline-offset: -2px;
outline: 2px solid var(--Border-Interactive-Focus);
.button,
.input {

2
packages/design-system/package.json
View File

@@ -10,6 +10,8 @@
"./ChipLink": "./dist/components/ChipLink/index.js",
"./Chips": "./dist/components/Chips/index.js",
"./Divider": "./dist/components/Divider/index.js",
"./Input": "./dist/components/Input/index.js",
"./Label": "./dist/components/Label/index.js",
"./Select": "./dist/components/Select/index.js",
"./Typography": "./dist/components/Typography/index.js",
"./RegularRateCard": "./dist/components/RateCard/Regular/index.js",