Commit 04cee76b authored by Kushal Pandya's avatar Kushal Pandya

Merge branch 'ph/341043/mrWidgetExtensionLevel2Icons' into 'master'

Adds support for level 2-3 general icons

See merge request gitlab-org/gitlab!71397
parents 2a9b4b82 9e721884
<script>
import { GlButton, GlLoadingIcon, GlIcon, GlLink, GlBadge, GlSafeHtmlDirective } from '@gitlab/ui';
import { GlButton, GlLoadingIcon, GlLink, GlBadge, GlSafeHtmlDirective } from '@gitlab/ui';
import SmartVirtualList from '~/vue_shared/components/smart_virtual_list.vue';
import { EXTENSION_ICON_CLASS } from '../../constants';
import StatusIcon from './status_icon.vue';
......@@ -14,7 +14,6 @@ export default {
components: {
GlButton,
GlLoadingIcon,
GlIcon,
GlLink,
GlBadge,
SmartVirtualList,
......@@ -139,9 +138,7 @@ export default {
class="report-block-container"
>
<li v-for="data in fullData" :key="data.id" class="d-flex align-items-center">
<div v-if="data.icon" :class="data.icon.class" class="d-flex">
<gl-icon :name="data.icon.name" :size="24" />
</div>
<status-icon v-if="data.icon" :icon-name="data.icon.name" :size="12" />
<div
class="gl-mt-2 gl-mb-2 align-content-around align-items-start flex-wrap align-self-center d-flex"
>
......
<script>
import { GlLoadingIcon, GlIcon } from '@gitlab/ui';
import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
import { EXTENSION_ICON_CLASS, EXTENSION_ICONS } from '../../constants';
import { EXTENSION_ICON_CLASS, EXTENSION_ICON_NAMES } from '../../constants';
export default {
components: {
......@@ -11,41 +11,48 @@ export default {
props: {
name: {
type: String,
required: true,
required: false,
default: '',
},
isLoading: {
type: Boolean,
required: true,
required: false,
default: false,
},
iconName: {
type: String,
required: false,
default: null,
},
size: {
type: Number,
required: false,
default: 16,
},
},
computed: {
iconAriaLabel() {
const statusLabel = Object.keys(EXTENSION_ICONS).find(
(k) => EXTENSION_ICONS[k] === this.iconName,
);
return `${capitalizeFirstCharacter(statusLabel)} ${this.name}`;
return `${capitalizeFirstCharacter(this.iconName)} ${this.name}`;
},
},
EXTENSION_ICON_NAMES,
EXTENSION_ICON_CLASS,
};
</script>
<template>
<div
:class="[$options.EXTENSION_ICON_CLASS[iconName], { 'mr-widget-extension-icon': !isLoading }]"
:class="[
$options.EXTENSION_ICON_CLASS[iconName],
{ 'mr-widget-extension-icon': !isLoading && size === 16 },
]"
class="align-self-center gl-rounded-full gl-mr-3 gl-relative gl-p-2"
>
<gl-loading-icon v-if="isLoading" size="md" inline class="gl-display-block" />
<gl-icon
v-else
:name="iconName"
:size="16"
:name="$options.EXTENSION_ICON_NAMES[iconName]"
:size="size"
:aria-label="iconAriaLabel"
class="gl-display-block"
/>
......
......@@ -93,17 +93,30 @@ export const stateToComponentMap = {
};
export const EXTENSION_ICONS = {
failed: 'failed',
warning: 'warning',
success: 'success',
neutral: 'neutral',
error: 'error',
notice: 'notice',
};
export const EXTENSION_ICON_NAMES = {
failed: 'status-failed',
warning: 'status-alert',
success: 'status-success',
neutral: 'status-neutral',
error: 'status-alert',
notice: 'status-alert',
};
export const EXTENSION_ICON_CLASS = {
[EXTENSION_ICONS.failed]: 'gl-text-red-500',
[EXTENSION_ICONS.warning]: 'gl-text-orange-500',
[EXTENSION_ICONS.success]: 'gl-text-green-500',
[EXTENSION_ICONS.neutral]: 'gl-text-gray-400',
failed: 'gl-text-red-500',
warning: 'gl-text-orange-500',
success: 'gl-text-green-500',
neutral: 'gl-text-gray-400',
error: 'gl-text-red-500',
notice: 'gl-text-gray-500',
};
export { STATE_MACHINE };
......@@ -45,10 +45,7 @@ export default {
// Icon to get rendered on the side of each row
icon: {
// Required: Name maps to an icon in GitLabs SVG
name:
issue.state === 'closed' ? 'status_failed_borderless' : 'status_success_borderless',
// Optional: An extra class to be added to the icon for additional styling
class: issue.state === 'closed' ? 'text-danger' : 'text-success',
name: issue.state === 'closed' ? EXTENSION_ICONS.error : EXTENSION_ICONS.success,
},
// Badges get rendered next to the text on each row
badge: issue.state === 'closed' && {
......
......@@ -16,20 +16,20 @@ describe('MR widget extensions status icon', () => {
});
it('renders loading icon', () => {
factory({ name: 'test', isLoading: true, iconName: 'status-failed' });
factory({ name: 'test', isLoading: true, iconName: 'failed' });
expect(wrapper.findComponent(GlLoadingIcon).exists()).toBe(true);
});
it('renders status icon', () => {
factory({ name: 'test', isLoading: false, iconName: 'status-failed' });
factory({ name: 'test', isLoading: false, iconName: 'failed' });
expect(wrapper.findComponent(GlIcon).exists()).toBe(true);
expect(wrapper.findComponent(GlIcon).props('name')).toBe('status-failed');
});
it('sets aria-label for status icon', () => {
factory({ name: 'test', isLoading: false, iconName: 'status-failed' });
factory({ name: 'test', isLoading: false, iconName: 'failed' });
expect(wrapper.findComponent(GlIcon).props('ariaLabel')).toBe('Failed test');
});
......
......@@ -919,7 +919,7 @@ describe('MrWidgetOptions', () => {
// Renders icon in the row
expect(collapsedSection.find(GlIcon).exists()).toBe(true);
expect(collapsedSection.find(GlIcon).props('name')).toBe('status_failed_borderless');
expect(collapsedSection.find(GlIcon).props('name')).toBe('status-failed');
// Renders badge in the row
expect(collapsedSection.find(GlBadge).exists()).toBe(true);
......
......@@ -21,8 +21,7 @@ export default {
id: 1,
text: 'Hello world',
icon: {
name: 'status_failed_borderless',
class: 'text-danger',
name: EXTENSION_ICONS.failed,
},
badge: {
text: 'Closed',
......
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