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

Merged in chore/SW-3356-move-textarea-from-tempds-to-ds (pull request #2745)

Browse Source 
chore(SW-3356): Moved TextArea to design system

* chore(SW-3356): Moved TextArea to design system


Approved-by: Joakim Jäderberg
This commit is contained in:
Hrishikesh Vaipurkar
2025-09-02 07:39:20 +00:00
parent ecd567f54f
commit 1804f7b7cd
5 changed files with 26 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
apps/scandic-web/components/HotelReservation/EnterDetails/Details/SpecialRequests/index.tsx
View File

@@ -1,9 +1,8 @@
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import TextArea from "@scandic-hotels/design-system/Form/TextArea"
import { Typography } from "@scandic-hotels/design-system/Typography" import { Typography } from "@scandic-hotels/design-system/Typography"
import TextArea from "@/components/TempDesignSystem/Form/TextArea"
import styles from "./specialRequests.module.css" import styles from "./specialRequests.module.css"
import type { RegisterOptions } from "react-hook-form" import type { RegisterOptions } from "react-hook-form"

43
apps/scandic-web/components/TempDesignSystem/Form/TextArea/index.tsx → packages/design-system/lib/components/Form/TextArea/index.tsx
View File

@@ -1,30 +1,29 @@
"use client" 'use client'
import { import {
Label as AriaLabel, Label as AriaLabel,
Text, Text,
TextArea as AriaTextArea, TextArea as AriaTextArea,
TextField, TextField,
} from "react-aria-components" } from 'react-aria-components'
import { Controller, useFormContext } from "react-hook-form" import { Controller, useFormContext } from 'react-hook-form'
import Body from "@scandic-hotels/design-system/Body" import { MaterialIcon } from '../../Icons/MaterialIcon'
import Caption from "@scandic-hotels/design-system/Caption" import { Label } from '../../Label'
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { Typography } from '../../Typography'
import { Label } from "@scandic-hotels/design-system/Label"
import styles from "./textarea.module.css" import styles from './textarea.module.css'
import type { TextAreaProps } from "./input" import type { TextAreaProps } from './input'
export default function TextArea({ export default function TextArea({
"aria-label": ariaLabel, 'aria-label': ariaLabel,
className = "", className = '',
disabled = false, disabled = false,
helpText = "", helpText = '',
label, label,
name, name,
placeholder = "", placeholder = '',
readOnly = false, readOnly = false,
registerOptions = {}, registerOptions = {},
}: TextAreaProps) { }: TextAreaProps) {
@@ -48,7 +47,7 @@ export default function TextArea({
value={field.value} value={field.value}
> >
<AriaLabel className={styles.container}> <AriaLabel className={styles.container}>
<Body asChild fontOnly> <Typography variant="Body/Paragraph/mdRegular">
<AriaTextArea <AriaTextArea
{...field} {...field}
aria-labelledby={field.name} aria-labelledby={field.name}
@@ -57,22 +56,24 @@ export default function TextArea({
required={!!registerOptions.required} required={!!registerOptions.required}
className={styles.textarea} className={styles.textarea}
/> />
</Body> </Typography>
<Label required={!!registerOptions.required}>{label}</Label> <Label required={!!registerOptions.required}>{label}</Label>
</AriaLabel> </AriaLabel>
{helpText && !fieldState.error ? ( {helpText && !fieldState.error ? (
<Caption asChild color="black"> <Typography variant="Body/Supporting text (caption)/smRegular">
<Text className={styles.helpText} slot="description"> <Text className={styles.helpText} slot="description">
<MaterialIcon icon="check" size={30} /> <MaterialIcon icon="check" size={30} />
{helpText} {helpText}
</Text> </Text>
</Caption> </Typography>
) : null} ) : null}
{fieldState.error ? ( {fieldState.error ? (
<Caption className={styles.error} fontOnly> <Typography variant="Body/Supporting text (caption)/smRegular">
<MaterialIcon icon="info" color="Icon/Interactive/Accent" /> <p className={styles.error}>
{fieldState.error.message} <MaterialIcon icon="info" color="Icon/Interactive/Accent" />
</Caption> {fieldState.error.message}
</p>
</Typography>
) : null} ) : null}
</TextField> </TextField>
)} )}

2
apps/scandic-web/components/TempDesignSystem/Form/TextArea/input.ts → packages/design-system/lib/components/Form/TextArea/input.ts
View File

@@ -1,4 +1,4 @@
import type { RegisterOptions } from "react-hook-form" import type { RegisterOptions } from 'react-hook-form'
export interface TextAreaProps export interface TextAreaProps
extends React.InputHTMLAttributes<HTMLTextAreaElement> { extends React.InputHTMLAttributes<HTMLTextAreaElement> {

2
apps/scandic-web/components/TempDesignSystem/Form/TextArea/textarea.module.css → packages/design-system/lib/components/Form/TextArea/textarea.module.css
View File

@@ -36,7 +36,7 @@
color: var(--Main-Grey-40); color: var(--Main-Grey-40);
} }
.container:has(.textarea[data-invalid="true"], .textarea[aria-invalid="true"]) { .container:has(.textarea[data-invalid='true'], .textarea[aria-invalid='true']) {
border-color: var(--Scandic-Red-60); border-color: var(--Scandic-Red-60);
} }

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

@@ -32,6 +32,7 @@
"./Form/ErrorMessage": "./lib/components/Form/ErrorMessage/index.tsx", "./Form/ErrorMessage": "./lib/components/Form/ErrorMessage/index.tsx",
"./Form/Phone": "./lib/components/Form/Phone/index.tsx", "./Form/Phone": "./lib/components/Form/Phone/index.tsx",
"./Form/RadioCard": "./lib/components/Form/RadioCard/index.tsx", "./Form/RadioCard": "./lib/components/Form/RadioCard/index.tsx",
"./Form/TextArea": "./lib/components/Form/TextArea/index.tsx",
"./HotelInfoCard": "./lib/components/HotelInfoCard/index.tsx", "./HotelInfoCard": "./lib/components/HotelInfoCard/index.tsx",
"./HotelCard": "./lib/components/HotelCard/index.tsx", "./HotelCard": "./lib/components/HotelCard/index.tsx",
"./HotelCard/HotelCardDialogImage": "./lib/components/HotelCard/HotelCardDialogImage/index.tsx", "./HotelCard/HotelCardDialogImage": "./lib/components/HotelCard/HotelCardDialogImage/index.tsx",