update PureLabel styling, add size options for PureTabs

src/Pure.Blazor.Components/Essentials/PureLabel.razor

@@ -1,11 +1,18 @@
 @inherits PureComponent
-<div class="@ApplyStyle("font-semibold")">@ChildContent</div>
+<label for="@For" class="@ApplyStyle("font-medium text-sm font-gray-900") @AccessibilityStyles">@ChildContent</label>
 
 @code {
 
     // required styles for accessibility, not overridable
     // touch target should be at least 24px
     // make it the same here since this field is often combined with <PureLink>
     // https://www.w3.org/WAI/WCAG21/Understanding/touch-target-size.html
-    private string AccessibilityStyles => "inline-block py-1";
+    private string AccessibilityStyles => "inline-block leading-7";
+
+    /// <summary>
+    ///     The ID of the content that this label is associated with.
+    /// </summary>
+    [Parameter]
+    public string? For { get; set; }
+
 }

src/Pure.Blazor.Components/Layout/PureTabButton.razor

@@ -1,33 +1,51 @@
 @using System.Text
-<a @onclick="OnClick" class="@(InternalCss) sm:px-6 py-1 text-sm w-1/2 sm:w-auto justify-center sm:justify-start inline-flex items-center">
+@inherits PureComponent
+<a @onclick="OnClick" class="@ApplyStyle(InternalCss)">
     <!-- todo: icon -->
     @Title
 </a>
+
 @code {
-    [Parameter]
-    public string Title { get; set; } = string.Empty;
+    private const string BaseCss = "w-1/2 sm:w-auto justify-center sm:justify-start inline-flex items-center";
+    [Parameter] public string Title { get; set; } = string.Empty;
+
+    [Parameter] public bool IsActive { get; set; }
 
-    [Parameter]
-    public bool IsActive { get; set; }
+    [Parameter] public TabVariant Variant { get; set; }
 
-    [Parameter]
-    public TabVariant Variant { get; set; }
+    [Parameter] public PureSize Size { get; set; }
 
-    [Parameter]
-    public EventCallback<MouseEventArgs> OnClick { get; set; }
+    [Parameter] public EventCallback<MouseEventArgs> OnClick { get; set; }
 
     private string InternalCss { get; set; } = string.Empty;
 
     protected override void OnParametersSet()
     {
         base.OnParametersSet();
 
-        InternalCss = BuildCss();
+        BuildCss();
     }
 
-    public string BuildCss()
+    protected override void BuildCss()
     {
-        var builder = new StringBuilder();
+        var builder = new StringBuilder(BaseCss);
+
+        switch (Size)
+        {
+            case PureSize.ExtraSmall:
+            case PureSize.Small:
+                builder.Append(" sm:px-6 py-1 text-xs");
+                break;
+            case PureSize.Medium:
+                builder.Append(" sm:px-6 px-3 py-2 text-sm");
+                break;
+            case PureSize.ExtraLarge:
+            case PureSize.Large:
+                builder.Append(" sm:px-6 px-4 py-3 text-lg");
+                break;
+            default:
+                throw new ArgumentOutOfRangeException();
+        }
 
         switch (Variant)
         {
@@ -48,6 +66,7 @@
                 throw new ArgumentOutOfRangeException();
         }
 
-        return builder.ToString();
+        InternalCss = builder.ToString();
     }
+
 }

src/Pure.Blazor.Components/Layout/PureTabs.razor

@@ -1,10 +1,11 @@
-<CascadingValue Value="this">
-    <section class="text-gray-900 body-font">
-        <div class="container mx-auto flex flex-wrap flex-col">
-            <div class="flex mx-auto flex-wrap w-full border-b border-neutral-200">
+@inherits PureComponent
+<CascadingValue Value="this">
+    <section class="@ApplyStyle("text-gray-900 body-font")">
+        <div class="@ApplyStyle("container mx-auto flex flex-wrap flex-col")">
+            <div class="@ApplyStyle("flex mx-auto flex-wrap w-full border-b border-neutral-200")">
                 @foreach (var tab in Tabs)
                 {
-                    <PureTabButton Title="@tab.Title" IsActive="@(CurrentTab == tab)" OnClick="() => ChangeTab(tab)" Variant="Variant" />
+                    <PureTabButton Title="@tab.Title" IsActive="@(CurrentTab == tab)" Size="Size" OnClick="() => ChangeTab(tab)" Variant="Variant"/>
                 }
 
             </div>
@@ -16,35 +17,23 @@
 </CascadingValue>
 
 @code {
-    // [Text(TextColor.Gray100)]
-    // [Border(BorderColor.Brand400)]
-    // [Background(BackgroundColor.Brand300)]
-    // public string? defaultButtonCss;
+    [Parameter] public EventCallback OnChanging { get; set; }
 
-    // [Text(TextColor.Gray, 900)] // or [Text(TextColor.Gray, Shade = 900)]
-    // [Border(BorderColor.Brand)]
-    // [Background(BackgroundColor.Gray, 100)]
-    // public string? secondaryButtonCss;
+    [Parameter] public TabVariant Variant { get; set; }
 
-    [Parameter]
-    public RenderFragment? ChildContent { get; set; }
-
-    [Parameter]
-    public EventCallback OnChanging { get; set; }
-
-    [Parameter]
-    public TabVariant Variant { get; set; }
+    [Parameter] public PureSize Size { get; set; } = PureSize.Medium;
 
     public PureTabContent? CurrentTab { get; set; }
-    private string InternalCss { get; set; }
+    private string InternalCss { get; set; } = "";
 
 
-    internal List<PureTabContent> Tabs { get; set; } = new List<PureTabContent>();
+    internal List<PureTabContent> Tabs { get; set; } = new();
+
     protected override void OnParametersSet()
     {
         base.OnParametersSet();
 
-        InternalCss = BuildCss();
+        BuildCss();
     }
 
     internal void ChangeTab(PureTabContent tab)
@@ -55,9 +44,8 @@
         CurrentTab = tab;
     }
 
-    public string BuildCss()
+    protected override void BuildCss()
     {
-        return "";
     }
 
     internal void AddTab(PureTabContent tab)
@@ -71,4 +59,5 @@
 
         StateHasChanged();
     }
+
 }