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

[WIP]docs(styles): font awesome example [ci visual] #4724

Closed
wants to merge 1 commit into from
Closed

[WIP]docs(styles): font awesome example [ci visual] #4724

Show file tree
Hide file tree
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
1 change: 1 addition & 0 deletions .storybook/preview-head.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,7 @@
<script type="text/javascript" src="preview-head.js"></script>
<script src="https://unpkg.com/[email protected]/dist/focus-visible.js"></script>

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="shortcut icon" href="favicon.ico" />
<link rel="icon" type="image/svg" href="logo.svg" sizes="192x192" />

Expand Down
40 changes: 40 additions & 0 deletions packages/styles/stories/Font-awesome/font-awesome-button.example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,40 @@
<div class="is-cozy">
<div dir="ltr">
<div class="fddocs-button-container">
<button aria-label="Example one" class="fd-button fd-button--emphasized fd-button--menu">
<i class="fa-solid fa-universal-access"></i>
</button>
<button aria-label="Example two" class="fd-button fd-button--menu">
<i class="fa-solid fa-building-columns"></i>
</button>
<button aria-label="Example three" class="fd-button fd-button-ghost fd-button--menu">
<i class="fa-solid fa-book-journal-whills"></i>
</button>
<button aria-label="Example four" class="fd-button fd-button--menu fd-button--positive">
<i class="fa-solid fa-cart-plus"></i>
</button>
<button aria-label="Example five" class="fd-button fd-button--menu fd-button--negative">
<i class="fa-solid fa-radiation"></i>
</button>
<button aria-label="Example six" class="fd-button fd-button--menu fd-button--attention">
<i class="fa-solid fa-recycle"></i>
</button>
<button aria-label="Example seven" class="fd-button fd-button--menu fd-button--transparent">
<i class="fa-solid fa-building-flag"></i>
</button>
<div class="fddocs-button-container" style="margin-top: 1rem">
<div class="fd-segmented-button" role="group" aria-label="Group label">
<button aria-label="Survey" class="fd-button" aria-pressed="false">
<i class="fa-solid fa-print"></i>
</button>
<button aria-label="Chart" class="fd-button fd-button--toggled" aria-pressed="true">
<i class="fa-solid fa-plus"></i>
</button>
<button aria-label="Pool" class="fd-button" aria-pressed="false">
<i class="fa-solid fa-list"></i>
</button>
</div>
</div>
</div>
</div>
</div>
391 changes: 391 additions & 0 deletions packages/styles/stories/Font-awesome/font-awesome-card.example.html
View file
Open in desktop

Large diffs are not rendered by default.

62 changes: 62 additions & 0 deletions packages/styles/stories/Font-awesome/font-awesome-popover.example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,62 @@
<div class="is-cozy">
<div dir="ltr">
<div class="fd-popover" style="margin-bottom: 300px">
<div class="fd-popover__control">
<button
class="fd-button"
aria-controls="popoverF1"
aria-expanded="true"
aria-haspopup="true"
onclick="onPopoverClick('popoverF1');"
role="button"
>
<i class="fa-solid fa-gas-pump"></i>
</button>
</div>
<div class="fd-popover__body" aria-hidden="false" id="popoverF1">
<div class="fd-popover__wrapper" style="max-height: 250px">
<nav class="fd-menu" aria-label="big navigation menu">
<ul class="fd-menu__list fd-menu__list--no-shadow">
<li class="fd-menu__item">
<a class="fd-menu__link" href="#">
<i class="fa-solid fa-car-side" style="margin-right: 0.5rem"></i>
<span class="fd-menu__title">Option 1</span>
</a>
</li>
<li class="fd-menu__item">
<a class="fd-menu__link" href="#">
<i class="fa-solid fa-truck-pickup" style="margin-right: 0.5rem"></i>
<span class="fd-menu__title">Option 2</span>
</a>
</li>
<li class="fd-menu__item">
<a class="fd-menu__link" href="#">
<i class="fa-solid fa-truck-moving" style="margin-right: 0.5rem"></i>
<span class="fd-menu__title">Option 3</span>
</a>
</li>
<li class="fd-menu__item">
<a class="fd-menu__link" href="#">
<i class="fa-solid fa-caravan" style="margin-right: 0.5rem"></i>
<span class="fd-menu__title">Option 4</span>
</a>
</li>
<li class="fd-menu__item">
<a class="fd-menu__link" href="#">
<i class="fa-solid fa-motorcycle" style="margin-right: 0.5rem"></i>
<span class="fd-menu__title">Option 5</span>
</a>
</li>
<li class="fd-menu__item">
<a class="fd-menu__link" href="#">
<i class="fa-solid fa-bicycle" style="margin-right: 0.5rem"></i>
<span class="fd-menu__title">Option 6</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
167 changes: 167 additions & 0 deletions packages/styles/stories/Font-awesome/font-awesome-shellbar.example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,167 @@
<div class="is-cozy">
<div dir="ltr">
<div style="height: 300px">
<div class="fd-shellbar fd-shellbar--xl">
<div class="fd-shellbar__group fd-shellbar__group--product">
<a class="fd-shellbar__logo" href="https://www.sap.com/index.html" target="_blank">
<img
src="//unpkg.com/fundamental-styles/dist/images/sap-logo.png"
srcset="
//unpkg.com/fundamental-styles/dist/images/[email protected] 1x,
//unpkg.com/fundamental-styles/dist/images/[email protected] 2x,
//unpkg.com/fundamental-styles/dist/images/[email protected] 3x
"
width="48"
height="24"
alt="SAP"
/>
</a>
<div class="fd-popover">
<div class="fd-popover__control">
<button
class="fd-button fd-button--transparent fd-shellbar__button fd-shellbar__button--menu fd-button--menu"
onclick="onPopoverClick('9GLB269412');"
aria-controls="9GLB269412"
aria-haspopup="true"
aria-expanded="false"
>
<span class="fd-shellbar__title">Corporate Portal</span>
<i class="sap-icon--slim-arrow-down"></i>
</button>
</div>
<div class="fd-popover__body fd-popover__body--no-arrow" aria-hidden="true" id="9GLB269412">
<nav class="fd-menu">
<ul class="fd-menu__list fd-menu__list--no-shadow">
<li class="fd-menu__item">
<a role="button" class="fd-menu__link">
<i class="fa-solid fa-map-pin" style="margin-right: 0.5rem"></i>
<span class="fd-menu__title">Application A</span>
</a>
</li>
<li class="fd-menu__item">
<a role="button" class="fd-menu__link">
<i class="fa-solid fa-map-pin" style="margin-right: 0.5rem"></i>
<span class="fd-menu__title">Application B</span>
</a>
</li>
<li class="fd-menu__item">
<a role="button" class="fd-menu__link">
<i class="fa-solid fa-map-pin" style="margin-right: 0.5rem"></i>
<span class="fd-menu__title">Application C</span>
</a>
</li>
<li class="fd-menu__item">
<a role="button" class="fd-menu__link">
<i class="fa-solid fa-map-pin" style="margin-right: 0.5rem"></i>
<span class="fd-menu__title">Application D</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
<div class="fd-shellbar__group fd-shellbar__group--center fd-shellbar__group--mobile-flex">
<div class="fd-shellbar__action fd-shellbar__action--grow">
<div id="JKHhjk7234k2" class="fd-input-group fd-shellbar__search-field">
<input
aria-label="search-input"
type="text"
onfocus="addClass('JKHhjk7234k2', 'is-focus')"
onblur="removeClass('JKHhjk7234k2', 'is-focus')"
class="fd-input fd-input-group__input fd-shellbar__search-field-input"
id="F4GcX348b1"
placeholder="Search everything"
/>
<div
class="fd-input-group__addon fd-shellbar__search-field-addon fd-shellbar__search-cancel fd-input-group__addon--button"
>
<button
aria-label="button-search"
class="fd-shellbar__button fd-button fd-button--transparent"
>
<i class="sap-icon--decline"></i>
</button>
</div>
<div
class="fd-input-group__addon fd-shellbar__search-field-addon fd-shellbar__search-submit fd-input-group__addon--button"
>
<button
aria-label="button-search"
class="fd-shellbar__button fd-button fd-button--transparent"
>
<i class="sap-icon--search"></i>
</button>
</div>
<div class="fd-shellbar__search-field-helper"></div>
</div>
</div>
<div class="fd-shellbar__action fd-shellbar__action--mobile fd-shellbar__action--shrink">
<button class="fd-button fd-button--transparent">Cancel</button>
</div>
</div>
<div class="fd-shellbar__group fd-shellbar__group--actions">
<div class="fd-shellbar__action">
<div class="fd-popover fd-popover--right">
<div class="fd-popover__control">
<div
class="fd-button fd-button--transparent fd-shellbar__button fd-user-menu__control"
aria-controls="ZY3AY276"
onclick="onPopoverClick('ZY3AY276')"
aria-expanded="false"
aria-haspopup="true"
role="button"
tabindex="0"
>
<span
class="fd-avatar fd-avatar--xs fd-avatar--circle fd-avatar--thumbnail fd-shellbar__avatar--circle"
aria-label="William Wallingham"
>
<i class="fa-solid fa-user"></i>
</span>
</div>
</div>
<div
class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--right"
aria-hidden="false"
id="ZY3AY276"
>
<nav class="fd-menu">
<ul class="fd-menu__list fd-menu__list--no-shadow">
<li class="fd-menu__item">
<a role="button" class="fd-menu__link">
<i class="fa-solid fa-gear" style="margin-right: 0.5rem"></i>
<span class="fd-menu__title">Settings</span>
</a>
</li>
<li class="fd-menu__item">
<a role="button" class="fd-menu__link">
<i class="fa-solid fa-address-card" style="margin-right: 0.5rem"></i>
<span class="fd-menu__title">Addres</span>
</a>
</li>
<li class="fd-menu__item">
<a role="button" class="fd-menu__link">
<i class="fa-solid fa-lightbulb" style="margin-right: 0.8rem"></i>
<span class="fd-menu__title">Info</span>
</a>
</li>
<li class="fd-menu__item">
<a role="button" class="fd-menu__link">
<i
class="fa-solid fa-arrow-right-from-bracket"
style="margin-right: 0.5rem"
></i>
<span class="fd-menu__title">Sign Out</span>
</a>
</li>
</ul>
</nav>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Loading
Loading