refactor: the note of the react message is displayed with Callout (#60)

lautarovilas · web-flow · commit 81685bd75a06 · 2023-08-01T12:30:02.000-03:00
* refactor: now the 'message this documentation assumes...' is displayed inside a Callout

---------

Co-authored-by: lautarovilas &lt;lautarovilas@users.noreply.github.com&gt;
diff --git a/docs/components/bar-list.mdx b/docs/components/bar-list.mdx
@@ -714,7 +714,6 @@ const IconTwitter = () => {
 ]}
 />
 
-Note: This documentation assumes that the audience has basic knowledge of React
-and how to use components in React applications.
+<AlertReactKnowledge /> 
 
- <BackAndForwardController />
+<BackAndForwardController />
diff --git a/docs/components/callout.mdx b/docs/components/callout.mdx
@@ -137,6 +137,6 @@ export default function App() {
 
 />
 
-Note: This documentation assumes that the audience has basic knowledge of React and how to use components in React applications.
+<AlertReactKnowledge />
 
 <BackAndForwardController />
diff --git a/docs/components/circle.mdx b/docs/components/circle.mdx
@@ -178,6 +178,6 @@ within it.
     ]}
 />
 
-Note: This documentation assumes that the audience has basic knowledge of React and how to use components in React applications.
+<AlertReactKnowledge />
 
 <BackAndForwardController />
diff --git a/docs/components/date-picker.mdx b/docs/components/date-picker.mdx
@@ -157,6 +157,6 @@ With the prop <Tag text='maxDate' />, you can define the maximum selectable date
   ]}
 />
 
-Note: This documentation assumes that the audience has basic knowledge of React and how to use components in React applications.
+<AlertReactKnowledge />
 
 <BackAndForwardController />
diff --git a/docs/components/dropdown.mdx b/docs/components/dropdown.mdx
@@ -142,6 +142,6 @@ export default DropdownComponent
   ]}
 />
 
-Note: This documentation assumes that the audience has basic knowledge of React and how to use components in React applications.
+<AlertReactKnowledge />
 
 <BackAndForwardController />
diff --git a/docs/components/dynamic-hero-icon.mdx b/docs/components/dynamic-hero-icon.mdx
@@ -100,6 +100,6 @@ With the prop <Tag text='className' />, you can choose the color of the chosen i
 You can import IconName like this <Tag text='import {IconName} from "dd360-ds/DynamicHeroIcon"' />
 
 
-Note: This documentation assumes that the audience has basic knowledge of React and how to use components in React applications.
+<AlertReactKnowledge />
 
 <BackAndForwardController />
diff --git a/docs/components/filter-select-multi.mdx b/docs/components/filter-select-multi.mdx
@@ -321,6 +321,6 @@ The prop <Tag text='width' /> used to customize the size
 
 />
 
-Note: This documentation assumes that the audience has basic knowledge of React and how to use components in React applications.
+<AlertReactKnowledge />
 
 <BackAndForwardController />
diff --git a/docs/components/filter-select.mdx b/docs/components/filter-select.mdx
@@ -354,6 +354,6 @@ The prop <Tag text='width' /> used to customize the size
 
 />
 
-Note: This documentation assumes that the audience has basic knowledge of React and how to use components in React applications.
+<AlertReactKnowledge />
 
 <BackAndForwardController />
diff --git a/docs/components/skeleton.mdx b/docs/components/skeleton.mdx
@@ -163,6 +163,6 @@ tabular structure.
   ]}
 />
 
-Note: This documentation assumes that the audience has basic knowledge of React and how to use components in React applications.
+<AlertReactKnowledge />
 
 <BackAndForwardController />
diff --git a/docs/components/table.mdx b/docs/components/table.mdx
@@ -525,6 +525,6 @@ The "Accordion" component is an interactive element that allows you to expand an
 
 />
 
-Note: This documentation assumes that the audience has basic knowledge of React and how to use components in React applications.
+<AlertReactKnowledge />
 
 <BackAndForwardController />
diff --git a/docs/components/tooltip.mdx b/docs/components/tooltip.mdx
@@ -197,6 +197,6 @@ const TwitterIcon = () => {
   ]}
 />
 
-Note: This documentation assumes that the audience has basic knowledge of React and how to use components in React applications.
+<AlertReactKnowledge />
 
 <BackAndForwardController />
diff --git a/docs/controls/progress-circle.mdx b/docs/controls/progress-circle.mdx
@@ -151,6 +151,6 @@ With the prop <Tag text='strokeWidth'/> you can customize the thickness of the p
 
 />
 
-Note: This documentation assumes that the audience has basic knowledge of React and how to use components in React applications.
+<AlertReactKnowledge />
 
 <BackAndForwardController />
diff --git a/docs/controls/progressbar.mdx b/docs/controls/progressbar.mdx
@@ -124,6 +124,6 @@ With the prop <Tag text='animated' /> you can modify the color of the container
 
 />
 
-Note: This documentation assumes that the audience has basic knowledge of React and how to use components in React applications.
+<AlertReactKnowledge />
 
 <BackAndForwardController />
diff --git a/docs/controls/spinner.mdx b/docs/controls/spinner.mdx
@@ -131,6 +131,6 @@ you can customize the size of the spinner
 
 />
 
-Note: This documentation assumes that the audience has basic knowledge of React and how to use components in React applications.
+<AlertReactKnowledge />
 
 <BackAndForwardController />
diff --git a/docs/controls/stepper.mdx b/docs/controls/stepper.mdx
@@ -156,6 +156,6 @@ With the prop <Tag text='text' /> you can add a custom text in case you don't ne
 
 />
 
-Note: This documentation assumes that the audience has basic knowledge of React and how to use components in React applications.
+<AlertReactKnowledge />
 
 <BackAndForwardController />
diff --git a/docs/controls/switch.mdx b/docs/controls/switch.mdx
@@ -94,6 +94,6 @@ With the prop <Tag text='customIcon' /> you can add icon on switch disabled
 
 />
 
-Note: This documentation assumes that the audience has basic knowledge of React and how to use components in React applications.
+<AlertReactKnowledge />
 
 <BackAndForwardController />
diff --git a/docs/layout/navbar.mdx b/docs/layout/navbar.mdx
@@ -580,6 +580,6 @@ NavbarCollapseContent Props:
     ]}
 />
 
-Note: This documentation assumes that the audience has basic knowledge of React and how to use components in React applications.
+<AlertReactKnowledge />
 
 <BackAndForwardController />
diff --git a/docs/modals/aside-modal.mdx b/docs/modals/aside-modal.mdx
@@ -123,6 +123,6 @@ With the prop <Tag text='disableEscapeKeyDown' /> you can disable the closing of
     ]}
 />
 
-Note: This documentation assumes that the audience has basic knowledge of React and how to use components in React applications.
+<AlertReactKnowledge />
 
 <BackAndForwardController />
diff --git a/docs/modals/file-viewer.mdx b/docs/modals/file-viewer.mdx
@@ -62,6 +62,6 @@ The FileViewer component supports the following props:
     ]}
 />
 
-Note: This documentation assumes that the audience has basic knowledge of React and how to use components in React applications.
+<AlertReactKnowledge />
 
 <BackAndForwardController />
diff --git a/docs/modals/modal.mdx b/docs/modals/modal.mdx
@@ -116,6 +116,6 @@ With the prop <Tag text='fullScreen' /> you can make the modal take up the whole
     ]}
 />
 
-Note: This documentation assumes that the audience has basic knowledge of React and how to use components in React applications.
+<AlertReactKnowledge />
 
 <BackAndForwardController />
diff --git a/src/hooks/useGetComponents.tsx b/src/hooks/useGetComponents.tsx
@@ -26,7 +26,8 @@ import {
   AsideModalCustom,
   PaginationCustom,
   TabsCustom,
-  SwitchCustom
+  SwitchCustom,
+  AlertReactKnowledge
 } from '@/modules/docs'
 import { TransitionCustom } from '@/components/Layout'
 import { useTheme } from '@/store/theme-store'
@@ -147,6 +148,7 @@ export function useGetComponents() {
     FilterDateCustom,
     DropdownCustom,
     BackAndForwardController,
+    AlertReactKnowledge,
     ...Components,
     SideBar
     // Add other custom components here as needed ---| Here |---
diff --git a/src/modules/docs/components/AlertReactKnowledge.tsx b/src/modules/docs/components/AlertReactKnowledge.tsx
@@ -0,0 +1,15 @@
+import { CustomCallout } from '@/modules/docs'
+
+const AlertReactKnowledge = () => {
+  return (
+    <CustomCallout
+      variant="info"
+      title="Note"
+      icon="info"
+      description="This documentation assumes that the audience has basic knowledge of React
+    and how to use components in React applications."
+    />
+  )
+}
+
+export default AlertReactKnowledge
diff --git a/src/modules/docs/components/index.ts b/src/modules/docs/components/index.ts
@@ -7,3 +7,4 @@ export { default as ConfirmDialogCustom } from './ConfirmDialogCustom'
 export { default as FilterSelectCustom } from './FilterSelectCustom'
 export { default as FilterDateCustom } from './FilterDateCustom'
 export { default as DropdownCustom } from './DropdownCustom'
+export { default as AlertReactKnowledge } from './AlertReactKnowledge'
