@chassis-ui/docs 0.7.0 → 0.9.0-next.0

package/src/components/DocsSidebar.astro

@@ -16,120 +16,118 @@ const docsPages = await getDocsPages()
 
 <nav class="cxd-links w-100" id="cxd-docs-nav" aria-label="Docs navigation">
   <menu class="p-0 m-0">
-    {
-      sidebar.map((group) => {
-        const groupSlug = getSlug(group.title)
+    {sidebar.map((group) => {
+      const groupSlug = getSlug(group.title)
 
-        if (group.pages) {
-          return (
-            <li
-              class:list={[
-                'cxd-links-group',
-                groupSlug === Astro.params.slug?.split('/')[0] ? 'active' : undefined
-              ]}
-            >
-              <strong class="cxd-links-heading">
-                {group.icon && (
-                  <Icon
-                    name={group.icon}
-                    style={group.iconColor && `color: var(--cx-${group.iconColor});`}
-                  />
-                )}
-                {group.title}
-              </strong>
-              <ul class="nav flex-column cxd-links-nav">
-                {group.pages?.map((item: SidebarItem) => {
-                  // Handle sub-groups
-                  if (item.group && item.pages) {
-                    return (
-                      <>
-                        <li class="cxd-links-subgroup">{item.group}</li>
-                        {item.pages.map((page: SidebarSubItem) => {
-                          const docSlug = getSlug(page.title)
-                          const unversionedPageSlug = `${groupSlug}/${docSlug}`
-
-                          const url = getDocsPath(unversionedPageSlug)
-                          const active = Astro.params.slug === unversionedPageSlug
+      if (group.pages) {
+        return (
+          <li
+            class:list={[
+              'cxd-links-group',
+              groupSlug === Astro.params.slug?.split('/')[0] ? 'active' : undefined
+            ]}
+          >
+            <strong class="cxd-links-heading">
+              {group.icon && (
+                <Icon
+                  name={group.icon}
+                  style={group.iconColor && `color: var(--cx-${group.iconColor});`}
+                />
+              )}
+              {group.title}
+            </strong>
+            <ul class="nav flex-column cxd-links-nav">
+              {group.pages?.map((item: SidebarItem) => {
+                // Handle sub-groups
+                if (item.group && item.pages) {
+                  return (
+                    <>
+                      <li class="cxd-links-subgroup">{item.group}</li>
+                      {item.pages.map((page: SidebarSubItem) => {
+                        const docSlug = getSlug(page.title)
+                        const unversionedPageSlug = `${groupSlug}/${docSlug}`
 
-                          const generatedPage = docsPages.find(
-                            (page) => page.id === unversionedPageSlug
-                          )
+                        const url = getDocsPath(unversionedPageSlug)
+                        const active = Astro.params.slug === unversionedPageSlug
 
-                          // This test should not be necessary, see comments for `getSlug()` in `src/libs/utils.ts`.
-                          if (!generatedPage) {
-                            throw new Error(
-                              `The page '${page.title}' referenced in 'data/sidebar.yml' does not exist at '${url}'.`
-                            )
-                          }
+                        const generatedPage = docsPages.find(
+                          (page) => page.id === unversionedPageSlug
+                        )
 
-                          return (
-                            <li>
-                              <a
-                                href={url}
-                                class:list={['cxd-links-link', { active }]}
-                                aria-current={active ? 'page' : undefined}
-                              >
-                                {page.title}
-                              </a>
-                            </li>
+                        // This test should not be necessary, see comments for `getSlug()` in `src/libs/utils.ts`.
+                        if (!generatedPage) {
+                          throw new Error(
+                            `The page '${page.title}' referenced in 'data/sidebar.yml' does not exist at '${url}'.`
                           )
-                        })}
-                      </>
-                    )
-                  }
+                        }
 
-                  // Handle regular pages
-                  if (!item.title) {
-                    return null
-                  }
+                        return (
+                          <li>
+                            <a
+                              href={url}
+                              class:list={['cxd-links-link', { active }]}
+                              aria-current={active ? 'page' : undefined}
+                            >
+                              {page.title}
+                            </a>
+                          </li>
+                        )
+                      })}
+                    </>
+                  )
+                }
 
-                  const docSlug = getSlug(item.title)
-                  const unversionedPageSlug = `${groupSlug}/${docSlug}`
+                // Handle regular pages
+                if (!item.title) {
+                  return null
+                }
 
-                  const url = getDocsPath(unversionedPageSlug)
-                  const active = Astro.params.slug === unversionedPageSlug
+                const docSlug = getSlug(item.title)
+                const unversionedPageSlug = `${groupSlug}/${docSlug}`
 
-                  const generatedPage = docsPages.find((page) => page.id === unversionedPageSlug)
+                const url = getDocsPath(unversionedPageSlug)
+                const active = Astro.params.slug === unversionedPageSlug
 
-                  // This test should not be necessary, see comments for `getSlug()` in `src/libs/utils.ts`.
-                  if (!generatedPage) {
-                    throw new Error(
-                      `The page '${item.title}' referenced in 'data/sidebar.yml' does not exist at '${url}'.`
-                    )
-                  }
+                const generatedPage = docsPages.find((page) => page.id === unversionedPageSlug)
 
-                  return (
-                    <li>
-                      <a
-                        href={url}
-                        class:list={['cxd-links-link', { active }]}
-                        aria-current={active ? 'page' : undefined}
-                      >
-                        {item.title}
-                      </a>
-                    </li>
+                // This test should not be necessary, see comments for `getSlug()` in `src/libs/utils.ts`.
+                if (!generatedPage) {
+                  throw new Error(
+                    `The page '${item.title}' referenced in 'data/sidebar.yml' does not exist at '${url}'.`
                   )
-                })}
-              </ul>
-            </li>
-          )
-        } else {
-          const active = Astro.params.slug === groupSlug
+                }
 
-          return (
-            <>
-              <li class="cxd-links-span-all mt-2xs mb-md mx-lg border-top" />
-              <a
-                href={getDocsPath(`${groupSlug}/`)}
-                class:list={['cxd-links-link cxd-links-span-all', { active }]}
-                aria-current={active ? 'page' : undefined}
-              >
-                {group.title}
-              </a>
-            </>
-          )
-        }
-      })
-    }
+                return (
+                  <li>
+                    <a
+                      href={url}
+                      class:list={['cxd-links-link', { active }]}
+                      aria-current={active ? 'page' : undefined}
+                    >
+                      {item.title}
+                    </a>
+                  </li>
+                )
+              })}
+            </ul>
+          </li>
+        )
+      } else {
+        const active = Astro.params.slug === groupSlug
+
+        return (
+          <>
+            <li class="cxd-links-span-all mt-2xs mb-md mx-lg border-top" />
+            <a
+              href={getDocsPath(`${groupSlug}/`)}
+              class:list={['cxd-links-link cxd-links-span-all', { active }]}
+              aria-current={active ? 'page' : undefined}
+            >
+              {group.title}
+            </a>
+          </>
+        )
+      }
+    })}
   </menu>
 </nav>

package/src/components/FeatureCard.astro

@@ -44,13 +44,11 @@ const headerClasses = [
 
 <div class={cardClasses}>
   <div class={headerClasses}>
-    {
-      icon && (
-        <div class="feature-thumb">
-          <Icon name={icon} class="feature-icon icon-3xl md:icon-4xl" sprite="" />
-        </div>
-      )
-    }
+    {icon && (
+      <div class="feature-thumb">
+        <Icon name={icon} class="feature-icon icon-3xl md:icon-4xl" sprite="" />
+      </div>
+    )}
     <div>
       <h3 class="feature-title font-lg md:font-xl mb-3xs md:mb-2xs">
         <slot name="title" />

package/src/components/TableOfContents.astro

@@ -27,16 +27,14 @@ let entryLevel = level ? level + 1 : 1
 ---
 
 <ul>
-  {
-    toc.map(({ children, slug, text }) => {
-      return (
-        <li>
-          <a href={`#${slug}`} class={`level-${entryLevel}`}>
-            {text}
-          </a>
-          {children.length > 0 && <Astro.self entries={children} level={entryLevel} />}
-        </li>
-      )
-    })
-  }
+  {toc.map(({ children, slug, text }) => {
+    return (
+      <li>
+        <a href={`#${slug}`} class={`level-${entryLevel}`}>
+          {text}
+        </a>
+        {children.length > 0 && <Astro.self entries={children} level={entryLevel} />}
+      </li>
+    )
+  })}
 </ul>

package/src/components/ThemeToggler.astro

@@ -26,9 +26,12 @@ const { layout } = Astro.props
   data-cx-placement="bottom-end"
 >
   <Icon name="circle-half-solid" class="theme-icon-active" />
-  <span class=`${layout === 'examples' ? 'visually-hidden' : 'lg:d-none ms-xs'}` id="cxd-theme-text"
-    >Toggle theme</span
+  <span
+    class=`${layout === 'examples' ? 'visually-hidden' : 'lg:d-none ms-xs'}`
+    id="cxd-theme-text"
   >
+    Toggle theme
+  </span>
 </button>
 <ul class="menu" role="menu" aria-label="Theme options">
   <li>

package/src/components/shortcodes/Blockquote.astro

@@ -13,19 +13,17 @@ interface Props {
 const { attr } = Astro.props
 ---
 
-{
-  attr ? (
-    <figure>
-      <blockquote class="blockquote">
-        <slot />
-      </blockquote>
-      <figcaption class="attribution">
-        <Fragment set:html={attr} />
-      </figcaption>
-    </figure>
-  ) : (
+{attr ? (
+  <figure>
     <blockquote class="blockquote">
       <slot />
     </blockquote>
-  )
-}
+    <figcaption class="attribution">
+      <Fragment set:html={attr} />
+    </figcaption>
+  </figure>
+) : (
+  <blockquote class="blockquote">
+    <slot />
+  </blockquote>
+)}

package/src/components/shortcodes/CSSOnly.astro

@@ -15,6 +15,6 @@ const { tooltip = 'This feature is only available in CSS and not in Figma compon
   Astro.props
 ---
 
-<span class="badge lg info smooth mb-md rounded-md" data-cx-toggle="tooltip" title={tooltip}
-  >CSS Only</span
->
+<span class="badge lg info smooth mb-md rounded-md" data-cx-toggle="tooltip" title={tooltip}>
+  CSS Only
+</span>

package/src/components/shortcodes/Code.astro

@@ -164,103 +164,86 @@ if (codeToDisplay && detectedLang) {
   })
 </script>
 
-{
-  nestedInExample && !noToolbar && (
-    <div class="cxd-snippet-toolbar">
-      {file ? (
-        <a
-          class="text-decoration-none font-code fg-subtle text-uppercase"
-          href={fileUrl}
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          {file}
-        </a>
-      ) : (
-        <small class="font-code fg-subtle text-uppercase">{displayLang}</small>
+{nestedInExample && !noToolbar && (
+  <div class="cxd-snippet-toolbar">
+    {file ? (
+      <a
+        class="text-decoration-none font-code fg-subtle text-uppercase"
+        href={fileUrl}
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        {file}
+      </a>
+    ) : (
+      <small class="font-code fg-subtle text-uppercase">{displayLang}</small>
+    )}
+    <div class="d-flex ms-auto gap-2xs">
+      {hasPreview && (
+        <>
+          <button
+            type="button"
+            class="button-mode"
+            title="Toggle color mode"
+            aria-label="Toggle color mode"
+            onclick="toggleTheme(this)"
+          >
+            <Icon name="swatchbook-solid" />
+          </button>
+          <span class="vr mx-2xs" />
+          <button
+            type="button"
+            class="button-edit"
+            title="Try it on StackBlitz"
+            aria-label="Try it on StackBlitz"
+            data-sb-js-snippet={addStackblitzJs ? true : undefined}
+          >
+            <Icon name="lightning-solid" />
+          </button>
+        </>
       )}
-      <div class="d-flex ms-auto gap-2xs">
-        {hasPreview && (
-          <>
-            <button
-              type="button"
-              class="button-mode"
-              title="Toggle color mode"
-              aria-label="Toggle color mode"
-              onclick="toggleTheme(this)"
-            >
-              <Icon name="swatchbook-solid" />
-            </button>
-            <span class="vr mx-2xs" />
-            <button
-              type="button"
-              class="button-edit"
-              title="Try it on StackBlitz"
-              aria-label="Try it on StackBlitz"
-              data-sb-js-snippet={addStackblitzJs ? true : undefined}
-            >
-              <Icon name="lightning-solid" />
-            </button>
-          </>
-        )}
-        <button
-          type="button"
-          class="button-clipboard"
-          title="Copy to clipboard"
-          aria-label="Copy to clipboard"
-        >
-          <Icon name="clipboard-outline" />
-        </button>
-      </div>
+      <button
+        type="button"
+        class="button-clipboard"
+        title="Copy to clipboard"
+        aria-label="Copy to clipboard"
+      >
+        <Icon name="clipboard-outline" />
+      </button>
     </div>
-  )
-}
+  </div>
+)}
 
-{
-  nestedInExample ? (
-    <>
-      {highlightedCode ? (
-        <div class:list={['cxd-code', { 'line-numbers': lineNumbers }]}>
-          <Fragment set:html={highlightedCode} />
-        </div>
-      ) : (
-        <div class:list={['cxd-code', { 'line-numbers': lineNumbers }]}>
-          {/* prettier-ignore */}
-          <pre class={className} tabindex="0"><slot /></pre>
-        </div>
-      )}
-    </>
-  ) : (
-    <div class:list={['cxd-code-snippet', containerClass]} data-pagefind-ignore>
-      {!noToolbar && (
-        <div class="cxd-snippet-toolbar">
-          {file ? (
-            <a
-              class="text-decoration-none font-code fg-subtle"
-              href={fileUrl}
-              target="_blank"
-              rel="noopener noreferrer"
-            >
-              {file}
-            </a>
-          ) : (
-            <small class="font-code fg-subtle text-uppercase">{displayLang}</small>
-          )}
-          <div class="d-flex ms-auto gap-2xs">
-            <button
-              type="button"
-              class="button-clipboard"
-              title="Copy to clipboard"
-              aria-label="Copy to clipboard"
-            >
-              <Icon name="clipboard-outline" />
-            </button>
-          </div>
-        </div>
-      )}
-      <slot name="pre" />
-      {!Astro.slots.has('pre') && noToolbar ? (
-        <div class="cxd-clipboard">
+{nestedInExample ? (
+  <>
+    {highlightedCode ? (
+      <div class:list={['cxd-code', { 'line-numbers': lineNumbers }]}>
+        <Fragment set:html={highlightedCode} />
+      </div>
+    ) : (
+      <div class:list={['cxd-code', { 'line-numbers': lineNumbers }]}>
+        {/* prettier-ignore */}
+        <pre class={className} tabindex="0"><slot /></pre>
+      </div>
+    )}
+  </>
+) : (
+  <div class:list={['cxd-code-snippet', containerClass]} data-pagefind-ignore>
+    {!noToolbar && (
+      <div class="cxd-snippet-toolbar">
+        {file ? (
+          <a
+            class="text-decoration-none font-code fg-subtle"
+            href={fileUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+          >
+            {file}
+          </a>
+        ) : (
+          <small class="font-code fg-subtle text-uppercase">{displayLang}</small>
+        )}
+        <div class="d-flex ms-auto gap-2xs">
           <button
             type="button"
             class="button-clipboard"
@@ -270,18 +253,31 @@ if (codeToDisplay && detectedLang) {
             <Icon name="clipboard-outline" />
           </button>
         </div>
-      ) : null}
+      </div>
+    )}
+    <slot name="pre" />
+    {!Astro.slots.has('pre') && noToolbar ? (
+      <div class="cxd-clipboard">
+        <button
+          type="button"
+          class="button-clipboard"
+          title="Copy to clipboard"
+          aria-label="Copy to clipboard"
+        >
+          <Icon name="clipboard-outline" />
+        </button>
+      </div>
+    ) : null}
 
-      {highlightedCode ? (
-        <div class:list={['cxd-code', { 'line-numbers': lineNumbers }]}>
-          <Fragment set:html={highlightedCode} />
-        </div>
-      ) : (
-        <div class:list={['cxd-code', { 'line-numbers': lineNumbers }]}>
-          {/* prettier-ignore */}
-          <pre class={className} tabindex="0"><slot /></pre>
-        </div>
-      )}
-    </div>
-  )
-}
+    {highlightedCode ? (
+      <div class:list={['cxd-code', { 'line-numbers': lineNumbers }]}>
+        <Fragment set:html={highlightedCode} />
+      </div>
+    ) : (
+      <div class:list={['cxd-code', { 'line-numbers': lineNumbers }]}>
+        {/* prettier-ignore */}
+        <pre class={className} tabindex="0"><slot /></pre>
+      </div>
+    )}
+  </div>
+)}

package/src/components/shortcodes/DeprecatedIn.astro

@@ -13,6 +13,4 @@ interface Props {
 const { version } = Astro.props
 ---
 
-<span class="badge lg warning smooth mb-md rounded-md">
-  Deprecated in v{version}
-</span>
+<span class="badge lg warning smooth mb-md rounded-md">Deprecated in v{version}</span>

package/src/components/shortcodes/Example.astro

@@ -97,37 +97,33 @@ const simplifiedMarkup = sourceMarkup
 ---
 
 <div class="cxd-example-snippet cxd-code-snippet not-prose" data-pagefind-ignore>
-  {
-    showPreview && (
-      <div id={id} class:list={['cxd-example m-0 border-0 context', className]}>
-        {!showMarkup && (
-          <div class="cxd-mode">
-            <button
-              type="button"
-              class="button-mode"
-              title="Toggle color mode"
-              aria-label="Toggle color mode"
-              onclick="toggleTheme(this)"
-            >
-              <Icon name="swatchbook-solid" />
-            </button>
-          </div>
-        )}
-        <Fragment set:html={markup} />
-      </div>
-    )
-  }
-  {
-    showMarkup && (
-      <Code
-        code={simplifiedMarkup}
-        lang={lang}
-        file={file}
-        lineNumbers={lineNumbers}
-        nestedInExample={true}
-        addStackblitzJs={addStackblitzJs}
-        hasPreview={showPreview}
-      />
-    )
-  }
+  {showPreview && (
+    <div id={id} class:list={['cxd-example m-0 border-0 context', className]}>
+      {!showMarkup && (
+        <div class="cxd-mode">
+          <button
+            type="button"
+            class="button-mode"
+            title="Toggle color mode"
+            aria-label="Toggle color mode"
+            onclick="toggleTheme(this)"
+          >
+            <Icon name="swatchbook-solid" />
+          </button>
+        </div>
+      )}
+      <Fragment set:html={markup} />
+    </div>
+  )}
+  {showMarkup && (
+    <Code
+      code={simplifiedMarkup}
+      lang={lang}
+      file={file}
+      lineNumbers={lineNumbers}
+      nestedInExample={true}
+      addStackblitzJs={addStackblitzJs}
+      hasPreview={showPreview}
+    />
+  )}
 </div>