@propelinc/citrus-ui 0.6.0 → 1.0.0

package/dist/demo.html

@@ -1,10 +0,0 @@
-<meta charset="utf-8">
-<title>citrus-ui demo</title>
-<script src="./citrus-ui.umd.js"></script>
-
-<link rel="stylesheet" href="./citrus-ui.css">
-
-
-<script>
-console.log(citrus-ui)
-</script>

package/jest.config.js

@@ -1,9 +0,0 @@
-module.exports = {
-  preset: '@vue/cli-plugin-unit-jest/presets/typescript-and-babel',
-  setupFilesAfterEnv: ['<rootDir>/tests/unit/helpers/custom-matchers.ts'],
-
-  transformIgnorePatterns: ['<rootDir>/node_modules/(?!vuetify/lib)'],
-  moduleNameMapper: {
-    '^.+\\.(css|styl|less|sass|scss|png|jpg|ttf|woff|woff2)$': 'jest-transform-stub',
-  },
-};

package/plopfile.js

@@ -1,67 +0,0 @@
-function createComponentPath(path, name) {
-  if (path === '/' || path === '') {
-    return `${name}`;
-  }
-
-  const normalizedPath = path.toLowerCase().trim();
-  if (!normalizedPath.endsWith('/')) {
-    return `${normalizedPath}/${name}`;
-  } else {
-    return `${normalizedPath}${name}`;
-  }
-}
-
-module.exports = function (plop) {
-  plop.setHelper('createComponentPath', createComponentPath);
-
-  plop.setGenerator('component', {
-    description: 'Add a component in the @/component folder',
-    prompts: [
-      {
-        type: 'input',
-        name: 'name',
-        message: 'Component name (e.g. PullToRefresh):',
-      },
-      {
-        type: 'input',
-        name: 'path',
-        message: 'Path (relative to @/components):',
-        default: '/',
-      },
-      {
-        type: 'confirm',
-        name: 'createStory',
-        message: 'Document in Storybook?:',
-        default: true,
-      },
-    ],
-    actions: function ({ path, name, createStory }) {
-      const componentPath = createComponentPath(path, name);
-      const componentImportPath = `@/components/${componentPath}.vue`;
-      return [
-        {
-          type: 'add',
-          path: `src/components/${componentPath}.vue`,
-          templateFile: 'templates/component.vue.hbs',
-          skipIfExists: true,
-        },
-        {
-          type: 'add',
-          path: `tests/unit/components/${componentPath}.spec.ts`,
-          templateFile: 'templates/spec.ts.hbs',
-          skipIfExists: true,
-          data: { componentImportPath },
-        },
-        createStory
-          ? {
-              type: 'add',
-              path: `stories/components/${componentPath}.stories.mdx`,
-              templateFile: 'templates/stories.mdx.hbs',
-              skipIfExists: true,
-              data: { componentImportPath },
-            }
-          : null,
-      ].filter(Boolean);
-    },
-  });
-};

package/project.json

@@ -1,69 +0,0 @@
-{
-  "root": "libs/citrus-ui",
-  "sourceRoot": "libs/citrus-ui/src",
-  "projectType": "library",
-  "targets": {
-    "lint": {
-      "executor": "@nrwl/workspace:run-commands",
-      "options": {
-        "commands": [
-          "vue-cli-service lint --no-fix --max-warnings=0",
-          "stylelint \"src/**/*.(vue|scss)\"",
-          "prettier . --ignore-unknown --check --ignore-path='../../.prettierignore'"
-        ],
-        "cwd": "libs/citrus-ui"
-      }
-    },
-    "test:unit": {
-      "executor": "@nrwl/workspace:run-commands",
-      "options": {
-        "command": "vue-cli-service test:unit",
-        "cwd": "libs/citrus-ui"
-      }
-    },
-    "build": {
-      "executor": "@nrwl/workspace:run-commands",
-      "options": {
-        "commands": [
-          "vue-cli-service build --target lib ./src/index.ts",
-          "tsc --project tsconfig.dist.json --declaration --emitDeclarationOnly",
-          "tsc-alias -p tsconfig.dist.json"
-        ],
-        "cwd": "libs/citrus-ui",
-        "parallel": false
-      }
-    },
-    "publish": {
-      "executor": "@nrwl/workspace:run-commands",
-      "options": {
-        "command": "pnpm publish",
-        "cwd": "libs/citrus-ui"
-      },
-      "dependsOn": [{ "target": "build", "projects": "self" }]
-    },
-    "storybook:serve": {
-      "executor": "@nrwl/workspace:run-commands",
-      "options": {
-        "command": "vue-cli-service storybook:serve -p 6006 -c .storybook",
-        "cwd": "libs/citrus-ui"
-      }
-    },
-    "storybook:build": {
-      "executor": "@nrwl/workspace:run-commands",
-      "options": {
-        "command": "vue-cli-service storybook:build -c .storybook",
-        "cwd": "libs/citrus-ui",
-        "outputPath": ["storybook-static"]
-      }
-    },
-    "storybook:publish": {
-      "executor": "@nrwl/workspace:run-commands",
-      "TODO(mohan)": "Remove --dry-run when we're ready to start developing here.",
-      "options": {
-        "command": "storybook-to-aws-s3 --existing-output-dir=\"storybook-static\" --bucket-path=citrus-ui-storybook --aws-profile=NONE --dry-run",
-        "cwd": "libs/citrus-ui"
-      },
-      "dependsOn": [{ "target": "storybook:build", "projects": "self" }]
-    }
-  }
-}

package/src/components/CAlert.vue

@@ -1,78 +0,0 @@
-<template>
-  <v-snackbar
-    data-test="alert"
-    class="c-alert"
-    top
-    :color="color"
-    :timeout="timeout"
-    :value="value"
-    @input="(value) => $emit('input', value)"
-  >
-    <div data-test="alert-message">
-      <slot>
-        {{ message }}
-      </slot>
-    </div>
-
-    <c-icon-button
-      v-if="!shouldAutoDismiss"
-      data-test="alert-dismiss"
-      class="c-alert__dismiss"
-      light
-      :icon="faTimes"
-      @click="$emit('input', false)"
-    />
-  </v-snackbar>
-</template>
-
-<script lang="ts">
-import { faTimes } from '@fortawesome/pro-light-svg-icons';
-import { Component, Vue, Prop } from 'vue-property-decorator';
-
-import CIconButton from '@/components/CIconButton.vue';
-
-@Component({ name: 'CAlert', components: { CIconButton } })
-export default class CAlert extends Vue {
-  faTimes = faTimes;
-
-  /** Controls whether the alert is shown */
-  @Prop({ type: Boolean, default: false }) value!: boolean;
-  @Prop(String) message?: string;
-  /** Renders the error state */
-  @Prop({ type: Boolean, default: false }) error!: boolean;
-  /** Renders the success state */
-  @Prop({ type: Boolean, default: false }) success!: boolean;
-  /** Controls (overrides) whether the alert is dismissible. */
-  @Prop({ type: Boolean, default: undefined }) dismissible?: boolean;
-
-  get shouldAutoDismiss(): boolean {
-    if (this.dismissible !== undefined) {
-      return !this.dismissible;
-    }
-    return !this.error;
-  }
-
-  get timeout(): number {
-    // A 0 timeout in Vuetify World means the component never dismisses itself.
-    return this.shouldAutoDismiss ? 5000 : 0;
-  }
-
-  get color(): string | undefined {
-    if (this.error) {
-      return 'alert-red';
-    } else if (this.success) {
-      return 'accent-green-shade-1';
-    }
-
-    return undefined;
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.c-alert__dismiss {
-  height: 36px;
-  margin: -4px -8px -4px 0 !important;
-  width: 36px;
-}
-</style>

package/src/components/CBanner.vue

@@ -1,47 +0,0 @@
-<template>
-  <div data-test="banner" class="banner" :class="{ [color]: true }">
-    <font-awesome-icon v-if="icon" class="banner__icon" :icon="icon" />
-    <p data-test="banner-message" class="banner__message">
-      {{ message }}
-    </p>
-  </div>
-</template>
-
-<script lang="ts">
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { Component, Vue, Prop } from 'vue-property-decorator';
-
-type Type = 'error' | 'info';
-
-@Component({ name: 'CBanner', components: { FontAwesomeIcon } })
-export default class CBanner extends Vue {
-  @Prop(String) icon?: string;
-  @Prop({ type: String, required: true }) message!: string;
-  @Prop({ type: String, default: 'info' }) type!: Type;
-
-  get color(): string {
-    if (this.type === 'error') {
-      return 'peach';
-    }
-
-    return 'providers-blue';
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-.banner {
-  align-items: flex-start;
-  display: flex;
-  padding: 12px 16px;
-}
-
-.banner__icon {
-  margin-right: 12px;
-}
-
-.banner__message {
-  flex: auto;
-  margin: 0;
-}
-</style>

package/src/components/CButton.vue

@@ -1,146 +0,0 @@
-<template>
-  <!-- 
-    HACK(mohan): Using :key="disabled" here forces Vue to re-render the whole component. This
-    fixes a Safari bug where the text color wouldn't change when buttons became re-enabled.
-  -->
-  <v-btn
-    :key="disabled"
-    class="button"
-    :class="{
-      'button--primary': !secondary && !tertiary,
-      'button--secondary': secondary,
-      'button--tertiary': tertiary,
-      'button--dark': dark,
-      'button--light': light,
-      'button--disabled': disabled,
-    }"
-    data-test="button"
-    rounded
-    :block="block"
-    :elevation="0"
-    :large="large"
-    :ripple="false"
-    :to="to"
-    :text="tertiary"
-    :disabled="disabled"
-    :href="href"
-    :target="target"
-    v-on="$listeners"
-  >
-    <div v-if="hasIcon" class="button__icon">
-      <slot name="icon">
-        <font-awesome-icon v-if="icon" :icon="icon" />
-      </slot>
-    </div>
-
-    <span class="button__text">
-      <slot />
-    </span>
-  </v-btn>
-</template>
-
-<script lang="ts">
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { Component, Vue, Prop } from 'vue-property-decorator';
-import { RawLocation } from 'vue-router';
-
-@Component({ name: 'CButton', components: { FontAwesomeIcon } })
-export default class CButton extends Vue {
-  /** Controls whether button appears as full-width */
-  @Prop({ type: Boolean, default: false }) block!: boolean;
-  /** Renders navy variant */
-  @Prop({ type: Boolean, default: false }) dark!: boolean;
-  @Prop({ type: Boolean, default: false }) disabled!: boolean;
-  /** Chooses an icon to render on the left side of the button */
-  @Prop([String, Array, Object]) icon?: IconDefinition;
-  @Prop({ type: Boolean, default: false }) large!: boolean;
-  /** Renders white variant */
-  @Prop({ type: Boolean, default: false }) light!: boolean;
-  @Prop({ type: Boolean, default: false }) secondary!: boolean;
-  @Prop({ type: Boolean, default: false }) tertiary!: boolean;
-  @Prop([Object, String]) to?: RawLocation;
-  @Prop(String) href?: string;
-  @Prop(String) target?: string;
-
-  get hasIcon(): boolean {
-    return !!(this.icon || this.$slots.icon || this.$scopedSlots.icon);
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-@import '~@/styles/core.scss';
-
-@mixin button-theme($color, $background-color) {
-  background-color: $background-color !important;
-  color: $color !important;
-}
-
-.button__text {
-  margin-top: 3px;
-}
-
-.button--primary {
-  @include button-theme($color-white, $color-accent-blue);
-}
-
-.button--primary.button--dark {
-  @include button-theme($color-white, $color-navy);
-}
-
-.button--primary.button--light {
-  @include button-theme($color-navy, $color-white);
-}
-
-.button--secondary {
-  @include button-theme($color-accent-blue, $color-white);
-
-  border: $border !important;
-}
-
-.button--secondary.button--dark {
-  @include button-theme($color-navy, $color-white);
-}
-
-.button--secondary.button--light {
-  @include button-theme($color-white, $color-navy);
-}
-
-.button--tertiary {
-  @include button-theme($color-accent-blue, transparent);
-}
-
-.button--tertiary.button--dark {
-  @include button-theme($color-navy, transparent);
-}
-
-.button--tertiary.button--light {
-  @include button-theme($color-white, transparent);
-}
-
-// Add some insane specificity to override Vuetify.
-.button--disabled.theme--light.v-btn.v-btn--disabled:not(.v-btn--outlined) {
-  &.button--primary {
-    @include button-theme($color-navy-tint-1, $color-navy-tint-4);
-  }
-
-  &.button--secondary {
-    @include button-theme($color-navy-tint-2, $color-white);
-  }
-
-  &.button--tertiary {
-    @include button-theme($color-navy-tint-2, transparent);
-  }
-}
-
-.button__icon {
-  font-size: $font-size-x-large;
-  height: 24px;
-  left: -8px;
-  position: absolute;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 24px;
-}
-</style>

package/src/components/CListItemAction.vue

@@ -1,29 +0,0 @@
-<template>
-  <v-list-item-action class="c-list-item__action" data-test="list-item-action">
-    <slot>
-      <font-awesome-icon data-test="list-item-action-icon" fixed-width :icon="icon" />
-    </slot>
-  </v-list-item-action>
-</template>
-
-<script lang="ts">
-import { IconDefinition } from '@fortawesome/fontawesome-svg-core';
-import { faChevronRight } from '@fortawesome/pro-light-svg-icons';
-import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { Component, Vue, Prop } from 'vue-property-decorator';
-
-@Component({ name: 'CListItemAction', components: { FontAwesomeIcon } })
-export default class CListItemAction extends Vue {
-  @Prop({ type: [String, Array, Object], default: () => faChevronRight }) icon!: IconDefinition;
-}
-</script>
-
-<style lang="scss" scoped>
-@import '~@/styles/core.scss';
-
-.c-list-item__action {
-  align-self: flex-start;
-  color: $color-accent-blue;
-  font-size: $font-size-icon-medium;
-}
-</style>

package/src/components/CSegmentedButton.vue

@@ -1,47 +0,0 @@
-<template>
-  <v-btn-toggle
-    data-test="segmented-button"
-    :value="value"
-    rounded
-    class="segmented-button"
-    active-class="segmented-button__option--active"
-    @change="(value) => $emit('change', value)"
-  >
-    <slot>
-      <c-segmented-button-option
-        v-for="option in options"
-        :key="option.label"
-        :value="option.value"
-        :label="option.label"
-      />
-    </slot>
-  </v-btn-toggle>
-</template>
-
-<script lang="ts">
-import { Component, Vue, Prop } from 'vue-property-decorator';
-
-import CSegmentedButtonOption from '@/components/CSegmentedButtonOption.vue';
-
-interface SegmentedButtonOption {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  value: any;
-  label: string;
-}
-
-@Component({ name: 'CSegmentedButton', components: { CSegmentedButtonOption } })
-export default class CSegmentedButton extends Vue {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  @Prop() value?: any;
-  /** An array of options like `{ value: true, label: 'Yes' }` */
-  @Prop({ type: Array, required: true }) options!: SegmentedButtonOption[];
-}
-</script>
-
-<style lang="scss" scoped>
-@import '~@/styles/core.scss';
-
-.segmented-button {
-  width: 100%;
-}
-</style>

package/src/components/CSegmentedButtonOption.vue

@@ -1,42 +0,0 @@
-<template>
-  <v-btn
-    class="segmented-button__option"
-    data-test="segmented-button-option"
-    :ripple="false"
-    :value="value"
-  >
-    <slot>
-      {{ label }}
-    </slot>
-  </v-btn>
-</template>
-
-<script lang="ts">
-import { Component, Vue, Prop } from 'vue-property-decorator';
-
-@Component({ name: 'CSegmentedButtonOption' })
-export default class CSegmentedButtonOption extends Vue {
-  // eslint-disable-next-line @typescript-eslint/no-explicit-any
-  @Prop({ required: true }) value?: any;
-  @Prop(String) label?: string;
-}
-</script>
-
-<style lang="scss" scoped>
-@import '~@/styles/core.scss';
-
-.segmented-button__option {
-  border: $border !important;
-  color: $color-navy;
-  flex: 1 1 0;
-
-  &::before {
-    color: $color-providers-blue;
-  }
-}
-
-// This class is applied by the CSegmentedButton component.
-.segmented-button__option--active {
-  background-color: $color-providers-blue !important;
-}
-</style>

package/src/components/helpers/FormField.vue

@@ -1,48 +0,0 @@
-<template>
-  <div class="form-field" :data-test="dataTest">
-    <label
-      v-if="!hideLabel"
-      :for="fieldId"
-      :data-test="`${dataTest}-label`"
-      class="form-field__label"
-      :class="{ 'form-field__label--disabled': disabled }"
-    >
-      <slot name="label" />
-    </label>
-
-    <slot />
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Vue, Prop } from 'vue-property-decorator';
-
-@Component({ name: 'FormField' })
-export default class FormField extends Vue {
-  @Prop({ type: String, required: true }) fieldId!: string;
-  @Prop({ type: Boolean, default: false }) disabled!: boolean;
-  @Prop({ type: Boolean, default: false }) hideLabel!: boolean;
-  @Prop({ type: String, default: 'form-field' }) dataTest!: string;
-}
-</script>
-
-<style lang="scss" scoped>
-@import '~@/styles/core.scss';
-@import '~@/styles/form-fields.scss';
-
-.form-field {
-  border: none;
-  margin: 0;
-  padding: 0;
-}
-
-.form-field__label {
-  display: inline-block;
-  font-weight: $font-weight-bold;
-  margin: 0 0 4px 2px;
-}
-
-.form-field__label--disabled {
-  color: $color-disabled-text;
-}
-</style>