oddsgate-ds 1.0.2

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

@@ -0,0 +1,122 @@
+import { IFormField } from './FormField.interface'
+import { colors } from '@/styles/variables'
+import { fontSize } from '@/styles/utilities'
+import styled from 'styled-components'
+
+export const StyledField = styled.input``
+
+export const StyledFieldContainer = styled.div<IFormField>`
+  position: relative;
+  width: 100%;
+  margin-bottom: 2rem;
+
+  ${({ isCheckRadio }) =>
+    !isCheckRadio
+      ? `
+      & > div {
+        position: relative;
+      }
+
+      i {
+        position: absolute;
+        top: 50%;
+        left: 12px;
+        margin-top: -10px;
+
+        color: currentColor;
+
+        & + input,
+        & + select {
+          padding-left: 2.6rem;
+        }
+      }
+
+      label {
+        display: block;
+      }
+
+      &:has(select) {
+        & > div {
+          &::after {
+            content: '';
+            display: block;
+            position: absolute;
+            top: 50%;
+            right: 12px;
+            width: 16px;
+            height: 16px;
+            margin: 0 4px;
+            margin-top: -8px;
+            background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.33333 9.24435L11.016 5.33398L12 6.3788L7.33333 11.334L2.66667 6.3788L3.65065 5.33398L7.33333 9.24435Z' fill='%233C3B39'/%3E%3C/svg%3E%0A");
+          }
+          & input,
+          & select {
+            padding-right: 2.6rem;
+          }
+        }
+      }
+
+      input,
+      textarea,
+      select {
+        font-family: inherit;
+        ${fontSize('texts')};
+
+        border-radius: 8px;
+        border: 0;
+
+        padding: 12px;
+        background: transparent;
+        outline: none;
+        width: 100%;
+
+        border: 1px solid ${colors.primary70};
+
+        &:focus {
+          border: 1px solid ${colors.gray50};
+        }
+      }
+
+      select{
+        option{
+          color: ${colors.primary70};
+        }
+      }
+
+      //Clear search X
+      input[type="search"]::-webkit-search-decoration,
+      input[type="search"]::-webkit-search-cancel-button,
+      input[type="search"]::-webkit-search-results-button,
+      input[type="search"]::-webkit-search-results-decoration {
+        -webkit-appearance: none;
+      }
+
+      .style-dark & {
+        &:has(select) {
+          & > div {
+            &::after {
+              background-image: url("data:image/svg+xml,%3Csvg width='16' height='16' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M7.33333 9.24435L11.016 5.33398L12 6.3788L7.33333 11.334L2.66667 6.3788L3.65065 5.33398L7.33333 9.24435Z' fill='%23fff'/%3E%3C/svg%3E%0A");
+            }
+          }
+        }
+
+        i {
+          color: ${colors.white};
+        }
+
+        & input,
+        & textarea,
+        & select {
+          color: ${colors.white};
+          border-color: ${colors.white};
+        }
+      }
+  `
+      : `
+      & > div{
+        display: flex;
+        flex-flow: row wrap;
+        gap: 1rem;
+      }
+  `}
+`

package/src/components/atoms/FormField/index.ts

@@ -0,0 +1 @@
+export { default } from './FormField.component'

package/src/components/atoms/Heading/Heading.component.tsx

@@ -0,0 +1,17 @@
+import { IHeading } from './Heading.interface';
+import React from 'react';
+import { StyledHeading } from './Heading.theme';
+
+const Heading = ({ tag = "h3", size, className, ...props }: IHeading) => {
+  return (
+    <StyledHeading
+      as={tag as React.ElementType}
+      size={size}
+      className={className}
+      {...props}
+    />
+  );
+};
+
+
+export default Heading;

package/src/components/atoms/Heading/Heading.interface.tsx

@@ -0,0 +1,21 @@
+import { CSSProperties } from 'react';
+
+export enum typographyTags {
+  div = "div",
+  span = "span",
+  p = "p",
+  h1 = "h1",
+  h2 = "h2",
+  h3 = "h3",
+  h4 = "h4",
+  h5 = "h5",
+  h6 = "h6",
+}
+
+export type IHeading = {
+  tag?: keyof typeof typographyTags | string
+  size?: string
+  className?: string;
+  style?: CSSProperties
+  children?: React.ReactNode;
+}

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

@@ -0,0 +1,17 @@
+import styled, { css } from 'styled-components';
+
+import { fontSize } from '@/styles/utilities';
+
+import { IHeading } from './Heading.interface';
+
+export const StyledHeading = styled.div<IHeading>`
+  display: block;
+
+  ${({ size }) => size && `
+    ${fontSize(size)}
+  `}
+
+  & a {
+    color: inherit
+  }
+`;

package/src/components/atoms/Heading/index.ts

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

package/src/components/atoms/Icon/Icon.component.tsx

@@ -0,0 +1,19 @@
+import { IIcon } from './Icon.interface';
+import React from 'react';
+import { StyledIcon } from './Icon.theme';
+import cn from 'classnames';
+
+const Icon = ({ icon, className, onClick, ...props }: IIcon) => {
+  return (
+    <StyledIcon
+      className={cn(
+        icon,
+        className
+      )}
+      onClick={onClick}
+      {...props}
+    />
+  );
+};
+
+export default Icon

package/src/components/atoms/Icon/Icon.interface.ts

@@ -0,0 +1,8 @@
+import { CSSProperties } from 'react';
+
+export type IIcon = {
+  icon?: string,
+  className?: string,
+  style?: CSSProperties
+  onClick?: () => void
+}

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

@@ -0,0 +1,26 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { IIcon } from './Icon.interface'
+import Icon from './Icon.component'
+import React from 'react'
+import { iconsList } from '@/helpers/getIcons'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/Icon',
+  component: Icon,
+  tags: ['autodocs'],
+  argTypes: {
+    icon: {
+      options: Object.values(iconsList),
+      control: 'select'
+    }
+  }
+} as Meta
+
+export const Simple: StoryObj<IIcon> = {
+  render: args => <Icon {...args} />,
+  args: {
+    icon: iconsList[0]
+  }
+}

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

@@ -0,0 +1,102 @@
+import styled, { css } from 'styled-components';
+
+import { IIcon } from './Icon.interface';
+
+export const StyledIcon = styled.i<IIcon>`
+  color: currentColor;
+  font-size: 20px;
+  line-height: 1;
+
+  &::before {
+    display: block;
+    font-family: 'miewfont' !important;
+    speak: none;
+    font-style: normal;
+    font-weight: normal;
+    font-variant: normal;
+    text-transform: none;
+    line-height: 1;
+    webkit-font-smoothing: antialiased;
+    moz-osx-font-smoothing: grayscale
+  }
+
+
+  &.icon-whatsapp:before {
+    content: "\\e918";
+  }
+  &.icon-anchor:before {
+    content: "\\e900";
+  }
+  &.icon-behance:before {
+    content: "\\e901";
+  }
+  &.icon-chevron-down:before {
+    content: "\\e902";
+  }
+  &.icon-chevron-left:before {
+    content: "\\e903";
+  }
+  &.icon-chevron-right:before {
+    content: "\\e904";
+  }
+  &.icon-chevron-up:before {
+    content: "\\e905";
+  }
+  &.icon-close:before {
+    content: "\\e906";
+  }
+  &.icon-dribbble:before {
+    content: "\\e907";
+  }
+  &.icon-facebook:before {
+    content: "\\e908";
+  }
+  &.icon-forward-arrow:before {
+    content: "\\e909";
+  }
+  &.icon-github:before {
+    content: "\\e90a";
+  }
+  &.icon-gitlab:before {
+    content: "\\e90b";
+  }
+  &.icon-instagram:before {
+    content: "\\e90c";
+  }
+  &.icon-linkedin:before {
+    content: "\\e90d";
+  }
+  &.icon-location:before {
+    content: "\\e90e";
+  }
+  &.icon-medium:before {
+    content: "\\e90f";
+  }
+  &.icon-less:before {
+    content: "\\e910";
+  }
+  &.icon-more:before {
+    content: "\\e911";
+  }
+  &.icon-pinterest:before {
+    content: "\\e912";
+  }
+  &.icon-search:before {
+    content: "\\e913";
+  }
+  &.icon-tripadvisor:before {
+    content: "\\e914";
+  }
+  &.icon-tumblr:before {
+    content: "\\e915";
+  }
+  &.icon-twitter:before {
+    content: "\\e916";
+  }
+  &.icon-youtube:before {
+    content: "\\e917";
+  }
+
+
+
+`;

package/src/components/atoms/Icon/index.ts

@@ -0,0 +1 @@
+export { default } from './Icon.component'

package/src/components/atoms/ImageWrapper/ImageWrapper.component.tsx

@@ -0,0 +1,42 @@
+import { IImageWrapper } from './ImageWrapper.interface';
+import React from 'react';
+import { Overlay, StyledImageWrapper } from './ImageWrapper.theme';
+
+const ImageWrapper = ({
+  aspectRatioHeight,
+  align,
+  caption,
+  href,
+  linkTarget,
+  rel,
+  className,
+  style,
+  children,
+  asBackground = false
+}: IImageWrapper) => {
+  return (
+    <StyledImageWrapper $align={align} className={className} style={style}>
+      <span
+        className='d-block'
+        aria-hidden="true"
+        style={
+          aspectRatioHeight
+            ? { paddingBottom: `${aspectRatioHeight.toFixed(2)}%` }
+            : {}
+        }
+      ></span>
+      {children}
+      {!!caption && (
+        <figcaption>
+          <span>{caption}</span>
+        </figcaption>
+      )}
+      {!!href && (
+        <a className={'linker'} href={href} target={linkTarget} rel={rel}></a>
+      )}
+      {asBackground && <Overlay />}
+    </StyledImageWrapper>
+  )
+}
+
+export default ImageWrapper

package/src/components/atoms/ImageWrapper/ImageWrapper.interface.ts

@@ -0,0 +1,16 @@
+import { CSSProperties } from 'react';
+
+export type IImageWrapper = {
+  aspectRatioHeight?: number
+  anchor?: string;
+  $align?: string;
+  align?: string;
+  caption?: string;
+  href?: string;
+  linkTarget?: string;
+  rel?: string;
+  className?: string;
+  style?: CSSProperties;
+  children?: React.ReactNode;
+  asBackground?: boolean;
+}

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

@@ -0,0 +1,27 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import React from 'react'
+
+import ImageWrapper from './ImageWrapper.component'
+import { IImageWrapper } from './ImageWrapper.interface'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/ImageWrapper',
+  component: ImageWrapper
+} as Meta
+
+export const Simple: StoryObj<IImageWrapper> = {
+  render: args => (
+    <ImageWrapper {...args} style={{ maxWidth: '320px' }}>
+      <img
+        width="100%"
+        height="100%"
+        decoding="async"
+        src="/assets/placeholder.png"
+        alt="Empty state"
+      />
+    </ImageWrapper>
+  ),
+  args: {}
+}

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

@@ -0,0 +1,51 @@
+import styled, { css } from 'styled-components';
+
+import { IImageWrapper } from './ImageWrapper.interface';
+
+export const StyledImageWrapper = styled.picture<IImageWrapper>`
+
+  & picture{
+    position: relative;
+  }
+  & img{
+    object-fit:cover;
+  }
+
+  &.as-background{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    z-index: 0;
+    background: linear-gradient(0deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%);
+
+    & img{
+      width: 100%;
+      height: 100%;
+    }
+  }
+
+  ${(props) => {
+    switch (props.$align) {
+      case "left": default:
+        return css` `;
+      case "center":
+        return css`
+          margin-left:auto;
+          margin-right:auto;
+        `;
+      case "right":
+        return css`
+          margin-right:auto;
+        `;
+    }
+  }}
+`
+export const Overlay = styled.div`
+  display: block;
+  background: linear-gradient(0deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.50) 100%);
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0;
+`

package/src/components/atoms/ImageWrapper/index.ts

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

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

@@ -0,0 +1,26 @@
+import { ILoader } from './Loader.interface'
+import React from 'react'
+import RichText from '../RichText/RichText.component'
+import { StyledLoader } from '@/components/atoms/Loader/Loader.theme'
+
+const Loader = ({
+  variant,
+  label,
+  children,
+  className,
+  style,
+  ...props
+}: ILoader) => {
+  return (
+    <StyledLoader $variant={variant} className={className} style={style}>
+      <div></div>
+      {label && (
+        <RichText tag="p" className="mt-3">
+          {label}
+        </RichText>
+      )}
+    </StyledLoader>
+  )
+}
+
+export default Loader

package/src/components/atoms/Loader/Loader.interface.ts

@@ -0,0 +1,10 @@
+import { CSSProperties } from 'react';
+
+export interface ILoader {
+  variant?: string,
+  $variant?: string,
+  label?: string,
+  className?: string,
+  style?: CSSProperties
+  children?: React.ReactNode
+}

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

@@ -0,0 +1,33 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { ILoader } from './Loader.interface'
+import Loader from './Loader.component'
+import React from 'react'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/Loader',
+  component: Loader,
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {}
+} as Meta
+
+export const Light: StoryObj<ILoader> = {
+  render: args => <Loader {...args}></Loader>,
+  args: {
+    variant: 'light',
+    label: 'Loading...'
+  }
+}
+export const Dark: StoryObj<ILoader> = {
+  render: args => (
+    <div className="bg-primary70 color-white p-8">
+      <Loader {...args}></Loader>
+    </div>
+  ),
+  args: {
+    variant: 'dark',
+    label: 'Loading...'
+  }
+}

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

@@ -0,0 +1,92 @@
+import styled, { css } from 'styled-components';
+
+import { ILoader } from './Loader.interface';
+import { colors } from '@/styles/variables';
+
+export const StyledLoader = styled.div<ILoader>`
+  display: inline-block;
+  text-align: center;
+
+  & > div {
+    position: relative;
+    width: 5rem;
+    height: 5rem;
+
+    &::before,
+    &::after {
+      content: '';
+      position: absolute;
+      top: 0;
+      left: 0;
+
+      width: 100%;
+      height: 100%;
+
+      border-radius: 50%;
+    }
+    &::before{
+      border-style: solid solid dotted dotted;
+
+      animation: rotation 2s linear infinite;
+    }
+    &::after {
+      top:50%;
+      left: 50%;
+
+      max-width: 2rem;
+      max-height: 2rem;
+
+      margin-top: -1rem;
+      margin-left: -1rem;
+
+      border-style: solid solid dotted;
+
+      animation: rotationBack 1s linear infinite;
+      transform-origin: center center;
+    }
+  }
+
+  ${(props) => {
+    switch (props.$variant) {
+      case "dark": default:
+        return css`
+          & > div {
+            &::before{
+              border: 3px dotted ${colors.white};
+            }
+            &::after {
+              border: 3px dotted ${colors.white};
+            }
+          }
+        `;
+      case "light":
+        return css`
+          & > div {
+            &::before{
+              border: 3px dotted ${colors.primary70};
+            }
+            &::after {
+              border: 3px dotted ${colors.primary70};
+            }
+          }
+        `;
+    }
+  }}
+
+  @keyframes rotation {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+  @keyframes rotationBack {
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(-360deg);
+    }
+  }
+`;

package/src/components/atoms/Loader/index.ts

@@ -0,0 +1 @@
+export { default } from './Loader.component'