Typography Component Implementation

README.md

@@ -157,6 +157,7 @@ public partial class Index
 - [Toggle](#toggle)
 - [Tooltip](#tooltip)
 - [Tree](#tree)
+- [Typography](#typography)
 - [Upload](#upload)
 - [Form Validation](#form-validation)
 - [Workflow](#workflow)
@@ -1328,6 +1329,12 @@ treeNodes.Add("sample-child-2", new TreeNode()
 tree.TreeModel = treeNodes;
 ```
 
+## Typography
+```razor
+<Typography Format="TypographyFormat.Label" TextColor="TypographyColor.Std" TextDecoration="TextDecoration.None">Label, Std, None</Typography>
+<Typography Bold="true" Format="TypographyFormat.Code_Lg" TextColor="TypographyColor.Contrast" TextDecoration="TextDecoration.Line_Through">Bold, Code_Lg, Contrast, Line_Through</Typography>
+```
+
 ## Upload
 
 ```razor

SiemensIXBlazor.Tests/TypographyTest.cs

@@ -0,0 +1,34 @@
+// -----------------------------------------------------------------------
+// SPDX-FileCopyrightText: 2024 Siemens AG
+//
+// SPDX-License-Identifier: MIT
+//
+// This source code is licensed under the MIT license found in the
+// LICENSE file in the root directory of this source tree.
+//  -----------------------------------------------------------------------
+
+using Bunit;
+using Microsoft.AspNetCore.Components;
+using SiemensIXBlazor.Components;
+using SiemensIXBlazor.Enums.Typography;
+
+namespace SiemensIXBlazor.Tests;
+public class TypographyTest : TestContextBase
+{
+	[Fact]
+	public void TypographyRendersCorrectly()
+	{
+		// Arrange
+		var cut = RenderComponent<Typography>(
+			("Id", "testId"),
+			("Format", TypographyFormat.Body_Xs),
+			("Bold", true),
+			("TextColor", TypographyColor.Alarm),
+			("TextDecoration", TextDecoration.Line_Through),
+			("ChildContent", (RenderFragment)(builder => builder.AddMarkupContent(0, "Test content")))
+		);
+
+		// Assert
+		cut.MarkupMatches("<ix-typography id=\"testId\" bold format=\"body-xs\" text-color=\"alarm\" text-decoration=\"line-through\">Test content</ix-typography>");
+	}
+}

SiemensIXBlazor/Components/Typography/Typography.razor

@@ -0,0 +1,26 @@
+@* -----------------------------------------------------------------------
+// SPDX-FileCopyrightText: 2024 Siemens AG
+//
+// SPDX-License-Identifier: MIT
+//
+// This source code is licensed under the MIT license found in the
+// LICENSE file in the root directory of this source tree.
+//  -----------------------------------------------------------------------
+*@
+
+@using SiemensIXBlazor.Enums.Typography;
+@using SiemensIXBlazor.Helpers;
+
+@namespace SiemensIXBlazor.Components
+@inherits IXBaseComponent
+
+<ix-typography @attributes="UserAttributes"
+			   id="@Id"
+			   style="@Style"
+			   class="@Class"
+			   bold="@Bold"
+			   format="@((Format != null) ? EnumParser<TypographyFormat>.ParseEnumToString(Format)?.Replace('_', '-') : "")"
+			   text-color="@((TextColor != null) ? EnumParser<TypographyColor>.ParseEnumToString(TextColor)?.Replace('_', '-') : "")"
+			   text-decoration="@((TextDecoration != null) ? EnumParser<TextDecoration>.ParseEnumToString(TextDecoration)?.Replace('_', '-') : "")">
+	@ChildContent
+</ix-typography>

SiemensIXBlazor/Components/Typography/Typography.razor.cs

@@ -0,0 +1,28 @@
+// -----------------------------------------------------------------------
+// SPDX-FileCopyrightText: 2024 Siemens AG
+//
+// SPDX-License-Identifier: MIT
+//
+// This source code is licensed under the MIT license found in the
+// LICENSE file in the root directory of this source tree.
+//  -----------------------------------------------------------------------
+
+using Microsoft.AspNetCore.Components;
+using SiemensIXBlazor.Enums.Typography;
+namespace SiemensIXBlazor.Components;
+
+public partial class Typography
+{
+	[Parameter]
+	public string? Id { get; set; } = string.Empty;
+	[Parameter]
+	public bool Bold { get; set; } = false;
+	[Parameter]
+	public TypographyFormat? Format { get; set; }
+	[Parameter]
+	public TypographyColor? TextColor { get; set; }
+	[Parameter]
+	public TextDecoration? TextDecoration { get; set; } = Enums.Typography.TextDecoration.None;
+	[Parameter]
+	public RenderFragment? ChildContent { get; set; }
+}

SiemensIXBlazor/Enums/Typography/TextDecoration.cs

@@ -0,0 +1,17 @@
+// -----------------------------------------------------------------------
+// SPDX-FileCopyrightText: 2024 Siemens AG
+//
+// SPDX-License-Identifier: MIT
+//
+// This source code is licensed under the MIT license found in the
+// LICENSE file in the root directory of this source tree.
+//  -----------------------------------------------------------------------
+
+namespace SiemensIXBlazor.Enums.Typography;
+
+public enum TextDecoration
+{
+	None,
+	Underline,
+	Line_Through
+}

SiemensIXBlazor/Enums/Typography/TypographyColor.cs

@@ -0,0 +1,23 @@
+// -----------------------------------------------------------------------
+// SPDX-FileCopyrightText: 2024 Siemens AG
+//
+// SPDX-License-Identifier: MIT
+//
+// This source code is licensed under the MIT license found in the
+// LICENSE file in the root directory of this source tree.
+//  -----------------------------------------------------------------------
+
+namespace SiemensIXBlazor.Enums.Typography;
+
+public enum TypographyColor
+{
+	Alarm,
+	Contrast,
+	Inv_Contrast,
+	Inv_Soft,
+	Inv_Std,
+	Inv_Weak,
+	Soft,
+	Std,
+	Weak
+}

SiemensIXBlazor/Enums/Typography/TypographyFormat.cs

@@ -0,0 +1,37 @@
+// -----------------------------------------------------------------------
+// SPDX-FileCopyrightText: 2024 Siemens AG
+//
+// SPDX-License-Identifier: MIT
+//
+// This source code is licensed under the MIT license found in the
+// LICENSE file in the root directory of this source tree.
+//  -----------------------------------------------------------------------
+
+namespace SiemensIXBlazor.Enums.Typography;
+
+public enum TypographyFormat
+{
+	H1,
+	H2,
+	H3,
+	H4,
+	H5,
+	H6,
+	Body,
+	Body_Xs,
+	Body_Sm,
+	Body_Lg,
+	Code,
+	Code_Sm,
+	Code_Lg,
+	Display,
+	Display_Xs,
+	Display_Sm,
+	Display_Lg,
+	Display_Xl,
+	Display_Xxl,
+	Label,
+	Label_Xs,
+	Label_Sm,
+	Label_Lg
+}