-
-
Notifications
You must be signed in to change notification settings - Fork 31
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: make the slur card use the card component
Signed-off-by: Snehil Shah <[email protected]>
- Loading branch information
1 parent
cd3a221
commit b5435b5
Showing
2 changed files
with
168 additions
and
10 deletions.
There are no files selected for viewing
172 changes: 165 additions & 7 deletions
172
browser-extension/plugin/src/ui-components/atoms/SlurCardComponent.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,21 +1,179 @@ | ||
| import React from 'react' | ||
| import SlurCardBubble from './SlurCardBubble'; | ||
| import { | ||
| Card, CardBody, CardFooter, CardHeader, List, | ||
| Text, | ||
| Card, CardBody, CardFooter, | ||
| Box, | ||
| Button, | ||
| Anchor, | ||
| Table, | ||
| TableRow, | ||
| TableCell, | ||
| Text, | ||
| } from 'grommet'; | ||
|
|
||
| import { Alert, FormUp, FormDown } from 'grommet-icons'; | ||
|
|
||
| const SlurCardComponent = ({ data }) => { | ||
| const isDataEmpty = | ||
| !data.levelOfSeverity || | ||
| data.casual === undefined || | ||
| data.appropriated === undefined || | ||
| data.categories.length === 0; | ||
|
|
||
| const [showMore, setShowMore] = React.useState(false); | ||
| const toggleShowMore = () => { | ||
| setShowMore(!showMore); | ||
| }; | ||
| const buttonLabel = showMore ? 'See Less' : 'See More'; | ||
| const buttonIcon = showMore ? <FormUp /> : <FormDown />; | ||
|
|
||
| return ( | ||
| <Card flex={true} background="#FFE5B4"> | ||
| <CardHeader pad="medium">Header</CardHeader> | ||
| <CardBody pad="medium">Body</CardBody> | ||
| <CardBody pad="medium"> | ||
| {isDataEmpty ? ( | ||
| <Box | ||
| direction="row" | ||
| gap="medium" | ||
| align="center" | ||
| background="status-warning" | ||
| width={'fit-content'} | ||
| > | ||
| <Box margin="medium"> | ||
| <Alert /> | ||
| </Box> | ||
| <Text margin="small">Add metadata for the slur</Text> | ||
| </Box> | ||
| ) : ( | ||
| <Table> | ||
| <tbody> | ||
| <TableRow> | ||
| <TableCell scope="row"> | ||
| <Text color="#646464"> | ||
| Level of Severity | ||
| </Text> | ||
| </TableCell> | ||
| <TableCell> | ||
| {data.levelOfSeverity} | ||
| </TableCell> | ||
| </TableRow> | ||
| <TableRow> | ||
| <TableCell scope="row"> | ||
| <Text color="#646464">Casual</Text> | ||
| </TableCell> | ||
| <TableCell> | ||
| {data.casual === true | ||
| ? 'Yes' | ||
| : data.casual === false | ||
| ? 'No' | ||
| : ''} | ||
| </TableCell> | ||
| </TableRow> | ||
| <TableRow> | ||
| <TableCell scope="row"> | ||
| <Text color="#646464"> | ||
| Appropriated | ||
| </Text> | ||
| </TableCell> | ||
| <TableCell> | ||
| {data.appropriated === true | ||
| ? 'Yes' | ||
| : data.appropriated === false | ||
| ? 'No' | ||
| : ''} | ||
| </TableCell> | ||
| </TableRow> | ||
| {showMore && ( | ||
| <> | ||
| <TableRow> | ||
| <TableCell scope="row"> | ||
| <Text color="#646464"> | ||
| If, Appropriated, Is it by | ||
| Community or Others? | ||
| </Text> | ||
| </TableCell> | ||
| <TableCell> | ||
| {data.appropriationContext === true | ||
| ? 'Community' | ||
| : data.appropriationContext === | ||
| false | ||
| ? 'Others' | ||
| : ''} | ||
| </TableCell> | ||
| </TableRow> | ||
| <TableRow> | ||
| <TableCell scope="row"> | ||
| <Text color="#646464"> | ||
| What Makes it Problematic? | ||
| </Text> | ||
| </TableCell> | ||
| <TableCell> | ||
| <Box> | ||
| <Text | ||
| truncate | ||
| style={{ | ||
| maxWidth: '100px', | ||
| overflow: 'hidden', | ||
| textOverflow: | ||
| 'ellipsis', | ||
| whiteSpace: 'nowrap' | ||
| }} | ||
| > | ||
| {data.labelMeaning} | ||
| </Text> | ||
| </Box> | ||
| </TableCell> | ||
| </TableRow> | ||
| <TableRow> | ||
| <TableCell scope="row"> | ||
| <Text color="#646464"> | ||
| Categories | ||
| </Text> | ||
| </TableCell> | ||
| <TableCell> | ||
| { | ||
| <Box | ||
| direction="row" | ||
| gap="medium" | ||
| wrap={true} | ||
| > | ||
| {data.categories.map( | ||
| ( | ||
| category, | ||
| categoryIndex | ||
| ) => ( | ||
| <Box | ||
| margin={ | ||
| 'xsmall' | ||
| } | ||
| > | ||
| <SlurCardBubble | ||
| key={ | ||
| categoryIndex | ||
| } | ||
| data={ | ||
| category | ||
| } | ||
| /> | ||
| </Box> | ||
| ) | ||
| )} | ||
| </Box> | ||
| } | ||
| </TableCell> | ||
| </TableRow> | ||
| </> | ||
| )} | ||
| </tbody> | ||
| </Table> | ||
| )} | ||
| </CardBody> | ||
| <CardFooter pad={{horizontal: "medium"}}> | ||
| <Anchor | ||
| label={buttonLabel} | ||
| icon={buttonIcon} | ||
| onClick={toggleShowMore} | ||
| /> | ||
| </CardFooter> | ||
| </Card> | ||
| ) | ||
| ); | ||
| } | ||
|
|
||
| export default SlurCardComponent |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters