diff --git a/playbook-website/app/javascript/components/VisualGuidelines/Examples/Hover.tsx b/playbook-website/app/javascript/components/VisualGuidelines/Examples/Hover.tsx index 92aecb0ae9..5b01d98ac4 100644 --- a/playbook-website/app/javascript/components/VisualGuidelines/Examples/Hover.tsx +++ b/playbook-website/app/javascript/components/VisualGuidelines/Examples/Hover.tsx @@ -109,6 +109,22 @@ const Hover = ({ example }: { example: string }) => ( + + + + + + + + ( gap="sm" wrap > + + + \ No newline at end of file +/> + + diff --git a/playbook/app/pb_kits/playbook/utilities/_hover.scss b/playbook/app/pb_kits/playbook/utilities/_hover.scss index 853d835123..1974908e43 100644 --- a/playbook/app/pb_kits/playbook/utilities/_hover.scss +++ b/playbook/app/pb_kits/playbook/utilities/_hover.scss @@ -2,11 +2,11 @@ @mixin hover-color-classes($colors-list) { @each $name, $color in $colors-list { - .hover_background_#{"" + $name}:hover { + .hover_background-#{"" + $name}:hover { background-color: $color !important; transition: background-color $transition-speed ease; } - .hover_color_#{"" + $name}:hover { + .hover_color-#{"" + $name}:hover { color: $color !important; transition: color $transition-speed ease; } @@ -48,4 +48,4 @@ @include hover-color-classes($hover_colors); @include hover-color-classes($border_colors); @include hover-color-classes($text_colors); - @include hover-color-classes($category_colors); \ No newline at end of file + @include hover-color-classes($category_colors); diff --git a/playbook/app/pb_kits/playbook/utilities/globalProps.ts b/playbook/app/pb_kits/playbook/utilities/globalProps.ts index 9dd67b7223..02338294bc 100644 --- a/playbook/app/pb_kits/playbook/utilities/globalProps.ts +++ b/playbook/app/pb_kits/playbook/utilities/globalProps.ts @@ -213,9 +213,9 @@ const PROP_CATEGORIES: {[key:string]: (props: {[key: string]: any}) => string} = let css = ''; if (!hover) return css; css += hover.shadow ? `hover_shadow_${hover.shadow} ` : ''; - css += hover.background ? `hover_background_${hover.background } ` : ''; + css += hover.background ? `hover_background-${hover.background } ` : ''; css += hover.scale ? `hover_scale_${hover.scale} ` : ''; - css += hover.color ? `hover_color_${hover.color } ` : ''; + css += hover.color ? `hover_color-${hover.color } ` : ''; return css; }, 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 new file mode 100644 index 0000000000..237b279bd4 --- /dev/null +++ b/playbook/app/pb_kits/playbook/utilities/test/globalProps/hover.test.js @@ -0,0 +1,79 @@ +import React from 'react'; +import { render, screen } from '../../test-utils'; +import Body from '../../../pb_body/_body'; + +const testSubject = 'body'; + +test('Hover Props: returns proper class name', () => { + const testIdColor = `${testSubject}-hover-color-red`; + render( + + ); + + let kit = screen.getByTestId(testIdColor); + let expectedClassName = `hover_color-red`; + expect(kit).toHaveClass(expectedClassName); + + const testIdBackground = `${testSubject}-hover-background-blue`; + render( + + ); + + kit = screen.getByTestId(testIdBackground); + expectedClassName = `hover_background-blue`; + expect(kit).toHaveClass(expectedClassName); + + const testIdShadow = `${testSubject}-hover-shadow-deep`; + render( + + ); + + kit = screen.getByTestId(testIdShadow); + expectedClassName = `hover_shadow_deep`; + expect(kit).toHaveClass(expectedClassName); + + const testIdScale = `${testSubject}-hover-scale`; + render( + + ); + + kit = screen.getByTestId(testIdScale); + expectedClassName = `hover_scale_xl`; + expect(kit).toHaveClass(expectedClassName); + + const testIdMultiple = `${testSubject}-hover-multiple`; + render( + + ); + + kit = screen.getByTestId(testIdMultiple); + expect(kit).toHaveClass('hover_color-green'); + expect(kit).toHaveClass('hover_background-error'); + expect(kit).toHaveClass('hover_shadow_deeper'); + expect(kit).toHaveClass('hover_scale_xl'); +}); diff --git a/playbook/lib/playbook/hover.rb b/playbook/lib/playbook/hover.rb index 769947b477..500dee2b05 100644 --- a/playbook/lib/playbook/hover.rb +++ b/playbook/lib/playbook/hover.rb @@ -48,7 +48,7 @@ def hover_props if responsive value.each do |key, val| if %i[background color].include?(key) - css += "#{prefix}_#{key}_#{val} " if hover_attributes.include?(key.to_s) + css += "#{prefix}_#{key}-#{val} " if hover_attributes.include?(key.to_s) 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 new file mode 100644 index 0000000000..7b3be7f19f --- /dev/null +++ b/playbook/spec/playbook/global_props/hover_spec.rb @@ -0,0 +1,41 @@ +# frozen_string_literal: true + +require_relative "../../../app/pb_kits/playbook/pb_body/body" + +RSpec.describe Playbook::PbBody::Body do + subject { Playbook::PbBody::Body } + + describe "#classname" do + it "returns correct hover classnames", :aggregate_failures do + %w[deep deeper deepest].each do |value| + instance = subject.new({ hover: { shadow: value } }) + expect(instance.classname).to include("hover_shadow_#{value}") + end + + %w[sm md lg].each do |value| + instance = subject.new({ hover: { scale: value } }) + expect(instance.classname).to include("hover_scale_#{value}") + end + + %w[red blue green].each do |value| + instance = subject.new({ hover: { background: value } }) + expect(instance.classname).to include("hover_background-#{value}") + + instance = subject.new({ hover: { color: value } }) + expect(instance.classname).to include("hover_color-#{value}") + end + + hover_props = { + shadow: "deep", + scale: "sm", + background: "red", + color: "blue", + } + 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") + end + end +end