feat(StoreBadge): add new component

packages/react/src/components/StoreBadge/StoreBadge.api.mdx

@@ -0,0 +1,37 @@
+import { Meta } from '@storybook/blocks';
+import LinkTo from '@storybook/addon-links/react';
+import { TableInterface } from '~storybook/components/TableInterface';
+
+<Meta title="Components API/StoreBadge" />
+
+# Dropzone API
+
+```js
+import { StoreBadge } from '@elonkit/react';
+```
+
+## Component name
+
+The name `ESStoreBadge` can be used when providing default props or style overrides in the theme.
+
+## Props
+
+<TableInterface name="StoreBadgeProps" variant="props" />
+
+<br />
+
+## CSS
+
+<TableInterface name="StoreBadgeClasses" variant="css" />
+
+<br />
+
+## Demos
+
+<ul>
+  <li>
+    <LinkTo kind="components-StoreBadge" story="demo">
+      <code>StoreBadge</code>
+    </LinkTo>
+  </li>
+</ul>

packages/react/src/components/StoreBadge/StoreBadge.classes.ts

@@ -0,0 +1,34 @@
+import { generateUtilityClass, generateUtilityClasses } from '@mui/material';
+
+export type StoreBadgeClasses = {
+  /** Styles applied to the root element. */
+  root: string;
+  /** Styles applied to the root element if component disabled. */
+  disabled: string;
+  /** Styles applied to the container element. */
+  container: string;
+  /** Styles applied to the text element. */
+  text: string;
+
+  colorMonoA: string;
+  colorMonoB: string;
+  variantFilled: string;
+  variantOutlined: string;
+};
+
+export type StoreBadgeClassKey = keyof StoreBadgeClasses;
+
+export function getStoreBadgeUtilityClass(slot: string): string {
+  return generateUtilityClass('ESStoreBadge', slot);
+}
+
+export const storeBadgeClasses: StoreBadgeClasses = generateUtilityClasses('ESStoreBadge', [
+  'root',
+  'text',
+  'disabled',
+  'container',
+  'colorMonoA',
+  'colorMonoB',
+  'variantFilled',
+  'variantOutlined'
+]);

packages/react/src/components/StoreBadge/StoreBadge.stories.tsx

@@ -0,0 +1,36 @@
+import { Meta, StoryObj } from '@storybook/react';
+
+import { StoreBadge } from '.';
+
+import { IconAppStore, IconAppStoreLogo } from '../../icons';
+
+const meta: Meta<typeof StoreBadge> = {
+  tags: ['autodocs'],
+  component: StoreBadge,
+  parameters: {
+    references: ['StoreBadge']
+  },
+  argTypes: {
+    variant: {
+      options: ['contained', 'outlined'],
+      control: { type: 'select' }
+    },
+    color: {
+      options: ['monoA', 'monoB'],
+      control: { type: 'select' }
+    }
+  }
+};
+
+export default meta;
+type Story = StoryObj<typeof StoreBadge>;
+
+export const Demo: Story = {
+  render: (args) => {
+    return (
+      <StoreBadge startIcon={<IconAppStoreLogo />} upperText="Загрузите в" {...args}>
+        <IconAppStore title="sd" />
+      </StoreBadge>
+    );
+  }
+};

packages/react/src/components/StoreBadge/StoreBadge.tsx

@@ -0,0 +1,110 @@
+import { StoreBadgeOwnProps, StoreBadgeProps, StoreBadgeTypeMap } from './StoreBadge.types';
+
+import clsx from 'clsx';
+import { getStoreBadgeUtilityClass } from './StoreBadge.classes';
+
+import { unstable_composeClasses as composeClasses } from '@mui/base';
+
+import { styled, useThemeProps } from '@mui/material/styles';
+import { capitalize, Typography } from '@mui/material';
+import { OverridableComponent } from '@mui/material/OverridableComponent';
+
+import { Button } from '../Button';
+
+type StoreBadgeOwnerState = {
+  classes?: StoreBadgeOwnProps['classes'];
+  disabled?: StoreBadgeOwnProps['disabled'];
+  color: NonNullable<StoreBadgeOwnProps['color']>;
+  variant: NonNullable<StoreBadgeOwnProps['variant']>;
+};
+
+const useUtilityClasses = (ownerState: StoreBadgeOwnerState) => {
+  const { classes, disabled, color, variant } = ownerState;
+
+  const slots = {
+    root: ['root', disabled && 'disabled', `color${capitalize(color)}`, `variant${capitalize(variant)}`],
+    text: ['text'],
+    container: ['container']
+  };
+
+  return composeClasses(slots, getStoreBadgeUtilityClass, classes);
+};
+
+const StoreBadgeRoot = styled(Button, {
+  name: 'ESStoreBadge',
+  slot: 'Root',
+  overridesResolver: (props, styles) => {
+    const {
+      ownerState: { disabled, checked, size, variant, color }
+    } = props;
+    return [
+      styles.root,
+      disabled && styles.disabled,
+      checked && styles.checked,
+      styles[size],
+      styles[`color${capitalize(color)}`],
+      styles[`variant${capitalize(variant)}`]
+    ];
+  }
+})(({ theme }) => ({
+  ...theme.typography.body100,
+  textTransform: 'none'
+})) as typeof Button;
+
+const StoreBadgeText = styled(Typography, {
+  name: 'ESStoreBadge',
+  slot: 'Text',
+  overridesResolver: (props, styles) => styles.text
+})(({ theme }) => ({
+  ...theme.typography.micro,
+  textTransform: 'none'
+})) as typeof Typography;
+
+const StoreBadgeContainer = styled('div', {
+  name: 'ESStoreBadge',
+  slot: 'Container',
+  overridesResolver: (props, styles) => styles.container
+})(() => ({
+  display: 'flex',
+  flexDirection: 'column',
+  alignItems: 'flex-start',
+  gap: '2px'
+}));
+
+export const StoreBadge: OverridableComponent<StoreBadgeTypeMap> = (inProps: StoreBadgeProps) => {
+  const {
+    className,
+    disabled,
+    color = 'monoA',
+    variant = 'contained',
+    children,
+    startIcon,
+    upperText,
+    href,
+    sx,
+    ...props
+  } = useThemeProps({
+    props: inProps,
+    name: 'ESStoreBadge'
+  });
+
+  const ownerState = { ...props, disabled, color, variant };
+  const classes = useUtilityClasses(ownerState);
+
+  return (
+    <StoreBadgeRoot
+      className={clsx(classes.root, className)}
+      color={color}
+      component="a"
+      href={href}
+      startIcon={startIcon}
+      sx={sx}
+      variant={variant}
+    >
+      <StoreBadgeContainer className={classes.container}>
+        <StoreBadgeText className={classes.text}>{upperText}</StoreBadgeText>
+        {children}
+      </StoreBadgeContainer>
+    </StoreBadgeRoot>
+  );
+};

packages/react/src/components/StoreBadge/StoreBadge.types.ts

@@ -0,0 +1,51 @@
+/* eslint-disable @typescript-eslint/ban-types */
+
+import { ReactNode } from 'react';
+
+import { StoreBadgeClasses } from './StoreBadge.classes';
+
+import { SxProps, Theme } from '@mui/material';
+import { OverrideProps } from '@mui/material/OverridableComponent';
+
+import { ExtendButtonTypeMap } from '../Button';
+
+export interface StoreBadgeOwnProps {
+  children: ReactNode;
+  /** Class applied to the root element. */
+  className?: string;
+  /** Override or extend the styles applied to the component. */
+  classes?: Partial<StoreBadgeClasses>;
+  /** The system prop that allows defining system overrides as well as additional CSS styles. */
+  sx?: SxProps<Theme>;
+  /**
+   * The color of the component.
+   * @default 'monoA'
+   */
+  color?: 'monoA' | 'monoB';
+  /**
+   * The variant of the component.
+   * @default 'contained'
+   */
+  variant: 'contained' | 'outlined';
+  /** Element placed before the children. */
+  startIcon?: ReactNode;
+  /** Text placed up the children. */
+  upperText?: string;
+  /** The URL to link to when the button is clicked. */
+  href?: string;
+  /** If `true`, the component is disabled. */
+  disabled?: boolean;
+}
+
+export type StoreBadgeTypeMap<
+  AdditionalProps = {},
+  RootComponent extends React.ElementType = 'button'
+> = ExtendButtonTypeMap<{
+  props: AdditionalProps & StoreBadgeOwnProps;
+  defaultComponent: RootComponent;
+}>;
+
+export type StoreBadgeProps<
+  RootComponent extends React.ElementType = StoreBadgeTypeMap['defaultComponent'],
+  AdditionalProps = {}
+> = OverrideProps<StoreBadgeTypeMap<AdditionalProps, RootComponent>, RootComponent>;

packages/react/src/components/StoreBadge/index.ts

@@ -0,0 +1,3 @@
+export { StoreBadge } from './StoreBadge';
+export { StoreBadgeClasses, storeBadgeClasses, StoreBadgeClassKey } from './StoreBadge.classes';
+export { StoreBadgeProps } from './StoreBadge.types';

packages/react/src/components/index.ts

@@ -42,6 +42,7 @@ export * from './Sidenav';
 export * from './SortingMenu';
 export * from './Spinner';
 export * from './Spinner';
+export * from './StoreBadge';
 export * from './SvgIcon';
 export * from './Swiper';
 export * from './Swiper';

packages/react/src/icons/IconAppStore.tsx

@@ -0,0 +1,40 @@
+import { SvgIcon, SvgIconProps } from '../components/SvgIcon';
+
+export const IconAppStore = (props: SvgIconProps) => {
+  return (
+    <SvgIcon fill="none" height="16px" viewBox="0 0 70 16" width="70px" {...props}>
+      <path
+        d="M9.86198 12.4072H7.86852L6.77655 8.81537H2.98098L1.94079 12.4072H0L3.76046 0.179021H6.08309L9.86198 12.4072ZM6.44737 7.30845L5.45986 4.11541C5.3554 3.78922 5.15965 3.02105 4.87086 1.81183H4.83575C4.72076 2.33191 4.53554 3.10007 4.28098 4.11541L3.31103 7.30845H6.44737Z"
+        fill="currentColor"
+      />
+      <path
+        d="M19.5326 7.89015C19.5326 9.38973 19.1455 10.5751 18.3713 11.4452C17.6778 12.2198 16.8167 12.6067 15.7888 12.6067C14.6793 12.6067 13.8823 12.1895 13.3968 11.3552H13.3617V16H11.4903V6.49257C11.4903 5.54982 11.4666 4.58226 11.4209 3.58989H13.0668L13.1712 4.98748H13.2064C13.8305 3.93447 14.7776 3.40888 16.0486 3.40888C17.0423 3.40888 17.8718 3.81961 18.5354 4.64199C19.2008 5.46528 19.5326 6.5477 19.5326 7.89015ZM17.626 7.96182C17.626 7.10361 17.4417 6.39609 17.0713 5.83926C16.6666 5.25854 16.1233 4.96818 15.4421 4.96818C14.9804 4.96818 14.5608 5.1299 14.186 5.44874C13.8103 5.77034 13.5645 6.19026 13.4495 6.71034C13.3916 6.95292 13.3626 7.15139 13.3626 7.3076V8.77777C13.3626 9.41913 13.5504 9.96034 13.9261 10.4023C14.3018 10.8443 14.7899 11.0648 15.3903 11.0648C16.0952 11.0648 16.6438 10.78 17.0362 10.2121C17.4294 9.64333 17.626 8.89355 17.626 7.96182Z"
+        fill="currentColor"
+      />
+      <path
+        d="M29.2211 7.89015C29.2211 9.38973 28.834 10.5751 28.0589 11.4452C27.3663 12.2198 26.5052 12.6067 25.4773 12.6067C24.3678 12.6067 23.5708 12.1895 23.0862 11.3552H23.0511V16H21.1796V6.49257C21.1796 5.54982 21.1559 4.58226 21.1103 3.58989H22.7562L22.8606 4.98748H22.8957C23.519 3.93447 24.4661 3.40888 25.738 3.40888C26.7308 3.40888 27.5603 3.81961 28.2257 4.64199C28.8884 5.46528 29.2211 6.5477 29.2211 7.89015ZM27.3145 7.96182C27.3145 7.10361 27.1293 6.39609 26.7589 5.83926C26.3542 5.25854 25.8126 4.96818 25.1306 4.96818C24.668 4.96818 24.2493 5.1299 23.8736 5.44874C23.4979 5.77034 23.253 6.19026 23.138 6.71034C23.0809 6.95292 23.0511 7.15139 23.0511 7.3076V8.77777C23.0511 9.41913 23.2389 9.96034 23.6129 10.4023C23.9886 10.8434 24.4766 11.0648 25.0788 11.0648C25.7837 11.0648 26.3323 10.78 26.7247 10.2121C27.1179 9.64333 27.3145 8.89355 27.3145 7.96182Z"
+        fill="currentColor"
+      />
+      <path
+        d="M40.0532 8.97817C40.0532 10.0183 39.7082 10.8646 39.0156 11.5179C38.2546 12.2318 37.1951 12.5884 35.8337 12.5884C34.5767 12.5884 33.569 12.3348 32.8062 11.8266L33.2398 10.1938C34.0614 10.7139 34.9629 10.9749 35.9451 10.9749C36.65 10.9749 37.1986 10.8076 37.5927 10.475C37.9851 10.1424 38.1809 9.6958 38.1809 9.13897C38.1809 8.64279 38.0194 8.22471 37.6954 7.88565C37.3733 7.54659 36.8352 7.23142 36.0838 6.94014C34.0386 6.14165 33.0168 4.97195 33.0168 3.43378C33.0168 2.42855 33.375 1.60433 34.0921 0.962964C34.8066 0.320682 35.7599 0 36.952 0C38.015 0 38.898 0.193879 39.6029 0.580719L39.135 2.1777C38.4767 1.8028 37.7323 1.61536 36.8993 1.61536C36.241 1.61536 35.7266 1.78534 35.3579 2.12348C35.0463 2.42579 34.89 2.79425 34.89 3.23071C34.89 3.71403 35.0682 4.11373 35.4264 4.42798C35.738 4.71834 36.3042 5.03259 37.1258 5.37165C38.1308 5.79524 38.8691 6.29051 39.3439 6.85836C39.8171 7.42438 40.0532 8.13282 40.0532 8.97817Z"
+        fill="currentColor"
+      />
+      <path
+        d="M46.2404 5.06025H44.1776V9.34121C44.1776 10.4301 44.541 10.974 45.2696 10.974C45.6041 10.974 45.8814 10.9437 46.1009 10.8831L46.1527 12.3707C45.784 12.5149 45.2986 12.5875 44.6973 12.5875C43.9582 12.5875 43.3806 12.3514 42.9637 11.88C42.5485 11.4077 42.3395 10.6157 42.3395 9.50293V5.05841H41.1106V3.58824H42.3395V1.9738L44.1776 1.39308V3.58824H46.2404V5.06025Z"
+        fill="currentColor"
+      />
+      <path
+        d="M55.5478 7.92599C55.5478 9.28131 55.1773 10.394 54.4382 11.2642C53.6632 12.1601 52.6344 12.6067 51.3519 12.6067C50.116 12.6067 49.132 12.1776 48.3982 11.3193C47.6643 10.4611 47.2974 9.37779 47.2974 8.07209C47.2974 6.70575 47.6749 5.58658 48.4324 4.71642C49.1882 3.84534 50.2082 3.4098 51.4906 3.4098C52.7265 3.4098 53.7211 3.83891 54.4716 4.69804C55.1896 5.53145 55.5478 6.60743 55.5478 7.92599ZM53.6061 7.98939C53.6061 7.1762 53.4402 6.47879 53.104 5.89715C52.7116 5.19331 52.1507 4.8423 51.4239 4.8423C50.6716 4.8423 50.1002 5.19423 49.7078 5.89715C49.3716 6.47971 49.2057 7.18815 49.2057 8.02615C49.2057 8.83934 49.3716 9.53675 49.7078 10.1175C50.1125 10.8213 50.6778 11.1723 51.4072 11.1723C52.1218 11.1723 52.6827 10.814 53.0873 10.0991C53.4323 9.50643 53.6061 8.80166 53.6061 7.98939Z"
+        fill="currentColor"
+      />
+      <path
+        d="M61.6307 5.31275C61.4455 5.27692 61.248 5.25854 61.0409 5.25854C60.3825 5.25854 59.8734 5.51858 59.5152 6.03957C59.2036 6.499 59.0474 7.07972 59.0474 7.78081V12.4073H57.1768L57.1944 6.36668C57.1944 5.35043 57.1707 4.42514 57.1241 3.59081H58.7542L58.8227 5.27784H58.8745C59.072 4.69804 59.3836 4.23126 59.8102 3.88117C60.2271 3.566 60.6774 3.40888 61.1629 3.40888C61.3358 3.40888 61.492 3.42174 61.6307 3.44471V5.31275Z"
+        fill="currentColor"
+      />
+      <path
+        d="M70 7.58148C70 7.93248 69.9781 8.22835 69.9315 8.47001H64.3172C64.3391 9.34109 64.6104 10.0073 65.1318 10.4667C65.6049 10.8774 66.2167 11.0832 66.9681 11.0832C67.7994 11.0832 68.5578 10.9445 69.2398 10.6661L69.533 12.026C68.736 12.3899 67.795 12.5709 66.7092 12.5709C65.403 12.5709 64.3778 12.1684 63.6316 11.3644C62.8873 10.5604 62.5142 9.48076 62.5142 8.12636C62.5142 6.79677 62.8609 5.68955 63.5553 4.80652C64.2821 3.86377 65.2643 3.3924 66.5003 3.3924C67.7142 3.3924 68.6333 3.86377 69.2574 4.80652C69.7516 5.55539 70 6.4816 70 7.58148ZM68.2155 7.07335C68.2277 6.49263 68.1057 5.99093 67.8521 5.56734C67.5281 5.02245 67.0304 4.75047 66.3607 4.75047C65.7489 4.75047 65.2512 5.01602 64.8711 5.54896C64.5595 5.97255 64.3742 6.48068 64.3172 7.07243H68.2155V7.07335Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+};

packages/react/src/icons/IconAppStoreLogo.tsx

@@ -0,0 +1,12 @@
+import { SvgIcon, SvgIconProps } from '../components/SvgIcon';
+
+export const IconAppStoreLogo = (props: SvgIconProps) => {
+  return (
+    <SvgIcon fill="none" height="32px" viewBox="0 0 32 32" width="32px" {...props}>
+      <path
+        d="M24.2281 16.8284C24.2141 14.4443 25.2943 12.6475 27.4756 11.3226C26.2556 9.57468 24.4098 8.61335 21.9768 8.42807C19.6731 8.24629 17.1526 9.77044 16.2298 9.77044C15.2544 9.77044 13.0241 8.49099 11.2693 8.49099C7.64766 8.54693 3.79883 11.3785 3.79883 17.1395C3.79883 18.8419 4.10995 20.6003 4.7322 22.4111C5.56419 24.7952 8.56355 30.6367 11.6923 30.5423C13.3283 30.5038 14.4854 29.3817 16.6143 29.3817C18.6803 29.3817 19.75 30.5423 21.5748 30.5423C24.7315 30.4968 27.4442 25.1868 28.2342 22.7957C24.0008 20.7996 24.2281 16.9507 24.2281 16.8284ZM20.554 6.16631C22.3264 4.06186 22.1656 2.14618 22.1131 1.45752C20.547 1.54841 18.7362 2.52373 17.705 3.72277C16.5689 5.00921 15.9012 6.59979 16.0445 8.39311C17.7364 8.52246 19.2816 7.65201 20.554 6.16631Z"
+        fill="currentColor"
+      />
+    </SvgIcon>
+  );
+};

packages/react/src/icons/index.ts

@@ -8,6 +8,8 @@ export { IconAlertLc } from './IconAlertLc';
 export { IconAlertW300 } from './IconAlertW300';
 export { IconAlertW500 } from './IconAlertW500';
 export { IconApple } from './IconApple';
+export { IconAppStore } from './IconAppStore';
+export { IconAppStoreLogo } from './IconAppStoreLogo';
 export { IconArchiveArrowDown } from './IconArchiveArrowDown';
 export { IconArrowCollapse } from './IconArrowCollapse';
 export { IconArrowDownW300 } from './IconArrowDownW300';

packages/react/src/overrides.d.ts

@@ -242,6 +242,7 @@ import {
   SwiperProps
 } from './components/Swiper';
 import { SwitchClassKey, SwitchProps } from './components/Switch';
+import { StoreBadgeClassKey, StoreBadgeProps } from './components/StoreBadge';
 import { TabBarClassKey, TabBarItemClassKey, TabBarItemProps, TabBarProps } from './components/TabBar';
 import {
   TableActionsClassKey,
@@ -432,6 +433,7 @@ declare module '@mui/material/styles/props' {
     ESSvgIcon: SvgIconProps;
     ESSwiper: SwiperProps;
     ESSwitch: SwitchProps;
+    ESStoreBadge: StoreBadgeProps;
     ESSwiperButton: SwiperButtonProps;
     ESSwiperPagination: SwiperPaginationProps;
     ESTabBar: TabBarProps;
@@ -558,6 +560,7 @@ declare module '@mui/material/styles/overrides' {
     ESSvgIcon: SvgIconClassKey;
     ESSwiper: SwiperClassKey;
     ESSwitch: SwitchClassKey;
+    ESStoreBadge: StoreBadgeClassKey;
     ESSwiperButton: SwiperButtonClassKey;
     ESSwiperPagination: SwiperPaginationClassKey;
     ESTabBar: TabBarClassKey;
@@ -799,6 +802,10 @@ declare module '@mui/material/styles/components' {
       defaultProps?: ComponentsProps['ESSwitch'];
       styleOverrides?: ComponentsOverrides['ESSwitch'];
     };
+    ESStoreBadge?: {
+      defaultProps?: ComponentsProps['ESStoreBadge'];
+      styleOverrides?: ComponentsOverrides['ESStoreBadge'];
+    };
     ESSwiperButton?: {
       defaultProps?: ComponentsProps['ESSwiperButton'];
       styleOverrides?: ComponentsOverrides['ESSwiperButton'];