@bonlineza/luxity-lib 2.28.0 → 2.29.1

package/CHANGELOG.md

@@ -0,0 +1,275 @@
+## Changelog
+
+### 2.29.1
+- Allow the search input container to auto focus on render
+
+### 2.29.0
+- Removed models and materials filtering from `Style Selector`
+- Showing brands as multiselect instead of dropdown on `Add Interest` form
+
+### 2.28.0
+Removed models and materials select from `Add Interest`
+
+### 2.27.0
+Add click event on Sidebar of `Rarestep Header`
+
+### 2.26.0
+Once user click on Menu Items Nav will closed `Rarestep Header`
+
+### 2.25.0
+User icon show when it present in `Rarestep Header`
+
+### 2.24.0
+Reduce padding and size of X of `Rarestep Header`
+
+### 2.23.0
+- All items are capitalize headers in `RarestepHeader`
+
+### 2.22.0
+- Add More Navigation Specific for `RarestepHeader`
+
+### 2.21.0
+- Capitalize all headers in `RarestepHeader`
+
+### 2.20.0
+- Move rarestep dropdown brands to header
+
+### 2.19.0
+- Show tiktok icon on `RareStepFooter`
+
+### 2.18.5
+- Allow `RareStepHeader` brands on menu dropdown to be clickable
+
+### 2.18.4
+- Replace `CurrencyInputFormatter` with custom code
+
+### 2.18.3
+- Only show the scroll bar on the `RareStepHeader` side nav when there is scrollable content
+
+### 2.18.2
+- Reduce `RareStepFooter` link font size
+
+### 2.18.1
+- Ensure RareStep SubMenuLink opens SubMenu instead of opening link
+
+### 2.18.0
+- Passing brands, models and materials to the styles graphql query to filter out styles that don't match up to the selected brands, models and materials.
+
+### 2.17.5
+- Open RareStep social media links in a new tab
+
+### 2.17.4
+- Fix stretching of `RareStepFooter` and `RareStepHeader` logo images
+
+### 2.17.3
+- Set a static height size for images on the desktop dropdown menu
+
+### 2.17.2
+- Made links on `RareStepHeader` dropdown clickable
+
+### 2.17.1
+- Aligned `SellToUsLink` with `HeaderIcon`
+
+### 2.17.0
+- Update `HeaderLogo` dimensions
+- Update `HeaderIcon` dimensions
+- Show dropdown on hover of user icon in the header
+
+### 2.16.0
+- Removed unused links from `RareStepFooter` and `RareStepHeader` components 
+- Centre aligned the logo on `RareStepHeader` mobile
+- Changed background color of search container of `RareStepHeader` mobile
+- `RareStepHeader` now accepts handleOnCartClick function to  navigate to cart page 
+
+### 2.15.1
+- Ensure dropdown search fills page width
+- Make `RareStepFooter` and `RareStepHeader` logo clickable
+### 2.15.0
+- Adds sliding animation to `RareStepHeader` on mobile 
+- Change props to camel case for `RareStepFooter` and `RareStepHeader` components 
+
+### 2.14.0
+- Made `RareStepFooter` and `RareStepHeader` components responsive
+
+### 2.13.1
+- Changed interest page heading from `My Interests` to `Interests`.
+
+### 2.13.0
+- Removed `LuxityLoader` component 
+
+### 2.12.0
+- Added a `RareStepHeader` and `RareStepFooter` components
+
+### 2.11.0
+- Components added:
+  -- `GraphQLDropdownSelector`, `LuxityGraphQLDropdownSelector`, `MaterialSelector`, and `ModelSelector`
+- Added models and materials select form fields to add interests.
+
+### 2.10.0
+- Added a `LuxityLoader` component
+### 2.9.2
+- Ensure the search icon is not cutting off
+
+### 2.9.1
+- Ensure the interest categories wrap on small screen
+
+### 2.9.0
+- Added clothing as an interest item
+### 2.8.0
+- Breaking - `CurrencyInput` component renamed to `CurrencyInputFormatter`
+- CurrencyInputFormatter props `onChange, value, prefix, allowNegativeValue,
+  groupSeparator,
+  decimalSeparator,`
+- upgrade react to react 17.0.2
+- upgrade storybook
+- remove storybook-readme
+
+### 2.7.5
+- Change color of the active Interest category
+when adding item as interest
+### 2.7.4
+- Bug fix for IOS, extra space showing on `InterestItem`
+### 2.7.3
+- Fix container alignment of `AddInterest` and `InterestItem` so they match
+- Center alignment trash icon in `InterestItem` 
+### 2.7.2
+- Dont show `MyInterestTitleHeading` if don't have interest items
+### 2.7.1
+- Change svg colors from pink to black
+### 2.7.0 
+- `AddInterest` and `InterestItem` have a new design that does not use the `Accordion` component
+- Can add a watch as interest 
+### 2.6.2
+- Limit the width of the title of `InterestItem` so that it does not overlap with trash icon
+### 2.6.1 
+- Upgrade `@bonlineza/b-lib` to v3.2.2
+
+### 2.6.0
+- `InterestItem` now has a delete button next to the interest title
+### 2.5.4
+- Changed background color on `Add Interest` component buttons to black with white text
+### 2.5.3
+- Changed text color on `Add Interest` component buttons
+
+### 2.5.2
+- `Notify` component now includes a warning function
+### 2.5.1
+- change base color from pink to black
+### 2.5.0
+- `Accordion` component now accepts defaultHeight as a prop
+### 2.4.0
+- Formatted `mark` data for `RangeSlider` 
+### 2.3.0
+- Changed `title` prop on `Accordion` to include support for Component rendering
+### 2.2.0
+- Add `DummyAccordion` component that looks like an `Accordion` only with a button-like behaviour
+- Remove bundle conversion of Flow types to prop-types
+- Strip 'prop-types' from exported bundles (removed the 'prop-types' Dependency)
+- Add `SvgWrapper` as exported component
+- Include `svgs` in package - can now import them induvidually as `@bonlineza/luxity-lib/svg/Add`
+- Update all packages
+- include `package-lock.json` file
+- Update `Tooltip` - allow passing custom classes for `containerClassName` and `bodyClassName`
+- Update `TextButton` - add default `type` prop as 'button' to prevent unintended form submissions
+
+### 2.1.1
+- Update `CountryCodeSelect` change the value that is used in the onChange callback
+
+### 2.1.0
+- Add components: `CountryCodeSelect` and `ReactSelectWrapper`
+
+### 2.0.3
+- Fix: prevent event from being passed into the `closeAccordion` function
+
+### 2.0.2
+- Fix: export `constants` properly - can now import directly from: `@bonlineza/luxity-lib/constants`
+
+### 2.0.1
+- Add fade transition to for `ShoeSizeTypeSelector` to improve ux
+
+### 2.0.0
+- Amend version to `2.0.0` for sanity due to the last feature being a breaking change
+
+### 1.3.0
+- Correct versioning of package due to `shoe-size-type` feature being a breaking 
+change
+
+### 1.2.9
+- Add functionality to choose size type for the `ShoeSelector` in the 
+`AddInterest` component due to spec changes. Add prop `shoe_size_type` to
+payload of of request for adding an interest
+- Add default check functionality for `RadioButton` component
+- Update tests for `RadioButton` and `InterestItem`
+- Correct prop definition `SimpleErrorBoundary` which was preventing `yarn docs`
+from creating an `md` file for that component
+
+### 1.2.8
+- Surround `InterestItem` with `SimpleErrorBoundary`
+- Add sanity to the `getShoeSize` output
+- Export `gender` constants
+
+### 1.2.7
+- Change Full Size Range Button in Add Interest inverted button
+
+### 1.2.6
+- Remove deselectAll from AddInterest
+- Fix infinite loop of CheckboxButton
+- Remove reference props in GenderSelector
+- Update test for CheckboxButton
+
+### 1.2.4
+- Change InterestItem to use the 'title' prop and add test
+
+### 1.2.3
+- Refactor styles of InterestItem so it looks the way it is required to look
+- Fix logic for deselecting brands and styles for GraphQLMultiSelector when a category changes
+- Add forwardRef logic to themed function
+
+### 1.2.2
+- Fix InterstItem render that uses new 'name' prop from Styles
+
+### 1.2.1
+- Fix Border Style for NotificationDropdown
+- Change deleteInterest prop to `deleteInterestApi` to better describe it
+
+### 1.2.0
+- No Longer Exporting: BrandSelector and AddInterest
+- Added Component: Interests
+
+### 1.1.1
+- Fix RangeSlider: Tooltip component receives correct props
+
+### 1.1.0
+- Added Components:
+   - AddInterest
+   - BrandSelector
+   - CurrencyInput
+   - GraphQLMultiSelector
+   - InterestCatSelector
+   - InterestItem
+   - LuxityGraphQLMultiSelector
+   - LuxityPageReady
+   - StyleSelector
+   - RangeSlider
+   - ShoeSizeSelector
+   - PriceRangeSelector
+- Added List of Helper functions to the Readme
+- Added Development guide to the Readme
+- Added Publishing Guide to the Readme
+
+### 1.0.0
+- Breaking Change: Reworked Button 'variant' prop into individual Components
+- Removed Generic Button component
+- New Button components: PrimaryButton, SecondaryButton, TextButton, InvertedTextButton, WrapperButton
+- Added SVG components (see README for full List)
+
+### 0.1.2
+- Updated `styled-components` version to v5
+
+### 0.1.1
+- Moved `styled-components` to dev and peer-dependencies as it is a host project requirement
+
+### 0.1.0
+- Added Components: Checkbox, RadioButtons, Tooltip
+- Added generated ocumentation for components
+- Added Element: Button

package/GraphQLDropdownSelector.js

@@ -9382,141 +9382,6 @@
 
   var NotificationDropDown$1 = themed(NotificationDropDown);
 
-  /**
-   * Luxity flavoured GraphQLMultiselector with text Search, category and limit controls
-   */
-  var LuxityGraphQLDropdownSelector = /*#__PURE__*/function (_React$Component) {
-    _inherits(LuxityGraphQLDropdownSelector, _React$Component);
-
-    var _super = _createSuper(LuxityGraphQLDropdownSelector);
-
-    function LuxityGraphQLDropdownSelector(props) {
-      var _this;
-
-      _classCallCheck(this, LuxityGraphQLDropdownSelector);
-
-      _this = _super.call(this, props);
-
-      _defineProperty(_assertThisInitialized(_this), "multiSelectorRef", /*#__PURE__*/React__default.createRef());
-
-      _defineProperty(_assertThisInitialized(_this), "increaseLimit", function () {
-        _this.setState(function (prevState) {
-          return {
-            limit: prevState.limit + _this.props.queryLimitIncrement
-          };
-        });
-      });
-
-      _defineProperty(_assertThisInitialized(_this), "onChange", function (selection) {
-        _this.props.onChange(selection);
-      });
-
-      _defineProperty(_assertThisInitialized(_this), "render", function () {
-        var _this$state = _this.state,
-            limit = _this$state.limit,
-            query_arguments = _this$state.query_arguments;
-        var _this$props = _this.props,
-            title = _this$props.title,
-            baseClass = _this$props.baseClass,
-            getGraphQuery = _this$props.getGraphQuery,
-            resultProcessor = _this$props.resultProcessor,
-            graphApi = _this$props.graphApi,
-            identifier = _this$props.identifier,
-            requestInstance = _this$props.requestInstance;
-        return /*#__PURE__*/React__default.createElement("div", {
-          className: baseClass
-        }, /*#__PURE__*/React__default.createElement(InterestsSubheading, {
-          className: "".concat(baseClass, "__title"),
-          title: title
-        }), /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(GraphQLDropdownSelector$1, {
-          triggerRequest: function triggerRequest() {
-            return requestInstance.post(graphApi, {
-              query: getGraphQuery(limit, 1, 'id|desc', query_arguments)
-            });
-          },
-          graphQuery: getGraphQuery(limit, 1, 'id|desc', query_arguments),
-          identifier: identifier,
-          ref: _this.multiSelectorRef,
-          onChange: _this.onChange,
-          resultProcessor: resultProcessor
-        })));
-      });
-
-      _this.state = {
-        limit: props.baseQueryLimit,
-        query_arguments: props.query_arguments
-      };
-      return _this;
-    }
-
-    _createClass(LuxityGraphQLDropdownSelector, [{
-      key: "componentDidUpdate",
-      value: function componentDidUpdate(prevProps) {
-        var _this$multiSelectorRe;
-
-        if (prevProps.query_arguments !== this.props.query_arguments && (_this$multiSelectorRe = this.multiSelectorRef) !== null && _this$multiSelectorRe !== void 0 && _this$multiSelectorRe.current) {
-          this.multiSelectorRef.current.emptySelected();
-        }
-      }
-    }], [{
-      key: "getDerivedStateFromProps",
-      value: function getDerivedStateFromProps(props, prevState) {
-        if (prevState.query_arguments !== props.query_arguments) {
-          return {
-            query_arguments: props.query_arguments
-          };
-        }
-
-        return null;
-      }
-    }]);
-
-    return LuxityGraphQLDropdownSelector;
-  }(React__default.Component);
-
-  LuxityGraphQLDropdownSelector.defaultProps = {
-    baseClass: '',
-    searchPlaceHolder: '',
-    queryLimitIncrement: 12,
-    baseQueryLimit: 12
-  };
-
-  var BrandSelector = function BrandSelector(_ref) {
-    var onChange = _ref.onChange,
-        category = _ref.category,
-        graphApi = _ref.graphApi,
-        getGraphQuery = _ref.getGraphQuery,
-        resultProcessor = _ref.resultProcessor,
-        requestInstance = _ref.requestInstance;
-    return /*#__PURE__*/React__default.createElement(LuxityGraphQLDropdownSelector, {
-      baseQueryLimit: 9999,
-      title: "Brands",
-      queryId: "getBrands",
-      baseClass: "brand-selector",
-      identifier: "brand-selector",
-      searchPlaceHolder: "Search brands",
-      query_arguments: category,
-      onChange: onChange,
-      graphApi: graphApi,
-      getGraphQuery: getGraphQuery,
-      resultProcessor: resultProcessor,
-      requestInstance: requestInstance
-    });
-  };
-
-  BrandSelector.defaultProps = {
-    resultProcessor: function resultProcessor(result) {
-      return result.data.data.luxity_brands.data.map(function (_ref2) {
-        var id = _ref2.id,
-            name = _ref2.name;
-        return {
-          label: name,
-          value: id
-        };
-      });
-    }
-  };
-
   var _templateObject$E, _templateObject2$6;
   var ALL_ITEM = {
     id: 'ALL',
@@ -9849,10 +9714,7 @@
         var _this$state = _this.state,
             limit = _this$state.limit,
             category = _this$state.category,
-            nameFilter = _this$state.nameFilter,
-            brands = _this$state.brands,
-            models = _this$state.models,
-            materials = _this$state.materials;
+            nameFilter = _this$state.nameFilter;
         var _this$props = _this.props,
             title = _this$props.title,
             baseClass = _this$props.baseClass,
@@ -9873,10 +9735,10 @@
         }), /*#__PURE__*/React__default.createElement(React.Fragment, null, /*#__PURE__*/React__default.createElement(GraphQLMultiSelector$1, {
           triggerRequest: function triggerRequest() {
             return requestInstance.post(graphApi, {
-              query: getGraphQuery(limit, 1, 'id|desc', category, nameFilter, brands, models, materials)
+              query: getGraphQuery(limit, 1, 'id|desc', category, nameFilter)
             });
           },
-          graphQuery: getGraphQuery(limit, 1, 'id|desc', category, nameFilter, brands, models, materials),
+          graphQuery: getGraphQuery(limit, 1, 'id|desc', category, nameFilter),
           identifier: identifier,
           ref: _this.multiSelectorRef,
           onChange: _this.onChange,
@@ -9889,9 +9751,6 @@
       _this.state = {
         limit: props.baseQueryLimit,
         category: props.category,
-        brands: props.brands,
-        models: props.models,
-        materials: props.materials,
         nameFilter: ''
       };
       return _this;
@@ -9900,23 +9759,11 @@
     _createClass(LuxityGraphQLMultiselector, [{
       key: "componentDidUpdate",
       value: function componentDidUpdate(prevProps) {
-        var _this$multiSelectorRe, _this$multiSelectorRe2, _this$multiSelectorRe3, _this$multiSelectorRe4;
+        var _this$multiSelectorRe;
 
         if (prevProps.category !== this.props.category && (_this$multiSelectorRe = this.multiSelectorRef) !== null && _this$multiSelectorRe !== void 0 && _this$multiSelectorRe.current) {
           this.multiSelectorRef.current.emptySelected();
         }
-
-        if (prevProps.brands !== this.props.brands && (_this$multiSelectorRe2 = this.multiSelectorRef) !== null && _this$multiSelectorRe2 !== void 0 && _this$multiSelectorRe2.current) {
-          this.multiSelectorRef.current.emptySelected();
-        }
-
-        if (prevProps.models !== this.props.models && (_this$multiSelectorRe3 = this.multiSelectorRef) !== null && _this$multiSelectorRe3 !== void 0 && _this$multiSelectorRe3.current) {
-          this.multiSelectorRef.current.emptySelected();
-        }
-
-        if (prevProps.materials !== this.props.materials && (_this$multiSelectorRe4 = this.multiSelectorRef) !== null && _this$multiSelectorRe4 !== void 0 && _this$multiSelectorRe4.current) {
-          this.multiSelectorRef.current.emptySelected();
-        }
       }
     }], [{
       key: "getDerivedStateFromProps",
@@ -9927,24 +9774,6 @@
           };
         }
 
-        if (prevState.brands !== props.brands) {
-          return {
-            brands: props.brands
-          };
-        }
-
-        if (prevState.models !== props.models) {
-          return {
-            models: props.models
-          };
-        }
-
-        if (prevState.materials !== props.materials) {
-          return {
-            materials: props.materials
-          };
-        }
-
         return null;
       }
     }]);
@@ -9986,6 +9815,38 @@
     return selected ? /*#__PURE__*/React__default.createElement(PrimaryButton$1, props, item.name) : /*#__PURE__*/React__default.createElement(UnselectedButton, props, item.name);
   };
 
+  var BrandSelector = function BrandSelector(_ref) {
+    var onChange = _ref.onChange,
+        category = _ref.category,
+        graphApi = _ref.graphApi,
+        itemRenderer = _ref.itemRenderer,
+        getGraphQuery = _ref.getGraphQuery,
+        resultProcessor = _ref.resultProcessor,
+        requestInstance = _ref.requestInstance;
+    return /*#__PURE__*/React__default.createElement(LuxityGraphQLMultiselector, {
+      baseQueryLimit: 16,
+      title: "Brands",
+      queryId: "getBrands",
+      baseClass: "brand-selector",
+      identifier: "brand-selector",
+      searchPlaceHolder: "Search brands",
+      category: category,
+      onChange: onChange,
+      graphApi: graphApi,
+      itemRenderer: itemRenderer,
+      getGraphQuery: getGraphQuery,
+      resultProcessor: resultProcessor,
+      requestInstance: requestInstance
+    });
+  };
+
+  BrandSelector.defaultProps = {
+    itemRenderer: ItemRenderer,
+    resultProcessor: function resultProcessor(result) {
+      return result.data.data.luxity_brands;
+    }
+  };
+
   var StyleSelector = function StyleSelector(_ref) {
     var onChange = _ref.onChange,
         category = _ref.category,
@@ -9993,10 +9854,7 @@
         itemRenderer = _ref.itemRenderer,
         getGraphQuery = _ref.getGraphQuery,
         resultProcessor = _ref.resultProcessor,
-        requestInstance = _ref.requestInstance,
-        brands = _ref.brands,
-        models = _ref.models,
-        materials = _ref.materials;
+        requestInstance = _ref.requestInstance;
     return /*#__PURE__*/React__default.createElement(LuxityGraphQLMultiselector, {
       title: "Styles",
       queryId: "getStyles",
@@ -10005,9 +9863,6 @@
       identifier: "style-selector",
       searchPlaceHolder: "Search Styles",
       category: category,
-      brands: brands,
-      models: models,
-      materials: materials,
       onChange: onChange,
       graphApi: graphApi,
       itemRenderer: itemRenderer,
@@ -11248,8 +11103,8 @@
   GraphQLDropdownSelector.defaultProps = {
     baseClass: 'multiselector'
   };
-  var GraphQLDropdownSelector$1 = themed(GraphQLDropdownSelector);
+  var index$2 = themed(GraphQLDropdownSelector);
 
-  return GraphQLDropdownSelector$1;
+  return index$2;
 
 })));