[#1004] NavigationContent 追加

Wizleap-Inc · Aug 20, 2023 · e4f4898 · e4f4898
1 parent 12d215d
commit e4f4898
Show file tree

Hide file tree

Showing 8 changed files with 106 additions and 12 deletions.
diff --git a/packages/constants/component/name.ts b/packages/constants/component/name.ts
@@ -32,6 +32,7 @@ export const ComponentName = {
   MenuItem: "WizMenuItem",
   Drawer: "WizDrawer",
   NavigationContainer: "WizNavigationContainer",
+  NavigationContent: "WizNavigationContent",
   NavigationItem: "WizNavigationItem",
   PopupContainer: "WizPopupContainer",
   Popup: "WizPopup",

diff --git a/packages/styles/bases/navigation.css.ts b/packages/styles/bases/navigation.css.ts
@@ -112,3 +112,8 @@ export const navigationPopupContainerStyle = style({
   maxHeight: "25rem",
   overflowY: "auto",
 });
+
+export const navigationContentStyle = style({
+  marginTop: `calc(${THEME.share.HEADER_HEIGHT} + 1px)`,
+  transition: "margin 0.2s ease-in-out",
+});
diff --git a/packages/wiz-ui-next/src/components/base/navigation/container.stories.ts b/packages/wiz-ui-next/src/components/base/navigation/container.stories.ts
@@ -11,7 +11,7 @@ import {
 
 import { ButtonGroupItem } from "../popup-button-group/types";
 
-import { WizNavContainer, WizNavItem } from ".";
+import { WizNavContainer, WizNavItem, WizNavContent } from ".";
 
 export default {
   title: "Base/Navigation/Container",
@@ -121,7 +121,7 @@ export const Close: StoryFn = (_, { argTypes }) => ({
 
 export const Playground: StoryFn = (_, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components: { WizNavContainer, WizNavItem },
+  components: { WizNavContainer, WizNavItem, WizNavContent },
   setup() {
     const isOpen = ref(true);
     const toggle = () => (isOpen.value = !isOpen.value);
@@ -136,7 +136,7 @@ export const Playground: StoryFn = (_, { argTypes }) => ({
   },
   template: `
   <div style="display: flex; height: 100vh;">
-    <WizNavContainer :isOpen="isOpen">
+    <WizNavContainer fixed :isOpen="isOpen">
       <WizNavItem :icon="WizIDashboard" label="Home" to="/" :active="false" />
       <WizNavItem :icon="WizIAssignment" label="Page1" to="/page1" :active="false" />
       <WizNavItem :icon="WizIBusinessCenter" label="Page2" to="/page2" :active="false" />
@@ -147,17 +147,17 @@ export const Playground: StoryFn = (_, { argTypes }) => ({
         <h6>Footer</h6>
       </template>
     </WizNavContainer>
-    <div>
+    <WizNavContent :isOpen="isOpen">
       デバッグ用
       <button @click="toggle">{{ isOpen ? 'Close' : 'Open' }}</button>
-    </div>
+    </WizNavContent>
   </div>
   `,
 });
 
 export const Fixed: StoryFn = (_, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components: { WizNavContainer, WizNavItem },
+  components: { WizNavContainer, WizNavItem, WizNavContent },
   setup() {
     return {
       WizIDashboard,
@@ -179,6 +179,9 @@ export const Fixed: StoryFn = (_, { argTypes }) => ({
         <h6>Footer</h6>
       </template>
     </WizNavContainer>
+    <WizNavContent isOpen style="padding-left: 36px;">
+      <div v-for="n in 100" :key="n">テスト テスト テスト テスト テスト</div>
+    </WizNavContent>
   </div>
   `,
 });
@@ -262,6 +265,9 @@ export const PopupFixed: StoryFn<typeof WizNavContainer> = (args) => ({
       <WizNavItem :lockingPopup="lockingPopup" @setLock="setLock" :buttons="[createButton(3, args.click), createButton(4, args.click)]" :icon="WizIBusinessCenter" label="Page2" to="/page2" :active="false" :isOpen="isOpens[2].value" @toggle="toggles[2]"/>
       <WizNavItem :lockingPopup="lockingPopup" @setLock="setLock" :buttons="[createButton(5, args.click), createButton(6, args.click)]" :icon="WizIHelp" label="Page3" to="/page3" :active="false" :isOpen="isOpens[3].value" @toggle="toggles[3]"/>
     </WizNavContainer>
+    <WizNavContent isOpen style="padding-left: 36px;">
+      <div v-for="n in 100" :key="n">テスト テスト テスト テスト テスト</div>
+    </WizNavContent>
   </div>
   `,
 });
@@ -299,6 +305,9 @@ export const PopupFixedOpen: StoryFn<typeof WizNavContainer> = (args) => ({
       <WizNavItem :lockingPopup="lockingPopup" @setLock="setLock" :buttons="[createButton(3, args.click), createButton(4, args.click)]" :icon="WizIBusinessCenter" label="Page2" to="/page2" :active="false" :isOpen="isOpens[2].value" @toggle="toggles[2]"/>
       <WizNavItem :lockingPopup="lockingPopup" @setLock="setLock" :buttons="[createButton(5, args.click), createButton(6, args.click)]" :icon="WizIHelp" label="Page3" to="/page3" :active="false" :isOpen="isOpens[3].value" @toggle="toggles[3]"/>
     </WizNavContainer>
+    <WizNavContent isOpen style="padding-left: 36px;">
+      <div v-for="n in 100" :key="n">テスト テスト テスト テスト テスト</div>
+    </WizNavContent>
   </div>
   `,
 });
@@ -329,6 +338,9 @@ export const Disabled: StoryFn<typeof WizNavContainer> = (args) => ({
       <WizNavItem :disabled="true"  :lockingPopup="lockingPopup" @setLock="setLock" :buttons="[createButton(3, args.click), createButton(4, args.click)]" :icon="WizIBusinessCenter" label="Page2" to="/page2" :active="false" />
       <WizNavItem :disabled="true"  :lockingPopup="lockingPopup" @setLock="setLock" :buttons="[createButton(5, args.click), createButton(6, args.click)]" :icon="WizIHelp" label="Page3" to="/page3" :active="false" />
     </WizNavContainer>
+    <WizNavContent isOpen style="padding-left: 36px;">
+      <div v-for="n in 100" :key="n">テスト テスト テスト テスト テスト</div>
+    </WizNavContent>
   </div>
   `,
 });
@@ -365,6 +377,9 @@ export const PopupAndTooltip: StoryFn<typeof WizNavContainer> = (args) => ({
       <WizNavItem tooltipText="これはヒント3です。"  :lockingPopup="lockingPopup" @setLock="setLock" :buttons="[createButton(3, args.click), createButton(4, args.click)]" :icon="WizIBusinessCenter" label="Page2" to="/page2" :active="false" :isOpen="isOpens[2].value" @toggle="toggles[2]"/>
       <WizNavItem tooltipText="これはヒント4です。"  :lockingPopup="lockingPopup" @setLock="setLock" :buttons="[createButton(5, args.click), createButton(6, args.click)]" :icon="WizIHelp" label="Page3" to="/page3" :active="false" :isOpen="isOpens[3].value" @toggle="toggles[3]"/>
     </WizNavContainer>
+    <WizNavContent isOpen style="padding-left: 36px;">
+      <div v-for="n in 100" :key="n">テスト テスト テスト テスト テスト</div>
+    </WizNavContent>
   </div>
   `,
 });
diff --git a/packages/wiz-ui-next/src/components/base/navigation/content.vue b/packages/wiz-ui-next/src/components/base/navigation/content.vue
@@ -0,0 +1,28 @@
+<template>
+  <div
+    :class="navigationContentStyle"
+    :style="{ marginLeft: computedMarginLeft }"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ComponentName } from "@wizleap-inc/wiz-ui-constants";
+import { navigationContentStyle } from "@wizleap-inc/wiz-ui-styles/bases/navigation.css";
+import { defineProps, computed } from "vue";
+
+defineOptions({
+  name: ComponentName.NavigationContent,
+});
+
+const props = defineProps({
+  isOpen: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+});
+
+const computedMarginLeft = computed(() => (props.isOpen ? "181px" : "61px"));
+</script>
diff --git a/packages/wiz-ui-next/src/components/base/navigation/index.ts b/packages/wiz-ui-next/src/components/base/navigation/index.ts
@@ -1,2 +1,3 @@
 export { default as WizNavContainer } from "./container.vue";
 export { default as WizNavItem } from "./item.vue";
+export { default as WizNavContent } from "./content.vue";
diff --git a/packages/wiz-ui/src/components/base/navigation/container.stories.ts b/packages/wiz-ui/src/components/base/navigation/container.stories.ts
@@ -12,7 +12,7 @@ import { WizTextButton } from "../buttons";
 import { WizHeader } from "../header";
 import { ButtonGroupItem } from "../popup-button-group/types";
 
-import { WizNavContainer, WizNavItem } from ".";
+import { WizNavContainer, WizNavItem, WizNavContent } from ".";
 
 export default {
   title: "Base/Navigation/Container",
@@ -122,7 +122,7 @@ export const Close: StoryFn = (_, { argTypes }) => ({
 
 export const Playground: StoryFn = (_, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components: { WizNavContainer, WizNavItem },
+  components: { WizNavContainer, WizNavItem, WizNavContent },
   setup() {
     const isOpen = ref(true);
     const toggle = () => (isOpen.value = !isOpen.value);
@@ -137,7 +137,7 @@ export const Playground: StoryFn = (_, { argTypes }) => ({
   },
   template: `
   <div style="display: flex; height: 100vh;">
-    <WizNavContainer :isOpen="isOpen">
+    <WizNavContainer fixed :isOpen="isOpen">
       <WizNavItem :icon="WizIDashboard" label="Home" to="/" :active="false" />
       <WizNavItem :icon="WizIAssignment" label="Page1" to="/page1" :active="false" />
       <WizNavItem :icon="WizIBusinessCenter" label="Page2" to="/page2" :active="false" />
@@ -148,17 +148,17 @@ export const Playground: StoryFn = (_, { argTypes }) => ({
         <h6>Footer</h6>
       </template>
     </WizNavContainer>
-    <div>
+    <WizNavContent :isOpen="isOpen">
       デバッグ用
       <button @click="toggle">{{ isOpen ? 'Close' : 'Open' }}</button>
-    </div>
+    </WizNavContent>
   </div>
   `,
 });
 
 export const Fixed: StoryFn = (_, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components: { WizNavContainer, WizNavItem },
+  components: { WizNavContainer, WizNavItem, WizNavContent },
   setup() {
     return {
       WizIDashboard,
@@ -180,6 +180,9 @@ export const Fixed: StoryFn = (_, { argTypes }) => ({
         <h6>Footer</h6>
       </template>
     </WizNavContainer>
+    <WizNavContent isOpen style="padding-left: 36px;">
+      <div v-for="n in 100" :key="n">テスト テスト テスト テスト テスト</div>
+    </WizNavContent>
   </div>
   `,
 });
@@ -263,6 +266,9 @@ export const PopupFixed: StoryFn = (_, { argTypes }) => ({
       <WizNavItem :lockingPopup="lockingPopup" @setLock="setLock" :buttons="[createButton(3, click), createButton(4, click)]" :icon="WizIBusinessCenter" label="Page2" to="/page2" :active="false" :isOpen="isOpens[2].value" @toggle="toggles[2]"/>
       <WizNavItem :lockingPopup="lockingPopup" @setLock="setLock" :buttons="[createButton(5, click), createButton(6, click)]" :icon="WizIHelp" label="Page3" to="/page3" :active="false" :isOpen="isOpens[3].value" @toggle="toggles[3]"/>
     </WizNavContainer>
+    <WizNavContent isOpen style="padding-left: 36px;">
+      <div v-for="n in 100" :key="n">テスト テスト テスト テスト テスト</div>
+    </WizNavContent>
   </div>
   `,
 });
@@ -300,6 +306,9 @@ export const PopupFixedOpen: StoryFn = (_, { argTypes }) => ({
       <WizNavItem :lockingPopup="lockingPopup" @setLock="setLock" :buttons="[createButton(3, click), createButton(4, click)]" :icon="WizIBusinessCenter" label="Page2" to="/page2" :active="false" :isOpen="isOpens[2].value" @toggle="toggles[2]"/>
       <WizNavItem :lockingPopup="lockingPopup" @setLock="setLock" :buttons="[createButton(5, click), createButton(6, click)]" :icon="WizIHelp" label="Page3" to="/page3" :active="false" :isOpen="isOpens[3].value" @toggle="toggles[3]"/>
     </WizNavContainer>
+    <WizNavContent isOpen style="padding-left: 36px;">
+      <div v-for="n in 100" :key="n">テスト テスト テスト テスト テスト</div>
+    </WizNavContent>
   </div>
   `,
 });
@@ -330,6 +339,9 @@ export const Disabled: StoryFn = (_, { argTypes }) => ({
       <WizNavItem :disabled="true" :lockingPopup="lockingPopup" @setLock="setLock" :buttons="[createButton(3, click), createButton(4, click)]" :icon="WizIBusinessCenter" label="Page2" to="/page2" :active="false" />
       <WizNavItem :disabled="true" :lockingPopup="lockingPopup" @setLock="setLock" :buttons="[createButton(5, click), createButton(6, click)]" :icon="WizIHelp" label="Page3" to="/page3" :active="false" />
     </WizNavContainer>
+    <WizNavContent isOpen style="padding-left: 36px;">
+      <div v-for="n in 100" :key="n">テスト テスト テスト テスト テスト</div>
+    </WizNavContent>
   </div>
   `,
 });
@@ -366,6 +378,9 @@ export const PopupAndTooltip: StoryFn = (_, { argTypes }) => ({
       <WizNavItem tooltipText="これはヒント3です。" :lockingPopup="lockingPopup" @setLock="setLock" :buttons="[createButton(3, click), createButton(4, click)]" :icon="WizIBusinessCenter" label="Page2" to="/page2" :active="false" :isOpen="isOpens[2].value" @toggle="toggles[2]"/>
       <WizNavItem tooltipText="これはヒント4です。" :lockingPopup="lockingPopup" @setLock="setLock" :buttons="[createButton(5, click), createButton(6, click)]" :icon="WizIHelp" label="Page3" to="/page3" :active="false" :isOpen="isOpens[3].value" @toggle="toggles[3]"/>
     </WizNavContainer>
+    <WizNavContent isOpen style="padding-left: 36px;">
+      <div v-for="n in 100" :key="n">テスト テスト テスト テスト テスト</div>
+    </WizNavContent>
   </div>
   `,
 });
diff --git a/packages/wiz-ui/src/components/base/navigation/content.vue b/packages/wiz-ui/src/components/base/navigation/content.vue
@@ -0,0 +1,28 @@
+<template>
+  <div
+    :class="navigationContentStyle"
+    :style="{ marginLeft: computedMarginLeft }"
+  >
+    <slot />
+  </div>
+</template>
+
+<script setup lang="ts">
+import { ComponentName } from "@wizleap-inc/wiz-ui-constants";
+import { navigationContentStyle } from "@wizleap-inc/wiz-ui-styles/bases/navigation.css";
+import { computed } from "vue";
+
+defineOptions({
+  name: ComponentName.NavigationContent,
+});
+
+const props = defineProps({
+  isOpen: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+});
+
+const computedMarginLeft = computed(() => (props.isOpen ? "181px" : "61px"));
+</script>
diff --git a/packages/wiz-ui/src/components/base/navigation/index.ts b/packages/wiz-ui/src/components/base/navigation/index.ts
@@ -1,2 +1,3 @@
 export { default as WizNavContainer } from "./container.vue";
 export { default as WizNavItem } from "./item.vue";
+export { default as WizNavContent } from "./content.vue";