Améliore la gestion des icons et léger refacto du composant Message
parent
fd3c857bb2
commit
12d158fa4e
|
@ -10,7 +10,11 @@ module.exports = {
|
|||
'../source/**/*.stories.mdx',
|
||||
'../source/**/*.stories.@(js|jsx|ts|tsx)',
|
||||
],
|
||||
addons: ['@storybook/addon-links', '@storybook/addon-essentials'],
|
||||
addons: [
|
||||
'@storybook/addon-links',
|
||||
'@storybook/addon-essentials',
|
||||
'@storybook/addon-a11y',
|
||||
],
|
||||
framework: '@storybook/react',
|
||||
core: {
|
||||
builder: '@storybook/builder-vite',
|
||||
|
|
|
@ -1,13 +1,16 @@
|
|||
import React from 'react'
|
||||
|
||||
import { DarkModeProvider } from '@/contexts/DarkModeContext'
|
||||
import { GlobalStyle } from '@/design-system/index'
|
||||
import DesignSystemThemeProvider from '@/design-system/root'
|
||||
|
||||
export const decorators = [
|
||||
(Story) => (
|
||||
<DesignSystemThemeProvider>
|
||||
<DarkModeProvider value={false}>
|
||||
<GlobalStyle />
|
||||
<Story />
|
||||
</DarkModeProvider>
|
||||
</DesignSystemThemeProvider>
|
||||
),
|
||||
]
|
||||
|
|
|
@ -113,6 +113,7 @@
|
|||
"@rollup/plugin-replace": "^4.0.0",
|
||||
"@rollup/plugin-yaml": "^3.1.0",
|
||||
"@rushstack/package-deps-hash": "^3.2.64",
|
||||
"@storybook/addon-a11y": "^6.5.14",
|
||||
"@storybook/addon-actions": "^6.5.13",
|
||||
"@storybook/addon-essentials": "^6.5.13",
|
||||
"@storybook/addon-interactions": "^6.5.13",
|
||||
|
|
|
@ -3,7 +3,7 @@ import React, { useRef } from 'react'
|
|||
import { Link } from 'react-router-dom'
|
||||
import styled from 'styled-components'
|
||||
|
||||
import { Chevron } from '@/design-system/icons'
|
||||
import { ChevronIcon } from '@/design-system/icons'
|
||||
import { H4 } from '@/design-system/typography/heading'
|
||||
import {
|
||||
NewWindowLinkIcon,
|
||||
|
@ -86,7 +86,7 @@ const StyledHeader = styled(H4)`
|
|||
background-color: inherit;
|
||||
`
|
||||
|
||||
const StyledChevron = styled(Chevron)`
|
||||
const StyledChevron = styled(ChevronIcon)`
|
||||
margin-left: ${({ theme }) => theme.spacings.xxs};
|
||||
`
|
||||
|
||||
|
|
|
@ -8,8 +8,8 @@ import { AriaSearchFieldProps } from '@react-types/searchfield'
|
|||
import { useRef } from 'react'
|
||||
import styled, { css } from 'styled-components'
|
||||
|
||||
import { SearchIcon } from '@/design-system/icons'
|
||||
import { Loader } from '@/design-system/icons/Loader'
|
||||
import { SearchIcon } from '@/design-system/icons/SearchIcon'
|
||||
|
||||
import {
|
||||
StyledContainer,
|
||||
|
|
|
@ -8,7 +8,7 @@ import { useEffect, useRef } from 'react'
|
|||
import { useTranslation } from 'react-i18next'
|
||||
import styled, { css } from 'styled-components'
|
||||
|
||||
import { CarretDown } from '@/design-system/icons/carret-down'
|
||||
import { CarretDownIcon } from '@/design-system/icons'
|
||||
import { omit } from '@/utils'
|
||||
|
||||
import { ListBox } from './ListBox'
|
||||
|
@ -79,7 +79,7 @@ const Value = styled.span`
|
|||
margin-top: 1rem;
|
||||
`
|
||||
|
||||
const StyledIcon = styled(CarretDown)`
|
||||
const StyledIcon = styled(CarretDownIcon)`
|
||||
margin: 0 4px;
|
||||
`
|
||||
|
||||
|
|
|
@ -1,24 +0,0 @@
|
|||
export function SearchIcon({ ...props }) {
|
||||
return (
|
||||
<svg
|
||||
width={24}
|
||||
height={24}
|
||||
fill="white"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-hidden
|
||||
{...props}
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M10.25 6a4.25 4.25 0 100 8.5 4.25 4.25 0 000-8.5zM4 10.25a6.25 6.25 0 1112.5 0 6.25 6.25 0 01-12.5 0z"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M18.293 19.707l-5.056-5.056 1.414-1.414 5.056 5.056a1 1 0 01-1.414 1.414z"
|
||||
/>
|
||||
</svg>
|
||||
)
|
||||
}
|
|
@ -1,16 +0,0 @@
|
|||
import { HTMLAttributes } from 'react'
|
||||
|
||||
export const CarretDown = (props: HTMLAttributes<SVGElement>) => (
|
||||
<svg
|
||||
{...props}
|
||||
width="14"
|
||||
height="8"
|
||||
viewBox="0 0 14 8"
|
||||
fill="currentColor"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
role="img"
|
||||
aria-hidden
|
||||
>
|
||||
<path d="M7.70701 7.29289L13.2928 1.70711C13.9228 1.07714 13.4766 0 12.5857 0H1.41412C0.523211 0 0.0770421 1.07714 0.707007 1.70711L6.2928 7.29289C6.68332 7.68342 7.31648 7.68342 7.70701 7.29289Z" />
|
||||
</svg>
|
||||
)
|
|
@ -0,0 +1,18 @@
|
|||
import { ComponentMeta } from '@storybook/react'
|
||||
|
||||
import { SvgIcon } from '.'
|
||||
|
||||
// More on default export: https://storybook.js.org/docs/react/writing-stories/introduction#default-export
|
||||
export default {
|
||||
component: SvgIcon,
|
||||
} as ComponentMeta<typeof SvgIcon>
|
||||
|
||||
export {
|
||||
CarretDownIcon,
|
||||
ChevronIcon,
|
||||
ErrorIcon,
|
||||
InfoIcon,
|
||||
ReturnIcon,
|
||||
SearchIcon,
|
||||
SuccessIcon,
|
||||
} from '@/design-system/icons'
|
|
@ -1,18 +1,153 @@
|
|||
import { HTMLAttributes } from 'react'
|
||||
import styled from 'styled-components'
|
||||
|
||||
import { StyledSVG } from './shared'
|
||||
export const SvgIcon = styled.svg`
|
||||
/* width: ${({ theme }) => theme.spacings.lg};
|
||||
height: ${({ theme }) => theme.spacings.lg}; */
|
||||
fill: ${({ theme }) =>
|
||||
theme.darkMode
|
||||
? theme.colors.extended.grey[100]
|
||||
: theme.colors.bases.primary[800]};
|
||||
`
|
||||
|
||||
export const Chevron = (props: HTMLAttributes<SVGElement>) => (
|
||||
<StyledSVG
|
||||
export const ChevronIcon = (props: HTMLAttributes<SVGElement>) => (
|
||||
<SvgIcon
|
||||
{...props}
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
width={24}
|
||||
height={24}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-hidden
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M7.24744 4.34151C7.61112 3.92587 8.24288 3.88375 8.65852 4.24744L16.6585 11.2474C16.8755 11.4373 17 11.7116 17 12C17 12.2884 16.8755 12.5627 16.6585 12.7526L8.65852 19.7526C8.24288 20.1163 7.61112 20.0742 7.24744 19.6585C6.88375 19.2429 6.92587 18.6111 7.34151 18.2474L14.4814 12L7.34151 5.75259C6.92587 5.38891 6.88375 4.75715 7.24744 4.34151Z"
|
||||
/>
|
||||
</StyledSVG>
|
||||
</SvgIcon>
|
||||
)
|
||||
|
||||
export const InfoIcon = (props: HTMLAttributes<SVGElement>) => (
|
||||
<SvgIcon
|
||||
{...props}
|
||||
viewBox="0 0 20 20"
|
||||
width={20}
|
||||
height={20}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-hidden
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM20 10C20 15.5229 15.5228 20 10 20C4.47715 20 -4.82823e-07 15.5228 0 10C4.82823e-07 4.47715 4.47715 -4.82823e-07 10 0C15.5229 4.82823e-07 20 4.47715 20 10Z"
|
||||
/>
|
||||
<path d="M9 6.00003C9 5.44774 9.44772 5.00003 10 5.00003C10.5523 5.00003 11 5.44774 11 6.00003C11 6.55231 10.5523 7.00003 10 7.00003C9.44772 7.00003 9 6.55231 9 6.00003Z" />
|
||||
<path d="M11 14.6C11 15.1523 10.5523 15.6 10 15.6C9.44772 15.6 9 15.1523 9 14.6L9 9.4C9 8.84772 9.44772 8.4 10 8.4C10.5523 8.4 11 8.84772 11 9.4L11 14.6Z" />
|
||||
</SvgIcon>
|
||||
)
|
||||
|
||||
export const SuccessIcon = (props: HTMLAttributes<SVGElement>) => (
|
||||
<SvgIcon
|
||||
{...props}
|
||||
viewBox="0 0 20 20"
|
||||
width={20}
|
||||
height={20}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-hidden
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20Z"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M15.261 6.14683C15.6494 6.53952 15.6459 7.17268 15.2532 7.56103L9.13554 13.611C8.74443 13.9978 8.11438 13.9961 7.72538 13.6072L4.643 10.5258C4.25242 10.1354 4.25232 9.50219 4.64278 9.11161C5.03324 8.72102 5.66641 8.72092 6.05699 9.11138L8.43618 11.4898L13.8468 6.13897C14.2395 5.75063 14.8727 5.75415 15.261 6.14683Z"
|
||||
/>
|
||||
</SvgIcon>
|
||||
)
|
||||
|
||||
export const CarretDownIcon = (props: HTMLAttributes<SVGElement>) => (
|
||||
<SvgIcon
|
||||
{...props}
|
||||
width="14"
|
||||
height="8"
|
||||
viewBox="0 0 14 8"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-hidden
|
||||
role="img"
|
||||
>
|
||||
<path d="M7.70701 7.29289L13.2928 1.70711C13.9228 1.07714 13.4766 0 12.5857 0H1.41412C0.523211 0 0.0770421 1.07714 0.707007 1.70711L6.2928 7.29289C6.68332 7.68342 7.31648 7.68342 7.70701 7.29289Z" />
|
||||
</SvgIcon>
|
||||
)
|
||||
|
||||
export function SearchIcon({ ...props }) {
|
||||
return (
|
||||
<SvgIcon
|
||||
{...props}
|
||||
width={24}
|
||||
height={24}
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-hidden
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M10.25 6a4.25 4.25 0 100 8.5 4.25 4.25 0 000-8.5zM4 10.25a6.25 6.25 0 1112.5 0 6.25 6.25 0 01-12.5 0z"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M18.293 19.707l-5.056-5.056 1.414-1.414 5.056 5.056a1 1 0 01-1.414 1.414z"
|
||||
/>
|
||||
</SvgIcon>
|
||||
)
|
||||
}
|
||||
|
||||
export const ErrorIcon = (props: HTMLAttributes<SVGElement>) => (
|
||||
<SvgIcon
|
||||
{...props}
|
||||
width="20"
|
||||
height="19"
|
||||
viewBox="0 0 20 19"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-hidden
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M10 0C10.3704 0 10.7105 0.204749 10.8838 0.532112L19.8838 17.5321C20.0479 17.8421 20.0376 18.2153 19.8567 18.5158C19.6758 18.8163 19.3507 19 19 19H1C0.649283 19 0.324198 18.8163 0.143295 18.5158C-0.0376073 18.2153 -0.0478841 17.8421 0.116212 17.5321L9.11621 0.532112C9.28952 0.204749 9.62959 0 10 0ZM2.66091 17H17.3391L10 3.13727L2.66091 17Z"
|
||||
/>
|
||||
<path d="M11 14.5C11 15.0579 10.5579 15.5 10 15.5C9.44214 15.5 9 15.0579 9 14.5C9 13.9421 9.44214 13.5 10 13.5C10.5579 13.5 11 13.9421 11 14.5Z" />
|
||||
<path d="M8.99999 7.5C8.99999 6.94214 9.44212 6.5 9.99998 6.5C10.5578 6.5 11 6.94214 11 7.5V11C11 11.5579 10.5576 12 9.99969 12C9.44183 12 8.99999 11.5579 8.99999 11V7.5Z" />
|
||||
</SvgIcon>
|
||||
)
|
||||
|
||||
export const ReturnIcon = (props: HTMLAttributes<SVGElement>) => (
|
||||
<SvgIcon
|
||||
{...props}
|
||||
width="16"
|
||||
height="13"
|
||||
viewBox="0 0 16 13"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
aria-hidden
|
||||
role="img"
|
||||
>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M1 0C1.55228 0 2 0.447715 2 1V6.65C2 7.20228 2.44772 7.65 3 7.65H15C15.5523 7.65 16 8.09771 16 8.65C16 9.20228 15.5523 9.65 15 9.65H3C1.34314 9.65 0 8.30685 0 6.65V1C0 0.447715 0.447715 0 1 0Z"
|
||||
/>
|
||||
<path
|
||||
fillRule="evenodd"
|
||||
clipRule="evenodd"
|
||||
d="M11.5407 4.69739C11.9564 4.33371 12.5881 4.37582 12.9518 4.79146L15.7518 7.99146C16.0817 8.36849 16.0817 8.93144 15.7518 9.30847L12.9518 12.5085C12.5881 12.9241 11.9564 12.9662 11.5407 12.6025C11.1251 12.2389 11.083 11.6071 11.4467 11.1915L13.6705 8.64997L11.4467 6.10847C11.083 5.69283 11.1251 5.06107 11.5407 4.69739Z"
|
||||
/>
|
||||
</SvgIcon>
|
||||
)
|
||||
|
|
|
@ -1,7 +0,0 @@
|
|||
import styled from 'styled-components'
|
||||
|
||||
export const StyledSVG = styled.svg`
|
||||
width: ${({ theme }) => theme.spacings.lg};
|
||||
height: ${({ theme }) => theme.spacings.lg};
|
||||
fill: ${({ theme }) => theme.colors.bases.primary[800]};
|
||||
`
|
|
@ -1,4 +0,0 @@
|
|||
<svg role="img" width="16" height="13" viewBox="0 0 16 13" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M1 0C1.55228 0 2 0.447715 2 1V6.65C2 7.20228 2.44772 7.65 3 7.65H15C15.5523 7.65 16 8.09771 16 8.65C16 9.20228 15.5523 9.65 15 9.65H3C1.34314 9.65 0 8.30685 0 6.65V1C0 0.447715 0.447715 0 1 0Z" fill="#2E5FB6"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.5407 4.69739C11.9564 4.33371 12.5881 4.37582 12.9518 4.79146L15.7518 7.99146C16.0817 8.36849 16.0817 8.93144 15.7518 9.30847L12.9518 12.5085C12.5881 12.9241 11.9564 12.9662 11.5407 12.6025C11.1251 12.2389 11.083 11.6071 11.4467 11.1915L13.6705 8.64997L11.4467 6.10847C11.083 5.69283 11.1251 5.06107 11.5407 4.69739Z" fill="#2E5FB6"/>
|
||||
</svg>
|
Before Width: | Height: | Size: 761 B |
|
@ -1,5 +0,0 @@
|
|||
<svg width="20" height="19" viewBox="0 0 20 19" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 0C10.3704 0 10.7105 0.204749 10.8838 0.532112L19.8838 17.5321C20.0479 17.8421 20.0376 18.2153 19.8567 18.5158C19.6758 18.8163 19.3507 19 19 19H1C0.649283 19 0.324198 18.8163 0.143295 18.5158C-0.0376073 18.2153 -0.0478841 17.8421 0.116212 17.5321L9.11621 0.532112C9.28952 0.204749 9.62959 0 10 0ZM2.66091 17H17.3391L10 3.13727L2.66091 17Z" fill="#96050F"/>
|
||||
<path d="M11 14.5C11 15.0579 10.5579 15.5 10 15.5C9.44214 15.5 9 15.0579 9 14.5C9 13.9421 9.44214 13.5 10 13.5C10.5579 13.5 11 13.9421 11 14.5Z" fill="#96050F"/>
|
||||
<path d="M8.99999 7.5C8.99999 6.94214 9.44212 6.5 9.99998 6.5C10.5578 6.5 11 6.94214 11 7.5V11C11 11.5579 10.5576 12 9.99969 12C9.44183 12 8.99999 11.5579 8.99999 11V7.5Z" fill="#96050F"/>
|
||||
</svg>
|
Before Width: | Height: | Size: 863 B |
|
@ -3,11 +3,8 @@ import styled, { ThemeProvider, css } from 'styled-components'
|
|||
|
||||
import { Palette, SmallPalette } from '@/types/styled'
|
||||
|
||||
import { ErrorIcon, InfoIcon, ReturnIcon, SuccessIcon } from '../icons'
|
||||
import { Body } from '../typography/paragraphs'
|
||||
import baseIcon from './baseIcon.svg'
|
||||
import errorIcon from './errorIcon.svg'
|
||||
import infoIcon from './infoIcon.svg'
|
||||
import successIcon from './successIcon.svg'
|
||||
|
||||
export type MessageType = 'primary' | 'secondary' | 'info' | 'error' | 'success'
|
||||
type MessageProps = {
|
||||
|
@ -42,21 +39,44 @@ export function Message({
|
|||
light={light}
|
||||
aria-atomic
|
||||
>
|
||||
{icon &&
|
||||
(type === 'success' ? (
|
||||
<StyledIcon src={successIcon} alt="" />
|
||||
) : type === 'error' ? (
|
||||
<StyledIcon src={errorIcon} alt="" />
|
||||
) : type === 'info' ? (
|
||||
<StyledIcon src={infoIcon} alt="" />
|
||||
) : (
|
||||
<StyledIcon src={baseIcon} alt="" />
|
||||
))}
|
||||
{icon && (
|
||||
<StyledIconWrapper type={type}>
|
||||
{type === 'success' ? (
|
||||
<SuccessIcon />
|
||||
) : type === 'error' ? (
|
||||
<ErrorIcon />
|
||||
) : type === 'info' ? (
|
||||
<InfoIcon />
|
||||
) : (
|
||||
<ReturnIcon />
|
||||
)}
|
||||
</StyledIconWrapper>
|
||||
)}
|
||||
<Wrapper role={role}>{children}</Wrapper>
|
||||
</StyledMessage>
|
||||
</ThemeProvider>
|
||||
)
|
||||
}
|
||||
const StyledIconWrapper = styled.div<{
|
||||
type: MessageProps['type']
|
||||
}>`
|
||||
display: flex;
|
||||
position: relative;
|
||||
top: ${({ theme }) => theme.spacings.xxs};
|
||||
width: ${({ theme }) => theme.spacings.xl};
|
||||
svg {
|
||||
fill: ${({ theme, type }) =>
|
||||
type === 'success'
|
||||
? theme.colors.extended.success[600]
|
||||
: type === 'error'
|
||||
? theme.colors.extended.error[600]
|
||||
: type === 'info'
|
||||
? theme.colors.extended.info[600]
|
||||
: type === 'secondary'
|
||||
? theme.colors.bases.secondary[700]
|
||||
: theme.colors.bases.primary[700]};
|
||||
}
|
||||
`
|
||||
|
||||
type StyledMessageProps = Pick<MessageProps, 'border' | 'light'> & {
|
||||
messageType: NonNullable<MessageProps['type']>
|
||||
|
@ -73,7 +93,7 @@ const StyledMessage = styled.div<StyledMessageProps>`
|
|||
: theme.colors.extended[messageType]
|
||||
|
||||
return css`
|
||||
padding: ${theme.spacings.xs} ${theme.spacings.lg};
|
||||
padding: 0px ${theme.spacings.lg};
|
||||
background-color: ${light ? 'rgba(255,255,255,0.75)' : colorSpace[100]};
|
||||
border: 2px solid ${colorSpace[border ? 500 : 100]};
|
||||
border-radius: ${theme.box.borderRadius};
|
||||
|
@ -90,19 +110,6 @@ const StyledMessage = styled.div<StyledMessageProps>`
|
|||
}}
|
||||
`
|
||||
|
||||
const StyledIcon = styled.img`
|
||||
padding-right: ${({ theme }) => theme.spacings.md};
|
||||
${({ theme, title }) =>
|
||||
title !== 'paragraph'
|
||||
? css`
|
||||
margin-top: calc(${theme.spacings.md} + ${theme.spacings.xxs} / 2);
|
||||
height: calc(${theme.spacings.md} + ${theme.spacings.xxs});
|
||||
`
|
||||
: css`
|
||||
margin-top: calc(${theme.spacings.lg});
|
||||
`}
|
||||
`
|
||||
|
||||
const Wrapper = styled.div`
|
||||
flex: 1;
|
||||
`
|
||||
|
|
|
@ -1,5 +0,0 @@
|
|||
<svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM20 10C20 15.5229 15.5228 20 10 20C4.47715 20 -4.82823e-07 15.5228 0 10C4.82823e-07 4.47715 4.47715 -4.82823e-07 10 0C15.5229 4.82823e-07 20 4.47715 20 10Z" fill="#D3AA00"/>
|
||||
<path d="M9 6.00003C9 5.44774 9.44772 5.00003 10 5.00003C10.5523 5.00003 11 5.44774 11 6.00003C11 6.55231 10.5523 7.00003 10 7.00003C9.44772 7.00003 9 6.55231 9 6.00003Z" fill="#D3AA00"/>
|
||||
<path d="M11 14.6C11 15.1523 10.5523 15.6 10 15.6C9.44772 15.6 9 15.1523 9 14.6L9 9.4C9 8.84772 9.44772 8.4 10 8.4C10.5523 8.4 11 8.84772 11 9.4L11 14.6Z" fill="#D3AA00"/>
|
||||
</svg>
|
Before Width: | Height: | Size: 810 B |
|
@ -1,4 +0,0 @@
|
|||
<svg role="img" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M10 18C14.4183 18 18 14.4183 18 10C18 5.58172 14.4183 2 10 2C5.58172 2 2 5.58172 2 10C2 14.4183 5.58172 18 10 18ZM10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20Z" fill="#3CB053"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.261 6.14683C15.6494 6.53952 15.6459 7.17268 15.2532 7.56103L9.13554 13.611C8.74443 13.9978 8.11438 13.9961 7.72538 13.6072L4.643 10.5258C4.25242 10.1354 4.25232 9.50219 4.64278 9.11161C5.03324 8.72102 5.66641 8.72092 6.05699 9.11138L8.43618 11.4898L13.8468 6.13897C14.2395 5.75063 14.8727 5.75415 15.261 6.14683Z" fill="#3CB053"/>
|
||||
</svg>
|
Before Width: | Height: | Size: 792 B |
205
yarn.lock
205
yarn.lock
|
@ -6374,6 +6374,38 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@storybook/addon-a11y@npm:^6.5.14":
|
||||
version: 6.5.14
|
||||
resolution: "@storybook/addon-a11y@npm:6.5.14"
|
||||
dependencies:
|
||||
"@storybook/addons": 6.5.14
|
||||
"@storybook/api": 6.5.14
|
||||
"@storybook/channels": 6.5.14
|
||||
"@storybook/client-logger": 6.5.14
|
||||
"@storybook/components": 6.5.14
|
||||
"@storybook/core-events": 6.5.14
|
||||
"@storybook/csf": 0.0.2--canary.4566f4d.1
|
||||
"@storybook/theming": 6.5.14
|
||||
axe-core: ^4.2.0
|
||||
core-js: ^3.8.2
|
||||
global: ^4.4.0
|
||||
lodash: ^4.17.21
|
||||
react-sizeme: ^3.0.1
|
||||
regenerator-runtime: ^0.13.7
|
||||
ts-dedent: ^2.0.0
|
||||
util-deprecate: ^1.0.2
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
peerDependenciesMeta:
|
||||
react:
|
||||
optional: true
|
||||
react-dom:
|
||||
optional: true
|
||||
checksum: 2c35e693641b38e90989a656b8766cd2a86482e24164e62afd2cd1899d454b1a0c0b8f23df328c5350884d22615e9779dd617c71c642f4eada1df6345feba8e3
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@storybook/addon-actions@npm:6.5.13, @storybook/addon-actions@npm:^6.5.13":
|
||||
version: 6.5.13
|
||||
resolution: "@storybook/addon-actions@npm:6.5.13"
|
||||
|
@ -6754,6 +6786,28 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@storybook/addons@npm:6.5.14":
|
||||
version: 6.5.14
|
||||
resolution: "@storybook/addons@npm:6.5.14"
|
||||
dependencies:
|
||||
"@storybook/api": 6.5.14
|
||||
"@storybook/channels": 6.5.14
|
||||
"@storybook/client-logger": 6.5.14
|
||||
"@storybook/core-events": 6.5.14
|
||||
"@storybook/csf": 0.0.2--canary.4566f4d.1
|
||||
"@storybook/router": 6.5.14
|
||||
"@storybook/theming": 6.5.14
|
||||
"@types/webpack-env": ^1.16.0
|
||||
core-js: ^3.8.2
|
||||
global: ^4.4.0
|
||||
regenerator-runtime: ^0.13.7
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
checksum: 99d06641bab06a3cc2821f309589d062c0efd8707b451ae24017449034da408bfddce3beda1ccdedadf59669d7d13348bee127f6fd4fc057200c84ff43288312
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@storybook/api@npm:6.5.13":
|
||||
version: 6.5.13
|
||||
resolution: "@storybook/api@npm:6.5.13"
|
||||
|
@ -6782,6 +6836,34 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@storybook/api@npm:6.5.14":
|
||||
version: 6.5.14
|
||||
resolution: "@storybook/api@npm:6.5.14"
|
||||
dependencies:
|
||||
"@storybook/channels": 6.5.14
|
||||
"@storybook/client-logger": 6.5.14
|
||||
"@storybook/core-events": 6.5.14
|
||||
"@storybook/csf": 0.0.2--canary.4566f4d.1
|
||||
"@storybook/router": 6.5.14
|
||||
"@storybook/semver": ^7.3.2
|
||||
"@storybook/theming": 6.5.14
|
||||
core-js: ^3.8.2
|
||||
fast-deep-equal: ^3.1.3
|
||||
global: ^4.4.0
|
||||
lodash: ^4.17.21
|
||||
memoizerific: ^1.11.3
|
||||
regenerator-runtime: ^0.13.7
|
||||
store2: ^2.12.0
|
||||
telejson: ^6.0.8
|
||||
ts-dedent: ^2.0.0
|
||||
util-deprecate: ^1.0.2
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
checksum: 0d421c3211a49cb8910dea647b898edd60af79755108ed321626a8fc134713dd1b018c830f15c2fc6c863f0528b571c2e2b34bb79df3c2f43497f5ab36fa9bbf
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@storybook/builder-vite@npm:^0.2.5":
|
||||
version: 0.2.5
|
||||
resolution: "@storybook/builder-vite@npm:0.2.5"
|
||||
|
@ -6920,6 +7002,17 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@storybook/channels@npm:6.5.14":
|
||||
version: 6.5.14
|
||||
resolution: "@storybook/channels@npm:6.5.14"
|
||||
dependencies:
|
||||
core-js: ^3.8.2
|
||||
ts-dedent: ^2.0.0
|
||||
util-deprecate: ^1.0.2
|
||||
checksum: ff1ee3fea3c7b8591280ba7eabe13c999fc3e12a483ff2c0467cc9cca027662cbbc4676438da567865919157521df8a9a50bd20b35daed6896f39a3a7251a1e5
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@storybook/client-api@npm:6.5.13":
|
||||
version: 6.5.13
|
||||
resolution: "@storybook/client-api@npm:6.5.13"
|
||||
|
@ -6961,6 +7054,16 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@storybook/client-logger@npm:6.5.14":
|
||||
version: 6.5.14
|
||||
resolution: "@storybook/client-logger@npm:6.5.14"
|
||||
dependencies:
|
||||
core-js: ^3.8.2
|
||||
global: ^4.4.0
|
||||
checksum: 29cc0b58db7a8dc90484320c86b386975580c0e534791b29f6a8c00ce5b156f2bff9513994202f9f9ef99787e8d793988048ae88d2780ba151c6782f3bbf97ff
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@storybook/components@npm:6.5.13":
|
||||
version: 6.5.13
|
||||
resolution: "@storybook/components@npm:6.5.13"
|
||||
|
@ -6980,6 +7083,25 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@storybook/components@npm:6.5.14":
|
||||
version: 6.5.14
|
||||
resolution: "@storybook/components@npm:6.5.14"
|
||||
dependencies:
|
||||
"@storybook/client-logger": 6.5.14
|
||||
"@storybook/csf": 0.0.2--canary.4566f4d.1
|
||||
"@storybook/theming": 6.5.14
|
||||
core-js: ^3.8.2
|
||||
memoizerific: ^1.11.3
|
||||
qs: ^6.10.0
|
||||
regenerator-runtime: ^0.13.7
|
||||
util-deprecate: ^1.0.2
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
checksum: 73d0ff418f2c5b1fc9f421f089ebee2342ef0684905e4959397a8bc6f67f32ff97f4ec3587847980cb7e4fc8e40278d8ecea11a8d267fea8d94ad3d8265a0c21
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@storybook/core-client@npm:6.5.13":
|
||||
version: 6.5.13
|
||||
resolution: "@storybook/core-client@npm:6.5.13"
|
||||
|
@ -7088,6 +7210,15 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@storybook/core-events@npm:6.5.14":
|
||||
version: 6.5.14
|
||||
resolution: "@storybook/core-events@npm:6.5.14"
|
||||
dependencies:
|
||||
core-js: ^3.8.2
|
||||
checksum: 6787925c520a6ee5aee748d4b7e2ec599c5ee16a87dbb62a94eeec88003ef42683d8e7ac8b98b49ea2a33205e0648805410c4759d16a997ba2f4215f6c8784ce
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@storybook/core-server@npm:6.5.13":
|
||||
version: 6.5.13
|
||||
resolution: "@storybook/core-server@npm:6.5.13"
|
||||
|
@ -7472,6 +7603,22 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@storybook/router@npm:6.5.14":
|
||||
version: 6.5.14
|
||||
resolution: "@storybook/router@npm:6.5.14"
|
||||
dependencies:
|
||||
"@storybook/client-logger": 6.5.14
|
||||
core-js: ^3.8.2
|
||||
memoizerific: ^1.11.3
|
||||
qs: ^6.10.0
|
||||
regenerator-runtime: ^0.13.7
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
checksum: ec2550568c02f45de5307e77928eaeb39413049944e994adbc397d9c7e083ac7e110886e40517ddae40e3879c172f458167682f1d73d0bb150bc93ab9dd61514
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@storybook/semver@npm:^7.3.2":
|
||||
version: 7.3.2
|
||||
resolution: "@storybook/semver@npm:7.3.2"
|
||||
|
@ -7579,6 +7726,21 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@storybook/theming@npm:6.5.14":
|
||||
version: 6.5.14
|
||||
resolution: "@storybook/theming@npm:6.5.14"
|
||||
dependencies:
|
||||
"@storybook/client-logger": 6.5.14
|
||||
core-js: ^3.8.2
|
||||
memoizerific: ^1.11.3
|
||||
regenerator-runtime: ^0.13.7
|
||||
peerDependencies:
|
||||
react: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
|
||||
checksum: d139325dd51e8dfa58458a5c033104123b019fc02ddc899898e02de2b5d1358fd318b5def7ef82e6138420f9198e90d50b0fdfbea926987ac6852fc3a2e77c6d
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"@storybook/ui@npm:6.5.13":
|
||||
version: 6.5.13
|
||||
resolution: "@storybook/ui@npm:6.5.13"
|
||||
|
@ -10296,6 +10458,13 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"axe-core@npm:^4.2.0":
|
||||
version: 4.6.0
|
||||
resolution: "axe-core@npm:4.6.0"
|
||||
checksum: ed112f76bbb2e2ab52dda623fc4baf882b2d00045a55b2cc15358e891f7f164d674be1a2fbcfd49e11d064b146c387c5c9c3c29d7d59c9de6c22c65b86eb68ac
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"axe-core@npm:^4.4.3, axe-core@npm:^4.5.2":
|
||||
version: 4.5.2
|
||||
resolution: "axe-core@npm:4.5.2"
|
||||
|
@ -10519,6 +10688,13 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"batch-processor@npm:1.0.0":
|
||||
version: 1.0.0
|
||||
resolution: "batch-processor@npm:1.0.0"
|
||||
checksum: 5519b024f6cd0e95a543bb3edf0ae19e5badae0c32b30b41839b4469bbb1f91e14fc04bff3759cd9c2621aa9e16def48c938783e9027e7ec977fba62d537a468
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"bcrypt-pbkdf@npm:^1.0.0":
|
||||
version: 1.0.2
|
||||
resolution: "bcrypt-pbkdf@npm:1.0.2"
|
||||
|
@ -13975,6 +14151,15 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"element-resize-detector@npm:^1.2.2":
|
||||
version: 1.2.4
|
||||
resolution: "element-resize-detector@npm:1.2.4"
|
||||
dependencies:
|
||||
batch-processor: 1.0.0
|
||||
checksum: 81c47b7e229c303889d3a9d78ec3f3232e88a6682f1e2424fb0632d9b4f503b2ca011e6954321060604da07749a5a972b6a175fdf6c6806093a3b80a304cde7b
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"elliptic@npm:^6.5.3":
|
||||
version: 6.5.4
|
||||
resolution: "elliptic@npm:6.5.4"
|
||||
|
@ -24413,6 +24598,18 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"react-sizeme@npm:^3.0.1":
|
||||
version: 3.0.2
|
||||
resolution: "react-sizeme@npm:3.0.2"
|
||||
dependencies:
|
||||
element-resize-detector: ^1.2.2
|
||||
invariant: ^2.2.4
|
||||
shallowequal: ^1.1.0
|
||||
throttle-debounce: ^3.0.1
|
||||
checksum: 97cb852c24bbd50acb310da89df564e0d069415f6635676dae3d3bdc583ece88090c0f2ee88a6b0dc36d2793af4a11e83bf6bbb41b86225dd0cf338e8f7e8552
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"react-smooth@npm:^2.0.1":
|
||||
version: 2.0.1
|
||||
resolution: "react-smooth@npm:2.0.1"
|
||||
|
@ -25956,6 +26153,7 @@ __metadata:
|
|||
"@sentry/integrations": ^7.22.0
|
||||
"@sentry/react": ^7.22.0
|
||||
"@sentry/tracing": ^7.22.0
|
||||
"@storybook/addon-a11y": ^6.5.14
|
||||
"@storybook/addon-actions": ^6.5.13
|
||||
"@storybook/addon-essentials": ^6.5.13
|
||||
"@storybook/addon-interactions": ^6.5.13
|
||||
|
@ -27375,6 +27573,13 @@ __metadata:
|
|||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"throttle-debounce@npm:^3.0.1":
|
||||
version: 3.0.1
|
||||
resolution: "throttle-debounce@npm:3.0.1"
|
||||
checksum: e34ef638e8df3a9154249101b68afcbf2652a139c803415ef8a2f6a8bc577bcd4d79e4bb914ad3cd206523ac78b9fb7e80885bfa049f64fbb1927f99d98b5736
|
||||
languageName: node
|
||||
linkType: hard
|
||||
|
||||
"throttleit@npm:^1.0.0":
|
||||
version: 1.0.0
|
||||
resolution: "throttleit@npm:1.0.0"
|
||||
|
|
Loading…
Reference in New Issue