oddsgate-ds 1.0.25 → 1.0.27

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

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

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

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

package/dist/{cjs/types/components/molecules/ProjectCard/ProjectCard.stories.d.ts → esm/types/components/molecules/ProductCard/ProductCard.stories.d.ts}

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

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

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

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

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

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

@@ -35,7 +35,7 @@ export { default as IconTitle } from './components/molecules/IconTitle';
 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 ProjectCard } from './components/molecules/ProjectCard';
+export { default as ProductCard } from './components/molecules/ProductCard';
 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

@@ -511,14 +511,12 @@ interface ILogosCard {
 
 declare const LogosCard: ({ imageElement, title, className, style, ...props }: ILogosCard) => React__default.JSX.Element;
 
-interface IProjectCard extends ICard {
-    category?: string;
+interface IProductCard extends ICard {
     title?: string;
-    buttonLabel?: string;
-    linkElement?: React.ReactElement;
+    description?: string | React.ReactElement;
 }
 
-declare const ProjectCard: ({ variant, category, title, imageElement, linkElement, buttonLabel, ...props }: IProjectCard) => React__default.JSX.Element;
+declare const ProductCard: ({ title, imageElement, description, className, style, ...props }: IProductCard) => React__default.JSX.Element;
 
 interface ISlider {
     $responsiveCSS?: string;
@@ -590,4 +588,4 @@ declare const GlobalStyles: React$1.NamedExoticComponent<styled_components.Execu
 
 declare function clickOutSideToClose(ref: React.RefObject<HTMLDivElement>, closeFunction: () => void): void;
 
-export { Accordion, AccordionItem, BlogCard, Button, CheckRadioField, Chip, CircularSlider, CloseButton, Column, Counter, Cover, Dropdown, DropdownItem, EmptyState, Flex, FormField, GlobalStyles, Heading, Icon, IconBox, IconTitle, ImageWrapper, Loader, LogosCard, Marquee, Modal, OffCanvas, PortalComponent, ProjectCard, Quote, RichText, Row, ScrollingNav, Separator, ShareModal, Slider, SocialLinks, Spacer, Tabs, TeamCard, Video, VideoEmbed, clickOutSideToClose, iconsList, variables };
+export { Accordion, AccordionItem, BlogCard, Button, CheckRadioField, Chip, CircularSlider, CloseButton, Column, Counter, Cover, Dropdown, DropdownItem, EmptyState, Flex, FormField, GlobalStyles, Heading, Icon, IconBox, IconTitle, ImageWrapper, Loader, LogosCard, Marquee, Modal, OffCanvas, PortalComponent, ProductCard, Quote, RichText, Row, ScrollingNav, Separator, ShareModal, Slider, SocialLinks, Spacer, Tabs, TeamCard, Video, VideoEmbed, clickOutSideToClose, iconsList, variables };

package/package.json

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

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

@@ -63,7 +63,7 @@ export const StyledButton = styled.a<IButtonSC>`
           ${fontSize('h5')};
           font-weight: 700;
           text-transform:uppercase;
-          padding: 18px 26px;
+          padding: 10px 20px;
           border-radius: 50px;
 
           ${props.$mode === "light" ? `
@@ -99,7 +99,7 @@ export const StyledButton = styled.a<IButtonSC>`
             color: ${colors.secondary50};
 
             &:hover{
-              color: ${colors.third50};
+              color: ${colors.primary50};
             }
           `}
         `;

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

@@ -4,7 +4,7 @@ import { ISocialLinks } from './SocialLinks.interface';
 import { colors } from '@/styles/variables';
 
 export const StyledSocialLinks = styled.ul<ISocialLinks>`
-  display: flex;
+  display: inline-flex;
   align-items: center;
   gap: 12px;
 

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

@@ -0,0 +1,44 @@
+import { StyledProductCard, StyledProductCardWrapper } from './ProductCard.theme'
+
+import Heading from '@/components/atoms/Heading'
+import { IProductCard } from './ProductCard.interface'
+import ImageWrapper from '@/components/atoms/ImageWrapper'
+import React from 'react'
+import RichText from '@/components/atoms/RichText/RichText.component'
+
+const ProductCard = ({
+  title,
+  imageElement,
+  description,
+  className,
+  style,
+  ...props
+}: IProductCard) => {
+
+  const parts = title ? title.split(" ") : [];
+  const half = parts ? parts.length / 2 : 0;
+
+  const firstRowTitle = Array.prototype.join.call({
+    ...parts,
+    length: half,
+  }, " ");
+
+  const secondRowTitle = parts.slice(half, parts?.length).join(" ")
+
+  return (
+    <StyledProductCard className={className} style={style}>
+      <StyledProductCardWrapper>
+        <Heading tag={'h3'} size={'h3'} className={'fw-bold'}>
+          {firstRowTitle}
+        </Heading>
+        {imageElement}
+        <Heading tag={'h3'} size={'h3'} className={'fw-bold'}>
+          {secondRowTitle}
+        </Heading>
+      </StyledProductCardWrapper>
+      {description && <RichText tag='p' className='color-secondary50 mt-4'>{description}</RichText>}
+    </StyledProductCard>
+  )
+}
+
+export default ProductCard

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

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

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

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { IProductCard } from './ProductCard.interface'
+import ProductCard from './ProductCard.component'
+import React from 'react'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/ProductCard',
+  component: ProductCard,
+  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<IProductCard> = {
+  render: args => <ProductCard {...args} style={{ maxWidth: '320px' }}></ProductCard>,
+  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/ProductCard/ProductCard.theme.ts

@@ -0,0 +1,24 @@
+import { colors, radius } from '@/styles/variables';
+import styled, { css } from 'styled-components';
+
+import { IProductCard } from './ProductCard.interface';
+
+export const StyledProductCard = styled.div <IProductCard>`
+  text-align:center;
+
+  & img{
+    width: 100%;
+    max-width: 10rem;
+    object-fit: contain;
+  }
+`;
+
+export const StyledProductCardWrapper = styled.div<IProductCard>`
+  display:flex;
+  flex-flow:column;
+  align-items: center;
+  gap: 1rem;
+  background-color: ${colors.primary50};
+  padding: 2rem;
+  border-radius: ${radius.md};
+`;

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

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

package/src/components/organisms/CircularSlider/CircularSlider.component.tsx

@@ -101,14 +101,14 @@ const CircularSlider = ({
       }, 400);
 
       content && setSlideContent(content[currentSlide] as any)
-      slides[currentSlide].classList.add('slides-holder__item_active');
+      slides[currentSlide].classList.add('active');
       slides[currentSlide].style.height = slides[currentSlide].style.width = slidesSize + 20 + 'px';
     };
     const removeStyle = () => {
       contentHolder?.current?.classList.remove('active');
 
       content && setSlideContent(content[currentSlide] as any)
-      slides[currentSlide].classList.remove('slides-holder__item_active');
+      slides[currentSlide].classList.remove('active');
       slides[currentSlide].style.height = slides[currentSlide].style.width = slidesSize + 'px';
     };
 

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

@@ -3,12 +3,7 @@ import styled from 'styled-components';
 
 export const StyledCircularSlider = styled.div<ICircularSlider>`
   width: 100%;
-  min-height: 100vh;
   overflow: hidden;
-  display: flex;
-  justify-content: center;
-  align-items: flex-end;
-
 `;
 
 export const StyledCircularSliderWrapper = styled.div<ICircularSlider>`
@@ -17,8 +12,8 @@ export const StyledCircularSliderWrapper = styled.div<ICircularSlider>`
   justify-content: center;
   margin: 0 auto;
   margin-right: 0;
-  padding: 20px 20px 0px 20px;
-  transform: translateX(65%);
+  top: 50%;
+  transform: translate(65%, -50%);
 `;
 
 export const StyledCircularSliderSlides = styled.div<ICircularSlider>`
@@ -40,7 +35,7 @@ export const StyledCircularSliderSlide = styled.div<ICircularSlider>`
     pointer-events:none;
   }
 
-  &.slides-holder__item_active{
+  &.active{
     filter: brightness(100%);
   }
 `;
@@ -54,13 +49,12 @@ export const StyledCircularSliderContent = styled.div<ICircularSlider>`
   text-align: center;
 
   opacity: 0;
-  transform: translateY(10%);
+  transform: translateY(5%);
   transition: all 0.3s ease;
 
   &.active{
     opacity: 1;
     transform: translateY(-50%);
-
   }
 `;
 

package/src/index.ts

@@ -41,7 +41,7 @@ export { default as IconTitle } from './components/molecules/IconTitle'
 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 ProjectCard } from './components/molecules/ProjectCard'
+export { default as ProductCard } from './components/molecules/ProductCard'
 // //organisms
 export { default as Slider } from './components/organisms/Slider'
 export { default as Cover } from './components/organisms/Cover'

package/src/styles/utilities.ts

@@ -68,6 +68,7 @@ export const utilities: {
     values: {
       relative: "relative",
       absolute: "absolute",
+      sticky: "sticky",
       fixed: "fixed"
     },
   },
@@ -210,6 +211,12 @@ export const utilities: {
     class: "ms",
     values: spacers
   },
+  "negative-margin-start": {
+    responsive: true,
+    property: "margin-left",
+    class: "ms-neg",
+    values: spacesNegative
+  },
   "padding": {
     responsive: true,
     property: "padding",

package/dist/cjs/types/components/molecules/ProjectCard/ProjectCard.component.d.ts

@@ -1,4 +0,0 @@
-import { IProjectCard } from './ProjectCard.interface';
-import React from 'react';
-declare const ProjectCard: ({ variant, category, title, imageElement, linkElement, buttonLabel, ...props }: IProjectCard) => React.JSX.Element;
-export default ProjectCard;

package/dist/cjs/types/components/molecules/ProjectCard/ProjectCard.interface.d.ts

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

package/dist/cjs/types/components/molecules/ProjectCard/ProjectCard.theme.d.ts

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { IProjectCard } from './ProjectCard.interface';
-export declare const StyledProjectCard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../Card/Card.interface").ICard, IProjectCard>> & string & Omit<({ variant, imageElement, children, className, style, ...props }: import("../Card/Card.interface").ICard) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;

package/dist/cjs/types/components/molecules/ProjectCard/index.d.ts

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

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

@@ -1,4 +0,0 @@
-import { IProjectCard } from './ProjectCard.interface';
-import React from 'react';
-declare const ProjectCard: ({ variant, category, title, imageElement, linkElement, buttonLabel, ...props }: IProjectCard) => React.JSX.Element;
-export default ProjectCard;

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

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

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

@@ -1,3 +0,0 @@
-/// <reference types="react" />
-import { IProjectCard } from './ProjectCard.interface';
-export declare const StyledProjectCard: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("../Card/Card.interface").ICard, IProjectCard>> & string & Omit<({ variant, imageElement, children, className, style, ...props }: import("../Card/Card.interface").ICard) => import("react").JSX.Element, keyof import("react").Component<any, {}, any>>;

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

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

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

@@ -1,45 +0,0 @@
-import Button from '@/components/atoms/Button/Button.component'
-import Chip from '@/components/atoms/Chip/Chip.component'
-import Heading from '@/components/atoms/Heading'
-import { IProjectCard } from './ProjectCard.interface'
-import Icon from '@/components/atoms/Icon/Icon.component'
-import ImageWrapper from '@/components/atoms/ImageWrapper'
-import React from 'react'
-import Separator from '@/components/atoms/Separator/Separator.component'
-import { StyledProjectCard } from './ProjectCard.theme'
-
-const ProjectCard = ({
-  variant,
-  category,
-  title,
-  imageElement,
-  linkElement,
-  buttonLabel,
-  ...props
-}: IProjectCard) => {
-  return (
-    <StyledProjectCard
-      variant={variant}
-      imageElement={
-        <ImageWrapper aspectRatioHeight={variant === 'featured' ? 40 : 82}>
-          {imageElement}
-        </ImageWrapper>
-      }
-      {...props}
-    >
-      <div className="w-100">
-        <div className="d-flex align-items-center justify-content-between mb-4">
-          <Heading tag={'h3'} size={'h5'} className={'textEllipsis'}>
-            {title}
-          </Heading>
-          <Icon icon="icon-forward-arrow"></Icon>
-        </div>
-
-        <Separator color="#fff" height="1px" />
-        {linkElement}
-      </div>
-    </StyledProjectCard>
-  )
-}
-
-export default ProjectCard

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

@@ -1,8 +0,0 @@
-import { ICard } from '../Card/Card.interface';
-
-export interface IProjectCard extends ICard {
-  category?: string
-  title?: string
-  buttonLabel?: string,
-  linkElement?: React.ReactElement
-}

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

@@ -1,72 +0,0 @@
-import { Column, Row } from './../../atoms/FlexGrid'
-import type { Meta, StoryObj } from '@storybook/react'
-
-import { IProjectCard } from './ProjectCard.interface'
-import ProjectCard from './ProjectCard.component'
-import React from 'react'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Components/ProjectCard',
-  component: ProjectCard,
-  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<IProjectCard> = {
-  render: args => (
-    <Row>
-      <Column md={4}>
-        <ProjectCard {...args}></ProjectCard>
-      </Column>
-      <Column md={4}>
-        <ProjectCard {...args}></ProjectCard>
-      </Column>
-      <Column md={4}>
-        <ProjectCard {...args}></ProjectCard>
-      </Column>
-
-      <Column md={6}>
-        <ProjectCard variant="featured" {...args}></ProjectCard>
-      </Column>
-      <Column md={6}>
-        <ProjectCard variant="featured" {...args}></ProjectCard>
-      </Column>
-
-      <Column md={4}>
-        <ProjectCard {...args}></ProjectCard>
-      </Column>
-      <Column md={4}>
-        <ProjectCard {...args}></ProjectCard>
-      </Column>
-      <Column md={4}>
-        <ProjectCard {...args}></ProjectCard>
-      </Column>
-
-      <Column md={8}>
-        <ProjectCard variant="featured" {...args}></ProjectCard>
-      </Column>
-
-      <Column md={4}>
-        <ProjectCard {...args}></ProjectCard>
-      </Column>
-    </Row>
-  ),
-  args: {
-    category: 'Document type',
-    title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
-    imageElement: image,
-    buttonLabel: 'Download',
-    linkElement: <a href="#" className="linker"></a>
-  }
-}

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

@@ -1,61 +0,0 @@
-import styled, { css } from 'styled-components';
-
-import Card from '../Card/Card.component';
-import { IProjectCard } from './ProjectCard.interface';
-import { colors } from '@/styles/variables';
-
-export const StyledProjectCard = styled(Card) <IProjectCard>`
-  & picture{
-    &:before{
-      content: '';
-      position: absolute;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(0,0,0,0.5);
-      z-index: 1;
-    }
-  }
-
-  & figcaption{
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    align-items: flex-end;
-    padding: 1rem;
-    color: ${colors.white};
-    z-index: 2;
-
-    & i{
-      min-width: 3rem;
-      height: 3rem;
-      line-height: 3rem;
-      font-size: 2.6rem;
-
-      border-radius: 50px;
-      color: ${colors.deepblue};
-      background-color: ${colors.softgreen};
-
-      transition: all 0.3s linear;
-      transform: rotateZ(-45deg);
-      transform-origin: center center;
-      text-align: center;
-
-      &::before{
-        line-height: inherit;
-      }
-    }
-  }
-
-  &:hover{
-    & figcaption{
-      & i{
-        transform: rotateZ(0);
-      }
-    }
-  }
-`;

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

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