From 8f96657bda59ee5bfbc136e2cb8c9d872dca69b4 Mon Sep 17 00:00:00 2001
From: Mats Johansen <mats.johansen@dkfz-heidelberg.de>
Date: Thu, 26 Oct 2023 16:00:18 +0200
Subject: [PATCH] feat(catalogue): add heading and info button

---
 packages/demo/src/AppCCP.svelte |  8 +++++
 packages/demo/src/ccp.css       | 58 ++++++++++++++++++++++++++-------
 2 files changed, 55 insertions(+), 11 deletions(-)

diff --git a/packages/demo/src/AppCCP.svelte b/packages/demo/src/AppCCP.svelte
index 237bee82..9fb6070e 100644
--- a/packages/demo/src/AppCCP.svelte
+++ b/packages/demo/src/AppCCP.svelte
@@ -226,6 +226,14 @@
   </div>
   <div class="grid">
     <div class="catalogue">
+      <h2>Suchkriterien</h2>
+      <lens-info-button
+        infoIconUrl="info-circle-svgrepo-com.svg"
+        message={[
+          `Bei Patienten mit mehreren onkologischen Diagnosen, können sich ausgewählte Suchkriterien nicht nur auf eine Erkrankung beziehen, sondern auch auf Weitere.`,
+          `Innerhalb einer Kategorie werden verschiedene Ausprägungen mit einer „Oder-Verknüpfung“ gesucht; bei der Suche über mehrere Kategorien mit einer „Und-Verknüpfung“.`
+        ]}
+      />
       <lens-catalogue
         toggleIconUrl="right-arrow-svgrepo-com.svg"
         addIconUrl="long-right-arrow-svgrepo-com.svg"
diff --git a/packages/demo/src/ccp.css b/packages/demo/src/ccp.css
index 441d022a..4b12f486 100644
--- a/packages/demo/src/ccp.css
+++ b/packages/demo/src/ccp.css
@@ -137,9 +137,18 @@ footer {
   overflow-y: scroll; 
   height: 100vh;
   position: sticky;
-  top: 0;
+  top: 40px;
 }
 
+.catalogue h2 {
+  margin: 0;
+  margin-bottom: var(--gap-s);
+  font-size: var(--font-size-l);
+  font-weight: 400;
+  color: var(--dark-gray);
+}
+
+
 .charts {
   display: grid;
   grid-template-columns: repeat(4, 1fr);
@@ -239,16 +248,9 @@ footer {
 * Overrides
 */
 
-lens-catalogue::part(autocomplete-formfield-input):focus {
-  border-color: var(--light-blue);
-}
-lens-catalogue::part(query-add-button) {
-  background-color: var(--light-blue);
-}
-lens-catalogue::part(number-input-formfield):focus {
-  border-color: var(--light-blue);
-  outline: none;
-}
+/**
+  Searchbars
+*/
 lens-search-bar-multiple::part(lens-searchbar-chip) {
   background-color: var(--light-blue);
 }
@@ -268,6 +270,26 @@ lens-search-button::part(lens-search-button) {
   background-color: var(--light-blue);
 }
 
+
+/**
+  Catalogue
+*/
+
+lens-catalogue::part(lens-catalogue) {
+  padding-left: 8px;
+}
+
+lens-catalogue::part(autocomplete-formfield-input):focus {
+  border-color: var(--light-blue);
+}
+lens-catalogue::part(query-add-button) {
+  background-color: var(--light-blue);
+}
+lens-catalogue::part(number-input-formfield):focus {
+  border-color: var(--light-blue);
+  outline: none;
+}
+
 .chart-diagnosis lens-chart::part(chart-canvas) {
   width: 100%;
   max-height: 1000px;
@@ -332,3 +354,17 @@ lens-info-button::part(info-button) {
 lens-info-button::part(info-button-icon) {
   width: 21px;
 }
+
+.catalogue lens-info-button::part(info-button){
+  height: 38px;
+  padding: 0;
+  top: var(--gap-xs);
+  right: var(--gap-xs);
+  border: none;
+  position: absolute;
+}
+
+.catalogue lens-info-button::part(info-button-dialogue){
+  max-width: 300px;
+  text-align: left;
+}
\ No newline at end of file