LaconicNetwork/vega-frontend-monorepo
4
0
Fork 0
Code Issues Pull Requests 1 Packages Projects Releases Wiki Activity

Created a button that looks like an inline-link

Browse Source
This commit is contained in:
sam-keen 2022-03-22 15:25:45 +00:00
parent ecbcdf57e3
commit 1e5f72ebcc
2 changed files with 41 additions and 18 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

10
libs/ui-toolkit/src/components/button/button.stories.tsx
View File

@ -38,7 +38,13 @@ Inline.args = {
variant: 'inline', variant: 'inline',
}; };
export const NavAccent: Story = (args) => ( export const InlineLink = Template.bind({});
InlineLink.args = {
children: 'Inline link',
variant: 'inline-link',
};
export const NavAccent: Story = () => (
<> <>
<div className="mb-8"> <div className="mb-8">
<Button variant="accent" className="px-4"> <Button variant="accent" className="px-4">
@ -58,7 +64,7 @@ export const NavAccent: Story = (args) => (
</> </>
); );
export const NavInline: Story = (args) => ( export const NavInline: Story = () => (
<> <>
<div className="mb-8"> <div className="mb-8">
<Button variant="inline" className="uppercase"> <Button variant="inline" className="uppercase">

49
libs/ui-toolkit/src/components/button/button.tsx
View File

@ -9,7 +9,7 @@ import {
interface CommonProps { interface CommonProps {
children?: React.ReactNode; children?: React.ReactNode;
variant?: 'primary' | 'secondary' | 'accent' | 'inline'; variant?: 'primary' | 'secondary' | 'accent' | 'inline' | 'inline-link';
className?: string; className?: string;
prependIconName?: IconName; prependIconName?: IconName;
appendIconName?: IconName; appendIconName?: IconName;
@ -37,18 +37,27 @@ const getClassName = (
'box-border', 'box-border',
'h-28', 'h-28',
'text-ui', 'text-ui',
'no-underline',
'hover:underline', 'hover:underline',
'disabled:no-underline', 'disabled:no-underline',
'transition-all', 'transition-all',
], ],
{ {
'pl-28': !(paddingLeftProvided || variant === 'inline'), 'no-underline': variant !== 'inline-link',
'pr-28': !(paddingRightProvided || variant === 'inline'), 'pl-28': !(
paddingLeftProvided ||
variant === 'inline' ||
variant === 'inline-link'
),
'pr-28': !(
paddingRightProvided ||
variant === 'inline' ||
variant === 'inline-link'
),
border: !borderWidthProvided, border: !borderWidthProvided,
'hover:border-black dark:hover:border-white': variant !== 'inline', 'hover:border-black dark:hover:border-white':
variant !== 'inline' && variant !== 'inline-link',
'active:border-black dark:active:border-white': true, 'active:border-black dark:active:border-white': true,
'bg-black dark:bg-white': variant === 'primary', 'bg-black dark:bg-white': variant === 'primary',
@ -72,7 +81,9 @@ const getClassName = (
uppercase: variant === 'accent', uppercase: variant === 'accent',
'bg-vega-yellow dark:bg-vega-yellow': variant === 'accent', 'bg-vega-yellow dark:bg-vega-yellow': variant === 'accent',
'border-transparent dark:border-transparent': 'border-transparent dark:border-transparent':
variant === 'accent' || variant === 'inline', variant === 'accent' ||
variant === 'inline' ||
variant === 'inline-link',
'hover:bg-vega-yellow-dark dark:hover:bg-vega-yellow/30': 'hover:bg-vega-yellow-dark dark:hover:bg-vega-yellow/30':
variant === 'accent', variant === 'accent',
'text-black dark:text-black': variant === 'accent', 'text-black dark:text-black': variant === 'accent',
@ -80,22 +91,28 @@ const getClassName = (
'pl-4': variant === 'inline' && !paddingLeftProvided, 'pl-4': variant === 'inline' && !paddingLeftProvided,
'pr-4': variant === 'inline' && !paddingRightProvided, 'pr-4': variant === 'inline' && !paddingRightProvided,
'border-0': variant === 'inline' && !borderWidthProvided, 'border-0':
underline: variant === 'inline', (variant === 'inline' || variant === 'inline-link') &&
!borderWidthProvided,
underline: variant === 'inline' || variant === 'inline-link',
'hover:no-underline': variant === 'inline', 'hover:no-underline': variant === 'inline',
'hover:border-transparent dark:hover:border-transparent': 'hover:border-transparent dark:hover:border-transparent':
variant === 'inline', variant === 'inline' || variant === 'inline-link',
'active:border-transparent dark:active:border-transparent': 'active:border-transparent dark:active:border-transparent':
variant === 'inline', variant === 'inline' || variant === 'inline-link',
'active:text-black dark:active:text-vega-yellow': variant === 'inline', 'active:text-black dark:active:text-vega-yellow':
'text-black-95 dark:text-white-95': variant === 'inline', variant === 'inline' || variant === 'inline-link',
'hover:text-black hover:dark:text-white': variant === 'inline', 'text-black-95 dark:text-white-95':
variant === 'inline' || variant === 'inline-link',
'hover:text-black hover:dark:text-white':
variant === 'inline' || variant === 'inline-link',
'disabled:bg-black-10 dark:disabled:bg-white-10': variant !== 'inline', 'disabled:bg-black-10 dark:disabled:bg-white-10':
variant !== 'inline' && variant !== 'inline-link',
'disabled:text-black-60 dark:disabled:text-white-60': 'disabled:text-black-60 dark:disabled:text-white-60':
variant !== 'inline', variant !== 'inline' && variant !== 'inline-link',
'disabled:border-black-25 dark:disabled:border-white-25': 'disabled:border-black-25 dark:disabled:border-white-25':
variant !== 'inline', variant !== 'inline' && variant !== 'inline-link',
}, },
className className
); );