Move akn-structure related SCSS into law-widget-styles

This means it can be re-used externally Update docs
laws-africa · May 14, 2024 · 2d0f4d7 · 2d0f4d7
1 parent 4a75aa2
commit 2d0f4d7
Show file tree

Hide file tree

Showing 5 changed files with 104 additions and 107 deletions.
diff --git a/README.md b/README.md
@@ -7,12 +7,12 @@ alongside support for React, and Vue.
 
 ### Packages
 
-| Project               | Package                                                                                         | Description                                                                                                    | Documentation                              |
-|-----------------------|-------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|--------------------------------------------|
-| **Core**              | [`@lawsafrica/law-widgets`](https://www.npmjs.com/package/@lawsafrica/law-widgets)              | Web components library built for Akoma Ntoso documents                                                         | [`README.md`](core/README.md)              |
-| **Law Widget Styles** | [`@lawsafrica/law-widget-styles`](https://www.npmjs.com/package/@lawsafrica/law-widget-styles)  | Stylesheets for use with HTML documents published using the [Indigo platform](https://indigo.readthedocs.org). | [`README.md`](law-widget-styles/README.md) |
-| **Vue**               | [`@lawsafrica/law-widgets-vue`](https://www.npmjs.com/package/@lawsafrica/law-widgets-vue)      | Vue wrapper component library of `@lawsafrica/law-widgets`                                                     | [`README.md`](packages/vue/README.md)      |
-| **React**             | [`@lawsafrica/law-widgets-react`](https://www.npmjs.com/package/@lawsafrica//law-widgets-react) | React wrapper component library of `@lawsafrica/law-widgets`                                                   | [`README.md`](packages/react/README.md)    |
+| Project               | Documentation                              | Package                                                                                         | Description                                                                                                    |
+|-----------------------|--------------------------------------------|-------------------------------------------------------------------------------------------------|----------------------------------------------------------------------------------------------------------------|
+| **Core**              | [`README.md`](core/README.md)              | [`@lawsafrica/law-widgets`](https://www.npmjs.com/package/@lawsafrica/law-widgets)              | Web components library built for Akoma Ntoso documents                                                         |
+| **Law Widget Styles** | [`README.md`](law-widget-styles/README.md) | [`@lawsafrica/law-widget-styles`](https://www.npmjs.com/package/@lawsafrica/law-widget-styles)  | Stylesheets for use with HTML documents published using the [Indigo platform](https://indigo.readthedocs.org). |
+| **Vue**               | [`README.md`](packages/vue/README.md)      | [`@lawsafrica/law-widgets-vue`](https://www.npmjs.com/package/@lawsafrica/law-widgets-vue)      | Vue wrapper component library of `@lawsafrica/law-widgets`                                                     |
+| **React**             | [`README.md`](packages/react/README.md)    | [`@lawsafrica/law-widgets-react`](https://www.npmjs.com/package/@lawsafrica//law-widgets-react) | React wrapper component library of `@lawsafrica/law-widgets`                                                   |
 
 ## Getting started
 Click [here](core/README.md#components) to learn how to use our components.
@@ -25,24 +25,20 @@ At the root of project in your terminal, run `npm install`
 
 **Installing and symlinking dependencies via Lerna**
 
-Run `lerna bootstrap` in the terminal. This will npm install all the packages (`core`, `law-widget-styles`, `react`, `vue`), 
+Run `npx lerna bootstrap` in the terminal. This will npm install all the packages (`core`, `law-widget-styles`, `react`, `vue`), 
 and provide the necessary symlinking between packages. (i.e `core` has `law-widget-styles` as a dependency, hence Lerna will
 symlink `law-widget-styles`).
 
-Try prepending ``lerna`` with ``npx `` if you get ``command not found: lerna``.
-
 ## Running tests 
-In the terminal, run `lerna run test`.
+In the terminal, run `npx lerna run test`.
 
 ## Building packages
-In the terminal, run `lerna run build`.
+In the terminal, run `npx lerna run build`.
 
 ## Releasing and publishing packages
 
-- Once you have merged your feature into main, run `lerna version VERSION_NUMBER --conventional-commits` (
-  e.g `lerna version 1.0.1 --conventional-commits`) in the terminal.
+- Once you have merged your feature into main, run `npx lerna version VERSION_NUMBER --conventional-commits` (
+  e.g `npx lerna version 1.0.1 --conventional-commits`) in the terminal.
 - An automatic tagged commit will occur and the changelog for the packages will be updated.
-- Create a new release [here](https://github.com/laws-africa/law-widgets/releases/new). Use the tag that was
-  pushed
-  for your release.
+- Create a new release [here](https://github.com/laws-africa/law-widgets/releases/new). Use the tag that was pushed for your release.
 - Upon creating a release, a new version of the packages will be published on `npm`.
diff --git a/core/src/components/akoma-ntoso/_variables.scss b/core/src/components/akoma-ntoso/_variables.scss
diff --git a/core/src/components/akoma-ntoso/akoma-ntoso.scss b/core/src/components/akoma-ntoso/akoma-ntoso.scss
@@ -2,8 +2,7 @@
 
 @import "@lawsafrica/law-widget-styles/scss/mixins";
 @import "@lawsafrica/law-widget-styles/scss/variables";
-@import "variables";
-@import "structure";
+@import "@lawsafrica/law-widget-styles/scss/mixins/structure";
 
 la-akoma-ntoso {
   display: block;

diff --git a/law-widget-styles/scss/_variables.scss b/law-widget-styles/scss/_variables.scss
@@ -21,6 +21,14 @@ $akn-table-border-width: 1px !default;
 
 $akn-footnote-bg-colour: rgba(0, 0, 0, 0.07);
 
+// akn-structure
+$akn-structure-hier-start-colour: #ef9a9a !default;
+$akn-structure-block-start-colour: adjust-hue($akn-structure-hier-start-colour, 55deg) !default;
+$akn-structure-inline-start-colour: adjust-hue($akn-structure-hier-start-colour, 105deg) !default;
+$akn-structure-subflow-start-colour: adjust-hue($akn-structure-hier-start-colour, 25deg) !default;
+$akn-structure-doc-container-start-colour: adjust-hue($akn-structure-hier-start-colour, 35deg) !default;
+$akn-structure-spacing: 3px !default;
+
 
 // AKN document types
 $akn-elements-doctype: (
@@ -60,3 +68,86 @@ $akn-elements-block: (
 $akn-elements-doc-container: (
   "attachment", "component"
 );
+
+// AKN inline elements
+$akn-elements-inline: ("abbr", "remark");
+
+// AKN subflow elements
+$akn-elements-subflow: ("authorialNote", "embeddedStructure");
+
+// Display names for AKN elements, possibly abbreviated
+$akn-element-names: (
+  "abbr": "abbr",
+  "address": "address",
+  "adjournment": "adjournment",
+  "administrationOfOath": "administrationOfOath",
+  "alinea": "alinea",
+  "answer": "answer",
+  "article": "article",
+  "attachment": "attachment",
+  "authorialNote": "footnote",
+  "blockList": "items",
+  "book": "book",
+  "chapter": "chapter",
+  "clause": "clause",
+  "communication": "communication",
+  "component": "component",
+  "crossHeading": "crossHeading",
+  "debateSection": "debateSection",
+  "declarationOfVote": "declarationOfVote",
+  "division": "division",
+  "embeddedStructure": "quote",
+  "hcontainer": "hcontainer",
+  "indent": "indent",
+  "intro": "intro",
+  "item": "item",
+  "level": "level",
+  "list": "list",
+  "listIntroduction": "listIntro",
+  "listWrapUp": "listWrapUp",
+  "ministerialStatements": "ministerialStatements",
+  "nationalInterest": "nationalInterest",
+  "noticesOfMotion": "noticesOfMotion",
+  "oralStatements": "oralStatements",
+  "papers": "papers",
+  "paragraph": "para",
+  "part": "part",
+  "personalStatements": "personalStatements",
+  "petitions": "petitions",
+  "point": "point",
+  "pointOfOrder": "pointOfOrder",
+  "prayers": "prayers",
+  "preamble": "preamble",
+  "preface": "preface",
+  "proceduralMotions": "proceduralMotions",
+  "proviso": "proviso",
+  "question": "question",
+  "remark": "remark",
+  "rule": "rule",
+  "section": "section",
+  "subchapter": "subchapter",
+  "subclause": "subclause",
+  "subdivision": "subdivision",
+  "sublist": "sublist",
+  "subparagraph": "subpara",
+  "subpart": "subpart",
+  "subrule": "subrule",
+  "subsection": "subsection",
+  "subtitle": "subtitle",
+  "table": "table",
+  "title": "title",
+  "tome": "tome",
+  "transitional": "transitional",
+  "ul": "bullets",
+  "wrapUp": "wrapUp",
+  "questions": "questions",
+  "resolutions": "resolutions",
+  "rollCall": "rollCall",
+  "speech": "speech",
+  "speechGroup": "speechGroup",
+  "writtenStatements": "writtenStatements",
+  "from": "from",
+  "narrative": "narrative",
+  "scene": "scene",
+  "summary": "summary",
+);
diff --git a/...rc/components/akoma-ntoso/_structure.scss → ...widget-styles/scss/mixins/_structure.scss b/...rc/components/akoma-ntoso/_structure.scss → ...widget-styles/scss/mixins/_structure.scss