[PBIOS-161] Docs: Card (#2808)

[PBIOS-161](https://nitro.powerhrg.com/runway/backlog_items/PBIOS-161)




https://github.com/powerhome/playbook/assets/92755007/66e28dac-12fc-44a4-965a-bac0b0c9e03a



**How to test?** Steps to confirm the desired behavior:
1. Pull down branch to your local env and navigate to the cards doc page


#### Checklist:
- [x] **LABELS** Add a label: `enhancement`, `bug`, `improvement`, `new
kit`, `deprecated`, or `breaking`. See [Changelog &
Labels](https://github.com/powerhome/playbook/wiki/Changelog-&-Labels)
for details.
- [x] **DEPLOY** I have added the `milano` label to show I'm ready for a
review.
- [ ] **TESTS** I have added test coverage to my code.

---------

Co-authored-by: Ísis <isisms2602@gmail.com>

playbook/app/pb_kits/playbook/pb_card/docs/_card_background_swift.md

@@ -0,0 +1,29 @@
+![card-background-colors](https://github.com/powerhome/playbook/assets/92755007/9b9a6519-0f79-4d8c-a58a-ea5799f9e679)
+
+```swift
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBCard {
+    Text(text).pbFont(.body)
+  }
+
+  PBCard(backgroundColor: .background(.light)) {
+    Text("Light").pbFont(.body, color: .text(.light))
+  }
+
+  PBCard(backgroundColor: .background(.dark)) {
+    Text("Dark").pbFont(.body, color: .text(.light))
+  }
+
+  PBCard(backgroundColor: .product(.product1, category: .background)) {
+    Text("Product 1 Background").pbFont(.body, color: .white)
+  }
+
+  PBCard(backgroundColor: .product(.product7, category: .highlight)) {
+    Text("Product 7 Highlight").pbFont(.body, color: .white)
+  }
+
+  PBCard(backgroundColor: .product(.product2, category: .highlight)) {
+    Text("Product 2 Highlight").pbFont(.body, color: .white)
+  }
+ }
+```

playbook/app/pb_kits/playbook/pb_card/docs/_card_border_none_swift.md

@@ -0,0 +1,7 @@
+![card-no-border](https://github.com/powerhome/playbook/assets/92755007/a4f3e9e1-6770-425f-b882-dded98863917)
+
+```swift
+PBCard(border: false) {
+  Text(text).pbFont(.body)
+ }
+```

playbook/app/pb_kits/playbook/pb_card/docs/_card_border_radius_swift.md

@@ -0,0 +1,33 @@
+![card-border-radius](https://github.com/powerhome/playbook/assets/92755007/c2c0965f-7c4f-4e7b-8c94-f187c724939d)
+
+```swift
+VStack(spacing: Spacing.small) {
+  PBCard(borderRadius: BorderRadius.none) {
+    Text("None").pbFont(.body)
+  }
+
+  PBCard(borderRadius: BorderRadius.xSmall) {
+    Text("X Small").pbFont(.body)
+  }
+
+  PBCard(borderRadius: BorderRadius.small) {
+    Text("Small").pbFont(.body)
+  }
+
+  PBCard(borderRadius: BorderRadius.medium) {
+    Text("Medium").pbFont(.body)
+  }
+
+  PBCard(borderRadius: BorderRadius.large) {
+    Text("Large").pbFont(.body)
+  }
+
+   PBCard(borderRadius: BorderRadius.xLarge) {
+    Text("X Large").pbFont(.body)
+  }
+
+   PBCard(borderRadius: BorderRadius.rounded) {
+    Text("Rounded").pbFont(.body)
+  }
+ }
+ ``````

playbook/app/pb_kits/playbook/pb_card/docs/_card_header_swift.md

@@ -0,0 +1,33 @@
+![card-header](https://github.com/powerhome/playbook/assets/92755007/a8fd21a1-89cb-4ec2-97f6-d6427f1264c2)
+
+```swift
+Stack(spacing: Spacing.small) {
+  PBCard(padding: Spacing.none) {
+    PBCardHeader(color: .category(.category1)) {
+      Text("Category 1").pbFont(.body, color: .white).padding(Spacing.small)
+    }
+      Text("Body").pbFont(.body, color: .text(.default)).padding(Spacing.small)
+  }
+
+  PBCard(padding: Spacing.none) {
+    PBCardHeader(color: .category(.category3)) {
+      Text("Category 3").pbFont(.body, color: .black).padding(Spacing.small)
+    }
+    Text("Body").pbFont(.body, color: .text(.default)).padding(Spacing.small)
+  }
+
+  PBCard(padding: Spacing.none) {
+    PBCardHeader(color: .product(.product2, category: .background)) {
+      Text("Product 2 Background").pbFont(.body, color: .white).padding(Spacing.small)
+    }
+      Text("Body").pbFont(.body, color: .text(.default)).padding(Spacing.small)
+  }
+
+  PBCard(padding: Spacing.none) {
+    PBCardHeader(color: .product(.product6, category: .background)) {
+      Text("Product 6 Background").pbFont(.body, color: .white).padding(Spacing.small)
+    }
+      Text("Body").pbFont(.body, color: .text(.default)).padding(Spacing.small)
+  }
+}
+```

playbook/app/pb_kits/playbook/pb_card/docs/_card_highlight_swift.md

@@ -0,0 +1,17 @@
+![card-highlight](https://github.com/powerhome/playbook/assets/92755007/aba8c811-e21a-4aee-8d2d-64789989875d)
+
+```swift
+VStack(spacing: Spacing.small) {
+  PBCard(highlight: .side(.product(.product6, category: .highlight))) {
+    Text("Side Position & Product 6 Highlight Color").pbFont(.body)
+  }
+
+  PBCard(highlight: .top(.status(.warning))) {
+    Text("Top Position & Warning Color").pbFont(.body)
+  }
+
+  PBCard(highlight: .side(.category(.category2))) {
+    Text("Side Position & Category 2 Color").pbFont(.body)
+  }
+ }
+```

playbook/app/pb_kits/playbook/pb_card/docs/_card_light_swift.md

@@ -0,0 +1,7 @@
+![card-default](https://github.com/powerhome/playbook/assets/92755007/2209c5d4-806f-4a54-98f4-4ed864b7fad2)
+
+```swift
+PBCard {
+  Text("Card Content").pbFont(.body)
+ }
+```

playbook/app/pb_kits/playbook/pb_card/docs/_card_padding_swift.md

@@ -0,0 +1,33 @@
+![card-padding](https://github.com/powerhome/playbook/assets/92755007/b5f56638-2307-46fb-ac28-c4225cf3e051)
+
+```swift
+VStack(spacing: Spacing.small) {
+  PBCard(padding: Spacing.none) {
+    Text("None").pbFont(.body)
+  }
+
+  PBCard(padding: Spacing.xxSmall) {
+    Text("XX Small").pbFont(.body)
+  }
+
+  PBCard(padding: Spacing.xSmall) {
+    Text("X Small").pbFont(.body)
+  }
+
+  PBCard(padding: Spacing.small) {
+    Text("Small").pbFont(.body)
+  }
+
+  PBCard(padding: Spacing.medium) {
+    Text("Medium").pbFont(.body)
+  }
+
+  PBCard(padding: Spacing.large) {
+    Text("Large").pbFont(.body)
+  }
+
+  PBCard(padding: Spacing.xLarge) {
+    Text("X Large").pbFont(.body)
+  }
+ }
+```

playbook/app/pb_kits/playbook/pb_card/docs/_card_props_swift.md

@@ -0,0 +1,10 @@
+### Props
+| Name | Type | Description | Default | Values |
+| --- | ----------- | --------- | --------- | --------- |
+| **Background Color** | `Color` | Changes background color | `.card` | `Color` |
+| **Border** | `Bool` | Adds border around the Card |  `true` | `true` `false` |
+| **Border Radius** | `CGFloat` | Specifies the roundness of the Card | `BorderRadius.medium` | `BorderRadius.none` `BorderRadius.xSmall` `BorderRadius.small` `BorderRadius.medium` `BorderRadius.large` `BorderRadius.xLarge` `BorderRadius.rounded` |
+| **Highlight** | `Highlight` | Adds a border accent color | `.none` | `Color` |
+| **Padding** | `CGFloat` | Applies padding between text and border | `Spacing.medium` | `Spacing.none` `Spacing.xxSmall` `Spacing.xSmall` `Spacing.small` `Spacing.medium` `Spacing.large` `Spacing.xLarge` |
+| **Style** | `PBCardStyle` | Specifies the color of the border | `.default` | `.default` `.selected` `.error` `.inline` |
+| **Shadow** | `Shadow` | Applies shadow | `nil` | `Shadow.deep` `Shadow.deeper` `Shadow.deepest` `Shadow.none` |

playbook/app/pb_kits/playbook/pb_card/docs/_card_separator_swift.md

@@ -0,0 +1,11 @@
+![card-separator](https://github.com/powerhome/playbook/assets/92755007/5988d360-d603-4a11-b928-16fe57dc1aea)
+
+```swift
+PBCard(padding: Spacing.none) {
+  Text("Header").pbFont(.body).padding(Spacing.small)
+  PBSectionSeparator()
+  Text(loremIpsum).pbFont(.body).padding(Spacing.small)
+  PBSectionSeparator()
+  Text("Footer").pbFont(.body).padding(Spacing.small)
+ }
+```

playbook/app/pb_kits/playbook/pb_card/docs/_card_shadow_swift.md

@@ -0,0 +1,21 @@
+![card-shadow](https://github.com/powerhome/playbook/assets/92755007/7dd7edc1-a2b1-4e91-b271-9c897c9ededd)
+
+```swift
+VStack(spacing: Spacing.small) {
+  PBCard(shadow: Shadow.deep) {
+    Text("Deep").pbFont(.body)
+  }
+
+  PBCard(shadow: Shadow.deeper) {
+    Text("Deeper").pbFont(.body)
+  }
+
+  PBCard(shadow: Shadow.deepest) {
+    Text("Deepest").pbFont(.body)
+  }
+
+  PBCard(shadow: Shadow.none) {
+    Text("None").pbFont(.body)
+  }
+ }
+```

playbook/app/pb_kits/playbook/pb_card/docs/_card_styles_swift.md

@@ -0,0 +1,17 @@
+![card-styles](https://github.com/powerhome/playbook/assets/92755007/b6ea347b-6a7b-46e8-b4ce-213727587499)
+
+```swift
+VStack(alignment: .leading, spacing: Spacing.small) {
+  PBCard {
+    Text("Card Context").pbFont(.body)
+  }
+
+  PBCard(style: .selected()) {
+    Text("Card Context").pbFont(.body)
+  }
+
+  PBCard(style: .error) {
+    Text("Card Context").pbFont(.body)
+  }
+ }
+```

playbook/app/pb_kits/playbook/pb_card/docs/example.yml

@@ -25,3 +25,15 @@ examples:
   - card_separator: Separator Card
   - card_border_none: No Border
   - card_border_radius: Border Radius
+  swift:
+  - card_light_swift: Default
+  - card_background_swift: Card Backgrounds
+  - card_highlight_swift: Highlight Cards
+  - card_header_swift: Header Cards
+  - card_padding_swift: Padding Size
+  - card_shadow_swift: Shadow Size
+  - card_separator_swift: Separator Card
+  - card_border_none_swift: No Border
+  - card_border_radius_swift: Border Radius
+  - card_styles_swift: Styles
+  - card_props_swift: ""