feat(entity-list-item): added isSelected prop to entity list item, an…

…d it's corresponding style feat contentful#2077
mgueyraud · Jun 21, 2022 · 133d1f3 · 133d1f3
1 parent f94572d
commit 133d1f3
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 4 deletions.
diff --git a/packages/components/entity-list/src/EntityList.styles.ts b/packages/components/entity-list/src/EntityList.styles.ts
@@ -11,5 +11,13 @@ export const getEntityListStyles = () => ({
     borderBottom: 'none',
     borderRadius: tokens.borderRadiusMedium,
     overflow: 'hidden',
+    '& li:first-child': {
+      borderTopLeftRadius: tokens.borderRadiusMedium,
+      borderTopRightRadius: tokens.borderRadiusMedium,
+    },
+    '& li:last-child': {
+      borderBottomLeftRadius: tokens.borderRadiusMedium,
+      borderBottomRightRadius: tokens.borderRadiusMedium,
+    },
   }),
 });
diff --git a/packages/components/entity-list/src/EntityListItem/EntityListItem.styles.ts b/packages/components/entity-list/src/EntityListItem/EntityListItem.styles.ts
@@ -3,7 +3,7 @@ import tokens from '@contentful/f36-tokens';
 import { EntityListItemProps } from './EntityListItem';
 
 export const getEntityListItemStyles = () => ({
-  root: (props: Pick<EntityListItemProps, 'isDragActive'>) =>
+  root: (props: Pick<EntityListItemProps, 'isDragActive' | 'isSelected'>) =>
     css({
       display: 'flex',
       boxShadow: `inset 0 -1px 0 ${tokens.gray200}`,
@@ -18,8 +18,16 @@ export const getEntityListItemStyles = () => ({
         : {}),
 
       '&:hover': {
-        backgroundColor: tokens.gray100,
+        backgroundColor: props.isSelected ? tokens.blue100 : tokens.gray100,
       },
+      ...(props.isSelected
+        ? {
+            backgroundColor: tokens.blue100,
+            borderStyle: 'solid',
+            borderColor: tokens.colorPrimary,
+            borderWidth: 1,
+          }
+        : {}),
     }),
   card: css({
     display: 'flex',

diff --git a/packages/components/entity-list/src/EntityListItem/EntityListItem.tsx b/packages/components/entity-list/src/EntityListItem/EntityListItem.tsx
@@ -112,6 +112,10 @@ export interface EntityListItemProps extends CommonProps {
    * A boolean used to disable the CardActions
    */
   isActionsDisabled?: boolean;
+  /**
+   * Applies selected styles to the element
+   */
+  isSelected?: boolean;
 }
 
 export const EntityListItem = ({
@@ -134,6 +138,7 @@ export const EntityListItem = ({
   cardDragHandleProps,
   cardDragHandleComponent,
   isActionsDisabled = false,
+  isSelected = false,
   ...otherProps
 }: EntityListItemProps): React.ReactElement => {
   const styles = getEntityListItemStyles();
@@ -165,7 +170,7 @@ export const EntityListItem = ({
   return (
     <li
       {...otherProps}
-      className={cx(styles.root({ isDragActive }), className)}
+      className={cx(styles.root({ isDragActive, isSelected }), className)}
       data-test-id={testId}
     >
       {renderCardDragHandle()}

diff --git a/packages/components/entity-list/stories/EntityList.stories.tsx b/packages/components/entity-list/stories/EntityList.stories.tsx
@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useState } from 'react';
 import type { Meta, Story } from '@storybook/react/types-6-0';
 
 import { EntityList } from '../src';
@@ -36,6 +36,41 @@ export const Basic: Story<EntityListProps> = () => (
   </EntityList>
 );
 
+export const SelectableEntryListItems: Story<EntityListProps> = () => {
+  const [firstEntry, setFirstEntry] = useState(false);
+  const [secondEntry, setSecondEntry] = useState(false);
+  const [thirdEntry, setThirdEntry] = useState(false);
+
+  return (
+    <EntityList>
+      <EntityList.Item
+        title="Entry 1"
+        description="Description"
+        contentType="My content type"
+        status="published"
+        isSelected={firstEntry}
+        onClick={() => setFirstEntry(!firstEntry)}
+      />
+      <EntityList.Item
+        title="Entry 2"
+        description="Description"
+        contentType="My content type"
+        status="draft"
+        isSelected={secondEntry}
+        onClick={() => setSecondEntry(!secondEntry)}
+      />
+      <EntityList.Item
+        title="Entry 3"
+        description="Description"
+        contentType="My content type"
+        status="archived"
+        isSelected={thirdEntry}
+        onClick={() => setThirdEntry(!thirdEntry)}
+      />
+    </EntityList>
+  );
+};
+
 export const withDragHandle = () => (
   <EntityList>
     <EntityList.Item