oddsgate-ds 1.0.16 → 1.0.18

package/dist/types.d.ts

@@ -0,0 +1,555 @@
+import * as React$1 from 'react';
+import React__default, { CSSProperties } from 'react';
+import { spaces as spaces$1 } from '@/styles/variables';
+import * as styled_components from 'styled-components';
+
+declare const pxToRem: (size: number) => string;
+declare const fontName = "Red Hat Display";
+declare const alternativeFont = "MD Nichrome";
+declare const gutter: string;
+declare const desktop_width = "1360";
+declare const tablet_width = "768";
+declare const mobile_width = "375";
+declare const responsiveMedia = "980px";
+declare const mobileMedia = "360px";
+declare const easeOutExpo = "cubic-bezier(.32,.94,.6,1);";
+type IBreakpoints = {
+    $xs?: string;
+    $sm?: string;
+    $md?: string;
+    $lg?: string;
+    $xl?: string;
+    $xxl?: string;
+};
+declare const colors: Record<string, string>;
+declare const spaces: Record<string, string>;
+declare const spacesNegative: Record<string, string>;
+declare const typography: Record<string, Record<string, unknown>>;
+declare const radius: Record<string, string>;
+declare const shadows: Record<string, string>;
+declare const zIndexes: Record<string, string>;
+declare const grid_conf: {
+    gridSize: number;
+    gutter: number;
+    mediaQuery: string;
+    container: IBreakpoints;
+    breakpoints: IBreakpoints;
+};
+
+type variables_IBreakpoints = IBreakpoints;
+declare const variables_alternativeFont: typeof alternativeFont;
+declare const variables_colors: typeof colors;
+declare const variables_desktop_width: typeof desktop_width;
+declare const variables_easeOutExpo: typeof easeOutExpo;
+declare const variables_fontName: typeof fontName;
+declare const variables_grid_conf: typeof grid_conf;
+declare const variables_gutter: typeof gutter;
+declare const variables_mobileMedia: typeof mobileMedia;
+declare const variables_mobile_width: typeof mobile_width;
+declare const variables_pxToRem: typeof pxToRem;
+declare const variables_radius: typeof radius;
+declare const variables_responsiveMedia: typeof responsiveMedia;
+declare const variables_shadows: typeof shadows;
+declare const variables_spaces: typeof spaces;
+declare const variables_spacesNegative: typeof spacesNegative;
+declare const variables_tablet_width: typeof tablet_width;
+declare const variables_typography: typeof typography;
+declare const variables_zIndexes: typeof zIndexes;
+declare namespace variables {
+  export {
+    variables_IBreakpoints as IBreakpoints,
+    variables_alternativeFont as alternativeFont,
+    variables_colors as colors,
+    variables_desktop_width as desktop_width,
+    variables_easeOutExpo as easeOutExpo,
+    variables_fontName as fontName,
+    variables_grid_conf as grid_conf,
+    variables_gutter as gutter,
+    variables_mobileMedia as mobileMedia,
+    variables_mobile_width as mobile_width,
+    variables_pxToRem as pxToRem,
+    variables_radius as radius,
+    variables_responsiveMedia as responsiveMedia,
+    variables_shadows as shadows,
+    variables_spaces as spaces,
+    variables_spacesNegative as spacesNegative,
+    variables_tablet_width as tablet_width,
+    variables_typography as typography,
+    variables_zIndexes as zIndexes,
+  };
+}
+
+type IImageWrapper = {
+    aspectRatioHeight?: number;
+    anchor?: string;
+    $align?: string;
+    align?: string;
+    caption?: string;
+    href?: string;
+    linkTarget?: string;
+    rel?: string;
+    className?: string;
+    style?: CSSProperties;
+    children?: React.ReactNode;
+    asBackground?: boolean;
+};
+
+declare const ImageWrapper: ({ aspectRatioHeight, align, caption, href, linkTarget, rel, className, style, children, asBackground }: IImageWrapper) => React__default.JSX.Element;
+
+declare enum typographyTags {
+    div = "div",
+    span = "span",
+    p = "p",
+    h1 = "h1",
+    h2 = "h2",
+    h3 = "h3",
+    h4 = "h4",
+    h5 = "h5",
+    h6 = "h6"
+}
+type IHeading = {
+    tag?: keyof typeof typographyTags | string;
+    size?: string;
+    className?: string;
+    style?: CSSProperties;
+    children?: React.ReactNode;
+};
+
+declare const Heading: ({ tag, size, className, ...props }: IHeading) => React__default.JSX.Element;
+
+type IRichText = {
+    id?: string;
+    tag?: keyof typeof typographyTags;
+    attributes?: object;
+    className?: string;
+    style?: CSSProperties;
+    children?: any;
+};
+
+declare const RichText: ({ id, tag, attributes, className, style, children, ...props }: IRichText) => React__default.JSX.Element;
+
+interface IButtonBase {
+    id?: string;
+    as?: 'button' | 'a';
+    type?: string;
+    outlined?: boolean;
+    leftIcon?: React.ReactElement;
+    rightIcon?: React.ReactElement;
+    removeLabel?: boolean;
+    href?: string;
+    ariaLabel?: string;
+    rel?: string;
+    disabled?: boolean;
+    target?: string;
+    className?: string;
+    style?: CSSProperties;
+    children?: React.ReactNode;
+    onClick?: (event?: React.MouseEvent<HTMLElement>) => void;
+}
+interface IButton extends IButtonBase {
+    variant?: string;
+    mode?: string;
+}
+
+declare const Button: ({ id, as, children, variant, mode, outlined, leftIcon, rightIcon, removeLabel, className, href, ariaLabel, rel, target, disabled, type, ...props }: IButton) => React__default.JSX.Element;
+
+type ISpacer = {
+    id?: string;
+    color?: string;
+    height?: keyof typeof spaces$1 | string | number;
+    customHeight?: string;
+    className?: string;
+    style?: CSSProperties;
+};
+
+declare const Spacer: ({ id, color, customHeight, height, className, ...props }: ISpacer) => React__default.JSX.Element;
+
+type ISeparator = {
+    color?: string;
+    margin?: string;
+    height?: string;
+    className?: string;
+    style?: CSSProperties;
+};
+
+declare const Separator: ({ color, margin, height, ...props }: ISeparator) => React__default.JSX.Element;
+
+interface IFlexBase {
+    className?: string;
+    style?: CSSProperties;
+    children?: React.ReactNode;
+}
+type flexAlign = 'flex-start' | 'center' | 'flex-end' | 'stretch' | string;
+type flexJustify = 'flex-start' | 'center' | 'flex-end' | 'space-between' | string;
+interface IFlex extends IFlexBase {
+    direction?: 'row' | 'column';
+    align?: flexAlign;
+    justify?: flexJustify;
+    wrap?: 'wrap' | 'nowrap';
+}
+
+declare const Flex: ({ direction, align, justify, wrap, children, className, ...props }: IFlex) => React__default.JSX.Element;
+
+type IIcon = {
+    icon?: string;
+    className?: string;
+    style?: CSSProperties;
+    onClick?: () => void;
+};
+
+declare const Icon: ({ icon, className, onClick, ...props }: IIcon) => React__default.JSX.Element;
+
+interface IChip {
+    variant?: string;
+    $variant?: string;
+    hover?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    children?: React.ReactNode;
+}
+
+declare const Chip: ({ variant, hover, className, style, children, ...props }: IChip) => React__default.JSX.Element;
+
+type IQuote = {
+    id?: string;
+    value?: string;
+    citation?: string;
+    className?: string;
+    style?: CSSProperties;
+    children?: React.ReactNode;
+};
+
+declare const Quote: ({ id, value, citation, className, children, ...props }: IQuote) => React__default.JSX.Element;
+
+type IVideo = {
+    src?: string;
+    poster?: string;
+    autoplay?: boolean;
+    controls?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    playsInline?: boolean;
+    className?: string;
+    style?: CSSProperties;
+};
+
+declare const Video: ({ src, poster, autoplay, controls, loop, muted, playsInline, className, style, ...props }: IVideo) => React__default.JSX.Element;
+
+type IVideoEmbed = {
+    embed?: string;
+    poster?: string;
+    autoplay?: boolean;
+    controls?: boolean;
+    loop?: boolean;
+    muted?: boolean;
+    playsInline?: boolean;
+    className?: string;
+    style?: CSSProperties;
+};
+
+declare const VideoEmbed: ({ embed, poster, autoplay, controls, loop, muted, playsInline, className, style, ...props }: IVideoEmbed) => React__default.JSX.Element;
+
+interface IRowBase {
+    className?: string;
+    style?: CSSProperties;
+    children?: React.ReactNode;
+}
+interface IRow extends IRowBase {
+    fluid?: boolean;
+    direction?: 'row' | 'column';
+    align?: flexAlign;
+    justify?: flexJustify;
+    wrap?: 'wrap' | 'nowrap';
+    mobileSpace?: boolean;
+}
+type IColumnsSize = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | number;
+interface IColumnBase {
+    className?: string;
+    style?: CSSProperties;
+    children?: React.ReactNode;
+}
+interface IColumn extends IColumnBase {
+    align?: flexAlign;
+    lg?: IColumnsSize;
+    md?: IColumnsSize;
+    sm?: IColumnsSize;
+    xs?: IColumnsSize;
+    mobileOrder?: number;
+}
+
+declare const Row: ({ fluid, direction, align, justify, wrap, mobileSpace, className, style, children, ...props }: IRow) => React__default.JSX.Element;
+declare const Column: ({ xs, sm, md, lg, align, mobileOrder, children, className, style, ...props }: IColumn) => React__default.JSX.Element;
+
+interface IFormField {
+    id?: string;
+    label?: string;
+    leftIcon?: React.ReactNode | React.ReactNode[];
+    rightIcon?: React.ReactNode | React.ReactNode[];
+    isCheckRadio?: boolean;
+    children?: React.ReactNode;
+    className?: string;
+}
+
+declare const FormField: ({ id, label, leftIcon, rightIcon, isCheckRadio, className, children, ...props }: IFormField) => React__default.JSX.Element;
+
+type ICheckRadioField = {
+    id?: string;
+    label?: string;
+    className?: string;
+    children?: React.ReactNode;
+};
+
+declare const CheckRadioField: ({ id, label, className, children, ...props }: ICheckRadioField) => React__default.JSX.Element;
+
+interface ILoader {
+    variant?: string;
+    $variant?: string;
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+    children?: React.ReactNode;
+}
+
+declare const Loader: ({ variant, label, children, className, style, ...props }: ILoader) => React__default.JSX.Element;
+
+interface IEmptyState {
+    variant?: string;
+    $variant?: string;
+    label?: string;
+    className?: string;
+    style?: CSSProperties;
+    children?: React.ReactNode;
+}
+
+declare const EmptyState: ({ variant, label, children, className, style, ...props }: IEmptyState) => React__default.JSX.Element;
+
+type ICloseButton = {
+    variant?: string;
+    $variant?: string;
+    className?: string;
+    style?: CSSProperties;
+    onClick?: () => void;
+};
+
+declare const CloseButton: ({ variant, className, onClick, ...props }: ICloseButton) => React__default.JSX.Element;
+
+interface IScrollingNav {
+    align?: string;
+    className?: string;
+    style?: CSSProperties;
+    children?: React.ReactNode;
+}
+
+declare const ScrollingNav: ({ align, children, className, ...props }: IScrollingNav) => React__default.JSX.Element;
+
+type ISocialLinks = {
+    variant?: string;
+    socials?: Record<string, string>;
+    className?: string;
+    style?: CSSProperties;
+};
+
+declare const SocialLinks: ({ variant, socials, className, style, ...props }: ISocialLinks) => React__default.JSX.Element;
+
+type IMarquee = {
+    text?: string;
+    className?: string;
+    style?: CSSProperties;
+    onClick?: () => void;
+};
+
+declare const Marquee: ({ text, className, onClick, ...props }: IMarquee) => React__default.JSX.Element;
+
+type PortalComponentProps = {
+    wrapperId: string;
+    children?: React.ReactNode;
+};
+declare function PortalComponent({ wrapperId, children }: PortalComponentProps): React.ReactPortal | null;
+
+interface IAccordion {
+    className?: string;
+    style?: CSSProperties;
+    children?: React.ReactNode;
+}
+interface IAccordionItem {
+    active?: boolean;
+    title?: string;
+    className?: string;
+    style?: CSSProperties;
+    children?: React.ReactNode;
+}
+
+declare const Accordion: ({ className, style, children }: IAccordion) => React__default.JSX.Element;
+declare const AccordionItem: ({ title, className, style, children }: IAccordionItem) => React__default.JSX.Element;
+
+type IModal = {
+    title?: string;
+    open?: boolean;
+    onClose?: () => void;
+    hideCloseIcon?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    children?: React.ReactNode;
+};
+
+declare const Modal: ({ title, open, onClose, hideCloseIcon, children, ...props }: IModal) => React__default.JSX.Element | null;
+
+interface IOffCanvas {
+    isOpen?: boolean;
+    $isOpen?: boolean;
+    actions?: React.ReactNode;
+    title?: React.ReactNode;
+    className?: string;
+    style?: CSSProperties;
+    children?: React.ReactNode;
+    onClose?: () => void;
+}
+
+declare const OffCanvas: ({ isOpen, title, actions, children, className, onClose }: IOffCanvas) => React__default.JSX.Element;
+
+type IDropdown = {
+    ref?: React.RefObject<HTMLDivElement>;
+    title?: React.ReactElement;
+    icon?: React.ReactElement;
+    className?: string;
+    style?: CSSProperties;
+    children: React.ReactNode;
+};
+type IDropdownItem = {
+    icon?: React.ReactElement;
+    disabled?: boolean;
+    section?: boolean;
+    className?: string;
+    style?: CSSProperties;
+    children: React.ReactNode;
+    onClick?: () => void;
+};
+
+declare const Dropdown: ({ children, title, icon, className, style, ...props }: IDropdown) => React__default.JSX.Element;
+
+declare const DropdownItem: ({ icon, disabled, section, className, style, children, onClick, ...props }: IDropdownItem) => React__default.JSX.Element;
+
+type IShareModal = {
+    siteTitle?: string;
+    title?: string;
+    url?: string;
+    label?: string;
+    copyText?: string;
+    open?: boolean;
+    onClose?: () => void;
+};
+
+declare const ShareModal: ({ siteTitle, title, label, url, copyText, open, onClose, ...props }: IShareModal) => React__default.JSX.Element;
+
+type IIconBox = {
+    label?: string;
+    icon?: React.ReactElement;
+    description?: string;
+    className?: string;
+    style?: CSSProperties;
+    children?: React.ReactNode;
+};
+
+declare const IconBox: ({ label, icon, description, className, ...props }: IIconBox) => React__default.JSX.Element;
+
+type IIconTitle = {
+    label?: string;
+    icon?: React.ReactElement;
+    imageElement?: React.ReactElement;
+    className?: string;
+    style?: CSSProperties;
+    children?: React.ReactNode;
+};
+
+declare const IconTitle: ({ label, icon, imageElement, className, style, children, ...props }: IIconTitle) => React__default.JSX.Element;
+
+type ICard = {
+    variant?: string;
+    imageElement?: React.ReactElement;
+    className?: string;
+    style?: CSSProperties;
+    children?: React.ReactNode;
+    onClick?: (event: React.MouseEvent<HTMLElement>) => void;
+};
+
+interface IBlogCard extends ICard {
+    date?: string;
+    category?: string;
+    title?: string;
+    description?: string | React.ReactElement;
+    author?: string;
+    linkElement?: React.ReactElement;
+}
+
+declare const BlogCard: ({ variant, date, category, title, imageElement, linkElement, description, author, ...props }: IBlogCard) => React__default.JSX.Element;
+
+interface ITeamCard extends ICard {
+    title?: string;
+    role?: string;
+    description?: string | React.ReactElement;
+}
+
+declare const TeamCard: ({ title, imageElement, role, description, ...props }: ITeamCard) => React__default.JSX.Element;
+
+interface IProjectCard extends ICard {
+    category?: string;
+    title?: string;
+    buttonLabel?: string;
+    linkElement?: React.ReactElement;
+}
+
+declare const ProjectCard: ({ variant, category, title, imageElement, linkElement, buttonLabel, ...props }: IProjectCard) => React__default.JSX.Element;
+
+interface ISlider {
+    $responsiveCSS?: string;
+    arrows?: boolean;
+    dots?: boolean;
+    slidesToShow?: number;
+    slidesToScroll?: number;
+    infinite?: boolean;
+    autoplay?: boolean;
+    spacing?: string;
+    mediaQueries?: object;
+    onSlide?: () => void;
+    className?: string;
+    style?: CSSProperties;
+    children: React.ReactNode;
+}
+
+declare const Slider: ({ arrows, dots, slidesToShow, slidesToScroll, infinite, autoplay, spacing, mediaQueries, className, style, children, onSlide, ...props }: ISlider) => React__default.JSX.Element;
+
+type ICover = {
+    id?: string;
+    anchor?: string;
+    minHeight?: string;
+    contentPosition?: string;
+    imageElement?: React.ReactElement;
+    overlayOpacity?: number;
+    overlayColor?: string;
+    className?: string;
+    style?: CSSProperties;
+    children?: React.ReactNode;
+};
+
+declare const Cover: ({ minHeight, contentPosition, imageElement, overlayOpacity, overlayColor, style, className, children }: ICover) => React__default.JSX.Element;
+
+type ICircularSlider = {
+    id?: string;
+    className?: string;
+    style?: CSSProperties;
+    content?: {
+        name?: string;
+        role?: string;
+        img?: React.ReactNode;
+    }[];
+};
+
+declare const CircularSlider: ({ content, style, className, }: ICircularSlider) => React__default.JSX.Element;
+
+declare const iconsList: string[];
+
+declare const GlobalStyles: React$1.NamedExoticComponent<styled_components.ExecutionProps & object>;
+
+declare function clickOutSideToClose(ref: React.RefObject<HTMLDivElement>, closeFunction: () => void): void;
+
+export { Accordion, AccordionItem, BlogCard, Button, CheckRadioField, Chip, CircularSlider, CloseButton, Column, Cover, Dropdown, DropdownItem, EmptyState, Flex, FormField, GlobalStyles, Heading, Icon, IconBox, IconTitle, ImageWrapper, Loader, Marquee, Modal, OffCanvas, PortalComponent, ProjectCard, Quote, RichText, Row, ScrollingNav, Separator, ShareModal, Slider, SocialLinks, Spacer, TeamCard, Video, VideoEmbed, clickOutSideToClose, iconsList, variables };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oddsgate-ds",
-  "version": "1.0.16",
+  "version": "1.0.18",
   "description": "Miew theme component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
@@ -78,7 +78,7 @@
     "prop-types": "^15.8.1",
     "react-player": "^2.14.0",
     "react-svg": "^16.1.17",
-    "styled-components": "^6.0.2",
+    "styled-components": "^6.1.11",
     "uuid": "^9.0.0",
     "xss": "^1.0.14"
   },

package/rollup.config.js

@@ -82,9 +82,9 @@ export default [
     ],
     external: ['react', 'react-dom', 'storybook', 'styled-components']
   },
-  // {
-  //   input: './src/index.ts',
-  //   output: [{ file: './dist/types.d.ts', format: 'es' }],
-  //   plugins: [dts.default()]
-  // }
+  {
+    input: './src/index.ts',
+    output: [{ file: './dist/types.d.ts', format: 'es' }],
+    plugins: [dts.default()]
+  }
 ]

package/src/components/atoms/Button/Button.theme.ts

@@ -5,6 +5,7 @@ import { IButtonSC } from './Button.interface';
 import { fontSize } from '@/styles/utilities';
 
 export const StyledButton = styled.a<IButtonSC>`
+  font-family: var(--font-nichrome) !important;
   display: inline-flex;
   vertical-align: middle;
   justify-content: center;
@@ -60,9 +61,10 @@ export const StyledButton = styled.a<IButtonSC>`
       case "secondary":
         return css`
           ${fontSize('h5')};
+          font-weight: 700;
+          text-transform:uppercase;
           padding: 18px 26px;
           border-radius: 50px;
-          text-transform:uppercase;
 
           ${props.$mode === "light" ? `
             color: ${colors.primary50};

package/src/components/atoms/FormField/FormField.component.tsx

@@ -20,7 +20,7 @@ export const FormField = ({
       {label && (
         <label
           htmlFor={itemID}
-          className="d-blocks captions text-uppercase mb-2"
+          className="d-blocks h4 color-secondary90 fw-bold text-uppercase mb-2"
         >
           {label}
         </label>

package/src/components/atoms/FormField/FormField.theme.tsx

@@ -33,6 +33,7 @@ export const StyledFieldContainer = styled.div<IFormField>`
 
       label {
         display: block;
+        font-family: var(--font-nichrome) !important;
       }
 
       &:has(select) {
@@ -59,8 +60,9 @@ export const StyledFieldContainer = styled.div<IFormField>`
       input,
       textarea,
       select {
-        font-family: inherit;
+        font-family: var(--font-nichrome) !important;
         ${fontSize('h4')};
+        font-weight: 700;
         text-transform:uppercase;
 
         border-radius: 50px;
@@ -78,6 +80,11 @@ export const StyledFieldContainer = styled.div<IFormField>`
         }
       }
 
+      textarea{
+        border-radius: 46px;
+        height: 11.5rem;
+      }
+
       select{
         option{
           color: ${colors.primary70};

package/src/components/atoms/SocialLinks/SocialLinks.component.tsx

@@ -1,3 +1,4 @@
+import Button from '../Button/Button.component'
 import { ISocialLinks } from './SocialLinks.interface'
 import Icon from '../Icon/Icon.component'
 import React from 'react'
@@ -14,16 +15,22 @@ const SocialLinks = ({
 
   return (
     <StyledSocialLinks variant={variant} className={className} style={style}>
-      {Object.keys(socials).map((social: string) => {
+      {Object.keys(socials).map((social: string, index:number) => {
+        if (!social) return <></>
+
         return (
-          <li>
+          <li key={`social-${index}`}>
             <a
               href={socials[social]}
               target="_blank"
               aria-label={social}
               rel="noreferrer"
             >
-              <Icon icon={`icon-${social}`}></Icon>
+              {variant === "text" ? (
+                <Button variant='link'>{social}</Button>
+              ): (
+                <Icon icon={`icon-${social}`}></Icon>
+              )}
             </a>
           </li>
         )

package/src/components/atoms/SocialLinks/SocialLinks.stories.tsx

@@ -12,6 +12,20 @@ export default {
   argTypes: {}
 } as Meta
 
+
+export const Example: StoryObj<ISocialLinks> = {
+  args: {
+    variant: 'text',
+    socials: {
+      facebook: 'https://www.facebook.com/wearemiew',
+      instagram: 'https://www.instagram.com/wearemiew/',
+      youtube: 'https://www.youtube.com/user/miewshapes',
+      linkedIn: 'https://www.linkedin.com/company/2470068/admin/'
+    }
+  }
+}
+
+
 export const Light: StoryObj<ISocialLinks> = {
   render: args => <SocialLinks {...args} />,
   args: {