@budibase/frontend-core 2.2.12-alpha.32 → 2.2.12-alpha.33

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 CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "name": "@budibase/frontend-core",
3
- "version": "2.2.12-alpha.32",
3
+ "version": "2.2.12-alpha.33",
4
4
  "description": "Budibase frontend core libraries used in builder and client",
5
5
  "author": "Budibase",
6
6
  "license": "MPL-2.0",
7
7
  "svelte": "src/index.js",
8
8
  "dependencies": {
9
- "@budibase/bbui": "2.2.12-alpha.32",
9
+ "@budibase/bbui": "2.2.12-alpha.33",
10
10
  "lodash": "^4.17.21",
11
11
  "svelte": "^3.46.2"
12
12
  },
13
- "gitHead": "80b040aa15f2dd9bbbdf5e8fe0f74f47a14b74c8"
13
+ "gitHead": "f4e3f6f831617139f96c7de9ac12e458ccbc599d"
14
14
  }
@@ -0,0 +1,50 @@
1
+ <div class="split-page">
2
+ <div class="left">
3
+ <div class="content">
4
+ <slot />
5
+ </div>
6
+ </div>
7
+ <div class="right">
8
+ <slot name="right" />
9
+ </div>
10
+ </div>
11
+
12
+ <style>
13
+ .split-page {
14
+ height: 100%;
15
+ display: grid;
16
+ grid-template-columns: max(50%, 380px) 1fr;
17
+ justify-content: stretch;
18
+ overflow: hidden;
19
+ }
20
+ .left {
21
+ background: var(--background);
22
+ display: grid;
23
+ place-items: center;
24
+ padding: 40px;
25
+ overflow-y: auto;
26
+ }
27
+ .right {
28
+ background: linear-gradient(
29
+ to bottom right,
30
+ var(--spectrum-global-color-gray-300) 0%,
31
+ var(--background) 100%
32
+ );
33
+ }
34
+ .content {
35
+ width: 100%;
36
+ max-width: 400px;
37
+ }
38
+
39
+ @media (max-width: 740px) {
40
+ .split-page {
41
+ grid-template-columns: 1fr;
42
+ }
43
+ .left {
44
+ padding: 20px;
45
+ }
46
+ .right {
47
+ display: none;
48
+ }
49
+ }
50
+ </style>
@@ -0,0 +1,62 @@
1
+ <script>
2
+ import SplitPage from "./SplitPage.svelte"
3
+ import { Layout } from "@budibase/bbui"
4
+ </script>
5
+
6
+ <SplitPage>
7
+ <slot />
8
+ <div class="wrapper" slot="right">
9
+ <div class="testimonial">
10
+ <Layout noPadding gap="S">
11
+ <div class="text">
12
+ "Here is an example of how Budibase changed my life for the better and
13
+ now all I do is eat, sleep, build apps, repeat."
14
+ </div>
15
+ <div class="user">
16
+ <img
17
+ src="https://icon-library.com/images/male-user-icon/male-user-icon-24.jpg"
18
+ />
19
+ <div class="author">
20
+ <div class="name">No-code Enthusiast</div>
21
+ <div class="company">Bedroom TLD</div>
22
+ </div>
23
+ </div>
24
+ </Layout>
25
+ </div>
26
+ </div>
27
+ </SplitPage>
28
+
29
+ <style>
30
+ .wrapper {
31
+ width: 100%;
32
+ height: 100%;
33
+ display: grid;
34
+ place-items: center;
35
+ }
36
+ .testimonial {
37
+ width: 280px;
38
+ padding: 40px;
39
+ }
40
+ .text {
41
+ font-size: var(--font-size-l);
42
+ font-style: italic;
43
+ }
44
+ img {
45
+ width: 40px;
46
+ }
47
+ .user {
48
+ display: flex;
49
+ flex-direction: row;
50
+ justify-content: flex-start;
51
+ align-items: center;
52
+ gap: var(--spacing-s);
53
+ }
54
+ .name {
55
+ font-weight: bold;
56
+ color: var(--spectrum-global-color-gray-900);
57
+ font-size: var(--font-size-l);
58
+ }
59
+ .company {
60
+ color: var(--spectrum-global-color-gray-700);
61
+ }
62
+ </style>
@@ -0,0 +1,2 @@
1
+ export { default as SplitPage } from "./SplitPage.svelte"
2
+ export { default as TestimonialPage } from "./TestimonialPage.svelte"
package/src/index.js CHANGED
@@ -3,3 +3,4 @@ export { fetchData } from "./fetch/fetchData"
3
3
  export * as Constants from "./constants"
4
4
  export * from "./stores"
5
5
  export * from "./utils"
6
+ export * from "./components"