@thecb/components 5.4.4 → 5.5.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@thecb/components",
-  "version": "5.4.4",
+  "version": "5.5.0",
   "description": "Common lib for CityBase react components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.esm.js",

package/src/components/atoms/layouts/Reel.js

@@ -24,6 +24,8 @@ const Reel = ({
       justifyContent={justifyContent}
       disableScroll={disableScroll}
       as={elementType}
+      useOrderedList={useOrderedList}
+      useUnorderedList={useUnorderedList}
       {...rest}
     >
       {safeChildren(children, <Fragment />)}

package/src/components/atoms/layouts/Reel.styled.js

@@ -14,4 +14,15 @@ export const ReelStyled = styled.div`
   > * {
     flex: 0 0 ${({ childWidth }) => childWidth};
   }
+
+  ${({ useOrderedList, useUnorderedList }) =>
+    useOrderedList || useUnorderedList
+      ? `
+      margin: 0;
+      margin-block-start: 0;
+      margin-block-end: 0;
+      padding-inline-start: 0;
+      list-style-type: none;
+    `
+      : ``}
 `;

package/src/components/molecules/collapsible-section/CollapsibleSection.js

@@ -2,7 +2,7 @@ import React, { Fragment } from "react";
 import { fallbackValues } from "./CollapsibleSection.theme";
 import { AnimatePresence } from "framer-motion";
 import { themeComponent } from "../../../util/themeUtils";
-import Heading from "../../atoms/heading";
+import Title from "../../atoms/title";
 import { FONT_WEIGHT_SEMIBOLD } from "../../../constants/style_constants";
 import { Box, Cluster, Stack, Motion } from "../../atoms/layouts";
 import { ChevronIcon } from "../../atoms/icons";
@@ -98,14 +98,14 @@ const CollapsibleSection = ({
                   {title}
                 </Box>
               ) : (
-                <Heading
-                  variant="h6"
+                <Title
                   weight={FONT_WEIGHT_SEMIBOLD}
                   color={themeValues.titleColor}
                   as="h6"
+                  variant="small"
                 >
                   {title}
-                </Heading>
+                </Title>
               )}
               <Motion
                 variants={icon}

package/src/components/molecules/editable-list/EditableList.js

@@ -111,7 +111,7 @@ const EditableList = ({
                           text="Remove"
                           action={() => removeItem(item.id)}
                           extraStyles={`min-width: 0;`}
-                          aria-label={`Remove ${itemName} ${title}`}
+                          aria-label={`Remove ${itemName}`}
                         />
                       )}
                     </Box>
@@ -129,7 +129,7 @@ const EditableList = ({
                         text="Edit"
                         action={() => editItem(item.id)}
                         extraStyles={`min-width: 0;`}
-                        aria-label={`Edit ${itemName} ${title}`}
+                        aria-label={`Edit ${itemName}`}
                       />
                     </Box>
                   )}