@workday/canvas-kit-docs 9.0.0-alpha.317-next.3 → 9.0.0-alpha.320-next.3

package/dist/mdx/MAINTAINING.mdx

@@ -25,6 +25,8 @@ Kit!
   - [Minor Releases](#minor-releases)
   - [Major Releases](#major-releases)
   - [Canary Releases](#canary-releases)
+- [Codemods](#codemods)
+  - [Add a New Codemod](#add-a-new-codemod)
 
 ## Branches
 
@@ -263,4 +265,118 @@ Canary releases on the `prerelease/major` branch go out automatically once the p
 merged. The major version will be appended with `-alpha.{build-number}-next.{commit-count}`, where
 `build-number` is the GitHub build identifier, and `commit-count` is the number of commits since the
 last release tag. So for example, a V8 canary would look something like this:
-`8.0.0-alpha.127-next.4`.
+`8.0.0-alpha.127-next.4`.
+
+## Codemods
+
+We use codemods to reduce friction for consumers as they make changes and do upgrades. Codemods are
+accompany major version releases since v5, and can also be released in minor releases if users want to apply some changes sooner.
+
+### Add a New Codemod
+
+Adding a new codemod is pretty straightforward, but this guide will make sure you don't miss any steps
+along the way.
+
+First, you need to add a new command to the root CLI. For this example, we'll pretend you're adding
+a new v10 codemod.
+
+#### Initial Setup
+
+```js
+// modules/codemod/lib/index.js
+.command('v10 [path]', chalk.gray('Canvas Kit v9 > v10 upgrade transform'), yargs => {
+  yargs.positional('path', {
+    type: 'string',
+    default: '.',
+    describe: chalk.gray('The path to execute the transform in (recursively).'),
+  });
+})
+```
+
+Next, you'll want to add new v10 files and directories.
+
+```sh
+# add code and spec directories
+mkdir modules/codemod/v10 modules/codemod/spec
+# add code files
+touch modules/codemod/v10/index.ts modules/codemod/v10/__example__.ts
+## add spec files
+touch modules/codemod/v10/spec/__example__.spec.ts modules/codemod/v10/spec/expectTransformFactory.spec.ts
+```
+
+#### Add the Codemod
+
+Now you can add your first (placeholder) codemod.
+
+```ts
+// modules/codemod/v10/__example__.ts
+import {Transform} from 'jscodeshift';
+
+// placeholder codemod
+const transform: Transform = (file, api) => {
+  const j = api.jscodeshift;
+
+  const root = j(file.source);
+  return root.toSource();
+};
+
+export default transform;
+```
+
+And add a codemod runner:
+
+```ts
+// modules/codemod/v10/index.ts
+import {Transform} from 'jscodeshift';
+
+// TODO: Remove this
+import placeholderCodemod from './__example__';
+
+const transform: Transform = (file, api, options) => {
+  // These will run in order. If your transform depends on others, place yours after dependent transforms
+  const fixes = [
+    // TODO: Remove this
+    placeholderCodemod,
+    // add codemods here
+  ];
+  return fixes.reduce((source, fix) => fix({...file, source}, api, options) as string, file.source);
+};
+
+export default transform;
+```
+
+#### Add Tests
+
+Now you're ready to add your tests. First, we'll add this test factory to make your tests easier to
+write.
+
+```ts
+// modules/codemod/v10/spec/expectTransformFactory.spec.ts
+import {runInlineTest} from 'jscodeshift/dist/testUtils';
+
+export const expectTransformFactory = (fn: Function) => (
+  input: string,
+  expected: string,
+  options?: Record<string, any>
+) => {
+  return runInlineTest(fn, options, {source: input}, expected, {parser: 'tsx'});
+};
+```
+
+```ts
+// modules/codemod/v10/spec/__example__.spec.ts
+import {expectTransformFactory} from './expectTransformFactory';
+import transform from '../__remove_this__';
+
+const expectTransform = expectTransformFactory(transform);
+
+describe('Example Codemod', () => {
+  it('should not modify the code', () => {
+    const input = "const foo = 'bar';";
+    const expected = "const foo = 'bar';";
+    expectTransform(input, expected);
+  });
+});
+```
+
+And that's it! You're done. Stage your changes, commit, and push up a PR.

package/dist/mdx/react/card/card.mdx

@@ -59,6 +59,12 @@ Here's an example of a `Card` with a reduced padding of `xs`.
 wraps a non-semantic `div` element. The element can be replaced using the `as` prop, or a `role` or
 other `aria-*` attributes can be added to give `Card` semantic meaning.
 
+Changing the `Card` container to certain semantic elements will put accessibility at risk. For
+example, using the `as` prop to change the cards to buttons will flatten the content in the card.
+Headings, calls to action, etc. will not function as expected for users with disabilities. Semantic
+container elements like `<section>`, or using `<li>` grouped together in a common `<ul>` can be a
+useful way to elevate the accessibility of your design.
+
 #### Props
 
 Undocumented props are spread to the outermost element rendered by `Card`.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@workday/canvas-kit-docs",
-  "version": "9.0.0-alpha.317-next.3+19379c06",
+  "version": "9.0.0-alpha.320-next.3+7d3b3e9b",
   "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": "^9.0.0-alpha.317-next.3+19379c06",
+    "@workday/canvas-kit-react": "^9.0.0-alpha.320-next.3+7d3b3e9b",
     "@workday/canvas-system-icons-web": "^3.0.0"
   },
   "devDependencies": {
@@ -51,5 +51,5 @@
     "mkdirp": "^1.0.3",
     "typescript": "4.1"
   },
-  "gitHead": "19379c062e3718c6a4b0badfdd4c70ec75792ce7"
+  "gitHead": "7d3b3e9bb7b0f55017fa61a3142748e07967f626"
 }