@codecademy/brand 5.10.0-alpha.cfbadc666.0 → 5.11.0-alpha.93b754c9d.0

package/dist/AccordionAreaDeprecated/index.d.ts

@@ -14,6 +14,7 @@ export type AccordionAreaDeprecatedProps = {
 /**
  * @deprecated
  * This component is in the old visual identity and will be updated soon.
+ * @see `Disclosure` and `List` from `@codecademy/gamut`
  *
  * Check the [Gamut Board](https://www.notion.so/codecademy/Gamut-Status-Timeline-dd3c135d3848464ea6eb1b48e68fbb1d) for component status
  */

package/dist/AccordionAreaDeprecated/index.js

@@ -18,6 +18,7 @@ const variants = {
 /**
  * @deprecated
  * This component is in the old visual identity and will be updated soon.
+ * @see `Disclosure` and `List` from `@codecademy/gamut`
  *
  * Check the [Gamut Board](https://www.notion.so/codecademy/Gamut-Status-Timeline-dd3c135d3848464ea6eb1b48e68fbb1d) for component status
  */
@@ -55,6 +56,6 @@ const StyledAccordionBody = /*#__PURE__*/_styled(motion.div, {
   styles: "overflow:hidden"
 } : {
   name: "d3v9zr",
-  styles: "overflow:hidden/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9BY2NvcmRpb25BcmVhRGVwcmVjYXRlZC9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBaUU4QyIsImZpbGUiOiIuLi8uLi9zcmMvQWNjb3JkaW9uQXJlYURlcHJlY2F0ZWQvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgbW90aW9uIH0gZnJvbSAnZnJhbWVyLW1vdGlvbic7XG5pbXBvcnQgeyB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IHVzZUlzb21vcnBoaWNMYXlvdXRFZmZlY3QgfSBmcm9tICdyZWFjdC11c2UnO1xuXG5leHBvcnQgdHlwZSBBY2NvcmRpb25BcmVhRGVwcmVjYXRlZFByb3BzID0ge1xuICBjaGlsZHJlbjogUmVhY3QuUmVhY3ROb2RlO1xuXG4gIGNsYXNzTmFtZT86IHN0cmluZztcblxuICAvKipcbiAgICogV2hldGhlciB0aGUgYWNjb3JkaW9uIGlzIHZpc3VhbGx5IGV4cGFuZGVkIHRvIHNob3cgaXRzIGNvbnRlbnRzLlxuICAgKi9cbiAgZXhwYW5kZWQ/OiBib29sZWFuO1xuXG4gIC8qKlxuICAgKiBDb250ZW50cyBvZiB0aGUgY2xpY2thYmxlIGhlYWRlciBidXR0b24uXG4gICAqL1xuICB0b3A6IFJlYWN0LlJlYWN0Tm9kZTtcbn07XG5cbmNvbnN0IHRyYW5zaXRpb25EdXJhdGlvbiA9IDAuMjtcblxuY29uc3QgdmFyaWFudHMgPSB7XG4gIGV4cGFuZGVkOiB7IGhlaWdodDogJ2F1dG8nIH0sXG4gIGZvbGRlZDogeyBoZWlnaHQ6ICcwJyB9LFxufTtcblxuLyoqXG4gKiBAZGVwcmVjYXRlZFxuICogVGhpcyBjb21wb25lbnQgaXMgaW4gdGhlIG9sZCB2aXN1YWwgaWRlbnRpdHkgYW5kIHdpbGwgYmUgdXBkYXRlZCBzb29uLlxuICpcbiAqIENoZWNrIHRoZSBbR2FtdXQgQm9hcmRdKGh0dHBzOi8vd3d3Lm5vdGlvbi5zby9jb2RlY2FkZW15L0dhbXV0LVN0YXR1cy1UaW1lbGluZS1kZDNjMTM1ZDM4NDg0NjRlYTZlYjFiNDhlNjhmYmIxZCkgZm9yIGNvbXBvbmVudCBzdGF0dXNcbiAqL1xuXG5leHBvcnQgY29uc3QgQWNjb3JkaW9uQXJlYURlcHJlY2F0ZWQ6IFJlYWN0LkZDPFxuICBBY2NvcmRpb25BcmVhRGVwcmVjYXRlZFByb3BzXG4+ID0gKHsgY2hpbGRyZW4sIGNsYXNzTmFtZSwgZXhwYW5kZWQsIHRvcCB9KSA9PiB7XG4gIGNvbnN0IFtkZWxheUV4cGFuZGVkLCBzZXREZWxheUV4cGFuZGVkXSA9IHVzZVN0YXRlKGV4cGFuZGVkKTtcblxuICB1c2VJc29tb3JwaGljTGF5b3V0RWZmZWN0KCgpID0+IHtcbiAgICBjb25zdCBoYW5kbGUgPSBzZXRUaW1lb3V0KFxuICAgICAgKCkgPT4gc2V0RGVsYXlFeHBhbmRlZChleHBhbmRlZCksXG4gICAgICB0cmFuc2l0aW9uRHVyYXRpb24gKiAxMDAwXG4gICAgKTtcblxuICAgIHJldHVybiAoKSA9PiBjbGVhclRpbWVvdXQoaGFuZGxlKTtcbiAgfSwgW2V4cGFuZGVkXSk7XG5cbiAgcmV0dXJuIChcbiAgICA8ZGl2IGNsYXNzTmFtZT17Y2xhc3NOYW1lfT5cbiAgICAgIHt0b3B9XG4gICAgICA8U3R5bGVkQWNjb3JkaW9uQm9keVxuICAgICAgICBhbmltYXRlPXtleHBhbmRlZCA/ICdleHBhbmRlZCcgOiAnZm9sZGVkJ31cbiAgICAgICAgaW5pdGlhbD17ZXhwYW5kZWQgPyAnZXhwYW5kZWQnIDogJ2ZvbGRlZCd9XG4gICAgICAgIHRyYW5zaXRpb249e3sgZHVyYXRpb246IDAuMiwgZWFzZTogJ2Vhc2VJbk91dCcgfX1cbiAgICAgICAgdmFyaWFudHM9e3ZhcmlhbnRzfVxuICAgICAgPlxuICAgICAgICB7KGV4cGFuZGVkIHx8IGRlbGF5RXhwYW5kZWQpICYmIGNoaWxkcmVufVxuICAgICAgPC9TdHlsZWRBY2NvcmRpb25Cb2R5PlxuICAgIDwvZGl2PlxuICApO1xufTtcblxuY29uc3QgU3R5bGVkQWNjb3JkaW9uQm9keSA9IHN0eWxlZChtb3Rpb24uZGl2KWBcbiAgb3ZlcmZsb3c6IGhpZGRlbjtcbmA7XG4iXX0= */",
+  styles: "overflow:hidden/*# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJzb3VyY2VzIjpbIi4uLy4uL3NyYy9BY2NvcmRpb25BcmVhRGVwcmVjYXRlZC9pbmRleC50c3giXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBa0U4QyIsImZpbGUiOiIuLi8uLi9zcmMvQWNjb3JkaW9uQXJlYURlcHJlY2F0ZWQvaW5kZXgudHN4Iiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHN0eWxlZCBmcm9tICdAZW1vdGlvbi9zdHlsZWQnO1xuaW1wb3J0IHsgbW90aW9uIH0gZnJvbSAnZnJhbWVyLW1vdGlvbic7XG5pbXBvcnQgeyB1c2VTdGF0ZSB9IGZyb20gJ3JlYWN0JztcbmltcG9ydCAqIGFzIFJlYWN0IGZyb20gJ3JlYWN0JztcbmltcG9ydCB7IHVzZUlzb21vcnBoaWNMYXlvdXRFZmZlY3QgfSBmcm9tICdyZWFjdC11c2UnO1xuXG5leHBvcnQgdHlwZSBBY2NvcmRpb25BcmVhRGVwcmVjYXRlZFByb3BzID0ge1xuICBjaGlsZHJlbjogUmVhY3QuUmVhY3ROb2RlO1xuXG4gIGNsYXNzTmFtZT86IHN0cmluZztcblxuICAvKipcbiAgICogV2hldGhlciB0aGUgYWNjb3JkaW9uIGlzIHZpc3VhbGx5IGV4cGFuZGVkIHRvIHNob3cgaXRzIGNvbnRlbnRzLlxuICAgKi9cbiAgZXhwYW5kZWQ/OiBib29sZWFuO1xuXG4gIC8qKlxuICAgKiBDb250ZW50cyBvZiB0aGUgY2xpY2thYmxlIGhlYWRlciBidXR0b24uXG4gICAqL1xuICB0b3A6IFJlYWN0LlJlYWN0Tm9kZTtcbn07XG5cbmNvbnN0IHRyYW5zaXRpb25EdXJhdGlvbiA9IDAuMjtcblxuY29uc3QgdmFyaWFudHMgPSB7XG4gIGV4cGFuZGVkOiB7IGhlaWdodDogJ2F1dG8nIH0sXG4gIGZvbGRlZDogeyBoZWlnaHQ6ICcwJyB9LFxufTtcblxuLyoqXG4gKiBAZGVwcmVjYXRlZFxuICogVGhpcyBjb21wb25lbnQgaXMgaW4gdGhlIG9sZCB2aXN1YWwgaWRlbnRpdHkgYW5kIHdpbGwgYmUgdXBkYXRlZCBzb29uLlxuICogQHNlZSBgRGlzY2xvc3VyZWAgYW5kIGBMaXN0YCBmcm9tIGBAY29kZWNhZGVteS9nYW11dGBcbiAqXG4gKiBDaGVjayB0aGUgW0dhbXV0IEJvYXJkXShodHRwczovL3d3dy5ub3Rpb24uc28vY29kZWNhZGVteS9HYW11dC1TdGF0dXMtVGltZWxpbmUtZGQzYzEzNWQzODQ4NDY0ZWE2ZWIxYjQ4ZTY4ZmJiMWQpIGZvciBjb21wb25lbnQgc3RhdHVzXG4gKi9cblxuZXhwb3J0IGNvbnN0IEFjY29yZGlvbkFyZWFEZXByZWNhdGVkOiBSZWFjdC5GQzxcbiAgQWNjb3JkaW9uQXJlYURlcHJlY2F0ZWRQcm9wc1xuPiA9ICh7IGNoaWxkcmVuLCBjbGFzc05hbWUsIGV4cGFuZGVkLCB0b3AgfSkgPT4ge1xuICBjb25zdCBbZGVsYXlFeHBhbmRlZCwgc2V0RGVsYXlFeHBhbmRlZF0gPSB1c2VTdGF0ZShleHBhbmRlZCk7XG5cbiAgdXNlSXNvbW9ycGhpY0xheW91dEVmZmVjdCgoKSA9PiB7XG4gICAgY29uc3QgaGFuZGxlID0gc2V0VGltZW91dChcbiAgICAgICgpID0+IHNldERlbGF5RXhwYW5kZWQoZXhwYW5kZWQpLFxuICAgICAgdHJhbnNpdGlvbkR1cmF0aW9uICogMTAwMFxuICAgICk7XG5cbiAgICByZXR1cm4gKCkgPT4gY2xlYXJUaW1lb3V0KGhhbmRsZSk7XG4gIH0sIFtleHBhbmRlZF0pO1xuXG4gIHJldHVybiAoXG4gICAgPGRpdiBjbGFzc05hbWU9e2NsYXNzTmFtZX0+XG4gICAgICB7dG9wfVxuICAgICAgPFN0eWxlZEFjY29yZGlvbkJvZHlcbiAgICAgICAgYW5pbWF0ZT17ZXhwYW5kZWQgPyAnZXhwYW5kZWQnIDogJ2ZvbGRlZCd9XG4gICAgICAgIGluaXRpYWw9e2V4cGFuZGVkID8gJ2V4cGFuZGVkJyA6ICdmb2xkZWQnfVxuICAgICAgICB0cmFuc2l0aW9uPXt7IGR1cmF0aW9uOiAwLjIsIGVhc2U6ICdlYXNlSW5PdXQnIH19XG4gICAgICAgIHZhcmlhbnRzPXt2YXJpYW50c31cbiAgICAgID5cbiAgICAgICAgeyhleHBhbmRlZCB8fCBkZWxheUV4cGFuZGVkKSAmJiBjaGlsZHJlbn1cbiAgICAgIDwvU3R5bGVkQWNjb3JkaW9uQm9keT5cbiAgICA8L2Rpdj5cbiAgKTtcbn07XG5cbmNvbnN0IFN0eWxlZEFjY29yZGlvbkJvZHkgPSBzdHlsZWQobW90aW9uLmRpdilgXG4gIG92ZXJmbG93OiBoaWRkZW47XG5gO1xuIl19 */",
   toString: _EMOTION_STRINGIFIED_CSS_ERROR__
 });

package/dist/AccordionButtonDeprecated/index.d.ts

@@ -19,6 +19,7 @@ export type AccordionButtonDeprecatedProps = ButtonDeprecatedBaseProps & {
 /**
  * @deprecated
  * This component is in the old visual identity and will be updated soon.
+ * @see `Disclosure` and `List` from `@codecademy/gamut`
  *
  * Check the [Gamut Board](https://www.notion.so/codecademy/Gamut-Status-Timeline-dd3c135d3848464ea6eb1b48e68fbb1d) for component status
  */

package/dist/AccordionButtonDeprecated/index.js

@@ -30,6 +30,7 @@ const buttonThemes = {
 /**
  * @deprecated
  * This component is in the old visual identity and will be updated soon.
+ * @see `Disclosure` and `List` from `@codecademy/gamut`
  *
  * Check the [Gamut Board](https://www.notion.so/codecademy/Gamut-Status-Timeline-dd3c135d3848464ea6eb1b48e68fbb1d) for component status
  */

package/dist/AccordionDeprecated/index.d.ts

@@ -34,6 +34,8 @@ export type AccordionDeprecatedProps = {
  * @deprecated
  * This component is in the old visual identity and will be updated soon.
  *
+ * @see `Disclosure` and `List` from `@codecademy/gamut`
+ *
  * Check the [Gamut Board](https://www.notion.so/codecademy/Gamut-Status-Timeline-dd3c135d3848464ea6eb1b48e68fbb1d) for component status
  */
 export declare const AccordionDeprecated: React.FC<AccordionDeprecatedProps>;

package/dist/AccordionDeprecated/index.js

@@ -7,6 +7,8 @@ import { jsx as _jsx } from "react/jsx-runtime";
  * @deprecated
  * This component is in the old visual identity and will be updated soon.
  *
+ * @see `Disclosure` and `List` from `@codecademy/gamut`
+ *
  * Check the [Gamut Board](https://www.notion.so/codecademy/Gamut-Status-Timeline-dd3c135d3848464ea6eb1b48e68fbb1d) for component status
  */
 

package/dist/CoachingSessionCard/index.js

@@ -1,65 +1,88 @@
-import { Card, FillButton, FlexBox, StrokeButton, Text, TextButton } from '@codecademy/gamut';
+import { Box, Card, FillButton, FlexBox, StrokeButton, Text, TextButton } from '@codecademy/gamut';
 import { CalendarIcon, ClockIcon } from '@codecademy/gamut-icons';
 import { formatInTimeZone } from 'date-fns-tz';
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 const formatTime = (timeString, format) => {
   return formatInTimeZone(new Date(timeString), Intl.DateTimeFormat().resolvedOptions().timeZone, format);
 };
+const formatDaysLeft = timeString => {
+  const start = new Date(timeString).getTime();
+  if (Number.isNaN(start)) return '';
+  const now = Date.now();
+  const dayInMs = 24 * 60 * 60 * 1000;
+  const daysLeft = Math.max(0, Math.ceil((start - now) / dayInMs));
+  if (daysLeft === 0) {
+    return 'today';
+  }
+  return `in ${daysLeft} day${daysLeft === 1 ? '' : 's'}`;
+};
 export const CoachingSessionCard = ({
   session,
   ctas
 }) => /*#__PURE__*/_jsx(Card, {
   borderRadius: "xl",
   p: 32,
-  height: "auto",
+  border: 1,
+  borderColor: "border-primary",
   children: /*#__PURE__*/_jsxs(FlexBox, {
     column: true,
-    children: [/*#__PURE__*/_jsxs(Text, {
-      mb: 12,
-      children: [/*#__PURE__*/_jsx(Text, {
-        fontWeight: "bold",
-        children: session.coachOfferingCategoryName
-      }), ' ', "coaching session with", ' ', /*#__PURE__*/_jsx(Text, {
-        fontWeight: "bold",
-        children: session.participantName
-      })]
-    }), /*#__PURE__*/_jsxs(FlexBox, {
-      alignItems: "center",
-      gap: 16,
-      mb: 24,
-      children: [/*#__PURE__*/_jsxs(FlexBox, {
-        alignItems: "center",
-        gap: 8,
-        children: [/*#__PURE__*/_jsx(CalendarIcon, {
-          size: 16
-        }), /*#__PURE__*/_jsx(Text, {
-          variant: "p-small",
-          color: "text-secondary",
-          children: new Date(session.startTime).toLocaleDateString(undefined, {
-            weekday: 'long',
-            month: 'long',
-            day: 'numeric',
-            year: 'numeric'
-          })
+    justifyContent: "space-between",
+    height: "100%",
+    children: [/*#__PURE__*/_jsxs(Box, {
+      children: [/*#__PURE__*/_jsxs(Text, {
+        mb: 4,
+        children: [/*#__PURE__*/_jsx(Text, {
+          fontWeight: "bold",
+          children: session.coachOfferingCategoryName
+        }), ' ', "coaching session with", ' ', /*#__PURE__*/_jsx(Text, {
+          fontWeight: "bold",
+          children: session.participantName
+        }), /*#__PURE__*/_jsxs(Text, {
+          fontWeight: "bold",
+          children: [" ", formatDaysLeft(session.startTime)]
         })]
       }), /*#__PURE__*/_jsxs(FlexBox, {
-        alignItems: "center",
-        gap: 8,
-        children: [/*#__PURE__*/_jsx(ClockIcon, {
-          size: 16
-        }), /*#__PURE__*/_jsx(Text, {
+        column: true,
+        alignItems: "flex-start",
+        gap: 4,
+        mb: 4,
+        children: [/*#__PURE__*/_jsxs(FlexBox, {
+          alignItems: "center",
+          gap: 4,
+          py: 8,
+          children: [/*#__PURE__*/_jsx(CalendarIcon, {
+            size: 16
+          }), /*#__PURE__*/_jsx(Text, {
+            variant: "p-small",
+            color: "text-secondary",
+            children: new Date(session.startTime).toLocaleDateString(undefined, {
+              weekday: 'long',
+              month: 'long',
+              day: 'numeric',
+              year: 'numeric'
+            })
+          })]
+        }), /*#__PURE__*/_jsxs(FlexBox, {
+          alignItems: "center",
+          gap: 4,
+          py: 8,
+          children: [/*#__PURE__*/_jsx(ClockIcon, {
+            size: 16
+          }), /*#__PURE__*/_jsx(Text, {
+            variant: "p-small",
+            color: "text-secondary",
+            children: `${formatTime(session.startTime, 'h:mm aa')} - ${formatTime(session.endTime, 'h:mm aa z')}`
+          })]
+        }), session.status && /*#__PURE__*/_jsxs(Text, {
           variant: "p-small",
-          color: "text-secondary",
-          children: `${formatTime(session.startTime, 'h:mm aa')} - ${formatTime(session.endTime, 'h:mm aa z')}`
+          fontWeight: "bold",
+          children: ["Status: ", session.status]
         })]
-      }), session.status && /*#__PURE__*/_jsxs(Text, {
-        variant: "p-small",
-        fontWeight: "bold",
-        children: ["Status: ", session.status]
       })]
     }), /*#__PURE__*/_jsx(FlexBox, {
       alignItems: "center",
       gap: 8,
+      flexWrap: "wrap",
       children: ctas?.map(cta => {
         const Button = cta.buttonType === 'fill' ? FillButton : cta.buttonType === 'stroke' ? StrokeButton : TextButton;
         return /*#__PURE__*/_jsx(Button, {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@codecademy/brand",
-  "version": "5.10.0-alpha.cfbadc666.0",
+  "version": "5.11.0-alpha.93b754c9d.0",
   "description": "Brand component library for Codecademy",
   "license": "MIT",
   "repository": "git@github.com:codecademy-engineering/mono.git",

package/dist/stories/Molecules/AccordionDeprecated.stories.js

@@ -1,19 +0,0 @@
-import { AccordionDeprecated } from '../../index';
-const meta = {
-  component: AccordionDeprecated
-};
-export default meta;
-export const Default = {
-  args: {
-    top: 'Click to expand',
-    children: 'Accordion panel content.'
-  },
-  name: 'AccordionDeprecated'
-};
-export const InitiallyExpanded = {
-  args: {
-    top: 'Expanded by default',
-    children: 'This panel starts open.',
-    initiallyExpanded: true
-  }
-};