-
Notifications
You must be signed in to change notification settings - Fork 23
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
1 parent
66e660d
commit f746bda
Showing
10 changed files
with
547 additions
and
3 deletions.
There are no files selected for viewing
29 changes: 29 additions & 0 deletions
29
packages/a11y-workshop-pages/docs/A11yWorkshopPages.stories.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,29 @@ | ||
import React, { useState } from "react" | ||
import { StoryFn } from "@storybook/react" | ||
import { Admin as AdminPage, Settings as SettingsPage } from "../src/" | ||
|
||
export default { | ||
title: "Culture Amp", | ||
decorators: [ | ||
(StoryComponent: StoryFn) => ( | ||
<div style={{ margin: "-1rem", minHeight: "1200px" }}> | ||
<StoryComponent /> | ||
</div> | ||
), | ||
], | ||
} | ||
|
||
export const Admin: StoryFn = () => { | ||
const [adminPageActive, setAdminPageActive] = useState<boolean>(false) | ||
|
||
if (adminPageActive) { | ||
return <AdminPage onNavPress={() => setAdminPageActive(false)} /> | ||
} | ||
|
||
return <SettingsPage onNavPress={() => setAdminPageActive(true)} /> | ||
} | ||
|
||
Admin.parameters = { | ||
backgrounds: { default: "Gray 100" }, | ||
} | ||
Admin.storyName = "Culture Amp" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1 @@ | ||
export * from "./src" |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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" | ||
} | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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; | ||
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -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} tabIndex={-1}> | ||
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> | ||
</> | ||
) |
Oops, something went wrong.