feat: add links and collapse to block container

ccontrols · Mar 8, 2020 · 449ca8c · 449ca8c
1 parent d972208
commit 449ca8c
Show file tree

Hide file tree

Showing 9 changed files with 99 additions and 34 deletions.
diff --git a/ui/components/package.json b/ui/components/package.json
@@ -29,8 +29,9 @@
   },
   "license": "MIT",
   "dependencies": {
-    "markdown-to-jsx": "^6.11.0",
     "@mdx-js/react": "^1.5.7",
+    "@primer/octicons-react": "^9.5.0",
+    "markdown-to-jsx": "^6.11.0",
     "react": "^16.8.3",
     "react-animate-height": "^2.0.20",
     "react-dom": "^16.8.3",

diff --git a/ui/components/src/BlockContainer/BlockContainer.stories.tsx b/ui/components/src/BlockContainer/BlockContainer.stories.tsx
@@ -3,7 +3,7 @@ import { Donut } from 'theme-ui';
 import { BlockContainer, BlockContainerProps } from './BlockContainer';
 
 export default {
-  title: 'Blocks/Components/BlockContainer',
+  title: 'Components/BlockContainer',
   component: BlockContainer,
 };
 

diff --git a/ui/components/src/BlockContainer/BlockContainer.tsx b/ui/components/src/BlockContainer/BlockContainer.tsx
@@ -1,8 +1,14 @@
 /** @jsx jsx */
-import { FC } from 'react';
-import { jsx, Box } from 'theme-ui';
+import React, { FC } from 'react';
+import { jsx, Box, Flex, Link, Divider } from 'theme-ui';
+import Octicon, {
+  Link as LinkIcon,
+  ChevronRight,
+  ChevronDown,
+} from '@primer/octicons-react';
 import styled from '@emotion/styled';
 import { Subtitle } from '../Subtitle';
+import { Collapsible } from '../Collapsible';
 import { ActionBar, ActionItem } from '../ActionBar';
 
 const SpacedBlockContainer = styled.div(() => ({
@@ -26,16 +32,66 @@ export interface BlockContainerProps {
    */
   actions?: ActionItem[];
 }
+
 export const BlockContainer: FC<BlockContainerProps> = ({
   children,
   title,
   actions,
-}) => (
-  <SpacedBlockContainer>
-    {title && <Subtitle>{title}</Subtitle>}
-    <Box>
-      {actions && <ActionBar actionItems={actions} />}
-      <FramedBlockContainer>{children}</FramedBlockContainer>
-    </Box>
-  </SpacedBlockContainer>
-);
+}) => {
+  const [isOpen, setIsOpen] = React.useState(true);
+  const id = title ? title.toLowerCase().replace(/\s/g, '-') : undefined;
+  //workaround for storybook iframe url
+  const url =
+    (window.location != window.parent.location
+      ? document.referrer
+      : document.location.href) || '';
+  return (
+    <SpacedBlockContainer id={id}>
+      <Flex
+        sx={{
+          flexDirection: 'row',
+          alignItems: 'center',
+          pb: 2,
+          ':hover': {
+            a: {
+              visibility: 'visible',
+            },
+          },
+        }}
+      >
+        {id && (
+          <Link
+            sx={{
+              position: 'absolute',
+              left: -4,
+              px: 2,
+              visibility: 'hidden',
+              ':hover': {
+                visibility: 'visible',
+              },
+            }}
+            href={`${url.split('#')[0]}#${id}`}
+          >
+            <Octicon icon={LinkIcon} />
+          </Link>
+        )}
+
+        {title && <Subtitle css={{ paddingRight: 10 }}>{title}</Subtitle>}
+        <Link
+          aria-label={isOpen ? 'Collapse this block' : 'Expand this block'}
+          css={{
+            cursor: 'pointer',
+          }}
+          onClick={() => setIsOpen(!isOpen)}
+        >
+          <Octicon icon={isOpen ? ChevronDown : ChevronRight} />
+        </Link>
+      </Flex>
+      <Collapsible isOpen={isOpen}>
+        {actions && <ActionBar actionItems={actions} />}
+        <FramedBlockContainer>{children}</FramedBlockContainer>
+      </Collapsible>
+      {!isOpen && <Divider />}
+    </SpacedBlockContainer>
+  );
+};
diff --git a/ui/components/src/FlexContainer/FlexContainer.tsx b/ui/components/src/FlexContainer/FlexContainer.tsx
@@ -1,14 +1,21 @@
-import styled from '@emotion/styled';
+import React, { FC } from 'react';
+import { Flex } from 'theme-ui';
 
 export interface FlexContainerProps {
   align?: string;
 }
-export const FlexContainer = styled.div<FlexContainerProps>(
-  ({ align = 'center' }) => ({
-    display: 'flex',
-    alignItems: align,
-    justifyContent: align,
-    flexDirection: 'column',
-    flexBasis: '100%',
-  }),
+export const FlexContainer: FC<FlexContainerProps> = ({
+  align = 'center',
+  children,
+}) => (
+  <Flex
+    css={{
+      alignItems: align,
+      justifyContent: align,
+      flexDirection: 'column',
+      flexBasis: '100%',
+    }}
+  >
+    {children}
+  </Flex>
 );
diff --git a/ui/components/src/Markdown/Markdown.stories.tsx b/ui/components/src/Markdown/Markdown.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Markdown } from './Markdown';
 
 export default {
-  title: 'Blocks/Components/Markdown',
+  title: 'Components/Markdown',
   component: Markdown,
 };
 

diff --git a/ui/components/src/Subtitle/Subtitle.stories.tsx b/ui/components/src/Subtitle/Subtitle.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Subtitle } from './Subtitle';
 
 export default {
-  title: 'Blocks/Components/Subtitle',
+  title: 'Components/Subtitle',
   component: Subtitle,
 };
 

diff --git a/ui/components/src/Subtitle/Subtitle.tsx b/ui/components/src/Subtitle/Subtitle.tsx
@@ -1,16 +1,10 @@
 import React, { FC } from 'react';
-import styled from '@emotion/styled';
-import { Heading, HeadingProps, Theme } from 'theme-ui';
-
-const StyledHeading = styled(Heading)<{ theme?: Theme }>(({ theme }) => ({
-  fontWeight: 400,
-  paddingBottom: `${theme?.space?.[3]}px`,
-}));
+import { Heading, HeadingProps } from 'theme-ui';
 
 export type SubtitleProps = HeadingProps;
 
 export const Subtitle: FC<SubtitleProps> = ({ children, ...rest }) => (
-  <StyledHeading as="h3" color="fadedText" {...rest}>
+  <Heading as="h3" color="fadedText" css={{ fontWeight: 400 }} {...rest}>
     {children}
-  </StyledHeading>
+  </Heading>
 );
diff --git a/ui/components/src/Title/Title.stories.tsx b/ui/components/src/Title/Title.stories.tsx
@@ -2,7 +2,7 @@ import React from 'react';
 import { Title } from './Title';
 
 export default {
-  title: 'Blocks/Components/Title',
+  title: 'Components/Title',
   component: Title,
 };
 

diff --git a/yarn.lock b/yarn.lock
@@ -2382,6 +2382,13 @@
   dependencies:
     "@types/node" ">= 8"
 
+"@primer/octicons-react@^9.5.0":
+  version "9.5.0"
+  resolved "https://registry.yarnpkg.com/@primer/octicons-react/-/octicons-react-9.5.0.tgz#636032e2494f3b0a1c98cf288028470c7109b484"
+  integrity sha512-7YmjwpBix3LClr6DSgB6HLSnAORPUPOYnid71qb7+tB85RVZu16gKqmz1L524/AO91MK/bToLJ7B9eBZ0wqsOw==
+  dependencies:
+    prop-types "^15.6.1"
+
 "@reach/router@^1.2.1":
   version "1.3.3"
   resolved "https://registry.yarnpkg.com/@reach/router/-/router-1.3.3.tgz#58162860dce6c9449d49be86b0561b5ef46d80db"