spoko-design-system 0.1.7 → 0.1.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "spoko-design-system",
-  "version": "0.1.7",
+  "version": "0.1.9",
   "private": false,
   "scripts": {
     "dev": "astro dev",

package/src/components/FeaturesList.vue

@@ -17,8 +17,8 @@ const props = defineProps({
 </script>
 
 <template>
-    <h2 class="font-headregular mb-6 font-medium text-lg colon-after" v-if="props.caption">{{ props.caption }}</h2>
-    <ul class="mb-4">
+    <h2 class="mb-2 colon-after text-xl font-textbold block" v-if="props.caption">{{ props.caption }}</h2>
+    <ul class="mb-6">
         <li v-for="item in props.items" class="leading-5">
             {{ item }}
         </li>

package/src/components/Quote.vue

@@ -0,0 +1,23 @@
+<script setup lang="ts">
+import { PropType } from 'vue';
+
+const props = defineProps({
+  as: {
+    type: String as PropType<'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'p' | 'div' | 'span'>,
+    default: 'div',
+    required: true,
+  },
+  text: {
+    type: String,
+    default: '',
+    required: true,
+  }
+})
+</script>
+
+<template>
+  <component :is="props.as"
+    class="px-8 sm:px-8 mx-4 sm:mx-6 lg:max-w-4xl drop-shadow-primary text-2xl md:text-4xl lg:text-4.5xl relative font-light after:left-0 after:content-empty after:rounded-3xl after:top-0 after:absolute after:h-full after:border-solid after:border-[var(--primary)] after:border-l-3 after:-z-10">
+      {{ props.text }}
+    </component>
+</template>

package/src/config.ts

@@ -43,6 +43,7 @@ export const SIDEBAR = [
   { text: "Product Number", link: "/components/product-number/" },
   { text: "Product Tile", link: "/components/product-tile/" },
   { text: "Table", link: "/components/table/" },
+  { text: "Quote", link: "/components/quote/" },
 
   { text: "Extras", header: true },
   { text: "Flags", link: "/components/flags/" },

package/src/pages/components/quote.mdx

@@ -0,0 +1,33 @@
+---
+title: "Quote"
+layout: "../../layouts/MainLayout.astro"
+
+---
+
+import Quote from '../../components/Quote.vue'
+
+
+# Quote
+
+Simple Quote component with left border in primary color.
+
+<div class="component-preview">
+    <Quote text="Est adipisicing officia eiusmod consequat aliqua qui amet sunt magna in." />
+</div>
+
+
+```html
+<Quote text="Est adipisicing officia eiusmod consequat aliqua qui amet sunt magna in." />
+```
+
+#
+
+
+<div class="component-preview">
+    <Quote class="font-headlight text-center" text="Est adipisicing officia eiusmod consequat aliqua qui amet sunt magna in." />
+</div>
+
+
+```html
+<Quote class="font-headlight text-center" text="Est adipisicing officia eiusmod consequat aliqua qui amet sunt magna in." />
+```

package/src/pages/core/typography.astro

@@ -32,7 +32,8 @@
         {FONTS.types.map(({name, value}) => (
             <div class="w-full">
                 <div class={`${value} text-3xl`} >Lorem Ipsum</div>
-                <div class="">{name}</div>    
+                <div class="">{name}</div>
+                <code>{value}</code>
             </div>
         ))}
         </div>

package/src/styles/base/_base.scss

@@ -101,12 +101,6 @@ html {
   opacity: 0;
 }
 
-.colon-after {
-  &:after {
-    content: ':'
-  }
-}
-
 .items {
   &>.item {
     &:not(:last-child) {

package/uno.config.ts

@@ -28,6 +28,7 @@ export default defineConfig({
     transformerVariantGroup(),
   ],
   shortcuts: [
+    ['colon-after', 'after:content-[":"]'],
     ['headline','font-headlight font-bold	'],
     ['badge', 'px-1.5 py-px text-white text-xs mb-1 max-w-fit whitespace-nowrap'],
     ['img--overlay','after:(content-empty bg-black bg-opacity-[.03] absolute w-full h-full top-0)'],