added badge / tooltip docs

src/__docs__/components/feature/doc-feature.tsx

@@ -1,18 +1,29 @@
 import React from "react";
 
 import { Feature } from "./feature";
+import { Variables } from "../../../base/helpers/variables";
 
 export type DocFeatureProps = {
   docPath?: string;
 };
 
 export const DocFeature: React.FC<DocFeatureProps> = ({ docPath }) => {
-  const url =
-    docPath !== undefined
-      ? `https://bulma.io/documentation${docPath}`
-      : undefined;
-  const secondaryName = docPath !== undefined ? "Bulma" : "n/a";
-  const secondaryColor = docPath !== undefined ? "primary" : "dark";
+  const isBulmaPath = docPath !== undefined ? !/^http.+/.test(docPath) : false;
+  const isRemoteUrl = docPath !== undefined && !isBulmaPath;
+
+  let url: string | undefined;
+  let secondaryName: string = "n/a";
+  let secondaryColor: Variables["colors"] = "dark";
+
+  if (isBulmaPath) {
+    url = `https://bulma.io/documentation${docPath}`;
+    secondaryName = "Bulma";
+    secondaryColor = "primary";
+  } else if (isRemoteUrl) {
+    url = docPath;
+    secondaryName = "Third Party";
+    secondaryColor = "info";
+  }
 
   return (
     <Feature

src/base/__docs__/badge.docs.mdx

@@ -11,72 +11,62 @@ import {
   mapEnumerable,
   OptionBlock,
 } from "src/__docs__/components";
+import { Generic } from "src/base";
 import { DEFAULTS } from "src/base/helpers/variables";
 import { Block, Button, Title } from "src/elements";
 
-```
 # Badge
 
 Display a **badge** element in front of another component.
 
-By default, it renders as a `span`.
-It can display number or strings.
+_This is available on every component as it's handled by the `Generic` component._
 
-<Playground>
-  <Badge badgeContent="pending" badgeColor="warning">
-    Notifications
-  </Badge>
-</Playground>
-
-But you can use the `as` prop to render any component or JSX element, like a `<Button>`.
+It can display a `number` or a `string` on any component using `Generic`.
 
 <Playground>
-  <Badge as={Button} badgeContent={8} badgeColor="danger">
-    Button
-  </Badge>
+  <Generic as="span" badge="pending" badgeColor="warning">
+    Notifications
+  </Generic>
 </Playground>
 
-Because the props are prefixed with `badge`, you can use `<Badge>` as a wrapping component using the `as` prop – without interferring with the props.
+Or, you can use any other `rbx` component (e.g. `<Button>`) and use the same API.
 
 <Playground>
-  <Badge
-    as={Button}
-    badgeContent={8}
-    badgeColor="danger"
-    badgeOutlined
-    color="danger"
-    outlined
-  >
+  <Button badge={8} badgeColor="danger" badgeOutlined color="danger" outlined>
     Button
-  </Badge>
+  </Button>
 </Playground>
 
 ### Colors
 
-Use the `badgeColor` prop on `<Badge>` to specify the color.
+Use the `badgeColor` prop to specify the color.
 
 <Playground>
   {() =>
-    DEFAULTS.colors.map((color, i) => (
-      <OptionBlock props={{ color }} index={i} key={i}>
-        <Badge badgeColor={color}>Notifications</Badge>
+    DEFAULTS.colors.map((badgeColor, i) => (
+      <OptionBlock props={{ badgeColor }} index={i} key={i}>
+        <Button badge={badgeColor} badgeColor={badgeColor}>
+          {badgeColor} badge
+        </Button>
       </OptionBlock>
     ))
   }
 </Playground>
 
 ### Sizes
 
-Use the `badgeSize` prop on `<Badge>` to change the size.
+Use the `badgeSize` prop to change the size.
 
 <Playground>
   {() => {
-    const sizes = BADGE_DEFAULTS.sizes.map(size => ({ name: size, size }));
+    const sizes = DEFAULTS.badgeSizes.map(size => ({ name: size, size }));
     sizes.splice(1,0, { name: 'normal', size: undefined});
 
-    return sizes.map(({ name, size }, i) => (
-      <OptionBlock props={{ size }} index={i} key={i}>
-        <Badge badgeSize={size}>{name} badge</Badge>
+    return sizes.map(({ name, badgeSize }, i) => (
+      <OptionBlock props={{ badgeSize }} index={i} key={i}>
+        <Button badge='notifications' badgeSize={badgeSize}>
+          {name} size
+        </Button>
       </OptionBlock>
     ))
 
@@ -86,58 +76,56 @@ Use the `badgeSize` prop on `<Badge>` to change the size.
 
 ### Styles
 
-Use the `badgeOutlined` prop of `<Badge>` to use an outlined badge.
+Use the `badgeOutlined` prop to use an outlined badge.
 
 <Playground>
   <Block>
     <Title as="p" size={4}>
       Span
     </Title>
-    <Badge badgeOutlined badgeContent={50}>
+    <Generic as="span" badgeOutlined badge={50}>
       Notifications
-    </Badge>
+    </Generic>
   </Block>
   <Block>
     <Title as="p" size={4}>
       Button
     </Title>
-    <Button.Group>
-      <Badge as={Button} badgeOutlined badgeContent={50}>
-        Button
-      </Badge>
-    </Button.Group>
+    <Button badgeOutlined badge={50}>
+      Button
+    </Button>
   </Block>
 </Playground>
 
-Use the `badgeRounded` prop of `<Badge>` to round a badge.
+Use the `badgeRounded` prop to round a badge.
 
 <Playground>
   <Block>
     <Title as="p" size={4}>
       Span
     </Title>
-    <Badge badgeRounded badgeContent={50}>
+    <Generic as="span" badgeRounded badge={50}>
       Notifications
-    </Badge>
+    </Generic>
   </Block>
   <Block>
     <Title as="p" size={4}>
       Button
     </Title>
-    <Button.Group>
-      <Badge as={Button} badgeRounded badgeContent={50}>
-        Button
-      </Badge>
-    </Button.Group>
+    <Button as={Button} badgeRounded badge={50}>
+      Button
+    </Button>
   </Block>
 </Playground>
 
 ## API
 
+The `badge` API is built into the `<Generic>` component, so these props can be used by any `rbx` component.
+
 <ForwardRefAsExoticComponentDoc
-  component={Badge}
+  component={Generic}
   customize
-  docUrl="https://wikiki.github.io/elements/badge/"
+  docPath="https://wikiki.github.io/elements/badge/"
   docProvider="Bulma-Extensions"
   props={{
     badge: {
@@ -156,8 +144,7 @@ Use the `badgeRounded` prop of `<Badge>` to round a badge.
     badgeSize: {
       description: "the size of the badge",
       typeName: "string (literal)",
-      typeTip: mapEnumerable(BADGE_DEFAULTS.sizes),
+      typeTip: mapEnumerable(DEFAULTS.badgeSizes),
     },
   }}
 />
-```

src/base/__docs__/tooltip.docs.mdx

@@ -11,17 +11,142 @@ import {
   mapEnumerable,
   OptionBlock,
 } from "src/__docs__/components";
+import { Generic } from "src/base";
 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.
+_This is available on every component as it's handled by the `Generic` component._
+
+It can display a `number` or a `string` on any component using `Generic`.
+
+<Playground>
+  <Generic as="span" tooltip="pending" textColor="primary">
+    Tooltip
+  </Generic>
+</Playground>
+
+Or, you can use any other `rbx` component (e.g. `<Button>`) and use the same API.
+
+<Playground>
+  <Button tooltip="pending" color="primary">
+    Tooltip
+  </Button>
+</Playground>
+
+### Colors
+
+Use the `tooltipColor` prop to specify the color.
+
+<Playground>
+  {() =>
+    DEFAULTS.colors.map((tooltipColor, i) => (
+      <OptionBlock props={{ tooltipColor }} index={i} key={i}>
+        <Button tooltip={tooltipColor} tooltipColor={tooltipColor}>
+          {tooltipColor} tooltip
+        </Button>
+      </OptionBlock>
+    ))
+  }
+</Playground>
+
+### Positioning
+
+Use the `tooltipPosition` prop to specify the position of the tooltip.
+
+<Playground>
+  {() =>
+    DEFAULTS.tooltipPositions.map((tooltipPosition, i) => (
+      <OptionBlock props={{ tooltipPosition }} index={i} key={i}>
+        <Button
+          color="primary"
+          tooltip={tooltipPosition}
+          tooltipPosition={tooltipPosition}
+        >
+          {tooltipPosition} tooltip
+        </Button>
+      </OptionBlock>
+    ))
+  }
+</Playground>
+
+### Responsive positioning
+
+You can position the tooltip at differently depending on the screen size.
+
+<Playground>
+  <Button
+    color="primary"
+    tooltip="Hi! I'm on top and bottom."
+    tooltipPosition="top"
+    tooltipResponsive={{ desktop: "bottom" }}
+  >
+    Top and bottom
+  </Button>
+</Playground>
+
+If you resize your browser window around `1024px` (the `touch` breakpoint), then the tooltip will change position.
+
+### Styles
+
+Use the `tooltipActive` prop to force the tooltip to be visible.
 
 <Playground>
-  <Button badgeContent="pending" badgeColor="warning" tooltip="Tooltip Text">
-    Notifications
+  <Button tooltip="pending" color="primary" tooltipActive>
+    Tooltip
   </Button>
 </Playground>
+
+Use the `tooltipMultiline` prop to allow for the tooltip to flow to multiple lines.
+
+<Playground>
+  <Button
+    tooltip="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."
+    color="primary"
+    tooltipMultiline
+  >
+    Tooltip
+  </Button>
+</Playground>
+
+## API
+
+The `tooltip` API is built into the `<Generic>` component, so these props can be used by any `rbx` component.
+
+<ForwardRefAsExoticComponentDoc
+  component={Generic}
+  customize
+  docPath="https://wikiki.github.io/elements/tooltip/"
+  docProvider="Bulma-Extensions"
+  props={{
+    tooltip: {
+      description: "the contents of the tooltip",
+      typeName: "number | string",
+    },
+    tooltipActive: {
+      description: "force the tooltip to be displayed",
+      typeName: "boolean",
+    },
+    tooltipColor: {
+      description: "the color of the tooltip",
+      typeName: "string (literal)",
+      typeTip: mapEnumerable(DEFAULTS.colors),
+    },
+    tooltipActive: {
+      description: "allow the tooltip text to flow over multipe lines",
+      typeName: "boolean",
+    },
+    tooltipPosition: {
+      description: "the position of the tooltip",
+      typeName: "string (literal)",
+      typeTip: mapEnumerable(DEFAULTS.tooltipPositions),
+    },
+    tooltipResponsive: {
+      description: "the responsive positioning of the tooltip",
+      typeName: "{ [Breakpoint]: <tooltipPosition value> }",
+    },
+  }}
+/>

src/elements/page-loader/__docs__/page-loader.docs.mdx

@@ -98,7 +98,7 @@ Use the `direction` prop on `<PageLoader>` to specify the loading direction.
 <ForwardRefAsExoticComponentDoc
   component={PageLoader}
   customize
-  docUrl="https://wikiki.github.io/elements/pageloader/"
+  docPath="https://wikiki.github.io/elements/pageloader/"
   docProvider="Bulma-Extensions"
   props={{
     active: {

src/layout/divider/__docs__/divider.docs.mdx

@@ -1,7 +1,7 @@
 ---
 name: Divider
-menu: Layout
-route: /layout/divider
+menu: Extensions
+route: /extensions/divider
 ---
 
 import { Playground } from "docz";
@@ -46,7 +46,7 @@ Use the `vertical` prop of `<Divider>` to make it vertical.
 <ForwardRefAsExoticComponentDoc
   component={Divider}
   customize
-  docUrl="https://wikiki.github.io/layout/divider/"
+  docPath="https://wikiki.github.io/layout/divider/"
   docProvider="Bulma-Extensions"
   props={{
     children: {