@bikdotai/bik-widgets 1.0.0

package/src/components/couponDetails/couponPreviewMobile.module.css

@@ -0,0 +1,164 @@
+.winningScreenIconWrapper {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+  margin-bottom: 4px;
+  align-items: center;
+}
+
+#couponScreenTitleWrapper p {
+  margin-bottom: 0;
+  font-family: inherit;
+}
+
+.winningScreenIcon {
+  height: 24px;
+  width: auto;
+}
+
+.bikWrapper svg {
+  width: 45px;
+  height: 45px;
+  margin-bottom: 0;
+}
+
+#bikHeader {
+  font-family: inherit;
+  font-style: normal;
+  font-weight: 600;
+  font-size: 10px;
+  line-height: 10px;
+  text-align: center;
+  font-feature-settings:
+    'tnum' on,
+    'lnum' on,
+    'case' on,
+    'ss04' on;
+  color: #212121;
+  margin: 0;
+}
+
+#bikSubheader {
+  font-feature-settings:
+    'tnum' on,
+    'lnum' on,
+    'case' on,
+    'ss04' on;
+  text-align: center;
+  font-weight: 400;
+  font-size: 8px;
+  line-height: 8px;
+  margin: 4px 0 8px;
+  font-family: inherit;
+}
+
+.bikContainerPadding {
+  padding: 30px;
+}
+
+#bikDiscountCodeDetails {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding: 8px;
+  gap: 8px;
+  width: 100%;
+  min-height: 50px;
+  background: #e6f4e7;
+  border-radius: 4px;
+  font-family: inherit;
+  text-align: center;
+}
+
+#bikDiscountCouponName {
+  color: #212121;
+  line-height: 8px;
+  margin: 0;
+  font-family: inherit;
+  text-align: center;
+}
+
+#bikDiscountCouponDetail {
+  color: #616161;
+  line-height: 10px;
+  margin: 0;
+  font-family: inherit;
+}
+
+#bikFooterLastPage {
+  font-family: inherit;
+}
+
+.font14 {
+  font-size: 8px;
+}
+
+.font10 {
+  font-size: 10px;
+  line-height: 12px;
+}
+
+.fontWeight400 {
+  font-weight: 400;
+}
+
+.fontWeight600 {
+  font-weight: 600;
+}
+
+.poweredBy {
+  color: #9e9e9e;
+  font-weight: 400;
+  font-size: 10px;
+  line-height: 12px;
+  margin-top: 8px;
+  margin-bottom: 0;
+  pointer-events: none;
+  text-align: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.poweredBy a {
+  color: #9e9e9e;
+  pointer-events: none;
+  text-decoration: none;
+  margin-right: 4px;
+}
+
+.poweredBy svg {
+  width: 20px;
+  height: 20px;
+  margin: 0;
+}
+
+.bikCloseBtn {
+  width: 18px;
+  height: 18px;
+  border-radius: 50%;
+  background-color: #fff;
+  margin-bottom: 11px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+  pointer-events: none;
+}
+
+#bikayiBtn {
+  padding: 4px 12px;
+  border: none;
+  border-radius: 8px;
+  outline: none;
+  width: 100%;
+  color: #fff;
+  margin-top: 8px;
+  cursor: pointer;
+  background: #731dcf;
+  font-weight: 600;
+  font-size: 10px;
+  line-height: 20px;
+  font-family: inherit;
+  pointer-events: none;
+}

package/src/components/index.ts

@@ -0,0 +1,3 @@
+import Fab from './Fab';
+
+export { Fab };

package/src/components/inputComponents/Checkbox.module.css

@@ -0,0 +1,197 @@
+.bik-checkbox__container {
+  /* Colors */
+  --bik-checkbox-primary: #000;
+  --bik-checkbox-background: #fff;
+  --bik-checkbox-text: #1f2937;
+
+  /* Border colors */
+  --bik-checkbox-border-default: #e0e0e0;
+  --bik-checkbox-border-hover: #000;
+
+  /* Disabled state colors */
+  --bik-checkbox-disabled-background: #f3f4f6;
+  --bik-checkbox-disabled-border: #d1d5db;
+  --bik-checkbox-disabled-checked: #9ca3af;
+  --bik-checkbox-disabled-text: #9ca3af;
+
+  /* Sizing */
+  --bik-checkbox-size: 14px;
+  --bik-checkbox-input-size: 16px;
+  --bik-checkbox-border-width: 2px;
+  --bik-checkbox-border-radius: 3px;
+
+  /* Spacing */
+  --bik-checkbox-gap: 8px;
+  --bik-checkbox-label-gap: 4px;
+
+  /* Typography */
+  --bik-checkbox-font-size: 14px;
+  --bik-checkbox-line-height: 1.5;
+  --bik-checkbox-font-weight: 400;
+
+  /* Interaction */
+  --bik-checkbox-transition: all 0.2s ease;
+  --bik-checkbox-focus-outline-width: 2px;
+  --bik-checkbox-focus-outline-offset: 2px;
+
+  /* Preview mode variations */
+  --bik-checkbox-size-preview: 10px;
+  --bik-checkbox-input-size-preview: 12px;
+  --bik-checkbox-border-width-preview: 1px;
+  --bik-checkbox-gap-preview: 4px;
+  --bik-checkbox-font-size-preview: 8px;
+  --bik-checkbox-font-size-preview-mobile: 7px;
+
+  position: relative;
+  margin: 8px 0;
+  width: 100%;
+}
+
+.bik-checkbox__wrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--bik-checkbox-gap);
+  cursor: pointer;
+}
+
+.bik-checkbox__inputWrapper {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.bik-checkbox__input {
+  position: absolute;
+  opacity: 0;
+  width: var(--bik-checkbox-input-size) !important;
+  height: var(--bik-checkbox-input-size) !important;
+  margin: 0 !important;
+  cursor: pointer;
+}
+
+.bik-checkbox__checkmark {
+  width: var(--bik-checkbox-size);
+  height: var(--bik-checkbox-size);
+  border: var(--bik-checkbox-border-width) solid
+    var(--bik-checkbox-border-default);
+  border-radius: var(--bik-checkbox-border-radius);
+  background: var(--bik-checkbox-background);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  color: var(--bik-checkbox-background);
+  transition: var(--bik-checkbox-transition);
+}
+
+.bik-checkbox__label {
+  font-weight: var(--bik-checkbox-font-weight);
+  font-size: var(--bik-checkbox-font-size);
+  line-height: var(--bik-checkbox-line-height);
+  color: var(--bik-checkbox-text);
+  cursor: pointer;
+  user-select: none;
+  transition: var(--bik-checkbox-transition);
+}
+
+.bik-checkbox__labelContainer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--bik-checkbox-label-gap);
+  flex: 1;
+}
+
+.bik-checkbox__wrapper:hover:not(.bik-checkbox__wrapper--disabled)
+  .bik-checkbox__checkmark {
+  border-color: var(--bik-checkbox-border-hover);
+}
+
+.bik-checkbox__input:focus + .bik-checkbox__checkmark {
+  outline: var(--bik-checkbox-focus-outline-width) solid
+    var(--bik-checkbox-primary);
+  outline-offset: var(--bik-checkbox-focus-outline-offset);
+}
+
+.bik-checkbox__input:focus:not(:focus-visible) + .bik-checkbox__checkmark {
+  outline: none;
+}
+
+.bik-checkbox__input:checked + .bik-checkbox__checkmark {
+  background: var(--bik-checkbox-primary);
+  border-color: var(--bik-checkbox-primary);
+}
+
+.bik-checkbox__wrapper--disabled {
+  cursor: not-allowed;
+}
+
+.bik-checkbox__wrapper--disabled .bik-checkbox__input,
+.bik-checkbox__wrapper--disabled .bik-checkbox__label {
+  cursor: not-allowed;
+}
+
+.bik-checkbox__wrapper--disabled .bik-checkbox__checkmark {
+  background: var(--bik-checkbox-disabled-background);
+  border-color: var(--bik-checkbox-disabled-border);
+}
+
+.bik-checkbox__wrapper--disabled
+  .bik-checkbox__input:checked
+  + .bik-checkbox__checkmark {
+  background: var(--bik-checkbox-disabled-checked);
+  border-color: var(--bik-checkbox-disabled-checked);
+}
+
+.bik-checkbox__wrapper--disabled .bik-checkbox__label {
+  color: var(--bik-checkbox-disabled-text);
+}
+
+.bik-checkbox__container[data-mode='preview'] {
+  margin: 4px 0;
+}
+
+.bik-checkbox__container[data-mode='preview'] .bik-checkbox__wrapper {
+  gap: var(--bik-checkbox-gap-preview);
+}
+
+.bik-checkbox__container[data-mode='preview'] .bik-checkbox__checkmark {
+  width: var(--bik-checkbox-size-preview);
+  height: var(--bik-checkbox-size-preview);
+  border-width: var(--bik-checkbox-border-width-preview);
+}
+
+.bik-checkbox__container[data-mode='preview'] .bik-checkbox__input {
+  width: var(--bik-checkbox-input-size-preview);
+  height: var(--bik-checkbox-input-size-preview);
+}
+
+.bik-checkbox__container[data-mode='preview'] .bik-checkbox__label {
+  font-size: var(--bik-checkbox-font-size-preview);
+  line-height: 1.2;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .bik-checkbox__container .bik-checkbox__checkmark,
+  .bik-checkbox__container .bik-checkbox__label {
+    transition: none;
+  }
+}
+
+@media (prefers-contrast: high) {
+  .bik-checkbox__container {
+    --bik-checkbox-border-width: 3px;
+  }
+
+  .bik-checkbox__label {
+    font-weight: 600;
+  }
+}
+
+@media (max-width: 768px) {
+  .bik-checkbox__container[data-mode='preview'] .bik-checkbox__label {
+    font-size: var(--bik-checkbox-font-size-preview-mobile);
+  }
+}

package/src/components/inputComponents/Checkbox.tsx

@@ -0,0 +1,85 @@
+import React, { useCallback, useMemo } from 'react';
+import styles from './Checkbox.module.css';
+import CheckIcon from '../../assets/svg/CheckIcon';
+
+export interface CheckboxProps {
+  id: string;
+  checked: boolean;
+  label: string;
+  onChange: (checked: boolean) => void;
+  disabled?: boolean;
+  iconSize?: number;
+  isPreview?: boolean;
+  fontColour?: string;
+}
+
+const Checkbox: React.FC<CheckboxProps> = ({
+  id,
+  checked,
+  label,
+  onChange,
+  disabled = false,
+  iconSize = 14,
+  isPreview = false,
+  fontColour,
+}) => {
+  const wrapperClasses = useMemo(() => {
+    return [
+      styles['bik-checkbox__wrapper'],
+      disabled && styles['bik-checkbox__wrapper--disabled'],
+    ]
+      .filter(Boolean)
+      .join(' ');
+  }, [disabled]);
+
+  const handleInputChange = useCallback(
+    event => {
+      if (!disabled) {
+        onChange(event.target.checked);
+      }
+    },
+    [disabled],
+  );
+
+  return (
+    <div
+      className={styles['bik-checkbox__container']}
+      data-mode={isPreview ? 'preview' : 'default'}
+    >
+      <div className={wrapperClasses}>
+        <div className={styles['bik-checkbox__inputWrapper']}>
+          <input
+            id={id}
+            type="checkbox"
+            checked={checked}
+            onChange={handleInputChange}
+            disabled={disabled}
+            className={styles['bik-checkbox__input']}
+          />
+
+          <div
+            className={styles['bik-checkbox__checkmark']}
+            style={{
+              width: iconSize + 2,
+              height: iconSize + 2,
+            }}
+          >
+            <CheckIcon size={iconSize} />
+          </div>
+        </div>
+
+        {label && (
+          <div className={styles['bik-checkbox__labelContainer']}>
+            <div
+              className={styles['bik-checkbox__label']}
+              style={{ color: fontColour }}
+            >
+              {label}
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};
+export default Checkbox;