Skip to content

Commit c7e78fa

Browse files
rsarisrsaris
committed
Move HeadingSizes enum to be singular
1 parent 31be1ae commit c7e78fa

File tree

5 files changed

+32
-32
lines changed

5 files changed

+32
-32
lines changed

‎src/EmptyState/EmptyState.tsx‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@ import React, { ReactNode } from 'react';
22

33
import classNames from 'classnames';
44

5-
import { Heading, HeadingSizes } from '../Heading';
5+
import { Heading, HeadingSize } from '../Heading';
66
import { Text } from '../Text';
77

88
import './EmptyState.scss';
@@ -47,7 +47,7 @@ function EmptyState({
4747
<Heading
4848
className="EmptyState__title"
4949
level={4}
50-
size={HeadingSizes.SMALL}
50+
size={HeadingSize.SMALL}
5151
textAlign="center"
5252
>
5353
{title}

‎src/Heading/Heading.stories.tsx‎

Lines changed: 17 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React from 'react';
22
import type { Meta, StoryObj } from '@storybook/react';
33

4-
import { Heading, HeadingSizes } from './Heading';
4+
import { Heading, HeadingSize } from './Heading';
55

66
const meta: Meta<typeof Heading> = {
77
component: Heading,
@@ -61,11 +61,11 @@ export const Default: Story = {
6161
export const Levels: Story = {
6262
render: () => (
6363
<>
64-
<Heading level={1} size={HeadingSizes.LARGE}>The fastest way to recruit research participants</Heading>
65-
<Heading level={2} size={HeadingSizes.MEDIUM}>The fastest way to recruit research participants</Heading>
66-
<Heading level={3} size={HeadingSizes.SMALL}>The fastest way to recruit research participants</Heading>
67-
<Heading level={4} size={HeadingSizes.TEXT}>The fastest way to recruit research participants</Heading>
68-
<Heading level={5} size={HeadingSizes.SUBTEXT}>The fastest way to recruit research participants</Heading>
64+
<Heading level={1} size={HeadingSize.LARGE}>The fastest way to recruit research participants</Heading>
65+
<Heading level={2} size={HeadingSize.MEDIUM}>The fastest way to recruit research participants</Heading>
66+
<Heading level={3} size={HeadingSize.SMALL}>The fastest way to recruit research participants</Heading>
67+
<Heading level={4} size={HeadingSize.TEXT}>The fastest way to recruit research participants</Heading>
68+
<Heading level={5} size={HeadingSize.SUBTEXT}>The fastest way to recruit research participants</Heading>
6969
</>
7070
),
7171
};
@@ -77,11 +77,11 @@ export const Levels: Story = {
7777
export const Sizes: Story = {
7878
render: () => (
7979
<>
80-
<Heading level={2} size={HeadingSizes.LARGE}>This is a heading level 2 with size="large"</Heading>
81-
<Heading level={2} size={HeadingSizes.MEDIUM}>This is a heading level 2 with size="medium"</Heading>
82-
<Heading level={2} size={HeadingSizes.SMALL}>This is a heading level 2 with size="small"</Heading>
83-
<Heading level={2} size={HeadingSizes.TEXT}>This is a heading level 2 with size="text"</Heading>
84-
<Heading level={2} size={HeadingSizes.SUBTEXT}>This is a heading level 2 with size="subtext"</Heading>
80+
<Heading level={2} size={HeadingSize.LARGE}>This is a heading level 2 with size="large"</Heading>
81+
<Heading level={2} size={HeadingSize.MEDIUM}>This is a heading level 2 with size="medium"</Heading>
82+
<Heading level={2} size={HeadingSize.SMALL}>This is a heading level 2 with size="small"</Heading>
83+
<Heading level={2} size={HeadingSize.TEXT}>This is a heading level 2 with size="text"</Heading>
84+
<Heading level={2} size={HeadingSize.SUBTEXT}>This is a heading level 2 with size="subtext"</Heading>
8585
</>
8686
),
8787
};
@@ -94,9 +94,9 @@ export const Sizes: Story = {
9494
export const Weights: Story = {
9595
render: () => (
9696
<>
97-
<Heading level={2} size={HeadingSizes.MEDIUM} weight="bold">The fastest way to recruit research participants</Heading>
98-
<Heading level={2} size={HeadingSizes.MEDIUM} weight="medium">The fastest way to recruit research participants</Heading>
99-
<Heading level={2} size={HeadingSizes.MEDIUM} weight="regular">The fastest way to recruit research participants</Heading>
97+
<Heading level={2} size={HeadingSize.MEDIUM} weight="bold">The fastest way to recruit research participants</Heading>
98+
<Heading level={2} size={HeadingSize.MEDIUM} weight="medium">The fastest way to recruit research participants</Heading>
99+
<Heading level={2} size={HeadingSize.MEDIUM} weight="regular">The fastest way to recruit research participants</Heading>
100100
</>
101101
),
102102
};
@@ -109,9 +109,9 @@ export const Weights: Story = {
109109
export const Alignment: Story = {
110110
render: () => (
111111
<>
112-
<Heading level={2} size={HeadingSizes.MEDIUM} textAlign="left" weight="bold">The fastest way to recruit research participants</Heading>
113-
<Heading level={2} size={HeadingSizes.MEDIUM} textAlign="center" weight="bold">The fastest way to recruit research participants</Heading>
114-
<Heading level={2} size={HeadingSizes.MEDIUM} textAlign="right" weight="bold">The fastest way to recruit research participants</Heading>
112+
<Heading level={2} size={HeadingSize.MEDIUM} textAlign="left" weight="bold">The fastest way to recruit research participants</Heading>
113+
<Heading level={2} size={HeadingSize.MEDIUM} textAlign="center" weight="bold">The fastest way to recruit research participants</Heading>
114+
<Heading level={2} size={HeadingSize.MEDIUM} textAlign="right" weight="bold">The fastest way to recruit research participants</Heading>
115115
</>
116116
),
117117
};

‎src/Heading/Heading.tsx‎

Lines changed: 7 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import classNames from 'classnames';
44

55
import * as styles from './Heading.module.css';
66

7-
export enum HeadingSizes {
7+
export enum HeadingSize {
88
LARGE = 'large',
99
MEDIUM = 'medium',
1010
SMALL = 'small',
@@ -30,17 +30,17 @@ export interface HeadingProps {
3030
* @description Sizes map to the available font-sizes from the defined list of font-types.
3131
* Adjust for visual hierarchy.
3232
*/
33-
size: HeadingSizes;
33+
size: HeadingSize;
3434
textAlign?: 'left' | 'center' | 'right';
3535
weight?: 'regular' | 'medium' | 'bold';
3636
}
3737

3838
const SIZE_CLASSES = {
39-
[HeadingSizes.LARGE]: styles.large,
40-
[HeadingSizes.MEDIUM]: styles.medium,
41-
[HeadingSizes.SMALL]: styles.small,
42-
[HeadingSizes.TEXT]: styles.text,
43-
[HeadingSizes.SUBTEXT]: styles.subtext,
39+
[HeadingSize.LARGE]: styles.large,
40+
[HeadingSize.MEDIUM]: styles.medium,
41+
[HeadingSize.SMALL]: styles.small,
42+
[HeadingSize.TEXT]: styles.text,
43+
[HeadingSize.SUBTEXT]: styles.subtext,
4444
} as const;
4545

4646
/* TODO Remove this? */

‎src/MoneyInput/MoneyInput.stories.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
import React, { useState } from 'react';
22

33
import FormGroup from '../FormGroup';
4-
import { Heading, HeadingSizes } from '../Heading';
4+
import { Heading, HeadingSize } from '../Heading';
55
import MoneyInput from './MoneyInput';
66

77
import mdx from './MoneyInput.mdx';
@@ -35,7 +35,7 @@ export function Default(args) {
3535
{...args}
3636
/>
3737
<br />
38-
<Heading level={1} size={HeadingSizes.SMALL}>Value: {value}</Heading>
38+
<Heading level={1} size={HeadingSize.SMALL}>Value: {value}</Heading>
3939
</FormGroup>
4040
);
4141
}
@@ -69,7 +69,7 @@ export function Step(args) {
6969
{...args}
7070
/>
7171
<br />
72-
<Heading level={1} size={HeadingSizes.SMALL}>Value: {value}</Heading>
72+
<Heading level={1} size={HeadingSize.SMALL}>Value: {value}</Heading>
7373
</FormGroup>
7474
);
7575
}
@@ -104,7 +104,7 @@ export function Prefix(args) {
104104
{...args}
105105
/>
106106
<br />
107-
<Heading level={1} size={HeadingSizes.SMALL}>Value: {value}</Heading>
107+
<Heading level={1} size={HeadingSize.SMALL}>Value: {value}</Heading>
108108
</FormGroup>
109109
);
110110
}

‎src/index.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -37,7 +37,7 @@ import { FlexContainer } from './FlexContainer';
3737
import Form from './Form';
3838
import FormControlLabel from './FormControlLabel';
3939
import FormGroup from './FormGroup';
40-
import { Heading, HeadingSizes } from './Heading';
40+
import { Heading, HeadingSize } from './Heading';
4141
import IconButton from './IconButton';
4242
import IconCell from './IconCell';
4343
import Input from './Input';
@@ -147,7 +147,7 @@ export {
147147
FormControlLabel,
148148
FormGroup,
149149
Heading,
150-
HeadingSizes,
150+
HeadingSize,
151151
IconButton,
152152
IconCell,
153153
Input,

0 commit comments

Comments
 (0)