resolve conflict

packages/vital-elements/src/components/Typography/index.ts

@@ -13,3 +13,4 @@
  */
 
 export { default as vitalTypography } from './tokens';
+export { TypographyMeta } from './meta';

packages/vital-elements/src/components/Typography/meta.ts

@@ -0,0 +1,20 @@
+/**
+ * Copyright © 2023 Johnson & Johnson
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const TypographyMeta = {
+  categories: {
+    Type: ['Element'],
+    Group: ['Typography'],
+  },
+};

packages/vital-elements/src/components/Typography/tokens/vitalTypography.ts

@@ -17,13 +17,7 @@ import { asElementToken } from '../../../util';
 import { vitalColor } from '../../Color';
 import { vitalFontSize } from '../../FontSize';
 import { vitalTextDecoration } from '../../TextDecoration';
-
-const meta = {
-  categories: {
-    Type: ['Element'],
-    Group: ['Typography'],
-  },
-};
+import { TypographyMeta } from '../meta';
 
 const Link = asElementToken({
   Theme: {
@@ -33,7 +27,7 @@ const Link = asElementToken({
       vitalColor.TextPrimaryInteractive,
     ),
   },
-  Meta: meta,
+  Meta: TypographyMeta,
 });
 
 const H1 = asElementToken({
@@ -54,7 +48,7 @@ const H1 = asElementToken({
   Spacing: {
     _: 'mt-10 mb-5 lg:mb-6',
   },
-  Meta: meta,
+  Meta: TypographyMeta,
 });
 
 const H2 = asElementToken({
@@ -75,7 +69,7 @@ const H2 = asElementToken({
   Spacing: {
     _: 'mb-5',
   },
-  Meta: meta,
+  Meta: TypographyMeta,
 });
 
 const H3 = asElementToken({
@@ -96,7 +90,7 @@ const H3 = asElementToken({
   Spacing: {
     _: 'mb-5',
   },
-  Meta: meta,
+  Meta: TypographyMeta,
 });
 
 const H4 = asElementToken({
@@ -137,13 +131,17 @@ const H5 = asElementToken({
   Spacing: {
     _: 'mb-5 lg:mb-4.5',
   },
-  Meta: meta,
+  Meta: TypographyMeta,
 });
 
-const HeaderLink = as(
-  vitalColor.TextPrimaryInteractive,
-  vitalTextDecoration.Underline,
-);
+const HeaderLink = asElementToken({
+  Theme: {
+    _: as(
+      vitalColor.TextPrimaryInteractive,
+      vitalTextDecoration.Underline,
+    )
+  }
+});
 
 const Body = asElementToken({
   Core: {
@@ -158,7 +156,7 @@ const Body = asElementToken({
   Spacing: {
     _: 'mb-6',
   },
-  Meta: meta,
+  Meta: TypographyMeta,
 });
 
 const Eyebrow = asElementToken({
@@ -193,7 +191,7 @@ const Rest = asElementToken({
       vitalColor.TextPrimaryBodyCopy,
     ),
   },
-  Meta: meta,
+  Meta: TypographyMeta,
 });
 
 // Variant testing autoprefixer
@@ -205,7 +203,7 @@ const Gradient = asElementToken({
     _: as('bg-clip-text text-transparent bg-gradient-to-r',
       'from-vital-secondary-eyebrow via-vital-primary-interactive to-vital-secondary-eyebrow',),
   },
-  Meta: meta,
+  Meta: TypographyMeta,
 });
 
 export default {

packages/vital-elements/src/util/index.ts

@@ -14,3 +14,4 @@
 
 export * from './tokenSpec';
 export * from './testing';
+export * from './shadow';

packages/vital-elements/src/util/shadow.ts

@@ -0,0 +1,15 @@
+/**
+ * Copyright © 2023 Johnson & Johnson
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const shadow = (component: any, ...rest: any) => component;

packages/vital-examples/package.json

@@ -35,6 +35,7 @@
   },
   "dependencies": {
     "@bodiless/cli": "^1.0.0-rc.38",
+    "@bodiless/core": "^1.0.0-rc.38",
     "@bodiless/data": "^1.0.0-rc.38",
     "@bodiless/fclasses": "^1.0.0-rc.38",
     "@bodiless/i18n": "^1.0.0-rc.38",
@@ -53,6 +54,9 @@
     "@bodiless/vital-table": "^1.0.0-rc.38",
     "@bodiless/vital-templates": "^1.0.0-rc.38",
     "@bodiless/vital-youtube": "^1.0.0-rc.38",
+    "@bodiless/layouts": "^1.0.0-rc.38",
+    "@bodiless/layouts-ui": "^1.0.0-rc.38",
+    "@bodiless/vital-content-listing": "^1.0.0-rc.38",
     "@bodiless/vital-section": "^1.0.0-rc.38",
     "lodash": "^4.17.19",
     "tailwindcss": "^3.0.23"

packages/vital-examples/src/customizing-design-tokens/README.md

@@ -0,0 +1,97 @@
+# Learn how to Customize Design Tokens
+
+In this lesson we will learn how to shadow the design elements, these are the base elements for customizing a website, in it we will define colors, fonts, typography and the like.
+
+## Overview
+
+In this lesson we will:
+
+- Shadow the vital colors with [this palette](https://coolors.co/ccfbfe-cdd6dd-cdcacc-cdaca1-cd8987).
+- Shadow vital text decoration to customize the font weight
+- Shadow H1 and H2 element tokens to use our custom font and it's properties.
+
+
+## Assignment
+
+First, we'll need to edit the `tailwind.config.js` file to add the custom variable, colors, font and sizes for examples. You can follow [the naming convention from tailwind](https://tailwindcss.com/docs/customizing-colors#naming-your-colors).
+Note that we use the `vital-` prefix to define our colors, our tailwind file will look like this
+
+#### `tailwind.config.js`
+```js
+module.exports = {
+  theme: {
+    colors: {
+        'vital-primary': {
+            brand: '<COLOR>',
+            // ...
+        },
+        // ...
+    }
+  }
+}
+```
+**PS:** With this, the colors should be already overrided.
+You can find all vital colors [in here](https://github.com/johnsonandjohnson/Bodiless-JS/blob/main/packages/vital-elements/src/components/Color/tokens/vitalColor.ts).
+
+Then under the `src/component` folder, we'll create the files with the Components names, in our case, we'll override the `Typography` and `TextDecoration`, so we create theses files.
+
+### Components
+
+For the sake of this example, we will two components, which extends the vital components, `TextDecoration` and `Typography` and define our custom tokens, and to shadow them, we'll just export them.
+
+#### TextDecoration
+
+The `TextDecoration` class is easier to do, since we just export some tokens with only a class for each tokens, our file will look like this.
+
+##### `src/component/TextDecoration/tokens/exampleTextDecoration.ts`
+```ts
+import { asTokenGroup, TextDecorationMeta } from '@bodiless/vital-elements';
+import { vitalTextDecorationBase } from '@bodiless/vital-elements/src/base';
+
+export default asTokenGroup(TextDecorationMeta)({
+  ...vitalTextDecorationBase,
+  Bold: 'font-black',
+});
+
+```
+
+**PS:** the `asTokenGroup` function creates a group of element tokens that share the same metadata, you can find more information about the Meta domain [here](https://johnsonandjohnson.github.io/Bodiless-JS/#/VitalDesignSystem/Components/VitalElements/Tokens/TokenDomains?id=special-domains).
+
+In this example we overwrite the the `Bold` token to set a bolder font.
+
+#### Typography
+
+For the typography, we will have to do some more work, each typography element should be a instance of `asElementToken`, so we can rely on Domains to help us to define our tokens. Our typography file will be something like this.
+
+##### `src/component/TextDecoration/tokens/exampleTypography.ts`
+```ts
+import { asElementToken, vitalColor, vitalFontSize, vitalTextDecoration } from '@bodiless/vital-elements';
+import { vitalTypographyBase } from '@bodiless/vital-elements/src/base';
+
+const H2 = asElementToken({
+  ...vitalTypographyBase.H2,
+  Core: {
+    _: as(vitalTextDecoration.ExtraBold, vitalFontSize.XXL)
+  }
+});
+```
+
+In this example, we created a custom H1 and H2 Tokens and exporting them with the vital typography base. So our package have all the vital tokens.
+
+### Shadowing
+
+And now, to shadow the our tokens, create a file with the same path of the package, in out case, since we area shadowing the `@bodiles/vital-elements` package, we'll have this structure.
+
+```bash
+├── shadow
+│   ├── @bodiless
+│   │   ├── vital-elements
+│   │   |   ├─ Typography.ts
+│   │   |   └─ TextDecoration.ts
+```
+
+Where each file export the tokens from the components folder.
+
+## Practice
+
+Now you can try to create you own shadow files, try to customize some vital text decorations tokens, or even create a new typography token.

packages/vital-examples/src/customizing-design-tokens/base/index.ts

@@ -0,0 +1,5 @@
+// We must export the token collection directly from the module in which
+// it is defined, not from /tokens. This verison of the token will never
+// be shadowed.
+export { default as exampleTextDecorationBase } from '../components/TextDecoration/tokens/exampleTextDecoration';
+export { default as exampleTypographyBase } from '../components/Typography/tokens/exampleTypography';

packages/vital-examples/src/customizing-design-tokens/components/TextDecoration/__tests__/TextDecoration.test.tsx

@@ -0,0 +1,8 @@
+/* eslint-disable jest/valid-describe */
+import { Span, TokenCollection } from '@bodiless/fclasses';
+import { DefaultDomains, testTokens } from '@bodiless/vital-elements';
+import { exampleTextDecoration } from '..';
+
+// @todo Fix type matching on text decoration token collection.
+const tokenCollection = exampleTextDecoration as any as TokenCollection<any, DefaultDomains>;
+describe('TextDecoration', testTokens(Span, tokenCollection));

packages/vital-examples/src/customizing-design-tokens/components/TextDecoration/__tests__/__snapshots__/TextDecoration.test.tsx.snap

@@ -0,0 +1,43 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`TextDecoration Matches snapshot for Bold 1`] = `
+<span
+  className="font-black"
+/>
+`;
+
+exports[`TextDecoration Matches snapshot for ExtraBold 1`] = `
+<span
+  className="font-extrabold"
+/>
+`;
+
+exports[`TextDecoration Matches snapshot for Medium 1`] = `
+<span
+  className="font-medium"
+/>
+`;
+
+exports[`TextDecoration Matches snapshot for Normal 1`] = `
+<span
+  className="font-normal"
+/>
+`;
+
+exports[`TextDecoration Matches snapshot for Superscript 1`] = `
+<span
+  className="align-baseline"
+/>
+`;
+
+exports[`TextDecoration Matches snapshot for Underline 1`] = `
+<span
+  className="underline"
+/>
+`;
+
+exports[`TextDecoration Matches snapshot for Uppercase 1`] = `
+<span
+  className="uppercase"
+/>
+`;

packages/vital-examples/src/customizing-design-tokens/components/TextDecoration/index.ts

@@ -0,0 +1 @@
+export { default as exampleTextDecoration } from './tokens';

packages/vital-examples/src/customizing-design-tokens/components/TextDecoration/tokens/exampleTextDecoration.ts

@@ -0,0 +1,8 @@
+import { asTokenGroup, TextDecorationMeta } from '@bodiless/vital-elements';
+import { vitalTextDecorationBase } from '@bodiless/vital-elements/src/base';
+
+// Here we use `asTokenGroup` to share the TextDecorationMeta among all tokens exported.
+export default asTokenGroup(TextDecorationMeta)({
+  ...vitalTextDecorationBase,
+  Bold: 'font-black',
+});

packages/vital-examples/src/customizing-design-tokens/components/TextDecoration/tokens/index.ts

@@ -0,0 +1,3 @@
+import tokens from './exampleTextDecoration';
+
+export default tokens;

packages/vital-examples/src/customizing-design-tokens/components/Typography/__tests__/Typography.test.tsx

@@ -0,0 +1,6 @@
+/* eslint-disable jest/valid-describe */
+import { Span } from '@bodiless/fclasses';
+import { testTokens } from '@bodiless/vital-elements';
+import { exampleTypography } from '..';
+
+describe('Typography', testTokens(Span, exampleTypography));