feat: create textarea component

packages/components/src/atoms/Textarea/Textarea.tsx

@@ -0,0 +1,33 @@
+import type { TextareaHTMLAttributes } from 'react'
+import React, { forwardRef } from 'react'
+
+export interface TextareaProps
+  extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  /**
+   * ID to find this component in testing tools (e.g.: cypress, testing library, and jest).
+   */
+  testId?: string
+  /**
+   * Controls the resize property of the textare (e.g.: none, vertical, horizontal, both).
+   * Default is 'both'.
+   */
+  resize?: 'none' | 'vertical' | 'horizontal' | 'both'
+}
+
+const Textarea = forwardRef<HTMLTextAreaElement, TextareaProps>(
+  function Textarea(
+    { testId = 'fs-textarea', resize = 'both', ...otherProps },
+    ref
+  ) {
+    return (
+      <textarea
+        ref={ref}
+        data-fs-textarea
+        data-fs-textarea-resize={resize}
+        data-testid={testId}
+        {...otherProps}
+      />
+    )
+  }
+)
+export default Textarea

packages/components/src/atoms/Textarea/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Textarea'
+export type { TextareaProps } from './Textarea'

packages/components/src/index.ts

@@ -12,6 +12,8 @@ export { default as Icon } from './atoms/Icon'
 export type { IconProps } from './atoms/Icon'
 export { default as Input } from './atoms/Input'
 export type { InputProps } from './atoms/Input'
+export { default as Textarea } from './atoms/Textarea'
+export type { TextareaProps } from './atoms/Textarea'
 export { default as Label } from './atoms/Label'
 export type { LabelProps } from './atoms/Label'
 export { default as Link } from './atoms/Link'
@@ -67,12 +69,8 @@ export type {
   CarouselBulletsProps,
 } from './molecules/Carousel'
 
-export {
-  default as Card
-} from './molecules/Card'
-export type {
-  CardProps
-} from './molecules/Card'
+export { default as Card } from './molecules/Card'
+export type { CardProps } from './molecules/Card'
 
 export {
   default as CartItem,
@@ -369,5 +367,5 @@ export {
 export type {
   SKUMatrixProps,
   SKUMatrixTriggerProps,
-  SKUMatrixSidebarProps
+  SKUMatrixSidebarProps,
 } from './organisms/SKUMatrix'

packages/ui/src/components/atoms/TextArea/styles.scss

@@ -0,0 +1,86 @@
+[data-fs-textarea] {
+  // --------------------------------------------------------
+  // Design Tokens for Textarea
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-textarea-padding: var(--fs-spacing-1) var(--fs-spacing-2);
+  --fs-textarea-height: calc(var(--fs-control-tap-size) * 3);
+
+  --fs-textarea-bkg-color: var(--fs-color-body-bkg);
+  --fs-textarea-box-shadow: none;
+  --fs-textarea-box-shadow-hover: 0 0 0 var(--fs-border-width)
+    var(--fs-border-color-active);
+
+  --fs-textarea-border-radius: var(--fs-border-radius);
+  --fs-textarea-border-width: var(--fs-border-width);
+  --fs-textarea-border-color: var(--fs-border-color);
+  --fs-textarea-border-color-hover: var(--fs-border-color-active);
+
+  --fs-textarea-text-color: var(--fs-color-text);
+  --fs-textarea-text-size: var(--fs-text-size-body);
+
+  --fs-textarea-line-height: 1.25;
+
+  --fs-textarea-transition-function: var(--fs-transition-function);
+  --fs-textarea-transition-property: var(--fs-transition-property);
+  --fs-textarea-transition-timing: var(--fs-transition-timing);
+
+  // Disabled properties
+  --fs-textarea-disabled-bkg-color: var(--fs-color-disabled-bkg);
+  --fs-textarea-disabled-text-color: var(--fs-color-disabled-text);
+  --fs-textarea-disabled-border-width: var(--fs-border-width);
+  --fs-textarea-disabled-border-color: var(--fs-border-color);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  width: 100%;
+  height: var(--fs-textarea-height);
+  padding: var(--fs-textarea-padding);
+  font-size: var(--fs-textarea-text-size);
+  line-height: var(--fs-textarea-line-height);
+  color: var(--fs-textarea-text-color);
+  background-color: var(--fs-textarea-bkg-color);
+  border: var(--fs-textarea-border-width) solid var(--fs-textarea-border-color);
+  border-radius: var(--fs-textarea-border-radius);
+  box-shadow: var(--fs-textarea-box-shadow);
+  transition:
+    var(--fs-textarea-transition-property) var(--fs-textarea-transition-timing)
+      var(--fs-textarea-transition-function),
+    width 0s,
+    height 0s;
+
+  @include input-focus-ring;
+
+  &:hover:not(:disabled):not(:focus-visible):not(:focus) {
+    border-color: var(--fs-textarea-border-color-hover);
+    box-shadow: var(--fs-textarea-box-shadow-hover);
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    color: var(--fs-textarea-disabled-text-color);
+    background-color: var(--fs-textarea-disabled-bkg-color);
+    border: var(--fs-textarea-disabled-border-width) solid
+      var(--fs-textarea-disabled-border-color);
+  }
+
+  // --------------------------------------------------------
+  // Variants Styles
+  // --------------------------------------------------------
+
+  &[data-fs-textarea-resize='none'] {
+    resize: none;
+  }
+  &[data-fs-textarea-resize='vertical'] {
+    resize: vertical;
+  }
+  &[data-fs-textarea-resize='horizontal'] {
+    resize: horizontal;
+  }
+  &[data-fs-textarea-resize='both'] {
+    resize: both;
+  }
+}