Fix: add renamed component

RISDEV-0000

frontend/src/components/amendingLaws/RisAmendingLawCard.spec.ts

@@ -0,0 +1,29 @@
+import { render, screen } from "@testing-library/vue"
+import { describe, expect, test } from "vitest"
+import RisAmendingLawCard from "./RisAmendingLawCard.vue"
+
+describe("RisAmendingLawCard", () => {
+  test("should render overview of open print amending law", () => {
+    render(RisAmendingLawCard, {
+      props: {
+        eli: "someEli",
+        printAnnouncementGazette: "GazetteName",
+        publicationDate: "2021-01-01",
+        printAnnouncementPage: "456",
+      },
+    })
+    expect(screen.getByText("GazetteName 2021 S. 456")).toBeInTheDocument()
+  })
+
+  test("should render overview of open digital amending law", () => {
+    render(RisAmendingLawCard, {
+      props: {
+        eli: "someEli",
+        digitalAnnouncementMedium: "DigitalGazette",
+        publicationDate: "2019-01-01",
+        digitalAnnouncementEdition: "123",
+      },
+    })
+    expect(screen.getByText("DigitalGazette 2019 Nr. 123")).toBeInTheDocument()
+  })
+})

frontend/src/components/amendingLaws/RisAmendingLawCard.story.vue

@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import RisAmendingLawCard from "./RisAmendingLawCard.vue"
+</script>
+
+<template>
+  <Story>
+    <RisAmendingLawCard
+      eli="4711"
+      print-announcement-gazette="BGBl. I"
+      print-announcement-page="12"
+      publication-date="2014-01-19"
+    />
+  </Story>
+</template>

frontend/src/components/amendingLaws/RisAmendingLawCard.vue

@@ -0,0 +1,57 @@
+<script setup lang="ts">
+import { computed } from "vue"
+import ExpandMoreIcon from "~icons/ic/baseline-expand-more"
+
+const props = defineProps<{
+  eli: string
+  printAnnouncementGazette?: string
+  digitalAnnouncementMedium?: string
+  publicationDate: string
+  printAnnouncementPage?: string
+  digitalAnnouncementEdition?: string
+}>()
+
+const gazetteOrMediumUpper = computed(() => {
+  return props.printAnnouncementGazette ?? props.digitalAnnouncementMedium ?? ""
+})
+
+const pageOrEdition = computed(() => {
+  if (props.printAnnouncementPage) {
+    return `S. ${props.printAnnouncementPage}`
+  } else if (props.digitalAnnouncementEdition) {
+    return `Nr. ${props.digitalAnnouncementEdition}`
+  } else {
+    return ""
+  }
+})
+
+const publicationYear = computed(() => props.publicationDate.substring(0, 4))
+
+const publicationDateGerman = computed(() => {
+  const options: Intl.DateTimeFormatOptions = {
+    day: "2-digit",
+    month: "2-digit",
+    year: "numeric",
+  }
+  return new Date(props.publicationDate).toLocaleDateString("de-DE", options)
+})
+</script>
+
+<template>
+  <div class="flex justify-between bg-white p-16 hover:bg-blue-200">
+    <div class="flex items-center">
+      <span class="ds-label-02-bold w-128 flex-none whitespace-nowrap">
+        {{ gazetteOrMediumUpper }} {{ publicationYear }} {{ pageOrEdition }}
+      </span>
+
+      <span class="publication-date ml-40">
+        {{ publicationDateGerman }}
+      </span>
+    </div>
+
+    <button class="text-blue-800">
+      <ExpandMoreIcon class="h-24 w-24" />
+      <span class="sr-only">Details anzeigen</span>
+    </button>
+  </div>
+</template>