Skip to content

Commit a96f801

Browse files
WesSouzaarturbien
authored andcommitted
feat(fieldset): convert to TypeScript and export types
1 parent 895279d commit a96f801

File tree

4 files changed

+47
-34
lines changed

4 files changed

+47
-34
lines changed

src/Fieldset/Fieldset.spec.js renamed to src/Fieldset/Fieldset.spec.tsx

+6-8
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
1-
import React from 'react';
2-
31
import { renderWithTheme, theme } from '../../test/utils';
42

5-
import Fieldset from './Fieldset';
3+
import { Fieldset } from './Fieldset';
64

75
describe('<Fieldset />', () => {
86
it('renders Fieldset', () => {
97
const { container } = renderWithTheme(<Fieldset />);
10-
const fieldset = container.firstChild;
8+
const fieldset = container.firstChild as HTMLFieldSetElement;
119

1210
expect(fieldset).toBeInTheDocument();
1311
});
@@ -25,21 +23,21 @@ describe('<Fieldset />', () => {
2523
it('renders Label', () => {
2624
const labelText = 'Name:';
2725
const { container } = renderWithTheme(<Fieldset label={labelText} />);
28-
const fieldset = container.firstChild;
26+
const fieldset = container.firstChild as HTMLFieldSetElement;
2927
const legend = fieldset.querySelector('legend');
30-
expect(legend.textContent).toBe(labelText);
28+
expect(legend?.textContent).toBe(labelText);
3129
});
3230
it('when not provided, <legend /> element is not rendered', () => {
3331
const { container } = renderWithTheme(<Fieldset />);
34-
const fieldset = container.firstChild;
32+
const fieldset = container.firstChild as HTMLFieldSetElement;
3533
const legend = fieldset.querySelector('legend');
3634
expect(legend).not.toBeInTheDocument();
3735
});
3836
});
3937
describe('prop: disabled', () => {
4038
it('renders with disabled text content', () => {
4139
const { container } = renderWithTheme(<Fieldset disabled />);
42-
const fieldset = container.firstChild;
40+
const fieldset = container.firstChild as HTMLFieldSetElement;
4341

4442
expect(fieldset).toHaveAttribute('aria-disabled', 'true');
4543

src/Fieldset/Fieldset.stories.js renamed to src/Fieldset/Fieldset.stories.tsx

+4-4
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
1-
import React, { useState } from 'react';
2-
import styled from 'styled-components';
3-
1+
import { ComponentMeta } from '@storybook/react';
2+
import { useState } from 'react';
43
import { Checkbox, Cutout, Fieldset, Window, WindowContent } from 'react95';
4+
import styled from 'styled-components';
55

66
const Wrapper = styled.div`
77
padding: 5rem;
@@ -12,7 +12,7 @@ export default {
1212
title: 'Fieldset',
1313
component: Fieldset,
1414
decorators: [story => <Wrapper>{story()}</Wrapper>]
15-
};
15+
} as ComponentMeta<typeof Fieldset>;
1616

1717
export function Default() {
1818
return (
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,20 @@
1-
import React from 'react';
21
import propTypes from 'prop-types';
3-
2+
import React, { forwardRef } from 'react';
43
import styled, { css } from 'styled-components';
54
import { createDisabledTextStyles } from '../common';
5+
import { CommonStyledProps } from '../types';
6+
7+
type FieldsetProps = {
8+
label?: React.ReactNode;
9+
children?: React.ReactNode;
10+
disabled?: boolean;
11+
variant?: 'default' | 'flat';
12+
} & React.FieldsetHTMLAttributes<HTMLFieldSetElement> &
13+
CommonStyledProps;
614

7-
const StyledFieldset = styled.fieldset`
15+
const StyledFieldset = styled.fieldset<
16+
Pick<FieldsetProps, 'variant'> & { $disabled: boolean }
17+
>`
818
position: relative;
919
border: 2px solid
1020
${({ theme, variant }) =>
@@ -19,9 +29,10 @@ const StyledFieldset = styled.fieldset`
1929
box-shadow: -1px -1px 0 1px ${({ theme }) => theme.borderDark},
2030
inset -1px -1px 0 1px ${({ theme }) => theme.borderDark};
2131
`}
22-
${props => props.isDisabled && createDisabledTextStyles()}
32+
${props => props.$disabled && createDisabledTextStyles()}
2333
`;
24-
const StyledLegend = styled.legend`
34+
35+
const StyledLegend = styled.legend<Pick<FieldsetProps, 'variant'>>`
2536
display: flex;
2637
position: absolute;
2738
top: 0;
@@ -34,21 +45,25 @@ const StyledLegend = styled.legend`
3445
variant === 'flat' ? theme.canvas : theme.material};
3546
`;
3647

37-
const Fieldset = React.forwardRef(function Fieldset(props, ref) {
38-
const { label, disabled, variant, children, ...otherProps } = props;
39-
return (
40-
<StyledFieldset
41-
aria-disabled={disabled}
42-
isDisabled={disabled}
43-
variant={variant}
44-
ref={ref}
45-
{...otherProps}
46-
>
47-
{label && <StyledLegend variant={variant}>{label}</StyledLegend>}
48-
{children}
49-
</StyledFieldset>
50-
);
51-
});
48+
const Fieldset = forwardRef<HTMLFieldSetElement, FieldsetProps>(
49+
function Fieldset(
50+
{ label, disabled = false, variant = 'default', children, ...otherProps },
51+
ref
52+
) {
53+
return (
54+
<StyledFieldset
55+
aria-disabled={disabled}
56+
$disabled={disabled}
57+
variant={variant}
58+
ref={ref}
59+
{...otherProps}
60+
>
61+
{label && <StyledLegend variant={variant}>{label}</StyledLegend>}
62+
{children}
63+
</StyledFieldset>
64+
);
65+
}
66+
);
5267

5368
Fieldset.defaultProps = {
5469
disabled: false,
@@ -64,4 +79,4 @@ Fieldset.propTypes = {
6479
variant: propTypes.oneOf(['default', 'flat'])
6580
};
6681

67-
export default Fieldset;
82+
export { Fieldset, FieldsetProps };

src/index.ts

+1-1
Original file line numberDiff line numberDiff line change
@@ -14,7 +14,7 @@ export * from './Counter/Counter';
1414
export * from './Cutout/Cutout';
1515
export * from './Desktop/Desktop';
1616
export * from './Divider/Divider';
17-
export { default as Fieldset } from './Fieldset/Fieldset';
17+
export * from './Fieldset/Fieldset';
1818
export * from './Hourglass/Hourglass';
1919
export * from './List/List';
2020
export * from './ListItem/ListItem';

0 commit comments

Comments
 (0)