oddsgate-ds 1.0.59 → 1.0.60

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

@@ -1,6 +1,7 @@
 import { CSSProperties } from 'react';
 export type ICard = {
     variant?: string;
+    $variant?: string;
     imageElement?: React.ReactElement;
     className?: string;
     style?: CSSProperties;

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

@@ -3,3 +3,4 @@ import { INewsCard } from './NewsCard.interface';
 declare const _default: import("@storybook/types").ComponentAnnotations<import("@storybook/react").ReactRenderer, import("@storybook/types").Args>;
 export default _default;
 export declare const Simple: StoryObj<INewsCard>;
+export declare const Featured: StoryObj<INewsCard>;

package/dist/esm/types/styles/variables.d.ts

@@ -17,6 +17,7 @@ export type IBreakpoints = {
     $xxl?: string;
 };
 export declare const colors: Record<string, string>;
+export declare const gradients: Record<string, string>;
 export declare const spaces: Record<string, string>;
 export declare const spacesNegative: Record<string, string>;
 export declare const typography: Record<string, Record<string, unknown>>;

package/dist/types.d.ts

@@ -22,6 +22,7 @@ type IBreakpoints = {
     $xxl?: string;
 };
 declare const colors: Record<string, string>;
+declare const gradients: Record<string, string>;
 declare const spaces: Record<string, string>;
 declare const spacesNegative: Record<string, string>;
 declare const typography: Record<string, Record<string, unknown>>;
@@ -42,6 +43,7 @@ declare const variables_colors: typeof colors;
 declare const variables_desktop_width: typeof desktop_width;
 declare const variables_easeOutExpo: typeof easeOutExpo;
 declare const variables_fontName: typeof fontName;
+declare const variables_gradients: typeof gradients;
 declare const variables_grid_conf: typeof grid_conf;
 declare const variables_gutter: typeof gutter;
 declare const variables_mobileMedia: typeof mobileMedia;
@@ -63,6 +65,7 @@ declare namespace variables {
     variables_desktop_width as desktop_width,
     variables_easeOutExpo as easeOutExpo,
     variables_fontName as fontName,
+    variables_gradients as gradients,
     variables_grid_conf as grid_conf,
     variables_gutter as gutter,
     variables_mobileMedia as mobileMedia,
@@ -481,6 +484,7 @@ declare const IconTitle: ({ label, icon, imageElement, className, style, childre
 
 type ICard = {
     variant?: string;
+    $variant?: string;
     imageElement?: React.ReactElement;
     className?: string;
     style?: CSSProperties;

package/package.json

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

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

@@ -31,8 +31,11 @@ const BlogCard = ({
       <Heading tag={'h3'} size={'h4'} className={'fw-bold textEllipsis'}>
         {title}
       </Heading>
+      <Heading tag={'span'} size={'captions'} className={'textEllipsis mt-2'}>
+        {description}
+      </Heading>
       {date && (
-        <RichText tag={'p'} className="fw-bold text-uppercase mt-6">
+        <RichText tag={'p'} className="fw-bold mt-3">
           {date}
         </RichText>
       )}

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

@@ -5,7 +5,7 @@ import React from 'react';
 
 const Card = ({ variant, imageElement, children, className, style, ...props }: ICard) => {
   return (
-    <StyledFigure variant={variant} className={className} style={style}>
+    <StyledFigure $variant={variant} className={className} style={style}>
       {imageElement}
       <StyledFigcaption>{children}</StyledFigcaption>
     </StyledFigure>

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

@@ -2,6 +2,7 @@ import { CSSProperties } from 'react';
 
 export type ICard = {
   variant?: string
+  $variant?: string
   imageElement?: React.ReactElement
   className?: string
   style?: CSSProperties

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

@@ -1,6 +1,7 @@
 import styled, { css } from 'styled-components';
 
 import { ICard } from './Card.interface';
+import { radius } from '@/styles/variables';
 
 export const StyledFigure = styled.figure<ICard>`
   position: relative;
@@ -8,7 +9,7 @@ export const StyledFigure = styled.figure<ICard>`
   margin-bottom: 1rem;
 
   picture{
-    border-radius: 12px;
+    border-radius: ${radius.md};
     overflow:hidden;
 
     & img{

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

@@ -24,7 +24,7 @@ const EventsCard = ({
       }
     >
       {category && <Chip variant='dark' className='mb-5'>{category}</Chip>}
-      <Heading tag={'span'} size={'h4'} className={'fw-bold textEllipsis'}>
+      <Heading tag={'h3'} size={'h4'} className={'fw-bold textEllipsis'}>
         {title}
       </Heading>
       {date && (

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

@@ -34,3 +34,4 @@ export const Simple: StoryObj<IEventsCard> = {
     linkElement: <a href="#" className="linker"></a>
   }
 }
+

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

@@ -5,9 +5,7 @@ import Card from '../Card/Card.component';
 import { IEventsCard } from './EventsCard.interface';
 
 export const StyledEventsCard = styled(Card) <IEventsCard>`
-  padding: 8px;
-  border-radius: 1.6rem;
-  transition: all 0.3s;
+  padding: 0;
 
   picture{
     border-radius: 100%;
@@ -20,11 +18,7 @@ export const StyledEventsCard = styled(Card) <IEventsCard>`
 
 
   &:hover{
-    background-color: ${colors.third10};
 
-    & figcaption{
-      color: ${colors.secondary50};
-    }
   }
 `;
 

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

@@ -18,19 +18,19 @@ const NewsCard = ({
 }: INewsCard) => {
   return (
     <StyledNewsCard
-      variant={variant}
+      $variant={variant}
       imageElement={
         <ImageWrapper aspectRatioHeight={63}>{imageElement}</ImageWrapper>
       }
     >
       {category && <Chip variant='light' className='mb-5'>{category}</Chip>}
-      <Heading tag={'h3'} size={'h4'} className={'fw-bold textEllipsis'}>
+      <Heading tag={'h3'} size={variant === "featured" ? "h3" : 'h4'} className={'fw-bold textEllipsis'}>
         {title}
       </Heading>
       {date && (
-        <RichText tag={'p'} className="text-end fw-bold mt-6">
+        <Heading tag={'span'} size={variant === "featured" ? "h5" : 'texts'} className={'fw-bold mt-3'}>
           {date}
-        </RichText>
+        </Heading>
       )}
 
       {linkElement}

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

@@ -32,3 +32,13 @@ export const Simple: StoryObj<INewsCard> = {
     linkElement: <a href="#" className="linker"></a>
   }
 }
+
+export const Featured: StoryObj<INewsCard> = {
+  render: args => (
+    <NewsCard {...args} style={{ maxWidth: '620px' }}></NewsCard>
+  ),
+  args: {
+    ...Simple.args,
+    variant: "featured"
+  }
+}

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

@@ -23,6 +23,39 @@ export const StyledNewsCard = styled(Card) <INewsCard>`
 
   }
 
+  ${(props) => {
+    switch (props.$variant) {
+      case "primary": default:
+        return css`
+
+
+        `;
+      case "featured":
+        return css`
+          @media only screen and (min-width: ${responsiveMedia}) {
+
+            display: flex;
+            align-items:center;
+            flex-flow: row-reverse;
+
+            ${StyledChip}{
+              position: relative;
+              top: 0;
+              left: 0;
+            }
+
+            & picture{
+              width: 45%;
+            }
+            & figcaption{
+              width: 55%;
+              padding:1.6rem;
+            }
+          }
+        `;
+    }
+  }}
+
 
   &:hover{
     & figcaption{

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

@@ -49,7 +49,7 @@ export const StyledInput = styled.div<IShareModal>`
   position: relative;
   background: ${colors.white};
   border: 1px solid ${colors.primary20};
-  border-radius: 6px;
+  border-radius: ${radius.sm};
   padding: ${spaces[2]} ${spaces[3]};
   cursor: pointer;
 

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

@@ -56,16 +56,12 @@ export const StyledSlider = styled.div<ISlider>`
     }
 
     .blaze-controls{
-      position:absolute;
-      top: auto;
-      bottom: 1.2rem;
-      left: 0;
-
       display:flex;
       align-items:center;
       justify-content: center;
       gap:16px;
       width: 100%;
+      margin-top:1rem;
     }
 
       /* pagination buttons */
@@ -75,10 +71,10 @@ export const StyledSlider = styled.div<ISlider>`
       gap:10px;
 
       button{
-        width:32px;
-        height:5px;
-        background:${colors.primary20};
-        border-radius:5px;
+        width:14px;
+        height:14px;
+        background:${colors.third10};
+        border-radius:100%;
         font-size: 0;
         padding:0;
         transition:all 0.3s ease;
@@ -88,10 +84,10 @@ export const StyledSlider = styled.div<ISlider>`
         cursor:pointer;
 
         &.hover{
-          opacity: 0.6;
+          background-color: ${colors.primary50}
         }
         &.active{
-          opacity: 0.6;
+          background-color: ${colors.primary50}
         }
       }
     }

package/src/stories/Documentation/Colors.stories.tsx

@@ -1,8 +1,8 @@
 import type { Meta, StoryObj } from '@storybook/react'
+import { colors, gradients } from '@/styles/variables'
 
 import Flex from '@/components/atoms/Flex'
 import React from 'react'
-import { colors } from '@/styles/variables'
 
 export default {
   title: 'Documentation/Colors',
@@ -26,6 +26,19 @@ export const Colors: StoryObj = {
               <span>{color}</span>
             </div>
           ))}
+        {gradients &&
+          Object.keys(gradients).map((gradient, i) => (
+            <div
+              key={`gradient-${i}`}
+              style={{
+                background: `var(--gradient-${gradient})`,
+                width: '100px',
+                height: '75px'
+              }}
+            >
+              <span>{gradient}</span>
+            </div>
+          ))}
       </Flex>
     </div>
   ),

package/src/styles/Global.ts

@@ -3,6 +3,7 @@ import {
   colors,
   desktop_width,
   fontName,
+  gradients,
   mobile_width,
   radius,
   responsiveMedia,
@@ -28,6 +29,10 @@ const GlobalStyles = createGlobalStyle`
   (color, i) => `--color-${color}: ${Object.values(colors)[i]};`
 )}
 
+    ${Object.keys(gradients).map(
+  (gradient, i) => `--gradient-${gradient}: ${Object.values(gradients)[i]};`
+)}
+
     ${Object.keys(typography).map(
   (typo, i) => `--fontSize-${typo}: ${Object.values(typography)[i].size};`
 )}

package/src/styles/utilities.ts

@@ -1,5 +1,6 @@
 import {
   colors,
+  gradients,
   grid_conf,
   radius,
   responsiveMedia,
@@ -288,6 +289,12 @@ export const utilities: {
     values: colors,
     important: true,
   },
+  "gradient": {
+    property: "background",
+    class: "gradient",
+    values: gradients,
+    important: true,
+  },
   "bg": {
     property: "background-color",
     class: "bg",

package/src/styles/variables.ts

@@ -52,6 +52,12 @@ export const colors = <Record<string, string>>{
   error: '#E91101',
 };
 
+export const gradients = <Record<string, string>>{
+  // Defaults
+  primary: 'linear-gradient(to bottom, var(--color-secondary50) 0%, var(--color-secondary50) 50%, var(--color-third50) 50%, var(--color-third50) 100%)',
+};
+
+
 export const spaces = <Record<string, string>>{
   0: '0',
   1: pxToRem(4),
@@ -130,8 +136,8 @@ export const typography = <Record<string, Record<string, unknown>>>{
 };
 
 export const radius = <Record<string, string>>{
-  sm: '6px',
-  md: '10px',
+  sm: '12px',
+  md: '24px',
   lg: '48px',
   rounded: '100px',
 }