orcs-design-system 3.3.11 → 3.3.13

package/es/components/Card/Card.stories.js

@@ -104,9 +104,10 @@ export const complexCard = () => /*#__PURE__*/_jsx(Flex, {
   children: /*#__PURE__*/_jsxs(Spacer, {
     mx: "r",
     children: [/*#__PURE__*/_jsx(Card, {
-      center: true,
-      children: /*#__PURE__*/_jsxs(Spacer, {
-        my: "s",
+      children: /*#__PURE__*/_jsxs(Flex, {
+        flexDirection: "column",
+        gap: "r",
+        alignItems: "center",
         children: [/*#__PURE__*/_jsx(Icon, {
           icon: ["fas", "file"],
           size: "3x",
@@ -120,9 +121,10 @@ export const complexCard = () => /*#__PURE__*/_jsx(Flex, {
         })]
       })
     }), /*#__PURE__*/_jsx(Card, {
-      center: true,
-      children: /*#__PURE__*/_jsxs(Spacer, {
-        my: "s",
+      children: /*#__PURE__*/_jsxs(Flex, {
+        flexDirection: "column",
+        gap: "r",
+        alignItems: "center",
         children: [/*#__PURE__*/_jsx(Icon, {
           icon: ["fas", "eye"],
           size: "3x",

package/es/components/Card/index.js

@@ -3,14 +3,14 @@ import styled, { css, ThemeProvider } from "styled-components";
 import PropTypes from "prop-types";
 import Icon from "../Icon/";
 import Box from "../Box/";
+import Flex from "../Flex/";
 import { H3, H4 } from "../Typography";
-import { space, layout } from "styled-system";
 import { themeGet } from "@styled-system/theme-get";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-const Item = styled.div.withConfig({
+const Item = styled(Box).withConfig({
   displayName: "Card__Item",
   componentId: "sc-yfq75p-0"
-})(["", " ", " word-break:break-word;width:", ";height:", ";background:", ";border-radius:", ";padding:", ";box-shadow:", ";", ";", ";", ";"], space, layout, props => props.width ? props.width : props.fluid ? "100%" : "auto", props => props.fluid ? "100%" : "auto", props => themeGet("colors.white")(props), props => themeGet("radii.2")(props), props => themeGet("space.4")(props), props => themeGet("shadows.boxDefault")(props), props => props.colour === "primary" ? css(["border-radius:0 0 ", " ", ";border-top:solid 3px ", ";"], themeGet("radii.2")(props), themeGet("radii.2")(props), themeGet("colors.primary")(props)) : props.colour === "success" ? css(["border-radius:0 0 ", " ", ";border-top:solid 3px ", ";"], themeGet("radii.2")(props), themeGet("radii.2")(props), themeGet("colors.success")(props)) : props.colour === "warning" ? css(["border-radius:0 0 ", " ", ";border-top:solid 3px ", ";"], themeGet("radii.2")(props), themeGet("radii.2")(props), themeGet("colors.warning")(props)) : props.colour === "danger" ? css(["border-radius:0 0 ", " ", ";border-top:solid 3px ", ";"], themeGet("radii.2")(props), themeGet("radii.2")(props), themeGet("colors.danger")(props)) : props.colour === "greyDark" ? css(["border-radius:0 0 ", " ", ";border-top:solid 3px ", ";"], themeGet("radii.2")(props), themeGet("radii.2")(props), themeGet("colors.greyDarker")(props)) : css(["border-top:0;"]), props => props.center ? css([",> *,> div > *{display:flex;flex-direction:column;align-items:center;}"]) : css([""]), props => props.alternate ? css(["> div:first-of-type{display:flex;justify-content:flex-start;align-items:center;}h4{margin-left:auto;float:right;}"]) : css([""]));
+})(["word-break:break-word;"]);
 const ChangeIcon = styled.div.withConfig({
   displayName: "Card__ChangeIcon",
   componentId: "sc-yfq75p-1"
@@ -36,24 +36,34 @@ export default function Card(_ref) {
     changeIcon,
     changeValue,
     children,
-    fluid,
-    width,
-    center,
     theme,
+    fluid,
     ...props
   } = _ref;
   const component = /*#__PURE__*/_jsxs(Item, {
-    alternate: alternate,
     colour: colour,
-    fluid: fluid,
-    width: width,
-    center: center,
+    borderRadius: "2",
+    bg: "white",
+    height: fluid ? "100%" : "auto",
+    width: fluid ? "100%" : "auto",
+    p: "r",
+    ...(colour ? {
+      borderTop: "3px solid",
+      borderTopColor: colour,
+      borderTopLeftRadius: "0",
+      borderTopRightRadius: "0"
+    } : {
+      boxBorder: "default"
+    }),
     ...props,
-    children: [!icon & !title & !subtitle ? null : /*#__PURE__*/_jsxs(Box, {
+    children: [!icon & !title & !subtitle ? null : /*#__PURE__*/_jsxs(Flex, {
       mb: "r",
+      width: "100%",
+      alignItems: alternate ? "center" : "flex-start",
+      flexDirection: alternate ? "row" : "column",
       children: [icon ? /*#__PURE__*/_jsx(Icon, {
         icon: icon,
-        size: "lg",
+        size: "1x",
         mr: "s"
       }) : null, title ? /*#__PURE__*/_jsx(H3, {
         children: title
@@ -64,6 +74,7 @@ export default function Card(_ref) {
       }) : null, subtitle ? /*#__PURE__*/_jsx(H4, {
         fontSize: "1",
         color: "greyDark",
+        ml: alternate ? "auto" : 0,
         children: subtitle
       }) : null]
     }), /*#__PURE__*/_jsx(Box, {
@@ -76,26 +87,26 @@ export default function Card(_ref) {
   }) : component;
 }
 Card.propTypes = {
-  /** Changes card styles to suit a card that holds alternate data */
-  alternate: PropTypes.bool,
-  /** Forces card to take 100% width and height of parent element */
-  fluid: PropTypes.bool,
   /** Applies an icon to header of specified name */
   icon: PropTypes.array,
   /** Card title */
   title: PropTypes.node,
   /** Card subtitle */
   subtitle: PropTypes.node,
-  /** Horizontally centers content inside card */
-  center: PropTypes.bool,
-  /** Can specify a width in pixels or percentages (make sure you specify units). Can also use calc (see code for example) */
+  /** Can specify a width in pixels or percentages. Can also use calc. */
   width: PropTypes.string,
+  /** Can specify a height in pixels or percentages. Can also use calc. */
+  height: PropTypes.string,
   /** Adds a coloured top border. Uses the system colours (eg primary, warning) */
   colour: PropTypes.string,
   /** Specify the icon to be used for the changeValue element. */
   changeIcon: PropTypes.oneOf(["arrowUp", "arrowDown"]),
   /** Adds a gray inline element to the card heading to describe change in value */
   changeValue: PropTypes.string,
+  /** Pushes subtitle to the right of the title rather than stacked underneath */
+  alternate: PropTypes.bool,
+  /** Forces card to take 100% width and height of parent element */
+  fluid: PropTypes.bool,
   /** Card contents. */
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.arrayOf(PropTypes.node)]),
   /** Specifies the system design theme. */
@@ -106,20 +117,6 @@ Card.__docgenInfo = {
   "methods": [],
   "displayName": "Card",
   "props": {
-    "alternate": {
-      "description": "Changes card styles to suit a card that holds alternate data",
-      "type": {
-        "name": "bool"
-      },
-      "required": false
-    },
-    "fluid": {
-      "description": "Forces card to take 100% width and height of parent element",
-      "type": {
-        "name": "bool"
-      },
-      "required": false
-    },
     "icon": {
       "description": "Applies an icon to header of specified name",
       "type": {
@@ -141,15 +138,15 @@ Card.__docgenInfo = {
       },
       "required": false
     },
-    "center": {
-      "description": "Horizontally centers content inside card",
+    "width": {
+      "description": "Can specify a width in pixels or percentages. Can also use calc.",
       "type": {
-        "name": "bool"
+        "name": "string"
       },
       "required": false
     },
-    "width": {
-      "description": "Can specify a width in pixels or percentages (make sure you specify units). Can also use calc (see code for example)",
+    "height": {
+      "description": "Can specify a height in pixels or percentages. Can also use calc.",
       "type": {
         "name": "string"
       },
@@ -183,6 +180,20 @@ Card.__docgenInfo = {
       },
       "required": false
     },
+    "alternate": {
+      "description": "Pushes subtitle to the right of the title rather than stacked underneath",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
+    "fluid": {
+      "description": "Forces card to take 100% width and height of parent element",
+      "type": {
+        "name": "bool"
+      },
+      "required": false
+    },
     "children": {
       "description": "Card contents.",
       "type": {

package/es/components/FloatingPanels/FloatingPanels.styles.js

@@ -42,7 +42,7 @@ export const PanelWrapper = styled.div.withConfig({
 export const PanelHeader = styled.button.withConfig({
   displayName: "FloatingPanelsstyles__PanelHeader",
   componentId: "sc-1by914f-3"
-})(["font-family:", ";color:", ";margin-left:-1px;margin-top:-37px;border-radius:8px 8px 0 0;appearance:none;background-color:white;display:flex;align-items:center;justify-content:space-between;padding:", ";height:37px;position:absolute;width:", ";border:solid 1px ", ";z-index:1;cursor:pointer;user-select:none;transition:padding 0.3s ease-in-out;&:focus{outline:none;}"], themeGet("fonts.main"), themeGet("colors.greyDarkest"), themeGet("space.s"), panelWidth, themeGet("colors.greyLighter"));
+})(["font-family:", ";color:", ";margin-left:-1px;margin-top:-37px;border-radius:8px 8px 0 0;appearance:none;background-color:white;display:flex;align-items:center;justify-content:space-between;padding:8px;height:37px;position:absolute;width:", ";border:solid 1px ", ";z-index:1;cursor:pointer;user-select:none;transition:padding 0.3s ease-in-out;&:focus{outline:none;}"], themeGet("fonts.main"), themeGet("colors.greyDarkest"), panelWidth, themeGet("colors.greyLighter"));
 export const HeaderContent = styled.div.withConfig({
   displayName: "FloatingPanelsstyles__HeaderContent",
   componentId: "sc-1by914f-4"
@@ -67,7 +67,7 @@ export const IconButton = styled.button.withConfig({
 export const PanelContent = styled.div.withConfig({
   displayName: "FloatingPanelsstyles__PanelContent",
   componentId: "sc-1by914f-8"
-})(["padding:", ";width:inerhit;display:", ";height:", ";opacity:", ";"], themeGet("space.s"), _ref8 => {
+})(["padding:8px;width:inerhit;display:", ";height:", ";opacity:", ";"], _ref8 => {
   let {
     isExpanded
   } = _ref8;

package/es/components/Tag/Tag.stories.js

@@ -18,6 +18,8 @@ defaultTag.storyName = "Default";
 export const Selected = () => {
   const [selectedA, setSelectedA] = useState(true);
   const [selectedB, setSelectedB] = useState(true);
+  const [selectedC, setSelectedC] = useState(true);
+  const [selectedD, setSelectedD] = useState(true);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Tag, {
       selected: selectedA,
@@ -28,8 +30,12 @@ export const Selected = () => {
       onClick: () => setSelectedB(!selectedB),
       children: "software engineering"
     }), /*#__PURE__*/_jsx(Tag, {
+      selected: selectedC,
+      onClick: () => setSelectedC(!selectedC),
       children: "product design"
     }), /*#__PURE__*/_jsx(Tag, {
+      selected: selectedD,
+      onClick: () => setSelectedD(!selectedD),
       children: "digital transformation"
     })]
   });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "orcs-design-system",
-  "version": "3.3.11",
+  "version": "3.3.13",
   "engines": {
     "node": "20.12.2"
   },