@ornikar/kitt-universal 1.0.0-pre

package/src/forms/TextArea/TextArea.stories.tsx

@@ -0,0 +1,74 @@
+import { action } from '@storybook/addon-actions';
+import { storiesOf } from '@storybook/react-native';
+import type { ReactElement } from 'react';
+import React from 'react';
+import { StoryComponents } from '../../story-components';
+import type { TextAreaProps } from './TextArea';
+import { TextArea } from './TextArea';
+
+const { Section, Story, StoryGrid } = StoryComponents;
+
+const defaultPlaceholder = 'Placeholder';
+const filledValue =
+  'The original Knight Rider series followed the adventures of Michael Knight, a modern-day crime fighter who uses a technologically advanced, artificially intelligent automobile. This car, named KITT, is virtually indestructible, due to a high-tech coating applied to it.';
+
+interface TextAreaVariationProps extends Partial<TextAreaProps> {
+  variationTitle: string;
+}
+
+function TextAreaVariation({ variationTitle, ...props }: TextAreaVariationProps): ReactElement {
+  return (
+    <Section key={variationTitle} title={variationTitle}>
+      <StoryGrid.Row breakpoint="medium">
+        <StoryGrid.Col title="Empty">
+          <TextArea placeholder={defaultPlaceholder} onChange={action('Changed')} {...props} />
+        </StoryGrid.Col>
+        <StoryGrid.Col title="Filled">
+          <TextArea placeholder={defaultPlaceholder} value={filledValue} onChange={action('Changed')} {...props} />
+        </StoryGrid.Col>
+        <StoryGrid.Col title="Hover">
+          <TextArea
+            placeholder={defaultPlaceholder}
+            value={filledValue}
+            internalForceState="hover"
+            onChange={action('Changed')}
+            {...props}
+          />
+        </StoryGrid.Col>
+        <StoryGrid.Col title="Focus">
+          <TextArea
+            placeholder={defaultPlaceholder}
+            value={filledValue}
+            internalForceState="focus"
+            onChange={action('Changed')}
+            {...props}
+          />
+        </StoryGrid.Col>
+        <StoryGrid.Col title="Disabled">
+          <TextArea disabled placeholder={defaultPlaceholder} onChange={action('Changed')} {...props} />
+        </StoryGrid.Col>
+        <StoryGrid.Col title={'Disabled\u00A0Filled'}>
+          <TextArea
+            disabled
+            placeholder={defaultPlaceholder}
+            value={filledValue}
+            onChange={action('Changed')}
+            {...props}
+          />
+        </StoryGrid.Col>
+      </StoryGrid.Row>
+    </Section>
+  );
+}
+
+storiesOf('kitt/Forms', module).add('TextArea', () => (
+  <Story title="TextArea">
+    <Section.DemoSection>
+      <TextArea placeholder="Placeholder" onChange={action('Changed')} />
+    </Section.DemoSection>
+
+    <TextAreaVariation variationTitle="Default" />
+    <TextAreaVariation variationTitle="Valid" state="valid" />
+    <TextAreaVariation variationTitle="Invalid" state="invalid" />
+  </Story>
+));

package/src/forms/TextArea/TextArea.tsx

@@ -0,0 +1,12 @@
+import type { ReactElement } from 'react';
+import React from 'react';
+import { useTheme } from 'styled-components/native';
+import type { InputTextProps } from '../InputText/InputText';
+import { InputText } from '../InputText/InputText';
+
+export interface TextAreaProps extends Omit<InputTextProps, 'type'> {}
+
+export function TextArea({ ...props }: TextAreaProps): ReactElement {
+  const theme = useTheme();
+  return <InputText multiline {...props} type="text" minHeight={theme.kitt.forms.input.textAreaMinHeight} />;
+}