Add Panel component

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'

pkg/webui/components/news-panel/news-item/index.js

@@ -0,0 +1,51 @@
+// 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 Link from '@ttn-lw/components/link'
+
+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 }) => (
+  <Link className={styles.item}>
+    <img src={articleImage} className={styles.image} />
+    <div className="d-flex direction-column j-center">
+      <Message content={articleTitle} className={styles.title} />
+      <DateTime
+        value={articleDate}
+        time={false}
+        dateFormatOptions={{
+          year: 'numeric',
+          month: 'long',
+          day: '2-digit',
+        }}
+        className="c-text-neutral-light"
+      />
+    </div>
+  </Link>
+)
+
+NewsItem.propTypes = {
+  articleDate: PropTypes.string.isRequired,
+  articleImage: PropTypes.string.isRequired,
+  articleTitle: PropTypes.message.isRequired,
+}
+
+export default NewsItem

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.m ease-in-out
+  border-radius: $br.xl
+  padding: $cs.xs
+
+  &:hover
+    background-color: var(--c-bg-neutral-min-hover)
+
+  .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: normal

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: 'Panel/News Panel/News Item',
+  component: NewsItem,
+}
+
+export const Default = () => (
+  <div style={{ width: '399px' }}>
+    <NewsItem
+      articleTitle="Long title of the latest post on our blog that will take more that two line to fit in here"
+      articleImage={loginVisual}
+      articleDate="2024-01-01T00:00:00Z"
+    />
+  </div>
+)

pkg/webui/components/panel/index.js

@@ -0,0 +1,87 @@
+// 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,
+}) => (
+  <div className={classnames(styles.panel, className)}>
+    <div className="d-flex j-between mb-cs-m">
+      <div className="d-flex gap-cs-xs al-center">
+        {icon && <Icon icon={icon} className={styles.panelHeaderIcon} />}
+        <Message content={title} className={styles.panelHeaderTitle} />
+        {messageDecorators}
+      </div>
+      {toggleOptions ? (
+        <Toggle options={toggleOptions} active={activeToggle} onToggleChange={onToggleClick} />
+      ) : (
+        <Link primary to={path} className={styles.button}>
+          <Message content={buttonTitle} /> →
+        </Link>
+      )}
+    </div>
+    {divider && <hr className={styles.panelDivider} />}
+    {children}
+  </div>
+)
+
+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,
+}
+
+export default Panel

pkg/webui/components/panel/panel.styl

@@ -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.
+
+.panel
+  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) // TODO: Convert to token.
+  padding: $cs.xl
+
+  &-header
+    &-title
+      font-weight: $fwv2.bold
+      font-size: $fsv2.l
+      line-height: 1
+
+  .button
+    font-weight: $fwv2.semibold
+    text-decoration: none
+
+    &:hover
+      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

pkg/webui/components/panel/story.js

@@ -0,0 +1,77 @@
+// 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,
+}
+
+export const Default = () => (
+  <div style={{ width: '32.5rem' }}>
+    <Panel title="Latest news" icon="feed" buttonTitle="Visit our blog" divider>
+      <div className="d-flex direction-column gap-cs-xs">
+        <NewsItem
+          articleTitle="Long title of the latest post on our blog that will take more that two line to fit in here"
+          articleImage={loginVisual}
+          articleDate="2024-01-01T00:00:00Z"
+        />
+        <NewsItem
+          articleTitle="Long title of the latest post on our blog that will take more that two line to fit in here"
+          articleImage={loginVisual}
+          articleDate="2024-01-01T00:00:00Z"
+        />
+        <NewsItem
+          articleTitle="Long title of the latest post on our blog that will take more that two line to fit in here"
+          articleImage={loginVisual}
+          articleDate="2024-01-01T00:00:00Z"
+        />
+      </div>
+    </Panel>
+  </div>
+)
+
+const Example = props => {
+  const [active, setActive] = React.useState('option-1')
+
+  const handleChange = React.useCallback(
+    (_, value) => {
+      setActive(value)
+    },
+    [setActive],
+  )
+
+  return <Panel {...props} activeToggle={active} onToggleClick={handleChange} />
+}
+
+export const WithToggle = () => {
+  const options = [
+    { label: 'Option 1', value: 'option-1' },
+    { label: 'Option 2', value: 'option-2' },
+    { label: 'Option 3', value: 'option-3' },
+  ]
+
+  return (
+    <div style={{ width: '32.5rem' }}>
+      <Example title="Your top entities" icon="star" toggleOptions={options} />
+    </div>
+  )
+}