@carbon/vue 2.45.0 → 3.0.4-alpha.0

package/src/components/CvLoading/CvLoading.stories.js

@@ -0,0 +1,78 @@
+import CvLoading from '.';
+
+import { ref, computed } from 'vue';
+import { action } from '@storybook/addon-actions';
+import {
+  sbCompPrefix,
+  storyParametersObject,
+} from '../../global/storybook-utils';
+import './CvLoading.stories.scss';
+
+export default {
+  title: `${sbCompPrefix}/CvLoading`,
+  component: CvLoading,
+  argTypes: {
+    'loading-end': {
+      control: { type: 'none' },
+      description:
+        'Raised after the exit animation has concluded, when loading or end are used to deactivate the loader. This is to allow parents to discard the component if needed.',
+    },
+    active: {
+      control: { type: 'none' },
+    },
+  },
+};
+
+const template = `<div>
+<div class="loading-story">
+<cv-loading @loading-end="onLoadingEnd" v-bind="args" :active="isActive"/>
+</divclass>
+<button @click="makeActive" :disabled="isActive" style="margin-top: 2rem;">{{buttonLabel}}</button>
+</div>`;
+let hidden = ref(true);
+let isActive = ref(false);
+let countDown = ref(0);
+const buttonLabel = computed(() => {
+  if (isActive.value) {
+    return `Active: ${countDown.value}s`;
+  } else {
+    return 'Make active';
+  }
+});
+function runCountDown() {
+  setTimeout(() => {
+    countDown.value--;
+    if (countDown.value <= 0) {
+      isActive.value = false;
+    } else {
+      runCountDown();
+    }
+  }, 1000);
+}
+function makeActive() {
+  hidden.value = false;
+  isActive.value = true;
+  countDown.value = 5;
+  runCountDown();
+}
+
+const Template = args => ({
+  components: { CvLoading },
+  setup: () => ({
+    args,
+    onLoadingEnd: action('loading-end'),
+    isActive,
+    makeActive,
+    countDown,
+    buttonLabel,
+  }),
+  template,
+});
+
+export const Default = Template.bind({});
+Default.args = {};
+Default.parameters = storyParametersObject(
+  Default.parameters,
+  template,
+  Default.args
+);

package/src/components/CvLoading/CvLoading.stories.scss

@@ -0,0 +1,4 @@
+.loading-story {
+  max-width: 7rem;
+  max-height: 7rem;
+}

package/src/components/CvLoading/CvLoading.vue

@@ -0,0 +1,106 @@
+<template>
+  <cv-wrapper
+    :tag-type="overlay ? 'div' : ''"
+    class="cv-loading"
+    :class="overlayClasses"
+  >
+    <div
+      v-bind="$attrs"
+      data-loading
+      :class="{
+        'cv-loading': !overlay,
+        [`${carbonPrefix}--loading`]: active || stopping,
+        [`${carbonPrefix}--loading--stop`]: (!active && stopping) || stopped,
+        [`${carbonPrefix}--loading--small`]: small,
+      }"
+      ref="loading"
+      aria-atomic="true"
+      :aria-labelledby="cvId"
+      aria-live="assertive"
+      role="progressbar"
+      :aria-busy="active || stopping"
+    >
+      <label :id="cvId" :class="`${carbonPrefix}--visually-hidden`">
+        {{ description }}
+      </label>
+      <svg :class="`${carbonPrefix}--loading__svg`" viewBox="0 0 100 100">
+        <title>{{ description }}</title>
+        <circle
+          v-if="small"
+          :class="`${carbonPrefix}--loading__background`"
+          cx="50%"
+          cy="50%"
+          :r="loadingRadius"
+        />
+        <circle
+          :class="`${carbonPrefix}--loading__stroke`"
+          cx="50%"
+          cy="50%"
+          :r="loadingRadius"
+        />
+      </svg>
+    </div>
+  </cv-wrapper>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue';
+import CvWrapper from '../CvWrapper/CvWrapper';
+import { carbonPrefix } from '../../global/settings';
+import { useCvId, props as propsCvId } from '../../use/cvId';
+
+const props = defineProps({
+  active: { type: Boolean, default: true },
+  description: { type: String, default: 'Loading' },
+  overlay: { type: Boolean },
+  small: { type: Boolean },
+  ...propsCvId,
+});
+const cvId = useCvId(props);
+
+let stopping = ref(false);
+let stopped = ref(false);
+const overlayClasses = computed(() => {
+  const classes = [];
+  if (props.overlay) {
+    if (props.active || stopping.value) {
+      classes.push(`${carbonPrefix}--loading-overlay`);
+    } else {
+      classes.push(`${carbonPrefix}--loading-overlay--stop`);
+    }
+  }
+
+  return classes;
+});
+
+const loadingRadius = computed(() => {
+  return props.small ? '42' : '44';
+});
+
+// Maintain the active state
+const loading = ref(null);
+const emit = defineEmits(['loading-end']);
+function onEnd(ev) {
+  if (ev.animationName === 'rotate-end-p2') {
+    loading.value.removeEventListener('animationend', onEnd);
+
+    stopping.value = false;
+    stopped.value = true;
+
+    emit('loading-end');
+  }
+}
+function onActiveUpdate(newValue) {
+  stopped.value = false;
+  stopping.value = !newValue;
+  if (!newValue) {
+    loading.value.addEventListener('animationend', onEnd);
+  }
+}
+watch(
+  () => props.active,
+  val => {
+    onActiveUpdate(val);
+  }
+);
+</script>

package/src/components/CvLoading/index.js

@@ -0,0 +1,4 @@
+import CvLoading from './CvLoading.vue';
+
+export { CvLoading };
+export default CvLoading;

package/src/components/CvNotification/CvInlineNotification.stories.js

@@ -0,0 +1,109 @@
+import { action } from '@storybook/addon-actions';
+import { sbCompPrefix } from '../../global/storybook-utils';
+
+import { CvInlineNotification, CvNotificationConsts } from '.';
+
+export default {
+  title: `${sbCompPrefix}/CvInlineNotification`,
+  component: CvInlineNotification,
+  argTypes: {
+    kind: {
+      control: {
+        type: 'select',
+        options: CvNotificationConsts.notificationKinds,
+      },
+      defaultValue: CvNotificationConsts.notificationKinds[0],
+      table: {
+        defaultValue: {
+          summary: `"${CvNotificationConsts.notificationKinds[0]}"`,
+        },
+      },
+    },
+    title: {
+      control: { type: 'text' },
+      defaultValue: 'Notification title',
+      table: {
+        defaultValue: {
+          summary: `"${CvInlineNotification.props.title.default}"`,
+        },
+      },
+    },
+    subTitle: {
+      control: { type: 'text' },
+      defaultValue: 'Subtitle text goes here.',
+      table: {
+        defaultValue: {
+          summary: `"${CvInlineNotification.props.subTitle.default}"`,
+        },
+      },
+    },
+    actionLabel: {
+      control: { type: 'text' },
+      defaultValue: 'Action',
+      table: {
+        defaultValue: {
+          summary: `"${CvInlineNotification.props.actionLabel.default}"`,
+        },
+      },
+    },
+    closeAriaLabel: {
+      control: { type: 'text' },
+      defaultValue: CvInlineNotification.props.closeAriaLabel.default,
+      table: {
+        defaultValue: {
+          summary: `"${CvInlineNotification.props.closeAriaLabel.default}"`,
+        },
+      },
+    },
+    lowContrast: {
+      control: { type: 'boolean' },
+    },
+  },
+};
+
+const template = `<cv-inline-notification v-bind="args" @action="onAction" @close="onClose" />`;
+const Template = args => {
+  return {
+    components: { CvInlineNotification },
+    template,
+    setup() {
+      return {
+        args,
+        onAction: action('action'),
+        onClose: action('close'),
+      };
+    },
+  };
+};
+
+export const Info = Template.bind({});
+Info.args = {
+  kind: CvNotificationConsts.notificationKinds[0],
+};
+
+export const InfoSquare = Template.bind({});
+InfoSquare.storyName = 'Info square';
+InfoSquare.args = {
+  kind: CvNotificationConsts.notificationKinds[1],
+};
+
+export const Success = Template.bind({});
+Success.args = {
+  kind: CvNotificationConsts.notificationKinds[2],
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+  kind: CvNotificationConsts.notificationKinds[3],
+};
+
+export const WarningAlt = Template.bind({});
+WarningAlt.storyName = 'Warning (alt)';
+WarningAlt.args = {
+  kind: CvNotificationConsts.notificationKinds[4],
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  kind: CvNotificationConsts.notificationKinds[5],
+};

package/src/components/CvNotification/CvInlineNotification.vue

@@ -0,0 +1,102 @@
+<template>
+  <div
+    role="alert"
+    :kind="kind"
+    :class="[
+      `${carbonPrefix}--inline-notification`,
+      `${carbonPrefix}--inline-notification--${kind}`,
+      { [`${carbonPrefix}--inline-notification--low-contrast`]: lowContrast },
+    ]"
+  >
+    <div :class="`${carbonPrefix}--inline-notification__details`">
+      <component
+        :is="icon"
+        :class="`${carbonPrefix}--inline-notification__icon`"
+      />
+      <div :class="`${carbonPrefix}--inline-notification__text-wrapper`">
+        <p :class="`${carbonPrefix}--inline-notification__title`">
+          {{ title }}
+        </p>
+        <div :class="`${carbonPrefix}--inline-notification__subtitle`">
+          {{ subTitle }}
+        </div>
+      </div>
+    </div>
+    <button
+      v-if="actionLabel.length > 0"
+      :class="[
+        `${carbonPrefix}--inline-notification__action-button`,
+        `${carbonPrefix}--btn`,
+        `${carbonPrefix}--btn--sm`,
+        `${carbonPrefix}--btn--ghost`,
+      ]"
+      @click="$emit('action')"
+    >
+      {{ actionLabel }}
+    </button>
+    <button
+      type="button"
+      :aria-label="closeAriaLabel"
+      :class="`${carbonPrefix}--inline-notification__close-button`"
+      @click="$emit('close')"
+    >
+      <close20 :class="`${carbonPrefix}--inline-notification__close-icon`" />
+    </button>
+  </div>
+</template>
+
+<script>
+import { computed } from 'vue';
+import { Close20 } from '@carbon/icons-vue';
+import { carbonPrefix } from '../../global/settings';
+import { notificationKinds, notificationIcons } from './consts';
+
+export default {
+  name: 'CvInlineNotification',
+  components: { Close20 },
+  props: {
+    /** Type of status */
+    kind: {
+      type: String,
+      default: notificationKinds[0],
+      validator: value => notificationKinds.includes(value),
+    },
+    /** Notification title */
+    title: {
+      type: String,
+      default: '',
+    },
+    /** Notification sub title (supports HTML) */
+    subTitle: {
+      type: String,
+      default: '',
+    },
+    /** Optional action button label - if empty no action button is displayed! */
+    actionLabel: {
+      type: String,
+      default: '',
+    },
+    /** Close button A11y label */
+    closeAriaLabel: {
+      type: String,
+      default: 'Close notification',
+    },
+    /** Use lower contrast version of the notification */
+    lowContrast: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: [
+    /** Emitted on clicking the action button */
+    'action',
+    /** Emitted on clicking the close button */
+    'close',
+  ],
+  setup(props) {
+    const icon = computed(() => notificationIcons[props.kind]);
+
+    return { carbonPrefix, icon };
+  },
+};
+</script>

package/src/components/CvNotification/CvToastNotification.stories.js

@@ -0,0 +1,108 @@
+import { action } from '@storybook/addon-actions';
+import { sbCompPrefix } from '../../global/storybook-utils';
+
+import { CvToastNotification, CvNotificationConsts } from '.';
+
+export default {
+  title: `${sbCompPrefix}/CvToastNotification`,
+  component: CvToastNotification,
+  argTypes: {
+    kind: {
+      control: {
+        type: 'select',
+        options: CvNotificationConsts.notificationKinds,
+      },
+      defaultValue: CvNotificationConsts.notificationKinds[0],
+      table: {
+        defaultValue: {
+          summary: `"${CvNotificationConsts.notificationKinds[0]}"`,
+        },
+      },
+    },
+    title: {
+      control: { type: 'text' },
+      defaultValue: 'Notification title',
+      table: {
+        defaultValue: {
+          summary: `"${CvToastNotification.props.title.default}"`,
+        },
+      },
+    },
+    subTitle: {
+      control: { type: 'text' },
+      defaultValue: 'Subtitle text goes here.',
+      table: {
+        defaultValue: {
+          summary: `"${CvToastNotification.props.subTitle.default}"`,
+        },
+      },
+    },
+    caption: {
+      control: { type: 'text' },
+      defaultValue: '00:00:00 AM',
+      table: {
+        defaultValue: {
+          summary: `"${CvToastNotification.props.caption.default}"`,
+        },
+      },
+    },
+    closeAriaLabel: {
+      control: { type: 'text' },
+      defaultValue: CvToastNotification.props.closeAriaLabel.default,
+      table: {
+        defaultValue: {
+          summary: `"${CvToastNotification.props.closeAriaLabel.default}"`,
+        },
+      },
+    },
+    lowContrast: {
+      control: { type: 'boolean' },
+    },
+  },
+};
+
+const template = `<cv-toast-notification v-bind="args" @close="onClose" />`;
+const Template = args => {
+  return {
+    components: { CvToastNotification },
+    template,
+    setup() {
+      return {
+        args,
+        onClose: action('close'),
+      };
+    },
+  };
+};
+
+export const Info = Template.bind({});
+Info.args = {
+  kind: CvNotificationConsts.notificationKinds[0],
+};
+
+export const InfoSquare = Template.bind({});
+InfoSquare.storyName = 'Info square';
+InfoSquare.args = {
+  kind: CvNotificationConsts.notificationKinds[1],
+};
+
+export const Success = Template.bind({});
+Success.args = {
+  kind: CvNotificationConsts.notificationKinds[2],
+};
+
+export const Warning = Template.bind({});
+Warning.args = {
+  kind: CvNotificationConsts.notificationKinds[3],
+};
+
+export const WarningAlt = Template.bind({});
+WarningAlt.storyName = 'Warning (alt)';
+WarningAlt.args = {
+  kind: CvNotificationConsts.notificationKinds[4],
+};
+
+export const Error = Template.bind({});
+Error.args = {
+  kind: CvNotificationConsts.notificationKinds[5],
+};

package/src/components/CvNotification/CvToastNotification.vue

@@ -0,0 +1,88 @@
+<template>
+  <div
+    role="alert"
+    :kind="kind"
+    :class="[
+      `${carbonPrefix}--toast-notification`,
+      `${carbonPrefix}--toast-notification--${kind}`,
+      { [`${carbonPrefix}--toast-notification--low-contrast`]: lowContrast },
+    ]"
+  >
+    <component
+      :is="icon"
+      :class="`${carbonPrefix}--toast-notification__icon`"
+    />
+    <div :class="`${carbonPrefix}--toast-notification__details`">
+      <h3 :class="`${carbonPrefix}--toast-notification__title`">{{ title }}</h3>
+      <div :class="`${carbonPrefix}--toast-notification__subtitle`">
+        {{ subTitle }}
+      </div>
+      <div :class="`${carbonPrefix}--toast-notification__caption`">
+        {{ caption }}
+      </div>
+      <slot />
+    </div>
+    <button
+      type="button"
+      :aria-label="closeAriaLabel"
+      :class="`${carbonPrefix}--toast-notification__close-button`"
+      @click="$emit('close')"
+    >
+      <close20 :class="`${carbonPrefix}--inline-notification__close-icon`" />
+    </button>
+  </div>
+</template>
+
+<script>
+import { computed } from 'vue';
+import { Close20 } from '@carbon/icons-vue';
+import { carbonPrefix } from '../../global/settings';
+import { notificationKinds, notificationIcons } from './consts';
+
+export default {
+  name: 'CvToastNotification',
+  components: { Close20 },
+  props: {
+    /** Type of status */
+    kind: {
+      type: String,
+      default: notificationKinds[0],
+      validator: value => notificationKinds.includes(value),
+    },
+    /** Notification title */
+    title: {
+      type: String,
+      default: '',
+    },
+    /** Notification sub title (supports HTML) */
+    subTitle: {
+      type: String,
+      default: '',
+    },
+    /** Notification caption (supports HTML) */
+    caption: {
+      type: String,
+      default: '',
+    },
+    /** Close button A11y label */
+    closeAriaLabel: {
+      type: String,
+      default: 'Close notification',
+    },
+    /** Use lower contrast version of the notification */
+    lowContrast: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  emits: [
+    /** Emitted on clicking the close button */
+    'close',
+  ],
+  setup(props) {
+    const icon = computed(() => notificationIcons[props.kind]);
+
+    return { carbonPrefix, icon };
+  },
+};
+</script>

package/src/components/CvNotification/consts.js

@@ -0,0 +1,31 @@
+import {
+  ErrorFilled20,
+  CheckmarkFilled20,
+  WarningFilled20,
+  WarningAltFilled20,
+  InformationFilled20,
+  InformationSquareFilled20,
+} from '@carbon/icons-vue';
+
+export const notificationKinds = [
+  'info',
+  'info-square',
+  'success',
+  'warning',
+  'warning-alt',
+  'error',
+];
+
+export const notificationIcons = {
+  info: InformationFilled20,
+  'info-square': InformationSquareFilled20,
+  success: CheckmarkFilled20,
+  warning: WarningFilled20,
+  'warning-alt': WarningAltFilled20,
+  error: ErrorFilled20,
+};
+
+export default {
+  notificationKinds,
+  notificationIcons,
+};

package/src/components/CvNotification/index.js

@@ -0,0 +1,5 @@
+import CvInlineNotification from './CvInlineNotification';
+import CvToastNotification from './CvToastNotification';
+import CvNotificationConsts from './consts';
+export { CvInlineNotification, CvToastNotification, CvNotificationConsts };
+export default CvInlineNotification;