fix: block container id when using '.' for id

ccontrols · Apr 30, 2020 · 8cb87bf · 8cb87bf
1 parent bbd06f7
commit 8cb87bf
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 23 deletions.
diff --git a/ui/blocks/src/PageContainer/PageContainer.tsx b/ui/blocks/src/PageContainer/PageContainer.tsx
@@ -58,7 +58,7 @@ export const PageContainer: FC<PageContainerProps> = ({
   options,
   components = {},
 }) => {
-  return storyId ? (
+  return (
     <ThemeProvider theme={theme} dark={dark}>
       <Box
         sx={{
@@ -71,28 +71,30 @@ export const PageContainer: FC<PageContainerProps> = ({
         }}
       >
         <Box sx={{ maxWidth: '1000px', width: '100%' }}>
-          <BlockContextProvider
-            storyId={storyId}
-            store={mockStore || store}
-            options={options}
-          >
-            <StoryContextConsumer id={storyId}>
-              {({ kind }) => {
-                const { MDXPage } = kind || {};
-                return MDXPage ? (
-                  <MDXProvider
-                    components={{ ...markdownComponents, ...components }}
-                  >
-                    <MDXPage />
-                  </MDXProvider>
-                ) : (
-                  children
-                );
-              }}
-            </StoryContextConsumer>
-          </BlockContextProvider>
+          {storyId && (
+            <BlockContextProvider
+              storyId={storyId}
+              store={mockStore || store}
+              options={options}
+            >
+              <StoryContextConsumer id={storyId}>
+                {({ kind }) => {
+                  const { MDXPage } = kind || {};
+                  return MDXPage ? (
+                    <MDXProvider
+                      components={{ ...markdownComponents, ...components }}
+                    >
+                      <MDXPage />
+                    </MDXProvider>
+                  ) : (
+                    children
+                  );
+                }}
+              </StoryContextConsumer>
+            </BlockContextProvider>
+          )}
         </Box>
       </Box>
     </ThemeProvider>
-  ) : null;
+  );
 };
diff --git a/ui/components/src/BlockContainer/BlockContainer.tsx b/ui/components/src/BlockContainer/BlockContainer.tsx
@@ -46,7 +46,10 @@ export const BlockContainer: FC<BlockContainerProps> = ({
 }) => {
   const [isOpen, setIsOpen] = React.useState(true);
   const blockId =
-    id || (title ? title.toLowerCase().replace(/\s/g, '-') : undefined);
+    id !== '.'
+      ? id
+      : undefined ||
+        (title ? title.toLowerCase().replace(/\s/g, '-') : undefined);
   const BlockTitle: FC = () => (
     <Subtitle
       color="text"