feat(blockquote-foundations-sass): new element

oscarmarina · Jun 11, 2022 · 676fbca · 676fbca
1 parent eec63bf
commit 676fbca
Show file tree

Hide file tree

Showing 6 changed files with 327 additions and 0 deletions.
diff --git a/packages/foundations/blockquote-foundations-sass/LICENSE b/packages/foundations/blockquote-foundations-sass/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2022 blockquote-foundations-sass
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
diff --git a/packages/foundations/blockquote-foundations-sass/README.md b/packages/foundations/blockquote-foundations-sass/README.md
@@ -0,0 +1,71 @@
+# blockquote-foundations-sass
+
+Set of functions and mixins which help in the development of `web-component` SCSS.
+
+---
+
+## function `rem()`
+
+Converts pixels to ems.
+if the parent is another value say 24px write em(12px, 24px)
+
+Usage:
+
+```
+font-size: em(14px);
+```
+
+```
+font-size: em(14px, 24px);
+```
+
+---
+
+## function `rem()`
+
+Converts pixels to rems.
+
+Usage:
+
+```
+font-size: rem(14px);
+```
+
+---
+
+## mixin `visuallyhidden`
+
+Hides on-screen elements without hiding them to screen readers.
+We recommend to apply this mixin to classes named `visuallyhidden` or `sr-only`.
+
+Usage:
+
+```
+.visuallyhidden {
+  @include visuallyhidden;
+}
+```
+
+---
+
+## mixin `inset`
+
+Add inset properties of IE11 support
+
+Usage:
+
+```
+element { @include inset; }
+```
+
+---
+
+## mixin `list-unstyled`
+
+Removes margin, padding and list-style. This mixin should be applied to `<ul>` or `<ol>` elements.
+
+Usage:
+
+```
+ul { @include list-unstyled; }
+```
diff --git a/packages/foundations/blockquote-foundations-sass/_main.scss b/packages/foundations/blockquote-foundations-sass/_main.scss
@@ -0,0 +1,2 @@
+@import "mixins";
+@import "stringFunctions";
diff --git a/packages/foundations/blockquote-foundations-sass/_mixins.scss b/packages/foundations/blockquote-foundations-sass/_mixins.scss
@@ -0,0 +1,58 @@
+// *---------------
+// Convert pixels to ems
+// eg. for a relational value of 12px write em(12px) when the parent is 16px
+// if the parent is another value say 24px write em(12px, 24px)
+// ----------------*/
+@function em($pixels, $context: 16) {
+  @return calc($pixels / $context) * 1em;
+}
+
+// *---------------
+// Convert pixels to rems
+// eg. for a relational value of 12px write rem(12px)
+// Assumes $base-font-size is the font-size of <html>
+// ----------------*/
+@function rem($font-size) {
+  @return ($font-size / $base-font-size) * 1rem;
+}
+
+// *---------------
+// Hide element while making it readable for screen readers
+// Usage:
+// .sr-only { @include visuallyhidden; }
+// ----------------*/
+@mixin visuallyhidden {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+// *---------------
+// Add inset properties of IE11 support
+// Usage:
+// element { @include inset; }
+// ----------------*/
+@mixin inset {
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+}
+
+// *---------------
+// Reset for list elements
+// Must be applied to <ul> or <ol> elements
+// Usage:
+// ul { @include list-unstyled;}
+// ----------------*/
+@mixin list-unstyled {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
diff --git a/packages/foundations/blockquote-foundations-sass/_stringFunctions.scss b/packages/foundations/blockquote-foundations-sass/_stringFunctions.scss
@@ -0,0 +1,129 @@
+/// Utils
+
+@function strip-units($number) {
+  @return $number / ($number * 0 + 1);
+}
+
+// Capitalize string
+// --------------------------------------------------------------------------------
+// @param [string] $string
+// --------------------------------------------------------------------------------
+// @return [string]
+
+@function capitalize($string) {
+  @return to-upper-case(string.slice($string, 1, 1)) + string.slice($string, 2);
+}
+
+// Alias
+@function str-ucfirst($string) {
+  @return capitalize($string);
+}
+
+// Uncapitalize string
+// --------------------------------------------------------------------------------
+// @param [string] $string
+// --------------------------------------------------------------------------------
+// @return [string]
+
+@function uncapitalize($string) {
+  @return to-lower-case(string.slice($string, 1, 1)) + string.slice($string, 2);
+}
+
+// Alias
+@function str-lcfirst($string) {
+  @return uncapitalize($string);
+}
+
+// Capitalize each word in string
+// --------------------------------------------------------------------------------
+// @param [string] $string
+// --------------------------------------------------------------------------------
+// @return [string]
+
+@function str-ucwords($string) {
+  $progress: $string;
+  $result: "";
+  $running: true;
+
+  @while $running {
+    $index: string.index($progress, " ");
+
+    @if $index {
+      $result: $result + capitalize(string.slice($progress, 1, $index));
+      $progress: string.slice($progress, $index + 1);
+    } @else {
+      $running: false;
+    }
+  }
+
+  @return capitalize($result) + capitalize($progress);
+}
+
+// Return whether `$value` is contained in `$list`
+// --------------------------------------------------------------------------------
+// @param [list] $list
+// @param [$value] $value
+// --------------------------------------------------------------------------------
+// @return [boolean]
+
+@function contain($list, $value) {
+  @return not not index($list, $value);
+}
+
+// Camelize string with the possibility of truncating the argument/string
+// --------------------------------------------------------------------------------
+// @param [string] $string
+// @param [number] $sliceLength
+// --------------------------------------------------------------------------------
+// @return [string]
+
+@function camelize($string, $sliceLength: 0) {
+  $progress: $string;
+  $result: "";
+  $exclude: " ", "-", "–", "—", "_", ",", ";", ":", ".", "[", "]", '"', "'";
+
+  @while string.length($progress) > 0 {
+    $char: string.slice($progress, 1, 1);
+
+    @if contain($exclude, $char) {
+      $progress: capitalize(string.slice($progress, 2, 2)) + string.slice($progress, 3);
+    } @else {
+      $result: $result + $char;
+      $progress: string.slice($progress, 2);
+    }
+  }
+
+  @return uncapitalize(string.slice($result, $sliceLength));
+}
+
+// Return TRUE if first chart is:
+// "number (0 1 2 3 4 5 6 7 8 9)" : 12px
+// "minus (-)" : -12px
+// "dot (.)" .5rem
+// or FALSE
+// --------------------------------------------------------------------------------
+// @param [string] $value
+// --------------------------------------------------------------------------------
+// @return [boolean]
+@function is-number($value) {
+  $char: string.slice(#{$value}, 0, 1);
+
+  @if not contain("." "-" "0" "1" "2" "3" "4" "5" "6" "7" "8" "9", $char) {
+    @return false;
+  }
+
+  @return true;
+}
+
+// Return whether Unit Value
+// 'px', 'rem', 'em', '%', 'vw', 'vmin', ...
+// --------------------------------------------------------------------------------
+// @param [string] $value
+// --------------------------------------------------------------------------------
+// @return [string]
+@function to-unit($value) {
+  $units-to-one: $value * 0 + 1;
+  $units-string: string.slice(#{$units-to-one}, 2, string.length(#{$units-to-one}));
+
+  @return $units-string;
+}
diff --git a/packages/foundations/blockquote-foundations-sass/package.json b/packages/foundations/blockquote-foundations-sass/package.json
@@ -0,0 +1,46 @@
+{
+  "name": "@blockquote-web-components/blockquote-foundations-sass",
+  "version": "1.0.0-rc.1",
+  "description": "Set of functions and mixins which help in the development of `web-component` SCSS.",
+  "keywords": [
+    "sass",
+    "string functions",
+    "mixins",
+    "functions",
+    "scss"
+  ],
+  "license": "MIT",
+  "author": "blockquote-foundations-sass",
+  "files": [
+    "*.scss"
+  ],
+  "prettier": {
+    "arrowParens": "avoid",
+    "printWidth": 100,
+    "singleQuote": true,
+    "trailingComma": "all",
+    "overrides": [
+      {
+        "files": "*.{scss,css}",
+        "options": {
+          "printWidth": 200,
+          "singleQuote": false
+        }
+      }
+    ]
+  },
+  "stylelint": {
+    "extends": [
+      "stylelint-config-prettier",
+      "stylelint-config-standard-scss"
+    ],
+    "rules": {
+      "custom-property-pattern": null,
+      "max-line-length": null,
+      "no-duplicate-selectors": null,
+      "color-function-notation": null,
+      "alpha-value-notation": null,
+      "string-quotes": "double"
+    }
+  }
+}