From bfff9ed41184089ff12c32f1273d4518c7b50c4f Mon Sep 17 00:00:00 2001
From: Elisa Shapiro <elisashapiro@gmail.com>
Date: Wed, 17 Jul 2024 11:02:02 -0400
Subject: [PATCH] Code and doc example cleanup, playbook tokens work

---
 .../app/pb_kits/playbook/pb_icon/_icon.scss   | 58 +------------------
 .../pb_icon/docs/_icon_color.html.erb         | 11 ++--
 .../playbook/pb_icon/docs/_icon_color.jsx     | 23 ++++++--
 .../playbook/pb_icon/docs/_icon_color.md      |  2 +-
 4 files changed, 26 insertions(+), 68 deletions(-)

diff --git a/playbook/app/pb_kits/playbook/pb_icon/_icon.scss b/playbook/app/pb_kits/playbook/pb_icon/_icon.scss
index 2c463eff3d..8daeff88f0 100644
--- a/playbook/app/pb_kits/playbook/pb_icon/_icon.scss
+++ b/playbook/app/pb_kits/playbook/pb_icon/_icon.scss
@@ -1,5 +1,6 @@
 @import "../tokens/colors";
 
+// All the merges below create $icon_colors, a map of all color tokens in colors.scss
 $merge_kits1: map-merge($status_colors, $category_colors);
 $merge_kits2: map-merge($merge_kits1, $product_colors);
 $merge_kits3: map-merge($merge_kits2, $text_colors);
@@ -15,70 +16,13 @@ $merge_kits12: map-merge($merge_kits11, $status_color_text);
 $merge_kits13: map-merge($merge_kits12, $status_color_text_dark);
 $icon_colors: map-merge($merge_kits13, $colors);
 
-
-// @mixin apply-color-from-class($class-name) {
-  //   $hash-index: str-index($class-name, '#');
-  //   $hexcode: str-slice($class-name, $hash-index + 1, $hash-index + 7);
-  //   color: unquote("#{$hexcode}");
-  // }
-  // @mixin apply-color($hexcode) {
-    //   color: $hexcode;
-    // }
-    
-    // @function sanitize-hex($hex) {
-      //   @return str-slice($hex, 2);
-      // }
-      
-// @use "sass:selector";
-
-// @mixin extractColor($className){
-//   // $startIndex: str-index($className, "color_#") + 7;
-//   // $hexCode: str-slice($className, $startIndex, 7);
-//   $startIndex: str-index($className, "color_#") + 6;
-//   $hexCode: str-slice($className, $startIndex);
-//   color: #{$hexCode};
-// }
-
-// [class^=pb_custom_icon]
-// [class*=pb_icon_kit] {
 .pb_custom_icon, .pb_icon_kit {
   @each $color_name, $color_value in $icon_colors {
     &[class*="#{$color_name}"] {
       color: $color_value;
     }
-    // &.#{$color_name} {
-    //   color: $color_value;
-    // }
   }
-  // @mixin dynamic-color($color) {
-  //   .color_##{$color} {
-  //     @include apply-color($color);
-  //   }
-  // }
-// .pb_custom_icon, .pb_icon_kit {
-  // &[class*="color_#"] {
-    // @debug selector.parse(".color_#");
-    // @debug "color: $hexCode";
-    // @include extractColor(&);
-    // @include extractColor($hexCode);
-    // color: #{$hexCode};
-    // color: #FF0000;
-  // }
-  // &[class*="color_#"] {
-  //   // @include extractColor(&)
-  //   // @include apply-color-from-class(($class-name))
-  //   $current-class: &;
-  //   @include apply-color-from-class($current-class);
-  // }
 }
-// Testing if the str- functions work
-// $className: "color_#FF0000";
-// $startIndex: str-index($className, "color_#") + 6;
-// $hexCode: str-slice($className, $startIndex);
-// [class*="color_#FF0000"] {
-//   color: #{$hexCode};
-// }
-
 
 // Rails custom icon styles
 svg.pb_custom_icon {
diff --git a/playbook/app/pb_kits/playbook/pb_icon/docs/_icon_color.html.erb b/playbook/app/pb_kits/playbook/pb_icon/docs/_icon_color.html.erb
index ea0c678484..ef6a3e36bb 100644
--- a/playbook/app/pb_kits/playbook/pb_icon/docs/_icon_color.html.erb
+++ b/playbook/app/pb_kits/playbook/pb_icon/docs/_icon_color.html.erb
@@ -1,4 +1,7 @@
-<%= pb_rails("icon", props: { icon: "user", fixed_width: true, color: "primary" }) %>
-<%= pb_rails("icon", props: { icon: "user", fixed_width: true, color: "#FF0000" }) %>
-<%= pb_rails("icon", props: { icon: "vial", fixed_width: true, color: "text_lt_lighter" }) %>
-<%= pb_rails("icon", props: { icon: "vial", fixed_width: true, color: "#FF0000" }) %>
\ No newline at end of file
+<%= pb_rails("flex", props: {orientation: "column"}) do %>
+    <%= pb_rails("icon", props: { icon: "user", fixed_width: true, color: "primary", size: "2x" }) %>
+    <%= pb_rails("icon", props: { icon: "recycle", fixed_width: true, color: "info", size: "2x" }) %>
+    <%= pb_rails("icon", props: { icon: "frog", fixed_width: true, color: "data_4", size: "2x" }) %>
+    <%= pb_rails("icon", props: { icon: "vial", fixed_width: true, color: "text_lt_lighter", size: "2x" }) %>
+    <%= pb_rails("icon", props: { icon: "roofing", fixed_width: true, color: "product_roofing", size: "2x" }) %>
+<% end %>
\ No newline at end of file
diff --git a/playbook/app/pb_kits/playbook/pb_icon/docs/_icon_color.jsx b/playbook/app/pb_kits/playbook/pb_icon/docs/_icon_color.jsx
index 0957c1fb95..7540dccd2b 100644
--- a/playbook/app/pb_kits/playbook/pb_icon/docs/_icon_color.jsx
+++ b/playbook/app/pb_kits/playbook/pb_icon/docs/_icon_color.jsx
@@ -3,29 +3,40 @@ import Icon from "../_icon"
 
 const IconDefault = (props) => {
   return (
-    <div>
+    <div style={{ display: "flex", flexDirection: "column"}}>
       <Icon
           color="primary"
           fixedWidth
           icon="user"
+          size="2x"
           {...props}
       />
       <Icon
-          color="#FF0000"
+          color="info"
           fixedWidth
-          icon="user"
+          icon="recycle"
+          size="2x"
           {...props}
       />
       <Icon
-          color="success"
+          color="data_4"
+          fixedWidth
+          icon="frog"
+          size="2x"
+          {...props}
+          />
+      <Icon
+          color="text_lt_lighter"
           fixedWidth
           icon="vial"
+          size="2x"
           {...props}
       />
       <Icon
-          color="#FF0000"
+          color="roofing"
           fixedWidth
-          icon="vial"
+          icon="product-roofing"
+          size="2x"
           {...props}
       />
     </div>
diff --git a/playbook/app/pb_kits/playbook/pb_icon/docs/_icon_color.md b/playbook/app/pb_kits/playbook/pb_icon/docs/_icon_color.md
index 4967ad6e62..2dcc4996e9 100644
--- a/playbook/app/pb_kits/playbook/pb_icon/docs/_icon_color.md
+++ b/playbook/app/pb_kits/playbook/pb_icon/docs/_icon_color.md
@@ -1 +1 @@
-Pass any hex code or Playbook <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">color token</a> to the `color` prop to change any icon's color. 
\ No newline at end of file
+Pass any Playbook <a href="https://playbook.powerapp.cloud/visual_guidelines/colors" target="_blank">color token</a> to the `color` prop to change any icon's color. 
\ No newline at end of file