Merge pull request #39 from samply/fix/info-button

fix(result summary): change info button to svelte component
samply · Jan 23, 2024 · 28d7a07 · 28d7a07
2 parents 9fb5cec + 17451c9
commit 28d7a07
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 4 deletions.
diff --git a/.github/workflows/docker-develop.yml b/.github/workflows/docker-develop.yml
@@ -13,7 +13,7 @@ jobs:
     # Visit: https://github.com/samply/github-workflows/blob/main/.github/workflows/docker-ci.yml, for more information
     uses: samply/github-workflows/.github/workflows/docker-ci.yml@main
     with:
-      image-name: "samply/lens-web-components"
+      image-name: "samply/lens"
       build-args: |
         TARGET_ENVIRONMENT=staging
     # This passes the secrets from calling workflow to the called workflow

diff --git a/.github/workflows/docker.yml b/.github/workflows/docker.yml
@@ -19,7 +19,7 @@ jobs:
     # Visit: https://github.com/samply/github-workflows/blob/main/.github/workflows/docker-ci.yml, for more information
     uses: samply/github-workflows/.github/workflows/docker-ci.yml@main
     with:
-      image-name: "samply/lens-web-components"
+      image-name: "samply/lens"
       build-args: |
         TARGET_ENVIRONMENT=production
     # This passes the secrets from calling workflow to the called workflow

diff --git a/packages/demo/src/styles/default/results-overview.css b/packages/demo/src/styles/default/results-overview.css
@@ -16,4 +16,34 @@ lens-result-summary {
     align-items: center;
     justify-content: space-around;
     gap: 10px
-  }
+  }
+
+  lens-result-summary::part(info-button) {
+    position: relative;
+    cursor: pointer;
+    height: 100%;
+    border: none;
+    background-color: var(--white);
+    border-radius: var(--border-radius-small);
+}
+  lens-result-summary::part(info-button-icon) {
+    width: 16px;
+}
+
+lens-result-summary::part(info-button-title) {
+    font-family: var(--font-family);
+}
+
+lens-result-summary::part(info-button-dialogue) {
+    position: absolute;
+    border: none;
+    background-color: var(--white);
+    width: max-content;
+    max-width: 30vw;
+    z-index: 100;
+    padding: var(--gap-s);
+    top: 40px;
+    left: 0px;
+    border: solid 1px var(--light-blue);
+    border-radius: var(--border-radius-small);
+}
diff --git a/packages/lib/src/components/results/ResultSummaryComponent.wc.svelte b/packages/lib/src/components/results/ResultSummaryComponent.wc.svelte
@@ -68,6 +68,7 @@ lens-info-button::part(info-button-dialogue) {
         getAggregatedPopulationForStratumCode,
     } from "../../stores/response";
     import type { ResponseStore } from "../../types/backend";
+    import InfoButtonComponent from "../buttons/InfoButtonComponent.wc.svelte";
 
 
     let options: any = {};
@@ -154,7 +155,7 @@ lens-info-button::part(info-button-dialogue) {
         </h4>
        </div>
        <div class="info">
-        <lens-info-button
+        <InfoButtonComponent
         infoIconUrl="info-circle-svgrepo-com.svg"
         message={[
             `Um eine Re-Identifizierung zu erschweren, werden Standortergebnisse modifiziert und auf Zehnerstellen gerundet. Meldet ein Standort keinen Treffer, wird für diesen null angezeigt.`