From 1eab4ac8a6dc655d6c120f0abe01d7adb0329afc Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Dominik=20=C5=BBegle=C5=84?= Date: Mon, 21 Feb 2022 12:38:27 +0100 Subject: [PATCH] Preview pills (#1880) * Add pill component * Add preview pill to gift card list * Use outlined prop * Add arrow to tooltip * Add preview pill to gift card view headers * Add preview pills to mark preview features * Update macaw * Update tests * Update messages * Add black color to pill preview tooltip Co-authored-by: Wojciech --- locale/defaultMessages.json | 8 + package-lock.json | 5 +- package.json | 2 +- src/components/AppLayout/AppLayout.tsx | 2 +- .../ChannelsAvailabilityDropdown.tsx | 2 +- src/components/Container.tsx | 3 +- .../NavigatorButton/NavigatorButton.tsx | 103 ++--- src/components/PageHeader/PageHeader.tsx | 66 +-- .../PageTitleWithStatusChip.tsx | 39 -- .../PageTitleWithStatusChip/index.tsx | 2 - .../PreviewPill/PreviewPill.stories.tsx | 9 + src/components/PreviewPill/PreviewPill.tsx | 53 +++ src/components/PreviewPill/index.ts | 2 + src/components/PreviewPill/messages.ts | 15 + src/components/PreviewPill/styles.ts | 31 ++ .../GiftCardSettings/GiftCardSettingsPage.tsx | 6 +- .../GiftCardUpdatePageHeader.tsx | 13 +- .../GiftCardUpdatePageHeader/styles.ts | 13 + .../GiftCardsListHeader.tsx | 1 + .../GiftCardsListHeader/styles.ts | 16 + .../PluginsList/PluginAvailabilityStatus.tsx | 2 +- .../ProductTypeDetails/ProductTypeDetails.tsx | 31 +- .../ProductStocks/ProductStocks.tsx | 15 +- .../ProductVariantCheckoutSettings.tsx | 12 +- .../ProductVariantCheckoutSettings/styles.ts | 12 + .../__snapshots__/Stories.test.ts.snap | 433 +++++++++++++++--- src/styles/mixins.ts | 9 + .../WarehouseSettings/WarehouseSettings.tsx | 5 + 28 files changed, 695 insertions(+), 215 deletions(-) delete mode 100644 src/components/PageTitleWithStatusChip/PageTitleWithStatusChip.tsx delete mode 100644 src/components/PageTitleWithStatusChip/index.tsx create mode 100644 src/components/PreviewPill/PreviewPill.stories.tsx create mode 100644 src/components/PreviewPill/PreviewPill.tsx create mode 100644 src/components/PreviewPill/index.ts create mode 100644 src/components/PreviewPill/messages.ts create mode 100644 src/components/PreviewPill/styles.ts create mode 100644 src/giftCards/GiftCardUpdate/GiftCardUpdatePageHeader/styles.ts create mode 100644 src/giftCards/GiftCardsList/GiftCardsListHeader/styles.ts create mode 100644 src/products/components/ProductVariantCheckoutSettings/styles.ts create mode 100644 src/styles/mixins.ts diff --git a/locale/defaultMessages.json b/locale/defaultMessages.json index 59500c719..bc7fd5269 100644 --- a/locale/defaultMessages.json +++ b/locale/defaultMessages.json @@ -2411,6 +2411,14 @@ "context": "button", "string": "Go back to dashboard" }, + "src_dot_components_dot_PreviewPill_dot_label": { + "context": "indicator that feature is in preview mode", + "string": "Preview" + }, + "src_dot_components_dot_PreviewPill_dot_tooltip": { + "context": "tooltip", + "string": "This feature is in a preview state and can be subject to changes at later point" + }, "src_dot_components_dot_PriceField_dot_4072537038": { "string": "Price cannot be lower than 0" }, diff --git a/package-lock.json b/package-lock.json index a79f5ef46..5072bd334 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5332,9 +5332,8 @@ } }, "@saleor/macaw-ui": { - "version": "0.3.1-1", - "resolved": "https://registry.npmjs.org/@saleor/macaw-ui/-/macaw-ui-0.3.1-1.tgz", - "integrity": "sha512-RBi5QY8J+Y2rX9fm3ERXV+KywgbCmoeWcU/Snt0pI2P3f6JuT7x4eCVJ+Z1atLy4gOmoqeI2kB0EqeIel59ZFQ==", + "version": "github:saleor/macaw-ui#bdb34e1b7ec1e73cb8b188aef651e599b8b8b35f", + "from": "github:saleor/macaw-ui#SALEOR-5970-mini-pill-variant", "requires": { "clsx": "^1.1.1", "lodash": "^4.17.21", diff --git a/package.json b/package.json index 148176d42..717a5c4be 100644 --- a/package.json +++ b/package.json @@ -28,7 +28,7 @@ "@material-ui/icons": "^4.11.2", "@material-ui/lab": "^4.0.0-alpha.58", "@material-ui/styles": "^4.11.4", - "@saleor/macaw-ui": "^0.3.1-1", + "@saleor/macaw-ui": "github:saleor/macaw-ui#SALEOR-5970-mini-pill-variant", "@saleor/sdk": "^0.4.2", "@sentry/react": "^6.0.0", "@types/faker": "^5.1.6", diff --git a/src/components/AppLayout/AppLayout.tsx b/src/components/AppLayout/AppLayout.tsx index 66138ac62..fdf4cf7a2 100644 --- a/src/components/AppLayout/AppLayout.tsx +++ b/src/components/AppLayout/AppLayout.tsx @@ -73,7 +73,7 @@ const useStyles = makeStyles( gridTemplateAreas: `"headerToolbar" "headerAnchor"` }, - marginBottom: theme.spacing(3) + marginBottom: theme.spacing(6) }, headerAnchor: { gridArea: "headerAnchor" diff --git a/src/components/ChannelsAvailabilityDropdown/ChannelsAvailabilityDropdown.tsx b/src/components/ChannelsAvailabilityDropdown/ChannelsAvailabilityDropdown.tsx index ab5a6b184..901a75253 100644 --- a/src/components/ChannelsAvailabilityDropdown/ChannelsAvailabilityDropdown.tsx +++ b/src/components/ChannelsAvailabilityDropdown/ChannelsAvailabilityDropdown.tsx @@ -48,7 +48,7 @@ export const ChannelsAvailabilityDropdown: React.FC null} // required for dashed border + outlined /> diff --git a/src/components/Container.tsx b/src/components/Container.tsx index e9c072bf7..91f67c3a2 100644 --- a/src/components/Container.tsx +++ b/src/components/Container.tsx @@ -13,7 +13,8 @@ const useStyles = makeStyles( [theme.breakpoints.up("sm")]: { padding: theme.spacing(0, 3) }, - padding: theme.spacing(0, 1) + padding: theme.spacing(0, 1), + position: "relative" } }), { diff --git a/src/components/NavigatorButton/NavigatorButton.tsx b/src/components/NavigatorButton/NavigatorButton.tsx index 21118dc53..51b4e29d1 100644 --- a/src/components/NavigatorButton/NavigatorButton.tsx +++ b/src/components/NavigatorButton/NavigatorButton.tsx @@ -1,69 +1,60 @@ import { Grow, Paper, Popper } from "@material-ui/core"; import { IconButtonProps } from "@material-ui/core/IconButton"; import { LayoutButton, makeStyles, NavigatorIcon } from "@saleor/macaw-ui"; +import { triangle } from "@saleor/styles/mixins"; import classNames from "classnames"; import React from "react"; import { FormattedMessage } from "react-intl"; const useStyles = makeStyles( - theme => { - const triangle = (color: string, width: number) => ({ - borderBottom: `${width}px solid ${color}`, - borderLeft: `${width}px solid transparent`, - borderRight: `${width}px solid transparent`, - height: 0, - width: 0 - }); + theme => ({ + keyTile: { + "&:first-child": { + marginLeft: theme.spacing() + }, + alignItems: "center", + background: theme.palette.background.default, + borderRadius: 8, + display: "inline-flex", + height: 32, + justifyContent: "center", + marginLeft: theme.spacing(0.5), + padding: theme.spacing(), + width: 32 + }, + keyTileLabel: { + verticalAlign: "middle" + }, + paper: { + "&:after": { + ...triangle(theme.palette.background.paper, 7), + content: "''", + left: 18, + position: "absolute", + top: -7 + }, + "&:before": { + ...triangle(theme.palette.divider, 8), + content: "''", + left: `calc(1px + ${theme.spacing(2)})`, + position: "absolute", + top: theme.spacing(-1) + }, + border: `1px solid ${theme.palette.divider}`, + borderRadius: 6, + marginTop: theme.spacing(2), + padding: theme.spacing(2), + position: "relative" + }, - return { - keyTile: { - "&:first-child": { - marginLeft: theme.spacing() - }, - alignItems: "center", - background: theme.palette.background.default, - borderRadius: 8, - display: "inline-flex", - height: 32, - justifyContent: "center", - marginLeft: theme.spacing(0.5), - padding: theme.spacing(), - width: 32 + root: { + "&:hover path": { + color: theme.palette.primary.main }, - keyTileLabel: { - verticalAlign: "middle" - }, - paper: { - "&:after": { - ...triangle(theme.palette.background.paper, 7), - content: "''", - left: 18, - position: "absolute", - top: -7 - }, - "&:before": { - ...triangle(theme.palette.divider, 8), - content: "''", - left: `calc(1px + ${theme.spacing(2)})`, - position: "absolute", - top: theme.spacing(-1) - }, - border: `1px solid ${theme.palette.divider}`, - borderRadius: 6, - marginTop: theme.spacing(2), - padding: theme.spacing(2), - position: "relative" - }, - - root: { - "&:hover path": { - color: theme.palette.primary.main - }, - marginRight: theme.spacing(2), - width: 40 - } - }; - }, + marginRight: theme.spacing(2), + width: 40 + } + }), { name: "NavigatorButton" } diff --git a/src/components/PageHeader/PageHeader.tsx b/src/components/PageHeader/PageHeader.tsx index 8b90c7bd5..bbee3a1b3 100644 --- a/src/components/PageHeader/PageHeader.tsx +++ b/src/components/PageHeader/PageHeader.tsx @@ -3,6 +3,7 @@ import { makeStyles } from "@saleor/macaw-ui"; import React from "react"; import ExtendedPageHeader from "../ExtendedPageHeader"; +import PreviewPill from "../PreviewPill"; import Skeleton from "../Skeleton"; const useStyles = makeStyles( @@ -10,6 +11,10 @@ const useStyles = makeStyles( limit: { marginRight: theme.spacing(4) }, + preview: { + position: "absolute", + top: theme.spacing(-4) + }, root: { alignItems: "center", display: "flex", @@ -47,6 +52,7 @@ interface PageHeaderProps { limitText?: string; title?: React.ReactNode; cardMenu?: React.ReactNode; + preview?: boolean; } const PageHeader: React.FC = props => { @@ -57,39 +63,43 @@ const PageHeader: React.FC = props => { underline, limitText, title, - cardMenu + cardMenu, + preview } = props; const classes = useStyles(props); return ( - - - {title !== undefined ? ( - title - ) : ( - - )} - - {cardMenu} - - } - > -
- {limitText && ( - - {limitText} - - )} - {children} -
- + <> + {preview && } + + + {title !== undefined ? ( + title + ) : ( + + )} + + {cardMenu} + + } + > +
+ {limitText && ( + + {limitText} + + )} + {children} +
+ + ); }; diff --git a/src/components/PageTitleWithStatusChip/PageTitleWithStatusChip.tsx b/src/components/PageTitleWithStatusChip/PageTitleWithStatusChip.tsx deleted file mode 100644 index adbc0ac31..000000000 --- a/src/components/PageTitleWithStatusChip/PageTitleWithStatusChip.tsx +++ /dev/null @@ -1,39 +0,0 @@ -import HorizontalSpacer from "@saleor/apps/components/HorizontalSpacer"; -import { makeStyles } from "@saleor/macaw-ui"; -import React from "react"; - -import ExtendedPageHeader from "../ExtendedPageHeader"; -export interface PageTitleWithStatusChipProps { - title: string; -} - -const useStyles = makeStyles( - () => ({ - container: { - alignItems: "center", - display: "flex" - } - }), - { name: "OrderDetailsPageTitleWithStatusChip" } -); - -const PageTitleWithStatusChip: React.FC = ({ - title, - children -}) => { - const classes = useStyles({}); - - return ( - - <> - - {children} - - - ); -}; - -export default PageTitleWithStatusChip; diff --git a/src/components/PageTitleWithStatusChip/index.tsx b/src/components/PageTitleWithStatusChip/index.tsx deleted file mode 100644 index 705df7c26..000000000 --- a/src/components/PageTitleWithStatusChip/index.tsx +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./PageTitleWithStatusChip"; -export { default } from "./PageTitleWithStatusChip"; diff --git a/src/components/PreviewPill/PreviewPill.stories.tsx b/src/components/PreviewPill/PreviewPill.stories.tsx new file mode 100644 index 000000000..f8aee682d --- /dev/null +++ b/src/components/PreviewPill/PreviewPill.stories.tsx @@ -0,0 +1,9 @@ +import Decorator from "@saleor/storybook/Decorator"; +import { storiesOf } from "@storybook/react"; +import React from "react"; + +import PreviewPill from "./PreviewPill"; + +storiesOf("Component / Preview Pill", module) + .addDecorator(Decorator) + .add("default", () => ); diff --git a/src/components/PreviewPill/PreviewPill.tsx b/src/components/PreviewPill/PreviewPill.tsx new file mode 100644 index 000000000..f065b567b --- /dev/null +++ b/src/components/PreviewPill/PreviewPill.tsx @@ -0,0 +1,53 @@ +import { Grow, Paper, Popper, Typography } from "@material-ui/core"; +import { Pill } from "@saleor/macaw-ui"; +import React from "react"; +import { useIntl } from "react-intl"; + +import messages from "./messages"; +import useStyles from "./styles"; + +export interface PreviewPillProps { + className?: string; +} + +export const PreviewPill: React.FC = ({ className }) => { + const intl = useIntl(); + const [active, setActive] = React.useState(false); + const anchor = React.useRef(null); + const classes = useStyles(); + + return ( + <> + setActive(true)} + onMouseLeave={() => setActive(false)} + /> + + {({ TransitionProps }) => ( + + + + {intl.formatMessage(messages.tooltip)} + + + + )} + + + ); +}; + +PreviewPill.displayName = "PreviewPill"; +export default PreviewPill; diff --git a/src/components/PreviewPill/index.ts b/src/components/PreviewPill/index.ts new file mode 100644 index 000000000..fc5e4cbed --- /dev/null +++ b/src/components/PreviewPill/index.ts @@ -0,0 +1,2 @@ +export * from "./PreviewPill"; +export { default } from "./PreviewPill"; diff --git a/src/components/PreviewPill/messages.ts b/src/components/PreviewPill/messages.ts new file mode 100644 index 000000000..60b9abaa8 --- /dev/null +++ b/src/components/PreviewPill/messages.ts @@ -0,0 +1,15 @@ +import { defineMessages } from "react-intl"; + +const messages = defineMessages({ + label: { + defaultMessage: "Preview", + description: "indicator that feature is in preview mode" + }, + tooltip: { + defaultMessage: + "This feature is in a preview state and can be subject to changes at later point", + description: "tooltip" + } +}); + +export default messages; diff --git a/src/components/PreviewPill/styles.ts b/src/components/PreviewPill/styles.ts new file mode 100644 index 000000000..06ebbf780 --- /dev/null +++ b/src/components/PreviewPill/styles.ts @@ -0,0 +1,31 @@ +import { makeStyles } from "@saleor/macaw-ui"; +import { triangle } from "@saleor/styles/mixins"; + +const useStyles = makeStyles( + theme => ({ + popper: { + zIndex: 11 + }, + tooltip: { + "&:before": { + ...triangle(theme.palette.saleor.warning.mid, 8), + content: "''", + position: "absolute", + left: 17, + top: -8 + }, + background: theme.palette.saleor.warning.mid, + borderRadius: 8, + marginTop: theme.spacing(1.5), + padding: theme.spacing(2.5), + maxWidth: 400, + position: "relative" + }, + tooltipText: { + color: theme.palette.common.black + } + }), + { name: "PreviewPill" } +); + +export default useStyles; diff --git a/src/giftCards/GiftCardSettings/GiftCardSettingsPage.tsx b/src/giftCards/GiftCardSettings/GiftCardSettingsPage.tsx index 41877639c..32856502b 100644 --- a/src/giftCards/GiftCardSettings/GiftCardSettingsPage.tsx +++ b/src/giftCards/GiftCardSettings/GiftCardSettingsPage.tsx @@ -68,7 +68,11 @@ const GiftCardSettingsPage: React.FC = () => { {intl.formatMessage(sectionNames.giftCards)} - +
{({ data: formData, submit, hasChanged, change }) => ( diff --git a/src/giftCards/GiftCardUpdate/GiftCardUpdatePageHeader/GiftCardUpdatePageHeader.tsx b/src/giftCards/GiftCardUpdate/GiftCardUpdatePageHeader/GiftCardUpdatePageHeader.tsx index a18077d67..8c0ea304a 100644 --- a/src/giftCards/GiftCardUpdate/GiftCardUpdatePageHeader/GiftCardUpdatePageHeader.tsx +++ b/src/giftCards/GiftCardUpdate/GiftCardUpdatePageHeader/GiftCardUpdatePageHeader.tsx @@ -1,9 +1,9 @@ import HorizontalSpacer from "@saleor/apps/components/HorizontalSpacer"; import PageHeader from "@saleor/components/PageHeader"; -import PageTitleWithStatusChip from "@saleor/components/PageTitleWithStatusChip"; import GiftCardStatusChip from "@saleor/giftCards/components/GiftCardStatusChip/GiftCardStatusChip"; import { sectionNames } from "@saleor/intl"; import { Backlink, Button } from "@saleor/macaw-ui"; +import { getStringOrPlaceholder } from "@saleor/misc"; import React from "react"; import { useIntl } from "react-intl"; @@ -12,8 +12,10 @@ import useGiftCardDetails from "../providers/GiftCardDetailsProvider/hooks/useGi import useGiftCardUpdateDialogs from "../providers/GiftCardUpdateDialogsProvider/hooks/useGiftCardUpdateDialogs"; import GiftCardEnableDisableSection from "./GiftCardEnableDisableSection"; import { giftCardUpdatePageHeaderMessages as messages } from "./messages"; +import useStyles from "./styles"; const GiftCardUpdatePageHeader: React.FC = () => { + const classes = useStyles(); const intl = useIntl(); const { giftCard } = useGiftCardDetails(); const { navigateBack } = useGiftCardUpdateDialogs(); @@ -21,7 +23,7 @@ const GiftCardUpdatePageHeader: React.FC = () => { const { openResendCodeDialog } = useGiftCardUpdateDialogs(); if (!giftCard) { - return null; + return ; } const { last4CodeChars, isExpired } = giftCard; @@ -36,11 +38,14 @@ const GiftCardUpdatePageHeader: React.FC = () => { {intl.formatMessage(sectionNames.giftCards)} +
+ {title} + - +
} > diff --git a/src/giftCards/GiftCardUpdate/GiftCardUpdatePageHeader/styles.ts b/src/giftCards/GiftCardUpdate/GiftCardUpdatePageHeader/styles.ts new file mode 100644 index 000000000..d3e75e505 --- /dev/null +++ b/src/giftCards/GiftCardUpdate/GiftCardUpdatePageHeader/styles.ts @@ -0,0 +1,13 @@ +import { makeStyles } from "@saleor/macaw-ui"; + +const useStyles = makeStyles( + { + title: { + alignItems: "center", + display: "inline-flex" + } + }, + { name: "GiftCardUpdatePageHeader" } +); + +export default useStyles; diff --git a/src/giftCards/GiftCardsList/GiftCardsListHeader/GiftCardsListHeader.tsx b/src/giftCards/GiftCardsList/GiftCardsListHeader/GiftCardsListHeader.tsx index 7d58598a7..4142daebc 100644 --- a/src/giftCards/GiftCardsList/GiftCardsListHeader/GiftCardsListHeader.tsx +++ b/src/giftCards/GiftCardsList/GiftCardsListHeader/GiftCardsListHeader.tsx @@ -45,6 +45,7 @@ const GiftCardsListHeader: React.FC = () => { return ( <> } > diff --git a/src/giftCards/GiftCardsList/GiftCardsListHeader/styles.ts b/src/giftCards/GiftCardsList/GiftCardsListHeader/styles.ts new file mode 100644 index 000000000..fc1f5c010 --- /dev/null +++ b/src/giftCards/GiftCardsList/GiftCardsListHeader/styles.ts @@ -0,0 +1,16 @@ +import { makeStyles } from "@saleor/macaw-ui"; + +const useStyles = makeStyles( + theme => ({ + preview: { + position: "absolute", + top: theme.spacing(-4) + }, + title: { + position: "relative" + } + }), + { name: "GiftCardListHeader" } +); + +export default useStyles; diff --git a/src/plugins/components/PluginsList/PluginAvailabilityStatus.tsx b/src/plugins/components/PluginsList/PluginAvailabilityStatus.tsx index 5e2934a01..5a5414fc1 100644 --- a/src/plugins/components/PluginsList/PluginAvailabilityStatus.tsx +++ b/src/plugins/components/PluginsList/PluginAvailabilityStatus.tsx @@ -43,7 +43,7 @@ const PluginAvailabilityStatus: React.FC = ({ }) } color={isStatusActive ? "success" : "error"} - onClick={() => null} // required for dashed border + outlined /> ); }; diff --git a/src/productTypes/components/ProductTypeDetails/ProductTypeDetails.tsx b/src/productTypes/components/ProductTypeDetails/ProductTypeDetails.tsx index 01a692a20..c979260f2 100644 --- a/src/productTypes/components/ProductTypeDetails/ProductTypeDetails.tsx +++ b/src/productTypes/components/ProductTypeDetails/ProductTypeDetails.tsx @@ -6,6 +6,7 @@ import { Typography } from "@material-ui/core"; import CardTitle from "@saleor/components/CardTitle"; +import PreviewPill from "@saleor/components/PreviewPill"; import RadioGroupField from "@saleor/components/RadioGroupField"; import { commonMessages } from "@saleor/intl"; import { makeStyles } from "@saleor/macaw-ui"; @@ -25,6 +26,9 @@ const useStyles = makeStyles( option: { marginTop: theme.spacing(-0.25), marginBottom: theme.spacing() + }, + preview: { + marginLeft: theme.spacing(1) } }), { name: "ProductTypeDetails" } @@ -41,24 +45,24 @@ interface ProductTypeDetailsProps { onKindChange: (event: React.ChangeEvent) => void; } +const kindOptions = [ + { + title: messages.optionNormalTitle, + type: ProductTypeKindEnum.NORMAL + }, + { + title: messages.optionGiftCardTitle, + subtitle: messages.optionGiftCardDescription, + type: ProductTypeKindEnum.GIFT_CARD + } +]; + const ProductTypeDetails: React.FC = props => { const { data, disabled, errors, onChange, onKindChange } = props; const classes = useStyles(props); const intl = useIntl(); - const kindOptions = [ - { - title: messages.optionNormalTitle, - type: ProductTypeKindEnum.NORMAL - }, - { - title: messages.optionGiftCardTitle, - subtitle: messages.optionGiftCardDescription, - type: ProductTypeKindEnum.GIFT_CARD - } - ]; - return ( = props => { > + {option.type === ProductTypeKindEnum.GIFT_CARD && ( + + )} {option.subtitle && ( diff --git a/src/products/components/ProductStocks/ProductStocks.tsx b/src/products/components/ProductStocks/ProductStocks.tsx index cdaa33b9e..df2f9223d 100644 --- a/src/products/components/ProductStocks/ProductStocks.tsx +++ b/src/products/components/ProductStocks/ProductStocks.tsx @@ -24,6 +24,7 @@ import { DateTimeTimezoneField } from "@saleor/components/DateTimeTimezoneField" import FormSpacer from "@saleor/components/FormSpacer"; import Hr from "@saleor/components/Hr"; import Link from "@saleor/components/Link"; +import PreviewPill from "@saleor/components/PreviewPill"; import { ProductErrorFragment } from "@saleor/fragments/types/ProductErrorFragment"; import { WarehouseFragment } from "@saleor/fragments/types/WarehouseFragment"; import { FormChange, FormErrors } from "@saleor/hooks/useForm"; @@ -172,6 +173,9 @@ const useStyles = makeStyles( }, preorderLimitInfo: { marginTop: theme.spacing(3) + }, + preview: { + marginLeft: theme.spacing(1) } }), { @@ -247,10 +251,13 @@ const ProductStocks: React.FC = ({ } disabled={disabled} label={ - + <> + + + } /> diff --git a/src/products/components/ProductVariantCheckoutSettings/ProductVariantCheckoutSettings.tsx b/src/products/components/ProductVariantCheckoutSettings/ProductVariantCheckoutSettings.tsx index fed20d0b9..4dee52198 100644 --- a/src/products/components/ProductVariantCheckoutSettings/ProductVariantCheckoutSettings.tsx +++ b/src/products/components/ProductVariantCheckoutSettings/ProductVariantCheckoutSettings.tsx @@ -1,5 +1,6 @@ import { Card, CardContent, TextField } from "@material-ui/core"; import CardTitle from "@saleor/components/CardTitle"; +import PreviewPill from "@saleor/components/PreviewPill"; import { ProductErrorFragment } from "@saleor/fragments/types/ProductErrorFragment"; import { FormChange } from "@saleor/hooks/useForm"; import { getFormErrors } from "@saleor/utils/errors"; @@ -7,6 +8,7 @@ import React from "react"; import { useIntl } from "react-intl"; import { messages } from "./messages"; +import useStyles from "./styles"; interface ProductVariantCheckoutSettingsProps { data: { @@ -21,12 +23,20 @@ const ProductVariantCheckoutSettings: React.FC - + + {intl.formatMessage(messages.checkoutLimits)} + + + } + /> ({ + preview: { + marginLeft: theme.spacing(1) + } + }), + { name: "ProductVariantCheckoutSettings" } +); + +export default useStyles; diff --git a/src/storybook/__snapshots__/Stories.test.ts.snap b/src/storybook/__snapshots__/Stories.test.ts.snap index ab6d0e236..d547dc4d7 100644 --- a/src/storybook/__snapshots__/Stories.test.ts.snap +++ b/src/storybook/__snapshots__/Stories.test.ts.snap @@ -3113,6 +3113,22 @@ exports[`Storyshots Channels / Channels with variants availability card default `; +exports[`Storyshots Component / Preview Pill default 1`] = ` +
+
+ + Preview + +
+
+`; + exports[`Storyshots Customers / Address editing dialog default 1`] = `
- +
@@ -51542,15 +51558,15 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details d aria-haspopup="true" role="button" > - + @@ -51655,15 +51671,15 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details d aria-haspopup="true" role="button" > - + @@ -51768,15 +51784,15 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details d aria-haspopup="true" role="button" > - + @@ -51881,15 +51897,15 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details d aria-haspopup="true" role="button" > - + @@ -53018,15 +53034,15 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details f aria-haspopup="true" role="button" > - + @@ -53131,15 +53147,15 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details f aria-haspopup="true" role="button" > - + @@ -53244,15 +53260,15 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details f aria-haspopup="true" role="button" > - + @@ -53357,15 +53373,15 @@ exports[`Storyshots Views / Collections / Collection detailsCollection details f aria-haspopup="true" role="button" > - + @@ -56035,15 +56051,15 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = ` aria-haspopup="true" role="button" > - + @@ -56111,15 +56127,15 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = ` aria-haspopup="true" role="button" > - + @@ -56187,15 +56203,15 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = ` aria-haspopup="true" role="button" > - + @@ -56263,15 +56279,15 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = ` aria-haspopup="true" role="button" > - + @@ -56339,15 +56355,15 @@ exports[`Storyshots Views / Collections / Collection list default 1`] = ` aria-haspopup="true" role="button" > - + @@ -85329,15 +85345,15 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = ` aria-haspopup="true" role="button" > - + @@ -85442,15 +85458,15 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = ` aria-haspopup="true" role="button" > - + @@ -85555,15 +85571,15 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = ` aria-haspopup="true" role="button" > - + @@ -85668,15 +85684,15 @@ exports[`Storyshots Views / Discounts / Sale details products 1`] = ` aria-haspopup="true" role="button" > - + @@ -162603,15 +162619,15 @@ exports[`Storyshots Views / Plugins / Plugin list default 1`] = ` class="MuiTableCell-root-id MuiTableCell-body-id" colspan="2" > - + - + Gift card product type +
+ + Preview + +
Gift card product type +
+ + Preview + +
Gift card product type +
+ + Preview + +
Gift card product type +
+ + Preview + +
Gift card product type +
+ + Preview + +
Gift card product type +
+ + Preview + +
Gift card product type +
+ + Preview + +
Checkout limits +
+ + Preview + +
@@ -180820,6 +180908,15 @@ exports[`Storyshots Views / Products / Create product variant add first variant class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id" > Variant currently in preorder +
+ + Preview + +
Checkout limits +
+ + Preview + +
@@ -181849,6 +181955,15 @@ exports[`Storyshots Views / Products / Create product variant default 1`] = ` class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id" > Variant currently in preorder +
+ + Preview + +
Checkout limits +
+ + Preview + +
@@ -182878,6 +183002,15 @@ exports[`Storyshots Views / Products / Create product variant no warehouses 1`] class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id" > Variant currently in preorder +
+ + Preview + +
Checkout limits +
+ + Preview + +
@@ -183671,6 +183813,15 @@ exports[`Storyshots Views / Products / Create product variant when loading data class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id" > Variant currently in preorder +
+ + Preview + +
Checkout limits +
+ + Preview + +
@@ -184712,6 +184872,15 @@ exports[`Storyshots Views / Products / Create product variant with errors 1`] = class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id" > Variant currently in preorder +
+ + Preview + +
Variant currently in preorder +
+ + Preview + +
@@ -194090,6 +194268,15 @@ exports[`Storyshots Views / Products / Product edit no stock, no variants and no class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id" > Variant currently in preorder +
+ + Preview + +
@@ -195690,6 +195877,15 @@ exports[`Storyshots Views / Products / Product edit no variants 1`] = ` class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id" > Variant currently in preorder +
+ + Preview + +
@@ -198676,6 +198872,15 @@ exports[`Storyshots Views / Products / Product edit when loading data 1`] = ` class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id" > Variant currently in preorder +
+ + Preview + +
Variant currently in preorder +
+ + Preview + +
@@ -219492,6 +219706,15 @@ exports[`Storyshots Views / Products / Product variant details attribute errors class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id" > Checkout limits +
+ + Preview + +
@@ -219727,6 +219950,15 @@ exports[`Storyshots Views / Products / Product variant details attribute errors class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id" > Variant currently in preorder +
+ + Preview + +
@@ -221344,6 +221576,15 @@ exports[`Storyshots Views / Products / Product variant details no warehouses 1`] class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id" > Checkout limits +
+ + Preview + +
@@ -221574,6 +221815,15 @@ exports[`Storyshots Views / Products / Product variant details no warehouses 1`] class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id" > Variant currently in preorder +
+ + Preview + +
@@ -223191,6 +223441,15 @@ exports[`Storyshots Views / Products / Product variant details when loaded data class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id" > Checkout limits +
+ + Preview + +
@@ -223421,6 +223680,15 @@ exports[`Storyshots Views / Products / Product variant details when loaded data class="MuiTypography-root-id MuiFormControlLabel-label-id MuiTypography-body1-id" > Variant currently in preorder +
+ + Preview + +
@@ -224324,6 +224592,15 @@ exports[`Storyshots Views / Products / Product variant details when loading data class="MuiTypography-root-id MuiCardHeader-title-id MuiTypography-h5-id MuiTypography-displayBlock-id" > Checkout limits +
+ + Preview + +
@@ -224548,6 +224825,15 @@ exports[`Storyshots Views / Products / Product variant details when loading data class="MuiTypography-root-id MuiFormControlLabel-label-id MuiFormControlLabel-disabled-id MuiTypography-body1-id" > Variant currently in preorder +
+ + Preview + +
Pickup +
+ + Preview + +
Pickup +
+ + Preview + +
Pickup +
+ + Preview + +
({ + borderBottom: `${width}px solid ${color}`, + borderLeft: `${width}px solid transparent`, + borderRight: `${width}px solid transparent`, + height: 0, + width: 0 +}); diff --git a/src/warehouses/components/WarehouseSettings/WarehouseSettings.tsx b/src/warehouses/components/WarehouseSettings/WarehouseSettings.tsx index 8e4bae4a9..87523038c 100644 --- a/src/warehouses/components/WarehouseSettings/WarehouseSettings.tsx +++ b/src/warehouses/components/WarehouseSettings/WarehouseSettings.tsx @@ -3,6 +3,7 @@ import CardSpacer from "@saleor/components/CardSpacer"; import CardTitle from "@saleor/components/CardTitle"; import { FormSpacer } from "@saleor/components/FormSpacer"; import Link from "@saleor/components/Link"; +import PreviewPill from "@saleor/components/PreviewPill"; import { RadioGroupField } from "@saleor/components/RadioGroupField"; import Skeleton from "@saleor/components/Skeleton"; import { makeStyles } from "@saleor/macaw-ui"; @@ -30,6 +31,9 @@ const useStyles = makeStyles( "&:not(:last-of-type)": { marginBottom: theme.spacing() } + }, + preview: { + marginLeft: theme.spacing(1) } }), { @@ -181,6 +185,7 @@ const WarehouseSettings: React.FC = ({ +