-
Notifications
You must be signed in to change notification settings - Fork 15
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
[PLAY-1603] Add color hover docs and fix background hover (#3874)
**What does this PR do?** A clear and concise description with your runway ticket url. runway https://runway.powerhrg.com/backlog_items/PLAY-1603 Add a "Text Color" hover prop option is the ask in this story because color is already a hover option i just used that. The Background and color hover props weren't working because a lot of our kits are listening for classnames that are "_error", "_success" or "_#{any_color_token}" so i changed the classname to not trigger the pre existing css by making the syntax "hover_color-#{any_color_token}". Doing this to the background kit fixes it too Checkout the page here https://pr3874.playbook.beta.gm.powerapp.cloud/visual_guidelines/hover 
- Loading branch information
1 parent
c97590f
commit caf81f4
Showing
7 changed files
with
178 additions
and
33 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
79 changes: 79 additions & 0 deletions
79
playbook/app/pb_kits/playbook/utilities/test/globalProps/hover.test.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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( | ||
| <Body | ||
| data={{ testid: testIdColor }} | ||
| hover={{ color: 'red' }} | ||
| text="Hi" | ||
| /> | ||
| ); | ||
|
|
||
| let kit = screen.getByTestId(testIdColor); | ||
| let expectedClassName = `hover_color-red`; | ||
| expect(kit).toHaveClass(expectedClassName); | ||
|
|
||
| const testIdBackground = `${testSubject}-hover-background-blue`; | ||
| render( | ||
| <Body | ||
| data={{ testid: testIdBackground }} | ||
| hover={{ background: 'blue' }} | ||
| text="Hi" | ||
| /> | ||
| ); | ||
|
|
||
| kit = screen.getByTestId(testIdBackground); | ||
| expectedClassName = `hover_background-blue`; | ||
| expect(kit).toHaveClass(expectedClassName); | ||
|
|
||
| const testIdShadow = `${testSubject}-hover-shadow-deep`; | ||
| render( | ||
| <Body | ||
| data={{ testid: testIdShadow }} | ||
| hover={{ shadow: 'deep' }} | ||
| text="Hi" | ||
| /> | ||
| ); | ||
|
|
||
| kit = screen.getByTestId(testIdShadow); | ||
| expectedClassName = `hover_shadow_deep`; | ||
| expect(kit).toHaveClass(expectedClassName); | ||
|
|
||
| const testIdScale = `${testSubject}-hover-scale`; | ||
| render( | ||
| <Body | ||
| data={{ testid: testIdScale }} | ||
| hover={{ scale: 'xl' }} | ||
| text="Test" | ||
| /> | ||
| ); | ||
|
|
||
| kit = screen.getByTestId(testIdScale); | ||
| expectedClassName = `hover_scale_xl`; | ||
| expect(kit).toHaveClass(expectedClassName); | ||
|
|
||
| const testIdMultiple = `${testSubject}-hover-multiple`; | ||
| render( | ||
| <Body | ||
| data={{ testid: testIdMultiple }} | ||
| hover={{ | ||
| color: 'green', | ||
| background: 'error', | ||
| shadow: 'deeper', | ||
| scale: 'xl', | ||
| }} | ||
| text="Hi" | ||
| /> | ||
| ); | ||
|
|
||
| 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'); | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 |