Skip to content

Commit

Permalink
feat: (Core) introduce the status Indicator component (#4746)
Browse files Browse the repository at this point in the history 
* introducing the status Indicator component

introducing the status Indicator component
  • Loading branch information
@Lokanathan-k
Lokanathan-k committed Mar 4, 2021
1 parent cc86980 commit 8f5bc1f
Show file tree
Hide file tree
Showing 35 changed files with 3,793 additions and 6 deletions.
7 changes: 4 additions & 3 deletions apps/docs/src/app/core/api-files.ts
View file
Expand Up @@ -170,7 +170,7 @@ export const API_FILES = {
'MessageBoxDefaultComponent',
'MessageBoxSemanticIconComponent',
'MessageBoxContainerComponent',
'MessageBoxFooterButtonComponent',
'MessageBoxFooterButtonComponent'
],
notification: [
'NotificationComponent',
Expand Down Expand Up @@ -272,7 +272,7 @@ export const API_FILES = {
'TabProcessIconDirective',
'TabItemExpandComponent',
'TabSeparator',
'TabInfo',
'TabInfo'
],
text: ['TextComponent'],
tile: [
Expand Down Expand Up @@ -337,5 +337,6 @@ export const API_FILES = {
'GridListItemFooterBarComponent',
'GridListItemToolbarComponent',
'GridListGroupHeaderComponent'
]
],
statusIndicator: ['StatusIndicatorComponent']
};
72 changes: 72 additions & 0 deletions ...re/component-docs/status-indicator/example/status-indicator-angled-filling.component.html
View file
@@ -0,0 +1,72 @@
<fd-status-indicator
id="status_icon_13"
status="critical"
size="xl"
fillPercentage="50"
[clickable]="false"
ariaLabel=" Euro Status Indicator with 45 degree filling"
ariaRoledescription="Status Indicator"
role="progressbar"
ariaValuetext="50%"
focusable="true"
title="50% with extra large size"
[path]="euroImage"
viewBox="0 0 26 25"
fillingType="angled"
angle="45"
>
</fd-status-indicator>
<fd-status-indicator
id="status_icon_14"
status="positive"
size="xl"
fillPercentage="90"
[clickable]="false"
ariaLabel=" Euro Status Indicator with 90 degree filling"
ariaRoledescription="Status Indicator"
role="progressbar"
ariaValuetext="90%"
focusable="true"
title="90% with extra large size"
[path]="euroImage"
viewBox="0 0 26 25"
fillingType="angled"
angle="90"
>
</fd-status-indicator>
<fd-status-indicator
id="status_icon_15"
status="negative"
size="xl"
fillPercentage="35"
[clickable]="false"
ariaLabel="Euro Status Indicator with 180 degree filling"
ariaRoledescription="Status Indicator"
role="progressbar"
ariaValuetext="35%"
focusable="true"
title="35% with extra large size"
[path]="euroImage"
viewBox="0 0 26 25"
fillingType="angled"
angle="180"
>
</fd-status-indicator>
<fd-status-indicator
id="status_icon_16"
status="critical"
size="xl"
fillPercentage="65"
[clickable]="false"
ariaLabel=" Euro Status Indicator with 270 degree filling"
ariaRoledescription="Status Indicator"
role="progressbar"
ariaValuetext="65%"
focusable="true"
title="65% with Extra Large size"
[path]="euroImage"
viewBox="0 0 26 25"
fillingType="angled"
angle="270"
>
</fd-status-indicator>
22 changes: 22 additions & 0 deletions ...core/component-docs/status-indicator/example/status-indicator-angled-filling.component.ts
View file
@@ -0,0 +1,22 @@
import { Component } from '@angular/core';

@Component({
selector: 'fd-status-indicator-angled-filling',
templateUrl: './status-indicator-angled-filling.component.html'
})
export class StatusIndicatorAngeledFillingComponent {
cerealImage = [
'M14.664,29.825c-0.133,0-0.217-0.004-0.236-0.005l-0.202-0.01l-0.032-0.2c-0.021-0.137-0.515-3.368,1.238-5.323c1.754-1.954,5.02-1.814,5.158-1.806l0.202,0.01l0.032,0.2c0.021,0.137,0.516,3.368-1.238,5.323C18.082,29.69,15.467,29.825,14.664,29.825z',
'M13.626,25.116c-0.803,0-3.417-0.135-4.922-1.811c-1.753-1.955-1.26-5.186-1.238-5.322l0.032-0.2l0.202-0.01c0.14-0.004,3.404-0.148,5.158,1.806l0,0c1.754,1.955,1.26,5.186,1.238,5.323l-0.032,0.2l-0.202,0.01C13.843,25.112,13.759,25.116,13.626,25.116z',
'M15.337,21.752c-0.133,0-0.217-0.004-0.236-0.005l-0.202-0.01l-0.032-0.2c-0.021-0.137-0.515-3.368,1.238-5.323c1.754-1.954,5.018-1.813,5.158-1.806l0.202,0.01l0.032,0.2c0.021,0.137,0.516,3.368-1.238,5.323C18.755,21.617,16.14,21.752,15.337,21.752z',
'M13.626,17.432c-0.803,0-3.417-0.135-4.922-1.811c-1.753-1.955-1.26-5.186-1.238-5.322l0.032-0.2l0.202-0.01c0.14-0.005,3.404-0.148,5.158,1.806l0,0c1.754,1.955,1.26,5.186,1.238,5.323l-0.032,0.2l-0.202,0.01C13.843,17.428,13.759,17.432,13.626,17.432z',
'M15.337,14.068c-0.133,0-0.217-0.004-0.236-0.005l-0.202-0.01l-0.032-0.2c-0.021-0.137-0.515-3.368,1.238-5.323c1.754-1.954,5.018-1.814,5.158-1.806l0.202,0.01l0.032,0.2c0.021,0.137,0.516,3.368-1.238,5.323C18.755,13.933,16.14,14.068,15.337,14.068z',
'M13.107,10.54l-0.164-0.119c-0.112-0.081-2.747-2.017-2.889-4.64c-0.143-2.623,2.268-4.832,2.37-4.924l0.15-0.136l0.164,0.119c0.112,0.081,2.746,2.017,2.888,4.64c0.143,2.623-2.267,4.832-2.369,4.924L13.107,10.54z'
];
euroImage = [
'M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z'
];
cartImage = [
'M22.9,17.2c-1.7,0-3.2,1.2-3.5,2.8h-4.8c-0.4-1.6-1.8-2.8-3.6-2.8c-0.1,0-0.2,0-0.3,0l-0.5-1.7h16L30.5,5H7L5.8,1l0,0l0,0l0-0.1L5.6,0.9l-5-0.4l0.2,1.7l3.4,0.3l4.7,15.4c-0.9,0.7-1.5,1.7-1.5,2.9c0,2,1.6,3.7,3.7,3.7c1.7,0,3.2-1.2,3.6-2.8h4.8c0.4,1.6,1.8,2.8,3.5,2.8c2,0,3.7-1.6,3.7-3.7C26.6,18.8,24.9,17.2,22.9,17.2z'
];
}
36 changes: 36 additions & 0 deletions ...docs/status-indicator/example/status-indicator-cirular-fill-anti-clockwise.component.html
View file
@@ -0,0 +1,36 @@
<fd-status-indicator
id="status_icon_17"
status="negative"
size="xl"
fillPercentage="35"
[clickable]="false"
ariaLabel=" Euro Status Indicator Extra Large size with anti clock wise filling"
ariaRoledescription="Status Indicator"
role="progressbar"
ariaValuetext="40%"
focusable="true"
title="40% with Extra Large size"
[path]="cerealImage"
fillingType="radial"
fillDirection="counterclockwise"
viewBox="0 0 24 31"
>
</fd-status-indicator>
<fd-status-indicator
id="status_icon_18"
status="negative"
size="xl"
fillPercentage="35"
[clickable]="false"
ariaLabel=" Euro Status Indicator Extra Large size with anti clock wise filling"
ariaRoledescription="Status Indicator"
role="progressbar"
ariaValuetext="40%"
focusable="true"
title="40% with Extra Large size"
[path]="euroImage"
fillingType="radial"
fillDirection="counterclockwise"
viewBox="0 0 26 25"
>
</fd-status-indicator>
22 changes: 22 additions & 0 deletions ...t-docs/status-indicator/example/status-indicator-cirular-fill-anti-clockwise.component.ts
View file
@@ -0,0 +1,22 @@
import { Component } from '@angular/core';

@Component({
selector: 'fd-status-indicator-circular-fill-anti-clock',
templateUrl: './status-indicator-cirular-fill-anti-clockwise.component.html'
})
export class StatusIndicatorCircularFillAntiClockComponent {
cerealImage = [
'M14.664,29.825c-0.133,0-0.217-0.004-0.236-0.005l-0.202-0.01l-0.032-0.2c-0.021-0.137-0.515-3.368,1.238-5.323c1.754-1.954,5.02-1.814,5.158-1.806l0.202,0.01l0.032,0.2c0.021,0.137,0.516,3.368-1.238,5.323C18.082,29.69,15.467,29.825,14.664,29.825z',
'M13.626,25.116c-0.803,0-3.417-0.135-4.922-1.811c-1.753-1.955-1.26-5.186-1.238-5.322l0.032-0.2l0.202-0.01c0.14-0.004,3.404-0.148,5.158,1.806l0,0c1.754,1.955,1.26,5.186,1.238,5.323l-0.032,0.2l-0.202,0.01C13.843,25.112,13.759,25.116,13.626,25.116z',
'M15.337,21.752c-0.133,0-0.217-0.004-0.236-0.005l-0.202-0.01l-0.032-0.2c-0.021-0.137-0.515-3.368,1.238-5.323c1.754-1.954,5.018-1.813,5.158-1.806l0.202,0.01l0.032,0.2c0.021,0.137,0.516,3.368-1.238,5.323C18.755,21.617,16.14,21.752,15.337,21.752z',
'M13.626,17.432c-0.803,0-3.417-0.135-4.922-1.811c-1.753-1.955-1.26-5.186-1.238-5.322l0.032-0.2l0.202-0.01c0.14-0.005,3.404-0.148,5.158,1.806l0,0c1.754,1.955,1.26,5.186,1.238,5.323l-0.032,0.2l-0.202,0.01C13.843,17.428,13.759,17.432,13.626,17.432z',
'M15.337,14.068c-0.133,0-0.217-0.004-0.236-0.005l-0.202-0.01l-0.032-0.2c-0.021-0.137-0.515-3.368,1.238-5.323c1.754-1.954,5.018-1.814,5.158-1.806l0.202,0.01l0.032,0.2c0.021,0.137,0.516,3.368-1.238,5.323C18.755,13.933,16.14,14.068,15.337,14.068z',
'M13.107,10.54l-0.164-0.119c-0.112-0.081-2.747-2.017-2.889-4.64c-0.143-2.623,2.268-4.832,2.37-4.924l0.15-0.136l0.164,0.119c0.112,0.081,2.746,2.017,2.888,4.64c0.143,2.623-2.267,4.832-2.369,4.924L13.107,10.54z'
];
euroImage = [
'M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z'
];
cartImage = [
'M22.9,17.2c-1.7,0-3.2,1.2-3.5,2.8h-4.8c-0.4-1.6-1.8-2.8-3.6-2.8c-0.1,0-0.2,0-0.3,0l-0.5-1.7h16L30.5,5H7L5.8,1l0,0l0,0l0-0.1L5.6,0.9l-5-0.4l0.2,1.7l3.4,0.3l4.7,15.4c-0.9,0.7-1.5,1.7-1.5,2.9c0,2,1.6,3.7,3.7,3.7c1.7,0,3.2-1.2,3.6-2.8h4.8c0.4,1.6,1.8,2.8,3.5,2.8c2,0,3.7-1.6,3.7-3.7C26.6,18.8,24.9,17.2,22.9,17.2z'
];
}
36 changes: 36 additions & 0 deletions ...nent-docs/status-indicator/example/status-indicator-cirular-fill-clockwise.component.html
View file
@@ -0,0 +1,36 @@
<fd-status-indicator
id="status_icon_19"
status="negative"
size="xl"
fillPercentage="40"
[clickable]="false"
ariaLabel=" Euro Status Indicator Extra Large size with clock wise filling"
ariaRoledescription="Status Indicator"
role="progressbar"
ariaValuetext="35%"
focusable="true"
title="40% with Extra Large size"
[path]="cerealImage"
fillingType="radial"
fillDirection="clockwise"
viewBox="0 0 24 31"
>
</fd-status-indicator>
<fd-status-indicator
id="status_icon_20"
status="negative"
size="xl"
fillPercentage="40"
[clickable]="false"
ariaLabel=" Euro Status Indicator Extra Large size with clock wise filling"
ariaRoledescription="Status Indicator"
role="progressbar"
ariaValuetext="35%"
focusable="true"
title="40% with Extra Large size"
[path]="euroImage"
fillingType="radial"
fillDirection="clockwise"
viewBox="0 0 26 25"
>
</fd-status-indicator>
22 changes: 22 additions & 0 deletions ...ponent-docs/status-indicator/example/status-indicator-cirular-fill-clockwise.component.ts
View file
@@ -0,0 +1,22 @@
import { Component } from '@angular/core';

@Component({
selector: 'fd-status-indicator-circular-fill-clock',
templateUrl: './status-indicator-cirular-fill-clockwise.component.html'
})
export class StatusIndicatorCircularFillClockComponent {
cerealImage = [
'M14.664,29.825c-0.133,0-0.217-0.004-0.236-0.005l-0.202-0.01l-0.032-0.2c-0.021-0.137-0.515-3.368,1.238-5.323c1.754-1.954,5.02-1.814,5.158-1.806l0.202,0.01l0.032,0.2c0.021,0.137,0.516,3.368-1.238,5.323C18.082,29.69,15.467,29.825,14.664,29.825z',
'M13.626,25.116c-0.803,0-3.417-0.135-4.922-1.811c-1.753-1.955-1.26-5.186-1.238-5.322l0.032-0.2l0.202-0.01c0.14-0.004,3.404-0.148,5.158,1.806l0,0c1.754,1.955,1.26,5.186,1.238,5.323l-0.032,0.2l-0.202,0.01C13.843,25.112,13.759,25.116,13.626,25.116z',
'M15.337,21.752c-0.133,0-0.217-0.004-0.236-0.005l-0.202-0.01l-0.032-0.2c-0.021-0.137-0.515-3.368,1.238-5.323c1.754-1.954,5.018-1.813,5.158-1.806l0.202,0.01l0.032,0.2c0.021,0.137,0.516,3.368-1.238,5.323C18.755,21.617,16.14,21.752,15.337,21.752z',
'M13.626,17.432c-0.803,0-3.417-0.135-4.922-1.811c-1.753-1.955-1.26-5.186-1.238-5.322l0.032-0.2l0.202-0.01c0.14-0.005,3.404-0.148,5.158,1.806l0,0c1.754,1.955,1.26,5.186,1.238,5.323l-0.032,0.2l-0.202,0.01C13.843,17.428,13.759,17.432,13.626,17.432z',
'M15.337,14.068c-0.133,0-0.217-0.004-0.236-0.005l-0.202-0.01l-0.032-0.2c-0.021-0.137-0.515-3.368,1.238-5.323c1.754-1.954,5.018-1.814,5.158-1.806l0.202,0.01l0.032,0.2c0.021,0.137,0.516,3.368-1.238,5.323C18.755,13.933,16.14,14.068,15.337,14.068z',
'M13.107,10.54l-0.164-0.119c-0.112-0.081-2.747-2.017-2.889-4.64c-0.143-2.623,2.268-4.832,2.37-4.924l0.15-0.136l0.164,0.119c0.112,0.081,2.746,2.017,2.888,4.64c0.143,2.623-2.267,4.832-2.369,4.924L13.107,10.54z'
];
euroImage = [
'M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z'
];
cartImage = [
'M22.9,17.2c-1.7,0-3.2,1.2-3.5,2.8h-4.8c-0.4-1.6-1.8-2.8-3.6-2.8c-0.1,0-0.2,0-0.3,0l-0.5-1.7h16L30.5,5H7L5.8,1l0,0l0,0l0-0.1L5.6,0.9l-5-0.4l0.2,1.7l3.4,0.3l4.7,15.4c-0.9,0.7-1.5,1.7-1.5,2.9c0,2,1.6,3.7,3.7,3.7c1.7,0,3.2-1.2,3.6-2.8h4.8c0.4,1.6,1.8,2.8,3.5,2.8c2,0,3.7-1.6,3.7-3.7C26.6,18.8,24.9,17.2,22.9,17.2z'
];
}
16 changes: 16 additions & 0 deletions ...re/component-docs/status-indicator/example/status-indicator-clickable-type.component.html
View file
@@ -0,0 +1,16 @@
<fd-status-indicator
id="status_icon_29"
status="negative"
size="lg"
fillPercentage="35"
[clickable]="true"
ariaLabel="Euro Status Indicator With Negative Filling"
ariaRoledescription="Status Indicator"
role="progressbar"
ariaValuetext="35%"
focusable="true"
title="35% with small size"
[path]="euroImage"
viewBox="0 0 26 25"
>
</fd-status-indicator>
22 changes: 22 additions & 0 deletions ...core/component-docs/status-indicator/example/status-indicator-clickable-type.component.ts
View file
@@ -0,0 +1,22 @@
import { Component } from '@angular/core';

@Component({
selector: 'fd-status-indicator-linear-clickable-type',
templateUrl: './status-indicator-clickable-type.component.html'
})
export class StatusIndicatorClickableTypeComponent {
cerealImage = [
'M14.664,29.825c-0.133,0-0.217-0.004-0.236-0.005l-0.202-0.01l-0.032-0.2c-0.021-0.137-0.515-3.368,1.238-5.323c1.754-1.954,5.02-1.814,5.158-1.806l0.202,0.01l0.032,0.2c0.021,0.137,0.516,3.368-1.238,5.323C18.082,29.69,15.467,29.825,14.664,29.825z',
'M13.626,25.116c-0.803,0-3.417-0.135-4.922-1.811c-1.753-1.955-1.26-5.186-1.238-5.322l0.032-0.2l0.202-0.01c0.14-0.004,3.404-0.148,5.158,1.806l0,0c1.754,1.955,1.26,5.186,1.238,5.323l-0.032,0.2l-0.202,0.01C13.843,25.112,13.759,25.116,13.626,25.116z',
'M15.337,21.752c-0.133,0-0.217-0.004-0.236-0.005l-0.202-0.01l-0.032-0.2c-0.021-0.137-0.515-3.368,1.238-5.323c1.754-1.954,5.018-1.813,5.158-1.806l0.202,0.01l0.032,0.2c0.021,0.137,0.516,3.368-1.238,5.323C18.755,21.617,16.14,21.752,15.337,21.752z',
'M13.626,17.432c-0.803,0-3.417-0.135-4.922-1.811c-1.753-1.955-1.26-5.186-1.238-5.322l0.032-0.2l0.202-0.01c0.14-0.005,3.404-0.148,5.158,1.806l0,0c1.754,1.955,1.26,5.186,1.238,5.323l-0.032,0.2l-0.202,0.01C13.843,17.428,13.759,17.432,13.626,17.432z',
'M15.337,14.068c-0.133,0-0.217-0.004-0.236-0.005l-0.202-0.01l-0.032-0.2c-0.021-0.137-0.515-3.368,1.238-5.323c1.754-1.954,5.018-1.814,5.158-1.806l0.202,0.01l0.032,0.2c0.021,0.137,0.516,3.368-1.238,5.323C18.755,13.933,16.14,14.068,15.337,14.068z',
'M13.107,10.54l-0.164-0.119c-0.112-0.081-2.747-2.017-2.889-4.64c-0.143-2.623,2.268-4.832,2.37-4.924l0.15-0.136l0.164,0.119c0.112,0.081,2.746,2.017,2.888,4.64c0.143,2.623-2.267,4.832-2.369,4.924L13.107,10.54z'
];
euroImage = [
'M13,0.5c-6.6,0-12,5.4-12,12s5.4,12,12,12s12-5.4,12-12S19.6,0.5,13,0.5z M16.4,10.1L15.9,12h-5.3v0.3H16l-0.5,1.9h-4.6c0.5,1.3,1.6,2,3.1,2c0.8,0,1.5-0.2,2.2-0.7l0.7-0.6v2.7l-0.1,0.1c-0.9,0.4-1.8,0.6-2.6,0.6c-1.6,0-2.9-0.3-3.8-1c-0.9-0.7-1.5-1.7-2-3H6.4l0.5-1.9h1V12H6.4l0.5-1.9h1.3C8.6,8.9,9.3,8,10.3,7.3c1-0.8,2.3-1.1,3.8-1.1c1.1,0,2,0.2,2.8,0.7L17.3,7l-0.6,2.3l-0.5-0.4c-0.4-0.2-0.9-0.4-1.4-0.5c-0.6-0.1-1.1-0.1-1.7,0c-0.6,0.1-1,0.3-1.5,0.7c-0.3,0.3-0.6,0.6-0.7,1H16.4z'
];
cartImage = [
'M22.9,17.2c-1.7,0-3.2,1.2-3.5,2.8h-4.8c-0.4-1.6-1.8-2.8-3.6-2.8c-0.1,0-0.2,0-0.3,0l-0.5-1.7h16L30.5,5H7L5.8,1l0,0l0,0l0-0.1L5.6,0.9l-5-0.4l0.2,1.7l3.4,0.3l4.7,15.4c-0.9,0.7-1.5,1.7-1.5,2.9c0,2,1.6,3.7,3.7,3.7c1.7,0,3.2-1.2,3.6-2.8h4.8c0.4,1.6,1.8,2.8,3.5,2.8c2,0,3.7-1.6,3.7-3.7C26.6,18.8,24.9,17.2,22.9,17.2z'
];
}
77 changes: 77 additions & 0 deletions .../app/core/component-docs/status-indicator/example/status-indicator-default.component.html
View file
@@ -0,0 +1,77 @@
<fd-status-indicator
id="status_icon_21"
status="positive"
fillPercentage="100"
[clickable]="false"
ariaLabel=" Cart Status Indicator default size"
ariaRoledescription="Status Indicator"
role="progressbar"
ariaValuetext="100%"
focusable="true"
title="100% with default size"
[path]="cartImage"
viewBox="0 0 31 25"
>
</fd-status-indicator>

<fd-status-indicator
id="status_icon_22"
status="positive"
fillPercentage="100"
[clickable]="false"
ariaLabel=" Euro Status Indicator default size"
ariaRoledescription="Status Indicator"
role="progressbar"
ariaValuetext="100%"
focusable="true"
title="100% with default size"
[path]="euroImage"
viewBox="0 0 26 25"
>
</fd-status-indicator>

<fd-status-indicator
id="status_icon_23"
status="critical"
fillPercentage="60"
[clickable]="false"
ariaLabel="Factory Status Indicator default size"
ariaRoledescription="Status Indicator"
role="progressbar"
ariaValuetext="60%"
focusable="true"
title="60% with default size"
[path]="factory"
viewBox="0 0 25 25"
>
</fd-status-indicator>

<fd-status-indicator
id="status_icon_24"
status="negative"
fillPercentage="30"
[clickable]="false"
ariaLabel="Truck Status Indicator default size"
ariaRoledescription="Status Indicator"
role="progressbar"
ariaValuetext="30%"
focusable="true"
title="30% with default size"
[path]="truck"
viewBox="0 0 45 25"
>
</fd-status-indicator>

<fd-status-indicator
id="status_icon_25"
[clickable]="false"
ariaLabel=" Euro Status Indicator default size"
ariaRoledescription="Status Indicator"
role="progressbar"
ariaValuetext="0%"
focusable="true"
title="0% with default size"
[path]="flight"
viewBox="0 0 25 25"
>
</fd-status-indicator>

0 comments on commit 8f5bc1f

Please sign in to comment.