Merge pull request #175 from vuejs-jp/feature/accordion

[コアスタッフ内の管理画面内のみの利用を想定] Accordion

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

@@ -0,0 +1,42 @@
+import { StoryFn } from '@storybook/vue3'
+import Accordion from './Accordion.vue'
+
+export default {
+  title: 'common/Accordion',
+  component: Accordion,
+  args: {
+    default: '<strong>Go!</strong>',
+    title: '折りたたみ',
+  },
+  argTypes: {
+    default: {
+      description: 'The default Vue slot',
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Slots',
+        type: {
+          summary: 'html',
+        },
+      },
+    },
+    title: {
+      description: 'The title property',
+      control: {
+        type: 'text',
+      },
+    },
+  },
+}
+
+const Template: StoryFn<unknown> = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { Accordion },
+  setup() {
+    return { args }
+  },
+  template: '<Accordion v-bind="args">{{ args.default }}</Accordion>',
+})
+
+export const Default = Template.bind({})

packages/ui/components/common/Accordion.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+import CssResetButton from './CssResetButton.vue'
+
+interface AccordionProps {
+  title: string;
+}
+
+const props = defineProps<AccordionProps>()
+
+const showPanel = ref(false)
+const togglePanel = (event) => showPanel.value = !showPanel.value
+</script>
+
+<template>
+  <div class="panel">
+    <CssResetButton class="parent-panel" @click.prevent="togglePanel">
+      {{ title }} >
+    </CssResetButton>
+    <div v-if="showPanel" class="panel-content">
+      <slot />
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.parent-panel {
+  padding: 22px 24px;
+  border-radius: 6px;
+  box-shadow: var(--box-shadow-button);
+  border: var(--border);
+  outline: none;
+  color: var(--color-vue-blue);
+  font-weight: normal;
+  width: 100%;
+  text-align: left;
+}
+.panel-content {
+  padding: 22px 24px;
+}
+</style>