@progressio_resources/gravity-design-system 3.0.1 → 3.0.3

package/src/lib/assets/json/icons.json

@@ -304,6 +304,22 @@
       "iconName": "gt-icon-copy-xl-32",
       "iconPath": "/assets/gravity/icon-set/gt-icon-copy/gt-icon-copy-xl-32.svg"
     },
+    {
+      "iconName": "gt-icon-deposit-lg-24",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-deposit/gt-icon-deposit-lg-24.svg"
+    },
+    {
+      "iconName": "gt-icon-deposit-md-16",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-deposit/gt-icon-deposit-md-16.svg"
+    },
+    {
+      "iconName": "gt-icon-deposit-sm-12",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-deposit/gt-icon-deposit-sm-12.svg"
+    },
+    {
+      "iconName": "gt-icon-deposit-xl-32",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-deposit/gt-icon-deposit-xl-32.svg"
+    },
     {
       "iconName": "gt-icon-download-lg-24",
       "iconPath": "/assets/gravity/icon-set/gt-icon-download/gt-icon-download-lg-24.svg"
@@ -320,6 +336,22 @@
       "iconName": "gt-icon-download-xl-32",
       "iconPath": "/assets/gravity/icon-set/gt-icon-download/gt-icon-download-xl-32.svg"
     },
+    {
+      "iconName": "gt-icon-exchange-provider-lg-24",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-exchange-provider/gt-icon-exchange-provider-lg-24.svg"
+    },
+    {
+      "iconName": "gt-icon-exchange-provider-md-16",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-exchange-provider/gt-icon-exchange-provider-md-16.svg"
+    },
+    {
+      "iconName": "gt-icon-exchange-provider-sm-12",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-exchange-provider/gt-icon-exchange-provider-sm-12.svg"
+    },
+    {
+      "iconName": "gt-icon-exchange-provider-xl-32",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-exchange-provider/gt-icon-exchange-provider-xl-32.svg"
+    },
     {
       "iconName": "gt-icon-eye-closed-lg-24",
       "iconPath": "/assets/gravity/icon-set/gt-icon-eye-closed/gt-icon-eye-closed-lg-24.svg"
@@ -496,6 +528,22 @@
       "iconName": "gt-icon-more-options-xl-32",
       "iconPath": "/assets/gravity/icon-set/gt-icon-more-options/gt-icon-more-options-xl-32.svg"
     },
+    {
+      "iconName": "gt-icon-new-tab-lg-24",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-new-tab/gt-icon-new-tab-lg-24.svg"
+    },
+    {
+      "iconName": "gt-icon-new-tab-md-16",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-new-tab/gt-icon-new-tab-md-16.svg"
+    },
+    {
+      "iconName": "gt-icon-new-tab-sm-12",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-new-tab/gt-icon-new-tab-sm-12.svg"
+    },
+    {
+      "iconName": "gt-icon-new-tab-xl-32",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-new-tab/gt-icon-new-tab-xl-32.svg"
+    },
     {
       "iconName": "gt-icon-news-lg-24",
       "iconPath": "/assets/gravity/icon-set/gt-icon-news/gt-icon-news-lg-24.svg"
@@ -512,6 +560,22 @@
       "iconName": "gt-icon-news-xl-32",
       "iconPath": "/assets/gravity/icon-set/gt-icon-news/gt-icon-news-xl-32.svg"
     },
+    {
+      "iconName": "gt-icon-payout-lg-24",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-payout/gt-icon-payout-lg-24.svg"
+    },
+    {
+      "iconName": "gt-icon-payout-md-16",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-payout/gt-icon-payout-md-16.svg"
+    },
+    {
+      "iconName": "gt-icon-payout-sm-12",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-payout/gt-icon-payout-sm-12.svg"
+    },
+    {
+      "iconName": "gt-icon-payout-xl-32",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-payout/gt-icon-payout-xl-32.svg"
+    },
     {
       "iconName": "gt-icon-plus-lg-24",
       "iconPath": "/assets/gravity/icon-set/gt-icon-plus/gt-icon-plus-lg-24.svg"
@@ -704,6 +768,38 @@
       "iconName": "gt-icon-swaps-arrow-right-xl-32",
       "iconPath": "/assets/gravity/icon-set/gt-icon-swaps-arrow-right/gt-icon-swaps-arrow-right-xl-32.svg"
     },
+    {
+      "iconName": "gt-icon-switch-lg-24",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-switch/gt-icon-switch-lg-24.svg"
+    },
+    {
+      "iconName": "gt-icon-switch-md-16",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-switch/gt-icon-switch-md-16.svg"
+    },
+    {
+      "iconName": "gt-icon-switch-sm-12",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-switch/gt-icon-switch-sm-12.svg"
+    },
+    {
+      "iconName": "gt-icon-switch-xl-32",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-switch/gt-icon-switch-xl-32.svg"
+    },
+    {
+      "iconName": "gt-icon-tool-lg-24",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-tool/gt-icon-tool-lg-24.svg"
+    },
+    {
+      "iconName": "gt-icon-tool-md-16",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-tool/gt-icon-tool-md-16.svg"
+    },
+    {
+      "iconName": "gt-icon-tool-sm-12",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-tool/gt-icon-tool-sm-12.svg"
+    },
+    {
+      "iconName": "gt-icon-tool-xl-32",
+      "iconPath": "/assets/gravity/icon-set/gt-icon-tool/gt-icon-tool-xl-32.svg"
+    },
     {
       "iconName": "gt-icon-trash-lg-24",
       "iconPath": "/assets/gravity/icon-set/gt-icon-trash/gt-icon-trash-lg-24.svg"

package/src/lib/styles/components/_link.scss

@@ -3,6 +3,7 @@
   cursor: pointer;
   text-decoration: underline;
   text-decoration-color: var(--link-underline-color);
+  padding: 2px 4px;
 
   &:not([disabled]) {
     --link-color: var(--link-active-primary);
@@ -14,7 +15,14 @@
     }
 
     &:active {
-      --link-color: var(--link-pressed-primary);
+      background-color: transparent;
+      border: 0.5px solid var(--link-active-primary);
+      border-radius: 2px;
+    }
+
+    &:visited{
+      --link-color: var(--link-visited-primary);
+      --link-underline-color: var(--link-visited-primary);
     }
   }
 

package/src/lib/styles/foundations/colors/themes/_hero.theme.scss

@@ -225,8 +225,8 @@ $on-bg-table-header-secondary-dark: $n900;
 $bg-table-header-secondary-dark: $n400;
 
 // tooltip
-$on-bg-tooltip-primary-light: $n400;
-$bg-tooltip-primary-light: $n800;
+$on-bg-tooltip-primary-light: $n800;
+$bg-tooltip-primary-light: $n400;
 $on-bg-tooltip-primary-dark: $n900;
 $bg-tooltip-primary-dark: $n400;
 
@@ -394,13 +394,13 @@ $bg-icon-dialog-primary-dark: $n800;
 $link-active-primary-light: $b400;
 $link-hover-primary-light: $b400;
 $bg-link-hover-primary-light: $b800;
-$link-disabled-primary-light: $n700;
-$link-pressed-primary-light: $b200;
+$link-disabled-primary-light: $n600;
+$link-visited-primary-light: $b200;
 $link-active-primary-dark: $b700;
 $link-hover-primary-dark: $b700;
 $bg-link-hover-primary-dark: $n300;
-$link-disabled-primary-dark: $n300;
-$link-pressed-primary-dark: $b600;
+$link-disabled-primary-dark: $n500;
+$link-visited-primary-dark: $n900;
 
 // menu
 $divider-menu-active-primary-light: $n800;

package/src/lib/styles/foundations/colors/tokens/_hero.tokens.scss

@@ -227,7 +227,7 @@
   --link-hover-primary: #{$link-hover-primary-light};
   --bg-link-hover-primary: #{$bg-link-hover-primary-light};
   --link-disabled-primary: #{$link-disabled-primary-light};
-  --link-pressed-primary: #{$link-pressed-primary-light};
+  --link-visited-primary: #{$link-visited-primary-light};
 
   // menu
   --divider-menu-active-primary: #{$divider-menu-active-primary-light};
@@ -552,7 +552,7 @@
   --link-hover-primary: #{$link-hover-primary-dark};
   --bg-link-hover-primary: #{$bg-link-hover-primary-dark};
   --link-disabled-primary: #{$link-disabled-primary-dark};
-  --link-pressed-primary: #{$link-pressed-primary-dark};
+  --link-visited-primary: #{$link-visited-primary-dark};
 
   // menu
   --divider-menu-active-primary: #{$divider-menu-primary-dark};

package/src/lib/vendor/gravity-tooltip/gravity-tooltip.component.sass

@@ -38,6 +38,20 @@
   border-width: 5px
   border-color: var(--bg-tooltip-primary) transparent transparent transparent
 
+\:host.tooltip-top-left::after
+  top: 100%
+  left: 10%
+  margin-left: -5px
+  border-width: 5px
+  border-color: var(--bg-tooltip-primary) transparent transparent transparent
+
+\:host.tooltip-top-right::after
+  top: 100%
+  left: 90%
+  margin-left: -5px
+  border-width: 5px
+  border-color: var(--bg-tooltip-primary) transparent transparent transparent
+
 \:host.tooltip-bottom::after
   bottom: 100%
   left: 50%
@@ -45,6 +59,20 @@
   border-width: 5px
   border-color: transparent transparent var(--bg-tooltip-primary) transparent
 
+\:host.tooltip-bottom-left::after
+  bottom: 100%
+  left: 10%
+  margin-left: -5px
+  border-width: 5px
+  border-color: transparent transparent var(--bg-tooltip-primary) transparent
+
+\:host.tooltip-bottom-right::after
+  bottom: 100%
+  left: 90%
+  margin-left: -5px
+  border-width: 5px
+  border-color: transparent transparent var(--bg-tooltip-primary) transparent
+
 \:host.tooltip-left::after
   top: 50%
   left: 100%
@@ -52,6 +80,20 @@
   border-width: 5px
   border-color: transparent transparent transparent var(--bg-tooltip-primary)
 
+\:host.tooltip-left-top::after
+    top: 10%
+    left: 100%
+    margin-top: -5px
+    border-width: 5px
+    border-color: transparent transparent transparent var(--bg-tooltip-primary)
+
+\:host.tooltip-left-bottom::after
+  top: 90%
+  left: 100%
+  margin-top: -5px
+  border-width: 5px
+  border-color: transparent transparent transparent var(--bg-tooltip-primary)
+
 \:host.tooltip-right::after
   top: 50%
   right: 100%
@@ -59,6 +101,20 @@
   border-width: 5px
   border-color: transparent var(--bg-tooltip-primary) transparent transparent
 
+\:host.tooltip-right-top::after
+  top: 10%
+  right: 100%
+  margin-top: -5px
+  border-width: 5px
+  border-color: transparent var(--bg-tooltip-primary) transparent transparent
+
+\:host.tooltip-right-bottom::after
+  top: 90%
+  right: 100%
+  margin-top: -5px
+  border-width: 5px
+  border-color: transparent var(--bg-tooltip-primary) transparent transparent
+
 // Light
 \:host.tooltip-light::after
   display: none

package/src/lib/vendor/gravity-tooltip/gravity-tooltip.component.ts

@@ -90,7 +90,7 @@ export class GravityTooltipComponent implements OnInit {
       return;
     } else {
       /* Is tooltip outside the visible area */
-      const placements = ['top', 'right', 'bottom', 'left'];
+      const placements = ['top', 'top-left', 'top-right', 'right', 'right-top', 'right-bottom', 'bottom', 'bottom-right', 'bottom-left', 'left', 'left-top', 'left-bottom'];
       let isPlacementSet;
 
       for (const placement of placements) {
@@ -133,28 +133,57 @@ export class GravityTooltipComponent implements OnInit {
     let topStyle;
     let leftStyle;
 
-    if (placement === 'top') {
-      topStyle = (this.elementPosition.top + scrollY) - (tooltipHeight + this.tooltipOffset);
-    }
-
-    if (placement === 'bottom') {
-      topStyle = (this.elementPosition.top + scrollY) + elementHeight + this.tooltipOffset;
-    }
-
-    if (placement === 'top' || placement === 'bottom') {
-      leftStyle = (this.elementPosition.left + elementWidth / 2) - tooltipWidth / 2;
-    }
-
-    if (placement === 'left') {
-      leftStyle = this.elementPosition.left - tooltipWidth - this.tooltipOffset;
-    }
-
-    if (placement === 'right') {
-      leftStyle = this.elementPosition.left + elementWidth + this.tooltipOffset;
-    }
-
-    if (placement === 'left' || placement === 'right') {
-      topStyle = (this.elementPosition.top + scrollY) + elementHeight / 2 - tooltip.clientHeight / 2;
+    switch (placement) {
+      case 'top':
+        topStyle = (this.elementPosition.top + scrollY) - (tooltipHeight + this.tooltipOffset);
+        leftStyle = (this.elementPosition.left + elementWidth / 2) - tooltipWidth / 2;
+        break;
+      case 'top-left':
+        topStyle = (this.elementPosition.top + scrollY) - (tooltipHeight + this.tooltipOffset);
+        leftStyle = (this.elementPosition.left + elementWidth / 2) - (tooltipWidth * 0.1);
+        break;
+      case 'top-right':
+        topStyle = (this.elementPosition.top + scrollY) - (tooltipHeight + this.tooltipOffset);
+        leftStyle = (this.elementPosition.left + elementWidth / 2) - (tooltipWidth * 0.9);
+        break;
+      case 'bottom':
+        topStyle = (this.elementPosition.top + scrollY) + elementHeight + this.tooltipOffset;
+        leftStyle = (this.elementPosition.left + elementWidth / 2) - tooltipWidth / 2;
+        break;
+      case 'bottom-left':
+        topStyle = (this.elementPosition.top + scrollY) + elementHeight + this.tooltipOffset;
+        leftStyle = (this.elementPosition.left + elementWidth / 2) - (tooltipWidth * 0.1);
+        break;
+      case 'bottom-right':
+        topStyle = (this.elementPosition.top + scrollY) + elementHeight + this.tooltipOffset;
+        leftStyle = (this.elementPosition.left + elementWidth / 2) - (tooltipWidth * 0.9);
+        break;
+      case 'left':
+        leftStyle = this.elementPosition.left - tooltipWidth - this.tooltipOffset;
+        topStyle = (this.elementPosition.top + scrollY) + elementHeight / 2 - tooltipHeight / 2;
+        break;
+      case 'left-top':
+        leftStyle = this.elementPosition.left - tooltipWidth - this.tooltipOffset;
+        topStyle = (this.elementPosition.top + scrollY + elementHeight / 2) - (tooltipHeight * 0.1);
+        break;
+      case 'left-bottom':
+        leftStyle = this.elementPosition.left - tooltipWidth - this.tooltipOffset;
+        topStyle = (this.elementPosition.top + scrollY + elementHeight / 2) - (tooltipHeight * 0.9);
+        break;
+      case 'right':
+        leftStyle = this.elementPosition.left + elementWidth + this.tooltipOffset;
+        topStyle = (this.elementPosition.top + scrollY) + elementHeight / 2 - tooltipHeight / 2;
+        break;
+      case 'right-top':
+        leftStyle = this.elementPosition.left + elementWidth + this.tooltipOffset;
+        topStyle = (this.elementPosition.top + scrollY + elementHeight / 2) - (tooltipHeight * 0.1);
+        break;
+      case 'right-bottom':
+        leftStyle = this.elementPosition.left + elementWidth + this.tooltipOffset;
+        topStyle = (this.elementPosition.top + scrollY + elementHeight / 2) - (tooltipHeight * 0.9);
+        break;
+      default:
+        return false;
     }
 
     /* Is tooltip outside the visible area */