Skip to content

Commit 6d6d64f

Browse files
Phil-NHSPhil-NHS
committed
feat(button): layouts
1 parent facdb72 commit 6d6d64f

File tree

17 files changed

+185
-251
lines changed

17 files changed

+185
-251
lines changed

‎README.md‎

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,10 @@ It is client side so the users browser will do the work.
1111

1212
# Links
1313

14-
[last published package](https://github.com/orgs/TechnologyEnhancedLearning/packages?tab=packages&q=TELBlazor)
14+
[Easy viewing of TELBlazor Repo ReadMe](https://raw.githubusercontent.com/TechnologyEnhancedLearning/TELBlazor/refs/heads/master/README.md)
15+
(best with Markdown Reader Chrome extension)
16+
17+
[Last Published Package](https://github.com/orgs/TechnologyEnhancedLearning/packages?tab=packages&q=TELBlazor)
1518

1619
[TELBlazor](https://github.com/TechnologyEnhancedLearning/TELBlazor)
1720

@@ -25,6 +28,9 @@ It is client side so the users browser will do the work.
2528

2629
[Code Report Page](https://technologyenhancedlearning.github.io/TELBlazor-CodeReport/)
2730

31+
[NHSE TEL Frontend](https://github.com/TechnologyEnhancedLearning/nhse-tel-frontend)
32+
33+
2834
# Solution Detail
2935

3036
## Architecture

‎TELBlazor.Components.ShowCase.Shared/Layouts/ComponentLayouts/ComponentNavMenu.razor‎

Lines changed: 12 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,12 @@
1+
<nav class="app-side-nav">
2+
<h2 class="app-side-nav__heading">TELBlazor Components</h2>
3+
<ul class="nhsuk-list app-side-nav__list">
4+
@* <li class="app-side-nav__item"><NavLink class="app-side-nav__link" href="" Match="NavLinkMatch.All">Home</NavLink></li>
5+
<li class="app-side-nav__item"><NavLink class="app-side-nav__link" href="CssSourceCheckerPage">CssSourceCheckerPage</NavLink></li>
6+
<li class="app-side-nav__item"><NavLink class="app-side-nav__link" href="TELButtonPage">TELButtonPage</NavLink></li> *@
7+
<li class="app-side-nav__item"><a class="app-side-nav__link" href="/">Home</a></li>
8+
<li class="app-side-nav__item"><a class="app-side-nav__link" href="CssSourceChecker">CssSourceChecker</a></li>
9+
<li class="app-side-nav__item"><a class="app-side-nav__link" href="TELButton">TELButton</a></li>
10+
</ul>
11+
</nav>
12+

‎TELBlazor.Components.ShowCase.Shared/Layouts/ComponentLayouts/ComponentPageLayout.razor‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
@inherits LayoutComponentBase
2+
@layout MainLayout
3+
<div class="app-pane__main-content">
4+
@Body
5+
</div>
6+
@code {
7+
}

‎TELBlazor.Components.ShowCase.Shared/Layouts/ComponentLayouts/ShowCase.razor‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
@layout ComponentPageLayout
2+
<div class="component-showcase">
3+
<h2>@Title</h2>
4+
<TELBlazorPackageVersionInformation />
5+
<div class="component-presentor">
6+
@ChildContent
7+
</div>
8+
<div class="component-description">
9+
<h2>Description</h2>
10+
<p>@Description</p>
11+
</div>
12+
</div>
13+
@code
14+
{
15+
[Parameter, EditorRequired]
16+
public required string Title { get; set; } = string.Empty;
17+
18+
[Parameter,EditorRequired]
19+
public required string Description { get; set; } = string.Empty;
20+
21+
[Parameter, EditorRequired]
22+
public required RenderFragment ChildContent { get; set; }
23+
}
24+

‎TELBlazor.Components.ShowCase.Shared/Layouts/ComponentLayouts/ShowCase.razor.css‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
.component-showcase {
2+
padding: 1.5rem;
3+
margin-bottom: 2rem;
4+
border: 1px solid #e5e7eb;
5+
border-radius: 0.75rem;
6+
background-color: #ffffff;
7+
box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
8+
}
9+
10+
.component-presentor {
11+
border: 1px dashed #d1d5db;
12+
background-color: #f0f4f5;
13+
color: #212b32;
14+
font-size: 16px;
15+
-moz-osx-font-smoothing: grayscale;
16+
-webkit-font-smoothing: antialiased;
17+
line-height: 1.5;
18+
margin: 0;
19+
padding: 32px;
20+
padding: 1rem;
21+
border-radius: 0.5rem;
22+
margin-bottom: 1rem;
23+
}
24+
25+
.component-description {
26+
font-size: 0.95rem;
27+
color: #4b5563;
28+
line-height: 1.6;
29+
}

‎TELBlazor.Components.ShowCase.Shared/Layouts/ComponentPageLayout.razor‎

Lines changed: 0 additions & 13 deletions
This file was deleted.

‎TELBlazor.Components.ShowCase.Shared/Layouts/MainLayout.razor‎

Lines changed: 7 additions & 160 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,4 @@
1-
@using TELBlazor.Components.TELBlazorPackageVersion @*Can we get this from the assembly? qqqq*@
2-
@inherits LayoutComponentBase
3-
4-
<span class="version-display">TELBlazor.Components Version: @TELBlazor.Components.TELBlazorPackageVersion.VersionInfo.Version</span>
5-
<span class="version-display">TELNHSUK VersionL To do qqqq: 00.00.00-beta</span>
6-
7-
8-
9-
10-
11-
<div>
12-
<div id="nhsuk-cookie-banner">
13-
<div class="nhsuk-cookie-banner" id="cookiebanner">
14-
<div class="nhsuk-width-container">
15-
<h2>Cookies on the NHS digital service manual</h2>
16-
<p>We've put some small files called cookies on your device to make our site work.</p>
17-
<p>We'd also like to use analytics cookies. These send anonymous information about how our site is used to a service called Adobe Analytics. We use this information to improve our site.</p>
18-
<p>Let us know if this is OK. We'll use a cookie to save your choice. You can <a id="nhsuk-cookie-banner__link" href="/cookie-policy" tabindex="1">read more about our cookies</a> before you choose.</p>
19-
<ul>
20-
<li><button class="nhsuk-button" id="nhsuk-cookie-banner__link_accept_analytics" href="#" tabindex="2">I'm OK with analytics cookies</button></li>
21-
<li><button class="nhsuk-button" id="nhsuk-cookie-banner__link_accept" href="#" tabindex="3">Do not use analytics cookies</button></li>
22-
</ul>
23-
</div>
24-
</div>
25-
26-
<div class="nhsuk-success-banner" id="nhsuk-cookie-confirmation-banner" style="display:none;">
27-
<div class="nhsuk-width-container">
28-
<p id="nhsuk-success-banner__message">You can change your cookie settings at any time using our <a href="/cookie-policy">cookies page</a>.</p>
29-
</div>
30-
</div>
31-
</div>
32-
<style>
33-
34-
</style>
35-
</div>
36-
<script>document.body.className = ((document.body.className) ? document.body.className + ' js-enabled' : 'js-enabled');</script>
37-
38-
<a class="nhsuk-skip-link" href="#maincontent">Skip to main content</a>
39-
40-
41-
42-
1+
@inherits LayoutComponentBase
432

443
<header class="nhsuk-header app-header__container" role="banner">
454

@@ -51,127 +10,34 @@
5110
<path class="nhsuk-logo__text" fill="#fff" d="M3.9 1.5h4.4l2.6 9h.1l1.8-9h3.3l-2.8 13H9l-2.7-9h-.1l-1.8 9H1.1M17.3 1.5h3.6l-1 4.9h4L25 1.5h3.5l-2.7 13h-3.5l1.1-5.6h-4.1l-1.2 5.6h-3.4M37.7 4.4c-.7-.3-1.6-.6-2.9-.6-1.4 0-2.5.2-2.5 1.3 0 1.8 5.1 1.2 5.1 5.1 0 3.6-3.3 4.5-6.4 4.5-1.3 0-2.9-.3-4-.7l.8-2.7c.7.4 2.1.7 3.2.7s2.8-.2 2.8-1.5c0-2.1-5.1-1.3-5.1-5 0-3.4 2.9-4.4 5.8-4.4 1.6 0 3.1.2 4 .6"></path>
5211
</svg>
5312
<span class="nhsuk-header__service-name">
54-
Digital service manual
13+
TELBlazor
5514
</span>
5615
</a>
57-
</div> <div class="nhsuk-header__content" id="content-header">
58-
<div class="nhsuk-header__search">
59-
<div class="nhsuk-header__search-wrap" id="wrap-search">
60-
<form class="nhsuk-header__search-form" id="search" action="/search/" method="get" role="search">
61-
<label class="nhsuk-u-visually-hidden" for="search-field">Search the NHS website</label>
62-
<input class="nhsuk-search__input" id="search-field" name="search-field" type="search" placeholder="Search" autocomplete="off">
63-
<button class="nhsuk-search__submit" type="submit">
64-
<svg class="nhsuk-icon nhsuk-icon__search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
65-
<path d="M19.71 18.29l-4.11-4.1a7 7 0 1 0-1.41 1.41l4.1 4.11a1 1 0 0 0 1.42 0 1 1 0 0 0 0-1.42zM5 10a5 5 0 1 1 5 5 5 5 0 0 1-5-5z"></path>
66-
</svg>
67-
<span class="nhsuk-u-visually-hidden">Search</span>
68-
</button>
69-
</form>
70-
</div>
71-
</div>
16+
</div>
17+
<div class="nhsuk-header__content" id="content-header">
18+
7219
</div>
7320
</div>
7421

7522
<div class="nhsuk-navigation-container">
76-
<nav class="nhsuk-navigation" id="header-navigation" role="navigation" aria-label="Primary navigation">
77-
<ul class="nhsuk-header__navigation-list">
78-
<li class="nhsuk-header__navigation-item">
79-
<a class="nhsuk-header__navigation-link" href="/service-standard">
80-
NHS service standard
81-
</a>
82-
</li>
83-
<li class="nhsuk-header__navigation-item">
84-
<a class="nhsuk-header__navigation-link" href="/design-system">
85-
Design system
86-
</a>
87-
</li>
88-
<li class="nhsuk-header__navigation-item">
89-
<a class="nhsuk-header__navigation-link" href="/content">
90-
Content guide
91-
</a>
92-
</li>
93-
<li class="nhsuk-mobile-menu-container nhsuk-mobile-menu-container--visible">
94-
<button class="nhsuk-header__menu-toggle nhsuk-header__navigation-link nhsuk-header__menu-toggle--visible" id="toggle-menu" aria-expanded="false">
95-
<span class="nhsuk-u-visually-hidden">Browse</span>
96-
More
97-
<svg class="nhsuk-icon nhsuk-icon__chevron-down" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" aria-hidden="true" focusable="false">
98-
<path d="M15.5 12a1 1 0 0 1-.29.71l-5 5a1 1 0 0 1-1.42-1.42l4.3-4.29-4.3-4.29a1 1 0 0 1 1.42-1.42l5 5a1 1 0 0 1 .29.71z"></path>
99-
</svg>
100-
</button>
101-
<ul class="nhsuk-header__drop-down nhsuk-header__drop-down--hidden">
102-
<li class="nhsuk-header__navigation-item">
103-
<a class="nhsuk-header__navigation-link" href="/accessibility">
104-
Accessibility
105-
</a>
106-
</li>
107-
<li class="nhsuk-header__navigation-item">
108-
<a class="nhsuk-header__navigation-link" href="/community-and-contribution">
109-
Community and contribution
110-
</a>
111-
</li>
112-
<li class="nhsuk-header__navigation-item nhsuk-header__navigation-item--home">
113-
<a class="nhsuk-header__navigation-link" href="/">
114-
Home
115-
</a>
116-
</li>
117-
</ul>
118-
</li>
119-
</ul>
120-
</nav>
12123
</div>
12224
</header>
12325

12426

12527

12628
<div class="nhsuk-width-container app-width-container">
12729

128-
<nav class="nhsuk-breadcrumb app-breadcrumb" aria-label="Breadcrumb">
129-
<ol class="nhsuk-breadcrumb__list">
130-
<li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="/">Home</a></li>
131-
<li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="/design-system">Design system</a></li>
132-
<li class="nhsuk-breadcrumb__item"><a class="nhsuk-breadcrumb__link" href="/design-system/components">Components</a></li>
133-
</ol>
134-
<p class="nhsuk-breadcrumb__back">
135-
<a class="nhsuk-breadcrumb__backlink" href="/design-system/components">
136-
<span class="nhsuk-u-visually-hidden">Back to &nbsp;</span>
137-
Components
138-
</a>
139-
</p>
140-
</nav>
141-
14230
<main class="nhsuk-main-wrapper nhsuk-main-wrapper--s app-main-wrapper" id="maincontent" role="main">
31+
<TELBlazorPackageVersionInformation/>
14332
<div class="nhsuk-grid-row">
14433
<div class="nhsuk-grid-column-full app-component-reading-width">
14534

14635
<div class="app-pane">
14736

14837
<div class="app-pane__side-bar">
149-
150-
<nav class="app-side-nav">
151-
<h2 class="app-side-nav__heading">Form elements</h2>
152-
<ul class="nhsuk-list app-side-nav__list">
153-
<li class="app-side-nav__item"><a class="app-side-nav__link" href="CounterButtonPage">CounterButtonPage</a></li>
154-
<li class="app-side-nav__item"><a class="app-side-nav__link" href="CssSourceCheckerPage">CssSourceCheckerPage</a></li>
155-
<li class="app-side-nav__item"><a class="app-side-nav__link" href="TELButtonPage">TELButtonPage</a></li>
156-
</ul>
157-
158-
<h2 class="app-side-nav__heading">Content presentation</h2>
159-
<ul class="nhsuk-list app-side-nav__list">
160-
<li class="app-side-nav__item"><a class="app-side-nav__link" href="/design-system/components/care-cards">Care cards</a></li>
161-
162-
</ul>
163-
164-
<h2 class="app-side-nav__heading">Navigation</h2>
165-
<ul class="nhsuk-list app-side-nav__list">
166-
<li class="app-side-nav__item"><a class="app-side-nav__link" href="/design-system/components/action-link">Action link</a></li>
167-
168-
</ul>
169-
</nav>
38+
<ComponentNavMenu/>
17039
</div>
171-
17240
<div class="app-pane__main-content">
173-
QQQQ Component layout here
174-
<TELBlazorPackageVersionInformation />
17541
@Body
17642
</div>
17743
</div>
@@ -186,14 +52,6 @@
18652
<div class="nhsuk-width-container">
18753
<h2 class="nhsuk-u-visually-hidden">Support links</h2>
18854
<ul class="nhsuk-footer__list">
189-
<li class="nhsuk-footer__list-item nhsuk-footer-default__list-item"><a class="nhsuk-footer__list-item-link" href="/accessibility-statement" disabled>Accessibility statement</a></li>
190-
<li class="nhsuk-footer__list-item nhsuk-footer-default__list-item"><a class="nhsuk-footer__list-item-link" href="/cookie-policy" disabled>Cookie policy</a></li>
191-
<li class="nhsuk-footer__list-item nhsuk-footer-default__list-item"><a class="nhsuk-footer__list-item-link" href="/get-in-touch" disabled>Get in touch</a></li>
192-
<li class="nhsuk-footer__list-item nhsuk-footer-default__list-item"><a class="nhsuk-footer__list-item-link" href="/service-manual-team" disabled>Service manual team</a></li>
193-
<li class="nhsuk-footer__list-item nhsuk-footer-default__list-item"><a class="nhsuk-footer__list-item-link" href="/site-map" disabled>Site map</a></li>
194-
<li class="nhsuk-footer__list-item nhsuk-footer-default__list-item"><a class="nhsuk-footer__list-item-link" href="/terms-and-conditions" disabled>Terms and conditions</a></li>
195-
<li class="nhsuk-footer__list-item nhsuk-footer-default__list-item"><a class="nhsuk-footer__list-item-link" href="/whats-new" disabled>What's new</a></li>
196-
<li class="nhsuk-footer__list-item nhsuk-footer-default__list-item"><a class="nhsuk-footer__list-item-link" href="/your-privacy" disabled>Your privacy</a></li>
19755
</ul>
19856
<div>
19957
<p class="nhsuk-footer__copyright">© NHS England</p>
@@ -212,14 +70,3 @@
21270
</div>
21371
</footer>
21472

215-
216-
217-
218-
219-
220-
221-
222-
@code {
223-
//qqqq tidy before first commit, and soon after put in a proper layout
224-
}
225-

‎TELBlazor.Components.ShowCase.Shared/Pages/ComponentPages/BaseComponentPages/TELButtonPage.razor‎

Lines changed: 22 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,22 @@
1-
@layout ComponentPageLayout
2-
@page "/TELButtonPage/"
3-
<TELButton IsSubmitButtonForEditForm=false
4-
NoJSActionUrl="nojsfallback/mvcendpoint/telbuttonshowcase"
5-
FormData="@(new Dictionary<string, string>{{"increment","1"}})"
6-
OnClick="IncrementCount"
7-
ButtonStyle="TELButtonStyle.Warning"
8-
PreventDoubleClick=false
9-
ButtonText="@ButtonText"
10-
AdditionalCssClasses=""
11-
AriaLabel="Click Counter"
12-
AssistiveText="Click to increase the number"
13-
TabIndex="0"
14-
ToolTipTitle="Click to increment" />
1+
@page "/TELButton/"
2+
<PageTitle>@Title</PageTitle>
3+
<ShowCase Title="@Title" Description="@Description">
4+
5+
<TELButton IsSubmitButtonForEditForm=false
6+
NoJSActionUrl="nojsfallback/mvcendpoint/telbuttonshowcase"
7+
FormData="@(new Dictionary<string, string>{{"increment","1"}})"
8+
OnClick="IncrementCount"
9+
ButtonStyle="TELButtonStyle.Warning"
10+
PreventDoubleClick=false
11+
ButtonText="@ButtonText"
12+
AdditionalCssClasses=""
13+
AriaLabel="Click Counter"
14+
AssistiveText="Click to increase the number"
15+
TabIndex="0"
16+
ToolTipTitle="Click to increment" />
17+
18+
</ShowCase>
19+
1520
@code {
1621
private int currentCount = 0;
1722
public string ButtonText => $"Button pressed {currentCount} times";
@@ -20,4 +25,6 @@
2025
currentCount++;
2126
}
2227

23-
}
28+
private string Title => "TELButton";
29+
private string Description => "The button uses an enum of styles. It has a logger built in from the basecomponent. It has nojs flag from the base component but its nojs behaviour works by being nested in an editform which is submitted when the button is not hydrated (prerendered but no active logic) which occurs during wasm loading, while rendering, and if no wasm/rendering occurs becuase js is disabled.";
30+
}

‎TELBlazor.Components.ShowCase.Shared/Pages/ComponentPages/TestComponentPages/CounterButtonPage.razor‎

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎TELBlazor.Components.ShowCase.Shared/Pages/ComponentPages/TestComponentPages/CssSourceCheckerPage.razor‎

Lines changed: 11 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1,11 @@
1-
<CssSourceChecker/>
1+
@page "/CssSourceChecker/"
2+
<PageTitle>@Title</PageTitle>
3+
<ShowCase Title="@Title" Description="@Description">
4+
<CssSourceChecker/>
5+
</ShowCase>
6+
7+
@code {
8+
9+
private string Title => "CssSourceChecker";
10+
private string Description => "Just a test elements";
11+
}

0 commit comments

Comments
 (0)