feat: New Design for Creating New Group Conversation Screen to match …

…Design Specs - WPB-11589 (#2036)

wire-ios/Wire-iOS Tests/ConversationCreationControllerSnapshotTests.swift

@@ -52,7 +52,7 @@ final class ConversationCreationControllerSnapshotTests: XCTestCase {
         snapshotHelper.verify(matching: sut)
     }
 
-    func testTeamGroupOptionsCollapsed() {
+    func testTeamGroupOptions() {
         createSut(isTeamMember: true)
 
         snapshotHelper
@@ -76,13 +76,6 @@ final class ConversationCreationControllerSnapshotTests: XCTestCase {
             )
     }
 
-    func testTeamGroupOptionsExpanded() {
-        createSut(isTeamMember: true)
-        sut.expandOptions()
-
-        snapshotHelper.verify(matching: sut)
-    }
-
     // MARK: - Helper Method
 
     private func createSut(isTeamMember: Bool) {

wire-ios/Wire-iOS/Generated/Strings+Generated.swift

@@ -2364,7 +2364,7 @@ internal enum L10n {
       internal enum Create {
         internal enum GroupName {
           /// Group name
-          internal static let placeholder = L10n.tr("Localizable", "conversation.create.group_name.placeholder", fallback: "Group name")
+          internal static let label = L10n.tr("Localizable", "conversation.create.group_name.label", fallback: "Group name")
           /// Create group
           internal static let title = L10n.tr("Localizable", "conversation.create.group_name.title", fallback: "Create group")
         }
@@ -2410,8 +2410,8 @@ internal enum L10n {
           internal static func subtitle(_ p1: Any, _ p2: Any, _ p3: Any) -> String {
             return L10n.tr("Localizable", "conversation.create.options.subtitle", String(describing: p1), String(describing: p2), String(describing: p3), fallback: "Guests: %@, Services: %@, Read receipts: %@")
           }
-          /// Conversation options
-          internal static let title = L10n.tr("Localizable", "conversation.create.options.title", fallback: "Conversation options")
+          /// CONVERSATION OPTIONS
+          internal static let title = L10n.tr("Localizable", "conversation.create.options.title", fallback: "CONVERSATION OPTIONS")
         }
         internal enum ProtocolSelection {
           /// MLS

wire-ios/Wire-iOS/Resources/Base.lproj/Localizable.strings

@@ -312,10 +312,10 @@
 "conversation.input_bar.message_too_long.message" = "You can send messages up to %d characters long.";
 
 "conversation.create.group_name.title" = "Create group";
-"conversation.create.group_name.placeholder" = "Group name";
+"conversation.create.group_name.label" = "Group name";
 "conversation.create.guidance.empty" = "At least 1 character";
 "conversation.create.guidance.toolong" = "Too many characters";
-"conversation.create.options.title" = "Conversation options";
+"conversation.create.options.title" = "CONVERSATION OPTIONS";
 "conversation.create.options.subtitle" = "Guests: %@, Services: %@, Read receipts: %@";
 "conversation.create.guests.title" = "Allow guests";
 "conversation.create.guests.subtitle" = "Open this conversation to people outside your team.";

wire-ios/Wire-iOS/Sources/UserInterface/Components/Views/SectionFooter.swift

@@ -17,44 +17,11 @@
 //
 
 import UIKit
-
-final class SectionFooterView: UIView {
-
-    let titleLabel = UILabel()
-
-    override init(frame: CGRect) {
-        super.init(frame: frame)
-        setupViews()
-        createConstraints()
-    }
-
-    @available(*, unavailable)
-    required init?(coder aDecoder: NSCoder) {
-        fatalError("init(coder:) has not been implemented")
-    }
-
-    private func setupViews() {
-        titleLabel.font = .preferredFont(forTextStyle: .footnote)
-        titleLabel.translatesAutoresizingMaskIntoConstraints = false
-        titleLabel.numberOfLines = 0
-        titleLabel.applyStyle(.footerLabel)
-        addSubview(titleLabel)
-    }
-
-    private func createConstraints() {
-        NSLayoutConstraint.activate([
-            titleLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -16),
-            titleLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 16),
-            titleLabel.topAnchor.constraint(equalTo: topAnchor, constant: 16),
-            titleLabel.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -8)
-        ])
-    }
-
-}
+import WireDesign
 
 final class SectionFooter: UICollectionReusableView {
 
-    let footerView = SectionFooterView()
+    private let footerView = SectionFooterView()
 
     var titleLabel: UILabel {
         return footerView.titleLabel
@@ -76,25 +43,3 @@ final class SectionFooter: UICollectionReusableView {
         collectionView.register(SectionFooter.self, forSupplementaryViewOfKind: UICollectionView.elementKindSectionFooter, withReuseIdentifier: "SectionFooter")
     }
 }
-
-final class SectionTableFooter: UITableViewHeaderFooterView {
-
-    let footerView = SectionFooterView()
-
-    var titleLabel: UILabel {
-        return footerView.titleLabel
-    }
-
-    override init(reuseIdentifier: String?) {
-        super.init(reuseIdentifier: reuseIdentifier)
-        addSubview(footerView)
-        footerView.translatesAutoresizingMaskIntoConstraints = false
-        footerView.fitIn(view: self)
-    }
-
-    @available(*, unavailable)
-    required init?(coder aDecoder: NSCoder) {
-        fatalError("init?(coder aDecoder: NSCoder) is not implemented")
-    }
-
-}

wire-ios/Wire-iOS/Sources/UserInterface/Components/Views/SectionFooterView.swift

@@ -0,0 +1,57 @@
+//
+// Wire
+// Copyright (C) 2024 Wire Swiss GmbH
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see http://www.gnu.org/licenses/.
+//
+
+import UIKit
+import WireDesign
+
+final class SectionFooterView: UIView {
+
+    let titleLabel = DynamicFontLabel(
+        style: .subline1,
+        color: SemanticColors.Label.textSectionFooter
+    )
+
+    override init(frame: CGRect) {
+        super.init(frame: frame)
+        setupViews()
+        createConstraints()
+    }
+
+    @available(*, unavailable)
+    required init?(coder aDecoder: NSCoder) {
+        fatalError("init(coder:) has not been implemented")
+    }
+
+    private func setupViews() {
+        titleLabel.translatesAutoresizingMaskIntoConstraints = false
+        titleLabel.numberOfLines = 0
+        titleLabel.lineBreakMode = .byWordWrapping
+        titleLabel.textColor = SemanticColors.Label.textSectionFooter
+        addSubview(titleLabel)
+    }
+
+    private func createConstraints() {
+        NSLayoutConstraint.activate([
+            titleLabel.trailingAnchor.constraint(equalTo: trailingAnchor, constant: -16),
+            titleLabel.leadingAnchor.constraint(equalTo: leadingAnchor, constant: 16),
+            titleLabel.topAnchor.constraint(equalTo: topAnchor, constant: 8),
+            titleLabel.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -16)
+        ])
+    }
+
+}

wire-ios/Wire-iOS/Sources/UserInterface/Components/Views/SectionHeader.swift

@@ -22,14 +22,15 @@ import WireDesign
 
 final class SectionHeaderView: UIView {
 
-    let titleLabel = DynamicFontLabel(style: .h5,
-                                      color: SemanticColors.Label.textSectionHeader)
+    let titleLabel = DynamicFontLabel(
+        style: .h5,
+        color: SemanticColors.Label.textSectionHeader
+    )
 
     override init(frame: CGRect) {
         super.init(frame: frame)
         setupViews()
         createConstraints()
-
     }
 
     @available(*, unavailable)
@@ -53,7 +54,6 @@ final class SectionHeaderView: UIView {
             titleLabel.bottomAnchor.constraint(equalTo: bottomAnchor, constant: -8)
         ])
     }
-
 }
 
 final class SectionHeader: UICollectionReusableView {
@@ -68,14 +68,22 @@ final class SectionHeader: UICollectionReusableView {
         super.init(frame: frame)
         addSubview(headerView)
         headerView.translatesAutoresizingMaskIntoConstraints = false
-        headerView.fitIn(view: self)
+        createConstraints()
     }
 
     @available(*, unavailable)
     required init?(coder aDecoder: NSCoder) {
         fatalError("init?(coder aDecoder: NSCoder) is not implemented")
     }
 
+    private func createConstraints() {
+        NSLayoutConstraint.activate([
+            headerView.leadingAnchor.constraint(equalTo: leadingAnchor),
+            headerView.topAnchor.constraint(equalTo: topAnchor),
+            headerView.trailingAnchor.constraint(equalTo: trailingAnchor),
+            headerView.bottomAnchor.constraint(equalTo: bottomAnchor)
+        ])
+    }
 }
 
 final class SectionTableHeader: UITableViewHeaderFooterView {
@@ -107,5 +115,4 @@ final class SectionTableHeader: UITableViewHeaderFooterView {
             headerView.bottomAnchor.constraint(equalTo: contentView.bottomAnchor)
         ])
     }
-
 }

wire-ios/Wire-iOS/Sources/UserInterface/Components/Views/SectionTableFooter.swift

@@ -0,0 +1,42 @@
+//
+// Wire
+// Copyright (C) 2024 Wire Swiss GmbH
+//
+// This program is free software: you can redistribute it and/or modify
+// it under the terms of the GNU General Public License as published by
+// the Free Software Foundation, either version 3 of the License, or
+// (at your option) any later version.
+//
+// This program is distributed in the hope that it will be useful,
+// but WITHOUT ANY WARRANTY; without even the implied warranty of
+// MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE. See the
+// GNU General Public License for more details.
+//
+// You should have received a copy of the GNU General Public License
+// along with this program. If not, see http://www.gnu.org/licenses/.
+//
+
+import UIKit
+import WireDesign
+
+final class SectionTableFooter: UITableViewHeaderFooterView {
+
+    private let footerView = SectionFooterView()
+
+    var titleLabel: UILabel {
+        return footerView.titleLabel
+    }
+
+    override init(reuseIdentifier: String?) {
+        super.init(reuseIdentifier: reuseIdentifier)
+        addSubview(footerView)
+        footerView.translatesAutoresizingMaskIntoConstraints = false
+        footerView.fitIn(view: self)
+    }
+
+    @available(*, unavailable)
+    required init?(coder aDecoder: NSCoder) {
+        fatalError("init?(coder aDecoder: NSCoder) is not implemented")
+    }
+
+}

wire-ios/Wire-iOS/Sources/UserInterface/Conversation/Create/Cells/ConversationCreateNameCell.swift

@@ -16,11 +16,23 @@
 // along with this program. If not, see http://www.gnu.org/licenses/.
 //
 
+import Combine
 import UIKit
+import WireCommonComponents
+import WireDesign
 
 final class ConversationCreateNameCell: UICollectionViewCell {
 
-    let textField = SimpleTextField()
+    private let stackView = UIStackView()
+    private let groupNameLabel = DynamicFontLabel(
+        text: L10n.Localizable.Conversation.Create.GroupName.label,
+        style: .h4,
+        color: SemanticColors.Label.textUserPropertyCellName
+    )
+
+    let textField = WireTextField()
+
+    private var cancellables = Set<AnyCancellable>()
 
     override init(frame: CGRect) {
         super.init(frame: frame)
@@ -32,15 +44,56 @@ final class ConversationCreateNameCell: UICollectionViewCell {
         fatalError("init?(coder aDecoder: NSCoder) is not implemented")
     }
 
-    fileprivate func setup() {
-        textField.translatesAutoresizingMaskIntoConstraints = false
-        textField.isAccessibilityElement = true
-        textField.accessibilityIdentifier = "textfield.newgroup.name"
-        textField.placeholder = L10n.Localizable.Conversation.Create.GroupName.placeholder.localizedUppercase
-        textField.accessibilityValue = L10n.Accessibility.CreateConversation.SearchView.description
+    private func setup() {
+        setupStackView()
+        setupGroupNameLabel()
+        setupTextField()
+        setupConstraints()
+        setupNotifications()
+    }
+
+    private func setupStackView() {
+        stackView.axis = .vertical
+        stackView.spacing = 8
+        stackView.alignment = .fill
+        stackView.distribution = .fill
+        stackView.translatesAutoresizingMaskIntoConstraints = false
+        contentView.addSubview(stackView)
+    }
+
+    private func setupGroupNameLabel() {
+        stackView.addArrangedSubview(groupNameLabel)
+    }
+
+    private func setupTextField() {
+        textField.borderStyle = .roundedRect
+        textField.layer.borderColor = SemanticColors.SearchBar.borderInputView.cgColor
+        textField.font = .font(for: .body1)
+        stackView.addArrangedSubview(textField)
+    }
+
+    private func setupConstraints() {
+        NSLayoutConstraint.activate([
+            stackView.topAnchor.constraint(equalTo: contentView.topAnchor),
+            stackView.leadingAnchor.constraint(equalTo: contentView.leadingAnchor, constant: 16),
+            stackView.trailingAnchor.constraint(equalTo: contentView.trailingAnchor, constant: -16),
+            stackView.bottomAnchor.constraint(lessThanOrEqualTo: contentView.bottomAnchor),
+
+            textField.heightAnchor.constraint(equalToConstant: 46)
+        ])
+    }
 
-        contentView.addSubview(textField)
-        textField.fitIn(view: contentView)
+    private func setupNotifications() {
+        NotificationCenter.default.publisher(for: UITextField.textDidBeginEditingNotification, object: textField)
+            .sink { [weak self] _ in
+                self?.groupNameLabel.textColor = UIColor.accent()
+            }
+            .store(in: &cancellables)
 
+        NotificationCenter.default.publisher(for: UITextField.textDidEndEditingNotification, object: textField)
+            .sink { [weak self] _ in
+                self?.groupNameLabel.textColor = SemanticColors.Label.textUserPropertyCellName
+            }
+            .store(in: &cancellables)
     }
 }