From 63667c9e679d12e4868344378249fb84c3b18e8c Mon Sep 17 00:00:00 2001
From: William Killerud <william@killerud.com>
Date: Wed, 23 Mar 2022 11:35:36 +0100
Subject: [PATCH] refactor: rydd opp i plassering og navn blant
 motion-funksjoner
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

BREAKING CHANGE:
Maps fra motion er gjort private, jkl-motion er nå easing, jkl-timing er nå timing.
---
 packages/core/functions/_convert.scss | 12 ++++++++++
 packages/core/functions/_easing.scss  | 16 +++++++++++++
 packages/core/functions/_index.scss   |  2 ++
 packages/core/functions/_timing.scss  | 16 +++++++++++++
 packages/core/mixins/_helpers.scss    | 12 ----------
 packages/core/mixins/_motion.scss     | 34 +++------------------------
 packages/core/styles/_labels.scss     |  5 ++--
 7 files changed, 51 insertions(+), 46 deletions(-)
 create mode 100644 packages/core/functions/_easing.scss
 create mode 100644 packages/core/functions/_timing.scss

diff --git a/packages/core/functions/_convert.scss b/packages/core/functions/_convert.scss
index d113dce8e27..e11b586ba38 100644
--- a/packages/core/functions/_convert.scss
+++ b/packages/core/functions/_convert.scss
@@ -1,3 +1,4 @@
+@use "sass:color";
 @use "sass:map";
 @use "sass:math";
 @use "sass:string";
@@ -87,3 +88,14 @@
 
     @return $value * map.get($units, $unit);
 }
+
+@function urlencodecolor($color) {
+    @if type-of($color) == "color" and str-index(#{$color}, "#") == 1 {
+        $hex: string.slice(color.ie-hex-str($color), 4);
+        $converted-color: string.unquote("#{$hex}");
+
+        @return "%23" + $converted-color;
+    }
+
+    @return $color;
+}
diff --git a/packages/core/functions/_easing.scss b/packages/core/functions/_easing.scss
new file mode 100644
index 00000000000..b450f87349e
--- /dev/null
+++ b/packages/core/functions/_easing.scss
@@ -0,0 +1,16 @@
+@use "sass:map";
+
+$_easings: (
+    "standard": ease,
+    "entrance": ease-out,
+    "exit": ease-in,
+    "easeInBounceOut": cubic-bezier(0, 0, 0.375, 1.17),
+);
+
+@function easing($name, $easings: $_easings) {
+    @if map.has-key($easings, $name) {
+        @return map.get($easings, $name);
+    } @else {
+        @error 'Unable to find an easing named #{$name} in our supported easings.';
+    }
+}
diff --git a/packages/core/functions/_index.scss b/packages/core/functions/_index.scss
index 031f59824bf..1ca75da1e1a 100644
--- a/packages/core/functions/_index.scss
+++ b/packages/core/functions/_index.scss
@@ -1,2 +1,4 @@
 @forward "convert";
+@forward "easing";
+@forward "timing";
 @forward "responsive-units";
diff --git a/packages/core/functions/_timing.scss b/packages/core/functions/_timing.scss
new file mode 100644
index 00000000000..ed79ae344ff
--- /dev/null
+++ b/packages/core/functions/_timing.scss
@@ -0,0 +1,16 @@
+@use "sass:map";
+
+$_timings: (
+    "energetic": 75ms,
+    "productive": 150ms,
+    "expressive": 250ms,
+    "lazy": 400ms,
+);
+
+@function timing($mode, $timings: $_timings) {
+    @if map.has-key($timings, $mode) {
+        @return map.get($timings, $mode);
+    } @else {
+        @error 'Unable to find a mode for #{$mode}';
+    }
+}
diff --git a/packages/core/mixins/_helpers.scss b/packages/core/mixins/_helpers.scss
index d1bc1f07251..09f0038031a 100644
--- a/packages/core/mixins/_helpers.scss
+++ b/packages/core/mixins/_helpers.scss
@@ -1,5 +1,4 @@
 @use "sass:string";
-@use "sass:color";
 @use "../variables/typography";
 
 @mixin light-mode-variables {
@@ -26,17 +25,6 @@
     }
 }
 
-@function urlencodecolor($color) {
-    @if type-of($color) == "color" and str-index(#{$color}, "#") == 1 {
-        $hex: string.slice(color.ie-hex-str($color), 4);
-        $converted-color: string.unquote("#{$hex}");
-
-        @return "%23" + $converted-color;
-    }
-
-    @return $color;
-}
-
 @mixin flex($align-items: center, $justify-content: center) {
     display: flex;
     align-items: $align-items;
diff --git a/packages/core/mixins/_motion.scss b/packages/core/mixins/_motion.scss
index bfe180c6583..e5281627aa5 100644
--- a/packages/core/mixins/_motion.scss
+++ b/packages/core/mixins/_motion.scss
@@ -1,34 +1,6 @@
-$jkl--easings: (
-    "standard": ease,
-    "entrance": ease-out,
-    "exit": ease-in,
-    "easeInBounceOut": cubic-bezier(0, 0, 0.375, 1.17),
-);
-
-$jkl--timings: (
-    "energetic": 75ms,
-    "productive": 150ms,
-    "expressive": 250ms,
-    "lazy": 400ms,
-);
-
-@function jkl-motion($name, $easings: $jkl--easings) {
-    @if map-has-key($easings, $name) {
-        @return map-get($easings, $name);
-    } @else {
-        @error 'Unable to find an easing named #{$name} in our supported easings.';
-    }
-}
-
-@function jkl-timing($mode, $timings: $jkl--timings) {
-    @if map-has-key($timings, $mode) {
-        @return map-get($timings, $mode);
-    } @else {
-        @error 'Unable to find a mode for #{$mode}';
-    }
-}
+@use "../functions";
 
 @mixin motion($name: "standard", $mode: "productive") {
-    transition-timing-function: jkl-motion($name);
-    transition-duration: jkl-timing($mode);
+    transition-timing-function: functions.easing($name);
+    transition-duration: functions.timing($mode);
 }
diff --git a/packages/core/styles/_labels.scss b/packages/core/styles/_labels.scss
index 0cf713ccab4..04e2eea7efd 100644
--- a/packages/core/styles/_labels.scss
+++ b/packages/core/styles/_labels.scss
@@ -1,4 +1,3 @@
-@use "sass:map";
 @use "../jkl";
 
 @include jkl.light-mode-variables {
@@ -50,8 +49,8 @@
         color: var(--label-error-color);
 
         .jkl-form-support-label__icon {
-            animation: map.get(jkl.$jkl--timings, "lazy") cubic-bezier(0, 0, 0.3, 1)
-                map.get(jkl.$jkl--timings, "expressive") jkl-support-label-icon-entrance forwards;
+            animation: jkl.timing("lazy") cubic-bezier(0, 0, 0.3, 1) jkl.timing("expressive")
+                jkl-support-label-icon-entrance forwards;
         }
     }