-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added Styx - Razor Component Library
- Loading branch information
Showing
54 changed files
with
18,878 additions
and
18 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
File renamed without changes.
File renamed without changes.
File renamed without changes.
File renamed without changes.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
35 changes: 35 additions & 0 deletions
35
src/apps/Altinn.Authorization.AccessPackages/src/Styx/Active/Button.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| <button type="button" class="@(Class())" @onclick="@(()=>OnClick.InvokeAsync())">@ChildContent</button> | ||
|
|
||
| @code { | ||
| [Parameter] public RenderFragment ChildContent { get; set; } | ||
| [Parameter] public ButtonVariant Variant { get; set; } = ButtonVariant.Normal; | ||
| [Parameter] public ButtonState State { get; set; } = ButtonState.Default; | ||
| [Parameter] public bool Pill { get; set; } = false; | ||
| [Parameter] public bool Small { get; set; } = false; | ||
|
|
||
| [Parameter] public EventCallback OnClick { get; set; } | ||
|
|
||
| private string Class() | ||
| { | ||
| string res = "bf-button"; | ||
|
|
||
| //res += Variant == ButtonVariant.Normal ? "" : ""; | ||
| res += Variant == ButtonVariant.Filled ? " bf-button-filled" : ""; | ||
| res += Variant == ButtonVariant.Flat ? " bf-button-flat" : ""; | ||
|
|
||
| //res += State == ButtonState.Default ? "" : ""; | ||
| res += State == ButtonState.Neutral ? " bf-button-neutral" : ""; | ||
| res += State == ButtonState.Inactive ? " bf-button-inactive" : ""; | ||
| res += State == ButtonState.Inverted ? " bf-button-inverted" : ""; | ||
| res += State == ButtonState.Alert ? " bf-button-alert" : ""; | ||
|
|
||
| res += Pill ? " bf-button-pill" : ""; | ||
| res += Small ? " bf-button-small" : ""; | ||
|
|
||
| return res; | ||
| } | ||
|
|
||
| public enum ButtonVariant { Normal, Filled, Flat }; | ||
| public enum ButtonState { Default, Neutral, Inactive, Inverted, Alert } | ||
|
|
||
| } |
9 changes: 9 additions & 0 deletions
9
src/apps/Altinn.Authorization.AccessPackages/src/Styx/Active/ButtonGroup.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,9 @@ | ||
| <div class="bf-button-group"> | ||
| @ChildContent | ||
| </div> | ||
|
|
||
| @code { | ||
|
|
||
| [Parameter] public RenderFragment ChildContent { get; set; } | ||
|
|
||
| } |
35 changes: 35 additions & 0 deletions
35
src/apps/Altinn.Authorization.AccessPackages/src/Styx/Active/Input.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,35 @@ | ||
| <div class="bf-input-container @(Disabled ? "bf-input-disabled" : "")"> | ||
| <label for="input-@Id" class="bf-label">@Title</label> | ||
| <div class="bf-label-description">@Description</div> | ||
| <input id="input-@Id" class="bf-input" disabled=@Disabled @bind-value="@Value" @bind-value:event="oninput" placeholder="@Placeholder" /> | ||
| </div> | ||
|
|
||
| @code { | ||
|
|
||
| [Parameter] public string Id { get; set; } | ||
| [Parameter] public string Title { get; set; } | ||
| [Parameter] public string Description { get; set; } | ||
| [Parameter] public string Placeholder { get; set; } | ||
| [Parameter] public bool Disabled { get; set; } | ||
|
|
||
| [Parameter] public EventCallback<string> ValueChanged { get; set; } | ||
|
|
||
| private string _value; | ||
| [Parameter] | ||
| public string Value | ||
| { | ||
| get => _value; | ||
| set | ||
| { | ||
| if (value == _value) | ||
| return; | ||
|
|
||
| _value = value; | ||
| if (ValueChanged.HasDelegate) | ||
| { | ||
| ValueChanged.InvokeAsync(_value); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| } |
13 changes: 13 additions & 0 deletions
13
src/apps/Altinn.Authorization.AccessPackages/src/Styx/Active/InputContainer.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,13 @@ | ||
| @namespace Styx | ||
|
|
||
| <div class="bf-input-container"> | ||
| <label for="input-" class="bf-label">@Title</label> | ||
| <div class="bf-label-description">@Description</div> | ||
| @ChildContent | ||
| </div> | ||
|
|
||
| @code { | ||
| [Parameter] public string Title { get; set; } | ||
| [Parameter] public string Description { get; set; } | ||
| [Parameter] public RenderFragment ChildContent { get; set; } | ||
| } |
25 changes: 25 additions & 0 deletions
25
src/apps/Altinn.Authorization.AccessPackages/src/Styx/Active/RadioGroup.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,25 @@ | ||
| @namespace Styx | ||
| <CascadingValue TValue="RadioGroup" Value="this"> | ||
| @ChildContent | ||
| </CascadingValue> | ||
|
|
||
| @code { | ||
|
|
||
| [Parameter] public RenderFragment ChildContent { get; set; } | ||
| [Parameter] public string Key { get; set; } | ||
| [Parameter] public string Value { get; set; } = ""; | ||
| [Parameter] public EventCallback<string> ValueChanged { get; set; } | ||
|
|
||
| public void Set(string value) | ||
| { | ||
| if (Value == value) | ||
| { | ||
| Value = ""; | ||
| } | ||
| else | ||
| { | ||
| Value = value; | ||
| } | ||
| ValueChanged.InvokeAsync(Value); | ||
| } | ||
| } |
20 changes: 20 additions & 0 deletions
20
src/apps/Altinn.Authorization.AccessPackages/src/Styx/Active/RadioItem.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| @namespace Styx | ||
|
|
||
| <label class="bf-checkbox @(UseButtonStyle ? "bf-checkbox-button" : "") @(Compact ? "bf-checkbox-small" : "")"> | ||
| <input type="radio" checked="@(Group.Value == this.Value)" id=@Value name=@Group.Key @onchange=@(() => Group.Set(Value)) /> | ||
| <span class="bf-checkbox-icon"> | ||
| <i class="bf-checkbox-checked fa-solid fa-circle-dot"></i> | ||
| <i class="bf-checkbox-unchecked fa-regular fa-circle"></i> | ||
| </span> | ||
| @ChildContent | ||
| </label> | ||
|
|
||
|
|
||
| @code { | ||
|
|
||
| [CascadingParameter] public RadioGroup Group { get; set; } | ||
| [Parameter] public string Value { get; set; } | ||
| [Parameter] public bool UseButtonStyle { get; set; } | ||
| [Parameter] public bool Compact { get; set; } | ||
| [Parameter] public RenderFragment ChildContent { get; set; } | ||
| } |
20 changes: 20 additions & 0 deletions
20
src/apps/Altinn.Authorization.AccessPackages/src/Styx/Active/Switch.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,20 @@ | ||
| <label class="bf-checkbox bf-switch-wrapper bf-checkbox-button"> | ||
|
|
||
| <input type="checkbox" checked="@Checked" @onchange="eventArgs => { CheckedChanged.InvokeAsync((bool)eventArgs.Value); }" /> | ||
| <span class="bf-switch @(Checked ? "bf-switch-checked" : "")"> | ||
| <span class="bf-switch-thumb"> | ||
| <i class="bf-checkbox-checked fa-solid fa-check"></i> | ||
| <i class="bf-checkbox-unchecked fa-solid"></i> | ||
| </span> | ||
| </span> | ||
| <span class="bf-checkbox-text">@ChildContent</span> | ||
|
|
||
| </label> | ||
|
|
||
| @code { | ||
|
|
||
| [Parameter] public bool Checked { get; set; } | ||
| [Parameter] public EventCallback<bool> CheckedChanged { get; set; } | ||
| [Parameter] public RenderFragment ChildContent { get; set; } | ||
|
|
||
| } |
3 changes: 3 additions & 0 deletions
3
src/apps/Altinn.Authorization.AccessPackages/src/Styx/Component1.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| <div class="my-component"> | ||
| This component is defined in the <strong>Styx</strong> library. | ||
| </div> |
6 changes: 6 additions & 0 deletions
6
src/apps/Altinn.Authorization.AccessPackages/src/Styx/Component1.razor.css
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,6 @@ | ||
| .my-component { | ||
| border: 2px dashed red; | ||
| padding: 1em; | ||
| margin: 1em 0; | ||
| background-image: url('background.png'); | ||
| } |
37 changes: 37 additions & 0 deletions
37
src/apps/Altinn.Authorization.AccessPackages/src/Styx/ExampleJsInterop.cs
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,37 @@ | ||
| using Microsoft.JSInterop; | ||
|
|
||
| namespace Styx | ||
| { | ||
| // This class provides an example of how JavaScript functionality can be wrapped | ||
| // in a .NET class for easy consumption. The associated JavaScript module is | ||
| // loaded on demand when first needed. | ||
| // | ||
| // This class can be registered as scoped DI service and then injected into Blazor | ||
| // components for use. | ||
|
|
||
| public class ExampleJsInterop : IAsyncDisposable | ||
| { | ||
| private readonly Lazy<Task<IJSObjectReference>> moduleTask; | ||
|
|
||
| public ExampleJsInterop(IJSRuntime jsRuntime) | ||
| { | ||
| moduleTask = new(() => jsRuntime.InvokeAsync<IJSObjectReference>( | ||
| "import", "./_content/Styx/exampleJsInterop.js").AsTask()); | ||
| } | ||
|
|
||
| public async ValueTask<string> Prompt(string message) | ||
| { | ||
| var module = await moduleTask.Value; | ||
| return await module.InvokeAsync<string>("showPrompt", message); | ||
| } | ||
|
|
||
| public async ValueTask DisposeAsync() | ||
| { | ||
| if (moduleTask.IsValueCreated) | ||
| { | ||
| var module = await moduleTask.Value; | ||
| await module.DisposeAsync(); | ||
| } | ||
| } | ||
| } | ||
| } |
17 changes: 17 additions & 0 deletions
17
src/apps/Altinn.Authorization.AccessPackages/src/Styx/Interactive/Accordion.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| <div class="bf-accordion"> | ||
| <CascadingValue TValue="Accordion" Value="this"> | ||
| @ChildContent | ||
| </CascadingValue> | ||
| </div> | ||
|
|
||
| @code { | ||
|
|
||
| [Parameter] public RenderFragment ChildContent { get; set; } | ||
| [Parameter] public bool MultiOpen { get; set; } | ||
| public string ActiveItem { get; set; } = ""; | ||
|
|
||
| public void SetActiveItem(string title) | ||
| { | ||
| ActiveItem = title; | ||
| } | ||
| } |
70 changes: 70 additions & 0 deletions
70
src/apps/Altinn.Authorization.AccessPackages/src/Styx/Interactive/AccordionItem.razor
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,70 @@ | ||
| <div class="bf-accordion-item @(IsOpen ? "bf-accordion-item-active" : "")"> | ||
| <div class="bf-accordion-item-title"> | ||
| <button type="button" @onclick="() => Toggle()"> | ||
| <span class="bf-accordion-item-angle-circle"> | ||
| <i class="fa-solid fa-angle-right fa-fw bf-accordion-item-angle"></i> | ||
| </span> | ||
| <span> | ||
| @if (!string.IsNullOrEmpty(Icon)) | ||
| { | ||
| <Icon Name="@Icon"></Icon><span> </span> | ||
| } | ||
| @Title | ||
| </span> | ||
| <div style="display: flex; gap: 6px; padding: 0 6px;"> | ||
| @foreach (var tag in Tags) | ||
| { | ||
| <span class="bf-badge bfc-theme-bg bf-badge-compact">@tag</span> | ||
| } | ||
| </div> | ||
| <div> | ||
| @if (!string.IsNullOrEmpty(Url)) | ||
| { | ||
| <a href="@Url"> | ||
| <i class="fa-solid fa-arrow-up-right-from-square"></i> | ||
| </a> | ||
| } | ||
| </div> | ||
|
|
||
| </button> | ||
| </div> | ||
| <div class="bf-expand @(ShowContent() ? "" : "bf-expand-closed")"> | ||
| <div> | ||
| <div class="bf-accordion-item-content"> | ||
| @ChildContent | ||
| </div> | ||
| </div> | ||
| </div> | ||
| </div> | ||
|
|
||
| @code { | ||
|
|
||
| [CascadingParameter] public Accordion Parent { get; set; } | ||
|
|
||
| [Parameter] public string Title { get; set; } | ||
| [Parameter] public string Icon { get; set; } | ||
| [Parameter] public RenderFragment ChildContent { get; set; } | ||
| [Parameter] public bool IsOpen { get; set; } = false; | ||
| [Parameter] public string Url { get; set; } | ||
| [Parameter] public List<string> Tags { get; set; } = new List<string>(); | ||
|
|
||
| protected async override Task OnParametersSetAsync() | ||
| { | ||
| if (IsOpen) | ||
| { | ||
| Parent.SetActiveItem(Title); | ||
| } | ||
| } | ||
|
|
||
| private bool ShowContent() => IsOpen ? Parent.MultiOpen || Parent.MultiOpen == false && Parent.ActiveItem == Title : false; | ||
|
|
||
| protected void Toggle() | ||
| { | ||
| IsOpen = !IsOpen; | ||
| if (IsOpen) | ||
| { | ||
| Parent.SetActiveItem(Title); | ||
| } | ||
| } | ||
|
|
||
| } |
Oops, something went wrong.