feat(blog) Migrate BlogCard component

components/Blog/BlogCard/__tests__/__snapshots__/index.test.tsx.snap

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`BlogCard component renders correctly 1`] = `
+<div>
+  <div
+    class="blogCard"
+  >
+    <div
+      class="title"
+    >
+      <a
+        href="/en/blog/category-mock/sample-blog"
+      >
+        Sample Test Blog
+      </a>
+      <div
+        class="metadata"
+      >
+        <a
+          class="category"
+          href="/en/blog/category-mock"
+        >
+          category-mock
+        </a>
+      </div>
+    </div>
+    <div
+      class="content"
+    >
+      <h4>
+        4/21/2023
+      </h4>
+      <p>
+        by
+
+        <span>
+          Bat Man
+        </span>
+      </p>
+    </div>
+  </div>
+</div>
+`;

components/Blog/BlogCard/__tests__/index.test.tsx

@@ -0,0 +1,38 @@
+import { render } from '@testing-library/react';
+import { LocaleProvider } from '../../../../providers/localeProvider';
+import englishMessages from '../../../../i18n/locales/en.json';
+import BlogCard from '..';
+
+jest.mock('next/router', () => ({
+  useRouter: jest.fn().mockReturnValue({}),
+}));
+
+describe('BlogCard component', () => {
+  it('renders correctly', () => {
+    const { container } = render(
+      <LocaleProvider
+        i18nData={{
+          currentLocale: {
+            code: 'en',
+            localName: 'English',
+            name: 'English',
+            langDir: 'ltr',
+            dateFormat: 'MM.DD.YYYY',
+            hrefLang: 'en-US',
+            enabled: true,
+          },
+          localeMessages: englishMessages,
+        }}
+      >
+        <BlogCard
+          author="Bat Man"
+          category="category-mock"
+          date="2023-04-21 23:40:56.77"
+          slug="/blog/category-mock/sample-blog"
+          title="Sample Test Blog"
+        />
+      </LocaleProvider>
+    );
+    expect(container).toMatchSnapshot();
+  });
+});

components/Blog/BlogCard/index.module.scss

@@ -0,0 +1,71 @@
+.blogCard {
+  display: flex;
+  flex-direction: column;
+  padding: var(--space-32) var(--space-24) var(--space-32) 0;
+
+  @media (max-width: 900px) {
+    padding: var(--space-12) var(--space-24);
+  }
+
+  .title {
+    background-color: var(--color-blog-card-background);
+    border-radius: 5px;
+    display: flex;
+    flex: 1 1 0px;
+    flex-direction: column;
+    padding: 1rem 1.5rem;
+
+    a {
+      font-size: 2em;
+      margin-bottom: 10px;
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  .metadata {
+    align-self: flex-start;
+    background-color: var(--color-dropdown-hover);
+    border-radius: 1rem;
+    display: flex;
+    margin-top: auto;
+    padding: 0.25rem;
+
+    span,
+    a {
+      color: var(--color-text-high-contrast);
+      font-size: var(--font-size-body3);
+      padding: 0.125rem 0.5rem;
+
+      &.category {
+        background-color: var(--color-dropdown-background);
+        border-radius: 1rem;
+        margin: 0;
+      }
+    }
+  }
+
+  .content {
+    justify-self: flex-end;
+
+    h4 {
+      margin: 0;
+      margin-top: 7px;
+      opacity: 0.7;
+    }
+
+    p {
+      margin: 7px 0;
+      opacity: 0.8;
+
+      li {
+        display: inline;
+        list-style: none;
+        margin: 0 3px;
+      }
+    }
+  }
+}

components/Blog/BlogCard/index.stories.tsx

@@ -0,0 +1,17 @@
+import BlockQuote from './index';
+import type { Meta as MetaObj, StoryObj } from '@storybook/react';
+
+type Story = StoryObj<typeof BlockQuote>;
+type Meta = MetaObj<typeof BlockQuote>;
+
+export const Default: Story = {
+  args: {
+    author: 'Bat Man',
+    category: 'category-mock',
+    date: '2023-04-21 23:40:56.77',
+    slug: '/blog/category-mock/sample-blog',
+    title: 'Sample Test Blog',
+  },
+};
+
+export default { component: BlockQuote } as Meta;

components/Blog/BlogCard/index.tsx

@@ -0,0 +1,46 @@
+import { FormattedDate, FormattedMessage } from 'react-intl';
+import styles from './index.module.scss';
+import LocalizedLink from '../../LocalizedLink';
+import navigation from '../../../navigation.json';
+import type { BlogPost } from '../../../types';
+import type { FC } from 'react';
+
+const getBlogCategoryUrl = (category: string): string =>
+  `${navigation.blog.link}/${category}/`;
+
+const getBlogPostUrl = (slug: string) =>
+  slug.endsWith('/') ? slug : `${slug}/`;
+
+type Props = {} & Omit<BlogPost, 'file'>;
+
+const BlogCard: FC<Props> = ({ title, author, date, category, slug }) => {
+  const blogCategoryUrl = getBlogCategoryUrl(category);
+
+  return (
+    <div className={styles.blogCard}>
+      <div className={styles.title}>
+        <LocalizedLink href={getBlogPostUrl(slug)}>{title}</LocalizedLink>
+        <div className={styles.metadata}>
+          {category && (
+            <LocalizedLink className={styles.category} href={blogCategoryUrl}>
+              {category}
+            </LocalizedLink>
+          )}
+        </div>
+      </div>
+      <div className={styles.content}>
+        <h4>
+          <FormattedDate value={date} />
+        </h4>
+        {author && (
+          <p>
+            <FormattedMessage id="components.blog.blogCard.author.by" />{' '}
+            <span>{author}</span>
+          </p>
+        )}
+      </div>
+    </div>
+  );
+};
+
+export default BlogCard;

i18n/locales/ar.json

@@ -35,5 +35,6 @@
   "components.pagination.next": "التالي | ",
   "components.pagination.previous": "السابق",
   "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}",
-  "layouts.blogIndex.currentYear": "News from {year}"
+  "layouts.blogIndex.currentYear": "News from {year}",
+  "components.blog.blogCard.author.by": "by"
 }

i18n/locales/ca.json

@@ -35,5 +35,6 @@
   "components.pagination.next": "Següent | ",
   "components.pagination.previous": "Anterior",
   "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}",
-  "layouts.blogIndex.currentYear": "News from {year}"
+  "layouts.blogIndex.currentYear": "News from {year}",
+  "components.blog.blogCard.author.by": "by"
 }

i18n/locales/de.json

@@ -35,5 +35,6 @@
   "components.pagination.next": "Neuere | ",
   "components.pagination.previous": "Ältere",
   "layouts.blogPost.author.byLine": "{author, select, null {} other {Von {author}, }}",
-  "layouts.blogIndex.currentYear": "Neuigkeiten von {year}"
+  "layouts.blogIndex.currentYear": "Neuigkeiten von {year}",
+  "components.blog.blogCard.author.by": "by"
 }

i18n/locales/en.json

@@ -39,5 +39,6 @@
   "components.common.banner.button.text": "Read More",
   "components.article.author.githubLinkLabel": "{username} Github - opens in new tab",
   "components.article.authorList.title": "Article Authors",
-  "components.common.languageSelector.button.title": "Switch Language"
+  "components.common.languageSelector.button.title": "Switch Language",
+  "components.blog.blogCard.author.by": "by"
 }

i18n/locales/es.json

@@ -35,5 +35,6 @@
   "components.pagination.next": "Siguiente | ",
   "components.pagination.previous": "Anterior",
   "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}",
-  "layouts.blogIndex.currentYear": "News from {year}"
+  "layouts.blogIndex.currentYear": "News from {year}",
+  "components.blog.blogCard.author.by": "by"
 }

i18n/locales/fa.json

@@ -35,5 +35,6 @@
   "components.pagination.next": "بعدی | ",
   "components.pagination.previous": "قبلی",
   "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}",
-  "layouts.blogIndex.currentYear": "News from {year}"
+  "layouts.blogIndex.currentYear": "News from {year}",
+  "components.blog.blogCard.author.by": "by"
 }

i18n/locales/fr.json

@@ -35,5 +35,6 @@
   "components.pagination.next": "Plus récent ",
   "components.pagination.previous": "Plus anciens",
   "layouts.blogPost.author.byLine": "{author, select, null {} other {Par {author}, }}",
-  "layouts.blogIndex.currentYear": "Actualités de {year}"
+  "layouts.blogIndex.currentYear": "Actualités de {year}",
+  "components.blog.blogCard.author.by": "par"
 }

i18n/locales/gl.json

@@ -35,5 +35,6 @@
   "components.pagination.next": "Seguinte | ",
   "components.pagination.previous": "Anterior",
   "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}",
-  "layouts.blogIndex.currentYear": "News from {year}"
+  "layouts.blogIndex.currentYear": "News from {year}",
+  "components.blog.blogCard.author.by": "by"
 }

i18n/locales/id.json

@@ -35,5 +35,6 @@
   "components.pagination.next": "Terbaru | ",
   "components.pagination.previous": "Lama",
   "layouts.blogPost.author.byLine": "{author, select, null {} other {Oleh {author}, }}",
-  "layouts.blogIndex.currentYear": "Berita dari {year}"
+  "layouts.blogIndex.currentYear": "Berita dari {year}",
+  "components.blog.blogCard.author.by": "by"
 }

i18n/locales/it.json

@@ -35,5 +35,6 @@
   "components.pagination.next": "Successiva | ",
   "components.pagination.previous": "Precedente",
   "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}",
-  "layouts.blogIndex.currentYear": "News from {year}"
+  "layouts.blogIndex.currentYear": "News from {year}",
+  "components.blog.blogCard.author.by": "by"
 }

i18n/locales/ja.json

@@ -35,5 +35,6 @@
   "components.pagination.next": "次 | ",
   "components.pagination.previous": "前",
   "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}",
-  "layouts.blogIndex.currentYear": "News from {year}"
+  "layouts.blogIndex.currentYear": "News from {year}",
+  "components.blog.blogCard.author.by": "著者"
 }

i18n/locales/ka.json

@@ -35,5 +35,6 @@
   "components.pagination.next": "შემდეგი | ",
   "components.pagination.previous": "წინა",
   "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}",
-  "layouts.blogIndex.currentYear": "News from {year}"
+  "layouts.blogIndex.currentYear": "News from {year}",
+  "components.blog.blogCard.author.by": "by"
 }

i18n/locales/ko.json

@@ -35,5 +35,6 @@
   "components.pagination.next": "다음 | ",
   "components.pagination.previous": "이전",
   "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}",
-  "layouts.blogIndex.currentYear": "News from {year}"
+  "layouts.blogIndex.currentYear": "News from {year}",
+  "components.blog.blogCard.author.by": "by"
 }

i18n/locales/nl.json

@@ -35,5 +35,6 @@
   "components.pagination.next": "Volgende | ",
   "components.pagination.previous": "Vorige",
   "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}",
-  "layouts.blogIndex.currentYear": "News from {year}"
+  "layouts.blogIndex.currentYear": "News from {year}",
+  "components.blog.blogCard.author.by": "by"
 }

i18n/locales/pt-br.json

@@ -35,5 +35,6 @@
   "components.pagination.next": "Próximo | ",
   "components.pagination.previous": "Anterior",
   "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}",
-  "layouts.blogIndex.currentYear": "News from {year}"
+  "layouts.blogIndex.currentYear": "News from {year}",
+  "components.blog.blogCard.author.by": "por"
 }

i18n/locales/ro.json

@@ -35,5 +35,6 @@
   "components.pagination.next": "Newer | ",
   "components.pagination.previous": "Older",
   "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}",
-  "layouts.blogIndex.currentYear": "News from {year}"
+  "layouts.blogIndex.currentYear": "News from {year}",
+  "components.blog.blogCard.author.by": "by"
 }

i18n/locales/ru.json

@@ -35,5 +35,6 @@
   "components.pagination.next": "Следующий | ",
   "components.pagination.previous": "Предыдущий",
   "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}",
-  "layouts.blogIndex.currentYear": "News from {year}"
+  "layouts.blogIndex.currentYear": "News from {year}",
+  "components.blog.blogCard.author.by": "by"
 }

i18n/locales/tr.json

@@ -35,5 +35,6 @@
   "components.pagination.next": "Daha Yeni | ",
   "components.pagination.previous": "Daha Eski",
   "layouts.blogPost.author.byLine": "{author, select, null {} other {{author} tarafından }}",
-  "layouts.blogIndex.currentYear": "{year} yılından haberler"
+  "layouts.blogIndex.currentYear": "{year} yılından haberler",
+  "components.blog.blogCard.author.by": "by"
 }

i18n/locales/uk.json

@@ -35,5 +35,6 @@
   "components.pagination.next": "Далі | ",
   "components.pagination.previous": "Попередній",
   "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}",
-  "layouts.blogIndex.currentYear": "News from {year}"
+  "layouts.blogIndex.currentYear": "News from {year}",
+  "components.blog.blogCard.author.by": "by"
 }

i18n/locales/zh-cn.json

@@ -35,5 +35,6 @@
   "components.pagination.next": "较新的新闻事件 | ",
   "components.pagination.previous": "更早的新闻事件",
   "layouts.blogPost.author.byLine": "{author, select, null {} other {由 {author} }}",
-  "layouts.blogIndex.currentYear": "{year} 年的所有新闻事件"
+  "layouts.blogIndex.currentYear": "{year} 年的所有新闻事件",
+  "components.blog.blogCard.author.by": "作者"
 }

i18n/locales/zh-tw.json

@@ -35,5 +35,6 @@
   "components.pagination.next": "下一個 | ",
   "components.pagination.previous": "上一個",
   "layouts.blogPost.author.byLine": "{author, select, null {} other {By {author}, }}",
-  "layouts.blogIndex.currentYear": "News from {year}"
+  "layouts.blogIndex.currentYear": "News from {year}",
+  "components.blog.blogCard.author.by": "by"
 }