From 3a4c3b8b72bc8eb46d426de5d44a53ad6ef60487 Mon Sep 17 00:00:00 2001
From: Sabine Holler <sabidasa@gmail.com>
Date: Tue, 1 Aug 2023 12:33:07 +0200
Subject: [PATCH] Task/internal 26 create a badge with trailing label component
 785 (#792)

* [#INTERNAL-26] Create a Badge with trailing label component #785

<https://github.com/bitcrowd/bitstyles/issues/785>&#x20;

https://bitcrowd.atlassian.net/browse/INTERNAL-26

* Add badge with label template on badge stories

* Review updates

* update changelog
---
 CHANGELOG.md                                  |  6 ++++++
 scss/bitstyles/atoms/badge/Badge.stories.js   | 20 +++++++++++++++++++
 .../atoms/skip-link/skip-link.stories.js      |  8 ++++----
 3 files changed, 30 insertions(+), 4 deletions(-)

diff --git a/CHANGELOG.md b/CHANGELOG.md
index c9ce63ff0..54c542b03 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,5 +1,11 @@
 # Changelog
 
+## Unreleased
+
+### Added
+
+- Badge with Label, added an example showing a text label rendered next to a badge component, to the badge docs.
+
 ## [[6.0.0]](https://github.com/bitcrowd/bitstyles/releases/tag/v6.0.0) - 2023-06-08
 
 ### Changed
diff --git a/scss/bitstyles/atoms/badge/Badge.stories.js b/scss/bitstyles/atoms/badge/Badge.stories.js
index 26c379a5c..d259d3848 100644
--- a/scss/bitstyles/atoms/badge/Badge.stories.js
+++ b/scss/bitstyles/atoms/badge/Badge.stories.js
@@ -269,3 +269,23 @@ PositiveButtonSmall.args = {
   onClick: dummyOnClick,
   sizeVariant: ['small'],
 };
+
+const TemplateBadgeWithLabel = (args) => {
+  const wrapper = document.createElement('div');
+  const trailingLabel = document.createElement('span');
+  trailingLabel.classList.add('u-margin-m-left');
+  trailingLabel.innerHTML = 'Trailing label';
+  wrapper.append(Badge(args));
+  wrapper.append(trailingLabel);
+  return wrapper;
+};
+
+export const BadgeWithLabel = TemplateBadgeWithLabel.bind({});
+BadgeWithLabel.args = {
+  theme: 'default',
+  sizeVariant: ['small'],
+};
+BadgeWithLabel.parameters = {
+  zeplinLink:
+    'https://app.zeplin.io/styleguide/63079b90d0bf4a646c46c227/components?coid=640ef6a6805d9020e491d493',
+};
diff --git a/scss/bitstyles/atoms/skip-link/skip-link.stories.js b/scss/bitstyles/atoms/skip-link/skip-link.stories.js
index eb681fca9..6c4685021 100644
--- a/scss/bitstyles/atoms/skip-link/skip-link.stories.js
+++ b/scss/bitstyles/atoms/skip-link/skip-link.stories.js
@@ -6,14 +6,14 @@ export default {
 };
 
 const Template = (args) => {
-  const fragment = new DocumentFragment();
+  const wrapper = document.createElement('div');
   const mainContent = document.createElement('div');
   mainContent.setAttribute('id', 'main');
   mainContent.innerHTML =
     'Your main content here, after some other content that gets repeated on every page (navigation etc.)';
-  fragment.append(Link(args));
-  fragment.append(mainContent);
-  return fragment;
+  wrapper.append(Link(args));
+  wrapper.append(mainContent);
+  return wrapper;
 };
 
 // ***** Default size, each shape & color ****************** //