feat: #242 updated v5 badge component with the PR review

Author: Danish Ali

src/components/badge/__tests__/__snapshots__/badge.test.tsx.snap

@@ -4,7 +4,7 @@ exports[`Badge > should match snapshot 1`] = `
 <DocumentFragment>
   <div
     class="mocked-styled-0 el-badge"
-    data-reversed="false"
+    data-isreversed="false"
     role="status"
   >
     <span
@@ -21,7 +21,7 @@ exports[`Badge > should match snapshot with icon only 1`] = `
   <div
     aria-label="label"
     class="mocked-styled-0 el-badge"
-    data-reversed="false"
+    data-isreversed="false"
     role="status"
   >
     <span
@@ -52,7 +52,7 @@ exports[`Badge > should match snapshot with icons and label 1`] = `
 <DocumentFragment>
   <div
     class="mocked-styled-0 el-badge"
-    data-reversed="false"
+    data-isreversed="false"
     role="status"
   >
     <span
@@ -108,7 +108,7 @@ exports[`Badge > should match snapshot with reversed badge 1`] = `
 <DocumentFragment>
   <div
     class="mocked-styled-0 el-badge"
-    data-reversed="true"
+    data-isreversed="true"
     role="status"
   >
     <span
@@ -124,7 +124,7 @@ exports[`Badge > should match snapshot with success variant and label 1`] = `
 <DocumentFragment>
   <div
     class="mocked-styled-0 el-badge"
-    data-reversed="false"
+    data-isreversed="false"
     data-variant="success"
     role="status"
   >

src/components/badge/__tests__/badge.test.tsx

@@ -9,7 +9,7 @@ describe('Badge', () => {
   })
 
   test('should match snapshot with reversed badge', () => {
-    const { asFragment } = render(<Badge reversed>Label</Badge>)
+    const { asFragment } = render(<Badge isReversed>Label</Badge>)
     expect(asFragment()).toMatchSnapshot()
   })
 

src/components/badge/badge.mdx

@@ -12,36 +12,40 @@ Styled badge component with multiple flavours depending on use case.
 
 ## Default Usage
 
-A button with no additional props / classes applied
+A badge with no additional props / classes applied
 
 <Canvas of={BadgeStories.Default} />
 
 <RenderHtmlMarkup of={BadgeStories.Default} />
 
 ## Badge Reversed
 
+In order to reverse a badge you will just need to provide a prop called `isReversed`. If you have icon left and icon right with the badge it will be reversed as well.
+
 <Canvas of={BadgeStories.BadgeReversed} />
 <RenderHtmlMarkup of={BadgeStories.BadgeReversed} />
 
 ## Badge with Label
 
-Badge should always hava a label for accessibility and clear comprehension.
+Badge can hava a label with icons for with icons.
 
 <Canvas of={BadgeStories.BadgeWithLabel} />
 <RenderHtmlMarkup of={BadgeStories.BadgeWithLabel} />
 
-## Badge without Label
+## Badge with Icon
 
-A badge without label can be used when not enogh space is available. It should always include a tooltip on hover to provide more context for the icon meaning.
+A badge can be with just an icon for accessibility you will need to add an `aria-label` with it. It should be wrapped with a tooltip component to provide more context for the icon meaning.
 
-<Canvas of={BadgeStories.BadgeWithoutLabel} />
-<RenderHtmlMarkup of={BadgeStories.BadgeWithoutLabel} />
+<Canvas of={BadgeStories.BadgeWithIcon} />
+<RenderHtmlMarkup of={BadgeStories.BadgeWithIcon} />
 
 ## Badge Variants
 
 Different variants are supported, to enable badge to be used in different contexts. 
 
-`Badge` only support `neutral`, `success`, `pending`, `warning`, `danger`, `inactive`, `accent_1` and `accent_2`, the `neutral` being the default.
+`Badge` only support `neutral`, `success`, `pending`, `warning`, `danger`, `inactive`, `accent_1` and `accent_2`.
+
+The `neutral` is the default variant for the badge component.
 
-<Canvas of={BadgeStories.BadgeWithVariant} />
-<RenderHtmlMarkup of={BadgeStories.BadgeWithVariant} />
+<Canvas of={BadgeStories.BadgeVariant} />
+<RenderHtmlMarkup of={BadgeStories.BadgeVariant} />