saleor-dashboard/src/components/Attributes/BasicAttributeRow.tsx
Dominik Żegleń 62817568a7
Use MacawUI (#1229)
* Replace withStyleswith useStyles (#1100)

* Replace withStyleswith useStyles

* Update messages

* Use rem as a spacing unit (#1101)

* Use rems as spacing units

* Fix visual bugs

* Update stories

* Use macaw-ui as theme provider (#1108)

* Use macaw ui as a theme provider

* Add react-dom to aliases

* Fix jest module resolution

* Update useTheme hook usage

* Fix test wrapper

* Use macaw from git repo

* Fix CI

* Update stories

* Fix aliasing

* Extract savebar to macaw ui (#1146)

* wip

* Use savebar from macaw

* Use confirm button from macaw

* Improve file structure

* Use sidebar context from macaw

* Update macaw

* Update macaw version

* Remove savebar from storybook

* Update stories

* Use alerts and notifications from macaw (#1166)

* Use alerts from macaw

* Add notifications from macaw

* Update stories

* Pin macaw version

* Encapsulate limit reached in one component

* Remove unused imports

* Use backlinks from macaw (#1183)

* Use backlink from macaw

* Update macaw version

* Use macaw sidebar (#1148)

* Use sidebar from macaw

* Use shipped logo

* Use lowercase

* Update stories

* Use user chip from macaw (#1191)

* Use user chip from macaw

* Use dedicated components for menu items

* Simplify code

* Bump version and fix types (#1210)

* Rename onBack to onClick

* Rename UserChip to UserChipMenu

* Rename IMenuItem to SidebarMenuItem

* Update macaw version

* Fix tables after changes in macaw (#1220)

* Update macaw version

* Update changelog

* Update stories

* Fix after rebase

* Update to macaw 0.2.0

* Lint files

* Update macaw to 0.2.2
2021-07-21 10:59:52 +02:00

45 lines
1.1 KiB
TypeScript

import { Typography } from "@material-ui/core";
import Grid from "@saleor/components/Grid";
import { makeStyles } from "@saleor/macaw-ui";
import React from "react";
const useStyles = makeStyles(
theme => ({
attributeSection: {
"&:last-of-type": {
paddingBottom: 0
},
padding: theme.spacing(2, 0),
wordBreak: "break-word"
},
attributeSectionLabel: {
alignItems: "center",
display: "flex"
}
}),
{ name: "BasicAttributeRow" }
);
interface BasicAttributeRowProps {
label: string | React.ReactNode;
}
const BasicAttributeRow: React.FC<BasicAttributeRowProps> = props => {
const { label, children } = props;
const classes = useStyles(props);
return (
<Grid className={classes.attributeSection} variant="uniform">
<div
className={classes.attributeSectionLabel}
data-test="attribute-label"
>
<Typography>{label}</Typography>
</div>
<div data-test="attribute-value">{children}</div>
</Grid>
);
};
BasicAttributeRow.displayName = "BasicAttributeRow";
export default BasicAttributeRow;