IWidgetLink improvements (#1813)

* Added more customization to the IWidgetLink * Updated docs * Various updates to resolve GitHub conversations.
pnp · Aug 16, 2024 · 759d11b · 759d11b
1 parent 152cafe
commit 759d11b
Show file tree

Hide file tree

Showing 4 changed files with 36 additions and 6 deletions.
diff --git a/docs/documentation/docs/controls/Dashboard.md b/docs/documentation/docs/controls/Dashboard.md
@@ -22,6 +22,12 @@ import { WidgetSize, Dashboard } from '@pnp/spfx-controls-react/lib/Dashboard';
 
 ```TypeScript
 const linkExample = { href: "#" };
+const customizedLinkExample = {
+      href: "#",
+      title: "This is a customized link!",
+      color: "red",
+      target: "_top"
+    };
 const calloutItemsExample = [
   {
     id: "action_1",
@@ -71,7 +77,7 @@ const calloutItemsExample = [
   {
     title: "Card 2",
     size: WidgetSize.Single,
-    link: linkExample,
+    link: customizedLinkExample,
   },
   {
     title: "Card 3",
@@ -142,6 +148,9 @@ Provides Widget link properties
 | Property | Type | Required | Description |
 | ---- | ---- | ---- | ---- |
 | href | string | yes | Link to be opened. |
+| title | string | no | The text to display for the link, if not provided, the default text will be used. |
+| color | string | no | The color of the link, if not provided, the "default" color will be used. The available colors can be found on the [official Fluent UI documentation of the Text control](https://fluentsite.z22.web.core.windows.net/0.66.2/components/text/definition#variations-color). |
+| target | string | no | The target property value for the generated anchor tag, if not provided, the default target will be *_blank*. |
 
 Enum `WidgetSize`
 

diff --git a/src/controls/dashboard/widget/IWidget.ts b/src/controls/dashboard/widget/IWidget.ts
@@ -97,5 +97,20 @@ export interface IWidgetBodyContent {
  * Widget link
  */
 export interface IWidgetLink {
+  /**
+   * Link to be opened
+   */
   href: string;
+  /**
+   * The text to display for the link, if not provided, the default text will be used
+   */
+  title?: string;
+  /**
+   * The color of the link, if not provided, the "brand" color will be used. The available colors can be found on the [official Fluent UI documentation of the Text control](https://fluentsite.z22.web.core.windows.net/0.66.2/components/text/definition#variations-color)
+   */
+  color?: string;
+  /**
+   * The target for the generated anchor tag, if not provided, the default target will be _blank
+   */
+  target?: "_blank" | "_self" | "_parent" | "_top" | "framename";
 }
diff --git a/src/controls/dashboard/widget/WidgetFooter.tsx b/src/controls/dashboard/widget/WidgetFooter.tsx
@@ -9,10 +9,10 @@ export const WidgetFooter = ({ widget }: { widget: IWidget }): JSX.Element => (
             <Text
                 as="a"
                 href={widget.link.href}
-                target="_blank"
-                content={strings.ViewMore}
+                target={widget.link.target ?? "_blank"}
+                content={widget.link.title ?? strings.ViewMore}
                 size="small"
-                color="brand"
+                color={widget.link.color ?? "default"}
                 style={{ textDecoration: "none" }}
             />
         </Flex>

diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx
@@ -906,6 +906,12 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
     }];
 
     const linkExample = { href: "#" };
+    const customizedLinkExample = {
+      href: "#",
+      title: "This is a customized link!",
+      color: "red",
+      target: "_top"
+    };
     const calloutItemsExample = [
       {
         id: "action_1",
@@ -2049,7 +2055,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
             {
               title: "Card 2",
               size: WidgetSize.Single,
-              link: linkExample,
+              link: customizedLinkExample,
             },
             {
               title: "Card 3",
@@ -2059,7 +2065,7 @@ export default class ControlsTest extends React.Component<IControlsTestProps, IC
             {
               title: "Card 4",
               size: WidgetSize.Single,
-              link: linkExample,
+              link: customizedLinkExample,
             },
             {
               title: "Card 5",