From 55b4b6cc09965bff514b98c9901b55a419f47c99 Mon Sep 17 00:00:00 2001 From: Michael Winter <36558508+mcwinter07@users.noreply.github.com> Date: Thu, 26 Oct 2023 09:37:26 +1100 Subject: [PATCH] Kds 1755/spot illustration migration (#4208) * feat(Spot): add spot illustrations * Update documentation stories to latest patterns * Update Illustration folder architecture * Update stickersheet to display component names not icon names --- .changeset/hungry-lizards-whisper.md | 5 + .../components/src/Illustration/Spot/Spot.tsx | 191 +++++ .../src/Illustration/Spot/_docs/Spot.mdx | 47 ++ .../Spot/_docs/Spot.stickersheet.stories.tsx | 781 ++++++++++++++++++ .../Illustration/Spot/_docs/Spot.stories.tsx | 48 ++ .../components/src/Illustration/Spot/index.ts | 1 + packages/components/src/Illustration/index.ts | 1 + .../subcomponents/Base/Base.module.scss | 125 +++ .../Illustration/subcomponents/Base/Base.tsx | 54 ++ .../Illustration/subcomponents/Base/index.ts | 1 + packages/components/src/index.ts | 1 + 11 files changed, 1255 insertions(+) create mode 100644 .changeset/hungry-lizards-whisper.md create mode 100644 packages/components/src/Illustration/Spot/Spot.tsx create mode 100644 packages/components/src/Illustration/Spot/_docs/Spot.mdx create mode 100644 packages/components/src/Illustration/Spot/_docs/Spot.stickersheet.stories.tsx create mode 100644 packages/components/src/Illustration/Spot/_docs/Spot.stories.tsx create mode 100644 packages/components/src/Illustration/Spot/index.ts create mode 100644 packages/components/src/Illustration/index.ts create mode 100644 packages/components/src/Illustration/subcomponents/Base/Base.module.scss create mode 100644 packages/components/src/Illustration/subcomponents/Base/Base.tsx create mode 100644 packages/components/src/Illustration/subcomponents/Base/index.ts diff --git a/.changeset/hungry-lizards-whisper.md b/.changeset/hungry-lizards-whisper.md new file mode 100644 index 00000000000..76705a88b34 --- /dev/null +++ b/.changeset/hungry-lizards-whisper.md @@ -0,0 +1,5 @@ +--- +"@kaizen/components": minor +--- + +Migrate Spot Illustrations diff --git a/packages/components/src/Illustration/Spot/Spot.tsx b/packages/components/src/Illustration/Spot/Spot.tsx new file mode 100644 index 00000000000..def5dfb2b29 --- /dev/null +++ b/packages/components/src/Illustration/Spot/Spot.tsx @@ -0,0 +1,191 @@ +import React from "react" +import { Base, BaseProps } from "../subcomponents/Base" + +export type SpotProps = Pick & { + enableAspectRatio?: boolean +} + +const SPOT_ILLUSTRATION_BASE_PATH = "illustrations/heart/spot/" +const createSpotIllustration = + (fileName: string) => + // eslint-disable-next-line react/display-name + ({ enableAspectRatio, ...restProps }: SpotProps): JSX.Element => ( + + ) + +/** + * Template Library / Moods + */ +/* prettier-ignore */ export const Cautionary = createSpotIllustration("moods-cautionary.svg") +/* prettier-ignore */ export const Informative = createSpotIllustration("moods-informative.svg") +/* prettier-ignore */ export const Negative = createSpotIllustration("moods-negative.svg") +/* prettier-ignore */ export const Positive = createSpotIllustration("moods-positive.svg") +/* prettier-ignore */ export const Assertive = createSpotIllustration("moods-assertive.svg") + +/** + * Template Library / Engagement + */ +/* prettier-ignore */ export const BenefitsSurvey = createSpotIllustration("template-library-benefits-survey.svg") +/* prettier-ignore */ export const CustomSurvey = createSpotIllustration("template-library-custom-survey.svg") +/* prettier-ignore */ export const CustomUnattributedSurvey = createSpotIllustration("template-library-custom-unattributed-survey.svg") +/* prettier-ignore */ export const EngagementSurvey = createSpotIllustration("template-library-engagement-survey.svg") +/* prettier-ignore */ export const InclusionSurvey = createSpotIllustration("template-library-inclusion-survey.svg") +/* prettier-ignore */ export const QuickEngagementSurvey = createSpotIllustration("template-library-quick-engagement-survey.svg") +/* prettier-ignore */ export const ValuesSurvey1 = createSpotIllustration("template-library-values-survey-1.svg") +/* prettier-ignore */ export const ValuesSurvey2 = createSpotIllustration("template-library-values-survey-2.svg") +/* prettier-ignore */ export const WellbeingSurvey1 = createSpotIllustration("template-library-wellbeing-survey-1.svg") +/* prettier-ignore */ export const WellbeingSurvey2 = createSpotIllustration("template-library-wellbeing-survey-2.svg") +/* prettier-ignore */ export const WellbeingSurvey3 = createSpotIllustration("template-library-wellbeing-survey-3.svg") +/* prettier-ignore */ export const ChangeReadiness = createSpotIllustration("template-library-change-readiness.svg") +/* prettier-ignore */ export const ChangeSuccess = createSpotIllustration("template-library-change-success.svg") +/* prettier-ignore */ export const PerformanceDiagnostics = createSpotIllustration("template-library-performance-diagnostics.svg") +/* prettier-ignore */ export const LeadingThroughCrisis = createSpotIllustration("template-library-leading-through-crisis.svg") +/* prettier-ignore */ export const EmergencyResponse = createSpotIllustration("template-library-emergency-response.svg") + +/** + * Template Library / Experience + */ +/* prettier-ignore */ export const CandidateSurvey = createSpotIllustration("template-library-candidate-survey.svg") +/* prettier-ignore */ export const CustomOnboardSurvey = createSpotIllustration("template-library-custom-onboard-survey.svg") +/* prettier-ignore */ export const ExitSurvey = createSpotIllustration("template-library-exit-survey.svg") +/* prettier-ignore */ export const InternSurvey = createSpotIllustration("template-library-intern-survey.svg") +/* prettier-ignore */ export const PhasedWeek1OnboardSurvey = createSpotIllustration("template-library-phased-week-1-onboard-survey.svg") +/* prettier-ignore */ export const PhasedWeek5OnboardSurvey = createSpotIllustration("template-library-phased-week-5-onboard-survey.svg") +/* prettier-ignore */ export const SinglePointOnboardSurvey = createSpotIllustration("template-library-single-point-onboard-survey.svg") +/* prettier-ignore */ export const GeneralOnboardSurvey = createSpotIllustration("template-library-general-onboard-survey.svg") +/* prettier-ignore */ export const RemoteOnboardSurvey = createSpotIllustration("template-library-remote-onboard-survey.svg") +/* prettier-ignore */ export const HealthAndSafety = createSpotIllustration("template-library-health-and-safety.svg") +/* prettier-ignore */ export const EndOfProbation = createSpotIllustration("template-library-end-of-probation.svg") +/* prettier-ignore */ export const NewWaysOfWorking = createSpotIllustration("template-library-new-ways-of-working.svg") +/* prettier-ignore */ export const ReOnboarding = createSpotIllustration("template-library-re-onboarding.svg") + +/** + * Template Library / Performance + */ +/* prettier-ignore */ export const Individual360 = createSpotIllustration("template-library-individual-360.svg") +/* prettier-ignore */ export const Leadership360 = createSpotIllustration("template-library-leadership-360.svg") +/* prettier-ignore */ export const Manager360 = createSpotIllustration("template-library-manager-360.svg") +/* prettier-ignore */ export const Individual180 = createSpotIllustration("template-library-individual-180.svg") +/* prettier-ignore */ export const Leadership180 = createSpotIllustration("template-library-leadership-180.svg") +/* prettier-ignore */ export const Manager180 = createSpotIllustration("template-library-manager-180.svg") +/* prettier-ignore */ export const TeamEffectiveness1 = createSpotIllustration("template-library-team-effectiveness-1.svg") +/* prettier-ignore */ export const TeamEffectiveness2 = createSpotIllustration("template-library-team-effectiveness-2.svg") + +/** + * Offices + */ +/* prettier-ignore */ export const London = createSpotIllustration("offices-london.svg") +/* prettier-ignore */ export const Melbourne = createSpotIllustration("offices-melbourne.svg") +/* prettier-ignore */ export const NewYork = createSpotIllustration("offices-new-york.svg") +/* prettier-ignore */ export const SanFrancisco = createSpotIllustration("offices-san-francisco.svg") + +/** + * Values + */ +/* prettier-ignore */ export const AmplifyOthers = createSpotIllustration("values-amplify-others.svg") +/* prettier-ignore */ export const HaveTheCourageToBeVulnerable = createSpotIllustration("values-have-the-courage-to-be-vulnerable.svg") +/* prettier-ignore */ export const LearnFasterThroughFeedback = createSpotIllustration("values-learn-faster-through-feedback.svg") +/* prettier-ignore */ export const TrustOthersToMakeDecisions = createSpotIllustration("values-trust-others-to-make-decisions.svg") + +/** + * Template Library / COVID-19 + */ +/* prettier-ignore */ export const WellbeingSurvey = createSpotIllustration("template-library-wellbeing-survey.svg") +/* prettier-ignore */ export const Response = createSpotIllustration("template-library-response.svg") +/* prettier-ignore */ export const RemoteWorkQSet = createSpotIllustration("template-library-remote-work-q-set.svg") +/* prettier-ignore */ export const ReturnToWorkplace = createSpotIllustration("template-library-return-to-workplace.svg") +/* prettier-ignore */ export const PulseSurvey = createSpotIllustration("template-library-pulse-survey.svg") + +/** + * New Account + */ +/* prettier-ignore */ export const AccountBasics = createSpotIllustration("new-account-account-basics.svg") +/* prettier-ignore */ export const CompanyDetails = createSpotIllustration("new-account-company-details.svg") +/* prettier-ignore */ export const EmployeeData = createSpotIllustration("new-account-employee-data.svg") +/* prettier-ignore */ export const Gdpr = createSpotIllustration("new-account-gdpr.svg") +/* prettier-ignore */ export const Timezone = createSpotIllustration("new-account-timezone.svg") +/* prettier-ignore */ export const AddUser = createSpotIllustration("new-account-add-user.svg") + +/** + * Skills Coach (previously referred to as Manager Learning) + */ +/* prettier-ignore */ export const Strategy = createSpotIllustration("skills-coach-strategy.svg") +/* prettier-ignore */ export const Resilience = createSpotIllustration("skills-coach-resilience.svg") +/* prettier-ignore */ export const EssentialResilience = createSpotIllustration("skills-coach-essential-resillience.svg") +/* prettier-ignore */ export const RemoteManager = createSpotIllustration("skills-coach-remote-manager.svg") +/* prettier-ignore */ export const Productivity = createSpotIllustration("skills-coach-productivity.svg") +/* prettier-ignore */ export const EssentialProductivity = createSpotIllustration("skills-coach-essential-productivity.svg") +/* prettier-ignore */ export const InfluentialCommunication = createSpotIllustration("skills-coach-influential-communication.svg") +/* prettier-ignore */ export const LeadingChange = createSpotIllustration("skills-coach-leading-change.svg") +/* prettier-ignore */ export const ManagerLearning = createSpotIllustration("skills-coach-manager-learning.svg") +/* prettier-ignore */ export const Feedback = createSpotIllustration("skills-coach-feedback.svg") +/* prettier-ignore */ export const Coaching = createSpotIllustration("skills-coach-coaching.svg") +/* prettier-ignore */ export const OneOnOne = createSpotIllustration("skills-coach-1-on-1.svg") + +/** + * Miscellaneous + */ +/* prettier-ignore */ export const ActionPlans = createSpotIllustration("miscellaneous-action-plans.svg") +/* prettier-ignore */ export const BCorp = createSpotIllustration("miscellaneous-b-corp.svg") +/* prettier-ignore */ export const Behaviour = createSpotIllustration("miscellaneous-behavior.svg") +/* prettier-ignore */ export const ChangeAgents = createSpotIllustration("miscellaneous-change-agents.svg") +/* prettier-ignore */ export const Communications = createSpotIllustration("miscellaneous-communications.svg") +/* prettier-ignore */ export const Community = createSpotIllustration("miscellaneous-community.svg") +/* prettier-ignore */ export const Company = createSpotIllustration("miscellaneous-company.svg") +/* prettier-ignore */ export const Conversations = createSpotIllustration("miscellaneous-conversations.svg") +/* prettier-ignore */ export const DataVisualization = createSpotIllustration("miscellaneous-data-visualization.svg") +/* prettier-ignore */ export const Goals = createSpotIllustration("miscellaneous-goals.svg") +/* prettier-ignore */ export const Insights = createSpotIllustration("miscellaneous-insights.svg") +/* prettier-ignore */ export const Learn = createSpotIllustration("miscellaneous-learn.svg") +/* prettier-ignore */ export const Microphone = createSpotIllustration("miscellaneous-microphone.svg") +/* prettier-ignore */ export const PaperPen = createSpotIllustration("miscellaneous-paper-pen.svg") +/* prettier-ignore */ export const PowerfulInsights = createSpotIllustration("miscellaneous-powerful-insights.svg") +/* prettier-ignore */ export const Privacy = createSpotIllustration("miscellaneous-privacy.svg") +/* prettier-ignore */ export const Process = createSpotIllustration("miscellaneous-process.svg") +/* prettier-ignore */ export const Resources = createSpotIllustration("miscellaneous-resources.svg") +/* prettier-ignore */ export const ScienceBackedTools = createSpotIllustration("miscellaneous-science-backed-tools.svg") +/* prettier-ignore */ export const SkillsDevelopment = createSpotIllustration("miscellaneous-skills-development.svg") +/* prettier-ignore */ export const ViewReports = createSpotIllustration("miscellaneous-view-reports.svg") +/* prettier-ignore */ export const ReadArticle = createSpotIllustration("miscellaneous-read-article.svg") +/* prettier-ignore */ export const FastAction = createSpotIllustration("miscellaneous-fast-action.svg") +/* prettier-ignore */ export const BaselineSurvey = createSpotIllustration("miscellaneous-baseline-survey.svg") +/* prettier-ignore */ export const SpreadsheetTemplate = createSpotIllustration("miscellaneous-spreadsheet-template.svg") +/* prettier-ignore */ export const AddImage = createSpotIllustration("miscellaneous-add-image.svg") +/* prettier-ignore */ export const MeetingVoices = createSpotIllustration("miscellaneous-meeting-voices.svg") +/* prettier-ignore */ export const Workshop = createSpotIllustration("miscellaneous-workshop.svg") +/* prettier-ignore */ export const Video = createSpotIllustration("miscellaneous-video.svg") +/* prettier-ignore */ export const ReportSharing = createSpotIllustration("miscellaneous-report-sharing.svg") +/* prettier-ignore */ export const BlankSurvey = createSpotIllustration("miscellaneous-blank-survey.svg") +/* prettier-ignore */ export const TakeAim = createSpotIllustration("miscellaneous-take-aim.svg") +/* prettier-ignore */ export const Action = createSpotIllustration("miscellaneous-action.svg") +/* prettier-ignore */ export const Training1 = createSpotIllustration("miscellaneous-training-1.svg") +/* prettier-ignore */ export const Training2 = createSpotIllustration("miscellaneous-training-2.svg") +/* prettier-ignore */ export const Training3 = createSpotIllustration("miscellaneous-training-3.svg") +/* prettier-ignore */ export const ShareReport = createSpotIllustration("miscellaneous-share-report.svg") + +// TODO: Component Name change +/* prettier-ignore */ export const Team1 = createSpotIllustration("miscellaneous-team-1.svg") +/* prettier-ignore */ export const Team2 = createSpotIllustration("miscellaneous-team-2.svg") +/* prettier-ignore */ export const Templates = createSpotIllustration("miscellaneous-templates.svg") +/* prettier-ignore */ export const ExecutiveReportSharing = createSpotIllustration("miscellaneous-executive-report-sharing.svg") +/* prettier-ignore */ export const ManagerReportSharing = createSpotIllustration("miscellaneous-manager-report-sharing.svg") +/* prettier-ignore */ export const LeaderReportSharing = createSpotIllustration("miscellaneous-leader-report-sharing.svg") +/* prettier-ignore */ export const Alarm = createSpotIllustration("miscellaneous-alarm.svg") +/* prettier-ignore */ export const Fire = createSpotIllustration("miscellaneous-fire.svg") +/* prettier-ignore */ export const Fireworks = createSpotIllustration("miscellaneous-fireworks.svg") +/* prettier-ignore */ export const FullImport = createSpotIllustration("miscellaneous-full-import.svg") +/* prettier-ignore */ export const HrisImport = createSpotIllustration("miscellaneous-hris-import.svg") +/* prettier-ignore */ export const PartialImport = createSpotIllustration("miscellaneous-partial-import.svg") +/* prettier-ignore */ export const Starburst = createSpotIllustration("miscellaneous-starburst.svg") +/* prettier-ignore */ export const Stop = createSpotIllustration("miscellaneous-stop.svg") +/* prettier-ignore */ export const TrafficCone = createSpotIllustration("miscellaneous-traffic-cone.svg") +/* prettier-ignore */ export const Trophy = createSpotIllustration("miscellaneous-trophy.svg") +/* prettier-ignore */ export const UnderConstruction = createSpotIllustration("miscellaneous-under-construction.svg") +/* prettier-ignore */ export const ValueAdd = createSpotIllustration("miscellaneous-value-add.svg") +/* prettier-ignore */ export const Recommendation = createSpotIllustration("miscellaneous-recommendation.svg") +/* prettier-ignore */ export const Objective = createSpotIllustration("miscellaneous-objective.svg") +/* prettier-ignore */ export const CalendarSync = createSpotIllustration("miscellaneous-calendar-sync.svg") diff --git a/packages/components/src/Illustration/Spot/_docs/Spot.mdx b/packages/components/src/Illustration/Spot/_docs/Spot.mdx new file mode 100644 index 00000000000..9f7abf7f531 --- /dev/null +++ b/packages/components/src/Illustration/Spot/_docs/Spot.mdx @@ -0,0 +1,47 @@ +import { Canvas, Controls, Meta } from "@storybook/blocks" +import { ResourceLinks, KaioNotification, Installation } from "~storybook/components" +import * as StickerSheetStories from "./Spot.stickersheet.stories" +import * as SpotIllustrationStories from "./Spot.stories" + + + +# Spot Illustration + + + + + + + +## Overview + +Spot illustrations gives visual context to tasks. Most illustrations on our platform are presentational and should use the default empty alt text (ie: `alt=""`) provided by the base component. + + + + +## API + +### Enabled Aspect Ratio + +When enabled this wraps the image in a `figure` tag and set the aspect ratio to 1/1. + + + +When not enabled, the `img` tag will attempt to fill a width of 100%. + +## All Spot illustrations + +A list of all Spot illustrations and their component names. These can be imported from the root of `@kaizen/components`, ie: + +`import { CustomSurvey } from "@kaizen/components"` + + diff --git a/packages/components/src/Illustration/Spot/_docs/Spot.stickersheet.stories.tsx b/packages/components/src/Illustration/Spot/_docs/Spot.stickersheet.stories.tsx new file mode 100644 index 00000000000..b844178b403 --- /dev/null +++ b/packages/components/src/Illustration/Spot/_docs/Spot.stickersheet.stories.tsx @@ -0,0 +1,781 @@ +import React from "react" +import { Meta } from "@storybook/react" +import { Heading } from "~components/Heading" +import { Text } from "~components/Text" +import { StickerSheetStory } from "~storybook/components/StickerSheet" + +import { + AccountBasics, + Action, + AddImage, + AddUser, + Assertive, + BaselineSurvey, + BenefitsSurvey, + BlankSurvey, + CandidateSurvey, + Cautionary, + CompanyDetails, + ChangeReadiness, + ChangeSuccess, + Coaching, + Company, + CustomOnboardSurvey, + CustomSurvey, + CustomUnattributedSurvey, + EmergencyResponse, + EmployeeData, + EndOfProbation, + EngagementSurvey, + ExecutiveReportSharing, + ExitSurvey, + EssentialResilience, + EssentialProductivity, + InfluentialCommunication, + FastAction, + Feedback, + Gdpr, + GeneralOnboardSurvey, + HealthAndSafety, + InclusionSurvey, + Individual180, + Individual360, + Informative, + Insights, + InternSurvey, + LeaderReportSharing, + Leadership180, + Leadership360, + LeadingThroughCrisis, + LeadingChange, + Manager180, + Manager360, + ManagerLearning, + ManagerReportSharing, + MeetingVoices, + Negative, + NewWaysOfWorking, + OneOnOne, + PerformanceDiagnostics, + PhasedWeek1OnboardSurvey, + PhasedWeek5OnboardSurvey, + Positive, + Productivity, + QuickEngagementSurvey, + ReadArticle, + RemoteManager, + RemoteOnboardSurvey, + ReOnboarding, + ReportSharing, + Resilience, + ShareReport, + SinglePointOnboardSurvey, + SpreadsheetTemplate, + Strategy, + TakeAim, + Team1, + Team2, + TeamEffectiveness1, + TeamEffectiveness2, + Timezone, + Training1, + Training2, + Training3, + ValuesSurvey1, + ValuesSurvey2, + Video, + ViewReports, + WellbeingSurvey1, + WellbeingSurvey2, + WellbeingSurvey3, + Workshop, + WellbeingSurvey, + Response, + RemoteWorkQSet, + ReturnToWorkplace, + PulseSurvey, + PaperPen, + DataVisualization, + Community, + BCorp, + Resources, + Goals, + Communications, + ScienceBackedTools, + Microphone, + PowerfulInsights, + ActionPlans, + Conversations, + Process, + SkillsDevelopment, + ChangeAgents, + Alarm, + Fire, + Fireworks, + FullImport, + HrisImport, + PartialImport, + Starburst, + Stop, + TrafficCone, + Trophy, + UnderConstruction, + ValueAdd, + Recommendation, + Objective, + London, + Melbourne, + NewYork, + SanFrancisco, + Behaviour, + Learn, + Templates, + CalendarSync, + SpotProps, +} from "../" + +export default { + title: "Components/Illustrations/Spot", + parameters: { + chromatic: { disable: false }, + controls: { disable: true }, + }, +} satisfies Meta + +const engagementSpots = [ + { + Component: BenefitsSurvey, + name: "BenefitsSurvey", + }, + { + Component: CustomSurvey, + name: "CustomSurvey", + }, + { + Component: CustomUnattributedSurvey, + name: "CustomUnattributedSurvey", + }, + { + Component: EngagementSurvey, + name: "EngagementSurvey", + }, + { + Component: InclusionSurvey, + name: "InclusionSurvey", + }, + { + Component: QuickEngagementSurvey, + name: "QuickEngagementSurvey", + }, + { + Component: ValuesSurvey1, + name: "ValuesSurvey1", + }, + { + Component: ValuesSurvey2, + name: "ValuesSurvey2", + }, + { + Component: WellbeingSurvey1, + name: "WellbeingSurvey1", + }, + { + Component: WellbeingSurvey2, + name: "WellbeingSurvey2", + }, + { + Component: WellbeingSurvey3, + name: "WellbeingSurvey3", + }, + { + Component: ChangeReadiness, + name: "ChangeReadiness", + }, + { + Component: ChangeSuccess, + name: "ChangeSuccess", + }, + { + Component: PerformanceDiagnostics, + name: "PerformanceDiagnostics", + }, + { + Component: LeadingThroughCrisis, + name: "LeadingThroughCrisis", + }, + { + Component: EmergencyResponse, + name: "EmergencyResponse", + }, +] + +const experienceSpots = [ + { + Component: PhasedWeek1OnboardSurvey, + name: "PhasedWeek1OnboardSurvey", + }, + { + Component: PhasedWeek5OnboardSurvey, + name: "PhasedWeek5OnboardSurvey", + }, + { + Component: RemoteOnboardSurvey, + name: "RemoteOnboardSurvey", + }, + { + Component: GeneralOnboardSurvey, + name: "GeneralOnboardSurvey", + }, + { + Component: CustomOnboardSurvey, + name: "CustomOnboardSurvey", + }, + { + Component: CandidateSurvey, + name: "CandidateSurvey", + }, + { + Component: ExitSurvey, + name: "ExitSurvey", + }, + { + Component: InternSurvey, + name: "InternSurvey", + }, + { + Component: SinglePointOnboardSurvey, + name: "SinglePointOnboardSurvey", + }, + { + Component: HealthAndSafety, + name: "HealthAndSafety", + }, + { + Component: EndOfProbation, + name: "EndOfProbation", + }, + { + Component: NewWaysOfWorking, + name: "NewWaysOfWorking", + }, + { + Component: ReOnboarding, + name: "ReOnboarding", + }, +] + +const performanceSpots = [ + { + Component: Individual360, + name: "Individual360", + }, + { + Component: Leadership360, + name: "Leadership360", + }, + { + Component: Manager360, + name: "Manager360", + }, + { + Component: Individual180, + name: "Individual180", + }, + { + Component: Leadership180, + name: "Leadership180", + }, + { + Component: Manager180, + name: "Manager180", + }, + { + Component: TeamEffectiveness1, + name: "TeamEffectiveness1", + }, + { + Component: TeamEffectiveness2, + name: "TeamEffectiveness2", + }, +] + +const covidSpots = [ + { + Component: Response, + name: "Response", + }, + { + Component: WellbeingSurvey, + name: "WellbeingSurvey", + }, + { + Component: RemoteWorkQSet, + name: "RemoteWorkQSet", + }, + { + Component: ReturnToWorkplace, + name: "ReturnToWorkplace", + }, + { + Component: PulseSurvey, + name: "PulseSurvey", + }, +] + +const newAccountSpots = [ + { + Component: AccountBasics, + name: "AccountBasics", + }, + { + Component: CompanyDetails, + name: "CompanyDetails", + }, + { + Component: EmployeeData, + name: "EmployeeData", + }, + { + Component: Gdpr, + name: "Gdpr", + }, + { + Component: Timezone, + name: "Timezone", + }, + { + Component: AddUser, + name: "AddUser", + }, +] + +const officeSpots = [ + { + Component: London, + name: "London", + }, + { + Component: Melbourne, + name: "Melbourne", + }, + { + Component: NewYork, + name: "NewYork", + }, + { + Component: SanFrancisco, + name: "SanFrancisco", + }, +] + +const moodSpots = [ + { + Component: Cautionary, + name: "Cautionary", + }, + { + Component: Informative, + name: "Informative", + }, + { + Component: Negative, + name: "Negative", + }, + { + Component: Assertive, + name: "Assertive", + }, + { + Component: Positive, + name: "Positive", + }, +] + +const managerLearningSpots = [ + { + Component: OneOnOne, + name: "OneOnOne", + }, + { + Component: Productivity, + name: "Productivity", + }, + { + Component: Strategy, + name: "Strategy", + }, + { + Component: Resilience, + name: "Resilience", + }, + { + Component: Coaching, + name: "Coaching", + }, + { + Component: Feedback, + name: "Feedback", + }, + { + Component: RemoteManager, + name: "RemoteManager", + }, + { + Component: ManagerLearning, + name: "ManagerLearning", + }, + { + Component: EssentialProductivity, + name: "EssentialProductivity", + }, + { + Component: EssentialResilience, + name: "EssentialResilience", + }, + { + Component: LeadingChange, + name: "LeadingChange", + }, + { + Component: InfluentialCommunication, + name: "InfluentialCommunication", + }, +] + +const miscellaneousSpots = [ + { + Component: ViewReports, + name: "ViewReports", + }, + { + Component: ReadArticle, + name: "ReadArticle", + }, + { + Component: FastAction, + name: "FastAction", + }, + { + Component: BaselineSurvey, + name: "BaselineSurvey", + }, + { + Component: Team1, + name: "Team1", + }, + { + Component: Team2, + name: "Team2", + }, + { + Component: Recommendation, + name: "Recommendation", + }, + { + Component: AddImage, + name: "AddImage", + }, + { + Component: MeetingVoices, + name: "MeetingVoices", + }, + { + Component: Workshop, + name: "Workshop", + }, + { + Component: Video, + name: "Video", + }, + { + Component: ReportSharing, + name: "ReportSharing", + }, + { + Component: BlankSurvey, + name: "BlankSurvey", + }, + { + Component: TakeAim, + name: "TakeAim", + }, + { + Component: Action, + name: "Action", + }, + { + Component: Training1, + name: "Training1", + }, + { + Component: Training2, + name: "Training2", + }, + { + Component: Training3, + name: "Training3", + }, + { + Component: ShareReport, + name: "ShareReport", + }, + { + Component: ExecutiveReportSharing, + name: "ExecutiveReportSharing", + }, + { + Component: ManagerReportSharing, + name: "ManagerReportSharing", + }, + { + Component: LeaderReportSharing, + name: "LeaderReportSharing", + }, + { + Component: SpreadsheetTemplate, + name: "SpreadsheetTemplate", + }, + { + Component: FullImport, + name: "FullImport", + }, + { + Component: PartialImport, + name: "PartialImport", + }, + { + Component: HrisImport, + name: "HrisImport", + }, + { + Component: Alarm, + name: "Alarm", + }, + { + Component: Fire, + name: "Fire", + }, + { + Component: UnderConstruction, + name: "UnderConstruction", + }, + { + Component: Stop, + name: "Stop", + }, + { + Component: Trophy, + name: "Trophy", + }, + { + Component: TrafficCone, + name: "TrafficCone", + }, + { + Component: ValueAdd, + name: "ValueAdd", + }, + { + Component: Starburst, + name: "Starburst", + }, + { + Component: Fireworks, + name: "Fireworks", + }, + { + Component: Objective, + name: "Objective", + }, + { + Component: PaperPen, + name: "PaperPen", + }, + { + Component: DataVisualization, + name: "DataVisualization", + }, + { + Component: Community, + name: "Community", + }, + { + Component: BCorp, + name: "BCorp", + }, + { + Component: Resources, + name: "Resources", + }, + { + Component: Goals, + name: "Goals", + }, + { + Component: Communications, + name: "Communications", + }, + { + Component: ScienceBackedTools, + name: "ScienceBackedTools", + }, + { + Component: Microphone, + name: "Microphone", + }, + { + Component: Company, + name: "Company", + }, + { + Component: Insights, + name: "Insights", + }, + { + Component: Behaviour, + name: "Behaviour", + }, + { + Component: Learn, + name: "Learn", + }, + { + Component: Templates, + name: "Templates", + }, + { + Component: PowerfulInsights, + name: "PowerfulInsights", + }, + { + Component: ActionPlans, + name: "ActionPlans", + }, + { + Component: Conversations, + name: "Conversations", + }, + { + Component: Process, + name: "Process", + }, + { + Component: SkillsDevelopment, + name: "SkillsDevelopment", + }, + { + Component: ChangeAgents, + name: "ChangeAgents", + }, + { + Component: CalendarSync, + name: "CalendarSync", + }, +] + +type IllustrationSpot = (props: SpotProps) => JSX.Element + +const IllustrationExampleTile = ({ + Component, + name, +}: { + Component: IllustrationSpot + name: string +}): JSX.Element => ( +
+ + {name} +
+) + +const StickerSheetTemplate: StickerSheetStory = { + render: () => ( +
+
+ Engagement +
+ {engagementSpots.map((props, i) => ( + + ))} +
+
+ +
+ Experience +
+ {experienceSpots.map((props, i) => ( + + ))} +
+
+ +
+ Performance +
+ {performanceSpots.map((props, i) => ( + + ))} +
+
+ +
+ COVID-19 +
+ {covidSpots.map((props, i) => ( + + ))} +
+
+ +
+ New Account +
+ {newAccountSpots.map((props, i) => ( + + ))} +
+
+ +
+ Moods +
+ {moodSpots.map((props, i) => ( + + ))} +
+
+ +
+ Skills Coach +
+ {managerLearningSpots.map((props, i) => ( + + ))} +
+
+ +
+ Offices +
+ {officeSpots.map((props, i) => ( + + ))} +
+
+ +
+ Miscellaneous +
+ {miscellaneousSpots.map((props, i) => ( + + ))} +
+
+
+ ), +} + +export const StickerSheetDefault: StickerSheetStory = { + ...StickerSheetTemplate, + name: "Sticker Sheet (Default)", +} diff --git a/packages/components/src/Illustration/Spot/_docs/Spot.stories.tsx b/packages/components/src/Illustration/Spot/_docs/Spot.stories.tsx new file mode 100644 index 00000000000..ff0bb38d199 --- /dev/null +++ b/packages/components/src/Illustration/Spot/_docs/Spot.stories.tsx @@ -0,0 +1,48 @@ +import React from "react" +import { Meta, StoryObj } from "@storybook/react" +import { Text } from "~components/Text" +import { CompanyDetails } from "../index" + +const meta = { + title: "Components/Illustrations/Spot", + component: CompanyDetails, +} satisfies Meta + +export default meta + +type Story = StoryObj + +export const Playground: Story = { + parameters: { + docs: { + canvas: { + sourceState: "shown", + }, + }, + }, +} + +export const EnabledAspectRatio: Story = { + render: () => ( + <> +
+ + + With enableAspectRatio... lorem ipsum dolor sit amet + consectetur adipisicing elit. Fugit id obcaecati quasi rerum natus + nostrum, nobis saepe unde eveniet quidem! Pariatur impedit, veritatis + at ea iure id enim ipsam voluptatum! + +
+
+ + + Without enableAspectRatio... lorem ipsum dolor sit amet + consectetur adipisicing elit. Fugit id obcaecati quasi rerum natus + nostrum, nobis saepe unde eveniet quidem! Pariatur impedit, veritatis + at ea iure id enim ipsam voluptatum! + +
+ + ), +} diff --git a/packages/components/src/Illustration/Spot/index.ts b/packages/components/src/Illustration/Spot/index.ts new file mode 100644 index 00000000000..b3840f163a0 --- /dev/null +++ b/packages/components/src/Illustration/Spot/index.ts @@ -0,0 +1 @@ +export * from "./Spot" diff --git a/packages/components/src/Illustration/index.ts b/packages/components/src/Illustration/index.ts new file mode 100644 index 00000000000..b3840f163a0 --- /dev/null +++ b/packages/components/src/Illustration/index.ts @@ -0,0 +1 @@ +export * from "./Spot" diff --git a/packages/components/src/Illustration/subcomponents/Base/Base.module.scss b/packages/components/src/Illustration/subcomponents/Base/Base.module.scss new file mode 100644 index 00000000000..a301e5467e0 --- /dev/null +++ b/packages/components/src/Illustration/subcomponents/Base/Base.module.scss @@ -0,0 +1,125 @@ +@import "~@kaizen/design-tokens/sass/color"; +@import "~@kaizen/design-tokens/sass/animation"; + +.wrapper { + width: 100%; + margin: 0; +} + +.figure { + margin: 0; + position: relative; + + // nested to get more specificity, beat out the generic button styles + .pausePlayButton { + opacity: 0%; + position: absolute; + right: 1rem; + bottom: 1rem; + /* stylelint-disable declaration-no-important */ + background-color: $color-white !important; + border: 1px solid $color-gray-400; + transition: all $animation-duration-immediate; + + @media (hover: none) and (pointer: coarse) { + opacity: 100%; + } + + svg { + color: $color-purple-800; + opacity: 70%; + } + + &:hover, + &:focus { + opacity: 100%; + background-color: $color-gray-200 !important; + + svg { + opacity: 100%; + } + } + } + + &:hover { + .pausePlayButton { + opacity: 100%; + } + } +} + +.aspectRatioWrapper { + margin: 0; + display: flex; + align-items: center; +} + +.landscape { + aspect-ratio: 4/3; + + @supports not (aspect-ratio: auto) { + &::before { + float: left; + padding-top: 75%; + content: ""; + } + + &::after { + display: block; + content: ""; + clear: both; + } + } +} + +.portrait { + aspect-ratio: 3/4; + + @supports not (aspect-ratio: auto) { + &::before { + float: left; + padding-top: 133.33%; + content: ""; + } + + &::after { + display: block; + content: ""; + clear: both; + } + } +} + +.square { + aspect-ratio: auto 1/1; + + @supports not (aspect-ratio: auto) { + &::before { + float: left; + padding-top: 100%; + content: ""; + } + + &::after { + display: block; + content: ""; + clear: both; + } + } +} + +// If the .visually-hidden class is applied to natively focusable elements +// (such as a, button, input, etc) they must become visible when they receive +// keyboard focus. Otherwise, a sighted keyboard user would have to try and +// figure out where their visible focus indicator had gone to. +.visuallyHidden:not(:focus, :active) { + clip: rect(0, 0, 0, 0); + clip-path: inset(50%); + position: absolute; + width: 1px; + height: 1px; + padding: 0; + overflow: hidden; + white-space: nowrap; + border: 0; +} diff --git a/packages/components/src/Illustration/subcomponents/Base/Base.tsx b/packages/components/src/Illustration/subcomponents/Base/Base.tsx new file mode 100644 index 00000000000..5396a604c14 --- /dev/null +++ b/packages/components/src/Illustration/subcomponents/Base/Base.tsx @@ -0,0 +1,54 @@ +import React, { HTMLAttributes } from "react" +import classnames from "classnames" +import { assetUrl } from "@kaizen/hosted-assets" +import { OverrideClassName } from "~types/OverrideClassName" +import styles from "./Base.module.scss" + +export type BaseProps = { + /** + * Refer to the Base Illustration Sticker Sheet in Heart UI Kit + */ + name: string + + /** + * Only provide if there is context/text required surrounding this illustration. + * @default "" + */ + alt?: string + + /** + * Aspect ratio that is set on the illustration in Scene/Spot which wraps the + * component in a container, forcing the aspect ratio. + */ + aspectRatio?: "landscape" | "portrait" | "square" +} & OverrideClassName> + +export const Base = ({ + name, + alt = "", + classNameOverride, + aspectRatio, + ...restProps +}: BaseProps): JSX.Element => { + const className = classnames(styles.wrapper, classNameOverride) + + return aspectRatio ? ( +
+ {alt} +
+ ) : ( + {alt} + ) +} + +Base.displayName = "Base" diff --git a/packages/components/src/Illustration/subcomponents/Base/index.ts b/packages/components/src/Illustration/subcomponents/Base/index.ts new file mode 100644 index 00000000000..bef600cc76f --- /dev/null +++ b/packages/components/src/Illustration/subcomponents/Base/index.ts @@ -0,0 +1 @@ +export * from "./Base" diff --git a/packages/components/src/index.ts b/packages/components/src/index.ts index 7f39e5d3d89..53465a4a570 100644 --- a/packages/components/src/index.ts +++ b/packages/components/src/index.ts @@ -45,3 +45,4 @@ export * from "./TextArea" export * from "./TextAreaField" export * from "./Tile" export * from "./TimeField" +export * from "./Illustration"