@dnanpm/styleguide 1.9.0 → 2.1.0

package/build/cjs/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/cjs/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/cjs/components/Buttons/ButtonIconStyles.js

@@ -3,8 +3,8 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var styled = require('../../themes/styled.js');
-var ButtonBasicStyles = require('./ButtonBasicStyles.js');
 var styledUtils = require('../../utils/styledUtils.js');
+var ButtonBasicStyles = require('./ButtonBasicStyles.js');
 
 const ButtonIconStyles = styled['default'](ButtonBasicStyles['default']) `
     border: none;
@@ -23,11 +23,7 @@ const ButtonIconStyles = styled['default'](ButtonBasicStyles['default']) `
     &: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')};
         ${styledUtils.media.sm `

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

@@ -3,14 +3,18 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var ButtonPrimaryStyles = require('./ButtonPrimaryStyles.js');
+var styled = require('../../themes/styled.js');
 var PixelLoader = require('../PixelLoader/PixelLoader.js');
+var ButtonPrimaryStyles = require('./ButtonPrimaryStyles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const noop = () => { }; // tslint:disable-line
+const StyledPixelLoader = styled['default'](PixelLoader.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;
@@ -20,7 +24,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__default['default'].createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, children)),
-        loading && React__default['default'].createElement(PixelLoader.PixelLoader, null)));
+        loading && React__default['default'].createElement(StyledPixelLoader, null)));
 };
 
 exports.default = ButtonPrimary;

package/build/cjs/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/cjs/components/Buttons/ButtonSecondary.js

@@ -3,15 +3,19 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var ButtonSecondaryStyles = require('./ButtonSecondaryStyles.js');
-var PixelLoader = require('../PixelLoader/PixelLoader.js');
+var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
+var PixelLoader = require('../PixelLoader/PixelLoader.js');
+var ButtonSecondaryStyles = require('./ButtonSecondaryStyles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const noop = () => { }; // tslint:disable-line
+const StyledPixelLoader = styled['default'](PixelLoader.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;
@@ -21,7 +25,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__default['default'].createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, children)),
-        loading && React__default['default'].createElement(PixelLoader.PixelLoader, { color: darkBg ? theme['default'].color.white : theme['default'].color.hotPink })));
+        loading && (React__default['default'].createElement(StyledPixelLoader, { color: darkBg ? theme['default'].color.white : theme['default'].color.hotPink }))));
 };
 
 exports.default = ButtonSecondary;

package/build/cjs/components/Buttons/ButtonSecondaryStyles.d.ts

@@ -11,12 +11,7 @@ declare const ButtonSecondaryStyles: 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 ButtonSecondaryStyles: 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 ButtonSecondaryStyles: 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/cjs/components/Buttons/ButtonTertiary.js

@@ -3,15 +3,19 @@
 Object.defineProperty(exports, '__esModule', { value: true });
 
 var React = require('react');
-var ButtonTertiaryStyles = require('./ButtonTertiaryStyles.js');
-var PixelLoader = require('../PixelLoader/PixelLoader.js');
+var styled = require('../../themes/styled.js');
 var theme = require('../../themes/theme.js');
+var PixelLoader = require('../PixelLoader/PixelLoader.js');
+var ButtonTertiaryStyles = require('./ButtonTertiaryStyles.js');
 
 function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
 
 var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
 
 const noop = () => { }; // tslint:disable-line
+const StyledPixelLoader = styled['default'](PixelLoader.PixelLoader) `
+    display: inline-flex;
+`;
 /** @visibleName Button tertiary */
 const ButtonTertiary = (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;
@@ -21,7 +25,7 @@ const ButtonTertiary = (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__default['default'].createElement("span", { "data-testid": dataTestId && `${dataTestId}-text`, "data-no-close": dataNoClose }, children)),
-        loading && React__default['default'].createElement(PixelLoader.PixelLoader, { color: darkBg ? theme['default'].color.black : theme['default'].color.white })));
+        loading && (React__default['default'].createElement(StyledPixelLoader, { color: darkBg ? theme['default'].color.black : theme['default'].color.white }))));
 };
 
 exports.default = ButtonTertiary;

package/build/cjs/components/Buttons/ButtonTertiaryStyles.d.ts

@@ -11,12 +11,7 @@ declare const ButtonTertiaryStyles: 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 ButtonTertiaryStyles: 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 ButtonTertiaryStyles: 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/cjs/components/Buttons/CloseButton.d.ts

@@ -11,12 +11,7 @@ declare const CloseButton: import("styled-components").StyledComponent<"a", {
     };
     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 CloseButton: import("styled-components").StyledComponent<"a", {
         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 CloseButton: import("styled-components").StyledComponent<"a", {
         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>;
 }, {}, never>;