-
Notifications
You must be signed in to change notification settings - Fork 432
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Onboarding intro - Browsers Comparison Chart (#2984)
- Loading branch information
1 parent
1a8978e
commit d3c7393
Showing
8 changed files
with
323 additions
and
4 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
12 changes: 12 additions & 0 deletions
12
DuckDuckGo/DaxOnboarding.xcassets/DDGBrowserIcon.imageset/Contents.json
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,12 @@ | ||
| { | ||
| "images" : [ | ||
| { | ||
| "filename" : "DDGBrowserIcon.pdf", | ||
| "idiom" : "universal" | ||
| } | ||
| ], | ||
| "info" : { | ||
| "author" : "xcode", | ||
| "version" : 1 | ||
| } | ||
| } |
Binary file added
BIN
+20.4 KB
DuckDuckGo/DaxOnboarding.xcassets/DDGBrowserIcon.imageset/DDGBrowserIcon.pdf
Binary file not shown.
12 changes: 12 additions & 0 deletions
12
DuckDuckGo/DaxOnboarding.xcassets/SafariBrowserIcon.imageset/Contents.json
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,12 @@ | ||
| { | ||
| "images" : [ | ||
| { | ||
| "filename" : "SafariBrowserIcon.pdf", | ||
| "idiom" : "universal" | ||
| } | ||
| ], | ||
| "info" : { | ||
| "author" : "xcode", | ||
| "version" : 1 | ||
| } | ||
| } |
Binary file added
BIN
+35.4 KB
DuckDuckGo/DaxOnboarding.xcassets/SafariBrowserIcon.imageset/SafariBrowserIcon.pdf
Binary file not shown.
128 changes: 128 additions & 0 deletions
128
DuckDuckGo/OnboardingExperiment/BrowsersComparison/BrowsersComparisonChart.swift
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,128 @@ | ||
| // | ||
| // BrowsersComparisonChart.swift | ||
| // DuckDuckGo | ||
| // | ||
| // Copyright © 2024 DuckDuckGo. All rights reserved. | ||
| // | ||
| // Licensed under the Apache License, Version 2.0 (the "License"); | ||
| // you may not use this file except in compliance with the License. | ||
| // You may obtain a copy of the License at | ||
| // | ||
| // http://www.apache.org/licenses/LICENSE-2.0 | ||
| // | ||
| // Unless required by applicable law or agreed to in writing, software | ||
| // distributed under the License is distributed on an "AS IS" BASIS, | ||
| // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| // See the License for the specific language governing permissions and | ||
| // limitations under the License. | ||
| // | ||
|
|
||
| import SwiftUI | ||
|
|
||
| // MARK: - Chart View | ||
|
|
||
| struct BrowsersComparisonChart: View { | ||
| let privacyFeatures: [BrowsersComparisonModel.PrivacyFeature] | ||
|
|
||
| var body: some View { | ||
| VStack(spacing: Metrics.stackSpacing) { | ||
| Header(browsers: BrowsersComparisonModel.Browser.allCases) | ||
| .frame(height: Metrics.headerHeight) | ||
|
|
||
| ForEach(privacyFeatures, id: \.type) { feature in | ||
| Row(feature: feature) | ||
| } | ||
|
|
||
| } | ||
| } | ||
| } | ||
|
|
||
| // MARK: - Header | ||
|
|
||
| extension BrowsersComparisonChart { | ||
|
|
||
| struct Header: View { | ||
| let browsers: [BrowsersComparisonModel.Browser] | ||
|
|
||
| var body: some View { | ||
| HStack(alignment: .top) { | ||
| Spacer() | ||
|
|
||
| ForEach(Array(browsers.enumerated()), id: \.offset) { index, browser in | ||
| Image(browser.image) | ||
| .resizable() | ||
| .aspectRatio(contentMode: .fit) | ||
| .frame(width: Metrics.imageContainerSize.width, height: Metrics.imageContainerSize.height) | ||
|
|
||
| if index < browsers.count - 1 { | ||
| Divider() | ||
| } | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| } | ||
|
|
||
| // MARK: - Row | ||
|
|
||
| extension BrowsersComparisonChart { | ||
|
|
||
| struct Row: View { | ||
| let feature: BrowsersComparisonModel.PrivacyFeature | ||
|
|
||
| var body: some View { | ||
| HStack { | ||
| Text(verbatim: feature.type.title) | ||
| .font(Metrics.font) | ||
| .foregroundColor(.primary) | ||
| .lineLimit(nil) | ||
| .lineSpacing(3) | ||
| .multilineTextAlignment(.leading) | ||
| .fixedSize(horizontal: false, vertical: true) | ||
|
|
||
| Spacer() | ||
|
|
||
| BrowsersSupport(browsersSupport: feature.browsersSupport) | ||
| } | ||
| Divider() | ||
| } | ||
| } | ||
|
|
||
| } | ||
|
|
||
| // MARK: - Row + BrowsersSupport | ||
|
|
||
| extension BrowsersComparisonChart.Row { | ||
|
|
||
| struct BrowsersSupport: View { | ||
| let browsersSupport: [BrowsersComparisonModel.PrivacyFeature.BrowserSupport] | ||
|
|
||
| var body: some View { | ||
| ForEach(Array(browsersSupport.enumerated()), id: \.offset) { index, browserSupport in | ||
| Image(browserSupport.availability.image) | ||
| .frame(width: Metrics.imageContainerSize.width, height: Metrics.imageContainerSize.height) | ||
|
|
||
| if index < browsersSupport.count - 1 { | ||
| Divider() | ||
| .frame(height: Metrics.imageContainerSize.height) | ||
| } | ||
| } | ||
| } | ||
| } | ||
|
|
||
| } | ||
|
|
||
| // MARK: - Metrics | ||
|
|
||
| private enum Metrics { | ||
| static let stackSpacing: CGFloat = 0.0 | ||
| static let headerHeight: CGFloat = 60 | ||
| static let imageContainerSize = CGSize(width: 50.0, height: 50.0) | ||
| static let font = Font.system(size: 15.0) | ||
| } | ||
|
|
||
| #Preview { | ||
| BrowsersComparisonChart(privacyFeatures: BrowsersComparisonModel.privacyFeatures) | ||
| .padding() | ||
| } |
154 changes: 154 additions & 0 deletions
154
DuckDuckGo/OnboardingExperiment/BrowsersComparison/BrowsersComparisonModel.swift
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,154 @@ | ||
| // | ||
| // BrowsersComparisonModel.swift | ||
| // DuckDuckGo | ||
| // | ||
| // Copyright © 2024 DuckDuckGo. All rights reserved. | ||
| // | ||
| // Licensed under the Apache License, Version 2.0 (the "License"); | ||
| // you may not use this file except in compliance with the License. | ||
| // You may obtain a copy of the License at | ||
| // | ||
| // http://www.apache.org/licenses/LICENSE-2.0 | ||
| // | ||
| // Unless required by applicable law or agreed to in writing, software | ||
| // distributed under the License is distributed on an "AS IS" BASIS, | ||
| // WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. | ||
| // See the License for the specific language governing permissions and | ||
| // limitations under the License. | ||
| // | ||
|
|
||
| import Foundation | ||
|
|
||
| struct BrowsersComparisonModel { | ||
|
|
||
| static let privacyFeatures: [PrivacyFeature] = { | ||
| PrivacyFeature.FeatureType.allCases.map { featureType in | ||
| PrivacyFeature(type: featureType, browsersSupport: browsersSupport(for: featureType)) | ||
| } | ||
| }() | ||
|
|
||
| private static func browsersSupport(for feature: PrivacyFeature.FeatureType) -> [PrivacyFeature.BrowserSupport] { | ||
| Browser.allCases.map { browser in | ||
| let availability: PrivacyFeature.Availability | ||
| switch feature { | ||
| case .privateSearch: | ||
| switch browser { | ||
| case .ddg: | ||
| availability = .available | ||
| case .safari: | ||
| availability = .unavailable | ||
| } | ||
| case .blockThirdPartyTrackers: | ||
| switch browser { | ||
| case .ddg: | ||
| availability = .available | ||
| case .safari: | ||
| availability = .partiallyAvailable | ||
| } | ||
| case .blockCookiePopups: | ||
| switch browser { | ||
| case .ddg: | ||
| availability = .available | ||
| case .safari: | ||
| availability = .unavailable | ||
| } | ||
| case .blockCreepyAds: | ||
| switch browser { | ||
| case .ddg: | ||
| availability = .available | ||
| case .safari: | ||
| availability = .unavailable | ||
| } | ||
| case .eraseBrowsingData: | ||
| switch browser { | ||
| case .ddg: | ||
| availability = .available | ||
| case .safari: | ||
| availability = .unavailable | ||
| } | ||
| } | ||
|
|
||
| return PrivacyFeature.BrowserSupport(browser: browser, availability: availability) | ||
| } | ||
| } | ||
|
|
||
| } | ||
|
|
||
| // MARK: - Browser | ||
|
|
||
| extension BrowsersComparisonModel { | ||
|
|
||
| enum Browser: CaseIterable { | ||
| case safari | ||
| case ddg | ||
|
|
||
| var image: ImageResource { | ||
| switch self { | ||
| case .safari: .safariBrowserIcon | ||
| case .ddg: .ddgBrowserIcon | ||
| } | ||
| } | ||
| } | ||
|
|
||
| } | ||
|
|
||
| // MARK: - Privacy Feature | ||
|
|
||
| extension BrowsersComparisonModel { | ||
|
|
||
| struct PrivacyFeature { | ||
| let type: FeatureType | ||
| let browsersSupport: [BrowserSupport] | ||
| } | ||
|
|
||
| } | ||
|
|
||
| extension BrowsersComparisonModel.PrivacyFeature { | ||
|
|
||
| struct BrowserSupport { | ||
| let browser: BrowsersComparisonModel.Browser | ||
| let availability: Availability | ||
| } | ||
|
|
||
| enum FeatureType: CaseIterable { | ||
| case privateSearch | ||
| case blockThirdPartyTrackers | ||
| case blockCookiePopups | ||
| case blockCreepyAds | ||
| case eraseBrowsingData | ||
|
|
||
| var title: String { | ||
| switch self { | ||
| case .privateSearch: | ||
| UserText.DaxOnboardingExperiment.BrowsersComparison.Features.privateSearch | ||
| case .blockThirdPartyTrackers: | ||
| UserText.DaxOnboardingExperiment.BrowsersComparison.Features.trackerBlockers | ||
| case .blockCookiePopups: | ||
| UserText.DaxOnboardingExperiment.BrowsersComparison.Features.cookiePopups | ||
| case .blockCreepyAds: | ||
| UserText.DaxOnboardingExperiment.BrowsersComparison.Features.creepyAds | ||
| case .eraseBrowsingData: | ||
| UserText.DaxOnboardingExperiment.BrowsersComparison.Features.eraseBrowsingData | ||
| } | ||
| } | ||
| } | ||
|
|
||
| enum Availability: Identifiable { | ||
| case available | ||
| case partiallyAvailable | ||
| case unavailable | ||
|
|
||
| var id: Self { | ||
| self | ||
| } | ||
|
|
||
| var image: ImageResource { | ||
| switch self { | ||
| case .available: .checkGreen | ||
| case .partiallyAvailable: .stop | ||
| case .unavailable: .cross | ||
| } | ||
| } | ||
| } | ||
|
|
||
| } |
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