A11y workshop pages

.changeset/twenty-radios-itch.md

@@ -0,0 +1,5 @@
+---
+"@kaizen/a11y-workshop-pages": major
+---
+
+A11y workshop pages

packages/a11y-workshop-pages/docs/A11yWorkshopPages.stories.tsx

@@ -0,0 +1,35 @@
+import React, { useEffect, useState } from "react"
+import { StoryFn } from "@storybook/react"
+import { Admin as AdminPage, Settings as SettingsPage } from "../src/"
+
+export default {
+  tags: ["autodocs"],
+  title: "Culture Amp",
+  decorators: [
+    (StoryComponent: StoryFn) => (
+      <div style={{ margin: "-1rem", minHeight: "1200px" }}>
+        <StoryComponent />
+      </div>
+    ),
+  ],
+}
+
+export const Admin: StoryFn = () => {
+  useEffect(() => {
+    window.document.title = "Culture Amp"
+  }, [])
+
+  const [adminPageActive, setAdminPageActive] = useState<boolean>(false)
+
+  if (adminPageActive) {
+    return <AdminPage onNavPress={() => setAdminPageActive(false)} />
+  }
+
+  return <SettingsPage onNavPress={() => setAdminPageActive(true)} />
+}
+
+Admin.parameters = {
+  backgrounds: { default: "Gray 100" },
+  chromatic: { disable: false },
+}
+Admin.storyName = "Culture Amp"

packages/a11y-workshop-pages/index.ts

@@ -0,0 +1 @@
+export * from "./src"

packages/a11y-workshop-pages/package.json

@@ -0,0 +1,58 @@
+{
+  "name": "@kaizen/a11y-workshop-pages",
+  "version": "0.0.0",
+  "description": "A11y workshop pages",
+  "scripts": {
+    "prepublish": "tsc --project tsconfig.dist.json",
+    "build": "yarn clean && yarn prepublish",
+    "build:watch": "yarn clean && yarn prepublish --watch",
+    "clean": "rimraf '**/*.d.ts' '**/*.js' '**/*.map'"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/cultureamp/kaizen-design-system.git",
+    "directory": "packages/a11y-workshop-pages"
+  },
+  "bugs": {
+    "url": "https://github.com/cultureamp/kaizen-design-system/issues"
+  },
+  "files": [
+    "**/*",
+    "!**/*.ts",
+    "!**/*.tsx",
+    "**/*.d.ts",
+    "!**/*.spec.*",
+    "!**/*.snap",
+    "!draft-templates",
+    "!stories",
+    "!docs",
+    "!tsconfig.dist.json"
+  ],
+  "author": "",
+  "private": false,
+  "license": "MIT",
+  "dependencies": {
+    "@kaizen/component-base": "^1.1.7",
+    "@kaizen/component-library": "^16.9.3",
+    "@kaizen/draft-form": "^10.4.8",
+    "@kaizen/draft-tooltip": "^5.4.47",
+    "@kaizen/draft-title-block-zen": "^7.10.12",
+    "@kaizen/draft-slider": "^1.8.12",
+    "@kaizen/button": "^3.0.4",
+    "@kaizen/draft-card": "^3.2.11",
+    "@kaizen/typography": "^2.3.11",
+    "@kaizen/draft-page-layout": "^2.3.13",
+    "@kaizen/date-picker": "^6.2.3",
+    "@kaizen/rich-text-editor": "^2.2.11",
+    "@kaizen/draft-menu": "^5.0.2",
+    "classnames": "^2.3.2",
+    "uuid": "^9.0.0"
+  },
+  "devDependencies": {
+    "rimraf": "^3.0.2"
+  },
+  "peerDependencies": {
+    "@kaizen/design-tokens": "^2.10.3 || ^3.0.0 || ^5.0.0 || ^6.0.0 || ^7.0.0 || ^8.0.0 || ^9.0.0 || ^10.0.0",
+    "react": "^16.9.0 || ^17.0.0 || ^18.0.0"
+  }
+}

packages/a11y-workshop-pages/src/Admin/Admin.module.scss

@@ -0,0 +1,70 @@
+@import "~@kaizen/design-tokens/sass/color";
+@import "~@kaizen/design-tokens/sass/spacing";
+@import "~@kaizen/design-tokens/sass/typography";
+
+.flex {
+  display: flex;
+}
+
+.alignItemsCenter {
+  align-items: center;
+}
+
+.justifyContentCenter {
+  justify-content: center;
+}
+
+.sidebar {
+  flex: 0 0 240px;
+}
+
+.content {
+  flex: 1 0 auto;
+}
+
+.navList {
+  list-style: none;
+}
+
+button.navItem {
+  // button reset
+  appearance: none;
+  background: transparent;
+  border: none;
+  font: inherit;
+  margin: 0;
+  padding: 0;
+  display: block;
+  margin-bottom: $spacing-md;
+  color: $color-purple-800;
+  text-decoration: none;
+  font-family: $typography-heading-4-font-family;
+  font-weight: $typography-heading-4-font-weight;
+  font-size: $typography-heading-4-font-size;
+  line-height: $typography-heading-4-line-height;
+  letter-spacing: $typography-heading-4-letter-spacing;
+
+  // &:focus {
+  //   outline: none;
+  // }
+}
+
+.navItem.active {
+  color: $color-blue-500;
+}
+
+.headingLabel {
+  margin-bottom: $spacing-xs;
+}
+
+.formHelpText {
+  height: 1.2rem;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+  padding-right: 1rem;
+}
+
+.infoIcon {
+  color: $color-purple-300;
+}

packages/a11y-workshop-pages/src/Admin/Admin.tsx

@@ -0,0 +1,52 @@
+import React from "react"
+import { Box } from "@kaizen/component-library"
+import { Container, Content } from "@kaizen/draft-page-layout"
+import { TitleBlockZen } from "@kaizen/draft-title-block-zen"
+import { Heading } from "@kaizen/typography"
+import styles from "./Admin.module.scss"
+
+interface AdminProps {
+  onNavPress: () => void
+}
+
+export const Admin = (props: AdminProps): JSX.Element => (
+  <>
+    <TitleBlockZen
+      variant="admin"
+      title="Account admin"
+      breadcrumb={{
+        path: "#",
+        text: "Back to home",
+      }}
+    />
+    <Container>
+      <Content>
+        <div className={styles.flex}>
+          <Box classNameOverride={styles.sidebar}>
+            <ul className={styles.navList}>
+              <li>
+                <button
+                  type="button"
+                  className={styles.navItem}
+                  onClick={props.onNavPress}
+                >
+                  Survey settings
+                </button>
+              </li>
+              <li>
+                <button type="button" className={styles.navItem}>
+                  Administrators
+                </button>
+              </li>
+            </ul>
+          </Box>
+          <div className={styles.content}>
+            <Heading variant="heading-2" tag="h1" style={{ flex: "1 0 auto" }}>
+              Administrators
+            </Heading>
+          </div>
+        </div>
+      </Content>
+    </Container>
+  </>
+)