coveragebook_components 0.5.1 → 0.5.2

data/config/locales/coco.en.yml

@@ -0,0 +1,22 @@
+en:
+  coco:
+    app:
+      blocks:
+        slide_editor:
+          bg_color_picker:
+            label: "Background colour"
+          bg_image_picker:
+            label: "Background image"
+            blank_state: "Drag a jpg, png or gif onto the slide area or..."
+          text_color_picker:
+            label: "Text colour"
+          undo_button:
+            tooltip: "Undo"
+          redo_button:
+            tooltip: "Redo"
+          save_button:
+            label: "Save"
+            saving_label: "Saving..."
+    test:
+      translatable:
+        greeting: "Hello"

data/config/tailwind.app.config.cjs

@@ -0,0 +1,21 @@
+/** @type {import('tailwindcss').Config} */
+
+const merge = require("lodash/merge");
+const defaultTheme = require("tailwindcss/defaultTheme");
+const baseConfig = require("./tailwind.base.config.cjs");
+const { fontSize, fontFamily, colors, screens } = require("./tokens.cjs").app;
+
+module.exports = merge(baseConfig, {
+  theme: {
+    colors,
+    screens,
+    fontFamily: {
+      display: [fontFamily.displaySans, ...defaultTheme.fontFamily.sans],
+      body: [fontFamily.bodySans, ...defaultTheme.fontFamily.sans],
+      serif: [fontFamily.displaySerif, ...defaultTheme.fontFamily.serif],
+    },
+    extend: {
+      fontSize,
+    },
+  },
+});

data/config/tailwind.base.config.cjs

@@ -0,0 +1,79 @@
+/** @type {import('tailwindcss').Config} */
+
+const { cocoPath } = require("./utils.cjs");
+
+module.exports = {
+  content: [
+    cocoPath("@components/**/*.{erb,rb,js}", true),
+    cocoPath("@assets/**/*.{erb,rb}", true),
+    cocoPath("@previews/**/*.{erb,rb}", true),
+  ],
+  safelist: [
+    {
+      pattern: /tippy-.+/,
+    },
+  ],
+  blocklist: ["container"],
+  theme: {
+    extend: {
+      containers: {
+        "slide-fluid": "700px",
+      },
+      aspectRatio: {
+        slide: "16 / 10",
+      },
+      animation: {
+        spin: "spin 1.5s linear infinite",
+        "spin-reverse": "spin 1.5s linear infinite reverse",
+      },
+      customForms: () => ({
+        DEFAULT: {
+          checkbox: {
+            "&:indeterminate": {
+              background:
+                "url(\"data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='white' xmlns='http://www.w3.org/2000/svg'%3E%3Crect width='8' height='2' x='4' y='7' rx='1'/%3E%3C/svg%3E\");",
+              borderColor: "transparent",
+              backgroundColor: "currentColor",
+              backgroundSize: "100% 100%",
+              backgroundPosition: "center",
+              backgroundRepeat: "no-repeat",
+            },
+          },
+        },
+      }),
+    },
+  },
+  corePlugins: {
+    aspectRatio: false,
+  },
+  plugins: [
+    require("@tailwindcss/forms"),
+    require("@tailwindcss/container-queries"),
+
+    ({ matchUtilities, theme }) => {
+      // Safari 14-compatible aspect ratio
+      matchUtilities(
+        {
+          aspect: (value) => ({
+            "@supports (aspect-ratio: 1 / 1)": {
+              aspectRatio: value,
+            },
+            "@supports not (aspect-ratio: 1 / 1)": {
+              "&::before": {
+                content: '""',
+                float: "left",
+                paddingTop: `calc(100% / (${value}))`,
+              },
+              "&::after": {
+                clear: "left",
+                content: '""',
+                display: "block",
+              },
+            },
+          }),
+        },
+        { values: theme("aspectRatio") }
+      );
+    },
+  ],
+};

data/config/tailwind.book.config.cjs

@@ -0,0 +1,20 @@
+/** @type {import('tailwindcss').Config} */
+
+const merge = require("lodash/merge");
+const defaultTheme = require("tailwindcss/defaultTheme");
+const baseConfig = require("./tailwind.base.config.cjs");
+const { fontSize, fontFamily, colors, screens } = require("./tokens.cjs").book;
+
+module.exports = merge(baseConfig, {
+  theme: {
+    colors,
+    screens,
+    fontFamily: {
+      display: [fontFamily.displaySans, ...defaultTheme.fontFamily.sans],
+      body: [fontFamily.bodySans, ...defaultTheme.fontFamily.sans],
+    },
+    extend: {
+      fontSize,
+    },
+  },
+});

data/config/tokens.cjs

@@ -0,0 +1,229 @@
+const tailwindColors = require("tailwindcss/colors");
+
+const colors = {
+  transparent: "transparent",
+  current: "currentColor",
+  black: tailwindColors.black,
+  white: tailwindColors.white,
+  gray: {
+    50: "#F9FAFB",
+    100: "#F3F4F6",
+    200: "#E5E7EB",
+    300: "#D1D5DB",
+    400: "#9CA3AF",
+    500: "#6B7280",
+    600: "#4B5563",
+    700: "#374151",
+    800: "#1F2937",
+    900: "#111827",
+    transparent: {
+      50: "rgba(0, 12, 39, 0.06)",
+      100: "rgba(0, 12, 39, 0.1)",
+      200: "rgba(0, 12, 39, 0.18)",
+    },
+  },
+  green: {
+    50: "#E8F3F1",
+    100: "#D1E7E2",
+    200: "#A3CFC5",
+    300: "#76B8AA",
+    400: "#48A08D",
+    500: "#1A8871",
+    600: "#137464",
+    700: "#0D6159",
+    800: "#084C4E",
+    900: "#013C43",
+  },
+  red: {
+    50: "#FEF2F2",
+    100: "#FEE2E2",
+    200: "#FECACA",
+    300: "#FCA5A5",
+    400: "#F87171",
+    500: "#EF4444",
+    600: "#DC2626",
+    700: "#B91C1C",
+    800: "#991B1B",
+    900: "#7F1D1D",
+  },
+  amber: {
+    50: "#FFFBEB",
+    100: "#FEF3C7",
+    200: "#FDE68A",
+    300: "#FCD34D",
+    400: "#FBBF24",
+    500: "#F59E0B",
+    600: "#D97706",
+    700: "#B45309",
+    800: "#92400E",
+    900: "#78350F",
+  },
+  blue: {
+    50: "#F0F9FF",
+    100: "#E0F2FE",
+    200: "#BAE6FD",
+    300: "#7DD3FC",
+    400: "#38BDF8",
+    500: "#0EA5E9",
+    600: "#0284C7",
+    700: "#0369A1",
+    800: "#075985",
+    900: "#0C4A6E",
+  },
+  teal: tailwindColors.teal,
+};
+
+const colorAliases = {
+  primary: {
+    ...colors.green,
+  },
+  positive: {
+    ...colors.green,
+  },
+  negative: {
+    ...colors.red,
+  },
+  warning: {
+    ...colors.amber,
+  },
+  info: {
+    ...colors.blue,
+  },
+  background: {
+    light: {
+      1: colors.white,
+      2: colors.gray[50],
+      3: colors.gray[100],
+    },
+    dark: {
+      1: colors.gray[900],
+      2: colors.gray[800],
+      3: colors.gray[700],
+    },
+    primary: {
+      DEFAULT: colors.green[500],
+      light: colors.green[100],
+    },
+    negative: {
+      DEFAULT: colors.red[600],
+      light: colors.red[100],
+    },
+    warning: {
+      DEFAULT: colors.amber[500],
+      light: colors.amber[50],
+    },
+    positive: {
+      DEFAULT: colors.green[500],
+      light: colors.green[100],
+    },
+    info: {
+      DEFAULT: colors.blue[600],
+      light: colors.blue[100],
+    },
+  },
+  content: {
+    dark: {
+      1: colors.gray[900],
+      2: colors.gray[800],
+      muted: colors.gray[400],
+    },
+    light: {
+      1: colors.white,
+      2: colors.gray[200],
+      muted: colors.gray[400],
+    },
+    primary: {
+      DEFAULT: colors.green[500],
+      dark: colors.green[600],
+      inverse: colors.green[300],
+    },
+    negative: {
+      DEFAULT: colors.red[600],
+      dark: colors.red[700],
+      inverse: colors.red[300],
+    },
+    warning: {
+      DEFAULT: colors.amber[600],
+      dark: colors.amber[700],
+      inverse: colors.amber[300],
+    },
+    positive: {
+      DEFAULT: colors.green[500],
+      dark: colors.green[600],
+      inverse: colors.green[300],
+    },
+    info: {
+      DEFAULT: colors.blue[600],
+      dark: colors.blue[700],
+      inverse: colors.blue[300],
+    },
+  },
+};
+
+const screens = {
+  xs: "380px",
+  sm: "576px",
+  md: "768px",
+  lg: "992px",
+  xl: "1200px",
+  "2xl": "1400px",
+  max: "1800px",
+  print: { raw: "print" }, // Note: PDFs are rendered at a viewport width of 1280px
+};
+
+const fontSize = {
+  "para-xs": ["12px", "16px"],
+  "para-sm": ["14px", "20px"],
+  "para-md": ["16px", "24px"],
+  "para-lg": ["18px", "27px"],
+
+  "label-xs": ["12px", "14px"],
+  "label-sm": ["14px", "16px"],
+  "label-md": ["16px", "20px"],
+  "label-lg": ["18px", "24px"],
+
+  "display-1": ["96px", "96px"],
+  "display-2": ["80px", "84px"],
+  "display-3": ["64px", "68px"],
+  "display-4": ["48px", "52px"],
+
+  "heading-1": ["48px", "50px"],
+  "heading-2": ["36px", "40px"],
+  "heading-3": ["30px", "36px"],
+  "heading-4": ["24px", "30px"],
+  "heading-5": ["20px", "25px"],
+  "heading-6": ["16px", "20px"],
+
+  "subheading-1": ["32px", "40px"],
+  "subheading-2": ["24px", "32px"],
+  "subheading-3": ["20px", "28px"],
+  "subheading-4": ["16px", "24px"],
+};
+
+module.exports = {
+  app: {
+    colors: {
+      ...colors,
+      ...colorAliases,
+    },
+    screens,
+    fontSize,
+    fontFamily: {
+      displaySans: "proxima-nova",
+      bodySans: "proxima-nova",
+      displaySerif: "merriweather",
+    },
+  },
+  book: {
+    colors: {
+      ...colors,
+      ...colorAliases,
+    },
+    screens,
+    fontSize,
+    fontFamily: {
+      displaySans: "proxima-nova",
+      bodySans: "proxima-nova",
+    },
+  },
+};

data/config/utils.cjs

@@ -0,0 +1,16 @@
+const hq = require("alias-hq");
+const aliases = hq.get("webpack");
+
+exports.cocoPath = function (aliasedPath, relative = false) {
+  const pathParts = aliasedPath.split("/");
+  const alias = pathParts.shift();
+  const restPath = pathParts.join("/");
+
+  if (aliases[alias]) {
+    const rootPath = aliases[alias].replace(/\/$/, "");
+    const path = restPath.length ? `${rootPath}/${restPath}` : rootPath;
+    return relative ? path.replace(process.cwd(), "").replace(/^\//, "") : path;
+  } else {
+    throw new Error(`'${alias}' is not a valid path alias.`);
+  }
+};

data/lib/coco.rb

@@ -1,3 +1,3 @@
 module Coco
-  VERSION = "0.5.1"
+  VERSION = "0.5.2"
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: coveragebook_components
 version: !ruby/object:Gem::Version
-  version: 0.5.1
+  version: 0.5.2
 platform: ruby
 authors:
 - Mark Perkins
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-07-04 00:00:00.000000000 Z
+date: 2023-07-05 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -980,6 +980,7 @@ files:
 - app/assets/js/base/mixins/size-observer.js
 - app/assets/js/base/mixins/tooltip.js
 - app/assets/js/base/mixins/undo.js
+- app/assets/js/base/polyfills/request-submit.js
 - app/assets/js/base/setup.js
 - app/assets/js/book.js
 - app/assets/js/book/components.js
@@ -1164,6 +1165,7 @@ files:
 - app/components/coco/concerns/acts_as_notification.rb
 - app/components/coco/concerns/extendable.rb
 - app/components/coco/concerns/has_name.rb
+- app/components/coco/concerns/translatable.rb
 - app/components/coco/concerns/with_dropdown.rb
 - app/components/coco/concerns/with_dropdown_options.rb
 - app/components/coco/concerns/with_icon.rb
@@ -1181,6 +1183,15 @@ files:
 - app/helpers/coco/integration_helper.rb
 - app/helpers/coco/tag_helper.rb
 - app/helpers/coco/url_helper.rb
+- config/credentials/production.key
+- config/credentials/production.yml.enc
+- config/icons.json
+- config/locales/coco.en.yml
+- config/tailwind.app.config.cjs
+- config/tailwind.base.config.cjs
+- config/tailwind.book.config.cjs
+- config/tokens.cjs
+- config/utils.cjs
 - lib/coco.rb
 - lib/coco/action_view_helper.rb
 - lib/coco/app_form_builder.rb