oddsgate-ds 1.0.169 → 1.0.174

package/src/components/molecules/ProductCard/ProductCard.stories.tsx

@@ -1,42 +1,42 @@
-import type { Meta, StoryObj } from '@storybook/react'
-
-import { IProductCard } from './ProductCard.interface'
-import ProductCard from './ProductCard.component'
-import React from 'react'
-
-// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
-export default {
-  title: 'Components/ProductCard',
-  component: ProductCard,
-  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<IProductCard> = {
-  render: args => (
-    <>
-      <ProductCard
-        {...args}
-        title="Lorem"
-        style={{ maxWidth: '320px' }}
-      ></ProductCard>
-      <ProductCard {...args} style={{ maxWidth: '320px' }}></ProductCard>
-    </>
-  ),
-  args: {
-    title: 'Cras vel facilisis tellus',
-    imageElement: image,
-    description:
-      'Cras vel facilisis tellus, id iaculis risus. Vestibulum non mollis ipsum. Vestibulum faucibus nisl sit amet magna interdum tristique. Cras vel facilisis tellus, id iaculis risus. Vestibulum non mollis ipsum. Vestibulum faucibus nisl sit amet magna interdum tristique.'
-  }
-}
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { IProductCard } from './ProductCard.interface'
+import ProductCard from './ProductCard.component'
+import React from 'react'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/ProductCard',
+  component: ProductCard,
+  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<IProductCard> = {
+  render: args => (
+    <>
+      <ProductCard
+        {...args}
+        title="Lorem"
+        style={{ maxWidth: '320px' }}
+      ></ProductCard>
+      <ProductCard {...args} style={{ maxWidth: '320px' }}></ProductCard>
+    </>
+  ),
+  args: {
+    title: 'Cras vel facilisis tellus',
+    imageElement: image,
+    description:
+      'Cras vel facilisis tellus, id iaculis risus. Vestibulum non mollis ipsum. Vestibulum faucibus nisl sit amet magna interdum tristique. Cras vel facilisis tellus, id iaculis risus. Vestibulum non mollis ipsum. Vestibulum faucibus nisl sit amet magna interdum tristique.'
+  }
+}

package/src/components/molecules/ProductCard/ProductCard.theme.ts

@@ -1,26 +1,26 @@
-import { colors, radius } from '@/styles/variables';
-import styled, { css } from 'styled-components';
-
-import { IProductCard } from './ProductCard.interface';
-
-export const StyledProductCard = styled.div <IProductCard>`
-  text-align:center;
-
-  & img{
-    width: 100%;
-    max-width: 8rem;
-    object-fit: contain;
-  }
-`;
-
-export const StyledProductCardWrapper = styled.div<IProductCard>`
-  display:flex;
-  flex-flow:column;
-  align-items: center;
-  justify-content: center;
-  gap: 1.5rem;
-  background-color: ${colors.primary50};
-  padding: 3rem 2rem;
-  border-radius: 0 ${radius.lg};
-  aspect-ratio: 0.89/1;
-`;
+import { colors, radius } from '@/styles/variables';
+import styled, { css } from 'styled-components';
+
+import { IProductCard } from './ProductCard.interface';
+
+export const StyledProductCard = styled.div <IProductCard>`
+  text-align:center;
+
+  & img{
+    width: 100%;
+    max-width: 8rem;
+    object-fit: contain;
+  }
+`;
+
+export const StyledProductCardWrapper = styled.div<IProductCard>`
+  display:flex;
+  flex-flow:column;
+  align-items: center;
+  justify-content: center;
+  gap: 1.5rem;
+  background-color: ${colors.primary50};
+  padding: 3rem 2rem;
+  border-radius: 0 ${radius.lg};
+  aspect-ratio: 0.89/1;
+`;

package/src/components/molecules/ProductCard/index.ts

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

package/src/components/molecules/ShareModal/ShareModal.component.tsx

@@ -1,167 +1,167 @@
-import React, { useEffect, useState } from 'react'
-import { StyledInput, StyledMessage, StyledModal } from './ShareModal.theme'
-
-import Flex from '../../atoms/Flex'
-import Heading from '../../atoms/Heading'
-import { IShareModal } from './ShareModal.interface'
-import Icon from '../../atoms/Icon'
-import Modal from '../Modal'
-
-type mapTypes = {
-  [key: string]: string
-}
-
-const ShareModal = ({
-  siteTitle,
-  title,
-  label,
-  url,
-  copyText,
-  open,
-  onClose,
-  ...props
-}: IShareModal) => {
-  const [copied, setCopied] = useState(false)
-
-  useEffect(() => {
-    const timeOut = setTimeout(() => {
-      setCopied(false)
-    }, 1500)
-
-    return () => clearTimeout(timeOut)
-  }, [copied])
-
-  const escapeHtml = (text: string) => {
-    if (!text) return ''
-
-    const map: mapTypes = {
-      '&': '&',
-      '<': '&lt;',
-      '>': '&gt;',
-      '"': '&quot;',
-      "'": '&#039;'
-    }
-
-    return text?.replace(/[&<>"']/g, function (m: string) {
-      return map[m]
-    })
-  }
-
-  const copyToClipboard = (text?: string) => {
-    text && navigator.clipboard.writeText(text)
-  }
-
-  if (!url) return <></>
-
-  url = url.replace(/([^:]\/)\/+/g, '$1')
-
-  const shareTitle = title && encodeURIComponent(escapeHtml(title))
-  const shareUrl = url && encodeURIComponent(url)
-
-  const facebookURL = `https://www.facebook.com/sharer/sharer.php?u=${shareUrl}&t=${shareTitle}`
-  const twitterURL = `https://twitter.com/intent/tweet?text=${shareTitle}&url=${shareUrl}`
-  const linkedInURL = `https://www.linkedin.com/shareArticle?mini=true&url=${shareUrl}&title=${shareTitle}`
-
-  const whatsappURL = `https://api.whatsapp.com/send?text=${shareUrl}`
-  const emailURL = `mailto:?subject=${siteTitle} - ${shareTitle}&body=${shareUrl}`
-
-  return (
-    <Modal title={label} open={open} onClose={onClose}>
-      <StyledModal {...props}>
-        <Flex align={'center'} justify={'space-between'} wrap={'wrap'}>
-          <a
-            className="social-link"
-            aria-label="Facebook"
-            href={facebookURL}
-            target="_blank"
-            rel="noreferrer"
-          >
-            <div>
-              <Icon icon="icon-facebook" />
-            </div>
-            <Heading
-              size={'captions'}
-              tag={'span'}
-              style={{ marginTop: 'var(--space-3)' }}
-            >
-              Facebook
-            </Heading>
-          </a>
-          <a
-            className="social-link"
-            href={twitterURL}
-            target="_blank"
-            aria-label="Twitter"
-            rel="noreferrer"
-          >
-            <div>
-              <Icon icon="icon-twitter" />
-            </div>
-            <Heading
-              size={'captions'}
-              tag={'span'}
-              style={{ marginTop: 'var(--space-3)' }}
-            >
-              Twitter
-            </Heading>
-          </a>
-          <a
-            className="social-link"
-            href={linkedInURL}
-            target="_blank"
-            aria-label="LinkedIn"
-            rel="noreferrer noopener"
-          >
-            <div>
-              <Icon icon="icon-linkedin" />
-            </div>
-            <Heading
-              size={'captions'}
-              tag={'span'}
-              style={{ marginTop: 'var(--space-3)' }}
-            >
-              LinkedIn
-            </Heading>
-          </a>
-          <a
-            className="social-link"
-            href={whatsappURL}
-            target="_blank"
-            aria-label="WhatsApp"
-            rel="noreferrer"
-          >
-            <div>
-              <Icon icon="icon-whatsapp" />
-            </div>
-            <Heading
-              size={'captions'}
-              tag={'span'}
-              style={{ marginTop: 'var(--space-3)' }}
-            >
-              WhatsApp
-            </Heading>
-          </a>
-        </Flex>
-        <div style={{ marginTop: 'var(--space-5)' }}>
-          <StyledInput
-            onClick={() => {
-              copyToClipboard(url)
-              setCopied(true)
-            }}
-          >
-            <span>{url}</span>
-            <Icon icon="icon-link" />
-          </StyledInput>
-          <StyledMessage
-            className={copied ? 'active' : ''}
-            style={{ textAlign: 'center' }}
-          >
-            {copyText}
-          </StyledMessage>
-        </div>
-      </StyledModal>
-    </Modal>
-  )
-}
-
-export default ShareModal
+import React, { useEffect, useState } from 'react'
+import { StyledInput, StyledMessage, StyledModal } from './ShareModal.theme'
+
+import Flex from '../../atoms/Flex'
+import Heading from '../../atoms/Heading'
+import { IShareModal } from './ShareModal.interface'
+import Icon from '../../atoms/Icon'
+import Modal from '../Modal'
+
+type mapTypes = {
+  [key: string]: string
+}
+
+const ShareModal = ({
+  siteTitle,
+  title,
+  label,
+  url,
+  copyText,
+  open,
+  onClose,
+  ...props
+}: IShareModal) => {
+  const [copied, setCopied] = useState(false)
+
+  useEffect(() => {
+    const timeOut = setTimeout(() => {
+      setCopied(false)
+    }, 1500)
+
+    return () => clearTimeout(timeOut)
+  }, [copied])
+
+  const escapeHtml = (text: string) => {
+    if (!text) return ''
+
+    const map: mapTypes = {
+      '&': '&amp;',
+      '<': '&lt;',
+      '>': '&gt;',
+      '"': '&quot;',
+      "'": '&#039;'
+    }
+
+    return text?.replace(/[&<>"']/g, function (m: string) {
+      return map[m]
+    })
+  }
+
+  const copyToClipboard = (text?: string) => {
+    text && navigator.clipboard.writeText(text)
+  }
+
+  if (!url) return <></>
+
+  url = url.replace(/([^:]\/)\/+/g, '$1')
+
+  const shareTitle = title && encodeURIComponent(escapeHtml(title))
+  const shareUrl = url && encodeURIComponent(url)
+
+  const facebookURL = `https://www.facebook.com/sharer/sharer.php?u=${shareUrl}&t=${shareTitle}`
+  const twitterURL = `https://twitter.com/intent/tweet?text=${shareTitle}&url=${shareUrl}`
+  const linkedInURL = `https://www.linkedin.com/shareArticle?mini=true&url=${shareUrl}&title=${shareTitle}`
+
+  const whatsappURL = `https://api.whatsapp.com/send?text=${shareUrl}`
+  const emailURL = `mailto:?subject=${siteTitle} - ${shareTitle}&body=${shareUrl}`
+
+  return (
+    <Modal title={label} open={open} onClose={onClose}>
+      <StyledModal {...props}>
+        <Flex align={'center'} justify={'space-between'} wrap={'wrap'}>
+          <a
+            className="social-link"
+            aria-label="Facebook"
+            href={facebookURL}
+            target="_blank"
+            rel="noreferrer"
+          >
+            <div>
+              <Icon icon="icon-facebook" />
+            </div>
+            <Heading
+              size={'captions'}
+              tag={'span'}
+              style={{ marginTop: 'var(--space-3)' }}
+            >
+              Facebook
+            </Heading>
+          </a>
+          <a
+            className="social-link"
+            href={twitterURL}
+            target="_blank"
+            aria-label="Twitter"
+            rel="noreferrer"
+          >
+            <div>
+              <Icon icon="icon-twitter" />
+            </div>
+            <Heading
+              size={'captions'}
+              tag={'span'}
+              style={{ marginTop: 'var(--space-3)' }}
+            >
+              Twitter
+            </Heading>
+          </a>
+          <a
+            className="social-link"
+            href={linkedInURL}
+            target="_blank"
+            aria-label="LinkedIn"
+            rel="noreferrer noopener"
+          >
+            <div>
+              <Icon icon="icon-linkedin" />
+            </div>
+            <Heading
+              size={'captions'}
+              tag={'span'}
+              style={{ marginTop: 'var(--space-3)' }}
+            >
+              LinkedIn
+            </Heading>
+          </a>
+          <a
+            className="social-link"
+            href={whatsappURL}
+            target="_blank"
+            aria-label="WhatsApp"
+            rel="noreferrer"
+          >
+            <div>
+              <Icon icon="icon-whatsapp" />
+            </div>
+            <Heading
+              size={'captions'}
+              tag={'span'}
+              style={{ marginTop: 'var(--space-3)' }}
+            >
+              WhatsApp
+            </Heading>
+          </a>
+        </Flex>
+        <div style={{ marginTop: 'var(--space-5)' }}>
+          <StyledInput
+            onClick={() => {
+              copyToClipboard(url)
+              setCopied(true)
+            }}
+          >
+            <span>{url}</span>
+            <Icon icon="icon-link" />
+          </StyledInput>
+          <StyledMessage
+            className={copied ? 'active' : ''}
+            style={{ textAlign: 'center' }}
+          >
+            {copyText}
+          </StyledMessage>
+        </div>
+      </StyledModal>
+    </Modal>
+  )
+}
+
+export default ShareModal

package/src/components/molecules/ShareModal/ShareModal.interface.ts

@@ -1,9 +1,9 @@
-export type IShareModal = {
-  siteTitle?: string
-  title?: string
-  url?: string
-  label?: string
-  copyText?: string
-  open?: boolean
-  onClose?: () => void
-}
+export type IShareModal = {
+  siteTitle?: string
+  title?: string
+  url?: string
+  label?: string
+  copyText?: string
+  open?: boolean
+  onClose?: () => void
+}

package/src/components/molecules/ShareModal/ShareModal.stories.tsx

@@ -1,33 +1,33 @@
-import type { Meta, StoryObj } from '@storybook/react'
-import React, { useState } from 'react'
-
-import Button from '../../atoms/Button/Button.component'
-import { IShareModal } from './ShareModal.interface'
-import ShareModal from './ShareModal.component'
-
-export default {
-  title: 'Components/ShareModal',
-  component: ShareModal,
-  tags: ['autodocs']
-} as Meta
-
-export const Simple: StoryObj<IShareModal> = {
-  render: args => {
-    const [isOpen, setIsOpen] = useState(false)
-    return (
-      <>
-        <Button variant="primary" onClick={() => setIsOpen(true)}>
-          Open
-        </Button>
-        <ShareModal {...args} open={isOpen} onClose={() => setIsOpen(false)} />
-      </>
-    )
-  },
-  args: {
-    siteTitle: 'Miewtheme DS',
-    title: 'Design system',
-    url: 'https://miew.pt/',
-    label: 'Share',
-    copyText: 'Copied to clipboard!'
-  }
-}
+import type { Meta, StoryObj } from '@storybook/react'
+import React, { useState } from 'react'
+
+import Button from '../../atoms/Button/Button.component'
+import { IShareModal } from './ShareModal.interface'
+import ShareModal from './ShareModal.component'
+
+export default {
+  title: 'Components/ShareModal',
+  component: ShareModal,
+  tags: ['autodocs']
+} as Meta
+
+export const Simple: StoryObj<IShareModal> = {
+  render: args => {
+    const [isOpen, setIsOpen] = useState(false)
+    return (
+      <>
+        <Button variant="primary" onClick={() => setIsOpen(true)}>
+          Open
+        </Button>
+        <ShareModal {...args} open={isOpen} onClose={() => setIsOpen(false)} />
+      </>
+    )
+  },
+  args: {
+    siteTitle: 'Miewtheme DS',
+    title: 'Design system',
+    url: 'https://miew.pt/',
+    label: 'Share',
+    copyText: 'Copied to clipboard!'
+  }
+}