oddsgate-ds 1.0.66 → 1.0.68

package/dist/esm/types/components/molecules/CareersCard/CareersCard.component.d.ts

@@ -0,0 +1,4 @@
+import { ICareersCard } from './CareersCard.interface';
+import React from 'react';
+declare const CareersCard: ({ title, description, linkElement, className, style, ...props }: ICareersCard) => React.JSX.Element;
+export default CareersCard;

package/dist/esm/types/components/molecules/CareersCard/CareersCard.interface.d.ts

@@ -0,0 +1,7 @@
+/// <reference types="react" />
+import { ICard } from '../Card/Card.interface';
+export interface ICareersCard extends ICard {
+    title?: string;
+    description?: string | React.ReactElement;
+    linkElement?: React.ReactElement;
+}

package/dist/esm/types/components/molecules/CareersCard/CareersCard.stories.d.ts

@@ -0,0 +1,5 @@
+import type { StoryObj } from '@storybook/react';
+import { ICareersCard } from './CareersCard.interface';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import("@storybook/types").Args>;
+export default _default;
+export declare const Simple: StoryObj<ICareersCard>;

package/dist/esm/types/components/molecules/CareersCard/CareersCard.theme.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ICareersCard } from './CareersCard.interface';
+export declare const StyledCareersCard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ICareersCard>> & string;

package/dist/esm/types/components/molecules/CareersCard/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./CareersCard.component";

package/dist/esm/types/components/molecules/LicenseCard/LicenseCard.component.d.ts

@@ -0,0 +1,4 @@
+import { ILicenseCard } from './LicenseCard.interface';
+import React from 'react';
+declare const LicenseCard: ({ title, imageElement, description, className, style, ...props }: ILicenseCard) => React.JSX.Element;
+export default LicenseCard;

package/dist/esm/types/components/molecules/LicenseCard/LicenseCard.interface.d.ts

@@ -0,0 +1,6 @@
+/// <reference types="react" />
+import { ICard } from '../Card/Card.interface';
+export interface ILicenseCard extends ICard {
+    title?: string;
+    description?: string | React.ReactElement;
+}

package/dist/esm/types/components/molecules/LicenseCard/LicenseCard.stories.d.ts

@@ -0,0 +1,5 @@
+import type { StoryObj } from '@storybook/react';
+import { ILicenseCard } from './LicenseCard.interface';
+declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import("@storybook/types").Args>;
+export default _default;
+export declare const Simple: StoryObj<ILicenseCard>;

package/dist/esm/types/components/molecules/LicenseCard/LicenseCard.theme.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ILicenseCard } from './LicenseCard.interface';
+export declare const StyledLicenseCard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, ILicenseCard>> & string;

package/dist/esm/types/components/molecules/LicenseCard/index.d.ts

@@ -0,0 +1 @@
+export { default } from "./LicenseCard.component";

package/dist/esm/types/index.d.ts

@@ -36,8 +36,10 @@ export { default as BlogCard } from './components/molecules/BlogCard';
 export { default as TeamCard } from './components/molecules/TeamCard';
 export { default as LogosCard } from './components/molecules/LogosCard';
 export { default as ProductCard } from './components/molecules/ProductCard';
+export { default as LicenseCard } from './components/molecules/LicenseCard';
 export { default as NewsCard } from './components/molecules/NewsCard';
 export { default as EventsCard } from './components/molecules/EventsCard';
+export { default as CareersCard } from './components/molecules/CareersCard';
 export { default as Slider } from './components/organisms/Slider';
 export { default as Cover } from './components/organisms/Cover';
 export { default as Tabs } from './components/organisms/Tabs';

package/dist/types.d.ts

@@ -527,6 +527,13 @@ interface IProductCard extends ICard {
 
 declare const ProductCard: ({ title, imageElement, description, className, style, ...props }: IProductCard) => React__default.JSX.Element;
 
+interface ILicenseCard extends ICard {
+    title?: string;
+    description?: string | React.ReactElement;
+}
+
+declare const LicenseCard: ({ title, imageElement, description, className, style, ...props }: ILicenseCard) => React__default.JSX.Element;
+
 interface INewsCard extends ICard {
     date?: string;
     category?: string;
@@ -547,6 +554,14 @@ interface IEventsCard extends ICard {
 
 declare const EventsCard: ({ variant, date, category, title, imageElement, linkElement, description, ...props }: IEventsCard) => React__default.JSX.Element;
 
+interface ICareersCard extends ICard {
+    title?: string;
+    description?: string | React.ReactElement;
+    linkElement?: React.ReactElement;
+}
+
+declare const CareersCard: ({ title, description, linkElement, className, style, ...props }: ICareersCard) => React__default.JSX.Element;
+
 interface ISlider {
     $responsiveCSS?: string;
     arrows?: boolean;
@@ -621,4 +636,4 @@ declare function clickOutSideToClose(ref: React.RefObject<HTMLDivElement>, close
 
 declare const isTouchDevice: () => boolean;
 
-export { Accordion, AccordionItem, BlogCard, Button, CheckRadioField, Chip, CircularSlider, CloseButton, Column, Counter, Cover, Dropdown, DropdownItem, EmptyState, EventsCard, Flex, FormField, GlobalStyles, Heading, Icon, IconBox, IconTitle, ImageWrapper, Loader, LogosCard, Marquee, Modal, NewsCard, OffCanvas, PortalComponent, ProductCard, Quote, RichText, Row, ScrollingNav, Separator, ShareModal, Slider, SocialLinks, Spacer, Tabs, TeamCard, Video, VideoEmbed, clickOutSideToClose, iconsList, isTouchDevice, variables };
+export { Accordion, AccordionItem, BlogCard, Button, CareersCard, CheckRadioField, Chip, CircularSlider, CloseButton, Column, Counter, Cover, Dropdown, DropdownItem, EmptyState, EventsCard, Flex, FormField, GlobalStyles, Heading, Icon, IconBox, IconTitle, ImageWrapper, LicenseCard, Loader, LogosCard, Marquee, Modal, NewsCard, OffCanvas, PortalComponent, ProductCard, Quote, RichText, Row, ScrollingNav, Separator, ShareModal, Slider, SocialLinks, Spacer, Tabs, TeamCard, Video, VideoEmbed, clickOutSideToClose, iconsList, isTouchDevice, variables };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oddsgate-ds",
-  "version": "1.0.66",
+  "version": "1.0.68",
   "description": "Miew theme component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

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

@@ -41,7 +41,9 @@ const Button = ({
     >
       {variant === "primary" ? (
         <>
+          {leftIcon}
           {children && <span>{children}</span>}
+          {rightIcon}
           {!rightIcon && !leftIcon && (<Icon icon={"icon-arrow-right"} />)}
         </>
       ) : (

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

@@ -41,13 +41,14 @@ export const Primary: StoryObj<IButton> = {
   render: args => <Button {...args} />,
   args: {
     mode: 'dark',
-    rightIcon: <Icon icon="icon-chevron-right"></Icon>
+    rightIcon: <Icon icon="icon-arrow-right"></Icon>
   }
 }
 export const Secondary: StoryObj<IButton> = {
   args: {
     ...Primary.args,
-    variant: 'secondary'
+    variant: 'secondary',
+    rightIcon: <Icon icon="icon-arrow-right"></Icon>
   }
 }
 export const Link: StoryObj<IButton> = {

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

@@ -71,6 +71,44 @@ export const StyledButton = styled.a<IButtonSC>`
               }
             }
           `;
+      case "secondary":
+        return css`
+          ${fontSize('h5')};
+          padding: 0.8rem 1.6rem;
+          border-radius: 50px;
+          text-transform:uppercase;
+
+          ${props.$mode === "light" ? `
+            color: ${colors.primary50};
+            background-color: ${colors.secondary50};
+
+            ` : `
+            color: ${colors.secondary50};
+            background-color: ${colors.primary50};
+          `}
+
+          & span{
+            transition: all 0.3s ease;
+          }
+          & i{
+            position: absolute;
+            top: 50%;
+            right: 0.6rem;
+            font-size: 16px;
+            opacity: 0;
+            transform: scale(0) translateX(-4px) translateY(-50%);
+          }
+
+          &:hover{
+            & span{
+              transform: translateX(-0.5rem);
+            }
+            & i{
+              opacity: 1;
+              transform: scale(1) translateX(0) translateY(-50%);
+            }
+          }
+        `;
       case "link":
         return css`
             ${fontSize('h5')};

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

@@ -18,6 +18,7 @@ export const Row = ({
   return (
     <StyledContainer $fluid={fluid} className={className} style={style}>
       <StyledRow
+        $fluid={fluid}
         $direction={direction}
         $align={align}
         $justify={justify}

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

@@ -20,7 +20,7 @@ export const StyledContainer = styled.div<IRowSC>`
   ${props => !props.$fluid && Object.keys(CONTAINER_NAMES)
     .sort((k1, k2) => CONTAINER_NAMES.indexOf(k1) - CONTAINER_NAMES.indexOf(k2))
     .map(k => config(CONTAINER_NAMES).mediaContainer[CONTAINER_NAMES[k]]`
-        max-width: ${grid_conf.container[CONTAINER_NAMES[k]]};
+      max-width: ${grid_conf.container[CONTAINER_NAMES[k]]};
     `)}
 
 `
@@ -32,8 +32,8 @@ export const StyledRow = styled.div<IRowSC>`
   justify-content: ${props => props.$justify ? props.$justify : "flex-start"};
   flex-wrap: ${props => props.$wrap ? props.$wrap : "wrap"};
 
-  margin-right: -${gutter};
-  margin-left: -${gutter};
+  margin-left: ${props => props.$fluid ? "0" : `-${gutter}`};
+  margin-right: ${props => props.$fluid ? "0" : `-${gutter}`};
 
   @media only screen and (max-width: ${responsiveMedia}) {
      ${({ $mobileSpace }) => $mobileSpace && `
@@ -47,6 +47,10 @@ export const StyledColumn = styled.div<IColumnSC>`
   padding-right: ${gutter};
   padding-left: ${gutter};
 
+  ${({ $align }) => $align && `
+    align: ${$align};
+  `}
+
   ${({ $xs }) => $xs && `
     flex-basis: ${100 / grid_conf.gridSize * $xs}%;
     max-width: ${100 / grid_conf.gridSize * $xs}%;
@@ -66,13 +70,12 @@ export const StyledColumn = styled.div<IColumnSC>`
   }
 
   @media only screen and (max-width: ${responsiveMedia}) {
-    ${({ $mobileOrder }) => $mobileOrder && `
-      order: ${$mobileOrder};
-    `}
-
     &:empty{
       display:none
     }
+    ${({ $mobileOrder }) => $mobileOrder && `
+      order: ${$mobileOrder};
+    `}
   }
 `;
 

package/src/components/molecules/CareersCard/CareersCard.component.tsx

@@ -0,0 +1,27 @@
+import Heading from '@/components/atoms/Heading'
+import { ICareersCard } from './CareersCard.interface'
+import React from 'react'
+import { StyledCareersCard } from './CareersCard.theme'
+
+const CareersCard = ({
+  title,
+  description,
+  linkElement,
+  className,
+  style,
+  ...props
+}: ICareersCard) => {
+  return (
+    <StyledCareersCard className={className} style={style}>
+      <Heading tag={'h3'} size={'h4'} className={'text-uppercase fw-bold'}>
+        {title}
+      </Heading>
+      <Heading tag={'span'} size={'h5'} className={'mt-4 mb-4'}>
+        {description}
+      </Heading>
+      {linkElement}
+    </StyledCareersCard>
+  )
+}
+
+export default CareersCard

package/src/components/molecules/CareersCard/CareersCard.interface.ts

@@ -0,0 +1,7 @@
+import { ICard } from '../Card/Card.interface';
+
+export interface ICareersCard extends ICard {
+  title?: string
+  description?: string | React.ReactElement
+  linkElement?: React.ReactElement
+}

package/src/components/molecules/CareersCard/CareersCard.stories.tsx

@@ -0,0 +1,30 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import CareersCard from './CareersCard.component'
+import { ICareersCard } from './CareersCard.interface'
+import React from 'react'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/CareersCard',
+  component: CareersCard,
+  tags: ['autodocs']
+} as Meta
+
+export const Simple: StoryObj<ICareersCard> = {
+  render: args => (
+    <>
+      <CareersCard
+        {...args}
+        title="Lorem"
+        style={{ maxWidth: '320px' }}
+      ></CareersCard>
+      <CareersCard {...args} style={{ maxWidth: '320px' }}></CareersCard>
+    </>
+  ),
+  args: {
+    title: 'Cras vel facilisis tellus',
+    description:
+      'Cras vel facilisis tellus, id iaculis risus. Vestibulum non mollis ipsum. Vestibulum faucibus nisl sit amet magna interdum tristique. Cras vel facilisis tellus, id iaculis risus. Vestibulum non mollis ipsum. Vestibulum faucibus nisl sit amet magna interdum tristique.'
+  }
+}

package/src/components/molecules/CareersCard/CareersCard.theme.ts

@@ -0,0 +1,13 @@
+import { colors, radius } from '@/styles/variables';
+import styled, { css } from 'styled-components';
+
+import { ICareersCard } from './CareersCard.interface';
+
+export const StyledCareersCard = styled.div <ICareersCard>`
+  color: ${colors.third10};
+  background-color: ${colors.secondary50};
+  padding: 2rem;
+  border-radius: ${radius.md};
+
+`;
+

package/src/components/molecules/CareersCard/index.ts

@@ -0,0 +1 @@
+export { default } from "./CareersCard.component";

package/src/components/molecules/LicenseCard/LicenseCard.component.tsx

@@ -0,0 +1,27 @@
+import Heading from '@/components/atoms/Heading'
+import { ILicenseCard } from './LicenseCard.interface'
+import React from 'react'
+import { StyledLicenseCard } from './LicenseCard.theme'
+
+const LicenseCard = ({
+  title,
+  imageElement,
+  description,
+  className,
+  style,
+  ...props
+}: ILicenseCard) => {
+  return (
+    <StyledLicenseCard className={className} style={style}>
+      <Heading tag={'h3'} size={'h2'} className={'text-uppercase fw-bold'}>
+        {title}
+      </Heading>
+      <Heading tag={'span'} size={'h5'} className={'mt-4 mb-4'}>
+        {description}
+      </Heading>
+      {imageElement}
+    </StyledLicenseCard>
+  )
+}
+
+export default LicenseCard

package/src/components/molecules/LicenseCard/LicenseCard.interface.ts

@@ -0,0 +1,6 @@
+import { ICard } from '../Card/Card.interface';
+
+export interface ILicenseCard extends ICard {
+  title?: string
+  description?: string | React.ReactElement
+}

package/src/components/molecules/LicenseCard/LicenseCard.stories.tsx

@@ -0,0 +1,42 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { ILicenseCard } from './LicenseCard.interface'
+import LicenseCard from './LicenseCard.component'
+import React from 'react'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/LicenseCard',
+  component: LicenseCard,
+  tags: ['autodocs']
+} as Meta
+
+const image = (
+  <img
+    width="100%"
+    height="100%"
+    sizes="100vw"
+    decoding="async"
+    src="/assets/placeholder.png"
+    alt="Empty state"
+  />
+)
+
+export const Simple: StoryObj<ILicenseCard> = {
+  render: args => (
+    <>
+      <LicenseCard
+        {...args}
+        title="Lorem"
+        style={{ maxWidth: '320px' }}
+      ></LicenseCard>
+      <LicenseCard {...args} style={{ maxWidth: '320px' }}></LicenseCard>
+    </>
+  ),
+  args: {
+    title: 'Cras vel facilisis tellus',
+    imageElement: image,
+    description:
+      'Cras vel facilisis tellus, id iaculis risus. Vestibulum non mollis ipsum. Vestibulum faucibus nisl sit amet magna interdum tristique. Cras vel facilisis tellus, id iaculis risus. Vestibulum non mollis ipsum. Vestibulum faucibus nisl sit amet magna interdum tristique.'
+  }
+}

package/src/components/molecules/LicenseCard/LicenseCard.theme.ts

@@ -0,0 +1,21 @@
+import { colors, radius } from '@/styles/variables';
+import styled, { css } from 'styled-components';
+
+import { ILicenseCard } from './LicenseCard.interface';
+
+export const StyledLicenseCard = styled.div <ILicenseCard>`
+  display: flex;
+  flex-flow: column;
+  align-items: center;
+  text-align:center;
+  background-color: ${colors.third10};
+  padding: 2rem;
+  border-radius: 0 ${radius.lg};
+
+  & img{
+    width: 100%;
+    max-width: 7rem;
+    object-fit: contain;
+  }
+`;
+

package/src/components/molecules/LicenseCard/index.ts

@@ -0,0 +1 @@
+export { default } from "./LicenseCard.component";

package/src/components/molecules/Modal/Modal.theme.ts

@@ -35,7 +35,7 @@ export const StyledWrapper = styled.div<IModal>`
   will-change: transform;
   overflow: hidden;
   overflow-y: auto;
-  z-index: ${zIndexes['modal']};
+  z-index: 101;
 
   &:focus {
     outline: none

package/src/components/organisms/Slider/Slider.theme.ts

@@ -1,4 +1,4 @@
-import { colors, radius, responsiveMedia, shadows, spaces } from '@/styles/variables';
+import { colors, gutter, radius, responsiveMedia, shadows, spaces } from '@/styles/variables';
 import styled, { css } from 'styled-components';
 
 import { ISlider } from './Slider.interface';
@@ -134,7 +134,6 @@ const SliderStyles = `
   }
 `;
 
-
 export const StyledSlider = styled.div<ISlider>`
   position:relative;
   width: 100%;
@@ -144,13 +143,23 @@ export const StyledSlider = styled.div<ISlider>`
         ${SliderStyles}
       }
       @media only screen and (min-width: ${responsiveMedia}) {
+        .blaze-track{
+          display: flex;
+          flex-direction: row;
+          align-items: stretch;
+          justify-content: flex-start;
+          flex-wrap: wrap;
+
+          margin-right: -${gutter};
+          margin-left: -${gutter};
+        }
         .blaze-controls{
           display:none;
         }
       }
     `)
     : (`
+
       ${SliderStyles}
     `)}
-
 `;

package/src/index.ts

@@ -42,8 +42,10 @@ export { default as BlogCard } from './components/molecules/BlogCard'
 export { default as TeamCard } from './components/molecules/TeamCard'
 export { default as LogosCard } from './components/molecules/LogosCard'
 export { default as ProductCard } from './components/molecules/ProductCard'
+export { default as LicenseCard } from './components/molecules/LicenseCard'
 export { default as NewsCard } from './components/molecules/NewsCard'
 export { default as EventsCard } from './components/molecules/EventsCard'
+export { default as CareersCard } from './components/molecules/CareersCard'
 // //organisms
 export { default as Slider } from './components/organisms/Slider'
 export { default as Cover } from './components/organisms/Cover'