@dialpad/dialtone 6.20.3 → 6.23.0

package/CHANGELOG.md

@@ -1,3 +1,37 @@
+# [6.23.0](https://github.com/dialpad/dialtone/compare/v6.22.0...v6.23.0) (2022-04-18)
+
+
+### Bug Fixes
+
+* internal links when using <base> tag ([24b65fa](https://github.com/dialpad/dialtone/commit/24b65fa69a29c6cd7bb5264f70a78c3e508fa81d))
+
+
+### Features
+
+* add facebook, sentiment, reply icons ([#568](https://github.com/dialpad/dialtone/issues/568)) ([ff185d5](https://github.com/dialpad/dialtone/commit/ff185d51322adc630bbe8ffaeaead9275ce6b0c4))
+* add icons for new call workflow (Phase 2) ([#569](https://github.com/dialpad/dialtone/issues/569)) ([599852b](https://github.com/dialpad/dialtone/commit/599852b8b436a935df0cf7db2d8bb03c0723021c))
+
+# [6.22.0](https://github.com/dialpad/dialtone/compare/v6.21.0...v6.22.0) (2022-04-08)
+
+
+### Bug Fixes
+
+* badge alignment (min-width and vertical alignment) ([#566](https://github.com/dialpad/dialtone/issues/566)) ([946186c](https://github.com/dialpad/dialtone/commit/946186cc7e6a38c5d5e8986acd284cffe9b100ce))
+* typo in spacing ([#565](https://github.com/dialpad/dialtone/issues/565)) ([729be23](https://github.com/dialpad/dialtone/commit/729be23e5d5c197e3c868b2ae5e65aecb25442b6))
+
+
+### Features
+
+* **button:** add active styles ([#564](https://github.com/dialpad/dialtone/issues/564)) ([1d4a962](https://github.com/dialpad/dialtone/commit/1d4a962833e2031daf9f9fa1a23092b244fbc34e))
+* **button:** add d-btn--active class ([#567](https://github.com/dialpad/dialtone/issues/567)) ([2a89e25](https://github.com/dialpad/dialtone/commit/2a89e253ddd7f7c15d6de7af0ef13c293dba0a86))
+
+# [6.21.0](https://github.com/dialpad/dialtone/compare/v6.20.3...v6.21.0) (2022-04-04)
+
+
+### Features
+
+* **input:** support different icon sizes ([#563](https://github.com/dialpad/dialtone/issues/563)) ([0ad3c02](https://github.com/dialpad/dialtone/commit/0ad3c02db72d586bc39883aa6476bd8676e5c893))
+
 ## [6.20.3](https://github.com/dialpad/dialtone/compare/v6.20.2...v6.20.3) (2022-03-31)
 
 

package/lib/build/less/components/badge.less

@@ -19,11 +19,13 @@
   --badge--bgc: var(--black-050);
 
   display: inline-block;
-  padding: var(--su2) var(--su6) var(--su1);
+  min-width: calc(var(--su6) + var(--su1));
+  padding: calc(var(--su6) / 4) var(--su6);
   color: var(--badge--fc);
   font-weight: bold;
   font-size: var(--fs10);
   line-height: var(--lh6);
+  text-align: center;
   text-transform: uppercase;
   background-color: var(--badge--bgc);
   border-radius: var(--su4);

package/lib/build/less/components/button.less

@@ -51,13 +51,19 @@
 
     //  --  STATES
     //  ------------------------------------------------------------------------
+    &:hover {
+        --button--fc: var(--primary-color-hover);
+        --button--bgc: hsla(var(--primary-color-hsl) ~' / ' 3%);
+    }
 
     &:active,
-    &:hover {
+    &.d-btn--active,
+    &.d-btn--active:active {
         --button--fc: var(--primary-color-hover);
-        --button--bgc: hsla(var(--primary-color-hsl) ~' / ' 10%);
+        --button--bgc: hsla(var(--primary-color-hsl) ~' / ' 9%);
     }
 
+
     &:focus-visible {
       outline: none;
       box-shadow: var(--bs-focus-ring);
@@ -213,11 +219,6 @@
     padding: calc(var(--su8) + var(--su1));
     transition-duration: 150ms;
 
-    &:hover {
-        --button--fc: var(--black-800);
-        --button--bgc: var(--black-100);
-    }
-
     &:focus-visible {
         box-shadow: var(--bs-focus-ring-circle);
     }
@@ -234,11 +235,6 @@
         --button--bc: var(--black-700);
     }
 
-    // &:active {
-    //     border-color: hsla(var(--black-700-h) var(--black-700-s) var(--black-700-l) ~" / " 50%);
-    //     background-color: hsla(var(--black-700-h) var(--black-700-s) var(--black-700-l) ~" / " 10%);
-    // }
-
     //  Adjust padding based on sizes
     &.d-btn--xs {
         padding: calc(var(--su8) - var(--su1));
@@ -278,8 +274,15 @@
     --button--bgc: var(--primary-color);
 
     &:hover {
-        --button--fc: var(--white);
-        --button--bgc: var(--primary-color-hover);
+      --button--fc: var(--white);
+      --button--bgc: hsl(var(--primary-color-h), var(--primary-color-s), 65%);
+    }
+
+    &:active,
+    &.d-btn--active,
+    &.d-btn--active:active {
+      --button--fc: var(--white);
+      --button--bgc: hsl(var(--primary-color-h), var(--primary-color-s), 42%);
     }
 }
 
@@ -288,9 +291,14 @@
 .d-btn--muted {
     --button--fc: var(--muted-color);
 
-    &:hover {
+    &:hover,
+    &:active {
       --button--fc: var(--muted-color-hover);
-      --button--bgc: hsla(var(--muted-color-hsl) ~' / ' 7.5%);
+      --button--bgc: hsla(var(--black-800-hsl) ~' / ' 3%);
+    }
+
+    &:active {
+      --button--bgc: hsla(var(--black-800-hsl) ~' / ' 9%);
     }
 
     &:focus-visible {
@@ -308,8 +316,15 @@
     --button--fc: var(--error-color);
 
     &:hover {
-        --button--bgc: hsla(var(--error-color-hsl) ~' / ' 10%);
         --button--fc: var(--error-color-hover);
+        --button--bgc: hsla(var(--error-color-hsl) ~' / ' 6%);
+    }
+
+    &:active,
+    &.d-btn--active,
+    &.d-btn--active:active {
+        --button--fc: var(--error-color-hover);
+        --button--bgc: hsla(var(--error-color-hsl) ~' / ' 20%);
     }
 
     &:focus-visible {
@@ -325,8 +340,14 @@
         --button--bgc: var(--error-color);
 
         &:hover {
+            --button--bgc: hsl(var(--red-500-h), var(--red-500-s), 40%);
+        }
+
+        &:active,
+        &.d-btn--active,
+        &.d-btn--active:active {
             --button--fc: var(--white);
-            --button--bgc: var(--error-color-hover);
+            --button--bgc: hsl(var(--red-500-h), var(--red-500-s), 27%);
         }
     }
 }
@@ -343,6 +364,13 @@
         --button--bgc: hsla(var(--white-hsl) ~' / ' 15%);
     }
 
+    &:active,
+    &.d-btn--active,
+    &.d-btn--active:active {
+        --button--fc: var(--white);
+        --button--bgc: hsla(var(--white-hsl) ~' / ' 30%);
+    }
+
     &:focus-visible {
         box-shadow: var(--bs-focus-ring-inverted);
     }
@@ -355,11 +383,18 @@
     //  --  PRIMARY
     &.d-btn--primary {
         --button--fc: var(--primary-color);
-        --button--bgc: var(--white);
+        --button--bgc: hsl(var(--purple-100-h), var(--purple-100-s), 100%);
 
         &:hover {
             --button--fc: var(--primary-color-hover);
-            --button--bgc: hsla(var(--white-hsl) ~' / ' 90%);
+            --button--bgc: hsl(var(--purple-100-h), var(--purple-100-s), 94%);
+        }
+
+        &:active,
+        &.d-btn--active,
+        &.d-btn--active:active {
+            --button--fc: var(--primary-color-hover);
+            --button--bgc: hsl(var(--purple-100-h), var(--purple-100-s), 91%);
         }
     }
 }

package/lib/build/less/components/input.less

@@ -112,7 +112,7 @@
 
 //  $$  SIZES
 //  ----------------------------------------------------------------------------
-.d-input--xs {
+.d-input.d-input--xs {
     .input-button-xs();
 
     &.d-input-icon--right {
@@ -124,7 +124,7 @@
     }
 }
 
-.d-input--sm {
+.d-input.d-input--sm {
     .input-button-sm();
 
     &.d-input-icon--right {
@@ -136,7 +136,7 @@
     }
 }
 
-.d-input--lg {
+.d-input.d-input--lg {
     .input-button-lg();
 
     &.d-input-icon--right {
@@ -148,7 +148,7 @@
     }
 }
 
-.d-input--xl {
+.d-input.d-input--xl {
     .input-button-xl();
 
     &.d-input-icon--right {
@@ -268,14 +268,11 @@
     --input-icon-size: @icon16;
 
     position: absolute;
-    top: 0;
     z-index: var(--zi-base1);
     display: inline-flex;
     align-items: center;
-    width: var(--input-icon-size);
-    height: var(--input-icon-size);
+    height: 3.6rem;
     margin: 0;
-    margin-top: 1rem;
     line-height: 0;
 
     svg {
@@ -285,39 +282,34 @@
 
     &.d-input-icon--left {
         left: var(--su8);
+        // Update padding for d-input if d-input-icon--left is present
+        & ~ .d-input,
+        & ~ .d-textarea {
+            padding-left: @inputs-icon-spacing;
+        }
     }
 
     &.d-input-icon--right {
         right: var(--su8);
-    }
-}
 
-// For backwards compatibility purposes only.
-// be used instead of this.
-.d-input-icon--left {
-    // Update padding for d-input if d-input-icon--right is present
-    & ~ .d-input,
-    & ~ .d-textarea {
-        padding-left: @inputs-icon-spacing;
+        // Update padding for d-input if d-input-icon--right is present
+        & ~ .d-input {
+            padding-right: @inputs-icon-spacing;
+        }
     }
 }
 
-// For backwards compatibility purposes only.
-// be used instead of this.
-.d-input-icon--right {
-    // Update padding for d-input if d-input-icon--right is present
-    & ~ .d-input {
-        padding-right: @inputs-icon-spacing;
-    }
-}
+
 
 //  $$ SIZES
 //  ----------------------------------------------------------------------------
+.d-input-icon.d-input--xs {
+    height: 2.8rem;
+}
+
 .d-input-icon--xs {
     --input-icon-size: @icon12;
 
-    margin-top: 0.8rem;
-
     // For backwards compatibility purposes only.
     // Update padding for d-input, d-textarea if d-input-icon--left is present
     &.d-input-icon--left ~ .d-input,
@@ -332,11 +324,13 @@
     }
 }
 
+.d-input-icon.d-input--sm {
+    height: 3.2rem;
+}
+
 .d-input-icon--sm {
     --input-icon-size: @icon14;
 
-    margin-top: 0.9rem;
-
     // For backwards compatibility purposes only.
     // Update padding for d-input, d-textarea if d-input-icon--left is present
     &.d-input-icon--left ~ .d-input,
@@ -351,11 +345,13 @@
     }
 }
 
+.d-input-icon.d-input--lg {
+    height: 4.8rem;
+}
+
 .d-input-icon--lg {
     --input-icon-size: @icon20;
 
-    margin-top: 1.4rem;
-
     // For backwards compatibility purposes only.
     // Update padding for d-input, d-textarea if d-input-icon--left is present
     &.d-input-icon--left ~ .d-input,
@@ -370,11 +366,13 @@
     }
 }
 
+.d-input-icon.d-input--xl {
+    height: 5.6rem;
+}
+
 .d-input-icon--xl {
     --input-icon-size: @icon24;
 
-    margin-top: 1.6rem;
-
     // For backwards compatibility purposes only.
     // Update padding for d-input, d-textarea if d-input-icon--left is present
     &.d-input-icon--left ~ .d-input,

package/lib/build/svg/brand/facebook.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M20.9776 11.9888C20.9776 7.02441 16.9531 3 11.9888 3C7.02441 3 3 7.02441 3 11.9888C3 16.4753 6.28706 20.194 10.5843 20.8684V14.5871H8.30198V11.9888H10.5843V10.0084C10.5843 7.75562 11.9262 6.51125 13.9795 6.51125C14.9629 6.51125 15.9916 6.6868 15.9916 6.6868V8.89889H14.8581C13.7415 8.89889 13.3933 9.59178 13.3933 10.3026V11.9888H15.8863L15.4877 14.5871H13.3933V20.8684C17.6905 20.194 20.9776 16.4753 20.9776 11.9888" fill="#1877F2"/><path d="M15.4877 14.5871L15.8862 11.9888H13.3932V10.3026C13.3932 9.59177 13.7415 8.89887 14.8581 8.89887H15.9916V6.68679C15.9916 6.68679 14.9629 6.51123 13.9794 6.51123C11.9262 6.51123 10.5843 7.75561 10.5843 10.0084V11.9888H8.30197V14.5871H10.5843V20.8683C11.0489 20.9412 11.5185 20.9777 11.9888 20.9775C12.4666 20.9775 12.9356 20.9401 13.3932 20.8683V14.5871H15.4877Z" fill="#fff"/></svg>

package/lib/build/svg/system/back-to-listen.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M13 20C13.29 20 13.56 19.94 13.76 19.85C14.47 19.48 14.97 18.97 15.47 17.47C15.98 15.91 16.94 15.18 17.86 14.47C18.65 13.86 19.47 13.23 20.18 11.94C20.71 10.98 21 9.93 21 9C21 6.2 18.8 4 16 4C13.2 4 11 6.2 11 9H9C9 5.07 12.07 2 16 2C19.93 2 23 5.07 23 9C23 10.26 22.62 11.65 21.93 12.9C21.02 14.55 19.95 15.38 19.08 16.05C18.27 16.67 17.69 17.12 17.37 18.1C16.77 19.92 16 20.94 14.64 21.65C14.13 21.88 13.57 22 13 22C10.79 22 9 20.21 9 18H11C11 19.1 11.9 20 13 20Z" fill="#0D0C0F"/>
+<path d="M6.4 9.4L5 8L0 13L5 18L6.4 16.6L3.8 14H12V12H3.8L6.4 9.4Z" fill="black"/>
+</svg>

package/lib/build/svg/system/barge.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect x="3" y="3" width="18" height="18" rx="2" fill="#0D0C0F"/>
+<path d="M9.01818 7.68L10.5455 6L16 12L10.5455 18L9.01818 16.32L11.8545 13.2H3V10.8H11.8545L9.01818 7.68Z" fill="#E5E5E5"/>
+</svg>

package/lib/build/svg/system/emoticon-frown.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M6.88 17.5C7.68 15.45 9.67 14 12 14C14.33 14 16.32 15.45 17.12 17.5H15.45C14.75 16.31 13.48 15.5 12 15.5C10.52 15.5 9.24 16.31 8.55 17.5H6.88ZM2 12C2 6.48 6.47 2 11.99 2C17.52 2 22 6.48 22 12C22 17.52 17.52 22 11.99 22C6.47 22 2 17.52 2 12ZM4 12C4 16.42 7.58 20 12 20C16.42 20 20 16.42 20 12C20 7.58 16.42 4 12 4C7.58 4 4 7.58 4 12ZM8.5 11C9.32843 11 10 10.3284 10 9.5C10 8.67157 9.32843 8 8.5 8C7.67157 8 7 8.67157 7 9.5C7 10.3284 7.67157 11 8.5 11ZM15.5 11C16.3284 11 17 10.3284 17 9.5C17 8.67157 16.3284 8 15.5 8C14.6716 8 14 8.67157 14 9.5C14 10.3284 14.6716 11 15.5 11Z" fill="#000"/></svg>

package/lib/build/svg/system/emoticon-neutral.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M2 12C2 6.48 6.47 2 11.99 2C17.52 2 22 6.48 22 12C22 17.52 17.52 22 11.99 22C6.47 22 2 17.52 2 12ZM4 12C4 16.42 7.58 20 12 20C16.42 20 20 16.42 20 12C20 7.58 16.42 4 12 4C7.58 4 4 7.58 4 12ZM8.5 11C9.32843 11 10 10.3284 10 9.5C10 8.67157 9.32843 8 8.5 8C7.67157 8 7 8.67157 7 9.5C7 10.3284 7.67157 11 8.5 11ZM17 9.5C17 10.3284 16.3284 11 15.5 11C14.6716 11 14 10.3284 14 9.5C14 8.67157 14.6716 8 15.5 8C16.3284 8 17 8.67157 17 9.5ZM15 15.5V14H9V15.5H15Z" fill="#000"/></svg>

package/lib/build/svg/system/reply.svg

@@ -0,0 +1 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10 9V5L3 12L10 19V14.9C15 14.9 18.5 16.5 21 20C20 15 17 10 10 9Z" fill="#000"/></svg>

package/lib/build/svg/system/takeover.svg

@@ -0,0 +1,11 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_2848_38)">
+<path d="M6.6 15.6L8 17L13 12L8 7L6.6 8.4L9.2 11L0.999999 11L0.999999 13L9.2 13L6.6 15.6Z" fill="black"/>
+<path d="M17.4011 15.7461C16.5769 13.2317 16.5772 10.5034 17.3852 7.97974L19.9779 7.97444C20.2961 7.97378 20.5845 7.79052 20.7195 7.5133C21.1596 6.6344 21.753 5.80234 22.4822 5.07017C22.8057 4.74541 22.8046 4.21508 22.4798 3.89166L20.4191 1.83937C20.0944 1.51594 19.564 1.51703 19.2406 1.84178C13.7188 7.38621 13.7372 16.3547 19.2816 21.8764C19.6064 22.1999 20.1367 22.1988 20.4601 21.874L22.5183 19.8074C22.8417 19.4827 22.8406 18.9523 22.5159 18.6289C21.7778 17.8938 21.1869 17.0701 20.7431 16.193C20.6011 15.9222 20.3238 15.7401 19.9938 15.7408L17.4011 15.7461Z" fill="#0D0C0F"/>
+</g>
+<defs>
+<clipPath id="clip0_2848_38">
+<rect width="24" height="24" fill="white" transform="translate(0 24) rotate(-90)"/>
+</clipPath>
+</defs>
+</svg>

package/lib/build/svg/system/whisper.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M9 13C11.2091 13 13 11.2091 13 9C13 6.79086 11.2091 5 9 5C6.79086 5 5 6.79086 5 9C5 11.2091 6.79086 13 9 13Z" fill="#0D0C0F"/>
+<path d="M9 15C6.33 15 1 16.34 1 19V21H17V19C17 16.34 11.67 15 9 15ZM16.76 5.36L15.08 7.05C15.92 8.23 15.92 9.76 15.08 10.94L16.76 12.63C18.78 10.61 18.78 7.56 16.76 5.36ZM20.07 2L18.44 3.63C21.21 6.65 21.21 11.19 18.44 14.37L20.07 16C23.97 12.11 23.98 6.05 20.07 2Z" fill="#0D0C0F"/>
+</svg>