Feat/badge #394

Kutlovcidenis · 2021-06-09T12:30:41Z

Hi Daniel, as disscused my merge request.
From my side, everything is good. But if not, just let me know.
Always eager to learn new/better ways :)

BR
Denis

nowseemee

Great work, Denis - I've left comments, please take a look and let me know what do you think.
Can you add visual tests as well, please?

nowseemee · 2021-06-09T12:33:25Z

packages/components/src/components/badge/badge.css

+  background: var(--color-badge);
+}
+
+.badge.badge--color-magenta {


please do not use magenta as a name - use primary instead

nowseemee · 2021-06-09T12:37:43Z

packages/components/src/components/badge/badge.css

+}
+
+.badge.badge--color-magenta {
+  background: #e20074;


please use tokens

packages/components/src/components/badge/badge.tsx

nowseemee · 2021-06-09T12:42:54Z

packages/components/src/components/badge/badge.tsx

+})
+export class Badge {
+  /** (optional) Variant size of the badge itself */
+  @Prop({ mutable: true }) size: 'big' | 'small' = 'big';


please use large instead of big - similar to the button: https://github.com/telekom/scale/blob/main/packages/components/src/components/button/button.tsx#L25

nowseemee · 2021-06-09T12:51:05Z

packages/components-sketch/views/badge.hbs

+  </div>
+
+
+


do we really need all these linebreaks?

nowseemee · 2021-06-09T13:12:27Z

packages/storybook-vue/stories/3_components/badge/Badge.stories.mdx

+```
+
+
+


can you remove the extra linebreaks, please?

nowseemee · 2021-06-09T13:13:41Z

packages/storybook-vue/stories/3_components/badge/Badge.stories.mdx

+
+export const Template = (args, { argTypes }) => ({
+  components: { ScaleBadge },
+  props: {


let's just make this props: ScaleBadge.props - the rest is not needed. Same goes for the other templates

please take a look here: no need to spread ScaleBadge.props

The same goes for all the other occurrences in this file. thanks!

nowseemee · 2021-06-09T13:15:02Z

packages/storybook-vue/stories/3_components/badge/Badge.stories.mdx

+</Canvas>
+
+```html
+<scale-badge style="--badge-color:blue" size:"small" >


the style attribute does nothing, right? let's remove it to avoid confusing readers

nowseemee · 2021-06-09T13:18:42Z

packages/storybook-vue/stories/3_components/badge/Badge.stories.mdx

+</Canvas>
+
+```html
+<scale-badge size="big" style="--badge-color:blue" rotation="0">


can you fix the indentation, please?

nowseemee · 2021-06-09T13:18:51Z

packages/storybook-vue/stories/3_components/badge/Badge.stories.mdx

+</Canvas>
+
+```html
+<scale-badge size="big" color="magenta" rotation="0">


indentation

nowseemee

Hi Denis, thanks for your work on this. I've left comments where your attention is needed. Thanks again.

nowseemee · 2021-06-28T13:31:50Z

packages/components/src/components/badge/badge.spec.ts

+    components: [Badge],
+    html: `<scale-badge
+                size ="big"
+                color ="magenta"


this should be primary

nowseemee · 2021-06-28T13:31:57Z

packages/components/src/components/badge/badge.spec.ts

+  });
+
+  expect(page.rootInstance.size).toBe('big');
+  expect(page.rootInstance.color).toBe('magenta');


this should be primary

nowseemee · 2021-06-28T13:32:23Z

packages/components/src/components/badge/readme.md

+
+| Property   | Attribute  | Description                                     | Type                                        | Default     |
+| ---------- | ---------- | ----------------------------------------------- | ------------------------------------------- | ----------- |
+| `color`    | `color`    | (optional) Variant color/filling of the badge   | `"black" \| "blue" \| "magenta" \| "white"` | `undefined` |


magenta should be primary - did you forget to build the components?

nowseemee · 2021-06-28T13:32:47Z

packages/components/src/components/badge/readme.md

+| ---------- | ---------- | ----------------------------------------------- | ------------------------------------------- | ----------- |
+| `color`    | `color`    | (optional) Variant color/filling of the badge   | `"black" \| "blue" \| "magenta" \| "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'`     |


big should be large - forgot to build?

nowseemee · 2021-06-28T13:33:06Z

packages/components-sketch/views/badge.hbs

+  <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">


big should be large instead

nowseemee · 2021-06-28T13:36:27Z

packages/storybook-vue/stories/3_components/badge/Badge.stories.mdx

+
+export const Template = (args, { argTypes }) => ({
+  components: { ScaleBadge },
+  props: {


please take a look here: no need to spread ScaleBadge.props

nowseemee · 2021-06-28T13:37:00Z

packages/storybook-vue/stories/3_components/badge/Badge.stories.mdx

+
+export const Template = (args, { argTypes }) => ({
+  components: { ScaleBadge },
+  props: {


The same goes for all the other occurrences in this file. thanks!

nowseemee · 2021-06-28T13:37:17Z

packages/storybook-vue/stories/3_components/badge/Badge.stories.mdx

+<scale-badge style="--badge-color:blue" size:"small" >
+  <div>
+    <div
+      style="text-align:center; font-size:20px; font-family:TeleNeo; color:blwhiteack; font-weight:400;"


please fix the typo

nowseemee · 2021-06-28T13:37:33Z

packages/storybook-vue/stories/3_components/badge/Badge.stories.mdx

+<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;"


please fix the typo

nowseemee · 2021-06-28T13:38:03Z

packages/storybook-vue/stories/3_components/badge/badge_de.md

@@ -0,0 +1,13 @@
+<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" />


please use the beta badge in the German file too. thanks!

Kutlovcidenis · 2021-06-29T11:07:07Z

Hi Daniel, I think everything seems to be good know. I have my fingers crossed. Thank you again so much for the help, time and patience!

Kutlovcidenis · 2021-07-01T10:18:44Z

Hi Daniel, as mentioned in SLACK:
I used the tokens. Also on some other spots. Hope its okay the way I did it.
Let me know what you think/find.
Thank you!!!

Kutlovcidenis · 2021-07-01T13:39:31Z

Fixed the Font-Family/Size
Hoping we can finally merge fingers crossed

* chore: implement password protected staging server, tidy up scripts (#434) * feat: badge (#394) * feat: init badge * refactor: everything * feat: init hbs * refactor: inline style to css class mapping * refactor: deleting global variables * refactor: removing border * refactor: deleting old test cases * added storybook * Storybook & Handlebar done * copied and added the index.html from main branch * prettier & lint * fixed errors according to Daniel check, after merge request 1 * format and lint * changes commited according to Daniels check from first MR * applied change according to Daniel, from merge request 2. * design tokens added * Font-Family fixed * added design token for font-family * Edited storybook - Font Co-authored-by: marvinLaubenstein <[email protected]> * ci(bernerslee): remove s3 pipeline * Sketch/readonly input state (#373) * feat(sketch): add readonly states to text-fields * feat(sketch): add readonly states for textarea * feat(textarea): add readonly styles * refactor(sketch): add readonly to smybol name state resolver * chore(sketch): update sketch symbol DB * feat: implement scaleBeforeClose event in Modal (#430) * Update includes and symbol names (#372) * chore: update static sketch symbols * chore: update color swatches and missing readonly state * refactor: change symbol hirarchy for textarea / text-field * refactor: update readonly assignments * fix(button): add icon scaling and resiziable layout of slot elements * fix(dropdown/sketch): improve rendering for select element * chore: autoformat files * fix: datepicker not updating on outside value change (#441) * refactor(rating-stars): rework with input range approach also make the whole thing more modular with parts * feat(rating-stars): add half star rating * feat(rating-stars): use correct aria value and add better half visuals * refactor: add size, editable label; css * feat: only first star can clear all stars * refactor: prop renaming; remove watcher; * test: writing tests * refactor: renaming value to rating * refactor: stories * feat: implement onTouchEnd * feat(rating-stars): add readonly state and a11y features * feat(rating-stars): simplify revert logic / handle minRating input * feat: add prop readonly * feat: edit PR requests * feat: firstStarSelected with a default value of false * feat: input gets focus onClick * feat(rating-stars): add sketch generation and adjust input handling * fix: revert handmade sketch includes * test: update snapshots Co-authored-by: Kutlovcidenis <[email protected]> Co-authored-by: marvinLaubenstein <[email protected]> Co-authored-by: Daniel Beck <[email protected]> Co-authored-by: Stefan Kopco <[email protected]> Co-authored-by: Calvin Schröder <[email protected]> Co-authored-by: Christian Pajung <[email protected]>

Kutlovcidenis and others added 10 commits May 28, 2021 13:05

feat: init badge

1aa5df4

refactor: everything

a77a160

feat: init hbs

4663efd

refactor: inline style to css class mapping

8767739

refactor: deleting global variables

bc2ef70

refactor: removing border

624cd16

refactor: deleting old test cases

c36e864

added storybook

ed4339b

Storybook & Handlebar done

da728f7

copied and added the index.html from main branch

9703be4

Kutlovcidenis requested a review from eeegor as a code owner June 9, 2021 12:30

Kutlovcidenis and others added 2 commits June 9, 2021 14:45

prettier & lint

444551e

Merge branch 'main' into feat/badge

83417e1

nowseemee requested changes Jun 9, 2021

View reviewed changes

Kutlovcidenis added 3 commits June 11, 2021 10:40

fixed errors according to Daniel check, after merge request 1

f3efbd6

was behind main branch, pull

2ec4b72

format and lint

46bba73

acstll mentioned this pull request Jun 18, 2021

Overlay badge for Icons/IconButtons/Avatars #416

Closed

changes commited according to Daniels check from first MR

cb0f56b

nowseemee requested changes Jun 28, 2021

View reviewed changes

applied change according to Daniel, from merge request 2.

abc3293

design tokens added

e0c9d8e

Font-Family fixed

20be4ed

Kutlovcidenis added 2 commits July 1, 2021 15:46

added design token for font-family

860b45d

Edited storybook - Font

6e80953

nowseemee merged commit 686ac2d into main Jul 2, 2021

nowseemee deleted the feat/badge branch July 2, 2021 07:34

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Feat/badge #394

Feat/badge #394

Kutlovcidenis commented Jun 9, 2021

nowseemee left a comment

nowseemee Jun 9, 2021

nowseemee Jun 9, 2021

nowseemee Jun 9, 2021

nowseemee Jun 9, 2021

nowseemee Jun 9, 2021

nowseemee Jun 9, 2021

nowseemee Jun 28, 2021

nowseemee Jun 28, 2021

nowseemee Jun 9, 2021

nowseemee Jun 9, 2021

nowseemee Jun 9, 2021

nowseemee left a comment

nowseemee Jun 28, 2021

nowseemee Jun 28, 2021

nowseemee Jun 28, 2021

nowseemee Jun 28, 2021

nowseemee Jun 28, 2021

nowseemee Jun 28, 2021

nowseemee Jun 28, 2021

nowseemee Jun 28, 2021

nowseemee Jun 28, 2021

nowseemee Jun 28, 2021

Kutlovcidenis commented Jun 29, 2021

Kutlovcidenis commented Jul 1, 2021

Kutlovcidenis commented Jul 1, 2021

		```

Feat/badge #394

Feat/badge #394

Conversation

Kutlovcidenis commented Jun 9, 2021

nowseemee left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

nowseemee left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Kutlovcidenis commented Jun 29, 2021

Kutlovcidenis commented Jul 1, 2021

Kutlovcidenis commented Jul 1, 2021