feat: add HoverBox component

plugins/viewport-plugin/src/ViewportBlock/ViewportBox.tsx

@@ -1,7 +1,6 @@
-/** @jsx jsx */
-import { FC } from 'react';
-import { Box, Theme, Text, jsx } from 'theme-ui';
+import React, { FC } from 'react';
 import { Story } from '@component-controls/blocks';
+import { HoverBox } from '@component-controls/components';
 
 export interface ViewportBoxProps {
   storyId?: string;
@@ -14,26 +13,8 @@ export const ViewportBox: FC<ViewportBoxProps> = ({
   sizeLabel,
 }) => {
   return (
-    <Box
-      sx={{
-        minHeight: '100%',
-        minWidth: 'unset',
-        pr: 4,
-        ':hover': {
-          '& > div': {
-            color: 'mutedText',
-          },
-        },
-      }}
-    >
-      <Box
-        sx={{
-          boxShadow: (t: Theme) => `0px 2px 6px 0px ${t.colors?.shadow}`,
-        }}
-      >
-        <Story id={storyId} sxStyle={{ mb: 0, minWidth: size }} />
-      </Box>
-      <Text sx={{ color: 'muted', fontWeight: 'bold' }}>{sizeLabel}</Text>
-    </Box>
+    <HoverBox label={sizeLabel}>
+      <Story id={storyId} sxStyle={{ mb: 0, minWidth: size }} />
+    </HoverBox>
   );
 };

ui/components/README.md

@@ -11,6 +11,7 @@
     -   [<ins>ColorMode</ins>](#inscolormodeins)
     -   [<ins>ExternalLink</ins>](#insexternallinkins)
     -   [<ins>Header</ins>](#insheaderins)
+    -   [<ins>HoverBox</ins>](#inshoverboxins)
     -   [<ins>Keyboard</ins>](#inskeyboardins)
     -   [<ins>Link</ins>](#inslinkins)
     -   [<ins>LinkContextProvider</ins>](#inslinkcontextproviderins)
@@ -192,6 +193,18 @@ _Header [source code](https://github.com/ccontrols/component-controls/tree/maste
 | `as`      | _ElementType&lt;any>_ |             |
 | `variant` | _string_              |             |
 
+## <ins>HoverBox</ins>
+
+Box component that will fade/outline a label at the bottom
+
+_HoverBox [source code](https://github.com/ccontrols/component-controls/tree/master/ui/components/src/HoverBox/HoverBox.tsx)_
+
+### properties
+
+| Name     | Type     | Description                                    |
+| -------- | -------- | ---------------------------------------------- |
+| `label*` | _string_ | laabel to be displayed when the box is hovered |
+
 ## <ins>Keyboard</ins>
 
 Componet to monitor keystrokes. Can attach to child, document or window.

ui/components/src/HoverBox/HoverBox.stories.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import { Donut } from 'theme-ui';
+import { HoverBox } from '.';
+
+export default {
+  title: 'Components/HoverBox',
+  component: HoverBox,
+};
+
+export const overview = () => (
+  <HoverBox label="donut component">
+    <Donut value={1 / 2} />,
+  </HoverBox>
+);

ui/components/src/HoverBox/HoverBox.tsx

@@ -0,0 +1,23 @@
+/** @jsx jsx */
+import { FC } from 'react';
+import { jsx, Box, Text } from 'theme-ui';
+
+export interface HoverBoxProps {
+  /**
+   * laabel to be displayed when the box is hovered
+   */
+  label: string;
+}
+
+/**
+ * Box component that will fade/outline a label at the bottom
+ *
+ */
+export const HoverBox: FC<HoverBoxProps> = ({ label, children }) => {
+  return (
+    <Box variant="hoverbox.container">
+      <Box variant="hoverbox.inner">{children}</Box>
+      <Text variant="hoverbox.text">{label}</Text>
+    </Box>
+  );
+};

ui/components/src/HoverBox/index.ts

@@ -0,0 +1 @@
+export * from './HoverBox';

ui/components/src/ThemeContext/theme.ts

@@ -47,6 +47,7 @@ export type ControlsTheme = {
   story: Record<string, ThemeUIStyleObject>;
   colormode: Record<string, ThemeUIStyleObject>;
   header: ThemeUIStyleObject;
+  hoverbox: Record<string, ThemeUIStyleObject>;
   navmenu: Record<string, ThemeUIStyleObject>;
   pagination: Record<string, ThemeUIStyleObject>;
   sidebar: Record<string, ThemeUIStyleObject>;
@@ -735,6 +736,22 @@ export const theme: ControlsTheme = {
     alignItems: 'center',
     boxShadow: (t: Theme) => `0 1px 3px 1px ${t.colors?.shadow}`,
   },
+  hoverbox: {
+    container: {
+      minHeight: '100%',
+      minWidth: 'unset',
+      pr: 4,
+      ':hover': {
+        '& > div': {
+          color: 'mutedText',
+        },
+      },
+    },
+    inner: {
+      boxShadow: (t: Theme) => `0px 2px 6px 0px ${t.colors?.shadow}`,
+    },
+    text: { color: 'muted', fontWeight: 'bold' },
+  },
   navmenu: {
     link: {
       width: '100%',

ui/components/src/index.ts

@@ -5,6 +5,7 @@ export * from './Collapsible';
 export * from './ColorMode';
 export * from './ExternalLink';
 export * from './Header';
+export * from './HoverBox';
 export * from './Keyboard';
 export * from './Link';
 export * from './Markdown';