Merge pull request #54 from samply/feature/export-styles-from-library

Feature/export styles from library
samply · Feb 26, 2024 · 034cfe2 · 034cfe2
2 parents b7776c5 + e18dc7a
commit 034cfe2
Show file tree

Hide file tree

Showing 19 changed files with 161 additions and 172 deletions.
diff --git a/README.md b/README.md
@@ -32,6 +32,22 @@ npm start
 
 to start a development server, that will typically be available at [http://localhost:5173](http://localhost:5173). For further available npm scripts, you can review the [package.json](./package.json)
 
+## Style Integration
+
+To import the default stylings, use 
+```css
+@import "path_to_node_modules/@samply/lens/dist/style.css";
+```
+in your main css file.
+
+Web components use "part" instead of "class". Here is how you can overwrite style properties:
+
+```css
+lens-info-button::part(info-button-icon) {
+  width: 20px;
+}
+```
+
 ## Roadmap 
 - On a short term, we plan on publishing the library on [npmjs](https://www.npmjs.com/). We plan to make it available as [@samply/lens](https://www.npmjs.com/package/@samply/lens)
 - After making the library available on npm, we will move the `AppCCP.svelte`, `AppBBMRI.svelte` and `AppGBA.svelte` to their separate repositories that are just using this library.

diff --git a/package.json b/package.json
@@ -6,14 +6,16 @@
   "module": "dist/lens.js",
   "main": "dist/lens.umd.js",
   "types": "dist/types.d.ts",
+  "styles": "dist/style.css",
   "files": [
     "dist"
   ],
   "exports": {
     ".": {
       "import": "./dist/lens.js",
       "require": "./dist/lens.umd.js",
-      "types": "./dist/types.d.ts"
+      "types": "./dist/types.d.ts",
+      "styles": "./dist/style.css"
     }
   },
   "license": "MIT",

diff --git a/packages/demo/src/AppCCP.svelte b/packages/demo/src/AppCCP.svelte
@@ -1,6 +1,4 @@
 <script lang="ts">
-    import "../../lib";
-
     import {
         dktkDiagnosisMeasure,
         dktkMedicationStatementsMeasure,

diff --git a/packages/demo/src/AppFragmentDevelopment.svelte b/packages/demo/src/AppFragmentDevelopment.svelte
@@ -1,8 +1,5 @@
 <script lang="ts">
-    import "../../lib";
     import type { QueryItem, QueryValue } from "../../lib/src/types/queryData";
-    // import "../../../dist/lib/lens-web-componets";
-    import type { CatalogueText } from "../../lib/src/types/texts";
 
     import {
         dktkDiagnosisMeasure,

diff --git a/packages/demo/src/ccp.css b/packages/demo/src/ccp.css
@@ -1,12 +1,6 @@
-@import url('./styles/default/searchbars.css');
-@import url('./styles/default/search-button.css');
-@import url('./styles/default/catalogue.css');
-@import url('./styles/default/results-overview.css');
-@import url('./styles/default/result-table.css');
-@import url('./styles/default/result-chart.css');
-@import url('./styles/default/negotiate-button.css');
-@import url('./styles/default/info-button.css');
-@import url('./styles/default/search-modified-display.css');
+/*comment in for npm package usage*/
+/* @import "../../../node_modules/@samply/lens/dist/style.css"; */
+@import "../../lib/src/styles/index.css";
 
 @font-face {
   font-family: 'Open Sans';
@@ -22,7 +16,7 @@
   --light-gray: #dee2e6;
   --lightest-gray: #efefef;
   --dark-gray: #323232;
-  --blue: #00489c;
+  --blue: #007bff;
   --light-blue: #007bff;
   --lightest-blue: #adc7f3;
   --dark-blue: #002d80;
@@ -91,6 +85,7 @@ header {
 .logo-dkfz {
   justify-self: end;
 }
+
 .logo-dkfz img {
   height: 30px;
 }
@@ -134,7 +129,7 @@ footer {
   border: solid 1px var(--lightest-gray);
   background-color: var(--white);
   grid-row: 1/-1;
-  overflow-y: scroll; 
+  overflow-y: scroll;
   height: 100vh;
   position: sticky;
   top: 40px;
@@ -178,7 +173,7 @@ footer {
 
 }
 
-.chart-age-distribution{
+.chart-age-distribution {
   grid-column: span 2;
 }
 
@@ -192,7 +187,8 @@ footer {
   .charts {
     grid-template-columns: repeat(3, 1fr);
   }
-  .chart-age-distribution{
+
+  .chart-age-distribution {
     grid-row: 3/4;
     grid-column: 2/4;
   }
@@ -223,7 +219,7 @@ footer {
   .charts {
     margin-left: 0px;
   }
-  
+
 }
 
 
@@ -249,6 +245,13 @@ footer {
   text-align: right;
 }
 
+
+.result-table-hint-text {
+  padding-top: 20px;
+  display: flex;
+  align-items: end;
+}
+
 /**
 * Overrides
 */
@@ -259,13 +262,16 @@ footer {
 lens-search-bar-multiple::part(lens-searchbar-chip) {
   background-color: var(--light-blue);
 }
+
 lens-search-bar-multiple::part(query-delete-button) {
   background-color: var(--light-blue);
   border-color: var(--light-blue);
 }
+
 lens-search-bar-multiple::part(query-delete-button-item) {
   border-color: var(--white);
 }
+
 lens-search-bar-multiple::part(query-delete-button-group) {
   background-color: var(--white);
   border-color: var(--white);
@@ -275,7 +281,9 @@ lens-search-button::part(lens-search-button) {
   background-color: var(--light-blue);
 }
 
-lens-search-button::part(lens-search-button):hover {background-color: #006adb}
+lens-search-button::part(lens-search-button):hover {
+  background-color: #006adb
+}
 
 lens-search-button::part(lens-search-button):active {
   background-color: #003d7e;
@@ -293,9 +301,11 @@ lens-catalogue::part(lens-catalogue) {
 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;
@@ -315,9 +325,9 @@ lens-catalogue::part(number-input-formfield) {
   text-align: center;
   font-size: var(--font-size-s);
   -webkit-appearance: textfield;
-  -moz-appearance:    textfield;
-  appearance:         textfield !important;
- 
+  -moz-appearance: textfield;
+  appearance: textfield !important;
+
 }
 
 lens-catalogue::part(number-input-formfield):focus {
@@ -327,8 +337,8 @@ lens-catalogue::part(number-input-formfield):focus {
 
 lens-catalogue::part(number-input-formfield)::-webkit-outer-spin-button,
 lens-catalogue::part(number-input-formfield)::-webkit-inner-spin-button {
-    -webkit-appearance: none;
-    margin: 0;
+  -webkit-appearance: none;
+  margin: 0;
 }
 
 lens-catalogue::part(data-tree-element-toggle-icon) {
@@ -366,7 +376,16 @@ lens-info-button::part(info-button-icon) {
   width: 21px;
 }
 
-.catalogue lens-info-button::part(info-button){
+lens-info-button::part(info-button-icon):hover,
+lens-result-summary::part(info-button-icon):hover,
+lens-result-table::part(info-button-icon):hover,
+lens-chart::part(info-button-icon):hover,
+lens-catalogue::part(info-button-icon):hover {
+  transform: scale(1.1);
+}
+
+
+.catalogue lens-info-button::part(info-button) {
   height: 38px;
   padding: 0;
   top: var(--gap-xs);
@@ -375,27 +394,7 @@ lens-info-button::part(info-button-icon) {
   position: absolute;
 }
 
-.catalogue lens-info-button::part(info-button-dialogue){
+.catalogue lens-info-button::part(info-button-dialogue) {
   max-width: 300px;
   text-align: left;
 }
-
-lens-info-button::part(info-button-dialogue):hover {background-color: #b8bfb8}
-
-lens-info-button::part(info-button):hover {background-color: #b8bfb8}
-
-lens-info-button::part(info-button):active {
-  background-color: #585958;
-  transform: translateX(1px);
-}
-
-lens-info-button::part(info-button-dialogue):active {
-  background-color: #585958;
-  transform: translateX(1px);
-}
-
-.result-table-hint-text {
-  padding-top: 20px;
- display: flex;
- align-items: end;
-}
diff --git a/packages/demo/src/fragment-development.css b/packages/demo/src/fragment-development.css
@@ -1,50 +1,5 @@
-@import url('./styles/default/searchbars.css');
-@import url('./styles/default/search-button.css');
-@import url('./styles/default/catalogue.css');
-@import url('./styles/default/results-overview.css');
-@import url('./styles/default/result-table.css');
-@import url('./styles/default/result-chart.css');
-
-
-:root {
-  font-family: Inter, Avenir, Helvetica, Arial, sans-serif;
-  --white: #ffffff;
-  --black: #000000;
-  --gray: #a7a7a7;
-  --light-gray: #dcdcdc;
-  --lightest-gray: #efefef;
-  --dark-gray: #323232;
-  --blue: #0047b9;
-  --light-blue: #0062ff;
-  --lightest-blue: #adc7f3;
-  --dark-blue: #002d80;
-  --green: #00882d;
-  --light-green: #00b33c;
-  --dark-green: #00591a;
-  --red: #b90000;
-  --light-red: #ff0000;
-  --dark-red: #800000;
-  --orange: #ff8a3c;
-  --light-orange: #ffa750;
-
-  --border-radius-small: 5px;
-
-  --gap-xxs: 5px;
-  --gap-xs: 10px;
-  --gap-s: 20px;
-  --gap-m: 30px;
-  --gap-l: 40px;
-  --gap-xl: 50px;
-  --gap-xxl: 60px;
-
-  --font-size-xxs: 10px;
-  --font-size-xs: 12px;
-  --font-size-s: 14px;
-  --font-size-m: 16px;
-  --font-size-l: 18px;
-  --font-size-xl: 24px;
-  --font-size-xxl: 32px;
-}
+@import "../../../node_modules/@samply/lens/dist/style.css";
+@import "../../lib/src/styles/index.css";
 
 /**
 * Demo

diff --git a/packages/demo/src/main.ts b/packages/demo/src/main.ts
@@ -1,3 +1,10 @@
+/**
+ * comment in for npm package usage
+ */
+// import "@samply/lens";
+
+import "../../lib";
+
 // import "./fragment-development.css";
 // import App from "./AppFragmentDevelopment.svelte";
 

diff --git a/packages/lib/index.ts b/packages/lib/index.ts
@@ -11,3 +11,5 @@ export { default as InfoButton } from "./src/components/buttons/InfoButtonCompon
 export { default as lensOptions } from "./src/components/Options.wc.svelte";
 export { default as DataPasser } from "./src/components/DataPasser.wc.svelte";
 export { default as ModifiedSearchComponent } from "./src/components/informational/ModifiedSearchComponent.wc.svelte";
+
+export * from "./src/styles/index.css";