oddsgate-ds 1.0.208 → 1.0.210

package/dist/esm/types/components/molecules/CategoriesWrapper/CategoriesWrapper.interface.d.ts

@@ -1,5 +1,7 @@
-/// <reference types="react" />
 export interface CategoriesWrapperProps {
     category: string;
-    categoryItems: React.ReactNode[];
+    categoryItems: {
+        title: string;
+        slug: string;
+    }[];
 }

package/dist/esm/types/components/organisms/Glossary/Glossary.component.d.ts

@@ -1,14 +1,4 @@
 import React from 'react';
-type GlossaryProps = {
-    searchTerm: string;
-    setSearchTerm: (term: string) => void;
-    selectedCategory: string | null;
-    setSelectedCategory: (cat: string | null) => void;
-    categoryData: Record<string, string[]>;
-    displayedCategories: string[];
-    placeholder?: string;
-    noResults?: boolean;
-    backToTopButton?: boolean;
-};
+import { GlossaryProps } from './Glossary.interface';
 export declare const Glossary: React.FC<GlossaryProps>;
 export default Glossary;

package/dist/esm/types/components/organisms/Glossary/Glossary.interface.d.ts

@@ -18,5 +18,18 @@ export type GlossaryProps = {
         }[];
     }[];
     placeholder?: string;
+    searchTerm: string;
+    setSearchTerm: (term: string) => void;
+    selectedCategory: string | null;
+    setSelectedCategory: (cat: string | null) => void;
+    categoryData: Record<string, {
+        title: string;
+        slug: string;
+    }[]>;
+    displayedCategories: string[];
+    noResults?: boolean;
+    backToTopButton?: boolean;
+    noResultsText?: string;
+    tryAnotherLetterText?: string;
 };
 export {};

package/dist/types.d.ts

@@ -720,17 +720,41 @@ type IProductsSlider = {
 
 declare const ProductsSlider: ({ content, style, className, }: IProductsSlider) => React__default.JSX.Element;
 
+type GlossaryItem = {
+    title: string;
+    categories: {
+        name: string;
+        items: {
+            slug: string;
+            name: string;
+        }[];
+    }[];
+};
 type GlossaryProps = {
+    items: GlossaryItem[];
+    categories: {
+        name: string;
+        items: {
+            slug: string;
+            name: string;
+        }[];
+    }[];
+    placeholder?: string;
     searchTerm: string;
     setSearchTerm: (term: string) => void;
     selectedCategory: string | null;
     setSelectedCategory: (cat: string | null) => void;
-    categoryData: Record<string, string[]>;
+    categoryData: Record<string, {
+        title: string;
+        slug: string;
+    }[]>;
     displayedCategories: string[];
-    placeholder?: string;
     noResults?: boolean;
     backToTopButton?: boolean;
+    noResultsText?: string;
+    tryAnotherLetterText?: string;
 };
+
 declare const Glossary: React__default.FC<GlossaryProps>;
 
 declare const iconsList: string[];

package/package.json

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

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

@@ -24,7 +24,9 @@ const CategoriesWrapper: React.FC<CategoriesWrapperProps> = ({
           <StyledCategoryContent>
             {categoryItems.map((item, index) => (
               <StyledCategoryItem key={index}>
-                <Button variant="text">{item}</Button>
+                <Button as="a" href={item.slug} variant="text">
+                  {item.title}
+                </Button>
               </StyledCategoryItem>
             ))}
           </StyledCategoryContent>
@@ -34,4 +36,4 @@ const CategoriesWrapper: React.FC<CategoriesWrapperProps> = ({
   )
 }
 
-export default CategoriesWrapper;
+export default CategoriesWrapper

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

@@ -1,4 +1,4 @@
 export interface CategoriesWrapperProps {
   category: string
-  categoryItems: React.ReactNode[]
-}
+  categoryItems: { title: string; slug: string }[]
+}

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

@@ -1,4 +1,4 @@
-import { colors } from '@/styles/variables'
+import { colors, responsiveMedia } from '@/styles/variables'
 import styled from 'styled-components'
 
 export const StyledCategoryWrapper = styled.div`
@@ -12,8 +12,11 @@ export const StyledCategorySeparator = styled.div`
   align-items: center;
   width: 100%;
   gap: 0.75rem;
-  font-size: 3rem;
+  font-size: 48px;
   font-weight: 700;
+  @media (max-width: ${responsiveMedia}) {
+    font-size: 32px;
+  }
 `
 export const StyledCategorySeparatorLine = styled.div`
   flex-grow: 1;
@@ -30,10 +33,16 @@ export const StyledCategoryContent = styled.div`
 `
 export const StyledCategoryItem = styled.div`
   & > button {
-    height: 2.125rem;
-    padding: 0.625rem 2.5rem;
-    font-size: 1.5rem;
+    height: 34px;
+    padding: 10px 40px;
+    font-size: 24px;
     font-weight: 700;
     text-transform: none;
+
+    @media (max-width: ${responsiveMedia}) {
+      height: 28px;
+      font-size: 20px;
+      padding: 5px 20px;
+    }
   }
 `

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

@@ -10,11 +10,10 @@ const CategoryIndex: React.FC<CategoryIndexProps> = ({
   onChange,
   selectedCategory
 }) => {
-  const allCategories = ['#', ...categories]
 
   return (
     <StyledGlossaryCategoryIndex>
-      {allCategories.map(category => (
+      {categories.map(category => (
         <StyledGlossaryCategoryIndexItem
           onClick={() => onChange(category)}
           isSelected={

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

@@ -1,4 +1,4 @@
-import { colors } from '@/styles/variables'
+import { colors, responsiveMedia } from '@/styles/variables'
 import styled from 'styled-components'
 
 type ItemProps = {
@@ -23,5 +23,8 @@ export const StyledGlossaryCategoryIndexItem = styled.div<ItemProps>`
   box-sizing: border-box;
   color: ${colors.gray20};
   font-weight: 700;
-  font-size: 1.5rem;
+  font-size: 24px;
+  @media (max-width: ${responsiveMedia}) {
+    font-size: 20px;
+  }
 `

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

@@ -16,7 +16,7 @@ export const SearchInput = styled.input`
   border-radius: 62.5rem;
   border: none;
   background: ${colors.gray20};
-  font-size: 0.9375rem;
+  font-size: 15px;
   color: ${colors.hellobar};
   &::placeholder {
     color: ${colors.hellobar};

package/src/components/organisms/Glossary/Glossary.component.tsx

@@ -13,18 +13,8 @@ import GlossaryCategoryIndex from '@/components/molecules/CategoryIndex/Category
 import CategoriesWrapper from '@/components/molecules/CategoriesWrapper/CategoriesWrapper.component'
 import Button from '@/components/atoms/Button'
 import Icon from '@/components/atoms/Icon'
+import { GlossaryProps } from './Glossary.interface'
 
-type GlossaryProps = {
-  searchTerm: string
-  setSearchTerm: (term: string) => void
-  selectedCategory: string | null
-  setSelectedCategory: (cat: string | null) => void
-  categoryData: Record<string, string[]>
-  displayedCategories: string[]
-  placeholder?: string
-  noResults?: boolean
-  backToTopButton?: boolean
-}
 
 export const Glossary: React.FC<GlossaryProps> = ({
   searchTerm,
@@ -35,7 +25,9 @@ export const Glossary: React.FC<GlossaryProps> = ({
   displayedCategories,
   placeholder,
   noResults,
-  backToTopButton
+  backToTopButton,
+  noResultsText,
+  tryAnotherLetterText
 }) => {
   const categoryNames = Object.keys(categoryData)
 
@@ -56,31 +48,39 @@ export const Glossary: React.FC<GlossaryProps> = ({
       />
       {noResults ? (
         <StyledNoResultsContainer>
-          <StyledNoResultsTitle>No results found!</StyledNoResultsTitle>
-          <StyledNoResultsSubtitle>Try another term</StyledNoResultsSubtitle>
+          <StyledNoResultsTitle>{noResultsText}</StyledNoResultsTitle>
+          <StyledNoResultsSubtitle>{tryAnotherLetterText}</StyledNoResultsSubtitle>
         </StyledNoResultsContainer>
       ) : (
-        <StyledGlossaryCategories>
-          {displayedCategories.map(category => (
-            <CategoriesWrapper
-              key={category}
-              category={category}
-              categoryItems={categoryData[category]}
-            />
-          ))}
-        </StyledGlossaryCategories>
+        <>
+          <StyledGlossaryCategories>
+            {displayedCategories.map(category => (
+              <CategoriesWrapper
+                key={category}
+                category={category}
+                categoryItems={categoryData[category]}
+              />
+            ))}
+          </StyledGlossaryCategories>
+          <StyledBackButtonContainer>
+            <Button
+              variant="text"
+              onClick={() => {
+                window.scrollTo({ top: 0, behavior: 'smooth' })
+              }}
+              rightIcon={
+                <Icon
+                  icon="icon-arrowDown"
+                  className="ml-12"
+                  style={{ width: '14px' }}
+                />
+              }
+            >
+              {backToTopButton}
+            </Button>
+          </StyledBackButtonContainer>
+        </>
       )}
-      <StyledBackButtonContainer>
-        <Button
-          variant="text"
-          onClick={() => {
-            window.scrollTo({ top: 0, behavior: 'smooth' })
-          }}
-          rightIcon={<Icon icon="icon-arrowDown" className='ml-12' style={{width: '14px' }}/>}
-        >
-          {backToTopButton}
-        </Button>
-      </StyledBackButtonContainer>
     </StyledGlossary>
   )
 }

package/src/components/organisms/Glossary/Glossary.interface.ts

@@ -7,4 +7,14 @@ export type GlossaryProps = {
   items: GlossaryItem[]
   categories: { name: string; items: { slug: string; name: string }[] }[]
   placeholder?: string
+  searchTerm: string
+  setSearchTerm: (term: string) => void
+  selectedCategory: string | null
+  setSelectedCategory: (cat: string | null) => void
+  categoryData: Record<string, { title: string; slug: string }[]>
+  displayedCategories: string[]
+  noResults?: boolean
+  backToTopButton?: boolean
+  noResultsText?: string
+  tryAnotherLetterText?: string
 }

package/src/components/organisms/Glossary/Glossary.themes.ts

@@ -1,4 +1,4 @@
-import { colors, typography } from '@/styles/variables'
+import { colors, responsiveMedia, typography } from '@/styles/variables'
 import styled from 'styled-components'
 
 export const StyledGlossary = styled.div`
@@ -20,8 +20,12 @@ export const StyledNoResultsContainer = styled.div`
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  margin-top: 6rem;
-  margin-bottom: 6rem;
+  margin-top: 96px;
+  margin-bottom: 120px;
+  @media (max-width: ${responsiveMedia}) {
+    margin-top: 64x;
+    margin-bottom: 80px;
+  }
 `
 export const StyledNoResultsTitle = styled.h1`
   color: ${colors.primary50};
@@ -34,10 +38,10 @@ export const StyledNoResultsTitle = styled.h1`
 `
 export const StyledNoResultsSubtitle = styled.h4`
   color: ${colors.gray20};
-  font-size: 2.25rem;
+  font-size: 36px;
   font-weight: 700;
-  @media (max-width: 600px) {
-    font-size: 1.5rem;
+  @media (max-width: ${responsiveMedia}) {
+    font-size: 24px;
   }
 `
 export const StyledBackButtonContainer = styled.div`