oddsgate-ds 1.0.66 → 1.0.67

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,6 +36,7 @@ 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 Slider } from './components/organisms/Slider';

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;
@@ -621,4 +628,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, 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.67",
   "description": "Miew theme component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

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/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/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,6 +42,7 @@ 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'
 // //organisms