feat(style): add ts4nfdi and custom styles

This is a proposal for the style issue and custom style feature. related to #184 #144
ts4nfdi · Jan 16, 2025 · 6060008 · 6060008
1 parent 2be1e16
commit 6060008
Show file tree

Hide file tree

Showing 19 changed files with 150 additions and 47 deletions.
diff --git a/src/app/types.ts b/src/app/types.ts
@@ -253,9 +253,9 @@ export type ColorSecondObj = {
 }
 
 
-export type BreadcrumbWidgetProps = ApiObj & OptionalEntityTypeObj & OptionalOntologyIdObj & ForcedIriObj & ParameterObj & UseLegacyObj & ColorFirstObj & ColorSecondObj & OnNavigateToOntology;
+export type BreadcrumbWidgetProps = ApiObj & OptionalEntityTypeObj & OptionalOntologyIdObj & ForcedIriObj & ParameterObj & UseLegacyObj & ColorFirstObj & ColorSecondObj & OnNavigateToOntology & CssClassNameObj;
 
-export type BreadcrumbPresentationProps = OptionalOntologyIdObj & ColorFirstObj & ColorSecondObj & {
+export type BreadcrumbPresentationProps = OptionalOntologyIdObj & ColorFirstObj & ColorSecondObj & CssClassNameObj & {
   ontologyName: string,
   shortForm: string,
 } & OnNavigateToOntology;

diff --git a/src/components/widgets/AutocompleteWidget/AutocompleteWidget.stories.tsx b/src/components/widgets/AutocompleteWidget/AutocompleteWidget.stories.tsx
@@ -38,7 +38,7 @@ export {
   WithDescriptionAndShortForm,
   TibNFDI4CHEM,
   TibDataPlant,
-  WithStyles
+  WithCustomStyles
 } from "./AutocompleteWidgetStories"
 
 

diff --git a/src/components/widgets/AutocompleteWidget/AutocompleteWidget.tsx b/src/components/widgets/AutocompleteWidget/AutocompleteWidget.tsx
@@ -56,6 +56,8 @@ function AutocompleteWidget(props: AutocompleteWidgetProps) {
    */
   const [selectedOptions, setSelectedOptions] = useState<Array<EuiComboBoxOptionOption<any>>>([]);
 
+  const finalClassName = className || "ts4nfdi-autocomplete-style";
+
   // eslint-disable-next-line @typescript-eslint/ban-ts-comment
   // @ts-ignore
   const renderOption = (option, searchValue) => {
@@ -84,7 +86,7 @@ function AutocompleteWidget(props: AutocompleteWidgetProps) {
 
     const renderOntology = () => {
       return (
-        <span className={className}>
+        <span className={finalClassName}>
           <EuiHealth
             color={dotColor}>
                 <span>
@@ -99,7 +101,7 @@ function AutocompleteWidget(props: AutocompleteWidgetProps) {
 
     const renderEntityWithDescription = () => {
       return (
-        <span title={hoverText} style={{ height: 200 + "px" }} className={className}>
+        <span title={hoverText} style={{ height: 200 + "px" }} className={finalClassName}>
             <EuiHealth
               color={dotColor}>
                 <span>
@@ -336,7 +338,7 @@ function AutocompleteWidget(props: AutocompleteWidgetProps) {
     setSelectedOptions(singleSelection ? [newOption] : [...selectedOptions, newOption]);
   }
   return (
-    <div className={className}>
+    <div className={finalClassName}>
       <EuiComboBox
         isClearable
         aria-label="searchBar"

diff --git a/src/components/widgets/AutocompleteWidget/AutocompleteWidgetHTML.stories.ts b/src/components/widgets/AutocompleteWidget/AutocompleteWidgetHTML.stories.ts
@@ -71,5 +71,5 @@ export {
     WithDescriptionAndShortForm,
     TibNFDI4CHEM,
     TibDataPlant,
-    WithStyles
+    WithCustomStyles
 } from "./AutocompleteWidgetStories"
diff --git a/src/components/widgets/AutocompleteWidget/AutocompleteWidgetStories.ts b/src/components/widgets/AutocompleteWidget/AutocompleteWidgetStories.ts
@@ -1,5 +1,5 @@
 import * as globals from '../../../app/globals';
-import "../../../style/autocompleteStyles.css";
+import "../../../style/ts4nfdiAutocompleteStyle.css";
 
 import { action } from "@storybook/addon-actions";
 import {
@@ -180,7 +180,7 @@ export const TibDataPlant = {
   }
 };
 
-export const WithStyles = {
+export const WithCustomStyles = {
   args: {
     api: globals.TIB_API_ENDPOINT,
     parameter: "classification=NFDI4CHEM&schema=collection",

diff --git a/src/components/widgets/MetadataWidget/BreadcrumbWidget/BreadcrumbPresentation.tsx b/src/components/widgets/MetadataWidget/BreadcrumbWidget/BreadcrumbPresentation.tsx
@@ -5,7 +5,7 @@ import {BreadcrumbPresentationProps} from "../../../../app/types";
 function BreadcrumbPresentation(props: BreadcrumbPresentationProps) {
   return (
     <>
-        <span>
+        <span className={props.className}>
             <button onClick={() => {if(props.onNavigateToOntology) props.onNavigateToOntology(props.ontologyId || "", undefined, undefined)}}>
                 <EuiBadge className={props.ontologyId ? "breadcrumb clickable-breadcrumb" : "breadcrumb"} color={props.colorFirst || "primary"}>
                     {props.ontologyName ? props.ontologyName.toUpperCase() : "No ontology name available"}

diff --git a/src/components/widgets/MetadataWidget/BreadcrumbWidget/BreadcrumbWidget.stories.tsx b/src/components/widgets/MetadataWidget/BreadcrumbWidget/BreadcrumbWidget.stories.tsx
@@ -25,7 +25,10 @@ export default {
 };
 
 export {
+    BreadcrumbWidgetDefault,
     SelectingDefiningOntology,
     DefiningOntologyUnavailable,
-    ErrorBreadcrumbWidget
+    ErrorBreadcrumbWidget,
+    CustomColors,
+    CustomStyle,
 } from "./BreadcrumbWidgetStories"
diff --git a/src/components/widgets/MetadataWidget/BreadcrumbWidget/BreadcrumbWidget.tsx b/src/components/widgets/MetadataWidget/BreadcrumbWidget/BreadcrumbWidget.tsx
@@ -1,17 +1,18 @@
 import React from "react";
-import {EuiBadge, EuiIcon, EuiLoadingSpinner, EuiProvider} from "@elastic/eui";
+import {EuiLoadingSpinner, EuiProvider} from "@elastic/eui";
 import {OlsApi} from "../../../../api/OlsApi";
 import { getErrorMessageToDisplay } from "../../../../app/util";
 import {BreadcrumbWidgetProps} from "../../../../app/types";
 import {isEntity} from "../../../../model/ModelTypeCheck";
 import { BreadcrumbPresentation } from "./BreadcrumbPresentation";
 import {QueryClient, QueryClientProvider, useQuery} from "react-query";
 import ReactDOM from "react-dom";
-import "../../../../style/semlookp-styles.css";
+
 
 function BreadcrumbWidget(props: BreadcrumbWidgetProps) {
-  const { api, ontologyId, iri, entityType, colorFirst, colorSecond, parameter , useLegacy, onNavigateToOntology} = props;
+  const { api, ontologyId, iri, entityType, colorFirst, colorSecond, parameter , useLegacy, onNavigateToOntology, className} = props;
   const olsApi = new OlsApi(api);
+  const finalClassName = className || "ts4nfdi-breadcrumb-style";
 
   const {
     data,
@@ -28,15 +29,7 @@ function BreadcrumbWidget(props: BreadcrumbWidgetProps) {
 
   return (
     <>
-      {isLoading &&
-          <span>
-            <button onClick={() => {if(props.onNavigateToOntology && props.ontologyId) props.onNavigateToOntology(props.ontologyId || "", undefined, undefined)}}>
-                <EuiBadge className={props.ontologyId ? "breadcrumb clickable-breadcrumb" : "breadcrumb"} color={colorFirst || ((props.ontologyId) ? "primary" : "warning")}>{props.ontologyId?.toUpperCase() || <EuiLoadingSpinner size={"s"}/>}</EuiBadge>
-            </button>
-             &nbsp;<EuiIcon type="arrowRight"/>&nbsp;
-            <EuiBadge className="breadcrumb" color={colorSecond || "warning"}>{<EuiLoadingSpinner size={"s"}/>}</EuiBadge>
-          </span>
-      }
+      {isLoading && <EuiLoadingSpinner size={"s"}/>}
       {isSuccess && data && isEntity(data) &&
         <BreadcrumbPresentation
           ontologyName={data.getOntologyId()}
@@ -45,6 +38,7 @@ function BreadcrumbWidget(props: BreadcrumbWidgetProps) {
           colorFirst={colorFirst}
           colorSecond={colorSecond}
           onNavigateToOntology={onNavigateToOntology}
+          className={finalClassName}
         />
       }
       {isError &&
@@ -55,6 +49,7 @@ function BreadcrumbWidget(props: BreadcrumbWidgetProps) {
               colorFirst={colorFirst || ((props.ontologyId || (data && data.getOntologyId())) ? "primary" : "danger")}
               colorSecond={colorSecond || ((data && data.getShortForm()) ? "success" : "danger")}
               onNavigateToOntology={onNavigateToOntology}
+              className={finalClassName}
           />
       }
       </>

diff --git a/src/components/widgets/MetadataWidget/BreadcrumbWidget/BreadcrumbWidgetStories.ts b/src/components/widgets/MetadataWidget/BreadcrumbWidget/BreadcrumbWidgetStories.ts
@@ -6,6 +6,8 @@ import {
     ontologyIdArgType,
     parameterArgType, useLegacyArgType
 } from "../../../../stories/storyArgs";
+import "../../../../style/ts4nfdiBreadcrumbStyle.css";
+import "../../../../style/customBreadcrumbStyle.css";
 
 export const BreadcrumbWidgetStoryArgTypes = {
   ...apiArgType,
@@ -31,7 +33,7 @@ export const BreadcrumbWidgetStoryArgs = {
   onNavigateToOntology: "Console message"
 };
 
-export const BreadcrumbWidget1 = {
+export const BreadcrumbWidgetDefault = {
     args: {
         iri: "http://purl.obolibrary.org/obo/NCIT_C2985",
         api: globals.ZBMED_API_ENDPOINT,
@@ -68,3 +70,28 @@ export const ErrorBreadcrumbWidget = {
         parameter: "collection=nfdi4health",
     }
 };
+
+export const CustomColors = {
+    args: {
+        iri: "http://purl.obolibrary.org/obo/NCIT_C2985",
+        api: globals.ZBMED_API_ENDPOINT,
+        ontologyId: "ncit",
+        entityType: "term",
+        parameter: "collection=nfdi4health",
+        colorFirst: "red",
+        colorSecond: "grey",
+    }
+};
+
+export const CustomStyle = {
+    args: {
+        iri: "http://purl.obolibrary.org/obo/NCIT_C2985",
+        api: globals.ZBMED_API_ENDPOINT,
+        ontologyId: "ncit",
+        entityType: "term",
+        parameter: "collection=nfdi4health",
+        colorFirst: "#eced8e",
+        colorSecond: "#8eaeed",
+        className: "custom-breadcrumb-style"
+    }
+};
diff --git a/src/components/widgets/MetadataWidget/TitleWidget/TitleWidget.stories.tsx b/src/components/widgets/MetadataWidget/TitleWidget/TitleWidget.stories.tsx
@@ -24,5 +24,6 @@ export {
     IncorrectIriWithoutDefaultValue,
     SelectingDefiningOntology,
     DefiningOntologyUnavailable,
-    TitleWidgetWithStyles
+    TitleWidgetWithStyles,
+    TitleWidgetWithoutStyles,
 } from "./TitleWidgetStories";
diff --git a/src/components/widgets/MetadataWidget/TitleWidget/TitleWidget.tsx b/src/components/widgets/MetadataWidget/TitleWidget/TitleWidget.tsx
@@ -24,7 +24,7 @@ function TitleWidget(props: TitleWidgetProps) {
     className
   } = props;
   const olsApi = new OlsApi(api);
-  const finalClassName = className || "default-class";
+  const finalClassName = className || "ts4nfdi-title-style";
 
   const {
     data,

diff --git a/src/components/widgets/MetadataWidget/TitleWidget/TitleWidgetStories.ts b/src/components/widgets/MetadataWidget/TitleWidget/TitleWidgetStories.ts
@@ -8,7 +8,7 @@ import {
   thingTypeArgType,
   titleTextArgType, useLegacyArgType
 } from "../../../../stories/storyArgs";
-import "../../../../style/titleStyles.css";
+import "../../../../style/ts4nfdiTitleStyles.css";
 
 export const TitleWidgetStoryArgTypes = {
   ...apiArgType,
@@ -96,7 +96,17 @@ export const TitleWidgetWithStyles = {
         api: globals.ZBMED_API_ENDPOINT,
         ontologyId: "ncit",
         thingType: "term",
-        className: 'title-styles',
+        className: 'custom-title-style',
+    }
+};
+
+export const TitleWidgetWithoutStyles = {
+    args: {
+        iri: "http://purl.obolibrary.org/obo/NCIT_C2985",
+        api: globals.ZBMED_API_ENDPOINT,
+        ontologyId: "ncit",
+        thingType: "term",
+        className: 'none',
     }
 };
 

diff --git a/src/style/autocompleteStyles.css → src/style/customAutocompleteStyle.css b/src/style/autocompleteStyles.css → src/style/customAutocompleteStyle.css
@@ -1,5 +1,4 @@
 .custom-autocomplete-style * {
-  font-size: 18px !important;
   font-family: 'Inter',BlinkMacSystemFont,Helvetica,Arial,sans-serif;
 }
 
@@ -20,4 +19,4 @@
 
 .euiComboBoxOptionsList__empty {
   font-family: 'Inter',BlinkMacSystemFont,Helvetica,Arial,sans-serif;
-}
+}
diff --git a/src/style/customBreadcrumbStyle.css b/src/style/customBreadcrumbStyle.css
@@ -0,0 +1,26 @@
+.custom-breadcrumb-style * {
+}
+
+.custom-breadcrumb-style button {
+  background: none;
+  border: none;
+}
+
+.euiBadge * {
+  font-family: 'Inter',BlinkMacSystemFont,Helvetica,Arial,sans-serif;
+}
+
+.custom-breadcrumb-style .clickable-breadcrumb {
+
+}
+
+.custom-breadcrumb-style .breadcrumb {
+    padding: 6px 6px 0;
+    border-radius: 0;
+    border: 10px solid rgba(0,0,0,0);
+
+}
+
+.custom-breadcrumb-style .clickable-breadcrumb:hover {
+    border: 2px solid black;
+}
diff --git a/src/style/semlookp-styles.css b/src/style/semlookp-styles.css
@@ -5,20 +5,6 @@ button {
     user-select: text;
 }
 
-.clickable-breadcrumb {
-
-}
-
-.breadcrumb {
-    padding: 3px 3px 0;
-    border-radius: 6px;
-    border: 2px solid rgba(0,0,0,0);
-}
-
-.clickable-breadcrumb:hover {
-    border: 2px solid black;
-}
-
 .surroundCircle {
     border-radius: 50%;
     height: 17px;

diff --git a/src/style/titleStyles.css b/src/style/titleStyles.css
diff --git a/src/style/ts4nfdiAutocompleteStyle.css b/src/style/ts4nfdiAutocompleteStyle.css
@@ -0,0 +1,21 @@
+.ts4nfdi-autocomplete-style * {
+  font-family: 'Inter',BlinkMacSystemFont,Helvetica,Arial,sans-serif;
+}
+
+.ts4nfdi-autocomplete-style input,
+.ts4nfdi-autocomplete-style .euiComboBox__inputWrap{
+}
+
+.ts4nfdi-autocomplete-style button {
+  background: none;
+  border: none;
+}
+
+.euiComboBoxOptionsList * {
+  border: none;
+  background-color: inherit;
+}
+
+.euiComboBoxOptionsList__empty {
+  font-family: 'Inter',BlinkMacSystemFont,Helvetica,Arial,sans-serif;
+}
diff --git a/src/style/ts4nfdiBreadcrumbStyle.css b/src/style/ts4nfdiBreadcrumbStyle.css
@@ -0,0 +1,25 @@
+.ts4nfdi-breadcrumb-style * {
+}
+
+.ts4nfdi-breadcrumb-style button {
+  background: none;
+  border: none;
+}
+
+.euiBadge * {
+  font-family: 'Inter',BlinkMacSystemFont,Helvetica,Arial,sans-serif;
+}
+
+.ts4nfdi-breadcrumb-style .clickable-breadcrumb {
+
+}
+
+.ts4nfdi-breadcrumb-style .breadcrumb {
+    padding: 3px 3px 0;
+    border-radius: 6px;
+    border: 2px solid rgba(0,0,0,0);
+}
+
+.ts4nfdi-breadcrumb-style .clickable-breadcrumb:hover {
+    border: 2px solid black;
+}
diff --git a/src/style/ts4nfdiTitleStyles.css b/src/style/ts4nfdiTitleStyles.css
@@ -0,0 +1,11 @@
+.ts4nfdi-title-style * {
+  font-family: 'Inter',BlinkMacSystemFont,Helvetica,Arial,sans-serif;
+  color: #343741 !important;
+}
+
+.custom-title-style * {
+  font-family: 'Inter',BlinkMacSystemFont,Helvetica,Arial,sans-serif;
+  color: #0645AD !important;
+  background-color: #76b6ec;
+}
+