@laerdal/life-react-components 2.3.1-dev.21.full → 2.3.1-dev.23.full
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/AuthPage/AuthPage.cjs +1 -1
- package/dist/AuthPage/AuthPage.cjs.map +1 -1
- package/dist/AuthPage/AuthPage.js +1 -1
- package/dist/AuthPage/AuthPage.js.map +1 -1
- package/dist/Panel/Panel.cjs +4 -4
- package/dist/Panel/Panel.cjs.map +1 -1
- package/dist/Panel/Panel.js +5 -5
- package/dist/Panel/Panel.js.map +1 -1
- package/package.json +1 -1
|
@@ -20,7 +20,7 @@ function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "functio
|
|
|
20
20
|
function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || _typeof(obj) !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
|
|
21
21
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
22
22
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
23
|
-
var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n\n .panel {\n flex: 1;\n display: none;\n }\n\n ", " {\n .panel {\n display: flex;\n }\n }\n\n &.reverse {\n flex-direction: row-reverse;\n }\n"])), _styles.BREAKPOINTS.MEDIUM);
|
|
23
|
+
var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n height: 100%;\n\n .panel {\n flex: 1;\n display: none;\n }\n\n ", " {\n .panel {\n display: flex;\n }\n }\n\n &.reverse {\n flex-direction: row-reverse;\n }\n"])), _styles.BREAKPOINTS.MEDIUM);
|
|
24
24
|
var AuthPage = function AuthPage(_ref) {
|
|
25
25
|
var screenSetsContainerId = _ref.screenSetsContainerId,
|
|
26
26
|
panel = _ref.panel,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AuthPage.cjs","names":["Wrapper","styled","div","BREAKPOINTS","MEDIUM","AuthPage","screenSetsContainerId","panel","order","className"],"sources":["../../src/AuthPage/AuthPage.tsx"],"sourcesContent":["import * as React from 'react';\nimport ScreenSetsContainer from './ScreenSetsContainer';\nimport styled from \"styled-components\";\nimport {Panel, PanelProps} from \"../Panel\";\nimport {BREAKPOINTS} from \"../styles\";\n\n\nconst Wrapper = styled.div`\n display: flex;\n align-items: center;\n\n .panel {\n flex: 1;\n display: none;\n }\n\n ${BREAKPOINTS.MEDIUM} {\n .panel {\n display: flex;\n }\n }\n\n &.reverse {\n flex-direction: row-reverse;\n }\n`;\n\ntype AuthPageProps = {\n panel?: PanelProps;\n order?: 'default' | 'reverse';\n screenSetsContainerId: string;\n};\n\nconst AuthPage = ({\n screenSetsContainerId,\n panel,\n order = 'default'\n }: AuthPageProps) => {\n return (\n <Wrapper className={order}>\n {\n panel && <Panel {...panel} order={order} className={`panel ${panel.className || ''}`}/>\n }\n <ScreenSetsContainer id={screenSetsContainerId} centerContents={!panel}/>\n </Wrapper>\n );\n};\n\nexport default AuthPage;\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAGtC,IAAMA,OAAO,GAAGC,yBAAM,CAACC,GAAG,
|
|
1
|
+
{"version":3,"file":"AuthPage.cjs","names":["Wrapper","styled","div","BREAKPOINTS","MEDIUM","AuthPage","screenSetsContainerId","panel","order","className"],"sources":["../../src/AuthPage/AuthPage.tsx"],"sourcesContent":["import * as React from 'react';\nimport ScreenSetsContainer from './ScreenSetsContainer';\nimport styled from \"styled-components\";\nimport {Panel, PanelProps} from \"../Panel\";\nimport {BREAKPOINTS} from \"../styles\";\n\n\nconst Wrapper = styled.div`\n display: flex;\n align-items: center;\n height: 100%;\n\n .panel {\n flex: 1;\n display: none;\n }\n\n ${BREAKPOINTS.MEDIUM} {\n .panel {\n display: flex;\n }\n }\n\n &.reverse {\n flex-direction: row-reverse;\n }\n`;\n\ntype AuthPageProps = {\n panel?: PanelProps;\n order?: 'default' | 'reverse';\n screenSetsContainerId: string;\n};\n\nconst AuthPage = ({\n screenSetsContainerId,\n panel,\n order = 'default'\n }: AuthPageProps) => {\n return (\n <Wrapper className={order}>\n {\n panel && <Panel {...panel} order={order} className={`panel ${panel.className || ''}`}/>\n }\n <ScreenSetsContainer id={screenSetsContainerId} centerContents={!panel}/>\n </Wrapper>\n );\n};\n\nexport default AuthPage;\n"],"mappings":";;;;;;;;;;;AAAA;AACA;AACA;AACA;AACA;AAAsC;AAAA;AAAA;AAAA;AAAA;AAAA;AAGtC,IAAMA,OAAO,GAAGC,yBAAM,CAACC,GAAG,0TAUtBC,mBAAW,CAACC,MAAM,CASrB;AAQD,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,OAIyB;EAAA,IAHnBC,qBAAqB,QAArBA,qBAAqB;IACrBC,KAAK,QAALA,KAAK;IAAA,kBACLC,KAAK;IAALA,KAAK,2BAAG,SAAS;EAEnC,oBACE,sBAAC,OAAO;IAAC,SAAS,EAAEA,KAAM;IAAA,WAEtBD,KAAK,iBAAI,qBAAC,YAAK,kCAAKA,KAAK;MAAE,KAAK,EAAEC,KAAM;MAAC,SAAS,kBAAWD,KAAK,CAACE,SAAS,IAAI,EAAE;IAAG,GAAE,eAEzF,qBAAC,4BAAmB;MAAC,EAAE,EAAEH,qBAAsB;MAAC,cAAc,EAAE,CAACC;IAAM,EAAE;EAAA,EACjE;AAEd,CAAC;AAAC;EAjBAC,KAAK,4BAAG,SAAS,EAAG,SAAS;EAC7BF,qBAAqB;AAAA;AAAA,eAkBRD,QAAQ;AAAA"}
|
|
@@ -11,7 +11,7 @@ import { Panel } from "../Panel";
|
|
|
11
11
|
import { BREAKPOINTS } from "../styles";
|
|
12
12
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
13
13
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
14
|
-
var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n\n .panel {\n flex: 1;\n display: none;\n }\n\n ", " {\n .panel {\n display: flex;\n }\n }\n\n &.reverse {\n flex-direction: row-reverse;\n }\n"])), BREAKPOINTS.MEDIUM);
|
|
14
|
+
var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n height: 100%;\n\n .panel {\n flex: 1;\n display: none;\n }\n\n ", " {\n .panel {\n display: flex;\n }\n }\n\n &.reverse {\n flex-direction: row-reverse;\n }\n"])), BREAKPOINTS.MEDIUM);
|
|
15
15
|
var AuthPage = function AuthPage(_ref) {
|
|
16
16
|
var screenSetsContainerId = _ref.screenSetsContainerId,
|
|
17
17
|
panel = _ref.panel,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AuthPage.js","names":["React","ScreenSetsContainer","styled","Panel","BREAKPOINTS","Wrapper","div","MEDIUM","AuthPage","screenSetsContainerId","panel","order","className"],"sources":["../../src/AuthPage/AuthPage.tsx"],"sourcesContent":["import * as React from 'react';\nimport ScreenSetsContainer from './ScreenSetsContainer';\nimport styled from \"styled-components\";\nimport {Panel, PanelProps} from \"../Panel\";\nimport {BREAKPOINTS} from \"../styles\";\n\n\nconst Wrapper = styled.div`\n display: flex;\n align-items: center;\n\n .panel {\n flex: 1;\n display: none;\n }\n\n ${BREAKPOINTS.MEDIUM} {\n .panel {\n display: flex;\n }\n }\n\n &.reverse {\n flex-direction: row-reverse;\n }\n`;\n\ntype AuthPageProps = {\n panel?: PanelProps;\n order?: 'default' | 'reverse';\n screenSetsContainerId: string;\n};\n\nconst AuthPage = ({\n screenSetsContainerId,\n panel,\n order = 'default'\n }: AuthPageProps) => {\n return (\n <Wrapper className={order}>\n {\n panel && <Panel {...panel} order={order} className={`panel ${panel.className || ''}`}/>\n }\n <ScreenSetsContainer id={screenSetsContainerId} centerContents={!panel}/>\n </Wrapper>\n );\n};\n\nexport default AuthPage;\n"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,mBAAmB,MAAM,uBAAuB;AACvD,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,KAAK,QAAmB,UAAU;AAC1C,SAAQC,WAAW,QAAO,WAAW;AAAC;AAAA;AAGtC,IAAMC,OAAO,GAAGH,MAAM,CAACI,GAAG,
|
|
1
|
+
{"version":3,"file":"AuthPage.js","names":["React","ScreenSetsContainer","styled","Panel","BREAKPOINTS","Wrapper","div","MEDIUM","AuthPage","screenSetsContainerId","panel","order","className"],"sources":["../../src/AuthPage/AuthPage.tsx"],"sourcesContent":["import * as React from 'react';\nimport ScreenSetsContainer from './ScreenSetsContainer';\nimport styled from \"styled-components\";\nimport {Panel, PanelProps} from \"../Panel\";\nimport {BREAKPOINTS} from \"../styles\";\n\n\nconst Wrapper = styled.div`\n display: flex;\n align-items: center;\n height: 100%;\n\n .panel {\n flex: 1;\n display: none;\n }\n\n ${BREAKPOINTS.MEDIUM} {\n .panel {\n display: flex;\n }\n }\n\n &.reverse {\n flex-direction: row-reverse;\n }\n`;\n\ntype AuthPageProps = {\n panel?: PanelProps;\n order?: 'default' | 'reverse';\n screenSetsContainerId: string;\n};\n\nconst AuthPage = ({\n screenSetsContainerId,\n panel,\n order = 'default'\n }: AuthPageProps) => {\n return (\n <Wrapper className={order}>\n {\n panel && <Panel {...panel} order={order} className={`panel ${panel.className || ''}`}/>\n }\n <ScreenSetsContainer id={screenSetsContainerId} centerContents={!panel}/>\n </Wrapper>\n );\n};\n\nexport default AuthPage;\n"],"mappings":";;;;;;AAAA,OAAO,KAAKA,KAAK,MAAM,OAAO;AAC9B,OAAOC,mBAAmB,MAAM,uBAAuB;AACvD,OAAOC,MAAM,MAAM,mBAAmB;AACtC,SAAQC,KAAK,QAAmB,UAAU;AAC1C,SAAQC,WAAW,QAAO,WAAW;AAAC;AAAA;AAGtC,IAAMC,OAAO,GAAGH,MAAM,CAACI,GAAG,4SAUtBF,WAAW,CAACG,MAAM,CASrB;AAQD,IAAMC,QAAQ,GAAG,SAAXA,QAAQ,OAIyB;EAAA,IAHnBC,qBAAqB,QAArBA,qBAAqB;IACrBC,KAAK,QAALA,KAAK;IAAA,kBACLC,KAAK;IAALA,KAAK,2BAAG,SAAS;EAEnC,oBACE,MAAC,OAAO;IAAC,SAAS,EAAEA,KAAM;IAAA,WAEtBD,KAAK,iBAAI,KAAC,KAAK,kCAAKA,KAAK;MAAE,KAAK,EAAEC,KAAM;MAAC,SAAS,kBAAWD,KAAK,CAACE,SAAS,IAAI,EAAE;IAAG,GAAE,eAEzF,KAAC,mBAAmB;MAAC,EAAE,EAAEH,qBAAsB;MAAC,cAAc,EAAE,CAACC;IAAM,EAAE;EAAA,EACjE;AAEd,CAAC;AAAC;EAjBAC,KAAK,aAAG,SAAS,EAAG,SAAS;EAC7BF,qBAAqB;AAAA;AAkBvB,eAAeD,QAAQ"}
|
package/dist/Panel/Panel.cjs
CHANGED
|
@@ -24,9 +24,9 @@ var _excluded = ["items", "order"],
|
|
|
24
24
|
var _templateObject, _templateObject2, _templateObject3, _templateObject4, _Panel$propTypes;
|
|
25
25
|
function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
|
|
26
26
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { (0, _defineProperty2.default)(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
27
|
-
var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n background: ", ";\n min-height: 100%;\n align-items: flex-end;\n box-sizing: border-box;\n overflow: hidden;\n\n gap: 24px;\n padding:
|
|
27
|
+
var Wrapper = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n flex-direction: column;\n background: ", ";\n min-height: 100%;\n align-items: flex-end;\n box-sizing: border-box;\n overflow: hidden;\n\n gap: 24px;\n padding: 24px 32px 64px;\n\n ", " {\n gap: 32px;\n padding: 32px 64px 128px;\n }\n\n &.reverse {\n align-items: flex-start;\n }\n"])), _styles.COLORS.neutral_20, _styles.BREAKPOINTS.LARGE);
|
|
28
28
|
var Media = _styledComponents.default.div(_templateObject2 || (_templateObject2 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n width: 320px;\n height: 200px;\n\n\n img {\n object-fit: contain;\n }\n\n img.fit {\n object-fit: contain;\n }\n\n img.fill {\n object-fit: cover;\n }\n\n max-width: 100%;\n\n img {\n max-width: 100%;\n width: 320px;\n height: 200px;\n }\n\n ", " {\n width: 488px;\n height: 280px;\n\n img {\n width: 488px;\n height: 280px;\n }\n }\n\n"])), _styles.BREAKPOINTS.LARGE);
|
|
29
|
-
var Body = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n\n max-width: 320px;\n\n ", " {\n max-width: 488px;\n }\n\n"])), _styles.BREAKPOINTS.LARGE);
|
|
29
|
+
var Body = _styledComponents.default.div(_templateObject3 || (_templateObject3 = (0, _taggedTemplateLiteral2.default)(["\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n\n width: 100%;\n max-width: 320px;\n\n ", " {\n max-width: 488px;\n }\n \n p:not(:first-of-type) {\n flex: 1;\n color: ", ";\n }\n\n\n"])), _styles.BREAKPOINTS.LARGE, _styles.COLORS.neutral_600);
|
|
30
30
|
var Footer = _styledComponents.default.div(_templateObject4 || (_templateObject4 = (0, _taggedTemplateLiteral2.default)(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n\n max-width: 320px;\n\n ", " {\n max-width: 488px;\n }\n\n .progress {\n width: max-content;\n }\n"])), _styles.BREAKPOINTS.LARGE);
|
|
31
31
|
var Panel = function Panel(props) {
|
|
32
32
|
var _currentItem$media, _currentItem$media2;
|
|
@@ -82,7 +82,7 @@ var Panel = function Panel(props) {
|
|
|
82
82
|
alt: currentItem.media.alt
|
|
83
83
|
}), ((_currentItem$media2 = currentItem.media) === null || _currentItem$media2 === void 0 ? void 0 : _currentItem$media2.type) === 'custom' && currentItem.media.content]
|
|
84
84
|
}), /*#__PURE__*/(0, _jsxRuntime.jsxs)(Body, {
|
|
85
|
-
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(
|
|
85
|
+
children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Quote, {
|
|
86
86
|
children: currentItem.title
|
|
87
87
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
|
|
88
88
|
children: currentItem.content
|
|
@@ -94,7 +94,7 @@ var Panel = function Panel(props) {
|
|
|
94
94
|
shape: 'circular',
|
|
95
95
|
children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_icons.SystemIcons.ChevronLeft, {})
|
|
96
96
|
}), /*#__PURE__*/(0, _jsxRuntime.jsx)(_LinearProgress.LinearProgress, {
|
|
97
|
-
size: isLargeScreen ? _types.Size.
|
|
97
|
+
size: isLargeScreen ? _types.Size.Large : _types.Size.Small,
|
|
98
98
|
className: 'progress',
|
|
99
99
|
value: currentImage + 1,
|
|
100
100
|
max: props.items.length,
|
package/dist/Panel/Panel.cjs.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Panel.cjs","names":["Wrapper","styled","div","COLORS","neutral_20","
|
|
1
|
+
{"version":3,"file":"Panel.cjs","names":["Wrapper","styled","div","COLORS","neutral_20","BREAKPOINTS","LARGE","Media","Body","neutral_600","Footer","Panel","props","React","useState","currentImage","setCurrentImage","isLargeScreen","useMediaMatch","replace","rest","order","undefined","media","title","content","items","type","moveLeft","length","moveRight","currentItem","className","fit","src","alt","Size","Large","Small","LinearProgressType","Dots"],"sources":["../../src/Panel/Panel.tsx"],"sourcesContent":["import React from 'react';\nimport styled from \"styled-components\";\nimport {BREAKPOINTS, COLORS, Quote} from \"../styles\";\nimport {IconButton} from \"../Button\";\nimport {SystemIcons} from \"../icons\";\nimport {LinearProgress, LinearProgressType} from \"../LinearProgress\";\nimport {useMediaMatch} from \"rooks\";\nimport {Size} from \"../types\";\n\nconst Wrapper = styled.div`\n display: flex;\n flex-direction: column;\n background: ${COLORS.neutral_20};\n min-height: 100%;\n align-items: flex-end;\n box-sizing: border-box;\n overflow: hidden;\n\n gap: 24px;\n padding: 24px 32px 64px;\n\n ${BREAKPOINTS.LARGE} {\n gap: 32px;\n padding: 32px 64px 128px;\n }\n\n &.reverse {\n align-items: flex-start;\n }\n`;\n\nconst Media = styled.div`\n display: flex;\n width: 320px;\n height: 200px;\n\n\n img {\n object-fit: contain;\n }\n\n img.fit {\n object-fit: contain;\n }\n\n img.fill {\n object-fit: cover;\n }\n\n max-width: 100%;\n\n img {\n max-width: 100%;\n width: 320px;\n height: 200px;\n }\n\n ${BREAKPOINTS.LARGE} {\n width: 488px;\n height: 280px;\n\n img {\n width: 488px;\n height: 280px;\n }\n }\n\n`;\n\nconst Body = styled.div`\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n\n width: 100%;\n max-width: 320px;\n\n ${BREAKPOINTS.LARGE} {\n max-width: 488px;\n }\n \n p:not(:first-of-type) {\n flex: 1;\n color: ${COLORS.neutral_600};\n }\n\n\n`;\nconst Footer = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n\n max-width: 320px;\n\n ${BREAKPOINTS.LARGE} {\n max-width: 488px;\n }\n\n .progress {\n width: max-content;\n }\n`;\n\ninterface BasePanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n type?: 'default' | 'carousel';\n}\n\ninterface PanelContent {\n media?: { type: 'image', src: string; alt: string, fit?: 'fill' | 'fit' } | { type: 'custom', content: React.ReactNode };\n title?: string;\n content?: React.ReactNode;\n}\n\ninterface DefaultPanelProps extends BasePanelProps, PanelContent {\n type?: 'default';\n order?: 'default' | 'reverse';\n}\n\ninterface CarouselPanelProps extends BasePanelProps {\n type: 'carousel';\n order?: 'default' | 'reverse';\n items?: PanelContent[];\n}\n\nexport type PanelProps = DefaultPanelProps | CarouselPanelProps;\n\nexport const Panel = (props: PanelProps) => {\n\n const [currentImage, setCurrentImage] = React.useState(0);\n const isLargeScreen = useMediaMatch(BREAKPOINTS.LARGE.replace('@media ', ''));\n\n let rest: React.HTMLAttributes<HTMLDivElement> = {};\n let order = undefined;\n let media = undefined;\n let title = '';\n let content = undefined;\n let items: PanelContent[] = [];\n\n\n switch (props.type) {\n case 'carousel':\n ({items = [], order, ...rest} = props);\n break;\n case 'default':\n default:\n ({media, content, title = '', order, ...rest} = props)\n break;\n }\n\n\n const moveLeft = () => {\n props.type === 'carousel' && setCurrentImage(currentImage === 0 ? items.length - 1 : currentImage - 1);\n }\n const moveRight = () => {\n props.type === 'carousel' && setCurrentImage(currentImage + 1 > items.length - 1 ? 0 : currentImage + 1);\n }\n\n const currentItem: PanelContent = props.type === 'carousel' ? items[currentImage] : {media, title, content};\n\n return (\n <Wrapper {...rest} className={`${rest.className || ''} ${order || ''} `}>\n <Media>\n {\n currentItem.media?.type === 'image' &&\n <img className={currentItem.media.fit} src={currentItem.media.src} alt={currentItem.media.alt}/>\n }\n {\n currentItem.media?.type === 'custom' && currentItem.media.content\n }\n </Media>\n <Body>\n <Quote>{currentItem.title}</Quote>\n <p>{currentItem.content}</p>\n </Body>\n {\n props.type === 'carousel' &&\n <Footer>\n <IconButton action={moveLeft} variant={'secondary'} shape={'circular'}>\n <SystemIcons.ChevronLeft/>\n </IconButton>\n <LinearProgress size={isLargeScreen ? Size.Large : Size.Small}\n className={'progress'}\n value={currentImage + 1}\n max={props.items!.length }\n type={LinearProgressType.Dots}/>\n <IconButton action={moveRight} variant={'secondary'} shape={'circular'}>\n <SystemIcons.ChevronRight/>\n </IconButton>\n </Footer>\n }\n </Wrapper>\n )\n};\n"],"mappings":"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"}
|
package/dist/Panel/Panel.js
CHANGED
|
@@ -10,7 +10,7 @@ function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (O
|
|
|
10
10
|
function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
|
|
11
11
|
import React from 'react';
|
|
12
12
|
import styled from "styled-components";
|
|
13
|
-
import { BREAKPOINTS, COLORS } from "../styles";
|
|
13
|
+
import { BREAKPOINTS, COLORS, Quote } from "../styles";
|
|
14
14
|
import { IconButton } from "../Button";
|
|
15
15
|
import { SystemIcons } from "../icons";
|
|
16
16
|
import { LinearProgress, LinearProgressType } from "../LinearProgress";
|
|
@@ -18,9 +18,9 @@ import { useMediaMatch } from "rooks";
|
|
|
18
18
|
import { Size } from "../types";
|
|
19
19
|
import { jsx as _jsx } from "react/jsx-runtime";
|
|
20
20
|
import { jsxs as _jsxs } from "react/jsx-runtime";
|
|
21
|
-
var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n background: ", ";\n min-height: 100%;\n align-items: flex-end;\n box-sizing: border-box;\n overflow: hidden;\n\n gap: 24px;\n padding:
|
|
21
|
+
var Wrapper = styled.div(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n display: flex;\n flex-direction: column;\n background: ", ";\n min-height: 100%;\n align-items: flex-end;\n box-sizing: border-box;\n overflow: hidden;\n\n gap: 24px;\n padding: 24px 32px 64px;\n\n ", " {\n gap: 32px;\n padding: 32px 64px 128px;\n }\n\n &.reverse {\n align-items: flex-start;\n }\n"])), COLORS.neutral_20, BREAKPOINTS.LARGE);
|
|
22
22
|
var Media = styled.div(_templateObject2 || (_templateObject2 = _taggedTemplateLiteral(["\n display: flex;\n width: 320px;\n height: 200px;\n\n\n img {\n object-fit: contain;\n }\n\n img.fit {\n object-fit: contain;\n }\n\n img.fill {\n object-fit: cover;\n }\n\n max-width: 100%;\n\n img {\n max-width: 100%;\n width: 320px;\n height: 200px;\n }\n\n ", " {\n width: 488px;\n height: 280px;\n\n img {\n width: 488px;\n height: 280px;\n }\n }\n\n"])), BREAKPOINTS.LARGE);
|
|
23
|
-
var Body = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n\n max-width: 320px;\n\n ", " {\n max-width: 488px;\n }\n\n"])), BREAKPOINTS.LARGE);
|
|
23
|
+
var Body = styled.div(_templateObject3 || (_templateObject3 = _taggedTemplateLiteral(["\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n\n width: 100%;\n max-width: 320px;\n\n ", " {\n max-width: 488px;\n }\n \n p:not(:first-of-type) {\n flex: 1;\n color: ", ";\n }\n\n\n"])), BREAKPOINTS.LARGE, COLORS.neutral_600);
|
|
24
24
|
var Footer = styled.div(_templateObject4 || (_templateObject4 = _taggedTemplateLiteral(["\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n\n max-width: 320px;\n\n ", " {\n max-width: 488px;\n }\n\n .progress {\n width: max-content;\n }\n"])), BREAKPOINTS.LARGE);
|
|
25
25
|
export var Panel = function Panel(props) {
|
|
26
26
|
var _currentItem$media, _currentItem$media2;
|
|
@@ -76,7 +76,7 @@ export var Panel = function Panel(props) {
|
|
|
76
76
|
alt: currentItem.media.alt
|
|
77
77
|
}), ((_currentItem$media2 = currentItem.media) === null || _currentItem$media2 === void 0 ? void 0 : _currentItem$media2.type) === 'custom' && currentItem.media.content]
|
|
78
78
|
}), /*#__PURE__*/_jsxs(Body, {
|
|
79
|
-
children: [/*#__PURE__*/_jsx(
|
|
79
|
+
children: [/*#__PURE__*/_jsx(Quote, {
|
|
80
80
|
children: currentItem.title
|
|
81
81
|
}), /*#__PURE__*/_jsx("p", {
|
|
82
82
|
children: currentItem.content
|
|
@@ -88,7 +88,7 @@ export var Panel = function Panel(props) {
|
|
|
88
88
|
shape: 'circular',
|
|
89
89
|
children: /*#__PURE__*/_jsx(SystemIcons.ChevronLeft, {})
|
|
90
90
|
}), /*#__PURE__*/_jsx(LinearProgress, {
|
|
91
|
-
size: isLargeScreen ? Size.
|
|
91
|
+
size: isLargeScreen ? Size.Large : Size.Small,
|
|
92
92
|
className: 'progress',
|
|
93
93
|
value: currentImage + 1,
|
|
94
94
|
max: props.items.length,
|
package/dist/Panel/Panel.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Panel.js","names":["React","styled","BREAKPOINTS","COLORS","IconButton","SystemIcons","LinearProgress","LinearProgressType","useMediaMatch","Size","Wrapper","div","neutral_20","
|
|
1
|
+
{"version":3,"file":"Panel.js","names":["React","styled","BREAKPOINTS","COLORS","Quote","IconButton","SystemIcons","LinearProgress","LinearProgressType","useMediaMatch","Size","Wrapper","div","neutral_20","LARGE","Media","Body","neutral_600","Footer","Panel","props","useState","currentImage","setCurrentImage","isLargeScreen","replace","rest","order","undefined","media","title","content","items","type","moveLeft","length","moveRight","currentItem","className","fit","src","alt","Large","Small","Dots"],"sources":["../../src/Panel/Panel.tsx"],"sourcesContent":["import React from 'react';\nimport styled from \"styled-components\";\nimport {BREAKPOINTS, COLORS, Quote} from \"../styles\";\nimport {IconButton} from \"../Button\";\nimport {SystemIcons} from \"../icons\";\nimport {LinearProgress, LinearProgressType} from \"../LinearProgress\";\nimport {useMediaMatch} from \"rooks\";\nimport {Size} from \"../types\";\n\nconst Wrapper = styled.div`\n display: flex;\n flex-direction: column;\n background: ${COLORS.neutral_20};\n min-height: 100%;\n align-items: flex-end;\n box-sizing: border-box;\n overflow: hidden;\n\n gap: 24px;\n padding: 24px 32px 64px;\n\n ${BREAKPOINTS.LARGE} {\n gap: 32px;\n padding: 32px 64px 128px;\n }\n\n &.reverse {\n align-items: flex-start;\n }\n`;\n\nconst Media = styled.div`\n display: flex;\n width: 320px;\n height: 200px;\n\n\n img {\n object-fit: contain;\n }\n\n img.fit {\n object-fit: contain;\n }\n\n img.fill {\n object-fit: cover;\n }\n\n max-width: 100%;\n\n img {\n max-width: 100%;\n width: 320px;\n height: 200px;\n }\n\n ${BREAKPOINTS.LARGE} {\n width: 488px;\n height: 280px;\n\n img {\n width: 488px;\n height: 280px;\n }\n }\n\n`;\n\nconst Body = styled.div`\n flex: 1;\n display: flex;\n flex-direction: column;\n align-items: center;\n text-align: center;\n\n width: 100%;\n max-width: 320px;\n\n ${BREAKPOINTS.LARGE} {\n max-width: 488px;\n }\n \n p:not(:first-of-type) {\n flex: 1;\n color: ${COLORS.neutral_600};\n }\n\n\n`;\nconst Footer = styled.div`\n display: flex;\n align-items: center;\n justify-content: center;\n width: 100%;\n\n max-width: 320px;\n\n ${BREAKPOINTS.LARGE} {\n max-width: 488px;\n }\n\n .progress {\n width: max-content;\n }\n`;\n\ninterface BasePanelProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {\n type?: 'default' | 'carousel';\n}\n\ninterface PanelContent {\n media?: { type: 'image', src: string; alt: string, fit?: 'fill' | 'fit' } | { type: 'custom', content: React.ReactNode };\n title?: string;\n content?: React.ReactNode;\n}\n\ninterface DefaultPanelProps extends BasePanelProps, PanelContent {\n type?: 'default';\n order?: 'default' | 'reverse';\n}\n\ninterface CarouselPanelProps extends BasePanelProps {\n type: 'carousel';\n order?: 'default' | 'reverse';\n items?: PanelContent[];\n}\n\nexport type PanelProps = DefaultPanelProps | CarouselPanelProps;\n\nexport const Panel = (props: PanelProps) => {\n\n const [currentImage, setCurrentImage] = React.useState(0);\n const isLargeScreen = useMediaMatch(BREAKPOINTS.LARGE.replace('@media ', ''));\n\n let rest: React.HTMLAttributes<HTMLDivElement> = {};\n let order = undefined;\n let media = undefined;\n let title = '';\n let content = undefined;\n let items: PanelContent[] = [];\n\n\n switch (props.type) {\n case 'carousel':\n ({items = [], order, ...rest} = props);\n break;\n case 'default':\n default:\n ({media, content, title = '', order, ...rest} = props)\n break;\n }\n\n\n const moveLeft = () => {\n props.type === 'carousel' && setCurrentImage(currentImage === 0 ? items.length - 1 : currentImage - 1);\n }\n const moveRight = () => {\n props.type === 'carousel' && setCurrentImage(currentImage + 1 > items.length - 1 ? 0 : currentImage + 1);\n }\n\n const currentItem: PanelContent = props.type === 'carousel' ? items[currentImage] : {media, title, content};\n\n return (\n <Wrapper {...rest} className={`${rest.className || ''} ${order || ''} `}>\n <Media>\n {\n currentItem.media?.type === 'image' &&\n <img className={currentItem.media.fit} src={currentItem.media.src} alt={currentItem.media.alt}/>\n }\n {\n currentItem.media?.type === 'custom' && currentItem.media.content\n }\n </Media>\n <Body>\n <Quote>{currentItem.title}</Quote>\n <p>{currentItem.content}</p>\n </Body>\n {\n props.type === 'carousel' &&\n <Footer>\n <IconButton action={moveLeft} variant={'secondary'} shape={'circular'}>\n <SystemIcons.ChevronLeft/>\n </IconButton>\n <LinearProgress size={isLargeScreen ? Size.Large : Size.Small}\n className={'progress'}\n value={currentImage + 1}\n max={props.items!.length }\n type={LinearProgressType.Dots}/>\n <IconButton action={moveRight} variant={'secondary'} shape={'circular'}>\n <SystemIcons.ChevronRight/>\n </IconButton>\n </Footer>\n }\n </Wrapper>\n )\n};\n"],"mappings":"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"}
|