@dnanpm/styleguide 3.3.0 → 3.4.0

package/build/cjs/components/Tabs/Tab.d.ts

@@ -1,182 +0,0 @@
-import type { ReactNode } from 'react';
-import React, { PureComponent } from 'react';
-import type { Type } from './Tabs';
-export interface TabProps {
-    activeTab?: string;
-    label: string;
-    tabStyle?: Type;
-    onClick?: (tab: string) => void;
-    children?: ReactNode;
-}
-export interface TabStyleProps {
-    isActive?: boolean;
-    tabStyle?: Type;
-}
-export declare const TabStyle: import("styled-components").StyledComponent<"li", {
-    base: {
-        baseHeight: {
-            value: number;
-            unit: string;
-        };
-        baseWidth: {
-            value: number;
-            unit: string;
-        };
-    };
-    breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
-    color: {
-        default: {
-            pink: string;
-            plum: string;
-            white: string;
-            black: string;
-        };
-        accent: {
-            lemon: string;
-            sky: string;
-            orange: string;
-        };
-        hover: {
-            pink: string;
-        };
-        text: {
-            gray: string;
-            pink: string;
-            plum: string;
-            white: string;
-            black: string;
-        };
-        line: {
-            L01: string;
-            L02: string;
-            L03: string;
-            L04: string;
-        };
-        notification: {
-            info: string;
-            success: string;
-            warning: string;
-            error: string;
-        };
-        background: {
-            sand: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            pink: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            plum: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            lemon: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            sky: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            orange: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            white: {
-                default: string;
-            };
-        };
-        focus: {
-            dark: string;
-            light: string;
-        };
-        transparency: {
-            T0: string;
-            T10: string;
-            T20: string;
-            T30: string;
-            T40: string;
-            T50: string;
-            T60: string;
-            T70: string;
-            T80: string;
-            T90: string;
-            T100: 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: (string | number)[]) => string>;
-    radius: {
-        default: string;
-        s: string;
-        xs: string;
-        circle: string;
-        pill: string;
-    };
-}, TabStyleProps, never>;
-declare class Tab extends PureComponent<TabProps> {
-    onClick: () => void;
-    render(): React.JSX.Element;
-}
-export default Tab;

package/build/cjs/components/Tabs/Tab.js

@@ -1,67 +0,0 @@
-'use strict';
-
-Object.defineProperty(exports, '__esModule', { value: true });
-
-var React = require('react');
-var styled = require('../../themes/styled.js');
-var theme = require('../../themes/theme.js');
-var styledUtils = require('../../utils/styledUtils.js');
-
-function _interopDefaultLegacy (e) { return e && typeof e === 'object' && 'default' in e ? e : { 'default': e }; }
-
-var React__default = /*#__PURE__*/_interopDefaultLegacy(React);
-
-const TabStyle = styled["default"].li `
-    display: inline-block;
-    list-style: none;
-    cursor: pointer;
-    padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 0.8)}
-        ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1.6)};
-    color: ${theme["default"].color.text.black};
-    font-size: ${theme["default"].fontSize.default};
-    line-height: ${theme["default"].lineHeight.default};
-    font-weight: ${theme["default"].fontWeight.book};
-    margin-right: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 2)};
-
-    &:last-child {
-        margin-right: 0;
-    }
-
-    ${({ isActive }) => isActive &&
-    `
-            color: ${theme["default"].color.text.pink};
-            background-color: ${theme["default"].color.background.sand.E01};
-        `}
-
-    /* Underlined style modifications (legacy) */
-    ${({ tabStyle }) => tabStyle === 'underlined' &&
-    `
-            padding: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 1.6)} 0;
-            margin-right: ${styledUtils.getMultipliedSize(theme["default"].base.baseHeight, 3)};
-        `}
-    
-    ${({ isActive, tabStyle }) => isActive &&
-    tabStyle === 'underlined' &&
-    `
-            border-bottom: 2px solid ${theme["default"].color.default.pink};
-            background-color: transparent;
-        `}
-`;
-class Tab extends React.PureComponent {
-    constructor() {
-        super(...arguments);
-        this.onClick = () => {
-            const { label, onClick } = this.props;
-            if (onClick) {
-                onClick(label);
-            }
-        };
-    }
-    render() {
-        const { onClick, props: { activeTab, label, tabStyle }, } = this;
-        return (React__default["default"].createElement(TabStyle, { role: "tab", "aria-selected": activeTab === label, isActive: activeTab === label, tabStyle: tabStyle, onClick: onClick }, label));
-    }
-}
-
-exports.TabStyle = TabStyle;
-exports["default"] = Tab;

package/build/es/components/Tabs/Tab.d.ts

@@ -1,182 +0,0 @@
-import type { ReactNode } from 'react';
-import React, { PureComponent } from 'react';
-import type { Type } from './Tabs';
-export interface TabProps {
-    activeTab?: string;
-    label: string;
-    tabStyle?: Type;
-    onClick?: (tab: string) => void;
-    children?: ReactNode;
-}
-export interface TabStyleProps {
-    isActive?: boolean;
-    tabStyle?: Type;
-}
-export declare const TabStyle: import("styled-components").StyledComponent<"li", {
-    base: {
-        baseHeight: {
-            value: number;
-            unit: string;
-        };
-        baseWidth: {
-            value: number;
-            unit: string;
-        };
-    };
-    breakpoints: import("../../themes/themeComponents/breakpoints").ViewBreakpoints;
-    color: {
-        default: {
-            pink: string;
-            plum: string;
-            white: string;
-            black: string;
-        };
-        accent: {
-            lemon: string;
-            sky: string;
-            orange: string;
-        };
-        hover: {
-            pink: string;
-        };
-        text: {
-            gray: string;
-            pink: string;
-            plum: string;
-            white: string;
-            black: string;
-        };
-        line: {
-            L01: string;
-            L02: string;
-            L03: string;
-            L04: string;
-        };
-        notification: {
-            info: string;
-            success: string;
-            warning: string;
-            error: string;
-        };
-        background: {
-            sand: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            pink: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            plum: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            lemon: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            sky: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            orange: {
-                default: string;
-                E01: string;
-                E02: string;
-            };
-            white: {
-                default: string;
-            };
-        };
-        focus: {
-            dark: string;
-            light: string;
-        };
-        transparency: {
-            T0: string;
-            T10: string;
-            T20: string;
-            T30: string;
-            T40: string;
-            T50: string;
-            T60: string;
-            T70: string;
-            T80: string;
-            T90: string;
-            T100: 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: (string | number)[]) => string>;
-    radius: {
-        default: string;
-        s: string;
-        xs: string;
-        circle: string;
-        pill: string;
-    };
-}, TabStyleProps, never>;
-declare class Tab extends PureComponent<TabProps> {
-    onClick: () => void;
-    render(): React.JSX.Element;
-}
-export default Tab;

package/build/es/components/Tabs/Tab.js

@@ -1,58 +0,0 @@
-import React__default, { PureComponent } from 'react';
-import styled from '../../themes/styled.js';
-import theme from '../../themes/theme.js';
-import { getMultipliedSize } from '../../utils/styledUtils.js';
-
-const TabStyle = styled.li `
-    display: inline-block;
-    list-style: none;
-    cursor: pointer;
-    padding: ${getMultipliedSize(theme.base.baseHeight, 0.8)}
-        ${getMultipliedSize(theme.base.baseHeight, 1.6)};
-    color: ${theme.color.text.black};
-    font-size: ${theme.fontSize.default};
-    line-height: ${theme.lineHeight.default};
-    font-weight: ${theme.fontWeight.book};
-    margin-right: ${getMultipliedSize(theme.base.baseHeight, 2)};
-
-    &:last-child {
-        margin-right: 0;
-    }
-
-    ${({ isActive }) => isActive &&
-    `
-            color: ${theme.color.text.pink};
-            background-color: ${theme.color.background.sand.E01};
-        `}
-
-    /* Underlined style modifications (legacy) */
-    ${({ tabStyle }) => tabStyle === 'underlined' &&
-    `
-            padding: ${getMultipliedSize(theme.base.baseHeight, 1.6)} 0;
-            margin-right: ${getMultipliedSize(theme.base.baseHeight, 3)};
-        `}
-    
-    ${({ isActive, tabStyle }) => isActive &&
-    tabStyle === 'underlined' &&
-    `
-            border-bottom: 2px solid ${theme.color.default.pink};
-            background-color: transparent;
-        `}
-`;
-class Tab extends PureComponent {
-    constructor() {
-        super(...arguments);
-        this.onClick = () => {
-            const { label, onClick } = this.props;
-            if (onClick) {
-                onClick(label);
-            }
-        };
-    }
-    render() {
-        const { onClick, props: { activeTab, label, tabStyle }, } = this;
-        return (React__default.createElement(TabStyle, { role: "tab", "aria-selected": activeTab === label, isActive: activeTab === label, tabStyle: tabStyle, onClick: onClick }, label));
-    }
-}
-
-export { TabStyle, Tab as default };