add: tooltip + stories + adapt input

.storybook/preview-head.html

@@ -0,0 +1,9 @@
+<!-- allows stories to expand the full viewport when needed-->
+<style>
+  html, body {
+    height: 100%;
+  }
+  #root {
+    height: 100%;
+  }
+</style>

package.json

@@ -16,6 +16,7 @@
     "@radix-ui/react-dialog": "^0.1.5",
     "@radix-ui/react-dropdown-menu": "^0.1.4",
     "@radix-ui/react-radio-group": "^0.1.4",
+    "@radix-ui/react-tooltip": "^0.1.6",
     "@rebass/forms": "^4.0.6",
     "@svgr/webpack": "^5.4.0",
     "axios": "^0.24.0",

src/components/atoms/tooltip/index.tsx

@@ -0,0 +1,51 @@
+import * as RadixTooltip from "@radix-ui/react-tooltip"
+import clsx from "clsx"
+
+type TooltipProps = RadixTooltip.TooltipContentProps &
+  Pick<
+    RadixTooltip.TooltipProps,
+    "open" | "defaultOpen" | "onOpenChange" | "delayDuration"
+  > & {
+    content: string
+  }
+
+const Tooltip = ({
+  children,
+  content,
+  open,
+  defaultOpen,
+  onOpenChange,
+  delayDuration,
+  className,
+  ...props
+}: TooltipProps) => {
+  return (
+    <RadixTooltip.Provider delayDuration={100}>
+      <RadixTooltip.Root
+        open={open}
+        defaultOpen={defaultOpen}
+        onOpenChange={onOpenChange}
+        delayDuration={delayDuration}
+      >
+        <RadixTooltip.Trigger>{children}</RadixTooltip.Trigger>
+        <RadixTooltip.Content
+          side="bottom"
+          sideOffset={8}
+          align="center"
+          className={clsx(
+            "inter-small-semibold text-grey-50 text-center",
+            "bg-grey-5 py-[6px] px-[12px] shadow-dropdown rounded",
+            "border border-solid border-grey-20",
+            "max-w-[220px]",
+            className
+          )}
+          {...props}
+        >
+          {content}
+        </RadixTooltip.Content>
+      </RadixTooltip.Root>
+    </RadixTooltip.Provider>
+  )
+}
+
+export default Tooltip

src/components/atoms/tooltip/tooltip.stories.tsx

@@ -0,0 +1,66 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react"
+import React from "react"
+import Tooltip from "."
+import clsx from "clsx"
+
+export default {
+  title: "Molecules/Tooltip",
+  component: Tooltip,
+  argTypes: {
+    triggerPosition: {
+      options: [
+        "top left",
+        "top right",
+        "top center",
+        "center center",
+        "center right",
+        "center left",
+        "bottom left",
+        "bottom right",
+        "bottom center",
+      ],
+      control: {
+        type: "select",
+      },
+      defaultValue: "top left",
+    },
+  },
+} as ComponentMeta<typeof Tooltip>
+
+const Template: ComponentStory<any> = ({ triggerPosition, ...props }) => {
+  return (
+    <div
+      className={clsx(
+        {
+          ["justify-start content-start"]: triggerPosition === "top left",
+          ["justify-center content-start"]: triggerPosition === "top center",
+          ["justify-end content-start"]: triggerPosition === "top right",
+          ["justify-start content-center"]: triggerPosition === "center left",
+          ["place-content-center"]: triggerPosition === "center center",
+          ["justify-end content-center"]: triggerPosition === "center right",
+          ["justify-start content-end"]: triggerPosition === "bottom left",
+          ["justify-center content-end"]: triggerPosition === "bottom center",
+          ["justify-end content-end"]: triggerPosition === "bottom right",
+        },
+        "min-h-full grid"
+      )}
+    >
+      <Tooltip {...props}>
+        <button className="btn btn-secondary btn-medium">hover!</button>
+      </Tooltip>
+    </div>
+  )
+}
+
+export const Default = Template.bind({})
+Default.args = {
+  content: "Tags are one word descriptors for the product used for searches",
+  sideOffset: 10,
+}
+
+export const Controlled = Template.bind({})
+Controlled.args = {
+  open: true,
+  content: "Tags are one word descriptors for the product used for searches",
+  sideOffset: 10,
+}

src/components/fundamentals/icons/alert-icon/alert-icon.stories.tsx

@@ -0,0 +1,26 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react"
+import React from "react"
+import AlertIcon from "."
+
+export default {
+  title: "Fundamentals/Icons/AlertIcon",
+  component: AlertIcon,
+  argTypes: {
+    size: {
+      control: {
+        type: "select",
+        options: ["24", "20", "16"],
+      },
+    },
+  },
+} as ComponentMeta<typeof AlertIcon>
+
+const Template: ComponentStory<typeof AlertIcon> = (args) => (
+  <AlertIcon {...args} />
+)
+
+export const Icon = Template.bind({})
+Icon.args = {
+  size: "24",
+  color: "currentColor",
+}

src/components/fundamentals/icons/alert-icon/index.tsx

@@ -0,0 +1,43 @@
+import React from "react"
+import IconProps from "../types/icon-type"
+
+const AlertIcon: React.FC<IconProps> = ({
+  size = "20",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 20 20"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M10 17.5C14.1421 17.5 17.5 14.1421 17.5 10C17.5 5.85786 14.1421 2.5 10 2.5C5.85786 2.5 2.5 5.85786 2.5 10C2.5 14.1421 5.85786 17.5 10 17.5Z"
+        stroke={color}
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M10 6.66669V10"
+        stroke={color}
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M10 13.3333H10.0088"
+        stroke={color}
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default AlertIcon

src/components/fundamentals/icons/info-icon/index.tsx

@@ -0,0 +1,43 @@
+import React from "react"
+import IconProps from "../types/icon-type"
+
+const InfoIcon: React.FC<IconProps> = ({
+  size = "16",
+  color = "currentColor",
+  ...attributes
+}) => {
+  return (
+    <svg
+      width={size}
+      height={size}
+      viewBox="0 0 16 16"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+      {...attributes}
+    >
+      <path
+        d="M8 14C11.3137 14 14 11.3137 14 8C14 4.68629 11.3137 2 8 2C4.68629 2 2 4.68629 2 8C2 11.3137 4.68629 14 8 14Z"
+        stroke={color}
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M8 10.6667V8"
+        stroke={color}
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+      <path
+        d="M8 5.33331H8.0075"
+        stroke={color}
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      />
+    </svg>
+  )
+}
+
+export default InfoIcon

src/components/fundamentals/icons/info-icon/info-icon.stories.tsx

@@ -0,0 +1,26 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react"
+import React from "react"
+import InfoIcon from "."
+
+export default {
+  title: "Fundamentals/Icons/InfoIcon",
+  component: InfoIcon,
+  argTypes: {
+    size: {
+      control: {
+        type: "select",
+        options: ["24", "20", "16"],
+      },
+    },
+  },
+} as ComponentMeta<typeof InfoIcon>
+
+const Template: ComponentStory<typeof InfoIcon> = (args) => (
+  <InfoIcon {...args} />
+)
+
+export const Icon = Template.bind({})
+Icon.args = {
+  size: "24",
+  color: "currentColor",
+}

src/components/fundamentals/input-header.tsx

@@ -1,28 +1,26 @@
 import React from "react"
-import InfoTooltip from "../info-tooltip"
+import InfoTooltip from "../molecules/info-tooltip"
 
-type InputHeaderProps = {
+export type InputHeaderProps = {
   label: string
   required?: boolean
-  withTooltip?: boolean
-  tooltipText?: string
-  tooltipProps?: any
+  tooltipContent?: string
+  tooltip?: React.ReactNode
 }
 
 const InputHeader: React.FC<InputHeaderProps> = ({
   label,
   required = false,
-  withTooltip = false,
-  tooltipText,
-  tooltipProps,
+  tooltipContent,
+  tooltip,
 }) => {
   return (
     <div className="w-full flex inter-small-semibold text-grey-50 items-center">
-      {label}
+      <label>{label}</label>
       {required && <div className="text-rose-50 "> *</div>}
-      {withTooltip ? (
-        <div className="ml-2">
-          <InfoTooltip tooltipText={tooltipText} {...tooltipProps} />
+      {tooltip || tooltipContent ? (
+        <div className="flex ml-1.5">
+          {tooltip || <InfoTooltip content={tooltipContent} />}
         </div>
       ) : null}
     </div>

src/components/molecules/info-tooltip/index.tsx

@@ -0,0 +1,13 @@
+import React from "react"
+import Tooltip from "../../atoms/tooltip"
+import InfoIcon from "../../fundamentals/icons/info-icon"
+
+const InfoTooltip = ({ content, ...props }) => {
+  return (
+    <Tooltip content={content} {...props}>
+      <InfoIcon className="flex text-grey-40" />
+    </Tooltip>
+  )
+}
+
+export default InfoTooltip

src/components/molecules/info-tooltip/info-tooltip.stories.tsx

@@ -0,0 +1,18 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react"
+import React from "react"
+import Input from "."
+import InfoTooltip from "."
+
+export default {
+  title: "Molecules/InfoTooltip",
+  component: InfoTooltip,
+} as ComponentMeta<typeof InfoTooltip>
+
+const Template: ComponentStory<typeof InfoTooltip> = (args) => (
+  <Input {...args} />
+)
+
+export const Default = Template.bind({})
+Default.args = {
+  content: "Tags are one word descriptors for the product used for searches",
+}