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`.
81 lines
2.1 KiB
TypeScript
81 lines
2.1 KiB
TypeScript
import { styled } from '@linaria/react';
|
|
import { type ReactNode } from 'react';
|
|
import {
|
|
AppTooltip,
|
|
IconInfoCircle,
|
|
TooltipDelay,
|
|
} from 'twenty-ui-deprecated/display';
|
|
import { themeCssVariables } from 'twenty-ui-deprecated/theme-constants';
|
|
|
|
type SettingsBillingLabelValueItemProps = {
|
|
label: string;
|
|
value: ReactNode;
|
|
isValueInPrimaryColor?: boolean;
|
|
tooltipText?: string;
|
|
tooltipId?: string;
|
|
};
|
|
|
|
const StyledContainer = styled.div`
|
|
display: flex;
|
|
justify-content: space-between;
|
|
`;
|
|
|
|
const StyledLabelWrapper = styled.span`
|
|
align-items: center;
|
|
display: flex;
|
|
gap: ${themeCssVariables.spacing[1]};
|
|
`;
|
|
|
|
const StyledLabelSpan = styled.span`
|
|
color: ${themeCssVariables.font.color.tertiary};
|
|
font-size: ${themeCssVariables.font.size.xs};
|
|
font-weight: ${themeCssVariables.font.weight.semiBold};
|
|
`;
|
|
|
|
const StyledInfoIcon = styled(IconInfoCircle)`
|
|
color: ${themeCssVariables.font.color.tertiary};
|
|
cursor: default;
|
|
flex-shrink: 0;
|
|
`;
|
|
|
|
const StyledValueSpan = styled.span<{ isPrimaryColor: boolean }>`
|
|
color: ${({ isPrimaryColor }) =>
|
|
isPrimaryColor
|
|
? themeCssVariables.font.color.primary
|
|
: themeCssVariables.font.color.secondary};
|
|
font-size: ${themeCssVariables.font.size.sm};
|
|
font-weight: ${themeCssVariables.font.weight.medium};
|
|
`;
|
|
|
|
export const SettingsBillingLabelValueItem = ({
|
|
label,
|
|
value,
|
|
isValueInPrimaryColor = false,
|
|
tooltipText,
|
|
tooltipId,
|
|
}: SettingsBillingLabelValueItemProps) => {
|
|
return (
|
|
<StyledContainer>
|
|
<StyledLabelWrapper>
|
|
<StyledLabelSpan>{label}</StyledLabelSpan>
|
|
{tooltipText && tooltipId && (
|
|
<>
|
|
<StyledInfoIcon id={tooltipId} size={12} />
|
|
<AppTooltip
|
|
anchorSelect={`#${tooltipId}`}
|
|
content={tooltipText}
|
|
noArrow={false}
|
|
place="top"
|
|
delay={TooltipDelay.shortDelay}
|
|
positionStrategy="fixed"
|
|
/>
|
|
</>
|
|
)}
|
|
</StyledLabelWrapper>
|
|
<StyledValueSpan isPrimaryColor={isValueInPrimaryColor}>
|
|
{value}
|
|
</StyledValueSpan>
|
|
</StyledContainer>
|
|
);
|
|
};
|