-
Notifications
You must be signed in to change notification settings - Fork 86
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.
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
Feat/badge #394
Changes from 1 commit
1aa5df4
a77a160
4663efd
8767739
bc2ef70
624cd16
c36e864
ed4339b
da728f7
9703be4
444551e
83417e1
f3efbd6
2ec4b72
46bba73
cb0f56b
abc3293
e0c9d8e
20be4ed
860b45d
6e80953
File filter
Filter by extension
Conversations
Jump to
Diff view
Diff view
There are no files selected for viewing
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -2,12 +2,12 @@ | |
--color-badge: #e20074; | ||
--inner-width-small: 86px; | ||
--inner-height-small: 88px; | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. can you use more There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. please take a look again here |
||
--inner-width-big: 126.5px; | ||
--inner-height-big: 96px; | ||
--inner-width-large: 126.5px; | ||
--inner-height-large: 96px; | ||
--width-small: 120px; | ||
--height-small: 120px; | ||
--height-big: 160px; | ||
--width-big: 160px; | ||
--height-large: 160px; | ||
--width-large: 160px; | ||
} | ||
|
||
.badge { | ||
|
@@ -32,8 +32,8 @@ | |
} | ||
|
||
.badge.badge--size-large { | ||
width: var(--width-big); | ||
height: var(--height-big); | ||
width: var(--width-large); | ||
height: var(--height-large); | ||
} | ||
|
||
.badge.badge--size-small { | ||
|
@@ -42,8 +42,8 @@ | |
} | ||
|
||
.badge.badge--size-large .badge--inner { | ||
width: var(--inner-width-big); | ||
height: var(--inner-height-big); | ||
width: var(--inner-width-large); | ||
height: var(--inner-height-large); | ||
} | ||
|
||
.badge.badge--size-small .badge--inner { | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
|
@@ -19,8 +19,8 @@ import ScaleBadge from './ScaleBadge.vue'; | |
}, | ||
}, | ||
size: { | ||
defaultValue: 'big', | ||
options: ['small', 'big'], | ||
defaultValue: 'large', | ||
options: ['small', 'large'], | ||
control: { | ||
type: 'select', | ||
}, | ||
|
@@ -30,9 +30,7 @@ import ScaleBadge from './ScaleBadge.vue'; | |
|
||
export const Template = (args, { argTypes }) => ({ | ||
components: { ScaleBadge }, | ||
props: { | ||
...ScaleBadge.props, | ||
}, | ||
props: ScaleBadge.props, | ||
template: ` | ||
<scale-badge :size="size" :color="color" :rotation="rotation"> | ||
<div> | ||
|
@@ -51,9 +49,7 @@ export const Template = (args, { argTypes }) => ({ | |
|
||
export const Template2 = (args, { argTypes }) => ({ | ||
components: { ScaleBadge }, | ||
props: { | ||
...ScaleBadge.props, | ||
}, | ||
props: ScaleBadge.props, | ||
template: ` | ||
<scale-badge :size="size" :color="color" :rotation="rotation"> | ||
<div> | ||
|
@@ -72,9 +68,7 @@ export const Template2 = (args, { argTypes }) => ({ | |
|
||
export const Template3 = (args, { argTypes }) => ({ | ||
components: { ScaleBadge }, | ||
props: { | ||
...ScaleBadge.props, | ||
}, | ||
props: ScaleBadge.props, | ||
template: ` | ||
<scale-badge :size="size" :color="color" :rotation="rotation"> | ||
<div> | ||
|
@@ -129,17 +123,17 @@ export const Template3 = (args, { argTypes }) => ({ | |
--color-badge:#e20074; | ||
--inner-width-small: 86px; | ||
--inner-height-small: 88px; | ||
--inner-width-big: 126.5px; | ||
--inner-height-big: 96px; | ||
--inner-width-large: 126.5px; | ||
--inner-height-large: 96px; | ||
--width-small: 120px; | ||
--height-small: 120px; | ||
--height-big: 160px; | ||
--width-big: 160px; | ||
--height-large: 160px; | ||
--width-large: 160px; | ||
} | ||
``` | ||
## Size | ||
There are two sizes: | ||
big / small. Big has the size 160x160 and small 120x120. In the example below, the badge is small | ||
Large / small. Large has the size 160x160 and small 120x120. In the example below, the badge is small | ||
|
||
<Canvas withSource="none"> | ||
<Story | ||
|
@@ -154,7 +148,7 @@ big / small. Big has the size 160x160 and small 120x120. In the example below, t | |
</Canvas> | ||
|
||
```html | ||
<scale-badge color="blue" size:"small" > | ||
<scale-badge color="blue" size="small" > | ||
<div> | ||
<div | ||
style="text-align:center; font-size:20px; font-family:TeleNeo; color:blwhiteack; font-weight:400;" | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. blwhiteack? 😂 There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. please fix the typo |
||
|
@@ -185,10 +179,10 @@ big / small. Big has the size 160x160 and small 120x120. In the example below, t | |
</Canvas> | ||
|
||
```html | ||
<scale-badge color:"blue" size:"small" rotation:"33" > | ||
<scale-badge color="blue" size="small" rotation="33" > | ||
<div> | ||
<div | ||
style="text-align:center; font-size:20px; font-family:TeleNeo; color:blwhiteack; font-weight:400;" | ||
style="text-align:center; font-size:20px; font-family:TeleNeo; color:blue; font-weight:400;" | ||
> | ||
Für nur | ||
</div> | ||
|
@@ -216,7 +210,7 @@ There are 4 standard colors (Primary - default, black, white, blue). The user al | |
</Canvas> | ||
|
||
```html | ||
<scale-badge size="big" rotation="0"> | ||
<scale-badge size="lare" rotation="0"> | ||
<div> | ||
<div style="text-align:center; font-size:20px; font-family:TeleNeo; color:white; font-weight:400;"> | ||
Für nur | ||
|
@@ -235,15 +229,15 @@ There are 4 standard colors (Primary - default, black, white, blue). The user al | |
<Story | ||
name="Asterisk" | ||
args={{ | ||
size: "big", | ||
size: "large", | ||
}} | ||
> | ||
{Template3.bind({})} | ||
</Story> | ||
</Canvas> | ||
|
||
```html | ||
<scale-badge size="big" color="primary" rotation="0"> | ||
<scale-badge size="large" color="primary" rotation="0"> | ||
<div> | ||
<div style="text-align: center; font-size: 25px; font-family: TeleNeo; color: white; font-weight: 400; margin-bottom: 10px;"> | ||
ab | ||
|
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,8 +1,8 @@ | ||
<div style="display: inline-flex; align-items: center; justify-content: space-between; width: 100%;"> | ||
<h1>Rating Stars</h1> | ||
<h1>Badge</h1> | ||
<img src="assets/beta.png" alt="Beta Component" /> | ||
</div> | ||
|
||
## Beta components | ||
## Beta Component | ||
|
||
This component is still in the beta phase. When testing it, keep in mind that it may not have gone through all quality control measures, and it may not yet have WCAG accessibility certification. There may be changes to this component in the future. |
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,9 +1,8 @@ | ||
<div style="display: inline-flex; align-items: center; justify-content: space-between; width: 100%;"> | ||
<h1>Badge</h1> | ||
<img src="assets/aa.png" alt="Accessible AA" /> | ||
<img src="assets/beta.png" alt="Beta Component" /> | ||
</div> | ||
|
||
|
||
## Beta-Komponente | ||
|
||
Diese Komponente befindet sich noch im Beta-Stadium. Wenn du sie testest, bedenke, dass sie möglicherweise noch nicht alle Qualitätskontrollmaßnahmen durchlaufen hat und noch keine WCAG-Zertifizierung zur Barrierefreiheit vorliegt. In Zukunft kann es zu Änderungen an dieser Komponente kommen. |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
please use design tokens instead of hardcoded values
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
please take a look again here and replace hex and pixel values with design tokens in the css. thanks!