feat(icon): add hover style (#77)

ovh · Jun 26, 2023 · d4b221f · d4b221f
1 parent 96c5ced
commit d4b221f
Show file tree

Hide file tree

Showing 9 changed files with 70 additions and 33 deletions.
diff --git a/packages/libraries/core/src/components/icon/ods-icon-attributes.ts b/packages/libraries/core/src/components/icon/ods-icon-attributes.ts
@@ -15,6 +15,10 @@ export interface OdsIconAttributes extends OdsComponentAttributes {
    * Icon if contrasted or not
    */
   contrasted?: boolean
+  /**
+   * Icon if hoverabled or not
+   */
+  hoverable?: boolean
   /**
    * Icon name
    */

diff --git a/packages/libraries/core/src/components/icon/ods-icon-default-attributes.ts b/packages/libraries/core/src/components/icon/ods-icon-default-attributes.ts
@@ -6,6 +6,7 @@ export const odsIconDefaultAttributesDoc  = {
   ariaName: '',
   color: OdsThemeColorIntent.default,
   contrasted: false,
+  hoverable: false,
   name: undefined,
   size: OdsIconSize.md
 } as const;

diff --git a/packages/libraries/core/src/components/icon/ods-icon-mock.ts b/packages/libraries/core/src/components/icon/ods-icon-mock.ts
@@ -10,6 +10,7 @@ export class OdsIconMock implements OdsIcon<OdsIconMethods, OdsIconEvents> {
     ariaName = '';
     color?: OdsThemeColorIntent;
     contrasted?: boolean;
+    hoverable?: boolean;
     name?: OdsIconName;
     size?: OdsIconSize;
 

diff --git a/packages/stencil/components/icon/src/components/osds-icon/osds-icon.spec.ts b/packages/stencil/components/icon/src/components/osds-icon/osds-icon.spec.ts
@@ -130,6 +130,17 @@ describe('spec:osds-icon', () => {
         expect(instance.size).toBe(randomSize);
       });
     });
+
+    describe('hoverable', () => {
+      odsUnitTestAttribute<OdsIconAttributes, 'hoverable'>({
+        ...getAttributeContextOptions<OdsIconAttributes, OsdsIcon, 'hoverable'>({
+          name: 'hoverable',
+          list: [false, true],
+          defaultValue: odsIconDefaultAttributes.hoverable,
+          ...config
+        })
+      });
+    });
   });
 
   describe('controller', () => {

diff --git a/packages/stencil/components/icon/src/components/osds-icon/osds-icon.tsx b/packages/stencil/components/icon/src/components/osds-icon/osds-icon.tsx
@@ -31,6 +31,9 @@ export class OsdsIcon implements OdsIcon<OdsStencilMethods<OdsIconMethods>, OdsS
   /** @see OdsIconAttributes.contrasted */
   @Prop({ reflect: true }) public contrasted?: boolean = odsIconDefaultAttributes.contrasted;
 
+  /** @see OdsIconAttributes.hoverable */
+  @Prop({ reflect: true }) public hoverable?: boolean = odsIconDefaultAttributes.hoverable;
+
   /** @see OdsIconAttributes.name */
   @Prop({ reflect: true }) public name?: OdsIconName = odsIconDefaultAttributes.name;
 

diff --git a/packages/stencil/components/icon/src/components/osds-icon/styles/osds-icon.color.scss b/packages/stencil/components/icon/src/components/osds-icon/styles/osds-icon.color.scss
@@ -15,4 +15,22 @@
       }
     }
   }
+
+  [hoverable] {
+    :host(&[color='default']) {
+      @include osds-icon-on-selected-host() {
+        background-color: currentColor;
+      }
+    }
+
+    :host(&:not([color='default'])){
+      @include ods-and-one-hue-foreach-theme-color('700') using($color) {
+        :host(&:hover) {
+          @include osds-icon-on-selected-host() {
+            background-color: $color;
+          }
+        }
+      }
+    }
+  }
 }
diff --git a/packages/stencil/components/icon/src/index.html b/packages/stencil/components/icon/src/index.html
@@ -16,38 +16,30 @@
 <body>
 
 <p>Size</p>
-<osds-icon size='s'>Small</osds-icon>
-<osds-icon>Default</osds-icon>
-<osds-icon size='l'>Large</osds-icon>
-
-<p>Variant</p>
-<osds-icon variant='ghost'>Ghost</osds-icon>
-<osds-icon variant='primary'>Primary</osds-icon>
-<osds-icon variant='secondary'>Secondary</osds-icon>
-
-<p>Block</p>
-<osds-icon block size='s'>Block small</osds-icon>
-<osds-icon block>Block</osds-icon>
-<osds-icon block size='l'>Block large</osds-icon>
-
-<p>Square</p>
-<osds-icon square size='s'>Square small</osds-icon>
-<osds-icon square>Square</osds-icon>
-<osds-icon square size='l'>Square large</osds-icon>
-
-<p>Disabled</p>
-<osds-icon size='s' disabled>Small</osds-icon>
-<osds-icon disabled>Default</osds-icon>
-<osds-icon size='l' disabled>Large</osds-icon>
-<osds-icon variant='ghost' disabled>Ghost</osds-icon>
-<osds-icon variant='primary' disabled>Primary</osds-icon>
-<osds-icon variant='secondary' disabled>Secondary</osds-icon>
-<osds-icon block size='s' disabled>Block small</osds-icon>
-<osds-icon block disabled>Block</osds-icon>
-<osds-icon block size='l' disabled>Block large</osds-icon>
-<osds-icon square size='s' disabled>Square small</osds-icon>
-<osds-icon square disabled>Square</osds-icon>
-<osds-icon square size='l' disabled>Square large</osds-icon>
+<osds-icon name="home" size="xxs"></osds-icon>
+<osds-icon name="home" size="xs"></osds-icon>
+<osds-icon name="home" size="sm"></osds-icon>
+<osds-icon name="home" size="md"></osds-icon>
+<osds-icon name="home" size="lg"></osds-icon>
+<osds-icon name="home" size="xl"></osds-icon>
+
+<p>contrasted</p>
+<div style='background: #0e2231; padding: 3px;'>
+  <osds-icon name="home" size="md" contrasted='true'></osds-icon>
+</div>
+
+<p>color</p>
+<osds-icon name="home" size="md" color="primary"></osds-icon>
+<osds-icon name="home" size="md" color="text"></osds-icon>
+<osds-icon name="home" size="md" color="accent"></osds-icon>
+<osds-icon name="home" size="md" color="error"></osds-icon>
+<osds-icon name="home" size="md" color="warning"></osds-icon>
+<osds-icon name="home" size="md" color="success"></osds-icon>
+<osds-icon name="home" size="md" color="info"></osds-icon>
+<osds-icon name="home" size="md" color="promotion"></osds-icon>
+
+<p>hoverable</p>
+<osds-icon name="home" size="md" hoverable='true' color="primary"></osds-icon>
 
 <script>
   document.querySelectorAll('ods-icon').forEach((elem) => {});

diff --git a/packages/stencil/components/link/src/index.html b/packages/stencil/components/link/src/index.html
@@ -25,11 +25,18 @@
   with-prefix-icon
   <span slot='start'><osds-icon name="arrow-left" size="xs" color="primary"></osds-icon></span>
 </osds-link>
+<br/>
 <osds-link>
   with-suffix-icon
   <span slot='end'><osds-icon name="arrow-right" size="xs" color="primary"></osds-icon></span>
 </osds-link>
 
+<p>Icon hoverable</p>
+<osds-link color="primary">
+  with-hoverable-icon
+  <span slot='end'><osds-icon name="home" size="xs" hoverable=''></osds-icon></span>
+</osds-link>
+
 <p>Disabled</p>
 <osds-link disabled>Default</osds-link>
 

diff --git a/packages/tools/storybook/stories/components/link/link.web-components.stories.ts b/packages/tools/storybook/stories/components/link/link.web-components.stories.ts
@@ -60,7 +60,7 @@ const storyParams = {
   color: OdsThemeColorIntent.default,
   contrasted: false,
   disabled: false,
-  endSlot: '<osds-icon name="arrow-right" size="xs" color="primary"></osds-icon>',
+  endSlot: '<osds-icon name="arrow-right" size="xs" hoverable=""></osds-icon>',
   href: '',
   linkContentSlot: 'Oles ipsum dolor sit amet, Ocurreret at animal armor nec, constituam platonem network integer',
   startSlot: '',