+
+
+)
+
+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 0000000000..14b4b41ee3
--- /dev/null
+++ b/pkg/webui/components/news-panel/news-item/news-item.styl
@@ -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.
+
+.item
+ display: flex
+ padding: $cs-xs
+ gap: $cs.m
+ transition: background-color $ad.s ease-in-out
+ border-radius: $br.xl
+ padding: $cs.xs
+
+ &:hover
+ background-color: var(--c-bg-brand-light)
+
+ .image
+ border-radius: $br.l
+ border: 1px solid var(--c-border-neutral-light)
+ height: 5rem
+ width: auto
+
+ .title
+ width: 100%
+ font-weight: $fwv2.bold
+ color: var(--c-text-neutral-heavy)
+ 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
+ line-height: 1.15
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 0000000000..2ca13cf3ac
--- /dev/null
+++ b/pkg/webui/components/news-panel/news-item/story.js
@@ -0,0 +1,40 @@
+// 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: '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/index.js b/pkg/webui/components/panel/index.js
new file mode 100644
index 0000000000..59308151d3
--- /dev/null
+++ b/pkg/webui/components/panel/index.js
@@ -0,0 +1,88 @@
+// 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 Link from '../link'
+
+import Toggle from './toggle'
+
+import styles from './panel.styl'
+
+const Panel = ({
+ children,
+ title,
+ icon,
+ toggleOptions,
+ activeToggle,
+ onToggleClick,
+ buttonTitle,
+ path,
+ className,
+ messageDecorators,
+ divider,
+}) => (
+
+
} + {children} +
+)
+
+Panel.propTypes = {
+ activeToggle: PropTypes.string,
+ buttonTitle: PropTypes.string,
+ children: PropTypes.node.isRequired,
+ className: PropTypes.string,
+ divider: PropTypes.bool,
+ icon: PropTypes.string,
+ messageDecorators: PropTypes.node,
+ onToggleClick: PropTypes.func,
+ path: PropTypes.string.isRequired,
+ title: PropTypes.message.isRequired,
+ toggleOptions: PropTypes.arrayOf(PropTypes.shape({})),
+}
+
+Panel.defaultProps = {
+ buttonTitle: undefined,
+ icon: undefined,
+ toggleOptions: undefined,
+ activeToggle: undefined,
+ onToggleClick: () => null,
+ className: undefined,
+ messageDecorators: undefined,
+ divider: false,
+ svgIcon: undefined,
+}
+
+export default Panel
diff --git a/pkg/webui/components/panel/panel.styl b/pkg/webui/components/panel/panel.styl
new file mode 100644
index 0000000000..79451ef667
--- /dev/null
+++ b/pkg/webui/components/panel/panel.styl
@@ -0,0 +1,52 @@
+// 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
+ width: 100%
+ border-radius: $br.xl
+ border: 1px solid var(--c-border-neutral-light)
+ background-color: var(--c-bg-neutral-min)
+ box-shadow: var(--shadow-box-panel-normal)
+ padding: $cs.xl
+
+ &-header
+ &-title
+ font-weight: $fwv2.bold
+ font-size: $fsv2.l
+ line-height: 1
+
+ a.button
+ font-weight: $fwv2.semibold
+ 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)
+ margin-top: $cs.l
+ margin-bottom: $cs.l
+ height: 0px
+
+.panel-header-icon
+ font-size: 1.5rem
+ 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/components/panel/story.js b/pkg/webui/components/panel/story.js
new file mode 100644
index 0000000000..ae75c3485d
--- /dev/null
+++ b/pkg/webui/components/panel/story.js
@@ -0,0 +1,83 @@
+// 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 '../news-panel/news-item'
+
+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 = () => (
+
+
+ {divider &&
+ {icon &&
+ {toggleOptions ? (
+ } + {children} +
+
+
+
+)
+
+const Example = props => {
+ const [active, setActive] = React.useState('option-1')
+
+ const handleChange = React.useCallback(
+ (_, value) => {
+ setActive(value)
+ },
+ [setActive],
+ )
+
+ return
+
+
+
+ )
+}
diff --git a/pkg/webui/components/panel/toggle/index.js b/pkg/webui/components/panel/toggle/index.js
new file mode 100644
index 0000000000..64c62664ae
--- /dev/null
+++ b/pkg/webui/components/panel/toggle/index.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 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.toggleButton, {
+ [styles.toggleButtonActive]: 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 0000000000..00cc0cf29d
--- /dev/null
+++ b/pkg/webui/components/panel/toggle/toggle.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.
+
+.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)
+
+ &-button
+ reset-button()
+ border-radius: $br.m
+ padding: 0 $cs.s
+ height: 2.25rem
+ transition: background 80ms ease-in-out
+
+ &-active
+ 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: var(--c-bg-neutral-light)
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 0000000000..2ad059c1a9
--- /dev/null
+++ b/pkg/webui/components/shortcut-panel/shortcut-item/index.js
@@ -0,0 +1,44 @@
+// 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 Icon from '@ttn-lw/components/icon'
+import Link from '@ttn-lw/components/link'
+
+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 0000000000..c9e5583903
--- /dev/null
+++ b/pkg/webui/components/shortcut-panel/shortcut-item/shortcut-item.styl
@@ -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.
+
+.shortcut
+ display: flex
+ gap: $cs.m
+ flex-direction: column
+ align-items: center
+ justify-content: center
+ position: relative
+ padding: $cs.s $cs.m
+ text-decoration: none
+ height: 10.7rem
+ border-radius: $br.l
+ background: var(--c-bg-brand-normal)
+ color: var(--c-text-neutral-min)
+ font-size: $fs.m
+ font-weight: $fwv2.semibold
+ transition: $ad.s background ease-in-out
+
+ &-title-wrapper,
+ .add-icon-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 opacity ease-in-out
+
+ &-title-wrapper
+ opacity: 1
+
+ .add-icon-wrapper
+ opacity: 0
+
+ span.icon
+ font-size: 2rem
+
+ span.add-icon
+ font-size: 2.5rem
+
+ &:hover
+ cursor: pointer
+ background: var(--c-bg-brand-normal-hover)
+
+ .shortcut-title-wrapper
+ opacity: 0
+
+ .add-icon-wrapper
+ opacity: 1
+
+ span.icon
+ font-size: 2rem
+
+ span.add-icon
+ font-size: 2.5rem
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 0000000000..96844055ce
--- /dev/null
+++ b/pkg/webui/components/shortcut-panel/shortcut-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 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/index.js b/pkg/webui/components/status-label/index.js
new file mode 100644
index 0000000000..86fc7d8d8b
--- /dev/null
+++ b/pkg/webui/components/status-label/index.js
@@ -0,0 +1,59 @@
+// 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, {
+ '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'
+
+ 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 0000000000..e6aefa9f74
--- /dev/null
+++ b/pkg/webui/components/status-label/status-label.styl
@@ -0,0 +1,23 @@
+// 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
+ 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
diff --git a/pkg/webui/components/status-label/story.js b/pkg/webui/components/status-label/story.js
new file mode 100644
index 0000000000..9d3aeefdef
--- /dev/null
+++ b/pkg/webui/components/status-label/story.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 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',
+ },
+ },
+ parameters: {
+ design: {
+ type: 'figma',
+ url: 'https://www.figma.com/file/7pBLWK4tsjoAbyJq2viMAQ/console-redesign?type=design&node-id=1599-8145&mode=design&t=2KlaQGRV9FQm7Nv3-4',
+ },
+ },
+}
diff --git a/pkg/webui/components/tabs/story.js b/pkg/webui/components/tabs/story.js
index 2548867409..e1d43b5388 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