#7 List

AlexHedley · Jun 24, 2023 · f175cba · f175cba
1 parent f4a1905
commit f175cba
Show file tree

Hide file tree

Showing 6 changed files with 241 additions and 0 deletions.
diff --git a/src/Blashing.Client/Pages/Index.razor b/src/Blashing.Client/Pages/Index.razor
@@ -5,6 +5,7 @@
 @using Blashing.Core.Components.Graph;
 @using Blashing.Core.Components.IFrame;
 @using Blashing.Core.Components.Image;
+@using Blashing.Core.Components.List;
 @using Blashing.Core.Components.Text;
 
 <PageTitle>Index</PageTitle>
@@ -26,3 +27,9 @@ Welcome to your new app.
 <IFrameWidget Url="https://www.alexhedley.com/" />
 
 <ImageWidget Src="https://www.alexhedley.com/images/icon-myapps.png" Width="100px" />
+
+<ListWidget Title="List Title" MoreInfo="List Title More Info" UpdatedAtMessage="@DateTime.Now.ToLongDateString()" Items="@Items" />
+
+@code {
+    List<(string label, string value)>? Items = new() { ("a", "b"), ("c", "d") };
+}
diff --git a/src/Blashing.Core.Tests/ListWidgetTest.cs b/src/Blashing.Core.Tests/ListWidgetTest.cs
@@ -0,0 +1,82 @@
+using Bunit;
+
+using Blashing.Core.Components.List;
+
+namespace Blashing.Core.Tests;
+
+public class ListWidgetTest : TestContext
+{
+    [Fact]
+    public void TextWidgetMarkupShouldContainPassedInValues()
+    {
+        var title = "a";
+        var moreInfo = "c";
+        var updatedAtMessage = "d";
+        var items = new List<(string label, string value)>() { ("a", "b"), ("c", "d") };
+
+        var cut = RenderComponent<ListWidget>(parameters => parameters
+                .Add(p => p.Title, title)
+                .Add(p => p.MoreInfo, moreInfo)
+                .Add(p => p.UpdatedAtMessage, updatedAtMessage)
+                .Add(p => p.Items, items)
+            );
+
+        // var widget = @"
+        //     <div class=""widget-list"">
+        //     <h1 class=""title"">List Title</h1>
+        //         <ol>
+        //             <li>
+        //                 <span class=""label"">a</span>
+        //                 <span class=""value"">b</span>
+        //             </li>
+        //             <li>
+        //                 <span class=""label"">c</span>
+        //                 <span class=""value"">d</span>
+        //             </li>
+        //         </ol>
+        //         <ul class=""list-nostyle"">
+        //             <li>
+        //                 <span class=""label"">a</span>
+        //                 <span class=""value"">b</span>
+        //             </li>
+        //             <li>
+        //                 <span class=""label"">c</span>
+        //                 <span class=""value"">d</span>
+        //             </li>
+        //         </ul>
+        //         <p class=""more-info"">List Title More Info</p>
+        //         <p class=""updated-at"">24 June 2023</p>
+        //     </div>";
+
+        var expectedTitleMarkup = $"<h1 class=\"title\">{title}</h1>";
+        cut.FindAll("h1")[0].MarkupMatches(expectedTitleMarkup);
+
+        var expectedMoreInfoMarkup = $"<p class=\"more-info\">{moreInfo}</p>";
+        cut.FindAll("p")[0].MarkupMatches(expectedMoreInfoMarkup);
+
+        var expectedUpdatedAtMessageMarkup = $"<p class=\"updated-at\">{updatedAtMessage}</p>";
+        cut.FindAll("p")[1].MarkupMatches(expectedUpdatedAtMessageMarkup);
+    }
+
+    [Fact]
+    public void TextWidgetShouldContainPassedInValues()
+    {
+        var title = "a";
+        var moreInfo = "c";
+        var updatedAtMessage = "d";
+        var items = new List<(string label, string value)>() { ("a", "b"), ("c", "d") };
+
+        var cut = RenderComponent<ListWidget>(parameters => parameters
+            .Add(p => p.Title, title)
+            .Add(p => p.MoreInfo, moreInfo)
+            .Add(p => p.UpdatedAtMessage, updatedAtMessage)
+            .Add(p => p.Items, items)
+        );
+
+        var textWidget = cut.Instance;
+        Assert.Equal(textWidget.Title, title);
+        Assert.Equal(textWidget.MoreInfo, moreInfo);
+        Assert.Equal(textWidget.UpdatedAtMessage, updatedAtMessage);
+        Assert.Equal(textWidget.Items, items);
+    }
+}
diff --git a/src/Blashing.Core/Components/List/ListWidget.razor b/src/Blashing.Core/Components/List/ListWidget.razor
@@ -0,0 +1,40 @@
+<div class="widget-list">
+    <h1 class="title">@Title</h1>
+
+    <ol>
+      @foreach (var item in Items)
+      {
+        <li>
+          <span class="label">@item.label</span>
+          <span class="value">@item.value</span>
+        </li>
+      }
+    </ol>
+
+  <ul class="list-nostyle">
+    @foreach (var item in Items)
+    {
+      <li>
+        <span class="label">@item.label</span>
+        <span class="value">@item.value</span>
+      </li>
+    }
+  </ul>
+
+    <p class="more-info">@MoreInfo</p>
+    <p class="updated-at">@UpdatedAtMessage</p>
+</div>
+
+@code {
+  [Parameter]
+  public string? Title { get; set; }
+
+  [Parameter]
+  public string? MoreInfo { get; set; }
+
+  [Parameter]
+  public string? UpdatedAtMessage { get; set; }
+
+  [Parameter]
+  public List<(string label, string value)>? Items { get; set; }
+}
diff --git a/src/Blashing.Core/Components/List/ListWidget.razor.css b/src/Blashing.Core/Components/List/ListWidget.razor.css
@@ -0,0 +1,45 @@
+.widget-list {
+   background-color: #12b0c5;
+   vertical-align: top;
+}
+
+.title {
+    color: rgba(255, 255, 255, 0.7);
+}
+
+ol, ul {
+    margin: 0 15px;
+    text-align: left;
+    color: rgba(255, 255, 255, 0.7);
+}
+
+ol {
+    list-style-position: inside;
+}
+
+li {
+    margin-bottom: 5px;
+}
+
+.list-nostyle {
+    list-style: none;
+}
+
+.label {
+    color: rgba(255, 255, 255, 0.7);
+}
+
+.value {
+    float: right;
+    margin-left: 12px;
+    font-weight: 600;
+    color: #fff;
+}
+
+.updated-at {
+    color: rgba(0, 0, 0, 0.3);
+}
+
+.more-info {
+    color: rgba(255, 255, 255, 0.7);
+}
diff --git a/src/Blashing.Core/Components/List/ListWidget.razor.scss b/src/Blashing.Core/Components/List/ListWidget.razor.scss
@@ -0,0 +1,60 @@
+// ----------------------------------------------------------------------------
+// Sass declarations
+// ----------------------------------------------------------------------------
+$background-color:  #12b0c5;
+$value-color:       #fff;
+
+$title-color:       rgba(255, 255, 255, 0.7);
+$label-color:       rgba(255, 255, 255, 0.7);
+$moreinfo-color:    rgba(255, 255, 255, 0.7);
+
+// ----------------------------------------------------------------------------
+// Widget-list styles
+// ----------------------------------------------------------------------------
+.widget-list {
+
+  background-color: $background-color;
+  vertical-align: top;
+
+  .title {
+    color: $title-color;
+  }
+
+  ol, ul {
+    margin: 0 15px;
+    text-align: left;
+    color: $label-color;
+  }
+
+  ol {
+    list-style-position: inside;
+  }
+
+  li {
+    margin-bottom: 5px;
+  }
+
+  .list-nostyle {
+    list-style: none;
+  }
+
+  .label {
+    color: $label-color;
+  }
+
+  .value {
+    float: right;
+    margin-left: 12px;
+    font-weight: 600;
+    color: $value-color;
+  }
+
+  .updated-at {
+    color: rgba(0, 0, 0, 0.3);
+  }
+
+  .more-info {
+    color: $moreinfo-color;
+  }
+
+}
diff --git a/src/Blashing.Server/Pages/Index.razor b/src/Blashing.Server/Pages/Index.razor
@@ -5,6 +5,7 @@
 @using Blashing.Core.Components.Graph;
 @using Blashing.Core.Components.IFrame;
 @using Blashing.Core.Components.Image;
+@using Blashing.Core.Components.List;
 @using Blashing.Core.Components.Text;
 
 <PageTitle>Index</PageTitle>
@@ -26,3 +27,9 @@ Welcome to your new app.
 <IFrameWidget Url="https://www.alexhedley.com/" />
 
 <ImageWidget Src="https://www.alexhedley.com/images/icon-myapps.png" Width="100px" />
+
+<ListWidget Title="List Title" MoreInfo="List Title More Info" UpdatedAtMessage="@DateTime.Now.ToLongDateString()" Items="@Items" />
+
+@code {
+    List<(string label, string value)>? Items = new() { ("a", "b"), ("c", "d") };
+}