Dang-1868/ loading indicator transparent bg (#389)

* make loading indicator bg transparent, add paper bg to stories to demo it

* package version & changelog

* change stories to have one with and one without background

* cleanup

CHANGELOG.md

@@ -1,5 +1,11 @@
 # CHANGELOG
 
+## v2.0.0-beta.27
+
+### Features
+
+changes the `LoadingIndicator` background color to transparent
+
 ## v2.0.0-beta.26
 
 ### Bug fixes

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@lob/ui-components",
-  "version": "2.0.0-beta.26",
+  "version": "2.0.0-beta.27",
   "engines": {
     "node": ">=14.18.2",
     "npm": ">=8.3.0"

src/components/LoadingIndicator/LoadingIndicator.stories.js

@@ -17,13 +17,26 @@ export default {
 
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components: {  LoadingIndicator },
+  components: { LoadingIndicator },
   setup: () => ({ args }),
-  template: '<loading-indicator></loading-indicator>'
+  template: '<loading-indicator/>'
 });
 
 export const Primary = Template.bind({});
 
+const TemplateWithBackground = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { LoadingIndicator },
+  setup: () => ({ args }),
+  template: `
+  <div style="margin:auto; background-color: #f7f5fa; padding: 2em;">
+    <loading-indicator/>
+  </div>
+  `
+});
+
+export const WithBackground = TemplateWithBackground.bind({});
+
 const dataPresent = false;
 
 const AfterContentLoadedTemplate = (args, { argTypes }) => ({

src/components/LoadingIndicator/LoadingIndicator.vue

@@ -30,7 +30,7 @@ export default {
 
 <style lang="scss" scoped>
 .loading-gif {
-  background: #fff url(https://s3.us-west-2.amazonaws.com/public.lob.com/sites/spinner-medium.svg) no-repeat center;
+  background: transparent url(https://s3.us-west-2.amazonaws.com/public.lob.com/sites/spinner-medium.svg) no-repeat center;
   background-size: 24px 24px;
   width: 100%;
   height: 50px;