#306 Add BME Spinner

docs/changelog.md

@@ -13,11 +13,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
   `six-header-dropdown-item`, `six-header-menu-button`, and `six-logo`.
 - Added `six-logo` component to display the SIX- or BME-logo anywhere, not just within the
   `six-header` component.
+- The `six-spinner` component now supports the BME logo as a spinner option.
 
 ### Deprecated
 
 - Most slots, properties and events on the `six-header` component are now deprecated and will be
   removed in one of the next releases.
+- The `six` prop on the `six-spinner` component is now deprecated. Use the `logo` prop instead,
+  which allows specifying either **six** or **bme** as its value.
 
 ### Removed
 

docs/components/six-spinner.md

@@ -44,9 +44,9 @@ Spinners are sized relative to the current font size. To change their size, set
 </div>
 
 <div class="spinner-demo">
-  <six-spinner six="true"></six-spinner>
-  <six-spinner id="medium" six="true"></six-spinner>
-  <six-spinner id="large" six="true"></six-spinner>
+  <six-spinner logo="six"></six-spinner>
+  <six-spinner id="medium" logo="six"></six-spinner>
+  <six-spinner id="large" logo="six"></six-spinner>
 </div>
 ```
 
@@ -80,7 +80,18 @@ Spinner can be configured as animated SIX logo.
 <docs-demo-six-spinner-4></docs-demo-six-spinner-4>
 
 ```html
-<six-spinner six="true"></six-spinner>
+<six-spinner logo="six"></six-spinner>
+```
+
+
+### BME Logo
+
+Spinner can be configured as animated BME logo.
+
+<docs-demo-six-spinner-5></docs-demo-six-spinner-5>
+
+```html
+<six-spinner logo="bme"></six-spinner>
 ```
 
 
@@ -90,17 +101,18 @@ Spinner can be configured as animated SIX logo.
 
 ## Properties
 
-| Property | Attribute | Description                                                               | Type      | Default |
-| -------- | --------- | ------------------------------------------------------------------------- | --------- | ------- |
-| `six`    | `six`     | Indicates if the spinner is shown as animated SIX logo or simple spinner. | `boolean` | `false` |
+| Property | Attribute | Description                                                                                   | Type                          | Default     |
+| -------- | --------- | --------------------------------------------------------------------------------------------- | ----------------------------- | ----------- |
+| `logo`   | `logo`    | Indicates if the spinner is shown as animated SIX or BME logo or a simple spinner.            | `"bme" \| "six" \| undefined` | `undefined` |
+| `six`    | `six`     | **@deprecated** Use `logo="six"` instead.  If set to true, the spinner displays the SIX logo. | `boolean \| undefined`        | `undefined` |
 
 
 ## Shadow Parts
 
 | Part     | Description                   |
 | -------- | ----------------------------- |
 | `"base"` | The component's base wrapper. |
-| `"svg"`  | The spinner icon              |
+| `"svg"`  | The spinner icon.             |
 
 
 ## CSS Custom Properties

docs/examples/docs-demo-six-spinner-1.vue

@@ -10,9 +10,9 @@
         </div>
 
         <div class="spinner-demo">
-          <six-spinner six="true"></six-spinner>
-          <six-spinner id="medium" six="true"></six-spinner>
-          <six-spinner id="large" six="true"></six-spinner>
+          <six-spinner logo="six"></six-spinner>
+          <six-spinner id="medium" logo="six"></six-spinner>
+          <six-spinner id="large" logo="six"></six-spinner>
         </div>
 
 </div>

docs/examples/docs-demo-six-spinner-4.vue

@@ -1,7 +1,7 @@
 <template>
 <div>
 
-        <six-spinner six="true"></six-spinner>
+        <six-spinner logo="six"></six-spinner>
 
 </div>
 </template>

docs/examples/docs-demo-six-spinner-5.vue

@@ -0,0 +1,16 @@
+<template>
+<div>
+
+        <six-spinner logo="bme"></six-spinner>
+
+</div>
+</template>
+<style>
+
+</style>
+<script>
+export default {
+  name: 'docs-demo-six-spinner-5',
+  mounted() {  }
+}
+</script>

libraries/ui-library-angular/src/lib/stencil-generated/components.ts

@@ -1376,14 +1376,14 @@ export declare interface SixSidebarItemGroup extends Components.SixSidebarItemGr
 
 
 @ProxyCmp({
-  inputs: ['six']
+  inputs: ['logo', 'six']
 })
 @Component({
   selector: 'six-spinner',
   changeDetection: ChangeDetectionStrategy.OnPush,
   template: '<ng-content></ng-content>',
   // eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
-  inputs: ['six'],
+  inputs: ['logo', 'six'],
 })
 export class SixSpinner {
   protected el: HTMLElement;

libraries/ui-library-vue/src/lib/stencil-generated/components.ts

@@ -528,6 +528,7 @@ export const SixSidebarItemGroup = /*@__PURE__*/ defineContainer<JSX.SixSidebarI
 
 
 export const SixSpinner = /*@__PURE__*/ defineContainer<JSX.SixSpinner>('six-spinner', undefined, [
+  'logo',
   'six'
 ]);
 

libraries/ui-library/src/components.d.ts

@@ -1628,9 +1628,13 @@ export namespace Components {
      */
     interface SixSpinner {
         /**
-          * Indicates if the spinner is shown as animated SIX logo or simple spinner.
+          * Indicates if the spinner is shown as animated SIX or BME logo or a simple spinner.
          */
-        "six": boolean;
+        "logo"?: 'six' | 'bme';
+        /**
+          * **@deprecated** Use `logo="six"` instead.  If set to true, the spinner displays the SIX logo.
+         */
+        "six"?: boolean;
     }
     interface SixStageIndicator {
         /**
@@ -4907,7 +4911,11 @@ declare namespace LocalJSX {
      */
     interface SixSpinner {
         /**
-          * Indicates if the spinner is shown as animated SIX logo or simple spinner.
+          * Indicates if the spinner is shown as animated SIX or BME logo or a simple spinner.
+         */
+        "logo"?: 'six' | 'bme';
+        /**
+          * **@deprecated** Use `logo="six"` instead.  If set to true, the spinner displays the SIX logo.
          */
         "six"?: boolean;
     }

libraries/ui-library/src/components/six-spinner/index.html

@@ -47,9 +47,9 @@ <h3>Size</h3>
         </div>
 
         <div class="spinner-demo">
-          <six-spinner six="true"></six-spinner>
-          <six-spinner id="medium" six="true"></six-spinner>
-          <six-spinner id="large" six="true"></six-spinner>
+          <six-spinner logo="six"></six-spinner>
+          <six-spinner id="medium" logo="six"></six-spinner>
+          <six-spinner id="large" logo="six"></six-spinner>
         </div>
       </section>
 
@@ -71,7 +71,13 @@ <h3>Color</h3>
       <h3>SIX Logo</h3>
       <p>Spinner can be configured as animated SIX logo.</p>
       <section>
-        <six-spinner six="true"></six-spinner>
+        <six-spinner logo="six"></six-spinner>
+      </section>
+
+      <h3>BME Logo</h3>
+      <p>Spinner can be configured as animated BME logo.</p>
+      <section>
+        <six-spinner logo="bme"></six-spinner>
       </section>
     </div>
   </body>

libraries/ui-library/src/components/six-spinner/readme.md

@@ -7,17 +7,18 @@
 
 ## Properties
 
-| Property | Attribute | Description                                                               | Type      | Default |
-| -------- | --------- | ------------------------------------------------------------------------- | --------- | ------- |
-| `six`    | `six`     | Indicates if the spinner is shown as animated SIX logo or simple spinner. | `boolean` | `false` |
+| Property | Attribute | Description                                                                                   | Type                          | Default     |
+| -------- | --------- | --------------------------------------------------------------------------------------------- | ----------------------------- | ----------- |
+| `logo`   | `logo`    | Indicates if the spinner is shown as animated SIX or BME logo or a simple spinner.            | `"bme" \| "six" \| undefined` | `undefined` |
+| `six`    | `six`     | **@deprecated** Use `logo="six"` instead.  If set to true, the spinner displays the SIX logo. | `boolean \| undefined`        | `undefined` |
 
 
 ## Shadow Parts
 
 | Part     | Description                   |
 | -------- | ----------------------------- |
 | `"base"` | The component's base wrapper. |
-| `"svg"`  | The spinner icon              |
+| `"svg"`  | The spinner icon.             |
 
 
 ## CSS Custom Properties

libraries/ui-library/src/components/six-spinner/six-spinner.scss

@@ -71,6 +71,61 @@ $color-six-spinner-background: rgba(255, 255, 255, 0.7);
     animation: six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite;
   }
 
+  polygon {
+    stroke-dasharray: 310;
+    stroke-dashoffset: 310;
+    animation: big-polygon-draw 2s ease-in-out infinite;
+    -webkit-animation: big-polygon-draw 2s ease-in-out infinite;
+  }
+
+  polygon:nth-child(2),
+  polygon:nth-child(3) {
+    stroke-dasharray: 110;
+    stroke-dashoffset: 110;
+    animation: small-polygon-draw 2s ease-in-out infinite;
+    -webkit-animation: small-polygon-draw 2s ease-in-out infinite;
+  }
+
+  @keyframes big-polygon-draw {
+    0%,
+    100% {
+      stroke-dashoffset: 310;
+    }
+    50% {
+      stroke-dashoffset: 140;
+    }
+  }
+
+  @-webkit-keyframes big-polygon-draw {
+    0%,
+    100% {
+      stroke-dashoffset: 310;
+    }
+    50% {
+      stroke-dashoffset: 140;
+    }
+  }
+
+  @keyframes small-polygon-draw {
+    0%,
+    100% {
+      stroke-dashoffset: 110;
+    }
+    50% {
+      stroke-dashoffset: 50;
+    }
+  }
+
+  @-webkit-keyframes small-polygon-draw {
+    0%,
+    100% {
+      stroke-dashoffset: 110;
+    }
+    50% {
+      stroke-dashoffset: 50;
+    }
+  }
+
   @-webkit-keyframes six-spinner {
     to {
       stroke-dashoffset: -444;