feat(IriWidget): add custom style property

Add custom style feature and fix the global style problem for the IriWidget. Related to #184 #144
ts4nfdi · Feb 5, 2025 · 546ca02 · 546ca02
1 parent 65fd65c
commit 546ca02
Show file tree

Hide file tree

Showing 6 changed files with 21 additions and 5 deletions.
diff --git a/dist_plainjs/manually_maintained_types.d.ts b/dist_plainjs/manually_maintained_types.d.ts
@@ -127,6 +127,7 @@ declare global {
       externalIcon?: boolean;
       urlPrefix?: string;
       copyButton?: 'right' | 'left' | 'none';
+      className?: string;
     }
     )=>void,
     createTab:(props:{

diff --git a/src/app/types.ts b/src/app/types.ts
@@ -278,7 +278,7 @@ export type DescriptionPresentationProps = DescTextObj & {
   description: string,
 }
 
-export type IriWidgetProps = ForcedIriObj & {
+export type IriWidgetProps = ForcedIriObj & CssClassNameObj & {
   /**
    * Set your own text manually, which will show as a clickable link instead of the IRI.
    */

diff --git a/src/components/widgets/MetadataWidget/IriWidget/IriWidget.tsx b/src/components/widgets/MetadataWidget/IriWidget/IriWidget.tsx
@@ -4,16 +4,19 @@ import {IriWidgetProps} from "../../../../app/types";
 import { isEuiButtonColor, isEuiLinkColor, isHexColor, isRgbColor } from "../../../../app/util";
 import ReactDOM from "react-dom";
 import {QueryClient, QueryClientProvider} from "react-query";
+import "../../../../style/ts4nfdiStyles/ts4nfdiIriStyle.css"
 
 function IriWidget(props: IriWidgetProps) {       
-  const { iri, iriText, color, externalIcon, urlPrefix, copyButton } = props;
+  const { iri, iriText, color, externalIcon, urlPrefix, copyButton, className } = props;
   const [copied, setCopied] = useState(false);
   const urlPrefixExist = typeof(urlPrefix) !== "undefined" && urlPrefix !== "" ? true : false;
   const iriUrl = urlPrefixExist ? urlPrefix + encodeURIComponent(iri) : iri;
+  const finalClassName = className || "ts4nfdi-iri-style";
 
   const CopyLinkButton = () => {
     if (!copied) {
       return (
+        <div className={finalClassName}>
         <EuiButtonIcon 
           display="base"
           iconType="copy"                       
@@ -27,9 +30,11 @@ function IriWidget(props: IriWidgetProps) {
           }}
           >            
         </EuiButtonIcon>
+          </div>
       );
     }
     return (
+      <div className={finalClassName}>
       <EuiButtonIcon 
         style={{marginLeft: "5px", color: color && (isHexColor(color) || isRgbColor(color)) ? color : ""}}   
         display="base" 
@@ -38,12 +43,13 @@ function IriWidget(props: IriWidgetProps) {
         color={color && isEuiLinkColor(color) ? color : undefined}
         >
       </EuiButtonIcon>
+        </div>
     );    
   };
 
   return (
     <EuiFlexItem grow={false}>
-      <div>
+      <div className={finalClassName}>
         {copyButton === 'left' && <CopyLinkButton />}
         <EuiLink 
           href={iriUrl} 
@@ -76,6 +82,7 @@ function WrappedIriWidget(props: IriWidgetProps) {
                     externalIcon={props.externalIcon}
                     urlPrefix={props.urlPrefix}
                     copyButton={props.copyButton}
+                    className={props.className}
                 />
             </QueryClientProvider>
         </EuiProvider>

diff --git a/src/components/widgets/MetadataWidget/IriWidget/IriWidgetHTML.stories.ts b/src/components/widgets/MetadataWidget/IriWidget/IriWidgetHTML.stories.ts
@@ -36,7 +36,8 @@ window['SemLookPWidgets'].createIri(
         color:"${args.color}",
         externalIcon: ${args.externalIcon},
         urlPrefix:"${args.urlPrefix}",
-        copyButton: "${args.copyButton}"
+        copyButton: "${args.copyButton}",
+        className:${args.className}
     },
     document.querySelector('#iri_widget_container_${num}')
 )

diff --git a/src/components/widgets/MetadataWidget/IriWidget/IriWidgetStories.ts b/src/components/widgets/MetadataWidget/IriWidget/IriWidgetStories.ts
@@ -1,18 +1,21 @@
 import {
+    classNameArgType,
     colorArgType,
     colorSecondArgType, copyButtonArgType,
     externalIconArgType,
     iriArgType,
     iriTextArgType, urlPrefixArgType
 } from "../../../../stories/storyArgs";
+import "../../../../style/ts4nfdiStyles/ts4nfdiIriStyle.css"
 
 export const IriWidgetStoryArgTypes = {
     ...colorArgType,
     ...iriArgType,
     ...iriTextArgType,
     ...externalIconArgType,
     ...urlPrefixArgType,
-    ...copyButtonArgType
+    ...copyButtonArgType,
+    ...classNameArgType,
 }
 
 export const IriWidgetStoryArgs = {
@@ -21,6 +24,7 @@ export const IriWidgetStoryArgs = {
     iriText: "",
     urlPrefix: "",
     externalIcon: true,
+    className: "",
 }
 
 export const IriWidget1 = {

diff --git a/src/style/ts4nfdiStyles/ts4nfdiIriStyle.css b/src/style/ts4nfdiStyles/ts4nfdiIriStyle.css
@@ -0,0 +1,3 @@
+.ts4nfdi-iri-style * {
+  font-family: 'Inter',BlinkMacSystemFont,Helvetica,Arial,sans-serif;
+}