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/font awesome #5209

Closed
wants to merge 3 commits into from
Closed

[WIP]Docs/font awesome #5209

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
e907eaf
docs(styles): create font-awesome examples
droshev Jul 28, 2023
8b025d6
fix: Added storybook examples of fontawesome, google material icons, …
kalo2711 Feb 28, 2024
2c58fde
fix: Font awesome in wrong folder
kalo2711 Mar 1, 2024
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/icons/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/icons/Font-awesome/font-awesome-card.example.html
View file
Open in desktop

Large diffs are not rendered by default.

26 changes: 26 additions & 0 deletions packages/icons/Font-awesome/font-awesome-icon.example.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- 1)Font Awesome link to CSS from: https://cdnjs.com/libraries/font-awesome-->
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css"
integrity="sha512-DTOQO9RWCH3ppGqcWaEA1BIZOC6xxalwEsw9c2QQeAIftl+Vegovlnee1c9QX4TctnWMn13TZye+giMm8e2LwA=="
crossorigin="anonymous"
referrerpolicy="no-referrer"
/>
<title>Font Awesome Github Icon Example</title>
<style>
i {
color: darkblue;
}
</style>
</head>
<body>
<!-- 2)Font Awesome Github Icon from: https://fontawesome.com/search?o=r&m=free -->
<i class="fa-brands fa-github"></i>
<!-- 3)Add desired styling inline, internally or through an external styles sheet (Current Ex: Internal dark blue color)-->
</body>
</html>
62 changes: 62 additions & 0 deletions packages/icons/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/icons/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