feat(circular-progress): add four color variant

packages/circular-progress-four-color/package.json

@@ -0,0 +1,28 @@
+{
+  "name": "@material/mwc-circular-progress-four-color",
+  "version": "0.17.2",
+  "description": "Material Design circular progress web component",
+  "keywords": [
+    "material design",
+    "web components",
+    "circular progress"
+  ],
+  "main": "mwc-circular-progress-four-color.js",
+  "module": "mwc-circular-progress-four-color.js",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/material-components/material-components-web-components.git",
+    "directory": "packages/circular-progress-four-color"
+  },
+  "license": "Apache-2.0",
+  "dependencies": {
+    "@material/circular-progress": "=8.0.0-canary.ac405eae1.0",
+    "@material/mwc-base": "^0.17.2",
+    "@material/theme": "=8.0.0-canary.ac405eae1.0",
+    "lit-element": "^2.3.0",
+    "tslib": "^1.10.0"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

packages/circular-progress-four-color/src/_circular-progress-four-color-theme.scss

@@ -0,0 +1,41 @@
+/**
+@license
+Copyright 2020 Google Inc. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+@use 'sass:map';
+@use '@material/circular-progress' as circularprogress;
+@use '@material/theme';
+
+$light-theme: (
+  bar: (
+    theme.prop-value(primary),
+    theme.prop-value(primary),
+    theme.prop-value(primary),
+    theme.prop-value(primary)
+  )
+);
+
+@mixin theme($theme: $light-theme) {
+  $bar-colors: map.get($theme, bar);
+
+  @if length($bar-colors) != 4 {
+    @error "`mwc-circular-progress-four-colors` accepts exactly 4 colors";
+  }
+
+  @for $i from 1 through 4 {
+    --mdc-circular-progress-bar-color-#{$i}: nth($bar-colors, $i - 1);
+  }
+}

packages/circular-progress-four-color/src/_circular-progress-four-color.scss

@@ -0,0 +1,35 @@
+/**
+@license
+Copyright 2020 Google Inc. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+@use '@material/circular-progress' as circularprogress;
+@use '@material/theme';
+@use '@material/theme/custom-properties';
+
+@mixin core-styles() {
+  @include circularprogress.core-styles();
+
+  $primary: custom-properties.create(--mdc-theme-primary, theme.prop-value(primary));
+  @include circularprogress.indeterminate-colors((
+    custom-properties.create(--mdc-circular-progress-bar-color-1, $primary),
+    custom-properties.create(--mdc-circular-progress-bar-color-2, $primary),
+    custom-properties.create(--mdc-circular-progress-bar-color-3, $primary),
+    custom-properties.create(--mdc-circular-progress-bar-color-4, $primary),
+  ));
+
+  :host {
+    display: inline-flex;
+  }
+}

packages/circular-progress-four-color/src/_index.scss

@@ -0,0 +1,18 @@
+/**
+@license
+Copyright 2020 Google Inc. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+@forward './circular-progress-four-color-theme';

packages/circular-progress-four-color/src/mwc-circular-progress-four-color-base.ts

@@ -0,0 +1,32 @@
+/**
+@license
+Copyright 2020 Google Inc. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import {CircularProgressBase} from '@material/mwc-circular-progress/mwc-circular-progress-base.js';
+import {html} from 'lit-element';
+
+/** @soyCompatible */
+export class CircularProgressFourColorBase extends CircularProgressBase {
+  protected renderIndeterminateContainer() {
+    return html`
+      <div class="mdc-circular-progress__indeterminate-container">
+             ${
+        this.renderIndeterminateSpinnerLayer('mdc-circular-progress__color-1')}
+     ${this.renderIndeterminateSpinnerLayer('mdc-circular-progress__color-2')}
+     ${this.renderIndeterminateSpinnerLayer('mdc-circular-progress__color-3')}
+     ${this.renderIndeterminateSpinnerLayer('mdc-circular-progress__color-4')}
+      </div>`;
+  }
+}

packages/circular-progress-four-color/src/mwc-circular-progress-four-color.scss

@@ -0,0 +1,19 @@
+/**
+@license
+Copyright 2018 Google Inc. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+@use './circular-progress-four-color';
+
+@include circular-progress-four-color.core-styles();

packages/circular-progress-four-color/src/mwc-circular-progress-four-color.ts

@@ -0,0 +1,32 @@
+/**
+@license
+Copyright 2018 Google Inc. All Rights Reserved.
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+import {customElement} from 'lit-element';
+
+import {CircularProgressFourColorBase} from './mwc-circular-progress-four-color-base.js';
+import {style} from './mwc-circular-progress-four-color-css.js';
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'mwc-circular-progress-four-color': CircularProgressFourColorBase;
+  }
+}
+
+/** @soyCompatible */
+@customElement('mwc-circular-progress-four-color')
+export class CircularProgressFourColor extends CircularProgressFourColorBase {
+  static styles = style;
+}

packages/circular-progress-four-color/src/test/mwc-circular-progress-four-color.test.ts

@@ -0,0 +1,75 @@
+/**
+ * @license
+ * Copyright 2020 Google Inc. All Rights Reserved.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+import {CircularProgressFourColor} from '@material/mwc-circular-progress-four-color';
+
+const INDETERMINATE_CLASS = 'mdc-circular-progress--indeterminate';
+
+suite('mwc-circular-progress-four-color', () => {
+  let element: CircularProgressFourColor;
+
+  setup(() => {
+    element = document.createElement('mwc-circular-progress-four-color');
+    document.body.appendChild(element);
+  });
+
+  teardown(() => {
+    document.body.removeChild(element);
+  });
+
+  test('initializes as an mwc-circular-progress-four-color', () => {
+    assert.instanceOf(element, CircularProgressFourColor);
+  });
+
+  test('sets `aria-label`', async () => {
+    element.ariaLabel = 'Unit Test Progress Bar';
+    await element.updateComplete;
+    const progressBar =
+        element.shadowRoot!.querySelector('.mdc-circular-progress');
+    assert.equal(
+        progressBar!.getAttribute('aria-label'), 'Unit Test Progress Bar');
+  });
+
+  test('open sets closed to false', async () => {
+    element.closed = true;
+    element.open();
+    assert.equal(element.closed, false);
+  });
+
+  test('close sets closed to true', async () => {
+    element.closed = false;
+    element.close();
+    assert.equal(element.closed, true);
+  });
+
+  test('`progress` sets inner progress', async () => {
+    element.progress = 0.5;
+    await element.updateComplete;
+    const progressBar =
+        element.shadowRoot!.querySelector('.mdc-circular-progress')!;
+    assert.equal(progressBar.getAttribute('aria-valuenow'), '0.5');
+  });
+
+  test('`indeterminate` sets correct inner class', async () => {
+    await element.updateComplete;
+    const progressBar =
+        element.shadowRoot!.querySelector('.mdc-circular-progress')!;
+    assert.isFalse(progressBar.classList.contains(INDETERMINATE_CLASS));
+    element.indeterminate = true;
+    await element.updateComplete;
+    assert.isTrue(progressBar.classList.contains(INDETERMINATE_CLASS));
+  });
+});