Commit eaee62d0 authored by Andrew Fontaine's avatar Andrew Fontaine

Merge branch 'add-variants-to-devops-adoption-cell-flag' into 'master'

Add variant to DevOps Adoption cell flag

See merge request gitlab-org/gitlab!64770
parents fe72dff0 9b9bc764
......@@ -16,6 +16,11 @@ export default {
type: Boolean,
required: true,
},
variant: {
type: String,
required: false,
default: 'default',
},
},
computed: {
tooltipText() {
......@@ -28,6 +33,6 @@ export default {
<span
v-gl-tooltip.hover="tooltipText"
class="circle"
:class="{ 'circle-enabled': enabled }"
:class="{ [`circle-enabled-${variant}`]: enabled }"
></span>
</template>
@import 'page_bundles/mixins_and_variables_and_functions';
@mixin important-background($color) {
background-color: $color !important;
}
@mixin circle-fill($color) {
border: 1px solid $color;
@include important-background($color);
}
.circle {
width: $gl-spacing-scale-3;
height: $gl-spacing-scale-3;
......@@ -8,8 +17,25 @@
@include gl-display-inline-block;
&-enabled {
border: 1px solid var(--indigo-800, $indigo-800);
background-color: var(--indigo-600, $indigo-600);
&-default {
@include circle-fill($indigo-600);
}
&-primary {
@include circle-fill($data-viz-blue-600);
}
&-warning {
@include circle-fill($data-viz-orange-600);
}
&-info {
@include circle-fill($data-viz-aqua-500);
}
&-success {
@include circle-fill($data-viz-green-600);
}
}
}
......@@ -31,3 +57,21 @@
@include gl-display-none;
}
}
.progress-bar {
&.bg-primary {
@include important-background($data-viz-blue-600);
}
&.bg-warning {
@include important-background($data-viz-orange-600);
}
&.bg-info {
@include important-background($data-viz-aqua-500);
}
&.bg-success {
@include important-background($data-viz-green-600);
}
}
......@@ -8,13 +8,13 @@ exports[`DevopsAdoptionTableCellFlag disabled matches the snapshot 1`] = `
exports[`DevopsAdoptionTableCellFlag disabled when the enabled flag is changed to true matches the snapshot 1`] = `
<span
class="circle circle-enabled"
class="circle circle-enabled-default"
/>
`;
exports[`DevopsAdoptionTableCellFlag enabled matches the snapshot 1`] = `
<span
class="circle circle-enabled"
class="circle circle-enabled-default"
/>
`;
......@@ -23,3 +23,9 @@ exports[`DevopsAdoptionTableCellFlag enabled when the enabled flag is changed to
class="circle"
/>
`;
exports[`DevopsAdoptionTableCellFlag enabled with a variant specified matches the snapshot 1`] = `
<span
class="circle circle-enabled-primary"
/>
`;
......@@ -54,6 +54,18 @@ describe('DevopsAdoptionTableCellFlag', () => {
expect(tooltip.value).toBe('Not adopted');
});
});
describe('with a variant specified', () => {
beforeEach(async () => {
wrapper.setProps({ variant: 'primary' });
await wrapper.vm.$nextTick();
});
it('matches the snapshot', () => {
expect(wrapper.element).toMatchSnapshot();
});
});
});
describe('disabled', () => {
......
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment