From b98c81786d2e76b2b0f95cf1bec6fc6109d4aee7 Mon Sep 17 00:00:00 2001 From: Sam Duncan Date: Wed, 4 Sep 2024 08:26:24 -0500 Subject: [PATCH 1/5] Updating Hashtag kit to use target prop --- .../app/pb_kits/playbook/pb_hashtag/_hashtag.tsx | 16 ++++++++++++++-- .../pb_hashtag/docs/_hashtag_link.html.erb | 2 +- .../playbook/pb_hashtag/docs/_hashtag_link.jsx | 2 +- .../playbook/pb_hashtag/docs/_hashtag_link.md | 2 +- .../pb_kits/playbook/pb_hashtag/hashtag.html.erb | 2 +- .../app/pb_kits/playbook/pb_hashtag/hashtag.rb | 11 +++++++++-- 6 files changed, 27 insertions(+), 8 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_hashtag/_hashtag.tsx b/playbook/app/pb_kits/playbook/pb_hashtag/_hashtag.tsx index 34489a4d86..fd9ae144a1 100644 --- a/playbook/app/pb_kits/playbook/pb_hashtag/_hashtag.tsx +++ b/playbook/app/pb_kits/playbook/pb_hashtag/_hashtag.tsx @@ -1,5 +1,5 @@ /* eslint-disable react/jsx-no-target-blank */ -/* eslint-disable react/no-multi-comp, flowtype/space-before-type-colon */ +/* eslint-disable react/no-multi-comp */ import React from 'react' import classnames from 'classnames' @@ -18,6 +18,7 @@ type HashtagProps = { id?: string, newWindow?: boolean, rel?: string, + target?: string, text?: string, type: "default" | "home" | "project" | "appointment", url?: string, @@ -40,6 +41,7 @@ const Hashtag = (props: HashtagProps) => { id, newWindow, rel, + target, text, type = 'default', url, @@ -50,6 +52,16 @@ const Hashtag = (props: HashtagProps) => { const htmlProps = buildHtmlProps(htmlOptions) const classes = classnames(buildCss('pb_hashtag_kit'), globalProps(props), className) + const getTargetAttribute = () => { + if (target && url) { + return target + } else if (newWindow) { + return '_blank' + } + + return null + } + return ( {
-<%= pb_rails("hashtag", props: {text: "Open in a new Window", url: "https://google.com", type: "project", new_window: true}) %> +<%= pb_rails("hashtag", props: {text: "Open in a new Window", url: "https://google.com", type: "project", target: "_blank"}) %> diff --git a/playbook/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.jsx b/playbook/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.jsx index 94413b760d..90783c99dd 100644 --- a/playbook/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.jsx +++ b/playbook/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.jsx @@ -13,7 +13,7 @@ const HashtagLink = (props) => {

- <%= link_to object.url, target: object.link_option do %> + <%= link_to object.url, target: object.target_option do %> <%= pb_rails("badge", props: { dark: object.dark, variant: "primary", text: object.hashtag_text }) %> <% end %> <% end %> diff --git a/playbook/app/pb_kits/playbook/pb_hashtag/hashtag.rb b/playbook/app/pb_kits/playbook/pb_hashtag/hashtag.rb index 5b03228830..5a79fe5a3e 100644 --- a/playbook/app/pb_kits/playbook/pb_hashtag/hashtag.rb +++ b/playbook/app/pb_kits/playbook/pb_hashtag/hashtag.rb @@ -10,6 +10,7 @@ class Hashtag < Playbook::KitBase values: %w[default project home appointment], default: "default" prop :url + prop :target def classname generate_classname("pb_hastag_kit") @@ -19,8 +20,14 @@ def hashtag_text type_text + text end - def link_option - new_window ? "_blank" : "_self" + def target_option + if target && url + target + elsif new_window + "_blank" + else + "_self" + end end private From 321c059f6e0c53bc39c4fb6a1b980712af190ab8 Mon Sep 17 00:00:00 2001 From: Sam Duncan Date: Wed, 4 Sep 2024 08:28:46 -0500 Subject: [PATCH 2/5] Updating Home Address kit to use target prop --- .../_home_address_street.tsx | 14 ++++++++++++++ .../pb_home_address_street/city_emphasis.html.erb | 1 + .../pb_home_address_street/city_emphasis.rb | 11 +++++++++++ .../docs/_home_address_street_default.html.erb | 1 + .../docs/_home_address_street_emphasis.html.erb | 1 + .../docs/_home_address_street_link.html.erb | 2 +- .../docs/_home_address_street_link.jsx | 2 +- .../docs/_home_address_street_link.md | 2 +- .../pb_home_address_street/home_address_street.rb | 13 +++++++++++++ .../home_adress_street.test.js | 4 ++-- .../street_emphasis.html.erb | 3 ++- .../pb_home_address_street/street_emphasis.rb | 11 +++++++++++ 12 files changed, 59 insertions(+), 6 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx b/playbook/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx index 121e4fe9fc..2ca49c4343 100644 --- a/playbook/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +++ b/playbook/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx @@ -23,6 +23,7 @@ type HomeAddressStreetProps = { homeId: string, houseStyle: string, homeUrl: string, + target: string, newWindow: boolean, state: string, zipcode: string, @@ -42,6 +43,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement => htmlOptions = {}, homeId, homeUrl, + target, newWindow, houseStyle, state, @@ -62,6 +64,17 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement => const dataProps: GenericObject = buildDataProps(data) const ariaProps: GenericObject = buildAriaProps(aria) const htmlProps = buildHtmlProps(htmlOptions) + + const getTargetAttribute = () => { + if (target && homeUrl) { + return target + } else if (newWindow) { + return '_blank' + } + + return null + } + return (
dark={dark} marginRight="xxs" newWindow={newWindow} + target={getTargetAttribute()} text={homeId} type="home" url={homeUrl || '#'} diff --git a/playbook/app/pb_kits/playbook/pb_home_address_street/city_emphasis.html.erb b/playbook/app/pb_kits/playbook/pb_home_address_street/city_emphasis.html.erb index e4dfdbb7c6..3e13b7da0a 100644 --- a/playbook/app/pb_kits/playbook/pb_home_address_street/city_emphasis.html.erb +++ b/playbook/app/pb_kits/playbook/pb_home_address_street/city_emphasis.html.erb @@ -33,6 +33,7 @@ type: "home", dark: object.dark, classname: "home-hashtag", + target: object.target_option, new_window: object.new_window}) %> <% end %> diff --git a/playbook/app/pb_kits/playbook/pb_home_address_street/city_emphasis.rb b/playbook/app/pb_kits/playbook/pb_home_address_street/city_emphasis.rb index d27046e2a1..6a3737d024 100644 --- a/playbook/app/pb_kits/playbook/pb_home_address_street/city_emphasis.rb +++ b/playbook/app/pb_kits/playbook/pb_home_address_street/city_emphasis.rb @@ -10,9 +10,20 @@ class CityEmphasis < Playbook::KitBase prop :home_url prop :new_window, type: Playbook::Props::Boolean, default: false + prop :target prop :territory prop :zip prop :dark, type: Playbook::Props::Boolean, default: false + + def target_option + if target && home_url + target + elsif new_window + "_blank" + else + "_self" + end + end end end end diff --git a/playbook/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.html.erb b/playbook/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.html.erb index a8b88d3809..7e77032899 100644 --- a/playbook/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.html.erb +++ b/playbook/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.html.erb @@ -8,4 +8,5 @@ state: "PA", zipcode: "19382", territory: "PHL", + target: "_blank", }) %> diff --git a/playbook/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.html.erb b/playbook/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.html.erb index 76b806c592..dd57823347 100644 --- a/playbook/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.html.erb +++ b/playbook/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.html.erb @@ -20,6 +20,7 @@ emphasis: "city", home_id: 8250263, home_url: "https://powerhrg.com/", + target: "_blank", house_style: "Colonial", state: "PA", zipcode: "19382", diff --git a/playbook/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.html.erb b/playbook/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.html.erb index bf6243bb1c..3eb5b3f7c9 100644 --- a/playbook/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.html.erb +++ b/playbook/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.html.erb @@ -5,7 +5,7 @@ home_id: 8250263, home_url: "https://powerhrg.com/", house_style: "Colonial", - new_window: true, + target: "_blank", state: "PA", zipcode: "19382", territory: "PHL", diff --git a/playbook/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.jsx b/playbook/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.jsx index c9c4403449..fdc2c2bf9c 100644 --- a/playbook/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.jsx +++ b/playbook/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.jsx @@ -11,8 +11,8 @@ const HomeAddressStreetLink= (props) => { homeId={8250263} homeUrl="https://powerhrg.com/" houseStyle="Colonial" - newWindow state="PA" + target="_blank" territory="PHL" zipcode="19382" {...props} diff --git a/playbook/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.md b/playbook/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.md index 3d77841a91..5e527dc2e5 100644 --- a/playbook/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.md +++ b/playbook/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_link.md @@ -1 +1 @@ -Use the `newWindow` / `new_window` prop to control whether the link opens on the same page or a new tab (same page is the default behavior) \ No newline at end of file +Use the `target` prop to control whether the link opens on the same or a new tab (same page is the default behavior). You can use any [web/standard](https://www.w3schools.com/tags/att_a_target.asp) values or a custom string to specify your link target. \ No newline at end of file diff --git a/playbook/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb b/playbook/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb index ca5de48d59..5790b52bd9 100644 --- a/playbook/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb +++ b/playbook/app/pb_kits/playbook/pb_home_address_street/home_address_street.rb @@ -14,6 +14,7 @@ class HomeAddressStreet < Playbook::KitBase prop :house_style prop :new_window, type: Playbook::Props::Boolean, default: false + prop :target prop :state prop :zipcode prop :territory @@ -55,6 +56,7 @@ def city_emphasis_props dark: dark, home_id: home_id, home_url: home_url, + target: target_option, new_window: new_window, territory: territory, zip: zip, @@ -69,11 +71,22 @@ def street_emphasis_props dark: dark, home_id: home_id, home_url: home_url, + target: target_option, new_window: new_window, territory: territory, } end + def target_option + if target && home_url + target + elsif new_window + "_blank" + else + "_self" + end + end + private def dark_class diff --git a/playbook/app/pb_kits/playbook/pb_home_address_street/home_adress_street.test.js b/playbook/app/pb_kits/playbook/pb_home_address_street/home_adress_street.test.js index 27e663d75e..c6be926409 100644 --- a/playbook/app/pb_kits/playbook/pb_home_address_street/home_adress_street.test.js +++ b/playbook/app/pb_kits/playbook/pb_home_address_street/home_adress_street.test.js @@ -23,10 +23,10 @@ function HomeAdressStreetTest(props) { territory="PHL" zipcode="19382" {...props} - /> + /> ); } - + test("renders the component", () => { render(); const kit = screen.getByTestId("primary-test"); diff --git a/playbook/app/pb_kits/playbook/pb_home_address_street/street_emphasis.html.erb b/playbook/app/pb_kits/playbook/pb_home_address_street/street_emphasis.html.erb index c01f64af7a..4aadc80ee6 100644 --- a/playbook/app/pb_kits/playbook/pb_home_address_street/street_emphasis.html.erb +++ b/playbook/app/pb_kits/playbook/pb_home_address_street/street_emphasis.html.erb @@ -23,7 +23,8 @@ type: "home", dark: object.dark, classname: "home-hashtag", - new_window: object.new_window}) %> + new_window: object.new_window, + target: object.target_option}) %> <% end %> <%= pb_rails "body", props: { color: "light", tag: "span", dark: object.dark } do %> diff --git a/playbook/app/pb_kits/playbook/pb_home_address_street/street_emphasis.rb b/playbook/app/pb_kits/playbook/pb_home_address_street/street_emphasis.rb index 6334cd86fa..34abeb9955 100644 --- a/playbook/app/pb_kits/playbook/pb_home_address_street/street_emphasis.rb +++ b/playbook/app/pb_kits/playbook/pb_home_address_street/street_emphasis.rb @@ -10,9 +10,20 @@ class StreetEmphasis < Playbook::KitBase prop :home_url prop :new_window, type: Playbook::Props::Boolean, default: false + prop :target prop :territory prop :dark, type: Playbook::Props::Boolean, default: false + + def target_option + if target && home_url + target + elsif new_window + "_blank" + else + "_self" + end + end end end end From 9d294e962d11892abd79dc165894d29092f34b7a Mon Sep 17 00:00:00 2001 From: Sam Duncan Date: Wed, 4 Sep 2024 08:29:45 -0500 Subject: [PATCH 3/5] Updating specs to use target --- playbook/spec/pb_kits/playbook/kits/hashtag_spec.rb | 4 ++-- .../spec/pb_kits/playbook/kits/home_address_street_spec.rb | 7 +++++++ 2 files changed, 9 insertions(+), 2 deletions(-) diff --git a/playbook/spec/pb_kits/playbook/kits/hashtag_spec.rb b/playbook/spec/pb_kits/playbook/kits/hashtag_spec.rb index 81f54fe4ee..5789217b86 100644 --- a/playbook/spec/pb_kits/playbook/kits/hashtag_spec.rb +++ b/playbook/spec/pb_kits/playbook/kits/hashtag_spec.rb @@ -28,8 +28,8 @@ describe "#window_target" do it "should allow links to open in a new window", :aggregate_failures do - expect(subject.new({}).link_option).to eq "_self" - expect(subject.new({ new_window: true }).link_option).to eq "_blank" + expect(subject.new({}).target_option).to eq "_self" + expect(subject.new(url: "Google.com", target: "_blank").target_option).to eq "_blank" end end end diff --git a/playbook/spec/pb_kits/playbook/kits/home_address_street_spec.rb b/playbook/spec/pb_kits/playbook/kits/home_address_street_spec.rb index f68a51d0a8..f3a59113a9 100644 --- a/playbook/spec/pb_kits/playbook/kits/home_address_street_spec.rb +++ b/playbook/spec/pb_kits/playbook/kits/home_address_street_spec.rb @@ -28,4 +28,11 @@ expect(subject.new(classname: "additional_class").classname).to eq "pb_home_address_street_kit additional_class" end end + + describe "#window_target" do + it "should allow links to open in a new window", :aggregate_failures do + expect(subject.new({}).target_option).to eq "_self" + expect(subject.new(home_url: "Google.com", target: "_blank").target_option).to eq "_blank" + end + end end From c5b3d99d16e09981b3ba41dcc01af32d5ec0c579 Mon Sep 17 00:00:00 2001 From: Sam Duncan Date: Wed, 4 Sep 2024 13:23:00 -0500 Subject: [PATCH 4/5] Removing target prop calls on unrelated examples --- .../docs/_home_address_street_default.html.erb | 1 - .../docs/_home_address_street_emphasis.html.erb | 1 - 2 files changed, 2 deletions(-) diff --git a/playbook/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.html.erb b/playbook/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.html.erb index 7e77032899..a8b88d3809 100644 --- a/playbook/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.html.erb +++ b/playbook/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_default.html.erb @@ -8,5 +8,4 @@ state: "PA", zipcode: "19382", territory: "PHL", - target: "_blank", }) %> diff --git a/playbook/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.html.erb b/playbook/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.html.erb index dd57823347..76b806c592 100644 --- a/playbook/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.html.erb +++ b/playbook/app/pb_kits/playbook/pb_home_address_street/docs/_home_address_street_emphasis.html.erb @@ -20,7 +20,6 @@ emphasis: "city", home_id: 8250263, home_url: "https://powerhrg.com/", - target: "_blank", house_style: "Colonial", state: "PA", zipcode: "19382", From 2579059fa2f428708c7af3580e7f823ae214102d Mon Sep 17 00:00:00 2001 From: Sam Duncan Date: Fri, 6 Sep 2024 10:50:08 -0500 Subject: [PATCH 5/5] Adding else to return self when other conditions are not met --- playbook/app/pb_kits/playbook/pb_hashtag/_hashtag.tsx | 2 ++ .../playbook/pb_home_address_street/_home_address_street.tsx | 2 ++ 2 files changed, 4 insertions(+) diff --git a/playbook/app/pb_kits/playbook/pb_hashtag/_hashtag.tsx b/playbook/app/pb_kits/playbook/pb_hashtag/_hashtag.tsx index fd9ae144a1..62c9d9dc57 100644 --- a/playbook/app/pb_kits/playbook/pb_hashtag/_hashtag.tsx +++ b/playbook/app/pb_kits/playbook/pb_hashtag/_hashtag.tsx @@ -57,6 +57,8 @@ const Hashtag = (props: HashtagProps) => { return target } else if (newWindow) { return '_blank' + } else { + return '_self' } return null diff --git a/playbook/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx b/playbook/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx index 2ca49c4343..e3598d5ce6 100644 --- a/playbook/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx +++ b/playbook/app/pb_kits/playbook/pb_home_address_street/_home_address_street.tsx @@ -70,6 +70,8 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement => return target } else if (newWindow) { return '_blank' + } else { + return '_self' } return null