moved badge to Generic props

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

@@ -0,0 +1,88 @@
+import { makePropTypes, makeValidatingTransform } from "src/base/helpers/badge";
+import { DEFAULTS } from "src/base/helpers/variables";
+import { tuple } from "../../../utils";
+
+import {
+  validateBoolPropType,
+  validateOneOfPropType,
+  validateStringOrNumberPropType,
+} from "src/__tests__/testing";
+import {
+  testItShouldNotSetClassNameOnEmpty,
+  testItShouldPreserveCustomClassName,
+  testItShouldPreserveUnknown,
+  testItShouldUseDefaultLocationProp,
+} from "./testing";
+
+const CNAME = "foo";
+const LOC = "prop";
+
+describe("Badge helpers", () => {
+  const propTypes = makePropTypes();
+  const vtfunc = makeValidatingTransform();
+
+  describe("propTypes", () => {
+    validateStringOrNumberPropType(propTypes, "badge");
+    validateOneOfPropType(propTypes, "badgeColor", DEFAULTS.colors);
+    validateBoolPropType(propTypes, "badgeOutlined");
+    validateBoolPropType(propTypes, "badgeRounded");
+    validateOneOfPropType(propTypes, "badgeSize", DEFAULTS.badgeSizes);
+    testItShouldUseDefaultLocationProp(vtfunc, {
+      badgeSize: "__UNKNOWN",
+    });
+
+    describe("custom", () => {
+      const customBadgeSizes = tuple("a", "b");
+      const customPropTypes = makePropTypes({
+        badgeSizes: customBadgeSizes,
+      });
+
+      validateOneOfPropType(customPropTypes, "badgeSize", customBadgeSizes);
+    });
+  });
+
+  describe("transform", () => {
+    testItShouldPreserveUnknown(vtfunc);
+    testItShouldNotSetClassNameOnEmpty(vtfunc);
+    testItShouldPreserveCustomClassName(vtfunc);
+
+    it("should should get badge className and data-badge", () => {
+      expect(vtfunc({ badge: "foobar" }, CNAME, LOC)).toEqual({
+        className: "badge",
+        "data-badge": "foobar",
+      });
+    });
+
+    DEFAULTS.colors.map(color => {
+      it(`should be ${color}`, () => {
+        expect(vtfunc({ badgeColor: color }, CNAME, LOC)).toEqual({
+          className: `has-badge-${color}`,
+        });
+      });
+    });
+
+    [false, true].map(badgeOutlined => {
+      it(`should ${badgeOutlined ? "" : "not "}be badgeOutlined`, () => {
+        expect(vtfunc({ badgeOutlined }, CNAME, LOC)).toEqual({
+          className: badgeOutlined ? "has-badge-outlined" : "",
+        });
+      });
+    });
+
+    [false, true].map(badgeRounded => {
+      it(`should ${badgeRounded ? "" : "not "}be badgeRounded`, () => {
+        expect(vtfunc({ badgeRounded }, CNAME, LOC)).toEqual({
+          className: badgeRounded ? "has-badge-rounded" : "",
+        });
+      });
+    });
+
+    DEFAULTS.badgeSizes.map(badgeSize => {
+      it(`should be size ${badgeSize}`, () => {
+        expect(vtfunc({ badgeSize }, CNAME, LOC)).toEqual({
+          className: `has-badge-${badgeSize}`,
+        });
+      });
+    });
+  });
+});

src/base/helpers/__tests__/index.test.ts

@@ -17,6 +17,13 @@ describe("Modifiers", () => {
     testItShouldNotSetClassNameOnEmpty(rvtfunc);
     testItShouldPreserveCustomClassName(rvtfunc);
 
+    it("should apply badge transforms", () => {
+      expect(rvtfunc({ badge: "asdf" }, CNAME, LOC)).toEqual({
+        className: "badge",
+        "data-badge": "asdf",
+      });
+    });
+
     it("should apply float transforms", () => {
       expect(rvtfunc({ clearfix: true }, CNAME, LOC)).toEqual({
         className: "is-clearfix",
@@ -35,6 +42,13 @@ describe("Modifiers", () => {
       });
     });
 
+    it("should apply tooltip transforms", () => {
+      expect(rvtfunc({ tooltip: "asdf" }, CNAME, LOC)).toEqual({
+        className: "tooltip",
+        "data-tooltip": "asdf",
+      });
+    });
+
     it("should apply typography transforms", () => {
       expect(rvtfunc({ textSize: 1 }, CNAME, LOC)).toEqual({
         className: "is-size-1",

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

@@ -9,6 +9,7 @@ import {
   validateBoolPropType,
   validateOneOfPropType,
   validatePropType,
+  validateStringOrNumberPropType,
 } from "src/__tests__/testing";
 import {
   testItShouldNotSetClassNameOnEmpty,
@@ -25,6 +26,7 @@ describe("Tooltip helpers", () => {
   const vtfunc = makeValidatingTransform();
 
   describe("propTypes", () => {
+    validateStringOrNumberPropType(propTypes, "tooltip");
     validateBoolPropType(propTypes, "tooltipActive");
     validateOneOfPropType(propTypes, "tooltipColor", DEFAULTS.colors);
     validateBoolPropType(propTypes, "tooltipMultiline");

src/base/helpers/badge.ts

@@ -0,0 +1,59 @@
+import classNames from "classnames";
+import PropTypes from "prop-types";
+
+import {
+  makePropTypesFactory,
+  makeValidatingTransformFactory,
+  TransformFunction,
+} from "./factory";
+import { DEFAULTS, Variables } from "./variables";
+
+export type BadgeHelpersProps = Partial<{
+  badge: number | string;
+  badgeColor: Variables["colors"];
+  badgeOutlined: boolean;
+  badgeRounded: boolean;
+  badgeSize: (typeof DEFAULTS["badgeSizes"])[number];
+}>;
+
+// Factories
+export const makePropTypes = makePropTypesFactory(vars => ({
+  badge: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),
+  badgeColor: PropTypes.oneOf(vars.colors),
+  badgeOutlined: PropTypes.bool,
+  badgeRounded: PropTypes.bool,
+  badgeSize: PropTypes.oneOf(vars.badgeSizes),
+}));
+
+export const transform: TransformFunction<BadgeHelpersProps> = props => {
+  const {
+    badge,
+    badgeColor,
+    badgeOutlined,
+    badgeRounded,
+    badgeSize,
+    ...rest
+  } = props;
+
+  rest.className = classNames(
+    {
+      badge,
+      [`has-badge-${badgeColor}`]: badgeColor,
+      "has-badge-outlined": badgeOutlined,
+      "has-badge-rounded": badgeRounded,
+      [`has-badge-${badgeSize}`]: badgeSize,
+    },
+    rest.className,
+  );
+
+  if (badge !== undefined) {
+    rest["data-badge"] = badge;
+  }
+
+  return rest;
+};
+
+export const makeValidatingTransform = makeValidatingTransformFactory(
+  makePropTypes,
+  transform,
+);

src/base/helpers/index.ts

@@ -1,6 +1,10 @@
 import { Prefer } from "../../types";
 import { makeRootValidatingTransformFactory } from "./factory";
 
+import {
+  BadgeHelpersProps,
+  makeValidatingTransform as badgeMVT,
+} from "./badge";
 import {
   FloatHelpersProps,
   makeValidatingTransform as floatMVT,
@@ -40,7 +44,8 @@ export interface HelpersPropsOverrides {}
 
 export type HelpersProps = Prefer<
   HelpersPropsOverrides,
-  FloatHelpersProps &
+  BadgeHelpersProps &
+    FloatHelpersProps &
     OverflowHelpersProps &
     OverlayHelpersProps &
     TooltipHelpersProps &
@@ -53,6 +58,7 @@ export type HelpersProps = Prefer<
 export const makeRootValidatingTransform = makeRootValidatingTransformFactory<
   HelpersProps
 >(
+  badgeMVT,
   floatMVT,
   overflowMVT,
   overlayMVT,

src/base/helpers/variables.ts

@@ -5,6 +5,9 @@ export type VariablesDefinitions = {
   colors: (string | number)[];
   shades: (string | number)[];
 
+  // Badge
+  badgeSizes: (string | number)[];
+
   // Float
   floatPulledAlignments: (string | number)[];
 
@@ -50,6 +53,9 @@ export const DEFAULTS = {
     "white-bis",
   ),
 
+  // Badge
+  badgeSizes: tuple("small", "medium", "large"),
+
   // Float
   floatPulledAlignments: tuple("left", "right"),
 
@@ -89,6 +95,9 @@ export interface VariablesDefaults {
   colors: (typeof DEFAULTS.colors)[number];
   shades: (typeof DEFAULTS.shades)[number];
 
+  // Badge
+  badgeSizes: (typeof DEFAULTS.badgeSizes)[number];
+
   // Float
   floatPulledAlignments: (typeof DEFAULTS.floatPulledAlignments)[number];
 

src/extensions/badge/__docs__/badge.docs.mdx → src/extensions/__docs__/badge.docs.mdx

@@ -13,8 +13,8 @@ import {
 } from "src/__docs__/components";
 import { DEFAULTS } from "src/base/helpers/variables";
 import { Block, Button, Title } from "src/elements";
-import { Badge, BADGE_DEFAULTS } from "../badge";
 
+```
 # Badge
 
 Display a **badge** element in front of another component.
@@ -140,7 +140,7 @@ Use the `badgeRounded` prop of `<Badge>` to round a badge.
   docUrl="https://wikiki.github.io/elements/badge/"
   docProvider="Bulma-Extensions"
   props={{
-    badgeContent: {
+    badge: {
       description: "the contents of the badge",
       typeName: "number | string",
     },
@@ -160,3 +160,4 @@ Use the `badgeRounded` prop of `<Badge>` to round a badge.
     },
   }}
 />
+```