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

Fix - Updates to Expressive text styles #1167

Merged
merged 8 commits into from
Dec 5, 2023
+211 −166
Merged

Fix - Updates to Expressive text styles #1167

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
3be640b
inital progress checkin
chris-cedrone-cengage Nov 30, 2023
5e822c4
Laura's review
chris-cedrone-cengage Nov 30, 2023
9a95d64
fixing reference
chris-cedrone-cengage Nov 30, 2023
7cd02ce
removing unecessary changeset, tweaking two lines Laura found
chris-cedrone-cengage Nov 30, 2023
5d60616
Update docs + expressive color
silvalaura Dec 4, 2023
18906b2
Fix test
silvalaura Dec 4, 2023
6738191
Fix color
silvalaura Dec 4, 2023
6059b80
Remove primary color from expressive body paragraph
silvalaura Dec 5, 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
5 changes: 5 additions & 0 deletions .changeset/fix-expressiveText.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
'react-magma-dom': patch
---

fix: Updates to the expressive font styles for both desktop and mobile.
189 changes: 92 additions & 97 deletions packages/react-magma-dom/src/components/Heading/Heading.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,67 +11,136 @@ import { Meta } from '@storybook/react/types-6-0';
export default {
component: Heading,
title: 'Heading',
argTypes: {
isInverse: {
control: {
type: 'boolean',
},
defaultValue: false,
},
},
} as Meta;

export const Default = () => {
export const Default = args => {
return (
<>
<Heading level={1}>Heading 1 (X-Large) - Productive</Heading>
<Heading level={2}>Heading 2 (Large) - Productive</Heading>
<Heading level={3}>Heading 3 (Medium) - Productive</Heading>
<Heading level={4}>Heading 4 (Small) - Productive</Heading>
<Heading level={5}>Heading 5 (X-Small) - Productive</Heading>
<Heading level={6}>Heading 6 (2X-Small) - Productive</Heading>
<Card isInverse={args.isInverse} style={{ padding: '0 24px' }}>
<Heading level={1} {...args}>
Heading 1 (X-Large) - Productive
</Heading>
<Heading level={2} {...args}>
Heading 2 (Large) - Productive
</Heading>
<Heading level={3} {...args}>
Heading 3 (Medium) - Productive
</Heading>
<Heading level={4} {...args}>
Heading 4 (Small) - Productive
</Heading>
<Heading level={5} {...args}>
Heading 5 (X-Small) - Productive
</Heading>
<Heading level={6} {...args}>
Heading 6 (2X-Small) - Productive
</Heading>
<br />
<Heading
level={1}
contextVariant={TypographyContextVariant.expressive}
visualStyle={TypographyVisualStyle.heading2XLarge}
{...args}
>
Heading 1 (2X-Large) - Expressive
</Heading>
<Heading level={1} contextVariant={TypographyContextVariant.expressive}>
<Heading
level={1}
contextVariant={TypographyContextVariant.expressive}
{...args}
>
Heading 1 (X-Large) - Expressive
</Heading>
<Heading level={2} contextVariant={TypographyContextVariant.expressive}>
<Heading
level={2}
contextVariant={TypographyContextVariant.expressive}
{...args}
>
Heading 2 (Large) - Expressive
</Heading>
<Heading level={3} contextVariant={TypographyContextVariant.expressive}>
<Heading
level={3}
contextVariant={TypographyContextVariant.expressive}
{...args}
>
Heading 3 (Medium) - Expressive
</Heading>
<Heading level={4} contextVariant={TypographyContextVariant.expressive}>
<Heading
level={4}
contextVariant={TypographyContextVariant.expressive}
{...args}
>
Heading 4 (Small) - Expressive
</Heading>
<Heading level={5} contextVariant={TypographyContextVariant.expressive}>
<Heading
level={5}
contextVariant={TypographyContextVariant.expressive}
{...args}
>
Heading 5 (X-Small) - Expressive
</Heading>
<Heading level={6} contextVariant={TypographyContextVariant.expressive}>
<Heading
level={6}
contextVariant={TypographyContextVariant.expressive}
{...args}
>
Heading 6 (2X-Small) - Expressive
</Heading>
<br />
<Heading level={1} contextVariant={TypographyContextVariant.narrative}>
<Heading
level={1}
contextVariant={TypographyContextVariant.narrative}
{...args}
>
Heading 1 (X-Large) - Narrative
</Heading>
<Heading level={2} contextVariant={TypographyContextVariant.narrative}>
<Heading
level={2}
contextVariant={TypographyContextVariant.narrative}
{...args}
>
Heading 2 (Large) - Narrative
</Heading>
<Heading level={3} contextVariant={TypographyContextVariant.narrative}>
<Heading
level={3}
contextVariant={TypographyContextVariant.narrative}
{...args}
>
Heading 3 (Medium) - Narrative
</Heading>
<Heading level={4} contextVariant={TypographyContextVariant.narrative}>
<Heading
level={4}
contextVariant={TypographyContextVariant.narrative}
{...args}
>
Heading 4 (Small) - Narrative
</Heading>
<Heading level={5} contextVariant={TypographyContextVariant.narrative}>
<Heading
level={5}
contextVariant={TypographyContextVariant.narrative}
{...args}
>
Heading 5 (X-Small) - Narrative
</Heading>
<Heading level={6} contextVariant={TypographyContextVariant.narrative}>
<Heading
level={6}
contextVariant={TypographyContextVariant.narrative}
{...args}
>
Heading 6 (2X-Small) - Narrative
</Heading>
</>
</Card>
);
};

export const Colors = () => {
export const Colors = args => {
return (
<>
<Card style={{ padding: '0 24px' }}>
Expand Down Expand Up @@ -104,78 +173,4 @@ export const Colors = () => {
);
};

export const Inverse = () => {
return (
<Card isInverse style={{ padding: '0 24px' }}>
<Heading level={1} isInverse>
Heading 1 (X-Large) - Productive
</Heading>
<Heading level={2} isInverse>
Heading 2 (Large) - Productive
</Heading>
<Heading level={3} isInverse>
Heading 3 (Medium) - Productive
</Heading>
<Heading level={4} isInverse>
Heading 4 (Small) - Productive
</Heading>
<Heading level={5} isInverse>
Heading 5 (X-Small) - Productive
</Heading>
<Heading level={6} isInverse>
Heading 6 (2X-Small) - Productive
</Heading>
<br />
<Heading
level={1}
contextVariant={TypographyContextVariant.expressive}
visualStyle={TypographyVisualStyle.heading2XLarge}
isInverse
>
Heading 1 (2X-Large) - Expressive
</Heading>
<Heading
level={1}
contextVariant={TypographyContextVariant.expressive}
isInverse
>
Heading 1 (X-Large) - Expressive
</Heading>
<Heading
level={2}
contextVariant={TypographyContextVariant.expressive}
isInverse
>
Heading 2 (Large) - Expressive
</Heading>
<Heading
level={3}
contextVariant={TypographyContextVariant.expressive}
isInverse
>
Heading 3 (Medium) - Expressive
</Heading>
<Heading
level={4}
contextVariant={TypographyContextVariant.expressive}
isInverse
>
Heading 4 (Small) - Expressive
</Heading>
<Heading
level={5}
contextVariant={TypographyContextVariant.expressive}
isInverse
>
Heading 5 (X-Small) - Expressive
</Heading>
<Heading
level={6}
contextVariant={TypographyContextVariant.expressive}
isInverse
>
Heading 6 (2X-Small) - Expressive
</Heading>
</Card>
);
};
Colors.parameters = { controls: { exclude: ['isInverse'] } };
55 changes: 36 additions & 19 deletions packages/react-magma-dom/src/components/Paragraph/Paragraph.stories.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,77 +2,94 @@ import React from 'react';
import { Paragraph } from '.';
import { TypographyContextVariant, TypographyVisualStyle } from '../Typography';
import { Meta } from '@storybook/react/types-6-0';
import { Card } from '../..';

export default {
component: Paragraph,
title: 'Paragraph',
argTypes: {
isInverse: {
control: {
type: 'boolean',
},
defaultValue: false,
},
},
} as Meta;

export const Default = () => {
export const Default = args => {
return (
<>
<Paragraph visualStyle={TypographyVisualStyle.bodyLarge}>
Body Large
<Card isInverse={args.isInverse} style={{ padding: '0 24px' }}>
<Paragraph visualStyle={TypographyVisualStyle.bodyLarge} {...args}>
Paragraph Body Large
</Paragraph>
<Paragraph visualStyle={TypographyVisualStyle.bodyMedium}>
Body Medium
<Paragraph visualStyle={TypographyVisualStyle.bodyMedium} {...args}>
Paragraph Body Medium
</Paragraph>
<Paragraph visualStyle={TypographyVisualStyle.bodySmall}>
Body Small
<Paragraph visualStyle={TypographyVisualStyle.bodySmall} {...args}>
Paragraph Body Small
</Paragraph>
<Paragraph visualStyle={TypographyVisualStyle.bodyXSmall}>
Body X-Small
<Paragraph visualStyle={TypographyVisualStyle.bodyXSmall} {...args}>
Paragraph Body X-Small
</Paragraph>

<Paragraph
visualStyle={TypographyVisualStyle.bodyLarge}
contextVariant={TypographyContextVariant.narrative}
{...args}
>
Narrative Large
Paragraph Narrative Large
</Paragraph>
<Paragraph
visualStyle={TypographyVisualStyle.bodyMedium}
contextVariant={TypographyContextVariant.narrative}
{...args}
>
Narrative Medium
Paragraph Narrative Medium
</Paragraph>
<Paragraph
visualStyle={TypographyVisualStyle.bodySmall}
contextVariant={TypographyContextVariant.narrative}
{...args}
>
Narrative Small
Paragraph Narrative Small
</Paragraph>
<Paragraph
visualStyle={TypographyVisualStyle.bodyXSmall}
contextVariant={TypographyContextVariant.narrative}
{...args}
>
Narrative X-Small
Paragraph Narrative X-Small
</Paragraph>

<Paragraph
visualStyle={TypographyVisualStyle.bodyLarge}
contextVariant={TypographyContextVariant.expressive}
{...args}
>
Expressive Large
Paragraph Expressive Large
</Paragraph>
<Paragraph
visualStyle={TypographyVisualStyle.bodyMedium}
contextVariant={TypographyContextVariant.expressive}
{...args}
>
Expressive Medium
Paragraph Expressive Medium
</Paragraph>
<Paragraph
visualStyle={TypographyVisualStyle.bodySmall}
contextVariant={TypographyContextVariant.expressive}
{...args}
>
Expressive Small
Paragraph Expressive Small
</Paragraph>
<Paragraph
visualStyle={TypographyVisualStyle.bodyXSmall}
contextVariant={TypographyContextVariant.expressive}
{...args}
>
Expressive X-Small
Paragraph Expressive X-Small
</Paragraph>
</>
</Card>
);
};
Loading
Loading