Skip to content

Commit

Permalink
feat(plasma-new-hope): add slider component
Browse files Browse the repository at this point in the history
  • Loading branch information
@TitanKuzmich @iljs
TitanKuzmich authored and iljs committed May 7, 2024
1 parent bed1fc6 commit 7dc941f
Show file tree
Hide file tree
Showing 65 changed files with 3,209 additions and 101 deletions.
Binary file added ...onents/Slider/Slider.component-test.tsx/plasma-web Slider -- _disabled.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...nents/Slider/Slider.component-test.tsx/plasma-web Slider -- _placement.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...components/Slider/Slider.component-test.tsx/plasma-web Slider -- _size.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...components/Slider/Slider.component-test.tsx/plasma-web Slider -- _view.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...omponents/Slider/Slider.component-test.tsx/plasma-web Slider -- simple.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...onents/Slider/Slider.component-test.tsx/plasma-web Slider -- _disabled.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...nents/Slider/Slider.component-test.tsx/plasma-web Slider -- _placement.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...components/Slider/Slider.component-test.tsx/plasma-web Slider -- _size.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...components/Slider/Slider.component-test.tsx/plasma-web Slider -- _view.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added ...omponents/Slider/Slider.component-test.tsx/plasma-web Slider -- simple.snap.png
View file
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
4 changes: 2 additions & 2 deletions packages/caldera-online/api/caldera-online.api.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -231,8 +231,8 @@ id?: string | undefined;
disabled?: boolean | undefined;
label?: ReactNode;
role?: string | undefined;
contentLeft?: string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | FunctionComponent<any> | ReactFragment | ReactPortal | ComponentClass<any, any> | null | undefined;
contentRight?: string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | FunctionComponent<any> | ReactFragment | ReactPortal | ComponentClass<any, any> | null | undefined;
contentLeft?: string | number | boolean | ReactFragment | ReactPortal | ReactElement<any, string | JSXElementConstructor<any>> | FunctionComponent<any> | ComponentClass<any, any> | null | undefined;
contentRight?: string | number | boolean | ReactFragment | ReactPortal | ReactElement<any, string | JSXElementConstructor<any>> | FunctionComponent<any> | ComponentClass<any, any> | null | undefined;
name?: string | undefined;
checked?: boolean | undefined;
text?: string | undefined;
Expand Down
26 changes: 21 additions & 5 deletions packages/plasma-b2c/api/plasma-b2c.api.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -92,6 +92,7 @@ import { defaultValidate } from '@salutejs/plasma-hope';
import { DisabledProps } from '@salutejs/plasma-core';
import { DividerProps } from '@salutejs/plasma-new-hope/styled-components';
import { dividerTokens } from '@salutejs/plasma-new-hope/styled-components';
import { DoubleSliderProps } from '@salutejs/plasma-new-hope/styled-components';
import { DrawerContentProps } from '@salutejs/plasma-new-hope/styled-components';
import { DrawerFooterProps } from '@salutejs/plasma-new-hope/styled-components';
import { DrawerHeaderProps } from '@salutejs/plasma-new-hope/styled-components';
Expand Down Expand Up @@ -199,6 +200,7 @@ import { setRef } from '@salutejs/plasma-core';
import { shadows } from '@salutejs/plasma-core';
import { ShiftProps } from '@salutejs/plasma-core';
import { ShowToastArgs } from '@salutejs/plasma-new-hope/styled-components';
import { SingleSliderProps } from '@salutejs/plasma-new-hope/styled-components';
import { SkeletonGradientProps } from '@salutejs/plasma-core';
import { SkeletonGradientProps as SkeletonGradientProps_2 } from '@salutejs/plasma-new-hope/styled-components';
import { SkeletonSizeProps } from '@salutejs/plasma-new-hope/types/components/Skeleton/Skeleton.types';
Expand Down Expand Up @@ -773,11 +775,11 @@ l: string;
view: {
default: string;
};
}> & ((Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "target" | "onChange" | "size" | "value" | "checked" | "minLength" | "maxLength"> & CustomComboboxProps & {
}> & ((Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "type" | "target" | "size" | "value" | "checked" | "minLength" | "maxLength"> & CustomComboboxProps & {
valueType?: "single" | undefined;
value?: ComboboxPrimitiveValue | undefined;
onChangeValue?: ((value?: ComboboxPrimitiveValue | undefined) => void) | undefined;
} & RefAttributes<HTMLInputElement>) | (Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "target" | "onChange" | "size" | "value" | "checked" | "minLength" | "maxLength"> & CustomComboboxProps & {
} & RefAttributes<HTMLInputElement>) | (Omit<InputHTMLAttributes<HTMLInputElement>, "onChange" | "type" | "target" | "size" | "value" | "checked" | "minLength" | "maxLength"> & CustomComboboxProps & {
valueType: "multiple";
value?: ComboboxPrimitiveValue[] | undefined;
onChangeValue?: ((value?: ComboboxPrimitiveValue[] | undefined) => void) | undefined;
Expand Down Expand Up @@ -1125,7 +1127,7 @@ headline5: string;

// @public
const Image_2: FunctionComponent<PropsType<Variants> & ImgHTMLAttributes<HTMLImageElement> & {
base?: "div" | "img" | undefined;
base?: "img" | "div" | undefined;
ratio?: "16 / 9" | "1 / 1" | "1/1" | "3 / 4" | "3/4" | "4 / 3" | "4/3" | "9 / 16" | "9/16" | "16/9" | "1 / 2" | "1/2" | "2 / 1" | "2/1" | undefined;
customRatio?: string | undefined;
} & RefAttributes<HTMLDivElement>>;
Expand Down Expand Up @@ -1558,8 +1560,22 @@ export { ShowToastArgs }

export { SkeletonGradientProps }

// @public (undocumented)
export const Slider: (props: SliderProps) => JSX.Element;
// @public
export const Slider: FunctionComponent<PropsType< {
view: {
default: string;
accent: string;
gradient: string;
};
size: {
l: string;
m: string;
s: string;
};
disabled: {
true: string;
};
}> & ((SingleSliderProps & RefAttributes<HTMLDivElement>) | (DoubleSliderProps & RefAttributes<HTMLDivElement>))>;

export { SliderProps }

Expand Down
2 changes: 1 addition & 1 deletion packages/plasma-b2c/src/components/Slider/Slider.component-test.tsx
View file
Original file line number Diff line number Diff line change
@@ -1 +1 @@
../../../../plasma-core/src/components/Slider/Slider.component-test.tsx
../../../../plasma-web/src/components/Slider/Slider.component-test.tsx
241 changes: 241 additions & 0 deletions packages/plasma-b2c/src/components/Slider/Slider.config.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,241 @@
import { css, sliderTokens } from '@salutejs/plasma-new-hope/styled-components';

export const config = {
defaults: {
view: 'default',
size: 'm',
},
variations: {
view: {
default: css`
${sliderTokens.labelColor}: var(--text-primary);
${sliderTokens.rangeValueColor}: var(--text-secondary);
${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary);
${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card);
${sliderTokens.thumbFocusBorderColor}: var(--surface-solid-default);
${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary);
${sliderTokens.fillColor}: var(--surface-solid-default);
${sliderTokens.textFieldColor}: var(--text-secondary);
${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-primary);
${sliderTokens.textFieldCaretColor}: var(--text-primary);
${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary);
${sliderTokens.textFiledFocusColor}: var(--text-primary);
${sliderTokens.textFieldActiveColor}: var(--text-primary);
`,
accent: css`
${sliderTokens.labelColor}: var(--text-primary);
${sliderTokens.rangeValueColor}: var(--text-secondary);
${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary);
${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card);
${sliderTokens.thumbFocusBorderColor}: var(--surface-accent);
${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary);
${sliderTokens.fillColor}: var(--surface-accent);
${sliderTokens.textFieldColor}: var(--text-secondary);
${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-primary);
${sliderTokens.textFieldCaretColor}: var(--text-primary);
${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary);
${sliderTokens.textFiledFocusColor}: var(--text-primary);
${sliderTokens.textFieldActiveColor}: var(--text-primary);
`,
gradient: css`
${sliderTokens.labelColor}: var(--text-primary);
${sliderTokens.rangeValueColor}: var(--text-secondary);
${sliderTokens.thumbBorderColor}: var(--surface-solid-tertiary);
${sliderTokens.thumbBackgroundColor}: var(--on-light-surface-solid-card);
${sliderTokens.thumbFocusBorderColor}: var(--surface-accent-gradient);
${sliderTokens.railBackgroundColor}: var(--surface-solid-tertiary);
${sliderTokens.fillColor}: var(--surface-accent-gradient);
${sliderTokens.textFieldColor}: var(--text-secondary);
${sliderTokens.textFieldBackgroundColor}: var(--surface-transparent-primary);
${sliderTokens.textFieldCaretColor}: var(--text-primary);
${sliderTokens.textFieldPlaceholderColor}: var(--text-secondary);
${sliderTokens.textFiledFocusColor}: var(--text-primary);
${sliderTokens.textFieldActiveColor}: var(--text-primary);
`,
},
size: {
l: css`
${sliderTokens.height}: 1.5rem;
${sliderTokens.doubleWrapperGap}: 0.375rem;
${sliderTokens.labelWrapperGap}: 0.25rem;
${sliderTokens.labelWrapperMarginBottom}: 0.25rem;
${sliderTokens.labelWrapperMarginRight}: 0.875rem;
${sliderTokens.labelFontFamily}: var(--plasma-typo-body-l-font-family);
${sliderTokens.labelFontSize}: var(--plasma-typo-body-l-font-size);
${sliderTokens.labelFontStyle}: var(--plasma-typo-body-l-font-style);
${sliderTokens.labelFontWeight}: var(--plasma-typo-body-l-font-weight);
${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
${sliderTokens.labelLineHeight}: var(--plasma-typo-body-l-line-height);
${sliderTokens.rangeMinValueMargin}: 0.75rem;
${sliderTokens.rangeMaxValueMargin}: 0.75rem;
${sliderTokens.rangeValueBottomOffset}: -1.25rem;
${sliderTokens.rangeValueFontFamily}: var(--plasma-typo-body-s-font-family);
${sliderTokens.rangeValueFontSize}: var(--plasma-typo-body-s-font-size);
${sliderTokens.rangeValueFontStyle}: var(--plasma-typo-body-s-font-style);
${sliderTokens.rangeValueFontWeight}: var(--plasma-typo-body-s-font-weight);
${sliderTokens.rangeValueLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
${sliderTokens.rangeValueLineHeight}: var(--plasma-typo-body-s-line-height);
${sliderTokens.thumbSize}: 1.5rem;
${sliderTokens.thumbBorder}: 0.125rem solid;
${sliderTokens.currentValueTopOffset}: 1.625rem;
${sliderTokens.currentValueFontFamily}: var(--plasma-typo-text-s-font-family);
${sliderTokens.currentValueFontSize}: var(--plasma-typo-text-s-font-size);
${sliderTokens.currentValueFontStyle}: var(--plasma-typo-text-s-font-style);
${sliderTokens.currentValueFontWeight}: var(--plasma-typo-text-s-font-weight);
${sliderTokens.currentValueLetterSpacing}: var(--plasma-typo-text-s-letter-spacing);
${sliderTokens.currentValueLineHeight}: var(--plasma-typo-text-s-line-height);
${sliderTokens.railHeight}: 0.25rem;
${sliderTokens.railBorderRadius}: 0.125rem;
${sliderTokens.railIndent}: 0.75rem;
${sliderTokens.textFieldWrapperGap}: 0.125rem;
${sliderTokens.textFieldHeight}: 3.5rem;
${sliderTokens.textFieldPadding}: 1.25rem 1rem 1.25rem 1rem;
${sliderTokens.textFieldBorderRadius}: 0.75rem;
${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-l-font-family);
${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-l-font-size);
${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-l-font-style);
${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-l-font-weight);
${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-l-line-height);
`,
m: css`
${sliderTokens.height}: 1.5rem;
${sliderTokens.doubleWrapperGap}: 0.375rem;
${sliderTokens.labelWrapperGap}: 0.25rem;
${sliderTokens.labelWrapperMarginBottom}: 0.25rem;
${sliderTokens.labelWrapperMarginRight}: 0.875rem;
${sliderTokens.labelFontFamily}: var(--plasma-typo-body-m-font-family);
${sliderTokens.labelFontSize}: var(--plasma-typo-body-m-font-size);
${sliderTokens.labelFontStyle}: var(--plasma-typo-body-m-font-style);
${sliderTokens.labelFontWeight}: var(--plasma-typo-body-m-font-weight);
${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
${sliderTokens.labelLineHeight}: var(--plasma-typo-body-m-line-height);
${sliderTokens.rangeMinValueMargin}: 0.75rem;
${sliderTokens.rangeMaxValueMargin}: 0.75rem;
${sliderTokens.rangeValueBottomOffset}: -1.25rem;
${sliderTokens.rangeValueFontFamily}: var(--plasma-typo-body-s-font-family);
${sliderTokens.rangeValueFontSize}: var(--plasma-typo-body-s-font-size);
${sliderTokens.rangeValueFontStyle}: var(--plasma-typo-body-s-font-style);
${sliderTokens.rangeValueFontWeight}: var(--plasma-typo-body-s-font-weight);
${sliderTokens.rangeValueLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
${sliderTokens.rangeValueLineHeight}: var(--plasma-typo-body-s-line-height);
${sliderTokens.thumbSize}: 1.5rem;
${sliderTokens.thumbBorder}: 0.125rem solid;
${sliderTokens.currentValueTopOffset}: 1.75rem;
${sliderTokens.currentValueFontFamily}: var(--plasma-typo-text-xs-font-family);
${sliderTokens.currentValueFontSize}: var(--plasma-typo-text-xs-font-size);
${sliderTokens.currentValueFontStyle}: var(--plasma-typo-text-xs-font-style);
${sliderTokens.currentValueFontWeight}: var(--plasma-typo-text-xs-font-weight);
${sliderTokens.currentValueLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing);
${sliderTokens.currentValueLineHeight}: var(--plasma-typo-text-xs-line-height);
${sliderTokens.railHeight}: 0.25rem;
${sliderTokens.railBorderRadius}: 0.125rem;
${sliderTokens.railIndent}: 0.75rem;
${sliderTokens.textFieldWrapperGap}: 0.125rem;
${sliderTokens.textFieldHeight}: 3rem;
${sliderTokens.textFieldPadding}: 0.875rem 1rem 0.875rem 1rem;
${sliderTokens.textFieldBorderRadius}: 0.75rem;
${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-m-font-family);
${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-m-font-size);
${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-m-font-style);
${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-m-font-weight);
${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-m-line-height);
`,
s: css`
${sliderTokens.height}: 1rem;
${sliderTokens.doubleWrapperGap}: 0.375rem;
${sliderTokens.labelWrapperGap}: 0.25rem;
${sliderTokens.labelWrapperMarginBottom}: 0.25rem;
${sliderTokens.labelWrapperMarginRight}: 0.875rem;
${sliderTokens.labelFontFamily}: var(--plasma-typo-body-s-font-family);
${sliderTokens.labelFontSize}: var(--plasma-typo-body-s-font-size);
${sliderTokens.labelFontStyle}: var(--plasma-typo-body-s-font-style);
${sliderTokens.labelFontWeight}: var(--plasma-typo-body-s-font-weight);
${sliderTokens.labelLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
${sliderTokens.labelLineHeight}: var(--plasma-typo-body-s-line-height);
${sliderTokens.rangeMinValueMargin}: 0.5rem;
${sliderTokens.rangeMaxValueMargin}: 0.5rem;
${sliderTokens.rangeValueBottomOffset}: -1.25rem;
${sliderTokens.rangeValueFontFamily}: var(--plasma-typo-body-xs-font-family);
${sliderTokens.rangeValueFontSize}: var(--plasma-typo-body-xs-font-size);
${sliderTokens.rangeValueFontStyle}: var(--plasma-typo-body-xs-font-style);
${sliderTokens.rangeValueFontWeight}: var(--plasma-typo-body-xs-font-weight);
${sliderTokens.rangeValueLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
${sliderTokens.rangeValueLineHeight}: var(--plasma-typo-body-xs-line-height);
${sliderTokens.thumbSize}: 1rem;
${sliderTokens.thumbBorder}: 0.125rem solid;
${sliderTokens.currentValueTopOffset}: 1.25rem;
${sliderTokens.currentValueFontFamily}: var(--plasma-typo-text-xs-font-family);
${sliderTokens.currentValueFontSize}: var(--plasma-typo-text-xs-font-size);
${sliderTokens.currentValueFontStyle}: var(--plasma-typo-text-xs-font-style);
${sliderTokens.currentValueFontWeight}: var(--plasma-typo-text-xs-font-weight);
${sliderTokens.currentValueLetterSpacing}: var(--plasma-typo-text-xs-letter-spacing);
${sliderTokens.currentValueLineHeight}: var(--plasma-typo-text-xs-line-height);
${sliderTokens.railHeight}: 0.25rem;
${sliderTokens.railBorderRadius}: 0.125rem;
${sliderTokens.railIndent}: 0.75rem;
${sliderTokens.textFieldWrapperGap}: 0.125rem;
${sliderTokens.textFieldHeight}: 2.5rem;
${sliderTokens.textFieldPadding}: 0.5rem 1rem 0.5rem 1rem;
${sliderTokens.textFieldBorderRadius}: 0.625rem;
${sliderTokens.textFieldFontFamily}: var(--plasma-typo-body-s-font-family);
${sliderTokens.textFieldFontSize}: var(--plasma-typo-body-s-font-size);
${sliderTokens.textFieldFontStyle}: var(--plasma-typo-body-s-font-style);
${sliderTokens.textFieldFontWeight}: var(--plasma-typo-body-s-font-weight);
${sliderTokens.textFieldLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
${sliderTokens.textFieldLineHeight}: var(--plasma-typo-body-s-line-height);
`,
},
disabled: {
true: css`
${sliderTokens.disabledOpacity}: 0.4;
`,
},
},
};
Loading

0 comments on commit 7dc941f

Please sign in to comment.