feat(Tooltip): Rich tooltip

packages/core/src/components/Text/Text.tsx

@@ -10,7 +10,7 @@ import { withStaticProps } from "../../types";
 import styles from "./Text.module.scss";
 
 export interface TextProps extends TypographyProps {
-  type: TextType;
+  type?: TextType;
   weight?: TextWeight;
   children: ReactNode;
 }

packages/core/src/components/Tipseen/__stories__/tipseen.mdx

@@ -81,7 +81,7 @@ Wrap your custom media with `TipseenMedia` component. This use case is good for
 Use Floating Tipseen in case where the guidance is not relevant to a specific UI element, but general.
 In this case, the Tipseen position will be the right corner of the screen and without an arrow tip.
 
-<Canvas of={TipseenStories.FloatingTipseen} height={"500px"} />
+<Canvas of={TipseenStories.FloatingTipseen} story={{ height: "500px" }} />
 
 ## Do’s and Don’ts
 
@@ -96,7 +96,9 @@ In this case, the Tipseen position will be the right corner of the screen and wi
               modifiers={modifiers}
               position={Tipseen.positions.RIGHT}
               color={Tipseen.colors.INVERTED}
-              content={<TipseenWizard title="This is a title" steps={wizardContent} activeStepIndex={4} onFinish={() => {}} />}
+              content={
+                <TipseenWizard title="This is a title" steps={wizardContent} activeStepIndex={4} onFinish={() => {}} />
+              }
             >
               <div className="monday-storybook-tipseen_inline-container right" />{" "}
             </Tipseen>
@@ -118,8 +120,7 @@ In this case, the Tipseen position will be the right corner of the screen and wi
             </Tipseen>
           </div>
         ),
-        description:
-          "Don’t finish the Tipseen wizard process with a disabled CTA."
+        description: "Don’t finish the Tipseen wizard process with a disabled CTA."
       }
     },
     {
@@ -157,7 +158,11 @@ In this case, the Tipseen position will be the right corner of the screen and wi
               modifiers={modifiers}
               position={Tipseen.positions.TOP}
               color={Tipseen.colors.INVERTED}
-              content={<TipseenContent>You still have 14 days on your free trial, enjoy it! At the end you can choose your favorite plan.</TipseenContent>}
+              content={
+                <TipseenContent>
+                  You still have 14 days on your free trial, enjoy it! At the end you can choose your favorite plan.
+                </TipseenContent>
+              }
             >
               <div className="monday-storybook-tipseen_inline-container" />
             </Tipseen>
@@ -172,7 +177,7 @@ In this case, the Tipseen position will be the right corner of the screen and wi
         )
       }
     },
-        {
+    {
       positive: {
         component: (
           <div className="monday-storybook-tipseen_box">
@@ -189,8 +194,7 @@ In this case, the Tipseen position will be the right corner of the screen and wi
             </Tipseen>
           </div>
         ),
-        description:
-          "Add a pointer to indicate the specific component that the tipseen comes from."
+        description: "Add a pointer to indicate the specific component that the tipseen comes from."
       },
       negative: {
         component: (
@@ -209,8 +213,7 @@ In this case, the Tipseen position will be the right corner of the screen and wi
             </Tipseen>
           </div>
         ),
-        description:
-          "Don’t use a tipseen without a pointer, unless it’s a general tipseen for an entire screen."
+        description: "Don’t use a tipseen without a pointer, unless it’s a general tipseen for an entire screen."
       }
     }
   ]}

packages/core/src/components/Tipseen/__stories__/tipseen.stories.scss

@@ -24,7 +24,6 @@ $component-rules-grid-cell-array-calc: calc(50% - #{$tipseen-rules-cell-min-widt
   }
 
   &_image {
-    width: 320px;
     height: 175px;
   }
 
@@ -69,7 +68,7 @@ $component-rules-grid-cell-array-calc: calc(50% - #{$tipseen-rules-cell-min-widt
     height: 100%;
     display: flex;
     flex-direction: column;
-    justify-content: center
+    justify-content: center;
   }
 
   &_small-box {

packages/core/src/components/Tooltip/Tooltip.module.scss

@@ -12,9 +12,36 @@ $tooltip-z-index: 9999999999999999;
   max-width: var(--tooltip-max-width, 50vw);
   word-break: break-word;
 
+  &.tooltipWithContent {
+    padding: unset;
+  }
+
   &.withMaxWidth {
     --tooltip-max-width: 240px;
   }
+
+  .image {
+    display: block;
+    position: relative;
+    border-top-right-radius: 2px;
+    border-top-left-radius: 2px;
+    padding: 2px 2px 0 2px;
+    object-fit: cover;
+    width: 100%;
+    height: 100%;
+    min-width: var(--tooltip-max-width);
+    z-index: 1;
+  }
+
+  .title {
+    @include vibe-text(text2, bold);
+  }
+
+  .content {
+    word-break: break-word;
+    display: inline-block;
+    padding: var(--tooltip-padding, #{var(--spacing-small) var(--spacing-medium)});
+  }
 }
 
 .tooltip.paddingSizeMd {

packages/core/src/components/Tooltip/Tooltip.tsx

@@ -13,6 +13,9 @@ import { MoveBy } from "../../types/MoveBy";
 import { getStyle } from "../../helpers/typesciptCssModulesHelper";
 import styles from "./Tooltip.module.scss";
 import { ComponentDefaultTestId, getTestId } from "../../tests/test-ids-utils";
+import { SubIcon } from "../../types";
+import Icon from "../Icon/Icon";
+import Flex from "../Flex/Flex";
 
 export type TooltipProps = TooltipBaseProps & (TooltipWithChildrenProps | TooltipWithoutChildrenProps);
 
@@ -100,7 +103,7 @@ interface TooltipBaseProps extends VibeComponentProps {
    */
   showOnDialogEnter?: boolean;
   /**
-   * A Classname to be added to <spam> element which wraps the children
+   * A Classname to be added to <span> element which wraps the children
    */
   referenceWrapperClassName?: string;
   /**
@@ -115,11 +118,23 @@ interface TooltipBaseProps extends VibeComponentProps {
    * Overwrites z-index of the tooltip
    */
   zIndex?: number;
-  // TODO: make defualt next major
+  // TODO: make default next major
   /**
    * Limit tooltip to 240px
    */
   withMaxWidth?: boolean;
+  /**
+   * The title of the tooltip
+   */
+  title?: string;
+  /**
+   * The image of the tooltip
+   */
+  image?: string;
+  /**
+   * The icon of the tooltip next to the title
+   */
+  icon?: SubIcon;
 }
 // When last tooltip was shown in the last 1.5 second - the next tooltip will be shown immediately
 const IMMEDIATE_SHOW_THRESHOLD_MS = 1500;
@@ -175,7 +190,7 @@ export default class Tooltip extends PureComponent<TooltipProps> {
   }
 
   renderTooltipContent() {
-    const { theme, content, paddingSize, className, style, withMaxWidth } = this.props;
+    const { theme, content, paddingSize, className, style, withMaxWidth, title, image, icon } = this.props;
     if (!content) {
       // don't render empty tooltip
       return null;
@@ -192,6 +207,34 @@ export default class Tooltip extends PureComponent<TooltipProps> {
     if (!contentValue) {
       return null;
     }
+
+    if (title || image) {
+      return (
+        <div
+          style={style}
+          className={cx(
+            styles.tooltip,
+            styles.tooltipWithContent,
+            getStyle(styles, camelCase(theme)),
+            { [styles.withMaxWidth]: withMaxWidth },
+            className
+          )}
+        >
+          {image && <img className={styles.image} src={image} alt="" />}
+          <div className={cx(styles.content, getStyle(styles, camelCase("padding-size-" + paddingSize)))}>
+            {title && (
+              <Flex gap={Flex.gaps.XS}>
+                {icon && <Icon iconSize="20" icon={icon} clickable={false} />}
+                <div className={styles.title}>{title}</div>
+              </Flex>
+            )}
+            {contentValue}
+          </div>
+        </div>
+      );
+    }
+
+    // TODO: remove in next major, use (title || image) variant instead
     return (
       <div
         style={style}