Add FXIOS-7433-35-37 [v120] Add component library docc (#16831)

* Update docc for general components

* Update package resolve of sample app

BrowserKit/Sources/ComponentLibrary/ActionFooterView.swift

@@ -5,6 +5,7 @@
 import UIKit
 import Common
 
+/// The view model used to configure a `ActionFooterView`
 public struct ActionFooterViewModel {
     let title: String
     let actionTitle: String
@@ -43,7 +44,7 @@ public final class ActionFooterView: UIView, ThemeApplicable {
         label.adjustsFontForContentSizeCategory = true
     }
 
-    private lazy var primaryButton: ResizableButton = .build { button in
+    private lazy var linkButton: ResizableButton = .build { button in
         button.titleLabel?.font = DefaultDynamicFontHelper.preferredFont(
             withTextStyle: .footnote,
             size: UX.buttonSize)
@@ -65,10 +66,10 @@ public final class ActionFooterView: UIView, ThemeApplicable {
     public func configure(viewModel: ActionFooterViewModel) {
         self.viewModel = viewModel
         titleLabel.text = viewModel.title
-        primaryButton.setTitle(viewModel.actionTitle, for: .normal)
+        linkButton.setTitle(viewModel.actionTitle, for: .normal)
 
         titleLabel.accessibilityIdentifier = viewModel.a11yTitleIdentifier
-        primaryButton.accessibilityIdentifier = viewModel.a11yActionIdentifier
+        linkButton.accessibilityIdentifier = viewModel.a11yActionIdentifier
     }
 
     @objc
@@ -78,24 +79,24 @@ public final class ActionFooterView: UIView, ThemeApplicable {
 
     private func setupLayout() {
         addSubview(titleLabel)
-        addSubview(primaryButton)
+        addSubview(linkButton)
 
         NSLayoutConstraint.activate([
             titleLabel.topAnchor.constraint(equalTo: topAnchor),
-            titleLabel.bottomAnchor.constraint(equalTo: primaryButton.topAnchor),
+            titleLabel.bottomAnchor.constraint(equalTo: linkButton.topAnchor),
             titleLabel.leadingAnchor.constraint(equalTo: leadingAnchor),
             titleLabel.trailingAnchor.constraint(equalTo: trailingAnchor),
 
-            primaryButton.bottomAnchor.constraint(equalTo: bottomAnchor),
-            primaryButton.leadingAnchor.constraint(equalTo: leadingAnchor),
-            primaryButton.trailingAnchor.constraint(equalTo: trailingAnchor)
+            linkButton.bottomAnchor.constraint(equalTo: bottomAnchor),
+            linkButton.leadingAnchor.constraint(equalTo: leadingAnchor),
+            linkButton.trailingAnchor.constraint(equalTo: trailingAnchor)
         ])
     }
 
     // MARK: - ThemeApplicable
     public func applyTheme(theme: Common.Theme) {
-        primaryButton.setTitleColor(theme.colors.actionPrimary, for: .normal)
-        primaryButton.setTitleColor(theme.colors.actionPrimaryHover, for: .highlighted)
+        linkButton.setTitleColor(theme.colors.actionPrimary, for: .normal)
+        linkButton.setTitleColor(theme.colors.actionPrimaryHover, for: .highlighted)
         titleLabel.textColor = theme.colors.textSecondary
     }
 }

BrowserKit/Sources/ComponentLibrary/CollapsibleCardView.swift

@@ -5,6 +5,7 @@
 import Common
 import UIKit
 
+/// The view model used to configure a `CollapsibleCardView`
 public struct CollapsibleCardViewModel {
     public typealias ExpandState = CollapsibleCardView.ExpandButtonState
 

BrowserKit/Sources/ComponentLibrary/ContextualHintView/ContextualHintViewModel.swift

@@ -4,6 +4,7 @@
 
 import UIKit
 
+/// The view model used to configure a `ContextualHintView`
 public struct ContextualHintViewModel {
     public var isActionType: Bool
     public var actionButtonTitle: String

BrowserKit/Sources/ComponentLibrary/Documentation.docc/General Components/ActionFooterView.md

@@ -1,10 +1,16 @@
 # ``ComponentLibrary/ActionFooterView``
 
-TODO with FXIOS-7437
+A view which is used to contain footer information in form of a title and a link button.
 
 ## Overview
 
-TODO with FXIOS-7437
+The `ActionFooterView` is a subclass of the `UIView`. You should configure the action footer view content, accessibility identifiers and on tap action through it's view model ``ActionFooterViewModel``. 
+
+## Illustration
+
+> This image is illustrative only. For precise examples of iOS implementation, please run the SampleApplication.
+
+![The ActionFooterView on iOS](ActionFooterView)
 
 ## Topics
 

BrowserKit/Sources/ComponentLibrary/Documentation.docc/General Components/CardView.md

@@ -4,7 +4,7 @@ The card view which is used to contain different type of content.
 
 ## Overview
 
-The `CardView` is a subclass of the `UIView`. You should configure the card view content, accessibility identifier and background color through it's' view model ``CardViewModel``. The rounded corners and padding around the content of the view shouldn't be adjusted and should be used as is. For a card that has shadow, please see ``ShadowCardView``.
+The `CardView` is a subclass of the `UIView`. You should configure the card view content, accessibility identifier and background color through it's view model ``CardViewModel``. The rounded corners and padding around the content of the view shouldn't be adjusted and should be used as is. For a card that has shadow, please see ``ShadowCardView``.
 
 ## Illustration
 

BrowserKit/Sources/ComponentLibrary/Documentation.docc/General Components/CollapsibleCardView.md

@@ -1,10 +1,17 @@
 # ``ComponentLibrary/CollapsibleCardView``
 
-TODO with FXIOS-7435
+The collapsible card view opens to show content with a user press.
 
 ## Overview
 
-TODO with FXIOS-7435
+The `CollapsibleCardView` is a subclass of the `ShadowCardView`. You should configure the card view content view, accessibility identifier, and state through it's view model ``CollapsibleCardViewModel``. The rounded corners and padding around the content of the view shouldn't be adjusted and should be used as is.
+
+## Illustration
+
+> This image is illustrative only. For precise examples of iOS implementation, please run the SampleApplication.
+
+![The collapsed CollapsibleCardView on iOS](CollapsedCardView)
+![The expended CollapsibleCardView on iOS](ExpendedCardView)
 
 ## Topics
 

BrowserKit/Sources/ComponentLibrary/Documentation.docc/General Components/ContextualHintView.md

@@ -1,10 +1,16 @@
 # ``ComponentLibrary/ContextualHintView``
 
-TODO with FXIOS-7433
+The contextual hint view is a popover to present more context to the user.
 
 ## Overview
 
-TODO with FXIOS-7433
+The `ContextualHintView` is a subclass of the `UIView`. That view is basically the content that will be enclosed in a popover which includes an arrow. You should configure the contextual hint view arrow direction, title, accessibility identifier, and click actions through it's view model ``ContextualHintViewModel``. The popover size should be set with `preferredContentSize` normally in the `viewDidLayoutSubviews` instance method, as well as setting the `popoverPresentationController` delegate and source view.
+
+## Illustration
+
+> This image is illustrative only. For precise examples of iOS implementation, please run the SampleApplication.
+
+![The ContextualHintView on iOS](ContextualHintView)
 
 ## Topics
 

BrowserKit/Sources/ComponentLibrary/Documentation.docc/General Components/PrimaryRoundedButton.md

@@ -4,7 +4,7 @@ The button which is used for primary actions.
 
 ## Overview
 
-The `PrimaryRoundedButton` is a subclass of the `UIButton`. This means properties of the `UIButton` are accessible, but for easy conveniance it's recommended to configure the button title and accessibility identifier through it's' view model ``PrimaryRoundedButtonViewModel``. The colors, rounded corners and spacing of the button although accessible shouldn't be adjusted and should be used as is.
+The `PrimaryRoundedButton` is a subclass of the `UIButton`. This means properties of the `UIButton` are accessible, but for easy conveniance it's recommended to configure the button title and accessibility identifier through it's view model ``PrimaryRoundedButtonViewModel``. The colors, rounded corners and spacing of the button although accessible shouldn't be adjusted and should be used as is.
 
 ## Illustration
 

BrowserKit/Sources/ComponentLibrary/Documentation.docc/General Components/SecondaryRoundedButton.md

@@ -4,7 +4,7 @@ The button which is used for secondary actions.
 
 ## Overview
 
-The `SecondaryRoundedButton` is a subclass of the `UIButton`. This means properties of the `UIButton` are accessible, but for easy conveniance it's recommended to configure the button title and accessibility identifier through it's' view model ``SecondaryRoundedButtonViewModel``. The colors, rounded corners and spacing of the button although accessible shouldn't be adjusted and should be used as is.
+The `SecondaryRoundedButton` is a subclass of the `UIButton`. This means properties of the `UIButton` are accessible, but for easy conveniance it's recommended to configure the button title and accessibility identifier through it's view model ``SecondaryRoundedButtonViewModel``. The colors, rounded corners and spacing of the button although accessible shouldn't be adjusted and should be used as is.
 
 ## Illustration
 

BrowserKit/Sources/ComponentLibrary/Documentation.docc/General Components/ShadowCardView.md

@@ -4,7 +4,7 @@ The shadow card view which is used to contain different type of content.
 
 ## Overview
 
-The `ShadowCardView` is a subclass of the `UIView`. You should configure the shadow card view content and accessibility identifier through it's' view model ``ShadowCardViewModel``. The rounded corners, shadow and padding around the content of the view shouldn't be adjusted and should be used as is. For a card without a shadow, please see ``CardView``.
+The `ShadowCardView` is a subclass of the `UIView`. You should configure the shadow card view content and accessibility identifier through it's view model ``ShadowCardViewModel``. The rounded corners, shadow and padding around the content of the view shouldn't be adjusted and should be used as is. For a card without a shadow, please see ``CardView``.
 
 ## Illustration
 

SampleComponentLibraryApp/SampleComponentLibraryApp.xcodeproj/project.xcworkspace/xcshareddata/swiftpm/Package.resolved

@@ -32,8 +32,8 @@
       "kind" : "remoteSourceControl",
       "location" : "https://github.com/getsentry/sentry-cocoa.git",
       "state" : {
-        "revision" : "259d8bc75aa4028416535d35840ff19fc7661292",
-        "version" : "8.9.3"
+        "revision" : "7b0d185631a6d4b7756468efa464a68725c061d2",
+        "version" : "8.13.1"
       }
     },
     {

SampleComponentLibraryApp/SampleComponentLibraryApp/CollapsibleCardView/CardContentView.swift

@@ -21,7 +21,7 @@ class CardContentView: UIView, ThemeApplicable {
         fatalError("init(coder:) has not been implemented")
     }
 
-    func applyTheme(theme: Common.Theme) {
+    func applyTheme(theme: Theme) {
         contentLabel.textColor = theme.colors.textPrimary
     }
 
@@ -35,4 +35,4 @@ class CardContentView: UIView, ThemeApplicable {
             contentLabel.bottomAnchor.constraint(lessThanOrEqualTo: bottomAnchor)
         ])
     }
-    }
+}

SampleComponentLibraryApp/SampleComponentLibraryApp/CollapsibleCardView/CollapsibleCardViewViewController.swift

@@ -51,6 +51,7 @@ class CollapsibleCardViewViewController: UIViewController, Themeable {
         cardView.configure(viewModel)
 
         cardView.applyTheme(theme: themeManager.currentTheme)
+        contentView.applyTheme(theme: themeManager.currentTheme)
     }
 
     private func setupView() {

SampleComponentLibraryApp/SampleComponentLibraryApp/ContextualHintView/ContextualHintViewViewController.swift

@@ -43,6 +43,7 @@ class ContextualHintViewViewController: UIViewController, Themeable {
             self?.dismiss(animated: true, completion: nil)
         }
         hintView.configure(viewModel: viewModel)
+        hintView.applyTheme(theme: themeManager.currentTheme)
 
         setupView()
     }