@dnanpm/styleguide 1.9.0 → 2.1.0

package/build/es/components/AmountSelector/AmountSelector.js

@@ -2,16 +2,18 @@ import React from 'react';
 import styled from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
 import { getMultipliedSize } from '../../utils/styledUtils.js';
-import '../Buttons/ButtonBasicStyles.js';
-import '../PixelLoader/PixelLoaderStyles.js';
-import '../Buttons/ButtonPrimaryStyles.js';
+import '../Buttons/ButtonDefault.js';
+import '../Buttons/ButtonPrimary.js';
 import ButtonSecondary from '../Buttons/ButtonSecondary.js';
-import '../Buttons/ButtonTertiaryStyles.js';
+import '../Buttons/ButtonTertiary.js';
 import '../Buttons/ButtonRoundStyles.js';
 import '../Buttons/CloseButton.js';
-import '../Buttons/ButtonIconStyles.js';
 import Icon from '../Icon/Icon.js';
+import '../Buttons/ButtonIconStyles.js';
 import '../Buttons/ButtonIconPrimaryStyles.js';
+import hlMinus from '../Icons/hlMinus.js';
+import hlPlus from '../Icons/hlPlus.js';
+import hlTrash from '../Icons/hlTrash.js';
 
 const Container = styled.div `
     display: flex;
@@ -19,6 +21,8 @@ const Container = styled.div `
 
     input {
         width: ${getMultipliedSize(theme.base.baseWidth, 4)};
+        font-family: ${props => props.theme.fontFamily.default};
+        font-size: ${props => props.theme.fontSize.default};
         border: 0 none;
         text-align: center;
         outline: none;
@@ -32,6 +36,9 @@ const Container = styled.div `
 `;
 const StyledButtonSecondary = styled(ButtonSecondary) `
     min-width: ${getMultipliedSize(theme.base.baseWidth, 4)};
+    width: ${getMultipliedSize(theme.base.baseWidth, 4)};
+    height: ${getMultipliedSize(theme.base.baseHeight, 4)};
+    padding: ${getMultipliedSize(theme.base.baseWidth, 0.6)};
 `;
 /** @visibleName Amount Selector */
 const AmountSelector = ({ onChange, value = 1, step = 1, min = 1, max, disabled = false, readonly = true, 'data-testid': dataTestId, ...props }) => {
@@ -65,12 +72,12 @@ const AmountSelector = ({ onChange, value = 1, step = 1, min = 1, max, disabled
         }
     };
     return (React.createElement(Container, { disabled: disabled, "data-testid": dataTestId, className: props.className },
-        React.createElement(StyledButtonSecondary, { disabled: disabled, onClick: decrease, "data-testid": dataTestId &&
+        React.createElement(StyledButtonSecondary, { disabled: disabled, onClick: decrease, type: "button", "data-testid": dataTestId &&
                 `${dataTestId}${props.removable && isMinReached(value - step) ? '-remove' : '-decrease'}` },
-            React.createElement(Icon, { color: theme.color.black, name: props.removable && isMinReached(value - step) ? 'hlTrash' : 'hlMinus' })),
+            React.createElement(Icon, { icon: props.removable && isMinReached(value - step) ? hlTrash : hlMinus, color: theme.color.black })),
         React.createElement("input", { id: props.id, name: props.name, type: "number", onChange: handleChange, value: value, readOnly: readonly || disabled, disabled: disabled }),
-        React.createElement(StyledButtonSecondary, { disabled: disabled, onClick: increase, "data-testid": dataTestId ? `${dataTestId}-increase` : undefined },
-            React.createElement(Icon, { color: theme.color.black, name: "hlPlus" }))));
+        React.createElement(StyledButtonSecondary, { disabled: disabled, onClick: increase, "data-testid": dataTestId ? `${dataTestId}-increase` : undefined, type: "button" },
+            React.createElement(Icon, { icon: hlPlus, color: theme.color.black }))));
 };
 
 export default AmountSelector;

package/build/es/components/Buttons/ButtonBasicStyles.d.ts

@@ -18,12 +18,7 @@ declare const ButtonBasicStyle: import("styled-components").StyledComponent<"but
     };
     breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
     button: {
-        buttonBorderWidth: string;
-        buttonPadding: string;
-        smallButtonPadding: string;
-        buttonLineHeight: string;
-        buttonWidth: string;
-        buttonSmallWidth: string;
+        border: string;
     };
     color: {
         black: string;
@@ -54,22 +49,27 @@ declare const ButtonBasicStyle: import("styled-components").StyledComponent<"but
         gray5: string;
     };
     fontFamily: {
-        baseFontFamily: string;
+        default: string;
+        heading: string;
+        numerals: string;
     };
     fontSize: {
-        defaultFontSize: string;
-        smallFontSize: string;
-        extraSmallFontSize: string;
-        xsFontSize: string;
-        xxsFontSize: string;
-        h1FontSize: string;
-        h2FontSize: string;
-        h2MobileFontSize: string;
-        h3FontSize: string;
-        h4FontSize: string;
-        h5FontSize: string;
-        heroBannerTitleFontSize: string;
-        heroBannerTitleMobileFontSize: string;
+        default: string;
+        xl: string;
+        l: string;
+        s: string;
+        xs: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
     };
     fontWeight: {
         book: number;
@@ -85,16 +85,23 @@ declare const ButtonBasicStyle: import("styled-components").StyledComponent<"but
         gutter: string;
     };
     lineHeight: {
-        defaultLineHeight: string;
-        paragraphLineHeight: string;
-        heroBannerLineHeight: string;
-        heroBannerMobileLineHeight: string;
-        h1LineHeight: string;
-        h2LineHeight: string;
-        h2MobileLineHeight: string;
-        h3LineHeight: string;
-        h4LineHeight: string;
-        h5LineHeight: string;
+        default: string;
+        xl: string;
+        s: string;
+        xs: string;
+        xxs: string;
+        auto: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
     };
     media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
 }, ButtonProps, never>;

package/build/es/components/Buttons/ButtonBasicStyles.js

@@ -1,28 +1,26 @@
 import styled from '../../themes/styled.js';
+import { getMultipliedSize } from '../../utils/styledUtils.js';
 
 const ButtonBasicStyle = styled.button `
     position: relative;
-    padding: ${props => props && props.small
-    ? props.theme.button.smallButtonPadding
-    : props.theme.button.buttonPadding};
+    padding: ${props => `${getMultipliedSize(props.theme.base.baseWidth, 0.8)}
+        ${getMultipliedSize(props.theme.base.baseWidth, 1)}`};
     text-decoration: none;
     display: inline-block;
     border-style: solid;
-    border-width: ${props => props.theme.button.buttonBorderWidth};
+    border-width: ${props => props.theme.button.border};
     border-color: ${props => props && props.darkBg ? props.theme.color.white : props.theme.color.black};
     box-sizing: border-box;
     background-color: transparent;
     color: ${props => (props && props.darkBg ? props.theme.color.white : props.theme.color.black)};
-    font-family: ${props => props.theme.fontFamily.baseFontFamily};
+    font-family: ${props => props.theme.fontFamily.default};
     font-weight: ${props => props.theme.fontWeight.bold};
-    line-height: ${props => props.theme.button.buttonLineHeight};
-    font-size: ${props => props.theme.fontSize.defaultFontSize};
+    font-size: ${props => props && props.small ? props.theme.fontSize.s : props.theme.fontSize.default};
+    line-height: ${props => props && props.small ? props.theme.lineHeight.s : props.theme.lineHeight.default};
     outline: none;
     text-align: center;
     vertical-align: middle;
-    min-width: ${props => props && props.small
-    ? props.theme.button.buttonSmallWidth
-    : props.theme.button.buttonWidth};
+    min-width: ${props => getMultipliedSize(props.theme.base.baseWidth, props && props.small ? 10.5 : 12.5)};
     width: ${props => (props && props.fullWidth ? '100%' : 'auto')};
     cursor: pointer;
     max-width: 100%;
@@ -31,15 +29,15 @@ const ButtonBasicStyle = styled.button `
     &:focus {
         outline: none;
         color: ${props => props && props.darkBg ? props.theme.color.white : props.theme.color.black};
-        span {
-            border-bottom: ${props => `${props.theme.button.buttonBorderWidth} solid`};
+        span:not(span.dnasg-icon) {
+            border-bottom: ${props => `${props.theme.button.border} solid`};
         }
     }
     &:hover {
         background: ${props => props && props.darkBg ? props.theme.color.white : props.theme.color.black};
         color: ${props => props && props.darkBg ? props.theme.color.black : props.theme.color.white};
         text-decoration: none;
-        span {
+        span:not(span.dnasg-icon) {
             border-bottom: 0;
         }
     }
@@ -47,7 +45,7 @@ const ButtonBasicStyle = styled.button `
         opacity: 0.7;
         background: transparent;
         color: ${props => props && props.darkBg ? props.theme.color.white : props.theme.color.black};
-        span {
+        span:not(span.dnasg-icon) {
             border-bottom: 0;
         }
     }
@@ -60,11 +58,9 @@ const ButtonBasicStyle = styled.button `
         pointer-events: none;
     }
 
-    span {
+    span:not(span.dnasg-icon) {
         border-bottom: 0;
-        font-size: ${props => props && props.small
-    ? props.theme.fontSize.smallFontSize
-    : props.theme.fontSize.defaultFontSize};
+        font-size: ${props => props && props.small ? props.theme.fontSize.s : props.theme.fontSize.default};
     }
 `;
 

package/build/es/components/Buttons/ButtonDefault.js

@@ -1,8 +1,12 @@
 import React from 'react';
-import ButtonBasicStyle from './ButtonBasicStyles.js';
+import styled from '../../themes/styled.js';
 import { PixelLoader } from '../PixelLoader/PixelLoader.js';
+import ButtonBasicStyle from './ButtonBasicStyles.js';
 
 const noop = () => { }; // tslint:disable-line
+const StyledPixelLoader = styled(PixelLoader) `
+    display: inline-flex;
+`;
 /** @visibleName Buttons */
 const Button = (props) => {
     const { children, className, fullWidth, small, loading = false, darkBg, onClick, onMouseDown, disabled = false, 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue, type, } = props;
@@ -12,7 +16,7 @@ const Button = (props) => {
         // https://github.com/styled-components/styled-components/pull/2093
         loading: loading ? loading.toString() : undefined, darkBg: darkBg, disabled: disabled, onClick: !disabled || !loading ? onClick : noop, onMouseDown: (!disabled || !loading) && onMouseDown ? onMouseDown : noop, className: className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, type: type },
         !loading && (React.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, children)),
-        loading && React.createElement(PixelLoader, null)));
+        loading && React.createElement(StyledPixelLoader, null)));
 };
 
 export default Button;

package/build/es/components/Buttons/ButtonIcon.js

@@ -1,17 +1,24 @@
 import React from 'react';
-import ButtonIconStyles from './ButtonIconStyles.js';
 import Icon from '../Icon/Icon.js';
+import ButtonIconStyles from './ButtonIconStyles.js';
 
 const noop = () => { }; // tslint:disable-line
 /** @visibleName Icon Button */
 const ButtonIcon = (props) => {
     const { children, fullWidth, small, loading = false, darkBg, onClick, onMouseDown, disabled = false, className, icon, showTextMobile = true, 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue, type, } = props;
+    // TODO: Remove once https://jira.dna.fi/browse/STYLE-334 is done
+    const renderIcon = () => {
+        if (typeof icon === 'string') {
+            return (React.createElement(Icon, { name: icon, size: small ? '1.25rem' : '1.5rem', "data-testid": dataTestId && `${dataTestId}-icon`, "data-no-close": dataNoClose }));
+        }
+        return (React.createElement(Icon, { icon: icon, size: small ? '1.25rem' : '1.5rem', "data-testid": dataTestId && `${dataTestId}-icon`, "data-no-close": dataNoClose }));
+    };
     return (React.createElement(ButtonIconStyles, { fullWidth: fullWidth, small: small, 
         // There is an issue related to styled-components: react warning: Received `true` for a non-boolean attribute 'loading'.
         // If you want to write it to the DOM, pass a string instead: loading="true"
         // https://github.com/styled-components/styled-components/pull/2093
         darkBg: darkBg, disabled: disabled, onClick: !disabled || !loading ? onClick : noop, onMouseDown: (!disabled || !loading) && onMouseDown ? onMouseDown : noop, className: className, showTextMobile: showTextMobile, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, type: type }, !loading && (React.createElement(React.Fragment, null,
-        React.createElement(Icon, { name: icon, size: "100%", "data-testid": dataTestId && `${dataTestId}-icon`, "data-no-close": dataNoClose }),
+        renderIcon(),
         React.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, children)))));
 };
 

package/build/es/components/Buttons/ButtonIconPrimary.js

@@ -1,17 +1,24 @@
 import React from 'react';
-import ButtonIconPrimaryStyles from './ButtonIconPrimaryStyles.js';
 import Icon from '../Icon/Icon.js';
+import ButtonIconPrimaryStyles from './ButtonIconPrimaryStyles.js';
 
 const noop = () => { }; // tslint:disable-line
 /** @visibleName  Icon Button Primary */
 const ButtonIconPrimary = (props) => {
     const { children, fullWidth, small, loading = false, darkBg, onClick, onMouseDown, disabled = false, className, icon, showTextMobile = true, 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue, type, } = props;
+    // TODO: Remove once https://jira.dna.fi/browse/STYLE-334 is done
+    const renderIcon = () => {
+        if (typeof icon === 'string') {
+            return (React.createElement(Icon, { name: icon, size: small ? '1.25rem' : '1.5rem', "data-testid": dataTestId && `${dataTestId}-icon`, "data-no-close": dataNoClose }));
+        }
+        return (React.createElement(Icon, { icon: icon, size: small ? '1.25rem' : '1.5rem', "data-testid": dataTestId && `${dataTestId}-icon`, "data-no-close": dataNoClose }));
+    };
     return (React.createElement(ButtonIconPrimaryStyles, { fullWidth: fullWidth, small: small, 
         // There is an issue related to styled-components: react warning: Received `true` for a non-boolean attribute 'loading'.
         // If you want to write it to the DOM, pass a string instead: loading="true"
         // https://github.com/styled-components/styled-components/pull/2093
         darkBg: darkBg, disabled: disabled, onClick: !disabled || !loading ? onClick : noop, onMouseDown: (!disabled || !loading) && onMouseDown ? onMouseDown : noop, className: className, showTextMobile: showTextMobile, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, type: type }, !loading && (React.createElement(React.Fragment, null,
-        React.createElement(Icon, { name: icon, size: "100%", "data-testid": dataTestId && `${dataTestId}-icon`, "data-no-close": dataNoClose }),
+        renderIcon(),
         React.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, children)))));
 };
 

package/build/es/components/Buttons/ButtonIconPrimaryStyles.d.ts

@@ -11,12 +11,7 @@ declare const ButtonIconPrimaryStyles: import("styled-components").StyledCompone
     };
     breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
     button: {
-        buttonBorderWidth: string;
-        buttonPadding: string;
-        smallButtonPadding: string;
-        buttonLineHeight: string;
-        buttonWidth: string;
-        buttonSmallWidth: string;
+        border: string;
     };
     color: {
         black: string;
@@ -47,22 +42,27 @@ declare const ButtonIconPrimaryStyles: import("styled-components").StyledCompone
         gray5: string;
     };
     fontFamily: {
-        baseFontFamily: string;
+        default: string;
+        heading: string;
+        numerals: string;
     };
     fontSize: {
-        defaultFontSize: string;
-        smallFontSize: string;
-        extraSmallFontSize: string;
-        xsFontSize: string;
-        xxsFontSize: string;
-        h1FontSize: string;
-        h2FontSize: string;
-        h2MobileFontSize: string;
-        h3FontSize: string;
-        h4FontSize: string;
-        h5FontSize: string;
-        heroBannerTitleFontSize: string;
-        heroBannerTitleMobileFontSize: string;
+        default: string;
+        xl: string;
+        l: string;
+        s: string;
+        xs: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
     };
     fontWeight: {
         book: number;
@@ -78,16 +78,23 @@ declare const ButtonIconPrimaryStyles: import("styled-components").StyledCompone
         gutter: string;
     };
     lineHeight: {
-        defaultLineHeight: string;
-        paragraphLineHeight: string;
-        heroBannerLineHeight: string;
-        heroBannerMobileLineHeight: string;
-        h1LineHeight: string;
-        h2LineHeight: string;
-        h2MobileLineHeight: string;
-        h3LineHeight: string;
-        h4LineHeight: string;
-        h5LineHeight: string;
+        default: string;
+        xl: string;
+        s: string;
+        xs: string;
+        xxs: string;
+        auto: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
     };
     media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
 }, import("./ButtonBasicStyles").ButtonProps & {

package/build/es/components/Buttons/ButtonIconStyles.d.ts

@@ -11,12 +11,7 @@ declare const ButtonIconStyles: import("styled-components").StyledComponent<"but
     };
     breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
     button: {
-        buttonBorderWidth: string;
-        buttonPadding: string;
-        smallButtonPadding: string;
-        buttonLineHeight: string;
-        buttonWidth: string;
-        buttonSmallWidth: string;
+        border: string;
     };
     color: {
         black: string;
@@ -47,22 +42,27 @@ declare const ButtonIconStyles: import("styled-components").StyledComponent<"but
         gray5: string;
     };
     fontFamily: {
-        baseFontFamily: string;
+        default: string;
+        heading: string;
+        numerals: string;
     };
     fontSize: {
-        defaultFontSize: string;
-        smallFontSize: string;
-        extraSmallFontSize: string;
-        xsFontSize: string;
-        xxsFontSize: string;
-        h1FontSize: string;
-        h2FontSize: string;
-        h2MobileFontSize: string;
-        h3FontSize: string;
-        h4FontSize: string;
-        h5FontSize: string;
-        heroBannerTitleFontSize: string;
-        heroBannerTitleMobileFontSize: string;
+        default: string;
+        xl: string;
+        l: string;
+        s: string;
+        xs: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
     };
     fontWeight: {
         book: number;
@@ -78,16 +78,23 @@ declare const ButtonIconStyles: import("styled-components").StyledComponent<"but
         gutter: string;
     };
     lineHeight: {
-        defaultLineHeight: string;
-        paragraphLineHeight: string;
-        heroBannerLineHeight: string;
-        heroBannerMobileLineHeight: string;
-        h1LineHeight: string;
-        h2LineHeight: string;
-        h2MobileLineHeight: string;
-        h3LineHeight: string;
-        h4LineHeight: string;
-        h5LineHeight: string;
+        default: string;
+        xl: string;
+        s: string;
+        xs: string;
+        xxs: string;
+        auto: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
     };
     media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
 }, import("./ButtonBasicStyles").ButtonProps & {

package/build/es/components/Buttons/ButtonIconStyles.js

@@ -1,6 +1,6 @@
 import styled from '../../themes/styled.js';
-import ButtonBasicStyle from './ButtonBasicStyles.js';
 import { media } from '../../utils/styledUtils.js';
+import ButtonBasicStyle from './ButtonBasicStyles.js';
 
 const ButtonIconStyles = styled(ButtonBasicStyle) `
     border: none;
@@ -19,11 +19,7 @@ const ButtonIconStyles = styled(ButtonBasicStyle) `
     &:disabled {
         background: none;
     }
-    svg {
-        height: ${p => (p.small ? '1.25em' : '1.5em')};
-        width: ${p => (p.small ? '1.25em' : '1.5em')};
-    }
-    span {
+    span.dnasg-icon + span {
         margin-left: 0.5rem;
         display: ${({ showTextMobile }) => (showTextMobile ? 'block' : 'none')};
         ${media.sm `

package/build/es/components/Buttons/ButtonPrimary.js

@@ -1,8 +1,12 @@
 import React from 'react';
-import ButtonPrimaryStyles from './ButtonPrimaryStyles.js';
+import styled from '../../themes/styled.js';
 import { PixelLoader } from '../PixelLoader/PixelLoader.js';
+import ButtonPrimaryStyles from './ButtonPrimaryStyles.js';
 
 const noop = () => { }; // tslint:disable-line
+const StyledPixelLoader = styled(PixelLoader) `
+    display: inline-flex;
+`;
 /** @visibleName Button primary */
 const ButtonPrimary = (props) => {
     const { children, fullWidth, small, loading = false, darkBg, onClick, onMouseDown, disabled = false, className, 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue, type, } = props;
@@ -12,7 +16,7 @@ const ButtonPrimary = (props) => {
         // https://github.com/styled-components/styled-components/pull/2093
         loading: loading ? loading.toString() : undefined, darkBg: darkBg, disabled: disabled, onClick: !disabled || !loading ? onClick : noop, onMouseDown: (!disabled || !loading) && onMouseDown ? onMouseDown : noop, className: className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, type: type },
         !loading && (React.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, children)),
-        loading && React.createElement(PixelLoader, null)));
+        loading && React.createElement(StyledPixelLoader, null)));
 };
 
 export default ButtonPrimary;

package/build/es/components/Buttons/ButtonPrimaryStyles.d.ts

@@ -11,12 +11,7 @@ declare const ButtonPrimaryStyles: import("styled-components").StyledComponent<"
     };
     breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
     button: {
-        buttonBorderWidth: string;
-        buttonPadding: string;
-        smallButtonPadding: string;
-        buttonLineHeight: string;
-        buttonWidth: string;
-        buttonSmallWidth: string;
+        border: string;
     };
     color: {
         black: string;
@@ -47,22 +42,27 @@ declare const ButtonPrimaryStyles: import("styled-components").StyledComponent<"
         gray5: string;
     };
     fontFamily: {
-        baseFontFamily: string;
+        default: string;
+        heading: string;
+        numerals: string;
     };
     fontSize: {
-        defaultFontSize: string;
-        smallFontSize: string;
-        extraSmallFontSize: string;
-        xsFontSize: string;
-        xxsFontSize: string;
-        h1FontSize: string;
-        h2FontSize: string;
-        h2MobileFontSize: string;
-        h3FontSize: string;
-        h4FontSize: string;
-        h5FontSize: string;
-        heroBannerTitleFontSize: string;
-        heroBannerTitleMobileFontSize: string;
+        default: string;
+        xl: string;
+        l: string;
+        s: string;
+        xs: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
     };
     fontWeight: {
         book: number;
@@ -78,16 +78,23 @@ declare const ButtonPrimaryStyles: import("styled-components").StyledComponent<"
         gutter: string;
     };
     lineHeight: {
-        defaultLineHeight: string;
-        paragraphLineHeight: string;
-        heroBannerLineHeight: string;
-        heroBannerMobileLineHeight: string;
-        h1LineHeight: string;
-        h2LineHeight: string;
-        h2MobileLineHeight: string;
-        h3LineHeight: string;
-        h4LineHeight: string;
-        h5LineHeight: string;
+        default: string;
+        xl: string;
+        s: string;
+        xs: string;
+        xxs: string;
+        auto: string;
+        h1XL: string;
+        h1L: string;
+        h1M: string;
+        h1S: string;
+        h2M: string;
+        h2S: string;
+        h3: string;
+        h4: string;
+        h5: string;
+        h1: string;
+        h2: string;
     };
     media: Record<string | number, (l: TemplateStringsArray, ...p: any[]) => string>;
 }, import("./ButtonBasicStyles").ButtonProps, never>;

package/build/es/components/Buttons/ButtonSecondary.js

@@ -1,9 +1,13 @@
 import React from 'react';
-import ButtonSecondaryStyles from './ButtonSecondaryStyles.js';
-import { PixelLoader } from '../PixelLoader/PixelLoader.js';
+import styled from '../../themes/styled.js';
 import theme from '../../themes/theme.js';
+import { PixelLoader } from '../PixelLoader/PixelLoader.js';
+import ButtonSecondaryStyles from './ButtonSecondaryStyles.js';
 
 const noop = () => { }; // tslint:disable-line
+const StyledPixelLoader = styled(PixelLoader) `
+    display: inline-flex;
+`;
 /** @visibleName Button secondary */
 const ButtonSecondary = (props) => {
     const { children, className, fullWidth, small, loading = false, darkBg, onClick, onMouseDown, disabled = false, 'data-testid': dataTestId, 'data-no-close': dataNoClose, 'data-track-value': dataTrackValue, type, } = props;
@@ -13,7 +17,7 @@ const ButtonSecondary = (props) => {
         // https://github.com/styled-components/styled-components/pull/2093
         loading: loading ? loading.toString() : undefined, darkBg: darkBg, disabled: disabled, onClick: !disabled || !loading ? onClick : noop, onMouseDown: (!disabled || !loading) && onMouseDown ? onMouseDown : noop, className: className, "data-testid": dataTestId, "data-no-close": dataNoClose, "data-track-value": dataTrackValue, type: type },
         !loading && (React.createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, children)),
-        loading && React.createElement(PixelLoader, { color: darkBg ? theme.color.white : theme.color.hotPink })));
+        loading && (React.createElement(StyledPixelLoader, { color: darkBg ? theme.color.white : theme.color.hotPink }))));
 };
 
 export default ButtonSecondary;