superdesk-ui-framework 4.0.46 → 4.0.48

package/dist/components/utilities/BorderUtilities.tsx

@@ -6,12 +6,10 @@ class BorderUtilitiesDoc extends React.Component {
         return (
             <section className="docs-page__container">
                 <h2 className="docs-page__h2">Border</h2>
-                <p className="docs-page__paragraph">
-                    Utility classes for controlling the borders of an element.. 
-                </p>
-                <div className='docs-page__container-block--border'>
+                <p className="docs-page__paragraph">Utility classes for controlling the borders of an element..</p>
+                <div className="docs-page__container-block--border">
                     <h3 className="docs-page__h3">Basic Border with neutral color</h3>
-                    <p className='docs-page__paragraph'>
+                    <p className="docs-page__paragraph">
                         Utilities classes for adding a neutral 1px solid border to an element.
                     </p>
                     <div className="utilities-table__container">
@@ -27,32 +25,41 @@ class BorderUtilitiesDoc extends React.Component {
                                 <tr>
                                     <td>sd-border--x-light</td>
                                     <td>{'border: 1px solid var(--sd-colour-line--x-light);'}</td>
-                                    <td><div className='border-example-box sd-border--x-light'></div></td>
+                                    <td>
+                                        <div className="border-example-box sd-border--x-light"></div>
+                                    </td>
                                 </tr>
                                 <tr>
                                     <td>sd-border--light</td>
                                     <td>{'border: 1px solid var(--sd-colour-line--light);'}</td>
-                                    <td><div className='border-example-box sd-border--light'></div></td>
+                                    <td>
+                                        <div className="border-example-box sd-border--light"></div>
+                                    </td>
                                 </tr>
                                 <tr>
                                     <td>sd-border--medium</td>
                                     <td>{'border: 1px solid var(--sd-colour-line--medium);'}</td>
-                                    <td><div className='border-example-box sd-border--medium'></div></td>
+                                    <td>
+                                        <div className="border-example-box sd-border--medium"></div>
+                                    </td>
                                 </tr>
                                 <tr>
                                     <td>sd-border--strong</td>
                                     <td>{'border: 1px solid var(--sd-colour-line--strong);'}</td>
-                                    <td><div className='border-example-box sd-border--strong'></div></td>
+                                    <td>
+                                        <div className="border-example-box sd-border--strong"></div>
+                                    </td>
                                 </tr>
                             </tbody>
                         </table>
                     </div>
                 </div>
 
-                <div className='docs-page__container-block--border-width'>
+                <div className="docs-page__container-block--border-width">
                     <h3 className="docs-page__h3">Border Width</h3>
-                    <p className='docs-page__paragraph'>
-                        Utilities classes for overriding the border width of an element. Options are limited to common use cases.
+                    <p className="docs-page__paragraph">
+                        Utilities classes for overriding the border width of an element. Options are limited to common
+                        use cases.
                     </p>
                     <div className="utilities-table__container utilities-table__container--no-height">
                         <table className="table utilities-table">
@@ -86,50 +93,43 @@ class BorderUtilitiesDoc extends React.Component {
                                 <tr>
                                     <td>border-x-0</td>
                                     <td>
-                                        {'border-inline-start-width: 0px;'}<br />
+                                        {'border-inline-start-width: 0px;'}
+                                        <br />
                                         {'border-inline-end-width: 0px;'}
-
                                     </td>
                                 </tr>
                                 <tr>
                                     <td>border-y-0</td>
                                     <td>
-                                        {'border-block-start-width: 0px;'}<br />
+                                        {'border-block-start-width: 0px;'}
+                                        <br />
                                         {'border-block-end-width: 0px;'}
                                     </td>
                                 </tr>
                                 <tr>
                                     <td>border-s-0</td>
-                                    <td>
-                                        {'border-inline-start-width: 0px;'}
-                                    </td>
+                                    <td>{'border-inline-start-width: 0px;'}</td>
                                 </tr>
                                 <tr>
                                     <td>border-e-0</td>
-                                    <td>
-                                        {'border-inline-end-width: 0px;'}
-                                    </td>
+                                    <td>{'border-inline-end-width: 0px;'}</td>
                                 </tr>
                                 <tr>
                                     <td>border-t-0</td>
-                                    <td>
-                                        {'border-top: 0px;'}
-                                    </td>
+                                    <td>{'border-top: 0px;'}</td>
                                 </tr>
                                 <tr>
                                     <td>border-b-0</td>
-                                    <td>
-                                        {'border-bottom: 0px;'}
-                                    </td>
+                                    <td>{'border-bottom: 0px;'}</td>
                                 </tr>
                             </tbody>
                         </table>
                     </div>
                 </div>
 
-                <div className='docs-page__container-block--border-style'>
+                <div className="docs-page__container-block--border-style">
                     <h3 className="docs-page__h3">Border Style</h3>
-                    <p className='docs-page__paragraph'>
+                    <p className="docs-page__paragraph">
                         Utilities classes for overriding the border style of an element.
                     </p>
                     <div className="utilities-table__container utilities-table__container--no-height">
@@ -161,10 +161,9 @@ class BorderUtilitiesDoc extends React.Component {
                         </table>
                     </div>
                 </div>
-
             </section>
-        )
+        );
     }
 }
 
-export { BorderUtilitiesDoc };
+export {BorderUtilitiesDoc};

package/dist/components/utilities/DisplayUtilities.tsx

@@ -7,9 +7,9 @@ class DisplayUtilitiesDoc extends React.Component {
             <section className="docs-page__container">
                 <h2 className="docs-page__h2">Display</h2>
                 <p className="docs-page__paragraph">
-                Utility classes for controlling the display box type of an element.
+                    Utility classes for controlling the display box type of an element.
                 </p>
-                <div className='docs-page__container-block--display'>
+                <div className="docs-page__container-block--display">
                     <div className="utilities-table__container utilities-table__container--no-height">
                         <table className="table utilities-table">
                             <thead>
@@ -107,10 +107,9 @@ class DisplayUtilitiesDoc extends React.Component {
                         </table>
                     </div>
                 </div>
-
             </section>
-        )
+        );
     }
 }
 
-export { DisplayUtilitiesDoc };
+export {DisplayUtilitiesDoc};

package/dist/components/utilities/FlexAndGridUtilities.tsx

@@ -7,9 +7,9 @@ class FlexAndGridUtilitiesDoc extends React.Component {
             <section className="docs-page__container">
                 <h2 className="docs-page__h2">Flex & Grid</h2>
 
-                <div className='docs-page__container-block--flex-direction'>
+                <div className="docs-page__container-block--flex-direction">
                     <h3 className="docs-page__h3">Flex Direction</h3>
-                    <p className='docs-page__paragraph'>
+                    <p className="docs-page__paragraph">
                         Utilities classes for controlling the direction of flex items.
                     </p>
                     <div className="utilities-table__container">
@@ -37,17 +37,14 @@ class FlexAndGridUtilitiesDoc extends React.Component {
                                     <td>flex-col-reverse</td>
                                     <td>{'flex-direction: column-reverse !important;'}</td>
                                 </tr>
-
                             </tbody>
                         </table>
                     </div>
                 </div>
 
-                <div className='docs-page__container-block--flex-wrap'>
+                <div className="docs-page__container-block--flex-wrap">
                     <h3 className="docs-page__h3">Flex Wrap</h3>
-                    <p className='docs-page__paragraph'>
-                        Utilities classes for controlling how flex items wrap.
-                    </p>
+                    <p className="docs-page__paragraph">Utilities classes for controlling how flex items wrap.</p>
                     <div className="utilities-table__container">
                         <table className="table utilities-table">
                             <thead>
@@ -74,9 +71,9 @@ class FlexAndGridUtilitiesDoc extends React.Component {
                     </div>
                 </div>
 
-                <div className='docs-page__container-block--flex'>
+                <div className="docs-page__container-block--flex">
                     <h3 className="docs-page__h3">Flex</h3>
-                    <p className='docs-page__paragraph'>
+                    <p className="docs-page__paragraph">
                         Utilities classes for controlling how flex items both grow and shrink.
                     </p>
                     <div className="utilities-table__container">
@@ -109,9 +106,9 @@ class FlexAndGridUtilitiesDoc extends React.Component {
                     </div>
                 </div>
 
-                <div className='docs-page__container-block--flex-grow-shrink'>
+                <div className="docs-page__container-block--flex-grow-shrink">
                     <h3 className="docs-page__h3">Flex Grow & Flex Shrink</h3>
-                    <p className='docs-page__paragraph'>
+                    <p className="docs-page__paragraph">
                         Utilities classes for controlling how flex items individually grow or shrink.
                     </p>
                     <div className="utilities-table__container">
@@ -123,7 +120,7 @@ class FlexAndGridUtilitiesDoc extends React.Component {
                                 </tr>
                             </thead>
                             <tbody>
-                                <tr className='utilities-table__divider-row'>
+                                <tr className="utilities-table__divider-row">
                                     <td>Flex grow</td>
                                     <td></td>
                                 </tr>
@@ -135,7 +132,7 @@ class FlexAndGridUtilitiesDoc extends React.Component {
                                     <td>flex-grow-0</td>
                                     <td>{'flex-grow: 0 !important;'}</td>
                                 </tr>
-                                <tr className='utilities-table__divider-row'>
+                                <tr className="utilities-table__divider-row">
                                     <td>Flex shrink</td>
                                     <td></td>
                                 </tr>
@@ -152,10 +149,11 @@ class FlexAndGridUtilitiesDoc extends React.Component {
                     </div>
                 </div>
 
-                <div className='docs-page__container-block--flex-grow-shrink'>
+                <div className="docs-page__container-block--flex-grow-shrink">
                     <h3 className="docs-page__h3">Justify Content</h3>
-                    <p className='docs-page__paragraph'>
-                        Utilities classes for controlling how flex and grid items are positioned along a container's main axis.
+                    <p className="docs-page__paragraph">
+                        Utilities classes for controlling how flex and grid items are positioned along a container's
+                        main axis.
                     </p>
                     <div className="utilities-table__container">
                         <table className="table utilities-table">
@@ -203,9 +201,9 @@ class FlexAndGridUtilitiesDoc extends React.Component {
                     </div>
                 </div>
 
-                <div className='docs-page__container-block--justify-items'>
+                <div className="docs-page__container-block--justify-items">
                     <h3 className="docs-page__h3">Justify Items</h3>
-                    <p className='docs-page__paragraph'>
+                    <p className="docs-page__paragraph">
                         Utilities classes for controlling how grid items are aligned along their inline axis.
                     </p>
                     <div className="utilities-table__container">
@@ -238,9 +236,9 @@ class FlexAndGridUtilitiesDoc extends React.Component {
                     </div>
                 </div>
 
-                <div className='docs-page__container-block--justify-self'>
+                <div className="docs-page__container-block--justify-self">
                     <h3 className="docs-page__h3">Justify Self</h3>
-                    <p className='docs-page__paragraph'>
+                    <p className="docs-page__paragraph">
                         Utilities classes for controlling how an individual grid item is aligned along its inline axis.
                     </p>
                     <div className="utilities-table__container">
@@ -277,9 +275,9 @@ class FlexAndGridUtilitiesDoc extends React.Component {
                     </div>
                 </div>
 
-                <div className='docs-page__container-block--align-content'>
+                <div className="docs-page__container-block--align-content">
                     <h3 className="docs-page__h3">Align Content</h3>
-                    <p className='docs-page__paragraph'>
+                    <p className="docs-page__paragraph">
                         Utilities classes for controlling how rows are positioned in multi-row flex and grid containers.
                     </p>
                     <div className="utilities-table__container utilities-table__container--no-height">
@@ -332,10 +330,11 @@ class FlexAndGridUtilitiesDoc extends React.Component {
                     </div>
                 </div>
 
-                <div className='docs-page__container-block--align-items'>
+                <div className="docs-page__container-block--align-items">
                     <h3 className="docs-page__h3">Align Items</h3>
-                    <p className='docs-page__paragraph'>
-                        Utilities classes for controlling how flex and grid items are positioned along a container's cross axis.
+                    <p className="docs-page__paragraph">
+                        Utilities classes for controlling how flex and grid items are positioned along a container's
+                        cross axis.
                     </p>
                     <div className="utilities-table__container">
                         <table className="table utilities-table">
@@ -371,10 +370,11 @@ class FlexAndGridUtilitiesDoc extends React.Component {
                     </div>
                 </div>
 
-                <div className='docs-page__container-block--align-self'>
+                <div className="docs-page__container-block--align-self">
                     <h3 className="docs-page__h3">Align Self</h3>
-                    <p className='docs-page__paragraph'>
-                        Utilities classes for controlling how an individual flex or grid item is positioned along its container's cross axis.
+                    <p className="docs-page__paragraph">
+                        Utilities classes for controlling how an individual flex or grid item is positioned along its
+                        container's cross axis.
                     </p>
                     <div className="utilities-table__container">
                         <table className="table utilities-table">
@@ -414,9 +414,9 @@ class FlexAndGridUtilitiesDoc extends React.Component {
                     </div>
                 </div>
 
-                <div className='docs-page__container-block--place-content'>
+                <div className="docs-page__container-block--place-content">
                     <h3 className="docs-page__h3">Place Content</h3>
-                    <p className='docs-page__paragraph'>
+                    <p className="docs-page__paragraph">
                         Utilities classes for controlling how content is justified and aligned at the same time.
                     </p>
                     <div className="utilities-table__container">
@@ -465,9 +465,9 @@ class FlexAndGridUtilitiesDoc extends React.Component {
                     </div>
                 </div>
 
-                <div className='docs-page__container-block--place-items'>
+                <div className="docs-page__container-block--place-items">
                     <h3 className="docs-page__h3">Place Items</h3>
-                    <p className='docs-page__paragraph'>
+                    <p className="docs-page__paragraph">
                         Utilities classes for controlling how items are justified and aligned at the same time.
                     </p>
                     <div className="utilities-table__container">
@@ -504,10 +504,11 @@ class FlexAndGridUtilitiesDoc extends React.Component {
                     </div>
                 </div>
 
-                <div className='docs-page__container-block--place-self'>
+                <div className="docs-page__container-block--place-self">
                     <h3 className="docs-page__h3">Place Self</h3>
-                    <p className='docs-page__paragraph'>
-                        Utilities classes for controlling how an individual item is justified and aligned at the same time.
+                    <p className="docs-page__paragraph">
+                        Utilities classes for controlling how an individual item is justified and aligned at the same
+                        time.
                     </p>
                     <div className="utilities-table__container">
                         <table className="table utilities-table">
@@ -542,10 +543,9 @@ class FlexAndGridUtilitiesDoc extends React.Component {
                         </table>
                     </div>
                 </div>
-
             </section>
-        )
+        );
     }
 }
 
-export { FlexAndGridUtilitiesDoc };
+export {FlexAndGridUtilitiesDoc};

package/dist/components/utilities/ObjectFitUtilities.tsx

@@ -7,9 +7,9 @@ class ObjectFitUtilitiesDoc extends React.Component {
             <section className="docs-page__container">
                 <h2 className="docs-page__h2">Object Fit</h2>
                 <p className="docs-page__paragraph">
-                    Utilities for managing how a replaced element's content should be resized. 
+                    Utilities for managing how a replaced element's content should be resized.
                 </p>
-                <div className='docs-page__container-block--object-fit'>
+                <div className="docs-page__container-block--object-fit">
                     <div className="utilities-table__container">
                         <table className="table utilities-table">
                             <thead>
@@ -39,15 +39,13 @@ class ObjectFitUtilitiesDoc extends React.Component {
                                     <td>object-scale-down</td>
                                     <td>{'object-fit: scale-down;'}</td>
                                 </tr>
-
                             </tbody>
                         </table>
                     </div>
                 </div>
-
             </section>
-        )
+        );
     }
 }
 
-export { ObjectFitUtilitiesDoc };
+export {ObjectFitUtilitiesDoc};

package/dist/components/utilities/ObjectPositionUtilities.tsx

@@ -9,7 +9,7 @@ class ObjectPositionUtilitiesDoc extends React.Component {
                 <p className="docs-page__paragraph">
                     Utilities for managing how a replaced element's content should be positioned within its container.
                 </p>
-                <div className='docs-page__container-block--object-position'>
+                <div className="docs-page__container-block--object-position">
                     <div className="utilities-table__container utilities-table__container--no-height">
                         <table className="table utilities-table">
                             <thead>
@@ -59,10 +59,9 @@ class ObjectPositionUtilitiesDoc extends React.Component {
                         </table>
                     </div>
                 </div>
-
             </section>
-        )
+        );
     }
 }
 
-export { ObjectPositionUtilitiesDoc };
+export {ObjectPositionUtilitiesDoc};

package/dist/components/utilities/OpacityUtilities.tsx

@@ -6,10 +6,8 @@ class OpacityUtilitiesDoc extends React.Component {
         return (
             <section className="docs-page__container">
                 <h2 className="docs-page__h2">Opacity</h2>
-                <p className="docs-page__paragraph">
-                    Utility classes for controlling the opacity of an element. 
-                </p>
-                <div className='docs-page__container-block--opacity'>
+                <p className="docs-page__paragraph">Utility classes for controlling the opacity of an element.</p>
+                <div className="docs-page__container-block--opacity">
                     <div className="utilities-table__container">
                         <table className="table utilities-table">
                             <thead>
@@ -55,10 +53,9 @@ class OpacityUtilitiesDoc extends React.Component {
                         </table>
                     </div>
                 </div>
-
             </section>
-        )
+        );
     }
 }
 
-export { OpacityUtilitiesDoc };
+export {OpacityUtilitiesDoc};

package/dist/components/utilities/OverflowUtilities.tsx

@@ -7,9 +7,9 @@ class OverflowUtilitiesDoc extends React.Component {
             <section className="docs-page__container">
                 <h2 className="docs-page__h2">Overflow</h2>
                 <p className="docs-page__paragraph">
-                Utility classes for managing how an element deals with content that exceeds the container's size. 
+                    Utility classes for managing how an element deals with content that exceeds the container's size.
                 </p>
-                <div className='docs-page__container-block--position'>
+                <div className="docs-page__container-block--position">
                     <div className="utilities-table__container utilities-table__container--no-height">
                         <table className="table utilities-table">
                             <thead>
@@ -84,10 +84,9 @@ class OverflowUtilitiesDoc extends React.Component {
                         </table>
                     </div>
                 </div>
-
             </section>
-        )
+        );
     }
 }
 
-export { OverflowUtilitiesDoc };
+export {OverflowUtilitiesDoc};

package/dist/components/utilities/PositionUtilities.tsx

@@ -7,9 +7,9 @@ class PositionUtilitiesDoc extends React.Component {
             <section className="docs-page__container">
                 <h2 className="docs-page__h2">Position</h2>
                 <p className="docs-page__paragraph">
-                Utility classes for managing the placement of an element within the DOM. 
+                    Utility classes for managing the placement of an element within the DOM.
                 </p>
-                <div className='docs-page__container-block--position'>
+                <div className="docs-page__container-block--position">
                     <div className="utilities-table__container">
                         <table className="table utilities-table">
                             <thead>
@@ -43,10 +43,9 @@ class PositionUtilitiesDoc extends React.Component {
                         </table>
                     </div>
                 </div>
-
             </section>
-        )
+        );
     }
 }
 
-export { PositionUtilitiesDoc };
+export {PositionUtilitiesDoc};

package/dist/components/utilities/ShadowUtilities.tsx

@@ -6,11 +6,9 @@ class ShadowUtilitiesDoc extends React.Component {
         return (
             <section className="docs-page__container">
                 <h2 className="docs-page__h2">Shadow</h2>
-                <p className="docs-page__paragraph">
-                    Utility classes for managing the shadow depth of an element.
-                </p>
+                <p className="docs-page__paragraph">Utility classes for managing the shadow depth of an element.</p>
 
-                <div className='docs-page__container-block--box-shadow'>
+                <div className="docs-page__container-block--box-shadow">
                     <h3 className="docs-page__h3">box-shadow</h3>
                     <div className="utilities-table__container">
                         <table className="table utilities-table">
@@ -44,7 +42,7 @@ class ShadowUtilitiesDoc extends React.Component {
                             </tbody>
                         </table>
                     </div>
-                    <div className='docs-page__container-block'>
+                    <div className="docs-page__container-block">
                         <h4 className="docs-page__h4">Usage</h4>
                         <div className="docs-page__code-window">
                             <div className="sd-grid-list">
@@ -60,16 +58,18 @@ class ShadowUtilitiesDoc extends React.Component {
                                 <div className="docs-page__example-box sd-shadow--z4">
                                     <p>sd-shadow--z4</p>
                                 </div>
-                            
                             </div>
                         </div>
                     </div>
                 </div>
 
-                <div className='docs-page__container-block--drop-shadow'>
+                <div className="docs-page__container-block--drop-shadow">
                     <h3 className="docs-page__h3">drop-shadow filter</h3>
                     <p className="docs-page__paragraph">
-                        These helper classes utilize the <code>drop-shadow</code> filter. Use them exclusively to apply a shadow to an element that doesn't correspond to its bounding box, but instead uses the element's alpha mask, such as transparent PNG or SVG. For all other situations, it is recommended to use the above classes, based on the <code>box-shadow</code> property.
+                        These helper classes utilize the <code>drop-shadow</code> filter. Use them exclusively to apply
+                        a shadow to an element that doesn't correspond to its bounding box, but instead uses the
+                        element's alpha mask, such as transparent PNG or SVG. For all other situations, it is
+                        recommended to use the above classes, based on the <code>box-shadow</code> property.
                     </p>
                     <div className="utilities-table__container">
                         <table className="table utilities-table">
@@ -105,19 +105,18 @@ class ShadowUtilitiesDoc extends React.Component {
                     </div>
                 </div>
 
-                <div className='docs-page__container-block--drop-shadow'>
+                <div className="docs-page__container-block--drop-shadow">
                     <h4 className="docs-page__h4">Basic usage</h4>
                     <div className="docs-page__code-window docs-page__example-box">
-                            <div className="p-4">
-                                <p className="text-md font-light text-color-subdued mb-2">sd-drop-shadow--z3</p>
-                                <img className='sd-drop-shadow--z3' width={300} src='./SD-logo.svg' />
-                            </div>
+                        <div className="p-4">
+                            <p className="text-md font-light text-color-subdued mb-2">sd-drop-shadow--z3</p>
+                            <img className="sd-drop-shadow--z3" width={300} src="./SD-logo.svg" />
+                        </div>
                     </div>
                 </div>
-
             </section>
-        )
+        );
     }
 }
 
-export { ShadowUtilitiesDoc };
+export {ShadowUtilitiesDoc};