@grantbii/design-system 1.0.46 → 1.0.48

package/core/atoms/RadioButton.js

@@ -13,7 +13,7 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import styled from "styled-components";
 const RadioButton = (_a) => {
     var { label, id } = _a, radioButtonProps = __rest(_a, ["label", "id"]);
-    return (_jsxs(BaseRadioButton, { children: [_jsx("input", Object.assign({}, radioButtonProps, { id: id, type: "radio" })), _jsx("label", { htmlFor: id, children: label })] }));
+    return (_jsxs(BaseRadioButton, { children: [_jsx("input", Object.assign({}, radioButtonProps, { id: `${id}-radio-button`, type: "radio" })), _jsx("label", { htmlFor: `${id}-radio-button`, children: label })] }));
 };
 export default RadioButton;
 const BaseRadioButton = styled.div `

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/core/molecules/RadioButtons.js

@@ -16,7 +16,7 @@ import { RadioButton } from "../atoms";
 const RadioButtons = ({ name, options }) => {
     return (_jsx(RadioGroup, { children: options.map((_a) => {
             var { value } = _a, props = __rest(_a, ["value"]);
-            return (_createElement(RadioButton, Object.assign({}, props, { key: `${value}-radio-button`, id: `${value}-radio-button`, value: value, name: name })));
+            return (_createElement(RadioButton, Object.assign({}, props, { key: `${name}-${value}`, id: `${name}-${value}`, value: value, name: name })));
         }) }));
 };
 export default RadioButtons;

package/core/organisms/YesNoOptions.d.ts

@@ -0,0 +1,9 @@
+import { DetailedHTMLProps, InputHTMLAttributes } from "react";
+type YesNoOptionsProps = {
+    name: string;
+    yesProps: DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+    noProps: DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+    unsureProps?: DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>;
+};
+declare const YesNoOptions: ({ name, yesProps, noProps, unsureProps, }: YesNoOptionsProps) => import("react/jsx-runtime").JSX.Element;
+export default YesNoOptions;

package/core/organisms/YesNoOptions.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import styled from "styled-components";
+import { RadioButton } from "../atoms";
+import { LogicOption } from "@grantbii/ui-base/enums";
+const YesNoOptions = ({ name, yesProps, noProps, unsureProps, }) => (_jsxs(RadioGroup, { children: [_jsx(RadioButton, Object.assign({}, yesProps, { id: `${name}-yes`, label: LogicOption.YES, value: LogicOption.YES, name: name })), _jsx(RadioButton, Object.assign({}, noProps, { id: `${name}-no`, label: LogicOption.NO, value: LogicOption.NO, name: name })), unsureProps ? (_jsx(RadioButton, Object.assign({}, unsureProps, { id: `${name}-unsure`, label: LogicOption.UNSURE, value: LogicOption.UNSURE, name: name }))) : (_jsx(_Fragment, {}))] }));
+export default YesNoOptions;
+const RadioGroup = styled.div `
+  display: flex;
+  gap: 12px;
+`;

package/core/organisms/index.d.ts

@@ -0,0 +1 @@
+export { default as YesNoOptions } from "./YesNoOptions";

package/core/organisms/index.js

@@ -0,0 +1 @@
+export { default as YesNoOptions } from "./YesNoOptions";

package/index.d.ts

@@ -3,3 +3,4 @@ export * from "./core/foundations";
 export { default as GlobalStyle } from "./core/global/GlobalStyle";
 export * from "./core/integrations";
 export * from "./core/molecules";
+export * from "./core/organisms";

package/index.js

@@ -3,3 +3,4 @@ export * from "./core/foundations";
 export { default as GlobalStyle } from "./core/global/GlobalStyle";
 export * from "./core/integrations";
 export * from "./core/molecules";
+export * from "./core/organisms";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@grantbii/design-system",
-  "version": "1.0.46",
+  "version": "1.0.48",
   "description": "Grantbii's Design System",
   "homepage": "https://design.grantbii.com",
   "repository": {
@@ -18,6 +18,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
+    "@grantbii/ui-base": "1.0.13",
     "@phosphor-icons/react": "^2.1.10",
     "country-flag-icons": "^1.5.19",
     "next": "^15.3.5",

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 },
+};

package/stories/molecules/RadioButtons.stories.js

@@ -1,23 +1,22 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { RadioButtons } from "@/.";
+import { Location } from "@grantbii/ui-base/enums";
 import { useState } from "react";
-const SINGAPORE = "Singapore";
-const HONG_KONG = "Hong Kong";
 const RadioButtonsExample = ({ controlled }) => {
     const [location, setLocation] = useState("");
     const controlledProps = {
         options: [
             {
-                label: SINGAPORE,
-                value: SINGAPORE,
-                checked: location === SINGAPORE,
-                onClick: () => setLocation(SINGAPORE),
+                label: Location.SINGAPORE,
+                value: Location.SINGAPORE,
+                checked: location === Location.SINGAPORE,
+                onClick: () => setLocation(Location.SINGAPORE),
             },
             {
-                label: HONG_KONG,
-                value: HONG_KONG,
-                checked: location === HONG_KONG,
-                onClick: () => setLocation(HONG_KONG),
+                label: Location.HONG_KONG,
+                value: Location.HONG_KONG,
+                checked: location === Location.HONG_KONG,
+                onClick: () => setLocation(Location.HONG_KONG),
             },
         ],
     };
@@ -27,14 +26,14 @@ const uncontrolledProps = {
     name: "location",
     options: [
         {
-            label: SINGAPORE,
-            value: SINGAPORE,
-            onChange: () => alert(`Selected ${SINGAPORE}!`),
+            label: Location.SINGAPORE,
+            value: Location.SINGAPORE,
+            onChange: () => alert(`Selected ${Location.SINGAPORE}!`),
         },
         {
-            label: HONG_KONG,
-            value: HONG_KONG,
-            onChange: () => alert(`Selected ${HONG_KONG}!`),
+            label: Location.HONG_KONG,
+            value: Location.HONG_KONG,
+            onChange: () => alert(`Selected ${Location.HONG_KONG}!`),
         },
     ],
 };

package/stories/organisms/YesNoOptions.stories.d.ts

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

package/stories/organisms/YesNoOptions.stories.js

@@ -0,0 +1,21 @@
+import { YesNoOptions } from "@/.";
+const meta = {
+    title: "Organisms/Yes-No Options",
+    component: YesNoOptions,
+    tags: ["autodocs"],
+    parameters: {
+        layout: "centered",
+    },
+};
+export default meta;
+const baseArgs = {
+    name: "question",
+    yesProps: {},
+    noProps: {},
+};
+export const YesOrNo = {
+    args: baseArgs,
+};
+export const YesOrNoOrUnsure = {
+    args: Object.assign(Object.assign({}, baseArgs), { unsureProps: {} }),
+};