spoko-design-system 0.0.1

package/src/components/MainInput.vue

@@ -0,0 +1,18 @@
+<template>
+  <label class="group text-left w-full max-w-xs flex flex-col">
+    <span
+      class="group-hover:text-blue-600 ml-2 text-slate-600 text-sm group-focus-within:text-blue-600"
+      >{{ label }}</span
+    >
+    <input
+      class="group-hover:border-blue-500 border px-4 py-2 transition-colors rounded-md w-full focus:ring focus:outline-none focus:border-blue-600"
+      type="text"
+    />
+  </label>
+</template>
+
+<script setup lang="ts">
+const props = defineProps<{
+  label: string;
+}>();
+</script>

package/src/components/MainStatusPill.vue

@@ -0,0 +1,32 @@
+<template>
+  <span class="px-3 py-1 rounded-xl" :class="classes"><slot></slot></span>
+</template>
+
+<script>
+export default {
+  props: {
+    info: {
+      type: Boolean,
+    },
+    success: {
+      type: Boolean,
+    },
+    warning: {
+      type: Boolean,
+    },
+    error: {
+      type: Boolean,
+    },
+  },
+  computed: {
+    classes() {
+      return {
+        "text-green-500 bg-green-50": this.success,
+        "text-blue-500 bg-blue-50": this.info,
+        "text-yellow-600 bg-yellow-50": this.warning,
+        "text-red-500 bg-red-50": this.error,
+      };
+    },
+  },
+};
+</script>

package/src/components/MainTable.vue

@@ -0,0 +1,45 @@
+<template>
+  <table class="table-auto text-left border bg-white shadow-md">
+    <thead class="bg-slate-800 text-white">
+      <tr class="border">
+        <th class="px-4 py-2">id</th>
+        <th class="px-4 py-2">Name</th>
+        <th class="px-4 py-2">Email</th>
+      </tr>
+    </thead>
+    <tbody>
+      <tr class="border" v-for="row in tableData" :key="row">
+        <td class="px-4 py-2" v-for="key in Object.keys(row)" :key="key">
+          {{ row[key] }}
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
+
+<script setup lang="ts">
+const tableData = [
+  {
+    id: 1,
+    name: "John Doe",
+    email: "john@email.com",
+  },
+  {
+    id: 2,
+    name: "Jane Doe",
+    email: "jane@email.com",
+  },
+  {
+    id: 3,
+    name: "Jack Doe",
+    email: "jack@email.com",
+  },
+  {
+    id: 4,
+    name: "Jill Doe",
+    email: "jill@email.com",
+  },
+];
+</script>
+
+<style scoped></style>

package/src/components/PageContent.astro

@@ -0,0 +1,14 @@
+---
+const { content, githubEditUrl } = Astro.props;
+const title = content.title;
+// const headers = content.astro.headers;
+---
+
+<article id="article" class="content">
+	<section class="main-section">
+		<nav class="block sm:hidden">
+		</nav>
+		<slot />
+	</section>
+</article>
+

package/src/components/RightSidebar.astro

@@ -0,0 +1,11 @@
+---
+import TableOfContents from './TableOfContents.astro';
+const { content } = Astro.props;
+const headers = content.astro?.headers || [];
+---
+
+<nav aria-labelledby="grid-right">
+	<div class="px-8">
+		<TableOfContents headers={headers} />
+	</div>
+</nav>

package/src/components/SlimBanner.vue

@@ -0,0 +1,60 @@
+<script lang="ts" setup>
+import { ref } from 'vue';
+
+const props = defineProps({
+  showCloseButton: {
+    type: Boolean,
+    default: true,
+    required: false,
+  },
+})
+const isShow = ref(true)
+const toggleVisibility = () => {
+  isShow.value = !isShow.value
+}
+</script>
+
+<template>
+  <div v-if="isShow" data-pagefind-ignore class="slimbanner bg-lightBlue-500 drop-shadow-md z-2 px-4 sm:px-8 py-3 flex items-center justify-center text-xs sm:text-base leading-none text-white relative print-hidden">
+    <span class="inline-block text-4xl w-6 h-3.5 min-w-[1.25rem] mr-3 bg-gradient-to-b stops-[#0057b7_50%,50%,#ffd700_100%]" />
+    <span class="leading-none "><span data-text="We stand with our friends and colleagues in Ukraine. To support Ukraine in their time of need visit " />
+      <a href="https://polo.blue/support-ukraine/" target="_blank" rel="noopener" class="underline underline-offset-2 hover:text-blue-wrc">this page</a>.
+    </span>
+
+    <button class="ml-3 text-white relative w-5 h-5"  v-if="props.showCloseButton" @click="toggleVisibility()" aria-label="Toggle">
+        <span class="close"></span>
+    </button>
+  </div>
+  <div v-else data-pagefind-ignore class="px-4 sm:px-8 py-3 flex items-center justify-center text-xs sm:text-base leading-none text-white 	 relative bg-black drop-shadow-md z-2 ">
+    <div class="tracking-widest leading-none">
+      <span data-text="RUSSIA IS A" /> <span class="underline decoration-red-600 decoration-1 underline-offset-3" data-text="TERRORIST"/> <span data-text="STATE" />
+    </div>
+    <button class="ml-3 text-red-600 relative w-5 h-5"  v-if="props.showCloseButton" @click="toggleVisibility()" aria-label="Toggle">
+        <span class="close"></span>
+    </button>
+  </div>
+</template>
+
+<style lang="scss">
+.close {
+  @apply absolute top-0 left-0 opacity-50	;
+}
+.close:hover {
+  @apply opacity-100;
+}
+.close:before, .close:after {
+  position: absolute;
+  left: 0.5rem;
+  content: ' ';
+  height: 1.25rem;
+  width: 2px;
+  background-color: #fff;
+}
+.close:before {
+  transform: rotate(45deg);
+}
+.close:after {
+  transform: rotate(-45deg);
+}
+
+</style>

package/src/components/TableOfContents.astro

@@ -0,0 +1,12 @@
+---
+	const { headers } = Astro.props;
+---
+<ul class="flex flex-col gap-4 mt-24">
+	{ headers.map(({ slug, text }) => {
+		return (
+		<li class="text-slate-400 hover:text-slate-800 hover:text-slate-900">
+			#<a href={`#${slug}`}>{text}</a>
+		</li>
+		) 
+	}) }
+</ul>

package/src/components/flags/FlagPL.vue

@@ -0,0 +1,3 @@
+<template>
+      <span class="drop-shadow inline-block text-4xl w-6 h-3.5 min-w-[1.25rem] mr-3 bg-gradient-to-b stops-[#fff_50%,50%,#d4213d_100%]" />
+</template>

package/src/components/flags/FlagUA.vue

@@ -0,0 +1,3 @@
+<template>
+    <span class="flag-ua" />
+</template>

package/src/components/layout/Container.astro

@@ -0,0 +1,7 @@
+---
+const { class: className, isFullWidth } = Astro.props;
+---
+
+<div class:list={[`${isFullWidth ? 'max-w-full' : 'max-w-screen-xl'}  mx-auto px-5 py-4`, className]}>
+  <slot />
+</div>

package/src/components/layout/Header.astro

@@ -0,0 +1,99 @@
+---
+const { class: className } = Astro.props;
+import { Icon } from 'astro-icon/components';
+
+const navItemsLeft = [
+	{
+		title: 'Components',
+		description: 'The building blocks for our UI.',
+		url: '/components/buttons',
+		img: '/Components.jpg'
+	},
+	{
+		title: 'Patterns',
+		description: 'Common patterns for building interfaces.',
+		url: '/patterns/introduction',
+		img: '/Patterns.jpg'
+	} 
+]
+
+
+// const navItemsRight = [
+// 	{
+// 		title: 'Components',
+// 		description: 'The building blocks for our UI.',
+// 		url: '/components/buttons',
+//     icon: 'carbon:language'
+// 	},
+// 	{
+// 		title: 'Patterns',
+// 		description: 'Common patterns for building interfaces.',
+// 		url: '/patterns/introduction',
+//     icon: 'carbon:language'
+// 	} 
+// ]
+
+---
+
+<nav
+  itemscope
+  itemtype="http://schema.org/WPHeader"
+  class:list={[className, "nav print-hidden mx-auto px-4 shadow-md relative flex items-center justify-between h-24 sm:h-14 flex-wrap sm:flex-nowrap pt-1 sm:pt-0"]}
+>
+
+    <div class="flex items-center justify-start sm:items-stretch order-1">
+      <slot name="logo"/>
+      
+      <div class="hidden sm:block sm:ml-6">
+        <div class="flex space-x-4" itemprop="hasPart">
+          { navItemsLeft.map(({ title, description, url, img }) => (
+            <a href={url}
+              class="text-gray-400 hover:bg-blue-700 hover:text-white px-3 py-1 rounded-full text-sm font-medium"
+              title={description}
+              itemprop="url"
+            >
+              {title}
+            </a>
+          ))}
+        </div>
+      </div>
+    </div>
+
+    <div
+      class="relative md:block sm:ml-4 w-full sm:w-64 sm:mr-auto order-4 sm:order-2 h-10">
+        <slot name="search"/>
+    </div>
+
+    <div class="flex items-center pr-0 sm:static sm:inset-auto ml-auto sm:ml-6 -mr-2 dark:text-gray-400 print:hidden order-3 sm:order-3 w-20 justify-end"
+      itemprop="hasPart" itemscope itemtype="http://schema.org/SiteNavigationElement"
+    >
+      <!-- <a class="icon-btn mx-2"
+        title="s"
+        data-astro-reload
+        aria-label="asd"
+        href="#asd"
+        itemprop="url"
+      >
+        asd
+      </a> -->
+
+      
+      <a class="icon-btn mx-2" 
+        title=""
+        aria-label=""
+        href="#"
+        itemprop="url"
+        data-astro-reload
+      >
+        <Icon name="carbon:language" />
+      </a>
+
+    </div>
+</nav>
+
+<style lang="scss" is:global>
+  nav {
+    /* display: grid;  */
+    place-items: center;
+  }
+</style>

package/src/config.ts

@@ -0,0 +1,42 @@
+export const SITE = {
+  title: "Spoko Design System",
+  description: "Astro theme to build your design system fast.",
+  defaultLanguage: "en_US",
+  twitter: "@spokospace",
+  github: "spokospace",
+  linkedin: "szymonberski",
+};
+
+export const OPEN_GRAPH = {
+  image: {
+    src: "",
+    alt: "",
+  },
+  twitter: "",
+};
+
+export const SIDEBAR = [
+  { text: "Core", header: true },
+  { text: "Introduction", link: "/core/introduction" },
+  { text: "Colors", link: "/core/colors" },
+  { text: "Typography", link: "/core/typography" },
+  { text: "Shadows", link: "/core/shadows" },
+
+  { text: "Components", header: true },
+  { text: "Jumbatron", link: "/components/jumbatron" },
+  { text: "SlimBanner", link: "/components/slimbanner" },
+  { text: "FuckRussia", link: "/components/fuck-russia" },
+  { text: "Flags", link: "/components/flags" },
+  { text: "HandDrive", link: "/components/hand-drive" },
+  { text: "Badges", link: "/components/badges" },
+  { text: "Buttons", link: "/components/buttons" },
+  { text: "Copyright", link: "/components/copyright" },
+  { text: "Input", link: "/components/input" },
+  { text: "Status pills", link: "/components/status-pill" },
+  { text: "Table", link: "/components/table" },
+  { text: "Icons", link: "/components/icons" },
+  { text: "Breadcrumbs", link: "/components/breadcrumbs" },
+
+  { text: "Patterns", header: true },
+  { text: "Introduction", link: "/patterns/introduction" },
+];

package/src/design.config.ts

@@ -0,0 +1,92 @@
+export const COLORS = {
+  gray: [
+    { name: "100", value: "#f3f4f6" },
+    { name: "200", value: "#e5e7eb" },
+    { name: "300", value: "#b5bbc5" },
+    { name: "400", value: "#9ca3af" },
+    { name: "500", value: "#64748B" },
+  ],
+  blue: [
+    { name: "50", value: "#eff6ff" },
+    { name: "100", value: "#dbeafe" },
+    { name: "200", value: "#bfdbfe" },
+    { name: "300", value: "#93c5fd" },
+    { name: "400", value: "#60a5fa" },
+    { name: "500", value: "#3b82f6" },
+    { name: "600", value: "#02307d" },
+    { name: "700", value: "#001e50" },
+    { name: "800", value: "#00437a" },
+    { name: "900", value: "#000f28" },
+    { name: "901", value: "#0c1a32" },
+    { name: "wrc", value: "#0000c8" },
+  ],
+  lightBlue: [
+    { name: "400", value: "#00b0f0" },
+    { name: "500", value: "#0099da" },
+    { name: "600", value: "#0087c1" },
+    { name: "700", value: "#006ea6" },
+  ],
+  green: [
+    { name: "50", value: "#f0fdfc" },
+    { name: "100", value: "#e1f9f7" },
+    { name: "200", value: "#c3f3eb" },
+    { name: "300", value: "#a0ece5" },
+    { name: "400", value: "#7ddcd3" },
+    { name: "500", value: "#5bc9c0" },
+    { name: "600", value: "#4db7b2" },
+    { name: "700", value: "#3da69e" },
+    { name: "800", value: "#2d8c82" },
+    { name: "900", value: "#1e7a6e" },
+  ],
+  red: [
+    { name: "50", value: "#fdf2f2" },
+    { name: "100", value: "#fde8e8" },
+    { name: "200", value: "#fcd9d9" },
+    { name: "300", value: "#fbcbcb" },
+    { name: "400", value: "#f8b5b5" },
+    { name: "500", value: "#f49f9f" },
+    { name: "600", value: "#e57373" },
+    { name: "700", value: "#d73a3a" },
+    { name: "800", value: "#c62e2e" },
+    { name: "900", value: "#ad1c1c" },
+  ],
+};
+
+export const TYPOGRAPHY = {
+  fontFamily: "Inter, system",
+  scale: [
+    { name: "h1", size: "22pt", weight: "400" },
+    { name: "h2", size: "17pt", weight: "500" },
+    { name: "h3", size: "13pt", weight: "600" },
+    { name: "h4", size: "13pt", weight: "500" },
+    { name: "body", size: "13pt", weight: "400" },
+    { name: "button", size: "13pt", weight: "400" },
+    { name: "caption", size: "10pt", weight: "400" },
+  ],
+};
+
+export const SHADOWS = {
+  types: [
+    { name: "xs", value: "0px 2px 4px rgba(0, 0, 0, 0.08)" },
+    { name: "sm", value: "0px 4px 8px rgba(0, 0, 0, 0.125)" },
+    { name: "md", value: "0px 8px 16px rgba(0, 0, 0, 0.125)" },
+    { name: "lg", value: "0px 16px 32px rgba(0, 0, 0, 0.125)" },
+    { name: "xl", value: "0px 32px 64px rgba(0, 0, 0, 0.125)" },
+    { name: "2xl", value: "0px 64px 128px rgba(0, 0, 0, 0.125)" },
+  ],
+};
+
+
+export const FONTS = {
+types: [
+    { name: "vw_textregular", value: "font-textregular" },
+    { name: "vw_textregular", value: "font-sans" },
+    { name: "vw_textbold", value: "font-textbold" },
+    { name: "vw_headbold", value: "font-headbold" },
+    { name: "vw_headregular", value: "vw_headregular" },
+    { name: "vw_headlight", value: "font-headlight" },
+    { name: "vw_textlight", value: "font-textlight" },
+    { name: "Nova Mono", value: "font-novamono" },
+    { name: "Nova Mono", value: "font-mono" }
+  ],
+};

package/src/env.d.ts

@@ -0,0 +1,2 @@
+/// <reference path="../.astro/types.d.ts" />
+/// <reference types="astro/client" />

package/src/layouts/MainLayout.astro

@@ -0,0 +1,50 @@
+---
+import HeadCommon from '../components/HeadCommon.astro';
+import HeadSEO from '../components/HeadSEO.astro';
+import Header from '../components/Header/Header.astro';
+import PageContent from '../components/PageContent.astro';
+import LeftSidebar from '../components/LeftSidebar.astro';
+import RightSidebar from '../components/RightSidebar.astro';
+import * as CONFIG from '../config';
+import { t, changeLanguage } from "i18next";
+import '../styles/main.scss';
+const locale = "en";
+changeLanguage(locale);
+
+const { content = {} } = Astro.props;
+const currentPage = Astro.url.pathname;
+// const currentFile = `src/pages${currentPage.replace(/\/$/, '')}.md`;
+const canonicalURL = new URL(Astro.url.pathname, Astro.site).toString();
+console.log('canonicalURL', canonicalURL)
+---
+
+<html dir={content.dir ?? 'ltr'} lang={content.lang ?? 'en-us'} class="initial">
+	<head>
+		<HeadCommon />
+		<HeadSEO {content} canonicalURL={canonicalURL} />
+		<title>{content.title ? `${content.title} 🚀 ${CONFIG.SITE.title}` : CONFIG.SITE.title}</title>
+	</head>
+
+	<body class="bg-slate-100">
+		<div class="sticky top-0 z-10 w-full">
+			<Header currentPage={currentPage} />
+		</div>
+		<div class="grid grid-cols-12">
+			<div class="col-span-3 sticky top-0 pt-12 h-screen flex">
+				<div class="ml-auto">
+					<LeftSidebar currentPage={currentPage} />
+				</div>
+			</div>
+			<main class="py-4 px-8 pb-32 col-span-6  overflow-auto">
+				<div>
+					<PageContent content={content}>
+						<slot />
+					</PageContent>
+				</div>
+			</main>
+			<div class="col-span-3 sticky top-0 h-screen flex">
+				<RightSidebar content={content} />
+			</div>
+		</div>
+	</body>
+</html>

package/src/pages/components/badges.mdx

@@ -0,0 +1,35 @@
+---
+title: "Badges"
+layout: "../../layouts/MainLayout.astro"
+---
+import Badges from '../../components/Badges.vue'
+
+## Badges
+
+### Badges - GTI
+<div class="component-preview">
+        <div class="relative min-h-6	">
+                <Badges badges={['GTI']} class:list="top-2" />
+        </div>
+</div>
+```js
+        <div class="relative min-h-14	">
+                <Badges badges={['GTI']} class:list="top-2" />
+        </div>
+
+```
+
+
+### Badges - Motorsport
+<div class="component-preview">
+        <div class="relative min-h-6	">
+                <Badges badges={['Motorsport']} class:list="top-2" />
+        </div>
+</div>
+
+```js
+        <div class="relative min-h-14	">
+                <Badges badges={['Motorsport']} class:list="top-2" />
+        </div>
+
+```

package/src/pages/components/breadcrumbs.mdx

@@ -0,0 +1,103 @@
+---
+title: "Breadcrumbs"
+layout: "../../layouts/MainLayout.astro"
+
+
+---
+import Breadcrumbs from '../../components/Breadcrumbs.vue'
+
+## Breadcrumbs
+
+Breadcrumbs component
+
+
+### show back
+
+<div class="component-preview">
+    <Breadcrumbs
+      breadcrumbs={ [ {"name": "Level1", "path": "level 1"}, {"name": "Level 2", "path": "level2"}, {"name": "Level 3", "path": "level3"} ] }
+      data-lang="en"
+      product-number="6R0XXXXXX"
+      class="py-1 order-0 px-1 max-w-full flex bg-white"
+      show-back
+      text-back="Back"
+    />
+</div>
+
+```js
+
+            <Breadcrumbs
+              breadcrumbs={ 
+                [ 
+                  {"name": "Level1", "path": "level 1"},
+                  {"name": "Level 2", "path": "level2"},
+                  {"name": "Level 3", "path": "level3"}
+                ] 
+              }
+              data-lang="en"
+              product-number="6R0XXXXXX"
+              class="py-1 order-0 px-1 max-w-full flex bg-white"
+              show-back
+              text-back="Back"
+            />
+```
+
+
+### show home
+
+<div class="component-preview">
+    <Breadcrumbs
+      breadcrumbs={ [ {"name": "Level1", "path": "level 1"}, {"name": "Level 2", "path": "level2"}, {"name": "Level 3", "path": "level3"} ] }
+      data-lang="en"
+      product-number="6R0XXXXXX"
+      class="py-1 order-0 px-1 max-w-full flex bg-white"
+      show-home
+    />
+</div>
+
+```js
+
+            <Breadcrumbs
+              breadcrumbs={ 
+                [ 
+                  {"name": "Level1", "path": "level 1"},
+                  {"name": "Level 2", "path": "level2"},
+                  {"name": "Level 3", "path": "level3"}
+                ] 
+              }
+              data-lang="en"
+              product-number="6R0XXXXXX"
+              class="py-1 order-0 px-1 max-w-full flex bg-white"
+              show-home
+            />
+```
+
+
+### simply
+
+<div class="component-preview">
+    <Breadcrumbs
+      breadcrumbs={ [ {"name": "Level1", "path": "level 1"}, {"name": "Level 2", "path": "level2"}, {"name": "Level 3", "path": "level3"} ] }
+      data-lang="en"
+      product-number="6R0XXXXXX"
+      class="py-1 order-0 px-1 max-w-full flex bg-white"
+    />
+</div>
+
+```js
+
+            <Breadcrumbs
+              breadcrumbs={ 
+                [ 
+                  {"name": "Level1", "path": "level 1"},
+                  {"name": "Level 2", "path": "level2"},
+                  {"name": "Level 3", "path": "level3"}
+                ] 
+              }
+              data-lang="en"
+              product-number="6R0XXXXXX"
+              class="py-1 order-0 px-1 max-w-full flex bg-white"
+              show-back
+              text-back="Back"
+            />
+```