superdesk-ui-framework 6.1.0-dev1 → 7.0.0-dev-hg0

package/dist/design/icon-buttons.html

@@ -1,210 +0,0 @@
-<section class="docs-page__container">
-    <h1 class="docs-page__h2">Icon Button Guidelines</h1>
-    <p class="docs-page__paragraph docs-page__paragraph--large">Icon buttons provide a compact way to trigger actions while maintaining clean interfaces. Since icons communicate meaning without text, choosing the right icon and providing clear tooltips becomes critical for usability. The <code>IconButton</code> component ensures consistent styling and behavior across all icon-based actions.</p>
-    
-    <h3 class="docs-page__h3 mt-5">Icon Selection</h3>
-    <h4 class="docs-page__h4 mt-3">Choose Recognizable Icons</h4>
-    <p class="docs-page__paragraph">Use icons that clearly represent their action. When in doubt, prioritize universal symbols over creative interpretations.</p>
-
-    <div class="docs-page__content-block d-flex flex-wrap gap-3">
-        <div class="docs-page__do-dont-block docs-page__do-dont-block--do">
-            <h4 class="docs-page__do-dont-block-title">Do</h4>
-            <div class="docs-page__do-dont-block-content mt-0">
-                <ul class="docs-page__unordered-list">
-                    <li>Magnifying glass for search</li>
-                    <li>Pencil or edit icon for editing</li>
-                    <li>Download arrow for downloads</li>
-                    <li>Settings gear for configuration</li>
-                </ul>
-            </div>
-        </div>
-        <div class="docs-page__do-dont-block docs-page__do-dont-block--dont">
-            <h4 class="docs-page__do-dont-block-title">Don't</h4>
-            <div class="docs-page__do-dont-block-content">
-                <ul class="docs-page__unordered-list mt-1">
-                    <li>Abstract or ambiguous icons that require explanation</li>
-                    <li>Icons that could have multiple interpretations</li>
-                    <li>Custom icons when standard ones exist</li>
-                </ul>
-            </div>
-        </div>
-    </div>
-
-    <h4 class="docs-page__h4 mt-4">Icon Meaning Consistency</h4>
-    <p class="docs-page__paragraph">Use the same icon for the same action throughout the application. Users learn and expect consistency.</p>
-
-    <div class="docs-page__content-block d-flex flex-wrap gap-3">
-        <div class="docs-page__do-dont-block docs-page__do-dont-block--do">
-            <h4 class="docs-page__do-dont-block-title">Do</h4>
-            <div class="docs-page__do-dont-block-content">
-                <p class="docs-page__paragraph">
-                    Use the same edit icon across all edit functions in your app.
-                </p>
-            </div>
-        </div>
-        <div class="docs-page__do-dont-block docs-page__do-dont-block--dont">
-            <h4 class="docs-page__do-dont-block-title">Don't</h4>
-            <div class="docs-page__do-dont-block-content">
-                <p class="docs-page__paragraph">
-                    Use different edit icons (pencil, pen, edit text) for similar editing actions.
-                </p>
-            </div>
-        </div>
-    </div>
-
-
-    <hr class="sd-content-divider sd-content-divider--horizontal sd-content-divider--margin-large sd-content-divider--dashed" role="separator" />
-
-    <h3 class="docs-page__h3 mt-5">Tooltip Guidelines</h3>
-    <h4 class="docs-page__h4 mt-3">Always Provide Tooltips</h4>
-    <p class="docs-page__paragraph">Every icon button must have a descriptive tooltip that clearly states what will happen when clicked.</p>
- 
-    <div class="docs-page__content-block d-flex flex-wrap gap-3">
-        <div class="docs-page__do-dont-block docs-page__do-dont-block--do">
-            <h4 class="docs-page__do-dont-block-title">Do</h4>
-            <div class="docs-page__do-dont-block-content">
-                <ul class="docs-page__unordered-list">
-                    <li>"Delete item"</li>
-                    <li>"Edit profile settings"</li>
-                    <li>"Download report as PDF"</li>
-                    <li>"Close dialog"</li>
-                </ul>
-            </div>
-        </div>
-        <div class="docs-page__do-dont-block docs-page__do-dont-block--dont">
-            <h4 class="docs-page__do-dont-block-title">Don't</h4>
-            <div class="docs-page__do-dont-block-content">
-                <ul class="docs-page__unordered-list">
-                    <li>"Delete" (too vague)</li>
-                    <li>"Edit" (edit what?)</li>
-                    <li>"Download" (download what format?)</li>
-                    <li>"Close" (close what?)</li>
-                </ul>
-            </div>
-        </div>
-    </div>
-
-    <h4 class="docs-page__h4 mt-4">Tooltip Language</h4>
-    <p class="docs-page__paragraph">Use action-oriented language that describes the outcome, not just the icon name.</p>
-
-    <div class="docs-page__content-block d-flex flex-wrap gap-3">
-        <div class="docs-page__do-dont-block docs-page__do-dont-block--do">
-            <h4 class="docs-page__do-dont-block-title">Do</h4>
-            <div class="docs-page__do-dont-block-content">
-                <p class="docs-page__paragraph">"Remove item from list" instead of "X button"</p>
-            </div>
-        </div>
-        <div class="docs-page__do-dont-block docs-page__do-dont-block--dont">
-            <h4 class="docs-page__do-dont-block-title">Don't</h4>
-            <div class="docs-page__do-dont-block-content">
-                <p class="docs-page__paragraph">"Trash can" or "Delete icon"</p>
-            </div>
-        </div>
-    </div>
-
-    <hr class="sd-content-divider sd-content-divider--horizontal sd-content-divider--margin-large sd-content-divider--dashed" role="separator" />
-
-    <h3 class="docs-page__h3 mt-5 d-flex items-center gap-1">
-        Close <span class="docs-page__icon-wrapper"><i class="icon-close-small" aria-hidden="true"></i></span> vs 
-        Delete <span class="docs-page__icon-wrapper"><i class="icon-trash" aria-hidden="true"></i></span> Icons
-    </h3>
-    
-    <p class="docs-page__paragraph">Understanding when to use close versus delete icons is crucial for user expectations and preventing destructive actions. This is a common source of confusion that can lead to inconsistent user experiences.</p>
-    
-    <h4 class="docs-page__h4 mt-4 d-flex items-center gap-1">Use Close <span class="docs-page__icon-wrapper"><i class="icon-close-small" aria-hidden="true"></i></span> icon for:</h4>
-    <h5 class="docs-page__h5 mt-2">Temporary removals or dismissals:</h5>
-    <ul class="docs-page__unordered-list mt-2 mb-2">
-        <li>Recommended in most cases but can be skipped occasionally</li>
-        <li>Rare exception: large and complex modals where actions happen inside the content area</li>
-        <li>Main action buttons always aligned to the right</li>
-        <li>Primary action positioned far right</li>
-    </ul>
-    <p class="docs-page__paragraph mt-0"><strong>Characteristics:</strong> Reversible, non-destructive, affects UI state rather than data.</p>
-    
-    <h4 class="docs-page__h4 mt-4 d-flex items-center gap-1">Use Delete <span class="docs-page__icon-wrapper"><i class="icon-trash" aria-hidden="true"></i></span> icon for:</h4>
-    <h5 class="docs-page__h5 mt-2">Permanent data removal:</h5>
-    <ul class="docs-page__unordered-list mt-2 mb-2">
-        <li>Deleting files, records, or database entries</li>
-        <li>Removing user-created content permanently</li>
-        <li>Deleting accounts or user profiles</li>
-        <li>Deleting articles</li>
-    </ul>
-    <p class="docs-page__paragraph mt-0"><strong>Characteristics:</strong> Usually irreversible, destructive, affects actual data.</p>
-    
-    <h4 class="docs-page__h4 mt-4 ">Examples</h4>
-
-    <div class="docs-page__content-block d-flex flex-wrap gap-3">
-        <div class="docs-page__do-dont-block docs-page__do-dont-block--do">
-            <h4 class="docs-page__do-dont-block-title d-flex items-center gap-0-5">Do - Close <span class="docs-page__icon-wrapper"><i class="icon-close-small" aria-hidden="true"></i></span> icon</h4>
-            <div class="docs-page__do-dont-block-content mt-0">
-                <ul class="docs-page__unordered-list">
-                    <li>Closing a modal dialog: "Close dialog"</li>
-                    <li>Removing an item from related content: "Remove from related"</li>
-                    <li>Dismissing a notification: "Dismiss notification"</li>
-                    <li>Closing a sidebar: "Close preview"</li>
-                </ul>
-            </div>
-        </div>
-        <div class="docs-page__do-dont-block docs-page__do-dont-block--do">
-            <h4 class="docs-page__do-dont-block-title d-flex items-center gap-0-5">Do - Delete <span class="docs-page__icon-wrapper"><i class="icon-trash" aria-hidden="true"></i></span> icon</h4>
-            <div class="docs-page__do-dont-block-content">
-                <ul class="docs-page__unordered-list mt-1">
-                    <li>Deleting a user account: "Delete account permanently"</li>
-                    <li>Removing a saved document: "Delete document"</li>
-                    <li>Deleting a database record: "Delete customer record"</li>
-                </ul>
-            </div>
-        </div>
-        <div class="docs-page__do-dont-block docs-page__do-dont-block--dont">
-            <h4 class="docs-page__do-dont-block-title">Don't</h4>
-            <div class="docs-page__do-dont-block-content">
-                <ul class="docs-page__unordered-list mt-1">
-                    <li>Using trash icon to close dialogs or dismiss notifications</li>
-                    <li>Using close (×) icon for permanent deletions</li>
-                    <li>Mixing these icons inconsistently for similar actions</li>
-                </ul>
-            </div>
-        </div>
-    </div>
-    
-    <hr class="sd-content-divider sd-content-divider--horizontal sd-content-divider--margin-large" role="separator" />
-
-    <h3 class="docs-page__h3 mt-0">Accessibility Considerations</h3>
-    <h4 class="docs-page__h4 mt-2">Color and Contrast</h4>
-    <p class="docs-page__paragraph mt-0">Icons should meet accessibility contrast requirements. Don't rely on color alone to convey meaning.</p>
-
-
-
-    <h4 class="docs-page__h4 mt-5">Screen Readers</h4>
-    <p class="docs-page__paragraph mt-0">The <code>IconButton</code> component requires an ARIA label as a mandatory prop, which serves dual purposes: providing screen reader accessibility and generating the tooltip text. Screen reader support is built directly into the component.</p>
-
-    <hr class="sd-content-divider sd-content-divider--horizontal sd-content-divider--margin-large" role="separator" />
-
-    <h3 class="docs-page__h3 mt-0 mb-3">Component Usage</h3>
-
-    <ul class="docs-page__unordered-list mt-1 mb-5" style="max-width: 85ch;">
-        <li><strong>IconButton:</strong> Use for all icon-based actions with proper icon selection and mandatory tooltips for clear user communication.</li>
-        <li><strong>ButtonGroup:</strong> When grouping multiple icon buttons, use the <code>ButtonGroup</code> component for consistent spacing and alignment. The same spacing principles that apply to regular button grouping apply here.</li>
-    </ul>
-
-    <div class="docs-page__button-grid">
-        <a class="docs-page__graphic-btn" href="#/components/icon-buttons" target="_blank">
-            <figure class="docs-page__graphic-btn-graphic">
-                <img src="/illustration-small--react.svg" alt="React components">
-            </figure>
-            <label class="docs-page__graphic-btn-label">
-                <span>View IconButton component</span>
-                <span class="docs-page__small-text">Components</span>
-            </label>
-        </a>
-        <a class="docs-page__graphic-btn" href="#/components/button-groups" target="_blank">
-            <figure class="docs-page__graphic-btn-graphic">
-                <img src="/illustration-small--react.svg" alt="React components">
-            </figure>
-            <label class="docs-page__graphic-btn-label">
-                <span>View ButtonGroup component</span>
-                <span class="docs-page__small-text">Components</span>
-            </label>
-        </a>
-    </div>
-</section>

package/dist/design/layout-principles.html

@@ -1,45 +0,0 @@
-<section class="docs-page__container">
-    <h2 class="docs-page__h2">Layout Principles</h2>
-    <p class="docs-page__paragraph">To achieve consistency and visuall balance most measurements in Superdesk are based on an 8-pixel grid.
-        A subgrid of 4px can be used for smaller elements (e.g. icons), the spacing between small text blocks and similar.</p>
-    <div class="docs-page__content-block">
-        <div class="docs-page__content-block-item">
-            <figure class="docs-page__figure-media docs-page__figure-media--light">
-                <img src="/layout--grid-01.png" alt="Layout grid">
-            </figure>
-        </div>
-    </div>
-
-    <div class="docs-page__button-grid">
-        <a class="docs-page__graphic-btn" href="#/components/spacing" target="_blank">
-            <figure class="docs-page__graphic-btn-graphic">
-                <img src="/illustration-small--components.svg" alt="Components">
-            </figure>
-            <label class="docs-page__graphic-btn-label">
-                <span>View spacing helper classes</span>
-                <span class="docs-page__small-text">Components</span>
-            </label>
-        </a>
-    </div>
-
-    <h3 class="docs-page__h3">Example</h3>
-    <p class="docs-page__paragraph"></p>
-        <div class="docs-page__content-block">
-            <div class="docs-page__content-block-item">
-                <figure class="docs-page__figure-media">
-                    <img src="/layout--size-example-01.png" alt="Size example">
-                </figure>
-            </div>
-        </div>
-</section>
-
-
-
-
-
-
-
-
-
-
-

package/dist/design/modals-and-dialogs.html

@@ -1,208 +0,0 @@
-<section class="docs-page__container">
-    <h1 class="docs-page__h2">Modals & Dialogs Guidelines</h1>
-    <p class="docs-page__paragraph docs-page__paragraph--large">Dialogs and modals are essential components in Superdesk, used frequently for everything from quick confirmations to complex workflows. Given the sophisticated nature of content management, our modals often contain substantial functionality. Consistent structure and content guidelines help users navigate these interfaces confidently.</p>
-    
-    <h3 class="docs-page__h3 mt-5">Structure</h3>
-    <p class="docs-page__paragraph">Every dialog consists of three main areas: <strong>Header</strong> (with title), <strong>Content</strong>, and <strong>Footer</strong>. The Header and Content are always required, while the Footer is recommended in most cases.</p>
-    
-    <figure class="my-3" style="margin-inline-start: -8px;">
-        <img width="545" src="/simple-dialog__structure.png" alt="Button Tertiary">
-    </figure>
-
-    <hr class="sd-content-divider sd-content-divider--horizontal sd-content-divider--margin-large sd-content-divider--dashed" role="separator" />
-    
-    <h4 class="docs-page__h4 mt-0">Header</h4>
-    <p class="docs-page__paragraph mb-0 mt-1 font-semibold">Purpose</p>
-    <p class="docs-page__paragraph mt-0">Contains the dialog title and close button. Provides immediate context about the dialog's purpose.</p>
-    <p class="docs-page__paragraph mb-0 font-semibold">Requirements</p>
-    <ul class="docs-page__unordered-list mt-1">
-        <li>Title is always mandatory</li>
-        <li>Close (×) button aligned to the right is mandatory in most cases</li>
-        <li>Close button can only be removed when demanding a clear action from the user in the footer</li>
-    </ul>
-
-    <hr class="sd-content-divider sd-content-divider--horizontal sd-content-divider--margin-large sd-content-divider--dashed" role="separator" />
-
-    <h4 class="docs-page__h4 mt-0">Content</h4>
-    <p class="docs-page__paragraph mb-0 mt-1 font-semibold">Purpose</p>
-    <p class="docs-page__paragraph mt-0">The main area for information, forms, or other interactive elements that support the dialog's goal.</p>
-    <p class="docs-page__paragraph mb-0 font-semibold">Requirements</p>
-    <ul class="docs-page__unordered-list mt-1">
-        <li>Always mandatory</li>
-        <li>Should clearly explain what's happening or what the user needs to do</li>
-    </ul>
-
-    <hr class="sd-content-divider sd-content-divider--horizontal sd-content-divider--margin-large sd-content-divider--dashed" role="separator" />
-
-    <h4 class="docs-page__h4 mt-0">Footer</h4>
-    <p class="docs-page__paragraph mb-0 mt-1 font-semibold">Purpose</p>
-    <p class="docs-page__paragraph mt-0">Contains action buttons that allow users to proceed, cancel, or complete the dialog's purpose.</p>
-    <p class="docs-page__paragraph mb-0 font-semibold">Requirements</p>
-    <ul class="docs-page__unordered-list mt-1">
-        <li>Recommended in most cases but can be skipped occasionally</li>
-        <li>Rare exception: large and complex modals where actions happen inside the content area</li>
-        <li>Main action buttons always aligned to the right</li>
-        <li>Primary action positioned far right</li>
-    </ul>
-    
-    <hr class="sd-content-divider sd-content-divider--horizontal sd-content-divider--margin-large" role="separator" />
-
-    <h3 class="docs-page__h3 mt-0">Content Guidelines</h3>
-    <h4 class="docs-page__h4 mt-2">Clear Titles</h4>
-    <p class="docs-page__paragraph mt-0">Use specific, descriptive titles that immediately tell users what the dialog is about.</p>
-
-    <div class="docs-page__content-block d-flex flex-wrap gap-3">
-        <div class="docs-page__do-dont-block docs-page__do-dont-block--do">
-            <h4 class="docs-page__do-dont-block-title">Do</h4>
-            <div class="docs-page__do-dont-block-content">
-                <ul class="docs-page__unordered-list">
-                    <li>"Save changes before closing?"</li>
-                    <li>"Export Customer Data"</li>
-                    <li>"You have unsaved changes"</li>
-                </ul>
-            </div>
-        </div>
-        <div class="docs-page__do-dont-block docs-page__do-dont-block--dont">
-            <h4 class="docs-page__do-dont-block-title">Don't</h4>
-            <div class="docs-page__do-dont-block-content">
-                <ul class="docs-page__unordered-list mt-1">
-                    <li>"Are you sure?"</li>
-                    <li>"Confirmation"</li>
-                    <li>"Dialog"</li>
-                </ul>
-            </div>
-        </div>
-    </div>
-
-    <h4 class="docs-page__h4 mt-5">Explicit Button Labels</h4>
-    <p class="docs-page__paragraph mt-0">Button text should clearly state what will happen when clicked, not generic actions.</p>
-
-    <div class="docs-page__content-block d-flex flex-wrap gap-3">
-        <div class="docs-page__do-dont-block docs-page__do-dont-block--do">
-            <h4 class="docs-page__do-dont-block-title">Do</h4>
-            <div class="docs-page__do-dont-block-content">
-                <ul class="docs-page__unordered-list">
-                    <li>"Delete Profile"</li>
-                    <li>"Save & Continue"</li>
-                    <li>"Discard Changes"</li>
-                </ul>
-            </div>
-        </div>
-        <div class="docs-page__do-dont-block docs-page__do-dont-block--dont">
-            <h4 class="docs-page__do-dont-block-title">Don't</h4>
-            <div class="docs-page__do-dont-block-content">
-                <ul class="docs-page__unordered-list mt-1">
-                    <li>"Ignore"</li>
-                    <li>"Submit"</li>
-                    <li>"Yes"</li>
-                </ul>
-            </div>
-        </div>
-    </div>
-
-    <h4 class="docs-page__h4 mt-5">Clear Content</h4>
-    <p class="docs-page__paragraph mt-0">Explain what's happening and what the outcome will be. Users should never guess what an action will do.</p>
-
-    <div class="docs-page__content-block d-flex flex-wrap gap-3">
-        <div class="docs-page__do-dont-block docs-page__do-dont-block--do">
-            <h4 class="docs-page__do-dont-block-title">Do</h4>
-            <div class="docs-page__do-dont-block-content">
-                <ul class="docs-page__unordered-list">
-                    <li>"This will permanently delete the profile and all its data. This action cannot be undone."</li>
-                    <li>"Your changes will be saved and you'll return to the article."</li>
-                </ul>
-            </div>
-        </div>
-        <div class="docs-page__do-dont-block docs-page__do-dont-block--dont">
-            <h4 class="docs-page__do-dont-block-title">Don't</h4>
-            <div class="docs-page__do-dont-block-content">
-                <ul class="docs-page__unordered-list mt-1">
-                    <li>"This action will affect your data."</li>
-                    <li>"Proceed with the operation?"</li>
-                </ul>
-            </div>
-        </div>
-    </div>
-
-    <hr class="sd-content-divider sd-content-divider--horizontal sd-content-divider--margin-large" role="separator" />
-
-    <h3 class="docs-page__h3 mt-0">Layout Guidelines</h3>
-    <h4 class="docs-page__h4 mt-2 mb-2">Action Alignment</h4>
-    <div class="docs-page__content-block d-flex flex-wrap gap-3">
-        <div class="docs-page__content-block-item">
-            <figure class="docs-page__figure-media py-5" style="background-color: hsla(214, 13%, 92%, 1);">
-                <img width="420" src="/dialog--do-01.png" alt="Dialog - Do - example one.">
-            </figure>
-            <figcaption class="docs-page__figure-caption">
-                <p class="docs-page__caption-heading docs-page__caption-heading--do">Do.</p>
-                <p class="docs-page__caption-text">Align primary and secondary actions to the right, with the primary action positioned furthest right.</p>
-            </figcaption>
-        </div>
-        <div class="docs-page__content-block-item">
-            <figure class="docs-page__figure-media py-5" style="background-color: hsla(214, 13%, 92%, 1);">
-                <img width="420" src="/dialog--dont-01.png" alt="Dialog - Don't - example one.">
-            </figure>
-            <figcaption class="docs-page__figure-caption">
-                <p class="docs-page__caption-heading docs-page__caption-heading--dont">Don't.</p>
-                <p class="docs-page__caption-text">Place actions on the left side or center them, as this breaks expected interaction patterns.</p>
-            </figcaption>
-        </div>
-
-    </div>
-    <div class="docs-page__content-block d-flex flex-wrap gap-3">
-        <div class="docs-page__content-block-item">
-            <figure class="docs-page__figure-media py-5" style="background-color: hsla(214, 13%, 92%, 1);">
-                <img width="420" src="/dialog--do-02.png" alt="Dialog - Do - example two.">
-            </figure>
-            <figcaption class="docs-page__figure-caption">
-                <p class="docs-page__caption-heading docs-page__caption-heading--do">Do.</p>
-                <p class="docs-page__caption-text">Use consistent spacing between buttons in the footer. The same spacing principles from our Button Guidelines apply here - use the <code>ButtonGroup</code> component when possible, or the <code>--gap-1</code> spacing variable for custom layouts. For more detailed information, see the guidelines for the <a class="docs-page__link" href="#/design/buttons">Button component</a>.</p>
-            </figcaption>
-        </div>
-        <div class="docs-page__content-block-item">
-            <figure class="docs-page__figure-media py-5" style="background-color: hsla(214, 13%, 92%, 1);">
-                <img width="420" src="/dialog--dont-02.png" alt="Dialog - Don't - example two.">
-            </figure>
-            <figcaption class="docs-page__figure-caption">
-                <p class="docs-page__caption-heading docs-page__caption-heading--dont">Don't.</p>
-                <p class="docs-page__caption-text">Place footer buttons too close together or use random spacing. Poorly spaced actions create confusion, increase the risk of accidental clicks, and make the interface feel inconsistent.</p>
-            </figcaption>
-        </div>
-
-    </div>
-
-    <h4 class="docs-page__h4 mt-4 mb-2">Close Button Usage</h4>
-    <div class="docs-page__content-block d-flex flex-wrap gap-3">
-        <div class="docs-page__content-block-item">
-            <figure class="docs-page__figure-media py-5" style="background-color: hsla(214, 13%, 92%, 1);">
-                <img width="420" src="/dialog--do-03.png" alt="Dialog - Do - example three.">
-            </figure>
-            <figcaption class="docs-page__figure-caption">
-                <p class="docs-page__caption-heading docs-page__caption-heading--do">Do.</p>
-                <p class="docs-page__caption-text">Include the close (×) button in most dialogs to give users a clear escape route.</p>
-            </figcaption>
-        </div>
-        <div class="docs-page__content-block-item">
-            <figure class="docs-page__figure-media py-5" style="background-color: hsla(214, 13%, 92%, 1);">
-                <img width="420" src="/dialog--dont-03.png" alt="Dialog - Don't - example three.">
-            </figure>
-            <figcaption class="docs-page__figure-caption">
-                <p class="docs-page__caption-heading docs-page__caption-heading--dont">Don't.</p>
-                <p class="docs-page__caption-text">Remove the close button unless you specifically need to force a decision (like unsaved changes warnings).</p>
-            </figcaption>
-        </div>
-
-    </div>
-
-    <div class="docs-page__button-grid">
-        <a class="docs-page__graphic-btn" href="#/components/modal" target="_blank">
-            <figure class="docs-page__graphic-btn-graphic">
-                <img src="/illustration-small--react.svg" alt="React components">
-            </figure>
-            <label class="docs-page__graphic-btn-label">
-                <span>View Modal component</span>
-                <span class="docs-page__small-text">Components</span>
-            </label>
-        </a>
-    </div>
-</section>

package/dist/design/modules.html

@@ -1,22 +0,0 @@
-<section class="docs-page__container">
-    <h2 class="docs-page__h2">Modules</h2>
-    <p class="docs-page__paragraph"></p>
-    <div class="docs-page__content-block">
-        <div class="docs-page__content-block-item">
-            <div class="sd-alert sd-alert--hollow sd-alert--primary">
-               <div class="sd-margin-x--auto">Coming soon!</div>
-            </div>
-        </div>
-    </div>
-</section>
-
-
-
-
-
-
-
-
-
-
-

package/dist/design/pages.html

@@ -1,22 +0,0 @@
-<section class="docs-page__container">
-    <h2 class="docs-page__h2">Page layouts</h2>
-    <p class="docs-page__paragraph"></p>
-    <div class="docs-page__content-block">
-        <div class="docs-page__content-block-item">
-            <div class="sd-alert sd-alert--hollow sd-alert--primary">
-               <div class="sd-margin-x--auto">Coming soon!</div>
-            </div>
-        </div>
-    </div>
-</section>
-
-
-
-
-
-
-
-
-
-
-

package/dist/design/switch.html

@@ -1,70 +0,0 @@
-<section class="docs-page__container">
-        <h2 class="docs-page__h2">Switch guidlines</h2>
-        <p class="docs-page__paragraph docs-page__paragraph--large">Similar rules apply to switches as for checkboxes, with the key difference being when to use them. Use switches for settings that take effect immediately without requiring a confirmation button - the switch instantly affects the view or functionality. Use the <code>SwitchGroup</code> component when grouping multiple switches.</p>
-        <div class="docs-page__content-block">
-            <div class="docs-page__content-block-item">
-                <figure class="docs-page__figure-media">
-                    <img width="360" src="/switch--do-01.png" alt="Switch - Do">
-                </figure>
-                <figcaption class="docs-page__figure-caption">
-                    <p class="docs-page__caption-heading docs-page__caption-heading--do">Do.</p>
-                    <p class="docs-page__caption-text">List multiple switches in a vertical list with labels on the right side of the switch. Always use plain labels on the same line as the switch. Use <code>SwitchGroup</code> to organize multiple switches with consistent spacing and alignment.</p>
-                </figcaption>
-            </div>
-            <div class="docs-page__content-block-item">
-                <figure class="docs-page__figure-media">
-                    <img width="360" src="/switch--do-02.png" alt="Switch - Caution">
-                </figure>
-                <figcaption class="docs-page__figure-caption">
-                    <p class="docs-page__caption-heading docs-page__caption-heading--caution">Caution.</p>
-                    <p class="docs-page__caption-text">In contained modules narrower than 400 pixels, you may place labels on the left and align switches to the right. This should be avoided when possible, as it makes it harder for users to pair labels with their switches. Consider using clear visual grouping in such cases.</p>
-                </figcaption>
-            </div>
-        </div>
-        <div class="docs-page__content-block">
-            <div class="docs-page__content-block-item">
-                <figure class="docs-page__figure-media">
-                    <img width="360" src="/switch--dont-01.png" alt="Switch - Don't">
-                </figure>
-                <figcaption class="docs-page__figure-caption">
-                    <p class="docs-page__caption-heading docs-page__caption-heading--dont">Don't.</p>
-                    <p class="docs-page__caption-text">List switches with labels on the left in normal layouts. Only place labels to the left when the containing block has right text alignment.</p>
-                </figcaption>
-            </div>
-            <div class="docs-page__content-block-item">
-                <figure class="docs-page__figure-media">
-                    <img width="360" src="/switch--dont-02.png" alt="Switch - Don't">
-                </figure>
-                <figcaption class="docs-page__figure-caption">
-                    <p class="docs-page__caption-heading docs-page__caption-heading--dont">Don't</p>
-                    <p class="docs-page__caption-text">List more than two switches horizontally in a single line - this creates scanning difficulties and breaks the expected vertical rhythm.</p>
-                </figcaption>
-            </div>
-        </div>
-
-        <hr class="sd-content-divider sd-content-divider--horizontal sd-content-divider--margin-large" role="separator" />
-        
-        <h3 class="docs-page__h3 mt-0 mb-3">Component Usage</h3>
-        <ul class="docs-page__unordered-list mt-1 mb-5">
-            <li><strong>Switch:</strong> Individual switch component for single or multiple switch implementations</li>
-            <li><strong>SwitchGroup:</strong> Used to group multiple <code>Switch</code> components with consistent spacing and alignment</li>
-        </ul>
-
-        <h4 class="docs-page__h4 mt-5 mb-2">When to use Switches vs Checkboxes</h4>
-        <ul class="docs-page__unordered-list mt-1 mb-5">
-            <li><strong>Switches:</strong> For settings that take effect immediately (toggle dark mode, enable notifications)</li>
-            <li><strong>Checkboxes:</strong> For selections that require confirmation or submission (form selections, bulk actions)</li>
-        </ul>
-
-        <div class="docs-page__button-grid">
-            <a class="docs-page__graphic-btn" href="#/components/switch" target="_blank">
-                <figure class="docs-page__graphic-btn-graphic">
-                    <img src="/illustration-small--react.svg" alt="React components">
-                </figure>
-                <label class="docs-page__graphic-btn-label">
-                    <span>View Switch component</span>
-                    <span class="docs-page__small-text">Components</span>
-                </label>
-            </a>
-        </div>
-    </section>

package/dist/design-patterns/Index.tsx

@@ -1,42 +0,0 @@
-import * as React from 'react';
-
-import {ReactNav, PatternsDefault} from '../../js/react';
-import {Dropdown} from '../../../app-typescript/index';
-
-import {Switch, Route} from 'react-router-dom';
-
-import {ThreePaneLayoutPattern} from './ThreePaneLayoutPattern';
-
-const pages = {
-    basicComponents: {
-        name: 'Layout',
-        items: {
-            'three-pane-layout': {
-                name: 'Three Pane Layout',
-            },
-            // 'icon-buttons': {
-            //     name: 'Icon Buttons'
-            // },
-            // 'button-groups': {
-            //     name: 'Button Group & Divider'
-            // },
-        },
-    },
-};
-class DesignPatternsDoc extends React.Component<> {
-    render() {
-        return (
-            <React.Fragment>
-                <ReactNav pages={pages} base="design-patterns" />
-                <main className="docs-page__content docs-page__container-fluid">
-                    <Switch>
-                        <Route path="/design-patterns/three-pane-layout" component={ThreePaneLayoutPattern} />
-                        <Route path="/" component={PatternsDefault} />
-                    </Switch>
-                </main>
-            </React.Fragment>
-        );
-    }
-}
-
-export {DesignPatternsDoc};