spoko-design-system 0.0.7 → 0.0.8

package/README.md

@@ -46,6 +46,7 @@ Most of the components from this repository can be seen in my projects:
 - 🗒 [astrojs/mdx](https://github.com/withastro/astro/tree/main/packages/integrations/mdx/) - markdown support
 - 📦 [astro-compress](https://github.com/astro-community/AstroCompress) - compression utilities to your Astro project
 - 🖨 Static-site generation (SSG)
+- 🎡 [Swiper](https://github.com/nolimits4web/swiper) - modern mobile touch slider with hardware accelerated transitions and amazing native behavior
 - 🌠 [View Transitions API](https://docs.astro.build/en/guides/view-transitions/#full-site-view-transitions-spa-mode) - [View Transition API](https://developer.mozilla.org/en-US/docs/Web/API/Document/startViewTransition) - makes it easy to change the DOM in a single step, while creating an animated transition between the two states. It's available in Chrome 111+ ([more details](https://developer.chrome.com/docs/web-platform/view-transitions?hl=en))
 - ☁️ Deploy on Netlify
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "0.0.7",
+  "version": "0.0.8",
   "private": false,
   "scripts": {
     "dev": "astro dev",
@@ -77,7 +77,8 @@
     "sass": "^1.70.0",
     "unocss": "^0.57.7",
     "vite": "^5.0.12",
-    "vue": "^3.4.15"
+    "vue": "^3.4.15",
+    "swiper": "^11.0.5"
   },
   "devDependencies": {
     "@unocss/transformer-variant-group": "^0.58.4",

package/src/components/Carousel.astro

@@ -0,0 +1,41 @@
+---
+
+---
+<script>
+  import { register } from "swiper/element/bundle";
+    
+  document.addEventListener("astro:page-load", () => {
+    //"DOMContentLoaded"
+    // register Swiper custom elements
+    register();
+  })
+
+</script>
+
+<swiper-container
+  class="max-w=full w-full flex"
+  grid-rows="1"
+  mousewheel-force-to-axis="true"
+  navigation="true"
+  pagination-type="fraction"
+  scrollbar="false"
+  slides-per-view="auto"
+  space-between="0"
+>
+  <swiper-slide class="bg-blue-50 p-12 border-1">
+    A
+  </swiper-slide>
+  <swiper-slide class="bg-blue-100 p-12 border-1">
+    B
+  </swiper-slide>
+  <swiper-slide class="bg-blue-200 p-12 border-1">
+    C
+  </swiper-slide>
+  <swiper-slide class="bg-blue-300 p-12 border-1">
+    D
+  </swiper-slide>
+  <swiper-slide class="bg-blue-400 p-12 border-1">
+    A
+  </swiper-slide>
+
+</swiper-container>

package/src/components/HeadCommon.astro

@@ -9,12 +9,12 @@
 <link rel="icon" type="image/svg+xml" href="/favicon.svg" />
 <link rel="alternate icon" type="image/x-icon" href="/favicon.ico" />
 
-<link rel="sitemap" href="/sitemap.xml" />
+<link rel="sitemap" href="/sitemap-index.xml" />
 
 <!-- Preload Fonts -->
-<link rel="preconnect" href="https://fonts.googleapis.com" />
+<!-- <link rel="preconnect" href="https://fonts.googleapis.com" />
 <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
-<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@0;1&display=swap" rel="stylesheet" />
+<link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:ital@0;1&display=swap" rel="stylesheet" /> -->
 
 <!-- Scrollable a11y code helper -->
 <script src="/make-scrollable-code-focusable.js" is:inline></script>

package/src/components/Header/Header.astro

@@ -61,8 +61,7 @@ import Search from "astro-pagefind/components/Search";
 
     &.search-container {
       box-sizing: border-box;
-      @apply h-10;
-      @apply h-10 border-0 border-gray-800 rounded-3xl;
+      @apply h-10 border-0 border-gray-800 rounded-3xl hidden md:block;
     }
     .pagefind-ui {
 

package/src/pages/components/carousel.mdx

@@ -0,0 +1,20 @@
+---
+title: "Carousel"
+layout: "../../layouts/MainLayout.astro"
+---
+import Carousel from '../../components/Carousel.astro'
+
+# Carousel
+
+Carousel - modern carousel based on Swiper Element (Web Component)
+
+<div class="component-preview">
+     <Carousel />
+</div>
+
+```js
+     <Carousel />
+```
+#
+
+Find the code for this page in the `src/pages/components/carousel.mdx` file.

package/src/pages/components/table.mdx

@@ -41,6 +41,8 @@ export const tableDataSecondary = [
 
 # Table
 
+Simple table based on JSON data object.
+
 <div class="component-preview">
     <MainTable data={tableData}></MainTable>
 </div>

package/src/pages/core/colors.mdx

@@ -5,4 +5,6 @@ layout: ../../layouts/MainLayout.astro
 import MainColors from '../../components/MainColors.vue';
 
 <h1>Colors</h1>
-<MainColors />
+<p>Base colors.</p>
+
+<MainColors class="mt-8" />

package/src/pages/index.astro

@@ -10,7 +10,7 @@ import Button from "../components/Button.vue";
 const navItems = [
     {
         title: "Core",
-        description: "Base colors, typography, shadows, and more.",
+        description: "Base colors, typography, shadows etc.",
         url: "/core/introduction",
         icon: "ant-design:cluster-outlined"
     },
@@ -49,18 +49,19 @@ const navItems = [
     </Button>
 </Jumbatron>
   <nav>
-    <ul class="flex gap-4 max-w-5xl mx-auto text-left mt-12">
+    <ul class="px-4 flex-col flex flex-wrap md:flex-nowrap gap-4 max-w-5xl mx-auto text-left mt-12  md:(px-0 flex-row) ">
       {
         navItems.map(({ title, description, url, icon }) => (
           <a
             href={url}
-            class="flex flex-col bg-white rounded-md hover:-translate-y-1 hover:shadow-lg transition-all flex-1 items-center py-10 px-4 text-center"
+            title={description}
+            class="flex w-full flex-wrap bg-white rounded-md hover:-translate-y-1 hover:shadow-lg transition-all flex-1 items-center py-10 px-4 md:(flex-col w-auto flex-nowrap text-center)"
           >
-            <Headline as="h2" textSize="2xl">
-              <Icon name={icon} aria-hidden="true" class="text-blue-wrc mr-2" />
+            <Headline as="h2" textSize="2xl" underline={false}>
+              <Icon name={icon} aria-hidden="true" class="text-blue-b mr-2" />
               {title}
             </Headline>
-            <p class="text-slate-500">{description}</p>
+            <p class="text-slate-500 w-full">{description}</p>
           </a>
         ))
       }

package/src/styles/content.scss

@@ -34,7 +34,7 @@
   }
 
   .component-preview {
-    @apply bg-blue-600 bg-opacity-5 px-0 py-4 mx-0 flex items-center sm:(p-8);
+    @apply bg-blue-600 bg-opacity-5 px-4 py-4 mx-0 flex items-center overflow-x-auto sm:(p-8);
     gap: 1rem;
     border-radius: 0.33rem;
     border: 1px solid theme("colors.slate.200");