fix: block titles

ccontrols · Feb 29, 2020 · cb77033 · cb77033
1 parent bd9a9b3
commit cb77033
Show file tree

Hide file tree

Showing 7 changed files with 22 additions and 28 deletions.
diff --git a/examples/storybook-5/.storybook/preview.js b/examples/storybook-5/.storybook/preview.js
@@ -24,9 +24,9 @@ export const DocsPage = ({
       <Title slot={titleSlot} />
       <Subtitle slot={subtitleSlot} />
       <Description slot={descriptionSlot} />
-      <ImportSource id="." title='import component' />
+      <ImportSource id="." title='Import component' />
       <Story id="." />
-      <Source id="." title='source'/>
+      <Source id="." title='Source code'/>
       <ControlsTable id="." />
       <Props slot={propsSlot} />
       <DependenciesTable titleDependencies='Dependencies' titleDependents='Dependents' />

diff --git a/integrations/storybook/src/blocks/ControlsTable.tsx b/integrations/storybook/src/blocks/ControlsTable.tsx
@@ -7,22 +7,21 @@ import {
 } from '@component-controls/specification';
 import { mergeControlValues } from '@component-controls/core';
 import {
-  ControlsTable as SharedControlsTable,
+  ControlsTable as BaseControlsTable,
+  ControlsTableProps as BaseControlsTableProps,
   useControlsContext,
   ControlsContextInputProps,
 } from '@component-controls/blocks';
 
 import { SET_DATA_MSG } from '../shared/shared';
 import { ThemeProvider } from '../shared/ThemeProvider';
-export type ControlsTableProps = ControlsContextInputProps & {
-  /** a title to display */
-  title?: string;
-};
+export type ControlsTableProps = ControlsContextInputProps &
+  BaseControlsTableProps;
 
 export const ControlsTable: FC<ControlsTableProps> = ({
-  title,
   id: propId,
   name,
+  ...rest
 }) => {
   const { id, controls, story, api, channel } = useControlsContext({
     id: propId,
@@ -65,12 +64,12 @@ export const ControlsTable: FC<ControlsTableProps> = ({
 
   return id ? (
     <ThemeProvider>
-      <SharedControlsTable
-        title={title}
+      <BaseControlsTable
         controls={controls}
         storyId={id}
         setControlValue={setControlValue}
         clickControl={clickControl}
+        {...rest}
       />
     </ThemeProvider>
   ) : null;

diff --git a/ui/block-components/src/ControlsTable/ControlsTable.tsx b/ui/block-components/src/ControlsTable/ControlsTable.tsx
@@ -1,7 +1,6 @@
 import React, { FC, MouseEvent } from 'react';
 import { window, document } from 'global';
 import styled from '@emotion/styled';
-import { Theme } from 'theme-ui';
 import qs from 'qs';
 import copy from 'copy-to-clipboard';
 import {
@@ -48,17 +47,6 @@ const StyleTable = styled.table<{}>(({ theme }) => ({
   },
 }));
 
-const PropEditorsTitle = styled.div<{}>(({ theme }: { theme: Theme }) => ({
-  padding: `${theme?.space?.[3]}px`,
-  letterSpacing: '0.35em',
-  textTransform: 'uppercase',
-  //@ts-ignore
-  fontWeight: theme?.fontWeights?.bold || 900,
-  fontSize: '11px',
-  color: `${theme?.colors?.fadedText}`,
-  background: `${theme?.colors?.lightenPrimary}`,
-}));
-
 const DEFAULT_GROUP_ID = 'Other';
 
 const PropGroupTable: FC<ControlsTableProps> = ({
@@ -170,8 +158,7 @@ export const ControlsTable: FC<ControlsTableProps & {
       { title: copied ? 'copied' : 'copy', onClick: onCopy },
     ];
     return (
-      <BlockContainer actions={actionItems}>
-        {title && <PropEditorsTitle>{title}</PropEditorsTitle>}
+      <BlockContainer actions={actionItems} title={title}>
         {groupedItems.length === 1 ? (
           <PropGroupTable {...props} controls={groupedItems[0].controls} />
         ) : (

diff --git a/ui/block-components/src/Source/Source.tsx b/ui/block-components/src/Source/Source.tsx
@@ -54,6 +54,7 @@ export const Source: FC<SourceProps> = ({
   renderFn,
   actions,
   dark = false,
+  title,
 }) => {
   const [copied, setCopied] = React.useState(false);
   const onCopy = (e: MouseEvent<HTMLButtonElement>) => {
@@ -90,7 +91,7 @@ export const Source: FC<SourceProps> = ({
   const props = { ...defaultProps, theme };
 
   return (
-    <BlockContainer actions={actionsItems}>
+    <BlockContainer actions={actionsItems} title={title}>
       <Highlight {...props} code={children} language={language}>
         {renderProps}
       </Highlight>

diff --git a/ui/blocks/src/ControlsTable/ControlsTable.tsx b/ui/blocks/src/ControlsTable/ControlsTable.tsx
@@ -5,6 +5,8 @@ import {
 } from '@component-controls/block-components';
 import { randomizeData } from '@component-controls/core';
 
+export { ControlsTableProps };
+
 export const ControlsTable: React.FC<ControlsTableProps> = props =>
   ControlsTable ? (
     <BaseControlsTable

diff --git a/ui/blocks/src/ImportSource/ImportSource.tsx b/ui/blocks/src/ImportSource/ImportSource.tsx
@@ -11,7 +11,7 @@ import { ThemeContext } from '../ThemeContext';
 
 export type ImportSourceProps = ControlsContextInputProps & SourceProps;
 
-export const ImportSource: FC<ImportSourceProps> = ({ id, name }) => {
+export const ImportSource: FC<ImportSourceProps> = ({ id, name, ...rest }) => {
   const { component } = useControlsContext({
     id,
     name,
@@ -21,5 +21,9 @@ export const ImportSource: FC<ImportSourceProps> = ({ id, name }) => {
     return null;
   }
   const { dark } = React.useContext(ThemeContext);
-  return <SourceBlock dark={dark}>{source}</SourceBlock>;
+  return (
+    <SourceBlock dark={dark} {...rest}>
+      {source}
+    </SourceBlock>
+  );
 };
diff --git a/ui/blocks/src/StorySource/StorySource.tsx b/ui/blocks/src/StorySource/StorySource.tsx
@@ -11,7 +11,7 @@ import { ThemeContext } from '../ThemeContext';
 
 export type StorySourceProps = ControlsContextInputProps & BaseStorySourceProps;
 
-export const StorySource: FC<StorySourceProps> = ({ id, name }) => {
+export const StorySource: FC<StorySourceProps> = ({ id, name, ...rest }) => {
   const { source, controls, args, fileSource } = useControlsContext({
     id,
     name,
@@ -23,6 +23,7 @@ export const StorySource: FC<StorySourceProps> = ({ id, name }) => {
       controls={controls}
       args={args}
       fileSource={fileSource}
+      {...rest}
     >
       {source}
     </BaseStorySource>