Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Encourage response font sizes #357

Merged
merged 2 commits into from
Nov 30, 2023
Merged

feat: Encourage response font sizes #357

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cb84f03
feat: Encourage response font sizes
VickyKoblinski Nov 8, 2023
c48a197
fix: ENCS-4466 Fixed breakpoints and addressed comments
jameslu-e4s Nov 30, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
15 changes: 4 additions & 11 deletions src/_foundations/Typography/index.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -12,12 +12,9 @@ import { Grid, IconButton, Tooltip, Typography } from '@mui/material';
import { useTheme } from '@mui/material/styles';
import { Variant } from '@mui/material/styles/createTypography';
import { Meta, StoryObj } from '@storybook/react';
import { compact, isPlainObject, isString, sortBy } from 'lodash';
import { compact, isPlainObject } from 'lodash';
import React from 'react';

import pxToNumber from '@actinc/dls/helpers/pxToNumber';
import { Px } from '@actinc/dls/types';

import {
StyledCode,
StyledDivider,
Expand All @@ -40,6 +37,7 @@ const Story = (): React.ReactElement => {

const variants = compact(
Object.keys(typography).map((key: string) => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
if (isPlainObject((typography as any)[key])) {
return key as Variant;
}
Expand All @@ -48,13 +46,7 @@ const Story = (): React.ReactElement => {
}),
).filter((v: string): boolean => v !== 'allVariants');

const sortedVariants = sortBy(variants, v => {
const fontSize = typography[v].fontSize;

return fontSize && isString(fontSize)
? pxToNumber(fontSize as Px)
: fontSize;
}).reverse();
joncursi marked this conversation as resolved.
Show resolved Hide resolved
const sortedVariants = variants;
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Can we get rid of this variable now that it's the same as variants? The name is now a little misleading.


return (
<>
Expand All @@ -75,6 +67,7 @@ const Story = (): React.ReactElement => {
<>
{Object.keys(properties).map(
(key): React.ReactElement => {
// eslint-disable-next-line @typescript-eslint/no-explicit-any
const cssStyle = (properties as any)[key];
const value = typography[variant][key];

Expand Down
4 changes: 2 additions & 2 deletions src/styles/themeEncourage/components.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -169,10 +169,10 @@ export const components: ThemeOptions['components'] = {
},
MuiBreadcrumbs: {
styleOverrides: {
separator: {
separator: () => ({
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

If this doesn't depend on any theme parameters, does it still have to be a lambda?

...typography.body1,
color: customPalette.text.over.light.medium,
},
}),
},
},
MuiButton: {
Expand Down
14 changes: 0 additions & 14 deletions src/styles/themeEncourage/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,6 @@
* @prettier
*/

import { BreakpointsOptions } from '@mui/material/styles';
import deepMerge from 'deepmerge';

import { typeOk } from '@actinc/dls/helpers/types';
Expand All @@ -25,9 +24,6 @@ import typography from './typography';
import zIndex from './zIndex';

export type ThemeCustomizations = ICustomDims & {
breakpoints: BreakpointsOptions & {
values: BreakpointsOptions['values'] & { mobile: number };
};
palette: CustomPaletteOptions;
spacingPx: number;
};
Expand Down Expand Up @@ -66,16 +62,6 @@ export const THEME_ENCOURAGE_V2: CustomThemeOptions<
> = deepMerge(
baseTheme,
typeOk<CustomThemeOptions<Omit<ThemeCustomizations, 'palette'>>>()({
breakpoints: {
values: {
lg: 1280,
md: 960,
mobile: 720,
sm: 720,
xl: 1280,
xs: 375,
},
},
Comment on lines -69 to -78
Copy link
Collaborator Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I removed this because apparently it was never working?? And design for E4S have been using MUIs standard breakpoints.

Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Huh, interesting 🤔

Do you know what was missing that caused these breakpoints to not "stick" at runtime?

components,
customDims,
palette,
Expand Down
185 changes: 166 additions & 19 deletions src/styles/themeEncourage/typography.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,18 @@
* @prettier
*/

import { TypographyVariantsOptions } from '@mui/material/styles';
import {
TypographyVariantsOptions,
createTheme as muiCreateTheme,
} from '@mui/material/styles';

import px from '@actinc/dls/helpers/px';
import { Px } from '@actinc/dls/types';

import { customPalette } from './palette';

const theme = muiCreateTheme();

export const primaryFontFamily = [
'"Work Sans"',
'Roboto',
Expand Down Expand Up @@ -85,22 +90,56 @@ const typography: TypographyVariantsOptions = {
},
...BASE_FONT_SIZE,
fontFamily: secondaryFontFamily,
fontSize: '16px',
fontWeight: 400,
lineHeight: '24px',
[theme.breakpoints.up('sm')]: {
fontSize: '16px',
fontWeight: 400,
lineHeight: '24px',
},
[theme.breakpoints.up('lg')]: {
fontSize: '16px',
fontWeight: 400,
lineHeight: '24px',
},
[theme.breakpoints.up('xl')]: {
fontSize: '16px',
fontWeight: 400,
lineHeight: '24px',
},
},
body2: {
'& > strong': {
fontWeight: 700,
},
fontFamily: secondaryFontFamily,
fontSize: 14,
fontSize: '14px',
fontWeight: 400,
letterSpacing: px(0),
lineHeight: px(20),
lineHeight: '20px',
[theme.breakpoints.up('sm')]: {
fontSize: '14px',
fontWeight: 400,
lineHeight: '20px',
},
[theme.breakpoints.up('lg')]: {
fontSize: '14px',
fontWeight: 400,
lineHeight: '20px',
},
[theme.breakpoints.up('xl')]: {
fontSize: '14px',
fontWeight: 400,
lineHeight: '20px',
},
},
button: {
...INPUT_FONT_SIZE,
fontFamily: primaryFontFamily,
fontSize: '16px',
fontWeight: 600,
lineHeight: '20px',
},
caption: {
fontFamily: secondaryFontFamily,
Expand All @@ -111,50 +150,127 @@ const typography: TypographyVariantsOptions = {
},
fontFamily: primaryFontFamily,
fontWeightBold: 800,
fontWeightLight: 200,
fontWeightLight: 500,
fontWeightMedium: 600,
fontWeightRegular: 400,
h1: {
fontFamily: primaryFontFamily,
fontSize: 48,
fontSize: 32,
fontWeight: 600,
letterSpacing: px(-1),
lineHeight: px(64),
lineHeight: px(38),
[theme.breakpoints.up('sm')]: {
fontSize: 32,
lineHeight: px(38),
},
[theme.breakpoints.up('lg')]: {
fontSize: 48,
lineHeight: px(64),
},
[theme.breakpoints.up('xl')]: {
fontSize: 48,
lineHeight: px(64),
},
},
h2: {
fontFamily: primaryFontFamily,
fontSize: 40,
fontWeight: 600,
fontSize: '28px',
fontWeight: 500,
letterSpacing: px(-1),
lineHeight: px(48),
lineHeight: '32px',
[theme.breakpoints.up('sm')]: {
fontSize: '28px',
fontWeight: 500,
lineHeight: '32px',
},
[theme.breakpoints.up('lg')]: {
fontSize: '40px',
fontWeight: 600,
lineHeight: '48px',
},
[theme.breakpoints.up('xl')]: {
fontSize: '40px',
fontWeight: 600,
lineHeight: '48px',
},
},
h3: {
fontFamily: primaryFontFamily,
fontSize: 32,
fontSize: '24px',
fontWeight: 600,
letterSpacing: px(-1),
lineHeight: px(40),
lineHeight: '32px',
[theme.breakpoints.up('sm')]: {
fontSize: '24px',
fontWeight: 600,
lineHeight: '32px',
},
[theme.breakpoints.up('lg')]: {
fontSize: '32px',
fontWeight: 600,
lineHeight: '40px',
},
[theme.breakpoints.up('xl')]: {
fontSize: '32px',
fontWeight: 600,
lineHeight: '40px',
},
},
h4: {
fontFamily: primaryFontFamily,
fontSize: 28,
fontSize: '20px',
fontWeight: 600,
letterSpacing: px(-0.5),
lineHeight: px(40),
lineHeight: '24px',
[theme.breakpoints.up('sm')]: {
fontSize: '20px',
fontWeight: 600,
lineHeight: '24px',
},
[theme.breakpoints.up('lg')]: {
fontSize: '28px',
fontWeight: 600,
lineHeight: '40px',
},
[theme.breakpoints.up('xl')]: {
fontSize: '28px',
fontWeight: 600,
lineHeight: '40px',
},
},
h5: {
fontFamily: primaryFontFamily,
fontSize: 24,
fontSize: '18px',
fontWeight: 600,
letterSpacing: px(-0.75),
lineHeight: px(40),
lineHeight: '24px',
[theme.breakpoints.up('lg')]: {
fontSize: '24px',
fontWeight: 600,
lineHeight: '32px',
},
},
h6: {
fontFamily: primaryFontFamily,
fontSize: 18,
fontWeight: 600,
fontSize: '18px',
fontWeight: 500,
letterSpacing: px(-0.5),
lineHeight: px(24),
lineHeight: '24px',
[theme.breakpoints.up('sm')]: {
fontSize: '18px',
fontWeight: 500,
lineHeight: '24px',
},
[theme.breakpoints.up('lg')]: {
fontSize: '18px',
fontWeight: 600,
lineHeight: '24px',
},
[theme.breakpoints.up('xl')]: {
fontSize: '18px',
fontWeight: 600,
lineHeight: '24px',
},
},
overline: {
fontFamily: tertiaryFontFamily,
Expand All @@ -165,17 +281,48 @@ const typography: TypographyVariantsOptions = {
},
subtitle1: {
fontFamily: secondaryFontFamily,
fontSize: 18,
fontSize: '18px',
fontWeight: 400,
letterSpacing: px(0),
lineHeight: px(24),
textTransform: undefined, // Clear the base theme's transform
[theme.breakpoints.up('sm')]: {
fontSize: '18px',
fontWeight: 400,
lineHeight: '24px',
},
[theme.breakpoints.up('lg')]: {
fontSize: '18px',
fontWeight: 400,
lineHeight: '24px',
},
[theme.breakpoints.up('xl')]: {
fontSize: '18px',
fontWeight: 400,
lineHeight: '24px',
},
},
subtitle2: {
fontFamily: secondaryFontFamily,
fontSize: 16,
fontWeight: 400,
letterSpacing: px(0),
lineHeight: px(24),
[theme.breakpoints.up('sm')]: {
fontSize: '16px',
fontWeight: 400,
lineHeight: '24px',
},
[theme.breakpoints.up('lg')]: {
fontSize: '16px',
fontWeight: 400,
lineHeight: '24px',
},
[theme.breakpoints.up('xl')]: {
fontSize: '16px',
fontWeight: 400,
lineHeight: '24px',
},
},
};

Expand Down
Loading