#261: Implementation of Header Component

packages/ui/src/viewer-table/DictionaryHeader.tsx

@@ -20,61 +20,130 @@
  */
 
 /** @jsxImportSource @emotion/react */
-
 import { css } from '@emotion/react';
-import { ComponentType } from 'react';
-import colours from './styles/colours';
-
+import { useState } from 'react';
+import type { Theme } from '../theme';
 import { useThemeContext } from '../theme/ThemeContext';
+import colours from './styles/colours';
 
 export type DictionaryHeaderProps = {
 	name: string;
 	description?: string;
 	version?: string;
 };
 
-const DictionaryHeader: ComponentType<DictionaryHeaderProps> = ({ description, name }) => {
+const getChevronStyle = (isExpanded: boolean) => css`
+	margin-left: 4px;
+	${isExpanded && `transform: rotate(180deg);`}
+`;
+
+const linkStyle = (theme: Theme) => css`
+	${theme.typography?.subheading}
+	color: white;
+	cursor: pointer;
+	display: inline-flex;
+	align-items: center;
+
+	&:hover {
+		text-decoration: underline;
+	}
+`;
+
+// Was unable to find the appropriate font size for the version numbering in the current design system, that matches
+// Figma mockup so we are using something that is somewhat close with a hard coded font size
+
+const descriptionStyle = (theme: Theme) => css`
+	${theme.typography?.data}
+	font-size: 16px;
+	color: white;
+	margin: 0;
+	display: inline;
+`;
+
+const containerStyle = (theme: Theme) => css`
+	background-color: ${colours.accent1_1};
+	${theme.typography.heading}
+	display: flex;
+	margin-bottom: 1rem;
+	padding: 2.5rem;
+`;
+
+const rowLayoutStyle = css`
+	display: flex;
+	flex-direction: row;
+	width: 100%;
+`;
+
+const titleColumnStyle = css`
+	display: flex;
+	flex-direction: column;
+	flex: 1;
+	margin-right: 2rem;
+`;
+
+// Was unable to find the appropriate font size for the title in the current design system, that matches
+// Figma mockup so it is HARDCODED for now
+
+const titleStyle = css`
+	font-weight: 700;
+	font-size: 30px;
+	color: white;
+	line-height: 100%;
+	margin: 0;
+	margin-bottom: 0.5rem;
+`;
+
+// Was unable to find the appropriate font size for the version numbering in the current design system, that matches
+// Figma mockup so we are using something that is somewhat close
+
+const versionStyle = (theme: Theme) => css`
+	${theme.typography.data}
+	color: white;
+	font-size: 17px;
+`;
+
+const descriptionColumnStyle = css`
+	flex: 2;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+`;
+
+const DESCRIPTION_LENGTH_THRESHOLD = 140; // Chosen to display ~2-3 lines of text before truncation based on typical container width
+
+const DictionaryHeader = ({ name, description, version }: DictionaryHeaderProps) => {
 	const theme = useThemeContext();
+	const { ChevronDown } = theme.icons;
+	const [isExpanded, setIsExpanded] = useState(false);
+
+	// Determine if the description is long enough to need a toggle, based off of how many characters we want to show by default
+	// according to the figma styling
+	const needsToggle = description && description.length > DESCRIPTION_LENGTH_THRESHOLD;
+	// We want to show all the text if it is not long or if it is already expanded via state variable
+	const showFull = isExpanded || !needsToggle;
+	// Based off of showFull, we determine the text to show, either its the full description or a truncated version
+	const textToShow = showFull ? description : description.slice(0, DESCRIPTION_LENGTH_THRESHOLD) + '... ';
+
 	return (
-		<div
-			css={css`
-				background-color: ${colours.accent1_1};
-				${theme.typography.heading}
-				display: flex;
-				flex-direction: column;
-				width: 100%;
-				margin-bottom: 1rem;
-				padding: 2.5rem;
-				max-height: 10%;
-				align-items: flex-start;
-			`}
-		>
-			<div
-				css={css`
-					display: flex;
-					flex-direction: column;
-				`}
-			>
-				<h1
-					css={css`
-						font-weight: 700;
-						font-size: 40px;
-						color: white;
-						line-height: 100%;
-						margin: 0.5rem 0;
-					`}
-				>
-					{name}
-				</h1>
+		<div css={containerStyle(theme)} className="dictionary-header">
+			<div css={rowLayoutStyle}>
+				<div css={titleColumnStyle}>
+					<h1 css={titleStyle}>{name}</h1>
+					{version && <span css={versionStyle(theme)}>{version}</span>}
+				</div>
 				{description && (
-					<p
-						css={css`
-							color: white;
-							margin: 0;
-						`}
-					>
-						{description}
-					</p>
+					<div css={descriptionColumnStyle}>
+						<div>
+							<span css={descriptionStyle(theme)}>{textToShow}</span>
+							{needsToggle && (
+								<span css={linkStyle(theme)} onClick={() => setIsExpanded((prev) => !prev)}>
+									{' '}
+									{isExpanded ? 'Read less' : 'Show more'}
+									<ChevronDown style={getChevronStyle(isExpanded)} fill="white" width={10} height={10} />
+								</span>
+							)}
+						</div>
+					</div>
 				)}
 			</div>
 		</div>

packages/ui/stories/viewer-table/DictionaryHeader.stories.tsx

@@ -22,6 +22,10 @@ export const AllHeaderProperties: Story = {
 	args: { ...pick(biosampleDictionary, 'name', 'version', 'description') },
 };
 
+export const NoVersion: Story = {
+	// args: { name: sampleDictionary.name, version: sampleDictionary.name, description: sampleDictionary.description },
+	args: { ...pick(biosampleDictionary, 'name', 'description') },
+};
 export const NoDescription: Story = {
 	args: { ...pick(biosampleDictionary, 'name', 'version') },
 };
@@ -32,3 +36,10 @@ export const LongName: Story = {
 		name: 'This is a really really reallt reallty long dictionary name! wow!',
 	},
 };
+export const LongDescription: Story = {
+	args: {
+		...pick(biosampleDictionary, 'name', 'version', 'description'),
+		description:
+			'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.',
+	},
+};