@terrahq/wysiwyg 1.0.0

package/src/scss/global-content/_wordpress.scss

@@ -0,0 +1,233 @@
+@use "sass:map";
+@use "sass:list";
+//* Global Mixins
+@forward "./_global-mixins/blocks/content";
+@use "./_global-mixins/blocks/content" as *;
+@use "./_global-mixins/properties/custom" as *;
+
+$wysiwyg-measure: .5rem;
+
+@mixin make-content($btn-options: ()) {
+  //* btn
+
+  //* columns
+  @include block-columns-wp();
+
+  //* footnote
+
+  //* highlighted
+
+  //* image
+  @include block-image-wp();
+
+  //* quote
+  @include block-quote-wp();
+
+  //* separator
+  @include block-separator-wp();
+
+  //* headings
+
+  //* link
+
+  //* paragraphs
+  @include paragraphs-wysiwyg();
+
+  //* lists
+  @include lists-wysiwyg-wp();
+
+  //* video
+  @include block-video-wp();
+
+  //* table
+  @include block-table-wp();
+
+  //* utilities
+  @include utilities-wp();
+
+  & > h1:first-child,
+  & > h2:first-child,
+  & > h3:first-child,
+  & > h4:first-child,
+  & > h5:first-child,
+  & > h6:first-child,
+  & > p:first-child {
+    padding-top: 0 !important;
+  }
+  & > *:last-child {
+    margin-bottom: 0 !important;
+  }
+}
+
+@mixin make-content-modifier(
+  $btn-options: (),
+  $columns-options: (),
+  $footnote-options: (),
+  $highlighted-options: (),
+  $image-options: (),
+  $quote-options: (),
+  $separator-options: (),
+  $headings-options: (),
+  $link-options: (),
+  $paragraphs-options: (),
+  $lists-options: (),
+  $video-options: (),
+  $table-options: (),
+  $utilities-options: (),
+  $custom-options: ()
+) {
+  //* btn
+  @include block-btn-wp-modifier($options: $btn-options);
+  @if list.length(map.keys($btn-options)) > 0 {
+    @if map.get($btn-options, "margin-bottom") == null {
+      .wp-block-buttons,
+      .wp-block-button {
+        margin-bottom: $wysiwyg-measure * 4;
+      }
+    }
+  }
+
+  //* columns
+  @include block-columns-wp-modifier($options: $columns-options);
+  @if list.length(map.keys($columns-options)) > 0 {
+    @if map.get($columns-options, "margin-bottom") == null {
+      .wp-block-columns {
+        margin-bottom: $wysiwyg-measure * 4;
+      }
+    }
+    @if map.get($columns-options, "breakpoint") == null {
+      .wp-block-columns {
+        .wp-block-column {
+          @media all and ($viewport-type: $tablets) {
+            flex-basis: 100% !important;
+            flex-wrap: wrap !important;
+          }
+        }
+      }
+    }
+  }
+
+  //* footnote
+  @include block-footnote-wp-modifier($options: $footnote-options);
+  @if list.length(map.keys($footnote-options)) > 0 {
+    @if map.get($footnote-options, "margin-bottom") == null {
+      .footnote {
+        margin-bottom: $wysiwyg-measure * 2;
+      }
+    }
+  }
+
+  //* highlighted
+  @include block-highlighted-wp-modifier($options: $highlighted-options);
+  @if list.length(map.keys($highlighted-options)) > 0 {
+    @if map.get($highlighted-options, "margin-bottom") == null {
+      .highlighted {
+        margin-bottom: $wysiwyg-measure * 4;
+      }
+    }
+  }
+
+  //* image
+  @include block-image-wp-modifier($options: $image-options);
+  @if list.length(map.keys($image-options)) > 0 {
+    @if map.get($image-options, "margin-bottom") == null {
+      figure.wp-block-image {
+        margin-bottom: $wysiwyg-measure * 5;
+      }
+      div.wp-block-image {
+        figure {
+          margin-bottom: $wysiwyg-measure * 5;
+        }
+      }
+      *[class^="wp-block"] {
+        img {
+          margin-bottom: $wysiwyg-measure * 5;
+        }
+      }
+      > p {
+        > img {
+          margin-bottom: $wysiwyg-measure * 5;
+        }
+      }
+    }
+  }
+
+  //* quote
+  @include block-quote-wp-modifier($options: $quote-options);
+  @if list.length(map.keys($quote-options)) > 0 {
+    @if map.get($quote-options, "padding") == null {
+      .wp-block-quote,
+      blockquote {
+        padding: $wysiwyg-measure * 3 0;
+      }
+    }
+    @if map.get($quote-options, "margin-top") == null {
+      .wp-block-quote,
+      blockquote {
+        margin-top: $wysiwyg-measure * 5;
+      }
+    }
+    @if map.get($quote-options, "margin-bottom") == null {
+      .wp-block-quote,
+      blockquote {
+        margin-top: $wysiwyg-measure * 6;
+      }
+    }
+    @if map.get($quote-options, "cite") == null {
+      cite {
+        margin-top: $wysiwyg-measure * 3;
+      }
+    }
+  }
+
+  //* separator
+  @include block-separator-wp-modifier($options: $separator-options);
+  @if list.length(map.keys($separator-options)) > 0 {
+    @if map.get($separator-options, "margin") == null {
+      .wp-block-separator {
+        margin: $wysiwyg-measure * 6 0;
+      }
+    }
+  }
+
+  //* headings
+  @include headings-wp-modifier($options: $headings-options);
+
+  //* link
+  @include block-link-wysiwyg-modifier($options: $link-options);
+
+  //* paragraphs
+  @include paragraphs-wysiwyg-wp-modifier($options: $paragraphs-options);
+
+  //* lists
+  @include lists-wysiwyg-wp-modifier($options: $lists-options);
+
+  //* video
+  @include block-video-wp-modifier($options: $video-options);
+  @if list.length(map.keys($video-options)) > 0 {
+    @if map.get($video-options, "margin-bottom") == null {
+      .wp-block-embed {
+        margin-bottom: $wysiwyg-measure * 5;
+      }
+    }
+  }
+
+  //* table
+  @include block-table-wp-modifier($options: $table-options);
+
+  //* utilities
+  @include utilities-wp-modifier($options: $utilities-options);
+  @if list.length(map.keys($utilities-options)) > 0 {
+    @if map.get($utilities-options, "media-text-aligned-margin-x") == null {
+      *.alignleft {
+        margin-right: $wysiwyg-measure * 5;
+      }
+      *.alignright {
+        margin-left: $wysiwyg-measure * 5;
+      }
+    }
+  }
+
+  //* custom
+  @include make-custom-wysiwyg-options($options: $custom-options);
+}

package/src/scss/index.scss

@@ -0,0 +1,7 @@
+@use "@scss/framework/utilities/utilities.scss" as *;
+@use "@scss/framework/foundation/foundation.scss" as *;
+
+
+// * global content
+@use "./sanity";
+@use "./wp";

package/src/scss/sanity/index.scss

@@ -0,0 +1 @@
+@forward "../global-content/sanity";

package/src/scss/sanity.scss

@@ -0,0 +1,138 @@
+@use "sass:map";
+@use "@scss/framework/_var/_vars.scss" as *;
+@use "./framework/components/btn/c--btn-a.scss";
+@use "./framework/components/link/c--link-a.scss";
+
+// * global content
+@use "./global-content/library";
+
+@use "./sanity/index.scss" as *;
+
+.c--content-a {
+  &--sanity {
+    @include make-content();
+    @include make-content-modifier(
+      // $highlighted-options: (
+      //   "class": edf
+      // ),
+      $image-options: (
+        // "border-color": red,
+        "border-radius": 20px,
+        // "border-style": solid,
+        // "border-width": 2px,
+        "object-fit": cover,
+        "max-height": 700px,
+        "min-height": 0,
+        "object-position": center,
+        "max-width": 100%,
+        "min-width": 30px,
+        "margin-bottom": $measure * 7,
+        "caption": (
+          "color": red,
+          "font-family": arial,
+          // "font-size": 2rem,
+          "font-style": italic,
+          "font-weight": 400,
+          "letter-spacing": 1px,
+          "line-height": 1.5,
+          "max-lines": 3,
+          "text-decoration": none,
+          "text-decoration-color": #000000,
+          "text-underline-position": under,
+          "className": f--font-f,
+          "margin-bottom": $measure * 3,
+          "padding-top": $measure,
+          "text-align": right
+        ),
+      ),
+      $quote-options: (
+        "padding": $measure * 5 $measure * 2,
+        "margin-top": $measure,
+        "margin-bottom": $measure * 5,
+        "border": (
+          "border-color": red,
+          "border-radius": 0,
+          "border-style": solid,
+          "border-width": 2px 0,
+        ),
+        "paragraph": (
+          // "color": red,
+          "font-family": arial,
+          // "font-size": 2rem,
+          "font-style": italic,
+          "font-weight": 400,
+          "letter-spacing": 1px,
+          "line-height": 1.5,
+          // "max-lines": 3,
+          "text-decoration": none,
+          "text-decoration-color": #000000,
+          "text-underline-position": under,
+          "className": f--font-d,
+          // "margin-bottom": $measure*3,
+          // "padding-top": $measure,
+          // "text-align": right,,,,,
+        ),
+      ),
+      $headings-options: (
+        "h2": (
+          "color": orange,
+          "className": f--font-b,
+        ),
+        "h3": (
+          "color": orange,
+          "className": f--font-c,
+        ),
+        "h4": (
+          "color": purple,
+          "className": f--font-d,
+        ),
+        "h5": (
+          "color": orange,
+          "className": f--font-e,
+        ),
+        "h6": (
+          "color": orange,
+          "className": f--font-f,
+        ),
+      ),
+      $link-options: (
+        "className": c--link-a,
+      ),
+      $paragraphs-options: (
+        "className": f--font-e f--color-f,
+        "margin-bottom": $measure * 4,
+      ),
+      $lists-options: (
+        "first-number-width": 14px,
+        "first-level-number-color": map.get($color-options, g),
+        "first-level-artwork-width": 12px,
+        "first-level-artwork-top": 6px,
+        "first-level-artwork-image": "(/img/Diana-Blue.png)",
+        // "first-level-artwork-background": map.get($color-options, d),
+        // "first-level-artwork-border-radius": 50%,
+        "first-level-artwork-border-width": null,
+        "first-level-artwork-border-color": null,
+        "second-level-number-color": map.get($color-options, i),
+        "second-level-artwork-width": null,
+        "second-level-artwork-top": null,
+        "second-level-artwork-image": null,
+        "second-level-artwork-background": null,
+        "second-level-artwork-border-radius": null,
+        "second-level-artwork-border-width": null,
+        "second-level-artwork-border-color": null,
+        "third-level-number-color": map.get($color-options, h),
+        "third-level-artwork-width": null,
+        "third-level-artwork-top": null,
+        "third-level-artwork-image": null,
+        "third-level-artwork-background": null,
+        "third-level-artwork-border-radius": null,
+        "third-level-artwork-border-width": null,
+        "third-level-artwork-border-color": null,
+        "margin-bottom": $measure * 4,
+        "font-styles": (
+          "className": f--font-e f--color-e,
+        ),
+      )
+    );
+  }
+}

package/src/scss/wordpress/index.scss

@@ -0,0 +1 @@
+@forward "../global-content/wordpress";

package/src/scss/wp.scss

@@ -0,0 +1,267 @@
+@use "sass:map";
+@use "@scss/framework/_var/_vars.scss" as *;
+@use "./framework/components/btn/c--btn-a.scss";
+@use "./framework/components/link/c--link-a.scss";
+
+// * global content
+@use "./global-content/library";
+
+@use "./wordpress/index.scss" as *;
+
+.c--content-a {
+  &--wp {
+    @include make-content();
+    @include make-content-modifier(
+      $btn-options: (
+        "className": c--btn-a c--btn-a--second,
+        "margin-bottom": $measure * 3,
+      ),
+      $columns-options: (
+        "breakpoint": $tablets,
+        "margin-bottom": $measure * 3,
+      ),
+      $footnote-options: (
+        "color": #638c1d,
+        "font-family": arial,
+        "font-size": 1rem,
+        "font-style": italic,
+        "font-weight": 400,
+        "letter-spacing": 1px,
+        "line-height": 1.5,
+        "max-lines": 3,
+        "text-decoration": none,
+        "text-decoration-color": #000000,
+        "text-underline-position": under,
+        "className": f--font-e,
+        "margin-bottom": $measure * 3,
+        "padding-top": $measure,
+        "text-align": left,
+      ),
+      $highlighted-options: (
+        "color": red,
+        "font-family": arial,
+        "font-size": 2rem,
+        "font-style": italic,
+        "font-weight": 400,
+        "letter-spacing": 1px,
+        "line-height": 1.5,
+        "max-lines": 3,
+        "text-decoration": none,
+        "text-decoration-color": #000000,
+        "text-underline-position": under,
+        "className": f--font-e,
+        "margin-bottom": $measure * 3,
+        "padding-top": $measure,
+        "text-align": center,
+      ),
+      $image-options: (
+        // "border-color": red,
+        "border-radius": 20px,
+        // "border-style": solid,
+        // "border-width": 2px,
+        "object-fit": cover,
+        "max-height": 700px,
+        "min-height": 0,
+        "object-position": center,
+        "max-width": 100%,
+        "min-width": 30px,
+        "margin-bottom": $measure * 7,
+        "caption": (
+          // "color": red,
+          "font-family": arial,
+          // "font-size": 2rem,
+          "font-style": italic,
+          "font-weight": 400,
+          "letter-spacing": 1px,
+          "line-height": 1.5,
+          "max-lines": 3,
+          "text-decoration": none,
+          "text-decoration-color": #000000,
+          "text-underline-position": under,
+          "className": f--font-f,
+          "margin-bottom": $measure * 3,
+          "padding-top": $measure,
+          "text-align": right
+        ),
+      ),
+      $quote-options: (
+        "padding": $measure * 5 0,
+        "margin-top": $measure,
+        "margin-bottom": $measure * 5,
+        "border": (
+          "border-color": red,
+          "border-radius": 0,
+          "border-style": solid,
+          "border-width": 2px 0,
+        ),
+        "paragraph": (
+          // "color": red,
+          "font-family": arial,
+          // "font-size": 2rem,
+          "font-style": italic,
+          "font-weight": 400,
+          "letter-spacing": 1px,
+          "line-height": 1.5,
+          // "max-lines": 3,
+          "text-decoration": none,
+          "text-decoration-color": #000000,
+          "text-underline-position": under,
+          "className": f--font-d,
+          // "margin-bottom": $measure*3,
+          // "padding-top": $measure,
+          // "text-align": right,,,,
+        ),
+        "cite": (
+          // "color": red,
+          "font-family": arial,
+          // "font-size": 2rem,
+          "font-style": italic,
+          "font-weight": 400,
+          "letter-spacing": 1px,
+          "line-height": 1.5,
+          "max-lines": 3,
+          "text-decoration": none,
+          "text-decoration-color": #000000,
+          "text-underline-position": under,
+          "className": f--font-f,
+          "margin-bottom": $measure * 3,
+          "padding-top": $measure * 2,
+          "text-align": right,
+        ),
+      ),
+      $separator-options: (
+        "margin": $measure * 5 auto,
+        "width": 60%,
+        "color": orange,
+        "height": 2px,
+      ),
+      $headings-options: (
+        "h2": (
+          "color": orange,
+          "padding-top": $measure * 2,
+        ),
+        "h3": (
+          "color": blue,
+        ),
+      ),
+      $link-options: (
+        "className": c--link-a,
+      ),
+      $paragraphs-options: (
+        "className": f--font-e f--color-f,
+        "margin-bottom": $measure * 4,
+        "margin-bottom-before-lists": $measure * 2,
+        "bold-font-weight": 600,
+      ),
+      $lists-options: (
+        "number-font": (
+          "font-weight": 600,
+        ),
+        "first-number-width": 14px,
+        "first-level-number-color": map.get($color-options, d),
+        "first-level-artwork-width": 8px,
+        "first-level-artwork-top": 8px,
+        "first-level-artwork-image": null,
+        "first-level-artwork-background": map.get($color-options, d),
+        "first-level-artwork-border-radius": 50%,
+        "first-level-artwork-border-width": null,
+        "first-level-artwork-border-color": null,
+        "second-level-number-color": map.get($color-options, g),
+        "second-level-artwork-width": null,
+        "second-level-artwork-top": null,
+        "second-level-artwork-image": null,
+        "second-level-artwork-background": null,
+        "second-level-artwork-border-radius": null,
+        "second-level-artwork-border-width": null,
+        "second-level-artwork-border-color": null,
+        "third-level-number-color": map.get($color-options, f),
+        "third-level-artwork-width": null,
+        "third-level-artwork-top": null,
+        "third-level-artwork-image": null,
+        "third-level-artwork-background": null,
+        "third-level-artwork-border-radius": null,
+        "third-level-artwork-border-width": null,
+        "third-level-artwork-border-color": null,
+        "margin-bottom": $measure * 4,
+        "nested-list-spacing": $measure,
+        "font-styles": (
+          "className": f--font-e f--color-e,
+          "margin-bottom": $measure,
+        ),
+      ),
+      $table-options: (
+        "header-font-styles": (
+          // "color": red,
+          // "font-family": arial,
+          // "font-size": 2rem,
+          // "font-style": italic,
+          "font-weight": 600,
+          // "letter-spacing": 1px,
+          // "line-height": 1.5,
+          // "max-lines": 3,
+          // "text-decoration": none,
+          // "text-decoration-color": #000000,
+          // "text-underline-position": under,
+          "className": f--font-e,
+          // "margin-bottom": $measure*3,
+          // "padding-top": $measure,
+          // "text-align": right,,,,
+        ),
+        "body-font-styles": (
+          // "color": red,
+          // "font-family": arial,
+          // "font-size": 2rem,
+          // "font-style": italic,
+          // "font-weight": 600,
+          // "letter-spacing": 1px,
+          // "line-height": 1.5,
+          // "max-lines": 3,
+          // "text-decoration": none,
+          // "text-decoration-color": #000000,
+          // "text-underline-position": under,
+          "className": f--font-e,
+          // "margin-bottom": $measure*3,
+          // "padding-top": $measure,
+          // "text-align": right,,,,
+        ),
+        "caption": (
+          // "color": red,
+          // "font-family": arial,
+          // "font-size": 2rem,
+          // "font-style": italic,
+          // "font-weight": 600,
+          // "letter-spacing": 1px,
+          // "line-height": 1.5,
+          // "max-lines": 3,
+          // "text-decoration": none,
+          // "text-decoration-color": #000000,
+          // "text-underline-position": under,
+          "className": f--font-f f--color-e,
+          // "margin-bottom": $measure*3,
+          // "padding-top": $measure,
+          "text-align": right,
+        ),
+        "margin-bottom": $measure * 4,
+        "header-cells-padding": $measure * 2,
+        "body-cells-padding": $measure $measure * 2,
+        "header-border": (
+          "border-width": 1px,
+          "border-style": solid,
+          "border-color": map.get($color-options, a),
+        ),
+        "header-background": rgba(map.get($color-options, a), 0.3),
+        "body-border": (
+          "border-width": 1px,
+          "border-style": solid,
+          "border-color": map.get($color-options, a),
+        ),
+        "body-background": rgba(map.get($color-options, e), 0.3),
+        "odd-rows-background": rgba(map.get($color-options, e), 0.5),
+        "odd-rows-text-color": null,
+      ),
+      $utilities-options: (
+        "media-text-aligned-margin-x": 32px,
+      )
+    );
+  }
+}

package/src/vite-env.d.ts

@@ -0,0 +1,2 @@
+// This line allows TypeScript to understand and provide auto-completion and type checking specific to Vite in your code, making development in a Vite project environment easier.
+/// <reference types="vite/client" />

package/tsconfig.json

@@ -0,0 +1,27 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "module": "ESNext",
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "baseUrl": ".",
+    "paths": {
+      "@/*": ["src/*"],
+    },
+  },
+  "include": ["src"]
+}