431da37cdf
## Context Adding stories for roles components. Also moving modules components to the proper "modules" folder, "pages" folder being only for entry points. ## Test Run storybook <img width="1145" alt="Screenshot 2025-02-26 at 13 40 40" src="https://github.com/user-attachments/assets/bc184ab0-c590-4362-8c5a-1bf5ef176e6c" /> <img width="1149" alt="Screenshot 2025-02-26 at 13 40 32" src="https://github.com/user-attachments/assets/699cd205-31db-45e9-b9c1-caff1832bd47" /> <img width="1153" alt="Screenshot 2025-02-26 at 13 40 11" src="https://github.com/user-attachments/assets/72e45a67-ea89-4999-8b16-6f7d027d07f6" /> <img width="471" alt="Screenshot 2025-02-26 at 13 38 16" src="https://github.com/user-attachments/assets/62676943-9935-42b5-b769-5544f7eed85f" /> <img width="472" alt="Screenshot 2025-02-26 at 13 38 12" src="https://github.com/user-attachments/assets/946baab9-1be4-439e-bf99-0ebeab0995f7" />
70 lines
2.0 KiB
TypeScript
70 lines
2.0 KiB
TypeScript
import { RolePermissionsObjectPermission } from '@/settings/roles/types/RolePermissionsObjectPermission';
|
|
import { TableCell } from '@/ui/layout/table/components/TableCell';
|
|
import { TableRow } from '@/ui/layout/table/components/TableRow';
|
|
import styled from '@emotion/styled';
|
|
import { Checkbox } from 'twenty-ui';
|
|
|
|
const StyledIconWrapper = styled.div`
|
|
align-items: center;
|
|
background: ${({ theme }) => theme.adaptiveColors.blue1};
|
|
border: 1px solid ${({ theme }) => theme.adaptiveColors.blue3};
|
|
border-radius: ${({ theme }) => theme.border.radius.sm};
|
|
display: flex;
|
|
height: ${({ theme }) => theme.spacing(4)};
|
|
justify-content: center;
|
|
width: ${({ theme }) => theme.spacing(4)};
|
|
`;
|
|
|
|
const StyledIcon = styled.div`
|
|
align-items: center;
|
|
display: flex;
|
|
color: ${({ theme }) => theme.color.blue};
|
|
justify-content: center;
|
|
`;
|
|
|
|
const StyledLabel = styled.span`
|
|
color: ${({ theme }) => theme.font.color.primary};
|
|
`;
|
|
|
|
const StyledPermissionCell = styled(TableCell)`
|
|
align-items: center;
|
|
display: flex;
|
|
flex: 1;
|
|
gap: ${({ theme }) => theme.spacing(2)};
|
|
padding-left: ${({ theme }) => theme.spacing(2)};
|
|
`;
|
|
|
|
const StyledCheckboxCell = styled(TableCell)`
|
|
align-items: center;
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
padding-right: ${({ theme }) => theme.spacing(4)};
|
|
`;
|
|
|
|
const StyledTableRow = styled(TableRow)`
|
|
align-items: center;
|
|
display: flex;
|
|
`;
|
|
|
|
type RolePermissionsObjectsTableRowProps = {
|
|
permission: RolePermissionsObjectPermission;
|
|
};
|
|
|
|
export const RolePermissionsObjectsTableRow = ({
|
|
permission,
|
|
}: RolePermissionsObjectsTableRowProps) => {
|
|
return (
|
|
<StyledTableRow key={permission.key}>
|
|
<StyledPermissionCell>
|
|
<StyledIconWrapper>
|
|
<StyledIcon>{permission.icon}</StyledIcon>
|
|
</StyledIconWrapper>
|
|
<StyledLabel>{permission.label}</StyledLabel>
|
|
</StyledPermissionCell>
|
|
<StyledCheckboxCell>
|
|
<Checkbox checked={permission.value} disabled />
|
|
</StyledCheckboxCell>
|
|
</StyledTableRow>
|
|
);
|
|
};
|