New code preview widget [MDS-771]

coingaming · Nov 7, 2023 · 712e376 · 712e376
1 parent a25abce
commit 712e376
Show file tree

Hide file tree

Showing 15 changed files with 47 additions and 48 deletions.
diff --git a/docs/app/components/server/accordion/page.tsx b/docs/app/components/server/accordion/page.tsx
@@ -11,7 +11,7 @@ export default async function Accordion() {
   const { server } = await getExamples();
   const examplesList = Object.keys(server.accordion.examples);
   return (
-    <div className="w-full max-w-7xl flex flex-col gap-8 text-moon-14">
+    <div className="w-full max-w-3xl flex flex-col gap-12 text-moon-14">
       <h1 className="font-medium text-moon-32">Accordion</h1>
       <MDX markdown={server.accordion.description} />
       <QuickNav items={examplesList} />

diff --git a/docs/app/components/server/button/page.tsx b/docs/app/components/server/button/page.tsx
@@ -15,7 +15,7 @@ export default async function Button() {
   const { server } = await getExamples();
   const examplesList = Object.keys(server.button.examples);
   return (
-    <div className="w-full max-w-7xl flex flex-col gap-8 text-moon-14">
+    <div className="w-full max-w-3xl flex flex-col gap-12 text-moon-14">
       <h1 className="font-medium text-moon-32">Button</h1>
       <MDX markdown={server.button.description} />
       <QuickNav items={examplesList} />

diff --git a/docs/app/components/server/checkbox/page.tsx b/docs/app/components/server/checkbox/page.tsx
@@ -8,7 +8,7 @@ export default async function Checkbox() {
   const { server } = await getExamples();
   const examplesList = Object.keys(server.checkbox.examples);
   return (
-    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
+    <div className="w-full max-w-3xl flex flex-col gap-12 text-moon-14">
       <h1 className="font-medium text-moon-32">Checkbox</h1>
       <MDX markdown={server.checkbox.description} />
       <QuickNav items={examplesList} />

diff --git a/docs/app/components/server/chip/page.tsx b/docs/app/components/server/chip/page.tsx
@@ -8,7 +8,7 @@ export default async function Chip() {
   const { server } = await getExamples();
   const examplesList = Object.keys(server.chip.examples);
   return (
-    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
+    <div className="w-full max-w-3xl flex flex-col gap-12 text-moon-14">
       <h1 className="font-medium text-moon-32">Chip</h1>
       <MDX markdown={server.chip.description} />
       <QuickNav items={examplesList} />

diff --git a/docs/app/components/server/input/page.tsx b/docs/app/components/server/input/page.tsx
@@ -8,7 +8,7 @@ export default async function Input() {
   const { server } = await getExamples();
   const examplesList = Object.keys(server.input.examples);
   return (
-    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
+    <div className="w-full max-w-3xl flex flex-col gap-12 text-moon-14">
       <h1 className="font-medium text-moon-32">Input</h1>
       <MDX markdown={server.input.description} />
       <QuickNav items={examplesList} />

diff --git a/docs/app/components/server/loader/page.tsx b/docs/app/components/server/loader/page.tsx
@@ -8,7 +8,7 @@ export default async function Loader() {
   const { server } = await getExamples();
   const examplesList = Object.keys(server.loader.examples);
   return (
-    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
+    <div className="w-full max-w-3xl flex flex-col gap-12 text-moon-14">
       <h1 className="font-medium text-moon-32">Loader</h1>
       <MDX markdown={server.loader.description} />
       <QuickNav items={examplesList} />

diff --git a/docs/app/components/server/nativeSelect/page.tsx b/docs/app/components/server/nativeSelect/page.tsx
@@ -8,7 +8,7 @@ export default async function NativeSelect() {
   const { server } = await getExamples();
   const examplesList = Object.keys(server.nativeSelect.examples);
   return (
-    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
+    <div className="w-full max-w-3xl flex flex-col gap-12 text-moon-14">
       <h1 className="font-medium text-moon-32">NativeSelect</h1>
       <MDX markdown={server.nativeSelect.description} />
       <QuickNav items={examplesList} />

diff --git a/docs/app/components/server/pagination/page.tsx b/docs/app/components/server/pagination/page.tsx
@@ -8,7 +8,7 @@ export default async function Pagination() {
   const { server } = await getExamples();
   const examplesList = Object.keys(server.pagination.examples);
   return (
-    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
+    <div className="w-full max-w-3xl flex flex-col gap-12 text-moon-14">
       <h1 className="font-medium text-moon-32">Pagination</h1>
       <MDX markdown={server.pagination.description} />
       <QuickNav items={examplesList} />

diff --git a/docs/app/components/server/table/page.tsx b/docs/app/components/server/table/page.tsx
@@ -8,7 +8,7 @@ export default async function Table() {
   const { server } = await getExamples();
   const examplesList = Object.keys(server.table.examples);
   return (
-    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
+    <div className="w-full max-w-3xl flex flex-col gap-12 text-moon-14">
       <h1 className="font-medium text-moon-32">Table</h1>
       <MDX markdown={server.table.description} />
       <QuickNav items={examplesList} />

diff --git a/docs/app/components/server/tabs/page.tsx b/docs/app/components/server/tabs/page.tsx
@@ -8,7 +8,7 @@ export default async function Tabs() {
   const { server } = await getExamples();
   const examplesList = Object.keys(server.tabs.examples);
   return (
-    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
+    <div className="w-full max-w-3xl flex flex-col gap-12 text-moon-14">
       <h1 className="font-medium text-moon-32">Tabs</h1>
       <MDX markdown={server.tabs.description} />
       <QuickNav items={examplesList} />

diff --git a/docs/app/components/server/tag/page.tsx b/docs/app/components/server/tag/page.tsx
@@ -8,7 +8,7 @@ export default async function Tag() {
   const { server } = await getExamples();
   const examplesList = Object.keys(server.tag.examples);
   return (
-    <div className="w-full max-w-7xl flex flex-col gap-4 text-moon-14">
+    <div className="w-full max-w-3xl flex flex-col gap-12 text-moon-14">
       <h1 className="font-medium text-moon-32">Tag</h1>
       <MDX markdown={server.tag.description} />
       <QuickNav items={examplesList} />

diff --git a/docs/app/components/shared/CodeCopy.tsx b/docs/app/components/shared/CodeCopy.tsx
@@ -1,6 +1,6 @@
 import { useState, useCallback } from 'react';
 import { IconButton, Snackbar } from '@heathmont/moon-core-tw';
-import { FilesCopy } from '@heathmont/moon-icons-tw';
+import { FilesCopy, GenericCheckAlternative } from '@heathmont/moon-icons-tw';
 
 const CodeCopy = ({ code }: { code: string }) => {
   const [snackbar, setSnackbar] = useState('');
@@ -23,7 +23,7 @@ const CodeCopy = ({ code }: { code: string }) => {
     console.log('copyCode', code);
     if (navigator?.clipboard) {
       navigator.clipboard.writeText(code ? code : '');
-      openSnackbarHandler('bottom-center');
+      openSnackbarHandler('top-right');
     }
   };
   return (
@@ -36,11 +36,14 @@ const CodeCopy = ({ code }: { code: string }) => {
         />
       </span>
       <Snackbar
-        isOpen={snackbar === 'bottom-center'}
+        isOpen={snackbar === 'top-right'}
         onOpenChange={setSnackbar}
-        position="bottom-center"
+        position="top-right"
       >
-        <Snackbar.Message>Copy code</Snackbar.Message>
+        <Snackbar.Message className="flex gap-2">
+          <GenericCheckAlternative className="text-moon-24 text-roshi stroke-2" />
+          Copy code
+        </Snackbar.Message>
       </Snackbar>
     </>
   );

diff --git a/docs/app/components/shared/CodePreviewWrapper.tsx b/docs/app/components/shared/CodePreviewWrapper.tsx
@@ -2,7 +2,7 @@
 
 import { useState, useEffect, useRef } from 'react';
 import { mergeClassnames } from '@heathmont/moon-base-tw';
-import { ControlsChevronDown } from '@heathmont/moon-icons-tw';
+import { ControlsChevronDownSmall } from '@heathmont/moon-icons-tw';
 import CodeCopy from './CodeCopy';
 
 const CodePreviewWrapper = ({
@@ -27,12 +27,12 @@ const CodePreviewWrapper = ({
     <div
       ref={wrapperRef}
       className={mergeClassnames(
-        'relative text-bulma p-4 pb-10 overflow-hidden '
+        'relative text-bulma p-4 pb-0 md:pr-12 overflow-hidden border border-t-0 border-beerus rounded-b-moon-s-sm'
       )}
     >
       <div
         className={mergeClassnames(
-          'max-h-32 transition-[max-height] duration-150 ease-in-out overflow-x-scroll',
+          'max-h-32 transition-[max-height] duration-150 ease-in-out overflow-hidden overflow-x-scroll pb-10 pt-10 md:pt-0',
           expand && 'max-h-96 overflow-scroll'
         )}
       >
@@ -42,28 +42,27 @@ const CodePreviewWrapper = ({
       {height > 72 && (
         <div
           className={mergeClassnames(
-            'absolute bottom-0 inset-x-0 h-32 flex items-end z-0',
-            !expand &&
-              'bg-[linear-gradient(180deg,_rgba(245,_245,_245,_0.00)_0%,_#F5F5F5_100%)]'
+            'absolute bottom-0 inset-x-0 h-32 flex items-end z-0 bg-[linear-gradient(180deg,_rgba(249,_250,_251,_0.00)_0%,_#F9FAFB_100%)]',
+            expand && 'h-10'
           )}
         >
           <button
             onClick={clickHandler}
             className={mergeClassnames(
-              'px-4 h-10 py-2 gap-2 text-moon-14 rounded-b-moon-i-sm relative z-0 flex justify-center items-center font-medium',
-              'no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 hover:bg-heles text-trunks bg-transparent hover:text-bulma w-full'
+              'px-4 h-10 py-2 gap-2 text-moon-14 rounded-b-moon-s-sm relative z-0 flex justify-center items-center font-medium',
+              'no-underline overflow-hidden whitespace-nowrap select-none transition duration-200 hover:bg-heles text-bulma hover:text-bulma w-full',
+              expand ? 'bg-transperent' : 'bg-[rgba(249,_250,_251,_0.6)]'
             )}
           >
-            {expand ? (
-              <span className="flex items-center justify-center gap-2">
-                Collapsed code{' '}
-                <ControlsChevronDown className="text-moon-24 rotate-180" />
-              </span>
-            ) : (
-              <span className="flex items-center justify-center gap-2">
-                Expand code <ControlsChevronDown className="text-moon-24" />
-              </span>
-            )}
+            <span className="flex items-center justify-center gap-2">
+              {expand ? 'Collapsed code' : 'Expand code '}
+              <ControlsChevronDownSmall
+                className={mergeClassnames(
+                  'text-moon-24',
+                  expand && 'rotate-180'
+                )}
+              />
+            </span>
           </button>
         </div>
       )}

diff --git a/docs/app/components/shared/ComponentPreview.tsx b/docs/app/components/shared/ComponentPreview.tsx
@@ -1,7 +1,7 @@
 const ComponentPreview = ({ component }: { component: JSX.Element }) => (
   <div
     className={
-      'flex flex-wrap items-center justify-around p-8 gap-2 w-full rounded-moon-s-sm border border-beerus bg-goku'
+      'flex flex-wrap items-center justify-around p-8 gap-2 w-full rounded-t-moon-s-sm border border-beerus bg-goku'
     }
   >
     {component}

diff --git a/docs/app/components/shared/ExampleSection.tsx b/docs/app/components/shared/ExampleSection.tsx
@@ -16,23 +16,20 @@ const ExampleSection: SC<Props> = async ({
   component,
   code,
 }) => (
-  <div
-    className={mergeClassnames(
-      'flex flex-col gap-4 pt-8 relative',
-      "before:content-[''] before:w-full before:h-px before:bg-beerus before:absolute before:top-0 before:inset-x-0"
-    )}
-  >
-    <h2
-      id={title}
-      className=" text-moon-20 font-medium flex items-center gap-3 [&:hover_svg]:opacity-100 cursor-pointer"
-    >
-      {title}
-      <GenericLink className="text-piccolo text-moon-16 opacity-0 transition-opacity stroke-1" />
+  <div className={mergeClassnames('flex flex-col gap-4 relative')}>
+    <h2 id={title} className="text-moon-20 font-medium ">
+      <a
+        href={`#${title}`}
+        className="flex items-center gap-3 [&:hover_svg]:opacity-100 cursor-pointer"
+      >
+        {title}
+        <GenericLink className="text-piccolo text-moon-16 opacity-0 transition-opacity" />
+      </a>
     </h2>
     {description && (
       <div className="text-moon-16 text-bulma">{description}</div>
     )}
-    <div className="bg-beerus rounded-moon-i-sm overflow-hidden mt-2">
+    <div className="bg-gohan rounded-moon-i-sm overflow-hidden mt-2">
       <ComponentPreview component={component} />
       <CodePreview code={code} />
     </div>