FEAT: added initial support and styling for a zigzag cards layout and ID badge moment type

package.json

@@ -1,6 +1,6 @@
 {
   "name": "react-stories-api",
-  "version": "1.0.0-dev-49",
+  "version": "1.0.0-dev-51",
   "author": "Kenneth Seals-Nutt",
   "babel": {
     "presets": [

src/components/Moments/AwardMoment/AwardMoment.stories.tsx → src/components/Moments/AwardsMoment/AwardsMoment.stories.tsx

@@ -1,10 +1,10 @@
 import { momentStoryBookDecorator } from '../../../stories/decorators';
-import AwardMoment from './AwardMoment';
+import AwardsMoment from './AwardsMoment';
 
 const momentData = {
   index: 0,
-  type: 'award',
-  title: 'Award Moment Example',
+  type: 'awards',
+  title: 'Awards Moment Example',
   subtitle: 'Celebrating Achievements',
   icon: { name: 'trophy', type: 'mui' },
   color: { type: 'hex', background: '#7dbbb1', text: '#ffffff' },
@@ -13,7 +13,6 @@ const momentData = {
   data: {
     awards: [
       {
-        label: 'Best Innovator 2023',
         color: { dark: '#004d40', light: '#26a69a' },
         icon: { name: 'FaLightbulb', source: 'FontAwesome' },
         description: 'Awarded for outstanding innovation in product design.',
@@ -22,12 +21,12 @@ const momentData = {
           title: 'Innovation Council',
           description: 'Leading organization promoting innovation worldwide.',
         },
-        name: 'Luca Giovanni',
+        recipient: 'Luca Giovanni',
         subtitle: 'Innovation in Tech',
+        title: 'Best Innovator 2023',
         year: '2023',
       },
       {
-        label: 'Community Impact Award',
         color: { dark: '#1b2631', light: '#415a77' },
         icon: { name: 'FaHandsHelping', source: 'FontAwesome' },
         description: 'Recognized for meaningful contributions to community projects.',
@@ -36,12 +35,12 @@ const momentData = {
           title: 'Community Foundation',
           description: 'Supporting local community initiatives.',
         },
-        name: 'Luca Giovanni',
+        recipient: 'Luca Giovanni',
         subtitle: 'Social Good',
+        title: 'Community Impact Award',
         year: '2022',
       },
       {
-        label: 'Excellence in Research',
         color: { dark: '#2c3e50', light: '#5dade2' },
         icon: { name: 'FaMicroscope', source: 'FontAwesome' },
         description: 'Honored for groundbreaking contributions to scientific research.',
@@ -50,12 +49,12 @@ const momentData = {
           title: 'Global Science Association',
           description: 'International body advancing scientific discovery.',
         },
-        name: 'Luca Giovanni',
+        recipient: 'Luca Giovanni',
         subtitle: 'Biological Sciences',
+        title: 'Excellence in Research',
         year: '2021',
       },
       {
-        label: 'Athlete of the Year',
         color: { dark: '#6e2c00', light: '#f39c12' },
         icon: { name: 'FaRunning', source: 'FontAwesome' },
         description: 'Recognized for exceptional performance and dedication in athletics.',
@@ -64,12 +63,12 @@ const momentData = {
           title: 'National Sports League',
           description: 'Governing body for competitive athletics.',
         },
-        name: 'Luca Giovanni',
+        recipient: 'Luca Giovanni',
         subtitle: 'Swimming',
+        title: 'Athlete of the Year',
         year: '2020',
       },
       {
-        label: 'Excellence in the Arts',
         color: { dark: '#4a235a', light: '#af7ac5' },
         icon: { name: 'FaPaintBrush', source: 'FontAwesome' },
         description: 'Awarded for outstanding artistic contributions and creative vision.',
@@ -78,13 +77,13 @@ const momentData = {
           title: 'International Arts Council',
           description: 'Global organization celebrating artistic excellence.',
         },
-        name: 'Luca Giovanni',
+        recipient: 'Luca Giovanni',
+        title: 'Excellence in the Arts',
         subtitle: 'Visual Arts',
         year: '2019',
         website: 'https://example.com/arts-award',
       },
       {
-        label: 'Leadership Award',
         color: { dark: '#154360', light: '#2980b9' },
         icon: { name: 'FaUserTie', source: 'FontAwesome' },
         description: 'Recognized for exceptional leadership and organizational impact.',
@@ -93,17 +92,18 @@ const momentData = {
           title: 'Leadership Institute',
           description: 'Dedicated to developing global leaders.',
         },
-        name: 'Luca Giovanni',
+        recipient: 'Luca Giovanni',
         subtitle: 'Executive Leadership',
+        title: 'Leadership Award',
         year: '2018',
       },
     ],
   },
 };
 
 export default {
-  title: 'Moments/Award Moment',
-  component: AwardMoment,
+  title: 'Moments/Awards Moment',
+  component: AwardsMoment,
   decorators: [momentStoryBookDecorator],
   parameters: {
     deepControls: { enabled: true },
@@ -112,8 +112,8 @@ export default {
   tags: ['autodocs'],
 };
 
-export const DefaultAwardMoment = {
-  name: 'Default Award',
+export const DefaultAwardsMoment = {
+  name: 'Default Awards',
   args: {
     moment: momentData,
   },

src/components/Moments/AwardMoment/AwardMoment.styles.ts → src/components/Moments/AwardsMoment/AwardsMoment.styles.ts

@@ -1,7 +1,6 @@
 const styles = {
   container: {
     backgroundImage: 'url(https://stories-api-public.s3.amazonaws.com/award-moment-background.jpg)',
-
   },
   divider: {
     background: 'rgba(255, 255, 255, 0.45)',

src/components/Moments/AwardMoment/AwardMoment.tsx → src/components/Moments/AwardsMoment/AwardsMoment.tsx

@@ -3,10 +3,10 @@ import { observer } from 'mobx-react-lite';
 import AwardCertificate from '../../UI/AwardCertificate/AwardCertificate';
 import AwardModal from '../../UI/AwardModal/AwardModal';
 import CardsBaseMoment from '../CardsBaseMoment/CardsBaseMoment';
-import styles from './AwardMoment.styles';
-import type { AwardMomentProps } from './AwardMoment.types';
+import styles from './AwardsMoment.styles';
+import type { AwardsMomentProps } from './AwardsMoment.types';
 
-const AwardMoment = observer(({ moment }: AwardMomentProps) => {
+const AwardsMoment = observer(({ moment }: AwardsMomentProps) => {
   const awards = moment.data?.awards ?? [];
 
   return (
@@ -17,7 +17,7 @@ const AwardMoment = observer(({ moment }: AwardMomentProps) => {
       >
         {awards.map((award) => (
           <AwardCertificate
-            key={`award-${award.label}-${award.year ?? 'na'}`}
+            key={`award-${award.title}-${award.year ?? 'na'}`}
             award={award}
             moment={moment}
           />
@@ -30,4 +30,4 @@ const AwardMoment = observer(({ moment }: AwardMomentProps) => {
   );
 });
 
-export default AwardMoment;
+export default AwardsMoment;

src/components/Moments/AwardsMoment/AwardsMoment.types.ts

@@ -0,0 +1,4 @@
+import type AwardsMomentStore from '../../../state/moments/awardsMomentStore';
+import type { BaseMomentPropsWithoutChildren } from '../BaseMoment/BaseMoment.types';
+
+export type AwardsMomentProps = BaseMomentPropsWithoutChildren<AwardsMomentStore>;

src/components/Moments/CardsContentMoment/CardsContentMoment.stories.tsx

@@ -0,0 +1,100 @@
+import { momentStoryBookDecorator } from '../../../stories/decorators';
+import CardsContentMoment from './CardsContentMoment';
+
+const momentData = {
+  index: 0,
+  type: 'stats',
+  title: 'The Thinker',
+  subtitle: 'Sculpture by Auguste Rodin',
+  icon: { name: 'bar_chart', type: 'mui' },
+  color: { type: 'hex', background: '#41aa8d', text: '#fff' },
+  label: 'Stats',
+  reference: {
+    title: 'Wikidata',
+    url: 'https://www.wikidata.org/wiki/Q18003128',
+    description:
+      'Free knowledge database project hosted by Wikimedia and edited by volunteers',
+    logo: 'https://upload.wikimedia.org/wikipedia/commons/6/66/Wikidata-logo-en.svg',
+  },
+  data: {
+    stats: [
+      {
+        color: { background: '#867a1c' },
+        icon: { name: 'fit_width', type: 'mui' },
+        // image:
+        //   'https://upload.wikimedia.org/wikipedia/commons/thumb/5/56/The_Thinker%2C_Rodin.jpg/220px-The_Thinker%2C_Rodin.jpg',
+        label: 'width',
+        type: 'number',
+        url: 'https://www.wikidata.org/wiki/Q18003128',
+        value: { amount: 97, unit: 'cm' },
+      },
+      {
+        color: { background: '#867a1c' },
+        icon: { name: 'height', type: 'mui' },
+        label: 'height',
+        type: 'number',
+        url: 'https://www.wikidata.org/wiki/Q18003128',
+        value: { amount: 183.6, unit: 'cm' },
+      },
+      {
+        color: { background: '#867a1c' },
+        icon: { name: 'inventory', type: 'mui' },
+        label: 'Materials Used',
+        type: 'list',
+        url: 'https://www.wikidata.org/wiki/Q18003128',
+        value: [
+          {
+            label: 'Bronze',
+            description: 'A strong and durable metal commonly used in sculptures',
+            icon: {
+              name: 'deployed_code',
+              type: 'mui',
+            },
+          },
+          {
+            label: 'Wrought Iron',
+            description: 'A type of iron with fibrous texture, ideal for structural elements',
+            icon: {
+              name: 'deployed_code',
+              type: 'mui',
+            },
+          },
+          {
+            label: 'Wood',
+            description: 'Natural material used for the sculpture base or supports',
+            icon: {
+              name: 'deployed_code',
+              type: 'mui',
+            },
+          },
+        ],
+      },
+      {
+        color: { background: '#867a1c' },
+        icon: { name: 'construction', type: 'mui' },
+        label: 'created',
+        type: 'string',
+        url: 'https://www.wikidata.org/wiki/Q18003128',
+        value: '1904',
+      },
+    ],
+  },
+};
+
+export default {
+  title: 'Moments/Stats Moment',
+  component: CardsContentMoment,
+  decorators: [momentStoryBookDecorator],
+  parameters: {
+    deepControls: { enabled: true },
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+};
+
+export const DefaultCardsContentMoment = {
+  name: 'Default Stats',
+  args: {
+    moment: momentData,
+  },
+};