feat(CustomIcon): update README, remove height/width from fixture, co…

…py sizing values into style file directly, remove warning
commercetools · May 2, 2024 · 67c723c · 67c723c
1 parent 6f1f946
commit 67c723c
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 35 deletions.
diff --git a/packages/components/icons/README.md b/packages/components/icons/README.md
@@ -127,11 +127,11 @@ const app = () => <Icon icon={<YourCustomIcon />} />;
 
 ### Properties
 
-| Props       | Type                                                      | Required | Values                                              | Default | Description                                                                                                     |
-| ----------- | --------------------------------------------------------- | :------: | --------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------- |
-| `size`      | `string`                                                  |          | '10', '20', '30', '40'                              | '20'    | Specifies the icon size                                                                                         |
-| `icon`      | `union`<br/>Possible values:<br/>`, ReactElement, string` |    -     | A `ReactNode` or `string` that display a custom SVG |         | Icon that is displayed within the component, you must supply a child icon with with this prop or the `svg` prop |
-| `hasBorder` | `boolean`                                                 |          | `true`, `false`                                     | `false` | Specifies whether the element displays a border                                                                 |
+| Props       | Type                                                      | Required | Values                                              | Default | Description                                     |
+| ----------- | --------------------------------------------------------- | :------: | --------------------------------------------------- | ------- | ----------------------------------------------- |
+| `size`      | `string`                                                  |          | '10', '20', '30', '40'                              | '20'    | Specifies the icon size                         |
+| `icon`      | `union`<br/>Possible values:<br/>`, ReactElement, string` |    -     | A `ReactNode` or `string` that display a custom SVG |         | Icon displayed as a child of this component     |
+| `hasBorder` | `boolean`                                                 |          | `true`, `false`                                     | `false` | Specifies whether the element displays a border |
 
 ### Where to use
 

diff --git a/packages/components/icons/src/custom-icon/custom-icon.styles.ts b/packages/components/icons/src/custom-icon/custom-icon.styles.ts
@@ -1,9 +1,14 @@
-// use negative margin to make it so that border doesnt shift content?
 import { designTokens } from '@commercetools-uikit/design-system';
 import { css } from '@emotion/react';
-import { sizeMap } from '../leading-icon/leading-icon.styles';
 import { type TCustomIconProps } from './custom-icon';
 
+const sizeMap = {
+  10: designTokens.spacing50,
+  20: `calc(${designTokens.spacing50} + ${designTokens.spacing20})`,
+  30: designTokens.spacing60,
+  40: designTokens.spacing70,
+};
+
 export const getCustomIconStyles = (props: TCustomIconProps) => {
   const sizeStyles = {
     height: sizeMap[props.size!],

diff --git a/packages/components/icons/src/custom-icon/custom-icon.tsx b/packages/components/icons/src/custom-icon/custom-icon.tsx
@@ -2,7 +2,6 @@ import { type ReactElement, cloneElement } from 'react';
 import {
   filterAriaAttributes,
   filterDataAttributes,
-  warning,
 } from '@commercetools-uikit/utils';
 import InlineSvg from '../inline-svg/inline-svg';
 import { getCustomIconStyles } from './custom-icon.styles';
@@ -27,30 +26,20 @@ const defaultProps: Required<Pick<TCustomIconProps, 'size' | 'hasBorder'>> = {
   hasBorder: true,
 };
 
-const CustomIcon = (props: TCustomIconProps) => {
-  if (!props.icon) {
-    warning(
-      false,
-      'CustomIcon: you must pass an SVG as either a react component or string to the CustomIcon component'
-    );
-    return null;
-  }
-
-  return (
-    <div
-      role="img"
-      css={getCustomIconStyles(props)}
-      {...filterDataAttributes(props)}
-      {...filterAriaAttributes(props)}
-    >
-      {typeof props.icon === 'string' ? (
-        <InlineSvg data={props.icon} size={'scale'} />
-      ) : (
-        cloneElement(props.icon)
-      )}
-    </div>
-  );
-};
+const CustomIcon = (props: TCustomIconProps) => (
+  <div
+    role="img"
+    css={getCustomIconStyles(props)}
+    {...filterDataAttributes(props)}
+    {...filterAriaAttributes(props)}
+  >
+    {typeof props.icon === 'string' ? (
+      <InlineSvg data={props.icon} size={'scale'} />
+    ) : (
+      cloneElement(props.icon)
+    )}
+  </div>
+);
 
 CustomIcon.displayName = 'CustomIcon';
 CustomIcon.defaultProps = defaultProps;

diff --git a/packages/components/icons/src/fixtures/CustomIconReact.tsx b/packages/components/icons/src/fixtures/CustomIconReact.tsx
@@ -1,8 +1,6 @@
 const SvgCustomIcon = () => (
   <svg
     xmlns="http://www.w3.org/2000/svg"
-    width={35}
-    height={35}
     fill="none"
     viewBox="0 0 35 35"
     role="img"

diff --git a/packages/components/icons/src/leading-icon/leading-icon.styles.ts b/packages/components/icons/src/leading-icon/leading-icon.styles.ts
@@ -8,7 +8,7 @@ type TColorThemeConfiguration = {
   border?: string;
 };
 
-export const sizeMap = {
+const sizeMap = {
   10: designTokens.spacing50,
   20: `calc(${designTokens.spacing50} + ${designTokens.spacing20})`,
   30: designTokens.spacing60,