@times-components/ts-components 1.78.1-alpha.52 → 1.79.0

package/src/components/article-header/ArticleBylineBlock.stories.tsx

@@ -24,7 +24,7 @@ storiesOf('Typescript Component/Article Header', module).add(
     const props = getAttributes();
     return (
       <ArticleBylineBlock
-        data={{
+        authorData={{
           slug: 'oliver-wright',
           name: props.name,
           jobTitle: props.jobTitle,

package/src/components/article-header/ArticleBylineBlock.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { ArticleByline } from '../../types/related-article-slice';
+import { ArticleBylineAuthorData } from '../../types/related-article-slice';
 import {
   BylineBlockContainer,
   BylineBlockImgContainer,
@@ -8,42 +8,43 @@ import {
   BylineBlockAuthorContent,
   BylineBlockAuthorName,
   BylineBlockAuthorJobTitle,
-  BylineBlockAuthorDescription
+  BylineBlockDescription
 } from './styles';
 
 export const ArticleBylineBlock: React.FC<{
-  data?: ArticleByline;
+  authorData?: ArticleBylineAuthorData;
   description?: string;
-}> = ({ data, description }) => {
-  if (!((data && data.name) || (data && data.image)) && !description) {
+}> = ({ authorData, description }) => {
+  if (
+    !((authorData && authorData.name) || (authorData && authorData.image)) &&
+    !description
+  ) {
     return null;
   }
 
   return (
     <BylineBlockContainer>
-      {data &&
-        data.image && (
+      {authorData &&
+        authorData.image && (
           <BylineBlockImgContainer>
-            <BylineBlockImg src={data.image} alt={data.name} />
+            <BylineBlockImg src={authorData.image} alt={authorData.name} />
           </BylineBlockImgContainer>
         )}
       <BylineBlockContent>
         <BylineBlockAuthorContent>
-          {data &&
-            data.name && (
-              <BylineBlockAuthorName>{data.name}</BylineBlockAuthorName>
+          {authorData &&
+            authorData.name && (
+              <BylineBlockAuthorName>{authorData.name}</BylineBlockAuthorName>
             )}
-          {data &&
-            data.jobTitle && (
+          {authorData &&
+            authorData.jobTitle && (
               <BylineBlockAuthorJobTitle>
-                {data.jobTitle}
+                {authorData.jobTitle}
               </BylineBlockAuthorJobTitle>
             )}
         </BylineBlockAuthorContent>
         {description && (
-          <BylineBlockAuthorDescription>
-            {description}
-          </BylineBlockAuthorDescription>
+          <BylineBlockDescription>{description}</BylineBlockDescription>
         )}
       </BylineBlockContent>
     </BylineBlockContainer>

package/src/components/article-header/ArticleHeader.tsx

@@ -21,7 +21,7 @@ import {
   UpdatesContainer,
   FlagContainer
 } from './styles';
-import { ArticleByline } from '../../types/related-article-slice';
+import { ArticleBylineAuthorData } from '../../types/related-article-slice';
 import { ArticleBylineBlock } from './ArticleBylineBlock';
 
 const anchorString = (updateTxt = '', headlineTxt = '') => {
@@ -41,7 +41,7 @@ const ArticleHeader: React.FC<{
   description?: string;
 }> = ({ updated, breaking, headline, authorSlug, description }) => {
   const [timezone, setTimezone] = useState<string>('');
-  const [bylineData, setBylineData] = useState<ArticleByline>();
+  const [authorData, setAuthorData] = useState<ArticleBylineAuthorData>();
 
   const currentDateTime = new Date();
   const updatedDate = new Date(updated);
@@ -63,7 +63,7 @@ const ArticleHeader: React.FC<{
         try {
           const response = await fetch(`/api/author-profile/${authorSlug}`);
           const authorDetails = await response.json();
-          setBylineData(authorDetails);
+          setAuthorData(authorDetails);
         } catch (err) {
           // tslint:disable-next-line:no-console
           console.log(err);
@@ -125,7 +125,7 @@ const ArticleHeader: React.FC<{
       </UpdatesContainer>
 
       {headline && <Headline>{safeDecodeURIComponent(headline)}</Headline>}
-      <ArticleBylineBlock data={bylineData} description={description} />
+      <ArticleBylineBlock authorData={authorData} description={description} />
     </Container>
   );
 };

package/src/components/article-header/__tests__/ArticleBylineBlock.test.tsx

@@ -16,7 +16,7 @@ describe('Article byline block', () => {
 
   it('Displays description', () => {
     const { getByText } = render(
-      <ArticleBylineBlock data={undefined} description={description} />
+      <ArticleBylineBlock authorData={undefined} description={description} />
     );
 
     expect(getByText(description)).toBeVisible();
@@ -31,7 +31,7 @@ describe('Article byline block', () => {
 
   it('Displays author details and description', () => {
     const { getByText, getByRole } = render(
-      <ArticleBylineBlock data={data} description={description} />
+      <ArticleBylineBlock authorData={data} description={description} />
     );
     expect(getByText(data.name)).toBeVisible();
     expect(getByText(data.jobTitle)).toBeVisible();

package/src/components/article-header/styles.ts

@@ -133,7 +133,7 @@ export const BylineBlockAuthorJobTitle = styled.p`
   margin-block: 0;
 `;
 
-export const BylineBlockAuthorDescription = styled.p`
+export const BylineBlockDescription = styled.p`
   color: #696969;
   font-weight: 500;
   margin-block: 0;

package/src/types/related-article-slice.ts

@@ -18,7 +18,7 @@ type Byline = {
 
 type Bylines = Array<{ byline: Byline[]; image?: any }>;
 
-export type ArticleByline = {
+export type ArticleBylineAuthorData = {
   slug: string;
   name?: string;
   jobTitle?: string;