feat: add detail page (wip)

src/generic/sub-header/SubHeader.jsx

@@ -18,7 +18,7 @@ const SubHeader = ({
         <small className="sub-header-title-subtitle">{subtitle}</small>
         {title}
         {titleActions && (
-          <ActionRow className="ml-auto">
+          <ActionRow className="ml-auto mt-1">
             {titleActions}
           </ActionRow>
         )}

src/generic/sub-header/SubHeader.scss

@@ -33,6 +33,6 @@
   display: flex;
   justify-content: space-between;
   align-items: center;
-  margin-top: 1.5rem;
   margin-bottom: 12px;
 }
+

src/index.jsx

@@ -78,7 +78,7 @@ const App = () => {
                 render={({ match }) => {
                   const { params: { taxonomyId } } = match;
                   return (
-                    <TaxonomyDetailPage taxonomyId={taxonomyId} />
+                    <TaxonomyDetailPage taxonomyId={Number(taxonomyId)} />
                   );
                 }}
               />

src/taxonomy/TaxonomyCard.jsx

@@ -42,7 +42,7 @@ const TaxonomyCard = ({ className, original, intl }) => {
   );
 
   return (
-    <Card className={classNames('taxonomy-card', className)} data-testid={`taxonomy-card-${id}`}>
+    <Card className={classNames('taxonomy-card', className)} data-testid={`taxonomy-card-${id}`} isClickable>
       <Link ariaLabel="view taxonomy details" className="stretched-link" to={`/taxonomy-list/${id}`} />
       <Card.Header
         title={name}

src/taxonomy/taxonomy-detail/TagListTable.jsx

@@ -0,0 +1,42 @@
+import {
+  DataTable,
+  TextFilter,
+} from '@edx/paragon';
+import Proptypes from 'prop-types';
+
+const tagsSample = [
+  { name: 'Tag 1' },
+  { name: 'Tag 2' },
+  { name: 'Tag 3' },
+  { name: 'Tag 4' },
+  { name: 'Tag 5' },
+  { name: 'Tag 6' },
+  { name: 'Tag 7' },
+];
+
+const TagListTable = ({ tags }) => (
+  <DataTable
+    isFilterable
+    isSortable
+    defaultColumnValues={{ Filter: TextFilter }}
+    itemCount={tagsSample.length}
+    data={tagsSample}
+    columns={[
+      {
+        Header: 'Name',
+        accessor: 'name',
+      },
+    ]}
+  >
+    <DataTable.TableControlBar />
+    <DataTable.Table />
+    <DataTable.EmptyTable content="No results found" />
+    <DataTable.TableFooter />
+  </DataTable>
+);
+
+TagListTable.propTypes = {
+  tags: Proptypes.array.isRequired,
+};
+
+export default TagListTable;

src/taxonomy/taxonomy-detail/TaxonomyDetailPage.jsx

@@ -1,13 +1,16 @@
 import React from 'react';
 import {
   Container,
+  Layout,
 } from '@edx/paragon';
 import Proptypes from 'prop-types';
 
 import PermissionDeniedAlert from '../../generic/PermissionDeniedAlert';
 import Loading from '../../generic/Loading';
 import Header from '../../header';
 import SubHeader from '../../generic/sub-header/SubHeader';
+import TaxonomyDetailSideCard from './TaxonomyDetailSideCard';
+import TagListTable from './TagListTable';
 import { useTaxonomyDetailDataResponse, useTaxonomyDetailDataStatus } from '../api/hooks/selectors';
 
 const TaxonomyDetailContent = ({ taxonomyId }) => {
@@ -42,16 +45,22 @@ const TaxonomyDetailContent = ({ taxonomyId }) => {
             />
           </Container>
         </div>
-        <div className="bg-light-400 mt-1">
-          <Container size="xl">
-            {
-              taxonomy ? (
-                <div>
-                  <pre>{JSON.stringify(taxonomy, null, 2)}</pre>
-                </div>
-              ) : (<>Taxonomy not found</>)
-            }
-          </Container>
+        <div className="bg-light-400 m-4">
+          <Layout
+            lg={[{ span: 9 }, { span: 3 }]}
+            md={[{ span: 9 }, { span: 3 }]}
+            sm={[{ span: 9 }, { span: 3 }]}
+            xs={[{ span: 9 }, { span: 3 }]}
+            xl={[{ span: 9 }, { span: 3 }]}
+          >
+            <Layout.Element>
+              <TagListTable />
+            </Layout.Element>
+            <Layout.Element>
+              <TaxonomyDetailSideCard taxonomy={taxonomy} />
+            </Layout.Element>
+
+          </Layout>
         </div>
       </>
     );

src/taxonomy/taxonomy-detail/TaxonomyDetailSideCard.jsx

@@ -0,0 +1,27 @@
+import {
+  Card,
+} from '@edx/paragon';
+import Proptypes from 'prop-types';
+
+const TaxonomyDetailSideCard = ({ taxonomy }) => (
+  <Card>
+    <Card.Header title="Taxonomy details" />
+    <Card.Section title="Title">
+      {taxonomy.name}
+    </Card.Section>
+    <Card.Divider className="ml-3 mr-3" />
+    <Card.Section title="Description">
+      {taxonomy.description}
+    </Card.Section>
+    <Card.Divider className="ml-3 mr-3" />
+    <Card.Section title="Copyright">
+      No copyright added
+    </Card.Section>
+  </Card>
+);
+
+TaxonomyDetailSideCard.propTypes = {
+  taxonomy: Proptypes.object.isRequired,
+};
+
+export default TaxonomyDetailSideCard;