superdesk-ui-framework 4.0.76 → 4.0.78

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

@@ -0,0 +1,208 @@
+<section class="docs-page__container">
+    <h1 class="docs-page__h2">Modals & Dialogs</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 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/switch.html

@@ -1,46 +1,59 @@
 <section class="docs-page__container">
-        <h2 class="docs-page__h2">Switch usage guidlines</h2>
+        <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 src="/switch--do-01.png" alt="Switch - Do">
+                    <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. If the containing block has text-align set to left the labels should always be on the right side of the switch. Always use plain labels, in the same line as the switch.</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 src="/switch--do-02.png" alt="Switch - Caution">
+                    <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, not wider than 400 pixels, it is allowed to place labels on the left and align the switches to the right. This should be avoided though, as it makes it more difficult for the user to pair the labels with belonging switches. Consider placing label & switch pairs in dotted list items in such cases.</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 src="/switch--dont-01.png" alt="Switch - Don't">
+                    <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">Never list switches with the label on the left. Place labels to the left only if the containing block has text-align set to right.</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 src="/switch--dont-02.png" alt="Switch - Don't">
+                    <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">Never list multiple switches in-line.</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>
 
+        <h4 class="docs-page__h4 mt-5 mb-2">Component Usage</h4>
+        <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="#/react/switch" target="_blank">
                 <figure class="docs-page__graphic-btn-graphic">

package/dist/examples.bundle.css

@@ -473,7 +473,7 @@ hr {
     margin: 24px 0;
 }
 
-h1.docs-page__h1 {
+.docs-page__h1 {
     font-size: 18px;
     font-weight: 400;
     line-height: 100%;
@@ -482,15 +482,32 @@ h1.docs-page__h1 {
     font-family: 'Merriweather', serif;
     letter-spacing: 0.02em;
 }
-h2.docs-page__h2 {
-    font-size: 32px;
+.docs-page__h2 {
+    font-size: 40px;
     font-weight: 700;
-    line-height: 140%;
+    line-height: 120%;
     font-family: 'Merriweather', serif;
     margin: 0 0 0.6em 0;
 }
-
-h2.docs-page__group-heading {
+.docs-page__h3 {
+    font-size: 32px;
+    font-weight: 700;
+    line-height: 120%;
+    font-family: 'Merriweather', serif;
+    margin: 2em 0 0.4em 0;
+}
+.docs-page__h3--small-top-m {
+    margin-top: 1em;
+}
+.docs-page__h4 {
+    font-size: 22px;
+    font-weight: 700;
+    line-height: 120%;
+    font-family: 'Merriweather', serif;
+    margin: 1em 0 0.2em 0;
+    color: var(--color-text-muted);
+}
+.docs-page__group-heading {
     font-size: 36px;
     font-weight: 300;
     margin: 1.6em 0 -0.6em 0;
@@ -498,7 +515,7 @@ h2.docs-page__group-heading {
     color: #747474;
     color: #999;
 }
-h2.docs-page__group-heading:first-of-type {
+.docs-page__group-heading:first-of-type {
     margin-top: 1em;
 }
 .docs-page__hero {
@@ -510,16 +527,6 @@ h2.docs-page__group-heading:first-of-type {
     margin: 32px auto;
 }
 
-h3.docs-page__h3 {
-    font-size: 24px;
-    font-weight: 700;
-    line-height: 140%;
-    font-family: 'Merriweather', serif;
-    margin: 2em 0 0.4em 0;
-}
-h3.docs-page__h3--small-top-m {
-    margin-top: 1em;
-}
 .docs-page__rule {
     border: none;
     border-width: 2px;
@@ -566,12 +573,6 @@ h3.docs-page__h3--small-top-m {
     text-align: center;
     margin: 0 auto 32px;
 }
-
-h4.docs-page__h4 {
-    font-size: 18px;
-    line-height: 140%;
-    margin: 0 0 0.4em 0;
-}
 .docs-page__paragraph {
     font-size: 16px;
     margin: 1em 0;
@@ -742,6 +743,10 @@ h4.docs-page__h4 {
     overflow-y: auto;
     position: relative;
     background-color: var(--docs-page-color-bg-00);
+    a {
+        color: var(--sd-colour-interactive);
+        text-decoration: dotted;
+    }
 }
 .docs-page__masthead {
     display: flex;
@@ -1081,8 +1086,9 @@ pre.prettyprint {
 }
 
 .docs-page__paragraph code,
-.docs-page__caption-text code {
-    font-size: 85%;
+.docs-page__caption-text code,
+.docs-page__unordered-list code {
+    font-size: 95%;
     padding: 0 0.4em;
     background-color: var(--sd-colour-interactive--alpha-20);
     border-radius: 3px;
@@ -1092,12 +1098,14 @@ pre.prettyprint {
     vertical-align: baseline;
     color: var(--color-text);
 }
+.docs-page__unordered-list strong {
+    font-weight: 600;
+}
 
 .docs-page__unordered-list {
     font-size: 16px;
     margin: 1em 0 2em;
     line-height: 150%;
-    font-weight: 300;
 }
 .docs-page__unordered-list li {
     list-style-type: disc;
@@ -1226,7 +1234,7 @@ pre.prettyprint {
     display: flex;
     align-items: center;
     justify-content: center;
-    border-radius: 4px;
+    border-radius: var(--b-radius--large);
 }
 .docs-page__figure-media img {
     max-width: 100%;
@@ -1239,31 +1247,33 @@ pre.prettyprint {
     font-size: 14px;
     margin-top: 12px;
     line-height: 150%;
+    text-wrap: pretty;
 }
 .docs-page__caption-heading {
-    border-top: 6px solid;
-    font-size: 15px;
+    border-top: 4px solid;
+    font-size: 16px;
     font-weight: 500;
     margin: 0;
     max-width: 100%;
-    padding: 6px 0 6px 8px;
-    margin-bottom: 12px;
+    padding: var(--space--1) var(--space--1-5) var(--space--1) var(--space--1-5);
+    margin-bottom: var(--space--1-5);
     line-height: 120%;
+    border-radius: var(--b-radius--medium);
 }
 .docs-page__caption-heading--do {
-    border-color: rgba(68, 165, 72, 1);
-    color: rgb(47, 134, 51);
-    background-color: rgba(68, 165, 72, 0.1);
+    border-color: var(--color-success-highlight);
+    color: var(--color-success-default);
+    background-color: var(--color-success-translucent);
 }
 .docs-page__caption-heading--dont {
-    border-color: rgba(222, 44, 44, 1);
-    color: rgb(197, 38, 38);
-    background-color: rgba(222, 44, 44, 0.1);
+    border-color: var(--color-alert-highlight);
+    color: var(--color-alert-default);
+    background-color: var(--color-alert-translucent);
 }
 .docs-page__caption-heading--caution {
-    border-color: rgba(241, 162, 36, 1);
-    color: rgb(225, 150, 25);
-    background-color: rgba(241, 162, 36, 0.1);
+    border-color: var(--color-warning-highlight);
+    color: var(--color-warning-default);
+    background-color: var(--color-warning-translucent);
 }
 
 .docs-page__text-align--center {
@@ -1519,6 +1529,47 @@ pre[class*='language-'] {
     background: hsl(214, 13%, 8%);
 }
 
+.docs-page__do-dont-block {
+    background-color: var(--sd-item__main-Bg);
+    border-radius: var(--b-radius--large);
+    overflow: hidden;
+    border: 1px solid var(--sd-colour-line--medium);
+    flex: 1 1%;
+    min-width: 400px;
+
+    &.docs-page__do-dont-block--do {
+        .docs-page__do-dont-block-title {
+            border-color: var(--color-success-highlight);
+            color: var(--color-success-default);
+            background-color: var(--color-success-translucent);
+        }
+    }
+
+    &.docs-page__do-dont-block--dont {
+        .docs-page__do-dont-block-title {
+            border-color: var(--color-alert-highlight);
+            color: var(--color-alert-default);
+            background-color: var(--color-alert-translucent);
+        }
+    }
+}
+
+.docs-page__do-dont-block-title {
+    font-size: 16px;
+    font-weight: 500;
+    line-height: 1;
+    padding: var(--space--1-5) var(--space--2);
+    border-radius: var(--b-radius--large) var(--b-radius--large) 0 0;
+    border-bottom: 4px solid var(--sd-colour-line--medium);
+}
+
+.docs-page__do-dont-block-content {
+    padding: var(--space--1);
+    .docs-page__unordered-list {
+        margin-block: var(--space--1-5);
+    }
+}
+
 /*// extra large screen media query /100em = 1600px/*/
 @media only screen and (min-width: 100em) {
     .docs-page__section {