Amend icons

jackdomleo7 · jackdomleo7 · commit 2b2a18bd9b4d · 2025-01-18T21:58:34.000Z
diff --git a/src/components/Button/Button.spec.ts b/src/components/Button/Button.spec.ts
@@ -213,7 +213,7 @@ describe('Button', () => {
     it('renders a button with an icon before the text', async () => {
       // Arrange
       const icon: Components.Button.Icon = {
-        src: new URL('@/docs/assets/duck.svg', import.meta.url).href,
+        src: new URL('@/docs/assets/ChevronRight.svg', import.meta.url).href,
         position: 'before-text'
       };
       const wrapper = shallowMount(Button, {
@@ -238,7 +238,7 @@ describe('Button', () => {
     it('renders a button with an icon after the text', async () => {
       // Arrange
       const icon: Components.Button.Icon = {
-        src: new URL('@/docs/assets/duck.svg', import.meta.url).href,
+        src: new URL('@/docs/assets/ChevronRight.svg', import.meta.url).href,
         position: 'after-text'
       };
       const wrapper = shallowMount(Button, {
@@ -263,7 +263,7 @@ describe('Button', () => {
     it('renders a button with only an icon', async () => {
       // Arrange
       const icon: Components.Button.Icon = {
-        src: new URL('@/docs/assets/duck.svg', import.meta.url).href,
+        src: new URL('@/docs/assets/ChevronRight.svg', import.meta.url).href,
         position: 'icon-only'
       };
       const wrapper = shallowMount(Button, {
diff --git a/src/components/Button/Button.stories.ts b/src/components/Button/Button.stories.ts
@@ -64,7 +64,7 @@ export const IconBefore: Story = {
     default: 'Click me',
     status: 'info',
     icon: {
-      src: new URL('@/docs/assets/duck.svg', import.meta.url).href,
+      src: new URL('@/docs/assets/ChevronLeft.svg', import.meta.url).href,
       position: 'before-text'
     }
   }
@@ -75,7 +75,7 @@ export const IconAfter: Story = {
     default: 'Click me',
     status: 'info',
     icon: {
-      src: new URL('@/docs/assets/duck.svg', import.meta.url).href,
+      src: new URL('@/docs/assets/ChevronRight.svg', import.meta.url).href,
       position: 'after-text'
     }
   }
@@ -86,7 +86,7 @@ export const IconOnly: Story = {
     default: 'Click me',
     status: 'info',
     icon: {
-      src: new URL('@/docs/assets/duck.svg', import.meta.url).href,
+      src: new URL('@/docs/assets/ChevronRight.svg', import.meta.url).href,
       position: 'icon-only'
     }
   }
diff --git a/src/components/Button/Button.vue b/src/components/Button/Button.vue
@@ -162,7 +162,7 @@ const defaultSlotContent = computed<string>(() => {
 
   :deep(svg) {
     fill: var(--j-btn-color);
-    height: 75%;
+    height: 60%;
     width: auto;
     position: absolute;
   }
diff --git a/src/components/Icon/Icon.spec.ts b/src/components/Icon/Icon.spec.ts
@@ -7,7 +7,7 @@ describe('Icon', () => {
   it('renders a decorative icon', () => {
     // Arrange
     const icon: Components.Icon.Icon = {
-      src: new URL('@/docs/assets/duck.svg', import.meta.url).href
+      src: new URL('@/docs/assets/ChevronRight.svg', import.meta.url).href
     };
     const wrapper = shallowMount(Icon, {
       props: { icon }
@@ -26,8 +26,8 @@ describe('Icon', () => {
   it('renders an informative icon', () => {
     // Arrange
     const icon: Components.Icon.Icon = {
-      src: new URL('@/docs/assets/duck.svg', import.meta.url).href,
-      label: 'Duck'
+      src: new URL('@/docs/assets/ChevronRight.svg', import.meta.url).href,
+      label: 'ChevronRight'
     };
     const wrapper = shallowMount(Icon, {
       props: { icon }
@@ -39,7 +39,7 @@ describe('Icon', () => {
       'false'
     );
     expect(wrapper.findComponent(InlineSvg).attributes('aria-label')).toBe(
-      'Duck'
+      'ChevronRight'
     );
   });
 });
diff --git a/src/components/Icon/Icon.stories.ts b/src/components/Icon/Icon.stories.ts
@@ -13,16 +13,16 @@ type Story = StoryObj<typeof meta>;
 export const Decorative: Story = {
   args: {
     icon: {
-      src: new URL('@/docs/assets/duck.svg', import.meta.url).href
+      src: new URL('@/docs/assets/ChevronRight.svg', import.meta.url).href
     }
   }
 };
 
 export const Informative: Story = {
   args: {
     icon: {
-      src: new URL('@/docs/assets/duck.svg', import.meta.url).href,
-      label: 'Duck'
+      src: new URL('@/docs/assets/ChevronRight.svg', import.meta.url).href,
+      label: 'ChevronRight'
     }
   }
 };
diff --git a/src/docs/assets/ChevronDown.svg b/src/docs/assets/ChevronDown.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path d="M233.4 406.6c12.5 12.5 32.8 12.5 45.3 0l192-192c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L256 338.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l192 192z"/></svg>
diff --git a/src/docs/assets/ChevronLeft.svg b/src/docs/assets/ChevronLeft.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M9.4 233.4c-12.5 12.5-12.5 32.8 0 45.3l192 192c12.5 12.5 32.8 12.5 45.3 0s12.5-32.8 0-45.3L77.3 256 246.6 86.6c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0l-192 192z"/></svg>
diff --git a/src/docs/assets/ChevronRight.svg b/src/docs/assets/ChevronRight.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M310.6 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L242.7 256 73.4 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z"/></svg>
diff --git a/src/docs/assets/duck.svg b/src/docs/assets/duck.svg

Original file line number	Diff line number	Diff line change
`@@ -64,7 +64,7 @@ export const IconBefore: Story = {`
`64`	`64`	`default: 'Click me',`
`65`	`65`	`status: 'info',`
`66`	`66`	`icon: {`
`67`		`- src: new URL('@/docs/assets/duck.svg', import.meta.url).href,`
	`67`	`+ src: new URL('@/docs/assets/ChevronLeft.svg', import.meta.url).href,`
`68`	`68`	`position: 'before-text'`
`69`	`69`	`}`
`70`	`70`	`}`
`@@ -75,7 +75,7 @@ export const IconAfter: Story = {`
`75`	`75`	`default: 'Click me',`
`76`	`76`	`status: 'info',`
`77`	`77`	`icon: {`
`78`		`- src: new URL('@/docs/assets/duck.svg', import.meta.url).href,`
	`78`	`+ src: new URL('@/docs/assets/ChevronRight.svg', import.meta.url).href,`
`79`	`79`	`position: 'after-text'`
`80`	`80`	`}`
`81`	`81`	`}`
`@@ -86,7 +86,7 @@ export const IconOnly: Story = {`
`86`	`86`	`default: 'Click me',`
`87`	`87`	`status: 'info',`
`88`	`88`	`icon: {`
`89`		`- src: new URL('@/docs/assets/duck.svg', import.meta.url).href,`
	`89`	`+ src: new URL('@/docs/assets/ChevronRight.svg', import.meta.url).href,`
`90`	`90`	`position: 'icon-only'`
`91`	`91`	`}`
`92`	`92`	`}`
Original file line number	Diff line number	Diff line change
`@@ -162,7 +162,7 @@ const defaultSlotContent = computed<string>(() => {`
`162`	`162`
`163`	`163`	`:deep(svg) {`
`164`	`164`	`fill: var(--j-btn-color);`
`165`		`- height: 75%;`
	`165`	`+ height: 60%;`
`166`	`166`	`width: auto;`
`167`	`167`	`position: absolute;`
`168`	`168`	`}`
Original file line number	Diff line number	Diff line change
`@@ -13,16 +13,16 @@ type Story = StoryObj<typeof meta>;`
`13`	`13`	`export const Decorative: Story = {`
`14`	`14`	`args: {`
`15`	`15`	`icon: {`
`16`		`- src: new URL('@/docs/assets/duck.svg', import.meta.url).href`
	`16`	`+ src: new URL('@/docs/assets/ChevronRight.svg', import.meta.url).href`
`17`	`17`	`}`
`18`	`18`	`}`
`19`	`19`	`};`
`20`	`20`
`21`	`21`	`export const Informative: Story = {`
`22`	`22`	`args: {`
`23`	`23`	`icon: {`
`24`		`- src: new URL('@/docs/assets/duck.svg', import.meta.url).href,`
`25`		`- label: 'Duck'`
	`24`	`+ src: new URL('@/docs/assets/ChevronRight.svg', import.meta.url).href,`
	`25`	`+ label: 'ChevronRight'`
`26`	`26`	`}`
`27`	`27`	`}`
`28`	`28`	`};`