@apolitical/component-library 0.0.4-beta.1 → 0.0.4-beta.10

package/index.js

@@ -1 +1 @@
-"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),n={};function o(r){return e.jsx("div",{className:n.container,children:e.jsx("h1",{children:"Component library demo!"})})}exports.Demo=o;
+"use strict";Object.defineProperty(exports,Symbol.toStringTag,{value:"Module"});const e=require("react/jsx-runtime"),t="_container_a7v7k_1",n={container:t};function r(i){return e.jsxs("div",{className:n.container,children:[e.jsx("small",{className:"pre-title",children:"Component library"}),e.jsx("h1",{children:"Component library demo!"}),e.jsx("h2",{children:"A demo of the component library"}),e.jsxs("p",{children:["Text with ",e.jsx("a",{href:"https://google.com",children:"link"})]}),e.jsx("button",{className:"primary large icon arrow_left left",children:"Button"}),e.jsx("button",{className:"secondary icon pencil right animate",children:"Button"}),e.jsx("button",{className:"tertiary small icon heart_empty hover_heart right",children:"Button"}),e.jsx("hr",{}),e.jsxs("ul",{children:[e.jsx("li",{children:"Item 1"}),e.jsx("li",{children:"Item 2"})]}),e.jsx("p",{children:"More text."}),e.jsxs("ol",{children:[e.jsx("li",{children:"Item 1"}),e.jsx("li",{children:"Item 2"})]}),e.jsx("blockquote",{children:"A quote."})]})}exports.Demo=r;

package/index.mjs

@@ -1,8 +1,32 @@
-import { jsx as o } from "react/jsx-runtime";
-const r = {};
-function t(e) {
-  return /* @__PURE__ */ o("div", { className: r.container, children: /* @__PURE__ */ o("h1", { children: "Component library demo!" }) });
+import { jsxs as t, jsx as e } from "react/jsx-runtime";
+const r = "_container_a7v7k_1", n = {
+  container: r
+};
+function o(l) {
+  return /* @__PURE__ */ t("div", { className: n.container, children: [
+    /* @__PURE__ */ e("small", { className: "pre-title", children: "Component library" }),
+    /* @__PURE__ */ e("h1", { children: "Component library demo!" }),
+    /* @__PURE__ */ e("h2", { children: "A demo of the component library" }),
+    /* @__PURE__ */ t("p", { children: [
+      "Text with ",
+      /* @__PURE__ */ e("a", { href: "https://google.com", children: "link" })
+    ] }),
+    /* @__PURE__ */ e("button", { className: "primary large icon arrow_left left", children: "Button" }),
+    /* @__PURE__ */ e("button", { className: "secondary icon pencil right animate", children: "Button" }),
+    /* @__PURE__ */ e("button", { className: "tertiary small icon heart_empty hover_heart right", children: "Button" }),
+    /* @__PURE__ */ e("hr", {}),
+    /* @__PURE__ */ t("ul", { children: [
+      /* @__PURE__ */ e("li", { children: "Item 1" }),
+      /* @__PURE__ */ e("li", { children: "Item 2" })
+    ] }),
+    /* @__PURE__ */ e("p", { children: "More text." }),
+    /* @__PURE__ */ t("ol", { children: [
+      /* @__PURE__ */ e("li", { children: "Item 1" }),
+      /* @__PURE__ */ e("li", { children: "Item 2" })
+    ] }),
+    /* @__PURE__ */ e("blockquote", { children: "A quote." })
+  ] });
 }
 export {
-  t as Demo
+  o as Demo
 };

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@apolitical/component-library",
-  "version": "0.0.4-beta.1",
+  "version": "0.0.4-beta.10",
   "main": "./index.js",
   "types": "./index.d.ts",
   "exports": {
     ".": {
       "import": "./index.mjs",
       "require": "./index.js"
-    }
+    },
+    "./style.css": "./style.css"
   }
 }

package/style.css

@@ -1 +1 @@
-h1{color:#4f43ba}
+._container_a7v7k_1 h1{color:#4f43ba}

package/styles/README.md

@@ -0,0 +1,35 @@
+# Styles
+
+## `@layer`
+
+We're using [CSS cascade layers (`@layer`)](https://www.smashingmagazine.com/2022/01/introduction-css-cascade-layers/) to organise our styles, to help us avoid specificity issues and to make it easier to find and update styles.
+
+The `public/styles/index.scss` file defines the order of our layers, with the browser reset as the lowest.
+
+If you need to overwrite CSS, you don't need to create an overly specific (and less performant) rule or add an `!important` (as an aside: please, please [never add an `!important`](https://dev.to/alvaromontoro/using-important-in-css-75c)) - just put the styling in a higher layer.
+
+---
+
+## `button` styling
+
+We handle button styling through classes.
+
+### Variations
+
+By default, buttons have `primary` styling (a purple background and white text) and don't need a `primary` class to be styled. Buttons can also be `secondary` (a ghost button with a purple border) or `tertiary` (no border or background color). There are additional variations for `destructive` (only available on primary buttons), `muted` (only available on secondary and tertiary buttons), and `disabled`.
+
+### Sizes
+
+By default, buttons are `medium`. They don't need a class to be styled. Buttons can also be `small` or `large`.
+
+### Icons
+
+Buttons can have an icon but - because we can't mix pre-processing and data passed into CSS for file names, like CSS variables or data attributes - icons on buttons need to be set up in advance with classes. The list of available icons is maintained in `base-styles/buttons/_icons.scss`. To add a new icon, add a new item to the list with arguments for the sizes on large, medium, and small buttons.
+
+To add an icon to a button, add the class name `icon [file name of icon without file extension]`, e.g. `icon heart_empty`.
+
+The icon file, with a matching name, should be uploaded to the `apolitical-assets` bucket on Google Cloud Platform. (Referred to as `$assets-bucket` in the styling.)
+
+You can also pass `left` or `right` to position the icon - this will add margin between the text and the icon. e.g. `icon heart_empty right`.
+
+You can change the icon on hover by adding a second file name, prepended with `hover_`, e.g. `icon heart_empty hover_heart` will change the heart icon from an outline to a filled in heart on hover.

package/styles/base-styles/_accessibility.scss

@@ -0,0 +1,26 @@
+@use 'sass:map';
+@import './../functions',
+        './../mixins',
+        './../variables';
+
+@layer base {
+  a, button, input, textarea, [role="menu"], li[tabindex] {
+    &:focus, &:focus-visible {
+      outline: none;
+      box-shadow: $outline map.get($theme, 'default_focus');
+    }
+    &:active { box-shadow: none; }
+  }
+
+  [role="menu"], [role="menu"] a, li[tabindex] {
+    &:focus, &:focus-visible { box-shadow: $outline map.get($theme, 'default_focus') inset; }
+  }
+
+  .hidden {
+    width: 0;
+    height: 0;
+    display: block;
+    overflow: hidden;
+  }
+}
+

package/styles/base-styles/_blockquotes.scss

@@ -0,0 +1,29 @@
+@use 'sass:map';
+@import './../functions',
+        './../mixins',
+        './../variables';
+
+$blockquote: ('margin-top': 20, 'margin-top_md': 30, 'margin-bottom': 10, 'margin-bottom_md': 20, 'padding-vertical': 4, 'padding-left': 24, 'font-size': 18, 'font-size_md': 20, 'line-height': 28, 'border-width': 6);
+
+@layer base {
+  blockquote {
+    margin: px-to-rem(map.get($blockquote, 'margin-top')) 0 px-to-rem(map.get($blockquote, 'margin-bottom')) 0;
+    padding: px-to-rem(map.get($blockquote, 'padding-vertical')) 0 0 px-to-rem(map.get($blockquote, 'padding-left'));
+    font-size: px-to-rem(map.get($blockquote, 'font-size'));
+    color: map.get($theme, 'blockquote');
+    font-weight: 700;
+    font-style: italic;
+    line-height: px-to-rem(map.get($blockquote, 'line-height'));
+    border-left: px-to-rem(map.get($blockquote, 'border-width')) solid map.get($theme, 'blockquote_border');
+
+      p:last-of-type {
+        margin-bottom: 0;
+      }
+
+      @include breakpoint('min-width', 'md') {
+        margin-top: px-to-rem(map.get($blockquote, 'margin-top_md'));
+        margin-bottom: px-to-rem(map.get($blockquote, 'margin-bottom_md'));
+        font-size: px-to-rem(map.get($blockquote, 'font-size_md'));
+      }
+  }
+}

package/styles/base-styles/_fonts.scss

@@ -0,0 +1,42 @@
+$font-path: 'fonts/';
+$font-name: 'Moderat';
+
+@mixin font-styling($weight: 400, $style: normal) {
+  $font-file: 'Medium';
+
+  @if $weight == 600 {
+    $font-file: 'Bold';
+  } @else if $weight == 900 {
+    $font-file: 'Black';
+  }
+
+  @if $style == italic {
+    $font-file: '#{$font-file}-Italic';
+  }
+
+  @font-face {
+    font-family: #{$font-name};
+    src: url('#{$font-path}/#{$font-name}-#{$font-file}.woff2') format('woff2'),
+    url('#{$font-path}/#{$font-name}-#{$font-file}.woff') format('woff');
+    font-display: optional;
+    font-weight: $weight;
+
+    @if $style == italic {
+      font-style: italic;
+    }
+  }
+}
+
+$font-family: (400, normal), (400, italic), (600, normal), (600, italic), (900, normal), (900, italic);
+
+
+@layer base {
+  @each $weight, $style in $font-family {
+    @include font-styling($weight, $style);
+  }
+
+  body {
+    font-family: #{$font-name}, sans-serif;
+  }
+
+}

package/styles/base-styles/_hr.scss

@@ -0,0 +1,15 @@
+@use 'sass:map';
+@import './../functions',
+        './../variables';
+
+$hr: ('height': 1, 'margin-vertical': 40);
+
+@layer base {
+  hr {
+    width: 100%;
+    height: px-to-rem(map.get($hr, 'height'));
+    background: map.get($theme, 'divider');
+    margin: px-to-rem(map.get($hr, 'margin-vertical')) auto;
+    border: none;
+  }
+}

package/styles/base-styles/_index.scss

@@ -0,0 +1,10 @@
+@import 'fonts',
+
+        'accessibility',
+        'blockquotes',
+        'buttons',
+        'hr',
+        'links',
+        'lists',
+        'text',
+        'titles';

package/styles/base-styles/_links.scss

@@ -0,0 +1,16 @@
+@use 'sass:map';
+@import './../variables';
+
+@layer base {
+  a {
+      color: map.get($theme, 'link');
+      text-decoration: underline;
+      font-weight: 900;
+
+      &:hover,
+      &:focus,
+      &:active {
+        color: map.get($theme, 'link_hover');
+      }
+  }
+}

package/styles/base-styles/_lists.scss

@@ -0,0 +1,27 @@
+@use 'sass:map';
+@import './../functions';
+
+$ul: ('margin-bottom': 16, 'padding-left': 40);
+$li: ('margin-bottom': 18, 'margin-bottom_sm': 12, 'margin-bottom_md': 16);
+
+@layer base {
+  ol, ul {
+    margin: 0 0 px-to-rem(map.get($ul, 'margin-bottom')) 0;
+    padding-left: px-to-rem(map.get($ul, 'padding-left'));
+    display: block;
+  }
+
+  li {
+    margin-bottom: px-to-rem(map.get($li, 'margin-bottom'));
+
+      .text-small & { margin-bottom: px-to-rem(map.get($li, 'margin-bottom_sm')); }
+
+      .text-medium & { margin-bottom: px-to-rem(map.get($li, 'margin-bottom_md')); }
+
+      &:last-child {
+        margin-bottom: 0;
+
+          p:last-child { margin-bottom: 0; }
+      }
+  }
+}

package/styles/base-styles/_text.scss

@@ -0,0 +1,80 @@
+@use 'sass:map';
+@import './../functions',
+        './../mixins',
+        './../variables';
+
+$default: ('font-size': 16, 'font-size_md': 18, 'line-height': 24, 'line-height_md': 28, 'margin-bottom': 20); // The default size is the 'large paragraph' in Figma
+$small: ('font-size': 12, 'font-size_md': 14, 'letter-spacing': 0.16, 'line-height': 16, 'margin-bottom': 16);
+$medium: ('font-size': 14, 'font-size_md': 16, 'line-height': 16, 'line-height_md': 20, 'margin-bottom': 18);
+$sup: ('font-size': 10);
+
+@layer base {
+  p, li, small {
+    color: map.get($theme, 'text');
+    font-weight: 500;
+  }
+
+  p, li {
+    font-size: px-to-rem(map.get($default, 'font-size'));
+    line-height: px-to-rem(map.get($default, 'line-height'));
+
+      .text-small & {
+        font-size: px-to-rem(map.get($small, 'font-size'));
+        line-height: px-to-rem(map.get($small, 'line-height'));
+        letter-spacing: px-to-rem(map.get($small, 'letter-spacing'));
+      }
+
+      .text-medium & {
+        font-size: px-to-rem(map.get($medium, 'font-size'));
+        line-height: px-to-rem(map.get($medium, 'line-height'));
+      }
+
+      @include breakpoint('min-width', 'md') {
+        font-size: px-to-rem(map.get($default, 'font-size_md'));
+        line-height: px-to-rem(map.get($default, 'line-height_md'));
+
+          .text-small & {
+            font-size: px-to-rem(map.get($small, 'font-size_md'));
+          }
+
+          .text-medium & {
+            font-size: px-to-rem(map.get($medium, 'font-size_md'));
+            line-height: px-to-rem(map.get($medium, 'line-height_md'));
+          }
+      }
+  }
+
+  p {
+    margin-bottom: px-to-rem(map.get($default, 'margin-bottom'));
+
+      .text-small & { margin-bottom: px-to-rem(map.get($small, 'margin-bottom')); }
+
+      .text-medium & { margin-bottom: px-to-rem(map.get($medium, 'margin-bottom')); }
+  }
+
+  small {
+    font-size: px-to-rem(map.get($small, 'font-size'));
+    line-height: px-to-rem(map.get($small, 'line-height'));
+
+      @include breakpoint('min-width', 'md') {
+        font-size: px-to-rem(map.get($small, 'font-size_md'));
+      }
+  }
+
+  strong { font-weight: 900; }
+  em, i { font-style: italic; }
+
+  sup, sub {
+    font-size: px-to-rem(map.get($sup, 'font-size'));
+    line-height: normal;
+  }
+
+  sup {
+    vertical-align: super;
+  }
+
+  sub {
+    vertical-align: sub;
+  }
+
+}

package/styles/base-styles/_titles.scss

@@ -0,0 +1,130 @@
+@use 'sass:map';
+@import './../functions',
+        './../mixins',
+        './../variables';
+
+$pre-title: ('font-size': 14, 'font-size_md': 16, 'letter-spacing': 1.28, 'line-height': 16, 'line-height_md': 20, 'margin-bottom': 24);
+$title: ('font-size': 32, 'font-size_md': 52, 'letter-spacing': -0.16, 'line-height': 40, 'line-height_md': 64, 'margin-bottom': 16, 'margin-bottom_md': 32);
+$h1: ('font-size': 28, 'font-size_md': 40, 'line-height': 32, 'line-height_md': 48, 'letter-spacing': -0.16, 'margin-bottom': 16);
+$h2: ('font-size': 24, 'font-size_md': 28, 'line-height': 32, 'line-height_md': 40, 'margin-top': 40, 'margin-bottom': 16);
+$h3: ('font-size': 20, 'font-size_md': 24, 'line-height': 28, 'line-height_md': 32, 'margin-top': 60, 'margin-bottom': 20);
+$h4: ('font-size': 18, 'font-size_md': 20, 'line-height': 24, 'line-height_md': 28, 'margin-top': 40, 'margin-bottom': 20);
+$h5: ('font-size': 12, 'font-size_md': 14, 'line-height': 16, 'margin-top': 16, 'margin-bottom': 16);
+$h6: ('font-size': 12, 'font-size_md': 11, 'line-height': 16);
+$subtitle: ('font-size': 20, 'font-size_md': 24, 'line-height': 28, 'line-height_md': 32, 'margin-bottom': 20);
+
+@layer base {
+  .pre-title, h5, h6 {
+    color: map.get($theme, 'title');
+    text-transform: uppercase;
+    font-weight: 700;
+  }
+
+  .title, h1, h2, h3, h4 {
+    color: map.get($theme, 'title');
+    font-weight: 900;
+  }
+
+  .pre-title {
+    margin-bottom: px-to-rem(map.get($pre-title, 'margin-bottom'));
+    font-size: px-to-rem(map.get($pre-title, 'font-size'));
+    line-height: px-to-rem(map.get($pre-title, 'line-height'));
+    letter-spacing: px-to-rem(map.get($pre-title, 'letter-spacing'));
+    text-transform: uppercase;
+
+      @include breakpoint('min-width', 'md') {
+        font-size: px-to-rem(map.get($pre-title, 'font-size_md'));
+        line-height: px-to-rem(map.get($title, 'line-height_md'));
+      }
+  }
+
+  .title {
+    margin-bottom: px-to-rem(map.get($title, 'margin-bottom'));
+    font-size: px-to-rem(map.get($title, 'font-size'));
+    line-height: px-to-rem(map.get($title, 'line-height'));
+    letter-spacing: px-to-rem(map.get($title, 'letter-spacing'));
+
+      @include breakpoint('min-width', 'md') {
+        font-size: px-to-rem(map.get($title, 'font-size_md'));
+        line-height: px-to-rem(map.get($title, 'line-height_md'));
+      }
+  }
+
+  h1 {
+    margin-bottom: px-to-rem(map.get($h1, 'margin-bottom'));
+    font-size: px-to-rem(map.get($h1, 'font-size'));
+    line-height: px-to-rem(map.get($h1, 'line-height'));
+    letter-spacing: px-to-rem(map.get($h1, 'letter-spacing'));
+
+      @include breakpoint('min-width', 'md') {
+        font-size: px-to-rem(map.get($h1, 'font-size_md'));
+        line-height: px-to-rem(map.get($h1, 'line-height_md'));
+      }
+  }
+
+  h2 {
+    margin: px-to-rem(map.get($h2, 'margin-top')) 0 px-to-rem(map.get($h2, 'margin-bottom')) 0;
+    font-size: px-to-rem(map.get($h2, 'font-size'));
+    line-height: px-to-rem(map.get($h2, 'line-height'));
+
+      @include breakpoint('min-width', 'md') {
+        font-size: px-to-rem(map.get($h2, 'font-size_md'));
+        line-height: px-to-rem(map.get($h2, 'line-height_md'));
+      }
+  }
+
+  h3 {
+    margin: px-to-rem(map.get($h3, 'margin-top')) 0 px-to-rem(map.get($h3, 'margin-bottom')) 0;
+    font-size: px-to-rem(map.get($h3, 'font-size'));
+    line-height: px-to-rem(map.get($h3, 'line-height'));
+
+      @include breakpoint('min-width', 'md') {
+        font-size: px-to-rem(map.get($h3, 'font-size_md'));
+        line-height: px-to-rem(map.get($h3, 'line-height_md'));
+      }
+  }
+
+  h4 {
+    margin: px-to-rem(map.get($h4, 'margin-top')) 0 px-to-rem(map.get($h4, 'margin-bottom')) 0;
+    font-size: px-to-rem(map.get($h4, 'font-size'));
+    line-height: px-to-rem(map.get($h4, 'line-height'));
+
+      @include breakpoint('min-width', 'md') {
+        font-size: px-to-rem(map.get($h4, 'font-size_md'));
+        line-height: px-to-rem(map.get($h4, 'line-height_md'));
+      }
+  }
+
+
+  h5 {
+    margin: px-to-rem(map.get($h5, 'margin-top')) 0 px-to-rem(map.get($h5, 'margin-bottom')) 0;
+    font-size: px-to-rem(map.get($h5, 'font-size'));
+    line-height: px-to-rem(map.get($h5, 'line-height'));
+
+      @include breakpoint('min-width', 'md') {
+        font-size: px-to-rem(map.get($h5, 'font-size_md'));
+      }
+  }
+
+  h6 {
+    font-size: px-to-rem(map.get($h6, 'font-size'));
+    line-height: px-to-rem(map.get($h6, 'line-height'));
+
+      @include breakpoint('min-width', 'md') {
+        font-size: px-to-rem(map.get($h6, 'font-size_md'));
+      }
+  }
+
+  .subtitle {
+    margin-bottom: px-to-rem(map.get($subtitle, 'margin-bottom'));
+    font-size: px-to-rem(map.get($subtitle, 'font-size'));
+    color: map.get($theme, 'subtitle');
+    font-weight: 400;
+    line-height: px-to-rem(map.get($subtitle, 'line-height'));
+
+      @include breakpoint('min-width', 'md') {
+        font-size: px-to-rem(map.get($subtitle, 'font-size_md'));
+        line-height: px-to-rem(map.get($subtitle, 'line-height_md'));
+      }
+  }
+}