diff --git a/web/src/components/information-sharing-agreements/InformationSharingAgreementAdditionalDetailsCard.vue b/web/src/components/information-sharing-agreements/InformationSharingAgreementAdditionalDetailsCard.vue
new file mode 100644
index 00000000..c5e9fdcf
--- /dev/null
+++ b/web/src/components/information-sharing-agreements/InformationSharingAgreementAdditionalDetailsCard.vue
@@ -0,0 +1,258 @@
+
+
+
+ mdi-clipboard-text-outline
+ Additional Details
+
+
+
+
+
+ 2. Level of detail appropriate for the Traditional Knowledge (TK)
+
+
+
+ Not specified
+
+
+
Additional requirements
+
{{ detailNotes }}
+
+
+
+ 3. Format(s) the Traditional Knowledge (TK) is shared in
+
+
+
+ Not specified
+
+
+
+ 7. Any reference to the Traditional Knowledge (TK) is credited to
+
+
+
+ Not specified
+
+
+
Credit details
+
{{ creditNotes }}
+
+
+
8. Expiration notifications
+
+
+ Not specified
+
+
+
Additional expiration requirements
+
{{ expirationNotes }}
+
+
+
+ 9. In the event of a breach or violation of this agreement
+
+
+
+ Not specified
+
+
+
Additional breach measures
+
{{ breachNotes }}
+
+
+
10. Compelled disclosure
+
+ {{ disclosureNotes }}
+
+
+ Not specified
+
+
["$props"]
+ > = {}
+) {
+ return mount(InformationSharingAgreementAdditionalDetailsCard, {
+ props: {
+ detailLevel: null,
+ detailNotes: null,
+ formats: null,
+ creditLines: null,
+ creditNotes: null,
+ expirationActions: null,
+ expirationNotes: null,
+ breachActions: null,
+ breachNotes: null,
+ disclosureNotes: null,
+ ...props,
+ },
+ global: {
+ plugins: [mockVuetify(), i18n],
+ },
+ })
+}
+
+describe("InformationSharingAgreementAdditionalDetailsCard.vue", () => {
+ it("renders the translated labels for selected comma-joined options", () => {
+ const wrapper = mountCard({
+ detailLevel: "original,summary",
+ formats: "word_documents,photos",
+ creditLines: "external_organization",
+ })
+
+ const text = wrapper.text()
+ expect(text).toContain("Original: No alterations or summary")
+ expect(text).toContain("Summary: Notes, high-level summary, redacted portions")
+ expect(text).toContain("Word documents")
+ expect(text).toContain("Photos")
+ expect(text).toContain("Yukon First Nation or Indigenous Government")
+ })
+
+ it("renders the free-text notes for completed sections", () => {
+ const wrapper = mountCard({
+ detailNotes: "Review required before summarizing.",
+ disclosureNotes: "Notify the community before any compelled disclosure.",
+ })
+
+ const text = wrapper.text()
+ expect(text).toContain("Review required before summarizing.")
+ expect(text).toContain("Notify the community before any compelled disclosure.")
+ })
+
+ it("shows a placeholder for every optional section when nothing is filled in", () => {
+ const wrapper = mountCard()
+
+ const placeholders = wrapper.text().match(/Not specified/g) ?? []
+ // Sections 2, 3, 7, 8, 9 and 10 each fall back to the placeholder.
+ expect(placeholders).toHaveLength(6)
+ })
+
+ it("ignores values that are not valid options", () => {
+ const wrapper = mountCard({ formats: "word_documents,not_a_real_format" })
+
+ const text = wrapper.text()
+ expect(text).toContain("Word documents")
+ expect(text).not.toContain("not_a_real_format")
+ })
+})