From c2804eb18068598b2ba1bd96071ff548f306ba20 Mon Sep 17 00:00:00 2001 From: Darya Plotnytska Date: Thu, 4 Jan 2024 11:11:59 +0100 Subject: [PATCH 01/34] console: Add news panel item --- .../components/news-panel/news-item/index.js | 50 +++++++++++++++++++ .../news-panel/news-item/news-item.styl | 39 +++++++++++++++ 2 files changed, 89 insertions(+) create mode 100644 pkg/webui/components/news-panel/news-item/index.js create mode 100644 pkg/webui/components/news-panel/news-item/news-item.styl diff --git a/pkg/webui/components/news-panel/news-item/index.js b/pkg/webui/components/news-panel/news-item/index.js new file mode 100644 index 00000000000..c8bec1afaef --- /dev/null +++ b/pkg/webui/components/news-panel/news-item/index.js @@ -0,0 +1,50 @@ +// Copyright © 2023 The Things Network Foundation, The Things Industries B.V. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import React from 'react' +import classnames from 'classnames' + +import DateTime from '@ttn-lw/lib/components/date-time' +import Message from '@ttn-lw/lib/components/message' + +import PropTypes from '@ttn-lw/lib/prop-types' + +import styles from './news-item.styl' + +const NewsItem = ({ articleTitle, articleImage, articleDate }) => ( +
+ +
+ + +
+
+) + +NewsItem.propTypes = { + articleDate: PropTypes.string.isRequired, + articleImage: PropTypes.string.isRequired, + articleTitle: PropTypes.message.isRequired, +} + +export default NewsItem diff --git a/pkg/webui/components/news-panel/news-item/news-item.styl b/pkg/webui/components/news-panel/news-item/news-item.styl new file mode 100644 index 00000000000..f6d782b6c02 --- /dev/null +++ b/pkg/webui/components/news-panel/news-item/news-item.styl @@ -0,0 +1,39 @@ +// Copyright © 2023 The Things Network Foundation, The Things Industries B.V. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +.item + transition: background-color $ad.m ease-in-out + border-radius: $br.xl + + &:hover + background-color: #F4F7FF + + .image + border-radius: $br.l + border: 1px solid $c.grey-200 + height: 5rem + width: auto + + .title + width: 100% + font-weight: 700 + color: #181A2F + overflow: hidden + display: -webkit-box + -webkit-box-orient: vertical + -webkit-line-clamp: 2 /* start showing ellipsis when 2nd line is reached */ + white-space: pre-wrap + + .date + color: #5E6281 \ No newline at end of file From ae731de678f8b3c022e51e43c910316aea57e9fc Mon Sep 17 00:00:00 2001 From: Darya Plotnytska Date: Thu, 4 Jan 2024 11:12:17 +0100 Subject: [PATCH 02/34] console: Add panel component --- .../components/news-panel/news-item/story.js | 34 +++++++++ pkg/webui/components/panel/index.js | 71 +++++++++++++++++++ pkg/webui/components/panel/panel.styl | 38 ++++++++++ pkg/webui/components/panel/story.js | 55 ++++++++++++++ 4 files changed, 198 insertions(+) create mode 100644 pkg/webui/components/news-panel/news-item/story.js create mode 100644 pkg/webui/components/panel/index.js create mode 100644 pkg/webui/components/panel/panel.styl create mode 100644 pkg/webui/components/panel/story.js diff --git a/pkg/webui/components/news-panel/news-item/story.js b/pkg/webui/components/news-panel/news-item/story.js new file mode 100644 index 00000000000..84f5811ec9c --- /dev/null +++ b/pkg/webui/components/news-panel/news-item/story.js @@ -0,0 +1,34 @@ +// Copyright © 2023 The Things Network Foundation, The Things Industries B.V. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import React from 'react' + +import loginVisual from '@assets/img/layout/bg/login-visual.jpg' + +import NewsItem from '.' + +export default { + title: 'NewsPanel/News Item', + component: NewsItem, +} + +export const Default = () => ( +
+ +
+) diff --git a/pkg/webui/components/panel/index.js b/pkg/webui/components/panel/index.js new file mode 100644 index 00000000000..46790ee4cf2 --- /dev/null +++ b/pkg/webui/components/panel/index.js @@ -0,0 +1,71 @@ +// Copyright © 2023 The Things Network Foundation, The Things Industries B.V. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import React from 'react' + +import Message from '@ttn-lw/lib/components/message' + +import PropTypes from '@ttn-lw/lib/prop-types' + +import Icon from '../icon' +import Button from '../button' + +import Toggle from './toggle' + +import styles from './panel.styl' + +const Panel = ({ + children, + title, + icon, + toggleOptions, + activeToggle, + onToggleClick, + buttonTitle, +}) => ( +
+
+
+ {icon && } + +
+ {toggleOptions ? ( + + ) : ( +
+ {children} +
+) + +Panel.propTypes = { + activeToggle: PropTypes.string, + buttonTitle: PropTypes.string, + children: PropTypes.node.isRequired, + icon: PropTypes.string, + onToggleClick: PropTypes.func, + title: PropTypes.message.isRequired, + toggleOptions: PropTypes.arrayOf(PropTypes.shape({})), +} + +Panel.defaultProps = { + buttonTitle: undefined, + icon: undefined, + toggleOptions: undefined, + activeToggle: undefined, + onToggleClick: () => null, +} + +export default Panel diff --git a/pkg/webui/components/panel/panel.styl b/pkg/webui/components/panel/panel.styl new file mode 100644 index 00000000000..a3d6894df45 --- /dev/null +++ b/pkg/webui/components/panel/panel.styl @@ -0,0 +1,38 @@ +// Copyright © 2023 The Things Network Foundation, The Things Industries B.V. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +.panel + min-width: 32.5rem + max-width: 52.071rem + border-radius: $br.xl + border: 1px solid $c.grey-200 + background-color: $c.white + box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.09) + padding: $cs.xl + + .button + reset-button() + color: #1E5DFF + font-weight: 590 + + &:hover + text-decoration: underline + + .icon + font-size: 1.5rem !important + + .title + font-weight: 700 + font-size: 1.25rem + line-height: 1 \ No newline at end of file diff --git a/pkg/webui/components/panel/story.js b/pkg/webui/components/panel/story.js new file mode 100644 index 00000000000..61871303af1 --- /dev/null +++ b/pkg/webui/components/panel/story.js @@ -0,0 +1,55 @@ +// Copyright © 2023 The Things Network Foundation, The Things Industries B.V. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import React from 'react' + +import Panel from '.' + +export default { + title: 'Panel', + component: Panel, +} + +export const Default = () => ( +
+ +
+) + +const Example = props => { + const [active, setActive] = React.useState('option-1') + + const handleChange = React.useCallback( + (_, value) => { + setActive(value) + }, + [setActive], + ) + + return +} + +export const WithToggle = () => { + const options = [ + { label: 'Option 1', value: 'option-1' }, + { label: 'Option 2', value: 'option-2' }, + { label: 'Option 3', value: 'option-3' }, + ] + + return ( +
+ +
+ ) +} From 8411c02dfe91755c30a9b98d3e201b6f35910d52 Mon Sep 17 00:00:00 2001 From: Darya Plotnytska Date: Thu, 4 Jan 2024 11:12:38 +0100 Subject: [PATCH 03/34] console: Add toggle --- pkg/webui/components/panel/toggle/index.js | 56 +++++++++++++++++++ pkg/webui/components/panel/toggle/toggle.styl | 32 +++++++++++ 2 files changed, 88 insertions(+) create mode 100644 pkg/webui/components/panel/toggle/index.js create mode 100644 pkg/webui/components/panel/toggle/toggle.styl diff --git a/pkg/webui/components/panel/toggle/index.js b/pkg/webui/components/panel/toggle/index.js new file mode 100644 index 00000000000..edba9be2462 --- /dev/null +++ b/pkg/webui/components/panel/toggle/index.js @@ -0,0 +1,56 @@ +// Copyright © 2023 The Things Network Foundation, The Things Industries B.V. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import React from 'react' +import classnames from 'classnames' + +import Button from '@ttn-lw/components/button' + +import PropTypes from '@ttn-lw/lib/prop-types' + +import styles from './toggle.styl' + +const Toggle = ({ options, onToggleChange, active }) => ( +
+ {options.map(({ label, value }) => { + const buttonClassName = classnames(styles.button, { + [styles.buttonActive]: value === active, + }) + + return ( +
+) + +Toggle.propTypes = { + active: PropTypes.string.isRequired, + onToggleChange: PropTypes.func.isRequired, + options: PropTypes.arrayOf( + PropTypes.shape({ + label: PropTypes.string.isRequired, + value: PropTypes.string.isRequired, + }), + ).isRequired, +} + +export default Toggle diff --git a/pkg/webui/components/panel/toggle/toggle.styl b/pkg/webui/components/panel/toggle/toggle.styl new file mode 100644 index 00000000000..4309483908e --- /dev/null +++ b/pkg/webui/components/panel/toggle/toggle.styl @@ -0,0 +1,32 @@ +// Copyright © 2023 The Things Network Foundation, The Things Industries B.V. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +.toggle + border-radius: $br.l + border: 1px solid $c.grey-200 + background: $c-focus + + .button + reset-button() + border-radius: $br.m + padding: 0 $cs.s + height: 2.25rem + + &-active + border: 1px solid $c.grey-200 + background: $c.white + font-weight: 510 + + &:hover:not(.button-active) + background: $c.grey-100 \ No newline at end of file From 9dbc5a4aab71033bfcbba7170cc97e6c029ba158 Mon Sep 17 00:00:00 2001 From: Darya Plotnytska Date: Thu, 4 Jan 2024 11:12:55 +0100 Subject: [PATCH 04/34] console: Add shortcuts panel item --- .../shortcut-panel/shortcut-item/index.js | 47 ++++++++++++++++++ .../shortcut-item/shortcut-item.styl | 48 +++++++++++++++++++ .../shortcut-panel/shortcut-item/story.js | 28 +++++++++++ 3 files changed, 123 insertions(+) create mode 100644 pkg/webui/components/shortcut-panel/shortcut-item/index.js create mode 100644 pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl create mode 100644 pkg/webui/components/shortcut-panel/shortcut-item/story.js diff --git a/pkg/webui/components/shortcut-panel/shortcut-item/index.js b/pkg/webui/components/shortcut-panel/shortcut-item/index.js new file mode 100644 index 00000000000..9a79f344867 --- /dev/null +++ b/pkg/webui/components/shortcut-panel/shortcut-item/index.js @@ -0,0 +1,47 @@ +// Copyright © 2023 The Things Network Foundation, The Things Industries B.V. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import React from 'react' +import { NavLink } from 'react-router-dom' +import classNames from 'classnames' + +import Icon from '@ttn-lw/components/icon' + +import Message from '@ttn-lw/lib/components/message' + +import PropTypes from '@ttn-lw/lib/prop-types' + +import style from './shortcut-item.styl' + +const ShortcutItem = ({ icon, title, link }) => ( + + + + + +) + +ShortcutItem.propTypes = { + icon: PropTypes.string.isRequired, + link: PropTypes.string.isRequired, + title: PropTypes.message.isRequired, +} + +export default ShortcutItem diff --git a/pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl b/pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl new file mode 100644 index 00000000000..e8f97a004e7 --- /dev/null +++ b/pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl @@ -0,0 +1,48 @@ +// Copyright © 2023 The Things Network Foundation, The Things Industries B.V. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +.shortcut + transition: $ad.m all ease-in-out + text-decoration: none + height: 10.7rem + border-radius: $br.l + background: $c.tts-primary + color: $c.white + font-size: $fs.s + font-weight: 590 + + .icon + font-size: 2rem !important + display: block + + .add-icon + font-size: 2.5rem !important + display: none + + .title + display: block + + &:hover + background: #194FDA + + .title + display: none + + .icon + font-size: 2rem !important + display: none + + .add-icon + font-size: 2.5rem !important + display: block \ No newline at end of file diff --git a/pkg/webui/components/shortcut-panel/shortcut-item/story.js b/pkg/webui/components/shortcut-panel/shortcut-item/story.js new file mode 100644 index 00000000000..d7ff104f08f --- /dev/null +++ b/pkg/webui/components/shortcut-panel/shortcut-item/story.js @@ -0,0 +1,28 @@ +// Copyright © 2023 The Things Network Foundation, The Things Industries B.V. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import React from 'react' + +import ShortcutItem from '.' + +export default { + title: 'Shortcut/Shortcut Item', + component: ShortcutItem, +} + +export const Default = () => ( +
+ +
+) From a93079b553e85bec635ad3e3eedf01e3b59c9622 Mon Sep 17 00:00:00 2001 From: Darya Plotnytska Date: Thu, 4 Jan 2024 11:13:25 +0100 Subject: [PATCH 05/34] console: Add status label --- pkg/webui/components/status-label/index.js | 63 +++++++++++++++++++ .../components/status-label/status-label.styl | 34 ++++++++++ pkg/webui/components/status-label/story.js | 41 ++++++++++++ 3 files changed, 138 insertions(+) create mode 100644 pkg/webui/components/status-label/index.js create mode 100644 pkg/webui/components/status-label/status-label.styl create mode 100644 pkg/webui/components/status-label/story.js diff --git a/pkg/webui/components/status-label/index.js b/pkg/webui/components/status-label/index.js new file mode 100644 index 00000000000..ad00db09730 --- /dev/null +++ b/pkg/webui/components/status-label/index.js @@ -0,0 +1,63 @@ +// Copyright © 2023 The Things Network Foundation, The Things Industries B.V. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import React from 'react' +import classnames from 'classnames' + +import Message from '@ttn-lw/lib/components/message' + +import PropTypes from '@ttn-lw/lib/prop-types' + +import Icon from '../icon' + +import style from './status-label.styl' + +const StatusLabel = ({ success, warning, error, info, content }) => { + const statusClassName = classnames( + style.label, + { + [style.success]: success, + [style.warning]: warning, + [style.error]: error, + [style.info]: info, + }, + 'd-flex gap-cs-xs al-center j-center p-vert-cs-s p-sides-cs-m', + ) + + const labelIcon = success ? 'check_circle' : warning ? 'warning' : error ? 'error' : 'info' + + return ( +
+ + +
+ ) +} + +StatusLabel.propTypes = { + content: PropTypes.message.isRequired, + error: PropTypes.bool, + info: PropTypes.bool, + success: PropTypes.bool, + warning: PropTypes.bool, +} + +StatusLabel.defaultProps = { + success: false, + warning: false, + error: false, + info: false, +} + +export default StatusLabel diff --git a/pkg/webui/components/status-label/status-label.styl b/pkg/webui/components/status-label/status-label.styl new file mode 100644 index 00000000000..311029e9a47 --- /dev/null +++ b/pkg/webui/components/status-label/status-label.styl @@ -0,0 +1,34 @@ +// Copyright © 2023 The Things Network Foundation, The Things Industries B.V. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +.label + border-radius: 2rem + font-weight: 590 + width: fit-content + + &.success + background: #DCFCD3 + color: #076237 + + &.warning + background: #FEC + color: #7A4700 + + &.error + background: #FFEBEB + color: #930026 + + &.info + background: #EAF5FF + color: #00527C \ No newline at end of file diff --git a/pkg/webui/components/status-label/story.js b/pkg/webui/components/status-label/story.js new file mode 100644 index 00000000000..c028a5f9981 --- /dev/null +++ b/pkg/webui/components/status-label/story.js @@ -0,0 +1,41 @@ +// Copyright © 2023 The Things Network Foundation, The Things Industries B.V. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import StatusLabel from '.' + +export default { + title: 'Status Label', + component: StatusLabel, +} + +export const Default = { + argTypes: { + content: { + control: 'text', + defaultValue: 'Label', + }, + error: { + control: 'boolean', + }, + success: { + control: 'boolean', + }, + warning: { + control: 'boolean', + }, + info: { + control: 'boolean', + }, + }, +} From b4000d53b6b7d6ce815a4d2a08b239bd953825b0 Mon Sep 17 00:00:00 2001 From: Darya Plotnytska Date: Thu, 4 Jan 2024 11:13:42 +0100 Subject: [PATCH 06/34] console: Update tabs component --- pkg/webui/components/tabs/story.js | 2 +- pkg/webui/components/tabs/tab/tab.styl | 5 ++++- pkg/webui/components/tabs/tabs.styl | 5 +---- pkg/webui/styles/variables/generic.styl | 2 +- 4 files changed, 7 insertions(+), 7 deletions(-) diff --git a/pkg/webui/components/tabs/story.js b/pkg/webui/components/tabs/story.js index 2548867409d..e1d43b5388d 100644 --- a/pkg/webui/components/tabs/story.js +++ b/pkg/webui/components/tabs/story.js @@ -86,7 +86,7 @@ export const WithIcons = () => { { title: 'Data', name: 'data', icon: 'data' }, ] - return + return } WithIcons.story = { diff --git a/pkg/webui/components/tabs/tab/tab.styl b/pkg/webui/components/tabs/tab/tab.styl index af6a3bf7b24..b3661df0373 100644 --- a/pkg/webui/components/tabs/tab/tab.styl +++ b/pkg/webui/components/tabs/tab/tab.styl @@ -21,13 +21,16 @@ .tab-item display: flex + align-items: center white-space: nowrap - padding: $cs.m $cs.l + padding: $cs.m + gap: $cs.s text-align: center position: relative cursor: pointer user-select: none transition: color $ad.xs + color: #929196 &-narrow padding: $cs.s $cs.m diff --git a/pkg/webui/components/tabs/tabs.styl b/pkg/webui/components/tabs/tabs.styl index 0db1cd04302..840e4ae1e5b 100644 --- a/pkg/webui/components/tabs/tabs.styl +++ b/pkg/webui/components/tabs/tabs.styl @@ -23,8 +23,5 @@ &::-webkit-scrollbar display: none - .icon - margin-right: $cs.xs - .divider - border-normal('bottom') + border-bottom: 1px solid #E8E7EC diff --git a/pkg/webui/styles/variables/generic.styl b/pkg/webui/styles/variables/generic.styl index f791a876fa2..ea646beee0d 100644 --- a/pkg/webui/styles/variables/generic.styl +++ b/pkg/webui/styles/variables/generic.styl @@ -108,7 +108,7 @@ $br = { 's': 0.4rem, 'm': 0.5rem, 'l': 0.75rem, - 'xl': 0.9rem, + 'xl': 1rem, 'xxl': 1.25rem, 'xl3': 3rem } From 06761adccef4da64f421ebd367414352149ebf84 Mon Sep 17 00:00:00 2001 From: Darya Plotnytska Date: Mon, 8 Jan 2024 09:31:43 +0100 Subject: [PATCH 07/34] console: Fix font sizes, font weights and border radiuses --- pkg/webui/components/news-panel/news-item/news-item.styl | 2 +- pkg/webui/components/panel/panel.styl | 8 ++++---- pkg/webui/components/panel/toggle/toggle.styl | 2 +- .../shortcut-panel/shortcut-item/shortcut-item.styl | 2 +- pkg/webui/components/status-label/status-label.styl | 2 +- pkg/webui/styles/variables/generic.styl | 8 +++++++- 6 files changed, 15 insertions(+), 9 deletions(-) diff --git a/pkg/webui/components/news-panel/news-item/news-item.styl b/pkg/webui/components/news-panel/news-item/news-item.styl index f6d782b6c02..5f9c70ebdf2 100644 --- a/pkg/webui/components/news-panel/news-item/news-item.styl +++ b/pkg/webui/components/news-panel/news-item/news-item.styl @@ -27,7 +27,7 @@ .title width: 100% - font-weight: 700 + font-weight: $fwv2.bold color: #181A2F overflow: hidden display: -webkit-box diff --git a/pkg/webui/components/panel/panel.styl b/pkg/webui/components/panel/panel.styl index a3d6894df45..979f43ef13e 100644 --- a/pkg/webui/components/panel/panel.styl +++ b/pkg/webui/components/panel/panel.styl @@ -14,7 +14,7 @@ .panel min-width: 32.5rem - max-width: 52.071rem + max-width: 52rem border-radius: $br.xl border: 1px solid $c.grey-200 background-color: $c.white @@ -24,7 +24,7 @@ .button reset-button() color: #1E5DFF - font-weight: 590 + font-weight: $fwv2.semibold &:hover text-decoration: underline @@ -33,6 +33,6 @@ font-size: 1.5rem !important .title - font-weight: 700 - font-size: 1.25rem + font-weight: $fwv2.bold + font-size: $fsv2.l line-height: 1 \ No newline at end of file diff --git a/pkg/webui/components/panel/toggle/toggle.styl b/pkg/webui/components/panel/toggle/toggle.styl index 4309483908e..c9492482678 100644 --- a/pkg/webui/components/panel/toggle/toggle.styl +++ b/pkg/webui/components/panel/toggle/toggle.styl @@ -26,7 +26,7 @@ &-active border: 1px solid $c.grey-200 background: $c.white - font-weight: 510 + font-weight: $fwv2.regular &:hover:not(.button-active) background: $c.grey-100 \ No newline at end of file diff --git a/pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl b/pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl index e8f97a004e7..056dbc07205 100644 --- a/pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl +++ b/pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl @@ -20,7 +20,7 @@ background: $c.tts-primary color: $c.white font-size: $fs.s - font-weight: 590 + font-weight: $fwv2.semibold .icon font-size: 2rem !important diff --git a/pkg/webui/components/status-label/status-label.styl b/pkg/webui/components/status-label/status-label.styl index 311029e9a47..9c6afda3d8a 100644 --- a/pkg/webui/components/status-label/status-label.styl +++ b/pkg/webui/components/status-label/status-label.styl @@ -14,7 +14,7 @@ .label border-radius: 2rem - font-weight: 590 + font-weight: $fwv2.semibold width: fit-content &.success diff --git a/pkg/webui/styles/variables/generic.styl b/pkg/webui/styles/variables/generic.styl index ea646beee0d..f15b0c245b7 100644 --- a/pkg/webui/styles/variables/generic.styl +++ b/pkg/webui/styles/variables/generic.styl @@ -70,6 +70,12 @@ $fs = { 'xl4': 3.428rem // ~48px } +$fsv2 = { + 's': 0.75rem, + 'm': 1rem, + 'l': 1.25rem +} + // Corresponding default line heights. $lh = { 's': $line-height-base @@ -90,7 +96,7 @@ $fwv2 = { 'regular': 400, 'medium': 500, 'semibold': 600, - 'bold': 800, + 'bold': 700, } // Font weights for headings From 59254fae427b7af4ea4b991fa2589cdd579cf92a Mon Sep 17 00:00:00 2001 From: Darya Plotnytska Date: Wed, 17 Jan 2024 16:07:35 +0100 Subject: [PATCH 08/34] console: Fix styling --- pkg/webui/components/panel/index.js | 4 ++-- pkg/webui/components/panel/panel.styl | 15 ++++++++------- pkg/webui/components/panel/toggle/index.js | 4 ++-- pkg/webui/components/panel/toggle/toggle.styl | 6 +++--- .../shortcut-item/shortcut-item.styl | 18 +++++++++--------- 5 files changed, 24 insertions(+), 23 deletions(-) diff --git a/pkg/webui/components/panel/index.js b/pkg/webui/components/panel/index.js index 46790ee4cf2..085b6f06131 100644 --- a/pkg/webui/components/panel/index.js +++ b/pkg/webui/components/panel/index.js @@ -37,8 +37,8 @@ const Panel = ({
- {icon && } - + {icon && } +
{toggleOptions ? ( diff --git a/pkg/webui/components/panel/panel.styl b/pkg/webui/components/panel/panel.styl index 979f43ef13e..452f950577d 100644 --- a/pkg/webui/components/panel/panel.styl +++ b/pkg/webui/components/panel/panel.styl @@ -21,6 +21,12 @@ box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.09) padding: $cs.xl + &-header + &-title + font-weight: $fwv2.bold + font-size: $fsv2.l + line-height: 1 + .button reset-button() color: #1E5DFF @@ -29,10 +35,5 @@ &:hover text-decoration: underline - .icon - font-size: 1.5rem !important - - .title - font-weight: $fwv2.bold - font-size: $fsv2.l - line-height: 1 \ No newline at end of file +span.panel-header-icon + font-size: 1.5rem diff --git a/pkg/webui/components/panel/toggle/index.js b/pkg/webui/components/panel/toggle/index.js index edba9be2462..e7f62eaa6db 100644 --- a/pkg/webui/components/panel/toggle/index.js +++ b/pkg/webui/components/panel/toggle/index.js @@ -24,8 +24,8 @@ import styles from './toggle.styl' const Toggle = ({ options, onToggleChange, active }) => (
{options.map(({ label, value }) => { - const buttonClassName = classnames(styles.button, { - [styles.buttonActive]: value === active, + const buttonClassName = classnames(styles.toggleButton, { + [styles.toggleButtonActive]: value === active, }) return ( diff --git a/pkg/webui/components/panel/toggle/toggle.styl b/pkg/webui/components/panel/toggle/toggle.styl index c9492482678..e45c61b4205 100644 --- a/pkg/webui/components/panel/toggle/toggle.styl +++ b/pkg/webui/components/panel/toggle/toggle.styl @@ -17,7 +17,7 @@ border: 1px solid $c.grey-200 background: $c-focus - .button + &-button reset-button() border-radius: $br.m padding: 0 $cs.s @@ -28,5 +28,5 @@ background: $c.white font-weight: $fwv2.regular - &:hover:not(.button-active) - background: $c.grey-100 \ No newline at end of file + &:hover:not(.toggle-button-active) + background: $c.grey-100 diff --git a/pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl b/pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl index 056dbc07205..d564f8a0f0a 100644 --- a/pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl +++ b/pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl @@ -22,12 +22,12 @@ font-size: $fs.s font-weight: $fwv2.semibold - .icon - font-size: 2rem !important + span.icon + font-size: 2rem display: block - .add-icon - font-size: 2.5rem !important + span.add-icon + font-size: 2.5rem display: none .title @@ -39,10 +39,10 @@ .title display: none - .icon - font-size: 2rem !important + span.icon + font-size: 2rem display: none - .add-icon - font-size: 2.5rem !important - display: block \ No newline at end of file + span.add-icon + font-size: 2.5rem + display: block From e49d8064b643cb9c4394b17887e98a189a41d463 Mon Sep 17 00:00:00 2001 From: Darya Plotnytska Date: Wed, 17 Jan 2024 16:16:41 +0100 Subject: [PATCH 09/34] console: Improve storybook section --- pkg/webui/components/news-panel/news-item/story.js | 2 +- pkg/webui/components/shortcut-panel/shortcut-item/story.js | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/pkg/webui/components/news-panel/news-item/story.js b/pkg/webui/components/news-panel/news-item/story.js index 84f5811ec9c..1f813648165 100644 --- a/pkg/webui/components/news-panel/news-item/story.js +++ b/pkg/webui/components/news-panel/news-item/story.js @@ -19,7 +19,7 @@ import loginVisual from '@assets/img/layout/bg/login-visual.jpg' import NewsItem from '.' export default { - title: 'NewsPanel/News Item', + title: 'Panel/News Panel/News Item', component: NewsItem, } diff --git a/pkg/webui/components/shortcut-panel/shortcut-item/story.js b/pkg/webui/components/shortcut-panel/shortcut-item/story.js index d7ff104f08f..80908aaf92e 100644 --- a/pkg/webui/components/shortcut-panel/shortcut-item/story.js +++ b/pkg/webui/components/shortcut-panel/shortcut-item/story.js @@ -17,7 +17,7 @@ import React from 'react' import ShortcutItem from '.' export default { - title: 'Shortcut/Shortcut Item', + title: 'Panel/Shortcut Panel/Shortcut Item', component: ShortcutItem, } From 79ec7966d82320ae41f944bb022495a9b546cc32 Mon Sep 17 00:00:00 2001 From: Darya Plotnytska Date: Tue, 23 Jan 2024 13:11:15 +0100 Subject: [PATCH 10/34] console: Fix panel --- pkg/webui/components/panel/index.js | 20 ++++++++++++++++---- pkg/webui/components/panel/panel.styl | 3 ++- 2 files changed, 18 insertions(+), 5 deletions(-) diff --git a/pkg/webui/components/panel/index.js b/pkg/webui/components/panel/index.js index 085b6f06131..e1d84433354 100644 --- a/pkg/webui/components/panel/index.js +++ b/pkg/webui/components/panel/index.js @@ -13,13 +13,14 @@ // limitations under the License. import React from 'react' +import classnames from 'classnames' import Message from '@ttn-lw/lib/components/message' import PropTypes from '@ttn-lw/lib/prop-types' import Icon from '../icon' -import Button from '../button' +import Link from '../link' import Toggle from './toggle' @@ -33,17 +34,23 @@ const Panel = ({ activeToggle, onToggleClick, buttonTitle, + path, + className, + messageDecorators, }) => ( -
-
+
+
{icon && } + {messageDecorators}
{toggleOptions ? ( ) : ( -
{children} @@ -54,8 +61,11 @@ Panel.propTypes = { activeToggle: PropTypes.string, buttonTitle: PropTypes.string, children: PropTypes.node.isRequired, + className: PropTypes.string, icon: PropTypes.string, + messageDecorators: PropTypes.node, onToggleClick: PropTypes.func, + path: PropTypes.string.isRequired, title: PropTypes.message.isRequired, toggleOptions: PropTypes.arrayOf(PropTypes.shape({})), } @@ -66,6 +76,8 @@ Panel.defaultProps = { toggleOptions: undefined, activeToggle: undefined, onToggleClick: () => null, + className: undefined, + messageDecorators: undefined, } export default Panel diff --git a/pkg/webui/components/panel/panel.styl b/pkg/webui/components/panel/panel.styl index 452f950577d..cd5242f6f25 100644 --- a/pkg/webui/components/panel/panel.styl +++ b/pkg/webui/components/panel/panel.styl @@ -28,11 +28,12 @@ line-height: 1 .button - reset-button() color: #1E5DFF font-weight: $fwv2.semibold + text-decoration: none &:hover + color: #1E5DFF text-decoration: underline span.panel-header-icon From 2aa48f9537736e46dbbe813f226cec4c7586cd82 Mon Sep 17 00:00:00 2001 From: Darya Plotnytska Date: Tue, 23 Jan 2024 13:42:23 +0100 Subject: [PATCH 11/34] console: Update panel styling --- config/storybook/preview.js | 1 - .../news-panel/news-item/news-item.styl | 9 +++++---- pkg/webui/components/panel/panel.styl | 7 +++---- pkg/webui/components/panel/story.js | 2 +- pkg/webui/components/panel/toggle/toggle.styl | 11 ++++++----- .../shortcut-item/shortcut-item.styl | 11 ++++++----- .../components/status-label/status-label.styl | 16 ++++++++-------- 7 files changed, 29 insertions(+), 28 deletions(-) diff --git a/config/storybook/preview.js b/config/storybook/preview.js index cc9ccea1ae4..4978a5b16f5 100644 --- a/config/storybook/preview.js +++ b/config/storybook/preview.js @@ -24,7 +24,6 @@ import messages from '@ttn-lw/locales/en.json' import backendMessages from '@ttn-lw/locales/.backend/en.json' import '../../pkg/webui/styles/main.styl' -import '../../pkg/webui/styles/utilities/color.styl' import '../../pkg/webui/styles/utilities/general.styl' import '../../pkg/webui/styles/utilities/spacing.styl' import 'focus-visible/dist/focus-visible' diff --git a/pkg/webui/components/news-panel/news-item/news-item.styl b/pkg/webui/components/news-panel/news-item/news-item.styl index 5f9c70ebdf2..00a433e9ac4 100644 --- a/pkg/webui/components/news-panel/news-item/news-item.styl +++ b/pkg/webui/components/news-panel/news-item/news-item.styl @@ -17,18 +17,19 @@ border-radius: $br.xl &:hover - background-color: #F4F7FF + cursor: pointer + background-color: var(--c-bg-neutral-min-hover) .image border-radius: $br.l - border: 1px solid $c.grey-200 + border: 1px solid var(--c-border-neutral-light) height: 5rem width: auto .title width: 100% font-weight: $fwv2.bold - color: #181A2F + color: var(--c-text-neutral-heavy) overflow: hidden display: -webkit-box -webkit-box-orient: vertical @@ -36,4 +37,4 @@ white-space: pre-wrap .date - color: #5E6281 \ No newline at end of file + color: var(--c-text-neutral-light) \ No newline at end of file diff --git a/pkg/webui/components/panel/panel.styl b/pkg/webui/components/panel/panel.styl index cd5242f6f25..e10a1aa6844 100644 --- a/pkg/webui/components/panel/panel.styl +++ b/pkg/webui/components/panel/panel.styl @@ -16,8 +16,8 @@ min-width: 32.5rem max-width: 52rem border-radius: $br.xl - border: 1px solid $c.grey-200 - background-color: $c.white + border: 1px solid var(--c-border-neutral-light) + background-color: var(--c-bg-neutral-min) box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.09) padding: $cs.xl @@ -28,12 +28,11 @@ line-height: 1 .button - color: #1E5DFF font-weight: $fwv2.semibold text-decoration: none &:hover - color: #1E5DFF + color: var(--c-text-brand-normal) text-decoration: underline span.panel-header-icon diff --git a/pkg/webui/components/panel/story.js b/pkg/webui/components/panel/story.js index 61871303af1..06e37a6e00b 100644 --- a/pkg/webui/components/panel/story.js +++ b/pkg/webui/components/panel/story.js @@ -23,7 +23,7 @@ export default { export const Default = () => (
- +
) diff --git a/pkg/webui/components/panel/toggle/toggle.styl b/pkg/webui/components/panel/toggle/toggle.styl index e45c61b4205..6e07f63df4a 100644 --- a/pkg/webui/components/panel/toggle/toggle.styl +++ b/pkg/webui/components/panel/toggle/toggle.styl @@ -14,8 +14,8 @@ .toggle border-radius: $br.l - border: 1px solid $c.grey-200 - background: $c-focus + border: 1px solid var(--c-border-neutral-light) + background: var(--c-bg-neutral-min) &-button reset-button() @@ -24,9 +24,10 @@ height: 2.25rem &-active - border: 1px solid $c.grey-200 - background: $c.white + color: var(--c-text-neutral-min) + box-shadow: 0px 1px 2px 0px rgba(0, 0, 0, 0.05) + background: var(--c-bg-neutral-heavy) font-weight: $fwv2.regular &:hover:not(.toggle-button-active) - background: $c.grey-100 + background: var(--c-bg-neutral-light) diff --git a/pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl b/pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl index d564f8a0f0a..0d8d1cfa9f8 100644 --- a/pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl +++ b/pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl @@ -13,13 +13,13 @@ // limitations under the License. .shortcut - transition: $ad.m all ease-in-out + transition: $ad.m background ease-in, $ad.m display ease-out text-decoration: none height: 10.7rem border-radius: $br.l - background: $c.tts-primary - color: $c.white - font-size: $fs.s + background: var(--c-bg-brand-normal) + color: var(--c-text-neutral-min) + font-size: $fs.m font-weight: $fwv2.semibold span.icon @@ -34,7 +34,8 @@ display: block &:hover - background: #194FDA + cursor: pointer + background: var(--c-bg-brand-normal-hover) .title display: none diff --git a/pkg/webui/components/status-label/status-label.styl b/pkg/webui/components/status-label/status-label.styl index 9c6afda3d8a..5db2b68c804 100644 --- a/pkg/webui/components/status-label/status-label.styl +++ b/pkg/webui/components/status-label/status-label.styl @@ -18,17 +18,17 @@ width: fit-content &.success - background: #DCFCD3 - color: #076237 + background: var(--c-bg-success-light) + color: var(--c-text-success-bold) &.warning - background: #FEC - color: #7A4700 + background: var(--c-bg-warning-light) + color: var(--c-text-warning-bold) &.error - background: #FFEBEB - color: #930026 + background: var(--c-bg-error-light) + color: var(--c-text-error-bold) &.info - background: #EAF5FF - color: #00527C \ No newline at end of file + background: var(--c-bg-info-light) + color: var(--c-text-info-bold) \ No newline at end of file From 6e01e25007f3b063a511689020a9cfd530b9d7cb Mon Sep 17 00:00:00 2001 From: Darya Plotnytska Date: Wed, 24 Jan 2024 15:24:23 +0100 Subject: [PATCH 12/34] console: Use color utility class --- pkg/webui/components/news-panel/news-item/index.js | 2 +- pkg/webui/components/news-panel/news-item/news-item.styl | 3 --- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/pkg/webui/components/news-panel/news-item/index.js b/pkg/webui/components/news-panel/news-item/index.js index c8bec1afaef..80e03c01409 100644 --- a/pkg/webui/components/news-panel/news-item/index.js +++ b/pkg/webui/components/news-panel/news-item/index.js @@ -35,7 +35,7 @@ const NewsItem = ({ articleTitle, articleImage, articleDate }) => ( month: 'long', day: '2-digit', }} - className={styles.date} + className="c-text-neutral-light" />
diff --git a/pkg/webui/components/news-panel/news-item/news-item.styl b/pkg/webui/components/news-panel/news-item/news-item.styl index 00a433e9ac4..70228df9e9b 100644 --- a/pkg/webui/components/news-panel/news-item/news-item.styl +++ b/pkg/webui/components/news-panel/news-item/news-item.styl @@ -35,6 +35,3 @@ -webkit-box-orient: vertical -webkit-line-clamp: 2 /* start showing ellipsis when 2nd line is reached */ white-space: pre-wrap - - .date - color: var(--c-text-neutral-light) \ No newline at end of file From e4a9fb00317708e8ec48c6fe903a11fcc92a7993 Mon Sep 17 00:00:00 2001 From: Darya Plotnytska Date: Wed, 24 Jan 2024 15:24:52 +0100 Subject: [PATCH 13/34] console: Remove max and min width from panel --- pkg/webui/components/panel/panel.styl | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/pkg/webui/components/panel/panel.styl b/pkg/webui/components/panel/panel.styl index e10a1aa6844..18aa8ef8bcf 100644 --- a/pkg/webui/components/panel/panel.styl +++ b/pkg/webui/components/panel/panel.styl @@ -13,12 +13,11 @@ // limitations under the License. .panel - min-width: 32.5rem - max-width: 52rem + width: 100% border-radius: $br.xl border: 1px solid var(--c-border-neutral-light) background-color: var(--c-bg-neutral-min) - box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.09) + box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.09) // TODO: Convert to token. padding: $cs.xl &-header From c54c135d4fd74e1067dab3545b59a58b77aac366 Mon Sep 17 00:00:00 2001 From: Darya Plotnytska Date: Wed, 24 Jan 2024 15:25:52 +0100 Subject: [PATCH 14/34] console: Merge utility classes and regular class into the styl file --- pkg/webui/components/panel/toggle/index.js | 2 +- pkg/webui/components/panel/toggle/toggle.styl | 5 +++++ .../components/shortcut-panel/shortcut-item/index.js | 9 +-------- .../shortcut-panel/shortcut-item/shortcut-item.styl | 6 ++++++ 4 files changed, 13 insertions(+), 9 deletions(-) diff --git a/pkg/webui/components/panel/toggle/index.js b/pkg/webui/components/panel/toggle/index.js index e7f62eaa6db..a9862411444 100644 --- a/pkg/webui/components/panel/toggle/index.js +++ b/pkg/webui/components/panel/toggle/index.js @@ -22,7 +22,7 @@ import PropTypes from '@ttn-lw/lib/prop-types' import styles from './toggle.styl' const Toggle = ({ options, onToggleChange, active }) => ( -
+
{options.map(({ label, value }) => { const buttonClassName = classnames(styles.toggleButton, { [styles.toggleButtonActive]: value === active, diff --git a/pkg/webui/components/panel/toggle/toggle.styl b/pkg/webui/components/panel/toggle/toggle.styl index 6e07f63df4a..2d64f4ba604 100644 --- a/pkg/webui/components/panel/toggle/toggle.styl +++ b/pkg/webui/components/panel/toggle/toggle.styl @@ -13,6 +13,11 @@ // limitations under the License. .toggle + display: flex + justify-content: center + align-items: center + gap: $cs.xxs + padding: $cs.xxs border-radius: $br.l border: 1px solid var(--c-border-neutral-light) background: var(--c-bg-neutral-min) diff --git a/pkg/webui/components/shortcut-panel/shortcut-item/index.js b/pkg/webui/components/shortcut-panel/shortcut-item/index.js index 9a79f344867..6a5d33eb7af 100644 --- a/pkg/webui/components/shortcut-panel/shortcut-item/index.js +++ b/pkg/webui/components/shortcut-panel/shortcut-item/index.js @@ -14,7 +14,6 @@ import React from 'react' import { NavLink } from 'react-router-dom' -import classNames from 'classnames' import Icon from '@ttn-lw/components/icon' @@ -25,13 +24,7 @@ import PropTypes from '@ttn-lw/lib/prop-types' import style from './shortcut-item.styl' const ShortcutItem = ({ icon, title, link }) => ( - + diff --git a/pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl b/pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl index 0d8d1cfa9f8..6ffb9a5c9e7 100644 --- a/pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl +++ b/pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl @@ -13,6 +13,12 @@ // limitations under the License. .shortcut + display: flex + gap: $cs.m + flex-direction: column + align-items: center + justify-content: center + padding: $cs.s $cs.m transition: $ad.m background ease-in, $ad.m display ease-out text-decoration: none height: 10.7rem From 108c67356413e38630f6a7cab2a89f125fde4955 Mon Sep 17 00:00:00 2001 From: Darya Plotnytska Date: Wed, 24 Jan 2024 15:26:25 +0100 Subject: [PATCH 15/34] console: Use color utility classes to achieve label states --- pkg/webui/components/status-label/index.js | 16 ++++++-------- .../components/status-label/status-label.styl | 21 +++++-------------- 2 files changed, 11 insertions(+), 26 deletions(-) diff --git a/pkg/webui/components/status-label/index.js b/pkg/webui/components/status-label/index.js index ad00db09730..86fc7d8d8b1 100644 --- a/pkg/webui/components/status-label/index.js +++ b/pkg/webui/components/status-label/index.js @@ -24,16 +24,12 @@ import Icon from '../icon' import style from './status-label.styl' const StatusLabel = ({ success, warning, error, info, content }) => { - const statusClassName = classnames( - style.label, - { - [style.success]: success, - [style.warning]: warning, - [style.error]: error, - [style.info]: info, - }, - 'd-flex gap-cs-xs al-center j-center p-vert-cs-s p-sides-cs-m', - ) + const statusClassName = classnames(style.label, { + 'c-bg-success-light c-text-success-bold': success, + 'c-bg-warning-light c-text-warning-bold': warning, + 'c-bg-error-light c-text-error-bold': error, + 'c-bg-info-light c-text-info-bold': info, + }) const labelIcon = success ? 'check_circle' : warning ? 'warning' : error ? 'error' : 'info' diff --git a/pkg/webui/components/status-label/status-label.styl b/pkg/webui/components/status-label/status-label.styl index 5db2b68c804..e6aefa9f748 100644 --- a/pkg/webui/components/status-label/status-label.styl +++ b/pkg/webui/components/status-label/status-label.styl @@ -13,22 +13,11 @@ // limitations under the License. .label + display: flex + gap: $cs.xs + align-items: center + justify-content: center + padding: $cs.s $cs.m border-radius: 2rem font-weight: $fwv2.semibold width: fit-content - - &.success - background: var(--c-bg-success-light) - color: var(--c-text-success-bold) - - &.warning - background: var(--c-bg-warning-light) - color: var(--c-text-warning-bold) - - &.error - background: var(--c-bg-error-light) - color: var(--c-text-error-bold) - - &.info - background: var(--c-bg-info-light) - color: var(--c-text-info-bold) \ No newline at end of file From 2c4240f57e52523c42075a7d4de08b9d8fc7a0c2 Mon Sep 17 00:00:00 2001 From: Darya Plotnytska Date: Wed, 24 Jan 2024 15:29:23 +0100 Subject: [PATCH 16/34] console: Add utility classes into styl class in news item --- pkg/webui/components/news-panel/news-item/index.js | 3 +-- pkg/webui/components/news-panel/news-item/news-item.styl | 3 +++ 2 files changed, 4 insertions(+), 2 deletions(-) diff --git a/pkg/webui/components/news-panel/news-item/index.js b/pkg/webui/components/news-panel/news-item/index.js index 80e03c01409..c7a35db1a91 100644 --- a/pkg/webui/components/news-panel/news-item/index.js +++ b/pkg/webui/components/news-panel/news-item/index.js @@ -13,7 +13,6 @@ // limitations under the License. import React from 'react' -import classnames from 'classnames' import DateTime from '@ttn-lw/lib/components/date-time' import Message from '@ttn-lw/lib/components/message' @@ -23,7 +22,7 @@ import PropTypes from '@ttn-lw/lib/prop-types' import styles from './news-item.styl' const NewsItem = ({ articleTitle, articleImage, articleDate }) => ( -
+
diff --git a/pkg/webui/components/news-panel/news-item/news-item.styl b/pkg/webui/components/news-panel/news-item/news-item.styl index 70228df9e9b..ad0e8ad1686 100644 --- a/pkg/webui/components/news-panel/news-item/news-item.styl +++ b/pkg/webui/components/news-panel/news-item/news-item.styl @@ -13,6 +13,9 @@ // limitations under the License. .item + display: flex + padding: $cs-xs + gap: $cs.m transition: background-color $ad.m ease-in-out border-radius: $br.xl From fd5598f8b2d1ffe4872e81dfce83873f7b7d574a Mon Sep 17 00:00:00 2001 From: Darya Plotnytska Date: Thu, 25 Jan 2024 09:07:13 +0100 Subject: [PATCH 17/34] console: Use Link instead of recreating link behaviour --- pkg/webui/components/news-panel/news-item/index.js | 6 ++++-- pkg/webui/components/news-panel/news-item/news-item.styl | 2 +- 2 files changed, 5 insertions(+), 3 deletions(-) diff --git a/pkg/webui/components/news-panel/news-item/index.js b/pkg/webui/components/news-panel/news-item/index.js index c7a35db1a91..a15ba5c61ef 100644 --- a/pkg/webui/components/news-panel/news-item/index.js +++ b/pkg/webui/components/news-panel/news-item/index.js @@ -14,6 +14,8 @@ import React from 'react' +import Link from '@ttn-lw/components/link' + import DateTime from '@ttn-lw/lib/components/date-time' import Message from '@ttn-lw/lib/components/message' @@ -22,7 +24,7 @@ import PropTypes from '@ttn-lw/lib/prop-types' import styles from './news-item.styl' const NewsItem = ({ articleTitle, articleImage, articleDate }) => ( -
+
@@ -37,7 +39,7 @@ const NewsItem = ({ articleTitle, articleImage, articleDate }) => ( className="c-text-neutral-light" />
-
+ ) NewsItem.propTypes = { diff --git a/pkg/webui/components/news-panel/news-item/news-item.styl b/pkg/webui/components/news-panel/news-item/news-item.styl index ad0e8ad1686..180ce571407 100644 --- a/pkg/webui/components/news-panel/news-item/news-item.styl +++ b/pkg/webui/components/news-panel/news-item/news-item.styl @@ -18,9 +18,9 @@ gap: $cs.m transition: background-color $ad.m ease-in-out border-radius: $br.xl + padding: $cs.xs &:hover - cursor: pointer background-color: var(--c-bg-neutral-min-hover) .image From 0e25c50ba5b8e4b02b964dab97fd96ee669b38b8 Mon Sep 17 00:00:00 2001 From: Darya Plotnytska Date: Thu, 25 Jan 2024 09:07:47 +0100 Subject: [PATCH 18/34] console: Add a panel divider --- pkg/webui/components/panel/index.js | 4 ++++ pkg/webui/components/panel/panel.styl | 6 ++++++ pkg/webui/components/tabs/tab/tab.styl | 2 +- pkg/webui/components/tabs/tabs.styl | 2 +- 4 files changed, 12 insertions(+), 2 deletions(-) diff --git a/pkg/webui/components/panel/index.js b/pkg/webui/components/panel/index.js index e1d84433354..f07aa164613 100644 --- a/pkg/webui/components/panel/index.js +++ b/pkg/webui/components/panel/index.js @@ -37,6 +37,7 @@ const Panel = ({ path, className, messageDecorators, + divider, }) => (
@@ -53,6 +54,7 @@ const Panel = ({ )}
+ {divider &&
} {children}
) @@ -62,6 +64,7 @@ Panel.propTypes = { buttonTitle: PropTypes.string, children: PropTypes.node.isRequired, className: PropTypes.string, + divider: PropTypes.bool, icon: PropTypes.string, messageDecorators: PropTypes.node, onToggleClick: PropTypes.func, @@ -78,6 +81,7 @@ Panel.defaultProps = { onToggleClick: () => null, className: undefined, messageDecorators: undefined, + divider: false, } export default Panel diff --git a/pkg/webui/components/panel/panel.styl b/pkg/webui/components/panel/panel.styl index 18aa8ef8bcf..c962cde1e9b 100644 --- a/pkg/webui/components/panel/panel.styl +++ b/pkg/webui/components/panel/panel.styl @@ -34,5 +34,11 @@ color: var(--c-text-brand-normal) text-decoration: underline + &-divider + border-bottom: 1px solid var(--c-border-neutral-light) + margin-top: $cs.l + margin-bottom: $cs.l + height: 0px + span.panel-header-icon font-size: 1.5rem diff --git a/pkg/webui/components/tabs/tab/tab.styl b/pkg/webui/components/tabs/tab/tab.styl index b3661df0373..edb9a76dc81 100644 --- a/pkg/webui/components/tabs/tab/tab.styl +++ b/pkg/webui/components/tabs/tab/tab.styl @@ -30,7 +30,7 @@ cursor: pointer user-select: none transition: color $ad.xs - color: #929196 + color: var(--c-text-neutral-light) &-narrow padding: $cs.s $cs.m diff --git a/pkg/webui/components/tabs/tabs.styl b/pkg/webui/components/tabs/tabs.styl index 840e4ae1e5b..63849fb1373 100644 --- a/pkg/webui/components/tabs/tabs.styl +++ b/pkg/webui/components/tabs/tabs.styl @@ -24,4 +24,4 @@ display: none .divider - border-bottom: 1px solid #E8E7EC + border-bottom: 1px solid var(--c-border-neutral-light) From f9a3f4d7b23705221e1745ff35a745add9d7d940 Mon Sep 17 00:00:00 2001 From: Darya Plotnytska Date: Thu, 25 Jan 2024 09:08:13 +0100 Subject: [PATCH 19/34] console: Add news items to story --- pkg/webui/components/panel/story.js | 24 +++++++++++++++++++++++- 1 file changed, 23 insertions(+), 1 deletion(-) diff --git a/pkg/webui/components/panel/story.js b/pkg/webui/components/panel/story.js index 06e37a6e00b..48769dc8b12 100644 --- a/pkg/webui/components/panel/story.js +++ b/pkg/webui/components/panel/story.js @@ -14,6 +14,10 @@ import React from 'react' +import loginVisual from '@assets/img/layout/bg/login-visual.jpg' + +import NewsItem from '../news-panel/news-item' + import Panel from '.' export default { @@ -23,7 +27,25 @@ export default { export const Default = () => (
- + +
+ + + +
+
) From b905a4eab60fc00471bb021c905b66312a7b052d Mon Sep 17 00:00:00 2001 From: Darya Plotnytska Date: Thu, 25 Jan 2024 09:08:32 +0100 Subject: [PATCH 20/34] console: Use link instead of navlink --- pkg/webui/components/shortcut-panel/shortcut-item/index.js | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/pkg/webui/components/shortcut-panel/shortcut-item/index.js b/pkg/webui/components/shortcut-panel/shortcut-item/index.js index 6a5d33eb7af..c133692061c 100644 --- a/pkg/webui/components/shortcut-panel/shortcut-item/index.js +++ b/pkg/webui/components/shortcut-panel/shortcut-item/index.js @@ -13,9 +13,9 @@ // limitations under the License. import React from 'react' -import { NavLink } from 'react-router-dom' import Icon from '@ttn-lw/components/icon' +import Link from '@ttn-lw/components/link' import Message from '@ttn-lw/lib/components/message' @@ -24,11 +24,11 @@ import PropTypes from '@ttn-lw/lib/prop-types' import style from './shortcut-item.styl' const ShortcutItem = ({ icon, title, link }) => ( - + - + ) ShortcutItem.propTypes = { From 7f6dfe9724594a7a21adf3da48e51062f1b578c4 Mon Sep 17 00:00:00 2001 From: Darya Plotnytska Date: Thu, 25 Jan 2024 15:20:08 +0100 Subject: [PATCH 21/34] console: Fix line-height --- pkg/webui/components/news-panel/news-item/index.js | 2 +- pkg/webui/components/news-panel/news-item/news-item.styl | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/pkg/webui/components/news-panel/news-item/index.js b/pkg/webui/components/news-panel/news-item/index.js index a15ba5c61ef..e1fea9d5f4c 100644 --- a/pkg/webui/components/news-panel/news-item/index.js +++ b/pkg/webui/components/news-panel/news-item/index.js @@ -26,7 +26,7 @@ import styles from './news-item.styl' const NewsItem = ({ articleTitle, articleImage, articleDate }) => ( -
+
Date: Mon, 29 Jan 2024 09:41:14 +0100 Subject: [PATCH 22/34] console: Add transitions --- pkg/webui/components/news-panel/news-item/news-item.styl | 2 +- pkg/webui/components/panel/panel.styl | 2 ++ pkg/webui/components/panel/toggle/toggle.styl | 1 + .../shortcut-panel/shortcut-item/shortcut-item.styl | 5 ++++- 4 files changed, 8 insertions(+), 2 deletions(-) diff --git a/pkg/webui/components/news-panel/news-item/news-item.styl b/pkg/webui/components/news-panel/news-item/news-item.styl index ca1db886e46..32588a55ad1 100644 --- a/pkg/webui/components/news-panel/news-item/news-item.styl +++ b/pkg/webui/components/news-panel/news-item/news-item.styl @@ -38,4 +38,4 @@ -webkit-box-orient: vertical -webkit-line-clamp: 2 /* start showing ellipsis when 2nd line is reached */ white-space: pre-wrap - line-height: normal + line-height: 1.15 diff --git a/pkg/webui/components/panel/panel.styl b/pkg/webui/components/panel/panel.styl index c962cde1e9b..5324bcdfae9 100644 --- a/pkg/webui/components/panel/panel.styl +++ b/pkg/webui/components/panel/panel.styl @@ -29,10 +29,12 @@ .button font-weight: $fwv2.semibold text-decoration: none + transition: text-decoration 0.2s ease-in-out &:hover color: var(--c-text-brand-normal) text-decoration: underline + text-underline-offset: $cs.xxs &-divider border-bottom: 1px solid var(--c-border-neutral-light) diff --git a/pkg/webui/components/panel/toggle/toggle.styl b/pkg/webui/components/panel/toggle/toggle.styl index 2d64f4ba604..00cc0cf29d5 100644 --- a/pkg/webui/components/panel/toggle/toggle.styl +++ b/pkg/webui/components/panel/toggle/toggle.styl @@ -27,6 +27,7 @@ border-radius: $br.m padding: 0 $cs.s height: 2.25rem + transition: background 80ms ease-in-out &-active color: var(--c-text-neutral-min) diff --git a/pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl b/pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl index 6ffb9a5c9e7..bfa9adf7626 100644 --- a/pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl +++ b/pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl @@ -19,7 +19,7 @@ align-items: center justify-content: center padding: $cs.s $cs.m - transition: $ad.m background ease-in, $ad.m display ease-out + transition: 0.2s background ease-in text-decoration: none height: 10.7rem border-radius: $br.l @@ -29,14 +29,17 @@ font-weight: $fwv2.semibold span.icon + transition: 0.2s display ease-out font-size: 2rem display: block span.add-icon + transition: 0.2s display ease-in font-size: 2.5rem display: none .title + transition: 0.2s display ease-out display: block &:hover From 3d717952a1c5fb8321769bc2e52b8a29d1dc76d8 Mon Sep 17 00:00:00 2001 From: Darya Plotnytska <56658938+ryaplots@users.noreply.github.com> Date: Mon, 29 Jan 2024 16:41:38 +0100 Subject: [PATCH 23/34] Use text-decoration thickness and offset --- pkg/webui/components/panel/panel.styl | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/pkg/webui/components/panel/panel.styl b/pkg/webui/components/panel/panel.styl index 5324bcdfae9..ff29bb7b82a 100644 --- a/pkg/webui/components/panel/panel.styl +++ b/pkg/webui/components/panel/panel.styl @@ -34,7 +34,8 @@ &:hover color: var(--c-text-brand-normal) text-decoration: underline - text-underline-offset: $cs.xxs + text-decoration-thickness: 2px + text-underline-offset: .4rem &-divider border-bottom: 1px solid var(--c-border-neutral-light) From b4a315e486d2c6ea5b1aae027b4924fa2f9a9ec7 Mon Sep 17 00:00:00 2001 From: Darya Plotnytska Date: Tue, 30 Jan 2024 14:56:24 +0100 Subject: [PATCH 24/34] console: Fix panel animations and icon --- .../components/news-panel/news-item/news-item.styl | 4 ++-- pkg/webui/components/panel/index.js | 2 +- pkg/webui/components/panel/panel.styl | 12 +++++++++--- pkg/webui/styles/variables/tokens.styl | 2 +- 4 files changed, 13 insertions(+), 7 deletions(-) diff --git a/pkg/webui/components/news-panel/news-item/news-item.styl b/pkg/webui/components/news-panel/news-item/news-item.styl index 32588a55ad1..21d1702d775 100644 --- a/pkg/webui/components/news-panel/news-item/news-item.styl +++ b/pkg/webui/components/news-panel/news-item/news-item.styl @@ -16,12 +16,12 @@ display: flex padding: $cs-xs gap: $cs.m - transition: background-color $ad.m ease-in-out + transition: background-color $ad.s ease-in-out border-radius: $br.xl padding: $cs.xs &:hover - background-color: var(--c-bg-neutral-min-hover) + background-color: var(--c-bg-brand-extralight) .image border-radius: $br.l diff --git a/pkg/webui/components/panel/index.js b/pkg/webui/components/panel/index.js index f07aa164613..89bf7703795 100644 --- a/pkg/webui/components/panel/index.js +++ b/pkg/webui/components/panel/index.js @@ -40,7 +40,7 @@ const Panel = ({ divider, }) => (
-
+
{icon && } diff --git a/pkg/webui/components/panel/panel.styl b/pkg/webui/components/panel/panel.styl index ff29bb7b82a..0f786ea910f 100644 --- a/pkg/webui/components/panel/panel.styl +++ b/pkg/webui/components/panel/panel.styl @@ -26,16 +26,17 @@ font-size: $fsv2.l line-height: 1 - .button + a.button font-weight: $fwv2.semibold - text-decoration: none - transition: text-decoration 0.2s ease-in-out + text-decoration: none transparent + transition: text-decoration $ad.s ease-in-out &:hover color: var(--c-text-brand-normal) text-decoration: underline text-decoration-thickness: 2px text-underline-offset: .4rem + text-decoration-color: var(--c-text-brand-normal) &-divider border-bottom: 1px solid var(--c-border-neutral-light) @@ -45,3 +46,8 @@ span.panel-header-icon font-size: 1.5rem + font-variation-settings: 'FILL' 1 + background-color: var(--c-bg-brand-extralight) + padding: $cs.xs + border-radius: $br.l + color: var(--c-bg-brand-normal) diff --git a/pkg/webui/styles/variables/tokens.styl b/pkg/webui/styles/variables/tokens.styl index 35a32684f30..5d4c2c81474 100644 --- a/pkg/webui/styles/variables/tokens.styl +++ b/pkg/webui/styles/variables/tokens.styl @@ -37,7 +37,7 @@ $tokens = { // Brand - 'bg-brand-extralight': $c.tts-025 // Background for navigation elements background. + 'bg-brand-extralight': $c.tts-050 // Background for navigation elements background. 'bg-brand-light': $c.tts-100 // ? 'bg-brand-normal': $c.tts-500 // Background for highlight elements. 'bg-brand-normal-hover': $c.tts-600 // Background for highlight elements on hover. From fb7d217cbe8aab83a9aab38361c5645ee764defd Mon Sep 17 00:00:00 2001 From: Darya Plotnytska Date: Wed, 31 Jan 2024 10:59:09 +0100 Subject: [PATCH 25/34] console: Fix animation on shortcut button --- .../shortcut-panel/shortcut-item/index.js | 10 ++-- .../shortcut-item/shortcut-item.styl | 49 ++++++++++++++----- 2 files changed, 43 insertions(+), 16 deletions(-) diff --git a/pkg/webui/components/shortcut-panel/shortcut-item/index.js b/pkg/webui/components/shortcut-panel/shortcut-item/index.js index c133692061c..2ad059c1a9f 100644 --- a/pkg/webui/components/shortcut-panel/shortcut-item/index.js +++ b/pkg/webui/components/shortcut-panel/shortcut-item/index.js @@ -25,9 +25,13 @@ import style from './shortcut-item.styl' const ShortcutItem = ({ icon, title, link }) => ( - - - +
+ +
+
+ + +
) diff --git a/pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl b/pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl index bfa9adf7626..b1a0483d796 100644 --- a/pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl +++ b/pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl @@ -18,8 +18,8 @@ flex-direction: column align-items: center justify-content: center + position: relative padding: $cs.s $cs.m - transition: 0.2s background ease-in text-decoration: none height: 10.7rem border-radius: $br.l @@ -27,32 +27,55 @@ color: var(--c-text-neutral-min) font-size: $fs.m font-weight: $fwv2.semibold + transition: 0.2s background ease-in-out + + &-title-wrapper + position: absolute + width: 100% + height: 100% + display: flex + justify-content: center + align-items: center + flex-direction: column + top: 0 + opacity: 1 + transition: $ad.s visibility ease-in-out, $ad.m opacity ease-in-out + transition-delay: $ad.s + + .add-icon-wrapper + position: absolute + width: 100% + height: 100% + display: flex + justify-content: center + align-items: center + flex-direction: column + top: 0 + opacity: 0 + visibility: hidden + transition: $ad.s visibility ease-in-out, $ad.m opacity ease-in-out + transition-delay: $ad.s span.icon - transition: 0.2s display ease-out font-size: 2rem - display: block span.add-icon - transition: 0.2s display ease-in font-size: 2.5rem - display: none - - .title - transition: 0.2s display ease-out - display: block &:hover cursor: pointer background: var(--c-bg-brand-normal-hover) - .title - display: none + .shortcut-title-wrapper + opacity: 0 + visibility: hidden + + .add-icon-wrapper + opacity: 1 + visibility: visible span.icon font-size: 2rem - display: none span.add-icon font-size: 2.5rem - display: block From 3a84c0fe16c890f17ab3cf401c53da3dd9f6a297 Mon Sep 17 00:00:00 2001 From: Darya Plotnytska Date: Wed, 31 Jan 2024 12:37:33 +0100 Subject: [PATCH 26/34] console: Improve animation and add svg to panel --- pkg/webui/assets/misc/favorite-outline.svg | 9 +++++++ pkg/webui/components/panel/index.js | 4 ++++ pkg/webui/components/panel/panel.styl | 9 ++++++- pkg/webui/components/panel/story.js | 3 ++- .../shortcut-item/shortcut-item.styl | 24 ++++++------------- 5 files changed, 30 insertions(+), 19 deletions(-) create mode 100644 pkg/webui/assets/misc/favorite-outline.svg diff --git a/pkg/webui/assets/misc/favorite-outline.svg b/pkg/webui/assets/misc/favorite-outline.svg new file mode 100644 index 00000000000..66d0e7e0ce8 --- /dev/null +++ b/pkg/webui/assets/misc/favorite-outline.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/pkg/webui/components/panel/index.js b/pkg/webui/components/panel/index.js index 89bf7703795..b6ad4bd1e7c 100644 --- a/pkg/webui/components/panel/index.js +++ b/pkg/webui/components/panel/index.js @@ -30,6 +30,7 @@ const Panel = ({ children, title, icon, + svg, toggleOptions, activeToggle, onToggleClick, @@ -43,6 +44,7 @@ const Panel = ({
{icon && } + {svg && star} {messageDecorators}
@@ -69,6 +71,7 @@ Panel.propTypes = { messageDecorators: PropTypes.node, onToggleClick: PropTypes.func, path: PropTypes.string.isRequired, + svg: PropTypes.string, title: PropTypes.message.isRequired, toggleOptions: PropTypes.arrayOf(PropTypes.shape({})), } @@ -82,6 +85,7 @@ Panel.defaultProps = { className: undefined, messageDecorators: undefined, divider: false, + svg: undefined, } export default Panel diff --git a/pkg/webui/components/panel/panel.styl b/pkg/webui/components/panel/panel.styl index 0f786ea910f..4304067b8f2 100644 --- a/pkg/webui/components/panel/panel.styl +++ b/pkg/webui/components/panel/panel.styl @@ -26,6 +26,13 @@ font-size: $fsv2.l line-height: 1 + &-svg + width: 21px + height: 21px + background-color: var(--c-bg-brand-extralight) + padding: $cs.xs + border-radius: $br.l + a.button font-weight: $fwv2.semibold text-decoration: none transparent @@ -46,7 +53,7 @@ span.panel-header-icon font-size: 1.5rem - font-variation-settings: 'FILL' 1 + // font-variation-settings: 'FILL' 1 background-color: var(--c-bg-brand-extralight) padding: $cs.xs border-radius: $br.l diff --git a/pkg/webui/components/panel/story.js b/pkg/webui/components/panel/story.js index 48769dc8b12..9a35eb316ff 100644 --- a/pkg/webui/components/panel/story.js +++ b/pkg/webui/components/panel/story.js @@ -15,6 +15,7 @@ import React from 'react' import loginVisual from '@assets/img/layout/bg/login-visual.jpg' +import starIcon from '@assets/misc/favorite-outline.svg' import NewsItem from '../news-panel/news-item' @@ -71,7 +72,7 @@ export const WithToggle = () => { return (
- +
) } diff --git a/pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl b/pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl index b1a0483d796..a4d7f095982 100644 --- a/pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl +++ b/pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl @@ -27,9 +27,10 @@ color: var(--c-text-neutral-min) font-size: $fs.m font-weight: $fwv2.semibold - transition: 0.2s background ease-in-out + transition: $ad.s background ease-in-out - &-title-wrapper + &-title-wrapper, + .add-icon-wrapper position: absolute width: 100% height: 100% @@ -39,22 +40,13 @@ flex-direction: column top: 0 opacity: 1 - transition: $ad.s visibility ease-in-out, $ad.m opacity ease-in-out - transition-delay: $ad.s + transition: $ad.m opacity ease-in-out + + &-title-wrapper + opacity: 1 .add-icon-wrapper - position: absolute - width: 100% - height: 100% - display: flex - justify-content: center - align-items: center - flex-direction: column - top: 0 opacity: 0 - visibility: hidden - transition: $ad.s visibility ease-in-out, $ad.m opacity ease-in-out - transition-delay: $ad.s span.icon font-size: 2rem @@ -68,11 +60,9 @@ .shortcut-title-wrapper opacity: 0 - visibility: hidden .add-icon-wrapper opacity: 1 - visibility: visible span.icon font-size: 2rem From 6b40f44ff509e7025b594ec44fee580f3fade26a Mon Sep 17 00:00:00 2001 From: Darya Plotnytska Date: Wed, 31 Jan 2024 15:08:49 +0100 Subject: [PATCH 27/34] console: Adapt svg to use current color --- pkg/webui/assets/misc/favorite-outline.svg | 9 --------- pkg/webui/components/panel/index.js | 8 ++++---- pkg/webui/components/panel/panel.styl | 13 +++++++------ pkg/webui/components/panel/story.js | 5 +++-- .../shortcut-panel/shortcut-item/shortcut-item.styl | 2 +- 5 files changed, 15 insertions(+), 22 deletions(-) delete mode 100644 pkg/webui/assets/misc/favorite-outline.svg diff --git a/pkg/webui/assets/misc/favorite-outline.svg b/pkg/webui/assets/misc/favorite-outline.svg deleted file mode 100644 index 66d0e7e0ce8..00000000000 --- a/pkg/webui/assets/misc/favorite-outline.svg +++ /dev/null @@ -1,9 +0,0 @@ - - - - - - - - - diff --git a/pkg/webui/components/panel/index.js b/pkg/webui/components/panel/index.js index b6ad4bd1e7c..93c62e30384 100644 --- a/pkg/webui/components/panel/index.js +++ b/pkg/webui/components/panel/index.js @@ -30,7 +30,7 @@ const Panel = ({ children, title, icon, - svg, + svgIcon, toggleOptions, activeToggle, onToggleClick, @@ -44,7 +44,7 @@ const Panel = ({
{icon && } - {svg && star} + {svgIcon} {messageDecorators}
@@ -71,7 +71,7 @@ Panel.propTypes = { messageDecorators: PropTypes.node, onToggleClick: PropTypes.func, path: PropTypes.string.isRequired, - svg: PropTypes.string, + svgIcon: PropTypes.node, title: PropTypes.message.isRequired, toggleOptions: PropTypes.arrayOf(PropTypes.shape({})), } @@ -85,7 +85,7 @@ Panel.defaultProps = { className: undefined, messageDecorators: undefined, divider: false, - svg: undefined, + svgIcon: undefined, } export default Panel diff --git a/pkg/webui/components/panel/panel.styl b/pkg/webui/components/panel/panel.styl index 4304067b8f2..84f8cacb632 100644 --- a/pkg/webui/components/panel/panel.styl +++ b/pkg/webui/components/panel/panel.styl @@ -26,12 +26,13 @@ font-size: $fsv2.l line-height: 1 - &-svg - width: 21px - height: 21px - background-color: var(--c-bg-brand-extralight) - padding: $cs.xs - border-radius: $br.l + svg + width: 21px + height: 21px + background-color: var(--c-bg-brand-extralight) + padding: $cs.xs + border-radius: $br.l + color: var(--c-bg-brand-normal) a.button font-weight: $fwv2.semibold diff --git a/pkg/webui/components/panel/story.js b/pkg/webui/components/panel/story.js index 9a35eb316ff..b4c07adbef4 100644 --- a/pkg/webui/components/panel/story.js +++ b/pkg/webui/components/panel/story.js @@ -15,7 +15,8 @@ import React from 'react' import loginVisual from '@assets/img/layout/bg/login-visual.jpg' -import starIcon from '@assets/misc/favorite-outline.svg' + +import StarIcon from '@ttn-lw/components/icon/star-icon' import NewsItem from '../news-panel/news-item' @@ -72,7 +73,7 @@ export const WithToggle = () => { return (
- + } toggleOptions={options} />
) } diff --git a/pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl b/pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl index a4d7f095982..c9e5583903d 100644 --- a/pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl +++ b/pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl @@ -40,7 +40,7 @@ flex-direction: column top: 0 opacity: 1 - transition: $ad.m opacity ease-in-out + transition: $ad.s opacity ease-in-out &-title-wrapper opacity: 1 From 9b2420fa575ea6db9c12b746b86b8d4023494e67 Mon Sep 17 00:00:00 2001 From: Darya Plotnytska Date: Wed, 31 Jan 2024 15:20:44 +0100 Subject: [PATCH 28/34] console: Add star and plus icons --- pkg/webui/components/panel/story.js | 2 +- pkg/webui/components/plus-icon.js | 49 +++++++++++++++++++++++++++++ pkg/webui/components/star-icon.js | 49 +++++++++++++++++++++++++++++ 3 files changed, 99 insertions(+), 1 deletion(-) create mode 100644 pkg/webui/components/plus-icon.js create mode 100644 pkg/webui/components/star-icon.js diff --git a/pkg/webui/components/panel/story.js b/pkg/webui/components/panel/story.js index b4c07adbef4..d7091e02da2 100644 --- a/pkg/webui/components/panel/story.js +++ b/pkg/webui/components/panel/story.js @@ -16,7 +16,7 @@ import React from 'react' import loginVisual from '@assets/img/layout/bg/login-visual.jpg' -import StarIcon from '@ttn-lw/components/icon/star-icon' +import StarIcon from '@ttn-lw/components/star-icon' import NewsItem from '../news-panel/news-item' diff --git a/pkg/webui/components/plus-icon.js b/pkg/webui/components/plus-icon.js new file mode 100644 index 00000000000..f25a1947bc6 --- /dev/null +++ b/pkg/webui/components/plus-icon.js @@ -0,0 +1,49 @@ +// Copyright © 2019 The Things Network Foundation, The Things Industries B.V. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import React from 'react' + +import PropTypes from '@ttn-lw/lib/prop-types' + +const PlusIcon = ({ className }) => ( + + + + + + + + +) + +PlusIcon.propTypes = { + className: PropTypes.string, +} + +PlusIcon.defaultProps = { + className: undefined, +} + +export default PlusIcon diff --git a/pkg/webui/components/star-icon.js b/pkg/webui/components/star-icon.js new file mode 100644 index 00000000000..593fd8cdb06 --- /dev/null +++ b/pkg/webui/components/star-icon.js @@ -0,0 +1,49 @@ +// Copyright © 2019 The Things Network Foundation, The Things Industries B.V. +// +// Licensed under the Apache License, Version 2.0 (the "License"); +// you may not use this file except in compliance with the License. +// You may obtain a copy of the License at +// +// http://www.apache.org/licenses/LICENSE-2.0 +// +// Unless required by applicable law or agreed to in writing, software +// distributed under the License is distributed on an "AS IS" BASIS, +// WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. +// See the License for the specific language governing permissions and +// limitations under the License. + +import React from 'react' + +import PropTypes from '@ttn-lw/lib/prop-types' + +const StarIcon = ({ className }) => ( + + + + + + + + +) + +StarIcon.propTypes = { + className: PropTypes.string, +} + +StarIcon.defaultProps = { + className: undefined, +} + +export default StarIcon From c020a1dc4ac04c68cbde488eca14a52e6f7bcdc8 Mon Sep 17 00:00:00 2001 From: Darya Plotnytska <56658938+ryaplots@users.noreply.github.com> Date: Thu, 1 Feb 2024 12:30:31 +0100 Subject: [PATCH 29/34] console: Remove comment Co-authored-by: Kevin Schiffer --- pkg/webui/components/panel/panel.styl | 1 - 1 file changed, 1 deletion(-) diff --git a/pkg/webui/components/panel/panel.styl b/pkg/webui/components/panel/panel.styl index 84f8cacb632..c17ba0176df 100644 --- a/pkg/webui/components/panel/panel.styl +++ b/pkg/webui/components/panel/panel.styl @@ -54,7 +54,6 @@ span.panel-header-icon font-size: 1.5rem - // font-variation-settings: 'FILL' 1 background-color: var(--c-bg-brand-extralight) padding: $cs.xs border-radius: $br.l From 32717737dff6e827749048da41a6db8ef1fa910b Mon Sep 17 00:00:00 2001 From: Darya Plotnytska Date: Thu, 1 Feb 2024 12:36:26 +0100 Subject: [PATCH 30/34] console: Create the folder for the icon components --- pkg/webui/components/{plus-icon.js => plus-icon/index.js} | 0 pkg/webui/components/{star-icon.js => star-icon/index.js} | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename pkg/webui/components/{plus-icon.js => plus-icon/index.js} (100%) rename pkg/webui/components/{star-icon.js => star-icon/index.js} (100%) diff --git a/pkg/webui/components/plus-icon.js b/pkg/webui/components/plus-icon/index.js similarity index 100% rename from pkg/webui/components/plus-icon.js rename to pkg/webui/components/plus-icon/index.js diff --git a/pkg/webui/components/star-icon.js b/pkg/webui/components/star-icon/index.js similarity index 100% rename from pkg/webui/components/star-icon.js rename to pkg/webui/components/star-icon/index.js From 3a1f57914ee91b074173e8161e671c4043f0d29e Mon Sep 17 00:00:00 2001 From: Darya Plotnytska Date: Thu, 1 Feb 2024 17:02:05 +0100 Subject: [PATCH 31/34] console: Fix color --- pkg/webui/components/news-panel/news-item/news-item.styl | 2 +- pkg/webui/styles/variables/tokens.styl | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/pkg/webui/components/news-panel/news-item/news-item.styl b/pkg/webui/components/news-panel/news-item/news-item.styl index 21d1702d775..14b4b41ee31 100644 --- a/pkg/webui/components/news-panel/news-item/news-item.styl +++ b/pkg/webui/components/news-panel/news-item/news-item.styl @@ -21,7 +21,7 @@ padding: $cs.xs &:hover - background-color: var(--c-bg-brand-extralight) + background-color: var(--c-bg-brand-light) .image border-radius: $br.l diff --git a/pkg/webui/styles/variables/tokens.styl b/pkg/webui/styles/variables/tokens.styl index 5d4c2c81474..021d45b9c6e 100644 --- a/pkg/webui/styles/variables/tokens.styl +++ b/pkg/webui/styles/variables/tokens.styl @@ -37,8 +37,8 @@ $tokens = { // Brand - 'bg-brand-extralight': $c.tts-050 // Background for navigation elements background. - 'bg-brand-light': $c.tts-100 // ? + 'bg-brand-extralight': $c.tts-025 // Background for navigation elements background. + 'bg-brand-light': $c.tts-050 // ? 'bg-brand-normal': $c.tts-500 // Background for highlight elements. 'bg-brand-normal-hover': $c.tts-600 // Background for highlight elements on hover. From a9c609be556baa94a6ac7a22fbdc10112f63ab63 Mon Sep 17 00:00:00 2001 From: Kevin Schiffer Date: Fri, 2 Feb 2024 12:25:50 +0900 Subject: [PATCH 32/34] console: Introduce replacement icons as part of icon component --- pkg/webui/components/icon/icon.styl | 17 +++++++++++++++-- pkg/webui/components/icon/index.js | 14 ++++++++++++++ .../index.js => icon/replacements/plus-icon.js} | 14 ++++++++++---- .../index.js => icon/replacements/star-icon.js} | 14 ++++++++++---- pkg/webui/components/panel/index.js | 3 --- pkg/webui/components/panel/panel.styl | 10 +--------- pkg/webui/components/panel/story.js | 4 +--- 7 files changed, 51 insertions(+), 25 deletions(-) rename pkg/webui/components/{plus-icon/index.js => icon/replacements/plus-icon.js} (87%) rename pkg/webui/components/{star-icon/index.js => icon/replacements/star-icon.js} (89%) diff --git a/pkg/webui/components/icon/icon.styl b/pkg/webui/components/icon/icon.styl index 325492d7b9d..7337db172ed 100644 --- a/pkg/webui/components/icon/icon.styl +++ b/pkg/webui/components/icon/icon.styl @@ -12,7 +12,7 @@ // See the License for the specific language governing permissions and // limitations under the License. -.icon +span.icon material-icon() &.small @@ -21,6 +21,19 @@ &.large font-size: 2rem +svg.icon + height: 1.5rem + width: 1.5rem + + &.small + height: 1rem + width: 1rem + + &.large + height: 2rem + width: 2rem + +.icon &.nudgeUp position: relative top: -1px @@ -32,6 +45,6 @@ .text-padded &-right margin-right: $cs.xxs - + &-left margin-left: $cs.xxs diff --git a/pkg/webui/components/icon/index.js b/pkg/webui/components/icon/index.js index 33709c94938..14c4f6e30c4 100644 --- a/pkg/webui/components/icon/index.js +++ b/pkg/webui/components/icon/index.js @@ -16,6 +16,9 @@ import React, { forwardRef } from 'react' import classnames from 'classnames' import PropTypes from 'prop-types' +import StarIcon from './replacements/star-icon' +import PlusIcon from './replacements/plus-icon' + import style from './icon.styl' // A map of hardcoded names to their corresponding icons. @@ -71,6 +74,11 @@ const hardcoded = { valid: 'check_circle', } +const replaced = { + star: StarIcon, + plus: PlusIcon, +} + const Icon = forwardRef((props, ref) => { const { icon, @@ -93,6 +101,12 @@ const Icon = forwardRef((props, ref) => { [style.textPaddedRight]: textPaddedRight, }) + if (replaced[icon]) { + const ReplacedIcon = replaced[icon] + + return + } + return ( {hardcoded[icon] || icon} diff --git a/pkg/webui/components/plus-icon/index.js b/pkg/webui/components/icon/replacements/plus-icon.js similarity index 87% rename from pkg/webui/components/plus-icon/index.js rename to pkg/webui/components/icon/replacements/plus-icon.js index f25a1947bc6..4e506105e89 100644 --- a/pkg/webui/components/plus-icon/index.js +++ b/pkg/webui/components/icon/replacements/plus-icon.js @@ -1,4 +1,4 @@ -// Copyright © 2019 The Things Network Foundation, The Things Industries B.V. +// Copyright © 2024 The Things Network Foundation, The Things Industries B.V. // // Licensed under the Apache License, Version 2.0 (the "License"); // you may not use this file except in compliance with the License. @@ -16,8 +16,14 @@ import React from 'react' import PropTypes from '@ttn-lw/lib/prop-types' -const PlusIcon = ({ className }) => ( - +const PlusIcon = React.forwardRef(({ className }, ref) => ( + ( /> -) +)) PlusIcon.propTypes = { className: PropTypes.string, diff --git a/pkg/webui/components/star-icon/index.js b/pkg/webui/components/icon/replacements/star-icon.js similarity index 89% rename from pkg/webui/components/star-icon/index.js rename to pkg/webui/components/icon/replacements/star-icon.js index 593fd8cdb06..7da1d2f9d39 100644 --- a/pkg/webui/components/star-icon/index.js +++ b/pkg/webui/components/icon/replacements/star-icon.js @@ -1,4 +1,4 @@ -// Copyright © 2019 The Things Network Foundation, The Things Industries B.V. +// Copyright © 2024 The Things Network Foundation, The Things Industries B.V. // // Licensed under the Apache License, Version 2.0 (the "License"); // you may not use this file except in compliance with the License. @@ -16,8 +16,14 @@ import React from 'react' import PropTypes from '@ttn-lw/lib/prop-types' -const StarIcon = ({ className }) => ( - +const StarIcon = React.forwardRef(({ className }, ref) => ( + ( /> -) +)) StarIcon.propTypes = { className: PropTypes.string, diff --git a/pkg/webui/components/panel/index.js b/pkg/webui/components/panel/index.js index 93c62e30384..59308151d3d 100644 --- a/pkg/webui/components/panel/index.js +++ b/pkg/webui/components/panel/index.js @@ -30,7 +30,6 @@ const Panel = ({ children, title, icon, - svgIcon, toggleOptions, activeToggle, onToggleClick, @@ -44,7 +43,6 @@ const Panel = ({
{icon && } - {svgIcon} {messageDecorators}
@@ -71,7 +69,6 @@ Panel.propTypes = { messageDecorators: PropTypes.node, onToggleClick: PropTypes.func, path: PropTypes.string.isRequired, - svgIcon: PropTypes.node, title: PropTypes.message.isRequired, toggleOptions: PropTypes.arrayOf(PropTypes.shape({})), } diff --git a/pkg/webui/components/panel/panel.styl b/pkg/webui/components/panel/panel.styl index c17ba0176df..bc4a1b01543 100644 --- a/pkg/webui/components/panel/panel.styl +++ b/pkg/webui/components/panel/panel.styl @@ -26,14 +26,6 @@ font-size: $fsv2.l line-height: 1 - svg - width: 21px - height: 21px - background-color: var(--c-bg-brand-extralight) - padding: $cs.xs - border-radius: $br.l - color: var(--c-bg-brand-normal) - a.button font-weight: $fwv2.semibold text-decoration: none transparent @@ -52,7 +44,7 @@ margin-bottom: $cs.l height: 0px -span.panel-header-icon +.panel-header-icon font-size: 1.5rem background-color: var(--c-bg-brand-extralight) padding: $cs.xs diff --git a/pkg/webui/components/panel/story.js b/pkg/webui/components/panel/story.js index d7091e02da2..48769dc8b12 100644 --- a/pkg/webui/components/panel/story.js +++ b/pkg/webui/components/panel/story.js @@ -16,8 +16,6 @@ import React from 'react' import loginVisual from '@assets/img/layout/bg/login-visual.jpg' -import StarIcon from '@ttn-lw/components/star-icon' - import NewsItem from '../news-panel/news-item' import Panel from '.' @@ -73,7 +71,7 @@ export const WithToggle = () => { return (
- } toggleOptions={options} /> +
) } From 1153cf27eab5e9280fd902ee9fdf273a7f6f4d71 Mon Sep 17 00:00:00 2001 From: Kevin Schiffer Date: Mon, 5 Feb 2024 13:59:49 +0900 Subject: [PATCH 33/34] console: Add panel shadow token --- pkg/webui/components/panel/panel.styl | 2 +- pkg/webui/styles/variables/tokens.styl | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/pkg/webui/components/panel/panel.styl b/pkg/webui/components/panel/panel.styl index bc4a1b01543..79451ef6675 100644 --- a/pkg/webui/components/panel/panel.styl +++ b/pkg/webui/components/panel/panel.styl @@ -17,7 +17,7 @@ border-radius: $br.xl border: 1px solid var(--c-border-neutral-light) background-color: var(--c-bg-neutral-min) - box-shadow: 0px 1px 5px 0px rgba(0, 0, 0, 0.09) // TODO: Convert to token. + box-shadow: var(--shadow-box-panel-normal) padding: $cs.xl &-header diff --git a/pkg/webui/styles/variables/tokens.styl b/pkg/webui/styles/variables/tokens.styl index 021d45b9c6e..62d02c63c24 100644 --- a/pkg/webui/styles/variables/tokens.styl +++ b/pkg/webui/styles/variables/tokens.styl @@ -146,6 +146,7 @@ $tokens = { shadow: { 'box-error-normal': 0 0 3px 2px rgba(219, 35, 40,.2) // Shadow for focused inputs and other elements that have errors. 'box-warning-normal': 0 0 3px 2px rgba(219, 118, 0,.2) // Shadow for focused inputs and other elements that have errors. + 'box-panel-normal': 0px 1px 5px 0px rgba(0, 0, 0, 0.09) // Shadow for panels and large container elements that need elevation. } } From 98e9cd0e9329686e702a0768acae79aa91207df6 Mon Sep 17 00:00:00 2001 From: Kevin Schiffer Date: Mon, 5 Feb 2024 14:16:20 +0900 Subject: [PATCH 34/34] dev: Add figma URLs to stories --- pkg/webui/components/news-panel/news-item/story.js | 6 ++++++ pkg/webui/components/panel/story.js | 6 ++++++ pkg/webui/components/panel/toggle/index.js | 1 - pkg/webui/components/shortcut-panel/shortcut-item/story.js | 6 ++++++ pkg/webui/components/status-label/story.js | 6 ++++++ 5 files changed, 24 insertions(+), 1 deletion(-) diff --git a/pkg/webui/components/news-panel/news-item/story.js b/pkg/webui/components/news-panel/news-item/story.js index 1f813648165..2ca13cf3ac6 100644 --- a/pkg/webui/components/news-panel/news-item/story.js +++ b/pkg/webui/components/news-panel/news-item/story.js @@ -21,6 +21,12 @@ import NewsItem from '.' export default { title: 'Panel/News Panel/News Item', component: NewsItem, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/7pBLWK4tsjoAbyJq2viMAQ/console-redesign?type=design&node-id=1661-5590&mode=design&t=2KlaQGRV9FQm7Nv3-4 ', + }, + }, } export const Default = () => ( diff --git a/pkg/webui/components/panel/story.js b/pkg/webui/components/panel/story.js index 48769dc8b12..ae75c3485d0 100644 --- a/pkg/webui/components/panel/story.js +++ b/pkg/webui/components/panel/story.js @@ -23,6 +23,12 @@ import Panel from '.' export default { title: 'Panel', component: Panel, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/7pBLWK4tsjoAbyJq2viMAQ/console-redesign?type=design&node-id=1529-7836&mode=design&t=2KlaQGRV9FQm7Nv3-4', + }, + }, } export const Default = () => ( diff --git a/pkg/webui/components/panel/toggle/index.js b/pkg/webui/components/panel/toggle/index.js index a9862411444..64c62664aea 100644 --- a/pkg/webui/components/panel/toggle/index.js +++ b/pkg/webui/components/panel/toggle/index.js @@ -34,7 +34,6 @@ const Toggle = ({ options, onToggleChange, active }) => ( message={label} value={value} onClick={onToggleChange} - unstyled className={buttonClassName} /> ) diff --git a/pkg/webui/components/shortcut-panel/shortcut-item/story.js b/pkg/webui/components/shortcut-panel/shortcut-item/story.js index 80908aaf92e..96844055ce3 100644 --- a/pkg/webui/components/shortcut-panel/shortcut-item/story.js +++ b/pkg/webui/components/shortcut-panel/shortcut-item/story.js @@ -19,6 +19,12 @@ import ShortcutItem from '.' export default { title: 'Panel/Shortcut Panel/Shortcut Item', component: ShortcutItem, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/7pBLWK4tsjoAbyJq2viMAQ/console-redesign?type=design&node-id=1661-5695&mode=design&t=2KlaQGRV9FQm7Nv3-4', + }, + }, } export const Default = () => ( diff --git a/pkg/webui/components/status-label/story.js b/pkg/webui/components/status-label/story.js index c028a5f9981..9d3aeefdef8 100644 --- a/pkg/webui/components/status-label/story.js +++ b/pkg/webui/components/status-label/story.js @@ -38,4 +38,10 @@ export const Default = { control: 'boolean', }, }, + parameters: { + design: { + type: 'figma', + url: 'https://www.figma.com/file/7pBLWK4tsjoAbyJq2viMAQ/console-redesign?type=design&node-id=1599-8145&mode=design&t=2KlaQGRV9FQm7Nv3-4', + }, + }, }