Two-step process for toggling CDP state

packages/design-system/src/components/button/index.tsx

@@ -25,7 +25,7 @@ interface ButtonProps {
   onClick?: () => void;
   loading?: boolean;
   type?: 'button' | 'submit' | 'reset';
-  variant?: 'primary' | 'secondary' | 'danger' | 'small';
+  variant?: 'primary' | 'secondary' | 'danger' | 'small' | 'large';
   extraClasses?: string;
 }
 const Button = ({
@@ -36,30 +36,85 @@ const Button = ({
   variant = 'primary',
   extraClasses = '',
 }: ButtonProps) => {
-  return (
-    <button
-      data-test-id="button"
-      type={type}
-      name={name}
-      onClick={onClick ? onClick : undefined}
-      className={classNames(
-        'rounded flex items-center text-center',
-        extraClasses,
-        {
-          'py-1 px-2 font-medium': variant !== 'small',
-          'py-0.5 px-1.5 text-xs': variant === 'small',
-          'text-white dark:bg-baby-blue-eyes bg-sapphire hover:bg-tufts-blue dark:hover:bg-pale-cornflower-blue dark:text-raisin-black':
-            ['primary', 'small'].includes(variant),
-          'bg-transparent dark:bg-transparent dark:text-bright-gray text-raisin-black active:opacity-60 hover:opacity-80':
-            variant === 'secondary',
-          'text-white dark:text-white dark:bg-red-500 bg-red-500 hover:bg-red-600':
-            variant === 'danger',
-        }
-      )}
-    >
-      {text}
-    </button>
-  );
+  switch (variant) {
+    case 'small':
+      return (
+        <button
+          data-test-id="button"
+          type={type}
+          name={name}
+          onClick={onClick ? onClick : undefined}
+          className={classNames(
+            'rounded flex items-center text-center py-0.5 px-1.5 text-xs text-white dark:bg-baby-blue-eyes bg-sapphire hover:bg-tufts-blue dark:hover:bg-pale-cornflower-blue dark:text-raisin-black',
+            extraClasses
+          )}
+        >
+          {text}
+        </button>
+      );
+    case 'large':
+      return (
+        <button
+          data-test-id="button"
+          type={type}
+          name={name}
+          onClick={onClick ? onClick : undefined}
+          className={classNames(
+            'font-medium rounded-xs flex items-center text-center md:py-3.5 md:px-9 xxs:max-sm:p-2 xs:max-md:py-4 sm:max-md:px-2 text-white dark:bg-google-blue bg-smurf-blue hover:bg-beteleguese dark:hover:bg-bright-navy-blue dark:text-raisin-black',
+            extraClasses
+          )}
+        >
+          {text}
+        </button>
+      );
+    case 'primary':
+      return (
+        <button
+          data-test-id="button"
+          type={type}
+          name={name}
+          onClick={onClick ? onClick : undefined}
+          className={classNames(
+            'rounded flex items-center text-center py-1 px-2 font-medium text-white dark:bg-baby-blue-eyes bg-sapphire hover:bg-tufts-blue dark:hover:bg-pale-cornflower-blue dark:text-raisin-black',
+            extraClasses
+          )}
+        >
+          {text}
+        </button>
+      );
+    case 'secondary':
+      return (
+        <button
+          data-test-id="button"
+          type={type}
+          name={name}
+          onClick={onClick ? onClick : undefined}
+          className={classNames(
+            'rounded flex items-center text-center py-1 px-2 font-medium bg-transparent dark:bg-transparent dark:text-bright-gray text-raisin-black active:opacity-60 hover:opacity-80',
+            extraClasses
+          )}
+        >
+          {text}
+        </button>
+      );
+    case 'danger':
+      return (
+        <button
+          data-test-id="button"
+          type={type}
+          name={name}
+          onClick={onClick ? onClick : undefined}
+          className={classNames(
+            'rounded flex items-center text-center py-1 px-2 font-medium text-white dark:text-white dark:bg-red-500 bg-red-500 hover:bg-red-600',
+            extraClasses
+          )}
+        >
+          {text}
+        </button>
+      );
+    default:
+      return <></>;
+  }
 };
 
 export default Button;

packages/design-system/src/components/index.ts

@@ -40,6 +40,7 @@ export * from './table';
 export { default as SearchInput } from './searchInput';
 export * from './sidebar';
 export { default as InspectButton } from './inspectButton';
+export { default as ToastMessage } from './toastMessage';
 export {
   default as CookiesLandingContainer,
   type CookiesLandingContainerProps,

packages/design-system/src/components/toastMessage/index.tsx

@@ -0,0 +1,64 @@
+/*
+ * Copyright 2024 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+/**
+ * External dependencies.
+ */
+import React, { forwardRef } from 'react';
+
+/**
+ * Internal dependencies.
+ */
+import Button from '../button';
+
+interface ToastMessageProps {
+  text: string;
+  onClick: () => void;
+  additionalStyles?: string;
+  textAdditionalStyles?: string;
+  variant?: 'primary' | 'secondary' | 'danger' | 'small' | 'large';
+  buttonText?: string;
+}
+const ToastMessage = forwardRef<HTMLDivElement, ToastMessageProps>(
+  function ToastMessage(
+    {
+      text,
+      onClick,
+      additionalStyles = '',
+      textAdditionalStyles = '',
+      variant = 'large',
+      buttonText = 'Reload',
+    }: ToastMessageProps,
+    ref
+  ) {
+    return (
+      <div
+        ref={ref}
+        className={`${additionalStyles} absolute inset-x-0 bottom-0 w-full z-2 bg-white dark:bg-charleston-green shadow-xxs`}
+      >
+        <div className="flex items-center justify-between p-4">
+          <div className={`w-5/6 dark:text-white ${textAdditionalStyles}`}>
+            {text}
+          </div>
+          <div className="w-1/6">
+            <Button text={buttonText} onClick={onClick} variant={variant} />
+          </div>
+        </div>
+      </div>
+    );
+  }
+);
+
+export default ToastMessage;