Merged in feat/SW-1555-jobylon-integration (pull request #1484)

Feat/SW-1555 jobylon integration

* feat(SW-1555): Added jobylon feed query

* feat(SW-1555): Added jobylon feed component


Approved-by: Fredrik Thorsson
Approved-by: Matilda Landström

apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/index.tsx

@@ -0,0 +1,57 @@
+import { OpenInNewSmallIcon } from "@/components/Icons"
+import Button from "@/components/TempDesignSystem/Button"
+import Caption from "@/components/TempDesignSystem/Text/Caption"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
+import { getIntl } from "@/i18n"
+import { getLang } from "@/i18n/serverContext"
+
+import styles from "./jobylonCard.module.css"
+
+import type { JobylonItem } from "@/types/trpc/routers/jobylon"
+
+interface JobylonCardProps {
+  job: JobylonItem
+}
+
+export default async function JobylonCard({ job }: JobylonCardProps) {
+  const intl = await getIntl()
+  const lang = getLang()
+  const deadlineText = job.toDate
+    ? intl.formatMessage(
+        { id: "Deadline: {date}" },
+        { date: job.toDate.locale(lang).format("Do MMMM") }
+      )
+    : intl.formatMessage({ id: "Open for application" })
+
+  return (
+    <div className={styles.jobylonCard}>
+      <Subtitle asChild>
+        <h3>{job.title}</h3>
+      </Subtitle>
+
+      <div className={styles.contentWrapper}>
+        <div className={styles.content}>
+          <Caption>{job.categories.map((cat) => cat.text).join(", ")}</Caption>
+          <Caption>
+            {job.locations
+              .map((loc) => `${loc.city}, ${loc.country}`)
+              .join(" | ")}
+          </Caption>
+          <Caption color="uiTextPlaceholder">{deadlineText}</Caption>
+        </div>
+        <Button
+          theme="base"
+          size="small"
+          intent="tertiary"
+          variant="icon"
+          asChild
+        >
+          <a href={job.url} target="_blank" rel="noopener noreferrer">
+            {intl.formatMessage({ id: "View & apply" })}
+            <OpenInNewSmallIcon />
+          </a>
+        </Button>
+      </div>
+    </div>
+  )
+}

apps/scandic-web/components/Blocks/DynamicContent/JobylonFeed/JobylonCard/jobylonCard.module.css

@@ -0,0 +1,21 @@
+.jobylonCard {
+  display: grid;
+  width: 100%;
+  padding: var(--Spacing-x2);
+  background-color: var(--Base-Surface-Primary-light-Normal);
+  border: 1px solid var(--Base-Border-Subtle);
+  border-radius: var(--Corner-radius-Medium);
+}
+
+.contentWrapper {
+  display: grid;
+  gap: var(--Spacing-x1);
+}
+
+@media screen and (min-width: 768px) {
+  .contentWrapper {
+    grid-template-columns: 1fr auto;
+    gap: var(--Spacing-x2);
+    align-items: end;
+  }
+}