= (args) => {
export const Basic = Template.bind({});
Basic.args = {
colorScheme: "6",
- icon: ``,
- default: "Pending"
+ default: "Badge Text"
};
-export const Truncating = Template.bind({});
-Truncating.args = {
- default: "This would truncate as it is too long",
- style: "width: 200px",
+export const Interactive = Template.bind({});
+Interactive.args = {
+ design: BadgeDesign.Positive,
+ interactive: true,
+ default: "Success"
};
-const getIconHTML = (name: string): string => ``;
-const AllColorSchemesBadges = [
- { icon: getIconHTML("accept"), default: "" },
- { icon: getIconHTML("sap-ui5"), default: "" },
- { icon: getIconHTML("add-equipment"), default: "In progress" },
- { icon: getIconHTML("lab"), default: "" },
- { icon: getIconHTML("email-read"), default: "" },
- { icon: "", default: "Pending" },
- { icon: getIconHTML("lightbulb"), default: "New idea" },
- { icon: getIconHTML("locked"), default: "Locked" },
- { icon: getIconHTML("flight"), default: "En route" },
- { icon: "", default: "Archived" },
+export const WrappingTypes = Template.bind({});
+WrappingTypes.decorators = [
+ (story, {args}) => {
+ return html`
+
+ ${story({
+ args: {
+ ...args,
+ default: args.default || "This would truncate as it is too long",
+ wrappingType: args.wrappingType || WrappingType.None,
+ style: "width: 200px"
+ }
+ })}
+ ${story({
+ args: {
+ ...args,
+ default: args.default || "This would wrap as it is too long",
+ wrappingType: args.wrappingType || WrappingType.Normal,
+ style: "width: 200px"
+ }
+ })}
+
`;
+ },
+];
+
+export const Designs = Template.bind({});
+Designs.decorators = [
+ (story, ctx) => {
+ return html`
+
+ ${[BadgeDesign.Neutral, BadgeDesign.Information, BadgeDesign.Positive, BadgeDesign.Negative, BadgeDesign.Critical, BadgeDesign.Set1, BadgeDesign.Set2, BadgeDesign.Set3].map((value) => {
+ return story({
+ args: {
+ design: ctx.args.design || value,
+ default: ctx.args.default || value,
+ }
+ });
+ })}
+
`;
+ }
+];
+
+export const Set1 = Template.bind({});
+Set1.decorators = [
+ (story, ctx) => {
+ return html`
+
+ ${[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((value) => {
+ return story({
+ args: {
+ design: ctx.args.design || BadgeDesign.Set1,
+ colorScheme: ctx.args.colorScheme || value.toString(),
+ default: ctx.args.default || "Color Scheme " + value,
+ }
+ });
+ })}
+
`;
+ }
+];
+
+export const Set2 = Template.bind({});
+Set2.decorators = [
+ (story, ctx) => {
+ return html`
+
+ ${[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((value) => {
+ return story({
+ args: {
+ design: ctx.args.design || BadgeDesign.Set2,
+ colorScheme: ctx.args.colorScheme || value.toString(),
+ default: ctx.args.default || "Color Scheme " + value,
+ }
+ });
+ })}
+
`;
+ }
];
-export const AllColorSchemes = Template.bind({});
-AllColorSchemes.decorators = [
+export const Set3 = Template.bind({});
+Set3.decorators = [
(story, ctx) => {
return html`
- ${AllColorSchemesBadges.map((badge, i) => {
+
+ ${[1, 2, 3, 4, 5, 6, 7, 8, 9, 10].map((value) => {
return story({
args: {
- colorScheme: ctx.args.colorScheme || (i + 1).toString(),
- icon: ctx.args.icon || badge.icon,
- default: ctx.args.default || badge.default,
+ design: ctx.args.design || BadgeDesign.Set3,
+ colorScheme: ctx.args.colorScheme || value.toString(),
+ default: ctx.args.default || "Color Scheme " + value,
}
});
- })}`;
+ })}
+
`;
}
];
\ No newline at end of file
diff --git a/packages/theming/css-vars-usage.json b/packages/theming/css-vars-usage.json
index e7c1f3b4f0a1..4d2043e68a38 100644
--- a/packages/theming/css-vars-usage.json
+++ b/packages/theming/css-vars-usage.json
@@ -78,6 +78,14 @@
"--sapButton_BorderColor",
"--sapButton_BorderCornerRadius",
"--sapButton_BorderWidth",
+ "--sapButton_Critical_Active_Background",
+ "--sapButton_Critical_Active_BorderColor",
+ "--sapButton_Critical_Background",
+ "--sapButton_Critical_BorderColor",
+ "--sapButton_Critical_Hover_Background",
+ "--sapButton_Critical_Hover_BorderColor",
+ "--sapButton_Critical_Hover_TextColor",
+ "--sapButton_Critical_TextColor",
"--sapButton_Emphasized_Active_Background",
"--sapButton_Emphasized_Active_BorderColor",
"--sapButton_Emphasized_Active_TextColor",
@@ -111,6 +119,14 @@
"--sapButton_Hover_Background",
"--sapButton_Hover_BorderColor",
"--sapButton_Hover_TextColor",
+ "--sapButton_Information_Active_Background",
+ "--sapButton_Information_Active_BorderColor",
+ "--sapButton_Information_Background",
+ "--sapButton_Information_BorderColor",
+ "--sapButton_Information_Hover_Background",
+ "--sapButton_Information_Hover_BorderColor",
+ "--sapButton_Information_Hover_TextColor",
+ "--sapButton_Information_TextColor",
"--sapButton_Lite_Active_Background",
"--sapButton_Lite_Active_BorderColor",
"--sapButton_Lite_Background",
@@ -119,7 +135,20 @@
"--sapButton_Lite_Hover_BorderColor",
"--sapButton_Lite_Hover_TextColor",
"--sapButton_Lite_TextColor",
+ "--sapButton_Negative_Active_Background",
+ "--sapButton_Negative_Active_BorderColor",
+ "--sapButton_Negative_Background",
+ "--sapButton_Negative_BorderColor",
+ "--sapButton_Negative_Hover_Background",
+ "--sapButton_Negative_Hover_BorderColor",
+ "--sapButton_Negative_Hover_TextColor",
+ "--sapButton_Negative_TextColor",
+ "--sapButton_Neutral_Active_Background",
+ "--sapButton_Neutral_Active_BorderColor",
"--sapButton_Neutral_Background",
+ "--sapButton_Neutral_Hover_Background",
+ "--sapButton_Neutral_Hover_BorderColor",
+ "--sapButton_Neutral_Hover_TextColor",
"--sapButton_Reject_Active_Background",
"--sapButton_Reject_Active_BorderColor",
"--sapButton_Reject_Active_TextColor",
@@ -139,6 +168,14 @@
"--sapButton_Selected_Hover_Background",
"--sapButton_Selected_Hover_BorderColor",
"--sapButton_Selected_TextColor",
+ "--sapButton_Success_Active_Background",
+ "--sapButton_Success_Active_BorderColor",
+ "--sapButton_Success_Background",
+ "--sapButton_Success_BorderColor",
+ "--sapButton_Success_Hover_Background",
+ "--sapButton_Success_Hover_BorderColor",
+ "--sapButton_Success_Hover_TextColor",
+ "--sapButton_Success_TextColor",
"--sapButton_TextColor",
"--sapButton_TokenBackground",
"--sapButton_TokenBorderColor",
@@ -166,6 +203,7 @@
"--sapContent_ContrastIconColor",
"--sapContent_ContrastShadowColor",
"--sapContent_ContrastTextColor",
+ "--sapContent_ContrastTextShadow",
"--sapContent_Critical_Shadow",
"--sapContent_DisabledOpacity",
"--sapContent_DisabledTextColor",
@@ -298,6 +336,116 @@
"--sapIllus_PatternHighlight",
"--sapIllus_PatternShadow",
"--sapIllus_StrokeDetailColor",
+ "--sapIndicationColor_1",
+ "--sapIndicationColor_1_Active_Background",
+ "--sapIndicationColor_1_Active_BorderColor",
+ "--sapIndicationColor_1_Active_TextColor",
+ "--sapIndicationColor_1_Background",
+ "--sapIndicationColor_1_BorderColor",
+ "--sapIndicationColor_1_Hover_Background",
+ "--sapIndicationColor_1_TextColor",
+ "--sapIndicationColor_1b",
+ "--sapIndicationColor_1b_BorderColor",
+ "--sapIndicationColor_1b_Hover_Background",
+ "--sapIndicationColor_2",
+ "--sapIndicationColor_2_Active_Background",
+ "--sapIndicationColor_2_Active_BorderColor",
+ "--sapIndicationColor_2_Active_TextColor",
+ "--sapIndicationColor_2_Background",
+ "--sapIndicationColor_2_BorderColor",
+ "--sapIndicationColor_2_Hover_Background",
+ "--sapIndicationColor_2_TextColor",
+ "--sapIndicationColor_2b",
+ "--sapIndicationColor_2b_BorderColor",
+ "--sapIndicationColor_2b_Hover_Background",
+ "--sapIndicationColor_3",
+ "--sapIndicationColor_3_Active_Background",
+ "--sapIndicationColor_3_Active_BorderColor",
+ "--sapIndicationColor_3_Active_TextColor",
+ "--sapIndicationColor_3_Background",
+ "--sapIndicationColor_3_BorderColor",
+ "--sapIndicationColor_3_Hover_Background",
+ "--sapIndicationColor_3_TextColor",
+ "--sapIndicationColor_3b",
+ "--sapIndicationColor_3b_BorderColor",
+ "--sapIndicationColor_3b_Hover_Background",
+ "--sapIndicationColor_4",
+ "--sapIndicationColor_4_Active_Background",
+ "--sapIndicationColor_4_Active_BorderColor",
+ "--sapIndicationColor_4_Active_TextColor",
+ "--sapIndicationColor_4_Background",
+ "--sapIndicationColor_4_BorderColor",
+ "--sapIndicationColor_4_Hover_Background",
+ "--sapIndicationColor_4_TextColor",
+ "--sapIndicationColor_4b",
+ "--sapIndicationColor_4b_BorderColor",
+ "--sapIndicationColor_4b_Hover_Background",
+ "--sapIndicationColor_5",
+ "--sapIndicationColor_5_Active_Background",
+ "--sapIndicationColor_5_Active_BorderColor",
+ "--sapIndicationColor_5_Active_TextColor",
+ "--sapIndicationColor_5_Background",
+ "--sapIndicationColor_5_BorderColor",
+ "--sapIndicationColor_5_Hover_Background",
+ "--sapIndicationColor_5_TextColor",
+ "--sapIndicationColor_5b",
+ "--sapIndicationColor_5b_BorderColor",
+ "--sapIndicationColor_5b_Hover_Background",
+ "--sapIndicationColor_6",
+ "--sapIndicationColor_6_Active_Background",
+ "--sapIndicationColor_6_Active_BorderColor",
+ "--sapIndicationColor_6_Active_TextColor",
+ "--sapIndicationColor_6_Background",
+ "--sapIndicationColor_6_BorderColor",
+ "--sapIndicationColor_6_Hover_Background",
+ "--sapIndicationColor_6_TextColor",
+ "--sapIndicationColor_6b",
+ "--sapIndicationColor_6b_BorderColor",
+ "--sapIndicationColor_6b_Hover_Background",
+ "--sapIndicationColor_7",
+ "--sapIndicationColor_7_Active_Background",
+ "--sapIndicationColor_7_Active_BorderColor",
+ "--sapIndicationColor_7_Active_TextColor",
+ "--sapIndicationColor_7_Background",
+ "--sapIndicationColor_7_BorderColor",
+ "--sapIndicationColor_7_Hover_Background",
+ "--sapIndicationColor_7_TextColor",
+ "--sapIndicationColor_7b",
+ "--sapIndicationColor_7b_BorderColor",
+ "--sapIndicationColor_7b_Hover_Background",
+ "--sapIndicationColor_8",
+ "--sapIndicationColor_8_Active_Background",
+ "--sapIndicationColor_8_Active_BorderColor",
+ "--sapIndicationColor_8_Active_TextColor",
+ "--sapIndicationColor_8_Background",
+ "--sapIndicationColor_8_BorderColor",
+ "--sapIndicationColor_8_Hover_Background",
+ "--sapIndicationColor_8_TextColor",
+ "--sapIndicationColor_8b",
+ "--sapIndicationColor_8b_BorderColor",
+ "--sapIndicationColor_8b_Hover_Background",
+ "--sapIndicationColor_9",
+ "--sapIndicationColor_9_Active_Background",
+ "--sapIndicationColor_9_Active_BorderColor",
+ "--sapIndicationColor_9_Active_TextColor",
+ "--sapIndicationColor_9_Background",
+ "--sapIndicationColor_9_BorderColor",
+ "--sapIndicationColor_9_Hover_Background",
+ "--sapIndicationColor_9_TextColor",
+ "--sapIndicationColor_9b",
+ "--sapIndicationColor_9b_BorderColor",
+ "--sapIndicationColor_9b_Hover_Background",
+ "--sapIndicationColor_10",
+ "--sapIndicationColor_10_Active_Background",
+ "--sapIndicationColor_10_Active_BorderColor",
+ "--sapIndicationColor_10_Active_TextColor",
+ "--sapIndicationColor_10_Background",
+ "--sapIndicationColor_10_BorderColor",
+ "--sapIndicationColor_10_Hover_Background",
+ "--sapIndicationColor_10_TextColor",
+ "--sapIndicationColor_10b",
+ "--sapIndicationColor_10b_BorderColor",
+ "--sapIndicationColor_10b_Hover_Background",
"--sapInformationBackground",
"--sapInformationBorderColor",
"--sapInformativeElementColor",
@@ -351,6 +499,8 @@
"--sapNegativeColor",
"--sapNegativeElementColor",
"--sapNegativeTextColor",
+ "--sapNeutralBackground",
+ "--sapNeutralBorderColor",
"--sapNeutralColor",
"--sapNeutralElementColor",
"--sapNeutralTextColor",