npm - @veeqo/ui - Versions diffs - 0.0.3 → 0.0.6 - Mend

@veeqo/ui 0.0.3 → 0.0.6

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (1085) hide show

package/src/components/SegmentedControl/__snapshots__/SegmentedControl.test.tsx.snap DELETED Viewed

@@ -1,825 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`SegmentedControl it renders correctly with 2 options 1`] = `
-.c4 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  gap: 8px;
-}
-.c4 svg {
-  width: 1rem;
-  height: 1rem;
-}
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  font-weight: 400;
-  border: 1px solid;
-  background-color: transparent;
-  white-space: nowrap;
-  --outline-width: 4px;
-  height: 40px;
-  padding-left: 24px;
-  padding-right: 24px;
-  border-radius: 8px;
-  font-size: 16px;
-}
-.c2:hover {
-  cursor: pointer;
-}
-.c2:disabled {
-  pointer-events: none;
-  cursor: unset !important;
-}
-.c2 > span {
-  position: relative;
-  top: -1px;
-}
-.c3 {
-  border-color: #CDD1D5;
-  background-color: white;
-  box-shadow: 0 1px 3px rgba(55,66,77,0.15);
-  color: #37424D;
-}
-.c3:hover {
-  background-color: #FAFAFB;
-}
-.c3:active {
-  background-color: #FAFAFB;
-  border-color: #0079D1;
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-}
-.c3:focus-visible {
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-  outline: 0;
-}
-.c3:disabled {
-  box-shadow: none !important;
-  background-color: #DFE3E8 !important;
-  border-color: #DFE3E8 !important;
-  color: #637381 !important;
-}
-.c5 {
-  background-color: #0079D1;
-  border-color: #0079D1;
-  color: white;
-}
-.c5:hover {
-  background-color: #005A9C;
-  border-color: #005A9C;
-}
-.c5:active {
-  background-color: #005A9C;
-  border-color: #005A9C;
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-}
-.c5:focus-visible {
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-}
-.c0 {
-  box-sizing: border-box;
-  position: relative;
-  margin: 0;
-  padding: 0;
-}
-.c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-.c1 > button {
-  border-radius: 0;
-  box-shadow: none;
-}
-.c1 > button:focus,
-.c1 > button:active {
-  background-color: #FAFAFB;
-  border-color: #CDD1D5;
-  box-shadow: none;
-}
-.c1 > .veeqo-components-active-button:focus,
-.c1 > .veeqo-components-active-button:active {
-  background-color: #005A9C;
-  border-color: #005A9C;
-}
-.c1 > button:not(:first-child) {
-  border-left: none;
-}
-.c1 > .veeqo-components-active-button + button {
-  border-left: 1px solid #CDD1D5;
-}
-.c1 > button:first-child {
-  border-radius: 20px 0px 0px 20px;
-}
-.c1 > button:last-child {
-  border-radius: 0px 20px 20px 0px;
-}
-<div>
-  <div
-    class="c0 c1"
-  >
-    <button
-      class="c2 c3"
-    >
-      <span
-        class="c4"
-      >
-        <span>
-          First button
-        </span>
-      </span>
-    </button>
-    <button
-      class="c2 c3 c5 veeqo-components-active-button"
-    >
-      <span
-        class="c4"
-      >
-        <span>
-          Second button
-        </span>
-      </span>
-    </button>
-  </div>
-</div>
-`;
-exports[`SegmentedControl it renders correctly with 3 options 1`] = `
-.c4 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  gap: 8px;
-}
-.c4 svg {
-  width: 1rem;
-  height: 1rem;
-}
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  font-weight: 400;
-  border: 1px solid;
-  background-color: transparent;
-  white-space: nowrap;
-  --outline-width: 4px;
-  height: 40px;
-  padding-left: 24px;
-  padding-right: 24px;
-  border-radius: 8px;
-  font-size: 16px;
-}
-.c2:hover {
-  cursor: pointer;
-}
-.c2:disabled {
-  pointer-events: none;
-  cursor: unset !important;
-}
-.c2 > span {
-  position: relative;
-  top: -1px;
-}
-.c3 {
-  border-color: #CDD1D5;
-  background-color: white;
-  box-shadow: 0 1px 3px rgba(55,66,77,0.15);
-  color: #37424D;
-}
-.c3:hover {
-  background-color: #FAFAFB;
-}
-.c3:active {
-  background-color: #FAFAFB;
-  border-color: #0079D1;
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-}
-.c3:focus-visible {
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-  outline: 0;
-}
-.c3:disabled {
-  box-shadow: none !important;
-  background-color: #DFE3E8 !important;
-  border-color: #DFE3E8 !important;
-  color: #637381 !important;
-}
-.c5 {
-  background-color: #0079D1;
-  border-color: #0079D1;
-  color: white;
-}
-.c5:hover {
-  background-color: #005A9C;
-  border-color: #005A9C;
-}
-.c5:active {
-  background-color: #005A9C;
-  border-color: #005A9C;
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-}
-.c5:focus-visible {
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-}
-.c0 {
-  box-sizing: border-box;
-  position: relative;
-  margin: 0;
-  padding: 0;
-}
-.c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-.c1 > button {
-  border-radius: 0;
-  box-shadow: none;
-}
-.c1 > button:focus,
-.c1 > button:active {
-  background-color: #FAFAFB;
-  border-color: #CDD1D5;
-  box-shadow: none;
-}
-.c1 > .veeqo-components-active-button:focus,
-.c1 > .veeqo-components-active-button:active {
-  background-color: #005A9C;
-  border-color: #005A9C;
-}
-.c1 > button:not(:first-child) {
-  border-left: none;
-}
-.c1 > .veeqo-components-active-button + button {
-  border-left: 1px solid #CDD1D5;
-}
-.c1 > button:first-child {
-  border-radius: 20px 0px 0px 20px;
-}
-.c1 > button:last-child {
-  border-radius: 0px 20px 20px 0px;
-}
-<div>
-  <div
-    class="c0 c1"
-  >
-    <button
-      class="c2 c3"
-    >
-      <span
-        class="c4"
-      >
-        <span>
-          First button
-        </span>
-      </span>
-    </button>
-    <button
-      class="c2 c3 c5 veeqo-components-active-button"
-    >
-      <span
-        class="c4"
-      >
-        <span>
-          Second button
-        </span>
-      </span>
-    </button>
-    <button
-      class="c2 c3"
-    >
-      <span
-        class="c4"
-      >
-        <span>
-          Third button
-        </span>
-      </span>
-    </button>
-  </div>
-</div>
-`;
-exports[`SegmentedControl it renders correctly with disabled button 1`] = `
-.c4 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  gap: 8px;
-}
-.c4 svg {
-  width: 1rem;
-  height: 1rem;
-}
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  font-weight: 400;
-  border: 1px solid;
-  background-color: transparent;
-  white-space: nowrap;
-  --outline-width: 4px;
-  height: 40px;
-  padding-left: 24px;
-  padding-right: 24px;
-  border-radius: 8px;
-  font-size: 16px;
-}
-.c2:hover {
-  cursor: pointer;
-}
-.c2:disabled {
-  pointer-events: none;
-  cursor: unset !important;
-}
-.c2 > span {
-  position: relative;
-  top: -1px;
-}
-.c3 {
-  border-color: #CDD1D5;
-  background-color: white;
-  box-shadow: 0 1px 3px rgba(55,66,77,0.15);
-  color: #37424D;
-}
-.c3:hover {
-  background-color: #FAFAFB;
-}
-.c3:active {
-  background-color: #FAFAFB;
-  border-color: #0079D1;
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-}
-.c3:focus-visible {
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-  outline: 0;
-}
-.c3:disabled {
-  box-shadow: none !important;
-  background-color: #DFE3E8 !important;
-  border-color: #DFE3E8 !important;
-  color: #637381 !important;
-}
-.c5 {
-  background-color: #0079D1;
-  border-color: #0079D1;
-  color: white;
-}
-.c5:hover {
-  background-color: #005A9C;
-  border-color: #005A9C;
-}
-.c5:active {
-  background-color: #005A9C;
-  border-color: #005A9C;
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-}
-.c5:focus-visible {
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-}
-.c0 {
-  box-sizing: border-box;
-  position: relative;
-  margin: 0;
-  padding: 0;
-}
-.c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-.c1 > button {
-  border-radius: 0;
-  box-shadow: none;
-}
-.c1 > button:focus,
-.c1 > button:active {
-  background-color: #FAFAFB;
-  border-color: #CDD1D5;
-  box-shadow: none;
-}
-.c1 > .veeqo-components-active-button:focus,
-.c1 > .veeqo-components-active-button:active {
-  background-color: #005A9C;
-  border-color: #005A9C;
-}
-.c1 > button:not(:first-child) {
-  border-left: none;
-}
-.c1 > .veeqo-components-active-button + button {
-  border-left: 1px solid #CDD1D5;
-}
-.c1 > button:first-child {
-  border-radius: 20px 0px 0px 20px;
-}
-.c1 > button:last-child {
-  border-radius: 0px 20px 20px 0px;
-}
-<div>
-  <div
-    class="c0 c1"
-  >
-    <button
-      class="c2 c3"
-    >
-      <span
-        class="c4"
-      >
-        <span>
-          First button
-        </span>
-      </span>
-    </button>
-    <button
-      class="c2 c3 c5 veeqo-components-active-button"
-    >
-      <span
-        class="c4"
-      >
-        <span>
-          Second button
-        </span>
-      </span>
-    </button>
-    <button
-      class="c2 c3"
-      disabled=""
-    >
-      <span
-        class="c4"
-      >
-        <span>
-          Third button
-        </span>
-      </span>
-    </button>
-  </div>
-</div>
-`;
-exports[`SegmentedControl it renders correctly with multiple disabled buttons 1`] = `
-.c4 {
-  display: -webkit-inline-box;
-  display: -webkit-inline-flex;
-  display: -ms-inline-flexbox;
-  display: inline-flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  gap: 8px;
-}
-.c4 svg {
-  width: 1rem;
-  height: 1rem;
-}
-.c2 {
-  position: relative;
-  box-sizing: border-box;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: center;
-  -webkit-justify-content: center;
-  -ms-flex-pack: center;
-  justify-content: center;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  font-weight: 400;
-  border: 1px solid;
-  background-color: transparent;
-  white-space: nowrap;
-  --outline-width: 4px;
-  height: 40px;
-  padding-left: 24px;
-  padding-right: 24px;
-  border-radius: 8px;
-  font-size: 16px;
-}
-.c2:hover {
-  cursor: pointer;
-}
-.c2:disabled {
-  pointer-events: none;
-  cursor: unset !important;
-}
-.c2 > span {
-  position: relative;
-  top: -1px;
-}
-.c3 {
-  border-color: #CDD1D5;
-  background-color: white;
-  box-shadow: 0 1px 3px rgba(55,66,77,0.15);
-  color: #37424D;
-}
-.c3:hover {
-  background-color: #FAFAFB;
-}
-.c3:active {
-  background-color: #FAFAFB;
-  border-color: #0079D1;
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-}
-.c3:focus-visible {
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-  outline: 0;
-}
-.c3:disabled {
-  box-shadow: none !important;
-  background-color: #DFE3E8 !important;
-  border-color: #DFE3E8 !important;
-  color: #637381 !important;
-}
-.c5 {
-  background-color: #0079D1;
-  border-color: #0079D1;
-  color: white;
-}
-.c5:hover {
-  background-color: #005A9C;
-  border-color: #005A9C;
-}
-.c5:active {
-  background-color: #005A9C;
-  border-color: #005A9C;
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-}
-.c5:focus-visible {
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-}
-.c0 {
-  box-sizing: border-box;
-  position: relative;
-  margin: 0;
-  padding: 0;
-}
-.c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-.c1 > button {
-  border-radius: 0;
-  box-shadow: none;
-}
-.c1 > button:focus,
-.c1 > button:active {
-  background-color: #FAFAFB;
-  border-color: #CDD1D5;
-  box-shadow: none;
-}
-.c1 > .veeqo-components-active-button:focus,
-.c1 > .veeqo-components-active-button:active {
-  background-color: #005A9C;
-  border-color: #005A9C;
-}
-.c1 > button:not(:first-child) {
-  border-left: none;
-}
-.c1 > .veeqo-components-active-button + button {
-  border-left: 1px solid #CDD1D5;
-}
-.c1 > button:first-child {
-  border-radius: 20px 0px 0px 20px;
-}
-.c1 > button:last-child {
-  border-radius: 0px 20px 20px 0px;
-}
-<div>
-  <div
-    class="c0 c1"
-  >
-    <button
-      class="c2 c3"
-    >
-      <span
-        class="c4"
-      >
-        <span>
-          First button
-        </span>
-      </span>
-    </button>
-    <button
-      class="c2 c3 c5 veeqo-components-active-button"
-      disabled=""
-    >
-      <span
-        class="c4"
-      >
-        <span>
-          Second button
-        </span>
-      </span>
-    </button>
-    <button
-      class="c2 c3"
-      disabled=""
-    >
-      <span
-        class="c4"
-      >
-        <span>
-          Third button
-        </span>
-      </span>
-    </button>
-  </div>
-</div>
-`;