Skip to content

Commit

Permalink
fix: review
Browse files Browse the repository at this point in the history
  • Loading branch information
@DavideMininni-Fincons
DavideMininni-Fincons committed Sep 5, 2024
1 parent 44f0776 commit cd589ab
Show file tree
Hide file tree
Showing 2 changed files with 22 additions and 27 deletions.
9 changes: 0 additions & 9 deletions src/elements/core/mixins/panel-common.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -105,15 +105,6 @@
overflow: hidden;
}

slot[name='suffix'],
slot[name='subtext'] {
@include sbb.text-m--regular;

:host([size='s']) & {
@include sbb.text-s--regular;
}
}

slot[name='suffix'] {
color: var(--sbb-selection-panel-suffix-color);
}
Expand Down
40 changes: 22 additions & 18 deletions src/elements/selection-expansion-panel/selection-expansion-panel.stories.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -99,11 +99,11 @@ const suffixStyle: Readonly<StyleInfo> = {

const cardBadge = (): TemplateResult => html`<sbb-card-badge>%</sbb-card-badge>`;

const suffixAndSubtext = (): TemplateResult => html`
const suffixAndSubtext = (size: string): TemplateResult => html`
<span slot="subtext">Subtext</span>
<span slot="suffix" style=${styleMap(suffixStyle)}>
<sbb-icon name="diamond-small" style="margin-inline: var(--sbb-spacing-fixed-2x);"></sbb-icon>
<span class="sbb-text--bold">CHF 40.00</span>
<span class=${`sbb-text--bold sbb-text-${size}`}>CHF 40.00</span>
</span>
`;

Expand All @@ -124,7 +124,7 @@ const WithCheckboxTemplate = ({
}: Args): TemplateResult => html`
<sbb-selection-expansion-panel ${sbbSpread(args)}>
<sbb-checkbox-panel ?checked=${checkedInput} ?disabled=${disabledInput} size=${size}>
Value one ${suffixAndSubtext()} ${cardBadge()}
Value one ${suffixAndSubtext(size)} ${cardBadge()}
</sbb-checkbox-panel>
${innerContent()}
</sbb-selection-expansion-panel>
Expand All @@ -143,7 +143,7 @@ const WithRadioButtonTemplate = ({
?disabled=${disabledInput}
size=${size}
>
Value one ${suffixAndSubtext()} ${cardBadge()}
Value one ${suffixAndSubtext(size)} ${cardBadge()}
</sbb-radio-button-panel>
${innerContent()}
</sbb-selection-expansion-panel>
Expand All @@ -158,20 +158,22 @@ const WithCheckboxGroupTemplate = ({
<sbb-checkbox-group orientation="vertical" horizontal-from="large" size=${size}>
<sbb-selection-expansion-panel ${sbbSpread(args)}>
<sbb-checkbox-panel ?checked=${checkedInput}>
Value one ${suffixAndSubtext()} ${cardBadge()}
Value one ${suffixAndSubtext(size)} ${cardBadge()}
</sbb-checkbox-panel>
${innerContent()}
</sbb-selection-expansion-panel>
<sbb-selection-expansion-panel ${sbbSpread(args)}>
<sbb-checkbox-panel ?disabled=${disabledInput}>
Value two ${suffixAndSubtext()} ${cardBadge()}
Value two ${suffixAndSubtext(size)} ${cardBadge()}
</sbb-checkbox-panel>
${innerContent()}
</sbb-selection-expansion-panel>
<sbb-selection-expansion-panel ${sbbSpread(args)}>
<sbb-checkbox-panel> Value three ${suffixAndSubtext()} ${cardBadge()} </sbb-checkbox-panel>
<sbb-checkbox-panel>
Value three ${suffixAndSubtext(size)} ${cardBadge()}
</sbb-checkbox-panel>
${innerContent()}
</sbb-selection-expansion-panel>
</sbb-checkbox-group>
Expand All @@ -192,21 +194,21 @@ const WithRadioButtonGroupTemplate = ({
>
<sbb-selection-expansion-panel ${sbbSpread(args)}>
<sbb-radio-button-panel value="Value one" ?checked=${checkedInput}>
Value one ${suffixAndSubtext()} ${cardBadge()}
Value one ${suffixAndSubtext(size)} ${cardBadge()}
</sbb-radio-button-panel>
${innerContent()}
</sbb-selection-expansion-panel>
<sbb-selection-expansion-panel ${sbbSpread(args)}>
<sbb-radio-button-panel value="Value two" ?disabled=${disabledInput}>
Value two ${suffixAndSubtext()} ${cardBadge()}
Value two ${suffixAndSubtext(size)} ${cardBadge()}
</sbb-radio-button-panel>
${innerContent()}
</sbb-selection-expansion-panel>
<sbb-selection-expansion-panel ${sbbSpread(args)}>
<sbb-radio-button-panel value="Value three">
Value three ${suffixAndSubtext()} ${cardBadge()}
Value three ${suffixAndSubtext(size)} ${cardBadge()}
</sbb-radio-button-panel>
${innerContent()}
</sbb-selection-expansion-panel>
Expand All @@ -222,7 +224,7 @@ const TicketsOptionsExampleTemplate = ({
<sbb-checkbox-group orientation="vertical" horizontal-from="large" size=${size}>
<sbb-selection-expansion-panel ${sbbSpread(args)}>
<sbb-checkbox-panel ?checked=${checkedInput}>
Saving ${suffixAndSubtext()} ${cardBadge()}
Saving ${suffixAndSubtext(size)} ${cardBadge()}
</sbb-checkbox-panel>
<div slot="content">
<sbb-radio-button-group orientation="vertical" value="non-flex">
Expand Down Expand Up @@ -263,7 +265,7 @@ const TicketsOptionsExampleTemplate = ({
<sbb-selection-expansion-panel ${sbbSpread(args)}>
<sbb-checkbox-panel ?disabled=${disabledInput}>
City offer ${suffixAndSubtext()} ${cardBadge()}
City offer ${suffixAndSubtext(size)} ${cardBadge()}
</sbb-checkbox-panel>
<div slot="content">
<sbb-checkbox-group orientation="vertical">
Expand Down Expand Up @@ -391,20 +393,22 @@ const WithCheckboxesErrorMessageTemplate = ({
>
<sbb-selection-expansion-panel ${sbbSpread(args)}>
<sbb-checkbox-panel ?checked=${checkedInput}>
Value one ${suffixAndSubtext()} ${cardBadge()}
Value one ${suffixAndSubtext(size)} ${cardBadge()}
</sbb-checkbox-panel>
${innerContent()}
</sbb-selection-expansion-panel>
<sbb-selection-expansion-panel ${sbbSpread(args)}>
<sbb-checkbox-panel ?disabled=${disabledInput}>
Value two ${suffixAndSubtext()} ${cardBadge()}
Value two ${suffixAndSubtext(size)} ${cardBadge()}
</sbb-checkbox-panel>
${innerContent()}
</sbb-selection-expansion-panel>
<sbb-selection-expansion-panel ${sbbSpread(args)}>
<sbb-checkbox-panel> Value three ${suffixAndSubtext()} ${cardBadge()} </sbb-checkbox-panel>
<sbb-checkbox-panel>
Value three ${suffixAndSubtext(size)} ${cardBadge()}
</sbb-checkbox-panel>
${innerContent()}
</sbb-selection-expansion-panel>
${sbbFormError}
Expand Down Expand Up @@ -439,21 +443,21 @@ const WithRadiosErrorMessageTemplate = ({
>
<sbb-selection-expansion-panel ${sbbSpread(args)}>
<sbb-radio-button-panel value="Value one" ?checked=${checkedInput}>
Value one ${suffixAndSubtext()} ${cardBadge()}
Value one ${suffixAndSubtext(size)} ${cardBadge()}
</sbb-radio-button-panel>
${innerContent()}
</sbb-selection-expansion-panel>
<sbb-selection-expansion-panel ${sbbSpread(args)}>
<sbb-radio-button-panel value="Value two" ?disabled=${disabledInput}>
Value two ${suffixAndSubtext()} ${cardBadge()}
Value two ${suffixAndSubtext(size)} ${cardBadge()}
</sbb-radio-button-panel>
${innerContent()}
</sbb-selection-expansion-panel>
<sbb-selection-expansion-panel ${sbbSpread(args)}>
<sbb-radio-button-panel value="Value three">
Value three ${suffixAndSubtext()} ${cardBadge()}
Value three ${suffixAndSubtext(size)} ${cardBadge()}
</sbb-radio-button-panel>
${innerContent()}
</sbb-selection-expansion-panel>
Expand Down

0 comments on commit cd589ab

Please sign in to comment.