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

Feat/badge #394

Merged
merged 21 commits into from
Jul 2, 2021
Merged

Feat/badge #394

Show file tree
Hide file tree
Changes from 11 commits
Commits
Show all changes
21 commits
Select commit Hold shift + click to select a range
1aa5df4
feat: init badge
Kutlovcidenis May 28, 2021
a77a160
refactor: everything
marvinLaubenstein May 28, 2021
4663efd
feat: init hbs
marvinLaubenstein May 28, 2021
8767739
refactor: inline style to css class mapping
marvinLaubenstein May 28, 2021
bc2ef70
refactor: deleting global variables
marvinLaubenstein May 28, 2021
624cd16
refactor: removing border
marvinLaubenstein May 28, 2021
c36e864
refactor: deleting old test cases
marvinLaubenstein May 28, 2021
ed4339b
added storybook
Kutlovcidenis Jun 8, 2021
da728f7
Storybook & Handlebar done
Kutlovcidenis Jun 9, 2021
9703be4
copied and added the index.html from main branch
Kutlovcidenis Jun 9, 2021
444551e
prettier & lint
Kutlovcidenis Jun 9, 2021
83417e1
Merge branch 'main' into feat/badge
Kutlovcidenis Jun 9, 2021
f3efbd6
fixed errors according to Daniel check, after merge request 1
Kutlovcidenis Jun 11, 2021
2ec4b72
was behind main branch, pull
Kutlovcidenis Jun 11, 2021
46bba73
format and lint
Kutlovcidenis Jun 11, 2021
cb0f56b
changes commited according to Daniels check from first MR
Kutlovcidenis Jun 28, 2021
abc3293
applied change according to Daniel, from merge request 2.
Kutlovcidenis Jun 29, 2021
e0c9d8e
design tokens added
Kutlovcidenis Jul 1, 2021
20be4ed
Font-Family fixed
Kutlovcidenis Jul 1, 2021
860b45d
added design token for font-family
Kutlovcidenis Jul 1, 2021
6e80953
Edited storybook - Font
Kutlovcidenis Jul 1, 2021
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
388 changes: 388 additions & 0 deletions packages/components-sketch/views/badge.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,388 @@

<div data-sketch-artboard="Badge" class="artboard">
<h1 class="title--artboard">Overview</h1>

<h2 class="title--artboard-section">Badge Eyecatcher</h2>
<div class="agent-states--grid" data-category="Text only">
<div class="agent-states--item">
<p class="agent-states--label">Magenta - Large</p>
<scale-badge size="big" color="magenta" rotation="0">
<div>
<div
style="
text-align: center;
font-size: 20px;
font-family: TeleNeo;
color: white;
font-weight: 400;
"
>
Für nur
</div>
<div
style="
text-align: center;
font-size: 60px;
font-family: TeleNeo;
color: white;
font-weight: 700;
"
>
<span> 15 € </span>
</div>
</div>
</scale-badge>
</div>
<div class="agent-states--item">
<p class="agent-states--label">White - Large</p>
<scale-badge size="big" color="white" rotation="0">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

big should be large instead

<div>
<div
style="
text-align: center;
font-size: 20px;
font-family: TeleNeo;
color: black;
font-weight: 400;
"
>
Für nur
</div>
<div
style="
text-align: center;
font-size: 60px;
font-family: TeleNeo;
color: black;
font-weight: 700;
"
>
<span> 15 € </span>
</div>
</div>
</scale-badge>
</div>
<div class="agent-states--item">
<p class="agent-states--label">Black - Large</p>
<scale-badge size="big" color="black" rotation="0">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

big should be large instead

<div>
<div
style="
text-align: center;
font-size: 20px;
font-family: TeleNeo;
color: white;
font-weight: 400;
"
>
Für nur
</div>
<div
style="
text-align: center;
font-size: 60px;
font-family: TeleNeo;
color: white;
font-weight: 700;
"
>
<span> 15 € </span>
</div>
</div>
</scale-badge>
</div>
<div class="agent-states--item">
<p class="agent-states--label">Colored - Large</p>
<scale-badge size="big" color="blue" rotation="0">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

big should be large instead

<div>
<div
style="
text-align: center;
font-size: 20px;
font-family: TeleNeo;
color: white;
font-weight: 400;
"
>
Für nur
</div>
<div
style="
text-align: center;
font-size: 60px;
font-family: TeleNeo;
color: white;
font-weight: 700;
"
>
<span> 15 € </span>
</div>
</div>
</scale-badge>
</div>
</div>



Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

do we really need all these linebreaks?













<h2 class="title--artboard-section"></h2>
<div class="agent-states--grid" data-category="Text only">
<div class="agent-states--item">
<p class="agent-states--label">Magenta - Small</p>
<scale-badge size="small" color="magenta" rotation="0">
<div>
<div
style="
text-align: center;
font-size: 20px;
font-family: TeleNeo;
color: white;
font-weight: 400;
"
>
Für nur
</div>
<div
style="
text-align: center;
font-size: 60px;
font-family: TeleNeo;
color: white;
font-weight: 700;
"
>
<span> 15 € </span>
</div>
</div>
</scale-badge>
</div>
<div class="agent-states--item">
<p class="agent-states--label">White - small</p>
<scale-badge size="small" color="white" rotation="0">
<div>
<div
style="
text-align: center;
font-size: 20px;
font-family: TeleNeo;
color: black;
font-weight: 400;
"
>
Für nur
</div>
<div
style="
text-align: center;
font-size: 60px;
font-family: TeleNeo;
color: black;
font-weight: 700;
"
>
<span> 15 € </span>
</div>
</div>
</scale-badge>
</div>
<div class="agent-states--item">
<p class="agent-states--label">Black - Small</p>
<scale-badge size="small" color="black" rotation="0">
<div>
<div
style="
text-align: center;
font-size: 20px;
font-family: TeleNeo;
color: white;
font-weight: 400;
"
>
Für nur
</div>
<div
style="
text-align: center;
font-size: 60px;
font-family: TeleNeo;
color: white;
font-weight: 700;
"
>
<span> 15 € </span>
</div>
</div>
</scale-badge>
</div>
<div class="agent-states--item">
<p class="agent-states--label">Colored - small</p>
<scale-badge size="small" color="blue" rotation="0">
<div>
<div
style="
text-align: center;
font-size: 20px;
font-family: TeleNeo;
color: white;
font-weight: 400;
"
>
Für nur
</div>
<div
style="
text-align: center;
font-size: 60px;
font-family: TeleNeo;
color: white;
font-weight: 700;
"
>
<span> 15 € </span>
</div>
</div>
</scale-badge>
</div>
</div>

<h2 class="title--artboard-section"></h2>
<div class="agent-states--grid" data-category="Text only">
<div class="agent-states--item">
<p class="agent-states--label">Rotation 0˚ Default</p>
<scale-badge size="big" color="magenta" rotation="0">
<div>
<div
style="
text-align: center;
font-size: 20px;
font-family: TeleNeo;
color: white;
font-weight: 400;
"
> Für nur
</div>
<div
style="
text-align: center;
font-size: 60px;
font-family: TeleNeo;
color: white;
font-weight: 700;
"
> <span> 15 € </span>
</div>
</div>
</scale-badge>
</div>
<div class="agent-states--item">
<p class="agent-states--label">Rotation 30˚ </p>
<scale-badge size="big" color="blue" rotation="30">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

big should be large instead

<div>
<div
style="
text-align: center;
font-size: 20px;
font-family: TeleNeo;
color: black;
font-weight: 400;
"
> Für nur
</div>
<div
style="
text-align: center;
font-size: 60px;
font-family: TeleNeo;
color: black;
font-weight: 700;
"
> <span> 15 € </span>
</div>
</div>
</scale-badge>
</div>
<div class="agent-states--item">
<p class="agent-states--label">Rotation 90˚ </p>
<scale-badge size="big" color="black" rotation="90">
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

big should be large instead

<div>
<div
style="
text-align: center;
font-size: 20px;
font-family: TeleNeo;
color: white;
font-weight: 400;
"
> Für nur
</div>
<div
style="
text-align: center;
font-size: 60px;
font-family: TeleNeo;
color: white;
font-weight: 700;
"
>
<span> 15 € </span>
</div>
</div>
</scale-badge>
</div>
</div>
</div>
</div>

<script src="/symbol_names.js"></script>
<script>
Array.from(document.querySelectorAll('scale-badge')).forEach((btn, i) => {
btn.dataset.sketchSymbol = `Badge / ${order(
1,
getCategoryName(btn)
)} / ${order(
2,
btn.dataset.hasIcon ? 'With Icon' : 'Without Icon'
)} / ${order(4, getStateName(btn))}`;
});
</script>






























1 change: 1 addition & 0 deletions packages/components-sketch/views/index.hbs
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,6 +12,7 @@ file, You can obtain one at https://mozilla.org/MPL/2.0/.
<h1 class="title--artboard">Scale Components</h1>
<p><a href="/accordion">Accordion</a></p>
<p><a href="/button">Button</a></p>
<p><a href="/badge">Badge</a></p>
<p><a href="/breadcrumb">Breadcrumb</a></p>
<p><a href="/card">Card</a></p>
<p><a href="/checkbox">Checkbox</a></p>
Expand Down
Loading