Skip to content

Commit

Permalink
docs(styles): updated example [ci visual]
Browse files Browse the repository at this point in the history
  • Loading branch information
@IB002 @droshev
IB002 authored and droshev committed Jul 28, 2023
1 parent 49442c3 commit 49777cc
Show file tree
Hide file tree
Showing 2 changed files with 84 additions and 18 deletions.
100 changes: 83 additions & 17 deletions packages/styles/stories/Font-awesome/font-awesome-slider.example.html
View file
Original file line number Diff line number Diff line change
@@ -1,21 +1,87 @@
<div class="is-cozy">
<div dir="ltr">
<i class="fa-solid fa-volume-high"></i>
<div class="slider-container">
<div class="fd-slider fd-slider--lg">
<div class="fd-slider__inner">
<div
class="fd-slider__handle"
tabindex="0"
role="slider"
aria-label="slider"
aria-valuemin="1"
aria-valuemax="100"
aria-valuenow="50"
style="left: 50%"
></div>
<div class="fd-slider__track">
<div class="fd-slider__track-range" style="width: 50%"></div>
<div dir="ltr" style="height: 550px; display: flex">
<div style="margin-left: 50px">
<div style="margin-bottom: 10px"><i class="fa-solid fa-volume-high"></i></div>
<div class="slider-container" style="width: 50px; height: 500px">
<div class="fd-slider fd-slider--vertical">
<div class="fd-slider__inner">
<div
class="fd-slider__handle"
tabindex="0"
role="slider"
aria-label="slider"
aria-valuemin="1"
aria-valuemax="100"
aria-valuenow="50"
style="bottom: 70%"
></div>
<div class="fd-slider__track">
<div class="fd-slider__track-range" style="height: 70%"></div>
</div>
</div>
</div>
</div>
<div style="margin-top: 10px"><i class="fa-solid fa-volume-off"></i></div>
</div>
<div style="margin-left: 50px; margin-top: 10px">
<div style="margin-top: 15px"></div>
<div class="slider-container" style="width: 50px; height: 500px">
<div class="fd-slider fd-slider--vertical">
<div class="fd-slider__inner">
<div
class="fd-slider__handle"
tabindex="0"
role="slider"
aria-label="slider"
aria-valuemin="1"
aria-valuemax="100"
aria-valuenow="50"
style="bottom: 0%"
></div>
<div class="fd-slider__track">
<div class="fd-slider__track-range" style="height: 0%"></div>
</div>
</div>
</div>
</div>
<div style="margin-top: 10px"><i class="fa-solid fa-volume-xmark"></i></div>
</div>
<div style="margin-left: 600px; margin-top: 20px">
<i class="fa-solid fa-temperature-high fa-xl"></i>
<div class="slider-container" style="height: 500px; width: 50px">
<div class="fd-slider fd-slider--lg fd-slider--vertical">
<div class="fd-slider__inner">
<div class="fd-slider__track">
<div class="fd-slider__track-range" style="height: 55%; bottom: 20%"></div>
</div>
<div class="fd-slider__tick-wrapper">
<div class="fd-slider__ticks">
<div class="fd-slider__tick"></div>
<div class="fd-slider__tick"></div>
<div class="fd-slider__tick fd-slider__tick--in-range"></div>
<div class="fd-slider__tick fd-slider__tick--in-range"></div>
<div class="fd-slider__tick fd-slider__tick--in-range"></div>
<div class="fd-slider__tick fd-slider__tick--in-range"></div>
<div class="fd-slider__tick"></div>
<div class="fd-slider__tick"></div>
<div class="fd-slider__tick"></div>
<div class="fd-slider__tick"></div>
<div class="fd-slider__tick"></div>
</div>
<div class="fd-slider__labels">
<div class="fd-slider__label">-10°</div>
<div class="fd-slider__label">-5°</div>
<div class="fd-slider__label">0°</div>
<div class="fd-slider__label">5°</div>
<div class="fd-slider__label">10°</div>
<div class="fd-slider__label">15°</div>
<div class="fd-slider__label">20°</div>
<div class="fd-slider__label">25°</div>
<div class="fd-slider__label">30°</div>
<div class="fd-slider__label">35°</div>
<div class="fd-slider__label">40°</div>
</div>
</div>
</div>
</div>
</div>
Expand Down
2 changes: 1 addition & 1 deletion packages/styles/stories/Font-awesome/font-awesome.stories.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ Alternatives.storyName = 'Adding visual cues to tools';
Alternatives.parameters = {
docs: {
description: {
story: 'Using SAP components like the slider and Font Awesome, can be used to easily convey what the purpose of something is.'
story: 'Using SAP components like the slider and Font Awesome, can be used to more clearly convey visual information.'
}
}
};

0 comments on commit 49777cc

Please sign in to comment.