@ilo-org/styles 0.14.2 → 0.16.0

package/gulpfile.mjs

@@ -0,0 +1,99 @@
+import gulp from "gulp";
+import gulpSass from "gulp-sass";
+import dartSass from "sass";
+import rename from "gulp-rename";
+import cleanCSS from "gulp-clean-css";
+import { deleteAsync } from "del";
+import cssnano from "gulp-cssnano";
+import postcss from "gulp-postcss";
+import sourcemaps from "gulp-sourcemaps";
+
+const sass = gulpSass(dartSass);
+
+const SRC = "scss";
+const TEMP = "temp";
+const BUILD = "css";
+const COMPILABLE_COMPONENTS = `${TEMP}/compilable_components`;
+const COMPILED_COMPONENTS = `${BUILD}/components`;
+
+// Copy all files in the scss folder into a temp folder that's safe to work in
+gulp.task("create temp dir", function () {
+  return gulp.src(`${SRC}/**/*`).pipe(gulp.dest(TEMP));
+});
+
+// Create stand-alone scss files for each of the components so they can be compiled individually
+gulp.task("create temp components", function () {
+  return gulp
+    .src(`${TEMP}/components/_*.scss`)
+    .pipe(
+      rename(function (path) {
+        path.basename = path.basename.replace(/^_/, "");
+      })
+    )
+    .pipe(gulp.dest(COMPILABLE_COMPONENTS));
+});
+
+// Compile the component partials into stand-alone css files
+gulp.task("compile components into css", function () {
+  return gulp
+    .src(`${COMPILABLE_COMPONENTS}/*.scss`)
+    .pipe(sass({ includePaths: ["node_modules"] }).on("error", sass.logError))
+    .pipe(cleanCSS())
+    .pipe(
+      rename(function (path) {
+        path.basename = path.basename.replace(/\.scss$/, "css");
+      })
+    )
+    .pipe(gulp.dest(COMPILED_COMPONENTS));
+});
+
+// Minify compiled css components
+gulp.task("minify css components", function () {
+  return gulp
+    .src(`${COMPILED_COMPONENTS}/*.css`)
+    .pipe(postcss())
+    .pipe(cssnano({ zindex: false }))
+    .pipe(gulp.dest(COMPILED_COMPONENTS));
+});
+
+gulp.task("clean temp components", function () {
+  return deleteAsync([TEMP]);
+});
+
+// Bundle the main scss file into a single css file
+gulp.task("bundle main css", function () {
+  return gulp
+    .src(`${SRC}/*.scss`)
+    .pipe(sourcemaps.init()) // Initialize source maps
+    .pipe(sass({ includePaths: ["node_modules"] }).on("error", sass.logError))
+    .pipe(cleanCSS())
+    .pipe(
+      rename(function (path) {
+        path.basename = path.basename.replace(/\.scss$/, "css");
+      })
+    )
+    .pipe(sourcemaps.write(".")) // Write source maps
+    .pipe(gulp.dest(BUILD));
+});
+
+// Minify compiled css files
+gulp.task("minify main css bundle", function () {
+  return gulp
+    .src(`${SRC}/*.css`)
+    .pipe(postcss())
+    .pipe(cssnano({ zindex: false }))
+    .pipe(gulp.dest(BUILD));
+});
+
+gulp.task(
+  "default",
+  gulp.series(
+    "create temp dir",
+    "create temp components",
+    "compile components into css",
+    "minify css components",
+    "clean temp components",
+    "bundle main css",
+    "minify main css bundle"
+  )
+);

package/package.json

@@ -1,29 +1,44 @@
 {
   "name": "@ilo-org/styles",
   "description": "Styles for products using ILO's Design System",
-  "version": "0.14.2",
+  "version": "0.16.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/international-labour-organization/designsystem.git",
     "directory": "packages/styles"
   },
+  "contributors": [
+    {
+      "name": "Justin Smith",
+      "email": "smithj@ilo.org",
+      "url": "https://github.com/justintemps"
+    },
+    {
+      "name": "Prabashwara Seneviratne",
+      "url": "https://www.bash.lk"
+    },
+    {
+      "name": "Shashika Boteju",
+      "email": "Shashikaboteju3@gmail.com",
+      "url": "https://github.com/Shashika6"
+    },
+    {
+      "name": "Giorgi Kapanadze",
+      "email": "doublegkapanadze@gmail.com",
+      "url": "https://github.com/ggkapanadze"
+    }
+  ],
   "publishConfig": {
     "access": "public"
   },
   "author": "@justintemps, @johnpauldavis, @avrilpearl, @ghlost",
   "license": "Apache-2.0",
-  "files": [
-    "build",
-    "scss",
-    "css"
-  ],
   "dependencies": {
-    "@ilo-org/fonts": "0.1.2",
-    "@ilo-org/icons": "0.2.1",
-    "@ilo-org/themes": "0.7.2"
+    "@ilo-org/fonts": "0.2.0",
+    "@ilo-org/icons": "0.3.0",
+    "@ilo-org/themes": "0.8.0"
   },
   "devDependencies": {
-    "cssnano": "^5.1.13",
     "del": "^7.0.0",
     "gulp": "^4.0.2",
     "gulp-clean-css": "^4.3.0",
@@ -32,18 +47,12 @@
     "gulp-rename": "^2.0.0",
     "gulp-sass": "^5.1.0",
     "gulp-sourcemaps": "^3.0.0",
-    "postcss": "^8.4.31",
-    "postcss-cli": "^10.0.0",
     "sass": "^1.62.1"
   },
   "scripts": {
-    "build:legacy": "sass scss:build/css --load-path=./node_modules && postcss build/css/index.css --base/css build/css --dir build/minified && postcss build/css/monorepo.css --base/css build/css --dir build/minified",
-    "build:next": "gulp",
-    "build": "pnpm build:legacy && pnpm build:next",
+    "build": "gulp",
     "build:lib": "pnpm build",
     "build:docs": "pnpm build",
-    "gulp": "gulp",
-    "minify": "postcss build/css/index.css --base/css build/css --dir build/minified && postcss build/css/monorepo.css --base/css build/css --dir build/minified",
     "format": "prettier --check . --ignore-path ../../.prettierignore",
     "format:fix": "prettier --write . --ignore-path ../../.prettierignore",
     "lint": "eslint --ext .js,.ts,.tsx",

package/postcss.config.js

@@ -0,0 +1 @@
+module.exports = {};

package/scss/_mixins.scss

@@ -412,3 +412,77 @@
     $spacing-hero-card-corner-cut-height-sm
     auto;
 }
+
+// ======================================
+// List with markers that don't get chopped
+// off by containers with overflow: hidden;
+// Applies list styles to the List component
+// and also lists in RichText.
+// ======================================
+
+@mixin invincible-list {
+  // Ordered list shows numbers
+  ol {
+    counter-reset: item;
+
+    li {
+      counter-increment: item;
+      display: table;
+    }
+
+    li::before {
+      content: counter(item) ".";
+      display: table-cell;
+      text-align: right;
+      padding-inline-end: spacing(2);
+    }
+  }
+
+  // Unordered list shows triangles
+  ul {
+    li {
+      position: relative;
+      padding-inline-start: spacing(6);
+
+      &::before {
+        content: "";
+        position: absolute;
+        height: px-to-rem(14px);
+        width: px-to-rem(12px);
+        top: px-to-rem(6px);
+        @include dataurlicon("listarrow", $color-base-neutrals-light);
+        background-repeat: no-repeat;
+
+        // Left takes precedence in LTR layouts
+        // Right takes precents in RTL layouts
+        left: 0;
+        right: 0;
+
+        // We have to rotate the bullet in RTL
+        [dir="rtl"] & {
+          transform: rotate(180deg);
+        }
+
+        @include breakpoint("medium") {
+          top: px-to-rem(7px);
+        }
+      }
+    }
+  }
+
+  li {
+    @include font-styles("body-small");
+    font-family: $fonts-copy;
+    margin-bottom: spacing(4);
+
+    b,
+    strong {
+      font-weight: 700;
+      letter-spacing: $type-label-small-letter-spacing;
+    }
+
+    @include breakpoint("medium") {
+      @include font-styles("base");
+    }
+  }
+}

package/scss/_normalize.scss

@@ -0,0 +1,329 @@
+/*! normalize.css v8.0.1 | MIT License | github.com/necolas/normalize.css */
+
+/* Sections
+   ========================================================================== */
+
+/**
+ * Render the `main` element consistently in IE.
+ */
+main {
+  display: block;
+}
+
+/**
+ * Correct the font size and margin on `h1` elements within `section` and
+ * `article` contexts in Chrome, Firefox, and Safari.
+ */
+
+h1 {
+  font-size: 2em;
+  margin: 0.67em 0;
+}
+
+/* Grouping content
+   ========================================================================== */
+
+/**
+ * 1. Add the correct box sizing in Firefox.
+ * 2. Show the overflow in Edge and IE.
+ */
+
+hr {
+  box-sizing: content-box; /* 1 */
+  height: 0; /* 1 */
+  overflow: visible; /* 2 */
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+pre {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/* Text-level semantics
+   ========================================================================== */
+
+/**
+ * Remove the gray background on active links in IE 10.
+ */
+
+a {
+  background-color: transparent;
+}
+
+/**
+ * 1. Remove the bottom border in Chrome 57-
+ * 2. Add the correct text decoration in Chrome, Edge, IE, Opera, and Safari.
+ */
+
+abbr[title] {
+  border-bottom: none; /* 1 */
+  text-decoration: underline; /* 2 */
+  text-decoration: underline dotted; /* 2 */
+}
+
+/**
+ * Add the correct font weight in Chrome, Edge, and Safari.
+ */
+
+b,
+strong {
+  font-weight: bolder;
+}
+
+/**
+ * 1. Correct the inheritance and scaling of font size in all browsers.
+ * 2. Correct the odd `em` font sizing in all browsers.
+ */
+
+code,
+kbd,
+samp {
+  font-family: monospace, monospace; /* 1 */
+  font-size: 1em; /* 2 */
+}
+
+/**
+ * Add the correct font size in all browsers.
+ */
+
+small {
+  font-size: 80%;
+}
+
+/**
+ * Prevent `sub` and `sup` elements from affecting the line height in
+ * all browsers.
+ */
+
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+
+sub {
+  bottom: -0.25em;
+}
+
+sup {
+  top: -0.5em;
+}
+
+/* Embedded content
+   ========================================================================== */
+
+/**
+ * Remove the border on images inside links in IE 10.
+ */
+
+img {
+  border-style: none;
+}
+
+/* Forms
+   ========================================================================== */
+
+/**
+ * 1. Change the font styles in all browsers.
+ * 2. Remove the margin in Firefox and Safari.
+ */
+
+button,
+input,
+optgroup,
+select,
+textarea {
+  font-family: inherit; /* 1 */
+  font-size: 100%; /* 1 */
+  line-height: 1; /* 1 */
+  margin: 0; /* 2 */
+}
+
+/**
+ * Show the overflow in IE.
+ * 1. Show the overflow in Edge.
+ */
+
+button,
+input {
+  /* 1 */
+  overflow: visible;
+}
+
+/**
+ * Remove the inheritance of text transform in Edge, Firefox, and IE.
+ * 1. Remove the inheritance of text transform in Firefox.
+ */
+
+button,
+select {
+  /* 1 */
+  text-transform: none;
+}
+
+/**
+ * Correct the inability to style clickable types in iOS and Safari.
+ */
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+  -webkit-appearance: button;
+}
+
+/**
+ * Remove the inner border and padding in Firefox.
+ */
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+  border-style: none;
+  padding: 0;
+}
+
+/**
+ * Restore the focus styles unset by the previous rule.
+ */
+
+button:-moz-focusring,
+[type="button"]:-moz-focusring,
+[type="reset"]:-moz-focusring,
+[type="submit"]:-moz-focusring {
+  outline: 1px dotted ButtonText;
+}
+
+/**
+ * Correct the padding in Firefox.
+ */
+
+fieldset {
+  padding: 0.35em 0.75em 0.625em;
+}
+
+/**
+ * 1. Correct the text wrapping in Edge and IE.
+ * 2. Correct the color inheritance from `fieldset` elements in IE.
+ * 3. Remove the padding so developers are not caught out when they zero out
+ *    `fieldset` elements in all browsers.
+ */
+
+legend {
+  box-sizing: border-box; /* 1 */
+  color: inherit; /* 2 */
+  display: table; /* 1 */
+  max-width: 100%; /* 1 */
+  padding: 0; /* 3 */
+  white-space: normal; /* 1 */
+}
+
+/**
+ * Add the correct vertical alignment in Chrome, Firefox, and Opera.
+ */
+
+progress {
+  vertical-align: baseline;
+}
+
+/**
+ * Remove the default vertical scrollbar in IE 10+.
+ */
+
+textarea {
+  overflow: auto;
+}
+
+/**
+ * 1. Add the correct box sizing in IE 10.
+ * 2. Remove the padding in IE 10.
+ */
+
+[type="checkbox"],
+[type="radio"] {
+  box-sizing: border-box; /* 1 */
+  padding: 0; /* 2 */
+}
+
+/**
+ * Correct the cursor style of increment and decrement buttons in Chrome.
+ */
+
+[type="number"]::-webkit-inner-spin-button,
+[type="number"]::-webkit-outer-spin-button {
+  height: auto;
+}
+
+/**
+ * 1. Correct the odd appearance in Chrome and Safari.
+ * 2. Correct the outline style in Safari.
+ */
+
+[type="search"] {
+  -webkit-appearance: textfield; /* 1 */
+  outline-offset: -2px; /* 2 */
+}
+
+/**
+ * Remove the inner padding in Chrome and Safari on macOS.
+ */
+
+[type="search"]::-webkit-search-decoration {
+  -webkit-appearance: none;
+}
+
+/**
+ * 1. Correct the inability to style clickable types in iOS and Safari.
+ * 2. Change font properties to `inherit` in Safari.
+ */
+
+::-webkit-file-upload-button {
+  -webkit-appearance: button; /* 1 */
+  font: inherit; /* 2 */
+}
+
+/* Interactive
+   ========================================================================== */
+
+/*
+ * Add the correct display in Edge, IE 10+, and Firefox.
+ */
+
+details {
+  display: block;
+}
+
+/*
+ * Add the correct display in all browsers.
+ */
+
+summary {
+  display: list-item;
+}
+
+/* Misc
+   ========================================================================== */
+
+/**
+ * Add the correct display in IE 10+.
+ */
+
+template {
+  display: none;
+}
+
+/**
+ * Add the correct display in IE 10.
+ */
+
+[hidden] {
+  display: none;
+}