@infonomic/uikit 5.3.0 → 5.5.0

package/src/components/forms/text-area.astro

@@ -0,0 +1,77 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+import type { Intent, Variant } from './@types/input.js'
+import ErrorText from './error-text.astro'
+import HelpText from './help-text.astro'
+import inputStyles from './input.module.css'
+import Label from './label.astro'
+import styles from './text-area.module.css'
+
+interface Props extends HTMLAttributes<'textarea'> {
+  id: string
+  name: string
+  label: string
+  required?: boolean
+  variant?: Variant
+  intent?: Intent
+  rows?: number
+  placeHolder?: string
+  autoComplete?: string
+  error?: boolean
+  helpText?: string
+  errorText?: string
+  class?: string
+}
+
+const {
+  id,
+  name,
+  label,
+  rows = 4,
+  required = false,
+  variant = 'outlined',
+  intent = 'primary',
+  placeHolder = '',
+  autoComplete = 'off',
+  error = false,
+  helpText = '',
+  errorText = '',
+  class: className,
+  ...rest
+} = Astro.props as Props
+---
+
+<fieldset class:list={['text-area-wrapper', inputStyles['input-wrapper']]}>
+  <Label id={id} for={id} required={required} label={label} />
+  <textarea
+    id={id}
+    name={name}
+    required={required}
+    rows={rows}
+    auto-complete={autoComplete}
+    placeholder={placeHolder}
+    aria-labelledby={`label-for-${id}`}
+    aria-invalid={error}
+    aria-required={required}
+    aria-errormessage={errorText}
+    aria-describedby={error ? `error-for-${id}` : undefined}
+    class:list={[
+      'text-area',
+      variant,
+      intent,
+      inputStyles.input,
+      inputStyles[variant],
+      inputStyles[intent],
+      styles['text-area'],
+      error && inputStyles.error,
+      className
+    ]}
+    {...rest}></textarea>
+  {
+    error ? (
+      <ErrorText id={`error-for-${id}`} text={errorText ?? helpText} />
+    ) : (
+      helpText?.length > 0 && <HelpText text={helpText} />
+    )
+  }
+</fieldset>

package/src/icons/check-icon.astro

@@ -0,0 +1,37 @@
+---
+import type { HTMLAttributes } from 'astro/types'
+
+interface Props extends HTMLAttributes<'div'> {
+  class?: string
+  width?: string
+  height?: string
+  menuItem?: boolean
+  svgClass?: string
+}
+
+import IconElement from './icon-element.astro'
+import styles from './icons.module.css'
+
+const { class: className, width, height, svgClass: svgClassName, menuItem, ...rest } = Astro.props
+---
+
+<IconElement
+  class:list={['check-icon', className]}
+  width={width}
+  height={height}
+  menuItem={menuItem}
+  {...rest}
+>
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 15 15"
+    class:list={[styles['fill-current'], svgClassName]}
+    focusable="false"
+    aria-hidden="true"
+  >
+    <path
+      d="M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z"
+      fill-rule="evenodd"
+      clip-rule="evenodd"></path>
+  </svg>
+</IconElement>