Merge pull request #17 from make-software/bugfix/multyselect-dropdown-export

eugenebelov · web-flow · commit b2a6ad8d5369 · 2025-09-24T12:28:04.000+03:00
Fix multiselect dropdown and few other improvements
diff --git a/dist/lib/components/header-text/header-text.d.ts.map b/dist/lib/components/header-text/header-text.d.ts.map
diff --git a/dist/lib/components/input/input.d.ts.map b/dist/lib/components/input/input.d.ts.map
diff --git a/dist/lib/theme-config.d.ts b/dist/lib/theme-config.d.ts
@@ -15,11 +15,29 @@ export interface ThemeCommonType {
             mono: string;
         };
         fontWeight: {
+            /**
+             * 300
+             */
             light: number;
+            /**
+             * 400
+             */
             regular: number;
+            /**
+             * 500
+             */
             medium: number;
+            /**
+             * 600
+             */
             semiBold: number;
+            /**
+             * 700
+             */
             bold: number;
+            /**
+             * 800
+             */
             extraBold: number;
         };
     };
diff --git a/dist/lib/theme-config.d.ts.map b/dist/lib/theme-config.d.ts.map
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@make-software/cspr-design",
-  "version": "2.0.3",
+  "version": "2.0.4",
   "description": "React-based UI component library powering Casper Blockchain applications",
   "homepage": "https://cspr.design",
   "repository": "git://github.com/make-software/cspr-design",
diff --git a/src/04-Typography.mdx b/src/04-Typography.mdx
@@ -140,6 +140,14 @@ ___
     sampleText={SampleText}
     fontFamily={typography.type.mono}
 />
+<Typeset
+    fontSizes={[
+        Number(typography.size.header.sm),
+    ]}
+    fontWeight={typography.weight.bold}
+    sampleText={SampleText}
+    fontFamily={typography.type.mono}
+/>
 
 ### **Subtitle:**
 
diff --git a/src/lib/components/dropdown/dropdown.tsx b/src/lib/components/dropdown/dropdown.tsx
@@ -567,7 +567,7 @@ export function MultiSelectDropdown(props: MultiSelectDropdownProps) {
                                   onRemove(getChangeEvent(selectedItem));
                               }}
                               size={14}
-                              src="assets/icons/ic-cross.svg"
+                              src={DeleteIcon}
                               alt={'Cross icon to clear'}
                               role={'img'}
                             />
diff --git a/src/lib/components/header-text/header-text.tsx b/src/lib/components/header-text/header-text.tsx
@@ -14,7 +14,17 @@ export interface HeaderTextProps extends TextProps {
 const StyledText = styled(Text)<HeaderTextProps>(
   ({ theme, size = 2, scale = 'sm', monotype = false }) => ({
     fontWeight: monotype
-      ? theme.typography.fontWeight.regular
+      ? matchSize(
+          {
+            0: theme.typography.fontWeight.bold,
+            1: theme.typography.fontWeight.bold,
+            2: theme.typography.fontWeight.bold,
+            3: theme.typography.fontWeight.regular,
+            4: theme.typography.fontWeight.regular,
+            5: theme.typography.fontWeight.regular,
+          },
+          size,
+        )
       : matchSize(
           {
             0: theme.typography.fontWeight.extraBold,
@@ -24,7 +34,7 @@ const StyledText = styled(Text)<HeaderTextProps>(
             4: theme.typography.fontWeight.semiBold,
             5: theme.typography.fontWeight.semiBold,
           },
-          size
+          size,
         ),
     fontSize: matchSize(
       {
@@ -35,7 +45,7 @@ const StyledText = styled(Text)<HeaderTextProps>(
         sm: '1.75rem',
         xs: '1.5rem',
       },
-      scale
+      scale,
     ),
     lineHeight: matchSize(
       {
@@ -46,12 +56,12 @@ const StyledText = styled(Text)<HeaderTextProps>(
         sm: '2.5rem',
         xs: '1.75rem',
       },
-      scale
+      scale,
     ),
     '&:where(h1, h2, h3, h4, h5, h6)': {
       margin: 0,
     },
-  })
+  }),
 );
 
 export function HeaderText(props: HeaderTextProps) {
diff --git a/src/lib/components/input/input.tsx b/src/lib/components/input/input.tsx
@@ -4,6 +4,7 @@ import { matchSize } from '../../utils/match-size';
 import { FormField, FormFieldStatus } from '../form-field/form-field';
 import SvgIcon from '../svg-icon/svg-icon';
 import { LabelFontSize } from '../../types';
+import { ErrorIcon } from '../../icons-index';
 
 const getThemeColorByError = (error?: boolean) => {
   if (error == null || !error) {
@@ -179,7 +180,7 @@ export function Input({
   };
 
   if (error) {
-    suffixIcon = <SvgIcon src="assets/icons/ic-error.svg" />;
+    suffixIcon = <SvgIcon src={ErrorIcon} />;
   }
 
   return (
diff --git a/src/lib/components/navigation/navigation-banner/navigation-banner.stories.tsx b/src/lib/components/navigation/navigation-banner/navigation-banner.stories.tsx
@@ -5,6 +5,7 @@ import FlexRow from '../../flex-row/flex-row';
 import TruncateBox from '../../truncate-box/truncate-box';
 import SvgIcon from '../../svg-icon/svg-icon';
 import styled from 'styled-components';
+import { ArrowWithTailIcon, FlagUaIcon } from '../../../icons-index';
 
 const StyledSvgIcon = styled(SvgIcon)(() => ({
   color: 'inherit',
@@ -27,13 +28,9 @@ export const BannerWithJSXNode = () => (
   <NavigationBanner
     message={
       <FlexRow align="center" justify="center">
-        <SvgIcon
-          src="assets/icons/flags/ic-flag-ua.svg"
-          size={14}
-          marginRight
-        />{' '}
+        <SvgIcon src={FlagUaIcon} size={14} marginRight />{' '}
         <TruncateBox size={2}>Stand with Ukraine</TruncateBox>
-        <StyledSvgIcon src="assets/icons/ic-arrow-with-tail.svg" size={14} />
+        <StyledSvgIcon src={ArrowWithTailIcon} size={14} />
       </FlexRow>
     }
     link={'#'}
diff --git a/src/lib/components/paginated-table/paginated-table.stories.tsx b/src/lib/components/paginated-table/paginated-table.stories.tsx
@@ -52,6 +52,9 @@ export default {
       </>
     ),
   },
+  argTypes: {
+    error: { control: 'boolean' },
+  },
 } as Meta<typeof PaginatedTable>;
 
 const getRandomBalance = () => {
@@ -161,6 +164,7 @@ const Template: StoryFn<typeof PaginatedTable> = (
         </BodyText>
       </FlexRow>
       <PaginatedTable
+        error={args.error}
         data={data?.data}
         renderDataHeaders={args.renderDataHeaders}
         renderPaginatedData={() => args.renderPaginatedData(data?.data)}
diff --git a/src/lib/components/paginated-table/table-error.tsx b/src/lib/components/paginated-table/table-error.tsx
@@ -2,6 +2,7 @@ import React from 'react';
 import styled from 'styled-components';
 import BodyText from '../body-text/body-text';
 import SvgIcon from '../svg-icon/svg-icon';
+import { SearchIcon } from '../../icons-index';
 
 const FailedToFetchWrapper = styled('div')(({ theme }) => ({
   height: 400,
@@ -25,7 +26,7 @@ const StyledSvgIcon = styled(SvgIcon)(({ theme }) => ({
 
 export const FailedToFetch = () => (
   <FailedToFetchWrapper>
-    <StyledSvgIcon src="assets/icons/ic-search.svg" size={60} />
+    <StyledSvgIcon src={SearchIcon} size={60} />
     <BodyText scale={'lg'} lineHeight={'sm'} size={1}>
       Failed to load data
     </BodyText>
diff --git a/src/lib/theme-config.ts b/src/lib/theme-config.ts
@@ -21,11 +21,29 @@ export interface ThemeCommonType {
     fontWeight: {
       // thin: 100,
       // extraLight: 200,
+      /**
+       * 300
+       */
       light: number;
+      /**
+       * 400
+       */
       regular: number;
+      /**
+       * 500
+       */
       medium: number;
+      /**
+       * 600
+       */
       semiBold: number;
+      /**
+       * 700
+       */
       bold: number;
+      /**
+       * 800
+       */
       extraBold: number;
       // black: 900,
     };

Original file line number	Diff line number	Diff line change
`@@ -1,6 +1,6 @@`
`1`	`1`	`{`
`2`	`2`	`"name": "@make-software/cspr-design",`
`3`		`- "version": "2.0.3",`
	`3`	`+ "version": "2.0.4",`
`4`	`4`	`"description": "React-based UI component library powering Casper Blockchain applications",`
`5`	`5`	`"homepage": "https://cspr.design",`
`6`	`6`	`"repository": "git://github.com/make-software/cspr-design",`