Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

CON-3426: design changes ask button, edition switcher, subscribe button #1047

Merged
merged 12 commits into from
Jul 8, 2024
Merged

CON-3426: design changes ask button, edition switcher, subscribe button #1047

Show file tree
Hide file tree
Changes from 4 commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
71fe70b
CON-3426: design changes on ask button, edition switcher and subscrib…
Jun 14, 2024
0670467
CON-3426: update integration tests
Jun 14, 2024
376069b
CON-3426: change not required styles and add aria-hidden
Jun 17, 2024
a6ec661
CON-3426: update snapshot
Jun 17, 2024
14fdd18
Update packages/dotcom-ui-header/src/header.scss
danieleruiz Jun 18, 2024
f2d8d39
CON-3426: update styles using new version of o-header, update test an…
Jul 8, 2024
b2a4ce3
CON-3426: update examples tests
Jul 8, 2024
b1c2071
CON-3426: remove comment and reformat code
Jul 8, 2024
7c4ea5d
Update packages/dotcom-ui-header/styles.scss
danieleruiz Jul 8, 2024
2b33a56
CON-3426: remove logo element
Jul 8, 2024
296cbf6
CON-3426: update snapshot
Jul 8, 2024
0e2c980
CON-3426: increase margin for typehead fix
Jul 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion examples/kitchen-sink/__test__/integration.test.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,7 +47,7 @@ describe('examples/kitchen-sink/integration', () => {
})

it('renders edition with current edition selected', () => {
expect(response.text).toContain('<p class="o-header__drawer-current-edition">International Edition</p>')
expect(response.text).toContain('<span class="current-edition">International Edition</span>')
})

it('renders app context data as embedded JSON', () => {
Expand Down
156 changes: 89 additions & 67 deletions packages/dotcom-ui-header/src/__test__/components/__snapshots__/Drawer.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -42,23 +42,6 @@ exports[`dotcom-ui-header/src/components/Drawer renders ASK FT button 1`] = `
Financial Times
</span>
</a>
<p
className="o-header__drawer-current-edition"
>
UK Edition
</p>
</div>
<div
className="o-header__drawer-actions"
>
<a
className="o-header__drawer-button"
data-trackable="subscribe-button"
href="#"
role="button"
>
Subscribe for full access
</a>
</div>
<div
className="o-header__drawer-search"
Expand Down Expand Up @@ -107,19 +90,6 @@ exports[`dotcom-ui-header/src/components/Drawer renders ASK FT button 1`] = `
Search
</span>
</button>
<a
className="ft-header__ask-ft-button ft-header__drawer-ask-ft-button"
data-trackable="ask-ft-button-drawer"
href="https://ask.ft.com"
id="ask-ft-button-drawer"
title="ASK FT"
>
<span
className="ft-header__ask-ft-button-label"
>
Ask FT
</span>
</a>
</form>
</div>
<nav
Expand All @@ -130,9 +100,20 @@ exports[`dotcom-ui-header/src/components/Drawer renders ASK FT button 1`] = `
className="o-header__drawer-menu-list"
>
<li
className="o-header__drawer-menu-item"
className="o-header__drawer-menu-item edition-switcher"
data-trackable="edition-switcher"
>
<span
className="current-edition"
>
UK
metart43 marked this conversation as resolved.
Show resolved Hide resolved
Edition
</span>
<span
aria-hidden="true"
>
|
</span>
<a
className="o-header__drawer-menu-link"
data-trackable="international"
Expand All @@ -145,6 +126,35 @@ exports[`dotcom-ui-header/src/components/Drawer renders ASK FT button 1`] = `
</li>
</ul>
</nav>
<div
className="o-header__drawer-actions"
>
<a
className="ft-header__ask-ft-button ft-header__drawer-ask-ft-button"
data-trackable="ask-ft-button-drawer"
href="https://ask.ft.com"
id="ask-ft-button-drawer"
title="ASK FT"
>
<span
className="ft-header__ask-ft-button-label"
>
Ask FT
</span>
</a>
</div>
<div
className="o-header__drawer-actions"
>
<a
className="o-header__drawer-button"
data-trackable="subscribe-button"
href="#"
role="button"
>
Subscribe for full access
</a>
</div>
<nav
className="o-header__drawer-menu o-header__drawer-menu--primary"
>
Expand Down Expand Up @@ -1419,23 +1429,6 @@ exports[`dotcom-ui-header/src/components/Drawer renders as a logged in user 1`]
Financial Times
</span>
</a>
<p
className="o-header__drawer-current-edition"
>
UK Edition
</p>
</div>
<div
className="o-header__drawer-actions"
>
<a
className="o-header__drawer-button"
data-trackable="subscribe-button"
href="#"
role="button"
>
Subscribe for full access
</a>
</div>
<div
className="o-header__drawer-search"
Expand Down Expand Up @@ -1494,9 +1487,20 @@ exports[`dotcom-ui-header/src/components/Drawer renders as a logged in user 1`]
className="o-header__drawer-menu-list"
>
<li
className="o-header__drawer-menu-item"
className="o-header__drawer-menu-item edition-switcher"
data-trackable="edition-switcher"
>
<span
className="current-edition"
>
UK
Edition
</span>
<span
aria-hidden="true"
>
|
</span>
<a
className="o-header__drawer-menu-link"
data-trackable="international"
Expand All @@ -1509,6 +1513,18 @@ exports[`dotcom-ui-header/src/components/Drawer renders as a logged in user 1`]
</li>
</ul>
</nav>
<div
className="o-header__drawer-actions"
>
<a
className="o-header__drawer-button"
data-trackable="subscribe-button"
href="#"
role="button"
>
Subscribe for full access
</a>
</div>
<nav
className="o-header__drawer-menu o-header__drawer-menu--primary"
>
Expand Down Expand Up @@ -2783,23 +2799,6 @@ exports[`dotcom-ui-header/src/components/Drawer renders as an anonymous user 1`]
Financial Times
</span>
</a>
<p
className="o-header__drawer-current-edition"
>
UK Edition
</p>
</div>
<div
className="o-header__drawer-actions"
>
<a
className="o-header__drawer-button"
data-trackable="subscribe-button"
href="#"
role="button"
>
Subscribe for full access
</a>
</div>
<div
className="o-header__drawer-search"
Expand Down Expand Up @@ -2858,9 +2857,20 @@ exports[`dotcom-ui-header/src/components/Drawer renders as an anonymous user 1`]
className="o-header__drawer-menu-list"
>
<li
className="o-header__drawer-menu-item"
className="o-header__drawer-menu-item edition-switcher"
data-trackable="edition-switcher"
>
<span
className="current-edition"
>
UK
Edition
</span>
<span
aria-hidden="true"
>
|
</span>
<a
className="o-header__drawer-menu-link"
data-trackable="international"
Expand All @@ -2873,6 +2883,18 @@ exports[`dotcom-ui-header/src/components/Drawer renders as an anonymous user 1`]
</li>
</ul>
</nav>
<div
className="o-header__drawer-actions"
>
<a
className="o-header__drawer-button"
data-trackable="subscribe-button"
href="#"
role="button"
>
Subscribe for full access
</a>
</div>
<nav
className="o-header__drawer-menu o-header__drawer-menu--primary"
>
Expand Down
26 changes: 15 additions & 11 deletions packages/dotcom-ui-header/src/__test__/components/__snapshots__/MainHeader.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -47,19 +47,23 @@ exports[`dotcom-ui-header/src/components/MainHeader renders ASK FT button 1`] =
Open search bar
</span>
</a>
<a
className="ft-header__ask-ft-button ft-header__top-ask-ft-button"
data-trackable="ask-ft-button-header"
href="https://ask.ft.com"
id="ask-ft-button-header"
title="ASK FT"
<div
className="o-header__drawer-actions"
>
<span
className="ft-header__ask-ft-button-label"
<a
className="ft-header__ask-ft-button ft-header__top-ask-ft-button"
data-trackable="ask-ft-button-header"
href="https://ask.ft.com"
id="ask-ft-button-header"
title="ASK FT"
>
Ask FT
</span>
</a>
<span
className="ft-header__ask-ft-button-label"
>
Ask FT
</span>
</a>
</div>
</div>
<div
className="o-header__top-column o-header__top-column--center"
Expand Down
26 changes: 15 additions & 11 deletions packages/dotcom-ui-header/src/__test__/components/__snapshots__/StickyHeader.spec.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -46,19 +46,23 @@ exports[`dotcom-ui-header/src/components/StickyHeader renders ASK FT button 1`]
Search
</span>
</a>
<a
className="ft-header__ask-ft-button ft-header__top-ask-ft-button"
data-trackable="ask-ft-button-sticky"
href="https://ask.ft.com"
id="ask-ft-button-sticky"
title="ASK FT"
<div
className="o-header__drawer-actions"
>
<span
className="ft-header__ask-ft-button-label"
<a
className="ft-header__ask-ft-button ft-header__top-ask-ft-button"
data-trackable="ask-ft-button-sticky"
href="https://ask.ft.com"
id="ask-ft-button-sticky"
title="ASK FT"
>
Ask FT
</span>
</a>
<span
className="ft-header__ask-ft-button-label"
>
Ask FT
</span>
</a>
</div>
</div>
<div
className="o-header__top-column o-header__top-column--center"
Expand Down
2 changes: 1 addition & 1 deletion packages/dotcom-ui-header/src/__test__/output/drawer.spec.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ describe('dotcom-ui-header/src/components/drawer', () => {
it('renders the current edition text', () => {
const { container } = render(<Subject {...fixture} />)

expect(container.getElementsByClassName('o-header__drawer-current-edition')[0].innerHTML).toContain(
expect(container.getElementsByClassName('current-edition')[0].innerHTML).toContain(
'UK Edition'
)
})
Expand Down
19 changes: 10 additions & 9 deletions packages/dotcom-ui-header/src/components/ask-ft/askFtButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,14 @@ export interface AskFtButtonProps {
}

export const AskFtButton = ({ id, className, dataTrackable }: AskFtButtonProps) => (
<a
id={id}
className={`ft-header__ask-ft-button ${className}`}
data-trackable={dataTrackable}
href="https://ask.ft.com"
title="ASK FT"
>
<span className="ft-header__ask-ft-button-label">Ask FT</span>
</a>
<div className="o-header__drawer-actions">
<a
id={id}
className={`ft-header__ask-ft-button ${className}`}
data-trackable={dataTrackable}
href="https://ask.ft.com"
title="ASK FT">
<span className="ft-header__ask-ft-button-label">Ask FT</span>
</a>
</div>
)
Loading