@channel.io/bezier-react 1.10.0 → 1.10.1
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.
- package/dist/cjs/components/ProgressBar/ProgressBar.js +1 -0
- package/dist/cjs/components/ProgressBar/ProgressBar.js.map +1 -1
- package/dist/cjs/components/ProgressBar/ProgressBar.styled.js +24 -4
- package/dist/cjs/components/ProgressBar/ProgressBar.styled.js.map +1 -1
- package/dist/cjs/components/ProgressBar/ProgressBar.types.js +1 -0
- package/dist/cjs/components/ProgressBar/ProgressBar.types.js.map +1 -1
- package/dist/cjs/foundation/Colors/Theme/presets/DarkTheme.js +1 -0
- package/dist/cjs/foundation/Colors/Theme/presets/DarkTheme.js.map +1 -1
- package/dist/esm/components/ProgressBar/ProgressBar.mjs +1 -0
- package/dist/esm/components/ProgressBar/ProgressBar.mjs.map +1 -1
- package/dist/esm/components/ProgressBar/ProgressBar.styled.mjs +24 -4
- package/dist/esm/components/ProgressBar/ProgressBar.styled.mjs.map +1 -1
- package/dist/esm/components/ProgressBar/ProgressBar.types.mjs +1 -0
- package/dist/esm/components/ProgressBar/ProgressBar.types.mjs.map +1 -1
- package/dist/esm/foundation/Colors/Theme/presets/DarkTheme.mjs +1 -0
- package/dist/esm/foundation/Colors/Theme/presets/DarkTheme.mjs.map +1 -1
- package/dist/types/components/ProgressBar/ProgressBar.d.ts.map +1 -1
- package/dist/types/components/ProgressBar/ProgressBar.styled.d.ts +1 -0
- package/dist/types/components/ProgressBar/ProgressBar.styled.d.ts.map +1 -1
- package/dist/types/components/ProgressBar/ProgressBar.types.d.ts +1 -0
- package/dist/types/components/ProgressBar/ProgressBar.types.d.ts.map +1 -1
- package/dist/types/foundation/Colors/Theme/presets/DarkTheme.d.ts.map +1 -1
- package/package.json +1 -1
- package/src/components/ProgressBar/ProgressBar.mdx +2 -2
- package/src/components/ProgressBar/ProgressBar.stories.tsx +16 -0
- package/src/components/ProgressBar/ProgressBar.styled.ts +26 -4
- package/src/components/ProgressBar/ProgressBar.test.tsx +20 -2
- package/src/components/ProgressBar/ProgressBar.tsx +1 -0
- package/src/components/ProgressBar/ProgressBar.types.ts +1 -0
- package/src/foundation/Colors/Theme/presets/DarkTheme.ts +1 -0
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.js","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import React, {\n type Ref,\n forwardRef,\n memo,\n} from 'react'\n\nimport { clamp } from '~/src/utils/numberUtils'\n\nimport type ProgressBarProps from './ProgressBar.types'\nimport {\n ProgressBarSize,\n ProgressBarVariant,\n} from './ProgressBar.types'\n\nimport {\n StyledProgressBarActive,\n StyledProgressBarWrapper,\n} from './ProgressBar.styled'\n\nexport const PROGRESS_BAR_ACTIVE_TEST_ID = 'bezier-react-progress-bar-active'\n\nexport const ProgressBar = memo(forwardRef(function ProgressBar(\n {\n size = ProgressBarSize.M,\n variant = ProgressBarVariant.Green,\n width = 36,\n value = 0,\n activeClassName,\n activeInterpolation,\n activeStyle,\n activeTestId = PROGRESS_BAR_ACTIVE_TEST_ID,\n ...rest\n }: ProgressBarProps,\n forwardedRef: Ref<HTMLDivElement>,\n) {\n const clampedValue = clamp(value, 0, 1)\n\n return (\n <StyledProgressBarWrapper\n ref={forwardedRef}\n size={size}\n width={width}\n role=\"progressbar\"\n aria-valuemin=\"0\"\n aria-valuemax=\"1\"\n aria-valuenow={clampedValue}\n {...rest}\n >\n <StyledProgressBarActive\n variant={variant}\n value={clampedValue}\n className={activeClassName}\n interpolation={activeInterpolation}\n style={activeStyle}\n data-testid={activeTestId}\n />\n </StyledProgressBarWrapper>\n )\n}))\n"],"names":["PROGRESS_BAR_ACTIVE_TEST_ID","ProgressBar","memo","forwardRef","size","ProgressBarSize","M","variant","ProgressBarVariant","Green","width","value","activeClassName","activeInterpolation","activeStyle","activeTestId","rest","forwardedRef","clampedValue","clamp","React","createElement","StyledProgressBarWrapper","Object","assign","ref","role","StyledProgressBarActive","className","interpolation","style"],"mappings":";;;;;;;AAmBO,MAAMA,2BAA2B,GAAG,mCAAkC;AAEtE,MAAMC,WAAW,gBAAGC,UAAI,eAACC,gBAAU,CAAC,SAASF,WAAWA,CAC7D;EACEG,IAAI,GAAGC,iCAAe,CAACC,CAAC;EACxBC,OAAO,GAAGC,oCAAkB,CAACC,KAAK;AAClCC,EAAAA,KAAK,GAAG,EAAE;AACVC,EAAAA,KAAK,GAAG,CAAC;EACTC,eAAe;EACfC,mBAAmB;EACnBC,WAAW;AACXC,EAAAA,YAAY,GAAGf,2BAA2B;EAC1C,GAAGgB,IAAAA;AACa,CAAC,EACnBC,YAAiC,EACjC;EACA,MAAMC,YAAY,GAAGC,iBAAK,CAACR,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;EAEvC,oBACES,KAAA,CAAAC,aAAA,CAACC,2CAAwB,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACvBC,IAAAA,GAAG,EAAER,YAAa;AAClBb,IAAAA,IAAI,EAAEA,IAAK;AACXM,IAAAA,KAAK,EAAEA,KAAM;
|
|
1
|
+
{"version":3,"file":"ProgressBar.js","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import React, {\n type Ref,\n forwardRef,\n memo,\n} from 'react'\n\nimport { clamp } from '~/src/utils/numberUtils'\n\nimport type ProgressBarProps from './ProgressBar.types'\nimport {\n ProgressBarSize,\n ProgressBarVariant,\n} from './ProgressBar.types'\n\nimport {\n StyledProgressBarActive,\n StyledProgressBarWrapper,\n} from './ProgressBar.styled'\n\nexport const PROGRESS_BAR_ACTIVE_TEST_ID = 'bezier-react-progress-bar-active'\n\nexport const ProgressBar = memo(forwardRef(function ProgressBar(\n {\n size = ProgressBarSize.M,\n variant = ProgressBarVariant.Green,\n width = 36,\n value = 0,\n activeClassName,\n activeInterpolation,\n activeStyle,\n activeTestId = PROGRESS_BAR_ACTIVE_TEST_ID,\n ...rest\n }: ProgressBarProps,\n forwardedRef: Ref<HTMLDivElement>,\n) {\n const clampedValue = clamp(value, 0, 1)\n\n return (\n <StyledProgressBarWrapper\n ref={forwardedRef}\n size={size}\n width={width}\n variant={variant}\n role=\"progressbar\"\n aria-valuemin=\"0\"\n aria-valuemax=\"1\"\n aria-valuenow={clampedValue}\n {...rest}\n >\n <StyledProgressBarActive\n variant={variant}\n value={clampedValue}\n className={activeClassName}\n interpolation={activeInterpolation}\n style={activeStyle}\n data-testid={activeTestId}\n />\n </StyledProgressBarWrapper>\n )\n}))\n"],"names":["PROGRESS_BAR_ACTIVE_TEST_ID","ProgressBar","memo","forwardRef","size","ProgressBarSize","M","variant","ProgressBarVariant","Green","width","value","activeClassName","activeInterpolation","activeStyle","activeTestId","rest","forwardedRef","clampedValue","clamp","React","createElement","StyledProgressBarWrapper","Object","assign","ref","role","StyledProgressBarActive","className","interpolation","style"],"mappings":";;;;;;;AAmBO,MAAMA,2BAA2B,GAAG,mCAAkC;AAEtE,MAAMC,WAAW,gBAAGC,UAAI,eAACC,gBAAU,CAAC,SAASF,WAAWA,CAC7D;EACEG,IAAI,GAAGC,iCAAe,CAACC,CAAC;EACxBC,OAAO,GAAGC,oCAAkB,CAACC,KAAK;AAClCC,EAAAA,KAAK,GAAG,EAAE;AACVC,EAAAA,KAAK,GAAG,CAAC;EACTC,eAAe;EACfC,mBAAmB;EACnBC,WAAW;AACXC,EAAAA,YAAY,GAAGf,2BAA2B;EAC1C,GAAGgB,IAAAA;AACa,CAAC,EACnBC,YAAiC,EACjC;EACA,MAAMC,YAAY,GAAGC,iBAAK,CAACR,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;EAEvC,oBACES,KAAA,CAAAC,aAAA,CAACC,2CAAwB,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACvBC,IAAAA,GAAG,EAAER,YAAa;AAClBb,IAAAA,IAAI,EAAEA,IAAK;AACXM,IAAAA,KAAK,EAAEA,KAAM;AACbH,IAAAA,OAAO,EAAEA,OAAQ;AACjBmB,IAAAA,IAAI,EAAC,aAAa;AAClB,IAAA,eAAA,EAAc,GAAG;AACjB,IAAA,eAAA,EAAc,GAAG;IACjB,eAAeR,EAAAA,YAAAA;AAAa,GAAA,EACxBF,IAAI,CAERI,eAAAA,KAAA,CAAAC,aAAA,CAACM,0CAAuB,EAAA;AACtBpB,IAAAA,OAAO,EAAEA,OAAQ;AACjBI,IAAAA,KAAK,EAAEO,YAAa;AACpBU,IAAAA,SAAS,EAAEhB,eAAgB;AAC3BiB,IAAAA,aAAa,EAAEhB,mBAAoB;AACnCiB,IAAAA,KAAK,EAAEhB,WAAY;IACnB,aAAaC,EAAAA,YAAAA;AAAa,GAC3B,CACuB,CAAC,CAAA;AAE/B,CAAC,CAAC;;;;;"}
|
|
@@ -14,6 +14,7 @@ const getProgressBarActiveGradient = ({
|
|
|
14
14
|
}) => {
|
|
15
15
|
switch (variant) {
|
|
16
16
|
case ProgressBar_types.ProgressBarVariant.Green:
|
|
17
|
+
case ProgressBar_types.ProgressBarVariant.GreenAlt:
|
|
17
18
|
{
|
|
18
19
|
return FoundationStyledComponent.css`
|
|
19
20
|
background: linear-gradient(
|
|
@@ -36,16 +37,35 @@ const getProgressBarActiveGradient = ({
|
|
|
36
37
|
}
|
|
37
38
|
}
|
|
38
39
|
};
|
|
40
|
+
const getProgressBarBackgroundColor = ({
|
|
41
|
+
foundation,
|
|
42
|
+
variant
|
|
43
|
+
}) => {
|
|
44
|
+
switch (variant) {
|
|
45
|
+
case ProgressBar_types.ProgressBarVariant.GreenAlt:
|
|
46
|
+
{
|
|
47
|
+
return FoundationStyledComponent.css`
|
|
48
|
+
background-color: ${foundation?.theme?.['bgtxt-absolute-white-normal']};
|
|
49
|
+
`;
|
|
50
|
+
}
|
|
51
|
+
case ProgressBar_types.ProgressBarVariant.Green:
|
|
52
|
+
case ProgressBar_types.ProgressBarVariant.Monochrome:
|
|
53
|
+
default:
|
|
54
|
+
{
|
|
55
|
+
return FoundationStyledComponent.css`
|
|
56
|
+
background-color: ${foundation?.theme?.['bg-black-light']};
|
|
57
|
+
`;
|
|
58
|
+
}
|
|
59
|
+
}
|
|
60
|
+
};
|
|
39
61
|
const StyledProgressBarWrapper = /*#__PURE__*/FoundationStyledComponent.styled.div.withConfig({
|
|
40
62
|
displayName: "ProgressBarstyled__StyledProgressBarWrapper",
|
|
41
63
|
componentId: "sc-w8ljs-0"
|
|
42
|
-
})(["width:", ";height:", "px;
|
|
64
|
+
})(["width:", ";height:", "px;", " ", " ", ";", ""], ({
|
|
43
65
|
width
|
|
44
66
|
}) => styleUtils.toLength(width, '36px'), ({
|
|
45
67
|
size
|
|
46
|
-
}) => PROGRESS_BAR_HEIGHT[size], ({
|
|
47
|
-
foundation
|
|
48
|
-
}) => foundation?.theme?.['bg-black-light'], ({
|
|
68
|
+
}) => PROGRESS_BAR_HEIGHT[size], getProgressBarBackgroundColor, ({
|
|
49
69
|
foundation
|
|
50
70
|
}) => foundation?.rounding?.round3, ({
|
|
51
71
|
foundation
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.styled.js","sources":["../../../../src/components/ProgressBar/ProgressBar.styled.ts"],"sourcesContent":["import {\n type Foundation,\n css,\n styled,\n} from '~/src/foundation'\n\nimport { toLength } from '~/src/utils/styleUtils'\n\nimport type ProgressBarProps from './ProgressBar.types'\nimport {\n ProgressBarSize,\n ProgressBarVariant,\n} from './ProgressBar.types'\n\nconst PROGRESS_BAR_HEIGHT: Record<ProgressBarSize, number> = {\n [ProgressBarSize.S]: 4,\n [ProgressBarSize.M]: 6,\n}\n\ninterface
|
|
1
|
+
{"version":3,"file":"ProgressBar.styled.js","sources":["../../../../src/components/ProgressBar/ProgressBar.styled.ts"],"sourcesContent":["import {\n type Foundation,\n css,\n styled,\n} from '~/src/foundation'\n\nimport { toLength } from '~/src/utils/styleUtils'\n\nimport type ProgressBarProps from './ProgressBar.types'\nimport {\n ProgressBarSize,\n ProgressBarVariant,\n} from './ProgressBar.types'\n\nconst PROGRESS_BAR_HEIGHT: Record<ProgressBarSize, number> = {\n [ProgressBarSize.S]: 4,\n [ProgressBarSize.M]: 6,\n}\n\ninterface GetProgressBarStyleProps {\n foundation?: Foundation\n variant: ProgressBarVariant\n}\n\nconst getProgressBarActiveGradient = ({\n foundation,\n variant,\n}: GetProgressBarStyleProps) => {\n switch (variant) {\n case ProgressBarVariant.Green:\n case ProgressBarVariant.GreenAlt: {\n return css`\n background: linear-gradient(\n 90deg,\n ${foundation?.theme?.['bgtxt-green-normal']} 0%,\n ${foundation?.subTheme?.['bgtxt-green-normal']} 100%\n );\n `\n }\n case ProgressBarVariant.Monochrome:\n default: {\n return css`\n background: linear-gradient(\n 90deg,\n ${foundation?.theme?.['bg-black-light']} 0%,\n ${foundation?.theme?.['bg-black-dark']} 100%\n );\n `\n }\n }\n}\n\nconst getProgressBarBackgroundColor = ({\n foundation,\n variant,\n}: GetProgressBarStyleProps) => {\n switch (variant) {\n case ProgressBarVariant.GreenAlt: {\n return css`\n background-color: ${foundation?.theme?.['bgtxt-absolute-white-normal']};\n `\n }\n case ProgressBarVariant.Green:\n case ProgressBarVariant.Monochrome:\n default: {\n return css`\n background-color: ${foundation?.theme?.['bg-black-light']};\n `\n }\n }\n}\n\ninterface StyledProgressBarWrapperProps extends ProgressBarProps {\n size: NonNullable<ProgressBarProps['size']>\n width: NonNullable<ProgressBarProps['width']>\n variant: NonNullable<ProgressBarProps['variant']>\n}\n\nexport const StyledProgressBarWrapper = styled.div<StyledProgressBarWrapperProps>`\n width: ${({ width }) => toLength(width, '36px')};\n height: ${({ size }) => PROGRESS_BAR_HEIGHT[size]}px;\n\n ${getProgressBarBackgroundColor}\n ${({ foundation }) => foundation?.rounding?.round3}\n\n ${({ foundation }) => foundation?.transition?.getTransitionsCSS('width')};\n\n ${({ interpolation }) => interpolation}\n`\n\ninterface StyledProgressBarActiveProps extends ProgressBarProps {\n variant: NonNullable<ProgressBarProps['variant']>\n value: NonNullable<ProgressBarProps['value']>\n}\n\nexport const StyledProgressBarActive = styled.div<StyledProgressBarActiveProps>`\n width: ${({ value }) => value * 100}%;\n height: 100%;\n\n ${getProgressBarActiveGradient}\n ${({ foundation }) => foundation?.rounding?.round3}\n\n ${({ foundation }) => foundation?.transition?.getTransitionsCSS('width')};\n\n ${({ interpolation }) => interpolation}\n`\n"],"names":["PROGRESS_BAR_HEIGHT","ProgressBarSize","S","M","getProgressBarActiveGradient","foundation","variant","ProgressBarVariant","Green","GreenAlt","css","theme","subTheme","Monochrome","getProgressBarBackgroundColor","StyledProgressBarWrapper","styled","div","withConfig","displayName","componentId","width","toLength","size","rounding","round3","transition","getTransitionsCSS","interpolation","StyledProgressBarActive","value"],"mappings":";;;;;;AAcA,MAAMA,mBAAoD,GAAG;AAC3D,EAAA,CAACC,iCAAe,CAACC,CAAC,GAAG,CAAC;EACtB,CAACD,iCAAe,CAACE,CAAC,GAAG,CAAA;AACvB,CAAC,CAAA;AAOD,MAAMC,4BAA4B,GAAGA,CAAC;EACpCC,UAAU;AACVC,EAAAA,OAAAA;AACwB,CAAC,KAAK;AAC9B,EAAA,QAAQA,OAAO;IACb,KAAKC,oCAAkB,CAACC,KAAK,CAAA;IAC7B,KAAKD,oCAAkB,CAACE,QAAQ;AAAE,MAAA;AAChC,QAAA,OAAOC,6BAAI,CAAA;AACjB;AACA;AACA,UAAA,EAAYL,UAAU,EAAEM,KAAK,GAAG,oBAAoB,CAAE,CAAA;AACtD,UAAA,EAAYN,UAAU,EAAEO,QAAQ,GAAG,oBAAoB,CAAE,CAAA;AACzD;AACA,MAAO,CAAA,CAAA;AACH,OAAA;IACA,KAAKL,oCAAkB,CAACM,UAAU,CAAA;AAClC,IAAA;AAAS,MAAA;AACP,QAAA,OAAOH,6BAAI,CAAA;AACjB;AACA;AACA,UAAA,EAAYL,UAAU,EAAEM,KAAK,GAAG,gBAAgB,CAAE,CAAA;AAClD,UAAA,EAAYN,UAAU,EAAEM,KAAK,GAAG,eAAe,CAAE,CAAA;AACjD;AACA,MAAO,CAAA,CAAA;AACH,OAAA;AACF,GAAA;AACF,CAAC,CAAA;AAED,MAAMG,6BAA6B,GAAGA,CAAC;EACrCT,UAAU;AACVC,EAAAA,OAAAA;AACwB,CAAC,KAAK;AAC9B,EAAA,QAAQA,OAAO;IACb,KAAKC,oCAAkB,CAACE,QAAQ;AAAE,MAAA;AAChC,QAAA,OAAOC,6BAAI,CAAA;AACjB,0BAAA,EAA4BL,UAAU,EAAEM,KAAK,GAAG,6BAA6B,CAAE,CAAA;AAC/E,MAAO,CAAA,CAAA;AACH,OAAA;IACA,KAAKJ,oCAAkB,CAACC,KAAK,CAAA;IAC7B,KAAKD,oCAAkB,CAACM,UAAU,CAAA;AAClC,IAAA;AAAS,MAAA;AACP,QAAA,OAAOH,6BAAI,CAAA;AACjB,0BAAA,EAA4BL,UAAU,EAAEM,KAAK,GAAG,gBAAgB,CAAE,CAAA;AAClE,MAAO,CAAA,CAAA;AACH,OAAA;AACF,GAAA;AACF,CAAC,CAAA;MAQYI,wBAAwB,gBAAGC,gCAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,6CAAA;EAAAC,WAAA,EAAA,YAAA;AAAA,CAAA,CAAA,CAAA,CAAA,QAAA,EAAA,UAAA,EAAA,KAAA,EAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EACvC,CAAC;AAAEC,EAAAA,KAAAA;AAAM,CAAC,KAAKC,mBAAQ,CAACD,KAAK,EAAE,MAAM,CAAC,EACrC,CAAC;AAAEE,EAAAA,IAAAA;AAAK,CAAC,KAAKvB,mBAAmB,CAACuB,IAAI,CAAC,EAE/CT,6BAA6B,EAC7B,CAAC;AAAET,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEmB,QAAQ,EAAEC,MAAM,EAEhD,CAAC;AAAEpB,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEqB,UAAU,EAAEC,iBAAiB,CAAC,OAAO,CAAC,EAEtE,CAAC;AAAEC,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa,EACvC;MAOYC,uBAAuB,gBAAGb,gCAAM,CAACC,GAAG,CAAAC,UAAA,CAAA;EAAAC,WAAA,EAAA,4CAAA;EAAAC,WAAA,EAAA,YAAA;AAAA,CAAA,CAAA,CAAA,CAAA,QAAA,EAAA,gBAAA,EAAA,GAAA,EAAA,GAAA,EAAA,GAAA,EAAA,EAAA,CAAA,EACtC,CAAC;AAAEU,EAAAA,KAAAA;AAAM,CAAC,KAAKA,KAAK,GAAG,GAAG,EAGjC1B,4BAA4B,EAC5B,CAAC;AAAEC,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEmB,QAAQ,EAAEC,MAAM,EAEhD,CAAC;AAAEpB,EAAAA,UAAAA;AAAW,CAAC,KAAKA,UAAU,EAAEqB,UAAU,EAAEC,iBAAiB,CAAC,OAAO,CAAC,EAEtE,CAAC;AAAEC,EAAAA,aAAAA;AAAc,CAAC,KAAKA,aAAa;;;;;"}
|
|
@@ -7,6 +7,7 @@ let ProgressBarSize = /*#__PURE__*/function (ProgressBarSize) {
|
|
|
7
7
|
}({});
|
|
8
8
|
let ProgressBarVariant = /*#__PURE__*/function (ProgressBarVariant) {
|
|
9
9
|
ProgressBarVariant["Green"] = "green";
|
|
10
|
+
ProgressBarVariant["GreenAlt"] = "green-alt";
|
|
10
11
|
ProgressBarVariant["Monochrome"] = "monochrome";
|
|
11
12
|
return ProgressBarVariant;
|
|
12
13
|
}({});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.types.js","sources":["../../../../src/components/ProgressBar/ProgressBar.types.ts"],"sourcesContent":["import type {\n AdditionalStylableProps,\n AdditionalTestIdProps,\n BezierComponentProps,\n SizeProps,\n VariantProps,\n} from '~/src/types/ComponentProps'\n\nexport enum ProgressBarSize {\n M = 'm',\n S = 's',\n}\n\nexport enum ProgressBarVariant {\n Green = 'green',\n Monochrome = 'monochrome',\n}\n\ninterface ProgressBarOptions {\n /**\n * CSS Width of total progress bar.\n * If given value is number or doesn't end with proper unit, `defaultUnit` is suffixed to given value.\n *\n * @see src/utils/styleUtils.ts\n * @default 36\n */\n width?: number | string\n\n /**\n * Progress value in floating point number (between 0 and 1, inclusive).\n *\n * @default 0\n */\n value?: number\n}\n\nexport default interface ProgressBarProps extends\n BezierComponentProps,\n SizeProps<ProgressBarSize>,\n VariantProps<ProgressBarVariant>,\n AdditionalStylableProps<'active'>,\n AdditionalTestIdProps<'active'>,\n ProgressBarOptions {}\n"],"names":["ProgressBarSize","ProgressBarVariant"],"mappings":";;AAQYA,IAAAA,eAAe,0BAAfA,eAAe,EAAA;EAAfA,eAAe,CAAA,GAAA,CAAA,GAAA,GAAA,CAAA;EAAfA,eAAe,CAAA,GAAA,CAAA,GAAA,GAAA,CAAA;AAAA,EAAA,OAAfA,eAAe,CAAA;AAAA,CAAA,CAAA,EAAA,EAAA;AAKfC,IAAAA,kBAAkB,0BAAlBA,kBAAkB,EAAA;EAAlBA,kBAAkB,CAAA,OAAA,CAAA,GAAA,OAAA,CAAA;EAAlBA,kBAAkB,CAAA,YAAA,CAAA,GAAA,YAAA,CAAA;AAAA,EAAA,OAAlBA,kBAAkB,CAAA;AAAA,CAAA,CAAA,EAAA;;;;;"}
|
|
1
|
+
{"version":3,"file":"ProgressBar.types.js","sources":["../../../../src/components/ProgressBar/ProgressBar.types.ts"],"sourcesContent":["import type {\n AdditionalStylableProps,\n AdditionalTestIdProps,\n BezierComponentProps,\n SizeProps,\n VariantProps,\n} from '~/src/types/ComponentProps'\n\nexport enum ProgressBarSize {\n M = 'm',\n S = 's',\n}\n\nexport enum ProgressBarVariant {\n Green = 'green',\n GreenAlt = 'green-alt',\n Monochrome = 'monochrome',\n}\n\ninterface ProgressBarOptions {\n /**\n * CSS Width of total progress bar.\n * If given value is number or doesn't end with proper unit, `defaultUnit` is suffixed to given value.\n *\n * @see src/utils/styleUtils.ts\n * @default 36\n */\n width?: number | string\n\n /**\n * Progress value in floating point number (between 0 and 1, inclusive).\n *\n * @default 0\n */\n value?: number\n}\n\nexport default interface ProgressBarProps extends\n BezierComponentProps,\n SizeProps<ProgressBarSize>,\n VariantProps<ProgressBarVariant>,\n AdditionalStylableProps<'active'>,\n AdditionalTestIdProps<'active'>,\n ProgressBarOptions {}\n"],"names":["ProgressBarSize","ProgressBarVariant"],"mappings":";;AAQYA,IAAAA,eAAe,0BAAfA,eAAe,EAAA;EAAfA,eAAe,CAAA,GAAA,CAAA,GAAA,GAAA,CAAA;EAAfA,eAAe,CAAA,GAAA,CAAA,GAAA,GAAA,CAAA;AAAA,EAAA,OAAfA,eAAe,CAAA;AAAA,CAAA,CAAA,EAAA,EAAA;AAKfC,IAAAA,kBAAkB,0BAAlBA,kBAAkB,EAAA;EAAlBA,kBAAkB,CAAA,OAAA,CAAA,GAAA,OAAA,CAAA;EAAlBA,kBAAkB,CAAA,UAAA,CAAA,GAAA,WAAA,CAAA;EAAlBA,kBAAkB,CAAA,YAAA,CAAA,GAAA,YAAA,CAAA;AAAA,EAAA,OAAlBA,kBAAkB,CAAA;AAAA,CAAA,CAAA,EAAA;;;;;"}
|
|
@@ -22,6 +22,7 @@ const DarkTheme = {
|
|
|
22
22
|
'bg-black-light': index.Palette.white_12,
|
|
23
23
|
'bg-black-lighter': index.Palette.white_8,
|
|
24
24
|
'bg-black-lightest': index.Palette.white_5,
|
|
25
|
+
'bg-grey-darkest': index.Palette.white,
|
|
25
26
|
'bg-grey-dark': index.Palette.grey500,
|
|
26
27
|
'bg-grey-dim-lightest': index.Palette.grey850_80,
|
|
27
28
|
'bg-grey-light': index.Palette.grey700,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DarkTheme.js","sources":["../../../../../../src/foundation/Colors/Theme/presets/DarkTheme.ts"],"sourcesContent":["import { Palette } from '~/src/foundation/Colors/Palette'\nimport { type ThemeType } from '~/src/foundation/Colors/Theme'\n\nconst DarkTheme: ThemeType = {\n // Elevation Background\n 'bg-white-high': Palette.grey700,\n 'bg-white-normal': Palette.grey900,\n 'bg-white-low': Palette.grey800,\n\n // Layout Background\n 'bg-gnb': Palette.grey700_80,\n 'bg-navi': Palette.grey800_80,\n 'bg-header': Palette.grey800,\n 'bg-header-float': Palette.grey800_80,\n 'bg-lounge': Palette.grey800_90,\n\n // Mono Background\n 'bg-black-darkest': Palette.white_60,\n 'bg-black-darker': Palette.white_40,\n 'bg-black-dark': Palette.white_20,\n 'bg-black-light': Palette.white_12,\n 'bg-black-lighter': Palette.white_8,\n 'bg-black-lightest': Palette.white_5,\n\n 'bg-grey-dark': Palette.grey500,\n 'bg-grey-dim-lightest': Palette.grey850_80,\n 'bg-grey-light': Palette.grey700,\n 'bg-grey-lighter': Palette.grey800,\n 'bg-grey-lightest': Palette.grey850,\n\n 'bg-white-dim-dark': Palette.black_60,\n 'bg-white-dim-light': Palette.black_20,\n\n // Colorful text and background\n 'bgtxt-blue-dark': Palette.blue400,\n 'bgtxt-blue-normal': Palette.blue300,\n 'bgtxt-blue-light': Palette.blue300_40,\n 'bgtxt-blue-lighter': Palette.blue300_30,\n 'bgtxt-blue-lightest': Palette.blue300_20,\n\n 'bgtxt-cobalt-dark': Palette.cobalt400,\n 'bgtxt-cobalt-normal': Palette.cobalt300,\n 'bgtxt-cobalt-light': Palette.cobalt300_40,\n 'bgtxt-cobalt-lighter': Palette.cobalt300_30,\n 'bgtxt-cobalt-lightest': Palette.cobalt300_20,\n\n 'bgtxt-teal-dark': Palette.teal400,\n 'bgtxt-teal-normal': Palette.teal300,\n 'bgtxt-teal-light': Palette.teal300_40,\n 'bgtxt-teal-lighter': Palette.teal300_30,\n 'bgtxt-teal-lightest': Palette.teal300_20,\n\n 'bgtxt-green-dark': Palette.green400,\n 'bgtxt-green-normal': Palette.green300,\n 'bgtxt-green-light': Palette.green300_40,\n 'bgtxt-green-lighter': Palette.green300_30,\n 'bgtxt-green-lightest': Palette.green300_20,\n\n 'bgtxt-olive-dark': Palette.olive400,\n 'bgtxt-olive-normal': Palette.olive300,\n 'bgtxt-olive-light': Palette.olive300_40,\n 'bgtxt-olive-lighter': Palette.olive300_30,\n 'bgtxt-olive-lightest': Palette.olive300_20,\n\n 'bgtxt-yellow-dark': Palette.yellow400,\n 'bgtxt-yellow-normal': Palette.yellow300,\n 'bgtxt-yellow-light': Palette.yellow300_40,\n 'bgtxt-yellow-lighter': Palette.yellow300_30,\n 'bgtxt-yellow-lightest': Palette.yellow300_20,\n\n 'bgtxt-orange-dark': Palette.orange400,\n 'bgtxt-orange-normal': Palette.orange300,\n 'bgtxt-orange-light': Palette.orange300_40,\n 'bgtxt-orange-lighter': Palette.orange300_30,\n 'bgtxt-orange-lightest': Palette.orange300_20,\n\n 'bgtxt-red-dark': Palette.red400,\n 'bgtxt-red-normal': Palette.red300,\n 'bgtxt-red-light': Palette.red300_40,\n 'bgtxt-red-lighter': Palette.red300_30,\n 'bgtxt-red-lightest': Palette.red300_20,\n\n 'bgtxt-pink-dark': Palette.pink400,\n 'bgtxt-pink-normal': Palette.pink300,\n 'bgtxt-pink-light': Palette.pink300_40,\n 'bgtxt-pink-lighter': Palette.pink300_30,\n 'bgtxt-pink-lightest': Palette.pink300_20,\n\n 'bgtxt-purple-dark': Palette.purple400,\n 'bgtxt-purple-normal': Palette.purple300,\n 'bgtxt-purple-light': Palette.purple300_40,\n 'bgtxt-purple-lighter': Palette.purple300_30,\n 'bgtxt-purple-lightest': Palette.purple300_20,\n\n 'bgtxt-navy-dark': Palette.navy400,\n 'bgtxt-navy-normal': Palette.navy300,\n 'bgtxt-navy-light': Palette.navy300_40,\n 'bgtxt-navy-lighter': Palette.navy300_30,\n 'bgtxt-navy-lightest': Palette.navy300_20,\n\n // Text\n 'txt-black-pure': Palette.white,\n 'txt-black-darkest': Palette.white_80,\n 'txt-black-darker': Palette.white_60,\n 'txt-black-dark': Palette.white_40,\n 'txt-white-normal': Palette.grey900,\n\n // Mono-absolute text and background\n 'bgtxt-absolute-black-dark': Palette.black,\n 'bgtxt-absolute-black-normal': Palette.black_85,\n 'bgtxt-absolute-black-light': Palette.black_60,\n 'bgtxt-absolute-black-lighter': Palette.black_40,\n 'bgtxt-absolute-black-lightest': Palette.black_20,\n\n 'bgtxt-absolute-white-dark': Palette.white,\n 'bgtxt-absolute-white-normal': Palette.white_90,\n 'bgtxt-absolute-white-light': Palette.white_60,\n 'bgtxt-absolute-white-lighter': Palette.white_40,\n 'bgtxt-absolute-white-lightest': Palette.white_20,\n\n // Border\n 'bdr-black-dark': Palette.white_20,\n 'bdr-black-light': Palette.white_12,\n 'bdr-grey-light': Palette.grey700,\n 'bdr-white': Palette.grey700,\n\n // Shadow\n 'shdw-xlarge': Palette.black_60,\n 'shdw-large': Palette.black_40,\n 'shdw-medium': Palette.black_20,\n 'shdw-small': Palette.black_15,\n 'shdw-base': Palette.black_8,\n 'shdw-inner-base': Palette.white_8,\n}\n\nexport default DarkTheme\n"],"names":["DarkTheme","Palette","grey700","grey900","grey800","grey700_80","grey800_80","grey800_90","white_60","white_40","white_20","white_12","white_8","white_5","grey500","grey850_80","grey850","black_60","black_20","blue400","blue300","blue300_40","blue300_30","blue300_20","cobalt400","cobalt300","cobalt300_40","cobalt300_30","cobalt300_20","teal400","teal300","teal300_40","teal300_30","teal300_20","green400","green300","green300_40","green300_30","green300_20","olive400","olive300","olive300_40","olive300_30","olive300_20","yellow400","yellow300","yellow300_40","yellow300_30","yellow300_20","orange400","orange300","orange300_40","orange300_30","orange300_20","red400","red300","red300_40","red300_30","red300_20","pink400","pink300","pink300_40","pink300_30","pink300_20","purple400","purple300","purple300_40","purple300_30","purple300_20","navy400","navy300","navy300_40","navy300_30","navy300_20","
|
|
1
|
+
{"version":3,"file":"DarkTheme.js","sources":["../../../../../../src/foundation/Colors/Theme/presets/DarkTheme.ts"],"sourcesContent":["import { Palette } from '~/src/foundation/Colors/Palette'\nimport { type ThemeType } from '~/src/foundation/Colors/Theme'\n\nconst DarkTheme: ThemeType = {\n // Elevation Background\n 'bg-white-high': Palette.grey700,\n 'bg-white-normal': Palette.grey900,\n 'bg-white-low': Palette.grey800,\n\n // Layout Background\n 'bg-gnb': Palette.grey700_80,\n 'bg-navi': Palette.grey800_80,\n 'bg-header': Palette.grey800,\n 'bg-header-float': Palette.grey800_80,\n 'bg-lounge': Palette.grey800_90,\n\n // Mono Background\n 'bg-black-darkest': Palette.white_60,\n 'bg-black-darker': Palette.white_40,\n 'bg-black-dark': Palette.white_20,\n 'bg-black-light': Palette.white_12,\n 'bg-black-lighter': Palette.white_8,\n 'bg-black-lightest': Palette.white_5,\n\n 'bg-grey-darkest': Palette.white,\n 'bg-grey-dark': Palette.grey500,\n 'bg-grey-dim-lightest': Palette.grey850_80,\n 'bg-grey-light': Palette.grey700,\n 'bg-grey-lighter': Palette.grey800,\n 'bg-grey-lightest': Palette.grey850,\n\n 'bg-white-dim-dark': Palette.black_60,\n 'bg-white-dim-light': Palette.black_20,\n\n // Colorful text and background\n 'bgtxt-blue-dark': Palette.blue400,\n 'bgtxt-blue-normal': Palette.blue300,\n 'bgtxt-blue-light': Palette.blue300_40,\n 'bgtxt-blue-lighter': Palette.blue300_30,\n 'bgtxt-blue-lightest': Palette.blue300_20,\n\n 'bgtxt-cobalt-dark': Palette.cobalt400,\n 'bgtxt-cobalt-normal': Palette.cobalt300,\n 'bgtxt-cobalt-light': Palette.cobalt300_40,\n 'bgtxt-cobalt-lighter': Palette.cobalt300_30,\n 'bgtxt-cobalt-lightest': Palette.cobalt300_20,\n\n 'bgtxt-teal-dark': Palette.teal400,\n 'bgtxt-teal-normal': Palette.teal300,\n 'bgtxt-teal-light': Palette.teal300_40,\n 'bgtxt-teal-lighter': Palette.teal300_30,\n 'bgtxt-teal-lightest': Palette.teal300_20,\n\n 'bgtxt-green-dark': Palette.green400,\n 'bgtxt-green-normal': Palette.green300,\n 'bgtxt-green-light': Palette.green300_40,\n 'bgtxt-green-lighter': Palette.green300_30,\n 'bgtxt-green-lightest': Palette.green300_20,\n\n 'bgtxt-olive-dark': Palette.olive400,\n 'bgtxt-olive-normal': Palette.olive300,\n 'bgtxt-olive-light': Palette.olive300_40,\n 'bgtxt-olive-lighter': Palette.olive300_30,\n 'bgtxt-olive-lightest': Palette.olive300_20,\n\n 'bgtxt-yellow-dark': Palette.yellow400,\n 'bgtxt-yellow-normal': Palette.yellow300,\n 'bgtxt-yellow-light': Palette.yellow300_40,\n 'bgtxt-yellow-lighter': Palette.yellow300_30,\n 'bgtxt-yellow-lightest': Palette.yellow300_20,\n\n 'bgtxt-orange-dark': Palette.orange400,\n 'bgtxt-orange-normal': Palette.orange300,\n 'bgtxt-orange-light': Palette.orange300_40,\n 'bgtxt-orange-lighter': Palette.orange300_30,\n 'bgtxt-orange-lightest': Palette.orange300_20,\n\n 'bgtxt-red-dark': Palette.red400,\n 'bgtxt-red-normal': Palette.red300,\n 'bgtxt-red-light': Palette.red300_40,\n 'bgtxt-red-lighter': Palette.red300_30,\n 'bgtxt-red-lightest': Palette.red300_20,\n\n 'bgtxt-pink-dark': Palette.pink400,\n 'bgtxt-pink-normal': Palette.pink300,\n 'bgtxt-pink-light': Palette.pink300_40,\n 'bgtxt-pink-lighter': Palette.pink300_30,\n 'bgtxt-pink-lightest': Palette.pink300_20,\n\n 'bgtxt-purple-dark': Palette.purple400,\n 'bgtxt-purple-normal': Palette.purple300,\n 'bgtxt-purple-light': Palette.purple300_40,\n 'bgtxt-purple-lighter': Palette.purple300_30,\n 'bgtxt-purple-lightest': Palette.purple300_20,\n\n 'bgtxt-navy-dark': Palette.navy400,\n 'bgtxt-navy-normal': Palette.navy300,\n 'bgtxt-navy-light': Palette.navy300_40,\n 'bgtxt-navy-lighter': Palette.navy300_30,\n 'bgtxt-navy-lightest': Palette.navy300_20,\n\n // Text\n 'txt-black-pure': Palette.white,\n 'txt-black-darkest': Palette.white_80,\n 'txt-black-darker': Palette.white_60,\n 'txt-black-dark': Palette.white_40,\n 'txt-white-normal': Palette.grey900,\n\n // Mono-absolute text and background\n 'bgtxt-absolute-black-dark': Palette.black,\n 'bgtxt-absolute-black-normal': Palette.black_85,\n 'bgtxt-absolute-black-light': Palette.black_60,\n 'bgtxt-absolute-black-lighter': Palette.black_40,\n 'bgtxt-absolute-black-lightest': Palette.black_20,\n\n 'bgtxt-absolute-white-dark': Palette.white,\n 'bgtxt-absolute-white-normal': Palette.white_90,\n 'bgtxt-absolute-white-light': Palette.white_60,\n 'bgtxt-absolute-white-lighter': Palette.white_40,\n 'bgtxt-absolute-white-lightest': Palette.white_20,\n\n // Border\n 'bdr-black-dark': Palette.white_20,\n 'bdr-black-light': Palette.white_12,\n 'bdr-grey-light': Palette.grey700,\n 'bdr-white': Palette.grey700,\n\n // Shadow\n 'shdw-xlarge': Palette.black_60,\n 'shdw-large': Palette.black_40,\n 'shdw-medium': Palette.black_20,\n 'shdw-small': Palette.black_15,\n 'shdw-base': Palette.black_8,\n 'shdw-inner-base': Palette.white_8,\n}\n\nexport default DarkTheme\n"],"names":["DarkTheme","Palette","grey700","grey900","grey800","grey700_80","grey800_80","grey800_90","white_60","white_40","white_20","white_12","white_8","white_5","white","grey500","grey850_80","grey850","black_60","black_20","blue400","blue300","blue300_40","blue300_30","blue300_20","cobalt400","cobalt300","cobalt300_40","cobalt300_30","cobalt300_20","teal400","teal300","teal300_40","teal300_30","teal300_20","green400","green300","green300_40","green300_30","green300_20","olive400","olive300","olive300_40","olive300_30","olive300_20","yellow400","yellow300","yellow300_40","yellow300_30","yellow300_20","orange400","orange300","orange300_40","orange300_30","orange300_20","red400","red300","red300_40","red300_30","red300_20","pink400","pink300","pink300_40","pink300_30","pink300_20","purple400","purple300","purple300_40","purple300_30","purple300_20","navy400","navy300","navy300_40","navy300_30","navy300_20","white_80","black","black_85","black_40","white_90","black_15","black_8"],"mappings":"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"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.mjs","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import React, {\n type Ref,\n forwardRef,\n memo,\n} from 'react'\n\nimport { clamp } from '~/src/utils/numberUtils'\n\nimport type ProgressBarProps from './ProgressBar.types'\nimport {\n ProgressBarSize,\n ProgressBarVariant,\n} from './ProgressBar.types'\n\nimport {\n StyledProgressBarActive,\n StyledProgressBarWrapper,\n} from './ProgressBar.styled'\n\nexport const PROGRESS_BAR_ACTIVE_TEST_ID = 'bezier-react-progress-bar-active'\n\nexport const ProgressBar = memo(forwardRef(function ProgressBar(\n {\n size = ProgressBarSize.M,\n variant = ProgressBarVariant.Green,\n width = 36,\n value = 0,\n activeClassName,\n activeInterpolation,\n activeStyle,\n activeTestId = PROGRESS_BAR_ACTIVE_TEST_ID,\n ...rest\n }: ProgressBarProps,\n forwardedRef: Ref<HTMLDivElement>,\n) {\n const clampedValue = clamp(value, 0, 1)\n\n return (\n <StyledProgressBarWrapper\n ref={forwardedRef}\n size={size}\n width={width}\n role=\"progressbar\"\n aria-valuemin=\"0\"\n aria-valuemax=\"1\"\n aria-valuenow={clampedValue}\n {...rest}\n >\n <StyledProgressBarActive\n variant={variant}\n value={clampedValue}\n className={activeClassName}\n interpolation={activeInterpolation}\n style={activeStyle}\n data-testid={activeTestId}\n />\n </StyledProgressBarWrapper>\n )\n}))\n"],"names":["PROGRESS_BAR_ACTIVE_TEST_ID","ProgressBar","memo","forwardRef","size","ProgressBarSize","M","variant","ProgressBarVariant","Green","width","value","activeClassName","activeInterpolation","activeStyle","activeTestId","rest","forwardedRef","clampedValue","clamp","React","createElement","StyledProgressBarWrapper","Object","assign","ref","role","StyledProgressBarActive","className","interpolation","style"],"mappings":";;;;;AAmBO,MAAMA,2BAA2B,GAAG,mCAAkC;AAEtE,MAAMC,WAAW,gBAAGC,IAAI,eAACC,UAAU,CAAC,SAASF,WAAWA,CAC7D;EACEG,IAAI,GAAGC,eAAe,CAACC,CAAC;EACxBC,OAAO,GAAGC,kBAAkB,CAACC,KAAK;AAClCC,EAAAA,KAAK,GAAG,EAAE;AACVC,EAAAA,KAAK,GAAG,CAAC;EACTC,eAAe;EACfC,mBAAmB;EACnBC,WAAW;AACXC,EAAAA,YAAY,GAAGf,2BAA2B;EAC1C,GAAGgB,IAAAA;AACa,CAAC,EACnBC,YAAiC,EACjC;EACA,MAAMC,YAAY,GAAGC,KAAK,CAACR,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;EAEvC,oBACES,cAAA,CAAAC,aAAA,CAACC,wBAAwB,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACvBC,IAAAA,GAAG,EAAER,YAAa;AAClBb,IAAAA,IAAI,EAAEA,IAAK;AACXM,IAAAA,KAAK,EAAEA,KAAM;
|
|
1
|
+
{"version":3,"file":"ProgressBar.mjs","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"sourcesContent":["import React, {\n type Ref,\n forwardRef,\n memo,\n} from 'react'\n\nimport { clamp } from '~/src/utils/numberUtils'\n\nimport type ProgressBarProps from './ProgressBar.types'\nimport {\n ProgressBarSize,\n ProgressBarVariant,\n} from './ProgressBar.types'\n\nimport {\n StyledProgressBarActive,\n StyledProgressBarWrapper,\n} from './ProgressBar.styled'\n\nexport const PROGRESS_BAR_ACTIVE_TEST_ID = 'bezier-react-progress-bar-active'\n\nexport const ProgressBar = memo(forwardRef(function ProgressBar(\n {\n size = ProgressBarSize.M,\n variant = ProgressBarVariant.Green,\n width = 36,\n value = 0,\n activeClassName,\n activeInterpolation,\n activeStyle,\n activeTestId = PROGRESS_BAR_ACTIVE_TEST_ID,\n ...rest\n }: ProgressBarProps,\n forwardedRef: Ref<HTMLDivElement>,\n) {\n const clampedValue = clamp(value, 0, 1)\n\n return (\n <StyledProgressBarWrapper\n ref={forwardedRef}\n size={size}\n width={width}\n variant={variant}\n role=\"progressbar\"\n aria-valuemin=\"0\"\n aria-valuemax=\"1\"\n aria-valuenow={clampedValue}\n {...rest}\n >\n <StyledProgressBarActive\n variant={variant}\n value={clampedValue}\n className={activeClassName}\n interpolation={activeInterpolation}\n style={activeStyle}\n data-testid={activeTestId}\n />\n </StyledProgressBarWrapper>\n )\n}))\n"],"names":["PROGRESS_BAR_ACTIVE_TEST_ID","ProgressBar","memo","forwardRef","size","ProgressBarSize","M","variant","ProgressBarVariant","Green","width","value","activeClassName","activeInterpolation","activeStyle","activeTestId","rest","forwardedRef","clampedValue","clamp","React","createElement","StyledProgressBarWrapper","Object","assign","ref","role","StyledProgressBarActive","className","interpolation","style"],"mappings":";;;;;AAmBO,MAAMA,2BAA2B,GAAG,mCAAkC;AAEtE,MAAMC,WAAW,gBAAGC,IAAI,eAACC,UAAU,CAAC,SAASF,WAAWA,CAC7D;EACEG,IAAI,GAAGC,eAAe,CAACC,CAAC;EACxBC,OAAO,GAAGC,kBAAkB,CAACC,KAAK;AAClCC,EAAAA,KAAK,GAAG,EAAE;AACVC,EAAAA,KAAK,GAAG,CAAC;EACTC,eAAe;EACfC,mBAAmB;EACnBC,WAAW;AACXC,EAAAA,YAAY,GAAGf,2BAA2B;EAC1C,GAAGgB,IAAAA;AACa,CAAC,EACnBC,YAAiC,EACjC;EACA,MAAMC,YAAY,GAAGC,KAAK,CAACR,KAAK,EAAE,CAAC,EAAE,CAAC,CAAC,CAAA;EAEvC,oBACES,cAAA,CAAAC,aAAA,CAACC,wBAAwB,EAAAC,MAAA,CAAAC,MAAA,CAAA;AACvBC,IAAAA,GAAG,EAAER,YAAa;AAClBb,IAAAA,IAAI,EAAEA,IAAK;AACXM,IAAAA,KAAK,EAAEA,KAAM;AACbH,IAAAA,OAAO,EAAEA,OAAQ;AACjBmB,IAAAA,IAAI,EAAC,aAAa;AAClB,IAAA,eAAA,EAAc,GAAG;AACjB,IAAA,eAAA,EAAc,GAAG;IACjB,eAAeR,EAAAA,YAAAA;AAAa,GAAA,EACxBF,IAAI,CAERI,eAAAA,cAAA,CAAAC,aAAA,CAACM,uBAAuB,EAAA;AACtBpB,IAAAA,OAAO,EAAEA,OAAQ;AACjBI,IAAAA,KAAK,EAAEO,YAAa;AACpBU,IAAAA,SAAS,EAAEhB,eAAgB;AAC3BiB,IAAAA,aAAa,EAAEhB,mBAAoB;AACnCiB,IAAAA,KAAK,EAAEhB,WAAY;IACnB,aAAaC,EAAAA,YAAAA;AAAa,GAC3B,CACuB,CAAC,CAAA;AAE/B,CAAC,CAAC;;;;"}
|
|
@@ -12,6 +12,7 @@ const getProgressBarActiveGradient = ({
|
|
|
12
12
|
}) => {
|
|
13
13
|
switch (variant) {
|
|
14
14
|
case ProgressBarVariant.Green:
|
|
15
|
+
case ProgressBarVariant.GreenAlt:
|
|
15
16
|
{
|
|
16
17
|
return FoundationCSS`
|
|
17
18
|
background: linear-gradient(
|
|
@@ -34,16 +35,35 @@ const getProgressBarActiveGradient = ({
|
|
|
34
35
|
}
|
|
35
36
|
}
|
|
36
37
|
};
|
|
38
|
+
const getProgressBarBackgroundColor = ({
|
|
39
|
+
foundation,
|
|
40
|
+
variant
|
|
41
|
+
}) => {
|
|
42
|
+
switch (variant) {
|
|
43
|
+
case ProgressBarVariant.GreenAlt:
|
|
44
|
+
{
|
|
45
|
+
return FoundationCSS`
|
|
46
|
+
background-color: ${foundation?.theme?.['bgtxt-absolute-white-normal']};
|
|
47
|
+
`;
|
|
48
|
+
}
|
|
49
|
+
case ProgressBarVariant.Green:
|
|
50
|
+
case ProgressBarVariant.Monochrome:
|
|
51
|
+
default:
|
|
52
|
+
{
|
|
53
|
+
return FoundationCSS`
|
|
54
|
+
background-color: ${foundation?.theme?.['bg-black-light']};
|
|
55
|
+
`;
|
|
56
|
+
}
|
|
57
|
+
}
|
|
58
|
+
};
|
|
37
59
|
const StyledProgressBarWrapper = /*#__PURE__*/FoundationStyled.div.withConfig({
|
|
38
60
|
displayName: "ProgressBarstyled__StyledProgressBarWrapper",
|
|
39
61
|
componentId: "sc-w8ljs-0"
|
|
40
|
-
})(["width:", ";height:", "px;
|
|
62
|
+
})(["width:", ";height:", "px;", " ", " ", ";", ""], ({
|
|
41
63
|
width
|
|
42
64
|
}) => toLength(width, '36px'), ({
|
|
43
65
|
size
|
|
44
|
-
}) => PROGRESS_BAR_HEIGHT[size], ({
|
|
45
|
-
foundation
|
|
46
|
-
}) => foundation?.theme?.['bg-black-light'], ({
|
|
66
|
+
}) => PROGRESS_BAR_HEIGHT[size], getProgressBarBackgroundColor, ({
|
|
47
67
|
foundation
|
|
48
68
|
}) => foundation?.rounding?.round3, ({
|
|
49
69
|
foundation
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.styled.mjs","sources":["../../../../src/components/ProgressBar/ProgressBar.styled.ts"],"sourcesContent":["import {\n type Foundation,\n css,\n styled,\n} from '~/src/foundation'\n\nimport { toLength } from '~/src/utils/styleUtils'\n\nimport type ProgressBarProps from './ProgressBar.types'\nimport {\n ProgressBarSize,\n ProgressBarVariant,\n} from './ProgressBar.types'\n\nconst PROGRESS_BAR_HEIGHT: Record<ProgressBarSize, number> = {\n [ProgressBarSize.S]: 4,\n [ProgressBarSize.M]: 6,\n}\n\ninterface
|
|
1
|
+
{"version":3,"file":"ProgressBar.styled.mjs","sources":["../../../../src/components/ProgressBar/ProgressBar.styled.ts"],"sourcesContent":["import {\n type Foundation,\n css,\n styled,\n} from '~/src/foundation'\n\nimport { toLength } from '~/src/utils/styleUtils'\n\nimport type ProgressBarProps from './ProgressBar.types'\nimport {\n ProgressBarSize,\n ProgressBarVariant,\n} from './ProgressBar.types'\n\nconst PROGRESS_BAR_HEIGHT: Record<ProgressBarSize, number> = {\n [ProgressBarSize.S]: 4,\n [ProgressBarSize.M]: 6,\n}\n\ninterface GetProgressBarStyleProps {\n foundation?: Foundation\n variant: ProgressBarVariant\n}\n\nconst getProgressBarActiveGradient = ({\n foundation,\n variant,\n}: GetProgressBarStyleProps) => {\n switch (variant) {\n case ProgressBarVariant.Green:\n case ProgressBarVariant.GreenAlt: {\n return css`\n background: linear-gradient(\n 90deg,\n ${foundation?.theme?.['bgtxt-green-normal']} 0%,\n ${foundation?.subTheme?.['bgtxt-green-normal']} 100%\n );\n `\n }\n case ProgressBarVariant.Monochrome:\n default: {\n return css`\n background: linear-gradient(\n 90deg,\n ${foundation?.theme?.['bg-black-light']} 0%,\n ${foundation?.theme?.['bg-black-dark']} 100%\n );\n `\n }\n }\n}\n\nconst getProgressBarBackgroundColor = ({\n foundation,\n variant,\n}: GetProgressBarStyleProps) => {\n switch (variant) {\n case ProgressBarVariant.GreenAlt: {\n return css`\n background-color: ${foundation?.theme?.['bgtxt-absolute-white-normal']};\n `\n }\n case ProgressBarVariant.Green:\n case ProgressBarVariant.Monochrome:\n default: {\n return css`\n background-color: ${foundation?.theme?.['bg-black-light']};\n `\n }\n }\n}\n\ninterface StyledProgressBarWrapperProps extends ProgressBarProps {\n size: NonNullable<ProgressBarProps['size']>\n width: NonNullable<ProgressBarProps['width']>\n variant: NonNullable<ProgressBarProps['variant']>\n}\n\nexport const StyledProgressBarWrapper = styled.div<StyledProgressBarWrapperProps>`\n width: ${({ width }) => toLength(width, '36px')};\n height: ${({ size }) => PROGRESS_BAR_HEIGHT[size]}px;\n\n ${getProgressBarBackgroundColor}\n ${({ foundation }) => foundation?.rounding?.round3}\n\n ${({ foundation }) => foundation?.transition?.getTransitionsCSS('width')};\n\n ${({ interpolation }) => interpolation}\n`\n\ninterface StyledProgressBarActiveProps extends ProgressBarProps {\n variant: NonNullable<ProgressBarProps['variant']>\n value: NonNullable<ProgressBarProps['value']>\n}\n\nexport const StyledProgressBarActive = styled.div<StyledProgressBarActiveProps>`\n width: ${({ value }) => value * 100}%;\n height: 100%;\n\n ${getProgressBarActiveGradient}\n ${({ foundation }) => foundation?.rounding?.round3}\n\n ${({ foundation }) => foundation?.transition?.getTransitionsCSS('width')};\n\n ${({ interpolation }) => interpolation}\n`\n"],"names":["PROGRESS_BAR_HEIGHT","ProgressBarSize","S","M","getProgressBarActiveGradient","foundation","variant","ProgressBarVariant","Green","GreenAlt","css","theme","subTheme","Monochrome","getProgressBarBackgroundColor","StyledProgressBarWrapper","styled","div","withConfig","displayName","componentId","width","toLength","size","rounding","round3","transition","getTransitionsCSS","interpolation","StyledProgressBarActive","value"],"mappings":"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"}
|
|
@@ -5,6 +5,7 @@ let ProgressBarSize = /*#__PURE__*/function (ProgressBarSize) {
|
|
|
5
5
|
}({});
|
|
6
6
|
let ProgressBarVariant = /*#__PURE__*/function (ProgressBarVariant) {
|
|
7
7
|
ProgressBarVariant["Green"] = "green";
|
|
8
|
+
ProgressBarVariant["GreenAlt"] = "green-alt";
|
|
8
9
|
ProgressBarVariant["Monochrome"] = "monochrome";
|
|
9
10
|
return ProgressBarVariant;
|
|
10
11
|
}({});
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.types.mjs","sources":["../../../../src/components/ProgressBar/ProgressBar.types.ts"],"sourcesContent":["import type {\n AdditionalStylableProps,\n AdditionalTestIdProps,\n BezierComponentProps,\n SizeProps,\n VariantProps,\n} from '~/src/types/ComponentProps'\n\nexport enum ProgressBarSize {\n M = 'm',\n S = 's',\n}\n\nexport enum ProgressBarVariant {\n Green = 'green',\n Monochrome = 'monochrome',\n}\n\ninterface ProgressBarOptions {\n /**\n * CSS Width of total progress bar.\n * If given value is number or doesn't end with proper unit, `defaultUnit` is suffixed to given value.\n *\n * @see src/utils/styleUtils.ts\n * @default 36\n */\n width?: number | string\n\n /**\n * Progress value in floating point number (between 0 and 1, inclusive).\n *\n * @default 0\n */\n value?: number\n}\n\nexport default interface ProgressBarProps extends\n BezierComponentProps,\n SizeProps<ProgressBarSize>,\n VariantProps<ProgressBarVariant>,\n AdditionalStylableProps<'active'>,\n AdditionalTestIdProps<'active'>,\n ProgressBarOptions {}\n"],"names":["ProgressBarSize","ProgressBarVariant"],"mappings":"AAQYA,IAAAA,eAAe,0BAAfA,eAAe,EAAA;EAAfA,eAAe,CAAA,GAAA,CAAA,GAAA,GAAA,CAAA;EAAfA,eAAe,CAAA,GAAA,CAAA,GAAA,GAAA,CAAA;AAAA,EAAA,OAAfA,eAAe,CAAA;AAAA,CAAA,CAAA,EAAA,EAAA;AAKfC,IAAAA,kBAAkB,0BAAlBA,kBAAkB,EAAA;EAAlBA,kBAAkB,CAAA,OAAA,CAAA,GAAA,OAAA,CAAA;EAAlBA,kBAAkB,CAAA,YAAA,CAAA,GAAA,YAAA,CAAA;AAAA,EAAA,OAAlBA,kBAAkB,CAAA;AAAA,CAAA,CAAA,EAAA;;;;"}
|
|
1
|
+
{"version":3,"file":"ProgressBar.types.mjs","sources":["../../../../src/components/ProgressBar/ProgressBar.types.ts"],"sourcesContent":["import type {\n AdditionalStylableProps,\n AdditionalTestIdProps,\n BezierComponentProps,\n SizeProps,\n VariantProps,\n} from '~/src/types/ComponentProps'\n\nexport enum ProgressBarSize {\n M = 'm',\n S = 's',\n}\n\nexport enum ProgressBarVariant {\n Green = 'green',\n GreenAlt = 'green-alt',\n Monochrome = 'monochrome',\n}\n\ninterface ProgressBarOptions {\n /**\n * CSS Width of total progress bar.\n * If given value is number or doesn't end with proper unit, `defaultUnit` is suffixed to given value.\n *\n * @see src/utils/styleUtils.ts\n * @default 36\n */\n width?: number | string\n\n /**\n * Progress value in floating point number (between 0 and 1, inclusive).\n *\n * @default 0\n */\n value?: number\n}\n\nexport default interface ProgressBarProps extends\n BezierComponentProps,\n SizeProps<ProgressBarSize>,\n VariantProps<ProgressBarVariant>,\n AdditionalStylableProps<'active'>,\n AdditionalTestIdProps<'active'>,\n ProgressBarOptions {}\n"],"names":["ProgressBarSize","ProgressBarVariant"],"mappings":"AAQYA,IAAAA,eAAe,0BAAfA,eAAe,EAAA;EAAfA,eAAe,CAAA,GAAA,CAAA,GAAA,GAAA,CAAA;EAAfA,eAAe,CAAA,GAAA,CAAA,GAAA,GAAA,CAAA;AAAA,EAAA,OAAfA,eAAe,CAAA;AAAA,CAAA,CAAA,EAAA,EAAA;AAKfC,IAAAA,kBAAkB,0BAAlBA,kBAAkB,EAAA;EAAlBA,kBAAkB,CAAA,OAAA,CAAA,GAAA,OAAA,CAAA;EAAlBA,kBAAkB,CAAA,UAAA,CAAA,GAAA,WAAA,CAAA;EAAlBA,kBAAkB,CAAA,YAAA,CAAA,GAAA,YAAA,CAAA;AAAA,EAAA,OAAlBA,kBAAkB,CAAA;AAAA,CAAA,CAAA,EAAA;;;;"}
|
|
@@ -18,6 +18,7 @@ const DarkTheme = {
|
|
|
18
18
|
'bg-black-light': Palette.white_12,
|
|
19
19
|
'bg-black-lighter': Palette.white_8,
|
|
20
20
|
'bg-black-lightest': Palette.white_5,
|
|
21
|
+
'bg-grey-darkest': Palette.white,
|
|
21
22
|
'bg-grey-dark': Palette.grey500,
|
|
22
23
|
'bg-grey-dim-lightest': Palette.grey850_80,
|
|
23
24
|
'bg-grey-light': Palette.grey700,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DarkTheme.mjs","sources":["../../../../../../src/foundation/Colors/Theme/presets/DarkTheme.ts"],"sourcesContent":["import { Palette } from '~/src/foundation/Colors/Palette'\nimport { type ThemeType } from '~/src/foundation/Colors/Theme'\n\nconst DarkTheme: ThemeType = {\n // Elevation Background\n 'bg-white-high': Palette.grey700,\n 'bg-white-normal': Palette.grey900,\n 'bg-white-low': Palette.grey800,\n\n // Layout Background\n 'bg-gnb': Palette.grey700_80,\n 'bg-navi': Palette.grey800_80,\n 'bg-header': Palette.grey800,\n 'bg-header-float': Palette.grey800_80,\n 'bg-lounge': Palette.grey800_90,\n\n // Mono Background\n 'bg-black-darkest': Palette.white_60,\n 'bg-black-darker': Palette.white_40,\n 'bg-black-dark': Palette.white_20,\n 'bg-black-light': Palette.white_12,\n 'bg-black-lighter': Palette.white_8,\n 'bg-black-lightest': Palette.white_5,\n\n 'bg-grey-dark': Palette.grey500,\n 'bg-grey-dim-lightest': Palette.grey850_80,\n 'bg-grey-light': Palette.grey700,\n 'bg-grey-lighter': Palette.grey800,\n 'bg-grey-lightest': Palette.grey850,\n\n 'bg-white-dim-dark': Palette.black_60,\n 'bg-white-dim-light': Palette.black_20,\n\n // Colorful text and background\n 'bgtxt-blue-dark': Palette.blue400,\n 'bgtxt-blue-normal': Palette.blue300,\n 'bgtxt-blue-light': Palette.blue300_40,\n 'bgtxt-blue-lighter': Palette.blue300_30,\n 'bgtxt-blue-lightest': Palette.blue300_20,\n\n 'bgtxt-cobalt-dark': Palette.cobalt400,\n 'bgtxt-cobalt-normal': Palette.cobalt300,\n 'bgtxt-cobalt-light': Palette.cobalt300_40,\n 'bgtxt-cobalt-lighter': Palette.cobalt300_30,\n 'bgtxt-cobalt-lightest': Palette.cobalt300_20,\n\n 'bgtxt-teal-dark': Palette.teal400,\n 'bgtxt-teal-normal': Palette.teal300,\n 'bgtxt-teal-light': Palette.teal300_40,\n 'bgtxt-teal-lighter': Palette.teal300_30,\n 'bgtxt-teal-lightest': Palette.teal300_20,\n\n 'bgtxt-green-dark': Palette.green400,\n 'bgtxt-green-normal': Palette.green300,\n 'bgtxt-green-light': Palette.green300_40,\n 'bgtxt-green-lighter': Palette.green300_30,\n 'bgtxt-green-lightest': Palette.green300_20,\n\n 'bgtxt-olive-dark': Palette.olive400,\n 'bgtxt-olive-normal': Palette.olive300,\n 'bgtxt-olive-light': Palette.olive300_40,\n 'bgtxt-olive-lighter': Palette.olive300_30,\n 'bgtxt-olive-lightest': Palette.olive300_20,\n\n 'bgtxt-yellow-dark': Palette.yellow400,\n 'bgtxt-yellow-normal': Palette.yellow300,\n 'bgtxt-yellow-light': Palette.yellow300_40,\n 'bgtxt-yellow-lighter': Palette.yellow300_30,\n 'bgtxt-yellow-lightest': Palette.yellow300_20,\n\n 'bgtxt-orange-dark': Palette.orange400,\n 'bgtxt-orange-normal': Palette.orange300,\n 'bgtxt-orange-light': Palette.orange300_40,\n 'bgtxt-orange-lighter': Palette.orange300_30,\n 'bgtxt-orange-lightest': Palette.orange300_20,\n\n 'bgtxt-red-dark': Palette.red400,\n 'bgtxt-red-normal': Palette.red300,\n 'bgtxt-red-light': Palette.red300_40,\n 'bgtxt-red-lighter': Palette.red300_30,\n 'bgtxt-red-lightest': Palette.red300_20,\n\n 'bgtxt-pink-dark': Palette.pink400,\n 'bgtxt-pink-normal': Palette.pink300,\n 'bgtxt-pink-light': Palette.pink300_40,\n 'bgtxt-pink-lighter': Palette.pink300_30,\n 'bgtxt-pink-lightest': Palette.pink300_20,\n\n 'bgtxt-purple-dark': Palette.purple400,\n 'bgtxt-purple-normal': Palette.purple300,\n 'bgtxt-purple-light': Palette.purple300_40,\n 'bgtxt-purple-lighter': Palette.purple300_30,\n 'bgtxt-purple-lightest': Palette.purple300_20,\n\n 'bgtxt-navy-dark': Palette.navy400,\n 'bgtxt-navy-normal': Palette.navy300,\n 'bgtxt-navy-light': Palette.navy300_40,\n 'bgtxt-navy-lighter': Palette.navy300_30,\n 'bgtxt-navy-lightest': Palette.navy300_20,\n\n // Text\n 'txt-black-pure': Palette.white,\n 'txt-black-darkest': Palette.white_80,\n 'txt-black-darker': Palette.white_60,\n 'txt-black-dark': Palette.white_40,\n 'txt-white-normal': Palette.grey900,\n\n // Mono-absolute text and background\n 'bgtxt-absolute-black-dark': Palette.black,\n 'bgtxt-absolute-black-normal': Palette.black_85,\n 'bgtxt-absolute-black-light': Palette.black_60,\n 'bgtxt-absolute-black-lighter': Palette.black_40,\n 'bgtxt-absolute-black-lightest': Palette.black_20,\n\n 'bgtxt-absolute-white-dark': Palette.white,\n 'bgtxt-absolute-white-normal': Palette.white_90,\n 'bgtxt-absolute-white-light': Palette.white_60,\n 'bgtxt-absolute-white-lighter': Palette.white_40,\n 'bgtxt-absolute-white-lightest': Palette.white_20,\n\n // Border\n 'bdr-black-dark': Palette.white_20,\n 'bdr-black-light': Palette.white_12,\n 'bdr-grey-light': Palette.grey700,\n 'bdr-white': Palette.grey700,\n\n // Shadow\n 'shdw-xlarge': Palette.black_60,\n 'shdw-large': Palette.black_40,\n 'shdw-medium': Palette.black_20,\n 'shdw-small': Palette.black_15,\n 'shdw-base': Palette.black_8,\n 'shdw-inner-base': Palette.white_8,\n}\n\nexport default DarkTheme\n"],"names":["DarkTheme","Palette","grey700","grey900","grey800","grey700_80","grey800_80","grey800_90","white_60","white_40","white_20","white_12","white_8","white_5","grey500","grey850_80","grey850","black_60","black_20","blue400","blue300","blue300_40","blue300_30","blue300_20","cobalt400","cobalt300","cobalt300_40","cobalt300_30","cobalt300_20","teal400","teal300","teal300_40","teal300_30","teal300_20","green400","green300","green300_40","green300_30","green300_20","olive400","olive300","olive300_40","olive300_30","olive300_20","yellow400","yellow300","yellow300_40","yellow300_30","yellow300_20","orange400","orange300","orange300_40","orange300_30","orange300_20","red400","red300","red300_40","red300_30","red300_20","pink400","pink300","pink300_40","pink300_30","pink300_20","purple400","purple300","purple300_40","purple300_30","purple300_20","navy400","navy300","navy300_40","navy300_30","navy300_20","
|
|
1
|
+
{"version":3,"file":"DarkTheme.mjs","sources":["../../../../../../src/foundation/Colors/Theme/presets/DarkTheme.ts"],"sourcesContent":["import { Palette } from '~/src/foundation/Colors/Palette'\nimport { type ThemeType } from '~/src/foundation/Colors/Theme'\n\nconst DarkTheme: ThemeType = {\n // Elevation Background\n 'bg-white-high': Palette.grey700,\n 'bg-white-normal': Palette.grey900,\n 'bg-white-low': Palette.grey800,\n\n // Layout Background\n 'bg-gnb': Palette.grey700_80,\n 'bg-navi': Palette.grey800_80,\n 'bg-header': Palette.grey800,\n 'bg-header-float': Palette.grey800_80,\n 'bg-lounge': Palette.grey800_90,\n\n // Mono Background\n 'bg-black-darkest': Palette.white_60,\n 'bg-black-darker': Palette.white_40,\n 'bg-black-dark': Palette.white_20,\n 'bg-black-light': Palette.white_12,\n 'bg-black-lighter': Palette.white_8,\n 'bg-black-lightest': Palette.white_5,\n\n 'bg-grey-darkest': Palette.white,\n 'bg-grey-dark': Palette.grey500,\n 'bg-grey-dim-lightest': Palette.grey850_80,\n 'bg-grey-light': Palette.grey700,\n 'bg-grey-lighter': Palette.grey800,\n 'bg-grey-lightest': Palette.grey850,\n\n 'bg-white-dim-dark': Palette.black_60,\n 'bg-white-dim-light': Palette.black_20,\n\n // Colorful text and background\n 'bgtxt-blue-dark': Palette.blue400,\n 'bgtxt-blue-normal': Palette.blue300,\n 'bgtxt-blue-light': Palette.blue300_40,\n 'bgtxt-blue-lighter': Palette.blue300_30,\n 'bgtxt-blue-lightest': Palette.blue300_20,\n\n 'bgtxt-cobalt-dark': Palette.cobalt400,\n 'bgtxt-cobalt-normal': Palette.cobalt300,\n 'bgtxt-cobalt-light': Palette.cobalt300_40,\n 'bgtxt-cobalt-lighter': Palette.cobalt300_30,\n 'bgtxt-cobalt-lightest': Palette.cobalt300_20,\n\n 'bgtxt-teal-dark': Palette.teal400,\n 'bgtxt-teal-normal': Palette.teal300,\n 'bgtxt-teal-light': Palette.teal300_40,\n 'bgtxt-teal-lighter': Palette.teal300_30,\n 'bgtxt-teal-lightest': Palette.teal300_20,\n\n 'bgtxt-green-dark': Palette.green400,\n 'bgtxt-green-normal': Palette.green300,\n 'bgtxt-green-light': Palette.green300_40,\n 'bgtxt-green-lighter': Palette.green300_30,\n 'bgtxt-green-lightest': Palette.green300_20,\n\n 'bgtxt-olive-dark': Palette.olive400,\n 'bgtxt-olive-normal': Palette.olive300,\n 'bgtxt-olive-light': Palette.olive300_40,\n 'bgtxt-olive-lighter': Palette.olive300_30,\n 'bgtxt-olive-lightest': Palette.olive300_20,\n\n 'bgtxt-yellow-dark': Palette.yellow400,\n 'bgtxt-yellow-normal': Palette.yellow300,\n 'bgtxt-yellow-light': Palette.yellow300_40,\n 'bgtxt-yellow-lighter': Palette.yellow300_30,\n 'bgtxt-yellow-lightest': Palette.yellow300_20,\n\n 'bgtxt-orange-dark': Palette.orange400,\n 'bgtxt-orange-normal': Palette.orange300,\n 'bgtxt-orange-light': Palette.orange300_40,\n 'bgtxt-orange-lighter': Palette.orange300_30,\n 'bgtxt-orange-lightest': Palette.orange300_20,\n\n 'bgtxt-red-dark': Palette.red400,\n 'bgtxt-red-normal': Palette.red300,\n 'bgtxt-red-light': Palette.red300_40,\n 'bgtxt-red-lighter': Palette.red300_30,\n 'bgtxt-red-lightest': Palette.red300_20,\n\n 'bgtxt-pink-dark': Palette.pink400,\n 'bgtxt-pink-normal': Palette.pink300,\n 'bgtxt-pink-light': Palette.pink300_40,\n 'bgtxt-pink-lighter': Palette.pink300_30,\n 'bgtxt-pink-lightest': Palette.pink300_20,\n\n 'bgtxt-purple-dark': Palette.purple400,\n 'bgtxt-purple-normal': Palette.purple300,\n 'bgtxt-purple-light': Palette.purple300_40,\n 'bgtxt-purple-lighter': Palette.purple300_30,\n 'bgtxt-purple-lightest': Palette.purple300_20,\n\n 'bgtxt-navy-dark': Palette.navy400,\n 'bgtxt-navy-normal': Palette.navy300,\n 'bgtxt-navy-light': Palette.navy300_40,\n 'bgtxt-navy-lighter': Palette.navy300_30,\n 'bgtxt-navy-lightest': Palette.navy300_20,\n\n // Text\n 'txt-black-pure': Palette.white,\n 'txt-black-darkest': Palette.white_80,\n 'txt-black-darker': Palette.white_60,\n 'txt-black-dark': Palette.white_40,\n 'txt-white-normal': Palette.grey900,\n\n // Mono-absolute text and background\n 'bgtxt-absolute-black-dark': Palette.black,\n 'bgtxt-absolute-black-normal': Palette.black_85,\n 'bgtxt-absolute-black-light': Palette.black_60,\n 'bgtxt-absolute-black-lighter': Palette.black_40,\n 'bgtxt-absolute-black-lightest': Palette.black_20,\n\n 'bgtxt-absolute-white-dark': Palette.white,\n 'bgtxt-absolute-white-normal': Palette.white_90,\n 'bgtxt-absolute-white-light': Palette.white_60,\n 'bgtxt-absolute-white-lighter': Palette.white_40,\n 'bgtxt-absolute-white-lightest': Palette.white_20,\n\n // Border\n 'bdr-black-dark': Palette.white_20,\n 'bdr-black-light': Palette.white_12,\n 'bdr-grey-light': Palette.grey700,\n 'bdr-white': Palette.grey700,\n\n // Shadow\n 'shdw-xlarge': Palette.black_60,\n 'shdw-large': Palette.black_40,\n 'shdw-medium': Palette.black_20,\n 'shdw-small': Palette.black_15,\n 'shdw-base': Palette.black_8,\n 'shdw-inner-base': Palette.white_8,\n}\n\nexport default DarkTheme\n"],"names":["DarkTheme","Palette","grey700","grey900","grey800","grey700_80","grey800_80","grey800_90","white_60","white_40","white_20","white_12","white_8","white_5","white","grey500","grey850_80","grey850","black_60","black_20","blue400","blue300","blue300_40","blue300_30","blue300_20","cobalt400","cobalt300","cobalt300_40","cobalt300_30","cobalt300_20","teal400","teal300","teal300_40","teal300_30","teal300_20","green400","green300","green300_40","green300_30","green300_20","olive400","olive300","olive300_40","olive300_30","olive300_20","yellow400","yellow300","yellow300_40","yellow300_30","yellow300_20","orange400","orange300","orange300_40","orange300_30","orange300_20","red400","red300","red300_40","red300_30","red300_20","pink400","pink300","pink300_40","pink300_30","pink300_20","purple400","purple300","purple300_40","purple300_30","purple300_20","navy400","navy300","navy300_40","navy300_30","navy300_20","white_80","black","black_85","black_40","white_90","black_15","black_8"],"mappings":";;AAGA,MAAMA,SAAoB,GAAG;AAC3B;EACA,eAAe,EAAEC,OAAO,CAACC,OAAO;EAChC,iBAAiB,EAAED,OAAO,CAACE,OAAO;EAClC,cAAc,EAAEF,OAAO,CAACG,OAAO;AAE/B;EACA,QAAQ,EAAEH,OAAO,CAACI,UAAU;EAC5B,SAAS,EAAEJ,OAAO,CAACK,UAAU;EAC7B,WAAW,EAAEL,OAAO,CAACG,OAAO;EAC5B,iBAAiB,EAAEH,OAAO,CAACK,UAAU;EACrC,WAAW,EAAEL,OAAO,CAACM,UAAU;AAE/B;EACA,kBAAkB,EAAEN,OAAO,CAACO,QAAQ;EACpC,iBAAiB,EAAEP,OAAO,CAACQ,QAAQ;EACnC,eAAe,EAAER,OAAO,CAACS,QAAQ;EACjC,gBAAgB,EAAET,OAAO,CAACU,QAAQ;EAClC,kBAAkB,EAAEV,OAAO,CAACW,OAAO;EACnC,mBAAmB,EAAEX,OAAO,CAACY,OAAO;EAEpC,iBAAiB,EAAEZ,OAAO,CAACa,KAAK;EAChC,cAAc,EAAEb,OAAO,CAACc,OAAO;EAC/B,sBAAsB,EAAEd,OAAO,CAACe,UAAU;EAC1C,eAAe,EAAEf,OAAO,CAACC,OAAO;EAChC,iBAAiB,EAAED,OAAO,CAACG,OAAO;EAClC,kBAAkB,EAAEH,OAAO,CAACgB,OAAO;EAEnC,mBAAmB,EAAEhB,OAAO,CAACiB,QAAQ;EACrC,oBAAoB,EAAEjB,OAAO,CAACkB,QAAQ;AAEtC;EACA,iBAAiB,EAAElB,OAAO,CAACmB,OAAO;EAClC,mBAAmB,EAAEnB,OAAO,CAACoB,OAAO;EACpC,kBAAkB,EAAEpB,OAAO,CAACqB,UAAU;EACtC,oBAAoB,EAAErB,OAAO,CAACsB,UAAU;EACxC,qBAAqB,EAAEtB,OAAO,CAACuB,UAAU;EAEzC,mBAAmB,EAAEvB,OAAO,CAACwB,SAAS;EACtC,qBAAqB,EAAExB,OAAO,CAACyB,SAAS;EACxC,oBAAoB,EAAEzB,OAAO,CAAC0B,YAAY;EAC1C,sBAAsB,EAAE1B,OAAO,CAAC2B,YAAY;EAC5C,uBAAuB,EAAE3B,OAAO,CAAC4B,YAAY;EAE7C,iBAAiB,EAAE5B,OAAO,CAAC6B,OAAO;EAClC,mBAAmB,EAAE7B,OAAO,CAAC8B,OAAO;EACpC,kBAAkB,EAAE9B,OAAO,CAAC+B,UAAU;EACtC,oBAAoB,EAAE/B,OAAO,CAACgC,UAAU;EACxC,qBAAqB,EAAEhC,OAAO,CAACiC,UAAU;EAEzC,kBAAkB,EAAEjC,OAAO,CAACkC,QAAQ;EACpC,oBAAoB,EAAElC,OAAO,CAACmC,QAAQ;EACtC,mBAAmB,EAAEnC,OAAO,CAACoC,WAAW;EACxC,qBAAqB,EAAEpC,OAAO,CAACqC,WAAW;EAC1C,sBAAsB,EAAErC,OAAO,CAACsC,WAAW;EAE3C,kBAAkB,EAAEtC,OAAO,CAACuC,QAAQ;EACpC,oBAAoB,EAAEvC,OAAO,CAACwC,QAAQ;EACtC,mBAAmB,EAAExC,OAAO,CAACyC,WAAW;EACxC,qBAAqB,EAAEzC,OAAO,CAAC0C,WAAW;EAC1C,sBAAsB,EAAE1C,OAAO,CAAC2C,WAAW;EAE3C,mBAAmB,EAAE3C,OAAO,CAAC4C,SAAS;EACtC,qBAAqB,EAAE5C,OAAO,CAAC6C,SAAS;EACxC,oBAAoB,EAAE7C,OAAO,CAAC8C,YAAY;EAC1C,sBAAsB,EAAE9C,OAAO,CAAC+C,YAAY;EAC5C,uBAAuB,EAAE/C,OAAO,CAACgD,YAAY;EAE7C,mBAAmB,EAAEhD,OAAO,CAACiD,SAAS;EACtC,qBAAqB,EAAEjD,OAAO,CAACkD,SAAS;EACxC,oBAAoB,EAAElD,OAAO,CAACmD,YAAY;EAC1C,sBAAsB,EAAEnD,OAAO,CAACoD,YAAY;EAC5C,uBAAuB,EAAEpD,OAAO,CAACqD,YAAY;EAE7C,gBAAgB,EAAErD,OAAO,CAACsD,MAAM;EAChC,kBAAkB,EAAEtD,OAAO,CAACuD,MAAM;EAClC,iBAAiB,EAAEvD,OAAO,CAACwD,SAAS;EACpC,mBAAmB,EAAExD,OAAO,CAACyD,SAAS;EACtC,oBAAoB,EAAEzD,OAAO,CAAC0D,SAAS;EAEvC,iBAAiB,EAAE1D,OAAO,CAAC2D,OAAO;EAClC,mBAAmB,EAAE3D,OAAO,CAAC4D,OAAO;EACpC,kBAAkB,EAAE5D,OAAO,CAAC6D,UAAU;EACtC,oBAAoB,EAAE7D,OAAO,CAAC8D,UAAU;EACxC,qBAAqB,EAAE9D,OAAO,CAAC+D,UAAU;EAEzC,mBAAmB,EAAE/D,OAAO,CAACgE,SAAS;EACtC,qBAAqB,EAAEhE,OAAO,CAACiE,SAAS;EACxC,oBAAoB,EAAEjE,OAAO,CAACkE,YAAY;EAC1C,sBAAsB,EAAElE,OAAO,CAACmE,YAAY;EAC5C,uBAAuB,EAAEnE,OAAO,CAACoE,YAAY;EAE7C,iBAAiB,EAAEpE,OAAO,CAACqE,OAAO;EAClC,mBAAmB,EAAErE,OAAO,CAACsE,OAAO;EACpC,kBAAkB,EAAEtE,OAAO,CAACuE,UAAU;EACtC,oBAAoB,EAAEvE,OAAO,CAACwE,UAAU;EACxC,qBAAqB,EAAExE,OAAO,CAACyE,UAAU;AAEzC;EACA,gBAAgB,EAAEzE,OAAO,CAACa,KAAK;EAC/B,mBAAmB,EAAEb,OAAO,CAAC0E,QAAQ;EACrC,kBAAkB,EAAE1E,OAAO,CAACO,QAAQ;EACpC,gBAAgB,EAAEP,OAAO,CAACQ,QAAQ;EAClC,kBAAkB,EAAER,OAAO,CAACE,OAAO;AAEnC;EACA,2BAA2B,EAAEF,OAAO,CAAC2E,KAAK;EAC1C,6BAA6B,EAAE3E,OAAO,CAAC4E,QAAQ;EAC/C,4BAA4B,EAAE5E,OAAO,CAACiB,QAAQ;EAC9C,8BAA8B,EAAEjB,OAAO,CAAC6E,QAAQ;EAChD,+BAA+B,EAAE7E,OAAO,CAACkB,QAAQ;EAEjD,2BAA2B,EAAElB,OAAO,CAACa,KAAK;EAC1C,6BAA6B,EAAEb,OAAO,CAAC8E,QAAQ;EAC/C,4BAA4B,EAAE9E,OAAO,CAACO,QAAQ;EAC9C,8BAA8B,EAAEP,OAAO,CAACQ,QAAQ;EAChD,+BAA+B,EAAER,OAAO,CAACS,QAAQ;AAEjD;EACA,gBAAgB,EAAET,OAAO,CAACS,QAAQ;EAClC,iBAAiB,EAAET,OAAO,CAACU,QAAQ;EACnC,gBAAgB,EAAEV,OAAO,CAACC,OAAO;EACjC,WAAW,EAAED,OAAO,CAACC,OAAO;AAE5B;EACA,aAAa,EAAED,OAAO,CAACiB,QAAQ;EAC/B,YAAY,EAAEjB,OAAO,CAAC6E,QAAQ;EAC9B,aAAa,EAAE7E,OAAO,CAACkB,QAAQ;EAC/B,YAAY,EAAElB,OAAO,CAAC+E,QAAQ;EAC9B,WAAW,EAAE/E,OAAO,CAACgF,OAAO;EAC5B,iBAAiB,EAAEhF,OAAO,CAACW,OAAAA;AAC7B,CAAC,CAAA;AAED,kBAAeZ,SAAS;;;;"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAIN,MAAM,OAAO,CAAA;AAId,OAAO,KAAK,gBAAgB,MAAM,qBAAqB,CAAA;AAWvD,eAAO,MAAM,2BAA2B,qCAAqC,CAAA;AAE7E,eAAO,MAAM,WAAW,
|
|
1
|
+
{"version":3,"file":"ProgressBar.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressBar/ProgressBar.tsx"],"names":[],"mappings":"AAAA,OAAO,KAIN,MAAM,OAAO,CAAA;AAId,OAAO,KAAK,gBAAgB,MAAM,qBAAqB,CAAA;AAWvD,eAAO,MAAM,2BAA2B,qCAAqC,CAAA;AAE7E,eAAO,MAAM,WAAW,oHAsCrB,CAAA"}
|
|
@@ -3,6 +3,7 @@ import type ProgressBarProps from './ProgressBar.types';
|
|
|
3
3
|
interface StyledProgressBarWrapperProps extends ProgressBarProps {
|
|
4
4
|
size: NonNullable<ProgressBarProps['size']>;
|
|
5
5
|
width: NonNullable<ProgressBarProps['width']>;
|
|
6
|
+
variant: NonNullable<ProgressBarProps['variant']>;
|
|
6
7
|
}
|
|
7
8
|
export declare const StyledProgressBarWrapper: import("styled-components").StyledComponent<"div", Foundation, {
|
|
8
9
|
foundation?: Foundation | undefined;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressBar/ProgressBar.styled.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,UAAU,EAGhB,yBAAwB;AAIzB,OAAO,KAAK,gBAAgB,MAAM,qBAAqB,CAAA;
|
|
1
|
+
{"version":3,"file":"ProgressBar.styled.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressBar/ProgressBar.styled.ts"],"names":[],"mappings":"AAAA,OAAO,EACL,KAAK,UAAU,EAGhB,yBAAwB;AAIzB,OAAO,KAAK,gBAAgB,MAAM,qBAAqB,CAAA;AAgEvD,UAAU,6BAA8B,SAAQ,gBAAgB;IAC9D,IAAI,EAAE,WAAW,CAAC,gBAAgB,CAAC,MAAM,CAAC,CAAC,CAAA;IAC3C,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAA;IAC7C,OAAO,EAAE,WAAW,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC,CAAA;CAClD;AAED,eAAO,MAAM,wBAAwB;;yCAUpC,CAAA;AAED,UAAU,4BAA6B,SAAQ,gBAAgB;IAC7D,OAAO,EAAE,WAAW,CAAC,gBAAgB,CAAC,SAAS,CAAC,CAAC,CAAA;IACjD,KAAK,EAAE,WAAW,CAAC,gBAAgB,CAAC,OAAO,CAAC,CAAC,CAAA;CAC9C;AAED,eAAO,MAAM,uBAAuB;;wCAUnC,CAAA"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ProgressBar.types.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressBar/ProgressBar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,uBAAuB,EACvB,qBAAqB,EACrB,oBAAoB,EACpB,SAAS,EACT,YAAY,EACb,mCAAkC;AAEnC,oBAAY,eAAe;IACzB,CAAC,MAAM;IACP,CAAC,MAAM;CACR;AAED,oBAAY,kBAAkB;IAC5B,KAAK,UAAU;IACf,UAAU,eAAe;CAC1B;AAED,UAAU,kBAAkB;IAC1B;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAEvB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,CAAC,OAAO,WAAW,gBAAiB,SACxC,oBAAoB,EACpB,SAAS,CAAC,eAAe,CAAC,EAC1B,YAAY,CAAC,kBAAkB,CAAC,EAChC,uBAAuB,CAAC,QAAQ,CAAC,EACjC,qBAAqB,CAAC,QAAQ,CAAC,EAC/B,kBAAkB;CAAG"}
|
|
1
|
+
{"version":3,"file":"ProgressBar.types.d.ts","sourceRoot":"","sources":["../../../../src/components/ProgressBar/ProgressBar.types.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EACV,uBAAuB,EACvB,qBAAqB,EACrB,oBAAoB,EACpB,SAAS,EACT,YAAY,EACb,mCAAkC;AAEnC,oBAAY,eAAe;IACzB,CAAC,MAAM;IACP,CAAC,MAAM;CACR;AAED,oBAAY,kBAAkB;IAC5B,KAAK,UAAU;IACf,QAAQ,cAAc;IACtB,UAAU,eAAe;CAC1B;AAED,UAAU,kBAAkB;IAC1B;;;;;;OAMG;IACH,KAAK,CAAC,EAAE,MAAM,GAAG,MAAM,CAAA;IAEvB;;;;OAIG;IACH,KAAK,CAAC,EAAE,MAAM,CAAA;CACf;AAED,MAAM,CAAC,OAAO,WAAW,gBAAiB,SACxC,oBAAoB,EACpB,SAAS,CAAC,eAAe,CAAC,EAC1B,YAAY,CAAC,kBAAkB,CAAC,EAChC,uBAAuB,CAAC,QAAQ,CAAC,EACjC,qBAAqB,CAAC,QAAQ,CAAC,EAC/B,kBAAkB;CAAG"}
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"DarkTheme.d.ts","sourceRoot":"","sources":["../../../../../../src/foundation/Colors/Theme/presets/DarkTheme.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,WAAqC;AAE9D,QAAA,MAAM,SAAS,EAAE,
|
|
1
|
+
{"version":3,"file":"DarkTheme.d.ts","sourceRoot":"","sources":["../../../../../../src/foundation/Colors/Theme/presets/DarkTheme.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,KAAK,SAAS,EAAE,WAAqC;AAE9D,QAAA,MAAM,SAAS,EAAE,SAmIhB,CAAA;AAED,eAAe,SAAS,CAAA"}
|
package/package.json
CHANGED
|
@@ -47,9 +47,9 @@ S, M 2개의 size가 있으며, 기본값은 M입니다.
|
|
|
47
47
|
|
|
48
48
|
### Color
|
|
49
49
|
|
|
50
|
-
Green, Monochrome
|
|
50
|
+
Green, Monochrome, GreenAlt 3개의 color가 있으며, 기본값은 Green입니다.
|
|
51
51
|
|
|
52
|
-
`variant` prop을 통해 ProgressBar의
|
|
52
|
+
`variant` prop을 통해 ProgressBar의 색상을 선택할 수 있으며, `ProgressBarVariant` enum을 사용할 수 있습니다.
|
|
53
53
|
|
|
54
54
|
<Story id="components-progressbar--variant" />
|
|
55
55
|
|
|
@@ -343,6 +343,22 @@ export const Variant: Story<{}> = () => (
|
|
|
343
343
|
</StackItem>
|
|
344
344
|
</HStack>
|
|
345
345
|
</StackItem>
|
|
346
|
+
<StackItem>
|
|
347
|
+
<HStack spacing={8} align="center">
|
|
348
|
+
<StackItem>
|
|
349
|
+
<Text color="txt-black-darkest">green-alt</Text>
|
|
350
|
+
</StackItem>
|
|
351
|
+
<Spacer />
|
|
352
|
+
<StackItem>
|
|
353
|
+
<ProgressBar
|
|
354
|
+
size={ProgressBarSize.M}
|
|
355
|
+
variant={ProgressBarVariant.GreenAlt}
|
|
356
|
+
width={200}
|
|
357
|
+
value={0.5}
|
|
358
|
+
/>
|
|
359
|
+
</StackItem>
|
|
360
|
+
</HStack>
|
|
361
|
+
</StackItem>
|
|
346
362
|
</VStack>
|
|
347
363
|
)
|
|
348
364
|
|
|
@@ -17,7 +17,7 @@ const PROGRESS_BAR_HEIGHT: Record<ProgressBarSize, number> = {
|
|
|
17
17
|
[ProgressBarSize.M]: 6,
|
|
18
18
|
}
|
|
19
19
|
|
|
20
|
-
interface
|
|
20
|
+
interface GetProgressBarStyleProps {
|
|
21
21
|
foundation?: Foundation
|
|
22
22
|
variant: ProgressBarVariant
|
|
23
23
|
}
|
|
@@ -25,9 +25,10 @@ interface GetProgressBarActiveGradientProps {
|
|
|
25
25
|
const getProgressBarActiveGradient = ({
|
|
26
26
|
foundation,
|
|
27
27
|
variant,
|
|
28
|
-
}:
|
|
28
|
+
}: GetProgressBarStyleProps) => {
|
|
29
29
|
switch (variant) {
|
|
30
|
-
case ProgressBarVariant.Green:
|
|
30
|
+
case ProgressBarVariant.Green:
|
|
31
|
+
case ProgressBarVariant.GreenAlt: {
|
|
31
32
|
return css`
|
|
32
33
|
background: linear-gradient(
|
|
33
34
|
90deg,
|
|
@@ -49,16 +50,37 @@ const getProgressBarActiveGradient = ({
|
|
|
49
50
|
}
|
|
50
51
|
}
|
|
51
52
|
|
|
53
|
+
const getProgressBarBackgroundColor = ({
|
|
54
|
+
foundation,
|
|
55
|
+
variant,
|
|
56
|
+
}: GetProgressBarStyleProps) => {
|
|
57
|
+
switch (variant) {
|
|
58
|
+
case ProgressBarVariant.GreenAlt: {
|
|
59
|
+
return css`
|
|
60
|
+
background-color: ${foundation?.theme?.['bgtxt-absolute-white-normal']};
|
|
61
|
+
`
|
|
62
|
+
}
|
|
63
|
+
case ProgressBarVariant.Green:
|
|
64
|
+
case ProgressBarVariant.Monochrome:
|
|
65
|
+
default: {
|
|
66
|
+
return css`
|
|
67
|
+
background-color: ${foundation?.theme?.['bg-black-light']};
|
|
68
|
+
`
|
|
69
|
+
}
|
|
70
|
+
}
|
|
71
|
+
}
|
|
72
|
+
|
|
52
73
|
interface StyledProgressBarWrapperProps extends ProgressBarProps {
|
|
53
74
|
size: NonNullable<ProgressBarProps['size']>
|
|
54
75
|
width: NonNullable<ProgressBarProps['width']>
|
|
76
|
+
variant: NonNullable<ProgressBarProps['variant']>
|
|
55
77
|
}
|
|
56
78
|
|
|
57
79
|
export const StyledProgressBarWrapper = styled.div<StyledProgressBarWrapperProps>`
|
|
58
80
|
width: ${({ width }) => toLength(width, '36px')};
|
|
59
81
|
height: ${({ size }) => PROGRESS_BAR_HEIGHT[size]}px;
|
|
60
82
|
|
|
61
|
-
|
|
83
|
+
${getProgressBarBackgroundColor}
|
|
62
84
|
${({ foundation }) => foundation?.rounding?.round3}
|
|
63
85
|
|
|
64
86
|
${({ foundation }) => foundation?.transition?.getTransitionsCSS('width')};
|
|
@@ -66,11 +66,13 @@ describe('ProgressBar', () => {
|
|
|
66
66
|
|
|
67
67
|
describe('specify variant props', () => {
|
|
68
68
|
it('should render ProgressBar with variant Green', () => {
|
|
69
|
-
const { getByTestId } = renderComponent({
|
|
69
|
+
const { getByRole, getByTestId } = renderComponent({
|
|
70
70
|
variant: ProgressBarVariant.Green,
|
|
71
71
|
})
|
|
72
|
+
const progressBar = getByRole('progressbar')
|
|
72
73
|
const progressBarActive = getByTestId(PROGRESS_BAR_ACTIVE_TEST_ID)
|
|
73
74
|
|
|
75
|
+
expect(progressBar).toHaveStyle(`background-color: ${LightFoundation.theme['bg-black-light']}`)
|
|
74
76
|
expect(progressBarActive).toHaveStyle(`background: linear-gradient(
|
|
75
77
|
90deg,
|
|
76
78
|
${LightFoundation.theme['bgtxt-green-normal']} 0%,
|
|
@@ -79,17 +81,33 @@ describe('ProgressBar', () => {
|
|
|
79
81
|
})
|
|
80
82
|
|
|
81
83
|
it('should render ProgressBar with variant Monochrome', () => {
|
|
82
|
-
const { getByTestId } = renderComponent({
|
|
84
|
+
const { getByRole, getByTestId } = renderComponent({
|
|
83
85
|
variant: ProgressBarVariant.Monochrome,
|
|
84
86
|
})
|
|
87
|
+
const progressBar = getByRole('progressbar')
|
|
85
88
|
const progressBarActive = getByTestId(PROGRESS_BAR_ACTIVE_TEST_ID)
|
|
86
89
|
|
|
90
|
+
expect(progressBar).toHaveStyle(`background-color: ${LightFoundation.theme['bg-black-light']}`)
|
|
87
91
|
expect(progressBarActive).toHaveStyle(`background: linear-gradient(
|
|
88
92
|
90deg,
|
|
89
93
|
${LightFoundation.theme['bg-black-light']} 0%,
|
|
90
94
|
${LightFoundation.theme['bg-black-dark']} 100%
|
|
91
95
|
)`)
|
|
92
96
|
})
|
|
97
|
+
it('should render ProgressBar with variant GreenAlt', () => {
|
|
98
|
+
const { getByRole, getByTestId } = renderComponent({
|
|
99
|
+
variant: ProgressBarVariant.GreenAlt,
|
|
100
|
+
})
|
|
101
|
+
const progressBar = getByRole('progressbar')
|
|
102
|
+
const progressBarActive = getByTestId(PROGRESS_BAR_ACTIVE_TEST_ID)
|
|
103
|
+
|
|
104
|
+
expect(progressBar).toHaveStyle(`background-color: ${LightFoundation.theme['bgtxt-absolute-white-normal']}`)
|
|
105
|
+
expect(progressBarActive).toHaveStyle(`background: linear-gradient(
|
|
106
|
+
90deg,
|
|
107
|
+
${LightFoundation.theme['bgtxt-green-normal']} 0%,
|
|
108
|
+
${LightFoundation.subTheme?.['bgtxt-green-normal']} 100%
|
|
109
|
+
)`)
|
|
110
|
+
})
|
|
93
111
|
})
|
|
94
112
|
|
|
95
113
|
describe('specify width props', () => {
|
|
@@ -22,6 +22,7 @@ const DarkTheme: ThemeType = {
|
|
|
22
22
|
'bg-black-lighter': Palette.white_8,
|
|
23
23
|
'bg-black-lightest': Palette.white_5,
|
|
24
24
|
|
|
25
|
+
'bg-grey-darkest': Palette.white,
|
|
25
26
|
'bg-grey-dark': Palette.grey500,
|
|
26
27
|
'bg-grey-dim-lightest': Palette.grey850_80,
|
|
27
28
|
'bg-grey-light': Palette.grey700,
|