@faststore/core 22.42.6

package/src/components/ui/Badge/DiscountBadge.tsx

@@ -0,0 +1,57 @@
+import { memo } from 'react'
+
+import { useDiscountPercent } from 'src/sdk/product/useDiscountPercent'
+
+import Badge from './Badge'
+
+export type DiscountBadgeProps = {
+  /**
+   * Specifies price without discount applied.
+   */
+  listPrice: number
+  /**
+   * Specifies current price with discount applied.
+   */
+  spotPrice: number
+  /**
+   * Sets the component size as big.
+   */
+  big?: boolean
+  /**
+   * Sets the limit percentage value to consider a low discount.
+   */
+  thresholdLow?: number
+  /**
+   * Sets the limit percentage value to consider a high discount.
+   */
+  thresholdHigh?: number
+}
+
+const DiscountBadge = ({
+  listPrice,
+  spotPrice,
+  big = false,
+  thresholdLow = 15,
+  thresholdHigh = 40,
+}: DiscountBadgeProps) => {
+  const discountPercent = useDiscountPercent(listPrice, spotPrice)
+
+  if (discountPercent === 0) {
+    return <></>
+  }
+
+  const discountVariant =
+    discountPercent <= thresholdLow
+      ? 'low'
+      : discountPercent <= thresholdHigh
+      ? 'medium'
+      : 'high'
+
+  return (
+    <Badge big={big} data-fs-discount-badge-variant={discountVariant}>
+      {discountPercent}% off
+    </Badge>
+  )
+}
+
+export default memo(DiscountBadge)

package/src/components/ui/Badge/badge.module.scss

@@ -0,0 +1,252 @@
+.fs-badge {
+  // --------------------------------------------------------
+  // Design Tokens for Badges
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-badge-padding                      : var(--fs-spacing-0) var(--fs-spacing-2);
+
+  --fs-badge-border-radius                : var(--fs-border-radius-pill);
+  --fs-badge-border-width                 : var(--fs-border-width);
+  --fs-badge-border-color                 : transparent;
+
+  --fs-badge-bkg-color                    : var(--fs-color-neutral-bkg);
+
+  --fs-badge-text-color                   : var(--fs-color-text);
+  --fs-badge-text-size                    : var(--fs-text-size-tiny);
+  --fs-badge-text-weight                  : var(--fs-text-weight-bold);
+
+  --fs-badge-transition-function          : var(--fs-transition-function);
+  --fs-badge-transition-property          : var(--fs-transition-property);
+  --fs-badge-transition-timing            : var(--fs-transition-timing);
+
+  // Neutral
+  --fs-badge-neutral-bkg-color            : var(--fs-color-neutral-bkg);
+  --fs-badge-neutral-text-color           : var(--fs-badge-text-color);
+  --fs-badge-neutral-border-color         : var(--fs-color-neutral-bkg);
+
+  // Success
+  --fs-badge-success-bkg-color            : var(--fs-color-success-bkg);
+  --fs-badge-success-text-color           : var(--fs-badge-text-color);
+  --fs-badge-success-border-color         : var(--fs-color-success-bkg);
+
+  // Highlighted
+  --fs-badge-highlighted-bkg-color        : var(--fs-color-highlighted-bkg);
+  --fs-badge-highlighted-text-color       : var(--fs-color-highlighted-text);
+  --fs-badge-highlighted-border-color     : var(--fs-color-highlighted-bkg);
+
+  // Info
+  --fs-badge-info-bkg-color               : var(--fs-color-info-bkg);
+  --fs-badge-info-text-color              : var(--fs-color-info-text);
+  --fs-badge-info-border-color            : var(--fs-color-info-bkg);
+
+  // Warning
+  --fs-badge-warning-bkg-color            : var(--fs-color-warning-bkg);
+  --fs-badge-warning-text-color           : var(--fs-color-warning-text);
+  --fs-badge-warning-border-color         : var(--fs-color-warning-bkg);
+
+  // Danger
+  --fs-badge-danger-bkg-color             : var(--fs-color-danger-bkg);
+  --fs-badge-danger-text-color            : var(--fs-badge-text-color);
+  --fs-badge-danger-border-color          : var(--fs-color-danger-bkg);
+
+  // Discount
+  --fs-badge-discount-low-bkg-color       : var(--fs-badge-success-bkg-color);
+  --fs-badge-discount-low-text-color      : var(--fs-badge-success-text-color);
+  --fs-badge-discount-low-border-color    : var(--fs-badge-success-border-color);
+
+  --fs-badge-discount-medium-bkg-color    : var(--fs-badge-warning-bkg-color);
+  --fs-badge-discount-medium-text-color   : var(--fs-badge-warning-text-color);
+  --fs-badge-discount-medium-border-color : var(--fs-badge-warning-border-color);
+
+  --fs-badge-discount-high-bkg-color      : var(--fs-badge-danger-bkg-color);
+  --fs-badge-discount-high-text-color     : var(--fs-badge-danger-text-color);
+  --fs-badge-discount-high-border-color   : var(--fs-badge-danger-border-color);
+
+  // Big
+  --fs-badge-big-text-size              : var(--fs-text-size-legend);
+  --fs-badge-big-padding                : var(--fs-spacing-1) var(--fs-spacing-2);
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  width: fit-content;
+  height: fit-content;
+  font-size: var(--fs-badge-text-size);
+  font-weight: var(--fs-badge-text-weight);
+  line-height: 1;
+  color: var(--fs-badge-text-color);
+  text-transform: uppercase;
+  white-space: nowrap;
+  border-radius: var(--fs-badge-border-radius);
+
+  [data-fs-badge-wrapper] {
+    padding: var(--fs-badge-padding);
+    overflow: hidden;
+    border-radius: var(--fs-badge-border-radius);
+
+    span {
+      display: block;
+    }
+  }
+
+  [data-fs-badge-button] {
+    position: absolute;
+    right: 0;
+    z-index: 1;
+    background-color: transparent;
+    &:hover + [data-fs-badge-wrapper]::after { filter: brightness(0.95); }
+    > span { display: flex; }
+  }
+
+  // --------------------------------------------------------
+  // Variants Styles
+  // --------------------------------------------------------
+
+  &[data-fs-badge="big"] {
+    font-size: var(--fs-badge-big-text-size);
+
+    [data-fs-badge-wrapper] {
+      padding: var(--fs-badge-big-padding);
+    }
+  }
+
+  &[data-fs-badge-actionable="true"] {
+    position: relative;
+    display: flex;
+    align-items: center;
+    height: var(--fs-control-tap-size);
+    padding-right: var(--fs-spacing-1);
+
+    [data-fs-badge-wrapper] {
+      position: relative;
+      padding-right: var(--fs-spacing-6);
+
+      &::after {
+        --button-hover-size: var(--fs-spacing-5);
+
+        position: absolute;
+        top: 50%;
+        right: 0;
+        width: var(--button-hover-size);
+        height: 100%;
+        content: "";
+        border-radius: 0 var(--fs-badge-border-radius) var(--fs-badge-border-radius) 0;
+        transition: var(--fs-badge-transition-property) var(--fs-badge-transition-timing) var(--fs-badge-transition-function);
+        transform: translateY(-50%);
+      }
+    }
+  }
+
+  &[data-fs-badge-variant="neutral"] {
+    color: var(--fs-badge-neutral-text-color);
+
+    [data-fs-badge-wrapper] {
+      background-color: var(--fs-badge-neutral-bkg-color);
+      border-color: var(--fs-badge-neutral-border-color);
+
+      &::after {
+        background-color: var(--fs-badge-neutral-bkg-color);
+      }
+    }
+  }
+
+  &[data-fs-badge-variant="success"] {
+    color: var(--fs-badge-success-text-color);
+
+    [data-fs-badge-wrapper] {
+      background-color: var(--fs-badge-success-bkg-color);
+      border-color: var(--fs-badge-success-border-color);
+
+      &::after {
+        background-color: var(--fs-badge-success-bkg-color);
+      }
+    }
+  }
+
+  &[data-fs-badge-variant="highlighted"] {
+    color: var(--fs-badge-highlighted-text-color);
+
+    [data-fs-badge-wrapper] {
+      background-color: var(--fs-badge-highlighted-bkg-color);
+      border-color: var(--fs-badge-highlighted-border-color);
+
+      &::after {
+        background-color: var(--fs-badge-highlighted-bkg-color);
+      }
+    }
+  }
+
+  &[data-fs-badge-variant="info"] {
+    color: var(--fs-badge-info-text-color);
+
+    [data-fs-badge-wrapper] {
+      background-color: var(--fs-badge-info-bkg-color);
+      border-color: var(--fs-badge-info-border-color);
+
+      &::after {
+        background-color: var(--fs-badge-info-bkg-color);
+      }
+    }
+  }
+
+  &[data-fs-badge-variant="warning"] {
+    color: var(--fs-badge-warning-text-color);
+
+    [data-fs-badge-wrapper] {
+      background-color: var(--fs-badge-warning-bkg-color);
+      border-color: var(--fs-badge-warning-border-color);
+
+      &::after {
+        background-color: var(--fs-badge-warning-bkg-color);
+      }
+    }
+  }
+
+  &[data-fs-badge-variant="danger"] {
+    color: var(--fs-badge-danger-text-color);
+
+    [data-fs-badge-wrapper] {
+      background-color: var(--fs-badge-danger-bkg-color);
+      border-color: var(--fs-badge-danger-border-color);
+
+      &::after {
+        background-color: var(--fs-badge-danger-bkg-color);
+      }
+    }
+  }
+
+  &[data-fs-discount-badge-variant="low"] {
+    color: var(--fs-badge-discount-low-text-color);
+
+    [data-fs-badge-wrapper] {
+      background-color: var(--fs-badge-discount-low-bkg-color);
+      border-color: var(--fs-badge-discount-low-border-color);
+
+      &::after {
+        background-color: var(--fs-badge-discount-low-bkg-color);
+      }
+    }
+  }
+
+  &[data-fs-discount-badge-variant="medium"] {
+    color: var(--fs-badge-discount-medium-text-color);
+
+    [data-fs-badge-wrapper] {
+      background-color: var(--fs-badge-discount-medium-bkg-color);
+      border-color: var(--fs-badge-discount-medium-border-color);
+      &::after { background-color: var(--fs-badge-discount-medium-bkg-color); }
+    }
+  }
+
+  &[data-fs-discount-badge-variant="high"] {
+    color: var(--fs-badge-discount-high-text-color);
+
+    [data-fs-badge-wrapper] {
+      background-color: var(--fs-badge-discount-high-bkg-color);
+      border-color: var(--fs-badge-discount-high-border-color);
+      &::after { background-color: var(--fs-badge-discount-high-bkg-color); }
+    }
+  }
+}

package/src/components/ui/Badge/index.ts

@@ -0,0 +1,4 @@
+export { default as DiscountBadge } from './DiscountBadge'
+export { default as Badge } from './Badge'
+export type { BadgeProps } from './Badge'
+export type { DiscountBadgeProps } from './DiscountBadge'

package/src/components/ui/Breadcrumb/Breadcrumb.stories.mdx

@@ -0,0 +1,197 @@
+import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
+import Breadcrumb from '.'
+
+import {
+  TokenTable,
+  TokenRow,
+  TokenDivider,
+} from 'src/../.storybook/components'
+
+<Meta component={Breadcrumb} title="Molecules/Breadcrumb" />
+
+export const breadcrumbList = [
+  { item: 'technology', name: 'Technology', position: 1 },
+  {
+    item: 'technology/electronics',
+    name: 'Electronics',
+    position: 2,
+  },
+  {
+    item: 'technology/electronics/audio-and-video',
+    name: 'Audio & Video',
+    position: 3,
+  },
+  {
+    item: 'technology/electronics/audio-and-video/headphones',
+    name: 'Headphones',
+    position: 4,
+  },
+]
+
+export const Template = (args) => <Breadcrumb {...args} />
+
+<header>
+
+# Breadcrumb
+
+Breadcrumbs indicate the user's location in a website hierarchy, facilitating the navigation to previous page levels.
+
+</header>
+
+## Overview
+
+The `Breadcrumb` component uses [FastStore UI Breadcrumb](https://www.faststore.dev/reference/ui/molecules/Breadcrumb) as base.
+
+<Canvas isColumn>
+  <Story name="overview" args={{ breadcrumbList }}>
+    {Template.bind({})}
+  </Story>
+  <Story
+    name="overview-with-dropdown"
+    args={{
+      breadcrumbList: [
+        ...breadcrumbList,
+        {
+          item: 'technology/electronics/audio-and-video/headphones/headphonesaedle-vk1-headphone',
+          name: 'Aedle VK-1 L Headphone',
+          position: 5,
+        },
+      ],
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+---
+
+## Usage
+
+`import Breadcrumb from 'src/components/ui/Breadcrumb'`
+
+<Canvas>
+  <Story name="default" args={{ breadcrumbList }}>
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+<ArgsTable story="default" />
+
+<TokenTable>
+  <TokenRow
+    token="--fs-breadcrumb-margin-left"
+    value="calc(-1 * var(--fs-spacing-1))"
+  />
+</TokenTable>
+
+---
+
+## Nested Elements
+
+### List Item
+
+<TokenTable>
+  <TokenRow
+    token="--fs-breadcrumb-list-item-padding"
+    value="var(--fs-spacing-0)"
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-breadcrumb-list-item-last-text-color"
+    value="var(--fs-color-text-light)"
+    isColor
+  />
+  <TokenDivider />
+  <TokenRow token="--fs-breadcrumb-list-item-max-width-mobile" value="30%" />
+</TokenTable>
+
+### Link
+
+<TokenTable>
+  <TokenRow
+    token="--fs-breadcrumb-link-color-visited"
+    value="var(--fs-color-link)"
+    isColor
+  />
+</TokenTable>
+
+### Link Home
+
+<TokenTable>
+  <TokenRow
+    token="--fs-breadcrumb-link-home-padding"
+    value="var(--fs-spacing-1)"
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-breadcrumb-link-home-border-radius"
+    value="var(--fs-border-radius-circle)"
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-breadcrumb-link-home-hover-bkg-color"
+    value="var(--fs-color-primary-bkg-light)"
+    isColor
+  />
+  <TokenRow
+    token="--fs-breadcrumb-link-home-color"
+    value="var(--fs-color-text)"
+    isColor
+  />
+</TokenTable>
+
+### Divider
+
+<TokenTable>
+  <TokenRow
+    token="--fs-breadcrumb-divider-height"
+    value="var(--fs-spacing-3)"
+  />
+  <TokenRow
+    token="--fs-breadcrumb-divider-margin"
+    value="var(--fs-spacing-1)"
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-breadcrumb-divider-border-left-width"
+    value="var(--fs-border-width)"
+  />
+  <TokenRow
+    token="--fs-breadcrumb-divider-border-left-color"
+    value="var(--fs-border-color-light)"
+    isColor
+  />
+</TokenTable>
+
+### Dropdown Button
+
+<TokenTable>
+  <TokenRow
+    token="--fs-breadcrumb-dropdown-button-margin-left"
+    value="var(--fs-breadcrumb-margin-left)"
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-breadcrumb-dropdown-button-color"
+    value="var(--fs-color-link)"
+    isColor
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-breadcrumb-dropdown-button-border-radius"
+    value="var(--fs-spacing-0)"
+  />
+  <TokenDivider />
+  <TokenRow
+    token="--fs-breadcrumb-dropdown-button-transition-property"
+    value="var(--fs-transition-property)"
+  />
+  <TokenRow
+    token="--fs-breadcrumb-dropdown-button-transition-timing"
+    value="var(--fs-transition-timing)"
+  />
+  <TokenRow
+    token="--fs-breadcrumb-dropdown-button-transition-function"
+    value="var(--fs-transition-function)"
+  />
+</TokenTable>

package/src/components/ui/Breadcrumb/Breadcrumb.tsx

@@ -0,0 +1,122 @@
+import type { BreadcrumbProps as UIBreadcrumbProps } from '@faststore/ui'
+import { Breadcrumb as UIBreadcrumb } from '@faststore/ui'
+import { useRouter } from 'next/router'
+import { memo } from 'react'
+
+import Dropdown, {
+  DropdownButton,
+  DropdownItem,
+  DropdownMenu,
+} from 'src/components/ui/Dropdown'
+import Icon from 'src/components/ui/Icon'
+import Link from 'src/components/ui/Link'
+
+import styles from './breadcrumb.module.scss'
+
+type ItemElement = {
+  item: string
+  name: string
+  position: number
+}
+export interface BreadcrumbProps extends UIBreadcrumbProps {
+  /**
+   * Array of ItemElement that represents each breadcrumb item.
+   */
+  breadcrumbList: ItemElement[]
+}
+
+interface BaseBreadcrumbProps extends BreadcrumbProps {
+  isDesktop?: boolean
+}
+
+function BaseBreadcrumb({
+  breadcrumbList,
+  isDesktop = false,
+}: BaseBreadcrumbProps) {
+  const router = useRouter()
+  const firstItem = isDesktop ? breadcrumbList[0] : null
+  const mediumItems = isDesktop
+    ? breadcrumbList.slice(1, -2)
+    : breadcrumbList.slice(0, -2)
+
+  const lastItems = breadcrumbList.slice(-2)
+
+  const collapseBreadcrumb = breadcrumbList.length > 4
+
+  return (
+    <UIBreadcrumb
+      divider=""
+      className={`${styles.fsBreadcrumb} ${
+        isDesktop ? 'hidden-mobile' : 'display-mobile'
+      }`}
+    >
+      <Link
+        data-fs-breadcrumb-link
+        data-fs-breadcrumb-link-home
+        aria-label="Go to homepage"
+        href="/"
+      >
+        <Icon name="House" width={18} height={18} weight="bold" />
+      </Link>
+
+      {!collapseBreadcrumb &&
+        breadcrumbList.map(({ item, name }, index) => {
+          return breadcrumbList.length === index + 1 ? (
+            <span key={String(index)}>{name}</span>
+          ) : (
+            <Link data-fs-breadcrumb-link href={item} key={String(index)}>
+              {name}
+            </Link>
+          )
+        })}
+
+      {collapseBreadcrumb && firstItem && (
+        <Link data-fs-breadcrumb-link href={firstItem.item}>
+          {firstItem.name}
+        </Link>
+      )}
+
+      {collapseBreadcrumb && (
+        <Dropdown>
+          <DropdownButton data-fs-breadcrumb-dropdown-button>
+            <Icon name="DotsThree" width={24} height={24} />
+          </DropdownButton>
+          <DropdownMenu data-fs-breadcrumb-dropdown-menu>
+            {mediumItems.map(({ item, name }, index) => (
+              <DropdownItem
+                data-fs-breadcrumb-dropdown-item
+                icon={
+                  <Icon name="ArrowElbowDownRight" width={24} height={24} />
+                }
+                onClick={() => router.push(item)}
+                key={String(index)}
+              >
+                {name}
+              </DropdownItem>
+            ))}
+          </DropdownMenu>
+        </Dropdown>
+      )}
+
+      {collapseBreadcrumb &&
+        lastItems.map(({ item, name }, index) => {
+          return lastItems.length === index + 1 ? (
+            <span key={String(index)}>{name}</span>
+          ) : (
+            <Link data-fs-breadcrumb-link href={item} key={String(index)}>
+              {name}
+            </Link>
+          )
+        })}
+    </UIBreadcrumb>
+  )
+}
+
+const Breadcrumb = ({ breadcrumbList }: BreadcrumbProps) => (
+  <>
+    <BaseBreadcrumb breadcrumbList={breadcrumbList} />
+    <BaseBreadcrumb breadcrumbList={breadcrumbList} isDesktop />
+  </>
+)
+
+export default memo(Breadcrumb)