@frollo/frollo-web-ui 7.0.1 → 8.0.0

package/icons/chart-line-up.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 22" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.5 17.75C1.5 18.9922 2.50734 20 3.75 20H23.25C23.6625 20 24 20.3375 24 20.75C24 21.1625 23.6625 21.5 23.25 21.5H3.75C1.67906 21.5 0 19.8219 0 17.75V1.25C0 0.835625 0.335812 0.5 0.75 0.5C1.16438 0.5 1.5 0.835625 1.5 1.25V17.75ZM15.75 5H21.75C22.1625 5 22.5 5.3375 22.5 5.75V11.75C22.5 12.1625 22.1625 12.5 21.75 12.5C21.3375 12.5 21 12.1625 21 11.75V7.55938L15.5297 13.0297C15.2391 13.325 14.7609 13.325 14.4703 13.0297L10.4578 9.05938L5.77969 13.7797C5.48906 14.075 5.01094 14.075 4.72031 13.7797C4.42687 13.4891 4.42687 13.0109 4.72031 12.7203L9.97031 7.47031C10.2609 7.175 10.7391 7.175 11.0297 7.47031L15 11.4406L19.9406 6.5H15.75C15.3375 6.5 15 6.1625 15 5.75C15 5.3375 15.3375 5 15.75 5Z" />
+</svg>

package/icons/icons.stories.ts

@@ -1,33 +1,28 @@
-import { Meta } from '@storybook/vue3';
+import { Meta, StoryObj } from '@storybook/vue3';
 import * as icons from './';
-import FwCard from '../components/fw-card/fw-card.vue';
 
-export default {
-  title: 'Icons'
-} as Meta;
+const meta = {
+  title: 'Icons',
+  tags: ['!autodocs']
+} satisfies Meta;
 
-const Template = () => ({
-  components: { FwCard },
-  template: `
-  <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 w-full items-center">
-    <div class="p-6 border-grey-20 border" v-for="icon, i in icons" :key="i">
-      <div class="flex flex-col items-center justify-center space-y-3">
-        <component :is="icon" class="w-10 h-10 text-body" />
-        <span class="text-sm capitalize font-medium">{{ extractFilename(icon.__file) }}</span>
-      </div>
-    </div>
-  </div>`,
-  setup() {
-    const extractFilename = (path: string) => {
-      const pathArray = path?.split('/');
-      const lastIndex = pathArray?.length - 1;
-      if (lastIndex) return pathArray[lastIndex].slice(0, -4);
-    };
-    return {
-      icons,
-      extractFilename
-    };
-  }
-});
+export default meta;
+type Story = StoryObj<typeof meta>;
 
-export const Default = Template.bind({});
+export const Basic: Story = {
+  render: () => ({
+    template: `
+    <div class="grid grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-6 w-full items-center">
+      <div class="p-6 border-grey-20 border" v-for="icon, i in icons" :key="i">
+        <div class="flex flex-col items-center justify-center space-y-3">
+          <component :is="icon" class="w-14 h-14 text-body" />
+        </div>
+      </div>
+    </div>`,
+    setup() {
+      return {
+        icons
+      };
+    }
+  })
+};

package/icons/index.ts

@@ -38,6 +38,8 @@ import PenSvg from './pen.svg';
 import CalendarSvg from './calendar.svg';
 import CalendarDaySvg from './calendar-day.svg';
 import EllipsisSvg from './ellipsis.svg';
+import ChartLineUpSvg from './chart-line-up.svg';
+import SackDollarSvg from './sack-dollar.svg';
 
 export {
   ViewSvg,
@@ -79,5 +81,7 @@ export {
   PenSvg,
   CalendarSvg,
   CalendarDaySvg,
-  EllipsisSvg
+  EllipsisSvg,
+  ChartLineUpSvg,
+  SackDollarSvg
 };

package/icons/sack-dollar.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 24 24" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+  <path d="M12.75 10.95C13.0266 10.9969 13.5984 11.1187 13.8797 11.1797C14.2828 11.2875 14.5172 11.7 14.4141 12.0984C14.3062 12.5016 13.8937 12.7359 13.4953 12.6328C13.3078 12.5813 12.6656 12.4547 12.4594 12.4219C11.8547 12.3281 11.3484 12.4031 11.0109 12.5578C10.6734 12.7125 10.5047 12.9094 10.5187 13.0359C10.4859 13.2703 10.5141 13.3687 10.5422 13.425C10.5703 13.4906 10.6313 13.5703 10.7719 13.6641C11.0906 13.8797 11.5734 14.0297 12.225 14.2266L12.2531 14.2359C12.8297 14.4094 13.5609 14.6297 14.1047 15.0234C14.3953 15.2344 14.6672 15.5203 14.8359 15.9047C15.0047 16.2937 15.0375 16.725 14.9625 17.1797C14.8172 17.9578 14.2781 18.5578 13.5891 18.8531C13.3266 18.9656 13.0453 19.0406 12.75 19.0828V19.5C12.75 19.9125 12.4125 20.25 12 20.25C11.5875 20.25 11.25 19.9125 11.25 19.5V19.05C10.8094 18.9656 10.1438 18.7406 9.73125 18.5953C9.64688 18.5672 9.57187 18.5438 9.51094 18.525C9.12187 18.3938 8.90625 17.9672 9.0375 17.5734C9.16875 17.1844 9.59531 16.9688 9.98906 17.1C10.0359 17.1328 10.1766 17.1656 10.275 17.1984C10.7203 17.3484 11.2453 17.5266 11.5453 17.5359C12.1687 17.6719 12.6703 17.6156 12.9984 17.475C13.3031 17.3438 13.4391 17.1609 13.4813 16.9219C13.5188 16.7062 13.4906 16.5797 13.4578 16.5047C13.425 16.425 13.3547 16.3359 13.2188 16.2375C12.9141 16.0125 12.4359 15.8578 11.7938 15.6609L11.6953 15.6328C11.1422 15.4641 10.4484 15.2578 9.93281 14.8641C9.6375 14.7094 9.36094 14.4375 9.18281 14.0672C9.00469 13.6875 8.9625 13.2656 9.0375 12.8203C9.17344 12.0375 9.73125 11.4938 10.3922 11.1938C10.6547 11.0719 10.9453 10.9875 11.25 10.9359V10.4578C11.25 10.0875 11.5875 9.70781 12 9.70781C12.4125 9.70781 12.75 10.0875 12.75 10.4578V10.95ZM8.39062 5.64375L5.71406 1.76344C5.16094 1.01719 5.7375 0 6.64219 0H17.3578C18.2625 0 18.7969 1.01719 18.2859 1.76344L15.5672 5.64375C15.9703 5.87813 16.3922 6.15938 16.8469 6.49219C19.725 8.61094 24 12.8156 24 19.5C24 21.9844 21.9844 24 19.5 24H4.5C2.01469 24 0 21.9844 0 19.5C0 12.8156 4.275 8.61094 7.15313 6.49219C7.60781 6.15938 8.02969 5.87813 8.39062 5.64375ZM9.20156 6.90937C6.62813 8.55469 1.5 12.5766 1.5 19.5C1.5 21.1547 2.84297 22.5 4.5 22.5H19.5C21.1547 22.5 22.5 21.1547 22.5 19.5C22.5 12.5766 17.3719 8.55469 14.7984 6.90937L14.5547 6.70781H9.44531L9.20156 6.90937ZM14.0578 5.20781L16.6453 1.45781H7.35469L9.94219 5.20781H14.0578Z" />
+</svg>

package/icons/xmark.svg

@@ -1,3 +1,3 @@
-<svg viewBox="0 0 30 31" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
-  <path d="M22.2806 22.7796C21.9875 23.0727 21.5133 23.0727 21.2198 22.7796L15.0009 16.5593L8.78061 22.7796C8.4875 23.0727 8.01327 23.0727 7.71983 22.7796C7.42672 22.4865 7.42672 22.0123 7.71983 21.7189L13.9416 15.4999L7.72077 9.27964C7.42766 8.98653 7.42766 8.51229 7.72077 8.21886C8.01388 7.92575 8.48811 7.92575 8.78155 8.21886L15.0009 14.4406L21.2212 8.22026C21.5143 7.92715 21.9886 7.92715 22.282 8.22026C22.5751 8.51337 22.5751 8.98761 22.282 9.28104L16.0603 15.4999L22.2806 21.7203C22.5759 22.0109 22.5759 22.489 22.2806 22.7796Z" />
+<svg viewBox="0 0 16 15" fill="currentColor" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.2806 14.7797C14.9875 15.0728 14.5133 15.0728 14.2198 14.7797L8.00093 8.55939L1.78061 14.7797C1.4875 15.0728 1.01327 15.0728 0.719832 14.7797C0.426723 14.4866 0.426723 14.0124 0.719832 13.7189L6.94155 7.50001L0.72077 1.2797C0.42766 0.986589 0.42766 0.512354 0.72077 0.218916C1.01388 -0.0741929 1.48811 -0.0741929 1.78155 0.218916L8.00093 6.44063L14.2212 0.220323C14.5143 -0.0727867 14.9886 -0.0727867 15.282 0.220323C15.5751 0.513432 15.5751 0.987667 15.282 1.2811L9.0603 7.50001L15.2806 13.7203C15.5759 14.0109 15.5759 14.4891 15.2806 14.7797Z" />
 </svg>