@flitsmeister/design-system 1.0.1

package/.github/workflows/npm-publish.yml

@@ -0,0 +1,34 @@
+# This workflow will run tests using node and then publish a package to GitHub Packages when a release is created
+# For more information see: https://docs.github.com/en/actions/publishing-packages/publishing-nodejs-packages
+
+name: Node.js Package
+
+on:
+  release:
+    types: [created]
+
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+      - run: npm ci
+      - run: npm run build
+
+  publish-npm:
+    needs: build
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 22
+          registry-url: https://registry.npmjs.org/
+      - run: npm ci
+      - run: npm run build
+      - run: npm publish
+        env:
+          NPM_AUTH_TOKEN: ${{secrets.NPM_AUTH_TOKEN}}

package/README.md

@@ -0,0 +1,3 @@
+# Flitsmeister design system
+Contains support for Flitsmeister design system colors, typography, buttons, icons and input
+

package/package.json

@@ -0,0 +1,65 @@
+{
+    "name": "@flitsmeister/design-system",
+    "version": "1.0.1",
+    "description": "Flitsmeister design system and demo site",
+    "main": "index.js",
+    "scripts": {
+        "start": "MODE=development webpack serve",
+        "build": "MODE=production webpack",
+        "build-dev": "MODE=development webpack",
+        "test": "exit 0;"
+    },
+    "author": "Flitsmeister",
+    "license": "ISC",
+    "dependencies": {
+        "@fullhuman/postcss-purgecss": "^5.0.0",
+        "@intlify/vue-i18n-loader": "~4.2.0",
+        "autoprefixer": "~10.4.13",
+        "axios": "~1.3.2",
+        "clean-webpack-plugin": "~4.0.0",
+        "copy-webpack-plugin": "~11.0.0",
+        "css-loader": "~6.7.3",
+        "dotenv-webpack": "~8.0.1",
+        "es6-promise": "~4.2.8",
+        "flagpack-core": "^2.0.0",
+        "html-webpack-plugin": "~5.5.0",
+        "node-sass": "~8.0.0",
+        "postcss": "~8.4.21",
+        "postcss-loader": "~7.0.2",
+        "sass-loader": "~13.2.0",
+        "style-loader": "~3.3.1",
+        "tailwindcss": "~3.2.6",
+        "uuid": "~9.0.0",
+        "vue": "~3.2.47",
+        "vue-i18n": "~9.2.2",
+        "vue-loader": "~17.0.1",
+        "vue-router": "~4.1.6",
+        "vue-style-loader": "~4.1.3",
+        "vue-template-compiler": "~2.7.14",
+        "vuex": "~4.1.0",
+        "webpack": "~5.75.0",
+        "webpack-cli": "~5.0.1"
+    },
+    "devDependencies": {
+        "@flitsmeister/eslint": "~1.2.1",
+        "svg-sprite-loader": "~6.0.11",
+        "svgo": "~3.3.2",
+        "svgo-loader": "~4.0.0",
+        "webpack-dev-server": "~4.11.1"
+    },
+    "repository": {
+        "type": "git",
+        "url": "git+https://github.com/flitsmeister/design-system.git"
+    },
+    "keywords": [
+        "flitsmeister",
+        "design",
+        "styling",
+        "colors",
+        "icons"
+    ],
+    "bugs": {
+        "url": "https://github.com/flitsmeister/design-system/issues"
+    },
+    "homepage": "https://github.com/flitsmeister/design-system#readme"
+}

package/postcss.config.js

@@ -0,0 +1,20 @@
+const Autoprefixer = require('autoprefixer')
+const TailwindCSS = require('tailwindcss')
+const PostCSSPurgeCSS = require('@fullhuman/postcss-purgecss')
+
+const purgecss = PostCSSPurgeCSS({
+    content: ['./web/**/*.html', './web/**/*.vue', './web/**/*.js'],
+    // Include any special characters you're using in this regular expression.
+    // See: https://tailwindcss.com/docs/controlling-file-size/#understanding-the-regex
+    defaultExtractor: (content) => content.match(/[\w-/:]+(?<!:)/g) || [],
+    // Whitelist auto generated classes for transitions and router links.
+    // From: https://github.com/ky-is/vue-cli-plugin-tailwind
+    whitelistPatterns: [/-(leave|enter|appear)(|-(to|from|active))$/, /^(?!(|.*?:)cursor-move).+-move$/, /^router-link(|-exact)-active$/]
+})
+
+module.exports = {
+    plugins: [
+        TailwindCSS,
+        Autoprefixer,
+        ...(process.env.NODE_ENV === 'production' ? [purgecss] : [])]
+}

package/svgo.config.js

@@ -0,0 +1,37 @@
+/* eslint-disable strict */
+module.exports = {
+    plugins: [
+        {
+            name: 'preset-default',
+            params: {
+                overrides: {
+                    // disable plugins
+                    removeViewBox: false,
+                }
+            }
+        }
+        /* trial attempt at replacing fill and stroke with currentColor - this does work but requires some additional work
+        {
+            name: 'customReplaceFillAndStroke',
+            type: 'perItem',
+            fn: (node) => {
+                console.log('Processing SVGO customReplace ', node);
+                if (node.type === 'element') {
+                    node.attributes = Object.fromEntries(
+                        Object.entries(node.attributes).map(([name, value]) => {
+                            if (
+                                (name === 'fill' || name === 'stroke') &&
+                                (value === 'black' || value === '#161616')
+                            ) {
+                                console.log('Replacing', name, value, 'with currentColor');
+                                return [name, 'currentColor'];
+                            }
+                            return [name, value];
+                        })
+                    );
+                }
+            },
+        },
+        */
+    ]
+}

package/tailwind.config.js

@@ -0,0 +1,146 @@
+/* eslint-disable strict */
+const colors = require('tailwindcss/colors')
+const importedPrimitives = require('./web/styles/flashmaster/primitives.json')
+
+if (!importedPrimitives[0].Primitives.modes.default.color) {
+    throw new Error('Primitives not found in tailwind.config.js')
+}
+
+const primitives = importedPrimitives[0].Primitives.modes.default.color
+
+const mapPrimitivesToTailwindColors = (primitivesData) => {
+    const tailwindColors = {}
+
+    for (const [colorName, shades] of Object.entries(primitivesData)) {
+        tailwindColors[colorName.toLowerCase()] = {}
+
+        for (const [shadeName, shadeValue] of Object.entries(shades)) {
+            const match = shadeName.match(/\d+/) // Extract the number from the shade name
+            if (match) {
+                const shadeNumber = match[0]
+                tailwindColors[colorName.toLowerCase()][shadeNumber] = shadeValue.$value
+            }
+        }
+    }
+
+    return tailwindColors
+}
+
+const customColors = mapPrimitivesToTailwindColors(primitives)
+
+module.exports = {
+    content: ['./web/**/*.html', './web/**/*.vue', './web/**/*.jsx', './web/**/*.js'],
+    corePlugins: {
+        float: false
+    },
+
+    /* NOT REQUIRED FOR FLASHMASTER: darkMode is only being set to 'class' for this demo site */
+    darkMode: 'class',
+
+    /* REQUIRED FOR FLASHMASTER */
+    theme: {
+        container: {
+            center: true
+        },
+        colors: {
+            inherit: colors.inherit,
+            current: colors.current,
+            transparent: colors.transparent,
+            black: colors.black,
+            white: colors.white,
+            ...customColors, // Add custom colors from primitives.json
+            // designsystem token colors
+            surface: {
+                defaulthighest: 'var(--surface-defaultHighest)',
+                defaulthigher: 'var(--surface-defaultHigher)',
+                default: 'var(--surface-default)',
+                defaultlower: 'var(--surface-defaultLower)',
+                defaultlowest: 'var(--surface-defaultLowest)',
+                brand: 'var(--surface-brand)',
+                brandalt: 'var(--surface-brandAlt)',
+                pro: 'var(--surface-pro)',
+                proalt: 'var(--surface-proAlt)',
+                proplus: 'var(--surface-proPlus)',
+                danger: 'var(--surface-danger)',
+                dangeralt: 'var(--surface-dangerAlt)',
+                warning: 'var(--surface-warning)',
+                warningalt: 'var(--surface-warningAlt)',
+                attention: 'var(--surface-attention)',
+                info: 'var(--surface-info)',
+                infoalt: 'var(--surface-infoAlt)',
+                success: 'var(--surface-success)',
+                successalt: 'var(--surface-successAlt)'
+            },
+            content: {
+                default: 'var(--content-default)',
+                defaultalt: 'var(--content-defaultAlt)',
+                weak: 'var(--content-weak)',
+                label: 'var(--content-label)',
+                brand: 'var(--content-brand)',
+                pro: 'var(--content-pro)',
+                proplus: 'var(--content-proPlus)',
+                danger: 'var(--content-danger)',
+                warning: 'var(--content-warning)',
+                attention: 'var(--content-attention)',
+                info: 'var(--content-info)',
+                success: 'var(--content-success)'
+            },
+            outline: {
+                default: 'var(--outline-default)',
+                brand: 'var(--outline-brand)',
+                danger: 'var(--outline-danger)',
+                dangeralt: 'var(--outline-dangerAlt)',
+                warning: 'var(--outline-warning)',
+                warningalt: 'var(--outline-warningAlt)',
+                info: 'var(--outline-info)',
+                success: 'var(--outline-success)'
+            },
+            feature: {
+                speedcam: 'var(--feature-speedcam)',
+                speedcheck: 'var(--feature-speedcheck)',
+                parking: 'var(--feature-parking)',
+                parkingalt: 'var(--feature-parkingAlt)',
+                police: 'var(--feature-police)',
+                firetruck: 'var(--feature-firetruck)',
+                ambulance: 'var(--feature-ambulance)',
+                emergency: 'var(--feature-emergency)',
+                signal: 'var(--feature-signal)'
+            }
+        },
+        extend: {
+            spacing: {
+                /*
+                    1 - nudge   / Tailwind "px"
+                    2 - xxxs    / Tailwind "0.5"
+                    4 - xxs     / Tailwind "1"
+                    8 - xs      / Tailwind "2"
+                    12 - sm     / Tailwind "3"
+                    16 - md     / Tailwind "4"
+                    24 - lg     / Tailwind "6"
+                    32 - xl     / Tailwind "8"
+                    48 - xxl    / Tailwind "12"
+                    64 - xxxl   / Tailwind "16"
+                */
+                nudge: '1px',
+                xxxs: '2px',
+                xxs: '4px',
+                xs: '8px',
+                sm: '12px',
+                md: '16px',
+                lg: '24px',
+                xl: '32px',
+                xxl: '48px',
+                xxxl: '64px'
+            },
+            fontSize: {
+                // the other fontsize tokens (xs, sm, md, lg & xl) already happen to match with those of Tailwind :D
+                // in hindsight, it seems that these are barely even used...
+                xxl: '2.5rem', // 40px
+                xxxl: '3.5', // 56px
+                xxxxl: '4rem' // 64px
+            }
+        }
+    },
+    variants: {},
+    plugins: []
+}

package/web/.eslintrc

@@ -0,0 +1,5 @@
+{
+    "parserOptions": {
+      "sourceType": "module"
+    }
+}

package/web/App.vue

@@ -0,0 +1,60 @@
+<template>
+    <div class="transition-all duration-300 min-h-screen bg-surface-default text-content-default">
+        <Navbar />
+        <div id="navtarget">
+            <router-view />
+        </div>
+    </div>
+    <div id="iconsprite" v-html="spriteContent"></div>
+</template>
+
+<script>
+    import Navbar from './components/navbar.vue'
+
+    // Import all SVG files in the icons directory
+    const requireAll = (requireContext) => requireContext.keys().map(requireContext);
+    const req = require.context('./icons', true, /\.svg$/);
+    requireAll(req);
+
+    export default {
+        name: 'flitsmeister-theme',
+        components: { Navbar },
+        data() {
+            return {
+                spriteContent: ''
+            };
+        },
+        mounted() {
+            fetch('/sprite.svg')
+                .then(response => response.text())
+                .then(sprite => {
+                    this.spriteContent = sprite;
+                });
+        }
+    }
+</script>
+
+<style src="./styles/app.scss" lang="scss" />
+<style lang="scss" module>
+    #app {
+        min-height: 100%;
+        height: 100%;
+    }
+
+    #iconsprite {
+        display: none;
+
+        // override fill and/or stroke color, only when it's already set
+        symbol:not([id^="duotone-"]) {
+            path, rect, circle, ellipse, polygon, polyline, line {
+                &[fill] {
+                    fill: currentColor;
+                }
+                &[stroke] {
+                    stroke: currentColor;
+                }
+            }
+        }
+        /* might still need to look at 'mask' elements */
+    }
+</style>

package/web/components/CookieConsent.vue

@@ -0,0 +1,115 @@
+<template>
+  <div 
+    class="cookie-settings z-10 transition-all duration-300 overflow-hidden shadow-lg border border-neutral-100 fixed flex flex-col gap-2 bottom-4 right-4 bg-white max-w-[360px] rounded-2xl px-4 py-3"
+    :class="{ 'translate-y-8 opacity-0 pointer-events-none': !settings.display }"
+  >
+    <span class="text-blue font-semibold">
+      {{ $t('cookies.title') }}
+    </span>
+    <div class="text-gray-800 text-sm font-light">
+      {{ $t('cookies.description') }}
+    </div>
+
+
+    <div v-if="settings.showAll === false" class="flex items-center gap-2 mt-2 w-full justify-evenly">
+      <button class="bg-blue text-sm text-white font-medium py-2 rounded-xl w-full" @click="toggleSetting('display')">
+        {{ $t('cookies.refuse') }}
+      </button>
+      <button class="bg-blue text-sm text-white font-medium py-2 rounded-xl w-full" @click="toggleSetting('showAll')">
+        {{ $t('cookies.customize') }}
+      </button>
+      <button class="bg-blue text-sm text-white font-medium py-2 rounded-xl w-full" @click="saveSettings(true)">
+        {{ $t('cookies.accept') }}
+      </button>
+    </div>
+
+    <Transition name="slide-up">
+      <form v-if="settings.showAll" class="flex flex-col gap-2" @submit.prevent="saveSettings">
+        <PermissionToggle
+          :title="this.$i18n.t('cookies.permissionsections.essentials.title')"
+          :description="this.$i18n.t('cookies.permissionsections.essentials.description')"
+          :value="settings.essentials"
+          :onToggle="() => toggleSetting('essentials')"
+        />
+        <PermissionToggle
+          :title="this.$i18n.t('cookies.permissionsections.preferences.title')"
+          :description="this.$i18n.t('cookies.permissionsections.preferences.description')"
+          :value="settings.preferences"
+          :onToggle="() => toggleSetting('preferences')"
+        />
+        <PermissionToggle
+          :title="this.$i18n.t('cookies.permissionsections.analytics.title')"
+          :description="this.$i18n.t('cookies.permissionsections.analytics.description')"
+          :value="settings.analytics"
+          :onToggle="() => toggleSetting('analytics')"
+        />
+        <PermissionToggle
+          :title="this.$i18n.t('cookies.permissionsections.marketing.title')"
+          :description="this.$i18n.t('cookies.permissionsections.marketing.description')"
+          :value="settings.marketing"
+          :onToggle="() => toggleSetting('marketing')"
+        />
+        <button type="submit" class="bg-blue text-white font-semibold py-2 px-4 rounded" @click="() => saveSettings">
+          {{ $t('cookies.save') }}
+        </button>
+      </form>
+    </Transition>
+
+  </div>
+</template>
+
+<script>
+  import { mapState, mapActions } from 'vuex';
+  import PermissionToggle from './PermissionToggle.vue';
+
+  export default {
+    components: {
+      PermissionToggle,
+    },
+    computed: {
+      ...mapState({
+        settings: (state) => state.cookieSettings,
+      }),
+    },
+    methods: {
+      ...mapActions(['toggleSetting', 'saveCookieSettings']),
+      async saveSettings(acceptAll = false) {
+        if (acceptAll === true) {
+          await this.toggleSetting({key: 'analytics',   value: true});
+          await this.toggleSetting({key: 'marketing',   value: true});
+          await this.toggleSetting({key: 'preferences', value: true});
+        }
+        
+        await this.toggleSetting({key: 'display', value: false});
+        await this.saveCookieSettings(this.settings);
+        this.updateGTMConsent(this.settings);
+      },
+      updateGTMConsent(settings) {
+        gtag('consent', 'update', {
+          'functionality_storage':    settings.essentials   ? 'granted' : 'denied',
+          'security_storage':         settings.essentials   ? 'granted' : 'denied',
+          'personalization_storage':  settings.preferences  ? 'granted' : 'denied',
+          'analytics_storage':        settings.analytics    ? 'granted' : 'denied',
+          'ad_storage':               settings.marketing    ? 'granted' : 'denied',
+          'ad_user_data':             settings.marketing    ? 'granted' : 'denied',
+          'ad_personalization':       settings.marketing    ? 'granted' : 'denied'
+        });
+      },
+    },
+  };
+</script>
+
+<style scoped>
+  .slide-up-enter-active,
+  .slide-up-leave-active {
+    transition: all 0.5s ease;
+    transform-origin: top;
+    max-height: 550px;
+  }
+
+  .slide-up-enter-from,
+  .slide-up-leave-to {
+    transform: translateY(100%);
+    max-height: 42px;
+  }
+</style>

package/web/components/Flag.vue

@@ -0,0 +1,47 @@
+<template>
+  <img :src="flagSrc" :alt="countryCode" :class="sizeClass" v-if="flagSrc" />
+  <span v-else class="text-red-500">x</span>
+</template>
+
+<script>
+import { isoToCountryCode } from 'flagpack-core';
+
+export default {
+  props: {
+    countryCode: {
+      type: String,
+      required: true
+    },
+    size: {
+      type: String,
+      default: 'medium',
+      validator: value => ['s', 'm', 'l'].includes(value)
+    }
+  },
+  computed: {
+    flagSrc() {
+      try {
+        const alpha2Code = isoToCountryCode(this.countryCode.toUpperCase(), 'alpha2');
+        if (!alpha2Code) {
+          throw new Error(`No alpha2 code found for country code: ${this.countryCode}`);
+        }
+        return require(`flagpack-core/svg/${this.size[0]}/${alpha2Code}.svg`);
+      } catch (error) {
+        console.error(error.message);
+        return null;
+      }
+    },
+    sizeClass() {
+      return {
+        s: 'w-4 h-3',
+        m: 'w-5 h-4',
+        l: 'w-8 h-6'
+      }[this.size];
+    }
+  }
+};
+</script>
+
+<style scoped>
+/* Add any necessary styles here */
+</style>

package/web/components/Icon.vue

@@ -0,0 +1,31 @@
+<template>
+    <svg v-if="name" :class="iconClass">
+        <use :xlink:href="`#${name}`"></use>
+    </svg>
+</template>
+
+<script>
+export default {
+    name: 'Icon',
+    props: {
+        name: {
+            type: String,
+            required: true
+        },
+        iconClass: {
+            type: String,
+            default: ''
+        }
+    }
+};
+</script>
+
+<style scoped>
+    svg {
+        /* inherit parent element font size and color by default */
+        width: 1em;
+        height: 1em;
+        fill: currentColor;
+        display: inline-block;
+    }
+</style>

package/web/components/LanguageSwitcher.vue

@@ -0,0 +1,77 @@
+<template>
+  <div class="z-10 fixed top-4 right-4 bg-white px-4 py-3">
+    <div class="relative inline-block text-left">
+      <div>
+        <button @click="toggleDropdown" type="button" :title="languages[currentLanguage].name" class="inline-flex justify-center w-full rounded-md border border-gray-300 shadow-sm px-4 py-2 bg-white text-2xl text-gray-700 hover:bg-gray-50 focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-indigo-500" id="menu-button" aria-expanded="true" aria-haspopup="true">
+          <Flag :countryCode="(languages[currentLanguage].flagiso) ? languages[currentLanguage].flagiso : currentLanguage" size="m" class="inline-block mr-2 my-auto" />
+
+          <svg class="-mr-1 ml-3 mt-1 h-5 w-5" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+            <path fill-rule="evenodd" d="M5.293 7.293a1 1 0 011.414 0L10 10.586l3.293-3.293a1 1 0 111.414 1.414l-4 4a1 1 0 01-1.414 0l-4-4a1 1 0 010-1.414z" clip-rule="evenodd" />
+          </svg>
+        </button>
+      </div>
+
+      <div v-if="dropdownOpen" class="origin-top-right absolute right-0 mt-2 w-56 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="menu-button" tabindex="-1">
+        <div class="py-1" role="none">
+          <a v-for="(language, key) in languages" :key="key" @click="changeLanguage(key)" :title="language.name" class="text-gray-700 block px-4 py-2 text-sm font-normal cursor-pointer hover:bg-gray-100" role="menuitem" tabindex="-1">
+            <Flag :countryCode="(language.flagiso) ? language.flagiso : key" size="s" class="inline-block mr-2" />
+            {{ language.name }}
+          </a>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import Flag from './Flag.vue';
+
+export default {
+  components: {
+    Flag
+  },
+  data() {
+    return {
+      currentLanguage: this.$i18n.locale,
+      dropdownOpen: false,
+      languages: {
+        en: { name: 'English', flagiso: 'gb-ukm'  },
+        da: { name: 'Dansk', flagiso: 'dk' },
+        de: { name: 'Deutsch' },
+        fi: { name: 'Suomi' },
+        fr: { name: 'Français' },
+        nl: { name: 'Nederlands' },
+        no: { name: 'Norsk' },
+        pl: { name: 'Polski' },
+        sv: { name: 'Svenska' },
+        es: { name: 'Español' }
+      }
+    };
+  },
+  methods: {
+    toggleDropdown() {
+      this.dropdownOpen = !this.dropdownOpen;
+    },
+    changeLanguage(languageKey) {
+      this.currentLanguage = languageKey;
+      this.$i18n.locale = languageKey;
+      this.dropdownOpen = false;
+    },
+    handleClickOutside(event) {
+      if (!this.$el.contains(event.target)) {
+        this.dropdownOpen = false;
+      }
+    }
+  },
+  mounted() {
+    document.addEventListener('click', this.handleClickOutside);
+  },
+  beforeUnmount() {
+    document.removeEventListener('click', this.handleClickOutside);
+  }
+};
+</script>
+
+<style scoped>
+/* Add any necessary styles here */
+</style>