oddsgate-ds 1.0.36 → 1.0.37

package/package.json

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

package/src/components/atoms/Chip/Chip.stories.tsx

@@ -15,7 +15,7 @@ export default {
 
 export const Dark: StoryObj<IChip> = {
   render: args => (
-    <div className="bg-primary70 p-6">
+    <div className="bg-primary50 p-6">
       <Chip {...args}>Category name</Chip>
     </div>
   ),

package/src/components/atoms/EmptyState/EmptyState.stories.tsx

@@ -23,7 +23,7 @@ export const Light: StoryObj<IEmptyState> = {
 
 export const Dark: StoryObj<IEmptyState> = {
   render: args => (
-    <div className="bg-primary70 color-white p-8">
+    <div className="bg-primary50 color-white p-8">
       <EmptyState {...args}></EmptyState>
     </div>
   ),

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

@@ -19,7 +19,7 @@ export const StyledEmptyState = styled.div<IEmptyState>`
       case "light":
         return css`
           & svg path{
-            fill: ${colors.primary70} !important;
+            fill: ${colors.primary50} !important;
           }
         `;
     }

package/src/components/atoms/FormField/CheckRadioField/CheckRadioField.theme.ts

@@ -102,8 +102,8 @@ export const StyledCheckRadioField = styled.div<ICheckRadioField>`
 
   & input[type="checkbox"]:checked+label::before,
   & input[type="radio"]:checked+label::before {
-    border-color: ${colors.primary70};
-    background: ${colors.primary70};
+    border-color: ${colors.primary50};
+    background: ${colors.primary50};
   }
 
   & input[type="checkbox"]:checked+label::after,
@@ -115,13 +115,13 @@ export const StyledCheckRadioField = styled.div<ICheckRadioField>`
   .style-dark & {
     & input[type="checkbox"]+label {
       &:after {
-        border-color: ${colors.primary70};
+        border-color: ${colors.primary50};
       }
     }
 
     & input[type="radio"]+label {
       &::after {
-        background: ${colors.primary70};
+        background: ${colors.primary50};
       }
     }
     & input[type="checkbox"]:checked+label::before,

package/src/components/atoms/FormField/FormField.stories.tsx

@@ -198,7 +198,7 @@ export const FilterWithInputs: StoryObj<IFormField> = {
 
 export const DarkStyle: StoryObj<IFormField> = {
   render: args => (
-    <div className="style-dark color-white bg-primary70">
+    <div className="style-dark color-white bg-primary50">
       <Formik
         initialValues={{}}
         onSubmit={function (

package/src/components/atoms/FormField/FormField.theme.tsx

@@ -72,7 +72,7 @@ export const StyledFieldContainer = styled.div<IFormField>`
         outline: none;
         width: 100%;
 
-        border: 1px solid ${colors.primary70};
+        border: 1px solid ${colors.primary50};
 
         &:focus {
           border: 1px solid ${colors.gray50};
@@ -86,7 +86,7 @@ export const StyledFieldContainer = styled.div<IFormField>`
 
       select{
         option{
-          color: ${colors.primary70};
+          color: ${colors.primary50};
         }
       }
 

package/src/components/atoms/Loader/Loader.stories.tsx

@@ -22,7 +22,7 @@ export const Light: StoryObj<ILoader> = {
 }
 export const Dark: StoryObj<ILoader> = {
   render: args => (
-    <div className="bg-primary70 color-white p-8">
+    <div className="bg-primary50 color-white p-8">
       <Loader {...args}></Loader>
     </div>
   ),

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

@@ -16,7 +16,7 @@ export const StyledMarquee = styled.div<IMarquee>`
   --move-final: calc(-50% + var(--offset));
 
   color: ${colors.white};
-  background-color: ${colors.primary70};
+  background-color: ${colors.primary50};
   border-radius: ${radius.md};
 
   padding: 8px 0;

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

@@ -0,0 +1,41 @@
+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 RichText from '@/components/atoms/RichText/RichText.component'
+import { StyledNewsCard } from './NewsCard.theme'
+
+const NewsCard = ({
+  variant,
+  date,
+  category,
+  title,
+  imageElement,
+  linkElement,
+  description,
+  ...props
+}: INewsCard) => {
+  return (
+    <StyledNewsCard
+      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'}>
+        {title}
+      </Heading>
+      {date && (
+        <RichText tag={'p'} className="text-end fw-bold mt-6">
+          {date}
+        </RichText>
+      )}
+
+      {linkElement}
+    </StyledNewsCard>
+  )
+}
+
+export default NewsCard

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

@@ -0,0 +1,9 @@
+import { ICard } from '../Card/Card.interface';
+
+export interface INewsCard extends ICard {
+  date?: string,
+  category?: string
+  title?: string
+  description?: string | React.ReactElement
+  linkElement?: React.ReactElement
+}

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

@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { INewsCard } from './NewsCard.interface'
+import NewsCard from './NewsCard.component'
+import React from 'react'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/NewsCard',
+  component: NewsCard,
+  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<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>
+  }
+}

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

@@ -0,0 +1,42 @@
+import { colors, radius, responsiveMedia } from '@/styles/variables';
+import styled, { css } from 'styled-components';
+
+import Card from '../Card/Card.component';
+import { INewsCard } from './NewsCard.interface';
+import { StyledChip } from '@/components/atoms/Chip/Chip.theme';
+
+export const StyledNewsCard = styled(Card) <INewsCard>`
+  padding: 0;
+  background-color: ${colors.third50};
+  border-radius: ${radius.rounded};
+
+  picture{
+    border-radius: 0;
+  }
+  & figcaption{
+    padding:3rem;
+  }
+
+
+  &:hover{
+    & figcaption{
+
+    }
+  }
+
+  @media only screen and (min-width: ${responsiveMedia}) {
+    display: flex;
+
+    & picture{
+      width: 30%;
+      order: 2;
+    }
+
+    & figcaption{
+      width: 70%;
+      padding: 3rem 5rem;
+      order: 1;
+    }
+  }
+`;
+

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

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

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

@@ -14,7 +14,7 @@ export const StyledIconBox = styled.div<IIconBox>`
     width: 32px;
     height: 32px;
 
-    color: ${colors.primary70};
+    color: ${colors.primary50};
     background: ${colors.primary10};
     border-radius: 50px;
 

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

@@ -43,8 +43,8 @@ export const StyledWrapper = styled.div<IModal>`
 `;
 
 export const StyledTitle = styled.div<IModal>`
-  color: ${colors.white};
-  background-color: ${colors.primary70};
+  color: ${colors.secondary50};
+  background-color: ${colors.third50};
   padding: ${spaces[3]};
 `;
 

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

@@ -0,0 +1,41 @@
+import Chip from '@/components/atoms/Chip/Chip.component'
+import Heading from '@/components/atoms/Heading'
+import { IEventsCard } from './EventsCard.interface'
+import ImageWrapper from '@/components/atoms/ImageWrapper'
+import React from 'react'
+import RichText from '@/components/atoms/RichText/RichText.component'
+import { StyledEventsCard } from './EventsCard.theme'
+
+const EventsCard = ({
+  variant,
+  date,
+  category,
+  title,
+  imageElement,
+  linkElement,
+  description,
+  ...props
+}: IEventsCard) => {
+  return (
+    <StyledEventsCard
+      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'}>
+        {title}
+      </Heading>
+      {date && (
+        <RichText tag={'p'} className="text-end fw-bold mt-6">
+          {date}
+        </RichText>
+      )}
+
+      {linkElement}
+    </StyledEventsCard>
+  )
+}
+
+export default EventsCard

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

@@ -0,0 +1,9 @@
+import { ICard } from '../Card/Card.interface';
+
+export interface IEventsCard extends ICard {
+  date?: string,
+  category?: string
+  title?: string
+  description?: string | React.ReactElement
+  linkElement?: React.ReactElement
+}

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

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

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

@@ -0,0 +1,26 @@
+import { colors, radius, responsiveMedia } from '@/styles/variables';
+import styled, { css } from 'styled-components';
+
+import Card from '../Card/Card.component';
+import { IEventsCard } from './EventsCard.interface';
+import { StyledChip } from '@/components/atoms/Chip/Chip.theme';
+
+export const StyledEventsCard = styled(Card) <IEventsCard>`
+  padding: 0;
+  background-color: ${colors.third50};
+
+  picture{
+    border-radius: ${radius.rounded};
+  }
+  & figcaption{
+    padding:3rem;
+  }
+
+
+  &:hover{
+    & figcaption{
+
+    }
+  }
+`;
+

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

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

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

@@ -5,6 +5,8 @@ import { IShareModal } from './ShareModal.interface';
 import { fontSize } from '@/styles/utilities';
 
 export const StyledModal = styled.div<IShareModal>`
+  color: ${colors.third50};
+
   & a {
     display: inline-block;
     width: 50%;
@@ -19,8 +21,8 @@ export const StyledModal = styled.div<IShareModal>`
       height: 3.2rem;
       line-height: 3.2rem;
       border-radius: 50%;
-      color: ${colors.white};
-      background: ${colors.primary70};
+      color: ${colors.secondary50};
+      background: ${colors.third50};
       margin: auto;
       transition: all 0.3s ease;
 
@@ -79,7 +81,7 @@ export const StyledMessage = styled.div<IShareModal>`
   vertical-align: top;
 
   color: ${colors.white};
-  background-color: ${colors.primary70};
+  background-color: ${colors.primary50};
 
   cursor: pointer;
   padding: ${spaces[2]} ${spaces[4]};

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

@@ -62,18 +62,18 @@ export const StyledCircularSliderSlide = styled.div<ICircularSlider>`
 export const StyledCircularSliderContent = styled.div<ICircularSlider>`
   position: absolute;
   top: 50%;
-  left:33.333%;
+  left:50%;
 
   width: 25%;
   text-align: center;
 
   opacity: 0;
-  transform: translateY(5%);
+  transform: translate(-50%, 5%);
   transition: all 0.3s ease;
 
   &.active{
     opacity: 1;
-    transform: translateY(-50%);
+    transform: translate(-50%, -50%);
   }
 `;
 

package/src/index.ts

@@ -42,6 +42,8 @@ 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 NewsCard } from './components/molecules/NewsCard'
+export { default as EventsCard } from './components/molecules/EventsCard'
 // //organisms
 export { default as Slider } from './components/organisms/Slider'
 export { default as Cover } from './components/organisms/Cover'

package/src/styles/Global.ts

@@ -256,7 +256,7 @@ const GlobalStyles = createGlobalStyle`
 
     padding: 12px 22px;
 
-    color: var(--color-primary70);
+    color: var(--color-primary50);
     background: var(--color-white);
     box-shadow: 0px 2px 16px rgba(${colors.black}, 0.05);
     border-radius: 50px;

package/src/styles/utilities.ts

@@ -66,6 +66,7 @@ export const utilities: {
     important: true,
   },
   "position": {
+    responsive: true,
     property: "position",
     values: {
       relative: "relative",
@@ -284,17 +285,20 @@ export const utilities: {
   "color": {
     property: "color",
     class: "color",
-    values: colors
+    values: colors,
+    important: true,
   },
   "bg": {
     property: "background-color",
     class: "bg",
-    values: colors
+    values: colors,
+    important: true,
   },
   "shadow": {
     property: "box-shadow",
     class: "shadow",
-    values: shadows
+    values: shadows,
+    important: true,
   },
   "radius": {
     property: "border-radius",