Merge branch 'main' into release-via-github-actions

Author: juanpprieto

.gitignore

@@ -8,14 +8,11 @@ index.js
 legacy.html
 /src/styles/embeds/all.js
 /src/styles/host/main.js
-selenium-standalone.jar
-WDIO.*.xml
 test-output.xml
 lint-output.xml
 /errorShots
 
 docs/src
-/selenium-errorshots
 _site
 .sass-cache
 .jekyll-metadata

.npmignore

@@ -5,12 +5,9 @@ index.html
 legacy.html
 /src/styles/embeds/all.js
 /src/styles/host/main.js
-selenium-standalone.jar
-WDIO.*.xml
 .travis.yml
 test-output.xml
 lint-output.xml
 /errorShots
-/selenium-errorshots
 /test/build
 config.json

.nvmrc

@@ -1 +1 @@
-v16.16.0
+v18.20.0

.travis.yml

@@ -1,7 +1,7 @@
 # How to contribute
 We ❤️ pull requests. If you'd like to fix a bug, contribute a feature or
 just correct a typo, please feel free to do so, as long as you follow
-our [Code of Conduct](https://github.com/Shopify/js-buy-sdk/blob/master/CODE_OF_CONDUCT.md).
+our [Code of Conduct](https://github.com/Shopify/js-buy-sdk/blob/main/CODE_OF_CONDUCT.md).
 
 If you're thinking of adding a big new feature, consider opening an
 issue first to discuss it to ensure it aligns to the direction of the

CONTRIBUTING.md

@@ -1,8 +1,8 @@
 ## Deploying and publishing BuyButton.js
 
-Pull from master and install all dependencies
+Pull from main and install all dependencies
 ```
-git pull origin master
+git pull origin main
 yarn install
 ```
 Then run
@@ -18,7 +18,7 @@ Which will do 3 things:
 - create a tag
 
 ```
-git push origin master --tags
+git push origin main --tags
 ```
 
-Then deploy to S3 and NPM via [Shipit](https://shipit.shopify.io/shopify/buy-button-js/production)
+Then deploy via [Shipit](https://shipit.shopify.io/shopify/buy-button-js/production)

DEPLOYING.md

@@ -3,8 +3,8 @@ name: buy-button-js
 
 up:
   - node:
-      version: v16.16.0
-      yarn: 1.22.15
+      version: v18.20.0
+      yarn: 1.22.22
 
 commands:
   test:

dev.yml

@@ -127,7 +127,7 @@ <h2>product</h2>
     <td>templates</td>
     <td>object</td>
     <td>mustache templates used to display contents</td>
-    <td><a href="https://github.com/Shopify/buy-button-js/blob/master/src/templates/product.js">product.js</a></td>
+    <td><a href="https://github.com/Shopify/buy-button-js/blob/main/src/templates/product.js">product.js</a></td>
     <td></td>
   </tr>
   </tbody>
@@ -237,7 +237,7 @@ <h2>modalProduct</h2>
     <td>templates</td>
     <td>object</td>
     <td>mustache templates used to display contents</td>
-    <td><a href="https://github.com/Shopify/buy-button-js/blob/master/src/templates/product.js">product.js</a></td>
+    <td><a href="https://github.com/Shopify/buy-button-js/blob/main/src/templates/product.js">product.js</a></td>
     <td></td>
   </tr>
   </tbody>
@@ -294,7 +294,7 @@ <h2>modal</h2>
     <td>templates</td>
     <td>object</td>
     <td>mustache templates used to display contents</td>
-    <td><a href="https://github.com/Shopify/buy-button-js/blob/master/src/templates/modal.js">modal.js</a></td>
+    <td><a href="https://github.com/Shopify/buy-button-js/blob/main/src/templates/modal.js">modal.js</a></td>
     <td></td>
   </tr>
   </tbody>
@@ -407,7 +407,7 @@ <h2>option</h2>
     <td>templates</td>
     <td>object</td>
     <td>mustache templates used to display contents</td>
-    <td><a href="https://github.com/Shopify/buy-button-js/blob/master/src/templates/option.js">option.js</a></td>
+    <td><a href="https://github.com/Shopify/buy-button-js/blob/main/src/templates/option.js">option.js</a></td>
     <td></td>
   </tr>
   </tbody>
@@ -495,7 +495,7 @@ <h2>cart</h2>
     <td>templates</td>
     <td>object</td>
     <td>mustache templates used to display contents</td>
-    <td><a href="https://github.com/Shopify/buy-button-js/blob/master/src/templates/cart.js">cart.js</a></td>
+    <td><a href="https://github.com/Shopify/buy-button-js/blob/main/src/templates/cart.js">cart.js</a></td>
     <td></td>
   </tr>
   </tbody>
@@ -556,7 +556,7 @@ <h2>lineItem</h2>
     <td>templates</td>
     <td>object</td>
     <td>mustache templates used to display contents</td>
-    <td><a href="https://github.com/Shopify/buy-button-js/blob/master/src/templates/line-item.js">line-item.js</a></td>
+    <td><a href="https://github.com/Shopify/buy-button-js/blob/main/src/templates/line-item.js">line-item.js</a></td>
     <td></td>
   </tr>
   </tbody>
@@ -637,7 +637,7 @@ <h2>toggle</h2>
     <td>templates</td>
     <td>object</td>
     <td>mustache templates used to display contents</td>
-    <td><a href="https://github.com/Shopify/buy-button-js/blob/master/src/templates/toggle.js">toggle.js</a></td>
+    <td><a href="https://github.com/Shopify/buy-button-js/blob/main/src/templates/toggle.js">toggle.js</a></td>
     <td></td>
   </tr>
   </tbody>

docs/configuration/index.html

@@ -68,7 +68,7 @@ var order = [
 
 **Type**: [Array](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array)
 
-**Default value**: dependent on component. [View default values for all components](https://github.com/Shopify/buy-button-js/blob/master/src/defaults/components.js)
+**Default value**: dependent on component. [View default values for all components](https://github.com/Shopify/buy-button-js/blob/main/src/defaults/components.js)
 
 ### `contents`
 
@@ -83,7 +83,7 @@ var contents = {
 ```
 
 **Type**: object
-**Default value**: dependent on component. [View component defaults](https://github.com/Shopify/buy-button-js/blob/master/src/defaults/components.js)
+**Default value**: dependent on component. [View component defaults](https://github.com/Shopify/buy-button-js/blob/main/src/defaults/components.js)
 
 ### `text`
 
@@ -99,7 +99,7 @@ var text = {
 
 **Type**: object
 
-**Default value**: dependent on component. [View component defaults](https://github.com/Shopify/buy-button-js/blob/master/src/defaults/components.js)
+**Default value**: dependent on component. [View component defaults](https://github.com/Shopify/buy-button-js/blob/main/src/defaults/components.js)
 
 ### `styles`
 
@@ -118,7 +118,7 @@ var styles = {
 
 **Type**: object
 
-**Default value**: dependent on component. [View component defaults](https://github.com/Shopify/buy-button-js/blob/master/src/defaults/components.js)
+**Default value**: dependent on component. [View component defaults](https://github.com/Shopify/buy-button-js/blob/main/src/defaults/components.js)
 
 ### `events`
 
@@ -419,7 +419,7 @@ Determines class names added to elements within components. It is unlikely you w
 
 **Type**: Object
 
-**Default values**: dependent on component. [View defaults](https://github.com/Shopify/buy-button-js/blob/master/src/defaults/components.js).
+**Default values**: dependent on component. [View defaults](https://github.com/Shopify/buy-button-js/blob/main/src/defaults/components.js).
 
 ### `templates`
 Determines the HTML for each element in a component. Templates are specified as strings using the [Mustache](https://github.com/janl/mustache.js/) templating engine, which implements the [Mustache](https://mustache.github.io/) syntax.

docs/customization/index.md

@@ -17,4 +17,4 @@
 - `npm run doc-serve`
 
 ## Deployment
-Changes to the `docs` directory will automatically be deployed to http://shopify.github.io/js-buy-sdk/ when added to `master` (remote).
+Changes to the `docs` directory will automatically be deployed to http://shopify.github.io/js-buy-sdk/ when added to `main` (remote).

docs/readme.md

@@ -95,9 +95,6 @@
     "testem": "2.17.0",
     "watch": "1.0.2",
     "watchify": "3.11.1",
-    "wdio-dot-reporter": "0.0.6",
-    "wdio-junit-reporter": "0.1.0",
-    "wdio-mocha-framework": "0.5.13",
     "webdriverio": "4.2.8",
     "whatwg-fetch": "3.0.0"
   },
@@ -106,11 +103,8 @@
     "browserify": "16.3.0",
     "morphdom": "2.6.1",
     "mustache": "3.0.1",
-    "sass": "1.54.3",
+    "sass": "1.69.0",
     "shopify-buy": "2.20.0",
     "uglify-js": "3.16.3"
-  },
-  "resolutions": {
-    "fibers": "5.0.0"
   }
 }

package.json

@@ -1,14 +1,16 @@
 # BuyButton.js
 
 [BuyButton.js on NPM](https://www.npmjs.com/package/@shopify/buy-button-js)
-[![Travis](https://travis-ci.com/Shopify/buy-button-js.svg?branch=master)](https://travis-ci.com/Shopify/buy-button-js)
 
 BuyButton.js is a highly customizable UI library for adding e-commerce functionality to any website. It allows you to create interactive UI components such as product listings and shopping carts with minimal configuration, while allowing you to easily customize the appearance and behaviour of the components.
 It uses the [JS Buy SDK](http://shopify.github.io/js-buy-sdk/) to connect to your Shopify store, giving you access to your products and collections.
 
 To get started, take a look at [the documentation](http://shopify.github.io/buy-button-js/).
 For questions, suggestions and feedback, please <a href="https://github.com/Shopify/buy-button-js/issues">create an issue</a>.
 
+> [!NOTE]
+> The Buy Button JS library will soon be updated to use v3 of the JS Buy SDK library
+
 ## Development
 
 ```
@@ -54,4 +56,4 @@ yarn run docs
 
 Doc server will run at <http://localhost:4000/buy-button-js/>
 Docs source files are located in /docs.
-Docs are automatically deployed to gh-pages from master.
+Docs are automatically deployed to gh-pages from main.

readme.md

@@ -6,7 +6,10 @@ import {addClassToElement, removeClassFromElement} from './utils/element-class';
 const iframeStyles = {
   width: '100%',
   overflow: 'hidden',
-  border: 'none',
+  // Firefox for some reason sets 'border: medium' even if we set it to 'border: none'
+  // when using JavaScript to set the style. The workaround is to set individual border styles
+  'border-width': '0',
+  'border-style': 'none',
 };
 
 const iframeAttrs = {
@@ -91,6 +94,7 @@ export default class iframe {
     Object.keys(iframeStyles).forEach((key) => {
       this.el.style[key] = iframeStyles[key];
     });
+
     Object.keys(iframeAttrs).forEach((key) => this.el.setAttribute(key, iframeAttrs[key]));
     this.el.setAttribute('name', config.name);
     this.styleTag = null;

src/iframe.js

@@ -117,11 +117,12 @@ describe('Iframe class', () => {
       assert.calledWith(setWidthStub, constructorConfig.width);
     });
 
-    it('sets width to 100%, overflow to hidden, and border to none in iframe\'s style', () => {
+    it('sets width to 100%, overflow to hidden, borderWidth to 0px and borderStyle to none in iframe\'s style', () => {
       iframe = new Iframe(parent, constructorConfig);
       assert.equal(iframe.el.style.width, '100%');
       assert.equal(iframe.el.style.overflow, 'hidden');
-      assert.include(iframe.el.style.border, 'none');
+      assert.include(iframe.el.style.borderStyle, 'none');
+      assert.include(iframe.el.style.borderWidth, '0px');
     });
 
     it('disables scrolling, allows transparency, and removes border in iframe\'s attributes', () => {
@@ -507,4 +508,4 @@ describe('Iframe class', () => {
       });
     });
   });
-});
+});