Merge pull request #6809 from TheThingsNetwork/feature/panel-component

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/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

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 <ReplacedIcon className={classname} ref={ref} {...rest} />
+  }
+
   return (
     <span className={classname} ref={ref} {...rest}>
       {hardcoded[icon] || icon}

pkg/webui/components/icon/replacements/plus-icon.js

@@ -0,0 +1,55 @@
+// 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.
+// 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 = React.forwardRef(({ className }, ref) => (
+  <svg
+    fill="none"
+    viewBox="0 0 21 21"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    ref={ref}
+  >
+    <mask
+      id="a"
+      x="0"
+      y="0"
+      width="21"
+      height="21"
+      style={{ maskType: 'alpha' }}
+      maskUnits="userSpaceOnUse"
+    >
+      <rect x=".66992" y=".97705" width="20" height="20" fill="#D9D9D9" />
+    </mask>
+    <g mask="url(#a)">
+      <path
+        d="m9.4708 12.176h-4.7716c-0.33621 0-0.62013-0.1152-0.85176-0.3457-0.23163-0.2304-0.34745-0.5129-0.34745-0.8474s0.11582-0.619 0.34745-0.8535 0.51555-0.35176 0.85176-0.35176h4.7716v-4.7716c0-0.33621 0.11522-0.62014 0.34568-0.85177 0.2305-0.23163 0.5129-0.34744 0.8474-0.34744s0.619 0.11581 0.8535 0.34744 0.3518 0.51556 0.3518 0.85177v4.7716h4.7716c0.3362 0 0.6201 0.11523 0.8518 0.34566 0.2316 0.2305 0.3474 0.513 0.3474 0.8474 0 0.3345-0.1158 0.619-0.3474 0.8535-0.2317 0.2346-0.5156 0.3518-0.8518 0.3518h-4.7716v4.7716c0 0.3362-0.1152 0.6202-0.3457 0.8518s-0.5129 0.3474-0.8474 0.3474-0.619-0.1158-0.8535-0.3474c-0.23452-0.2316-0.35178-0.5156-0.35178-0.8518v-4.7716z"
+        fill="currentColor"
+      />
+    </g>
+  </svg>
+))
+
+PlusIcon.propTypes = {
+  className: PropTypes.string,
+}
+
+PlusIcon.defaultProps = {
+  className: undefined,
+}
+
+export default PlusIcon

pkg/webui/components/icon/replacements/star-icon.js

@@ -0,0 +1,55 @@
+// 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.
+// 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 = React.forwardRef(({ className }, ref) => (
+  <svg
+    fill="none"
+    viewBox="0 0 20 20"
+    xmlns="http://www.w3.org/2000/svg"
+    className={className}
+    ref={ref}
+  >
+    <mask
+      id="a"
+      x="0"
+      y="0"
+      width="20"
+      height="20"
+      style={{ maskType: 'alpha' }}
+      maskUnits="userSpaceOnUse"
+    >
+      <rect width="20" height="20" fill="#D9D9D9" />
+    </mask>
+    <g mask="url(#a)">
+      <path
+        d="m7.2736 14.313 2.7266-1.6152 2.7488 1.6152-0.7298-3.0589 2.367-2.0243-3.1304-0.27654-1.2556-2.9149-1.2555 2.9202-3.1305 0.27126 2.3892 2.019-0.72979 3.0642zm2.7266 0.52-3.638 2.175c-0.18661 0.1024-0.36954 0.1454-0.54879 0.1289-0.17926-0.0165-0.33658-0.0759-0.47199-0.1784-0.1354-0.1024-0.23694-0.2423-0.30463-0.4198-0.0677-0.1775-0.07595-0.3596-0.02474-0.5462l0.95499-4.0576-3.2183-2.7324c-0.15365-0.13539-0.24784-0.29184-0.28257-0.46934-0.03474-0.17748-0.02825-0.35041 0.01946-0.51878 0.04769-0.16837 0.14187-0.30921 0.28254-0.42253 0.14069-0.1133 0.3117-0.17731 0.51302-0.19204l4.2122-0.37546 1.667-3.8641c0.08419-0.19013 0.20223-0.33097 0.35411-0.42251 0.15187-0.09155 0.31376-0.13733 0.48563-0.13733 0.1719 0 0.3338 0.04578 0.4857 0.13733 0.1519 0.09154 0.2699 0.23238 0.3541 0.42251l1.667 3.8862 4.2122 0.35338c0.2013 0.01473 0.3724 0.08242 0.513 0.20308 0.1407 0.12068 0.2349 0.26521 0.2826 0.43358s0.0505 0.33762 0.0084 0.50774c-0.0421 0.17013-0.14 0.3229-0.2936 0.45829l-3.1962 2.7324 0.9549 4.0576c0.0512 0.1866 0.043 0.3687-0.0247 0.5462s-0.1692 0.3174-0.3046 0.4198c-0.1354 0.1025-0.2928 0.1619-0.472 0.1784-0.1793 0.0165-0.3622-0.0265-0.5488-0.1289l-3.638-2.175z"
+        fill="currentColor"
+      />
+    </g>
+  </svg>
+))
+
+StarIcon.propTypes = {
+  className: PropTypes.string,
+}
+
+StarIcon.defaultProps = {
+  className: undefined,
+}
+
+export default StarIcon

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.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

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 = () => (
+  <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>
+)