oddsgate-ds 1.0.180 → 1.0.183

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

@@ -1,4 +1,4 @@
 import { INewsCard } from './NewsCard.interface';
 import React from 'react';
-declare const NewsCard: ({ variant, date, category, title, imageElement, linkElement, description, ...props }: INewsCard) => React.JSX.Element;
+declare const NewsCard: ({ variant, date, category, title, imageElement, linkElement, description, bgColor, ...props }: INewsCard) => React.JSX.Element;
 export default NewsCard;

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

@@ -6,4 +6,5 @@ export interface INewsCard extends ICard {
     title?: string;
     description?: string | React.ReactElement;
     linkElement?: React.ReactElement;
+    bgColor?: string;
 }

package/dist/types.d.ts

@@ -593,9 +593,10 @@ interface INewsCard extends ICard {
     title?: string;
     description?: string | React.ReactElement;
     linkElement?: React.ReactElement;
+    bgColor?: string;
 }
 
-declare const NewsCard: ({ variant, date, category, title, imageElement, linkElement, description, ...props }: INewsCard) => React__default.JSX.Element;
+declare const NewsCard: ({ variant, date, category, title, imageElement, linkElement, description, bgColor, ...props }: INewsCard) => React__default.JSX.Element;
 
 interface IEventsCard extends ICard {
     date?: string;

package/package.json

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

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

@@ -1,9 +1,7 @@
-import Chip from '@/components/atoms/Chip/Chip.component'
 import Heading from '@/components/atoms/Heading'
 import { INewsCard } from './NewsCard.interface'
 import ImageWrapper from '@/components/atoms/ImageWrapper'
 import React from 'react'
-
 import { StyledNewsCard } from './NewsCard.theme'
 
 const NewsCard = ({
@@ -14,6 +12,7 @@ const NewsCard = ({
   imageElement,
   linkElement,
   description,
+  bgColor,
   ...props
 }: INewsCard) => {
   return (
@@ -24,6 +23,12 @@ const NewsCard = ({
           <ImageWrapper aspectRatioHeight={63}>{imageElement}</ImageWrapper>
         </>
       }
+      style={
+        bgColor
+          ? { backgroundColor: bgColor, ...(props.style || {}) }
+          : props.style
+      }
+      {...props}
     >
       <div>
         <Heading

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

@@ -6,4 +6,5 @@ export interface INewsCard extends ICard {
   title?: string
   description?: string | React.ReactElement
   linkElement?: React.ReactElement
+  bgColor?: string
 }

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

@@ -23,22 +23,19 @@ const image = (
 )
 
 export const Simple: StoryObj<INewsCard> = {
-  render: args => <NewsCard {...args} style={{ maxWidth: '320px' }}></NewsCard>,
   args: {
     date: '24 nov 23',
     category: 'Category name',
     title: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit.',
     imageElement: image,
-    linkElement: <a href="#" className="linker"></a>
+    linkElement: <a href="#" className="linker"></a>,
   }
 }
 
 export const Featured: StoryObj<INewsCard> = {
-  render: args => (
-    <NewsCard {...args} style={{ maxWidth: '620px' }}></NewsCard>
-  ),
   args: {
     ...Simple.args,
-    variant: "featured"
+    variant: 'featured',
+    bgColor: '#FF4552',
   }
 }

package/src/styles/variables.ts

@@ -2,34 +2,34 @@ export const pxToRem = (size: number) => {
   return (size / 16) * 1 + 'rem'
 }
 
-export const fontName = "MD Nichrome"
-export const alternativeFont = "Epilogue";
+export const fontName = 'MD Nichrome'
+export const alternativeFont = 'Epilogue'
 
-export const gutter = pxToRem(8); //needs to be in this file
+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 = "769px"; //container size of design on mobile
-export const responsiveMediaMax = "768px"; //mobile media value for bootstrap -> use this for max-width media queries
-export const mobileMedia = "360px"; //mobile media value
+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 = '769px' //container size of design on mobile
+export const responsiveMediaMax = '768px' //mobile media value for bootstrap -> use this for max-width media queries
+export const mobileMedia = '360px' //mobile media value
 
-export const easeOutExpo = "cubic-bezier(.32,.94,.6,1);";
+export const easeOutExpo = 'cubic-bezier(.32,.94,.6,1);'
 
 export type IBreakpoints = {
-  $xs?: string,
-  $sm?: string,
-  $md?: string,
-  $lg?: string,
-  $xl?: string,
-  $xxl?: string,
+  $xs?: string
+  $sm?: string
+  $md?: string
+  $lg?: string
+  $xl?: string
+  $xxl?: string
 }
 
 export const colors = <Record<string, string>>{
   // Defaults
   white: '#fff',
   black: '#000',
-  transparent: "transparent",
+  transparent: 'transparent',
 
   // Gray
   gray10: '#FDFDF1',
@@ -42,6 +42,7 @@ export const colors = <Record<string, string>>{
 
   secondary10: '#FDFDF1',
   secondary50: '#FFFECC',
+  secondary300: '#440E3F',
 
   third10: '#440E3F',
   third50: '#33052F',
@@ -51,14 +52,14 @@ export const colors = <Record<string, string>>{
   // Feedback
   warning: '#ea9a1a',
   success: '#00FFD2',
-  error: '#E91101',
-};
+  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%)',
-};
-
+  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',
@@ -72,7 +73,7 @@ export const spaces = <Record<string, string>>{
   8: pxToRem(48),
   9: pxToRem(64),
   10: pxToRem(88),
-  11: pxToRem(120),
+  11: pxToRem(120)
 }
 export const spacesNegative = <Record<string, string>>{
   0: '0',
@@ -85,68 +86,68 @@ export const spacesNegative = <Record<string, string>>{
   7: pxToRem(-48),
   8: pxToRem(-64),
   9: pxToRem(-88),
-  10: pxToRem(-120),
+  10: pxToRem(-120)
 }
 
 //if responsive is not needed for a size just set the size as px instead of rem
 export const typography = <Record<string, Record<string, unknown>>>{
   display: {
-    size: "250px",
-    sizeMob: "64px",
-    height: 0.9,
+    size: '250px',
+    sizeMob: '64px',
+    height: 0.9
   },
   h1: {
-    size: "120px",
-    sizeMob: "48px",
-    height: 0.9,
+    size: '120px',
+    sizeMob: '48px',
+    height: 0.9
   },
   h2: {
-    size: "80px",
-    sizeMob: "36px",
-    height: 1.2,
+    size: '80px',
+    sizeMob: '36px',
+    height: 1.2
   },
   h3: {
-    size: "48px",
-    sizeMob: "24px",
-    height: 1.2,
+    size: '48px',
+    sizeMob: '24px',
+    height: 1.2
   },
   h4: {
-    size: "36px",
-    sizeMob: "20px",
-    height: 1.4,
+    size: '36px',
+    sizeMob: '20px',
+    height: 1.4
   },
   h5: {
-    size: "24px",
-    sizeMob: "18px",
-    height: 1.4,
+    size: '24px',
+    sizeMob: '18px',
+    height: 1.4
   },
   h6: {
-    size: "18px",
-    sizeMob: "16px",
-    height: 1.4,
+    size: '18px',
+    sizeMob: '16px',
+    height: 1.4
   },
   texts: {
-    size: "18px",
-    sizeMob: "16px",
-    height: 1.6,
+    size: '18px',
+    sizeMob: '16px',
+    height: 1.6
   },
   captions: {
-    size: "16px",
-    sizeMob: "13px",
-    height: 1.2,
-  },
-};
+    size: '16px',
+    sizeMob: '13px',
+    height: 1.2
+  }
+}
 
 export const radius = <Record<string, string>>{
   sm: '12px',
   md: '24px',
   lg: '48px',
-  rounded: '100px',
+  rounded: '100px'
 }
 export const shadows = <Record<string, string>>{
   sm: '10px 20px 20px rgba(0, 78, 210, 0.03)',
   md: '10px 30px 30px rgba(0, 78, 210, 0.05)',
-  lg: '10px 40px 40px rgba(0, 78, 210, 0.07)',
+  lg: '10px 40px 40px rgba(0, 78, 210, 0.07)'
 }
 export const zIndexes = <Record<number, number>>{
   1: 1,
@@ -156,27 +157,27 @@ export const zIndexes = <Record<number, number>>{
   5: 5
 }
 export const grid_conf: {
-  gridSize: number,
-  gutter: number,
-  mediaQuery: string,
-  container: IBreakpoints,
+  gridSize: number
+  gutter: number
+  mediaQuery: string
+  container: IBreakpoints
   breakpoints: IBreakpoints
 } = {
   gridSize: 12,
   gutter: 16,
   mediaQuery: 'only screen',
   container: {
-    $sm: "960px",
-    $md: "1140px",
-    $lg: "1320px",
-    $xl: "1560px",
-    $xxl: "1720px"
+    $sm: '960px',
+    $md: '1140px',
+    $lg: '1320px',
+    $xl: '1560px',
+    $xxl: '1720px'
   },
   breakpoints: {
-    $xs: "",
-    $sm: "576px",
-    $md: "769px",
-    $lg: "980px",
-    $xl: "1280px"
+    $xs: '',
+    $sm: '576px',
+    $md: '769px',
+    $lg: '980px',
+    $xl: '1280px'
   }
 }