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..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,6 +385,7 @@ export interface ButtonProps
VariantProps {
asChild?: boolean;
iconOnly?: boolean;
+ splwpkBroadcast?: boolean;
}
const Button: ForwardRefExoticComponent = forwardRef(
@@ -126,6 +397,7 @@ const Button: ForwardRefExoticComponent = forwardRef(
children,
asChild = false,
iconOnly = false,
+ splwpkBroadcast = false,
...props
},
ref,
@@ -137,6 +409,9 @@ const Button: ForwardRefExoticComponent = forwardRef(
{children}
diff --git a/packages/react/src/components/link.tsx b/packages/react/src/components/link.tsx
index d36686b3..7f7a1d17 100644
--- a/packages/react/src/components/link.tsx
+++ b/packages/react/src/components/link.tsx
@@ -5,6 +5,14 @@ import { cva, VariantProps } from "class-variance-authority";
interface LinkProps extends ComponentProps<"a">, VariantProps {
asChild?: boolean;
newTab?: boolean;
+
+ splwpkBroadcast?: boolean;
+ splwpkOnlineServices?: boolean;
+ splwpkOnlineEParticipation?: boolean;
+ splwpkPrivacyPolicy?: boolean;
+ splwpkProcurement?: boolean;
+ splwpkFreedom?: boolean;
+ splwpkFaqs?: boolean;
}
const link_cva = cva("transition-colors", {
@@ -37,18 +45,35 @@ const Link: ForwardRefExoticComponent = forwardRef(
newTab = false,
primary = false,
underline = "always",
+ splwpkBroadcast = false,
+ splwpkOnlineServices = false,
+ splwpkOnlineEParticipation = false,
+ splwpkPrivacyPolicy = false,
+ splwpkProcurement = false,
+ splwpkFreedom = false,
+ splwpkFaqs = false,
...props
},
ref,
) => {
const Comp = asChild ? Slot : "a";
+ 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 (
{children}
@@ -58,4 +83,4 @@ const Link: ForwardRefExoticComponent = forwardRef(
);
Link.displayName = "Link";
-export { Link };
+export { Link };
\ No newline at end of file