feat: add InfoTip component

ui/components/src/InfoTip/InfoTip.stories.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { Document, Example } from '@component-controls/core';
+import { ThemeProvider } from '../ThemeContext';
+import { InfoTip, InfoTipProps } from './InfoTip';
+
+export default {
+  title: 'Components/InfoTip',
+  component: InfoTip,
+  category: 'Display',
+} as Document;
+
+export const overview: Example<InfoTipProps> = ({ children, size }) => (
+  <ThemeProvider>
+    <InfoTip size={size}>{children}</InfoTip>
+  </ThemeProvider>
+);
+
+overview.controls = {
+  children: `
+  # Header H1
+  ## Header H2
+  ### Header H3
+  #### Header H4
+  ##### Header H5
+  
+  some text  
+  `,
+  size: 18,
+};

ui/components/src/InfoTip/InfoTip.tsx

@@ -0,0 +1,51 @@
+/** @jsx jsx */
+import { FC, ReactNode } from 'react';
+import { jsx, Button, Box } from 'theme-ui';
+import { InfoIcon } from '@primer/octicons-react';
+import { Popover, PopoverProps } from '../Popover';
+import { Markdown } from '../Markdown';
+
+export interface InfoTipProps {
+  /**
+   * size of the icon in pixels
+   */
+  size?: number;
+
+  /**
+   * custom ico
+   */
+  icon?: ReactNode;
+}
+
+/**
+ *
+ * Displays a value with a small label
+ */
+export const InfoTip: FC<InfoTipProps & PopoverProps> = ({
+  size = 18,
+  icon,
+  children,
+  ...rest
+}) => {
+  const iconNode = icon || <InfoIcon size={size} />;
+  return (
+    <Popover
+      trigger="hover"
+      placement="bottom-start"
+      tooltip={() => (
+        <Box variant="infotip.container">
+          {typeof children === 'string' ? (
+            <Markdown>{children}</Markdown>
+          ) : (
+            children
+          )}
+        </Box>
+      )}
+      {...rest}
+    >
+      <Button variant="plain" sx={{ mx: 2 }}>
+        {iconNode}
+      </Button>
+    </Popover>
+  );
+};

ui/components/src/InfoTip/index.ts

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

ui/components/src/ThemeContext/theme.ts

@@ -64,6 +64,7 @@ export type ControlsTheme = {
   colormode: Record<string, ThemeUIStyleObject>;
   header: ThemeUIStyleObject;
   hoverbox: Record<string, ThemeUIStyleObject>;
+  infotip: Record<string, ThemeUIStyleObject>;
   tree: Record<string, ThemeUIStyleObject>;
   pagination: Record<string, ThemeUIStyleObject>;
   sidebar: Record<string, ThemeUIStyleObject>;
@@ -149,6 +150,12 @@ export const theme: ControlsTheme = {
   },
   space: [0, 4, 8, 16, 32, 64, 128, 256, 512],
   buttons: {
+    plain: {
+      p: 0,
+      lineHeight: 'normal',
+      backgroundColor: 'transparent',
+      color: 'primary',
+    },
     primary: {
       color: '#333',
       backgroundColor: '#f3f3f3',
@@ -851,6 +858,14 @@ export const theme: ControlsTheme = {
     },
     text: { color: 'muted', fontWeight: 'bold' },
   },
+  infotip: {
+    container: {
+      maxHeight: '500px',
+      maxWidth: '400px',
+      overflow: 'auto',
+      p: 2,
+    },
+  },
   tree: {
     itemcontainer: {
       flexDirection: 'row',

ui/components/src/index.ts

@@ -18,6 +18,7 @@ export * from './GithubAvatar';
 export * from './GithubAvatarList';
 export * from './Header';
 export * from './HoverBox';
+export * from './InfoTip';
 export * from './Keyboard';
 export * from './Link';
 export * from './LinkHeading';