diff --git a/packages/berlin/src/components/textarea/Textarea.styled.tsx b/packages/berlin/src/components/textarea/Textarea.styled.tsx new file mode 100644 index 00000000..7bd7bf20 --- /dev/null +++ b/packages/berlin/src/components/textarea/Textarea.styled.tsx @@ -0,0 +1,15 @@ +import styled from 'styled-components'; + +export const StyledTextarea = styled.textarea` + background-color: var(--color-white); + border-radius: 0.5rem; + border: 1px solid var(--color-black); + height: 12rem; + padding: 0.75rem 1rem; + resize: none; + width: 100%; + + &:disabled { + cursor: not-allowed; + } +`; diff --git a/packages/berlin/src/components/textarea/Textarea.tsx b/packages/berlin/src/components/textarea/Textarea.tsx new file mode 100644 index 00000000..a505fe76 --- /dev/null +++ b/packages/berlin/src/components/textarea/Textarea.tsx @@ -0,0 +1,22 @@ +// Components +import { FlexColumn } from '../containers/FlexColum.styled'; +import Label from '../typography/Label'; + +// Styled Components +import { StyledTextarea } from './Textarea.styled'; + +type TextareaProps = { + label: string; + $required?: boolean; +}; + +function Textarea({ label, $required, ...props }: TextareaProps) { + return ( + + {label && } + + + ); +} + +export default Textarea; diff --git a/packages/berlin/src/components/textarea/index.ts b/packages/berlin/src/components/textarea/index.ts new file mode 100644 index 00000000..20e92f83 --- /dev/null +++ b/packages/berlin/src/components/textarea/index.ts @@ -0,0 +1 @@ +export { default } from './Textarea';