Skip to content

Commit

Permalink
feat(plasma-new-hope): Add to b2c
Browse files Browse the repository at this point in the history
  • Loading branch information
@iljs
iljs committed Apr 23, 2024
1 parent 8e13faf commit 8925ffe
Show file tree
Hide file tree
Showing 14 changed files with 451 additions and 57 deletions.
35 changes: 35 additions & 0 deletions packages/plasma-b2c/api/plasma-b2c.api.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -118,6 +118,7 @@ import { gridGutters } from '@salutejs/plasma-hope';
import { gridMargins } from '@salutejs/plasma-hope';
import { gridSizes } from '@salutejs/plasma-hope';
import { HTMLAttributes } from 'react';
import { IconButtonProps } from '@salutejs/plasma-new-hope/styled-components';
import { ImageProps } from '@salutejs/plasma-new-hope/styled-components';
import { ImgHTMLAttributes } from 'react';
import { IndicatorProps } from '@salutejs/plasma-new-hope/styled-components';
Expand Down Expand Up @@ -1123,6 +1124,40 @@ headline5: string;
};
}> & TypographyOldProps & RefAttributes<HTMLDivElement>>;

// @public
export const IconButton: FunctionComponent<PropsType< {
view: {
primary: string;
accent: string;
secondary: string;
clear: string;
success: string;
warning: string;
critical: string;
dark: string;
black: string;
white: string;
};
size: {
l: string;
lr: string;
m: string;
mr: string;
s: string;
sr: string;
xs: string;
xsr: string;
};
disabled: {
true: string;
};
focused: {
true: string;
};
}> & IconButtonProps & RefAttributes<HTMLButtonElement>>;

export { IconButtonProps }

// @public
const Image_2: FunctionComponent<PropsType<Variants> & ImgHTMLAttributes<HTMLImageElement> & {
base?: "div" | "img" | undefined;
Expand Down
217 changes: 217 additions & 0 deletions packages/plasma-b2c/src/components/IconButton/IconButton.config.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,217 @@
import { css, iconButtonTokens } from '@salutejs/plasma-new-hope/styled-components';

export const config = {
defaults: {
view: 'primary',
focused: 'true',
size: 'm',
},
variations: {
view: {
primary: css`
${iconButtonTokens.iconButtonColor}: var(--inverse-text-primary);
${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-solid-default);
${iconButtonTokens.iconButtonColorHover}: var(--inverse-text-primary);
${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-solid-default-hover);
${iconButtonTokens.iconButtonColorActive}: var(--inverse-text-primary);
${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-solid-default-active);
`,
accent: css`
${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary);
${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-accent);
${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary);
${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-accent-hover);
${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary);
${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-accent-active);
`,
secondary: css`
${iconButtonTokens.iconButtonColor}: var(--text-primary);
${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-transparent-secondary);
${iconButtonTokens.iconButtonColorHover}: var(--text-primary);
${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-transparent-secondary-hover);
${iconButtonTokens.iconButtonColorActive}: var(--text-primary);
${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-transparent-secondary-active);
`,
clear: css`
${iconButtonTokens.iconButtonColor}: var(--text-primary);
${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-clear);
${iconButtonTokens.iconButtonColorHover}: var(--text-primary-hover);
${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-clear);
${iconButtonTokens.iconButtonColorActive}: var(--text-primary-active);
${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-clear);
`,
success: css`
${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary);
${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-positive);
${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary);
${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-positive-hover);
${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary);
${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-positive-active);
`,
warning: css`
${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary);
${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-warning);
${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary);
${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-warning-hover);
${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary);
${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-warning-active);
`,
critical: css`
${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary);
${iconButtonTokens.iconButtonBackgroundColor}: var(--surface-negative);
${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary);
${iconButtonTokens.iconButtonBackgroundColorHover}: var(--surface-negative-hover);
${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary);
${iconButtonTokens.iconButtonBackgroundColorActive}: var(--surface-negative-active);
`,
dark: css`
${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary);
${iconButtonTokens.iconButtonBackgroundColor}: var(--on-light-surface-transparent-deep);
${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary);
${iconButtonTokens.iconButtonBackgroundColorHover}: var(--on-light-surface-transparent-deep-hover);
${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary);
${iconButtonTokens.iconButtonBackgroundColorActive}: var(--on-light-surface-transparent-deep-active);
`,
black: css`
${iconButtonTokens.iconButtonColor}: var(--on-dark-text-primary);
${iconButtonTokens.iconButtonBackgroundColor}: var(--on-light-surface-solid-default);
${iconButtonTokens.iconButtonColorHover}: var(--on-dark-text-primary);
${iconButtonTokens.iconButtonBackgroundColorHover}: var(--on-light-surface-solid-default-hover);
${iconButtonTokens.iconButtonColorActive}: var(--on-dark-text-primary);
${iconButtonTokens.iconButtonBackgroundColorActive}: var(--on-light-surface-solid-default-active);
`,
white: css`
${iconButtonTokens.iconButtonColor}: var(--on-light-text-primary);
${iconButtonTokens.iconButtonBackgroundColor}: var(--on-dark-surface-solid-default);
${iconButtonTokens.iconButtonColorHover}: var(--on-light-text-primary);
${iconButtonTokens.iconButtonBackgroundColorHover}: var(--on-dark-surface-solid-default-hover);
${iconButtonTokens.iconButtonColorActive}: var(--on-light-text-primary);
${iconButtonTokens.iconButtonBackgroundColorActive}: var(--on-dark-surface-solid-default-active);
`,
},
size: {
l: css`
${iconButtonTokens.iconButtonHeight}: 3.5rem;
${iconButtonTokens.iconButtonWidth}: 3.5rem;
${iconButtonTokens.iconButtonPadding}: 1.5rem;
${iconButtonTokens.iconButtonRadius}: 0.875rem;
${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family);
${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size);
${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style);
${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight);
${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height);
${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem;
${iconButtonTokens.iconButtonSpinnerColor}: inherit;
`,
lr: css`
${iconButtonTokens.iconButtonHeight}: 3.5rem;
${iconButtonTokens.iconButtonWidth}: 3.5rem;
${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-l-font-family);
${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-l-font-size);
${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-l-font-style);
${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-l-bold-font-weight);
${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-l-letter-spacing);
${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-l-line-height);
${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem;
${iconButtonTokens.iconButtonSpinnerColor}: inherit;
`,
m: css`
${iconButtonTokens.iconButtonHeight}: 3rem;
${iconButtonTokens.iconButtonWidth}: 3rem;
${iconButtonTokens.iconButtonPadding}: 1.25rem;
${iconButtonTokens.iconButtonRadius}: 0.75rem;
${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family);
${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size);
${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style);
${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight);
${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height);
${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem;
${iconButtonTokens.iconButtonSpinnerColor}: inherit;
`,
mr: css`
${iconButtonTokens.iconButtonHeight}: 3rem;
${iconButtonTokens.iconButtonWidth}: 3rem;
${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-m-font-family);
${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-m-font-size);
${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-m-font-style);
${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-m-bold-font-weight);
${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-m-letter-spacing);
${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-m-line-height);
${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem;
${iconButtonTokens.iconButtonSpinnerColor}: inherit;
`,
s: css`
${iconButtonTokens.iconButtonHeight}: 2.5rem;
${iconButtonTokens.iconButtonWidth}: 2.5remm;
${iconButtonTokens.iconButtonPadding}: 1rem;
${iconButtonTokens.iconButtonRadius}: 0.625rem;
${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family);
${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size);
${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style);
${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height);
${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem;
${iconButtonTokens.iconButtonSpinnerColor}: inherit;
`,
sr: css`
${iconButtonTokens.iconButtonHeight}: 2.5rem;
${iconButtonTokens.iconButtonWidth}: 2.5rem;
${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-s-font-family);
${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-s-font-size);
${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-s-font-style);
${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-s-bold-font-weight);
${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-s-letter-spacing);
${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-s-line-height);
${iconButtonTokens.iconButtonSpinnerSize}: 1.375rem;
${iconButtonTokens.iconButtonSpinnerColor}: inherit;
`,
xs: css`
${iconButtonTokens.iconButtonHeight}: 2rem;
${iconButtonTokens.iconButtonWidth}: 2rem;
${iconButtonTokens.iconButtonPadding}: 0.75rem;
${iconButtonTokens.iconButtonRadius}: 0.5rem;
${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family);
${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size);
${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style);
${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight);
${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height);
${iconButtonTokens.iconButtonSpinnerSize}: 1rem;
${iconButtonTokens.iconButtonSpinnerColor}: inherit;
`,
xsr: css`
${iconButtonTokens.iconButtonHeight}: 2rem;
${iconButtonTokens.iconButtonWidth}: 2rem;
${iconButtonTokens.iconButtonFontFamily}: var(--plasma-typo-body-xs-font-family);
${iconButtonTokens.iconButtonFontSize}: var(--plasma-typo-body-xs-font-size);
${iconButtonTokens.iconButtonFontStyle}: var(--plasma-typo-body-xs-font-style);
${iconButtonTokens.iconButtonFontWeight}: var(--plasma-typo-body-xs-bold-font-weight);
${iconButtonTokens.iconButtonLetterSpacing}: var(--plasma-typo-body-xs-letter-spacing);
${iconButtonTokens.iconButtonLineHeight}: var(--plasma-typo-body-xs-line-height);
${iconButtonTokens.iconButtonSpinnerSize}: 1rem;
${iconButtonTokens.iconButtonSpinnerColor}: inherit;
`,
},
disabled: {
true: css`
${iconButtonTokens.iconButtonDisabledOpacity}: 0.4;
`,
},
focused: {
true: css`
${iconButtonTokens.iconButtonFocusColor}: var(--surface-accent);
`,
},
},
};
99 changes: 99 additions & 0 deletions packages/plasma-b2c/src/components/IconButton/IconButton.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
import React, { ComponentProps } from 'react';
import type { StoryObj, Meta } from '@storybook/react';
import { IconClose } from '@salutejs/plasma-icons';
import { disableProps, InSpacingDecorator } from '@salutejs/plasma-sb-utils';

import { IconButton } from './IconButton';

type StoryButtonProps = ComponentProps<typeof IconButton> & { contentType: string; isLoading: boolean };

const views = ['accent', 'primary', 'secondary', 'success', 'warning', 'critical', 'clear', 'dark', 'black', 'white'];
const sizes = ['l', 'm', 's', 'xs'];
const pins = [
'square-square',
'square-clear',
'clear-square',
'clear-clear',
'clear-circle',
'circle-clear',
'circle-circle',
'',
];

const meta: Meta<StoryButtonProps> = {
title: 'Controls/IconButton',
decorators: [InSpacingDecorator],
argTypes: {
size: {
options: sizes,
control: {
type: 'inline-radio',
},
},
view: {
options: views,
control: {
type: 'select',
},
},
pin: {
options: pins,
control: {
type: 'select',
},
table: { defaultValue: { summary: 'bottom' } },
},
...disableProps(['theme', 'loader', 'onClick', 'onFocus', 'onBlur', 'contentLeft', 'contentRight']),
},
};

export default meta;

const getSizeForIcon = (size) => {
if (size === 'mr') {
return 's';
}
if (size === 'lr') {
return 's';
}
if (size === 'm') {
return 's';
}
if (size === 'l') {
return 's';
}
if (size === 'sr') {
return 's';
}
if (size === 'xsr') {
return 'xs';
}
return size;
};

const getColorForIcon = (color) => {
if (color === 'dark') {
return 'white';
}
if (color === 'white') {
return 'black';
}
return color;
};

export const Default: StoryObj<ComponentProps<typeof IconButton>> = {
args: {
children: <IconClose />,
view: 'primary',
size: 'm',
disabled: false,
focused: true,
isLoading: false,
},
render: (args) => (
<IconButton
{...args}
icon={<IconClose color={getColorForIcon(args.view)} size={getSizeForIcon(args.size)} />}
/>
),
};
11 changes: 11 additions & 0 deletions packages/plasma-b2c/src/components/IconButton/IconButton.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,11 @@
import { iconButtonConfig, component, mergeConfig } from '@salutejs/plasma-new-hope/styled-components';

import { config } from './IconButton.config';

const mergedConfig = mergeConfig(iconButtonConfig, config);
const IconButtonComponent = component(mergedConfig);

/**
* Кнопка.
*/
export const IconButton = IconButtonComponent;
3 changes: 3 additions & 0 deletions packages/plasma-b2c/src/components/IconButton/index.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,3 @@
export { IconButton } from './IconButton';

export type { IconButtonProps } from '@salutejs/plasma-new-hope/styled-components';
1 change: 1 addition & 0 deletions packages/plasma-b2c/src/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,7 @@ export * from './components/Editable';
export * from './components/ElasticGrid';
export * from './components/Grid';
export * from './components/Image';
export * from './components/IconButton';
export * from './components/Link';
export * from './components/List';
export * from './components/Modal';
Expand Down
1 change: 0 additions & 1 deletion packages/plasma-new-hope/src/components/Button/Button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -41,7 +41,6 @@ export const buttonRoot = (Root: RootProps<HTMLButtonElement, ButtonProps>) =>

const txt = typeof children === 'string' ? children : text;

console.log(stretching);
const stretchingClass = stretch
? classes.filledStretching
: classes[`${stretching}Stretching` as keyof typeof classes];
Expand Down
Loading

0 comments on commit 8925ffe

Please sign in to comment.