Add FXIOS-7434-7436 [v120] Add docc for cardview and shadow card view (…

…#16806)

* Fix typo

* Add card view docc

* Add shadow card view docc

* Fix spacing

* Fix typo, add doc for VM

---------

Co-authored-by: Winnie Teichmann <[email protected]>

BrowserKit/Sources/ComponentLibrary/CardView.swift

@@ -5,6 +5,7 @@
 import Common
 import UIKit
 
+/// The view model used to configure a CardView
 public struct CardViewModel {
     public let view: UIView
     public let a11yId: String

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

@@ -1,10 +1,16 @@
 # ``ComponentLibrary/CardView``
 
-TODO with FXIOS-7434
+The card view which is used to contain different type of content.
 
 ## Overview
 
-TODO with FXIOS-7434
+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
+
+> This image is illustrative only. For precise examples of iOS implementation, please run the SampleApplication.
+
+![The CardView on iOS](CardView)
 
 ## Topics
 

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

@@ -4,11 +4,11 @@ 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
 
-> This image are illustrative only. For precise examples of iOS implementation, please run the SampleApplication.
+> This image is illustrative only. For precise examples of iOS implementation, please run the SampleApplication.
 
 ![The PrimaryButton on iOS](PrimaryButton)
 

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

@@ -4,11 +4,11 @@ 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
 
-> This image are illustrative only. For precise examples of iOS implementation, please run the SampleApplication.
+> This image is illustrative only. For precise examples of iOS implementation, please run the SampleApplication.
 
 ![The SecondaryButton on iOS](SecondaryButton)
 

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

@@ -1,10 +1,16 @@
 # ``ComponentLibrary/ShadowCardView``
 
-TODO with FXIOS-7436
+The shadow card view which is used to contain different type of content.
 
 ## Overview
 
-TODO with FXIOS-7436
+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
+
+> This image is illustrative only. For precise examples of iOS implementation, please run the SampleApplication.
+
+![The ShadowCardView on iOS](ShadowCardView)
 
 ## Topics
 

BrowserKit/Sources/ComponentLibrary/ShadowCardView.swift

@@ -5,6 +5,7 @@
 import Common
 import UIKit
 
+/// The view model used to configure a ShadowCardView
 public struct ShadowCardViewModel {
     public let view: UIView
     public let a11yId: String

SampleComponentLibraryApp/SampleComponentLibraryApp/CardView/CardViewViewController.swift

@@ -45,7 +45,7 @@ class CardViewViewController: UIViewController, Themeable {
 
         contentLabel.text = loremIpsum
         let viewModel = CardViewModel(view: contentLabel, a11yId: "CardView", backgroundColor: { theme in
-            return theme.colors.layerAccentPrivateNonOpaque
+            return theme.colors.layer3
         })
         cardView.configure(viewModel)
 
@@ -67,6 +67,7 @@ class CardViewViewController: UIViewController, Themeable {
     // MARK: Themeable
 
     func applyTheme() {
+        contentLabel.textColor = themeManager.currentTheme.colors.textPrimary
         view.backgroundColor = themeManager.currentTheme.colors.layer1
     }
 }

SampleComponentLibraryApp/SampleComponentLibraryApp/ShadowCardView/ShadowCardViewViewController.swift

@@ -65,6 +65,7 @@ class ShadowCardViewViewController: UIViewController, Themeable {
     // MARK: Themeable
 
     func applyTheme() {
+        contentLabel.textColor = themeManager.currentTheme.colors.textPrimary
         view.backgroundColor = themeManager.currentTheme.colors.layer1
     }
 }