@politicalwatch/tipi-uikit 1.8.6 → 1.9.1

package/.storybook/main.js

@@ -5,12 +5,15 @@ const config = {
     '@storybook/addon-links',
     '@storybook/addon-essentials',
     '@storybook/addon-interactions',
-    '@chromatic-com/storybook'
+    '@chromatic-com/storybook',
   ],
   framework: {
     name: '@storybook/vue3-vite',
-    options: {},
+    options: {
+      docgen: 'vue-component-meta',
+    },
   },
   docs: {},
+  staticDirs: [{ from: '../src/assets', to: '/assets' }],
 };
 export default config;

package/.storybook/preview.js

@@ -10,6 +10,8 @@ const preview = {
       },
     },
   },
+
+  tags: ['autodocs'],
 };
 
 export default preview;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@politicalwatch/tipi-uikit",
-  "version": "1.8.6",
+  "version": "1.9.1",
   "main": "src/components/index.js",
   "scripts": {
     "dev": "vite",
@@ -12,7 +12,7 @@
     "build-storybook": "storybook build"
   },
   "dependencies": {
-    "@storybook/test": "^8.1.3",
+    "@storybook/test": "^8.1.5",
     "core-js": "^3.32.2",
     "d3": "^7.8.5",
     "d3-cloud": "^1.2.5",
@@ -28,14 +28,14 @@
     "vue-json-excel3": "^1.0.20"
   },
   "devDependencies": {
-    "@chromatic-com/storybook": "^1.4.0",
+    "@chromatic-com/storybook": "^1.5.0",
     "@rushstack/eslint-patch": "^1.1.0",
-    "@storybook/addon-essentials": "^8.1.3",
-    "@storybook/addon-interactions": "^8.1.3",
-    "@storybook/addon-links": "^8.1.3",
-    "@storybook/blocks": "^8.1.3",
-    "@storybook/vue3": "^8.1.3",
-    "@storybook/vue3-vite": "^8.1.3",
+    "@storybook/addon-essentials": "^8.1.5",
+    "@storybook/addon-interactions": "^8.1.5",
+    "@storybook/addon-links": "^8.1.5",
+    "@storybook/blocks": "^8.1.5",
+    "@storybook/vue3": "^8.1.5",
+    "@storybook/vue3-vite": "^8.1.5",
     "@vitejs/plugin-vue": "^5.0.0",
     "@vue/eslint-config-prettier": "^9.0.0",
     "@vue/test-utils": "^2.4.1",
@@ -46,7 +46,8 @@
     "jsdom": "^24.0.0",
     "prettier": "^3.0.3",
     "sass": "^1.67.0",
-    "storybook": "^8.1.3",
+    "storybook": "^8.1.5",
+    "storybook-vue3-router": "^5.0.0",
     "stylelint": "^16.1.0",
     "terser": "^5.14.2",
     "vite": "^5.0.12",

package/src/components/CSVDownload/CSVDownload.vue

@@ -57,60 +57,54 @@
   </span>
 </template>
 
-<script>
+<script setup>
 import JsonExcel from 'vue-json-excel3';
 
-export default {
-  name: 'TipiCsvDownload',
-  components: {
-    JsonExcel,
-  },
-  props: {
-    initiatives: {
-      type: Array,
-      default: function () {
-        return [];
-      },
-    },
-    csvItems: Array,
-    canDownloadCSV: Boolean,
-    csvFields: {
-      type: Object,
-      default: function () {
-        return {
-          title: 'title',
-          reference: 'reference',
-          initiative_type_alt: 'initiative_type_alt',
-          authors: 'authors',
-          deputies: 'deputies',
-          topics: 'topics',
-          tags: 'tags',
-          place: 'place',
-          status: 'status',
-          created: 'created',
-          updated: 'updated',
-          url: 'url',
-        };
-      },
-    },
-    label: {
-      type: String,
-      default: 'Descarga los datos',
-    },
-    buttonClass: {
-      type: String,
-      default: 'c-button--compact',
+const { initiatives } = defineProps({
+  initiatives: {
+    type: Array,
+    default: function () {
+      return () => [];
     },
   },
-  methods: {
-    loadCSVItems: function (event) {
-      this.$emit('loadCSVItems', event);
-    },
-    getNameFromCSV: function () {
-      let d = new Date();
-      return 'export-' + d.toISOString() + '.csv';
-    },
+  csvItems: Array,
+  canDownloadCSV: Boolean,
+  csvFields: {
+    type: Object,
+    default: () => ({
+      title: 'title',
+      reference: 'reference',
+      initiative_type_alt: 'initiative_type_alt',
+      authors: 'authors',
+      deputies: 'deputies',
+      topics: 'topics',
+      tags: 'tags',
+      place: 'place',
+      status: 'status',
+      created: 'created',
+      updated: 'updated',
+      url: 'url',
+    }),
   },
+  label: {
+    type: String,
+    default: 'Descarga los datos',
+  },
+  buttonClass: {
+    type: String,
+    default: 'c-button--compact',
+  },
+});
+
+const emit = defineEmits(['loadCSVItems']);
+
+const loadCSVItems = (event) => {
+  emit('loadCSVItems', event);
+};
+
+const getNameFromCSV = () => {
+  let d = new Date();
+  return 'export-' + d.toISOString() + '.csv';
 };
 </script>
 

package/src/components/CongressLink/CongressLink.vue

@@ -1,17 +1,17 @@
 <template>
-  <a :href="url" class="c-congress-link u-color-primary" target="_blank" title="Ver en el Congreso.es"><tipi-icon class="u-filling-primary" icon="open-blank"></tipi-icon>Ver en el Congreso.es</a>
+  <a
+    :href="url"
+    class="c-congress-link u-color-primary"
+    target="_blank"
+    title="Ver en el Congreso.es"
+    ><tipi-icon class="u-filling-primary" icon="open-blank"></tipi-icon>Ver en el Congreso.es</a
+  >
 </template>
 
-<script>
+<script setup>
 import TipiIcon from '../Icon/Icon.vue';
 
-export default {
-  name: 'CongressLink',
-  components: {
-    TipiIcon,
-  },
-  props: {
-    url: String,
-  },
-};
+const { url } = defineProps({
+  url: { type: String },
+});
 </script>

package/src/components/Deputy/Deputy.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="c-deputy" :class="addBirthdayClass()" v-if="deputy">
     <div class="o-container">
-      <div class="o-grid  o-grid--reverse">
+      <div class="o-grid o-grid--reverse">
         <div class="o-grid__col u-4@sm">
           <div class="c-deputy__image_container">
             <img class="c-deputy__image" :src="deputy.image" :alt="'Foto de ' + deputy.name" />
@@ -52,67 +52,53 @@
   </div>
 </template>
 
-<script>
+<script setup>
+import { ref } from 'vue';
+
 import TipiIcon from '../Icon/Icon.vue';
 import PartyLogo from '../PartyLogo/PartyLogo.vue';
 import PartyLogoIcon from '../PartyLogo/PartyLogoIcon.vue';
 
-export default {
-  name: 'TipiDeputy',
-  components: {
-    TipiIcon,
-    PartyLogo,
-    PartyLogoIcon,
-  },
-  data: function() {
-    return {
-      isCollapsed: true,
-    };
-  },
-  props: {
-    deputy: Object,
-    parliamentaryGroup: Object,
-  },
-  methods: {
-    getCollapsedClass: function() {
-      if (this.isCollapsed) {
-        return 'c-deputy__hidden';
-      }
-      return 'c-deputy__info';
-    },
-    getCollapseIcon: function() {
-      if (this.isCollapsed) {
-        return 'plus';
-      }
-      return 'less';
-    },
-    getCollapseMessage: function() {
-      if (this.isCollapsed) {
-        return 'Mostrar más';
-      }
-      return 'Mostrar menos';
-    },
-    collapse: function() {
-      this.isCollapsed = !this.isCollapsed;
-    },
-    addBirthdayClass: function() {
-      const date = new Date(this.deputy.birthdate);
-      const today = new Date();
-      if (date.getDate() == today.getDate() && date.getMonth() == today.getMonth()) {
-        return 'c-deputy__birthday';
-      }
-    },
-    getAge: function() {
-      const date = new Date(this.deputy.birthdate);
-      const today = new Date();
-      const age = today.getFullYear() - date.getFullYear();
-      return age;
-    },
-    getConstituency: function() {
-      const constituency = this.deputy.constituency;
-      return constituency;
-    },
-  },
+const { deputy, parliamentaryGroup } = defineProps({
+  deputy: Object,
+  parliamentaryGroup: Object,
+});
+
+const isCollapsed = ref(true);
+
+const getCollapsedClass = () => {
+  return isCollapsed.value ? 'c-deputy__hidden' : 'c-deputy__info';
+};
+
+const getCollapseIcon = () => {
+  return isCollapsed.value ? 'plus' : 'less';
+};
+
+const getCollapseMessage = () => {
+  return isCollapsed.value ? 'Mostrar más' : 'Mostrar menos';
+};
+
+const collapse = () => {
+  isCollapsed.value = !isCollapsed.value;
+};
+
+const addBirthdayClass = () => {
+  const date = new Date(deputy.birthdate);
+  const today = new Date();
+  if (date.getDate() == today.getDate() && date.getMonth() == today.getMonth()) {
+    return 'c-deputy__birthday';
+  }
+};
+
+const getAge = () => {
+  const date = new Date(deputy.birthdate);
+  const today = new Date();
+  const age = today.getFullYear() - date.getFullYear();
+  return age;
+};
+
+const getConstituency = () => {
+  return deputy.constituency;
 };
 </script>
 

package/src/components/Header/Header.vue

@@ -1,5 +1,5 @@
 <template>
-  <header class="c-page-header" :class="{ 'c-page-header--nosub' : !subtitle }">
+  <header class="c-page-header" :class="{ 'c-page-header--nosub': !subtitle }">
     <h1 class="c-page-header__title">
       {{ title }}
     </h1>

package/src/components/Icon/Icon.vue

@@ -1,87 +1,28 @@
 <template>
   <span class="c-icon" :class="`c-icon--type-${icon}`">
-    <component :is="`icon_${icon}`" />
+    <component :is="svg" :style="{ fill: customColor }" />
   </span>
 </template>
 
-<script>
-import icon_advanced from '../../assets/svg/icon-advanced.svg';
-import icon_bell from '../../assets/svg/icon-bell.svg';
-import icon_birthday from '../../assets/svg/icon-birthday.svg';
-import icon_building from '../../assets/svg/icon-building.svg';
-import icon_calendar from '../../assets/svg/icon-calendar.svg';
-import icon_chevron_down from '../../assets/svg/icon-chevron-down.svg';
-import icon_chevron_left from '../../assets/svg/icon-chevron-left.svg';
-import icon_chevron_right from '../../assets/svg/icon-chevron-right.svg';
-import icon_chevron_up from '../../assets/svg/icon-chevron-up.svg';
-import icon_clock from '../../assets/svg/icon-clock.svg';
-import icon_close_menu from '../../assets/svg/icon-close-menu.svg';
-import icon_close from '../../assets/svg/icon-close.svg';
-import icon_conversation from '../../assets/svg/icon-conversation.svg';
-import icon_denied from '../../assets/svg/icon-denied.svg';
-import icon_document from '../../assets/svg/icon-document.svg';
-import icon_download from '../../assets/svg/icon-download.svg';
-import icon_error from '../../assets/svg/icon-error.svg';
-import icon_footprint from '../../assets/svg/icon-footprint.svg';
-import icon_github from '../../assets/svg/icon-github.svg';
-import icon_hamburger from '../../assets/svg/icon-hamburger.svg';
-import icon_info from '../../assets/svg/icon-info.svg';
-import icon_less from '../../assets/svg/icon-less.svg';
-import icon_location from '../../assets/svg/icon-location.svg';
-import icon_logout from '../../assets/svg/icon-logout.svg';
-import icon_mail from '../../assets/svg/icon-mail.svg';
-import icon_more from '../../assets/svg/icon-more.svg';
-import icon_open_blank from '../../assets/svg/icon-open-blank.svg';
-import icon_plus from '../../assets/svg/icon-plus.svg';
-import icon_search from '../../assets/svg/icon-search.svg';
-import icon_success from '../../assets/svg/icon-success.svg';
-import icon_twitter from '../../assets/svg/icon-twitter.svg';
-import icon_upload from '../../assets/svg/icon-upload.svg';
+<script setup>
+import { toRefs, computed, defineAsyncComponent } from 'vue';
 
-export default {
-  name: 'TipiIcon',
-  components: {
-    icon_advanced,
-    icon_bell,
-    icon_birthday,
-    icon_building,
-    icon_calendar,
-    icon_chevron_down,
-    icon_chevron_left,
-    icon_chevron_right,
-    icon_chevron_up,
-    icon_clock,
-    icon_close_menu,
-    icon_close,
-    icon_conversation,
-    icon_denied,
-    icon_document,
-    icon_download,
-    icon_error,
-    icon_footprint,
-    icon_github,
-    icon_hamburger,
-    icon_info,
-    icon_less,
-    icon_location,
-    icon_logout,
-    icon_mail,
-    icon_more,
-    icon_open_blank,
-    icon_plus,
-    icon_search,
-    icon_success,
-    icon_twitter,
-    icon_upload,
-  },
-  props: {
-    icon: String,
-    color: String,
-  },
-  updated() {
-    if (this.color && this.$el.querySelector('svg path')) {
-      this.$el.querySelector('svg path').style.fill = this.color;
-    }
-  },
-};
+const props = defineProps({
+  icon: { type: String },
+  color: { type: String },
+});
+
+const { icon, color } = toRefs(props);
+
+const svg = computed(() => {
+  let svg = '';
+  try {
+    svg = defineAsyncComponent(() => import(`../../assets/svg/icon-${icon.value}.svg`));
+  } catch (error) {
+    svg = icon.value;
+  }
+  return svg;
+});
+
+const customColor = computed(() => color.value || '#2d4252');
 </script>

package/src/components/InitiativeCard/InitiativeCard.vue

@@ -51,48 +51,40 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import TipiIcon from '../Icon/Icon.vue';
 import TipiTopicPill from '../TopicPill/TopicPill.vue';
 import TipiInitiativeMeta from '../InitiativeMeta/InitiativeMeta.vue';
 
-export default {
-  name: 'TipiInitiativeCard',
-  components: {
-    TipiIcon,
-    TipiTopicPill,
-    TipiInitiativeMeta,
-  },
-  props: {
+const { initiative, topicsStyles, extendedLayout, metaDeputies, metaGroupsOthers, metaColors } =
+  defineProps({
     initiative: Object,
     topicsStyles: Object,
     extendedLayout: Boolean,
     metaDeputies: String,
     metaGroupsOthers: String,
     metaColors: { type: Object, default: undefined },
-  },
-  methods: {
-    getAuthors: function(initiative) {
-      return initiative.authors.length ? initiative.authors.join('<br/>') : '';
-    },
-    getTopics: function(initiative) {
-      let topics = [];
-      for (const tagged of initiative['tagged']) {
-        topics = topics.concat(tagged['topics']);
-      }
-      return topics;
-    },
-    getDeputies: function(initiative) {
-      if (initiative.deputies.length == 0) return '';
-      let regex_id = /\[.*\]/;
-      return initiative.deputies
-        .map(d => {
-          var has_id = regex_id.exec(d);
-          if (!has_id) return d;
-          return d.replace(has_id[0], '').trim();
-        })
-        .join('<br/>');
-    },
-  },
+  });
+
+const getAuthors = (initiative) => {
+  return initiative.authors.length ? initiative.authors.join('<br/>') : '';
+};
+
+const getTopics = (initiative) => {
+  return initiative['tagged'].reduce((topics, tagged) => {
+    return topics.concat(tagged['topics']);
+  }, []);
+};
+
+const getDeputies = (initiative) => {
+  if (initiative.deputies.length == 0) return '';
+  let regex_id = /\[.*\]/;
+  return initiative.deputies
+    .map((d) => {
+      var has_id = regex_id.exec(d);
+      if (!has_id) return d;
+      return d.replace(has_id[0], '').trim();
+    })
+    .join('<br/>');
 };
 </script>

package/src/components/InitiativeMeta/InitiativeMeta.vue

@@ -13,72 +13,67 @@
   </div>
 </template>
 
-<script>
+<script setup>
 import { formatDistanceToNow } from 'date-fns/formatDistanceToNow';
 import { es } from 'date-fns/locale/es';
 import TipiIcon from '../Icon/Icon.vue';
 
-export default {
-  name: 'TipiInitiativeMeta',
-  components: {
-    TipiIcon,
-  },
-  props: {
-    initiative: Object,
-    metaColors: {
-      type: Object,
-      default: function () {
-        return {
-          completed: [
-            'Aprobada',
-            'Respondida',
-            'Celebrada',
-            'Convertida en otra',
-            'Acumulada en otra',
-          ],
-          neutral: ['En tramitación', 'Desconocida'],
-          error: [
-            'No admitida a trámite',
-            'No debatida',
-            'Caducada',
-            'Rechazada',
-            'Retirada',
-            'Derogada',
-            'No celebrada',
-          ],
-        };
-      },
+const { initiative, metaColors } = defineProps({
+  initiative: Object,
+  metaColors: {
+    type: Object,
+    default: function () {
+      return {
+        completed: [
+          'Aprobada',
+          'Respondida',
+          'Celebrada',
+          'Convertida en otra',
+          'Acumulada en otra',
+        ],
+        neutral: ['En tramitación', 'Desconocida'],
+        error: [
+          'No admitida a trámite',
+          'No debatida',
+          'Caducada',
+          'Rechazada',
+          'Retirada',
+          'Derogada',
+          'No celebrada',
+        ],
+      };
     },
   },
-  methods: {
-    getColorByStatus: function (status) {
-      for (let color in this.metaColors) {
-        if (this.metaColors[color].indexOf(status) != -1) return color;
-      }
-      return 'neutral';
-    },
-    getIcon: function (initiative) {
-      const color = this.getColorByStatus(initiative['status']);
-      const map = { completed: 'success', neutral: 'clock', error: 'denied' };
-      return map[color];
-    },
-    getStateMessage: function (initiative) {
-      if (initiative['status'] == 'Desconocida') {
-        return `${initiative['status']}`;
-      }
+});
 
-      const color = this.getColorByStatus(initiative['status']);
-      let date = initiative['updated'];
-      if (color == 'neutral') {
-        date = initiative['created'];
-      }
+const getColorByStatus = (status) => {
+  for (let color in metaColors) {
+    if (metaColors[color].indexOf(status) != -1) return color;
+  }
+  return 'neutral';
+};
 
-      const formattedDate = formatDistanceToNow(new Date(date), {
-        locale: es,
-        addSuffix: true,
-      }).replace('alrededor de ', '');
-      return `${initiative['status']} ${formattedDate}`;
-    },
-  },
+const getIcon = (initiative) => {
+  const color = getColorByStatus(initiative['status']);
+  const map = { completed: 'success', neutral: 'clock', error: 'denied' };
+  return map[color];
+};
+
+const getStateMessage = (initiative) => {
+  if (initiative['status'] == 'Desconocida') {
+    return `${initiative['status']}`;
+  }
+
+  const color = getColorByStatus(initiative['status']);
+  let date = initiative['updated'];
+  if (color == 'neutral') {
+    date = initiative['created'];
+  }
+
+  const formattedDate = formatDistanceToNow(new Date(date), {
+    locale: es,
+    addSuffix: true,
+  }).replace('alrededor de ', '');
+  return `${initiative['status']} ${formattedDate}`;
 };
 </script>