@faststore/ui 2.0.85-alpha.0 → 2.0.87-alpha.0

package/dist/index.d.ts

@@ -3,8 +3,6 @@ export { default as TextArea } from './components/atoms/TextArea';
 export type { TextAreaProps } from './components/atoms/TextArea';
 export { default as Incentive } from './components/atoms/Incentive';
 export type { IncentiveProps } from './components/atoms/Incentive';
-export { default as SkuSelector } from './components/molecules/SkuSelector';
-export type { SkuSelectorProps } from './components/molecules/SkuSelector';
 export { default as OrderSummary } from './components/molecules/OrderSummary';
 export type { OrderSummaryProps } from './components/molecules/OrderSummary';
 export { default as Bullets } from './components/molecules/Bullets';

package/dist/index.js

@@ -3,7 +3,6 @@ export * from '@faststore/components';
 export { default as TextArea } from './components/atoms/TextArea';
 export { default as Incentive } from './components/atoms/Incentive';
 // Molecules
-export { default as SkuSelector } from './components/molecules/SkuSelector';
 export { default as OrderSummary } from './components/molecules/OrderSummary';
 export { default as Bullets } from './components/molecules/Bullets';
 export { default as SearchInput } from './components/molecules/SearchInput';

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AAErC,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAGjE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAGnE,YAAY;AACZ,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAA;AAG3E,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qCAAqC,CAAA;AAG7E,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAGnE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAA;AAM3E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,iCAAiC,CAAA;AAGrE,OAAO,EACL,OAAO,IAAI,MAAM,EACjB,aAAa,EACb,WAAW,EACX,UAAU,GACX,MAAM,+BAA+B,CAAA;AAQtC,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,6BAA6B,CAAA;AAG7D,YAAY;AACZ,OAAO,EACL,OAAO,IAAI,UAAU,EACrB,eAAe,EACf,iBAAiB,GAClB,MAAM,mCAAmC,CAAA;AAO1C,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAA;AAG1D,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAA"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,cAAc,uBAAuB,CAAA;AAErC,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,6BAA6B,CAAA;AAGjE,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,8BAA8B,CAAA;AAGnE,YAAY;AAEZ,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qCAAqC,CAAA;AAG7E,OAAO,EAAE,OAAO,IAAI,OAAO,EAAE,MAAM,gCAAgC,CAAA;AAGnE,OAAO,EAAE,OAAO,IAAI,WAAW,EAAE,MAAM,oCAAoC,CAAA;AAM3E,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,iCAAiC,CAAA;AAGrE,OAAO,EACL,OAAO,IAAI,MAAM,EACjB,aAAa,EACb,WAAW,EACX,UAAU,GACX,MAAM,+BAA+B,CAAA;AAQtC,OAAO,EAAE,OAAO,IAAI,IAAI,EAAE,MAAM,6BAA6B,CAAA;AAG7D,YAAY;AACZ,OAAO,EACL,OAAO,IAAI,UAAU,EACrB,eAAe,EACf,iBAAiB,GAClB,MAAM,mCAAmC,CAAA;AAO1C,OAAO,EAAE,KAAK,EAAE,IAAI,EAAE,MAAM,8BAA8B,CAAA;AAG1D,QAAQ;AACR,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,mBAAmB,CAAA"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@faststore/ui",
-  "version": "2.0.85-alpha.0",
+  "version": "2.0.87-alpha.0",
   "description": "A lightweight, framework agnostic component library for React",
   "author": "emersonlaurentino",
   "license": "MIT",
@@ -58,5 +58,5 @@
     "node": "16.18.0",
     "yarn": "1.19.1"
   },
-  "gitHead": "24590eae428eae6be0b7c43cbec9fe236270794e"
+  "gitHead": "b3bf59d620318b0bd4511eb4731eb716006c0fb4"
 }

package/src/components/molecules/SkuSelector/styles.scss

@@ -0,0 +1,204 @@
+@mixin sku-selector-focus-ring {
+  @media not all and (min-resolution: .001dpcm) { // Target only Safari browsers
+    @supports (-webkit-appearance:none) {
+      // Use `focus` instead of `focus-visible` due to Safari's lack of support
+      &:focus > span {
+        border-color: var(--fs-border-color-active);
+        border-width: var(--fs-border-width-thick);
+
+        @include focus-ring;
+      }
+    }
+  }
+
+  &:focus-visible > span {
+    border-color: var(--fs-border-color-active);
+    border-width: var(--fs-border-width-thick);
+
+    @include focus-ring;
+  }
+}
+
+[data-fs-sku-selector] {
+  // --------------------------------------------------------
+  // Design Tokens for Sku Selector
+  // --------------------------------------------------------
+
+  // Default properties
+  --fs-sku-selector-row-gap                      : var(--fs-spacing-2);
+  --fs-sku-selector-column-gap                   : var(--fs-sku-selector-row-gap);
+  --fs-sku-selector-text-size                    : var(--fs-text-size-1);
+
+  // Option
+  --fs-sku-selector-option-width                 : var(--fs-spacing-7);
+  --fs-sku-selector-option-height                : var(--fs-sku-selector-option-width);
+  --fs-sku-selector-option-bkg-color-hover       : var(--fs-color-primary-bkg-light);
+
+  --fs-sku-selector-option-border-width          : var(--fs-border-width-thick);
+  --fs-sku-selector-option-border-color          : var(--fs-color-neutral-7);
+  --fs-sku-selector-option-border-radius         : var(--fs-border-radius);
+  --fs-sku-selector-option-border-color-hover    : var(--fs-border-color-active);
+
+  --fs-sku-selector-option-checked-border-width  : var(--fs-sku-selector-option-border-width);
+  --fs-sku-selector-option-checked-border-color  : var(--fs-sku-selector-option-border-color-hover);
+  --fs-sku-selector-option-checked-box-shadow    : 0 0 0 var(--fs-border-width-thickest) var(--fs-color-focus-ring-outline);
+  --fs-sku-selector-option-checked-bkg-color     : var(--fs-sku-selector-option-bkg-color-hover);
+
+  --fs-sku-selector-option-disabled-width        : var(--fs-border-width);
+  --fs-sku-selector-option-disabled-color        : var(--fs-color-disabled-text);
+  --fs-sku-selector-option-disabled-border-color : var(--fs-border-color-disabled);
+  --fs-sku-selector-option-disabled-bkg-color    : var(--fs-sku-selector-option-disabled-border-color);
+
+  --fs-sku-selector-option-transition-timing     : var(--fs-transition-timing);
+  --fs-sku-selector-option-transition-function   : ease;
+
+  // Image
+  --fs-sku-selector-image-width                  : var(--fs-spacing-6);
+  --fs-sku-selector-image-height                 : var(--fs-sku-selector-image-width);
+  --fs-sku-selector-image-border-radius          : var(--fs-border-radius-small);
+
+  // Color
+  --fs-sku-selector-color-width                  : var(--fs-sku-selector-image-width);
+  --fs-sku-selector-color-height                 : var(--fs-sku-selector-color-width);
+  --fs-sku-selector-color-border-radius          : var(--fs-sku-selector-image-border-radius);
+
+
+  // --------------------------------------------------------
+  // Structural Styles
+  // --------------------------------------------------------
+
+  display: flex;
+  flex-wrap: wrap;
+  row-gap: var(--fs-sku-selector-row-gap);
+  column-gap: var(--fs-sku-selector-column-gap);
+  font-size: var(--fs-sku-selector-text-size);
+
+  [data-fs-sku-selector-title] {
+    width: 100%;
+  }
+
+  [data-fs-sku-selector-list] {
+    display: flex;
+    column-gap: var(--fs-spacing-1);
+  }
+
+  [data-fs-sku-selector-option] {
+    position: relative;
+    width: var(--fs-sku-selector-option-width);
+    height: var(--fs-sku-selector-option-height);
+
+    [data-fs-sku-selector-option-link] {
+      position: absolute;
+      width: 100%;
+      height: 100%;
+      z-index: 1;
+    }
+
+    span {
+      position: relative;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: hidden;
+      width: 100%;
+      height: 100%;
+      border: var(--fs-border-width) solid var(--fs-sku-selector-option-border-color);
+      border-radius: var(--fs-sku-selector-option-border-radius);
+      box-shadow: 0;
+      transition: box-shadow var(--fs-sku-selector-option-transition-timing) var(--fs-sku-selector-option-transition-function), background-color var(--fs-sku-selector-option-transition-timing) var(--fs-sku-selector-option-transition-function);
+
+    }
+
+    @include sku-selector-focus-ring;
+
+    &:hover:not([data-fs-sku-selector-disabled="true"]):not([data-fs-sku-selector-checked="true"]) > span {
+      border-color: var(--fs-sku-selector-option-border-color-hover);
+      border-width: var(--fs-sku-selector-option-border-width);
+    }
+
+    &[data-fs-sku-selector-checked="true"] > span {
+      border-color: var(--fs-sku-selector-option-checked-border-color);
+      border-width: var(--fs-sku-selector-option-checked-border-width);
+      box-shadow: var(--fs-sku-selector-option-checked-box-shadow);
+    }
+
+    &[data-fs-sku-selector-disabled="true"] {
+      cursor: not-allowed;
+
+      [data-fs-sku-selector-option-link] {
+        display: none;
+        pointer-events: none;
+      }
+
+      > span {
+        overflow: hidden;
+        color: var(--fs-sku-selector-option-disabled-color);
+        border-color: var(--fs-sku-selector-option-disabled-border-color);
+        pointer-events: none;
+
+        [data-fs-sku-selector-option-image] { opacity: .7; }
+
+        &::after {
+          position: absolute;
+          width: var(--fs-sku-selector-option-disabled-width);
+          height: 160%;
+          content: "";
+          background-color: var(--fs-sku-selector-option-disabled-bkg-color);
+          transform: rotate(45deg);
+          transform-origin: center;
+        }
+      }
+    }
+  }
+
+  // --------------------------------------------------------
+  // Variants Styles
+  // --------------------------------------------------------
+
+  &[data-fs-sku-selector-variant="color"] {
+    [data-fs-sku-selector-option-color] {
+      width: var(--fs-sku-selector-color-width);
+      height: var(--fs-sku-selector-color-height);
+      border-radius: var(--fs-sku-selector-color-border-radius);
+      transition: transform var(--fs-sku-selector-option-transition-timing) var(--fs-sku-selector-option-transition-function);
+      transform-origin: center center;
+      background-color: var(--data-fs-sku-selector-option-color-bkg-color);
+    }
+
+    [data-fs-sku-selector-option] {
+      &:hover:not([data-fs-sku-selector-disabled="true"]):not([data-fs-sku-selector-checked="true"]) > span [data-fs-sku-selector-option-color] {
+        transform: scale(.95);
+      }
+
+      &[data-fs-sku-selector-checked="true"] > span [data-fs-sku-selector-option-color] {
+        transform: scale(.85);
+      }
+    }
+  }
+
+  &[data-fs-sku-selector-variant="label"] [data-fs-sku-selector-option] {
+    &:hover:not([data-fs-sku-selector-disabled="true"]) > span { background-color: var(--fs-sku-selector-option-bkg-color-hover); }
+
+    &[data-fs-sku-selector-checked="true"] > span { background-color: var(--fs-sku-selector-option-checked-bkg-color); }
+  }
+
+  &[data-fs-sku-selector-variant="image"] {
+    [data-fs-sku-selector-option-image] {
+      width: var(--fs-sku-selector-image-width);
+      height: var(--fs-sku-selector-image-height);
+      border-radius: var(--fs-sku-selector-image-border-radius);
+      transition: transform var(--fs-sku-selector-option-transition-timing) var(--fs-sku-selector-option-transition-function);
+      transform-origin: center center;
+    }
+
+    [data-fs-sku-selector-option] {
+      &:hover:not([data-fs-sku-selector-disabled="true"]):not([data-fs-sku-selector-checked="true"]) > span [data-fs-sku-selector-option-image] {
+        transform: scale(.95);
+      }
+
+      &[data-fs-sku-selector-checked="true"] > span [data-fs-sku-selector-option-image] {
+        transform: scale(.85);
+      }
+    }
+  }
+}

package/src/index.ts

@@ -8,8 +8,6 @@ export { default as Incentive } from './components/atoms/Incentive'
 export type { IncentiveProps } from './components/atoms/Incentive'
 
 // Molecules
-export { default as SkuSelector } from './components/molecules/SkuSelector'
-export type { SkuSelectorProps } from './components/molecules/SkuSelector'
 
 export { default as OrderSummary } from './components/molecules/OrderSummary'
 export type { OrderSummaryProps } from './components/molecules/OrderSummary'

package/src/styles/components.scss

@@ -38,6 +38,7 @@
 @import "../components/molecules/SearchProducts/styles";
 @import "../components/molecules/SearchTop/styles";
 @import "../components/molecules/SelectField/styles";
+@import "../components/molecules/SkuSelector/styles";
 @import "../components/molecules/Table/styles";
 @import "../components/molecules/Tag/styles";
 @import "../components/molecules/Toast/styles";

package/dist/components/molecules/SkuSelector/SkuSelector.d.ts

@@ -1,58 +0,0 @@
-import type { ChangeEventHandler, HTMLAttributes } from 'react';
-import React from 'react';
-interface SkuProps {
-    /**
-     * Alternative text description of the image.
-     */
-    alt?: string;
-    /**
-     * Image URL.
-     */
-    src?: string;
-    /**
-     * Label to describe the option when selected.
-     */
-    label: string;
-    /**
-     * Current value for this option.
-     */
-    value: string;
-    /**
-     * Specifies that this option should be disabled.
-     */
-    disabled?: boolean;
-}
-type Variant = 'label' | 'image';
-export interface SkuSelectorProps extends HTMLAttributes<HTMLDivElement> {
-    /**
-     * ID to find this component in testing tools (e.g.: cypress,
-     * testing-library, and jest).
-     */
-    testId?: string;
-    /**
-     * ID of the current instance of the component.
-     */
-    id?: string;
-    /**
-     * Specify which variant the component should handle.
-     */
-    variant: Variant;
-    /**
-     * SKU options that should be rendered.
-     */
-    options: SkuProps[];
-    /**
-     * Section label for the SKU selector.
-     */
-    label?: string;
-    /**
-     * Currently active variation's value.
-     */
-    activeValue: string;
-    /**
-     * Function to be triggered when SKU option change.
-     */
-    onChange?: ChangeEventHandler<HTMLInputElement>;
-}
-declare const SkuSelector: React.ForwardRefExoticComponent<SkuSelectorProps & React.RefAttributes<HTMLDivElement>>;
-export default SkuSelector;

package/dist/components/molecules/SkuSelector/SkuSelector.js

@@ -1,15 +0,0 @@
-import React, { forwardRef } from 'react';
-import { Label, RadioGroup } from '@faststore/components';
-const SkuSelector = forwardRef(function SkuSelector({ id, label, variant, onChange, testId = 'store-sku-selector', activeValue, children, ...otherProps }, ref) {
-    const radioGroupId = id ? `-${id}` : '';
-    return (React.createElement("div", { ref: ref, "data-fs-sku-selector": true, "data-testid": testId, "data-fs-sku-selector-variant": variant, ...otherProps },
-        label && (React.createElement(Label, { "data-fs-sku-selector-title": true },
-            label,
-            ": ",
-            React.createElement("strong", null, activeValue))),
-        React.createElement(RadioGroup, { selectedValue: activeValue, name: `sku-selector-${variant}${radioGroupId}`, onChange: (e) => {
-                onChange?.(e);
-            } }, children)));
-});
-export default SkuSelector;
-//# sourceMappingURL=SkuSelector.js.map

package/dist/components/molecules/SkuSelector/SkuSelector.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"SkuSelector.js","sourceRoot":"","sources":["../../../../src/components/molecules/SkuSelector/SkuSelector.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,UAAU,EAAE,MAAM,OAAO,CAAA;AACzC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAA;AA4DzD,MAAM,WAAW,GAAG,UAAU,CAC5B,SAAS,WAAW,CAClB,EACE,EAAE,EACF,KAAK,EACL,OAAO,EACP,QAAQ,EACR,MAAM,GAAG,oBAAoB,EAC7B,WAAW,EACX,QAAQ,EACR,GAAG,UAAU,EACd,EACD,GAAG;IAEH,MAAM,YAAY,GAAG,EAAE,CAAC,CAAC,CAAC,IAAI,EAAE,EAAE,CAAC,CAAC,CAAC,EAAE,CAAA;IAEvC,OAAO,CACL,6BACE,GAAG,EAAE,GAAG,+CAEK,MAAM,kCACW,OAAO,KACjC,UAAU;QAEb,KAAK,IAAI,CACR,oBAAC,KAAK;YACH,KAAK;;YAAG,oCAAS,WAAW,CAAU,CACjC,CACT;QACD,oBAAC,UAAU,IACT,aAAa,EAAE,WAAW,EAC1B,IAAI,EAAE,gBAAgB,OAAO,GAAG,YAAY,EAAE,EAC9C,QAAQ,EAAE,CAAC,CAAC,EAAE,EAAE;gBACd,QAAQ,EAAE,CAAC,CAAC,CAAC,CAAA;YACf,CAAC,IAEA,QAAQ,CACE,CACT,CACP,CAAA;AACH,CAAC,CACF,CAAA;AAED,eAAe,WAAW,CAAA"}

package/dist/components/molecules/SkuSelector/index.d.ts

@@ -1,2 +0,0 @@
-export { default } from './SkuSelector';
-export type { SkuSelectorProps } from './SkuSelector';

package/dist/components/molecules/SkuSelector/index.js

@@ -1,2 +0,0 @@
-export { default } from './SkuSelector';
-//# sourceMappingURL=index.js.map

package/dist/components/molecules/SkuSelector/index.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/components/molecules/SkuSelector/index.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA"}

package/src/components/molecules/SkuSelector/SkuSelector.tsx

@@ -1,106 +0,0 @@
-import type { ChangeEventHandler, HTMLAttributes } from 'react'
-import React, { forwardRef } from 'react'
-import { Label, RadioGroup } from '@faststore/components'
-
-interface SkuProps {
-  /**
-   * Alternative text description of the image.
-   */
-  alt?: string
-  /**
-   * Image URL.
-   */
-  src?: string
-  /**
-   * Label to describe the option when selected.
-   */
-  label: string
-  /**
-   * Current value for this option.
-   */
-  value: string
-  /**
-   * Specifies that this option should be disabled.
-   */
-  disabled?: boolean
-}
-
-// TODO: Add the 'color' variant back once the store supports naturally handling color SKUs.
-type Variant = 'label' | 'image'
-
-export interface SkuSelectorProps extends HTMLAttributes<HTMLDivElement> {
-  /**
-   * ID to find this component in testing tools (e.g.: cypress,
-   * testing-library, and jest).
-   */
-  testId?: string
-  /**
-   * ID of the current instance of the component.
-   */
-  id?: string
-  /**
-   * Specify which variant the component should handle.
-   */
-  variant: Variant
-  /**
-   * SKU options that should be rendered.
-   */
-  options: SkuProps[]
-  /**
-   * Section label for the SKU selector.
-   */
-  label?: string
-  /**
-   * Currently active variation's value.
-   */
-  activeValue: string
-  /**
-   * Function to be triggered when SKU option change.
-   */
-  onChange?: ChangeEventHandler<HTMLInputElement>
-}
-
-const SkuSelector = forwardRef<HTMLDivElement, SkuSelectorProps>(
-  function SkuSelector(
-    {
-      id,
-      label,
-      variant,
-      onChange,
-      testId = 'store-sku-selector',
-      activeValue,
-      children,
-      ...otherProps
-    },
-    ref
-  ) {
-    const radioGroupId = id ? `-${id}` : ''
-
-    return (
-      <div
-        ref={ref}
-        data-fs-sku-selector
-        data-testid={testId}
-        data-fs-sku-selector-variant={variant}
-        {...otherProps}
-      >
-        {label && (
-          <Label data-fs-sku-selector-title>
-            {label}: <strong>{activeValue}</strong>
-          </Label>
-        )}
-        <RadioGroup
-          selectedValue={activeValue}
-          name={`sku-selector-${variant}${radioGroupId}`}
-          onChange={(e) => {
-            onChange?.(e)
-          }}
-        >
-          {children}
-        </RadioGroup>
-      </div>
-    )
-  }
-)
-
-export default SkuSelector

package/src/components/molecules/SkuSelector/index.tsx

@@ -1,2 +0,0 @@
-export { default } from './SkuSelector'
-export type { SkuSelectorProps } from './SkuSelector'