spoko-design-system 0.0.1 → 0.0.5

package/src/components/SlimBanner.vue

@@ -1,60 +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);
-}
-
+<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

@@ -1,12 +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>
-		) 
-	}) }
+---
+	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/Translations.vue

@@ -0,0 +1,27 @@
+
+<script setup lang="ts">
+import { PropType } from 'vue';
+
+const props = defineProps({
+  lang: {
+    type: String
+  },
+  translations: {
+    type: Object as PropType<{ uri: string | null, title: string | null, name: string | null } | null>
+  }
+});
+</script>
+
+<template>
+  <div
+    data-pagefind-ignore
+    v-if="props.translations !== null && props.translations.uri">
+    <a aria-label="Change language"
+    type="button" 
+    :href="translations.uri" 
+    :title="translations.name ? translations.name : translations.title" 
+    :class="[lang === 'en' ? 'i-circle-flags:en' : '', lang === 'pl' ? 'i-circle-flags:pl' : '', 'w-5 hover:rotate--3']" />
+  </div>
+</template>
+
+

package/src/components/flags/FlagPL.vue

@@ -1,3 +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>
+      <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

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

package/src/components/layout/Header.astro

@@ -1,94 +1,75 @@
 ---
 const { class: className } = Astro.props;
-import { Icon } from 'astro-icon/components';
+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'
-// 	} 
-// ]
-
+  {
+    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",
+  },
+];
 ---
 
 <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"]}
+  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="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}
+    <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>
 
-    <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="relative md:block sm:ml-4 w-full order-4 h-10 md:(w-64 mr-auto order-2)"
+  >
+    <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"
+  <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=""
+      aria-label=""
+      href="#"
+      itemprop="url"
+      data-astro-reload
     >
-      <!-- <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>
+      <Icon name="carbon:language" />
+    </a>
+  </div>
 </nav>
 
 <style lang="scss" is:global>

package/src/config.ts

@@ -1,42 +1,51 @@
-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" },
-];
+export const SITE = {
+  title: "Spoko Design System",
+  description: "The Astro design system which facilitates the development of websites.",
+  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: "Badges", link: "/components/badges" },
+  { text: "Breadcrumbs", link: "/components/breadcrumbs" },
+  { text: "Buttons", link: "/components/buttons" },
+  { text: "Copyright", link: "/components/copyright" },
+  { text: "HandDrive", link: "/components/hand-drive" },
+  { text: "Headline", link: "/components/headline" },
+  { text: "Icons", link: "/components/icons" },
+  { text: "Image", link: "/components/image" },
+  { text: "Input", link: "/components/input" },
+  { text: "Jumbatron", link: "/components/jumbatron" },
+  { text: "Modal", link: "/components/modal" },
+  { text: "PostHeader", link: "/components/post-header" },
+  { text: "Product Number", link: "/components/product-number" },
+  { text: "Product Tile", link: "/components/product-tile" },
+  { text: "Table", link: "/components/table" },
+  { text: "PR-Code", link: "/components/pr-code" },
+  { text: "Card", link: "/components/card" },
+
+  { text: "Extras", header: true },
+  { text: "Flags", link: "/components/flags" },
+  { text: "SlimBanner", link: "/components/slimbanner" },
+  { text: "FuckRussia", link: "/components/fuck-russia" },
+
+  { text: "Patterns", header: true },
+  { text: "Introduction", link: "/patterns/introduction" },
+];

package/src/design.config.ts

@@ -1,92 +1,73 @@
-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" }
-  ],
-};
+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" },
+  ],
+  red: [
+    { name: "400", value: "#f8b5b5" },
+    { name: "500", value: "#f49f9f" },
+    { name: "600", value: "#e57373" },
+  ],
+};
+
+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: "font-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

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

package/src/flag-poland.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg enable-background="new 0 0 512 512" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><rect width="512" height="512" fill="#F0F0F0"/><rect y="256" width="512" height="256" fill="#D80027"/></svg>

package/src/flag-uk.svg

@@ -0,0 +1 @@
+<?xml version="1.0" encoding="UTF-8"?><svg enable-background="new 0 0 512 512" version="1.1" viewBox="0 0 512 512" xml:space="preserve" xmlns="http://www.w3.org/2000/svg"><rect width="512" height="512" fill="#F0F0F0"/><polygon points="0 304 208 304 208 512 304 512 304 304 512 304 512 208 304 208 304 0 208 0 208 208 0 208" fill="#D80027"/><g fill="#0052B4"><polygon points="406.92 333.91 512 438.99 512 333.91"/><polygon points="333.91 333.91 512 512 512 461.64 384.27 333.91"/><polygon points="464.56 512 333.91 381.34 333.91 512"/></g><polygon points="333.91 333.91 512 512 512 461.64 384.27 333.91" fill="#F0F0F0"/><polygon points="333.91 333.91 512 512 512 461.64 384.27 333.91" fill="#D80027"/><g fill="#0052B4"><polygon points="80.302 333.91 0 414.22 0 333.91"/><polygon points="178.08 356.56 178.08 512 22.658 512"/></g><polygon points="127.72 333.92 0 461.64 0 512 0 512 178.08 333.92" fill="#D80027"/><g fill="#0052B4"><polygon points="105.08 178.09 0 73.007 0 178.09"/><polygon points="178.09 178.09 0 0 0 50.36 127.73 178.09"/><polygon points="47.436 0 178.09 130.66 178.09 0"/></g><polygon points="178.09 178.09 0 0 0 50.36 127.73 178.09" fill="#F0F0F0"/><polygon points="178.09 178.09 0 0 0 50.36 127.73 178.09" fill="#D80027"/><g fill="#0052B4"><polygon points="431.7 178.09 512 97.785 512 178.09"/><polygon points="333.92 155.44 333.92 3e-3 489.34 3e-3"/></g><polygon points="384.28 178.08 512 50.359 512 0 512 0 333.92 178.08" fill="#D80027"/></svg>