@politicalwatch/tipi-uikit 1.9.15 → 1.9.16

package/.storybook/main.js

@@ -1,5 +1,5 @@
 /** @type { import('@storybook/vue3-vite').StorybookConfig } */
-const config = {
+export default {
   stories: ['../src/**/*.mdx', '../src/**/*.stories.@(js|jsx|mjs|ts|tsx)'],
   addons: [
     '@storybook/addon-links',
@@ -15,5 +15,24 @@ const config = {
   },
   docs: {},
   staticDirs: [{ from: '../src/assets', to: '/assets' }],
+  async viteFinal(config, { configType }) {
+    const { mergeConfig } = await import('vite');
+
+    if (configType === 'DEVELOPMENT') {
+      // Your development configuration goes here
+    }
+    if (configType === 'PRODUCTION') {
+      // Your production configuration goes here.
+    }
+    return mergeConfig(config, {
+      // Your environment configuration here
+      css: {
+        preprocessorOptions: {
+          scss: {
+            additionalData: `@import "@/styles/main.scss";`,
+          },
+        },
+      },
+    });
+  },
 };
-export default config;

package/.storybook/preview.js

@@ -1,5 +1,3 @@
-import '../src/styles/main.scss';
-
 /** @type { import('@storybook/vue3').Preview } */
 const preview = {
   parameters: {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@politicalwatch/tipi-uikit",
-  "version": "1.9.15",
+  "version": "1.9.16",
   "main": "src/components/index.js",
   "scripts": {
     "dev": "vite",

package/src/components/Deputy/Deputy.vue

@@ -103,4 +103,183 @@ const getConstituency = () => {
 };
 </script>
 
-<style scoped lang="scss"></style>
+<style scoped lang="scss">
+.c-deputy {
+  padding: rem($spacer-unit * 8) rem($spacer-unit * 4) rem($spacer-unit * 4);
+  background-color: $secondary-light;
+  color: $secondary-dark;
+
+  @media (min-width: $md) {
+    margin-bottom: rem($spacer-unit * 4);
+  }
+
+  &__image_container {
+    position: relative;
+    width: rem($spacer-unit * 20);
+    height: rem($spacer-unit * 20);
+    margin: 0 auto 30px;
+
+    @media (min-width: $md) {
+      width: rem($spacer-unit * 20);
+      height: rem($spacer-unit * 20);
+    }
+  }
+
+  &__image {
+    width: rem($spacer-unit * 20);
+    height: rem($spacer-unit * 20);
+    border-radius: 50%;
+    object-fit: cover;
+    border: 2px solid $secondary;
+    margin: 0 auto rem($spacer-unit) auto;
+    display: block;
+    position: absolute;
+    z-index: 0;
+
+    @media (min-width: $md) {
+      margin: 0 0 0 auto;
+    }
+  }
+
+  &__name {
+    @include th2;
+
+    & {
+      text-align: center;
+      margin: 0 0 rem($spacer-unit) 0;
+    }
+
+    @media (min-width: $sm) {
+      text-align: left;
+    }
+  }
+
+  &__group {
+    @include subtitle;
+
+    & {
+      text-transform: uppercase;
+      margin: 0 0 rem($spacer-unit) 0;
+      text-align: center;
+    }
+
+    @media (min-width: $sm) {
+      text-align: left;
+    }
+
+    a {
+      text-decoration: none;
+      color: $secondary-dark;
+    }
+  }
+
+  &__description {
+    @include subtitle;
+
+    & {
+      text-align: center;
+    }
+
+    @media (min-width: $sm) {
+      text-align: left;
+    }
+  }
+
+  &__links {
+    @include th6;
+
+    & {
+      color: $secondary-dark;
+      text-align: center;
+    }
+
+    @media (min-width: $sm) {
+      text-align: left;
+    }
+
+    a {
+      color: $secondary-dark;
+      text-decoration: none;
+      display: block;
+
+      @media (min-width: $md) {
+        display: inline-block;
+        margin-right: rem($spacer-unit * 2);
+      }
+    }
+  }
+
+  &__extra {
+    margin-top: 8px;
+    margin-bottom: 8px;
+    text-align: center;
+
+    @media (min-width: $md) {
+      text-align: left;
+    }
+  }
+
+  &__personal {
+    margin-right: 16px;
+
+    span {
+      margin-right: 4px;
+    }
+  }
+
+  &__more {
+    text-align: center;
+
+    @media (min-width: $md) {
+      text-align: left;
+    }
+
+    a,
+    a:hover {
+      color: $secondary-dark;
+      font-weight: 500;
+      text-decoration: none;
+
+      .c-icon {
+        margin-left: 8px;
+      }
+    }
+  }
+
+  &__info {
+    display: inline-block;
+    vertical-align: top;
+    font-size: 14px;
+    margin-top: rem($spacer-unit * 8);
+
+    h3 {
+      color: $secondary;
+      font-size: 12px;
+    }
+
+    p,
+    a {
+      margin-top: 8px;
+      margin-bottom: 8px;
+    }
+
+    a {
+      font-weight: 500;
+      color: $secondary-dark;
+    }
+
+    span {
+      margin-right: 8px;
+    }
+  }
+
+  &__hidden {
+    display: none;
+  }
+
+  &__birthday {
+    background: url('../assets/birthday_bg.png');
+  }
+}
+
+</style>

package/src/components/Header/Header.vue

@@ -17,3 +17,43 @@ const props = defineProps({
 
 const { title, subtitle } = toRefs(props);
 </script>
+
+<style lang="scss" scoped>
+.c-page-header {
+  margin-bottom: rem($spacer-unit * 4);
+  padding-bottom: rem($spacer-unit * 4);
+  border-bottom: 1px solid $neutral;
+
+  @media (min-width: $md) {
+    margin-bottom: rem($spacer-unit * 8);
+  }
+
+  &__title {
+    margin-bottom: rem($spacer-unit * 2);
+    color: $secondary-dark;
+
+    a {
+      color: $secondary-dark;
+    }
+  }
+
+  &__subtitle {
+    @include subtitle;
+
+    & {
+      color: $secondary;
+      margin: 0;
+    }
+  }
+
+  &--nosub {
+    padding-bottom: rem($spacer-unit * 2);
+
+    .c-page-header {
+      &__title {
+        margin-bottom: 0;
+      }
+    }
+  }
+}
+</style>

package/src/components/InitiativeMeta/InitiativeMeta.vue

@@ -77,3 +77,95 @@ const getStateMessage = () => {
   return `${initiative.value['status']} ${formattedDate}`;
 };
 </script>
+
+<style lang="scss" scoped>
+.c-initiative-meta {
+  &__status {
+    @include overline;
+
+    display: block;
+    color: $white;
+    padding: rem($spacer-unit);
+    text-align: center;
+
+    &--neutral {
+      background-color: $secondary;
+      color: $black;
+    }
+
+    &--completed {
+      background-color: $completed;
+      color: $white;
+    }
+
+    &--error {
+      background-color: $error;
+      color: $white;
+    }
+  }
+
+  &__link {
+    @include overline;
+
+    text-transform: none;
+    text-decoration: none;
+    color: $black;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    svg {
+      margin-right: rem($spacer-unit);
+    }
+
+    &:hover {
+      color: $primary;
+
+      svg {
+        path {
+          fill: $primary;
+        }
+      }
+    }
+  }
+
+  .c-icon {
+    margin-right: 8px;
+  }
+
+  &__status {
+    text-align: left;
+    padding: 0 0 0 rem($spacer-unit);
+
+    &--neutral {
+      background-color: transparent;
+      border-color: $secondary;
+      color: $secondary;
+
+      svg path {
+        fill: $secondary;
+      }
+    }
+
+    &--completed {
+      background-color: transparent;
+      border-color: $completed;
+      color: $completed;
+
+      svg path {
+        fill: $completed;
+      }
+    }
+
+    &--error {
+      background-color: transparent;
+      border-color: $error;
+      color: $error;
+
+      svg path {
+        fill: $error;
+      }
+    }
+  }
+}
+</style>

package/src/components/Loader/Loader.vue

@@ -21,3 +21,131 @@ const { title, subtitle } = defineProps({
   subtitle: String,
 });
 </script>
+
+<style lang="scss">
+.c-loader {
+  padding: rem($spacer-unit * 4) rem($spacer-unit * 2);
+  color: $secondary-dark;
+  text-align: center;
+  background-color: $secondary-light;
+
+  &__text {
+    margin-top: rem($spacer-unit * 2);
+  }
+
+  &__title {
+    @include th5;
+
+    & {
+      margin: 0 0 rem($spacer-unit) 0;
+    }
+
+    @media (min-width: $md) {
+      @include th4;
+
+      & {
+        margin: 0 0 rem($spacer-unit) 0;
+      }
+    }
+  }
+
+  &__spinner {
+    margin: 0 auto;
+    width: rem($spacer-unit * 5);
+    height: rem($spacer-unit * 5);
+    position: relative;
+    animation: sk-chase 2.5s infinite linear both;
+  }
+
+  &__spinner-dot {
+    width: 100%;
+    height: 100%;
+    position: absolute;
+    left: 0;
+    top: 0;
+    animation: sk-chase-dot 2s infinite ease-in-out both;
+
+    &::before {
+      content: '';
+      display: block;
+      width: 25%;
+      height: 25%;
+      background-color: $secondary;
+      border-radius: 100%;
+      animation: sk-chase-dot-before 2s infinite ease-in-out both;
+    }
+
+    &:nth-child(1) {
+      animation-delay: -1.1s;
+
+      &::before {
+        animation-delay: -1.1s;
+      }
+    }
+
+    &:nth-child(2) {
+      animation-delay: -1s;
+
+      &::before {
+        animation-delay: -1s;
+      }
+    }
+
+    &:nth-child(3) {
+      animation-delay: -0.9s;
+
+      &::before {
+        animation-delay: -0.9s;
+      }
+    }
+
+    &:nth-child(4) {
+      animation-delay: -0.8s;
+
+      &::before {
+        animation-delay: -0.8s;
+      }
+    }
+
+    &:nth-child(5) {
+      animation-delay: -0.7s;
+
+      &::before {
+        animation-delay: -0.7s;
+      }
+    }
+
+    &:nth-child(6) {
+      animation-delay: -0.6s;
+
+      &::before {
+        animation-delay: -0.6s;
+      }
+    }
+  }
+}
+
+@keyframes sk-chase {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes sk-chase-dot {
+  80%,
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes sk-chase-dot-before {
+  50% {
+    transform: scale(0.4);
+  }
+
+  100%,
+  0% {
+    transform: scale(1);
+  }
+}
+</style>

package/src/components/Message/Message.vue

@@ -25,3 +25,72 @@ const props = defineProps({
 
 const { type, icon } = toRefs(props);
 </script>
+
+<style lang="scss" scoped>
+.c-message {
+  margin-bottom: rem($spacer-unit * 2);
+
+  &__wrapper {
+    @include tbody2;
+
+    display: inline-block;
+    padding: rem($spacer-unit * 2) rem($spacer-unit * 4);
+    background-color: $completed;
+    color: $white;
+    position: relative;
+  }
+
+  &__icon {
+    position: absolute;
+    left: rem($spacer-unit * 2);
+    margin-top: rem(calc($spacer-unit / 4));
+
+    svg {
+      path {
+        fill: $white;
+      }
+    }
+  }
+
+  &--error {
+    .c-message {
+      &__wrapper {
+        background-color: $error;
+      }
+    }
+  }
+
+  &--info {
+    .c-message {
+      &__wrapper {
+        color: $secondary-dark;
+        background-color: $secondary-light;
+      }
+
+      &__icon {
+        svg {
+          path {
+            fill: $secondary;
+          }
+        }
+      }
+    }
+  }
+
+  &--icon {
+    .c-message {
+      &__wrapper {
+        padding-left: rem($spacer-unit * 5);
+      }
+    }
+  }
+
+  &.u-block {
+    .c-message {
+      &__wrapper {
+        display: block;
+      }
+    }
+  }
+}
+</style>