Added solid line style for BPKDivider (#1455)

* Added solid line style for BPKDivider * Updated screen shot with correct iOS version * Fix linting * Applied PR comments * Turned off record mode Co-authored-by: Gert-Jan Vercauteren <[email protected]>
Skyscanner · Oct 19, 2022 · bdbed41 · bdbed41
1 parent 828689c
commit bdbed41
Show file tree

Hide file tree

Showing 18 changed files with 212 additions and 5 deletions.
diff --git a/Backpack/Card/Classes/BPKCardDivider.h b/Backpack/Card/Classes/BPKCardDivider.h
@@ -20,6 +20,7 @@
 #import <UIKit/UIKit.h>
 
 #import "BPKCard.h"
+#import "BPKCardDividerLineStyleValues.h"
 
 NS_ASSUME_NONNULL_BEGIN
 
@@ -34,12 +35,25 @@ IB_DESIGNABLE @interface BPKCardDivider : UIView
 @property(nonatomic, assign) IBInspectable UILayoutConstraintAxis orientation;
 
 /**
- * Create a `BPKCardDivider` with orientation initially set.
+ * The line-style to apply to the divider.
+ */
+@property(nonatomic, assign) IBInspectable BPKCardDividerLineStyle lineStyle;
+
+/**
+ * Create a `BPKCardDivider` with orientation and line style initially set.
  *
  * @param orientation Whether the divider is for a vertical or horizontal layout.
  */
 - (instancetype)initWithOrientation:(UILayoutConstraintAxis)orientation NS_DESIGNATED_INITIALIZER;
 
+/**
+ * Create a `BPKCardDivider` with orientation and line style initially set.
+ *
+ * @param orientation Whether the divider is for a vertical or horizontal layout.
+ * @param lineStyle The line style for the divider.
+ */
+- (instancetype)initWithOrientation:(UILayoutConstraintAxis)orientation lineStyle:(BPKCardDividerLineStyle)lineStyle NS_DESIGNATED_INITIALIZER;
+
 /// :nodoc:
 - (instancetype)initWithFrame:(CGRect)frame
     __attribute__((unavailable("CardDivider cannot be initialised with frame. Use `initWithOrientation` instead")));

diff --git a/Backpack/Card/Classes/BPKCardDivider.m b/Backpack/Card/Classes/BPKCardDivider.m
@@ -36,17 +36,38 @@ - (instancetype)initWithOrientation:(UILayoutConstraintAxis)orientation {
 
     if (self) {
         self.orientation = orientation;
+        self.lineStyle = BPKCardDividerDefaultLineStyle;
         [self setupViews];
     }
 
     return self;
 }
 
+- (instancetype)initWithOrientation:(UILayoutConstraintAxis)orientation lineStyle:(BPKCardDividerLineStyle)lineStyle {
+    self = [super initWithFrame:CGRectZero];
+
+    if (self) {
+        self.orientation = orientation;
+        self.lineStyle = lineStyle;
+        [self setupViews];
+    }
+
+    return self;
+}
+
+- (void)setLineStyle:(BPKCardDividerLineStyle)lineStyle {
+    _lineStyle = lineStyle;
+    self.dottedLine.lineDashPattern = lineStyle == BPKCardDividerLineDotted ? @[@5, @3] : nil;
+}
+
 - (void)setupViews {
     self.dottedLine = [[CAShapeLayer alloc] initWithLayer:self];
     self.dottedLine.lineWidth = 1;
     self.dottedLine.fillColor = nil;
-    self.dottedLine.lineDashPattern = @[@5, @3];
+
+    if (_lineStyle == BPKCardDividerLineDotted) {
+        self.dottedLine.lineDashPattern = @[@5, @3];
+    }
     [self.layer addSublayer:self.dottedLine];
     [self updateLineColor];
 }

diff --git a/Backpack/Card/Classes/BPKCardDividerLineStyleValues.h b/Backpack/Card/Classes/BPKCardDividerLineStyleValues.h
@@ -0,0 +1,37 @@
+/*
+ * 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.
+ */
+
+/**
+ * Enum values for specifying line style
+ */
+typedef NS_ENUM(NSUInteger, BPKCardDividerLineStyle) {
+    /**
+     * Dotted line style.
+     */
+    BPKCardDividerLineDotted = 0,
+
+    /**
+     * Solid link style.
+     */
+    BPKCardDividerLineSolid = 1,
+};
+
+/**
+ * The default line-style that is applied to the divider card when none is specified.
+ */
+FOUNDATION_EXPORT BPKCardDividerLineStyle const BPKCardDividerDefaultLineStyle;
diff --git a/Backpack/Card/Classes/BPKCardDividerLineStyleValues.m b/Backpack/Card/Classes/BPKCardDividerLineStyleValues.m
@@ -0,0 +1,21 @@
+/*
+ * 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.
+ */
+
+#import "BPKCardDividerLineStyleValues.h"
+
+BPKCardDividerLineStyle const BPKCardDividerDefaultLineStyle = BPKCardDividerLineDotted;
diff --git a/Backpack/Card/Classes/BPKDividedCard.h b/Backpack/Card/Classes/BPKDividedCard.h
@@ -50,6 +50,11 @@ IB_DESIGNABLE @interface BPKDividedCard : BPKCard
  */
 @property(nonatomic, assign, nullable) UIView *secondarySubview;
 
+/**
+ * The line-style to apply to the divider.
+ */
+@property(nonatomic, assign) IBInspectable BPKCardDividerLineStyle lineStyle;
+
 /**
  * Create a `BPKDividedCard` with padded initially set.
  *
@@ -77,7 +82,22 @@ IB_DESIGNABLE @interface BPKDividedCard : BPKCard
 - (instancetype)initWithPrimarySubview:(UIView *_Nullable)primarySubview
                       secondarySubview:(UIView *_Nullable)secondarySubview
                                 padded:(BOOL)padded
-                           cornerStyle:(BPKCardCornerStyle)cornerStyle NS_DESIGNATED_INITIALIZER;
+                           cornerStyle:(BPKCardCornerStyle)cornerStyle;
+
+/**
+ * Create a `BPKDividedCard` with two subviews.
+ *
+ * @param primarySubview The primary subview for the divided card.
+ * @param secondarySubview The secondary subview for the divided card.
+ * @param padded Whether the card should have padding or not.
+ * @param cornerStyle The style of the corners that should be applied to the card.
+ * @param lineStyle The style of the divider line that should be applied to the card.
+ */
+- (instancetype)initWithPrimarySubview:(UIView *_Nullable)primarySubview
+                      secondarySubview:(UIView *_Nullable)secondarySubview
+                                padded:(BOOL)padded
+                           cornerStyle:(BPKCardCornerStyle)cornerStyle
+                             lineStyle:(BPKCardDividerLineStyle)lineStyle NS_DESIGNATED_INITIALIZER;
 
 /**
  * Create a `BPKDividedCard` with a given frame.

diff --git a/Backpack/Card/Classes/BPKDividedCard.m b/Backpack/Card/Classes/BPKDividedCard.m
@@ -62,18 +62,35 @@ - (instancetype)initWithPadded:(BOOL)padded cornerStyle:(BPKCardCornerStyle)corn
 }
 
 - (instancetype)initWithPrimarySubview:(UIView *_Nullable)primarySubview secondarySubview:(UIView *_Nullable)secondarySubview padded:(BOOL)padded {
-    return [self initWithPrimarySubview:primarySubview secondarySubview:secondarySubview padded:padded cornerStyle:BPKCardDefaultCornerStyle];
+    return [self initWithPrimarySubview:primarySubview
+                       secondarySubview:secondarySubview
+                                 padded:padded
+                            cornerStyle:BPKCardDefaultCornerStyle
+                              lineStyle:BPKCardDividerDefaultLineStyle];
 }
 
 - (instancetype)initWithPrimarySubview:(UIView *_Nullable)primarySubview
                       secondarySubview:(UIView *_Nullable)secondarySubview
                                 padded:(BOOL)padded
                            cornerStyle:(BPKCardCornerStyle)cornerStyle {
+    return [self initWithPrimarySubview:primarySubview
+                       secondarySubview:secondarySubview
+                                 padded:padded
+                            cornerStyle:BPKCardDefaultCornerStyle
+                              lineStyle:BPKCardDividerDefaultLineStyle];
+}
+
+- (instancetype)initWithPrimarySubview:(UIView *_Nullable)primarySubview
+                      secondarySubview:(UIView *_Nullable)secondarySubview
+                                padded:(BOOL)padded
+                           cornerStyle:(BPKCardCornerStyle)cornerStyle
+                             lineStyle:(BPKCardDividerLineStyle)lineStyle {
     self = [super initWithPadded:padded cornerStyle:cornerStyle];
 
     if (self) {
         self.primarySubview = primarySubview;
         self.secondarySubview = secondarySubview;
+        self.lineStyle = lineStyle;
         [self setupViewsWithPadded:padded];
     }
 
@@ -106,6 +123,11 @@ - (void)setPrimarySubview:(UIView *)primarySubview secondarySubview:(UIView *)se
     [self.contentView insertArrangedSubview:self.secondarySubview atIndex:2];
 }
 
+- (void)setLineStyle:(BPKCardDividerLineStyle)lineStyle {
+    _lineStyle = lineStyle;
+    self.lineView.lineStyle = lineStyle;
+}
+
 #pragma mark - Private
 
 - (void)setupViewsWithPadded:(BOOL)padded {
@@ -115,7 +137,7 @@ - (void)setupViewsWithPadded:(BOOL)padded {
     self.contentView.alignment = UIStackViewAlignmentFill;
     self.padded = padded;
 
-    self.lineView = [[BPKCardDivider alloc] initWithOrientation:self.orientation];
+    self.lineView = [[BPKCardDivider alloc] initWithOrientation:self.orientation lineStyle:self.lineStyle];
 
     if (self.primarySubview != nil) {
         [self.contentView addArrangedSubview:self.primarySubview];

diff --git a/Backpack/Tests/SnapshotTests/BPKCardSnapshotTest.m b/Backpack/Tests/SnapshotTests/BPKCardSnapshotTest.m
@@ -322,6 +322,58 @@ - (void)testDividedSnapshotWithoutPaddedVertical {
     BPKSnapshotVerifyViewDark(darkView, nil);
 }
 
+- (UIView *)createDividedSnapshotWithVerticalSolidLine {
+    UIView *parentView = [[UIView alloc] initWithFrame:CGRectZero];
+    BPKDividedCard *dividedCard = [[BPKDividedCard alloc] initWithPadded:YES];
+    BPKLabel *firstInnerView = [[BPKLabel alloc] initWithFontStyle:BPKFontStyleTextBodyDefault];
+    BPKLabel *secondInnerView = [[BPKLabel alloc] initWithFontStyle:BPKFontStyleTextBodyDefault];
+    firstInnerView.text = @"Lorem ipsum";
+    secondInnerView.text = @"dolor sit amet";
+    firstInnerView.backgroundColor = [BPKColor statusDangerFillColor];
+    secondInnerView.backgroundColor = [BPKColor statusSuccessFillColor];
+
+    dividedCard.orientation = UILayoutConstraintAxisVertical;
+    dividedCard.lineStyle = BPKCardDividerLineSolid;
+
+    [self configureDividedCard:dividedCard firstInnerView:firstInnerView secondInnerView:secondInnerView];
+    [self configureParentView:parentView forCard:dividedCard];
+    return parentView;
+}
+
+- (void)testDividedSnapshotVerticalSolidLine {
+    UIView *lightView = [self createDividedSnapshotWithVerticalSolidLine];
+    UIView *darkView = [self createDividedSnapshotWithVerticalSolidLine];
+
+    BPKSnapshotVerifyViewLight(lightView, nil);
+    BPKSnapshotVerifyViewDark(darkView, nil);
+}
+
+- (UIView *)createDividedSnapshotWithVerticalSolidLineWithoutPadding {
+    UIView *parentView = [[UIView alloc] initWithFrame:CGRectZero];
+    BPKDividedCard *dividedCard = [[BPKDividedCard alloc] initWithPadded:NO];
+    BPKLabel *firstInnerView = [[BPKLabel alloc] initWithFontStyle:BPKFontStyleTextBodyDefault];
+    BPKLabel *secondInnerView = [[BPKLabel alloc] initWithFontStyle:BPKFontStyleTextBodyDefault];
+    firstInnerView.text = @"Lorem ipsum";
+    secondInnerView.text = @"dolor sit amet";
+    firstInnerView.backgroundColor = [BPKColor statusDangerFillColor];
+    secondInnerView.backgroundColor = [BPKColor statusSuccessFillColor];
+
+    dividedCard.orientation = UILayoutConstraintAxisVertical;
+    dividedCard.lineStyle = BPKCardDividerLineSolid;
+
+    [self configureDividedCard:dividedCard firstInnerView:firstInnerView secondInnerView:secondInnerView];
+    [self configureParentView:parentView forCard:dividedCard];
+    return parentView;
+}
+
+- (void)testDividedSnapshotVerticalSolidLineWithouPadding {
+    UIView *lightView = [self createDividedSnapshotWithVerticalSolidLineWithoutPadding];
+    UIView *darkView = [self createDividedSnapshotWithVerticalSolidLineWithoutPadding];
+
+    BPKSnapshotVerifyViewLight(lightView, nil);
+    BPKSnapshotVerifyViewDark(darkView, nil);
+}
+
 @end
 
 NS_ASSUME_NONNULL_END
diff --git a/...SnapshotTest/testDividedSnapshotVerticalSolidLineWithouPadding_dark_mode@2x.png b/...SnapshotTest/testDividedSnapshotVerticalSolidLineWithouPadding_dark_mode@2x.png
diff --git a/...napshotTest/testDividedSnapshotVerticalSolidLineWithouPadding_light_mode@2x.png b/...napshotTest/testDividedSnapshotVerticalSolidLineWithouPadding_light_mode@2x.png
diff --git a/...es_64/BPKCardSnapshotTest/[email protected] b/...es_64/BPKCardSnapshotTest/[email protected]
diff --git a/...s_64/BPKCardSnapshotTest/[email protected] b/...s_64/BPKCardSnapshotTest/[email protected]
diff --git a/Example/Backpack Screenshot/Screenshots.swift b/Example/Backpack Screenshot/Screenshots.swift
@@ -166,6 +166,14 @@ class Screenshots: BackpackSnapshotTestCase {
             saveScreenshot(component: "card", scenario: "with-divider-and-corner-style-large",
                            userInterfaceStyle: userInterfaceStyle)
             tapBackButton()
+            app.tables.staticTexts["With solid divider with padding"].tap()
+            saveScreenshot(component: "card", scenario: "with-solid-divider-with-padding",
+                           userInterfaceStyle: userInterfaceStyle)
+            tapBackButton()
+            app.tables.staticTexts["With solid divider without padding"].tap()
+            saveScreenshot(component: "card", scenario: "with-solid-divider-without-padding",
+                           userInterfaceStyle: userInterfaceStyle)
+            tapBackButton()
         }
 
         navigate(title: "Chips") {

diff --git a/Example/Backpack/UIKit/Components/Card/DividedCardsViewController.swift b/Example/Backpack/UIKit/Components/Card/DividedCardsViewController.swift
@@ -25,6 +25,7 @@ class DividedCardsViewController: CardsViewController {
     #else
     var divisionDirection: UILayoutConstraintAxis = .horizontal
     #endif
+    var dividerStyle: BPKCardDividerLineStyle = .dotted
 
     override func setupCard() {
         let label1 = BPKLabel(fontStyle: .textBodyDefault)
@@ -41,5 +42,6 @@ class DividedCardsViewController: CardsViewController {
         dividedCard.isPadded = padded
         dividedCard.isSelected = selected
         dividedCard.orientation = divisionDirection
+        dividedCard.lineStyle = dividerStyle
     }
 }
diff --git a/Example/Backpack/Utils/FeatureStories/Groups/CardGroups.swift b/Example/Backpack/Utils/FeatureStories/Groups/CardGroups.swift
@@ -61,6 +61,16 @@ struct CardGroupsProvider {
                 presentableDevidedCard("With divider without padding") { cardVC in
                     cardVC.divisionDirection = .vertical
                     cardVC.padded = false
+                },
+                presentableDevidedCard("With solid divider with padding") { cardVC in
+                    cardVC.divisionDirection = .vertical
+                    cardVC.padded = true
+                    cardVC.dividerStyle = .solid
+                },
+                presentableDevidedCard("With solid divider without padding") { cardVC in
+                    cardVC.divisionDirection = .vertical
+                    cardVC.padded = false
+                    cardVC.dividerStyle = .solid
                 }
             ]
         ).groups()

diff --git a/screenshots/iPhone 8-card___with-solid-divider-with-padding_dm.png b/screenshots/iPhone 8-card___with-solid-divider-with-padding_dm.png
diff --git a/screenshots/iPhone 8-card___with-solid-divider-with-padding_lm.png b/screenshots/iPhone 8-card___with-solid-divider-with-padding_lm.png
diff --git a/screenshots/iPhone 8-card___with-solid-divider-without-padding_dm.png b/screenshots/iPhone 8-card___with-solid-divider-without-padding_dm.png
diff --git a/screenshots/iPhone 8-card___with-solid-divider-without-padding_lm.png b/screenshots/iPhone 8-card___with-solid-divider-without-padding_lm.png