From 49488b98b1e8a636e8cf7e12fbf14833707c2c50 Mon Sep 17 00:00:00 2001 From: hailey Date: Tue, 24 Dec 2024 13:07:41 +0900 Subject: [PATCH 1/5] =?UTF-8?q?email=20default=20=EB=A7=81=ED=81=AC=20?= =?UTF-8?q?=EC=B6=94=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/elements/links.test.tsx | 20 +++++++++++++ .../src/elements/links.tsx | 28 ++++++++++++++++++- 2 files changed, 47 insertions(+), 1 deletion(-) diff --git a/packages/triple-email-document/src/elements/links.test.tsx b/packages/triple-email-document/src/elements/links.test.tsx index 4ca54e9ee4..79145861f4 100644 --- a/packages/triple-email-document/src/elements/links.test.tsx +++ b/packages/triple-email-document/src/elements/links.test.tsx @@ -2,6 +2,26 @@ import { render, screen } from '@testing-library/react' import { ELEMENTS } from '../index' +test('디폴트형 링크 Element를 렌더링합니다.', () => { + const Links = ELEMENTS.links + + render( + , + ) + + const anchorElement = screen.getByRole('link') + + expect(anchorElement).toHaveAttribute('href', 'Test Href') + expect(anchorElement).toHaveStyleRule('color', '#2987f0') + expect(anchorElement).toHaveStyleRule('text-decoration', 'underline') + expect(anchorElement).toHaveTextContent('Default Styled Link') +}) + test('버튼형 링크 Element를 렌더링합니다.', () => { const Links = ELEMENTS.links diff --git a/packages/triple-email-document/src/elements/links.tsx b/packages/triple-email-document/src/elements/links.tsx index edfd2787b0..f5233bbbd3 100644 --- a/packages/triple-email-document/src/elements/links.tsx +++ b/packages/triple-email-document/src/elements/links.tsx @@ -15,10 +15,26 @@ export interface LinksDocument { type: 'links' value: { links: Link[] - display: 'button' | 'block' | 'largeButton' | 'largeCompactButton' + display: + | 'default' + | 'button' + | 'block' + | 'largeButton' + | 'largeCompactButton' } } +const DefaultLink = styled.a` + display: inline-block; + margin-right: 20px; + font-size: 15px; + font-weight: bold; + color: #2987f0; + text-decoration: underline; + overflow-wrap: break-word; + white-space: pre-line; +` + const ButtonLink = styled.a` padding: 13px 25px; display: inline-block; @@ -77,6 +93,7 @@ declare module 'react' { } const LINK_BOXES = { + default: DefaultLinkBox, button: ButtonBox, block: BlockBox, largeButton: LargeBox, @@ -84,6 +101,7 @@ const LINK_BOXES = { } const LINK_ELEMENTS = { + default: DefaultLink, button: ButtonLink, block: BlockLink, largeButton: LargeLink, @@ -123,6 +141,14 @@ export default function LinksView({ ) } +function DefaultLinkBox({ children }: PropsWithChildren) { + return ( + + {children} + + ) +} + function ButtonBox({ children }: PropsWithChildren) { return ( From b71c1ab603763bc1faca058ac396ff0fdca280ec Mon Sep 17 00:00:00 2001 From: hailey Date: Tue, 24 Dec 2024 13:51:54 +0900 Subject: [PATCH 2/5] =?UTF-8?q?link=20hover=20=EC=8A=A4=ED=83=80=EC=9D=BC?= =?UTF-8?q?=20override?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/triple-email-document/src/elements/links.tsx | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/packages/triple-email-document/src/elements/links.tsx b/packages/triple-email-document/src/elements/links.tsx index f5233bbbd3..decdaf2bda 100644 --- a/packages/triple-email-document/src/elements/links.tsx +++ b/packages/triple-email-document/src/elements/links.tsx @@ -33,6 +33,11 @@ const DefaultLink = styled.a` text-decoration: underline; overflow-wrap: break-word; white-space: pre-line; + + &:hover { + color: #2987f0; + text-decoration: underline; + } ` const ButtonLink = styled.a` From dadb3c111bf39ab5a7f9d203654c50860e2e650e Mon Sep 17 00:00:00 2001 From: hailey Date: Thu, 26 Dec 2024 15:21:11 +0900 Subject: [PATCH 3/5] =?UTF-8?q?heading=20=ED=83=80=EC=9E=85=20email=20elem?= =?UTF-8?q?ent=EC=97=90=20id=EA=B0=92=20=EC=A3=BC=EC=9E=85?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/elements/heading.tsx | 16 ++++++++++++---- .../triple-email-document/src/elements/index.ts | 1 + 2 files changed, 13 insertions(+), 4 deletions(-) diff --git a/packages/triple-email-document/src/elements/heading.tsx b/packages/triple-email-document/src/elements/heading.tsx index b84aebe390..8a7b18f5e8 100644 --- a/packages/triple-email-document/src/elements/heading.tsx +++ b/packages/triple-email-document/src/elements/heading.tsx @@ -70,12 +70,14 @@ const H4Container = styled.h4` ` export function Heading1View({ + id, value: { text, headline }, }: { + id?: string value: Heading1Document['value'] }) { return ( - + @@ -89,12 +91,14 @@ export function Heading1View({ } export function Heading2View({ + id, value: { text }, }: { + id?: string value: Heading2Document['value'] }) { return ( - + @@ -107,12 +111,14 @@ export function Heading2View({ } export function Heading3View({ + id, value: { text }, }: { + id?: string value: Heading3Document['value'] }) { return ( - + @@ -125,12 +131,14 @@ export function Heading3View({ } export function Heading4View({ + id, value: { text }, }: { + id?: string value: Heading4Document['value'] }) { return ( - + diff --git a/packages/triple-email-document/src/elements/index.ts b/packages/triple-email-document/src/elements/index.ts index 5f33f5ee39..ee7f9dff2b 100644 --- a/packages/triple-email-document/src/elements/index.ts +++ b/packages/triple-email-document/src/elements/index.ts @@ -57,6 +57,7 @@ export type GetValue = Extract< const ELEMENTS: { [key in TripleEmailElementType]: ComponentType<{ + id?: string value: GetValue }> } = { From 51db588f0bcba5e4532976f22eab1e4515c3700a Mon Sep 17 00:00:00 2001 From: hailey Date: Thu, 26 Dec 2024 15:51:14 +0900 Subject: [PATCH 4/5] empty-commit From 523db769ff10688677c29231e99ed3ed7f5d4d83 Mon Sep 17 00:00:00 2001 From: hailey Date: Fri, 27 Dec 2024 10:19:45 +0900 Subject: [PATCH 5/5] =?UTF-8?q?default=20=EB=A7=81=ED=81=AC=20=ED=83=80?= =?UTF-8?q?=EC=9E=85=20=EC=8A=A4=ED=86=A0=EB=A6=AC=EB=B6=81=20=EC=B6=94?= =?UTF-8?q?=EA=B0=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/triple-email-document/src/links.stories.tsx | 12 +++++++++++- 1 file changed, 11 insertions(+), 1 deletion(-) diff --git a/packages/triple-email-document/src/links.stories.tsx b/packages/triple-email-document/src/links.stories.tsx index 04abebf950..74788f2b90 100644 --- a/packages/triple-email-document/src/links.stories.tsx +++ b/packages/triple-email-document/src/links.stories.tsx @@ -30,6 +30,11 @@ export default { }, } as Meta +export const StyledDefaultLinkElement: StoryObj = { + name: '디폴트', + args: generateSampleData('default'), +} + export const StyledButtonLinkElement: StoryObj = { name: '버튼', args: generateSampleData('button'), @@ -50,7 +55,12 @@ export const StyledCompactLargeButtonLinkElement: StoryObj = { args: generateSampleData('largeCompactButton'), } -type LinkDisplay = 'button' | 'block' | 'largeButton' | 'largeCompactButton' +type LinkDisplay = + | 'default' + | 'button' + | 'block' + | 'largeButton' + | 'largeCompactButton' function generateSampleData(type: LinkDisplay) { return {