oddsgate-ds 1.0.67 → 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/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/types.d.ts

@@ -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.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/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/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'