Skip to content

Commit

Permalink
Merge branch 'main' into remove-unnecessary-example-word
Browse files Browse the repository at this point in the history
  • Loading branch information
@Haberkamp
Haberkamp authored Mar 11, 2024
2 parents b9ac0a2 + 1b39697 commit 75443df
Show file tree
Hide file tree
Showing 9 changed files with 267 additions and 215 deletions.
70 changes: 35 additions & 35 deletions packages/component-library/src/components/feedback-indicator/sw-banner/sw-banner.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,22 +3,25 @@
<slot name="customIcon">
<sw-icon v-if="!hideIcon" class="sw-banner__icon" :name="bannerIcon" decorative />
</slot>

<div class="sw-banner__body" :class="bannerBodyClasses">
<div v-if="title" class="sw-banner__title">
{{ title }}
</div>

<div class="sw-banner__message">
<slot />
</div>
</div>

<button
v-if="closable"
class="sw-banner__close"
aria-label="Schließen"
title="Schließen"
@click.prevent="$emit('close', bannerIndex)"
>
<sw-icon name="regular-times-s" />
<sw-icon name="solid-times-s" />
</button>
</div>
</template>
Expand Down Expand Up @@ -104,15 +107,15 @@ export default defineComponent({
}
const iconConfig: Record<string, string> = {
neutral: "regular-info-circle",
info: "regular-info-circle",
attention: "regular-exclamation-triangle",
critical: "regular-exclamation-circle",
positive: "regular-check-circle",
inherited: "regular-link",
neutral: "solid-info-circle",
info: "solid-info-circle",
attention: "solid-exclamation-triangle",
critical: "solid-exclamation-circle",
positive: "solid-check-circle",
inherited: "solid-link",
};
return iconConfig[this.variant] || "regular-info-circle";
return iconConfig[this.variant] || "solid-info-circle";
},
bannerClasses(): CssClasses {
Expand Down Expand Up @@ -142,14 +145,14 @@ export default defineComponent({
$sw-banner-size-close: 40px;
.sw-banner {
border: 1px solid $color-gray-300;
border-width: 1px;
border-style: solid;
border-radius: $border-radius-default;
color: $color-darkgray-200;
background-color: $color-white;
text-align: left;
position: relative;
margin: 0 auto 20px;
font-size: $font-size-default;
color: var(--color-text-primary-default);
&__body {
padding: 24px 60px 24px 24px;
Expand All @@ -165,7 +168,6 @@ $sw-banner-size-close: 40px;
}
&__icon {
color: $color-gray-300;
position: absolute;
display: block;
left: 26px;
Expand Down Expand Up @@ -195,76 +197,74 @@ $sw-banner-size-close: 40px;
margin-top: 1px;
margin-bottom: 3px;
display: block;
font-weight: bold;
font-weight: $font-weight-semi-bold;
}
&--info {
border-color: $color-shopware-brand-500;
background-color: $color-shopware-brand-50;
color: $color-shopware-brand-500;
border-color: var(--color-border-brand-selected);
background-color: var(--color-background-brand-default);
.sw-banner__icon,
.sw-banner__close {
color: $color-shopware-brand-500;
color: var(--color-icon-brand-default);
}
}
&--attention {
border-color: $color-pumpkin-spice-500;
background-color: $color-pumpkin-spice-50;
color: $color-pumpkin-spice-900;
border-color: var(--color-border-attention-default);
background-color: var(--color-background-attention-default);
.sw-banner__icon,
.sw-banner__close {
color: $color-pumpkin-spice-900;
color: var(--color-icon-attention-default);
}
}
&--critical {
border-color: $color-crimson-500;
background-color: $color-crimson-50;
color: $color-crimson-900;
border-color: var(--color-border-critical-default);
background-color: var(--color-background-critical-default);
.sw-banner__icon,
.sw-banner__close {
color: $color-crimson-500;
color: var(--color-icon-critical-default);
}
}
&--positive {
border-color: $color-emerald-500;
background-color: $color-emerald-50;
color: $color-emerald-900;
border-color: var(--color-border-positive-default);
background-color: var(--color-background-positive-default);
.sw-banner__icon,
.sw-banner__close {
color: $color-emerald-500;
color: var(--color-icon-positive-default);
}
}
&--inherited {
border-color: $color-module-purple-900;
background-color: $color-module-purple-50;
color: $color-module-purple-900;
border-color: var(--color-border-accent-default);
background-color: var(--color-background-accent-default);
.sw-banner__icon,
.sw-banner__close {
color: $color-module-purple-900;
color: var(--color-icon-accent-default);
}
}
&--neutral {
border-color: var(--color-border-primary-default);
background-color: var(--color-elevation-surface-overlay);
.sw-banner__icon,
.sw-banner__close {
color: $color-darkgray-200;
color: var(--color-icon-primary-default);
}
}
ul {
padding: 8px 0 8px 20px;
}
.sw-icon.icon--regular-times-s {
.sw-icon.icon--solid-times-s {
width: 12px;
height: 12px;
}
Expand Down
21 changes: 8 additions & 13 deletions ...s/component-library/src/components/feedback-indicator/sw-progress-bar/sw-progress-bar.vue
View file
Original file line number Diff line number Diff line change
Expand Up @@ -114,10 +114,7 @@ export default defineComponent({
return `${percentage}%`;
},
progressClasses(): {
"sw-progress-bar__value--no-transition": boolean;
"sw-progress-bar__value--has-error": boolean;
} {
progressClasses() {
return {
"sw-progress-bar__value--no-transition":
this.modelValue < 1 || this.modelValue >= this.maxValue,
Expand All @@ -129,11 +126,8 @@ export default defineComponent({
</script>

<style lang="scss">
@use "sass:math";
@import "../../assets/scss/variables.scss";
$sw-progress-bar-height: 8px;
.sw-progress-bar {
.sw-block-field__block {
border: none;
Expand All @@ -144,29 +138,30 @@ $sw-progress-bar-height: 8px;
}
&__progress-label {
display: flex;
margin-left: auto;
}
.sw-progress-bar__total {
width: 100%;
height: $sw-progress-bar-height;
background-color: $color-gray-200;
border-radius: math.div($sw-progress-bar-height, 2);
height: 8px;
background-color: var(--color-background-primary-disabled);
border-radius: $border-radius-pill;
}
.sw-progress-bar__value {
transition: 1s width linear;
height: 100%;
background-color: $color-shopware-brand-500;
border-radius: math.div($sw-progress-bar-height, 2);
background-color: var(--color-interaction-primary-default);
border-radius: $border-radius-pill;
&--no-transition {
transition: 0s width linear;
}
&--has-error {
transition: 0s width linear;
background-color: $color-crimson-500;
background-color: var(--color-interaction-critical-default);
}
}
}
Expand Down
Loading

0 comments on commit 75443df

Please sign in to comment.