Toniq Carousel Offset Arrows (#105)

Toniq-Labs · May 3, 2024 · 6a5d890 · 6a5d890
1 parent 344e627
commit 6a5d890
Show file tree

Hide file tree

Showing 8 changed files with 71 additions and 11 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system-root",
-    "version": "16.9.2",
+    "version": "16.9.3",
     "private": true,
     "description": "Root design system mono-repo package.",
     "homepage": "https://github.com/Toniq-Labs/toniq-labs-design-system",

diff --git a/packages/design-system/package.json b/packages/design-system/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system",
-    "version": "16.9.2",
+    "version": "16.9.3",
     "private": false,
     "description": "Design system elements for Toniq Labs",
     "keywords": [

diff --git a/packages/design-system/src/elements/toniq-carousel/toniq-carousel.element.book.ts b/packages/design-system/src/elements/toniq-carousel/toniq-carousel.element.book.ts
@@ -129,5 +129,55 @@ export const toniqCarouselBookPage = defineBookPage({
                 `;
             },
         });
+
+        defineExample({
+            title: 'offset arrows',
+            styles: exampleStyles,
+            renderCallback() {
+                const wrapperDivStyles = css`
+                    /* make sure this width matches the ToniqCarousel width */
+                    width: 800px;
+                    max-width: 100%;
+                    display: flex;
+                    justify-content: center;
+                    align-items: center;
+                    padding: 100px 0;
+                    box-sizing: border-box;
+                    border: 1px solid ${toniqColors.pageInteraction.foregroundColor};
+                    border-radius: 12px;
+                `;
+
+                return html`
+                    <${ToniqCarousel.assign({
+                        enableAutomaticCycling: false,
+                        offsetArrows: true,
+                        cycleIntervalMs: 1000,
+                        templates: allIconsByCategory['core-24'].map((icon) => {
+                            const styles = css`
+                                padding: 24px;
+                                border: 1px solid ${toniqColors.pageInteraction.foregroundColor};
+                                border-radius: 12px;
+                            `;
+
+                            return html`
+                                <${ToniqIcon.assign({icon})} style=${styles}></${ToniqIcon}>
+                            `;
+                        }),
+                    })}></${ToniqCarousel}>
+                    <${ToniqCarousel.assign({
+                        enableAutomaticCycling: false,
+                        offsetArrows: true,
+                        variant: ToniqCarouselVariantEnum.Banner,
+                        templates: allIconsByCategory['core-24'].map((icon) => {
+                            return html`
+                                <div style=${wrapperDivStyles}>
+                                    <${ToniqIcon.assign({icon})}></${ToniqIcon}>
+                                </div>
+                            `;
+                        }),
+                    })}></${ToniqCarousel}>
+                `;
+            },
+        });
     },
 });
diff --git a/packages/design-system/src/elements/toniq-carousel/toniq-carousel.element.ts b/packages/design-system/src/elements/toniq-carousel/toniq-carousel.element.ts
@@ -37,11 +37,13 @@ export const ToniqCarousel = defineToniqElement<{
     /** Number of milliseconds between each automatic cycling. Defaults to 4000. */
     cycleIntervalMs?: number;
     variant?: ToniqCarouselVariantEnum | undefined;
+    offsetArrows?: boolean | undefined;
 }>()({
     tagName: 'toniq-carousel',
     hostClasses: {
         'toniq-carousel-banner-variant': ({inputs}) =>
             inputs.variant === ToniqCarouselVariantEnum.Banner,
+        'toniq-carousel-offset-arrows': ({inputs}) => !!inputs.offsetArrows,
     },
     stateInitStatic: {
         currentScrollPosition: {
@@ -106,6 +108,15 @@ export const ToniqCarousel = defineToniqElement<{
             background: none;
         }
 
+        ${hostClasses['toniq-carousel-offset-arrows'].selector} {
+            overflow-y: unset;
+            overflow: visible;
+        }
+
+        ${hostClasses['toniq-carousel-offset-arrows'].selector} .arrow ${ToniqIcon} {
+            margin: 0 -20px;
+        }
+
         .arrow.right {
             justify-content: flex-end;
             --background-degrees: -90deg;

diff --git a/packages/design-system/src/elements/toniq-list-table/toniq-list-table.element.ts b/packages/design-system/src/elements/toniq-list-table/toniq-list-table.element.ts
@@ -88,7 +88,6 @@ export const ToniqListTable = defineToniqElement<ListTableInputs>()({
         }
 
         .table-list {
-            min-height: 40px;
             width: 100%;
             display: flex;
             flex-direction: column;
@@ -224,7 +223,7 @@ export const ToniqListTable = defineToniqElement<ListTableInputs>()({
         }
 
         .loading-wrapper {
-            min-height: 300px;
+            min-height: 40px;
             transition: ${toniqDurations.pretty};
             opacity: 1;
             width: 100%;

diff --git a/packages/native-elements-test/package.json b/packages/native-elements-test/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system-native-elements-test",
-    "version": "16.9.2",
+    "version": "16.9.3",
     "private": true,
     "scripts": {
         "compile": "virmator compile",

diff --git a/packages/scripts/package.json b/packages/scripts/package.json
@@ -1,6 +1,6 @@
 {
     "name": "@toniq-labs/design-system-scripts",
-    "version": "16.9.2",
+    "version": "16.9.3",
     "private": true,
     "scripts": {
         "compile": "virmator compile",