@citizenplane/pimp 8.11.3 → 8.13.0

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

@@ -1,120 +0,0 @@
-<template>
-  <section-container section-title="Selects" class="sectionSelects">
-    <div class="sectionSelects__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionSelects__title">Default</cp-heading>
-      <div class="sectionSelects__selects">
-        <cp-select v-model="selects.default" label="Default select" :options="selects.options" />
-      </div>
-    </div>
-    <div class="sectionSelects__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionSelects__title">Sizes</cp-heading>
-      <div class="sectionSelects__selects">
-        <cp-select
-          v-model="selects.sizes"
-          label="Select 18px font-sized"
-          :options="selects.options"
-          style="font-size: 18px"
-        />
-        <cp-select v-model="selects.sizes" label="Select 16px font-sized" :options="selects.options" />
-        <cp-select
-          v-model="selects.sizes"
-          label="Select 14px font-sized"
-          :options="selects.options"
-          style="font-size: 14px"
-        />
-        <cp-select
-          v-model="selects.sizes"
-          label="Select 12px font-sized"
-          :options="selects.options"
-          style="font-size: 12px"
-        />
-      </div>
-    </div>
-    <div class="sectionSelects__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionSelects__title">Disabled</cp-heading>
-      <div class="sectionSelects__selects">
-        <cp-select v-model="selects.disabled" disabled label="Disabled select" :options="selects.options" />
-      </div>
-    </div>
-    <div class="sectionSelects__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionSelects__title">With error</cp-heading>
-      <div class="sectionSelects__selects">
-        <cp-select v-model="selects.disabled" label="Select with error" :options="selects.options" is-invalid />
-        <cp-select
-          v-model="selects.disabled"
-          label="Select with error message"
-          :options="selects.options"
-          is-invalid
-          error-message="This select has an error message"
-        />
-        <cp-select
-          v-model="selects.disabled"
-          disabled
-          label="Disabled select with error"
-          :options="selects.options"
-          is-invalid
-          error-message="This select has an error message"
-        />
-      </div>
-    </div>
-    <div class="sectionSelects__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionSelects__title">Large</cp-heading>
-      <div class="sectionSelects__selects">
-        <cp-select v-model="selects.large" is-large label="Select with error" :options="selects.options" is-invalid />
-      </div>
-    </div>
-  </section-container>
-</template>
-
-<script>
-import SectionContainer from './SectionContainer.vue'
-
-export default {
-  components: {
-    SectionContainer,
-  },
-  data() {
-    return {
-      selects: {
-        default: '',
-        sizes: '',
-        disabled: '',
-        large: '',
-        error: '',
-        options: [
-          {
-            label: 'very very long option 1',
-            value: 'first_option',
-          },
-          {
-            label: 'option 2',
-            value: 'second_option',
-          },
-          {
-            label: 'option 3',
-            value: 'third_option',
-          },
-        ],
-      },
-    }
-  },
-}
-</script>
-
-<style lang="scss">
-.sectionSelects {
-  &__title {
-    margin-bottom: sp.$space-lg;
-  }
-
-  &__selects {
-    display: flex;
-    align-items: flex-end;
-    flex-wrap: wrap;
-
-    > * {
-      margin: 0 sp.$space-lg sp.$space-lg 0;
-    }
-  }
-}
-</style>

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

@@ -1,305 +0,0 @@
-<template>
-  <div class="sectionSimpleInputs">
-    <div class="sectionSimpleInputs__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionSimpleInputs__title">Default</cp-heading>
-      <div class="sectionSimpleInputs__inputs">
-        <cp-input v-model="inputs.default" label="Default input" type="text" placeholder="default input placeholder" />
-      </div>
-    </div>
-    <div class="sectionSimpleInputs__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionSimpleInputs__title">Sizes</cp-heading>
-      <div class="sectionSimpleInputs__inputs">
-        <cp-input
-          v-model="inputs.sizes"
-          label="Input 18px font-sized"
-          placeholder="Input placeholder"
-          type="text"
-          style="font-size: 18px"
-        />
-        <cp-input
-          v-model="inputs.sizes"
-          label="Input 16px font-sized"
-          placeholder="Input placeholder"
-          type="text"
-          style="font-size: 16px"
-        />
-        <cp-input
-          v-model="inputs.sizes"
-          label="Input 14px font-sized"
-          placeholder="Input placeholder"
-          type="text"
-          style="font-size: 14px"
-        />
-        <cp-input
-          v-model="inputs.sizes"
-          label="Input 12px font-sized"
-          placeholder="Input placeholder"
-          type="text"
-          style="font-size: 12px"
-        />
-      </div>
-    </div>
-    <div class="sectionSimpleInputs__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionSimpleInputs__title">With icons</cp-heading>
-      <div class="sectionSimpleInputs__inputs">
-        <cp-input
-          v-model="inputs.icons"
-          label="Input with icon before – 18px font-sized"
-          type="text"
-          placeholder="Input placeholder"
-          style="font-size: 18px"
-        >
-          <template #input-icon><cp-icon type="map-pin" /></template>
-        </cp-input>
-        <cp-input v-model="inputs.icons" label="Input with icon before" type="text" placeholder="Input placeholder">
-          <template #input-icon><cp-icon type="map-pin" /></template>
-        </cp-input>
-        <cp-input
-          v-model="inputs.icons"
-          label="Input with icon after – 14px font-sized"
-          type="text"
-          placeholder="Input placeholder"
-          style="font-size: 14px"
-        >
-          <template #input-icon-after>
-            <span>cm</span>
-          </template>
-        </cp-input>
-      </div>
-    </div>
-    <div class="sectionSimpleInputs__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionSimpleInputs__title">Disabled</cp-heading>
-      <div class="sectionSimpleInputs__inputs">
-        <cp-input
-          label="Empty disabled input with icon before"
-          type="text"
-          placeholder="Input placeholder"
-          :disabled="true"
-        >
-          <template #input-icon><cp-icon type="map-pin" /></template>
-        </cp-input>
-        <cp-input
-          v-model="inputs.disabled"
-          label="Valid disabled input with icon before"
-          type="text"
-          placeholder="Input placeholder"
-          disabled
-        >
-          <template #input-icon><cp-icon type="map-pin" /></template>
-        </cp-input>
-        <cp-input
-          v-model="inputs.disabled"
-          label="Invalid disabled input with icon after"
-          type="text"
-          placeholder="Input placeholder"
-          disabled
-          is-invalid
-        >
-          <template #input-icon-after>
-            <span>cm</span>
-          </template>
-        </cp-input>
-      </div>
-    </div>
-    <div class="sectionSimpleInputs__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionSimpleInputs__title">Search</cp-heading>
-      <div class="sectionSimpleInputs__inputs">
-        <cp-input
-          v-model="inputs.search"
-          is-search
-          label="Search input with clear button"
-          placeholder="Input placeholder"
-        />
-      </div>
-    </div>
-    <div class="sectionSimpleInputs__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionSimpleInputs__title">Help</cp-heading>
-      <div class="sectionSimpleInputs__inputs">
-        <cp-input
-          v-model="inputs.help"
-          tooltip="The booking reference is a 6-character alphanumeric code that can be found in the booking confirmation email or on the e-ticket itinerary."
-          label="Help input"
-          required
-          placeholder="Input placeholder"
-          help="This is a help text"
-        />
-        <cp-input
-          v-model="inputs.help"
-          tooltip="The booking reference is a 6-character alphanumeric code that can be found in the booking confirmation email or on the e-ticket itinerary."
-          label="Help input"
-          required
-          placeholder="Input placeholder"
-          help="This is a help text"
-          is-invalid
-          error-message="This input has an error & help"
-        />
-      </div>
-    </div>
-    <div class="sectionSimpleInputs__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionSimpleInputs__title">Errors</cp-heading>
-      <div class="sectionSimpleInputs__inputs">
-        <cp-input
-          v-model="inputs.error"
-          label="Invalid input with icon before"
-          type="text"
-          placeholder="Input placeholder"
-          is-invalid
-          error-message="This input has an error"
-        >
-          <template #input-icon><cp-icon type="map-pin" /></template>
-        </cp-input>
-        <cp-input
-          v-model="inputs.error"
-          label="Invalid input with icon before"
-          type="text"
-          placeholder="Input placeholder"
-          is-invalid
-          error-message="This input has an error"
-        >
-          <template #input-icon><cp-icon type="map-pin" /></template>
-        </cp-input>
-        <cp-input
-          v-model="inputs.error"
-          label="Invalid input with icon after"
-          type="text"
-          placeholder="Input placeholder"
-          is-invalid
-          error-message="This input has an error"
-        >
-          <template #input-icon-after>
-            <span>cm</span>
-          </template>
-        </cp-input>
-      </div>
-    </div>
-    <div class="sectionSimpleInputs__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionSimpleInputs__title">Hidden after icon</cp-heading>
-      <div class="sectionSimpleInputs__inputs">
-        <cp-input
-          v-model="inputs.hidden"
-          label="Input with hidden after icon + hidden invalidity icon"
-          type="text"
-          placeholder="Input placeholder"
-          hide-invalidity-icon
-          is-invalid
-        />
-      </div>
-    </div>
-    <div class="sectionSimpleInputs__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionSimpleInputs__title">Types</cp-heading>
-      <div class="sectionSimpleInputs__inputs">
-        <cp-input
-          v-model="inputs.poop"
-          label="Type number, masked ###"
-          type="number"
-          placeholder="Input placeholder"
-          mask="###"
-        />
-        <cp-input v-model="inputs.number" label="Input type number" type="number" placeholder="Input placeholder" />
-        <cp-input
-          v-model="inputs.email"
-          required
-          label="Required input type email"
-          type="email"
-          placeholder="Input placeholder"
-        />
-        <cp-input v-model="inputs.date" label="Input type date" type="date" placeholder="Input placeholder" />
-        <cp-input
-          v-model="inputs.password"
-          label="Input type password"
-          type="password"
-          placeholder="Input placeholder"
-        />
-      </div>
-    </div>
-    <div class="sectionSimpleInputs__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionSimpleInputs__title">Masks</cp-heading>
-      <div class="sectionSimpleInputs__inputs">
-        <cp-input
-          v-model="inputs.mask"
-          label="Date masked input"
-          type="text"
-          placeholder="00/00/0000"
-          mask="##/##/####"
-        />
-      </div>
-    </div>
-    <div class="sectionSimpleInputs__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionSimpleInputs__title">No border</cp-heading>
-      <div class="sectionSimpleInputs__inputs">
-        <cp-input
-          v-model="inputs.border"
-          label="Input without border"
-          type="text"
-          placeholder="I dont have borders"
-          remove-border
-        />
-        <cp-input
-          v-model="inputs.border"
-          label="Input with error & without border"
-          placeholder="I dont have borders"
-          type="text"
-          remove-border
-          is-invalid
-        />
-      </div>
-    </div>
-    <div class="sectionSimpleInputs__type">
-      <cp-heading heading-level="h3" :size="600" class="sectionSimpleInputs__title">Large</cp-heading>
-      <div class="sectionSimpleInputs__inputs">
-        <cp-input v-model="inputs.large" label="Large input" type="text" placeholder="Input placeholder" is-large />
-        <cp-input v-model="inputs.large" label="Large input" type="text" placeholder="Input placeholder" is-large>
-          <template #input-icon><cp-icon type="map-pin" /></template>
-          <template #input-icon-after>
-            <span>cm</span>
-          </template>
-        </cp-input>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  data() {
-    return {
-      inputs: {
-        default: '',
-        sizes: '',
-        icons: '',
-        disabled: 'disabled',
-        search: '',
-        help: '',
-        error: '',
-        hidden: 'very long input text field that is so long I can see that icon is hidden',
-        poop: null,
-        number: null,
-        email: 'wrong email',
-        date: '',
-        password: '',
-        mask: '',
-        border: '',
-        large: '',
-      },
-    }
-  },
-}
-</script>
-
-<style lang="scss">
-.sectionSimpleInputs {
-  &__title {
-    margin-bottom: sp.$space-lg;
-  }
-
-  &__inputs {
-    display: flex;
-    align-items: flex-end;
-    flex-wrap: wrap;
-
-    > * {
-      margin: 0 sp.$space-lg sp.$space-lg 0;
-    }
-  }
-}
-</style>

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

@@ -1,68 +0,0 @@
-<template>
-  <section-container section-title="Toaster" class="sectionToaster">
-    <div class="item">
-      <cp-button @click="addUniqueToaster">Add Unique</cp-button>
-    </div>
-    <div class="item">
-      <cp-button @click="addMultipleToaster">Add Multiple</cp-button>
-    </div>
-    <div class="item">
-      <cp-button @click="addSuccessToaster">Add Success</cp-button>
-    </div>
-    <div class="item">
-      <cp-button @click="addLinkToaster">Add link</cp-button>
-    </div>
-  </section-container>
-</template>
-
-<script>
-import SectionContainer from '@/components/core/playground-sections/SectionContainer.vue'
-
-export default {
-  components: {
-    SectionContainer,
-  },
-  methods: {
-    addUniqueToaster() {
-      this.$toaster.unique({
-        title: 'Unique message published',
-      })
-    },
-    addMultipleToaster() {
-      this.$toaster.warning({
-        title: 'This is a warning toaster',
-        description: 'This a description of a toaster',
-      })
-      this.$toaster.info({
-        title: 'This is an info toaster',
-        description: 'This a description of a toaster',
-      })
-      this.$toaster.success({
-        title: 'This is a success toaster',
-        description: 'This a description of a toaster',
-      })
-      this.$toaster.critical({
-        title: 'This is a critical toaster',
-        description: 'This a description of a toaster',
-      })
-    },
-    addSuccessToaster() {
-      this.$toaster.success({
-        title: 'This is a success toaster',
-        description: 'This a description of a toaster',
-      })
-    },
-    addLinkToaster() {
-      this.$toaster.success({
-        title: 'This is a success toaster',
-        description: 'Description of a toaster with a link',
-        actionLabel: 'See flight information',
-        actionMethod: (vm) => {
-          vm.closeToaster()
-          window.open('http://app.citizenplane.com', '_blank')
-        },
-      })
-    },
-  },
-}
-</script>

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

@@ -1,158 +0,0 @@
-<template>
-  <section-container section-title="Toggles" class="sectionToggles">
-    <div class="item">
-      <h3>Switch</h3>
-      <span>Switch state: {{ cpSwitchState }}</span>
-      <cp-switch v-model="cpSwitchState" class="sectionToggles__switch sectionToggles__switch--isSmall" />
-      <cp-switch
-        v-model="cpSwitchState"
-        class="sectionToggles__switch"
-        :color="Colors.PURPLE"
-        label="Purple switch with label"
-      />
-      <cp-switch
-        v-model="cpSwitchState"
-        class="sectionToggles__switch"
-        reverse-label
-        label="Default switch with reversed label"
-      />
-    </div>
-    <div class="item">
-      <h3>Switch disabled</h3>
-      <cp-switch v-model="cpSwitchState" class="sectionToggles__switch" label="Disabled switch" disabled />
-      <cp-switch v-model="cpSwitchState" class="sectionToggles__switch" disabled />
-      <cp-switch v-model="cpSwitchState" class="sectionToggles__switch" :color="Colors.PURPLE" disabled />
-    </div>
-    <div class="item">
-      <h3>Checkbox with multiple values</h3>
-      <span>Selected value: {{ checkboxGroupSelectOption }}</span>
-      <div class="sectionToggles__toggle">
-        <cp-checkbox
-          v-for="({ label, value, disabled }, index) in checkboxGroup"
-          :key="`checkbox${index}`"
-          v-model="checkboxGroupSelectOption"
-          :checkbox-value="value"
-          :checkbox-label="label"
-          group-name="cp-checkbox"
-          :is-disabled="disabled"
-        />
-      </div>
-    </div>
-    <div class="item">
-      <h3>Simple checkbox</h3>
-      <span>Selected value: {{ simpleCheckbox }}</span>
-      <div class="sectionToggles__toggle">
-        <cp-checkbox v-model="simpleCheckbox" checkbox-label="label" group-name="simple-checkbox" />
-      </div>
-      <div class="sectionToggles__toggle">
-        <cp-checkbox
-          v-model="simpleCheckbox"
-          checkbox-label="Purple reversed label checkbox"
-          group-name="simple-checkbox"
-          :color="Colors.PURPLE"
-          reverse-label
-        />
-      </div>
-      <div class="sectionToggles__toggle">
-        <cp-checkbox
-          v-model="simpleCheckbox"
-          checkbox-label="label checkbox with helper"
-          group-name="simple-checkbox"
-          helper="Helper text"
-          :color="Colors.PURPLE"
-        />
-      </div>
-      <div class="sectionToggles__toggle">
-        <cp-checkbox v-model="simpleCheckbox" group-name="simple-checkbox" :color="Colors.PURPLE">
-          <span class="sectionToggles__customLabel"><b>Custom</b> label here </span>
-        </cp-checkbox>
-      </div>
-    </div>
-    <div class="item">
-      <h3>Radio</h3>
-      <span>Selected value: {{ radioGroupSelectedOption }}</span>
-      <div class="sectionToggles__toggle">
-        <cp-radio v-model="radioGroupSelectedOption" :options="radioGroup" group-name="cp-radio" color="purple" />
-      </div>
-    </div>
-  </section-container>
-</template>
-
-<script>
-import SectionContainer from '@/components/core/playground-sections/SectionContainer.vue'
-
-import { Colors } from '@/constants'
-
-export default {
-  components: {
-    SectionContainer,
-  },
-  data() {
-    return {
-      Colors,
-      cpSwitchState: true,
-      radioGroup: [
-        {
-          value: 'basketball',
-          label: 'Basketball',
-          description: 'default',
-          additionalData: 'default color',
-        },
-        {
-          value: 'football',
-          label: 'Football',
-          additionalData: 'disabled',
-          disabled: true,
-        },
-        {
-          value: 'handball',
-          label: 'Handball',
-          additionalData: 'More data',
-        },
-      ],
-      checkboxGroup: [
-        {
-          value: 'ski',
-          label: 'Ski',
-        },
-        {
-          value: 'snowboard',
-          label: 'Snowboard',
-          disabled: true,
-        },
-        {
-          value: 'wakeboard',
-          label: 'Wake board',
-        },
-      ],
-      radioGroupSelectedOption: 'football',
-      checkboxGroupSelectOption: ['snowboard'],
-      simpleCheckbox: true,
-    }
-  },
-  methods: {
-    isRadioSelected(radioValue) {
-      return radioValue === this.radioGroupSelectedOption
-    },
-  },
-}
-</script>
-
-<style lang="scss">
-.sectionToggles {
-  &__switch {
-    &:not(:last-child) {
-      margin-bottom: sp.$space;
-    }
-
-    &--isSmall {
-      font-size: fn.px-to-em(12);
-    }
-  }
-
-  &__customLabel {
-    font-size: fn.px-to-em(14);
-    line-height: fn.px-to-rem(24);
-  }
-}
-</style>

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

@@ -1,40 +0,0 @@
-<template>
-  <section-container section-title="Typography" class="sectionTypography">
-    <div class="item sectionTypography__headings">
-      <cp-heading :size="800">Headings</cp-heading>
-      <cp-heading
-        v-for="(heading, index) in headings"
-        :key="index"
-        :size="heading"
-        heading-level="h3"
-        class="sectionTypography__heading"
-      >
-        {{ heading }}: The quick brown fox jumps over the lazy dog
-      </cp-heading>
-    </div>
-  </section-container>
-</template>
-
-<script>
-import SectionContainer from '@/components/core/playground-sections/SectionContainer.vue'
-
-export default {
-  components: {
-    SectionContainer,
-  },
-  data() {
-    return {
-      headings: [100, 200, 300, 400, 500, 600, 700, 800, 900],
-    }
-  },
-}
-</script>
-
-<style lang="scss">
-.sectionTypography {
-  &__heading {
-    align-self: flex-start;
-    text-align: left;
-  }
-}
-</style>