Merge branch 'develop' into bugfix/desc-for-a-without-href-not-focusable

package.json

@@ -1,6 +1,6 @@
 {
   "name": "suomifi-ui-components",
-  "version": "0.2.4",
+  "version": "0.2.5",
   "description": "Suomi.fi UI component library",
   "main": "dist/umd/index.js",
   "module": "dist/esm/index.js",

src/core/Heading/Heading.md

@@ -4,6 +4,7 @@ import { Heading } from 'suomifi-ui-components';
 <>
   <Heading.h1>h1 text</Heading.h1>
   <Heading.h2>h2 text</Heading.h2>
+  <Heading.h3 as="h2">h3 as h2 text</Heading.h3>
   <Heading.h3>h3 text</Heading.h3>
   <Heading.h4>h4 text</Heading.h4>
   <Heading.h5>h5 text</Heading.h5>

src/core/Heading/Heading.test.tsx

@@ -9,6 +9,7 @@ const TestHeadings = (
     <Heading.h1hero>Test Heading</Heading.h1hero>
     <Heading.h1>Test Heading</Heading.h1>
     <Heading.h2>Test Heading</Heading.h2>
+    <Heading.h3 as="h2">h3 as h2 text</Heading.h3>
     <Heading.h3>Test Heading</Heading.h3>
     <Heading.h4>Test Heading</Heading.h4>
     <Heading.h5>Test Heading</Heading.h5>

src/core/Heading/Heading.tsx

@@ -9,7 +9,7 @@ import {
 } from '../../components/Heading/Heading';
 import { baseStyles } from './Heading.baseStyles';
 import classnames from 'classnames';
-import { Omit } from '../../utils/typescript';
+import { Omit, asPropType } from '../../utils/typescript';
 import { logger } from '../../utils/logger';
 
 const baseClassName = 'fi-heading';
@@ -27,6 +27,7 @@ export interface HeadingProps
   smallScreen?: boolean;
   /** Change font to smaller screen size and style */
   color?: ColorProp;
+  asProp?: asPropType;
 }
 
 const StyledHeading = styled(
@@ -36,6 +37,7 @@ const StyledHeading = styled(
     smallScreen,
     className,
     variant,
+    asProp, // as-property is defined internally as asProp and need to be implemented back if used
     ...passProps
   }: HeadingProps) => (
     <CompHeading
@@ -44,6 +46,7 @@ const StyledHeading = styled(
         [smallScreenClassName]: smallScreen,
       })}
       variant={variant === 'h1hero' ? 'h1' : variant}
+      as={asProp}
     />
   ),
 )`

src/core/Heading/__snapshots__/Heading.test.tsx.snap

@@ -301,6 +301,11 @@ exports[`calling render with the same component on the same container does not r
   >
     Test Heading
   </h2>
+  <h2
+    class="fi-heading c0 fi-heading--h3 c1"
+  >
+    h3 as h2 text
+  </h2>
   <h3
     class="fi-heading c0 fi-heading--h3 c1"
   >

src/core/Icon/Icon.tsx

@@ -1,6 +1,7 @@
 import React, { Component } from 'react';
 import { default as styled } from 'styled-components';
 import { iconBaseStyles } from './Icon.baseStyles';
+import { ThemeComponent } from '../theme';
 import { withDefaultTheme } from '../theme/utils';
 import {
   ariaLabelOrHidden,
@@ -20,7 +21,7 @@ import {
 export { IconKeys, StaticIconKeys } from 'suomifi-icons';
 import { logger } from '../../utils/logger';
 
-export interface IconProps extends Omit<CompIconProps, 'src'> {
+export interface IconProps extends Omit<CompIconProps, 'src'>, ThemeComponent {
   /** Icon-name from suomifi-icons */
   icon?: IconKeys | StaticIconKeys;
   /** Image file */

src/core/Link/Link.tsx

@@ -6,17 +6,20 @@ import {
   Link as CompLink,
   LinkProps as CompLinkProps,
 } from '../../components/Link/Link';
+import { asPropType } from '../../utils/typescript';
 import { LinkExternal, LinkExternalProps } from './LinkExternal';
 import { baseStyles } from './Link.baseStyles';
 export { LinkExternal, LinkExternalProps };
 
 type LinkVariant = 'default' | 'external';
 export interface LinkProps extends CompLinkProps, ThemeComponent {
   variant?: LinkVariant;
+  asProp?: asPropType;
 }
 
-const StyledLink = styled(({ theme, ...passProps }: LinkProps) => (
-  <CompLink {...passProps} />
+const StyledLink = styled(({ theme, asProp, ...passProps }: LinkProps) => (
+  // as-property is defined internally as asProp and need to be implemented back if used
+  <CompLink {...passProps} as={asProp} />
 ))`
   ${props => baseStyles(props)};
 `;

src/core/Link/LinkExternal.tsx

@@ -30,7 +30,7 @@ const StyledLinkExternal = styled(
     theme,
     ...passProps
   }: Omit<LinkExternalProps, 'labelNewWindow' | 'hideIcon'>) => (
-    <Link {...passProps} as={CompLinkExternal} />
+    <Link {...passProps} asProp={CompLinkExternal} />
   ),
 )`
   ${props => externalStyles(props)};

src/core/Link/__snapshots__/LinkExternal.test.tsx.snap

@@ -146,7 +146,7 @@ exports[`calling render with the same component on the same container does not r
 }
 
 <a
-  class="c0 c1 fi-link--external c2"
+  class="c0 c1 fi-link c2 fi-link--external sc-bdVaJa c2"
   data-testid="test-link"
   href="/"
   rel="noopener"

src/core/theme/utils/defaultTheme.ts

@@ -1,12 +1,21 @@
 import { suomifiTheme, ThemeProp } from '../';
+import { asPropType } from '../../../utils/typescript';
 
+/**
+ * Do defaults for component props
+ * Add default theme if theme not defined,
+ * Remove as-prop and change it to asProp if defined
+ * @param props Component props
+ */
 export const withDefaultTheme = <
-  T extends { theme: ThemeProp; [k: string]: any }
+  T extends { theme: ThemeProp; asProp?: asPropType }
 >({
-  theme = suomifiTheme,
+  theme,
+  as,
   ...props
-}: Partial<T>): T =>
+}: Partial<T> & { as?: asPropType }): T =>
   ({
     ...props,
-    theme,
+    ...(!!as ? { asProp: as } : {}),
+    theme: !!theme ? theme : suomifiTheme,
   } as T);

src/reset/HtmlA/HtmlA.tsx

@@ -2,12 +2,12 @@ import React, { ReactNode, HTMLProps } from 'react';
 import { default as styled, css } from 'styled-components';
 import { resets } from '../utils';
 import { allStates } from '../../utils/css/pseudo';
-import { Omit } from '../../utils/typescript';
+import { Omit, asPropType } from '../../utils/typescript';
 
 export interface HtmlAProps
   extends Omit<HTMLProps<HTMLAnchorElement>, 'ref' | 'as'> {
   children: ReactNode;
-  as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
+  as?: asPropType;
 }
 
 const aResets = css`

src/reset/HtmlButton/HtmlButton.tsx

@@ -1,11 +1,11 @@
 import React, { HTMLProps, ButtonHTMLAttributes } from 'react';
 import { default as styled, css } from 'styled-components';
 import { resets, resetWithSelectors } from '../utils';
-import { Omit } from '../../utils/typescript';
+import { Omit, asPropType } from '../../utils/typescript';
 
 export interface HtmlButtonProps
   extends Omit<HTMLProps<HTMLButtonElement>, 'ref' | 'as'> {
-  as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
+  as?: asPropType;
   /**
    * HTML Button type (button, submit, reset)
    * @default button

src/reset/HtmlDiv/HtmlDiv.tsx

@@ -1,11 +1,11 @@
 import React, { HTMLProps } from 'react';
 import { default as styled, css } from 'styled-components';
 import { resets } from '../utils';
-import { Omit } from '../../utils/typescript';
+import { Omit, asPropType } from '../../utils/typescript';
 
 export interface HtmlDivProps
   extends Omit<HTMLProps<HTMLDivElement>, 'ref' | 'as'> {
-  as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
+  as?: asPropType;
 }
 
 const divResets = css`

src/reset/HtmlH/HtmlH.tsx

@@ -1,13 +1,13 @@
 import { HTMLProps } from 'react';
 import { default as styled, css } from 'styled-components';
 import { resets } from '../utils';
-import { Omit } from '../../utils/typescript';
+import { Omit, asPropType } from '../../utils/typescript';
 
 export type hLevels = 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
 
 export interface HtmlHProps
   extends Omit<HTMLProps<HTMLHeadingElement>, 'ref' | 'as'> {
-  as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
+  as?: asPropType;
 }
 
 const hResets = css`

src/reset/HtmlInput/HtmlInput.tsx

@@ -1,10 +1,10 @@
 import React, { HTMLProps } from 'react';
 import { default as styled, css } from 'styled-components';
 import { resets, resetWithSelectors } from '../utils';
-import { Omit } from '../../utils/typescript';
+import { Omit, asPropType } from '../../utils/typescript';
 export interface HtmlInputProps
   extends Omit<HTMLProps<HTMLInputElement>, 'ref' | 'as'> {
-  as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
+  as?: asPropType;
   /**
    * HTML Input type
    * @default text

src/reset/HtmlLabel/HtmlLabel.tsx

@@ -1,14 +1,14 @@
 import React, { HTMLProps } from 'react';
 import { default as styled, css } from 'styled-components';
 import { resets } from '../utils';
-import { Omit } from '../../utils/typescript';
+import { Omit, asPropType } from '../../utils/typescript';
 
 /* Only style reseted label-element, no need to check accessibility here */
 /* eslint-disable jsx-a11y/label-has-associated-control */
 
 export interface HtmlLabelProps
   extends Omit<HTMLProps<HTMLLabelElement>, 'ref' | 'as'> {
-  as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
+  as?: asPropType;
   /**
    * HTML Label for ID-name of the element
    */

src/reset/HtmlLi/HtmlLi.tsx

@@ -1,10 +1,10 @@
 import React, { HTMLProps } from 'react';
 import { default as styled, css } from 'styled-components';
 import { resets } from '../utils';
-import { Omit } from '../../utils/typescript';
+import { Omit, asPropType } from '../../utils/typescript';
 
 export interface HtmlLiProps extends Omit<HTMLProps<HTMLLIElement>, 'as'> {
-  as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
+  as?: asPropType;
 }
 
 const liResets = css`

src/reset/HtmlNav/HtmlNav.tsx

@@ -1,11 +1,11 @@
 import React, { HTMLProps } from 'react';
 import { default as styled, css } from 'styled-components';
 import { resets } from '../utils';
-import { Omit } from '../../utils/typescript';
+import { Omit, asPropType } from '../../utils/typescript';
 
 export interface HtmlNavProps
   extends Omit<HTMLProps<HTMLElement>, 'ref' | 'as'> {
-  as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
+  as?: asPropType;
 }
 
 const aResets = css`

src/reset/HtmlOl/HtmlOl.tsx

@@ -1,11 +1,11 @@
 import React, { HTMLProps } from 'react';
 import { default as styled, css } from 'styled-components';
 import { resets } from '../utils';
-import { Omit } from '../../utils/typescript';
+import { Omit, asPropType } from '../../utils/typescript';
 
 export interface HtmlOlProps
   extends Omit<HTMLProps<HTMLOListElement>, 'type' | 'as'> {
-  as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
+  as?: asPropType;
 }
 
 const olResets = css`

src/reset/HtmlP/HtmlP.tsx

@@ -1,11 +1,11 @@
 import React, { HTMLProps } from 'react';
 import { default as styled, css } from 'styled-components';
 import { resets } from '../utils';
-import { Omit } from '../../utils/typescript';
+import { Omit, asPropType } from '../../utils/typescript';
 
 export interface HtmlPProps
   extends Omit<HTMLProps<HTMLParagraphElement>, 'ref' | 'as'> {
-  as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
+  as?: asPropType;
 }
 
 const spanResets = css`

src/reset/HtmlSpan/HtmlSpan.tsx

@@ -1,11 +1,11 @@
 import React, { HTMLProps } from 'react';
 import { default as styled, css } from 'styled-components';
 import { resets } from '../utils';
-import { Omit } from '../../utils/typescript';
+import { Omit, asPropType } from '../../utils/typescript';
 
 export interface HtmlSpanProps
   extends Omit<HTMLProps<HTMLSpanElement>, 'ref' | 'as'> {
-  as?: keyof JSX.IntrinsicElements | React.ComponentType<any>;
+  as?: asPropType;
 }
 
 const spanResets = css`

src/utils/typescript.ts

@@ -5,3 +5,6 @@ export type classnamesValue = string | { [key: string]: string | boolean };
 export function objValue<T, K extends keyof T>(obj: T, key: K) {
   return obj[key];
 }
+
+// From styled-components, does not export from there
+export type asPropType = keyof JSX.IntrinsicElements | React.ComponentType<any>;