@griddo/ax 11.14.2 → 11.14.3

package/config/jest/setup.js

@@ -16,10 +16,16 @@ module.exports = () => {
 
 window.matchMedia =
 	window.matchMedia ||
-	function () {
-		return {
-			matches: false,
-			addListener: function () {},
-			removeListener: function () {},
-		};
-	};
+	(() => ({
+		matches: false,
+		addListener: function () {},
+		removeListener: function () {},
+	}));
+
+class ResizeObserverMock {
+	observe() {}
+	unobserve() {}
+	disconnect() {}
+}
+
+global.ResizeObserver = ResizeObserverMock;

package/package.json

@@ -1,7 +1,7 @@
 {
 	"name": "@griddo/ax",
 	"description": "Griddo Author Experience",
-	"version": "11.14.2",
+	"version": "11.14.3",
 	"authors": [
 		"Álvaro Sánchez' <alvaro.sanches@secuoyas.com>",
 		"Diego M. Béjar <diego.bejar@secuoyas.com>",
@@ -219,5 +219,5 @@
 	"publishConfig": {
 		"access": "public"
 	},
-	"gitHead": "92256859b4b631e6fbd04d6ab48804b42b293614"
+	"gitHead": "4367bb007b546db463c1a4c03a835af9d8b59709"
 }

package/src/__tests__/components/KeywordsPreviewModal/KeywordsPreviewModal.test.tsx

@@ -71,7 +71,8 @@ describe("KeywordsPreviewModal component rendering", () => {
 		renderComponent({ ...defaultProps, isOpen: true, keywordsFilter: ["seo"] });
 
 		expect(screen.getByText("Show keyword:")).toBeTruthy();
-		expect(screen.getByText("seo")).toBeTruthy();
+		const seoElements = screen.getAllByText("seo");
+		expect(seoElements.length).toBeGreaterThan(0);
 	});
 
 	it("should not render the filter section when keywordsFilter is empty", () => {
@@ -87,8 +88,8 @@ describe("KeywordsPreviewModal component events", () => {
 
 		renderComponent({ ...defaultProps, isOpen: true, toggleModal: toggleModalMock });
 
-		const closeButton = screen.getByTestId("icon-action-component");
-		fireEvent.click(closeButton);
+		const closeButtons = screen.getAllByTestId("icon-action-component");
+		fireEvent.click(closeButtons[0]);
 		expect(toggleModalMock).toBeCalled();
 	});
 

package/src/components/CategoryCell/index.tsx

@@ -1,5 +1,7 @@
-import React, { useEffect } from "react";
+import { useEffect } from "react";
+
 import { ElementsTooltip } from "@ax/components";
+
 import * as S from "./style";
 
 const CategoryCell = (props: ICategoryCellProps): JSX.Element => {

package/src/components/ElementsTooltip/index.tsx

@@ -66,11 +66,15 @@ const ElementsTooltip = (props: IElementsTooltipProps): JSX.Element => {
 
 	if (!elements) return <></>;
 
-	const visibleElements = elements.slice(0, defaultElements);
-	const remainingElements = elements.length - defaultElements;
+	const filteredElements = elements.filter((element) => element !== null && element !== "");
+
+	if (filteredElements.length === 0) return <></>;
+
+	const visibleElements = filteredElements.slice(0, defaultElements);
+	const remainingElements = filteredElements.length - defaultElements;
 
 	const elementsRows: string[][] = [];
-	elements.forEach((element, idx) => {
+	filteredElements.forEach((element, idx) => {
 		const row = Math.floor(idx / elementsPerRow);
 		const isNewRow = idx % elementsPerRow === 0;
 		elementsRows[row] = isNewRow ? [element] : [...elementsRows[row], element];
@@ -91,7 +95,7 @@ const ElementsTooltip = (props: IElementsTooltipProps): JSX.Element => {
 		<>
 			<S.Wrapper data-testid="elements-wrapper">
 				{visibleElements.map((fullElement, idx) => {
-					const element = defaultElements === 1 && maxChar ? trimText(fullElement, maxChar) : fullElement;
+					const element = maxChar ? trimText(fullElement, maxChar) : fullElement;
 					const color = defaultColor || colors?.[element];
 
 					return (

package/src/components/ErrorPage/index.tsx

@@ -40,7 +40,9 @@ const ErrorPage = (props: IProps): JSX.Element => {
 			title: "Something went wrong",
 			description: <>Try refreshing the page, or try again later</>,
 			buttonText: "Refresh page",
-			buttonAction: () => history.push("/logout"),
+			buttonAction: () => {
+				window.location.href = "/logout";
+			},
 		},
 		wrongEditor: {
 			icon: "working",

package/src/components/FilterTagsBar/index.tsx

@@ -1,5 +1,5 @@
-import React from "react";
-import { IQueryValue } from "@ax/types";
+import type { IQueryValue } from "@ax/types";
+
 import Button from "../Button";
 
 import * as S from "./style";
@@ -37,7 +37,7 @@ const FilterTagsBar = (props: IFilterTagsBarProps): JSX.Element => {
 			<S.TagList>
 				{tags.map((tag: string, index: number) => {
 					const handleDeleteTag = () => deleteTag(tag);
-					return <S.StyledTag key={index} text={tag} color="#FFFFFF" onDeleteAction={handleDeleteTag} />;
+					return <S.StyledTag key={index} text={tag} color="#FFFFFF" maxChar={30} onDeleteAction={handleDeleteTag} />;
 				})}
 			</S.TagList>
 			<S.ButtonWrapper>

package/src/components/HeadingsPreviewModal/utils.tsx

@@ -1,3 +1,4 @@
+import { GRIDDO_ID } from "@ax/constants";
 import type { HeadingFilter, HeadingLevel, HeadingNode } from "@ax/types";
 
 const MAX_HEADING_LENGTH = 70;
@@ -150,7 +151,7 @@ const analyzeHeadings = (headings: HeadingNode[], isFiltering = false): IHeading
 
 const parseHeadingsTree = (html: HTMLDivElement): HeadingNode[] => {
 	const frameObject = html.querySelector<HTMLIFrameElement>(".frame-content");
-	const frameContent = frameObject?.contentWindow?.document.getElementById("___griddo") as HTMLElement;
+	const frameContent = frameObject?.contentWindow?.document.getElementById(GRIDDO_ID) as HTMLElement;
 
 	if (!frameContent) {
 		return [];

package/src/components/KeywordsPreviewModal/atoms.tsx

@@ -1,7 +1,7 @@
 import { useState } from "react";
 
+import { FieldsBehavior, Modal } from "@ax/components";
 import type { IModal } from "@ax/types";
-import { Modal, FieldsBehavior } from "@ax/components";
 
 import * as S from "./style";
 
@@ -39,7 +39,7 @@ const AddKeywordsModal = (props: IAddKeywordsModal) => {
 			secondaryAction={secondaryModalAction}
 			mainAction={mainModalAction}
 			size="S"
-			height={282}
+			height={288}
 		>
 			<S.ModalContent>
 				<FieldsBehavior

package/src/components/KeywordsPreviewModal/index.tsx

@@ -69,16 +69,16 @@ const KeywordsPreviewModal = (props: IKeywordsPreviewProps) => {
 						)}
 						<S.KeywordsListWrapper>
 							{keywords.length === 0 && <S.StyledSummaryButton />}
-							{Object.keys(keywordCounts).map((key, index) => {
-								const isSelected = keywordsFilter.includes(key);
+							{keywords.map((keyword, index) => {
+								const isSelected = keywordsFilter.includes(keyword);
 								return (
 									<KeywordItem
-										keyword={key}
-										count={keywordCounts[key]}
+										keyword={keyword}
+										count={keywordCounts[keyword] ?? 0}
 										isSelected={isSelected}
-										onClick={handleAddTag(key)}
+										onClick={handleAddTag(keyword)}
 										deleteKeyword={handleDeleteKeyword}
-										key={`${key}-${index}`}
+										key={`${keyword}-${index}`}
 									/>
 								);
 							})}

package/src/components/KeywordsPreviewModal/utils.tsx

@@ -1,16 +1,18 @@
+import { GRIDDO_ID } from "@ax/constants";
+
 const countKeywords = (html: HTMLDivElement, keywords: string[]) => {
 	const frameObject = html.querySelector<HTMLIFrameElement>(".frame-content");
-	const frameContent = frameObject?.contentWindow?.document.getElementById("___griddo") as HTMLElement;
+	const frameContent = frameObject?.contentWindow?.document.getElementById(GRIDDO_ID) as HTMLElement;
 
 	if (!frameContent) {
 		return {};
 	}
 
-	const htmlContent = frameContent.innerText.toLowerCase();
+	const htmlContent = frameContent.innerText.toLowerCase().normalize("NFC");
 	const keywordCounts: Record<string, number> = {};
 
 	keywords.forEach((keyword) => {
-		const lowerKeyword = keyword.toLowerCase();
+		const lowerKeyword = keyword.toLowerCase().normalize("NFC");
 		const regex = new RegExp(lowerKeyword.replace(/[.*+?^${}()|[\]\\]/g, "\\$&"), "gi");
 		const matches = htmlContent.match(regex);
 		keywordCounts[keyword] = matches ? matches.length : 0;

package/src/components/Modal/style.tsx

@@ -26,6 +26,11 @@ const getHeight = (size: string | undefined) => {
 	}
 };
 
+const getModalHeight = (height?: number | string, size?: string) => {
+	const heightProp = typeof height === "number" ? `${height}px` : height;
+	return height !== undefined ? heightProp : getHeight(size);
+};
+
 const ModalOverlay = styled.div<{ isChild?: boolean }>`
   position: fixed;
   top: 0;
@@ -51,11 +56,6 @@ const ModalWrapper = styled.div<{ isChild?: boolean }>`
   outline: 0;
 `;
 
-function getModalHeight(height?: number | string, size?: string) {
-	const heightProp = typeof height === "number" ? `${height}px` : height;
-	return height !== undefined ? heightProp : getHeight(size);
-}
-
 const Modal = styled.div<{ size?: string; height?: number | string }>`
   z-index: 100;
   display: flex;

package/src/components/TableFilters/CheckGroupFilter/index.tsx

@@ -1,7 +1,8 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
+
 import { CheckGroup, FloatingMenu, Icon, ListTitle, SearchField } from "@ax/components";
 import { areEquals } from "@ax/helpers";
-import { IFilterValue, IQueryValue } from "@ax/types";
+import type { IFilterValue, IQueryValue } from "@ax/types";
 
 import * as S from "./style";
 

package/src/components/TableFilters/LiveFilter/index.tsx

@@ -1,9 +1,9 @@
-import React, { useState, useEffect } from "react";
+import { useEffect, useState } from "react";
 
-import { CheckGroup, Icon, FloatingMenu, ListTitle } from "@ax/components";
 import { checkgroups } from "@ax/api";
+import { CheckGroup, FloatingMenu, Icon, ListTitle } from "@ax/components";
 import { areEquals, isReqOk } from "@ax/helpers";
-import { IFilterValue, IPageLiveStatus, IQueryValue } from "@ax/types";
+import type { IFilterValue, IPageLiveStatus, IQueryValue } from "@ax/types";
 
 import * as S from "./style";
 
@@ -54,7 +54,7 @@ const LiveFilter = (props: ILiveFilterProps): JSX.Element => {
 							title: item.title,
 							icon: item.status,
 						};
-						if ((filterOptions && filterOptions.includes(newFilter.value)) || !filterOptions) {
+						if (filterOptions?.includes(newFilter.value) || !filterOptions) {
 							filters.push(newFilter);
 						}
 					});

package/src/components/TableFilters/SiteFilter/index.tsx

@@ -1,9 +1,9 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
+import { selects } from "@ax/api";
 import { CheckGroupFilter } from "@ax/components";
 import { isReqOk } from "@ax/helpers";
-import { selects } from "@ax/api";
-import { IFilterValue, IQueryValue } from "@ax/types";
+import type { IFilterValue, IQueryValue } from "@ax/types";
 
 const SiteFilter = (props: ISiteFilterProps): JSX.Element => {
 	const {
@@ -47,15 +47,14 @@ const SiteFilter = (props: ISiteFilterProps): JSX.Element => {
 	useEffect(() => {
 		getSelectSites()
 			.then((items) => {
-				items &&
-					items.forEach((item: { value: string; label: string }) => {
-						const newFilter = {
-							name: item.value,
-							value: item.value,
-							title: item.label,
-						};
-						filters.push(newFilter);
-					});
+				items?.forEach((item: { value: string; label: string }) => {
+					const newFilter = {
+						name: item.value,
+						value: item.value,
+						title: item.label,
+					};
+					filters.push(newFilter);
+				});
 
 				setOptions(filters);
 			})

package/src/components/TableFilters/TranslationsFilter/index.tsx

@@ -1,8 +1,8 @@
-import React, { useEffect, useState } from "react";
+import { useEffect, useState } from "react";
 
 import { CheckGroup, FloatingMenu, Icon, ListTitle } from "@ax/components";
 import { areEquals } from "@ax/helpers";
-import { IFilterValue, IQueryValue } from "@ax/types";
+import type { IFilterValue, IQueryValue } from "@ax/types";
 
 import * as S from "./style";
 

package/src/components/TableFilters/TranslationsFilter/style.tsx

@@ -1,7 +1,7 @@
-import React from "react";
-import styled from "styled-components";
 import { Header } from "@ax/components/TableList/style";
 
+import styled from "styled-components";
+
 const Translations = styled((props) => <Header {...props} />)<{ isActive: boolean }>`
   width: 115px;
   justify-content: center;

package/src/components/Tag/index.tsx

@@ -3,7 +3,14 @@ import { Icon } from "@ax/components";
 import * as S from "./style";
 
 const Tag = (props: ITagProps): JSX.Element => {
-	const { type, text, color, icon, textColor, rounded = true, onDeleteAction, className, small } = props;
+	const { type, text, color, icon, textColor, rounded = true, onDeleteAction, className, small, maxChar } = props;
+
+	const truncateText = (str: string, max: number) => {
+		if (str.length <= max) return str;
+		return `${str.slice(0, max)}...`;
+	};
+
+	const displayText = maxChar && text ? truncateText(text, maxChar) : text;
 
 	const handleClick = () => {
 		if (onDeleteAction) {
@@ -22,27 +29,27 @@ const Tag = (props: ITagProps): JSX.Element => {
 	switch (type) {
 		case "status":
 			return (
-				<S.TagStatus className={className} data-testid="tag-status">
+				<S.TagStatus className={className} data-testid="tag-status" title={text || ""}>
 					<S.Bullet color={color} />
-					{text}
+					{displayText}
 				</S.TagStatus>
 			);
 		case "square":
 			return (
-				<S.TagSquare color={color} textColor={textColor} className={className} data-testid="tag-square">
+				<S.TagSquare color={color} textColor={textColor} className={className} data-testid="tag-square" title={text || ""}>
 					{icon && (
 						<S.IconTag>
 							<Icon name={icon} size="16" />
 						</S.IconTag>
 					)}
-					<div>{text}</div>
+					<div>{displayText}</div>
 				</S.TagSquare>
 			);
 		default:
 			return (
-				<S.TagFixed color={color} rounded={rounded} small={small} className={className} data-testid="tag-fixed">
+				<S.TagFixed color={color} rounded={rounded} small={small} className={className} data-testid="tag-fixed" title={text || ""}>
 					<S.TagText>
-						<S.Title data-testid="tag-fixed-title">{text}</S.Title>
+						<S.Title data-testid="tag-fixed-title">{displayText}</S.Title>
 						{deleteIcon}
 					</S.TagText>
 				</S.TagFixed>
@@ -60,6 +67,7 @@ export interface ITagProps {
 	onDeleteAction?: () => void;
 	className?: string;
 	small?: boolean;
+	maxChar?: number;
 }
 
 export default Tag;

package/src/components/TruncatedTooltip/index.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+
+import { Tooltip } from "@ax/components";
+
+const TruncatedTooltip = ({ content, children, ...props }: any) => {
+	const [isTruncated, setIsTruncated] = React.useState(false);
+	const elementRef = React.useRef<HTMLElement | null>(null);
+
+	const checkTruncation = React.useCallback(() => {
+		if (elementRef.current) {
+			const isTrunc = elementRef.current.scrollWidth > elementRef.current.clientWidth;
+			setIsTruncated(isTrunc);
+		}
+	}, []);
+
+	React.useEffect(() => {
+		const element = elementRef.current;
+		if (!element) return;
+
+		checkTruncation();
+
+		const observer = new ResizeObserver(() => {
+			checkTruncation();
+		});
+
+		observer.observe(element);
+
+		return () => {
+			observer.disconnect();
+		};
+	}, [checkTruncation]);
+
+	const ChildWithRef = React.cloneElement(children, {
+		ref: elementRef,
+	});
+
+	if (!isTruncated) {
+		return ChildWithRef;
+	}
+
+	return (
+		<Tooltip content={content} {...props}>
+			{ChildWithRef}
+		</Tooltip>
+	);
+};
+
+export default TruncatedTooltip;

package/src/components/index.tsx

@@ -125,6 +125,7 @@ import Tabs from "./Tabs";
 import Tag from "./Tag";
 import Toast from "./Toast";
 import Tooltip from "./Tooltip";
+import TruncatedTooltip from "./TruncatedTooltip";
 import UserRolesAndSites from "./UserRolesAndSites";
 
 export {
@@ -246,6 +247,7 @@ export {
 	Tooltip,
 	TranslateButton,
 	TranslationsFilter,
+	TruncatedTooltip,
 	TypeFilter,
 	UniqueCheck,
 	UrlField,

package/src/constants/index.ts

@@ -29,6 +29,8 @@ const VALID_DOCUMENT_FORMATS = ["pdf", "doc", "docx", "xls", "xlsx", "zip", "csv
 const VALID_VIDEO_FORMATS = ["mov", "mp4", "wmv", "avi", "webm", "mkv"];
 const VALID_FILE_FORMATS = [...VALID_DOCUMENT_FORMATS, ...VALID_VIDEO_FORMATS];
 
+const GRIDDO_ID = "___griddo" as const;
+
 export {
 	itemLabel,
 	type ItemLabel,
@@ -36,4 +38,5 @@ export {
 	VALID_DOCUMENT_FORMATS,
 	VALID_VIDEO_FORMATS,
 	VALID_FILE_FORMATS,
+	GRIDDO_ID,
 };

package/src/helpers/categoryColumns.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+
+import { CategoryCell } from "@ax/components";
+import { Cell } from "@ax/components/TableList/TableItem/style";
+import type { ISchemaField } from "@ax/types";
+
+import styled from "styled-components";
+
+const ColumnCell = styled(Cell)`
+	flex: 0 0 215px;
+	position: relative;
+	align-items: center;
+`;
+
+const buildCategoryColumns = (
+	categoryColumns: ISchemaField[],
+	activeColumns: string[],
+	contentData: Record<string, any> | undefined,
+	categoryColors: any,
+	addCategoryColors: (cats: string[]) => void,
+	onClick: () => void,
+) => {
+	return categoryColumns.map((col) => {
+		if (!activeColumns.includes(col.key)) {
+			return <React.Fragment key={col.key} />;
+		}
+
+		const type: any = contentData?.[col.key];
+
+		if (typeof type !== "object") {
+			return (
+				<ColumnCell key={col.key} onClick={onClick}>
+					{type}
+				</ColumnCell>
+			);
+		}
+
+		const categories: string[] = !type
+			? []
+			: Array.isArray(type)
+				? type.map((cat: any) => cat.label || cat.title)
+				: [type.label || type.title];
+
+		return (
+			<CategoryCell
+				key={col.key}
+				categories={categories}
+				categoryColors={categoryColors}
+				addCategoryColors={addCategoryColors}
+			/>
+		);
+	});
+};
+
+export { buildCategoryColumns, ColumnCell };

package/src/helpers/images.tsx

@@ -1,5 +1,7 @@
 import type { Area } from "react-easy-crop";
 
+import { GRIDDO_ID } from "@ax/constants";
+
 import { toBlob } from "html-to-image";
 
 const formatBytes = (bytes: number | null, decimals = 2) => {
@@ -65,7 +67,7 @@ const getImageFromHtml = async (html: HTMLDivElement, fileName: string): Promise
 
 const getImageFromIFrame = async (html: HTMLDivElement, fileName: string): Promise<File | null> => {
 	const frameOBject = html.querySelector<HTMLIFrameElement>(".frame-content");
-	const frameContentFirst = frameOBject?.contentWindow?.document.getElementById("___griddo")?.firstChild as HTMLElement;
+	const frameContentFirst = frameOBject?.contentWindow?.document.getElementById(GRIDDO_ID)?.firstChild as HTMLElement;
 	const frameContentId = frameOBject?.contentWindow?.document.getElementById("griddoFormThumb") as HTMLElement;
 
 	const frameContent = frameContentId || frameContentFirst;

package/src/helpers/index.tsx

@@ -1,4 +1,5 @@
 import { arrayInsert, isEmptyArray, moveArrayElement } from "./arrays";
+import { buildCategoryColumns } from "./categoryColumns";
 import {
 	areAllComponentsEmpty,
 	areEqual,
@@ -117,6 +118,7 @@ export {
 	areEqualDates,
 	areEquals,
 	arrayInsert,
+	buildCategoryColumns,
 	camelize,
 	capitalize,
 	compressImage,

package/src/modules/ActivityLog/ItemLog/EventItem/index.tsx

@@ -1,17 +1,19 @@
-import React, { useState } from "react";
+import type React from "react";
+import { useState } from "react";
 import { connect } from "react-redux";
 
-import { LogActivityDTO, LogContentDTO, LogContentTypeDTO } from "@griddo/api-types";
-import { Avatar, Tag, RestoreModal } from "@ax/components";
-import { useModal } from "@ax/hooks";
-import { pageEditorActions } from "@ax/containers/PageEditor";
+import { Avatar, RestoreModal, Tag, TruncatedTooltip } from "@ax/components";
 import { activityLogActions } from "@ax/containers/ActivityLog";
 import { navigationActions } from "@ax/containers/Navigation";
+import { pageEditorActions } from "@ax/containers/PageEditor";
 import { structuredDataActions } from "@ax/containers/StructuredData";
-import { IRootState } from "@ax/types";
+import { useModal } from "@ax/hooks";
+import type { IRootState } from "@ax/types";
+
+import type { LogActivityDTO, LogContentDTO, LogContentTypeDTO } from "@griddo/api-types";
 
-import DetailModal from "../../DetailModal";
 import { eventKey } from "../../constants";
+import DetailModal from "../../DetailModal";
 import { getContentTypeSchemaVersion, getPageSchemaVersion } from "../../utils";
 
 import * as S from "./style";
@@ -96,19 +98,24 @@ const EventItem = (props: IEventItemProps) => {
 					<S.AvatarWrapper>
 						<Avatar image={user.image} name={user.name || ""} />
 					</S.AvatarWrapper>
-					<S.Name>{user.name}</S.Name>
+					<S.Name>
+						<TruncatedTooltip content={user.name || ""} expanded top={-5}>
+							<S.Title>{user.name}</S.Title>
+						</TruncatedTooltip>
+					</S.Name>
 				</S.User>
 				<S.Time>{created.hour}</S.Time>
 				<S.Site>
 					<Tag
-						text={site && site.name ? site.name : "Global"}
+						text={site?.name ? site.name : "Global"}
 						type="square"
 						color={site ? undefined : "#C3F4FF"}
 						textColor="rgba(32, 34, 76, 0.6)"
+						maxChar={30}
 					/>
 				</S.Site>
 				<S.ContentType>
-					{!!contentType && <Tag text={contentType.content?.title || ""} color="#E6E7F8" small={true} />}
+					{!!contentType && <Tag text={contentType.content?.title || ""} color="#E6E7F8" small={true} maxChar={30} />}
 				</S.ContentType>
 				<S.Event>
 					{eventType?.name || ""}{" "}

package/src/modules/ActivityLog/ItemLog/EventItem/style.tsx

@@ -32,8 +32,25 @@ const User = styled.div`
 `;
 
 const Name = styled.div`
+  position: relative;
   ${(p) => p.theme.textStyle.uiS};
   color: ${(p) => p.theme.colors.textHighEmphasis};
+  min-width: 0;
+  > * {
+    min-width: 0;
+    max-width: 100%;
+  }
+`;
+
+const Title = styled.div`
+  width: 100%;
+  ${(p) => p.theme.textStyle.uiS};
+  color: ${(p) => p.theme.colors.textHighEmphasis};
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+  min-width: 0;
 `;
 
 const AvatarWrapper = styled.div`
@@ -78,4 +95,4 @@ const Event = styled.div`
   }
 `;
 
-export { Item, User, Name, AvatarWrapper, Time, Site, ContentType, Event };
+export { Item, User, Name, Title, AvatarWrapper, Time, Site, ContentType, Event };