Dojo(admin) Create lessons home page. Part 1: Lesson Card

components/admin/lessons/AdminLessonCard.test.js

@@ -0,0 +1,28 @@
+import * as React from 'react'
+import { render } from '@testing-library/react'
+import { AdminLessonCard } from './AdminLessonCard'
+import '@testing-library/jest-dom'
+
+const dummyLessonData = {
+  lesson: {
+    title: 'Foundations of Javascript',
+    description: 'A super simple introduction to help you get started!',
+    challenges: [],
+    id: 0,
+    order: 0,
+    slug: 'js0'
+  },
+  pendingFlaggedQuestions: 2
+}
+
+describe('AdminLessonCard component', () => {
+  test("Button href should be '_blank' if lesson docUrl is undefined ", async () => {
+    expect.assertions(2)
+    const { container, getByTestId } = render(
+      <AdminLessonCard {...dummyLessonData} />
+    )
+
+    expect(container).toMatchSnapshot()
+    expect(getByTestId('button').href.split('/').slice(-1)[0]).toBe('_blank')
+  })
+})

components/admin/lessons/AdminLessonCard.tsx

@@ -0,0 +1,37 @@
+import React from 'react'
+import Link from 'next/link'
+import styles from '../../../scss/adminLessonCard.module.scss'
+import { Lesson } from '../../../graphql/'
+
+type Props = {
+  lesson: Lesson
+  pendingFlaggedQuestions: number
+}
+
+export const AdminLessonCard: React.FC<Props> = ({
+  lesson,
+  pendingFlaggedQuestions
+}) => {
+  const { title, description, docUrl } = lesson
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.container__heading}>{title}</div>
+
+      <div className={styles.container__description}>{description}</div>
+      <div className={styles.container__flaggedQuestions}>
+        {pendingFlaggedQuestions} Pending Questions
+      </div>
+
+      <Link href={docUrl || '_blank'}>
+        <a data-testid="button">
+          <button className={'btn btn-secondary ' + styles.container__button}>
+            Edit Lesson
+          </button>
+        </a>
+      </Link>
+    </div>
+  )
+}
+
+export default AdminLessonCard

components/admin/lessons/__snapshots__/AdminLessonCard.test.js.snap

@@ -0,0 +1,36 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`AdminLessonCard component Button href should be '_blank' if lesson docUrl is undefined  1`] = `
+<div>
+  <div
+    class="container"
+  >
+    <div
+      class="container__heading"
+    >
+      Foundations of Javascript
+    </div>
+    <div
+      class="container__description"
+    >
+      A super simple introduction to help you get started!
+    </div>
+    <div
+      class="container__flaggedQuestions"
+    >
+      2
+       Pending Questions
+    </div>
+    <a
+      data-testid="button"
+      href="/_blank"
+    >
+      <button
+        class="btn btn-secondary container__button"
+      >
+        Edit Lesson
+      </button>
+    </a>
+  </div>
+</div>
+`;

scss/adminLessonCard.module.scss

@@ -0,0 +1,40 @@
+@use './colors.module';
+
+.container {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  padding: 30px 53px;
+  background: colors.$bg-white;
+  border-radius: 10px;
+  box-shadow: 0px 4px 25px rgba(0, 0, 0, 0.07);
+  gap: 10px;
+  min-height: 254px;
+  font-family: Rubik;
+}
+
+.container__heading {
+  font-weight: 600;
+  font-size: 32px;
+  text-align: center;
+}
+
+.container__description {
+  font-family: Inter;
+  font-size: 14px;
+  text-align: center;
+}
+
+.container__flaggedQuestions {
+  font-weight: 700;
+  font-family: Inter;
+  font-size: 14px;
+  margin-bottom: 24px;
+  margin-top: 32px;
+}
+
+.container__button {
+  color: colors.$primary;
+  font-weight: 700;
+}

stories/components/AdminLessonCard.stories.tsx

@@ -0,0 +1,24 @@
+import React from 'react'
+import AdminLessonCard from '../../components/admin/lessons/AdminLessonCard'
+
+export default {
+  title: 'Components/AdminLessonCard',
+  component: AdminLessonCard
+}
+
+const props = {
+  lesson: {
+    title: 'Foundations of Javascript',
+    description: 'A super simple introduction to help you get started!',
+    challenges: [],
+    id: 0,
+    order: 0,
+    slug: 'js0'
+  },
+
+  pendingFlaggedQuestions: 3
+}
+
+export const Basic = () => {
+  return <AdminLessonCard {...props} />
+}