From cdfaac4c8d1ca5d9602d9142c936734871e68859 Mon Sep 17 00:00:00 2001
From: Marnel Mangrubang <marnel.mangrubang@alaskaair.com>
Date: Thu, 20 Apr 2023 15:37:09 -0700
Subject: [PATCH] fix(styles): fix the auro capitalize function #148

---
 docs/index.html                        |  7 +++---
 src/utilityFunctions/_capitalize.scss  |  5 +++-
 src/utilityMixins/_spacingUtility.scss |  2 +-
 tests/spacing.spec.scss                | 34 +++++++++++++++++++++++++-
 4 files changed, 42 insertions(+), 6 deletions(-)
diff --git a/docs/index.html b/docs/index.html
index 224cc1c..cb8940b 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -1,5 +1,5 @@
-<!doctype html><html lang="en"><head><meta charset="utf-8"><title>@aurodesignsystem/webcorestylesheets - v4.2.0</title><link rel="stylesheet" href="assets/css/main.css"><link href="https://fonts.googleapis.com/css?family=Open+Sans:400,500,700" rel="stylesheet" type="text/css"><meta name="viewport" content="width=device-width"><meta content="IE=edge, chrome=1" http-equiv="X-UA-Compatible"><!-- Open Graph tags --><meta property="og:title" content="@aurodesignsystem/webcorestylesheets - SassDoc"><meta property="og:type" content="website"><meta property="og:description" content="<p>Auro core foundation Sass UI Kit</p>
-"><!-- Thanks to Sass-lang.com for the icons --><link href="assets/images/favicon.png" rel="shortcut icon"></head><body><aside class="sidebar" role="nav"><div class="sidebar__header"><h1 class="sidebar__title">@aurodesignsystem/webcorestylesheets - 4.2.0</h1></div><div class="sidebar__body"><button type="button" class="btn-toggle js-btn-toggle" data-alt="Open all">Close all</button><p class="sidebar__item sidebar__item--heading" data-slug="accessibility"><a href="#accessibility">accessibility</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="accessibility-css"><a href="#accessibility-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="accessibility" data-name=":focus" data-type="css"><a href="#accessibility-css-:focus">:focus</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="animation"><a href="#animation">animation</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="animation-mixin"><a href="#animation-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="animation" data-name="auro_transition" data-type="mixin"><a href="#animation-mixin-auro_transition">auro_transition</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="component-support"><a href="#component-support">component-support</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="component-support-css"><a href="#component-support-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="component-support" data-name=":host" data-type="css"><a href="#component-support-css-:host">:host</a></li><li class="sidebar__item sassdoc__item" data-group="component-support" data-name=":host([hidden]:not(:focus):not(:active))" data-type="css"><a href="#component-support-css-:host([hidden]:not(:focus):not(:active))">:host([hidden]:not(:focus):not(:active))</a></li><li class="sidebar__item sassdoc__item" data-group="component-support" data-name=":host([hiddenVisually]:not(:focus):not(:active))" data-type="css"><a href="#component-support-css-:host([hiddenVisually]:not(:focus):not(:active))">:host([hiddenVisually]:not(:focus):not(:active))</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="core"><a href="#core">core</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="core-css"><a href="#core-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="core" data-name="#{$sym}#{$prefix}#{$scope}blockquote" data-type="css"><a href="#core-css-#{$sym}#{$prefix}#{$scope}blockquote">#{$sym}#{$prefix}#{$scope}blockquote</a></li><li class="sidebar__item sassdoc__item" data-group="core" data-name="#{$scope} *" data-type="css"><a href="#core-css-#{$scope} *">#{$scope} *</a></li><li class="sidebar__item sassdoc__item" data-group="core" data-name="#{$sym}#{$prefix}picture#{$scope}" data-type="css"><a href="#core-css-#{$sym}#{$prefix}picture#{$scope}">#{$sym}#{$prefix}picture#{$scope}</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="essentials"><a href="#essentials">essentials</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="essentials-css"><a href="#essentials-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="essentials" data-name="#{$sym}#{$prefix}html#{$scope}" data-type="css"><a href="#essentials-css-#{$sym}#{$prefix}html#{$scope}">#{$sym}#{$prefix}html#{$scope}</a></li><li class="sidebar__item sassdoc__item" data-group="essentials" data-name="#{$scope}#{$sym}#{$prefix}body,
+<!doctype html><html lang="en"><head><meta charset="utf-8"><title>@aurodesignsystem/webcorestylesheets - v4.3.0</title><link rel="stylesheet" href="assets/css/main.css"><link href="https://fonts.googleapis.com/css?family=Open+Sans:400,500,700" rel="stylesheet" type="text/css"><meta name="viewport" content="width=device-width"><meta content="IE=edge, chrome=1" http-equiv="X-UA-Compatible"><!-- Open Graph tags --><meta property="og:title" content="@aurodesignsystem/webcorestylesheets - SassDoc"><meta property="og:type" content="website"><meta property="og:description" content="<p>Auro core foundation Sass UI Kit</p>
+"><!-- Thanks to Sass-lang.com for the icons --><link href="assets/images/favicon.png" rel="shortcut icon"></head><body><aside class="sidebar" role="nav"><div class="sidebar__header"><h1 class="sidebar__title">@aurodesignsystem/webcorestylesheets - 4.3.0</h1></div><div class="sidebar__body"><button type="button" class="btn-toggle js-btn-toggle" data-alt="Open all">Close all</button><p class="sidebar__item sidebar__item--heading" data-slug="accessibility"><a href="#accessibility">accessibility</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="accessibility-css"><a href="#accessibility-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="accessibility" data-name=":focus" data-type="css"><a href="#accessibility-css-:focus">:focus</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="animation"><a href="#animation">animation</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="animation-mixin"><a href="#animation-mixin">mixins</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="animation" data-name="auro_transition" data-type="mixin"><a href="#animation-mixin-auro_transition">auro_transition</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="component-support"><a href="#component-support">component-support</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="component-support-css"><a href="#component-support-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="component-support" data-name=":host" data-type="css"><a href="#component-support-css-:host">:host</a></li><li class="sidebar__item sassdoc__item" data-group="component-support" data-name=":host([hidden]:not(:focus):not(:active))" data-type="css"><a href="#component-support-css-:host([hidden]:not(:focus):not(:active))">:host([hidden]:not(:focus):not(:active))</a></li><li class="sidebar__item sassdoc__item" data-group="component-support" data-name=":host([hiddenVisually]:not(:focus):not(:active))" data-type="css"><a href="#component-support-css-:host([hiddenVisually]:not(:focus):not(:active))">:host([hiddenVisually]:not(:focus):not(:active))</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="core"><a href="#core">core</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="core-css"><a href="#core-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="core" data-name="#{$sym}#{$prefix}#{$scope}blockquote" data-type="css"><a href="#core-css-#{$sym}#{$prefix}#{$scope}blockquote">#{$sym}#{$prefix}#{$scope}blockquote</a></li><li class="sidebar__item sassdoc__item" data-group="core" data-name="#{$scope} *" data-type="css"><a href="#core-css-#{$scope} *">#{$scope} *</a></li><li class="sidebar__item sassdoc__item" data-group="core" data-name="#{$sym}#{$prefix}picture#{$scope}" data-type="css"><a href="#core-css-#{$sym}#{$prefix}picture#{$scope}">#{$sym}#{$prefix}picture#{$scope}</a></li></ul></div><p class="sidebar__item sidebar__item--heading" data-slug="essentials"><a href="#essentials">essentials</a></p><div><p class="sidebar__item sidebar__item--sub-heading" data-slug="essentials-css"><a href="#essentials-css">css</a></p><ul class="list-unstyled"><li class="sidebar__item sassdoc__item" data-group="essentials" data-name="#{$sym}#{$prefix}html#{$scope}" data-type="css"><a href="#essentials-css-#{$sym}#{$prefix}html#{$scope}">#{$sym}#{$prefix}html#{$scope}</a></li><li class="sidebar__item sassdoc__item" data-group="essentials" data-name="#{$scope}#{$sym}#{$prefix}body,
 #{$scope}.#{$prefix}baseType" data-type="css"><a href="#essentials-css-#{$scope}#{$sym}#{$prefix}body,
 #{$scope}.#{$prefix}baseType">#{$scope}#{$sym}#{$prefix}body, #{$scope}.#{$prefix}baseType</a></li><li class="sidebar__item sassdoc__item" data-group="essentials" data-name="#{$scope}.#{$prefix}baseParagraph" data-type="css"><a href="#essentials-css-#{$scope}.#{$prefix}baseParagraph">#{$scope}.#{$prefix}baseParagraph</a></li><li class="sidebar__item sassdoc__item" data-group="essentials" data-name="#{$scope}.#{$prefix}hyperlink" data-type="css"><a href="#essentials-css-#{$scope}.#{$prefix}hyperlink">#{$scope}.#{$prefix}hyperlink</a></li><li class="sidebar__item sassdoc__item" data-group="essentials" data-name="#{$scope}#{$sym}#{$prefix}img" data-type="css"><a href="#essentials-css-#{$scope}#{$sym}#{$prefix}img">#{$scope}#{$sym}#{$prefix}img</a></li><li class="sidebar__item sassdoc__item" data-group="essentials" data-name="#{$scope}#{$sym}#{$prefix}small,
 #{$scope}.#{$prefix}type--small" data-type="css"><a href="#essentials-css-#{$scope}#{$sym}#{$prefix}small,
@@ -885,6 +885,7 @@
           @for $i from 1 through length($properties) {
             $direction: nth($directions, $i);
             $property: nth($properties, $i);
+            @warn &quot;property = #{$property} | value = #{$value}&quot;;
             #{$scope}.#{$prefix}util_#{$type}#{auro_capitalize($property)}#{auro_capitalize($value)}--#{$direction} {
               #{$property}-#{$direction}: $var $important;
             }
@@ -1155,4 +1156,4 @@
   white-space: nowrap $important;
 }</code>" data-collapsed="#{$scope}.#{$prefix}util_nowrap { ... }"><code>#{$scope}.#{$prefix}util_nowrap { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Utility class force no wrap on content</p><p><a href="/#utility-variable-important">Manage</a> <code>!important</code> flag.</p><p><a href="/#scope-prefix-variable">Manage</a> <code>$scope</code> and <code>$prefix</code> options.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Default selector(s)</p></div><pre class="example__code language-scss"><code>.util_nowrap {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Selector(s) when $scope: true;</p></div><pre class="example__code language-scss"><code>.auro .util_nowrap {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Selector(s) when $prefix: true;</p></div><pre class="example__code language-scss"><code>.auro_util_nowrap {}</code></pre></div><div class="item__example example"><div class="example__description"><p>import mixin file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/typeProperties&quot;;</code></pre></div></section><section class="main__item container item" id="utility-type-css-#{$scope}.#{$prefix}util_capitalize"><h3 class="item__heading"><a class="item__name" href="#css-#{$scope}.#{$prefix}util_capitalize">#{$scope}.#{$prefix}util_capitalize</a></h3><div class="item__code-wrapper"><pre class="item__code item__code--togglable language-scss" data-current-state="collapsed" data-expanded="<code>#{$scope}.#{$prefix}util_capitalize {
   text-transform: capitalize $important;
-}</code>" data-collapsed="#{$scope}.#{$prefix}util_capitalize { ... }"><code>#{$scope}.#{$prefix}util_capitalize { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Utility class to capitalize a string</p><p><a href="/#utility-variable-important">Manage</a> <code>!important</code> flag.</p><p><a href="/#scope-prefix-variable">Manage</a> <code>$scope</code> and <code>$prefix</code> options.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Default selector(s)</p></div><pre class="example__code language-scss"><code>.util_capitalize {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Selector(s) when $scope: true;</p></div><pre class="example__code language-scss"><code>.auro .util_capitalize {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Selector(s) when $prefix: true;</p></div><pre class="example__code language-scss"><code>.auro_util_capitalize {}</code></pre></div><div class="item__example example"><div class="example__description"><p>import mixin file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/typeProperties&quot;;</code></pre></div></section></section></section><footer class="footer" role="contentinfo"><div class="container"><div class="footer__project-info project-info"><!-- Name and URL --> <span class="project-info__name">@aurodesignsystem/webcorestylesheets</span><!-- Version --> <span class="project-info__version">- v4.2.0</span><!-- License --> <span class="project-info__license">, under Apache-2.0</span></div><a class="footer__watermark" href="http://sassdoc.com"><img src="assets/images/logo_light_inline.svg" alt="SassDoc Logo"></a></div></footer></article><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.min.js"><\/script>')</script><script src="assets/js/main.min.js"></script></body></html>
\ No newline at end of file
+}</code>" data-collapsed="#{$scope}.#{$prefix}util_capitalize { ... }"><code>#{$scope}.#{$prefix}util_capitalize { ... }</code></pre></div><h3 class="item__sub-heading">Description</h3><div class="item__description"><p>Utility class to capitalize a string</p><p><a href="/#utility-variable-important">Manage</a> <code>!important</code> flag.</p><p><a href="/#scope-prefix-variable">Manage</a> <code>$scope</code> and <code>$prefix</code> options.</p></div><h3 class="item__sub-heading">Example</h3><div class="item__example example"><div class="example__description"><p>Default selector(s)</p></div><pre class="example__code language-scss"><code>.util_capitalize {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Selector(s) when $scope: true;</p></div><pre class="example__code language-scss"><code>.auro .util_capitalize {}</code></pre></div><div class="item__example example"><div class="example__description"><p>Selector(s) when $prefix: true;</p></div><pre class="example__code language-scss"><code>.auro_util_capitalize {}</code></pre></div><div class="item__example example"><div class="example__description"><p>import mixin file</p></div><pre class="example__code language-scss"><code>@import &quot;./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityClasses/typeProperties&quot;;</code></pre></div></section></section></section><footer class="footer" role="contentinfo"><div class="container"><div class="footer__project-info project-info"><!-- Name and URL --> <span class="project-info__name">@aurodesignsystem/webcorestylesheets</span><!-- Version --> <span class="project-info__version">- v4.3.0</span><!-- License --> <span class="project-info__license">, under Apache-2.0</span></div><a class="footer__watermark" href="http://sassdoc.com"><img src="assets/images/logo_light_inline.svg" alt="SassDoc Logo"></a></div></footer></article><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><script>window.jQuery || document.write('<script src="assets/js/vendor/jquery.min.js"><\/script>')</script><script src="assets/js/main.min.js"></script></body></html>
\ No newline at end of file
diff --git a/src/utilityFunctions/_capitalize.scss b/src/utilityFunctions/_capitalize.scss
index b344e74..bd00c24 100644
--- a/src/utilityFunctions/_capitalize.scss
+++ b/src/utilityFunctions/_capitalize.scss
@@ -13,5 +13,8 @@
 ///   @import "./node_modules/@aurodesignsystem/webcorestylesheets/dist/utilityFunctions/capitalize";
 
 @function auro_capitalize($string) {
-  @return to-upper-case(str-slice($string, 1, 1)) + str-slice($string, 2);
+  @if type-of($string) == string {
+    @return to-upper-case(str-slice($string, 1, 1)) + str-slice($string, 2);
+  }
+  @return #{$string};
 }
diff --git a/src/utilityMixins/_spacingUtility.scss b/src/utilityMixins/_spacingUtility.scss
index 22bda1e..824ef33 100644
--- a/src/utilityMixins/_spacingUtility.scss
+++ b/src/utilityMixins/_spacingUtility.scss
@@ -50,7 +50,7 @@ $auro-spacing-properties: padding, padding, margin, margin !default;
   @each $type in $types {
     @each $value in $options {
       $map: map-keys($tokens);
-      $var: auro_map-deep-get($tokens, #{$map}, $value);
+      $var: auro_map-deep-get($tokens, #{$map}, #{$value});
       $directions: null;
       $properties: null;
 
diff --git a/tests/spacing.spec.scss b/tests/spacing.spec.scss
index f7e0efc..14d51ff 100644
--- a/tests/spacing.spec.scss
+++ b/tests/spacing.spec.scss
@@ -4,7 +4,7 @@
 @import 'true';
 
 $auro-spacing-types: inline;
-$auro-spacing-options: sm, lg;
+$auro-spacing-options: sm, lg, 25, 1000;
 @import "./src/utilityMixins/spacingUtility";
 
 @include describe('auro_spacing()') {
@@ -46,6 +46,38 @@ $auro-spacing-options: sm, lg;
         .util_inlineMarginLg--right {
           margin-right: 1.5rem;
         }
+
+        .util_inlinePadding25--left {
+          padding-left: 0.125rem;
+        }
+
+        .util_inlinePadding25--right {
+          padding-right: 0.125rem;
+        }
+
+        .util_inlineMargin25--left {
+          margin-left: 0.125rem;
+        }
+
+        .util_inlineMargin25--right {
+          margin-right: 0.125rem;
+        }
+
+        .util_inlinePadding1000--left {
+          padding-left: 5rem;
+        }
+
+        .util_inlinePadding1000--right {
+          padding-right: 5rem;
+        }
+
+        .util_inlineMargin1000--left {
+          margin-left: 5rem;
+        }
+
+        .util_inlineMargin1000--right {
+          margin-right: 5rem;
+        }
       }
     }
   }
