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.

Sign up for GitHub

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

feat: add nav list to mobile nav #33

Merged
merged 2 commits into from
Nov 8, 2024
Merged

feat: add nav list to mobile nav #33

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
cfebd1d
feat: add nav list to mobile nav
limsohee1002 Nov 7, 2024
f826a88
fix: console
limsohee1002 Nov 7, 2024
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
39 changes: 18 additions & 21 deletions assets/navigation-bundle.js
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

55 changes: 39 additions & 16 deletions assets/tailwind-output.css
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

108 changes: 44 additions & 64 deletions src/base/Button/index.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,8 +1,8 @@
import { FC, PropsWithChildren } from "react";
import { FC, PropsWithChildren } from 'react';

import cn from "classnames";
import { Theme } from "../../utils/storage";
import React from "react";
import cn from 'classnames';
import { Theme } from '../../utils/storage';
import React from 'react';

function isValidEmail(href: string): boolean {
// Regular expression to validate email address
Expand All @@ -14,7 +14,7 @@ function formatHrefAsMailto(href: string): string {
// Check if the href is a valid email address
if (isValidEmail(href)) {
// If it doesn't already start with "mailto:", add it
if (!href.startsWith("mailto:")) {
if (!href.startsWith('mailto:')) {
return `mailto:${href}`;
}
}
Expand All @@ -24,72 +24,57 @@ function formatHrefAsMailto(href: string): string {

interface PrimaryButtonProps extends ButtonBaseProps {
label: string;
color?: "accent-1" | "accent-2";
size?: "medium" | "large";
color?: 'accent-1' | 'accent-2';
size?: 'medium' | 'large';
fullWidth?: boolean;
theme?: Theme;
}

interface PrimaryLinkProps extends LinkBaseProps {
label: string;
color?: "accent-1" | "accent-2" | "surface-3";
size?: "medium" | "large";
color?: 'accent-1' | 'accent-2' | 'surface-3';
size?: 'medium' | 'large';
fullWidth?: boolean;
theme?: Theme;
}

export const PrimaryButton: FC<PrimaryLinkProps | PrimaryButtonProps> = (
props
) => {
const {
color = "accent-1",
size = "medium",
fullWidth = false,
theme,
} = props;
const containerStyle = cn(
"transition-colors flex flex-row items-center justify-center",
{
"bg-light-accent-1 dark:bg-dark-accent-1 hover:bg-light-accent-1-hovered dark:hover:bg-dark-accent-1-hovered":
!theme && color === "accent-1",
"bg-light-accent-2 dark:bg-dark-accent-2 hover:bg-light-accent-2-hovered dark:hover:bg-dark-accent-2-hovered":
!theme && color === "accent-2",
"bg-light-surface-3 dark:bg-dark-surface-3 hover:bg-light-surface-3-hovered dark:hover:bg-dark-surface-3-hovered":
!theme && color === "surface-3",
"bg-dark-accent-1 hover:bg-dark-accent-1-hovered":
theme === "dark" && color === "accent-1",
"bg-light-accent-1 hover:bg-light-accent-1-hovered":
theme === "light" && color === "accent-1",
"bg-dark-accent-2 hover:bg-dark-accent-2-hovered":
theme === "dark" && color === "accent-2",
"bg-light-accent-2 hover:bg-light-accent-2-hovered":
theme === "light" && color === "accent-2",
"rounded-small px-padding-small py-padding-small-dense":
size === "medium",
"rounded-medium px-padding-large p-padding-medium": size === "large",
}
);
export const PrimaryButton: FC<PrimaryLinkProps | PrimaryButtonProps> = (props) => {
const { color = 'accent-1', size = 'medium', fullWidth = false, theme } = props;
const containerStyle = cn('transition-colors flex flex-row items-center justify-center', {
'bg-light-accent-1 dark:bg-dark-accent-1 hover:bg-light-accent-1-hovered dark:hover:bg-dark-accent-1-hovered':
!theme && color === 'accent-1',
'bg-light-accent-2 dark:bg-dark-accent-2 hover:bg-light-accent-2-hovered dark:hover:bg-dark-accent-2-hovered':
!theme && color === 'accent-2',
'bg-light-surface-3 dark:bg-dark-surface-3 hover:bg-light-surface-3-hovered dark:hover:bg-dark-surface-3-hovered':
!theme && color === 'surface-3',
'bg-dark-accent-1 hover:bg-dark-accent-1-hovered': theme === 'dark' && color === 'accent-1',
'bg-light-accent-1 hover:bg-light-accent-1-hovered': theme === 'light' && color === 'accent-1',
'bg-dark-accent-2 hover:bg-dark-accent-2-hovered': theme === 'dark' && color === 'accent-2',
'bg-light-accent-2 hover:bg-light-accent-2-hovered': theme === 'light' && color === 'accent-2',
'rounded-small px-padding-small py-padding-small-dense': size === 'medium',
'rounded-medium px-padding-large p-padding-medium': size === 'large',
});
const textStyle = cn({
"text-white": color === "accent-1",
"text-light-accent-1 dark:text-dark-accent-1": color === "accent-2",
"text-light-neutral-1 dark:text-dark-neutral-1": color === "surface-3",
"button-label-4": size === "medium",
"button-label-2": size === "large",
'text-white': color === 'accent-1',
'text-light-accent-1 dark:text-dark-accent-1': color === 'accent-2',
'text-light-neutral-1 dark:text-dark-neutral-1': color === 'surface-3',
'button-label-4': size === 'medium',
'button-label-2': size === 'large',
});

if ("href" in props) {
if ('href' in props) {
const { label, href, ariaLabel, className, onClick } = props;

return (
<div
className={cn("PrimaryButton flex", {
"w-full": fullWidth,
className={cn('PrimaryButton flex', {
'w-full': fullWidth,
})}
>
<LinkBase
href={href}
className={cn(containerStyle, className, {
"w-full": fullWidth,
'w-full': fullWidth,
})}
ariaLabel={ariaLabel}
onClick={onClick}
Expand Down Expand Up @@ -127,11 +112,11 @@ interface TextLinkProps extends LinkBaseProps {
}

export const TextButton: FC<TextButtonProps | TextLinkProps> = (props) => {
const containerStyle = "TextButton group";
const textStyle = "decoration-inherit";
const containerStyle = 'TextButton group';
const textStyle = 'decoration-inherit';
const textClassName = props.textClassName;

if ("href" in props) {
if ('href' in props) {
const { label, href, ariaLabel, className, onClick } = props;

return (
Expand Down Expand Up @@ -165,6 +150,7 @@ type ButtonBaseProps = {
onClick?: () => void;
ariaLabel?: string;
role?: string;
id?: string;
};

export const ButtonBase: FC<PropsWithChildren<ButtonBaseProps>> = ({
Expand All @@ -173,14 +159,10 @@ export const ButtonBase: FC<PropsWithChildren<ButtonBaseProps>> = ({
children,
ariaLabel,
role,
id,
}) => {
return (
<button
onClick={onClick}
className={className}
aria-label={ariaLabel}
role={role}
>
<button id={id} onClick={onClick} className={className} aria-label={ariaLabel} role={role}>
{children}
</button>
);
Expand All @@ -193,8 +175,8 @@ type LinkBaseProps = {
onClick?: () => void;
};

const OPEN_IN_NEW_TAB_PROPS = { target: "_blank", rel: "noreferrer noopener" };
const OPEN_IN_CURRENT_TAB_PROPS = { target: "_self" };
const OPEN_IN_NEW_TAB_PROPS = { target: '_blank', rel: 'noreferrer noopener' };
const OPEN_IN_CURRENT_TAB_PROPS = { target: '_self' };

export const LinkBase: FC<PropsWithChildren<LinkBaseProps>> = ({
className,
Expand All @@ -203,10 +185,8 @@ export const LinkBase: FC<PropsWithChildren<LinkBaseProps>> = ({
ariaLabel,
onClick,
}) => {
const isInternalLink = href.startsWith("/") || href.startsWith("#");
const targetProps = isInternalLink
? OPEN_IN_CURRENT_TAB_PROPS
: OPEN_IN_NEW_TAB_PROPS;
const isInternalLink = href.startsWith('/') || href.startsWith('#');
const targetProps = isInternalLink ? OPEN_IN_CURRENT_TAB_PROPS : OPEN_IN_NEW_TAB_PROPS;

return (
<a
Expand Down
Loading
Loading