Raphaël Bosi
c596a5e342
## Description Promotes the next-gen UI library (formerly `twenty-new-ui`) to the name **`twenty-ui`** (v0.1.0, publishable) and renames the old package to **`twenty-ui-deprecated`**. Rewrites ~1,730 `twenty-ui` imports → `twenty-ui-deprecated`, updates all configs/CI/Docker/deps, and migrates twenty-front's `Toggle` to the new package (first consumer) as a drop-in. ## Next steps - Wire the `ui/v*` publish dispatch (`cd-deploy-tag.yaml` + `.yarnrc.yml`), then tag `ui/v0.1.0` to publish. - Continue migrating components from `twenty-ui-deprecated` → `twenty-ui`.
69 lines
2.1 KiB
TypeScript
69 lines
2.1 KiB
TypeScript
import { styled } from '@linaria/react';
|
|
|
|
import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
|
|
|
|
type VisibilityElementState = 'active' | 'inactive';
|
|
|
|
type SettingsAccountsVisibilityIconProps = {
|
|
className?: string;
|
|
metadata?: VisibilityElementState;
|
|
subject?: VisibilityElementState;
|
|
body?: VisibilityElementState;
|
|
};
|
|
|
|
const StyledCardMedia = styled.div`
|
|
align-items: stretch;
|
|
border: 2px solid ${themeCssVariables.border.color.medium};
|
|
border-radius: ${themeCssVariables.border.radius.sm};
|
|
color: ${themeCssVariables.font.color.light};
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: ${themeCssVariables.spacing['0.5']};
|
|
height: ${themeCssVariables.spacing[8]};
|
|
justify-content: center;
|
|
padding: ${themeCssVariables.spacing['0.5']};
|
|
width: ${themeCssVariables.spacing[6]};
|
|
`;
|
|
|
|
const StyledSubjectSkeleton = styled.div<{ isActive?: boolean }>`
|
|
background-color: ${({ isActive }) =>
|
|
isActive
|
|
? themeCssVariables.accent.accent4060
|
|
: themeCssVariables.background.quaternary};
|
|
border-radius: 1px;
|
|
height: 3px;
|
|
`;
|
|
|
|
const StyledMetadataSkeleton = styled.div<{ isActive?: boolean }>`
|
|
background-color: ${({ isActive }) =>
|
|
isActive
|
|
? themeCssVariables.accent.accent4060
|
|
: themeCssVariables.background.quaternary};
|
|
border-radius: 1px;
|
|
height: 3px;
|
|
margin-right: ${themeCssVariables.spacing[2]};
|
|
`;
|
|
|
|
const StyledBodySkeleton = styled.div<{ isActive?: boolean }>`
|
|
background-color: ${({ isActive }) =>
|
|
isActive
|
|
? themeCssVariables.accent.accent4060
|
|
: themeCssVariables.background.quaternary};
|
|
border-radius: ${themeCssVariables.border.radius.xs};
|
|
flex: 1 0 auto;
|
|
height: 3px;
|
|
`;
|
|
|
|
export const SettingsAccountsVisibilityIcon = ({
|
|
className,
|
|
metadata,
|
|
subject,
|
|
body,
|
|
}: SettingsAccountsVisibilityIconProps) => (
|
|
<StyledCardMedia className={className}>
|
|
{!!metadata && <StyledMetadataSkeleton isActive={metadata === 'active'} />}
|
|
{!!subject && <StyledSubjectSkeleton isActive={subject === 'active'} />}
|
|
{!!body && <StyledBodySkeleton isActive={body === 'active'} />}
|
|
</StyledCardMedia>
|
|
);
|