feat: adds the article list component

Adds the ArticleList component to show a list of article cards

closes #144

src/components/organisms/ArticleList/ArticleList.jsx

@@ -0,0 +1,39 @@
+import PropTypes from 'prop-types';
+import { css } from '@emotion/react';
+import { SectionTitle } from '@components/molecules/SectionTitle';
+import { ArticleCard } from '@components/molecules/ArticleCard';
+
+const listCss = css`
+  display: flex;
+  flex-direction: column;
+`;
+
+export function ArticleList({ title, articles }) {
+  return (
+    <div css={listCss}>
+      <SectionTitle>{title}</SectionTitle>
+      {articles.map(({ slug, excerpt, readingTime, date, title: articleTitle }) => (
+        <ArticleCard
+          key={slug}
+          date={date}
+          excerpt={excerpt}
+          readingTime={readingTime}
+          slug={slug}
+          title={articleTitle}
+        />
+      ))}
+    </div>
+  );
+}
+
+ArticleList.propTypes = {
+  title: PropTypes.string,
+  articles: PropTypes.arrayOf(PropTypes.shape(ArticleCard.propTypes)),
+};
+
+ArticleList.defaultProps = {
+  title: '',
+  articles: [],
+};
+
+export default ArticleList;

src/components/organisms/ArticleList/ArticleList.stories.jsx

@@ -0,0 +1,58 @@
+import { ArticleList } from './ArticleList';
+
+const articles = [
+  {
+    slug: 'article-1',
+    title: 'Article 1',
+    excerpt:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget consectetur tempor, nisl nunc ultrices eros, eu porttitor nisl nunc eget lorem. Donec euismod, nisl eget consectetur tempor, nisl nunc ultrices eros, eu porttitor nisl nunc eget lorem.',
+    date: '2019-01-01',
+    readingTime: 7,
+  },
+  {
+    slug: 'article-2',
+    title: 'Article 2',
+    excerpt:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget consectetur tempor, nisl nunc ultrices eros, eu porttitor nisl nunc eget lorem. Donec euismod, nisl eget consectetur tempor, nisl nunc ultrices eros, eu porttitor nisl nunc eget lorem.',
+    date: '2019-01-02',
+    readingTime: 5,
+  },
+  {
+    slug: 'article-3',
+    title: 'Article 3',
+    excerpt:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget consectetur tempor, nisl nunc ultrices eros, eu porttitor nisl nunc eget lorem. Donec euismod, nisl eget consectetur tempor, nisl nunc ultrices eros, eu porttitor nisl nunc eget lorem.',
+    date: '2019-01-04',
+    readingTime: 8,
+  },
+  {
+    slug: 'article-4',
+    title: 'Article 4',
+    excerpt:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget consectetur tempor, nisl nunc ultrices eros, eu porttitor nisl nunc eget lorem. Donec euismod, nisl eget consectetur tempor, nisl nunc ultrices eros, eu porttitor nisl nunc eget lorem.',
+    date: '2019-01-05',
+    readingTime: 3,
+  },
+  {
+    slug: 'article-5',
+    title: 'Article 5',
+    excerpt:
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec euismod, nisl eget consectetur tempor, nisl nunc ultrices eros, eu porttitor nisl nunc eget lorem. Donec euismod, nisl eget consectetur tempor, nisl nunc ultrices eros, eu porttitor nisl nunc eget lorem.',
+    date: '2019-01-05',
+    readingTime: 15,
+  },
+];
+
+export default {
+  title: 'Components/Organisms/ArticleList',
+  component: ArticleList,
+};
+
+const Template = (args) => <ArticleList {...args} />;
+
+export const Default = Template.bind({});
+
+Default.args = {
+  title: 'Articles',
+  articles,
+};

src/components/organisms/ArticleList/ArticleList.test.jsx

@@ -0,0 +1,30 @@
+import { render, screen } from '@testing-library/react';
+import { ArticleList } from './ArticleList';
+
+describe('<ArticleList />', () => {
+  it('should render an article list', () => {
+    expect.assertions(5);
+
+    const title = 'List Title';
+    const articles = [
+      {
+        title: 'Article title 1',
+        excerpt: 'Article excerpt 1',
+        slug: 'article-slug-1',
+      },
+      {
+        title: 'Article title 2',
+        excerpt: 'Article excerpt 2',
+        slug: 'article-slug-2',
+      },
+    ];
+
+    render(<ArticleList title={title} articles={articles} />);
+
+    expect(screen.getByText(title)).toBeInTheDocument();
+    expect(screen.getByText(articles[0].title)).toBeInTheDocument();
+    expect(screen.getByText(articles[1].title)).toBeInTheDocument();
+    expect(screen.getByText(articles[0].excerpt)).toBeInTheDocument();
+    expect(screen.getByText(articles[1].excerpt)).toBeInTheDocument();
+  });
+});

src/components/organisms/ArticleList/index.js

@@ -0,0 +1,5 @@
+import { ArticleList } from './ArticleList';
+
+export * from './ArticleList';
+
+export default ArticleList;