terra_ui_components 0.0.129__tar.gz → 0.0.136__tar.gz

{terra_ui_components-0.0.129 → terra_ui_components-0.0.136}/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.4
 Name: terra_ui_components
-Version: 0.0.129
+Version: 0.0.136
 Summary: NASA Terra UI Components Library
 License-File: LICENSE.md
 Requires-Python: >=3.8
@@ -61,6 +61,7 @@ Then run the following:
 -   `uv venv` - create a virtual environment (only have to do this the first time)
 -   `source .venv/bin/activate` - activate it
 -   `uv pip install -e ".[dev]"` - install dependencies (see pyproject.toml)
+-   open base.py and point dependencies to localhost (do not commit these changes) TODO: fix this so we auto-detect local development
 -   `npm run start:python` - spins up Jupyter lab and should open the browser for you
 
 For an example of how to use the components in a Jupyter Notebook, open the `/notebooks/playground.ipynb` notebook in Jupyter Lab.

{terra_ui_components-0.0.129 → terra_ui_components-0.0.136}/README.md

@@ -49,6 +49,7 @@ Then run the following:
 -   `uv venv` - create a virtual environment (only have to do this the first time)
 -   `source .venv/bin/activate` - activate it
 -   `uv pip install -e ".[dev]"` - install dependencies (see pyproject.toml)
+-   open base.py and point dependencies to localhost (do not commit these changes) TODO: fix this so we auto-detect local development
 -   `npm run start:python` - spins up Jupyter lab and should open the browser for you
 
 For an example of how to use the components in a Jupyter Notebook, open the `/notebooks/playground.ipynb` notebook in Jupyter Lab.

terra_ui_components-0.0.136/docs/_includes/sidebar.njk

@@ -0,0 +1,87 @@
+<ul>
+    <li>
+        <h2>Design System</h2>
+        <ul>
+            <li>
+                <a href="{{ '/horizon-design-system' | url }}">Overview</a>
+            </li>
+            <li>
+                <a href="{{ '/tokens/typography' | url }}">Typography</a>
+            </li>
+            <li>
+                <a href="{{ '/tokens/color' | url }}">Color</a>
+            </li>
+            <li>
+                <a href="{{ '/tokens/spacing' | url }}">Spacing</a>
+            </li>
+            <li>
+                <a href="{{ '/tokens/elevation' | url }}">Elevation</a>
+            </li>
+            <li>
+                <a href="{{ '/tokens/border-radius' | url }}">Border Radius</a>
+            </li>
+            <li>
+                <a href="{{ '/tokens/transition' | url }}">Transition</a>
+            </li>
+            <li>
+                <a href="{{ '/tokens/z-index' | url }}">Z-index</a>
+            </li>
+            <li>
+                <a href="{{ '/tokens/more' | url }}">More Tokens</a>
+            </li>
+            <li>
+                <a href="{{ '/horizon-design-system/#adoption-status' | url }}">HDS Adoption Status</a>
+            </li>
+        </ul>
+    </li>
+    
+    <li>
+        <h2>Forms</h2>
+        <ul>
+            <li>
+                <a href="{{ '/forms' | url }}">Overview</a>
+            </li>
+        </ul>
+    </li>
+
+    
+    {% for sectionName in meta.sidebarSectionOrder %}
+        {% if meta.componentsBySection[sectionName] %}
+            <li>
+                <h2>{{ sectionName }}</h2>
+                <ul>
+                    {% for component in meta.componentsBySection[sectionName] %}
+                        <li>
+                            <a href="{{ '/components/' + (component.tagName | removeTerraPrefix) | url }}">
+                                {{ component.name | classNameToComponentName }}
+                            </a>
+                        </li>
+                    {% endfor %}
+                </ul>
+            </li>
+        {% endif %}
+    {% endfor %}
+    {# Include any sections not in the defined order (fallback) #}
+    {% for sectionName, components in meta.componentsBySection %}
+        {% set isInOrder = false %}
+        {% for orderedSection in meta.sidebarSectionOrder %}
+            {% if orderedSection == sectionName %}
+                {% set isInOrder = true %}
+            {% endif %}
+        {% endfor %}
+        {% if not isInOrder %}
+            <li>
+                <h2>{{ sectionName }}</h2>
+                <ul>
+                    {% for component in components %}
+                        <li>
+                            <a href="{{ '/components/' + (component.tagName | removeTerraPrefix) | url }}">
+                                {{ component.name | classNameToComponentName }}
+                            </a>
+                        </li>
+                    {% endfor %}
+                </ul>
+            </li>
+        {% endif %}
+    {% endfor %}
+</ul>

terra_ui_components-0.0.136/docs/_utilities/code-previews.cjs

@@ -0,0 +1,297 @@
+let count = 1
+
+function escapeHtml(str) {
+    return String(str)
+        .replace(/&/g, '&')
+        .replace(/</g, '&lt;')
+        .replace(/>/g, '&gt;')
+        .replace(/"/g, '&quot;')
+}
+
+/**
+ * Converts Jupyter code block content to a JupyterLite URL.
+ * If the content is already a URL (starts with http:// or https://), returns it as-is.
+ * Otherwise, treats it as code and converts it to a JupyterLite URL with code parameters.
+ */
+function buildJupyterUrl(codeContent) {
+    const trimmed = codeContent.trim()
+
+    // If it's already a URL, use it as-is
+    if (trimmed.startsWith('http://') || trimmed.startsWith('https://')) {
+        return trimmed
+    }
+
+    // Otherwise, treat it as code and build a JupyterLite URL
+    const baseUrl = 'https://gesdisc.github.io/jupyterlite/repl/index.html'
+    const lines = trimmed.split('\n').filter(line => line.trim().length > 0)
+
+    // Build URL parameters
+    const params = new URLSearchParams()
+    params.set('kernel', 'python')
+    params.set('toolbar', '1')
+    params.set('hideCodeInput', '1')
+
+    // Add each line as a separate code parameter
+    lines.forEach(line => {
+        params.append('code', line.trim())
+    })
+
+    return `${baseUrl}?${params.toString()}`
+}
+
+/**
+ * Turns code fields with the :preview suffix into interactive code previews.
+ */
+module.exports = function (doc, options) {
+    options = {
+        within: 'body', // the element containing the code fields to convert
+        ...options,
+    }
+
+    const within = doc.querySelector(options.within)
+    if (!within) {
+        return doc
+    }
+
+    within.querySelectorAll('[class*=":preview"]').forEach(code => {
+        const pre = code.closest('pre')
+        if (!pre) {
+            return
+        }
+        const adjacentPre =
+            pre.nextElementSibling?.tagName.toLowerCase() === 'pre'
+                ? pre.nextElementSibling
+                : null
+        const reactCode = adjacentPre?.querySelector('code[class$="react"]')
+
+        // Check for Jupyter preview
+        // Option 1: Separate code block with "jupyter" class containing the URL
+        // Check in adjacent pre block first, then check further adjacent blocks
+        let jupyterCode = adjacentPre?.querySelector('code[class*="jupyter"]')
+        let jupyterPre = null
+        if (!jupyterCode && adjacentPre) {
+            // Check next adjacent pre block if first one didn't have Jupyter
+            let nextPre = adjacentPre.nextElementSibling
+            while (nextPre && nextPre.tagName.toLowerCase() === 'pre') {
+                jupyterCode = nextPre.querySelector('code[class*="jupyter"]')
+                if (jupyterCode) {
+                    jupyterPre = nextPre
+                    break
+                }
+                nextPre = nextPre.nextElementSibling
+            }
+        } else if (jupyterCode) {
+            jupyterPre = adjacentPre
+        }
+
+        // Option 2: Check if the current code block is a Jupyter-only preview
+        const isJupyterOnly =
+            code.getAttribute('class').includes('jupyter:preview') ||
+            code.getAttribute('class').includes(':preview:jupyter')
+
+        let jupyterUrl = null
+        let jupyterCodeContent = null // Store original code content for display
+        if (isJupyterOnly) {
+            // Jupyter-only preview: convert content to JupyterLite URL
+            jupyterCodeContent = code.textContent.trim()
+            jupyterUrl = buildJupyterUrl(jupyterCodeContent)
+            jupyterCode = code
+        } else if (jupyterCode) {
+            // Separate Jupyter code block: convert content to JupyterLite URL
+            jupyterCodeContent = jupyterCode.textContent.trim()
+            jupyterUrl = buildJupyterUrl(jupyterCodeContent)
+        }
+
+        const sourceGroupId = `code-preview-source-group-${count}`
+        const isExpanded = code.getAttribute('class').includes(':expanded')
+        const noCodePen = code.getAttribute('class').includes(':no-codepen')
+
+        count++
+
+        const htmlButton = `
+      <button type="button"
+        title="Show HTML code"
+        class="code-preview__button code-preview__button--html"
+      >
+        HTML
+      </button>
+    `
+
+        const reactButton = `
+      <button type="button" title="Show React code" class="code-preview__button code-preview__button--react">
+        React
+      </button>
+    `
+
+        const jupyterButton = `
+      <button type="button" title="Show Jupyter Notebook" class="code-preview__button code-preview__button--jupyter">
+        Jupyter
+      </button>
+    `
+
+        const codePenButton = `
+      <button type="button" class="code-preview__button code-preview__button--codepen" title="Edit on CodePen">
+        <svg
+          width="138"
+          height="26"
+          viewBox="0 0 138 26"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2.3"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M80 6h-9v14h9 M114 6h-9 v14h9 M111 13h-6 M77 13h-6 M122 20V6l11 14V6 M22 16.7L33 24l11-7.3V9.3L33 2L22 9.3V16.7z M44 16.7L33 9.3l-11 7.4 M22 9.3l11 7.3 l11-7.3 M33 2v7.3 M33 16.7V24 M88 14h6c2.2 0 4-1.8 4-4s-1.8-4-4-4h-6v14 M15 8c-1.3-1.3-3-2-5-2c-4 0-7 3-7 7s3 7 7 7 c2 0 3.7-0.8 5-2 M64 13c0 4-3 7-7 7h-5V6h5C61 6 64 9 64 13z" />
+        </svg>
+      </button>
+    `
+
+        const htmlPreviewContent = !isJupyterOnly ? code.textContent : ''
+        const jupyterPreviewContent = jupyterUrl
+            ? `<div class="code-preview__jupyter-banner">
+                <p>This is an embedded JupyterLite notebook. Please give it a few seconds to render.</p>
+              </div>
+              <iframe src="${escapeHtml(jupyterUrl)}" style="width: 100%; height: 600px; border: none;"></iframe>`
+            : ''
+
+        const codePreview = `
+      <div class="code-preview ${isExpanded ? 'code-preview--expanded' : ''}" ${jupyterUrl ? 'data-has-jupyter="true"' : ''}>
+        <div class="code-preview__preview">
+          ${
+              !isJupyterOnly
+                  ? `<div class="code-preview__preview-content" data-flavor="html">${htmlPreviewContent}</div>`
+                  : ''
+          }
+          ${
+              jupyterUrl
+                  ? `<div class="code-preview__preview-content" data-flavor="jupyter">${jupyterPreviewContent}</div>`
+                  : ''
+          }
+          <div class="code-preview__resizer">
+            <terra-icon name="solid-bars-4" library="heroicons"></terra-icon>
+          </div>
+        </div>
+
+        <div class="code-preview__source-group" id="${sourceGroupId}">
+          ${
+              !isJupyterOnly
+                  ? `
+            <div class="code-preview__source code-preview__source--html" ${
+                reactCode || jupyterUrl ? 'data-flavor="html"' : ''
+            }>
+              <pre><code class="language-html">${escapeHtml(
+                  code.textContent
+              )}</code></pre>
+            </div>
+          `
+                  : ''
+          }
+
+          ${
+              reactCode
+                  ? `
+            <div class="code-preview__source code-preview__source--react" data-flavor="react">
+              <pre><code class="language-jsx">${escapeHtml(
+                  reactCode.textContent
+              )}</code></pre>
+            </div>
+          `
+                  : ''
+          }
+
+          ${
+              jupyterUrl
+                  ? `
+            <div class="code-preview__source code-preview__source--jupyter" data-flavor="jupyter">
+              <pre><code class="language-python">${escapeHtml(jupyterCodeContent || jupyterUrl)}</code></pre>
+            </div>
+          `
+                  : ''
+          }
+        </div>
+
+        <div class="code-preview__buttons">
+          <button
+            type="button"
+            class="code-preview__button code-preview__toggle"
+            aria-expanded="${isExpanded ? 'true' : 'false'}"
+            aria-controls="${sourceGroupId}"
+          >
+            Source
+            <svg
+              viewBox="0 0 24 24"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="2"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            >
+              <polyline points="6 9 12 15 18 9"></polyline>
+            </svg>
+          </button>
+
+          ${!isJupyterOnly && (reactCode || jupyterUrl) ? ` ${htmlButton} ` : ''}
+          ${reactCode ? reactButton : ''}
+          ${jupyterUrl ? jupyterButton : ''}
+
+          ${noCodePen ? '' : codePenButton}
+        </div>
+      </div>
+    `
+
+        pre.insertAdjacentHTML('afterend', codePreview)
+        pre.remove()
+
+        // Remove pre blocks that were used for React or Jupyter
+        // We remove them so the code (URL) is not visible on the page
+        if (adjacentPre) {
+            const wasUsedForReact = reactCode?.closest('pre')?.isSameNode(adjacentPre)
+            const wasUsedForJupyter =
+                jupyterCode &&
+                !isJupyterOnly &&
+                jupyterCode.closest('pre')?.isSameNode(adjacentPre)
+
+            // Remove adjacentPre if it was used (we've already extracted the code)
+            // Exception: if it has React code, we might need to keep it, but actually we've extracted it too
+            if (wasUsedForReact || wasUsedForJupyter) {
+                adjacentPre.remove()
+            }
+        }
+
+        // Remove Jupyter code block if it was in a separate pre block (not Jupyter-only and not in adjacentPre)
+        // This ensures the URL text is not visible on the page
+        if (jupyterCode && !isJupyterOnly && !code.isSameNode(jupyterCode)) {
+            const jupyterCodePre = jupyterCode.closest('pre')
+            const wasInAdjacentPre =
+                adjacentPre && jupyterCodePre?.isSameNode(adjacentPre)
+
+            // Only remove if it's in a different pre block than adjacentPre (which was already removed above)
+            if (!wasInAdjacentPre && jupyterPre) {
+                jupyterPre.remove()
+            } else if (!wasInAdjacentPre) {
+                // Fallback: remove the pre containing jupyterCode if it wasn't already removed
+                const fallbackPre = jupyterCodePre
+                if (
+                    fallbackPre &&
+                    fallbackPre !== adjacentPre &&
+                    fallbackPre.parentNode
+                ) {
+                    fallbackPre.remove()
+                }
+            }
+        }
+    })
+
+    // Wrap code preview scripts in anonymous functions so they don't run in the global scope
+    doc.querySelectorAll('.code-preview__preview script').forEach(script => {
+        if (script.type === 'module') {
+            // Modules are already scoped
+            script.textContent = script.innerHTML
+        } else {
+            // Wrap non-modules in an anonymous function so they don't run in the global scope
+            script.textContent = `(() => { ${script.innerHTML} })();`
+        }
+    })
+
+    return doc
+}

{terra_ui_components-0.0.129 → terra_ui_components-0.0.136}/docs/assets/scripts/code-previews.js

@@ -45,28 +45,43 @@
     }
 
     function setFlavor(newFlavor) {
-        flavor = ['html', 'react'].includes(newFlavor) ? newFlavor : 'html'
+        flavor = ['html', 'react', 'jupyter'].includes(newFlavor) ? newFlavor : 'html'
         sessionStorage.setItem('flavor', flavor)
 
         // Set the flavor class on the body
         document.documentElement.classList.toggle('flavor-html', flavor === 'html')
         document.documentElement.classList.toggle('flavor-react', flavor === 'react')
+        document.documentElement.classList.toggle(
+            'flavor-jupyter',
+            flavor === 'jupyter'
+        )
     }
 
     function syncFlavor() {
         setFlavor(getFlavor())
 
         document.querySelectorAll('.code-preview__button--html').forEach(preview => {
-            if (flavor === 'html') {
-                preview.classList.add('code-preview__button--selected')
-            }
+            preview.classList.toggle(
+                'code-preview__button--selected',
+                flavor === 'html'
+            )
         })
 
         document.querySelectorAll('.code-preview__button--react').forEach(preview => {
-            if (flavor === 'react') {
-                preview.classList.add('code-preview__button--selected')
-            }
+            preview.classList.toggle(
+                'code-preview__button--selected',
+                flavor === 'react'
+            )
         })
+
+        document
+            .querySelectorAll('.code-preview__button--jupyter')
+            .forEach(preview => {
+                preview.classList.toggle(
+                    'code-preview__button--selected',
+                    flavor === 'jupyter'
+                )
+            })
     }
 
     const componentsVersion = document.documentElement.getAttribute(
@@ -147,6 +162,9 @@
             // Show React
             setFlavor('react')
             toggleSource(codeBlock, true)
+        } else if (button?.classList.contains('code-preview__button--jupyter')) {
+            setFlavor('jupyter')
+            //toggleSource(codeBlock, true)
         } else if (button?.classList.contains('code-preview__toggle')) {
             // Toggle source
             toggleSource(codeBlock)
@@ -164,6 +182,10 @@
                 'code-preview__button--selected',
                 flavor === 'react'
             )
+            cb.querySelector('.code-preview__button--jupyter')?.classList.toggle(
+                'code-preview__button--selected',
+                flavor === 'jupyter'
+            )
         })
     })
 

{terra_ui_components-0.0.129 → terra_ui_components-0.0.136}/docs/assets/styles/code-previews.css

@@ -101,7 +101,8 @@
 }
 
 .code-preview__button--html,
-.code-preview__button--react {
+.code-preview__button--react,
+.code-preview__button--jupyter {
     width: 70px;
     display: flex;
     place-items: center;
@@ -163,7 +164,7 @@
     transform: rotate(180deg);
 }
 
-/* We can apply data-flavor="html|react" to any element on the page to toggle it when the flavor changes */
+/* We can apply data-flavor="html|react|jupyter" to any element on the page to toggle it when the flavor changes */
 .flavor-html [data-flavor]:not([data-flavor='html']) {
     display: none;
 }
@@ -171,3 +172,42 @@
 .flavor-react [data-flavor]:not([data-flavor='react']) {
     display: none;
 }
+
+.flavor-jupyter [data-flavor]:not([data-flavor='jupyter']) {
+    display: none;
+}
+
+/* Preview content switching */
+.code-preview__preview-content {
+    width: 100%;
+}
+
+.code-preview__preview-content:not([data-flavor='html']):not(
+        [data-flavor='jupyter']
+    ) {
+    display: none;
+}
+
+/* Jupyter banner styling */
+.code-preview__jupyter-banner {
+    background-color: var(--terra-color-primary-50);
+    border: 1px solid var(--terra-color-primary-200);
+    border-radius: 3px;
+    padding: 0.75rem 1rem;
+    margin-bottom: 1rem;
+}
+
+.code-preview__jupyter-banner p {
+    margin: 0;
+    font-size: 0.875rem;
+    color: var(--terra-color-primary-700);
+    line-height: 1.5;
+}
+
+/* Jupyter iframe styling - only in preview area */
+.code-preview__preview-content[data-flavor='jupyter'] iframe {
+    width: 100%;
+    height: 600px;
+    border: none;
+    display: block;
+}

{terra_ui_components-0.0.129 → terra_ui_components-0.0.136}/docs/pages/components/alert.md

@@ -3,7 +3,6 @@ meta:
     title: Alert
     description: Alerts are used to display important messages inline or as toast notifications.
 layout: component
-sidebarSection: Elements
 ---
 
 ```html:preview

{terra_ui_components-0.0.129 → terra_ui_components-0.0.136}/docs/pages/components/avatar.md

@@ -3,7 +3,6 @@ meta:
     title: Avatar
     description: Avatars are used to represent a person or object.
 layout: component
-sidebarSection: Elements
 ---
 
 By default, a generic icon will be shown. You can personalize avatars by adding custom icons, initials, and images. You should always provide a `label` for assistive devices.

{terra_ui_components-0.0.129 → terra_ui_components-0.0.136}/docs/pages/components/badge.md

@@ -3,7 +3,6 @@ meta:
     title: Badge
     description: Badges are used to draw attention and display statuses or counts.
 layout: component
-sidebarSection: Elements
 ---
 
 ```html:preview

{terra_ui_components-0.0.129 → terra_ui_components-0.0.136}/docs/pages/components/button-group.md

@@ -3,7 +3,6 @@ meta:
     title: Button Group
     description: Button groups can be used to group related buttons into sections.
 layout: component
-sidebarSection: Elements
 ---
 
 ```html:preview

{terra_ui_components-0.0.129 → terra_ui_components-0.0.136}/docs/pages/components/button.md

@@ -3,7 +3,6 @@ meta:
     title: Button
     description: Buttons represent actions that are available to the user.
 layout: component
-sidebarSection: Elements
 ---
 
 ```html:preview

{terra_ui_components-0.0.129 → terra_ui_components-0.0.136}/docs/pages/components/caption.md

@@ -3,7 +3,6 @@ meta:
     title: Caption
     description: Captions are small text blocks that describe photos, provide additional context and information, and give credit to photographers and other content owners and creators.
 layout: component
-sidebarSection: Elements
 ---
 
 # Caption

{terra_ui_components-0.0.129 → terra_ui_components-0.0.136}/docs/pages/components/card.md

@@ -3,7 +3,6 @@ meta:
     title: Card
     description: Cards can be used to group related subjects in a container.
 layout: component
-sidebarSection: Elements
 ---
 
 ```html:preview

{terra_ui_components-0.0.129 → terra_ui_components-0.0.136}/docs/pages/components/checkbox.md

@@ -3,7 +3,6 @@ meta:
     title: Checkbox
     description: Checkboxes are a form field used when there are multiple options to select from a list.
 layout: component
-sidebarSection: Elements
 ---
 
 ```html:preview

{terra_ui_components-0.0.129 → terra_ui_components-0.0.136}/docs/pages/components/chip.md

@@ -3,7 +3,6 @@ meta:
     title: Chip
     description: A chip is used to represent small blocks of information, and are commonly used for contacts and tags. Chips can optionally have a close button to remove them.
 layout: component
-sidebarSection: Elements
 ---
 
 ```html:preview

{terra_ui_components-0.0.129 → terra_ui_components-0.0.136}/docs/pages/components/date-picker.md

@@ -3,7 +3,6 @@ meta:
     title: Date Picker
     description: A versatile date picker component that supports both single date selection and date range selection.
 layout: component
-sidebarSection: Elements
 ---
 
 ```html:preview

{terra_ui_components-0.0.129 → terra_ui_components-0.0.136}/docs/pages/components/divider.md

@@ -3,7 +3,6 @@ meta:
     title: Divider
     description: Dividers are used to visually separate or group elements.
 layout: component
-sidebarSection: Elements
 ---
 
 ```html:preview

terra_ui_components-0.0.136/docs/pages/components/earthdata-login.md

@@ -0,0 +1,18 @@
+---
+meta:
+    title: Earthdata Login
+    description:
+layout: component
+---
+
+```html:preview
+<terra-earthdata-login></terra-earthdata-login>
+```
+
+```jupyter
+%pip install -q "terra_ui_components" "anywidget"
+from terra_ui_components import TerraEarthdataLogin
+TerraEarthdataLogin()
+```
+
+[component-metadata:terra-earthdata-login]

{terra_ui_components-0.0.129 → terra_ui_components-0.0.136}/docs/pages/components/file-upload.md

@@ -3,7 +3,6 @@ meta:
     title: File Upload
     description: File upload fields allow visitors to attach one or multiple files to be submitted with a form.
 layout: component
-sidebarSection: Elements
 ---
 
 # File Upload