spoko-design-system 0.0.1 → 0.0.5

package/src/pages/components/jumbatron.mdx

@@ -1,48 +1,71 @@
----
-title: "Jumbatron"
-layout: "../../layouts/MainLayout.astro"
----
-import Jumbatron from '../../components/Jumbatron.vue'
-
-## 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.
-
-Find the code for this page in the `src/pages/components/buttons.md` file.
-<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.`} />
-        <p slot="subtitle"
-          class="mt-3 text-base text-gray-200 sm:mt-5 text-lg md:text-xl lg:mx-0 md:mt-5"
-          set:html="Nunc posuere massa eget turpis laoreet ultrices eget vel massa."
-        />
-
-
-        <a slot="cta"
-          href="/about/"
-          title="short text"
-          class="w-full inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-full text-white bg-lightBlue-500 hover:bg-lightBlue-600 md:py-2 md:text-lg md:px-10 shadow"
-        >
-         Read More
-        </a>
-    </Jumbatron>
-</div>
-
-```js
-    <Jumbatron>
-        <span slot="intro" set:html="text-intro" />
-        <p slot="subtitle"
-          class="mt-3 text-base text-gray-200 sm:mt-5 text-lg md:text-xl lg:mx-0 md:mt-5"
-          set:html="subtitle"
-        />
-
-
-        <a slot="cta"
-          href="/about/"
-          title="short text"
-          class="w-full inline-flex items-center justify-center px-8 py-3 border border-transparent text-base font-medium rounded-full text-white bg-lightBlue-500 hover:bg-lightBlue-600 md:py-2 md:text-lg md:px-10 shadow"
-        >
-         Read More
-        </a>
-    </Jumbatron>
-```
+---
+title: "Jumbatron"
+layout: "../../layouts/MainLayout.astro"
+---
+import Jumbatron from '../../components/Jumbatron.vue'
+import Button from '../../components/Button.vue'
+
+## 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.
+
+Find the code for this page in the `src/pages/components/jumbatron.mdx` file.
+<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.`} />
+        <p slot="subtitle"
+          class="mt-3 text-base text-gray-200 sm:mt-5 text-lg md:text-xl lg:mx-0 md:mt-5"
+          set:html="Nunc posuere massa eget turpis laoreet ultrices eget vel massa."
+        />
+        <Button primary slot="cta"
+          href="#"
+          title="short text"
+        >
+         Read More
+        </Button>
+    </Jumbatron>
+</div>
+
+```js
+    <Jumbatron>
+        <span slot="intro" set:html="text-intro" />
+        <p slot="subtitle"
+          class="mt-3 text-base text-gray-200 sm:mt-5 text-lg md:text-xl lg:mx-0 md:mt-5"
+          set:html="subtitle"
+        />
+        <Button primary slot="cta"
+          href="#"
+          title="short text"
+        >
+         Read More
+        </Button>
+    </Jumbatron>
+```
+
+## Jumbatron smaller
+
+<div class="component-preview">
+    <Jumbatron class="w-full" small>
+        <span slot="intro" set:html={`Lorem ipsum dolor sit amet, <span class=\"text-lightBlue-500\">consectetur</span> adipiscing elit.`} />
+        <p slot="subtitle"
+          class="mt-5 sm:mt-8 sm:flex sm:justify-center"
+          set:html="Nunc posuere massa eget turpis laoreet ultrices eget vel massa."
+        />
+    </Jumbatron>
+</div>
+
+```js
+    <Jumbatron small>
+        <span slot="intro" set:html="text-intro" />
+        <p slot="subtitle"
+          class="mt-5 sm:mt-8 sm:flex sm:justify-center"
+          set:html="subtitle"
+        />
+        <Button primary slot="cta"
+          href="#"
+          title="short text"
+        >
+         Read More
+        </Button>
+    </Jumbatron>
+```

package/src/pages/components/modal.mdx

@@ -0,0 +1,64 @@
+---
+title: "Modal"
+layout: "../../layouts/MainLayout.astro"
+---
+import Modal from '../../components/Modal.astro'
+import Button from '../../components/Button.vue'
+import { Icon } from 'astro-icon/components';
+
+
+## Modal
+
+Native modal window based on `<dialog>` tag with `::backdrop` CSS pseudo-element (pure CSS3 modal window).
+#
+**Documentation:**
+
+- https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog
+- https://developer.mozilla.org/en-US/docs/Web/CSS/::backdrop
+
+### Modal window
+
+
+<div class="component-preview">
+     <Modal id="dialog" open="Open modal">
+          <main slot="main">
+               <p>Some extra content you would like here</p>
+               <hr />
+          </main>
+          <Button primary slot="close" class="mt-4">Close</Button>
+     </Modal>
+</div>
+
+```js
+<Modal id="dialog" open="Open modal">
+    <main slot="main">
+        <p>Some extra content you would like here</p>
+        <hr />
+        <img width="60" height="80" src="/assets/logo.svg" alt="Astro logo">
+    </main>
+    <Button primary slot="close" class="mt-4">Close</Button>
+</Modal>
+```
+
+### Modal with different close button
+
+<div class="component-preview">
+     <Modal id="dialog2" open="Open modal">
+          <main slot="main">
+               <p>Some extra content you would like here</p>
+          </main>
+     <Button primary slot="close" class="mt-4"><Icon name="octicon:x-24" /></Button>
+     </Modal>
+</div>
+
+```js
+<Modal id="dialog2" open="Open modal">
+    <main slot="main">
+        <p>Some extra content you would like here</p>
+        <img width="60" height="80" src="/assets/logo.svg" alt="Astro logo">
+    </main>
+     <Button primary slot="close" class="mt-4"><Icon name="octicon:x-24" /></Button>
+</Modal>
+```
+
+

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

@@ -0,0 +1,58 @@
+---
+title: "PostHeader"
+layout: "../../layouts/MainLayout.astro"
+---
+import PostHeader from '../../components/PostHeader.astro'
+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
+
+WordPress PostHeader - post top component for WordPress Single Post template data like categories etc. comes from WP Rest API.
+
+
+<div class="component-preview">
+  <div class="relative w-full">
+    <PostHeader
+      author={author}
+      categories={categories}
+      title="Lorem Ipsum"
+      date={date}
+      image="https://img.freepik.com/free-photo/morskie-oko-tatry_1204-510.jpg?w=1380&t=st=1706297574~exp=1706298174~hmac=5c93e7317e7dbe602d5dcd708c5b9708ffabcb5e8ab2b7f2790941975dfcefe4"
+    />
+  </div>
+</div>
+
+```js
+  <div class="relative">
+    <PostHeader
+      author={ { firstName: 'Szymon', name: 'CNK' }  }
+      categories={  [{"name":"Tools & garage accessories","uri":"/category/garage/tools-garage-accessories/"}, , {"name":"Lorem Ipsum","uri":"#"}] }
+            title="Lorem Ipsum"
+      date="2023-07-13T01:35:03"
+      image="https://img.freepik.com/free-photo/morskie-oko-tatry_1204-510.jpg?w=1380&t=st=1706297574~exp=1706298174~hmac=5c93e7317e7dbe602d5dcd708c5b9708ffabcb5e8ab2b7f2790941975dfcefe4"
+    />
+  </div>
+```
+
+
+## PostHeader - only title
+
+<div class="component-preview">
+  <div class="relative w-full">
+    <PostHeader
+      title="Lorem Ipsum"
+      image="https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg?w=1380&t=st=1706297408~exp=1706298008~hmac=34fe549db6a665d24269d38a8ecdd7eb3f82cfea6346c8a4039ee3c03b62aad8"
+    />
+  </div>
+</div>
+
+```js
+  <div class="relative">
+    <PostHeader
+      title="Lorem Ipsum"
+      image="https://img.freepik.com/free-photo/painting-mountain-lake-with-mountain-background_188544-9126.jpg?w=1380&t=st=1706297408~exp=1706298008~hmac=34fe549db6a665d24269d38a8ecdd7eb3f82cfea6346c8a4039ee3c03b62aad8"
+    />
+  </div>
+```

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

@@ -0,0 +1,41 @@
+---
+title: "PrCode"
+layout: "../../layouts/MainLayout.astro"
+---
+import PrCode from '../../components/PrCode.vue'
+
+
+## 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. 
+
+PR codes are located on vehicle´s build sticker that is located on first pages of cars warranty booklet or there should be one in a trunk as well usually under the carpet or in spare tire area.
+
+They are important when purchasing spare parts as they provide information about the manufacturer, make, model, year of manufacture, and other vehicle details.
+
+
+
+
+#### import:
+
+```js
+import PrCode from 'spoko-design-system/src/components/PrCode.vue'
+```
+
+
+### PR-Code
+
+<div class="component-preview">
+     <div class="bg-white p-6 w-full">
+          <PrCode prcode="2JP" />
+          <PrCode prcode="1ZJ" />
+     </div>
+</div>
+
+```js
+     <PrCode prcode="2JP" />
+     <PrCode prcode="1ZJ" />
+```
+
+

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

@@ -0,0 +1,65 @@
+---
+title: "ProductNumber"
+layout: "../../layouts/MainLayout.astro"
+---
+import ProductNumber from '../../components/ProductNumber.astro'
+
+## 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
+      big
+      productNumber="6R0920870F"
+      class="mb-2"
+    />
+
+    <ProductNumber
+      big
+      isPdp
+      productNumber="000051443F"
+      class="mb-2"
+    />
+
+    <ProductNumber
+      isPdp
+      productNumber="WHT005227"
+      class="mb-2"
+    />
+
+    <ProductNumber
+      isPdp
+      productNumber="N0385491"
+      class="mb-2"
+    />
+  </div>
+</div>
+
+```js
+<ProductNumber
+  big
+  productNumber="6R0920870F"
+  class="mb-2"
+/>
+
+<ProductNumber
+  big
+  isPdp
+  productNumber="000051443F"
+  class="mb-2"
+/>
+
+<ProductNumber
+  isPdp
+  productNumber="WHT005227"
+  class="mb-2"
+/>
+
+<ProductNumber
+  isPdp
+  productNumber="N0385491"
+  class="mb-2"
+/>
+```

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

@@ -0,0 +1,39 @@
+---
+title: "ProductTile"
+layout: "../../layouts/MainLayout.astro"
+---
+import ProductTile from '../../components/ProductTile.astro'
+
+export const productObject = {
+  name: 'Combi-instrument MFA+',
+  url: 'https://google.com',
+  number: '6R0920870F',
+  photo: 'https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337'
+}
+
+## ProductTile
+
+ProductTile - product link component which can be used for carousels, section with related products, recently added etc.
+
+<div class="component-preview">
+  <div class="flex flex-wrap bg-white w-full p-4 pb-0">
+
+      <ProductTile productObject={productObject} />
+      <ProductTile productObject={productObject} />
+      <ProductTile productObject={productObject} />
+      <ProductTile productObject={productObject} />
+      <ProductTile productObjec={productObject}t />
+      <ProductTile productObject={productObject} />
+  </div>
+</div>
+
+```js
+export const productObject = {
+  name: 'Combi-instrument MFA+',
+  url: 'https://google.com',
+  number: '6R0920870F',
+  photo: 'https://img.freepik.com/darmowe-wektory/tlo-retro-modeli-geometrycznych_52683-17902.jpg?w=1380&t=st=1706311337'
+}
+
+<ProductTile productObject={productObject} />
+```

package/src/pages/components/slimbanner.mdx

@@ -1,27 +1,29 @@
----
-title: "SlimBanner"
-layout: "../../layouts/MainLayout.astro"
----
-import SlimBanner from '../../components/SlimBanner.vue'
-
-## SlimBanner
-
-SlimBanner - solidarity with Ukraine.
-
-<div class="component-preview">
-      <SlimBanner
-        client:load
-        showCloseButton
-        transition:name="slim-banner"
-        transition:persist
-      />
-</div>
-
-```js
-      <SlimBanner
-        client:load
-        showCloseButton
-        transition:name="slim-banner"
-        transition:persist
-      />
-```
+---
+title: "SlimBanner"
+layout: "../../layouts/MainLayout.astro"
+---
+import SlimBanner from '../../components/SlimBanner.vue'
+
+## SlimBanner
+
+SlimBanner - solidarity with Ukraine.
+
+<div class="component-preview">
+      <SlimBanner
+        class="w-full"
+        client:load
+        showCloseButton
+        transition:name="slim-banner"
+        transition:persist
+      />
+</div>
+
+```js
+<SlimBanner
+  class="w-full"
+  client:load
+  showCloseButton
+  transition:name="slim-banner"
+  transition:persist
+/>
+```

package/src/pages/components/table.mdx

@@ -1,20 +1,39 @@
----
-title: "Table"
-layout: "../../layouts/MainLayout.astro"
-
----
-
-import MainTable from '../../components/MainTable.vue'
-
-
-## Primary table
-
-<div class="component-preview">
-    <MainTable></MainTable>
-</div>
-
-### Code
-
-```ts
-<MainTable :data="data"></MainTable>
-```
+---
+title: "Table"
+layout: "../../layouts/MainLayout.astro"
+
+---
+
+import MainTable from '../../components/MainTable.vue'
+
+
+## Primary table
+
+<div class="component-preview">
+    <MainTable></MainTable>
+</div>
+
+### Code
+
+```ts
+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",
+  }
+];
+
+
+<MainTable :data="data"></MainTable>
+```

package/src/pages/core/colors.mdx

@@ -1,8 +1,8 @@
----
-layout: ../../layouts/MainLayout.astro
----
-
-import MainColors from '../../components/MainColors.vue';
-
-<h1>Colors</h1>
-<MainColors />
+---
+layout: ../../layouts/MainLayout.astro
+---
+
+import MainColors from '../../components/MainColors.vue';
+
+<h1>Colors</h1>
+<MainColors />

package/src/pages/core/introduction.mdx

@@ -1,68 +1,74 @@
----
-title: Introduction
-description: Docs intro
-layout: ../../layouts/MainLayout.astro
----
-
-# Spoko Design System Theme
-
-Astro Design System is the easiest way to start your our design system. Since Astro is compatible with many frameworks, you can import your components and document them right in the markdown files.
-
-## Getting started
-
-### Adding new sections
-
-Although it's not required, you can create folders for new sections.
-
-To show the section on the left side navigation, add it to the navigation config file at `src/config.ts`.
-
-Example:
-
-```js
-export const SIDEBAR = [
-    { text: "Core", header: true },
-    { text: "Introduction", link: "/core/introduction" },
-    ...,
-    { text: "Components", header: true },
-    { text: "Buttons", link: "/components/buttons" },
-    ...,
-    { text: "New section", header: true },
-    { text: "New component", link: "/new-section/new-component.md" },
-];
-```
-
-### Adding new pages
-
-To add new pages just create an .astro or markdown file in `src/pages/[section]/my-page.md`. Remember to add it to the navigation config in `src/config.ts` so it shows up in the left side navigation.
-
-You're free to organize the pages however you want.
-
-### Customizing Core section (colors, typography, shadows...)
-
-If you want to customize the default colors, typography or shadows you can find the configuration file at `src/config/design.config.ts`.
-
-Feel free to add new pages to the Core section
-
-### Customizing the page layout
-
-You can find the css for the pages in `src/styles/content.scss`.
-
-### Adding your components
-
-Astro is great for design systems because it allows you to import components from different frameworks like react, vue or svelte.
-
-To get started check how the `MainButton` component is used in the `src/pages/en/buttons.md` file.
-
-You can import your component library or create your own and document it easily.
-
-### `.component-preview` utility
-
-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 class="text-white bg-blue-500 px-4 py-2 rounded-md">Your component</button>
-</div>
-
-### Have fun!
-
-Spoko Design System template was made by  **[@spokospace](https://spoko.space)** for personal and commercial use.
+---
+title: Introduction
+description: Docs intro
+layout: ../../layouts/MainLayout.astro
+---
+import Button from '../../components/Button.vue'
+
+# Spoko Design System Theme
+
+SDS is the easiest way to start with some my websites. 
+Since Astro is compatible with many frameworks, we can import components and document them right in the markdown files.
+
+The project is still in the development phase, use at your own risk ;-)
+
+
+## Getting started
+
+### Adding new sections
+
+Although it's not required, you can create folders for new sections.
+
+To show the section on the left side navigation, add it to the navigation config file at `src/config.ts`.
+
+Example:
+
+```js
+export const SIDEBAR = [
+    { text: "Core", header: true },
+    { text: "Introduction", link: "/core/introduction" },
+    ...,
+    { text: "Components", header: true },
+    { text: "Buttons", link: "/components/buttons" },
+    ...,
+    { text: "New section", header: true },
+    { text: "New component", link: "/new-section/new-component.md" },
+];
+```
+
+### Adding new pages
+
+To add new pages just create an .astro or markdown file in `src/pages/[section]/my-page.mdx`. Remember to add it to the navigation config in `src/config.ts` so it shows up in the left side navigation.
+
+You're free to organize the pages however you want.
+
+### Customizing Core section (colors, typography, shadows...)
+
+If you want to customize the default colors, typography or shadows you can find the configuration file at `src/design.config.ts`. I think I have prepared enough shades of blue ;-) 
+
+Feel free to add new pages to the Core section
+
+### Customizing the page layout
+
+You can find the css for the pages in `src/styles/content.scss`.
+
+### Adding mew components
+
+Astro is great for design systems because it allows you to import components from different frameworks like react, vue or svelte.
+
+To get started check how the `Button` component is used in the `src/pages/buttons.mdx` file.
+
+You can import your component library or create your own and document it easily.
+
+
+### `.component-preview` utility
+
+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>
+</div>
+
+### Have fun!
+
+Spoko Design System template was made by  **[@spokospace](https://spoko.space)** for personal and commercial use.