AlexHedley · alex-hedley · Oct 10, 2025 · Nov 18, 2025 · Nov 18, 2025
diff --git a/src/Blashing.Shared/Pages/AdditionalWidgets.razor b/src/Blashing.Shared/Pages/AdditionalWidgets.razor
@@ -34,12 +34,25 @@
 
         </div>
     </div>
+
+    <div class="row">
+        <div class="col">
+
+            <h2>Circle CI List</h2>
+            <CircleCIBuildStatusListWidget 
+                Title="Build Status"
+                Items="@Items">
+            </CircleCIBuildStatusListWidget>
+
+        </div>
+    </div>
 </div>
 
 <hr />
 
 <Dashboard RowGap="1em" ColumnGap="1em" AspectRatio="1.5" ColumnCount="3" style="height: 750px; background-color: black;">
 
+    <!-- Row 0 -->
     <Element Row="0" Column="0">
         <ServerStatusSquareWidget Title="Server Status Square" UpdatedAtMessage="Last updated at 0:00"></ServerStatusSquareWidget>
     </Element>
@@ -52,6 +65,7 @@
         <ServerStatusSquareWidget Title="Failed" UpdatedAtMessage="Last updated at 0:00" BackgroundColor="#BF4848"></ServerStatusSquareWidget>
     </Element>
 
+    <!-- Row 1 -->
     <Element Row="1" Column="0">
         <CircleCIBuildStatusWidget
             Title="GoCardless"
@@ -66,4 +80,16 @@
         </CircleCIBuildStatusWidget>
     </Element>
 
+    <Element Row="1" Column="1">
+    </Element>
+
+    <Element Row="1" Column="2">
+        <CircleCIBuildStatusListWidget 
+            Title="Build Status"
+            Items="@Items">
+        </CircleCIBuildStatusListWidget>
+    </Element>
+
+    <!-- Row 2 -->
+
 </Dashboard>
diff --git a/src/Blashing.Shared/Pages/AdditionalWidgets.razor.cs b/src/Blashing.Shared/Pages/AdditionalWidgets.razor.cs
@@ -0,0 +1,32 @@
+using Blashing.Widgets.CircleCIList;
+
+namespace Blashing.Shared.Pages;
+
+public partial class AdditionalWidgets
+{
+    // Circle CI List
+    List<CircleCIDetails> Items { get; set; } =
+    [
+        new CircleCIDetails
+        {
+            Repo = "gocardless", 
+            Branch = "dev",
+            AvatarUrl = "https://gravatar.com/avatar/3184635da54b04bd362f09bad9aced67?s=200&d=robohash",
+            BackgroundColor = "#a31f1f"
+        },
+        new CircleCIDetails
+        {
+            Repo = "dashboard", 
+            Branch = "main",
+            AvatarUrl = "https://gravatar.com/avatar/3184635da54b04bd362f09bad9aced67?s=200&d=retro",
+            BackgroundColor = "#47bbb3"
+        },
+        new CircleCIDetails
+        {
+            Repo = "payments-client", 
+            Branch = "feature",
+            AvatarUrl = "https://gravatar.com/avatar/3184635da54b04bd362f09bad9aced67?s=200&d=wavatar",
+            BackgroundColor = "#8fb347"
+        }
+    ];
+}
diff --git a/src/Blashing.Shared/_Imports.razor b/src/Blashing.Shared/_Imports.razor
@@ -19,3 +19,4 @@
 @using Blashing.Widgets;
 @using Blashing.Widgets.ServerStatusSquares;
 @using Blashing.Widgets.CircleCIBuildStatus;
+@using Blashing.Widgets.CircleCIList;
diff --git a/src/Blashing.Stories/Stories/CircleCIBuildStatusListWidget.stories.razor b/src/Blashing.Stories/Stories/CircleCIBuildStatusListWidget.stories.razor
@@ -0,0 +1,29 @@
+@using Blashing.Widgets.CircleCIList
+
+@attribute [Stories("Example/Circle CI List")]
+
+<Stories TComponent="CircleCIBuildStatusListWidget">
+
+    <ArgType For="_ => _.Title" Control="ControlType.Default" />
+    <ArgType For="_ => _.Items" Control="ControlType.Default" />
+
+    <Story Name="Default">
+
+        <Arguments>
+            <Arg For="_ => _.Title" Value='"Circle CI"' />
+            <Arg For="_ => _.Items" Value='[ 
+                     new CircleCIDetails { Repo = "gocardless", Branch = "dev", AvatarUrl = "https://gravatar.com/avatar/3184635da54b04bd362f09bad9aced67?s=200&d=robohash", BackgroundColor = "#a31f1f" }, 
+                     new CircleCIDetails { Repo = "dashboard", Branch = "main", AvatarUrl = "https://gravatar.com/avatar/3184635da54b04bd362f09bad9aced67?s=200&d=retro", BackgroundColor = "#47bbb3" },
+                     new CircleCIDetails { Repo = "payments-client", Branch = "feature", AvatarUrl = "https://gravatar.com/avatar/3184635da54b04bd362f09bad9aced67?s=200&d=wavatar", BackgroundColor = "#8fb347" }
+                 ]' />
+        </Arguments>
+
+        <Template>
+            <CircleCIBuildStatusListWidget @attributes="context.Args">
+            </CircleCIBuildStatusListWidget>
+            @* <CircleCIBuildStatusListWidget Title="a" Items="[]" /> *@
+        </Template>
+
+    </Story>
+
+</Stories>
diff --git a/src/Blashing.Stories/_Imports.razor b/src/Blashing.Stories/_Imports.razor
@@ -6,9 +6,12 @@
 @using Microsoft.AspNetCore.Components.Web.Virtualization
 @using Microsoft.AspNetCore.Components.WebAssembly.Http
 @using Microsoft.JSInterop
+
 @using BlazingStory.Components
 @using BlazingStory.Types
 @using Blashing.Stories
 @using Blashing.Stories.Shared
 @using Blashing.Stories.Stories
 
+@using Blashing.Core.Components
+@using Blashing.Widgets
diff --git a/src/Blashing.Widgets.Tests/CircleCIBuildStatusListWidgetTest.cs b/src/Blashing.Widgets.Tests/CircleCIBuildStatusListWidgetTest.cs
@@ -0,0 +1,109 @@
+using Bunit;
+using Xunit;
+
+using Blashing.Widgets.CircleCIList;
+
+namespace Blashing.Widgets.Tests;
+
+public class CircleCIBuildStatusListWidgetTest : BunitContext
+{
+    [Fact]
+    public void CircleCIBuildStatusListWidgetMarkupShouldContainPassedInValues()
+    {
+        var title = "Circle CI List Title";
+        var items = new CircleCIDetails
+        {
+            Repo = "Repo Name",
+            Branch = "branch",
+            AvatarUrl = "https://gravatar.com/avatar/3184635da54b04bd362f09bad9aced67?s=200&d=mp",
+            BackgroundColor = "#a31f1f"
+        };
+
+        // var cut = Render<CircleCIBuildStatusListWidget>(parameters => parameters
+        //     .Add(p => p.Title, title)
+        //     .Add(p => p.Items, items)
+        // );
+    }
+
+//     var widget = @"
+//         <h1 class=""title"">@Title</h1>
+//
+//         <img class=""background"" src=""_content/Blashing.Widgets/images/logo-circle-ci.png"">
+//
+//         <ul class=""items list-nostyle"">
+//             @foreach (var item in Items)
+//             {
+//             <li class=""item"" style=""background-color:@item.BackgroundColor"">
+//                 <span class=""label repo"" data-bind=""item.repo"">@item.Repo</span>
+//                 <span class=""label branch"" data-bind=""item.branch"">@item.Branch</span>
+//                 <img class=""avatar"" src=""@item.AvatarUrl"" />
+//                 <div class=""clearfix""/>
+//             </li>
+//             }
+//         </ul>";
+    //
+    //     var expectedTitleMarkup = $"<h1 class=\"title\">{title}</h1>";
+    //     cut.FindAll("h1")[0].MarkupMatches(expectedTitleMarkup);
+    //     
+    //     var expectedBuildIdMarkup = $"<span class=\"label small\">{buildId}</span>";
+    //     cut.FindAll("span")[0].MarkupMatches(expectedBuildIdMarkup);
+    //
+    //     var expectedAvatarUrlMarkup = $"<img src=\"{avatarUrl}\" />";
+    //     cut.FindAll("img")[1].MarkupMatches(expectedAvatarUrlMarkup);
+    //     
+    //     var expectedCommitterNameMarkup = $"<span class=\"label committer-name\">{committerName}</span>";
+    //     cut.FindAll("span")[1].MarkupMatches(expectedCommitterNameMarkup);
+    //     
+    //     var expectedCommitBodyMarkup = $"<span class=\"label small commit-body\">{commitBody}</span>";
+    //     cut.FindAll("span")[2].MarkupMatches(expectedCommitBodyMarkup);
+    //     
+    //     var expectedStateMarkup = $"<h2 class=\"state\">{state}</h1>";
+    //     cut.FindAll("h2")[0].MarkupMatches(expectedStateMarkup);
+    //     
+    //     var expectedTimeMarkup = $"<span class=\"label small\">{time}</span>";
+    //     cut.FindAll("span")[3].MarkupMatches(expectedTimeMarkup);
+    //     
+    //     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 CircleCIBuildStatusListWidgetShouldContainPassedInValues()
+    // {
+    //     var title = "Circle CI Build Status Title";
+    //     var moreInfo = "More Info";
+    //     var updatedAtMessage = "Updated At Message";
+    //     var buildId = "Build Id";
+    //     var avatarUrl = "Avatar Url";
+    //     var committerName = "Committer Name";
+    //     var commitBody = "CommitBody";
+    //     var state = "State";
+    //     var time = "Time";
+    //
+    //     var cut = RenderComponent<CircleCIBuildStatusWidget>(parameters => parameters
+    //         .Add(p => p.Title, title)
+    //         .Add(p => p.MoreInfo, moreInfo)
+    //         .Add(p => p.UpdatedAtMessage, updatedAtMessage)
+    //         .Add(p => p.BuildId, buildId)
+    //         .Add(p => p.AvatarUrl, avatarUrl)
+    //         .Add(p => p.CommitterName, committerName)
+    //         .Add(p => p.CommitBody, commitBody)
+    //         .Add(p => p.State, state)
+    //         .Add(p => p.Time, time)
+    //     );
+    //
+    //     var circleCIBuildStatusWidget = cut.Instance;
+    //     Assert.Equal(circleCIBuildStatusWidget.Title, title);
+    //     Assert.Equal(circleCIBuildStatusWidget.MoreInfo, moreInfo);
+    //     Assert.Equal(circleCIBuildStatusWidget.UpdatedAtMessage, updatedAtMessage);
+    //     Assert.Equal(circleCIBuildStatusWidget.BuildId, buildId);
+    //     Assert.Equal(circleCIBuildStatusWidget.AvatarUrl, avatarUrl);
+    //     Assert.Equal(circleCIBuildStatusWidget.CommitterName, committerName);
+    //     Assert.Equal(circleCIBuildStatusWidget.CommitBody, commitBody);
+    //     Assert.Equal(circleCIBuildStatusWidget.State, state);
+    //     Assert.Equal(circleCIBuildStatusWidget.Time, time);
+    // }
+}
diff --git a/src/Blashing.Widgets/CircleCIList/CircleCIBuildStatusListWidget.razor b/src/Blashing.Widgets/CircleCIList/CircleCIBuildStatusListWidget.razor
@@ -0,0 +1,19 @@
+@inherits Blashing.Core.Components.BaseWidget;
+
+<div class="widget widget-circle-ci-list"> <!--style="background-color:@BackgroundColor"-->
+    <h1 class="title">@Title</h1>
+
+    <img class="background" src="_content/Blashing.Widgets/images/logo-circle-ci.png">
+
+    <ul class="items list-nostyle">
+        @foreach (var item in Items)
+        {
+        <li class="item" style="background-color:@item.BackgroundColor">
+            <span class="label repo" data-bind="item.repo">@item.Repo</span>
+            <span class="label branch" data-bind="item.branch">@item.Branch</span>
+            <img class="avatar" src="@item.AvatarUrl" />
+            <div class="clearfix"/>
+        </li>
+        }
+    </ul>
+</div>
diff --git a/src/Blashing.Widgets/CircleCIList/CircleCIBuildStatusListWidget.razor.cs b/src/Blashing.Widgets/CircleCIList/CircleCIBuildStatusListWidget.razor.cs
@@ -0,0 +1,26 @@
+using Blashing.Core.Components;
+using Microsoft.AspNetCore.Components;
+
+namespace Blashing.Widgets.CircleCIList;
+
+public partial class CircleCIBuildStatusListWidget //: BaseWidget
+{
+    [Parameter]
+    public string? Title { get; set; }
+
+    [Parameter] public List<CircleCIDetails> Items { get; set; } = new();
+
+    // protected override void OnParametersSet()
+    // {
+    //     BackgroundColor ??= "#8fb347";
+    // }
+}
+
+public record CircleCIDetails
+{
+    public required string Repo { get; init; }
+    public required string Branch { get; init; }
+    public required string AvatarUrl { get; init; }
+
+    public string? BackgroundColor { get; init; }
+}
diff --git a/src/Blashing.Widgets/CircleCIList/CircleCIBuildStatusListWidget.razor.css b/src/Blashing.Widgets/CircleCIList/CircleCIBuildStatusListWidget.razor.css
@@ -0,0 +1,78 @@
+.widget.widget-circle-ci-list {
+    background-color: #444;
+    padding: 0px;
+    vertical-align: top;
+}
+
+.widget.widget-circle-ci-list img.background {
+    width: 100% !important;
+    position: absolute;
+    left: 0;
+    top: 30px;
+    opacity: 0.05;
+}
+
+.widget.widget-circle-ci-list .title {
+    color: rgba(255, 255, 255, 1);
+}
+
+.widget.widget-circle-ci-list ol, .widget.widget-circle-ci-list ul {
+    margin: 0px;
+    text-align: left;
+    color: rgba(255, 255, 255, 0.7);
+}
+
+.widget.widget-circle-ci-list ol {
+    list-style-position: inside;
+}
+
+.widget.widget-circle-ci-list li {
+    margin-bottom: 5px;
+}
+
+.widget.widget-circle-ci-list .items {
+    list-style: none;
+}
+
+.widget.widget-circle-ci-list .items li {
+    margin-top: 5px;
+}
+
+.widget.widget-circle-ci-list .items li.failed {
+    background-color: #a31f1f;
+}
+
+.widget.widget-circle-ci-list .items li.pending {
+    background-color: #47bbb3;
+}
+
+.widget.widget-circle-ci-list .items li.passed {
+    background-color: #8fb347;
+}
+
+.widget.widget-circle-ci-list .items li .label {
+    display: block;
+    color: rgba(255, 255, 255, 0.7);
+    font-size: 20px;
+    word-wrap: break-word;
+}
+
+.widget.widget-circle-ci-list .items li .label.repo {
+    float: left;
+    text-align: left;
+    padding: 5px 0px 5px 10px;
+}
+
+.widget.widget-circle-ci-list .items li .label.branch {
+    float: left;
+    text-align: left;
+    padding-top: 10px;
+    font-size: 14px;
+    padding: 11px 0px 5px 5px;
+}
+
+.widget.widget-circle-ci-list .items li .avatar {
+    float: right;
+    text-align: right;
+    width: 40px;
+}