feat: add scale prop

ICIJ · Jul 16, 2024 · f639769 · f639769
1 parent a16b657
commit f639769
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 4 deletions.
diff --git a/lib/components/PhosphorIcon.vue b/lib/components/PhosphorIcon.vue
@@ -76,6 +76,10 @@ const props = defineProps({
     type: String,
     default: null
   },
+  scale: {
+    type: Number,
+    default: 1
+  },
   variant: {
     type: String,
     required: false,
@@ -203,6 +207,7 @@ const style = computed(() => {
     '--phosphor-icon-weight': weight.value,
     '--phosphor-icon-raw-size': isRawSize.value ? props.size : null,
     '--phosphor-icon-size': hasSize.value ? props.size : null,
+    '--phosphor-icon-scale': props.scale ?? 1,
   }
 })
 
@@ -223,11 +228,11 @@ const classList = computed(() => {
   display: inline-flex;
   align-items: center;
   justify-content: center;
-  @include ph-icon-size($ph-icon-size-scale-base);
+  @include ph-icon-size($ph-icon-size-scale-base, var(--phosphor-icon-scale, 1));
  
   @each $size, $value in $ph-icon-sizes {
     &--size-#{$size} {
-      @include ph-icon-size($value);
+      @include ph-icon-size($value, var(--phosphor-icon-scale));
     }
   }
 }

diff --git a/lib/styles/mixins.scss b/lib/styles/mixins.scss
@@ -38,8 +38,8 @@
   #{$name}: #{$argument};
 }
 
-@mixin ph-icon-size ($font-size) {
-  font-size: divide($font-size, $ph-icon-size-scale-base) * 1em;
+@mixin ph-icon-size ($font-size, $scale: 1) {
+  font-size: calc(#{$scale} * #{divide($font-size, $ph-icon-size-scale-base) * 1em});
   line-height: divide(1, $font-size) * 1em;
   vertical-align: (divide(4, $font-size) - divide(3, 7)) * 1em;
 }

diff --git a/stories/murmur/components/PhosphorIcon.stories.js b/stories/murmur/components/PhosphorIcon.stories.js
@@ -172,4 +172,36 @@ export const Sizings = {
       <p><phosphor-icon name="globe" size="2xl" /> Stories that rock the world (<code>2xl</code>).</p>
     `
   })
+}
+
+export const Scaling = {
+  args: {
+    name: 'balloon',
+    weight: 'duotone',
+    variant: 'primary'
+  },
+  render: (args) => ({
+    components: {
+      PhosphorIcon
+    },
+    setup() {
+      return {
+        args
+      }
+    },
+    template: `
+      <p>
+        <phosphor-icon v-bind="args" scale="1" />      
+        <phosphor-icon v-bind="args" scale="2" />      
+        <phosphor-icon v-bind="args" scale="3" />      
+        <phosphor-icon v-bind="args" scale="4" />      
+        <phosphor-icon v-bind="args" scale="5" />      
+        <phosphor-icon v-bind="args" scale="6" />      
+        <phosphor-icon v-bind="args" scale="7" />      
+        <phosphor-icon v-bind="args" scale="8" />      
+        <phosphor-icon v-bind="args" scale="9" />      
+        <phosphor-icon v-bind="args" scale="10" />      
+      </p>
+    `
+  })
 }