feat: Accordion.Item pointer interactions and new variants (#77)

packages/fuselage/src/components/Accordion/Item.js

@@ -15,6 +15,7 @@ export const Item = React.forwardRef(function Item({
   expanded,
   tabIndex = 0,
   title,
+  noncollapsible = !title,
   onToggle,
   onToggleEnabled,
   ...props
@@ -33,6 +34,8 @@ export const Item = React.forwardRef(function Item({
       return;
     }
 
+    event.currentTarget.blur();
+
     if (onToggle) {
       return onToggle.call(event.currentTarget, event);
     }
@@ -65,24 +68,27 @@ export const Item = React.forwardRef(function Item({
   };
 
   return <StyledAccordionItem theme={theme} {...props}>
-    <Bar
+    {title && <Bar
       aria-checked={expanded || internalExpanded ? 'true' : 'false'}
       className={classNames.bar}
       disabled={disabled}
       expanded={expanded || internalExpanded}
+      noncollapsible={noncollapsible}
       ref={ref}
       role='switch'
-      tabIndex={!disabled ? tabIndex : undefined}
+      tabIndex={!disabled && !noncollapsible ? tabIndex : undefined}
       theme={theme}
-      onClick={handleClick}
-      onKeyDown={handleKeyDown}
+      onClick={noncollapsible ? undefined : handleClick}
+      onKeyDown={noncollapsible ? undefined : handleKeyDown}
     >
       <Title className={classNames.bar} theme={theme}>{title}</Title>
-      {(disabled || onToggleEnabled)
+      {!noncollapsible && <>
+        {(disabled || onToggleEnabled)
           && <ToggleSwitch checked={!disabled} onClick={handleToggleClick} onChange={onToggleEnabled} />}
-      <Icon name={'arrow-down'} />
-    </Bar>
-    <Panel className={classNames.panel} expanded={expanded || internalExpanded} theme={theme}>
+        <Icon name={'arrow-down'} />
+      </>}
+    </Bar>}
+    <Panel className={classNames.panel} expanded={noncollapsible || expanded || internalExpanded} theme={theme}>
       {children}
     </Panel>
   </StyledAccordionItem>;
@@ -100,7 +106,7 @@ Item.propTypes = {
   disabled: PropTypes.bool,
   expanded: PropTypes.bool,
   tabIndex: PropTypes.number,
-  title: PropTypes.string.isRequired,
+  title: PropTypes.string,
   onToggle: PropTypes.func,
   onToggleEnabled: PropTypes.func,
 };

packages/fuselage/src/components/Accordion/Item.stories.mdx

@@ -1,5 +1,6 @@
 import { action } from '@storybook/addon-actions';
 import { Meta, Preview, Props, Story } from '@storybook/addon-docs/blocks';
+import LinkTo from '@storybook/addon-links/react';
 
 import { Accordion, Paragraph } from '../..';
 
@@ -33,6 +34,34 @@ A collapsible panel.
   </Story>
 </Preview>
 
+## Noncollapsible
+
+<Preview>
+  <Story name='Noncollapsible'>
+    <Accordion>
+      <Accordion.Item title='Item' noncollapsible>
+        <Paragraph>Content</Paragraph>
+      </Accordion.Item>
+    </Accordion>
+  </Story>
+</Preview>
+
+### Without title
+
+When the `title` prop is omitted, its implied that
+the <LinkTo kind='Containers|Accordion/Accordion.Item' story='Default Story'>`Accordion.Item`</LinkTo>
+is <LinkTo kind='Containers|Accordion/Accordion.Item' story='Noncollapsible'>noncollapsible</LinkTo> too.
+
+<Preview>
+  <Story name='Without Title'>
+    <Accordion>
+      <Accordion.Item>
+        <Paragraph>Content</Paragraph>
+      </Accordion.Item>
+    </Accordion>
+  </Story>
+</Preview>
+
 ## With togglable state
 
 ### Enabled

packages/fuselage/src/components/Accordion/styles.js

@@ -40,7 +40,7 @@ export const Bar = styled.div`
 
   text-align: left;
 
-  ${ ({ disabled }) => !disabled && css`
+  ${ ({ disabled, noncollapsible }) => !disabled && !noncollapsible && css`
     ${ clickable }
   ` }
 
@@ -56,16 +56,20 @@ export const Bar = styled.div`
     ` }
   }
 
-  &.hover,
-  &:hover {
-    background-color: ${ colors.dark100 };
-  }
-
-  &.focus,
-  &:focus {
-    border-color: ${ colors.blue500 };
-    box-shadow: 0 0 0 ${ toRem(6) } ${ colors.blue100 };
-  }
+  ${ ({ disabled, noncollapsible }) => !disabled && !noncollapsible && css`
+    &.focus,
+    &:focus {
+      border-color: ${ colors.blue500 };
+      box-shadow: 0 0 0 ${ toRem(6) } ${ colors.blue100 };
+    }
+
+    &.hover,
+    &:hover {
+      border-color: ${ colors.dark300 } transparent transparent;
+      background-color: ${ colors.dark100 };
+      box-shadow: none;
+    }
+  ` }
 
   ${ ({ disabled, theme }) => disabled && css`
     color: ${ theme.textColors.disabled };