react-asc 23.0.0 → 23.1.0
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/components/ExpansionPanel/ExpansionPanel.d.ts +1 -0
- package/index.es.js +6 -5
- package/index.js +6 -5
- package/package.json +1 -1
- package/react-asc.scss +5 -0
|
@@ -3,6 +3,7 @@ export interface IExpansionPanelProps {
|
|
|
3
3
|
header: ReactNode;
|
|
4
4
|
children: ReactNode;
|
|
5
5
|
isExpanded?: boolean;
|
|
6
|
+
shadow?: boolean;
|
|
6
7
|
onChange?: (event: React.MouseEvent, isExpanded: boolean) => void;
|
|
7
8
|
}
|
|
8
9
|
export declare const ExpansionPanel: (props: IExpansionPanelProps) => JSX.Element;
|
package/index.es.js
CHANGED
|
@@ -571,7 +571,7 @@ const ButtonGroup = (props) => {
|
|
|
571
571
|
return (React.createElement("div", Object.assign({ className: getCssClasses(), role: "group" }, rest), children));
|
|
572
572
|
};
|
|
573
573
|
|
|
574
|
-
var css_248z$M = ".Breadcrumb-module_breadcrumb__-pvAn {\n display: flex;\n flex-wrap: wrap;\n padding: 0;\n
|
|
574
|
+
var css_248z$M = ".Breadcrumb-module_breadcrumb__-pvAn {\n display: flex;\n flex-wrap: wrap;\n padding: 0;\n list-style: none;\n margin: 0; }\n";
|
|
575
575
|
var styles$M = {"breadcrumb":"Breadcrumb-module_breadcrumb__-pvAn"};
|
|
576
576
|
styleInject(css_248z$M);
|
|
577
577
|
|
|
@@ -1660,12 +1660,12 @@ const ExpansionPanelHeader = (props) => {
|
|
|
1660
1660
|
React.createElement(Icon, null, isExpanded ? React.createElement(ChevronUpSolidIcon, null) : React.createElement(ChevronDownSolidIcon, null)))));
|
|
1661
1661
|
};
|
|
1662
1662
|
|
|
1663
|
-
var css_248z$n = ".ExpansionPanel-module_expansionPanel__m1yQq {\n background-color: var(--white);\n
|
|
1664
|
-
var styles$n = {"expansionPanel":"ExpansionPanel-module_expansionPanel__m1yQq","isExpanded":"ExpansionPanel-module_isExpanded__TS1ph"};
|
|
1663
|
+
var css_248z$n = ".ExpansionPanel-module_expansionPanel__m1yQq {\n background-color: var(--white);\n transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }\n .ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_shadow__zIjJ6 {\n box-shadow: var(--shadow); }\n .ExpansionPanel-module_expansionPanel__m1yQq:first-child {\n border-top-left-radius: 4px;\n border-top-right-radius: 4px; }\n .ExpansionPanel-module_expansionPanel__m1yQq:last-child {\n border-bottom-left-radius: 4px;\n border-bottom-right-radius: 4px; }\n .ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph:first-child {\n margin-top: 0; }\n .ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph:last-child {\n margin-bottom: 0; }\n";
|
|
1664
|
+
var styles$n = {"expansionPanel":"ExpansionPanel-module_expansionPanel__m1yQq","shadow":"ExpansionPanel-module_shadow__zIjJ6","isExpanded":"ExpansionPanel-module_isExpanded__TS1ph"};
|
|
1665
1665
|
styleInject(css_248z$n);
|
|
1666
1666
|
|
|
1667
1667
|
const ExpansionPanel = (props) => {
|
|
1668
|
-
const { header, children, isExpanded = false, onChange } = props;
|
|
1668
|
+
const { header, children, isExpanded = false, shadow, onChange } = props;
|
|
1669
1669
|
const [_isExpanded, setIsExpanded] = useState(false);
|
|
1670
1670
|
useEffect(() => {
|
|
1671
1671
|
setIsExpanded(isExpanded);
|
|
@@ -1676,6 +1676,7 @@ const ExpansionPanel = (props) => {
|
|
|
1676
1676
|
if (_isExpanded) {
|
|
1677
1677
|
cssClasses.push(styles$n.isExpanded);
|
|
1678
1678
|
}
|
|
1679
|
+
shadow && cssClasses.push(styles$n.shadow);
|
|
1679
1680
|
return cssClasses.filter(css => css).join(' ');
|
|
1680
1681
|
};
|
|
1681
1682
|
const handleClickHeader = (event) => {
|
|
@@ -2300,7 +2301,7 @@ const Stepper = (props) => {
|
|
|
2300
2301
|
React.createElement(StepperActions, { className: "mt-3", isFirstStep: activeIndex === 0, isStepOptional: isStepOptional(activeIndex), isCompleted: isLastStep(), onBack: handleBack, onSkip: handleSkip, onNext: handleNext, onReset: handleReset }))));
|
|
2301
2302
|
};
|
|
2302
2303
|
|
|
2303
|
-
var css_248z$8 = ".Typography-module_typography__sw-td {\n
|
|
2304
|
+
var css_248z$8 = ".Typography-module_typography__sw-td {\n font-family: var(--fontFamily);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis; }\n\nh1 {\n font-size: calc(1.375rem + 1.5vw); }\n\nh2 {\n font-size: calc(1.325rem + 0.9vw); }\n\nh3 {\n font-size: calc(1.3rem + 0.6vw); }\n\nh4 {\n font-size: calc(1.275rem + 0.3vw); }\n\nh5 {\n font-size: 1.25rem; }\n\nh6 {\n font-size: 1rem; }\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-weight: 500 !important;\n margin-top: 0;\n margin-bottom: 0.5rem;\n line-height: 1.2; }\n";
|
|
2304
2305
|
var styles$8 = {"typography":"Typography-module_typography__sw-td"};
|
|
2305
2306
|
styleInject(css_248z$8);
|
|
2306
2307
|
|
package/index.js
CHANGED
|
@@ -579,7 +579,7 @@ const ButtonGroup = (props) => {
|
|
|
579
579
|
return (React__default["default"].createElement("div", Object.assign({ className: getCssClasses(), role: "group" }, rest), children));
|
|
580
580
|
};
|
|
581
581
|
|
|
582
|
-
var css_248z$M = ".Breadcrumb-module_breadcrumb__-pvAn {\n display: flex;\n flex-wrap: wrap;\n padding: 0;\n
|
|
582
|
+
var css_248z$M = ".Breadcrumb-module_breadcrumb__-pvAn {\n display: flex;\n flex-wrap: wrap;\n padding: 0;\n list-style: none;\n margin: 0; }\n";
|
|
583
583
|
var styles$M = {"breadcrumb":"Breadcrumb-module_breadcrumb__-pvAn"};
|
|
584
584
|
styleInject(css_248z$M);
|
|
585
585
|
|
|
@@ -1668,12 +1668,12 @@ const ExpansionPanelHeader = (props) => {
|
|
|
1668
1668
|
React__default["default"].createElement(Icon, null, isExpanded ? React__default["default"].createElement(ChevronUpSolidIcon, null) : React__default["default"].createElement(ChevronDownSolidIcon, null)))));
|
|
1669
1669
|
};
|
|
1670
1670
|
|
|
1671
|
-
var css_248z$n = ".ExpansionPanel-module_expansionPanel__m1yQq {\n background-color: var(--white);\n
|
|
1672
|
-
var styles$n = {"expansionPanel":"ExpansionPanel-module_expansionPanel__m1yQq","isExpanded":"ExpansionPanel-module_isExpanded__TS1ph"};
|
|
1671
|
+
var css_248z$n = ".ExpansionPanel-module_expansionPanel__m1yQq {\n background-color: var(--white);\n transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out; }\n .ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_shadow__zIjJ6 {\n box-shadow: var(--shadow); }\n .ExpansionPanel-module_expansionPanel__m1yQq:first-child {\n border-top-left-radius: 4px;\n border-top-right-radius: 4px; }\n .ExpansionPanel-module_expansionPanel__m1yQq:last-child {\n border-bottom-left-radius: 4px;\n border-bottom-right-radius: 4px; }\n .ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph:first-child {\n margin-top: 0; }\n .ExpansionPanel-module_expansionPanel__m1yQq.ExpansionPanel-module_isExpanded__TS1ph:last-child {\n margin-bottom: 0; }\n";
|
|
1672
|
+
var styles$n = {"expansionPanel":"ExpansionPanel-module_expansionPanel__m1yQq","shadow":"ExpansionPanel-module_shadow__zIjJ6","isExpanded":"ExpansionPanel-module_isExpanded__TS1ph"};
|
|
1673
1673
|
styleInject(css_248z$n);
|
|
1674
1674
|
|
|
1675
1675
|
const ExpansionPanel = (props) => {
|
|
1676
|
-
const { header, children, isExpanded = false, onChange } = props;
|
|
1676
|
+
const { header, children, isExpanded = false, shadow, onChange } = props;
|
|
1677
1677
|
const [_isExpanded, setIsExpanded] = React.useState(false);
|
|
1678
1678
|
React.useEffect(() => {
|
|
1679
1679
|
setIsExpanded(isExpanded);
|
|
@@ -1684,6 +1684,7 @@ const ExpansionPanel = (props) => {
|
|
|
1684
1684
|
if (_isExpanded) {
|
|
1685
1685
|
cssClasses.push(styles$n.isExpanded);
|
|
1686
1686
|
}
|
|
1687
|
+
shadow && cssClasses.push(styles$n.shadow);
|
|
1687
1688
|
return cssClasses.filter(css => css).join(' ');
|
|
1688
1689
|
};
|
|
1689
1690
|
const handleClickHeader = (event) => {
|
|
@@ -2308,7 +2309,7 @@ const Stepper = (props) => {
|
|
|
2308
2309
|
React__default["default"].createElement(StepperActions, { className: "mt-3", isFirstStep: activeIndex === 0, isStepOptional: isStepOptional(activeIndex), isCompleted: isLastStep(), onBack: handleBack, onSkip: handleSkip, onNext: handleNext, onReset: handleReset }))));
|
|
2309
2310
|
};
|
|
2310
2311
|
|
|
2311
|
-
var css_248z$8 = ".Typography-module_typography__sw-td {\n
|
|
2312
|
+
var css_248z$8 = ".Typography-module_typography__sw-td {\n font-family: var(--fontFamily);\n white-space: nowrap;\n overflow: hidden;\n text-overflow: ellipsis; }\n\nh1 {\n font-size: calc(1.375rem + 1.5vw); }\n\nh2 {\n font-size: calc(1.325rem + 0.9vw); }\n\nh3 {\n font-size: calc(1.3rem + 0.6vw); }\n\nh4 {\n font-size: calc(1.275rem + 0.3vw); }\n\nh5 {\n font-size: 1.25rem; }\n\nh6 {\n font-size: 1rem; }\n\nh1,\nh2,\nh3,\nh4,\nh5,\nh6 {\n font-weight: 500 !important;\n margin-top: 0;\n margin-bottom: 0.5rem;\n line-height: 1.2; }\n";
|
|
2312
2313
|
var styles$8 = {"typography":"Typography-module_typography__sw-td"};
|
|
2313
2314
|
styleInject(css_248z$8);
|
|
2314
2315
|
|
package/package.json
CHANGED