djkato/saleor-dashboard
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Add preview pill in gift cards card (#1886)

Browse source 
* Add preview pill in gift cards card

* Temporararily disable triangle in preview pill
This commit is contained in:
Wojciech Mista 2022-02-22 11:20:46 +01:00 committed by GitHub
parent 2c494a1b01
commit 3013cb29c6
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
4 changed files with 144 additions and 19 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

17
src/components/PreviewPill/styles.ts
View file

@ -1,5 +1,4 @@
import { makeStyles } from "@saleor/macaw-ui";
import { triangle } from "@saleor/styles/mixins";
const useStyles = makeStyles(
theme => ({
@ -7,13 +6,15 @@ const useStyles = makeStyles(
zIndex: 11
},
tooltip: {
"&:before": {
...triangle(theme.palette.saleor.warning.mid, 8),
content: "''",
position: "absolute",
left: 17,
top: -8
},
// TO-FIX
// Triangle's position is hard coded
// "&: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),

26
src/giftCards/components/GiftCardCustomerCard/CustomerGiftCardsCard.tsx
View file

@ -3,6 +3,7 @@ import VerticalSpacer from "@saleor/apps/components/VerticalSpacer";
import CardTitle from "@saleor/components/CardTitle";
import CollectionWithDividers from "@saleor/components/CollectionWithDividers";
import Link from "@saleor/components/Link";
import PreviewPill from "@saleor/components/PreviewPill";
import Skeleton from "@saleor/components/Skeleton";
import { useCustomerDetails } from "@saleor/customers/hooks/useCustomerDetails";
import GiftCardCreateDialogContent from "@saleor/giftCards/GiftCardCreateDialog/GiftCardCreateDialogContent";
@ -62,17 +63,20 @@ const CustomerGiftCardsCard: React.FC = () => {
<CardTitle
title={intl.formatMessage(messages.customerGiftCardsCardTitle)}
toolbar={
!!giftCards?.length && (
<Button
variant="tertiary"
href={viewAllGiftCardsUrl}
component={Link}
>
<FormattedMessage
{...messages.customerGiftCardsViewAllButton}
/>
</Button>
)
<>
{!!giftCards?.length && (
<Button
variant="tertiary"
href={viewAllGiftCardsUrl}
component={Link}
>
<FormattedMessage
{...messages.customerGiftCardsViewAllButton}
/>
</Button>
)}
<PreviewPill className={classes.previewPill} />
</>
}
>
<FormattedMessage

3
src/giftCards/components/GiftCardCustomerCard/styles.ts
View file

@ -10,6 +10,9 @@ export const useCardActionsStyles = makeStyles(
padding: `${theme.spacing(2)} ${theme.spacing(3)}`,
flexDirection: ({ buttonPosition }: CustomerGiftCardsCardActionsProps) =>
buttonPosition === "left" ? "row" : "row-reverse"
},
previewPill: {
marginLeft: theme.spacing(1)
}
}),
{ name: "CustomerGiftCardsCard" }

117
src/storybook/__snapshots__/Stories.test.ts.snap
View file

@ -66929,6 +66929,19 @@ exports[`Storyshots Views / Customers / Customer details default 1`] = `
Gift Cards
</span>
</div>
<div
class="MuiCardHeader-action-id"
>
<div
class="MuiChip-root-id CustomerGiftCardsCard-previewPill-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
>
<span
class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
>
Preview
</span>
</div>
</div>
</div>
<span
class="Skeleton-skeleton-id"
@ -67724,6 +67737,19 @@ exports[`Storyshots Views / Customers / Customer details different addresses 1`]
Gift Cards
</span>
</div>
<div
class="MuiCardHeader-action-id"
>
<div
class="MuiChip-root-id CustomerGiftCardsCard-previewPill-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
>
<span
class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
>
Preview
</span>
</div>
</div>
</div>
<span
class="Skeleton-skeleton-id"
@ -68494,6 +68520,19 @@ exports[`Storyshots Views / Customers / Customer details form errors 1`] = `
Gift Cards
</span>
</div>
<div
class="MuiCardHeader-action-id"
>
<div
class="MuiChip-root-id CustomerGiftCardsCard-previewPill-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
>
<span
class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
>
Preview
</span>
</div>
</div>
</div>
<span
class="Skeleton-skeleton-id"
@ -69191,6 +69230,19 @@ exports[`Storyshots Views / Customers / Customer details loading 1`] = `
Gift Cards
</span>
</div>
<div
class="MuiCardHeader-action-id"
>
<div
class="MuiChip-root-id CustomerGiftCardsCard-previewPill-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
>
<span
class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
>
Preview
</span>
</div>
</div>
</div>
<span
class="Skeleton-skeleton-id"
@ -69940,6 +69992,19 @@ exports[`Storyshots Views / Customers / Customer details never logged 1`] = `
Gift Cards
</span>
</div>
<div
class="MuiCardHeader-action-id"
>
<div
class="MuiChip-root-id CustomerGiftCardsCard-previewPill-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
>
<span
class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
>
Preview
</span>
</div>
</div>
</div>
<span
class="Skeleton-skeleton-id"
@ -70689,6 +70754,19 @@ exports[`Storyshots Views / Customers / Customer details never placed order 1`]
Gift Cards
</span>
</div>
<div
class="MuiCardHeader-action-id"
>
<div
class="MuiChip-root-id CustomerGiftCardsCard-previewPill-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
>
<span
class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
>
Preview
</span>
</div>
</div>
</div>
<span
class="Skeleton-skeleton-id"
@ -71416,6 +71494,19 @@ exports[`Storyshots Views / Customers / Customer details no address at all 1`] =
Gift Cards
</span>
</div>
<div
class="MuiCardHeader-action-id"
>
<div
class="MuiChip-root-id CustomerGiftCardsCard-previewPill-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
>
<span
class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
>
Preview
</span>
</div>
</div>
</div>
<span
class="Skeleton-skeleton-id"
@ -72171,6 +72262,19 @@ exports[`Storyshots Views / Customers / Customer details no default billing addr
Gift Cards
</span>
</div>
<div
class="MuiCardHeader-action-id"
>
<div
class="MuiChip-root-id CustomerGiftCardsCard-previewPill-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
>
<span
class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
>
Preview
</span>
</div>
</div>
</div>
<span
class="Skeleton-skeleton-id"
@ -72926,6 +73030,19 @@ exports[`Storyshots Views / Customers / Customer details no default shipping add
Gift Cards
</span>
</div>
<div
class="MuiCardHeader-action-id"
>
<div
class="MuiChip-root-id CustomerGiftCardsCard-previewPill-id Pill-root-id Pill-warning-id Pill-small-id MuiChip-sizeSmall-id"
>
<span
class="MuiChip-label-id Pill-label-id MuiChip-labelSmall-id Pill-labelSmall-id"
>
Preview
</span>
</div>
</div>
</div>
<span
class="Skeleton-skeleton-id"