40 lines
1,003 B
TypeScript
40 lines
1,003 B
TypeScript
import { Box, Button, Text } from "@saleor/macaw-ui/next";
|
|
import React from "react";
|
|
|
|
interface ExtendedAttributeRowProps {
|
|
label: string;
|
|
selectLabel: string;
|
|
disabled: boolean;
|
|
onSelect: () => void;
|
|
}
|
|
|
|
const ExtendedAttributeRow: React.FC<ExtendedAttributeRowProps> = props => {
|
|
const { label, selectLabel, disabled, onSelect, children } = props;
|
|
|
|
return (
|
|
<>
|
|
<Box
|
|
as="li"
|
|
display="flex"
|
|
justifyContent="space-between"
|
|
alignItems="center"
|
|
paddingY="s6"
|
|
>
|
|
<Text data-test-id="attribute-label">{label}</Text>
|
|
<Button
|
|
disabled={disabled}
|
|
variant="secondary"
|
|
data-test-id="button-attribute-selector"
|
|
onClick={onSelect}
|
|
type="button"
|
|
>
|
|
{selectLabel}
|
|
</Button>
|
|
</Box>
|
|
<Box data-test-id="attribute-value">{children}</Box>
|
|
</>
|
|
);
|
|
};
|
|
|
|
ExtendedAttributeRow.displayName = "ExtendedAttributeRow";
|
|
export default ExtendedAttributeRow;
|