oddsgate-ds 1.0.111 → 1.0.113

package/src/components/organisms/CircularSliderTeste/CircularSliderTeste.stories.tsx

@@ -0,0 +1,134 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Button from '@/components/atoms/Button/Button.component'
+import CircularSliderTeste from './CircularSliderTeste.component'
+import { ICircularSliderTeste } from './CircularSliderTeste.interface'
+import React from 'react'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/CircularSliderTeste',
+  component: CircularSliderTeste,
+  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<ICircularSliderTeste> = {
+  render: args => <div style={{ width: "100%", height: "200dvh" }}><CircularSliderTeste {...args}></CircularSliderTeste></div>,
+  args: {
+    cta: <Button variant={'secondary'}>Join the Team</Button>,
+    content: [
+      {
+        name: 'My name 1',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 2',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 3',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 4',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 5',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 6',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 7',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 9',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 9',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 10',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 11',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 1§2',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 13',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 14',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 15',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 16',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 17',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 19',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 19',
+        role: 'My role',
+        img: image
+      },
+      {
+        name: 'My name 20',
+        role: 'My role',
+        img: image
+      }
+    ],
+    className: "h-100",
+  }
+}

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

@@ -0,0 +1,65 @@
+import { ICircularSliderTeste } from './CircularSliderTeste.interface';
+import { responsiveMedia } from '@/styles/variables';
+import styled from 'styled-components';
+
+export const StyledCircularSliderTeste = styled.div<ICircularSliderTeste>`
+  position: relative;
+  width: 100%;
+  overflow: hidden;
+`;
+
+export const StyledCircularSliderTesteWrapper = styled.div<ICircularSliderTeste>`
+  position: relative;
+  display: flex;
+  justify-content: center;
+  margin: 0 auto;
+  margin-right: 0;
+`;
+
+export const StyledCircularSliderTesteSlides = styled.div<ICircularSliderTeste>`
+  transform-origin: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: relative;
+  z-index: 100;
+  transform: rotate(-180deg);
+`;
+export const StyledCircularSliderTesteSlide = styled.div<ICircularSliderTeste>`
+  position: absolute;
+  transform-origin: center;
+  transition: .3s linear all;
+  filter: brightness(70%);
+  cursor: pointer;
+
+  & img{
+    height: 100%;
+    object-fit: cover;
+    pointer-events:none;
+    filter: grayscale(100%);
+    transform: rotate(90deg);
+  }
+
+  &.active{
+    filter: brightness(100%);
+  }
+`;
+
+export const StyledCircularSliderTesteContent = styled.div<ICircularSliderTeste>`
+  width: 50%;
+  text-align: center;
+  margin: auto;
+
+  &>div{
+    opacity: 0;
+    transform: translate(0%, 5%);
+    transition: all 0.3s ease;
+  }
+  &.active{
+    &>div{
+      opacity: 1;
+      transform: translate(0%, 0%);
+    }
+  }
+`;
+

package/src/components/organisms/CircularSliderTeste/index.ts

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

package/src/styles/utilities.ts

@@ -201,7 +201,8 @@ export const utilities: {
     responsive: true,
     property: "margin",
     class: "m",
-    values: spacers
+    values: spacers,
+    important: true,
   },
   "margin-top": {
     responsive: true,
@@ -243,7 +244,8 @@ export const utilities: {
     responsive: true,
     property: "padding",
     class: "p",
-    values: spaces
+    values: spaces,
+    important: true,
   },
   "padding-top": {
     responsive: true,

package/src/styles/variables.ts

@@ -3,7 +3,7 @@ export const pxToRem = (size: number) => {
 }
 
 export const fontName = "MD Nichrome"
-export const alternativeFont = "Red Hat Display";
+export const alternativeFont = "Epilogue";
 
 export const gutter = pxToRem(8); //needs to be in this file