fundamental-styles 0.26.3-rc.7 → 0.26.3

package/.ci-env/flags.sh

@@ -0,0 +1,5 @@
+#!/usr/bin/env bash
+# This flag indicates if the tag should be treated as a latest one, which is going to trigger
+# - npm publish with `latest` tag, which will become new default version
+# - main version incrementation
+echo '::set-output name=isLatest::false'

package/.ci-env/flags.sh-e

@@ -0,0 +1,5 @@
+#!/usr/bin/env bash
+# This flag indicates if the tag should be treated as a latest one, which is going to trigger
+# - npm publish with `latest` tag, which will become new default version
+# - main version incrementation
+latest=false

package/.eslintignore

@@ -0,0 +1 @@
+storybook-static/

package/.eslintrc.json

@@ -0,0 +1,29 @@
+{
+    "extends": ["eslint:recommended", "plugin:storybook/recommended"],
+    "env": {
+        "node": true,
+        "browser": true,
+        "es6": true,
+        "jest": true
+    },
+    "parserOptions": {
+        "ecmaVersion": 6
+    },
+    "overrides": [
+        {
+            "extends": ["plugin:@nrwl/nx/typescript"],
+            "files": ["*.ts", "*.tsx"],
+            "rules": {}
+        },
+        {
+            "extends": ["plugin:@nrwl/nx/javascript"],
+            "files": ["*.js", "*.jsx"],
+            "rules": {}
+        },
+        {
+            "files": "*.json",
+            "parser": "jsonc-eslint-parser",
+            "rules": {}
+        }
+    ]
+}

package/.github/CODE_OF_CONDUCT.md

@@ -0,0 +1,76 @@
+# Contributor Covenant Code of Conduct
+
+## Our Pledge
+
+In the interest of fostering an open and welcoming environment, we as
+contributors and maintainers pledge to making participation in our project and
+our community a harassment-free experience for everyone, regardless of age, body
+size, disability, ethnicity, sex characteristics, gender identity and expression,
+level of experience, education, socio-economic status, nationality, personal
+appearance, race, religion, or sexual identity and orientation.
+
+## Our Standards
+
+Examples of behavior that contributes to creating a positive environment
+include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or
+ advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* Publishing others' private information, such as a physical or electronic
+ address, without explicit permission
+* Other conduct which could reasonably be considered inappropriate in a
+ professional setting
+
+## Our Responsibilities
+
+Project maintainers are responsible for clarifying the standards of acceptable
+behavior and are expected to take appropriate and fair corrective action in
+response to any instances of unacceptable behavior.
+
+Project maintainers have the right and responsibility to remove, edit, or
+reject comments, commits, code, wiki edits, issues, and other contributions
+that are not aligned to this Code of Conduct, or to ban temporarily or
+permanently any contributor for other behaviors that they deem inappropriate,
+threatening, offensive, or harmful.
+
+## Scope
+
+This Code of Conduct applies both within project spaces and in public spaces
+when an individual is representing the project or its community. Examples of
+representing a project or community include using an official project e-mail
+address, posting via an official social media account, or acting as an appointed
+representative at an online or offline event. Representation of a project may be
+further defined and clarified by project maintainers.
+
+## Enforcement
+
+Instances of abusive, harassing, or otherwise unacceptable behavior may be
+reported by contacting the project team at developers@sap.com. All
+complaints will be reviewed and investigated and will result in a response that
+is deemed necessary and appropriate to the circumstances. The project team is
+obligated to maintain confidentiality with regard to the reporter of an incident.
+Further details of specific enforcement policies may be posted separately.
+
+Project maintainers who do not follow or enforce the Code of Conduct in good
+faith may face temporary or permanent repercussions as determined by other
+members of the project's leadership.
+
+## Attribution
+
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4,
+available at https://www.contributor-covenant.org/version/1/4/code-of-conduct.html
+
+[homepage]: https://www.contributor-covenant.org
+
+For answers to common questions about this code of conduct, see
+https://www.contributor-covenant.org/faq

package/.github/ISSUE_TEMPLATE/bug_report.md

@@ -0,0 +1,60 @@
+---
+name: Bug report
+about: Create a report to help us improve
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+<!-- Feel free to remove sections that aren't relevant.
+
+Before opening:
+
+- [Search for duplicate or closed issues](https://github.com/SAP/fundamental-styles/issues?utf8=✓&q=is%3Aissue)
+- Read the [contributing guidelines](https://github.com/SAP/fundamental-styles/wiki/Contribution-Guidelines)
+
+Feature requests must include:
+- As much detail as possible for what we should add and why it's important
+- Relevant links to prior art, screenshots, or live demos whenever possible
+
+-->
+
+**Describe the bug**
+A clear and concise description of what the bug is.
+
+> Is this issue related to a specific component?
+
+> What version of the Fundamental Library Styles are you using?
+
+> What offering/product do you work on? Any pressing ship or release dates we should be aware of?
+
+> What front-end framework are you implementing in, e.g., Angular, React, etc.?
+
+
+**To Reproduce**
+Steps to reproduce the behavior:
+1. Go to '...'
+2. Click on '....'
+3. Scroll down to '....'
+4. See error
+
+**Expected behavior**
+A clear and concise description of what you expected to happen.
+
+**Screenshots**
+If applicable, add screenshots to help explain your problem.
+
+**Desktop (please complete the following information):**
+ - OS: [e.g. iOS]
+ - Browser [e.g. chrome, safari]
+ - Version [e.g. 22]
+
+**Smartphone (please complete the following information):**
+ - Device: [e.g. iPhone6]
+ - OS: [e.g. iOS8.1]
+ - Browser [e.g. stock browser, safari]
+ - Version [e.g. 22]
+
+**Additional context**
+Add any other context about the problem here.

package/.github/ISSUE_TEMPLATE/component-request.md

@@ -0,0 +1,61 @@
+---
+name: Component Request
+about: Request a new component
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+<!--
+Before opening:
+
+- [Search for duplicate or closed issues](https://github.com/SAP/fundamental-styles/issues?utf8=✓&q=is%3Aissue)
+- Read the [contributing guidelines](https://github.com/SAP/fundamental-styles/wiki/Contribution-Guidelines)
+
+Feature requests must include:
+- As much detail as possible for what we should add and why it's important
+- Relevant links to prior art, screenshots, or live demos whenever possible
+
+-->
+
+### Component name
+> Propose a new or variant name
+
+
+### Detailed description
+> Describe the request
+
+> What offering/product do you work on? Any pressing ship or release dates we should be aware of?
+
+> What front-end framework are you implementing in, e.g., Angular, React, etc.?
+
+
+### Use case
+> Describe when to use (and when not to use)
+
+
+### Visual style
+> Describe specific needs related to color, typography, iconography, borders, space, size, and other visual properties.
+
+> Describe how to arrange multiple instances and other alignment specifics.
+
+> How should this respond to common contexts, i.e., touch, RTL, small screens.
+
+> Describe interactive states, e.g., disabled, expanded, pressed.
+
+
+### Expected behavior
+> How should this handle events, outcomes, and transitions
+
+> What [states should be available](https://medium.com/swlh/the-nine-states-of-design-5bfe9b3d6d85), i.e., nothing, loading, none, one, some, too many, incorrect, correct, done.
+
+
+### Editorial
+> Advise on labels, tone, length, punctuation, truncation.
+
+
+## Additional information
+
+* Screenshots or code
+* Notes

package/.github/ISSUE_TEMPLATE/feature_request.md

@@ -0,0 +1,45 @@
+---
+name: Feature request
+about: Suggest an idea for this project
+title: ''
+labels: ''
+assignees: ''
+
+---
+
+<!-- Feel free to remove sections that aren't relevant.
+
+Before opening:
+- [Search for duplicate or closed issues](https://github.com/SAP/fundamental-styles/issues?utf8=✓&q=is%3Aissue)
+- Read the [contributing guidelines](https://github.com/SAP/fundamental-styles/wiki/Contribution-Guidelines)
+
+Feature requests must include:
+- As much detail as possible for what we should add and why it's important
+- Relevant links to prior art, screenshots, or live demos whenever possible
+
+-->
+
+**Is your feature request related to a problem? Please describe.**
+A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]
+
+> Is this issue related to a specific component?
+
+> What browser are you working in?
+
+> What version of Fundamental Library Styles are you using?
+
+> What offering/product do you work on? Any pressing ship or release dates we should be aware of?
+
+> What front-end framework are you implementing in, e.g., Angular, React, etc.?
+
+
+**Describe the solution you'd like**
+A clear and concise description of what you want to happen.
+
+
+**Describe alternatives you've considered**
+A clear and concise description of any alternative solutions or features you've considered.
+
+
+**Additional context**
+Add any other context or screenshots about the feature request here.

package/.github/ISSUE_TEMPLATE/issue-template-for-version-1-0-0.md

@@ -0,0 +1,37 @@
+---
+name: Issue template for version 1.0.0
+about: template for version 1.0.0
+title: ''
+labels: version 1.0
+assignees: ''
+
+---
+
+The following tasks should be done to consider this component as ready for version 1.0.0 release. 
+
+*Please make sure that all tasks are completed before opening the PR. Leave comments for the tasks that for some reason cannot be completed or are blocked.
+
+- [ ] design review - compare the properties defined in the design specs with the ones from the implementation. 
+Must be done for all themes: 
+    - [ ] Quartz Light
+    - [ ] Quartz Dark
+    - [ ] Quartz HCW
+    - [ ] Quartz HCB
+    - [ ] Morning Horizon
+    - [ ] Evening Horizon
+    - [ ] Horizon HCW
+    - [ ] Horizon HCB
+- [ ] Bug fixing related to the design review
+- [ ] Code base clean-up
+   - [ ] review the existing code
+   - [ ] see if the code can be simplified by using mixins, placeholders, variables
+   - [ ] see if a component mixin (for example a mixin added in the Menu file) can be reused in other component by added parameters or using `@content` and move it to the global mixin file
+   - [ ] use variables instead of overwriting the rules for modifier classes (ex. compact modifier)
+   - [ ] remove deprecated code or code we don't use
+- [ ] documentation for the component
+    - [ ] API - check if all modifier classes are documented (states, compact/cosy, etc.)
+    - [ ] Examples review - check if the existing examples cover all cases we have. We need to add examples for the states of the components (active, hover, disabled, etc.) so we can detect issues with Chromatic
+    - [ ] Add links to the UX guidelines and more info about when to use or not use the component, etc.
+- [ ] a11y - make sure the component follows the a11y guidelines in terms of markup, aria attributes, focus, etc.
+- [ ] review self-contain concept - a component should not modify the properties of another component. Each component should be able to live in isolation, aka not depending on any other component. Modifier classes should be added in such cases.
+- [ ] browser testing - the component should look like and behave the same way in all supported by us browsers.

package/.github/ISSUE_TEMPLATE/version_1_0_0.md

@@ -0,0 +1,28 @@
+The following tasks should be done to consider this component as ready for version 1.0.0 release. 
+
+*Please make sure that all tasks are completed before opening the PR. Leave comments for the tasks that for some reason cannot be completed or are blocked.
+
+- [ ] design review - compare the properties defined in the design specs with the ones from the implementation. 
+Must be done for all themes: 
+    - [ ] Quartz Light
+    - [ ] Quartz Dark
+    - [ ] Quartz HCW
+    - [ ] Quartz HCB
+    - [ ] Morning Horizon
+    - [ ] Evening Horizon
+    - [ ] Horizon HCW
+    - [ ] Horizon HCB
+- [ ] Bug fixing related to the design review
+- [ ] Code base clean-up
+   - [ ] review the existing code
+   - [ ] see if the code can be simplified by using mixins, placeholders, variables
+   - [ ] see if a component mixin (for example a mixin added in the Menu file) can be reused in other component by added parameters or using `@content` and move it to the global mixin file
+   - [ ] use variables instead of overwriting the rules for modifier classes (ex. compact modifier)
+   - [ ] remove deprecated code or code we don't use
+- [ ] documentation for the component
+    - [ ] API - check if all modifier classes are documented (states, compact/cosy, etc.)
+    - [ ] Examples review - check if the existing examples cover all cases we have. We need to add examples for the states of the components (active, hover, disabled, etc.) so we can detect issues with Chromatic
+    - [ ] Add links to the UX guidelines and more info about when to use or not use the component, etc.
+- [ ] a11y - make sure the component follows the a11y guidelines in terms of markup, aria attributes, focus, etc.
+- [ ] review self-contain concept - a component should not modify the properties of another component. Each component should be able to live in isolation, aka not depending on any other component. Modifier classes should be added in such cases.
+- [ ] browser testing - the component should look like and behave the same way in all supported by us browsers. 

package/.github/PULL_REQUEST_TEMPLATE.md

@@ -0,0 +1,47 @@
+## Related Issue
+Closes SAP/fundamental-styles#
+
+## Description
+{{ _Enter short description of the change_ }}
+
+## Screenshots
+> **NOTE:** If you've made any style changes, please provide appropriate screenshots (before and after) to help reviewers.
+>
+> To see examples of which screenshots to include, go to [Screenshot Examples](https://github.com/SAP/fundamental-styles/wiki/Pull-Request-Screenshot-Examples).
+
+### Before:
+
+
+### After:
+
+#### Please check whether the PR fulfills the following requirements
+
+1. The output matches the design specs
+- [ ] All values are in `rem`
+- [ ] Text elements follow the truncation rules
+- [ ] hover state of the element follow design spec
+- [ ] focus state of the element follow design spec
+- [ ] active state of the element follow design spec
+- [ ] selected state of the element follow design spec
+- [ ] selected hover state of the element follow design spec
+- [ ] pressed state of the element follow design spec
+- [ ] Responsiveness rules - the component has modifier classes for all breakpoints
+- [ ] Includes Compact/Cosy/Tablet design
+- [ ] RTL support
+2. The code follows fundamental-styles code standards and style
+- [ ] only one top level `fd-*` class is used in the file
+- [ ] BEM naming convention is used
+- [ ] Mixins are used for repeatable code (`fd-rtl`, `fd-ellipsis`, `fd-flex`, `fd-selected`, `fd-focus`, ect.)
+- [ ] A11y support - keyboard support, screenreader support, proper ARIA attributes, etc.
+- [ ] `fd-reset()` mixin is applied to all elements
+- [ ] Variables are used, if some value is used more than twice.
+- [ ] Checked if current components can be reused, instead of having new code.
+3. Testing
+- [ ] tested Storybook examples with "CSS Resources" `normalize` option 
+- [ ] tested Storybook examples with "CSS Resources" `unnormalize` option 
+- [ ] Verified all styles in IE11
+- [ ] Updated tests
+- [ ] last commit message should have `[ci visual]` so it can trigger chromatic visual regression (e.g. `test: run chromatic visual regression [ci visual]`)
+4. Documentation
+- [ ] Storybook documentation has been created/updated
+- [ ] Breaking Changes [wiki](https://github.com/SAP/fundamental-styles/wiki/Breaking-Changes) has been updated in case of breaking changes.

package/.github/actions/build/action.yml

@@ -0,0 +1,12 @@
+name: Build prod
+description: Builds the prod version of the package
+
+runs:
+  using: composite
+  steps:
+    - name: Build prod
+      run: yarn run build:prod
+      shell: bash
+    - name: Size
+      run: yarn run size
+      shell: bash

package/.github/actions/bump-version/action.yml

@@ -0,0 +1,21 @@
+name: Action for semantic version bump
+description: Bump version of root package.json
+
+inputs:
+  isPrerelease:
+    description: Whether this is a prerelease
+    required: false
+    default: "false"
+  writeFile:
+    description: Write to package.json
+    required: false
+    default: "false"
+outputs:
+  newVersion:
+    description: New version
+  isPrerelease:
+    description: Is prerelease version
+
+runs:
+  using: node16
+  main: ./index.js

package/.github/actions/bump-version/index.js

@@ -0,0 +1,90 @@
+const recommendedVersion = require('conventional-recommended-bump');
+const semver = require('semver');
+const fs = require('fs');
+const core = require('@actions/core');
+const packageJson = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
+const releaseType = core.getInput('isPrerelease') !== 'false'  ? 'prerelease' : 'release';
+const writeFile = core.getInput('writeFile') !== 'false';
+const currentVersion = packageJson.version;
+const prereleaseRequested = releaseType === 'prerelease';
+
+function isInPrerelease(version) {
+    return Array.isArray(semver.prerelease(version));
+}
+
+function shouldContinuePrerelease(version, expectType) {
+    return getCurrentActiveType(version) === expectType;
+}
+
+const TypeList = ['major', 'minor', 'patch'].reverse();
+
+/**
+ * extract the in-pre-release type in target version
+ *
+ * @param version
+ * @return {string}
+ */
+function getCurrentActiveType(version) {
+    const typelist = TypeList;
+    for (let i = 0; i < typelist.length; i++) {
+        if (semver[typelist[i]](version)) {
+            return typelist[i];
+        }
+    }
+}
+
+/**
+ * calculate the priority of release type,
+ * major - 2, minor - 1, patch - 0
+ *
+ * @param type
+ * @return {number}
+ */
+function getTypePriority(type) {
+    return TypeList.indexOf(type);
+}
+
+const bumpedVersionType = () => {
+    return new Promise((resolve, reject) => {
+        recommendedVersion({
+            preset: {
+                name: require.resolve('conventional-changelog-conventionalcommits'),
+                preMajor: semver.lt(currentVersion, '1.0.0')
+            },
+            tagPrefix: 'v'
+        }, (err, release) => {
+            if (err) {
+                return reject(err);
+            }
+            if (prereleaseRequested) {
+                if (isInPrerelease(currentVersion)) {
+                    if (shouldContinuePrerelease(currentVersion, release.releaseType) ||
+                        getTypePriority(getCurrentActiveType(currentVersion)) > getTypePriority(release.releaseType)
+                    ) {
+                        release.releaseType = 'prerelease';
+                        return resolve(release);
+                    }
+                }
+                release.releaseType = 'pre' + release.releaseType;
+                return resolve(release);
+            }
+            return resolve(release);
+        });
+    });
+};
+
+const run = async() => {
+    const release = await bumpedVersionType();
+    core.info(`${release.reason}, therefore release type should be ${release.releaseType}`);
+
+    const newVersion = semver.valid(release.releaseType) || semver.inc(currentVersion, release.releaseType, prereleaseRequested, 'rc');
+    core.info(`new version is ${newVersion}`);
+    if (writeFile) {
+        packageJson.version = newVersion;
+        fs.writeFileSync('./package.json', JSON.stringify(packageJson, null, 2));
+    }
+    core.setOutput('newVersion', newVersion);
+    core.setOutput('isPrerelease', semver.prerelease(newVersion) ? 'true' : 'false');
+};
+
+run();

package/.github/actions/generate-conventional-release-notes/action.yml

@@ -0,0 +1,10 @@
+name: Generate changelog
+description: Generates changelog from nearest release to current commit
+
+outputs:
+  generatedChangelog:
+    description: Generated changelog
+
+runs:
+  using: node16
+  main: ./index.js

package/.github/actions/generate-conventional-release-notes/closest-version.js

@@ -0,0 +1,31 @@
+const semver = require('semver');
+const fs = require('fs');
+const gitSemverTags = require('git-semver-tags');
+
+const packageJson = JSON.parse(fs.readFileSync('./package.json', 'utf8'));
+
+const semverTags = (maxVersion) => {
+    return new Promise((resolve, reject) => {
+        gitSemverTags({ tagPrefix: 'v', skipUnstable: false }, function(err, result) {
+            if (err) {
+                reject(err);
+            } else {
+                const firstLessIndex = result.findIndex(v => semver.lt(v, maxVersion));
+                resolve(result.slice(firstLessIndex, result.length));
+            }
+        });
+    });
+};
+
+module.exports = async() => {
+    const isPrerelease = !!semver.prerelease(packageJson.version);
+    const availableVersions = (await semverTags(packageJson.version));
+    let closestIndex = 0;
+    if (!isPrerelease) {
+        closestIndex = availableVersions.findIndex(v => !semver.prerelease(v));
+    }
+    return {
+        closest: availableVersions[closestIndex],
+        tagsTillClosest: availableVersions.slice(0, closestIndex)
+    };
+};

package/.github/actions/generate-conventional-release-notes/index.js

@@ -0,0 +1,26 @@
+const conventionalChangelog = require('conventional-changelog');
+const core = require('@actions/core');
+const through = require('through2');
+const closestVersion = require('./closest-version');
+const childProcess = require('child_process');
+
+const run = async() => {
+    const { closest, tagsTillClosest } = await closestVersion();
+    childProcess.execSync(`git tag -d ${tagsTillClosest.join(' ')}`);
+    const changelog = await conventionalChangelog({
+        preset: 'angular',
+        releaseCount: 1
+    }, null, { from: closest }, null, { headerPartial: '' });
+    let generatedReleaseNotes = '';
+    changelog
+        .pipe(through(function(chunk, _enc, callback) {
+            this.push(chunk);
+            generatedReleaseNotes += chunk.toString();
+            callback();
+        }))
+        .on('finish', () => {
+            core.setOutput('generatedReleaseNotes', generatedReleaseNotes);
+        });
+};
+
+run();

package/.github/actions/nodejs/action.yml

@@ -0,0 +1,34 @@
+name: Fundamental-styles action for Node.js
+description: Node.js setup cache
+
+inputs:
+  node-version:
+    description: Node.js version
+    required: false
+    default: 16.x
+
+runs:
+  using: composite
+  steps:
+    - name: Use Node.js ${{ inputs.node-version }}
+      uses: actions/setup-node@v3
+      with:
+        node-version: ${{ inputs.node-version }}
+    - uses: actions/cache@v3
+      id: node-modules-cache
+      with:
+        path: '**/node_modules/'
+        key: ${{ runner.os }}-${{ inputs.node-version }}-node-modules-${{ hashFiles('**/yarn.lock') }}
+        restore-keys: |
+          ${{ runner.os }}-${{ inputs.node-version }}-node-modules-
+
+    - shell: bash
+      run: |
+        echo "Show environment Node.js, yarn ..."
+        node -v
+        yarn -v
+
+    - name: Install dependencies
+      if: steps.node-modules-cache.outputs.cache-hit != 'true'
+      run: yarn install --frozen-lockfile
+      shell: bash

package/.github/actions/npm-publish/action.yml

@@ -0,0 +1,23 @@
+name: Publish library
+description: Publish library to npm repository
+inputs:
+  packagePaths:
+    description: Path to package.json
+    required: true
+  isPrerelease:
+    description: Is prerelease version
+    required: true
+    default: "false"
+  isHotfix:
+    description: Is hotfix version
+    required: true
+    default: "false"
+  token:
+    description: NPM token
+    required: true
+
+runs:
+  using: node16
+  main: ./index.js
+
+