From dd6188b91bd268f561848a5bcd22b4687e2af06d Mon Sep 17 00:00:00 2001 From: Simon Jentsch Date: Thu, 16 Jan 2025 22:55:07 +0100 Subject: [PATCH] Fix stylings --- src/Box/Box.tsx | 18 + src/Box/system.ts | 14 +- src/Button/Button.tsx | 6 +- src/ButtonBar/ButtonBar.stories.tsx | 14 +- src/Checkbox/styles.ts | 4 +- src/Input/Input.stories.tsx | 2 +- src/Menu/MenuItem.tsx | 7 +- src/NativeSelect/NativeSelect.stories.tsx | 2 +- src/Popover/useNanopop.ts | 3 + src/ToastProvider/ToastProvider.stories.tsx | 4 +- src/Tooltip/Tooltip.tsx | 8 +- src/Tooltip/styles.ts | 2 +- src/Tooltip/tooltipSideStyles.tsx | 6 +- src/Typography/Typography.spec.tsx | 58 +- src/Typography/Typography.stories.tsx | 105 ++-- src/Typography/Typography.tsx | 194 ++---- .../__snapshots__/Typography.spec.tsx.snap | 588 ++++++++++++++---- src/Typography/types.ts | 9 - src/shared/BaseCheckable.tsx | 1 + src/shared/BaseInput.tsx | 18 +- src/shared/checkableBaseStyles.tsx | 8 +- src/styleHelpers/getComponentStyle.ts | 1 + src/styleHelpers/getSpacing.ts | 42 +- src/theme/fluid.ts | 2 +- src/theme/typography.ts | 67 +- src/theme/useComponentStyle.tsx | 6 +- src/utils/omit.ts | 7 +- src/utils/pick.ts | 3 + src/utils/splitProps.ts | 10 + 29 files changed, 769 insertions(+), 440 deletions(-) create mode 100644 src/utils/pick.ts create mode 100644 src/utils/splitProps.ts diff --git a/src/Box/Box.tsx b/src/Box/Box.tsx index 20f2f67..31521a6 100644 --- a/src/Box/Box.tsx +++ b/src/Box/Box.tsx @@ -9,6 +9,7 @@ import { svg, SvgProps } from './interpolations/svg'; import { position, PositionProps } from './interpolations/position'; import { flexItem, FlexItemProps } from './interpolations/flex'; import { shape, ShapeProps } from './interpolations/shape'; +import { splitProps } from '../utils/splitProps'; export interface BoxCssProps { css?: CssFunctionReturn; @@ -26,6 +27,23 @@ export type BoxProps = SpacingProps & export const boxInterpolateFn = (props) => [margin, padding, color, shape, layout, svg, position, flexItem].map((fn) => fn(props)); +export const boxPropNames = [ + ...margin.propNames, + ...padding.propNames, + ...color.propNames, + ...shape.propNames, + ...layout.propNames, + ...svg.propNames, + ...position.propNames, + ...flexItem.propNames, +]; + +export const useBoxProps = (props: Record) => { + console.log('boxPropNames', boxPropNames); + + return splitProps(props, boxPropNames); +}; + export const Box = styled.div` ${baseStyle} ${interpolateCssProp} diff --git a/src/Box/system.ts b/src/Box/system.ts index af4075e..02b4754 100644 --- a/src/Box/system.ts +++ b/src/Box/system.ts @@ -107,6 +107,7 @@ type SystemFn< ? StyledInterpolationFunctions : never) & { get: A extends ThemeValueGetter ? A : never; + propNames: string[]; }; type InterpolateReturnTuple = readonly [string, InterpolationReturn, Breakpoint | null]; @@ -222,15 +223,14 @@ const createSystemProperties = (configs: T): S props.theme ); + (interpolationFn as any).propNames = (interpolationFn as any).propNames || []; configs.forEach((config) => { const fromProps = config.fromProps || config.properties; - if (config.as) { - (interpolationFn as any)[config.as] = systemInterpolation(config); - } else { - fromProps.forEach((property) => { - (interpolationFn as any)[property] = systemInterpolation(config); - }); - } + const exposedUpdateMethods = config.as ? [config.as] : fromProps; + exposedUpdateMethods.forEach((property) => { + (interpolationFn as any)[property] = systemInterpolation(config); + }); + (interpolationFn as any).propNames.push(...fromProps); }); return interpolationFn as SystemFn; diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx index cb3e86f..348a970 100644 --- a/src/Button/Button.tsx +++ b/src/Button/Button.tsx @@ -3,7 +3,7 @@ import { buttonBaseStyles, ButtonBaseProps, ButtonSize } from '../ButtonBase'; import styled from '@emotion/styled'; import { getComponentStyle } from '../styleHelpers/getComponentStyle'; import { BaseProps, CssFunctionReturn } from '../types'; -import { ButtonTypography } from '../Typography'; +import { Typography } from '../Typography'; import { useCustomStyles } from '../utils/useCustomStyles'; import { ButtonStyleProperties } from './styles'; import { interpolateCssProp } from '../utils/interpolateCssProp'; @@ -135,7 +135,9 @@ export const Button = forwardRef>( {startIcon} )} - {children} + + {children} + {endIcon && ( [getCustomStyles('icon', props), getCustomStyles('endIcon', props)]} diff --git a/src/ButtonBar/ButtonBar.stories.tsx b/src/ButtonBar/ButtonBar.stories.tsx index 2030633..763bc5a 100644 --- a/src/ButtonBar/ButtonBar.stories.tsx +++ b/src/ButtonBar/ButtonBar.stories.tsx @@ -2,7 +2,7 @@ import React from 'react'; import { css } from '@emotion/react'; import { Button } from '../Button'; import { Card } from '../Card'; -import { Paragraph, Title } from '../Typography'; +import { H4, Body } from '../Typography'; import { ButtonBar } from './ButtonBar'; export default { @@ -11,8 +11,8 @@ export default { export const WithTwoButtons = () => ( - Do you want to proceed? - Please select one of the buttons below! +

Do you want to proceed?

+ Please select one of the buttons below! @@ -34,8 +34,8 @@ export const WithOneButtons = () => ( export const WithCustomStyles = () => ( - Do you want to proceed? - Please select one of the buttons below! +

Do you want to proceed?

+ Please select one of the buttons below! + search: ), diff --git a/src/Menu/MenuItem.tsx b/src/Menu/MenuItem.tsx index c532852..d6953a2 100644 --- a/src/Menu/MenuItem.tsx +++ b/src/Menu/MenuItem.tsx @@ -4,7 +4,7 @@ import styled from '@emotion/styled'; import { buttonBaseStyles } from '../ButtonBase'; import { themeVars } from '../theme/themeVars'; import { BaseProps } from '../types'; -import { ButtonTypography } from '../Typography'; +import { Typography } from '../Typography'; import { getCustomStyles, useCustomStyles } from '../utils/useCustomStyles'; import { MenuItemStyleProperties } from './styles'; import { margin, padding } from '../Box/interpolations/spacing'; @@ -50,12 +50,13 @@ export const MenuItem = ({ children, onClick, as, customStyles, ...props }: Menu customStyles={customStyles} {...props} > - {children} - + ); diff --git a/src/NativeSelect/NativeSelect.stories.tsx b/src/NativeSelect/NativeSelect.stories.tsx index 719a0c2..e43d2bd 100644 --- a/src/NativeSelect/NativeSelect.stories.tsx +++ b/src/NativeSelect/NativeSelect.stories.tsx @@ -112,7 +112,7 @@ WithStartComponent.args = { fullWidth: false, width: 600, start: ( - + search: ), diff --git a/src/Popover/useNanopop.ts b/src/Popover/useNanopop.ts index 0eebd8d..d45e6f3 100644 --- a/src/Popover/useNanopop.ts +++ b/src/Popover/useNanopop.ts @@ -29,12 +29,15 @@ const useNanopop = ({ const container = targetWindow.document.documentElement?.getBoundingClientRect(); + console.log('referenceElement', referenceElement, margin); + const newPlacement = reposition(referenceElement, popperElement, { margin, position, container, arrow: arrowElement || undefined, }); + onChange(newPlacement); }, [onChange, referenceElement, popperElement, targetWindow, margin, position, arrowElement]); diff --git a/src/ToastProvider/ToastProvider.stories.tsx b/src/ToastProvider/ToastProvider.stories.tsx index e707d48..cba9ab1 100644 --- a/src/ToastProvider/ToastProvider.stories.tsx +++ b/src/ToastProvider/ToastProvider.stories.tsx @@ -30,14 +30,14 @@ const Trigger = () => { setClosable((val) => !val)} /> setDuration(parseInt(v, 10) || 0)} value={duration} /> diff --git a/src/Tooltip/Tooltip.tsx b/src/Tooltip/Tooltip.tsx index 40f5b9e..1f651d1 100644 --- a/src/Tooltip/Tooltip.tsx +++ b/src/Tooltip/Tooltip.tsx @@ -11,7 +11,7 @@ import { leftArrowStyles, } from './tooltipSideStyles'; import { Popover } from '../Popover/Popover'; -import { useComponentStyle } from '../theme/useComponentStyle'; +import { useNumericComponentStyle } from '../theme/useComponentStyle'; import { BaseProps } from '../types'; import { TooltipStyleProperties } from './styles'; import { getCustomStyles } from '../utils/useCustomStyles'; @@ -87,7 +87,7 @@ const Tooltip = ({ }: TooltipProps) => { const usedAnimationProps = { side, duration: 150, reverse: false, ...animationProps }; const [isOpen, setOpen] = useState(false); - const gap = parseInt((useComponentStyle('tooltip.gap') as string) || '0', 10); + const gap = useNumericComponentStyle('tooltip.gap'); useEffect(() => { if (disabled || children?.props?.disabled) { @@ -118,7 +118,9 @@ const Tooltip = ({ side={side} customStyles={customStyles} > - {content} + + {content} + } > diff --git a/src/Tooltip/styles.ts b/src/Tooltip/styles.ts index 709af06..3637c18 100644 --- a/src/Tooltip/styles.ts +++ b/src/Tooltip/styles.ts @@ -23,5 +23,5 @@ export const tooltipStyles: TooltipStyles = { zIndex: 100, backgroundColor: themeVars.colors.common.black, color: themeVars.colors.common.white, - borderRadius: 4, + borderRadius: 6, }; diff --git a/src/Tooltip/tooltipSideStyles.tsx b/src/Tooltip/tooltipSideStyles.tsx index 80e3df2..fcd2f03 100644 --- a/src/Tooltip/tooltipSideStyles.tsx +++ b/src/Tooltip/tooltipSideStyles.tsx @@ -7,19 +7,19 @@ export const topArrowStyles = css` `; export const bottomArrowStyles = (props) => css` - top: -${getSpacing(1.5)(props)}; + top: -${getSpacing(1.5, false, false)(props)}; left: 50%; transform: scaleY(0.5) translateY(-50%) translateX(-50%) rotateZ(0deg); `; export const rightArrowStyles = (props) => css` - left: -${getSpacing(1.5)(props)}; + left: -${getSpacing(1.5, false, false)(props)}; top: 50%; transform: scale(0.5) translateX(-50%) translateY(-100%) rotateZ(270deg); `; export const leftArrowStyles = (props) => css` - right: -${getSpacing(1.5)(props)}; + right: -${getSpacing(1.5, false, false)(props)}; top: 50%; transform: scale(0.5) translateX(50%) translateY(-100%) rotateZ(90deg); `; diff --git a/src/Typography/Typography.spec.tsx b/src/Typography/Typography.spec.tsx index 2187608..316dbdc 100644 --- a/src/Typography/Typography.spec.tsx +++ b/src/Typography/Typography.spec.tsx @@ -1,55 +1,47 @@ import { render } from '@testing-library/react'; import React from 'react'; import { PabloThemeProvider } from '../theme'; -import { - ButtonTypography, - Headline, - InfoText, - InfoTextBold, - Paragraph, - ParagraphBold, - Subtitle, - Title, - Typography, -} from './Typography'; +import { Headline, InfoText, Paragraph, Subtitle, Title, Typography } from './Typography'; describe.each([ - [undefined], - ['headline'], - ['title'], - ['subtitle'], - ['paragraph'], - ['paragraphBold'], - ['button'], - ['info'], - ['infoBold'], -])('Typography component with variant %s', (variant) => { + [undefined, {}], + [undefined, { bold: true }], + [undefined, { bold: true, small: true }], + ['h1', {}], + ['h2', {}], + ['h3', {}], + ['h4', {}], + ['body', {}], + ['body', { bold: true }], + ['body', { small: true }], + ['body', { bold: true, small: true }], + ['button', {}], + ['button', { small: true }], +])('Typography component with variant %s', (variant, props) => { test('Render component', () => { - const { container } = renderComponent({ variant }); + const { container } = renderComponent({ variant, ...props }); expect(container).toMatchSnapshot(); }); test('Render inline component', () => { - const { container } = renderComponent({ variant, inline: true }); + const { container } = renderComponent({ variant, inline: true, ...props }); expect(container).toMatchSnapshot(); expect(container.firstChild).toHaveStyleRule('margin-bottom', '0'); }); }); describe.each([ - ['Headline', Headline], - ['Title', Title], - ['Subtitle', Subtitle], - ['Paragraph', Paragraph], - ['ParagraphBold', ParagraphBold], - ['ButtonTypography', ButtonTypography], - ['InfoText', InfoText], - ['InfoBold', InfoTextBold], -])('%s component ', (_stringName, Component) => { + ['Headline', Headline, {}], + ['Title', Title, {}], + ['Subtitle', Subtitle, {}], + ['Paragraph', Paragraph, {}], + ['ParagraphBold', Paragraph, { bold: true }], + ['InfoText', InfoText, { bold: true }], +])('%s component ', (_stringName, Component, props) => { test('Render component', () => { const { container } = render( - Hello + Hello ); expect(container).toMatchSnapshot(); diff --git a/src/Typography/Typography.stories.tsx b/src/Typography/Typography.stories.tsx index a2da510..a374b0d 100644 --- a/src/Typography/Typography.stories.tsx +++ b/src/Typography/Typography.stories.tsx @@ -8,81 +8,100 @@ export default { export const All = () => ( - Headline - Title - Subtitle - Paragraph - Paragraph Bold - Info Text - Info Text Bold + H1 + H2 + H3 + H4 + Body + + Body bold + + + Body small + + + Body small and bold + Button + + Button small + ); export const Inline = () => ( - - Headline + + H1 - - Title + + H2 - - Subtitle + + H3 - - Paragraph + + H4 - - Paragraph Bold + + Body - - Info Text + + Body bold - - Info Text Bold + + Body small + + + Body small and bold Button + + Button small + ); export const ColoredTypography = () => ( - - Headline + + H2 - - Title + + H3 - - Subtitle + + H4 - - Paragraph + + Body - - Paragraph Bold + + Body bold - - Info Text + + Body small - - Info Text Bold + + body small and bold Button + + Button small + ); export const ExampleText = () => ( - + - Bojagi (보자기) - Documentation - + Bojagi (보자기) + Documentation + Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus nec ligula sit amet metus pellentesque porttitor non porta velit. Nulla feugiat vestibulum nisl non bibendum. Suspendisse condimentum leo quis nisl condimentum, ut viverra sem placerat. Quisque at sem @@ -93,7 +112,7 @@ export const ExampleText = () => ( bibendum turpis. Nullam euismod tortor vel ipsum rhoncus, interdum feugiat lorem aliquet. Suspendisse rutrum feugiat dictum. - + Integer odio sem, volutpat a efficitur quis, ornare a arcu. Vestibulum porta id eros in pulvinar. Integer in mollis metus, non ornare neque. Morbi porttitor vitae sem ut ornare. Nullam aliquet leo sit amet arcu maximus blandit id nec nisi. Aliquam pretium erat vitae @@ -101,8 +120,8 @@ export const ExampleText = () => ( arcu, vestibulum id luctus nec, dapibus at tortor. Nullam eget lectus lacus. Donec semper sagittis tellus ac convallis. Fusce iaculis posuere porta. - Subtitle - + Subtitle + Phasellus mollis libero risus, vitae luctus turpis bibendum nec. Duis vel nunc sagittis, placerat orci quis, tincidunt dolor. Suspendisse in rutrum magna. Pellentesque a metus tincidunt, ornare diam a, varius urna. Phasellus fermentum ipsum lacus, vel vestibulum nunc @@ -112,7 +131,7 @@ export const ExampleText = () => ( tincidunt. Vivamus aliquam eros vel ipsum sodales eleifend. Integer a iaculis sem. Sed elementum nulla vitae felis imperdiet, sit amet aliquam erat tempor. Nulla facilisi. - + The above text is Lorem Ipsum diff --git a/src/Typography/Typography.tsx b/src/Typography/Typography.tsx index f8ed2ae..d125ff0 100644 --- a/src/Typography/Typography.tsx +++ b/src/Typography/Typography.tsx @@ -1,163 +1,97 @@ import React, { forwardRef } from 'react'; -import { css } from '@emotion/react'; import styled from '@emotion/styled'; import { boxInterpolateFn, BoxProps } from '../Box'; import { baseStyle } from '../shared/baseStyle'; import { BaseProps } from '../types'; import { getCustomStyles } from '../utils/useCustomStyles'; import { TypographyStyleProperties } from './styles'; -import { TypographyVariant } from './types'; import { themeVars } from '../theme/themeVars'; import { typography, TypographyInterpolationProps } from '../Box/interpolations/typography'; import { ifProp } from '../styleHelpers/styleProp'; +import type { TypographyVariants } from '../theme/typography'; export interface BaseTypographyProps extends BoxProps, BaseProps, TypographyInterpolationProps { inline?: boolean; -} -export interface TypographyProps extends BaseTypographyProps { - variant: TypographyVariant; + id?: string; as?: React.ElementType; htmlFor?: string; children: React.ReactNode; } -const baseTypographyStyle = (props: BaseTypographyProps) => css` +interface TypographyBodyProps extends BaseTypographyProps { + bold?: boolean; + small?: boolean; +} + +interface TypographyButtonProps extends BaseTypographyProps { + small?: boolean; +} + +export type TypographyProps = + | (BaseTypographyProps & { + variant?: TypographyVariants; + }) + | (TypographyBodyProps & { + variant: 'body'; + }) + | (TypographyButtonProps & { + variant: 'button'; + }) + | (TypographyBodyProps & { + variant: undefined; + }); + +const getTypographyStyles = (type: TypographyVariants, tag: keyof JSX.IntrinsicElements) => styled( + tag +)` ${baseStyle} ${themeVars.typography.base}; font-style: normal; margin: 0; - ${getCustomStyles('typography.styles', 'root')(props)} -`; - -const additionalTypographyStyles = (type: string) => (props: BaseTypographyProps) => { - return css` - ${getCustomStyles('typography.styles', type)(props)} - ${ifProp('inline', 'margin-bottom: 0;')(props as any)} - ${boxInterpolateFn(props)} - ${typography(props as any)} - `; -}; - -export const Paragraph = styled.p` - ${baseTypographyStyle} - ${themeVars.typography.paragraph}; - ${additionalTypographyStyles('paragraph')} -`; - -export const ParagraphBold = styled.p` - ${baseTypographyStyle} - ${themeVars.typography.paragraphBold} - ${additionalTypographyStyles('paragraphBold')} - ${boxInterpolateFn} + ${getCustomStyles('typography.styles', 'root')} + ${themeVars.typography[type]}; + ${getCustomStyles('typography.styles', type)} + ${ifProp('inline', 'margin-bottom: 0;')} + ${ifProp('bold' as any, (themeVars.typography[type] as any).variants?.bold)} + ${ifProp('small' as any, (themeVars.typography[type] as any).variants?.small)} ${typography} -`; - -export const ButtonTypography = styled.span` - ${baseTypographyStyle} - ${themeVars.typography.button}; - ${additionalTypographyStyles('button')} ${boxInterpolateFn} - ${typography} `; -export const Headline = styled.h2` - ${baseTypographyStyle} - ${themeVars.typography.headline} - ${additionalTypographyStyles('headline')} - ${boxInterpolateFn} - ${typography} -`; - -export const Title = styled.h3` - ${baseTypographyStyle} - font-size: ${themeVars.typography.title.fontSize}; - line-height: ${themeVars.typography.title.lineHeight}; - font-weight: ${themeVars.typography.title.fontWeight}; - margin-bottom: ${(props) => (props.inline ? 0 : themeVars.typography.title.marginBottom)}; - ${getCustomStyles('typography.styles', 'title')} - ${boxInterpolateFn} - ${typography} -`; - -export const Subtitle = styled.h4` - ${baseTypographyStyle} - ${themeVars.typography.subtitle} - ${additionalTypographyStyles('subtitle')} - ${boxInterpolateFn} - ${typography} -`; - -export const InfoText = styled.p` - ${baseTypographyStyle} - ${themeVars.typography.info} - ${additionalTypographyStyles('info')} - ${boxInterpolateFn} - ${typography} -`; +const typographyComponents = { + h1: getTypographyStyles('h1', 'h1'), + h2: getTypographyStyles('h2', 'h2'), + h3: getTypographyStyles('h3', 'h3'), + h4: getTypographyStyles('h4', 'h4'), + body: getTypographyStyles('body', 'p'), + button: getTypographyStyles('button', 'p'), +}; -export const InfoTextBold = styled.p` - ${baseTypographyStyle} - ${themeVars.typography.infoBold} - ${additionalTypographyStyles('infoBold')} - ${boxInterpolateFn} - ${typography} -`; +export const H1 = typographyComponents.h1; +export const Display = H1; +const H2 = typographyComponents.h2; +export const Headline = H2; +export const H3 = typographyComponents.h3; +export const Title = H3; +export const H4 = typographyComponents.h4; +export const Subtitle = H4; +export const Body = typographyComponents.body; +export const Paragraph = Body; +export const InfoText = (props: Omit) => ; -export const Typography = forwardRef( - ({ variant = 'paragraph', children, ...props }, ref) => { - switch (variant) { - case 'headline': - return ( - - {children} - - ); - case 'title': - return ( - - {children} - - ); - case 'subtitle': - return ( - - {children} - - ); - case 'paragraphBold': - return ( - - {children} - - ); - case 'info': - return ( - - {children} - - ); - case 'infoBold': - return ( - - {children} - - ); - case 'button': - return ( - - {children} - - ); - case 'paragraph': - default: - return ( - - {children} - - ); - } +export const Typography = forwardRef( + ( + { variant = 'body', children, ...props }: TypographyProps, + ref: React.ForwardedRef + ) => { + const Component = typographyComponents[variant] || typographyComponents.body; + return ( + + {children} + + ); } ); diff --git a/src/Typography/__snapshots__/Typography.spec.tsx.snap b/src/Typography/__snapshots__/Typography.spec.tsx.snap index 07a86fb..c310c58 100644 --- a/src/Typography/__snapshots__/Typography.spec.tsx.snap +++ b/src/Typography/__snapshots__/Typography.spec.tsx.snap @@ -1,58 +1,76 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP -exports[`ButtonTypography component Render component 1`] = ` +exports[`Headline component Render component 1`] = ` .emotion-0 { box-sizing: border-box; font-family: var(--pbl-theme-typography-base-fontFamily); font-weight: var(--pbl-theme-typography-base-fontWeight); font-style: normal; margin: 0; - line-height: var(--pbl-theme-typography-button-lineHeight); - font-size: var(--pbl-theme-typography-button-fontSize); - margin-bottom: var(--pbl-theme-typography-button-marginBottom); + line-height: var(--pbl-theme-typography-h2-lineHeight); + font-size: var(--pbl-theme-typography-h2-fontSize); + margin-bottom: var(--pbl-theme-typography-h2-marginBottom); + font-weight: var(--pbl-theme-typography-h2-fontWeight); }
- Hello - +
`; -exports[`Headline component Render component 1`] = ` +exports[`InfoText component Render component 1`] = ` .emotion-0 { box-sizing: border-box; font-family: var(--pbl-theme-typography-base-fontFamily); font-weight: var(--pbl-theme-typography-base-fontWeight); font-style: normal; margin: 0; - line-height: var(--pbl-theme-typography-headline-lineHeight); - font-size: var(--pbl-theme-typography-headline-fontSize); - margin-bottom: var(--pbl-theme-typography-headline-marginBottom); + line-height: var(--pbl-theme-typography-body-lineHeight); + font-size: var(--pbl-theme-typography-body-fontSize); + margin-bottom: var(--pbl-theme-typography-body-marginBottom); + font-weight: var(--pbl-theme-typography-body-variants-bold-fontWeight); + font-size: var(--pbl-theme-typography-body-variants-small-fontSize); +} + +.emotion-0 variants bold { + font-weight: var(--pbl-theme-typography-body-variants-bold-fontWeight); +} + +.emotion-0 variants small { + font-size: var(--pbl-theme-typography-body-variants-small-fontSize); }
-

Hello -

+

`; -exports[`InfoBold component Render component 1`] = ` +exports[`Paragraph component Render component 1`] = ` .emotion-0 { box-sizing: border-box; font-family: var(--pbl-theme-typography-base-fontFamily); font-weight: var(--pbl-theme-typography-base-fontWeight); font-style: normal; margin: 0; - line-height: var(--pbl-theme-typography-infoBold-lineHeight); - font-size: var(--pbl-theme-typography-infoBold-fontSize); - margin-bottom: var(--pbl-theme-typography-infoBold-marginBottom); - font-weight: var(--pbl-theme-typography-infoBold-fontWeight); + line-height: var(--pbl-theme-typography-body-lineHeight); + font-size: var(--pbl-theme-typography-body-fontSize); + margin-bottom: var(--pbl-theme-typography-body-marginBottom); +} + +.emotion-0 variants bold { + font-weight: var(--pbl-theme-typography-body-variants-bold-fontWeight); +} + +.emotion-0 variants small { + font-size: var(--pbl-theme-typography-body-variants-small-fontSize); }
@@ -64,16 +82,25 @@ exports[`InfoBold component Render component 1`] = `
`; -exports[`InfoText component Render component 1`] = ` +exports[`ParagraphBold component Render component 1`] = ` .emotion-0 { box-sizing: border-box; font-family: var(--pbl-theme-typography-base-fontFamily); font-weight: var(--pbl-theme-typography-base-fontWeight); font-style: normal; margin: 0; - line-height: var(--pbl-theme-typography-info-lineHeight); - font-size: var(--pbl-theme-typography-info-fontSize); - margin-bottom: var(--pbl-theme-typography-info-marginBottom); + line-height: var(--pbl-theme-typography-body-lineHeight); + font-size: var(--pbl-theme-typography-body-fontSize); + margin-bottom: var(--pbl-theme-typography-body-marginBottom); + font-weight: var(--pbl-theme-typography-body-variants-bold-fontWeight); +} + +.emotion-0 variants bold { + font-weight: var(--pbl-theme-typography-body-variants-bold-fontWeight); +} + +.emotion-0 variants small { + font-size: var(--pbl-theme-typography-body-variants-small-fontSize); }
@@ -85,187 +112,251 @@ exports[`InfoText component Render component 1`] = `
`; -exports[`Paragraph component Render component 1`] = ` +exports[`Subtitle component Render component 1`] = ` .emotion-0 { box-sizing: border-box; font-family: var(--pbl-theme-typography-base-fontFamily); font-weight: var(--pbl-theme-typography-base-fontWeight); font-style: normal; margin: 0; - line-height: var(--pbl-theme-typography-paragraph-lineHeight); - font-size: var(--pbl-theme-typography-paragraph-fontSize); - margin-bottom: var(--pbl-theme-typography-paragraph-marginBottom); + line-height: var(--pbl-theme-typography-h4-lineHeight); + font-size: var(--pbl-theme-typography-h4-fontSize); + margin-bottom: var(--pbl-theme-typography-h4-marginBottom); + font-weight: var(--pbl-theme-typography-h4-fontWeight); }
-

Hello -

+
`; -exports[`ParagraphBold component Render component 1`] = ` +exports[`Title component Render component 1`] = ` .emotion-0 { box-sizing: border-box; font-family: var(--pbl-theme-typography-base-fontFamily); font-weight: var(--pbl-theme-typography-base-fontWeight); font-style: normal; margin: 0; - line-height: var(--pbl-theme-typography-paragraphBold-lineHeight); - font-size: var(--pbl-theme-typography-paragraphBold-fontSize); - margin-bottom: var(--pbl-theme-typography-paragraphBold-marginBottom); - font-weight: var(--pbl-theme-typography-paragraphBold-fontWeight); + line-height: var(--pbl-theme-typography-h3-lineHeight); + font-size: var(--pbl-theme-typography-h3-fontSize); + font-weight: var(--pbl-theme-typography-h3-fontWeight); + margin-bottom: var(--pbl-theme-typography-h3-marginBottom); }
-

Hello -

+
`; -exports[`Subtitle component Render component 1`] = ` +exports[`Typography component with variant body Render component 1`] = ` .emotion-0 { box-sizing: border-box; font-family: var(--pbl-theme-typography-base-fontFamily); font-weight: var(--pbl-theme-typography-base-fontWeight); font-style: normal; margin: 0; - line-height: var(--pbl-theme-typography-subtitle-lineHeight); - font-size: var(--pbl-theme-typography-subtitle-fontSize); - margin-bottom: var(--pbl-theme-typography-subtitle-marginBottom); + line-height: var(--pbl-theme-typography-body-lineHeight); + font-size: var(--pbl-theme-typography-body-fontSize); + margin-bottom: var(--pbl-theme-typography-body-marginBottom); +} + +.emotion-0 variants bold { + font-weight: var(--pbl-theme-typography-body-variants-bold-fontWeight); +} + +.emotion-0 variants small { + font-size: var(--pbl-theme-typography-body-variants-small-fontSize); }
-

Hello -

+

`; -exports[`Title component Render component 1`] = ` +exports[`Typography component with variant body Render component 2`] = ` .emotion-0 { box-sizing: border-box; font-family: var(--pbl-theme-typography-base-fontFamily); font-weight: var(--pbl-theme-typography-base-fontWeight); font-style: normal; margin: 0; - line-height: var(--pbl-theme-typography-title-lineHeight); - font-size: var(--pbl-theme-typography-title-fontSize); - margin-bottom: var(--pbl-theme-typography-title-marginBottom); + line-height: var(--pbl-theme-typography-body-lineHeight); + font-size: var(--pbl-theme-typography-body-fontSize); + margin-bottom: var(--pbl-theme-typography-body-marginBottom); + font-weight: var(--pbl-theme-typography-body-variants-bold-fontWeight); +} + +.emotion-0 variants bold { + font-weight: var(--pbl-theme-typography-body-variants-bold-fontWeight); +} + +.emotion-0 variants small { + font-size: var(--pbl-theme-typography-body-variants-small-fontSize); }
-

Hello -

+

`; -exports[`Typography component with variant button Render component 1`] = ` +exports[`Typography component with variant body Render component 3`] = ` .emotion-0 { box-sizing: border-box; font-family: var(--pbl-theme-typography-base-fontFamily); font-weight: var(--pbl-theme-typography-base-fontWeight); font-style: normal; margin: 0; - line-height: var(--pbl-theme-typography-button-lineHeight); - font-size: var(--pbl-theme-typography-button-fontSize); - margin-bottom: var(--pbl-theme-typography-button-marginBottom); + line-height: var(--pbl-theme-typography-body-lineHeight); + font-size: var(--pbl-theme-typography-body-fontSize); + margin-bottom: var(--pbl-theme-typography-body-marginBottom); + font-size: var(--pbl-theme-typography-body-variants-small-fontSize); +} + +.emotion-0 variants bold { + font-weight: var(--pbl-theme-typography-body-variants-bold-fontWeight); +} + +.emotion-0 variants small { + font-size: var(--pbl-theme-typography-body-variants-small-fontSize); }
- Hello - +

`; -exports[`Typography component with variant button Render inline component 1`] = ` +exports[`Typography component with variant body Render component 4`] = ` .emotion-0 { box-sizing: border-box; font-family: var(--pbl-theme-typography-base-fontFamily); font-weight: var(--pbl-theme-typography-base-fontWeight); font-style: normal; margin: 0; - line-height: var(--pbl-theme-typography-button-lineHeight); - font-size: var(--pbl-theme-typography-button-fontSize); - margin-bottom: var(--pbl-theme-typography-button-marginBottom); - margin-bottom: 0; + line-height: var(--pbl-theme-typography-body-lineHeight); + font-size: var(--pbl-theme-typography-body-fontSize); + margin-bottom: var(--pbl-theme-typography-body-marginBottom); + font-weight: var(--pbl-theme-typography-body-variants-bold-fontWeight); + font-size: var(--pbl-theme-typography-body-variants-small-fontSize); +} + +.emotion-0 variants bold { + font-weight: var(--pbl-theme-typography-body-variants-bold-fontWeight); +} + +.emotion-0 variants small { + font-size: var(--pbl-theme-typography-body-variants-small-fontSize); }
- Hello - +

`; -exports[`Typography component with variant headline Render component 1`] = ` +exports[`Typography component with variant body Render inline component 1`] = ` .emotion-0 { box-sizing: border-box; font-family: var(--pbl-theme-typography-base-fontFamily); font-weight: var(--pbl-theme-typography-base-fontWeight); font-style: normal; margin: 0; - line-height: var(--pbl-theme-typography-headline-lineHeight); - font-size: var(--pbl-theme-typography-headline-fontSize); - margin-bottom: var(--pbl-theme-typography-headline-marginBottom); + line-height: var(--pbl-theme-typography-body-lineHeight); + font-size: var(--pbl-theme-typography-body-fontSize); + margin-bottom: var(--pbl-theme-typography-body-marginBottom); + margin-bottom: 0; +} + +.emotion-0 variants bold { + font-weight: var(--pbl-theme-typography-body-variants-bold-fontWeight); +} + +.emotion-0 variants small { + font-size: var(--pbl-theme-typography-body-variants-small-fontSize); }
-

Hello -

+

`; -exports[`Typography component with variant headline Render inline component 1`] = ` +exports[`Typography component with variant body Render inline component 2`] = ` .emotion-0 { box-sizing: border-box; font-family: var(--pbl-theme-typography-base-fontFamily); font-weight: var(--pbl-theme-typography-base-fontWeight); font-style: normal; margin: 0; - line-height: var(--pbl-theme-typography-headline-lineHeight); - font-size: var(--pbl-theme-typography-headline-fontSize); - margin-bottom: var(--pbl-theme-typography-headline-marginBottom); + line-height: var(--pbl-theme-typography-body-lineHeight); + font-size: var(--pbl-theme-typography-body-fontSize); + margin-bottom: var(--pbl-theme-typography-body-marginBottom); margin-bottom: 0; + font-weight: var(--pbl-theme-typography-body-variants-bold-fontWeight); +} + +.emotion-0 variants bold { + font-weight: var(--pbl-theme-typography-body-variants-bold-fontWeight); +} + +.emotion-0 variants small { + font-size: var(--pbl-theme-typography-body-variants-small-fontSize); }
-

Hello -

+

`; -exports[`Typography component with variant info Render component 1`] = ` +exports[`Typography component with variant body Render inline component 3`] = ` .emotion-0 { box-sizing: border-box; font-family: var(--pbl-theme-typography-base-fontFamily); font-weight: var(--pbl-theme-typography-base-fontWeight); font-style: normal; margin: 0; - line-height: var(--pbl-theme-typography-info-lineHeight); - font-size: var(--pbl-theme-typography-info-fontSize); - margin-bottom: var(--pbl-theme-typography-info-marginBottom); + line-height: var(--pbl-theme-typography-body-lineHeight); + font-size: var(--pbl-theme-typography-body-fontSize); + margin-bottom: var(--pbl-theme-typography-body-marginBottom); + margin-bottom: 0; + font-size: var(--pbl-theme-typography-body-variants-small-fontSize); +} + +.emotion-0 variants bold { + font-weight: var(--pbl-theme-typography-body-variants-bold-fontWeight); +} + +.emotion-0 variants small { + font-size: var(--pbl-theme-typography-body-variants-small-fontSize); }
@@ -277,17 +368,27 @@ exports[`Typography component with variant info Render component 1`] = `
`; -exports[`Typography component with variant info Render inline component 1`] = ` +exports[`Typography component with variant body Render inline component 4`] = ` .emotion-0 { box-sizing: border-box; font-family: var(--pbl-theme-typography-base-fontFamily); font-weight: var(--pbl-theme-typography-base-fontWeight); font-style: normal; margin: 0; - line-height: var(--pbl-theme-typography-info-lineHeight); - font-size: var(--pbl-theme-typography-info-fontSize); - margin-bottom: var(--pbl-theme-typography-info-marginBottom); + line-height: var(--pbl-theme-typography-body-lineHeight); + font-size: var(--pbl-theme-typography-body-fontSize); + margin-bottom: var(--pbl-theme-typography-body-marginBottom); margin-bottom: 0; + font-weight: var(--pbl-theme-typography-body-variants-bold-fontWeight); + font-size: var(--pbl-theme-typography-body-variants-small-fontSize); +} + +.emotion-0 variants bold { + font-weight: var(--pbl-theme-typography-body-variants-bold-fontWeight); +} + +.emotion-0 variants small { + font-size: var(--pbl-theme-typography-body-variants-small-fontSize); }
@@ -299,17 +400,21 @@ exports[`Typography component with variant info Render inline component 1`] = `
`; -exports[`Typography component with variant infoBold Render component 1`] = ` +exports[`Typography component with variant button Render component 1`] = ` .emotion-0 { box-sizing: border-box; font-family: var(--pbl-theme-typography-base-fontFamily); font-weight: var(--pbl-theme-typography-base-fontWeight); font-style: normal; margin: 0; - line-height: var(--pbl-theme-typography-infoBold-lineHeight); - font-size: var(--pbl-theme-typography-infoBold-fontSize); - margin-bottom: var(--pbl-theme-typography-infoBold-marginBottom); - font-weight: var(--pbl-theme-typography-infoBold-fontWeight); + line-height: var(--pbl-theme-typography-button-lineHeight); + font-size: var(--pbl-theme-typography-button-fontSize); + margin-bottom: var(--pbl-theme-typography-button-marginBottom); +} + +.emotion-0 variants small { + font-size: var(--pbl-theme-typography-button-variants-small-fontSize); + font-weight: var(--pbl-theme-typography-button-variants-small-fontWeight); }
@@ -321,18 +426,23 @@ exports[`Typography component with variant infoBold Render component 1`] = `
`; -exports[`Typography component with variant infoBold Render inline component 1`] = ` +exports[`Typography component with variant button Render component 2`] = ` .emotion-0 { box-sizing: border-box; font-family: var(--pbl-theme-typography-base-fontFamily); font-weight: var(--pbl-theme-typography-base-fontWeight); font-style: normal; margin: 0; - line-height: var(--pbl-theme-typography-infoBold-lineHeight); - font-size: var(--pbl-theme-typography-infoBold-fontSize); - margin-bottom: var(--pbl-theme-typography-infoBold-marginBottom); - font-weight: var(--pbl-theme-typography-infoBold-fontWeight); - margin-bottom: 0; + line-height: var(--pbl-theme-typography-button-lineHeight); + font-size: var(--pbl-theme-typography-button-fontSize); + margin-bottom: var(--pbl-theme-typography-button-marginBottom); + font-size: var(--pbl-theme-typography-button-variants-small-fontSize); + font-weight: var(--pbl-theme-typography-button-variants-small-fontWeight); +} + +.emotion-0 variants small { + font-size: var(--pbl-theme-typography-button-variants-small-fontSize); + font-weight: var(--pbl-theme-typography-button-variants-small-fontWeight); }
@@ -344,16 +454,22 @@ exports[`Typography component with variant infoBold Render inline component 1`]
`; -exports[`Typography component with variant paragraph Render component 1`] = ` +exports[`Typography component with variant button Render inline component 1`] = ` .emotion-0 { box-sizing: border-box; font-family: var(--pbl-theme-typography-base-fontFamily); font-weight: var(--pbl-theme-typography-base-fontWeight); font-style: normal; margin: 0; - line-height: var(--pbl-theme-typography-paragraph-lineHeight); - font-size: var(--pbl-theme-typography-paragraph-fontSize); - margin-bottom: var(--pbl-theme-typography-paragraph-marginBottom); + line-height: var(--pbl-theme-typography-button-lineHeight); + font-size: var(--pbl-theme-typography-button-fontSize); + margin-bottom: var(--pbl-theme-typography-button-marginBottom); + margin-bottom: 0; +} + +.emotion-0 variants small { + font-size: var(--pbl-theme-typography-button-variants-small-fontSize); + font-weight: var(--pbl-theme-typography-button-variants-small-fontWeight); }
@@ -365,17 +481,24 @@ exports[`Typography component with variant paragraph Render component 1`] = `
`; -exports[`Typography component with variant paragraph Render inline component 1`] = ` +exports[`Typography component with variant button Render inline component 2`] = ` .emotion-0 { box-sizing: border-box; font-family: var(--pbl-theme-typography-base-fontFamily); font-weight: var(--pbl-theme-typography-base-fontWeight); font-style: normal; margin: 0; - line-height: var(--pbl-theme-typography-paragraph-lineHeight); - font-size: var(--pbl-theme-typography-paragraph-fontSize); - margin-bottom: var(--pbl-theme-typography-paragraph-marginBottom); + line-height: var(--pbl-theme-typography-button-lineHeight); + font-size: var(--pbl-theme-typography-button-fontSize); + margin-bottom: var(--pbl-theme-typography-button-marginBottom); margin-bottom: 0; + font-size: var(--pbl-theme-typography-button-variants-small-fontSize); + font-weight: var(--pbl-theme-typography-button-variants-small-fontWeight); +} + +.emotion-0 variants small { + font-size: var(--pbl-theme-typography-button-variants-small-fontSize); + font-weight: var(--pbl-theme-typography-button-variants-small-fontWeight); }
@@ -387,104 +510,107 @@ exports[`Typography component with variant paragraph Render inline component 1`]
`; -exports[`Typography component with variant paragraphBold Render component 1`] = ` +exports[`Typography component with variant h1 Render component 1`] = ` .emotion-0 { box-sizing: border-box; font-family: var(--pbl-theme-typography-base-fontFamily); font-weight: var(--pbl-theme-typography-base-fontWeight); font-style: normal; margin: 0; - line-height: var(--pbl-theme-typography-paragraphBold-lineHeight); - font-size: var(--pbl-theme-typography-paragraphBold-fontSize); - margin-bottom: var(--pbl-theme-typography-paragraphBold-marginBottom); - font-weight: var(--pbl-theme-typography-paragraphBold-fontWeight); + line-height: var(--pbl-theme-typography-h1-lineHeight); + font-size: var(--pbl-theme-typography-h1-fontSize); + margin-bottom: var(--pbl-theme-typography-h1-marginBottom); + font-weight: var(--pbl-theme-typography-h1-fontWeight); }
-

Hello -

+
`; -exports[`Typography component with variant paragraphBold Render inline component 1`] = ` +exports[`Typography component with variant h1 Render inline component 1`] = ` .emotion-0 { box-sizing: border-box; font-family: var(--pbl-theme-typography-base-fontFamily); font-weight: var(--pbl-theme-typography-base-fontWeight); font-style: normal; margin: 0; - line-height: var(--pbl-theme-typography-paragraphBold-lineHeight); - font-size: var(--pbl-theme-typography-paragraphBold-fontSize); - margin-bottom: var(--pbl-theme-typography-paragraphBold-marginBottom); - font-weight: var(--pbl-theme-typography-paragraphBold-fontWeight); + line-height: var(--pbl-theme-typography-h1-lineHeight); + font-size: var(--pbl-theme-typography-h1-fontSize); + margin-bottom: var(--pbl-theme-typography-h1-marginBottom); + font-weight: var(--pbl-theme-typography-h1-fontWeight); margin-bottom: 0; }
-

Hello -

+
`; -exports[`Typography component with variant subtitle Render component 1`] = ` +exports[`Typography component with variant h2 Render component 1`] = ` .emotion-0 { box-sizing: border-box; font-family: var(--pbl-theme-typography-base-fontFamily); font-weight: var(--pbl-theme-typography-base-fontWeight); font-style: normal; margin: 0; - line-height: var(--pbl-theme-typography-subtitle-lineHeight); - font-size: var(--pbl-theme-typography-subtitle-fontSize); - margin-bottom: var(--pbl-theme-typography-subtitle-marginBottom); + line-height: var(--pbl-theme-typography-h2-lineHeight); + font-size: var(--pbl-theme-typography-h2-fontSize); + margin-bottom: var(--pbl-theme-typography-h2-marginBottom); + font-weight: var(--pbl-theme-typography-h2-fontWeight); }
-

Hello -

+
`; -exports[`Typography component with variant subtitle Render inline component 1`] = ` +exports[`Typography component with variant h2 Render inline component 1`] = ` .emotion-0 { box-sizing: border-box; font-family: var(--pbl-theme-typography-base-fontFamily); font-weight: var(--pbl-theme-typography-base-fontWeight); font-style: normal; margin: 0; - line-height: var(--pbl-theme-typography-subtitle-lineHeight); - font-size: var(--pbl-theme-typography-subtitle-fontSize); - margin-bottom: var(--pbl-theme-typography-subtitle-marginBottom); + line-height: var(--pbl-theme-typography-h2-lineHeight); + font-size: var(--pbl-theme-typography-h2-fontSize); + margin-bottom: var(--pbl-theme-typography-h2-marginBottom); + font-weight: var(--pbl-theme-typography-h2-fontWeight); margin-bottom: 0; }
-

Hello -

+
`; -exports[`Typography component with variant title Render component 1`] = ` +exports[`Typography component with variant h3 Render component 1`] = ` .emotion-0 { box-sizing: border-box; font-family: var(--pbl-theme-typography-base-fontFamily); font-weight: var(--pbl-theme-typography-base-fontWeight); font-style: normal; margin: 0; - line-height: var(--pbl-theme-typography-title-lineHeight); - font-size: var(--pbl-theme-typography-title-fontSize); - margin-bottom: var(--pbl-theme-typography-title-marginBottom); + line-height: var(--pbl-theme-typography-h3-lineHeight); + font-size: var(--pbl-theme-typography-h3-fontSize); + font-weight: var(--pbl-theme-typography-h3-fontWeight); + margin-bottom: var(--pbl-theme-typography-h3-marginBottom); }
@@ -496,16 +622,17 @@ exports[`Typography component with variant title Render component 1`] = `
`; -exports[`Typography component with variant title Render inline component 1`] = ` +exports[`Typography component with variant h3 Render inline component 1`] = ` .emotion-0 { box-sizing: border-box; font-family: var(--pbl-theme-typography-base-fontFamily); font-weight: var(--pbl-theme-typography-base-fontWeight); font-style: normal; margin: 0; - line-height: var(--pbl-theme-typography-title-lineHeight); - font-size: var(--pbl-theme-typography-title-fontSize); - margin-bottom: var(--pbl-theme-typography-title-marginBottom); + line-height: var(--pbl-theme-typography-h3-lineHeight); + font-size: var(--pbl-theme-typography-h3-fontSize); + font-weight: var(--pbl-theme-typography-h3-fontWeight); + margin-bottom: var(--pbl-theme-typography-h3-marginBottom); margin-bottom: 0; } @@ -518,6 +645,51 @@ exports[`Typography component with variant title Render inline component 1`] = ` `; +exports[`Typography component with variant h4 Render component 1`] = ` +.emotion-0 { + box-sizing: border-box; + font-family: var(--pbl-theme-typography-base-fontFamily); + font-weight: var(--pbl-theme-typography-base-fontWeight); + font-style: normal; + margin: 0; + line-height: var(--pbl-theme-typography-h4-lineHeight); + font-size: var(--pbl-theme-typography-h4-fontSize); + margin-bottom: var(--pbl-theme-typography-h4-marginBottom); + font-weight: var(--pbl-theme-typography-h4-fontWeight); +} + +
+

+ Hello +

+
+`; + +exports[`Typography component with variant h4 Render inline component 1`] = ` +.emotion-0 { + box-sizing: border-box; + font-family: var(--pbl-theme-typography-base-fontFamily); + font-weight: var(--pbl-theme-typography-base-fontWeight); + font-style: normal; + margin: 0; + line-height: var(--pbl-theme-typography-h4-lineHeight); + font-size: var(--pbl-theme-typography-h4-fontSize); + margin-bottom: var(--pbl-theme-typography-h4-marginBottom); + font-weight: var(--pbl-theme-typography-h4-fontWeight); + margin-bottom: 0; +} + +
+

+ Hello +

+
+`; + exports[`Typography component with variant undefined Render component 1`] = ` .emotion-0 { box-sizing: border-box; @@ -525,9 +697,78 @@ exports[`Typography component with variant undefined Render component 1`] = ` font-weight: var(--pbl-theme-typography-base-fontWeight); font-style: normal; margin: 0; - line-height: var(--pbl-theme-typography-paragraph-lineHeight); - font-size: var(--pbl-theme-typography-paragraph-fontSize); - margin-bottom: var(--pbl-theme-typography-paragraph-marginBottom); + line-height: var(--pbl-theme-typography-body-lineHeight); + font-size: var(--pbl-theme-typography-body-fontSize); + margin-bottom: var(--pbl-theme-typography-body-marginBottom); +} + +.emotion-0 variants bold { + font-weight: var(--pbl-theme-typography-body-variants-bold-fontWeight); +} + +.emotion-0 variants small { + font-size: var(--pbl-theme-typography-body-variants-small-fontSize); +} + +
+

+ Hello +

+
+`; + +exports[`Typography component with variant undefined Render component 2`] = ` +.emotion-0 { + box-sizing: border-box; + font-family: var(--pbl-theme-typography-base-fontFamily); + font-weight: var(--pbl-theme-typography-base-fontWeight); + font-style: normal; + margin: 0; + line-height: var(--pbl-theme-typography-body-lineHeight); + font-size: var(--pbl-theme-typography-body-fontSize); + margin-bottom: var(--pbl-theme-typography-body-marginBottom); + font-weight: var(--pbl-theme-typography-body-variants-bold-fontWeight); +} + +.emotion-0 variants bold { + font-weight: var(--pbl-theme-typography-body-variants-bold-fontWeight); +} + +.emotion-0 variants small { + font-size: var(--pbl-theme-typography-body-variants-small-fontSize); +} + +
+

+ Hello +

+
+`; + +exports[`Typography component with variant undefined Render component 3`] = ` +.emotion-0 { + box-sizing: border-box; + font-family: var(--pbl-theme-typography-base-fontFamily); + font-weight: var(--pbl-theme-typography-base-fontWeight); + font-style: normal; + margin: 0; + line-height: var(--pbl-theme-typography-body-lineHeight); + font-size: var(--pbl-theme-typography-body-fontSize); + margin-bottom: var(--pbl-theme-typography-body-marginBottom); + font-weight: var(--pbl-theme-typography-body-variants-bold-fontWeight); + font-size: var(--pbl-theme-typography-body-variants-small-fontSize); +} + +.emotion-0 variants bold { + font-weight: var(--pbl-theme-typography-body-variants-bold-fontWeight); +} + +.emotion-0 variants small { + font-size: var(--pbl-theme-typography-body-variants-small-fontSize); }
@@ -546,12 +787,83 @@ exports[`Typography component with variant undefined Render inline component 1`] font-weight: var(--pbl-theme-typography-base-fontWeight); font-style: normal; margin: 0; - line-height: var(--pbl-theme-typography-paragraph-lineHeight); - font-size: var(--pbl-theme-typography-paragraph-fontSize); - margin-bottom: var(--pbl-theme-typography-paragraph-marginBottom); + line-height: var(--pbl-theme-typography-body-lineHeight); + font-size: var(--pbl-theme-typography-body-fontSize); + margin-bottom: var(--pbl-theme-typography-body-marginBottom); margin-bottom: 0; } +.emotion-0 variants bold { + font-weight: var(--pbl-theme-typography-body-variants-bold-fontWeight); +} + +.emotion-0 variants small { + font-size: var(--pbl-theme-typography-body-variants-small-fontSize); +} + +
+

+ Hello +

+
+`; + +exports[`Typography component with variant undefined Render inline component 2`] = ` +.emotion-0 { + box-sizing: border-box; + font-family: var(--pbl-theme-typography-base-fontFamily); + font-weight: var(--pbl-theme-typography-base-fontWeight); + font-style: normal; + margin: 0; + line-height: var(--pbl-theme-typography-body-lineHeight); + font-size: var(--pbl-theme-typography-body-fontSize); + margin-bottom: var(--pbl-theme-typography-body-marginBottom); + margin-bottom: 0; + font-weight: var(--pbl-theme-typography-body-variants-bold-fontWeight); +} + +.emotion-0 variants bold { + font-weight: var(--pbl-theme-typography-body-variants-bold-fontWeight); +} + +.emotion-0 variants small { + font-size: var(--pbl-theme-typography-body-variants-small-fontSize); +} + +
+

+ Hello +

+
+`; + +exports[`Typography component with variant undefined Render inline component 3`] = ` +.emotion-0 { + box-sizing: border-box; + font-family: var(--pbl-theme-typography-base-fontFamily); + font-weight: var(--pbl-theme-typography-base-fontWeight); + font-style: normal; + margin: 0; + line-height: var(--pbl-theme-typography-body-lineHeight); + font-size: var(--pbl-theme-typography-body-fontSize); + margin-bottom: var(--pbl-theme-typography-body-marginBottom); + margin-bottom: 0; + font-weight: var(--pbl-theme-typography-body-variants-bold-fontWeight); + font-size: var(--pbl-theme-typography-body-variants-small-fontSize); +} + +.emotion-0 variants bold { + font-weight: var(--pbl-theme-typography-body-variants-bold-fontWeight); +} + +.emotion-0 variants small { + font-size: var(--pbl-theme-typography-body-variants-small-fontSize); +} +

data-testid={`pbl-${componentName}-label`} ml={1} mb={0} + inline variant={typographyVariant} as="label" htmlFor={id} diff --git a/src/shared/BaseInput.tsx b/src/shared/BaseInput.tsx index 99c5820..76a1f93 100644 --- a/src/shared/BaseInput.tsx +++ b/src/shared/BaseInput.tsx @@ -1,7 +1,7 @@ import React, { useState } from 'react'; import { css } from '@emotion/react'; import styled from '@emotion/styled'; -import { Box, layoutInterpolationFn } from '../Box'; +import { Box, layoutInterpolationFn, useBoxProps } from '../Box'; import type { LayoutBoxProps } from '../Box'; import type { Style } from '../theme/types'; import { InfoText, Paragraph } from '../Typography'; @@ -62,6 +62,8 @@ export type BaseInputOuterProps

, E extends HTMLEle }; interface InputWrapperProps extends LayoutBoxProps { + variant: InputVariant; + name: string; fullWidth: boolean; focus: boolean; error: boolean; @@ -114,14 +116,20 @@ export function BaseInput

, E extends HTMLElement>( fullWidth = false, adornmentGap = 0, value, - mt, start, end, onFocus, onBlur, + onClick, customStyles, + variant, ...props }: BaseInputOuterProps) { + const [boxProps, inputProps] = useBoxProps(props); + console.log('inputProps', inputProps); + + console.log('boxProps', boxProps); + const [focus, setFocus] = useState(false); const InputComponent = inputComponent as any; const generatedId = useUniqueId(); @@ -132,7 +140,7 @@ export function BaseInput

, E extends HTMLElement>( const getCustomStyles = useCustomStyles(`${name}.styles`, customStyles); return ( - + {label && (

, E extends HTMLElement>( error={!!props.error} focus={focus} cssStyles={getCustomStyles('wrapper')} - {...props} + variant={variant} > {start && ( @@ -156,7 +164,7 @@ export function BaseInput

, E extends HTMLElement>( )} (props: WithTheme) => { const pathArray = Array.isArray(path) ? getArrayPath(path, props) : getStringPath(path, props); + console.log('pathArray', pathArray); const value = pathArray.reduce( (acc, key) => (acc && acc[key]) || undefined, diff --git a/src/styleHelpers/getSpacing.ts b/src/styleHelpers/getSpacing.ts index 7c244e0..268a8c7 100644 --- a/src/styleHelpers/getSpacing.ts +++ b/src/styleHelpers/getSpacing.ts @@ -3,10 +3,14 @@ import { PabloThemeableProps } from '../theme/types'; import { calculateFluidClamp, ensureFluidTuple } from './fluidClamp'; const getSpacing = - (inputMultiplier: number | SpacingNames | string) => + ( + inputMultiplier: number | SpacingNames | string, + micro: boolean = false, + clamp: boolean = true + ) => ({ theme }: PabloThemeableProps) => { const fluid = theme.fluid; - const [minSize, maxSize] = ensureFluidTuple(theme.spacing.macro); + const [minSize, maxSize] = ensureFluidTuple(theme.spacing[micro ? 'micro' : 'macro']); const multiplier = theme.spacing.sizes[inputMultiplier] || inputMultiplier; if (typeof multiplier === 'string') { @@ -17,12 +21,32 @@ const getSpacing = return `${minSize * multiplier}rem`; } - return calculateFluidClamp( - minSize * multiplier, - maxSize * multiplier, - fluid.minScreen, - fluid.maxScreen - ); + if (!clamp) { + return `${(minSize + (maxSize - minSize) * 0.5) * multiplier}rem`; + } + + if (clamp) { + return calculateFluidClamp( + minSize * multiplier, + maxSize * multiplier, + fluid.minScreen, + fluid.maxScreen + ); + } }; -export { getSpacing }; +/** + * Parse spacing CSS expression to pixel + * @param expression spacing expression + * @returns + */ +const parseSpacing = (expression: string): number => { + const tempElement = document.createElement('div'); + tempElement.style.cssText = `width: ${expression};`; + document.body.appendChild(tempElement); + const computedValue = window.getComputedStyle(tempElement).getPropertyValue('width'); + document.body.removeChild(tempElement); + return parseFloat(computedValue); +}; + +export { getSpacing, parseSpacing }; diff --git a/src/theme/fluid.ts b/src/theme/fluid.ts index a5d673f..605c9f0 100644 --- a/src/theme/fluid.ts +++ b/src/theme/fluid.ts @@ -13,7 +13,7 @@ const fluid: Fluid = { minBaseSize: 1, maxBaseSize: 1.125, minRatio: 1.3, - maxRatio: 1.7, + maxRatio: 1.5, }; export { fluid, type Fluid }; diff --git a/src/theme/typography.ts b/src/theme/typography.ts index 6dc210a..eaaafb8 100644 --- a/src/theme/typography.ts +++ b/src/theme/typography.ts @@ -16,18 +16,22 @@ export interface TypographyDefinition { marginBottom: string | number; } +export interface TypographyDefinitionVariant { + variants: Record>; +} + export interface Typography { base: TypographyBase; - paragraph: TypographyDefinition; - paragraphBold: TypographyDefinition; - button: TypographyDefinition; - headline: TypographyDefinition; - title: TypographyDefinition; - subtitle: TypographyDefinition; - info: TypographyDefinition; - infoBold: TypographyDefinition; + body: TypographyDefinition & TypographyDefinitionVariant<'bold' | 'small'>; + button: TypographyDefinition & TypographyDefinitionVariant<'small'>; + h1: TypographyDefinition; + h2: TypographyDefinition; + h3: TypographyDefinition; + h4: TypographyDefinition; } +export type TypographyVariants = keyof Typography; + export const getTypographyStep = (size: number) => { const { minScreen, maxScreen, minBaseSize, maxBaseSize, minRatio, maxRatio } = fluid; const stepMinSize = minBaseSize * Math.pow(minRatio, size); @@ -40,55 +44,58 @@ export const typography: Typography = { fontFamily: '"IBM Plex Sans", sans-serif', fontWeight: 'normal', }, - paragraph: { + body: { lineHeight: '1.45em', // fontSize: '0.875rem', fontSize: getTypographyStep(0), marginBottom: '1em', - }, - paragraphBold: { - lineHeight: '1.4em', - // fontSize: '0.875rem', - fontSize: getTypographyStep(0), - marginBottom: '1em', - fontWeight: 500, + variants: { + bold: { + fontWeight: 500, + }, + small: { + fontSize: getTypographyStep(-1), + }, + }, }, button: { lineHeight: '1.125em', // fontSize: '0.875rem', fontSize: getTypographyStep(0), marginBottom: 0, + variants: { + small: { + fontSize: getTypographyStep(-1), + fontWeight: 500, + }, + }, }, - headline: { + h1: { + lineHeight: '1.1em', + // fontSize: '1.75rem', + fontSize: getTypographyStep(4), + marginBottom: '0.3em', + fontWeight: 700, + }, + h2: { lineHeight: '1.1em', // fontSize: '1.75rem', fontSize: getTypographyStep(3), marginBottom: '0.4em', fontWeight: 700, }, - title: { + h3: { lineHeight: '1.1em', // fontSize: '1.5rem', fontSize: getTypographyStep(2), fontWeight: 500, marginBottom: '0.4em', }, - subtitle: { + h4: { lineHeight: '1.1em', // fontSize: '1rem', fontSize: getTypographyStep(1), marginBottom: '0.5em', - }, - info: { - lineHeight: '1.5em', - // fontSize: '0.75rem', - fontSize: getTypographyStep(-1), - marginBottom: 0, - }, - infoBold: { - lineHeight: '1.5em', - fontSize: '0.75rem', - marginBottom: 0, fontWeight: 500, }, }; diff --git a/src/theme/useComponentStyle.tsx b/src/theme/useComponentStyle.tsx index 44b90ca..1b24b28 100644 --- a/src/theme/useComponentStyle.tsx +++ b/src/theme/useComponentStyle.tsx @@ -1,9 +1,13 @@ import { useTheme } from '@emotion/react'; import { getComponentStyle } from '../styleHelpers/getComponentStyle'; import { useComponentStyleContext } from './context'; - +import { parseSpacing } from '../styleHelpers'; export const useComponentStyle = (path: string, props: Record = {}) => { const componentStyles = useComponentStyleContext(); const theme = useTheme(); return getComponentStyle(path)({ ...props, theme: { ...theme, componentStyles } }); }; + +export const useNumericComponentStyle = (path: string, props: Record = {}): number => { + return parseSpacing((useComponentStyle(path, props) as string) || '0'); +}; diff --git a/src/utils/omit.ts b/src/utils/omit.ts index cdc880d..c9f9503 100644 --- a/src/utils/omit.ts +++ b/src/utils/omit.ts @@ -1,7 +1,4 @@ -const omit = (obj: T, keys: Array) => { - const result = { ...obj }; - keys.forEach((key) => delete result[key]); - return result; -}; +const omit = (obj: T, keys: Array) => + Object.fromEntries(Object.entries(obj).filter(([key]) => !keys.includes(key as keyof T))); export { omit }; diff --git a/src/utils/pick.ts b/src/utils/pick.ts new file mode 100644 index 0000000..44ef5b7 --- /dev/null +++ b/src/utils/pick.ts @@ -0,0 +1,3 @@ +const pick = (obj: T, keys: Array) => + Object.fromEntries(keys.filter((key) => key in obj).map((key) => [key, obj[key]])); +export { pick }; diff --git a/src/utils/splitProps.ts b/src/utils/splitProps.ts new file mode 100644 index 0000000..9292aa2 --- /dev/null +++ b/src/utils/splitProps.ts @@ -0,0 +1,10 @@ +import { omit } from './omit'; +import { pick } from './pick'; + +const splitProps = (obj: T, keys: K[]) => { + const picked = pick(obj, keys); + const omitted = omit(obj, keys); + return [picked, omitted]; +}; + +export { splitProps };