superdesk-ui-framework 3.0.82 → 3.1.0

package/app/img/DotsSmall-dark.svg

@@ -0,0 +1,14 @@
+<svg width="10" height="14" viewBox="0 0 10 14" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 0C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2C1.55228 2 2 1.55228 2 1C2 0.447715 1.55228 0 1 0Z" fill="#2C323A"/>
+<path d="M0 5C0 4.44772 0.447715 4 1 4C1.55228 4 2 4.44772 2 5C2 5.55228 1.55228 6 1 6C0.447715 6 0 5.55228 0 5Z" fill="#2C323A"/>
+<path d="M1 8C0.447715 8 0 8.44771 0 9C0 9.55229 0.447715 10 1 10C1.55228 10 2 9.55229 2 9C2 8.44771 1.55228 8 1 8Z" fill="#2C323A"/>
+<path d="M1 12C0.447715 12 0 12.4477 0 13C0 13.5523 0.447715 14 1 14C1.55228 14 2 13.5523 2 13C2 12.4477 1.55228 12 1 12Z" fill="#2C323A"/>
+<path d="M5 0C4.44772 0 4 0.447715 4 1C4 1.55228 4.44772 2 5 2C5.55228 2 6 1.55228 6 1C6 0.447715 5.55228 0 5 0Z" fill="#2C323A"/>
+<path d="M4 5C4 4.44772 4.44772 4 5 4C5.55228 4 6 4.44772 6 5C6 5.55228 5.55228 6 5 6C4.44772 6 4 5.55228 4 5Z" fill="#2C323A"/>
+<path d="M5 8C4.44772 8 4 8.44771 4 9C4 9.55229 4.44772 10 5 10C5.55228 10 6 9.55229 6 9C6 8.44771 5.55228 8 5 8Z" fill="#2C323A"/>
+<path d="M5 12C4.44772 12 4 12.4477 4 13C4 13.5523 4.44772 14 5 14C5.55228 14 6 13.5523 6 13C6 12.4477 5.55228 12 5 12Z" fill="#2C323A"/>
+<path d="M8 1C8 0.447715 8.44771 0 9 0C9.55228 0 10 0.447715 10 1C10 1.55228 9.55228 2 9 2C8.44771 2 8 1.55228 8 1Z" fill="#2C323A"/>
+<path d="M9 4C8.44771 4 8 4.44772 8 5C8 5.55228 8.44771 6 9 6C9.55228 6 10 5.55228 10 5C10 4.44772 9.55228 4 9 4Z" fill="#2C323A"/>
+<path d="M8 9C8 8.44771 8.44771 8 9 8C9.55228 8 10 8.44771 10 9C10 9.55229 9.55228 10 9 10C8.44771 10 8 9.55229 8 9Z" fill="#2C323A"/>
+<path d="M8 13C8 12.4477 8.44771 12 9 12C9.55228 12 10 12.4477 10 13C10 13.5523 9.55228 14 9 14C8.44771 14 8 13.5523 8 13Z" fill="#2C323A"/>
+</svg>

package/app/img/OneDot.svg

@@ -0,0 +1,3 @@
+<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 0C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2C1.55228 2 2 1.55228 2 1C2 0.447715 1.55228 0 1 0Z" fill="#2C323A"/>
+</svg>

package/app/styles/_design-tokens.scss

@@ -1,2 +1,3 @@
 @import 'design-tokens/design-tokens-general';
-@import 'design-tokens/new-colors';
+@import 'design-tokens/new-colors';
+@import 'design-tokens/component-tokens';

package/app/styles/_drag-handle.scss

@@ -1,24 +1,48 @@
-.drag-handle {
-    height: 30px;
-    width: 8px;
-    opacity: 0.85;
-}
 
 .drag-handle-wrapper {
-    padding: 6px;
     display: inline-flex;
     justify-content: center;
     align-items: center;
-    background-color: var(--sd-colour-line--medium);
-    border-start-start-radius: 3px;
-    border-end-start-radius: 3px;
+    transition: all 0.2s ease;
+    outline: none;
+    color: var(--color-text);
+    background-color: transparent;
+    .drag-handle-dots {
+        transition: all 0.1s ease;
+        opacity: 0.4;
+    }
     &:hover {
-        background-color: var(--sd-colour-line--strong);
         cursor: grab;
+        .drag-handle-dots {
+            opacity: 0.8;
+        }
     }
     &:active {
-        background-color: var(--sd-colour-interactive);
         cursor: grabbing;
-        opacity: 1;
+        .drag-handle-dots {
+            opacity: 1;
+        }
+    }
+    &.drag-handle-wrapper--boxed {
+        padding: var(--drag-handle-boxed-padding);
+        background-color: var(--drag-handle-boxed-color-bg-normal);
+        border-radius: var(--drag-handle-boxed-radius);
+        &:hover {
+            background-color: var(--drag-handle-boxed-color-bg-hover);
+        }
+        &:active {
+            background-color: var(--drag-handle-boxed-color-bg-active);
+            color: white;
+        }
     }
 }
+
+.drag-handle-dots {
+    mask-image: url(../img/OneDot.svg);
+    mask-repeat: repeat;
+    width: var(--handle-width);
+    height: var(--handle-height);
+    background-color: currentColor;
+    margin-block: auto;
+}
+

package/app/styles/app.scss

@@ -35,6 +35,7 @@
 @import 'spinner';
 @import 'table-list';
 @import 'hamburger';
+@import 'drag-handle';
 
 // Interface elements
 @import 'interface-elements/side-panel';

package/app/styles/design-tokens/_component-tokens.scss

@@ -0,0 +1,11 @@
+:root,
+[data-theme="dark-ui"],
+[data-theme="accessible-light-ui"],
+[data-theme="contrast-light-ui"] {
+    // Drag Handle
+    --drag-handle-boxed-color-bg-normal: var(--sd-colour-line--medium);
+    --drag-handle-boxed-color-bg-hover: var(--sd-colour-line--strong);
+    --drag-handle-boxed-color-bg-active: var(--sd-colour-interactive);
+    --drag-handle-boxed-radius: var(--b-radius--medium) 0 0 var(--b-radius--medium);
+    --drag-handle-boxed-padding: var(--space--1);
+}

package/app-typescript/components/DragHandle.tsx

@@ -1,12 +1,34 @@
 import * as React from 'react';
-import '../../app/styles/_drag-handle.scss';
-import dragHandleImg from '../../app/img/dots.svg';
+import classNames from 'classnames';
+import { DragHandleDots } from './DragHandleDots';
 
-export class DragHandle extends React.PureComponent {
+interface IProps {
+    blank?: boolean;
+    dotRows?: '4' | '5' | '6' | '7' | '8' | '10';
+    dotsInRow?: '2' | '3' | '4' | '5';
+    dotColor?: 'light' | 'dark'; // The default is the theme text color, this is an explicit override.
+    className?: string;
+}
+
+const dotSize = 4; // Size of the single dot image (OneDot.svg) that gets repeated and forms the dotted pattern.
+
+export class DragHandle extends React.PureComponent<IProps> {
     render() {
+        const classes = classNames('drag-handle-wrapper', {
+            [`drag-handle-wrapper--boxed`]: !this.props.blank,
+            'drag-handle-wrapper--blank': this.props.blank,
+        }, this.props.className);
+
+        const calcSize = (numberOfDots: string) => {
+            return Number(numberOfDots) * dotSize - (dotSize / 2);
+        };
+
         return (
-            <div className="drag-handle-wrapper">
-                <img src={dragHandleImg} className="drag-handle" draggable={false} />
+            <div className={classes}>
+                <DragHandleDots
+                    style={{width: calcSize(this.props.dotsInRow ?? '2'), height: calcSize(this.props.dotRows ?? '4')}}
+                    color={this.props.dotColor}
+                />
             </div>
         );
     }

package/app-typescript/components/DragHandleDots.tsx

@@ -0,0 +1,19 @@
+import * as React from 'react';
+import classNames from 'classnames';
+
+interface IProps {
+    color?: 'light' | 'dark';
+    style?: any;
+}
+
+export class DragHandleDots extends React.PureComponent<IProps> {
+    render() {
+        const classes = classNames('drag-handle-dots', {
+            [`drag-handle-dots--${this.props.color}`]: this.props.color,
+        });
+
+        return (
+            <div style={this.props.style} className={classes}></div>
+        );
+    }
+}

package/app-typescript/index.ts

@@ -100,6 +100,7 @@ export { ResizablePanels } from './components/ResizablePanels';
 export { WithPopover } from './components/WithPopover';
 export { Spacer, SpacerBlock } from './components/Spacer';
 export { ResizeObserverComponent } from './components/ResizeObserverComponent';
+export { DragHandleDots } from './components/DragHandleDots';
 export { DragHandle } from './components/DragHandle';
 
 // declare non-typescript exports to prevent errors

package/dist/OneDot.svg

@@ -0,0 +1,3 @@
+<svg width="4" height="4" viewBox="0 0 4 4" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 0C0.447715 0 0 0.447715 0 1C0 1.55228 0.447715 2 1 2C1.55228 2 2 1.55228 2 1C2 0.447715 1.55228 0 1 0Z" fill="#2C323A"/>
+</svg>

package/dist/examples.bundle.css

@@ -338,6 +338,8 @@ table {
     --docs-page-border__window-bar--top: hsla(0, 0%, 100%, 0.9);
     --docs-page-border__window-bar--bottom: hsla(0, 0%, 88%, 1);
     --docs-page-border__table: hsla(0, 0%, 0%, 0.16);
+
+    --docs-page-bg__table-tr-even: hsla(214, 13%, 50%, 0.08);
 }
 
 :root [data-theme="dark-ui"] {
@@ -1022,7 +1024,7 @@ pre.prettyprint {
 }
 
 .docs-page__container {
-    max-width: 832px;
+    max-width: 1200px;
     margin: 30px auto 0;
 }
 .docs-page__container--large {
@@ -1039,11 +1041,16 @@ pre.prettyprint {
     justify-content: center;
 }
 
+
+.docs-page__container .docs-page__code-window {
+    max-width: none !important;
+}
+
 .docs-page__container .docs-page__h2,
 .docs-page__container .docs-page__h3,
-.docs-page__container .docs-page__code-window,
-.docs-page__container .docs-page__paragraph {
-    max-width: none !important;
+.docs-page__container .docs-page__paragraph,
+.docs-page__container .docs-page__paragraph--small {
+    max-width: 85ch;
 }
 
 .docs-page__content-block {
@@ -1276,6 +1283,17 @@ doc-gif-img:hover img {
     border-color: var(--docs-page-border__table) !important;
 }
 
+.docs-page__container table tr td:nth-child(3) {
+    white-space: nowrap;
+}
+
+.docs-page__container table tr:nth-child(even),
+.docs-page__container table thead tr {
+    background-color: var(--docs-page-bg__table-tr-even);
+}
+
+
+
 
 /* -------------- END COLOR SWATCHES -------------- */
 /* -------------- PrismJS overrides -------------- */
@@ -12066,26 +12084,6 @@ doc-react-playground {
 .side-panel__top-tools--dark-blue-grey .icn-mix__icn {
   color: inherit;
   opacity: 1; }
-.drag-handle {
-  height: 30px;
-  width: 8px;
-  opacity: 0.85; }
-
-.drag-handle-wrapper {
-  padding: 6px;
-  display: inline-flex;
-  justify-content: center;
-  align-items: center;
-  background-color: var(--sd-colour-line--medium);
-  border-start-start-radius: 3px;
-  border-end-start-radius: 3px; }
-  .drag-handle-wrapper:hover {
-    background-color: var(--sd-colour-line--strong);
-    cursor: grab; }
-  .drag-handle-wrapper:active {
-    background-color: var(--sd-colour-interactive);
-    cursor: grabbing;
-    opacity: 1; }
 @charset "UTF-8";
 .red--100 {
   background-color: #fde4e2; }