diff --git a/package.json b/package.json index 2943cc7ca..699015d7e 100644 --- a/package.json +++ b/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", diff --git a/src/components/Link/Link.tsx b/src/components/Link/Link.tsx index 1f5352789..34f167f3a 100644 --- a/src/components/Link/Link.tsx +++ b/src/components/Link/Link.tsx @@ -5,7 +5,7 @@ import classnames from 'classnames'; export const baseClassName = 'fi-link'; export interface LinkProps extends HtmlAProps { - /** Link url */ + /** Link url. Link is not focusable without the href */ href: string; /** Custom classname to extend or customize */ className?: string; diff --git a/src/core/Heading/Heading.md b/src/core/Heading/Heading.md index ff1edd073..378a1815c 100644 --- a/src/core/Heading/Heading.md +++ b/src/core/Heading/Heading.md @@ -4,6 +4,7 @@ import { Heading } from 'suomifi-ui-components'; <> h1 text h2 text + h3 as h2 text h3 text h4 text h5 text diff --git a/src/core/Heading/Heading.test.tsx b/src/core/Heading/Heading.test.tsx index 02d17c3be..87d5a8058 100644 --- a/src/core/Heading/Heading.test.tsx +++ b/src/core/Heading/Heading.test.tsx @@ -9,6 +9,7 @@ const TestHeadings = ( Test Heading Test Heading Test Heading + h3 as h2 text Test Heading Test Heading Test Heading diff --git a/src/core/Heading/Heading.tsx b/src/core/Heading/Heading.tsx index 4405c811a..ab0b1d3c6 100644 --- a/src/core/Heading/Heading.tsx +++ b/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) => ( ), )` diff --git a/src/core/Heading/__snapshots__/Heading.test.tsx.snap b/src/core/Heading/__snapshots__/Heading.test.tsx.snap index 543dc843a..c49893b33 100644 --- a/src/core/Heading/__snapshots__/Heading.test.tsx.snap +++ b/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 +

+ h3 as h2 text +

diff --git a/src/core/Icon/Icon.tsx b/src/core/Icon/Icon.tsx index 0d34a8ab1..e5c27c243 100644 --- a/src/core/Icon/Icon.tsx +++ b/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 { +export interface IconProps extends Omit, ThemeComponent { /** Icon-name from suomifi-icons */ icon?: IconKeys | StaticIconKeys; /** Image file */ diff --git a/src/core/Link/Link.tsx b/src/core/Link/Link.tsx index c734dd6bd..e7539cb08 100644 --- a/src/core/Link/Link.tsx +++ b/src/core/Link/Link.tsx @@ -6,6 +6,7 @@ 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 }; @@ -13,10 +14,12 @@ export { LinkExternal, LinkExternalProps }; type LinkVariant = 'default' | 'external'; export interface LinkProps extends CompLinkProps, ThemeComponent { variant?: LinkVariant; + asProp?: asPropType; } -const StyledLink = styled(({ theme, ...passProps }: LinkProps) => ( - +const StyledLink = styled(({ theme, asProp, ...passProps }: LinkProps) => ( + // as-property is defined internally as asProp and need to be implemented back if used + ))` ${props => baseStyles(props)}; `; diff --git a/src/core/Link/LinkExternal.tsx b/src/core/Link/LinkExternal.tsx index 474446809..7a7cfafda 100644 --- a/src/core/Link/LinkExternal.tsx +++ b/src/core/Link/LinkExternal.tsx @@ -30,7 +30,7 @@ const StyledLinkExternal = styled( theme, ...passProps }: Omit) => ( - + ), )` ${props => externalStyles(props)}; diff --git a/src/core/Link/__snapshots__/LinkExternal.test.tsx.snap b/src/core/Link/__snapshots__/LinkExternal.test.tsx.snap index 9aac041db..231253b1f 100644 --- a/src/core/Link/__snapshots__/LinkExternal.test.tsx.snap +++ b/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 } ({ - theme = suomifiTheme, + theme, + as, ...props -}: Partial): T => +}: Partial & { as?: asPropType }): T => ({ ...props, - theme, + ...(!!as ? { asProp: as } : {}), + theme: !!theme ? theme : suomifiTheme, } as T); diff --git a/src/reset/HtmlA/HtmlA.tsx b/src/reset/HtmlA/HtmlA.tsx index 7874b2a4f..298d1781b 100644 --- a/src/reset/HtmlA/HtmlA.tsx +++ b/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, 'ref' | 'as'> { children: ReactNode; - as?: keyof JSX.IntrinsicElements | React.ComponentType; + as?: asPropType; } const aResets = css` diff --git a/src/reset/HtmlButton/HtmlButton.tsx b/src/reset/HtmlButton/HtmlButton.tsx index b47862765..ec96b1ae9 100644 --- a/src/reset/HtmlButton/HtmlButton.tsx +++ b/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, 'ref' | 'as'> { - as?: keyof JSX.IntrinsicElements | React.ComponentType; + as?: asPropType; /** * HTML Button type (button, submit, reset) * @default button diff --git a/src/reset/HtmlDiv/HtmlDiv.tsx b/src/reset/HtmlDiv/HtmlDiv.tsx index a0be04db2..38c2a7158 100644 --- a/src/reset/HtmlDiv/HtmlDiv.tsx +++ b/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, 'ref' | 'as'> { - as?: keyof JSX.IntrinsicElements | React.ComponentType; + as?: asPropType; } const divResets = css` diff --git a/src/reset/HtmlH/HtmlH.tsx b/src/reset/HtmlH/HtmlH.tsx index c645e759b..69ae6048f 100644 --- a/src/reset/HtmlH/HtmlH.tsx +++ b/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, 'ref' | 'as'> { - as?: keyof JSX.IntrinsicElements | React.ComponentType; + as?: asPropType; } const hResets = css` diff --git a/src/reset/HtmlInput/HtmlInput.tsx b/src/reset/HtmlInput/HtmlInput.tsx index bd5b60200..f773f9b6d 100644 --- a/src/reset/HtmlInput/HtmlInput.tsx +++ b/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, 'ref' | 'as'> { - as?: keyof JSX.IntrinsicElements | React.ComponentType; + as?: asPropType; /** * HTML Input type * @default text diff --git a/src/reset/HtmlLabel/HtmlLabel.tsx b/src/reset/HtmlLabel/HtmlLabel.tsx index 2fdd805ec..1a54fab4d 100644 --- a/src/reset/HtmlLabel/HtmlLabel.tsx +++ b/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, 'ref' | 'as'> { - as?: keyof JSX.IntrinsicElements | React.ComponentType; + as?: asPropType; /** * HTML Label for ID-name of the element */ diff --git a/src/reset/HtmlLi/HtmlLi.tsx b/src/reset/HtmlLi/HtmlLi.tsx index 0b1dbc90c..c7a956590 100644 --- a/src/reset/HtmlLi/HtmlLi.tsx +++ b/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, 'as'> { - as?: keyof JSX.IntrinsicElements | React.ComponentType; + as?: asPropType; } const liResets = css` diff --git a/src/reset/HtmlNav/HtmlNav.tsx b/src/reset/HtmlNav/HtmlNav.tsx index 0edb4c759..98abf9512 100644 --- a/src/reset/HtmlNav/HtmlNav.tsx +++ b/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, 'ref' | 'as'> { - as?: keyof JSX.IntrinsicElements | React.ComponentType; + as?: asPropType; } const aResets = css` diff --git a/src/reset/HtmlOl/HtmlOl.tsx b/src/reset/HtmlOl/HtmlOl.tsx index 22acaf493..303179812 100644 --- a/src/reset/HtmlOl/HtmlOl.tsx +++ b/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, 'type' | 'as'> { - as?: keyof JSX.IntrinsicElements | React.ComponentType; + as?: asPropType; } const olResets = css` diff --git a/src/reset/HtmlP/HtmlP.tsx b/src/reset/HtmlP/HtmlP.tsx index 63d31e71b..d5ccf9437 100644 --- a/src/reset/HtmlP/HtmlP.tsx +++ b/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, 'ref' | 'as'> { - as?: keyof JSX.IntrinsicElements | React.ComponentType; + as?: asPropType; } const spanResets = css` diff --git a/src/reset/HtmlSpan/HtmlSpan.tsx b/src/reset/HtmlSpan/HtmlSpan.tsx index bcd05a174..fd2ed60cc 100644 --- a/src/reset/HtmlSpan/HtmlSpan.tsx +++ b/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, 'ref' | 'as'> { - as?: keyof JSX.IntrinsicElements | React.ComponentType; + as?: asPropType; } const spanResets = css` diff --git a/src/utils/typescript.ts b/src/utils/typescript.ts index 7f58f2a57..93b9a1eeb 100644 --- a/src/utils/typescript.ts +++ b/src/utils/typescript.ts @@ -5,3 +5,6 @@ export type classnamesValue = string | { [key: string]: string | boolean }; export function objValue(obj: T, key: K) { return obj[key]; } + +// From styled-components, does not export from there +export type asPropType = keyof JSX.IntrinsicElements | React.ComponentType;