-
Notifications
You must be signed in to change notification settings - Fork 143
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Add short version of the onboarding (#1409)
- Loading branch information
Showing
9 changed files
with
260 additions
and
23 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
25 changes: 25 additions & 0 deletions
25
packages/ui/src/modules/onboarding/components/error-card.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| /** | ||
| * Ghostery Browser Extension | ||
| * https://www.ghostery.com/ | ||
| * | ||
| * Copyright 2017-present Ghostery GmbH. All rights reserved. | ||
| * | ||
| * This Source Code Form is subject to the terms of the Mozilla Public | ||
| * License, v. 2.0. If a copy of the MPL was not distributed with this | ||
| * file, You can obtain one at http://mozilla.org/MPL/2.0 | ||
| */ | ||
|
|
||
| import { html } from 'hybrids'; | ||
|
|
||
| export default { | ||
| render: () => html` | ||
| <template layout="column padding:1.5 gap:2"> | ||
| <slot></slot> | ||
| </template> | ||
| `.css` | ||
| :host { | ||
| border-radius: 8px; | ||
| background: rgba(255, 93, 53, 0.15); | ||
| } | ||
| `, | ||
| }; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,55 @@ | ||
| /** | ||
| * Ghostery Browser Extension | ||
| * https://www.ghostery.com/ | ||
| * | ||
| * Copyright 2017-present Ghostery GmbH. All rights reserved. | ||
| * | ||
| * This Source Code Form is subject to the terms of the Mozilla Public | ||
| * License, v. 2.0. If a copy of the MPL was not distributed with this | ||
| * file, You can obtain one at http://mozilla.org/MPL/2.0 | ||
| */ | ||
|
|
||
| import { define, dispatch, html, router } from 'hybrids'; | ||
|
|
||
| import Main from './views/short/main.js'; | ||
| import OutroSkip from './views/short/outro-skip.js'; | ||
| import OutroSuccess from './views/outro-success.js'; | ||
|
|
||
| define(Main); | ||
| define(OutroSkip); | ||
|
|
||
| export default define({ | ||
| tag: 'ui-onboarding-short', | ||
| platform: '', | ||
| views: router([Main, OutroSuccess], { | ||
| params: ['platform'], | ||
| }), | ||
| state: { | ||
| value: '', | ||
| connect: (host) => { | ||
| function cb(event) { | ||
| switch (event.detail.entry.id) { | ||
| case OutroSkip.tag: | ||
| dispatch(host, 'skip'); | ||
| break; | ||
| case OutroSuccess.tag: | ||
| dispatch(host, 'success'); | ||
| break; | ||
| default: | ||
| break; | ||
| } | ||
| } | ||
|
|
||
| host.addEventListener('navigate', cb); | ||
|
|
||
| return () => host.removeEventListener('navigate', cb); | ||
| }, | ||
| }, | ||
| content: ({ views }) => html` | ||
| <template layout="grid height::100%"> | ||
| <ui-onboarding-layout>${views}</ui-onboarding-layout> | ||
| </template> | ||
| `.css` | ||
| ui-text a { text-decoration: underline } | ||
| `, | ||
| }); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,84 @@ | ||
| /** | ||
| * Ghostery Browser Extension | ||
| * https://www.ghostery.com/ | ||
| * | ||
| * Copyright 2017-present Ghostery GmbH. All rights reserved. | ||
| * | ||
| * This Source Code Form is subject to the terms of the Mozilla Public | ||
| * License, v. 2.0. If a copy of the MPL was not distributed with this | ||
| * file, You can obtain one at http://mozilla.org/MPL/2.0 | ||
| */ | ||
|
|
||
| import { define, html, msg, router } from 'hybrids'; | ||
|
|
||
| import Privacy from '../privacy.js'; | ||
| import OutroSkip from './outro-skip.js'; | ||
| import OutroSuccess from '../outro-success.js'; | ||
|
|
||
| const TERMS_AND_CONDITIONS_URL = | ||
| 'https://www.ghostery.com/privacy/ghostery-terms-and-conditions?utm_source=gbe'; | ||
|
|
||
| export default define({ | ||
| [router.connect]: { stack: [Privacy, OutroSkip] }, | ||
| tag: 'ui-onboarding-short-main-view', | ||
| content: () => html` | ||
| <template layout="grow column gap"> | ||
| <ui-onboarding-card> | ||
| <div layout="column gap:5"> | ||
| <section layout="block:center column gap"> | ||
| <ui-text type="body-l" layout="margin:top:2"> | ||
| Welcome to Ghostery | ||
| </ui-text> | ||
| <ui-text type="display-m" layout="margin:bottom:5"> | ||
| Enable Ghostery to get started | ||
| </ui-text> | ||
| </section> | ||
| </div> | ||
| <div layout="column gap:3"> | ||
| <div layout="column gap"> | ||
| <ui-text type="display-2xs" layout="block:center"> | ||
| Your Privacy Features: | ||
| </ui-text> | ||
| <div layout="grid:3 gap"> | ||
| <ui-onboarding-feature icon="onboarding-adblocking"> | ||
| Ad-Blocking | ||
| </ui-onboarding-feature> | ||
| <ui-onboarding-feature icon="onboarding-anti-tracking"> | ||
| Anti-Tracking | ||
| </ui-onboarding-feature> | ||
| <ui-onboarding-feature icon="onboarding-never-consent"> | ||
| Never-Consent | ||
| </ui-onboarding-feature> | ||
| </div> | ||
| </div> | ||
| <ui-text underline> | ||
| ${msg.html` | ||
| Information about web trackers will be shared in accordance with our <a href="${router.url( | ||
| Privacy, | ||
| )}">Privacy Policy</a>, advancing privacy protection for the Ghostery community. | ||
| `} | ||
| </ui-text> | ||
| <div layout="column gap:3"> | ||
| <ui-button type="success" size="small"> | ||
| <a href="${router.url(OutroSuccess)}">Enable Ghostery</a> | ||
| </ui-button> | ||
| <ui-onboarding-error-card> | ||
| <ui-text type="label-s" color="error-500" layout="block:center"> | ||
| Without privacy features enabled, only basic functionality of | ||
| naming trackers is available. | ||
| </ui-text> | ||
| <ui-button type="outline-error" size="small"> | ||
| <a href="${router.url(OutroSkip)}">Keep disabled</a> | ||
| </ui-button> | ||
| </ui-onboarding-error-card> | ||
| </div> | ||
| </div> | ||
| </ui-onboarding-card> | ||
| <ui-text layout="block:center margin:3:0" underline> | ||
| <a href="${TERMS_AND_CONDITIONS_URL}" target="_blank"> | ||
| Terms & Conditions | ||
| </a> | ||
| </ui-text> | ||
| </template> | ||
| `, | ||
| }); |
42 changes: 42 additions & 0 deletions
42
packages/ui/src/modules/onboarding/views/short/outro-skip.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,42 @@ | ||
| /** | ||
| * Ghostery Browser Extension | ||
| * https://www.ghostery.com/ | ||
| * | ||
| * Copyright 2017-present Ghostery GmbH. All rights reserved. | ||
| * | ||
| * This Source Code Form is subject to the terms of the Mozilla Public | ||
| * License, v. 2.0. If a copy of the MPL was not distributed with this | ||
| * file, You can obtain one at http://mozilla.org/MPL/2.0 | ||
| */ | ||
|
|
||
| import { define, html } from 'hybrids'; | ||
|
|
||
| import disabled from '../../illustrations/disabled.js'; | ||
|
|
||
| const TERMS_AND_CONDITIONS_URL = | ||
| 'https://www.ghostery.com/privacy/ghostery-terms-and-conditions?utm_source=gbe'; | ||
|
|
||
| export default define({ | ||
| tag: 'ui-onboarding-outro-short-skip-view', | ||
| content: () => html` | ||
| <template layout="block"> | ||
| <ui-onboarding-card> | ||
| <section layout="block:center column gap:2"> | ||
| <div layout="row center">${disabled}</div> | ||
| <ui-text type="display-s" color="error-500"> | ||
| Ghostery is installed with limited functionality | ||
| </ui-text> | ||
| <ui-text type="body-m" color="gray-800"> | ||
| Ghostery Tracker & Ad Blocker is naming the trackers present on | ||
| websites you visit. You are browsing the web unprotected. | ||
| </ui-text> | ||
| </section> | ||
| </ui-onboarding-card> | ||
| <ui-text layout="block:center margin:3:0" underline> | ||
| <a href="${TERMS_AND_CONDITIONS_URL}" target="_blank"> | ||
| Terms & Conditions | ||
| </a> | ||
| </ui-text> | ||
| </template> | ||
| `, | ||
| }); |