Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

update demo page to use gcds-heading component #334

Merged
merged 1 commit into from
Nov 14, 2023
Merged

update demo page to use gcds-heading component #334

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
60 changes: 29 additions & 31 deletions packages/web/src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -102,13 +102,11 @@
</gcds-header>

<gcds-container size="xl" centered tag="main">
<h1 class="text-center mb-500">GC Design System</h1>

<h2>Components</h2>
<gcds-heading tag="h1">GC Design System</gcds-heading>

<!-- ------------- Alerts ------------- -->

<h3 class="mt-500 mb-400 bb-sm">Alerts</h3>
<gcds-heading tag="h2">Alerts</gcds-heading>
<gcds-alert heading="Success alert" alert-role="success">
<p>Example content</p>
</gcds-alert>
Expand All @@ -124,7 +122,7 @@ <h3 class="mt-500 mb-400 bb-sm">Alerts</h3>

<!-- ------------- Buttons ------------- -->

<h3 class="mt-700 mb-400 bb-sm">Buttons</h3>
<gcds-heading tag="h2">Buttons</gcds-heading>
<gcds-button button-role="primary">Primary</gcds-button>
<gcds-button button-role="secondary">Secondary</gcds-button>
<gcds-button button-role="danger">Danger</gcds-button>
Expand All @@ -143,7 +141,7 @@ <h3 class="mt-700 mb-400 bb-sm">Buttons</h3>

<!-- ------------- Cards ------------- -->

<h3 class="mt-700 mb-400 bb-sm">Cards</h3>
<gcds-heading tag="h2">Cards</gcds-heading>

<gcds-grid
tag="div"
Expand Down Expand Up @@ -225,7 +223,7 @@ <h3 class="mt-700 mb-400 bb-sm">Cards</h3>

<!-- ------------- Containers ------------- -->

<h3 class="mt-700 mb-400 bb-sm">Containers</h3>
<gcds-heading tag="h2">Containers</gcds-heading>
<gcds-container size="full" border padding="400">
<p>
I'm a responsive container. My size is only limited by the size of my
Expand All @@ -243,16 +241,16 @@ <h3 class="mt-700 mb-400 bb-sm">Containers</h3>

<!-- ------------- Details ------------- -->

<h3 class="mt-700 mb-400 bb-sm">Details</h3>
<gcds-heading tag="h2">Details</gcds-heading>
<gcds-details details-title="Find out more">
<p>Details about stuff.</p>
</gcds-details>

<!-- ------------- Stepper + Form Elements ------------- -->

<h3 class="mt-700 mb-400 bb-sm">
<gcds-heading tag="h2">
Form elements (including stepper and error summary)
</h3>
</gcds-heading>
<gcds-stepper current-step="1" total-steps="3"></gcds-stepper>
<form novalidate>
<gcds-error-summary listen></gcds-error-summary>
Expand Down Expand Up @@ -361,7 +359,7 @@ <h3 class="mt-700 mb-400 bb-sm">

<!-- ------------- Grid ------------- -->

<h3 class="mt-700 mb-400 bb-sm">Grid</h3>
<gcds-heading tag="h2">Grid</gcds-heading>
<gcds-grid
tag="article"
columns-desktop="1fr 1fr 1fr 1fr"
Expand Down Expand Up @@ -401,7 +399,7 @@ <h3 class="mt-700 mb-400 bb-sm">Grid</h3>

<!-- ------------- Heading ------------- -->

<h3 class="mt-700 mb-400 bb-sm">Heading</h3>
<gcds-heading tag="h2">Heading</gcds-heading>
<gcds-heading tag="h1">Heading level 1</gcds-heading>
<gcds-heading tag="h2">Heading level 2</gcds-heading>
<gcds-heading tag="h3">Heading level 3</gcds-heading>
Expand All @@ -411,7 +409,7 @@ <h3 class="mt-700 mb-400 bb-sm">Heading</h3>

<!-- ------------- Text ------------- -->

<h3 class="mt-700 mb-400 bb-sm">Text</h3>
<gcds-heading tag="h2">Text</gcds-heading>
<gcds-text margin-bottom="400"
>This text is primary text using the default body size. The margin
bottom is set to "400". The character limit is set to "true" (default
Expand Down Expand Up @@ -465,31 +463,31 @@ <h3 class="mt-700 mb-400 bb-sm">Text</h3>

<!-- ------------- Icons ------------- -->

<h3 class="mt-700 mb-400 bb-sm">Icons</h3>
<gcds-icon name="tree" size="caption" margin-right="200"></gcds-icon>
<gcds-icon name="tree" size="text" margin-right="200"></gcds-icon>
<gcds-icon name="tree" size="h6" margin-right="200"></gcds-icon>
<gcds-icon name="tree" size="h5" margin-right="200"></gcds-icon>
<gcds-icon name="tree" size="h4" margin-right="200"></gcds-icon>
<gcds-icon name="tree" size="h3" margin-right="200"></gcds-icon>
<gcds-icon name="tree" size="h2" margin-right="200"></gcds-icon>
<gcds-icon name="tree" size="h1" margin-right="200"></gcds-icon>

<h4 class="mt-500 mb-300">Fixed width icons (square ratio)</h4>
<gcds-icon name="tree" size="text" fixed-width></gcds-icon>
<gcds-heading tag="h2">Icons</gcds-heading>
<gcds-icon name="close" size="caption" margin-right="200"></gcds-icon>
<gcds-icon name="close" size="text" margin-right="200"></gcds-icon>
<gcds-icon name="close" size="h6" margin-right="200"></gcds-icon>
<gcds-icon name="close" size="h5" margin-right="200"></gcds-icon>
<gcds-icon name="close" size="h4" margin-right="200"></gcds-icon>
<gcds-icon name="close" size="h3" margin-right="200"></gcds-icon>
<gcds-icon name="close" size="h2" margin-right="200"></gcds-icon>
<gcds-icon name="close" size="h1" margin-right="200"></gcds-icon>

<gcds-heading tag="h4">Fixed width icons (square ratio)</gcds-heading>
<gcds-icon name="close" size="text" fixed-width></gcds-icon>
<gcds-icon name="folder" size="text" fixed-width></gcds-icon>
<gcds-icon name="fire" size="text" fixed-width></gcds-icon>
<gcds-icon name="utensils" size="text" fixed-width></gcds-icon>

<h4 class="mt-500 mb-300">Variable width icons (auto width)</h4>
<gcds-icon name="tree" size="text"></gcds-icon>
<gcds-heading tag="h4">Variable width icons (auto width)</gcds-heading>
<gcds-icon name="close" size="text"></gcds-icon>
<gcds-icon name="folder" size="text"></gcds-icon>
<gcds-icon name="fire" size="text"></gcds-icon>
<gcds-icon name="utensils" size="text"></gcds-icon>

<!-- ------------- Pagination ------------- -->

<h3 class="mt-700 mb-400 bb-sm">Pagination</h3>
<gcds-heading tag="h2">Pagination</gcds-heading>
<gcds-pagination
display="list"
label="List pagination"
Expand All @@ -511,15 +509,15 @@ <h3 class="mt-700 mb-400 bb-sm">Pagination</h3>

<!-- ------------- Phase Banner ------------- -->

<h3 class="mt-700 mb-400 bb-sm">Phase banner</h3>
<gcds-heading tag="h2">Phase banner</gcds-heading>
<gcds-phase-banner banner-role="primary">
<gcds-icon name="tree" size="sm" slot="banner-icon-left"></gcds-icon>
<p slot="banner-text">Exciting announcement.</p>
</gcds-phase-banner>

<!-- ------------- Screen reader only ------------- -->

<h3 class="mt-700 mb-400 bb-sm">Screen reader only</h3>
<gcds-heading tag="h2">Screen reader only</gcds-heading>
<gcds-text>There is invisible text below this</gcds-text>
<gcds-sr-only>
<gcds-text
Expand Down Expand Up @@ -549,7 +547,7 @@ <h3 class="mt-700 mb-400 bb-sm">Screen reader only</h3>

<!-- ------------- Top nav ------------- -->

<h3 class="mt-700 mb-400 bb-sm">Top navigation</h3>
<gcds-heading tag="h2">Top navigation</gcds-heading>
<gcds-top-nav label="topbar" alignment="right" lang="en">
<gcds-nav-link href="#red" slot="home">Home</gcds-nav-link>
<gcds-nav-link href="#red">Installation</gcds-nav-link>
Expand Down