[PLAY-1605] Add underline hover prop (#3975)

**What does this PR do?** A clear and concise description with your runway ticket url. Runway https://runway.powerhrg.com/backlog_items/PLAY-1605 Adds underline to the global hover prop which is a boolean which adds `text-decoration: underline` on hover **How to test?** Steps to confirm the desired behavior: 1. Go to https://pr3975.playbook.beta.gm.powerapp.cloud/visual_guidelines/hover 2. Read all the great stuff about the underline option for our global hover prop ![screenshot-localhost_3000-2024_12_05-16_08_09](https://github.com/user-attachments/assets/d77e9a53-bf3b-4a5c-8362-65231a3f3b97)
powerhome · Dec 9, 2024 · 78f9d43 · 78f9d43
1 parent 088e9fd
commit 78f9d43
Show file tree

Hide file tree

Showing 7 changed files with 77 additions and 5 deletions.
diff --git a/playbook-website/app/javascript/components/VisualGuidelines/Examples/Hover.tsx b/playbook-website/app/javascript/components/VisualGuidelines/Examples/Hover.tsx
@@ -18,7 +18,7 @@ import Example from '../Templates/Example'
 
 const shadowArr = ['deep', 'deeper', 'deepest']
 const scaleObj = { 'sm': '@1.05', 'md': '@1.10', 'lg': '@1.15' }
-const visibilityArr = ['true', 'false']
+const bool = ['true', 'false']
 
 const Hover = ({ example }: { example: string }) => (
   <React.Fragment>
@@ -193,7 +193,28 @@ const Hover = ({ example }: { example: string }) => (
                 />
               </td>
               <td>
-                {visibilityArr.map((value) => {
+                {bool.map((value) => {
+                  return (
+                    <Pill
+                      key={value}
+                      text={value}
+                      textTransform="none"
+                      variant="warning"
+                    />
+                  )
+                })}
+              </td>
+            </tr>
+            <tr>
+              <td>
+                <Pill
+                  text="underline"
+                  textTransform="none"
+                  variant="warning"
+                />
+              </td>
+              <td>
+                {bool.map((value) => {
                   return (
                     <Pill
                       key={value}
@@ -237,6 +258,12 @@ const Hover = ({ example }: { example: string }) => (
               gap="sm"
               wrap
             >
+              <Card padding="xs" >
+                <Body
+                  text="Underline"
+                  hover={{ underline: true }}
+                />
+              </Card>
               <Card padding="xs" >
                 <Body
                   text="Text Color"

diff --git a/playbook-website/app/views/pages/code_snippets/hover_jsx.txt b/playbook-website/app/views/pages/code_snippets/hover_jsx.txt
@@ -25,3 +25,8 @@
     hover={{ color: "success" }}
     text='Hover to change color'
 />
+
+<Body
+    hover={{ underline: true }}
+    text='Hover to underline'
+/>
diff --git a/playbook/app/pb_kits/playbook/utilities/_hover.scss b/playbook/app/pb_kits/playbook/utilities/_hover.scss
@@ -20,6 +20,13 @@
   }
 }
 
+@mixin hover-underline {
+  .hover_underline:hover {
+    text-decoration: underline;
+    transition: text-decoration $transition-speed ease;
+  }
+}
+
 @mixin hover-color-classes($colors-list) {
     @each $name, $color in $colors-list {
       .hover_background-#{"" + $name}:hover {
@@ -32,7 +39,9 @@
       }
     }
   }
-
+
+
+  @include hover-underline;
   @include hover-scale-classes($scales);
   @include hover-shadow-classes($box_shadows);
   @include hover-color-classes($product_colors);
@@ -64,4 +73,4 @@
   .group_hover.hover_visibility {
     opacity: 1;
   }
-}
+}
diff --git a/playbook/app/pb_kits/playbook/utilities/globalProps.ts b/playbook/app/pb_kits/playbook/utilities/globalProps.ts
@@ -64,6 +64,7 @@ type Hover = Shadow & {
   background?: string,
   color?: string,
   scale?: "sm" | "md" | "lg",
+  underline?: boolean,
   visibility?: boolean,
 }
 
@@ -236,6 +237,7 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} =
       if (!hover) return css;
       css += hover.shadow ? `hover_shadow_${hover.shadow} ` : '';
       css += hover.background ? `hover_background-${hover.background } ` : '';
+      css += hover.underline ? `hover_underline ` : '';
       css += hover.scale ? `hover_scale_${hover.scale} ` : '';
       css += hover.color ? `hover_color-${hover.color } ` : '';
       css += hover.visibility ? `hover_visibility` : '';

diff --git a/playbook/app/pb_kits/playbook/utilities/test/globalProps/hover.test.js b/playbook/app/pb_kits/playbook/utilities/test/globalProps/hover.test.js
@@ -57,6 +57,19 @@ test('Hover Props: returns proper class name', () => {
   expectedClassName = `hover_scale_xl`;
   expect(kit).toHaveClass(expectedClassName);
 
+  const testIdUnderline = `${testSubject}-hover-underline`;
+  render(
+    <Body
+        data={{ testid: testIdUnderline }}
+        hover={{ underline: true }}
+        text="Hi"
+    />
+  );
+
+  kit = screen.getByTestId(testIdUnderline);
+  expectedClassName = `hover_underline`;
+  expect(kit).toHaveClass(expectedClassName);
+
   const testIdMultiple = `${testSubject}-hover-multiple`;
   render(
     <Body
@@ -66,6 +79,7 @@ test('Hover Props: returns proper class name', () => {
         background: 'error',
         shadow: 'deeper',
         scale: 'xl',
+        underline: true,
       }}
         text="Hi"
     />
@@ -76,4 +90,5 @@ test('Hover Props: returns proper class name', () => {
   expect(kit).toHaveClass('hover_background-error');
   expect(kit).toHaveClass('hover_shadow_deeper');
   expect(kit).toHaveClass('hover_scale_xl');
+  expect(kit).toHaveClass('hover_underline');
 });
diff --git a/playbook/lib/playbook/hover.rb b/playbook/lib/playbook/hover.rb
@@ -29,12 +29,16 @@ def hover_color_values
       []
     end
 
+    def hover_underline_values
+      [true, false]
+    end
+
     def hover_values
       hover_options.keys.select { |sk| try(sk) }
     end
 
     def hover_attributes
-      %w[background shadow scale color]
+      %w[background shadow scale color underline]
     end
 
     def hover_props
@@ -51,6 +55,8 @@ def hover_props
           value.each do |key, val|
             if %i[background color].include?(key)
               css += "#{prefix}_#{key}-#{val} " if hover_attributes.include?(key.to_s)
+            elsif %i[underline].include?(key) && val == true
+              css += "hover_underline "
             elsif hover_attributes.include?(key.to_s) && send("hover_#{key}_values").include?(val.to_s)
               css += "#{prefix}_#{key}_#{val} "
             end

diff --git a/playbook/spec/playbook/global_props/hover_spec.rb b/playbook/spec/playbook/global_props/hover_spec.rb
@@ -25,17 +25,25 @@
         expect(instance.classname).to include("hover_color-#{value}")
       end
 
+      instance = subject.new({ hover: { underline: true } })
+      expect(instance.classname).to include("hover_underline")
+
+      instance = subject.new({ hover: { underline: false } })
+      expect(instance.classname).not_to include("hover_underline")
+
       hover_props = {
         shadow: "deep",
         scale: "sm",
         background: "red",
         color: "blue",
+        underline: true,
       }
       instance = subject.new({ hover: hover_props })
       expect(instance.classname).to include("hover_shadow_deep")
       expect(instance.classname).to include("hover_scale_sm")
       expect(instance.classname).to include("hover_background-red")
       expect(instance.classname).to include("hover_color-blue")
+      expect(instance.classname).to include("hover_underline")
     end
   end
 end