spoko-design-system 0.0.6 → 0.0.7

package/src/pages/components/headline.mdx

@@ -6,21 +6,26 @@ import Headline from '../../components/Headline.vue'
 import { Icon } from 'astro-icon/components';
 
 
-## Headline
+# Headline
+
+Headline - universal HTML tag <small>(nice for SEO)</small>.
+
+#
+Headings give both your visitors and search engines important clues about the content's hierarchy and relevancy.
 
-### Headline - universal HTML tag <small>(nice for SEO)</small>
-Headings give both your visitors and search engines important clues about the content’s hierarchy and relevancy.
 It's good to use only H1-H6 for important headings, but sometimes I want more things to be unified. That's why I created this universal component.
 
 Thanks to this, I can make a header that always looks the same, regardless of whether it is an H1 or a DIV or P.
 
-## Import
+
+### Import
 
 ```js
 import Headline from 'spoko-design-system/src/components/Headline.vue';
 ```
 
-## settings (parameters)
+### Settings
+supported parameters
 ```js
 as: {
         type: String as PropType<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span'>,
@@ -35,7 +40,7 @@ textSize: {
 
 ```
 
-#### Headline H1
+## Headline H1
 
 <div class="component-preview">
         <Headline as="h1">Lorem Ipsum</Headline>
@@ -49,7 +54,7 @@ textSize: {
 ```
 
 
-#### Headline H2
+## Headline H2
 
 <div class="component-preview">
 <Headline as="h2"><Icon name="ph:cat-thin" class="inline-block mb-0 sm:mb-2.5 md:mb-0 md:(mr-4)" aria-hidden="true" />Lorem Ipsum</Headline>
@@ -63,7 +68,7 @@ textSize: {
 
 ```
 
-#### Headline DIV
+## Headline DIV
 
 <div class="component-preview">
 <Headline as="div"><Icon name="ph:cat-thin" class="inline-block  mb-0 sm:mb-2.5 md:mb-0 md:(mr-4) text-blue-wrc" aria-hidden="true" />Lorem Ipsum</Headline>
@@ -77,7 +82,8 @@ textSize: {
 
 ```
 
-#### Headline P
+## Headline P
+Paragraph `<p>`
 
 <div class="component-preview">
 <Headline as="p"><Icon name="ph:cat-thin"  class="inline-block text-4xl mb-0 sm:mb-2.5 md:mb-0 md:(mr-4) text-4xl text-blue-wrc" aria-hidden="true" />Lorem Ipsum</Headline>
@@ -91,7 +97,7 @@ textSize: {
 
 ```
 
-#### Headline without icon
+## Headline without icon
 
 <div class="component-preview">
 <Headline as="p">Lorem Ipsum</Headline>
@@ -102,7 +108,7 @@ textSize: {
 
 ```
 
-#### Headline without icon, text size 4xl
+## Headline without icon, text size 4xl
 
 <div class="component-preview">
 <Headline as="h1" text-size="4xl">Lorem Ipsum</Headline>
@@ -114,7 +120,7 @@ textSize: {
 ```
 
 
-#### Headline without icon, text size 4xl with blue icon
+## Headline without icon, text size 4xl with blue icon
 
 <div class="component-preview">
 <Headline as="h1" text-size="4xl"><Icon name="ph:cat-thin"  class="inline-block text-4xl mb-0 sm:mb-2.5 md:mb-0 md:(mr-4) text-4xl text-blue-wrc" aria-hidden="true" />Lorem Ipsum</Headline>
@@ -129,7 +135,7 @@ textSize: {
 ```
 
 
-#### Headline with underline
+## Headline with underline
 
 <div class="component-preview">
 <Headline as="h1" text-size="4xl" underline><Icon name="ph:cat-thin"  class="inline-block text-4xl mb-0 sm:mb-2.5 md:mb-0 md:(mr-4) text-4xl text-blue-wrc" aria-hidden="true" />Lorem Ipsum</Headline>

package/src/pages/components/image.mdx

@@ -4,7 +4,7 @@ layout: "../../layouts/MainLayout.astro"
 ---
 import Image from '../../components/Image.astro'
 
-## Image
+# Image
 
 Image converted to AVIF format and resized.
 AVIF compresses images significantly better than older-generation formats such as WebP and JPEG.
@@ -27,7 +27,7 @@ You can choose the image format you need so that you do not unnecessarily load a
 Use `.img--overlay` class for images on white background to make a layer with light grey overlay.
 
 
-### Small Image
+## Small Image
 `.img--small`
 
 <div class="component-preview">
@@ -126,7 +126,7 @@ Use `.img--overlay` class for images on white background to make a layer with li
 ```
 
 
-### Medium Image
+## Medium Image
 `.img--medium`
 
 <div class="component-preview">
@@ -215,7 +215,7 @@ Use `.img--overlay` class for images on white background to make a layer with li
   </a>
 ```
 
-### Responsive Image with srcset
+## Responsive Image with srcset
 - https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images#resolution_switching_different_sizes
 
 <div class="component-preview">
@@ -252,11 +252,23 @@ Use `.img--overlay` class for images on white background to make a layer with li
 
 
 
-### Image Aspect Ratios
+## Image Aspect Ratios
 
 Image ratio, also known as aspect ratio, is how wide an image is in relation to how tall it is. 
 For viewing on a mobile device, the recommended image ratio is 1:1 (a square picture). 
 
+#
+Ready-made CSS classes:
+
+- `img--1/1`
+- `img--2/3`
+- `img--3/1`
+- `img--3/2`
+- `img--3/4`
+- `img--4/3`
+- `img--16/9`
+
+
 <div class="component-preview">
    <div class="columns-2 lg:columns-4 w-full">
       <div class="text-center mb-4">

package/src/pages/components/input.mdx

@@ -4,7 +4,7 @@ layout: ../../layouts/MainLayout.astro
 ---
 import MainInput from '../../components/MainInput.vue'
 
-## Input text
+# Input text
 
 <div class="component-preview">
     <MainInput label="Name"></MainInput>

package/src/pages/components/jumbatron.mdx

@@ -5,11 +5,13 @@ layout: "../../layouts/MainLayout.astro"
 import Jumbatron from '../../components/Jumbatron.vue'
 import Button from '../../components/Button.vue'
 
-## Jumbatron
+# Jumbatron
 
-This page is an example on how to document your button components, most of the copy was written by AI so don't take it very seriously.
+A jumbotron indicates a big box for calling extra attention to some special content or information.
 
 Find the code for this page in the `src/pages/components/jumbatron.mdx` file.
+
+## Jumbatron - classic
 <div class="component-preview">
     <Jumbatron class="w-full">
         <span slot="intro" set:html={`Lorem ipsum dolor sit amet, <span class=\"text-lightBlue-500\">consectetur</span> adipiscing elit.`} />
@@ -42,7 +44,7 @@ Find the code for this page in the `src/pages/components/jumbatron.mdx` file.
     </Jumbatron>
 ```
 
-## Jumbatron smaller
+## Small Jumbatron
 
 <div class="component-preview">
     <Jumbatron class="w-full" small>

package/src/pages/components/modal.mdx

@@ -7,7 +7,7 @@ import Button from '../../components/Button.vue'
 import { Icon } from 'astro-icon/components';
 
 
-## Modal
+# Modal
 
 Native modal window based on `<dialog>` tag with `::backdrop` CSS pseudo-element (pure CSS3 modal window).
 #
@@ -16,7 +16,7 @@ Native modal window based on `<dialog>` tag with `::backdrop` CSS pseudo-element
 - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
 - https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop
 
-### Modal window
+## Modal window
 
 
 <div class="component-preview">
@@ -40,7 +40,7 @@ Native modal window based on `<dialog>` tag with `::backdrop` CSS pseudo-element
 </Modal>
 ```
 
-### Modal with different close button
+## Modal with different close button
 
 <div class="component-preview">
      <Modal id="dialog2" open="Open modal">

package/src/pages/components/post-header.mdx

@@ -7,11 +7,13 @@ export const author = { firstName: 'Szymon', name: 'CNK' }
 export const categories = [{"name":"Tools & garage accessories","uri":"#"}, {"name":"Lorem Ipsum","uri":"#"}]
 export const date = "2023-07-13T01:35:03"
 
-## PostHeader
+# PostHeader
 
 WordPress PostHeader - post top component for WordPress Single Post template data like categories etc. comes from WP Rest API.
 
 
+## PostHeader with some content for WordPress single page template
+
 <div class="component-preview">
   <div class="relative w-full">
     <PostHeader

package/src/pages/components/pr-code.mdx

@@ -5,7 +5,7 @@ layout: "../../layouts/MainLayout.astro"
 import PrCode from '../../components/PrCode.vue'
 
 
-## PR-Code
+# PR-Code
 
 PR Code are Production Codes for all of the installed equipment in the vehicle and is used by manufacturers including VW, Audi, Seat, Skoda, Porsche, Lamborghini etc. 
 PR Codes contain 3 characters comprising of letters and numbers. 
@@ -16,15 +16,7 @@ They are important when purchasing spare parts as they provide information about
 
 
 
-
-#### import:
-
-```js
-import PrCode from 'spoko-design-system/src/components/PrCode.vue'
-```
-
-
-### PR-Code
+## PR-Code
 
 <div class="component-preview">
      <div class="bg-white p-6 w-full">
@@ -38,4 +30,8 @@ import PrCode from 'spoko-design-system/src/components/PrCode.vue'
      <PrCode prcode="1ZJ" />
 ```
 
+### import:
 
+```js
+import PrCode from 'spoko-design-system/src/components/PrCode.vue'
+```

package/src/pages/components/product-number.mdx

@@ -4,10 +4,11 @@ layout: "../../layouts/MainLayout.astro"
 ---
 import ProductNumber from '../../components/ProductNumber.astro'
 
-## ProductNumber
+# ProductNumber
 
 ProductNumber - with additional formatting adding spacing for Volkswagen product numbers + additional copy button for easier copying.
 
+#
 <div class="component-preview">
   <div class="grid grid-cols-2 lg:grid-cols-4 gap-4 w-full bg-white p-y-5 px-4">
     <ProductNumber

package/src/pages/components/product-tile.mdx

@@ -11,7 +11,7 @@ export const productObject = {
   photo: 'https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337'
 }
 
-## ProductTile
+# ProductTile
 
 ProductTile - product link component which can be used for carousels, section with related products, recently added etc.
 

package/src/pages/components/slimbanner.mdx

@@ -4,7 +4,7 @@ layout: "../../layouts/MainLayout.astro"
 ---
 import SlimBanner from '../../components/SlimBanner.vue'
 
-## SlimBanner
+# SlimBanner
 
 SlimBanner - solidarity with Ukraine.
 

package/src/pages/components/table.mdx

@@ -5,15 +5,47 @@ layout: "../../layouts/MainLayout.astro"
 ---
 
 import MainTable from '../../components/MainTable.vue'
+export const tableData = [
+  {
+    id: 1,
+    name: "Lorem Ipsum",
+    email: "lorem@email.com",
+  },
+  {
+    id: 2,
+    name: "Chuck Norris",
+    email: "ipsum@email.com",
+  },
+  {
+    id: 3,
+    name: "Ipsum Lorem",
+    email: "lorem@email.com",
+  }
+];
+
+export const tableDataSecondary = [
+  {
+    name: "Lorem Ipsum",
+    email: "lorem@email.com",
+  },
+  {
+    name: "Chuck Norris",
+    email: "ipsum@email.com",
+  },
+  {
+    name: "Ipsum Lorem",
+    email: "lorem@email.com",
+  }
+];
 
 
-## Primary table
+# Table
 
 <div class="component-preview">
-    <MainTable></MainTable>
+    <MainTable data={tableData}></MainTable>
 </div>
 
-### Code
+## Code
 
 ```ts
 const tableData = [
@@ -34,6 +66,42 @@ const tableData = [
   }
 ];
 
+```
+
+```html
+  <!-- Astro -->
+  <MainTable data={tableData} />
 
-<MainTable :data="data"></MainTable>
+  <!-- Vue -->
+  <MainTable :data="tableData" />
 ```
+
+
+
+# Table
+
+<div class="component-preview">
+    <MainTable data={tableDataSecondary} />
+</div>
+
+## Code
+
+```ts
+const tableDataSecondary = [
+  {
+    name: "Lorem Ipsum",
+    email: "lorem@email.com",
+  },
+  {
+    name: "Chuck Norris",
+    email: "ipsum@email.com",
+  },
+  {
+    name: "Ipsum Lorem",
+    email: "lorem@email.com",
+  }
+];
+
+
+<MainTable data={tableDataSecondary} />
+```

package/src/pages/core/introduction.mdx

@@ -66,7 +66,7 @@ You can import your component library or create your own and document it easily.
 There's a class called `.component-preview` that you can use to wrap your component in a grid, and it will look like this:
 
 <div class="component-preview">
-    <Button primary>Your component</Button>
+    <Button primary rounded>Your component</Button>
 </div>
 
 ### Have fun!

package/src/pages/index.astro

@@ -43,6 +43,7 @@ const navItems = [
       href="/core/introduction/"
       title="Spoko Design System"
       primary
+      rounded 
       >
      Read More
     </Button>

package/src/styles/_variables.scss

@@ -1,20 +1,11 @@
-$navbar-height-md: 56px;
-$navbar-height: 52px;
-$special-menu-height: 145px;
-$footer-navbar-height: 45px;
-$footer-content-height: 166px;
-
-$content-padding-bottom: 17px;
-
-
 // Color system
 
 $white: #fff !default;
-$gray-100: #f8f9fa !default;
-$gray-200: #e9ecef !default;
-$gray-300: #dee2e6 !default;
-$gray-400: #ced4da !default;
-$gray-500: #adb5bd !default;
+$gray-100: #F3F4F6;
+$gray-200: #E5E7EB;
+$gray-300: #B5BBC5;
+$gray-400: #9CA3AF;
+$gray-500: #64748B!default;
 $gray-600: #6c757d !default;
 $gray-700: #495057 !default;
 $gray-800: #343a40 !default;
@@ -51,7 +42,7 @@ $vwblue: #0786ba;
 $vwblue2: #00b1eb;
 $blue: #0099da; //#0070B2; //#007bff !default;
 $darkblue: #00437A;
-$verydarkblue: #232737;
+$verydarkblue: #001E50;
 $indigo: #6610f2 !default;
 $purple: #6f42c1 !default;
 $pink: #e83e8c !default;

package/src/styles/base/_base.scss

@@ -1,5 +1,7 @@
 :root {
   --primary: #{$blue};
+  --secondary: #{$gray-500}
+  --tertiary: #{$verydarkblue};
 }
 
 * {
@@ -26,7 +28,7 @@ body {
 
 ::-webkit-scrollbar-thumb {
     border-radius: 0;
-    background-color: $blue;
+    background-color: var(--primary);
 }
 
 *:focus {
@@ -70,13 +72,13 @@ html {
     }
   
     &::-webkit-scrollbar-thumb {
-      background-color: $primary; /* color of the scroll thumb */
+      background-color: var(--primary); /* color of the scroll thumb */
       border-radius: 0; /* roundness of the scroll thumb */
       border: 0 solid #00437A; /* creates padding around scroll thumb */
     }
   
     scrollbar-width: thin;
-    scrollbar-color: $primary #00437A;
+    scrollbar-color: var(--primary) #00437A;
   }
 
   
@@ -84,7 +86,7 @@ html {
 :root {
     // --swiper-navigation-color: #0099da;
     --swiper-navigation-size: 22px;
-    --swiper-scrollbar-drag-bg-color: #0099da;
+    --swiper-scrollbar-drag-bg-color: var(--primary);
     --swiper-scrollbar-size: 1px;
     --swiper-scrollbar-bottom: 0px;
   }
@@ -163,4 +165,11 @@ html {
 
 svg {
   color: var(--primary);
-}
+}
+
+.btn-primary,
+.btn-secondary {
+  svg {
+    color: #fff;
+  }
+}

package/src/styles/base/_typography.scss

@@ -40,11 +40,6 @@
     font-display: fallback;
 }
 
-// .font-headregular {
-//     font-family: 'vw_headregular', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", Arial, sans-serif;
-//     font-display: fallback;
-// }
-
 @font-face {
     font-family: 'vw_headlight';
     src: url('/fonts/vwhead-light-webfont.woff2') format('woff2'),;
@@ -53,10 +48,6 @@
     font-display: swap;
 }
 
-// .font-headlight {
-//     font-family: 'vw_headlight';
-// }
-
 @font-face {
     font-family: 'Nova Mono';
     src: url('/fonts/nova-mono-v13-latin-regular.woff2') format('woff2');
@@ -65,10 +56,6 @@
     font-display: swap; //fallback;
 }
 
-// .font-mono {
-//     font-family: 'Nova Mono';
-// }
-
 @font-face {
     font-family: 'vw_textlight';
     src: url('/fonts/vwtext-light-webfont.woff2') format('woff2');
@@ -77,72 +64,6 @@
     font-display: swap;
 }
 
-// @font-face {
-//     font-family: 'swiper-icons';
-//     src: url('/fonts/swiper-icons.woff2') format('woff2');
-//     font-weight: normal;
-//     font-style: normal;
-//     font-display: swap;
-// }
-
-// .font-textlight {
-//     font-family: 'vw_textlight';
-// }
-
-// @font-face {
-//     font-family: 'vw-headline-ltab';
-//     src: url('/fonts/VWHeadline-LtTab.woff2') format('woff2');
-//     font-weight: normal;
-//     font-style: normal;
-//     font-display: swap;
-// }
-
-// .font-vw-headline-ltab {
-//     font-family: 'vw-headline-ltab';
-// }
-
-// @font-face {
-//     font-family: 'futura-book';
-//     src: url('/fonts/Futura-Book.woff2') format('woff2');
-//     font-weight: normal;
-//     font-style: normal;
-//     font-display: swap;
-// }
-
-// .font-futura-book {
-//     font-family: 'futura-book';
-// }
-
-// @font-face {
-//     font-family: 'futura-pt-light';
-//     src: url('/fonts/futura-pt-light.woff2') format('woff2');
-//     // src: url('/fonts/Futura-Book.woff2') format('woff2');
-//     font-weight: normal;
-//     font-style: normal;
-//     font-display: swap;
-// }
-
-// .font-futura-pt-light {
-//     font-family: 'futura-pt-light';
-// }
-
-
-// @font-face {
-//     font-family: 'futura-pt-medium';
-//     src: url('/fonts/futura-pt-medium.woff2') format('woff2');
-//     font-weight: normal;
-//     font-style: normal;
-//     font-display: swap;
-// }
-
-// .font-futura-pt-medium {
-//     font-family: 'futura-pt-medium';
-// }
-
-
-// src: url('/fonts/Futura-Book-BT.woff') format('woff');
-// src: url('/fonts/futura-bk-bt-book_18979-webfont.woff2') format('woff2');
-
 [data-text]:before {
     content: attr(data-text);
-}
+}

package/src/styles/content.scss

@@ -18,16 +18,14 @@
     }
     &>h3 {
       font-size: 15pt;
-      font-weight: 600;
     }
     &>h4 {
       font-size: 13pt;
     }
-  }
- 
-  p {
-    // margin-top: 0.77rem;
-    // color: theme("colors.slate.600");
+
+    ul {
+      @apply list-disc pl-5
+    }
   }
 
   code {
@@ -36,7 +34,7 @@
   }
 
   .component-preview {
-    @apply bg-blue-600 bg-opacity-5 px-0 py-4 mx-0 sm:(p-8) flex items-center;
+    @apply bg-blue-600 bg-opacity-5 px-0 py-4 mx-0 flex items-center sm:(p-8);
     gap: 1rem;
     border-radius: 0.33rem;
     border: 1px solid theme("colors.slate.200");
@@ -49,7 +47,6 @@
   }
 }
 
-
 table {
   @apply table-auto text-left border bg-white shadow-md;
 
@@ -64,4 +61,4 @@ table {
   thead {
     @apply bg-gray-100;
   }
-}
+}

package/src/styles/main.scss

@@ -3,20 +3,4 @@
 @import "base/typography";
 @import "base/base";
   
-
-
-
 @import "content.scss";
-
-
-
-
-
-// body {
-//   font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
-//     Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
-// }
-
-// @tailwind base;
-// @tailwind components;
-// @tailwind utilities;