@common-origin/design-system 1.9.0 → 1.9.2

package/dist/components/molecules/FeatureBlock/FeatureBlock.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+export type FeatureBlockProps = {
+    title: string;
+    excerpt: string;
+    labels: string[];
+    coverImage: string;
+    date: string;
+    onReadMore?: () => void;
+    readMoreHref?: string;
+    readMoreText?: string;
+};
+export declare const FeatureBlock: React.FC<FeatureBlockProps>;

package/dist/components/molecules/FeatureBlock/index.d.ts

@@ -0,0 +1 @@
+export * from './FeatureBlock';

package/dist/components/molecules/index.d.ts

@@ -3,6 +3,6 @@ export * from './CardSmall';
 export * from './CardLarge';
 export * from './ChipGroup';
 export * from './CodeBlock';
-export * from './DesignCard';
+export * from './FeatureBlock';
 export * from './Dropdown';
 export * from './PageTitle';

package/dist/index.esm.js

@@ -750,7 +750,7 @@ var AvatarContainer = styled.div.withConfig({
 }, function (_a) {
   var $size = _a.$size;
   return tokens.semantic.size.avatar[$size];
-}, tokens.base.border.radius.circle, tokens.semantic.color.background.subtle);
+}, tokens.base.border.radius.circle, tokens.semantic.color.background.surface);
 var AvatarImage = styled.img.withConfig({
   shouldForwardProp: function shouldForwardProp(prop) {
     return !prop.startsWith('$');
@@ -2404,16 +2404,19 @@ var CardSmall = function CardSmall(_a) {
     height: 300
   }), /*#__PURE__*/React.createElement(Stack, {
     direction: "column",
-    gap: "none"
+    gap: "xs"
   }, /*#__PURE__*/React.createElement(Typography, {
     variant: "small"
-  }, title), subtitle && /*#__PURE__*/React.createElement(Typography, {
+  }, title), /*#__PURE__*/React.createElement(Stack, {
+    direction: "column",
+    gap: "none"
+  }, subtitle && /*#__PURE__*/React.createElement(Typography, {
     variant: "label",
     color: "subdued"
   }, subtitle), meta && /*#__PURE__*/React.createElement(Typography, {
     variant: "label",
     color: "subdued"
-  }, meta)))));
+  }, meta))))));
 };
 var templateObject_1$7;
 
@@ -2593,68 +2596,64 @@ React.createElement;
 var _a$1 = tokens.base,
   spacing$1 = _a$1.spacing,
   border$1 = _a$1.border;
-var DesignCardStyled = styled.div.withConfig({
-  displayName: "DesignCard__DesignCardStyled",
-  componentId: "sc-1lah9zd-0"
+var FeatureBlockStyled = styled.div.withConfig({
+  displayName: "FeatureBlock__FeatureBlockStyled",
+  componentId: "sc-1mi4lso-0"
 })(templateObject_1$3 || (templateObject_1$3 = __makeTemplateObject(["\n  @media (min-width: ", ") {\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n  }\n\n  @media (min-width: ", ") {\n    gap: ", ";\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n\n    &:hover {\n      opacity: 0.8;\n    }\n  }\n\n  a {\n    text-decoration: none;\n  }\n"], ["\n  @media (min-width: ", ") {\n    display: grid;\n    grid-template-columns: repeat(12, 1fr);\n  }\n\n  @media (min-width: ", ") {\n    gap: ", ";\n  }\n\n  img {\n    border-radius: ", ";\n    transition: ease opacity 0.2s;\n\n    &:hover {\n      opacity: 0.8;\n    }\n  }\n\n  a {\n    text-decoration: none;\n  }\n"])), tokens.base.breakpoint.md, tokens.base.breakpoint.lg, spacing$1[12], border$1.radius[6]);
 var ImageWrapper = styled.div.withConfig({
-  displayName: "DesignCard__ImageWrapper",
-  componentId: "sc-1lah9zd-1"
+  displayName: "FeatureBlock__ImageWrapper",
+  componentId: "sc-1mi4lso-1"
 })(templateObject_2$2 || (templateObject_2$2 = __makeTemplateObject(["\n  grid-column: span 12;\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n  }\n"], ["\n  grid-column: span 12;\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n  }\n"])), tokens.base.breakpoint.lg);
 var ContentSection = styled.div.withConfig({
-  displayName: "DesignCard__ContentSection",
-  componentId: "sc-1lah9zd-2"
+  displayName: "FeatureBlock__ContentSection",
+  componentId: "sc-1mi4lso-2"
 })(templateObject_3$2 || (templateObject_3$2 = __makeTemplateObject(["\n  grid-column: span 12;\n  margin-top: ", ";\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n    margin-top: 0;\n    padding-right: ", ";\n  }\n\n  @media (min-width: ", ") {\n    padding-right: ", ";\n  }\n"], ["\n  grid-column: span 12;\n  margin-top: ", ";\n\n  @media (min-width: ", ") {\n    grid-column: span 6;\n    margin-top: 0;\n    padding-right: ", ";\n  }\n\n  @media (min-width: ", ") {\n    padding-right: ", ";\n  }\n"])), spacing$1[6], tokens.base.breakpoint.lg, spacing$1[8], tokens.base.breakpoint.xl, spacing$1[24]);
 var ButtonWrapper = styled.div.withConfig({
-  displayName: "DesignCard__ButtonWrapper",
-  componentId: "sc-1lah9zd-3"
+  displayName: "FeatureBlock__ButtonWrapper",
+  componentId: "sc-1mi4lso-3"
 })(templateObject_4$2 || (templateObject_4$2 = __makeTemplateObject(["\n  button {\n    margin-top: ", ";\n  }\n"], ["\n  button {\n    margin-top: ", ";\n  }\n"])), spacing$1[4]);
 var ContentWrapper = styled.div.withConfig({
-  displayName: "DesignCard__ContentWrapper",
-  componentId: "sc-1lah9zd-4"
+  displayName: "FeatureBlock__ContentWrapper",
+  componentId: "sc-1mi4lso-4"
 })(templateObject_5$2 || (templateObject_5$2 = __makeTemplateObject(["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  height: 100%;\n"], ["\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  height: 100%;\n"])));
-var DesignCard = function DesignCard(_a) {
+var FeatureBlock = function FeatureBlock(_a) {
   var title = _a.title,
     excerpt = _a.excerpt,
     _b = _a.labels,
     labels = _b === void 0 ? [] : _b,
-    tag = _a.tag,
     coverImage = _a.coverImage,
     date = _a.date,
     onReadMore = _a.onReadMore,
     readMoreHref = _a.readMoreHref,
     _c = _a.readMoreText,
     readMoreText = _c === void 0 ? "Read more" : _c;
-  if (tag === 'design') {
-    return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(DesignCardStyled, null, /*#__PURE__*/React.createElement(ImageWrapper, null, /*#__PURE__*/React.createElement(Picture, {
-      title: title,
-      src: coverImage
-    })), /*#__PURE__*/React.createElement(ContentSection, null, /*#__PURE__*/React.createElement(ContentWrapper, null, /*#__PURE__*/React.createElement(Stack, {
-      direction: "column",
-      gap: "md"
-    }, /*#__PURE__*/React.createElement(Typography, {
-      variant: "h3"
-    }, title), /*#__PURE__*/React.createElement(DateFormatter, {
-      dateString: date
-    }), /*#__PURE__*/React.createElement(Typography, {
-      variant: "small"
-    }, excerpt), /*#__PURE__*/React.createElement(Stack, {
-      direction: "row",
-      gap: "xs"
-    }, Array.isArray(labels) && labels.map(function (label, index) {
-      return /*#__PURE__*/React.createElement(Chip, {
-        key: index,
-        title: label,
-        variant: "default"
-      });
-    })), (onReadMore || readMoreHref) && /*#__PURE__*/React.createElement(ButtonWrapper, null, readMoreHref ? /*#__PURE__*/React.createElement(Button, {
-      purpose: "link",
-      url: readMoreHref
-    }, readMoreText) : /*#__PURE__*/React.createElement(Button, {
-      onClick: onReadMore
-    }, readMoreText)))))), /*#__PURE__*/React.createElement(Divider, null));
-  }
-  return null;
+  return /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(FeatureBlockStyled, null, /*#__PURE__*/React.createElement(ImageWrapper, null, /*#__PURE__*/React.createElement(Picture, {
+    title: title,
+    src: coverImage
+  })), /*#__PURE__*/React.createElement(ContentSection, null, /*#__PURE__*/React.createElement(ContentWrapper, null, /*#__PURE__*/React.createElement(Stack, {
+    direction: "column",
+    gap: "md"
+  }, /*#__PURE__*/React.createElement(Typography, {
+    variant: "h3"
+  }, title), /*#__PURE__*/React.createElement(DateFormatter, {
+    dateString: date
+  }), /*#__PURE__*/React.createElement(Typography, {
+    variant: "small"
+  }, excerpt), /*#__PURE__*/React.createElement(Stack, {
+    direction: "row",
+    gap: "xs"
+  }, Array.isArray(labels) && labels.map(function (label, index) {
+    return /*#__PURE__*/React.createElement(Chip, {
+      key: index,
+      title: label,
+      variant: "default"
+    });
+  })), (onReadMore || readMoreHref) && /*#__PURE__*/React.createElement(ButtonWrapper, null, readMoreHref ? /*#__PURE__*/React.createElement(Button, {
+    purpose: "link",
+    url: readMoreHref
+  }, readMoreText) : /*#__PURE__*/React.createElement(Button, {
+    onClick: onReadMore
+  }, readMoreText)))))), /*#__PURE__*/React.createElement(Divider, null));
 };
 var templateObject_1$3, templateObject_2$2, templateObject_3$2, templateObject_4$2, templateObject_5$2;
 
@@ -3105,5 +3104,5 @@ var ResponsiveGrid = function ResponsiveGrid(_a) {
 };
 var templateObject_1, templateObject_2, templateObject_3, templateObject_4, templateObject_5, templateObject_6, templateObject_7, templateObject_8, templateObject_9, templateObject_10, templateObject_11, templateObject_12, templateObject_13, templateObject_14, templateObject_15, templateObject_16, templateObject_17, templateObject_18, templateObject_19, templateObject_20, templateObject_21, templateObject_22, templateObject_23, templateObject_24, templateObject_25, templateObject_26, templateObject_27, templateObject_28, templateObject_29, templateObject_30, templateObject_31, templateObject_32, templateObject_33, templateObject_34, templateObject_35;
 
-export { Avatar, Badge, BooleanChip, Box, Breadcrumbs, Button, CardLarge, CardSmall, Chip, ChipGroup, CodeBlock, Container, DateFormatter, DesignCard, Divider, Dropdown, FilterChip, Grid, GridCol, Icon, IconButton, LegacyChip, PageTitle, Picture, ProgressBar, ResponsiveGrid, Stack, Typography, iconsData, tokens };
+export { Avatar, Badge, BooleanChip, Box, Breadcrumbs, Button, CardLarge, CardSmall, Chip, ChipGroup, CodeBlock, Container, DateFormatter, Divider, Dropdown, FeatureBlock, FilterChip, Grid, GridCol, Icon, IconButton, LegacyChip, PageTitle, Picture, ProgressBar, ResponsiveGrid, Stack, Typography, iconsData, tokens };
 //# sourceMappingURL=index.esm.js.map