diff --git a/playbook/app/pb_kits/playbook/pb_card/docs/_card_background_swift.md b/playbook/app/pb_kits/playbook/pb_card/docs/_card_background_swift.md new file mode 100644 index 0000000000..e4b9f89c0c --- /dev/null +++ b/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) + } + } +``` diff --git a/playbook/app/pb_kits/playbook/pb_card/docs/_card_border_none_swift.md b/playbook/app/pb_kits/playbook/pb_card/docs/_card_border_none_swift.md new file mode 100644 index 0000000000..bc2baead83 --- /dev/null +++ b/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) + } +``` diff --git a/playbook/app/pb_kits/playbook/pb_card/docs/_card_border_radius_swift.md b/playbook/app/pb_kits/playbook/pb_card/docs/_card_border_radius_swift.md new file mode 100644 index 0000000000..68d6dc5770 --- /dev/null +++ b/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) + } + } + `````` diff --git a/playbook/app/pb_kits/playbook/pb_card/docs/_card_header_swift.md b/playbook/app/pb_kits/playbook/pb_card/docs/_card_header_swift.md new file mode 100644 index 0000000000..e21816eccf --- /dev/null +++ b/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) + } +} +``` diff --git a/playbook/app/pb_kits/playbook/pb_card/docs/_card_highlight_swift.md b/playbook/app/pb_kits/playbook/pb_card/docs/_card_highlight_swift.md new file mode 100644 index 0000000000..f2e5e2d473 --- /dev/null +++ b/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) + } + } +``` diff --git a/playbook/app/pb_kits/playbook/pb_card/docs/_card_light_swift.md b/playbook/app/pb_kits/playbook/pb_card/docs/_card_light_swift.md new file mode 100644 index 0000000000..612784a97a --- /dev/null +++ b/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) + } +``` diff --git a/playbook/app/pb_kits/playbook/pb_card/docs/_card_padding_swift.md b/playbook/app/pb_kits/playbook/pb_card/docs/_card_padding_swift.md new file mode 100644 index 0000000000..131e09d649 --- /dev/null +++ b/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) + } + } +``` diff --git a/playbook/app/pb_kits/playbook/pb_card/docs/_card_props_swift.md b/playbook/app/pb_kits/playbook/pb_card/docs/_card_props_swift.md new file mode 100644 index 0000000000..41c5e15dc7 --- /dev/null +++ b/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` | diff --git a/playbook/app/pb_kits/playbook/pb_card/docs/_card_selected_swift.md b/playbook/app/pb_kits/playbook/pb_card/docs/_card_selected_swift.md new file mode 100644 index 0000000000..e69de29bb2 diff --git a/playbook/app/pb_kits/playbook/pb_card/docs/_card_separator_swift.md b/playbook/app/pb_kits/playbook/pb_card/docs/_card_separator_swift.md new file mode 100644 index 0000000000..aa70929fee --- /dev/null +++ b/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) + } +``` diff --git a/playbook/app/pb_kits/playbook/pb_card/docs/_card_shadow_swift.md b/playbook/app/pb_kits/playbook/pb_card/docs/_card_shadow_swift.md new file mode 100644 index 0000000000..accf3900cd --- /dev/null +++ b/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) + } + } +``` diff --git a/playbook/app/pb_kits/playbook/pb_card/docs/_card_styles_swift.md b/playbook/app/pb_kits/playbook/pb_card/docs/_card_styles_swift.md new file mode 100644 index 0000000000..06bebef2e5 --- /dev/null +++ b/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) + } + } +``` diff --git a/playbook/app/pb_kits/playbook/pb_card/docs/_card_tag_swift.md b/playbook/app/pb_kits/playbook/pb_card/docs/_card_tag_swift.md new file mode 100644 index 0000000000..e69de29bb2 diff --git a/playbook/app/pb_kits/playbook/pb_card/docs/example.yml b/playbook/app/pb_kits/playbook/pb_card/docs/example.yml index 3f78baddb3..8f216f3aff 100755 --- a/playbook/app/pb_kits/playbook/pb_card/docs/example.yml +++ b/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: "" \ No newline at end of file