oddsgate-ds 1.0.169 → 1.0.174

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

@@ -1,29 +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
+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

@@ -1,10 +1,10 @@
-import { CSSProperties } from 'react';
-
-export type IQuote = {
-  id?: string;
-  value?: string;
-  citation?: string;
-  className?: string;
-  style?: CSSProperties;
-  children?: React.ReactNode;
-};
+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

@@ -1,25 +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'
-  }
-}
+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

@@ -1,26 +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
-  }
-`;
+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

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

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

@@ -1,32 +1,32 @@
-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']
-        })
-      }}
-      {...props}
-    />
-  )
-}
-
-export default RichText
+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']
+        })
+      }}
+      {...props}
+    />
+  )
+}
+
+export default RichText

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

@@ -1,11 +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;
-};
+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

@@ -1,73 +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'
-  }
-}
+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

@@ -1,34 +1,34 @@
-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>`
-  display: block;
-
-  & 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;
-    }
-  }
-`;
-
+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>`
+  display: block;
+
+  & 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

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

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

@@ -1,18 +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
+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

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

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

@@ -1,44 +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: {}
-}
+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: {}
+}