Skip to content

Commit

Permalink
fix: Updates to the Expressive font styles for both desktop and mobile (
Browse files Browse the repository at this point in the history 
#1167)

Co-authored-by: Laura Silva <[email protected]>
  • Loading branch information
@chris-cedrone-cengage @silvalaura
chris-cedrone-cengage and silvalaura authored Dec 5, 2023
1 parent 61ee673 commit 1fb88b6
Show file tree
Hide file tree
Showing 7 changed files with 211 additions and 166 deletions.
5 changes: 5 additions & 0 deletions .changeset/fix-expressiveText.md
View file
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
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
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

2 comments on commit 1fb88b6

@github-actions
Copy link
Contributor

Choose a reason for hiding this comment

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

🚀 Deployed on https://next--upbeat-sinoussi-f675aa.netlify.app

@github-actions
Copy link
Contributor

Choose a reason for hiding this comment

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

🚀 Deployed on https://storybook-preview-dev--upbeat-sinoussi-f675aa.netlify.app

Please sign in to comment.