Merge branch 'nodejs:main' into main

Author: bmuenzenmeyer

.postcssrc.json

@@ -0,0 +1,11 @@
+{
+  "plugins": {
+    "postcss-mixins": {},
+    "postcss-simple-vars": {},
+    "postcss-calc": {},
+    "postcss-import": {},
+    "tailwindcss/nesting": {},
+    "tailwindcss": {},
+    "autoprefixer": {}
+  }
+}

COLLABORATOR_GUIDE.md

@@ -287,7 +287,7 @@ They also allow Developers to preview Components and be able to test them manual
 
 ```tsx
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
-import NameOfComponent from './index';
+import NameOfComponent from '@components/PathTo/YourComponent';
 
 type Story = StoryObj<typeof NameOfComponent>;
 type Meta = MetaObj<typeof NameOfComponent>;

components/Common/AvatarGroup/Avatar/index.module.css

@@ -18,5 +18,8 @@
 
 .avatarRoot {
   @apply -ml-2
+    h-8
+    w-8
+    flex-shrink-0
     first:ml-0;
 }

components/Common/AvatarGroup/Avatar/index.stories.tsx

@@ -1,9 +1,8 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
+import Avatar from '@/components/Common/AvatarGroup/Avatar';
 import { githubProfileAvatarUrl } from '@/util/gitHubUtils';
 
-import Avatar from './';
-
 type Story = StoryObj<typeof Avatar>;
 type Meta = MetaObj<typeof Avatar>;
 

components/Common/AvatarGroup/index.stories.tsx

@@ -1,9 +1,8 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
+import AvatarGroup from '@/components/Common/AvatarGroup';
 import { githubProfileAvatarUrl } from '@/util/gitHubUtils';
 
-import AvatarGroup from './';
-
 type Story = StoryObj<typeof AvatarGroup>;
 type Meta = MetaObj<typeof AvatarGroup>;
 

components/Common/AvatarGroup/index.tsx

@@ -2,10 +2,10 @@ import classNames from 'classnames';
 import type { ComponentProps, FC } from 'react';
 import { useState, useMemo } from 'react';
 
+import Avatar from '@/components/Common/AvatarGroup/Avatar';
+import avatarstyles from '@/components/Common/AvatarGroup/Avatar/index.module.css';
 import { getAcronymFromString } from '@/util/stringUtils';
 
-import Avatar from './Avatar';
-import avatarstyles from './Avatar/index.module.css';
 import styles from './index.module.css';
 
 type AvatarGroupProps = {

components/Common/Badge/index.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
-import Badge from './index';
+import Badge from '@/components/Common/Badge';
 
 type Story = StoryObj<typeof Badge>;
 type Meta = MetaObj<typeof Badge>;

components/Common/Banner/index.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
-import Banner from './index';
+import Banner from '@/components/Common/Banner';
 
 type Story = StoryObj<typeof Banner>;
 type Meta = MetaObj<typeof Banner>;

components/Common/Blockquote/index.stories.tsx

@@ -1,6 +1,6 @@
 import type { Meta as MetaObj, StoryObj } from '@storybook/react';
 
-import Blockquote from './index';
+import Blockquote from '@/components/Common/Blockquote';
 
 type Story = StoryObj<typeof Blockquote>;
 type Meta = MetaObj<typeof Blockquote>;

components/Common/BlogPostCard/__tests__/index.test.mjs

@@ -0,0 +1,123 @@
+import { render, screen } from '@testing-library/react';
+
+import BlogPostCard from '@/components/Common/BlogPostCard';
+import { LocaleProvider } from '@/providers/localeProvider';
+
+function renderBlogPostCard({
+  title = 'Blog post title',
+  type = 'vulnerability',
+  description = 'Blog post description',
+  authors = [],
+  date = new Date(),
+}) {
+  render(
+    <LocaleProvider>
+      <BlogPostCard
+        title={title}
+        type={type}
+        description={description}
+        authors={authors}
+        date={date}
+      />
+    </LocaleProvider>
+  );
+
+  return { title, type, description, authors, date };
+}
+
+describe('BlogPostCard', () => {
+  describe('Rendering', () => {
+    it('Wraps the entire card within an article', () => {
+      renderBlogPostCard({});
+
+      expect(screen.getByRole('article')).toBeVisible();
+    });
+
+    it('Renders the title prop correctly', () => {
+      const { title } = renderBlogPostCard({});
+
+      // Title from Preview component
+      expect(screen.getByRole('heading', { level: 2 })).toHaveTextContent(
+        title
+      );
+
+      // The second title should be hidden for screen-readers
+      // to prevent them from reading it twice
+      expect(screen.getAllByText(title)[1]).toHaveAttribute(
+        'aria-hidden',
+        'true'
+      );
+    });
+
+    it('Renders the description prop correctly', () => {
+      const { description } = renderBlogPostCard({});
+
+      expect(screen.getByText(description)).toBeVisible();
+    });
+
+    it.each([
+      { label: 'Vulnerabilities', type: 'vulnerability' },
+      { label: 'Announcements', type: 'announcement' },
+      { label: 'Releases', type: 'release' },
+    ])(
+      'Renders "%label" text when passing it the type "%type"',
+      ({ label, type }) => {
+        renderBlogPostCard({ type });
+
+        expect(screen.getByText(label)).toBeVisible();
+      }
+    );
+
+    it('Renders all passed authors fullName(s), comma-separated', () => {
+      const authors = [
+        { fullName: 'Jane Doe', src: '' },
+        { fullName: 'John Doe', src: '' },
+      ];
+
+      renderBlogPostCard({ authors });
+
+      const fullNames = authors.reduce((prev, curr, index) => {
+        if (index === 0) {
+          return curr.fullName;
+        }
+
+        return `${prev}, ${curr.fullName}`;
+      }, '');
+
+      expect(screen.getByText(fullNames)).toBeVisible();
+    });
+
+    it('Renders all passed authors fullName(s), comma-separated', () => {
+      const authors = [
+        { fullName: 'Jane Doe', src: '' },
+        { fullName: 'John Doe', src: '' },
+      ];
+
+      renderBlogPostCard({ authors });
+
+      const fullNames = authors.reduce((prev, curr, index) => {
+        if (index === 0) {
+          return curr.fullName;
+        }
+
+        return `${prev}, ${curr.fullName}`;
+      }, '');
+
+      expect(screen.getByText(fullNames)).toBeVisible();
+    });
+
+    it('Renders date prop in short format', () => {
+      const date = new Date();
+
+      renderBlogPostCard({ date });
+
+      const dateTimeFormat = new Intl.DateTimeFormat(navigator.language, {
+        day: 'numeric',
+        month: 'short',
+        year: 'numeric',
+      });
+
+      expect(screen.getByText(dateTimeFormat.format(date))).toBeVisible();
+    });
+  });
+});