doryan/material-you-react
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

DONE: Full typography

Browse Source 
CHANGES: Everywhere change <span> labels to <Typography>
FIXED: Imports in SASS files
This commit is contained in:
doryan04
2024-02-17 21:11:14 +04:00
committed by doryan
parent 16040245a7
commit 1f6343c07b
19 changed files with 956 additions and 205 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
src/primitive-components/button-components/button/button.tsx
View File

@@ -5,6 +5,7 @@ import { ButtonProps } from './button.types';
import { bool, oneOf, string } from 'prop-types';
import { ButtonLayout } from '../button-layout/button-layout';
import { IconWrapper } from '../../icon/icon-wrapper';
import { Typography } from '../../typography/typography';
/**
* Button component
@@ -32,7 +33,13 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
ref={ref}
>
<IconWrapper icon={icon} iconPlace={iconPlace}>
<span className={'label-large'}>{props.children}</span>
<Typography
className={'label-large'}
role={'label'}
size={'large'}
>
{props.children}
</Typography>
</IconWrapper>
</ButtonLayout>
),

14
src/primitive-components/button-components/fab/fab.tsx
View File

@@ -1,9 +1,10 @@
'use client';
import { forwardRef } from 'react';
import { Icon } from '../../components';
import { FABProps } from './fab.types';
import { Icon } from '../../components';
import React, { forwardRef } from 'react';
import { bool, oneOf, string } from 'prop-types';
import { Typography } from '../../typography/typography';
import { ButtonLayout } from '../button-layout/button-layout';
/**
@@ -21,6 +22,7 @@ const sizes = {
export const FAB = forwardRef<HTMLButtonElement, FABProps>(
(
{
children,
icon = 'edit',
className = '',
size = 'default',
@@ -43,7 +45,13 @@ export const FAB = forwardRef<HTMLButtonElement, FABProps>(
{icon}
</Icon>
{size === 'extended' ? (
<span className={'label-large'}>{props.children}</span>
<Typography
className={'label-large'}
role={'label'}
size={'large'}
>
{children}
</Typography>
) : (
<></>
)}

16
src/primitive-components/button-components/segmented-buttons/segment-button.tsx
View File

@@ -3,10 +3,8 @@
import { string } from 'prop-types';
import React, { forwardRef, useState } from 'react';
import { IconWrapper } from '../../icon/icon-wrapper';
import { Typography } from '../../typography/typography';
import { SegmentedButton } from './segmented-buttons.types';
import { ButtonLayout } from '../button-layout/button-layout';
import { ButtonLayoutProps } from '../button-layout/button-layout.types';
export const SegmentButton = forwardRef<
HTMLButtonElement,
ButtonLayoutProps & SegmentedButton
@@ -19,6 +17,7 @@ export const SegmentButton = forwardRef<
weight,
svgSize,
fillIcon,
children,
iconSize,
opticalSize,
toggled = false,
@@ -58,13 +57,22 @@ export const SegmentButton = forwardRef<
type={type}
weight={weight}
>
<span className={'label-large'}>{props.children}</span>
<Typography
className={'label-large'}
role={'label'}
size={'large'}
>
{children}
</Typography>
</IconWrapper>
<span className={'m3 m3-button-segment-state-layer'} />
</ButtonLayout>
);
},
);
import { ButtonLayout } from '../button-layout/button-layout';
import { ButtonLayoutProps } from '../button-layout/button-layout.types';
SegmentButton.propTypes = {
children: string,

3
src/primitive-components/button-components/segmented-buttons/segmented-buttons.types.ts
View File

@@ -1,11 +1,10 @@
import { HTMLAttributes, ReactElement } from 'react';
import { IconProps, IconWrapperProps } from '../../icon/icon.types';
import { IconWrapperProps } from '../../icon/icon.types';
export type SegmentedButton = IconWrapperProps & {
icon?: string;
toggled?: boolean;
centralRipple?: boolean;
children?: string | ReactElement<IconProps>;
};
export interface SegmentedButtons {

5
src/primitive-components/icon/icon.types.ts
View File

@@ -20,7 +20,4 @@ export type IconWrapperProps = IconPlacement &
icon?: string;
};
export type IconProps = SVGProps<SVGSVGElement> &
GeneralIconProps & {
children?: string | undefined;
};
export type IconProps = SVGProps<SVGSVGElement> & GeneralIconProps;

3
src/primitive-components/input-components/checkbox/checkbox.tsx
View File

@@ -3,8 +3,8 @@
import { bool } from 'prop-types';
import { CheckboxProps } from './checkbox.types';
import { RippleEffect } from '../../ripple/ripple-effect';
import useRippleEffect from '../../ripple/hooks/useRippleEffect';
import { InputLayout } from '../input-layout/input-layout';
import useRippleEffect from '../../ripple/hooks/useRippleEffect';
import {
forwardRef,
useEffect,
@@ -51,7 +51,6 @@ export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
className={'m3-checkbox-ripple-layer'}
ref={ripplesRef}
/>
{props.children}
</div>
);
},

42
src/primitive-components/input-components/switch/switch.tsx
View File

@@ -15,25 +15,29 @@ export const Switch = forwardRef<
HTMLInputElement,
SwitchMainProps & LabelPlacement
>(({ icon, selected = false, ...props }, ref) => (
<div className={'m3 m3-switch'}>
<InputLayout
{...props}
className={`m3 ${props.className ?? ''}`.trimEnd()}
ref={ref}
type={'checkbox'}
/>
<svg>
<rect className={'m3 m3-switch-track'} />
<circle className={'m3 m3-switch-handler'} />
<circle className={'m3 m3-switch-handler-state-layer'} />
<g>
{icon && !selected && (
<text className={'m3 m3-icon-unchecked'}>close</text>
)}
{icon && <text className={'m3 m3-icon-checked'}>check</text>}
</g>
</svg>
</div>
<>
<div className={'m3 m3-switch'}>
<InputLayout
{...props}
className={`m3 ${props.className ?? ''}`.trimEnd()}
ref={ref}
type={'checkbox'}
/>
<svg>
<rect className={'m3 m3-switch-track'} />
<circle className={'m3 m3-switch-handler'} />
<circle className={'m3 m3-switch-handler-state-layer'} />
<g>
{icon && !selected && (
<text className={'m3 m3-icon-unchecked'}>close</text>
)}
{icon && (
<text className={'m3 m3-icon-checked'}>check</text>
)}
</g>
</svg>
</div>
</>
));
Switch.propTypes = {

32
src/primitive-components/typography/get-typography-role.ts Normal file
View File

@@ -0,0 +1,32 @@
import { TypographyRole, TypographySize } from './typography.types';
export function getTypographyRole(role: TypographyRole, size: TypographySize) {
switch (role) {
case 'display':
return 'h1';
case 'headline':
switch (size) {
case 'large' || 'hero' || 'xl':
return 'h2';
case 'medium':
return 'h3';
case 'small':
return 'h4';
}
break;
case 'title':
switch (size) {
case 'large' || 'hero' || 'xl':
return 'h4';
case 'medium':
return 'h5';
case 'small':
return 'h6';
}
break;
case 'body':
return 'p';
case 'label':
return 'label';
}
}

99
src/primitive-components/typography/typography.tsx
View File

@@ -1,76 +1,25 @@
import { forwardRef, HTMLAttributes } from 'react';
import { createElement, forwardRef } from 'react';
import { getTypographyRole } from './get-typography-role';
import {
TypographyProps,
Typography as TypographyTargetRef,
} from './typography.types';
export const Typography = {
h1: forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
(props, ref) => {
return (
<h1
className={`m3 m3-typography display-hero ${props.className}`}
ref={ref}
>
{props.children}
</h1>
);
},
),
h2: forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
(props, ref) => {
return (
<h2
className={`m3 m3-typography display-large ${props.className}`}
ref={ref}
>
{props.children}
</h2>
);
},
),
h3: forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
(props, ref) => {
return (
<h3
className={`m3 m3-typography headline-medium ${props.className}`}
ref={ref}
>
{props.children}
</h3>
);
},
),
h4: forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
(props, ref) => {
return (
<h4
className={`m3 m3-typography headline-small ${props.className}`}
ref={ref}
>
{props.children}
</h4>
);
},
),
h5: forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
(props, ref) => {
return (
<h5
className={`m3 m3-typography title-medium ${props.className}`}
ref={ref}
>
{props.children}
</h5>
);
},
),
h6: forwardRef<HTMLHeadingElement, HTMLAttributes<HTMLHeadingElement>>(
(props, ref) => {
return (
<h6
className={`m3 m3-typography title-small ${props.className}`}
ref={ref}
>
{props.children}
</h6>
);
},
),
};
export const Typography = forwardRef<TypographyTargetRef, TypographyProps>(
({ size, role, children, ...props }, ref) => {
const typeElement = getTypographyRole(role, size);
const extraClasses =
`m3 m3-typography ${size && role ? `${role}-${size}` : ''}`.trimEnd();
return createElement(
typeElement,
{
...props,
ref: ref,
className: extraClasses,
},
children,
);
},
);

21
src/primitive-components/typography/typography.types.ts Normal file
View File

@@ -0,0 +1,21 @@
import { HTMLAttributes } from 'react';
export type Typography =
| HTMLLabelElement
| HTMLHeadingElement
| HTMLSpanElement
| HTMLParagraphElement;
export type TypographySize = 'hero' | 'xl' | 'small' | 'medium' | 'large';
export type TypographyRole =
| 'display'
| 'headline'
| 'title'
| 'body'
| 'label';
export interface TypographyProps extends HTMLAttributes<Typography> {
size: TypographySize;
role: TypographyRole;
}