@faststore/core 0.3.6 → 0.3.7

package/src/components/ui/PriceRange/price-range.module.scss

@@ -141,7 +141,7 @@
   [data-fs-price-range-inputs] {
     display: flex;
 
-    [data-fs-input-text] {
+    [data-fs-input-field] {
       width: 50%;
 
       input:hover,

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

@@ -1,6 +1,6 @@
 import { Meta, Canvas, Story, ArgsTable } from '@storybook/addon-docs'
 
-import { DiscountBadge } from 'src/components/ui/Badge'
+import { DiscountBadge } from '@faststore/ui'
 import ProductTitle from '.'
 import { TokenTable, TokenRow } from 'src/../.storybook/components'
 
@@ -25,22 +25,23 @@ import { TokenTable, TokenRow } from 'src/../.storybook/components'
     label: {
       control: { type: 'radio' },
       options: [
-        '<DiscountBadge listPrice={100} spotPrice={90} big />',
-        '<DiscountBadge listPrice={100} spotPrice={70} big />',
-        '<DiscountBadge listPrice={100} spotPrice={10} big />',
+        '<DiscountBadge listPrice={100} spotPrice={90} size="big" />',
+        '<DiscountBadge listPrice={100} spotPrice={70} size="big" />',
+        '<DiscountBadge listPrice={100} spotPrice={10} size="big" />',
       ],
       mapping: {
-        '<DiscountBadge listPrice={100} spotPrice={90} big />': (
-          <DiscountBadge listPrice={100} spotPrice={90} big />
+        '<DiscountBadge listPrice={100} spotPrice={90} size="big" />': (
+          <DiscountBadge listPrice={100} spotPrice={90} size="big" />
         ),
-        '<DiscountBadge listPrice={100} spotPrice={70} big />': (
-          <DiscountBadge listPrice={100} spotPrice={70} big />
+        '<DiscountBadge listPrice={100} spotPrice={70} size="big" />': (
+          <DiscountBadge listPrice={100} spotPrice={70} size="big" />
         ),
-        '<DiscountBadge listPrice={100} spotPrice={10} big />': (
-          <DiscountBadge listPrice={100} spotPrice={10} big />
+        '<DiscountBadge listPrice={100} spotPrice={10} size="big" />': (
+          <DiscountBadge listPrice={100} spotPrice={10} size="big" />
         ),
       },
-      defaultValue: '<DiscountBadge listPrice={100} spotPrice={90} big />',
+      defaultValue:
+        '<DiscountBadge listPrice={100} spotPrice={90} size="big" />',
     },
     refNumber: {
       defaultValue: '99995945',
@@ -100,8 +101,5 @@ The product title that is commonly used on Product Details Page (PDP).
     token="--fs-product-title-addendum-size"
     value="var(--fs-text-size-1)"
   />
-  <TokenRow
-    token="--fs-product-title-addendum-line-height"
-    value="1.7"
-  />
+  <TokenRow token="--fs-product-title-addendum-line-height" value="1.7" />
 </TokenTable>

package/src/components/ui/QuantitySelector/quantity-selector.module.scss

@@ -35,10 +35,6 @@
   --fs-qty-selector-button-bkg-color-focus    : var(--fs-qty-selector-button-bkg-color-hover);
   --fs-qty-selector-button-border-radius      : var(--fs-qty-selector-border-radius);
 
-  --fs-qty-selector-transition-function       : var(--fs-transition-function);
-  --fs-qty-selector-transition-property       : var(--fs-transition-property);
-  --fs-qty-selector-transition-timing         : var(--fs-transition-timing);
-
   // Disabled properties
   --fs-qty-selector-disabled-bkg-color        : var(--fs-color-disabled-bkg);
   --fs-qty-selector-disabled-text-color       : var(--fs-color-disabled-text);
@@ -73,31 +69,13 @@
     font-size: var(--fs-qty-selector-text-size);
     color: var(--fs-qty-selector-text-color);
     text-align: center;
-    background-color: var(--fs-qty-selector-bkg-color);
-    border: var(--fs-qty-selector-border-width) solid var(--fs-qty-selector-border-color);
-    border-radius: var(--fs-qty-selector-border-radius);
-    transition:
-      var(--fs-qty-selector-transition-property)
-      var(--fs-qty-selector-transition-timing)
-      var(--fs-qty-selector-transition-function);
-
-    @include input-focus-ring;
   }
 
   [data-quantity-selector-button] {
     position: absolute;
-    min-width: var(--fs-control-tap-size);
-    height: 100%;
-    min-height: var(--fs-control-tap-size);
-    padding: var(--fs-spacing-1);
     background-color: var(--fs-qty-selector-button-bkg-color);
-    border: 0;
-    border-radius: var(--fs-qty-selector-button-border-radius);
 
     [data-fs-icon] {
-      display: flex;
-      align-items: center;
-      justify-content: center;
       width: 100%;
       height: 100%;
       border-radius: var(--fs-qty-selector-button-border-radius);
@@ -108,6 +86,10 @@
         var(--fs-qty-selector-transition-function);
     }
 
+    &[data-fs-icon-button] {
+      padding: var(--fs-spacing-1);
+    }
+
     &:first-of-type { left: 0; }
 
     &:last-of-type { right: 0; }
@@ -119,14 +101,31 @@
 
     &:disabled {
       cursor: not-allowed;
+      background-color: var(--fs-qty-selector-button-bkg-color);
+
+      &:hover, &:focus-visible {
+        background-color: var(--fs-qty-selector-button-bkg-color);
+      }
 
       [data-fs-icon] {
         color: var(--fs-qty-selector-disabled-icon-color);
       }
     }
 
+    &:hover:not(:disabled) {
+      background-color: transparent;
+      box-shadow: none;
+    }
+
+    &:focus:not(:disabled) {
+      background-color: transparent;
+      box-shadow: none;
+    }
+
     &:focus-visible {
+      background-color: var(--fs-qty-selector-button-bkg-color);
       outline: none;
+      box-shadow: none;
 
       [data-fs-icon] {
         @include focus-ring;
@@ -151,10 +150,6 @@
   // --------------------------------------------------------
 
   &[data-fs-quantity-selector="disabled"] {
-    [data-quantity-selector-input] {
-      background-color: var(--fs-qty-selector-disabled-bkg-color);
-      border-color: var(--fs-qty-selector-disabled-border-color);
-    }
     [data-quantity-selector-button]:hover [data-fs-icon] { background-color: transparent; }
   }
 }

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

@@ -32,7 +32,7 @@ This feature lets customers set the `PostalCode` and see the shipping options in
 
 ## Overview
 
-The `ShippingSimulation` component uses [FastStore UI Table](https://www.faststore.dev/reference/ui/molecules/Table), and [InputText](/docs/atoms-inputtext-⚠%EF%B8%8F--default) as base.
+The `ShippingSimulation` component uses [FastStore UI Table](https://www.faststore.dev/reference/ui/molecules/Table), and [InputField](https://www.faststore.dev/reference/ui/molecules/InputField) as base.
 
 ### Steps
 

package/src/components/ui/ShippingSimulation/ShippingSimulation.tsx

@@ -1,12 +1,17 @@
 import type { IShippingItem } from '@faststore/api'
-import { Table, TableBody, TableCell, TableRow } from '@faststore/ui'
+import {
+  Table,
+  TableBody,
+  TableCell,
+  TableRow,
+  InputField as UIInputField,
+} from '@faststore/ui'
 import type { HTMLAttributes } from 'react'
 
 import Price from 'src/components/ui/Price'
 import { usePriceFormatter } from 'src/sdk/product/useFormattedPrice'
 
 import Icon from '../Icon'
-import InputText from '../InputText'
 import Link from '../Link'
 import styles from './shipping-simulation.module.scss'
 import { useShippingSimulation } from './useShippingSimulation'
@@ -56,7 +61,7 @@ function ShippingSimulation({
         Shipping
       </h2>
 
-      <InputText
+      <UIInputField
         actionable
         error={errorMessage}
         id="shipping-postal-code"

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

@@ -19,7 +19,7 @@ import storeConfig from 'store.config'
 import { validateSession } from 'src/sdk/session'
 import { useFilter } from 'src/components/search/Filter/useFilter'
 
-import Button, { ButtonBuy } from 'src/components/ui/Button'
+import { Button, BuyButton } from '@faststore/ui'
 import { FilterSlider } from 'src/components/search/Filter'
 
 import SlideOver from '.'
@@ -127,12 +127,12 @@ export const TemplateCartSidebar = () => {
   return (
     <div style={{ display: 'flex', alignItems: 'center' }}>
       <CartToggle />
-      <ButtonBuy
+      <BuyButton
         style={{ marginLeft: '12px' }}
         onClick={() => addItem(cartItem)}
       >
         Add item to Cart
-      </ButtonBuy>
+      </BuyButton>
       {displayCart && <CartSidebar />}
     </div>
   )

package/src/pages/_app.tsx

@@ -1,7 +1,6 @@
-import '../styles/global/tokens.scss'
-import '../styles/global/resets.scss'
-import '../styles/global/typography.scss'
-import '../styles/global/layout.scss'
+// FastStore UI's base styles
+import '@faststore/ui/src/styles/global.scss'
+
 import '../styles/global/components.scss'
 
 import '../customizations/themes/index.scss'

package/src/styles/global/components.scss

@@ -1,5 +1,2 @@
 // Sections
 @import "src/components/sections/Section/section.scss";
-
-// UI
-@import "src/components/ui/SlideOver/overlay.scss";

package/src/styles/global/storybook-components.scss

@@ -1,5 +1,5 @@
+// FastStore UI's base styles
+@import "@faststore/ui/src/styles/global.scss";
+
 // Sections
 @import "src/components/sections/Section/section.scss";
-
-// UI
-@import "src/components/ui/SlideOver/overlay.scss";

package/src/styles/global/utilities.scss

@@ -1,12 +1,19 @@
-// ----------------------------------------------------------
-// GLOBAL STYLES
-// Utilities
-// ----------------------------------------------------------
-
 /* SQ-DISABLE */
 @use "sass:math";
 
 /* SQ-ENABLE */
+/* stylelint-disable-next-line no-invalid-position-at-import-rule */
+@import "~include-media/dist/include-media";
+
+// Include Media Overwrites //////////////////////////
+
+$breakpoints: (
+  "phone":         320px,
+  "phonemid":      375px,
+  "tablet":        768px,
+  "notebook":      1280px,
+  "desktop":       1440px,
+);
 
 // Px to rem.
 $base: 16px !default;