Merge pull request #358 from ZEISS/bugfix/357-iconlink-color-style

Bugfix/357 Fix `IconLink` without label color style

CHANGELOG.md

@@ -3,6 +3,7 @@
 ## 2.1.4
 
 - Updated `Highlight` component to have optional highlight prop (#280)
+- Fix `IconLink` without label color style (#357)
 
 ## 2.1.3
 

README.md

@@ -12,7 +12,7 @@ A complete opinionated React component library with minimal dependencies powered
 
 The UI component library contains both, very low-level design elements as well as combined high-level design elements. In general, the intention of the library is to simplify development by exposing components that satisfy design specifications and provide ease of programming. Repeatable UI designs should therefore only take minutes instead of hours.
 
-See [https://precise-ui.io](https://precise-ui.io) for our kitchen sink (i.e., demo page illustrating all the components incl. their documentation).
+See [https://precise-ui.io](https://www.precise-ui.io) for our kitchen sink (i.e., demo page illustrating all the components incl. their documentation).
 
 ## Getting Started
 
@@ -50,7 +50,7 @@ import { TextField } from 'precise-ui';
 <TextField label="Label" />
 ```
 
-You can see a list of all available components on our [website](https://precise-ui.io/).
+You can see a list of all available components on our [website](https://www.precise-ui.io/).
 
 ## Contributing
 

src/components/IconLink/Example.md

@@ -25,3 +25,11 @@ const { IconLink } = require('precise-ui');
   This link is <IconLink block icon="Cached">Refresh</IconLink> displayed as a block and this is <IconLink disabled icon="VisibilityOff">disabled</IconLink>
 </div>
 ```
+
+`IconLink` can be also displayed as an interactive component.
+
+```jsx
+const { IconLink } = require('precise-ui');
+
+<IconLink icon="Add" href="#🎩"  isInteractiveIcon={true}/>
+```

src/components/IconLink/index.tsx

@@ -15,6 +15,13 @@ export interface IconLinkProps extends AnchorProps {
    * The name of the icon to display.
    */
   icon: IconName;
+  /**
+   * Controls the icon's color style.
+   *  If `true`, the icon will be colored with the theme's `ui0` color.
+   *  Otherwise, it will be colored in `ui0` only if the `IconLink` has children.
+   *  If set to `false` and the `IconLink` has no children, the icon will be colored in `ui5`.
+   */
+  isInteractiveIcon?: boolean;
 }
 
 export interface StyledAnchorProps {
@@ -70,11 +77,25 @@ const AnchorText = styled.span`
 /**
  * The icon link component shows an icon with optional text.
  */
-export const IconLink: React.SFC<IconLinkProps> = ({ icon, theme, disabled, children, block, ...other }) => {
+export const IconLink: React.SFC<IconLinkProps> = ({
+  icon,
+  theme,
+  disabled,
+  children,
+  block,
+  isInteractiveIcon,
+  ...other
+}) => {
   return (
     <StyledAnchor disabled={disabled} display={block ? 'block' : 'inline-block'} {...other}>
       {icon && (
-        <StyledIcon disabled={disabled} iconOnly={children ? false : true} name={icon} theme={theme} size={'22px'} />
+        <StyledIcon
+          disabled={disabled}
+          iconOnly={isInteractiveIcon ? false : !children}
+          name={icon}
+          theme={theme}
+          size={'22px'}
+        />
       )}
       {children && <AnchorText>{children}</AnchorText>}
     </StyledAnchor>