From 1ab72107f5ea679aa64669b55f5ef87736e9da34 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Emin=20Can=20=C3=96ZGE?= Date: Wed, 25 Sep 2024 14:44:34 +0300 Subject: [PATCH 1/3] feat: Implement Typography component --- .../Components/Typography/Typography.razor | 26 +++++++++++++ .../Components/Typography/Typography.razor.cs | 28 ++++++++++++++ .../Enums/Typography/TextDecoration.cs | 17 +++++++++ .../Enums/Typography/TypographyColor.cs | 23 ++++++++++++ .../Enums/Typography/TypographyFormat.cs | 37 +++++++++++++++++++ 5 files changed, 131 insertions(+) create mode 100644 SiemensIXBlazor/Components/Typography/Typography.razor create mode 100644 SiemensIXBlazor/Components/Typography/Typography.razor.cs create mode 100644 SiemensIXBlazor/Enums/Typography/TextDecoration.cs create mode 100644 SiemensIXBlazor/Enums/Typography/TypographyColor.cs create mode 100644 SiemensIXBlazor/Enums/Typography/TypographyFormat.cs diff --git a/SiemensIXBlazor/Components/Typography/Typography.razor b/SiemensIXBlazor/Components/Typography/Typography.razor new file mode 100644 index 0000000..238d3c6 --- /dev/null +++ b/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 + + + @ChildContent + diff --git a/SiemensIXBlazor/Components/Typography/Typography.razor.cs b/SiemensIXBlazor/Components/Typography/Typography.razor.cs new file mode 100644 index 0000000..ca2076b --- /dev/null +++ b/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; } +} diff --git a/SiemensIXBlazor/Enums/Typography/TextDecoration.cs b/SiemensIXBlazor/Enums/Typography/TextDecoration.cs new file mode 100644 index 0000000..14d735d --- /dev/null +++ b/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 +} diff --git a/SiemensIXBlazor/Enums/Typography/TypographyColor.cs b/SiemensIXBlazor/Enums/Typography/TypographyColor.cs new file mode 100644 index 0000000..c169e80 --- /dev/null +++ b/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 +} diff --git a/SiemensIXBlazor/Enums/Typography/TypographyFormat.cs b/SiemensIXBlazor/Enums/Typography/TypographyFormat.cs new file mode 100644 index 0000000..f2956db --- /dev/null +++ b/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 +} From 82454de44cc652003c8654f0212f0d19819fe137 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Emin=20Can=20=C3=96ZGE?= Date: Wed, 25 Sep 2024 14:44:56 +0300 Subject: [PATCH 2/3] test: Add unit test for Typography component --- SiemensIXBlazor.Tests/TypographyTest.cs | 34 +++++++++++++++++++++++++ 1 file changed, 34 insertions(+) create mode 100644 SiemensIXBlazor.Tests/TypographyTest.cs diff --git a/SiemensIXBlazor.Tests/TypographyTest.cs b/SiemensIXBlazor.Tests/TypographyTest.cs new file mode 100644 index 0000000..251f6a8 --- /dev/null +++ b/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( + ("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("Test content"); + } +} From f52ef0bd903eca8a5f6f365ecdffbcac3b623b93 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Emin=20Can=20=C3=96ZGE?= Date: Wed, 25 Sep 2024 14:48:29 +0300 Subject: [PATCH 3/3] docs: Add Typography usage to README --- README.md | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/README.md b/README.md index f590108..11b2216 100644 --- a/README.md +++ b/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 +Label, Std, None +Bold, Code_Lg, Contrast, Line_Through +``` + ## Upload ```razor