-
Notifications
You must be signed in to change notification settings - Fork 4
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Merge pull request #65 from AlecsMissangu/updated-data-catalog-compon…
…ents TELFE-162 TELFE-174 Updated data catalog components
- Loading branch information
Showing
62 changed files
with
3,462 additions
and
981 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
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,102 @@ | ||
| import type { Meta, StoryObj } from "@storybook/react"; | ||
| import { fn } from "@storybook/test"; | ||
| import Box from "@mui/material/Box"; | ||
|
|
||
| import Chip from "./Chip"; | ||
|
|
||
| const meta = { | ||
| title: "Data display/Chip", | ||
| component: Chip, | ||
| parameters: { | ||
| docs: { | ||
| description: { | ||
| component: "Buttons allow users to take actions, and make choices, with a single tap.", | ||
| }, | ||
| }, | ||
| }, | ||
| tags: ["autodocs"], | ||
| args: { label: "Chip" }, | ||
| argTypes: { | ||
| disabled: { | ||
| description: "If true, the component is disabled.", | ||
| type: "boolean", | ||
| table: { | ||
| defaultValue: { | ||
| summary: "false", | ||
| }, | ||
| }, | ||
| }, | ||
| label: { | ||
| description: "The content of the component.", | ||
| }, | ||
| onClick: { | ||
| description: "Callback fired when the chip is clicked.", | ||
| type: "function", | ||
| }, | ||
| onDelete: { | ||
| description: | ||
| "Callback fired when the delete icon is clicked. If set, the delete icon will be shown.", | ||
| type: "function", | ||
| }, | ||
| size: { | ||
| description: "The size of the component.", | ||
| table: { | ||
| defaultValue: { | ||
| summary: "medium", | ||
| }, | ||
| }, | ||
| control: "select", | ||
| options: ["small", "medium", "large"], | ||
| }, | ||
| }, | ||
| decorators: (Story) => ( | ||
| <Box display="flex" gap={2}> | ||
| {Story()} | ||
| </Box> | ||
| ), | ||
| } satisfies Meta<typeof Chip>; | ||
|
|
||
| export default meta; | ||
| type Story = StoryObj<typeof meta>; | ||
|
|
||
| export const Filled: Story = {}; | ||
|
|
||
| export const Outlined: Story = { | ||
| args: { | ||
| variant: "outlined", | ||
| }, | ||
| }; | ||
|
|
||
| export const ClickableChips: Story = { | ||
| render: (args) => ( | ||
| <> | ||
| <Chip onClick={fn()} {...args} /> | ||
| <Chip variant="outlined" onClick={fn()} {...args} /> | ||
| </> | ||
| ), | ||
| parameters: { | ||
| docs: { | ||
| description: { | ||
| story: | ||
| "Chips with the `onClick` prop defined change appearance on focus, hover, and click.", | ||
| }, | ||
| }, | ||
| }, | ||
| }; | ||
|
|
||
| export const DeletableChips: Story = { | ||
| render: (args) => ( | ||
| <> | ||
| <Chip onDelete={fn()} {...args} /> | ||
| <Chip variant="outlined" onDelete={fn()} {...args} /> | ||
| </> | ||
| ), | ||
| parameters: { | ||
| docs: { | ||
| description: { | ||
| story: | ||
| "Chips with the onDelete prop defined will display a delete icon which changes appearance on hover.", | ||
| }, | ||
| }, | ||
| }, | ||
| }; |
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,22 @@ | ||
| import React from "react"; | ||
| import MUIChip, { ChipProps as MUIChipProps } from "@mui/material/Chip"; | ||
|
|
||
| export type ChipProps = Omit< | ||
| MUIChipProps, | ||
| | "avatar" | ||
| | "children" | ||
| | "classes" | ||
| | "clickable" | ||
| | "color" | ||
| | "component" | ||
| | "deleteIcon" | ||
| | "icon" | ||
| | "skipFocusWhenDisabled" | ||
| | "sx" | ||
| >; | ||
|
|
||
| const Chip: React.FC<ChipProps> = ({ variant = "filled", ...chipProps }) => ( | ||
| <MUIChip variant={variant} color="primary" {...chipProps} /> | ||
| ); | ||
|
|
||
| export default Chip; |
22 changes: 22 additions & 0 deletions
22
src/v1/components/data-display/Divider/Divider.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,22 @@ | ||
| import type { Meta, StoryObj } from "@storybook/react"; | ||
| import Divider from "./Divider"; | ||
|
|
||
| const meta = { | ||
| component: Divider, | ||
| } satisfies Meta<typeof Divider>; | ||
|
|
||
| export default meta; | ||
|
|
||
| export type DividerStory = StoryObj<typeof meta>; | ||
|
|
||
| export const Basic: DividerStory = { | ||
| args: { | ||
| }, | ||
| parameters: { | ||
| docs: { | ||
| description: { | ||
| story: `A line`, | ||
| }, | ||
| }, | ||
| }, | ||
| }; |
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,4 @@ | ||
|
|
||
| import Divider from '@mui/material/Divider'; | ||
|
|
||
| export default Divider; |
11 changes: 11 additions & 0 deletions
11
src/v1/components/data-display/FontAwesomeIcons/DownArrowIcon.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,11 @@ | ||
| import React from "react"; | ||
| import { FontAwesomeIcon, FontAwesomeIconProps } from "@fortawesome/react-fontawesome"; | ||
| import { faAngleDown } from "@fortawesome/free-solid-svg-icons"; | ||
|
|
||
| type DownArrowIconProps = Omit<FontAwesomeIconProps, "icon">; | ||
|
|
||
| const DownArrow: React.FC<DownArrowIconProps> = (iconProps) => ( | ||
| <FontAwesomeIcon icon={faAngleDown} {...iconProps} /> | ||
| ); | ||
|
|
||
| export default DownArrow; |
11 changes: 11 additions & 0 deletions
11
src/v1/components/data-display/FontAwesomeIcons/SearchIcon.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,11 @@ | ||
| import React from "react"; | ||
| import { FontAwesomeIcon, FontAwesomeIconProps } from "@fortawesome/react-fontawesome"; | ||
| import { faMagnifyingGlass } from "@fortawesome/free-solid-svg-icons"; | ||
|
|
||
| type SearchIconProps = Omit<FontAwesomeIconProps, "icon">; | ||
|
|
||
| const SearchIcon: React.FC<SearchIconProps> = (faIconProps) => ( | ||
| <FontAwesomeIcon icon={faMagnifyingGlass} {...faIconProps} /> | ||
| ); | ||
|
|
||
| export default SearchIcon; |
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,2 @@ | ||
| export { default as DownArrowIcon } from "./DownArrowIcon"; | ||
| export { default as SearchIcon } from "./SearchIcon"; |
Oops, something went wrong.