oddsgate-ds 1.0.169 → 1.0.174

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

@@ -1,97 +1,97 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
-import Button from '../../atoms/Button/Button.component'
-import Cover from './Cover.component'
-import Flex from '../../atoms/Flex/Flex.component'
-import { ICover } from './Cover.interface'
-import React from 'react'
-import RichText from '../../atoms/RichText/RichText.component'
-import Video from '../../atoms/Video/Video.component'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Components/Cover',
-  component: Cover,
-  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<ICover> = {
-  render: args => (
-    <Cover {...args}>
-      <RichText style={{ color: '$gray400' }}>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
-        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
-        mollit anim id est laborum.
-      </RichText>
-
-      <Flex className={'mt-6'} align={'center'}>
-        <Button variant={'primary'}>Lorem ipsum</Button>
-        <RichText style={{ fontWeight: '600' }}>ou</RichText>
-        <Button outlined={true} variant={'primary'}>
-          dolor sit amet
-        </Button>
-      </Flex>
-    </Cover>
-  ),
-  args: {
-    minHeight: '68rem',
-    contentPosition: 'center center',
-    imageElement: image,
-    overlayOpacity: 0.6,
-    overlayColor: '#000000',
-    className: 'p-8'
-  }
-}
-
-export const VideoCover: StoryObj<ICover> = {
-  render: args => (
-    <Cover {...args}>
-      <RichText style={{ color: '$gray400' }}>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
-        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
-        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
-        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
-        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
-        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
-        mollit anim id est laborum.
-      </RichText>
-
-      <Flex className={'mt-6'} align={'center'}>
-        <Button variant={'primary'}>Lorem ipsum</Button>
-        <RichText style={{ fontWeight: '600' }}>ou</RichText>
-        <Button outlined={true} variant={'primary'}>
-          dolor sit amet
-        </Button>
-      </Flex>
-    </Cover>
-  ),
-  args: {
-    ...Simple.args,
-    imageElement: (
-      <Video
-        autoplay={true}
-        controls={false}
-        loop={false}
-        muted={true}
-        playsInline={true}
-        poster={'/assets/placeholder.png'}
-        src={'/assets/video.mp4'}
-      />
-    )
-  }
-}
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Button from '../../atoms/Button/Button.component'
+import Cover from './Cover.component'
+import Flex from '../../atoms/Flex/Flex.component'
+import { ICover } from './Cover.interface'
+import React from 'react'
+import RichText from '../../atoms/RichText/RichText.component'
+import Video from '../../atoms/Video/Video.component'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/Cover',
+  component: Cover,
+  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<ICover> = {
+  render: args => (
+    <Cover {...args}>
+      <RichText style={{ color: '$gray400' }}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum.
+      </RichText>
+
+      <Flex className={'mt-6'} align={'center'}>
+        <Button variant={'primary'}>Lorem ipsum</Button>
+        <RichText style={{ fontWeight: '600' }}>ou</RichText>
+        <Button outlined={true} variant={'primary'}>
+          dolor sit amet
+        </Button>
+      </Flex>
+    </Cover>
+  ),
+  args: {
+    minHeight: '68rem',
+    contentPosition: 'center center',
+    imageElement: image,
+    overlayOpacity: 0.6,
+    overlayColor: '#000000',
+    className: 'p-8'
+  }
+}
+
+export const VideoCover: StoryObj<ICover> = {
+  render: args => (
+    <Cover {...args}>
+      <RichText style={{ color: '$gray400' }}>
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod
+        tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim
+        veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea
+        commodo consequat. Duis aute irure dolor in reprehenderit in voluptate
+        velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint
+        occaecat cupidatat non proident, sunt in culpa qui officia deserunt
+        mollit anim id est laborum.
+      </RichText>
+
+      <Flex className={'mt-6'} align={'center'}>
+        <Button variant={'primary'}>Lorem ipsum</Button>
+        <RichText style={{ fontWeight: '600' }}>ou</RichText>
+        <Button outlined={true} variant={'primary'}>
+          dolor sit amet
+        </Button>
+      </Flex>
+    </Cover>
+  ),
+  args: {
+    ...Simple.args,
+    imageElement: (
+      <Video
+        autoplay={true}
+        controls={false}
+        loop={false}
+        muted={true}
+        playsInline={true}
+        poster={'/assets/placeholder.png'}
+        src={'/assets/video.mp4'}
+      />
+    )
+  }
+}

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

@@ -1,49 +1,49 @@
-import { ICover } from './Cover.interface';
-import { StyledVideo } from '../../atoms/Video/Video.theme';
-import styled from 'styled-components';
-
-export const StyledCover = styled.div<ICover>`
-  display: flex;
-  position:relative;
-  width:100%;
-  overflow: hidden;
-
-  & > img{
-    position:absolute;
-    top: 0;
-    left: 0;
-    width:100%;
-    height:100%;
-    object-fit: cover;
-  }
-
-  & > ${StyledVideo}{
-    position:absolute;
-    top: 0;
-    left: 0;
-    width:100%;
-    height:100%;
-
-    & video{
-      width:100%;
-      height:100%;
-      object-fit: cover;
-    }
-  }
-`;
-
-export const StyledCoverOverlay = styled.div`
-  position:absolute;
-  top: 0;
-  left: 0;
-  width:100%;
-  height:100%;
-`;
-
-
-export const StyledCoverContent = styled.div`
-  position: relative;
-  display: block;
-  width: 100%;
-`;
-
+import { ICover } from './Cover.interface';
+import { StyledVideo } from '../../atoms/Video/Video.theme';
+import styled from 'styled-components';
+
+export const StyledCover = styled.div<ICover>`
+  display: flex;
+  position:relative;
+  width:100%;
+  overflow: hidden;
+
+  & > img{
+    position:absolute;
+    top: 0;
+    left: 0;
+    width:100%;
+    height:100%;
+    object-fit: cover;
+  }
+
+  & > ${StyledVideo}{
+    position:absolute;
+    top: 0;
+    left: 0;
+    width:100%;
+    height:100%;
+
+    & video{
+      width:100%;
+      height:100%;
+      object-fit: cover;
+    }
+  }
+`;
+
+export const StyledCoverOverlay = styled.div`
+  position:absolute;
+  top: 0;
+  left: 0;
+  width:100%;
+  height:100%;
+`;
+
+
+export const StyledCoverContent = styled.div`
+  position: relative;
+  display: block;
+  width: 100%;
+`;
+

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

@@ -1 +1 @@
-export { default } from './Cover.component'
+export { default } from './Cover.component'