Merge branch 'main' into feature/762-inputs

.github/workflows/run-checks.yml

@@ -6,6 +6,9 @@ jobs:
     steps:
       - name: Checkout 🛎️
         uses: actions/checkout@v3
+      - uses: actions/setup-node@v3
+        with:
+          node-version: '18.16.1'
 
       - name: Lint 👀
         run: |

CHANGELOG.md

@@ -14,6 +14,7 @@
 ### Changed
 
 - Updated visual appearance of inputs. If you weren’t overriding the default configuration, you don’t need to do anything to update. If you were overriding the configuration, be aware that there are now extra states for radio & checkboxes, that you should override the colors for: active, checked-hover, checked-active, invalid, invalid-checked. You can now also set the box-shadow for each state.
+- 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
 

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',
+};

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 ****************** //