diff --git a/docs/documentation/docs/controls/Dashboard.md b/docs/documentation/docs/controls/Dashboard.md index 83b2b50b1..eac26fdd5 100644 --- 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 index 5023dd36c..b25d59e67 100644 --- a/src/controls/dashboard/widget/IWidget.ts +++ b/src/controls/dashboard/widget/IWidget.ts @@ -96,5 +96,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 index 6260b4172..6b210753d 100644 --- 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 => ( diff --git a/src/webparts/controlsTest/components/ControlsTest.tsx b/src/webparts/controlsTest/components/ControlsTest.tsx index f2c3dc4c5..c7fdd14ef 100644 --- a/src/webparts/controlsTest/components/ControlsTest.tsx +++ b/src/webparts/controlsTest/components/ControlsTest.tsx @@ -903,6 +903,12 @@ export default class ControlsTest extends React.Component