@rippling/rippling-sdk 0.2.0-alpha.48 → 0.2.0-alpha.49

package/examples/sdui/sdui-showcase/rippling-function.ts

@@ -1,13 +1,6 @@
-/**
- * ----------------------------------------------------------------------------
- * PASTE INTO THE RIPPLING FUNCTION EDITOR TO PREVIEW. DEPENDS ON
- * @rippling/rippling-sdk AND @rippling/sdui-builder.
- * ----------------------------------------------------------------------------
- * Pair: sdui-showcase.ts uses ../../../src/lib/sdui for local runs.
- */
+/** SDUI component showcase: date, phone, currency, breadcrumb, dropdown, carousel, video, tree, stepper, drawer, snackbar, loaders. */
 
-/*
-import SDUI from '@rippling/sdui-builder';
+import SDUI from '@rippling/rippling-sdk/lib/sdui';
 import { FunctionContext, FunctionEvent, FunctionResponse } from '@rippling/rippling-sdk';
 
 const CAROUSEL_SLIDES = [
@@ -57,7 +50,7 @@ function renderSpec(_functionId: string) {
             align: 'flex-start',
             children: [
               SDUI.components.Heading({
-                level: '1',
+                level: 1,
                 text: 'Extra components',
               }),
               SDUI.components.Text({
@@ -70,7 +63,6 @@ function renderSpec(_functionId: string) {
 
           SDUI.components.Card({
             title: 'Fields',
-            padding: '24',
             children: [
               SDUI.components.VStack({
                 gap: 'space350',
@@ -95,7 +87,7 @@ function renderSpec(_functionId: string) {
                   }),
                   SDUI.components.HStack({
                     gap: 'space400',
-                    wrap: false,
+                    wrap: 'nowrap',
                     align: 'stretch',
                     children: [
                       SDUI.components.Layout({
@@ -143,7 +135,6 @@ function renderSpec(_functionId: string) {
 
           SDUI.components.Card({
             title: 'Navigation',
-            padding: '24',
             children: [
               SDUI.components.VStack({
                 gap: 'space400',
@@ -158,7 +149,7 @@ function renderSpec(_functionId: string) {
                   }),
                   SDUI.components.HStack({
                     gap: 'space300',
-                    wrap: true,
+                    wrap: 'wrap',
                     align: 'center',
                     children: [
                       SDUI.components.Dropdown({
@@ -189,7 +180,7 @@ function renderSpec(_functionId: string) {
                       { label: 'One', value: '1' },
                       { label: 'Two', value: '2' },
                     ],
-                    width: '100%',
+                    width: 'auto',
                     maxHeight: 160,
                   }),
                   SDUI.components.Layout({
@@ -210,7 +201,6 @@ function renderSpec(_functionId: string) {
 
           SDUI.components.Card({
             title: 'Media',
-            padding: '24',
             children: [
               SDUI.components.VStack({
                 gap: 'space400',
@@ -219,7 +209,7 @@ function renderSpec(_functionId: string) {
                   SDUI.components.Carousel({ slides: CAROUSEL_SLIDES }),
                   SDUI.components.Video({
                     src: 'https://interactive-examples.mdn.mozilla.net/media/cc0-videos/flower.mp4',
-                    width: '100%',
+                    width: 720,
                     loading: 'lazy',
                     name: 'v',
                   }),
@@ -230,7 +220,6 @@ function renderSpec(_functionId: string) {
 
           SDUI.components.Card({
             title: 'Lists',
-            padding: '24',
             children: [
               SDUI.components.VStack({
                 gap: 'space450',
@@ -265,7 +254,6 @@ function renderSpec(_functionId: string) {
 
           SDUI.components.Card({
             title: 'Loading',
-            padding: '24',
             children: [
               SDUI.components.VStack({
                 gap: 'space400',
@@ -300,7 +288,7 @@ function renderSpec(_functionId: string) {
                       SDUI.components.Skeleton({ variant: 'BOX', width: 160, height: 48, borderRadius: 6 }),
                     ],
                   }),
-                  SDUI.components.ContentLoader({ width: '100%', height: 40, speed: 1 }),
+                  SDUI.components.ContentLoader({ width: 720, height: 40, speed: 1 }),
                   SDUI.components.SnackBar({
                     text: 'Done.',
                     appearance: 'SUCCESS',
@@ -352,7 +340,6 @@ function renderSpec(_functionId: string) {
   return SDUI.render(s, root);
 }
 
-
 export async function onRipplingEvent(
   event: FunctionEvent,
   context: FunctionContext,
@@ -377,5 +364,3 @@ export async function onRipplingEvent(
     message: '',
   });
 }
-
-*/