diff --git a/.github/workflows/run-checks.yml b/.github/workflows/run-checks.yml index fa926047d..9b0127c8c 100644 --- a/.github/workflows/run-checks.yml +++ b/.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: | diff --git a/CHANGELOG.md b/CHANGELOG.md index 3dcbcc15f..4608e3723 100644 --- a/CHANGELOG.md +++ b/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 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 ****************** //