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>  https://bitcrowd.atlassian.net/browse/INTERNAL-26 * Add badge with label template on badge stories * Review updates * update changelog
bitcrowd · Aug 1, 2023 · 3a4c3b8 · 3a4c3b8
1 parent 0ca828d
commit 3a4c3b8
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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 ****************** //