Skip to content

Commit

Permalink
Update the components (#143)
Browse files Browse the repository at this point in the history 
* Fix border radius of the checkfield component

* Fix datepicker, selectfield and dropdown content respecting document bounds

* Fix some css

* Add a prompt parameter to the selectfield component

* Fix some css

* Add new symbols and change the initializer

* Fix failing test

* Fix missing prompt on textpad component

* Remove the listrow component

* Add system colors

* Fix content size of the dropdown component

* Move the option for content spacing to the stack initializer

* Revise the scroll component

* Move the option for content spacing to the grid initializer

* Fix some bits

* Fix failing tests

* Add auto as unit to the margin length

* Add text alignment

* Refactor some bits

Remove the internal initialiser since they have never been used

* Distinguish text case and text decoration

* Fix foreground color on symbols

* Add a font style to the image component for the alternate text

* Remove overflow restriction of the card header

* Add the experimental feature to configure the component style with swift instead of css

* Remove the button modifier from the dropdown component

The dropdown doesnt act as a button anymore, therefore it should lose the modifier

* Correct some comments

* Rename button size to control size to distinguishe it a bit more

* Revise the colors

Remove the secondary color and rename the primary to accent, also fix others

* Add a parameter for the view height to the frame modifier

* Fix failing test

* Add a frame alignment wich acts a self alignment for flex items

* Add styling for specific components when they are grouped

* Add a font family modifier

* Fix button appearance

* Add more style configurations
  • Loading branch information
@mattesmohr
mattesmohr authored Feb 25, 2024
1 parent 57ec613 commit 34979f2
Show file tree
Hide file tree
Showing 84 changed files with 1,782 additions and 1,514 deletions.
45 changes: 16 additions & 29 deletions Sources/HTMLKitComponents/Components/Button.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -30,16 +30,6 @@ public struct Button: View, Modifiable, Actionable {
self.classes = ["button"]
}

/// Creates a action button.
internal init(role: HTMLKit.Values.Button, content: [Content], classes: [String], events: [String]?, id: String?) {

self.role = role
self.content = content
self.classes = classes
self.events = events
self.id = id
}

public var body: Content {
HTMLKit.Button {
self.content
Expand All @@ -63,14 +53,18 @@ public struct Button: View, Modifiable, Actionable {

extension Button: ButtonModifier {

public func buttonSize(_ size: Tokens.ButtonSize) -> Button {
return self.mutate(buttonsize: size.value)
public func controlSize(_ size: Tokens.ControlSize) -> Button {
return self.mutate(controlsize: size.value)
}

public func buttonStyle(_ style: Tokens.ButtonStyle) -> Button {
return self.mutate(buttonstyle: style.value)
}

public func buttonStyle(_ style: ButtonConfiguration) -> Button {
return self.mutate(classes: style.configuration)
}

public func disabled() -> Button {
return self.mutate(buttonstate: Tokens.ViewState.disabled.value)
}
Expand Down Expand Up @@ -143,8 +137,8 @@ extension Button: ViewModifier {
return self.mutate(bordercolor: color.value)
}

public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> Button {
return mutate(frame: width.value, offset: offset?.value)
public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> Button {
return mutate(frame: width.value, height: height?.value, alignment: alignment?.value)
}

public func margin(insets: EdgeSet, length: Tokens.MarginLength = .small) -> Button {
Expand Down Expand Up @@ -189,17 +183,6 @@ public struct LinkButton: View, Modifiable, Identifiable {
self.classes = ["button"]
}

/// Creates a action button.
internal init(destination: String, target: HTMLKit.Values.Target, content: [Content], classes: [String], events: [String]?, id: String?) {

self.destination = destination
self.target = target
self.content = content
self.classes = classes
self.events = events
self.id = id
}

public var body: Content {
Anchor {
self.content
Expand All @@ -220,13 +203,17 @@ public struct LinkButton: View, Modifiable, Identifiable {

extension LinkButton: ButtonModifier {

public func buttonSize(_ size: Tokens.ButtonSize) -> LinkButton {
return self.mutate(buttonsize: size.value)
public func controlSize(_ size: Tokens.ControlSize) -> LinkButton {
return self.mutate(controlsize: size.value)
}

public func buttonStyle(_ style: Tokens.ButtonStyle) -> LinkButton {
return self.mutate(buttonstyle: style.value)
}

public func buttonStyle(_ style: ButtonConfiguration) -> LinkButton {
return self.mutate(classes: style.configuration)
}

public func disabled() -> LinkButton {
return self.mutate(buttonstate: Tokens.ViewState.disabled.value)
Expand Down Expand Up @@ -285,8 +272,8 @@ extension LinkButton: ViewModifier {
return self.mutate(bordercolor: color.value)
}

public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> LinkButton {
return mutate(frame: width.value, offset: offset?.value)
public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> LinkButton {
return mutate(frame: width.value, height: height?.value, alignment: alignment?.value)
}

public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> LinkButton {
Expand Down
17 changes: 6 additions & 11 deletions Sources/HTMLKitComponents/Components/Card.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,15 +35,6 @@ public struct Card: View, Modifiable, Identifiable {
self.classes = ["card"]
}

/// Creates a card.
internal init(header: [Content]?, content: [Content], classes: [String], id: String?) {

self.header = header
self.content = content
self.classes = classes
self.id = id
}

public var body: Content {
Division {
Division {
Expand All @@ -64,6 +55,10 @@ public struct Card: View, Modifiable, Identifiable {
public func tag(_ value: String) -> Card {
return self.mutate(id: value)
}

public func cardStyle(_ style: CardConfiguration) -> Card {
return self.mutate(classes: style.configuration)
}
}

extension Card: ViewModifier {
Expand Down Expand Up @@ -109,8 +104,8 @@ extension Card: ViewModifier {
return self.mutate(bordercolor: color.value)
}

public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> Card {
return mutate(frame: width.value, offset: offset?.value)
public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> Card {
return mutate(frame: width.value, height: height?.value, alignment: alignment?.value)
}

public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> Card {
Expand Down
27 changes: 8 additions & 19 deletions Sources/HTMLKitComponents/Components/Carousel.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,14 +23,6 @@ public struct Carousel: View, Identifiable, Modifiable {
self.classes = ["carousel"]
}

/// Creates a carousel.
internal init(content: [Identifiable], classes: [String], id: String?) {

self.content = content
self.classes = classes
self.id = id
}

public var body: Content {
Division {
Division {
Expand Down Expand Up @@ -58,6 +50,10 @@ public struct Carousel: View, Identifiable, Modifiable {
public func tag(_ value: String) -> Carousel {
return self.mutate(id: value)
}

public func carouselStyle(_ style: CarouselConfiguration) -> Carousel {
return self.mutate(classes: style.configuration)
}
}

extension Carousel: ViewModifier {
Expand Down Expand Up @@ -103,8 +99,8 @@ extension Carousel: ViewModifier {
return self.mutate(scheme: scheme.value)
}

public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> Carousel {
return mutate(frame: width.value, offset: offset?.value)
public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> Carousel {
return mutate(frame: width.value, height: height?.value, alignment: alignment?.value)
}

public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> Carousel {
Expand All @@ -126,13 +122,6 @@ public struct Slide: View, Identifiable, Modifiable {
self.classes = ["slide"]
}

internal init(id: String?, content: [Content], classes: [String]) {

self.id = id
self.content = content
self.classes = classes
}

public var body: Content {
Division {
content
Expand Down Expand Up @@ -191,8 +180,8 @@ extension Slide: ViewModifier {
return self.mutate(scheme: scheme.value)
}

public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> Slide {
return mutate(frame: width.value, offset: offset?.value)
public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> Slide {
return mutate(frame: width.value, height: height?.value, alignment: alignment?.value)
}

public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> Slide {
Expand Down
5 changes: 0 additions & 5 deletions Sources/HTMLKitComponents/Components/Divider.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,11 +16,6 @@ public struct Divider: View {
self.classes = ["divider"]
}

/// Creates a divider.
internal init(classes: [String]) {
self.classes = classes
}

public var body: Content {
HorizontalRule()
.class(classes.joined(separator: " "))
Expand Down
37 changes: 2 additions & 35 deletions Sources/HTMLKitComponents/Components/Dropdown.swift
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,15 +27,6 @@ public struct Dropdown: View, Modifiable, Identifiable {
self.classes = ["dropdown"]
}

/// Creates a dropdown.
internal init(label: [Content], content: [Content], classes: [String], id: String?) {

self.label = label
self.content = content
self.classes = classes
self.id = id
}

public var body: Content {
Division {
Division {
Expand All @@ -58,30 +49,6 @@ public struct Dropdown: View, Modifiable, Identifiable {
}
}

extension Dropdown: ButtonModifier {

public func buttonSize(_ size: Tokens.ButtonSize) -> Dropdown {
return self.mutate(buttonsize: size.value)
}

public func buttonStyle(_ style: Tokens.ButtonStyle) -> Dropdown {
return self.mutate(buttonstyle: style.value)
}

public func disabled() -> Dropdown {
return self.mutate(buttonstate: Tokens.ViewState.disabled.value)
}

public func disabled(_ condition: Bool) -> Dropdown {

if condition {
return self.mutate(buttonstate: Tokens.ViewState.disabled.value)
}

return self
}
}

extension Dropdown: ViewModifier {

public func opacity(_ value: Tokens.OpacityValue) -> Dropdown {
Expand Down Expand Up @@ -125,8 +92,8 @@ extension Dropdown: ViewModifier {
return self.mutate(scheme: scheme.value)
}

public func frame(width: Tokens.ColumnSize, offset: Tokens.ColumnOffset? = nil) -> Dropdown {
return mutate(frame: width.value, offset: offset?.value)
public func frame(width: Tokens.ViewWidth, height: Tokens.ViewHeight? = nil, alignment: Tokens.FrameAlignment? = nil) -> Dropdown {
return mutate(frame: width.value, height: height?.value, alignment: alignment?.value)
}

public func margin(insets: EdgeSet = .all, length: Tokens.MarginLength = .small) -> Dropdown {
Expand Down
Loading

0 comments on commit 34979f2

Please sign in to comment.