KOA-5354 Enable shadowless cards

Backpack-SwiftUI/Card/Classes/BPKCard.swift

@@ -24,10 +24,14 @@ public struct BPKCard<Content: View>: View {
     }
 
     public enum Elevation {
-        case `default`, focus
+        case `default`, focus, none
 
-        var shadow: BPKShadow {
-            self == .focus ? .lg : .sm
+        var shadow: BPKShadow? {
+            switch self {
+            case .none: return nil
+            case .focus: return .lg
+            case .`default`: return .sm
+            }
         }
 
         var backgroundColor: BPKColor {
@@ -77,7 +81,7 @@ public struct BPKCard<Content: View>: View {
         ))
         .shadow(elevation.shadow)
     }
-
+    
     public func onTapGesture(perform: @escaping () -> Void) -> BPKCard {
         var result = self
         result.tapAction = perform

Backpack-SwiftUI/Shadow/Classes/Generated/BPKShadow.swift → Backpack-SwiftUI/Shadow/Classes/BPKShadow.swift

@@ -15,7 +15,7 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
- 
+
 import SwiftUI
 
 public struct BPKShadow {
@@ -34,13 +34,15 @@ public struct BPKShadow {
     }
 }
 
-public extension BPKShadow {
-
-    /// The Skyscanner large shadow.
-    static let lg = BPKShadow(color: .shadowLgColor, radius: 16, offset: Offset(x: 0, y: 4), opacity: 0.15)
-
-    /// The Skyscanner small shadow.
-    static let sm = BPKShadow(color: .shadowSmColor, radius: 3, offset: Offset(x: 0, y: 1), opacity: 0.15)
+extension View {
+    @ViewBuilder
+    func shadow(_ shadow: BPKShadow?) -> some View {
+        if let shadow = shadow {
+            self.shadow(shadow)
+        } else {
+            self
+        }
+    }
 }
 
 public extension View {

Backpack-SwiftUI/Shadow/Classes/Generated/BPKShadow+Generated.swift

@@ -0,0 +1,26 @@
+/*
+ * Backpack - Skyscanner's Design System
+ *
+ * Copyright 2018 Skyscanner Ltd
+ *
+ * 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.
+ */
+
+public extension BPKShadow {
+
+    /// The Skyscanner large shadow.
+    static let lg = BPKShadow(color: .shadowLgColor, radius: 16, offset: Offset(x: 0, y: 4), opacity: 0.15)
+
+    /// The Skyscanner small shadow.
+    static let sm = BPKShadow(color: .shadowSmColor, radius: 3, offset: Offset(x: 0, y: 1), opacity: 0.15)
+}

Backpack-SwiftUI/Tests/Card/BPKCardViewTests.swift

@@ -40,6 +40,13 @@ class BPKCardViewTests: XCTestCase {
         )
     }
 
+    func testCardNoShadow() {
+        assertSnapshot(
+            BPKCard(elevation: .none) { content("No Shadow") }
+                .padding()
+        )
+    }
+
     func testCardNotPadded() {
         assertSnapshot(
             BPKCard(padding: .none) { content("Not Padded") }

Backpack/Card/Classes/BPKCard.h

@@ -36,6 +36,11 @@ IB_DESIGNABLE @interface BPKCard : UIControl
  */
 @property(nonatomic, assign, getter=isPadded) IBInspectable BOOL padded;
 
+/**
+ * Whether the card should have a shadow or not.
+ */
+@property(nonatomic, assign) IBInspectable BOOL isElevated;
+
 /**
  * Determines how the card should appear to assistive technology.
  * Default is BPKCardConfigurationContainer.

Backpack/Card/Classes/BPKCard.m

@@ -87,6 +87,12 @@ - (void)setPadded:(BOOL)padded {
     [self updateCorners];
 }
 
+- (void)setIsElevated:(BOOL)isElevated {
+    BPKAssertMainThread();
+    _isElevated = isElevated;
+    [self updateShadows];
+}
+
 - (void)setCornerStyle:(BPKCardCornerStyle)cornerStyle {
     BPKAssertMainThread();
     _cornerStyle = cornerStyle;
@@ -96,8 +102,7 @@ - (void)setCornerStyle:(BPKCardCornerStyle)cornerStyle {
 - (void)setSelected:(BOOL)selected {
     BPKAssertMainThread();
     [super setSelected:selected];
-    BPKShadow *shadow = selected ? [BPKShadow shadowLg] : [BPKShadow shadowSm];
-    [shadow applyToLayer:self.layer];
+    [self updateShadows];
     [self updateAccessibilityTraits];
 }
 
@@ -150,7 +155,8 @@ - (void)setupWithPadded:(BOOL)padded cornerStyle:(BPKCardCornerStyle)cornerStyle
     [self.layer addSublayer:self.tintLayer];
 
     self.backgroundColor = BPKColor.backgroundTertiaryColor;
-    [[BPKShadow shadowSm] applyToLayer:self.layer];
+    self.isElevated = YES;
+    [self updateShadows];
 
     self.innerView = [[UIView alloc] initWithFrame:CGRectZero];
     self.innerView.layer.masksToBounds = YES;
@@ -169,6 +175,16 @@ - (void)setupWithPadded:(BOOL)padded cornerStyle:(BPKCardCornerStyle)cornerStyle
     ]];
 }
 
+- (void)updateShadows {
+    if (!self.isElevated) {
+        // if `elevated` is changed after it's been drawn, hide the shadow
+        self.layer.shadowOpacity = 0;
+        return;
+    }
+    BPKShadow *shadow = self.selected ? [BPKShadow shadowLg] : [BPKShadow shadowSm];
+    [shadow applyToLayer:self.layer];
+}
+
 - (void)updateCorners {
     CGFloat cornerRadius = 0;
 

Example/Backpack/SwiftUI/Components/Card/CardExampleView.swift

@@ -30,6 +30,9 @@ struct CardExampleView: View {
                 BPKCard(elevation: .focus) {
                     content(title: "Focused")
                 }
+                BPKCard(elevation: .none) {
+                    content(title: "Not elevated")
+                }
                 BPKCard(padding: .none) {
                     content(title: "Not Padded")
                 }

Example/Backpack/UIKit/Components/Card/CardsViewController.swift

@@ -16,16 +16,17 @@
  * limitations under the License.
  */
 
-import Backpack.Card
+import Backpack
 
 class CardsViewController: UIViewController {
     @IBOutlet weak var card: BPKCard!
-    var padded: Bool = true
-    var selected: Bool = false
+    var padded = true
+    var selected = false
     var configuration: BPKCardConfiguration = BPKCardConfigurationContainer()
     var backgroundColor: UIColor?
-    var cornerStyle: BPKCardCornerStyle = .small
-
+    var cornerStyle = BPKCardCornerStyle.small
+    var isElevated = true
+
     override func viewDidLoad() {
         super.viewDidLoad()
 
@@ -43,6 +44,7 @@ class CardsViewController: UIViewController {
         card.isPadded = padded
         card.cornerStyle = cornerStyle
         card.isSelected = selected
+        card.isElevated = isElevated
         card.configuration = configuration
         if backgroundColor != nil {
             card.backgroundColor = backgroundColor

Example/Backpack/Utils/FeatureStories/Groups/CardGroups.swift

@@ -45,6 +45,7 @@ struct CardGroupsProvider {
             cellDataSources: [
                 presentableCard("Default") { _ in },
                 presentableCard("Button") { $0.configuration = .button },
+                presentableCard("Not elevated") { $0.isElevated = false },
                 presentableCard("Link") { $0.configuration = .link },
                 presentableCard("Without padding") { $0.padded = false },
                 presentableCard("Selected") { $0.selected = true },

Example/SnapshotTests/BPKCardSnapshotTest.m

@@ -99,6 +99,26 @@ - (void)testViewSnapshotWithoutPaddedAndLargeCornerStyle {
     BPKSnapshotVerifyViewDark(darkView, nil);
 }
 
+- (UIView *)createViewSnapshotWithoutElevation {
+    UIView *parentView = [[UIView alloc] initWithFrame:CGRectZero];
+    BPKCard *card = [[BPKCard alloc] initWithPadded:NO cornerStyle:BPKCardCornerStyleLarge];
+    card.isElevated = NO;
+    UIView *innerView = [[UIView alloc] initWithFrame:CGRectZero];
+    innerView.backgroundColor = [BPKColor panjin];
+
+    [self configureCard:card withInnerView:innerView];
+    [self configureParentView:parentView forCard:card];
+    return parentView;
+}
+
+- (void)testViewSnapshotWithoutElevation {
+    UIView *lightView = [self createViewSnapshotWithoutElevation];
+    UIView *darkView = [self createViewSnapshotWithoutElevation];
+
+    BPKSnapshotVerifyViewLight(lightView, nil);
+    BPKSnapshotVerifyViewDark(darkView, nil);
+}
+
 - (UIView *)createViewSnapshotWithPadded {
     UIView *parentView = [[UIView alloc] initWithFrame:CGRectZero];
     BPKCard *card = [[BPKCard alloc] initWithPadded:YES];

scripts/gulp/generation/swiftui.js

@@ -21,7 +21,11 @@ const rename = require('gulp-rename');
 const swiftUI = (generate) => {
   return [
     { name: 'Spacing' },
-    { name: 'Shadow' },
+    {
+      destinationFolder: 'Shadow',
+      generatedFileName: 'Shadow+Generated',
+      templateName: 'Shadow'
+    },
     {
       destinationFolder: 'Font',
       generatedFileName: 'FontStyle',

templates/swiftui/Shadow.njk

@@ -15,38 +15,9 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
-import SwiftUI
-
-public struct BPKShadow {
-    let color: BPKColor
-    let radius: CGFloat
-    let offset: Offset
-    let opacity: Double
-
-    struct Offset {
-        let x: CGFloat
-        let y: CGFloat
-
-        static func y(_ y: CGFloat) -> Offset {
-            Offset(x: 0, y: y)
-        }
-    }
-}
 
 public extension BPKShadow {
     {% for s in shadow %}
     /// The Skyscanner {{s.legibleName}} shadow.
     static let {{s.swiftuiName}} = BPKShadow(color: .{{s.name}}Color, radius: {{s.radius}}, offset: Offset(x: {{s.offset.x}}, y: {{s.offset.y}}), opacity: {{s.opacity}})
 {% endfor %}}
-
-public extension View {
-    func shadow(_ shadow: BPKShadow) -> some View {
-        self.shadow(
-            color: Color(shadow.color).opacity(shadow.opacity),
-            radius: shadow.radius,
-            x: shadow.offset.x,
-            y: shadow.offset.y
-        )
-    }
-}