@carbon/vue 3.0.5-alpha.0 → 3.0.7-alpha.0

package/src/components/CvForm/CvForm.stories.mdx

@@ -0,0 +1,193 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import { action } from '@storybook/addon-actions';
+import { sbCompPrefix } from '../../global/storybook-utils';
+import CvButton from '../CvButton';
+import CvTextInput from '../CvTextInput';
+import CvTextArea from '../CvTextArea';
+import { CvForm, CvFormGroup, CvFormItem } from '.';
+
+<Meta title={`${sbCompPrefix}/CvForm`} component={CvForm} />
+
+export const Template = args => ({
+  components: {
+    CvForm,
+    CvFormGroup,
+    CvFormItem,
+    CvButton,
+    CvTextInput,
+    CvTextArea,
+  },
+  setup: () => {
+    const doSubmit = action('cv-form -submit event');
+    return {
+      args: { ...args, template: undefined },
+      onSubmit(ev) {
+        console.dir([].slice.call(ev.target, [0, ev.target.length]));
+        doSubmit(ev);
+      },
+    }
+  },
+  template: args.template,
+});
+
+export const defaultTemplate = `
+  <cv-form @submit.prevent="onSubmit">
+    <cv-text-input
+      label="Text input label"
+      placeholder="Optional placeholder text"
+      helperText="Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)"
+    />
+    <cv-text-area
+      label="Text area label"
+      placeholder="Optional placeholder text"
+      helperText="Optional helper text here; if message is more than one line text should wrap (~100 character count maximum)"
+    />
+    <cv-button>Submit</cv-button>
+  </cv-form>
+`;
+
+export const formGroupTemplate = `
+  <cv-form-group v-bind="args">
+    <template #label>
+      FormGroup label-legend
+    </template>
+    <template #content>
+      <cv-text-input label="First name" />
+      <cv-text-input label="Last name" />
+    </template>
+  </cv-form-group>
+`;
+
+export const formItemTemplate = `
+  <cv-form-item>
+    <label for="text-input-3" class="bx--label">Text Input label</label>
+    <input id="text-input-3" type="text" class="bx--text-input" placeholder="Optional placeholder text" />
+  </cv-form-item>
+`;
+
+# CvForm
+
+These components are purely wrapper elements for use in creating forms.
+
+## Usage CvForm
+
+CvForm has no properties and a single default slot
+
+<Canvas>
+  <Story
+    name="Default"
+    parameters={{
+      controls: {
+        exclude: ['template']
+      },
+      docs: { source: { code: defaultTemplate } },
+    }}
+    args={{
+      template: defaultTemplate,
+    }}
+    argTypes={{
+      default: {
+        control: 'none',
+        table: {
+          type: { summary: 'text | html | Component' },
+          category: 'slots',
+        }
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+
+## CvFormGroup
+
+Used inside a form to group components such as checkboxes and radio buttons.
+
+<Canvas>
+  <Story
+    name="FormGroup-Default"
+    parameters={{
+      controls: {
+        exclude: ['template', 'default']
+      },
+      docs: { source: { code: formGroupTemplate.replace('v-bind="args"', '') } },
+    }}
+    args={{
+      template: formGroupTemplate,
+    }}
+    argTypes={{
+      content: {
+        control: 'none',
+        table: {
+          type: { summary: 'text | html | Component' },
+          category: 'slots',
+        },
+      },
+      label: {
+        control: 'none',
+        table: {
+          type: { summary: 'text | html | Component' },
+          category: 'slots',
+        },
+        description: 'Legend element content',
+      },
+      invalid: {
+        type: 'boolean',
+        table: {
+          type: { summary: 'boolean' },
+          category: 'props',
+        },
+        description: 'Specify whether the `FormGroup` is invalid',
+      },
+      message: {
+        type: 'string',
+        table: {
+          type: { summary: 'string' },
+          category: 'props',
+        },
+        description: 'Specify a message to be placed at the end of the `FormGroup`',
+      },
+      noMargin: {
+        type: 'boolean',
+        table: {
+          type: { summary: 'boolean' },
+          category: 'props',
+        },
+        description: 'Remove default margins set on `FormGroup`',
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>
+
+## CvFormItem
+
+Used inside a form to provide positional styling.
+
+<Canvas>
+  <Story
+    name="FormItem-Default"
+    parameters={{
+      controls: {
+        exclude: ['template']
+      },
+      docs: { source: { code: formItemTemplate } },
+    }}
+    args={{
+      template: formItemTemplate,
+    }}
+    argTypes={{
+      default: {
+        control: 'none',
+        table: {
+          type: { summary: 'text | html | Component' },
+          category: 'slots',
+        }
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

package/src/components/CvForm/CvForm.vue

@@ -0,0 +1,9 @@
+<template>
+  <form :class="`cv-form ${carbonPrefix}--form`">
+    <slot></slot>
+  </form>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+</script>

package/src/components/CvForm/CvFormGroup.vue

@@ -0,0 +1,27 @@
+<template>
+  <fieldset
+    :class="[
+      `cv-form-group ${carbonPrefix}--fieldset`,
+      { [`${carbonPrefix}--fieldset--no-margin`]: noMargin },
+    ]"
+    :data-invalid="invalid"
+  >
+    <legend :class="`${carbonPrefix}--label`">
+      <slot name="label"></slot>
+    </legend>
+    <slot name="content"></slot>
+    <div v-if="message" :class="`${carbonPrefix}--form__requirements`">
+      {{ message }}
+    </div>
+  </fieldset>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+
+defineProps({
+  invalid: Boolean,
+  message: String,
+  noMargin: Boolean,
+});
+</script>

package/src/components/CvForm/CvFormItem.vue

@@ -0,0 +1,9 @@
+<template>
+  <div :class="`cv-form-item ${carbonPrefix}--form-item`">
+    <slot></slot>
+  </div>
+</template>
+
+<script setup>
+import { carbonPrefix } from '../../global/settings';
+</script>

package/src/components/CvForm/index.js

@@ -0,0 +1,5 @@
+import CvForm from './CvForm';
+import CvFormGroup from './CvFormGroup';
+import CvFormItem from './CvFormItem';
+
+export { CvForm, CvFormGroup, CvFormItem };

package/src/components/CvInlineLoading/CvInlineLoading.stories.mdx

@@ -0,0 +1,87 @@
+import { Canvas, Meta, Story } from '@storybook/addon-docs';
+import CvInlineLoading from './CvInlineLoading.vue';
+import { sbCompPrefix } from '../../global/storybook-utils';
+
+<Meta title={`${sbCompPrefix}/CvInlineLoading`} component={CvInlineLoading} />
+
+export const Template = args => ({
+  // Components used in your story `template` are defined in the `components` object
+  components: {
+    CvInlineLoading,
+  },
+  // The story's `args` need to be mapped into the template through the `setup()` method
+  setup() {
+    return {
+      description: args.description,
+      errorText: args.errorText,
+      endingText: args.endingText,
+      loadingText: args.loadingText,
+      loadedText: args.loadedText,
+      state: args.state,
+    };
+  },
+  template: args.template,
+});
+const defaultTemplate = `
+  <cv-inline-loading
+  :description="description"
+  :ending-text="endingText"
+  :error-text="errorText"
+  :loading-text="loadingText"
+  :loaded-text="loadedText"
+  :state="state" />
+`;
+
+# CvInlineLoading
+
+Migration notes:
+
+- The `active` property is still available but does not actually work. Please use the `state` property instead.
+- The state has two new values to make it easier to transition form `loading` to either `loaded` or `error`.
+  Setting `state` to "ending:loaded" or "ending:error" will first set the `ending` state and then, when
+  the ending animation completes, the `loaded` or `error` state.
+- The states can be imported like `import { STATES } from "@/components/CvInlineLoading";` and used
+  as:
+  - `STATES.LOADING`
+  - `STATES.ENDING`
+  - `STATES.LOADED`
+  - `STATES.ERROR`
+  - `STATES.ENDING_LOADED`
+  - `STATES.ENDING_ERROR`
+
+<Canvas>
+  <Story
+    name="Default"
+    parameters={{
+      controls: {
+        exclude: ['template'],
+      },
+      docs: { source: { code: defaultTemplate } },
+    }}
+    args={{
+      template: defaultTemplate,
+      endingText: 'Jumping to warp 9',
+      description: 'Warp engine status',
+      errorText: 'Warp drive is damaged',
+      loadingText: 'Warp drive coming online...',
+      loadedText: 'Warp drive engaged',
+      state: 'loading',
+    }}
+    argTypes={{
+      state: {
+        control: 'select',
+        default: 'loading',
+        options: [
+          'loading',
+          'ending',
+          'loaded',
+          'error',
+          'ending:loaded',
+          'ending:error',
+        ],
+      },
+    }}
+  >
+    {Template.bind({})}
+  </Story>
+</Canvas>

package/src/components/CvInlineLoading/CvInlineLoading.vue

@@ -0,0 +1,144 @@
+<template>
+  <div
+    data-inline-loading
+    :class="`${carbonPrefix}--inline-loading`"
+    role="alert"
+    aria-live="assertive"
+  >
+    <div
+      :class="[
+        `${carbonPrefix}--inline-loading__animation`,
+        { [`${carbonPrefix}--loading--stop`]: internalState === STATES.ENDING },
+      ]"
+      @animationend="onLoadingEnd"
+    >
+      <div
+        v-show="internalActive"
+        :class="`${carbonPrefix}--loading ${carbonPrefix}--loading--small`"
+      >
+        <cv-loading
+          :class="`${carbonPrefix}--inline-loading__animation`"
+          :description="description"
+          :active="undefined"
+          :small="true"
+        />
+      </div>
+      <checkmark-filled16
+        v-if="internalState === STATES.LOADED"
+        :class="`${carbonPrefix}--inline-loading__checkmark-container`"
+      />
+      <error-filled16
+        v-if="internalState === STATES.ERROR"
+        :class="`${carbonPrefix}--inline-loading--error`"
+      />
+    </div>
+    <p :class="`${carbonPrefix}--inline-loading__text`">{{ stateText }}</p>
+  </div>
+</template>
+
+<script setup>
+import { STATES } from './consts';
+import ErrorFilled16 from '@carbon/icons-vue/lib/error--filled/16';
+import CheckmarkFilled16 from '@carbon/icons-vue/lib/checkmark--filled/16';
+import { carbonPrefix } from '../../global/settings';
+import CvLoading from '../CvLoading/CvLoading.vue';
+import { computed, ref, watch } from 'vue';
+
+const props = defineProps({
+  /**
+   * Deprecated: Please use state property
+   * @deprecated
+   */
+  active: {
+    type: Boolean,
+    default: undefined,
+    deprecated: true,
+    validator: val => {
+      if (val !== undefined && process.env.NODE_ENV === 'development') {
+        console.warn(
+          'CvInlineLoading: active prop deprecated in favour of state prop'
+        );
+      }
+      return true;
+    },
+  },
+  /**
+   * Specify the description for the inline loading text
+   */
+  description: { type: String, default: 'Loading' },
+  /**
+   * Specify the text to show while the loading is ending (state: 'ending')
+   */
+  endingText: { type: String, default: 'Load ending...' },
+  /**
+   * Specify the text to show for the error state (state: 'error')
+   */
+  errorText: { type: String, default: 'Loading data failed.' },
+  /**
+   * Specify the text to show while loading (state: 'loading')
+   */
+  loadingText: { type: String, default: 'Loading data...' },
+  /**
+   * Specify the text to show while loading (state: 'loaded')
+   */
+  loadedText: { type: String, default: 'Data loaded.' },
+  /**
+   * Specify the loading status
+   * @values ['loading','ending','loaded','error']
+   */
+  state: {
+    type: String,
+    default: STATES.LOADING,
+    required: true,
+    validator: val => {
+      if (Object.values(STATES).includes(val)) {
+        return true;
+      } else {
+        console.error(
+          `CvInlineLoading: Valid states are ${Object.values(STATES)}`
+        );
+        return false;
+      }
+    },
+  },
+});
+const internalState = ref(stateFromProps());
+function stateFromProps() {
+  if (props.state.includes(':')) {
+    return props.state.split(':')[0];
+  } else {
+    return props.state;
+  }
+}
+watch(
+  () => props.state,
+  () => {
+    internalState.value = stateFromProps();
+  }
+);
+function onLoadingEnd(ev) {
+  if (ev.animationName === 'rotate-end-p2' && props.state.includes(':')) {
+    internalState.value = props.state.split(':')[1];
+  }
+}
+const internalActive = computed(() => {
+  if (props.active !== undefined) {
+    return props.active;
+  } else {
+    return [STATES.LOADING, STATES.ENDING].includes(internalState.value);
+  }
+});
+
+const stateText = computed(() => {
+  switch (internalState.value) {
+    case STATES.LOADED:
+      return props.loadedText;
+    case STATES.ERROR:
+      return props.errorText;
+    case STATES.ENDING:
+      return props.endingText;
+    default:
+      return props.loadingText;
+  }
+});
+</script>

package/src/components/CvInlineLoading/consts.js

@@ -0,0 +1,9 @@
+const STATES = {
+  LOADED: 'loaded',
+  ERROR: 'error',
+  LOADING: 'loading',
+  ENDING: 'ending',
+  ENDING_LOADED: 'ending:loaded',
+  ENDING_ERROR: 'ending:error',
+};
+export { STATES };

package/src/components/CvInlineLoading/index.js

@@ -0,0 +1,4 @@
+import CvInlineLoading from './CvInlineLoading.vue';
+import { STATES } from './consts';
+
+export { CvInlineLoading, STATES };