isom-1727 bug external link all should have new tab icon open in new #1139

adriangohjw · 2025-02-24T05:02:57Z

Problem

For buttons and collection/blog cards, external links 1) do not open in new tab and 2) show "new tab" icon at the end

Closes https://linear.app/ogp/issue/ISOM-1727/bug-external-link-all-should-have-new-tab-icon-open-in-new-tab

Solution

Breaking Changes

Yes - this PR contains breaking changes
- Details ...
No - this PR is backwards compatible

Bug Fixes:

add a check in LinkButton
add a check in the CollectionCard and BlogCard + add stories

Tests

go to a component with a button e.g. Hero. Add the link to an external link e.g. https://google.com.
- It should show a "open in new link" icon
- after building, when clicked on, it should open new link. (alternately: can inspect element on studio to check for target: _blank
go to a collection and create a collection link. Add the link to an external link e.g. https://google.com.
- It should show a "open in new link" icon
- after building, when clicked on, it should open new link. (alternately: can inspect element on studio to check for target: _blank

linear · 2025-02-24T05:03:03Z

ISOM-1727 bug: External link - all should have "new tab" icon + open in new tab

datadog-opengovsg · 2025-02-24T05:07:31Z

Datadog Report

Branch report: adriangohjw/isom-1727-bug-external-link-all-should-have-new-tab-icon-open-in-new
Commit report: ca03a6d
Test service: isomer-studio

✅ 0 Failed, 290 Passed, 37 Skipped, 55.07s Total Time
🔻 Test Sessions change in coverage: 1 decreased (-0.11%)

🔻 Code Coverage Decreases vs Default Branch (1)

vitest run --coverage 7.43% (-0.11%) - Details

…nt with BiLinkExternal icon

…rgin

…d title

harishv7 · 2025-02-24T16:03:43Z

.../components/src/templates/next/components/internal/CollectionCard/CollectionCard.stories.tsx

+  }),
+}
+
+// TODO: fix the external link icon showing up when the text is long


didn't understand this comment, what's the current behaviour when the text is long?

my bad, should have been clearer

current expected

couldn't find a quick easy way to do this so leaving it as a TODO - esp. since not that common for titles to be so long

We can move the line-clamp-3 to the text span specifically, but the icon will be on the next line

i was hesistating on this too because it's not the most ideal, tho you might be right that it's better-than-nothing. will make the UI change, but still keep the commment to explain the desired outcome!

Ok, cc @sehyunidaaa fyi

realized it's not as simple to apply line-clamp-3 to the text span as that would mean the icon is always on the next line, which isn't ideal when the title is too short and not truncated.

instead, updated it (e1fdb2d, 4cf732c, f0e2e9d) such that

there's a useEffect to check if the text is truncated before deciding the location of the icon

and because it's a useEffect, we will need use client so i further split it into InternalLinkTitle (rendered during SSG) and externalLinkTitle (rendered during client side)

How do I check this on storybook? Tried on this, but still was unable to see the icon

https://665439911775ce21bf8b8fb4-uqoozszvjs.chromatic.com/?path=/story/next-internal-components-blog-card--external-link-long-text&globals=viewport:sm

try this?

…nk and size combinations

… icon visibility

adriangohjw · 2025-02-25T05:52:51Z

packages/components/src/templates/next/components/internal/BlogCard/BlogCard.stories.tsx

@@ -1,5 +1,4 @@
 import type { Meta, StoryObj } from "@storybook/react"
-import { expect, userEvent, within } from "@storybook/test"


unrelated to this PR - just saw that it's not actually being used

adriangohjw · 2025-02-25T05:53:21Z

packages/components/src/templates/next/components/internal/BlogCard/BlogCard.stories.tsx

+interface GenerateArgsProps {
+  shouldShowDate?: boolean
+  isLastUpdatedUndefined?: boolean
+  withoutImage?: boolean
+  title?: string
+  description?: string
+  tags?: Tag[]
+  isExternalLink?: boolean
+}
+
 const generateArgs = ({
  shouldShowDate = true,
  isLastUpdatedUndefined = false,
  withoutImage = false,
  title = "A journal on microscopic plastic and their correlation to the number of staycations enjoyed per millennials between the ages of 30-42, substantiated by research from IDK university",
  description = "We've looked at how people's spending correlates with how much microscopic plastic they consumed over the year. We've looked at how people's spending correlates with how much microscopic plastic they consumed over the year.",
  tags = [],
-}: {
+  isExternalLink = false,
+}: GenerateArgsProps): Partial<CollectionCardProps> & {
  shouldShowDate?: boolean
-  isLastUpdatedUndefined?: boolean
-  withoutImage?: boolean
-  title?: string
-  description?: string
-  tags?: Tag[]
-}): Partial<CollectionCardProps> & { shouldShowDate?: boolean } => {
+} => {


slight refactoring here since props is getting larger

adriangohjw · 2025-02-25T05:53:35Z

.../components/src/templates/next/components/internal/CollectionCard/CollectionCard.stories.tsx

+interface GenerateArgsProps {
+  shouldShowDate?: boolean
+  isLastUpdatedUndefined?: boolean
+  withoutImage?: boolean
+  title?: string
+  description?: string
+  tags?: Tag[]
+  isExternalLink?: boolean
+}
 const generateArgs = ({
  shouldShowDate = true,
  isLastUpdatedUndefined = false,
  withoutImage = false,
  title = "A journal on microscopic plastic and their correlation to the number of staycations enjoyed per millennials between the ages of 30-42, substantiated by research from IDK university",
  description = "We've looked at how people's spending correlates with how much microscopic plastic they consumed over the year. We've looked at how people's spending correlates with how much microscopic plastic they consumed over the year.",
  tags = [],
-}: {
+  isExternalLink = false,
+}: GenerateArgsProps): Partial<CollectionCardProps> & {
  shouldShowDate?: boolean
-  isLastUpdatedUndefined?: boolean
-  withoutImage?: boolean
-  title?: string
-  description?: string
-  tags?: Tag[]
-}): Partial<CollectionCardProps> & { shouldShowDate?: boolean } => {
+} => {


slight refactoring here since props is getting larger

adriangohjw · 2025-02-25T06:25:54Z

note - changes from d02f2f4 and 156b7f7 are such that the default UI in most storybook will not have the external link icon

…for truncated titles

… icon placement

… components

adriangohjw added 3 commits February 24, 2025 11:12

feat(LinkButton): Add external link detection and icon

2a84189

enhance(CollectionCard): Add external link detection and styling

f2c0670

enhance(BlogCard): Add external link detection and styling

4bd2121

adriangohjw added the bug Something isn't working label Feb 24, 2025

adriangohjw self-assigned this Feb 24, 2025

adriangohjw requested a review from a team as a code owner February 24, 2025 05:02

adriangohjw temporarily deployed to staging February 24, 2025 05:03 — with GitHub Actions Inactive

adriangohjw added 3 commits February 24, 2025 17:19

enhance(BlogCard, CollectionCard): Replace external link pseudo-eleme…

8dd08fb

…nt with BiLinkExternal icon

fix(BlogCard, CollectionCard): Adjust external link icon width and ma…

237f110

…rgin

test(BlogCard, CollectionCard): Add external link story with truncate…

322c79e

…d title

adriangohjw temporarily deployed to staging February 24, 2025 10:23 — with GitHub Actions Inactive

harishv7 reviewed Feb 24, 2025

View reviewed changes

adriangohjw added 3 commits February 25, 2025 13:35

improve(LinkButton): Add external link icon with dynamic styling

19f1c9c

refactor(LinkButton): Enhance Storybook stories with comprehensive li…

0e914a4

…nk and size combinations

docs(BlogCard, CollectionCard): Update TODO comment for external link…

17f6fad

… icon visibility

adriangohjw temporarily deployed to staging February 25, 2025 05:49 — with GitHub Actions Inactive

adriangohjw commented Feb 25, 2025

View reviewed changes

update to internal link

d02f2f4

adriangohjw temporarily deployed to staging February 25, 2025 06:08 — with GitHub Actions Inactive

update to internal link

156b7f7

adriangohjw temporarily deployed to staging February 25, 2025 06:22 — with GitHub Actions Inactive

adriangohjw added 3 commits February 25, 2025 15:19

feat(BlogCard, CollectionCard): Improve external link icon placement …

e1fdb2d

…for truncated titles

docs(BlogCard, CollectionCard): Update TODO comment for external link…

4cf732c

… icon placement

refactor(CollectionCard): Extract title rendering logic into separate…

f0e2e9d

… components

adriangohjw temporarily deployed to staging February 25, 2025 07:49 — with GitHub Actions Inactive

update preview-tw.css

13b11e9

adriangohjw temporarily deployed to staging February 25, 2025 13:19 — with GitHub Actions Inactive

adriangohjw requested a review from harishv7 February 26, 2025 02:13

harishv7 approved these changes Feb 26, 2025

View reviewed changes

adriangohjw merged commit b901e38 into main Feb 26, 2025
20 checks passed

adriangohjw deleted the adriangohjw/isom-1727-bug-external-link-all-should-have-new-tab-icon-open-in-new branch February 26, 2025 05:23

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

isom-1727 bug external link all should have new tab icon open in new #1139

isom-1727 bug external link all should have new tab icon open in new #1139

adriangohjw commented Feb 24, 2025

linear bot commented Feb 24, 2025

datadog-opengovsg bot commented Feb 24, 2025 •

edited

Loading

harishv7 Feb 24, 2025

adriangohjw Feb 25, 2025

harishv7 Feb 25, 2025

adriangohjw Feb 25, 2025

harishv7 Feb 25, 2025

adriangohjw Feb 25, 2025 •

edited

Loading

harishv7 Feb 26, 2025

adriangohjw Feb 26, 2025

adriangohjw Feb 25, 2025

adriangohjw Feb 25, 2025

adriangohjw Feb 25, 2025

adriangohjw commented Feb 25, 2025

		@@ -1,5 +1,4 @@
		import type { Meta, StoryObj } from "@storybook/react"
		import { expect, userEvent, within } from "@storybook/test"

isom-1727 bug external link all should have new tab icon open in new #1139

isom-1727 bug external link all should have new tab icon open in new #1139

Conversation

adriangohjw commented Feb 24, 2025

Problem

Solution

Tests

linear bot commented Feb 24, 2025

datadog-opengovsg bot commented Feb 24, 2025 • edited Loading

Datadog Report

🔻 Code Coverage Decreases vs Default Branch (1)

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

adriangohjw Feb 25, 2025 • edited Loading

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

adriangohjw commented Feb 25, 2025

datadog-opengovsg bot commented Feb 24, 2025 •

edited

Loading

adriangohjw Feb 25, 2025 •

edited

Loading