Merge pull request #720 from onewelcome/UC-42

UC-42 Add new Icons for zooming action
onewelcome · Jul 16, 2024 · 976e33d · 976e33d
2 parents 955c3e0 + 1577ae9
commit 976e33d
Show file tree

Hide file tree

Showing 9 changed files with 20 additions and 4 deletions.
diff --git a/src/components/Icon/Icon.module.scss b/src/components/Icon/Icon.module.scss
@@ -357,8 +357,15 @@
   content: "\e94b";
   @include fontProperties();
 }
-
 .icon-add-circle:before {
   content: "\e94c";
   @include fontProperties();
 }
+.icon-zoom-in:before {
+  content: "\e94e";
+  @include fontProperties();
+}
+.icon-zoom-out:before {
+  content: "\e94d";
+  @include fontProperties();
+}
diff --git a/src/components/Icon/Icon.tsx b/src/components/Icon/Icon.tsx
@@ -96,7 +96,9 @@ export enum Icons {
   RetryFile = "retry",
   AbortFile = "cancel",
   FileAltIcon = "file-alt",
-  AddCircle = "add-circle"
+  AddCircle = "add-circle",
+  ZoomIn = "zoom-in",
+  ZoomOut = "zoom-out"
 }
 
 type Tag = "span" | "div" | "i";

diff --git a/src/font/icomoon.eot b/src/font/icomoon.eot
diff --git a/src/font/icomoon.svg b/src/font/icomoon.svg
diff --git a/src/font/icomoon.ttf b/src/font/icomoon.ttf
diff --git a/src/font/icomoon.woff b/src/font/icomoon.woff
diff --git a/src/font/selection.json b/src/font/selection.json
diff --git a/stories/Icon/Icon.mdx b/stories/Icon/Icon.mdx
@@ -6,7 +6,7 @@ import IconStories from "./Icon.stories";
 <Title />
 <Subtitle />
 
-The Icon component is used in order to display all of the icons from the OneWelcome design. If you miss a specific icon please contact the `SASSy` team. The way the `<Icon />` component works is by providing a prop called `icon`, which accepts the icon's name. We have created an `enum` within the `<Icon />` component that you can import in your React Component to get autocompletion. Consider the following import example:
+The Icon component is used in order to display all the icons from the OneWelcome design. If you miss a specific icon please contact the `SASSy` team. The way the `<Icon />` component works is by providing a prop called `icon`, which accepts the icon's name. We have created an `enum` within the `<Icon />` component that you can import in your React Component to get autocompletion. Consider the following import example:
 
 ```
 import { Icon, Icons } from '@onewelcome/react-lib-components';

diff --git a/stories/Icon/Icon.stories.tsx b/stories/Icon/Icon.stories.tsx
@@ -18,6 +18,7 @@ import React from "react";
 import { Meta, StoryFn } from "@storybook/react";
 import { Icon as IconComponent, Icons, Props } from "../../src/components/Icon/Icon";
 import IconDocumentation from "./Icon.mdx";
+import { IconGrid } from "./IconGrid";
 
 const meta: Meta = {
   title: "components/Data Display/Icon",
@@ -38,6 +39,7 @@ const meta: Meta = {
 export default meta;
 
 const Template: StoryFn<Props> = args => <IconComponent {...args} />;
+const IconGridTemplate: StoryFn<Props> = args => <IconGrid />;
 
 export const Icon = Template.bind({});
 
@@ -54,7 +56,10 @@ IconColor.args = {
 };
 
 export const IconSize = Template.bind({});
+
 IconSize.args = {
   icon: Icons.Calendar,
   size: "3rem"
 };
+
+export const IconStates = IconGridTemplate.bind({});