-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
* feat: add Label * fix: review changes * fix: remove unused props * fix: removed action property from stories * fix: remove action from tests * fix: change optional to string in stories * fix: refactor test * fix: yarn lock * fix height of an icon * fix: change gap size * fix: fix import --------- Co-authored-by: mwleklinskiVL <[email protected]>
- Loading branch information
1 parent
d9acc62
commit 91cf31f
Showing
7 changed files
with
186 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,15 @@ | ||
import { SystemProps } from '@xstyled/styled-components'; | ||
|
||
import { config } from './Label.styles'; | ||
// import { ButtonProps } from '../Button'; | ||
|
||
import { Theme } from '@/theme'; | ||
import { DeepPartial } from '@/utility-types/DeepPartial'; | ||
|
||
export type LabelProps = { | ||
label: string; | ||
// action?: ButtonProps<'bare'>; | ||
tooltip?: boolean; | ||
optional?: string; | ||
custom?: DeepPartial<SystemProps<Theme> & typeof config>; | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,36 @@ | ||
import { Meta, StoryObj } from '@storybook/react'; | ||
|
||
import { Label } from './Label'; | ||
|
||
const meta = { | ||
title: 'Components/Label', | ||
component: Label, | ||
tags: ['autodocs'], | ||
args: { | ||
label: 'Label', | ||
}, | ||
} satisfies Meta<typeof Label>; | ||
|
||
export default meta; | ||
type Story = StoryObj<typeof meta>; | ||
|
||
export const Default: Story = {}; | ||
|
||
export const Optional: Story = { | ||
args: { | ||
optional: '(optional)', | ||
}, | ||
}; | ||
|
||
export const Tooltip: Story = { | ||
args: { | ||
tooltip: true, | ||
}, | ||
}; | ||
|
||
export const All: Story = { | ||
args: { | ||
optional: '(optional)', | ||
tooltip: true, | ||
}, | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,30 @@ | ||
import { SystemProps } from '@xstyled/styled-components'; | ||
|
||
import { Theme } from '@/theme'; | ||
|
||
type Config = SystemProps<Theme> & TooltipConfig & OptionalConfig; | ||
|
||
type TooltipConfig = { | ||
tooltip: SystemProps<Theme>; | ||
}; | ||
|
||
type OptionalConfig = { | ||
optional: SystemProps<Theme>; | ||
}; | ||
|
||
export const config = { | ||
text: 'medium-175', | ||
color: 'content-primary', | ||
display: 'flex', | ||
alignItems: 'flex-start', | ||
gap: 'component-gap-xSmall', | ||
tooltip: { | ||
color: 'content-secondary', | ||
display: 'flex', | ||
alignItems: 'center', | ||
minHeight: 'xSmall', | ||
}, | ||
optional: { | ||
color: 'content-tertiary', | ||
}, | ||
} as const satisfies Config; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,55 @@ | ||
import { Label } from './Label'; | ||
import { render } from '../../tests/render'; | ||
|
||
const getLabel = (jsx: JSX.Element) => { | ||
const { queryByTestId } = render(jsx); | ||
|
||
return { | ||
label: queryByTestId('label'), | ||
optional: queryByTestId('label-optional'), | ||
tooltip: queryByTestId('label-tooltip'), | ||
}; | ||
}; | ||
|
||
describe('Label', () => { | ||
it('should render the label', () => { | ||
const { label } = getLabel(<Label label="Hello there" />); | ||
expect(label).toBeInTheDocument(); | ||
}); | ||
|
||
it('should render correct text', () => { | ||
const { label } = getLabel(<Label label="Hello there" />); | ||
expect(label).toHaveTextContent('Hello there'); | ||
}); | ||
|
||
it('should render optional if a prop passed', () => { | ||
const { optional } = getLabel( | ||
<Label label="Hello there" optional="optional" /> | ||
); | ||
expect(optional).toBeInTheDocument(); | ||
}); | ||
|
||
it('should not render optional if a prop not passed', () => { | ||
const { optional } = getLabel(<Label label="Hello there" />); | ||
expect(optional).toBeNull(); | ||
}); | ||
|
||
it('should render tooltip if a prop passed', () => { | ||
const { tooltip } = getLabel(<Label label="Hello there" tooltip />); | ||
expect(tooltip).toBeInTheDocument(); | ||
}); | ||
|
||
it('should not render tooltip if a prop not passed', () => { | ||
const { tooltip } = getLabel(<Label label="Hello there" />); | ||
expect(tooltip).toBeNull(); | ||
}); | ||
|
||
it('should render correct colors', () => { | ||
const { label, optional, tooltip } = getLabel( | ||
<Label label="Hello there" optional="optional" tooltip /> | ||
); | ||
expect(label).toHaveStyle('color: rgb(39, 39, 39)'); | ||
expect(optional).toHaveStyle('color: rgb(126, 126, 126);'); | ||
expect(tooltip).toHaveStyle('color: rgb(85, 85, 85)'); | ||
}); | ||
}); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,48 @@ | ||
import { Icon } from '@virtuslab/tetrisly-icons'; | ||
import { merge } from 'lodash'; | ||
|
||
import { LabelProps } from './Label.props'; | ||
import { config as defaultConfig } from './Label.styles'; | ||
// import { Button } from '../Button'; | ||
|
||
import { tet } from '@/tetrisly'; | ||
import { MarginProps } from '@/types/MarginProps'; | ||
|
||
export const Label = ({ | ||
label, | ||
tooltip, | ||
optional, | ||
custom = {}, | ||
...rest | ||
}: LabelProps & MarginProps) => { | ||
const { | ||
optional: optionalStyles, | ||
tooltip: tooltipStyles, | ||
...labelStyles | ||
} = merge(defaultConfig, custom); | ||
return ( | ||
<tet.div {...labelStyles} {...rest} data-testid="label"> | ||
{label} | ||
{!!optional && ( | ||
<tet.span {...optionalStyles} data-testid="label-optional"> | ||
{optional} | ||
</tet.span> | ||
)} | ||
{/* TODO: add tooltip instead of bare icon, when we get one */} | ||
{tooltip && ( | ||
<tet.span {...tooltipStyles} data-testid="label-tooltip"> | ||
<Icon name="16-info" /> | ||
</tet.span> | ||
)} | ||
{/* TODO: add action when we discuss how they should behave */} | ||
{/* {!!action && ( | ||
<Button | ||
variant="bare" | ||
{...action} | ||
marginLeft="auto" | ||
data-testid="label-action" | ||
/> | ||
)} */} | ||
</tet.div> | ||
); | ||
}; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export { Label } from './Label'; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,3 +1,4 @@ | ||
export { Button } from './components/Button'; | ||
export { HelperText } from './components/HelperText'; | ||
export { Label } from './components/Label'; | ||
export { StatusDot } from './components/StatusDot'; |