@ -1,10 +1,11 @@
|
||||
import styled from '@emotion/styled';
|
||||
|
||||
type SoonPillProps = {
|
||||
type PillProps = {
|
||||
className?: string;
|
||||
label?: string;
|
||||
};
|
||||
|
||||
const StyledSoonPill = styled.span`
|
||||
const StyledPill = styled.span`
|
||||
align-items: center;
|
||||
background: ${({ theme }) => theme.background.transparent.light};
|
||||
border-radius: ${({ theme }) => theme.border.radius.pill};
|
||||
@ -20,6 +21,6 @@ const StyledSoonPill = styled.span`
|
||||
padding: ${({ theme }) => `0 ${theme.spacing(2)}`};
|
||||
`;
|
||||
|
||||
export const SoonPill = ({ className }: SoonPillProps) => (
|
||||
<StyledSoonPill className={className}>Soon</StyledSoonPill>
|
||||
export const Pill = ({ className, label }: PillProps) => (
|
||||
<StyledPill className={className}>{label}</StyledPill>
|
||||
);
|
||||
@ -2,15 +2,15 @@ import { Meta, StoryObj } from '@storybook/react';
|
||||
|
||||
import { ComponentDecorator } from '~/testing/decorators/ComponentDecorator';
|
||||
|
||||
import { SoonPill } from '../SoonPill';
|
||||
import { Pill } from '../Pill';
|
||||
|
||||
const meta: Meta<typeof SoonPill> = {
|
||||
title: 'UI/Display/Pill/SoonPill',
|
||||
component: SoonPill,
|
||||
const meta: Meta<typeof Pill> = {
|
||||
title: 'UI/Display/Pill/Pill',
|
||||
component: Pill,
|
||||
decorators: [ComponentDecorator],
|
||||
};
|
||||
|
||||
export default meta;
|
||||
type Story = StoryObj<typeof SoonPill>;
|
||||
type Story = StoryObj<typeof Pill>;
|
||||
|
||||
export const Default: Story = {};
|
||||
Reference in New Issue
Block a user