Added Floating Label under Forms in the docs

themesberg · Sep 13, 2023 · 7f06ff7 · 7f06ff7
1 parent d103b99
commit 7f06ff7
Show file tree

Hide file tree

Showing 4 changed files with 35 additions and 3 deletions.
diff --git a/...ponents/floating-label/floating-label.mdx → ...s/forms/floating-label/floating-label.mdx b/...ponents/floating-label/floating-label.mdx → ...s/forms/floating-label/floating-label.mdx
@@ -43,7 +43,11 @@ Use the following examples of input validation for the success and error message
     <FloatingLabel buttonStyle="standard" label="Standard Error" error={true} />
   </div>
 </CodePreview>
-## Sizes Use the small and default sizes of the floating label input fields from the following example.
+
+## Sizes
+
+Use the small and default sizes of the floating label input fields from the following example.
+
 <CodePreview title="Floating Label" className="flex flex-col">
   <div className="grid grid-flow-col justify-stretch space-x-4">
     <FloatingLabel buttonStyle="filled" label="Small Filled" sizing="sm" />
@@ -56,7 +60,11 @@ Use the following examples of input validation for the success and error message
     <FloatingLabel buttonStyle="standard" label="Default Standard" />
   </div>
 </CodePreview>
-## Helper text Add a helper text in addition to the label if you want to show more information below the input field.
+
+## Helper text
+
+Add a helper text in addition to the label if you want to show more information below the input field.
+
 <CodePreview title="Floating Label" className="grid grid-flow-col justify-stretch space-x-4">
   <FloatingLabel
     buttonStyle="filled"

diff --git a/app/docs/components/floating-label/index.tsx → app/docs/forms/floating-label/index.tsx b/app/docs/components/floating-label/index.tsx → app/docs/forms/floating-label/index.tsx
diff --git a/app/docs/components/floating-label/page.tsx → app/docs/forms/floating-label/page.tsx b/app/docs/components/floating-label/page.tsx → app/docs/forms/floating-label/page.tsx
diff --git a/app/docs/layout.tsx b/app/docs/layout.tsx
@@ -276,7 +276,6 @@ const DocsSidebar: FC<DocsLayoutState> = ({ isCollapsed, setCollapsed }) => {
                       </span>
                     </SidebarLink>
                     <SidebarLink href="/docs/components/dropdown">Dropdown</SidebarLink>
-                    <SidebarLink href="/docs/components/floating-label">Floating Label</SidebarLink>
                     <SidebarLink href="/docs/components/footer">Footer</SidebarLink>
                     <SidebarLink href="/docs/components/forms">Forms</SidebarLink>
                     <SidebarLink href="/docs/components/list-group">List group</SidebarLink>
@@ -296,6 +295,31 @@ const DocsSidebar: FC<DocsLayoutState> = ({ isCollapsed, setCollapsed }) => {
                 </Accordion.Content>
               </Accordion.Panel>
             </Accordion>
+            <Accordion collapseAll={!pathname.includes('/forms/')} flush className="border-none">
+              <Accordion.Panel>
+                <Accordion.Title
+                  theme={{
+                    open: {
+                      on: 'mb-2 text-primary-700 hover:text-primary-700 dark:text-primary-500 dark:hover:text-primary-500',
+                      off: 'mb-1 text-gray-900 dark:text-white hover:text-primary-700 dark:hover:text-primary-500',
+                    },
+                  }}
+                  className={twMerge(
+                    'flex w-full items-center justify-between bg-transparent p-0 text-sm font-semibold uppercase tracking-wide',
+                    pathname.includes('/forms/') &&
+                      'text-primary-700 hover:text-primary-700 dark:text-primary-500 dark:hover:text-primary-500',
+                  )}
+                >
+                  Forms
+                </Accordion.Title>
+                <Accordion.Content className="mb-2 border-none p-0">
+                  <Sidebar.ItemGroup className="border-none">
+                    <SidebarLink href="/docs/forms/floating-label">Floating Label</SidebarLink>
+                  </Sidebar.ItemGroup>
+                </Accordion.Content>
+              </Accordion.Panel>
+            </Accordion>
+
             <span className="h-64">&nbsp;</span>
           </Sidebar.Items>
         </Sidebar>