-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat(FilterChip): add FilterChip component
* create FilterChip component * add basic FilterChip styles * fix tests * create FilterChipImplementation story * cleanup * cleanup for Dropdown * documentation cleanup
- Loading branch information
Showing
14 changed files
with
244 additions
and
146 deletions.
There are no files selected for viewing
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
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
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
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
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 |
---|---|---|
@@ -0,0 +1,17 @@ | ||
.filter-chip { | ||
padding: 3px 8px 5px; | ||
line-height: unset; | ||
span { | ||
padding: 0; | ||
} | ||
div { | ||
height: 100%; | ||
padding-left: 10px; | ||
svg { | ||
display: inline-block; | ||
vertical-align: middle; | ||
height: 1rem; | ||
width: 1rem; | ||
} | ||
} | ||
} |
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 |
---|---|---|
@@ -0,0 +1,31 @@ | ||
import React from "react"; | ||
import { ComponentStory, ComponentMeta } from "@storybook/react"; | ||
import { FilterChip } from "./FilterChip"; | ||
|
||
export default { | ||
title: "COMPONENTS/FilterChip", | ||
component: FilterChip, | ||
args: { | ||
text: "Non cras.", | ||
}, | ||
argTypes: { | ||
text: { | ||
description: "Text content to be displayed within the FilterChip.", | ||
}, | ||
}, | ||
parameters: { | ||
docs: { | ||
description: { | ||
component: | ||
"The FilterChip uses a tag or descriptive words as a way to filter content. This may be a good alternative to a Checkbox for larger data sets.\n\nThis component contains no actual logic to interact with your data. See the FilterChip Implementation story for an example of how this might be used.", | ||
}, | ||
}, | ||
}, | ||
} as ComponentMeta<typeof FilterChip>; | ||
|
||
const Template: ComponentStory<typeof FilterChip> = ({ ...rest }) => ( | ||
<FilterChip {...rest} /> | ||
); | ||
|
||
export const Component = Template.bind({}); | ||
Component.args = {}; |
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 |
---|---|---|
@@ -0,0 +1,9 @@ | ||
import React from "react"; | ||
import { render } from "../../test-setup"; | ||
import { FilterChip } from "./FilterChip"; | ||
|
||
describe("Tests for the FilterChip component", () => { | ||
it("should render", () => { | ||
render(<FilterChip text="Standard Filter Chip" />); | ||
}); | ||
}); |
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 |
---|---|---|
@@ -0,0 +1,25 @@ | ||
import { Button } from "components/Button/Button"; | ||
import React from "react"; | ||
|
||
type IntrinsicElements = JSX.IntrinsicElements["button"]; | ||
|
||
interface Props extends IntrinsicElements { | ||
text: string; | ||
} | ||
|
||
/** | ||
* **FilterChip Component** | ||
* | ||
* @param {string} text Text content to be displayed within the FilterChip. | ||
*/ | ||
export const FilterChip: React.FC<Props> = ({ text, ...rest }) => { | ||
return ( | ||
<Button | ||
buttonVariation="primary" | ||
buttonText={text} | ||
className={"filter-chip"} | ||
iconName="close" | ||
{...rest} | ||
/> | ||
); | ||
}; |
66 changes: 66 additions & 0 deletions
66
src/components/FilterChip/FilterChipImplementation.stories.tsx
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 |
---|---|---|
@@ -0,0 +1,66 @@ | ||
import React, { useEffect, useState } from "react"; | ||
import { ComponentStory, ComponentMeta } from "@storybook/react"; | ||
import { FilterChip } from "./FilterChip"; | ||
import { Typography } from "../Typography/Typography"; | ||
import { Dropdown } from "../Dropdown/Dropdown"; | ||
import dropdownData from "../Dropdown/data.json"; | ||
|
||
export default { | ||
title: "COMPONENTS/FilterChip", | ||
} as ComponentMeta<typeof FilterChip>; | ||
|
||
const Template: ComponentStory<any> = () => { | ||
const [data, setDropdownData] = useState(dropdownData); | ||
const [selectedValues, setSelectedValues] = useState<string[]>([]); | ||
const [value, setValue] = useState<string | number | undefined>(""); | ||
|
||
const handleValueChange = (val) => { | ||
const obj = dropdownData.find((itm) => itm.value === val); | ||
const displayString = obj?.displayString; | ||
if (displayString) setSelectedValues([...selectedValues, displayString]); | ||
setValue(""); | ||
}; | ||
|
||
const removeChip = (val) => { | ||
setSelectedValues(selectedValues.filter((e) => e !== val)); | ||
}; | ||
|
||
useEffect(() => { | ||
setDropdownData( | ||
dropdownData.filter( | ||
(item) => !selectedValues.includes(item.displayString) | ||
) | ||
); | ||
}, [selectedValues]); | ||
|
||
return ( | ||
<> | ||
<Typography>FilterChip Implementation Example</Typography> | ||
<Dropdown | ||
data={data} | ||
label={"Select an item from the list:"} | ||
value={value} | ||
setValue={handleValueChange} | ||
/> | ||
|
||
{selectedValues.length > 0 && ( | ||
<Typography size="xs">Click a FilterChip to remove it.</Typography> | ||
)} | ||
<span style={{ display: "flex", flexDirection: "row" }}> | ||
{selectedValues.map((val, idx) => ( | ||
<FilterChip | ||
text={val} | ||
key={`filterchip-${idx}`} | ||
onClick={() => removeChip(val)} | ||
/> | ||
))} | ||
</span> | ||
</> | ||
); | ||
}; | ||
|
||
export const Implementation = Template.bind({}); | ||
Implementation.args = {}; | ||
Implementation.parameters = { | ||
controls: { hideNoControlsWarning: true }, | ||
}; |
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
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
Oops, something went wrong.