diff --git a/packages/styles/src/rating-indicator.scss b/packages/styles/src/rating-indicator.scss index 64d02d4881..8652eef91c 100644 --- a/packages/styles/src/rating-indicator.scss +++ b/packages/styles/src/rating-indicator.scss @@ -5,215 +5,118 @@ $block: #{$fd-namespace}-rating-indicator; -@mixin fd-rating-indicator-with-half-star($icon-font-size, $spacing-between-icons) { - .#{$block} { - &__input { - width: calc(#{$icon-font-size} * 0.5); - height: $icon-font-size; - } - - &__label { - margin-inline-end: 0; - - &:nth-child(4n + 6) { - margin-inline-end: $spacing-between-icons; - flex-direction: row-reverse; - } - - &:last-child { - margin-inline-end: 0; - } - - overflow: hidden; - width: calc(#{$icon-font-size} * 0.5); - } - - &--icon { - .#{$block}__label { - width: calc(#{$icon-font-size} * 0.5); - } - } - - @include fd-rating-indicator-labels-after-checked() { - width: calc((var(--fontSize) * var(--fdRating_Indicator_View_Mode_Unselected_Icon_Size_Ratio)) * 0.5); - } - } - - &.#{$block}--display-mode, - &.#{$block}--non-interactive, - // Cannot use disabled mixin due to additional classes. - &[aria-disabled="true"], - &.is-disabled, - &:disabled { - @include fd-rating-indicator-first-half-label-after-checked() { - width: calc(var(--fontSize) * 0.5); - - &::before { - font-size: var(--fontSize); - } - .#{$block}__label { - &-unrated { - &::before { - font-size: var(--fontSize); - } +.#{$block} { + --ratingIndicator_Opacity: 1; + --ratingIndicator_Opacity_Hover: 0.9; + --ratingIndicator_Cursor: pointer; + --ratingIndicator_Font_Size: 1.5rem; + --ratingIndicator_Inline_Spacing: 0; + --ratingIndicator_Item_Spacing: 0.1875rem; + --ratingIndicator_Margin_Block: 0.8125rem; + --ratingIndicator_Margin_Block_Compact: 0.8125rem; + --ratingIndicator_Color: var(--sapContent_UnratedColor); + --ratingIndicator_Container_Outline: var(--sapContent_FocusWidth) var(--sapContent_FocusStyle) var(--sapContent_FocusColor); + + @mixin rating-indicator-unselected-items-readonly-disabled($font-size, $spacing) { + @include fd-readonly() { + .fd-rating-indicator__item { + &:has(.fd-rating-indicator__icon--unselected + .fd-rating-indicator__icon--unselected) { + --ratingIndicator_Font_Size: #{$font-size}; + --ratingIndicator_Inline_Spacing: #{$spacing}; } } } - @include fd-rating-indicator-labels-after-checked() { - width: calc((var(--fontSize) * var(--fdRating_Indicator_View_Mode_Unselected_Icon_Size_Ratio)) * 0.5); - .#{$block}__label { - &-unrated { - &::before { - font-size: - calc( - var(--fontSize) * var(--fdRating_Indicator_View_Mode_Unselected_Icon_Size_Ratio) - ); - } + @include fd-disabled() { + .fd-rating-indicator__item { + &:has(.fd-rating-indicator__icon--unselected + .fd-rating-indicator__icon--unselected) { + --ratingIndicator_Font_Size: #{$font-size}; + --ratingIndicator_Inline_Spacing: #{$spacing}; } } } } -} - -@mixin fd-rating-indicator-first-half-label-after-checked() { - .#{$block}__input:nth-child(4n + 3):checked + .#{$block}__label + .#{$block}__input + .#{$block}__label { - @content; - } -} - -@mixin fd-rating-indicator-labels-after-checked() { - .#{$block}__input:checked ~ .#{$block}__input + .#{$block}__label { - @content; - } -} - -.#{$block} { - $fd-rating-indicator-sizes: ( - 'cozy': ( - 'fontSize': 1.5rem, - 'spacingBetweenIcons': 0.1875rem, - 'controlMargin': 0.8125rem - ), - 'compact': ( - 'fontSize': 1rem, - 'spacingBetweenIcons': 0.125rem, - 'controlMargin': 0.5rem - ), - 'condensed': ( - 'fontSize': 1rem, - 'spacingBetweenIcons': 0.125rem - ), - 'xs': ( - 'fontSize': 0.75rem, - 'spacingBetweenIcons': 1px - ), - 'sm': ( - 'fontSize': 1rem, - 'spacingBetweenIcons': 0.125rem - ), - 'md': ( - 'fontSize': 1.375rem, - 'spacingBetweenIcons': 0.1875rem - ), - 'lg': ( - 'fontSize': 2rem, - 'spacingBetweenIcons': 0.25rem - ) - ); - $fd-rating-indicator-default-size: map.get($fd-rating-indicator-sizes, 'md'); - - --fontSize: #{map.get($fd-rating-indicator-default-size, 'fontSize')}; - --spacingBetweenIcons: #{map.get($fd-rating-indicator-default-size, 'spacingBetweenIcons')}; - - $fd-rating-indicator-dynamic-text-space: 0.5rem; @include fd-reset(); - @include fd-flex-center(); - @include fd-reset-spacing(); - @each $set-name, $size-set in $fd-rating-indicator-sizes { - &--#{$set-name} { - --fontSize: #{map.get($size-set, 'fontSize')}; - --spacingBetweenIcons: #{map.get($size-set, 'spacingBetweenIcons')}; + @include fd-inline-flex-vertical-center() { + gap: 0.5rem; + }; - $control-margin: map.get($size-set, 'controlMargin'); + margin-inline: 0; + margin-block: var(--ratingIndicator_Margin_Block); + opacity: var(--ratingIndicator_Opacity); + cursor: var(--ratingIndicator_Cursor); - @if $control-margin { - margin-block: $control-margin; - margin-inline: 0; - } - } + @include fd-compact-or-condensed() { + margin-block: var(--ratingIndicator_Margin_Block_Compact); } - position: relative; - &__container { - border-radius: var(--fdRating_Indicator_Border_Radius); - @include fd-reset(); + @include fd-inline-flex-vertical-center(); - @include fd-fiori-focus-within(var(--fdRating_Indicator_Focus_Outline_Offset, 0)) { - // do not show outline for each rating item - // keeping it this way in order to preserve fallback behavior for IE - .#{$block}__label, - .#{$block}__input { - outline: none !important; - } + border-radius: var(--fdRatingIndicator_Container_Border_Radius); + + @include fd-focus() { + outline-offset: 0.1875rem; + outline: var(--ratingIndicator_Container_Outline); } } - &__input { + &__list { @include fd-reset(); + + @include fd-inline-flex-vertical-center() { + gap: var(--ratingIndicator_Item_Spacing); + }; - position: absolute; - opacity: 0.0001; - z-index: -1; - top: 0; - width: var(--fontSize); - height: var(--fontSize); - - &:checked { - // focus for each individual star - // will be applied only in IE - @include fd-fiori-focus(0) { - + .#{$block}__label { - outline-offset: 0; - outline: var(--sapContent_FocusColor) var(--sapContent_FocusStyle) var(--sapContent_FocusWidth); - } - } - } + list-style-type: none; } - &__label { + &__item { @include fd-reset(); - @include fd-action-cursor(); - @include fd-flex-vertical-center(); + @include fd-inline-flex-center(); - @include fd-icon-glyph('favorite') { - font-family: SAP-icons; - color: var(--sapContent_RatedColor); - font-size: var(--fontSize); + position: relative; + width: var(--ratingIndicator_Font_Size); + height: var(--ratingIndicator_Font_Size); + margin-inline: var(--ratingIndicator_Inline_Spacing); + } + + &__icon { + &[class*="sap-icon"] { + color: var(--ratingIndicator_Color); + font-size: var(--ratingIndicator_Font_Size, 1.5rem); + box-shadow: var(--sapContent_TextShadow); } + + position: absolute; - float: left; - opacity: 1; - height: var(--fontSize); - margin-inline-end: var(--spacingBetweenIcons); + &:first-child { + clip-path: inset(0 50% 0 0); + left: 0; - &:last-child { - margin-inline-end: 0; + @include fd-rtl() { + clip-path: inset(0 0 0 50%); + left: auto; + right: 0; + } } - &:hover::before { - opacity: var(--fdRating_Indicator_Selected_Hover_Opacity); - transition: opacity $fd-animation-speed ease-in; + &:last-child { + clip-path: inset(0 0 0 50%); + left: 0; + + @include fd-rtl() { + clip-path: inset(0 50% 0 0); + left: auto; + right: 0; + } } - } - @include fd-rating-indicator-labels-after-checked() { - @include fd-icon-glyph('unfavorite') { - color: var(--sapContent_UnratedColor); + &--selected { + --ratingIndicator_Color: var(--sapContent_RatedColor); } } @@ -223,116 +126,61 @@ $block: #{$fd-namespace}-rating-indicator; font-size: var(--sapFontSmallSize); color: var(--sapContent_LabelColor); - margin-inline-start: $fd-rating-indicator-dynamic-text-space; } - &--hide-dynamic-text { - > .#{$block}__dynamic-text { - display: none; - } + // States + @include fd-hover() { + opacity: var(--ratingIndicator_Opacity_Hover); } - @include fd-rtl() { - .#{$block}__label { - float: right; - } + @include fd-readonly() { + --ratingIndicator_Cursor: auto; + --ratingIndicator_Opacity_Hover: 1; } @include fd-disabled() { - pointer-events: none; - opacity: var(--fdRating_Indicator_Disabled_Control_Opacity); - - .#{$block}__input { - @include fd-icon-glyph('favorite') { - color: var(--fdRating_Indicator_Disabled_Selected_Color); - } - } - - @include fd-rating-indicator-labels-after-checked() { - @include fd-icon-glyph('favorite') { - color: var(--fdRating_Indicator_Disabled_Unselected_Color); - font-size: calc(var(--fontSize) * var(--fdRating_Indicator_View_Mode_Unselected_Icon_Size_Ratio)); - } - } + --ratingIndicator_Cursor: auto; + --ratingIndicator_Container_Outline: none; + --ratingIndicator_Opacity: var(--sapContent_DisabledOpacity); + --ratingIndicator_Opacity_Hover: var(--sapContent_DisabledOpacity); } - &--display-mode { - --fontSize: 1rem; + @include rating-indicator-unselected-items-readonly-disabled(1.125rem, 0.1875rem); - .#{$block}__label { - margin-inline-end: 0.125rem; + // Sizes + &--lg { + @include rating-indicator-unselected-items-readonly-disabled(2rem, 0); - @include fd-icon-glyph('favorite') { - font-size: var(--fontSize); - color: var(--fdRating_Indicator_Display_Only_Selected_Color); - } - } + --ratingIndicator_Margin_Block: 0.75rem; + --ratingIndicator_Margin_Block_Compact: 0.5rem; + --ratingIndicator_Font_Size: 2rem; + --ratingIndicator_Item_Spacing: 0.25rem; } - &--non-interactive, - &--display-mode { - pointer-events: none; + &--md { + @include rating-indicator-unselected-items-readonly-disabled(1.5rem, 0); - @include fd-rating-indicator-labels-after-checked() { - @include fd-icon-glyph('favorite') { - color: var(--sapContent_UnratedColor); - font-size: calc(var(--fontSize) * var(--fdRating_Indicator_View_Mode_Unselected_Icon_Size_Ratio)); - } - } + --ratingIndicator_Margin_Block: 0.75rem; + --ratingIndicator_Margin_Block_Compact: 0.5rem; + --ratingIndicator_Font_Size: 1.5rem; + --ratingIndicator_Item_Spacing: 0.1875rem; } - &--icon { - .#{$block}__label { - &::after, - &::before { - content: none !important; - } - - width: var(--fontSize); - height: var(--fontSize); + &--sm { + @include rating-indicator-unselected-items-readonly-disabled(1.375rem, 0); - &-rated, - &-unrated { - font-size: var(--fontSize); - height: 100%; - line-height: 1; - } - - &-unrated { - display: none; - } - } - - @include fd-rating-indicator-labels-after-checked() { - .#{$block}__label { - &-rated { - display: none; - } - - &-unrated { - display: block; - } - } - } + --ratingIndicator_Margin_Block: 0.75rem; + --ratingIndicator_Margin_Block_Compact: 0.5rem; + --ratingIndicator_Font_Size: 1.375rem; + --ratingIndicator_Item_Spacing: 0.1875rem; } - // ************ BLOCK MODIFIERS ************ - &--half-star { - @include fd-rating-indicator-with-half-star(var(--fontSize), var(--spacingBetweenIcons)); - } + &--xs { + @include rating-indicator-unselected-items-readonly-disabled(0.75rem, 0); - &[class*='#{$block}--'] &__input, - &[class*='#{$block}--'] &__label, - &__input, - &__label { - &--zero-rating { - padding-inline: 0; - padding-block: 0; - margin-inline: 0; - margin-block: 0; - width: 0; - overflow: hidden; - opacity: 0.0001; - } + --ratingIndicator_Margin_Block: 0.75rem; + --ratingIndicator_Margin_Block_Compact: 0.5rem; + --ratingIndicator_Font_Size: 0.75rem; + --ratingIndicator_Item_Spacing: 0.0625rem; } } diff --git a/packages/styles/src/theming/common/rating-indicator/_sap_fiori.scss b/packages/styles/src/theming/common/rating-indicator/_sap_fiori.scss index 94afede6d2..bc82b51a80 100644 --- a/packages/styles/src/theming/common/rating-indicator/_sap_fiori.scss +++ b/packages/styles/src/theming/common/rating-indicator/_sap_fiori.scss @@ -1,15 +1,5 @@ @use "sass:map"; :root { - /* Default mode */ - --fdRating_Indicator_Selected_Hover_Opacity: 0.9; - - /* Display Only mode */ - --fdRating_Indicator_Display_Only_Selected_Color: var(--sapTextColor); - - /* Disabled mode */ - --fdRating_Indicator_Disabled_Selected_Color: var(--sapContent_RatedColor); - --fdRating_Indicator_Disabled_Unselected_Color: var(--sapContent_UnratedColor); - --fdRating_Indicator_Disabled_Control_Opacity: 0.4; - --fdRating_Indicator_View_Mode_Unselected_Icon_Size_Ratio: 1; + --fdRatingIndicator_Container_Border_Radius: 0; } diff --git a/packages/styles/src/theming/common/rating-indicator/_sap_fiori_hc.scss b/packages/styles/src/theming/common/rating-indicator/_sap_fiori_hc.scss deleted file mode 100644 index 01087c648c..0000000000 --- a/packages/styles/src/theming/common/rating-indicator/_sap_fiori_hc.scss +++ /dev/null @@ -1,15 +0,0 @@ -@use "sass:map"; - -@import "sap_fiori"; - -:root { - --fdRating_Indicator_Selected_Hover_Opacity: 1; - - /* Display Only mode */ - --fdRating_Indicator_Display_Only_Selected_Color: var(--sapContent_IconColor); - - /* Disabled mode */ - --fdRating_Indicator_Disabled_Selected_Color: var(--sapContent_DisabledTextColor); - --fdRating_Indicator_Disabled_Unselected_Color: var(--sapContent_DisabledTextColor); - --fdRating_Indicator_Disabled_Control_Opacity: 1; -} diff --git a/packages/styles/src/theming/common/rating-indicator/_sap_horizon.scss b/packages/styles/src/theming/common/rating-indicator/_sap_horizon.scss index 26dd202550..08d1f9f3d2 100644 --- a/packages/styles/src/theming/common/rating-indicator/_sap_horizon.scss +++ b/packages/styles/src/theming/common/rating-indicator/_sap_horizon.scss @@ -1,17 +1,5 @@ @use "sass:map"; :root { - /* Default mode */ - --fdRating_Indicator_Selected_Hover_Opacity: 0.9; - - /* Display Only mode */ - --fdRating_Indicator_Display_Only_Selected_Color: var(--sapTextColor); - - /* Disabled mode */ - --fdRating_Indicator_Disabled_Selected_Color: var(--sapContent_RatedColor); - --fdRating_Indicator_Disabled_Unselected_Color: var(--sapContent_UnratedColor); - --fdRating_Indicator_Disabled_Control_Opacity: 0.4; - --fdRating_Indicator_View_Mode_Unselected_Icon_Size_Ratio: 0.75; - --fdRating_Indicator_Border_Radius: 0.25rem; - --fdRating_Indicator_Focus_Outline_Offset: 0.125rem; + --fdRatingIndicator_Container_Border_Radius: 0.25rem; } diff --git a/packages/styles/src/theming/common/rating-indicator/_sap_horizon_hc.scss b/packages/styles/src/theming/common/rating-indicator/_sap_horizon_hc.scss deleted file mode 100644 index e06842e768..0000000000 --- a/packages/styles/src/theming/common/rating-indicator/_sap_horizon_hc.scss +++ /dev/null @@ -1,8 +0,0 @@ -@use "sass:map"; - -@import "sap_horizon"; - -:root { - --fdOverlay_Background_Opacity: 0.6; - --fdRating_Indicator_Border_Radius: 0; -} diff --git a/packages/styles/src/theming/sap_fiori_3_hcb.scss b/packages/styles/src/theming/sap_fiori_3_hcb.scss index e2e349c2ee..c555dd8376 100644 --- a/packages/styles/src/theming/sap_fiori_3_hcb.scss +++ b/packages/styles/src/theming/sap_fiori_3_hcb.scss @@ -30,7 +30,6 @@ @import "./common/radio/sap_fiori_hc"; @import "./common/link/sap_fiori_hc"; @import "./common/vertical-nav/sap_fiori"; -@import "./common/rating-indicator/sap_fiori_hc"; @import "./common/select/sap_fiori"; @import "./common/tile/sap_fiori_hc"; @import "./common/progress-indicator/sap_fiori_hc"; diff --git a/packages/styles/src/theming/sap_fiori_3_hcw.scss b/packages/styles/src/theming/sap_fiori_3_hcw.scss index aa29576fff..0053837efd 100644 --- a/packages/styles/src/theming/sap_fiori_3_hcw.scss +++ b/packages/styles/src/theming/sap_fiori_3_hcw.scss @@ -24,7 +24,6 @@ @import "./common/radio/sap_fiori_hc"; @import "./common/link/sap_fiori_hc"; @import "./common/vertical-nav/sap_fiori"; -@import "./common/rating-indicator/sap_fiori_hc"; @import "./common/select/sap_fiori"; @import "./common/tile/sap_fiori_hc"; @import "./common/progress-indicator/sap_fiori_hc"; diff --git a/packages/styles/src/theming/sap_horizon_hcb.scss b/packages/styles/src/theming/sap_horizon_hcb.scss index 433eff3636..14e69cf634 100644 --- a/packages/styles/src/theming/sap_horizon_hcb.scss +++ b/packages/styles/src/theming/sap_horizon_hcb.scss @@ -24,7 +24,6 @@ @import "./common/radio/sap_horizon_hc"; @import "./common/link/sap_horizon_hc"; @import "./common/vertical-nav/sap_horizon"; -@import "./common/rating-indicator/sap_horizon_hc"; @import "./common/select/sap_horizon_hc"; @import "./common/tile/sap_horizon_hc"; @import "./common/progress-indicator/sap_horizon"; diff --git a/packages/styles/src/theming/sap_horizon_hcw.scss b/packages/styles/src/theming/sap_horizon_hcw.scss index c9a1f6d215..ef85d8319e 100644 --- a/packages/styles/src/theming/sap_horizon_hcw.scss +++ b/packages/styles/src/theming/sap_horizon_hcw.scss @@ -25,7 +25,6 @@ @import "./common/radio/sap_horizon_hc"; @import "./common/link/sap_horizon_hc"; @import "./common/vertical-nav/sap_horizon"; -@import "./common/rating-indicator/sap_horizon_hc"; @import "./common/select/sap_horizon_hc"; @import "./common/tile/sap_horizon_hc"; @import "./common/progress-indicator/sap_horizon"; diff --git a/packages/styles/stories/Components/rating-indicator/basic.example.html b/packages/styles/stories/Components/rating-indicator/basic.example.html new file mode 100644 index 0000000000..4a7653a46f --- /dev/null +++ b/packages/styles/stories/Components/rating-indicator/basic.example.html @@ -0,0 +1,203 @@ +

Default

+
+
+ +
+ (2.5 of 5) +
+ +
+

Hover

+
+
+ +
+ (2.5 of 5) +
+ +
+

Focus

+
+
+ +
+ (2.5 of 5) +
+ +
+

Read Only

+
+
+ +
+ (2.5 of 5) +
+ +
+

Disabled

+
+
+ +
+ (2.5 of 5) +
diff --git a/packages/styles/stories/Components/rating-indicator/custom-icons.example.html b/packages/styles/stories/Components/rating-indicator/custom-icons.example.html deleted file mode 100644 index d94104517d..0000000000 --- a/packages/styles/stories/Components/rating-indicator/custom-icons.example.html +++ /dev/null @@ -1,39 +0,0 @@ -
-
-
- - - - - - - - - - - - - - - - - -
- (2 of 5) -
-
diff --git a/packages/styles/stories/Components/rating-indicator/custom-sizes.example.html b/packages/styles/stories/Components/rating-indicator/custom-sizes.example.html new file mode 100644 index 0000000000..f5938d3ccb --- /dev/null +++ b/packages/styles/stories/Components/rating-indicator/custom-sizes.example.html @@ -0,0 +1,409 @@ +

LG Size

+
+
+ +
+ (2.5 of 5) +
+ +
+

LG Size, Read Only

+
+
+ +
+ (2.5 of 5) +
+ +
+

LG Size, Disabled

+
+
+ +
+ (2.5 of 5) +
+ +

+

MD Size

+
+
+ +
+ (2.5 of 5) +
+ +
+

MD Size, Read Only

+
+
+ +
+ (2.5 of 5) +
+ +
+

MD Size, Disabled

+
+
+ +
+ (2.5 of 5) +
+ +

+

SM Size

+
+
+ +
+ (2.5 of 5) +
+ +
+

SM Size, Read Only

+
+
+ +
+ (2.5 of 5) +
+ +
+

SM Size, Disabled

+
+
+ +
+ (2.5 of 5) +
+ +

+
+

XS Size, Read Only

+
+
+ +
+ (2.5 of 5) +
\ No newline at end of file diff --git a/packages/styles/stories/Components/rating-indicator/different-values.example.html b/packages/styles/stories/Components/rating-indicator/different-values.example.html deleted file mode 100644 index af951dd7a5..0000000000 --- a/packages/styles/stories/Components/rating-indicator/different-values.example.html +++ /dev/null @@ -1,83 +0,0 @@ -
-
-
- - - - - - - - - - - - - - - - - -
- (2 of 5) -
-
- -
-
-
- - - - - - - - - - - - - - - - - - - - -
- (2 of 6) -
-
- -
-
-
- - - - - - - - - - - - - - - - - - - - - - - -
- (2 of 7) -
-
diff --git a/packages/styles/stories/Components/rating-indicator/disabled.example.html b/packages/styles/stories/Components/rating-indicator/disabled.example.html deleted file mode 100644 index 8911b7f9f8..0000000000 --- a/packages/styles/stories/Components/rating-indicator/disabled.example.html +++ /dev/null @@ -1,204 +0,0 @@ -
-

Default:

-
-
- - - - - - - - - - - - - - - - - -
- (2 of 5) -
-
-
-

Default:

-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- (2 of 5) -
-
diff --git a/packages/styles/stories/Components/rating-indicator/display-mode.example.html b/packages/styles/stories/Components/rating-indicator/display-mode.example.html deleted file mode 100644 index 5465ea3b1c..0000000000 --- a/packages/styles/stories/Components/rating-indicator/display-mode.example.html +++ /dev/null @@ -1,204 +0,0 @@ -
-

Default:

-
-
- - - - - - - - - - - - - - - - - -
- (2 of 5) -
-
-
-

Half values:

-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- (2.5 of 5) -
-
diff --git a/packages/styles/stories/Components/rating-indicator/half-values.example.html b/packages/styles/stories/Components/rating-indicator/half-values.example.html deleted file mode 100644 index 6a70b73a00..0000000000 --- a/packages/styles/stories/Components/rating-indicator/half-values.example.html +++ /dev/null @@ -1,182 +0,0 @@ -
- Default: -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- (2.5 of 5) -
-
- -
- Custome icons: -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- (2.5 of 5) -
-
- -
- Custome icons and size --lg: -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- (2.5 of 5) -
-
diff --git a/packages/styles/stories/Components/rating-indicator/non-interactive.example.html b/packages/styles/stories/Components/rating-indicator/non-interactive.example.html deleted file mode 100644 index 5247beb832..0000000000 --- a/packages/styles/stories/Components/rating-indicator/non-interactive.example.html +++ /dev/null @@ -1,205 +0,0 @@ -
-

Default:

-
-
- - - - - - - - - - - - - - - - - -
- (2 of 5) -
-
- -
-

Half values:

-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- (2.5 of 5) -
-
diff --git a/packages/styles/stories/Components/rating-indicator/rating-indicator.stories.js b/packages/styles/stories/Components/rating-indicator/rating-indicator.stories.js index 15b625309f..b24bf32d1e 100644 --- a/packages/styles/stories/Components/rating-indicator/rating-indicator.stories.js +++ b/packages/styles/stories/Components/rating-indicator/rating-indicator.stories.js @@ -1,10 +1,6 @@ -import differentValuesExampleHtml from "./different-values.example.html?raw"; -import nonInteractiveExampleHtml from "./non-interactive.example.html?raw"; -import displayModeExampleHtml from "./display-mode.example.html?raw"; -import disabledExampleHtml from "./disabled.example.html?raw"; -import halfValuesExampleHtml from "./half-values.example.html?raw"; -import customIconsExampleHtml from "./custom-icons.example.html?raw"; -import sizesExampleHtml from "./sizes.example.html?raw"; +import basicExampleHtml from "./basic.example.html?raw"; +import sizesExampleHtml from "./custom-sizes.example.html?raw"; + import '../../../src/rating-indicator.scss'; import '../../../src/icon.scss'; export default { @@ -17,102 +13,22 @@ Although the maximum amount is 7 for the icons or images, it is highly recommend ##Usage Use the rating indicator in forms, tables, or in a dialog box. - `, - tags: ['f3', 'a11y', 'theme'] + ` } }; +export const States = () => basicExampleHtml; + + export const Sizes = () => sizesExampleHtml; Sizes.parameters = { docs: { description: { - story: ` -| **Size** | **rem** | **Modifier class** | -| :---------- | :--------- | -----------------------: | -| Extra small | 0.75rem | \`--xs\` | -| Small | 1rem | \`--sm\` | -| Medium/Default | 1.375rem | _n/a_ | -| Large | 2rem | \`--lg\` | -| Cozy | 1.5rem | \`--cozy\` | -| Compact | 1rem | \`--compact\` | -| Condensed | 1rem | \`--condensed\` | -` - } - } -}; -export const CustomIcons = () => customIconsExampleHtml; -CustomIcons.storyName = 'Custom icons'; -CustomIcons.parameters = { - docs: { - description: { - story: ` -To make the rating indicator to use custom icons needs to be added class \`.fd-rating-indicator--icon\` -to the \`fd-rating-indicator\` element. -Also, you need to set the icon class that will implement the icon -` - } - } -}; -export const HalfValues = () => halfValuesExampleHtml; -HalfValues.storyName = 'Half values'; -HalfValues.parameters = { - docs: { - description: { - story: ` -To display half values with the rating indicator i.e 2.5 stars, add the \`fd-rating-indicator--half-star\` -modifier class together with the \`fd-rating-indicator\` class. -` + story: `| **Size** | **Modifier class** | **Icon size** | **Spacing between icons** | **Note** | +| :---------: |:---------: | :----------: | :-----------------------: | :--------------- | +| L | fd-rating-indicator--lg | 2rem | 0.25rem | Sizes in Editable and non-editable | +| M | fd-rating-indicator--md | 1.5rem | 0.1875rem | Sizes in Editable and non-editable | +| S | fd-rating-indicator--sm | 1.375rem | 0.1875rem | Sizes in Editable and non-editable | +| XS | fd-rating-indicator--xs | 0.75rem | 0.0625rem | Recommended only for Display Only. It is not recommended to use the XS size as an editable rating indicator.
If an editable rating indicator is needed then it is recommended to set the size S or above to be compliant with minimum touch size. |` } } -}; -export const Disabled = () => disabledExampleHtml; -Disabled.parameters = { - docs: { - description: { - story: ` -To disable rating indicator, the \`[disabled]\` attribute needs to be added to all inputs. -Additionally, one of the selectors listed below needs to be added to the \`fd-rating-indicator\` element: - -- \`.is-disabled\` -- \`aria-disabled="true"\` -- \`[disabled]\` -` - } - } -}; -export const DisplayMode = () => displayModeExampleHtml; -DisplayMode.storyName = 'Display mode'; -DisplayMode.parameters = { - docs: { - description: { - story: ` -Data can be presented as label-value field pairs without editable fields in display-only forms, see Form Grid for more details. -If you want to include a rating indicator in a display-only form, add the \`.fd-rating-indicator--display-mode\` to the \`fd-rating-indicator\` element. -` - } - } -}; -export const NonInteractive = () => nonInteractiveExampleHtml; -NonInteractive.storyName = 'Non-interactive'; -NonInteractive.parameters = { - docs: { - description: { - story: ` -If you want to include a rating indicator in a display-only form, -add the \`.fd-rating-indicator--non-interactive\` class to the \`fd-rating-indicator\` element. -` - } - } -}; -export const DifferentValues = () => differentValuesExampleHtml; -DifferentValues.storyName = 'Different values'; -DifferentValues.parameters = { - docs: { - description: { - story: ` -It is possible to display the rating indicator with a different number of values. -It is highly recommended to use 5 as the maximum value, however you can go up to 7 -if it is ideal for your use case. -` - } - } -}; +}; \ No newline at end of file diff --git a/packages/styles/stories/Components/rating-indicator/sizes.example.html b/packages/styles/stories/Components/rating-indicator/sizes.example.html deleted file mode 100644 index f0d04dd6a1..0000000000 --- a/packages/styles/stories/Components/rating-indicator/sizes.example.html +++ /dev/null @@ -1,183 +0,0 @@ -
- Default (Medium): -
-
- - - - - - - - - - - - - - - - - -
- (2 of 5) -
-
- -
- Extra small: -
-
- - - - - - - - - - - - - - - - - -
- - (2 of 5) -
-
- -
- Small: -
-
- - - - - - - - - - - - - - - - - -
- - (2 of 5) -
-
- -
- Large: -
-
- - - - - - - - - - - - - - - - - -
- (2 of 5) -
-
- -
- Cozy: -
-
- - - - - - - - - - - - - - - - - -
- (2 of 5) -
-
- -
- Compact: -
-
- - - - - - - - - - - - - - - - - -
- (2 of 5) -
-
- -
- Condensed: -
-
- - - - - - - - - - - - - - - - - -
- (2 of 5) -
-
diff --git a/packages/styles/tests/__snapshots__/styles.test.ts.snap b/packages/styles/tests/__snapshots__/styles.test.ts.snap index 7bcd382e23..437199ea7a 100644 --- a/packages/styles/tests/__snapshots__/styles.test.ts.snap +++ b/packages/styles/tests/__snapshots__/styles.test.ts.snap @@ -37281,1131 +37281,622 @@ exports[`Check stories > Components/Quick View > Story Popover > Should match sn " `; -exports[`Check stories > Components/Rating Indicator > Story CustomIcons > Should match snapshot 1`] = ` -"
-
-
- - - - - - - - - - - - - - - - - -
- (2 of 5) -
-
-" -`; - -exports[`Check stories > Components/Rating Indicator > Story DifferentValues > Should match snapshot 1`] = ` -"
-
-
- - - - - - - - - - - - - - - - - -
- (2 of 5) -
-
- -
-
-
- - - - - - - - - - - - - - - - - - - - -
- (2 of 6) -
-
- -
-
-
- - - - - - - - - - - - - - - - - - - - - - - -
- (2 of 7) -
-
-" -`; - -exports[`Check stories > Components/Rating Indicator > Story Disabled > Should match snapshot 1`] = ` -"
-

Default:

-
-
- - - - - - - - - - - - - - - - - -
- (2 of 5) -
-
-
-

Default:

-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- (2 of 5) -
-
-" -`; - -exports[`Check stories > Components/Rating Indicator > Story DisplayMode > Should match snapshot 1`] = ` -"
-

Default:

-
-
- - - - - - - - - - - - - - - - - -
- (2 of 5) -
-
-
-

Half values:

-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- (2.5 of 5) -
-
-" -`; - -exports[`Check stories > Components/Rating Indicator > Story HalfValues > Should match snapshot 1`] = ` -"
- Default: -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- (2.5 of 5) -
-
- -
- Custome icons: -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- (2.5 of 5) -
-
- -
- Custome icons and size --lg: -
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- (2.5 of 5) -
-
-" -`; - -exports[`Check stories > Components/Rating Indicator > Story NonInteractive > Should match snapshot 1`] = ` -"
-

Default:

-
-
- - - - - - - - - - - - - - - - - -
- (2 of 5) +exports[`Check stories > Components/Rating Indicator > Story Sizes > Should match snapshot 1`] = ` +"

LG Size

+
+
+
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+ (2.5 of 5)
-
-

Half values:

-
-
- - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
- (2.5 of 5) -
+
+

LG Size, Read Only

+
+
+
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+
+ (2.5 of 5)
-" -`; - -exports[`Check stories > Components/Rating Indicator > Story Sizes > Should match snapshot 1`] = ` -"
- Default (Medium): -
-
- - - - - - - - - - - - - - - - -
- (2 of 5) -
+
+

LG Size, Disabled

+
+
+
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+ (2.5 of 5) +
-
- Extra small: -
-
- - - - - - - - - - - - - - - - - -
- - (2 of 5) -
+

+

MD Size

+
+
+
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+ (2.5 of 5) +
-
- Small: -
-
- - - - - - - - - - - - - - - - - -
- - (2 of 5) -
+
+

MD Size, Read Only

+
+
+
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+ (2.5 of 5) +
-
- Large: -
-
- - - - - - - - - - - - - - - - - -
- (2 of 5) -
+
+

MD Size, Disabled

+
+
+
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+ (2.5 of 5) +
-
- Cozy: -
-
- - - - - - - - - - - - - - - - - -
- (2 of 5) -
+

+

SM Size

+
+
+
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+ (2.5 of 5) +
-
- Compact: -
-
- - - - - - - - - - - - - - +
+

SM Size, Read Only

+
+
+
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+
+ (2.5 of 5) +
- - -
- (2 of 5) -
+
+

SM Size, Disabled

+
+
+
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+ (2.5 of 5) +
-
- Condensed: -
-
- - +

+
+

XS Size, Read Only

+
+
+
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+
+ (2.5 of 5) +
" +`; - - +exports[`Check stories > Components/Rating Indicator > Story States > Should match snapshot 1`] = ` +"

Default

+
+
+
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+
+ (2.5 of 5) +
- - +
+

Hover

+
+
+
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+
+ (2.5 of 5) +
- - +
+

Focus

+
+
+
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+
+ (2.5 of 5) +
- - +
+

Read Only

+
+
+
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+
+ (2.5 of 5) +
- - -
- (2 of 5) -
+
+

Disabled

+
+
+
    +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
  • + + +
    • +
+ (2.5 of 5) +
" `;