From 88b23b54238d1774b981324775eceeea0945ae01 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Wed, 14 Jul 2021 13:44:35 +0200 Subject: [PATCH 001/140] Restyle pagination --- src/Pagination/Pagination.tsx | 54 +++++++++++++ src/Pagination/PaginationActions.tsx | 64 +++++++++++++++ src/Pagination/PaginationRowNumberSelect.tsx | 56 +++++++++++++ src/Pagination/TablePagination.tsx | 21 +++++ src/Pagination/index.ts | 4 + src/Pagination/styles.ts | 60 ++++++++++++++ src/index.tsx | 1 + .../createSaleorTheme/overrides/tables.ts | 3 +- src/theme/createSaleorTheme/palette.ts | 2 +- src/theme/themes.ts | 8 +- stories/tables.stories.tsx | 81 +++++++++++++++---- 11 files changed, 333 insertions(+), 21 deletions(-) create mode 100644 src/Pagination/Pagination.tsx create mode 100644 src/Pagination/PaginationActions.tsx create mode 100644 src/Pagination/PaginationRowNumberSelect.tsx create mode 100644 src/Pagination/TablePagination.tsx create mode 100644 src/Pagination/index.ts create mode 100644 src/Pagination/styles.ts diff --git a/src/Pagination/Pagination.tsx b/src/Pagination/Pagination.tsx new file mode 100644 index 00000000..48877912 --- /dev/null +++ b/src/Pagination/Pagination.tsx @@ -0,0 +1,54 @@ +import Toolbar from "@material-ui/core/Toolbar"; +import React from "react"; + +import { PaginationActions, PaginationActionsProps } from "./PaginationActions"; +import { + PaginationRowNumberSelect, + PaginationRowNumberSelectProps, +} from "./PaginationRowNumberSelect"; +import useStyles from "./styles"; + +export interface PaginationProps + extends PaginationActionsProps, + Omit { + choices?: number[]; + rowNumber: number; + onRowNumberUpdate?: (rowNumber: number) => void; +} + +export const Pagination: React.FC = ({ + choices = [10, 20, 30, 50, 100], + hasNextPage, + hasPreviousPage, + nextIconButtonProps, + labels, + rowNumber, + onNextPage, + onPreviousPage, + onRowNumberUpdate, + ...other +}) => { + const classes = useStyles(); + + return ( + +
+ +
+ + + ); +}; + +Pagination.displayName = "Pagination"; diff --git a/src/Pagination/PaginationActions.tsx b/src/Pagination/PaginationActions.tsx new file mode 100644 index 00000000..d817f4b3 --- /dev/null +++ b/src/Pagination/PaginationActions.tsx @@ -0,0 +1,64 @@ +import ButtonBase from "@material-ui/core/ButtonBase"; +import ChevronLeft from "@material-ui/icons/ChevronLeft"; +import ChevronRight from "@material-ui/icons/ChevronRight"; +import classNames from "classnames"; +import React from "react"; + +import { useTheme } from "../theme"; +import useStyles from "./styles"; + +export interface PaginationActionsProps { + className?: string; + hasNextPage: boolean; + hasPreviousPage: boolean; + nextIconButtonProps?: any; + onNextPage: () => void; + onPreviousPage: () => void; +} + +export const PaginationActions: React.FC = ({ + className, + hasNextPage, + hasPreviousPage, + nextIconButtonProps, + onNextPage, + onPreviousPage, + ...other +}) => { + const classes = useStyles(); + + const { direction, themeType } = useTheme(); + + const isDark = themeType === "dark"; + + return ( +
+ + {direction === "rtl" ? : } + + + + {direction === "rtl" ? : } + +
+ ); +}; + +PaginationActions.displayName = "PaginationActions"; diff --git a/src/Pagination/PaginationRowNumberSelect.tsx b/src/Pagination/PaginationRowNumberSelect.tsx new file mode 100644 index 00000000..e4b89c00 --- /dev/null +++ b/src/Pagination/PaginationRowNumberSelect.tsx @@ -0,0 +1,56 @@ +import MenuItem from "@material-ui/core/MenuItem"; +import Select from "@material-ui/core/Select"; +import clsx from "clsx"; +import React from "react"; + +import useStyles from "./styles"; + +export type PaginationRowNumberSelectLabels = Record<"noOfRows", string>; +export interface PaginationRowNumberSelectProps { + choices: number[]; + className?: string; + labels: PaginationRowNumberSelectLabels; + rowNumber: number; + onChange?: (value: number) => void; +} + +export const PaginationRowNumberSelect: React.FC = ({ + className, + choices, + labels, + rowNumber, + onChange, +}) => { + const classes = useStyles({}); + + return ( +
+ {labels.noOfRows} + {onChange ? ( + + ) : ( + ` ${rowNumber}` + )} +
+ ); +}; +PaginationRowNumberSelect.displayName = "PaginationRowNumberSelect"; diff --git a/src/Pagination/TablePagination.tsx b/src/Pagination/TablePagination.tsx new file mode 100644 index 00000000..0c8abed1 --- /dev/null +++ b/src/Pagination/TablePagination.tsx @@ -0,0 +1,21 @@ +import TableCell from "@material-ui/core/TableCell"; +import TableRow from "@material-ui/core/TableRow"; +import React from "react"; + +import { Pagination, PaginationProps } from "./Pagination"; + +export interface TablePaginationProps extends PaginationProps { + colSpan: number; +} + +export const TablePagination: React.FC = ({ + colSpan, + ...paginationProps +}) => ( + + + + + +); +TablePagination.displayName = "TablePagination"; diff --git a/src/Pagination/index.ts b/src/Pagination/index.ts new file mode 100644 index 00000000..9d0760ae --- /dev/null +++ b/src/Pagination/index.ts @@ -0,0 +1,4 @@ +export * from "./Pagination"; +export * from "./PaginationActions"; +export * from "./PaginationRowNumberSelect"; +export * from "./TablePagination"; diff --git a/src/Pagination/styles.ts b/src/Pagination/styles.ts new file mode 100644 index 00000000..9bc5388a --- /dev/null +++ b/src/Pagination/styles.ts @@ -0,0 +1,60 @@ +import { fade } from "@material-ui/core/styles/colorManipulator"; + +import { makeStyles } from "../theme"; + +const useStyles = makeStyles( + (theme) => ({ + actions: {}, + actionsButton: { + "&:last-child": { + marginLeft: theme.spacing(1.5), + }, + "& svg": { + color: theme.palette.text.secondary, + width: 16, + }, + border: `2px solid ${theme.palette.text.secondary}`, + height: 36, + width: 36, + }, + actionsButtonDisabled: { + "& svg": { + color: theme.palette.text.disabled, + }, + border: `2px solid ${theme.palette.text.disabled}`, + }, + dark: { + "& svg": { + color: theme.palette.primary.main, + }, + "&:focus, &:hover": { + "& > span:first-of-type": { + backgroundColor: fade(theme.palette.primary.main, 0.2), + }, + }, + }, + root: {}, + toolbar: { + justifyContent: "space-between", + }, + spacer: {}, + + rowNumber: { + fontSize: theme.typography.body2.fontSize, + }, + rowNumberLabel: {}, + rowNumberSelect: { + "&:before, &:after": { + content: "none", + }, + marginLeft: theme.spacing(1), + }, + rowNumberSelectLabel: { + "&": { + color: theme.palette.primary.main, + }, + }, + }), + { name: "Pagination" } +); +export default useStyles; diff --git a/src/index.tsx b/src/index.tsx index 8c073b51..52db72a3 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -13,3 +13,4 @@ export * from "./UserChipMenu"; export * from "./ResponsiveTable"; export * from "./Tooltip"; export * from "./ActionBar"; +export * from "./Pagination"; diff --git a/src/theme/createSaleorTheme/overrides/tables.ts b/src/theme/createSaleorTheme/overrides/tables.ts index 9442f421..0df6a122 100644 --- a/src/theme/createSaleorTheme/overrides/tables.ts +++ b/src/theme/createSaleorTheme/overrides/tables.ts @@ -19,7 +19,7 @@ export const tableOverrides = ( head: { fontSize: "1.4rem", fontWeight: 400, - color: colors.font.textDisabled, + color: colors.font.gray, }, paddingCheckbox: { "&:first-child": { @@ -35,6 +35,7 @@ export const tableOverrides = ( "&:first-child": { "&:not($paddingCheckbox)": { paddingLeft: 24 + "px", + paddingRight: 24 + "px", textAlign: "left" as "left", }, }, diff --git a/src/theme/createSaleorTheme/palette.ts b/src/theme/createSaleorTheme/palette.ts index 752bf4a4..3eef95bd 100644 --- a/src/theme/createSaleorTheme/palette.ts +++ b/src/theme/createSaleorTheme/palette.ts @@ -25,7 +25,7 @@ export const createPalette = ( main: colors.success, }, text: { - disabled: colors.font.gray, + disabled: colors.font.textDisabled, hint: colors.font.gray, primary: colors.font.default, secondary: colors.font.gray, diff --git a/src/theme/themes.ts b/src/theme/themes.ts index 14be606d..d8cabd9a 100644 --- a/src/theme/themes.ts +++ b/src/theme/themes.ts @@ -1,3 +1,5 @@ +import { fade } from "@material-ui/core/styles/colorManipulator"; + import { SaleorThemeColors } from "./createSaleorTheme"; export const dark: SaleorThemeColors = { @@ -85,10 +87,10 @@ export const light: SaleorThemeColors = { error: "#FE6D76", font: { button: "#FFFFFF", - default: "#3D3D3D", - gray: "#616161", + default: "#28234A", + gray: fade("#28234A", 0.6), textButton: "#06847B", - textDisabled: "#616161", + textDisabled: fade("#28234A", 0.4), }, gray: { default: "#C8C8C8", diff --git a/stories/tables.stories.tsx b/stories/tables.stories.tsx index 8cb0b2b8..0a298977 100644 --- a/stories/tables.stories.tsx +++ b/stories/tables.stories.tsx @@ -1,6 +1,7 @@ import { TableBody, TableCell, + TableFooter, TableHead, TableRow, Typography, @@ -9,7 +10,7 @@ import Skeleton from "@material-ui/lab/Skeleton"; import { storiesOf } from "@storybook/react"; import React from "react"; -import { ResponsiveTable } from "../src"; +import { ResponsiveTable, TablePagination } from "../src"; import { makeStyles } from "../src/theme"; import { Decorator, GuideDecorator } from "../src/utils/Decorator"; import useGuideStyles from "./guideStyles"; @@ -20,9 +21,45 @@ const useStyles = makeStyles((theme) => ({ }, })); +interface TableDataRow { + name: string; + calories: number; +} +const data: TableDataRow[] = [ + { + name: "Baked Potato", + calories: 93, + }, + { + name: "French Fries", + calories: 312, + }, + { + name: "Cheddar", + calories: 403, + }, + { + name: "Brie", + calories: 334, + }, + { + name: "Feta", + calories: 264, + }, + { + name: "Ricotta", + calories: 264, + }, +]; + const Default: React.FC = () => { const classes = useStyles(); const guideClasses = useGuideStyles(); + const [page, setPage] = React.useState(0); + const [rowsPerPage, setRowsPerPage] = React.useState(2); + + const hasNextPage = (page + 1) * rowsPerPage < data.length; + const hasPreviousPage = page > 0; return (
@@ -30,9 +67,9 @@ const Default: React.FC = () => { Tables - Tables play a huge part in creating dashboards. If you're building a Saleor - Extension, it's probably what you're going to use for displaying tabular - data. In Saleor Dashboard, we build our tables like this: + Tables play a huge part in creating dashboards. If you're building a + Saleor Extension, it's probably what you're going to use for displaying + tabular data. In Saleor Dashboard, we build our tables like this: @@ -47,19 +84,31 @@ const Default: React.FC = () => { - - Baked Potato - 93 kcal - - - French Fries - 312 kcal - - - Cheddar - 403 kcal - + {data + .slice(page * rowsPerPage, (page + 1) * rowsPerPage) + .map((dataRow) => ( + + {dataRow.name} + {`${dataRow.calories} kcal`} + + ))} + + { + setRowsPerPage(rows); + setPage(0); + }} + hasNextPage={hasNextPage} + hasPreviousPage={hasPreviousPage} + labels={{ noOfRows: "No. of rows:" }} + onNextPage={() => setPage(page + 1)} + onPreviousPage={() => setPage(page - 1)} + rowNumber={rowsPerPage} + colSpan={2} + /> + From 0a20fb042ec903bb161644954117bb3ea75b5511 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Wed, 14 Jul 2021 13:49:01 +0200 Subject: [PATCH 002/140] Fix specificity --- src/Pagination/styles.ts | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Pagination/styles.ts b/src/Pagination/styles.ts index 9bc5388a..15520eab 100644 --- a/src/Pagination/styles.ts +++ b/src/Pagination/styles.ts @@ -44,13 +44,13 @@ const useStyles = makeStyles( }, rowNumberLabel: {}, rowNumberSelect: { - "&:before, &:after": { + "&&:before, &&:after": { content: "none", }, marginLeft: theme.spacing(1), }, rowNumberSelectLabel: { - "&": { + "&&": { color: theme.palette.primary.main, }, }, From f1af2c90b6ff418de06c94cdba029451e6425ad1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Wed, 14 Jul 2021 15:13:36 +0200 Subject: [PATCH 003/140] Update usermenu design --- src/UserChipMenu/UserChipMenu.tsx | 70 +++++++++++++------------------ src/UserChipMenu/styles.ts | 42 ++++++++++--------- src/theme/themes.ts | 4 +- 3 files changed, 54 insertions(+), 62 deletions(-) diff --git a/src/UserChipMenu/UserChipMenu.tsx b/src/UserChipMenu/UserChipMenu.tsx index 2a580d1c..d5346abd 100644 --- a/src/UserChipMenu/UserChipMenu.tsx +++ b/src/UserChipMenu/UserChipMenu.tsx @@ -1,5 +1,4 @@ import Avatar from "@material-ui/core/Avatar"; -import Chip from "@material-ui/core/Chip"; import ClickAwayListener from "@material-ui/core/ClickAwayListener"; import Grow from "@material-ui/core/Grow"; import Hidden from "@material-ui/core/Hidden"; @@ -7,10 +6,8 @@ import Menu from "@material-ui/core/MenuList"; import Paper from "@material-ui/core/Paper"; import Popper from "@material-ui/core/Popper"; import Typography from "@material-ui/core/Typography"; -import clsx from "clsx"; import React from "react"; -import ArrowDropdownIcon from "../icons/ArrowDropdownIcon"; import { UserChipMenuContext } from "./context"; import useStyles from "./styles"; @@ -37,49 +34,40 @@ export const UserChipMenu: React.FC = ({ return (
- +
setMenuState(!isMenuOpened)} + data-test="userMenu" + > +
+ {avatar ? ( + ) : (
{initials}
- ) - } - classes={{ - avatar: classes.avatar, - }} - className={classes.userChip} - label={ -
- -
- - {name} + )} +
+
+ +
+ + {name} + + {subtext && ( + + {subtext} - {subtext && ( - - {subtext} - - )} -
- - -
- } - onClick={() => setMenuState(!isMenuOpened)} - ref={anchor} - data-test="userMenu" - /> + )} +
+ +
+
({ - arrow: { - [theme.breakpoints.down("sm")]: { - marginLeft: 0, - }, - marginLeft: theme.spacing(2), - transition: theme.transitions.duration.standard + "ms", - }, avatar: { "&&": { [theme.breakpoints.down("sm")]: { - height: 40, - width: 40, + height: mobileAvatarSize, + width: mobileAvatarSize, }, - height: 32, - width: 32, + height: avatarSize, + width: avatarSize, }, + backgroundColor: theme.palette.background.paper, + }, + avatarContainer: { + padding: 2, + backgroundColor: theme.palette.background.paper, + borderRadius: "100%", }, avatarInitials: { + [theme.breakpoints.down("sm")]: { + height: mobileAvatarSize, + width: mobileAvatarSize, + }, + height: avatarSize, + width: avatarSize, color: theme.palette.primary.contrastText, }, avatarPlaceholder: { @@ -35,25 +43,21 @@ const useStyles = makeStyles( labelContainer: { display: "inline-flex", alignItems: "center", + marginLeft: theme.spacing(1), }, popover: { marginTop: theme.spacing(2), zIndex: 10, }, - rotate: { - transform: "rotate(180deg)", - }, userChip: { - [theme.breakpoints.down("sm")]: { - height: 48, - }, - backgroundColor: theme.palette.background.paper, borderRadius: 24, color: theme.palette.text.primary, - height: 40, + display: "flex", padding: theme.spacing(0.5), }, userMenuContainer: { + cursor: "pointer", + display: "inline-block", position: "relative", }, }), diff --git a/src/theme/themes.ts b/src/theme/themes.ts index d8cabd9a..3b07a752 100644 --- a/src/theme/themes.ts +++ b/src/theme/themes.ts @@ -108,8 +108,8 @@ export const light: SaleorThemeColors = { textHover: "#616161", }, paperBorder: "#EAEAEA", - primary: "#06847B", - secondary: "#21125E", + primary: "#056DFF", + secondary: "#FFFFFF", success: "#5DC292", theme: "light", }; From a90cf95e508b83865a735534ce6622cd87b4b093 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Wed, 14 Jul 2021 16:45:40 +0200 Subject: [PATCH 004/140] Improve backlink styles --- src/Backlink/Backlink.stories.tsx | 2 +- src/Backlink/Backlink.tsx | 8 ++++---- src/Backlink/styles.ts | 7 ------- src/LayoutButton/LayoutButton.stories.tsx | 10 +++++++++ src/LayoutButton/LayoutButton.tsx | 21 +++++++++++++++++++ src/LayoutButton/index.ts | 1 + src/LayoutButton/styles.ts | 25 +++++++++++++++++++++++ src/index.tsx | 1 + 8 files changed, 63 insertions(+), 12 deletions(-) create mode 100644 src/LayoutButton/LayoutButton.stories.tsx create mode 100644 src/LayoutButton/LayoutButton.tsx create mode 100644 src/LayoutButton/index.ts create mode 100644 src/LayoutButton/styles.ts diff --git a/src/Backlink/Backlink.stories.tsx b/src/Backlink/Backlink.stories.tsx index 005984d5..02e510c1 100644 --- a/src/Backlink/Backlink.stories.tsx +++ b/src/Backlink/Backlink.stories.tsx @@ -32,7 +32,7 @@ const Wrapper: React.FC = ({ children }) => { }; export const Default: Story = () => ( - undefined}>Go back + undefined}>Back ); export const Loading: Story = () => ( undefined}>{undefined} diff --git a/src/Backlink/Backlink.tsx b/src/Backlink/Backlink.tsx index 5dceb309..5d6c8214 100644 --- a/src/Backlink/Backlink.tsx +++ b/src/Backlink/Backlink.tsx @@ -1,9 +1,9 @@ import Portal from "@material-ui/core/Portal"; -import Typography from "@material-ui/core/Typography"; import ArrowBackIcon from "@material-ui/icons/ArrowBack"; import Skeleton from "@material-ui/lab/Skeleton"; import React from "react"; +import { LayoutButton } from "../LayoutButton"; import { useBacklink } from "./context"; import useStyles from "./styles"; @@ -22,18 +22,18 @@ export const Backlink: React.FC = ({ children, onClick }) => { return ( -
{children ? ( - {children} +
{children}
) : ( )} -
+ ); }; diff --git a/src/Backlink/styles.ts b/src/Backlink/styles.ts index fa92c309..f469ad8a 100644 --- a/src/Backlink/styles.ts +++ b/src/Backlink/styles.ts @@ -12,15 +12,10 @@ const useStyles = makeStyles( marginTop: theme.spacing(-2), }, root: { - "&:hover": { - color: theme.typography.body1.color, - }, alignItems: "center", - color: theme.palette.grey[500], cursor: "pointer", display: "flex", marginTop: theme.spacing(0.5), - transition: theme.transitions.duration.standard + "ms", [theme.breakpoints.down("sm")]: { margin: theme.spacing(4, 0, 0, 0), }, @@ -29,10 +24,8 @@ const useStyles = makeStyles( width: "10rem", }, title: { - color: "inherit", flex: 1, marginLeft: theme.spacing(), - textTransform: "uppercase", }, }), { name: "AppHeader" } diff --git a/src/LayoutButton/LayoutButton.stories.tsx b/src/LayoutButton/LayoutButton.stories.tsx new file mode 100644 index 00000000..742c44f7 --- /dev/null +++ b/src/LayoutButton/LayoutButton.stories.tsx @@ -0,0 +1,10 @@ +import { Meta, Story } from "@storybook/react"; +import React from "react"; + +import { LayoutButton } from "./LayoutButton"; + +export const Default: Story = () => Lorem Ipsum; + +export default { + title: "Layout Button", +} as Meta; diff --git a/src/LayoutButton/LayoutButton.tsx b/src/LayoutButton/LayoutButton.tsx new file mode 100644 index 00000000..dbb3deb1 --- /dev/null +++ b/src/LayoutButton/LayoutButton.tsx @@ -0,0 +1,21 @@ +import type { ButtonBaseProps } from "@material-ui/core/ButtonBase"; +import ButtonBase from "@material-ui/core/ButtonBase"; +import clsx from "clsx"; +import React from "react"; + +import useStyles from "./styles"; + +export const LayoutButton: React.FC = ({ + className, + children, + ...rest +}) => { + const classes = useStyles(); + + return ( + + {children} + + ); +}; +LayoutButton.displayName = "LayoutButton"; diff --git a/src/LayoutButton/index.ts b/src/LayoutButton/index.ts new file mode 100644 index 00000000..fdb73e42 --- /dev/null +++ b/src/LayoutButton/index.ts @@ -0,0 +1 @@ +export * from "./LayoutButton"; diff --git a/src/LayoutButton/styles.ts b/src/LayoutButton/styles.ts new file mode 100644 index 00000000..ceb272b4 --- /dev/null +++ b/src/LayoutButton/styles.ts @@ -0,0 +1,25 @@ +import { fade } from "@material-ui/core/styles"; + +import { makeStyles } from "../theme"; + +const useStyles = makeStyles( + (theme) => ({ + root: { + "&:hover": { + color: theme.typography.body1.color, + }, + background: fade("#FFFFFF", 0.4), + borderRadius: 4, + color: theme.palette.text.secondary, + fontSize: theme.typography.body1.fontSize, + fontWeight: 600, + height: 48, + padding: theme.spacing(0.5, 2), + textTransform: "uppercase", + transition: theme.transitions.duration.standard + "ms", + }, + }), + { name: "LayoutButton" } +); + +export default useStyles; diff --git a/src/index.tsx b/src/index.tsx index 52db72a3..0b350b3f 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -14,3 +14,4 @@ export * from "./ResponsiveTable"; export * from "./Tooltip"; export * from "./ActionBar"; export * from "./Pagination"; +export * from "./LayoutButton"; From 3cab73218deffec0a358eba56c9dd0440eafa12e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Wed, 14 Jul 2021 17:10:45 +0200 Subject: [PATCH 005/140] Improve button styles --- src/LayoutButton/styles.ts | 1 + .../createSaleorTheme/overrides/buttons.ts | 173 ++++++++++-------- stories/buttons.stories.tsx | 61 ++++++ 3 files changed, 162 insertions(+), 73 deletions(-) create mode 100644 stories/buttons.stories.tsx diff --git a/src/LayoutButton/styles.ts b/src/LayoutButton/styles.ts index ceb272b4..81d8bacb 100644 --- a/src/LayoutButton/styles.ts +++ b/src/LayoutButton/styles.ts @@ -15,6 +15,7 @@ const useStyles = makeStyles( fontWeight: 600, height: 48, padding: theme.spacing(0.5, 2), + textAlign: "center", textTransform: "uppercase", transition: theme.transitions.duration.standard + "ms", }, diff --git a/src/theme/createSaleorTheme/overrides/buttons.ts b/src/theme/createSaleorTheme/overrides/buttons.ts index 8f285625..eeb04e5a 100644 --- a/src/theme/createSaleorTheme/overrides/buttons.ts +++ b/src/theme/createSaleorTheme/overrides/buttons.ts @@ -1,96 +1,123 @@ import type { ThemeOptions } from "@material-ui/core/styles"; -import { darken, fade } from "@material-ui/core/styles"; +import { fade } from "@material-ui/core/styles"; import { SaleorThemeColors } from "../types"; export const buttonOverrides = ( colors: SaleorThemeColors -): ThemeOptions["overrides"] => ({ - MuiButton: { - contained: { - "&$disabled": { - backgroundColor: fade(colors.primary, 0.12), - color: "#FFFFFF", - }, - "&:active": { +): ThemeOptions["overrides"] => { + const containedPrimaryStates = { + "&&:active": { + backgroundColor: fade(colors.primary, 0.4), + }, + "&&:hover": { + backgroundColor: fade(colors.primary, 0.6), + }, + }; + const containedSecondaryStates = { + "&&:active": { + backgroundColor: fade(colors.primary, 0.2), + }, + "&&:hover": { + backgroundColor: fade(colors.primary, 0.1), + }, + }; + + return { + MuiButton: { + contained: { + "&$disabled": { + backgroundColor: fade(colors.primary, 0.12), + color: "#FFFFFF", + }, + "&:active": { + boxShadow: "none", + }, + "&:hover": { + "@media(hover: none)": { + boxShadow: "none", + }, + boxShadow: "none", + }, boxShadow: "none", }, - "&:hover": { - boxShadow: "none", + containedPrimary: { + ...containedPrimaryStates, + "@media(hover: none)": containedPrimaryStates, }, - boxShadow: "none", - }, - containedPrimary: { - "&:active": { - backgroundColor: darken(colors.primary, 0.4), + containedSecondary: { + ...containedSecondaryStates, + "@media(hover: none)": containedSecondaryStates, + color: colors.primary, }, - "&:hover": { - backgroundColor: darken(colors.primary, 0.1), + label: { + fontWeight: 600, }, - }, - label: { - fontWeight: 600, - }, - root: { - "& svg": { - marginLeft: 8, + root: { + "& svg": { + marginLeft: 8, + }, + borderRadius: 4, }, - borderRadius: 4, - }, - textPrimary: { - "&:not($disabled) span": { - color: colors.primary, + text: { + ...containedSecondaryStates, + "@media(hover: none)": containedSecondaryStates, }, - }, - textSizeSmall: { - fontSize: "1.3rem", - }, - }, - MuiIconButton: { - root: { - "&:hover": { - backgroundColor: fade(colors.primary, 0.12), + textPrimary: { + "&:not($disabled) span": { + color: colors.primary, + }, + }, + textSizeSmall: { + fontSize: "1.3rem", }, }, - }, - MuiSwitch: { - colorPrimary: { - "&$checked": { - color: colors.background.paper, + MuiIconButton: { + root: { + "&:hover": { + backgroundColor: fade(colors.primary, 0.12), + }, }, }, - root: { - "&$disabled": { - "&$switchBase": { - "& + $thumb": { - backgroundColor: colors.gray.disabled, + MuiSwitch: { + colorPrimary: { + "&$checked": { + color: colors.background.paper, + }, + }, + root: { + "&$disabled": { + "&$switchBase": { + "& + $thumb": { + backgroundColor: colors.gray.disabled, + }, }, }, + height: 48, + width: 72, }, - height: 48, - width: 72, - }, - switchBase: { - "&$checked": { - transform: "translateX(23px)", + switchBase: { + "&$checked": { + transform: "translateX(23px)", + }, + boxShadow: "none", + left: 1, + marginLeft: 4, + top: 5, }, - boxShadow: "none", - left: 1, - marginLeft: 4, - top: 5, - }, - thumb: { - boxShadow: "none", - }, - track: { - "$colorPrimary$checked + &": { - backgroundColor: colors.primary, + thumb: { + boxShadow: "none", + }, + track: { + "$colorPrimary$checked + &": { + backgroundColor: colors.primary, + }, + backgroundColor: colors.gray.default, + borderRadius: 12, + height: 24, + opacity: [["1"], "!important"] as any, + width: 48, }, - backgroundColor: colors.gray.default, - borderRadius: 12, - height: 24, - opacity: [["1"], "!important"] as any, - width: 48, }, - }, -}); + }; +}; diff --git a/stories/buttons.stories.tsx b/stories/buttons.stories.tsx new file mode 100644 index 00000000..f66f8a79 --- /dev/null +++ b/stories/buttons.stories.tsx @@ -0,0 +1,61 @@ +import { Button, Typography } from "@material-ui/core"; +import { storiesOf } from "@storybook/react"; +import React from "react"; + +import { makeStyles } from "../src/theme"; +import { Decorator, GuideDecorator } from "../src/utils/Decorator"; +import useGuideStyles from "./guideStyles"; + +const useStyles = makeStyles((theme) => ({ + buttonGrid: { + background: theme.palette.background.default, + borderRadius: 4, + display: "grid", + gridTemplateColumns: "repeat(3, 1fr)", + columnGap: theme.spacing(3), + rowGap: theme.spacing(2), + padding: theme.spacing(3), + }, +})); + +const Default: React.FC = () => { + const classes = useStyles(); + const guideClasses = useGuideStyles(); + + return ( +
+ + Buttons + + + In most cases your app will be using one of those three button types: + + +
+
Primary
+
Secondary
+
Text
+ + + +
+ + + They are designed to perform most of the actions that you will need to + add. These buttons can be placed in various places, most notably cards, + dialogs and forms. + +
+ ); +}; + +storiesOf("Buttons", module) + .addDecorator(Decorator) + .addDecorator(GuideDecorator) + .add("default", () => ); From 77878d4fb9d9671833515c0560ab38f5037182ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Wed, 14 Jul 2021 17:19:02 +0200 Subject: [PATCH 006/140] Improve disabled state --- src/theme/createSaleorTheme/overrides/buttons.ts | 13 +++++++++++-- src/theme/themes.ts | 2 +- stories/buttons.stories.tsx | 9 +++++++++ 3 files changed, 21 insertions(+), 3 deletions(-) diff --git a/src/theme/createSaleorTheme/overrides/buttons.ts b/src/theme/createSaleorTheme/overrides/buttons.ts index eeb04e5a..fdafaed2 100644 --- a/src/theme/createSaleorTheme/overrides/buttons.ts +++ b/src/theme/createSaleorTheme/overrides/buttons.ts @@ -27,8 +27,14 @@ export const buttonOverrides = ( MuiButton: { contained: { "&$disabled": { - backgroundColor: fade(colors.primary, 0.12), - color: "#FFFFFF", + "&$containedPrimary": { + color: colors.secondary, + backgroundColor: colors.gray.disabled, + }, + "&$containedSecondary": { + background: colors.secondary, + color: colors.gray.disabled, + }, }, "&:active": { boxShadow: "none", @@ -62,6 +68,9 @@ export const buttonOverrides = ( text: { ...containedSecondaryStates, "@media(hover: none)": containedSecondaryStates, + "&&$disabled": { + color: colors.gray.disabled, + }, }, textPrimary: { "&:not($disabled) span": { diff --git a/src/theme/themes.ts b/src/theme/themes.ts index 3b07a752..3d751e23 100644 --- a/src/theme/themes.ts +++ b/src/theme/themes.ts @@ -94,7 +94,7 @@ export const light: SaleorThemeColors = { }, gray: { default: "#C8C8C8", - disabled: "rgba(216, 216, 216, 0.3)", + disabled: "#C0CFE2", }, input: { diff --git a/stories/buttons.stories.tsx b/stories/buttons.stories.tsx index f66f8a79..ec508da0 100644 --- a/stories/buttons.stories.tsx +++ b/stories/buttons.stories.tsx @@ -44,6 +44,15 @@ const Default: React.FC = () => { + + +
From 0042599794f1030967558e3c6bb47eab591c6ff3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Thu, 15 Jul 2021 13:35:53 +0200 Subject: [PATCH 007/140] Fix disabled state --- src/Pagination/Pagination.tsx | 4 ++++ src/Pagination/PaginationActions.tsx | 14 ++++++++++---- src/Pagination/PaginationRowNumberSelect.tsx | 3 +++ src/Pagination/styles.ts | 4 ++-- 4 files changed, 19 insertions(+), 6 deletions(-) diff --git a/src/Pagination/Pagination.tsx b/src/Pagination/Pagination.tsx index 48877912..2799194c 100644 --- a/src/Pagination/Pagination.tsx +++ b/src/Pagination/Pagination.tsx @@ -12,12 +12,14 @@ export interface PaginationProps extends PaginationActionsProps, Omit { choices?: number[]; + disabled?: boolean; rowNumber: number; onRowNumberUpdate?: (rowNumber: number) => void; } export const Pagination: React.FC = ({ choices = [10, 20, 30, 50, 100], + disabled, hasNextPage, hasPreviousPage, nextIconButtonProps, @@ -35,12 +37,14 @@ export const Pagination: React.FC = ({
= ({ className, + disabled, hasNextPage, hasPreviousPage, nextIconButtonProps, @@ -30,17 +32,20 @@ export const PaginationActions: React.FC = ({ const { direction, themeType } = useTheme(); const isDark = themeType === "dark"; + const previousDisabled = !hasPreviousPage || disabled; + const nextDisabled = !hasNextPage || disabled; return (
{direction === "rtl" ? : } @@ -48,11 +53,12 @@ export const PaginationActions: React.FC = ({ {direction === "rtl" ? : } diff --git a/src/Pagination/PaginationRowNumberSelect.tsx b/src/Pagination/PaginationRowNumberSelect.tsx index e4b89c00..c63c6348 100644 --- a/src/Pagination/PaginationRowNumberSelect.tsx +++ b/src/Pagination/PaginationRowNumberSelect.tsx @@ -9,6 +9,7 @@ export type PaginationRowNumberSelectLabels = Record<"noOfRows", string>; export interface PaginationRowNumberSelectProps { choices: number[]; className?: string; + disabled?: boolean; labels: PaginationRowNumberSelectLabels; rowNumber: number; onChange?: (value: number) => void; @@ -17,6 +18,7 @@ export interface PaginationRowNumberSelectProps { export const PaginationRowNumberSelect: React.FC = ({ className, choices, + disabled, labels, rowNumber, onChange, @@ -29,6 +31,7 @@ export const PaginationRowNumberSelect: React.FC {onChange ? ( +
+ ))} + + ); + } + + return ( + <> + + + + ); +}; + +export const Filter: React.FC = ({ + children, + name, + label, + labels, + ...props +}) => { + const classes = useStyles(); + const { filters, toggle, register } = useFilters(); + React.useEffect(() => { + register(name, label); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); + + const availableFilters = getAvailableFilters(filters); + + const filter = filters[name]; + + if (!filter?.active) { + return null; + } + + const options = availableFilters; + + return ( +
+ {labels.where} + + + toggle(name)}> + + +
+ ); +}; diff --git a/src/Filter/FilterMenu.tsx b/src/Filter/FilterMenu.tsx new file mode 100644 index 00000000..6b53a904 --- /dev/null +++ b/src/Filter/FilterMenu.tsx @@ -0,0 +1,64 @@ +import ClickAwayListener from "@material-ui/core/ClickAwayListener"; +import MenuItem from "@material-ui/core/MenuItem"; +import Paper from "@material-ui/core/Paper"; +import Popper from "@material-ui/core/Popper"; +import Typography from "@material-ui/core/Typography"; +import React from "react"; + +import { useFilters } from "./Filter"; +import useStyles from "./styles"; +import { getAvailableFilters } from "./utils"; + +export type FilterMenuLabels = Record<"header", string>; +export interface FilterMenuProps { + anchorEl: HTMLElement | null; + labels: FilterMenuLabels; + open: boolean; + onClose: () => void; +} + +const FilterMenu: React.FC = ({ + anchorEl, + labels, + open, + onClose, +}) => { + const classes = useStyles(); + const { filters, toggle } = useFilters(); + + const availableFilters = getAvailableFilters(filters); + const handleFilterClick = (filterName: string) => { + toggle(filterName); + onClose(); + }; + + return ( + + + +
+ + {labels.header} + +
+ {availableFilters.map(([filterName, filter]) => ( + handleFilterClick(filterName)}> + {filter.label} + + ))} + + + + ); +}; +FilterMenu.displayName = "FilterMenu"; +export default FilterMenu; diff --git a/src/Filter/styles.ts b/src/Filter/styles.ts new file mode 100644 index 00000000..b515a8a1 --- /dev/null +++ b/src/Filter/styles.ts @@ -0,0 +1,32 @@ +import { makeStyles } from "../theme"; + +const useStyles = makeStyles( + (theme) => ({ + menuContent: { + minWidth: 220, + padding: theme.spacing(2), + }, + menuHeader: { + textTransform: "uppercase", + }, + menuPaper: { + borderRadius: 0, + }, + + filter: { + display: "flex", + columnGap: theme.spacing(2), + }, + filterDelete: { + marginLeft: "auto", + }, + + bar: { + width: 800, + }, + }), + { + name: "Filter", + } +); +export default useStyles; diff --git a/src/Filter/utils.ts b/src/Filter/utils.ts new file mode 100644 index 00000000..e27b7d80 --- /dev/null +++ b/src/Filter/utils.ts @@ -0,0 +1,5 @@ +import { FilterData } from "./Filter"; + +export function getAvailableFilters(filterData: Record) { + return Object.entries(filterData).filter(([_key, value]) => !value.active); +} diff --git a/src/utils/Decorator.tsx b/src/utils/Decorator.tsx index 8b00fbc9..9069a27b 100644 --- a/src/utils/Decorator.tsx +++ b/src/utils/Decorator.tsx @@ -1,4 +1,5 @@ -import { Card, CardContent } from "@material-ui/core"; +import Card from "@material-ui/core/Card"; +import CardContent from "@material-ui/core/CardContent"; import { StoryFn } from "@storybook/addons"; import React from "react"; From 52d677654dfe6ecc7cebf2409bdc8621597223e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Mon, 26 Jul 2021 15:04:36 +0200 Subject: [PATCH 033/140] Retain order --- src/Filter/Filter.stories.tsx | 12 +- src/Filter/Filter.tsx | 212 +++++------------- src/Filter/FilterBar.tsx | 88 ++++++++ src/Filter/FilterContent.tsx | 35 +++ src/Filter/FilterMenu.tsx | 9 +- src/Filter/context.tsx | 13 ++ src/Filter/styles.ts | 16 ++ src/Filter/types.ts | 34 +++ src/Filter/utils.ts | 73 +++++- .../createSaleorTheme/overrides/inputs.ts | 1 + 10 files changed, 324 insertions(+), 169 deletions(-) create mode 100644 src/Filter/FilterBar.tsx create mode 100644 src/Filter/FilterContent.tsx create mode 100644 src/Filter/context.tsx create mode 100644 src/Filter/types.ts diff --git a/src/Filter/Filter.stories.tsx b/src/Filter/Filter.stories.tsx index 5bb13c7e..86b837f1 100644 --- a/src/Filter/Filter.stories.tsx +++ b/src/Filter/Filter.stories.tsx @@ -1,9 +1,16 @@ import { Meta, Story } from "@storybook/react"; import React from "react"; -import { Filter, FilterBar, FilterType } from "./Filter"; +import { Filter } from "./Filter"; +import { FilterBar } from "./FilterBar"; +import { FilterType } from "./types"; -const labels = { addButton: "Add Filter", header: "Filters", where: "Where" }; +const labels = { + addButton: "Add Filter", + header: "Filters", + where: "Where", + and: "and", +}; export const Default: Story = () => ( @@ -23,6 +30,7 @@ export const Default: Story = () => ( ]} labels={labels} /> + ); diff --git a/src/Filter/Filter.tsx b/src/Filter/Filter.tsx index 259daabe..37d1bd56 100644 --- a/src/Filter/Filter.tsx +++ b/src/Filter/Filter.tsx @@ -1,7 +1,3 @@ -import Button from "@material-ui/core/Button"; -import Card from "@material-ui/core/Card"; -import CardContent from "@material-ui/core/CardContent"; -import CardHeader from "@material-ui/core/CardHeader"; import IconButton from "@material-ui/core/IconButton"; import MenuItem from "@material-ui/core/MenuItem"; import Select from "@material-ui/core/Select"; @@ -9,187 +5,85 @@ import Typography from "@material-ui/core/Typography"; import Delete from "@material-ui/icons/Delete"; import React from "react"; -import FilterMenu, { FilterMenuLabels } from "./FilterMenu"; +import { useFilters } from "./context"; +import { FilterContent } from "./FilterContent"; import useStyles from "./styles"; -import { getAvailableFilters } from "./utils"; +import { FilterDetailedOptions, FilterLabels, FilterOptions } from "./types"; +import * as utils from "./utils"; -export enum FilterType { - Text, - Choice, -} - -export interface FilterContextType { - filters: Record; - register: (name: string, label: string) => void; - toggle: (name: string) => void; - onChange: (name: string, value: string) => void; -} - -const FilterContext = React.createContext(null); -export const useFilters = (): FilterContextType => { - const ctx = React.useContext(FilterContext); - if (ctx === undefined) { - throw new Error("useFilters must be used within a FilterContext"); - } - - return ctx!; -}; - -export interface FilterData { - active: boolean; - label: string; - value: string | null; -} - -export interface FilterBarProps { - labels: Record<"header" | "addButton", string> & - FilterMenuLabels & - FilterLabels; -} -export const FilterBar: React.FC = ({ children, labels }) => { - const classes = useStyles(); - const [filterData, setFilterData] = React.useState< - Record - >({}); - const [menuOpen, setMenuOpen] = React.useState(false); - const button = React.useRef(null); - - const register = (name: string, label: string) => - setFilterData((fd) => ({ - ...fd, - [name]: { - active: false, - label, - value: null, - }, - })); - const onChange = (name: string, value: string) => - setFilterData((fd) => ({ - ...fd, - [name]: { - ...fd[name], - value, - }, - })); - const toggle = (name: string) => - setFilterData((fd) => ({ - ...fd, - [name]: { - ...fd[name], - active: !fd[name].active, - }, - })); - - const availableFilters = getAvailableFilters(filterData); - - return ( - - - - -
{children}
- {!!availableFilters.length && ( - <> - - - )} - setMenuOpen(false)} - /> - - - - ); -}; - -type FilterLabels = Record<"where", string>; -export interface FilterProps { - name: string; - label: string; +export interface FilterProps extends FilterOptions, FilterDetailedOptions { labels: FilterLabels; - type: FilterType; - choices?: Array>; } -export interface FilterContentProps extends FilterProps { - filter: FilterData; -} - -const FilterContent: React.FC = ({ +export const Filter: React.FC = ({ name, label, - type, - choices, - filter, + labels, + ...options }) => { - const classes = useStyles(); + const { register, unregister } = useFilters(); + React.useEffect(() => { + register(name, label, options); - if (type === FilterType.Choice) { - return ( - <> - {choices!.map((choice) => ( -
- - -
- ))} - - ); - } + return () => unregister(name); + // eslint-disable-next-line react-hooks/exhaustive-deps + }, []); - return ( - <> - - - - ); + return null; }; -export const Filter: React.FC = ({ - children, +export interface FilterRowProps { + first: boolean; + name: string; + labels: FilterLabels; +} +export const FilterRow: React.FC = ({ + first, name, - label, labels, - ...props }) => { const classes = useStyles(); - const { filters, toggle, register } = useFilters(); - React.useEffect(() => { - register(name, label); - // eslint-disable-next-line react-hooks/exhaustive-deps - }, []); - - const availableFilters = getAvailableFilters(filters); + const { filters, toggle } = useFilters(); - const filter = filters[name]; + const filter = filters.find((filter) => filter.name === name); if (!filter?.active) { return null; } - const options = availableFilters; + const availableFilters = utils.getAvailableFilters(filters); + const options = [filter, ...availableFilters]; + + const change = (event: React.ChangeEvent) => { + toggle(name); + toggle(event.target.value); + }; + + console.log("row", name, filter); return (
- {labels.where} - + {options.map((filter) => ( + {filter.label} ))} - + toggle(name)}> diff --git a/src/Filter/FilterBar.tsx b/src/Filter/FilterBar.tsx new file mode 100644 index 00000000..a3a2241a --- /dev/null +++ b/src/Filter/FilterBar.tsx @@ -0,0 +1,88 @@ +import Button from "@material-ui/core/Button"; +import Card from "@material-ui/core/Card"; +import CardContent from "@material-ui/core/CardContent"; +import CardHeader from "@material-ui/core/CardHeader"; +import React from "react"; + +import { FilterContext } from "./context"; +import { FilterRow } from "./Filter"; +import { FilterMenu, FilterMenuLabels } from "./FilterMenu"; +import useStyles from "./styles"; +import { FilterData, FilterDetailedOptions, FilterLabels } from "./types"; +import * as utils from "./utils"; + +export interface FilterBarProps { + labels: Record<"header" | "addButton", string> & + FilterMenuLabels & + FilterLabels; +} + +export const FilterBar: React.FC = ({ children, labels }) => { + const classes = useStyles(); + const [filterData, setFilterData] = React.useState([]); + const [menuOpen, setMenuOpen] = React.useState(false); + const button = React.useRef(null); + + utils.validate(filterData); + + const register = ( + name: string, + label: string, + options: FilterDetailedOptions + ) => setFilterData((fd) => utils.register(fd, name, label, options)); + const onChange = (name: string, value: string) => + setFilterData((fd) => utils.change(fd, name, value)); + const toggle = (name: string) => + setFilterData((fd) => utils.toggle(fd, name)); + const unregister = (name: string) => + setFilterData((fd) => fd.filter((filter) => filter.name !== name)); + + const availableFilters = utils.getAvailableFilters(filterData); + + console.log(filterData); + + return ( + + {children} + + + +
+ {utils + .getActiveFilters(filterData) + .sort((a, b) => (a.sortIndex > b.sortIndex ? 1 : -1)) + .map((filter, filterIndex) => ( + + ))} +
+ {!!availableFilters.length && ( + <> + + + )} + setMenuOpen(false)} + /> + + + + ); +}; +FilterBar.displayName = "FilterBar"; +export default FilterBar; diff --git a/src/Filter/FilterContent.tsx b/src/Filter/FilterContent.tsx new file mode 100644 index 00000000..d9c55fb6 --- /dev/null +++ b/src/Filter/FilterContent.tsx @@ -0,0 +1,35 @@ +import React from "react"; + +import useStyles from "./styles"; +import { FilterData, FilterType } from "./types"; + +export interface FilterContentProps { + filter: FilterData; +} + +export const FilterContent: React.FC = ({ filter }) => { + const classes = useStyles(); + const { name, label, options } = filter; + const { type, choices } = options; + + if (type === FilterType.Choice) { + return ( + <> + {choices!.map((choice) => ( +
+ + +
+ ))} + + ); + } + + return ( + <> + + + + ); +}; +FilterContent.displayName = "FilterContent"; diff --git a/src/Filter/FilterMenu.tsx b/src/Filter/FilterMenu.tsx index 6b53a904..25e483c7 100644 --- a/src/Filter/FilterMenu.tsx +++ b/src/Filter/FilterMenu.tsx @@ -5,7 +5,7 @@ import Popper from "@material-ui/core/Popper"; import Typography from "@material-ui/core/Typography"; import React from "react"; -import { useFilters } from "./Filter"; +import { useFilters } from "./context"; import useStyles from "./styles"; import { getAvailableFilters } from "./utils"; @@ -17,7 +17,7 @@ export interface FilterMenuProps { onClose: () => void; } -const FilterMenu: React.FC = ({ +export const FilterMenu: React.FC = ({ anchorEl, labels, open, @@ -50,8 +50,8 @@ const FilterMenu: React.FC = ({ {labels.header}
- {availableFilters.map(([filterName, filter]) => ( - handleFilterClick(filterName)}> + {availableFilters.map((filter) => ( + handleFilterClick(filter.name)}> {filter.label} ))} @@ -61,4 +61,3 @@ const FilterMenu: React.FC = ({ ); }; FilterMenu.displayName = "FilterMenu"; -export default FilterMenu; diff --git a/src/Filter/context.tsx b/src/Filter/context.tsx new file mode 100644 index 00000000..1cd1f79f --- /dev/null +++ b/src/Filter/context.tsx @@ -0,0 +1,13 @@ +import { createContext, useContext } from "react"; + +import { FilterContextType } from "./types"; + +export const FilterContext = createContext(null); +export const useFilters = (): FilterContextType => { + const ctx = useContext(FilterContext); + if (ctx === undefined) { + throw new Error("useFilters must be used within a FilterContext"); + } + + return ctx!; +}; diff --git a/src/Filter/styles.ts b/src/Filter/styles.ts index b515a8a1..654c5f8b 100644 --- a/src/Filter/styles.ts +++ b/src/Filter/styles.ts @@ -14,16 +14,32 @@ const useStyles = makeStyles( }, filter: { + alignItems: "center", display: "flex", columnGap: theme.spacing(2), + marginBottom: theme.spacing(2), }, filterDelete: { marginLeft: "auto", }, + filterName: { + width: 180, + }, + filterNameInner: { + padding: theme.spacing(2), + }, + filterConjunction: { + minWidth: 80, + }, bar: { width: 800, }, + + selectPaper: { + borderRadius: 0, + marginTop: `calc(48px + ${theme.spacing(1)})`, + }, }), { name: "Filter", diff --git a/src/Filter/types.ts b/src/Filter/types.ts new file mode 100644 index 00000000..1d71be24 --- /dev/null +++ b/src/Filter/types.ts @@ -0,0 +1,34 @@ +export enum FilterType { + Text, + Choice, +} + +export interface FilterDetailedOptions { + type: FilterType; + choices?: Array>; +} +export interface FilterOptions { + name: string; + label: string; +} + +export interface FilterData extends FilterOptions { + active: boolean; + sortIndex: number; + value: string | null; + options: FilterDetailedOptions; +} + +export interface FilterContextType { + filters: FilterData[]; + register: ( + name: string, + label: string, + options: FilterDetailedOptions + ) => void; + toggle: (name: string) => void; + unregister: (name: string) => void; + onChange: (name: string, value: string) => void; +} + +export type FilterLabels = Record<"where" | "and", string>; diff --git a/src/Filter/utils.ts b/src/Filter/utils.ts index e27b7d80..dcfed666 100644 --- a/src/Filter/utils.ts +++ b/src/Filter/utils.ts @@ -1,5 +1,72 @@ -import { FilterData } from "./Filter"; +import uniqBy from "lodash/uniqBy"; -export function getAvailableFilters(filterData: Record) { - return Object.entries(filterData).filter(([_key, value]) => !value.active); +import { FilterData, FilterDetailedOptions } from "./types"; + +export function getAvailableFilters(filterData: FilterData[]) { + return filterData.filter((filter) => !filter.active); +} +export function getActiveFilters(filterData: FilterData[]) { + return filterData.filter((filter) => filter.active); +} + +export function validate(filterData: FilterData[]) { + if (uniqBy(filterData, "name").length !== filterData.length) { + throw new Error("Filter names should be unique"); + } +} + +export function register( + filterData: FilterData[], + name: string, + label: string, + options: FilterDetailedOptions +): FilterData[] { + return [ + ...filterData, + { + active: false, + label, + name, + sortIndex: filterData.length, + options, + value: null, + }, + ]; +} + +export function change( + filterData: FilterData[], + name: string, + value: string +): FilterData[] { + return filterData.map((filter) => + filter.name === name + ? { + ...filter, + value, + } + : filter + ); +} + +export function toggle(filterData: FilterData[], name: string): FilterData[] { + const selectedFilter = filterData.find((filter) => filter.name === name)!; + const sortIndex = selectedFilter.active + ? selectedFilter.sortIndex + : getActiveFilters(filterData).length; + + return filterData.map((filter) => + filter.name === name + ? { + ...filter, + active: !filter.active, + sortIndex, + } + : filter.active && filter.sortIndex > sortIndex + ? { + ...filter, + sortIndex: filter.sortIndex - 1, + } + : filter + ); } diff --git a/src/theme/createSaleorTheme/overrides/inputs.ts b/src/theme/createSaleorTheme/overrides/inputs.ts index 34390761..787bed73 100644 --- a/src/theme/createSaleorTheme/overrides/inputs.ts +++ b/src/theme/createSaleorTheme/overrides/inputs.ts @@ -144,6 +144,7 @@ export const inputOverrides = ( }, backgroundColor: colors.background.paper, borderColor: colors.input.border, + borderRadius: 0, top: 0, }, }, From 9a819028c2dfc87a036af8bd7317a3fb8d4e34af Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Tue, 27 Jul 2021 12:22:13 +0200 Subject: [PATCH 034/140] Add various filter fields --- src/Filter/Filter.stories.tsx | 34 ++++++- src/Filter/Filter.tsx | 50 +++++----- src/Filter/FilterBar.tsx | 37 ++++++-- src/Filter/FilterContent.tsx | 42 ++++----- .../FilterField/MultipleSelectFilterField.tsx | 72 ++++++++++++++ src/Filter/FilterField/RangeFilterField.tsx | 53 +++++++++++ src/Filter/FilterField/SelectFilterField.tsx | 41 ++++++++ src/Filter/FilterField/TextFilterField.tsx | 36 +++++++ src/Filter/FilterMenu.tsx | 5 +- src/Filter/styles.ts | 29 +++++- src/Filter/types.ts | 21 ++++- src/Filter/utils.ts | 94 +++++++++++++++++-- .../createSaleorTheme/createSaleorTheme.ts | 17 +++- 13 files changed, 458 insertions(+), 73 deletions(-) create mode 100644 src/Filter/FilterField/MultipleSelectFilterField.tsx create mode 100644 src/Filter/FilterField/RangeFilterField.tsx create mode 100644 src/Filter/FilterField/SelectFilterField.tsx create mode 100644 src/Filter/FilterField/TextFilterField.tsx diff --git a/src/Filter/Filter.stories.tsx b/src/Filter/Filter.stories.tsx index 86b837f1..65b6f964 100644 --- a/src/Filter/Filter.stories.tsx +++ b/src/Filter/Filter.stories.tsx @@ -1,4 +1,5 @@ import { Meta, Story } from "@storybook/react"; +import { debounce } from "lodash"; import React from "react"; import { Filter } from "./Filter"; @@ -10,15 +11,19 @@ const labels = { header: "Filters", where: "Where", and: "and", + is: "is", + range: "between", }; export const Default: Story = () => ( - + console.log(fd), 1000)}> ( { label: "Available", value: "yes" }, { label: "Not Available", value: "no" }, ]} - labels={labels} /> - + + + ); diff --git a/src/Filter/Filter.tsx b/src/Filter/Filter.tsx index 37d1bd56..4da7a3cc 100644 --- a/src/Filter/Filter.tsx +++ b/src/Filter/Filter.tsx @@ -8,18 +8,16 @@ import React from "react"; import { useFilters } from "./context"; import { FilterContent } from "./FilterContent"; import useStyles from "./styles"; -import { FilterDetailedOptions, FilterLabels, FilterOptions } from "./types"; +import { + FilterDetailedOptions, + FilterLabels, + FilterOptions, + FilterType, +} from "./types"; import * as utils from "./utils"; -export interface FilterProps extends FilterOptions, FilterDetailedOptions { - labels: FilterLabels; -} -export const Filter: React.FC = ({ - name, - label, - labels, - ...options -}) => { +export type FilterProps = FilterOptions & FilterDetailedOptions; +export const Filter: React.FC = ({ name, label, ...options }) => { const { register, unregister } = useFilters(); React.useEffect(() => { register(name, label, options); @@ -42,7 +40,7 @@ export const FilterRow: React.FC = ({ labels, }) => { const classes = useStyles(); - const { filters, toggle } = useFilters(); + const { filters, toggle, toggleRange } = useFilters(); const filter = filters.find((filter) => filter.name === name); @@ -58,8 +56,6 @@ export const FilterRow: React.FC = ({ toggle(event.target.value); }; - console.log("row", name, filter); - return (
@@ -68,22 +64,32 @@ export const FilterRow: React.FC = ({ - + + toggle(name)}> diff --git a/src/Filter/FilterBar.tsx b/src/Filter/FilterBar.tsx index a3a2241a..1478fae0 100644 --- a/src/Filter/FilterBar.tsx +++ b/src/Filter/FilterBar.tsx @@ -8,16 +8,26 @@ import { FilterContext } from "./context"; import { FilterRow } from "./Filter"; import { FilterMenu, FilterMenuLabels } from "./FilterMenu"; import useStyles from "./styles"; -import { FilterData, FilterDetailedOptions, FilterLabels } from "./types"; +import { + FilterData, + FilterDetailedOptions, + FilterLabels, + OnFilterChangeOpts, +} from "./types"; import * as utils from "./utils"; export interface FilterBarProps { labels: Record<"header" | "addButton", string> & FilterMenuLabels & FilterLabels; + onChange: (filterData: FilterData[]) => void; } -export const FilterBar: React.FC = ({ children, labels }) => { +export const FilterBar: React.FC = ({ + children, + labels, + onChange: changeCb, +}) => { const classes = useStyles(); const [filterData, setFilterData] = React.useState([]); const [menuOpen, setMenuOpen] = React.useState(false); @@ -30,20 +40,35 @@ export const FilterBar: React.FC = ({ children, labels }) => { label: string, options: FilterDetailedOptions ) => setFilterData((fd) => utils.register(fd, name, label, options)); - const onChange = (name: string, value: string) => - setFilterData((fd) => utils.change(fd, name, value)); + const onChange = ( + name: string, + value: string | string[], + opts?: OnFilterChangeOpts + ) => setFilterData((fd) => utils.change(fd, name, value, opts)); const toggle = (name: string) => setFilterData((fd) => utils.toggle(fd, name)); + const toggleRange = (name: string) => + setFilterData((fd) => utils.toggleRange(fd, name)); const unregister = (name: string) => setFilterData((fd) => fd.filter((filter) => filter.name !== name)); const availableFilters = utils.getAvailableFilters(filterData); - console.log(filterData); + React.useEffect(() => changeCb(utils.getActiveFilters(filterData)), [ + changeCb, + filterData, + ]); return ( {children} diff --git a/src/Filter/FilterContent.tsx b/src/Filter/FilterContent.tsx index d9c55fb6..702839ec 100644 --- a/src/Filter/FilterContent.tsx +++ b/src/Filter/FilterContent.tsx @@ -1,35 +1,33 @@ import React from "react"; -import useStyles from "./styles"; -import { FilterData, FilterType } from "./types"; +import { MultipleSelectFilterField } from "./FilterField/MultipleSelectFilterField"; +import { RangeFilterField } from "./FilterField/RangeFilterField"; +import { SelectFilterField } from "./FilterField/SelectFilterField"; +import { TextFilterField } from "./FilterField/TextFilterField"; +import { FilterData, FilterLabels, FilterType } from "./types"; export interface FilterContentProps { filter: FilterData; + labels: FilterLabels; } -export const FilterContent: React.FC = ({ filter }) => { - const classes = useStyles(); - const { name, label, options } = filter; - const { type, choices } = options; +export const FilterContent: React.FC = ({ + filter, + labels, +}) => { + const { options, range } = filter; + const { type, multiple } = options; if (type === FilterType.Choice) { - return ( - <> - {choices!.map((choice) => ( -
- - -
- ))} - - ); + if (multiple) { + return ; + } + + return ; + } else if (type === FilterType.Range && range) { + return ; } - return ( - <> - - - - ); + return ; }; FilterContent.displayName = "FilterContent"; diff --git a/src/Filter/FilterField/MultipleSelectFilterField.tsx b/src/Filter/FilterField/MultipleSelectFilterField.tsx new file mode 100644 index 00000000..d73823dd --- /dev/null +++ b/src/Filter/FilterField/MultipleSelectFilterField.tsx @@ -0,0 +1,72 @@ +import Checkbox from "@material-ui/core/Checkbox"; +import Chip from "@material-ui/core/Chip"; +import MenuItem from "@material-ui/core/MenuItem"; +import Select from "@material-ui/core/Select"; +import clsx from "clsx"; +import React from "react"; + +import { useFilters } from "../context"; +import useStyles from "../styles"; +import { FilterData } from "../types"; + +export interface FilterContentProps { + filter: FilterData; +} + +export const MultipleSelectFilterField: React.FC = ({ + filter, +}) => { + const classes = useStyles(); + const { onChange } = useFilters(); + + const { name, options } = filter; + const { choices } = options; + + const handleChoiceChange = (event: React.ChangeEvent) => + onChange(name, event.target.value); + + return ( + + ); +}; +MultipleSelectFilterField.displayName = "MultipleSelectFilterField"; diff --git a/src/Filter/FilterField/RangeFilterField.tsx b/src/Filter/FilterField/RangeFilterField.tsx new file mode 100644 index 00000000..db6588e3 --- /dev/null +++ b/src/Filter/FilterField/RangeFilterField.tsx @@ -0,0 +1,53 @@ +import TextField, { TextFieldProps } from "@material-ui/core/TextField"; +import Typography from "@material-ui/core/Typography"; +import clsx from "clsx"; +import React from "react"; + +import { useFilters } from "../context"; +import useStyles from "../styles"; +import { FilterData, FilterLabels } from "../types"; + +export interface FilterContentProps { + filter: FilterData; + labels: FilterLabels; +} + +export const RangeFilterField: React.FC = ({ + filter, + labels, +}) => { + const classes = useStyles(); + const { onChange } = useFilters(); + + const { name } = filter; + + const handleChange = ( + event: React.ChangeEvent<{ name: string; value: string }> + ) => + onChange(name, event.target.value, { + rangePart: event.target.name as "min" | "max", + }); + + const props: Partial = { + ...filter.options.InputProps, + InputProps: { + classes: { + input: classes.filterInputInner, + }, + type: "number", + ...filter.options.InputProps?.InputProps, + }, + onChange: handleChange, + }; + + return ( +
+ + {labels.and} + +
+ ); +}; +RangeFilterField.displayName = "RangeFilterField"; diff --git a/src/Filter/FilterField/SelectFilterField.tsx b/src/Filter/FilterField/SelectFilterField.tsx new file mode 100644 index 00000000..0d086f81 --- /dev/null +++ b/src/Filter/FilterField/SelectFilterField.tsx @@ -0,0 +1,41 @@ +import MenuItem from "@material-ui/core/MenuItem"; +import Select from "@material-ui/core/Select"; +import React from "react"; + +import { useFilters } from "../context"; +import useStyles from "../styles"; +import { FilterData } from "../types"; + +export interface FilterContentProps { + filter: FilterData; +} + +export const SelectFilterField: React.FC = ({ filter }) => { + const classes = useStyles(); + const { onChange } = useFilters(); + + const { name, options } = filter; + const { choices } = options; + + const handleChoiceChange = (event: React.ChangeEvent) => + onChange(name, event.target.value); + + return ( + + ); +}; +SelectFilterField.displayName = "SelectFilterField"; diff --git a/src/Filter/FilterField/TextFilterField.tsx b/src/Filter/FilterField/TextFilterField.tsx new file mode 100644 index 00000000..69a72973 --- /dev/null +++ b/src/Filter/FilterField/TextFilterField.tsx @@ -0,0 +1,36 @@ +import TextField from "@material-ui/core/TextField"; +import React from "react"; + +import { useFilters } from "../context"; +import useStyles from "../styles"; +import { FilterData } from "../types"; + +export interface FilterContentProps { + filter: FilterData; +} + +export const TextFilterField: React.FC = ({ filter }) => { + const classes = useStyles(); + const { onChange } = useFilters(); + + const { name } = filter; + + const handleChange = (event: React.ChangeEvent) => + onChange(name, event.target.value); + + return ( + + ); +}; +TextFilterField.displayName = "TextFilterField"; diff --git a/src/Filter/FilterMenu.tsx b/src/Filter/FilterMenu.tsx index 25e483c7..a94a1b29 100644 --- a/src/Filter/FilterMenu.tsx +++ b/src/Filter/FilterMenu.tsx @@ -51,7 +51,10 @@ export const FilterMenu: React.FC = ({
{availableFilters.map((filter) => ( - handleFilterClick(filter.name)}> + handleFilterClick(filter.name)} + > {filter.label} ))} diff --git a/src/Filter/styles.ts b/src/Filter/styles.ts index 654c5f8b..feda4c2e 100644 --- a/src/Filter/styles.ts +++ b/src/Filter/styles.ts @@ -25,15 +25,38 @@ const useStyles = makeStyles( filterName: { width: 180, }, - filterNameInner: { - padding: theme.spacing(2), + filterValue: { + height: 51, + width: 320, + }, + filterRange: { + width: 115, + }, + filterInputInner: { + "&&": { + padding: theme.spacing(2), + }, }, filterConjunction: { minWidth: 80, }, + filterValueCheckbox: { + paddingLeft: 0, + }, + filterValueSelected: { + color: theme.palette.primary.main, + fontWeight: 500, + }, + filterRangeLabel: { + margin: theme.spacing(0, 1), + }, + filterRangeValueContainer: { + display: "flex", + alignItems: "center", + }, bar: { - width: 800, + minWidth: 600, }, selectPaper: { diff --git a/src/Filter/types.ts b/src/Filter/types.ts index 1d71be24..7d1b06fb 100644 --- a/src/Filter/types.ts +++ b/src/Filter/types.ts @@ -1,11 +1,17 @@ +import { TextFieldProps } from "@material-ui/core/TextField"; + export enum FilterType { Text, Choice, + Range, } export interface FilterDetailedOptions { type: FilterType; choices?: Array>; + default?: string; + multiple?: boolean; + InputProps?: Partial; } export interface FilterOptions { name: string; @@ -14,11 +20,17 @@ export interface FilterOptions { export interface FilterData extends FilterOptions { active: boolean; + range: boolean; sortIndex: number; value: string | null; + values: string[] | null; options: FilterDetailedOptions; } +export interface OnFilterChangeOpts { + rangePart?: "min" | "max"; +} + export interface FilterContextType { filters: FilterData[]; register: ( @@ -27,8 +39,13 @@ export interface FilterContextType { options: FilterDetailedOptions ) => void; toggle: (name: string) => void; + toggleRange: (name: string) => void; unregister: (name: string) => void; - onChange: (name: string, value: string) => void; + onChange: ( + name: string, + value: string | string[], + opts?: OnFilterChangeOpts + ) => void; } -export type FilterLabels = Record<"where" | "and", string>; +export type FilterLabels = Record<"where" | "and" | "is" | "range", string>; diff --git a/src/Filter/utils.ts b/src/Filter/utils.ts index dcfed666..f7f01a07 100644 --- a/src/Filter/utils.ts +++ b/src/Filter/utils.ts @@ -1,6 +1,11 @@ -import uniqBy from "lodash/uniqBy"; +import { uniqBy } from "lodash"; -import { FilterData, FilterDetailedOptions } from "./types"; +import { + FilterData, + FilterDetailedOptions, + FilterType, + OnFilterChangeOpts, +} from "./types"; export function getAvailableFilters(filterData: FilterData[]) { return filterData.filter((filter) => !filter.active); @@ -15,21 +20,47 @@ export function validate(filterData: FilterData[]) { } } +function getDefaultValue(filter: FilterData) { + const { options } = filter; + + return { + value: + options.multiple || options.type === FilterType.Range + ? null + : options.type === FilterType.Choice + ? options.default ?? options.choices![0].value + : "", + values: + filter.range && options.type === FilterType.Range + ? ["", ""] + : options.multiple + ? [] + : null, + }; +} + export function register( filterData: FilterData[], name: string, label: string, options: FilterDetailedOptions ): FilterData[] { + const filter: FilterData = { + active: false, + label, + name, + range: false, + sortIndex: filterData.length, + options, + value: null, + values: null, + }; + return [ ...filterData, { - active: false, - label, - name, - sortIndex: filterData.length, - options, - value: null, + ...filter, + ...getDefaultValue(filter), }, ]; } @@ -37,13 +68,36 @@ export function register( export function change( filterData: FilterData[], name: string, - value: string + value: string | string[], + opts: OnFilterChangeOpts = {} ): FilterData[] { + const filterToUpdate = filterData.find((filter) => filter.name === name)!; + + let update: Partial; + + if (filterToUpdate!.options.multiple) { + update = { + values: value as string[], + }; + } else if ( + filterToUpdate!.options.type === FilterType.Range && + opts.rangePart + ) { + update = { + values: + opts.rangePart === "min" + ? [value as string, filterToUpdate.values![1]] + : [filterToUpdate.values![0], value as string], + }; + } else { + update = { value: value as string }; + } + return filterData.map((filter) => filter.name === name ? { ...filter, - value, + ...update, } : filter ); @@ -54,6 +108,7 @@ export function toggle(filterData: FilterData[], name: string): FilterData[] { const sortIndex = selectedFilter.active ? selectedFilter.sortIndex : getActiveFilters(filterData).length; + const value = selectedFilter.active ? getDefaultValue(selectedFilter) : {}; return filterData.map((filter) => filter.name === name @@ -61,6 +116,7 @@ export function toggle(filterData: FilterData[], name: string): FilterData[] { ...filter, active: !filter.active, sortIndex, + ...value, } : filter.active && filter.sortIndex > sortIndex ? { @@ -70,3 +126,21 @@ export function toggle(filterData: FilterData[], name: string): FilterData[] { : filter ); } + +export function toggleRange( + filterData: FilterData[], + name: string +): FilterData[] { + return filterData.map((filter) => + filter.name === name + ? { + ...filter, + range: !filter.range, + ...getDefaultValue({ + ...filter, + range: !filter.range, + }), + } + : filter + ); +} diff --git a/src/theme/createSaleorTheme/createSaleorTheme.ts b/src/theme/createSaleorTheme/createSaleorTheme.ts index e3a073d2..d183aed9 100644 --- a/src/theme/createSaleorTheme/createSaleorTheme.ts +++ b/src/theme/createSaleorTheme/createSaleorTheme.ts @@ -140,7 +140,7 @@ export const createTheme = (colors: SaleorThemeColors): SaleorTheme => }, MuiMenu: { paper: { - borderRadius: 8, + borderRadius: 0, }, }, MuiMenuItem: { @@ -152,8 +152,6 @@ export const createTheme = (colors: SaleorThemeColors): SaleorTheme => }, "&:hover": { backgroundColor: [colors.background.default, "!important"] as any, - color: colors.font.default, - fontWeight: 400, }, "@media(min-width: 600px)": { minHeight: 48, @@ -239,6 +237,19 @@ export const createTheme = (colors: SaleorThemeColors): SaleorTheme => MuiList: { disablePadding: true, }, + MuiSelect: { + MenuProps: { + anchorOrigin: { + vertical: "bottom", + horizontal: "left", + }, + transformOrigin: { + vertical: "top", + horizontal: "left", + }, + getContentAnchorEl: null, + }, + }, }, shadows, spacing: (value: number = 1) => `${(value * 8) / 10}rem`, From 3a650660a70b2dc89ea380fe51f7902c5df7ed3b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Tue, 27 Jul 2021 13:11:20 +0200 Subject: [PATCH 035/140] Do not use any type --- src/Filter/Filter.tsx | 3 ++- src/Filter/FilterField/MultipleSelectFilterField.tsx | 4 ++-- src/Filter/FilterField/SelectFilterField.tsx | 4 ++-- src/Filter/FilterField/TextFilterField.tsx | 4 ++-- src/Filter/types.ts | 5 +++++ src/Sidebar/MenuItem.tsx | 2 +- 6 files changed, 14 insertions(+), 8 deletions(-) diff --git a/src/Filter/Filter.tsx b/src/Filter/Filter.tsx index 4da7a3cc..55ff09f7 100644 --- a/src/Filter/Filter.tsx +++ b/src/Filter/Filter.tsx @@ -9,6 +9,7 @@ import { useFilters } from "./context"; import { FilterContent } from "./FilterContent"; import useStyles from "./styles"; import { + EventTarget, FilterDetailedOptions, FilterLabels, FilterOptions, @@ -51,7 +52,7 @@ export const FilterRow: React.FC = ({ const availableFilters = utils.getAvailableFilters(filters); const options = [filter, ...availableFilters]; - const change = (event: React.ChangeEvent) => { + const change = (event: React.ChangeEvent) => { toggle(name); toggle(event.target.value); }; diff --git a/src/Filter/FilterField/MultipleSelectFilterField.tsx b/src/Filter/FilterField/MultipleSelectFilterField.tsx index d73823dd..b0a18256 100644 --- a/src/Filter/FilterField/MultipleSelectFilterField.tsx +++ b/src/Filter/FilterField/MultipleSelectFilterField.tsx @@ -7,7 +7,7 @@ import React from "react"; import { useFilters } from "../context"; import useStyles from "../styles"; -import { FilterData } from "../types"; +import { EventTarget, FilterData } from "../types"; export interface FilterContentProps { filter: FilterData; @@ -22,7 +22,7 @@ export const MultipleSelectFilterField: React.FC = ({ const { name, options } = filter; const { choices } = options; - const handleChoiceChange = (event: React.ChangeEvent) => + const handleChoiceChange = (event: React.ChangeEvent) => onChange(name, event.target.value); return ( diff --git a/src/Filter/FilterField/SelectFilterField.tsx b/src/Filter/FilterField/SelectFilterField.tsx index 0d086f81..e9756fc4 100644 --- a/src/Filter/FilterField/SelectFilterField.tsx +++ b/src/Filter/FilterField/SelectFilterField.tsx @@ -4,7 +4,7 @@ import React from "react"; import { useFilters } from "../context"; import useStyles from "../styles"; -import { FilterData } from "../types"; +import { EventTarget, FilterData } from "../types"; export interface FilterContentProps { filter: FilterData; @@ -17,7 +17,7 @@ export const SelectFilterField: React.FC = ({ filter }) => { const { name, options } = filter; const { choices } = options; - const handleChoiceChange = (event: React.ChangeEvent) => + const handleChoiceChange = (event: React.ChangeEvent) => onChange(name, event.target.value); return ( diff --git a/src/Filter/FilterField/TextFilterField.tsx b/src/Filter/FilterField/TextFilterField.tsx index 69a72973..1fa6b4be 100644 --- a/src/Filter/FilterField/TextFilterField.tsx +++ b/src/Filter/FilterField/TextFilterField.tsx @@ -3,7 +3,7 @@ import React from "react"; import { useFilters } from "../context"; import useStyles from "../styles"; -import { FilterData } from "../types"; +import { EventTarget, FilterData } from "../types"; export interface FilterContentProps { filter: FilterData; @@ -15,7 +15,7 @@ export const TextFilterField: React.FC = ({ filter }) => { const { name } = filter; - const handleChange = (event: React.ChangeEvent) => + const handleChange = (event: React.ChangeEvent) => onChange(name, event.target.value); return ( diff --git a/src/Filter/types.ts b/src/Filter/types.ts index 7d1b06fb..7f663189 100644 --- a/src/Filter/types.ts +++ b/src/Filter/types.ts @@ -49,3 +49,8 @@ export interface FilterContextType { } export type FilterLabels = Record<"where" | "and" | "is" | "range", string>; + +export interface EventTarget { + name: string; + value: string; +} diff --git a/src/Sidebar/MenuItem.tsx b/src/Sidebar/MenuItem.tsx index f553add8..1981425e 100644 --- a/src/Sidebar/MenuItem.tsx +++ b/src/Sidebar/MenuItem.tsx @@ -189,7 +189,7 @@ export const MenuItem: React.FC = ({ component={subMenuItem.external ? "a" : "button"} className={clsx(classes.label, classes.subMenuLabel)} key={subMenuItem.url} - onClick={(event: React.MouseEvent) => + onClick={(event: React.MouseEvent) => handleClick(event, subMenuItem) } data-test="submenu-item-label" From 317f3269dbd5d5ad747de3c79d474eaace8deb14 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Tue, 27 Jul 2021 14:29:23 +0200 Subject: [PATCH 036/140] Add initial state --- src/Filter/Filter.stories.tsx | 39 +++++++++++++++++++ src/Filter/Filter.tsx | 22 +++++++++-- src/Filter/FilterBar.tsx | 10 ++++- .../FilterField/MultipleSelectFilterField.tsx | 2 +- src/Filter/FilterField/RangeFilterField.tsx | 6 +-- src/Filter/FilterField/SelectFilterField.tsx | 2 +- src/Filter/FilterField/TextFilterField.tsx | 2 +- src/Filter/types.ts | 23 ++++++++--- src/Filter/utils.ts | 6 ++- 9 files changed, 93 insertions(+), 19 deletions(-) diff --git a/src/Filter/Filter.stories.tsx b/src/Filter/Filter.stories.tsx index 65b6f964..4f4493d8 100644 --- a/src/Filter/Filter.stories.tsx +++ b/src/Filter/Filter.stories.tsx @@ -59,6 +59,45 @@ export const Default: Story = () => ( /> ); +export const WithInitialState: Story = () => ( + console.log(fd), 1000)} + initial={[ + { + name: "name", + value: "Lorem Ipsum", + values: null, + }, + { + name: "availability", + value: "no", + values: null, + }, + ]} + > + + + + +); export default { title: "Filter", diff --git a/src/Filter/Filter.tsx b/src/Filter/Filter.tsx index 55ff09f7..9870a968 100644 --- a/src/Filter/Filter.tsx +++ b/src/Filter/Filter.tsx @@ -19,14 +19,28 @@ import * as utils from "./utils"; export type FilterProps = FilterOptions & FilterDetailedOptions; export const Filter: React.FC = ({ name, label, ...options }) => { - const { register, unregister } = useFilters(); + const { register, set, unregister } = useFilters(); + const registered = React.useRef(false); React.useEffect(() => { register(name, label, options); + registered.current = true; return () => unregister(name); // eslint-disable-next-line react-hooks/exhaustive-deps }, []); + React.useEffect(() => { + if (registered.current && options.choices !== undefined) { + set(name, { + options: { + ...options, + choices: options.choices, + }, + }); + } + // eslint-disable-next-line react-hooks/exhaustive-deps + }, [options.choices]); + return null; }; @@ -41,7 +55,7 @@ export const FilterRow: React.FC = ({ labels, }) => { const classes = useStyles(); - const { filters, toggle, toggleRange } = useFilters(); + const { filters, set, toggle, toggleRange } = useFilters(); const filter = filters.find((filter) => filter.name === name); @@ -52,9 +66,9 @@ export const FilterRow: React.FC = ({ const availableFilters = utils.getAvailableFilters(filters); const options = [filter, ...availableFilters]; - const change = (event: React.ChangeEvent) => { + const change = (event: React.ChangeEvent>) => { toggle(name); - toggle(event.target.value); + toggle(event.target.value as string); }; return ( diff --git a/src/Filter/FilterBar.tsx b/src/Filter/FilterBar.tsx index 1478fae0..51a64454 100644 --- a/src/Filter/FilterBar.tsx +++ b/src/Filter/FilterBar.tsx @@ -11,12 +11,14 @@ import useStyles from "./styles"; import { FilterData, FilterDetailedOptions, + FilterInput, FilterLabels, OnFilterChangeOpts, } from "./types"; import * as utils from "./utils"; export interface FilterBarProps { + initial?: FilterInput[]; labels: Record<"header" | "addButton", string> & FilterMenuLabels & FilterLabels; @@ -25,6 +27,7 @@ export interface FilterBarProps { export const FilterBar: React.FC = ({ children, + initial = [], labels, onChange: changeCb, }) => { @@ -39,7 +42,7 @@ export const FilterBar: React.FC = ({ name: string, label: string, options: FilterDetailedOptions - ) => setFilterData((fd) => utils.register(fd, name, label, options)); + ) => setFilterData((fd) => utils.register(fd, name, label, initial, options)); const onChange = ( name: string, value: string | string[], @@ -51,6 +54,10 @@ export const FilterBar: React.FC = ({ setFilterData((fd) => utils.toggleRange(fd, name)); const unregister = (name: string) => setFilterData((fd) => fd.filter((filter) => filter.name !== name)); + const set = (name: string, filter: Partial) => + setFilterData((fd) => + fd.map((f) => (f.name === name ? { ...f, filter } : f)) + ); const availableFilters = utils.getAvailableFilters(filterData); @@ -64,6 +71,7 @@ export const FilterBar: React.FC = ({ value={{ filters: filterData, register, + set, toggle, toggleRange, unregister, diff --git a/src/Filter/FilterField/MultipleSelectFilterField.tsx b/src/Filter/FilterField/MultipleSelectFilterField.tsx index b0a18256..13291789 100644 --- a/src/Filter/FilterField/MultipleSelectFilterField.tsx +++ b/src/Filter/FilterField/MultipleSelectFilterField.tsx @@ -23,7 +23,7 @@ export const MultipleSelectFilterField: React.FC = ({ const { choices } = options; const handleChoiceChange = (event: React.ChangeEvent) => - onChange(name, event.target.value); + onChange(name, event.target.value as string); return ( = ({ filter }) => { const { name } = filter; - const handleChange = (event: React.ChangeEvent) => + const handleChange = (event: React.ChangeEvent>) => onChange(name, event.target.value); return ( diff --git a/src/Filter/types.ts b/src/Filter/types.ts index 7f663189..18ed0273 100644 --- a/src/Filter/types.ts +++ b/src/Filter/types.ts @@ -18,21 +18,32 @@ export interface FilterOptions { label: string; } -export interface FilterData extends FilterOptions { +export interface FilterValues { + value: string | null; + values: string[] | null; +} + +export interface FilterState extends FilterValues { active: boolean; range: boolean; sortIndex: number; - value: string | null; - values: string[] | null; +} + +export interface FilterData extends FilterOptions, FilterState { options: FilterDetailedOptions; } +export interface FilterInput extends FilterValues { + name: string; +} + export interface OnFilterChangeOpts { rangePart?: "min" | "max"; } export interface FilterContextType { filters: FilterData[]; + set: (name: string, filter: Partial) => void; register: ( name: string, label: string, @@ -50,7 +61,7 @@ export interface FilterContextType { export type FilterLabels = Record<"where" | "and" | "is" | "range", string>; -export interface EventTarget { - name: string; - value: string; +export interface EventTarget { + name?: string; + value: T; } diff --git a/src/Filter/utils.ts b/src/Filter/utils.ts index f7f01a07..599b9251 100644 --- a/src/Filter/utils.ts +++ b/src/Filter/utils.ts @@ -3,6 +3,7 @@ import { uniqBy } from "lodash"; import { FilterData, FilterDetailedOptions, + FilterInput, FilterType, OnFilterChangeOpts, } from "./types"; @@ -43,10 +44,12 @@ export function register( filterData: FilterData[], name: string, label: string, + initial: FilterInput[], options: FilterDetailedOptions ): FilterData[] { + const existingFilter = initial.find((f) => f.name === name); const filter: FilterData = { - active: false, + active: !!existingFilter, label, name, range: false, @@ -61,6 +64,7 @@ export function register( { ...filter, ...getDefaultValue(filter), + ...existingFilter, }, ]; } From a34e14c1174280c15e2a8c799728d2e9c54378c8 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Wed, 28 Jul 2021 12:28:07 +0200 Subject: [PATCH 037/140] Export filter icon --- src/Filter/Filter.tsx | 9 +- src/Filter/FilterBar.tsx | 181 +++++++++++++++++++----------------- src/Filter/index.ts | 4 + src/Filter/styles.ts | 2 +- src/icons/FilteringIcon.tsx | 12 +++ src/icons/index.ts | 1 + src/index.tsx | 1 + 7 files changed, 121 insertions(+), 89 deletions(-) create mode 100644 src/Filter/index.ts create mode 100644 src/icons/FilteringIcon.tsx diff --git a/src/Filter/Filter.tsx b/src/Filter/Filter.tsx index 9870a968..3a430e1e 100644 --- a/src/Filter/Filter.tsx +++ b/src/Filter/Filter.tsx @@ -3,6 +3,7 @@ import MenuItem from "@material-ui/core/MenuItem"; import Select from "@material-ui/core/Select"; import Typography from "@material-ui/core/Typography"; import Delete from "@material-ui/icons/Delete"; +import { difference } from "lodash"; import React from "react"; import { useFilters } from "./context"; @@ -30,7 +31,11 @@ export const Filter: React.FC = ({ name, label, ...options }) => { }, []); React.useEffect(() => { - if (registered.current && options.choices !== undefined) { + if ( + registered.current && + options.choices !== undefined && + difference(options.choices, options.choices).length + ) { set(name, { options: { ...options, @@ -55,7 +60,7 @@ export const FilterRow: React.FC = ({ labels, }) => { const classes = useStyles(); - const { filters, set, toggle, toggleRange } = useFilters(); + const { filters, toggle, toggleRange } = useFilters(); const filter = filters.find((filter) => filter.name === name); diff --git a/src/Filter/FilterBar.tsx b/src/Filter/FilterBar.tsx index 51a64454..6ee939e2 100644 --- a/src/Filter/FilterBar.tsx +++ b/src/Filter/FilterBar.tsx @@ -2,6 +2,8 @@ import Button from "@material-ui/core/Button"; import Card from "@material-ui/core/Card"; import CardContent from "@material-ui/core/CardContent"; import CardHeader from "@material-ui/core/CardHeader"; +import IconButton from "@material-ui/core/IconButton"; +import Close from "@material-ui/icons/Close"; import React from "react"; import { FilterContext } from "./context"; @@ -23,99 +25,106 @@ export interface FilterBarProps { FilterMenuLabels & FilterLabels; onChange: (filterData: FilterData[]) => void; + onClose: () => void; } -export const FilterBar: React.FC = ({ - children, - initial = [], - labels, - onChange: changeCb, -}) => { - const classes = useStyles(); - const [filterData, setFilterData] = React.useState([]); - const [menuOpen, setMenuOpen] = React.useState(false); - const button = React.useRef(null); +export const FilterBar: React.FC = React.forwardRef( + ({ children, initial = [], labels, onChange: changeCb, onClose }, ref) => { + const classes = useStyles(); + const [filterData, setFilterData] = React.useState([]); + const [menuOpen, setMenuOpen] = React.useState(false); + const button = React.useRef(null); - utils.validate(filterData); + utils.validate(filterData); - const register = ( - name: string, - label: string, - options: FilterDetailedOptions - ) => setFilterData((fd) => utils.register(fd, name, label, initial, options)); - const onChange = ( - name: string, - value: string | string[], - opts?: OnFilterChangeOpts - ) => setFilterData((fd) => utils.change(fd, name, value, opts)); - const toggle = (name: string) => - setFilterData((fd) => utils.toggle(fd, name)); - const toggleRange = (name: string) => - setFilterData((fd) => utils.toggleRange(fd, name)); - const unregister = (name: string) => - setFilterData((fd) => fd.filter((filter) => filter.name !== name)); - const set = (name: string, filter: Partial) => - setFilterData((fd) => - fd.map((f) => (f.name === name ? { ...f, filter } : f)) - ); + const register = ( + name: string, + label: string, + options: FilterDetailedOptions + ) => + setFilterData((fd) => utils.register(fd, name, label, initial, options)); + const onChange = ( + name: string, + value: string | string[], + opts?: OnFilterChangeOpts + ) => setFilterData((fd) => utils.change(fd, name, value, opts)); + const toggle = (name: string) => + setFilterData((fd) => utils.toggle(fd, name)); + const toggleRange = (name: string) => + setFilterData((fd) => utils.toggleRange(fd, name)); + const unregister = (name: string) => + setFilterData((fd) => fd.filter((filter) => filter.name !== name)); + const set = (name: string, filter: Partial) => + setFilterData((fd) => + fd.map((f) => (f.name === name ? { ...f, filter } : f)) + ); - const availableFilters = utils.getAvailableFilters(filterData); + const availableFilters = utils.getAvailableFilters(filterData); - React.useEffect(() => changeCb(utils.getActiveFilters(filterData)), [ - changeCb, - filterData, - ]); + React.useEffect( + () => changeCb(utils.getActiveFilters(filterData)), + // eslint-disable-next-line react-hooks/exhaustive-deps + [filterData] + ); - return ( - - {children} - - - -
- {utils - .getActiveFilters(filterData) - .sort((a, b) => (a.sortIndex > b.sortIndex ? 1 : -1)) - .map((filter, filterIndex) => ( - - ))} -
- {!!availableFilters.length && ( - <> - - - )} - setMenuOpen(false)} + return ( + + {children} + + + + + } /> - - - - ); -}; + +
+ {utils + .getActiveFilters(filterData) + .sort((a, b) => (a.sortIndex > b.sortIndex ? 1 : -1)) + .map((filter, filterIndex) => ( + + ))} +
+ {!!availableFilters.length && ( + <> + + + )} + setMenuOpen(false)} + /> + + + + ); + } +); FilterBar.displayName = "FilterBar"; export default FilterBar; diff --git a/src/Filter/index.ts b/src/Filter/index.ts new file mode 100644 index 00000000..0edd205f --- /dev/null +++ b/src/Filter/index.ts @@ -0,0 +1,4 @@ +export * from "./Filter"; +export * from "./FilterBar"; +export * from "./types"; +export * from "./utils"; diff --git a/src/Filter/styles.ts b/src/Filter/styles.ts index feda4c2e..7600cc2c 100644 --- a/src/Filter/styles.ts +++ b/src/Filter/styles.ts @@ -27,7 +27,7 @@ const useStyles = makeStyles( }, filterValue: { height: 51, - width: 320, + width: 400, }, filterRange: { width: 115, diff --git a/src/icons/FilteringIcon.tsx b/src/icons/FilteringIcon.tsx new file mode 100644 index 00000000..dc74b836 --- /dev/null +++ b/src/icons/FilteringIcon.tsx @@ -0,0 +1,12 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const FilteringIcon = createSvgIcon( + , + "FilteringIcon" +); diff --git a/src/icons/index.ts b/src/icons/index.ts index 35bbe834..bdacf030 100644 --- a/src/icons/index.ts +++ b/src/icons/index.ts @@ -9,3 +9,4 @@ export * from "./CheckboxCheckedIcon"; export * from "./CheckboxIndeterminateIcon"; export * from "./SearchIcon"; export * from "./EditIcon"; +export * from "./FilteringIcon"; diff --git a/src/index.tsx b/src/index.tsx index 546afdd9..4835f977 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -18,3 +18,4 @@ export * from "./LayoutButton"; export * from "./icons"; export * from "./StatusChip"; export * from "./PageTabs"; +export * from "./Filter"; From 68aed39d26042e0390bda2fbbc611a17be21df48 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Wed, 28 Jul 2021 12:45:00 +0200 Subject: [PATCH 038/140] Update chip styles --- src/Filter/Filter.stories.tsx | 7 ++++++- src/Filter/FilterField/MultipleSelectFilterField.tsx | 4 ++-- src/Filter/styles.ts | 9 +++++++++ 3 files changed, 17 insertions(+), 3 deletions(-) diff --git a/src/Filter/Filter.stories.tsx b/src/Filter/Filter.stories.tsx index 4f4493d8..dec388a3 100644 --- a/src/Filter/Filter.stories.tsx +++ b/src/Filter/Filter.stories.tsx @@ -16,7 +16,11 @@ const labels = { }; export const Default: Story = () => ( - console.log(fd), 1000)}> + console.log(fd), 1000)} + onClose={() => undefined} + > ( values: null, }, ]} + onClose={() => undefined} > = ({ const typedValues = values as string[]; return ( -
+
{typedValues.map((value) => ( - + ))}
); diff --git a/src/Filter/styles.ts b/src/Filter/styles.ts index 7600cc2c..f0d6d080 100644 --- a/src/Filter/styles.ts +++ b/src/Filter/styles.ts @@ -19,6 +19,15 @@ const useStyles = makeStyles( columnGap: theme.spacing(2), marginBottom: theme.spacing(2), }, + filterChip: { + borderRadius: 8, + background: theme.palette.primary.main, + color: theme.palette.primary.contrastText, + }, + filterChipContainer: { + display: "flex", + columnGap: theme.spacing(1), + }, filterDelete: { marginLeft: "auto", }, From a7231dddd55cc82641bb07cb96b26abf4626ed7d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Thu, 19 Aug 2021 09:26:11 +0200 Subject: [PATCH 039/140] Add delete icon --- src/icons/Delete.tsx | 13 +++++++++++++ 1 file changed, 13 insertions(+) create mode 100644 src/icons/Delete.tsx diff --git a/src/icons/Delete.tsx b/src/icons/Delete.tsx new file mode 100644 index 00000000..28dff602 --- /dev/null +++ b/src/icons/Delete.tsx @@ -0,0 +1,13 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const Delete = createSvgIcon( + , + "Delete" +); From 45049ee5ed31fbb809bd8117b8da134929d5a4be Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Thu, 19 Aug 2021 09:34:25 +0200 Subject: [PATCH 040/140] Export delete icon --- src/Filter/Filter.tsx | 4 ++-- src/icons/{Delete.tsx => DeleteIcon.tsx} | 4 ++-- src/icons/index.ts | 1 + 3 files changed, 5 insertions(+), 4 deletions(-) rename src/icons/{Delete.tsx => DeleteIcon.tsx} (93%) diff --git a/src/Filter/Filter.tsx b/src/Filter/Filter.tsx index 3a430e1e..8fd49f7e 100644 --- a/src/Filter/Filter.tsx +++ b/src/Filter/Filter.tsx @@ -2,7 +2,7 @@ import IconButton from "@material-ui/core/IconButton"; import MenuItem from "@material-ui/core/MenuItem"; import Select from "@material-ui/core/Select"; import Typography from "@material-ui/core/Typography"; -import Delete from "@material-ui/icons/Delete"; +import { DeleteIcon } from "../icons"; import { difference } from "lodash"; import React from "react"; @@ -111,7 +111,7 @@ export const FilterRow: React.FC = ({ toggle(name)}> - +
); diff --git a/src/icons/Delete.tsx b/src/icons/DeleteIcon.tsx similarity index 93% rename from src/icons/Delete.tsx rename to src/icons/DeleteIcon.tsx index 28dff602..6e0a74ab 100644 --- a/src/icons/Delete.tsx +++ b/src/icons/DeleteIcon.tsx @@ -1,7 +1,7 @@ import { createSvgIcon } from "@material-ui/core/utils"; import React from "react"; -export const Delete = createSvgIcon( +export const DeleteIcon = createSvgIcon( , - "Delete" + "DeleteIcon" ); diff --git a/src/icons/index.ts b/src/icons/index.ts index bdacf030..86fb5360 100644 --- a/src/icons/index.ts +++ b/src/icons/index.ts @@ -10,3 +10,4 @@ export * from "./CheckboxIndeterminateIcon"; export * from "./SearchIcon"; export * from "./EditIcon"; export * from "./FilteringIcon"; +export * from "./DeleteIcon"; From cbcd5f1fdbb6d564bc0a5f02406ced240aed4012 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Thu, 19 Aug 2021 11:00:12 +0200 Subject: [PATCH 041/140] Fix outlined button color --- src/theme/createSaleorTheme/overrides/buttons.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/theme/createSaleorTheme/overrides/buttons.ts b/src/theme/createSaleorTheme/overrides/buttons.ts index 1bb9c323..51c6ea08 100644 --- a/src/theme/createSaleorTheme/overrides/buttons.ts +++ b/src/theme/createSaleorTheme/overrides/buttons.ts @@ -81,7 +81,7 @@ export const buttonOverrides = ( fontSize: "1.3rem", }, outlinedPrimary: { - borderColor: colors.gray.disabled, + borderColor: colors.background.default, }, }, MuiIconButton: { From 6ee6828335c6067bc0f9f54026e3e650502b574f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Thu, 19 Aug 2021 14:07:12 +0200 Subject: [PATCH 042/140] Add hover --- src/PageTabs/styles.ts | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/src/PageTabs/styles.ts b/src/PageTabs/styles.ts index 6891de54..04e11f0f 100644 --- a/src/PageTabs/styles.ts +++ b/src/PageTabs/styles.ts @@ -1,3 +1,5 @@ +import { fade } from "@material-ui/core/styles"; + import { makeStyles } from "../theme"; const useStyles = makeStyles( @@ -10,6 +12,9 @@ const useStyles = makeStyles( background: theme.palette.secondary.main, color: theme.palette.primary.main, }, + "&:hover": { + background: fade(theme.palette.secondary.main, 0.6), + }, borderRadius: 8, minHeight: 40, padding: theme.spacing(1, 2), From 5438983875c7fccfa888966c459c9531a4f193d6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Fri, 20 Aug 2021 11:48:15 +0200 Subject: [PATCH 043/140] Fix button height --- src/theme/createSaleorTheme/overrides/buttons.ts | 10 ++++++++++ src/utils/Decorator.tsx | 2 +- stories/buttons.stories.tsx | 6 +++--- 3 files changed, 14 insertions(+), 4 deletions(-) diff --git a/src/theme/createSaleorTheme/overrides/buttons.ts b/src/theme/createSaleorTheme/overrides/buttons.ts index 51c6ea08..50b0e477 100644 --- a/src/theme/createSaleorTheme/overrides/buttons.ts +++ b/src/theme/createSaleorTheme/overrides/buttons.ts @@ -64,6 +64,9 @@ export const buttonOverrides = ( marginLeft: 8, }, borderRadius: 4, + fontSize: "1.6rem", + lineHeight: 1.55, + padding: "12px 16px", }, text: { ...containedSecondaryStates, @@ -80,7 +83,14 @@ export const buttonOverrides = ( textSizeSmall: { fontSize: "1.3rem", }, + outlined: { + padding: undefined, + }, outlinedPrimary: { + "&:hover": { + borderColor: "transparent", + backgroundColor: fade(colors.primary, 0.1), + }, borderColor: colors.background.default, }, }, diff --git a/src/utils/Decorator.tsx b/src/utils/Decorator.tsx index 9069a27b..b9f42e28 100644 --- a/src/utils/Decorator.tsx +++ b/src/utils/Decorator.tsx @@ -18,7 +18,7 @@ export const Decorator = (storyFn: StoryFn) => ( ); export const GuideDecorator = (storyFn: StoryFn) => ( - + {storyFn()} ); diff --git a/stories/buttons.stories.tsx b/stories/buttons.stories.tsx index 1e969791..8bf413c9 100644 --- a/stories/buttons.stories.tsx +++ b/stories/buttons.stories.tsx @@ -1,4 +1,4 @@ -import { Button, Typography } from "@material-ui/core"; +import { Button, fade, Typography } from "@material-ui/core"; import { storiesOf } from "@storybook/react"; import React from "react"; @@ -8,7 +8,7 @@ import useGuideStyles from "./guideStyles"; const useStyles = makeStyles((theme) => ({ buttonGrid: { - background: theme.palette.background.default, + background: fade(theme.palette.background.default, 0.25), borderRadius: 4, display: "grid", gridTemplateColumns: "repeat(4, 1fr)", @@ -28,7 +28,7 @@ const Default: React.FC = () => { Buttons - In most cases your app will be using one of those three button types: + In most cases your app will be using one of those four button types:
From 3635bb64004b613aecb597661e18005d0a0dedce Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Fri, 20 Aug 2021 15:39:29 +0200 Subject: [PATCH 044/140] Add disabled state to SquareButton --- src/SquareButton/SquareButton.stories.tsx | 5 +++++ src/SquareButton/SquareButton.tsx | 9 ++++++++- 2 files changed, 13 insertions(+), 1 deletion(-) diff --git a/src/SquareButton/SquareButton.stories.tsx b/src/SquareButton/SquareButton.stories.tsx index 31cc0b91..7eaa8329 100644 --- a/src/SquareButton/SquareButton.stories.tsx +++ b/src/SquareButton/SquareButton.stories.tsx @@ -9,6 +9,11 @@ export const Default: Story = () => ( ); +export const Disabled: Story = () => ( + + + +); export default { title: "Square button", diff --git a/src/SquareButton/SquareButton.tsx b/src/SquareButton/SquareButton.tsx index 3c9568cc..5318a0a0 100644 --- a/src/SquareButton/SquareButton.tsx +++ b/src/SquareButton/SquareButton.tsx @@ -7,6 +7,11 @@ import { makeStyles } from "../theme"; const useStyles = makeStyles( (theme) => ({ + disabled: { + "&$root": { + color: theme.palette.grey[500], + }, + }, root: { "&:hover, &:focus": { background: fade(theme.palette.primary.light, 0.2), @@ -30,7 +35,9 @@ export const SquareButton: React.FC = React.forwardRef( return ( From c7911b1737057af9c680c498a05c180ca0c0331e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Thu, 26 Aug 2021 10:49:26 +0200 Subject: [PATCH 045/140] Silence warnings --- src/Backlink/Backlink.stories.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Backlink/Backlink.stories.tsx b/src/Backlink/Backlink.stories.tsx index 02e510c1..3f965e95 100644 --- a/src/Backlink/Backlink.stories.tsx +++ b/src/Backlink/Backlink.stories.tsx @@ -21,6 +21,7 @@ const Wrapper: React.FC = ({ children }) => { }, 50) as any; return () => clearInterval(timer.current); + // eslint-disable-next-line react-hooks/exhaustive-deps }, []); return ( From 8219d2036e0ada07ff27351b6815c0b5e9929ace Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Thu, 26 Aug 2021 10:49:51 +0200 Subject: [PATCH 046/140] Allow confirm button to have variants --- src/ConfirmButton/ConfirmButton.stories.tsx | 97 +++++++++++++++---- src/ConfirmButton/ConfirmButton.tsx | 7 +- src/ConfirmButton/styles.ts | 1 - .../createSaleorTheme/overrides/buttons.ts | 3 +- 4 files changed, 84 insertions(+), 24 deletions(-) diff --git a/src/ConfirmButton/ConfirmButton.stories.tsx b/src/ConfirmButton/ConfirmButton.stories.tsx index f62dcab1..3191c7ce 100644 --- a/src/ConfirmButton/ConfirmButton.stories.tsx +++ b/src/ConfirmButton/ConfirmButton.stories.tsx @@ -1,6 +1,7 @@ import { Meta, Story } from "@storybook/react"; import React from "react"; +import { Decorator, GuideDecorator } from "../utils/Decorator"; import { ConfirmButton, ConfirmButtonLabels, @@ -27,46 +28,100 @@ export const Interactive: Story = () => { [] ); + const setSuccess = () => { + setTransitionState("success"); + timer.current = undefined; + }; + const handleClick = () => { if (!timer.current) { setTransitionState("loading"); - timer.current = (setTimeout( - () => setTransitionState("success"), - 2000 - ) as unknown) as number; + timer.current = (setTimeout(setSuccess, 2000) as unknown) as number; } }; return ( - + <> + + + ); }; export const Default: Story = () => ( - + <> + + + ); export const Loading: Story = () => ( - + <> + + + ); export const Error: Story = () => ( - + <> + + + ); export const Success: Story = () => ( - + <> + + + ); export default { + decorators: [ + (Story) => ( +
+ +
+ ), + Decorator, + GuideDecorator, + ], title: "Confirm Button", } as Meta; diff --git a/src/ConfirmButton/ConfirmButton.tsx b/src/ConfirmButton/ConfirmButton.tsx index 217582e2..565fd7c0 100644 --- a/src/ConfirmButton/ConfirmButton.tsx +++ b/src/ConfirmButton/ConfirmButton.tsx @@ -28,6 +28,7 @@ export const ConfirmButton: React.FC = ({ labels, noTransition, transitionState, + variant = "contained", onClick, onTransitionToDefault, ...props @@ -75,7 +76,11 @@ export const ConfirmButton: React.FC = ({ return ( + + +); + +export const WithOverflowTable: React.FC = () => { + const { element, position, setAnchor } = useElementScroll(); + // isScrolledToTop can be undefined which is falsy, but we don'w want to + // display shadow then + const topShadow = isScrolledToTop(element, position, 20) === false; + const bottomShadow = isScrolledToBottom(element, position, 20) === false; + + return ( + + + undefined}>Employee List + + + + + Name + Email + Job + + + + {employees.map((employee) => ( + + {employee.name} + {employee.email} + {employee.job} + + ))} + + + + + + + + + ); +}; + +export default { + title: "Dialogs", +} as Meta; diff --git a/stories/icons.stories.tsx b/stories/icons.stories.tsx index 2f8b1a4d..3f4d49f7 100644 --- a/stories/icons.stories.tsx +++ b/stories/icons.stories.tsx @@ -6,6 +6,7 @@ import { CheckboxCheckedIcon, CheckboxIcon, CheckboxIndeterminateIcon, + CloseIcon, CompleteIcon, DeleteIcon, EditIcon, @@ -43,6 +44,7 @@ const icons: React.FC<{ className: string }>[] = [ CheckboxCheckedIcon, CheckboxIcon, CheckboxIndeterminateIcon, + CloseIcon, CompleteIcon, DeleteIcon, EditIcon, From 147f8bb1c5971195036fd18560f2fd45e9126a30 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Tue, 5 Oct 2021 12:09:09 +0200 Subject: [PATCH 073/140] Fix size --- stories/dialogs.stories.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/stories/dialogs.stories.tsx b/stories/dialogs.stories.tsx index b6fe0a41..c078b87b 100644 --- a/stories/dialogs.stories.tsx +++ b/stories/dialogs.stories.tsx @@ -44,7 +44,7 @@ export const WithOverflowTable: React.FC = () => { const bottomShadow = isScrolledToBottom(element, position, 20) === false; return ( - + undefined}>Employee List From 8bbaa3d1af3fee221fc406f9ecb59de64d140a7d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Tue, 5 Oct 2021 12:11:47 +0200 Subject: [PATCH 074/140] Improve hook api --- src/tools/useElementScroll.ts | 4 ++-- stories/dialogs.stories.tsx | 6 +++--- 2 files changed, 5 insertions(+), 5 deletions(-) diff --git a/src/tools/useElementScroll.ts b/src/tools/useElementScroll.ts index 537559c2..18717d3c 100644 --- a/src/tools/useElementScroll.ts +++ b/src/tools/useElementScroll.ts @@ -34,7 +34,7 @@ export function isScrolledToTop( } export interface UseElementScrollOpts { - element: T | null; + anchor: T | null; position: Position | undefined; } @@ -77,7 +77,7 @@ function useElementScroll(): UseElementScroll { return { setAnchor, - element: anchorEl, + anchor: anchorEl, position: scroll, }; } diff --git a/stories/dialogs.stories.tsx b/stories/dialogs.stories.tsx index c078b87b..05610c39 100644 --- a/stories/dialogs.stories.tsx +++ b/stories/dialogs.stories.tsx @@ -37,11 +37,11 @@ export const Info: React.FC = () => ( ); export const WithOverflowTable: React.FC = () => { - const { element, position, setAnchor } = useElementScroll(); + const { anchor, position, setAnchor } = useElementScroll(); // isScrolledToTop can be undefined which is falsy, but we don'w want to // display shadow then - const topShadow = isScrolledToTop(element, position, 20) === false; - const bottomShadow = isScrolledToBottom(element, position, 20) === false; + const topShadow = isScrolledToTop(anchor, position, 20) === false; + const bottomShadow = isScrolledToBottom(anchor, position, 20) === false; return ( From 8e812bb9ead1a512ccd78591cd2fb570adb8444b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Tue, 5 Oct 2021 12:13:16 +0200 Subject: [PATCH 075/140] Export hooks --- src/ActionBar/ActionBar.tsx | 2 +- src/index.tsx | 1 + src/tools/index.ts | 2 ++ src/tools/useElementScroll.ts | 3 +-- src/tools/useWindowScroll.ts | 3 +-- stories/dialogs.stories.tsx | 5 +++-- 6 files changed, 9 insertions(+), 7 deletions(-) create mode 100644 src/tools/index.ts diff --git a/src/ActionBar/ActionBar.tsx b/src/ActionBar/ActionBar.tsx index 12bd12c6..b54f6ec8 100644 --- a/src/ActionBar/ActionBar.tsx +++ b/src/ActionBar/ActionBar.tsx @@ -5,7 +5,7 @@ import Portal from "@material-ui/core/Portal"; import React from "react"; import { ConfirmButtonTransitionState } from "../ConfirmButton"; -import useWindowScroll from "../tools/useWindowScroll"; +import { useWindowScroll } from "../tools"; import { useActionBar } from "./context"; import useStyles from "./styles"; diff --git a/src/index.tsx b/src/index.tsx index 9e55dffc..0c160642 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -23,3 +23,4 @@ export * from "./ActionBar"; export * from "./DialogHeader"; export * from "./DialogTable"; export * from "./ScrollShadow"; +export * from "./tools"; diff --git a/src/tools/index.ts b/src/tools/index.ts new file mode 100644 index 00000000..9bb42ad2 --- /dev/null +++ b/src/tools/index.ts @@ -0,0 +1,2 @@ +export * from "./useElementScroll"; +export * from "./useWindowScroll"; diff --git a/src/tools/useElementScroll.ts b/src/tools/useElementScroll.ts index 18717d3c..cfba5aac 100644 --- a/src/tools/useElementScroll.ts +++ b/src/tools/useElementScroll.ts @@ -43,7 +43,7 @@ export interface UseElementScroll setAnchor: React.Dispatch; } -function useElementScroll(): UseElementScroll { +export function useElementScroll(): UseElementScroll { const [anchorEl, setAnchorEl] = useState(null); const [scroll, setScroll] = useState(getPosition(anchorEl)); @@ -81,4 +81,3 @@ function useElementScroll(): UseElementScroll { position: scroll, }; } -export default useElementScroll; diff --git a/src/tools/useWindowScroll.ts b/src/tools/useWindowScroll.ts index 0b83762a..ab2ff031 100644 --- a/src/tools/useWindowScroll.ts +++ b/src/tools/useWindowScroll.ts @@ -10,7 +10,7 @@ function getPosition() { }; } -function useWindowScroll() { +export function useWindowScroll() { const [scroll, setScroll] = useState(getPosition); useEffect(() => { @@ -23,4 +23,3 @@ function useWindowScroll() { return scroll; } -export default useWindowScroll; diff --git a/stories/dialogs.stories.tsx b/stories/dialogs.stories.tsx index 05610c39..32bc1b53 100644 --- a/stories/dialogs.stories.tsx +++ b/stories/dialogs.stories.tsx @@ -13,10 +13,11 @@ import { Meta } from "@storybook/react"; import React from "react"; import { DialogHeader, DialogTable, ScrollShadow } from "../src"; -import useElementScroll, { +import { isScrolledToBottom, isScrolledToTop, -} from "../src/tools/useElementScroll"; + useElementScroll, +} from "../src/tools"; import employees from "./__fixtures__/dialogs.json"; export const Info: React.FC = () => ( From 4e541543c076b61173a2cdc43ccc1b2525b25564 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Fri, 15 Oct 2021 09:43:54 +0200 Subject: [PATCH 076/140] Apply suggestions from review --- src/tools/useElementScroll.ts | 2 +- stories/dialogs.stories.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/tools/useElementScroll.ts b/src/tools/useElementScroll.ts index cfba5aac..a7d89f23 100644 --- a/src/tools/useElementScroll.ts +++ b/src/tools/useElementScroll.ts @@ -6,7 +6,7 @@ export type Position = Record<"x" | "y", number>; function getPosition( anchor?: T | null ): Position | undefined { - if (!!anchor) { + if (anchor) { return { x: anchor.scrollLeft, y: anchor.scrollTop, diff --git a/stories/dialogs.stories.tsx b/stories/dialogs.stories.tsx index 32bc1b53..c892fad4 100644 --- a/stories/dialogs.stories.tsx +++ b/stories/dialogs.stories.tsx @@ -39,7 +39,7 @@ export const Info: React.FC = () => ( export const WithOverflowTable: React.FC = () => { const { anchor, position, setAnchor } = useElementScroll(); - // isScrolledToTop can be undefined which is falsy, but we don'w want to + // isScrolledToTop can be undefined which is falsy, but we don't want to // display shadow then const topShadow = isScrolledToTop(anchor, position, 20) === false; const bottomShadow = isScrolledToBottom(anchor, position, 20) === false; From 5920e965b416e14cb8747d088ab7cc1643db05c1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Thu, 14 Oct 2021 13:39:40 +0200 Subject: [PATCH 077/140] Add plus icon --- src/icons/PlusIcon.tsx | 12 ++++++++++++ src/icons/index.ts | 1 + stories/icons.stories.tsx | 2 ++ 3 files changed, 15 insertions(+) create mode 100644 src/icons/PlusIcon.tsx diff --git a/src/icons/PlusIcon.tsx b/src/icons/PlusIcon.tsx new file mode 100644 index 00000000..0d645898 --- /dev/null +++ b/src/icons/PlusIcon.tsx @@ -0,0 +1,12 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const PlusIcon = createSvgIcon( + , + "PlusIcon" +); diff --git a/src/icons/index.ts b/src/icons/index.ts index 2b854438..68987b21 100644 --- a/src/icons/index.ts +++ b/src/icons/index.ts @@ -13,3 +13,4 @@ export * from "./FilteringIcon"; export * from "./DeleteIcon"; export * from "./ImageIcon"; export * from "./CloseIcon"; +export * from "./PlusIcon"; diff --git a/stories/icons.stories.tsx b/stories/icons.stories.tsx index 3f4d49f7..faca43c4 100644 --- a/stories/icons.stories.tsx +++ b/stories/icons.stories.tsx @@ -15,6 +15,7 @@ import { InfoIcon, NotAllowedIcon, NotAllowedInvertedIcon, + PlusIcon, WarningIcon, } from "../src/icons"; import { makeStyles } from "../src/theme"; @@ -53,6 +54,7 @@ const icons: React.FC<{ className: string }>[] = [ InfoIcon, NotAllowedIcon, NotAllowedInvertedIcon, + PlusIcon, WarningIcon, ]; From 9781ae913f8191b17f4c7a67dabda7fb3796a04b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Fri, 15 Oct 2021 08:27:54 +0200 Subject: [PATCH 078/140] Use only one shadow type --- src/theme/createSaleorTheme/shadows.ts | 66 ++++++++++---------------- 1 file changed, 26 insertions(+), 40 deletions(-) diff --git a/src/theme/createSaleorTheme/shadows.ts b/src/theme/createSaleorTheme/shadows.ts index 91621c42..3fb45d92 100644 --- a/src/theme/createSaleorTheme/shadows.ts +++ b/src/theme/createSaleorTheme/shadows.ts @@ -1,46 +1,32 @@ import type { ThemeOptions } from "@material-ui/core/styles"; -const createShadow = ( - pv: number, - pb: number, - ps: number, - uv: number, - ub: number, - us: number, - av: number, - ab: number, - as: number -) => - [ - `0 ${pv}px ${pb}px ${ps}px rgba(0, 0, 0, 0.2)`, - `0 ${uv}px ${ub}px ${us}px rgba(0, 0, 0, 0.14)`, - `0 ${av}px ${ab}px ${as}px rgba(0, 0, 0, 0.12)`, - ].join(","); +const createShadow = (pv: number, pb: number, ps: number) => + `0 ${pv}px ${pb}px ${ps}px rgba(0, 0, 0, 0.15)`; export const shadows: ThemeOptions["shadows"] = [ "none", - createShadow(1, 1, 0, 2, 1, -2, 1, 3, 0), - createShadow(2, 2, 0, 3, 1, -2, 1, 5, 0), - createShadow(3, 4, 0, 3, 3, -2, 1, 8, 0), - createShadow(4, 5, 0, 1, 10, 0, 2, 4, -1), - createShadow(5, 8, 0, 1, 14, 0, 3, 4, -1), - createShadow(6, 10, 0, 1, 18, 0, 3, 5, -1), - createShadow(7, 10, 0, 2, 16, 1, 4, 5, -2), - createShadow(8, 10, 1, 3, 14, 2, 5, 5, -3), - createShadow(9, 12, 1, 3, 16, 3, 5, 6, -4), - createShadow(10, 14, 1, 4, 18, 3, 6, 7, -4), - createShadow(11, 16, 1, 4, 20, 3, 6, 7, -4), - createShadow(12, 17, 1, 5, 22, 4, 7, 8, -4), - createShadow(13, 19, 1, 5, 24, 4, 7, 8, -4), - createShadow(14, 21, 1, 5, 26, 4, 7, 9, -5), - createShadow(15, 22, 1, 5, 28, 4, 7, 9, -5), - createShadow(16, 24, 2, 6, 30, 5, 8, 10, -5), - createShadow(15, 27, 3, 7, 28, 3, 10, 14, -4), - createShadow(14, 30, 4, 8, 26, 1, 12, 17, -3), - createShadow(13, 33, 4, 8, 24, -1, 14, 20, -1), - createShadow(12, 36, 5, 9, 22, -2, 16, 24, 1), - createShadow(11, 39, 6, 10, 20, -4, 18, 28, 1), - createShadow(10, 41, 7, 10, 18, -5, 20, 31, 2), - createShadow(9, 44, 7, 11, 16, -6, 22, 35, 2), - createShadow(9, 46, 8, 11, 15, -7, 24, 38, 3), + createShadow(24, 20, -20), + createShadow(24, 20, -20), + createShadow(24, 20, -20), + createShadow(24, 20, -20), + createShadow(24, 20, -20), + createShadow(24, 20, -20), + createShadow(24, 20, -20), + createShadow(24, 20, -20), + createShadow(24, 20, -20), + createShadow(24, 20, -20), + createShadow(24, 20, -20), + createShadow(24, 20, -20), + createShadow(24, 20, -20), + createShadow(24, 20, -20), + createShadow(24, 20, -20), + createShadow(24, 20, -20), + createShadow(24, 20, -20), + createShadow(24, 20, -20), + createShadow(24, 20, -20), + createShadow(24, 20, -20), + createShadow(24, 20, -20), + createShadow(24, 20, -20), + createShadow(24, 20, -20), + createShadow(24, 20, -20), ]; From e52eabbbb1af121b920880f34e4b857f9fa94a61 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Tue, 12 Oct 2021 13:30:49 +0200 Subject: [PATCH 079/140] Update button design --- src/Button/Button.stories.tsx | 133 ++++++++++++++++++ src/Button/Button.tsx | 59 ++++++++ src/Button/index.ts | 1 + src/Button/styles.ts | 65 +++++++++ .../createSaleorTheme/overrides/buttons.ts | 57 ++++---- src/theme/createSaleorTheme/palette.ts | 1 + src/theme/createSaleorTheme/types.ts | 72 +++++----- src/theme/themes.ts | 7 + stories/buttons.stories.tsx | 77 ---------- 9 files changed, 331 insertions(+), 141 deletions(-) create mode 100644 src/Button/Button.stories.tsx create mode 100644 src/Button/Button.tsx create mode 100644 src/Button/index.ts create mode 100644 src/Button/styles.ts delete mode 100644 stories/buttons.stories.tsx diff --git a/src/Button/Button.stories.tsx b/src/Button/Button.stories.tsx new file mode 100644 index 00000000..3b8c2506 --- /dev/null +++ b/src/Button/Button.stories.tsx @@ -0,0 +1,133 @@ +import { fade, Typography } from "@material-ui/core"; +import { Meta, Story } from "@storybook/react"; +import React from "react"; + +import useGuideStyles from "../../stories/guideStyles"; +import { makeStyles } from "../theme"; +import { Decorator, GuideDecorator } from "../utils/Decorator"; +import { Button } from "."; + +const useStyles = makeStyles((theme) => ({ + buttonGrid: { + display: "grid", + gridTemplateColumns: "repeat(3, 1fr)", + columnGap: theme.spacing(3), + }, + buttonColumn: { + border: "1px dashed #7B61FF", + borderRadius: 4, + display: "flex", + flexDirection: "column", + padding: theme.spacing(3), + rowGap: theme.spacing(3), + }, +})); + +export const Default: Story = () => { + const classes = useStyles(); + const guideClasses = useGuideStyles(); + + return ( +
+ + Buttons + + + In most cases your app will be using one of those three button types: + + +
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+ + + They are designed to perform most of the actions that you will need to + add. These buttons can be placed in various places, most notably cards, + dialogs and forms. + +
+ ); +}; + +export const Error: Story = () => { + const classes = useStyles(); + const guideClasses = useGuideStyles(); + + return ( +
+ + Buttons + + + Buttons below are intended to indicate that something in application + needs additional attention: + + +
+
+
+ + +
+
+
+
+ + +
+
+
+
+ + +
+
+
+ + + An example usage of these would be failed form submit or performing + dangerous actions, like permanently deleting objects. + +
+ ); +}; + +export default { + title: "Buttons", + decorators: [Decorator, GuideDecorator], +} as Meta; diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx new file mode 100644 index 00000000..494be94b --- /dev/null +++ b/src/Button/Button.tsx @@ -0,0 +1,59 @@ +import MuiButton, { + ButtonProps as MuiButtonProps, +} from "@material-ui/core/Button"; +import clsx from "clsx"; +import React from "react"; + +import useStyles from "./styles"; + +export type ButtonVariant = "primary" | "secondary" | "tertiary"; + +export type ButtonProps = Omit< + MuiButtonProps, + "variant" +> & { + error?: boolean; + variant?: ButtonVariant; +}; + +function getButtonProps(variant: ButtonVariant): Partial { + switch (variant) { + case "primary": + return { variant: "contained", color: "primary" }; + case "secondary": + return { variant: "outlined", color: "primary" }; + default: + return { variant: "text", color: "primary" }; + } +} + +export const Button: React.FC = ({ + className, + error, + variant = "tertiary", + ...props +}) => { + const classes = useStyles(); + + return ( + + ); +}; +Button.displayName = "Button"; diff --git a/src/Button/index.ts b/src/Button/index.ts new file mode 100644 index 00000000..e22c29ad --- /dev/null +++ b/src/Button/index.ts @@ -0,0 +1 @@ +export * from "./Button"; diff --git a/src/Button/styles.ts b/src/Button/styles.ts new file mode 100644 index 00000000..9df70c6f --- /dev/null +++ b/src/Button/styles.ts @@ -0,0 +1,65 @@ +import { makeStyles } from "../theme"; + +const useStyles = makeStyles( + (theme) => ({ + primary: { + "&&": { + "&:hover": { + background: theme.palette.saleor.errorAction[2], + }, + "&:active": { + background: theme.palette.saleor.errorAction[3], + }, + }, + background: theme.palette.saleor.errorAction[1], + }, + primaryDisabled: { + "&&&": { + background: theme.palette.saleor.errorAction[5], + }, + }, + + secondary: { + "&&": { + "&:hover": { + background: theme.palette.saleor.errorAction[5], + borderColor: theme.palette.saleor.errorAction[1], + }, + "&:active": { + background: theme.palette.saleor.errorAction[4], + borderColor: theme.palette.saleor.errorAction[1], + }, + }, + borderColor: theme.palette.saleor.errorAction[4], + color: theme.palette.saleor.errorAction[1], + }, + secondaryDisabled: { + "&&&": { + borderColor: theme.palette.saleor.errorAction[5], + color: theme.palette.saleor.errorAction[5], + }, + }, + + tertiary: { + "&&": { + "&:hover": { + background: theme.palette.saleor.errorAction[5], + }, + "&:active": { + background: theme.palette.saleor.errorAction[4], + }, + }, + color: theme.palette.saleor.errorAction[1], + }, + tertiaryDisabled: { + "&&&": { + color: theme.palette.saleor.errorAction[5], + }, + }, + }), + { + name: "Button", + } +); + +export default useStyles; diff --git a/src/theme/createSaleorTheme/overrides/buttons.ts b/src/theme/createSaleorTheme/overrides/buttons.ts index 24792243..58598330 100644 --- a/src/theme/createSaleorTheme/overrides/buttons.ts +++ b/src/theme/createSaleorTheme/overrides/buttons.ts @@ -7,19 +7,11 @@ export const buttonOverrides = ( colors: SaleorThemeColors ): ThemeOptions["overrides"] => { const containedPrimaryStates = { - "&&:active": { - backgroundColor: fade(colors.primary, 0.4), - }, "&&:hover": { - backgroundColor: fade(colors.primary, 0.6), + backgroundColor: colors.active[3], }, - }; - const containedSecondaryStates = { "&&:active": { - backgroundColor: fade(colors.primary, 0.2), - }, - "&&:hover": { - backgroundColor: fade(colors.primary, 0.1), + backgroundColor: colors.active[4], }, }; @@ -29,11 +21,11 @@ export const buttonOverrides = ( "&$disabled": { "&$containedPrimary": { color: colors.secondary, - backgroundColor: colors.gray.disabled, + backgroundColor: colors.disabled, }, "&$containedSecondary": { - background: colors.secondary, - color: colors.gray.disabled, + background: colors.background.paper, + color: colors.disabled, }, }, "&:active": { @@ -51,11 +43,6 @@ export const buttonOverrides = ( ...containedPrimaryStates, "@media(hover: none)": containedPrimaryStates, }, - containedSecondary: { - ...containedSecondaryStates, - "@media(hover: none)": containedSecondaryStates, - color: colors.primary, - }, label: { fontWeight: 600, }, @@ -65,34 +52,48 @@ export const buttonOverrides = ( }, borderRadius: 4, fontSize: "1.6rem", + letterSpacing: "0.06rem", lineHeight: 1.55, padding: "12px 16px", }, text: { - ...containedSecondaryStates, - "@media(hover: none)": containedSecondaryStates, "&&$disabled": { - color: colors.gray.disabled, + color: colors.disabled, }, }, textPrimary: { - "&:not($disabled) span": { - color: colors.primary, + "&:hover": { + background: colors.active[5], + }, + "&:active": { + background: colors.active[4], }, }, textSizeSmall: { fontSize: "1.3rem", }, outlined: { + "&$disabled": { + border: undefined, + borderColor: colors.disabled, + }, + background: colors.background.paper, // 2px smaller because of border - padding: "10px 16px", + border: `2px solid ${colors.active[4]}`, + padding: "10px 12px", }, outlinedPrimary: { "&:hover": { - borderColor: "transparent", - backgroundColor: fade(colors.primary, 0.1), + // Unsets border as it will require us to override borderWidth and + // borderStyle over and over + border: undefined, + borderColor: colors.active[1], + backgroundColor: colors.active[5], + }, + "&:active": { + backgroundColor: colors.active[4], }, - borderColor: colors.background.default, + border: undefined, }, }, MuiIconButton: { @@ -112,7 +113,7 @@ export const buttonOverrides = ( "&$disabled": { "&$switchBase": { "& + $thumb": { - backgroundColor: colors.gray.disabled, + backgroundColor: colors.disabled, }, }, }, diff --git a/src/theme/createSaleorTheme/palette.ts b/src/theme/createSaleorTheme/palette.ts index 3eef95bd..2b12b2c0 100644 --- a/src/theme/createSaleorTheme/palette.ts +++ b/src/theme/createSaleorTheme/palette.ts @@ -35,4 +35,5 @@ export const createPalette = ( inactive: colors.highlightInactive.default, }, type: colors.theme, + saleor: colors, }); diff --git a/src/theme/createSaleorTheme/types.ts b/src/theme/createSaleorTheme/types.ts index 571cf1c5..65154fee 100644 --- a/src/theme/createSaleorTheme/types.ts +++ b/src/theme/createSaleorTheme/types.ts @@ -1,6 +1,41 @@ /* eslint-disable @typescript-eslint/unified-signatures */ import type { Theme, ThemeOptions } from "@material-ui/core/styles"; +export type ThemeType = "light" | "dark"; + +export type SaleorThemeColors = Record< + | "primary" + | "secondary" + | "error" + | "paperBorder" + | "autofill" + | "success" + | "disabled", + string +> & { + highlightInactive: Record<"default", string>; +} & { + background: Record<"default" | "paper", string>; +} & { + checkbox: Record<"default", string>; +} & { + divider: string; +} & { + font: Record< + "default" | "gray" | "button" | "textButton" | "textDisabled", + string + >; +} & { + gray: Record<"default" | "disabled", string>; +} & { + alert: AlertColors; + theme: ThemeType; + fail: Record<"dark" | "mid" | "light", string>; + main: Record<1 | 2 | 3 | 4, string>; + active: Record<1 | 2 | 3 | 4 | 5, string>; + errorAction: Record<1 | 2 | 3 | 4 | 5, string>; +}; + export type AlertPalette = Record< "success" | "error" | "warning" | "info", string @@ -8,6 +43,7 @@ export type AlertPalette = Record< export type AlertColors = Record<"paper" | "icon", AlertPalette>; interface ExtraPalette { alert: AlertColors; + saleor: SaleorThemeColors; textHighlighted: { active: string; inactive: string; @@ -37,40 +73,4 @@ export interface SaleorThemeOptions extends ThemeOptions { palette: SaleorPaletteOptions; } -export type ThemeType = "light" | "dark"; - -type Fail = Record<"dark" | "mid" | "light", string>; - -export type SaleorThemeColors = Record< - | "primary" - | "secondary" - | "error" - | "paperBorder" - | "autofill" - | "success" - | "disabled", - string -> & { - highlightInactive: Record<"default", string>; -} & { - background: Record<"default" | "paper", string>; -} & { - checkbox: Record<"default", string>; -} & { - divider: string; -} & { - font: Record< - "default" | "gray" | "button" | "textButton" | "textDisabled", - string - >; -} & { - gray: Record<"default" | "disabled", string>; -} & { - alert: AlertColors; - theme: ThemeType; - fail: Fail; - main: Record<1 | 2 | 3 | 4, string>; - active: Record<1 | 2 | 3 | 4 | 5, string>; -}; - export type Themes = Record; diff --git a/src/theme/themes.ts b/src/theme/themes.ts index 57a81872..5dd21200 100644 --- a/src/theme/themes.ts +++ b/src/theme/themes.ts @@ -126,6 +126,13 @@ export const light: SaleorThemeColors = { mid: "#FEADAD", light: "#FEDEDE", }, + errorAction: { + 1: "#B63755", + 2: "#D36474", + 3: "#E9878B", + 4: "#F7B6B2", + 5: "#FBDDD8", + }, disabled: "#CCDDDD", paperBorder: "#EAEAEA", diff --git a/stories/buttons.stories.tsx b/stories/buttons.stories.tsx deleted file mode 100644 index 8bf413c9..00000000 --- a/stories/buttons.stories.tsx +++ /dev/null @@ -1,77 +0,0 @@ -import { Button, fade, Typography } from "@material-ui/core"; -import { storiesOf } from "@storybook/react"; -import React from "react"; - -import { makeStyles } from "../src/theme"; -import { Decorator, GuideDecorator } from "../src/utils/Decorator"; -import useGuideStyles from "./guideStyles"; - -const useStyles = makeStyles((theme) => ({ - buttonGrid: { - background: fade(theme.palette.background.default, 0.25), - borderRadius: 4, - display: "grid", - gridTemplateColumns: "repeat(4, 1fr)", - columnGap: theme.spacing(3), - rowGap: theme.spacing(2), - padding: theme.spacing(3), - }, -})); - -const Default: React.FC = () => { - const classes = useStyles(); - const guideClasses = useGuideStyles(); - - return ( -
- - Buttons - - - In most cases your app will be using one of those four button types: - - -
-
Primary
-
Secondary
-
Text
-
Outlined
- - - - - - - - -
- - - They are designed to perform most of the actions that you will need to - add. These buttons can be placed in various places, most notably cards, - dialogs and forms. - -
- ); -}; - -storiesOf("Buttons", module) - .addDecorator(Decorator) - .addDecorator(GuideDecorator) - .add("default", () => ); From c9e70b107289b0d7e8d547a214774e41fb9671e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Tue, 12 Oct 2021 15:08:08 +0200 Subject: [PATCH 080/140] Add keyboard interaction states --- .../createSaleorTheme/overrides/buttons.ts | 39 ++++++++++++------- 1 file changed, 25 insertions(+), 14 deletions(-) diff --git a/src/theme/createSaleorTheme/overrides/buttons.ts b/src/theme/createSaleorTheme/overrides/buttons.ts index 58598330..6c44098f 100644 --- a/src/theme/createSaleorTheme/overrides/buttons.ts +++ b/src/theme/createSaleorTheme/overrides/buttons.ts @@ -6,15 +6,28 @@ import { SaleorThemeColors } from "../types"; export const buttonOverrides = ( colors: SaleorThemeColors ): ThemeOptions["overrides"] => { + const containedPrimaryHover = { + backgroundColor: colors.active[3], + }; const containedPrimaryStates = { - "&&:hover": { - backgroundColor: colors.active[3], - }, + "&&:hover": containedPrimaryHover, "&&:active": { backgroundColor: colors.active[4], }, }; + const outlinedPrimaryHover = { + // Unsets border as it will require us to override borderWidth and + // borderStyle over and over + border: undefined, + borderColor: colors.active[1], + backgroundColor: colors.active[5], + }; + + const textPrimaryHover = { + background: colors.active[5], + }; + return { MuiButton: { contained: { @@ -28,6 +41,10 @@ export const buttonOverrides = ( color: colors.disabled, }, }, + "&$focusVisible": { + ...containedPrimaryHover, + boxShadow: undefined, + }, "&:active": { boxShadow: "none", }, @@ -62,9 +79,8 @@ export const buttonOverrides = ( }, }, textPrimary: { - "&:hover": { - background: colors.active[5], - }, + "&$focusVisible": textPrimaryHover, + "&:hover": textPrimaryHover, "&:active": { background: colors.active[4], }, @@ -78,18 +94,13 @@ export const buttonOverrides = ( borderColor: colors.disabled, }, background: colors.background.paper, - // 2px smaller because of border border: `2px solid ${colors.active[4]}`, + // 2px smaller because of border padding: "10px 12px", }, outlinedPrimary: { - "&:hover": { - // Unsets border as it will require us to override borderWidth and - // borderStyle over and over - border: undefined, - borderColor: colors.active[1], - backgroundColor: colors.active[5], - }, + "&$focusVisible": outlinedPrimaryHover, + "&:hover": outlinedPrimaryHover, "&:active": { backgroundColor: colors.active[4], }, From 6f2ef01d0f5e5a83158aa01772d36f18dd3226ed Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Tue, 12 Oct 2021 15:10:39 +0200 Subject: [PATCH 081/140] Fix disabled color --- src/theme/createSaleorTheme/overrides/buttons.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/theme/createSaleorTheme/overrides/buttons.ts b/src/theme/createSaleorTheme/overrides/buttons.ts index 6c44098f..d587144f 100644 --- a/src/theme/createSaleorTheme/overrides/buttons.ts +++ b/src/theme/createSaleorTheme/overrides/buttons.ts @@ -92,6 +92,7 @@ export const buttonOverrides = ( "&$disabled": { border: undefined, borderColor: colors.disabled, + color: colors.disabled, }, background: colors.background.paper, border: `2px solid ${colors.active[4]}`, From 43d161448b2d1835397c776140dea7b12c453fe4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Tue, 12 Oct 2021 15:16:47 +0200 Subject: [PATCH 082/140] Simplify code --- src/Button/styles.ts | 6 +-- .../createSaleorTheme/overrides/buttons.ts | 40 ++++++++----------- 2 files changed, 19 insertions(+), 27 deletions(-) diff --git a/src/Button/styles.ts b/src/Button/styles.ts index 9df70c6f..2ecf2b19 100644 --- a/src/Button/styles.ts +++ b/src/Button/styles.ts @@ -4,7 +4,7 @@ const useStyles = makeStyles( (theme) => ({ primary: { "&&": { - "&:hover": { + "&:hover, &.Mui-focusVisible": { background: theme.palette.saleor.errorAction[2], }, "&:active": { @@ -21,7 +21,7 @@ const useStyles = makeStyles( secondary: { "&&": { - "&:hover": { + "&:hover, &.Mui-focusVisible": { background: theme.palette.saleor.errorAction[5], borderColor: theme.palette.saleor.errorAction[1], }, @@ -42,7 +42,7 @@ const useStyles = makeStyles( tertiary: { "&&": { - "&:hover": { + "&:hover, &.Mui-focusVisible": { background: theme.palette.saleor.errorAction[5], }, "&:active": { diff --git a/src/theme/createSaleorTheme/overrides/buttons.ts b/src/theme/createSaleorTheme/overrides/buttons.ts index d587144f..ef5e3324 100644 --- a/src/theme/createSaleorTheme/overrides/buttons.ts +++ b/src/theme/createSaleorTheme/overrides/buttons.ts @@ -9,24 +9,6 @@ export const buttonOverrides = ( const containedPrimaryHover = { backgroundColor: colors.active[3], }; - const containedPrimaryStates = { - "&&:hover": containedPrimaryHover, - "&&:active": { - backgroundColor: colors.active[4], - }, - }; - - const outlinedPrimaryHover = { - // Unsets border as it will require us to override borderWidth and - // borderStyle over and over - border: undefined, - borderColor: colors.active[1], - backgroundColor: colors.active[5], - }; - - const textPrimaryHover = { - background: colors.active[5], - }; return { MuiButton: { @@ -57,8 +39,10 @@ export const buttonOverrides = ( boxShadow: "none", }, containedPrimary: { - ...containedPrimaryStates, - "@media(hover: none)": containedPrimaryStates, + "&&:hover": containedPrimaryHover, + "&&:active": { + backgroundColor: colors.active[4], + }, }, label: { fontWeight: 600, @@ -79,8 +63,9 @@ export const buttonOverrides = ( }, }, textPrimary: { - "&$focusVisible": textPrimaryHover, - "&:hover": textPrimaryHover, + "&:hover, &$focusVisible": { + background: colors.active[5], + }, "&:active": { background: colors.active[4], }, @@ -100,8 +85,15 @@ export const buttonOverrides = ( padding: "10px 12px", }, outlinedPrimary: { - "&$focusVisible": outlinedPrimaryHover, - "&:hover": outlinedPrimaryHover, + "&:hover, &$focusVisible": { + borderColor: colors.active[1], + backgroundColor: colors.active[5], + }, + "&:hover": { + // Unsets border as it will require us to override borderWidth and + // borderStyle over and over + border: undefined, + }, "&:active": { backgroundColor: colors.active[4], }, From ba90369c4646d6d0a634b2cce593e05720b9704f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Wed, 13 Oct 2021 08:04:48 +0200 Subject: [PATCH 083/140] Add icon button --- src/IconButton/IconButton.tsx | 34 +++++++++ src/IconButton/index.ts | 1 + src/IconButton/styles.ts | 31 +++++++++ src/index.tsx | 2 + .../createSaleorTheme/overrides/buttons.ts | 22 +++++- .../buttons.stories.tsx | 69 +++++++++++++------ 6 files changed, 136 insertions(+), 23 deletions(-) create mode 100644 src/IconButton/IconButton.tsx create mode 100644 src/IconButton/index.ts create mode 100644 src/IconButton/styles.ts rename src/Button/Button.stories.tsx => stories/buttons.stories.tsx (71%) diff --git a/src/IconButton/IconButton.tsx b/src/IconButton/IconButton.tsx new file mode 100644 index 00000000..f3210039 --- /dev/null +++ b/src/IconButton/IconButton.tsx @@ -0,0 +1,34 @@ +import MuiIconButton, { + IconButtonProps as MuiIconButtonProps, +} from "@material-ui/core/IconButton"; +import clsx from "clsx"; +import React from "react"; + +import useStyles from "./styles"; + +export type IconButtonProps = Omit< + MuiIconButtonProps, + "variant" +> & { + error?: boolean; +}; + +export const IconButton: React.FC = ({ + className, + error, + ...props +}) => { + const classes = useStyles(); + + return ( + + ); +}; +IconButton.displayName = "Button"; diff --git a/src/IconButton/index.ts b/src/IconButton/index.ts new file mode 100644 index 00000000..53185101 --- /dev/null +++ b/src/IconButton/index.ts @@ -0,0 +1 @@ +export * from "./IconButton"; diff --git a/src/IconButton/styles.ts b/src/IconButton/styles.ts new file mode 100644 index 00000000..1cbca5db --- /dev/null +++ b/src/IconButton/styles.ts @@ -0,0 +1,31 @@ +import { makeStyles } from "../theme"; + +const useStyles = makeStyles( + (theme) => ({ + error: { + "&&": { + "&:hover, &.Mui-focusVisible": { + background: theme.palette.saleor.errorAction[5], + borderColor: theme.palette.saleor.errorAction[1], + }, + "&:active": { + background: theme.palette.saleor.errorAction[4], + borderColor: theme.palette.saleor.errorAction[1], + }, + }, + borderColor: theme.palette.saleor.errorAction[4], + color: theme.palette.saleor.errorAction[1], + }, + disabledError: { + "&&&": { + borderColor: theme.palette.saleor.errorAction[5], + color: theme.palette.saleor.errorAction[5], + }, + }, + }), + { + name: "IconButton", + } +); + +export default useStyles; diff --git a/src/index.tsx b/src/index.tsx index 0c160642..163e4d9d 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -24,3 +24,5 @@ export * from "./DialogHeader"; export * from "./DialogTable"; export * from "./ScrollShadow"; export * from "./tools"; +export * from "./Button"; +export * from "./IconButton"; diff --git a/src/theme/createSaleorTheme/overrides/buttons.ts b/src/theme/createSaleorTheme/overrides/buttons.ts index ef5e3324..7c444291 100644 --- a/src/theme/createSaleorTheme/overrides/buttons.ts +++ b/src/theme/createSaleorTheme/overrides/buttons.ts @@ -1,5 +1,4 @@ import type { ThemeOptions } from "@material-ui/core/styles"; -import { fade } from "@material-ui/core/styles"; import { SaleorThemeColors } from "../types"; @@ -102,9 +101,28 @@ export const buttonOverrides = ( }, MuiIconButton: { root: { + "&:hover, &$focusVisible": { + borderColor: colors.active[1], + backgroundColor: colors.active[5], + }, "&:hover": { - backgroundColor: fade(colors.primary, 0.12), + // Unsets border as it will require us to override borderWidth and + // borderStyle over and over + border: undefined, + }, + "&:active": { + backgroundColor: colors.active[4], }, + "&$disabled": { + border: undefined, + borderColor: colors.disabled, + color: colors.disabled, + }, + background: colors.background.paper, + border: `2px solid ${colors.active[4]}`, + borderRadius: 4, + color: colors.active[1], + transition: "200ms", }, }, MuiSwitch: { diff --git a/src/Button/Button.stories.tsx b/stories/buttons.stories.tsx similarity index 71% rename from src/Button/Button.stories.tsx rename to stories/buttons.stories.tsx index 3b8c2506..00a84680 100644 --- a/src/Button/Button.stories.tsx +++ b/stories/buttons.stories.tsx @@ -1,19 +1,24 @@ -import { fade, Typography } from "@material-ui/core"; +import { Typography } from "@material-ui/core"; import { Meta, Story } from "@storybook/react"; import React from "react"; +import Delete from "@material-ui/icons/Delete"; -import useGuideStyles from "../../stories/guideStyles"; -import { makeStyles } from "../theme"; -import { Decorator, GuideDecorator } from "../utils/Decorator"; -import { Button } from "."; +import useGuideStyles from "./guideStyles"; +import { makeStyles } from "../src/theme"; +import { Decorator, GuideDecorator } from "../src/utils/Decorator"; +import { Button, IconButton } from "../src"; const useStyles = makeStyles((theme) => ({ - buttonGrid: { + grid: { display: "grid", gridTemplateColumns: "repeat(3, 1fr)", columnGap: theme.spacing(3), }, - buttonColumn: { + cell: { + "&:not(:last-child)": { + marginBottom: theme.spacing(3), + }, + alignItems: "center", border: "1px dashed #7B61FF", borderRadius: 4, display: "flex", @@ -23,6 +28,12 @@ const useStyles = makeStyles((theme) => ({ }, })); +const Cell: React.FC = ({ children }) => { + const classes = useStyles(); + + return
{children}
; +}; + export const Default: Story = () => { const classes = useStyles(); const guideClasses = useGuideStyles(); @@ -36,30 +47,38 @@ export const Default: Story = () => { In most cases your app will be using one of those three button types: -
+
-
+ -
+ + + + + + + + +
-
+ -
+
-
+ -
+
@@ -86,36 +105,44 @@ export const Error: Story = () => { needs additional attention: -
+
-
+ -
+ + + + + + + + +
-
+ -
+
-
+ -
+
From 60791e174f66c13f54caf4a42ee2d278b68c73d9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Wed, 13 Oct 2021 08:06:39 +0200 Subject: [PATCH 084/140] Fix disabled state --- src/IconButton/styles.ts | 2 +- src/theme/createSaleorTheme/overrides/buttons.ts | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/IconButton/styles.ts b/src/IconButton/styles.ts index 1cbca5db..6f3e1cfd 100644 --- a/src/IconButton/styles.ts +++ b/src/IconButton/styles.ts @@ -18,7 +18,7 @@ const useStyles = makeStyles( }, disabledError: { "&&&": { - borderColor: theme.palette.saleor.errorAction[5], + borderColor: "transparent", color: theme.palette.saleor.errorAction[5], }, }, diff --git a/src/theme/createSaleorTheme/overrides/buttons.ts b/src/theme/createSaleorTheme/overrides/buttons.ts index 7c444291..f6667f9a 100644 --- a/src/theme/createSaleorTheme/overrides/buttons.ts +++ b/src/theme/createSaleorTheme/overrides/buttons.ts @@ -115,7 +115,7 @@ export const buttonOverrides = ( }, "&$disabled": { border: undefined, - borderColor: colors.disabled, + borderColor: "transparent", color: colors.disabled, }, background: colors.background.paper, From 6aee03c2d9407b257766746c4bc6533304a73375 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Wed, 13 Oct 2021 09:40:20 +0200 Subject: [PATCH 085/140] Fix dark theme --- src/theme/themes.ts | 7 +++++++ 1 file changed, 7 insertions(+) diff --git a/src/theme/themes.ts b/src/theme/themes.ts index 5dd21200..c20c50cd 100644 --- a/src/theme/themes.ts +++ b/src/theme/themes.ts @@ -60,6 +60,13 @@ export const dark: SaleorThemeColors = { mid: "#FEADAD", light: "#FEDEDE", }, + errorAction: { + 1: "#B63755", + 2: "#D36474", + 3: "#E9878B", + 4: "#F7B6B2", + 5: "#FBDDD8", + }, disabled: "#CCDDDD", paperBorder: "#252728", From b1e24c774a21670672fffed2ee0c07417b63c58f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Wed, 13 Oct 2021 10:41:06 +0200 Subject: [PATCH 086/140] wip --- src/PillLink/PillLink.tsx | 5 +++++ src/PillLink/index.ts | 1 + src/PillLink/styles.ts | 11 +++++++++++ stories/buttons.stories.tsx | 5 ++++- 4 files changed, 21 insertions(+), 1 deletion(-) create mode 100644 src/PillLink/PillLink.tsx create mode 100644 src/PillLink/index.ts create mode 100644 src/PillLink/styles.ts diff --git a/src/PillLink/PillLink.tsx b/src/PillLink/PillLink.tsx new file mode 100644 index 00000000..1cade7b9 --- /dev/null +++ b/src/PillLink/PillLink.tsx @@ -0,0 +1,5 @@ +import React from "react"; + +export type PillLinkProps = HTMLButtonElement; + +export const PillLink: React.FC = { children }; diff --git a/src/PillLink/index.ts b/src/PillLink/index.ts new file mode 100644 index 00000000..f50ecc6c --- /dev/null +++ b/src/PillLink/index.ts @@ -0,0 +1 @@ +export * from "./PillLink"; diff --git a/src/PillLink/styles.ts b/src/PillLink/styles.ts new file mode 100644 index 00000000..4ff83ff2 --- /dev/null +++ b/src/PillLink/styles.ts @@ -0,0 +1,11 @@ +import { makeStyles } from "../theme"; + +const useStyles = makeStyles( + (theme) => ({ + root: {}, + }), + { + name: "PillLink", + } +); +export default useStyles; diff --git a/stories/buttons.stories.tsx b/stories/buttons.stories.tsx index 00a84680..2c4c8669 100644 --- a/stories/buttons.stories.tsx +++ b/stories/buttons.stories.tsx @@ -1,4 +1,4 @@ -import { Typography } from "@material-ui/core"; +import { PillLink, Typography } from "@material-ui/core"; import { Meta, Story } from "@storybook/react"; import React from "react"; import Delete from "@material-ui/icons/Delete"; @@ -71,6 +71,9 @@ export const Default: Story = () => { Secondary + + +
From d7640efe177e7e8fc867ab3f9e54558fa81ecbb3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Wed, 13 Oct 2021 11:28:59 +0200 Subject: [PATCH 087/140] Add clickable pill component --- src/PillLink/PillLink.tsx | 33 +++++++++++++++++++++++++++++++-- src/PillLink/styles.ts | 28 +++++++++++++++++++++++++++- src/index.tsx | 1 + stories/buttons.stories.tsx | 10 ++++++---- 4 files changed, 65 insertions(+), 7 deletions(-) diff --git a/src/PillLink/PillLink.tsx b/src/PillLink/PillLink.tsx index 1cade7b9..3eed37e3 100644 --- a/src/PillLink/PillLink.tsx +++ b/src/PillLink/PillLink.tsx @@ -1,5 +1,34 @@ +import clsx from "clsx"; import React from "react"; -export type PillLinkProps = HTMLButtonElement; +import useStyles from "./styles"; -export const PillLink: React.FC = { children }; +export interface PillLinkProps + extends React.DetailedHTMLProps< + React.AnchorHTMLAttributes, + HTMLAnchorElement + > { + state?: "default" | "hover" | "active"; +} + +export const PillLink: React.FC = ({ + children, + className, + state = "default", + ...props +}) => { + const classes = useStyles(); + + return ( + + {children} + + ); +}; +PillLink.displayName = "PillLink"; diff --git a/src/PillLink/styles.ts b/src/PillLink/styles.ts index 4ff83ff2..e72c9ea6 100644 --- a/src/PillLink/styles.ts +++ b/src/PillLink/styles.ts @@ -2,7 +2,33 @@ import { makeStyles } from "../theme"; const useStyles = makeStyles( (theme) => ({ - root: {}, + root: { + "&:hover, &$hover": { + borderColor: theme.palette.saleor.active[3], + color: theme.palette.primary.main, + }, + "&:active, &$active": { + backgroundColor: theme.palette.saleor.active[5], + borderColor: theme.palette.saleor.active[3], + color: theme.palette.primary.main, + }, + backgroundColor: "transparent", + border: `1px dashed ${theme.palette.saleor.main[3]}`, + borderRadius: 20, + cursor: "pointer", + color: theme.palette.text.primary, + userSelect: "none", + padding: "5px 8px", + transition: theme.transitions.create( + ["border-color", "background-color", "color"], + { + duration: theme.transitions.duration.shorter, + } + ), + ...theme.typography.body1, + }, + hover: {}, + active: {}, }), { name: "PillLink", diff --git a/src/index.tsx b/src/index.tsx index 163e4d9d..2d3dd88a 100644 --- a/src/index.tsx +++ b/src/index.tsx @@ -26,3 +26,4 @@ export * from "./ScrollShadow"; export * from "./tools"; export * from "./Button"; export * from "./IconButton"; +export * from "./PillLink"; diff --git a/stories/buttons.stories.tsx b/stories/buttons.stories.tsx index 2c4c8669..35f871a5 100644 --- a/stories/buttons.stories.tsx +++ b/stories/buttons.stories.tsx @@ -1,4 +1,4 @@ -import { PillLink, Typography } from "@material-ui/core"; +import { Typography } from "@material-ui/core"; import { Meta, Story } from "@storybook/react"; import React from "react"; import Delete from "@material-ui/icons/Delete"; @@ -6,7 +6,7 @@ import Delete from "@material-ui/icons/Delete"; import useGuideStyles from "./guideStyles"; import { makeStyles } from "../src/theme"; import { Decorator, GuideDecorator } from "../src/utils/Decorator"; -import { Button, IconButton } from "../src"; +import { PillLink, Button, IconButton } from "../src"; const useStyles = makeStyles((theme) => ({ grid: { @@ -44,7 +44,7 @@ export const Default: Story = () => { Buttons - In most cases your app will be using one of those three button types: + In most cases your app will be using one of those button types:
@@ -72,7 +72,9 @@ export const Default: Story = () => { - + Clickable Pill + Clickable Pill + Clickable Pill
From d69fb09bd989b767588fb04dfa0c87f7d5dd3089 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Fri, 15 Oct 2021 11:36:23 +0200 Subject: [PATCH 088/140] Fix dialog close icon --- src/DialogHeader/DialogHeader.tsx | 5 ++--- src/DialogHeader/styles.ts | 13 +++++++++++-- stories/dialogs.stories.tsx | 7 +++---- 3 files changed, 16 insertions(+), 9 deletions(-) diff --git a/src/DialogHeader/DialogHeader.tsx b/src/DialogHeader/DialogHeader.tsx index 69b2c7ea..e4f56a04 100644 --- a/src/DialogHeader/DialogHeader.tsx +++ b/src/DialogHeader/DialogHeader.tsx @@ -1,5 +1,4 @@ import DialogTitle from "@material-ui/core/DialogTitle"; -import IconButton from "@material-ui/core/IconButton"; import Typography, { TypographyProps } from "@material-ui/core/Typography"; import React from "react"; @@ -27,14 +26,14 @@ export const DialogHeader: React.FC = ({ {children} - - + ); diff --git a/src/DialogHeader/styles.ts b/src/DialogHeader/styles.ts index ce126a38..2fce3d03 100644 --- a/src/DialogHeader/styles.ts +++ b/src/DialogHeader/styles.ts @@ -1,9 +1,18 @@ import { makeStyles } from "../theme"; export const useStyles = makeStyles( - () => ({ + (theme) => ({ button: { - opacity: 0.6, + "&:hover, &:focus": { + color: theme.palette.saleor.active[1], + }, + appearance: "none", + border: "none", + background: "transparent", + color: theme.palette.saleor.main[3], + cursor: "pointer", + padding: 0, + outline: 0, }, wrapper: { alignItems: "center", diff --git a/stories/dialogs.stories.tsx b/stories/dialogs.stories.tsx index c892fad4..428d00e9 100644 --- a/stories/dialogs.stories.tsx +++ b/stories/dialogs.stories.tsx @@ -1,5 +1,4 @@ import { - Button, Dialog, DialogActions, DialogContent, @@ -12,7 +11,7 @@ import { import { Meta } from "@storybook/react"; import React from "react"; -import { DialogHeader, DialogTable, ScrollShadow } from "../src"; +import { Button, DialogHeader, DialogTable, ScrollShadow } from "../src"; import { isScrolledToBottom, isScrolledToTop, @@ -30,7 +29,7 @@ export const Info: React.FC = () => ( - @@ -69,7 +68,7 @@ export const WithOverflowTable: React.FC = () => { - From f9432556e6e797451351c61347a9b462b70f967d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Fri, 15 Oct 2021 09:17:12 +0200 Subject: [PATCH 089/140] Set page headers size to 40px --- src/theme/createSaleorTheme/createSaleorTheme.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/theme/createSaleorTheme/createSaleorTheme.ts b/src/theme/createSaleorTheme/createSaleorTheme.ts index 896175c9..e3ed7832 100644 --- a/src/theme/createSaleorTheme/createSaleorTheme.ts +++ b/src/theme/createSaleorTheme/createSaleorTheme.ts @@ -266,7 +266,7 @@ export const createTheme = (colors: SaleorThemeColors): SaleorTheme => }, fontFamily, h1: { - fontSize: "4.8rem", + fontSize: "4rem", fontWeight: 700, }, h4: { From de30f03ed62b16f4bc59a4c5b115eec62432e2dc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Fri, 15 Oct 2021 11:48:51 +0200 Subject: [PATCH 090/140] Improve layout button styles --- src/LayoutButton/LayoutButton.stories.tsx | 22 +++++++++++++++++++++- src/LayoutButton/LayoutButton.tsx | 20 +++++++++++++++++--- src/LayoutButton/styles.ts | 10 ++++++++-- 3 files changed, 46 insertions(+), 6 deletions(-) diff --git a/src/LayoutButton/LayoutButton.stories.tsx b/src/LayoutButton/LayoutButton.stories.tsx index 742c44f7..c420ef40 100644 --- a/src/LayoutButton/LayoutButton.stories.tsx +++ b/src/LayoutButton/LayoutButton.stories.tsx @@ -1,9 +1,29 @@ import { Meta, Story } from "@storybook/react"; import React from "react"; +import { makeStyles } from ".."; import { LayoutButton } from "./LayoutButton"; -export const Default: Story = () => Lorem Ipsum; +const useStyles = makeStyles((theme) => ({ + root: { + display: "flex", + alignItems: "flex-start", + flexDirection: "column", + rowGap: theme.spacing(3), + }, +})); + +export const Default: Story = () => { + const classes = useStyles(); + + return ( +
+ Lorem Ipsum + Lorem Ipsum + Lorem Ipsum +
+ ); +}; export default { title: "Layout Button", diff --git a/src/LayoutButton/LayoutButton.tsx b/src/LayoutButton/LayoutButton.tsx index 9d5dde93..8e83c3ca 100644 --- a/src/LayoutButton/LayoutButton.tsx +++ b/src/LayoutButton/LayoutButton.tsx @@ -1,16 +1,30 @@ import type { ButtonBaseProps } from "@material-ui/core/ButtonBase"; + import ButtonBase from "@material-ui/core/ButtonBase"; import clsx from "clsx"; import React from "react"; import useStyles from "./styles"; -export const LayoutButton: React.FC = React.forwardRef( - ({ className, children, ...rest }, ref) => { +export type LayoutButtonProps = + ButtonBaseProps & { + state?: "default" | "hover" | "active"; + }; + +export const LayoutButton: React.FC = React.forwardRef( + ({ className, children, state = "default", ...rest }, ref) => { const classes = useStyles(); return ( - + {children} ); diff --git a/src/LayoutButton/styles.ts b/src/LayoutButton/styles.ts index 83d3aa3d..27875557 100644 --- a/src/LayoutButton/styles.ts +++ b/src/LayoutButton/styles.ts @@ -5,10 +5,14 @@ import { makeStyles } from "../theme"; const useStyles = makeStyles( (theme) => ({ root: { - "&:hover": { + "&:hover, &$hover": { background: theme.palette.background.paper, color: theme.palette.primary.main, }, + "&:active, &$active": { + background: theme.palette.saleor.active[4], + color: theme.palette.primary.main, + }, background: fade(theme.palette.background.paper, 0.4), borderRadius: 4, color: theme.palette.text.secondary, @@ -18,8 +22,10 @@ const useStyles = makeStyles( padding: theme.spacing(0.5, 2), textAlign: "center", textTransform: "uppercase", - transition: theme.transitions.duration.standard + "ms", + transition: theme.transitions.duration.shorter + "ms", }, + hover: {}, + active: {}, }), { name: "LayoutButton" } ); From 669952c00b8d4d630e1e438463245622be920c9b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Fri, 15 Oct 2021 12:19:46 +0200 Subject: [PATCH 091/140] Update user chip component --- src/UserChipMenu/UserChipMenu.stories.tsx | 12 +++++-- src/UserChipMenu/UserChipMenu.tsx | 33 ++++++++++--------- src/UserChipMenu/styles.ts | 19 +++++------ .../createSaleorTheme/createSaleorTheme.ts | 4 +-- 4 files changed, 38 insertions(+), 30 deletions(-) diff --git a/src/UserChipMenu/UserChipMenu.stories.tsx b/src/UserChipMenu/UserChipMenu.stories.tsx index f1e9a003..00d9edce 100644 --- a/src/UserChipMenu/UserChipMenu.stories.tsx +++ b/src/UserChipMenu/UserChipMenu.stories.tsx @@ -20,9 +20,15 @@ const Options: React.FC = () => ( ); export const Default: Story = () => ( - - - + <> + + + +
+ + + + ); export const WithSubtext: Story = () => ( diff --git a/src/UserChipMenu/UserChipMenu.tsx b/src/UserChipMenu/UserChipMenu.tsx index 27895255..2800a363 100644 --- a/src/UserChipMenu/UserChipMenu.tsx +++ b/src/UserChipMenu/UserChipMenu.tsx @@ -7,6 +7,7 @@ import Paper from "@material-ui/core/Paper"; import Popper from "@material-ui/core/Popper"; import Typography from "@material-ui/core/Typography"; import React from "react"; +import { LayoutButton } from ".."; import { UserChipMenuContext } from "./context"; import useStyles from "./styles"; @@ -16,6 +17,7 @@ export interface UserChipProps { initials: string; name: string; subtext?: string; + open?: boolean; } export const UserChipMenu: React.FC = ({ @@ -24,31 +26,32 @@ export const UserChipMenu: React.FC = ({ name, subtext, children, + open, ...props }) => { const classes = useStyles({}); - const [isMenuOpened, setMenuState] = React.useState(false); - const anchor = React.useRef(null); + const [isMenuOpened, setMenuState] = React.useState(open); + const anchor = React.useRef(null); const closeMenu = () => setMenuState(false); return ( -
-
+ setMenuState(!isMenuOpened)} data-test="userMenu" + state={isMenuOpened ? "active" : "default"} + {...props} > -
- {avatar ? ( - - ) : ( -
-
{initials}
-
- )} -
+ {avatar ? ( + + ) : ( +
+
{initials}
+
+ )}
@@ -67,7 +70,7 @@ export const UserChipMenu: React.FC = ({
-
+ = ({ )} -
+ ); }; UserChipMenu.displayName = "UserChip"; diff --git a/src/UserChipMenu/styles.ts b/src/UserChipMenu/styles.ts index 74aa11c5..ddc14ea6 100644 --- a/src/UserChipMenu/styles.ts +++ b/src/UserChipMenu/styles.ts @@ -1,6 +1,6 @@ import { makeStyles } from "../theme"; -const avatarSize = 36; +const avatarSize = 32; const mobileAvatarSize = 42; const useStyles = makeStyles( @@ -16,11 +16,6 @@ const useStyles = makeStyles( }, backgroundColor: theme.palette.background.paper, }, - avatarContainer: { - padding: 2, - backgroundColor: theme.palette.background.paper, - borderRadius: "100%", - }, avatarInitials: { [theme.breakpoints.down("sm")]: { height: mobileAvatarSize, @@ -41,7 +36,9 @@ const useStyles = makeStyles( justifyContent: "center", }, label: { + letterSpacing: "0.02em", lineHeight: 1.2, + textAlign: "left", }, labelContainer: { display: "inline-flex", @@ -49,14 +46,16 @@ const useStyles = makeStyles( marginLeft: theme.spacing(1), }, popover: { - marginTop: theme.spacing(2), + marginTop: theme.spacing(0.5), zIndex: 10, }, userChip: { - borderRadius: 24, - color: theme.palette.text.primary, + "&&": { + padding: theme.spacing(0.5, 3, 0.5, 1), + }, + ...theme.typography.body1, display: "flex", - padding: theme.spacing(0.5), + textTransform: "unset", }, userMenuContainer: { cursor: "pointer", diff --git a/src/theme/createSaleorTheme/createSaleorTheme.ts b/src/theme/createSaleorTheme/createSaleorTheme.ts index e3ed7832..ff80faeb 100644 --- a/src/theme/createSaleorTheme/createSaleorTheme.ts +++ b/src/theme/createSaleorTheme/createSaleorTheme.ts @@ -140,12 +140,12 @@ export const createTheme = (colors: SaleorThemeColors): SaleorTheme => MuiMenuItem: { root: { "&$selected, &$selected:focus, &$selected:hover": { - backgroundColor: [colors.background.default, "!important"] as any, + backgroundColor: [colors.active[5], "!important"] as any, color: colors.primary, fontWeight: 700, }, "&:hover": { - backgroundColor: [colors.background.default, "!important"] as any, + backgroundColor: [colors.active[5], "!important"] as any, }, "@media(min-width: 600px)": { minHeight: 48, From 09c51e10fac3082196fde085898e7b3b51f7427e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Fri, 15 Oct 2021 12:23:25 +0200 Subject: [PATCH 092/140] wip --- src/Backlink/Backlink.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/Backlink/Backlink.tsx b/src/Backlink/Backlink.tsx index 538c068a..aecda3a0 100644 --- a/src/Backlink/Backlink.tsx +++ b/src/Backlink/Backlink.tsx @@ -1,11 +1,11 @@ import Portal from "@material-ui/core/Portal"; -import ArrowBackIcon from "@material-ui/icons/ArrowBack"; import Skeleton from "@material-ui/lab/Skeleton"; import React from "react"; import { LayoutButton } from "../LayoutButton"; import { useBacklink } from "./context"; import useStyles from "./styles"; +import { ArrowLeftIcon } from "../icons"; export interface AppHeaderProps { children: React.ReactNode; @@ -33,7 +33,7 @@ export const Backlink: React.FC = ({ onClick={onClick} data-test-id="app-header-back-button" > - + {children ? (
{children}
) : ( From 5719b474e36650f28d91d2d590226ed0d3f7706c Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Fri, 15 Oct 2021 12:43:06 +0200 Subject: [PATCH 093/140] Fix layout button styles --- src/Backlink/Backlink.tsx | 10 ++++++---- src/Backlink/styles.ts | 2 ++ src/LayoutButton/styles.ts | 2 +- src/Sidebar/ExpandButton.tsx | 4 ++-- src/UserChipMenu/UserChipMenu.tsx | 2 +- src/icons/ArrowRightIcon.tsx | 12 ++++++++++++ src/icons/index.ts | 1 + stories/icons.stories.tsx | 2 ++ 8 files changed, 27 insertions(+), 8 deletions(-) create mode 100644 src/icons/ArrowRightIcon.tsx diff --git a/src/Backlink/Backlink.tsx b/src/Backlink/Backlink.tsx index aecda3a0..98b37bce 100644 --- a/src/Backlink/Backlink.tsx +++ b/src/Backlink/Backlink.tsx @@ -2,12 +2,12 @@ import Portal from "@material-ui/core/Portal"; import Skeleton from "@material-ui/lab/Skeleton"; import React from "react"; -import { LayoutButton } from "../LayoutButton"; +import { LayoutButton, LayoutButtonProps } from "../LayoutButton"; import { useBacklink } from "./context"; import useStyles from "./styles"; -import { ArrowLeftIcon } from "../icons"; +import { ArrowRightIcon } from "../icons"; -export interface AppHeaderProps { +export interface AppHeaderProps extends LayoutButtonProps { children: React.ReactNode; disabled?: boolean; onClick: () => void; @@ -17,6 +17,7 @@ export const Backlink: React.FC = ({ children, disabled, onClick, + ...props }) => { const classes = useStyles(); const anchor = useBacklink(); @@ -32,8 +33,9 @@ export const Backlink: React.FC = ({ disabled={disabled} onClick={onClick} data-test-id="app-header-back-button" + {...props} > - + {children ? (
{children}
) : ( diff --git a/src/Backlink/styles.ts b/src/Backlink/styles.ts index f469ad8a..ed31e887 100644 --- a/src/Backlink/styles.ts +++ b/src/Backlink/styles.ts @@ -4,6 +4,7 @@ const useStyles = makeStyles( (theme) => ({ backArrow: { fontSize: 30, + transform: "rotate(180deg)", }, menuButton: { flex: "0 0 auto", @@ -24,6 +25,7 @@ const useStyles = makeStyles( width: "10rem", }, title: { + lineHeight: 1.1, flex: 1, marginLeft: theme.spacing(), }, diff --git a/src/LayoutButton/styles.ts b/src/LayoutButton/styles.ts index 27875557..ce21442d 100644 --- a/src/LayoutButton/styles.ts +++ b/src/LayoutButton/styles.ts @@ -5,7 +5,7 @@ import { makeStyles } from "../theme"; const useStyles = makeStyles( (theme) => ({ root: { - "&:hover, &$hover": { + "&:hover, &:focus-visible, &$hover": { background: theme.palette.background.paper, color: theme.palette.primary.main, }, diff --git a/src/Sidebar/ExpandButton.tsx b/src/Sidebar/ExpandButton.tsx index c4f71f63..ee95c8ce 100644 --- a/src/Sidebar/ExpandButton.tsx +++ b/src/Sidebar/ExpandButton.tsx @@ -1,7 +1,7 @@ import { ButtonProps } from "@material-ui/core/Button"; -import ArrowIcon from "@material-ui/icons/ArrowBack"; import clsx from "clsx"; import React from "react"; +import { ArrowRightIcon } from "../icons"; import { SquareButton } from "../SquareButton"; import { makeStyles } from "../theme"; @@ -32,7 +32,7 @@ export const ExpandButton: React.FC = ({ return ( - = ({ name, subtext, children, - open, + open = false, ...props }) => { const classes = useStyles({}); diff --git a/src/icons/ArrowRightIcon.tsx b/src/icons/ArrowRightIcon.tsx new file mode 100644 index 00000000..da509cfb --- /dev/null +++ b/src/icons/ArrowRightIcon.tsx @@ -0,0 +1,12 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const ArrowRightIcon = createSvgIcon( + , + "ArrowRightIcon" +); diff --git a/src/icons/index.ts b/src/icons/index.ts index 68987b21..cdb5ef4f 100644 --- a/src/icons/index.ts +++ b/src/icons/index.ts @@ -14,3 +14,4 @@ export * from "./DeleteIcon"; export * from "./ImageIcon"; export * from "./CloseIcon"; export * from "./PlusIcon"; +export * from "./ArrowRightIcon"; diff --git a/stories/icons.stories.tsx b/stories/icons.stories.tsx index faca43c4..d7bdfca6 100644 --- a/stories/icons.stories.tsx +++ b/stories/icons.stories.tsx @@ -3,6 +3,7 @@ import { storiesOf } from "@storybook/react"; import React from "react"; import { + ArrowRightIcon, CheckboxCheckedIcon, CheckboxIcon, CheckboxIndeterminateIcon, @@ -42,6 +43,7 @@ const useStyles = makeStyles((theme) => ({ })); const icons: React.FC<{ className: string }>[] = [ + ArrowRightIcon, CheckboxCheckedIcon, CheckboxIcon, CheckboxIndeterminateIcon, From f17970df50cf9fd1189c1387bcec84e2a435e839 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Fri, 15 Oct 2021 12:52:01 +0200 Subject: [PATCH 094/140] Move layout button stories to button stories --- src/LayoutButton/LayoutButton.stories.tsx | 30 ------------------- src/PillLink/styles.ts | 3 +- .../createSaleorTheme/overrides/buttons.ts | 2 +- stories/buttons.stories.tsx | 17 ++++++++--- 4 files changed, 16 insertions(+), 36 deletions(-) delete mode 100644 src/LayoutButton/LayoutButton.stories.tsx diff --git a/src/LayoutButton/LayoutButton.stories.tsx b/src/LayoutButton/LayoutButton.stories.tsx deleted file mode 100644 index c420ef40..00000000 --- a/src/LayoutButton/LayoutButton.stories.tsx +++ /dev/null @@ -1,30 +0,0 @@ -import { Meta, Story } from "@storybook/react"; -import React from "react"; -import { makeStyles } from ".."; - -import { LayoutButton } from "./LayoutButton"; - -const useStyles = makeStyles((theme) => ({ - root: { - display: "flex", - alignItems: "flex-start", - flexDirection: "column", - rowGap: theme.spacing(3), - }, -})); - -export const Default: Story = () => { - const classes = useStyles(); - - return ( -
- Lorem Ipsum - Lorem Ipsum - Lorem Ipsum -
- ); -}; - -export default { - title: "Layout Button", -} as Meta; diff --git a/src/PillLink/styles.ts b/src/PillLink/styles.ts index e72c9ea6..65c0f79e 100644 --- a/src/PillLink/styles.ts +++ b/src/PillLink/styles.ts @@ -3,7 +3,7 @@ import { makeStyles } from "../theme"; const useStyles = makeStyles( (theme) => ({ root: { - "&:hover, &$hover": { + "&:hover, &:focus-visible, &$hover": { borderColor: theme.palette.saleor.active[3], color: theme.palette.primary.main, }, @@ -17,6 +17,7 @@ const useStyles = makeStyles( borderRadius: 20, cursor: "pointer", color: theme.palette.text.primary, + outline: 0, userSelect: "none", padding: "5px 8px", transition: theme.transitions.create( diff --git a/src/theme/createSaleorTheme/overrides/buttons.ts b/src/theme/createSaleorTheme/overrides/buttons.ts index f6667f9a..fcc9153e 100644 --- a/src/theme/createSaleorTheme/overrides/buttons.ts +++ b/src/theme/createSaleorTheme/overrides/buttons.ts @@ -101,7 +101,7 @@ export const buttonOverrides = ( }, MuiIconButton: { root: { - "&:hover, &$focusVisible": { + "&:hover, &.Mui-focusVisible": { borderColor: colors.active[1], backgroundColor: colors.active[5], }, diff --git a/stories/buttons.stories.tsx b/stories/buttons.stories.tsx index 35f871a5..fa6fae83 100644 --- a/stories/buttons.stories.tsx +++ b/stories/buttons.stories.tsx @@ -6,7 +6,7 @@ import Delete from "@material-ui/icons/Delete"; import useGuideStyles from "./guideStyles"; import { makeStyles } from "../src/theme"; import { Decorator, GuideDecorator } from "../src/utils/Decorator"; -import { PillLink, Button, IconButton } from "../src"; +import { PillLink, Button, IconButton, LayoutButton } from "../src"; const useStyles = makeStyles((theme) => ({ grid: { @@ -72,9 +72,13 @@ export const Default: Story = () => { - Clickable Pill - Clickable Pill - Clickable Pill + Clickable Pill + + Clickable Pill + + + Clickable Pill +
@@ -84,6 +88,11 @@ export const Default: Story = () => { Tertiary + + Layout + Layout + Layout +
From caa3c6990efc227d85205315d00cdb856e106f05 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Fri, 15 Oct 2021 13:14:19 +0200 Subject: [PATCH 095/140] Fix expand button states --- src/Sidebar/ExpandButton.tsx | 2 +- src/SquareButton/SquareButton.tsx | 7 +++++-- 2 files changed, 6 insertions(+), 3 deletions(-) diff --git a/src/Sidebar/ExpandButton.tsx b/src/Sidebar/ExpandButton.tsx index ee95c8ce..7841a3a6 100644 --- a/src/Sidebar/ExpandButton.tsx +++ b/src/Sidebar/ExpandButton.tsx @@ -31,7 +31,7 @@ export const ExpandButton: React.FC = ({ const classes = useStyles({}); return ( - + Date: Fri, 15 Oct 2021 13:55:18 +0200 Subject: [PATCH 096/140] Fix sidebar styles --- src/Sidebar/ExpandButton.tsx | 2 +- src/Sidebar/MenuItem.tsx | 21 +++++++++++++-------- src/Sidebar/Sidebar.stories.tsx | 3 +++ src/Sidebar/Sidebar.tsx | 2 +- 4 files changed, 18 insertions(+), 10 deletions(-) diff --git a/src/Sidebar/ExpandButton.tsx b/src/Sidebar/ExpandButton.tsx index 7841a3a6..a63d59e6 100644 --- a/src/Sidebar/ExpandButton.tsx +++ b/src/Sidebar/ExpandButton.tsx @@ -34,7 +34,7 @@ export const ExpandButton: React.FC = ({ diff --git a/src/Sidebar/MenuItem.tsx b/src/Sidebar/MenuItem.tsx index 1981425e..83f51274 100644 --- a/src/Sidebar/MenuItem.tsx +++ b/src/Sidebar/MenuItem.tsx @@ -12,7 +12,7 @@ import { makeStyles } from "../theme"; import { SidebarMenuItem } from "./types"; export interface MenuItemProps { - active: boolean; + active: string; isMenuShrunk: boolean; menuItem: SidebarMenuItem; onClick: (url: string) => void; @@ -71,11 +71,12 @@ const useStyles = makeStyles( textAlign: "left", }, popper: { - margin: theme.spacing(3.5, 0, 0, -3.5), + margin: theme.spacing(3.5, 0, 0, 0), + marginLeft: "-50%", zIndex: 2, }, root: { - "&:hover, &:focus": { + "&:hover, &:focus-visible": { color: theme.palette.primary.main, outline: 0, }, @@ -93,6 +94,9 @@ const useStyles = makeStyles( }, rootActive: { "&$root": { + "&:hover, &:focus-visible": { + color: theme.palette.primary.main, + }, background: theme.palette.background.paper, color: theme.palette.text.primary, }, @@ -101,13 +105,13 @@ const useStyles = makeStyles( width: menuWidth, }, subMenuLabel: { - "&:hover, &:active": { - color: theme.palette.primary.main, - fontWeight: "bold", + "&.Mui-selected": { + background: "unset !importants", }, background: "none", border: "none", - color: theme.palette.text.secondary, + color: theme.palette.text.primary, + fontWeight: 500, height: 48, lineHeight: 36 + "px", textAlign: "left", @@ -144,7 +148,7 @@ export const MenuItem: React.FC = ({ return (
= ({ } data-test="submenu-item-label" data-test-id={subMenuItem.id} + selected={active === subMenuItem.id} {...linkProps} > {subMenuItem.label} diff --git a/src/Sidebar/Sidebar.stories.tsx b/src/Sidebar/Sidebar.stories.tsx index f57314f3..bb5d3d30 100644 --- a/src/Sidebar/Sidebar.stories.tsx +++ b/src/Sidebar/Sidebar.stories.tsx @@ -12,6 +12,9 @@ const props: SidebarProps = { }; export const Default: Story = () => ; +export const SubmenuSelected: Story = () => ( + +); export const WithToolbar: Story = () => ( tool} /> ); diff --git a/src/Sidebar/Sidebar.tsx b/src/Sidebar/Sidebar.tsx index a601339a..b00ce746 100644 --- a/src/Sidebar/Sidebar.tsx +++ b/src/Sidebar/Sidebar.tsx @@ -73,7 +73,7 @@ export const Sidebar: React.FC = ({
{menuItems.map((menuItem) => ( Date: Sat, 16 Oct 2021 10:02:34 +0200 Subject: [PATCH 097/140] Fix import --- src/SquareButton/SquareButton.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/SquareButton/SquareButton.tsx b/src/SquareButton/SquareButton.tsx index 2d89bd2b..6f72ed74 100644 --- a/src/SquareButton/SquareButton.tsx +++ b/src/SquareButton/SquareButton.tsx @@ -1,5 +1,4 @@ import ButtonBase, { ButtonBaseProps } from "@material-ui/core/ButtonBase"; -import { fade } from "@material-ui/core/styles"; import clsx from "clsx"; import React from "react"; From e72ca4257af341856c41827a79ac29e7b39c2b7a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Mon, 18 Oct 2021 09:21:36 +0200 Subject: [PATCH 098/140] Extract to type --- src/LayoutButton/LayoutButton.tsx | 3 ++- src/PillLink/PillLink.tsx | 3 ++- types/utils.d.ts | 1 + 3 files changed, 5 insertions(+), 2 deletions(-) create mode 100644 types/utils.d.ts diff --git a/src/LayoutButton/LayoutButton.tsx b/src/LayoutButton/LayoutButton.tsx index 8e83c3ca..bc99670b 100644 --- a/src/LayoutButton/LayoutButton.tsx +++ b/src/LayoutButton/LayoutButton.tsx @@ -3,12 +3,13 @@ import type { ButtonBaseProps } from "@material-ui/core/ButtonBase"; import ButtonBase from "@material-ui/core/ButtonBase"; import clsx from "clsx"; import React from "react"; +import { UserInteraction } from "../../types/utils"; import useStyles from "./styles"; export type LayoutButtonProps = ButtonBaseProps & { - state?: "default" | "hover" | "active"; + state?: UserInteraction; }; export const LayoutButton: React.FC = React.forwardRef( diff --git a/src/PillLink/PillLink.tsx b/src/PillLink/PillLink.tsx index 3eed37e3..998dc536 100644 --- a/src/PillLink/PillLink.tsx +++ b/src/PillLink/PillLink.tsx @@ -1,5 +1,6 @@ import clsx from "clsx"; import React from "react"; +import { UserInteraction } from "../../types/utils"; import useStyles from "./styles"; @@ -8,7 +9,7 @@ export interface PillLinkProps React.AnchorHTMLAttributes, HTMLAnchorElement > { - state?: "default" | "hover" | "active"; + state?: UserInteraction; } export const PillLink: React.FC = ({ diff --git a/types/utils.d.ts b/types/utils.d.ts new file mode 100644 index 00000000..1f1e291a --- /dev/null +++ b/types/utils.d.ts @@ -0,0 +1 @@ +export type UserInteraction = "default" | "hover" | "active"; From 32092296a751410b008981c14322d0b35bda0177 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Mon, 18 Oct 2021 09:23:14 +0200 Subject: [PATCH 099/140] Rename prop --- src/Sidebar/MenuItem.tsx | 8 ++++---- src/Sidebar/Sidebar.stories.tsx | 4 ++-- src/Sidebar/Sidebar.tsx | 6 +++--- 3 files changed, 9 insertions(+), 9 deletions(-) diff --git a/src/Sidebar/MenuItem.tsx b/src/Sidebar/MenuItem.tsx index 83f51274..6377b436 100644 --- a/src/Sidebar/MenuItem.tsx +++ b/src/Sidebar/MenuItem.tsx @@ -12,7 +12,7 @@ import { makeStyles } from "../theme"; import { SidebarMenuItem } from "./types"; export interface MenuItemProps { - active: string; + activeId: string; isMenuShrunk: boolean; menuItem: SidebarMenuItem; onClick: (url: string) => void; @@ -126,7 +126,7 @@ const useStyles = makeStyles( ); export const MenuItem: React.FC = ({ - active, + activeId, menuItem, isMenuShrunk, onClick, @@ -148,7 +148,7 @@ export const MenuItem: React.FC = ({ return (
= ({ } data-test="submenu-item-label" data-test-id={subMenuItem.id} - selected={active === subMenuItem.id} + selected={activeId === subMenuItem.id} {...linkProps} > {subMenuItem.label} diff --git a/src/Sidebar/Sidebar.stories.tsx b/src/Sidebar/Sidebar.stories.tsx index bb5d3d30..122405a3 100644 --- a/src/Sidebar/Sidebar.stories.tsx +++ b/src/Sidebar/Sidebar.stories.tsx @@ -6,14 +6,14 @@ import * as fixtures from "./fixtures"; import { Sidebar, SidebarProps } from "./Sidebar"; const props: SidebarProps = { - active: "menu1", + activeId: "menu1", menuItems: fixtures.menu, onMenuItemClick: () => undefined, }; export const Default: Story = () => ; export const SubmenuSelected: Story = () => ( - + ); export const WithToolbar: Story = () => ( tool} /> diff --git a/src/Sidebar/Sidebar.tsx b/src/Sidebar/Sidebar.tsx index b00ce746..9d7c3826 100644 --- a/src/Sidebar/Sidebar.tsx +++ b/src/Sidebar/Sidebar.tsx @@ -44,11 +44,11 @@ const useStyles = makeStyles( ); export interface SidebarProps extends BaseSidebarProps { - active: string; + activeId: string; } export const Sidebar: React.FC = ({ - active, + activeId, menuItems, toolbar, onMenuItemClick, @@ -73,7 +73,7 @@ export const Sidebar: React.FC = ({
{menuItems.map((menuItem) => ( Date: Mon, 18 Oct 2021 12:05:49 +0200 Subject: [PATCH 100/140] Fix sidebar hover --- src/Sidebar/MenuItem.tsx | 22 ++++++++++++++++------ 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/src/Sidebar/MenuItem.tsx b/src/Sidebar/MenuItem.tsx index 6377b436..dac0dd87 100644 --- a/src/Sidebar/MenuItem.tsx +++ b/src/Sidebar/MenuItem.tsx @@ -72,11 +72,14 @@ const useStyles = makeStyles( }, popper: { margin: theme.spacing(3.5, 0, 0, 0), - marginLeft: "-50%", + marginLeft: -menuWidth / 2, zIndex: 2, }, + popperShrink: { + marginLeft: -shrunkMenuWidth / 2, + }, root: { - "&:hover, &:focus-visible": { + "&:hover, &:focus-visible, &$rootOpen": { color: theme.palette.primary.main, outline: 0, }, @@ -94,7 +97,7 @@ const useStyles = makeStyles( }, rootActive: { "&$root": { - "&:hover, &:focus-visible": { + "&:hover, &:focus-visible, &$rootOpen": { color: theme.palette.primary.main, }, background: theme.palette.background.paper, @@ -104,9 +107,10 @@ const useStyles = makeStyles( rootExpanded: { width: menuWidth, }, + rootOpen: {}, subMenuLabel: { "&.Mui-selected": { - background: "unset !importants", + background: "unset !important", }, background: "none", border: "none", @@ -148,7 +152,11 @@ export const MenuItem: React.FC = ({ return (
subMenu.id) || []), + ].includes(activeId), [classes.rootExpanded]: !isMenuShrunk, })} ref={anchor} @@ -174,7 +182,9 @@ export const MenuItem: React.FC = ({ {menuItem.children && ( Date: Mon, 18 Oct 2021 11:30:29 +0200 Subject: [PATCH 101/140] rfix padding, remove X overflow --- src/Sidebar/Sidebar.tsx | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/src/Sidebar/Sidebar.tsx b/src/Sidebar/Sidebar.tsx index 9d7c3826..221b9c83 100644 --- a/src/Sidebar/Sidebar.tsx +++ b/src/Sidebar/Sidebar.tsx @@ -18,8 +18,9 @@ const useStyles = makeStyles( float: { height: "100vh", position: "fixed", - paddingRight: "2em", overflowY: "auto", + overflowX: "hidden", + paddingBottom: theme.spacing(3), }, logo: { margin: `36px 0 ${theme.spacing(3)} ${theme.spacing(2.5)}`, From 3e3b58ea542b423f037ee7468ed3fb6fe0479a42 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Mon, 18 Oct 2021 13:47:28 +0200 Subject: [PATCH 102/140] Add secondary icon button --- src/IconButton/IconButton.tsx | 9 +++++++++ src/IconButton/styles.ts | 12 ++++++++++++ stories/buttons.stories.tsx | 8 ++++++++ 3 files changed, 29 insertions(+) diff --git a/src/IconButton/IconButton.tsx b/src/IconButton/IconButton.tsx index f3210039..076ddc0b 100644 --- a/src/IconButton/IconButton.tsx +++ b/src/IconButton/IconButton.tsx @@ -1,3 +1,4 @@ +import ButtonBase from "@material-ui/core/ButtonBase"; import MuiIconButton, { IconButtonProps as MuiIconButtonProps, } from "@material-ui/core/IconButton"; @@ -11,15 +12,23 @@ export type IconButtonProps = Omit< "variant" > & { error?: boolean; + variant?: "primary" | "secondary"; }; export const IconButton: React.FC = ({ className, error, + variant = "primary", ...props }) => { const classes = useStyles(); + if (variant === "secondary") { + return ( + + ); + } + return ( { + + + + + + + +
From 12a4ae11d72b31abc717f96c87e5adf58bcfd2e3 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Tue, 19 Oct 2021 10:43:48 +0200 Subject: [PATCH 103/140] Add className to chip --- src/StatusChip/types.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/StatusChip/types.ts b/src/StatusChip/types.ts index 8a0fdf49..cc968346 100644 --- a/src/StatusChip/types.ts +++ b/src/StatusChip/types.ts @@ -1,6 +1,7 @@ export type StatusChipSize = "md" | "lg"; export interface StatusChipProps { children?: null; + className?: string; label: string; size?: StatusChipSize; variant: "success" | "warning" | "neutral" | "error"; From 4fab8c87d1266bffdbbddf0b8e9e81cf88ac7674 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Mon, 18 Oct 2021 16:36:43 +0200 Subject: [PATCH 104/140] Various fixes --- src/Alert/Alert.tsx | 5 ++- src/Alert/styles.ts | 3 +- src/IconButton/IconButton.tsx | 45 ++++++++++--------- src/Notification/Notification.tsx | 3 +- src/icons/DeleteIcon.tsx | 1 - src/icons/MoreIcon.tsx | 12 +++++ src/icons/index.ts | 1 + .../createSaleorTheme/createSaleorTheme.ts | 18 +++++++- .../createSaleorTheme/overrides/buttons.ts | 1 + stories/icons.stories.tsx | 2 + 10 files changed, 63 insertions(+), 28 deletions(-) create mode 100644 src/icons/MoreIcon.tsx diff --git a/src/Alert/Alert.tsx b/src/Alert/Alert.tsx index a5a98d8b..39e57e52 100644 --- a/src/Alert/Alert.tsx +++ b/src/Alert/Alert.tsx @@ -1,8 +1,8 @@ -import IconButton from "@material-ui/core/IconButton"; import Typography from "@material-ui/core/Typography"; import CloseIcon from "@material-ui/icons/Close"; import clsx from "clsx"; import React from "react"; +import { IconButton } from "../IconButton"; import { CompleteIcon, InfoIcon, NotAllowedIcon, WarningIcon } from "../icons"; import { AlertBase, AlertBaseProps, AlertVariant } from "./AlertBase"; @@ -52,8 +52,9 @@ export const Alert: React.FC = ({ {close && ( setVisible(false)} data-test="close" > diff --git a/src/Alert/styles.ts b/src/Alert/styles.ts index b0e1482f..ada2c54a 100644 --- a/src/Alert/styles.ts +++ b/src/Alert/styles.ts @@ -10,8 +10,7 @@ const useStyles = makeStyles( }, closeNoContent: { "&$close": { - right: theme.spacing(-3), - top: theme.spacing(-3), + top: 2, }, }, container: { diff --git a/src/IconButton/IconButton.tsx b/src/IconButton/IconButton.tsx index 076ddc0b..480ca2ea 100644 --- a/src/IconButton/IconButton.tsx +++ b/src/IconButton/IconButton.tsx @@ -15,29 +15,32 @@ export type IconButtonProps = Omit< variant?: "primary" | "secondary"; }; -export const IconButton: React.FC = ({ - className, - error, - variant = "primary", - ...props -}) => { - const classes = useStyles(); +export const IconButton: React.FC = React.forwardRef( + ({ className, error, variant = "primary", ...props }, ref) => { + const classes = useStyles(); + + if (variant === "secondary") { + return ( + + ); + } - if (variant === "secondary") { return ( - + ); } - - return ( - - ); -}; +); IconButton.displayName = "Button"; diff --git a/src/Notification/Notification.tsx b/src/Notification/Notification.tsx index e98d9dab..340d3897 100644 --- a/src/Notification/Notification.tsx +++ b/src/Notification/Notification.tsx @@ -1,5 +1,4 @@ import Button from "@material-ui/core/Button"; -import IconButton from "@material-ui/core/IconButton"; import SnackbarContent from "@material-ui/core/SnackbarContent"; import Typography from "@material-ui/core/Typography"; import CloseIcon from "@material-ui/icons/Close"; @@ -9,6 +8,7 @@ import React from "react"; import { CompleteIcon, InfoIcon, NotAllowedIcon, WarningIcon } from "../icons"; import useStyles from "./styles"; import type { NotificationProps, NotificationType } from "./types"; +import { IconButton } from "../IconButton"; const Icon: React.FC<{ type: NotificationType }> = ({ type }) => { switch (type) { @@ -86,6 +86,7 @@ export const Notification: React.FC = ({ aria-label="Close" color="inherit" onClick={onClose} + variant="secondary" className={clsx(classes.closeBtn, { [classes.closeBtnInfo]: type === "info", })} diff --git a/src/icons/DeleteIcon.tsx b/src/icons/DeleteIcon.tsx index 6e0a74ab..d226b57a 100644 --- a/src/icons/DeleteIcon.tsx +++ b/src/icons/DeleteIcon.tsx @@ -7,7 +7,6 @@ export const DeleteIcon = createSvgIcon( clipRule="evenodd" d="M10 1C8.89543 1 8 1.89543 8 3V4H4C3.44772 4 3 4.44772 3 5C3 5.55228 3.44772 6 4 6H20C20.5523 6 21 5.55228 21 5C21 4.44772 20.5523 4 20 4H16V3C16 1.89543 15.1046 1 14 1H10ZM14 4H10V3H14V4ZM7 9C7 8.44772 6.55228 8 6 8C5.44772 8 5 8.44772 5 9V20C5 21.6569 6.34315 23 8 23H16C17.6569 23 19 21.6569 19 20V9C19 8.44772 18.5523 8 18 8C17.4477 8 17 8.44772 17 9V20C17 20.5523 16.5523 21 16 21H8C7.44772 21 7 20.5523 7 20V9ZM10 11C10.5523 11 11 11.4477 11 12V17C11 17.5523 10.5523 18 10 18C9.44772 18 9 17.5523 9 17V12C9 11.4477 9.44772 11 10 11ZM15 12C15 11.4477 14.5523 11 14 11C13.4477 11 13 11.4477 13 12V17C13 17.5523 13.4477 18 14 18C14.5523 18 15 17.5523 15 17V12Z" fill="currentColor" - fillOpacity="0.6" />, "DeleteIcon" ); diff --git a/src/icons/MoreIcon.tsx b/src/icons/MoreIcon.tsx new file mode 100644 index 00000000..8a196c9b --- /dev/null +++ b/src/icons/MoreIcon.tsx @@ -0,0 +1,12 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const MoreIcon = createSvgIcon( + , + "MoreIcon" +); diff --git a/src/icons/index.ts b/src/icons/index.ts index cdb5ef4f..25560a15 100644 --- a/src/icons/index.ts +++ b/src/icons/index.ts @@ -15,3 +15,4 @@ export * from "./ImageIcon"; export * from "./CloseIcon"; export * from "./PlusIcon"; export * from "./ArrowRightIcon"; +export * from "./MoreIcon"; diff --git a/src/theme/createSaleorTheme/createSaleorTheme.ts b/src/theme/createSaleorTheme/createSaleorTheme.ts index ff80faeb..789b6968 100644 --- a/src/theme/createSaleorTheme/createSaleorTheme.ts +++ b/src/theme/createSaleorTheme/createSaleorTheme.ts @@ -47,6 +47,12 @@ export const createTheme = (colors: SaleorThemeColors): SaleorTheme => padding: "2.4rem 3.2rem", }, }, + MuiCheckbox: { + root: { + border: "none", + background: "none", + }, + }, MuiChip: { avatar: { fontSize: "1.2rem", @@ -120,7 +126,8 @@ export const createTheme = (colors: SaleorThemeColors): SaleorTheme => MuiListItem: { button: { "&:focus": { - backgroundColor: colors.main[1], + background: colors.active[5], + color: colors.main[1], }, }, root: { @@ -152,6 +159,12 @@ export const createTheme = (colors: SaleorThemeColors): SaleorTheme => }, }, }, + MuiRadio: { + root: { + border: "none", + borderRadius: "100%", + }, + }, MuiSelect: { root: { "&$disabled": { @@ -231,6 +244,9 @@ export const createTheme = (colors: SaleorThemeColors): SaleorTheme => MuiList: { disablePadding: true, }, + MuiRadio: { + disableRipple: true, + }, MuiSelect: { MenuProps: { anchorOrigin: { diff --git a/src/theme/createSaleorTheme/overrides/buttons.ts b/src/theme/createSaleorTheme/overrides/buttons.ts index fcc9153e..4815bd64 100644 --- a/src/theme/createSaleorTheme/overrides/buttons.ts +++ b/src/theme/createSaleorTheme/overrides/buttons.ts @@ -122,6 +122,7 @@ export const buttonOverrides = ( border: `2px solid ${colors.active[4]}`, borderRadius: 4, color: colors.active[1], + padding: 10, transition: "200ms", }, }, diff --git a/stories/icons.stories.tsx b/stories/icons.stories.tsx index d7bdfca6..041c7b7e 100644 --- a/stories/icons.stories.tsx +++ b/stories/icons.stories.tsx @@ -18,6 +18,7 @@ import { NotAllowedInvertedIcon, PlusIcon, WarningIcon, + MoreIcon, } from "../src/icons"; import { makeStyles } from "../src/theme"; import { Decorator, GuideDecorator } from "../src/utils/Decorator"; @@ -58,6 +59,7 @@ const icons: React.FC<{ className: string }>[] = [ NotAllowedInvertedIcon, PlusIcon, WarningIcon, + MoreIcon, ]; const Default: React.FC = () => { From 3e98bac7bda652ccb04725cbfc08362b142ab3a1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Wed, 20 Oct 2021 11:56:48 +0200 Subject: [PATCH 105/140] Fix input error state to have outline --- src/theme/createSaleorTheme/overrides/inputs.ts | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/src/theme/createSaleorTheme/overrides/inputs.ts b/src/theme/createSaleorTheme/overrides/inputs.ts index 2e5ece9b..98a93352 100644 --- a/src/theme/createSaleorTheme/overrides/inputs.ts +++ b/src/theme/createSaleorTheme/overrides/inputs.ts @@ -1,5 +1,9 @@ import { ThemeOptions } from "@material-ui/core/styles"; +function getInputBoxShadow(color: string) { + return `0 0 0 3px ${color}`; +} + import { SaleorThemeColors } from "../types"; export const inputOverrides = ( @@ -118,23 +122,24 @@ export const inputOverrides = ( "&$error": { "&$focused": { "&:hover": { - boxShadow: `0px 0px 0px 3px ${colors.fail.mid}`, + boxShadow: getInputBoxShadow(colors.fail.mid), }, "& fieldset": { borderColor: colors.fail.dark, }, - boxShadow: `0px 0px 0px 3px ${colors.fail.mid}`, + boxShadow: getInputBoxShadow(colors.fail.mid), }, "&:hover": { "&& fieldset": { borderColor: colors.fail.dark, }, - boxShadow: `0px 0px 0px 3px ${colors.fail.light}`, + boxShadow: getInputBoxShadow(colors.fail.light), }, + boxShadow: getInputBoxShadow(colors.fail.light), }, "&$focused": { "&, &:hover": { - boxShadow: `0px 0px 0px 3px ${colors.active[3]}`, + boxShadow: getInputBoxShadow(colors.active[3]), }, "& input": { "& fieldset": { @@ -147,7 +152,7 @@ export const inputOverrides = ( }, }, "&:hover": { - boxShadow: `0px 0px 0px 3px ${colors.active[5]}`, + boxShadow: getInputBoxShadow(colors.active[5]), "& input": { color: colors.font.default, }, From fe8f50fc28460ec914a8d8ca1e310529752f55ef Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Wed, 20 Oct 2021 12:08:40 +0200 Subject: [PATCH 106/140] Add outline to icon button --- src/IconButton/IconButton.tsx | 7 +++++-- src/IconButton/styles.ts | 15 ++++++++++++++- stories/buttons.stories.tsx | 21 +++++++++++++++++---- 3 files changed, 36 insertions(+), 7 deletions(-) diff --git a/src/IconButton/IconButton.tsx b/src/IconButton/IconButton.tsx index 480ca2ea..ce91dedd 100644 --- a/src/IconButton/IconButton.tsx +++ b/src/IconButton/IconButton.tsx @@ -12,18 +12,21 @@ export type IconButtonProps = Omit< "variant" > & { error?: boolean; + hoverOutline?: boolean; variant?: "primary" | "secondary"; }; export const IconButton: React.FC = React.forwardRef( - ({ className, error, variant = "primary", ...props }, ref) => { + ({ className, error, hoverOutline, variant = "primary", ...props }, ref) => { const classes = useStyles(); if (variant === "secondary") { return ( diff --git a/src/IconButton/styles.ts b/src/IconButton/styles.ts index e8d1f46b..d217e313 100644 --- a/src/IconButton/styles.ts +++ b/src/IconButton/styles.ts @@ -29,11 +29,24 @@ const useStyles = makeStyles( "&:disabled": { color: theme.palette.saleor.disabled, }, + background: "transparent", + borderRadius: 4, color: theme.palette.saleor.main[3], - transition: theme.transitions.create("color", { + padding: theme.spacing(0.5), + transition: theme.transitions.create(["color", "background"], { duration: theme.transitions.duration.shorter, }), }, + hoverOutline: { + "&$secondary": { + "&:hover,&:focus-visible": { + background: theme.palette.saleor.active[5], + }, + "&:active": { + background: theme.palette.saleor.active[4], + }, + }, + }, }), { name: "IconButton", diff --git a/stories/buttons.stories.tsx b/stories/buttons.stories.tsx index 84fbe80b..a3e5bfc3 100644 --- a/stories/buttons.stories.tsx +++ b/stories/buttons.stories.tsx @@ -1,4 +1,4 @@ -import { Typography } from "@material-ui/core"; +import { FormControlLabel, Typography } from "@material-ui/core"; import { Meta, Story } from "@storybook/react"; import React from "react"; import Delete from "@material-ui/icons/Delete"; @@ -64,9 +64,22 @@ export const Default: Story = () => { - - - + + + + } + label="default" + /> + + + + } + label="outlined" + /> From 475f0f73d7c65a2ee54343b18a321e4de02279e1 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Wed, 20 Oct 2021 12:24:56 +0200 Subject: [PATCH 107/140] Increase clickable area --- src/IconButton/styles.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/IconButton/styles.ts b/src/IconButton/styles.ts index d217e313..1259d19b 100644 --- a/src/IconButton/styles.ts +++ b/src/IconButton/styles.ts @@ -32,7 +32,7 @@ const useStyles = makeStyles( background: "transparent", borderRadius: 4, color: theme.palette.saleor.main[3], - padding: theme.spacing(0.5), + padding: theme.spacing(1), transition: theme.transitions.create(["color", "background"], { duration: theme.transitions.duration.shorter, }), From f4419ebf7042c24ea19be482dfd1bed4e7424e61 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Wed, 20 Oct 2021 12:49:13 +0200 Subject: [PATCH 108/140] Fix confirm button --- src/ConfirmButton/ConfirmButton.stories.tsx | 10 +++++----- src/ConfirmButton/ConfirmButton.tsx | 17 ++++------------- 2 files changed, 9 insertions(+), 18 deletions(-) diff --git a/src/ConfirmButton/ConfirmButton.stories.tsx b/src/ConfirmButton/ConfirmButton.stories.tsx index d16e53f5..d54f4284 100644 --- a/src/ConfirmButton/ConfirmButton.stories.tsx +++ b/src/ConfirmButton/ConfirmButton.stories.tsx @@ -49,7 +49,7 @@ export const Interactive: Story = () => { labels={labels} transitionState={transitionState} onClick={handleClick} - variant="outlined" + variant="secondary" /> ); @@ -61,7 +61,7 @@ export const Default: Story = () => ( ); @@ -76,7 +76,7 @@ export const Loading: Story = () => ( labels={labels} transitionState="loading" noTransition={true} - variant="outlined" + variant="secondary" /> ); @@ -91,7 +91,7 @@ export const Error: Story = () => ( labels={labels} transitionState="error" noTransition={true} - variant="outlined" + variant="secondary" /> ); @@ -106,7 +106,7 @@ export const Success: Story = () => ( labels={labels} transitionState="success" noTransition={true} - variant="outlined" + variant="secondary" /> ); diff --git a/src/ConfirmButton/ConfirmButton.tsx b/src/ConfirmButton/ConfirmButton.tsx index 252138fc..012d3387 100644 --- a/src/ConfirmButton/ConfirmButton.tsx +++ b/src/ConfirmButton/ConfirmButton.tsx @@ -1,4 +1,4 @@ -import Button, { ButtonProps } from "@material-ui/core/Button"; +import { Button, ButtonProps } from "../Button"; import CircularProgress from "@material-ui/core/CircularProgress"; import CheckIcon from "@material-ui/icons/Check"; import clsx from "clsx"; @@ -23,12 +23,11 @@ export interface ConfirmButtonProps extends Omit { export const ConfirmButton: React.FC = ({ children, - className, disabled, labels, noTransition, transitionState, - variant = "contained", + variant = "primary", onClick, onTransitionToDefault, ...props @@ -74,17 +73,9 @@ export const ConfirmButton: React.FC = ({ return ( @@ -127,7 +100,6 @@ export const Default: Story = () => { }; export const Error: Story = () => { - const classes = useStyles(); const guideClasses = useGuideStyles(); return ( @@ -140,7 +112,7 @@ export const Error: Story = () => { needs additional attention: -
+
); }; +export const Error: Story = () => ; export default { title: "Buttons", diff --git a/stories/controls.stories.tsx b/stories/controls.stories.tsx index 1f715cc0..c668e920 100644 --- a/stories/controls.stories.tsx +++ b/stories/controls.stories.tsx @@ -12,7 +12,7 @@ import { Decorator, GuideDecorator } from "../src/utils/Decorator"; import useGuideStyles from "./guideStyles"; import { Cell } from "./utils/Cell"; -export const Default: Story = () => { +const DefaultStory: React.FC = () => { const guideClasses = useGuideStyles(); const [radioValue, setRadioValue] = React.useState("opt1"); @@ -22,7 +22,7 @@ export const Default: Story = () => { Controls - In most cases your app will be using one of those button types: + These components can be used in forms or switch application state:
@@ -62,15 +62,10 @@ export const Default: Story = () => {
- - - They are designed to perform most of the actions that you will need to - add. These buttons can be placed in various places, most notably cards, - dialogs and forms. -
); }; +export const Default: Story = () => ; export default { title: "Controls", diff --git a/stories/guideStyles.ts b/stories/guideStyles.ts index 09385083..6538e5df 100644 --- a/stories/guideStyles.ts +++ b/stories/guideStyles.ts @@ -5,7 +5,7 @@ import { makeStyles } from "../src/theme"; const useStyles = makeStyles( (theme) => ({ code: { - background: fade(theme.palette.secondary.light, 0.1), + background: theme.palette.saleor.active[5], display: "inline", fontFamily: "monospace", padding: "2px 4px", diff --git a/stories/tables.stories.tsx b/stories/tables.stories.tsx index 0a298977..32f96df3 100644 --- a/stories/tables.stories.tsx +++ b/stories/tables.stories.tsx @@ -1,4 +1,5 @@ import { + Checkbox, TableBody, TableCell, TableFooter, @@ -10,14 +11,25 @@ import Skeleton from "@material-ui/lab/Skeleton"; import { storiesOf } from "@storybook/react"; import React from "react"; -import { ResponsiveTable, TablePagination } from "../src"; +import { + DeleteIcon, + IconButton, + ResponsiveTable, + TablePagination, +} from "../src"; import { makeStyles } from "../src/theme"; import { Decorator, GuideDecorator } from "../src/utils/Decorator"; import useGuideStyles from "./guideStyles"; const useStyles = makeStyles((theme) => ({ colCalories: { - width: 180, + width: 200, + }, + colCheckbox: { + width: 72, + }, + colAction: { + width: 120, }, })); @@ -57,10 +69,28 @@ const Default: React.FC = () => { const guideClasses = useGuideStyles(); const [page, setPage] = React.useState(0); const [rowsPerPage, setRowsPerPage] = React.useState(2); + const [selected, setSelected] = React.useState([data[0].name, data[2].name]); const hasNextPage = (page + 1) * rowsPerPage < data.length; const hasPreviousPage = page > 0; + const isRowSelected = (name: string) => + !!selected.find((selected) => selected === name); + const toggleRow = (name: string) => { + if (isRowSelected(name)) { + setSelected(selected.filter((row) => row !== name)); + } else { + setSelected([...selected, name]); + } + }; + const toggleAll = () => { + if (data.length === selected.length) { + setSelected([]); + } else { + setSelected(data.map((row) => row.name)); + } + }; + return (
@@ -140,6 +170,63 @@ const Default: React.FC = () => { + + + We can also embed ability to select rows and add actions to them: + + + + + + + + + + {selected.length > 0 ? ( + + + + +   + + + + + + + ) : ( + + + Name + Calories (per 100g) + + + )} + + + {data.map((dataRow) => ( + + + toggleRow(dataRow.name)} + /> + + {dataRow.name} + {`${dataRow.calories} kcal`} + + + + + + + ))} + +
); }; From f40c680edbbceababb524da4d73d795d67b819e6 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Micha=C5=82=20Dro=C5=84?= Date: Mon, 22 Nov 2021 16:00:56 +0100 Subject: [PATCH 118/140] Add edit & search icons (#82) (#85) --- src/icons/index.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/icons/index.ts b/src/icons/index.ts index 502c847b..8a45884e 100644 --- a/src/icons/index.ts +++ b/src/icons/index.ts @@ -18,3 +18,4 @@ export * from "./ArrowRightIcon"; export * from "./MoreIcon"; export * from "./RadioIcon"; export * from "./RadioCheckedIcon"; +export * from "./SearchIcon"; From bb823b9c8daebbc054ad10ca2012b23f831434f5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Mon, 22 Nov 2021 16:04:39 +0100 Subject: [PATCH 119/140] 0.3.0-a.2 --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 7306ca8a..d4e0758e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@saleor/macaw-ui", - "version": "0.3.0-a.1", + "version": "0.3.0-a.2", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index db31469d..5f863ca0 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "0.3.0-a.1", + "version": "0.3.0-a.2", "license": "CC-BY-4.0", "main": "dist/index.js", "homepage": "https://macaw-ui.vercel.app/", From eb318c30329a140919e52c66a93c2ab29fb5c9bc Mon Sep 17 00:00:00 2001 From: Wojciech Mista Date: Thu, 25 Nov 2021 11:30:18 +0100 Subject: [PATCH 120/140] Make Alert title optional (#86) (#89) * Make title optional * Without title story * Fix link --- src/Alert/Alert.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/src/Alert/Alert.tsx b/src/Alert/Alert.tsx index 39e57e52..b0523364 100644 --- a/src/Alert/Alert.tsx +++ b/src/Alert/Alert.tsx @@ -10,7 +10,6 @@ import useStyles from "./styles"; export interface AlertProps extends AlertBaseProps { close?: boolean; - variant: AlertVariant; title?: string; } const Icon: React.FC<{ variant: AlertVariant }> = ({ variant }) => { From 08c2fa664fa6a1500c2d5bd411ce0a4c8dc2c832 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Thu, 25 Nov 2021 12:36:09 +0100 Subject: [PATCH 121/140] Add text color button variants (#84) * Add text color button variants * Indicate variant in button label --- src/Button/Button.tsx | 22 ++++-- .../createSaleorTheme/overrides/buttons.ts | 23 +++++- src/theme/createSaleorTheme/types.ts | 2 +- src/theme/themes.ts | 2 + stories/buttons.stories.tsx | 70 +++++++++++-------- 5 files changed, 82 insertions(+), 37 deletions(-) diff --git a/src/Button/Button.tsx b/src/Button/Button.tsx index fe3a3840..c91d79a1 100644 --- a/src/Button/Button.tsx +++ b/src/Button/Button.tsx @@ -9,14 +9,18 @@ import React from "react"; import useStyles from "./styles"; export type ButtonVariant = "primary" | "secondary" | "tertiary"; +// Aliasing "default" to "text" because "default" isn't actually default +export type ButtonColor = "primary" | "secondary" | "text"; interface ButtonInnerProps { + color?: ButtonColor; error?: boolean; variant?: ButtonVariant; } export interface ButtonTypeMap

{ - props: Omit["props"], "variant"> & ButtonInnerProps; + props: Omit["props"], "variant" | "color"> & + ButtonInnerProps; defaultComponent: D; classKey: never; } @@ -27,19 +31,25 @@ export type ButtonProps = Omit< > & ButtonInnerProps; -function getButtonProps(variant: ButtonVariant): Partial { +function getButtonProps( + colorProp: ButtonColor, + variant: ButtonVariant +): Partial { + const color = colorProp === "text" ? "default" : colorProp; + switch (variant) { case "primary": - return { variant: "contained", color: "primary" }; + return { variant: "contained", color }; case "secondary": - return { variant: "outlined", color: "primary" }; + return { variant: "outlined", color }; default: - return { variant: "text", color: "primary" }; + return { variant: "text", color }; } } const _Button: React.FC = ({ className, + color = "primary", error, variant = "tertiary", ...props @@ -61,7 +71,7 @@ const _Button: React.FC = ({ [classes.tertiaryDisabled]: variant === "tertiary" && error && props.disabled, })} - {...getButtonProps(variant)} + {...getButtonProps(color, variant)} disableRipple {...props} /> diff --git a/src/theme/createSaleorTheme/overrides/buttons.ts b/src/theme/createSaleorTheme/overrides/buttons.ts index 0d33f984..9c32f6a2 100644 --- a/src/theme/createSaleorTheme/overrides/buttons.ts +++ b/src/theme/createSaleorTheme/overrides/buttons.ts @@ -57,6 +57,12 @@ export const buttonOverrides = ( "&&$disabled": { color: colors.disabled, }, + "&:hover, &$focusVisible": { + background: colors.main[5], + }, + "&:active": { + background: colors.main[4], + }, }, textPrimary: { "&:hover, &$focusVisible": { @@ -75,8 +81,22 @@ export const buttonOverrides = ( borderColor: colors.disabled, color: colors.disabled, }, + "&:hover": { + // Unsets border as it will require us to override borderWidth and + // borderStyle over and over + border: undefined, + }, + "&:hover, &$focusVisible": { + borderColor: colors.main[1], + backgroundColor: colors.main[5], + }, + "&:active": { + backgroundColor: colors.main[4], + }, background: colors.background.paper, - border: `2px solid ${colors.active[4]}`, + borderColor: colors.main[4], + borderWidth: 2, + borderStyle: "solid", // 2px smaller because of border padding: "10px 12px", }, @@ -94,6 +114,7 @@ export const buttonOverrides = ( backgroundColor: colors.active[4], }, border: undefined, + borderColor: colors.active[4], }, }, MuiIconButton: { diff --git a/src/theme/createSaleorTheme/types.ts b/src/theme/createSaleorTheme/types.ts index 65154fee..50fd1440 100644 --- a/src/theme/createSaleorTheme/types.ts +++ b/src/theme/createSaleorTheme/types.ts @@ -31,7 +31,7 @@ export type SaleorThemeColors = Record< alert: AlertColors; theme: ThemeType; fail: Record<"dark" | "mid" | "light", string>; - main: Record<1 | 2 | 3 | 4, string>; + main: Record<1 | 2 | 3 | 4 | 5, string>; active: Record<1 | 2 | 3 | 4 | 5, string>; errorAction: Record<1 | 2 | 3 | 4 | 5, string>; }; diff --git a/src/theme/themes.ts b/src/theme/themes.ts index c20c50cd..94bf1eac 100644 --- a/src/theme/themes.ts +++ b/src/theme/themes.ts @@ -54,6 +54,7 @@ export const dark: SaleorThemeColors = { 2: "rgba(252, 252, 252, 0.8)", 3: "rgba(252, 252, 252, 0.6)", 4: "rgba(252, 252, 252, 0.4)", + 5: "rgba(252, 252, 252, 0.1)", }, fail: { dark: "#B65757", @@ -127,6 +128,7 @@ export const light: SaleorThemeColors = { 2: "rgba(40, 35, 74, 0.8)", 3: "rgba(40, 35, 74, 0.6)", 4: "rgba(40, 35, 74, 0.4)", + 5: "rgba(40, 35, 74, 0.1)", }, fail: { dark: "#B65757", diff --git a/stories/buttons.stories.tsx b/stories/buttons.stories.tsx index 2a708d30..df555c29 100644 --- a/stories/buttons.stories.tsx +++ b/stories/buttons.stories.tsx @@ -38,25 +38,13 @@ const DefaultStory: React.FC = () => { - - - - } - label="default" - /> - - - - } - label="outlined" - /> - - - + Clickable Pill + + Clickable Pill + + + Clickable Pill +

@@ -65,15 +53,17 @@ const DefaultStory: React.FC = () => { + + - Clickable Pill - - Clickable Pill - - - Clickable Pill - + Layout + Layout + Layout
@@ -82,11 +72,33 @@ const DefaultStory: React.FC = () => { + + - Layout - Layout - Layout + + + + } + label="default" + /> + + + + } + label="outlined" + /> + + +
From 169176357b93b038bb14bbbe1d094748ecd43dbf Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Thu, 25 Nov 2021 12:36:33 +0100 Subject: [PATCH 122/140] Add textarea styles (#88) --- src/theme/createSaleorTheme/overrides/inputs.ts | 7 ++++++- stories/inputs.stories.tsx | 9 +++++++++ 2 files changed, 15 insertions(+), 1 deletion(-) diff --git a/src/theme/createSaleorTheme/overrides/inputs.ts b/src/theme/createSaleorTheme/overrides/inputs.ts index 98a93352..17500489 100644 --- a/src/theme/createSaleorTheme/overrides/inputs.ts +++ b/src/theme/createSaleorTheme/overrides/inputs.ts @@ -102,6 +102,11 @@ export const inputOverrides = ( padding: "10px 0", position: "relative", }, + multiline: { + "&$disabled": { + background: colors.background.default, + }, + }, root: { "& fieldset": { top: 0, @@ -113,7 +118,7 @@ export const inputOverrides = ( "& fieldset": { borderColor: `${colors.disabled} !important`, }, - "& input": { + "& input, & textarea": { backgroundColor: colors.background.default, color: colors.main[3], }, diff --git a/stories/inputs.stories.tsx b/stories/inputs.stories.tsx index 70a9e9cc..92fb1d24 100644 --- a/stories/inputs.stories.tsx +++ b/stories/inputs.stories.tsx @@ -37,9 +37,11 @@ const Default: React.FC = () => {
+ + { value="Filled Text" helperText="Lorem ipsum dolor site amet consectetur adipiscing elit" /> +
); From c899e329b1b5e9f8143586984c16cd8cc1e66f6f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Thu, 25 Nov 2021 14:11:47 +0100 Subject: [PATCH 123/140] Update savebar buttons (#90) --- src/ActionBar/styles.ts | 1 + src/Savebar/Savebar.tsx | 10 +++++----- src/Savebar/styles.ts | 15 +-------------- 3 files changed, 7 insertions(+), 19 deletions(-) diff --git a/src/ActionBar/styles.ts b/src/ActionBar/styles.ts index d9294dc7..6adfa62f 100644 --- a/src/ActionBar/styles.ts +++ b/src/ActionBar/styles.ts @@ -7,6 +7,7 @@ const useStyles = makeStyles( paddingBottom: theme.spacing(2), }, display: "flex", + gap: theme.spacing(2), paddingBottom: theme.spacing(2), paddingTop: theme.spacing(2), [theme.breakpoints.down("sm")]: { diff --git a/src/Savebar/Savebar.tsx b/src/Savebar/Savebar.tsx index d29ac0b4..7a08a519 100644 --- a/src/Savebar/Savebar.tsx +++ b/src/Savebar/Savebar.tsx @@ -1,5 +1,5 @@ -import Button from "@material-ui/core/Button"; import React from "react"; +import { Button } from ".."; import { useActionBar } from "../ActionBar"; import { ActionBar } from "../ActionBar/ActionBar"; @@ -43,9 +43,9 @@ export const Savebar: React.FC = ({ {!!onDelete && ( + +
@@ -83,22 +93,27 @@ const DefaultStory: React.FC = () => { - + } - label="default" + label="Delete from list" /> - + + } - label="outlined" + label="Expand" + /> + + + + } + label="Disabled" /> - - -
@@ -138,10 +153,10 @@ const ErrorStory: React.FC = () => { - + - + diff --git a/stories/guideStyles.ts b/stories/guideStyles.ts index 6538e5df..26bc5493 100644 --- a/stories/guideStyles.ts +++ b/stories/guideStyles.ts @@ -1,5 +1,3 @@ -import { fade } from "@material-ui/core/styles"; - import { makeStyles } from "../src/theme"; const useStyles = makeStyles( From 37d5b71ff885a1202e0f8c32583094c200a06d2e Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Wed, 8 Dec 2021 15:15:21 +0100 Subject: [PATCH 131/140] Add icons (#95) * Add icon code generator * Add script to build icons index file * Add command to build icons/index.ts * Add icons * Update story design * Add expand icon * Remove logging --- _templates/icon/new/hello.ejs.t | 13 + package-lock.json | 479 +++++++++++++++++++++++++++ package.json | 5 +- scripts/icons.js | 17 + src/icons/AddEnvironmentIcon.tsx | 12 + src/icons/AppsIcon.tsx | 12 + src/icons/AttributesLargeIcon.tsx | 15 + src/icons/BackspaceIcon.tsx | 12 + src/icons/BillingIcon.tsx | 12 + src/icons/CalendarIcon.tsx | 12 + src/icons/ChevronIcon.tsx | 14 + src/icons/Close2Icon.tsx | 12 + src/icons/ColumnsIcon.tsx | 12 + src/icons/CommentSmallIcon.tsx | 15 + src/icons/CompleteIcon.tsx | 2 +- src/icons/CopyIcon.tsx | 12 + src/icons/CustomersIcon.tsx | 12 + src/icons/CustomersLargeIcon.tsx | 26 ++ src/icons/DashboardIcon.tsx | 12 + src/icons/DeveloperIcon.tsx | 38 +++ src/icons/DigitalLargeIcon.tsx | 15 + src/icons/DigitalSmallIcon.tsx | 15 + src/icons/DiscountsIcon.tsx | 20 ++ src/icons/DiscountsLargeIcon.tsx | 26 ++ src/icons/DownloadIcon.tsx | 15 + src/icons/DragIcon.tsx | 12 + src/icons/EditSmallIcon.tsx | 15 + src/icons/EnvironmentIcon.tsx | 12 + src/icons/ExpandIcon.tsx | 22 ++ src/icons/EyeIcon.tsx | 12 + src/icons/FilteringLargeIcon.tsx | 15 + src/icons/GiftCardLargeIcon.tsx | 15 + src/icons/HelpIcon.tsx | 12 + src/icons/InfoIcon.tsx | 6 +- src/icons/LinkIcon.tsx | 12 + src/icons/Logo.tsx | 10 +- src/icons/MailIcon.tsx | 16 + src/icons/MinusIcon.tsx | 12 + src/icons/MoreHorizontalIcon.tsx | 12 + src/icons/NavigationIcon.tsx | 26 ++ src/icons/NavigationLargeIcon.tsx | 15 + src/icons/NextIcon.tsx | 14 + src/icons/NoConnectionIcon.tsx | 25 ++ src/icons/NotAllowedIcon.tsx | 2 +- src/icons/NotAllowedInvertedIcon.tsx | 2 +- src/icons/NotesLargeIcon.tsx | 38 +++ src/icons/NotificationsIcon.tsx | 12 + src/icons/OmnichannelLargeIcon.tsx | 15 + src/icons/OrdersIcon.tsx | 12 + src/icons/PagesIcon.tsx | 12 + src/icons/PermissionLargeIcon.tsx | 15 + src/icons/PhotoIcon.tsx | 12 + src/icons/PreviousIcon.tsx | 14 + src/icons/PrinterIcon.tsx | 15 + src/icons/PrivacyIcon.tsx | 15 + src/icons/ProductIcon.tsx | 12 + src/icons/ProductLargeIcon.tsx | 16 + src/icons/RadioIcon.tsx | 4 +- src/icons/RefreshIcon.tsx | 14 + src/icons/ReplyIcon.tsx | 12 + src/icons/SearchLargeIcon.tsx | 18 + src/icons/SettingsIcon.tsx | 15 + src/icons/SettingsLargeIcon.tsx | 23 ++ src/icons/ShippingLargeIcon.tsx | 15 + src/icons/SnapshotsIcon.tsx | 12 + src/icons/StaffMembersLargeIcon.tsx | 15 + src/icons/TaxesLargeIcon.tsx | 15 + src/icons/TimeIcon.tsx | 12 + src/icons/TokenLargeIcon.tsx | 17 + src/icons/TransferIcon.tsx | 22 ++ src/icons/TranslationIcon.tsx | 12 + src/icons/WarehouseLargeIcon.tsx | 15 + src/icons/WarningIcon.tsx | 2 +- src/icons/WebsiteIcon.tsx | 22 ++ src/icons/WifiIcon.tsx | 23 ++ src/icons/WifiLargeIcon.tsx | 33 ++ src/icons/index.ts | 89 ++++- stories/icons.stories.tsx | 82 ++++- 78 files changed, 1726 insertions(+), 36 deletions(-) create mode 100644 _templates/icon/new/hello.ejs.t create mode 100644 scripts/icons.js create mode 100644 src/icons/AddEnvironmentIcon.tsx create mode 100644 src/icons/AppsIcon.tsx create mode 100644 src/icons/AttributesLargeIcon.tsx create mode 100644 src/icons/BackspaceIcon.tsx create mode 100644 src/icons/BillingIcon.tsx create mode 100644 src/icons/CalendarIcon.tsx create mode 100644 src/icons/ChevronIcon.tsx create mode 100644 src/icons/Close2Icon.tsx create mode 100644 src/icons/ColumnsIcon.tsx create mode 100644 src/icons/CommentSmallIcon.tsx create mode 100644 src/icons/CopyIcon.tsx create mode 100644 src/icons/CustomersIcon.tsx create mode 100644 src/icons/CustomersLargeIcon.tsx create mode 100644 src/icons/DashboardIcon.tsx create mode 100644 src/icons/DeveloperIcon.tsx create mode 100644 src/icons/DigitalLargeIcon.tsx create mode 100644 src/icons/DigitalSmallIcon.tsx create mode 100644 src/icons/DiscountsIcon.tsx create mode 100644 src/icons/DiscountsLargeIcon.tsx create mode 100644 src/icons/DownloadIcon.tsx create mode 100644 src/icons/DragIcon.tsx create mode 100644 src/icons/EditSmallIcon.tsx create mode 100644 src/icons/EnvironmentIcon.tsx create mode 100644 src/icons/ExpandIcon.tsx create mode 100644 src/icons/EyeIcon.tsx create mode 100644 src/icons/FilteringLargeIcon.tsx create mode 100644 src/icons/GiftCardLargeIcon.tsx create mode 100644 src/icons/HelpIcon.tsx create mode 100644 src/icons/LinkIcon.tsx create mode 100644 src/icons/MailIcon.tsx create mode 100644 src/icons/MinusIcon.tsx create mode 100644 src/icons/MoreHorizontalIcon.tsx create mode 100644 src/icons/NavigationIcon.tsx create mode 100644 src/icons/NavigationLargeIcon.tsx create mode 100644 src/icons/NextIcon.tsx create mode 100644 src/icons/NoConnectionIcon.tsx create mode 100644 src/icons/NotesLargeIcon.tsx create mode 100644 src/icons/NotificationsIcon.tsx create mode 100644 src/icons/OmnichannelLargeIcon.tsx create mode 100644 src/icons/OrdersIcon.tsx create mode 100644 src/icons/PagesIcon.tsx create mode 100644 src/icons/PermissionLargeIcon.tsx create mode 100644 src/icons/PhotoIcon.tsx create mode 100644 src/icons/PreviousIcon.tsx create mode 100644 src/icons/PrinterIcon.tsx create mode 100644 src/icons/PrivacyIcon.tsx create mode 100644 src/icons/ProductIcon.tsx create mode 100644 src/icons/ProductLargeIcon.tsx create mode 100644 src/icons/RefreshIcon.tsx create mode 100644 src/icons/ReplyIcon.tsx create mode 100644 src/icons/SearchLargeIcon.tsx create mode 100644 src/icons/SettingsIcon.tsx create mode 100644 src/icons/SettingsLargeIcon.tsx create mode 100644 src/icons/ShippingLargeIcon.tsx create mode 100644 src/icons/SnapshotsIcon.tsx create mode 100644 src/icons/StaffMembersLargeIcon.tsx create mode 100644 src/icons/TaxesLargeIcon.tsx create mode 100644 src/icons/TimeIcon.tsx create mode 100644 src/icons/TokenLargeIcon.tsx create mode 100644 src/icons/TransferIcon.tsx create mode 100644 src/icons/TranslationIcon.tsx create mode 100644 src/icons/WarehouseLargeIcon.tsx create mode 100644 src/icons/WebsiteIcon.tsx create mode 100644 src/icons/WifiIcon.tsx create mode 100644 src/icons/WifiLargeIcon.tsx diff --git a/_templates/icon/new/hello.ejs.t b/_templates/icon/new/hello.ejs.t new file mode 100644 index 00000000..6e217ca3 --- /dev/null +++ b/_templates/icon/new/hello.ejs.t @@ -0,0 +1,13 @@ +--- +to: src/icons/<%= name %>Icon.tsx +--- +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const <%= name %>Icon = createSvgIcon( + , + "<%= name %>Icon" +); + + + diff --git a/package-lock.json b/package-lock.json index d5026a4c..b55258d6 100644 --- a/package-lock.json +++ b/package-lock.json @@ -6908,6 +6908,12 @@ "tslib": "^2.0.1" } }, + "async": { + "version": "0.9.2", + "resolved": "https://registry.npmjs.org/async/-/async-0.9.2.tgz", + "integrity": "sha1-rqdNXmHB+JlhO/ZL2mbUx48v0X0=", + "dev": true + }, "async-each": { "version": "1.0.3", "resolved": "https://registry.npmjs.org/async-each/-/async-each-1.0.3.tgz", @@ -8477,6 +8483,87 @@ } } }, + "change-case": { + "version": "3.1.0", + "resolved": "https://registry.npmjs.org/change-case/-/change-case-3.1.0.tgz", + "integrity": "sha512-2AZp7uJZbYEzRPsFoa+ijKdvp9zsrnnt6+yFokfwEpeJm0xuJDVoxiRCAaTzyJND8GJkofo2IcKWaUZ/OECVzw==", + "dev": true, + "requires": { + "camel-case": "^3.0.0", + "constant-case": "^2.0.0", + "dot-case": "^2.1.0", + "header-case": "^1.0.0", + "is-lower-case": "^1.1.0", + "is-upper-case": "^1.1.0", + "lower-case": "^1.1.1", + "lower-case-first": "^1.0.0", + "no-case": "^2.3.2", + "param-case": "^2.1.0", + "pascal-case": "^2.0.0", + "path-case": "^2.1.0", + "sentence-case": "^2.1.0", + "snake-case": "^2.1.0", + "swap-case": "^1.1.0", + "title-case": "^2.1.0", + "upper-case": "^1.1.1", + "upper-case-first": "^1.1.0" + }, + "dependencies": { + "camel-case": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/camel-case/-/camel-case-3.0.0.tgz", + "integrity": "sha1-yjw2iKTpzzpM2nd9xNy8cTJJz3M=", + "dev": true, + "requires": { + "no-case": "^2.2.0", + "upper-case": "^1.1.1" + } + }, + "dot-case": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/dot-case/-/dot-case-2.1.1.tgz", + "integrity": "sha1-NNzzf1Co6TwrO8qLt/uRVcfaO+4=", + "dev": true, + "requires": { + "no-case": "^2.2.0" + } + }, + "lower-case": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz", + "integrity": "sha1-miyr0bno4K6ZOkv31YdcOcQujqw=", + "dev": true + }, + "no-case": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz", + "integrity": "sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==", + "dev": true, + "requires": { + "lower-case": "^1.1.1" + } + }, + "param-case": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/param-case/-/param-case-2.1.1.tgz", + "integrity": "sha1-35T9jPZTHs915r75oIWPvHK+Ikc=", + "dev": true, + "requires": { + "no-case": "^2.2.0" + } + }, + "pascal-case": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/pascal-case/-/pascal-case-2.0.1.tgz", + "integrity": "sha1-LVeNNFX2YNpl7KGO+VtODekSdh4=", + "dev": true, + "requires": { + "camel-case": "^3.0.0", + "upper-case-first": "^1.1.0" + } + } + } + }, "char-regex": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/char-regex/-/char-regex-1.0.2.tgz", @@ -9161,6 +9248,16 @@ "integrity": "sha1-PXz0Rk22RG6mRL9LOVB/mFEAjo4=", "dev": true }, + "constant-case": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/constant-case/-/constant-case-2.0.0.tgz", + "integrity": "sha1-QXV2TTidP6nI7NKRhu1gBSQ7akY=", + "dev": true, + "requires": { + "snake-case": "^2.1.0", + "upper-case": "^1.1.1" + } + }, "constants-browserify": { "version": "1.0.0", "resolved": "https://registry.npmjs.org/constants-browserify/-/constants-browserify-1.0.0.tgz", @@ -10531,6 +10628,15 @@ "integrity": "sha1-WQxhFWsK4vTwJVcyoViyZrxWsh0=", "dev": true }, + "ejs": { + "version": "3.1.6", + "resolved": "https://registry.npmjs.org/ejs/-/ejs-3.1.6.tgz", + "integrity": "sha512-9lt9Zse4hPucPkoP7FHDF0LQAlGyF9JVpnClFLFH3aSSbxmyoqINRpp/9wePWJTUl4KOQwRL72Iw3InHPDkoGw==", + "dev": true, + "requires": { + "jake": "^10.6.1" + } + }, "electron-to-chromium": { "version": "1.3.727", "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.3.727.tgz", @@ -11927,6 +12033,15 @@ "dev": true, "optional": true }, + "filelist": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/filelist/-/filelist-1.0.2.tgz", + "integrity": "sha512-z7O0IS8Plc39rTCq6i6iHxk43duYOn8uFJiWSewIq0Bww1RNybVHSCjahmcC87ZqAm4OTvFzlzeGu3XAzG1ctQ==", + "dev": true, + "requires": { + "minimatch": "^3.0.4" + } + }, "filesize": { "version": "6.1.0", "resolved": "https://registry.npmjs.org/filesize/-/filesize-6.1.0.tgz", @@ -12207,6 +12322,15 @@ "readable-stream": "^2.0.0" } }, + "front-matter": { + "version": "4.0.2", + "resolved": "https://registry.npmjs.org/front-matter/-/front-matter-4.0.2.tgz", + "integrity": "sha512-I8ZuJ/qG92NWX8i5x1Y8qyj3vizhXS31OxjKDu3LKP+7/qBgfIKValiZIEwoVoJKUHlhWtYrktkxV1XsX+pPlg==", + "dev": true, + "requires": { + "js-yaml": "^3.13.1" + } + }, "fs-extra": { "version": "9.1.0", "resolved": "https://registry.npmjs.org/fs-extra/-/fs-extra-9.1.0.tgz", @@ -12842,6 +12966,33 @@ "integrity": "sha512-F/1DnUGPopORZi0ni+CvrCgHQ5FyEAHRLSApuYWMmrbSwoN2Mn/7k+Gl38gJnR7yyDZk6WLXwiGod1JOWNDKGw==", "dev": true }, + "header-case": { + "version": "1.0.1", + "resolved": "https://registry.npmjs.org/header-case/-/header-case-1.0.1.tgz", + "integrity": "sha1-lTWXMZfBRLCWE81l0xfvGZY70C0=", + "dev": true, + "requires": { + "no-case": "^2.2.0", + "upper-case": "^1.1.3" + }, + "dependencies": { + "lower-case": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz", + "integrity": "sha1-miyr0bno4K6ZOkv31YdcOcQujqw=", + "dev": true + }, + "no-case": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz", + "integrity": "sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==", + "dev": true, + "requires": { + "lower-case": "^1.1.1" + } + } + } + }, "hex-color-regex": { "version": "1.1.0", "resolved": "https://registry.npmjs.org/hex-color-regex/-/hex-color-regex-1.1.0.tgz", @@ -13104,6 +13255,112 @@ "integrity": "sha512-SQS2gDTB7tBN486QSoKPKQItZw97BMOd+Kdb6ghfpBc0yXyzrddI0oDV5MkDAbuB4X2mO3/nj60TRMcYxwzZeQ==", "dev": true }, + "hygen": { + "version": "6.1.0", + "resolved": "https://registry.npmjs.org/hygen/-/hygen-6.1.0.tgz", + "integrity": "sha512-y2zhj/n20QZ27VxJKnCWxdKDsx9ilUFq7B7em/gFnhDrOOZ9Kf6syCFnrluFFDDIj/0IzijlsD61lL5iJXoSnw==", + "dev": true, + "requires": { + "@types/node": "^14.14.41", + "chalk": "^4.1.1", + "change-case": "^3.1.0", + "ejs": "^3.1.3", + "enquirer": "^2.3.6", + "execa": "^5.0.0", + "front-matter": "^4.0.2", + "fs-extra": "^9.1.0", + "ignore-walk": "^3.0.3", + "inflection": "^1.12.0", + "yargs-parser": "^20.2.7" + }, + "dependencies": { + "@types/node": { + "version": "14.18.0", + "resolved": "https://registry.npmjs.org/@types/node/-/node-14.18.0.tgz", + "integrity": "sha512-0GeIl2kmVMXEnx8tg1SlG6Gg8vkqirrW752KqolYo1PHevhhZN3bhJ67qHj+bQaINhX0Ra3TlWwRvMCd9iEfNQ==", + "dev": true + }, + "cross-spawn": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", + "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "dev": true, + "requires": { + "path-key": "^3.1.0", + "shebang-command": "^2.0.0", + "which": "^2.0.1" + } + }, + "execa": { + "version": "5.1.1", + "resolved": "https://registry.npmjs.org/execa/-/execa-5.1.1.tgz", + "integrity": "sha512-8uSpZZocAZRBAPIEINJj3Lo9HyGitllczc27Eh5YYojjMFMn8yHMDMaUHE2Jqfq05D/wucwI4JGURyXt1vchyg==", + "dev": true, + "requires": { + "cross-spawn": "^7.0.3", + "get-stream": "^6.0.0", + "human-signals": "^2.1.0", + "is-stream": "^2.0.0", + "merge-stream": "^2.0.0", + "npm-run-path": "^4.0.1", + "onetime": "^5.1.2", + "signal-exit": "^3.0.3", + "strip-final-newline": "^2.0.0" + } + }, + "get-stream": { + "version": "6.0.1", + "resolved": "https://registry.npmjs.org/get-stream/-/get-stream-6.0.1.tgz", + "integrity": "sha512-ts6Wi+2j3jQjqi70w5AlN8DFnkSwC+MqmxEzdEALB2qXZYV3X/b1CTfgPLGJNMeAWxdPfU8FO1ms3NUfaHCPYg==", + "dev": true + }, + "is-stream": { + "version": "2.0.1", + "resolved": "https://registry.npmjs.org/is-stream/-/is-stream-2.0.1.tgz", + "integrity": "sha512-hFoiJiTl63nn+kstHGBtewWSKnQLpyb155KHheA1l39uvtO9nWIop1p3udqPcUd/xbF1VLMO4n7OI6p7RbngDg==", + "dev": true + }, + "npm-run-path": { + "version": "4.0.1", + "resolved": "https://registry.npmjs.org/npm-run-path/-/npm-run-path-4.0.1.tgz", + "integrity": "sha512-S48WzZW777zhNIrn7gxOlISNAqi9ZC/uQFnRdbeIHhZhCA6UqpkOT8T1G7BvfdgP4Er8gF4sUbaS0i7QvIfCWw==", + "dev": true, + "requires": { + "path-key": "^3.0.0" + } + }, + "path-key": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", + "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==", + "dev": true + }, + "shebang-command": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", + "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", + "dev": true, + "requires": { + "shebang-regex": "^3.0.0" + } + }, + "shebang-regex": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", + "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==", + "dev": true + }, + "which": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", + "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "dev": true, + "requires": { + "isexe": "^2.0.0" + } + } + } + }, "hyphenate-style-name": { "version": "1.0.4", "resolved": "https://registry.npmjs.org/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz", @@ -13262,6 +13519,12 @@ "integrity": "sha512-IClj+Xz94+d7irH5qRyfJonOdfTzuDaifE6ZPWfx0N0+/ATZCbuTPq2prFl526urkQd90WyUKIh1DfBQ2hMz9A==", "dev": true }, + "inflection": { + "version": "1.13.1", + "resolved": "https://registry.npmjs.org/inflection/-/inflection-1.13.1.tgz", + "integrity": "sha512-dldYtl2WlN0QDkIDtg8+xFwOS2Tbmp12t1cHa5/YClU6ZQjTFm7B66UcVbh9NQB+HvT5BAd2t5+yKsBkw5pcqA==", + "dev": true + }, "inflight": { "version": "1.0.6", "resolved": "https://registry.npmjs.org/inflight/-/inflight-1.0.6.tgz", @@ -13871,6 +14134,23 @@ "integrity": "sha512-2HvIEKRoqS62guEC+qBjpvRubdX910WCMuJTZ+I9yvqKU2/12eSL549HMwtabb4oupdj2sMP50k+XJfB/8JE6w==", "dev": true }, + "is-lower-case": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/is-lower-case/-/is-lower-case-1.1.3.tgz", + "integrity": "sha1-fhR75HaNxGbbO/shzGCzHmrWk5M=", + "dev": true, + "requires": { + "lower-case": "^1.1.0" + }, + "dependencies": { + "lower-case": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz", + "integrity": "sha1-miyr0bno4K6ZOkv31YdcOcQujqw=", + "dev": true + } + } + }, "is-map": { "version": "2.0.2", "resolved": "https://registry.npmjs.org/is-map/-/is-map-2.0.2.tgz", @@ -14045,6 +14325,15 @@ "integrity": "sha512-knxG2q4UC3u8stRGyAVJCOdxFmv5DZiRcdlIaAQXAbSfJya+OhopNotLQrstBhququ4ZpuKbDc/8S6mgXgPFPw==", "dev": true }, + "is-upper-case": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/is-upper-case/-/is-upper-case-1.1.2.tgz", + "integrity": "sha1-jQsfp+eTOh5YSDYA7H2WYcuvdW8=", + "dev": true, + "requires": { + "upper-case": "^1.1.0" + } + }, "is-url-superb": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/is-url-superb/-/is-url-superb-4.0.0.tgz", @@ -14233,6 +14522,40 @@ "iterate-iterator": "^1.0.1" } }, + "jake": { + "version": "10.8.2", + "resolved": "https://registry.npmjs.org/jake/-/jake-10.8.2.tgz", + "integrity": "sha512-eLpKyrfG3mzvGE2Du8VoPbeSkRry093+tyNjdYaBbJS9v17knImYGNXQCUV0gLxQtF82m3E8iRb/wdSQZLoq7A==", + "dev": true, + "requires": { + "async": "0.9.x", + "chalk": "^2.4.2", + "filelist": "^1.0.1", + "minimatch": "^3.0.4" + }, + "dependencies": { + "chalk": { + "version": "2.4.2", + "resolved": "https://registry.npmjs.org/chalk/-/chalk-2.4.2.tgz", + "integrity": "sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==", + "dev": true, + "requires": { + "ansi-styles": "^3.2.1", + "escape-string-regexp": "^1.0.5", + "supports-color": "^5.3.0" + } + }, + "supports-color": { + "version": "5.5.0", + "resolved": "https://registry.npmjs.org/supports-color/-/supports-color-5.5.0.tgz", + "integrity": "sha512-QjVjwdXIt408MIiAqCX4oUKsgU2EqAGzs2Ppkm4aQYbjm+ZEWEcW4SfFNTr4uMNZma0ey4f5lgLrkB0aX0QMow==", + "dev": true, + "requires": { + "has-flag": "^3.0.0" + } + } + } + }, "jest": { "version": "27.2.4", "resolved": "https://registry.npmjs.org/jest/-/jest-27.2.4.tgz", @@ -17271,6 +17594,23 @@ "tslib": "^2.0.3" } }, + "lower-case-first": { + "version": "1.0.2", + "resolved": "https://registry.npmjs.org/lower-case-first/-/lower-case-first-1.0.2.tgz", + "integrity": "sha1-5dp8JvKacHO+AtUrrJmA5ZIq36E=", + "dev": true, + "requires": { + "lower-case": "^1.1.2" + }, + "dependencies": { + "lower-case": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz", + "integrity": "sha1-miyr0bno4K6ZOkv31YdcOcQujqw=", + "dev": true + } + } + }, "lowercase-keys": { "version": "2.0.0", "resolved": "https://registry.npmjs.org/lowercase-keys/-/lowercase-keys-2.0.0.tgz", @@ -19223,6 +19563,32 @@ "integrity": "sha512-BapA40NHICOS+USX9SN4tyhq+A2RrN/Ws5F0Z5aMHDp98Fl86lX8Oti8B7uN93L4Ifv4fHOEA+pQw87gmMO/lQ==", "dev": true }, + "path-case": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/path-case/-/path-case-2.1.1.tgz", + "integrity": "sha1-lLgDfDctP+KQbkZbtF4l0ibo7qU=", + "dev": true, + "requires": { + "no-case": "^2.2.0" + }, + "dependencies": { + "lower-case": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz", + "integrity": "sha1-miyr0bno4K6ZOkv31YdcOcQujqw=", + "dev": true + }, + "no-case": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz", + "integrity": "sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==", + "dev": true, + "requires": { + "lower-case": "^1.1.1" + } + } + } + }, "path-dirname": { "version": "1.0.2", "resolved": "https://registry.npmjs.org/path-dirname/-/path-dirname-1.0.2.tgz", @@ -23036,6 +23402,33 @@ } } }, + "sentence-case": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/sentence-case/-/sentence-case-2.1.1.tgz", + "integrity": "sha1-H24t2jnBaL+S0T+G1KkYkz9mftQ=", + "dev": true, + "requires": { + "no-case": "^2.2.0", + "upper-case-first": "^1.1.2" + }, + "dependencies": { + "lower-case": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz", + "integrity": "sha1-miyr0bno4K6ZOkv31YdcOcQujqw=", + "dev": true + }, + "no-case": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz", + "integrity": "sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==", + "dev": true, + "requires": { + "lower-case": "^1.1.1" + } + } + } + }, "serialize-javascript": { "version": "4.0.0", "resolved": "https://registry.npmjs.org/serialize-javascript/-/serialize-javascript-4.0.0.tgz", @@ -23339,6 +23732,32 @@ } } }, + "snake-case": { + "version": "2.1.0", + "resolved": "https://registry.npmjs.org/snake-case/-/snake-case-2.1.0.tgz", + "integrity": "sha1-Qb2xtz8w7GagTU4srRt2OH1NbZ8=", + "dev": true, + "requires": { + "no-case": "^2.2.0" + }, + "dependencies": { + "lower-case": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz", + "integrity": "sha1-miyr0bno4K6ZOkv31YdcOcQujqw=", + "dev": true + }, + "no-case": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz", + "integrity": "sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==", + "dev": true, + "requires": { + "lower-case": "^1.1.1" + } + } + } + }, "snapdragon": { "version": "0.8.2", "resolved": "https://registry.npmjs.org/snapdragon/-/snapdragon-0.8.2.tgz", @@ -24029,6 +24448,24 @@ } } }, + "swap-case": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/swap-case/-/swap-case-1.1.2.tgz", + "integrity": "sha1-w5IDpFhzhfrTyFCgvRvK+ggZdOM=", + "dev": true, + "requires": { + "lower-case": "^1.1.1", + "upper-case": "^1.1.1" + }, + "dependencies": { + "lower-case": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz", + "integrity": "sha1-miyr0bno4K6ZOkv31YdcOcQujqw=", + "dev": true + } + } + }, "symbol-observable": { "version": "1.2.0", "resolved": "https://registry.npmjs.org/symbol-observable/-/symbol-observable-1.2.0.tgz", @@ -24321,6 +24758,33 @@ "integrity": "sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==", "dev": true }, + "title-case": { + "version": "2.1.1", + "resolved": "https://registry.npmjs.org/title-case/-/title-case-2.1.1.tgz", + "integrity": "sha1-PhJyFtpY0rxb7PE3q5Ha46fNj6o=", + "dev": true, + "requires": { + "no-case": "^2.2.0", + "upper-case": "^1.0.3" + }, + "dependencies": { + "lower-case": { + "version": "1.1.4", + "resolved": "https://registry.npmjs.org/lower-case/-/lower-case-1.1.4.tgz", + "integrity": "sha1-miyr0bno4K6ZOkv31YdcOcQujqw=", + "dev": true + }, + "no-case": { + "version": "2.3.2", + "resolved": "https://registry.npmjs.org/no-case/-/no-case-2.3.2.tgz", + "integrity": "sha512-rmTZ9kz+f3rCvK2TD1Ue/oZlns7OGoIWP4fc3llxxRXlOkHKoWPPWJOfFYpITabSow43QJbRIoHQXtt10VldyQ==", + "dev": true, + "requires": { + "lower-case": "^1.1.1" + } + } + } + }, "tmp": { "version": "0.0.33", "resolved": "https://registry.npmjs.org/tmp/-/tmp-0.0.33.tgz", @@ -24999,6 +25463,21 @@ } } }, + "upper-case": { + "version": "1.1.3", + "resolved": "https://registry.npmjs.org/upper-case/-/upper-case-1.1.3.tgz", + "integrity": "sha1-9rRQHC7EzdJrp4vnIilh3ndiFZg=", + "dev": true + }, + "upper-case-first": { + "version": "1.1.2", + "resolved": "https://registry.npmjs.org/upper-case-first/-/upper-case-first-1.1.2.tgz", + "integrity": "sha1-XXm+3P8UQZUY/S7bCgUHybaFkRU=", + "dev": true, + "requires": { + "upper-case": "^1.1.1" + } + }, "uri-js": { "version": "4.4.1", "resolved": "https://registry.npmjs.org/uri-js/-/uri-js-4.4.1.tgz", diff --git a/package.json b/package.json index 4d2dc44f..261ddf13 100644 --- a/package.json +++ b/package.json @@ -41,7 +41,9 @@ "storybook": "start-storybook -p 6006", "build-storybook": "build-storybook", "release": "np", - "chromatic": "npx chromatic --exit-zero-on-changes --skip 'dependabot/**'" + "chromatic": "npx chromatic --exit-zero-on-changes --skip 'dependabot/**'", + "generate-icon": "hygen icon new", + "build-icons": "node scripts/icons.js" }, "peerDependencies": { "@material-ui/core": "^4.11.2", @@ -110,6 +112,7 @@ "eslint-plugin-simple-import-sort": "^5.0.3", "faker": "^5.5.3", "husky": "^6.0.0", + "hygen": "^6.1.0", "jest": "^27.2.4", "jest-file": "^1.0.0", "np": "^7.5.0", diff --git a/scripts/icons.js b/scripts/icons.js new file mode 100644 index 00000000..2bc1ffb2 --- /dev/null +++ b/scripts/icons.js @@ -0,0 +1,17 @@ +const fs = require("fs"); +const path = require("path"); + +const dir = path.resolve(__dirname, "../src/icons"); +const iconRegexp = new RegExp(/.*Icon\.tsx/); + +const files = fs.readdirSync(dir, { + withFileTypes: true, +}); + +const imports = files + .map((file) => file.name) + .filter((fileName) => iconRegexp.test(fileName)) + .map((fileName) => fileName.replace(".tsx", "")) + .reduce((acc, fileName) => acc + `export * from "./${fileName}"\n`, ""); + +fs.writeFileSync(path.join(dir, "index.ts"), imports); diff --git a/src/icons/AddEnvironmentIcon.tsx b/src/icons/AddEnvironmentIcon.tsx new file mode 100644 index 00000000..5b4dd5cd --- /dev/null +++ b/src/icons/AddEnvironmentIcon.tsx @@ -0,0 +1,12 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const AddEnvironmentIcon = createSvgIcon( + , + "AddEnvironmentIcon" +); diff --git a/src/icons/AppsIcon.tsx b/src/icons/AppsIcon.tsx new file mode 100644 index 00000000..227ad7b7 --- /dev/null +++ b/src/icons/AppsIcon.tsx @@ -0,0 +1,12 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const AppsIcon = createSvgIcon( + , + "AppsIcon" +); diff --git a/src/icons/AttributesLargeIcon.tsx b/src/icons/AttributesLargeIcon.tsx new file mode 100644 index 00000000..8e59e20f --- /dev/null +++ b/src/icons/AttributesLargeIcon.tsx @@ -0,0 +1,15 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const AttributesLargeIcon = createSvgIcon( + , + "AttributesLargeIcon" +); +(AttributesLargeIcon as React.ComponentType).defaultProps = { + viewBox: "0 0 32 32", +}; diff --git a/src/icons/BackspaceIcon.tsx b/src/icons/BackspaceIcon.tsx new file mode 100644 index 00000000..041d9641 --- /dev/null +++ b/src/icons/BackspaceIcon.tsx @@ -0,0 +1,12 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const BackspaceIcon = createSvgIcon( + , + "BackspaceIcon" +); diff --git a/src/icons/BillingIcon.tsx b/src/icons/BillingIcon.tsx new file mode 100644 index 00000000..3bcef004 --- /dev/null +++ b/src/icons/BillingIcon.tsx @@ -0,0 +1,12 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const BillingIcon = createSvgIcon( + , + "BillingIcon" +); diff --git a/src/icons/CalendarIcon.tsx b/src/icons/CalendarIcon.tsx new file mode 100644 index 00000000..1d6495bb --- /dev/null +++ b/src/icons/CalendarIcon.tsx @@ -0,0 +1,12 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const CalendarIcon = createSvgIcon( + , + "CalendarIcon" +); diff --git a/src/icons/ChevronIcon.tsx b/src/icons/ChevronIcon.tsx new file mode 100644 index 00000000..160752f0 --- /dev/null +++ b/src/icons/ChevronIcon.tsx @@ -0,0 +1,14 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const ChevronIcon = createSvgIcon( + , + "ChevronIcon" +); diff --git a/src/icons/Close2Icon.tsx b/src/icons/Close2Icon.tsx new file mode 100644 index 00000000..8b9a50ca --- /dev/null +++ b/src/icons/Close2Icon.tsx @@ -0,0 +1,12 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const Close2Icon = createSvgIcon( + , + "Close2Icon" +); diff --git a/src/icons/ColumnsIcon.tsx b/src/icons/ColumnsIcon.tsx new file mode 100644 index 00000000..b8c7e3ac --- /dev/null +++ b/src/icons/ColumnsIcon.tsx @@ -0,0 +1,12 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const ColumnsIcon = createSvgIcon( + , + "ColumnsIcon" +); diff --git a/src/icons/CommentSmallIcon.tsx b/src/icons/CommentSmallIcon.tsx new file mode 100644 index 00000000..77ad0616 --- /dev/null +++ b/src/icons/CommentSmallIcon.tsx @@ -0,0 +1,15 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const CommentSmallIcon = createSvgIcon( + , + "CommentSmallIcon" +); +(CommentSmallIcon as React.ComponentType).defaultProps = { + viewBox: "0 0 20 20", +}; diff --git a/src/icons/CompleteIcon.tsx b/src/icons/CompleteIcon.tsx index 96d687cd..0196ce4a 100644 --- a/src/icons/CompleteIcon.tsx +++ b/src/icons/CompleteIcon.tsx @@ -11,7 +11,7 @@ export const CompleteIcon: React.FC> = ( xmlns="http://www.w3.org/2000/svg" {...props} > - + , + "CopyIcon" +); diff --git a/src/icons/CustomersIcon.tsx b/src/icons/CustomersIcon.tsx new file mode 100644 index 00000000..4bc9ab0b --- /dev/null +++ b/src/icons/CustomersIcon.tsx @@ -0,0 +1,12 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const CustomersIcon = createSvgIcon( + , + "CustomersIcon" +); diff --git a/src/icons/CustomersLargeIcon.tsx b/src/icons/CustomersLargeIcon.tsx new file mode 100644 index 00000000..53371a5b --- /dev/null +++ b/src/icons/CustomersLargeIcon.tsx @@ -0,0 +1,26 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const CustomersLargeIcon = createSvgIcon( + <> + + + , + "CustomersLargeIcon" +); +(CustomersLargeIcon as React.ComponentType).defaultProps = { + viewBox: "0 0 32 32", +}; diff --git a/src/icons/DashboardIcon.tsx b/src/icons/DashboardIcon.tsx new file mode 100644 index 00000000..24c989dd --- /dev/null +++ b/src/icons/DashboardIcon.tsx @@ -0,0 +1,12 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const DashboardIcon = createSvgIcon( + , + "DashboardIcon" +); diff --git a/src/icons/DeveloperIcon.tsx b/src/icons/DeveloperIcon.tsx new file mode 100644 index 00000000..6b985ee5 --- /dev/null +++ b/src/icons/DeveloperIcon.tsx @@ -0,0 +1,38 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const DeveloperIcon = createSvgIcon( + <> + + + + + , + "DeveloperIcon" +); diff --git a/src/icons/DigitalLargeIcon.tsx b/src/icons/DigitalLargeIcon.tsx new file mode 100644 index 00000000..520188f8 --- /dev/null +++ b/src/icons/DigitalLargeIcon.tsx @@ -0,0 +1,15 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const DigitalLargeIcon = createSvgIcon( + , + "DigitalLargeIcon" +); +(DigitalLargeIcon as React.ComponentType).defaultProps = { + viewBox: "0 0 32 32", +}; diff --git a/src/icons/DigitalSmallIcon.tsx b/src/icons/DigitalSmallIcon.tsx new file mode 100644 index 00000000..73f6f7dd --- /dev/null +++ b/src/icons/DigitalSmallIcon.tsx @@ -0,0 +1,15 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const DigitalSmallIcon = createSvgIcon( + , + "DigitalSmallIcon" +); +(DigitalSmallIcon as React.ComponentType).defaultProps = { + viewBox: "0 0 20 20", +}; diff --git a/src/icons/DiscountsIcon.tsx b/src/icons/DiscountsIcon.tsx new file mode 100644 index 00000000..7f818c5f --- /dev/null +++ b/src/icons/DiscountsIcon.tsx @@ -0,0 +1,20 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const DiscountsIcon = createSvgIcon( + + + , + "DiscountsIcon" +); diff --git a/src/icons/DiscountsLargeIcon.tsx b/src/icons/DiscountsLargeIcon.tsx new file mode 100644 index 00000000..9417fad6 --- /dev/null +++ b/src/icons/DiscountsLargeIcon.tsx @@ -0,0 +1,26 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const DiscountLargeIcon = createSvgIcon( + <> + + + , + "DiscountLargeIcon" +); +(DiscountLargeIcon as React.ComponentType).defaultProps = { + viewBox: "0 0 32 32", +}; diff --git a/src/icons/DownloadIcon.tsx b/src/icons/DownloadIcon.tsx new file mode 100644 index 00000000..6559af6c --- /dev/null +++ b/src/icons/DownloadIcon.tsx @@ -0,0 +1,15 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const DownloadIcon = createSvgIcon( + <> + + + , + "DownloadIcon" +); diff --git a/src/icons/DragIcon.tsx b/src/icons/DragIcon.tsx new file mode 100644 index 00000000..3f7b1e64 --- /dev/null +++ b/src/icons/DragIcon.tsx @@ -0,0 +1,12 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const DragIcon = createSvgIcon( + , + "DragIcon" +); diff --git a/src/icons/EditSmallIcon.tsx b/src/icons/EditSmallIcon.tsx new file mode 100644 index 00000000..46e71431 --- /dev/null +++ b/src/icons/EditSmallIcon.tsx @@ -0,0 +1,15 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const EditSmallIcon = createSvgIcon( + , + "EditSmallIcon" +); +(EditSmallIcon as React.ComponentType).defaultProps = { + viewBox: "0 0 20 20", +}; diff --git a/src/icons/EnvironmentIcon.tsx b/src/icons/EnvironmentIcon.tsx new file mode 100644 index 00000000..fc9749f6 --- /dev/null +++ b/src/icons/EnvironmentIcon.tsx @@ -0,0 +1,12 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const EnvironmentIcon = createSvgIcon( + , + "EnvironmentIcon" +); diff --git a/src/icons/ExpandIcon.tsx b/src/icons/ExpandIcon.tsx new file mode 100644 index 00000000..38da525e --- /dev/null +++ b/src/icons/ExpandIcon.tsx @@ -0,0 +1,22 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const ExpandIcon = createSvgIcon( + <> + + + , + "ExpandIcon" +); diff --git a/src/icons/EyeIcon.tsx b/src/icons/EyeIcon.tsx new file mode 100644 index 00000000..0d555b4e --- /dev/null +++ b/src/icons/EyeIcon.tsx @@ -0,0 +1,12 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const EyeIcon = createSvgIcon( + , + "EyeIcon" +); diff --git a/src/icons/FilteringLargeIcon.tsx b/src/icons/FilteringLargeIcon.tsx new file mode 100644 index 00000000..ef465989 --- /dev/null +++ b/src/icons/FilteringLargeIcon.tsx @@ -0,0 +1,15 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const FilteringLargeIcon = createSvgIcon( + , + "FilteringLargeIcon" +); +(FilteringLargeIcon as React.ComponentType).defaultProps = { + viewBox: "0 0 32 32", +}; diff --git a/src/icons/GiftCardLargeIcon.tsx b/src/icons/GiftCardLargeIcon.tsx new file mode 100644 index 00000000..3e2bd361 --- /dev/null +++ b/src/icons/GiftCardLargeIcon.tsx @@ -0,0 +1,15 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const GiftCardLargeIcon = createSvgIcon( + , + "GiftCardLargeIcon" +); +(GiftCardLargeIcon as React.ComponentType).defaultProps = { + viewBox: "0 0 32 32", +}; diff --git a/src/icons/HelpIcon.tsx b/src/icons/HelpIcon.tsx new file mode 100644 index 00000000..1cac5b35 --- /dev/null +++ b/src/icons/HelpIcon.tsx @@ -0,0 +1,12 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const HelpIcon = createSvgIcon( + , + "HelpIcon" +); diff --git a/src/icons/InfoIcon.tsx b/src/icons/InfoIcon.tsx index bdb2674d..9416b003 100644 --- a/src/icons/InfoIcon.tsx +++ b/src/icons/InfoIcon.tsx @@ -9,13 +9,13 @@ export const InfoIcon: React.FC> = (props) => ( xmlns="http://www.w3.org/2000/svg" {...props} > - - + + ); diff --git a/src/icons/LinkIcon.tsx b/src/icons/LinkIcon.tsx new file mode 100644 index 00000000..c23cbb84 --- /dev/null +++ b/src/icons/LinkIcon.tsx @@ -0,0 +1,12 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const LinkIcon = createSvgIcon( + , + "LinkIcon" +); diff --git a/src/icons/Logo.tsx b/src/icons/Logo.tsx index 86b51ef8..7aa3d84e 100644 --- a/src/icons/Logo.tsx +++ b/src/icons/Logo.tsx @@ -9,6 +9,12 @@ export const Logo: React.FC> = (props) => ( xmlns="http://www.w3.org/2000/svg" {...props} > + > = (props) => ( ); diff --git a/src/icons/MailIcon.tsx b/src/icons/MailIcon.tsx new file mode 100644 index 00000000..9dee4e3e --- /dev/null +++ b/src/icons/MailIcon.tsx @@ -0,0 +1,16 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const MailIcon = createSvgIcon( + <> + + + , + "MailIcon" +); diff --git a/src/icons/MinusIcon.tsx b/src/icons/MinusIcon.tsx new file mode 100644 index 00000000..6a722294 --- /dev/null +++ b/src/icons/MinusIcon.tsx @@ -0,0 +1,12 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const MinusIcon = createSvgIcon( + , + "MinusIcon" +); diff --git a/src/icons/MoreHorizontalIcon.tsx b/src/icons/MoreHorizontalIcon.tsx new file mode 100644 index 00000000..c647f08d --- /dev/null +++ b/src/icons/MoreHorizontalIcon.tsx @@ -0,0 +1,12 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const MoreHorizontalIcon = createSvgIcon( + , + "MoreHorizontalIcon" +); diff --git a/src/icons/NavigationIcon.tsx b/src/icons/NavigationIcon.tsx new file mode 100644 index 00000000..376382cf --- /dev/null +++ b/src/icons/NavigationIcon.tsx @@ -0,0 +1,26 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const NavigationIcon = createSvgIcon( + <> + + + + , + "NavigationIcon" +); diff --git a/src/icons/NavigationLargeIcon.tsx b/src/icons/NavigationLargeIcon.tsx new file mode 100644 index 00000000..e668c30c --- /dev/null +++ b/src/icons/NavigationLargeIcon.tsx @@ -0,0 +1,15 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const NavigationLargeIcon = createSvgIcon( + , + "NavigationLargeIcon" +); +(NavigationLargeIcon as React.ComponentType).defaultProps = { + viewBox: "0 0 32 32", +}; diff --git a/src/icons/NextIcon.tsx b/src/icons/NextIcon.tsx new file mode 100644 index 00000000..93d1435c --- /dev/null +++ b/src/icons/NextIcon.tsx @@ -0,0 +1,14 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const NextIcon = createSvgIcon( + , + "NextIcon" +); diff --git a/src/icons/NoConnectionIcon.tsx b/src/icons/NoConnectionIcon.tsx new file mode 100644 index 00000000..8de242fa --- /dev/null +++ b/src/icons/NoConnectionIcon.tsx @@ -0,0 +1,25 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const NoConnectionIcon = createSvgIcon( + <> + + + + + , + "NoConnectionIcon" +); diff --git a/src/icons/NotAllowedIcon.tsx b/src/icons/NotAllowedIcon.tsx index da4c1aed..f17a6a02 100644 --- a/src/icons/NotAllowedIcon.tsx +++ b/src/icons/NotAllowedIcon.tsx @@ -12,7 +12,7 @@ export const NotAllowedIcon: React.FC> = ( {...props} > - + > = ( fillRule="evenodd" clipRule="evenodd" d="M26.9531 29.7815C24.9914 31.1784 22.5917 32 20 32C13.3726 32 8 26.6274 8 20C8 17.4083 8.82158 15.0086 10.2185 13.0469L26.9531 29.7815ZM29.7815 26.9531L13.0469 10.2185C15.0086 8.82158 17.4083 8 20 8C26.6274 8 32 13.3726 32 20C32 22.5917 31.1784 24.9914 29.7815 26.9531ZM36 20C36 28.8366 28.8366 36 20 36C11.1634 36 4 28.8366 4 20C4 11.1634 11.1634 4 20 4C28.8366 4 36 11.1634 36 20Z" - fill="white" + fill="var(--background-paper)" /> ); diff --git a/src/icons/NotesLargeIcon.tsx b/src/icons/NotesLargeIcon.tsx new file mode 100644 index 00000000..a550b2b1 --- /dev/null +++ b/src/icons/NotesLargeIcon.tsx @@ -0,0 +1,38 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const NotesLargeIcon = createSvgIcon( + <> + + + + + + + + + , + "NotesLargeIcon" +); +(NotesLargeIcon as React.ComponentType).defaultProps = { + viewBox: "0 0 32 32", +}; diff --git a/src/icons/NotificationsIcon.tsx b/src/icons/NotificationsIcon.tsx new file mode 100644 index 00000000..cd8e66c8 --- /dev/null +++ b/src/icons/NotificationsIcon.tsx @@ -0,0 +1,12 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const NotificationsIcon = createSvgIcon( + , + "NotificationsIcon" +); diff --git a/src/icons/OmnichannelLargeIcon.tsx b/src/icons/OmnichannelLargeIcon.tsx new file mode 100644 index 00000000..ad4e04e9 --- /dev/null +++ b/src/icons/OmnichannelLargeIcon.tsx @@ -0,0 +1,15 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const OmnichannelLargeIcon = createSvgIcon( + , + "OmnichannelLargeIcon" +); +(OmnichannelLargeIcon as React.ComponentType).defaultProps = { + viewBox: "0 0 32 32", +}; diff --git a/src/icons/OrdersIcon.tsx b/src/icons/OrdersIcon.tsx new file mode 100644 index 00000000..f5591ac0 --- /dev/null +++ b/src/icons/OrdersIcon.tsx @@ -0,0 +1,12 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const OrdersIcon = createSvgIcon( + , + "OrdersIcon" +); diff --git a/src/icons/PagesIcon.tsx b/src/icons/PagesIcon.tsx new file mode 100644 index 00000000..3d7e55e7 --- /dev/null +++ b/src/icons/PagesIcon.tsx @@ -0,0 +1,12 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const PagesIcon = createSvgIcon( + , + "PagesIcon" +); diff --git a/src/icons/PermissionLargeIcon.tsx b/src/icons/PermissionLargeIcon.tsx new file mode 100644 index 00000000..43f43b5a --- /dev/null +++ b/src/icons/PermissionLargeIcon.tsx @@ -0,0 +1,15 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const PermissionLargeIcon = createSvgIcon( + , + "PermissionLargeIcon" +); +(PermissionLargeIcon as React.ComponentType).defaultProps = { + viewBox: "0 0 32 32", +}; diff --git a/src/icons/PhotoIcon.tsx b/src/icons/PhotoIcon.tsx new file mode 100644 index 00000000..5f811aef --- /dev/null +++ b/src/icons/PhotoIcon.tsx @@ -0,0 +1,12 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const PhotoIcon = createSvgIcon( + , + "PhotoIcon" +); diff --git a/src/icons/PreviousIcon.tsx b/src/icons/PreviousIcon.tsx new file mode 100644 index 00000000..a427b95f --- /dev/null +++ b/src/icons/PreviousIcon.tsx @@ -0,0 +1,14 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const PreviousIcon = createSvgIcon( + , + "PreviousIcon" +); diff --git a/src/icons/PrinterIcon.tsx b/src/icons/PrinterIcon.tsx new file mode 100644 index 00000000..618bc0c4 --- /dev/null +++ b/src/icons/PrinterIcon.tsx @@ -0,0 +1,15 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const PrinterIcon = createSvgIcon( + <> + + + , + "PrinterIcon" +); diff --git a/src/icons/PrivacyIcon.tsx b/src/icons/PrivacyIcon.tsx new file mode 100644 index 00000000..e39e2128 --- /dev/null +++ b/src/icons/PrivacyIcon.tsx @@ -0,0 +1,15 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const PrivacyIcon = createSvgIcon( + <> + + + , + "PrivacyIcon" +); diff --git a/src/icons/ProductIcon.tsx b/src/icons/ProductIcon.tsx new file mode 100644 index 00000000..af414962 --- /dev/null +++ b/src/icons/ProductIcon.tsx @@ -0,0 +1,12 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const ProductIcon = createSvgIcon( + , + "ProductIcon" +); diff --git a/src/icons/ProductLargeIcon.tsx b/src/icons/ProductLargeIcon.tsx new file mode 100644 index 00000000..b37a1505 --- /dev/null +++ b/src/icons/ProductLargeIcon.tsx @@ -0,0 +1,16 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const ProductLargeIcon = createSvgIcon( + , + "ProductLargeIcon" +); +(ProductLargeIcon as React.ComponentType).defaultProps = { + viewBox: "0 0 32 32", +}; diff --git a/src/icons/RadioIcon.tsx b/src/icons/RadioIcon.tsx index b3eecb0d..8d77f342 100644 --- a/src/icons/RadioIcon.tsx +++ b/src/icons/RadioIcon.tsx @@ -7,9 +7,9 @@ export const RadioIcon = createSvgIcon( cx="12" cy="12" r="11" - fill="white" + fill="var(--background-paper)" stroke="currentColor" - stroke-width="2" + strokeWidth="2" /> , "RadioIcon" diff --git a/src/icons/RefreshIcon.tsx b/src/icons/RefreshIcon.tsx new file mode 100644 index 00000000..bf8d40b9 --- /dev/null +++ b/src/icons/RefreshIcon.tsx @@ -0,0 +1,14 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const RefreshIcon = createSvgIcon( + , + "RefreshIcon" +); diff --git a/src/icons/ReplyIcon.tsx b/src/icons/ReplyIcon.tsx new file mode 100644 index 00000000..62dcc30d --- /dev/null +++ b/src/icons/ReplyIcon.tsx @@ -0,0 +1,12 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const ReplyIcon = createSvgIcon( + , + "ReplyIcon" +); diff --git a/src/icons/SearchLargeIcon.tsx b/src/icons/SearchLargeIcon.tsx new file mode 100644 index 00000000..629345a5 --- /dev/null +++ b/src/icons/SearchLargeIcon.tsx @@ -0,0 +1,18 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const SearchLargeIcon = createSvgIcon( + <> + + + , + "SearchLargeIcon" +); +(SearchLargeIcon as React.ComponentType).defaultProps = { + viewBox: "0 0 32 32", +}; diff --git a/src/icons/SettingsIcon.tsx b/src/icons/SettingsIcon.tsx new file mode 100644 index 00000000..de2722c0 --- /dev/null +++ b/src/icons/SettingsIcon.tsx @@ -0,0 +1,15 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const SettingsIcon = createSvgIcon( + <> + + + , + "SettingsIcon" +); diff --git a/src/icons/SettingsLargeIcon.tsx b/src/icons/SettingsLargeIcon.tsx new file mode 100644 index 00000000..d16ece40 --- /dev/null +++ b/src/icons/SettingsLargeIcon.tsx @@ -0,0 +1,23 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const SettingsLargeIcon = createSvgIcon( + <> + + + , + "SettingsLargeIcon" +); +(SettingsLargeIcon as React.ComponentType).defaultProps = { + viewBox: "0 0 32 32", +}; diff --git a/src/icons/ShippingLargeIcon.tsx b/src/icons/ShippingLargeIcon.tsx new file mode 100644 index 00000000..62ed072c --- /dev/null +++ b/src/icons/ShippingLargeIcon.tsx @@ -0,0 +1,15 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const ShippingLargeIcon = createSvgIcon( + , + "ShippingLargeIcon" +); +(ShippingLargeIcon as React.ComponentType).defaultProps = { + viewBox: "0 0 32 32", +}; diff --git a/src/icons/SnapshotsIcon.tsx b/src/icons/SnapshotsIcon.tsx new file mode 100644 index 00000000..047f724c --- /dev/null +++ b/src/icons/SnapshotsIcon.tsx @@ -0,0 +1,12 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const SnapshotsIcon = createSvgIcon( + , + "SnapshotsIcon" +); diff --git a/src/icons/StaffMembersLargeIcon.tsx b/src/icons/StaffMembersLargeIcon.tsx new file mode 100644 index 00000000..6241d88c --- /dev/null +++ b/src/icons/StaffMembersLargeIcon.tsx @@ -0,0 +1,15 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const StaffMembersLargeIcon = createSvgIcon( + , + "StaffMembersLargeIcon" +); +(StaffMembersLargeIcon as React.ComponentType).defaultProps = { + viewBox: "0 0 32 32", +}; diff --git a/src/icons/TaxesLargeIcon.tsx b/src/icons/TaxesLargeIcon.tsx new file mode 100644 index 00000000..f5f68007 --- /dev/null +++ b/src/icons/TaxesLargeIcon.tsx @@ -0,0 +1,15 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const TaxesLargeIcon = createSvgIcon( + , + "TaxesLargeIcon" +); +(TaxesLargeIcon as React.ComponentType).defaultProps = { + viewBox: "0 0 32 32", +}; diff --git a/src/icons/TimeIcon.tsx b/src/icons/TimeIcon.tsx new file mode 100644 index 00000000..9dc8c85b --- /dev/null +++ b/src/icons/TimeIcon.tsx @@ -0,0 +1,12 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const TimeIcon = createSvgIcon( + , + "TimeIcon" +); diff --git a/src/icons/TokenLargeIcon.tsx b/src/icons/TokenLargeIcon.tsx new file mode 100644 index 00000000..732b07e6 --- /dev/null +++ b/src/icons/TokenLargeIcon.tsx @@ -0,0 +1,17 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const TokenLargeIcon = createSvgIcon( + <> + + , + "TokenLargeIcon" +); +(TokenLargeIcon as React.ComponentType).defaultProps = { + viewBox: "0 0 32 32", +}; diff --git a/src/icons/TransferIcon.tsx b/src/icons/TransferIcon.tsx new file mode 100644 index 00000000..bdb75512 --- /dev/null +++ b/src/icons/TransferIcon.tsx @@ -0,0 +1,22 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const TransferIcon = createSvgIcon( + <> + + + , + "TransferIcon" +); diff --git a/src/icons/TranslationIcon.tsx b/src/icons/TranslationIcon.tsx new file mode 100644 index 00000000..f95cbf67 --- /dev/null +++ b/src/icons/TranslationIcon.tsx @@ -0,0 +1,12 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const TranslationIcon = createSvgIcon( + , + "TranslationIcon" +); diff --git a/src/icons/WarehouseLargeIcon.tsx b/src/icons/WarehouseLargeIcon.tsx new file mode 100644 index 00000000..7b69055c --- /dev/null +++ b/src/icons/WarehouseLargeIcon.tsx @@ -0,0 +1,15 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const WarehouseLargeIcon = createSvgIcon( + , + "WarehouseLargeIcon" +); +(WarehouseLargeIcon as React.ComponentType).defaultProps = { + viewBox: "0 0 32 32", +}; diff --git a/src/icons/WarningIcon.tsx b/src/icons/WarningIcon.tsx index 9666e6dd..8e8ad7a8 100644 --- a/src/icons/WarningIcon.tsx +++ b/src/icons/WarningIcon.tsx @@ -9,7 +9,7 @@ export const WarningIcon: React.FC> = (props) => ( xmlns="http://www.w3.org/2000/svg" {...props} > - + + + + + + + , + "WebsiteIcon" +); diff --git a/src/icons/WifiIcon.tsx b/src/icons/WifiIcon.tsx new file mode 100644 index 00000000..21d8c37c --- /dev/null +++ b/src/icons/WifiIcon.tsx @@ -0,0 +1,23 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const WifiIcon = createSvgIcon( + <> + + + + , + "WifiIcon" +); diff --git a/src/icons/WifiLargeIcon.tsx b/src/icons/WifiLargeIcon.tsx new file mode 100644 index 00000000..8cfc9512 --- /dev/null +++ b/src/icons/WifiLargeIcon.tsx @@ -0,0 +1,33 @@ +import { createSvgIcon } from "@material-ui/core/utils"; +import React from "react"; + +export const WifiLargeIcon = createSvgIcon( + <> + + + + + , + "WifiLargeIcon" +); +(WifiLargeIcon as React.ComponentType).defaultProps = { + viewBox: "0 0 32 32", +}; diff --git a/src/icons/index.ts b/src/icons/index.ts index ea88018c..b09ffe2d 100644 --- a/src/icons/index.ts +++ b/src/icons/index.ts @@ -1,22 +1,85 @@ -export * from "./CompleteIcon"; -export * from "./InfoIcon"; -export * from "./NotAllowedIcon"; -export * from "./NotAllowedInvertedIcon"; -export * from "./WarningIcon"; +export * from "./AddEnvironmentIcon"; +export * from "./AppsIcon"; export * from "./ArrowDropdownIcon"; -export * from "./CheckboxIcon"; +export * from "./ArrowRightIcon"; +export * from "./AttributesLargeIcon"; +export * from "./BackspaceIcon"; +export * from "./BillingIcon"; +export * from "./CalendarIcon"; export * from "./CheckboxCheckedIcon"; +export * from "./CheckboxIcon"; export * from "./CheckboxIndeterminateIcon"; -export * from "./SearchIcon"; +export * from "./ChevronIcon"; +export * from "./Close2Icon"; +export * from "./CloseIcon"; +export * from "./ColumnsIcon"; +export * from "./CommentSmallIcon"; +export * from "./CompleteIcon"; +export * from "./CopyIcon"; +export * from "./CustomersIcon"; +export * from "./CustomersLargeIcon"; +export * from "./DashboardIcon"; +export * from "./DeleteIcon"; +export * from "./DeveloperIcon"; +export * from "./DigitalLargeIcon"; +export * from "./DigitalSmallIcon"; +export * from "./DiscountsIcon"; +export * from "./DiscountsLargeIcon"; +export * from "./DownloadIcon"; +export * from "./DragIcon"; export * from "./EditIcon"; +export * from "./EditSmallIcon"; +export * from "./EnvironmentIcon"; +export * from "./ExpandIcon"; +export * from "./EyeIcon"; export * from "./FilteringIcon"; -export * from "./DeleteIcon"; +export * from "./FilteringLargeIcon"; +export * from "./GiftCardLargeIcon"; +export * from "./HelpIcon"; export * from "./ImageIcon"; -export * from "./CloseIcon"; -export * from "./PlusIcon"; -export * from "./ArrowRightIcon"; +export * from "./InfoIcon"; +export * from "./LinkIcon"; +export * from "./MailIcon"; +export * from "./MinusIcon"; +export * from "./MoreHorizontalIcon"; export * from "./MoreIcon"; -export * from "./RadioIcon"; +export * from "./NavigationIcon"; +export * from "./NavigationLargeIcon"; +export * from "./NavigatorIcon"; +export * from "./NextIcon"; +export * from "./NoConnectionIcon"; +export * from "./NotAllowedIcon"; +export * from "./NotAllowedInvertedIcon"; +export * from "./NotesLargeIcon"; +export * from "./NotificationsIcon"; +export * from "./OmnichannelLargeIcon"; +export * from "./OrdersIcon"; +export * from "./PagesIcon"; +export * from "./PermissionLargeIcon"; +export * from "./PhotoIcon"; +export * from "./PlusIcon"; +export * from "./PreviousIcon"; +export * from "./PrinterIcon"; +export * from "./PrivacyIcon"; +export * from "./ProductIcon"; +export * from "./ProductLargeIcon"; export * from "./RadioCheckedIcon"; +export * from "./RadioIcon"; +export * from "./RefreshIcon"; +export * from "./ReplyIcon"; export * from "./SearchIcon"; -export * from "./NavigatorIcon"; +export * from "./SearchLargeIcon"; +export * from "./SettingsIcon"; +export * from "./SettingsLargeIcon"; +export * from "./SnapshotsIcon"; +export * from "./StaffMembersLargeIcon"; +export * from "./TaxesLargeIcon"; +export * from "./TimeIcon"; +export * from "./TokenLargeIcon"; +export * from "./TransferIcon"; +export * from "./TranslationIcon"; +export * from "./WarehouseLargeIcon"; +export * from "./WarningIcon"; +export * from "./WebsiteIcon"; +export * from "./WifiIcon"; +export * from "./WifiLargeIcon"; diff --git a/stories/icons.stories.tsx b/stories/icons.stories.tsx index dcb59d2a..26e40131 100644 --- a/stories/icons.stories.tsx +++ b/stories/icons.stories.tsx @@ -1,4 +1,4 @@ -import { Typography } from "@material-ui/core"; +import { Divider, Typography } from "@material-ui/core"; import { storiesOf } from "@storybook/react"; import React from "react"; @@ -8,11 +8,24 @@ import { Decorator, GuideDecorator } from "../src/utils/Decorator"; import useGuideStyles from "./guideStyles"; const useStyles = makeStyles((theme) => ({ + header: { + margin: theme.spacing(4, 0), + }, icon: { height: 24, marginBottom: theme.spacing(1), width: 24, }, + iconSmall: { + height: 20, + marginBottom: theme.spacing(1), + width: 20, + }, + iconLarge: { + height: 32, + marginBottom: theme.spacing(1), + width: 32, + }, iconContainer: { display: "flex", alignItems: "center", @@ -27,6 +40,30 @@ const useStyles = makeStyles((theme) => ({ })); const icons: React.FC<{ className: string }>[] = Object.values(macawIcons); +const sortedIcons = icons.sort((a, b) => + a.displayName > b.displayName ? 1 : -1 +); + +const smallIcons = sortedIcons.filter((icon) => + /SmallIcon/.test(icon.displayName) +); +const largeIcons = sortedIcons.filter((icon) => + /LargeIcon/.test(icon.displayName) +); +const mediumIcons = sortedIcons.filter( + (icon) => ![...smallIcons, ...largeIcons].includes(icon) +); + +const SectionHeader: React.FC = ({ children }) => { + const classes = useStyles(); + + return ( +
+ {children} + +
+ ); +}; const Default: React.FC = () => { const classes = useStyles(); @@ -41,17 +78,40 @@ const Default: React.FC = () => { Macaw UI provides following icons that may be used in your project: + Small 20x20 +
+ {smallIcons.map((Icon) => ( +
+ + + {Icon.displayName} + +
+ ))} +
+ + Medium 24x24 +
+ {mediumIcons.map((Icon) => ( +
+ + + {Icon.displayName} + +
+ ))} +
+ + Small 32x32
- {icons - .sort((a, b) => (a.displayName > b.displayName ? 1 : -1)) - .map((Icon) => ( -
- - - {Icon.displayName} - -
- ))} + {largeIcons.map((Icon) => ( +
+ + + {Icon.displayName} + +
+ ))}
); From daa7b59fee77ea37336ba187644cb0bd79f84d1f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Thu, 9 Dec 2021 11:24:43 +0100 Subject: [PATCH 132/140] Improve input adornments when input is disabled (#94) --- .../createSaleorTheme/overrides/inputs.ts | 3 +- stories/inputs.stories.tsx | 80 +++++++++++++++---- 2 files changed, 68 insertions(+), 15 deletions(-) diff --git a/src/theme/createSaleorTheme/overrides/inputs.ts b/src/theme/createSaleorTheme/overrides/inputs.ts index 17500489..de40ed6c 100644 --- a/src/theme/createSaleorTheme/overrides/inputs.ts +++ b/src/theme/createSaleorTheme/overrides/inputs.ts @@ -92,7 +92,7 @@ export const inputOverrides = ( boxShadow: "0 0 0px 1000px rgba(19, 190, 187, 0.1) inset", }, "&&$disabled": { - backgroundColor: colors.background.default, + backgroundColor: undefined, }, color: colors.main[1], padding: "23px 12px 10px 12px", @@ -123,6 +123,7 @@ export const inputOverrides = ( color: colors.main[3], }, boxShadow: `0 0 0 0 transparent !important`, + backgroundColor: colors.background.default, }, "&$error": { "&$focused": { diff --git a/stories/inputs.stories.tsx b/stories/inputs.stories.tsx index 92fb1d24..c755a3b5 100644 --- a/stories/inputs.stories.tsx +++ b/stories/inputs.stories.tsx @@ -17,13 +17,14 @@ const useStyles = makeStyles((theme) => ({ }, })); +const inputProps: Partial = { + fullWidth: true, + label: "Input Label", +}; + const Default: React.FC = () => { const classes = useStyles(); const guideClasses = useGuideStyles(); - const typographyProps: Partial = { - fullWidth: true, - label: "Input Label", - }; return (
@@ -35,27 +36,77 @@ const Default: React.FC = () => {
- - - + + + - - - + + + + +
+
+ ); +}; + +const inputWithAdornmentProps: Partial = { + ...inputProps, + InputProps: { + endAdornment: "EUR", + }, +}; + +const Adornments: React.FC = () => { + const classes = useStyles(); + const guideClasses = useGuideStyles(); + + return ( +
+ + Inputs with adornments + + + Adornments can be used to display units or loaders + + +
+ + + + + + + { storiesOf("Inputs", module) .addDecorator(Decorator) .addDecorator(GuideDecorator) - .add("default", () => ); + .add("default", () => ) + .add("with adornments", () => ); From 1f28931f997448f1173454f10de48da68b70ffe4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Thu, 9 Dec 2021 11:25:00 +0100 Subject: [PATCH 133/140] Update dark mode colors (#96) * Fix dark mode colors * Add dark palette * Update icons --- src/Alert/Alert.tsx | 27 ++++--- src/Alert/styles.ts | 16 ++++- src/IconButton/IconButton.tsx | 2 +- src/Notification/Notification.tsx | 29 ++++---- src/Notification/styles.ts | 17 ++++- src/Pagination/styles.ts | 4 +- src/Sidebar/Sidebar.tsx | 6 +- src/SidebarDrawer/SidebarDrawer.tsx | 6 +- src/icons/CompleteIcon.tsx | 4 +- src/icons/LogoDark.tsx | 26 +++++++ src/icons/NotAllowedIcon.tsx | 4 +- src/icons/RadioCheckedIcon.tsx | 2 +- src/icons/WarningIcon.tsx | 4 +- .../createSaleorTheme/createSaleorTheme.tsx | 20 +++--- .../createSaleorTheme/overrides/buttons.ts | 2 +- .../createSaleorTheme/overrides/inputs.ts | 18 ++--- .../createSaleorTheme/overrides/tables.ts | 4 +- src/theme/createSaleorTheme/palette.ts | 18 ++--- src/theme/createSaleorTheme/types.ts | 13 +--- src/theme/themes.ts | 70 +++++++------------ 20 files changed, 161 insertions(+), 131 deletions(-) create mode 100644 src/icons/LogoDark.tsx diff --git a/src/Alert/Alert.tsx b/src/Alert/Alert.tsx index b0523364..8227a516 100644 --- a/src/Alert/Alert.tsx +++ b/src/Alert/Alert.tsx @@ -1,5 +1,5 @@ import Typography from "@material-ui/core/Typography"; -import CloseIcon from "@material-ui/icons/Close"; +import { CloseIcon } from "../icons"; import clsx from "clsx"; import React from "react"; import { IconButton } from "../IconButton"; @@ -12,16 +12,19 @@ export interface AlertProps extends AlertBaseProps { close?: boolean; title?: string; } -const Icon: React.FC<{ variant: AlertVariant }> = ({ variant }) => { +interface IconProps extends React.SVGProps { + variant: AlertVariant; +} +const Icon: React.FC = ({ variant, ...props }) => { switch (variant) { case "error": - return ; + return ; case "warning": - return ; + return ; case "success": - return ; + return ; default: - return ; + return ; } }; @@ -42,8 +45,15 @@ export const Alert: React.FC = ({ return (
-
- +
+
@@ -53,6 +63,7 @@ export const Alert: React.FC = ({ className={clsx(classes.close, { [classes.closeNoContent]: !children, })} + hoverOutline={false} variant="secondary" onClick={() => setVisible(false)} data-test="close" diff --git a/src/Alert/styles.ts b/src/Alert/styles.ts index ada2c54a..c965778c 100644 --- a/src/Alert/styles.ts +++ b/src/Alert/styles.ts @@ -3,7 +3,10 @@ import { makeStyles } from "../theme"; const useStyles = makeStyles( (theme) => ({ close: { - color: theme.palette.common.black, + "&:hover": { + color: theme.palette.text.primary, + }, + color: theme.palette.text.secondary, position: "absolute", right: theme.spacing(-2), top: theme.spacing(-1), @@ -21,6 +24,17 @@ const useStyles = makeStyles( content: { padding: theme.spacing(0, 1), }, + icon: { + "& $error": { + color: theme.palette.alert.icon.error, + }, + "& $warning": { + color: theme.palette.alert.icon.warning, + }, + "& $success": { + color: theme.palette.alert.icon.success, + }, + }, root: {}, titleBar: { marginTop: 6, diff --git a/src/IconButton/IconButton.tsx b/src/IconButton/IconButton.tsx index 97f4c928..39630f9e 100644 --- a/src/IconButton/IconButton.tsx +++ b/src/IconButton/IconButton.tsx @@ -28,7 +28,7 @@ export const IconButton: React.FC = React.forwardRef( = ({ type }) => { +interface IconProps extends React.SVGProps { + type: NotificationType; +} +const Icon: React.FC = ({ type, ...props }) => { switch (type) { case "error": - return ; + return ; case "warning": - return ; + return ; case "success": - return ; + return ; default: - return ; + return ; } }; @@ -56,7 +59,7 @@ export const Notification: React.FC = ({ message={
- +
@@ -72,8 +75,7 @@ export const Notification: React.FC = ({
, diff --git a/src/Notification/styles.ts b/src/Notification/styles.ts index e59e827e..b992d088 100644 --- a/src/Notification/styles.ts +++ b/src/Notification/styles.ts @@ -10,24 +10,29 @@ const useStyles = makeStyles( minWidth: "unset", }, closeBtn: { + "&:hover": { + color: theme.palette.text.primary, + }, "& svg": { maxHeight: 20, maxWidth: 20, }, + color: theme.palette.text.secondary, padding: 10, position: "absolute", right: 5, top: 7, }, - closeBtnInfo: { - color: theme.palette.text.primary, - }, error: { + "& $icon": { + color: theme.palette.alert.icon.error, + }, backgroundColor: theme.palette.alert.paper.error, }, hiddenText: { maxHeight: 0, }, + icon: {}, info: {}, snackbar: { borderRadius: 4, @@ -43,6 +48,9 @@ const useStyles = makeStyles( paddingLeft: `calc(${iconWidth}px + ${theme.spacing(2)})`, }, success: { + "& $icon": { + color: theme.palette.alert.icon.success, + }, backgroundColor: theme.palette.alert.paper.success, }, text: { @@ -50,6 +58,9 @@ const useStyles = makeStyles( paddingTop: 5, }, warning: { + "& $icon": { + color: theme.palette.alert.icon.warning, + }, backgroundColor: theme.palette.alert.paper.warning, }, diff --git a/src/Pagination/styles.ts b/src/Pagination/styles.ts index 27f73161..db7a9504 100644 --- a/src/Pagination/styles.ts +++ b/src/Pagination/styles.ts @@ -36,7 +36,9 @@ const useStyles = makeStyles( backgroundColor: fade(theme.palette.primary.main, 0.2), }, }, - color: theme.palette.primary.main, + "&:not($actionsButtonDisabled)": { + color: theme.palette.primary.main, + }, }, root: {}, toolbar: { diff --git a/src/Sidebar/Sidebar.tsx b/src/Sidebar/Sidebar.tsx index 31757691..db53bc9d 100644 --- a/src/Sidebar/Sidebar.tsx +++ b/src/Sidebar/Sidebar.tsx @@ -2,7 +2,7 @@ import clsx from "clsx"; import React from "react"; import { Logo } from "../icons/Logo"; -import { LogoLight } from "../icons/LogoLight"; +import { LogoDark } from "../icons/LogoDark"; import { localStorageKeys } from "../localStorageKeys"; import { makeStyles, useTheme } from "../theme"; import useLocalStorage from "../tools/useLocalStorage"; @@ -53,13 +53,13 @@ export const Sidebar: React.FC = ({ toolbar, onMenuItemClick, }) => { - const theme = useTheme(); const classes = useStyles({}); const { value: isShrunkStr, setValue: setShrink } = useLocalStorage( localStorageKeys.menuShrink, false.toString() ); const isShrunk = isShrunkStr === "true"; + const { themeType } = useTheme(); return (
= ({ >
- {theme.themeType === "light" ? : } + {themeType === "dark" ? : }
{menuItems.map((menuItem) => ( = ({ menuItems, onMenuItemClick, }) => { - const theme = useTheme(); const [isOpened, setOpened] = React.useState(false); const classes = useStyles({}); const [activeMenu, setActiveMenu] = React.useState( @@ -28,6 +27,7 @@ export const SidebarDrawer: React.FC = ({ ); const [showSubmenu, setShowSubmenu] = React.useState(false); const container = React.useRef(null); + const { themeType } = useTheme(); const handleMenuItemClick = (url: string) => { setOpened(false); @@ -68,7 +68,7 @@ export const SidebarDrawer: React.FC = ({ >
- {theme.themeType === "light" ? : } + {themeType === "dark" ? : }
{menuItems.map((menuItem) => ( > = ( {...props} > - + ); diff --git a/src/icons/LogoDark.tsx b/src/icons/LogoDark.tsx new file mode 100644 index 00000000..4096cc0f --- /dev/null +++ b/src/icons/LogoDark.tsx @@ -0,0 +1,26 @@ +import React from "react"; + +export const LogoDark: React.FC = () => ( + + + + +); + +LogoDark.displayName = "LogoDark"; diff --git a/src/icons/NotAllowedIcon.tsx b/src/icons/NotAllowedIcon.tsx index f17a6a02..297a1fae 100644 --- a/src/icons/NotAllowedIcon.tsx +++ b/src/icons/NotAllowedIcon.tsx @@ -11,13 +11,13 @@ export const NotAllowedIcon: React.FC> = ( xmlns="http://www.w3.org/2000/svg" {...props} > - + ); diff --git a/src/icons/RadioCheckedIcon.tsx b/src/icons/RadioCheckedIcon.tsx index fae5c337..b7e4e238 100644 --- a/src/icons/RadioCheckedIcon.tsx +++ b/src/icons/RadioCheckedIcon.tsx @@ -4,7 +4,7 @@ import React from "react"; export const RadioCheckedIcon = createSvgIcon( <> - + , "RadioCheckedIcon" ); diff --git a/src/icons/WarningIcon.tsx b/src/icons/WarningIcon.tsx index 8e8ad7a8..902adc6c 100644 --- a/src/icons/WarningIcon.tsx +++ b/src/icons/WarningIcon.tsx @@ -10,12 +10,12 @@ export const WarningIcon: React.FC> = (props) => ( {...props} > - + ); diff --git a/src/theme/createSaleorTheme/createSaleorTheme.tsx b/src/theme/createSaleorTheme/createSaleorTheme.tsx index 1606b274..d6a3c604 100644 --- a/src/theme/createSaleorTheme/createSaleorTheme.tsx +++ b/src/theme/createSaleorTheme/createSaleorTheme.tsx @@ -120,12 +120,12 @@ export const createTheme = (colors: SaleorThemeColors): SaleorTheme => MuiFormLabel: { filled: { "&&:not($error)": { - color: colors.primary, + color: colors.active[1], }, }, root: { "&&$focused:not($error)": { - color: colors.font.gray, + color: colors.main[3], }, }, }, @@ -161,7 +161,7 @@ export const createTheme = (colors: SaleorThemeColors): SaleorTheme => root: { "&$selected, &$selected:focus, &$selected:hover": { backgroundColor: [colors.active[5], "!important"] as any, - color: colors.primary, + color: colors.active[1], fontWeight: 700, }, "&:hover": { @@ -183,7 +183,7 @@ export const createTheme = (colors: SaleorThemeColors): SaleorTheme => action: { "& $MuiIconButton": { "& svg": { - color: colors.font.default, + color: colors.main[1], }, }, display: "block", @@ -198,7 +198,7 @@ export const createTheme = (colors: SaleorThemeColors): SaleorTheme => backgroundColor: colors.background.paper, boxShadow: "0 6px 10px 0px rgba(0, 0, 0, 0.15), 0 1px 18px 0px rgba(0, 0, 0, 0.12), 0 3px 5px -1px rgba(0, 0, 0, 0.10)", - color: colors.font.default, + color: colors.main[1], display: "block", maxWidth: 480, }, @@ -215,14 +215,14 @@ export const createTheme = (colors: SaleorThemeColors): SaleorTheme => }, MuiTouchRipple: { child: { - backgroundColor: fade(colors.primary, 1), + backgroundColor: fade(colors.active[1], 1), }, childLeaving: { - backgroundColor: fade(colors.primary, 1), + backgroundColor: fade(colors.active[1], 1), }, ripple: { "&$rippleVisible": { - backgroundColor: fade(colors.primary, 1), + backgroundColor: fade(colors.active[1], 1), }, borderRadius: "100%", }, @@ -297,7 +297,7 @@ export const createTheme = (colors: SaleorThemeColors): SaleorTheme => fontFamily, }, body1: { - color: colors.font.default, + color: colors.main[1], fontSize: "1.6rem", }, body2: { @@ -316,7 +316,7 @@ export const createTheme = (colors: SaleorThemeColors): SaleorTheme => }, h4: { fontSize: "3.4rem", - color: colors.font.default, + color: colors.main[1], }, h5: { fontSize: "2.1rem", diff --git a/src/theme/createSaleorTheme/overrides/buttons.ts b/src/theme/createSaleorTheme/overrides/buttons.ts index eccef1e3..bd0e6786 100644 --- a/src/theme/createSaleorTheme/overrides/buttons.ts +++ b/src/theme/createSaleorTheme/overrides/buttons.ts @@ -15,7 +15,7 @@ export const buttonOverrides = ( contained: { "&$disabled": { "&$containedPrimary": { - color: colors.secondary, + color: colors.background.paper, backgroundColor: colors.disabled, }, "&$containedSecondary": { diff --git a/src/theme/createSaleorTheme/overrides/inputs.ts b/src/theme/createSaleorTheme/overrides/inputs.ts index de40ed6c..6dbf95e9 100644 --- a/src/theme/createSaleorTheme/overrides/inputs.ts +++ b/src/theme/createSaleorTheme/overrides/inputs.ts @@ -19,17 +19,17 @@ export const inputOverrides = ( MuiInput: { input: { "&:-webkit-autofill": { - WebkitTextFillColor: colors.font.default, + WebkitTextFillColor: colors.main[1], boxShadow: `inset 0 0 0px 9999px ${colors.active[5]}`, }, "&::placeholder": { opacity: "1 !important" as any, }, - color: colors.font.default, + color: colors.main[1], }, underline: { "&:after": { - borderBottomColor: colors.primary, + borderBottomColor: colors.active[1], }, }, }, @@ -42,7 +42,7 @@ export const inputOverrides = ( color: colors.disabled, }, "&::placeholder": { - color: colors.font.gray, + color: colors.main[3], opacity: "1 !important" as any, }, borderRadius: "4px", @@ -72,7 +72,7 @@ export const inputOverrides = ( }, "&&$focused": { "&:not($error)": { - color: colors.primary, + color: colors.active[1], }, }, "&:not($error):hover label": { @@ -149,22 +149,22 @@ export const inputOverrides = ( }, "& input": { "& fieldset": { - borderColor: colors.primary, + borderColor: colors.active[1], }, "&::placeholder": { opacity: [[1], "!important"] as any, }, - color: colors.font.default, + color: colors.main[1], }, }, "&:hover": { boxShadow: getInputBoxShadow(colors.active[5]), "& input": { - color: colors.font.default, + color: colors.main[1], }, "&&&": { "& fieldset": { - borderColor: colors.primary, + borderColor: colors.active[1], }, }, }, diff --git a/src/theme/createSaleorTheme/overrides/tables.ts b/src/theme/createSaleorTheme/overrides/tables.ts index f8afc9c2..6bae2cd6 100644 --- a/src/theme/createSaleorTheme/overrides/tables.ts +++ b/src/theme/createSaleorTheme/overrides/tables.ts @@ -19,7 +19,7 @@ export const tableOverrides = ( head: { fontSize: "1.4rem", fontWeight: 400, - color: colors.font.gray, + color: colors.main[3], }, paddingCheckbox: { "&:first-child": { @@ -48,7 +48,7 @@ export const tableOverrides = ( }, MuiTablePagination: { input: { - color: colors.primary, + color: colors.active[1], fontSize: "1.4rem", }, }, diff --git a/src/theme/createSaleorTheme/palette.ts b/src/theme/createSaleorTheme/palette.ts index 2b12b2c0..8ffbc9c1 100644 --- a/src/theme/createSaleorTheme/palette.ts +++ b/src/theme/createSaleorTheme/palette.ts @@ -10,28 +10,28 @@ export const createPalette = ( background: colors.background, divider: colors.divider, error: { - main: colors.error, + main: colors.errorAction[1], }, primary: { contrastText: "#ffffff", - dark: colors.font.textDisabled, - main: colors.primary, + dark: colors.main[4], + main: colors.active[1], }, secondary: { contrastText: "#ffffff", - main: colors.secondary, + main: colors.background.paper, }, success: { main: colors.success, }, text: { - disabled: colors.font.textDisabled, - hint: colors.font.gray, - primary: colors.font.default, - secondary: colors.font.gray, + disabled: colors.main[4], + hint: colors.main[3], + primary: colors.main[1], + secondary: colors.main[3], }, textHighlighted: { - active: colors.primary, + active: colors.active[1], inactive: colors.highlightInactive.default, }, type: colors.theme, diff --git a/src/theme/createSaleorTheme/types.ts b/src/theme/createSaleorTheme/types.ts index 50fd1440..e833526d 100644 --- a/src/theme/createSaleorTheme/types.ts +++ b/src/theme/createSaleorTheme/types.ts @@ -4,13 +4,7 @@ import type { Theme, ThemeOptions } from "@material-ui/core/styles"; export type ThemeType = "light" | "dark"; export type SaleorThemeColors = Record< - | "primary" - | "secondary" - | "error" - | "paperBorder" - | "autofill" - | "success" - | "disabled", + "paperBorder" | "autofill" | "success" | "disabled", string > & { highlightInactive: Record<"default", string>; @@ -20,11 +14,6 @@ export type SaleorThemeColors = Record< checkbox: Record<"default", string>; } & { divider: string; -} & { - font: Record< - "default" | "gray" | "button" | "textButton" | "textDisabled", - string - >; } & { gray: Record<"default" | "disabled", string>; } & { diff --git a/src/theme/themes.ts b/src/theme/themes.ts index 94bf1eac..ce64538d 100644 --- a/src/theme/themes.ts +++ b/src/theme/themes.ts @@ -1,20 +1,18 @@ -import { fade } from "@material-ui/core/styles/colorManipulator"; - import { SaleorThemeColors } from "./createSaleorTheme"; export const dark: SaleorThemeColors = { alert: { paper: { - error: "#E0444E", - info: "#2E2F31", - success: "#5DC292", - warning: "#E29A2E", + error: "#B65757", + info: "rgba(250, 250, 250, 1)", + success: "rgba(67, 156, 123, 1)", + warning: "rgba(183, 138, 72, 1)", }, icon: { error: "#FE6E76", info: "#FAFAFA", - success: "#5DC292", - warning: "#FFB84E", + success: "#A4E8BA", + warning: "#FFE6AB", }, }, highlightInactive: { @@ -22,39 +20,31 @@ export const dark: SaleorThemeColors = { }, autofill: "#5D5881", background: { - default: "#1D1E1F", - paper: "#2E2F31", + default: "#222431", + paper: "#34384B", }, checkbox: { default: "#FFFFFF", }, divider: "#252728", - error: "#C22D74", - font: { - button: "#202124", - default: "#FCFCFC", - gray: "#9E9D9D", - textButton: "#FFFFFF", - textDisabled: "#FCFCFC", - }, gray: { default: "#202124", disabled: "rgba(32, 33, 36, 0.6)", }, active: { - 1: "#056DFF", - 2: "#378AFF", - 3: "#68A7FF", - 4: "#C1DBFF", - 5: "#E6F0FF", + 1: "#3EA3FF", + 2: "#388AD6", + 3: "#3371AD", + 4: "#2D5783", + 5: "#283E5A", }, main: { - 1: "#FCFCFC", - 2: "rgba(252, 252, 252, 0.8)", - 3: "rgba(252, 252, 252, 0.6)", - 4: "rgba(252, 252, 252, 0.4)", - 5: "rgba(252, 252, 252, 0.1)", + 1: "#FAFAFA", + 2: "rgba(250, 250, 250, 0.8)", + 3: "rgba(250, 250, 250, 0.6)", + 4: "rgba(250, 250, 250, 0.4)", + 5: "rgba(250, 250, 250, 0.1)", }, fail: { dark: "#B65757", @@ -62,17 +52,15 @@ export const dark: SaleorThemeColors = { light: "#FEDEDE", }, errorAction: { - 1: "#B63755", - 2: "#D36474", - 3: "#E9878B", - 4: "#F7B6B2", - 5: "#FBDDD8", + 1: "#EB2B59", + 2: "rgba(235, 43, 89, 0.8)", + 3: "rgba(235, 43, 89, 0.6)", + 4: "rgba(235, 43, 89, 0.4)", + 5: "rgba(235, 43, 89, 0.2)", }, - disabled: "#CCDDDD", + disabled: "#5D6D83", paperBorder: "#252728", - primary: "#13BEBB", - secondary: "#21125E", success: "#5DC292", theme: "dark", }; @@ -103,14 +91,6 @@ export const light: SaleorThemeColors = { default: "#616161", }, divider: "#EAEAEA", - error: "#FE6D76", - font: { - button: "#FFFFFF", - default: "#28234A", - gray: fade("#28234A", 0.6), - textButton: "#06847B", - textDisabled: fade("#28234A", 0.4), - }, gray: { default: "#C8C8C8", disabled: "#C0CFE2", @@ -145,8 +125,6 @@ export const light: SaleorThemeColors = { disabled: "#CCDDDD", paperBorder: "#EAEAEA", - primary: "#056DFF", - secondary: "#FFFFFF", success: "#5DC292", theme: "light", }; From 10a22e8d2ef5e548603db6bd4ad2706e413cb6ac Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Fri, 10 Dec 2021 10:10:57 +0100 Subject: [PATCH 134/140] 0.3.0-a.6 --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index b55258d6..2be50984 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@saleor/macaw-ui", - "version": "0.3.0-a.5", + "version": "0.3.0-a.6", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index 261ddf13..a9e9411d 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "0.3.0-a.5", + "version": "0.3.0-a.6", "license": "CC-BY-4.0", "main": "dist/cjs/index.js", "module": "dist/esm/index.js", From 707034bd108a754b084413f02515f258bb23d64b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Tue, 14 Dec 2021 10:54:00 +0100 Subject: [PATCH 135/140] Minor fixes (#97) * Fix letter spacing * Fix sidebar styles --- src/LayoutButton/styles.ts | 2 +- src/Sidebar/ExpandButton.tsx | 7 ++++--- src/Sidebar/MenuItem.tsx | 2 +- src/theme/createSaleorTheme/createSaleorTheme.tsx | 3 +++ src/theme/createSaleorTheme/overrides/buttons.ts | 2 +- 5 files changed, 10 insertions(+), 6 deletions(-) diff --git a/src/LayoutButton/styles.ts b/src/LayoutButton/styles.ts index 5759392b..d53f3970 100644 --- a/src/LayoutButton/styles.ts +++ b/src/LayoutButton/styles.ts @@ -19,7 +19,7 @@ const useStyles = makeStyles( fontSize: theme.typography.body1.fontSize, fontWeight: 500, height: 40, - letterSpacing: "0.06rem", + letterSpacing: "0.02rem", padding: theme.spacing(0.5, 2), textAlign: "center", transition: theme.transitions.duration.shorter + "ms", diff --git a/src/Sidebar/ExpandButton.tsx b/src/Sidebar/ExpandButton.tsx index a63d59e6..c3ed4802 100644 --- a/src/Sidebar/ExpandButton.tsx +++ b/src/Sidebar/ExpandButton.tsx @@ -1,7 +1,7 @@ import { ButtonProps } from "@material-ui/core/Button"; import clsx from "clsx"; import React from "react"; -import { ArrowRightIcon } from "../icons"; +import { ChevronIcon } from "../icons"; import { SquareButton } from "../SquareButton"; import { makeStyles } from "../theme"; @@ -10,9 +10,10 @@ const useStyles = makeStyles( (theme) => ({ arrow: { transition: theme.transitions.duration.shortest + "ms", + transform: "rotate(-90deg)", }, shrunk: { - transform: "scaleX(-1)", + transform: "rotate(-90deg) scaleY(-1)", }, }), { @@ -32,7 +33,7 @@ export const ExpandButton: React.FC = ({ return ( - icon: , indeterminateIcon: , }, + MuiMenuItem: { + button: false, + }, MuiTableRow: { hover: true, }, diff --git a/src/theme/createSaleorTheme/overrides/buttons.ts b/src/theme/createSaleorTheme/overrides/buttons.ts index bd0e6786..f78ef7f0 100644 --- a/src/theme/createSaleorTheme/overrides/buttons.ts +++ b/src/theme/createSaleorTheme/overrides/buttons.ts @@ -57,7 +57,7 @@ export const buttonOverrides = ( border: `1px solid ${colors.active[1]}`, borderRadius: 4, fontSize: "1.6rem", - letterSpacing: "0.06rem", + letterSpacing: "0.02rem", lineHeight: 1.55, padding: "7px 16px", textTransform: "none", From fbafbd8a3f204adc5171f3e325f1456270aafb65 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Mon, 27 Dec 2021 10:22:28 +0100 Subject: [PATCH 136/140] Fix misplaced elements in responsive mode (#99) --- src/UserChipMenu/styles.ts | 16 ++++++---------- 1 file changed, 6 insertions(+), 10 deletions(-) diff --git a/src/UserChipMenu/styles.ts b/src/UserChipMenu/styles.ts index ddc14ea6..5588bcb2 100644 --- a/src/UserChipMenu/styles.ts +++ b/src/UserChipMenu/styles.ts @@ -1,27 +1,17 @@ import { makeStyles } from "../theme"; const avatarSize = 32; -const mobileAvatarSize = 42; const useStyles = makeStyles( (theme) => ({ avatar: { "&&": { - [theme.breakpoints.down("sm")]: { - height: mobileAvatarSize, - width: mobileAvatarSize, - }, height: avatarSize, width: avatarSize, }, backgroundColor: theme.palette.background.paper, }, avatarInitials: { - [theme.breakpoints.down("sm")]: { - height: mobileAvatarSize, - width: mobileAvatarSize, - lineHeight: mobileAvatarSize + "px", - }, height: avatarSize, lineHeight: avatarSize + "px", width: avatarSize, @@ -41,6 +31,9 @@ const useStyles = makeStyles( textAlign: "left", }, labelContainer: { + [theme.breakpoints.down("sm")]: { + marginLeft: 0, + }, display: "inline-flex", alignItems: "center", marginLeft: theme.spacing(1), @@ -51,6 +44,9 @@ const useStyles = makeStyles( }, userChip: { "&&": { + [theme.breakpoints.down("sm")]: { + padding: theme.spacing(0.5), + }, padding: theme.spacing(0.5, 3, 0.5, 1), }, ...theme.typography.body1, From 0afd501e470317bd356e5dec3f820a629bc4496a Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Tue, 28 Dec 2021 13:11:18 +0100 Subject: [PATCH 137/140] Add letter spacing and fix font family (#98) * Add letter spacing and fix font family * Fix savebar height --- src/ActionBar/styles.ts | 2 +- src/LayoutButton/styles.ts | 2 +- src/UserChipMenu/styles.ts | 1 - src/theme/createSaleorTheme/createSaleorTheme.tsx | 2 ++ src/theme/createSaleorTheme/overrides/buttons.ts | 1 - 5 files changed, 4 insertions(+), 4 deletions(-) diff --git a/src/ActionBar/styles.ts b/src/ActionBar/styles.ts index 50cf67b2..44156da6 100644 --- a/src/ActionBar/styles.ts +++ b/src/ActionBar/styles.ts @@ -19,7 +19,7 @@ const useStyles = makeStyles( borderBottomRightRadius: 0, }, root: { - height: 80, + height: 72, }, shadow: { boxShadow: `0 -24px 20px -20px rgba(0, 0, 0, 0.15)`, diff --git a/src/LayoutButton/styles.ts b/src/LayoutButton/styles.ts index d53f3970..2ad29901 100644 --- a/src/LayoutButton/styles.ts +++ b/src/LayoutButton/styles.ts @@ -13,13 +13,13 @@ const useStyles = makeStyles( background: theme.palette.saleor.active[4], color: theme.palette.primary.main, }, + ...theme.typography.body1, background: fade(theme.palette.background.paper, 0.4), borderRadius: 4, color: theme.palette.text.secondary, fontSize: theme.typography.body1.fontSize, fontWeight: 500, height: 40, - letterSpacing: "0.02rem", padding: theme.spacing(0.5, 2), textAlign: "center", transition: theme.transitions.duration.shorter + "ms", diff --git a/src/UserChipMenu/styles.ts b/src/UserChipMenu/styles.ts index 5588bcb2..3367138d 100644 --- a/src/UserChipMenu/styles.ts +++ b/src/UserChipMenu/styles.ts @@ -26,7 +26,6 @@ const useStyles = makeStyles( justifyContent: "center", }, label: { - letterSpacing: "0.02em", lineHeight: 1.2, textAlign: "left", }, diff --git a/src/theme/createSaleorTheme/createSaleorTheme.tsx b/src/theme/createSaleorTheme/createSaleorTheme.tsx index 5cadb8db..48748ca3 100644 --- a/src/theme/createSaleorTheme/createSaleorTheme.tsx +++ b/src/theme/createSaleorTheme/createSaleorTheme.tsx @@ -298,6 +298,7 @@ export const createTheme = (colors: SaleorThemeColors): SaleorTheme => typography: { allVariants: { fontFamily, + letterSpacing: "0.02rem", }, body1: { color: colors.main[1], @@ -311,6 +312,7 @@ export const createTheme = (colors: SaleorThemeColors): SaleorTheme => }, caption: { fontSize: "1.2rem", + letterSpacing: 0, }, fontFamily, h1: { diff --git a/src/theme/createSaleorTheme/overrides/buttons.ts b/src/theme/createSaleorTheme/overrides/buttons.ts index f78ef7f0..4eec97ee 100644 --- a/src/theme/createSaleorTheme/overrides/buttons.ts +++ b/src/theme/createSaleorTheme/overrides/buttons.ts @@ -57,7 +57,6 @@ export const buttonOverrides = ( border: `1px solid ${colors.active[1]}`, borderRadius: 4, fontSize: "1.6rem", - letterSpacing: "0.02rem", lineHeight: 1.55, padding: "7px 16px", textTransform: "none", From 19f8d840cdc4d2727b84643bacbd30d63cf44244 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Tue, 11 Jan 2022 13:07:46 +0100 Subject: [PATCH 138/140] 0.3.0-a.7 --- package-lock.json | 2 +- package.json | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/package-lock.json b/package-lock.json index 2be50984..7dd95419 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,6 +1,6 @@ { "name": "@saleor/macaw-ui", - "version": "0.3.0-a.6", + "version": "0.3.0-a.7", "lockfileVersion": 1, "requires": true, "dependencies": { diff --git a/package.json b/package.json index a9e9411d..98b4f4d3 100644 --- a/package.json +++ b/package.json @@ -1,5 +1,5 @@ { - "version": "0.3.0-a.6", + "version": "0.3.0-a.7", "license": "CC-BY-4.0", "main": "dist/cjs/index.js", "module": "dist/esm/index.js", From 6d504b8e54ce2b9adb2933eca64a5cc46dcc97ee Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Tue, 11 Jan 2022 15:25:57 +0100 Subject: [PATCH 139/140] Fix rebase artifact --- src/Sidebar/Sidebar.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/Sidebar/Sidebar.tsx b/src/Sidebar/Sidebar.tsx index db53bc9d..ee07a56a 100644 --- a/src/Sidebar/Sidebar.tsx +++ b/src/Sidebar/Sidebar.tsx @@ -27,11 +27,9 @@ const useStyles = makeStyles( }, root: { transition: "width 0.5s ease", - minWidth: menuWidth, width: menuWidth, }, rootShrink: { - minWidth: shrunkMenuWidth, width: shrunkMenuWidth, }, toolbarContainer: { From 1a77928f286af9e80685c104ca59809b770c1cdc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Tue, 11 Jan 2022 15:51:06 +0100 Subject: [PATCH 140/140] Update size limits --- package.json | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/package.json b/package.json index 98b4f4d3..a2369ce5 100644 --- a/package.json +++ b/package.json @@ -78,11 +78,11 @@ "size-limit": [ { "path": "dist/cjs/index.js", - "limit": "40 KB" + "limit": "65 KB" }, { "path": "dist/esm/index.js", - "limit": "40 KB" + "limit": "65 KB" } ], "devDependencies": {