@ulu/frontend 0.1.0-beta.85 → 0.1.0-beta.87

package/docs-dev/sass/helpers/typography/index.html

@@ -825,6 +825,21 @@
           
         </li>
       
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/wysiwyg/">
+          
+    
+    <span class="nav-tree__text">
+      WYSIWYG
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
       </ul>
     
           </details>
@@ -1965,21 +1980,6 @@
         </li>
       
 
-        <li class="nav-tree__item  ">
-          
-        <a class="nav-tree__link  " href="/frontend/sass/components/table-sticky/">
-          
-    
-    <span class="nav-tree__text">
-      Table-sticky
-    </span>
-  
-        </a>
-      
-          
-        </li>
-      
-
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/tabs/">
@@ -3521,6 +3521,21 @@
           
         </li>
       
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/wysiwyg/">
+          
+    
+    <span class="nav-tree__text">
+      WYSIWYG
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
       </ul>
     
           </details>
@@ -4661,21 +4676,6 @@
         </li>
       
 
-        <li class="nav-tree__item  ">
-          
-        <a class="nav-tree__link  " href="/frontend/sass/components/table-sticky/">
-          
-    
-    <span class="nav-tree__text">
-      Table-sticky
-    </span>
-  
-        </a>
-      
-          
-        </li>
-      
-
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/tabs/">

package/docs-dev/sass/helpers/units/index.html

@@ -825,6 +825,21 @@
           
         </li>
       
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/wysiwyg/">
+          
+    
+    <span class="nav-tree__text">
+      WYSIWYG
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
       </ul>
     
           </details>
@@ -1965,21 +1980,6 @@
         </li>
       
 
-        <li class="nav-tree__item  ">
-          
-        <a class="nav-tree__link  " href="/frontend/sass/components/table-sticky/">
-          
-    
-    <span class="nav-tree__text">
-      Table-sticky
-    </span>
-  
-        </a>
-      
-          
-        </li>
-      
-
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/tabs/">
@@ -3521,6 +3521,21 @@
           
         </li>
       
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/wysiwyg/">
+          
+    
+    <span class="nav-tree__text">
+      WYSIWYG
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
       </ul>
     
           </details>
@@ -4661,21 +4676,6 @@
         </li>
       
 
-        <li class="nav-tree__item  ">
-          
-        <a class="nav-tree__link  " href="/frontend/sass/components/table-sticky/">
-          
-    
-    <span class="nav-tree__text">
-      Table-sticky
-    </span>
-  
-        </a>
-      
-          
-        </li>
-      
-
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/tabs/">

package/docs-dev/sass/helpers/utilities/index.html

@@ -825,6 +825,21 @@
           
         </li>
       
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/wysiwyg/">
+          
+    
+    <span class="nav-tree__text">
+      WYSIWYG
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
       </ul>
     
           </details>
@@ -1965,21 +1980,6 @@
         </li>
       
 
-        <li class="nav-tree__item  ">
-          
-        <a class="nav-tree__link  " href="/frontend/sass/components/table-sticky/">
-          
-    
-    <span class="nav-tree__text">
-      Table-sticky
-    </span>
-  
-        </a>
-      
-          
-        </li>
-      
-
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/tabs/">
@@ -3521,6 +3521,21 @@
           
         </li>
       
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/wysiwyg/">
+          
+    
+    <span class="nav-tree__text">
+      WYSIWYG
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
       </ul>
     
           </details>
@@ -4661,21 +4676,6 @@
         </li>
       
 
-        <li class="nav-tree__item  ">
-          
-        <a class="nav-tree__link  " href="/frontend/sass/components/table-sticky/">
-          
-    
-    <span class="nav-tree__text">
-      Table-sticky
-    </span>
-  
-        </a>
-      
-          
-        </li>
-      
-
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/tabs/">

package/docs-dev/sass/index.html

@@ -825,6 +825,21 @@
           
         </li>
       
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/wysiwyg/">
+          
+    
+    <span class="nav-tree__text">
+      WYSIWYG
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
       </ul>
     
           </details>
@@ -1965,21 +1980,6 @@
         </li>
       
 
-        <li class="nav-tree__item  ">
-          
-        <a class="nav-tree__link  " href="/frontend/sass/components/table-sticky/">
-          
-    
-    <span class="nav-tree__text">
-      Table-sticky
-    </span>
-  
-        </a>
-      
-          
-        </li>
-      
-
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/tabs/">
@@ -3521,6 +3521,21 @@
           
         </li>
       
+
+        <li class="nav-tree__item  ">
+          
+        <a class="nav-tree__link  " href="/frontend/demos/wysiwyg/">
+          
+    
+    <span class="nav-tree__text">
+      WYSIWYG
+    </span>
+  
+        </a>
+      
+          
+        </li>
+      
       </ul>
     
           </details>
@@ -4661,21 +4676,6 @@
         </li>
       
 
-        <li class="nav-tree__item  ">
-          
-        <a class="nav-tree__link  " href="/frontend/sass/components/table-sticky/">
-          
-    
-    <span class="nav-tree__text">
-      Table-sticky
-    </span>
-  
-        </a>
-      
-          
-        </li>
-      
-
         <li class="nav-tree__item  ">
           
         <a class="nav-tree__link  " href="/frontend/sass/components/tabs/">

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ulu/frontend",
-  "version": "0.1.0-beta.85",
+  "version": "0.1.0-beta.87",
   "description": "A versatile SCSS and JavaScript component library offering configurable, accessible components and flexible integration into any project, with SCSS modules suitable for modern JS frameworks.",
   "browser": "js/index.js",
   "main": "index.js",

package/scss/components/_index.scss

@@ -48,7 +48,6 @@
 @forward "hero" as hero-*;
 @forward "tabs" as tabs-*;
 @forward "tag" as tag-*;
-@forward "table-sticky" as table-sticky-*;
 @forward "tile-grid" as tile-grid-*;
 @forward "tile-button" as tile-button-*;
 @forward "tile-grid-overlay" as tile-grid-overlay-*;
@@ -106,7 +105,6 @@
 @use "tabs";
 @use "tag";
 @use "tile-grid";
-@use "table-sticky";
 @use "tile-button";
 @use "tile-grid-overlay";
 @use "vignette";
@@ -161,7 +159,6 @@ $all-includes: (
   "hero",
   "tabs",
   "tag",
-  // "table-sticky", // Has to be included (for vue plugin)
   "tile-grid",
   "tile-button",
   "tile-grid-overlay",
@@ -340,9 +337,6 @@ $current-includes: $all-includes;
   @if (list.index($includes, "tabs")) {
     @include tabs.styles;
   }
-  @if (list.index($includes, "table-sticky")) {
-    @include table-sticky.styles;
-  }
   @if (list.index($includes, "tile-grid")) {
     @include tile-grid.styles;
   }

package/scss/components/_wysiwyg.scss

@@ -13,13 +13,17 @@
 
 /// Module Settings
 /// @type Map
-/// @prop {List} img-excluded-selectors [(".wysiwyg__exclude",)]
-/// @prop {List} ul-excluded-selectors [(".list-lines", ".wysiwyg__exclude")]
-/// @prop {Map} headline-sizes [Map]
+/// @prop {String} exclude-selector [".wysiwyg__exclude"] Applied to all selectors
+/// @prop {List} img-excluded-selectors [()] Extra selectors to prevent <img> styling
+/// @prop {List} ul-excluded-selectors [(".list-lines",)] Extra selectors to prevent <ul> styling
+/// @prop {List} link-excluded-selectors [("[class]",)] Extra selectors to prevent <a> styling
+/// @prop {Map} headline-sizes [Map] Headlines from typography sizes (ElementName : TypographySizeName, ...)
 
 $config: (
-  "img-excluded-selectors" : (".wysiwyg__exclude",),
-  "ul-excluded-selectors" : (".list-lines", ".wysiwyg__exclude"),
+  "exclude-selector" : ".wysiwyg__exclude",
+  "img-excluded-selectors" : (),
+  "ul-excluded-selectors" : (".list-lines",),
+  "link-excluded-selectors" : ("[class]",),
   "headline-sizes" : (
     "h2" : "h2",
     "h3" : "h3",
@@ -66,24 +70,28 @@ $config: (
 
 // Internal mixin
 @mixin _styles() {
-  $ul-excludes: list.join(get("ul-excluded-selectors"), (), $separator: comma);
-  $img-excludes: list.join(get("img-excluded-selectors"), (), $separator: comma);
+  $exclude-selector: get("exclude-selector");
+  $ul-excludes: list.join(get("ul-excluded-selectors"), ($exclude-selector), $separator: comma);
+  $img-excludes: list.join(get("img-excluded-selectors"), ($exclude-selector), $separator: comma);
+  $link-excludes: list.join(get("link-excluded-selectors"), ($exclude-selector), $separator: comma);
 
-  a:not([class]) {
+  a:not(#{ $link-excludes }) {
     @include element.link($visited: true, $active: true);
   }
   ul:not(#{ $ul-excludes }) {
     @include element.styles-unordered-list();
+    margin-bottom: element.get("margin");
   }
-  ol {
+  ol:not(#{ $exclude-selector }) {
     @include element.styles-ordered-list(inherit);
-  }
-  ul,
-  ol {
     margin-bottom: element.get("margin");
   }
+  // ul,
+  // ol {
+  //   margin-bottom: element.get("margin");
+  // }
   @each $element, $size in get("headline-sizes") {
-    #{ $element } {
+    #{ $element }:not(#{ $exclude-selector }) {
       @include typography.size($size);
     }
   }

package/scss/components/_table-sticky.scss

@@ -1,185 +0,0 @@
-////
-/// @group table-sticky
-/// For use with table-sticky plugin (vue) or other framework implementations, not output by default must be enabled.
-////
-
-@use "sass:map";
-@use "sass:meta";
-
-@use "../selector";
-@use "../utils";
-@use "../color";
-@use "../element";
-
-
-// Used for function fallback
-$-fallbacks: (
-  "box-shadow" : (
-    "function" : meta.get-function("get", false, "element"),
-    "property" : "box-shadow"
-  ),
-);
-
-/// Module Settings
-/// @type Map
-/// @prop {CssValue}  box-shadow  [true] Box shadow for controls, defaults to element box-shadow
-
-$config: (
-  "box-shadow": true,
-  "ui-color-disabled": #6490af,
-) !default;
-
-/// Change modules $config
-/// @param {Map} $changes Map of changes
-/// @example scss
-///   @include ulu.component-table-sticky-set(( "property" : value ));
-
-@mixin set($changes) {
-  $config: map.merge($config, $changes) !global;
-}
-
-/// Get a config option
-/// @param {Map} $name Name of property
-/// @example scss
-///   @include ulu.component-table-sticky-get("property");
-
-@function get($name) {
-  $value: utils.require-map-get($config, $name, "table-sticky [config]");
-  @return utils.function-fallback($name, $value, $-fallbacks);
-}
-/// Prints component styles
-/// @demo table-sticky
-/// @example scss
-///  @include ulu.component-table-sticky-styles();
-
-@mixin styles {
-  $prefix: selector.class("table-sticky");
-
-  #{ $prefix } {
-    position: relative; // For controls
-    width: 100%;
-    * {
-      box-sizing: border-box;
-    }
-  }
-  #{ $prefix }__display {
-    overflow-x: auto;
-    overflow-y: hidden;
-    // scroll-behavior: smooth;
-  }
-  #{ $prefix }__table {
-    // border-collapse: collapse;
-    margin: 0;
-    padding: 0;
-    width: 100%;
-  }
-  #{ $prefix }__sticky-wrap {
-    position: sticky;
-    top: -1px;
-    left: 0;
-    width: 100%;
-    z-index: 2;
-    margin-bottom: 200px; // Distance from bottom of table to disable
-    margin-top: -200px; // Distance from bottom of table to disable
-  }
-  #{ $prefix }__sticky-wrap--first-column-header {
-    z-index: 4;
-  }
-  #{ $prefix }__sticky-wrap--controls {
-    margin-top: -52vh;
-    margin-bottom: 52vh;
-  }
-  #{ $prefix }__header-wrap {
-    position: absolute;
-    top: 0;
-    left: 0;
-    right: 0;
-    overflow: hidden;
-  }
-  #{ $prefix }__table--first-column-header,
-  #{ $prefix }__table--first-column {
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: auto !important;
-  }
-  #{ $prefix }__table--first-column {
-    z-index: 3;
-  }
-  #{ $prefix }__table--header {
-    will-change: transform;
-  }
-  #{ $prefix }__hidden-visually {
-    position: absolute;
-    left: -10000px;
-    top: auto;
-    width: 1px;
-    height: 1px;
-    overflow: hidden;
-  }
-  // NOTE: The table caption needs to be positioned normally
-  // as display table-cell. Making absolute for hidden-visually 
-  // is causing chrome to add an anonymous cell to the table resulting in a 1px
-  // cell under the header. Which is messing up alignments. The only solution
-  // without removing the <caption> (not good for WCAG) is to position it at the 
-  // of the table so it doesn't affect the header alignments. Then cropping it to 
-  // a pixel and using negative margin to remove it's pixel from the flow beneath 
-  #{ $prefix }__caption {
-    margin-bottom: -1px;
-    height: 1px;
-    padding: 0 !important;
-    margin: 0 !important;
-    overflow: hidden;
-    display: none;
-  }
-  // Allow initiating scrolling by dragging first column
-  #{ $prefix }--can-scroll-right:not(#{ $prefix }--can-scroll-left) {
-    #{ $prefix }__table--first-column-header,
-    #{ $prefix }__table--first-column {
-      // pointer-events: none;
-      visibility: hidden;
-      // opacity: 0 !important;
-    }
-  }
-  #{ $prefix }__controls {
-    position: absolute;
-    top: 50vh;
-    right: 20px;
-  }
-  #{ $prefix }__controls-inner {
-    display: flex;
-  }
-  #{ $prefix }__control {
-    box-shadow: get("box-shadow");
-  }
-  #{ $prefix }__sort-button {
-    display: flex;
-    align-items: center;
-    font-weight: inherit;
-    font-style: inherit;
-    font-size: inherit;
-  }
-  #{ $prefix }__sort-button--focused {
-    outline: 2px auto Highlight;
-    outline: 2px auto -webkit-focus-ring-color;
-  }
-  #{ $prefix }__sort-icon {
-    margin-left: auto;
-    padding-left: 1em;
-    display: block;
-    opacity: 0.5;
-    .sort-active & {
-      opacity: 1;
-    }
-    .sort-ascending & {
-      #{ $prefix }__sort-icon-inner {
-        transform: rotate(180deg);
-      }
-    }
-  }
-  #{ $prefix }__sort-icon-inner {
-    display: block;
-  }
-}
-
-