@takaro/lib-components 0.4.3 → 0.4.6

package/src/components/data/Stats/Stats.stories.tsx

@@ -1,20 +1,22 @@
 import React from 'react';
 import { Meta, StoryFn } from '@storybook/react';
 import { Stats, StatsProps } from '../../../components';
+import { AiOutlineDollar, AiOutlineUser, AiOutlineShoppingCart, AiOutlineEye } from 'react-icons/ai';
 
 export default {
   title: 'Data/Stat',
   component: Stats,
   args: {
     direction: 'horizontal',
-    border: false,
+    grouped: false,
+    size: 'medium',
   },
 } as Meta<StatsProps>;
 
-export const HorizontalWithBorder: StoryFn<StatsProps> = () => {
+export const HorizontalGrouped: StoryFn<StatsProps> = () => {
   return (
     <div style={{ width: '1000px' }}>
-      <Stats direction="horizontal" border>
+      <Stats direction="horizontal" grouped>
         <Stats.Stat description="Credits" value="$0.00" />
         <Stats.Stat description="Current month so far" value="$0.00" />
         <Stats.Stat description="Last invoice" value="$0.00" />
@@ -23,10 +25,10 @@ export const HorizontalWithBorder: StoryFn<StatsProps> = () => {
   );
 };
 
-export const HorizontalWithoutBorder: StoryFn<StatsProps> = () => {
+export const HorizontalSeparated: StoryFn<StatsProps> = () => {
   return (
     <div style={{ width: '1000px' }}>
-      <Stats direction="horizontal" border={false}>
+      <Stats direction="horizontal" grouped={false}>
         <Stats.Stat description="Credits" value="$0.00" />
         <Stats.Stat description="Current month so far" value="$0.00" />
         <Stats.Stat description="Last invoice" value="$0.00" />
@@ -35,10 +37,10 @@ export const HorizontalWithoutBorder: StoryFn<StatsProps> = () => {
   );
 };
 
-export const VerticalWithBorder: StoryFn<StatsProps> = () => {
+export const VerticalGrouped: StoryFn<StatsProps> = () => {
   return (
     <div style={{ width: '300px' }}>
-      <Stats direction="vertical" border>
+      <Stats direction="vertical" grouped>
         <Stats.Stat description="Credits" value="$0.00" />
         <Stats.Stat description="Current month so far" value="$0.00" />
         <Stats.Stat description="Last invoice" value="$0.00" />
@@ -47,10 +49,10 @@ export const VerticalWithBorder: StoryFn<StatsProps> = () => {
   );
 };
 
-export const VerticalWithoutBorder: StoryFn<StatsProps> = () => {
+export const VerticalSeparated: StoryFn<StatsProps> = () => {
   return (
     <div style={{ width: '300px' }}>
-      <Stats direction="vertical" border={false}>
+      <Stats direction="vertical" grouped={false}>
         <Stats.Stat description="Credits" value="$0.00" />
         <Stats.Stat description="Current month so far" value="$0.00" />
         <Stats.Stat description="Last invoice" value="$0.00" />
@@ -59,10 +61,10 @@ export const VerticalWithoutBorder: StoryFn<StatsProps> = () => {
   );
 };
 
-export const LoadingWithoutBorder: StoryFn<StatsProps> = (args) => {
+export const LoadingState: StoryFn<StatsProps> = (args) => {
   return (
     <div style={{ width: '700px' }}>
-      <Stats direction={args.direction} border={args.border}>
+      <Stats direction={args.direction} grouped={args.grouped}>
         <Stats.Stat isLoading description="Credits" value="$0.00" />
         <Stats.Stat description="Current month so far" value="$0.00" />
         <Stats.Stat description="Last invoice" value="$0.00" />
@@ -70,3 +72,125 @@ export const LoadingWithoutBorder: StoryFn<StatsProps> = (args) => {
     </div>
   );
 };
+
+export const WithIcons: StoryFn<StatsProps> = () => {
+  return (
+    <div style={{ width: '1000px' }}>
+      <Stats direction="horizontal" grouped>
+        <Stats.Stat description="Revenue" value="$12,345" icon={<AiOutlineDollar />} />
+        <Stats.Stat description="Active Users" value={1234} icon={<AiOutlineUser />} />
+        <Stats.Stat description="Total Orders" value="567" icon={<AiOutlineShoppingCart />} />
+      </Stats>
+    </div>
+  );
+};
+
+export const WithTrends: StoryFn<StatsProps> = () => {
+  return (
+    <div style={{ width: '1000px' }}>
+      <Stats direction="horizontal" grouped>
+        <Stats.Stat
+          description="Revenue"
+          value="$12,345"
+          icon={<AiOutlineDollar />}
+          trend={{ direction: 'up', value: '+12.5%' }}
+        />
+        <Stats.Stat
+          description="Active Users"
+          value={1234}
+          icon={<AiOutlineUser />}
+          trend={{ direction: 'down', value: '-5.2%' }}
+        />
+        <Stats.Stat
+          description="Page Views"
+          value="45.2K"
+          icon={<AiOutlineEye />}
+          trend={{ direction: 'up', value: '+8%' }}
+        />
+      </Stats>
+    </div>
+  );
+};
+
+export const SizeVariants: StoryFn<StatsProps> = () => {
+  return (
+    <div style={{ display: 'flex', flexDirection: 'column', gap: '2rem' }}>
+      <div>
+        <h3>Small</h3>
+        <Stats direction="horizontal" grouped size="small">
+          <Stats.Stat description="Revenue" value="$12,345" icon={<AiOutlineDollar />} />
+          <Stats.Stat description="Users" value="1,234" icon={<AiOutlineUser />} />
+        </Stats>
+      </div>
+      <div>
+        <h3>Medium (Default)</h3>
+        <Stats direction="horizontal" grouped size="medium">
+          <Stats.Stat description="Revenue" value="$12,345" icon={<AiOutlineDollar />} />
+          <Stats.Stat description="Users" value="1,234" icon={<AiOutlineUser />} />
+        </Stats>
+      </div>
+      <div>
+        <h3>Large</h3>
+        <Stats direction="horizontal" grouped size="large">
+          <Stats.Stat description="Revenue" value="$12,345" icon={<AiOutlineDollar />} />
+          <Stats.Stat description="Users" value="1,234" icon={<AiOutlineUser />} />
+        </Stats>
+      </div>
+    </div>
+  );
+};
+
+export const AllFeatures: StoryFn<StatsProps> = () => {
+  return (
+    <div style={{ width: '1000px' }}>
+      <Stats direction="horizontal" grouped size="medium">
+        <Stats.Stat
+          description="Total Revenue"
+          value="$45,231"
+          icon={<AiOutlineDollar />}
+          trend={{ direction: 'up', value: '+20.1%' }}
+        />
+        <Stats.Stat
+          description="Active Users"
+          value="2,345"
+          icon={<AiOutlineUser />}
+          trend={{ direction: 'up', value: '+12%' }}
+        />
+        <Stats.Stat
+          description="Orders"
+          value="892"
+          icon={<AiOutlineShoppingCart />}
+          trend={{ direction: 'down', value: '-3.5%' }}
+        />
+        <Stats.Stat description="Page Views" value="123.4K" icon={<AiOutlineEye />} />
+      </Stats>
+    </div>
+  );
+};
+
+export const VerticalWithAllFeatures: StoryFn<StatsProps> = () => {
+  return (
+    <div style={{ width: '350px' }}>
+      <Stats direction="vertical" grouped size="medium">
+        <Stats.Stat
+          description="Total Revenue"
+          value="$45,231"
+          icon={<AiOutlineDollar />}
+          trend={{ direction: 'up', value: '+20.1%' }}
+        />
+        <Stats.Stat
+          description="Active Users"
+          value="2,345"
+          icon={<AiOutlineUser />}
+          trend={{ direction: 'up', value: '+12%' }}
+        />
+        <Stats.Stat
+          description="Total Orders"
+          value="892"
+          icon={<AiOutlineShoppingCart />}
+          trend={{ direction: 'down', value: '-3.5%' }}
+        />
+      </Stats>
+    </div>
+  );
+};

package/src/components/data/Stats/context.tsx

@@ -1,11 +1,18 @@
 import { createContext } from 'react';
 
 export type Direction = 'horizontal' | 'vertical';
+export type Size = 'small' | 'medium' | 'large';
 
 interface StatsContextValue {
-  border: boolean;
+  grouped: boolean;
   direction: Direction;
-  // TODO: size?: Size;
+  size: Size;
 }
 
-export const StatContext = createContext<StatsContextValue>(null as any);
+const defaultValue: StatsContextValue = {
+  grouped: false,
+  direction: 'vertical',
+  size: 'medium',
+};
+
+export const StatContext = createContext<StatsContextValue>(defaultValue);

package/src/components/data/Stats/index.tsx

@@ -1,24 +1,27 @@
 import { FC, PropsWithChildren, Children, isValidElement } from 'react';
 import { styled } from '../../../styled';
 import { Stat } from './Stat';
-import { StatContext, Direction } from './context';
+import { StatContext, Direction, Size } from './context';
 
-export const Container = styled.dl<{ direction: Direction; border: boolean; count: number }>`
+export const Container = styled.dl<{ direction: Direction; grouped: boolean; count: number }>`
   display: grid;
   ${({ direction, count }) => {
     return direction === 'horizontal'
       ? `grid-template-columns: repeat(${count},1fr)`
       : `grid-template-rows: repeat(${count},1fr)`;
   }};
-  border: ${({ border, theme }) => (border ? `1px solid ${theme.colors.secondary}` : 'none')};
+  border: ${({ grouped, theme }) => (grouped ? `1px solid ${theme.colors.secondary}` : 'none')};
   border-radius: ${({ theme }) => theme.borderRadius.medium};
-  gap: ${({ theme, direction }) => (direction === 'vertical' ? theme.spacing['2'] : 0)}
-    ${({ theme, direction }) => (direction === 'horizontal' ? theme.spacing['2'] : 0)};
+  gap: ${({ theme, direction, grouped }) => {
+    if (grouped) return 0;
+    return direction === 'vertical' ? `${theme.spacing['2']} 0` : `0 ${theme.spacing['2']}`;
+  }};
 `;
 
 export interface StatsProps {
   direction?: Direction;
-  border: boolean;
+  grouped: boolean;
+  size?: Size;
 }
 
 interface SubComponents {
@@ -27,7 +30,8 @@ interface SubComponents {
 
 export const Stats: FC<PropsWithChildren<StatsProps>> & SubComponents = ({
   direction = 'vertical',
-  border,
+  grouped,
+  size = 'medium',
   children,
 }) => {
   // throw error if child is not a Stat component
@@ -41,10 +45,13 @@ export const Stats: FC<PropsWithChildren<StatsProps>> & SubComponents = ({
   });
 
   return (
-    <Container direction={direction} border={border} count={Children.count(children)}>
-      <StatContext.Provider value={{ border, direction }}>{children}</StatContext.Provider>
+    <Container direction={direction} grouped={grouped} count={Children.count(children)}>
+      <StatContext.Provider value={{ grouped, direction, size }}>{children}</StatContext.Provider>
     </Container>
   );
 };
 
 Stats.Stat = Stat;
+
+export type { Direction, Size } from './context';
+export type { TrendConfig } from './Stat';

package/src/components/dialogs/Dialog/Dialog.stories.tsx

@@ -26,7 +26,7 @@ export const Default: StoryFn = () => {
 
   return (
     <>
-      <Button onClick={() => setOpen(true)} text="Open dialog" />
+      <Button onClick={() => setOpen(true)}>Open dialog</Button>
       <Dialog open={open} onOpenChange={setOpen}>
         <Dialog.Content>
           <Dialog.Heading>New Module</Dialog.Heading>
@@ -35,7 +35,9 @@ export const Default: StoryFn = () => {
             <p>Modules are what makes Takaro great.</p>
             <form onSubmit={handleSubmit(onSubmit)}>
               <TextField label="Module name" name="moduleName" placeholder="cute kittens" control={control} />
-              <Button text="Create module" type="submit" fullWidth />
+              <Button type="submit" fullWidth>
+                Create module
+              </Button>
             </form>
           </Dialog.Body>
         </Dialog.Content>
@@ -54,7 +56,7 @@ export const SingleActionDialog: StoryFn = () => {
 
   return (
     <>
-      <Button onClick={() => setOpen(true)} text="Open dialog" />
+      <Button onClick={() => setOpen(true)}>Open dialog</Button>
       <Dialog open={open} onOpenChange={setOpen}>
         <Dialog.Content>
           <Dialog.Heading>New Module</Dialog.Heading>
@@ -64,7 +66,9 @@ export const SingleActionDialog: StoryFn = () => {
               Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et
               dolore magna aliqua.
             </p>
-            <Button onClick={handleAction} size="large" fullWidth text="Go back to dashboard" />
+            <Button onClick={handleAction} size="large" fullWidth>
+              Go back to dashboard
+            </Button>
           </Dialog.Body>
         </Dialog.Content>
       </Dialog>

package/src/components/feedback/Alert/Alert.stories.tsx

@@ -13,6 +13,13 @@ export default {
 
 export const Default: StoryFn<AlertProps> = (args) => <Alert {...args} />;
 
+export const TitleOnly: StoryObj<AlertProps> = {
+  args: {
+    title: 'Important Notice',
+    variant: 'info',
+  },
+};
+
 export const WithList: StoryObj<AlertProps> = {
   args: {
     title: 'There were errors with your submission',

package/src/components/feedback/Alert/__snapshots__/Alert.test.tsx.snap

@@ -3,15 +3,17 @@
 exports[`Should render <Alert/> 1`] = `
 <div>
   <div
-    class="sc-aXZVg eHujeX"
+    aria-atomic="true"
+    aria-live="polite"
+    class="sc-aXZVg efcfNn"
     role="status"
     style="opacity: 0; will-change: opacity;"
   >
     <div
-      class="sc-gEvEer xJHes"
+      class="sc-gEvEer ciCPPR"
     >
       <div
-        class="sc-eqUAAy cuxXJQ"
+        class="sc-eqUAAy hqcNUj"
       >
         <svg
           fill="currentColor"
@@ -34,7 +36,7 @@ exports[`Should render <Alert/> 1`] = `
         Alert text
       </p>
       <div
-        class="sc-fqkvVR JhYnd action"
+        class="sc-fqkvVR huFkoW action"
       />
     </div>
   </div>

package/src/components/feedback/Alert/index.tsx

@@ -27,12 +27,16 @@ export interface AlertProps {
 }
 
 export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
-  { variant, title, text, dismiss = false, elevation = 4, action },
+  { variant, title, text, dismiss = false, elevation = 2, action },
   ref,
 ) {
   const [visible, setVisible] = useState(true);
-
-  const hasTitle = title ? true : false;
+  const hasTitle = !!title;
+  const hasText = !!text;
+  const hasContent = hasTitle || hasText;
+  // Use center alignment when we have only one content line (title OR text, not both)
+  // Use start alignment when we have multiple lines (title AND text, or text as an array)
+  const useStartAlignment = (hasTitle && hasText) || Array.isArray(text);
 
   const handleExecute = (e: MouseEvent<HTMLButtonElement>) => {
     e.preventDefault();
@@ -66,10 +70,19 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
     if (typeof text === 'string') {
       return <p>{text}</p>;
     } else if (Array.isArray(text)) {
-      return <ul>{text?.map((message) => <li key={'message-' + message}>{message}</li>)}</ul>;
+      return <ul>{text?.map((message, index) => <li key={index}>{message}</li>)}</ul>;
     }
   }
 
+  // Determine ARIA role based on variant
+  const getAriaRole = () => {
+    return variant === 'error' || variant === 'warning' ? 'alert' : 'status';
+  };
+
+  const getAriaLive = () => {
+    return variant === 'error' || variant === 'warning' ? 'assertive' : 'polite';
+  };
+
   return (
     <AnimatePresence>
       {visible && (
@@ -82,25 +95,22 @@ export const Alert = forwardRef<HTMLDivElement, AlertProps>(function Alert(
           $elevation={elevation}
           transition={{ duration: 0.2 }}
           ref={ref}
-          role="status"
+          role={getAriaRole()}
+          aria-live={getAriaLive()}
+          aria-atomic="true"
         >
-          <Grid>
+          <Grid $useStartAlignment={useStartAlignment}>
             <IconContainer variant={variant}>{getIcon()}</IconContainer>
             {title && <h2>{title}</h2>}
             {renderText()}
-            <ButtonContainer
-              hasTitle={hasTitle}
-              show={dismiss || action ? true : false}
-              variant={variant}
-              className="action"
-            >
+            <ButtonContainer hasContent={hasContent} show={!!(dismiss || action)} variant={variant} className="action">
               {action && (
-                <Button size="tiny" variant="outline" onClick={handleExecute} color={variant}>
+                <Button size="small" variant="outline" onClick={handleExecute} color={variant}>
                   {action.text}
                 </Button>
               )}
               {dismiss && (
-                <Button size="tiny" color="white" variant="outline" onClick={handleDismiss}>
+                <Button size="small" color="white" variant="outline" onClick={handleDismiss}>
                   Dismiss
                 </Button>
               )}

package/src/components/feedback/Alert/style.ts

@@ -12,33 +12,38 @@ export const Container = styled(motion.div)<{
   $elevation: Elevation;
 }>`
   width: 100%;
-  padding: ${({ theme }) =>
-    `${theme.spacing['0_75']} ${theme.spacing['0_75']} ${theme.spacing['0_75']} ${theme.spacing['0']}`};
+  padding: ${({ theme }) => theme.spacing['0_75']};
   border-radius: ${({ theme }) => theme.borderRadius.large};
   box-shadow: ${({ theme, $elevation }) => theme.elevation[$elevation]};
   margin: ${({ theme }) => `${theme.spacing['1_5']} auto`};
   h2 {
-    font-size: 1.825rem;
-    display: flex;
-    align-items: center;
+    font-size: ${({ theme }) => theme.fontSize.mediumLarge};
     font-weight: 700;
-    justify-content: flex-start;
+    margin: 0;
+    text-align: left;
   }
   p {
-    margin-top: ${({ theme, $hasTitle }) => ($hasTitle ? theme.spacing['0_5'] : theme.spacing[0])};
+    margin-top: ${({ theme, $hasTitle }) => ($hasTitle ? theme.spacing['0_25'] : theme.spacing[0])};
     margin-bottom: 0;
     hyphens: auto;
+    text-align: left;
+    font-size: ${({ theme }) => theme.fontSize.medium};
   }
-  p,
   li {
-    font-size: 1.325rem;
+    font-size: ${({ theme }) => theme.fontSize.medium};
+    text-align: left;
   }
   ul {
     margin-left: ${({ theme }) => theme.spacing['1_5']};
+    margin-top: ${({ theme, $hasTitle }) => ($hasTitle ? theme.spacing['0_25'] : theme.spacing[0])};
+    margin-bottom: 0;
     li {
       list-style-type: disc;
       margin-top: ${({ theme }) => theme.spacing['0_5']};
       margin-bottom: ${({ theme }) => theme.spacing['0_5']};
+      &::marker {
+        font-size: ${({ theme }) => theme.fontSize.medium};
+      }
     }
   }
   /* set background color equal to provided type */
@@ -59,12 +64,14 @@ export const Container = styled(motion.div)<{
   }}
 `;
 
-export const Grid = styled.div`
+export const Grid = styled.div<{ $useStartAlignment: boolean }>`
   display: grid;
   grid-template-columns: 40px 1fr;
-  align-items: center;
+  align-items: ${({ $useStartAlignment }) => ($useStartAlignment ? 'start' : 'center')};
+  gap: ${({ theme }) => theme.spacing['0_5']};
 
   p,
+  ul,
   .action {
     grid-column: 2;
   }
@@ -75,17 +82,18 @@ export const IconContainer = styled.div<{ variant: AlertVariants }>`
   align-items: center;
   justify-content: center;
   svg {
-    fill: ${({ variant, theme }): string => theme.colors[variant]};
+    fill: white;
   }
 `;
 
 export const ButtonContainer = styled.div<{
   show: boolean;
   variant: AlertVariants;
-  hasTitle: boolean;
+  hasContent: boolean;
 }>`
   display: ${({ show }): string => (show ? 'flex' : 'none')};
   align-items: center;
-  white-space: nowrap;
-  margin-top: ${({ theme, hasTitle }): string => (hasTitle ? theme.spacing['1'] : theme.spacing[0])};
+  flex-wrap: wrap;
+  gap: ${({ theme }) => theme.spacing['0_5']};
+  margin-top: ${({ theme, hasContent }): string => (hasContent ? theme.spacing['1'] : theme.spacing[0])};
 `;

package/src/components/feedback/Tooltip/Tooltip.stories.tsx

@@ -63,7 +63,7 @@ export const Controlled: StoryFn<TooltipProps & ExtraTooltipStoryProps> = () =>
         <Tooltip.Trigger asChild>I am the trigger</Tooltip.Trigger>
         <Tooltip.Content>controlled tooltip</Tooltip.Content>
       </Tooltip>
-      <Button onClick={() => setOpen(true)} text="open tooltip on, I am the trigger" />
+      <Button onClick={() => setOpen(true)}>open tooltip on, I am the trigger</Button>
     </>
   );
 };

package/src/components/feedback/snacks/Default/default.stories.tsx

@@ -38,7 +38,7 @@ export const Default: StoryFn<DefaultSnackProps> = (args) => {
 
   return (
     <Wrapper>
-      <Button onClick={handleOnClick} text="show snack" />
+      <Button onClick={handleOnClick}>show snack</Button>
     </Wrapper>
   );
 };
@@ -51,22 +51,23 @@ export const Buttons: StoryFn<DefaultSnackProps> = (args) => {
       title: args.title,
       type: args.type,
       key: 'software-update',
-      button1: <Button text="Update" />,
+      button1: <Button>Update</Button>,
       button2: (
         <Button
           onClick={() => {
             closeSnackbar('software-update');
           }}
-          text="Not now"
           variant="outline"
-        />
+        >
+          Not now
+        </Button>
       ),
     });
   };
 
   return (
     <Wrapper>
-      <Button onClick={handleOnClick} text="show snack" />
+      <Button onClick={handleOnClick}>show snack</Button>
     </Wrapper>
   );
 };

package/src/components/feedback/snacks/Drawer/Drawer.stories.tsx

@@ -42,5 +42,5 @@ export const Downloads: StoryFn = () => {
     });
   };
 
-  return <Button onClick={() => showSnack()} text="Show snack" />;
+  return <Button onClick={() => showSnack()}>Show snack</Button>;
 };

package/src/components/inputs/CheckBox/CheckBox.stories.tsx

@@ -43,7 +43,7 @@ export const OnSubmit: StoryFn<CheckBoxProps & { defaultValue: boolean }> = (arg
     <>
       <form onSubmit={handleSubmit(onSubmit)}>
         <CheckBox {...args} control={control} />
-        <Button type="submit" text="submit" />
+        <Button type="submit">submit</Button>
       </form>
       <pre>value: {result ? 'true' : 'false'}</pre>
       <p>NOTE: defaultValue will only be set on initial load. Limitation of react-hook-form.</p>

package/src/components/inputs/CodeField/CodeField.stories.tsx

@@ -55,7 +55,7 @@ export const OnSubmit: StoryFn<CodeFieldProps> = (args) => {
           label={args.label}
           size={args.size}
         />
-        <Button type="submit" text="Submit form" />
+        <Button type="submit">Submit form</Button>
       </form>
       <div>{result}</div>
     </>

package/src/components/inputs/Date/DatePicker/DatePicker.stories.tsx

@@ -74,7 +74,7 @@ export const OnDateSubmit: StoryFn<DatePickerProps> = (args) => {
           allowFutureDates={args.allowFutureDates}
           allowPastDates={args.allowPastDates}
         />
-        <Button type="submit" text="Submit form" />
+        <Button type="submit">Submit form</Button>
       </form>
       <p>result: {result}</p>
     </Wrapper>
@@ -110,7 +110,7 @@ export const CustomDateFilter: StoryFn<DatePickerProps> = (args) => {
           popOverPlacement={args.popOverPlacement}
           customDateFilter={(date) => date.weekday == 6 || date.weekday == 7}
         />
-        <Button type="submit" text="Submit form" />
+        <Button type="submit">Submit form</Button>
       </form>
       <p>result: {result}</p>
     </Wrapper>
@@ -148,7 +148,7 @@ export const OnDateAndTimeSubmit: StoryFn<DatePickerProps> = (args) => {
           allowPastDates={args.allowPastDates}
           allowFutureDates={args.allowFutureDates}
         />
-        <Button type="submit" text="Submit form" />
+        <Button type="submit">Submit form</Button>
       </form>
       <p>result: {result}</p>
     </Wrapper>
@@ -186,7 +186,7 @@ export const OnTimeSubmit: StoryFn<DatePickerProps> = (args) => {
           allowPastDates={args.allowPastDates}
           allowFutureDates={args.allowFutureDates}
         />
-        <Button type="submit" text="Submit form" />
+        <Button type="submit">Submit form</Button>
       </form>
       <p>result: {result}</p>
     </Wrapper>
@@ -225,7 +225,7 @@ export const RelativeSubmit: StoryFn<DatePickerProps> = (args) => {
           allowPastDates={args.allowPastDates}
           allowFutureDates={args.allowFutureDates}
         />
-        <Button type="submit" text="Submit form" />
+        <Button type="submit">Submit form</Button>
       </form>
       <p>result: {result}</p>
     </Wrapper>
@@ -259,7 +259,7 @@ export const AbsoluteSubmit = () => {
           allowPastDates={false}
           format={DateTime.TIME_SIMPLE}
         />
-        <Button type="submit" text="Submit form" />
+        <Button type="submit">Submit form</Button>
       </form>
       <p>result: {result}</p>
     </StrictMode>