Merge pull request #27 from qikify/component/choice

Component/choice

src/classes/Choice.json

@@ -0,0 +1 @@
+{"Choice":"Polaris-Choice","labelHidden":"Polaris-Choice--labelHidden","Label":"Polaris-Choice__Label","Control":"Polaris-Choice__Control","disabled":"Polaris-Choice--disabled","Descriptions":"Polaris-Choice__Descriptions","HelpText":"Polaris-Choice__HelpText"}

src/components/Choice/Choice.vue

@@ -0,0 +1,89 @@
+<template lang="pug">
+div
+  label(:class="wrapperClassName", :for="id")
+    span(:class="controlClass")
+      slot
+    span(:class="labelClass")
+      slot(name="label")
+  div(
+    v-if="error || $slots.helpText",
+    :class="descriptionMarkupClass",
+  )
+    div(
+      v-if="$slots.helpText",
+      :id="helpTextID",
+      :class="helpTextClass",
+    )
+      slot(name="helpText")
+    InlineError(
+      v-if="(error && typeof error !== 'boolean')",
+      :fieldID="id",
+      :message="error",
+    )
+</template>
+
+<script lang="ts">
+import Vue from 'vue';
+import { Component, Prop } from 'vue-property-decorator';
+import { classNames } from 'polaris-react/src/utilities/css';
+import type { Error } from 'types/type';
+import styles from '@/classes/Choice.json';
+import { InlineError } from '../InlineError';
+
+export const helpTextID = (id: string): string => `${id}HelpText`;
+
+@Component({
+  components: {
+    InlineError,
+  },
+})
+export default class Choice extends Vue {
+  /**
+   * A unique identifier for the choice
+   */
+  @Prop({ type: String, required: true })
+  public id!: string;
+
+  /**
+   * Whether the associated form control is disabled
+   */
+  @Prop({ type: Boolean })
+  public disabled!: boolean;
+
+  /**
+   * Display an error message
+   */
+  @Prop({ type: [String, Array, Object, Function, Boolean] })
+  public error!: Error | boolean;
+
+  /**
+   * Visually hide the label
+   */
+  @Prop({ type: Boolean })
+  public labelHidden!: boolean;
+
+  public controlClass: string = styles.Control;
+
+  public labelClass: string = styles.Label;
+
+  public descriptionMarkupClass: string = styles.Descriptions;
+
+  public helpTextClass: string = styles.HelpText;
+
+  get wrapperClassName(): string {
+    return classNames(
+      styles.Choice,
+      this.labelHidden && styles.labelHidden,
+      this.disabled && styles.disabled,
+    );
+  }
+
+  get helpTextID(): string {
+    return helpTextID(this.id);
+  }
+}
+</script>
+
+<style lang="scss">
+@import 'polaris-react/src/components/Choice/Choice.scss';
+</style>

src/components/Choice/index.ts

@@ -0,0 +1 @@
+export { default as Choice } from './Choice.vue';

src/components/index.ts

@@ -4,3 +4,4 @@ export * from './UnstyledLink';
 export * from './Icon';
 export * from './VisuallyHidden';
 export * from './InlineError';
+export * from './Choice';