@salla.sa/twilight 1.0.6 → 1.0.8
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.
- package/package.json +1 -1
- package/components/package.json +0 -68
- package/components/src/_redirects +0 -5
- package/components/src/components/generate-summary.js +0 -35
- package/components/src/components/salla-login/readme.md +0 -18
- package/components/src/components/salla-login/salla-login.scss +0 -105
- package/components/src/components/salla-login/salla-login.tsx +0 -110
- package/components/src/components/search-modal/readme.md +0 -17
- package/components/src/components/search-modal/search-modal.scss +0 -37
- package/components/src/components/search-modal/search-modal.tsx +0 -182
- package/components/src/components/summary.json +0 -1
- package/components/src/components.d.ts +0 -76
- package/components/src/global/css/tailwind.min.css +0 -1
- package/components/src/global/variables.scss +0 -90
- package/components/src/index.html +0 -66
- package/components/src/index.ts +0 -8
- package/components/src/interfaces/colors.ts +0 -1
- package/components/src/interfaces/index.ts +0 -2
- package/components/src/interfaces/ratio.ts +0 -1
- package/components/src/tsconfig.app.json +0 -8
- package/components/src/utils/utils.spec.ts +0 -21
- package/components/src/utils/utils.ts +0 -20
|
@@ -1,90 +0,0 @@
|
|
|
1
|
-
/**
|
|
2
|
-
* Initial Variables
|
|
3
|
-
*/
|
|
4
|
-
|
|
5
|
-
// colors
|
|
6
|
-
$blue: #5cd5c4 !default;
|
|
7
|
-
$orange: #ff7d09 !default;
|
|
8
|
-
$green: #00c092 !default;
|
|
9
|
-
$yellow: #e8d700 !default;
|
|
10
|
-
$red: #d0021b !default;
|
|
11
|
-
|
|
12
|
-
$dark: black !default;
|
|
13
|
-
$light: white !default;
|
|
14
|
-
|
|
15
|
-
// sizes
|
|
16
|
-
$size-1: 3rem !default;
|
|
17
|
-
$size-2: 2.5rem !default;
|
|
18
|
-
$size-3: 2rem !default;
|
|
19
|
-
$size-4: 1.5rem !default;
|
|
20
|
-
$size-5: 1.25rem !default;
|
|
21
|
-
$size-6: 1rem !default;
|
|
22
|
-
$size-7: 0.75rem !default;
|
|
23
|
-
|
|
24
|
-
$accents-0: #fafafa;
|
|
25
|
-
$accents-1: #f5f5f5;
|
|
26
|
-
$accents-2: #eeeeee;
|
|
27
|
-
$accents-3: #e0e0e0;
|
|
28
|
-
$accents-4: #bdbdbd;
|
|
29
|
-
$accents-5: #757575;
|
|
30
|
-
$accents-6: #616161;
|
|
31
|
-
$accents-7: #424242;
|
|
32
|
-
$accents-8: #444444;
|
|
33
|
-
$accents-9: #212121;
|
|
34
|
-
|
|
35
|
-
/**
|
|
36
|
-
* Functions
|
|
37
|
-
*/
|
|
38
|
-
@function set-text-color($color) {
|
|
39
|
-
@if (lightness($color) > 60) {
|
|
40
|
-
@return $dark; // Lighter background, return dark color
|
|
41
|
-
} @else {
|
|
42
|
-
@return $light; // Darker background, return light color
|
|
43
|
-
}
|
|
44
|
-
}
|
|
45
|
-
|
|
46
|
-
/**
|
|
47
|
-
* Delivered variables
|
|
48
|
-
*/
|
|
49
|
-
$primary-bg: $blue !default;
|
|
50
|
-
$primary-color: set-text-color($primary-bg);
|
|
51
|
-
|
|
52
|
-
$secondary-bg: $orange !default;
|
|
53
|
-
$secondary-color: set-text-color($secondary-bg);
|
|
54
|
-
|
|
55
|
-
$success-bg: $green !default;
|
|
56
|
-
$success-color: set-text-color($success-bg);
|
|
57
|
-
|
|
58
|
-
$warning-bg: $yellow !default;
|
|
59
|
-
$warning-color: set-text-color($warning-bg);
|
|
60
|
-
|
|
61
|
-
$error-bg: $red !default;
|
|
62
|
-
$error-color: set-text-color($error-bg);
|
|
63
|
-
|
|
64
|
-
$light-bg: #e5e5e5;
|
|
65
|
-
$light-color: set-text-color($light-bg);
|
|
66
|
-
|
|
67
|
-
$info-bg: #53ff5c;
|
|
68
|
-
$info-color: set-text-color($info-bg);
|
|
69
|
-
|
|
70
|
-
$dark-bg: #5d5d5d;
|
|
71
|
-
$dark-color: set-text-color($dark-bg);
|
|
72
|
-
|
|
73
|
-
$black-bg: black;
|
|
74
|
-
$black-color: set-text-color($black-bg);
|
|
75
|
-
|
|
76
|
-
$white-bg: white;
|
|
77
|
-
$white-color: set-text-color($white-bg);
|
|
78
|
-
|
|
79
|
-
$colors: (
|
|
80
|
-
'primary': $primary-bg,
|
|
81
|
-
'secondary': $secondary-bg,
|
|
82
|
-
'success': $success-bg,
|
|
83
|
-
'warning': $warning-bg,
|
|
84
|
-
'error': $error-bg,
|
|
85
|
-
'info': $info-bg,
|
|
86
|
-
'dark': $dark-bg,
|
|
87
|
-
'black': $black-bg,
|
|
88
|
-
'white': $white-bg,
|
|
89
|
-
'default': $light-bg,
|
|
90
|
-
);
|
|
@@ -1,66 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html dir="ltr" lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="utf-8" />
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
|
6
|
-
|
|
7
|
-
<title>Salla Web Component Starter</title>
|
|
8
|
-
|
|
9
|
-
<script type="module" src="/build/salla-web-components.esm.js"></script>
|
|
10
|
-
<script nomodule src="/build/salla-web-components.js"></script>
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
<!-- example purpose -->
|
|
14
|
-
<!-- ======================== -->
|
|
15
|
-
<link href="https://unpkg.com/tailwindcss@^2/dist/tailwind.min.css" rel="stylesheet">
|
|
16
|
-
|
|
17
|
-
</head>
|
|
18
|
-
|
|
19
|
-
<body>
|
|
20
|
-
<div>
|
|
21
|
-
<salla-alert color="succes" rounded>
|
|
22
|
-
<strong>Holy guacamole 1!</strong> You should check in on some of those fields below.
|
|
23
|
-
</salla-alert>
|
|
24
|
-
<br />
|
|
25
|
-
|
|
26
|
-
<salla-search-modal search-placeholder="sdsdsdsd sd sd ds"></salla-search-modal>
|
|
27
|
-
|
|
28
|
-
<button onclick="openLoginModal()">Open salla-login</button>
|
|
29
|
-
<salla-login></salla-login>
|
|
30
|
-
</div>
|
|
31
|
-
|
|
32
|
-
<script>
|
|
33
|
-
|
|
34
|
-
|
|
35
|
-
let searchModal = document.querySelector('salla-search-modal');
|
|
36
|
-
function openModal() {
|
|
37
|
-
searchModal.setAttribute('visible', '');
|
|
38
|
-
}
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
//loginModal
|
|
43
|
-
let loginModal = document.querySelector('salla-login');
|
|
44
|
-
function openLoginModal() {
|
|
45
|
-
loginModal.setAttribute('visible', '');
|
|
46
|
-
}
|
|
47
|
-
loginModal.addEventListener('email', function () {
|
|
48
|
-
console.log('email');
|
|
49
|
-
});
|
|
50
|
-
loginModal.addEventListener('sms', function () {
|
|
51
|
-
console.log('sms');
|
|
52
|
-
});
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
</script>
|
|
57
|
-
|
|
58
|
-
<!-- Example Purpose -->
|
|
59
|
-
<!-- ======================== -->
|
|
60
|
-
<script src="https://cdnjs.cloudflare.com/ajax/libs/highlight.js/10.5.0/highlight.min.js"></script>
|
|
61
|
-
|
|
62
|
-
<script>
|
|
63
|
-
hljs.initHighlightingOnLoad();
|
|
64
|
-
</script>
|
|
65
|
-
</body>
|
|
66
|
-
</html>
|
package/components/src/index.ts
DELETED
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export type Color = 'primary' | 'secondary' | 'success' | 'warning' | 'error' | 'info' | 'default';
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export type Ratio = '1x1' | '5x4' | '5x3' | '3x2' | '16x9' | '2x1' | '3x1';
|
|
@@ -1,21 +0,0 @@
|
|
|
1
|
-
import { format } from './utils';
|
|
2
|
-
|
|
3
|
-
describe('format', () => {
|
|
4
|
-
it('returns empty string for no names defined', () => {
|
|
5
|
-
expect(format(undefined, undefined, undefined)).toEqual('');
|
|
6
|
-
});
|
|
7
|
-
|
|
8
|
-
it('formats just first names', () => {
|
|
9
|
-
expect(format('Joseph', undefined, undefined)).toEqual('Joseph');
|
|
10
|
-
});
|
|
11
|
-
|
|
12
|
-
it('formats first and last names', () => {
|
|
13
|
-
expect(format('Joseph', undefined, 'Publique')).toEqual('Joseph Publique');
|
|
14
|
-
});
|
|
15
|
-
|
|
16
|
-
it('formats first, middle and last names', () => {
|
|
17
|
-
expect(format('Joseph', 'Quincy', 'Publique')).toEqual(
|
|
18
|
-
'Joseph Quincy Publique'
|
|
19
|
-
);
|
|
20
|
-
});
|
|
21
|
-
});
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
export function format(first: string, middle: string, last: string): string {
|
|
2
|
-
return (first || '') + (middle ? ` ${middle}` : '') + (last ? ` ${last}` : '');
|
|
3
|
-
}
|
|
4
|
-
|
|
5
|
-
export const toInteger = (value: string, defaultValue = NaN) => {
|
|
6
|
-
const integer = parseInt(value, 10);
|
|
7
|
-
return isNaN(integer) ? defaultValue : integer;
|
|
8
|
-
};
|
|
9
|
-
|
|
10
|
-
export const validateInput = event => {
|
|
11
|
-
const isValid = true;
|
|
12
|
-
const errors = [];
|
|
13
|
-
|
|
14
|
-
// check if email or url matched
|
|
15
|
-
if (event.target.validity.typeMismatch) {
|
|
16
|
-
errors.push('mismatched');
|
|
17
|
-
}
|
|
18
|
-
|
|
19
|
-
return { isValid, errors };
|
|
20
|
-
};
|