From b078ced37ea81d99a212ec4add22cac8437db2df Mon Sep 17 00:00:00 2001 From: Devin Fee Date: Fri, 14 Jun 2019 02:25:07 -0700 Subject: [PATCH] added badge / tooltip docs --- .../components/feature/doc-feature.tsx | 23 ++- src/base/__docs__/badge.docs.mdx | 91 ++++++------ src/base/__docs__/tooltip.docs.mdx | 131 +++++++++++++++++- .../page-loader/__docs__/page-loader.docs.mdx | 2 +- src/layout/divider/__docs__/divider.docs.mdx | 6 +- 5 files changed, 188 insertions(+), 65 deletions(-) diff --git a/src/__docs__/components/feature/doc-feature.tsx b/src/__docs__/components/feature/doc-feature.tsx index 824a6470..415960c4 100644 --- a/src/__docs__/components/feature/doc-feature.tsx +++ b/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 = ({ 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 ( - - Notifications - - - -But you can use the `as` prop to render any component or JSX element, like a ` ### Colors -Use the `badgeColor` prop on `` to specify the color. +Use the `badgeColor` prop to specify the color. {() => - DEFAULTS.colors.map((color, i) => ( - - Notifications + DEFAULTS.colors.map((badgeColor, i) => ( + + )) } @@ -67,16 +55,18 @@ Use the `badgeColor` prop on `` to specify the color. ### Sizes -Use the `badgeSize` prop on `` to change the size. +Use the `badgeSize` prop to change the size. {() => { - 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) => ( - - {name} badge + return sizes.map(({ name, badgeSize }, i) => ( + + )) @@ -86,58 +76,56 @@ Use the `badgeSize` prop on `` to change the size. ### Styles -Use the `badgeOutlined` prop of `` to use an outlined badge. +Use the `badgeOutlined` prop to use an outlined badge. Span - + Notifications - + Button - - - Button - - + -Use the `badgeRounded` prop of `` to round a badge. +Use the `badgeRounded` prop to round a badge. Span - + Notifications - + Button - - - Button - - + ## API +The `badge` API is built into the `` component, so these props can be used by any `rbx` component. + ` to round a badge. badgeSize: { description: "the size of the badge", typeName: "string (literal)", - typeTip: mapEnumerable(BADGE_DEFAULTS.sizes), + typeTip: mapEnumerable(DEFAULTS.badgeSizes), }, }} /> -``` diff --git a/src/base/__docs__/tooltip.docs.mdx b/src/base/__docs__/tooltip.docs.mdx index ad4c881c..0f6b2c18 100644 --- a/src/base/__docs__/tooltip.docs.mdx +++ b/src/base/__docs__/tooltip.docs.mdx @@ -11,6 +11,7 @@ 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"; @@ -18,10 +19,134 @@ import { Block, Button, Title } from "src/elements"; 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`. + + + + Tooltip + + + +Or, you can use any other `rbx` component (e.g. ` + + +### Colors + +Use the `tooltipColor` prop to specify the color. + + + {() => + DEFAULTS.colors.map((tooltipColor, i) => ( + + + + )) + } + + +### Positioning + +Use the `tooltipPosition` prop to specify the position of the tooltip. + + + {() => + DEFAULTS.tooltipPositions.map((tooltipPosition, i) => ( + + + + )) + } + + +### Responsive positioning + +You can position the tooltip at differently depending on the screen size. + + + + + +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. - + +Use the `tooltipMultiline` prop to allow for the tooltip to flow to multiple lines. + + + + + +## API + +The `tooltip` API is built into the `` component, so these props can be used by any `rbx` component. + + }", + }, + }} +/> diff --git a/src/elements/page-loader/__docs__/page-loader.docs.mdx b/src/elements/page-loader/__docs__/page-loader.docs.mdx index f4d87841..a7431d3f 100644 --- a/src/elements/page-loader/__docs__/page-loader.docs.mdx +++ b/src/elements/page-loader/__docs__/page-loader.docs.mdx @@ -98,7 +98,7 @@ Use the `direction` prop on `` to specify the loading direction. ` to make it vertical.