@alma/widgets 2.2.8 → 2.3.0

package/CHANGELOG.md

@@ -1,3 +1,24 @@
+# [2.3.0](https://github.com/alma/widgets/compare/v2.2.10...v2.3.0) (2022-04-21)
+
+
+### Features
+
+* **payment-plan:** add firstDisplayedPaymentPlan option ([#26](https://github.com/alma/widgets/issues/26)) ([f16fa4a](https://github.com/alma/widgets/commit/f16fa4a068a9e06aec261489065bc1282acee666))
+
+## [2.2.10](https://github.com/alma/widgets/compare/v2.2.9...v2.2.10) (2022-04-12)
+
+
+### Bug Fixes
+
+* updated build command to generate a raw folder with unminified JS/CSS ([#21](https://github.com/alma/widgets/issues/21)) ([e1729c1](https://github.com/alma/widgets/commit/e1729c1fd959eeee2e0fda1113db6ff2050b0ddb))
+
+## [2.2.9](https://github.com/alma/widgets/compare/v2.2.8...v2.2.9) (2022-03-21)
+
+
+### Bug Fixes
+
+* schedule not displaying properly when many plans are eligible ([#20](https://github.com/alma/widgets/issues/20)) ([1e80565](https://github.com/alma/widgets/commit/1e805658c6488c7fe371170c36ed6dd8b1446500))
+
 ## [2.2.8](https://github.com/alma/widgets/compare/v2.2.7...v2.2.8) (2022-03-10)
 
 

package/dist/raw/widgets.css

@@ -0,0 +1,590 @@
+@import url('https://fonts.googleapis.com/css2?family=Public+Sans:wght@300;600&family=Work+Sans:wght@700&display=swap');
+
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+}
+
+:root {
+  --white: #fff;
+  --blue-100: #e9f4ff;
+  --blue-300: #00425d;
+  --blue-400: #003951;
+  --blue-500: #337b99;
+  --blue-600: #042736;
+  --red-100: #ffedee;
+  --red-300: #ffa0a6;
+  --red-600: #ff414d;
+  --orange: #ff7e55;
+  --orange-100: #fff3ee;
+  --orange-300: #fcd4b5;
+  --yellow-100: #fff5de;
+  --yellow-300: #ffde9d;
+  --yellow-600: #ffbb33;
+  --beige: #fff7f0;
+  --gray-100: #f7f9fb;
+  --gray-200: #f4f6f6;
+  --gray-300: #e1e4e6;
+  --gray-400: #c2d0d8;
+  --gray-500: #b2bbc0;
+  --gray-600: #819098;
+  --gray-700: #454f54;
+  --gray-800: #2e3538;
+  --green-100: #ddf8f1;
+  --green-300: #9cebd6;
+  --green-600: #1dcda3;
+}
+@font-face {
+  font-family: 'Eina04', sans-serif;
+  src: url('./assets/fonts/Eina04-Light.eot?#iefix') format('embedded-opentype'),
+    url('./assets/fonts/Eina04-Light.woff') format('woff'),
+    url('./assets/fonts/Eina04-Light.ttf') format('truetype'),
+    url('./assets/fonts/Eina04-Light.svg#Eina04-Light') format('svg');
+  font-weight: 300;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Eina04', sans-serif;
+  src: url('./assets/fonts/Eina04-Regular.eot?#iefix') format('embedded-opentype'),
+    url('./assets/fonts/Eina04-Regular.woff') format('woff'),
+    url('./assets/fonts/Eina04-Regular.ttf') format('truetype'),
+    url('./assets/fonts/Eina04-Regular.svg#Eina04-Regular') format('svg');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Eina04', sans-serif;
+  src: url('./assets/fonts/Eina04-RegularItalic.eot?#iefix') format('embedded-opentype'),
+    url('./assets/fonts/Eina04-RegularItalic.woff') format('woff'),
+    url('./assets/fonts/Eina04-RegularItalic.ttf') format('truetype'),
+    url('./assets/fonts/Eina04-RegularItalic.svg#Eina04-RegularItalic') format('svg');
+  font-weight: 400;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Eina04', sans-serif;
+  src: url('./assets/fonts/Eina04-SemiBold.eot?#iefix') format('embedded-opentype'),
+    url('./assets/fonts/Eina04-SemiBold.woff') format('woff'),
+    url('./assets/fonts/Eina04-SemiBold.ttf') format('truetype'),
+    url('./assets/fonts/Eina04-SemiBold.svg#Eina04-SemiBold') format('svg');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Eina04', sans-serif;
+  src: url('./assets/fonts/Eina04-SemiboldItalic.eot?#iefix') format('embedded-opentype'),
+    url('./assets/fonts/Eina04-SemiboldItalic.woff') format('woff'),
+    url('./assets/fonts/Eina04-SemiboldItalic.ttf') format('truetype'),
+    url('./assets/fonts/Eina04-SemiboldItalic.svg#Eina04-SemiboldItalic') format('svg');
+  font-weight: 500;
+  font-style: italic;
+  font-display: swap;
+}
+@font-face {
+  font-family: 'Eina04', sans-serif;
+  src: url('./assets/fonts/Eina04-Bold.eot?#iefix') format('embedded-opentype'),
+    url('./assets/fonts/Eina04-Bold.woff') format('woff'),
+    url('./assets/fonts/Eina04-Bold.ttf') format('truetype'),
+    url('./assets/fonts/Eina04-Bold.svg#Eina04-Bold') format('svg');
+  font-weight: 600;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Public Sans';
+  src: url('./assets/fonts/PublicSans-VariableFont_wght.ttf');
+  font-style: normal;
+  font-display: swap;
+}
+
+._31lrj {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+._2p94X {
+  font-family: 'Eina04', sans-serif;
+  font-weight: bold;
+  line-height: 35px;
+  font-size: 64px;
+  color: var(--blue-300);
+  margin-bottom: 16px;
+  animation: _229P7 0.7s cubic-bezier(0.87, 0, 0.17, 1) 1ms infinite
+    alternate-reverse both;
+}
+
+._1k0PM {
+  width: 34px;
+  height: 10px;
+  background-color: var(--red-600);
+  -webkit-animation: _2cX7o 1.4s cubic-bezier(0.87, 0, 0.17, 1) 1ms infinite forwards;
+          animation: _2cX7o 1.4s cubic-bezier(0.87, 0, 0.17, 1) 1ms infinite forwards;
+}
+
+@-webkit-keyframes _229P7 {
+  0% {
+    opacity: 1;
+    color: var(--blue-300);
+  }
+  100% {
+    opacity: 0;
+    color: var(--yellow-600);
+  }
+}
+
+@keyframes _229P7 {
+  0% {
+    opacity: 1;
+    color: var(--blue-300);
+  }
+  100% {
+    opacity: 0;
+    color: var(--yellow-600);
+  }
+}
+
+@-webkit-keyframes _2cX7o {
+  0% {
+    opacity: 0;
+    transform: translateX(-34px);
+    border-radius: 48px;
+    background-color: var(--yellow-600);
+  }
+  40% {
+    border-radius: 0;
+  }
+  50% {
+    opacity: 1;
+    transform: translateX(0);
+    background-color: var(--red-600);
+  }
+  60% {
+    border-radius: 0;
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(34px);
+    border-radius: 48px;
+    background-color: var(--yellow-600);
+  }
+}
+
+@keyframes _2cX7o {
+  0% {
+    opacity: 0;
+    transform: translateX(-34px);
+    border-radius: 48px;
+    background-color: var(--yellow-600);
+  }
+  40% {
+    border-radius: 0;
+  }
+  50% {
+    opacity: 1;
+    transform: translateX(0);
+    background-color: var(--red-600);
+  }
+  60% {
+    border-radius: 0;
+  }
+  100% {
+    opacity: 0;
+    transform: translateX(34px);
+    border-radius: 48px;
+    background-color: var(--yellow-600);
+  }
+}
+
+._D8SjB {
+  border: none;
+  background-color: var(--white);
+  color: var(--blue-300);
+  width: 100%;
+  max-height: 100%;
+  height: 100%;
+  position: relative;
+}
+
+._ocM9x {
+  padding: 24px;
+  width: 100%;
+  height: 100%;
+}
+
+._1GP2F {
+  overflow-y: auto;
+}
+
+._1yxCb {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background-color: rgba(0, 0, 0, 0.3);
+  z-index: 99999;
+}
+
+._12LLh {
+  display: flex;
+  justify-content: flex-end;
+  position: absolute;
+  top: 24px;
+  right: 24px;
+  z-index: 1;
+}
+
+._3YRro {
+  border: 0;
+  background-color: var(--blue-300);
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  padding: 4px;
+}
+
+@media screen and (min-width: 800px) {
+  ._D8SjB {
+    border-radius: 8px;
+    width: 800px;
+    height: 550px;
+  }
+  ._1GP2F {
+    max-height: 100vh;
+    overflow: hidden;
+  }
+
+  ._ocM9x {
+    padding: 32px;
+  }
+}
+
+._1l2Oa {
+  display: flex;
+  flex-wrap: wrap;
+  flex-direction: row;
+  justify-content: center;
+  margin-bottom: 24px;
+}
+
+._1l2Oa > button {
+  position: relative;
+  height: 50px;
+  width: 50px;
+  margin: 0 4px 8px;
+  border: 1px solid var(--gray-300);
+  border-radius: 8px;
+  font-family: 'Eina04', sans-serif;
+  font-size: 18px;
+  line-height: 150%;
+  font-weight: 600;
+  color: var(--blue-400);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  overflow: hidden;
+  cursor: pointer;
+  background-color: var(--white);
+  transition: all 0.1s ease;
+}
+
+._1l2Oa > button::after {
+  content: '';
+  width: 100%;
+  height: 4px;
+  position: absolute;
+  bottom: 0;
+}
+
+._1l2Oa > button._3rue7 {
+  background-color: var(--blue-300);
+  color: var(--white);
+  border: 0;
+}
+._1l2Oa > button._3rue7::after {
+  background-color: var(--red-600);
+}
+
+._MPKjS {
+  padding: 32px 24px;
+  margin-bottom: 40px;
+  border-top: 1px solid var(--gray-300);
+  border-bottom: 1px solid var(--gray-300);
+}
+
+._1A7Qv {
+  display: flex;
+  justify-content: space-between;
+  line-height: 150%;
+  margin-bottom: 4px;
+}
+
+._14Ejo {
+  font-family: 'Eina04', sans-serif;
+  font-weight: 600;
+  font-size: 18px;
+}
+
+._1ZIgu {
+  font-family: 'Eina04', sans-serif;
+  font-weight: 600;
+  font-size: 14px;
+  margin-bottom: 24px;
+}
+
+._1BUr8 {
+  margin-top: 8px;
+}
+
+@media (min-width: 800px) {
+  ._MPKjS {
+    overflow-y: auto;
+    margin: 0;
+    border-bottom: 1px solid transparent;
+    height: 100%;
+  }
+}
+
+._180ro {
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 40px;
+  padding: 0 24px;
+}
+
+._1HqCO {
+  display: flex;
+  align-items: center;
+  margin-bottom: 16px;
+  line-height: 180%;
+}
+
+._3B8wx {
+  flex: 0 0 30px;
+  height: 30px;
+  line-height: 30px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  border-radius: 50%;
+  background-color: var(--blue-300);
+  color: var(--white);
+  margin-right: 16px;
+}
+
+@media (min-width: 800px) {
+  ._180ro {
+    margin: 0;
+    padding: 0;
+  }
+}
+
+._3Oyv_ {
+  width: 100%;
+  display: flex;
+  align-items: flex-end;
+  justify-content: center;
+  flex: 1;
+  padding-bottom: 64px;
+}
+
+@media (min-width: 800px) {
+  ._3Oyv_ {
+    padding-bottom: 0;
+  }
+}
+
+._3ERx- {
+  font-family: 'Eina04', sans-serif;
+  font-weight: 600;
+  font-size: 18px;
+  line-height: 150%;
+  margin: 24px 0;
+  color: var(--blue-400);
+  text-align: center;
+}
+
+._3ERx- > span {
+  background-color: rgba(253, 175, 111, 0.5);
+  border-radius: 2px;
+  padding: 8px 4px 2px 4px;
+}
+
+@media (min-width: 800px) {
+  ._3ERx- {
+    font-size: 24px;
+    text-align: start;
+    margin: 0 0 24px 0;
+  }
+}
+
+._21g6u {
+  display: flex;
+  height: 100%;
+  flex-direction: row;
+}
+
+._3zaP5 {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  width: 100%;
+}
+
+._2SBRC {
+  max-width: 300px;
+  padding-right: 24px;
+}
+
+._17qNJ {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  text-align: center;
+  font-size: 20px;
+}
+
+._2oTJq {
+  height: 100%;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+._2G7Ch {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+
+._2SwwZ {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+}
+
+._2qODo {
+  width: 100%;
+  height: 20px;
+  background-color: #f7f9fb;
+  border-radius: 2px;
+}
+._2YO01 {
+  width: 60%;
+  height: 15px;
+  margin-top: 16px;
+  background-color: #f7f9fb;
+  border-radius: 2px;
+}
+
+._TSkFv {
+  width: 368px;
+  max-width: 100%;
+  background-color: transparent;
+  border: 1px solid var(--gray-300);
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  padding: 12px;
+}
+
+._TSkFv:focus,
+._TSkFv:focus-visible {
+  outline: none;
+}
+
+._LJ4nZ {
+  color: var(--blue-300);
+  margin-right: 12px;
+}
+._bMClc {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+}
+._17c_S {
+  display: flex;
+  flex-direction: row;
+  align-items: flex-start;
+  max-width: 310px;
+  flex-wrap: wrap;
+}
+._2Kqjn {
+  font-size: 12px;
+  font-family: 'Eina04', sans-serif;
+  font-weight: 600;
+  color: var(--blue-300);
+  line-height: 20px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  height: 22px;
+  width: 30px;
+  margin: 0 4px;
+}
+._2Kqjn._3dG_J {
+  border-bottom: 3px solid var(--blue-300);
+}
+
+._2Kqjn._3dG_J._3O1bg {
+  border-bottom-color: var(--gray-600);
+  cursor: not-allowed;
+}
+
+._25GrF {
+  font-family: Public Sans;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 12px;
+  line-height: 180%;
+  color: var(--blue-300);
+  text-align: left;
+  margin-top: 8px;
+}
+._3O1bg {
+  color: var(--gray-600);
+}
+._30j1O {
+  overflow: hidden;
+  align-items: center;
+}
+._R0YlN {
+  align-items: center;
+  line-height: 100%;
+}
+._2kGhu {
+  font-family: Public Sans;
+  font-style: normal;
+  font-weight: normal;
+  font-size: 12px;
+  color: var(--blue-300);
+}
+._73d_Y {
+  cursor: pointer;
+  text-decoration: underline;
+}
+._1ZDMS {
+  align-items: center;
+}
+
+._UksZa {
+  cursor: pointer;
+}
+._1lr-q {
+  cursor: not-allowed;
+}