Merge pull request #365 from otto-de/BLA-651

feat(Icon): [BLA-651] added size 50 icons from otto_icon_library

Author: AnnaHoege

packages/core-components/.storybook/test-runner.ts

@@ -4,6 +4,7 @@ const customSnapshotsDir = `${process.cwd()}/__snapshots__`;
 
 const ignoredStories = [
   'components-assets-icon--story-070-all-icons',
+  'components-assets-icon--story-040-size-50',
   'components-status-feedback-modal--story-010-backdrop-dismiss',
   'components-status-feedback-modal--story-020-esc-dismiss',
   'components-interaction-tooltip--story-010-hover',

packages/core-components/src/components.d.ts

@@ -346,9 +346,13 @@ export namespace Components {
          */
         "icon": IconName;
         /**
-          * The size of the icon
+          * @deprecated The size of the icon. Use the newer variant property instead.
          */
         "size": '50' | '100' | '200';
+        /**
+          * Icon variant. Icon 50 is only available for select icons. Icon 100 is 24x24px and can be scaled up.
+         */
+        "variant": '50' | '100';
     }
     /**
      * Input component
@@ -2281,9 +2285,13 @@ declare namespace LocalJSX {
          */
         "icon"?: IconName;
         /**
-          * The size of the icon
+          * @deprecated The size of the icon. Use the newer variant property instead.
          */
         "size"?: '50' | '100' | '200';
+        /**
+          * Icon variant. Icon 50 is only available for select icons. Icon 100 is 24x24px and can be scaled up.
+         */
+        "variant"?: '50' | '100';
     }
     /**
      * Input component

packages/core-components/src/components/icon/__snapshots__/icon.spec.tsx.snap

@@ -1,5 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`should gracefully fail if icon is the wrong size 1`] = `
+<b2b-icon>
+  <mock:shadow-root></mock:shadow-root>
+</b2b-icon>
+`;
+
 exports[`should gracefully fail if icon name is not found by not rendering icon and emitting a warning 1`] = `
 <b2b-icon>
   <mock:shadow-root></mock:shadow-root>

packages/core-components/src/components/icon/icon.docs.mdx

@@ -72,27 +72,45 @@ Inherit will allow you to specify any color for the icon by first defining the p
   <Story id="components-assets-icon--story-035-inherit" />
 </Canvas>
 
-### Size
-
-The icon comes in three different sizes that can be adjusted according
-to the context the icon is used in.
+### Variant
 
 #### 50
 
-The smallest icon size at 16 x 16px. Can be used in a small button or label.
+This is a special variant that only a subset of icons is available in.
+They are marked by a `-50` suffix in the icon name. The icon 50 is 12x12px and uses bold strokes.
+Use this for small labels or interactive icons in a form element.
 
 <Canvas columns={3} withSource="open" withToolbar={false}>
   <Story id="components-assets-icon--story-040-size-50" />
 </Canvas>
 
 #### 100
 
-This is the standard size of the icon, 24 x 24px. If not otherwise specified, this is the default.
+Standard size for the icon is 24x24px. The icon can be scaled up but not scaled down.
+You can change the size of the icon by overwriting the following CSS custom properties on the `b2b-icon` element:
+
+```css
+--b2b-icon-height: 1rem;
+--b2b-icon-width: 1rem;
+```
 
 <Canvas columns={3} withSource="open" withToolbar={false}>
   <Story id="components-assets-icon--story-050-size-100" />
 </Canvas>
 
+### Size (Deprecated)
+
+The icon comes in three different sizes that can be adjusted according
+to the context the icon is used in.
+
+#### 50
+
+The smallest icon size at 16 x 16px. Can be used in a small button or label.
+
+#### 100
+
+This is the standard size of the icon, 24 x 24px. If not otherwise specified, this is the default.
+
 #### 200
 
 This is a big icon with a size of 32 x 32px. It should not be used within

packages/core-components/src/components/icon/icon.scss

@@ -3,6 +3,8 @@
 :host {
   --b2b-icon-line-height: inherit;
   --b2b-icon-cursor: default;
+  --b2b-icon-width: var(--b2b-size-60);
+  --b2b-icon-height: var(--b2b-size-60);
 
   .b2b-icon {
     display: inline-flex;
@@ -19,6 +21,18 @@
       height: var(--b2b-size-40);
     }
 
+    &.b2b-icon--variant-50 {
+      width: var(--b2b-size-30);
+      height: var(--b2b-size-30);
+    }
+
+    &.b2b-icon--variant-100 {
+      width: var(--b2b-icon-width);
+      height: var(--b2b-icon-height);
+      min-width: var(--b2b-size-60);
+      min-height: var(--b2b-size-60);
+    }
+
     &.b2b-icon--100 {
       width: var(--b2b-size-60);
       height: var(--b2b-size-60);

packages/core-components/src/components/icon/icon.spec.tsx

@@ -21,3 +21,15 @@ it('should gracefully fail if icon name is not found by not rendering icon and e
   expect(page.root).toMatchSnapshot();
   expect(console.warn).toBeCalled();
 });
+
+it('should gracefully fail if icon is the wrong size', async () => {
+  // @ts-ignore
+  global.console.warn = jest.fn();
+  const page = await newSpecPage({
+    components: [B2bIcon],
+    // @ts-ignore
+    template: () => <b2b-icon icon="b2b_icon-edit" variant="50"></b2b-icon>,
+  });
+  expect(page.root).toMatchSnapshot();
+  expect(console.warn).toBeCalled();
+});

packages/core-components/src/components/icon/icon.stories.tsx

@@ -4,14 +4,17 @@ import { getArgTypes } from '../../docs/config/utils';
 import { iconTypes } from './types';
 import './icon.stories.scss';
 
-const Template: Story = ({ icon, color, size }) => {
-  return html`<b2b-icon icon="${icon}" color="${color}" size="${size}" />`;
+const Template: Story = ({ icon, color, variant }) => {
+  return html`<b2b-icon
+    icon="${icon}"
+    color="${color}"
+    variant="${variant}" />`;
 };
 
 const defaultArgs = {
   icon: 'b2b_icon-edit',
   color: 'primary',
-  size: '100',
+  variant: '100',
 };
 
 export const story010Primary = Template.bind({});
@@ -31,46 +34,46 @@ story030Inverse.parameters = {
   },
 };
 
-export const story035Inherit: Story = ({ icon, color, size }) => {
+export const story035Inherit: Story = ({ icon, color, variant }) => {
   return html` <div style="color: red;">
-    <b2b-icon icon="${icon}" color="${color}" size="${size}" />
+    <b2b-icon icon="${icon}" color="${color}" variant="${variant}" />
   </div>`;
 };
 story035Inherit.args = { ...defaultArgs, color: 'inherit' };
 story035Inherit.storyName = 'Inherit';
 
 export const story040Size50 = Template.bind({});
-story040Size50.args = { ...defaultArgs, size: '50' };
-story040Size50.storyName = 'Size 50';
+story040Size50.args = {
+  ...defaultArgs,
+  variant: '50',
+  icon: 'b2b_icon-info-50',
+};
+story040Size50.storyName = 'Variant 50';
 
 export const story050Size100 = Template.bind({});
 story050Size100.args = defaultArgs;
-story050Size100.storyName = 'Size 100';
-
-export const story060Size200 = Template.bind({});
-story060Size200.args = { ...defaultArgs, size: '200' };
-story060Size200.storyName = 'Size 200';
+story050Size100.storyName = 'Variant 100';
 
-export const story070AllIcons: Story = ({ color, size }) => {
+export const story070AllIcons: Story = ({ color, variant }) => {
   // not using a self-closing tag as that messes up with the display order of the icon and paragraph
   const icons = iconTypes.map(icon => {
     return html`
       <div class="icon-container">
         <b2b-icon
           icon="${icon}"
           color="${color || defaultArgs.color}"
-          size="${size || 200}"></b2b-icon>
+          variant="${variant || 100}"></b2b-icon>
         <p>${icon}</p>
       </div>
     `;
   });
   return html`<div class="icons-grid-container">${icons}</div>`;
 };
-story070AllIcons.args = { color: 'primary', size: '200' };
+story070AllIcons.args = { color: 'primary', variant: '100' };
 story070AllIcons.storyName = 'All Icons';
 
 const controls = {
-  size: 'radio',
+  variant: 'radio',
   color: 'radio',
   icon: 'select',
 };
@@ -79,6 +82,6 @@ const iconArgs = getArgTypes('b2b-icon', controls);
 
 export default {
   title: 'Components/Assets/Icon',
-  argTypes: iconArgs,
+  argTypes: { ...iconArgs, size: { controls: false } },
   viewMode: 'docs',
 } as Meta;

packages/core-components/src/components/icon/icon.tsx

@@ -15,9 +15,12 @@ export class B2bIcon {
   /** The color of the icon */
   @Prop() color: 'primary' | 'secondary' | 'inverse' | 'inherit' = 'inherit';
 
-  /** The size of the icon */
+  /** @deprecated The size of the icon. Use the newer variant property instead. */
   @Prop() size: '50' | '100' | '200' = '100';
 
+  /** Icon variant. Icon 50 is only available for select icons. Icon 100 is 24x24px and can be scaled up. */
+  @Prop() variant: '50' | '100';
+
   /** Will display a pointer cursor when hovering the icon */
   @Prop() clickable: boolean = false;
 
@@ -27,18 +30,30 @@ export class B2bIcon {
     this.loadIconPathData();
   }
 
-  private isIconSupported = () => {
+  private isIconSupported = (): boolean => {
     return iconTypes.includes(this.icon);
   };
 
+  private isIconCorrectSize = (): boolean => {
+    if (Boolean(this.variant)) {
+      const isSmall = this.icon.includes('50') && this.variant != '50';
+      const isBig = !this.icon.includes('50') && this.variant === '50';
+      return !(isSmall || isBig);
+    } else {
+      return true;
+    }
+  };
+
   render() {
-    if (!this.isIconSupported()) return null;
+    if (!this.isIconSupported() || !this.isIconCorrectSize()) return null;
     return (
       <Host>
         <div
           class={{
             'b2b-icon': true,
-            [`b2b-icon--${this.size}`]: true,
+            [`b2b-icon--${this.size}`]:
+              Boolean(this.size) && !Boolean(this.variant),
+            [`b2b-icon--variant-${this.variant}`]: Boolean(this.variant),
             [`b2b-icon--${this.color}`]: true,
             'b2b-icon--clickable': this.clickable,
           }}
@@ -54,6 +69,13 @@ export class B2bIcon {
         'icon name: ' + this.icon + ' is not supported or might have a typo.',
       );
       return;
+    } else if (!this.isIconCorrectSize()) {
+      console.warn(
+        'you are trying to use ' +
+          this.icon +
+          ' as a size 50 icon but have specified an incorrect variant property. Please make sure that all icons with the suffix -50 are of variant 50.',
+      );
+      return;
     }
     const icon = buildPath(this.icon);