moved tooltip to generic

.size-snapshot.json

@@ -81,8 +81,8 @@
     "gzipped": 9217
   },
   "dist/rbx.umd.js": {
-    "bundled": 91185,
-    "minified": 45890,
-    "gzipped": 9425
+    "bundled": 92904,
+    "minified": 46726,
+    "gzipped": 9618
   }
 }

src/__docs__/components/simple-props-table/type-cell.tsx

@@ -1,7 +1,7 @@
 import React from "react";
 
+import { Generic } from "src/base";
 import { Table } from "src/elements";
-import { Tooltip } from "./tooltip";
 
 import { PropDoc } from "./types";
 
@@ -10,17 +10,10 @@ export type TypeCellProps = {
   typeTip: PropDoc["typeTip"];
 };
 
-export const TypeCell = ({ typeName, typeTip }: TypeCellProps) => {
-  const typeNode =
-    typeTip === undefined ? (
-      typeName
-    ) : (
-      <Tooltip text={typeTip}>{typeName}</Tooltip>
-    );
-
-  return (
-    <Table.Cell>
-      <code>{typeNode}</code>
-    </Table.Cell>
-  );
-};
+export const TypeCell = ({ typeName, typeTip }: TypeCellProps) => (
+  <Table.Cell>
+    <Generic as="code" tooltip={typeTip} tooltipMultiline>
+      {typeName}
+    </Generic>
+  </Table.Cell>
+);

src/base/helpers/__tests__/tooltip.test.tsx

@@ -0,0 +1,135 @@
+import {
+  makePropTypes,
+  makeValidatingTransform,
+} from "src/base/helpers/tooltip";
+import { DEFAULTS } from "src/base/helpers/variables";
+import { tuple } from "../../../utils";
+
+import {
+  validateBoolPropType,
+  validateOneOfPropType,
+  validatePropType,
+} from "src/__tests__/testing";
+import {
+  testItShouldNotSetClassNameOnEmpty,
+  testItShouldPreserveCustomClassName,
+  testItShouldPreserveUnknown,
+  testItShouldUseDefaultLocationProp,
+} from "./testing";
+
+const CNAME = "foo";
+const LOC = "prop";
+
+describe("Tooltip helpers", () => {
+  const propTypes = makePropTypes();
+  const vtfunc = makeValidatingTransform();
+
+  describe("propTypes", () => {
+    validateBoolPropType(propTypes, "tooltipActive");
+    validateOneOfPropType(propTypes, "tooltipColor", DEFAULTS.colors);
+    validateBoolPropType(propTypes, "tooltipMultiline");
+    validateOneOfPropType(
+      propTypes,
+      "tooltipPosition",
+      DEFAULTS.tooltipPositions,
+    );
+    validatePropType(propTypes, "tooltipResponsive", [
+      ...DEFAULTS.breakpoints
+        .map(breakpoint =>
+          DEFAULTS.tooltipPositions.map(tooltipPosition => ({
+            descriptor: `${breakpoint}-${tooltipPosition}`,
+            valid: true,
+            value: { [breakpoint]: tooltipPosition },
+          })),
+        )
+        .reduce((acc, cv) => [...acc, ...cv], []),
+      {
+        error: new RegExp(`Warning.+Failed prop.+ \`tooltipResponsive\``),
+        valid: false,
+        value: false,
+      },
+      {
+        error: new RegExp(`Warning.+Failed prop.+ \`tooltipResponsive.foo\``),
+        valid: false,
+        value: { foo: "asdf" },
+      },
+    ]);
+    testItShouldUseDefaultLocationProp(vtfunc, {
+      tooltipPosition: "__UNKNOWN",
+    });
+
+    describe("custom", () => {
+      const customTooltipPositions = tuple("a", "b");
+      const customPropTypes = makePropTypes({
+        tooltipPositions: customTooltipPositions,
+      });
+
+      validateOneOfPropType(
+        customPropTypes,
+        "tooltipPosition",
+        customTooltipPositions,
+      );
+    });
+  });
+
+  describe("transform", () => {
+    testItShouldPreserveUnknown(vtfunc);
+    testItShouldNotSetClassNameOnEmpty(vtfunc);
+    testItShouldPreserveCustomClassName(vtfunc);
+
+    it("should should get tooltip className and data-tooltip", () => {
+      expect(vtfunc({ tooltip: "foobar" }, CNAME, LOC)).toEqual({
+        className: "tooltip",
+        "data-tooltip": "foobar",
+      });
+    });
+
+    [false, true].map(tooltipActive => {
+      it(`should ${tooltipActive ? "" : "not "}be tooltipActive`, () => {
+        expect(vtfunc({ tooltipActive }, CNAME, LOC)).toEqual({
+          className: tooltipActive ? "is-tooltip-active" : "",
+        });
+      });
+    });
+
+    DEFAULTS.colors.map(color => {
+      it(`should be ${color}`, () => {
+        expect(vtfunc({ tooltipColor: color }, CNAME, LOC)).toEqual({
+          className: `is-tooltip-${color}`,
+        });
+      });
+    });
+
+    [false, true].map(tooltipMultiline => {
+      it(`should ${tooltipMultiline ? "" : "not "}be tooltipMultiline`, () => {
+        expect(vtfunc({ tooltipMultiline }, CNAME, LOC)).toEqual({
+          className: tooltipMultiline ? "is-tooltip-multiline" : "",
+        });
+      });
+    });
+
+    DEFAULTS.tooltipPositions.map(tooltipPosition => {
+      it(`should be position ${tooltipPosition}`, () => {
+        expect(vtfunc({ tooltipPosition }, CNAME, LOC)).toEqual({
+          className: `is-tooltip-${tooltipPosition}`,
+        });
+      });
+    });
+
+    DEFAULTS.breakpoints.map(breakpoint => {
+      DEFAULTS.tooltipPositions.map(tooltipPosition => {
+        it(`should be position ${breakpoint}-${tooltipPosition}`, () => {
+          expect(
+            vtfunc(
+              { tooltipResponsive: { [breakpoint]: tooltipPosition } },
+              CNAME,
+              LOC,
+            ),
+          ).toEqual({
+            className: `is-tooltip-${tooltipPosition}-${breakpoint}`,
+          });
+        });
+      });
+    });
+  });
+});

src/base/helpers/index.ts

@@ -21,6 +21,10 @@ import {
   makeValidatingTransform as responsiveMVT,
   ResponsiveHelpersProps,
 } from "./responsive";
+import {
+  TooltipHelpersProps,
+  makeValidatingTransform as tooltipMVT,
+} from "./tooltip";
 import {
   makeValidatingTransform as typographyMVT,
   TypographyHelpersProps,
@@ -39,6 +43,7 @@ export type HelpersProps = Prefer<
   FloatHelpersProps &
     OverflowHelpersProps &
     OverlayHelpersProps &
+    TooltipHelpersProps &
     TypographyHelpersProps &
     VisibilityHelpersProps &
     OtherHelpersProps &
@@ -51,6 +56,7 @@ export const makeRootValidatingTransform = makeRootValidatingTransformFactory<
   floatMVT,
   overflowMVT,
   overlayMVT,
+  tooltipMVT,
   typographyMVT,
   visibilityMVT,
   otherMVT,

src/base/helpers/tooltip.ts

@@ -0,0 +1,67 @@
+import classNames from "classnames";
+import PropTypes from "prop-types";
+
+import {
+  makePropTypesFactory,
+  makeValidatingTransformFactory,
+  TransformFunction,
+} from "./factory";
+import { DEFAULTS, Variables } from "./variables";
+
+export type TooltipHelpersProps = Partial<{
+  tooltip: number | string;
+  tooltipActive: boolean;
+  tooltipColor: Variables["colors"];
+  tooltipMultiline: boolean;
+  tooltipPosition: (typeof DEFAULTS["tooltipPositions"])[number];
+  tooltipResponsive: {
+    [K in Variables["breakpoints"]]?: (typeof DEFAULTS["tooltipPositions"])[number];
+  };
+}>;
+
+// Factories
+export const makePropTypes = makePropTypesFactory(vars => ({
+  tooltip: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  tooltipActive: PropTypes.bool,
+  tooltipColor: PropTypes.oneOf(vars.colors),
+  tooltipMultiline: PropTypes.bool,
+  tooltipPosition: PropTypes.oneOf(vars.tooltipPositions),
+  tooltipResponsive: PropTypes.objectOf(PropTypes.oneOf(vars.tooltipPositions)),
+}));
+
+export const transform: TransformFunction<TooltipHelpersProps> = props => {
+  const {
+    tooltip,
+    tooltipActive,
+    tooltipColor,
+    tooltipMultiline,
+    tooltipPosition,
+    tooltipResponsive = {},
+    ...rest
+  } = props;
+
+  rest.className = classNames(
+    {
+      "is-tooltip-active": tooltipActive,
+      [`is-tooltip-${tooltipColor}`]: tooltipColor,
+      "is-tooltip-multiline": tooltipMultiline,
+      [`is-tooltip-${tooltipPosition}`]: tooltipPosition,
+      tooltip,
+    },
+    ...Object.keys(tooltipResponsive).map(
+      breakpoint => `is-tooltip-${tooltipResponsive[breakpoint]}-${breakpoint}`,
+    ),
+    rest.className,
+  );
+
+  if (tooltip !== undefined) {
+    rest["data-tooltip"] = tooltip;
+  }
+
+  return rest;
+};
+
+export const makeValidatingTransform = makeValidatingTransformFactory(
+  makePropTypes,
+  transform,
+);

src/base/helpers/variables.ts

@@ -12,6 +12,9 @@ export type VariablesDefinitions = {
   breakpoints: (string | number)[];
   breakpointsLimited: (string | number)[];
 
+  // Tooltip
+  tooltipPositions: (string | number)[];
+
   // Typography
   textAlignments: (string | number)[];
   textSizes: (string | number)[];
@@ -66,6 +69,9 @@ export const DEFAULTS = {
    */
   breakpointsLimited: tuple("mobile", "fullhd", "touch"),
 
+  // Tooltips:
+  tooltipPositions: tuple("top", "right", "bottom", "left"),
+
   // Typography
   textAlignments: tuple("centered", "justified", "left", "right"),
   textSizes: tuple(1, 2, 3, 4, 5, 6, 7),
@@ -90,6 +96,9 @@ export interface VariablesDefaults {
   breakpoints: (typeof DEFAULTS.breakpoints)[number];
   breakpointsLimited: (typeof DEFAULTS.breakpointsLimited)[number];
 
+  // Typography
+  tooltipPositions: (typeof DEFAULTS.tooltipPositions)[number];
+
   // Typography
   textAlignments: (typeof DEFAULTS.textAlignments)[number];
   textSizes: (typeof DEFAULTS.textSizes)[number];

src/extensions/__docs__/tooltip.docs.mdx

@@ -0,0 +1,27 @@
+---
+name: Tooltip
+menu: Extensions
+route: /extensions/tooltip
+---
+
+import { Playground } from "docz";
+
+import {
+  ForwardRefAsExoticComponentDoc,
+  mapEnumerable,
+  OptionBlock,
+} from "src/__docs__/components";
+import { DEFAULTS } from "src/base/helpers/variables";
+import { Block, Button, Title } from "src/elements";
+
+# Tooltip
+
+Display a **tooltip** attached to any kind of element with different positioning.
+
+It can display number or strings.
+
+<Playground>
+  <Button badgeContent="pending" badgeColor="warning" tooltip="Tooltip Text">
+    Notifications
+  </Button>
+</Playground>