Skip to content

Commit 53504c0

Browse files
stefan-lauxstefan-laux
stefan-laux
and
stefan-laux
authored
#306 Add BME Spinner (#316)
* add bme spinner and changes to doc * added changelog upcoming changes --------- Co-authored-by: stefan-laux <[email protected]>
1 parent 1f83b3f commit 53504c0

File tree

12 files changed

+209
-42
lines changed

12 files changed

+209
-42
lines changed

‎docs/changelog.md

+3
Original file line numberDiff line numberDiff line change
@@ -21,11 +21,14 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
2121
`six-header-dropdown-item`, `six-header-menu-button`, and `six-logo`.
2222
- Added `six-logo` component to display the SIX- or BME-logo anywhere, not just within the
2323
`six-header` component.
24+
- The `six-spinner` component now supports the BME logo as a spinner option.
2425

2526
### Deprecated
2627

2728
- Most slots, properties and events on the `six-header` component are now deprecated and will be
2829
removed in one of the next releases.
30+
- The `six` prop on the `six-spinner` component is now deprecated. Use the `logo` prop instead,
31+
which allows specifying either **six** or **bme** as its value.
2932

3033
### Removed
3134

‎docs/components/six-spinner.md

+20-8
Original file line numberDiff line numberDiff line change
@@ -44,9 +44,9 @@ Spinners are sized relative to the current font size. To change their size, set
4444
</div>
4545

4646
<div class="spinner-demo">
47-
<six-spinner six="true"></six-spinner>
48-
<six-spinner id="medium" six="true"></six-spinner>
49-
<six-spinner id="large" six="true"></six-spinner>
47+
<six-spinner logo="six"></six-spinner>
48+
<six-spinner id="medium" logo="six"></six-spinner>
49+
<six-spinner id="large" logo="six"></six-spinner>
5050
</div>
5151
```
5252

@@ -80,7 +80,18 @@ Spinner can be configured as animated SIX logo.
8080
<docs-demo-six-spinner-4></docs-demo-six-spinner-4>
8181

8282
```html
83-
<six-spinner six="true"></six-spinner>
83+
<six-spinner logo="six"></six-spinner>
84+
```
85+
86+
87+
### BME Logo
88+
89+
Spinner can be configured as animated BME logo.
90+
91+
<docs-demo-six-spinner-5></docs-demo-six-spinner-5>
92+
93+
```html
94+
<six-spinner logo="bme"></six-spinner>
8495
```
8596

8697

@@ -90,17 +101,18 @@ Spinner can be configured as animated SIX logo.
90101

91102
## Properties
92103

93-
| Property | Attribute | Description | Type | Default |
94-
| -------- | --------- | ------------------------------------------------------------------------- | --------- | ------- |
95-
| `six` | `six` | Indicates if the spinner is shown as animated SIX logo or simple spinner. | `boolean` | `false` |
104+
| Property | Attribute | Description | Type | Default |
105+
| -------- | --------- | --------------------------------------------------------------------------------------------- | ----------------------------- | ----------- |
106+
| `logo` | `logo` | Indicates if the spinner is shown as animated SIX or BME logo or a simple spinner. | `"bme" \| "six" \| undefined` | `undefined` |
107+
| `six` | `six` | **@deprecated** Use `logo="six"` instead. If set to true, the spinner displays the SIX logo. | `boolean \| undefined` | `undefined` |
96108

97109

98110
## Shadow Parts
99111

100112
| Part | Description |
101113
| -------- | ----------------------------- |
102114
| `"base"` | The component's base wrapper. |
103-
| `"svg"` | The spinner icon |
115+
| `"svg"` | The spinner icon. |
104116

105117

106118
## CSS Custom Properties

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

+3-3
Original file line numberDiff line numberDiff line change
@@ -10,9 +10,9 @@
1010
</div>
1111

1212
<div class="spinner-demo">
13-
<six-spinner six="true"></six-spinner>
14-
<six-spinner id="medium" six="true"></six-spinner>
15-
<six-spinner id="large" six="true"></six-spinner>
13+
<six-spinner logo="six"></six-spinner>
14+
<six-spinner id="medium" logo="six"></six-spinner>
15+
<six-spinner id="large" logo="six"></six-spinner>
1616
</div>
1717

1818
</div>

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

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,7 @@
11
<template>
22
<div>
33

4-
<six-spinner six="true"></six-spinner>
4+
<six-spinner logo="six"></six-spinner>
55

66
</div>
77
</template>

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

+16
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,16 @@
1+
<template>
2+
<div>
3+
4+
<six-spinner logo="bme"></six-spinner>
5+
6+
</div>
7+
</template>
8+
<style>
9+
10+
</style>
11+
<script>
12+
export default {
13+
name: 'docs-demo-six-spinner-5',
14+
mounted() { }
15+
}
16+
</script>

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

+2-2
Original file line numberDiff line numberDiff line change
@@ -1376,14 +1376,14 @@ export declare interface SixSidebarItemGroup extends Components.SixSidebarItemGr
13761376

13771377

13781378
@ProxyCmp({
1379-
inputs: ['six']
1379+
inputs: ['logo', 'six']
13801380
})
13811381
@Component({
13821382
selector: 'six-spinner',
13831383
changeDetection: ChangeDetectionStrategy.OnPush,
13841384
template: '<ng-content></ng-content>',
13851385
// eslint-disable-next-line @angular-eslint/no-inputs-metadata-property
1386-
inputs: ['six'],
1386+
inputs: ['logo', 'six'],
13871387
})
13881388
export class SixSpinner {
13891389
protected el: HTMLElement;

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

+1
Original file line numberDiff line numberDiff line change
@@ -528,6 +528,7 @@ export const SixSidebarItemGroup = /*@__PURE__*/ defineContainer<JSX.SixSidebarI
528528

529529

530530
export const SixSpinner = /*@__PURE__*/ defineContainer<JSX.SixSpinner>('six-spinner', undefined, [
531+
'logo',
531532
'six'
532533
]);
533534

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

+11-3
Original file line numberDiff line numberDiff line change
@@ -1628,9 +1628,13 @@ export namespace Components {
16281628
*/
16291629
interface SixSpinner {
16301630
/**
1631-
* Indicates if the spinner is shown as animated SIX logo or simple spinner.
1631+
* Indicates if the spinner is shown as animated SIX or BME logo or a simple spinner.
16321632
*/
1633-
"six": boolean;
1633+
"logo"?: 'six' | 'bme';
1634+
/**
1635+
* **@deprecated** Use `logo="six"` instead. If set to true, the spinner displays the SIX logo.
1636+
*/
1637+
"six"?: boolean;
16341638
}
16351639
interface SixStageIndicator {
16361640
/**
@@ -4907,7 +4911,11 @@ declare namespace LocalJSX {
49074911
*/
49084912
interface SixSpinner {
49094913
/**
4910-
* Indicates if the spinner is shown as animated SIX logo or simple spinner.
4914+
* Indicates if the spinner is shown as animated SIX or BME logo or a simple spinner.
4915+
*/
4916+
"logo"?: 'six' | 'bme';
4917+
/**
4918+
* **@deprecated** Use `logo="six"` instead. If set to true, the spinner displays the SIX logo.
49114919
*/
49124920
"six"?: boolean;
49134921
}

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

+10-4
Original file line numberDiff line numberDiff line change
@@ -47,9 +47,9 @@ <h3>Size</h3>
4747
</div>
4848

4949
<div class="spinner-demo">
50-
<six-spinner six="true"></six-spinner>
51-
<six-spinner id="medium" six="true"></six-spinner>
52-
<six-spinner id="large" six="true"></six-spinner>
50+
<six-spinner logo="six"></six-spinner>
51+
<six-spinner id="medium" logo="six"></six-spinner>
52+
<six-spinner id="large" logo="six"></six-spinner>
5353
</div>
5454
</section>
5555

@@ -71,7 +71,13 @@ <h3>Color</h3>
7171
<h3>SIX Logo</h3>
7272
<p>Spinner can be configured as animated SIX logo.</p>
7373
<section>
74-
<six-spinner six="true"></six-spinner>
74+
<six-spinner logo="six"></six-spinner>
75+
</section>
76+
77+
<h3>BME Logo</h3>
78+
<p>Spinner can be configured as animated BME logo.</p>
79+
<section>
80+
<six-spinner logo="bme"></six-spinner>
7581
</section>
7682
</div>
7783
</body>

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

+5-4
Original file line numberDiff line numberDiff line change
@@ -7,17 +7,18 @@
77

88
## Properties
99

10-
| Property | Attribute | Description | Type | Default |
11-
| -------- | --------- | ------------------------------------------------------------------------- | --------- | ------- |
12-
| `six` | `six` | Indicates if the spinner is shown as animated SIX logo or simple spinner. | `boolean` | `false` |
10+
| Property | Attribute | Description | Type | Default |
11+
| -------- | --------- | --------------------------------------------------------------------------------------------- | ----------------------------- | ----------- |
12+
| `logo` | `logo` | Indicates if the spinner is shown as animated SIX or BME logo or a simple spinner. | `"bme" \| "six" \| undefined` | `undefined` |
13+
| `six` | `six` | **@deprecated** Use `logo="six"` instead. If set to true, the spinner displays the SIX logo. | `boolean \| undefined` | `undefined` |
1314

1415

1516
## Shadow Parts
1617

1718
| Part | Description |
1819
| -------- | ----------------------------- |
1920
| `"base"` | The component's base wrapper. |
20-
| `"svg"` | The spinner icon |
21+
| `"svg"` | The spinner icon. |
2122

2223

2324
## CSS Custom Properties

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

+55
Original file line numberDiff line numberDiff line change
@@ -71,6 +71,61 @@ $color-six-spinner-background: rgba(255, 255, 255, 0.7);
7171
animation: six-spinner 2s cubic-bezier(0.56, 0.39, 0.51, 0.96) infinite;
7272
}
7373

74+
polygon {
75+
stroke-dasharray: 310;
76+
stroke-dashoffset: 310;
77+
animation: big-polygon-draw 2s ease-in-out infinite;
78+
-webkit-animation: big-polygon-draw 2s ease-in-out infinite;
79+
}
80+
81+
polygon:nth-child(2),
82+
polygon:nth-child(3) {
83+
stroke-dasharray: 110;
84+
stroke-dashoffset: 110;
85+
animation: small-polygon-draw 2s ease-in-out infinite;
86+
-webkit-animation: small-polygon-draw 2s ease-in-out infinite;
87+
}
88+
89+
@keyframes big-polygon-draw {
90+
0%,
91+
100% {
92+
stroke-dashoffset: 310;
93+
}
94+
50% {
95+
stroke-dashoffset: 140;
96+
}
97+
}
98+
99+
@-webkit-keyframes big-polygon-draw {
100+
0%,
101+
100% {
102+
stroke-dashoffset: 310;
103+
}
104+
50% {
105+
stroke-dashoffset: 140;
106+
}
107+
}
108+
109+
@keyframes small-polygon-draw {
110+
0%,
111+
100% {
112+
stroke-dashoffset: 110;
113+
}
114+
50% {
115+
stroke-dashoffset: 50;
116+
}
117+
}
118+
119+
@-webkit-keyframes small-polygon-draw {
120+
0%,
121+
100% {
122+
stroke-dashoffset: 110;
123+
}
124+
50% {
125+
stroke-dashoffset: 50;
126+
}
127+
}
128+
74129
@-webkit-keyframes six-spinner {
75130
to {
76131
stroke-dashoffset: -444;

0 commit comments

Comments
 (0)