Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

chore: remove Status showBullet option #1802

Merged
merged 1 commit into from
Oct 29, 2024
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
16 changes: 8 additions & 8 deletions docs/stories/Status.stories.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -13,12 +13,12 @@ type Story = StoryObj<typeof Status>;
export const Base = {
render: () => (
<Flex direction="column" alignItems="stretch" gap={3}>
<Status variant="success" showBullet={false}>
<Status variant="success">
<Typography>
Hello world<Typography fontWeight="bold">thing happens</Typography>
</Typography>
</Status>
<Status variant="secondary" showBullet={false}>
<Status variant="secondary">
<Typography>
Hello world<Typography fontWeight="bold">thing happens</Typography>
</Typography>
Expand All @@ -32,17 +32,17 @@ export const Base = {
export const SizeS = {
render: () => (
<Flex direction="column" alignItems="stretch" gap={3}>
<Status variant="success" size="S" showBullet={false}>
<Status variant="success" size="S">
<Typography fontWeight="bold" textColor="success700">
Published
</Typography>
</Status>
<Status variant="secondary" size="S" showBullet={false}>
<Status variant="secondary" size="S">
<Typography fontWeight="bold" textColor="secondary700">
Draft
</Typography>
</Status>
<Status variant="alternative" size="S" showBullet={false}>
<Status variant="alternative" size="S">
<Typography fontWeight="bold" textColor="alternative700">
Updated
</Typography>
Expand All @@ -56,17 +56,17 @@ export const SizeS = {
export const SizeXS = {
render: () => (
<Flex direction="column" alignItems="stretch" gap={3}>
<Status variant="success" size="XS" showBullet={false}>
<Status variant="success" size="XS">
<Typography fontWeight="bold" textColor="success700">
Published
</Typography>
</Status>
<Status variant="secondary" size="XS" showBullet={false}>
<Status variant="secondary" size="XS">
<Typography fontWeight="bold" textColor="secondary700">
Draft
</Typography>
</Status>
<Status variant="alternative" size="XS" showBullet={false}>
<Status variant="alternative" size="XS">
<Typography fontWeight="bold" textColor="alternative700">
Updated
</Typography>
Expand Down
26 changes: 2 additions & 24 deletions packages/design-system/src/components/Status/Status.test.tsx
Original file line number Diff line number Diff line change
@@ -1,33 +1,11 @@
import { render, waitFor } from '@test/utils';
import { render } from '@test/utils';

import { Status } from './Status';

describe('Status', () => {
it('it displays its children', () => {
it('displays its children', () => {
const { getByText } = render(<Status>My status</Status>);

expect(getByText('My status')).toBeInTheDocument();
});

it('it displays a preceeding bullet by default', async () => {
const { queryByText } = render(<Status>My status</Status>);

const textNode = queryByText('My status');

await waitFor(() => {
// @ts-expect-error TODO: refactor these tests
expect(textNode.querySelector('div')).toBeInTheDocument();
});
});

it('it is possible to disable the preceeding bullet', async () => {
const { queryByText } = render(<Status showBullet={false}>My status</Status>);

const textNode = queryByText('My status');

await waitFor(() => {
// @ts-expect-error TODO: refactor these tests
expect(textNode.innerHTML).toBe('My status');
});
});
});
18 changes: 2 additions & 16 deletions packages/design-system/src/components/Status/Status.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -3,18 +3,12 @@ import * as React from 'react';
import { DefaultTheme } from 'styled-components';

import { Box, BoxProps } from '../../primitives/Box';
import { Flex } from '../../primitives/Flex';

type StatusVariant = 'alternative' | 'danger' | 'neutral' | 'primary' | 'secondary' | 'success' | 'warning';
type StatusSize = 'XS' | 'S' | 'M';

interface StatusProps extends BoxProps {
variant?: StatusVariant;
/**
* If `false`, the preceeding bullet of the status won't be displayed.
* This prop and the bullet will be removed in the next major version.
*/
showBullet?: boolean; // TODO V2: remove prop and bullet
size?: StatusSize;
children: React.ReactNode;
}
Expand All @@ -32,10 +26,9 @@ const getPadding = (size: StatusSize): { paddingX: BoxProps['paddingTop']; paddi
return { paddingX: 5, paddingY: 4 };
};

const Status = ({ variant = 'primary', showBullet = true, size = 'M', children, ...props }: StatusProps) => {
const Status = ({ variant = 'primary', size = 'M', children, ...props }: StatusProps) => {
const backgroundColor = `${variant}100` satisfies keyof DefaultTheme['colors'];
const borderColor = `${variant}200` satisfies keyof DefaultTheme['colors'];
const bulletColor = `${variant}600` satisfies keyof DefaultTheme['colors'];
const textColor = `${variant}600` satisfies keyof DefaultTheme['colors'];

const { paddingX, paddingY } = getPadding(size);
Expand All @@ -52,14 +45,7 @@ const Status = ({ variant = 'primary', showBullet = true, size = 'M', children,
paddingRight={paddingX}
{...props}
>
{showBullet ? (
<Flex gap={3}>
<Box background={bulletColor} width="0.6rem" height="0.6rem" borderRadius="50%" />
{children}
</Flex>
) : (
children
)}
{children}
</Box>
);
};
Expand Down
Loading