@redsift/design-system 6.0.0-alpha.4 → 6.0.0-alpha.5
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/esm/_internal/AppBar.js
CHANGED
|
@@ -12,7 +12,7 @@ var _templateObject, _templateObject2, _templateObject3;
|
|
|
12
12
|
/**
|
|
13
13
|
* Component style.
|
|
14
14
|
*/
|
|
15
|
-
const StyledAppBar = styled.header(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n align-content: center;\n align-items: center;\n background-color: var(--redsift-color-primary-main);\n color: var(--redsift-color-primary-contrast);\n display: flex;\n flex-direction: row;\n height: 72px;\n justify-content: space-between;\n left: 0;\n position: fixed;\n top: 0;\n z-index: 1;\n\n ", "\n \n ", "\n\n
|
|
15
|
+
const StyledAppBar = styled.header(_templateObject || (_templateObject = _taggedTemplateLiteral(["\n align-content: center;\n align-items: center;\n background-color: var(--redsift-color-primary-main);\n color: var(--redsift-color-primary-contrast);\n display: flex;\n flex-direction: row;\n height: 72px;\n justify-content: space-between;\n left: 0;\n position: fixed;\n top: 0;\n z-index: 1;\n\n ", "\n \n ", "\n\n h1 {\n margin: unset;\n padding: unset;\n }\n\n .redsift-app-bar__left {\n align-content: center;\n align-items: center;\n display: inline-flex;\n flex-direction: row;\n gap: 16px;\n justify-content: center;\n margin-left: 32px;\n }\n\n .redsift-app-bar-left__expand-button {\n margin-left: -16px;\n \n i {\n color: var(--redsift-color-primary-contrast);\n }\n }\n\n .redsift-app-bar-left__expand-button:hover,\n .redsift-app-bar-left__expand-button:focus-visible {\n background-color: var(--redsift-color-primary-contained-hover);\n }\n\n .redsift-app-bar__right {\n display: inline-flex;\n margin: 16px;\n }\n"])), _ref => {
|
|
16
16
|
let {
|
|
17
17
|
$isSidePanelCollapsed
|
|
18
18
|
} = _ref;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AppBar.js","sources":["../../../src/components/app-bar/styles.ts","../../../src/components/app-bar/AppBar.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { StyledAppBarProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledAppBar = styled.header<StyledAppBarProps>`\n align-content: center;\n align-items: center;\n background-color: var(--redsift-color-primary-main);\n color: var(--redsift-color-primary-contrast);\n display: flex;\n flex-direction: row;\n height: 72px;\n justify-content: space-between;\n left: 0;\n position: fixed;\n top: 0;\n z-index: 1;\n\n ${({ $isSidePanelCollapsed }) => !$isSidePanelCollapsed ? css`\n transform: translate(240px);\n width: calc(100% - 240px);\n `: `\n transform: translate(0px);\n width: 100%;\n `}\n \n ${({ $isLoaded }) => $isLoaded ? css`\n transition: transform .25s ease-out, width .25s ease-out;\n `: ''}\n\n
|
|
1
|
+
{"version":3,"file":"AppBar.js","sources":["../../../src/components/app-bar/styles.ts","../../../src/components/app-bar/AppBar.tsx"],"sourcesContent":["import styled, { css } from 'styled-components';\nimport { StyledAppBarProps } from './types';\n\n/**\n * Component style.\n */\nexport const StyledAppBar = styled.header<StyledAppBarProps>`\n align-content: center;\n align-items: center;\n background-color: var(--redsift-color-primary-main);\n color: var(--redsift-color-primary-contrast);\n display: flex;\n flex-direction: row;\n height: 72px;\n justify-content: space-between;\n left: 0;\n position: fixed;\n top: 0;\n z-index: 1;\n\n ${({ $isSidePanelCollapsed }) => !$isSidePanelCollapsed ? css`\n transform: translate(240px);\n width: calc(100% - 240px);\n `: `\n transform: translate(0px);\n width: 100%;\n `}\n \n ${({ $isLoaded }) => $isLoaded ? css`\n transition: transform .25s ease-out, width .25s ease-out;\n `: ''}\n\n h1 {\n margin: unset;\n padding: unset;\n }\n\n .redsift-app-bar__left {\n align-content: center;\n align-items: center;\n display: inline-flex;\n flex-direction: row;\n gap: 16px;\n justify-content: center;\n margin-left: 32px;\n }\n\n .redsift-app-bar-left__expand-button {\n margin-left: -16px;\n \n i {\n color: var(--redsift-color-primary-contrast);\n }\n }\n\n .redsift-app-bar-left__expand-button:hover,\n .redsift-app-bar-left__expand-button:focus-visible {\n background-color: var(--redsift-color-primary-contained-hover);\n }\n\n .redsift-app-bar__right {\n display: inline-flex;\n margin: 16px;\n }\n`\n","import React, { forwardRef, RefObject, useContext, useRef } from 'react';\nimport classNames from 'classnames';\nimport { Comp } from '~/types';\nimport { mdiMenu } from '~/components/icon';\nimport { IconButton } from '~/components/icon-button';\nimport { AppContainerContext } from '~/components/app-container/context';\nimport { useIsLoaded } from '~/hooks/useIsLoaded';\nimport { StyledAppBar } from './styles';\nimport { AppBarProps } from './types';\n\nconst COMPONENT_NAME = 'RedSiftAppBar';\nconst CLASSNAME = 'redsift-app-bar';\nconst DEFAULT_PROPS: Partial<AppBarProps> = {};\n\n/**\n * The AppBar component.\n */\nexport const AppBar: Comp<AppBarProps, HTMLHeadingElement> = forwardRef((props, ref) => {\n const barRef = ref || useRef<HTMLHeadingElement>();\n\n const {\n children,\n className,\n iconButtonProps,\n iconButtonRef = useRef<HTMLButtonElement>(),\n title: propsTitle,\n ...forwardedProps\n } = props;\n\n const { isLoaded } = useIsLoaded();\n const appContainerState = useContext(AppContainerContext);\n\n return (\n <StyledAppBar\n {...forwardedProps}\n $isLoaded={isLoaded}\n $isSidePanelCollapsed={appContainerState ? appContainerState.isSidePanelCollapsed : true}\n className={classNames(AppBar.className, className)}\n ref={barRef as RefObject<HTMLHeadingElement>}\n >\n <div className={`${AppBar.className}__left`}>\n {appContainerState && appContainerState.isSidePanelCollapsed ? (\n <IconButton\n className={`${AppBar.className}-left__expand-button`}\n {...iconButtonProps}\n aria-label=\"Expand left side panel\"\n icon={mdiMenu}\n onPress={appContainerState.expandSidePanel}\n ref={iconButtonRef as RefObject<HTMLButtonElement>}\n />\n ) : null}\n {appContainerState && appContainerState.title ? (\n <h1>{appContainerState.title}</h1>\n ) : propsTitle ? (\n <h1>{propsTitle}</h1>\n ) : null}\n </div>\n <div className={`${AppBar.className}__right`}>\n {children}\n </div>\n </StyledAppBar>\n );\n});\nAppBar.className = CLASSNAME;\nAppBar.defaultProps = DEFAULT_PROPS;\nAppBar.displayName = COMPONENT_NAME;\n"],"names":["StyledAppBar","styled","header","$isSidePanelCollapsed","css","$isLoaded","COMPONENT_NAME","CLASSNAME","DEFAULT_PROPS","AppBar","forwardRef","props","ref","barRef","useRef","children","className","iconButtonProps","iconButtonRef","title","propsTitle","forwardedProps","isLoaded","useIsLoaded","appContainerState","useContext","AppContainerContext","isSidePanelCollapsed","classNames","mdiMenu","expandSidePanel","defaultProps","displayName"],"mappings":"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"}
|
package/package.json
CHANGED
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"build:dictionary": "rm -rf ./src/style/redsift-design-tokens.css && style-dictionary build --config ./style-dictionary/config.json"
|
|
18
18
|
},
|
|
19
19
|
"types": "types.d.ts",
|
|
20
|
-
"version": "6.0.0-alpha.
|
|
20
|
+
"version": "6.0.0-alpha.5",
|
|
21
21
|
"workspaces": [
|
|
22
22
|
"packages/design-system",
|
|
23
23
|
"packages/demo-site"
|
|
@@ -113,5 +113,5 @@
|
|
|
113
113
|
"react-dom": "^18.1.0 || ^18.2.0",
|
|
114
114
|
"styled-components": "^5.3.3"
|
|
115
115
|
},
|
|
116
|
-
"gitHead": "
|
|
116
|
+
"gitHead": "8f922a9d25bf9959e330d0ba79a74b8c60beec71"
|
|
117
117
|
}
|