@politicalwatch/tipi-uikit 1.11.0 → 1.11.1

package/.stylelintrc.json

@@ -0,0 +1,15 @@
+{
+  "extends": ["stylelint-config-standard", "stylelint-config-standard-scss"],
+  "ignoreFiles": ["dist/**", "node_modules/**"],
+  "overrides": [
+    {
+      "files": ["**/*.vue"],
+      "customSyntax": "postcss-html"
+    }
+  ],
+  "rules": {
+    "selector-pseudo-class-no-unknown": [true, { "ignorePseudoClasses": ["deep", "slotted", "global"] }],
+    "selector-class-pattern": null,
+    "scss/dollar-variable-pattern": null
+  }
+}

package/eslint.config.js

@@ -0,0 +1,16 @@
+import pluginVue from 'eslint-plugin-vue';
+import prettier from 'eslint-config-prettier';
+import storybook from 'eslint-plugin-storybook';
+
+export default [
+  ...pluginVue.configs['flat/essential'],
+  ...storybook.configs['flat/recommended'],
+  prettier,
+  {
+    rules: {
+      'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+      'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    },
+  },
+  { ignores: ['dist/**', 'node_modules/**'] },
+];

package/package.json

@@ -1,13 +1,15 @@
 {
   "name": "@politicalwatch/tipi-uikit",
-  "version": "1.11.0",
+  "version": "1.11.1",
+  "type": "module",
   "main": "src/components/index.js",
   "scripts": {
     "dev": "vite",
     "build": "vite build",
     "serve": "vite preview",
     "test:unit": "vitest --environment jsdom",
-    "lint": "eslint . --ext .vue,.js,.jsx,.cjs,.mjs --fix --ignore-path .gitignore",
+    "lint": "eslint . --fix",
+    "lint:style": "stylelint \"src/**/*.{vue,scss,css}\" --fix",
     "storybook": "storybook dev -p 6006",
     "build-storybook": "storybook build"
   },
@@ -20,7 +22,6 @@
     "pluralize": "^8.0.0",
     "qs": "^6.11.2",
     "save-svg-as-png": "^1.4.17",
-    "stylelint-config-standard": "^40.0.0",
     "vite-svg-loader": "^5.1.0",
     "vue": "^3.4.0",
     "vue-inline-svg": "^4.0.0",
@@ -28,11 +29,13 @@
   },
   "devDependencies": {
     "@chromatic-com/storybook": "^5.2.1",
-    "@rushstack/eslint-patch": "^1.1.0",
+    "eslint-config-prettier": "^10.0.0",
+    "postcss-html": "^1.8.1",
+    "stylelint-config-standard": "^40.0.0",
+    "stylelint-config-standard-scss": "^17.0.0",
     "@storybook/addon-links": "^10.4.6",
     "@storybook/vue3-vite": "^10.4.6",
     "@vitejs/plugin-vue": "^6.0.7",
-    "@vue/eslint-config-prettier": "^10.1.0",
     "@vue/test-utils": "^2.4.1",
     "autoprefixer": "^10.4.16",
     "eslint": "^10.0.0",

package/src/components/Charts/d3.chart.js

@@ -1,4 +1,4 @@
-/* eslint-disable no-console */
+ 
 import {select} from 'd3-selection';
 
 const d3 = {select};

package/src/components/Charts/d3.chart.vue

@@ -70,7 +70,7 @@ export default {
       }, 10);
     },
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.chart.destroyChart();
   },
 };

package/src/components/Charts/styles.scss

@@ -1,5 +1,4 @@
 .chart {
-
   /* Wrapper div (chart, title and source) */
   &__wrapper {
     margin: 20px 0;
@@ -23,12 +22,14 @@
   /* Download */
   &__source {
     font-size: 12px;
+
     span {
       cursor: pointer;
       background: #f4f6f8;
       color: #394d5c;
       padding: 2px 5px;
       transition: opacity 250ms ease;
+
       &:hover {
         opacity: 0.5;
       }
@@ -56,7 +57,7 @@
   /* Axis */
   &__axis {
     font-size: 12px;
-    shape-rendering: crispEdges;
+    shape-rendering: crispedges;
 
     /* Axis title */
     &-title {}

package/src/components/Deputy/Deputy.vue

@@ -131,7 +131,7 @@ const getConstituency = () => {
     border-radius: 50%;
     object-fit: cover;
     border: 2px solid $secondary;
-    margin: 0 auto rem($spacer-unit) auto;
+    margin: 0 auto rem($spacer-unit);
     display: block;
     position: absolute;
     z-index: 0;
@@ -146,7 +146,7 @@ const getConstituency = () => {
 
     & {
       text-align: center;
-      margin: 0 0 rem($spacer-unit) 0;
+      margin: 0 0 rem($spacer-unit);
     }
 
     @media (min-width: $sm) {
@@ -159,7 +159,7 @@ const getConstituency = () => {
 
     & {
       text-transform: uppercase;
-      margin: 0 0 rem($spacer-unit) 0;
+      margin: 0 0 rem($spacer-unit);
       text-align: center;
     }
 

package/src/components/Loader/Loader.vue

@@ -37,14 +37,14 @@ const { title, subtitle } = defineProps({
     @include th5;
 
     & {
-      margin: 0 0 rem($spacer-unit) 0;
+      margin: 0 0 rem($spacer-unit);
     }
 
     @media (min-width: $md) {
       @include th4;
 
       & {
-        margin: 0 0 rem($spacer-unit) 0;
+        margin: 0 0 rem($spacer-unit);
       }
     }
   }

package/src/components/Navbar/Navbar.vue

@@ -143,7 +143,7 @@ const closeMenuMobile = () => {
 
 .c-navbar {
   transition: height 1.3s ease;
-  box-shadow: inset 0 -2px 2px 0 rgba(0, 0, 0, 0.1);
+  box-shadow: inset 0 -2px 2px 0 rgb(0 0 0 / 10%);
   background-color: $navbar-background-color;
 
   &__wrapper {
@@ -281,7 +281,7 @@ const closeMenuMobile = () => {
   }
 
   &__submenu {
-    margin: rem($spacer-unit * 2) 0 0 0;
+    margin: rem($spacer-unit * 2) 0 0;
     padding: 0;
 
     @media (min-width: $md) {
@@ -296,7 +296,7 @@ const closeMenuMobile = () => {
       margin: 0;
       padding: rem($spacer-unit);
       background: $white;
-      box-shadow: inset 0 -2px 2px 0 rgba(0, 0, 0, 0.1);
+      box-shadow: inset 0 -2px 2px 0 rgb(0 0 0 / 10%);
       z-index: 10;
     }
 

package/src/components/PartyLogo/PartyLogo.vue

@@ -63,7 +63,6 @@ watchEffect(async () => {
     border-radius: 50%;
     object-fit: cover;
     display: block;
-    position: absolute;
     bottom: rem($spacer-unit * 10 * -0.25);
     left: rem($spacer-unit * 10 * -0.25);
     position: absolute;

package/src/components/PartyLogo/PartyLogoIcon.vue

@@ -214,7 +214,6 @@ const getName = computed(() => {
 <style scoped lang="scss">
 .c-party_logo_icon {
   display: block;
-  border-radius: 50%;
   object-fit: cover;
   width: 5rem;
   height: 5rem;

package/src/components/TipiCharts/TipiBarchart.vue

@@ -138,10 +138,12 @@ export default {
   &__row {
     display: flex;
     position: relative;
+
     &:hover .tipichart__tooltip {
       display: block;
     }
   }
+
   &__tooltip {
     position: absolute;
     left: 0;
@@ -151,6 +153,7 @@ export default {
     display: none;
     pointer-events: none;
   }
+
   &__tip {
     background: black;
     color: white;
@@ -160,20 +163,24 @@ export default {
     line-height: 1.5;
     border-radius: 3px;
   }
+
   &__icon {
     background-repeat: no-repeat;
     background-position: center;
     margin-right: 6px;
   }
+
   &__bar {
     flex: 1 1 auto;
     overflow: hidden;
     border-radius: 3px;
     position: relative;
   }
+
   &__backbar {
     width: 100%;
   }
+
   &__overbar {
     position: absolute;
     z-index: 9;
@@ -190,10 +197,12 @@ export default {
   &-move {
     transition: 350ms cubic-bezier(0.59, 0.12, 0.34, 0.95);
     transition-property: opacity, transform;
+
     .tipichart__overbar {
       width: 0 !important;
     }
   }
+
   &-enter,
   &-leave-to {
     opacity: 0;

package/src/styles/01_settings/_settings__breakpoints.scss

@@ -3,13 +3,11 @@ $sm: 768px !default;
 $md: 992px !default;
 $lg: 1024px !default;
 $xl: 1200px !default;
-
 $xxs-max: $xs - 0.1 !default;
 $xs-max: $sm - 0.1 !default;
 $sm-max: $md - 0.1 !default;
 $md-max: $lg - 0.1 !default;
 $lg-max: $xl - 0.1 !default;
-
 $breakpoints: (
   xs: $xs,
   sm: $sm,
@@ -17,12 +15,10 @@ $breakpoints: (
   lg: $lg,
   xl: $xl
 ) !default;
-
 $breakpoints-max: (
   max-xs: $xs-max,
   max-sm: $sm-max,
   max-md: $md-max,
   max-lg: $lg-max
 ) !default;
-
 $breakpoint-class: '\\@' !default;

package/src/styles/01_settings/_settings__colors.scss

@@ -9,7 +9,6 @@ $primary-dark: #d64949 !default;
 $primary-light: #ffe0e0 !default;
 $error: #e81c1c !default;
 $completed: #4dca7f !default;
-
 $colors: (
   "primary": $primary,
   "primary-dark": $primary-dark,
@@ -23,7 +22,6 @@ $colors: (
   "completed": $completed,
   "neutral": $neutral,
 ) !default;
-
 $navbar-background-color: $white !default;
 $menu-link-color: $secondary-dark !default;
 $navbar-toogle-color: $secondary-dark !default;

package/src/styles/01_settings/_settings__fonts.scss

@@ -1,3 +1,3 @@
-@import url('https://fonts.googleapis.com/css?family=Rubik:300,400,500&display=swap');
+@import 'https://fonts.googleapis.com/css?family=Rubik:300,400,500&display=swap';
 
 $font-primary: 'Rubik', sans-serif !default;

package/src/styles/01_settings/_settings__variables.scss

@@ -1,15 +1,11 @@
 $base-radius: 4px;
-
 $o-container: 1120px !default;
-$o-container__gutter:               32px !default;
-$o-container__gutter-single:        calc($o-container__gutter / 2) !default;
+$o-container__gutter: 32px !default;
+$o-container__gutter-single: calc($o-container__gutter / 2) !default;
 $container-max: $o-container + $o-container__gutter !default;
-
 $grid-gap: 32px !default;
 $grid-gap-single: calc($grid-gap / 2) !default;
-
 $spacer-unit: 8px !default;
-
 $grid-fractions: (
   '1': calc(1 / 12),
   '2': calc(2 / 12),
@@ -25,10 +21,8 @@ $grid-fractions: (
   '11': calc(11 / 12),
   '12': calc(12 / 12)
 ) !default;
-
 $o-section-gap: $spacer-unit * 4 !default;
 $o-section-gap-lg: $o-section-gap !default;
-
 $percent-widths: (
   15,
   20,
@@ -37,7 +31,6 @@ $percent-widths: (
   40,
   50
 ) !default;
-
 $logo-mobile-width: 200px !default;
 $logo-desktop-width: 350px !default;
 $decorator-mobile-height: $spacer-unit !default;

package/src/styles/02_tools/_tools__mixins.scss

@@ -130,7 +130,7 @@
   }
 }
 
-//colors
+// colors
 @mixin background-colors() {
   @each $color-name, $color-value in $colors {
 
@@ -158,7 +158,7 @@
   }
 }
 
-//aligns
+// aligns
 @mixin text-aligns() {
   @each $align in (left, right, center) {
 
@@ -179,9 +179,8 @@
   }
 }
 
-//borders
+// borders
 @mixin borders() {
-
   .u-border {
     border: 1px solid $neutral;
   }
@@ -203,7 +202,7 @@
   }
 }
 
-//Text styles
+// Text styles
 @mixin th1 {
   font-family: $font-primary;
   font-size: rem(40px);

package/src/styles/03_generic/_generic__box-sizing.scss

@@ -3,7 +3,6 @@ html {
 }
 
 * {
-
   &,
   &::before,
   &::after {

package/src/styles/03_generic/_generic__normalize.scss

@@ -10,8 +10,10 @@
 
 html {
   line-height: 1.15;
+
   /* 1 */
-  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+
   /* 2 */
 }
 
@@ -46,10 +48,13 @@ h1 {
 
 hr {
   box-sizing: content-box;
+
   /* 1 */
   height: 0;
+
   /* 1 */
   overflow: visible;
+
   /* 2 */
 }
 
@@ -60,8 +65,10 @@ hr {
 
 pre {
   font-family: monospace, monospace;
+
   /* 1 */
   font-size: 1em;
+
   /* 2 */
 }
 
@@ -83,10 +90,13 @@ a {
 
 abbr[title] {
   border-bottom: none;
+
   /* 1 */
   text-decoration: underline;
+
   /* 2 */
   text-decoration: underline dotted;
+
   /* 2 */
 }
 
@@ -108,8 +118,10 @@ code,
 kbd,
 samp {
   font-family: monospace, monospace;
+
   /* 1 */
   font-size: 1em;
+
   /* 2 */
 }
 
@@ -167,12 +179,16 @@ optgroup,
 select,
 textarea {
   font-family: inherit;
+
   /* 1 */
   font-size: 100%;
+
   /* 1 */
   line-height: 1.15;
+
   /* 1 */
   margin: 0;
+
   /* 2 */
 }
 
@@ -206,7 +222,7 @@ button,
 [type="button"],
 [type="reset"],
 [type="submit"] {
-  -webkit-appearance: button;
+  appearance: button;
 }
 
 /**
@@ -249,16 +265,22 @@ fieldset {
 
 legend {
   box-sizing: border-box;
+
   /* 1 */
   color: inherit;
+
   /* 2 */
   display: table;
+
   /* 1 */
   max-width: 100%;
+
   /* 1 */
   padding: 0;
+
   /* 3 */
   white-space: normal;
+
   /* 1 */
 }
 
@@ -286,8 +308,10 @@ textarea {
 [type="checkbox"],
 [type="radio"] {
   box-sizing: border-box;
+
   /* 1 */
   padding: 0;
+
   /* 2 */
 }
 
@@ -306,9 +330,11 @@ textarea {
  */
 
 [type="search"] {
-  -webkit-appearance: textfield;
+  appearance: textfield;
+
   /* 1 */
   outline-offset: -2px;
+
   /* 2 */
 }
 
@@ -317,7 +343,7 @@ textarea {
  */
 
 [type="search"]::-webkit-search-decoration {
-  -webkit-appearance: none;
+  appearance: none;
 }
 
 /**
@@ -326,9 +352,11 @@ textarea {
  */
 
 ::-webkit-file-upload-button {
-  -webkit-appearance: button;
+  appearance: button;
+
   /* 1 */
   font: inherit;
+
   /* 2 */
 }
 

package/src/styles/04_base/_base__forms.scss

@@ -1,8 +1,7 @@
 input {
-
-  &[type=text],
-  &[type=email],
-  &[type=password] {
+  &[type="text"],
+  &[type="email"],
+  &[type="password"] {
     @include tbody;
 
     display: block;

package/src/styles/04_base/_base__tables.scss

@@ -7,7 +7,6 @@ table {
   }
 
   thead {
-
     tr {
       @media (min-width: $md) {
         background-color: $secondary-dark;
@@ -30,7 +29,6 @@ table {
   }
 
   tbody {
-
     tr {
       display: block;
       margin-bottom: 1px;
@@ -42,7 +40,7 @@ table {
       th,
       td {
         display: block;
-        padding: rem($spacer-unit) 0 0 0;
+        padding: rem($spacer-unit) 0 0;
 
         @media (min-width: $md) {
           display: table-cell;
@@ -80,10 +78,8 @@ table {
       }
 
       &:nth-child(even) {
-
         th,
         td {
-
           &[data-label] {
             background-color: $white;
           }

package/src/styles/05_objects/_objects__columns.scss

@@ -1,5 +1,4 @@
 .o-columns {
-
   p,
   li {
     break-inside: avoid;

package/src/styles/05_objects/_objects__masonry.scss

@@ -1,5 +1,4 @@
 .o-masonry {
-
   &__item {
     padding-bottom: rem($grid-gap);
     width: 100%;

package/src/styles/05_objects/_objects__media.scss

@@ -8,7 +8,6 @@
   }
 
   &--16x9 {
-
     &::before {
       padding-top: 56.25%;
     }