Skip to content

Commit 008cf9c

Browse files
marklearstmarklearst
authored
Merge pull request #18 from marklearst/pr/18-misc-components
feat(components): refresh misc primitives
2 parents d481def + 96ea47e commit 008cf9c

44 files changed

Lines changed: 1110 additions & 848 deletions

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

‎src/components/divider-line/divider-line.stories.tsx‎

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

3-
import React from "react";
4-
import { DividerLine } from "./divider-line";
3+
import { DividerLine } from './divider-line'
54

65
const meta: Meta<typeof DividerLine> = {
7-
title: "DividerLine",
8-
component: DividerLine,
9-
parameters: { layout: "fullscreen" },
10-
render: () => (
11-
<div className="p-2">
12-
<span>🌞</span>
13-
<DividerLine />
14-
<span>🌙</span>
15-
</div>
16-
),
17-
};
6+
title: 'DividerLine',
7+
component: DividerLine,
8+
args: {
9+
padding: 8,
10+
showIcons: true,
11+
},
12+
argTypes: {
13+
padding: { control: { type: 'range', min: 0, max: 32, step: 2 } },
14+
showIcons: { control: 'boolean' },
15+
},
16+
parameters: { layout: 'fullscreen' },
17+
render: ({ padding, showIcons }) => (
18+
<div style={{ padding }}>
19+
{showIcons ?
20+
<span>🌞</span>
21+
: null}
22+
<DividerLine />
23+
{showIcons ?
24+
<span>🌙</span>
25+
: null}
26+
</div>
27+
),
28+
}
1829

19-
export default meta;
20-
type Story = StoryObj<typeof DividerLine>;
30+
export default meta
31+
type Story = StoryObj<typeof DividerLine>
2132

22-
export const Default: Story = {};
33+
export const Default: Story = {}

‎src/components/divider-line/divider-line.test.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { describe, expect, it } from 'vitest'
2+
import { render } from '@testing-library/react'
3+
import { DividerLine } from './divider-line'
4+
5+
describe('DividerLine', () => {
6+
it('renders a horizontal rule', () => {
7+
const { container } = render(<DividerLine />)
8+
const divider = container.querySelector('hr')
9+
10+
expect(divider).toBeInTheDocument()
11+
expect(divider).toHaveClass('bg-neutral-300')
12+
})
13+
})

‎src/components/divider-line/divider-line.tsx‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
1-
import React from "react";
2-
31
export const DividerLine = () => {
4-
return <hr className="col-span-full my-8 h-px w-full border-none bg-neutral-300" />;
5-
};
2+
return (
3+
<hr className='col-span-full my-8 h-px w-full border-none bg-neutral-300' />
4+
)
5+
}

‎src/components/divider-line/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export { DividerLine } from "./divider-line";
1+
export { DividerLine } from './divider-line'

‎src/components/featured-tag/featured-tag.stories.tsx‎

Lines changed: 63 additions & 51 deletions
Original file line numberDiff line numberDiff line change
@@ -1,57 +1,69 @@
1-
import type { Meta, StoryObj } from "@storybook/react";
2-
import React, { useState } from "react";
3-
import { FeaturedTag } from "./featured-tag";
4-
import { Panel } from "../panel";
5-
import { FormField } from "../form-field";
1+
import type { Meta, StoryObj } from '@storybook/react-vite'
2+
import { useState } from 'react'
3+
import { FeaturedTag } from './featured-tag'
4+
import { Panel } from '../panel'
5+
import { FormField } from '../form-field'
66

77
const meta: Meta<typeof FeaturedTag> = {
8-
title: "Input/FeaturedTag",
9-
component: FeaturedTag,
10-
};
11-
12-
export default meta;
13-
14-
type Story = StoryObj<typeof FeaturedTag>;
15-
16-
const RadioBoxWithRecommendationTag = () => {
17-
const [value, setValue] = useState("value_1");
18-
19-
return (
20-
<div className="w-96">
21-
<FormField>
22-
<FormField.RadioBox
23-
value={value}
24-
onChange={(newValue) => {
25-
setValue(newValue);
26-
}}
27-
id="value"
28-
>
29-
<FormField.RadioBox.Option value="option_1">
30-
Option 1<FeaturedTag>Recommended!</FeaturedTag>
31-
</FormField.RadioBox.Option>
32-
33-
<FormField.RadioBox.Option value="option_2">Option 2</FormField.RadioBox.Option>
34-
35-
<FormField.RadioBox.Option value="option_3">Option 3</FormField.RadioBox.Option>
36-
</FormField.RadioBox>
37-
</FormField>
38-
</div>
39-
);
40-
};
8+
title: 'Input/FeaturedTag',
9+
component: FeaturedTag,
10+
args: {
11+
tagLabel: 'Recommended!',
12+
panelText: 'This example uses a Panel component',
13+
},
14+
argTypes: {
15+
tagLabel: { control: 'text' },
16+
panelText: { control: 'text' },
17+
},
18+
}
19+
20+
export default meta
21+
22+
type Story = StoryObj<typeof FeaturedTag>
23+
24+
const RadioBoxWithRecommendationTag = ({ tagLabel }: { tagLabel: string }) => {
25+
const [value, setValue] = useState('value_1')
26+
27+
return (
28+
<div className='w-96'>
29+
<FormField>
30+
<FormField.RadioBox
31+
value={value}
32+
onChange={(newValue) => {
33+
setValue(newValue)
34+
}}
35+
id='value'
36+
>
37+
<FormField.RadioBox.Option value='option_1'>
38+
Option 1<FeaturedTag>{tagLabel}</FeaturedTag>
39+
</FormField.RadioBox.Option>
40+
41+
<FormField.RadioBox.Option value='option_2'>
42+
Option 2
43+
</FormField.RadioBox.Option>
44+
45+
<FormField.RadioBox.Option value='option_3'>
46+
Option 3
47+
</FormField.RadioBox.Option>
48+
</FormField.RadioBox>
49+
</FormField>
50+
</div>
51+
)
52+
}
4153

4254
export const Default: Story = {
43-
render: () => {
44-
return <RadioBoxWithRecommendationTag />;
45-
},
46-
};
55+
render: ({ tagLabel }) => (
56+
<RadioBoxWithRecommendationTag tagLabel={tagLabel} />
57+
),
58+
}
4759

4860
export const PanelExample: Story = {
49-
render: () => (
50-
<div className="w-96">
51-
<Panel className="relative">
52-
<p>This example uses a Panel component</p>
53-
<FeaturedTag>Recommended!</FeaturedTag>
54-
</Panel>
55-
</div>
56-
),
57-
};
61+
render: ({ tagLabel, panelText }) => (
62+
<div className='w-96'>
63+
<Panel className='relative'>
64+
<p>{panelText}</p>
65+
<FeaturedTag>{tagLabel}</FeaturedTag>
66+
</Panel>
67+
</div>
68+
),
69+
}

‎src/components/featured-tag/featured-tag.test.tsx‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
import { describe, expect, it } from 'vitest'
2+
import { render, screen } from '@testing-library/react'
3+
import { FeaturedTag } from './featured-tag'
4+
5+
describe('FeaturedTag', () => {
6+
it('renders featured tag content', () => {
7+
render(<FeaturedTag>Featured</FeaturedTag>)
8+
9+
const tag = screen.getByText('Featured')
10+
expect(tag).toBeInTheDocument()
11+
expect(tag).toHaveClass('border-primary-600')
12+
})
13+
})

‎src/components/featured-tag/featured-tag.tsx‎

Lines changed: 15 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -1,20 +1,20 @@
1-
import React, { ReactNode } from "react";
2-
import { classNames } from "../../util/class-names";
1+
import { ReactNode } from 'react'
2+
import { classNames } from '../../util/class-names'
33

44
interface FeaturedTagProps {
5-
children: ReactNode;
6-
className?: string;
5+
children: ReactNode
6+
className?: string
77
}
88

99
export const FeaturedTag = ({ children, className }: FeaturedTagProps) => {
10-
return (
11-
<span
12-
className={classNames(
13-
"border-primary-600 bg-primary-50 text-primary-600 absolute top-0 right-4 z-10 -translate-y-1/2 rounded-sm border px-1 text-xs font-medium tracking-wide uppercase",
14-
className
15-
)}
16-
>
17-
{children}
18-
</span>
19-
);
20-
};
10+
return (
11+
<span
12+
className={classNames(
13+
'border-primary-600 bg-primary-50 text-primary-600 absolute top-0 right-4 z-10 -translate-y-1/2 rounded-sm border px-1 text-xs font-medium tracking-wide uppercase',
14+
className,
15+
)}
16+
>
17+
{children}
18+
</span>
19+
)
20+
}

‎src/components/featured-tag/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export { FeaturedTag } from "./featured-tag";
1+
export { FeaturedTag } from './featured-tag'

‎src/components/inline-alert/index.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
export { InlineAlert } from "./inline-alert";
1+
export { InlineAlert } from './inline-alert'

‎src/components/inline-alert/inline-alert.stories.tsx‎

Lines changed: 38 additions & 32 deletions
Original file line numberDiff line numberDiff line change
@@ -1,43 +1,49 @@
1-
import type { Meta, StoryObj } from "@storybook/react";
1+
import type { Meta, StoryObj } from '@storybook/react-vite'
22

3-
import React from "react";
4-
import { InlineAlert, InlineAlertProps } from "./inline-alert";
5-
import { getStoryDescription } from "../../util/storybook-utils";
3+
import { InlineAlert, InlineAlertProps } from './inline-alert'
4+
import { getStoryDescription } from '../../util/storybook-utils'
65

7-
const intents: InlineAlertProps["intent"][] = ["info", "success", "warning", "danger"];
6+
const intents: InlineAlertProps['intent'][] = [
7+
'info',
8+
'success',
9+
'warning',
10+
'danger',
11+
]
812

913
const meta: Meta<typeof InlineAlert> = {
10-
component: InlineAlert,
11-
title: "Inline Alert",
12-
parameters: getStoryDescription("Inline alert text to inform user about contextual things"),
13-
args: {
14-
title: "Alert title",
15-
children: "Alert text",
16-
},
17-
};
14+
component: InlineAlert,
15+
title: 'Inline Alert',
16+
parameters: getStoryDescription(
17+
'Inline alert text to inform user about contextual things',
18+
),
19+
args: {
20+
title: 'Alert title',
21+
children: 'Alert text',
22+
},
23+
}
1824

19-
export default meta;
25+
export default meta
2026

21-
type Story = StoryObj<typeof InlineAlert>;
27+
type Story = StoryObj<typeof InlineAlert>
2228

23-
export const Basic: Story = {};
29+
export const Basic: Story = {}
2430

2531
export const Intents: Story = {
26-
argTypes: {
27-
intent: { table: { disable: true } },
28-
},
29-
render: ({ children, ...args }) => (
30-
<div className="flex flex-col gap-4">
31-
{intents.map((intent) => (
32-
<InlineAlert key={intent} {...args} intent={intent}>
33-
{children}
34-
</InlineAlert>
35-
))}
36-
</div>
37-
),
38-
};
32+
argTypes: {
33+
intent: { table: { disable: true } },
34+
},
35+
render: ({ children, ...args }) => (
36+
<div className='flex flex-col gap-4'>
37+
{intents.map((intent) => (
38+
<InlineAlert key={intent} {...args} intent={intent}>
39+
{children}
40+
</InlineAlert>
41+
))}
42+
</div>
43+
),
44+
}
3945

4046
export const OnlyTitles: Story = {
41-
...Intents,
42-
args: { children: undefined },
43-
};
47+
...Intents,
48+
args: { children: undefined },
49+
}

0 commit comments

Comments
 (0)