KOA-5354 Enable shadowless cards (#1344)

* enable shadowless cards

* using enum case instead of nullable

* swiftui snapshot test

* moving extension away from generated folder

* moving static code away from generation

* moving shadow test file into the project

* reverting screenshots

* adding docs to internal shadow method

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/Card/README.md

@@ -26,6 +26,7 @@ BPKCard(padding: .none) {
 Set the elevation to:
 * `.default`
 * `.focus`
+* `.none`
 
 ```swift
 BPKCard(elevation: .focus) {

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,17 @@ 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 {
+    /// This method is internal by design.
+    /// It is not meant to be used by third-parties.
+    @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;
 

Backpack/Card/README.md

@@ -2,12 +2,14 @@
 
 ## Usage
 
-`BPKCard` contains the Backpack Card component. The card is a simple control view with a shadow, offering user interaction. It has a padded and non-padded variation. `BPKCard` can only have 1 direct subview and will add the appropriate constraints automatically when calling setting the `subview` property.
+`BPKCard` contains the Backpack Card component. The card is a simple control view with or without a shadow, offering user interaction. It has a padded and non-padded variation. `BPKCard` can only have 1 direct subview and will add the appropriate constraints automatically when calling setting the `subview` property.
 
 `BPKDividedCard` contains the Backpack Divided Card component. The divided card is a subclass of `BPKCard`. It can have 2 subviews and will add the appropriate constraints automatically when `-initWithPrimarySubview:secondarySubview:padded`/`init(primarySubview: secondarySubview: padded: )` or `-setPrimarySubview:secondarySubview`/`setSubviews(primarySubview: secondarySubview:)` are called. It's axis can be vertical or horizontal.
 
 Cards have an accessibility configuration. By default this is `Container` which means the card is invisible to assistive technology. In this case, ensure that the content of the card provides users of AT with the same action as tapping the card, and explain actions clearly.
 
+Use the `isElevated` property to enable or disable shadows on the card.
+
 If using a `Button` or `Link` configuration, ensure that the accessibilityLabel used describes the whole content of the card and the same action.
 
 Do not use `Button` or `Link` configurations if the card has multiple actions or if the copy is long.
@@ -22,6 +24,7 @@ Do not use `Button` or `Link` configurations if the card has multiple actions or
 BPKCard *card = [[BPKCard alloc] initWithPadded:YES];
 [card setSubview:myInnerView];
 card.padded = NO;
+card.isElevated = NO;
 ```
 
 **`BPKDividedCard`**
@@ -44,6 +47,7 @@ import Backpack
 let card = BPKCard(paddded: true)
 card.subview = myInnerView
 card.padded = false
+card.isElevated = false
 ```
 
 **`BPKDividedCard`**

Backpack/Tests/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];

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 },

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
-        )
-    }
-}