Skip to content

Commit 5595b8c

Browse files
zhadaevzhadaev
authored
Updated icons and SidebarHeader (#85)
* Updated icons and SidebarHeader component
1 parent 978f1a5 commit 5595b8c

File tree

7 files changed

+198
-91
lines changed

7 files changed

+198
-91
lines changed

‎components/Icons.es6.js‎

Lines changed: 43 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -2007,14 +2007,50 @@ function PencilFilled ({ className, width='16', height='16', color = '#766bff',
20072007
)
20082008
}
20092009

2010-
function Stop ({ className, width='16', height='16', color = '#766bff', viewBox='0 0 10 10' }) {
2010+
function Stop ({ className, width='16', height='16', color='#766bff', viewBox='0 0 10 10' }) {
20112011
return (
20122012
<svg width={width} height={height} viewBox={viewBox} fill="none" xmlns="http://www.w3.org/2000/svg" className={className}>
20132013
<path d="M0 2C0 0.89543 0.895431 0 2 0H8C9.10457 0 10 0.895431 10 2V8C10 9.10457 9.10457 10 8 10H2C0.89543 10 0 9.10457 0 8V2Z" fill={color} />
20142014
</svg>
20152015
)
20162016
}
20172017

2018+
function Revert ({ className, color='#84839C', width='18', height='16', viewBox='0 0 18 16' }) {
2019+
return (
2020+
<svg fill="none" viewBox={viewBox} className={className} width={width} height={height} xmlns="http://www.w3.org/2000/svg">
2021+
<path d="m3.1123 6.2038 3.0848 3.048c0.50104 0.85788-0.43091 1.7637-1.2765 1.2264l-4.6233-4.503c-0.33048-0.35062-0.42362-0.87182-0.084162-1.2537l4.5369-4.4639c0.71987-0.67672 1.8443 0.094764 1.4661 0.99781-0.15317 0.36567-0.77597 0.82054-1.0677 1.1087-0.68452 0.67505-1.3696 1.3523-2.0356 2.0452l9.4306-0.00167c4.8152 0.3261 7.2307 6.0716 3.9467 9.6832-1.8673 2.053-4.1997 1.9694-6.7942 1.8668-0.86687-0.1638-0.89436-1.5429-0.03366-1.7241 0.61491-0.1293 1.7304 0.0167 2.4188-0.0167 2.8234-0.1366 4.8141-2.5531 3.895-5.3335-0.4163-1.2604-1.9649-2.6796-3.3508-2.6796h-9.5131z" fill={color} />
2022+
</svg>
2023+
)
2024+
}
2025+
2026+
function ThumbUp ({ className, color='#84839C', width='16', height='16', viewBox='0 0 16 16' }) {
2027+
return (
2028+
<svg fill="none" viewBox={viewBox} className={className} width={width} height={height} xmlns="http://www.w3.org/2000/svg">
2029+
<path d="m3.5386 15h-2.5455v-6.3636h2.5455" stroke={color} strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"/>
2030+
<path d="m3.5386 8.6364 2.5455-7.6364h0.63636c0.50632 0 0.99191 0.20114 1.3499 0.55916 0.35803 0.35802 0.55916 0.84361 0.55916 1.3499v3.1818h4.1618c0.2735-1e-5 0.5438 0.05875 0.7927 0.1723 0.2488 0.11355 0.4703 0.27925 0.6495 0.48586s0.312 0.44932 0.3892 0.7117c0.0773 0.26237 0.0973 0.53828 0.0586 0.80905l-0.7267 5.0909c-0.065 0.4548-0.2917 0.8709-0.6386 1.172s-0.7908 0.467-1.2502 0.4673h-8.5272v-6.3636z" stroke={color} strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"/>
2031+
</svg>
2032+
)
2033+
}
2034+
2035+
function ThumbDown ({ className, color='#84839C', width='16', height='16', viewBox='0 0 16 16' }) {
2036+
return (
2037+
<svg fill="none" viewBox={viewBox} className={className} width={width} height={height} xmlns="http://www.w3.org/2000/svg">
2038+
<g stroke={color}>
2039+
<path d="m12.461 0.99989h2.5454v6.3636h-2.5454" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"/>
2040+
<path d="m12.461 7.3636-2.5454 7.6364h-0.63636c-0.50632 0-0.99191-0.2011-1.3499-0.5592-0.35803-0.358-0.55916-0.8436-0.55916-1.3499v-3.1818h-4.1618c-0.27351 1e-5 -0.54383-0.05875-0.79266-0.1723s-0.47035-0.27924-0.64956-0.48586c-0.17922-0.20661-0.31195-0.44932-0.38921-0.7117-0.07725-0.26237-0.09723-0.53828-0.05857-0.80905l0.72672-5.0909c0.06493-0.45475 0.29165-0.87086 0.63858-1.172 0.34692-0.3011 0.79078-0.46702 1.2502-0.46731h8.5272v6.3636z" strokeLinecap="round" strokeLinejoin="round" strokeWidth="2"/>
2041+
</g>
2042+
</svg>
2043+
)
2044+
}
2045+
2046+
function Forward ({ className, color='#84839C', width='12', height='12', viewBox='0 0 12 12' }) {
2047+
return (
2048+
<svg fill="none" viewBox={viewBox} className={className} width={width} height={height} xmlns="http://www.w3.org/2000/svg">
2049+
<path d="m-4.5897e-7 6.75h9.1275l-4.1925 4.1925 1.065 1.0575 6-6-6-6-1.0575 1.0575 4.185 4.1925h-9.1275l1.3113e-7 1.5z" fill={color} />
2050+
</svg>
2051+
)
2052+
}
2053+
20182054
const icons = [
20192055
Check,
20202056
Checkmark,
@@ -2215,7 +2251,11 @@ const icons = [
22152251
Microphone,
22162252
ThreeDots,
22172253
PencilFilled,
2218-
Stop
2254+
Stop,
2255+
Revert,
2256+
ThumbUp,
2257+
ThumbDown,
2258+
Forward,
22192259
]
22202260

22212261
each(icons, (icon) => {
@@ -2242,5 +2282,5 @@ export { Check, Checkmark, Lock, Notice, Disabled, Help, Search, Draggable,
22422282
Flag, Testimonials, Chart, Pause, HubspotLogo, AlignLeftV2, AlignRightV2, AlignCenterV2, AlignJustifyV2, Sidebar, Palette, Lightbox, Filter, Slider,
22432283
Flash, Dashboard, Guides, Article, Pulse, Edit, ContentApproved, Dragger, PaperClip, Invoicing, Banking, Checkbox, Circle, Bank, Card, Contract,
22442284
MinusCircle, RepeatCircle, BadgeCard, HeadphonesMic, CheckmarkLarge, NoticeOutlined, Archive, Questionnaire, Upload, ShareFeedback, Spaceship, Zap, Tip,
2245-
Webpage, LayoutAlternative, GlobeAlternative, AiAssist, Flows, Highlight, ArrowCircleUp, ArrowUp, EditColor, AiImage, AiLogo, Microphone, ThreeDots, PencilFilled, Stop
2285+
Webpage, LayoutAlternative, GlobeAlternative, AiAssist, Flows, Highlight, ArrowCircleUp, ArrowUp, EditColor, AiImage, AiLogo, Microphone, ThreeDots, PencilFilled, Stop, Revert, ThumbUp, ThumbDown, Forward,
22462286
}

‎components/layout/sidebar/header/ActionDropdown.es6.js‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React, { forwardRef } from 'react'
2+
import QuickActions from './QuickActions.es6.js'
3+
import SidebarHeaderActionButton from './SidebarHeaderActionButton.es6.js'
4+
5+
import classnames from 'classnames'
6+
7+
const ActionDropdown = forwardRef(({
8+
icon,
9+
actionsAvailable,
10+
actionsVisible,
11+
setActionsVisibility,
12+
quickDialog,
13+
quickActions,
14+
onClick,
15+
dropdownMenuLabel,
16+
onQuickActionSelected,
17+
isLogoDropDown,
18+
}, ref) => (
19+
<div
20+
className={classnames({
21+
'ds-dropdown': actionsAvailable && icon,
22+
'ds-dropdown--right': actionsAvailable && icon && !isLogoDropDown,
23+
'ds-dropdown--left': isLogoDropDown,
24+
'ds-dropdown--menu-visible': actionsAvailable && actionsVisible,
25+
'ds-sidebar__header-action': !actionsAvailable
26+
})}
27+
ref={ref}
28+
>
29+
{icon && (
30+
<SidebarHeaderActionButton
31+
dropdown={actionsAvailable}
32+
icon={icon}
33+
onClick={onClick}
34+
/>
35+
)}
36+
37+
{quickDialog}
38+
39+
{actionsVisible && (
40+
<QuickActions
41+
actions={quickActions}
42+
label={dropdownMenuLabel}
43+
onSelect={(idx) => {
44+
setActionsVisibility(false)
45+
onQuickActionSelected && onQuickActionSelected(idx)
46+
}}
47+
/>
48+
)}
49+
</div>
50+
))
51+
52+
export default ActionDropdown

‎components/layout/sidebar/header/SidebarHeader.es6.js‎

Lines changed: 71 additions & 66 deletions
Original file line numberDiff line numberDiff line change
@@ -2,11 +2,10 @@ import React, { Fragment } from 'react'
22
import PropTypes from 'prop-types'
33
import classnames from 'classnames'
44

5-
import QuickActions from './QuickActions.es6.js'
65
import SidebarBackButton from './SidebarBackButton.es6.js'
7-
import SidebarHeaderActionButton from './SidebarHeaderActionButton.es6.js'
86
import Button from '../../../form/button/Button.es6.js'
97
import { B12Logo } from '../../../Icons.es6.js'
8+
import ActionDropdown from './ActionDropdown.es6.js'
109

1110
class SidebarHeader extends React.Component {
1211
state = {
@@ -74,42 +73,62 @@ class SidebarHeader extends React.Component {
7473
quickDialog,
7574
showLogo,
7675
steps,
77-
title
76+
title,
77+
showManagerSwitcher,
7878
} = this.props
7979
const { actionsAvailable, actionsVisible } = this.state
8080

8181
return (
8282
<Fragment>
83-
<div className="ds-sidebar__header">
84-
<div className="ds-sidebar__header-back">
85-
{showLogo && <B12Logo color="#6548c7" width={46} height={20} viewBox="0 0 200 80" className="ds-sidebar__header-logo" />}
86-
87-
{!showLogo && backButton && onBack && (
88-
<SidebarBackButton
89-
text={backButtonText}
90-
hideText={isScrollingDown}
91-
onClick={onBack}
92-
/>
93-
)}
94-
95-
{!showLogo && !backButton && leftAction}
96-
97-
{homeButton && (
98-
<React.Fragment>
99-
<div className="ds-sidebar__header-divider" />
100-
{!isScrollingDown && (
101-
<Button
102-
small
103-
className="ds-sidebar__header-home"
104-
icon={<B12Logo width={30} height={20} color="#84839c" viewBox="0 0 200 80" />}
105-
onClick={onHomeClick}
106-
/>
107-
)}
108-
</React.Fragment>
109-
)}
110-
111-
{isScrollingDown && <div>{title}</div>}
112-
</div>
83+
<div className={classnames('ds-sidebar__header', { 'ds-sidebar__header--website-manager': showManagerSwitcher })}>
84+
{!showManagerSwitcher && (
85+
<div className="ds-sidebar__header-back">
86+
{showLogo && <B12Logo color="#6548c7" width={46} height={20} viewBox="0 0 200 80" className="ds-sidebar__header-logo" />}
87+
88+
{!showLogo && backButton && onBack && (
89+
<SidebarBackButton
90+
text={backButtonText}
91+
hideText={isScrollingDown}
92+
onClick={onBack}
93+
/>
94+
)}
95+
96+
{!showLogo && !backButton && leftAction}
97+
98+
{homeButton && (
99+
<React.Fragment>
100+
<div className="ds-sidebar__header-divider" />
101+
{!isScrollingDown && (
102+
<Button
103+
small
104+
className="ds-sidebar__header-home"
105+
icon={<B12Logo width={30} height={20} color="#84839c" viewBox="0 0 200 80" />}
106+
onClick={onHomeClick}
107+
/>
108+
)}
109+
</React.Fragment>
110+
)}
111+
112+
{isScrollingDown && <div>{title}</div>}
113+
</div>
114+
)}
115+
116+
{/* Show actions dropdown under B12 logo if AI website manager is available */}
117+
{showManagerSwitcher && (
118+
<ActionDropdown
119+
ref={this.actionsRef}
120+
icon={<B12Logo color="#6548c7" width={46} height={20} viewBox="0 0 200 80" className="ds-sidebar__header-logo" />}
121+
onClick={this.onAction}
122+
actionsAvailable={actionsAvailable}
123+
actionsVisible={actionsVisible}
124+
setActionsVisibility={(state) => this.setState({ actionsVisible: state })}
125+
quickDialog={quickDialog}
126+
quickActions={quickActions}
127+
dropdownMenuLabel={dropdownMenuLabel}
128+
onQuickActionSelected={onQuickActionSelected}
129+
isLogoDropDown
130+
/>)
131+
}
113132

114133
{!children && steps && (
115134
<div className="ds-sidebar__header-title">
@@ -120,37 +139,21 @@ class SidebarHeader extends React.Component {
120139

121140
{children}
122141

123-
<div
124-
className={classnames({
125-
'ds-dropdown': actionsAvailable && actionIcon,
126-
'ds-dropdown--right': actionsAvailable && actionIcon,
127-
'ds-dropdown--menu-visible': actionsAvailable && actionsVisible,
128-
'ds-sidebar__header-action': !actionsAvailable
129-
})}
130-
ref={this.actionsRef}
131-
>
132-
{actionIcon && (
133-
<SidebarHeaderActionButton
134-
dropdown={actionsAvailable}
135-
icon={actionIcon}
136-
onClick={this.onAction}
137-
/>
138-
)}
139-
140-
{quickDialog}
141-
142-
{actionsVisible && (
143-
<QuickActions
144-
actions={quickActions}
145-
label={dropdownMenuLabel}
146-
onSelect={(idx) => {
147-
this.setState({ actionsVisible: false }, () => {
148-
onQuickActionSelected && onQuickActionSelected(idx)
149-
})
150-
}}
151-
/>
152-
)}
153-
</div>
142+
{!showManagerSwitcher && (
143+
<ActionDropdown
144+
ref={this.actionsRef}
145+
icon={actionIcon}
146+
onClick={this.onAction}
147+
actionsAvailable={actionsAvailable}
148+
actionsVisible={actionsVisible}
149+
setActionsVisibility={(state) => this.setState({ actionsVisible: state })}
150+
quickDialog={quickDialog}
151+
quickActions={quickActions}
152+
dropdownMenuLabel={dropdownMenuLabel}
153+
onQuickActionSelected={onQuickActionSelected}
154+
/>)
155+
}
156+
154157
<div
155158
className="ds-sidebar__header-progress"
156159
style={{width: `${progress}%`}}
@@ -177,7 +180,8 @@ SidebarHeader.defaultProps = {
177180
quickActions: [],
178181
showLogo: false,
179182
quickDialog: null,
180-
tabbedNavigation: null
183+
tabbedNavigation: null,
184+
showManagerSwitcher: false,
181185
}
182186

183187
SidebarHeader.propTypes = {
@@ -202,7 +206,8 @@ SidebarHeader.propTypes = {
202206
onQuickActionSelected: PropTypes.func,
203207
showLogo: PropTypes.bool,
204208
quickDialog: PropTypes.element,
205-
tabbedNavigation: PropTypes.element
209+
tabbedNavigation: PropTypes.element,
210+
showManagerSwitcher: PropTypes.bool,
206211
}
207212

208213
export default SidebarHeader

‎package.json‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,6 @@
11
{
22
"name": "@b12/metronome",
3-
"version": "1.1.27",
3+
"version": "1.1.28",
44
"description": "",
55
"main": "index.es6.js",
66
"scripts": {

‎src/react-demo/Icons.es6.js‎

Lines changed: 18 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -22,7 +22,7 @@ import {
2222
Flash, Dashboard, Guides, Article, Pulse, Edit, ContentApproved, Dragger, PaperClip, Invoicing, Banking, Checkbox, Circle, Bank, Card, Contract,
2323
MinusCircle, RepeatCircle, BadgeCard, HeadphonesMic, CheckmarkLarge, NoticeOutlined, Archive, Questionnaire, Upload, ShareFeedback, Spaceship, Zap, Tip, Webpage, LayoutAlternative, GlobeAlternative,
2424
AiAssist, Flows, Highlight, ArrowCircleUp, ArrowUp, EditColor, AiImage, AiLogo, Microphone, ThreeDots, PencilFilled,
25-
Stop
25+
Stop, Revert, ThumbUp, ThumbDown, Forward,
2626
} from '../../components/Icons.es6.js'
2727

2828
const ICONS = [
@@ -780,7 +780,23 @@ const ICONS = [
780780
{
781781
name: 'Stop',
782782
component: Stop
783-
}
783+
},
784+
{
785+
name: 'Revert',
786+
component: Revert
787+
},
788+
{
789+
name: 'ThumbUp',
790+
component: ThumbUp
791+
},
792+
{
793+
name: 'ThumbDown',
794+
component: ThumbDown
795+
},
796+
{
797+
name: 'Forward',
798+
component: Forward
799+
},
784800
]
785801

786802
function Icons () {

‎style/layout/side-pane.scss‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -76,6 +76,19 @@
7676
background-color: $ds-ui-lightest-color;
7777
padding: 0 spacing('md');
7878

79+
&--website-manager {
80+
justify-content: flex-start;
81+
82+
&>.ds-dropdown {
83+
flex-grow: unset !important;
84+
justify-content: unset !important;
85+
}
86+
87+
.ds-dropdown__toggle:after {
88+
right: -10px !important;
89+
}
90+
}
91+
7992
@include breakpoint-tablet-portrait-up {
8093
box-shadow: none;
8194
}

0 commit comments

Comments
 (0)