Skip to content

Commit

Permalink
feat(plasma-new-hope): Update Button component with new design and …
Browse files Browse the repository at this point in the history 
…tokens themes
  • Loading branch information
@neretin-trike @Yakutoc
neretin-trike authored and Yakutoc committed Sep 14, 2023
1 parent 4e34674 commit 641b25f
Show file tree
Hide file tree
Showing 7 changed files with 225 additions and 15 deletions.
8 changes: 5 additions & 3 deletions packages/plasma-new-hope/src/components/Button/Button.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,7 +2,7 @@ import React, { forwardRef, PropsWithChildren, ReactNode } from 'react';
import { styled } from '@linaria/react';
import { css } from '@linaria/core';

import { ComponentConfig } from '../../engines';
import { RootProps } from '../../engines';
import { applyEllipsis } from '../../mixins';

import { base as view } from './_view/base';
Expand Down Expand Up @@ -63,7 +63,9 @@ export interface ButtonProps extends PropsWithChildren {
loader?: ReactNode;
}

export const buttonRoot = (Root: any) =>
export const buttonRoot = (
Root: RootProps<HTMLButtonElement, React.ButtonHTMLAttributes<HTMLButtonElement> & ButtonProps>,
) =>
forwardRef<HTMLButtonElement, ButtonProps>((props, ref) => {
const { children, text, contentLeft, contentRight, isLoading, loader, ...rest } = props;
// eslint-disable-next-line no-nested-ternary
Expand All @@ -87,7 +89,7 @@ export const buttonRoot = (Root: any) =>
);
});

export const buttonConfig: ComponentConfig = {
export const buttonConfig = {
name: 'Button',
tag: 'button',
layout: buttonRoot,
Expand Down
2 changes: 0 additions & 2 deletions packages/plasma-new-hope/src/examples/plasma_b2c/components/Button/Button.config.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
// generated by theme-builder { version } { plasma-hope-version??? }

import { css } from '@linaria/core';

export const config = {
Expand Down
11 changes: 3 additions & 8 deletions packages/plasma-new-hope/src/examples/plasma_b2c/components/Button/Button.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -1,25 +1,20 @@
// generated by theme-builder { version } { plasma-hope-version??? }

import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';

import { buttonConfig } from '../../../../components/Button';
import { mergeConfig } from '../../../../engines';
import { argTypesFromConfig } from '../../../_helpers';
import { WithTheme, argTypesFromConfig } from '../../../_helpers';

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

export default {
title: 'plasma_b2c/Button',
decorators: [WithTheme],
component: Button,
argTypes: argTypesFromConfig(mergeConfig(buttonConfig, config)),
} as ComponentMeta<typeof Button>;

export const Default: ComponentStory<typeof Button> = (props) => {
return (
<div style={{ padding: '1rem' }}>
<Button {...props}>Hello</Button>
</div>
);
return <Button {...props}>Hello</Button>;
};
2 changes: 0 additions & 2 deletions packages/plasma-new-hope/src/examples/plasma_b2c/components/Button/Button.ts
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
// generated by theme-builder { version } { plasma-hope-version??? }

import { buttonConfig } from '../../../../components/Button';
import { component, mergeConfig } from '../../../../engines';

Expand Down
189 changes: 189 additions & 0 deletions packages/plasma-new-hope/src/examples/plasma_web/components/Button/Button.config.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,189 @@
import { css } from '@linaria/core';

export const config = {
defaults: {
view: 'default',
focused: 'true',
size: 'm',
},
variations: {
view: {
default: css`
--plasma-button-color: var(--inverse-text-primary);
--plasma-button-bg-color: var(--surface-solid-default);
--plasma-button-color-hover: var(--inverse-text-primary);
--plasma-button-bg-color-hover: color-mix(
in srgb,
var(--inverse-text-primary),
var(--surface-solid-default) 85%
);
--plasma-button-color-active: var(--inverse-text-primary);
--plasma-button-bg-color-active: color-mix(
in srgb,
var(--inverse-text-primary),
var(--surface-solid-default) 80%
);
`,
primary: css`
--plasma-button-color: var(--on-dark-text-primary);
--plasma-button-bg-color: var(--surface-accent);
--plasma-button-color-hover: var(--on-dark-text-primary);
--plasma-button-bg-color-hover: color-mix(in srgb, var(--text-primary), var(--surface-accent) 85%);
--plasma-button-color-active: var(--on-dark-text-primary);
--plasma-button-bg-color-active: color-mix(in srgb, var(--text-primary), var(--surface-accent) 80%);
`,
secondary: css`
--plasma-button-color: var(--text-primary);
--plasma-button-bg-color: var(--surface-transparent-secondary);
--plasma-button-color-hover: var(--text-primary);
--plasma-button-bg-color-hover: color-mix(
in srgb,
var(--inverse-text-primary),
var(--surface-transparent-secondary) 85%
);
--plasma-button-color-active: var(--text-primary);
--plasma-button-bg-color-active: color-mix(
in srgb,
var(--inverse-text-primary),
var(--surface-transparent-secondary) 80%
);
`,
clear: css`
--plasma-button-color: var(--text-primary);
--plasma-button-bg-color: var(--surface-clear);
--plasma-button-color-hover: var(--text-primary);
--plasma-button-bg-color-hover: color-mix(in srgb, var(--text-primary), var(--surface-clear) 95%);
--plasma-button-color-active: var(--text-primary);
--plasma-button-bg-color-active: color-mix(in srgb, var(--text-primary), var(--surface-clear) 90%);
`,
positive: css`
--plasma-button-color: var(--on-dark-text-primary);
--plasma-button-bg-color: var(--surface-positive);
--plasma-button-color-hover: var(--on-dark-text-primary);
--plasma-button-bg-color-hover: color-mix(
in srgb,
var(--inverse-text-primary),
var(--surface-positive) 85%
);
--plasma-button-color-active: var(--on-dark-text-primary);
--plasma-button-bg-color-active: color-mix(in srgb, var(--text-primary), var(--surface-positive) 85%);
`,
warning: css`
--plasma-button-color: var(--on-dark-text-primary);
--plasma-button-bg-color: var(--surface-warning);
--plasma-button-color-hover: var(--on-dark-text-primary);
--plasma-button-bg-color-hover: color-mix(
in srgb,
var(--inverse-text-primary),
var(--surface-warning) 85%
);
--plasma-button-color-active: var(--on-dark-text-primary);
--plasma-button-bg-color-active: color-mix(in srgb, var(--text-primary), var(--surface-warning) 85%);
`,
negative: css`
--plasma-button-color: var(--on-dark-text-primary);
--plasma-button-bg-color: var(--surface-negative);
--plasma-button-color-hover: var(--on-dark-text-primary);
--plasma-button-bg-color-hover: color-mix(
in srgb,
var(--inverse-text-primary),
var(--surface-negative) 85%
);
--plasma-button-color-active: var(--on-dark-text-primary);
--plasma-button-bg-color-active: color-mix(in srgb, var(--text-primary), var(--surface-negative) 85%);
`,
},
size: {
l: css`
--plasma-button-height: 56px;
--plasma-button-padding: 24px;
--plasma-button-radius: 14px;
--plasma-button-font-family: var(--plasma-typo-body-l-font-family);
--plasma-button-font-size: var(--plasma-typo-body-l-font-size);
--plasma-button-font-style: var(--plasma-typo-body-l-font-style);
--plasma-button-font-weight: var(--plasma-typo-body-l-bold-font-weight);
--plasma-button-letter-spacing: var(--plasma-typo-body-l-letter-spacing);
--plasma-button-line-height: var(--plasma-typo-body-l-line-height);
`,
lr: css`
--plasma-button-height: 56px;
--plasma-button-font-family: var(--plasma-typo-body-l-font-family);
--plasma-button-font-size: var(--plasma-typo-body-l-font-size);
--plasma-button-font-style: var(--plasma-typo-body-l-font-style);
--plasma-button-font-weight: var(--plasma-typo-body-l-bold-font-weight);
--plasma-button-letter-spacing: var(--plasma-typo-body-l-letter-spacing);
--plasma-button-line-height: var(--plasma-typo-body-l-line-height);
`,
m: css`
--plasma-button-height: 48px;
--plasma-button-padding: 20px;
--plasma-button-radius: 12px;
--plasma-button-font-family: var(--plasma-typo-body-m-font-family);
--plasma-button-font-size: var(--plasma-typo-body-m-font-size);
--plasma-button-font-style: var(--plasma-typo-body-m-font-style);
--plasma-button-font-weight: var(--plasma-typo-body-m-bold-font-weight);
--plasma-button-letter-spacing: var(--plasma-typo-body-m-letter-spacing);
--plasma-button-line-height: var(--plasma-typo-body-m-line-height);
`,
mr: css`
--plasma-button-height: 48px;
--plasma-button-font-family: var(--plasma-typo-body-m-font-family);
--plasma-button-font-size: var(--plasma-typo-body-m-font-size);
--plasma-button-font-style: var(--plasma-typo-body-m-font-style);
--plasma-button-font-weight: var(--plasma-typo-body-m-bold-font-weight);
--plasma-button-letter-spacing: var(--plasma-typo-body-m-letter-spacing);
--plasma-button-line-height: var(--plasma-typo-body-m-line-height);
`,
s: css`
--plasma-button-height: 40px;
--plasma-button-padding: 16px;
--plasma-button-radius: 10px;
--plasma-button-font-family: var(--plasma-typo-body-s-font-family);
--plasma-button-font-size: var(--plasma-typo-body-s-font-size);
--plasma-button-font-style: var(--plasma-typo-body-s-font-style);
--plasma-button-font-weight: var(--plasma-typo-body-s-bold-font-weight);
--plasma-button-letter-spacing: var(--plasma-typo-body-s-letter-spacing);
--plasma-button-line-height: var(--plasma-typo-body-s-line-height);
`,
sr: css`
--plasma-button-height: 40px;
--plasma-button-font-family: var(--plasma-typo-body-s-font-family);
--plasma-button-font-size: var(--plasma-typo-body-s-font-size);
--plasma-button-font-style: var(--plasma-typo-body-s-font-style);
--plasma-button-font-weight: var(--plasma-typo-body-s-bold-font-weight);
--plasma-button-letter-spacing: var(--plasma-typo-body-s-letter-spacing);
--plasma-button-line-height: var(--plasma-typo-body-s-line-height);
`,
xs: css`
--plasma-button-height: 32px;
--plasma-button-padding: 12px;
--plasma-button-radius: 8px;
--plasma-button-font-family: var(--plasma-typo-body-xs-font-family);
--plasma-button-font-size: var(--plasma-typo-body-xs-font-size);
--plasma-button-font-style: var(--plasma-typo-body-xs-font-style);
--plasma-button-font-weight: var(--plasma-typo-body-xs-bold-font-weight);
--plasma-button-letter-spacing: var(--plasma-typo-body-xs-letter-spacing);
--plasma-button-line-height: var(--plasma-typo-body-xs-line-height);
`,
xsr: css`
--plasma-button-height: 32px;
--plasma-button-font-family: var(--plasma-typo-body-xs-font-family);
--plasma-button-font-size: var(--plasma-typo-body-xs-font-size);
--plasma-button-font-style: var(--plasma-typo-body-xs-font-style);
--plasma-button-font-weight: var(--plasma-typo-body-xs-bold-font-weight);
--plasma-button-letter-spacing: var(--plasma-typo-body-xs-letter-spacing);
--plasma-button-line-height: var(--plasma-typo-body-xs-line-height);
`,
},
disabled: {
true: css`
--plasma-button-disabled-opacity: 0.4;
`,
},
focused: {
true: css`
--plasma-button-focus-color: var(--surface-accent);
`,
},
},
};
20 changes: 20 additions & 0 deletions packages/plasma-new-hope/src/examples/plasma_web/components/Button/Button.stories.tsx
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
import React from 'react';
import { ComponentStory, ComponentMeta } from '@storybook/react';

import { buttonConfig } from '../../../../components/Button';
import { mergeConfig } from '../../../../engines';
import { WithTheme, argTypesFromConfig } from '../../../_helpers';

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

export default {
title: 'plasma_web/Button',
decorators: [WithTheme],
component: Button,
argTypes: argTypesFromConfig(mergeConfig(buttonConfig, config)),
} as ComponentMeta<typeof Button>;

export const Default: ComponentStory<typeof Button> = (props) => {
return <Button {...props}>Hello</Button>;
};
8 changes: 8 additions & 0 deletions packages/plasma-new-hope/src/examples/plasma_web/components/Button/Button.ts
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
import { buttonConfig } from '../../../../components/Button';
import { component, mergeConfig } from '../../../../engines';

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

const mergedConfig = mergeConfig(buttonConfig, config);

export const Button = component(mergedConfig);

0 comments on commit 641b25f

Please sign in to comment.