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

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

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