@openlearning/widget-framework 1.0.2 → 1.2.0

package/dist/styles/button.css

@@ -0,0 +1,381 @@
+/* Button & Menu Styles - OpenLearning Design System */
+
+/* CSS Variables for theming */
+:root {
+  /* base color: NOT_BLACK */
+  --btn-primary: rgba(0, 43, 62, 1);
+  
+  /* Text colors */
+  --btn-text-primary: rgba(0, 0, 0, 0.9);
+  --btn-text-secondary: rgba(0, 0, 0, 0.55);
+  --btn-text-disabled: rgba(0, 0, 0, 0.55);
+  --btn-text-inverse: #ffffff;
+
+  /* Tonal backgrounds */
+  --btn-bg-tonal: rgba(0, 43, 62, 0.1);
+  --btn-bg-tonal-hover: rgba(0, 43, 62, 0.18);
+  
+  /* Light gray backgrounds */
+  --btn-bg-light: #f5f7f7;
+
+  /* Sizing - default height is 44px */
+  --btn-height: 44px;
+  --btn-padding: 0 16px;
+  --btn-small-height: 32px;
+  --btn-small-padding: 0 16px;
+  --btn-large-height: 48px;
+  --btn-large-padding: 0 16px;
+
+  /* Typography */
+  --btn-font-family: "Open Sans", "Helvetica", sans-serif;
+  --btn-font-size: 14px;
+  --btn-font-weight: 600;
+  --btn-line-height: 20px;
+
+  /* Border radius - pill-shaped per OpenLearning design */
+  --btn-border-radius: 100px;
+
+  /* Transitions */
+  --btn-transition: all 0.2s ease-in-out;
+}
+
+/* Base Button Styles */
+.btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  height: var(--btn-height);
+  padding: var(--btn-padding);
+  gap: 8px;
+  font-family: var(--btn-font-family);
+  font-size: var(--btn-font-size);
+  font-weight: var(--btn-font-weight);
+  line-height: var(--btn-line-height);
+  border: 1px solid transparent;
+  border-radius: var(--btn-border-radius);
+  cursor: pointer;
+  transition: var(--btn-transition);
+  text-decoration: none;
+  white-space: nowrap;
+  user-select: none;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  min-width: var(--btn-height);
+}
+
+/* Size variants */
+.btn--small {
+  height: var(--btn-small-height);
+  padding: var(--btn-small-padding);
+  font-size: 13px;
+  min-width: var(--btn-small-height);
+}
+
+.btn--large {
+  height: var(--btn-large-height);
+  padding: var(--btn-large-padding);
+  font-size: 15px;
+  min-width: var(--btn-large-height);
+}
+
+/* OpenLearning Variant: Round Filled (default) */
+.btn--round-filled {
+  border-color: transparent;
+  background-color: var(--btn-primary);
+  color: var(--btn-text-inverse);
+}
+
+.btn--round-filled:hover:not(:disabled) {
+  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.25);
+}
+
+.btn--round-filled:active:not(:disabled) {
+  box-shadow: inset 0px 1px 2px rgba(0, 0, 0, 0.1);
+}
+
+/* OpenLearning Variant: Round Tonal */
+.btn--round-tonal {
+  border-color: transparent;
+  background-color: var(--btn-bg-tonal);
+  color: var(--btn-text-primary);
+}
+
+.btn--round-tonal:hover:not(:disabled) {
+  background-color: var(--btn-bg-tonal-hover);
+}
+
+.btn--round-tonal:active:not(:disabled) {
+  background-color: var(--btn-bg-tonal-hover);
+}
+
+/* OpenLearning Variant: Round Quiet */
+.btn--round-quiet {
+  border: 1px solid var(--btn-primary);
+  background-color: transparent;
+  color: var(--btn-text-primary);
+}
+
+.btn--round-quiet:hover:not(:disabled) {
+  background-color: #f5f7f7;
+}
+
+.btn--round-quiet:active:not(:disabled) {
+  background-color: #f5f7f7;
+}
+
+/* OpenLearning Variant: Round Inline */
+.btn--round-inline {
+  border-color: transparent;
+  background-color: transparent;
+  color: var(--btn-text-primary);
+  padding: 0 4px;
+  height: auto;
+  min-width: auto;
+}
+
+.btn--round-inline:hover:not(:disabled) {
+  background-color: var(--btn-bg-light);
+}
+
+.btn--round-inline:active:not(:disabled) {
+  background-color: var(--btn-bg-light);
+}
+
+/* Platform Variant: Primary (Kelp color #0B7A7C) */
+.btn--primary {
+  border: 1px solid #0B7A7C;
+  background-color: #0B7A7C;
+  color: var(--btn-text-inverse);
+  border-radius: 4px;
+}
+
+.btn--primary:hover:not(:disabled) {
+  border-color: #07565F;
+  background-color: #07565F;
+  color: var(--btn-text-inverse);
+}
+
+.btn--primary:active:not(:disabled) {
+  border-color: #07565F;
+  background-color: #07565F;
+  color: var(--btn-text-inverse);
+}
+
+/* Platform Variant: Secondary */
+.btn--secondary {
+  border: 1px solid rgba(0, 0, 0, 0.55);
+  background-color: rgba(0, 0, 0, 0.04);
+  color: var(--btn-text-primary);
+  border-radius: 4px;
+}
+
+.btn--secondary:hover:not(:disabled) {
+  background-color: #ffffff;
+  color: var(--btn-text-primary);
+}
+
+.btn--secondary:active:not(:disabled) {
+  background-color: #ffffff;
+  color: var(--btn-text-primary);
+}
+
+/* Disabled state */
+.btn:disabled {
+  border-color: rgba(0, 43, 62, 0.1);
+  background-color: transparent;
+  color: var(--btn-text-disabled);
+  cursor: not-allowed;
+}
+
+.btn--round-filled:disabled {
+  background-color: transparent;
+  border-color: rgba(0, 43, 62, 0.1);
+  color: var(--btn-text-disabled);
+}
+
+.btn--round-tonal:disabled {
+  background-color: transparent;
+  border-color: rgba(0, 43, 62, 0.1);
+  color: var(--btn-text-disabled);
+}
+
+.btn--round-quiet:disabled {
+  border-color: rgba(0, 43, 62, 0.1);
+  background-color: transparent;
+  color: var(--btn-text-disabled);
+}
+
+.btn--round-inline:disabled {
+  border-color: transparent;
+  background-color: transparent;
+  color: var(--btn-text-disabled);
+}
+
+/* Platform variants - both use the same disabled style */
+.btn--primary:disabled,
+.btn--secondary:disabled {
+  border-color: rgba(0, 43, 62, 0.1);
+  background-color: #ffffff;
+  color: var(--btn-text-disabled);
+  cursor: not-allowed;
+}
+
+/* Icon support */
+.btn__icon {
+  width: 1em;
+  height: 1em;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.btn--icon-only {
+  width: var(--btn-height);
+  padding: 0;
+  border-radius: 50%;
+}
+
+.btn--icon-only.btn--small {
+  width: var(--btn-small-height);
+}
+
+.btn--icon-only.btn--large {
+  width: var(--btn-large-height);
+}
+
+/* Loading state */
+.btn--loading {
+  pointer-events: none;
+}
+
+/* Focus state for accessibility */
+.btn:focus-visible {
+  outline: 2px solid rgba(0, 43, 62, 0.4);
+  outline-offset: 2px;
+}
+
+/* Full width variant */
+.btn--full-width {
+  width: 100%;
+  display: flex;
+}
+
+/* Menu Styles */
+.menu {
+  position: relative;
+  display: inline-block;
+}
+
+.menu__trigger {
+  background-color: transparent;
+  color: var(--btn-text-primary);
+  padding: 0 16px;
+  height: var(--btn-height);
+  border: 1px solid transparent;
+  border-radius: var(--btn-border-radius);
+  cursor: pointer;
+  font-family: var(--btn-font-family);
+  font-size: var(--btn-font-size);
+  font-weight: var(--btn-font-weight);
+  transition: var(--btn-transition);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 4px;
+}
+
+.menu__trigger:hover:not(:disabled) {
+  background-color: var(--btn-bg-light);
+}
+
+.menu__trigger:active:not(:disabled) {
+  background-color: rgba(0, 43, 62, 0.1);
+}
+
+.menu__trigger:focus-visible {
+  outline: 2px solid rgba(0, 43, 62, 0.4);
+  outline-offset: 2px;
+}
+
+.menu__trigger:disabled {
+  cursor: not-allowed;
+  color: var(--btn-text-disabled);
+}
+
+.menu__trigger--checked {
+  background-color: var(--btn-bg-tonal);
+  font-weight: var(--btn-font-weight);
+}
+
+.menu__content {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  margin-top: 8px;
+  background-color: #ffffff;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  border-radius: 8px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  min-width: 200px;
+  z-index: 1000;
+  display: none;
+  flex-direction: column;
+  padding: 8px 0;
+}
+
+.menu__content--open {
+  display: flex;
+}
+
+.menu__item {
+  padding: 8px 16px;
+  color: var(--btn-text-primary);
+  background-color: transparent;
+  border: none;
+  text-align: left;
+  cursor: pointer;
+  font-family: var(--btn-font-family);
+  font-size: var(--btn-font-size);
+  font-weight: 500;
+  transition: var(--btn-transition);
+  width: 100%;
+  white-space: nowrap;
+  display: flex;
+  align-items: center;
+  gap: 8px;
+}
+
+.menu__item:hover:not(:disabled) {
+  background-color: var(--btn-bg-light);
+}
+
+.menu__item:active:not(:disabled) {
+  background-color: var(--btn-bg-tonal);
+}
+
+.menu__item:disabled {
+  color: var(--btn-text-disabled);
+  cursor: not-allowed;
+}
+
+.menu__item--checked {
+  background-color: var(--btn-bg-tonal);
+  color: var(--btn-primary);
+  font-weight: var(--btn-font-weight);
+}
+
+.menu__item-icon {
+  width: 1em;
+  height: 1em;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.menu__divider {
+  height: 1px;
+  background-color: rgba(0, 0, 0, 0.1);
+  margin: 4px 0;
+}

package/dist/styles/checkbox.css

@@ -0,0 +1,105 @@
+.checkbox-container {
+  display: flex;
+  flex-direction: column;
+}
+
+.checkboxgroup-options--vertical .checkbox-container.checkbox--spaced {
+  margin-top: 4px;
+}
+
+.checkboxgroup-options--horizontal .checkbox-container.checkbox--spaced {
+  margin-left: 16px;
+}
+
+.checkbox-label {
+  display: flex;
+  align-items: flex-start;
+  cursor: pointer;
+  position: relative;
+  user-select: none;
+  margin: 0;
+}
+
+.checkbox-label--disabled {
+  cursor: not-allowed;
+  color: rgba(0, 0, 0, 0.55);
+}
+
+.checkbox-input {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.checkbox-box {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  width: 20px;
+  height: 20px;
+  min-width: 20px;
+  min-height: 20px;
+  background: #FFFFFF;
+  border: 1px solid rgba(0, 0, 0, 0.55);
+  transition: all 150ms;
+  margin-right: 8px;
+  flex-shrink: 0;
+}
+
+.checkbox-input:disabled ~ .checkbox-box {
+  background: rgba(0, 0, 0, 0.1);
+  border-color: rgba(0, 0, 0, 0.1);
+}
+
+.checkbox-box svg {
+  visibility: hidden;
+  width: 20px;
+  height: 20px;
+}
+
+.checkbox-input:checked ~ .checkbox-box svg {
+  visibility: visible;
+}
+
+.checkbox-input:focus ~ .checkbox-box {
+  outline: 1px auto -webkit-focus-ring-color;
+  outline-offset: 3px;
+}
+
+.checkbox-text {
+  display: block;
+  font-size: 14px;
+  line-height: 20px;
+  color: rgba(0, 0, 0, 0.9);
+  flex-shrink: 1;
+  flex-grow: 1;
+}
+
+.checkbox-label--disabled .checkbox-text {
+  color: rgba(0, 0, 0, 0.55);
+}
+
+.checkbox-required {
+  color: #d32f2f;
+}
+
+.checkbox-description {
+  font-size: 12px;
+  line-height: 1.5;
+  color: rgba(0, 0, 0, 0.55);
+  margin-left: 28px;
+}
+
+.checkbox-error {
+  font-size: 12px;
+  line-height: 1.5;
+  color: #d32f2f;
+  margin-left: 28px;
+}

package/dist/styles/checkboxgroup.css

@@ -0,0 +1,42 @@
+.checkboxgroup-container {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.checkboxgroup-label {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  color: rgba(0, 0, 0, 0.9);
+  font-family: 'Open Sans', sans-serif;
+  margin-bottom: 4px;
+}
+
+.checkboxgroup-required {
+  color: #d32f2f;
+}
+
+.checkboxgroup-options {
+  display: flex;
+}
+
+.checkboxgroup-options--horizontal {
+  flex-direction: row;
+}
+
+.checkboxgroup-options--vertical {
+  flex-direction: column;
+}
+
+.checkboxgroup-description {
+  font-size: 12px;
+  line-height: 1.5;
+  color: rgba(0, 0, 0, 0.55);
+}
+
+.checkboxgroup-error {
+  font-size: 12px;
+  line-height: 1.5;
+  color: #d32f2f;
+}

package/dist/styles/radiogroup.css

@@ -0,0 +1,135 @@
+.radiogroup-container {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+
+.radiogroup-label {
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  color: rgba(0, 0, 0, 0.9);
+  font-family: 'Open Sans', sans-serif;
+  margin-bottom: 4px;
+}
+
+.radiogroup-required {
+  color: #d32f2f;
+}
+
+.radiogroup-options {
+  display: flex;
+}
+
+.radiogroup-options--horizontal {
+  flex-direction: row;
+}
+
+.radiogroup-options--vertical {
+  flex-direction: column;
+}
+
+.radiogroup-option {
+  display: flex;
+  align-items: flex-start;
+  cursor: pointer;
+  position: relative;
+  user-select: none;
+  margin: 0;
+}
+
+.radiogroup-options--vertical .radiogroup-option--spaced {
+  margin-top: 4px;
+}
+
+.radiogroup-options--horizontal .radiogroup-option--spaced {
+  margin-left: 16px;
+}
+
+.radiogroup-option--disabled {
+  cursor: not-allowed;
+  color: rgba(0, 0, 0, 0.55);
+}
+
+.radiogroup-input {
+  border: 0;
+  clip: rect(0 0 0 0);
+  height: 1px;
+  margin: -1px;
+  overflow: hidden;
+  padding: 0;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}
+
+.radiogroup-radio-container {
+  display: flex;
+  align-items: center;
+  height: 20px;
+  margin-right: 8px;
+  flex-shrink: 0;
+}
+
+.radiogroup-radio {
+  display: inline-block;
+  box-sizing: border-box;
+  width: 20px;
+  height: 20px;
+  background: #FFFFFF;
+  border-radius: 50%;
+  transition: all 150ms;
+  border: 1px solid rgba(0, 0, 0, 0.55);
+}
+
+.radiogroup-input:disabled ~ .radiogroup-radio-container .radiogroup-radio {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.radiogroup-radio::after {
+  content: "";
+  display: none;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+  background: rgba(0, 0, 0, 0.9);
+  margin: 4px;
+}
+
+.radiogroup-input:checked ~ .radiogroup-radio-container .radiogroup-radio::after {
+  display: block;
+}
+
+.radiogroup-input:disabled:checked ~ .radiogroup-radio-container .radiogroup-radio::after {
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.radiogroup-input:focus ~ .radiogroup-radio-container .radiogroup-radio {
+  outline: 1px auto -webkit-focus-ring-color;
+  outline-offset: 3px;
+}
+
+.radiogroup-option-label {
+  display: block;
+  font-size: 14px;
+  line-height: 20px;
+  color: rgba(0, 0, 0, 0.9);
+  flex-shrink: 1;
+  flex-grow: 2;
+}
+
+.radiogroup-option--disabled .radiogroup-option-label {
+  color: rgba(0, 0, 0, 0.55);
+}
+
+.radiogroup-description {
+  font-size: 12px;
+  line-height: 1.5;
+  color: rgba(0, 0, 0, 0.55);
+}
+
+.radiogroup-error {
+  font-size: 12px;
+  line-height: 1.5;
+  color: #d32f2f;
+}

package/dist/styles/spinner.css

@@ -0,0 +1,22 @@
+.spinner-container {
+  display: flex;
+  justify-content: flex-start;
+  align-items: center;
+  column-gap: 4px;
+}
+
+.spinner-icon {
+  width: 1em;
+  height: 1em;
+  animation: spin 2s linear infinite;
+  opacity: 1;
+}
+
+@keyframes spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}

package/dist/styles/statustag.css

@@ -0,0 +1,35 @@
+.statustag {
+  display: inline-flex;
+  align-items: center;
+  padding: 4px 12px;
+  font-size: 12px;
+  font-weight: 600;
+  line-height: 1.5;
+  border-radius: 12px;
+  font-family: 'Open Sans', sans-serif;
+}
+
+.statustag--success {
+  background-color: #e8f5e9;
+  color: #2e7d32;
+}
+
+.statustag--warning {
+  background-color: #fff3e0;
+  color: #e65100;
+}
+
+.statustag--error {
+  background-color: #ffebee;
+  color: #c62828;
+}
+
+.statustag--info {
+  background-color: #e3f2fd;
+  color: #1565c0;
+}
+
+.statustag--neutral {
+  background-color: rgba(0, 43, 62, 0.1);
+  color: rgba(0, 43, 62, 1);
+}