admin/twenty
1
0
Fork 0
Code Issues Pull Requests Actions 1 Packages Projects Releases Wiki Activity

Migrate to twenty-ui - navigation/breadcrumb (#7793)

Browse Source 
### Description

- Move breadcrumb components to `twenty-ui`    \
  \
  \
  Fixes  #7534

---------

Co-authored-by: gitstart-twenty <gitstart-twenty@users.noreply.github.com>
Co-authored-by: Charles Bochet <charles@twenty.com>
This commit is contained in:
gitstart-app[bot]
2024-10-21 21:53:43 +02:00
committed by GitHub
parent 25010174f0
commit b45511c955
8 changed files with 24 additions and 33 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/twenty-front/src/modules/ui/layout/page/components/SubMenuTopBarContainer.tsx
View File

@ -1,11 +1,7 @@
import { InformationBannerWrapper } from '@/information-banner/components/InformationBannerWrapper';
import styled from '@emotion/styled';
import { JSX, ReactNode } from 'react';
import { InformationBannerWrapper } from '@/information-banner/components/InformationBannerWrapper';
import {
Breadcrumb,
BreadcrumbProps,
} from '@/ui/navigation/bread-crumb/components/Breadcrumb';
import { Breadcrumb, BreadcrumbProps } from 'twenty-ui';
import { PageBody } from './PageBody';
import { PageHeader } from './PageHeader';

62
packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/Breadcrumb.tsx
View File

@ -1,62 +0,0 @@
import styled from '@emotion/styled';
import { Fragment, ReactNode } from 'react';
import { Link } from 'react-router-dom';
export type BreadcrumbProps = {
className?: string;
links: { children: string | ReactNode; href?: string }[];
};
const StyledWrapper = styled.nav`
align-items: center;
color: ${({ theme }) => theme.font.color.tertiary};
display: grid;
font-size: ${({ theme }) => theme.font.size.md};
grid-auto-flow: column;
grid-column-gap: ${({ theme }) => theme.spacing(1)};
max-width: 100%;
min-width: 0;
height: ${({ theme }) => theme.spacing(8)};
`;
const StyledLink = styled(Link)`
color: inherit;
text-decoration: none;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
`;
const StyledText = styled.span`
color: ${({ theme }) => theme.font.color.primary};
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
`;
const StyledDivider = styled.span`
width: ${({ theme }) => theme.spacing(2)};
`;
export const Breadcrumb = ({ className, links }: BreadcrumbProps) => {
return (
<StyledWrapper className={className}>
{links.map((link, index) => {
const text = typeof link.children === 'string' ? link.children : '';
return (
<Fragment key={index}>
{link.href ? (
<StyledLink title={text} to={link.href}>
{link.children}
</StyledLink>
) : (
<StyledText title={text}>{link.children}</StyledText>
)}
{index < links.length - 1 && <StyledDivider>/</StyledDivider>}
</Fragment>
);
})}
</StyledWrapper>
);
};

4
packages/twenty-front/src/modules/ui/navigation/bread-crumb/components/__stories__/Breadcrumb.stories.tsx
View File

@ -1,10 +1,8 @@
import { Meta, StoryObj } from '@storybook/react';
import { ComponentDecorator } from 'twenty-ui';
import { ComponentDecorator, Breadcrumb } from 'twenty-ui';
import { ComponentWithRouterDecorator } from '~/testing/decorators/ComponentWithRouterDecorator';
import { Breadcrumb } from '../Breadcrumb';
const meta: Meta<typeof Breadcrumb> = {
title: 'UI/Navigation/Breadcrumb/Breadcrumb',
component: Breadcrumb,