@grantbii/design-system 1.0.46 → 1.0.47

package/core/atoms/Textarea.d.ts

@@ -0,0 +1,4 @@
+declare const Textarea: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").TextareaHTMLAttributes<HTMLTextAreaElement>, HTMLTextAreaElement>, {
+    $heightPixels?: number;
+}>> & string;
+export default Textarea;

package/core/atoms/Textarea.js

@@ -0,0 +1,31 @@
+import styled from "styled-components";
+import { Colors } from "../foundations";
+const Textarea = styled.textarea `
+  height: ${({ $heightPixels = 100 }) => $heightPixels}px;
+  padding: 12px 16px;
+  border-radius: 6px;
+
+  &:disabled {
+    background-color: ${Colors.neutral.grey4};
+    border: 1px solid ${Colors.neutral.grey3};
+  }
+
+  &:valid {
+    border: 1px solid ${Colors.neutral.grey3};
+  }
+
+  &:invalid {
+    border: 1px solid ${Colors.accent.red1};
+  }
+
+  &:focus&:valid {
+    border: 1px solid ${Colors.accent.blue1};
+    outline: 1px solid ${Colors.accent.blue1};
+  }
+
+  &:focus&:invalid {
+    border: 1px solid ${Colors.accent.red1};
+    outline: 1px solid ${Colors.accent.red1};
+  }
+`;
+export default Textarea;

package/core/atoms/index.d.ts

@@ -3,3 +3,4 @@ export { default as BrandLogo } from "./BrandLogo";
 export { default as Button } from "./Button";
 export { default as LinkButton } from "./LinkButton";
 export { default as RadioButton } from "./RadioButton";
+export { default as Textarea } from "./Textarea";

package/core/atoms/index.js

@@ -3,3 +3,4 @@ export { default as BrandLogo } from "./BrandLogo";
 export { default as Button } from "./Button";
 export { default as LinkButton } from "./LinkButton";
 export { default as RadioButton } from "./RadioButton";
+export { default as Textarea } from "./Textarea";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grantbii/design-system",
-  "version": "1.0.46",
+  "version": "1.0.47",
   "description": "Grantbii's Design System",
   "homepage": "https://design.grantbii.com",
   "repository": {

package/stories/atoms/Textarea.stories.d.ts

@@ -0,0 +1,7 @@
+import { Textarea } from "@/.";
+import { Meta, StoryObj } from "@storybook/nextjs-vite";
+declare const meta: Meta<typeof Textarea>;
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const BasicExample: Story;
+export declare const WithValidation: Story;

package/stories/atoms/Textarea.stories.js

@@ -0,0 +1,16 @@
+import { Textarea } from "@/.";
+const meta = {
+    title: "Atoms/Textarea",
+    component: Textarea,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+    },
+};
+export default meta;
+export const BasicExample = {
+    args: { placeholder: "Type here" },
+};
+export const WithValidation = {
+    args: { placeholder: "Must be at least 10 characters long", minLength: 10 },
+};