@indico-data/design-system 2.60.14 → 3.0.0

package/src/components/modal/styles/Modal.scss

@@ -4,24 +4,31 @@
   --pf-modal-close-button-top: var(--pf-margin-2);
   --pf-modal-close-button-right: var(--pf-margin-2);
   --pf-modal-close-button-padding: var(--pf-padding-3) var(--pf-padding-4);
+  --pf-modal-title-font-size: var(--pf-font-size-h1);
+  --pf-modal-title-font-weight: var(--pf-font-weight-bold);
+  --pf-modal-subtitle-font-size: var(--pf-font-size-body);
   --pf-modal-close-button-font-size: var(--pf-font-size-caption);
   --pf-modal-close-button-icon-size: var(--pf-font-size-caption);
   --pf-modal-overlay-background: rgba(0, 0, 0, 0.5);
   --pf-modal-overlay-transition: opacity 100ms ease-in-out;
-  --pf-modal-content-padding: var(--pf-padding-10);
+  --pf-modal-content-padding: var(--pf-padding-5) var(--pf-padding-6);
 }
 
 // Light Theme Specific Variables
 :root [data-theme='light'] {
-  --pf-modal-background-color: var(--pf-white-color);
-  --pf-modal-border-color: var(--pf-border-color);
+  --pf-modal-background-color: var(--pf-background-color-secondary);
+  --pf-modal-border-color: var(--pf-border-color-secondary);
+  --pf-modal-subtitle-font-color: var(--pf-font-color-soft);
+  --pf-modal-close-button-font-color: var(--pf-font-color-soft);
 }
 
 // Dark Theme Specific Variables
 :root [data-theme='dark'],
 :root {
-  --pf-modal-background-color: var(--pf-primary-color-600);
-  --pf-modal-border-color: var(--pf-border-color);
+  --pf-modal-background-color: var(--pf-background-color-secondary);
+  --pf-modal-border-color: var(--pf-border-color-secondary);
+  --pf-modal-subtitle-font-color: var(--pf-font-color-soft);
+  --pf-modal-close-button-font-color: var(--pf-font-color-soft);
 }
 
 // Library overrides
@@ -66,13 +73,34 @@
     top: 50px;
   }
 
+  .modal-content {
+    background-color: var(--pf-modal-background-color);
+    border: var(--pf-border-sm) solid var(--pf-modal-border-color);
+    border-radius: var(--pf-modal-rounded);
+  }
+  .modal-header {
+    border-bottom: var(--pf-border-sm) solid var(--pf-modal-border-color);
+    padding: var(--pf-modal-content-padding);
+
+    .modal-title {
+      font-size: var(--pf-font-size-h1);
+      font-weight: var(--pf-font-weight-bold);
+    }
+    .modal-subtitle {
+      font-size: var(--pf-font-size-subtitle);
+      color: var(--pf-modal-subtitle-font-color);
+    }
+  }
+
   .modal-close-button {
     position: absolute;
     top: var(--pf-modal-close-button-top);
     right: var(--pf-modal-close-button-right);
     padding: var(--pf-modal-close-button-padding);
     font-size: var(--pf-modal-close-button-font-size);
+    color: var(--pf-modal-close-button-font-color);
     line-height: 1;
+    z-index: 1000;
 
     &.btn .icon {
       width: var(--pf-modal-close-button-icon-size) !important;
@@ -85,23 +113,26 @@
     }
   }
 
-  .modal-content {
-    position: relative;
-    background-color: var(--pf-modal-background-color);
-    border: var(--pf-border-sm) solid var(--pf-modal-border-color);
-    border-radius: var(--pf-modal-rounded);
+  .modal-body {
     padding: var(--pf-modal-content-padding);
+  }
 
-    .modal-body {
-      h2 {
-        font-size: var(--pf-font-size-h1);
-      }
+  .modal-footer {
+    padding: var(--pf-modal-content-padding);
+    border-top: var(--pf-border-sm) solid var(--pf-modal-border-color);
+    text-align: right;
+  }
+}
 
-      hr {
-        margin-top: var(--pf-margin-8);
-        margin-bottom: var(--pf-margin-8);
-        border: var(--pf-border-sm) solid var(--pf-border-color);
-      }
-    }
+.confirmation-modal {
+  .confirmation-modal-title {
+    font-size: var(--pf-font-size-h1);
+    font-weight: var(--pf-font-weight-bold);
+    margin-bottom: var(--pf-margin-4);
+  }
+
+  .confirmation-modal-icon {
+    margin-top: var(--pf-margin-4);
+    margin-bottom: var(--pf-margin-4);
   }
 }

package/src/components/modal/types.ts

@@ -1,3 +1,6 @@
+import { ButtonVariants } from '../button/types';
+import { IconName } from '../icons/types';
+
 export interface ModalProps {
   className?: string;
   children?: React.ReactNode;
@@ -13,4 +16,19 @@ export interface ModalProps {
   overlayElement?: (props: any, contentElement: React.ReactElement) => React.ReactElement;
   position?: 'top' | 'center';
   parentSelector?: () => HTMLElement;
+  title?: string;
+  subtitle?: string;
+  footer?: React.ReactNode;
+
+  maxWidthInPixels?: number;
+}
+
+export interface ConfirmationModalProps extends ModalProps {
+  onConfirmRequest?: () => void;
+  onCancelRequest?: () => void;
+  confirmationButtonVariant?: ButtonVariants;
+  confirmationButtonText?: string;
+  cancelButtonText?: string;
+  icon?: IconName;
+  status?: 'info' | 'success' | 'error';
 }

package/src/components/pill/Pill.stories.tsx

@@ -26,18 +26,27 @@ const meta: Meta = {
       },
     },
     color: {
-      control: {
-        type: 'select',
-        options: ['success', 'warning', 'error', 'info', 'neutral', 'primary', 'secondary'],
-      },
+      control: 'select',
+      options: [
+        'success',
+        'warning',
+        'error',
+        'teal',
+        'neutral',
+        'purple',
+        'info',
+        'pending',
+        'orange',
+      ],
       description: 'Applies a CSS class to change the style of the pill',
       table: {
         category: 'Props',
         type: {
-          summary: 'success | warning | error | info | neutral | primary | secondary',
+          summary: 'success | warning | error | teal | neutral | purple | info | pending | orange',
         },
       },
     },
+
     size: {
       control: {
         type: 'select',
@@ -78,17 +87,17 @@ export const AllSizes: Story = {
       <Container>
         <Row>
           <Col>
-            <Pill color="info" size="lg">
+            <Pill color="neutral" size="lg">
               Large (lg)
             </Pill>
           </Col>
           <Col>
-            <Pill color="info" size="md">
+            <Pill color="neutral" size="md">
               Medium (md)
             </Pill>
           </Col>
           <Col>
-            <Pill color="info" size="sm">
+            <Pill color="neutral" size="sm">
               Small (sm)
             </Pill>
           </Col>
@@ -119,18 +128,18 @@ export const AllStatuses: Story = {
             </Pill>
           </Col>
           <Col>
-            <Pill color="primary" size="md">
-              Primary
+            <Pill color="purple" size="md">
+              Purple
             </Pill>
           </Col>
           <Col>
-            <Pill color="secondary" size="md">
-              Secondary
+            <Pill color="info" size="md">
+              Info
             </Pill>
           </Col>
           <Col>
-            <Pill color="info" size="md">
-              Info
+            <Pill color="teal" size="md">
+              Teal
             </Pill>
           </Col>
           <Col>
@@ -143,6 +152,11 @@ export const AllStatuses: Story = {
               Pending
             </Pill>
           </Col>
+          <Col>
+            <Pill color="orange" size="md">
+              Orange
+            </Pill>
+          </Col>
         </Row>
       </Container>
     );

package/src/components/pill/Pill.tsx

@@ -1,7 +1,13 @@
 import classNames from 'classnames';
 import { PillProps } from './types';
 
-export const Pill = ({ children, className, color = 'info', size = 'sm', ...rest }: PillProps) => {
+export const Pill = ({
+  children,
+  className,
+  color = 'neutral',
+  size = 'sm',
+  ...rest
+}: PillProps) => {
   const pillClasses = classNames('pill', className, {
     [`pill--${color}`]: color,
     [`pill--${size}`]: size,

package/src/components/pill/styles/Pill.scss

@@ -1,73 +1,85 @@
 // Light Theme Specific Variables
 :root [data-theme='light'] {
-  --pf-pill-primary-background-color: var(--pf-primary-color);
-  --pf-pill-primary-font-color: var(--pf-white-color);
-  --pf-pill-primary-border-color: var(--pf-primary-color);
+  --pf-pill-info-background-color: var(--pf-secondary-color-500);
+  --pf-pill-info-font-color: var(--pf-secondary-color-50);
+  --pf-pill-info-border-color: var(--pf-secondary-color-500);
 
-  --pf-pill-secondary-background-color: var(--pf-secondary-color);
-  --pf-pill-secondary-font-color: var(--pf-white-color);
-  --pf-pill-secondary-border-color: var(--pf-secondary-color);
+  --pf-pill-error-background-color: var(--pf-red-color-450);
+  --pf-pill-error-font-color: var(--pf-red-color-50);
+  --pf-pill-error-border-color: var(--pf-red-color-450);
 
-  --pf-pill-error-background-color: var(--pf-error-color);
-  --pf-pill-error-font-color: var(--pf-white-color);
-  --pf-pill-error-border-color: var(--pf-error-color);
+  --pf-pill-warning-background-color: var(--pf-yellow-color-450);
+  --pf-pill-warning-font-color: var(--pf-yellow-color-50);
+  --pf-pill-warning-border-color: var(--pf-yellow-color-450);
 
-  --pf-pill-warning-background-color: var(--pf-warning-color);
-  --pf-pill-warning-font-color: var(--pf-white-color);
-  --pf-pill-warning-border-color: var(--pf-warning-color);
+  --pf-pill-neutral-background-color: var(--pf-gray-color-700);
+  --pf-pill-neutral-font-color: var(--pf-gray-color-50);
+  --pf-pill-neutral-border-color: var(--pf-gray-color-700);
+
+  --pf-pill-success-background-color: var(--pf-green-color-600);
+  --pf-pill-success-font-color: var(--pf-green-color-50);
+  --pf-pill-success-border-color: var(--pf-green-color-600);
 
-  --pf-pill-info-background-color: var(--pf-info-color);
-  --pf-pill-info-font-color: var(--pf-white-color);
-  --pf-pill-info-border-color: var(--pf-info-color);
+  --pf-pill-purple-background-color: var(--pf-purple-color-450);
+  --pf-pill-purple-font-color: var(--pf-purple-color-50);
+  --pf-pill-purple-border-color: var(--pf-purple-color-450);
 
-  --pf-pill-success-background-color: var(--pf-success-color);
-  --pf-pill-success-font-color: var(--pf-white-color);
-  --pf-pill-success-border-color: var(--pf-success-color);
+  --pf-pill-pending-background-color: var(--pf-pink-color-450);
+  --pf-pill-pending-font-color: var(--pf-pink-color-50);
+  --pf-pill-pending-border-color: var(--pf-pink-color-450);
 
-  --pf-pill-neutral-background-color: var(--pf-gray-color);
-  --pf-pill-neutral-font-color: var(--pf-white-color);
-  --pf-pill-neutral-border-color: var(--pf-gray-color);
+  --pf-pill-orange-background-color: var(--pf-orange-color-450);
+  --pf-pill-orange-font-color: var(--pf-orange-color-50);
+  --pf-pill-orange-border-color: var(--pf-orange-color-450);
+
+  --pf-pill-teal-background-color: var(--pf-teal-color-600);
+  --pf-pill-teal-font-color: var(--pf-teal-color-50);
+  --pf-pill-teal-border-color: var(--pf-teal-color-600);
 }
 
 // Dark Theme Specific Variables
 :root [data-theme='dark'],
 :root {
-  --pf-pill-primary-background-color: var(--pf-primary-color-900);
-  --pf-pill-primary-font-color: var(--pf-white-color);
-  --pf-pill-primary-border-color: var(--pf-primary-color-100);
-
-  --pf-pill-secondary-background-color: var(--pf-secondary-color-800);
-  --pf-pill-secondary-font-color: var(--pf-white-color);
-  --pf-pill-secondary-border-color: var(--pf-secondary-color-400);
+  --pf-pill-info-background-color: var(--pf-secondary-color-500);
+  --pf-pill-info-font-color: var(--pf-secondary-color-50);
+  --pf-pill-info-border-color: var(--pf-secondary-color-500);
 
-  --pf-pill-error-background-color: var(--pf-red-color-900);
-  --pf-pill-error-font-color: var(--pf-white-color);
-  --pf-pill-error-border-color: var(--pf-red-color-600);
+  --pf-pill-error-background-color: var(--pf-red-color-450);
+  --pf-pill-error-font-color: var(--pf-red-color-50);
+  --pf-pill-error-border-color: var(--pf-red-color-450);
 
-  --pf-pill-warning-background-color: var(--pf-orange-color-800);
-  --pf-pill-warning-font-color: var(--pf-white-color);
-  --pf-pill-warning-border-color: var(--pf-orange-color-600);
+  --pf-pill-warning-background-color: var(--pf-yellow-color-450);
+  --pf-pill-warning-font-color: var(--pf-yellow-color-50);
+  --pf-pill-warning-border-color: var(--pf-yellow-color-450);
 
-  --pf-pill-info-background-color: var(--pf-secondary-color-800);
-  --pf-pill-info-font-color: var(--pf-white-color);
-  --pf-pill-info-border-color: var(--pf-secondary-color-300);
+  --pf-pill-neutral-background-color: var(--pf-gray-color-700);
+  --pf-pill-neutral-font-color: var(--pf-gray-color-50);
+  --pf-pill-neutral-border-color: var(--pf-gray-color-700);
 
-  --pf-pill-success-background-color: var(--pf-green-color-900);
-  --pf-pill-success-font-color: var(--pf-white-color);
+  --pf-pill-success-background-color: var(--pf-green-color-600);
+  --pf-pill-success-font-color: var(--pf-green-color-50);
   --pf-pill-success-border-color: var(--pf-green-color-600);
 
-  --pf-pill-neutral-background-color: var(--pf-gray-color-900);
-  --pf-pill-neutral-font-color: var(--pf-gray-color-100);
-  --pf-pill-neutral-border-color: var(--pf-gray-color-700);
+  --pf-pill-purple-background-color: var(--pf-purple-color-450);
+  --pf-pill-purple-font-color: var(--pf-purple-color-50);
+  --pf-pill-purple-border-color: var(--pf-purple-color-450);
+
+  --pf-pill-pending-background-color: var(--pf-pink-color-450);
+  --pf-pill-pipendingnk-font-color: var(--pf-pink-color-50);
+  --pf-pill-pending-border-color: var(--pf-pink-color-450);
 
-  --pf-pill-pending-background-color: var(--pf-pending-color);
-  --pf-pill-pending-font-color: var(--pf-white-color);
-  --pf-pill-pending-border-color: var(--pf-red-color-350);
+  --pf-pill-orange-background-color: var(--pf-orange-color-450);
+  --pf-pill-orange-font-color: var(--pf-orange-color-50);
+  --pf-pill-orange-border-color: var(--pf-orange-color-450);
+
+  --pf-pill-teal-background-color: var(--pf-teal-color-600);
+  --pf-pill-teal-font-color: var(--pf-teal-color-50);
+  --pf-pill-teal-border-color: var(--pf-teal-color-600);
 }
 
 .pill {
   display: inline-block;
-  border-radius: var(--pf-rounded-pill);
+  border-radius: var(--pf-rounded);
   padding: var(--pf-padding-1) var(--pf-padding-2);
   font-size: var(--pf-font-size-overline);
   font-weight: var(--pf-font-weight-medium);
@@ -115,19 +127,31 @@
     color: var(--pf-pill-neutral-font-color);
     border-color: var(--pf-pill-neutral-border-color);
   }
-  &--primary {
-    background-color: var(--pf-pill-primary-background-color);
-    color: var(--pf-pill-primary-font-color);
-    border-color: var(--pf-pill-primary-border-color);
-  }
-  &--secondary {
-    background-color: var(--pf-pill-secondary-background-color);
-    color: var(--pf-pill-secondary-font-color);
-    border-color: var(--pf-pill-secondary-border-color);
+  &--info {
+    background-color: var(--pf-pill-info-background-color);
+    color: var(--pf-pill-info-font-color);
+    border-color: var(--pf-pill-info-border-color);
   }
   &--pending {
     background-color: var(--pf-pill-pending-background-color);
     color: var(--pf-pill-pending-font-color);
     border-color: var(--pf-pill-pending-border-color);
   }
+
+  &--purple {
+    background-color: var(--pf-pill-purple-background-color);
+    color: var(--pf-pill-purple-font-color);
+    border-color: var(--pf-pill-purple-border-color);
+  }
+
+  &--orange {
+    background-color: var(--pf-pill-orange-background-color);
+    color: var(--pf-pill-orange-font-color);
+    border-color: var(--pf-pill-orange-border-color);
+  }
+  &--teal {
+    background-color: var(--pf-pill-teal-background-color);
+    color: var(--pf-pill-teal-font-color);
+    border-color: var(--pf-pill-teal-border-color);
+  }
 }

package/src/components/tanstackTable/styles/_variables.scss

@@ -1,17 +1,17 @@
 // Light Theme Specific Variables
 
 :root [data-theme='light'] {
-  --pf-tanstack-table-background-color: var(--pf-white-color);
-  --pf-tanstack-table-header-background-color: var(--pf-gray-color-900);
+  --pf-tanstack-table-background-color: var(--pf-page-background-color);
+  --pf-tanstack-table-header-background-color: var(--pf-background-color-primary);
 
-  --pf-tanstack-table-font-color: var(--pf-gray-color-300);
-  --pf-tanstack-table-border-color: var(--pf-gray-color-700);
-  --pf-tanstack-table-stripe-color: var(--pf-gray-color-950);
-  --pf-tanstack-table-hover-color: var(--pf-secondary-color-900);
-  --pf-tanstack-table-disabled-color: var(--pf-gray-color-300);
-  --pf-tanstack-table-checked-color: var(--pf-gray-color-900);
-  --pf-tanstack-table-clicked-color: var(--pf-gray-color-800);
-  --pf-tanstack-table-highlighted-color: var(--pf-gray-color-700);
+  --pf-tanstack-table-font-color: var(--pf-font-color);
+  --pf-tanstack-table-border-color: var(--pf-border-color-secondary);
+  --pf-tanstack-table-stripe-color: var(--pf-background-color-secondary);
+  --pf-tanstack-table-hover-color: var(--pf-background-color-tertiary);
+  --pf-tanstack-table-disabled-color: var(--pf-background-color-quaternary);
+  --pf-tanstack-table-checked-color: var(--pf-background-color-accent);
+  --pf-tanstack-table-clicked-color: var(--pf-background-color-highlight);
+  --pf-tanstack-table-highlighted-color: var(--pf-tanstack-table-font-color);
   --pf-tanstack-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1),
     0 4px 8px rgba(0, 0, 0, 0.1);
   --pf-tanstack-table-font-size: var(--pf-font-size-body2);
@@ -22,21 +22,20 @@
 // Dark Theme Specific Variables
 :root [data-theme='dark'],
 :root {
-  --pf-tanstack-table-background-color: var(--pf-primary-color-800);
-  --pf-tanstack-table-header-background-color: var(--pf-primary-color-800);
+  --pf-tanstack-table-background-color: var(--pf-page-background-color);
+  --pf-tanstack-table-header-background-color: var(--pf-background-color-primary);
 
-  --pf-tanstack-table-font-color: var(--pf-white-color);
-  --pf-tanstack-table-border-color: var(--pf-tertiary-color-800);
-  --pf-tanstack-table-stripe-color: var(--pf-primary-color-700);
-  --pf-tanstack-table-hover-color: var(--pf-primary-color-600);
-  --pf-tanstack-table-disabled-color: var(--pf-gray-color-900);
-  --pf-tanstack-table-disabled-button-color: var(--pf-primary-color-100);
-  --pf-tanstack-table-checked-color: var(--pf-secondary-color-950);
-  --pf-tanstack-table-clicked-color: var(--pf-primary-color);
-  --pf-tanstack-table-highlighted-color: var(--pf-primary-color);
-  --pf-tanstack-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.4),
-    0 8px 16px rgba(0, 0, 0, 0.3);
+  --pf-tanstack-table-font-color: var(--pf-font-color);
+  --pf-tanstack-table-border-color: var(--pf-border-color-secondary);
+  --pf-tanstack-table-stripe-color: var(--pf-background-color-secondary);
+  --pf-tanstack-table-hover-color: var(--pf-background-color-tertiary);
+  --pf-tanstack-table-disabled-color: var(--pf-background-color-quaternary);
+  --pf-tanstack-table-checked-color: var(--pf-background-color-accent);
+  --pf-tanstack-table-clicked-color: var(--pf-background-color-highlight);
+  --pf-tanstack-table-highlighted-color: var(--pf-tanstack-table-font-color);
+  --pf-tanstack-table-highlighted-box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1),
+    0 4px 8px rgba(0, 0, 0, 0.1);
   --pf-tanstack-table-font-size: var(--pf-font-size-body2);
-  --pf-tanstack-table-pagination-background-color: var(--pf-primary-color-700);
+  --pf-tanstack-table-pagination-background-color: var(--pf-tanstack-table-background-color);
   --pf-tanstack-table-pagination-font-color: var(--pf-tanstack-table-font-color);
 }

package/src/components/tanstackTable/styles/table.scss

@@ -10,7 +10,7 @@
   }
 
   .tanstack-table__column--is-not-pinned {
-    opacity: 0.3;
+    opacity: 0.5;
   }
 
   .tanstack-table__container {
@@ -83,7 +83,7 @@
   }
 
   .is-loading {
-    border: var(--pf-border-thin) solid var(--pf-border-color);
+    border: var(--pf-border-thin) solid var(--pf-border-color-primary);
     height: 350px;
     width: 100%;
   }
@@ -208,7 +208,7 @@
     text-align: center;
     vertical-align: middle;
     height: 100%;
-    border: var(--pf-border-sm) solid var(--pf-border-color);
+    border: var(--pf-border-sm) solid var(--pf-border-color-primary);
 
     @keyframes shimmer {
       0% {

package/src/components/toast/Toast.mdx

@@ -7,8 +7,39 @@ import * as Toast from './Toast.stories';
 
 The Toast component is used to display a toast message. A Toast message is a notification that appears at the top of the screen to provide feedback to the user. This is a wrapper around the `react-toastify` library. To view their documentation, please visit [react-toastify](https://fkhadra.github.io/react-toastify/introduction).
 
-<Canvas of={Toast.Default} />
+  <Canvas of={Toast.Default} source={{
+    code: `
+args: {
+    position: 'top-right',
+    theme: 'colored',
+    autoClose: 300000000,
+  },
+  render: (args) => (
+    <div>
+      <Button ariaLabel="Click me" onClick={() => toast('Hello World')}>
+        Fire toast
+      </Button>
+      <Button ariaLabel="Click me" onClick={() => toast.info('Hello World')}>
+        Fire info toast
+      </Button>
+      <Button ariaLabel="Click me" onClick={() => toast.warning('Hello World')}>
+        Fire warning toast
+      </Button>
+      <Button ariaLabel="Click me" onClick={() => toast.error('Hello World')}>
+        Fire error toast
+      </Button>
+      <Button ariaLabel="Click me" onClick={() => toast.success('Hello World')}>
+        Fire success toast
+      </Button>
+      <ToastContainer {...args} />
+    </div>
+  `,
+  }}
+/>
 
 ### The following props are available for the Toast component, but not limited to:
 
 <Controls of={Toast.Default} />
+
+### Notes
+In order to use the Toast component, it is advised that you fire the toast using the `colored` theme and that you call it with the proper status. For example `toast.info` for a regular notification, `toast.success` for a success notification, `toast.warning` for a warning notification, and `toast.error` for an error notification.

package/src/components/toast/Toast.stories.tsx

@@ -1,6 +1,7 @@
 import { Meta, StoryObj } from '@storybook/react';
 import { toast, ToastContainer } from './index';
 import { Button } from '../button';
+import { Col, Row } from '../grid';
 
 const meta: Meta<typeof ToastContainer> = {
   title: 'Utilities/Toast',
@@ -19,7 +20,7 @@ const meta: Meta<typeof ToastContainer> = {
     },
     theme: {
       control: 'select',
-      options: ['light', 'dark'],
+      options: ['light', 'dark', 'colored'],
     },
     autoClose: {
       control: 'number',
@@ -41,15 +42,37 @@ type Story = StoryObj<typeof ToastContainer>;
 export const Default: Story = {
   args: {
     position: 'top-right',
-    theme: 'dark',
-    autoClose: 3000,
+    theme: 'colored',
+    autoClose: 300000000,
   },
   render: (args) => (
-    <div>
-      <Button ariaLabel="Click me" onClick={() => toast('Hello World')}>
-        Fire a toast
-      </Button>
-      <ToastContainer {...args} />
-    </div>
+    <Row>
+      <Col>
+        <Button ariaLabel="Click me" onClick={() => toast('Hello World')}>
+          Fire default toast
+        </Button>
+      </Col>
+      <Col>
+        <Button ariaLabel="Click me" onClick={() => toast.info('Hello World')}>
+          Fire info toast
+        </Button>
+      </Col>
+      <Col>
+        <Button ariaLabel="Click me" onClick={() => toast.warning('Hello World')}>
+          Fire warning toast
+        </Button>
+      </Col>
+      <Col>
+        <Button ariaLabel="Click me" onClick={() => toast.error('Hello World')}>
+          Fire error toast
+        </Button>
+      </Col>
+      <Col>
+        <Button ariaLabel="Click me" onClick={() => toast.success('Hello World')}>
+          Fire success toast
+        </Button>
+        <ToastContainer {...args} />
+      </Col>
+    </Row>
   ),
 };