diff --git a/docs/app/components/server/accordion/page.tsx b/docs/app/components/server/accordion/page.tsx index 7a565fbf94..b5324b9879 100644 --- a/docs/app/components/server/accordion/page.tsx +++ b/docs/app/components/server/accordion/page.tsx @@ -3,24 +3,18 @@ import { Default } from '@/app/components/server/accordion/examples/Default'; import { Disabled } from '@/app/components/server/accordion/examples/Disabled'; import { Sizes } from '@/app/components/server/accordion/examples/Sizes'; import ExampleSection from '@/app/components/shared/ExampleSection'; +import QuickNav from '@/app/components/shared/QuickNav'; import { getExamples } from '@/app/utils/getExamples'; import { MDX } from '@/components/MDX'; -function QuickNav({ items }: {items: string[]}) { - return -} - export default async function Home() { const { server } = await getExamples(); const examplesList = Object.keys(server.accordion.examples); - return ( -
+

Accordion

- + } diff --git a/docs/app/components/server/button/description.md b/docs/app/components/server/button/description.md new file mode 100644 index 0000000000..64d6721bd3 --- /dev/null +++ b/docs/app/components/server/button/description.md @@ -0,0 +1,8 @@ +Buttons allow users to take actions, and make choices, with a single tap. + +Buttons communicate actions that users can take. They are typically placed throughout your UI, in places like: + +Modal windows +Forms +Cards +Toolbars diff --git a/docs/app/components/server/button/examples/Animations.tsx b/docs/app/components/server/button/examples/Animations.tsx new file mode 100644 index 0000000000..ef9b623977 --- /dev/null +++ b/docs/app/components/server/button/examples/Animations.tsx @@ -0,0 +1,18 @@ +import Button from '@heathmont/moon-base-tw/lib/button/Button'; + +export const Animations = () => ( + <> + + + + + +); diff --git a/docs/app/components/server/button/examples/Default.tsx b/docs/app/components/server/button/examples/Default.tsx new file mode 100644 index 0000000000..d2bffc8e77 --- /dev/null +++ b/docs/app/components/server/button/examples/Default.tsx @@ -0,0 +1,3 @@ +import Button from '@heathmont/moon-base-tw/lib/button/Button'; + +export const Default = () => ; diff --git a/docs/app/components/server/button/examples/Disabled.tsx b/docs/app/components/server/button/examples/Disabled.tsx new file mode 100644 index 0000000000..163423deab --- /dev/null +++ b/docs/app/components/server/button/examples/Disabled.tsx @@ -0,0 +1,3 @@ +import Button from '@heathmont/moon-base-tw/lib/button/Button'; + +export const Disabled = () => ; diff --git a/docs/app/components/server/button/examples/FullWidth.tsx b/docs/app/components/server/button/examples/FullWidth.tsx new file mode 100644 index 0000000000..6ab181403e --- /dev/null +++ b/docs/app/components/server/button/examples/FullWidth.tsx @@ -0,0 +1,8 @@ +import Button from '@heathmont/moon-base-tw/lib/button/Button'; +import { OtherFrame } from '@heathmont/moon-icons-tw'; + +export const FullWidth = () => ( + +); diff --git a/docs/app/components/server/button/examples/Icons.tsx b/docs/app/components/server/button/examples/Icons.tsx new file mode 100644 index 0000000000..33c832b146 --- /dev/null +++ b/docs/app/components/server/button/examples/Icons.tsx @@ -0,0 +1,9 @@ +import Button from '@heathmont/moon-base-tw/lib/button/Button'; +import { OtherFrame } from '@heathmont/moon-icons-tw'; + +export const Icons = () => ( + <> + + + +); diff --git a/docs/app/components/server/button/examples/Multiline.tsx b/docs/app/components/server/button/examples/Multiline.tsx new file mode 100644 index 0000000000..526b9889b6 --- /dev/null +++ b/docs/app/components/server/button/examples/Multiline.tsx @@ -0,0 +1,12 @@ +import Button from '@heathmont/moon-base-tw/lib/button/Button'; + +export const Multiline = () => ( + +); diff --git a/docs/app/components/server/button/examples/Sizes.tsx b/docs/app/components/server/button/examples/Sizes.tsx new file mode 100644 index 0000000000..95831ea1ed --- /dev/null +++ b/docs/app/components/server/button/examples/Sizes.tsx @@ -0,0 +1,11 @@ +import Button from '@heathmont/moon-base-tw/lib/button/Button'; + +export const Sizes = () => ( + <> + + + + + + +); diff --git a/docs/app/components/server/button/examples/Variants.tsx b/docs/app/components/server/button/examples/Variants.tsx new file mode 100644 index 0000000000..df384a83b9 --- /dev/null +++ b/docs/app/components/server/button/examples/Variants.tsx @@ -0,0 +1,9 @@ +import Button from '@heathmont/moon-base-tw/lib/button/Button'; + +export const Variants = () => ( + <> + + + + +); diff --git a/docs/app/components/server/button/page.tsx b/docs/app/components/server/button/page.tsx new file mode 100644 index 0000000000..dc88a8f0f4 --- /dev/null +++ b/docs/app/components/server/button/page.tsx @@ -0,0 +1,64 @@ +import { Animations } from '@/app/components/server/button/examples/Animations'; +import { Default } from '@/app/components/server/button/examples/Default'; +import { Disabled } from '@/app/components/server/button/examples/Disabled'; +import { FullWidth } from '@/app/components/server/button/examples/FullWidth'; +import { Icons } from '@/app/components/server/button/examples/Icons'; +import { Multiline } from '@/app/components/server/button/examples/Multiline'; +import { Sizes } from '@/app/components/server/button/examples/Sizes'; +import { Variants } from '@/app/components/server/button/examples/Variants'; +import ExampleSection from '@/app/components/shared/ExampleSection'; +import QuickNav from '@/app/components/shared/QuickNav'; +import { getExamples } from '@/app/utils/getExamples'; +import { MDX } from '@/components/MDX'; + +export default async function Home() { + const { server } = await getExamples(); + const examplesList = Object.keys(server.button.examples); + return ( +
+

Button

+ + + } + code={server.button.examples.Default} + /> + } + code={server.button.examples.Sizes} + /> + } + code={server.button.examples.Variants} + /> + } + code={server.button.examples.Icons} + /> + } + code={server.button.examples.FullWidth} + /> + } + code={server.button.examples.Disabled} + /> + } + code={server.button.examples.Animations} + /> + } + code={server.button.examples.Multiline} + /> +
+ ); +} diff --git a/docs/app/components/shared/QuickNav.tsx b/docs/app/components/shared/QuickNav.tsx new file mode 100644 index 0000000000..b6fe5e45dc --- /dev/null +++ b/docs/app/components/shared/QuickNav.tsx @@ -0,0 +1,11 @@ +const QuickNav = ({ items }: { items: string[] }) => ( +
    + {items.map((item) => ( +
  • + {item} +
    • + ))} +
+); + +export default QuickNav; diff --git a/docs/app/components/types.ts b/docs/app/components/types.ts index 057efe37da..05beff9403 100644 --- a/docs/app/components/types.ts +++ b/docs/app/components/types.ts @@ -1,46 +1,59 @@ export interface Examples { - "client": { - "accordion": { - "description": "string", - "examples": { - "Default": "string" - } - }, - "button": { - "description": "string", - "examples": { - "Default": "string" - } - } - }, - "server": { - "accordion": { - "description": "string", - "examples": { - "ContentOutsideSizes": "string", - "Default": "string", - "Disabled": "string", - "Sizes": "string" - } - }, - "avatar": { - "description": "string", - "examples": { - "Active": "string", - "Default": "string" - } - }, - "tag": { - "description": "string", - "examples": { - "Default": "string" - } - } - }, - "shared": { - "fonts": { - "DMSans-Regular": "string", - "DMSans-Semibold": "string" - } - } -}; + client: { + accordion: { + description: 'string'; + examples: { + Default: 'string'; + }; + }; + button: { + description: 'string'; + examples: { + Default: 'string'; + }; + }; + }; + server: { + accordion: { + description: 'string'; + examples: { + ContentOutsideSizes: 'string'; + Default: 'string'; + Disabled: 'string'; + Sizes: 'string'; + }; + }; + button: { + description: 'string'; + examples: { + Default: 'string'; + Sizes: 'string'; + Variants: 'string'; + Icons: 'string'; + FullWidth: 'string'; + Disabled: 'string'; + Animations: 'string'; + Multiline: 'string'; + }; + }; + avatar: { + description: 'string'; + examples: { + Active: 'string'; + Default: 'string'; + }; + }; + tag: { + description: 'string'; + examples: { + Default: 'string'; + }; + }; + }; + shared: { + fonts: { + 'DMSans-Regular': 'string'; + 'DMSans-Semibold': 'string'; + }; + }; +} diff --git a/workspaces/base/src/button/Button.tsx b/workspaces/base/src/button/Button.tsx index 873944e592..33b87110d5 100644 --- a/workspaces/base/src/button/Button.tsx +++ b/workspaces/base/src/button/Button.tsx @@ -1,13 +1,13 @@ import React from 'react'; -import mergeClassnames from '../mergeClassnames/mergeClassnames'; +import type ButtonProps from './private/types/ButtonProps'; +import type ButtonVariants from './private/types/ButtonVariants'; import AnimationContent from './private/utils/buttonAnimations/AnimationContent'; import getButtonSize from './private/utils/buttonSizes/getButtonSize'; import ButtonComponent from './styles/ButtonComponent'; import Hover from './styles/Hover'; import IconLeft from './styles/IconLeft'; import IconRight from './styles/IconRight'; -import type ButtonProps from './private/types/ButtonProps'; -import type ButtonVariants from './private/types/ButtonVariants'; +import mergeClassnames from '../mergeClassnames/mergeClassnames'; export type Props = React.PropsWithChildren< ButtonProps @@ -16,7 +16,7 @@ export type Props = React.PropsWithChildren< const Button = ({ children, - variant = 'primary', + variant = 'fill', size = 'md', iconLeft, iconRight, @@ -31,7 +31,7 @@ const Button = ({ animation === 'progress' || animation === 'success'; if (!children) { return ( - + ({ animation={animation} size={size} fullWidth={fullWidth} + variant={variant} /> ) : ( <> diff --git a/workspaces/base/src/button/private/types/ButtonSettingsProps.ts b/workspaces/base/src/button/private/types/ButtonSettingsProps.ts index 5965bebaf0..45b38bf7c8 100644 --- a/workspaces/base/src/button/private/types/ButtonSettingsProps.ts +++ b/workspaces/base/src/button/private/types/ButtonSettingsProps.ts @@ -1,4 +1,4 @@ -import ButtonAnimations from './ButtonAnimations'; +import type ButtonAnimations from './ButtonAnimations'; import type ButtonSizes from './ButtonSizes'; import type ButtonVariants from './ButtonVariants'; diff --git a/workspaces/base/src/button/private/types/ButtonVariants.ts b/workspaces/base/src/button/private/types/ButtonVariants.ts index 1ad1e2d6d5..06ca8b14c1 100644 --- a/workspaces/base/src/button/private/types/ButtonVariants.ts +++ b/workspaces/base/src/button/private/types/ButtonVariants.ts @@ -1,3 +1,9 @@ -type ButtonVariants = 'primary' | 'secondary' | 'tertiary' | 'ghost'; +type ButtonVariants = + | 'fill' + | 'outline' + | 'ghost' + | 'primary' + | 'secondary' + | 'tertiary'; export default ButtonVariants; diff --git a/workspaces/base/src/button/private/utils/buttonAnimations/AnimationContent.tsx b/workspaces/base/src/button/private/utils/buttonAnimations/AnimationContent.tsx index cd9ed3a307..862c4941c9 100644 --- a/workspaces/base/src/button/private/utils/buttonAnimations/AnimationContent.tsx +++ b/workspaces/base/src/button/private/utils/buttonAnimations/AnimationContent.tsx @@ -7,6 +7,7 @@ import IconRight from '../../../styles/IconRight'; import type ButtonSettingsProps from '../../types/ButtonSettingsProps'; import getIconSize from '../buttonSizes/getIconSize'; import getLoaderSize from '../buttonSizes/getLoaderSize'; +import getLoaderColor from '../buttonStyles/getLoaderColor'; const AnimationContent = ({ children, @@ -15,6 +16,7 @@ const AnimationContent = ({ animation, size, fullWidth, + variant, }: ButtonSettingsProps) => ( {animation === 'progress' && ( - + )} {animation === 'success' && ( { - if (variant === 'secondary') { - return 'btn-secondary'; + animation, +}: Pick): string => { + if (variant === 'secondary' || variant === 'outline') { + return animation === 'error' + ? mergeClassnames( + 'text-chichi bg-transparent ring-inset ring-1 ring-chichi', + !disabled && 'hover:bg-chichi-10' + ) + : mergeClassnames( + 'text-bulma bg-transparent ring-inset ring-1 ring-trunks', + !disabled && 'hover:ring-bulma' + ); } if (variant === 'tertiary') { - return 'btn-tertiary'; + return animation === 'error' ? 'text-goten bg-chichi' : 'text-goten bg-hit'; } if (variant === 'ghost') { - return mergeClassnames( - 'text-trunks bg-transparent', - !disabled && 'hover:text-bulma' - ); + return animation === 'error' + ? mergeClassnames( + 'text-chichi bg-transparent', + !disabled && 'hover:bg-chichi-10' + ) + : mergeClassnames( + 'text-trunks bg-transparent', + !disabled && 'hover:text-bulma' + ); } - return 'btn-primary'; + return animation === 'error' + ? 'text-goten bg-chichi' + : 'text-goten bg-piccolo'; }; export default getButtonVariants; diff --git a/workspaces/base/src/button/private/utils/buttonStyles/getIconHorizontalPosition.ts b/workspaces/base/src/button/private/utils/buttonStyles/getIconHorizontalPosition.ts index 43edfebcc5..4548cd2798 100644 --- a/workspaces/base/src/button/private/utils/buttonStyles/getIconHorizontalPosition.ts +++ b/workspaces/base/src/button/private/utils/buttonStyles/getIconHorizontalPosition.ts @@ -6,31 +6,31 @@ const getIconHorizontalPosition = ({ iconRight, iconLeft, size, -}: Props): string => { +}: Pick): string => { if (iconRight) { switch (size) { case 'xs': case 'sm': - return 'ltr:right-1 rtl:left-1'; + return 'end-1'; case 'lg': - return 'ltr:right-3 rtl:left-3'; + return 'end-3'; case 'xl': - return 'ltr:right-4 rtl:left-4'; + return 'end-4'; default: - return 'ltr:right-2 rtl:left-2'; + return 'end-2'; } } if (iconLeft) { switch (size) { case 'xs': case 'sm': - return 'ltr:left-1 rtl:right-1'; + return 'start-1'; case 'lg': - return 'ltr:left-3 rtl:right-3'; + return 'start-3'; case 'xl': - return 'ltr:left-4 rtl:right-4'; + return 'start-4'; default: - return 'ltr:left-2 rtl:right-2'; + return 'start-2'; } } return ''; diff --git a/workspaces/base/src/button/private/utils/buttonStyles/getLoaderColor.ts b/workspaces/base/src/button/private/utils/buttonStyles/getLoaderColor.ts new file mode 100644 index 0000000000..c7826486ec --- /dev/null +++ b/workspaces/base/src/button/private/utils/buttonStyles/getLoaderColor.ts @@ -0,0 +1,15 @@ +import type ButtonVariants from '../../types/ButtonVariants'; + +const getLoaderColor = (variant?: ButtonVariants): string => { + switch (variant) { + case 'secondary': + case 'outline': + return 'border-bulma'; + case 'ghost': + return 'border-trunks'; + default: + return 'border-goten'; + } +}; + +export default getLoaderColor; diff --git a/workspaces/base/src/button/styles/ButtonComponent.tsx b/workspaces/base/src/button/styles/ButtonComponent.tsx index 2a40708e3d..606e96e3eb 100644 --- a/workspaces/base/src/button/styles/ButtonComponent.tsx +++ b/workspaces/base/src/button/styles/ButtonComponent.tsx @@ -1,10 +1,10 @@ import React from 'react'; import mergeClassnames from '../../mergeClassnames/mergeClassnames'; +import type ButtonProps from '../private/types/ButtonProps'; import getAnimation from '../private/utils/buttonAnimations/getAnimation'; import getButtonSize from '../private/utils/buttonSizes/getButtonSize'; import getButtonCommonStyles from '../private/utils/buttonStyles/getButtonCommonStyles'; import getButtonVariants from '../private/utils/buttonStyles/getButtonVariants'; -import type ButtonProps from '../private/types/ButtonProps'; const ButtonComponent = ({ variant, diff --git a/workspaces/base/src/button/styles/Hover.tsx b/workspaces/base/src/button/styles/Hover.tsx index e9c68d9262..a47a6b79fd 100644 --- a/workspaces/base/src/button/styles/Hover.tsx +++ b/workspaces/base/src/button/styles/Hover.tsx @@ -10,7 +10,7 @@ const Hover = ({ className }: HoverProps) => ( className={mergeClassnames( 'hover z-[-1] block absolute inset-0 pointer-events-none', 'transition-[background-color_0.2s_ease-in-out]', - 'hover:bg-bulma/[.07]', + 'hover:bg-heles', className )} /> diff --git a/workspaces/base/src/button/styles/IconLeft.tsx b/workspaces/base/src/button/styles/IconLeft.tsx index dd01596403..a4bba78590 100644 --- a/workspaces/base/src/button/styles/IconLeft.tsx +++ b/workspaces/base/src/button/styles/IconLeft.tsx @@ -1,8 +1,8 @@ import React from 'react'; import mergeClassnames from '../../mergeClassnames/mergeClassnames'; +import type ButtonSettingsProps from '../private/types/ButtonSettingsProps'; import getIconSize from '../private/utils/buttonSizes/getIconSize'; import getIconHorizontalPosition from '../private/utils/buttonStyles/getIconHorizontalPosition'; -import type ButtonSettingsProps from '../private/types/ButtonSettingsProps'; const IconLeft = ({ fullWidth, iconLeft, size }: ButtonSettingsProps) => ( (