diff --git a/Sources/Slipstream/Documentation.docc/Views/TailwindCSS/TailwindCSSClasses.md b/Sources/Slipstream/Documentation.docc/Views/TailwindCSS/TailwindCSSClasses.md index 63ae964..1295a73 100644 --- a/Sources/Slipstream/Documentation.docc/Views/TailwindCSS/TailwindCSSClasses.md +++ b/Sources/Slipstream/Documentation.docc/Views/TailwindCSS/TailwindCSSClasses.md @@ -10,4 +10,5 @@ Slipstream implementations of Tailwind CSS's classes. ### Typography +- ``View/fontSize(_:)`` - ``View/textAlignment(_:)`` diff --git a/Sources/Slipstream/Documentation.docc/Views/TailwindCSS/fontSize.md b/Sources/Slipstream/Documentation.docc/Views/TailwindCSS/fontSize.md new file mode 100644 index 0000000..3a9ac7f --- /dev/null +++ b/Sources/Slipstream/Documentation.docc/Views/TailwindCSS/fontSize.md @@ -0,0 +1,5 @@ +# ```View/fontSize(_:)``` + +## Topics + +- ``FontSize`` diff --git a/Sources/Slipstream/TailwindCSS/Typography/View+fontSize.swift b/Sources/Slipstream/TailwindCSS/Typography/View+fontSize.swift new file mode 100644 index 0000000..f9d3610 --- /dev/null +++ b/Sources/Slipstream/TailwindCSS/Typography/View+fontSize.swift @@ -0,0 +1,33 @@ +/// Constants that specify the size of the text. +/// +/// - SeeAlso: Tailwind CSS' [`font-size`](https://tailwindcss.com/docs/font-size) documentation. +@available(iOS 17.0, macOS 14.0, *) +public enum FontSize: String { + case extraSmall = "xs" + case small = "sm" + /// The default document font size. + case base = "base" + case large = "lg" + case extraLarge = "xl" + case extraExtraLarge = "2xl" + case extraExtraExtraLarge = "3xl" + case fourXLarge = "4xl" + case fiveXLarge = "5xl" + case sixXLarge = "6xl" + case sevenXLarge = "7xl" + case eightXLarge = "8xl" + case nineXLarge = "9xl" +} + +extension View { + /// Set the font size. + /// + /// - Parameter fontSize: The font size to apply to the modified view. + /// + /// - SeeAlso: Tailwind CSS' [`font-size`](https://tailwindcss.com/docs/font-size) documentation. + @available(iOS 17.0, macOS 14.0, *) + public func fontSize(_ fontSize: FontSize) -> some View { + return self.modifier(ClassModifier(add: "text-" + fontSize.rawValue)) + } +} + diff --git a/Sources/Slipstream/TailwindCSS/Typography/View+textAlignment.swift b/Sources/Slipstream/TailwindCSS/Typography/View+textAlignment.swift index 0b66040..43f6e36 100644 --- a/Sources/Slipstream/TailwindCSS/Typography/View+textAlignment.swift +++ b/Sources/Slipstream/TailwindCSS/Typography/View+textAlignment.swift @@ -1,4 +1,5 @@ /// Constants that specify the visual alignment of the text. +@available(iOS 17.0, macOS 14.0, *) public enum TextAlignment: String { /// Aligns text to the left edge of the text container in /// left-to-right (LTR) languages, and to the right edge @@ -21,6 +22,9 @@ extension View { /// Control the alignment of text. /// /// - Parameter alignment: Text alignment to be applied to text within the modified view. + /// + /// - SeeAlso: Tailwind CSS' [`text-align`](https://tailwindcss.com/docs/text-align) documentation. + @available(iOS 17.0, macOS 14.0, *) public func textAlignment(_ alignment: TextAlignment) -> some View { return self.modifier(ClassModifier(add: "text-" + alignment.rawValue)) } diff --git a/Tests/SlipstreamTests/Sites/CatalogSiteTests.swift b/Tests/SlipstreamTests/Sites/CatalogSiteTests.swift index 099dd0e..1a4d788 100644 --- a/Tests/SlipstreamTests/Sites/CatalogSiteTests.swift +++ b/Tests/SlipstreamTests/Sites/CatalogSiteTests.swift @@ -20,6 +20,7 @@ private struct CatalogSite: View { Linebreak() Text("world!") H1("Heading 1") + .fontSize(.extraLarge) .textAlignment(.leading) H2 { Text("Heading 2") @@ -52,7 +53,7 @@ struct CatalogSiteTests {
Hello
world! -

Heading 1

+

Heading 1

Heading 2

Heading 3

Heading 4

diff --git a/Tests/SlipstreamTests/TailwindCSS/FontSizeTests.swift b/Tests/SlipstreamTests/TailwindCSS/FontSizeTests.swift new file mode 100644 index 0000000..0414b39 --- /dev/null +++ b/Tests/SlipstreamTests/TailwindCSS/FontSizeTests.swift @@ -0,0 +1,24 @@ +import Testing + +import Slipstream + +struct FontSizeTests { + @Test func alignments() throws { + try #expect(renderHTML(Div {}.fontSize(.extraSmall)) == #"
"#) + try #expect(renderHTML(Div {}.fontSize(.small)) == #"
"#) + + try #expect(renderHTML(Div {}.fontSize(.extraSmall)) == #"
"#) + try #expect(renderHTML(Div {}.fontSize(.small)) == #"
"#) + try #expect(renderHTML(Div {}.fontSize(.base)) == #"
"#) + try #expect(renderHTML(Div {}.fontSize(.large)) == #"
"#) + try #expect(renderHTML(Div {}.fontSize(.extraLarge)) == #"
"#) + try #expect(renderHTML(Div {}.fontSize(.extraExtraLarge)) == #"
"#) + try #expect(renderHTML(Div {}.fontSize(.extraExtraExtraLarge)) == #"
"#) + try #expect(renderHTML(Div {}.fontSize(.fourXLarge)) == #"
"#) + try #expect(renderHTML(Div {}.fontSize(.fiveXLarge)) == #"
"#) + try #expect(renderHTML(Div {}.fontSize(.sixXLarge)) == #"
"#) + try #expect(renderHTML(Div {}.fontSize(.sevenXLarge)) == #"
"#) + try #expect(renderHTML(Div {}.fontSize(.eightXLarge)) == #"
"#) + try #expect(renderHTML(Div {}.fontSize(.nineXLarge)) == #"
"#) + } +}