fix: update small CTA to adjust content alignment #191

There was mainly an issue with the placement of an icon within the small
CTA use case. The update allows for easier management of the additional
content.

A couple stylelint rules were slightly adjusted to allow for new code
without having to also do a code refactor to meet linting needs.

Changes to be committed:
modified:   .stylelintrc
modified:   src/style.scss

.stylelintrc

@@ -95,8 +95,8 @@
     "selector-id-pattern": "^[a-z][a-zA-Z0-9]+$",
     "selector-max-attribute": 1,
     "selector-max-class": 1,
-    "selector-max-combinators": 1,
-    "selector-max-compound-selectors": 2,
+    "selector-max-combinators": 2,
+    "selector-max-compound-selectors": 3,
     "selector-max-id": 1,
     "selector-max-pseudo-class": 2,
     "selector-max-type": 1,

src/style.scss

@@ -109,7 +109,7 @@
     font-family: var(--ds-font-family-default, $ds-font-family-default);
     font-size: var(--ds-text-body-size-default, $ds-text-body-size-default);
     font-weight: var(--ds-text-body-default-weight, $ds-text-body-default-weight);
-    
+
     min-height: var(--ds-size-600, $ds-size-600);
     max-height: var(--ds-size-600, $ds-size-600);
 
@@ -212,16 +212,22 @@
 :host([small][type='cta']),
 :host([small='true'][type='cta']) {
   .hyperlink--cta {
+    display: flex;
+
     min-width: unset;
 
     min-height: 2.25rem;
     max-height: 2.25rem;
 
     padding: var(--ds-size-100, $ds-size-100) var(--ds-size-200, $ds-size-200);
-  
-    line-height: 1.3; // Arbitrary value to align the text vertically, matching auro-button 
-    
+
+    line-height: var(--ds-unitless-scale-140, $ds-unitless-scale-140);
+
     font-size: var(--ds-text-body-size-sm, $ds-text-body-size-sm);
+
+    svg {
+      top: unset;
+    }
   }
 }
 
@@ -230,6 +236,6 @@ svg {
   --auro-size-lg: 1rem;
 
   position: relative;
-  top: 4px;
+  top: 2px;
   margin-left: var(--ds-size-25, $ds-size-25);
 }