npm - @khanacademy/wonder-blocks-link - Versions diffs - 3.8.10 → 3.8.11 - Mend

@khanacademy/wonder-blocks-link 3.8.10 → 3.8.11

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (6) hide show

package/CHANGELOG.md +7 -0
package/docs.md +5 -0
package/package.json +2 -2
package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap +0 -242
package/src/__tests__/generated-snapshot.test.js +0 -73
package/src/components/link.md +0 -43

package/CHANGELOG.md CHANGED Viewed

@@ -1,5 +1,12 @@
 # @khanacademy/wonder-blocks-link
+## 3.8.11
+### Patch Changes
+-   Updated dependencies [5b8ba5da]
+    -   @khanacademy/wonder-blocks-clickable@2.3.2
 ## 3.8.10
 ### Patch Changes

package/docs.md CHANGED Viewed

@@ -0,0 +1,5 @@
+Documentation for `@khanacademy/wonder-blocks-link` is now in Storybook.
+Visit the [Storybook
+Link](https://khan.github.io/wonder-blocks/?path=/docs/link) docs on GitHub
+Pages.

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@khanacademy/wonder-blocks-link",
-  "version": "3.8.10",
+  "version": "3.8.11",
   "design": "v1",
   "publishConfig": {
     "access": "public"
@@ -16,7 +16,7 @@
   "license": "MIT",
   "dependencies": {
     "@babel/runtime": "^7.18.6",
-    "@khanacademy/wonder-blocks-clickable": "^2.3.1",
+    "@khanacademy/wonder-blocks-clickable": "^2.3.2",
     "@khanacademy/wonder-blocks-color": "^1.2.0",
     "@khanacademy/wonder-blocks-core": "^4.4.0"
   },

package/src/__tests__/__snapshots__/generated-snapshot.test.js.snap DELETED Viewed

@@ -1,242 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-exports[`wonder-blocks-link example 1 1`] = `
-<div
-  className=""
-  style={
-    {
-      "alignItems": "stretch",
-      "borderStyle": "solid",
-      "borderWidth": 0,
-      "boxSizing": "border-box",
-      "display": "flex",
-      "flexDirection": "column",
-      "margin": 0,
-      "minHeight": 0,
-      "minWidth": 0,
-      "padding": 0,
-      "position": "relative",
-      "zIndex": 0,
-    }
-  }
->
-  <p>
-    I am a
-    <a
-      className=""
-      href="#nonexistent-link"
-      onBlur={[Function]}
-      onClick={[Function]}
-      onDragStart={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      onKeyUp={[Function]}
-      onMouseDown={[Function]}
-      onMouseEnter={[Function]}
-      onMouseLeave={[Function]}
-      onMouseUp={[Function]}
-      onTouchCancel={[Function]}
-      onTouchEnd={[Function]}
-      onTouchStart={[Function]}
-      style={
-        {
-          "color": "#1865f2",
-          "cursor": "pointer",
-          "outline": "none",
-          "textDecoration": "none",
-        }
-      }
-      tabIndex={0}
-    >
-      Primary Link
-    </a>
-    .
-    <span
-      style={
-        {
-          "color": "rgba(33,36,44,0.64)",
-        }
-      }
-    >
-      My friend the
-      <a
-        className=""
-        href="#secondary-nonexistent-link"
-        onBlur={[Function]}
-        onClick={[Function]}
-        onDragStart={[Function]}
-        onFocus={[Function]}
-        onKeyDown={[Function]}
-        onKeyUp={[Function]}
-        onMouseDown={[Function]}
-        onMouseEnter={[Function]}
-        onMouseLeave={[Function]}
-        onMouseUp={[Function]}
-        onTouchCancel={[Function]}
-        onTouchEnd={[Function]}
-        onTouchStart={[Function]}
-        style={
-          {
-            "color": "#21242c",
-            "cursor": "pointer",
-            "outline": "none",
-            "textDecoration": "none",
-          }
-        }
-        tabIndex={0}
-      >
-        Secondary Link
-      </a>
-      is used here with a lighter text.
-    </span>
-    We also have a
-    <a
-      className=""
-      href="#"
-      onBlur={[Function]}
-      onClick={[Function]}
-      onDragStart={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      onKeyUp={[Function]}
-      onMouseDown={[Function]}
-      onMouseEnter={[Function]}
-      onMouseLeave={[Function]}
-      onMouseUp={[Function]}
-      onTouchCancel={[Function]}
-      onTouchEnd={[Function]}
-      onTouchStart={[Function]}
-      style={
-        {
-          ":visited": {
-            "color": "#8755ee",
-          },
-          "color": "#1865f2",
-          "cursor": "pointer",
-          "outline": "none",
-          "textDecoration": "none",
-        }
-      }
-      tabIndex={0}
-    >
-      Visitable Primary Link
-    </a>
-    friend.
-  </p>
-  <p
-    style={
-      {
-        "backgroundColor": "#0b2149",
-        "color": "rgba(255,255,255,0.64)",
-        "padding": 10,
-      }
-    }
-  >
-    I am a
-    <a
-      className=""
-      href="#dark-link"
-      onBlur={[Function]}
-      onClick={[Function]}
-      onDragStart={[Function]}
-      onFocus={[Function]}
-      onKeyDown={[Function]}
-      onKeyUp={[Function]}
-      onMouseDown={[Function]}
-      onMouseEnter={[Function]}
-      onMouseLeave={[Function]}
-      onMouseUp={[Function]}
-      onTouchCancel={[Function]}
-      onTouchEnd={[Function]}
-      onTouchStart={[Function]}
-      style={
-        {
-          "color": "#ffffff",
-          "cursor": "pointer",
-          "outline": "none",
-          "textDecoration": "none",
-        }
-      }
-      tabIndex={0}
-    >
-      Primary Link
-    </a>
-    used on a dark background. My friend the Secondary Link isn't supported on this dark background.
-  </p>
-</div>
-`;
-exports[`wonder-blocks-link example 2 1`] = `
-<div
-  className=""
-  style={
-    {
-      "alignItems": "stretch",
-      "borderStyle": "solid",
-      "borderWidth": 0,
-      "boxSizing": "border-box",
-      "display": "flex",
-      "flexDirection": "column",
-      "margin": 0,
-      "minHeight": 0,
-      "minWidth": 0,
-      "padding": 0,
-      "position": "relative",
-      "zIndex": 0,
-    }
-  }
->
-  <a
-    className=""
-    href="#nonexistent-link"
-    id="typography-link"
-    onBlur={[Function]}
-    onClick={[Function]}
-    onDragStart={[Function]}
-    onFocus={[Function]}
-    onKeyDown={[Function]}
-    onKeyUp={[Function]}
-    onMouseDown={[Function]}
-    onMouseEnter={[Function]}
-    onMouseLeave={[Function]}
-    onMouseUp={[Function]}
-    onTouchCancel={[Function]}
-    onTouchEnd={[Function]}
-    onTouchStart={[Function]}
-    style={
-      {
-        "color": "#1865f2",
-        "cursor": "pointer",
-        "outline": "none",
-        "textDecoration": "none",
-      }
-    }
-    tabIndex={0}
-  >
-    <h4
-      className=""
-      style={
-        {
-          "MozOsxFontSmoothing": "grayscale",
-          "WebkitFontSmoothing": "antialiased",
-          "display": "block",
-          "fontFamily": "Lato, "Noto Sans", sans-serif",
-          "fontSize": 20,
-          "fontWeight": 700,
-          "lineHeight": "24px",
-          "marginBottom": 0,
-          "marginTop": 0,
-        }
-      }
-    >
-      Heading inside a Link element
-    </h4>
-  </a>
-</div>
-`;

package/src/__tests__/generated-snapshot.test.js DELETED Viewed

@@ -1,73 +0,0 @@
-// This file is auto-generated by gen-snapshot-tests.js
-// Do not edit this file.  To make changes to these snapshot tests:
-//   1. edit the markdown documentation files in the package,
-//        packages/wonder-blocks-link
-//   2. Run `yarn run gen-snapshot-tests`.
-import React from "react";
-import renderer from "react-test-renderer";
-// Mock react-dom as jest doesn't like findDOMNode.
-jest.mock("react-dom");
-import Color from "@khanacademy/wonder-blocks-color";
-import {View} from "@khanacademy/wonder-blocks-core";
-import {HeadingSmall} from "@khanacademy/wonder-blocks-typography";
-import Link from "@khanacademy/wonder-blocks-link";
-describe("wonder-blocks-link", () => {
-    it("example 1", () => {
-        const example = (
-            <View>
-                <p>
-                    I am a <Link href="#nonexistent-link">Primary Link</Link>.{" "}
-                    <span
-                        style={{
-                            color: Color.offBlack64,
-                        }}
-                    >
-                        My friend the
-                        <Link
-                            href="#secondary-nonexistent-link"
-                            kind="secondary"
-                        >
-                            Secondary Link
-                        </Link>{" "}
-                        is used here with a lighter text.
-                    </span>{" "}
-                    We also have a
-                    <Link href="#" visitable={true}>
-                        Visitable Primary Link
-                    </Link>{" "}
-                    friend.
-                </p>
-                <p
-                    style={{
-                        backgroundColor: Color.darkBlue,
-                        color: Color.white64,
-                        padding: 10,
-                    }}
-                >
-                    I am a{" "}
-                    <Link href="#dark-link" light={true}>
-                        Primary Link
-                    </Link>{" "}
-                    used on a dark background. My friend the Secondary Link
-                    isn't supported on this dark background.
-                </p>
-            </View>
-        );
-        const tree = renderer.create(example).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-    it("example 2", () => {
-        const example = (
-            <View>
-                <Link href="#nonexistent-link" id="typography-link">
-                    <HeadingSmall>Heading inside a Link element</HeadingSmall>
-                </Link>
-            </View>
-        );
-        const tree = renderer.create(example).toJSON();
-        expect(tree).toMatchSnapshot();
-    });
-});

package/src/components/link.md DELETED Viewed

@@ -1,43 +0,0 @@
-### Example: Link
-```js
-import Color from "@khanacademy/wonder-blocks-color";
-import {View} from "@khanacademy/wonder-blocks-core";
-<View>
-    <p>
-        I am a <Link href="#nonexistent-link">Primary Link</Link>. <span
-        style={{color: Color.offBlack64}}>My friend the
-        <Link href="#secondary-nonexistent-link" kind="secondary">Secondary Link
-        </Link> is used here with a lighter text.</span> We also have a
-        <Link href="#" visitable={true}>Visitable Primary Link</Link> friend.
-    </p>
-    <p style={{backgroundColor: Color.darkBlue, color: Color.white64, padding: 10}}>
-        I am a <Link href="#dark-link" light={true}>Primary Link</Link> used on
-        a dark background. My friend the Secondary Link isn't supported on this
-        dark background.
-    </p>
-</View>
-```
-### Example: Link with Typography element
-You can also use a Typography element instead of plain text.
-```js
-import {HeadingSmall} from "@khanacademy/wonder-blocks-typography";
-import {View} from "@khanacademy/wonder-blocks-core";
-import Link from "@khanacademy/wonder-blocks-link";
-<View>
-    <Link href="#nonexistent-link" id="typography-link">
-        <HeadingSmall>Heading inside a Link element</HeadingSmall>
-    </Link>
-</View>
-```
-### Running callbacks on navigation
-The `onClick`, `beforeNav`, and `safeWithNav` props can be used to run callbacks
-when navigating to the new URL. Which prop to use depends on the use case. See
-the [Button](#section-button) documentation for details.