feat: 🎸 added type divider to <Text />, refact. empty list

CaritasDeutschland · Mar 5, 2021 · 3c494aa · 3c494aa
1 parent e177518
commit 3c494aa
Show file tree

Hide file tree

Showing 5 changed files with 38 additions and 42 deletions.
diff --git a/src/components/sessionsList/SessionsList.tsx b/src/components/sessionsList/SessionsList.tsx
@@ -1,6 +1,5 @@
 import * as React from 'react';
 import { useContext, useState, useEffect } from 'react';
-import { SessionListEmptyState } from './SessionsListEmptyState';
 import {
 	typeIsUser,
 	typeIsTeamSession,
@@ -51,6 +50,7 @@ import {
 	MAX_ITEMS_TO_SHOW_WELCOME_ILLUSTRATION,
 	SCROLL_PAGINATE_THRESHOLD
 } from './sessionsListConfig';
+import { Text } from '../text/Text';
 
 export const SessionsList: React.FC = () => {
 	let listRef: React.RefObject<HTMLDivElement> = React.createRef();
@@ -463,11 +463,11 @@ export const SessionsList: React.FC = () => {
 
 	return (
 		<div className="sessionsList__innerWrapper">
-			{showFilter ? (
+			{showFilter && (
 				<div className="sessionsList__selectWrapper">
 					<SelectDropdown {...selectDropdown} />
 				</div>
-			) : null}
+			)}
 			<div
 				className={`sessionsList__scrollContainer ${
 					showFilter ? 'sessionsList__scrollContainer--hasFilter' : ''
@@ -495,27 +495,32 @@ export const SessionsList: React.FC = () => {
 					data-cy="sessions-list-items-wrapper"
 				>
 					{activeCreateChat &&
-					typeIsSession(type) &&
-					hasUserAuthority(AUTHORITIES.CREATE_NEW_CHAT, userData) ? (
-						<SessionListCreateChat />
-					) : null}
+						typeIsSession(type) &&
+						hasUserAuthority(
+							AUTHORITIES.CREATE_NEW_CHAT,
+							userData
+						) && <SessionListCreateChat />}
 					{sessionsData &&
 					sessionsData[getSessionsDataKeyForSessionType(type)] &&
-					!hasNoSessions ? (
-						sessionsData[
-							getSessionsDataKeyForSessionType(type)
-						].map((item: ListItemInterface, index) => (
-							<SessionListItemComponent
-								key={index}
-								type={type}
-								id={getChatItemForSession(item).id}
-							/>
-						))
-					) : !activeCreateChat ? (
-						<SessionListEmptyState />
-					) : null}
-					{loadingWithOffset ? <SessionsListSkeleton /> : null}
-					{isReloadButtonVisible ? (
+					!hasNoSessions
+						? sessionsData[
+								getSessionsDataKeyForSessionType(type)
+						  ].map((item: ListItemInterface, index) => (
+								<SessionListItemComponent
+									key={index}
+									type={type}
+									id={getChatItemForSession(item).id}
+								/>
+						  ))
+						: !activeCreateChat && (
+								<Text
+									className="sessionsList--empty"
+									text={translate('sessionList.empty')}
+									type="divider"
+								/>
+						  )}
+					{loadingWithOffset && <SessionsListSkeleton />}
+					{isReloadButtonVisible && (
 						<div className="sessionsList__reloadWrapper">
 							<Button
 								item={{
@@ -529,7 +534,7 @@ export const SessionsList: React.FC = () => {
 								buttonHandle={handleReloadButton}
 							/>
 						</div>
-					) : null}
+					)}
 				</div>
 			</div>
 		</div>

diff --git a/src/components/sessionsList/SessionsListEmptyState.tsx b/src/components/sessionsList/SessionsListEmptyState.tsx
diff --git a/src/components/sessionsList/sessionsList.styles.scss b/src/components/sessionsList/sessionsList.styles.scss
@@ -190,12 +190,8 @@ $headerHeight: 80px;
 	}
 
 	&--empty {
-		padding-top: 20px;
+		margin-top: $grid-base-four;
 		text-align: center;
-		font-family: $font-family-slab-regular;
-		font-size: $font-size-secondary;
-		line-height: $line-height-secondary;
-		color: $light-grey;
 	}
 
 	&__itemsWrapper {

diff --git a/src/components/text/Text.tsx b/src/components/text/Text.tsx
@@ -9,7 +9,8 @@ export interface TextProps {
 		| 'standard'
 		| 'infoLargeStandard'
 		| 'infoLargeAlternative'
-		| 'infoSmall';
+		| 'infoSmall'
+		| 'divider';
 }
 
 export enum LABEL_TYPES {

diff --git a/src/components/text/text.styles.scss b/src/components/text/text.styles.scss
@@ -27,6 +27,13 @@
 		color: $tertiary;
 	}
 
+	&__divider {
+		font-family: $font-family-slab-regular;
+		font-size: $font-size-secondary;
+		line-height: $line-height-secondary;
+		color: $light-grey;
+	}
+
 	&__label {
 		font-family: $font-family-medium;
 		font-weight: $font-weight-medium;