oddsgate-ds 1.0.67 → 1.0.69

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/index.d.ts

@@ -39,6 +39,7 @@ 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/esm/types/styles/variables.d.ts

@@ -5,7 +5,7 @@ export declare const gutter: string;
 export declare const desktop_width: number;
 export declare const tablet_width: number;
 export declare const mobile_width: number;
-export declare const responsiveMedia = "980px";
+export declare const responsiveMedia = "768px";
 export declare const mobileMedia = "360px";
 export declare const easeOutExpo = "cubic-bezier(.32,.94,.6,1);";
 export type IBreakpoints = {

package/dist/types.d.ts

@@ -10,7 +10,7 @@ declare const gutter: string;
 declare const desktop_width: number;
 declare const tablet_width: number;
 declare const mobile_width: number;
-declare const responsiveMedia = "980px";
+declare const responsiveMedia = "768px";
 declare const mobileMedia = "360px";
 declare const easeOutExpo = "cubic-bezier(.32,.94,.6,1);";
 type IBreakpoints = {
@@ -554,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;
@@ -628,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, 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 };
+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.67",
+  "version": "1.0.69",
   "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/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-self: ${$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/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/index.ts

@@ -45,6 +45,7 @@ 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'

package/src/styles/variables.ts

@@ -10,7 +10,7 @@ export const gutter = pxToRem(8); //needs to be in this file
 export const desktop_width:number = 1620; //container size of design on desktop
 export const tablet_width:number = 768; //container size of design on tablet
 export const mobile_width:number = 375; //container size of design on mobile
-export const responsiveMedia = "980px"; //mobile media value for bootstrap
+export const responsiveMedia = "768px"; //mobile media value for bootstrap
 export const mobileMedia = "360px"; //mobile media value
 
 export const easeOutExpo = "cubic-bezier(.32,.94,.6,1);";