oddsgate-ds 1.0.208 → 1.0.209

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (14) hide show
  1. package/dist/cjs/index.js +1 -1
  2. package/dist/cjs/index.js.map +1 -1
  3. package/dist/cjs/types/components/organisms/Glossary/Glossary.component.d.ts +2 -0
  4. package/dist/esm/index.js +5 -5
  5. package/dist/esm/index.js.map +1 -1
  6. package/dist/esm/types/components/organisms/Glossary/Glossary.component.d.ts +2 -0
  7. package/dist/types.d.ts +2 -0
  8. package/package.json +1 -1
  9. package/src/components/molecules/CategoriesWrapper/CategoriesWrapper.theme.ts +14 -5
  10. package/src/components/molecules/CategoryIndex/CategoryIndex.component.tsx +1 -2
  11. package/src/components/molecules/CategoryIndex/CategoryIndex.theme.ts +5 -2
  12. package/src/components/molecules/SearchBar/SearchBar.theme.ts +1 -1
  13. package/src/components/organisms/Glossary/Glossary.component.tsx +35 -23
  14. package/src/components/organisms/Glossary/Glossary.themes.ts +10 -6
package/dist/esm/types/components/organisms/Glossary/Glossary.component.d.ts CHANGED
@@ -9,6 +9,8 @@ type GlossaryProps = {
9
9
  placeholder?: string;
10
10
  noResults?: boolean;
11
11
  backToTopButton?: boolean;
12
+ noResultsText?: string;
13
+ tryAnotherLetterText?: string;
12
14
  };
13
15
  export declare const Glossary: React.FC<GlossaryProps>;
14
16
  export default Glossary;
package/dist/types.d.ts CHANGED
@@ -730,6 +730,8 @@ type GlossaryProps = {
730
730
  placeholder?: string;
731
731
  noResults?: boolean;
732
732
  backToTopButton?: boolean;
733
+ noResultsText?: string;
734
+ tryAnotherLetterText?: string;
733
735
  };
734
736
  declare const Glossary: React__default.FC<GlossaryProps>;
735
737
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "oddsgate-ds",
3
- "version": "1.0.208",
3
+ "version": "1.0.209",
4
4
  "description": "Miew theme component library",
5
5
  "main": "dist/cjs/index.js",
6
6
  "module": "dist/esm/index.js",
package/src/components/molecules/CategoriesWrapper/CategoriesWrapper.theme.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { colors } from '@/styles/variables'
1
+ import { colors, responsiveMedia } from '@/styles/variables'
2
2
  import styled from 'styled-components'
3
3
 
4
4
  export const StyledCategoryWrapper = styled.div`
@@ -12,8 +12,11 @@ export const StyledCategorySeparator = styled.div`
12
12
  align-items: center;
13
13
  width: 100%;
14
14
  gap: 0.75rem;
15
- font-size: 3rem;
15
+ font-size: 48px;
16
16
  font-weight: 700;
17
+ @media (max-width: ${responsiveMedia}) {
18
+ font-size: 32px;
19
+ }
17
20
  `
18
21
  export const StyledCategorySeparatorLine = styled.div`
19
22
  flex-grow: 1;
@@ -30,10 +33,16 @@ export const StyledCategoryContent = styled.div`
30
33
  `
31
34
  export const StyledCategoryItem = styled.div`
32
35
  & > button {
33
- height: 2.125rem;
34
- padding: 0.625rem 2.5rem;
35
- font-size: 1.5rem;
36
+ height: 34px;
37
+ padding: 10px 40px;
38
+ font-size: 24px;
36
39
  font-weight: 700;
37
40
  text-transform: none;
41
+
42
+ @media (max-width: ${responsiveMedia}) {
43
+ height: 28px;
44
+ font-size: 20px;
45
+ padding: 5px 20px;
46
+ }
38
47
  }
39
48
  `
package/src/components/molecules/CategoryIndex/CategoryIndex.component.tsx CHANGED
@@ -10,11 +10,10 @@ const CategoryIndex: React.FC<CategoryIndexProps> = ({
10
10
  onChange,
11
11
  selectedCategory
12
12
  }) => {
13
- const allCategories = ['#', ...categories]
14
13
 
15
14
  return (
16
15
  <StyledGlossaryCategoryIndex>
17
- {allCategories.map(category => (
16
+ {categories.map(category => (
18
17
  <StyledGlossaryCategoryIndexItem
19
18
  onClick={() => onChange(category)}
20
19
  isSelected={
package/src/components/molecules/CategoryIndex/CategoryIndex.theme.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { colors } from '@/styles/variables'
1
+ import { colors, responsiveMedia } from '@/styles/variables'
2
2
  import styled from 'styled-components'
3
3
 
4
4
  type ItemProps = {
@@ -23,5 +23,8 @@ export const StyledGlossaryCategoryIndexItem = styled.div<ItemProps>`
23
23
  box-sizing: border-box;
24
24
  color: ${colors.gray20};
25
25
  font-weight: 700;
26
- font-size: 1.5rem;
26
+ font-size: 24px;
27
+ @media (max-width: ${responsiveMedia}) {
28
+ font-size: 20px;
29
+ }
27
30
  `
package/src/components/molecules/SearchBar/SearchBar.theme.ts CHANGED
@@ -16,7 +16,7 @@ export const SearchInput = styled.input`
16
16
  border-radius: 62.5rem;
17
17
  border: none;
18
18
  background: ${colors.gray20};
19
- font-size: 0.9375rem;
19
+ font-size: 15px;
20
20
  color: ${colors.hellobar};
21
21
  &::placeholder {
22
22
  color: ${colors.hellobar};
package/src/components/organisms/Glossary/Glossary.component.tsx CHANGED
@@ -24,6 +24,8 @@ type GlossaryProps = {
24
24
  placeholder?: string
25
25
  noResults?: boolean
26
26
  backToTopButton?: boolean
27
+ noResultsText?: string
28
+ tryAnotherLetterText?: string
27
29
  }
28
30
 
29
31
  export const Glossary: React.FC<GlossaryProps> = ({
@@ -35,7 +37,9 @@ export const Glossary: React.FC<GlossaryProps> = ({
35
37
  displayedCategories,
36
38
  placeholder,
37
39
  noResults,
38
- backToTopButton
40
+ backToTopButton,
41
+ noResultsText,
42
+ tryAnotherLetterText
39
43
  }) => {
40
44
  const categoryNames = Object.keys(categoryData)
41
45
 
@@ -56,31 +60,39 @@ export const Glossary: React.FC<GlossaryProps> = ({
56
60
  />
57
61
  {noResults ? (
58
62
  <StyledNoResultsContainer>
59
- <StyledNoResultsTitle>No results found!</StyledNoResultsTitle>
60
- <StyledNoResultsSubtitle>Try another term</StyledNoResultsSubtitle>
63
+ <StyledNoResultsTitle>{noResultsText}</StyledNoResultsTitle>
64
+ <StyledNoResultsSubtitle>{tryAnotherLetterText}</StyledNoResultsSubtitle>
61
65
  </StyledNoResultsContainer>
62
66
  ) : (
63
- <StyledGlossaryCategories>
64
- {displayedCategories.map(category => (
65
- <CategoriesWrapper
66
- key={category}
67
- category={category}
68
- categoryItems={categoryData[category]}
69
- />
70
- ))}
71
- </StyledGlossaryCategories>
67
+ <>
68
+ <StyledGlossaryCategories>
69
+ {displayedCategories.map(category => (
70
+ <CategoriesWrapper
71
+ key={category}
72
+ category={category}
73
+ categoryItems={categoryData[category]}
74
+ />
75
+ ))}
76
+ </StyledGlossaryCategories>
77
+ <StyledBackButtonContainer>
78
+ <Button
79
+ variant="text"
80
+ onClick={() => {
81
+ window.scrollTo({ top: 0, behavior: 'smooth' })
82
+ }}
83
+ rightIcon={
84
+ <Icon
85
+ icon="icon-arrowDown"
86
+ className="ml-12"
87
+ style={{ width: '14px' }}
88
+ />
89
+ }
90
+ >
91
+ {backToTopButton}
92
+ </Button>
93
+ </StyledBackButtonContainer>
94
+ </>
72
95
  )}
73
- <StyledBackButtonContainer>
74
- <Button
75
- variant="text"
76
- onClick={() => {
77
- window.scrollTo({ top: 0, behavior: 'smooth' })
78
- }}
79
- rightIcon={<Icon icon="icon-arrowDown" className='ml-12' style={{width: '14px' }}/>}
80
- >
81
- {backToTopButton}
82
- </Button>
83
- </StyledBackButtonContainer>
84
96
  </StyledGlossary>
85
97
  )
86
98
  }
package/src/components/organisms/Glossary/Glossary.themes.ts CHANGED
@@ -1,4 +1,4 @@
1
- import { colors, typography } from '@/styles/variables'
1
+ import { colors, responsiveMedia, typography } from '@/styles/variables'
2
2
  import styled from 'styled-components'
3
3
 
4
4
  export const StyledGlossary = styled.div`
@@ -20,8 +20,12 @@ export const StyledNoResultsContainer = styled.div`
20
20
  flex-direction: column;
21
21
  align-items: center;
22
22
  justify-content: center;
23
- margin-top: 6rem;
24
- margin-bottom: 6rem;
23
+ margin-top: 96px;
24
+ margin-bottom: 120px;
25
+ @media (max-width: ${responsiveMedia}) {
26
+ margin-top: 64x;
27
+ margin-bottom: 80px;
28
+ }
25
29
  `
26
30
  export const StyledNoResultsTitle = styled.h1`
27
31
  color: ${colors.primary50};
@@ -34,10 +38,10 @@ export const StyledNoResultsTitle = styled.h1`
34
38
  `
35
39
  export const StyledNoResultsSubtitle = styled.h4`
36
40
  color: ${colors.gray20};
37
- font-size: 2.25rem;
41
+ font-size: 36px;
38
42
  font-weight: 700;
39
- @media (max-width: 600px) {
40
- font-size: 1.5rem;
43
+ @media (max-width: ${responsiveMedia}) {
44
+ font-size: 24px;
41
45
  }
42
46
  `
43
47
  export const StyledBackButtonContainer = styled.div`