@softwareone/spi-sv5-library 0.0.12 → 0.1.0

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 (19) hide show
  1. package/README.md +16 -30
  2. package/dist/Breadcrumbs/Breadcrumbs.svelte +16 -16
  3. package/dist/Button/Button.svelte +166 -166
  4. package/dist/Card/Card.svelte +3 -2
  5. package/dist/Chips/Chips.svelte +12 -13
  6. package/dist/Footer/Footer.svelte +143 -0
  7. package/dist/Footer/Footer.svelte.d.ts +6 -0
  8. package/dist/Header/Header.svelte +1 -1
  9. package/dist/Header/HeaderAccount.svelte +5 -5
  10. package/dist/Header/HeaderLoader.svelte +3 -3
  11. package/dist/Modal/Modal.svelte +2 -3
  12. package/dist/Modal/ModalContent.svelte +4 -4
  13. package/dist/Modal/ModalFooter.svelte +2 -2
  14. package/dist/Modal/ModalHeader.svelte +2 -2
  15. package/dist/Toast/Toast.svelte +7 -3
  16. package/dist/Toast/Toast.svelte.d.ts +4 -4
  17. package/dist/index.d.ts +2 -1
  18. package/dist/index.js +2 -1
  19. package/package.json +3 -3
package/README.md CHANGED
@@ -10,41 +10,26 @@ To install the library, use the following command:
10
10
  npm install @softwareone/swo-spi-svelte5-library
11
11
  ```
12
12
 
13
- ### Optional but recommened is modify app.html
14
-
15
- ```diff
16
- <!doctype html>
17
- <html lang="en">
18
- <head>
19
- <meta charset="utf-8" />
20
- <link rel="icon" href="%sveltekit.assets%/favicon.png" />
21
- + <link rel="stylesheet" href="https://fonts.cdnfonts.com/css/neue-haas-grotesk-display-pro" >
22
- <meta name="viewport" content="width=device-width, initial-scale=1" />
23
- %sveltekit.head%
24
- </head>
25
- <body data-sveltekit-preload-data="hover">
26
- <div>%sveltekit.body%</div>
27
- </body>
28
- </html>
29
- ```
30
-
31
13
  ## Usage
32
14
 
33
15
  Import the components you need into your Svelte application:
34
16
 
35
17
  ```javascript
36
- import {
37
- Button,
38
- Modal,
39
- Spinner,
40
- Toaster,
41
- addToast,
42
- type Toast,
43
- Toggle,
44
- Header,
45
- Chips,
46
- Card,
47
- } from "@softwareone/swo-spi-svelte5-library";
18
+ import { Button,
19
+ Modal,
20
+ Spinner,
21
+ Toaster,
22
+ addToast,
23
+ type Toast,
24
+ Toggle,
25
+ Header,
26
+ Chips,
27
+ Breadcrumbs,
28
+ addBreadcrumbsNameMap,
29
+ type BreadcrumbsNameMap,
30
+ Footer,
31
+ Card
32
+ } from '@softwareone/swo-spi-svelte5-library';
48
33
  ```
49
34
 
50
35
  # List of components
@@ -57,4 +42,5 @@ import {
57
42
  - Header (including a loader)
58
43
  - Breadcrumbs
59
44
  - Chips
45
+ - Footer
60
46
  - Card
package/dist/Breadcrumbs/Breadcrumbs.svelte CHANGED
@@ -40,19 +40,19 @@
40
40
  padding: 8px 16px;
41
41
  color: var(--brand-primary, #472aff);
42
42
  /* regular/2 */
43
- font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
43
+ font-family: 'Haas Grotesk Display Pro', sans-serif;
44
44
  font-size: 14px;
45
45
  font-style: normal;
46
46
  font-weight: 400;
47
47
  line-height: 20px; /* 142.857% */
48
- text-decoration-line: none;
48
+ text-decoration-line: none;
49
49
  }
50
50
  .breadcrumb li::after {
51
51
  content: '/';
52
52
  margin-left: 8px;
53
53
  color: var(--brand-primary, #472aff);
54
54
  /* regular/2 */
55
- font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
55
+ font-family: 'Haas Grotesk Display Pro', sans-serif;
56
56
  font-size: 14px;
57
57
  font-style: normal;
58
58
  font-weight: 400;
@@ -64,24 +64,24 @@
64
64
  .breadcrumbActive {
65
65
  color: var(--brand-type, #000);
66
66
  /* bold/4 */
67
- font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
67
+ font-family: 'Haas Grotesk Display Pro', sans-serif;
68
68
  font-size: 18px;
69
69
  font-style: normal;
70
70
  font-weight: 700;
71
71
  line-height: 20px; /* 144.444% */
72
72
  }
73
- /* Prevent the visited (purple) color */
74
- .breadcrumb a {
75
- color: inherit; /* Keeps the same color as the parent */
76
- text-decoration: none; /* Optional: removes underline */
77
- }
73
+ /* Prevent the visited (purple) color */
74
+ .breadcrumb a {
75
+ color: inherit; /* Keeps the same color as the parent */
76
+ text-decoration: none; /* Optional: removes underline */
77
+ }
78
78
 
79
- .breadcrumb a:visited {
80
- color: inherit; /* Ensures visited links don't change color */
81
- }
79
+ .breadcrumb a:visited {
80
+ color: inherit; /* Ensures visited links don't change color */
81
+ }
82
82
 
83
- .breadcrumb a:hover {
84
- text-decoration: none; /* Optional: Add an underline on hover */
85
- color: #2B1999
86
- }
83
+ .breadcrumb a:hover {
84
+ text-decoration: none; /* Optional: Add an underline on hover */
85
+ color: #2b1999;
86
+ }
87
87
  </style>
package/dist/Button/Button.svelte CHANGED
@@ -1,172 +1,172 @@
1
1
  <script lang="ts">
2
- interface ButtonProps {
3
- type?: 'primary' | 'secondary' | 'outline'
4
- variant?: 'primary' | 'danger';
5
- disabled?: boolean
6
- onClick?: () => void;
7
- name?: string;
8
- }
9
-
10
- let { type, variant, disabled, onClick, name }: ButtonProps = $props();
11
-
12
- type = type || 'primary';
13
- variant = variant || 'primary';
14
- disabled = disabled || false;
15
- name = name || 'Button';
16
-
17
- let className = `btn-${type}-${variant}`;
2
+ interface ButtonProps {
3
+ type?: 'primary' | 'secondary' | 'outline';
4
+ variant?: 'primary' | 'danger';
5
+ disabled?: boolean;
6
+ onClick?: () => void;
7
+ name?: string;
8
+ }
9
+
10
+ let { type, variant, disabled, onClick, name }: ButtonProps = $props();
11
+
12
+ type = type || 'primary';
13
+ variant = variant || 'primary';
14
+ disabled = disabled || false;
15
+ name = name || 'Button';
16
+
17
+ let className = `btn-${type}-${variant}`;
18
18
  </script>
19
19
 
20
- <button class={className} disabled={disabled} onclick={onClick}>{name}</button>
20
+ <button class={className} {disabled} onclick={onClick}>{name}</button>
21
21
 
22
22
  <style>
23
- .btn-primary-primary,
24
- .btn-secondary-primary,
25
- .btn-outline-primary,
26
- .btn-primary-danger,
27
- .btn-secondary-danger,
28
- .btn-outline-danger {
29
- display: inline-flex;
30
- padding: 8px 16px;
31
- align-items: flex-start;
32
- gap: 8px;
33
- border-radius: 8px;
34
- border: none;
35
- font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
36
- font-size: 14px;
37
- font-style: normal;
38
- font-weight: 400;
39
- line-height: 20px; /* 142.857% */
40
- }
41
-
42
- .btn-primary-primary {
43
- background: var(--brand-primary, #472aff);
44
- color: var(--brand-white, #fff);
45
- }
46
-
47
- .btn-primary-primary:hover,
48
- .btn-primary-primary:focus {
49
- background: var(--brand-primary, #3520bf);
50
- cursor: pointer;
51
- }
52
-
53
- .btn-primary-primary:focus {
54
- box-shadow: 0px 0px 0px 3px #959bff;
55
- }
56
-
57
- .btn-primary-primary:disabled {
58
- background: var(--brand-primary, #e0e5e8);
59
- color: var(--brand-white, #6b7180);
60
- cursor: not-allowed;
61
- }
62
-
63
- .btn-secondary-primary {
64
- background: var(--brand-primary, #eaecff);
65
- color: var(--brand-white, #472aff);
66
- }
67
-
68
- .btn-secondary-primary:hover,
69
- .btn-secondary-primary:focus {
70
- background: var(--brand-primary, #472aff);
71
- color: var(--brand-white, #fff);
72
- cursor: pointer;
73
- }
74
-
75
- .btn-secondary-primary:focus {
76
- box-shadow: 0px 0px 0px 3px #959bff;
77
- }
78
-
79
- .btn-secondary-primary:disabled {
80
- background: var(--brand-primary, #e0e5e8);
81
- color: var(--brand-white, #6b7180);
82
- cursor: not-allowed;
83
- }
84
-
85
- .btn-outline-primary {
86
- border: 1px solid var(--brand-primary, #472aff);
87
- background: var(--brand-primary, #fff);
88
- color: var(--brand-primary, #472aff);
89
- }
90
-
91
- .btn-outline-primary:hover,
92
- .btn-outline-primary:focus {
93
- background: var(--brand-primary, #eaecff);
94
- cursor: pointer;
95
- }
96
-
97
- .btn-outline-primary:focus {
98
- box-shadow: 0px 0px 0px 3px #959bff;
99
- }
100
-
101
- .btn-outline-primary:disabled {
102
- background: var(--brand-primary, #e0e5e8);
103
- color: var(--brand-white, #6b7180);
104
- cursor: not-allowed;
105
- }
106
-
107
- .btn-primary-danger {
108
- background: var(--brand-primary, #DC182C);
109
- color: var(--brand-white, #fff);
110
- }
111
-
112
- .btn-primary-danger:hover,
113
- .btn-primary-danger:focus {
114
- background: var(--brand-primary, #BB1425);
115
- cursor: pointer;
116
- }
117
-
118
- .btn-primary-danger:focus {
119
- box-shadow: 0px 0px 0px 3px #959bff;
120
- }
121
-
122
- .btn-primary-danger:disabled {
123
- background: var(--brand-primary, #e0e5e8);
124
- color: var(--brand-white, #6b7180);
125
- cursor: not-allowed;
126
- }
127
-
128
- .btn-secondary-danger {
129
- background: var(--brand-primary, #FCE8EA);
130
- color: var(--brand-white, #DC182C);
131
- }
132
-
133
- .btn-secondary-danger:hover,
134
- .btn-secondary-danger:focus {
135
- background: var(--brand-primary, #DC182C);
136
- color: var(--brand-white, #fff);
137
- cursor: pointer;
138
- }
139
-
140
- .btn-secondary-danger:focus {
141
- box-shadow: 0px 0px 0px 3px #959bff;
142
- }
143
-
144
- .btn-secondary-danger:disabled {
145
- background: var(--brand-primary, #e0e5e8);
146
- color: var(--brand-white, #6b7180);
147
- cursor: not-allowed;
148
- }
149
-
150
- .btn-outline-danger {
151
- border: 1px solid var(--brand-primary, #DC182C);
152
- background: var(--brand-primary, #fff);
153
- color: var(--brand-primary, #DC182C);
154
- }
155
-
156
- .btn-outline-danger:hover,
157
- .btn-outline-danger:focus {
158
- background: var(--brand-primary, #FCE8EA);
159
- cursor: pointer;
160
- }
161
-
162
- .btn-outline-danger:focus {
163
- box-shadow: 0px 0px 0px 3px #959bff;
164
- }
165
-
166
- .btn-outline-danger:disabled {
167
- background: var(--brand-primary, #e0e5e8);
168
- color: var(--brand-white, #6b7180);
169
- cursor: not-allowed;
170
- border: none;
171
- }
23
+ .btn-primary-primary,
24
+ .btn-secondary-primary,
25
+ .btn-outline-primary,
26
+ .btn-primary-danger,
27
+ .btn-secondary-danger,
28
+ .btn-outline-danger {
29
+ display: inline-flex;
30
+ padding: 8px 16px;
31
+ align-items: flex-start;
32
+ gap: 8px;
33
+ border-radius: 8px;
34
+ border: none;
35
+ font-family: 'Haas Grotesk Display Pro', sans-serif;
36
+ font-size: 14px;
37
+ font-style: normal;
38
+ font-weight: 400;
39
+ line-height: 20px; /* 142.857% */
40
+ }
41
+
42
+ .btn-primary-primary {
43
+ background: var(--brand-primary, #472aff);
44
+ color: var(--brand-white, #fff);
45
+ }
46
+
47
+ .btn-primary-primary:hover,
48
+ .btn-primary-primary:focus {
49
+ background: var(--brand-primary, #3520bf);
50
+ cursor: pointer;
51
+ }
52
+
53
+ .btn-primary-primary:focus {
54
+ box-shadow: 0px 0px 0px 3px #959bff;
55
+ }
56
+
57
+ .btn-primary-primary:disabled {
58
+ background: var(--brand-primary, #e0e5e8);
59
+ color: var(--brand-white, #6b7180);
60
+ cursor: not-allowed;
61
+ }
62
+
63
+ .btn-secondary-primary {
64
+ background: var(--brand-primary, #eaecff);
65
+ color: var(--brand-white, #472aff);
66
+ }
67
+
68
+ .btn-secondary-primary:hover,
69
+ .btn-secondary-primary:focus {
70
+ background: var(--brand-primary, #472aff);
71
+ color: var(--brand-white, #fff);
72
+ cursor: pointer;
73
+ }
74
+
75
+ .btn-secondary-primary:focus {
76
+ box-shadow: 0px 0px 0px 3px #959bff;
77
+ }
78
+
79
+ .btn-secondary-primary:disabled {
80
+ background: var(--brand-primary, #e0e5e8);
81
+ color: var(--brand-white, #6b7180);
82
+ cursor: not-allowed;
83
+ }
84
+
85
+ .btn-outline-primary {
86
+ border: 1px solid var(--brand-primary, #472aff);
87
+ background: var(--brand-primary, #fff);
88
+ color: var(--brand-primary, #472aff);
89
+ }
90
+
91
+ .btn-outline-primary:hover,
92
+ .btn-outline-primary:focus {
93
+ background: var(--brand-primary, #eaecff);
94
+ cursor: pointer;
95
+ }
96
+
97
+ .btn-outline-primary:focus {
98
+ box-shadow: 0px 0px 0px 3px #959bff;
99
+ }
100
+
101
+ .btn-outline-primary:disabled {
102
+ background: var(--brand-primary, #e0e5e8);
103
+ color: var(--brand-white, #6b7180);
104
+ cursor: not-allowed;
105
+ }
106
+
107
+ .btn-primary-danger {
108
+ background: var(--brand-primary, #dc182c);
109
+ color: var(--brand-white, #fff);
110
+ }
111
+
112
+ .btn-primary-danger:hover,
113
+ .btn-primary-danger:focus {
114
+ background: var(--brand-primary, #bb1425);
115
+ cursor: pointer;
116
+ }
117
+
118
+ .btn-primary-danger:focus {
119
+ box-shadow: 0px 0px 0px 3px #959bff;
120
+ }
121
+
122
+ .btn-primary-danger:disabled {
123
+ background: var(--brand-primary, #e0e5e8);
124
+ color: var(--brand-white, #6b7180);
125
+ cursor: not-allowed;
126
+ }
127
+
128
+ .btn-secondary-danger {
129
+ background: var(--brand-primary, #fce8ea);
130
+ color: var(--brand-white, #dc182c);
131
+ }
132
+
133
+ .btn-secondary-danger:hover,
134
+ .btn-secondary-danger:focus {
135
+ background: var(--brand-primary, #dc182c);
136
+ color: var(--brand-white, #fff);
137
+ cursor: pointer;
138
+ }
139
+
140
+ .btn-secondary-danger:focus {
141
+ box-shadow: 0px 0px 0px 3px #959bff;
142
+ }
143
+
144
+ .btn-secondary-danger:disabled {
145
+ background: var(--brand-primary, #e0e5e8);
146
+ color: var(--brand-white, #6b7180);
147
+ cursor: not-allowed;
148
+ }
149
+
150
+ .btn-outline-danger {
151
+ border: 1px solid var(--brand-primary, #dc182c);
152
+ background: var(--brand-primary, #fff);
153
+ color: var(--brand-primary, #dc182c);
154
+ }
155
+
156
+ .btn-outline-danger:hover,
157
+ .btn-outline-danger:focus {
158
+ background: var(--brand-primary, #fce8ea);
159
+ cursor: pointer;
160
+ }
161
+
162
+ .btn-outline-danger:focus {
163
+ box-shadow: 0px 0px 0px 3px #959bff;
164
+ }
165
+
166
+ .btn-outline-danger:disabled {
167
+ background: var(--brand-primary, #e0e5e8);
168
+ color: var(--brand-white, #6b7180);
169
+ cursor: not-allowed;
170
+ border: none;
171
+ }
172
172
  </style>
package/dist/Card/Card.svelte CHANGED
@@ -1,6 +1,6 @@
1
1
  <script lang="ts">
2
2
  import type { Snippet } from 'svelte';
3
- import { get } from 'svelte/store';
3
+
4
4
  interface CardProps {
5
5
  alignItems?: 'left' | 'center' | 'right';
6
6
  type?: 'default' | 'layout';
@@ -34,6 +34,7 @@
34
34
  display: inline-flex;
35
35
  margin-left: 24px;
36
36
  margin-right: 48px;
37
+ margin-bottom: 24px;
37
38
  min-width: 222px;
38
39
  min-height: 222px;
39
40
  flex-direction: column;
@@ -44,7 +45,7 @@
44
45
  0px 1px 3px 0px rgba(107, 113, 128, 0.2);
45
46
  }
46
47
  .card-layout {
47
- height: calc(100vh - 17rem - 48px);
48
+ height: calc(100vh);
48
49
  width: calc(100% - 48px);
49
50
  }
50
51
  .card[data-align='left'],
package/dist/Chips/Chips.svelte CHANGED
@@ -24,7 +24,7 @@
24
24
  align-items: center;
25
25
  gap: 8px;
26
26
  border-radius: 4px;
27
- font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
27
+ font-family: 'Haas Grotesk Display Pro', sans-serif;
28
28
  font-size: 14px;
29
29
  font-style: normal;
30
30
  font-weight: 400;
@@ -52,27 +52,26 @@
52
52
  }
53
53
 
54
54
  .chip-success {
55
- --chip-bg: var(--alerts-success-1, #E6F9F2);
56
- --chip-text: var(--alerts-success-3, #00784D);
57
- --chip-hover: var(--alerts-success-2, #80E1AE);
55
+ --chip-bg: var(--alerts-success-1, #e6f9f2);
56
+ --chip-text: var(--alerts-success-3, #00784d);
57
+ --chip-hover: var(--alerts-success-2, #80e1ae);
58
58
  }
59
59
 
60
60
  .chip-warning {
61
- --chip-bg: var(--alerts-warning-1, #FDF2E9);
62
- --chip-text: var(--alerts-warning-3, #A15D26);
63
- --chip-hover: var(--alerts-warning-2, #F1B178);
61
+ --chip-bg: var(--alerts-warning-1, #fdf2e9);
62
+ --chip-text: var(--alerts-warning-3, #a15d26);
63
+ --chip-hover: var(--alerts-warning-2, #f1b178);
64
64
  }
65
65
 
66
66
  .chip-error {
67
- --chip-bg: var(--alerts-error-1, #FCE8EA);
68
- --chip-text: var(--alerts-error-3, #BB1425);
69
- --chip-hover: var(--alerts-error-2, #EE8C96);
67
+ --chip-bg: var(--alerts-error-1, #fce8ea);
68
+ --chip-text: var(--alerts-error-3, #bb1425);
69
+ --chip-hover: var(--alerts-error-2, #ee8c96);
70
70
  }
71
71
 
72
72
  .chip-neutral {
73
- --chip-bg: var(--alerts-neutral-1, #F4F6F8);
73
+ --chip-bg: var(--alerts-neutral-1, #f4f6f8);
74
74
  --chip-text: var(--alerts-neutral-3, #434952);
75
- --chip-hover: var(--alerts-neutral-2, #E0E5E8);
75
+ --chip-hover: var(--alerts-neutral-2, #e0e5e8);
76
76
  }
77
77
  </style>
78
-
package/dist/Footer/Footer.svelte ADDED
@@ -0,0 +1,143 @@
1
+ <script lang="ts">
2
+ interface FooterProps {
3
+ isInternal?: boolean;
4
+ }
5
+
6
+ let { isInternal }: FooterProps = $props();
7
+
8
+ isInternal = isInternal ?? false;
9
+ </script>
10
+
11
+ {#if isInternal}
12
+ <div class="footer">
13
+ <section class="footer-section">
14
+ <article class="footer-logo">
15
+ <img alt="SoftwareOne logo" class="logo-image" src="/softwareone-logo-white.svg" />
16
+ </article>
17
+ <article class="footer-links">
18
+ <a class="footer-link" href="mailto:support@softwareone.com" title="support@softwareone.com"
19
+ >Support</a
20
+ >
21
+ <a
22
+ class="footer-link"
23
+ href="https://softwareone.atlassian.net/wiki/spaces/MA/pages/4642996240/GDAP+Manual"
24
+ title="https://softwareone.atlassian.net/wiki/spaces/MA/pages/4642996240/GDAP+Manual"
25
+ target="_blank">Documentation</a
26
+ >
27
+ </article>
28
+ <article class="footer-links">
29
+ <div class="footer-link">Privacy Supplement - Cloud Control Platform</div>
30
+ <div class="footer-link">© 2024 SoftwareOne. All rights reserved</div>
31
+ </article>
32
+ </section>
33
+ </div>
34
+ {:else}
35
+ <div class="logo-legal-section">
36
+ <div class="logo">
37
+ <div class="powered-by">Powered by</div>
38
+ <div class="software-one">
39
+ <svg
40
+ width="120"
41
+ height="43"
42
+ viewBox="0 0 120 43"
43
+ fill="none"
44
+ xmlns="http://www.w3.org/2000/svg"
45
+ >
46
+ <path
47
+ d="M41.7916 25.2245C39.8995 35.1656 31.1792 42.3529 21.0878 42.3529C9.4607 42.3529 0 32.8524 0 21.1765C0 9.47296 9.4607 0 21.0878 0C31.2066 0 39.8995 7.18733 41.7916 17.1284V1.18412H53.7752V6.08583C57.1207 1.87256 60.85 0 65.8135 0C74.5338 0 79.936 6.33366 79.936 16.5777V17.3212C81.5813 6.91196 89.6983 0 100.338 0C112.02 0 120 8.83959 120 21.7272V24.3984H91.5905C92.4406 30.2364 95.8409 33.5684 100.941 33.5684C104.671 33.5684 107.358 31.8335 108.181 28.8595H119.452C117.861 36.9556 110.402 42.3529 100.777 42.3529C89.9726 42.3529 81.6087 35.4134 79.936 25.0593V41.1688H67.7605V17.8444C67.7605 12.8326 65.2925 10.0513 60.8775 10.0513C56.7368 10.0513 53.9946 13.1355 53.9946 17.8444V41.1688H41.7916V25.2245ZM108.099 16.6878C107.331 11.4832 104.369 8.45407 100.091 8.45407C95.7861 8.45407 92.7696 11.4281 91.7824 16.6878H108.099Z"
48
+ fill="black"
49
+ />
50
+ <path
51
+ d="M1.63617 21.8654H3.15125C3.24533 22.3776 3.53745 22.6013 4.1316 22.6013C4.62673 22.6013 4.95351 22.3477 4.95351 21.9599C4.95351 21.6765 4.73565 21.4925 4.29994 21.4179L3.71074 21.3185C2.35905 21.0898 1.76985 20.5876 1.76985 19.6628C1.76985 18.6833 2.72049 17.9922 4.06723 17.9922C5.42388 17.9922 6.23588 18.5441 6.41908 19.5982H4.91885C4.84953 19.1855 4.54751 18.9617 4.05733 18.9617C3.59687 18.9617 3.25523 19.2302 3.25523 19.5932C3.25523 19.8617 3.46813 20.0108 3.96326 20.1003L4.60197 20.2147C5.9091 20.4484 6.48345 20.9705 6.48345 21.9251C6.48345 22.9543 5.54766 23.6454 4.15141 23.6454C2.65613 23.6454 1.74015 22.9991 1.63617 21.8654ZM6.73596 20.8362C6.73596 19.1905 7.92426 17.9922 9.56312 17.9922C11.1921 17.9922 12.3408 19.1457 12.3408 20.7915C12.3408 22.4571 11.1673 23.6454 9.52351 23.6454C7.8797 23.6454 6.73596 22.4919 6.73596 20.8362ZM10.7366 20.8014C10.7366 19.812 10.2712 19.1855 9.53342 19.1855C8.80558 19.1855 8.34017 19.8219 8.34017 20.8113C8.34017 21.8257 8.79568 22.4521 9.53342 22.4521C10.2761 22.4521 10.7366 21.8157 10.7366 20.8014ZM12.2566 18.1563H13.128V17.6392C13.128 16.4459 13.6727 15.9188 14.8956 15.9188C15.0986 15.9188 15.3462 15.9387 15.4848 15.9636V17.0922C15.3957 17.0873 15.3957 17.0873 15.2868 17.0873C14.8412 17.0873 14.6926 17.2165 14.6926 17.6143V18.1563H16.2374V16.4906H17.7971V18.1563H20.2331L20.7975 20.692C20.8767 21.055 20.956 21.4428 21.0203 21.8058C21.0995 21.4279 21.1936 21.05 21.2877 20.697L21.9462 18.196H23.2236L23.892 20.697C23.9713 21.0053 24.0653 21.403 24.1446 21.7411C24.2386 21.229 24.2881 20.9804 24.3525 20.697L24.917 18.1563H26.4568L24.9516 23.4814H23.4514L22.5552 20.0705L21.6788 23.4814H20.134L18.9656 19.27H17.7971V21.6964C17.7971 22.1538 17.9604 22.3079 18.4358 22.3079C18.5744 22.3079 18.6487 22.303 18.7873 22.2781V23.4316C18.5249 23.4814 18.2278 23.5162 17.9902 23.5162C16.7325 23.5162 16.2374 23.0488 16.2374 21.8605V19.27H14.6926V23.4814H13.128V19.27H12.2566V18.1563ZM26.1647 22.1091C26.1647 21.1445 26.7885 20.6572 28.3878 20.3838C29.2493 20.2396 29.5612 20.0407 29.5612 19.633C29.5612 19.2253 29.2592 18.9767 28.7591 18.9767C28.2293 18.9767 27.9273 19.2203 27.8927 19.6827H26.4518C26.5657 18.5888 27.3827 17.9922 28.774 17.9922C30.3089 17.9922 31.0664 18.733 31.0664 20.2396V22.3527C31.0664 23.009 31.1011 23.1979 31.2744 23.4814H29.7692C29.6949 23.3024 29.6454 23.0985 29.6256 22.825C29.2146 23.367 28.6849 23.6156 27.9521 23.6156C26.843 23.6156 26.1647 23.0438 26.1647 22.1091ZM28.6849 21.1892C27.9422 21.3384 27.6649 21.5472 27.6649 21.9599C27.6649 22.3776 27.9323 22.6162 28.4076 22.6162C29.1255 22.6162 29.5662 22.1588 29.5662 21.4279V20.9307C29.3384 21.0401 29.1503 21.0948 28.6849 21.1892ZM31.8438 18.1563H33.3935V18.9717C33.7302 18.3601 34.1708 18.0668 34.765 18.0668C34.8343 18.0668 34.9779 18.0817 35.0967 18.1065V19.4092C34.9977 19.3844 34.8937 19.3744 34.6759 19.3744C33.9134 19.3744 33.4232 19.8667 33.4232 20.6324V23.4814H31.8438V18.1563ZM35.0472 20.8362C35.0472 19.1407 36.1563 17.9922 37.7952 17.9922C39.3548 17.9922 40.4045 19.1656 40.4045 20.9207V21.1942H36.6168C36.7207 22.0792 37.1763 22.5814 37.8744 22.5814C38.3992 22.5814 38.7409 22.3328 38.8547 21.8803H40.3302C40.1173 22.9394 39.1271 23.6454 37.8546 23.6454C36.186 23.6454 35.0472 22.5068 35.0472 20.8362ZM38.8498 20.2644C38.7508 19.454 38.3745 19.0214 37.7655 19.0214C37.1565 19.0214 36.7752 19.449 36.6465 20.2644H38.8498Z"
52
+ fill="white"
53
+ />
54
+ </svg>
55
+ </div>
56
+ </div>
57
+ <div class="legal">
58
+ <div class="legal-text">
59
+ SoftwareONE is a trademark of SoftwareONE, Inc. "The Software Licensing Experts" is a
60
+ service mark of SoftwareONE, Inc. VAR assist is a trademark of SoftwareONE, Inc. "It pays to
61
+ partner" is a service mark of SoftwareONE, Incorporated. All other trademarks, service marks
62
+ or trade names appearing herein are the property of their respective owners.
63
+ </div>
64
+ <div class="legal-text">Privacy Statement | Terms of Service</div>
65
+ </div>
66
+ </div>
67
+ {/if}
68
+
69
+ <style>
70
+ .footer {
71
+ background-color: #25282d;
72
+ min-height: 100px;
73
+ align-content: center;
74
+ }
75
+ .footer-section {
76
+ display: flex;
77
+ flex-direction: row;
78
+ gap: 96px;
79
+ align-items: center;
80
+ justify-content: center;
81
+ }
82
+ .footer-logo {
83
+ display: flex;
84
+ justify-content: center;
85
+ }
86
+ .logo-image {
87
+ width: 192px;
88
+ }
89
+ .footer-links {
90
+ display: grid;
91
+ }
92
+ .footer-link {
93
+ font-family: 'Haas Grotesk Display Pro', sans-serif;
94
+ font-size: 16px;
95
+ font-weight: 400;
96
+ font-style: normal;
97
+ line-height: 20px;
98
+ color: white;
99
+ padding-bottom: 4px;
100
+ text-decoration: none;
101
+ }
102
+ .footer-link:hover {
103
+ color: #00adef; /* Assuming magentablue is #00ADEF */
104
+ }
105
+ .logo-legal-section {
106
+ display: inline-flex;
107
+ height: 118.35px;
108
+ width: 1440px;
109
+ align-items: center;
110
+ justify-content: start;
111
+ gap: 20px;
112
+ padding: 6px;
113
+ }
114
+ .logo {
115
+ display: inline-flex;
116
+ flex-direction: column;
117
+ align-items: start;
118
+ justify-content: start;
119
+ gap: 2px;
120
+ }
121
+ .powered-by {
122
+ font-family: 'Haas Grotesk Display Pro', sans-serif;
123
+ font-size: 14px;
124
+ font-weight: 500;
125
+ line-height: 1.5;
126
+ color: #6b7180;
127
+ }
128
+ .legal {
129
+ display: inline-flex;
130
+ flex-grow: 1;
131
+ flex-direction: column;
132
+ align-items: start;
133
+ justify-content: start;
134
+ gap: 2px;
135
+ }
136
+ .legal-text {
137
+ font-family: 'Haas Grotesk Display Pro', sans-serif;
138
+ width: 100%;
139
+ font-size: 12px;
140
+ font-weight: 500;
141
+ color: #6b7180;
142
+ }
143
+ </style>
package/dist/Footer/Footer.svelte.d.ts ADDED
@@ -0,0 +1,6 @@
1
+ interface FooterProps {
2
+ isInternal?: boolean;
3
+ }
4
+ declare const Footer: import("svelte").Component<FooterProps, {}, "">;
5
+ type Footer = ReturnType<typeof Footer>;
6
+ export default Footer;
package/dist/Header/Header.svelte CHANGED
@@ -117,7 +117,7 @@
117
117
  color: #000;
118
118
 
119
119
  /* medium/6 */
120
- font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
120
+ font-family: 'Haas Grotesk Display Pro', sans-serif;
121
121
  font-size: 24px;
122
122
  font-style: normal;
123
123
  font-weight: 500;
package/dist/Header/HeaderAccount.svelte CHANGED
@@ -55,7 +55,7 @@
55
55
  /* padding: 15px 0px 15.194px 0px; */
56
56
  justify-content: center;
57
57
  align-items: center;
58
- font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
58
+ font-family: 'Haas Grotesk Display Pro', sans-serif;
59
59
  }
60
60
  .account {
61
61
  display: flex;
@@ -74,10 +74,10 @@
74
74
  text-overflow: ellipsis;
75
75
 
76
76
  /* medium/2 */
77
- font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
77
+ font-family: 'Haas Grotesk Display Pro', sans-serif;
78
78
  font-size: 14px;
79
79
  font-style: normal;
80
- font-weight: 600;
80
+ font-weight: 500;
81
81
  line-height: 20px; /* 142.857% */
82
82
  }
83
83
  .account-more {
@@ -97,10 +97,10 @@
97
97
  text-overflow: ellipsis;
98
98
 
99
99
  /* regular/1 */
100
- font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
100
+ font-family: 'Haas Grotesk Display Pro', sans-serif;
101
101
  font-size: 12px;
102
102
  font-style: normal;
103
- font-weight: 500;
103
+ font-weight: 400;
104
104
  line-height: normal;
105
105
  }
106
106
  </style>
package/dist/Header/HeaderLoader.svelte CHANGED
@@ -23,9 +23,9 @@
23
23
  <style>
24
24
  .navigation-loader {
25
25
  position: fixed;
26
- top: 88px;
27
- right: 0;
28
- left: 10px;
26
+ top: 80px;
27
+ right: 0px;
28
+ left: 0px;
29
29
  height: 3px;
30
30
  z-index: 50;
31
31
  background: linear-gradient(90deg, #392D9C, #472AFF, #00c9cd);
package/dist/Modal/Modal.svelte CHANGED
@@ -20,13 +20,12 @@
20
20
  cancelButton,
21
21
  okButton
22
22
  }: ModalProps = $props();
23
-
24
23
  </script>
25
24
 
26
25
  <div class="modal">
27
- <ModalHeader {headerTitle}/>
26
+ <ModalHeader {headerTitle} />
28
27
  <ModalContent {contentTitle} {contentMessage} {contentCodeMessage} />
29
- <ModalFooter {cancelButton} {okButton}/>
28
+ <ModalFooter {cancelButton} {okButton} />
30
29
  </div>
31
30
 
32
31
  <style>
package/dist/Modal/ModalContent.svelte CHANGED
@@ -58,17 +58,17 @@
58
58
  align-self: stretch;
59
59
  color: var(--brand-type, #000);
60
60
  /* bold/2 */
61
- font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
61
+ font-family: 'Haas Grotesk Display Pro', sans-serif;
62
62
  font-size: 14px;
63
63
  font-style: normal;
64
- font-weight: 600; /* changed from 700 to 600 since we use Neue Haas Grotesk Display Pro */
64
+ font-weight: 600; /* changed from 700 to 600 since we use Haas Grotesk Display Pro */
65
65
  line-height: 20px; /* 142.857% */
66
66
  }
67
67
  .modal-content-message {
68
68
  align-self: stretch;
69
69
  color: var(--brand-type, #000);
70
70
  /* regular/2 */
71
- font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
71
+ font-family: 'Haas Grotesk Display Pro', sans-serif;
72
72
  font-size: 14px;
73
73
  font-style: normal;
74
74
  font-weight: 400;
@@ -87,7 +87,7 @@
87
87
  color: var(--gray-4, #6b7180);
88
88
 
89
89
  /* regular/1 */
90
- font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
90
+ font-family: 'Haas Grotesk Display Pro', sans-serif;
91
91
  font-size: 12px;
92
92
  font-style: normal;
93
93
  font-weight: 400;
package/dist/Modal/ModalFooter.svelte CHANGED
@@ -45,7 +45,7 @@
45
45
  background: var(--brand-white, #fff);
46
46
  color: var(--brand-primary, #472aff);
47
47
  /* regular/2 */
48
- font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
48
+ font-family: 'Haas Grotesk Display Pro', sans-serif;
49
49
  font-size: 14px;
50
50
  font-style: normal;
51
51
  font-weight: 400;
@@ -64,7 +64,7 @@
64
64
  background: var(--brand-primary, #472aff);
65
65
  color: var(--brand-primary, #fff);
66
66
  /* regular/2 */
67
- font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
67
+ font-family: 'Haas Grotesk Display Pro', sans-serif;
68
68
  font-size: 14px;
69
69
  font-style: normal;
70
70
  font-weight: 400;
package/dist/Modal/ModalHeader.svelte CHANGED
@@ -30,7 +30,7 @@
30
30
  }
31
31
  .modal-header-icon {
32
32
  color: var(--brand-danger, #dc182c);
33
- font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
33
+ font-family: 'Haas Grotesk Display Pro', sans-serif;
34
34
  font-size: 32px;
35
35
  font-style: normal;
36
36
  font-weight: 400;
@@ -40,7 +40,7 @@
40
40
  flex: 1 0 0;
41
41
  color: var(--brand-type, #000);
42
42
  /* medium/4 */
43
- font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
43
+ font-family: 'Haas Grotesk Display Pro', sans-serif;
44
44
  font-size: 18px;
45
45
  font-style: normal;
46
46
  font-weight: 500;
package/dist/Toast/Toast.svelte CHANGED
@@ -3,7 +3,11 @@
3
3
  import { linear } from 'svelte/easing';
4
4
  import { getToast } from './toastState.svelte';
5
5
 
6
- let { duration }:{duration?: number | undefined} = $props();
6
+ interface ToastProps {
7
+ duration?: number;
8
+ }
9
+
10
+ let { duration }:ToastProps = $props();
7
11
 
8
12
  const toast = getToast(duration);
9
13
 
@@ -77,7 +81,7 @@
77
81
  color: var(--brand-type, #000);
78
82
 
79
83
  /* regular/2 */
80
- font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
84
+ font-family: 'Haas Grotesk Display Pro', sans-serif;
81
85
  font-size: 14px;
82
86
  font-style: normal;
83
87
  font-weight: 400;
@@ -87,7 +91,7 @@
87
91
  display: flex;
88
92
  align-items: flex-start;
89
93
  color: var(--alerts-info-4, #2b1999);
90
- font-family: 'Neue Haas Grotesk Display Pro', sans-serif;
94
+ font-family: 'Haas Grotesk Display Pro', sans-serif;
91
95
  font-size: 14px;
92
96
  font-style: normal;
93
97
  font-weight: 400;
package/dist/Toast/Toast.svelte.d.ts CHANGED
@@ -1,6 +1,6 @@
1
- type $$ComponentProps = {
2
- duration?: number | undefined;
3
- };
4
- declare const Toast: import("svelte").Component<$$ComponentProps, {}, "">;
1
+ interface ToastProps {
2
+ duration?: number;
3
+ }
4
+ declare const Toast: import("svelte").Component<ToastProps, {}, "">;
5
5
  type Toast = ReturnType<typeof Toast>;
6
6
  export default Toast;
package/dist/index.d.ts CHANGED
@@ -8,5 +8,6 @@ import Header from './Header/Header.svelte';
8
8
  import Breadcrumbs from './Breadcrumbs/Breadcrumbs.svelte';
9
9
  import { addBreadcrumbsNameMap, type BreadcrumbsNameMap } from './Breadcrumbs/breadcrumbsState.svelte.js';
10
10
  import Chips from './Chips/Chips.svelte';
11
+ import Footer from './Footer/Footer.svelte';
11
12
  import Card from './Card/Card.svelte';
12
- export { Button, Modal, Spinner, Toaster, addToast, type Toast, Toggle, Header, Breadcrumbs, addBreadcrumbsNameMap, type BreadcrumbsNameMap, Chips, Card };
13
+ export { Button, Modal, Spinner, Toaster, addToast, type Toast, Toggle, Header, Breadcrumbs, addBreadcrumbsNameMap, type BreadcrumbsNameMap, Chips, Footer, Card };
package/dist/index.js CHANGED
@@ -9,5 +9,6 @@ import Header from './Header/Header.svelte';
9
9
  import Breadcrumbs from './Breadcrumbs/Breadcrumbs.svelte';
10
10
  import { addBreadcrumbsNameMap } from './Breadcrumbs/breadcrumbsState.svelte.js';
11
11
  import Chips from './Chips/Chips.svelte';
12
+ import Footer from './Footer/Footer.svelte';
12
13
  import Card from './Card/Card.svelte';
13
- export { Button, Modal, Spinner, Toaster, addToast, Toggle, Header, Breadcrumbs, addBreadcrumbsNameMap, Chips, Card };
14
+ export { Button, Modal, Spinner, Toaster, addToast, Toggle, Header, Breadcrumbs, addBreadcrumbsNameMap, Chips, Footer, Card };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@softwareone/spi-sv5-library",
3
- "version": "0.0.12",
3
+ "version": "0.1.0",
4
4
  "description": "Svelte components",
5
5
  "keywords": [
6
6
  "svelte",
@@ -58,7 +58,7 @@
58
58
  "vite": "^6.0.0"
59
59
  },
60
60
  "dependencies": {
61
- "lucide-svelte": "^0.475.0",
62
- "@sveltejs/kit": "^2.16.0"
61
+ "@sveltejs/kit": "^2.16.0",
62
+ "lucide-svelte": "^0.475.0"
63
63
  }
64
64
  }