Merge pull request #40 from pepabo/enable-choosing-size-of-border-wid…

…th-progress-indicator progress-indicatorのborderのsizeの展開をする
pepabo · Oct 3, 2024 · cffd306 · cffd306
2 parents 2fadfab + 2db23f9
commit cffd306
Show file tree

Hide file tree

Showing 35 changed files with 578 additions and 685 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/adapter/functions/size/_border.scss b/packages/adapter/functions/size/_border.scss
@@ -49,8 +49,18 @@ $border-size-tokens: map.get(
   @return map.get($border-size-tokens, focus-ring);
 }
 
-@function get-progress-indicator-border-size() {
-  @return map.get($border-size-tokens, progress-indicator);
+@function get-progress-indicator-border-size($size: l) {
+  $tokens: map.get($border-size-tokens, progress-indicator);
+  $available-sizes: ('s', 'm', 'l');
+
+  @if list.index($available-sizes, $size) == null {
+    @error error-message.any-one-of(
+      $value: $size,
+      $available-values: $available-sizes
+    );
+  }
+
+  @return map.get($tokens, $size);
 }
 
 @function get-radio-border-size() {

diff --git a/packages/adapter/package.json b/packages/adapter/package.json
@@ -15,6 +15,6 @@
   },
   "devDependencies": {
     "@pepabo-inhouse/flavor": "^2.0.0",
-    "@pepabo-inhouse/tokens": "^0.17.0"
+    "@pepabo-inhouse/tokens": "^2.0.0"
   }
 }
diff --git a/packages/app-bar/package.json b/packages/app-bar/package.json
@@ -17,6 +17,6 @@
   },
   "devDependencies": {
     "@pepabo-inhouse/flavor": "^2.0.0",
-    "@pepabo-inhouse/tokens": "^0.17.0"
+    "@pepabo-inhouse/tokens": "^2.0.0"
   }
 }
diff --git a/packages/avatar/package.json b/packages/avatar/package.json
@@ -17,6 +17,6 @@
   "devDependencies": {
     "@pepabo-inhouse/constants": "^2.0.0",
     "@pepabo-inhouse/flavor": "^2.0.0",
-    "@pepabo-inhouse/tokens": "^0.17.0"
+    "@pepabo-inhouse/tokens": "^2.0.0"
   }
 }
diff --git a/packages/bottom-navigation/package.json b/packages/bottom-navigation/package.json
@@ -16,6 +16,6 @@
   "devDependencies": {
     "@pepabo-inhouse/constants": "^2.0.0",
     "@pepabo-inhouse/flavor": "^2.0.0",
-    "@pepabo-inhouse/tokens": "^0.17.0"
+    "@pepabo-inhouse/tokens": "^2.0.0"
   }
 }
diff --git a/packages/button/package.json b/packages/button/package.json
@@ -18,6 +18,6 @@
   "devDependencies": {
     "@pepabo-inhouse/constants": "^2.0.0",
     "@pepabo-inhouse/flavor": "^2.0.0",
-    "@pepabo-inhouse/tokens": "^0.17.0"
+    "@pepabo-inhouse/tokens": "^2.0.0"
   }
 }
diff --git a/packages/callout/package.json b/packages/callout/package.json
@@ -16,6 +16,6 @@
   "devDependencies": {
     "@pepabo-inhouse/constants": "^2.0.0",
     "@pepabo-inhouse/flavor": "^2.0.0",
-    "@pepabo-inhouse/tokens": "^0.17.0"
+    "@pepabo-inhouse/tokens": "^2.0.0"
   }
 }
diff --git a/packages/card/package.json b/packages/card/package.json
@@ -16,6 +16,6 @@
   },
   "devDependencies": {
     "@pepabo-inhouse/flavor": "^2.0.0",
-    "@pepabo-inhouse/tokens": "^0.17.0"
+    "@pepabo-inhouse/tokens": "^2.0.0"
   }
 }
diff --git a/packages/cell/package.json b/packages/cell/package.json
@@ -16,6 +16,6 @@
   "devDependencies": {
     "@pepabo-inhouse/constants": "^2.0.0",
     "@pepabo-inhouse/flavor": "^2.0.0",
-    "@pepabo-inhouse/tokens": "^0.17.0"
+    "@pepabo-inhouse/tokens": "^2.0.0"
   }
 }
diff --git a/packages/checkbox/package.json b/packages/checkbox/package.json
@@ -18,6 +18,6 @@
   "devDependencies": {
     "@pepabo-inhouse/constants": "^2.0.0",
     "@pepabo-inhouse/flavor": "^2.0.0",
-    "@pepabo-inhouse/tokens": "^0.17.0"
+    "@pepabo-inhouse/tokens": "^2.0.0"
   }
 }
diff --git a/packages/components-web/package.json b/packages/components-web/package.json
@@ -41,7 +41,7 @@
     "@pepabo-inhouse/table": "^2.0.0",
     "@pepabo-inhouse/textfield": "^2.0.0",
     "@pepabo-inhouse/thumbnail": "^2.0.0",
-    "@pepabo-inhouse/tokens": "^0.17.0",
+    "@pepabo-inhouse/tokens": "^2.0.0",
     "autoprefixer": "10.4.14",
     "cssnano": "5.1.15",
     "postcss": "^8.4.38",

diff --git a/packages/container/package.json b/packages/container/package.json
@@ -16,6 +16,6 @@
   "devDependencies": {
     "@pepabo-inhouse/constants": "^2.0.0",
     "@pepabo-inhouse/flavor": "^2.0.0",
-    "@pepabo-inhouse/tokens": "^0.17.0"
+    "@pepabo-inhouse/tokens": "^2.0.0"
   }
 }
diff --git a/packages/description-list/package.json b/packages/description-list/package.json
@@ -17,6 +17,6 @@
   },
   "devDependencies": {
     "@pepabo-inhouse/flavor": "^2.0.0",
-    "@pepabo-inhouse/tokens": "^0.17.0"
+    "@pepabo-inhouse/tokens": "^2.0.0"
   }
 }
diff --git a/packages/flavor/package.json b/packages/flavor/package.json
@@ -11,6 +11,6 @@
     "access": "public"
   },
   "dependencies": {
-    "@pepabo-inhouse/tokens": "^0.17.0"
+    "@pepabo-inhouse/tokens": "^2.0.0"
   }
 }
diff --git a/packages/grid/package.json b/packages/grid/package.json
@@ -17,6 +17,6 @@
   "devDependencies": {
     "@pepabo-inhouse/constants": "^2.0.0",
     "@pepabo-inhouse/flavor": "^2.0.0",
-    "@pepabo-inhouse/tokens": "^0.17.0"
+    "@pepabo-inhouse/tokens": "^2.0.0"
   }
 }
diff --git a/packages/header/package.json b/packages/header/package.json
@@ -16,6 +16,6 @@
   "devDependencies": {
     "@pepabo-inhouse/constants": "^2.0.0",
     "@pepabo-inhouse/flavor": "^2.0.0",
-    "@pepabo-inhouse/tokens": "^0.17.0"
+    "@pepabo-inhouse/tokens": "^2.0.0"
   }
 }
diff --git a/packages/icon/package.json b/packages/icon/package.json
@@ -16,7 +16,7 @@
   "devDependencies": {
     "@gyugyu/webfonts-generator": "^1.0.0",
     "@pepabo-inhouse/flavor": "^2.0.0",
-    "@pepabo-inhouse/tokens": "^0.17.0"
+    "@pepabo-inhouse/tokens": "^2.0.0"
   },
   "scripts": {
     "prepublishOnly": "npm run build",

diff --git a/packages/interactive-list/package.json b/packages/interactive-list/package.json
@@ -20,6 +20,6 @@
   "devDependencies": {
     "@pepabo-inhouse/constants": "^2.0.0",
     "@pepabo-inhouse/flavor": "^2.0.0",
-    "@pepabo-inhouse/tokens": "^0.17.0"
+    "@pepabo-inhouse/tokens": "^2.0.0"
   }
 }
diff --git a/packages/interactive-table/package.json b/packages/interactive-table/package.json
@@ -19,6 +19,6 @@
   "devDependencies": {
     "@pepabo-inhouse/constants": "^2.0.0",
     "@pepabo-inhouse/flavor": "^2.0.0",
-    "@pepabo-inhouse/tokens": "^0.17.0"
+    "@pepabo-inhouse/tokens": "^2.0.0"
   }
 }
diff --git a/packages/list/package.json b/packages/list/package.json
@@ -17,6 +17,6 @@
   },
   "devDependencies": {
     "@pepabo-inhouse/flavor": "^2.0.0",
-    "@pepabo-inhouse/tokens": "^0.17.0"
+    "@pepabo-inhouse/tokens": "^2.0.0"
   }
 }
diff --git a/packages/navigation-drawer/package.json b/packages/navigation-drawer/package.json
@@ -18,6 +18,6 @@
   "devDependencies": {
     "@pepabo-inhouse/constants": "^2.0.0",
     "@pepabo-inhouse/flavor": "^2.0.0",
-    "@pepabo-inhouse/tokens": "^0.17.0"
+    "@pepabo-inhouse/tokens": "^2.0.0"
   }
 }
diff --git a/packages/progress-indicator/_mixins.scss b/packages/progress-indicator/_mixins.scss
@@ -62,14 +62,21 @@
     left: adapter.get-spacing-size($level: xxs);
     display: block;
     box-sizing: border-box;
-    border: adapter.get-progress-indicator-border-size() solid adapter.get-progress-indicator-indicator-surface-color();
+    border-style: solid;
+    border-color: adapter.get-progress-indicator-indicator-surface-color();
     border-radius: 50%;
+    border-width: adapter.get-progress-indicator-border-size($size: l);
     transform: rotate(45deg);
     transform-origin: center;
     transition: clip-path 0.1s ease;
     content: "";
     clip-path: polygon(0% 0%, 0% 100%, 100% 100%, 100% 0%, 0% 0%, 50% 50%);
   }
+  @each $size in 's', 'm', 'l' {
+    &.-size-#{$size} {
+      @include -size-style($size);
+    }
+  }
 
   @for $i from 0 to 25 {
     &[data-percentage="#{$i}"]::after {
@@ -315,6 +322,12 @@
   }
 }
 
+@mixin -size-style($size) {
+  &::after {
+    border-width: adapter.get-progress-indicator-border-size($size);
+  }
+}
+
 @mixin export {
   .in-linear-progress-indicator {
     @include linear;

diff --git a/packages/progress-indicator/package.json b/packages/progress-indicator/package.json
@@ -16,6 +16,6 @@
   "devDependencies": {
     "@pepabo-inhouse/constants": "^2.0.0",
     "@pepabo-inhouse/flavor": "^2.0.0",
-    "@pepabo-inhouse/tokens": "^0.17.0"
+    "@pepabo-inhouse/tokens": "^2.0.0"
   }
 }
diff --git a/packages/radio/package.json b/packages/radio/package.json
@@ -18,6 +18,6 @@
   "devDependencies": {
     "@pepabo-inhouse/constants": "^2.0.0",
     "@pepabo-inhouse/flavor": "^2.0.0",
-    "@pepabo-inhouse/tokens": "^0.17.0"
+    "@pepabo-inhouse/tokens": "^2.0.0"
   }
 }
diff --git a/packages/scrim/package.json b/packages/scrim/package.json
@@ -16,6 +16,6 @@
   "devDependencies": {
     "@pepabo-inhouse/constants": "^2.0.0",
     "@pepabo-inhouse/flavor": "^2.0.0",
-    "@pepabo-inhouse/tokens": "^0.17.0"
+    "@pepabo-inhouse/tokens": "^2.0.0"
   }
 }
diff --git a/packages/select/package.json b/packages/select/package.json
@@ -16,6 +16,6 @@
   "devDependencies": {
     "@pepabo-inhouse/constants": "^2.0.0",
     "@pepabo-inhouse/flavor": "^2.0.0",
-    "@pepabo-inhouse/tokens": "^0.17.0"
+    "@pepabo-inhouse/tokens": "^2.0.0"
   }
 }
diff --git a/packages/side-navigation/package.json b/packages/side-navigation/package.json
@@ -16,6 +16,6 @@
   "devDependencies": {
     "@pepabo-inhouse/constants": "^2.0.0",
     "@pepabo-inhouse/flavor": "^2.0.0",
-    "@pepabo-inhouse/tokens": "^0.17.0"
+    "@pepabo-inhouse/tokens": "^2.0.0"
   }
 }
diff --git a/packages/skeleton/package.json b/packages/skeleton/package.json
@@ -16,6 +16,6 @@
   "devDependencies": {
     "@pepabo-inhouse/constants": "^2.0.0",
     "@pepabo-inhouse/flavor": "^2.0.0",
-    "@pepabo-inhouse/tokens": "^0.17.0"
+    "@pepabo-inhouse/tokens": "^2.0.0"
   }
 }
diff --git a/packages/snackbar/package.json b/packages/snackbar/package.json
@@ -15,6 +15,6 @@
   },
   "devDependencies": {
     "@pepabo-inhouse/flavor": "^2.0.0",
-    "@pepabo-inhouse/tokens": "^0.17.0"
+    "@pepabo-inhouse/tokens": "^2.0.0"
   }
 }
diff --git a/packages/stories-web/package.json b/packages/stories-web/package.json
@@ -43,7 +43,7 @@
     "@pepabo-inhouse/table": "^2.0.0",
     "@pepabo-inhouse/textfield": "^2.0.0",
     "@pepabo-inhouse/thumbnail": "^2.0.0",
-    "@pepabo-inhouse/tokens": "^0.17.0",
+    "@pepabo-inhouse/tokens": "^2.0.0",
     "@storybook/addon-essentials": "^7.0.6",
     "@storybook/react": "^7.0.6",
     "@storybook/react-webpack5": "^7.0.6",

diff --git a/packages/stories-web/src/components/progress-indicator/Circular.tsx b/packages/stories-web/src/components/progress-indicator/Circular.tsx
@@ -1,18 +1,24 @@
 import React, { FC } from 'react'
+import { Size } from '../types';
 
 export interface Props {
   max: number
   value?: number
+  size?: Extract<Size, 's' | 'm' | 'l'>
 }
 
 const Circular: FC<Props> = (props: Props) => {
   const {
     max,
     value,
+    size,
     ...rest
   } = props
 
   const classes = ['in-circular-progress-indicator']
+  if (typeof size !== 'undefined') {
+    classes.push(`-size-${size}`)
+  }
 
   let percentage
 

diff --git a/packages/table/package.json b/packages/table/package.json
@@ -16,6 +16,6 @@
   },
   "devDependencies": {
     "@pepabo-inhouse/flavor": "^2.0.0",
-    "@pepabo-inhouse/tokens": "^0.17.0"
+    "@pepabo-inhouse/tokens": "^2.0.0"
   }
 }
diff --git a/packages/textfield/package.json b/packages/textfield/package.json
@@ -16,6 +16,6 @@
   "devDependencies": {
     "@pepabo-inhouse/constants": "^2.0.0",
     "@pepabo-inhouse/flavor": "^2.0.0",
-    "@pepabo-inhouse/tokens": "^0.17.0"
+    "@pepabo-inhouse/tokens": "^2.0.0"
   }
 }
diff --git a/packages/thumbnail/package.json b/packages/thumbnail/package.json
@@ -16,6 +16,6 @@
   },
   "devDependencies": {
     "@pepabo-inhouse/flavor": "^2.0.0",
-    "@pepabo-inhouse/tokens": "^0.17.0"
+    "@pepabo-inhouse/tokens": "^2.0.0"
   }
 }