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.

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
Changes from 1 commit
Commits
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
Prev Previous commit
Next Next commit
applied change according to Daniel, from merge request 2.
Kutlovcidenis committed Jun 29, 2021
commit abc32935974cdcfd75bdb4d48fd81713bde3a95a
14 changes: 7 additions & 7 deletions packages/components-sketch/views/badge.hbs
Original file line number Diff line number Diff line change
@@ -6,7 +6,7 @@
<div class="agent-states--grid" data-category="Text only">
<div class="agent-states--item">
<p class="agent-states--label">Primary - Large</p>
<scale-badge size="big" color="primary" rotation="0">
<scale-badge size="large" color="primary" rotation="0">
<div>
<div
style="
@@ -35,7 +35,7 @@
</div>
<div class="agent-states--item">
<p class="agent-states--label">White - Large</p>
<scale-badge size="big" color="white" rotation="0">
<scale-badge size="large" color="white" rotation="0">
<div>
<div
style="
@@ -64,7 +64,7 @@
</div>
<div class="agent-states--item">
<p class="agent-states--label">Black - Large</p>
<scale-badge size="big" color="black" rotation="0">
<scale-badge size="large" color="black" rotation="0">
<div>
<div
style="
@@ -93,7 +93,7 @@
</div>
<div class="agent-states--item">
<p class="agent-states--label">Colored - Large</p>
<scale-badge size="big" color="blue" rotation="0">
<scale-badge size="large" color="blue" rotation="0">
<div>
<div
style="
@@ -246,7 +246,7 @@
<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="primary" rotation="0">
<scale-badge size="large" color="primary" rotation="0">
<div>
<div
style="
@@ -273,7 +273,7 @@
</div>
<div class="agent-states--item">
<p class="agent-states--label">Rotation 30˚ </p>
<scale-badge size="big" color="blue" rotation="30">
<scale-badge size="large" color="blue" rotation="30">
<div>
<div
style="
@@ -300,7 +300,7 @@
</div>
<div class="agent-states--item">
<p class="agent-states--label">Rotation 90˚ </p>
<scale-badge size="big" color="black" rotation="90">
<scale-badge size="large" color="black" rotation="90">
<div>
<div
style="
16 changes: 8 additions & 8 deletions packages/components/src/components/badge/badge.css
Original file line number Diff line number Diff line change
@@ -2,12 +2,12 @@
--color-badge: #e20074;
Copy link
Collaborator

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

Copy link
Collaborator

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!

--inner-width-small: 86px;
--inner-height-small: 88px;
Copy link
Collaborator

Choose a reason for hiding this comment

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

can you use more --scl-spacing- type design tokens instead of all these magic pixel value numbers?

Copy link
Collaborator

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

--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 {
12 changes: 6 additions & 6 deletions packages/components/src/components/badge/badge.spec.ts
Original file line number Diff line number Diff line change
@@ -5,28 +5,28 @@ it('should reflect attributes/props', async () => {
const page = await newSpecPage({
components: [Badge],
html: `<scale-badge
size ="big"
color ="magenta"
size ="large"
color ="primary"
rotation ="15">
</scale-badge>`,
});

expect(page.rootInstance.size).toBe('big');
expect(page.rootInstance.color).toBe('magenta');
expect(page.rootInstance.size).toBe('large');
expect(page.rootInstance.color).toBe('primary');
expect(page.rootInstance.rotation).toBe(15);
});

it('checks another color, other than prop', async () => {
const page = await newSpecPage({
components: [Badge],
html: `<scale-badge
size ="big"
size ="large"
color ="red"
rotation ="15">
</scale-badge>`,
});

expect(page.rootInstance.size).toBe('big');
expect(page.rootInstance.size).toBe('large');
expect(page.rootInstance.color).toBe('red');
expect(page.rootInstance.rotation).toBe(15);
});
4 changes: 2 additions & 2 deletions packages/components/src/components/badge/readme.md
Original file line number Diff line number Diff line change
@@ -9,9 +9,9 @@

| Property | Attribute | Description | Type | Default |
| ---------- | ---------- | ----------------------------------------------- | ------------------------------------------- | ----------- |
| `color` | `color` | (optional) Variant color/filling of the badge | `"black" \| "blue" \| "magenta" \| "white"` | `undefined` |
| `color` | `color` | (optional) Variant color/filling of the badge | `"black" \| "blue" \| "primary" \| "white"` | `undefined` |
| `rotation` | `rotation` | (optional) Variant rotation of the badge/circle | `number` | `0` |
| `size` | `size` | (optional) Variant size of the badge itself | `"big" \| "small"` | `'big'` |
| `size` | `size` | (optional) Variant size of the badge itself | `"large" \| "small"` | `'large'` |


## Shadow Parts
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;"
Copy link
Collaborator

Choose a reason for hiding this comment

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

blwhiteack? 😂

Copy link
Collaborator

Choose a reason for hiding this comment

The 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
@@ -11,7 +11,7 @@
<script>
export default {
props: {
size: { type: String, default: "big" },
size: { type: String, default: "large" },
color: {type: String, default: "primary"},
rotation:{type: Number, default: 0},
},
4 changes: 2 additions & 2 deletions packages/storybook-vue/stories/3_components/badge/badge.md
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.