feat: added TitledImage for mdx

ui/components/src/Markdown/MarkdownComponents.tsx

@@ -3,11 +3,12 @@
 import { ComponentType } from 'react';
 import { preToCodeBlock } from 'mdx-utils';
 import { jsx } from 'theme-ui';
-import { Label, Button, Image } from 'theme-ui';
+import { Label, Button } from 'theme-ui';
 import { Language } from 'prism-react-renderer';
 import { SyntaxHighlighter } from '../SyntaxHighlighter';
 import { Source } from '../Source';
 import { LinkHeading } from '../LinkHeading';
+import { TitledImage } from '../TitledImage';
 
 export interface MDXLanguageType {
   [key: string]: Language;
@@ -96,7 +97,7 @@ export const markdownComponents: MarkdownComponentType = {
   h4: props => <LinkHeading as="h4" {...props} />,
   h5: props => <LinkHeading as="h5" {...props} />,
   h6: props => <LinkHeading as="h6" {...props} />,
-  image: Image,
+  img: TitledImage,
   button: Button,
   label: Label,
 };

ui/components/src/Table/TableFilter.tsx

@@ -31,7 +31,7 @@ export const GlobalFilter = ({
         sx={{
           mr: 3,
           width: 'auto',
-          color: 'fadedText',
+          color: 'muted',
         }}
       >
         search:

ui/components/src/ThemeContext/theme.ts

@@ -36,6 +36,7 @@ export type ControlsTheme = {
   syntaxhighlight: Record<string, ThemeUIStyleObject>;
   tabs: Record<string, ThemeUIStyleObject>;
   tag: Record<string, ThemeUIStyleObject>;
+  titledimage: Record<string, ThemeUIStyleObject>;
   zoom: ThemeUIStyleObject;
   editpage: Record<string, ThemeUIStyleObject>;
   lastedited: Record<string, ThemeUIStyleObject>;
@@ -68,7 +69,7 @@ export const theme: ControlsTheme = {
     background: '#fff',
     primary: '#5c6ac4',
     secondary: '#006fbb',
-    muted: '#e6e6e6',
+    muted: '#69768C',
     accent: '#f49342',
     darken: '#00044c',
     gray: '#f6f6f6',
@@ -77,7 +78,6 @@ export const theme: ControlsTheme = {
     highlight: '#d9f2f1',
     action: '#3B817D',
     selected: '#027AC5',
-    fadedText: '#69768C',
     shadow: 'rgba(0, 0, 0, 0.1)',
     accentPalette0: '#8338ec',
     accentPalette1: '#fb5607',
@@ -97,12 +97,11 @@ export const theme: ControlsTheme = {
         primary: '#d5c0f1',
         secondary: '#b4e1fa',
         highlight: '#b7ecec',
-        muted: '#e6e6e6',
+        muted: '#c9cacf',
         background: '#38404a',
         sidebar: '#000',
         text: '#d3d4db',
         header: '#111111',
-        fadedText: '#c9cacf',
         selected: '#b3d9ff',
         action: '#d9f2f1',
         shadow: 'rgba(211, 212, 219, 0.1)',
@@ -421,7 +420,7 @@ export const theme: ControlsTheme = {
     },
   },
   subtitle: {
-    color: 'fadedText',
+    color: 'muted',
     fontWeight: 'body',
     pb: 2,
   },
@@ -461,7 +460,7 @@ export const theme: ControlsTheme = {
       ml: 1,
       mr: 1,
       cursor: 'pointer',
-      color: 'fadedText',
+      color: 'muted',
       a: {
         textDecoration: 'inherit',
         color: 'inherit',
@@ -486,7 +485,7 @@ export const theme: ControlsTheme = {
       color: 'primary',
     },
     '.react-tabs__tab--disabled': {
-      color: 'fadedText',
+      color: 'muted',
       cursor: 'default',
     },
     '.react-tabs__tab-panel': {
@@ -513,6 +512,19 @@ export const theme: ControlsTheme = {
       px: 1,
     },
   },
+  titledimage: {
+    container: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'center',
+    },
+    img: {},
+    title: {
+      color: 'muted',
+      py: 2,
+      fontSize: 1,
+    },
+  },
   zoom: {
     position: 'relative',
     transformOrigin: 'top left',
@@ -538,7 +550,7 @@ export const theme: ControlsTheme = {
     },
     text: {
       pr: 2,
-      color: 'fadedText',
+      color: 'muted',
     },
   },
 
@@ -576,7 +588,7 @@ export const theme: ControlsTheme = {
         flexDirection: 'column',
       },
       type: {
-        color: 'fadedText',
+        color: 'muted',
         letterSpacing: '0.10em',
         whiteSpace: 'pre-wrap',
         margin: 0,
@@ -681,7 +693,7 @@ export const theme: ControlsTheme = {
 
     label: {
       fontSize: 1,
-      color: 'fadedText',
+      color: 'muted',
       pb: 2,
     },
     linktitle: {

ui/components/src/TitledImage/TitledImage.stories.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { TitledImage, TitledImageProps } from './TitledImage';
+
+export default {
+  title: 'Components/TitledImage',
+  component: TitledImage,
+};
+
+export const overview = ({ title }: TitledImageProps) => {
+  return (
+    <TitledImage
+      title={title}
+      alt="alt text"
+      src="https://github.com/ccontrols/component-controls/raw/master/misc/storybook-custom-docs/images/simple-page.jpg"
+    />
+  );
+};
+
+overview.story = {
+  controls: {
+    title: { type: 'text', value: 'some image title' },
+  },
+};

ui/components/src/TitledImage/TitledImage.tsx

@@ -0,0 +1,19 @@
+import React, { FC } from 'react';
+import { Image, ImageProps, Text, Box } from 'theme-ui';
+
+export { ImageProps as TitledImageProps };
+/**
+ * image components with a title if available
+ */
+export const TitledImage: FC<Omit<ImageProps, 'ref'>> = props => {
+  const { title } = props;
+  const img = <Image variant="titledimage.image" {...props} />;
+  return title ? (
+    <Box variant="titledimage.container">
+      {img}
+      <Text variant="titledimage.title">{title}</Text>
+    </Box>
+  ) : (
+    img
+  );
+};

ui/components/src/TitledImage/index.ts

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

ui/components/src/index.ts

@@ -24,5 +24,6 @@ export * from './Tabs';
 export * from './Tag';
 export * from './ThemeContext';
 export * from './Title';
+export * from './TitledImage';
 export * from './Toggle';
 export * from './Zoom';