Merge pull request #151 from osstotalsoft/ControlsAndExamplesUpdates

Storybook controls and examples updates

src/components/buttons/BackToButton/types.ts

@@ -4,7 +4,7 @@
 import { NavigateOptions } from 'react-router'
 import { IconButtonProps } from '../IconButton/types'
 
-export interface BackToButtonProps extends IconButtonProps {
+export interface BackToButtonProps extends Omit<IconButtonProps, 'type'> {
   /**
    * Path where browser will be directed to when the button is clicked.
    */

src/components/buttons/UploadButton/types.ts

@@ -4,7 +4,7 @@
 import { IconButtonProps } from '../IconButton/types'
 import { SvgIconComponent } from '@mui/icons-material'
 import { F } from 'ts-toolbelt'
-export interface UploadButtonProps extends IconButtonProps {
+export interface UploadButtonProps extends Omit<IconButtonProps, 'type'> {
   /**
    * @default BackupIcon
    * The Icon to display.

src/components/feedback/Toast/ToastContainer.tsx

@@ -39,14 +39,6 @@ const ToastContainer: React.FC<ToastContainerProps> = ({
 }
 
 ToastContainer.propTypes = {
-  /**
-   * Set the delay in ms to close the toast automatically.
-   * Use `false` to prevent the toast from closing.
-   * @default false
-   */
-  // eslint-disable-next-line @typescript-eslint/ban-ts-comment
-  // @ts-ignore
-  autoClose: PropTypes.oneOf([PropTypes.number, false]),
   /**
    * Limit the number of toast displayed at the same time
    * @default 5

src/components/feedback/Toast/useToast.tsx

@@ -25,7 +25,6 @@ const useToast = () => {
         [classes[variant]]: variant,
         [classes['default']]: true
       })
-
       const options: ToastOptionsBase = {
         ...restOptions,
         transition: getTransitionType(transitionType),

src/stories/feedback/Toast/TextSizePreview.tsx

@@ -0,0 +1,29 @@
+// Copyright (c) TotalSoft.
+// This source code is licensed under the MIT license.
+
+import React from 'react'
+import { Button, ToastContainer, useToast } from 'components'
+import Grid from '@mui/material/Grid2'
+
+const TextSizePreview = (args: any) => {
+  const addToast = useToast()
+
+  return (
+    <Grid container spacing={2} justifyItems={'flex-start'}>
+      <ToastContainer {...args} />
+      <Button
+        size={'small'}
+        color={'primary'}
+        onClick={() =>
+          addToast('This message font will change if you change textSize property of ToastContainer!', 'success', {
+            ...args
+          })
+        }
+      >
+        {'Change text size from controls.'}
+      </Button>
+    </Grid>
+  )
+}
+
+export default TextSizePreview

src/stories/feedback/Toast/Toast.stories.tsx

@@ -8,6 +8,7 @@ import VariantsPreview from './VariantsPreview'
 import PositionsPreview from './PositionsPreview'
 import TransitionsPreview from './TransitionsPreview'
 import ActionsPreview from './ActionsPreview'
+import TextSizePreview from './TextSizePreview'
 
 const meta: Meta<typeof ToastContainer> = {
   title: 'Components/Feedback/Toast',
@@ -113,7 +114,7 @@ export const Variants: Story = {
       }
     }
   },
-  render: args => <VariantsPreview {...args}  />
+  render: args => <VariantsPreview {...args} />
 }
 /**
  * Different positions are available for rendering toast.
@@ -188,7 +189,7 @@ export const Positions: Story = {
       }
     }
   },
-  render: args => <PositionsPreview {...args}/>
+  render: args => <PositionsPreview {...args} />
 }
 
 /**
@@ -290,3 +291,34 @@ export const Actions: Story = {
   },
   render: args => <ActionsPreview {...args} />
 }
+
+/**
+ * You can change the content font size by changing the ToastContainer textSize parameter of the application
+ * Available options are:
+ * - small
+ * - medium
+ * - large
+ * Default is set to 'small'.
+ */
+export const TextSize: Story = {
+  parameters: {
+    docs: {
+      source: {
+        code: `      <ToastContainer textSize={textSize} />
+      <Button
+        size={'small'}
+        color={'primary'}
+        onClick={() =>
+          addToast('This message font will change if you change textSize property of ToastContainer!', 'success', {
+            ...args
+          })
+        }
+      >
+        {'Change text size from controls.'}
+      </Button>`,
+        format: true
+      }
+    }
+  },
+  render: args => <TextSizePreview {...args} />
+}

src/stories/surfaces/Accordion/Accordion.stories.tsx

@@ -136,7 +136,6 @@ export const Actions: Story = {
                       options={options}
                       value={value}
                       onChange={handleChange}
-                      stopEventPropagation
                     />
                   </Grid>
                   <Grid size={{ lg: 1 }}>

src/stories/surfaces/Accordion/ActionsPreview.tsx

@@ -32,7 +32,6 @@ const ActionsPreview = () => {
               options={options}
               value={value}
               onChange={handleChange}
-              stopEventPropagation
               isClearable
             />
             <Typography>{`Selected value: ${JSON.stringify(value)}`}</Typography>

src/stories/surfaces/Card/Card.stories.tsx

@@ -46,7 +46,6 @@ const actions = (
  */
 export const Card: Story = {
   args: { title, subheader, children, icon: People, footer, actions },
-
   parameters: {
     docs: {
       source: {

src/stories/surfaces/CollapseCard/CollapseCard.stories.tsx

@@ -142,7 +142,7 @@ export const Filled: Story = {
       }
     }
   },
-  render: () => <FilledPreview />
+  render: args => <FilledPreview {...args} />
 }
 
 /**
@@ -178,7 +178,7 @@ export const Controlled: Story = {
       }
     }
   },
-  render: () => <ControlledPreview />
+  render: args => <ControlledPreview {...args} />
 }
 
 /**

src/stories/surfaces/CollapseCard/ControlledPreview.tsx

@@ -33,7 +33,7 @@ const uncontrolled = `
   }
 `
 
-const ControlledPreview = () => {
+const ControlledPreview = (args: any) => {
   const [expanded, setExpanded] = useState(false)
   const handleToggle = useCallback(() => setExpanded(current => !current), [])
 
@@ -55,6 +55,7 @@ const ControlledPreview = () => {
               <QuestionMark fontSize="small" />
             </IconButton>
           }
+          {...args}
         />
       </Grid>
       <Grid size={4}>

src/stories/surfaces/CollapseCard/FilledPreview.tsx

@@ -3,7 +3,7 @@ import { Button, IconButton, Typography, CollapseCard } from 'components'
 import QuestionMark from '@mui/icons-material/QuestionMark'
 import { Grid2 as Grid, TextField } from '@mui/material'
 
-const FilledPreview = () => {
+const FilledPreview = (args: any) => {
   return (
     <CollapseCard
       filled
@@ -18,6 +18,7 @@ const FilledPreview = () => {
           <QuestionMark fontSize="small" />
         </IconButton>
       }
+      {...args}
     >
       <Grid container rowSpacing={3} justifyContent="center">
         <Grid size={8}>

src/stories/surfaces/StatsCard/StatsCard.stories.tsx

@@ -57,6 +57,7 @@ export const Default: Story = {
  * Stats Card component allows displaying any type of data, string, numeric, React Node, etc.
  */
 export const VariousContents: Story = {
+  args: { icon, title, footer },
   parameters: {
     controls: { hideNoControlsWarning: true },
     docs: {
@@ -86,11 +87,11 @@ export const VariousContents: Story = {
       }
     }
   },
-  render: () => (
+  render: args => (
     <>
-      <StatsCardComponent {...Default.args} description={'4.39 $'} />
+      <StatsCardComponent {...args} description={'4.39 $'} />
       <StatsCardComponent
-        {...Default.args}
+        {...args}
         icon={Group}
         description={
           <>