oddsgate-ds 1.0.207 → 1.0.209

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

@@ -8,6 +8,9 @@ type GlossaryProps = {
     displayedCategories: string[];
     placeholder?: string;
     noResults?: boolean;
+    backToTopButton?: boolean;
+    noResultsText?: string;
+    tryAnotherLetterText?: string;
 };
 export declare const Glossary: React.FC<GlossaryProps>;
 export default Glossary;

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

@@ -5,3 +5,4 @@ export declare const StyledGlossaryCategories: import("styled-components/dist/ty
 export declare const StyledNoResultsContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;
 export declare const StyledNoResultsTitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
 export declare const StyledNoResultsSubtitle: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLHeadingElement>, HTMLHeadingElement>, never>> & string;
+export declare const StyledBackButtonContainer: import("styled-components/dist/types").IStyledComponentBase<"web", import("styled-components").FastOmit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, never>> & string;

package/dist/types.d.ts

@@ -729,6 +729,9 @@ type GlossaryProps = {
     displayedCategories: string[];
     placeholder?: string;
     noResults?: boolean;
+    backToTopButton?: boolean;
+    noResultsText?: string;
+    tryAnotherLetterText?: string;
 };
 declare const Glossary: React__default.FC<GlossaryProps>;
 

package/package.json

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

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,16 +10,14 @@ const CategoryIndex: React.FC<CategoryIndexProps> = ({
   onChange,
   selectedCategory
 }) => {
-  const allCategories = ['#', ...categories]
 
   return (
     <StyledGlossaryCategoryIndex>
-      {allCategories.map(category => (
+      {categories.map(category => (
         <StyledGlossaryCategoryIndexItem
-          onClick={() => onChange(category === '#' ? null : category)}
+          onClick={() => onChange(category)}
           isSelected={
-            selectedCategory === category ||
-            (selectedCategory === null && category === '#')
+            selectedCategory === category
           }
           key={`category-${category}`}
         >

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

@@ -1,9 +1,18 @@
 import React from 'react'
-import { StyledGlossary, StyledGlossaryCategories, StyledNoResultsContainer, StyledNoResultsSubtitle, StyledNoResultsTitle } from './Glossary.themes'
+import {
+  StyledBackButtonContainer,
+  StyledGlossary,
+  StyledGlossaryCategories,
+  StyledNoResultsContainer,
+  StyledNoResultsSubtitle,
+  StyledNoResultsTitle
+} from './Glossary.themes'
 
 import SearchBar from '@/components/molecules/SearchBar/SearchBar.component'
 import GlossaryCategoryIndex from '@/components/molecules/CategoryIndex/CategoryIndex.component'
 import CategoriesWrapper from '@/components/molecules/CategoriesWrapper/CategoriesWrapper.component'
+import Button from '@/components/atoms/Button'
+import Icon from '@/components/atoms/Icon'
 
 type GlossaryProps = {
   searchTerm: string
@@ -14,6 +23,9 @@ type GlossaryProps = {
   displayedCategories: string[]
   placeholder?: string
   noResults?: boolean
+  backToTopButton?: boolean
+  noResultsText?: string
+  tryAnotherLetterText?: string
 }
 
 export const Glossary: React.FC<GlossaryProps> = ({
@@ -24,7 +36,10 @@ export const Glossary: React.FC<GlossaryProps> = ({
   categoryData,
   displayedCategories,
   placeholder,
-  noResults
+  noResults,
+  backToTopButton,
+  noResultsText,
+  tryAnotherLetterText
 }) => {
   const categoryNames = Object.keys(categoryData)
 
@@ -45,19 +60,38 @@ 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>
+        </>
       )}
     </StyledGlossary>
   )

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

@@ -11,24 +11,126 @@ interface GlossaryCategory {
 }
 
 const categories: GlossaryCategory[] = [
-        {
-                name: 'A',
-                items: [
-                        { slug: 'afk', name: 'AFK' },
-                        { slug: 'aimbot', name: 'AIMBOT' },
-                        { slug: 'aggro', name: 'Aggro' },
-                        { slug: 'aoe', name: 'AOE' },
-                        { slug: 'avatar', name: 'Avatar' }
-                ]
-        },
-        {
-                name: 'B',
-                items: [
-                        { slug: 'buff', name: 'Buff' },
-                        { slug: 'boss', name: 'Boss' },
-                        { slug: 'build', name: 'Build' }
-                ]
-        }
+    {
+        name: 'A',
+        items: [
+            { slug: 'afk', name: 'AFK' },
+            { slug: 'aimbot', name: 'AIMBOT' },
+            { slug: 'aggro', name: 'Aggro' },
+            { slug: 'aoe', name: 'AOE' },
+            { slug: 'avatar', name: 'Avatar' },
+            { slug: 'accuracy', name: 'Accuracy' },
+            { slug: 'action-bar', name: 'Action Bar' },
+            { slug: 'add-on', name: 'Add-on' },
+            { slug: 'arena', name: 'Arena' },
+            { slug: 'artifact', name: 'Artifact' }
+        ]
+    },
+    {
+        name: 'B',
+        items: [
+            { slug: 'buff', name: 'Buff' },
+            { slug: 'boss', name: 'Boss' },
+            { slug: 'build', name: 'Build' },
+            { slug: 'ban', name: 'Ban' },
+            { slug: 'beta', name: 'Beta' },
+            { slug: 'blind', name: 'Blind' },
+            { slug: 'block', name: 'Block' },
+            { slug: 'bot', name: 'Bot' },
+            { slug: 'bracket', name: 'Bracket' },
+            { slug: 'burst', name: 'Burst' }
+        ]
+    },
+    {
+        name: 'C',
+        items: [
+            { slug: 'camp', name: 'Camp' },
+            { slug: 'carry', name: 'Carry' },
+            { slug: 'cc', name: 'Crowd Control' },
+            { slug: 'cd', name: 'Cooldown' },
+            { slug: 'cheese', name: 'Cheese' },
+            { slug: 'clan', name: 'Clan' },
+            { slug: 'combo', name: 'Combo' },
+            { slug: 'crit', name: 'Critical Hit' },
+            { slug: 'crafting', name: 'Crafting' },
+            { slug: 'creep', name: 'Creep' }
+        ]
+    },
+    {
+        name: 'D',
+        items: [
+            { slug: 'debuff', name: 'Debuff' },
+            { slug: 'dps', name: 'DPS' },
+            { slug: 'drop', name: 'Drop' },
+            { slug: 'duo', name: 'Duo' },
+            { slug: 'dungeon', name: 'Dungeon' },
+            { slug: 'draft', name: 'Draft' },
+            { slug: 'dot', name: 'Damage Over Time' },
+            { slug: 'disconnect', name: 'Disconnect' },
+            { slug: 'drain', name: 'Drain' },
+            { slug: 'drop-rate', name: 'Drop Rate' }
+        ]
+    },
+    {
+        name: 'E',
+        items: [
+            { slug: 'emote', name: 'Emote' },
+            { slug: 'endgame', name: 'Endgame' },
+            { slug: 'enemy', name: 'Enemy' },
+            { slug: 'equip', name: 'Equip' },
+            { slug: 'event', name: 'Event' },
+            { slug: 'exploit', name: 'Exploit' },
+            { slug: 'experience', name: 'Experience' },
+            { slug: 'ez', name: 'EZ' },
+            { slug: 'elite', name: 'Elite' },
+            { slug: 'escape', name: 'Escape' }
+        ]
+    },
+    {
+        name: 'F',
+        items: [
+            { slug: 'farm', name: 'Farm' },
+            { slug: 'feed', name: 'Feed' },
+            { slug: 'flank', name: 'Flank' },
+            { slug: 'frag', name: 'Frag' },
+            { slug: 'fps', name: 'FPS' },
+            { slug: 'friendly-fire', name: 'Friendly Fire' },
+            { slug: 'faction', name: 'Faction' },
+            { slug: 'fov', name: 'Field of View' },
+            { slug: 'freeze', name: 'Freeze' },
+            { slug: 'full-party', name: 'Full Party' }
+        ]
+    },
+    {
+        name: 'G',
+        items: [
+            { slug: 'gg', name: 'GG' },
+            { slug: 'gank', name: 'Gank' },
+            { slug: 'gear', name: 'Gear' },
+            { slug: 'grind', name: 'Grind' },
+            { slug: 'guild', name: 'Guild' },
+            { slug: 'glitch', name: 'Glitch' },
+            { slug: 'gold', name: 'Gold' },
+            { slug: 'group', name: 'Group' },
+            { slug: 'grenade', name: 'Grenade' },
+            { slug: 'global', name: 'Global' }
+        ]
+    },
+    {
+        name: 'H',
+        items: [
+            { slug: 'heal', name: 'Heal' },
+            { slug: 'headshot', name: 'Headshot' },
+            { slug: 'hp', name: 'HP' },
+            { slug: 'hud', name: 'HUD' },
+            { slug: 'hardcore', name: 'Hardcore' },
+            { slug: 'hero', name: 'Hero' },
+            { slug: 'hitbox', name: 'Hitbox' },
+            { slug: 'host', name: 'Host' },
+            { slug: 'hotkey', name: 'Hotkey' },
+            { slug: 'hunter', name: 'Hunter' }
+        ]
+    }
 ]
 
 // Helper to build categoryData from categories and items

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,7 +20,12 @@ export const StyledNoResultsContainer = styled.div`
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  margin-top: 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};
@@ -33,9 +38,25 @@ 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`
+  width: 100%;
+  display: flex;
+  justify-content: flex-end;
+  margin-top: 4rem;
+
+  & > button {
+    text-transform: none;
+    font-size: 1.5rem;
+    height: 34px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-weight: 700;
+  }
+`;