Skip to content

Commit

Permalink
feat(Heading): Add a description of the noTopMargin and `noBottomMa…
Browse files Browse the repository at this point in the history 
…rgin` props to the documentation. (#1529)

Co-authored-by: Nikita Orliak <[email protected]>
  • Loading branch information
@nikitaorliak-cengage
nikitaorliak-cengage and Nikita Orliak authored Nov 5, 2024
1 parent f6ae476 commit 3a97fe9
Show file tree
Hide file tree
Showing 4 changed files with 204 additions and 0 deletions.
4 changes: 4 additions & 0 deletions .changeset/feat-heading-add-props.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,4 @@
---
'react-magma-dom': patch
---
patch(Heading): Add the `noTopMargin` and `noBottomMargin` props to the `Heading` component.
18 changes: 18 additions & 0 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 @@ -18,6 +18,24 @@ export default {
},
defaultValue: false,
},
noMargins: {
control: {
type: 'boolean',
},
defaultValue: false,
},
noTopMargin: {
control: {
type: 'boolean',
},
defaultValue: false,
},
noBottomMargin: {
control: {
type: 'boolean',
},
defaultValue: false,
},
},
} as Meta;

Expand Down
114 changes: 114 additions & 0 deletions packages/react-magma-dom/src/components/Heading/Heading.test.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -174,6 +174,120 @@ describe('Heading', () => {
expect(getByText(headingText6)).toHaveStyleRule('margin', '0');
});

it('should render headings without top margin styles', () => {
const headingText1 = 'test 1';
const headingText2 = 'test 2';
const headingText3 = 'test 3';
const headingText4 = 'test 4';
const headingText5 = 'test 5';
const headingText6 = 'test 6';

const { getByText } = render(
<>
<Heading noTopMargin level={1}>
{headingText1}
</Heading>
<Heading noTopMargin level={2}>
{headingText2}
</Heading>
<Heading noTopMargin level={3}>
{headingText3}
</Heading>
<Heading noTopMargin level={4}>
{headingText4}
</Heading>
<Heading noTopMargin level={5}>
{headingText5}
</Heading>
<Heading noTopMargin level={6}>
{headingText6}
</Heading>
</>
);

expect(getByText(headingText1)).toHaveStyleRule(
'margin',
`0 0 ${magma.spaceScale.spacing05} 0`
);
expect(getByText(headingText2)).toHaveStyleRule(
'margin',
`0 0 ${magma.spaceScale.spacing05} 0`
);
expect(getByText(headingText3)).toHaveStyleRule(
'margin',
`0 0 ${magma.spaceScale.spacing05} 0`
);
expect(getByText(headingText4)).toHaveStyleRule(
'margin',
`0 0 ${magma.spaceScale.spacing05} 0`
);
expect(getByText(headingText5)).toHaveStyleRule(
'margin',
`0 0 ${magma.spaceScale.spacing05} 0`
);
expect(getByText(headingText6)).toHaveStyleRule(
'margin',
`0 0 ${magma.spaceScale.spacing03} 0`
);
});

it('should render headings without bottom margin styles', () => {
const headingText1 = 'test 1';
const headingText2 = 'test 2';
const headingText3 = 'test 3';
const headingText4 = 'test 4';
const headingText5 = 'test 5';
const headingText6 = 'test 6';

const { getByText } = render(
<>
<Heading noBottomMargin level={1}>
{headingText1}
</Heading>
<Heading noBottomMargin level={2}>
{headingText2}
</Heading>
<Heading noBottomMargin level={3}>
{headingText3}
</Heading>
<Heading noBottomMargin level={4}>
{headingText4}
</Heading>
<Heading noBottomMargin level={5}>
{headingText5}
</Heading>
<Heading noBottomMargin level={6}>
{headingText6}
</Heading>
</>
);

expect(getByText(headingText1)).toHaveStyleRule(
'margin',
`${magma.spaceScale.spacing05} 0 0 0`
);
expect(getByText(headingText2)).toHaveStyleRule(
'margin',
`${magma.spaceScale.spacing10} 0 0 0`
);
expect(getByText(headingText3)).toHaveStyleRule(
'margin',
`${magma.spaceScale.spacing09} 0 0 0`
);
expect(getByText(headingText4)).toHaveStyleRule(
'margin',
`${magma.spaceScale.spacing08} 0 0 0`
);
expect(getByText(headingText5)).toHaveStyleRule(
'margin',
`${magma.spaceScale.spacing06} 0 0 0`
);
expect(getByText(headingText6)).toHaveStyleRule(
'margin',
`${magma.spaceScale.spacing06} 0 0 0`
);
});

it('should render inverse styles', () => {
const headingText = 'test';
const { getByText } = render(
Expand Down
68 changes: 68 additions & 0 deletions website/react-magma-docs/src/pages/api/heading.mdx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -239,6 +239,74 @@ export function Example() {
}
```

## No Top Margin

When the `noTopMargin` prop is used, the element will have a top margin value of 0.

```tsx
import React from 'react';
import { Heading } from 'react-magma-dom';

export function Example() {
return (
<>
<Heading noTopMargin level={1}>
Heading 1
</Heading>
<Heading noTopMargin level={2}>
Heading 2
</Heading>
<Heading noTopMargin level={3}>
Heading 3
</Heading>
<Heading noTopMargin level={4}>
Heading 4
</Heading>
<Heading noTopMargin level={5}>
Heading 5
</Heading>
<Heading noTopMargin level={6}>
Heading 6
</Heading>
</>
);
}
```

## No Bottom Margin

When the `noBottomMargin` prop is used, the element will have a bottom margin value of 0.

```tsx
import React from 'react';
import { Heading } from 'react-magma-dom';

export function Example() {
return (
<>
<Heading noBottomMargin level={1}>
Heading 1
</Heading>
<Heading noBottomMargin level={2}>
Heading 2
</Heading>
<Heading noBottomMargin level={3}>
Heading 3
</Heading>
<Heading noBottomMargin level={4}>
Heading 4
</Heading>
<Heading noBottomMargin level={5}>
Heading 5
</Heading>
<Heading noBottomMargin level={6}>
Heading 6
</Heading>
</>
);
}
```

## Forward Ref

Using React's `forwardRef` feature you can gain access to the reference of the internal heading.
Expand Down

2 comments on commit 3a97fe9

@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.