@esportsplus/ui 0.6.1 → 0.7.2

package/build/components/link/hover.d.ts

@@ -0,0 +1,10 @@
+declare const _default: ({ attributes, content }: {
+    attributes?: Record<string, any>;
+    content: any;
+}) => {
+    attributes: {
+        class: string;
+    };
+    content: import("@esportsplus/template/build/types").RenderableTemplate;
+};
+export default _default;

package/build/components/link/hover.js

@@ -0,0 +1,17 @@
+import { html } from '@esportsplus/template';
+export default ({ attributes, content }) => {
+    return {
+        attributes: {
+            class: 'link--hover'
+        },
+        content: html `
+            <span class='link-hover link-hover--one' ${attributes}>
+                ${content}
+            </span>
+
+            <span class='link-hover link-hover--two' ${attributes}>
+                ${content}
+            </span>
+        `
+    };
+};

package/build/components/link/index.d.ts

@@ -0,0 +1,12 @@
+declare const _default: {
+    hover: ({ attributes, content }: {
+        attributes?: Record<string, any>;
+        content: any;
+    }) => {
+        attributes: {
+            class: string;
+        };
+        content: import("@esportsplus/template/build/types").RenderableTemplate;
+    };
+};
+export default _default;

package/build/components/link/index.js

@@ -0,0 +1,2 @@
+import hover from './hover';
+export default { hover };

package/build/index.d.ts

@@ -5,6 +5,7 @@ export { default as counter } from './components/counter';
 export { default as ellipsis } from './components/ellipsis';
 export { default as form } from './components/form';
 export { default as json } from './components/json';
+export { default as link } from './components/link';
 export { default as loader } from './components/loader';
 export { default as loading } from './components/loading';
 export { default as magnet } from './components/magnet';

package/build/index.js

@@ -5,6 +5,7 @@ export { default as counter } from './components/counter';
 export { default as ellipsis } from './components/ellipsis';
 export { default as form } from './components/form';
 export { default as json } from './components/json';
+export { default as link } from './components/link';
 export { default as loader } from './components/loader';
 export { default as loading } from './components/loading';
 export { default as magnet } from './components/magnet';

package/components/styles.css

@@ -14,7 +14,7 @@
 .group{display:flex;flex-wrap:wrap;justify-content:flex-start;margin:0 calc(var(--margin-horizontal)/-2);position:relative;width:calc(100% + var(--margin-horizontal))}.group--offset-bottom{margin-bottom:calc(var(--margin-vertical)*-1)}.group--offset-top{margin-top:calc(var(--margin-vertical)*-1)}.group--scroller{flex-flow:row;margin-bottom:calc(var(--scrollbar-width)*-1);overflow-y:hidden;padding-bottom:var(--scrollbar-width)}.group-item{display:flex;margin:var(--margin-vertical) calc(var(--margin-horizontal)/2) 0;position:relative;width:var(--width)}.group-item[class*="--width"]{width:calc(var(--width) - var(--margin-horizontal))}
 .highlight{background:linear-gradient(90deg, var(--background) 50%, transparent 50%) 110% 0/200% 100% no-repeat;background-position:calc((1 - var(--highlight))*110%) 0;transition:background-position .32s}
 .icon{color:var(--color);display:flex;flex:0 0 var(--width);height:var(--height);position:relative;width:var(--width)}.icon svg{color:currentColor;fill:currentColor;height:100%;width:100%}
-.link{align-content:center;background:var(--background);color:var(--color);cursor:pointer;display:flex;flex-wrap:wrap;font-size:var(--font-size);justify-content:flex-start;line-height:var(--line-height);padding:calc(var(--padding-vertical) - var(--border-width)) calc(var(--padding-horizontal) - var(--border-width));position:relative;transition:background var(--transition-duration) ease-in-out,border-color var(--transition-duration) ease-in-out,color var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out;width:var(--width)}.link--underline.--active,.link--underline:not(.--active):hover{text-decoration:underline}
+.link{align-content:center;background:var(--background);color:var(--color);cursor:pointer;display:flex;flex-wrap:wrap;font-size:var(--font-size);justify-content:flex-start;line-height:var(--line-height);padding:calc(var(--padding-vertical) - var(--border-width)) calc(var(--padding-horizontal) - var(--border-width));position:relative;transition:background var(--transition-duration) ease-in-out,border-color var(--transition-duration) ease-in-out,color var(--transition-duration) ease-in-out,opacity var(--transition-duration) ease-in-out;width:var(--width)}.link--hover.tooltip:hover .link-hover--one,.link--hover:not(.--active):hover .link-hover--one{opacity:0;transform:translateY(-75%)}.link--hover.tooltip:hover .link-hover--two,.link--hover:not(.--active):hover .link-hover--two{opacity:1;transform:translate(50%, 50%)}.link--underline.--active,.link--underline:not(.--active):hover{text-decoration:underline}.link-hover{transition:opacity .3s ease-in-out,.3s cubic-bezier(0.23, 0.65, 0.74, 1.09)}.link-hover--one{transform:translateY(0)}.link-hover--two{position:absolute;bottom:50%;right:50%;transform:translate(50%, 50%);opacity:0;padding:0 var(--padding-horizontal);transform:translate(50%, 125%);white-space:nowrap}
 .loader{background-color:var(--color-black-500);bottom:0;left:0;position:fixed;opacity:1;pointer-events:none;right:0;top:0;transition:all .3s ease-in-out;visibility:visible;z-index:9999}.loader--load{animation:.6s .2s ease-in-out 1 both move}.loader--load .loader--load{animation:.6s ease-in-out 1 both move}@keyframes move{0%{transform:translateY(0)}80%{transform:translateY(-102%)}100%{transform:translateY(-102%)}}.loader .loader{background-color:var(--color-black-400)}.loader-content{bottom:auto;left:50%;position:absolute;right:auto;top:50%;transform:translateX(-50%) translateY(-50%)}.loader-logo{color:#fff}.loader-logo--scale{animation:scale .32s 1;animation-fill-mode:both}@keyframes scale{from{opacity:1;transform:scale3d(1, 1, 1)}to{opacity:0;transform:scale3d(1.8, 1.8, 1.8)}}
 .loading{animation:Loading var(--animation-duration) linear infinite;border:var(--border-width) solid color-mix(in srgb, var(--border-color), transparent 90%);border-left-color:var(--border-color);border-radius:100%;height:var(--size);width:var(--size)}@keyframes Loading{0%{transform:rotate(0deg)}100%{transform:rotate(360deg)}}
 .magnet{position:absolute;top:0;left:0;background:var(--background);border-radius:var(--border-radius);height:0;opacity:0;transition:height var(--transition-duration) var(--timing-function),opacity var(--transition-duration) var(--timing-function),transform var(--transition-duration) var(--timing-function),width var(--transition-duration) var(--timing-function);width:0;z-index:-1}

package/package.json

@@ -21,5 +21,5 @@
     },
     "sideEffects": false,
     "types": "build/index.d.ts",
-    "version": "0.6.1"
+    "version": "0.7.2"
 }

package/src/components/link/hover.ts

@@ -0,0 +1,19 @@
+import { html } from '@esportsplus/template';
+
+
+export default ({ attributes, content }: { attributes?: Record<string, any>, content: any }) => {
+    return {
+        attributes: {
+            class: 'link--hover'
+        },
+        content: html`
+            <span class='link-hover link-hover--one' ${attributes}>
+                ${content}
+            </span>
+
+            <span class='link-hover link-hover--two' ${attributes}>
+                ${content}
+            </span>
+        `
+    };
+};

package/src/components/link/index.ts

@@ -0,0 +1,4 @@
+import hover from './hover';
+
+
+export default { hover };

package/src/components/link/scss/index.scss

@@ -1,3 +1,4 @@
+@use '/lib';
 @use '/tokens';
 
 .link {
@@ -20,9 +21,45 @@
     width: var(--width);
 
 
+    &--hover {
+        &.tooltip,
+        &:not(.--active) {
+            &:hover {
+                .link-hover {
+                    &--one {
+                        opacity: 0;
+                        transform: translateY(-75%);
+                    }
+
+                    &--two {
+                        opacity: 1;
+                        transform: translate(50%, 50%);
+                    }
+                }
+            }
+        }
+    }
+
     &--underline {
         @include tokens.state(active hover) {
             text-decoration: underline;
         }
     }
+
+
+    &-hover {
+        transition: opacity 0.3s ease-in-out, 0.3s cubic-bezier(0.23, 0.65, 0.74, 1.09);
+
+        &--one {
+            transform: translateY(0);
+        }
+
+        &--two {
+            @include lib.position(absolute, center);
+            opacity: 0;
+            padding: 0 var(--padding-horizontal);
+            transform: translate(50%, 125%);
+            white-space: nowrap;
+        }
+    }
 }

package/src/components/root/scss/variables.scss

@@ -1,3 +1,4 @@
+@use 'sass:list';
 @use '/lib';
 @use '/tokens';
 
@@ -82,7 +83,7 @@ h1, h2, h3, h4, h5 {
 
 // Loop Through Font Size Keys To Set Header Font Size + Line Height
 $keys: lib.map-keys(tokens.$font-size);
-$i: nth($keys, lib.list-length($keys));
+$i: list.nth($keys, lib.list-length($keys));
 
 @each $h in h1 h2 h3 h4 h5 {
     #{$h} {

package/src/index.ts

@@ -6,6 +6,7 @@ export { default as counter }from './components/counter';
 export { default as ellipsis }from './components/ellipsis';
 export { default as form }from './components/form';
 export { default as json }from './components/json';
+export { default as link }from './components/link';
 export { default as loader }from './components/loader';
 export { default as loading }from './components/loading';
 export { default as magnet }from './components/magnet';

package/src/lib/scss/breakpoint.scss

@@ -10,7 +10,7 @@
         }
     }
     @else if $function == between-width {
-        @media only screen and (min-width: #{nth($param, 1) + 1px}) and (max-width: nth($param, 2)) {
+        @media only screen and (min-width: #{list.nth($param, 1) + 1px}) and (max-width: list.nth($param, 2)) {
             @content;
         }
     }

package/src/lib/scss/css-variables.scss

@@ -1,6 +1,9 @@
+@use 'sass:meta';
+
+
 @mixin css-variables($prefix, $tokens) {
     @each $key, $value in $tokens {
-        @if type-of($value) == 'map' {
+        @if meta.type-of($value) == 'map' {
             @each $subkey, $subvalue in $value {
                 --#{$prefix}-#{$key}-#{$subkey}: #{$subvalue};
             }
@@ -10,4 +13,4 @@
         }
     }
 }
- 
+

package/src/lib/scss/list.scss

@@ -1,4 +1,5 @@
 @use 'sass:list';
+@use 'sass:meta';
 @use 'sass:string';
 
 @forward 'sass:list';
@@ -20,15 +21,15 @@
     $list: unique($list);
     $output: null;
 
-    @if type-of($list) != list {
+    @if meta.type-of($list) != list {
         @error "#{$list} Is Not A Valid List";
     }
 
     @for $i from 1 through list.length($list) {
-        $m: nth($list, $i);
+        $m: list.nth($list, $i);
 
         // If $k Is A List Flatten By Running Through Function Again
-        @if type-of($m) == list {
+        @if meta.type-of($m) == list {
             $output: string.unquote("#{$output}#{$glue}#{implode($glue, $m)}");
         }
         // Piece Together String
@@ -47,7 +48,7 @@
 @function to-list($input) {
     $output: $input;
 
-    @if type-of($input) != list {
+    @if meta.type-of($input) != list {
         $output: ($input,);
     }
 
@@ -57,7 +58,7 @@
 @function unique($list, $recursive: false) {
     $result: ();
 
-    @if type-of($list) != list {
+    @if meta.type-of($list) != list {
         @error "#{$list} Is Not A Valid List";
     }
 

package/src/lib/scss/position.scss

@@ -1,4 +1,6 @@
 @use 'list';
+@use 'sass:meta';
+
 
 @mixin position($position, $value: null) {
     position: $position;
@@ -31,23 +33,23 @@
         bottom: 50%;
         transform: translateY(50%);
     }
-    @else if $value and type-of($value) == list {
+    @else if $value and meta.type-of($value) == list {
         $length: list.length($value);
 
-        @if $length > 0 and nth($value, 1) != null {
-            top: nth($value, 1);
+        @if $length > 0 and list.nth($value, 1) != null {
+            top: list.nth($value, 1);
         }
 
-        @if $length > 1 and nth($value, 2) != null {
-            right: nth($value, 2);
+        @if $length > 1 and list.nth($value, 2) != null {
+            right: list.nth($value, 2);
         }
 
-        @if $length > 2 and nth($value, 3) != null {
-            bottom: nth($value, 3);
+        @if $length > 2 and list.nth($value, 3) != null {
+            bottom: list.nth($value, 3);
         }
 
-        @if $length > 3 and nth($value, 4) != null {
-            left: nth($value, 4);
+        @if $length > 3 and list.nth($value, 4) != null {
+            left: list.nth($value, 4);
         }
     }
 }

package/src/lib/scss/string.scss

@@ -1,4 +1,5 @@
 @use 'list';
+@use 'sass:meta';
 @use 'sass:string';
 
 @forward 'sass:string';
@@ -19,7 +20,7 @@
 }
 
 @function replace($find, $replace, $haystack) {
-    @if type-of($haystack) != string {
+    @if meta.type-of($haystack) != string {
         @error "#{$haystack} Is Not A Valid String";
     }
 

package/src/tokens/scss/state.scss

@@ -18,6 +18,7 @@
  *
  */
 
+@use 'sass:meta';
 @use '../../lib';
 
 $state: (
@@ -39,7 +40,7 @@ $state: (
     // To Avoid Overcomplicating The Responsibility Of This Function Limit
     // Replace Parameter To String Values Only
     @if $replace {
-        @if type-of($replace) != 'string' or type-of($selector) != 'string' {
+        @if meta.type-of($replace) != 'string' or meta.type-of($selector) != 'string' {
             @error "'lib.string-replace' Cannot Be Used On A List!";
         }
 
@@ -69,7 +70,7 @@ $state: (
 @mixin state-utility($class, $property, $values) {
     $keys: $values;
 
-    @if type-of($keys) == 'map' {
+    @if meta.type-of($keys) == 'map' {
         $keys: lib.map-keys($keys);
     }