From 855ffc0dba9cd820577e573613093623ab9649ff Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucas=20Feij=C3=B3?= Date: Thu, 17 Mar 2022 15:18:58 -0300 Subject: [PATCH 1/7] Adds new `Badge` interactive variation --- src/components/ui/Badge/Badge.tsx | 29 +++++++++++++++++++++++++--- src/components/ui/Badge/badge.scss | 31 ++++++++++++++++++++++++++++-- 2 files changed, 55 insertions(+), 5 deletions(-) diff --git a/src/components/ui/Badge/Badge.tsx b/src/components/ui/Badge/Badge.tsx index a6efefe00..514082caf 100644 --- a/src/components/ui/Badge/Badge.tsx +++ b/src/components/ui/Badge/Badge.tsx @@ -1,18 +1,27 @@ import { Badge as UIBadge } from '@faststore/ui' import type { ReactNode } from 'react' import React from 'react' +import IconButton from 'src/components/ui/IconButton' +import Icon from 'src/components/ui/Icon' import './badge.scss' -export type BadgeVariants = 'info' | 'highlighted' | 'neutral' +export type BadgeVariants = 'info' | 'highlighted' | 'neutral' | 'interactive' type Props = { small?: boolean variant?: BadgeVariants children: ReactNode + onClose?: () => void } -const Badge = ({ small = false, variant, children, ...otherProps }: Props) => { +const Badge = ({ + small = false, + variant, + children, + onClose, + ...otherProps +}: Props) => { return ( { data-store-badge-variant={variant} {...otherProps} > - {children} + {children} + {variant === 'interactive' && ( + + } + /> + )} ) } diff --git a/src/components/ui/Badge/badge.scss b/src/components/ui/Badge/badge.scss index 46ad684d0..a79011760 100644 --- a/src/components/ui/Badge/badge.scss +++ b/src/components/ui/Badge/badge.scss @@ -1,7 +1,9 @@ .badge[data-store-badge] { + display: flex; + align-content: stretch; + align-items: stretch; width: fit-content; height: fit-content; - padding: var(--space-1) var(--space-2); color: var(--color-text); font-weight: var(--text-weight-bold); font-size: var(--text-size-2); @@ -9,9 +11,16 @@ text-transform: uppercase; border-radius: var(--border-radius-pill); + > span { + padding: var(--space-1) var(--space-2); + } + &[data-store-badge="small"] { - padding: var(--space-0) var(--space-2); font-size: var(--text-size-0); + + > span { + padding: var(--space-0) var(--space-2); + } } } @@ -27,6 +36,24 @@ background-color: var(--bg-info); } +[data-store-badge-variant="interactive"] { + > span { + padding-right: 0; + } + + [data-store-icon-button] { + width: var(--tap-min-size); + height: auto; + color: var(--color-neutral-7); + border-top-right-radius: var(--border-radius-pill); + border-bottom-right-radius: var(--border-radius-pill); + + &:hover { + background-color: var(--color-secondary-1); + } + } +} + [data-store-discount-badge-variant="low"] { background-color: var(--bg-discount-low); } From 836d2a0d0343c8b655f76a3a5a0325d837db8f46 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucas=20Feij=C3=B3?= Date: Thu, 17 Mar 2022 16:52:55 -0300 Subject: [PATCH 2/7] Adds changelog entry --- CHANGELOG.md | 1 + 1 file changed, 1 insertion(+) diff --git a/CHANGELOG.md b/CHANGELOG.md index 4141117a9..332e99be4 100644 --- a/CHANGELOG.md +++ b/CHANGELOG.md @@ -22,6 +22,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0 - `IconSVG` component to load SVG Icons. - `Suggestions` component. - `SearchHistory` component. +- `Badge` interactive variation. ### Changed - Move inline styles to external stylesheet to improve TBT From 8b8b20a1cab9c92684a62be07fb1dace8e132036 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucas=20Feij=C3=B3?= Date: Fri, 18 Mar 2022 14:30:34 -0300 Subject: [PATCH 3/7] Remove `interactive` as a `Badge` variant; using as boolean instead --- src/components/ui/Badge/Badge.tsx | 9 ++++++--- src/components/ui/Badge/badge.scss | 32 +++++++++++++++--------------- 2 files changed, 22 insertions(+), 19 deletions(-) diff --git a/src/components/ui/Badge/Badge.tsx b/src/components/ui/Badge/Badge.tsx index 514082caf..85076fde0 100644 --- a/src/components/ui/Badge/Badge.tsx +++ b/src/components/ui/Badge/Badge.tsx @@ -6,20 +6,22 @@ import Icon from 'src/components/ui/Icon' import './badge.scss' -export type BadgeVariants = 'info' | 'highlighted' | 'neutral' | 'interactive' +export type BadgeVariants = 'info' | 'highlighted' | 'neutral' type Props = { small?: boolean variant?: BadgeVariants children: ReactNode onClose?: () => void + interactive?: boolean } const Badge = ({ - small = false, variant, children, onClose, + small = false, + interactive = false, ...otherProps }: Props) => { return ( @@ -27,10 +29,11 @@ const Badge = ({ className="badge" data-store-badge={small ? 'small' : ''} data-store-badge-variant={variant} + data-store-badge-interactive={interactive} {...otherProps} > {children} - {variant === 'interactive' && ( + {(interactive || onClose) && ( span { - padding-right: 0; + &[data-store-badge-interactive="true"] { + > span { + padding-right: 0; + } } [data-store-icon-button] { @@ -54,6 +42,18 @@ } } +[data-store-badge-variant="neutral"] { + background-color: var(--bg-neutral); +} + +[data-store-badge-variant="highlighted"] { + background-color: var(--bg-highlighted); +} + +[data-store-badge-variant="info"] { + background-color: var(--bg-info); +} + [data-store-discount-badge-variant="low"] { background-color: var(--bg-discount-low); } From 7d4f80688999310177c54a7b28e6b7518d799792 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucas=20Feij=C3=B3?= Date: Fri, 18 Mar 2022 15:35:09 -0300 Subject: [PATCH 4/7] Creates new type to handle interactive badge with callback --- src/components/ui/Badge/Badge.tsx | 14 ++++++++++++-- 1 file changed, 12 insertions(+), 2 deletions(-) diff --git a/src/components/ui/Badge/Badge.tsx b/src/components/ui/Badge/Badge.tsx index 85076fde0..e0c12f7a0 100644 --- a/src/components/ui/Badge/Badge.tsx +++ b/src/components/ui/Badge/Badge.tsx @@ -8,13 +8,23 @@ import './badge.scss' export type BadgeVariants = 'info' | 'highlighted' | 'neutral' +type InteractiveBadge = + | { + interactive: true + onClose?: () => void + } + | { + interactive?: false + onClose?: never + } + type Props = { small?: boolean variant?: BadgeVariants children: ReactNode onClose?: () => void interactive?: boolean -} +} & InteractiveBadge const Badge = ({ variant, @@ -33,7 +43,7 @@ const Badge = ({ {...otherProps} > {children} - {(interactive || onClose) && ( + {interactive && ( Date: Sat, 19 Mar 2022 12:07:07 -0300 Subject: [PATCH 5/7] Fix margin being applied for all `CartSidebar` buttons --- src/components/cart/CartSidebar/cart-sidebar.scss | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/src/components/cart/CartSidebar/cart-sidebar.scss b/src/components/cart/CartSidebar/cart-sidebar.scss index e7327516d..15ebee057 100644 --- a/src/components/cart/CartSidebar/cart-sidebar.scss +++ b/src/components/cart/CartSidebar/cart-sidebar.scss @@ -12,8 +12,10 @@ padding: var(--space-2) var(--page-padding-phone) var(--space-2); background-color: var(--bg-neutral-lightest); - [data-store-icon-button] { - margin-right: calc(-1 * var(--space-1)); + > [data-store-icon-button] { + &:last-of-type { + margin-right: calc(-1 * var(--space-1)); + } } } From f947cf6e5c3f830f7bbdd7692c2c34ccf4a3fe64 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucas=20Feij=C3=B3?= Date: Sat, 19 Mar 2022 12:08:39 -0300 Subject: [PATCH 6/7] Applies a background with opacity for hover and focus --- src/components/ui/Badge/badge.scss | 11 +++-------- 1 file changed, 3 insertions(+), 8 deletions(-) diff --git a/src/components/ui/Badge/badge.scss b/src/components/ui/Badge/badge.scss index a564a9384..715adbafb 100644 --- a/src/components/ui/Badge/badge.scss +++ b/src/components/ui/Badge/badge.scss @@ -23,12 +23,6 @@ } } - &[data-store-badge-interactive="true"] { - > span { - padding-right: 0; - } - } - [data-store-icon-button] { width: var(--tap-min-size); height: auto; @@ -36,8 +30,9 @@ border-top-right-radius: var(--border-radius-pill); border-bottom-right-radius: var(--border-radius-pill); - &:hover { - background-color: var(--color-secondary-1); + &:hover, &:focus { + background-color: var(--color-black-transparent-10); + background-blend-mode: multiply; } } } From d0184baaffbc9b9949caf86a6f4a7164afab4304 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Lucas=20Feij=C3=B3?= Date: Mon, 21 Mar 2022 12:04:11 -0300 Subject: [PATCH 7/7] Trigger CI with an empty commit