Skip to content

Commit

Permalink
fix(storybook): merged current develop into branch
Browse files Browse the repository at this point in the history
  • Loading branch information
JpunktWpunkt committed Jan 2, 2024
2 parents 010f132 + ec508a2 commit b57f4e8
Show file tree
Hide file tree
Showing 35 changed files with 762 additions and 3,526 deletions.
36 changes: 36 additions & 0 deletions .github/workflows/analyze.yml
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
name: Lit-Analyze

on: [pull_request]

jobs:
analyze:
runs-on: ubuntu-latest

steps:
- name: Checkout code
uses: actions/checkout@v3

- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '18.x'

- name: Get node version
id: node
run: |
echo "::set-output name=version::$(node -v)"
- name: Enable Corepack
run: corepack enable

- name: Install yarn 4
run: yarn set version 4.x

- name: Install modules
run: yarn

- name: Generate tokens
run: yarn tokens:generate

- name: Run analyze
run: yarn analyze
2 changes: 1 addition & 1 deletion .github/workflows/compile.yml
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
name: Compile
name: TSC Compile

on: [pull_request]

Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/eslint.yml
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
name: eslint
name: Eslint

on: [pull_request]

Expand Down
2 changes: 1 addition & 1 deletion .github/workflows/test.yml
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
name: Test
name: Unit-Tests

on: [pull_request]

Expand Down
2 changes: 1 addition & 1 deletion .vscode/extensions.json
Original file line number Diff line number Diff line change
Expand Up @@ -3,6 +3,6 @@
"editorconfig.editorconfig",
"dbaeumer.vscode-eslint",
"esbenp.prettier-vscode",
"bierner.lit-html"
"runem.lit-analyzer"
]
}
118 changes: 49 additions & 69 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -2,24 +2,24 @@

![Boiler_Welcome](https://github.com/deven-org/B01LER-Kitchen/assets/122102805/f5aa5c3a-9d5b-4b98-a9df-29dd1b35b1ea)

## Content
## :page_with_curl: Content

- [B01LER](#b01ler)
- [Content](#content)
- [:page_with_curl: Content](#page_with_curl-content)
- [:star: Introduction](#star-introduction)
- [Benefits of B01LER](#benefits-of-b01ler)
- [Common misconceptions](#common-misconceptions)
- [1. Web Components are not accessibile](#1-web-components-are-not-accessibile)
- [Resources](#resources)
- [Help & Feedback](#help--feedback)
- [1. Web Components are not accessible](#1-web-components-are-not-accessible)
- [:art: Resources](#art-resources)
- [:tipping_hand_person: Help & Feedback](#tipping_hand_person-help--feedback)
- [Discussion Board](#github-discussion-board)
- [Slack](#slack)
- [Teams](#teams)
- [Email](#email)
- [B01LER Monthly](#b01ler-monthly)
- [Feedback](#feedback)
- [Requirements](#requirements)
- [:gear: Requirements](#gear-requirements)
- [:rocket: How to start](#rocket-how-to-start)
- [Prerequisites](#prerequisites)
- [Installation](#installation)
- [Setup](#setup)
- [Usage](#usage)
Expand All @@ -31,19 +31,15 @@


## :star: Introduction
B01LER is a fully customisable design system that enables you to easily create cohesive and consistent digital products
across multiple platforms and brands.
B01LER is a fully customisable design system (DS) that enables you to easily create cohesive and consistent digital products across multiple platforms and brands.

B01LER provides pre-built components that exist in design in the form of a [component library in Figma](https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?type=design&node-id=8941%3A1818&mode=design&t=fZvPevNIiIDONPxv-1), as well as in code in a repository (the one you have opened right now),
which is also [displayed in the web using Storybook](https://boilerds.com/storybook). Both the components in design and
in code are connected via the token system.
B01LER provides pre-built components that exist in design in the form of a [component library in Figma](https://www.figma.com/file/zPHgVJFeLAhdM4MdOymhPb/B01LER--%5Bv0.1---alpha-release%5D?type=design&node-id=8941%3A1818&mode=design&t=owVepZzAwdrehnmL-1) (the link to the Figma file above is exclusively for members of the Accenture organization, while those outside the organization can download the file [here](https://boilerds.com/B01LER%20%20%5Bv0.1%20-%20alpha%20release%5D.fig)), as well as in code in a repository (the one you have opened right now), which is also [displayed in the web using Storybook](https://boilerds.com/storybook). Both the components in design and in code are connected via a token system.

Utilizing design tokens, which represent the visual properties of a design system, such as typography, color and spacing,
B01LER is simultaneously consistent and flexible. By changing the tokens, you have the power to change the appearance of
the whole design system, including all the components and all the digital products build with it. In design and in code.
A token system is a collection of values which represent the visual properties of a design system, such as typography, color and spacing.

Overall, B01LER is a powerful tool that helps you work smarter, not harder. By streamlining the design and development
processes B01LER empowers you to create better products faster.
Utilizing tokens, B01LER is simultaneously consistent and flexible. By changing the tokens, you have the power to change the appearance of the whole design, including all the components and all the digital products build with it. In Figma and in code.

Overall, B01LER is a powerful tool that helps you work smarter, not harder. By streamlining the design and development processes B01LER empowers you to create better products faster.

### Benefits of B01LER
1. Increased efficiency in building design systems on brand, because semantic structure and architecture are pre-built
Expand All @@ -53,16 +49,19 @@ processes B01LER empowers you to create better products faster.
5. Immense cost savings, because the DS ramp-up phase is reduced from multiple months to days

### Common misconceptions
#### 1. Web Components are not accessibile
Some articles claim, that Web Components are not accessibile or that they are not complying with standard accessibility guidelines. The argument says that assistive technologies like screenreaders can not access the shadow DOM and for example are not able to "see" aria or role attributes that are needed to make components accessible. This is wrong. Modern screenreaders are not "looking" at the DOM. Instead they are accessing the accessibility tree, which is provided by the browser and also contains information from the shadow DOM.
#### 1. Web Components are not accessible
Some articles claim, that Web Components are not accessible or that they are not complying with standard accessibility guidelines. The argument says that assistive technologies like screenreaders can not access the shadow DOM and for example are not able to "see" aria or role attributes that are needed to make components accessible. This is wrong. Modern screenreaders are not "looking" at the DOM. Instead they are accessing the accessibility tree, which is provided by the browser and also contains information from the shadow DOM.


## :art: Resources
- [Check out our Figma File](https://www.figma.com/file/zPHgVJFeLAhdM4MdOymhPb/B01LER--%5Bv0.1---alpha-release%5D?type=design&node-id=8941%3A1818&mode=design&t=owVepZzAwdrehnmL-1) (the link to the Figma file above is exclusively for members of the Accenture organization, while those outside the organization can download the file [here](https://boilerds.com/B01LER%20%20%5Bv0.1%20-%20alpha%20release%5D.fig))
- [Have a look at our components in Storybook](https://b01ler.onrender.com/)

## Resources
- [Check out our Figma File](https://www.figma.com/file/C4vgEKz8mKyulJ4gm3Qdql/%F0%9F%AB%A7-%5BBLR%5D-The-B01LER?type=design&node-id=8941%3A1818&mode=design&t=fZvPevNIiIDONPxv-1)
- [Have a look at our components in Storybook](https://boilerds.com/storybook)

## :tipping_hand_person: Help & Feedback
### Github Discussion Board
Please have a look at our [Github discussion board](https://github.com/deven-org/telemetry-functions/discussions) to raise questions or start a discussion about a future feature.

## Help & Feedback
### Slack
Slack is our main internal communications channel and will most likely be the place where you can reach us best. Join the
[#boiler](https://song-asg.slack.com/archives/C062PQ9DJTD) channel and say hi 👋 (you need to be part of the Accenture
Expand All @@ -73,7 +72,7 @@ We are also on Microsoft Teams. Join the [B01LER](https://teams.microsoft.com/l/
Org to join).

### Email
You can send us messages via [boiler@accenture.com](mailto:boiler@accenture.com), which the team will try to respond
You can send us messages via [hello@boilerds.com](mailto:hello@boilerds.com), which the team will try to respond
to as quickly as possible.

### B01LER Monthly
Expand All @@ -85,85 +84,66 @@ post of our dedicated [Teams channel](https://teams.microsoft.com/l/channel/19%3
Link to Feedback-Form will be added with [issue #428](https://github.com/deven-org/B01LER-Kitchen/issues/428).


## Requirements
Please list all the requirements the user has to fullfill to be able to run your code. Consider adding links to other
tech documentations of possible dependencies to help users meet the requirements.We've added two examples of how you
could structure this section:
## :gear: Requirements
1. First you need to install Git. Git is needed to clone the project to your local machine. If you don't have it installed yet you can follow this [installation guide](https://git-scm.com/book/en/v2/Getting-Started-Installing-Git).

1. This setup is working for all operating system, testing on Windows 8, Windows 8.1, Windows 10, Mac and Linux. This
project is a Node.js package. You need Node Version 4 or higher and npm Version 2 or higher, check your installed
version with node -v and npm -v.
2. This project is a Node.js package. You need Node Version 18 or higher in order to run it. Check your installed version with node -v. For more information check out the [Node.js Documentation](https://nodejs.org/en/docs/).

2. To run our code you have to meet the following requirements:
- Node.js v18 <br> (for more information check out the [Node.js Documentation](https://nodejs.org/en/docs/))
- yarn (any version, we will pick the right settings later)
- corepack (might need to be installed additionally)
3. If you don't have Yarn installed, please install it (any version, we will pick the right settings later). For more information check out the [Yarn Documentation](https://classic.yarnpkg.com/en/docs).

In addition, you might need to install Corepack. For more information checkout [Corepack Documentation](https://nodejs.org/api/corepack.html).


## :rocket: How to start
### Prerequisites
...

### Installation
In this section you're supposed to provide the user with a step by step guide on how to install and use your project.
We've added an example below to give you an idea of how you could structure your guide.
> Note: You need to run terminal as administrator on Windows machines.
1. First, open a terminal and navigate to the folder you want to fork or clone this project

```sh
$ cd git_projects
```

1. First, create a folder and a package.json file
2. If you want to use B01LER as a starting point for your own design system, the first step is to fork the repository. You can do this via the GitHub web interface and just follow the instructions or read the documentation [here](https://docs.github.com/en/pull-requests/collaborating-with-pull-requests/working-with-forks/fork-a-repo). This step is only required for the initial setup of you repository.

In case you want to contribute to this repository, the first step is to clone the repository:

```sh
$ mkdir my-app
$ cd my-app
$ npm init -y
$ git clone https://github.com/deven-org/B01LER-Kitchen.git
```

2. now we enable corepack for yarn and chooose right version
3. now we enable corepack for yarn and chooose right version

```sh
$ corepack enable
$ yarn set version 4.x
$ yarn set version 4.0.2
```

3. Next, install the app
4. Next, install the app

```sh
$ yarn
```

4. Now start up your app
5. Now start up your app

```sh
$ yarn start
```

</details>
<br>

### Setup
Note: This is not filled out yet!
...

### Usage
Note: This is not filled out yet!
...


## :white_check_mark: How to test
Please provide a short explanation on how and where to run your tests. You can also add a link to the Testing page to
give further information. Also check out the following example to see one possibility to structure this section.

Example:

Local Setup

```sh
$ git clone project-name
$ cd project
$ npm install
```

The project test suite is run with

```sh
$ yarn test
```
Note: This is not filled out yet!
...


## :v: Contribute
Expand All @@ -180,5 +160,5 @@ This project is licensed under the [MIT license](./LICENSE.md).


## :green_heart: Code of conduct
[The B01LER is using the Contributor Covenant Code of Conduct. You can read the whole code of conduct [here](./doc/CODE_OF_CONDUCT.md).
The B01LER is using the Contributor Covenant Code of Conduct. You can read the whole code of conduct [here](./doc/CODE_OF_CONDUCT.md).

2 changes: 1 addition & 1 deletion deven-skeleton-install.config.json
Original file line number Diff line number Diff line change
@@ -1,3 +1,3 @@
{
"version": "1.5.0"
"version": "2.1.0"
}
Loading

0 comments on commit b57f4e8

Please sign in to comment.