oddsgate-ds 1.0.174 → 1.0.175

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!'
+  }
+}

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

@@ -1,103 +1,103 @@
-import { colors, radius, responsiveMedia, spaces, typography } from '@/styles/variables';
-import styled, { css } from 'styled-components';
-
-import { IShareModal } from './ShareModal.interface';
-import { fontSize } from '@/styles/utilities';
-
-export const StyledModal = styled.div<IShareModal>`
-  color: ${colors.third50};
-
-  & a {
-    display: inline-block;
-    width: 50%;
-
-    text-decoration: none;
-    text-align: center;
-    padding: ${spaces[3]};
-
-    & > div {
-      display: flex;
-      width: 3.2rem;
-      height: 3.2rem;
-      line-height: 3.2rem;
-      border-radius: 50%;
-      color: ${colors.secondary50};
-      background: ${colors.third50};
-      margin: auto;
-      transition: all 0.3s ease;
-
-      & i {
-        color: currentColor;
-        font-size: 1.6rem;
-        margin: auto;
-      }
-    };
-
-    &:hover {
-      & > div {
-        background: ${colors.primary50}
-      }
-    };
-
-    @media only screen and (min-width: ${responsiveMedia}) {
-      width: 25%;
-    }
-  }
-`;
-
-export const StyledInput = styled.div<IShareModal>`
-  position: relative;
-  background: ${colors.white};
-  border: 1px solid ${colors.primary20};
-  border-radius: ${radius.sm};
-  padding: ${spaces[2]} ${spaces[3]};
-  cursor: pointer;
-
-  & span {
-    color: ${colors.gray90};
-    display: block;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    white-space: nowrap;
-    max-width: 90%;
-  };
-
-  & i {
-    position: absolute;
-    top: 50%;
-    right: ${spaces[2]};
-    color: ${colors.black};
-    font-size: 18px;
-    transform: translateY(-50%)
-  }
-`;
-
-export const StyledMessage = styled.div<IShareModal>`
-  position: absolute;
-  bottom: 1.5rem;
-  left: 50%;
-
-  display: inline-block;
-  vertical-align: top;
-
-  color: ${colors.white};
-  background-color: ${colors.primary50};
-
-  cursor: pointer;
-  padding: ${spaces[2]} ${spaces[4]};
-  ${fontSize('texts')};
-
-  border-radius: ${radius.lg};
-
-  opacity: 0;
-  visibility: hidden;
-  transform: translate(-50%, 3rem);
-  transition: all 0.3s ease;
-
-  &.active {
-    opacity: 1;
-    visibility: visible;
-    transform: translate(-50%, 0)
-  }
-`;
-
+import { colors, radius, responsiveMedia, spaces, typography } from '@/styles/variables';
+import styled, { css } from 'styled-components';
+
+import { IShareModal } from './ShareModal.interface';
+import { fontSize } from '@/styles/utilities';
+
+export const StyledModal = styled.div<IShareModal>`
+  color: ${colors.third50};
+
+  & a {
+    display: inline-block;
+    width: 50%;
+
+    text-decoration: none;
+    text-align: center;
+    padding: ${spaces[3]};
+
+    & > div {
+      display: flex;
+      width: 3.2rem;
+      height: 3.2rem;
+      line-height: 3.2rem;
+      border-radius: 50%;
+      color: ${colors.secondary50};
+      background: ${colors.third50};
+      margin: auto;
+      transition: all 0.3s ease;
+
+      & i {
+        color: currentColor;
+        font-size: 1.6rem;
+        margin: auto;
+      }
+    };
+
+    &:hover {
+      & > div {
+        background: ${colors.primary50}
+      }
+    };
+
+    @media only screen and (min-width: ${responsiveMedia}) {
+      width: 25%;
+    }
+  }
+`;
+
+export const StyledInput = styled.div<IShareModal>`
+  position: relative;
+  background: ${colors.white};
+  border: 1px solid ${colors.primary20};
+  border-radius: ${radius.sm};
+  padding: ${spaces[2]} ${spaces[3]};
+  cursor: pointer;
+
+  & span {
+    color: ${colors.gray90};
+    display: block;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 90%;
+  };
+
+  & i {
+    position: absolute;
+    top: 50%;
+    right: ${spaces[2]};
+    color: ${colors.black};
+    font-size: 18px;
+    transform: translateY(-50%)
+  }
+`;
+
+export const StyledMessage = styled.div<IShareModal>`
+  position: absolute;
+  bottom: 1.5rem;
+  left: 50%;
+
+  display: inline-block;
+  vertical-align: top;
+
+  color: ${colors.white};
+  background-color: ${colors.primary50};
+
+  cursor: pointer;
+  padding: ${spaces[2]} ${spaces[4]};
+  ${fontSize('texts')};
+
+  border-radius: ${radius.lg};
+
+  opacity: 0;
+  visibility: hidden;
+  transform: translate(-50%, 3rem);
+  transition: all 0.3s ease;
+
+  &.active {
+    opacity: 1;
+    visibility: visible;
+    transform: translate(-50%, 0)
+  }
+`;
+

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

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