refactored __docs__/components/feature

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

@@ -3,7 +3,10 @@ import React from "react";
 
 import { Title } from "src/elements";
 
-import { ComponentFeatures, ComponentFeaturesProps } from "../feature";
+import {
+  ComponentFeatures,
+  ComponentFeaturesProps,
+} from "../feature/component-features";
 import {
   SimplePropsTable,
   SimplePropsTableProps,

src/__docs__/components/component-doc/forward-ref-as-exotic-component-doc.tsx

@@ -3,7 +3,7 @@ import React from "react";
 
 import { ForwardRefAsExoticComponent } from "src/base/exotic";
 
-import { ComponentFeaturesProps } from "../feature";
+import { ComponentFeaturesProps } from "../feature/component-features";
 import { SimplePropsTableProps } from "../simple-props-table/simple-props-table";
 import { ComponentDoc, ComponentDocProps } from "./component-doc";
 import { asDoc } from "./as-doc";

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

@@ -0,0 +1,17 @@
+import React from "react";
+
+import { Feature } from "./feature";
+
+export type AsDocProps = {
+  asType: string;
+};
+
+export const AsDoc: React.FC<AsDocProps> = ({ asType }) => (
+  <Feature
+    primaryName="as"
+    primaryColor="light"
+    secondaryName={asType}
+    secondaryColor="warning"
+    url="/architecture/inversion-of-control"
+  />
+);

src/__docs__/components/feature/component-features.tsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+import { AsDoc, AsDocProps } from "./as-doc";
+import { CustomizeFeature, CustomizeFeatureProps } from "./customize-feature";
+import { DocFeature, DocFeatureProps } from "./doc-feature";
+import { Feature } from "./feature";
+
+export type ComponentFeaturesProps = AsDocProps &
+  DocFeatureProps &
+  CustomizeFeatureProps;
+
+export const ComponentFeatures: React.FC<ComponentFeaturesProps> = ({
+  asType,
+  docPath,
+  customize,
+}) => (
+  <Feature.Group>
+    <AsDoc asType={asType} />
+    <CustomizeFeature customize={customize} />
+    <DocFeature docPath={docPath} />
+  </Feature.Group>
+);

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

@@ -0,0 +1,24 @@
+import React from "react";
+
+import { Feature } from "./feature";
+
+export type CustomizeFeatureProps = {
+  customize?: boolean;
+};
+
+export const CustomizeFeature: React.FC<CustomizeFeatureProps> = ({
+  customize,
+}) => {
+  const name = customize === true ? "yes" : "no";
+  const color = customize === true ? "success" : "danger";
+
+  return (
+    <Feature
+      primaryName="customize"
+      primaryColor="light"
+      secondaryName={name}
+      secondaryColor={color}
+      url="/architecture/customize"
+    />
+  );
+};

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

@@ -0,0 +1,26 @@
+import React from "react";
+
+import { Feature } from "./feature";
+
+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";
+
+  return (
+    <Feature
+      primaryName="docs"
+      primaryColor="light"
+      secondaryName={secondaryName}
+      secondaryColor={secondaryColor}
+      url={url}
+    />
+  );
+};

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

@@ -0,0 +1,11 @@
+import React from "react";
+
+import { Field } from "src/elements";
+
+export type FeatureGroupProps = {
+  children: React.ReactNode;
+};
+
+export const FeatureGroup: React.FC<FeatureGroupProps> = ({ children }) => (
+  <Field kind="group" children={children} />
+);

src/__docs__/components/feature/feature.tsx

@@ -0,0 +1,46 @@
+import { Link } from "docz";
+import React from "react";
+
+import { Variables } from "src/base/helpers/variables";
+import { Control, Tag } from "src/elements";
+
+import { FeatureGroup } from "./feature-group";
+
+export type FeatureProps = {
+  primaryName: string;
+  primaryColor: Variables["colors"];
+  secondaryName: string;
+  secondaryColor: Variables["colors"];
+  url?: string;
+};
+
+export const Feature = Object.assign(
+  ({
+    primaryName,
+    primaryColor,
+    secondaryName,
+    secondaryColor,
+    url,
+  }: FeatureProps) => {
+    const tagGroupProps =
+      url === undefined
+        ? {}
+        : /^\/[a-z]/.test(url) // Local path, e.g. '/somewhere'
+        ? { as: Link, to: url }
+        : {
+            as: "a" as keyof JSX.IntrinsicElements,
+            href: url,
+            target: "_blank",
+          };
+
+    return (
+      <Control>
+        <Tag.Group gapless {...tagGroupProps}>
+          <Tag color={primaryColor}>{primaryName}</Tag>
+          <Tag color={secondaryColor}>{secondaryName}</Tag>
+        </Tag.Group>
+      </Control>
+    );
+  },
+  { Group: FeatureGroup },
+);

src/__docs__/components/feature/index.ts

@@ -0,0 +1,5 @@
+export { AsDoc } from "./as-doc";
+export { ComponentFeatures } from "./component-features";
+export { CustomizeFeature } from "./customize-feature";
+export { DocFeature } from "./doc-feature";
+export { Feature } from "./feature";

src/__docs__/components/index.ts

@@ -1,11 +1,6 @@
-export {
-  ComponentDoc,
-  ForwardRefAsExoticComponentDoc,
-  asDoc,
-  refDoc,
-} from "./component-doc";
-export { ComponentFeatures } from "./feature";
+export * from "./component-doc";
+export * from "./feature";
 export { Frame } from "./frame";
 export { OptionBlock } from "./option-block";
-export { SimplePropsTable } from "./simple-props-table";
+export * from "./simple-props-table";
 export { mapEnumerable } from "./utils";

src/__docs__/components/rbx-feature.tsx

@@ -4,14 +4,22 @@ import { Media } from "src/components";
 import { Image, Title } from "src/elements";
 import { Column, ColumnProps } from "src/grid/columns/column";
 
-export const RbxFeature: React.FC<{
+export type RbxFeatureProps = {
   children: React.ReactNode;
   imageSrc: string;
   // tslint:disable-next-line: react-unused-props-and-state
   size?: ColumnProps["size"]; // false positive
   title: string;
   to: string;
-}> = ({ children, imageSrc, size: colSize, title, to }) => {
+};
+
+export const RbxFeature = ({
+  children,
+  imageSrc,
+  size: colSize,
+  title,
+  to,
+}: RbxFeatureProps) => {
   const size = colSize !== undefined ? colSize : "half";
 
   return (