` component.",
14 | },
15 | },
16 | },
17 | component: Tabs,
18 | };
19 |
20 | const Template = (args, { argTypes }) => ({
21 | props: Object.keys(argTypes),
22 | components: { Tabs, Tab },
23 | template: `
24 | Music content.
25 | Pictures content.
26 | Videos content.
27 | Document content.
28 | `,
29 | });
30 |
31 | export const Default = Template.bind({});
32 | Default.args = {};
33 |
34 | export const Boxed = Template.bind({});
35 | addDescription(
36 | Boxed,
37 | "Set the `boxed` prop to `true` use a different variation."
38 | );
39 | Boxed.args = { boxed: true };
40 |
--------------------------------------------------------------------------------
/src/_deprecated/fonts.js:
--------------------------------------------------------------------------------
1 | // This is the entrypoint for building Fonts.
2 |
3 | import "@/styles/fonts/_index.scss"; // Sass stylesheets, will be compiled
4 |
--------------------------------------------------------------------------------
/src/_deprecated/mixins/branded.js:
--------------------------------------------------------------------------------
1 | export default {
2 | props: {
3 | /**
4 | * _the brand color for the component_
5 | *
6 | * ∈ {`'blue'`, `'forest'`, `'gold'`, `'orange'`, `'tomato'`, `'turquoise'`, `'slate'`}
7 | */
8 | brand: {
9 | type: String,
10 | validator: (val) =>
11 | [
12 | "blue",
13 | "forest",
14 | "gold",
15 | "orange",
16 | "tomato",
17 | "turquoise",
18 | "slate",
19 | ].includes(val),
20 | },
21 | },
22 | computed: {
23 | brandedClasses() {
24 | const classes = [];
25 | if (this.brand) {
26 | classes.push(`${this.brand}-branded`);
27 | }
28 | return classes;
29 | },
30 | },
31 | };
32 |
--------------------------------------------------------------------------------
/src/_deprecated/mixins/circleable.js:
--------------------------------------------------------------------------------
1 | export default {
2 | props: {
3 | /**
4 | * _whether to change the shape of the component into a circle_
5 | */
6 | isCircular: {
7 | type: Boolean,
8 | default: false,
9 | },
10 | },
11 | computed: {
12 | circleableClasses() {
13 | return [
14 | {
15 | circular: this.isCircular,
16 | },
17 | ];
18 | },
19 | },
20 | };
21 |
--------------------------------------------------------------------------------
/src/_deprecated/mixins/indicating.js:
--------------------------------------------------------------------------------
1 | export default {
2 | props: {
3 | /**
4 | * _the state to indicate the component in_
5 | *
6 | * ∈ {`'negative'`, `'positive'`, `'probably'`}
7 | */
8 | indication: {
9 | type: String,
10 | validator: (val) => ["negative", "positive", "probably"].includes(val),
11 | },
12 | },
13 | computed: {
14 | indicatingClasses() {
15 | const classes = [];
16 | if (this.indication) {
17 | classes.push(`${this.indication}-indicating`);
18 | }
19 | return classes;
20 | },
21 | },
22 | };
23 |
--------------------------------------------------------------------------------
/src/_deprecated/mixins/invertible.js:
--------------------------------------------------------------------------------
1 | export default {
2 | props: {
3 | /**
4 | * _whether the component appears on a dark or non-white background_
5 | *
6 | * This essentially negates all greyscale colors.
7 | */
8 | isInverted: {
9 | type: Boolean,
10 | default: false,
11 | },
12 | },
13 | computed: {
14 | invertibleClasses() {
15 | return [
16 | {
17 | inverted: this.isInverted,
18 | },
19 | ];
20 | },
21 | },
22 | };
23 |
--------------------------------------------------------------------------------
/src/_deprecated/mixins/simplified.js:
--------------------------------------------------------------------------------
1 | export default {
2 | props: {
3 | /**
4 | * _the amount of simplicity in the appearance of the component_
5 | *
6 | * ∈ {`'slight'`, `'extreme'`}
7 | */
8 | simplicity: {
9 | type: String,
10 | validator: (val) => ["slight", "extreme"].includes(val),
11 | },
12 | },
13 | computed: {
14 | simplifiedClasses() {
15 | const classes = [];
16 | if (this.simplicity) {
17 | classes.push(`${this.simplicity}ly-simple`);
18 | }
19 | return classes;
20 | },
21 | },
22 | };
23 |
--------------------------------------------------------------------------------
/src/_deprecated/mixins/sized.js:
--------------------------------------------------------------------------------
1 | import { sizes } from "@/utils/values";
2 |
3 | export const sized = {
4 | props: {
5 | size: {
6 | type: String,
7 | default: "normal",
8 | validator(value) {
9 | return sizes.includes(value);
10 | },
11 | },
12 | },
13 | computed: {
14 | sizeClasses() {
15 | const classes = {};
16 | if (this.size) {
17 | classes[this.size] = true;
18 | }
19 | return classes;
20 | },
21 | },
22 | };
23 |
--------------------------------------------------------------------------------
/src/_deprecated/scripts/constants.js:
--------------------------------------------------------------------------------
1 | export const CC_ORG_URL = "https://creativecommons.org";
2 | export const DONATION_URL = "https://creativecommons.org/donate";
3 |
4 | export const CDN_BASE_URL = "https://unpkg.com/@creativecommons/vocabulary";
5 | export const GLOBAL_HEADER_API_URL =
6 | "https://creativecommons.org/wp-json/ccglobal/menu";
7 |
8 | // TODO: Internationalise
9 | export const DONATION_TITLE = "Our work relies on you!";
10 | export const DONATION_DESCRIPTION = "Help us keep the internet free and open.";
11 | export const DONATION_BUTTON_TEXT = "Donate now";
12 | export const NAVIGATION_TAB_TEXT = "Explore CC";
13 | export const VISIT_SITE_BUTTON_TEXT = "Visit site";
14 |
--------------------------------------------------------------------------------
/src/_deprecated/scripts/render.js:
--------------------------------------------------------------------------------
1 | /**
2 | * Create an HTMLElement with the given tag, class and children.
3 | *
4 | * This function is a convenience function to provide a declarative interface
5 | * for generating DOM inside JavaScript.
6 | *
7 | * The extremely terse name `h` comes from Vue.js.
8 | *
9 | * @param {string} tagName - the name of the HTML tag for the element
10 | * @param {Array} classes - a list of classes to apply to the element
11 | * @param {Array} children - an Array of DOM nodes to place inside the element
12 | * @param {function} callbackFn - a function for performing actions on the node
13 | * @return {HTMLElement} the element generated by the function
14 | */
15 | export const h = (tagName, classes = [], children = [], callbackFn = null) => {
16 | const element = document.createElement(tagName);
17 | if (classes) {
18 | element.classList.add(...classes);
19 | }
20 | if (children) {
21 | children.forEach((child) => element.appendChild(child));
22 | }
23 | if (callbackFn) {
24 | callbackFn(element);
25 | }
26 | return element;
27 | };
28 |
--------------------------------------------------------------------------------
/src/_deprecated/scripts/vocabulary.js:
--------------------------------------------------------------------------------
1 | export { createGlobalHeader } from "./global_header";
2 |
--------------------------------------------------------------------------------
/src/_deprecated/stories/meta/contribution.stories.mdx:
--------------------------------------------------------------------------------
1 | import { Meta } from "@storybook/addon-docs/blocks";
2 |
3 |
6 |
7 |
9 |
10 | {" "}
11 |
12 |
13 | Vocabulary is a cohesive design system to unify the web-facing Creative
14 | Commons.
15 |
16 |
17 | {" "}
18 |
19 |
20 |
26 |
28 |
29 |
30 |
31 | This is the Storybook for Vocabulary.
34 |
35 |
36 |
41 |
43 |
--------------------------------------------------------------------------------
/src/_deprecated/stories/meta/wip.stories.mdx:
--------------------------------------------------------------------------------
1 | import { Meta } from "@storybook/addon-docs";
2 |
3 |
20 |
21 | {() => {
22 | // Using Storybook hooks to clean up effects of DOM insertion
23 | useEffect(() => {
24 | // Function body executes for componentDidMount
25 | const globalHeaderInstance = createGlobalHeader();
26 | // Return function executes for componentWillUnmount
27 | return () => {
28 | if (globalHeaderInstance && globalHeaderInstance.element) {
29 | globalHeaderInstance.element.remove();
30 | }
31 | };
32 | });
33 | return header("rgb(237, 89, 47)");
34 | }}
35 |
36 |
37 |
--------------------------------------------------------------------------------
/src/_deprecated/stories/vocabulary/icon_font.stories.mdx:
--------------------------------------------------------------------------------
1 | import {
2 | Meta,
3 | IconItem,
4 | IconGallery,
5 | Story,
6 | } from "@storybook/addon-docs/blocks";
7 | import { figmaConfig } from "@/stories/helpers";
8 |
9 |
14 | body.sb-show-main,
15 | .sbdocs.sbdocs-wrapper {
16 | padding: 0 !important;
17 | }
18 | .sbdocs.sbdocs-content {
19 | max-width: unset;
20 | }
21 | .iframe-holder {
22 | background: url("puff.svg") center center no-repeat;
23 | }
24 |
25 | `,
26 | }}
27 | >
28 |
29 |
30 |
31 |
32 |
37 |
38 |
39 | {`See the Design tab.
`}
46 |
--------------------------------------------------------------------------------
/src/_deprecated/stories/vocabulary/icons.stories.mdx:
--------------------------------------------------------------------------------
1 | import {
2 | Meta,
3 | IconItem,
4 | IconGallery,
5 | Story,
6 | } from "@storybook/addon-docs/blocks";
7 | import { figmaConfig } from "@/stories/helpers";
8 |
9 |
14 | body.sb-show-main,
15 | .sbdocs.sbdocs-wrapper {
16 | padding: 0 !important;
17 | }
18 | .sbdocs.sbdocs-content {
19 | max-width: unset;
20 | }
21 | .iframe-holder {
22 | background: url("puff.svg") center center no-repeat;
23 | }
24 |
25 | `,
26 | }}
27 | >
28 |
29 |
30 |
31 |
32 |
37 |
38 |
39 | {`
46 | See the Design tab.
47 | `}
48 |
--------------------------------------------------------------------------------
/src/_deprecated/styles/fonts/_index.scss:
--------------------------------------------------------------------------------
1 | @import "cc_accidenz_commons";
2 | @import "jetbrains_mono";
3 | @import "roboto_condensed";
4 | @import "source_sans_pro";
5 |
--------------------------------------------------------------------------------
/src/_deprecated/styles/fonts/cc_accidenz_commons.scss:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: "CC Accidenz Commons";
3 | font-style: normal;
4 | font-weight: 500;
5 | src: url("~@/assets/fonts/CCAccidenzCommons-medium.otf") format("opentype");
6 | }
7 |
--------------------------------------------------------------------------------
/src/_deprecated/styles/fonts/font_face.scss:
--------------------------------------------------------------------------------
1 | @mixin contents($font-name, $font-file, $font-weight) {
2 | font-family: $font-name;
3 | font-style: normal;
4 | font-weight: $font-weight;
5 | font-display: swap;
6 | src: url("~@/assets/fonts/" + $font-file + ".woff2") format("woff2"),
7 | url("~@/assets/fonts/" + $font-file + ".woff") format("woff"),
8 | url("~@/assets/fonts/" + $font-file + ".otf") format("opentype");
9 | unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
10 | U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215,
11 | U+FEFF, U+FFFD;
12 | }
13 |
14 | @mixin font_face($font-name, $font-file, $font-weight) {
15 | @font-face {
16 | @include contents($font-name, $font-file, $font-weight);
17 | }
18 | }
19 |
--------------------------------------------------------------------------------
/src/_deprecated/styles/fonts/jetbrains_mono.scss:
--------------------------------------------------------------------------------
1 | @use "font_face";
2 |
3 | @include font_face.font_face("JetBrains Mono", "JetBrainsMono-Regular", 400);
4 |
5 | @include font_face.font_face("JetBrains Mono", "JetBrainsMono-Bold", 700);
6 |
--------------------------------------------------------------------------------
/src/_deprecated/styles/fonts/roboto_condensed.scss:
--------------------------------------------------------------------------------
1 | @use "font_face";
2 |
3 | @include font_face.font_face(
4 | "Roboto Condensed",
5 | "RobotoCondensed-Regular",
6 | 400
7 | );
8 |
9 | @include font_face.font_face("Roboto Condensed", "RobotoCondensed-Bold", 700);
10 |
--------------------------------------------------------------------------------
/src/_deprecated/styles/fonts/source_sans_pro.scss:
--------------------------------------------------------------------------------
1 | @use "font_face";
2 |
3 | @include font_face.font_face("Source Sans Pro", "SourceSansPro-Regular", 400);
4 |
5 | @include font_face.font_face("Source Sans Pro", "SourceSansPro-SemiBold", 600);
6 |
7 | @include font_face.font_face("Source Sans Pro", "SourceSansPro-Bold", 700);
8 |
--------------------------------------------------------------------------------
/src/_deprecated/styles/vocabulary/color_overrides.scss:
--------------------------------------------------------------------------------
1 | $black: $color-black;
2 | $grey-dark: $color-dark-gray;
3 | $grey: $color-gray;
4 | $grey-light: $color-light-gray;
5 | $grey-lighter: $color-lighter-gray;
6 | $white: $color-white;
7 |
8 | $orange: $color-tomato;
9 | $yellow: $color-gold;
10 | $green: $color-forest-green;
11 | $turquoise: $color-dark-turquoise;
12 | $cyan: $color-dark-slate-blue;
13 | $blue: $color-dark-slate-blue;
14 | $red: $color-tomato;
15 |
16 | $primary: $color-tomato;
17 |
18 | $info: $color-dark-info;
19 | $info-dark: $color-dark-info;
20 | $info-light: $color-light-info;
21 |
22 | $success: $color-dark-success;
23 | $success-dark: $color-dark-success;
24 | $success-light: $color-light-success;
25 |
26 | $warning: $color-dark-warning;
27 | $warning-dark: $color-dark-warning;
28 | $warning-light: $color-light-warning;
29 |
30 | $danger: $color-dark-error;
31 | $danger-dark: $color-dark-error;
32 | $danger-light: $color-light-error;
33 |
34 | $link: $color-tomato;
35 | $link-hover: currentColor;
36 | $link-visited: currentColor;
37 |
--------------------------------------------------------------------------------
/src/_deprecated/styles/vocabulary/layout.scss:
--------------------------------------------------------------------------------
1 | $fullhd: 1248px + (2 * $gap);
2 |
3 | @import "~bulma/sass/elements/container.sass";
4 | @import "~bulma/sass/grid/_all.sass";
5 |
--------------------------------------------------------------------------------
/src/_deprecated/styles/vocabulary/mediaQueries.scss:
--------------------------------------------------------------------------------
1 | @mixin responsive($breakpoint) {
2 | @if $breakpoint == phone {
3 | @media only screen and (max-width: 600px) {
4 | @content;
5 | }
6 | }
7 | @if $breakpoint == tab-port {
8 | @media only screen and (max-width: 900px) {
9 | @content;
10 | }
11 | }
12 | @if $breakpoint == tab-land {
13 | @media only screen and (max-width: 1400px) {
14 | @content;
15 | }
16 | }
17 | @if $breakpoint == big-desktop {
18 | @media only screen and (min-width: 1800px) {
19 | @content;
20 | }
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/src/_deprecated/styles/vocabulary/spacing_overrides.scss:
--------------------------------------------------------------------------------
1 | $spacing-values: (
2 | "0": 0,
3 | "smaller": $space-smaller,
4 | "small": $space-small,
5 | "normal": $space-normal,
6 | "big": $space-big,
7 | "bigger": $space-bigger,
8 | "large": $space-large,
9 | "larger": $space-larger,
10 | "xl": $space-xl,
11 | "xxl": $space-xxl,
12 | );
13 | $spacing-shortcuts: (
14 | "margin": "margin-",
15 | "padding": "padding-",
16 | );
17 | $spacing-directions: (
18 | "top": "top",
19 | "right": "right",
20 | "bottom": "bottom",
21 | "left": "left",
22 | );
23 | $spacing-horizontal: "horizontal";
24 | $spacing-vertical: "vertical";
25 |
--------------------------------------------------------------------------------
/src/_deprecated/styles/vocabulary/typography_overrides.scss:
--------------------------------------------------------------------------------
1 | $family-sans-serif: $family-body;
2 | $family-monospace: $family-code;
3 |
4 | $size-1: $font-size-h1;
5 | $size-2: $font-size-h2;
6 | $size-3: $font-size-h3;
7 | $size-4: $font-size-body-bigger; // Same as $font-size-h4
8 | $size-5: $font-size-body-big;
9 | $size-6: $font-size-body-normal;
10 | $size-7: $font-size-caption;
11 |
12 | $family-primary: $family-body;
13 | $family-secondary: $family-heading;
14 |
--------------------------------------------------------------------------------
/src/_deprecated/utils/SlotRenderer/SlotRenderer.md:
--------------------------------------------------------------------------------
1 | For example usage, go through the source code of the components
2 | [Tabbed](#/Layouts/Tabbed) and [Navigation](#/Patterns/Navigation).
3 |
4 | Since the above table does not mention it, `SlotComponent` takes a `default`
5 | slot containing the content to show if the passed component (`component` prop)
6 | does not populate the passed slot (`name` prop).
7 |
--------------------------------------------------------------------------------
/src/_deprecated/utils/addDescription.js:
--------------------------------------------------------------------------------
1 | // Adding a description to a single story is rather convoluted. This helper simplifies the process.
2 | export const addDescription = (Story, desc) => {
3 | // eslint-disable-next-line no-param-reassign
4 | Story.parameters = { docs: { description: { story: desc } } };
5 | };
6 |
--------------------------------------------------------------------------------
/src/_deprecated/utils/addSource.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This function helps set the correct Source code for a Vue component documentation
3 | * @param Story
4 | * @param source {string}
5 | */
6 | export const addSource = (Story, source) => {
7 | // eslint-disable-next-line no-param-reassign
8 | Story.parameters = { docs: { source: { code: source } } };
9 | };
10 |
--------------------------------------------------------------------------------
/src/_deprecated/utils/prettier/prettier.md:
--------------------------------------------------------------------------------
1 | ## Installation
2 |
3 | It is absolutely important to install prettier as a dev dependency for this project
4 |
5 | First, install Prettier locally:
6 |
7 | _with npm_
8 |
9 | ```bash
10 | npm install --save-dev --save-exact prettier
11 | ```
12 |
13 | _with yarn_
14 |
15 | ```bash
16 | yarn: yarn add --dev --exact prettier
17 | ```
18 |
19 | Instailling with `npm` is lightweight, tweakable and much more performant as the code runs very close to the operating system.
20 |
21 | #### Formatting with Prettier
22 |
23 | Now, you can go ahead and format all files with Prettier:
24 |
25 | ```bash
26 | npx prettier --write .
27 | ```
28 |
29 | If you want to format just a particular directory, You may run
30 |
31 | ```bash
32 | prettier --write src/footer
33 | ```
34 |
35 | or if you want to format a particular file
36 |
37 | ```bash
38 | prettier --write src/components/buttons/button.scss
39 | ```
40 |
41 | ## Ignoring Files
42 |
43 | Create a .prettierignore file to let the Prettier CLI and editors know which files to not format.
44 | You can base your .prettierignore on the existing .gitignore file
45 |
--------------------------------------------------------------------------------
/src/_deprecated/utils/values.js:
--------------------------------------------------------------------------------
1 | /**
2 | * This file is just a temporary measure until we figure out a better way
3 | * to structure tokens for vocabulary, and things are more consistent across components.
4 | */
5 | export const sizes = ["tiny", "small", "medium", "normal", "big"];
6 | export const theme = ["primary", "success", "info", "text"];
7 |
--------------------------------------------------------------------------------
/src/_deprecated/vocabulary.js:
--------------------------------------------------------------------------------
1 | // This is the entrypoint for building Vocabulary.
2 |
3 | import "./styles/vocabulary/_index.scss"; // Sass stylesheets, will be compiled
4 |
5 | export { iconGroups } from "@/components/icons/icons";
6 |
--------------------------------------------------------------------------------
/src/_deprecated/vue_vocabulary.js:
--------------------------------------------------------------------------------
1 | // This is the entrypoint for building Vue Vocabulary.
2 |
--------------------------------------------------------------------------------
/src/assets/cclogo-shared-image.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cc-archive/vocabulary-legacy/6c4328527746bd0c36db0c51a3525e50bc3a3197/src/assets/cclogo-shared-image.jpg
--------------------------------------------------------------------------------
/src/assets/demo/broadway_tower.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cc-archive/vocabulary-legacy/6c4328527746bd0c36db0c51a3525e50bc3a3197/src/assets/demo/broadway_tower.jpg
--------------------------------------------------------------------------------
/src/assets/demo/left_index.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cc-archive/vocabulary-legacy/6c4328527746bd0c36db0c51a3525e50bc3a3197/src/assets/demo/left_index.png
--------------------------------------------------------------------------------
/src/assets/demo/lion_dafrique.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cc-archive/vocabulary-legacy/6c4328527746bd0c36db0c51a3525e50bc3a3197/src/assets/demo/lion_dafrique.jpg
--------------------------------------------------------------------------------
/src/assets/demo/show_code.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cc-archive/vocabulary-legacy/6c4328527746bd0c36db0c51a3525e50bc3a3197/src/assets/demo/show_code.png
--------------------------------------------------------------------------------
/src/assets/demo/tab_content.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cc-archive/vocabulary-legacy/6c4328527746bd0c36db0c51a3525e50bc3a3197/src/assets/demo/tab_content.png
--------------------------------------------------------------------------------
/src/assets/icons/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cc-archive/vocabulary-legacy/6c4328527746bd0c36db0c51a3525e50bc3a3197/src/assets/icons/favicon.png
--------------------------------------------------------------------------------
/src/assets/titlecard.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cc-archive/vocabulary-legacy/6c4328527746bd0c36db0c51a3525e50bc3a3197/src/assets/titlecard.png
--------------------------------------------------------------------------------
/src/fonts/assets/cclogo-shared-image.jpg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cc-archive/vocabulary-legacy/6c4328527746bd0c36db0c51a3525e50bc3a3197/src/fonts/assets/cclogo-shared-image.jpg
--------------------------------------------------------------------------------
/src/fonts/assets/guide/app_button.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cc-archive/vocabulary-legacy/6c4328527746bd0c36db0c51a3525e50bc3a3197/src/fonts/assets/guide/app_button.png
--------------------------------------------------------------------------------
/src/fonts/assets/guide/directory.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cc-archive/vocabulary-legacy/6c4328527746bd0c36db0c51a3525e50bc3a3197/src/fonts/assets/guide/directory.png
--------------------------------------------------------------------------------
/src/fonts/assets/guide/flag.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cc-archive/vocabulary-legacy/6c4328527746bd0c36db0c51a3525e50bc3a3197/src/fonts/assets/guide/flag.png
--------------------------------------------------------------------------------
/src/fonts/assets/guide/generate_font.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cc-archive/vocabulary-legacy/6c4328527746bd0c36db0c51a3525e50bc3a3197/src/fonts/assets/guide/generate_font.png
--------------------------------------------------------------------------------
/src/fonts/assets/guide/generate_json.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cc-archive/vocabulary-legacy/6c4328527746bd0c36db0c51a3525e50bc3a3197/src/fonts/assets/guide/generate_json.png
--------------------------------------------------------------------------------
/src/fonts/assets/guide/import_icons.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cc-archive/vocabulary-legacy/6c4328527746bd0c36db0c51a3525e50bc3a3197/src/fonts/assets/guide/import_icons.png
--------------------------------------------------------------------------------
/src/fonts/assets/guide/import_project.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cc-archive/vocabulary-legacy/6c4328527746bd0c36db0c51a3525e50bc3a3197/src/fonts/assets/guide/import_project.png
--------------------------------------------------------------------------------
/src/fonts/assets/guide/import_to_set.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cc-archive/vocabulary-legacy/6c4328527746bd0c36db0c51a3525e50bc3a3197/src/fonts/assets/guide/import_to_set.png
--------------------------------------------------------------------------------
/src/fonts/assets/guide/projects_untitled.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cc-archive/vocabulary-legacy/6c4328527746bd0c36db0c51a3525e50bc3a3197/src/fonts/assets/guide/projects_untitled.png
--------------------------------------------------------------------------------
/src/fonts/assets/guide/projects_vocabulary.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cc-archive/vocabulary-legacy/6c4328527746bd0c36db0c51a3525e50bc3a3197/src/fonts/assets/guide/projects_vocabulary.png
--------------------------------------------------------------------------------
/src/fonts/assets/guide/selection.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cc-archive/vocabulary-legacy/6c4328527746bd0c36db0c51a3525e50bc3a3197/src/fonts/assets/guide/selection.png
--------------------------------------------------------------------------------
/src/fonts/assets/guide/toolbar.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cc-archive/vocabulary-legacy/6c4328527746bd0c36db0c51a3525e50bc3a3197/src/fonts/assets/guide/toolbar.png
--------------------------------------------------------------------------------
/src/fonts/assets/guide/untitled_project.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cc-archive/vocabulary-legacy/6c4328527746bd0c36db0c51a3525e50bc3a3197/src/fonts/assets/guide/untitled_project.png
--------------------------------------------------------------------------------
/src/fonts/assets/guide/vocabulary_icons.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cc-archive/vocabulary-legacy/6c4328527746bd0c36db0c51a3525e50bc3a3197/src/fonts/assets/guide/vocabulary_icons.png
--------------------------------------------------------------------------------
/src/fonts/assets/icons/favicon.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/cc-archive/vocabulary-legacy/6c4328527746bd0c36db0c51a3525e50bc3a3197/src/fonts/assets/icons/favicon.png
--------------------------------------------------------------------------------
/src/fonts/assets/svg/arrows/angle-down.svg:
--------------------------------------------------------------------------------
1 |
2 |
3 | ${['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'I'].map((char) => `${char} `).join('')}
4 |
5 |
6 | ${['J', 'K', 'L', 'M', 'N', 'O', 'P', 'Q', 'R'].map((char) => `${char} `).join('')}
7 |
8 |
9 | ${['S', 'T', 'U', 'V', 'W', 'X', 'Y', 'Z'].map((char) => `${char} `).join('')}
10 |
11 |
`
12 |
13 | export const numberTable = () => `
14 |
15 | ${[0, 1, 2, 3, 4].map((num) => `${num} `).join('')}
16 |
17 |
18 | ${[5, 6, 7, 8, 9].map((num) => `${num} `).join('')}
19 |
20 |
`
21 |
22 | export const sampleTexts = [
23 | 'The quick brown fox jumps over the lazy dog.',
24 | 'Playing jazz vibe chords quickly excites my wife.',
25 | 'Crazy Fredrick bought many very exquisite opal jewels.',
26 | 'We promptly judged antique ivory buckles for the next prize.',
27 | 'Sixty zippers were quickly picked from the woven jute bag.'
28 | ]
29 |
--------------------------------------------------------------------------------
/src/fonts/stories/icon-gallery/icon-item.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 |
3 | export const IconItem = ({ iconSvg, iconClass }) => {
4 | return (
5 |
6 | )
7 | }
8 |
--------------------------------------------------------------------------------
/src/fonts/stories/icon-gallery/icon-set.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { IconWrapper } from './icon-wrapper'
3 |
4 | const defaultDisplayNameGetter = (iconName) => iconName
5 | const defaultCopyValueGetter = (iconName) => `${iconName}.svg`
6 |
7 | export function IconSet ({
8 | icons,
9 | getDisplayName = defaultDisplayNameGetter,
10 | getCopyValue = defaultCopyValueGetter,
11 | iconClass = ''
12 | }) {
13 | const context = {
14 | getDisplayName,
15 | getCopyValue,
16 | iconClass
17 | }
18 | return (
19 |
20 | { icons && icons.map((icon) => (
21 |
22 | ))
23 | }
24 |
25 | )
26 | }
27 |
--------------------------------------------------------------------------------
/src/fonts/stories/icon-gallery/icon-wrapper.jsx:
--------------------------------------------------------------------------------
1 | import React from 'react'
2 | import { IconControls } from './icon-controls'
3 | import { IconItem } from './icon-item'
4 | import { iconFiles } from '../../assets/svg'
5 |
6 | const getIconSvgString = (name) => {
7 | console.log('name: ', name, 'iconFiles:', iconFiles)
8 | return iconFiles[name]
9 | }
10 |
11 | export const IconWrapper = ({ iconName, context }) => {
12 | const { getDisplayName, getCopyValue, iconClass } = context
13 | const displayName = getDisplayName(iconName)
14 | const copyValue = getCopyValue(iconName)
15 | const iconSvg = getIconSvgString(iconName)
16 |
17 | return (
18 |
19 |
20 |
23 |
{displayName}
24 |
10 |
16 |
17 | `;
18 |
19 | The Breadcrumb has two text styles: links to parent pages and the page the user is seeing. The parent links should be corresponding to the site map defined. At the same time, the color used for links should be the main color for links across the site.
20 |
21 | For accessibility purposes, the component should be placed above the page's title.
22 |
23 |
24 |
30 | {htmlWrapper(breadCrumb()).bind({})}
31 |
32 |
33 |
--------------------------------------------------------------------------------
/src/stories/combined_header.stories.mdx:
--------------------------------------------------------------------------------
1 | import { useEffect } from '@storybook/client-api'
2 | import { Meta, Preview, Story } from '@storybook/addon-docs/blocks'
3 | import { createGlobalHeader } from '../scripts/global_header'
4 | import { header } from './helpers'
5 |
6 |
17 | {() => {
18 | // Using Storybook hooks to clean up effects of DOM insertion
19 | useEffect(() => {
20 | // Function body executes for componentDidMount
21 | const globalHeaderInstance = createGlobalHeader()
22 | // Return function executes for componentWillUnmount
23 | return () => {
24 | if (globalHeaderInstance && globalHeaderInstance.element) {
25 | globalHeaderInstance.element.remove()
26 | }
27 | }
28 | })
29 | return header('rgb(237, 89, 47)')
30 | }}
31 |
32 |
--------------------------------------------------------------------------------
/src/stories/global_header.stories.mdx:
--------------------------------------------------------------------------------
1 | import { useEffect } from '@storybook/client-api'
2 | import { Meta, Preview, Story } from '@storybook/addon-docs/blocks'
3 | import { createGlobalHeader } from '../scripts/global_header'
4 |
5 |
16 | {() => {
17 | // Using Storybook hooks to clean up effects of DOM insertion
18 | useEffect(() => {
19 | // Function body executes for componentDidMount
20 | const globalHeaderInstance = createGlobalHeader()
21 | // Return function executes for componentWillUnmount
22 | return () => {
23 | if (globalHeaderInstance && globalHeaderInstance.element) {
24 | globalHeaderInstance.element.remove()
25 | }
26 | }
27 | })
28 | return '
'
29 | }}
30 |
31 |
--------------------------------------------------------------------------------
/src/stories/icon_font.stories.mdx:
--------------------------------------------------------------------------------
1 | import { Meta, IconItem, IconGallery, Story } from '@storybook/addon-docs/blocks'
2 | import { figmaConfig } from './helpers'
3 |
4 |
7 | body.sb-show-main,
8 | .sbdocs.sbdocs-wrapper {
9 | padding: 0 !important;
10 | }
11 | .sbdocs.sbdocs-content {
12 | max-width: unset;
13 | }
14 | .iframe-holder {
15 | background: url("puff.svg") center center no-repeat;
16 | }
17 |
18 | `
19 | }}>
20 |
21 |
22 |
23 |
27 |
28 |
29 | {`
33 | See the Design tab.
34 | `}
35 |
--------------------------------------------------------------------------------
/src/stories/icons.stories.mdx:
--------------------------------------------------------------------------------
1 | import { Meta, IconItem, IconGallery, Story } from '@storybook/addon-docs/blocks'
2 | import { figmaConfig } from './helpers'
3 |
4 |
7 | body.sb-show-main,
8 | .sbdocs.sbdocs-wrapper {
9 | padding: 0 !important;
10 | }
11 | .sbdocs.sbdocs-content {
12 | max-width: unset;
13 | }
14 | .iframe-holder {
15 | background: url("puff.svg") center center no-repeat;
16 | }
17 |
18 | `
19 | }}>
20 |
21 |
22 |
23 |
27 |
28 |
29 | {`
33 | See the Design tab.
34 | `}
35 |
--------------------------------------------------------------------------------
/src/stories/locale.stories.mdx:
--------------------------------------------------------------------------------
1 | import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";
2 | import { figmaConfig } from "@/stories/helpers";
3 |
4 |
13 | {`
20 |
21 | Languages available
22 |
23 |
24 |
25 | Select
26 | English
27 | le Français
28 | 日本語
29 | Русский
30 | Español
31 |
32 |
33 |
34 | locale
35 |
36 |
37 |
39 |
40 |
--------------------------------------------------------------------------------
/src/stories/radio.stories.mdx:
--------------------------------------------------------------------------------
1 | import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";
2 | import { figmaConfig, htmlWrapper } from "@/stories/helpers";
3 |
4 | Radio buttons
9 |
10 |
11 | Default Option
13 |
14 | Checked Option
16 | Disabled Option
19 |
`;
21 |
22 |
23 |
30 | {htmlWrapper(radioDiv()).bind({})}
31 |
32 |
33 |
--------------------------------------------------------------------------------
/src/stories/select.stories.mdx:
--------------------------------------------------------------------------------
1 | import { Meta, Story, Canvas } from "@storybook/addon-docs/blocks";
2 | import { figmaConfig, htmlWrapper } from "@/stories/helpers";
3 |
4 |
10 |
11 | Select
12 | Option A
13 | Option B
14 |
15 |
16 |
18 |
19 | Select
20 | Option A
21 | Option B
22 |
23 |
24 |
26 |
27 | Select
28 | Option A
29 | Option B
30 |
31 |
`;
32 |
33 |
34 |
41 | {htmlWrapper(selectDiv()).bind({})}
42 |
43 |
44 |
--------------------------------------------------------------------------------
/src/stories/textarea.stories.mdx:
--------------------------------------------------------------------------------
1 | import { Meta, Story, Preview } from '@storybook/addon-docs/blocks'
2 | import { figmaConfig } from './helpers'
3 |
4 |
17 | {
20 | textArea()
21 | }
22 |
23 |
--------------------------------------------------------------------------------
/tests/unit/__snapshots__/VCheckbox.spec.js.snap:
--------------------------------------------------------------------------------
1 | // Jest Snapshot v1, https://goo.gl/fbAQLP
2 |
3 | exports[`VCheckbox matches snapshot 1`] = `Default Checkbox 
42 |
43 |
--------------------------------------------------------------------------------
/src/_deprecated/stories/meta/wip.stories.mdx:
--------------------------------------------------------------------------------
1 | import { Meta } from "@storybook/addon-docs";
2 |
3 |
4 |
5 | # 🚧 Vocabulary
6 |
7 | Coming soon...
8 |
--------------------------------------------------------------------------------
/src/_deprecated/stories/vocabulary/combined_header.stories.mdx:
--------------------------------------------------------------------------------
1 | import { useEffect } from "@storybook/client-api";
2 | import { Meta, Canvas, Story } from "@storybook/addon-docs/blocks";
3 | import { createGlobalHeader } from "@/scripts/global_header";
4 | import { header } from "@/stories/helpers";
5 |
6 |
11 | `${storyFn()}`,
12 | ],
13 | }}
14 | />
15 |
16 | export const globalHeader =
17 | "const globalHeaderInstance = vocabulary.createGlobalHeader()";
18 |
19 |
37 |
--------------------------------------------------------------------------------
/src/_deprecated/stories/vocabulary/icon_font.stories.mdx:
--------------------------------------------------------------------------------
1 | import {
2 | Meta,
3 | IconItem,
4 | IconGallery,
5 | Story,
6 | } from "@storybook/addon-docs/blocks";
7 | import { figmaConfig } from "@/stories/helpers";
8 |
9 |
10 |
11 |