@citizenplane/pimp 8.11.3 → 8.12.0

package/src/components/core/playground-sections/SectionButtons.vue

@@ -1,142 +0,0 @@
-<template>
-  <section-container section-title="Buttons" class="sectionButtons">
-    <div class="sectionButtons__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionButtons__title">Default</cp-heading>
-      <div class="sectionButtons__buttons">
-        <cp-button>Default button</cp-button>
-        <cp-button color="blue">Default blue button</cp-button>
-        <cp-button color="purple">Default purple button</cp-button>
-        <cp-button color="green">Default green button</cp-button>
-        <cp-button color="orange">Default orange button</cp-button>
-        <cp-button color="red">Default red button</cp-button>
-      </div>
-    </div>
-    <div class="sectionButtons__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionButtons__title">Primary</cp-heading>
-      <div class="sectionButtons__buttons">
-        <cp-button appearance="primary" color="blue">Primary button</cp-button>
-        <cp-button appearance="primary" color="purple">Primary button</cp-button>
-        <cp-button appearance="primary" color="green">Primary button</cp-button>
-        <cp-button appearance="primary" color="orange">Primary button</cp-button>
-        <cp-button appearance="primary" color="red">Primary button</cp-button>
-      </div>
-    </div>
-    <div class="sectionButtons__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionButtons__title">Minimal</cp-heading>
-      <div class="sectionButtons__buttons">
-        <cp-button appearance="minimal" color="blue">Minimal button</cp-button>
-        <cp-button appearance="minimal" color="purple">Minimal button</cp-button>
-        <cp-button appearance="minimal" color="green">Minimal button</cp-button>
-        <cp-button appearance="minimal" color="orange">Minimal button</cp-button>
-        <cp-button appearance="minimal" color="red">Minimal button</cp-button>
-      </div>
-    </div>
-    <div class="sectionButtons__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionButtons__title">Buttons as links</cp-heading>
-      <div class="sectionButtons__buttons">
-        <cp-button color="purple" tag="a">Default button (link)</cp-button>
-        <cp-button appearance="primary" color="purple" tag="a">Primary button (link)</cp-button>
-        <cp-button appearance="minimal" color="purple" tag="a">Minimal button (link)</cp-button>
-      </div>
-    </div>
-    <div class="sectionButtons__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionButtons__title">Disabled</cp-heading>
-      <div class="sectionButtons__buttons">
-        <cp-button disabled appearance="primary" color="green">Disabled button</cp-button>
-        <cp-button disabled appearance="minimal" color="green" tag="a">Disabled button (link)</cp-button>
-      </div>
-    </div>
-    <div class="sectionButtons__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionButtons__title">With icons</cp-heading>
-      <div class="sectionButtons__buttons">
-        <cp-button color="red">
-          <template #icon-before><cp-icon type="refresh-cw" /></template> Default button
-        </cp-button>
-        <cp-button appearance="primary" color="red">
-          <template #icon-after><cp-icon type="refresh-cw" /></template> Primary button
-        </cp-button>
-        <cp-button appearance="minimal" color="red">
-          <template #icon-after><cp-icon type="refresh-cw" /></template>
-        </cp-button>
-      </div>
-    </div>
-    <div class="sectionButtons__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionButtons__title">Loading</cp-heading>
-      <div class="sectionButtons__buttons">
-        <cp-button color="orange" :is-loading="loaders.primary" @click="load('primary')">
-          <template #icon-before><cp-icon type="refresh-cw" /></template> Default button
-        </cp-button>
-        <cp-button appearance="primary" color="orange" :is-loading="loaders.secondary" @click="load('secondary')">
-          Default button
-        </cp-button>
-        <cp-button color="orange" appearance="minimal" :is-loading="loaders.secondary" @click="load('secondary')">
-          <template #icon-before><cp-icon type="refresh-cw" /></template>
-        </cp-button>
-      </div>
-    </div>
-    <div class="sectionButtons__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionButtons__title">Square</cp-heading>
-      <div class="sectionButtons__buttons">
-        <cp-button is-square color="green">Square button</cp-button>
-        <cp-button is-square appearance="primary" color="green">Square button</cp-button>
-        <cp-button is-square color="green" appearance="minimal"> Square button </cp-button>
-      </div>
-    </div>
-    <div class="sectionButtons__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionButtons__title">Large</cp-heading>
-      <div class="sectionButtons__buttons">
-        <cp-button is-large color="green">
-          <template #icon-before><cp-icon type="refresh-cw" /></template> Large button
-        </cp-button>
-        <cp-button is-large appearance="primary" color="green">
-          Large button <template #icon-after><cp-icon type="refresh-cw" /></template>
-        </cp-button>
-        <cp-button is-large color="green" appearance="minimal"> Large button </cp-button>
-      </div>
-    </div>
-  </section-container>
-</template>
-
-<script>
-import SectionContainer from '@/components/core/playground-sections/SectionContainer.vue'
-
-export default {
-  components: {
-    SectionContainer,
-  },
-  data() {
-    return {
-      loaders: {
-        primary: false,
-        secondary: false,
-      },
-    }
-  },
-  methods: {
-    load(index) {
-      this.loaders[index] = true
-      setTimeout(() => {
-        this.loaders[index] = false
-      }, 2000)
-    },
-  },
-}
-</script>
-
-<style lang="scss">
-.sectionButtons {
-  &__title {
-    margin-bottom: sp.$space-lg;
-  }
-
-  &__buttons {
-    display: flex;
-    align-items: center;
-    flex-wrap: wrap;
-
-    > * {
-      margin: 0 sp.$space-lg sp.$space-lg 0;
-    }
-  }
-}
-</style>

package/src/components/core/playground-sections/SectionContainer.vue

@@ -1,50 +0,0 @@
-<template>
-  <section class="sectionContainer">
-    <cp-heading heading-level="h2" :size="700" class="sectionContainer__title">{{ sectionTitle }}</cp-heading>
-    <div class="sectionContainer__body">
-      <slot />
-    </div>
-  </section>
-</template>
-
-<script>
-export default {
-  props: {
-    sectionTitle: {
-      type: String,
-      default: '',
-    },
-  },
-}
-</script>
-
-<style lang="scss">
-.sectionContainer {
-  padding: sp.$space-xl;
-  width: 100%;
-
-  &:not(first-child) {
-    border-top: 1px solid colors.$neutral-dark-4;
-  }
-
-  &__title {
-    margin-bottom: sp.$space-xl;
-  }
-
-  .item {
-    width: 100%;
-    margin-bottom: 20px;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-
-    & > span {
-      margin-bottom: fn.px-to-rem(10);
-    }
-
-    h3 {
-      margin-bottom: fn.px-to-rem(10);
-    }
-  }
-}
-</style>

package/src/components/core/playground-sections/SectionDatePickers.vue

@@ -1,160 +0,0 @@
-<template>
-  <section-container section-title="Date picker" class="sectionDatePickers">
-    <div class="sectionDatePickers__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionDatePickers__title">
-        Default date input: {{ cpDate }}
-      </cp-heading>
-      <div class="sectionDatePickers__datepickers">
-        <cp-date
-          v-model="cpDate"
-          label="default date input"
-          class="sectionDatePickers__date"
-          :is-invalid="false"
-          locale="fr"
-        />
-      </div>
-    </div>
-    <div class="sectionDatePickers__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionDatePickers__title">
-        Default datepicker: {{ date }}
-      </cp-heading>
-      <div class="sectionDatePickers__datepickers">
-        <cp-datepicker label="Simple datepicker" :init-date-one="date" @dates="setDate" />
-        <cp-button class="sectionDatePickers__button" @click="resetDate">Reset date</cp-button>
-      </div>
-      <div class="sectionDatePickers__datepickers">
-        <div class="sectionDatePickers__wrapper">
-          <cp-input id="datepicker-trigger" label="CoreDatepicker" placeholder="CoreDatepicker" />
-          <cp-core-datepicker
-            class="sectionDatePickers__custom"
-            mode="range"
-            close-after-select
-            is-inline
-            @opened="() => (isDepartureDatepickerOpen = true)"
-            @closed="() => (isDepartureDatepickerOpen = false)"
-          />
-        </div>
-      </div>
-    </div>
-    <div class="sectionDatePickers__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionDatePickers__title">
-        Simple inline datepicker: {{ date }}
-      </cp-heading>
-      <div class="sectionDatePickers__datepickers">
-        <cp-datepicker label="Range datepicker" single-month is-inline :init-date-one="date" @dates="setDate" />
-        <cp-datepicker label="Range datepicker" is-inline :init-date-one="date" @dates="setDate" />
-      </div>
-    </div>
-    <div class="sectionDatePickers__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionDatePickers__title"> Range datepicker </cp-heading>
-      <div class="sectionDatePickers__datepickers">
-        <cp-datepicker label="Range datepicker" mode="range" min-date="2020-10-10" />
-      </div>
-    </div>
-    <div class="sectionDatePickers__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionDatePickers__title">
-        Simple datepicker with custom placeholder
-      </cp-heading>
-      <div class="sectionDatePickers__datepickers">
-        <cp-datepicker
-          label="Simple datepicker with custom placeholder"
-          :init-date-one="date"
-          placeholder="Custom placeholder"
-          @dates="setDate"
-        />
-      </div>
-    </div>
-    <div class="sectionDatePickers__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionDatePickers__title">
-        Datepicker with set minDate & maxDate (2021-01-01 / 2021-01-10)
-      </cp-heading>
-      <div class="sectionDatePickers__datepickers">
-        <cp-datepicker
-          label="Datepicker with set minDate & maxDate"
-          min-date="2022-01-01"
-          max-date="2022-01-10"
-          placeholder="Custom placeholder"
-          @dates="setDate"
-        />
-      </div>
-    </div>
-    <div class="sectionDatePickers__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionDatePickers__title"> Allow-past-dates </cp-heading>
-      <div class="sectionDatePickers__datepickers">
-        <cp-datepicker label="Allow past dates" allow-past-dates placeholder="Custom placeholder" @dates="setDate" />
-      </div>
-    </div>
-    <div class="sectionDatePickers__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionDatePickers__title"> Default CpCalendar </cp-heading>
-      <div class="sectionDatePickers__datepickers">
-        <cp-calendar label="Calendar" />
-      </div>
-    </div>
-  </section-container>
-</template>
-
-<script>
-import SectionContainer from '@/components/core/playground-sections/SectionContainer.vue'
-
-export default {
-  components: {
-    SectionContainer,
-  },
-  data() {
-    return {
-      cpDate: '',
-      date: null,
-      isDepartureDatepickerOpen: false,
-    }
-  },
-  methods: {
-    setDate(newValue) {
-      this.date = newValue[0]
-    },
-    resetDate() {
-      this.date = null
-    },
-  },
-}
-</script>
-<style lang="scss">
-.sectionDatePickers {
-  &__title {
-    margin-bottom: sp.$space-lg;
-  }
-
-  &__datepickers {
-    display: flex;
-    align-items: flex-end;
-    flex-wrap: wrap;
-
-    > * {
-      margin: 0 sp.$space-lg sp.$space-lg 0;
-    }
-  }
-
-  &__date {
-    width: min(100%, 450px);
-  }
-
-  &__item {
-    display: flex;
-    align-items: flex-end;
-    justify-content: center;
-  }
-
-  &__button {
-    margin-left: sp.$space-lg;
-  }
-
-  &__wrapper {
-    position: relative;
-  }
-
-  &__custom {
-    position: absolute;
-    top: calc(100% + 16px);
-    left: 0;
-  }
-}
-</style>

package/src/components/core/playground-sections/SectionDialog.vue

@@ -1,47 +0,0 @@
-<template>
-  <section-container section-title="Dialog" class="sectionDialog">
-    <cp-dialog-wrapper>
-      <cp-dialog v-if="isDialogVisible" @close="toggleDialog">
-        <template #header>
-          <h3 class="sectionDialog__header">Some dialog header...</h3>
-        </template>
-        <template #content>
-          <p class="sectionDialog__content">Some dialog content...</p>
-        </template>
-        <template #footer>
-          <div class="sectionDialog__footer">
-            <cp-button @click="toggleDialog">Close</cp-button>
-          </div>
-        </template>
-      </cp-dialog>
-    </cp-dialog-wrapper>
-    <cp-button @click="toggleDialog">Show dialog</cp-button>
-  </section-container>
-</template>
-
-<script setup>
-import { ref } from 'vue'
-
-import SectionContainer from '@/components/core/playground-sections/SectionContainer.vue'
-import CpDialogWrapper from '@/components/atomic-elements/CpDialogWrapper.vue'
-import CpDialog from '@/components/atomic-elements/CpDialog.vue'
-
-const isDialogVisible = ref(false)
-
-const toggleDialog = () => (isDialogVisible.value = !isDialogVisible.value)
-</script>
-
-<style lang="scss">
-.sectionDialog {
-  &__header,
-  &__content {
-    padding: sp.$space-xl;
-  }
-
-  &__footer {
-    display: flex;
-    justify-content: flex-end;
-    width: 100%;
-  }
-}
-</style>

package/src/components/core/playground-sections/SectionFeedbackIndicators.vue

@@ -1,47 +0,0 @@
-<template>
-  <section-container section-title="Feedback Indicators" class="sectionFeedbackIndicators">
-    <div class="sectionFeedbackIndicators__alertMessage">
-      <cp-heading heading-level="h3" :size="600" class="sectionFeedbackIndicators__title">Alert message</cp-heading>
-      <cp-alert
-        v-for="(alert, alertIndex) in alertMessages"
-        :key="alertIndex"
-        :intent="alert"
-        :title="`Alert intent: ${alert}`"
-        is-closable
-      >
-        The quick, brown fox jumps over a lazy dog.
-      </cp-alert>
-    </div>
-  </section-container>
-</template>
-
-<script>
-import SectionContainer from '@/components/core/playground-sections/SectionContainer.vue'
-
-export default {
-  components: {
-    SectionContainer,
-  },
-  data() {
-    return {
-      alertMessages: ['info', 'success', 'warning', 'critical'],
-    }
-  },
-}
-</script>
-
-<style lang="scss">
-.sectionFeedbackIndicators {
-  &__alertMessage {
-    width: 100%;
-
-    > *:not(:last-of-type) {
-      margin-bottom: sp.$space;
-    }
-  }
-
-  &__title {
-    margin-bottom: sp.$space-lg;
-  }
-}
-</style>

package/src/components/core/playground-sections/SectionInputs.vue

@@ -1,46 +0,0 @@
-<template>
-  <section-container section-title="Inputs" class="sectionInputs">
-    <div class="sectionInputs__section">
-      <cp-heading heading-level="h3" :size="600" class="sectionInputs__title">Simple inputs</cp-heading>
-      <section-simple-inputs />
-    </div>
-    <div class="sectionInputs__section">
-      <cp-heading heading-level="h3" :size="600" class="sectionInputs__title">Textarea</cp-heading>
-      <cp-textarea
-        v-model="textarea"
-        label="Textarea label"
-        placeholder="The quick, brown fox jumps over a lazy dog."
-      />
-    </div>
-  </section-container>
-</template>
-
-<script>
-import SectionContainer from '@/components/core/playground-sections/SectionContainer.vue'
-import SectionSimpleInputs from '@/components/core/playground-sections/SectionSimpleInputs.vue'
-import CpTextarea from '@/components/inputs/CpTextarea.vue'
-
-export default {
-  components: {
-    CpTextarea,
-    SectionContainer,
-    SectionSimpleInputs,
-  },
-  data() {
-    return {
-      textarea: '',
-    }
-  },
-}
-</script>
-<style lang="scss">
-.sectionInputs {
-  &__section:not(:last-of-type) {
-    margin-bottom: sp.$space-lg;
-  }
-
-  &__title {
-    margin-bottom: sp.$space-lg;
-  }
-}
-</style>