@soul-refiner/design-system 0.1.20 → 0.1.21

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@soul-refiner/design-system",
-  "version": "0.1.20",
+  "version": "0.1.21",
   "main": "src/index.ts",
   "license": "MIT",
   "publishConfig": {
@@ -54,6 +54,7 @@
     "react-dnd-html5-backend": "^16.0.1",
     "react-dom": "^18.2.0",
     "react-is": "^18.2.0",
+    "react-tooltip": "^5.18.0",
     "scheduler": "^0.23.0",
     "slate": "^0.94.1",
     "slate-history": "^0.93.0",

package/src/components/feedback/index.ts

@@ -10,3 +10,5 @@ export { Progress } from './progress';
 export type { ProgressProps } from './progress';
 export { Toast } from './toast';
 export type { ToastProps } from './toast';
+export { Tooltip } from './tooltip';
+export type { TooltipProps } from './tooltip';

package/src/components/feedback/tooltip/index.ts

@@ -0,0 +1,2 @@
+export { Tooltip } from './tooltip';
+export type { TooltipProps } from './tooltip';

package/src/components/feedback/tooltip/tooltip.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Tooltip as ReactTooltip, PlacesType } from 'react-tooltip';
+
+export interface TooltipProps extends React.PropsWithChildren {
+  content: string;
+  place: PlacesType;
+}
+
+export const Tooltip = ({ children, content, place = 'top' }: TooltipProps) => {
+  const id = React.useId();
+  return (
+    <>
+      <ReactTooltip
+        id={id}
+        place={place}
+        style={{
+          fontFamily: 'Inter',
+          fontSize: '12px',
+          fontWeight: 400,
+          lineHeight: '150%',
+          textAlign: 'center',
+          padding: '8px',
+          maxWidth: '280px',
+          backgroundColor: 'var(--color-grey-3)',
+          boxShadow: 'var(--elevation-2)',
+          borderRadius: '4px',
+        }}
+      />
+      {React.Children.map(children, (child) => {
+        return (
+          React.isValidElement(child) &&
+          React.cloneElement(child, {
+            'data-tooltip-id': id,
+            'data-tooltip-content': content,
+          } as any)
+        );
+      })}
+    </>
+  );
+};

package/src/components/input/date/date.tsx

@@ -1,8 +1,8 @@
 import React from 'react';
 import styled from 'styled-components';
-import { Button, P } from 'components';
-import { ChevronLeft, ChevronRight } from 'icons';
 import { MONTHS, WEEKDAYS } from 'common';
+import { Button, P } from 'components';
+import { ChevronLeft, ChevronRight, ArrowRight } from 'icons';
 import { buildCalendar, getMonthDays, zeroPad } from 'utils';
 
 export interface DatePickerProps {
@@ -238,9 +238,9 @@ export const DatePicker = ({
         <span>
           {startDate.toLocaleDateString('en-US').replaceAll('/', '-')}
         </span>
-        {!!endDate &&
-          startDate.toDateString() !== endDate?.toDateString() &&
-          ' 🡒 '}
+        {!!endDate && startDate.toDateString() !== endDate?.toDateString() && (
+          <ArrowRight sx="padding: 0px 8px; margin-bottom: -2px;" />
+        )}
         {startDate.toDateString() !== endDate?.toDateString() && (
           <span>
             {endDate?.toLocaleDateString('en-US').replaceAll('/', '-')}
@@ -388,9 +388,12 @@ const Trigger = styled.button`
   outline: none;
   line-height: 100%;
   font-family: Inter;
+  font-size: 14px;
+  line-height: 20px;
   cursor: pointer;
 
   span {
+    line-height: 20px;
     color: var(--color-blue-5);
   }