@kaizen/components 1.68.2 → 1.68.3

package/src/Heading/_docs/Heading.stickersheet.stories.tsx

@@ -19,124 +19,114 @@ const StickerSheetTemplate: StickerSheetStory = {
     const fontColour = isReversed ? "white" : "dark"
     return (
       <>
-        <StickerSheet heading="Heading" isReversed={isReversed}>
-          <StickerSheet.Body>
-            <StickerSheet.Row rowTitle="Display 0">
-              <Heading variant="display-0" color={fontColour}>
-                Let&apos;s create a better world of work
+        <StickerSheet title="Heading" isReversed={isReversed}>
+          <StickerSheet.Row header="Display 0">
+            <Heading variant="display-0" color={fontColour}>
+              Let&apos;s create a better world of work
+            </Heading>
+          </StickerSheet.Row>
+          <StickerSheet.Row header="Composable header title">
+            <Heading variant="composable-header-title" color={fontColour}>
+              Use me in the composable header!
+            </Heading>
+          </StickerSheet.Row>
+          <StickerSheet.Row header="Heading 1">
+            <div>
+              <Heading variant="heading-1" color={fontColour}>
+                Have the courage to be vulnerable.
               </Heading>
-            </StickerSheet.Row>
-            <StickerSheet.Row rowTitle="Composable header title">
-              <Heading variant="composable-header-title" color={fontColour}>
-                Use me in the composable header!
+              <Heading variant="heading-1" color={fontColour}>
+                Be authentic, ask for help, be willing to fail, create open
+                environments.
               </Heading>
-            </StickerSheet.Row>
-            <StickerSheet.Row rowTitle="Heading 1">
-              <div>
-                <Heading variant="heading-1" color={fontColour}>
-                  Have the courage to be vulnerable.
-                </Heading>
-                <Heading variant="heading-1" color={fontColour}>
-                  Be authentic, ask for help, be willing to fail, create open
-                  environments.
-                </Heading>
-              </div>
-            </StickerSheet.Row>
-            <StickerSheet.Row rowTitle="Heading 2">
-              <div>
-                <Heading variant="heading-2" color={fontColour}>
-                  Learn faster through feedback.
-                </Heading>
-                <Heading variant="heading-2" color={fontColour}>
-                  Seek feedback, give feedback responsibly, respond
-                  constructively, learn continuously.
-                </Heading>
-              </div>
-            </StickerSheet.Row>
-            <StickerSheet.Row rowTitle="Heading 3">
-              <div>
-                <Heading variant="heading-3" color={fontColour}>
-                  Trust people to make decisions.
-                </Heading>
-                <Heading variant="heading-3" color={fontColour}>
-                  Provide constructive feedback, support decisions, be
-                  accountable, delegate decisions.
-                </Heading>
-              </div>
-            </StickerSheet.Row>
-            <StickerSheet.Row rowTitle="Heading 4">
-              <div>
-                <Heading variant="heading-4" color={fontColour}>
-                  Amplify others.
-                </Heading>
-                <Heading variant="heading-4" color={fontColour}>
-                  Recognise others, succeed together, grow others, create
-                  opportunities.
-                </Heading>
-              </div>
-            </StickerSheet.Row>
-            <StickerSheet.Row rowTitle="Heading 5">
-              <div>
-                <Heading variant="heading-5" color={fontColour}>
-                  An employee experience that people love.
-                </Heading>
-                <Heading variant="heading-5" color={fontColour}>
-                  Get the employee engagement, performance and development tools
-                  and insights you need to build a category-defining culture.
-                </Heading>
-              </div>
-            </StickerSheet.Row>
-            <StickerSheet.Row rowTitle="Heading 6">
-              <Heading variant="heading-6" color={fontColour}>
-                Discover the power of humanity at work.
+            </div>
+          </StickerSheet.Row>
+          <StickerSheet.Row header="Heading 2">
+            <div>
+              <Heading variant="heading-2" color={fontColour}>
+                Learn faster through feedback.
               </Heading>
-            </StickerSheet.Row>
-          </StickerSheet.Body>
+              <Heading variant="heading-2" color={fontColour}>
+                Seek feedback, give feedback responsibly, respond
+                constructively, learn continuously.
+              </Heading>
+            </div>
+          </StickerSheet.Row>
+          <StickerSheet.Row header="Heading 3">
+            <div>
+              <Heading variant="heading-3" color={fontColour}>
+                Trust people to make decisions.
+              </Heading>
+              <Heading variant="heading-3" color={fontColour}>
+                Provide constructive feedback, support decisions, be
+                accountable, delegate decisions.
+              </Heading>
+            </div>
+          </StickerSheet.Row>
+          <StickerSheet.Row header="Heading 4">
+            <div>
+              <Heading variant="heading-4" color={fontColour}>
+                Amplify others.
+              </Heading>
+              <Heading variant="heading-4" color={fontColour}>
+                Recognise others, succeed together, grow others, create
+                opportunities.
+              </Heading>
+            </div>
+          </StickerSheet.Row>
+          <StickerSheet.Row header="Heading 5">
+            <div>
+              <Heading variant="heading-5" color={fontColour}>
+                An employee experience that people love.
+              </Heading>
+              <Heading variant="heading-5" color={fontColour}>
+                Get the employee engagement, performance and development tools
+                and insights you need to build a category-defining culture.
+              </Heading>
+            </div>
+          </StickerSheet.Row>
+          <StickerSheet.Row header="Heading 6">
+            <Heading variant="heading-6" color={fontColour}>
+              Discover the power of humanity at work.
+            </Heading>
+          </StickerSheet.Row>
         </StickerSheet>
+
         {!isReversed ? (
-          <StickerSheet isReversed={isReversed}>
-            <StickerSheet.Header
-              hasVerticalHeadings
-              headings={[
-                "Dark",
-                "Dark Reduced Opacity",
-                "Positive",
-                "Negative",
-              ]}
-            />
-            <StickerSheet.Body>
-              <StickerSheet.Row rowTitle="Colours">
-                <Heading variant="heading-6" color="dark">
-                  Discover the power of humanity at work.
-                </Heading>
-                <Heading variant="heading-6" color="dark-reduced-opacity">
-                  Discover the power of humanity at work.
-                </Heading>
-                <Heading variant="heading-6" color="positive">
-                  Discover the power of humanity at work.
-                </Heading>
-                <Heading variant="heading-6" color="negative">
-                  Discover the power of humanity at work.
-                </Heading>
-              </StickerSheet.Row>
-            </StickerSheet.Body>
+          <StickerSheet
+            isReversed={isReversed}
+            title="Colours"
+            headers={["Dark", "Dark Reduced Opacity", "Positive", "Negative"]}
+          >
+            <StickerSheet.Row>
+              <Heading variant="heading-6" color="dark">
+                Discover the power of humanity at work.
+              </Heading>
+              <Heading variant="heading-6" color="dark-reduced-opacity">
+                Discover the power of humanity at work.
+              </Heading>
+              <Heading variant="heading-6" color="positive">
+                Discover the power of humanity at work.
+              </Heading>
+              <Heading variant="heading-6" color="negative">
+                Discover the power of humanity at work.
+              </Heading>
+            </StickerSheet.Row>
           </StickerSheet>
         ) : (
-          <StickerSheet isReversed={isReversed}>
-            <StickerSheet.Header
-              hasVerticalHeadings
-              headings={["White", "White Reduced Opacity"]}
-            />
-            <StickerSheet.Body>
-              <StickerSheet.Row rowTitle="Colours">
-                <Heading variant="heading-6" color="white">
-                  Discover the power of humanity at work.
-                </Heading>
-                <Heading variant="heading-6" color="white-reduced-opacity">
-                  Discover the power of humanity at work.
-                </Heading>
-              </StickerSheet.Row>
-            </StickerSheet.Body>
+          <StickerSheet
+            isReversed={isReversed}
+            title="Colours"
+            headers={["White", "White Reduced Opacity"]}
+          >
+            <StickerSheet.Row>
+              <Heading variant="heading-6" color="white">
+                Discover the power of humanity at work.
+              </Heading>
+              <Heading variant="heading-6" color="white-reduced-opacity">
+                Discover the power of humanity at work.
+              </Heading>
+            </StickerSheet.Row>
           </StickerSheet>
         )}
       </>

package/src/Icon/_docs/Icon.stickersheet.stories.tsx

@@ -16,26 +16,20 @@ export default {
 
 const StickerSheetTemplate: StickerSheetStory = {
   render: () => (
-    <StickerSheet heading="Icons">
-      <StickerSheet.Header
-        headings={["Default", "Color"]}
-        hasVerticalHeadings
-      />
-      <StickerSheet.Body>
-        {Object.keys(ICONS).map(iconName => {
-          const icon = ICONS[iconName as keyof typeof ICONS]({
-            role: "presentation",
-          })
-          return (
-            <StickerSheet.Row key={iconName} rowTitle={iconName}>
+    <StickerSheet title="Icons" headers={["Default", "Color"]}>
+      {Object.keys(ICONS).map(iconName => {
+        const icon = ICONS[iconName as keyof typeof ICONS]({
+          role: "presentation",
+        })
+        return (
+          <StickerSheet.Row key={iconName} header={iconName}>
+            {icon}
+            <StickerSheet.Cell className="text-green-400">
               {icon}
-              <StickerSheet.Cell className="text-green-400">
-                {icon}
-              </StickerSheet.Cell>
-            </StickerSheet.Row>
-          )
-        })}
-      </StickerSheet.Body>
+            </StickerSheet.Cell>
+          </StickerSheet.Row>
+        )
+      })}
     </StickerSheet>
   ),
 }

package/src/Illustration/Scene/BrandMomentCaptureIntro/_docs/BrandMomentCaptureIntro.stickersheet.stories.tsx

@@ -16,14 +16,14 @@ export default {
 
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
-    <StickerSheet isReversed={isReversed}>
-      <StickerSheet.Header headings={["Default", "Autoplay (hover)"]} />
-      <StickerSheet.Body>
-        <StickerSheet.Row>
-          <BrandMomentCaptureIntro />
-          <BrandMomentCaptureIntro isAnimated autoplay={false} />
-        </StickerSheet.Row>
-      </StickerSheet.Body>
+    <StickerSheet
+      isReversed={isReversed}
+      headers={["Default", "Autoplay (hover)"]}
+    >
+      <StickerSheet.Row>
+        <BrandMomentCaptureIntro />
+        <BrandMomentCaptureIntro isAnimated autoplay={false} />
+      </StickerSheet.Row>
     </StickerSheet>
   ),
   parameters: {

package/src/Illustration/Scene/_docs/Scene.stickersheet.stories.tsx

@@ -63,191 +63,145 @@ export default {
 
 const StickerSheetTemplate: StickerSheetStory = {
   render: ({ isReversed }) => (
-    <StickerSheet isReversed={isReversed}>
-      <StickerSheet.Body>
-        <StickerSheet.Row>
-          EmptyStatesAction
-          <StickerSheet.Cell width={400}>
-            <EmptyStatesAction />
-          </StickerSheet.Cell>
-        </StickerSheet.Row>
-        <StickerSheet.Row>
-          EmptyStatesInformative
-          <EmptyStatesInformative />
-        </StickerSheet.Row>
-        <StickerSheet.Row>
-          EmptyStatesNegative
-          <EmptyStatesNegative />
-        </StickerSheet.Row>
-        <StickerSheet.Row>
-          EmptyStatesNeutral
-          <EmptyStatesNeutral />
-        </StickerSheet.Row>
-        <StickerSheet.Row>
-          EmptyStatesPositive
-          <EmptyStatesPositive />
-        </StickerSheet.Row>
-        <StickerSheet.Row>
-          Information360Upgrade
-          <Information360Upgrade />
-        </StickerSheet.Row>
-        <StickerSheet.Row>
-          InformationDemographicFocus
-          <InformationDemographicFocus />
-        </StickerSheet.Row>
-        <StickerSheet.Row>
-          InformationEmergingTrends
-          <InformationEmergingTrends />
-        </StickerSheet.Row>
-        <StickerSheet.Row>
-          InformationEmployeeLifecycle
-          <InformationEmployeeLifecycle />
-        </StickerSheet.Row>
-        <StickerSheet.Row>
-          InformationReportOwner
-          <InformationReportOwner />
-        </StickerSheet.Row>
-        <StickerSheet.Row>
-          InformationReportOwnerByRule
-          <InformationReportOwnerByRule />
-        </StickerSheet.Row>
-        <StickerSheet.Row>
-          InformationTurnoverCalculator
-          <InformationTurnoverCalculator />
-        </StickerSheet.Row>
-        <StickerSheet.Row>
-          InformationTurnoverForecast
-          <InformationTurnoverForecast />
-        </StickerSheet.Row>
-        <StickerSheet.Row>
-          Collaboration
-          <Collaboration />
-        </StickerSheet.Row>
-        <StickerSheet.Row>
-          Communication
-          <Communication />
-        </StickerSheet.Row>
-        <StickerSheet.Row>
-          CompanyValues
-          <CompanyValues />
-        </StickerSheet.Row>
-        <StickerSheet.Row>
-          ConnectTheDots
-          <ConnectTheDots />
-        </StickerSheet.Row>
-        <StickerSheet.Row>
-          CultureLab
-          <CultureLab />
-        </StickerSheet.Row>
-        <StickerSheet.Row>
-          TermsAgreement
-          <TermsAgreement />
-        </StickerSheet.Row>
-        <StickerSheet.Row>
-          Programs
-          <Programs />
-        </StickerSheet.Row>
-        <StickerSheet.Row>
-          PerformanceCompanySettings
-          <PerformanceCompanySettings />
-        </StickerSheet.Row>
-        <StickerSheet.Row>
-          EngagementSurveySummaryFemale
-          <EngagementSurveySummaryFemale />
-        </StickerSheet.Row>
-        <StickerSheet.Row>
-          EngagementSurveySummaryMale
-          <EngagementSurveySummaryMale />
-        </StickerSheet.Row>
-        <StickerSheet.Row>
-          BrandMomentNewAccountOnboarding
-          <BrandMomentNewAccountOnboarding />
-        </StickerSheet.Row>
-        <StickerSheet.Row>
-          BrandMomentUploadEmployeeData
-          <BrandMomentUploadEmployeeData />
-        </StickerSheet.Row>
-        <StickerSheet.Row>
-          BrandMomentPositiveOutro
-          <BrandMomentPositiveOutro />
-        </StickerSheet.Row>
-        <StickerSheet.Row>
-          BrandMomentLogin
-          <BrandMomentLogin />
-        </StickerSheet.Row>
-        <StickerSheet.Row>
-          BrandMomentError
-          <BrandMomentError />
-        </StickerSheet.Row>
-        <StickerSheet.Row>
-          BrandMomentStarterKit
-          <BrandMomentStarterKit />
-        </StickerSheet.Row>
-        <StickerSheet.Row>
-          SkillsCoach1On1Meetings
-          <SkillsCoach1On1Meetings />
-        </StickerSheet.Row>
-        <StickerSheet.Row>
-          SkillsCoachCoaching
-          <SkillsCoachCoaching />
-        </StickerSheet.Row>
-        <StickerSheet.Row>
-          SkillsCoachEmployeeDevelopment
-          <SkillsCoachEmployeeDevelopment />
-        </StickerSheet.Row>
-        <StickerSheet.Row>
-          SkillsCoachEssentialFeedback
-          <SkillsCoachEssentialFeedback />
-        </StickerSheet.Row>
-        <StickerSheet.Row>
-          SkillsCoachEssentialProductivity
-          <SkillsCoachEssentialProductivity />
-        </StickerSheet.Row>
-        <StickerSheet.Row>
-          SkillsCoachEssentialResilience
-          <SkillsCoachEssentialResilience />
-        </StickerSheet.Row>
-        <StickerSheet.Row>
-          SkillsCoachInfluentialCommunication
-          <SkillsCoachInfluentialCommunication />
-        </StickerSheet.Row>
-        <StickerSheet.Row>
-          SkillsCoachLeadingChange
-          <SkillsCoachLeadingChange />
-        </StickerSheet.Row>
-        <StickerSheet.Row>
-          SkillsCoachFeedback
-          <SkillsCoachFeedback />
-        </StickerSheet.Row>
-        <StickerSheet.Row>
-          SkillsCoachManagerHub
-          <SkillsCoachManagerHub />
-        </StickerSheet.Row>
-        <StickerSheet.Row>
-          SkillsCoachProductivity
-          <SkillsCoachProductivity />
-        </StickerSheet.Row>
-        <StickerSheet.Row>
-          SkillsCoachRemoteManager
-          <SkillsCoachRemoteManager />
-        </StickerSheet.Row>
-        <StickerSheet.Row>
-          SkillsCoachResilience
-          <SkillsCoachResilience />
-        </StickerSheet.Row>
-        <StickerSheet.Row>
-          SkillsCoachStrategy
-          <SkillsCoachStrategy />
-        </StickerSheet.Row>
-        <StickerSheet.Row>
-          SurveyGetStarted
-          <SurveyGetStarted />
-        </StickerSheet.Row>
-        <StickerSheet.Row>
-          SurveyOverviewClosed
-          <SurveyOverviewClosed />
-        </StickerSheet.Row>
-      </StickerSheet.Body>
+    <StickerSheet
+      isReversed={isReversed}
+      style={{ gridTemplateColumns: "fit-content(100%) 400px" }}
+    >
+      <StickerSheet.Row header="EmptyStatesAction">
+        <EmptyStatesAction />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="EmptyStatesInformative">
+        <EmptyStatesInformative />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="EmptyStatesNegative">
+        <EmptyStatesNegative />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="EmptyStatesNeutral">
+        <EmptyStatesNeutral />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="EmptyStatesPositive">
+        <EmptyStatesPositive />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Information360Upgrade">
+        <Information360Upgrade />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="InformationDemographicFocus">
+        <InformationDemographicFocus />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="InformationEmergingTrends">
+        <InformationEmergingTrends />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="InformationEmployeeLifecycle">
+        <InformationEmployeeLifecycle />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="InformationReportOwner">
+        <InformationReportOwner />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="InformationReportOwnerByRule">
+        <InformationReportOwnerByRule />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="InformationTurnoverCalculator">
+        <InformationTurnoverCalculator />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="InformationTurnoverForecast">
+        <InformationTurnoverForecast />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Collaboration">
+        <Collaboration />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Communication">
+        <Communication />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="CompanyValues">
+        <CompanyValues />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="ConnectTheDots">
+        <ConnectTheDots />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="CultureLab">
+        <CultureLab />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="TermsAgreement">
+        <TermsAgreement />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="Programs">
+        <Programs />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="PerformanceCompanySettings">
+        <PerformanceCompanySettings />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="EngagementSurveySummaryFemale">
+        <EngagementSurveySummaryFemale />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="EngagementSurveySummaryMale">
+        <EngagementSurveySummaryMale />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="BrandMomentNewAccountOnboarding">
+        <BrandMomentNewAccountOnboarding />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="BrandMomentUploadEmployeeData">
+        <BrandMomentUploadEmployeeData />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="BrandMomentPositiveOutro">
+        <BrandMomentPositiveOutro />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="BrandMomentLogin">
+        <BrandMomentLogin />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="BrandMomentError">
+        <BrandMomentError />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="BrandMomentStarterKit">
+        <BrandMomentStarterKit />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="SkillsCoach1On1Meetings">
+        <SkillsCoach1On1Meetings />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="SkillsCoachCoaching">
+        <SkillsCoachCoaching />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="SkillsCoachEmployeeDevelopment">
+        <SkillsCoachEmployeeDevelopment />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="SkillsCoachEssentialFeedback">
+        <SkillsCoachEssentialFeedback />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="SkillsCoachEssentialProductivity">
+        <SkillsCoachEssentialProductivity />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="SkillsCoachEssentialResilience">
+        <SkillsCoachEssentialResilience />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="SkillsCoachInfluentialCommunication">
+        <SkillsCoachInfluentialCommunication />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="SkillsCoachLeadingChange">
+        <SkillsCoachLeadingChange />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="SkillsCoachFeedback">
+        <SkillsCoachFeedback />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="SkillsCoachManagerHub">
+        <SkillsCoachManagerHub />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="SkillsCoachProductivity">
+        <SkillsCoachProductivity />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="SkillsCoachRemoteManager">
+        <SkillsCoachRemoteManager />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="SkillsCoachResilience">
+        <SkillsCoachResilience />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="SkillsCoachStrategy">
+        <SkillsCoachStrategy />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="SurveyGetStarted">
+        <SurveyGetStarted />
+      </StickerSheet.Row>
+      <StickerSheet.Row header="SurveyOverviewClosed">
+        <SurveyOverviewClosed />
+      </StickerSheet.Row>
     </StickerSheet>
   ),
 }