Merge branch 'main' into rewrite-select

ClickHouse · Sep 26, 2023 · 721b8ac · 721b8ac
2 parents c487ce0 + a13fd34
commit 721b8ac
Show file tree

Hide file tree

Showing 12 changed files with 62 additions and 30 deletions.
diff --git a/.storybook/main.ts b/.storybook/main.ts
@@ -2,6 +2,7 @@ import type { StorybookConfig } from "@storybook/react-vite";
 const config: StorybookConfig = {
   stories: [
     "../src/Introduction.mdx", 
+    "../src/components/icons/Icons.mdx",
     "../src/**/*.stories.@(js|jsx|ts|tsx)",
   ],
   addons: [

diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
@@ -45,11 +45,11 @@ const SvgWrapper = styled.div<{
   align-items: center;
 
   ${({ theme, $color = "currentColor", $width, $height, $size }) => `
-    & path[stroke], & svg[stroke]:not([stroke="none"]), & rect[stroke] {
+    & path[stroke], & svg[stroke]:not([stroke="none"]), & rect[stroke], & circle[fill] {
       stroke: ${$color};
     }
 
-    & path[fill], & svg[fill]:not([fill="none"]), & rect[fill] {
+    & path[fill], & svg[fill]:not([fill="none"]), & rect[fill], & circle[fill] {
       fill: ${$color};
     }
 

diff --git a/src/components/Icon/IconCommon.tsx b/src/components/Icon/IconCommon.tsx
@@ -68,6 +68,7 @@ import Payment from "@/components/icons/Payment";
 import Pencil from "@/components/icons/Pencil";
 import PieChart from "@/components/icons/PieChart";
 import Play from "@/components/icons/Play";
+import PlayInCircle from "@/components/icons/PlayInCircle";
 import Plus from "@/components/icons/Plus";
 import Popout from "@/components/icons/Popout";
 import Question from "@/components/icons/Question";
@@ -171,6 +172,7 @@ export const ICONS_MAP = {
   pencil: Pencil,
   "pie-chart": PieChart,
   play: Play,
+  "play-in-circle": PlayInCircle,
   plus: Plus,
   popout: Popout,
   query: Query,

diff --git a/src/components/Icon/types.ts b/src/components/Icon/types.ts
@@ -77,6 +77,7 @@ export type IconName =
   | "pencil"
   | "pie-chart"
   | "play"
+  | "play-in-circle"
   | "plus"
   | "popout"
   | "query"

diff --git a/src/components/Logos/Logos.mdx b/src/components/Logos/Logos.mdx
@@ -7,7 +7,7 @@ import { ClickUIProvider } from "..";
 
 # Logos
 
-<ClickUIProvider theme='light'>
+<ClickUIProvider theme='dark'>
 <IconGallery>
   {Object.keys(LogosLight).map((iconName) => (
     <IconItem name={iconName} key={iconName}>

diff --git a/src/components/Tooltip/Tooltip.stories.tsx b/src/components/Tooltip/Tooltip.stories.tsx
@@ -16,9 +16,7 @@ const TooltipExample = ({ showArrow, side, ...props }: Props) => {
       }}
     >
       <Tooltip {...props}>
-        <Tooltip.Trigger>
-          <div>Tooltip Trigger(Hover)</div>
-        </Tooltip.Trigger>
+        <Tooltip.Trigger>Tooltip Trigger(Hover)</Tooltip.Trigger>
         <Tooltip.Content
           showArrow={showArrow}
           side={side}

diff --git a/src/components/Tooltip/Tooltip.test.tsx b/src/components/Tooltip/Tooltip.test.tsx
@@ -8,9 +8,7 @@ describe("Tooltip", () => {
   const renderTooltip = (props: TooltipProps) =>
     renderCUI(
       <Tooltip {...props}>
-        <Tooltip.Trigger>
-          <div>Hover Here</div>
-        </Tooltip.Trigger>
+        <Tooltip.Trigger>Hover Here</Tooltip.Trigger>
         <Tooltip.Content data-testid="tooltip-content">Tooltip content</Tooltip.Content>
       </Tooltip>
     );

diff --git a/src/components/Tooltip/Tooltip.tsx b/src/components/Tooltip/Tooltip.tsx
@@ -1,16 +1,16 @@
 import * as RadixTooltip from "@radix-ui/react-tooltip";
+import { HTMLAttributes } from "react";
 import styled from "styled-components";
 
 export const Tooltip = ({ children, ...props }: RadixTooltip.TooltipProps) => {
   return <RadixTooltip.Root {...props}>{children}</RadixTooltip.Root>;
 };
 
-const TooltipTrigger = (props: RadixTooltip.TooltipTriggerProps) => {
+const TooltipTrigger = (props: HTMLAttributes<HTMLDivElement>) => {
   return (
-    <RadixTooltip.Trigger
-      asChild
-      {...props}
-    />
+    <RadixTooltip.Trigger asChild>
+      <div {...props} />
+    </RadixTooltip.Trigger>
   );
 };
 TooltipTrigger.displayName = "TooltipTrigger";
@@ -37,10 +37,18 @@ const Arrow = styled.svg`
   `};
 `;
 
-const TooltipContent = ({ showArrow, children, ...props }: TooltipContentProps) => {
+const TooltipContent = ({
+  showArrow,
+  children,
+  sideOffset = 6,
+  ...props
+}: TooltipContentProps) => {
   return (
     <RadixTooltip.Portal>
-      <RadixTooltipContent {...props}>
+      <RadixTooltipContent
+        sideOffset={sideOffset}
+        {...props}
+      >
         {showArrow && (
           <Arrow
             as={RadixTooltip.Arrow}

diff --git a/src/components/icons/Icons.mdx b/src/components/icons/Icons.mdx
@@ -10,7 +10,7 @@ import { ClickUIProvider } from "..";
 
 # Glyphs
 
-<ClickUIProvider theme='light'>
+<ClickUIProvider theme='dark'>
   <IconGallery>
     {Object.keys(ICONS_MAP).map((iconName) => (
       <IconItem name={iconName} key={iconName}>
@@ -42,7 +42,7 @@ import { ClickUIProvider } from "..";
 
 # Logo
 
-<ClickUIProvider theme='light'>
+<ClickUIProvider theme='dark'>
   <IconGallery>
     {(Object.keys(LogosLight)).map((iconName) => (
       <IconItem name={iconName} key={iconName}>

diff --git a/src/components/icons/Play.tsx b/src/components/icons/Play.tsx
@@ -10,19 +10,13 @@ const Play = (props: SVGAttributes<SVGElement>) => (
     {...props}
   >
     <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M8.15482 3.30857L18.9737 10.0927C19.6098 10.4914 20 11.2166 20 12C20 12.7834 19.6098 13.5086 18.9737 13.9073L8.15482 20.6914C7.50841 21.0966 6.70669 21.1032 6.05448 20.7086C5.40227 20.314 4.99976 19.5788 5 18.7827V5.21734C4.99976 4.42118 5.40227 3.68604 6.05448 3.29143C6.70669 2.89682 7.50841 2.90336 8.15482 3.30857V3.30857Z"
       stroke="#161517"
+      strokeWidth="1.5"
       strokeLinecap="round"
       strokeLinejoin="round"
-      strokeWidth={1.5}
-      d="M10.336 3.156a8.99 8.99 0 0 0-5.224 3.05M3.49 9.08a8.874 8.874 0 0 0 .049 5.973M5.209 17.9a8.982 8.982 0 0 0 5.128 2.944M13.638 3.152a8.997 8.997 0 0 1 0 17.696"
-    />
-    <path
-      stroke="#161517"
-      strokeLinecap="round"
-      strokeLinejoin="round"
-      strokeWidth={1.5}
-      d="m10.941 9.057 3.884 2.297a.75.75 0 0 1 0 1.292l-3.884 2.297a.75.75 0 0 1-1.132-.647V9.703a.75.75 0 0 1 1.132-.646v0Z"
-      clipRule="evenodd"
     />
   </svg>
 );

diff --git a/src/components/icons/PlayInCircle.tsx b/src/components/icons/PlayInCircle.tsx
@@ -0,0 +1,30 @@
+import { SVGAttributes } from "react";
+
+const Play = (props: SVGAttributes<SVGElement>) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    width={24}
+    height={24}
+    viewBox="0 0 24 24"
+    fill="none"
+    {...props}
+  >
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="M10.336 3.156a8.99 8.99 0 0 0-5.224 3.05M3.49 9.08a8.874 8.874 0 0 0 .049 5.973M5.209 17.9a8.982 8.982 0 0 0 5.128 2.944M13.638 3.152a8.997 8.997 0 0 1 0 17.696"
+    />
+    <path
+      stroke="#161517"
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      strokeWidth={1.5}
+      d="m10.941 9.057 3.884 2.297a.75.75 0 0 1 0 1.292l-3.884 2.297a.75.75 0 0 1-1.132-.647V9.703a.75.75 0 0 1 1.132-.646v0Z"
+      clipRule="evenodd"
+    />
+  </svg>
+);
+
+export default Play;
diff --git a/src/components/icons/Refresh.tsx b/src/components/icons/Refresh.tsx
@@ -14,14 +14,14 @@ const Refresh = (props: SVGAttributes<SVGElement>) => (
       strokeLinecap="round"
       strokeLinejoin="round"
       strokeWidth={1.5}
-      d="M8.5 6H12a7.5 7.5 0 1 1-6.666 4.06"
+      d="M15.5 6H12C7.858 6 4.5 9.358 4.5 13.5C4.5 17.642 7.858 21 12 21C16.142 21 19.5 17.642 19.5 13.5C19.5 12.26 19.199 11.09 18.666 10.06"
     />
     <path
       stroke="#161517"
       strokeLinecap="round"
       strokeLinejoin="round"
       strokeWidth={1.5}
-      d="m11.5 3-3 3 3 3"
+      d="M12.5 3L15.5 6L12.5 9"
     />
   </svg>
 );