Peppered deltadromeus: ResultItem fixes

lib/results-list.js

@@ -3,6 +3,8 @@ import PropTypes from 'prop-types';
 import styled, { css } from 'styled-components';
 import { onArrowKeys } from './keyboard-navigation';
 import { UnstyledButton } from './button';
+import { Icon } from './icon';
+
 import { code, CodeExample, PropsDefinition, Prop } from './story-utils';
 
 const ScrollContainer = styled.div`
@@ -21,7 +23,12 @@ const ResultsListContainer = styled.ul`
   list-style-type: none;
 `;
 
-const ResultItemWrap = styled.li``;
+const ResultItemWrap = styled.li`
+  border-bottom: 1px solid var(--colors-border);
+  &:last-of-type {
+    border-bottom: none;
+  }
+`;
 
 export const ResultsList = React.forwardRef(({ scroll, value, options, onChange, onKeyDown, children, ...props }, ref) => {
   const refs = React.useRef([]);
@@ -88,10 +95,22 @@ export const ResultInfo = styled.span.attrs(() => ({ 'data-module': 'ResultInfo'
   width: 100%;
 `;
 
-export const ResultName = styled.span.attrs(() => ({ 'data-module': 'ResultName' }))`
+export const ResultNameBase = styled.span.attrs(() => ({ 'data-module': 'ResultName' }))`
   font-size: var(--fontSizes-small);
 `;
 
+const NameIcon = styled(Icon)`
+  margin-right: 5px;
+  vertical-align: baseline;
+`;
+
+export const ResultName = ({ isPrivate, children, ...props }) => (
+  <ResultNameBase {...props}>
+    {isPrivate && <NameIcon icon="private" alt="private" />}
+    {children}
+  </ResultNameBase>
+);
+
 export const ResultDescription = styled.span.attrs(() => ({ 'data-module': 'ResultDescription' }))`
   display: block;
   color: var(--colors-secondary);
@@ -111,7 +130,7 @@ export const ResultItem = styled.span.attrs(() => ({ 'data-module': 'ResultItem'
   width: 100%;
   font-size: var(--fontSizes-normal);
   color: var(--colors-primary);
-  background-color: var(--colors-background);
+  background-color: ${props => props.isPrivate ? "var(--colors-private-background);" : "var(--colors-background);"};
   position: relative;
   padding: var(--space-1);
   text-decoration: none;
@@ -141,19 +160,16 @@ export const ResultItem = styled.span.attrs(() => ({ 'data-module': 'ResultItem'
     color: var(--colors-selected-text);
     background-color: var(--colors-selected-background);
   }
-
-  ${ResultItemWrap} + ${ResultItemWrap} {
-    border-top: 1px solid var(--colors-border);
-  }
 `;
 
 ResultItem.defaultProps = {
   as: UnstyledButton,
 };
 
 const resultOptions = [
-  { id: 1, domain: 'power-passenger', description: 'take 2 on glitch component library' },
-  { id: 2, domain: 'fan-coal', description: 'The Glitch community site' },
+  { id: 1, domain: 'power-passenger', description: 'take 2 on glitch component library', private: false },
+  { id: 2, domain: 'fan-coal', description: 'this one is yellow because we are pretending it is a private project', private: true },
+  { id: 3, domain: 'peppered-deltadromeus', description: 'this is a remix of shared components', private: false },
 ];
 
 const Container = styled.div`
@@ -172,9 +188,13 @@ export const StoryResultsList = () => {
         {code`
           <ResultsList value={value} onChange={onChange} options={resultOptions}>
             {({ item, buttonProps }) => (
-              <ResultItem onClick={() => addProjectToCollection(item.id)} {...buttonProps}>
+              <ResultItem 
+                onClick={() => addProjectToCollection(item.id)} 
+                isPrivate={item.private}
+                {...buttonProps}
+              >
                 <ResultInfo>
-                  <ResultName>{item.name}</ResultName>
+                  <ResultName isPrivate={item.private}>{item.name}</ResultName>
                   <ResultDescription>{item.description}</ResultDescription>
                 </ResultInfo>
               </ResultItem>
@@ -210,9 +230,9 @@ export const StoryResultsList = () => {
       <Container>
         <ResultsList value={value} onChange={(id) => onChange(id)} options={resultOptions}>
           {({ item, buttonProps }) => (
-            <ResultItem as="a" href={`https://glitch.com/~${item.domain}`} {...buttonProps}>
+            <ResultItem as="a" href={`https://glitch.com/~${item.domain}`} isPrivate={item.private} {...buttonProps}>
               <ResultInfo>
-                <ResultName>{item.domain}</ResultName>
+                <ResultName isPrivate={item.private}>{item.domain}</ResultName>
                 {item.description && <ResultDescription>{item.description}</ResultDescription>}
               </ResultInfo>
             </ResultItem>

lib/stories.js

@@ -134,11 +134,11 @@ const AppContainer = () => {
     <>
     <Wrapper>
       <Nav>
-        {modules.map((module, i) => (
+        {modules.map((module) => (
           Object.entries(module).map(
             ([name], i) => 
               (name.startsWith('Story') && !name.includes('_')) && (
-                <NavLink href={`#${name}`}>
+                <NavLink href={`#${name}`} key={name+i}>
                   {name.replace(/_/g, ' ').replace('Story', '')}
                 </NavLink>
               )