[PLAY-1421] Add all target options to the Hashtag and Home Address St…

…reet Kits (#3650)

**What does this PR do?** A clear and concise description with your
runway ticket url.
https://runway.powerhrg.com/backlog_items/PLAY-1421

Adding 'Target' prop to the Hashtag and Home Address Street kits. Also
updates examples, docs, and tests where appropriate for these changes.

**Screenshots:** Screenshots to visualize your addition/change


**How to test?** Steps to confirm the desired behavior:
1. Go to '...'
2. Click on '....'
3. Scroll down to '....'
4. See addition/change


#### Checklist:
- [ ] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new
kit`, `deprecated`, or `breaking`. See [Changelog &
Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels)
for details.
- [ ] **DEPLOY** I have added the `milano` label to show I'm ready for a
review.
- [ ] **TESTS** I have added test coverage to my code.

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,18 @@ 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'
+    } else {
+      return '_self'
+    }
+
+    return null
+  }
+
   return (
     <span
         {...ariaProps}
@@ -61,7 +75,7 @@ const Hashtag = (props: HashtagProps) => {
       <a
           href={url}
           rel={(newWindow ? "noreferrer" : rel)}
-          target={(newWindow ? '_blank' : '_self')}
+          target={getTargetAttribute()}
       >
         <Badge
             dark={dark}

playbook/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.html.erb

@@ -2,4 +2,4 @@
 
 <br/><br/>
 
-<%= 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"}) %>

playbook/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_link.jsx

@@ -13,7 +13,7 @@ const HashtagLink = (props) => {
       <br />
       <br />
       <Hashtag
-          newWindow
+          target="_blank"
           text="Open in a new window"
           type="project"
           url="https://google.com"

playbook/app/pb_kits/playbook/pb_hashtag/docs/_hashtag_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)
+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.

playbook/app/pb_kits/playbook/pb_hashtag/hashtag.html.erb

@@ -1,5 +1,5 @@
 <%= pb_content_tag(:span) do %>
-  <%= 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 %>

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

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,19 @@ 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'
+    } else {
+      return '_self'
+    }
+
+    return null
+  }
+
   return (
     <div
         className={classes(className, dark)}
@@ -120,6 +135,7 @@ const HomeAddressStreet = (props: HomeAddressStreetProps): React.ReactElement =>
             dark={dark}
             marginRight="xxs"
             newWindow={newWindow}
+            target={getTargetAttribute()}
             text={homeId}
             type="home"
             url={homeUrl || '#'}

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 %>
 

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

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",

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}

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)
+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.

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

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(<HomeAdressStreetTest />);
     const kit = screen.getByTestId("primary-test");

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 %>

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

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

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