From c71de1de81504f753b3cf0f94476b6767ec646af Mon Sep 17 00:00:00 2001 From: muhd afnan Date: Sat, 4 Oct 2025 13:24:38 +0800 Subject: [PATCH 1/4] Feature:(SSD-168) SPLaSK compliance - Broadcast, Number of online services, Freedom of Information, Online Procurement Announcement, E-participation, privacy policy on link component and E-participation on button component --- .changeset/lemon-tables-beam.md | 5 ++ packages/react/src/components/button.tsx | 26 +++++--- packages/react/src/components/link.tsx | 83 ++++++++++++++++++++++-- 3 files changed, 101 insertions(+), 13 deletions(-) create mode 100644 .changeset/lemon-tables-beam.md diff --git a/.changeset/lemon-tables-beam.md b/.changeset/lemon-tables-beam.md new file mode 100644 index 00000000..67e1d709 --- /dev/null +++ b/.changeset/lemon-tables-beam.md @@ -0,0 +1,5 @@ +--- +"@govtechmy/myds-react": patch +--- + +SPLaSK compliance - Broadcast, Number of online services, Freedom of Information, Online Procurement Announcement, E-participation, privacy policy on link component and E-participation on button component diff --git a/packages/react/src/components/button.tsx b/packages/react/src/components/button.tsx index a3ff9481..c88c1525 100644 --- a/packages/react/src/components/button.tsx +++ b/packages/react/src/components/button.tsx @@ -115,6 +115,7 @@ export interface ButtonProps VariantProps { asChild?: boolean; iconOnly?: boolean; + SplaskOnlineEParticipation?: boolean; } const Button: ForwardRefExoticComponent = forwardRef( @@ -126,22 +127,29 @@ const Button: ForwardRefExoticComponent = forwardRef( children, asChild = false, iconOnly = false, + SplaskOnlineEParticipation, ...props }, ref, ) => { const Comp = asChild ? Slot : "button"; + const buttonElement = ( + + {children} + + ); + + if (!SplaskOnlineEParticipation) return buttonElement; + return ( - - - {children} - - +
+ {buttonElement} +
); }, ); diff --git a/packages/react/src/components/link.tsx b/packages/react/src/components/link.tsx index d36686b3..c62d437d 100644 --- a/packages/react/src/components/link.tsx +++ b/packages/react/src/components/link.tsx @@ -2,9 +2,59 @@ import { Slot } from "@radix-ui/react-slot"; import { ComponentProps, forwardRef, ForwardRefExoticComponent } from "react"; import { cva, VariantProps } from "class-variance-authority"; -interface LinkProps extends ComponentProps<"a">, VariantProps { +/*========================================================================================================================*/ +/* Extend JSX so React recognises the Splask custom elements */ +declare global { + namespace JSX { + interface IntrinsicElements { + "splwpk-broadcast": React.DetailedHTMLProps< + React.HTMLAttributes, + HTMLElement + >; + "splwpk-online-services": React.DetailedHTMLProps< + React.HTMLAttributes, + HTMLElement + >; + "splwpk-online-e-participation": React.DetailedHTMLProps< + React.HTMLAttributes, + HTMLElement + >; + "splwpk-privacy-policy": React.DetailedHTMLProps< + React.HTMLAttributes, + HTMLElement + >; + "splwpk-procurement": React.DetailedHTMLProps< + React.HTMLAttributes, + HTMLElement + >; + "splwpk-freedom": React.DetailedHTMLProps< + React.HTMLAttributes, + HTMLElement + >; + "splwpk-faqs": React.DetailedHTMLProps< + React.HTMLAttributes, + HTMLElement + >; + } + } +} + +/*========================================================================================================================*/ + +interface LinkProps + extends ComponentProps<"a">, + VariantProps { asChild?: boolean; newTab?: boolean; + + // Splask attributes + SplaskBroadcast?: boolean; + SplaskOnlineServices?: boolean; + SplaskOnlineEParticipation?: boolean; + SplaskPrivacyPolicy?: boolean; + SplaskProcurement?: boolean; + SplaskFreedom?: boolean; + SplaskFaqs?: boolean; } const link_cva = cva("transition-colors", { @@ -23,9 +73,12 @@ const link_cva = cva("transition-colors", { /** * The Link component extends the `` element, customised according to the MYDS theme. + * Supports Splask wrapper attributes if required. + * * @example - * MYDS - * @see {@link https://design.digital.gov.my/?path=/docs/myds-react-link--docs} + * + * MYDS + * */ const Link: ForwardRefExoticComponent = forwardRef( ( @@ -37,13 +90,20 @@ const Link: ForwardRefExoticComponent = forwardRef( newTab = false, primary = false, underline = "always", + SplaskBroadcast, + SplaskOnlineServices, + SplaskOnlineEParticipation, + SplaskPrivacyPolicy, + SplaskProcurement, + SplaskFreedom, + SplaskFaqs, ...props }, ref, ) => { const Comp = asChild ? Slot : "a"; - return ( + const linkElement = ( = forwardRef( {children} ); + + // collect Splask attributes + const attrs: Record = {}; + if (SplaskBroadcast) attrs["splwpk-broadcast"] = "splwpk-broadcast"; + if (SplaskOnlineServices) attrs["splwpk-online-services"] = "splwpk-online-services"; + if (SplaskOnlineEParticipation) attrs["splwpk-online-e-participation"] = "splwpk-online-e-participation"; + if (SplaskPrivacyPolicy) attrs["splwpk-privacy-policy"] = "splwpk-privacy-policy"; + if (SplaskProcurement) attrs["splwpk-procurement"] = "splwpk-procurement"; + if (SplaskFreedom) attrs["splwpk-freedom"] = "splwpk-freedom"; + if (SplaskFaqs) attrs["splwpk-faqs"] = "splwpk-faqs"; + + if (Object.keys(attrs).length === 0) return linkElement; + + return
{linkElement}
; }, ); + Link.displayName = "Link"; export { Link }; From 2f3c8c6bd288dc376899526a08001b71184394b0 Mon Sep 17 00:00:00 2001 From: muhd afnan Date: Sat, 4 Oct 2025 13:46:14 +0800 Subject: [PATCH 2/4] bugfix/ui: re-add ButtonContext.Provider on button component --- packages/react/src/components/button.tsx | 48 ++++++++++-------------- 1 file changed, 19 insertions(+), 29 deletions(-) diff --git a/packages/react/src/components/button.tsx b/packages/react/src/components/button.tsx index c88c1525..47d4d05f 100644 --- a/packages/react/src/components/button.tsx +++ b/packages/react/src/components/button.tsx @@ -118,6 +118,14 @@ export interface ButtonProps SplaskOnlineEParticipation?: boolean; } +/*========================================================================================================================*/ + +const ButtonContext = createContext>({ + variant: "primary-fill", + size: "small", + iconOnly: false, +}); + const Button: ForwardRefExoticComponent = forwardRef( ( { @@ -135,13 +143,15 @@ const Button: ForwardRefExoticComponent = forwardRef( const Comp = asChild ? Slot : "button"; const buttonElement = ( - - {children} - + + + {children} + + ); if (!SplaskOnlineEParticipation) return buttonElement; @@ -157,23 +167,10 @@ Button.displayName = "Button"; /*========================================================================================================================*/ -const ButtonContext = createContext>({ - variant: "primary-fill", - size: "small", - iconOnly: false, -}); - -/*========================================================================================================================*/ - /** * ButtonCounter component is a forward-ref exotic component that utilizes the ButtonContext * to apply variant and size styles to a span element. - * - * @param {ButtonCounterProps} props - The properties for the ButtonCounter component. - * @param {React.Ref} ref - The ref to be forwarded to the span element. - * @returns {JSX.Element} The rendered span element with applied styles and children. */ - const button_counter_cva = cva( [ "flex aspect-square shrink-0 items-center justify-center", @@ -222,21 +219,13 @@ const ButtonCounter: ForwardRefExoticComponent = forwardRef( ); }, ); - ButtonCounter.displayName = "ButtonCounter"; /*========================================================================================================================*/ /** * `ButtonIcon` forwards a ref to its child and applies a class based on the button size. - * - * @component - * @param {ButtonIconProps} props - The properties for the ButtonIcon component. - * @param {React.ReactNode} props.children - The child element to which the ref will be forwarded. - * @param {React.Ref} ref - The ref to be forwarded to the child element. - * @returns {React.ReactElement} The cloned child element with the forwarded ref and applied class name. */ - const button_icon_cva = cva( "block stroke-inherit text-inherit stroke-[1.5px] shrink-0", { @@ -272,7 +261,8 @@ const ButtonIcon: ForwardRefExoticComponent = forwardRef( ); }, ); - ButtonIcon.displayName = "ButtonIcon"; +/*========================================================================================================================*/ + export { Button, ButtonIcon, ButtonCounter, button_cva }; From 7894fbea531400b729100f1dfd87f385296d1c9e Mon Sep 17 00:00:00 2001 From: muhd afnan Date: Thu, 12 Feb 2026 11:03:07 +0800 Subject: [PATCH 3/4] update link react package components --- packages/react/src/components/link.tsx | 108 +++++++------------------ 1 file changed, 29 insertions(+), 79 deletions(-) diff --git a/packages/react/src/components/link.tsx b/packages/react/src/components/link.tsx index c62d437d..26511a22 100644 --- a/packages/react/src/components/link.tsx +++ b/packages/react/src/components/link.tsx @@ -2,59 +2,17 @@ import { Slot } from "@radix-ui/react-slot"; import { ComponentProps, forwardRef, ForwardRefExoticComponent } from "react"; import { cva, VariantProps } from "class-variance-authority"; -/*========================================================================================================================*/ -/* Extend JSX so React recognises the Splask custom elements */ -declare global { - namespace JSX { - interface IntrinsicElements { - "splwpk-broadcast": React.DetailedHTMLProps< - React.HTMLAttributes, - HTMLElement - >; - "splwpk-online-services": React.DetailedHTMLProps< - React.HTMLAttributes, - HTMLElement - >; - "splwpk-online-e-participation": React.DetailedHTMLProps< - React.HTMLAttributes, - HTMLElement - >; - "splwpk-privacy-policy": React.DetailedHTMLProps< - React.HTMLAttributes, - HTMLElement - >; - "splwpk-procurement": React.DetailedHTMLProps< - React.HTMLAttributes, - HTMLElement - >; - "splwpk-freedom": React.DetailedHTMLProps< - React.HTMLAttributes, - HTMLElement - >; - "splwpk-faqs": React.DetailedHTMLProps< - React.HTMLAttributes, - HTMLElement - >; - } - } -} - -/*========================================================================================================================*/ - -interface LinkProps - extends ComponentProps<"a">, - VariantProps { +interface LinkProps extends ComponentProps<"a">, VariantProps { asChild?: boolean; newTab?: boolean; - // Splask attributes - SplaskBroadcast?: boolean; - SplaskOnlineServices?: boolean; - SplaskOnlineEParticipation?: boolean; - SplaskPrivacyPolicy?: boolean; - SplaskProcurement?: boolean; - SplaskFreedom?: boolean; - SplaskFaqs?: boolean; + splaskBroadcast?: boolean; + splaskOnlineServices?: boolean; + splaskOnlineEParticipation?: boolean; + splaskPrivacyPolicy?: boolean; + splaskProcurement?: boolean; + splaskFreedom?: boolean; + splaskFaqs?: boolean; } const link_cva = cva("transition-colors", { @@ -73,12 +31,9 @@ const link_cva = cva("transition-colors", { /** * The Link component extends the `` element, customised according to the MYDS theme. - * Supports Splask wrapper attributes if required. - * * @example - * - * MYDS - * + * MYDS + * @see {@link https://design.digital.gov.my/?path=/docs/myds-react-link--docs} */ const Link: ForwardRefExoticComponent = forwardRef( ( @@ -90,47 +45,42 @@ const Link: ForwardRefExoticComponent = forwardRef( newTab = false, primary = false, underline = "always", - SplaskBroadcast, - SplaskOnlineServices, - SplaskOnlineEParticipation, - SplaskPrivacyPolicy, - SplaskProcurement, - SplaskFreedom, - SplaskFaqs, + splaskBroadcast = false, + splaskOnlineServices = false, + splaskOnlineEParticipation = false, + splaskPrivacyPolicy = false, + splaskProcurement = false, + splaskFreedom = false, + splaskFaqs = false, ...props }, ref, ) => { const Comp = asChild ? Slot : "a"; - const linkElement = ( + const splaskAttrs: Record = {}; + if (splaskBroadcast) splaskAttrs["splwpk-broadcast"] = "splwpk-broadcast"; + if (splaskOnlineServices) splaskAttrs["splwpk-online-services"] = "splwpk-online-services"; + if (splaskOnlineEParticipation) splaskAttrs["splwpk-online-e-participation"] = "splwpk-online-e-participation"; + if (splaskPrivacyPolicy) splaskAttrs["splwpk-privacy-policy"] = "splwpk-privacy-policy"; + if (splaskProcurement) splaskAttrs["splwpk-procurement"] = "splwpk-procurement"; + if (splaskFreedom) splaskAttrs["splwpk-freedom"] = "splwpk-freedom"; + if (splaskFaqs) splaskAttrs["splwpk-faqs"] = "splwpk-faqs"; + + return ( {children} ); - - // collect Splask attributes - const attrs: Record = {}; - if (SplaskBroadcast) attrs["splwpk-broadcast"] = "splwpk-broadcast"; - if (SplaskOnlineServices) attrs["splwpk-online-services"] = "splwpk-online-services"; - if (SplaskOnlineEParticipation) attrs["splwpk-online-e-participation"] = "splwpk-online-e-participation"; - if (SplaskPrivacyPolicy) attrs["splwpk-privacy-policy"] = "splwpk-privacy-policy"; - if (SplaskProcurement) attrs["splwpk-procurement"] = "splwpk-procurement"; - if (SplaskFreedom) attrs["splwpk-freedom"] = "splwpk-freedom"; - if (SplaskFaqs) attrs["splwpk-faqs"] = "splwpk-faqs"; - - if (Object.keys(attrs).length === 0) return linkElement; - - return
{linkElement}
; }, ); - Link.displayName = "Link"; -export { Link }; +export { Link }; \ No newline at end of file From 26c54c75195b3aa9eba40166793967e4b9bde7f7 Mon Sep 17 00:00:00 2001 From: muhd afnan Date: Thu, 12 Feb 2026 11:49:53 +0800 Subject: [PATCH 4/4] update link react package components for link and button --- packages/react/src/components/button.tsx | 321 +++++++++++++++++++++-- packages/react/src/components/link.tsx | 46 ++-- 2 files changed, 322 insertions(+), 45 deletions(-) diff --git a/packages/react/src/components/button.tsx b/packages/react/src/components/button.tsx index 47d4d05f..0d6ebef5 100644 --- a/packages/react/src/components/button.tsx +++ b/packages/react/src/components/button.tsx @@ -1,3 +1,273 @@ +// import React, { +// ComponentProps, +// createContext, +// forwardRef, +// ForwardRefExoticComponent, +// ReactNode, +// useContext, +// LegacyRef, +// } from "react"; +// import { clx } from "../utils"; +// import { cva, VariantProps } from "class-variance-authority"; +// import { Slot } from "@radix-ui/react-slot"; + +// /*========================================================================================================================*/ + +// /** +// * Button component that supports various styles and sizes. +// * +// * @example +// * +// */ +// const button_cva = cva( +// [ +// "group flex select-none items-center gap-1.5 rounded-md w-fit", +// "font-body font-medium outline-none transition disabled:cursor-not-allowed", +// "text-center active:translate-y-[0.5px]", +// "focus:ring focus:ring-fr-primary", +// ], +// { +// variants: { +// variant: { +// "default-outline": [ +// "bg-bg-white border border-otl-gray-200 text-txt-black-700 shadow-button", +// "hover:bg-bg-white-hover hover:border-otl-gray-300 hover:text-txt-black-900", +// "disabled:bg-bg-white-disabled disabled:text-txt-black-disabled disabled:border-transparent", +// ], +// "default-ghost": [ +// "bg-transparent border border-transparent text-txt-black-700", +// "hover:bg-bg-white-hover", +// "disabled:bg-bg-white-disabled disabled:text-txt-black-disabled disabled:border-transparent", +// ], +// "danger-fill": [ +// "bg-danger-600 border border-danger-600 text-white shadow-button", +// "hover:bg-danger-700", +// "disabled:bg-bg-danger-disabled disabled:text-white-disabled disabled:border-bg-danger-disabled", +// ], +// "danger-outline": [ +// "bg-bg-white border border-otl-danger-200 text-txt-danger shadow-button", +// "hover:bg-bg-danger-50", +// "disabled:bg-bg-white-disabled disabled:text-txt-danger-disabled disabled:border-transparent", +// ], +// "danger-ghost": [ +// "bg-transparent border border-transparent text-txt-danger", +// "hover:bg-bg-danger-50", +// "disabled:bg-bg-white-disabled disabled:text-txt-danger-disabled disabled:border-transparent", +// ], +// "primary-fill": [ +// "bg-primary-600 border border-primary-600 text-white shadow-button", +// "hover:bg-primary-700", +// "disabled:bg-bg-primary-disabled disabled:text-white-disabled disabled:border-bg-primary-disabled", +// ], +// "primary-outline": [ +// "bg-bg-white border border-otl-primary-200 text-txt-primary shadow-button", +// "hover:bg-bg-primary-50", +// "disabled:bg-bg-white-disabled disabled:text-txt-primary-disabled disabled:border-transparent", +// ], +// "primary-ghost": [ +// "bg-transparent border border-transparent text-txt-primary", +// "hover:bg-bg-primary-50", +// "disabled:bg-bg-white-disabled disabled:text-txt-primary-disabled disabled:border-transparent", +// ], +// unset: null, +// }, + +// size: { +// small: "py-1.5 px-2.5 text-body-sm", +// medium: "py-2 px-3 text-body-md", +// large: "py-2.5 px-4 text-body-lg", +// }, + +// iconOnly: { +// true: "aspect-square rounded-md", +// false: "", +// }, +// }, +// compoundVariants: [ +// { +// iconOnly: true, +// size: "small", +// className: "p-2", +// }, +// { +// iconOnly: true, +// size: "medium", +// className: "p-2.5", +// }, +// { +// iconOnly: true, +// size: "large", +// className: "p-3", +// }, +// ], +// defaultVariants: { +// variant: "primary-fill", +// size: "small", +// iconOnly: false, +// }, +// }, +// ); + +// export interface ButtonProps +// extends ComponentProps<"button">, +// VariantProps { +// asChild?: boolean; +// iconOnly?: boolean; +// SplaskOnlineEParticipation?: boolean; +// } + +// /*========================================================================================================================*/ + +// const ButtonContext = createContext>({ +// variant: "primary-fill", +// size: "small", +// iconOnly: false, +// }); + +// const Button: ForwardRefExoticComponent = forwardRef( +// ( +// { +// className, +// variant = "primary-fill", +// size = "small", +// children, +// asChild = false, +// iconOnly = false, +// SplaskOnlineEParticipation, +// ...props +// }, +// ref, +// ) => { +// const Comp = asChild ? Slot : "button"; + +// const buttonElement = ( +// +// +// {children} +// +// +// ); + +// if (!SplaskOnlineEParticipation) return buttonElement; + +// return ( +//
+// {buttonElement} +//
+// ); +// }, +// ); +// Button.displayName = "Button"; + +// /*========================================================================================================================*/ + +// /** +// * ButtonCounter component is a forward-ref exotic component that utilizes the ButtonContext +// * to apply variant and size styles to a span element. +// */ +// const button_counter_cva = cva( +// [ +// "flex aspect-square shrink-0 items-center justify-center", +// "rounded-full px-1 leading-none bg-bg-primary-600 text-txt-white", +// "group-disabled:bg-bg-white-disabled group-disabled:text-inherit", +// ], +// { +// variants: { +// variant: { +// "primary-fill": ["bg-white text-primary-600"], +// "danger-fill": ["bg-white text-danger-600"], +// "default-outline": "", +// "default-ghost": "", +// "danger-outline": "", +// "danger-ghost": "", +// "primary-outline": "", +// "primary-ghost": "", +// unset: "", +// }, +// size: { +// small: "h-4.5 w-4.5 text-body-sm", +// medium: "h-5 w-5 text-body-sm", +// large: "h-6 w-6 text-base", +// }, +// }, +// defaultVariants: { +// variant: "primary-fill", +// size: "small", +// }, +// }, +// ); + +// interface ButtonCounterProps { +// children: ReactNode; +// ref?: LegacyRef; +// } + +// const ButtonCounter: ForwardRefExoticComponent = forwardRef( +// ({ children }, ref) => { +// const { variant, size } = useContext(ButtonContext); + +// return ( +// +// {children} +// +// ); +// }, +// ); +// ButtonCounter.displayName = "ButtonCounter"; + +// /*========================================================================================================================*/ + +// /** +// * `ButtonIcon` forwards a ref to its child and applies a class based on the button size. +// */ +// const button_icon_cva = cva( +// "block stroke-inherit text-inherit stroke-[1.5px] shrink-0", +// { +// variants: { +// size: { +// small: "h-4 w-4", +// medium: "h-5 w-5", +// large: "h-5 w-5", +// }, +// }, +// defaultVariants: { +// size: "small", +// }, +// }, +// ); + +// interface ButtonIconProps extends ComponentProps<"div"> { +// children: React.ReactElement>; +// } + +// const ButtonIcon: ForwardRefExoticComponent = forwardRef( +// ({ children, className, ...props }, ref) => { +// const { size } = useContext(ButtonContext); + +// return ( +// +// {children} +// +// ); +// }, +// ); +// ButtonIcon.displayName = "ButtonIcon"; + +// /*========================================================================================================================*/ + +// export { Button, ButtonIcon, ButtonCounter, button_cva }; + + import React, { ComponentProps, createContext, @@ -115,17 +385,9 @@ export interface ButtonProps VariantProps { asChild?: boolean; iconOnly?: boolean; - SplaskOnlineEParticipation?: boolean; + splwpkBroadcast?: boolean; } -/*========================================================================================================================*/ - -const ButtonContext = createContext>({ - variant: "primary-fill", - size: "small", - iconOnly: false, -}); - const Button: ForwardRefExoticComponent = forwardRef( ( { @@ -135,42 +397,50 @@ const Button: ForwardRefExoticComponent = forwardRef( children, asChild = false, iconOnly = false, - SplaskOnlineEParticipation, + splwpkBroadcast = false, ...props }, ref, ) => { const Comp = asChild ? Slot : "button"; - const buttonElement = ( - + return ( + {children} ); - - if (!SplaskOnlineEParticipation) return buttonElement; - - return ( -
- {buttonElement} -
- ); }, ); Button.displayName = "Button"; /*========================================================================================================================*/ +const ButtonContext = createContext>({ + variant: "primary-fill", + size: "small", + iconOnly: false, +}); + +/*========================================================================================================================*/ + /** * ButtonCounter component is a forward-ref exotic component that utilizes the ButtonContext * to apply variant and size styles to a span element. + * + * @param {ButtonCounterProps} props - The properties for the ButtonCounter component. + * @param {React.Ref} ref - The ref to be forwarded to the span element. + * @returns {JSX.Element} The rendered span element with applied styles and children. */ + const button_counter_cva = cva( [ "flex aspect-square shrink-0 items-center justify-center", @@ -219,13 +489,21 @@ const ButtonCounter: ForwardRefExoticComponent = forwardRef( ); }, ); + ButtonCounter.displayName = "ButtonCounter"; /*========================================================================================================================*/ /** * `ButtonIcon` forwards a ref to its child and applies a class based on the button size. + * + * @component + * @param {ButtonIconProps} props - The properties for the ButtonIcon component. + * @param {React.ReactNode} props.children - The child element to which the ref will be forwarded. + * @param {React.Ref} ref - The ref to be forwarded to the child element. + * @returns {React.ReactElement} The cloned child element with the forwarded ref and applied class name. */ + const button_icon_cva = cva( "block stroke-inherit text-inherit stroke-[1.5px] shrink-0", { @@ -261,8 +539,7 @@ const ButtonIcon: ForwardRefExoticComponent = forwardRef( ); }, ); -ButtonIcon.displayName = "ButtonIcon"; -/*========================================================================================================================*/ +ButtonIcon.displayName = "ButtonIcon"; export { Button, ButtonIcon, ButtonCounter, button_cva }; diff --git a/packages/react/src/components/link.tsx b/packages/react/src/components/link.tsx index 26511a22..7f7a1d17 100644 --- a/packages/react/src/components/link.tsx +++ b/packages/react/src/components/link.tsx @@ -6,13 +6,13 @@ interface LinkProps extends ComponentProps<"a">, VariantProps { asChild?: boolean; newTab?: boolean; - splaskBroadcast?: boolean; - splaskOnlineServices?: boolean; - splaskOnlineEParticipation?: boolean; - splaskPrivacyPolicy?: boolean; - splaskProcurement?: boolean; - splaskFreedom?: boolean; - splaskFaqs?: boolean; + splwpkBroadcast?: boolean; + splwpkOnlineServices?: boolean; + splwpkOnlineEParticipation?: boolean; + splwpkPrivacyPolicy?: boolean; + splwpkProcurement?: boolean; + splwpkFreedom?: boolean; + splwpkFaqs?: boolean; } const link_cva = cva("transition-colors", { @@ -45,27 +45,27 @@ const Link: ForwardRefExoticComponent = forwardRef( newTab = false, primary = false, underline = "always", - splaskBroadcast = false, - splaskOnlineServices = false, - splaskOnlineEParticipation = false, - splaskPrivacyPolicy = false, - splaskProcurement = false, - splaskFreedom = false, - splaskFaqs = false, + splwpkBroadcast = false, + splwpkOnlineServices = false, + splwpkOnlineEParticipation = false, + splwpkPrivacyPolicy = false, + splwpkProcurement = false, + splwpkFreedom = false, + splwpkFaqs = false, ...props }, ref, ) => { const Comp = asChild ? Slot : "a"; - const splaskAttrs: Record = {}; - if (splaskBroadcast) splaskAttrs["splwpk-broadcast"] = "splwpk-broadcast"; - if (splaskOnlineServices) splaskAttrs["splwpk-online-services"] = "splwpk-online-services"; - if (splaskOnlineEParticipation) splaskAttrs["splwpk-online-e-participation"] = "splwpk-online-e-participation"; - if (splaskPrivacyPolicy) splaskAttrs["splwpk-privacy-policy"] = "splwpk-privacy-policy"; - if (splaskProcurement) splaskAttrs["splwpk-procurement"] = "splwpk-procurement"; - if (splaskFreedom) splaskAttrs["splwpk-freedom"] = "splwpk-freedom"; - if (splaskFaqs) splaskAttrs["splwpk-faqs"] = "splwpk-faqs"; + const splwpkAttrs: Record = {}; + if (splwpkBroadcast) splwpkAttrs["splwpk-broadcast"] = "splwpk-broadcast"; + if (splwpkOnlineServices) splwpkAttrs["splwpk-online-services"] = "splwpk-online-services"; + if (splwpkOnlineEParticipation) splwpkAttrs["splwpk-online-e-participation"] = "splwpk-online-e-participation"; + if (splwpkPrivacyPolicy) splwpkAttrs["splwpk-privacy-policy"] = "splwpk-privacy-policy"; + if (splwpkProcurement) splwpkAttrs["splwpk-procurement"] = "splwpk-procurement"; + if (splwpkFreedom) splwpkAttrs["splwpk-freedom"] = "splwpk-freedom"; + if (splwpkFaqs) splwpkAttrs["splwpk-faqs"] = "splwpk-faqs"; return ( = forwardRef( href={href} className={link_cva({ primary, underline, className })} target={newTab ? "_blank" : "_self"} - {...splaskAttrs} + {...splwpkAttrs} {...props} > {children}