@dnanpm/styleguide 1.8.1 → 2.0.1

package/build/cjs/components/TooltipMenu/ChildComponents/TooltipMenuExportedStyles.d.ts

@@ -11,12 +11,7 @@ export declare const Tail: import("styled-components").StyledComponent<"div", {
     };
     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 @@ export declare const Tail: import("styled-components").StyledComponent<"div", {
         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 @@ export declare const Tail: import("styled-components").StyledComponent<"div", {
         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>;
 }, {
@@ -108,12 +115,7 @@ export declare const TailShadow: import("styled-components").StyledComponent<"di
     };
     breakpoints: import("../../../themes/themeComponents/breakpoints").ViewBreakpoints;
     button: {
-        buttonBorderWidth: string;
-        buttonPadding: string;
-        smallButtonPadding: string;
-        buttonLineHeight: string;
-        buttonWidth: string;
-        buttonSmallWidth: string;
+        border: string;
     };
     color: {
         black: string;
@@ -144,22 +146,27 @@ export declare const TailShadow: import("styled-components").StyledComponent<"di
         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;
@@ -175,16 +182,23 @@ export declare const TailShadow: import("styled-components").StyledComponent<"di
         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>;
 }, {

package/build/cjs/components/index.d.ts

@@ -1,3 +1,5 @@
+export { default as Accordion } from './Accordion/Accordion';
+export { default as AccordionItem } from './Accordion/AccordionItem';
 export { default as AmountSelector } from './AmountSelector/AmountSelector';
 export * from './Buttons';
 export * from './Card';
@@ -8,7 +10,7 @@ export { default as Footer } from './Footer/Footer';
 export { default as Helper } from './Helper/Helper';
 export { default as Icon } from './Icon/Icon';
 export { default as Image } from './Image/Image';
-export { default as Input, InputFieldProps } from './Input/Input';
+export { default as Input } from './Input/Input';
 export { default as Label } from './Label/Label';
 export { default as LabelText } from './LabelText/LabelText';
 export { default as MainNavigation } from './MainNavigation/MainNavigation';
@@ -19,6 +21,7 @@ export { default as PixelLoader } from './PixelLoader/PixelLoader';
 export { default as ProgressIndicator } from './ProgressIndicator/ProgressIndicator';
 export { default as RadioButton } from './RadioButton/RadioButton';
 export { default as ReadMore } from './ReadMore/ReadMore';
+export { default as Ribbon } from './Ribbon/Ribbon';
 export { default as Search } from './Search/Search';
 export { default as SecondaryNavigation } from './SecondaryNavigation/SecondaryNavigation';
 export { default as Selectbox } from './Selectbox/Selectbox';

package/build/cjs/hooks/useElementDimensions.d.ts

@@ -0,0 +1,5 @@
+export default function useResizeObserver(): {
+    ref: (node: any) => void;
+    width: number;
+    height: number;
+};

package/build/cjs/hooks/useElementDimensions.js

@@ -0,0 +1,37 @@
+'use strict';
+
+Object.defineProperty(exports, '__esModule', { value: true });
+
+var React = require('react');
+
+/**
+ * Hook to get element dimensions when layout changes
+ */
+const ResizeObserver = typeof window !== 'undefined' && window.ResizeObserver;
+function useResizeObserver() {
+    const [size, setSize] = React.useState({ width: 0, height: 0 });
+    const resizeObserver = React.useRef(null);
+    const onResize = React.useCallback(entries => {
+        const { width, height } = entries[0].contentRect;
+        setSize({ width, height });
+    }, []);
+    const ref = React.useCallback(node => {
+        if (node !== null && ResizeObserver) {
+            if (resizeObserver.current) {
+                resizeObserver.current.disconnect();
+            }
+            resizeObserver.current = new ResizeObserver(onResize);
+            if (resizeObserver.current) {
+                resizeObserver.current.observe(node);
+            }
+        }
+    }, [onResize]);
+    React.useEffect(() => () => {
+        if (resizeObserver.current) {
+            resizeObserver.current.disconnect();
+        }
+    }, []);
+    return { ref, width: size.width, height: size.height };
+}
+
+exports.default = useResizeObserver;

package/build/cjs/index.js

@@ -2,6 +2,8 @@
 
 Object.defineProperty(exports, '__esModule', { value: true });
 
+var Accordion = require('./components/Accordion/Accordion.js');
+var AccordionItem = require('./components/Accordion/AccordionItem.js');
 var AmountSelector = require('./components/AmountSelector/AmountSelector.js');
 var ButtonDefault = require('./components/Buttons/ButtonDefault.js');
 var ButtonPrimary = require('./components/Buttons/ButtonPrimary.js');
@@ -31,6 +33,7 @@ var PixelLoader = require('./components/PixelLoader/PixelLoader.js');
 var ProgressIndicator = require('./components/ProgressIndicator/ProgressIndicator.js');
 var RadioButton = require('./components/RadioButton/RadioButton.js');
 var ReadMore = require('./components/ReadMore/ReadMore.js');
+var Ribbon = require('./components/Ribbon/Ribbon.js');
 var Search = require('./components/Search/Search.js');
 var SecondaryNavigation = require('./components/SecondaryNavigation/SecondaryNavigation.js');
 var Selectbox = require('./components/Selectbox/Selectbox.js');
@@ -48,6 +51,8 @@ var navigation = require('./themes/themeComponents/navigation.js');
 
 
 
+exports.Accordion = Accordion['default'];
+exports.AccordionItem = AccordionItem['default'];
 exports.AmountSelector = AmountSelector['default'];
 exports.Button = ButtonDefault.Button;
 exports.ButtonPrimary = ButtonPrimary['default'];
@@ -77,6 +82,7 @@ exports.PixelLoader = PixelLoader.PixelLoader;
 exports.ProgressIndicator = ProgressIndicator['default'];
 exports.RadioButton = RadioButton['default'];
 exports.ReadMore = ReadMore['default'];
+exports.Ribbon = Ribbon['default'];
 exports.Search = Search['default'];
 exports.SecondaryNavigation = SecondaryNavigation['default'];
 exports.Selectbox = Selectbox['default'];

package/build/cjs/themes/globalStyles.d.ts

@@ -12,12 +12,7 @@ export declare const globalStyles: import("styled-components").FlattenInterpolat
     };
     breakpoints: import("./themeComponents/breakpoints").ViewBreakpoints;
     button: {
-        buttonBorderWidth: string;
-        buttonPadding: string;
-        smallButtonPadding: string;
-        buttonLineHeight: string;
-        buttonWidth: string;
-        buttonSmallWidth: string;
+        border: string;
     };
     color: {
         black: string;
@@ -48,22 +43,27 @@ export declare const globalStyles: import("styled-components").FlattenInterpolat
         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;
@@ -79,19 +79,126 @@ export declare const globalStyles: import("styled-components").FlattenInterpolat
         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>;
 }>>;
+export declare const CheckboxInput_RadioInput: import("styled-components").StyledComponent<"input", {
+    base: {
+        baseHeight: {
+            value: number;
+            unit: string;
+        };
+        baseWidth: {
+            value: number;
+            unit: string;
+        };
+    };
+    breakpoints: import("./themeComponents/breakpoints").ViewBreakpoints;
+    button: {
+        border: string;
+    };
+    color: {
+        black: string;
+        white: string;
+        text: string;
+        hotPink: string;
+        waterBlue: string;
+        melonYellow: string;
+        slateGray: string;
+        grayWhite: string;
+        hotPinkHover: string;
+        waterBlueHover: string;
+        pink1: string;
+        pink2: string;
+        pinkday: string;
+        info: string;
+        error: string;
+        success: string;
+        warning: string;
+        grayBg: string;
+        gray80: string;
+        gray70: string;
+        gray55: string;
+        gray40: string;
+        gray25: string;
+        gray15: string;
+        gray10: string;
+        gray5: string;
+    };
+    fontFamily: {
+        default: string;
+        heading: string;
+        numerals: string;
+    };
+    fontSize: {
+        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;
+        medium: number;
+        bold: number;
+        black: number;
+    };
+    form: {
+        smallSelectWidth: string;
+        smallSelectHeight: string;
+    };
+    grid: {
+        gutter: string;
+    };
+    lineHeight: {
+        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>;
 declare const _default: import("styled-components").GlobalStyleComponent<{}, {
     base: {
         baseHeight: {
@@ -105,12 +212,7 @@ declare const _default: import("styled-components").GlobalStyleComponent<{}, {
     };
     breakpoints: import("./themeComponents/breakpoints").ViewBreakpoints;
     button: {
-        buttonBorderWidth: string;
-        buttonPadding: string;
-        smallButtonPadding: string;
-        buttonLineHeight: string;
-        buttonWidth: string;
-        buttonSmallWidth: string;
+        border: string;
     };
     color: {
         black: string;
@@ -141,22 +243,27 @@ declare const _default: import("styled-components").GlobalStyleComponent<{}, {
         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;
@@ -172,16 +279,23 @@ declare const _default: import("styled-components").GlobalStyleComponent<{}, {
         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>;
 }>;