Skip to content

Commit

Permalink
feat(DesignSystem): Add flat varaint color
Browse files Browse the repository at this point in the history
  • Loading branch information
dodo849 committed Jul 13, 2024
1 parent aae62ee commit 15c1b8c
Show file tree
Hide file tree
Showing 7 changed files with 215 additions and 19 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -8,12 +8,20 @@
import Foundation

extension RoundedOffset {
/// 0
static let zero = RoundedOffset()
/// 2
static let extraSmall = RoundedOffset(all: 2)
/// 2
static let xsmall = RoundedOffset(all: 2)
/// 4
static let small = RoundedOffset(all: 4)
/// 8
static let medium = RoundedOffset(all: 8)
/// 12
static let large = RoundedOffset(all: 12)
/// 16
static let xlarge = RoundedOffset(all: 16)
/// infinity
static let infinity = RoundedOffset(all: .infinity)
}
Original file line number Diff line number Diff line change
Expand Up @@ -32,17 +32,19 @@ struct BasicSegmentColorTheme: SegmentColorTheme {

// for flat, shadow
switch (color, state) {
case (_, .unselected):
return .init(.grey400)
case (_, .selected):
return .init(.white)
case (.green, .unselected): return .init(.grey400)
case (.green, .selected): return .init(.green500)
case (.stone, .unselected): return .init(.grey400)
case (.stone, .selected): return .init(.fullWhite)
}
}

func indicatorBackgroundColor() -> UniversalColor {
switch color {
case .green: return .init(.green500)
case .stone: return .init(.grey800)
switch (variant, color) {
case (.underline, .green): return .init(.green500)
case (.underline, .stone): return .init(.grey800)
case (_, .green): return .init(.fullWhite)
case (_, .stone): return .init(.grey800)
}
}

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -31,7 +31,7 @@ struct BasicSegmentFigureTheme: SegmentFigureTheme {

func containerRounded() -> RoundedOffset {
switch _shape {
case .round: return .xlarge
case .round: return .medium
case .square: return .medium
case .pill: return .infinity
}
Expand All @@ -55,7 +55,7 @@ struct BasicSegmentFigureTheme: SegmentFigureTheme {

func itemPadding() -> GapOffset {
if variant == .underline {
return .init(0, 0)
return .init(8, 0)
}

return .init(8, 28)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -99,6 +99,10 @@ final class BadgeBookViewController: UIViewController {
stackView.addArrangedSubview(variantControlLabel)
stackView.addArrangedSubview(variantControl)

stackView.addArrangedSubview(BaseSpacer())
stackView.addArrangedSubview(BaseDivider())
stackView.addArrangedSubview(BaseSpacer())

badges.enumerated().forEach { index, badge in
stackView.addArrangedSubview(badgeLabels[index])
stackView.addArrangedSubview(badge)
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -71,10 +71,6 @@ final class ButtonBookViewController: UIViewController {
$0.selectedSegmentIndex = 0
}

lazy var divider = UIView().then {
$0.backgroundColor = .grey100
}

lazy var colorLabels: [UILabel] = BasicButtonColor.allCases.map { color in
UILabel().then {
$0.text = color.rawValue
Expand Down Expand Up @@ -126,7 +122,10 @@ final class ButtonBookViewController: UIViewController {
stackView.addArrangedSubview(shapeControl)
stackView.addArrangedSubview(stateControlLabel)
stackView.addArrangedSubview(stateControl)
stackView.addArrangedSubview(divider)

stackView.addArrangedSubview(BaseSpacer())
stackView.addArrangedSubview(BaseDivider())
stackView.addArrangedSubview(BaseSpacer())

buttons.enumerated().forEach { index, button in
stackView.addArrangedSubview(colorLabels[index])
Expand Down Expand Up @@ -167,11 +166,6 @@ final class ButtonBookViewController: UIViewController {
$0.width.equalTo(stackView.snp.width)
}

divider.snp.makeConstraints {
$0.height.equalTo(1)
$0.width.equalTo(stackView.snp.width)
}

buttons.forEach { button in
button.snp.makeConstraints {
$0.width.equalToSuperview()
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,167 @@
//
// SegmentControlBookViewController.swift
// DesignSystemBookApp
//
// Created by DOYEON LEE on 6/26/24.
//

import UIKit

import DesignSystem
import Assets

import RxSwift
import Then
import SnapKit

final class SegmentControlBookViewController: UIViewController {
struct SegmentOption: Identifiable, Equatable {
let id: Int

static func factory(_ options: [Int]) -> [SegmentOption] {
return options.map { SegmentOption(id: $0) }
}
}

private let scrollView = UIScrollView()

private let contentView = UIView()

private let stackView = UIStackView().then {
$0.axis = .vertical
$0.spacing = 8
$0.alignment = .center
$0.distribution = .fill
}

private let variantControlLabel = UILabel().then {
$0.text = "variant"
$0.setTypo(.body1b)
}

private let variantControl = UISegmentedControl(
items: Array(BasicSegmentVariant.allCases).map { $0.rawValue }
).then {
$0.selectedSegmentIndex = 0
}

private let colorControlLabel = UILabel().then {
$0.text = "color"
$0.setTypo(.body1b)
}

private let colorControl = UISegmentedControl(
items: Array(BasicSegmentColor.allCases).map { $0.rawValue }
).then {
$0.selectedSegmentIndex = 0
}

private let shapeControlLabel = UILabel().then {
$0.text = "shape"
$0.setTypo(.body1b)
}

private let shapeControl = UISegmentedControl(
items: Array(BasicSegmentShape.allCases).map { $0.rawValue }
).then {
$0.selectedSegmentIndex = 0
}

private let segmentControl = BaseSegmentControl(
source: SegmentOption.factory(Array(0...3)),
itemBuilder: { option in
[
UILabel().then {
$0.text = "\(option.id)"
$0.setTypo(.body1b)
$0.textAlignment = .center
}
]
}
).then {
$0.styled()
}

private let disposeBag = DisposeBag()

// MARK: Lifecycle
override func viewDidLoad() {
super.viewDidLoad()
view.backgroundColor = .white

setupHierarchy()
setupLayout()
setupBind()
}

// MARK: Setup methods
private func setupHierarchy() {
view.addSubview(scrollView)
scrollView.addSubview(contentView)
contentView.addSubview(stackView)

stackView.addArrangedSubview(variantControlLabel)
stackView.addArrangedSubview(variantControl)
stackView.addArrangedSubview(colorControlLabel)
stackView.addArrangedSubview(colorControl)
stackView.addArrangedSubview(shapeControlLabel)
stackView.addArrangedSubview(shapeControl)

stackView.addArrangedSubview(BaseSpacer())
stackView.addArrangedSubview(BaseDivider())
stackView.addArrangedSubview(BaseSpacer())

stackView.addArrangedSubview(segmentControl)
}

private func setupLayout() {
scrollView.snp.makeConstraints {
$0.edges.equalToSuperview()
}

contentView.snp.makeConstraints {
$0.edges.equalToSuperview()
$0.width.equalTo(scrollView)
$0.height.equalTo(1000)
}

stackView.snp.makeConstraints {
$0.top.equalTo(contentView.safeAreaLayoutGuide.snp.top)
$0.left.right.equalToSuperview().inset(pagePadding)
}

variantControl.snp.makeConstraints {
$0.width.equalTo(stackView.snp.width)
}

colorControl.snp.makeConstraints {
$0.width.equalTo(stackView.snp.width)
}

shapeControl.snp.makeConstraints {
$0.width.equalTo(stackView.snp.width)
}

segmentControl.snp.makeConstraints {
$0.width.equalTo(stackView.snp.width)
}
}

private func setupBind() {
Observable.combineLatest(
variantControl.rx.selectedSegmentIndex,
colorControl.rx.selectedSegmentIndex,
shapeControl.rx.selectedSegmentIndex
)
.observe(on: MainScheduler.instance)
.withUnretained(self)
.subscribe(onNext: { owner, value in
owner.segmentControl.styled(
variant: BasicSegmentVariant.allCases[value.0],
color: BasicSegmentColor.allCases[value.1],
shape: BasicSegmentShape.allCases[value.2]
)
})
.disposed(by: disposeBag)
}
}
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,17 @@ class ViewController: UIViewController {
$0.setTitleColor(.systemBlue, for: .normal)
}

private lazy var segmentControlBookLabel = UILabel().then {
$0.text = "SegmentControl"
$0.setTypo(.heading3)
$0.textColor = .grey700
}

private lazy var segmentControlBookButton = UIButton().then {
$0.setTitle("Basic segment control example", for: .normal)
$0.setTitleColor(.systemBlue, for: .normal)
}

// MARK: DisposeBag
private let disposeBag = DisposeBag()

Expand Down Expand Up @@ -116,6 +127,9 @@ class ViewController: UIViewController {

stackView.addArrangedSubview(dialogBookLabel)
stackView.addArrangedSubview(dialogBookButton)

stackView.addArrangedSubview(segmentControlBookLabel)
stackView.addArrangedSubview(segmentControlBookButton)
}

private func setupLayout() {
Expand Down Expand Up @@ -166,5 +180,12 @@ class ViewController: UIViewController {
self?.navigationController?.pushViewController(viewController, animated: true)
})
.disposed(by: disposeBag)

segmentControlBookButton.rx.tap
.subscribe(onNext: { [weak self] in
let viewController = SegmentControlBookViewController()
self?.navigationController?.pushViewController(viewController, animated: true)
})
.disposed(by: disposeBag)
}
}

0 comments on commit 15c1b8c

Please sign in to comment.