feat(action): added calcite-loader and associated styles (#357)

Esri · Oct 11, 2019 · 3b25f47 · 3b25f47
1 parent 304a275
commit 3b25f47
Show file tree

Hide file tree

Showing 3 changed files with 103 additions and 74 deletions.
diff --git a/src/components/calcite-action/calcite-action.scss b/src/components/calcite-action/calcite-action.scss
@@ -1,5 +1,6 @@
 :host {
   display: block;
+  background-color: var(--calcite-app-background-clear);
 }
 
 .button {
@@ -74,6 +75,16 @@
   background-color: var(--calcite-app-background-active);
 }
 
+:host([loading]) .button,
+:host([loading]) .button:hover {
+  background-color: var(--calcite-app-background);
+}
+
+:host([loading]) calcite-loader[inline] {
+  color: var(--calcite-app-foreground-subtle);
+  margin-right: 0;
+}
+
 :host([disabled]) .button,
 :host([disabled]) .button:hover {
   cursor: default;

diff --git a/src/components/calcite-action/calcite-action.tsx b/src/components/calcite-action/calcite-action.tsx
@@ -90,10 +90,12 @@ export class CalciteAction {
 
     const iconContainerNode = (
       <div key="icon-container" aria-hidden="true" class={CSS.iconContainer}>
-        <slot />
+        {!this.loading ? <slot /> : <calcite-loader is-active inline></calcite-loader>}
       </div>
     );
 
+    // const loaderNode = this.loading ? (<calcite-loader is-active inline></calcite-loader>) : null;
+
     const calculatedTextDisplay = textEnabled ? "visible" : textDisplay;
 
     const textContainerNode =

diff --git a/src/demos/calcite-action.html b/src/demos/calcite-action.html
@@ -25,85 +25,15 @@ <h1>calcite-action</h1>
         </p>
 
         <style>
-          .action-bar-container {
-            position: relative;
-            width: 100%;
-            height: 800px;
-          }
-
-          calcite-action-bar {
-            position: absolute;
-            top: 0;
-            left: 0;
-            height: 100%;
+          .example-container {
+            width: 18vw;
           }
         </style>
 
         <h2>LTR</h2>
 
-        <h3>With text</h3>
-
-        <calcite-action indicator active label="click-me" text="hello world" text-display="visible"
-          ><svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-            <path
-              d="M14 0H1a1.001 1.001 0 0 0-1 1v11a1.001 1.001 0 0 0 1 1h4.672L7.5 15.828 9.328 13H14a1.001 1.001 0 0 0 1-1V1a1.001 1.001 0 0 0-1-1zm0 12H8.784L7.5 13.986 6.216 12H1V1h13zm-2-4.872V5.872l-1.369-.53q-.056-.152-.126-.296l.601-1.308-.867-.86-1.343.592q-.146-.067-.299-.12L8.098 2H6.876l-.53 1.373q-.152.056-.296.126l-1.308-.601-.86.867.592 1.343q-.067.146-.12.299l-1.35.499v1.188l1.35.5q.053.152.12.298l-.593 1.343.86.867 1.31-.601q.143.07.295.126L6.876 11h1.222l.5-1.35q.152-.053.298-.12l1.343.593.867-.86-.601-1.309q.07-.144.126-.296zm-1.698 1.99l-.206.203-.98-.493a2.818 2.818 0 0 1-1.1.459l-.386 1.046h-.29l-.344-1.044a2.818 2.818 0 0 1-1.1-.453l-1.013.466-.204-.205.493-.981a2.819 2.819 0 0 1-.459-1.097L3.67 6.63v-.26l1.044-.388a2.819 2.819 0 0 1 .459-1.098l-.493-.981.204-.205 1.013.466a2.817 2.817 0 0 1 1.1-.453l.345-1.044h.289l.386 1.046a2.818 2.818 0 0 1 1.1.459l.98-.493.206.203-.466 1.014a2.819 2.819 0 0 1 .453 1.1l1.042.346v.316l-1.042.346a2.82 2.82 0 0 1-.453 1.1zM8 5h-.999l-1 1v.999l1 1H8l1-1V6zm0 2H7V6h1z"
-            />
-          </svg>
-        </calcite-action>
-
-        <calcite-action style="position: -webkit-sticky; position: sticky; top:0;" text="Sticky" text-display="visible">
-          <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-            <path
-              d="M14 0H1a1.001 1.001 0 0 0-1 1v11a1.001 1.001 0 0 0 1 1h4.672L7.5 15.828 9.328 13H14a1.001 1.001 0 0 0 1-1V1a1.001 1.001 0 0 0-1-1zm0 12H8.784L7.5 13.986 6.216 12H1V1h13zm-2-4.872V5.872l-1.369-.53q-.056-.152-.126-.296l.601-1.308-.867-.86-1.343.592q-.146-.067-.299-.12L8.098 2H6.876l-.53 1.373q-.152.056-.296.126l-1.308-.601-.86.867.592 1.343q-.067.146-.12.299l-1.35.499v1.188l1.35.5q.053.152.12.298l-.593 1.343.86.867 1.31-.601q.143.07.295.126L6.876 11h1.222l.5-1.35q.152-.053.298-.12l1.343.593.867-.86-.601-1.309q.07-.144.126-.296zm-1.698 1.99l-.206.203-.98-.493a2.818 2.818 0 0 1-1.1.459l-.386 1.046h-.29l-.344-1.044a2.818 2.818 0 0 1-1.1-.453l-1.013.466-.204-.205.493-.981a2.819 2.819 0 0 1-.459-1.097L3.67 6.63v-.26l1.044-.388a2.819 2.819 0 0 1 .459-1.098l-.493-.981.204-.205 1.013.466a2.817 2.817 0 0 1 1.1-.453l.345-1.044h.289l.386 1.046a2.818 2.818 0 0 1 1.1.459l.98-.493.206.203-.466 1.014a2.819 2.819 0 0 1 .453 1.1l1.042.346v.316l-1.042.346a2.82 2.82 0 0 1-.453 1.1zM8 5h-.999l-1 1v.999l1 1H8l1-1V6zm0 2H7V6h1z"
-            />
-          </svg>
-        </calcite-action>
-
-        <h3>Without text</h3>
-
-        <calcite-action indicator label="click-me2" text="hello world 2"
-          ><svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-            <path
-              d="M5.674 13.406a1.498 1.498 0 0 1-.394-.71C3.787 12.335 3 11.757 3 11.5V8.88A9.97 9.97 0 0 0 8 10a12.159 12.159 0 0 0 3.654-.522l1.813-1.813a1.496 1.496 0 0 1 .533-.34V4.499C13.997 3.118 11.312 2 8 2S2.003 3.118 2 4.498V11.5c0 1.11 1.74 2.05 4.144 2.377zM8 3c3.281 0 5 1.113 5 1.5C13 4.885 11.281 6 8 6S3 4.885 3 4.5C3 4.113 4.719 3 8 3zM3 5.88A9.97 9.97 0 0 0 8 7a9.97 9.97 0 0 0 5-1.12v2A9.97 9.97 0 0 1 8 9a9.97 9.97 0 0 1-5-1.12zm3.735 6.466l.738-.738 2.084 2.088 4.97-4.97.738.737-5.708 5.705z"
-            />
-          </svg>
-        </calcite-action>
-
-        <h3>Auto text</h3>
-
-        <calcite-action indicator label="click-me2" text="hello world 2" text-display="interactive"
-          ><svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-            <path
-              d="M5.674 13.406a1.498 1.498 0 0 1-.394-.71C3.787 12.335 3 11.757 3 11.5V8.88A9.97 9.97 0 0 0 8 10a12.159 12.159 0 0 0 3.654-.522l1.813-1.813a1.496 1.496 0 0 1 .533-.34V4.499C13.997 3.118 11.312 2 8 2S2.003 3.118 2 4.498V11.5c0 1.11 1.74 2.05 4.144 2.377zM8 3c3.281 0 5 1.113 5 1.5C13 4.885 11.281 6 8 6S3 4.885 3 4.5C3 4.113 4.719 3 8 3zM3 5.88A9.97 9.97 0 0 0 8 7a9.97 9.97 0 0 0 5-1.12v2A9.97 9.97 0 0 1 8 9a9.97 9.97 0 0 1-5-1.12zm3.735 6.466l.738-.738 2.084 2.088 4.97-4.97.738.737-5.708 5.705z"
-            />
-          </svg>
-        </calcite-action>
-
-        <h3>Disabled with text</h3>
-
-        <calcite-action disabled indicator active label="click-me" text="hello world" text-display="visible"
-          ><svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-            <path
-              d="M14 0H1a1.001 1.001 0 0 0-1 1v11a1.001 1.001 0 0 0 1 1h4.672L7.5 15.828 9.328 13H14a1.001 1.001 0 0 0 1-1V1a1.001 1.001 0 0 0-1-1zm0 12H8.784L7.5 13.986 6.216 12H1V1h13zm-2-4.872V5.872l-1.369-.53q-.056-.152-.126-.296l.601-1.308-.867-.86-1.343.592q-.146-.067-.299-.12L8.098 2H6.876l-.53 1.373q-.152.056-.296.126l-1.308-.601-.86.867.592 1.343q-.067.146-.12.299l-1.35.499v1.188l1.35.5q.053.152.12.298l-.593 1.343.86.867 1.31-.601q.143.07.295.126L6.876 11h1.222l.5-1.35q.152-.053.298-.12l1.343.593.867-.86-.601-1.309q.07-.144.126-.296zm-1.698 1.99l-.206.203-.98-.493a2.818 2.818 0 0 1-1.1.459l-.386 1.046h-.29l-.344-1.044a2.818 2.818 0 0 1-1.1-.453l-1.013.466-.204-.205.493-.981a2.819 2.819 0 0 1-.459-1.097L3.67 6.63v-.26l1.044-.388a2.819 2.819 0 0 1 .459-1.098l-.493-.981.204-.205 1.013.466a2.817 2.817 0 0 1 1.1-.453l.345-1.044h.289l.386 1.046a2.818 2.818 0 0 1 1.1.459l.98-.493.206.203-.466 1.014a2.819 2.819 0 0 1 .453 1.1l1.042.346v.316l-1.042.346a2.82 2.82 0 0 1-.453 1.1zM8 5h-.999l-1 1v.999l1 1H8l1-1V6zm0 2H7V6h1z"
-            />
-          </svg>
-        </calcite-action>
-
-        <h3>Disabled without text</h3>
-
-        <calcite-action disabled indicator label="click-me2" text="hello world 2"
-          ><svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
-            <path
-              d="M5.674 13.406a1.498 1.498 0 0 1-.394-.71C3.787 12.335 3 11.757 3 11.5V8.88A9.97 9.97 0 0 0 8 10a12.159 12.159 0 0 0 3.654-.522l1.813-1.813a1.496 1.496 0 0 1 .533-.34V4.499C13.997 3.118 11.312 2 8 2S2.003 3.118 2 4.498V11.5c0 1.11 1.74 2.05 4.144 2.377zM8 3c3.281 0 5 1.113 5 1.5C13 4.885 11.281 6 8 6S3 4.885 3 4.5C3 4.113 4.719 3 8 3zM3 5.88A9.97 9.97 0 0 0 8 7a9.97 9.97 0 0 0 5-1.12v2A9.97 9.97 0 0 1 8 9a9.97 9.97 0 0 1-5-1.12zm3.735 6.466l.738-.738 2.084 2.088 4.97-4.97.738.737-5.708 5.705z"
-            />
-          </svg>
-        </calcite-action>
-
-        <h2>RTL</h2>
-
-        <div dir="rtl">
+        <div class="example-container">
           <h3>With text</h3>
-
           <calcite-action indicator active label="click-me" text="hello world" text-display="visible"
             ><svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
               <path
@@ -112,6 +42,18 @@ <h3>With text</h3>
             </svg>
           </calcite-action>
 
+          <calcite-action
+            style="position: -webkit-sticky; position: sticky; top:0;"
+            text="Sticky"
+            text-display="visible"
+          >
+            <svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+              <path
+                d="M14 0H1a1.001 1.001 0 0 0-1 1v11a1.001 1.001 0 0 0 1 1h4.672L7.5 15.828 9.328 13H14a1.001 1.001 0 0 0 1-1V1a1.001 1.001 0 0 0-1-1zm0 12H8.784L7.5 13.986 6.216 12H1V1h13zm-2-4.872V5.872l-1.369-.53q-.056-.152-.126-.296l.601-1.308-.867-.86-1.343.592q-.146-.067-.299-.12L8.098 2H6.876l-.53 1.373q-.152.056-.296.126l-1.308-.601-.86.867.592 1.343q-.067.146-.12.299l-1.35.499v1.188l1.35.5q.053.152.12.298l-.593 1.343.86.867 1.31-.601q.143.07.295.126L6.876 11h1.222l.5-1.35q.152-.053.298-.12l1.343.593.867-.86-.601-1.309q.07-.144.126-.296zm-1.698 1.99l-.206.203-.98-.493a2.818 2.818 0 0 1-1.1.459l-.386 1.046h-.29l-.344-1.044a2.818 2.818 0 0 1-1.1-.453l-1.013.466-.204-.205.493-.981a2.819 2.819 0 0 1-.459-1.097L3.67 6.63v-.26l1.044-.388a2.819 2.819 0 0 1 .459-1.098l-.493-.981.204-.205 1.013.466a2.817 2.817 0 0 1 1.1-.453l.345-1.044h.289l.386 1.046a2.818 2.818 0 0 1 1.1.459l.98-.493.206.203-.466 1.014a2.819 2.819 0 0 1 .453 1.1l1.042.346v.316l-1.042.346a2.82 2.82 0 0 1-.453 1.1zM8 5h-.999l-1 1v.999l1 1H8l1-1V6zm0 2H7V6h1z"
+              />
+            </svg>
+          </calcite-action>
+
           <h3>Without text</h3>
 
           <calcite-action indicator label="click-me2" text="hello world 2"
@@ -131,6 +73,80 @@ <h3>Auto text</h3>
               />
             </svg>
           </calcite-action>
+
+          <h3>Disabled with text</h3>
+
+          <calcite-action disabled indicator active label="click-me" text="hello world" text-display="visible"
+            ><svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+              <path
+                d="M14 0H1a1.001 1.001 0 0 0-1 1v11a1.001 1.001 0 0 0 1 1h4.672L7.5 15.828 9.328 13H14a1.001 1.001 0 0 0 1-1V1a1.001 1.001 0 0 0-1-1zm0 12H8.784L7.5 13.986 6.216 12H1V1h13zm-2-4.872V5.872l-1.369-.53q-.056-.152-.126-.296l.601-1.308-.867-.86-1.343.592q-.146-.067-.299-.12L8.098 2H6.876l-.53 1.373q-.152.056-.296.126l-1.308-.601-.86.867.592 1.343q-.067.146-.12.299l-1.35.499v1.188l1.35.5q.053.152.12.298l-.593 1.343.86.867 1.31-.601q.143.07.295.126L6.876 11h1.222l.5-1.35q.152-.053.298-.12l1.343.593.867-.86-.601-1.309q.07-.144.126-.296zm-1.698 1.99l-.206.203-.98-.493a2.818 2.818 0 0 1-1.1.459l-.386 1.046h-.29l-.344-1.044a2.818 2.818 0 0 1-1.1-.453l-1.013.466-.204-.205.493-.981a2.819 2.819 0 0 1-.459-1.097L3.67 6.63v-.26l1.044-.388a2.819 2.819 0 0 1 .459-1.098l-.493-.981.204-.205 1.013.466a2.817 2.817 0 0 1 1.1-.453l.345-1.044h.289l.386 1.046a2.818 2.818 0 0 1 1.1.459l.98-.493.206.203-.466 1.014a2.819 2.819 0 0 1 .453 1.1l1.042.346v.316l-1.042.346a2.82 2.82 0 0 1-.453 1.1zM8 5h-.999l-1 1v.999l1 1H8l1-1V6zm0 2H7V6h1z"
+              />
+            </svg>
+          </calcite-action>
+
+          <h3>Disabled without text</h3>
+
+          <calcite-action disabled indicator label="click-me2" text="hello world 2"
+            ><svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+              <path
+                d="M5.674 13.406a1.498 1.498 0 0 1-.394-.71C3.787 12.335 3 11.757 3 11.5V8.88A9.97 9.97 0 0 0 8 10a12.159 12.159 0 0 0 3.654-.522l1.813-1.813a1.496 1.496 0 0 1 .533-.34V4.499C13.997 3.118 11.312 2 8 2S2.003 3.118 2 4.498V11.5c0 1.11 1.74 2.05 4.144 2.377zM8 3c3.281 0 5 1.113 5 1.5C13 4.885 11.281 6 8 6S3 4.885 3 4.5C3 4.113 4.719 3 8 3zM3 5.88A9.97 9.97 0 0 0 8 7a9.97 9.97 0 0 0 5-1.12v2A9.97 9.97 0 0 1 8 9a9.97 9.97 0 0 1-5-1.12zm3.735 6.466l.738-.738 2.084 2.088 4.97-4.97.738.737-5.708 5.705z"
+              />
+            </svg>
+          </calcite-action>
+
+          <h3>Loading with text</h3>
+
+          <calcite-action loading indicator label="click-me" text="hello world" text-display="visible"
+            ><svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+              <path
+                d="M14 0H1a1.001 1.001 0 0 0-1 1v11a1.001 1.001 0 0 0 1 1h4.672L7.5 15.828 9.328 13H14a1.001 1.001 0 0 0 1-1V1a1.001 1.001 0 0 0-1-1zm0 12H8.784L7.5 13.986 6.216 12H1V1h13zm-2-4.872V5.872l-1.369-.53q-.056-.152-.126-.296l.601-1.308-.867-.86-1.343.592q-.146-.067-.299-.12L8.098 2H6.876l-.53 1.373q-.152.056-.296.126l-1.308-.601-.86.867.592 1.343q-.067.146-.12.299l-1.35.499v1.188l1.35.5q.053.152.12.298l-.593 1.343.86.867 1.31-.601q.143.07.295.126L6.876 11h1.222l.5-1.35q.152-.053.298-.12l1.343.593.867-.86-.601-1.309q.07-.144.126-.296zm-1.698 1.99l-.206.203-.98-.493a2.818 2.818 0 0 1-1.1.459l-.386 1.046h-.29l-.344-1.044a2.818 2.818 0 0 1-1.1-.453l-1.013.466-.204-.205.493-.981a2.819 2.819 0 0 1-.459-1.097L3.67 6.63v-.26l1.044-.388a2.819 2.819 0 0 1 .459-1.098l-.493-.981.204-.205 1.013.466a2.817 2.817 0 0 1 1.1-.453l.345-1.044h.289l.386 1.046a2.818 2.818 0 0 1 1.1.459l.98-.493.206.203-.466 1.014a2.819 2.819 0 0 1 .453 1.1l1.042.346v.316l-1.042.346a2.82 2.82 0 0 1-.453 1.1zM8 5h-.999l-1 1v.999l1 1H8l1-1V6zm0 2H7V6h1z"
+              />
+            </svg>
+          </calcite-action>
+
+          <h3>Loading without text</h3>
+
+          <calcite-action loading indicator label="click-me2" text="hello world 2"
+            ><svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+              <path
+                d="M5.674 13.406a1.498 1.498 0 0 1-.394-.71C3.787 12.335 3 11.757 3 11.5V8.88A9.97 9.97 0 0 0 8 10a12.159 12.159 0 0 0 3.654-.522l1.813-1.813a1.496 1.496 0 0 1 .533-.34V4.499C13.997 3.118 11.312 2 8 2S2.003 3.118 2 4.498V11.5c0 1.11 1.74 2.05 4.144 2.377zM8 3c3.281 0 5 1.113 5 1.5C13 4.885 11.281 6 8 6S3 4.885 3 4.5C3 4.113 4.719 3 8 3zM3 5.88A9.97 9.97 0 0 0 8 7a9.97 9.97 0 0 0 5-1.12v2A9.97 9.97 0 0 1 8 9a9.97 9.97 0 0 1-5-1.12zm3.735 6.466l.738-.738 2.084 2.088 4.97-4.97.738.737-5.708 5.705z"
+              />
+            </svg>
+          </calcite-action>
+
+          <h2>RTL</h2>
+
+          <div dir="rtl">
+            <h3>With text</h3>
+
+            <calcite-action indicator active label="click-me" text="hello world" text-display="visible"
+              ><svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+                <path
+                  d="M14 0H1a1.001 1.001 0 0 0-1 1v11a1.001 1.001 0 0 0 1 1h4.672L7.5 15.828 9.328 13H14a1.001 1.001 0 0 0 1-1V1a1.001 1.001 0 0 0-1-1zm0 12H8.784L7.5 13.986 6.216 12H1V1h13zm-2-4.872V5.872l-1.369-.53q-.056-.152-.126-.296l.601-1.308-.867-.86-1.343.592q-.146-.067-.299-.12L8.098 2H6.876l-.53 1.373q-.152.056-.296.126l-1.308-.601-.86.867.592 1.343q-.067.146-.12.299l-1.35.499v1.188l1.35.5q.053.152.12.298l-.593 1.343.86.867 1.31-.601q.143.07.295.126L6.876 11h1.222l.5-1.35q.152-.053.298-.12l1.343.593.867-.86-.601-1.309q.07-.144.126-.296zm-1.698 1.99l-.206.203-.98-.493a2.818 2.818 0 0 1-1.1.459l-.386 1.046h-.29l-.344-1.044a2.818 2.818 0 0 1-1.1-.453l-1.013.466-.204-.205.493-.981a2.819 2.819 0 0 1-.459-1.097L3.67 6.63v-.26l1.044-.388a2.819 2.819 0 0 1 .459-1.098l-.493-.981.204-.205 1.013.466a2.817 2.817 0 0 1 1.1-.453l.345-1.044h.289l.386 1.046a2.818 2.818 0 0 1 1.1.459l.98-.493.206.203-.466 1.014a2.819 2.819 0 0 1 .453 1.1l1.042.346v.316l-1.042.346a2.82 2.82 0 0 1-.453 1.1zM8 5h-.999l-1 1v.999l1 1H8l1-1V6zm0 2H7V6h1z"
+                />
+              </svg>
+            </calcite-action>
+
+            <h3>Without text</h3>
+
+            <calcite-action indicator label="click-me2" text="hello world 2"
+              ><svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+                <path
+                  d="M5.674 13.406a1.498 1.498 0 0 1-.394-.71C3.787 12.335 3 11.757 3 11.5V8.88A9.97 9.97 0 0 0 8 10a12.159 12.159 0 0 0 3.654-.522l1.813-1.813a1.496 1.496 0 0 1 .533-.34V4.499C13.997 3.118 11.312 2 8 2S2.003 3.118 2 4.498V11.5c0 1.11 1.74 2.05 4.144 2.377zM8 3c3.281 0 5 1.113 5 1.5C13 4.885 11.281 6 8 6S3 4.885 3 4.5C3 4.113 4.719 3 8 3zM3 5.88A9.97 9.97 0 0 0 8 7a9.97 9.97 0 0 0 5-1.12v2A9.97 9.97 0 0 1 8 9a9.97 9.97 0 0 1-5-1.12zm3.735 6.466l.738-.738 2.084 2.088 4.97-4.97.738.737-5.708 5.705z"
+                />
+              </svg>
+            </calcite-action>
+
+            <h3>Auto text</h3>
+
+            <calcite-action indicator label="click-me2" text="hello world 2" text-display="interactive"
+              ><svg width="16" height="16" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16">
+                <path
+                  d="M5.674 13.406a1.498 1.498 0 0 1-.394-.71C3.787 12.335 3 11.757 3 11.5V8.88A9.97 9.97 0 0 0 8 10a12.159 12.159 0 0 0 3.654-.522l1.813-1.813a1.496 1.496 0 0 1 .533-.34V4.499C13.997 3.118 11.312 2 8 2S2.003 3.118 2 4.498V11.5c0 1.11 1.74 2.05 4.144 2.377zM8 3c3.281 0 5 1.113 5 1.5C13 4.885 11.281 6 8 6S3 4.885 3 4.5C3 4.113 4.719 3 8 3zM3 5.88A9.97 9.97 0 0 0 8 7a9.97 9.97 0 0 0 5-1.12v2A9.97 9.97 0 0 1 8 9a9.97 9.97 0 0 1-5-1.12zm3.735 6.466l.738-.738 2.084 2.088 4.97-4.97.738.737-5.708 5.705z"
+                />
+              </svg>
+            </calcite-action>
+          </div>
         </div>
       </section>
     </main>