oddsgate-ds 1.0.2

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

@@ -0,0 +1,130 @@
+import Heading from '../Heading/Heading.component'
+import { IMarquee } from './Marquee.interface'
+import React from 'react'
+import { StyledMarquee } from './Marquee.theme'
+import cn from 'classnames'
+import styled from 'styled-components'
+
+const Marquee = ({ text, className, onClick, ...props }: IMarquee) => {
+  return (
+        <Div3>
+          <Img
+            loading="lazy"
+            srcSet="..."
+          />
+          <Div4>
+            <Div5>
+              <Div6>
+                Transports
+                <br />& Infrastructers{" "}
+              </Div6>
+              <Div7>
+                <Img2
+                  loading="lazy"
+                  srcSet="..."
+                />
+              </Div7>
+            </Div5>
+          </Div4>
+        </Div3>
+  );
+}
+
+const Div = styled.div`
+  display: flex;
+  flex-direction: column;
+`;
+
+const Div2 = styled.div`
+  align-items: flex-start;
+  align-self: end;
+  display: flex;
+  margin-top: 100px;
+  width: 417px;
+  max-width: 100%;
+  flex-grow: 1;
+  flex-direction: column;
+`;
+
+const Div3 = styled.div`
+  disply: flex;
+  flex-direction: column;
+  border-radius: 10px;
+  align-self: stretch;
+  position: relative;
+  display: flex;
+  aspect-ratio: 1.2337278106508875;
+  flex-grow: 1;
+  padding-top: 8px;
+  padding-right: 17px;
+  padding-bottom: 16px;
+  padding-left: 16px;
+`;
+
+const Img = styled.img`
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  object-fit: cover;
+  object-position: center;
+`;
+
+const Div4 = styled.div`
+  position: relative;
+  justify-content: flex-end;
+  align-items: flex-end;
+  border-bottom: 1px solid var(--White, #fff);
+  align-self: stretch;
+  display: flex;
+  padding-top: 40px;
+  padding-bottom: 24px;
+  flex-direction: column;
+`;
+
+const Div5 = styled.div`
+  align-self: stretch;
+  display: flex;
+  margin-top: 192px;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 20px;
+`;
+
+const Div6 = styled.div`
+  align-self: start;
+  color: #fff;
+  font-feature-settings: "clig" off, "liga" off;
+  font-family: Noto Sans, sans-serif;
+  font-size: 24px;
+  font-weight: 300;
+  line-height: 120%;
+  max-width: 324px;
+  flex-grow: 1;
+  flex-basis: auto;
+`;
+
+const Div7 = styled.div`
+  justify-content: center;
+  align-items: center;
+  border-radius: 100px;
+  background-color: var(--Soft-Green, #f2f1ef);
+  align-self: start;
+  display: flex;
+  margin-top: 18px;
+  width: 40px;
+  max-width: 100%;
+  padding-top: 3px;
+  padding-right: 3px;
+  padding-bottom: 3px;
+  padding-left: 3px;
+  flex-direction: column;
+`;
+
+const Img2 = styled.img`
+  aspect-ratio: 1;
+  object-fit: cover;
+  object-position: center;
+  width: 34px;
+`;
+
+export default Marquee

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

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

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

@@ -0,0 +1,20 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { IMarquee } from './Marquee.interface'
+import Marquee from './Marquee.component'
+import React from 'react'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/Marquee',
+  component: Marquee,
+  tags: ['autodocs'],
+  argTypes: {}
+} as Meta
+
+export const Simple: StoryObj<IMarquee> = {
+  render: args => <Marquee {...args} />,
+  args: {
+    text: 'People • Sustainability • Efficiency • Innovation'
+  }
+}

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

@@ -0,0 +1,42 @@
+import { colors, radius } from '@/styles/variables';
+import styled, { css } from 'styled-components';
+
+import { IMarquee } from './Marquee.interface';
+
+export const StyledMarquee = styled.div<IMarquee>`
+  position: relative;
+  top: 0;
+  left: 0;
+  width: 100%;
+  contain: paint;
+  pointer-events: none;
+
+  --offset: 20vw;
+  --move-initial: calc(-25% + var(--offset));
+  --move-final: calc(-50% + var(--offset));
+
+  color: ${colors.white};
+  background-color: ${colors.primary70};
+  border-radius: ${radius.md};
+
+  padding: 8px 0;
+
+  & > div{
+    position: relative;
+    display: flex;
+    width: fit-content;
+    white-space: nowrap;
+    transform: translate3d(var(--move-initial), 0, 0);
+    animation: marquee 5s linear infinite;
+  }
+
+  @keyframes marquee {
+    0% {
+      transform: translate3d(var(--move-initial), 0, 0);
+    }
+
+    100% {
+      transform: translate3d(var(--move-final), 0, 0);
+    }
+  }
+`;

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

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

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

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import RichText from '../RichText';
+import { IQuote } from './Quote.interface';
+import { StyledQuote } from './Quote.theme';
+
+const Quote = ({
+  id,
+  value,
+  citation,
+  className,
+  children,
+  ...props
+}: IQuote) => {
+  return (
+    <StyledQuote id={id} {...props}>
+      <blockquote>
+        <RichText tag="div">{value}</RichText>
+      </blockquote>
+      {!!citation && (
+        <figcaption>
+          ~ <RichText tag="span">{citation}</RichText>
+        </figcaption>
+      )}
+    </StyledQuote>
+  )
+}
+
+export default Quote

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

@@ -0,0 +1,10 @@
+import { CSSProperties } from 'react';
+
+export type IQuote = {
+  id?: string;
+  value?: string;
+  citation?: string;
+  className?: string;
+  style?: CSSProperties;
+  children?: React.ReactNode;
+};

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

@@ -0,0 +1,25 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { IQuote } from './Quote.interface'
+import Quote from './Quote.component'
+import React from 'react'
+
+export default {
+  title: 'Components/Quote',
+  component: Quote,
+  tags: ['autodocs']
+} as Meta
+
+export const Simple: StoryObj<IQuote> = {
+  render: args => <Quote {...args} />,
+  args: {
+    value:
+      '"There are seasons in every country when noise and impudence pass current for worth; and in popular commotions especially, the clamors of interested and factious men are often mistaken for patriotism."'
+  }
+}
+export const WithCitation: StoryObj<IQuote> = {
+  args: {
+    ...Simple.args,
+    citation: 'Jeffery Smith, 28'
+  }
+}

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

@@ -0,0 +1,26 @@
+import { colors, spaces, typography } from '@/styles/variables';
+import styled, { css } from 'styled-components';
+
+import { IQuote } from './Quote.interface';
+import { fontSize } from '@/styles/utilities';
+
+export const StyledQuote = styled.div<IQuote>`
+  color: currentColor;
+  margin-bottom: ${spaces[2]};
+  padding: 0 ${spaces[4]};
+  ${fontSize('texts')};
+  border-left: 2px solid ${colors.gray50};
+
+  & blockquote {
+    margin-left: 0;
+    margin-bottom: ${spaces[2]};
+
+    & p {
+      margin-bottom: 0;
+    }
+  }
+
+  & figcaption {
+    font-weight: bold
+  }
+`;

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

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

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

@@ -0,0 +1,31 @@
+import { IRichText } from './RichText.interface';
+import React from 'react';
+import { StyledRichText } from './RichText.theme';
+import { typographyTags } from '../Heading/Heading.interface';
+import xss from 'xss';
+
+const RichText = ({
+  id,
+  tag = 'div',
+  attributes,
+  className,
+  style,
+  children,
+  ...props
+}: IRichText) => {
+  return (
+    <StyledRichText
+      id={id}
+      as={typographyTags[tag]}
+      className={className}
+      style={style}
+      dangerouslySetInnerHTML={{
+        __html: xss(children, {
+          stripIgnoreTagBody: ['script']
+        })
+      }}
+    />
+  )
+}
+
+export default RichText

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

@@ -0,0 +1,11 @@
+import { CSSProperties } from 'react';
+import { typographyTags } from '../Heading/Heading.interface';
+
+export type IRichText = {
+  id?: string;
+  tag?: keyof typeof typographyTags;
+  attributes?: object;
+  className?: string;
+  style?: CSSProperties;
+  children?: any;
+};

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

@@ -0,0 +1,73 @@
+import { Meta, StoryObj } from '@storybook/react'
+
+import { IRichText } from './RichText.interface'
+import React from 'react'
+import RichText from '@/components/atoms/RichText'
+
+export default {
+  title: 'Components/RichText',
+  component: RichText,
+  tags: ['autodocs']
+} as Meta
+
+export const Simple: StoryObj<IRichText> = {
+  render: args => (
+    <RichText {...args}>
+      {`Example mixed content <strong>with bold text</strong> and <a href="https://example.com">linked content</a>.`}
+    </RichText>
+  ),
+  args: {
+    tag: 'p'
+  }
+}
+
+export const List: StoryObj<IRichText> = {
+  render: args => (
+    <RichText {...args}>
+      {`<h1>H1</h1>
+      <h2>H2</h2>
+      <h3>H3</h3>
+      <h3>H3</h3>
+      <h4>H4</h4>
+      <h5>H5</h5>
+      <h6>H6</h6>
+      <p>Paragraph tag <strong>with</strong> <a href="https://example.com">linked content</a>.</p>
+      <ul>
+        <li>UL List item 1</li>
+        <li>UL List item 2
+          <ul>
+            <li>UL List item 1</li>
+            <li>UL List item 2</li>
+            <li>UL List item 3</li>
+          </ul>
+        </li>
+        <li>UL List item 3</li>
+      </ul>
+      <ol>
+        <li>OL List item 1</li>
+        <li>OL List item 2
+          <ol>
+            <li>OL List item 1</li>
+            <li>OL List item 2</li>
+            <li>OL List item 3</li>
+          </ol>
+        </li>
+        <li>OL List item 3</li>
+      </ol>`}
+    </RichText>
+  ),
+  args: {
+    tag: 'div'
+  }
+}
+
+export const Heading: StoryObj<IRichText> = {
+  render: args => (
+    <RichText {...args}>
+      {`This heading has <strong>Bold Content</strong> and <i>Italics</i>`}
+    </RichText>
+  ),
+  args: {
+    tag: 'h2'
+  }
+}

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

@@ -0,0 +1,32 @@
+import { colors, spaces, typography } from '@/styles/variables';
+import styled, { css } from 'styled-components';
+
+import { IRichText } from './RichText.interface';
+import { fontSize } from '@/styles/utilities';
+
+export const StyledRichText = styled.div<IRichText>`
+  & p {
+    margin: 0;
+  }
+
+  ol, ul {
+    padding-left: 16px;
+  }
+
+  & ol{
+    list-style: decimal;
+  }
+  & ul{
+    list-style: disc;
+  }
+
+  .dropCap{
+    &::first-letter {
+      float: left;
+      margin-right: ${spaces[4]};
+      ${fontSize('h2')};
+      font-weight: bold;
+    }
+  }
+`;
+

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

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

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

@@ -0,0 +1,18 @@
+import { IScrollingNav } from './ScrollingNav.interface'
+import React from 'react'
+import { StyledScrollingNav } from '@/components/atoms/ScrollingNav/ScrollingNav.theme'
+
+const ScrollingNav = ({
+  align,
+  children,
+  className,
+  ...props
+}: IScrollingNav) => {
+  return (
+    <StyledScrollingNav align={align} className={className} {...props}>
+      {children}
+    </StyledScrollingNav>
+  )
+}
+
+export default ScrollingNav

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

@@ -0,0 +1,8 @@
+import { CSSProperties } from 'react';
+
+export interface IScrollingNav {
+  align?: string
+  className?: string,
+  style?: CSSProperties
+  children?: React.ReactNode
+}

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

@@ -0,0 +1,44 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import Chip from '@/components/atoms/Chip'
+import { IScrollingNav } from './ScrollingNav.interface'
+import React from 'react'
+import ScrollingNav from './ScrollingNav.component'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/ScrollingNav',
+  component: ScrollingNav,
+  tags: ['autodocs'],
+  // More on argTypes: https://storybook.js.org/docs/react/api/argtypes
+  argTypes: {}
+} as Meta
+
+export const Simple: StoryObj<IScrollingNav> = {
+  render: args => (
+    <ScrollingNav {...args}>
+      <Chip variant={'light'} hover={true}>
+        Item 1
+      </Chip>
+      <Chip variant={'light'} hover={true}>
+        Item 2
+      </Chip>
+      <Chip variant={'light'} hover={true}>
+        Item 3
+      </Chip>
+      <Chip variant={'light'} hover={true}>
+        Item 4
+      </Chip>
+      <Chip variant={'light'} hover={true}>
+        Item 5
+      </Chip>
+      <Chip variant={'light'} hover={true}>
+        Item 6
+      </Chip>
+      <Chip variant={'light'} hover={true}>
+        Item 7
+      </Chip>
+    </ScrollingNav>
+  ),
+  args: {}
+}

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

@@ -0,0 +1,55 @@
+import styled, { css } from 'styled-components';
+
+import { IScrollingNav } from './ScrollingNav.interface';
+import { colors } from '@/styles/variables';
+
+export const StyledScrollingNav = styled.div<IScrollingNav>`
+  position: relative;
+  display: flex;
+  align-items: center;
+  max-width: 100%;
+  gap: 1rem;
+  padding-bottom: 12px;
+
+  -webkit-overflow-scrolling: touch;
+  overflow-x: auto;
+  overflow-y: visible;
+  text-align: center;
+  white-space: nowrap;
+
+  -webkit-backface-visibility: hidden;
+  backface-visibility: hidden;
+
+  -ms-overflow-style: auto;
+
+  & > div {
+    &:first-child {
+      margin-left: auto !important;
+    }
+
+    &:last-child {
+      margin-right: auto !important;
+    }
+  }
+
+  ${(props) => {
+    switch (props.align) {
+      case "left":
+        return css`
+          & > div {
+            &:first-child {
+              margin-left: 0 !important;
+            }
+          }
+        `;
+      case "right":
+        return css`
+          & > div {
+            &:last-child {
+              margin-right: 0 !important;
+            }
+          }
+        `;
+    }
+  }}
+`;

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

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

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

@@ -0,0 +1,19 @@
+import React from 'react';
+
+import { ISeparator } from './Separator.interface';
+import { StyledSeparator } from './Separator.theme';
+
+const Separator = ({ color, margin, height, ...props }: ISeparator) => {
+  return (
+    <StyledSeparator
+      style={{
+        backgroundColor: color ? color : ``,
+        height: height,
+        margin: margin ? margin : ''
+      }}
+      {...props}
+    />
+  )
+}
+
+export default Separator

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

@@ -0,0 +1,9 @@
+import { CSSProperties } from 'react';
+
+export type ISeparator = {
+  color?: string
+  margin?: string,
+  height?: string
+  className?: string;
+  style?: CSSProperties
+};

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

@@ -0,0 +1,28 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { ISeparator } from '../Separator/Separator.interface'
+import React from 'react'
+import Separator from '../Separator/Separator.component'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/Separator',
+  component: Separator,
+  tags: ['autodocs'],
+  // argTypes: {
+  //   height: {
+  //     control: 'text'
+  //   },
+  //   color: {
+  //     control: 'colorpicker'
+  //   }
+  // }
+} as Meta
+
+export const Simple: StoryObj<ISeparator> = {
+  render: args => <Separator {...args} />,
+  args: {
+    height: '5px',
+    color: '#000'
+  }
+}

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

@@ -0,0 +1,12 @@
+import styled, { css } from 'styled-components';
+
+import { ISeparator } from './Separator.interface';
+
+export const StyledSeparator = styled.div<ISeparator>`
+  display: block;
+  border: none;
+  width: 100%;
+
+  margin: ${props => props.margin ? `var(--space-${props.margin}) 0` : ""};
+`;
+

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

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