fix: restore story block style

ccontrols · Dec 28, 2020 · b5ee186 · b5ee186
1 parent 507d506
commit b5ee186
Show file tree

Hide file tree

Showing 6 changed files with 13 additions and 16 deletions.
diff --git a/ui/blocks/src/Story/Story.tsx b/ui/blocks/src/Story/Story.tsx
@@ -7,9 +7,7 @@ import {
   StoryBlockContainerProps,
 } from '../BlockContainer/story';
 import { useCustomProps } from '../context';
-import { StoryRender, StoryWrapperType } from './StoryRender';
-
-const NAME = 'story';
+import { StoryRender, StoryWrapperType, NAME } from './StoryRender';
 
 export interface StoryOwnProps {
   /**

diff --git a/ui/blocks/src/Story/StoryRender.tsx b/ui/blocks/src/Story/StoryRender.tsx
@@ -1,6 +1,6 @@
 /** @jsx jsx */
 import { FC, forwardRef, Ref, useState, Fragment } from 'react';
-import { jsx, CSSProperties, Box } from 'theme-ui';
+import { jsx, CSSProperties, Box, BoxProps } from 'theme-ui';
 
 import Iframe from 'react-frame-component';
 import ReactResizeDetector from 'react-resize-detector';
@@ -73,10 +73,10 @@ const StoryWrapper: FC<StoryWrapperProps> = ({
 };
 export const NAME = 'story';
 
-export interface StoryRenderProps {
+export type StoryRenderProps = {
   story: Story;
   ref?: Ref<HTMLDivElement>;
-}
+} & BoxProps;
 export const StoryRender: FC<StoryRenderProps & StoryWrapperProps> = forwardRef(
   function StoryRender(
     { story, wrapper, iframeStyle, ...rest },

diff --git a/ui/blocks/src/Story/index.ts b/ui/blocks/src/Story/index.ts
@@ -1 +1,2 @@
 export * from './Story';
+export { StoryRender } from './StoryRender';
diff --git a/ui/components/src/BlockContainer/BlockContainer.tsx b/ui/components/src/BlockContainer/BlockContainer.tsx
@@ -62,8 +62,8 @@ export const BlockContainer: FC<BlockContainerProps> = ({
     children
   );
   return (
-    <Box variant={`blockcontainer.${plain ? 'plain' : 'container'}`} {...rest}>
-      {(blockId || title || collapsible) && !plain && (
+    <Box variant="blockcontainer.container" {...rest}>
+      {(blockId || title || collapsible) && (
         <LinkHeading
           as={collapsible ? 'h3' : 'h4'}
           id={blockId}

diff --git a/ui/components/src/ThemeContext/theme.ts b/ui/components/src/ThemeContext/theme.ts
@@ -428,11 +428,6 @@ export const theme: ControlsTheme = {
       width: '100%',
       scrollMarginTop: '5rem',
     },
-    plain: {
-      position: 'relative',
-      width: '100%',
-      scrollMarginTop: '5rem',
-    },
     inner: {
       boxShadow: (t: Theme): string => `0px 1px 3px 0px ${t.colors?.shadow}`,
       border: (t: Theme): string => ` 1px solid  ${t.colors?.shadow}`,

diff --git a/ui/pages/src/pages/CanvasPage.tsx b/ui/pages/src/pages/CanvasPage.tsx
@@ -1,9 +1,12 @@
 import React, { FC } from 'react';
 import { TabConfiguration } from '@component-controls/core';
-import { Story } from '@component-controls/blocks';
-
-const CanvasPage: FC = () => <Story id="." plain />;
+import { useCurrentStory } from '@component-controls/store';
+import { StoryRender } from '@component-controls/blocks';
 
+const CanvasPage: FC = () => {
+  const story = useCurrentStory();
+  return story ? <StoryRender story={story} /> : null;
+};
 export default {
   title: 'Canvas',
   component: CanvasPage,
Original file line number	Diff line number	Diff line change
		@@ -1 +1,2 @@
		export * from './Story';
		export { StoryRender } from './StoryRender';