Skip to content

Commit

Permalink
Documentation - code cleanup - inprogress
Browse files Browse the repository at this point in the history
  • Loading branch information
@gvreddy04
gvreddy04 committed Nov 4, 2024
1 parent 87966f6 commit 8eb3127
Show file tree
Hide file tree
Showing 69 changed files with 639 additions and 561 deletions.
31 changes: 18 additions & 13 deletions BlazorBootstrap.Demo.RCL/Components/Pages/AI/AIChat/AIChatDocumentation.razor
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,26 @@
@page "/ai/open-ai-chat"
@attribute [Route(pageUrl)]

<PageTitle>@title</PageTitle>
<PageMetaTags PageUrl="@pageUrl"
Title="@metaTitle"
Description="@metaDescription"
ImageUrl="@imageUrl" />

<MetaTags PageUrl="@pageUrl" Title="@title" Description="@description" ImageUrl="@imageUrl" />

<h1>Blazor Open AI Chat</h1>
<div class="lead mb-3">Provide contextual feedback messages for typical user actions with a handful of available and flexible alert messages.</div>
<PageHero Heading="@pageTitle">
<LeadSection>@pageDescription</LeadSection>
</PageHero>

<CarbonAds />

<SectionHeading Size="HeadingSize.H2" Text="Examples" PageUrl="@pageUrl" HashTagName="examples" />
<div class="mb-3">Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight colors.</div>
<Demo Type="typeof(AIChat_Demo_01_Examples)" Tabs="true" />
<Section Size="HeadingSize.H2" Name="Examples" PageUrl="@pageUrl" Link="examples">
<div class="mb-3">Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight colors.</div>
<Demo Type="typeof(AIChat_Demo_01_Examples)" Tabs="true" />
</Section>

@code{
private string pageUrl = "/ai/open-ai-chat";
private string title = "Blazor Open AI Chat Component";
private string description = "Provide contextual feedback messages for typical user actions with the handful of available and flexible Blazor Bootstrap alert messages."; // TODO: update
private string imageUrl = "https://i.imgur.com/FGgEMp6.jpg"; // TODO: update
private const string pageUrl = RouteConstants.Demos_AI_Chat_Documentation;
private const string pageTitle = "Blazor Open AI Chat Component";
private const string pageDescription = "Provide contextual feedback messages for typical user actions with the handful of available and flexible Blazor Bootstrap alert messages."; // TODO: update
private const string metaTitle = "Blazor Open AI Chat Component";
private const string metaDescription = "Provide contextual feedback messages for typical user actions with the handful of available and flexible Blazor Bootstrap alert messages."; // TODO: update
private const string imageUrl = "https://i.imgur.com/FGgEMp6.jpg"; // TODO: update
}
7 changes: 5 additions & 2 deletions BlazorBootstrap.Demo.RCL/Components/Pages/Accordion/AccordionDocumentation.razor
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,9 @@
@attribute [Route(pageUrl)]

<PageMetaTags PageUrl="@pageUrl" Title="@metaTitle" Description="@metaDescription" ImageUrl="@imageUrl" />
<PageMetaTags PageUrl="@pageUrl"
Title="@metaTitle"
Description="@metaDescription"
ImageUrl="@imageUrl" />

<PageHero Heading="@pageTitle">
<LeadSection>@pageDescription</LeadSection>
Expand Down Expand Up @@ -110,7 +113,7 @@
</Section>

@code {
private const string pageUrl = "/accordion";
private const string pageUrl = RouteConstants.Demos_Accordion_Documentation;
private const string pageTitle = "Blazor Accordion";
private const string pageDescription = "Build vertically collapsing accordions in combination with our Collapse component.";
private const string metaTitle = "Blazor Accordion Component";
Expand Down
68 changes: 39 additions & 29 deletions BlazorBootstrap.Demo.RCL/Components/Pages/Alerts/AlertDocumentation.razor
View file
Original file line number Diff line number Diff line change
@@ -1,48 +1,58 @@
@page "/alerts"
@attribute [Route(pageUrl)]

<PageTitle>@title</PageTitle>
<PageMetaTags PageUrl="@pageUrl"
Title="@metaTitle"
Description="@metaDescription"
ImageUrl="@imageUrl" />

<MetaTags PageUrl="@pageUrl" Title="@title" Description="@description" ImageUrl="@imageUrl" />

<h1>Blazor Alerts</h1>
<div class="lead mb-3">Provide contextual feedback messages for typical user actions with a handful of available and flexible alert messages.</div>
<PageHero Heading="@pageTitle">
<LeadSection>@pageDescription</LeadSection>
</PageHero>

<CarbonAds />

<SectionHeading Size="HeadingSize.H2" Text="Examples" PageUrl="@pageUrl" HashTagName="examples" />
<div class="mb-3">Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight colors.</div>
<Demo Type="typeof(Alert_Demo_01_Examples)" Tabs="true" />
<Section Size="HeadingSize.H2" Name="Examples" PageUrl="@pageUrl" Link="examples">
<div class="mb-3">Alerts are available for any length of text, as well as an optional close button. For proper styling, use one of the eight colors.</div>
<Demo Type="typeof(Alert_Demo_01_Examples)" Tabs="true" />
</Section>

<SectionHeading Size="HeadingSize.H2" Text="Link color" PageUrl="@pageUrl" HashTagName="link-color" />
<div class="mb-3">Use the <code>alert-link</code> css class to quickly provide matching colored links within any alert.</div>
<Demo Type="typeof(Alert_Demo_02_Link_Color)" Tabs="true" />
<Section Size="HeadingSize.H2" Name="Link color" PageUrl="@pageUrl" Link="link-color">
<div class="mb-3">Use the <code>alert-link</code> css class to quickly provide matching colored links within any alert.</div>
<Demo Type="typeof(Alert_Demo_02_Link_Color)" Tabs="true" />
</Section>

<SectionHeading Size="HeadingSize.H2" Text="Additional Content" PageUrl="@pageUrl" HashTagName="additional-content" />
<div class="mb-3">Alerts can also contain additional HTML elements like headings, paragraphs and dividers.</div>
<Demo Type="typeof(Alert_Demo_03_Additional_Content)" Tabs="false" />
<Section Size="HeadingSize.H2" Name="Additional Content" PageUrl="@pageUrl" Link="additional-content">
<div class="mb-3">Alerts can also contain additional HTML elements like headings, paragraphs and dividers.</div>
<Demo Type="typeof(Alert_Demo_03_Additional_Content)" Tabs="false" />
</Section>

<SectionHeading Size="HeadingSize.H2" Text="Icons" PageUrl="@pageUrl" HashTagName="icons" />
<div class="mb-3">Similarly, you can use Bootstrap Icons to create alerts with icons.</div>
<Demo Type="typeof(Alert_Demo_04_Icons)" Tabs="true" />
<Section Size="HeadingSize.H2" Name="Icons" PageUrl="@pageUrl" Link="icons">
<div class="mb-3">Similarly, you can use Bootstrap Icons to create alerts with icons.</div>
<Demo Type="typeof(Alert_Demo_04_Icons)" Tabs="true" />
</Section>

<SectionHeading Size="HeadingSize.H2" Text="Dismissing" PageUrl="@pageUrl" HashTagName="dismissing" />
<div class="mb-3">1. Using the <code>Dismissable="true"</code>, it’s possible to dismiss any alert inline.</div>
<Demo Type="typeof(Alert_Demo_05_Dismissing_A)" Tabs="true" />
<Section Size="HeadingSize.H2" Name="Dismissing" PageUrl="@pageUrl" Link="dismissing">
<div class="mb-3">1. Using the <code>Dismissable="true"</code>, it’s possible to dismiss any alert inline.</div>
<Demo Type="typeof(Alert_Demo_05_Dismissing_A)" Tabs="true" />

<div class="my-3">2. Manually we can close an alert with button click.</div>
<Demo Type="typeof(Alert_Demo_05_Dismissing_B)" Tabs="true" />
<div class="my-3">2. Manually we can close an alert with button click.</div>
<Demo Type="typeof(Alert_Demo_05_Dismissing_B)" Tabs="true" />
</Section>

<Callout Color="CalloutColor.Warning">
When an alert is dismissed, the element is completely removed from the page structure. If a keyboard user dismisses the alert using the close button, their focus will suddenly be lost and, depending on the browser, reset to the start of the page/document.
For this reason, we recommend subscribing to the <code>OnClosed</code> callback event and programmatically sets focus to the most appropriate location on the page.
</Callout>

<SectionHeading Size="HeadingSize.H2" Text="Switch alert type dynamically" PageUrl="@pageUrl" HashTagName="switch-alert-type-dynamically" />
<Demo Type="typeof(Alert_Demo_06_Switch_Alert_Type_Dynamically)" Tabs="true" />
<Section Size="HeadingSize.H2" Name="Switch alert type dynamically" PageUrl="@pageUrl" Link="switch-alert-type-dynamically">
<Demo Type="typeof(Alert_Demo_06_Switch_Alert_Type_Dynamically)" Tabs="true" />
</Section>

@code{
private string pageUrl = "/alerts";
private string title = "Blazor Alert Component";
private string description = "Provide contextual feedback messages for typical user actions with the handful of available and flexible Blazor Bootstrap alert messages.";
private string imageUrl = "https://i.imgur.com/FGgEMp6.jpg";
private const string pageUrl = RouteConstants.Demos_Alerts_Documentation;
private const string pageTitle = "Blazor Alert";
private const string pageDescription = "Provide contextual feedback messages for typical user actions with the handful of available and flexible Blazor Bootstrap alert messages.";
private const string metaTitle = "Blazor Alert Component";
private const string metaDescription = "Provide contextual feedback messages for typical user actions with the handful of available and flexible Blazor Bootstrap alert messages.";
private const string imageUrl = "https://i.imgur.com/FGgEMp6.jpg";
}
103 changes: 56 additions & 47 deletions BlazorBootstrap.Demo.RCL/Components/Pages/Badge/BadgeDocumentation.razor
View file
Original file line number Diff line number Diff line change
@@ -1,61 +1,70 @@
@page "/badge"
@attribute [Route(pageUrl)]

<PageTitle>@title</PageTitle>
<PageMetaTags PageUrl="@pageUrl"
Title="@metaTitle"
Description="@metaDescription"
ImageUrl="@imageUrl" />

<MetaTags PageUrl="@pageUrl" Title="@title" Description="@description" ImageUrl="@imageUrl" />

<h1>Blazor Badge</h1>
<div class="lead mb-3">
The Blazor Bootstrap <code>Badge</code> component shows the small count and labels.
</div>
<PageHero Heading="@pageTitle">
<LeadSection>@pageDescription</LeadSection>
</PageHero>

<CarbonAds />

<SectionHeading Size="HeadingSize.H2" Text="Examples" PageUrl="@pageUrl" HashTagName="examples" />
<div class="mb-3">
Badges scale to match the size of the immediate parent element by using relative font sizing and <code>em</code> units.
As of now, badges no longer have focus or hover styles for links.
</div>
<Demo Type="typeof(Badge_Demo_01_Examples)" Tabs="false" />
<Section Size="HeadingSize.H2" Name="Examples" PageUrl="@pageUrl" Link="examples">
<div class="mb-3">
Badges scale to match the size of the immediate parent element by using relative font sizing and <code>em</code> units.
As of now, badges no longer have focus or hover styles for links.
</div>
<Demo Type="typeof(Badge_Demo_01_Examples)" Tabs="false" />
</Section>

<Section Size="HeadingSize.H2" Name="Background colors" PageUrl="@pageUrl" Link="background-colors">
<Demo Type="typeof(Badge_Demo_02_Background_Colors)" Tabs="false" />
</Section>

<SectionHeading Size="HeadingSize.H2" Text="Background colors" PageUrl="@pageUrl" HashTagName="background-colors" />
<Demo Type="typeof(Badge_Demo_02_Background_Colors)" Tabs="false" />
<Callout Heading="Conveying meaning to assistive technologies" Color="CalloutColor.Info">
Using color to add meaning only provides a visual indication, which will not be conveyed to users of assistive technologies – such as screen readers.
Ensure that information denoted by the color is either obvious from the content itself (e.g., the visible text) or is included through alternative means, such as additional text hidden with the <code>VisuallyHiddenText</code> parameter.
</Callout>

<SectionHeading Size="HeadingSize.H2" Text="Pill badges" PageUrl="@pageUrl" HashTagName="pill-badges" />
<div class="mb-3">
Use the <code>IndicatorType</code> parameter to make badges more rounded with a larger border-radius.
</div>
<Demo Type="typeof(Badge_Demo_03_Pill_Badges)" Tabs="false" />

<SectionHeading Size="HeadingSize.H2" Text="Buttons" PageUrl="@pageUrl" HashTagName="buttons" />
<div class="mb-3">
Badges can be used as part of links or buttons to provide a counter.
</div>
<Demo Type="typeof(Badge_Demo_04_Buttons)" Tabs="true" />
<div class="mt-3">
<p>Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.</p>
<p>Unless the context is clear (as with the “Notifications” example, where it is understood that the “4” is the number of notifications), consider including additional context with a visually hidden piece of additional text.</p>
</div>

<SectionHeading Size="HeadingSize.H2" Text="Positioned" PageUrl="@pageUrl" HashTagName="positioned" />
<div class="mb-3">
Use <code>Position</code> and <code>Placement</code> parameters to position it in the corner of a link or button.
</div>
<Demo Type="typeof(Badge_Demo_05_Positioned)" Tabs="true" />

<SectionHeading Size="HeadingSize.H2" Text="Generic indicator" PageUrl="@pageUrl" HashTagName="generic-indicator" />
<div class="mb-3">
You can also replace the badge with a generic indicator without the count.
</div>
<Demo Type="typeof(Badge_Demo_06_Generic_Indicator)" Tabs="false" />
<Section Size="HeadingSize.H2" Name="Pill badges" PageUrl="@pageUrl" Link="pill-badges">
<div class="mb-3">
Use the <code>IndicatorType</code> parameter to make badges more rounded with a larger border-radius.
</div>
<Demo Type="typeof(Badge_Demo_03_Pill_Badges)" Tabs="false" />
</Section>

<Section Size="HeadingSize.H2" Name="Buttons" PageUrl="@pageUrl" Link="buttons">
<div class="mb-3">
Badges can be used as part of links or buttons to provide a counter.
</div>
<Demo Type="typeof(Badge_Demo_04_Buttons)" Tabs="true" />
<div class="mt-3">
<p>Note that depending on how they are used, badges may be confusing for users of screen readers and similar assistive technologies. While the styling of badges provides a visual cue as to their purpose, these users will simply be presented with the content of the badge. Depending on the specific situation, these badges may seem like random additional words or numbers at the end of a sentence, link, or button.</p>
<p>Unless the context is clear (as with the “Notifications” example, where it is understood that the “4” is the number of notifications), consider including additional context with a visually hidden piece of additional text.</p>
</div>
</Section>

<Section Size="HeadingSize.H2" Name="Positioned" PageUrl="@pageUrl" Link="positioned">
<div class="mb-3">
Use <code>Position</code> and <code>Placement</code> parameters to position it in the corner of a link or button.
</div>
<Demo Type="typeof(Badge_Demo_05_Positioned)" Tabs="true" />
</Section>

<Section Size="HeadingSize.H2" Name="Generic indicator" PageUrl="@pageUrl" Link="generic-indicator">
<div class="mb-3">
You can also replace the badge with a generic indicator without the count.
</div>
<Demo Type="typeof(Badge_Demo_06_Generic_Indicator)" Tabs="false" />
</Section>

@code {
private string pageUrl = "/badge";
private string title = "Blazor Badge Component";
private string description = "The Blazor Bootstrap Badge component shows the small count and labels.";
private string imageUrl = "https://i.imgur.com/ux0sTs9.png";
private const string pageUrl = "/badge";
private const string pageTitle = "Blazor Badge";
private const string pageDescription = "The Blazor Bootstrap Badge component shows the small count and labels.";
private const string metaTitle = "Blazor Badge Component";
private const string metaDescription = "The Blazor Bootstrap Badge component shows the small count and labels.";
private const string imageUrl = "https://i.imgur.com/ux0sTs9.png";
}
41 changes: 23 additions & 18 deletions BlazorBootstrap.Demo.RCL/Components/Pages/Breadcrumb/BreadcrumbDocumentation.razor
View file
Original file line number Diff line number Diff line change
@@ -1,28 +1,33 @@
@page "/breadcrumb"
@attribute [Route(pageUrl)]

<PageTitle>@title</PageTitle>
<PageMetaTags PageUrl="@pageUrl"
Title="@metaTitle"
Description="@metaDescription"
ImageUrl="@imageUrl" />

<MetaTags PageUrl="@pageUrl" Title="@title" Description="@description" ImageUrl="@imageUrl" />

<h1>Blazor Breadcrumb</h1>
<div class="lead mb-3">
Indicate the current page's location within a navigational hierarchy that automatically adds separators.
</div>
<PageHero Heading="@pageTitle">
<LeadSection>@pageDescription</LeadSection>
</PageHero>

<CarbonAds />

<SectionHeading Size="HeadingSize.H2" Text="Examples" PageUrl="@pageUrl" HashTagName="examples" />
<Demo Type="typeof(Breadcrumb_Demo_01_Examples)" />
<Section Size="HeadingSize.H2" Name="Examples" PageUrl="@pageUrl" Link="examples">
<Demo Type="typeof(Breadcrumb_Demo_01_Examples)" />
</Section>

<SectionHeading Size="HeadingSize.H2" Text="Dividers" PageUrl="@pageUrl" HashTagName="dividers" />
<Demo Type="typeof(Breadcrumb_Demo_02_Dividers)" />
<Section Size="HeadingSize.H2" Name="Dividers" PageUrl="@pageUrl" Link="dividers">
<Demo Type="typeof(Breadcrumb_Demo_02_Dividers)" />
</Section>

<SectionHeading Size="HeadingSize.H2" Text="Embedded SVG icon" PageUrl="@pageUrl" HashTagName="embedded-svg-icon" />
<Demo Type="typeof(Breadcrumb_Demo_03_Embedded_SVG)" />
<Section Size="HeadingSize.H2" Name="Embedded SVG icon" PageUrl="@pageUrl" Link="embedded-svg-icon">
<Demo Type="typeof(Breadcrumb_Demo_03_Embedded_SVG)" />
</Section>

@code {
private string pageUrl = "/breadcrumb";
private string title = "Blazor Breadcrumb Component";
private string description = "Indicate the current page's location within a navigational hierarchy that automatically adds separators.";
private string imageUrl = "https://i.imgur.com/hO90HoC.jpg";
private const string pageUrl = RouteConstants.Demos_Breadcrumb_Documentation;
private const string pageTitle = "Blazor Breadcrumb";
private const string pageDescription = "Indicate the current page's location within a navigational hierarchy that automatically adds separators.";
private const string metaTitle = "Blazor Breadcrumb Component";
private const string metaDescription = "Indicate the current page's location within a navigational hierarchy that automatically adds separators.";
private const string imageUrl = "https://i.imgur.com/hO90HoC.jpg";
}
16 changes: 8 additions & 8 deletions BlazorBootstrap.Demo.RCL/Components/Pages/Buttons/ButtonDocumentation.razor
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
@page "/buttons"
@attribute [Route(pageUrl)]

<PageTitle>@title</PageTitle>
<PageMetaTags PageUrl="@pageUrl"
Title="@metaTitle"
Description="@metaDescription"
ImageUrl="@imageUrl" />

<MetaTags PageUrl="@pageUrl" Title="@title" Description="@description" ImageUrl="@imageUrl" />

<h1>Blazor Buttons</h1>
<div class="lead mb-3">
Use Blazor Bootstrap button styles for actions in forms, dialogs, and more with support for multiple sizes, states, and more.
</div>
<PageHero Heading="@pageTitle">
<LeadSection>@pageDescription</LeadSection>
</PageHero>

<CarbonAds />

Expand Down
16 changes: 8 additions & 8 deletions BlazorBootstrap.Demo.RCL/Components/Pages/Callout/CalloutDocumentation.razor
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
@page "/callout"
@attribute [Route(pageUrl)]

<PageTitle>@title</PageTitle>
<PageMetaTags PageUrl="@pageUrl"
Title="@metaTitle"
Description="@metaDescription"
ImageUrl="@imageUrl" />

<MetaTags PageUrl="@pageUrl" Title="@title" Description="@description" ImageUrl="@imageUrl" />

<h1>Blazor Callout</h1>
<div class="lead mb-3">
Blazor Bootstrap callout component provides presentation of content in a visually distinct manner. Includes a heading, icon and typically text-based content.
</div>
<PageHero Heading="@pageTitle">
<LeadSection>@pageDescription</LeadSection>
</PageHero>

<CarbonAds />

Expand Down
16 changes: 8 additions & 8 deletions BlazorBootstrap.Demo.RCL/Components/Pages/Card/CardDocumentation.razor
View file
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
@page "/card"
@attribute [Route(pageUrl)]

<PageTitle>@title</PageTitle>
<PageMetaTags PageUrl="@pageUrl"
Title="@metaTitle"
Description="@metaDescription"
ImageUrl="@imageUrl" />

<MetaTags PageUrl="@pageUrl" Title="@title" Description="@description" ImageUrl="@imageUrl" />

<h1>Blazor Card</h1>
<div class="lead mb-3">
BootstrapBootstrap's cards provide a flexible and extensible content container with multiple variants and options.
</div>
<PageHero Heading="@pageTitle">
<LeadSection>@pageDescription</LeadSection>
</PageHero>

<CarbonAds />

Expand Down
Loading

0 comments on commit 8eb3127

Please sign in to comment.