@chassis-ui/docs 0.7.0 → 0.8.0

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>

package/src/components/shortcodes/Icon.astro

@@ -36,24 +36,22 @@ const {
 } = Astro.props
 ---
 
-{
-  font ? (
-    <span
-      class:list={['icon', `cx-${name}`, className]}
-      aria-hidden={title ? undefined : 'true'}
-      aria-label={title}
-      {...rest}
-    />
-  ) : (
-    <svg
-      class:list={['icon', className]}
-      width={size}
-      height={size}
-      aria-hidden={title ? undefined : 'true'}
-      {...rest}
-    >
-      {title && <title>{title}</title>}
-      <use href={`${sprite}#${name}`} />
-    </svg>
-  )
-}
+{font ? (
+  <span
+    class:list={['icon', `cx-${name}`, className]}
+    aria-hidden={title ? undefined : 'true'}
+    aria-label={title}
+    {...rest}
+  />
+) : (
+  <svg
+    class:list={['icon', className]}
+    width={size}
+    height={size}
+    aria-hidden={title ? undefined : 'true'}
+    {...rest}
+  >
+    {title && <title>{title}</title>}
+    <use href={`${sprite}#${name}`} />
+  </svg>
+)}

package/src/components/shortcodes/InFigma.astro

@@ -19,6 +19,6 @@ const tooltipText =
   `This variant${plural ? 's' : ''} exist${plural ? '' : 's'} in the Figma component library with bound design tokens.`
 ---
 
-<span class="badge lg primary smooth mb-md rounded-md" data-cx-toggle="tooltip" title={tooltipText}
-  >In Figma</span
->
+<span class="badge lg primary smooth mb-md rounded-md" data-cx-toggle="tooltip" title={tooltipText}>
+  In Figma
+</span>

package/src/components/shortcodes/Placeholder.astro

@@ -10,19 +10,17 @@ const {
 } = getPlaceholder(Astro.props)
 ---
 
-{
-  type === 'img' ? (
-    // eslint-disable-next-line astro/jsx-a11y/alt-text
-    <img {...props} />
-  ) : (
-    <svg {...props}>
-      {showTitle && <title>{title}</title>}
-      <rect width="100%" height="100%" fill={background} />
-      {showText && (
-        <text x="50%" y="50%" fill={color} dy=".3em">
-          {text}
-        </text>
-      )}
-    </svg>
-  )
-}
+{type === 'img' ? (
+  // eslint-disable-next-line astro/jsx-a11y/alt-text
+  <img {...props} />
+) : (
+  <svg {...props}>
+    {showTitle && <title>{title}</title>}
+    <rect width="100%" height="100%" fill={background} />
+    {showText && (
+      <text x="50%" y="50%" fill={color} dy=".3em">
+        {text}
+      </text>
+    )}
+  </svg>
+)}

package/src/components/shortcodes/ResizableExample.astro

@@ -119,9 +119,7 @@ const simplifiedMarkup = sourceMarkup
       <Fragment set:html={previewMarkup} />
     </div>
   </div>
-  {
-    showMarkup && (
-      <Code code={simplifiedMarkup} lang="html" nestedInExample={true} lineNumbers={lineNumbers} />
-    )
-  }
+  {showMarkup && (
+    <Code code={simplifiedMarkup} lang="html" nestedInExample={true} lineNumbers={lineNumbers} />
+  )}
 </div>

package/src/layouts/BaseLayout.astro

@@ -81,15 +81,13 @@ const mainProps = { id: 'content', ...overrides?.main }
   <body {...bodyProps}>
     <Header layout={layout} title={title} />
 
-    {
-      Astro.slots.has('main') ? (
-        <slot name="main" />
-      ) : (
-        <main {...mainProps}>
-          <slot />
-        </main>
-      )
-    }
+    {Astro.slots.has('main') ? (
+      <slot name="main" />
+    ) : (
+      <main {...mainProps}>
+        <slot />
+      </main>
+    )}
 
     <Footer />
     <Consent />
@@ -98,17 +96,13 @@ const mainProps = { id: 'content', ...overrides?.main }
       <slot name="scripts" slot="scripts" />
     </Scripts>
 
-    {
-      frontmatter?.extraJs &&
-        frontmatter.extraJs.map((js: ExtraJS) => <script is:inline async={js.async} src={js.src} />)
-    }
+    {frontmatter?.extraJs &&
+      frontmatter.extraJs.map((js: ExtraJS) => <script is:inline async={js.async} src={js.src} />)}
 
-    {
-      (layout === 'docs' || layout === 'icons') && (
-        <div class="position-fixed" aria-hidden="true">
-          <input type="text" tabindex="-1" />
-        </div>
-      )
-    }
+    {(layout === 'docs' || layout === 'icons') && (
+      <div class="position-fixed" aria-hidden="true">
+        <input type="text" tabindex="-1" />
+      </div>
+    )}
   </body>
 </html>

package/src/layouts/DocsLayout.astro

@@ -61,13 +61,16 @@ if (frontmatter.toc) {
         aria-labelledby="cxdSidebarOffcanvasLabel"
       >
         <div class="drawer-header">
-          <h2 class="drawer-title" id="cxdSidebarOffcanvasLabel">Browse docs</h2>
+          <h2 class="drawer-title" id="cxdSidebarOffcanvasLabel">
+            Browse docs
+          </h2>
           <button
             type="button"
             class="close-button"
             data-cx-dismiss="drawer"
             aria-label="Close"
-            data-cx-target="#cxdSidebar"></button>
+            data-cx-target="#cxdSidebar"
+          ></button>
         </div>
         <hr class="lg:d-none m-0" />
         <div class="drawer-body lg:p-0">
@@ -104,65 +107,61 @@ if (frontmatter.toc) {
                 View on GitHub
               </a>
             </div>
-            <h1 class="cxd-title mb-sm" id="content">{frontmatter.title}</h1>
+            <h1 class="cxd-title mb-sm" id="content">
+              {frontmatter.title}
+            </h1>
           </div>
           <div class="cxd-subtitle">
-            {
-              frontmatter.description && (
-                <Fragment set:html={processMarkdownToHtml(frontmatter.description)} />
-              )
-            }
+            {frontmatter.description && (
+              <Fragment set:html={processMarkdownToHtml(frontmatter.description)} />
+            )}
           </div>
         </slot>
       </div>
 
-      {
-        frontmatter.toc && headings && (
-          <div class="cxd-toc">
-            <button
-              class="button default mb-lg text-decoration-none cxd-toc-toggle md:d-none"
-              type="button"
-              data-cx-toggle="collapse"
-              data-cx-target="#tocContents"
-              aria-expanded="false"
-              aria-controls="tocContents"
-            >
-              On this page
-              <Icon name="chevron-sort-solid" class="icon-sm" />
-            </button>
-            <strong class="d-none md:d-block h6 my-xs">On this page</strong>
-            <hr class="d-none md:d-block my-xs" />
-            <div class="collapse cxd-toc-collapse" id="tocContents">
-              <nav id="TableOfContents" aria-label="Table of contents">
-                <slot name="toc">
-                  <TableOfContents headings={headings} config={getConfig()} />
-                </slot>
-              </nav>
-            </div>
+      {frontmatter.toc && headings && (
+        <div class="cxd-toc">
+          <button
+            class="button default mb-lg text-decoration-none cxd-toc-toggle md:d-none"
+            type="button"
+            data-cx-toggle="collapse"
+            data-cx-target="#tocContents"
+            aria-expanded="false"
+            aria-controls="tocContents"
+          >
+            On this page
+            <Icon name="chevron-sort-solid" class="icon-sm" />
+          </button>
+          <strong class="d-none md:d-block h6 my-xs">On this page</strong>
+          <hr class="d-none md:d-block my-xs" />
+          <div class="collapse cxd-toc-collapse" id="tocContents">
+            <nav id="TableOfContents" aria-label="Table of contents">
+              <slot name="toc">
+                <TableOfContents headings={headings} config={getConfig()} />
+              </slot>
+            </nav>
           </div>
-        )
-      }
+        </div>
+      )}
 
       <div class="cxd-content">
-        {
-          frontmatter.sections && (
-            <div class="grid grid-cols-1 md:grid-cols-2 gap-xl">
-              {frontmatter.sections.map((section: DocSection) => (
-                <div>
-                  <a
-                    class="d-block text-decoration-none"
-                    href={getDocsPath(
-                      `${parentDirectory ? parentDirectory + '/' : ''}${section.slug ? section.slug : getSlug(section.title)}/`
-                    )}
-                  >
-                    <strong class="d-block h5 mb-2xs">{section.title}</strong>
-                    <span class="fg-subtle">{section.description}</span>
-                  </a>
-                </div>
-              ))}
-            </div>
-          )
-        }
+        {frontmatter.sections && (
+          <div class="grid grid-cols-1 md:grid-cols-2 gap-xl">
+            {frontmatter.sections.map((section: DocSection) => (
+              <div>
+                <a
+                  class="d-block text-decoration-none"
+                  href={getDocsPath(
+                    `${parentDirectory ? parentDirectory + '/' : ''}${section.slug ? section.slug : getSlug(section.title)}/`
+                  )}
+                >
+                  <strong class="d-block h5 mb-2xs">{section.title}</strong>
+                  <span class="fg-subtle">{section.description}</span>
+                </a>
+              </div>
+            ))}
+          </div>
+        )}
 
         <slot />
       </div>