[C] refactor sidebar

components/page/Aside/Section/index.js

@@ -0,0 +1,21 @@
+import PropTypes from "prop-types";
+import * as Styled from "./styles";
+
+const AsideSection = ({ title, children, className }) => {
+  return (
+    <Styled.Section {...{ className }}>
+      {title && <Styled.Title>{title}</Styled.Title>}
+      {children}
+    </Styled.Section>
+  );
+};
+
+AsideSection.displayName = "Page.Aside.Section";
+
+AsideSection.propTypes = {
+  children: PropTypes.node,
+  title: PropTypes.string,
+  className: PropTypes.string,
+};
+
+export default AsideSection;

components/page/Aside/Section/styles.js

@@ -0,0 +1,25 @@
+import styled from "styled-components";
+
+export const Section = styled.section``;
+
+export const Title = styled.h3`
+  position: relative;
+  padding-right: 1em;
+  padding-bottom: 0.5em;
+  margin-bottom: 0.5em;
+  border-bottom: 8px solid var(--color-background-accent-aside);
+
+  & svg {
+    position: absolute;
+    top: 4px;
+    right: 0;
+    display: block;
+    width: 32px;
+    height: 32px;
+    padding: 8px;
+    overflow: visible;
+    background-color: var(--turquoise60);
+    border-radius: 50%;
+    fill: var(--white);
+  }
+`;

components/page/Aside/Tags/index.js

@@ -0,0 +1,40 @@
+import PropTypes from "prop-types";
+import Link from "next/link";
+import { useTranslation } from "react-i18next";
+import AsideSection from "../Section";
+import * as Styled from "./styles";
+
+export default function Tags({ tags, rootHomeLink }) {
+  const { t } = useTranslation();
+
+  if (!tags) return null;
+  if (tags.length <= 0) return null;
+
+  return (
+    <AsideSection title={t(`tags`)}>
+      <Styled.TagList>
+        {tags.map((tag, i) => {
+          if (rootHomeLink?.uri && tag.slug) {
+            return (
+              <Styled.Tag key={i}>
+                <Link
+                  prefetch={false}
+                  href={`/${rootHomeLink?.uri}?search=${tag.slug}`}
+                >
+                  {`#${tag.title}`}
+                </Link>
+              </Styled.Tag>
+            );
+          }
+        })}
+      </Styled.TagList>
+    </AsideSection>
+  );
+}
+
+Tags.displayName = "Page.Aside.Tags";
+
+Tags.propTypes = {
+  tags: PropTypes.array,
+  rootHomeLink: PropTypes.object,
+};

components/page/Aside/Tags/styles.js

@@ -0,0 +1,8 @@
+import styled from "styled-components";
+
+export const TagList = styled.ul``;
+
+export const Tag = styled.li`
+  display: inline-block;
+  margin-inline-end: 1ch;
+`;

components/page/Aside/index.js

@@ -0,0 +1,22 @@
+import PropTypes from "prop-types";
+import Tags from "./Tags";
+import * as Styled from "./styles";
+
+const Aside = ({ children, tags = [], rootHomeLink }) => {
+  return (
+    <Styled.Aside>
+      {children}
+      {tags.length > 0 && rootHomeLink && <Tags {...{ tags, rootHomeLink }} />}
+    </Styled.Aside>
+  );
+};
+
+Aside.displayName = "Page.Aside";
+
+Aside.propTypes = {
+  children: PropTypes.node,
+  tags: PropTypes.array,
+  rootHomeLink: PropTypes.object,
+};
+
+export default Aside;

components/layout/MediaAside/MediaAssets.js → components/page/Aside/patterns/Media/MediaSection.js

@@ -5,10 +5,10 @@ import { ResponsiveImage, Figure } from "@rubin-epo/epo-react-lib";
 import ReleaseAssets from "./ReleaseAssets";
 import * as Styled from "./styles";
 
-export default function MediaAssets({
-  contentBlockAssets,
-  releaseImages,
-  releaseVideos,
+export default function MediaSection({
+  contentBlockAssets = [],
+  releaseImages = [],
+  releaseVideos = [],
 }) {
   const { t } = useTranslation();
 
@@ -22,8 +22,7 @@ export default function MediaAssets({
     return null;
 
   return (
-    <Styled.AsideSecondary>
-      <h3>{t(`media`)}</h3>
+    <Styled.MediaSection title={t(`media`)}>
       {contentBlockAssets.map((asset, i) => {
         if (asset.image?.[0].url) {
           return (
@@ -35,13 +34,12 @@ export default function MediaAssets({
           );
         }
       })}
-      <ReleaseAssets assets={releaseImages} />
-      <ReleaseAssets assets={releaseVideos} />
-    </Styled.AsideSecondary>
+      <ReleaseAssets assets={[...releaseImages, ...releaseVideos]} />
+    </Styled.MediaSection>
   );
 }
 
-MediaAssets.propTypes = {
+MediaSection.propTypes = {
   contentBlockAssets: PropTypes.array,
   releaseImages: PropTypes.array,
   releaseVideos: PropTypes.array,

components/layout/MediaAside/index.js → components/page/Aside/patterns/Media/index.js

@@ -5,9 +5,9 @@ import {
   IconComposer,
   Figure,
 } from "@rubin-epo/epo-react-lib";
-import Tags from "./Tags";
-import MediaAssets from "./MediaAssets";
-import * as Styled from "./styles";
+import MediaAssets from "./MediaSection";
+import Aside from "../../index";
+import AsideSection from "../../Section";
 
 export default function MediaAside({
   manualAssets,
@@ -23,9 +23,9 @@ export default function MediaAside({
   );
 
   return (
-    <Styled.Aside>
+    <Aside {...{ tags, rootHomeLink }}>
       {manualAssets?.length > 0 && (
-        <Styled.AsidePrimary>
+        <AsideSection>
           {manualAssets.map((a, i) => {
             if (a.assetHeader) {
               return (
@@ -78,15 +78,14 @@ export default function MediaAside({
               }
             }
           })}
-        </Styled.AsidePrimary>
+        </AsideSection>
       )}
       <MediaAssets
         contentBlockAssets={contentBlockAssets}
         releaseImages={releaseImages}
         releaseVideos={releaseVideos}
       />
-      <Tags tags={tags} rootHomeLink={rootHomeLink} />
-    </Styled.Aside>
+    </Aside>
   );
 }
 

components/page/Aside/patterns/Media/styles.js

@@ -0,0 +1,31 @@
+import styled from "styled-components";
+import AsideSection from "../../Section";
+
+export const AsidePrimary = styled.div`
+  h3 {
+    &:first-of-type {
+      border-bottom: 8px solid var(--turquoise60);
+
+      svg {
+        position: absolute;
+        top: 4px;
+        right: 0;
+        display: block;
+        width: 32px;
+        height: 32px;
+        padding: 8px;
+        overflow: visible;
+        background-color: var(--turquoise60);
+        border-radius: 50%;
+        fill: var(--white);
+      }
+    }
+  }
+`;
+
+export const MediaSection = styled(AsideSection)`
+  & > a {
+    display: block;
+    margin-block-start: 1em;
+  }
+`;