feat: make refs collapsible

lib/ui/src/components/sidebar/Refs.tsx

@@ -1,7 +1,8 @@
-import React, { FunctionComponent, useMemo } from 'react';
+import React, { FunctionComponent, useMemo, useState } from 'react';
 import { styled } from '@storybook/theming';
 
 import { ExpanderContext, useDataset } from './Tree/State';
+import { Expander } from './Tree/ListItem';
 import { RefIndicator } from './RefIndicator';
 import { AuthBlock, ErrorBlock, LoaderBlock, ContentBlock } from './RefBlocks';
 import { getType, RefType } from './RefHelpers';
@@ -12,15 +13,25 @@ export interface RefProps {
   isHidden: boolean;
 }
 
-const RefHead = styled.div({
+const RefHead = styled.button({
+  alignItems: 'center',
+  background: 'transparent',
+  border: 'none',
+  boxSizing: 'content-box',
+  cursor: 'pointer',
   display: 'flex',
+  marginLeft: -20,
+  padding: 0,
+  paddingLeft: 20,
+  position: 'relative',
+  textAlign: 'left',
+  width: '100%',
 });
 
 const RefTitle = styled.header(({ theme }) => ({
   fontWeight: theme.typography.weight.bold,
   fontSize: theme.typography.size.s2,
   color: theme.color.darkest,
-  textTransform: 'capitalize',
 
   flex: 1,
   height: 24,
@@ -32,13 +43,16 @@ const RefTitle = styled.header(({ theme }) => ({
   lineHeight: '24px',
 }));
 
-const Wrapper = styled.div({
+const Wrapper = styled.div<{ isMain: boolean }>(({ isMain }) => ({
   position: 'relative',
   marginLeft: -20,
   marginRight: -20,
-});
+  marginTop: isMain ? undefined : 4,
+}));
 
 export const Ref: FunctionComponent<RefType & RefProps> = (ref) => {
+  const [isExpanded, setIsExpanded] = useState(true);
+
   const { stories, id: key, title = key, storyId, filter, isHidden = false, authUrl, error } = ref;
   const { dataSet, expandedSet, length, others, roots, setExpanded, selectedSet } = useDataset(
     stories,
@@ -58,19 +72,27 @@ export const Ref: FunctionComponent<RefType & RefProps> = (ref) => {
   return isHidden ? null : (
     <ExpanderContext.Provider value={combo}>
       {isMain ? null : (
-        <RefHead>
+        <RefHead
+          aria-label={`${isExpanded ? 'Hide' : 'Show'} ${title} stories`}
+          aria-expanded={isExpanded}
+          type="button"
+          onClick={() => setIsExpanded(!isExpanded)}
+        >
+          <Expander className="sidebar-ref-expander" depth={0} isExpanded={isExpanded} />
           <RefTitle title={title}>{title}</RefTitle>
           <RefIndicator {...ref} type={type} />
         </RefHead>
       )}
-      <Wrapper data-title={title}>
-        {type === 'auth' && <AuthBlock id={ref.id} authUrl={authUrl} />}
-        {type === 'error' && <ErrorBlock error={error} />}
-        {type === 'loading' && <LoaderBlock isMain={isMain} />}
-        {type === 'ready' && (
-          <ContentBlock {...{ others, dataSet, selectedSet, expandedSet, roots }} />
-        )}
-      </Wrapper>
+      {isExpanded && (
+        <Wrapper data-title={title} isMain={isMain}>
+          {type === 'auth' && <AuthBlock id={ref.id} authUrl={authUrl} />}
+          {type === 'error' && <ErrorBlock error={error} />}
+          {type === 'loading' && <LoaderBlock isMain={isMain} />}
+          {type === 'ready' && (
+            <ContentBlock {...{ others, dataSet, selectedSet, expandedSet, roots }} />
+          )}
+        </Wrapper>
+      )}
     </ExpanderContext.Provider>
   );
 };

lib/ui/src/components/sidebar/Tree/ListItem.tsx

@@ -9,7 +9,7 @@ export type ExpanderProps = ComponentProps<'span'> & {
   depth: number;
 };
 
-const Expander = styled.span<ExpanderProps>(
+export const Expander = styled.span<ExpanderProps>(
   ({ theme, depth }) => ({
     position: 'absolute',
     display: 'block',