From 0a5c9b78eda7633298b255e9cbf02394edd60503 Mon Sep 17 00:00:00 2001 From: Scott Pfeil Date: Tue, 21 Jun 2022 16:26:57 -0400 Subject: [PATCH] Switch to UIStackView for simplicity. update inits. update didSets Removed style, allow dependency on title style like in the figma. --- .../LockUps/TitleLockup.swift | 15 +- .../LockUps/TitleLockupModel.swift | 183 +++++++++--------- 2 files changed, 103 insertions(+), 95 deletions(-) diff --git a/MVMCoreUI/Atomic/Molecules/DesignedComponents/LockUps/TitleLockup.swift b/MVMCoreUI/Atomic/Molecules/DesignedComponents/LockUps/TitleLockup.swift index bc069b27..b48e4ddb 100644 --- a/MVMCoreUI/Atomic/Molecules/DesignedComponents/LockUps/TitleLockup.swift +++ b/MVMCoreUI/Atomic/Molecules/DesignedComponents/LockUps/TitleLockup.swift @@ -14,11 +14,11 @@ public let eyebrow = Label(fontStyle: .RegularBodySmall) public let title = Label(fontStyle: .RegularBodySmall) public let subTitle = Label(fontStyle: .RegularBodySmall) - public lazy var stack: Stack = { - return Stack.createStack(with: [(view: eyebrow, model: StackItemModel(horizontalAlignment: .fill)), - (view: title, model: StackItemModel(horizontalAlignment: .fill)), - (view: subTitle, model: StackItemModel(horizontalAlignment: .fill))], - axis: .vertical) + public lazy var stack: UIStackView = { + let stack = UIStackView(arrangedSubviews: [eyebrow, title, subTitle]) + stack.translatesAutoresizingMaskIntoConstraints = false + stack.axis = .vertical + return stack }() var castModel: TitleLockupModel? { @@ -41,12 +41,10 @@ super.setupView() addSubview(stack) NSLayoutConstraint.constraintPinSubview(toSuperview: stack) - stack.restack() } open override func updateView(_ size: CGFloat) { super.updateView(size) - stack.stackModel?.spacing = castModel?.style.defaultSpacing() ?? TitleLockupModel.Style.large.defaultSpacing() stack.updateView(size) } @@ -66,7 +64,8 @@ open override func set(with model: MoleculeModelProtocol, _ delegateObject: MVMCoreUIDelegateObject?, _ additionalData: [AnyHashable: Any]?) { super.set(with: model, delegateObject, additionalData) guard let model = model as? TitleLockupModel else { return } - + stack.setCustomSpacing(model.defaultEyebrowTitleSpacing(), after: eyebrow) + stack.setCustomSpacing(model.defaultTitleSubTitleSpacing(), after: title) stack.updateContainedMolecules(with: [model.eyebrow, model.title, model.subTitle], diff --git a/MVMCoreUI/Atomic/Molecules/DesignedComponents/LockUps/TitleLockupModel.swift b/MVMCoreUI/Atomic/Molecules/DesignedComponents/LockUps/TitleLockupModel.swift index a4351cf4..4548207d 100644 --- a/MVMCoreUI/Atomic/Molecules/DesignedComponents/LockUps/TitleLockupModel.swift +++ b/MVMCoreUI/Atomic/Molecules/DesignedComponents/LockUps/TitleLockupModel.swift @@ -21,9 +21,25 @@ public class TitleLockupModel: MoleculeModelProtocol, ParentMoleculeModelProtoco public var title: LabelModel public var subTitle: LabelModel? - public var style: Style = .large - public var alignment: Alignment = .left - public var inverted: Bool = false + public var alignment: Alignment = .left { + didSet { + ///Updating the text alignment for all labels + if let textAlignment = NSTextAlignment(rawValue: alignment.rawValue) { + eyebrow?.textAlignment = textAlignment + title.textAlignment = textAlignment + subTitle?.textAlignment = textAlignment + } + } + } + + public var inverted: Bool = false { + didSet { + ///Updating the text color + eyebrow?.textColor = titleColor + title.textColor = titleColor + subTitle?.textColor = subTitleColor + } + } private var _backgroundColor: Color? public var backgroundColor: Color? { @@ -52,68 +68,63 @@ public class TitleLockupModel: MoleculeModelProtocol, ParentMoleculeModelProtoco //-------------------------------------------------- public init(eyebrow: LabelModel? = nil, title: LabelModel, subTitle: LabelModel? = nil) throws { - self.eyebrow = eyebrow self.title = title self.subTitle = subTitle + updateLabelAttributes() } //-------------------------------------------------- // MARK: - Enum //-------------------------------------------------- - /// Convenience styles for common situations. - public enum Style: String, Codable { - case small - case medium - case large - case xlarge - case xxlarge - - func defaultHeadlineFontStyle() -> Styler.Font { - - switch self { - case .small: - return .BoldBodyLarge - case .medium: - return .BoldTitleMedium - case .large: - return .BoldTitleLarge - case .xlarge: - return .TitleXLarge - case .xxlarge: - return .Title2XLarge - } - } - - func defaultBodyFontStyle() -> Styler.Font { - - switch self { - case .small,.medium,.large: - return .RegularBodySmall - case .xlarge,.xxlarge: - return .RegularBodyLarge - } - } - - func defaultSpacing() -> CGFloat { - - switch self { - case .small,.medium,.large: - return Padding.Two - case .xlarge: - return Padding.Three - case .xxlarge: - return Padding.Four - } - } - } - public enum Alignment: String, Codable { case left case center } + //-------------------------------------------------- + // MARK: - Styling + //-------------------------------------------------- + + /// Returns the default fontStyle for the subtitle, based on the title fontStyle. + func defaultSubtitleFontStyle() -> Styler.Font { + switch title.fontStyle { + case .RegularTitleXLarge, .RegularTitle2XLarge, .RegularFeatureXSmall: + return .RegularBodyLarge + case .RegularFeatureSmall, .RegularFeatureMedium: + return .RegularTitleLarge + default: + return .RegularBodySmall + } + } + + /// Returns the default spacing between the eyebrow and title, based on the title fontStyle. + func defaultEyebrowTitleSpacing() -> CGFloat { + switch title.fontStyle { + case .RegularTitleXLarge, .RegularTitle2XLarge, .RegularFeatureXSmall, .RegularFeatureSmall: + return Padding.Three + case .RegularFeatureMedium: + return subTitle?.fontStyle == .RegularBodyLarge ? Padding.Three : Padding.Four + default: + return Padding.Two + } + } + + /// Returns the default spacing between the title and subTitle, based on the title fontStyle. + func defaultTitleSubTitleSpacing() -> CGFloat { + switch title.fontStyle { + case .RegularTitleXLarge: + return Padding.Three + case .RegularTitle2XLarge, .RegularFeatureXSmall, .RegularFeatureSmall: + return Padding.Four + case .RegularFeatureMedium: + return Padding.Five + default: + return Padding.Two + } + } + //-------------------------------------------------- // MARK: - Keys //-------------------------------------------------- @@ -126,7 +137,6 @@ public class TitleLockupModel: MoleculeModelProtocol, ParentMoleculeModelProtoco case subTitle case inverted case alignment - case style } //-------------------------------------------------- @@ -135,14 +145,9 @@ public class TitleLockupModel: MoleculeModelProtocol, ParentMoleculeModelProtoco required public init(from decoder: Decoder) throws { let typeContainer = try decoder.container(keyedBy: CodingKeys.self) - eyebrow = try typeContainer.decodeIfPresent(LabelModel.self, forKey: .eyebrow) title = try typeContainer.decodeMolecule(codingKey: .title) + eyebrow = try typeContainer.decodeIfPresent(LabelModel.self, forKey: .eyebrow) subTitle = try typeContainer.decodeMoleculeIfPresent(codingKey: .subTitle) - - if let newStyle = try typeContainer.decodeIfPresent(Style.self, forKey: .style) { - style = newStyle - setStyle(style: newStyle) - } if let newAlignment = try typeContainer.decodeIfPresent(Alignment.self, forKey: .alignment) { alignment = newAlignment @@ -151,7 +156,9 @@ public class TitleLockupModel: MoleculeModelProtocol, ParentMoleculeModelProtoco if let invertedStatus = try typeContainer.decodeIfPresent(Bool.self, forKey: .inverted) { inverted = invertedStatus } + backgroundColor = try typeContainer.decodeIfPresent(Color.self, forKey: .backgroundColor) + updateLabelAttributes() } @@ -161,7 +168,6 @@ public class TitleLockupModel: MoleculeModelProtocol, ParentMoleculeModelProtoco try container.encodeIfPresent(eyebrow, forKey: .eyebrow) try container.encodeModel(title, forKey: .title) try container.encodeIfPresent(subTitle, forKey: .subTitle) - try container.encodeIfPresent(style, forKey: .style) try container.encode(alignment, forKey: .alignment) try container.encode(inverted, forKey: .inverted) try container.encodeIfPresent(_backgroundColor, forKey: .backgroundColor) @@ -170,37 +176,40 @@ public class TitleLockupModel: MoleculeModelProtocol, ParentMoleculeModelProtoco //-------------------------------------------------- // MARK: - Model updates //-------------------------------------------------- - - private func setStyle(style: Style) { - - ///If eyebrow style is not available, will set font style based on the component - ///Eyebrow and body share the same font size - if eyebrow?.fontStyle == nil { - eyebrow?.fontStyle = style.defaultBodyFontStyle() - } - - ///If title style is not available, will set font style based on the component - if title.fontStyle == nil { - title.fontStyle = style.defaultHeadlineFontStyle() - } - - ///If subtitle style is not available, will set font style based on the component - if subTitle?.fontStyle == nil { - subTitle?.fontStyle = style.defaultBodyFontStyle() - } - } - + private func updateLabelAttributes() { - ///Updating the text color - eyebrow?.textColor = titleColor - title.textColor = titleColor - subTitle?.textColor = subTitleColor + // If subtitle style is not available, will set font style based on the component + if subTitle?.fontStyle == nil { + subTitle?.fontStyle = defaultSubtitleFontStyle() + } - ///Updating the text alignment for all labels + // If eyebrow style is not available, will set font style based on the component. Eyebrow and subtitle share the same font size + if eyebrow?.fontStyle == nil { + eyebrow?.fontStyle = subTitle?.fontStyle + } + + // Updating the text color + if eyebrow?.textColor == nil { + eyebrow?.textColor = subTitleColor + } + if title.textColor == nil { + title.textColor = titleColor + } + if subTitle?.textColor == nil { + subTitle?.textColor = subTitleColor + } + + // Updating the text alignment for all labels if let textAlignment = NSTextAlignment(rawValue: alignment.rawValue) { - eyebrow?.textAlignment = textAlignment - title.textAlignment = textAlignment - subTitle?.textAlignment = textAlignment + if eyebrow?.textAlignment == nil { + eyebrow?.textAlignment = textAlignment + } + if title.textAlignment == nil { + title.textAlignment = textAlignment + } + if subTitle?.textAlignment == nil { + subTitle?.textAlignment = textAlignment + } } } }