@workday/canvas-kit-docs 8.0.0-alpha.144-next.0 → 8.0.0-alpha.151-next.3

package/dist/mdx/react/text/Text.mdx

@@ -0,0 +1,129 @@
+import {Basic as BasicText} from './examples/Text';
+import Label from './examples/Label';
+import BodyText from './examples/BodyText';
+import Heading from './examples/Heading';
+import Subtext from './examples/Subtext';
+import Title from './examples/Title';
+
+import {TextComponent, LabelComponent, TypeLevelComponent} from './PropTables.splitprops.tsx';
+
+
+# Canvas Kit React Text
+
+`Text` is a group of text components that provide a common, ergonomic API to render text with
+simplified usage of Canvas Kit type token.
+
+## Installation
+
+```sh
+yarn add @workday/canvas-kit-react
+```
+
+## Text
+
+### Usage
+
+`Text` is the base component that is used to render text in the UI. It is built off of our `Box`
+component which allows the use of styles props such as `display`, `margin`, `padding` as well as the
+most common type styles such as `fontWeight`, `fontSize` amongst others. This component is an
+extension of our [type tokens](https://canvas.workdaydesign.com/tokens/type/#type-styles),
+therefore, props like `typeLevel` and `variant` all exists.
+
+By default `Text` component is a `span` element, but it's possible to override the element by
+passing `as` prop.
+
+```tsx
+<Text as="p" fontSize={14} fontWeight="medium">
+  Text here...
+</Text>
+```
+
+<ExampleCodeBlock code={BasicText} />
+
+### Text Props
+
+As previously mentioned, `Text` is built on top of `Box` and has access to all its props. In
+addition `Text` has its own props:
+
+<ArgsTable of={TextComponent} />
+
+## LabelText
+
+`LabelText` is a `label` element build based on the top of `Text` component with added ability to
+add a cursor or disabled style.
+
+### Usage
+
+```tsx
+<LabelText cursor="pointer" disabled={true}>
+  Text here...
+</LabelText>
+```
+
+<ExampleCodeBlock code={Label} />
+
+### LabelText Props
+
+In addition to `Text` component props, `LabelText` has the following props:
+
+<ArgsTable of={LabelComponent} />
+
+## Type Level Components
+
+Type Level Components, `Subtext`, `BodyText`, `Heading` and `Title`, apply type token styles to text
+element. Instead of passing type level token you can use one of Type Level Components, like in
+example below:
+
+```tsx
+// v7
+<p css={{...type.levels.subtext.small}}>Small Subtext Text</p>
+
+// v8
+<Subtext size="small">Small Subtext Text</Subtext>
+```
+
+### Props
+
+In addition to `Text` component props, each type level components has the following props:
+
+<ArgsTable of={TypeLevelComponent} />
+
+### BodyText
+
+`BodyText` component renders text with `type.levels.body[size]` styles.
+
+```tsx
+<BodyText size="small">Small Body Text</BodyText>
+```
+
+<ExampleCodeBlock code={BodyText} />
+
+### Heading
+
+`Heading` component renders text with `type.levels.heading[size]` styles.
+
+```tsx
+<Heading size="small">Small Heading Text</Heading>
+```
+
+<ExampleCodeBlock code={Heading} />
+
+### Subtext
+
+`Subtext` component renders text with `type.levels.subtext[size]` styles.
+
+```tsx
+<Subtext size="small">Small Subtext Text</Subtext>
+```
+
+<ExampleCodeBlock code={Subtext} />
+
+### Title
+
+`Title` component renders text with `type.levels.title[size]` styles.
+
+```tsx
+<Title size="small">Small Title Text</Title>
+```
+
+<ExampleCodeBlock code={Title} />

package/dist/mdx/react/text/examples/BodyText.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import {BodyText as BodyTextComponent} from '@workday/canvas-kit-react/text';
+
+export default () => (
+  <>
+    <BodyTextComponent size="large">Large Body Text</BodyTextComponent>
+    <BodyTextComponent size="medium">Medium Body Text</BodyTextComponent>
+    <BodyTextComponent size="small">Small Body Text</BodyTextComponent>
+  </>
+);

package/dist/mdx/react/text/examples/Heading.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {Heading as HeadingComponent} from '@workday/canvas-kit-react/text';
+
+export default () => (
+  <>
+    <HeadingComponent as="h4" size="large">
+      Large Heading Text
+    </HeadingComponent>
+    <HeadingComponent as="h5" size="medium">
+      Medium Heading Text
+    </HeadingComponent>
+    <HeadingComponent as="h6" size="small">
+      Small Heading Text
+    </HeadingComponent>
+  </>
+);

package/dist/mdx/react/text/examples/Label.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import {LabelText} from '@workday/canvas-kit-react/text';
+
+export default () => (
+  <>
+    <LabelText marginBottom="s">Label</LabelText>
+    <LabelText cursor="pointer" marginBottom="s">
+      Label with pointer
+    </LabelText>
+    <LabelText disabled marginBottom="s">
+      Disabled Label
+    </LabelText>
+  </>
+);

package/dist/mdx/react/text/examples/Subtext.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import {Subtext as SubtextComponent} from '@workday/canvas-kit-react/text';
+
+export default () => (
+  <>
+    <SubtextComponent size="large">Large Subtext</SubtextComponent>
+    <SubtextComponent size="medium">Medium Subtext</SubtextComponent>
+    <SubtextComponent size="small">Small Subtext</SubtextComponent>
+  </>
+);

package/dist/mdx/react/text/examples/Text.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+
+import {type, typeColors} from '@workday/canvas-kit-react/tokens';
+import {Box} from '@workday/canvas-kit-react';
+import {Text} from '@workday/canvas-kit-react/text';
+
+export default () => (
+  <Box>
+    <Text as="h4">Text as h4</Text>
+    <Text as="p" fontSize={14} fontWeight="regular" fontFamily="monospace">
+      Text with props passed
+    </Text>
+    <Text as="p" {...type.levels.subtext.large}>
+      Text with type token passed
+    </Text>
+    <Box {...type.levels.subtext.large} color={typeColors.hint} marginBottom="s">
+      <Text>Text with inherenced styles</Text>
+    </Box>
+    <Text as="p" typeLevel="body.small">
+      Small Body level text
+    </Text>
+  </Box>
+);

package/dist/mdx/react/text/examples/Title.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+import {Title as TitleComponent} from '@workday/canvas-kit-react/text';
+
+export default () => (
+  <>
+    <TitleComponent as="h1" size="large">
+      Large Title Text
+    </TitleComponent>
+    <TitleComponent as="h2" size="medium">
+      Medium Title Text
+    </TitleComponent>
+    <TitleComponent as="h3" size="small">
+      Small Title Text
+    </TitleComponent>
+  </>
+);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "8.0.0-alpha.144-next.0+fa205ee2",
+  "version": "8.0.0-alpha.151-next.3+548c0a40",
   "description": "Documentation components of Canvas Kit components",
   "author": "Workday, Inc. (https://www.workday.com)",
   "license": "Apache-2.0",
@@ -42,7 +42,7 @@
   ],
   "dependencies": {
     "@storybook/csf": "0.0.1",
-    "@workday/canvas-kit-react": "^8.0.0-alpha.144-next.0+fa205ee2"
+    "@workday/canvas-kit-react": "^8.0.0-alpha.151-next.3+548c0a40"
   },
   "devDependencies": {
     "fs-extra": "^10.0.0",
@@ -50,5 +50,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.1"
   },
-  "gitHead": "fa205ee2d9ab79b591188e0e8c41747422f5a077"
+  "gitHead": "548c0a4090f25b1feeabaf1c1288fec4539e7d0a"
 }