diff --git a/src/components/Badge/Badge.vue b/src/components/Badge/Badge.vue index ea67a30f0..102781536 100644 --- a/src/components/Badge/Badge.vue +++ b/src/components/Badge/Badge.vue @@ -54,6 +54,7 @@ export default { 'negative-bg', 'stage-in-review-bg', 'success-bg', + 'attention', ].includes(prop), }, /** */ @@ -74,13 +75,17 @@ export default { const colorVariant = this.colorVariant; return { // base - 'inline-block py-1 px-4 text-base-normal rounded-[1.2em] border': true, + 'inline-block py-1 px-3 text-base-normal rounded-[1.2em] border': true, // default 'text-default border-light': colorVariant === 'default', // default-on-dark 'text-on-dark border-light': colorVariant === 'default-on-dark', // primary - 'border-primary text-primary': colorVariant === 'primary', + 'border-primary text-primary bg-secondary': + colorVariant === 'primary', + // attention-border + 'border-attention text-attention bg-secondary': + colorVariant === 'attention', // primary-bg 'bg-primary text-on-dark border-primary': colorVariant === 'primary-bg', diff --git a/src/components/Container/Page.stories.js b/src/components/Container/Page.stories.js index da259828f..a143ec807 100644 --- a/src/components/Container/Page.stories.js +++ b/src/components/Container/Page.stories.js @@ -1,6 +1,7 @@ import {computed} from 'vue'; import Page from './Page.vue'; import Dropdown from '@/components/Dropdown/Dropdown.vue'; +import SideNav from '@/components/SideNav/SideNav.vue'; import PageMock from '@/mocks/page'; export default { @@ -10,7 +11,7 @@ export default { export const Default = { render: (args) => ({ - components: {Page, Dropdown}, + components: {Page, Dropdown, SideNav}, setup() { const classes = computed(() => { let _classes = []; @@ -108,50 +109,8 @@ export const Default = {
- + +