Merge pull request #208 from vuejs-jp/feature/status-card

StatusCard (old: AlertCard)

Author: jiyuujin

packages/ui/components/common/StatusCard.stories.ts

@@ -0,0 +1,35 @@
+import { StoryFn } from '@storybook/vue3'
+import StatusCard from './StatusCard.vue'
+
+export default {
+  title: 'common/StatusCard',
+  component: StatusCard,
+  args: {
+    title: 'これから注文番号の照合を行います。注文番号照合の状況はネームカードページのステータスで確認できます。編集期限前に照合が正常に完了したことを確認してください。',
+  },
+  argTypes: {
+    color: {
+      description: 'The color property',
+      control: {
+        type: 'text',
+      },
+    },
+  },
+}
+
+const Template: StoryFn<unknown> = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { StatusCard },
+  setup() {
+    return { args }
+  },
+  template: '<StatusCard v-bind="args" />',
+})
+
+export const Default = Template.bind({})
+
+export const Error = Template.bind({})
+Error.args = {
+  hasError: true,
+  title: '印刷工程の都合上、ネームカードの編集期限後は編集できなくなります。当日会場にてネームカードをご希望の方は期限までに編集を完了させてください。',
+}

packages/ui/components/common/StatusCard.vue

@@ -0,0 +1,52 @@
+<script setup lang="ts">
+import Icon from '../icon/Icon.vue'
+
+interface StatusCardProps {
+  hasError: boolean
+  title: string
+}
+
+const props = defineProps<StatusCardProps>()
+</script>
+
+<template>
+  <div
+    class="status-card"
+    :style="{
+      background: hasError ? '#FFDAD6' : '#E7EFF7',
+    }"
+  >
+    <Icon v-if="hasError" :style="{ width: '80px' }" color="vue-blue" name="alert" />
+    <p
+      class="title"
+      :style="{
+        fontWeight: hasError ? 700 : 500,
+      }"
+    >
+      {{ title }}
+    </p>
+  </div>
+</template>
+
+<style scoped>
+.status-card {
+  display: flex;
+  gap: calc(var(--unit) * 1);
+  padding: calc(var(--unit) * 3) calc(var(--unit) * 4);
+  max-width: 760px;
+  color: var(--color-vue-blue);
+  border-radius: 8px;
+}
+
+.title {
+  padding: 0;
+  margin: 0;
+  font-size: 18px;
+}
+
+@media screen and (max-width: 768px) {
+  .status-card {
+    width: 100%;
+  }
+}
+</style>