oddsgate-ds 1.0.166 → 1.0.168

package/dist/esm/types/components/atoms/LegalLinks/LegalLinks.component.d.ts

@@ -0,0 +1,4 @@
+import { ILegalLinks } from './LegalLinks.interface';
+import React from 'react';
+declare const LegalLinks: ({ links, className, style, }: ILegalLinks) => React.JSX.Element;
+export default LegalLinks;

package/dist/esm/types/components/atoms/LegalLinks/LegalLinks.interface.d.ts

@@ -0,0 +1,10 @@
+import { CSSProperties } from 'react';
+export type ILegalLink = {
+    label: string;
+    url: string;
+};
+export type ILegalLinks = {
+    links?: ILegalLink[];
+    className?: string;
+    style?: CSSProperties;
+};

package/dist/esm/types/components/atoms/LegalLinks/LegalLinks.theme.d.ts

@@ -0,0 +1,3 @@
+/// <reference types="react" />
+import { ILegalLinks } from './LegalLinks.interface';
+export declare const StyledLegalLinks: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components/dist/types").Substitute<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLUListElement>, HTMLUListElement>, ILegalLinks>> & string;

package/dist/esm/types/components/atoms/LegalLinks/index.d.ts

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

package/dist/esm/types/index.d.ts

@@ -21,6 +21,7 @@ export { default as CloseButton } from './components/atoms/CloseButton';
 export { default as Counter } from './components/atoms/Counter';
 export { default as ScrollingNav } from './components/atoms/ScrollingNav';
 export { default as SocialLinks } from './components/atoms/SocialLinks';
+export { default as LegalLinks } from './components/atoms/LegalLinks';
 export { default as Marquee } from './components/atoms/Marquee';
 export { default as CardMarquee } from './components/atoms/CardMarquee';
 export { default as PortalComponent } from './components/common/PortalComponent';

package/dist/types.d.ts

@@ -380,6 +380,18 @@ type ISocialLinks = {
 
 declare const SocialLinks: ({ variant, socials, className, style, ...props }: ISocialLinks) => React__default.JSX.Element;
 
+type ILegalLink = {
+    label: string;
+    url: string;
+};
+type ILegalLinks = {
+    links?: ILegalLink[];
+    className?: string;
+    style?: CSSProperties;
+};
+
+declare const LegalLinks: ({ links, className, style, }: ILegalLinks) => React__default.JSX.Element;
+
 type IMarquee = {
     text?: string;
     repeat?: number;
@@ -682,4 +694,4 @@ declare function useMediaMatch(query?: string): boolean;
 
 declare const debounce: (callback: any, wait: number) => (...args: any) => void;
 
-export { Accordion, AccordionItem, BlogCard, Button, CardMarquee, CareersCard, CheckRadioField, Chip, CircularSlider, CloseButton, Column, Counter, Cover, Dropdown, DropdownItem, EmptyState, EventsCard, Flex, FormField, GlobalStyles, Heading, Icon, IconBox, IconTitle, ImageWrapper, LicenseCard, Loader, LogosCard, Marquee, Modal, NewsCard, OffCanvas, PortalComponent, ProductCard, ProductsSlider, Quote, RichText, Row, ScrollingNav, Separator, ShareModal, Slider, SocialLinks, Spacer, Tabs, TeamCard, Video, VideoEmbed, clickOutSideToClose, debounce, iconsList, isTouchDevice, useMediaMatch, variables };
+export { Accordion, AccordionItem, BlogCard, Button, CardMarquee, CareersCard, CheckRadioField, Chip, CircularSlider, CloseButton, Column, Counter, Cover, Dropdown, DropdownItem, EmptyState, EventsCard, Flex, FormField, GlobalStyles, Heading, Icon, IconBox, IconTitle, ImageWrapper, LegalLinks, LicenseCard, Loader, LogosCard, Marquee, Modal, NewsCard, OffCanvas, PortalComponent, ProductCard, ProductsSlider, Quote, RichText, Row, ScrollingNav, Separator, ShareModal, Slider, SocialLinks, Spacer, Tabs, TeamCard, Video, VideoEmbed, clickOutSideToClose, debounce, iconsList, isTouchDevice, useMediaMatch, variables };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "oddsgate-ds",
-  "version": "1.0.166",
+  "version": "1.0.168",
   "description": "Miew theme component library",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",

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

@@ -0,0 +1,35 @@
+import { ILegalLinks } from './LegalLinks.interface'
+import React from 'react'
+import { StyledLegalLinks } from './LegalLinks.theme'
+
+const LegalLinks = ({
+  links,
+  className,
+  style,
+}: ILegalLinks) => {
+  if (!links) return <></>
+
+  return (
+    <StyledLegalLinks className={className} style={style}>
+      {links.map((link, index) => {
+        if (!link.label || !link.url) return <></>
+
+        return (
+          <li key={`legalLink-${index}`}>
+            <a
+              href={link.url}
+              target="_blank"
+              aria-label={link.label}
+              rel="noreferrer"
+              className="font-epilogue"
+            >
+              {link.label}
+            </a>
+          </li>
+        )
+      })}
+    </StyledLegalLinks>
+  )
+}
+
+export default LegalLinks

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

@@ -0,0 +1,12 @@
+import { CSSProperties } from 'react';
+
+export type ILegalLink = {
+  label: string
+  url: string
+}
+
+export type ILegalLinks = {
+  links?: ILegalLink[]
+  className?: string,
+  style?: CSSProperties
+}

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

@@ -0,0 +1,43 @@
+import type { Meta, StoryObj } from '@storybook/react'
+
+import { ILegalLinks } from './LegalLinks.interface'
+import React from 'react'
+import LegalLinks from './LegalLinks.component'
+
+// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
+export default {
+  title: 'Components/LegalLinks',
+  component: LegalLinks,
+  tags: ['autodocs'],
+  argTypes: {}
+} as Meta
+
+export const Example: StoryObj<ILegalLinks> = {
+  args: {
+    links: [
+      {
+        'label': 'Terms of Service',
+        'url': 'https://www.miew.com/terms-of-service'
+      },
+      {
+        'label': 'Privacy Policy',
+        'url': 'https://www.miew.com/privacy-policy'
+      },
+      {
+        'label': 'Cookie Policy',
+        'url': 'https://www.miew.com/cookie-policy'
+      },
+      {
+        'label': 'Accessibility Statement',
+        'url': 'https://www.miew.com/accessibility-statement'
+      }
+    ]
+  },
+  decorators: [
+    (Story) => (
+      <div style={{ background: 'black', padding: '2rem' }}>
+        {Story()}
+      </div>
+    )
+  ]
+}

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

@@ -0,0 +1,23 @@
+import { responsiveMedia } from '@/styles/variables'
+import styled from 'styled-components'
+
+import { ILegalLinks } from './LegalLinks.interface'
+
+export const StyledLegalLinks = styled.ul<ILegalLinks>`
+  display: inline-flex;
+  align-items: center;
+  flex-flow: row wrap;
+  gap: 32px;
+
+  & li {
+    & a {
+      font-size: 15px;
+      font-style: normal;
+      font-weight: 400;
+      transition: all 0.3s linear;
+      &:hover {
+        opacity: 0.6;
+      }
+    }
+  }
+`

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

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

package/src/index.ts

@@ -23,6 +23,7 @@ export { default as CloseButton } from './components/atoms/CloseButton'
 export { default as Counter } from './components/atoms/Counter'
 export { default as ScrollingNav } from './components/atoms/ScrollingNav'
 export { default as SocialLinks } from './components/atoms/SocialLinks'
+export { default as LegalLinks } from './components/atoms/LegalLinks'
 export { default as Marquee } from './components/atoms/Marquee'
 export { default as CardMarquee } from './components/atoms/CardMarquee'