Skip to content

Commit

Permalink
Updated visibility labels for email cards
Browse files Browse the repository at this point in the history 
REF https://linear.app/ghost/issue/PLG-257/visibility-status-message-consistency
- Updated email content card and email CTA card visibility messages for consistency with the upcoming visibility changes
  • Loading branch information
@sanne-san
sanne-san committed Nov 19, 2024
1 parent ced8c06 commit 2da172f
Show file tree
Hide file tree
Showing 5 changed files with 44 additions and 54 deletions.
38 changes: 16 additions & 22 deletions packages/koenig-lexical/src/components/ui/cards/EmailCard.jsx
View file
Original file line number Diff line number Diff line change
@@ -1,34 +1,28 @@
import HelpIcon from '../../../assets/icons/kg-help.svg?react';
import KoenigNestedEditor from '../../KoenigNestedEditor';
import PropTypes from 'prop-types';
import React from 'react';
import ReplacementStringsPlugin from '../../../plugins/ReplacementStringsPlugin';
import {CardVisibilityMessage} from '../CardVisibilityMessage.jsx';
import {ReadOnlyOverlay} from '../ReadOnlyOverlay';

export function EmailCard({htmlEditor, htmlEditorInitialState, isEditing}) {
return (
<div className="w-full">
<KoenigNestedEditor
autoFocus={true}
initialEditor={htmlEditor}
initialEditorState={htmlEditorInitialState}
nodes='basic'
textClassName='kg-email-html whitespace-normal pb-1'
>
<ReplacementStringsPlugin />
</KoenigNestedEditor>
<>
<CardVisibilityMessage message="Hidden on website" />
<div className="w-full">
<KoenigNestedEditor
autoFocus={true}
initialEditor={htmlEditor}
initialEditorState={htmlEditorInitialState}
nodes='basic'
textClassName='kg-email-html whitespace-normal pb-1'
>
<ReplacementStringsPlugin />
</KoenigNestedEditor>

{isEditing &&
<div className="!-mx-3 !mt-3 flex items-center justify-center bg-grey-100 p-2 font-sans text-sm font-normal leading-none text-grey-600 dark:bg-grey-950 dark:text-grey-800">
Only visible when delivered by email, this card will not be published on your site.
<a href="https://ghost.org/help/cards/#email-content" rel="noopener noreferrer" target="_blank">
<HelpIcon className="ml-1 mt-[1px] size-4 stroke-[1.2px] text-grey-600 dark:text-grey-800" />
</a>
</div>
}

{!isEditing && <ReadOnlyOverlay />}
</div>
{!isEditing && <ReadOnlyOverlay />}
</div>
</>
);
}

Expand Down
20 changes: 15 additions & 5 deletions packages/koenig-lexical/src/components/ui/cards/EmailCtaCard.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@ import React from 'react';
import ReplacementStringsPlugin from '../../../plugins/ReplacementStringsPlugin';
import {Button} from '../Button';
import {ButtonGroupSetting, DropdownSetting, InputSetting, InputUrlSetting, SettingsPanel, ToggleSetting} from '../SettingsPanel';
import {CardVisibilityMessage} from '../CardVisibilityMessage.jsx';
import {ReadOnlyOverlay} from '../ReadOnlyOverlay';

export function EmailCtaCard({
Expand Down Expand Up @@ -48,18 +49,27 @@ export function EmailCtaCard({
name: 'status:-free'
}];

const segmentName = dropdownOptions.find(option => option.name === segment)?.label ?? '';
const getVisibilityMessage = (segmentType) => {
switch (segmentType) {
case 'status:free':
return 'Hidden on website and paid newsletter';
case 'status:-free':
return 'Hidden on website and free newsletter';
default:
return '';
}
};

const visibilityMessage = getVisibilityMessage(segment);

return (
<>
<div className="w-full pb-6">
{/* Segment */}
<div className="pb-7 pt-[.6rem] font-sans text-2xs font-semibold uppercase leading-8 tracking-normal text-grey dark:text-grey-800">
{segmentName}
</div>
<CardVisibilityMessage message={visibilityMessage} />

{/* Top divider */}
{showDividers && <hr className="not-kg-prose -mt-4 mb-12 block border-t-grey-300 dark:border-t-grey-900" data-testid="top-divider" />}
{showDividers && <hr className="not-kg-prose mb-12 block border-t-grey-300 dark:border-t-grey-900" data-testid="top-divider" />}

{/* HTML content */}
<KoenigNestedEditor
Expand Down
2 changes: 1 addition & 1 deletion packages/koenig-lexical/src/nodes/HtmlNodeComponent.jsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ export function HtmlNodeComponent({nodeKey, html}) {
<ToggleSetting
dataTestId="visibility-show-on-email"
isChecked={emailVisibility}
label="Show in email"
label="Show in email newsletter"
onChange={handleSettingChange(toggleEmail)}
/>
{emailVisibility && dropdownOptions && (
Expand Down
22 changes: 4 additions & 18 deletions packages/koenig-lexical/test/e2e/cards/email-card.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -45,6 +45,7 @@ test.describe('Email card', async () => {
<div data-lexical-decorator="true" contenteditable="false">
<div><svg></svg></div>
<div data-kg-card-editing="false" data-kg-card-selected="false" data-kg-card="email">
<div>Hidden on website</div>
<div>
<div>
<div data-kg="editor">
Expand All @@ -70,6 +71,7 @@ test.describe('Email card', async () => {
<div data-lexical-decorator="true" contenteditable="false">
<div><svg></svg></div>
<div data-kg-card-editing="true" data-kg-card-selected="true" data-kg-card="email">
<div>Hidden on website</div>
<div>
<div>
<div data-kg="editor">
Expand All @@ -84,12 +86,6 @@ test.describe('Email card', async () => {
</div>
</div>
</div>
<div>
Only visible when delivered by email, this card will not be published on your site.
<a href="https://ghost.org/help/cards/#email-content" rel="noopener noreferrer" target="_blank">
<svg></svg>
</a>
</div>
</div>
</div>
</div>
Expand Down Expand Up @@ -198,6 +194,7 @@ test.describe('Email card', async () => {
<div data-lexical-decorator="true" contenteditable="false">
<div><svg></svg></div>
<div data-kg-card-editing="true" data-kg-card-selected="true" data-kg-card="email">
<div>Hidden on website</div>
<div>
<div>
<div data-kg="editor">
Expand All @@ -219,12 +216,6 @@ test.describe('Email card', async () => {
</div>
</div>
</div>
<div>
Only visible when delivered by email, this card will not be published on your site.
<a href="https://ghost.org/help/cards/#email-content" rel="noopener noreferrer" target="_blank">
<svg></svg>
</a>
</div>
</div>
</div>
</div>
Expand All @@ -239,6 +230,7 @@ test.describe('Email card', async () => {
<div data-lexical-decorator="true" contenteditable="false">
<div><svg></svg></div>
<div data-kg-card-editing="true" data-kg-card-selected="true" data-kg-card="email">
<div>Hidden on website</div>
<div>
<div>
<div data-kg="editor">
Expand All @@ -256,12 +248,6 @@ test.describe('Email card', async () => {
</div>
</div>
</div>
<div>
Only visible when delivered by email, this card will not be published on your site.
<a href="https://ghost.org/help/cards/#email-content" rel="noopener noreferrer" target="_blank">
<svg></svg>
</a>
</div>
</div>
</div>
</div>
Expand Down
16 changes: 8 additions & 8 deletions packages/koenig-lexical/test/e2e/cards/email-cta-card.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,7 @@ test.describe('Email card', async () => {
<div><svg></svg></div>
<div data-kg-card-editing="false" data-kg-card-selected="false" data-kg-card="email-cta">
<div>
<div>Free members</div>
<div>Hidden on website and paid newsletter</div>
<div>
<div data-kg="editor">
<div contenteditable="false" role="textbox" spellcheck="true" data-lexical-editor="true" aria-autocomplete="none" aria-readonly="true">
Expand Down Expand Up @@ -95,7 +95,7 @@ test.describe('Email card', async () => {
<div><svg></svg></div>
<div data-kg-card-editing="false" data-kg-card-selected="false" data-kg-card="email-cta">
<div>
<div>Free members</div>
<div>Hidden on website and paid newsletter</div>
<hr />
<div>
<div data-kg="editor">
Expand Down Expand Up @@ -142,7 +142,7 @@ test.describe('Email card', async () => {
<div class="relative border-transparent caret-grey-800 z-10 hover:shadow-[0_0_0_1px] hover:shadow-green hover:-mx-3 hover:px-3"
data-kg-card-editing="false" data-kg-card-selected="false" data-kg-card="email-cta">
<div class="w-full pb-6">
<div class="pb-7 pt-[.6rem] font-sans text-2xs font-semibold uppercase leading-8 tracking-normal text-grey dark:text-grey-800">Free members</div>
<div class="py-[.6rem] font-sans text-2xs font-semibold uppercase leading-8 tracking-normal text-grey dark:text-grey-800">Hidden on website and paid newsletter</div>
<div
class="koenig-lexical kg-inherit-styles w-full bg-transparent whitespace-normal font-serif text-xl text-grey-900 dark:text-grey-200 text-center mx-auto [&amp;:has(.placeholder)]:w-fit [&amp;:has(.placeholder)]:text-left">
<div data-kg="editor">
Expand Down Expand Up @@ -189,7 +189,7 @@ test.describe('Email card', async () => {
<div><svg></svg></div>
<div data-kg-card-editing="false" data-kg-card-selected="false" data-kg-card="email-cta">
<div>
<div>Free members</div>
<div>Hidden on website and paid newsletter</div>
<div>
<div data-kg="editor">
<div contenteditable="false" role="textbox" spellcheck="true" data-lexical-editor="true" aria-autocomplete="none" aria-readonly="true">
Expand Down Expand Up @@ -302,7 +302,7 @@ test.describe('Email card', async () => {
<div><svg></svg></div>
<div data-kg-card-editing="true" data-kg-card-selected="true" data-kg-card="email-cta">
<div>
<div>Free members</div>
<div>Hidden on website and paid newsletter</div>
<hr />
<div>
<div data-kg="editor">
Expand Down Expand Up @@ -482,7 +482,7 @@ test.describe('Email card', async () => {
<div><svg></svg></div>
<div data-kg-card-editing="false" data-kg-card-selected="false" data-kg-card="email-cta">
<div>
<div>Free members</div>
<div>Hidden on website and paid newsletter</div>
<hr />
<div>
<div data-kg="editor">
Expand Down Expand Up @@ -513,7 +513,7 @@ test.describe('Email card', async () => {
<div><svg></svg></div>
<div data-kg-card-editing="false" data-kg-card-selected="true" data-kg-card="email-cta">
<div>
<div>Free members</div>
<div>Hidden on website and paid newsletter</div>
<hr />
<div>
<div data-kg="editor">
Expand Down Expand Up @@ -548,7 +548,7 @@ test.describe('Email card', async () => {
<div><svg></svg></div>
<div data-kg-card-editing="false" data-kg-card-selected="true" data-kg-card="email-cta">
<div>
<div>Free members</div>
<div>Hidden on website and paid newsletter</div>
<hr />
<div>
<div data-kg="editor">
Expand Down

0 comments on commit 2da172f

Please sign in to comment.