Merge pull request #1207 from Wizleap-Inc/feat/1205_line_graph

Feat(line-graph): 背景を非表示にする機能の実装 #1205

.changeset/light-planes-talk.md

@@ -0,0 +1,7 @@
+---
+"@wizleap-inc/wiz-ui-react": minor
+"@wizleap-inc/wiz-ui-next": minor
+"@wizleap-inc/wiz-ui-styles": minor
+---
+
+[#1205] hiddenBg property 追加

packages/styles/bases/line-graph.css.ts

@@ -1,16 +1,25 @@
-import { style } from "@vanilla-extract/css";
+import { style, styleVariants } from "@vanilla-extract/css";
 import { THEME } from "@wizleap-inc/wiz-ui-constants";
 
 const BAR_HEIGHT = "6px";
 
-export const lineGraphBgStyle = style({
+export const lineGraphBaseBgStyle = style({
   position: "relative",
   height: BAR_HEIGHT,
   background: THEME.color.gray[400],
   borderRadius: THEME.spacing.xs2,
   width: "100%",
 });
 
+export const lineGraphBgStyle = styleVariants({
+  default: {
+    background: THEME.color.gray[400],
+  },
+  hidden: {
+    background: "none",
+  },
+});
+
 export const lineGraphBarStyle = style({
   position: "absolute",
   height: BAR_HEIGHT,

packages/wiz-ui-next/src/components/base/graphs/line/line.stories.ts

@@ -22,3 +22,16 @@ export const Default: StoryFn<typeof WizLineGraph> = (args) => ({
 Default.args = {
   percentage: 56,
 };
+
+export const HiddenBg: StoryFn<typeof WizLineGraph> = (args) => ({
+  setup: () => ({ args }),
+  components: { WizLineGraph },
+  template: `
+    <WizLineGraph v-bind="$props"/>
+  `,
+});
+
+HiddenBg.args = {
+  percentage: 56,
+  hiddenBg: true,
+};

packages/wiz-ui-next/src/components/base/graphs/line/line.vue

@@ -1,24 +1,36 @@
 <template>
-  <div :class="lineGraphBgStyle">
+  <div :class="[lineGraphBaseBgStyle, lineGraphBgStyle[bgStyle]]">
     <div :class="lineGraphBarStyle" :style="{ width: `${percentage}%` }" />
   </div>
 </template>
 
 <script setup lang="ts">
 import { ComponentName } from "@wizleap-inc/wiz-ui-constants";
 import {
+  lineGraphBaseBgStyle,
   lineGraphBgStyle,
   lineGraphBarStyle,
 } from "@wizleap-inc/wiz-ui-styles/bases/line-graph.css";
+import { computed } from "vue";
 
 defineOptions({
   name: ComponentName.LineGraph,
 });
 
-defineProps({
+const props = defineProps({
   percentage: {
     type: Number,
     required: true,
   },
+  hiddenBg: {
+    type: Boolean,
+    required: false,
+    default: false,
+  },
+});
+
+const bgStyle = computed(() => {
+  if (props.hiddenBg) return "hidden";
+  return "default";
 });
 </script>

packages/wiz-ui-react/src/components/base/graphs/line/components/line-graph.tsx

@@ -6,11 +6,20 @@ import { FC } from "react";
 import { BaseProps } from "@/types";
 type Props = BaseProps & {
   percentage: number;
+  hiddenBg?: boolean;
 };
 
-const LineGraph: FC<Props> = ({ className, style, percentage }) => {
+const LineGraph: FC<Props> = ({ className, style, percentage, hiddenBg }) => {
+  const bgStyle = hiddenBg ? "hidden" : "default";
   return (
-    <div className={clsx(className, styles.lineGraphBgStyle)} style={style}>
+    <div
+      className={clsx(
+        className,
+        styles.lineGraphBaseBgStyle,
+        styles.lineGraphBgStyle[bgStyle]
+      )}
+      style={style}
+    >
       <div
         className={styles.lineGraphBarStyle}
         style={{

packages/wiz-ui-react/src/components/base/graphs/line/stories/line-graph.stories.tsx

@@ -15,3 +15,10 @@ export const Default: Story = {
     percentage: 56,
   },
 };
+
+export const HiddenBg: Story = {
+  args: {
+    percentage: 56,
+    hiddenBg: true,
+  },
+};