Merged master into feature branch; renamed range to slider

packages/components-react/lib/components/stencil-generated/index.ts

@@ -46,12 +46,12 @@ export const IfxNavbarMenuItem = /*@__PURE__*/createReactComponent<JSX.IfxNavbar
 export const IfxNumberIndicator = /*@__PURE__*/createReactComponent<JSX.IfxNumberIndicator, HTMLIfxNumberIndicatorElement>('ifx-number-indicator');
 export const IfxProgressBar = /*@__PURE__*/createReactComponent<JSX.IfxProgressBar, HTMLIfxProgressBarElement>('ifx-progress-bar');
 export const IfxRadioButton = /*@__PURE__*/createReactComponent<JSX.IfxRadioButton, HTMLIfxRadioButtonElement>('ifx-radio-button');
-export const IfxRange = /*@__PURE__*/createReactComponent<JSX.IfxRange, HTMLIfxRangeElement>('ifx-range');
 export const IfxSearchBar = /*@__PURE__*/createReactComponent<JSX.IfxSearchBar, HTMLIfxSearchBarElement>('ifx-search-bar');
 export const IfxSearchInput = /*@__PURE__*/createReactComponent<JSX.IfxSearchInput, HTMLIfxSearchInputElement>('ifx-search-input');
 export const IfxSelectInput = /*@__PURE__*/createReactComponent<JSX.IfxSelectInput, HTMLIfxSelectInputElement>('ifx-select-input');
 export const IfxSidebar = /*@__PURE__*/createReactComponent<JSX.IfxSidebar, HTMLIfxSidebarElement>('ifx-sidebar');
 export const IfxSidebarItem = /*@__PURE__*/createReactComponent<JSX.IfxSidebarItem, HTMLIfxSidebarItemElement>('ifx-sidebar-item');
+export const IfxSlider = /*@__PURE__*/createReactComponent<JSX.IfxSlider, HTMLIfxSliderElement>('ifx-slider');
 export const IfxSpinner = /*@__PURE__*/createReactComponent<JSX.IfxSpinner, HTMLIfxSpinnerElement>('ifx-spinner');
 export const IfxStatus = /*@__PURE__*/createReactComponent<JSX.IfxStatus, HTMLIfxStatusElement>('ifx-status');
 export const IfxSwitch = /*@__PURE__*/createReactComponent<JSX.IfxSwitch, HTMLIfxSwitchElement>('ifx-switch');

packages/components-vue/lib/components.ts

@@ -275,20 +275,6 @@ export const IfxRadioButton = /*@__PURE__*/ defineContainer<JSX.IfxRadioButton>(
 ]);
 
 
-export const IfxRange = /*@__PURE__*/ defineContainer<JSX.IfxRange>('ifx-range', undefined, [
-  'min',
-  'max',
-  'value',
-  'disabled',
-  'showPercentage',
-  'leftIcon',
-  'rightIcon',
-  'leftText',
-  'rightText',
-  'ifxChanged'
-]);
-
-
 export const IfxSearchBar = /*@__PURE__*/ defineContainer<JSX.IfxSearchBar, JSX.IfxSearchBar["value"]>('ifx-search-bar', undefined, [
   'icon',
   'showCloseButton',
@@ -328,6 +314,20 @@ export const IfxSidebarItem = /*@__PURE__*/ defineContainer<JSX.IfxSidebarItem>(
 ]);
 
 
+export const IfxSlider = /*@__PURE__*/ defineContainer<JSX.IfxSlider>('ifx-slider', undefined, [
+  'min',
+  'max',
+  'value',
+  'disabled',
+  'showPercentage',
+  'leftIcon',
+  'rightIcon',
+  'leftText',
+  'rightText',
+  'ifxChanged'
+]);
+
+
 export const IfxSpinner = /*@__PURE__*/ defineContainer<JSX.IfxSpinner>('ifx-spinner', undefined, [
   'size',
   'variant'

packages/components/src/components/icon/readme.md

@@ -39,10 +39,10 @@
  - [ifx-multi-select-input-item](../multi-select-input)
  - [ifx-navbar](../navbar)
  - [ifx-navbar-menu-item](../navbar)
- - [ifx-range](../range)
  - [ifx-search-bar](../search-bar)
  - [ifx-search-input](../search-input)
  - [ifx-sidebar-item](../sidebar)
+ - [ifx-slider](../slider)
  - [ifx-text-input](../text-input)
 
 ### Graph
@@ -63,10 +63,10 @@ graph TD;
   ifx-multi-select-input-item --> ifx-icon
   ifx-navbar --> ifx-icon
   ifx-navbar-menu-item --> ifx-icon
-  ifx-range --> ifx-icon
   ifx-search-bar --> ifx-icon
   ifx-search-input --> ifx-icon
   ifx-sidebar-item --> ifx-icon
+  ifx-slider --> ifx-icon
   ifx-text-input --> ifx-icon
   style ifx-icon fill:#f9f,stroke:#333,stroke-width:4px
 ```

packages/components/src/components/slider/Usage.mdx

@@ -0,0 +1,71 @@
+
+import { Meta } from '@storybook/blocks';
+
+import * as SliderStories from './slider.stories';
+
+import RangeSliderDefault from '../../../public-storybook/images/slider/range-slider-default.png';
+import RangeSliderStates from '../../../public-storybook/images/slider/range-slider-states.png';
+import SliderAnatomy from '../../../public-storybook/images/slider/slider-anatomy.png';
+import SliderDefault from '../../../public-storybook/images/slider/slider-default.png';
+import SliderStates from '../../../public-storybook/images/slider/slider-states.png';
+import SliderVariants from '../../../public-storybook/images/slider/slider-variants.png';
+
+<Meta of={SliderStories} /> 
+
+# Slider
+The slider component allows users to select a value or a range of values within a specified numeric range. It provides a visual representation of a continuous scale with adjustable handles, enabling users to slide and select desired values.
+
+## Usage
+
+### When to use
+- When you need to allow users to select a specific value or a range of values within a defined numeric range.
+- When precise control over the selected values is required, such as input ranges.
+
+### When not to use
+- If the range of values is extremely limited or has a small number of discrete options.
+- If the input requires highly precise or specific numeric values.
+- If the available space for the range slider component is constrained, and displaying the full range or a large number of values becomes visually challenging.
+- If the numeric range is complex or non-linear, with varying intervals or irregular increments.
+
+## Types
+
+### Slider
+This variant allows users to select a single value within a specified range. It consists of a track and a draggable thumb that can be moved along the track to set the desired value.
+<img src={SliderDefault} alt="Slider Default" width="50%" />
+
+#### Variants
+Depending on use cases, there are various value options which can be displayed.
+<img src={SliderVariants} alt="Slider Variants" />
+
+#### States
+<img src={SliderStates} alt="Slider States" />
+
+### Range Slider
+This variant allows users to select a range of values within a specified numeric range. It consists of a track and two draggable thumbs that can be adjusted to set the desired range.
+<img src={RangeSliderDefault} alt="Range Slider Default" width="50%" />
+
+
+#### States
+<img src={RangeSliderStates} alt="Range Slider States" />
+
+## Anatomy
+<img src={SliderAnatomy} alt="Slider Anatomy" />
+
+**Label (1)**
+Labels are optional but often included to provide textual representations of the minimum, maximum, or selected values on the slider. These labels are located above the slider component.
+
+**Fill (2)**
+The colored portion of the track that represents the selected amount.
+
+**Handle (3)**
+The draggable element that users can interact with to select a specific value or range on the slider. It moves along the track as the user drags it.
+
+**Track (4)**
+The horizontal bar that represents the entire range of values that the slider can span.
+
+**Range Slider (5)**
+In the range slider, the fill is the colored portion of the track that represents the selected range between the minimum and maximum values. It visually fills the space between the two handles, indicating the selected range.
+
+***
+Check out the Figma component: **[Slider](https://www.figma.com/file/zPvPwPgb4EsYFXKC2nhzSG/Infineon-DDS-%7C-Main?type=design&node-id=15273-6407&mode=design&t=2lNZOOqATnlJOKBG-4)**.
+***

packages/components/src/components/range/readme.md → packages/components/src/components/slider/readme.md

@@ -36,8 +36,8 @@
 ### Graph
 ```mermaid
 graph TD;
-  ifx-range --> ifx-icon
-  style ifx-range fill:#f9f,stroke:#333,stroke-width:4px
+  ifx-slider --> ifx-icon
+  style ifx-slider fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
 ----------------------------------------------

packages/components/src/components/range/range.e2e.tsx → packages/components/src/components/slider/slider.e2e.tsx

@@ -1,29 +1,29 @@
 import { newE2EPage } from '@stencil/core/testing';
 
-describe('ifx-range', () => {
+describe('ifx-slider', () => {
     it('renders', async () => {
         const page = await newE2EPage();
-        await page.setContent('<ifx-range></ifx-range>');
+        await page.setContent('<ifx-slider></ifx-slider>');
 
-        const element = await page.find('ifx-range');
+        const element = await page.find('ifx-slider');
         expect(element).toHaveClass('hydrated');
     });
 
     it('renders changes to the value data', async () => {
         const page = await newE2EPage();
-        await page.setContent('<ifx-range value="50"></ifx-range>');
+        await page.setContent('<ifx-slider value="50"></ifx-slider>');
 
-        const element = await page.find('ifx-range >>> input');
+        const element = await page.find('ifx-slider >>> input');
 
         const value = await element.getProperty('value');
         expect(value).toEqual('50');
     });
 
     it('handles input change', async () => {
         const page = await newE2EPage();
-        await page.setContent('<ifx-range></ifx-range>');
+        await page.setContent('<ifx-slider></ifx-slider>');
 
-        const element = await page.find('ifx-range >>> input');
+        const element = await page.find('ifx-slider >>> input');
         await element.press('ArrowRight');
 
         const value = await element.getProperty('value');
@@ -32,42 +32,42 @@ describe('ifx-range', () => {
 
     it('disables when the disabled property is set', async () => {
         const page = await newE2EPage();
-        await page.setContent('<ifx-range disabled></ifx-range>');
+        await page.setContent('<ifx-slider disabled></ifx-slider>');
 
-        const element = await page.find('ifx-range >>> input');
+        const element = await page.find('ifx-slider >>> input');
         expect(element.getAttribute('disabled')).not.toBeNull();
     });
 
     it('renders left text', async () => {
         const page = await newE2EPage();
-        await page.setContent('<ifx-range left-text="Left Text"></ifx-range>');
+        await page.setContent('<ifx-slider left-text="Left Text"></ifx-slider>');
 
-        const element = await page.find('ifx-range >>> .left-text');
+        const element = await page.find('ifx-slider >>> .left-text');
         expect(element.textContent).toEqual('Left Text');
     });
 
     it('renders right text', async () => {
         const page = await newE2EPage();
-        await page.setContent('<ifx-range right-text="Right Text"></ifx-range>');
+        await page.setContent('<ifx-slider right-text="Right Text"></ifx-slider>');
 
-        const element = await page.find('ifx-range >>> .right-text');
+        const element = await page.find('ifx-slider >>> .right-text');
         expect(element.textContent).toEqual('Right Text');
     });
 
     it('renders percentage if showPercentage is true', async () => {
         const page = await newE2EPage();
-        await page.setContent('<ifx-range value="30" show-percentage></ifx-range>');
+        await page.setContent('<ifx-slider value="30" show-percentage></ifx-slider>');
 
-        const element = await page.find('ifx-range >>> .percentage-display');
+        const element = await page.find('ifx-slider >>> .percentage-display');
         expect(element.textContent).toEqual('30%');
     });
 
     it('emits the ifxChanged event when the input changes', async () => {
         const page = await newE2EPage();
-        await page.setContent('<ifx-range value="50"></ifx-range>');
+        await page.setContent('<ifx-slider value="50"></ifx-slider>');
         const spy = await page.spyOnEvent('ifxChanged');
 
-        const input = await page.find('ifx-range >>> input');
+        const input = await page.find('ifx-slider >>> input');
         await input.press('ArrowRight');
 
         expect(spy).toHaveReceivedEventDetail(51);

packages/components/src/components/range/range.scss → packages/components/src/components/slider/slider.scss

@@ -2,7 +2,7 @@
 @use "../../global/font.scss";
 
 
-// ifx-range.scss
+// ifx-slider.scss
 :host {
   display: inline-block;
 }
@@ -33,7 +33,7 @@
   margin-left: 8px;
 }
 
-.ifx-range {
+.ifx-slider {
   display: flex;
   align-items: center;
   padding: tokens.$spacing-xxs tokens.$spacing-m;

packages/components/src/components/range/range.stories.tsx → packages/components/src/components/slider/slider.stories.tsx

@@ -2,8 +2,8 @@ import { action } from '@storybook/addon-actions';
 import { icons } from '@infineon/infineon-icons'
 
 export default {
-  title: 'Components/Range',
-  component: 'ifx-range',
+  title: 'Components/Slider',
+  component: 'ifx-slider',
   tags: ['autodocs'],
 
   argTypes: {
@@ -26,32 +26,32 @@ export default {
 };
 
 const Template = (args) => {
-  const rangeElement = document.createElement('ifx-range');
-  rangeElement.setAttribute('value', args.value);
-  rangeElement.setAttribute('min', args.min);
-  rangeElement.setAttribute('max', args.max);
+  const sliderElement = document.createElement('ifx-slider');
+  sliderElement.setAttribute('value', args.value);
+  sliderElement.setAttribute('min', args.min);
+  sliderElement.setAttribute('max', args.max);
   if (args.showPercentage) {
-    rangeElement.setAttribute('show-percentage', 'true');
+    sliderElement.setAttribute('show-percentage', 'true');
   }
   if (args.disabled) {
-    rangeElement.setAttribute('disabled', 'true'); // Set disabled attribute
+    sliderElement.setAttribute('disabled', 'true'); // Set disabled attribute
   }
 
   if (args.leftIcon) {
-    rangeElement.setAttribute('left-icon', args.leftIcon);
+    sliderElement.setAttribute('left-icon', args.leftIcon);
   }
   if (args.rightIcon) {
-    rangeElement.setAttribute('right-icon', args.rightIcon);
+    sliderElement.setAttribute('right-icon', args.rightIcon);
   }
   if (args.leftText) {
-    rangeElement.setAttribute('left-text', args.leftText);
+    sliderElement.setAttribute('left-text', args.leftText);
   }
   if (args.rightText) {
-    rangeElement.setAttribute('right-text', args.rightText);
+    sliderElement.setAttribute('right-text', args.rightText);
   }
-  rangeElement.addEventListener('ifxChanged', action('ifxChanged'));
+  sliderElement.addEventListener('ifxChanged', action('ifxChanged'));
 
-  return rangeElement;
+  return sliderElement;
 };
 
 export const Default = Template.bind({});

packages/components/src/components/range/range.tsx → packages/components/src/components/slider/slider.tsx

@@ -1,11 +1,11 @@
 import { Component, h, Prop, Event, EventEmitter, State, Watch } from '@stencil/core';
 
 @Component({
-  tag: 'ifx-range',
-  styleUrl: 'range.scss',
+  tag: 'ifx-slider',
+  styleUrl: 'slider.scss',
   shadow: true,
 })
-export class IfxRange {
+export class IfxSlider {
   @Prop() min: number = 0;
   @Prop() max: number = 100;
   @Prop() value: number = 0;
@@ -51,7 +51,7 @@ export class IfxRange {
 
   render() {
     return (
-      <div class="ifx-range">
+      <div class="ifx-slider">
         {this.leftText && (
           <span class={`left-text`}>
             {this.leftText}