@kitconcept/volto-light-theme 6.0.0-alpha.20 → 6.0.0-alpha.21

package/.changelog.draft

@@ -1,12 +1,8 @@
-## 6.0.0-alpha.20 (2025-04-01)
-
-### Breaking
-
-- Remove feature flags, move to site customizations. @sneridagh [#516](https://github.com/kitconcept/volto-light-theme/pull/516)
-- Remove Plone portal actions from headers. @sneridagh [#516](https://github.com/kitconcept/volto-light-theme/pull/516)
+## 6.0.0-alpha.21 (2025-04-02)
 
 ### Bugfix
 
-- Minor CSS fixes and add docs on colors. @danalvrz [#509](https://github.com/kitconcept/volto-light-theme/pull/509)
+- Fixed `Tags` component container. @sneridagh [#517](https://github.com/kitconcept/volto-light-theme/pull/517)
+- Improve position of the intranet flag in responsive viewports. @sneridagh [#518](https://github.com/kitconcept/volto-light-theme/pull/518)
 
 

package/CHANGELOG.md

@@ -8,6 +8,13 @@
 
 <!-- towncrier release notes start -->
 
+## 6.0.0-alpha.21 (2025-04-02)
+
+### Bugfix
+
+- Fixed `Tags` component container. @sneridagh [#517](https://github.com/kitconcept/volto-light-theme/pull/517)
+- Improve position of the intranet flag in responsive viewports. @sneridagh [#518](https://github.com/kitconcept/volto-light-theme/pull/518)
+
 ## 6.0.0-alpha.20 (2025-04-01)
 
 ### Breaking

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kitconcept/volto-light-theme",
-  "version": "6.0.0-alpha.20",
+  "version": "6.0.0-alpha.21",
   "description": "Volto Light Theme by kitconcept",
   "main": "src/index.ts",
   "types": "src/index.ts",

package/src/components/Tags/Tags.jsx

@@ -0,0 +1,46 @@
+import { Link } from 'react-router-dom';
+import PropTypes from 'prop-types';
+import { Container as SemanticContainer } from 'semantic-ui-react';
+import config from '@plone/registry';
+
+const Tags = ({ content }) => {
+  const tags = content?.subjects || [];
+  const Container =
+    config.getComponent({ name: 'Container' }).component || SemanticContainer;
+
+  if (!config.settings.showTags || !tags.length) return null;
+
+  return (
+    <Container className="default tags">
+      {tags.map((tag) => (
+        <Link className="ui label" to={`/search?Subject=${tag}`} key={tag}>
+          {tag}
+        </Link>
+      ))}
+    </Container>
+  );
+};
+
+/**
+ * Property types.
+ * @property {Object} propTypes Property types.
+ * @static
+ */
+Tags.propTypes = {
+  content: PropTypes.shape({
+    subjects: PropTypes.arrayOf(PropTypes.string),
+  }),
+};
+
+/**
+ * Default properties.
+ * @property {Object} defaultProps Default properties.
+ * @static
+ */
+Tags.defaultProps = {
+  content: {
+    subjects: [],
+  },
+};
+
+export default Tags;

package/src/customizations/volto/components/theme/Tags/Tags.jsx

@@ -0,0 +1,11 @@
+/**
+ * OVERRIDE Tags.jsx
+ * REASON: This theme uses a custom pre-@plone/components component
+ * SemanticUI-free located at the components folder.
+ * To override it, override the @kitconcept/volto-light-theme one instead of
+ * this one.
+ */
+
+import Tags from '../../../../../components/Tags/Tags';
+
+export default Tags;

package/src/theme/_header.scss

@@ -245,9 +245,17 @@
       padding: 10px $spacing-small;
       border: none;
       margin-top: -16px;
-      margin-left: 20vw;
+      margin-left: 200px;
       background-color: $secondary-grey;
 
+      @media only screen and (max-width: $computer-breakpoint) {
+        margin-left: 150px;
+      }
+
+      @media only screen and (max-width: $tablet-breakpoint) {
+        margin-left: 125px;
+      }
+
       @media only screen and (max-width: $narrow-container-width) {
         margin-left: 0px;
       }