Polishing Sparkle and Adding ContentMessage (#2377)

* Polishing Sparkle and Adding ContentMessage * Bumping Version --------- Co-authored-by: édouard wautier <[email protected]>
dust-tt · Nov 3, 2023 · 9478129 · 9478129
1 parent 812c821
commit 9478129
Show file tree

Hide file tree

Showing 6 changed files with 155 additions and 45 deletions.
diff --git a/sparkle/src/_index.ts b/sparkle/src/_index.ts
@@ -58,6 +58,9 @@ export { IconToggleButton };
 import { Tooltip } from "./components/Tooltip";
 export { Tooltip };
 
+import { ContentMessage } from "./components/ContentMessage";
+export { ContentMessage };
+
 import { Avatar } from "./components/Avatar";
 export { Avatar };
 

diff --git a/sparkle/src/components/ContentMessage.tsx b/sparkle/src/components/ContentMessage.tsx
@@ -0,0 +1,38 @@
+import React from "react";
+
+import { classNames } from "@sparkle/lib/utils";
+
+import { Icon, InformationCircleIcon } from "..";
+
+export interface ContentMessageProps {
+  title: string;
+  message: string;
+  className?: string;
+}
+
+export function ContentMessage({
+  title,
+  message,
+  className = "",
+}: ContentMessageProps) {
+  return (
+    <div
+      className={classNames(
+        "s-flex s-max-w-[500px] s-gap-2 s-rounded-2xl s-border s-border-amber-100 s-bg-amber-50 s-p-4",
+        className
+      )}
+    >
+      <Icon
+        size="md"
+        visual={InformationCircleIcon}
+        className="s-text-amber-600"
+      />
+      <div className="s-flex s-flex-col s-gap-1">
+        <div className="s-text-base s-font-semibold s-text-amber-600">
+          {title}
+        </div>
+        <div className="s-text-sm s-text-element-800">{message}</div>
+      </div>
+    </div>
+  );
+}
diff --git a/sparkle/src/components/Input.tsx b/sparkle/src/components/Input.tsx
@@ -2,38 +2,47 @@ import React from "react";
 
 import { classNames } from "@sparkle/lib/utils";
 
+type InputProps = {
+  placeholder: string;
+  size?: "sm" | "md";
+  value: string | null;
+  onChange?: (value: string) => void;
+  error?: string | null;
+  showErrorLabel?: boolean;
+  name: string;
+  isPassword?: boolean;
+  disabled?: boolean;
+  className?: string;
+};
+
+const sizeInputClasses = {
+  sm: "s-text-base s-rounded-md s-py-1.5 s-pl-4 s-pr-8",
+  md: "s-text-lg s-rounded-lg s-py-2 s-pl-4 s-pr-10",
+};
+
 export function Input({
   placeholder,
   value,
+  size = "sm",
   onChange,
   error,
   showErrorLabel = false,
   name,
   isPassword = false,
   disabled = false,
   className = "",
-}: {
-  placeholder: string;
-  value: string | null;
-  onChange?: (value: string) => void;
-  error?: string | null;
-  showErrorLabel?: boolean;
-  name: string;
-  isPassword?: boolean;
-  disabled?: boolean;
-  className?: string;
-}) {
+}: InputProps) {
   return (
     <div className="s-flex s-flex-col s-gap-1 s-p-px">
       <input
         type={isPassword ? "password" : "text"}
         name={name}
         id={name}
         className={classNames(
-          "s-border-0 s-text-base s-outline-none s-ring-1 focus:s-outline-none focus:s-ring-2",
+          "s-w-full s-border-0 s-outline-none s-ring-1 focus:s-outline-none focus:s-ring-2",
           "s-bg-structure-50 s-text-element-900 s-placeholder-element-600",
           "dark:s-bg-structure-50-dark dark:s-text-element-800-dark dark:s-placeholder-element-600-dark",
-          "s-w-full s-rounded-md s-py-1.5 s-pl-4 s-pr-8",
+          sizeInputClasses[size],
           "s-transition-all s-duration-300 s-ease-out",
           className ?? "",
           !error

diff --git a/sparkle/src/components/Popup.tsx b/sparkle/src/components/Popup.tsx
@@ -38,15 +38,20 @@ export function Popup({
       leaveFrom="s-opacity-100"
       leaveTo="s-opacity-0"
       className={classNames(
-        "s-z-30 s-flex s-w-64 s-flex-col s-gap-3 s-rounded-lg s-border s-border-amber-100 s-bg-amber-50 s-p-4 s-shadow-lg",
+        "relative s-z-30 s-flex s-w-64 s-flex-col s-gap-3 s-rounded-xl s-border s-border-pink-100 s-bg-pink-50 s-p-4 s-shadow-xl",
         className || ""
       )}
     >
       <div className="s-flex">
-        <Chip color="red">{chipLabel}</Chip>
+        <Chip color="pink">{chipLabel}</Chip>
         {onClose && (
-          <div className="s-flex s-grow s-items-start s-justify-end">
-            <IconButton icon={XMark} onClick={onClose} />
+          <div className="-s-mr-1 -s-mt-1 s-flex s-grow s-items-start s-justify-end">
+            <IconButton
+              icon={XMark}
+              onClick={onClose}
+              variant="secondary"
+              size="sm"
+            />
           </div>
         )}
       </div>

diff --git a/sparkle/src/stories/ContentMessage.stories.tsx b/sparkle/src/stories/ContentMessage.stories.tsx
@@ -0,0 +1,20 @@
+import type { Meta } from "@storybook/react";
+import React from "react";
+
+import { ContentMessage } from "../index_with_tw_base";
+
+const meta = {
+  title: "Atoms/ContentMessage",
+  component: ContentMessage,
+} satisfies Meta<typeof ContentMessage>;
+
+export default meta;
+
+export const PopupExample = () => (
+  <div className="s-flex s-flex-col s-gap-4">
+    <ContentMessage
+      title="This is a title"
+      message="This is a message. It can be multiple lines long."
+    />
+  </div>
+);
diff --git a/sparkle/src/stories/Input.stories.tsx b/sparkle/src/stories/Input.stories.tsx
@@ -11,33 +11,68 @@ const meta = {
 export default meta;
 
 export const InputExample = () => (
-  <div className="s-grid s-grid-cols-3 s-gap-4">
-    <Input placeholder="placeholder" name="input" value={null} />
-    <Input
-      placeholder="placeholder"
-      name="input"
-      value={"value"}
-      error={"errored because it's a very long message"}
-      showErrorLabel
-    />
-    <Input
-      placeholder="placeholder"
-      name="input"
-      value={"value"}
-      error={"errored"}
-    />
-    <Input
-      placeholder="placeholder"
-      name="input"
-      value={"value"}
-      error={"errored because it's a very long message"}
-      showErrorLabel
-    />
-    <Input
-      placeholder="placeholder"
-      name="input"
-      value={"disabled"}
-      showErrorLabel
-    />
+  <div className="s-flex s-flex-col s-gap-20">
+    <div className="s-grid s-grid-cols-3 s-gap-4">
+      <Input placeholder="placeholder" name="input" value={null} />
+      <Input
+        placeholder="placeholder"
+        name="input"
+        value={"value"}
+        error={"errored because it's a very long message"}
+        showErrorLabel
+      />
+      <Input
+        placeholder="placeholder"
+        name="input"
+        value={"value"}
+        error={"errored"}
+      />
+      <Input
+        placeholder="placeholder"
+        name="input"
+        value={"value"}
+        error={"errored because it's a very long message"}
+        showErrorLabel
+      />
+      <Input
+        placeholder="placeholder"
+        name="input"
+        value={"disabled"}
+        showErrorLabel
+      />
+    </div>
+    <div className="s-grid s-grid-cols-3 s-gap-4">
+      <Input placeholder="placeholder" name="input" value={null} size="md" />
+      <Input
+        placeholder="placeholder"
+        name="input"
+        size="md"
+        value={"value"}
+        error={"errored because it's a very long message"}
+        showErrorLabel
+      />
+      <Input
+        placeholder="placeholder"
+        name="input"
+        size="md"
+        value={"value"}
+        error={"errored"}
+      />
+      <Input
+        placeholder="placeholder"
+        name="input"
+        size="md"
+        value={"value"}
+        error={"errored because it's a very long message"}
+        showErrorLabel
+      />
+      <Input
+        placeholder="placeholder"
+        name="input"
+        size="md"
+        value={"disabled"}
+        showErrorLabel
+      />
+    </div>
   </div>
 );