feat: add primary prop to ListItem

Author: fsilvaco

package-lock.json

@@ -23,7 +23,7 @@ export default {
 export const Default = () => (
   <>
     <List>
-      <ListItem>Photos</ListItem>
+      <ListItem primary>Photos</ListItem>
       <ListItem as='a' href='https://expensive.toys' target='_blank'>
         Link
       </ListItem>
@@ -41,7 +41,9 @@ export const Default = () => (
       <ListItem disabled>Razor Leaf</ListItem>
     </List>
     <List>
-      <ListItem size='sm'>View</ListItem>
+      <ListItem primary size='sm'>
+        View
+      </ListItem>
       <Divider />
       <ListItem size='sm'>Paste</ListItem>
       <ListItem size='sm'>Paste Shortcut</ListItem>

src/List/List.stories.js

@@ -22,7 +22,7 @@ export const StyledListItem = styled.li`
   line-height: ${props => blockSizes[props.size]};
   color: ${({ theme }) => theme.materialText};
   pointer-events: ${({ isDisabled }) => (isDisabled ? 'none' : 'auto')};
-
+  font-weight: ${({ primary }) => (primary ? 'bold' : 'normal')};
   &:hover {
     ${({ theme, isDisabled }) =>
       !isDisabled &&
@@ -44,6 +44,7 @@ const ListItem = React.forwardRef(function ListItem(props, ref) {
     square,
     children,
     onClick,
+    primary,
     ...otherProps
   } = props;
   // let tabIndex;
@@ -57,6 +58,7 @@ const ListItem = React.forwardRef(function ListItem(props, ref) {
       isDisabled={disabled}
       square={square}
       onClick={disabled ? undefined : onClick}
+      primary={primary}
       // tabIndex={tabIndex}
       role='menuitem'
       ref={ref}
@@ -73,8 +75,8 @@ ListItem.defaultProps = {
   size: 'lg',
   square: false,
   onClick: null,
-
-  children: null
+  children: null,
+  primary: false
   // tabIndex: undefined
 };
 
@@ -83,7 +85,8 @@ ListItem.propTypes = {
   disabled: propTypes.bool,
   square: propTypes.bool,
   children: propTypes.node,
-  onClick: propTypes.func
+  onClick: propTypes.func,
+  primary: propTypes.bool
   // tabIndex: propTypes.number
 };
 

src/ListItem/ListItem.js

@@ -5,9 +5,9 @@ menu: Components
 
 import { Playground, Props } from 'docz';
 
-import ListItem from './ListItem'
-import List from '../List/List'
-import Divider from '../Divider/Divider'
+import ListItem from './ListItem';
+import List from '../List/List';
+import Divider from '../Divider/Divider';
 
 # ListItem
 
@@ -83,6 +83,16 @@ import Divider from '../Divider/Divider'
   </List>
 </Playground>
 
+#### Primary
+
+<Playground>
+  <List>
+    <ListItem primary>Item 1</ListItem>
+    <ListItem>Item 2</ListItem>
+    <ListItem>Item 3</ListItem>
+  </List>
+</Playground>
+
 ## API
 
 ### Import